/* =========================================================
   SHOP.CSS (LIMPIO) - GeneratePress Child + WooCommerce
   - Sin reglas duplicadas
   - Grids estables (no floats)
   - Productos SOLO dentro de .home-products (tu Home)
   ========================================================= */


/* ===========================
   1) DESIGN TOKENS (BASE)
   =========================== */
:root{
  --bg-main: #0b0f19;
  --bg-2: #0f1629;
  --card: rgba(17, 22, 42, .86);
  --card-2: rgba(17, 22, 42, .62);

  --text: #e5e7eb;
  --muted: #9ca3af;

  --primary: #f59e0b;
  --primary-2: #fbbf24;

  --border: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.12);

  --radius: 14px;
  --radius-lg: 18px;

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.30);

  --container: 1200px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


/* ===========================
   2) GLOBAL BASE (DARK)
   =========================== */
html, body{ height: 100%; }

body{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(245,158,11,.15), transparent 55%),
    radial-gradient(900px 500px at 80% 20%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--bg-main), var(--bg-2)) !important;
  color: var(--text) !important;
  font-family: var(--font);
}

.site, .site-content, .content-area, .inside-page-header{
  background: transparent !important;
}

.inside-navigation,
.inside-header,
.inside-top-bar,
.site-footer{
  background: transparent !important;
}

a{ color: var(--primary-2); text-decoration: none; }
a:hover{ color: var(--primary); }

h1,h2,h3{ color: var(--text); letter-spacing:-0.02em; }

/* Botones */
.btn,
.button,
button,
input[type="submit"]{
  border-radius: 999px;
}

.btn-primary,
.woocommerce a.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,.10);
  padding: 12px 16px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, filter .15s ease;
}

.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* “Card” base */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.pill{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: rgba(229,231,235,.78);
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.pill:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  background: rgba(255,255,255,.06);
  color: rgba(229,231,235,.95);
}

/* Container “de tu diseño” */
.container{
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

/* Ocultar sidebar (para landing limpia) */
.widget-area, .sidebar, #right-sidebar, #left-sidebar{
  display: none !important;
}

/* Oculta título automático SOLO en la portada si aparece */
.home .entry-header{
  display: none !important;
}


/* ===========================
   3) FULL WIDTH SOLO HOME
   (sin depender de metabox)
   =========================== */
.home #primary,
.home .site-content,
.home .content-area{
  max-width: none !important;
  width: 100% !important;
}

.home .inside-article{
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ===========================
   4) HOME HERO
   =========================== */
.home-hero{ padding: 72px 0 38px; }

.home-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: stretch;
}

.home-hero__title{
  font-size: clamp(34px, 5vw, 56px);
  margin: 12px 0 10px;
  line-height: 1.05;
  text-shadow: 0 20px 70px rgba(0,0,0,.55);
}

.home-hero__subtitle{
  color: rgba(229,231,235,.70);
  max-width: 52ch;
  margin: 0 0 18px;
  font-size: 16px;
}

.home-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 18px;
}

.btn-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.btn-ghost:hover{
  border-color: var(--border-2);
  transform: translateY(-1px);
}

.btn-sm{ padding: 10px 12px; font-size: 14px; }

.home-hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

/* Trust mini pills */
.home-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

.home-trust__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  color: rgba(229,231,235,.72);
  font-weight: 700;
  font-size: 13px;
}

.home-trust__dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(245,158,11,.15);
}

/* Card derecha */
.home-hero__card{ padding: 18px; position: relative; overflow:hidden; }

.home-hero__card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at 20% 15%, rgba(245,158,11,.20), transparent 60%),
    radial-gradient(420px 220px at 85% 20%, rgba(59,130,246,.16), transparent 62%),
    radial-gradient(320px 180px at 60% 95%, rgba(16,185,129,.10), transparent 60%);
  pointer-events:none;
  filter: blur(10px);
  opacity: .9;
}

.home-hero__cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
  position: relative;
}

