/* Soy Gamer Digital — overrides de marca.
   El motor (cart_drawer.php, vo-cart.css, pages/404.php, vo-btn en general) consume estas
   variables; sin ellas el botón "Continuar" del carrito y los vo-btn quedan sin color.
   Mapeadas al acento rojo del theme de la demo martial-arts (--cnvs-themecolor en
   css/martial-arts/martial-arts.css) para que el carrito combine con el resto del sitio. */
:root {
  --brand-sand:    #CC1616;
  --brand-black:   #080808;
  --brand-white:   #FFFFFF;
  --brand-muted:   #777777;
  --brand-border:  #E5E5E5;
  --brand-surface: #F4F4F4;
  /* Tipografías del sitio (las mismas que fija martial-arts.css para body/headings):
     sin esto Canvas deja sus defaults "Inter"/"Playfair Display", que acá no se cargan,
     y todo lo que las consume (page-title, textos del listado) cae en Arial. */
  --cnvs-body-font:      'DM Sans', sans-serif;
  --cnvs-primary-font:   'Oswald', sans-serif;
  --cnvs-secondary-font: 'DM Sans', sans-serif;
}

/* Páginas internas de tienda (listado/detalle de productos): el fondo es blanco a propósito,
   pero el theme oscuro de la demo define el color de texto base claro (--cf-text #E8E8E8) y
   los nombres, filtros y links del aside quedaban blanco sobre blanco. Se pisa solo dentro de
   estos contenedores (la home y las secciones oscuras no se tocan). */
#VOConteiner,
#VOContainerDetail,
#VOContainerContent {
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
/* Aire antes del footer: el my-md-4 del .content-wrap colapsa por fuera del #content blanco
   (sin padding), así que sin paginación la última fila de tarjetas quedaba pegada al footer. */
#VOContainerContent { padding-bottom: 3rem; }
#VOConteiner a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary),
#VOContainerDetail a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary),
#VOContainerContent a:not(.vo-quick-add):not(.vo-btn):not(.vo-btn-primary) { color: #333; }
#VOConteiner a:not(.vo-quick-add):hover,
#VOContainerDetail a:not(.vo-quick-add):hover,
#VOContainerContent a:not(.vo-quick-add):hover { color: var(--brand-sand); }
#VOConteiner :is(h1, h2, h3, h4, h5, h6),
#VOContainerDetail :is(h1, h2, h3, h4, h5, h6),
#VOContainerContent :is(h1, h2, h3, h4, h5, h6) { color: #111; }
#VOConteiner .vo-card-brand a,
#VOContainerContent .vo-card-brand a { color: var(--brand-sand); }
#VOConteiner .vo-card-name,
#VOContainerDetail .vo-card-name,
#VOContainerContent .vo-card-name { color: #1a1a1a; }

/* Cart drawer (core/includes/partials/cart_drawer.php): fondo blanco como en el resto de
   la tienda, pero hereda el texto claro del theme oscuro — título, nombre, precio y
   subtotal quedaban blanco sobre blanco. Mismo criterio que los contenedores de arriba. */
#cartDrawer {
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
#cartDrawer :is(h1, h2, h3, h4, h5, h6),
#cartDrawer .vo-cart-item-name,
#cartDrawer .vo-cart-item-name a,
#cartDrawer .vo-cart-item-price,
#cartDrawer .vo-cart-subtotal .amount,
#cartDrawer .vo-qty-val { color: #111; }
#cartDrawer .vo-cart-item-name a:hover { color: var(--brand-sand); }
#cartDrawer .vo-cart-checkout:hover { background: var(--brand-sand); }

/* Página del carrito (core/carrito/index.php, #VOCarrito): mismo problema — fondo blanco
   con el texto claro del theme oscuro, así que los títulos (Tus datos, Forma de pago,
   Tu pedido...), labels y descripciones de las formas de pago/envío no se veían. */
#VOCarrito {
  --vo-cart-sticky-top: 160px; /* header fijo (~137px) + aire, ver .vo-sticky-checkout-summary en vo-cart.css */
  --cnvs-body-color: #333;
  --cnvs-heading-color: #111;
  color: #333;
}
#VOCarrito :is(h1, h2, h3, h4, h5, h6),
#VOCarrito .form-label,
#VOCarrito .form-check-label,
#VOCarrito dt { color: #111; }
#VOCarrito a:not(.vo-btn):not(.vo-btn-primary):not(.alert-link) { color: #333; }
#VOCarrito a:not(.vo-btn):not(.vo-btn-primary):hover { color: var(--brand-sand); }