.home-hero__stock{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.home-hero__product{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  align-items:center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  position: relative;
}

.home-hero__img{
  width:120px;height:90px;border-radius:12px;
  border: 1px solid var(--border);
  background:
    radial-gradient(90px 60px at 30% 30%, rgba(245,158,11,.25), transparent 60%),
    radial-gradient(90px 60px at 70% 30%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.home-hero__name{ margin:0 0 6px; font-size:18px; position: relative; }
.home-hero__meta{ margin:0 0 10px; color: var(--muted); font-size:13px; position: relative; }

.home-hero__priceRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  position: relative;
}

.home-hero__price{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* mini grid derecha */
.home-hero__miniGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
  position: relative;
}

.mini{
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  box-shadow:none;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}

.mini__dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(245,158,11,.15);
}

.mini__t{ font-weight: 900; font-size: 13px; }
.mini__s{ color: var(--muted); font-size: 12px; }

@media (max-width: 960px){
  .home-hero__grid{ grid-template-columns: 1fr; }
}


/* ===========================
   5) SECCIONES HOME
   =========================== */
.home-section{ padding: 28px 0; }

.section-title{
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.1;
  margin: 0 0 8px;
}
.section-subtitle{
  margin: 0 0 18px;
  color: rgba(229,231,235,.70);
  font-size: 15px;
}

/* Head row (título izq / botón der) */
.home-section__head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.home-section__left{ min-width: 260px; }
.home-section__right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }


/* ===========================
   6) CATEGORÍAS (cards)
   =========================== */
.category-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top: 10px;
}

.category-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  text-decoration:none;
  box-shadow:none;
  position:relative;
  overflow:hidden;

  background: rgba(17,22,42,.70);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(10px);

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.category-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16);
  background: rgba(17,22,42,.82);
}

.category-card__icon{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}

.category-card__body{ min-width:0; flex:1 1 auto; }

.category-card__title{
  font-weight: 900;
  font-size: 15px;
  color: rgba(229,231,235,.95);
  margin:0 0 4px;
}

.category-card__sub{
  font-size: 13px;
  color: rgba(229,231,235,.65);
  margin:0;
  line-height:1.3;
}

.category-card__arrow{
  flex:0 0 auto;
  width:34px;height:34px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  color: rgba(229,231,235,.70);
  background: rgba(255,255,255,.03);
}

.category-card:hover .category-card__arrow{
  color:#111827;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
  border-color: rgba(255,255,255,.10);
}

@media (max-width: 960px){
  .category-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .category-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   7) PRODUCTOS HOME (LA PARTE IMPORTANTE)
   -> SOLO afecta a tus shortcodes dentro de .home-products
   -> NO TOCA la Tienda/Categorías de Woo fuera de tu Home
   ========================================================= */

/* Asegura wrapper full width */
.home-products,
.home-products .woocommerce,
.home-products .woocommerce-page{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mata “floats” clásicos SOLO acá */
.home-products ul.products li.product{
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Grid real SOLO acá */
.home-products ul.products{
  list-style: none !important;
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-content: stretch !important;
  align-content: start !important;
}

/* Estilo card SOLO acá */
.home-products ul.products li.product{
  padding: 12px !important;
  background: rgba(17,22,42,.70) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(10px);
  overflow: hidden;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.home-products ul.products li.product:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(17,22,42,.82) !important;
}

/* Imagen fija para consistencia */
.home-products ul.products li.product a img{
  width: 100% !important;
  height: 220px !important;
  object-fit: contain;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.02);
  margin: 0 0 10px !important;
}

/* Textos */
.home-products ul.products li.product .woocommerce-loop-product__title{
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 8px 0 6px !important;
  color: rgba(229,231,235,.95) !important;
}
.home-products ul.products li.product .price{
  color: rgba(229,231,235,.82) !important;
  font-weight: 900 !important;
  margin: 0 0 10px !important;
}

/* Botón */
.home-products ul.products li.product a.button{
  width: 100% !important;
  text-align: center !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fbbf24, #f59e0b) !important;
  color: #111827 !important;
  font-weight: 900 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  padding: 12px 14px !important;
}

/* Quitar elementos que meten “aire” */
.home-products .woocommerce-result-count,
.home-products .woocommerce-ordering{
  display: none !important;
}

/* Responsive */
@media (max-width: 1100px){
  .home-products ul.products{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 960px){
  .home-products ul.products{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 520px){
  .home-products ul.products{ grid-template-columns: 1fr !important; }
  .home-products ul.products li.product a img{ height: 200px !important; }
}


/* ===========================
   8) CTA FINAL
   =========================== */
.home-cta{ padding: 36px 0 84px; }
.home-cta__wrap{ position: relative; overflow: hidden; padding: 18px; }

.home-cta__wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 10% 30%, rgba(245,158,11,.18), transparent 60%),
    radial-gradient(520px 260px at 90% 30%, rgba(59,130,246,.14), transparent 62%);
  pointer-events:none;
  filter: blur(10px);
  opacity: .9;
}

.home-cta__copy{ position: relative; }
.home-cta__title{ margin:0 0 10px; }
.home-cta__text{ margin:0 0 14px; color: rgba(229,231,235,.70); }
.home-cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.home-cta__promo{
  position: relative;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 14px;
}

/* =========================================================
   FIX DEFINITIVO: “corridos” en grilla Woo (HOME)
   Causa: .first/.last + clear/float heredado del tema/Woo
   ========================================================= */

.home-products ul.products{
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 14px !important;
  justify-content: stretch !important;
  align-content: start !important;
  grid-auto-flow: row !important;
}

.home-products ul.products li.product,
.home-products .woocommerce ul.products li.product,
.home-products .woocommerce-page ul.products li.product{
  float: none !important;
  clear: none !important;       /* <- CLAVE */
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Woo/temas suelen aplicar clear:both a .first */
.home-products ul.products li.product.first,
.home-products ul.products li.product.last{
  clear: none !important;
}

/* Por si el tema usa inline-block o text-align hacks */
.home-products ul.products{
  text-align: left !important;
}

/* =========================================================
   FIX REAL: centrar correctamente el grid de productos
   ========================================================= */

.home-products ul.products{
  display: grid !important;

  /* columnas */
  grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;

  /* separación */
  gap: 14px !important;

  /* 🔑 CLAVE: centrar el GRID */
  justify-content: center !important;

  /* evitar que se pegue a la izquierda */
  margin-left: auto !important;
  margin-right: auto !important;

  /* ancho controlado como el diseño */
  max-width: var(--container) !important;
}

/* responsive */
@media (max-width: 1100px){
  .home-products ul.products{
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  }
}
@media (max-width: 960px){
  .home-products ul.products{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}
@media (max-width: 520px){
  .home-products ul.products{
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   FIX DEFINITIVO GRID WOO EN HOME (GeneratePress + Woo)
   Problema: reglas columns-X / .first / float/clear / widths %
   ========================================================= */

/* 1) Forzar GRID en el UL real de Woo dentro del bloque home-products */
.home-products .woocommerce ul.products,
.home-products .woocommerce-page ul.products,
.home-products ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* 3 en home como tu diseño */
    gap: 14px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    /* evita rarezas de layout heredado */
    list-style: none !important;
    float: none !important;
    clear: none !important;
}

/* 2) Matar SI o SI floats/clear/widths en cada LI (incluye .first/.last) */
.home-products .woocommerce ul.products li.product,
.home-products .woocommerce-page ul.products li.product,
.home-products ul.products li.product,
.home-products .woocommerce ul.products li.product.first,
.home-products .woocommerce ul.products li.product.last,
.home-products .woocommerce-page ul.products li.product.first,
.home-products .woocommerce-page ul.products li.product.last {
    float: none !important;
    clear: none !important;
    /* <- ESTO QUITA EL “CORRIDO” */
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
}

/* 3) GeneratePress/Woo a veces pone inline-block/width por columnas */
.home-products .woocommerce.columns-1 ul.products li.product,
.home-products .woocommerce.columns-2 ul.products li.product,
.home-products .woocommerce.columns-3 ul.products li.product,
.home-products .woocommerce.columns-4 ul.products li.product,
.home-products .woocommerce.columns-5 ul.products li.product,
.home-products .woocommerce.columns-6 ul.products li.product {
    width: auto !important;
}

/* 4) Responsive (home) */
@media (max-width: 960px) {

    .home-products .woocommerce ul.products,
    .home-products .woocommerce-page ul.products,
    .home-products ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {

    .home-products .woocommerce ul.products,
    .home-products .woocommerce-page ul.products,
    .home-products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   MARTILLAZO HOME: Woo Grid estable (sin corrimientos)
   Solo afecta la portada (body.home)
   ========================================================= */

body.home .woocommerce ul.products,
body.home .woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    /* HOME: 3 columnas */
    gap: 14px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
    clear: none !important;
    list-style: none !important;
}

/* Quitar cualquier “columna por porcentaje” que mete Woo/tema */
body.home .woocommerce ul.products[class*="columns-"],
body.home .woocommerce-page ul.products[class*="columns-"] {
    display: grid !important;
}

/* LI: matar floats/clear/widths (incluye .first/.last que provocan corrimiento) */
body.home .woocommerce ul.products li.product,
body.home .woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    clear: unset !important;
    /* <- por si viene clear:both */
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
}

/* Woo/GP: a veces el corrimiento viene SOLO por .first */
body.home .woocommerce ul.products li.product.first,
body.home .woocommerce-page ul.products li.product.first {
    clear: none !important;
    clear: unset !important;
}

/* Quitar pseudo-clears heredados */
body.home .woocommerce ul.products::before,
body.home .woocommerce ul.products::after,
body.home .woocommerce-page ul.products::before,
body.home .woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

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

    body.home .woocommerce ul.products,
    body.home .woocommerce-page ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {

    body.home .woocommerce ul.products,
    body.home .woocommerce-page ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   PASO 2: HEADERS DE SECCIÓN + ESPACIADO PERFECTO
   ========================================================= */

/* El bloque completo de cada sección */
.home-fullwidth .home-section {
    padding: 26px 0 !important;
}

/* Header: fila perfecta izquierda/derecha */
.home-fullwidth .home-section__head--row {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin: 0 0 12px !important;
}

/* Izquierda */
.home-fullwidth .home-section__left {
    min-width: 260px;
}

/* Derecha */
.home-fullwidth .home-section__right {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}

/* Quitar márgenes que mete WP/Woo alrededor del shortcode */
.home-fullwidth .home-products,
.home-fullwidth .home-products .woocommerce,
.home-fullwidth .home-products .woocommerce-page,
.home-fullwidth .wp-block-shortcode {
    margin: 0 !important;
    padding: 0 !important;
}

/* Evitar líneas tipo "Showing x results" si aparecieran */
.home-fullwidth .home-products .woocommerce-result-count,
.home-fullwidth .home-products .woocommerce-ordering {
    display: none !important;
}

/* Asegurar que el grid arranque inmediatamente bajo el header */
.home-fullwidth .home-products ul.products {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =========================================================
   PASO 3: PILL BUTTONS PREMIUM (Ver todo / Ir a tienda)
   ========================================================= */
.home-fullwidth .pill {
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    background: rgba(255, 255, 255, .03) !important;
    color: rgba(229, 231, 235, .85) !important;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.home-fullwidth .pill:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .06) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: rgba(229, 231, 235, .98) !important;
}

/* =========================================================
   BOTONES PREMIUM – ACABADO FINAL
   ========================================================= */

/* BOTÓN PRINCIPAL (Añadir al carrito, Comprar ahora) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.btn-primary {

    background: linear-gradient(180deg,
            #fcd34d 0%,
            #fbbf24 45%,
            #f59e0b 100%) !important;

    color: #111827 !important;
    font-weight: 900 !important;
    letter-spacing: .2px;

    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;

    padding: 12px 18px !important;

    box-shadow:
        0 10px 22px rgba(245, 158, 11, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        filter .15s ease;
}

/* HOVER */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.btn-primary:hover {

    transform: translateY(-2px);

    filter: brightness(1.05);

    box-shadow:
        0 14px 30px rgba(245, 158, 11, .45),
        inset 0 1px 0 rgba(255, 255, 255, .45);
}

/* CLICK */
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce button.button.alt:active,
.woocommerce input.button.alt:active,
.btn-primary:active {

    transform: translateY(0);

    box-shadow:
        0 6px 14px rgba(245, 158, 11, .35),
        inset 0 2px 4px rgba(0, 0, 0, .25);
}

/* =========================================================
   BOTONES SECUNDARIOS (pill: Ver todo / Ir a tienda)
   ========================================================= */

.pill {
    font-weight: 800 !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, .04) !important;
    color: rgba(229, 231, 235, .85) !important;

    border: 1px solid rgba(255, 255, 255, .14) !important;

    backdrop-filter: blur(6px);

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.pill:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}

/* =========================================================
   CARRITO EN MENÚ (GeneratePress sin Elements)
   ========================================================= */

.main-navigation .menu>li:last-child>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;
    border-radius: 999px;

    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);

    font-weight: 800;
    color: #fbbf24 !important;

    box-shadow:
        0 10px 22px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(255, 255, 255, .15);

    transition: transform .15s ease, background .15s ease;
}

.main-navigation .menu>li:last-child>a:hover {
    background: rgba(255, 255, 255, .12);
    transform: translateY(-1px);
}

/* Contador */
.gp-cart-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 900;

    color: #111827;
    background: linear-gradient(180deg, #fbbf24, #f59e0b);

    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(245, 158, 11, .55);

    transform: scale(0);
    transition: transform .25s ease;
}

.gp-cart-count.active {
    transform: scale(1);
}