/* Tarjetas de producto: core/assets/vo-contents.css fuerza un recorte panorámico
   (aspect-ratio: 8/5, pensado para las fotos de indumentaria de Elisee) sin importar el
   tamaño que pida configImg — con nuestras imágenes de códigos/tarjetas digitales (recorte
   500x800, ver CONFIG_IMG_LISTADO en config.inc.php) eso tapaba la mitad de abajo de la
   tarjeta (el texto "2800 POINTS", etc). Como el servidor ya entrega siempre el mismo recorte
   (500x800, igual que el sitio anterior), se anula el aspect-ratio y el object-fit y la imagen
   se muestra a su tamaño real — mismo criterio que las tarjetas de la home. */
/* (más específico que el core: vo-contents.css se carga después de este archivo) */
.vo-product-card .vo-card-img-wrap { aspect-ratio: auto; }
.vo-product-card .vo-card-img-wrap img.img-primary { aspect-ratio: auto; height: auto; object-fit: initial; }
.vo-product-card .vo-card-img-wrap img.img-hover { aspect-ratio: auto; }

/* Bloques "Novedades"/"Destacados" de la home: reusan la estética de las tarjetas de
   instructors.php (.cf-instructor-card) a pedido — la tarjeta original es un <div> sin link;
   acá es un <a>. La imagen de producto ya viene recortada 500x800 desde el servidor
   (CONFIG_IMG_LISTADO, siempre el mismo tamaño), así que no hace falta forzar un
   aspect-ratio/object-fit en el CSS (esos venían de .cf-instructor-img, pensado para fotos
   de instructor 3:4, y terminaban recortando la imagen del lado del cliente encima del
   recorte del servidor) — se pisan y se deja que la imagen se muestre a su tamaño real. */
a.cf-instructor-card { display: block; text-decoration: none; color: inherit; }
a.cf-instructor-card:hover { text-decoration: none; color: inherit; }
.sgd-feat-img { aspect-ratio: auto; height: auto; object-fit: initial; }
.sgd-feat-old { opacity: 0.55; margin-right: 0.35rem; }
.sgd-feat-card { height: 100%; }

/* Stats band (home): igual, adaptado a 4 links de redes sociales en vez de stats de la
   demo — .cf-stats-inner ya era un <div>, acá cada item es un <a>. */
.cf-social-stat { text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; }
.cf-social-stat:hover { text-decoration: none; opacity: 0.85; transform: translateY(-3px); }
.cf-social-stat .cf-stat-num { font-size: 2rem; }

/* Hero: la demo martial-arts trae una foto de gimnasio de fondo (CDN de la demo) —
   la reemplazamos por un fondo generado en CSS, sin depender de una foto con derechos ajenos. */
.cf-hero-bg {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(204,22,22,0.25) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(204,22,22,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #141414 60%, #0a0a0a 100%);
  background-size: cover;
}

/* Perks band (home) */
.sgd-perks { background: #0a0a0a; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.sgd-perk-icon { font-size: 2rem; color: var(--brand-sand); display: block; margin-bottom: 1rem; }
.sgd-perk-title { font-family: 'Oswald', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 0.5rem; }
.sgd-perk-text { font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }

/* Category cards (home) */
.sgd-categories { background: #111; }
.sgd-categories h2 { color: #fff; }
.sgd-categories .color { color: var(--brand-sand) !important; }
.col-lg-2-4 { flex: 0 0 auto; width: 20%; }
@media (max-width: 991.98px) { .col-lg-2-4 { width: 33.3333%; } }
@media (max-width: 575.98px) { .col-lg-2-4 { width: 50%; } }
.sgd-cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; padding: 2rem 1rem; height: 100%;
  background: #181818; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px;
  text-decoration: none; transition: border-color 0.25s ease, transform 0.25s ease;
}
.sgd-cat-card:hover { border-color: var(--brand-sand); transform: translateY(-3px); }
.sgd-cat-card i { font-size: 2.2rem; color: var(--brand-sand); }
.sgd-cat-card span { font-family: 'Oswald', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }

/* Páginas interiores (contacto, etc.): el theme de la demo pone #content/#wrapper en
   blanco por default (pensado para que cada sección de la demo original pusiera su propio
   fondo oscuro) — el resto del sitio es oscuro, así que acá también lo forzamos para no
   quedar con texto blanco sobre blanco. */
#content.sgd-dark-section { background-color: #0a0a0a !important; }
.sgd-dark-section .fbox-content h3 span.subtitle { color: rgba(255,255,255,0.6); }

/* Página de contacto: mismo look que el partial contact.php de la demo martial-arts,
   con los estilos inline de la demo pasados a clases. */
.sgd-contact-lead { color: var(--cf-muted); font-size: 0.92rem; line-height: 1.7; margin-bottom: 2rem; }
.sgd-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.sgd-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 575.98px) { .sgd-contact-grid { grid-template-columns: 1fr; } }
.sgd-contact-label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-muted); }
.sgd-contact-input {
  width: 100%; padding: 0.75rem 1rem; outline: none;
  background: var(--cf-dark2); border: 1px solid var(--cf-border); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; transition: border-color 0.2s;
}
.sgd-contact-input:focus { border-color: var(--cnvs-themecolor); }
.sgd-contact-input::placeholder { color: #777; }
textarea.sgd-contact-input { resize: vertical; }
.sgd-contact-alert { display: flex; gap: 12px; align-items: flex-start; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; font-size: 0.92rem; line-height: 1.6; color: #fff; }
.sgd-contact-alert i { font-size: 1.2rem; line-height: 1.4; }
.sgd-contact-alert-ok { background: rgba(25,135,84,0.12); border: 1px solid rgba(25,135,84,0.5); }
.sgd-contact-alert-ok i { color: #2fbf71; }
.sgd-contact-alert-error { background: rgba(var(--cnvs-themecolor-rgb),0.1); border: 1px solid rgba(var(--cnvs-themecolor-rgb),0.45); }
.sgd-contact-alert-error i { color: var(--cnvs-themecolor); }
.sgd-contact-card { padding: 2rem; margin-bottom: 1.5rem; background: var(--cf-dark2); border: 1px solid var(--cf-border); }
.sgd-contact-card-accent { background: rgba(var(--cnvs-themecolor-rgb),0.08); border-color: rgba(var(--cnvs-themecolor-rgb),0.25); }
.sgd-contact-card-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; margin-bottom: 1.2rem; color: #fff; }
.sgd-contact-card .cf-footer-contact-item a { color: inherit; font-size: 0.9rem; }
.sgd-contact-card .cf-footer-contact-item a:hover { color: var(--cnvs-themecolor); }
.sgd-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sgd-contact-list li { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; color: var(--cf-muted); }
.sgd-contact-list i { color: var(--cnvs-themecolor); }
.sgd-contact-eyebrow { font-family: 'Oswald', sans-serif; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cf-muted); margin-bottom: 0.8rem; }

/* Header: logo + buscador destacado + whatsapp/ofertas/carrito, con la barra de
   categorías debajo (layout pedido: referencia Frávega para el buscador, referencia
   Canvas demo-construction para la barra de categorías bajo el header). */
#header-wrap { background-color: #0a0a0a; }

.sgd-header-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.sgd-header-logo { flex-shrink: 0; order: 1; }

.sgd-search-form {
  order: 3;
  flex: 1 1 100%;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
}
.sgd-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.7rem 1rem;
  color: #fff;
  font-size: 0.9rem;
}
.sgd-search-input::placeholder { color: rgba(255,255,255,0.4); }
.sgd-search-input:focus { outline: none; }
.sgd-search-btn {
  background: var(--brand-sand);
  border: none;
  color: #fff;
  padding: 0 1.2rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.sgd-search-btn:hover { background: #a30f0f; }

.sgd-header-icons { order: 2; display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; margin-left: auto; }
.sgd-header-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 1.05rem;
  transition: border-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.sgd-header-icon:hover { border-color: var(--brand-sand); color: var(--brand-sand); }
/* Mismo estilo "cinta" angulada que .btn-cf-primary (botón "Free Trial Class" de la
   demo), a tamaño de header — ver clip-path en css/martial-arts/martial-arts.css. */
.sgd-header-offers {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-sand);
  color: #fff;
  padding: 0 1.4rem 0 1.1rem;
  height: 42px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}
.sgd-header-offers:hover {
  background: var(--cf-red-dark, #991010);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(204,22,22,0.45);
}

.sgd-cat-bar { background: #111; border-top: 1px solid rgba(255,255,255,0.07); }
/* display:flex solo en desktop (.is-expanded-menu): en mobile Canvas oculta el menú y lo
   muestra al tocar el botón de las 3 rayitas; forzar flex acá lo dejaba siempre visible. */
.sgd-cat-nav .menu-container {
  margin: 0;
  padding: 0;
  list-style: none;
}
.is-expanded-menu .sgd-cat-nav .menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
/* Tamaño igual al menú de la demo original (HOME/DISCIPLINES/SCHEDULE/...): 13px,
   weight 700, line-height 22px. */
.sgd-cat-nav .menu-item > a {
  display: block;
  padding: 0.85rem 1.1rem;
  color: rgba(255,255,255,0.72);
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}
.sgd-cat-nav .menu-item > a > div { display: inline; }
.sgd-cat-nav .menu-item > a:hover,
.sgd-cat-nav .menu-item.current > a { color: var(--brand-sand); }

@media (min-width: 768px) {
  .sgd-header-row { flex-wrap: nowrap; }
  .sgd-search-form { order: 2; flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
  .sgd-header-icons { order: 3; margin-left: 0; }
}

/* Listado sin resultados: core/assets/vo-aside.css usa 'Cormorant Garamond' (fuente de
   Elisee/Trihada) para el título, que este sitio no carga — se pasa a la tipografía de
   títulos del sitio (Oswald). */
#VOConteiner .vo-no-results-title {
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
}

/* ── Ficha de producto (vo/resources/templates/shop/detail.php) ───────────
   Portada acotada a la izquierda + bloque de compra; abajo descripción y consulta.
   Los links van con #VOContainerContent para ganarle al color:#333 genérico de arriba. */
.sgd-detail { padding-top: 10px; }
.sgd-detail-cover {
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.sgd-detail-cover img { display: block; }
.sgd-detail-thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.sgd-detail-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid #eee; }

.sgd-detail-kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#VOContainerContent .sgd-detail-cat {
  font-family: var(--cnvs-primary-font);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-sand);
  font-weight: 600;
}
.sgd-detail-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 30px; background: #111; color: #fff;
}
.sgd-detail-pill-red { background: var(--brand-sand); }

.sgd-detail-title {
  font-family: var(--cnvs-primary-font);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sgd-detail-specs {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.sgd-detail-specs li {
  background: #f4f4f4; border-left: 3px solid var(--brand-sand);
  border-radius: 4px; padding: 8px 12px; line-height: 1.3;
}
.sgd-detail-specs span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #777; }
.sgd-detail-specs strong, #VOContainerContent .sgd-detail-specs a { font-weight: 700; color: #111; }
#VOContainerContent .sgd-detail-specs a:hover { color: var(--brand-sand); }

.sgd-detail-price { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sgd-detail-price s { color: #999; font-size: 1.1rem; }
.sgd-detail-price-main { font-family: var(--cnvs-primary-font); font-size: 2.2rem; font-weight: 700; color: #111; line-height: 1; }
.sgd-detail-cuotas { color: #555; margin-bottom: 0; }

.sgd-detail-form { margin-top: 20px; }
.sgd-detail-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-bottom: 4px; }
.sgd-detail-buy-row { display: flex; gap: 10px; }
.sgd-detail-qty { width: 80px; flex: 0 0 80px; text-align: center; }
.sgd-detail-buy-btn { flex: 1 1 auto; max-width: 360px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.sgd-detail-nostock { margin-top: 20px; color: var(--brand-sand); font-weight: 600; }

.sgd-detail-perks { list-style: none; padding: 18px 0 0; margin: 22px 0 0; border-top: 1px solid #eee; }
.sgd-detail-perks li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: #444; }
.sgd-detail-perks i { color: var(--brand-sand); font-size: 1.1rem; }
.sgd-detail-loc-text { font-size: .85rem; color: #777; margin-top: 10px; }

.sgd-detail-bottom { margin-top: 0; padding-top: 10px; border-top: 1px solid #eee; }
.sgd-detail > .row:first-child { padding-bottom: 36px; }
.sgd-detail-h2 { font-family: var(--cnvs-primary-font); font-size: 1.4rem; text-transform: uppercase; margin-bottom: 14px; }
.sgd-detail-text { color: #444; line-height: 1.7; }
.sgd-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
#VOContainerContent .sgd-detail-tags a {
  font-size: .78rem; padding: 4px 12px; border-radius: 30px; background: #f1f1f1; color: #333; text-transform: capitalize;
}
#VOContainerContent .sgd-detail-tags a:hover { background: var(--brand-sand); color: #fff; }
.sgd-detail-contact { background: #111; color: #ccc; border-radius: 10px; padding: 28px; }
#VOContainerContent .sgd-detail-contact .sgd-detail-h2 { color: #fff; }
.sgd-detail-contact strong { color: #fff; }
.sgd-detail-contact .form-control { background: #1c1c1c; border-color: #333; color: #fff; }
.sgd-detail-contact .form-control::placeholder { color: #888; }

@media (min-width: 992px) {
  .sgd-detail-contact { position: sticky; top: 100px; }
}
@media (max-width: 767.98px) {
  .sgd-detail-cover { max-width: 240px; }
  .sgd-detail-buy-btn { max-width: none; }
}
.sgd-detail .vo-btn-primary, .sgd-detail .vo-btn-primary:hover { color: #fff; }
.sgd-detail .vo-btn-primary:hover { background: #a80f0f; border-color: #a80f0f; }
/* La regla genérica "#VOContainerContent a:not(...):not(...):not(...)" les gana en especificidad. */
#VOContainerContent .sgd-detail a.sgd-detail-cat { color: var(--brand-sand) !important; }
#VOContainerContent .sgd-detail-specs a:hover,
#VOContainerContent .sgd-detail-tags a:hover { color: var(--brand-sand) !important; }
#VOContainerContent .sgd-detail-tags a:hover { background: #f1f1f1; }