/* ============================================================
   StoreGCH – Estilos propios
   ------------------------------------------------------------
   Este archivo se carga DESPUES de style.css.
   Todo lo nuevo va aca, NO dentro del CSS del theme Electro,
   asi una actualizacion del theme no se lleva puesto el trabajo.
   ============================================================ */

/* ============================================================
   1. HERO SLIDER
   ------------------------------------------------------------
   El theme animaba el texto con jQuery (fadeInDown-1/2/3).
   fadeInDownReset() y fadeInDown() peleaban por la misma cola de
   animacion y ganaba el reset, asi que del slide 2 en adelante el
   titulo y el boton quedaban en opacity:0 (invisibles).

   Solucion: la visibilidad la decide el CSS (!important le gana al
   style inline que escribe jQuery) y la animacion de entrada usa
   solo transform, que jQuery no toca.
   ============================================================ */

/* El texto SIEMPRE visible, pase lo que pase con el JS del theme */
#owl-main .caption .fadeInDown-1,
#owl-main .caption .fadeInDown-2,
#owl-main .caption .fadeInDown-3,
#owl-main .caption .fadeInDown-4,
#owl-main .caption .fadeIn-1,
#owl-main .caption .fadeIn-2,
#owl-main .caption .fadeIn-3 {
  opacity: 1 !important;
  top: auto !important;
  left: auto !important;
}

/* Entrada suave, solo con transform */
@keyframes sgHeroIn {
  from { transform: translateY(-14px); }
  to   { transform: translateY(0); }
}

#owl-main .owl-item.active .caption .fadeInDown-1 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .05s both; }
#owl-main .owl-item.active .caption .fadeInDown-2 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .14s both; }
#owl-main .owl-item.active .caption .fadeInDown-3 { animation: sgHeroIn .6s cubic-bezier(.16,1,.3,1) .23s both; }

@media (prefers-reduced-motion: reduce) {
  #owl-main .owl-item.active .caption > * { animation: none !important; }
}

/* El theme mete .hero-action-btn en el selector generico de botones
   (style.css:332), asi que el DIV contenedor se pintaba como pill negro
   detras del boton real. Lo devolvemos a ser un simple contenedor. */
#owl-main .hero-action-btn {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: block;
}

#owl-main .hero-action-btn:hover,
#owl-main .hero-action-btn:focus {
  background: none !important;
  background-color: transparent !important;
}

/* ---------- DESKTOP ---------- */
@media (min-width: 769px) {

  /* Los banners son 1200x466. Atamos la altura a ese ratio (38.83vw)
     para que la imagen entre completa: ni recorte ni franjas negras.
     .home-v3-slider tambien: el theme le fija 485px y, al quedar mas
     bajo que el slider, el hero desbordaba y tapaba la franja de
     features de abajo. */
  .home-v3-slider,
  #owl-main,
  #owl-main .owl-stage-outer,
  #owl-main .owl-stage,
  #owl-main .owl-item,
  #owl-main .item {
    height: clamp(380px, 38.83vw, 620px) !important;
    min-height: 0 !important;
  }

  #owl-main .item {
    position: relative;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* En desktop la foto es la CAPA DE FONDO, no un bloque en flujo.
     Sin esto el <img> ocupa el alto del slide, empuja al .container
     que lleva el texto abajo del recuadro y el overflow:hidden del
     owl-stage-outer lo recorta: el titulo, el subtitulo y el boton
     no se ven en NINGUN slide.

     En mobile el <img> se queda en flujo a proposito (foto arriba,
     texto abajo sobre panel negro), asi que esta regla vive solo
     de 769px para arriba. */
  #owl-main .hero-img-mobile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
  }

  /* Velo oscuro a la izquierda: el texto se lee sobre cualquier banner */
  #owl-main .item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.55) 32%,
      rgba(0,0,0,.12) 62%,
      rgba(0,0,0,0) 78%
    );
    pointer-events: none;
    z-index: 1;
  }

  #owl-main .item > .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: block;   /* el theme lo pone en table; ver nota del caption */
  }

  #owl-main .item > .container > .row {
    height: 100%;
  }

  /* Las columnas del theme van flotadas, no como items flex, asi que no se
     estiran solas. Sin este alto el caption mide lo que mide su texto y el
     justify-content:center no tiene espacio libre para repartir: el bloque
     queda arriba en lugar de al medio del banner. */
  #owl-main .item > .container > .row > [class*="col-"] {
    height: 100%;
  }

  /* Lleva `.item` a proposito: el theme declara
     `#owl-main .item .caption { display: table-cell }`, que con 1 id + 2
     clases le gana a `#owl-main .caption`. Sin empatar la especificidad el
     display:flex se descarta y el caption no se centra vertical. */
  #owl-main .item .caption {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
  }

  #owl-main .hero-subtitle-v2 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
    margin-bottom: 14px;
  }

  #owl-main .hero-2 {
    /* El theme pinta .hero-2 de azul (#0777df, style.css:4248). Sobre los
       tres banners oscuros no contrasta; el bloque de mobile ya lo forzaba
       a blanco, en desktop faltaba. Se notaba recien ahora porque hasta
       este arreglo el caption se recortaba y el titulo no se veia. */
    color: #fff;
    font-size: clamp(28px, 2.9vw, 42px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
    max-width: 19ch;
    margin-bottom: 30px;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }

  #owl-main .hero-action-btn { margin: 0; }

  /* El boton venia negro sobre banner negro: no se veia.
     Pill blanco, que funciona sobre los tres banners. */
  #owl-main .hero-action-btn .le-button {
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 999px !important;
    padding: 13px 30px !important;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 8px 26px rgba(0,0,0,.35);
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
  }

  #owl-main .hero-action-btn .le-button,
  #owl-main .hero-action-btn .le-button span {
    color: #000000 !important;
    text-transform: none;
  }

  #owl-main .hero-action-btn .le-button:hover {
    background: #f2f2f7 !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px) {

  /* Antes el caption tenia margin-top:-70px y se montaba sobre la
     imagen negra con texto negro -> ilegible. Ahora: imagen arriba,
     texto abajo sobre panel negro, sin solapamientos. */

  .home-v3-slider { background: #000; }

  .home-v3-slider,
  #owl-main,
  #owl-main .owl-stage-outer,
  #owl-main .owl-stage,
  #owl-main .owl-item,
  #owl-main .item {
    height: auto !important;
    min-height: 0 !important;
  }

  #owl-main .item {
    background: #000 !important;
    padding-bottom: 0 !important;
    position: relative;
  }

  #owl-main .item::before { display: none; }

  .hero-img-mobile {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    background: #000 !important;
  }

  /* El caption vuelve a flujo normal, sin margenes negativos */
  #owl-main .item > .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  #owl-main .caption,
  #owl-main .caption * {
    color: #fff !important;
  }

  #owl-main .caption {
    margin-top: 0 !important;
    padding: 4px 0 30px !important;
    text-align: center !important;
    background: #000;
  }

  #owl-main .hero-subtitle-v2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 8px;
  }

  #owl-main .hero-2 {
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 18px;
  }

  #owl-main .hero-action-btn {
    display: flex;
    justify-content: center;
  }

  /* Boton blanco sobre el panel negro */
  #owl-main .hero-action-btn .le-button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
  }

  #owl-main .hero-action-btn .le-button,
  #owl-main .hero-action-btn .le-button span {
    color: #000000 !important;
  }
}

/* ---------- DOTS ----------
   Estaban ocultos con !important: nadie se enteraba de que habia
   3 slides. Los mostramos con un estilo discreto. */
#owl-main .owl-dots {
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  z-index: 5;
}

#owl-main .owl-dots .owl-dot {
  display: inline-block;
  margin: 0 5px;
}

#owl-main .owl-dots .owl-dot span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  transition: background .2s ease, width .2s ease;
}

#owl-main .owl-dots .owl-dot.active span {
  width: 22px;
  background: #fff;
}

@media (max-width: 768px) {
  /* En mobile el texto va sobre fondo negro solido: los dots
     se posicionan sobre la imagen, no sobre el texto. */
  #owl-main .owl-dots {
    position: static;
    padding: 12px 0 16px;
    background: #000;
  }
  #owl-main .owl-dots .owl-dot span { background: rgba(255,255,255,.35); }
  #owl-main .owl-dots .owl-dot.active span { background: #fff; }
}


/* ------------------------------------------------------------
   SLIDE CENTRADO (.item.is-centered)  ·  usado por el iPhone 18
   ------------------------------------------------------------
   El texto NO va quemado en el PNG: se dibuja con HTML. Asi queda
   nitido en pantallas retina, se reacomoda solo en mobile y el
   efecto puede ser una animacion real en vez de un pixelado.

   El velo de #owl-main .item::before es un degrade de izquierda a
   derecha, pensado para texto alineado a la izquierda. Con el texto
   al medio dejaria el centro claro y los bordes oscuros: justo al
   revos de lo que hace falta. Aca se reemplaza por una vineta
   radial, que oscurece el centro y deja los telefonos de los
   costados a plena luz.
   ------------------------------------------------------------ */

#owl-main .item.is-centered::before {
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,.74) 0%,
    rgba(0,0,0,.52) 42%,
    rgba(0,0,0,.16) 72%,
    rgba(0,0,0,0) 100%
  );
}

/* El subtitulo de estos slides es un badge, no texto suelto: va a
   opacidad plena (el resto de los slides lo baja a .85 / .7). */
#owl-main .item.is-centered .hero-subtitle-v2 { opacity: 1; }

@media (min-width: 769px) {
  #owl-main .item.is-centered .caption {
    align-items: center;
    text-align: center;
  }

  #owl-main .item.is-centered .hero-subtitle-v2 { margin-bottom: 18px; }

  /* El limite de 19ch esta puesto para que el titulo no invada la
     foto cuando esta a la izquierda. Centrado no molesta a nadie, y
     el margen auto es el que lo mantiene al medio. */
  #owl-main .item.is-centered .hero-2 {
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }

  #owl-main .item.is-centered .hero-action-btn {
    display: flex;
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   SLIDE CLARO (.item.is-light)  ·  usado por el DJI Neo 2
   ------------------------------------------------------------
   Los otros banners son casi negros: por eso el texto va blanco
   sobre un velo oscuro. Este es al reves. El tercio izquierdo,
   justo donde cae el texto, mide 225 de luminancia sobre 255
   (medido sobre el PNG final): blanco sobre blanco no se lee, y
   taparlo con el velo negro del resto apaga la foto, que
   precisamente vende luz.

   Asi que este slide invierte la paleta: velo blanco, texto
   oscuro y boton negro. Solo en desktop: en mobile el caption ya
   se dibuja sobre un panel negro debajo de la foto, ahi el texto
   blanco es el correcto.
   ------------------------------------------------------------ */

@media (min-width: 769px) {
  #owl-main .item.is-light::before {
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.86) 0%,
      rgba(255,255,255,.66) 34%,
      rgba(255,255,255,.18) 64%,
      rgba(255,255,255,0) 80%
    );
  }

  #owl-main .item.is-light .hero-subtitle-v2 { color: #4A4A52; }

  #owl-main .item.is-light .hero-2 {
    color: #14161A;
    text-shadow: none;
  }

  /* El pill blanco del resto de los slides desaparece sobre este
     fondo. Va negro, y con !important porque la regla base tambien
     lo usa. */
  #owl-main .item.is-light .hero-action-btn .le-button {
    background: #14161A !important;
    border-color: #14161A !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
  }

  #owl-main .item.is-light .hero-action-btn .le-button,
  #owl-main .item.is-light .hero-action-btn .le-button span {
    color: #ffffff !important;
  }

  #owl-main .item.is-light .hero-action-btn .le-button:hover {
    background: #000000 !important;
  }
}

/* ---------- badge "Proximamente pre venta" ---------- */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 17px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Punto que late: lee como "esto todavia no salio, esta en camino".
   Anima solo box-shadow sobre una caja de 7px, asi que el costo por
   frame es despreciable. */
.hero-badge::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: heroLate 2s ease-out infinite;
}

@keyframes heroLate {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ---------- brillo que cruza el titulo ----------
   Un degrade mas ancho que el texto, recortado a la forma de las
   letras y desplazado en loop: la franja clara pasa de un lado al
   otro. text-fill-color le gana al `color: #fff !important` que el
   bloque de mobile le pone a .caption *, asi que el efecto sobrevive
   tambien en el celular.

   Va dentro de @supports porque si el navegador no sabe recortar el
   fondo al texto, un fill transparente dejaria el titulo invisible.
   Sin soporte no hay brillo, pero el texto se lee: eso es lo que
   importa. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero-shine {
    background: linear-gradient(
      100deg,
      #ffffff 0%,
      #ffffff 40%,
      #bcdcff 48%,
      #ffffff 56%,
      #ffffff 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 14px rgba(0,0,0,.55));
    animation: heroBrillo 5s linear infinite;
  }
}

@keyframes heroBrillo {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-badge::before,
  .hero-shine { animation: none; }
  .hero-shine { -webkit-text-fill-color: #fff; }
}


/* ============================================================
   2. CARD DE PRODUCTO  ·  direccion "B / Ficha"
   ------------------------------------------------------------
   UN solo componente para la home y para la tienda. Antes habia
   dos sistemas (.home-product-* y .shop-page .product-card-*)
   que se fueron separando; los dos se borraron de style.css.
   ============================================================ */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}

@media (max-width: 560px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

.product-card {
  background: #ffffff;
  border: 1px solid #E3E5E9;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.product-card:hover {
  border-color: #C6CAD2;
  box-shadow: 0 10px 26px rgba(16, 20, 28, .10);
  transform: translateY(-2px);
}

/* ---------- imagen ---------- */
.product-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #FAFAFB;
  border-bottom: 1px solid #EEF0F3;
  overflow: hidden;
}

.product-card-image img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* Pill de estado sobre la foto */
.product-card-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.product-card-pill.is-new  { background: #E8F5EE; color: #17683F; border-color: #B7E0C9; }
.product-card-pill.is-used { background: #FDF3E0; color: #8A5A08; border-color: #EFD9A8; }

/* ---------- cuerpo ---------- */
.product-card-body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8B92A0;
  margin-bottom: 6px;
}

.product-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: #14161A;
  margin: 0 0 12px;
  min-height: 2.7em;
}

.product-card-name a {
  color: inherit;
  text-decoration: none;
}

.product-card-name a:hover { text-decoration: underline; }

.product-card-price {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  color: #14161A;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Se renderiza siempre, aunque este vacio: mantiene todas las
   cards de la fila con la misma altura de bloque de precio. */
.product-card-usd {
  font-size: 11px;
  color: #8B92A0;
  margin: 3px 0 14px;
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- acciones ---------- */
.product-card-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 4px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}

.pc-btn--ghost {
  color: #14161A;
  border-color: #D6D9E0;
  background: #ffffff;
}

.pc-btn--ghost:hover { background: #F4F5F7; color: #14161A; }

.pc-btn--wa {
  color: #ffffff;
  background: #1FA85C;
  border-color: #1FA85C;
}

.pc-btn--wa:hover { background: #18904E; color: #ffffff; }

.pc-btn--disabled {
  color: #9AA0AB;
  background: #F1F2F4;
  border-color: #E3E5E9;
  cursor: not-allowed;
}

/* En pantallas chicas los dos botones no entran lado a lado */
@media (max-width: 560px) {
  .product-card-actions { grid-template-columns: 1fr; }
  .product-card-name { font-size: 13px; min-height: 2.6em; }
  .product-card-price { font-size: 18px; }
}

/* La home usa la misma grilla que la tienda */
.home-featured-section {
  background: #F5F5F7;
  padding: 56px 0 64px;
  margin-top: 48px;
}

.home-section-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #14161A;
  margin: 0 0 26px;
}


/* ============================================================
   3. ESTADOS DE CARGA
   ------------------------------------------------------------
   Skeletons con la forma real de la card, en vez del texto
   "Cargando productos...". Sin salto de layout al llegar los datos.
   ============================================================ */

@keyframes sgShimmer {
  0%   { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}

.sk .sk-thumb,
.sk .sk-line,
.sk .sk-btn {
  background: #E9E9EE;
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 420px 100%;
  background-repeat: no-repeat;
  animation: sgShimmer 1.25s ease-in-out infinite;
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .sk .sk-thumb,
  .sk .sk-line,
  .sk .sk-btn { animation: none; }
}

.sk { pointer-events: none; }

.sk .sk-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
}

.sk .sk-line { height: 11px; margin-bottom: 9px; }
.sk .sk-line--sm    { width: 38%; height: 9px; }
.sk .sk-line--lg    { width: 88%; height: 14px; margin-bottom: 16px; }
.sk .sk-line--price { width: 52%; height: 19px; margin-bottom: 20px; }

.sk .sk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sk .sk-btn { height: 34px; border-radius: 9px; }

@media (max-width: 560px) {
  .sk .sk-actions { grid-template-columns: 1fr; }
}

/* ---------- Estados vacio / error ---------- */
.home-products-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 16px;
}

.home-products-state-icon {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F7;
  color: #6E6E73;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.home-products-state-title {
  font-size: 17px;
  font-weight: 600;
  color: #1D1D1F;
  margin: 0 0 6px;
}

.home-products-state-text {
  font-size: 14px;
  line-height: 1.5;
  color: #6E6E73;
  margin: 0;
  max-width: 42ch;
}

.home-products-retry {
  margin-top: 20px;
  padding: 10px 24px;
  border: 0;
  border-radius: 999px;
  background: #1D1D1F;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}

.home-products-retry:hover { opacity: .85; transform: translateY(-1px); }

/* ---------- Toolbar de la tienda ---------- */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.shop-search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 0 18px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.shop-search:focus-within {
  border-color: rgba(0,0,0,.4);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

.shop-search .fa { color: #8E8E93; font-size: 14px; margin-right: 10px; }

.shop-search input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  height: 44px;
  font-size: 15px;
  color: #1D1D1F;
  min-width: 0;
}

.shop-search input::placeholder { color: #8E8E93; }

.shop-result-count {
  font-size: 13px;
  color: #6E6E73;
  white-space: nowrap;
}

.category-filter-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
}

.category-filter-btn.active .category-filter-count { color: inherit; opacity: .7; }


/* ============================================================
   4. FOOTER  ·  direccion "2 / Columnas"
   ------------------------------------------------------------
   Antes habia dos footers distintos: el minimal oscuro (home y
   tienda) y el del theme Electro (el resto). Ahora es uno solo,
   con navegacion, direccion y horarios en texto: eso es lo que
   Google lee para posicionarte en busquedas locales.
   ============================================================ */

.footer-columns {
  background: #0B0B0D;
  color: #ffffff;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 64px;
}

.footer-columns .container { padding-top: 52px; }

.footer-cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 40px;
  padding-bottom: 40px;
}

@media (max-width: 900px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- marca ---------- */
.footer-logo {
  height: 42px;
  width: auto;
  display: block;
  margin-bottom: 16px;
}

.footer-pitch {
  font-size: 13.5px;
  line-height: 1.6;
  color: #9A9AA4;
  margin: 0 0 18px;
  max-width: 34ch;
}

/* Los logos de pago estaban a 26px y eran ilegibles */
.footer-payments {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-payments img {
  height: 26px;
  width: 40px;
  object-fit: contain;
  background: #ffffff;
  border-radius: 4px;
  padding: 3px 4px;
}

/* ---------- columnas de links ---------- */
.footer-columns h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E6E7A;
  margin: 0 0 14px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col ul a {
  color: #D2D2D9;
  text-decoration: none;
  font-size: 14px;
  transition: color .16s ease;
}

.footer-col ul a:hover { color: #ffffff; }

/* ---------- contacto ---------- */
.footer-line {
  font-size: 14px;
  line-height: 1.5;
  color: #D2D2D9;
  margin: 0 0 9px;
}

.footer-line strong { color: #ffffff; font-weight: 600; }

.footer-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  background: #1FA85C;
  color: #ffffff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 999px;
  transition: background .16s ease, transform .14s ease;
}

.footer-wa:hover {
  background: #18904E;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- barra inferior ---------- */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-bottom small {
  font-size: 12.5px;
  color: #7E7E88;
}

@media (max-width: 560px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.footer-columns a:focus-visible {
  outline: 2px solid #1FA85C;
  outline-offset: 3px;
}


/* ============================================================
   5. FRANJA DE FEATURES
   ------------------------------------------------------------
   El icono se solapaba con el texto (se veia sobre todo en el
   "99%") y los textos partian mal: "Metodos de / pago".
   En mobile era una torre de 618px que empujaba los productos
   abajo del fold.
   ============================================================ */

.features-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.features-list .feature {
  float: none !important;
  width: auto !important;
  padding: 22px 18px !important;
  border-right: 1px solid rgba(0,0,0,.07);
}

/* El theme separaba con border-left en .feature + .feature */
.features-list .feature + .feature { border-left: 0; }
.features-list .feature:last-child { border-right: 0; }

/* El theme fija .features-list .media { width:150px }: eso comprimia la
   fila y hacia que el icono se montara sobre el texto. */
.features-list .feature .media {
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: auto !important;
  margin: 0 !important;
  height: 100%;
}

/* .media-left / .media-body son table-cell en el theme */
.features-list .feature .media-left,
.features-list .feature .media-body {
  display: block;
  width: auto;
  vertical-align: middle;
}

/* El icono deja de superponerse.
   El theme le da tamanos distintos a cada glifo (2.571em, y 3.386em
   al de "99% resenas"), asi que se desbordaban de su caja y pisaban
   el texto. Los normalizamos todos al mismo tamano. */
.features-list .feature .feature-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  color: #1D1D1F;
  padding: 0;
}

.features-list .feature .feature-icon i,
.features-list .media-left i,
.features-list .media-left i.ec-customers {
  font-size: 30px !important;
  line-height: 1;
  display: block;
}

.features-list .feature .feature-text {
  font-size: 13px;
  line-height: 1.35;
  color: #6E6E73;
  text-align: left;
  padding: 0;
  text-wrap: balance;
}

.features-list .feature .feature-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: #1D1D1F;
}

@media (max-width: 1100px) {
  .features-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features-list .feature:nth-child(3n) { border-right: 0; }
  .features-list .feature { border-bottom: 1px solid rgba(0,0,0,.07); }
}

@media (max-width: 700px) {
  /* En mobile: 2 columnas en vez de una torre vertical */
  .features-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-list .feature:nth-child(3n) { border-right: 1px solid rgba(0,0,0,.07); }
  .features-list .feature:nth-child(2n) { border-right: 0; }
  .features-list .feature { padding: 16px 14px; }
  .features-list .feature .media { flex-direction: column; text-align: center; gap: 8px; }
  .features-list .feature .feature-text { text-align: center; font-size: 12px; }
  .features-list .feature .feature-icon { font-size: 26px; width: auto; }
}


/* ============================================================
   6. RITMO VERTICAL DE LA HOME
   ------------------------------------------------------------
   Quedaban ~220px de blanco muerto entre el ultimo bloque y el
   footer, y los bloques de ads no respiraban parejo.
   ============================================================ */

.home-v3-content { margin-bottom: 0; }

.home-v3-features-block { margin: 40px 0 36px; }

.home-v3-ads-block { margin-bottom: 0; }

.home-v3-ads-block .ad .media-body { padding: 1.8em 0 1.6em 0; }

/* El ultimo bloque pega contra el footer, sin hueco */
#content .site-main > section.home-v3-content:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

#content.site-content { padding-bottom: 0; }

/* ============================================================
   HEADER: logo y buscador a la misma altura
   ------------------------------------------------------------
   La plantilla arma esa fila con floats (.header-logo al 25% y
   .navbar-search al 52%), y los floats alinean por ARRIBA. Como
   el logo mide 82px de alto y el buscador 44, quedaban con el
   borde de arriba en el mismo punto pero con los centros a 19px
   de distancia: el buscador se veia despegado hacia arriba.

   Con flex + align-items:center se emparejan por el centro. Los
   anchos no cambian: el 25% y el 52% siguen valiendo, ahora como
   flex-basis en vez de ancho de float.

   Solo desde 992px, que es donde vive este header (arriba esta
   .container.hidden-md-down; abajo se usa el .handheld-header,
   que no lleva .row y no se toca).
   ============================================================ */
@media (min-width: 992px) {
  .site-header.header-v3 > .container > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* ============================================================
   BARRA DE BENEFICIOS (marquesina)
   ------------------------------------------------------------
   Reemplaza la vieja top-bar ("Bienvenidos" + "Ubicacion", las
   dos con href="#").

   Como funciona el loop: el track lleva 4 grupos identicos en
   fila y se desplaza 25% de su ancho, o sea EXACTAMENTE un
   grupo. Al terminar, cada grupo ocupa el lugar del anterior y
   el cuadro es identico al inicial: no hay salto ni costura.
   Como el desplazamiento es un grupo (ancho fijo) y no un
   porcentaje de la ventana, la velocidad en px/s es la misma en
   el celular que en el escritorio con una sola duracion.

   Se anima solo transform, que va en el compositor: no dispara
   layout ni repaint en cada frame.
   ============================================================ */
.promo-bar {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 10px 0;
}

.promo-track {
  display: flex;
  width: max-content;
  /* 16s sobre un grupo de ~840px da ~52px/s, que es velocidad de lectura
     comoda para un ticker (medido, no estimado). */
  animation: promo-desliza 16s linear infinite;
}

/* Al pasar el mouse se frena, para poder leer el mensaje entero */
.promo-bar:hover .promo-track { animation-play-state: paused; }

.promo-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Seguro para pantallas muy anchas.
     Para que no aparezca un hueco, los 3 grupos que van adelante tienen que
     tapar la ventana: 3 x grupo >= ancho. El grupo mide ~840px por su
     contenido, o sea que alcanza hasta 2520px; de ahi para arriba (monitores
     de 2560) quedaba un hueco al final de cada vuelta. Con 34vw el grupo
     nunca baja de un tercio de la ventana, y este minimo solo entra en juego
     por encima de esos 2520px: mas abajo manda el ancho natural y la
     velocidad se mantiene igual en todos lados. */
  min-width: 34vw;
}

.promo-group li {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

/* El punto separador va DESPUES de cada mensaje, incluido el ultimo
   de cada grupo: ese ultimo es el que separa un grupo del siguiente
   cuando el loop los encadena. */
.promo-group li::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,.38);
  margin: 0 30px 0 22px;
}

.promo-bar i {
  font-size: 15px;
  line-height: 1;
}

@keyframes promo-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }   /* un grupo de los cuatro */
}

@media (max-width: 767px) {
  .promo-bar { font-size: 12px; padding: 9px 0; }
  .promo-group li::after { margin: 0 22px 0 16px; }
  .promo-bar i { font-size: 14px; }
}

/* Sin movimiento: se muestra un solo grupo, centrado y en una linea
   (o dos, si no entra). Los mensajes se leen igual. */
@media (prefers-reduced-motion: reduce) {
  .promo-track {
    animation: none;
    width: 100%;
    justify-content: center;
  }
  .promo-group + .promo-group { display: none; }
  .promo-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }
  .promo-group li:last-child::after { display: none; }
}

/* ============================================================
   MENU: subrayado fino al hover
   ============================================================
   Saca los divisores, cambia el hover de gris-bloque a
   subrayado amarillo que crece desde el centro. La pagina
   activa queda con el subrayado fijo. */

.navbar-primary .navbar-nav > .menu-item > a {
  border-right: none;
  position: relative;
  transition: color .2s ease;
}

.navbar-primary .navbar-nav > .menu-item > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transform: translateX(-50%);
  transition: width .2s ease;
}

.navbar-primary .navbar-nav > .menu-item > a:hover,
.navbar-primary .navbar-nav > .menu-item > a:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-primary .navbar-nav > .menu-item > a:hover::after,
.navbar-primary .navbar-nav > .menu-item > a:focus::after {
  width: 100%;
}

/* Pagina activa: subrayado fijo */
.navbar-primary .navbar-nav > .menu-item.active > a {
  color: #fff;
}

.navbar-primary .navbar-nav > .menu-item.active > a::after {
  width: 100%;
}


/* ============================================================
   MENU MOBILE (drawer + burger)
   ------------------------------------------------------------
   El theme lo dejaba como un panel gris pizarra (#333e48) con una
   barra "Close" en ingles, items de texto pelado sin separadores
   ni jerarquia, y sin fondo detras: el menu abierto se mezclaba
   con la pagina. Nada de eso conversaba con el blanco y negro del
   resto del sitio.

   Que cambia aca:
   - Panel casi negro con vidrio esmerilado, ancho acotado.
   - El deslizamiento pasa de animar `left` a animar `transform`.
     Animar `left` recalcula layout en cada frame; transform va al
     compositor, que es lo que hace que en un celular se sienta
     fluido en vez de a los saltos.
   - La hamburguesa se dibuja con CSS y se transforma en X. El
     theme usaba dos botones que se intercambiaban con display,
     y un cambio de display no se puede animar.
   - Backdrop oscuro, separadores finos, chevrones y entrada
     escalonada de los items.
   ============================================================ */

/* ---------- boton hamburguesa ---------- */

/* El theme lo esconde al abrir (`.toggled .navbar-toggle-hamburger
   { display: none }`) para mostrar el boton de cerrar. Aca el mismo
   boton se queda y se transforma, asi que ese intercambio se anula:
   se oculta el de cerrar y este sobrevive al `.toggled`.
   Los 3 selectores llevan una clase de mas para ganarle por
   especificidad sin recurrir a !important. */
.handheld-navbar-toggle-buttons,
.sticky-wrapper .handheld-navbar-toggle-buttons.stuck {
  position: relative;
  z-index: 10001;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-close {
  display: none;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, transform .12s ease;
}

.handheld-navbar-toggle-buttons .navbar-toggler.navbar-toggle-hamburger:active {
  transform: scale(.94);
  background: rgba(255,255,255,.14);
}

/* El <i> viene con el glifo \f0c9 de FontAwesome. Se lo saca y el
   elemento se reusa como la barra del medio; ::before y ::after son
   la de arriba y la de abajo. */
.navbar-toggle-hamburger .fa::before { content: ""; }

.navbar-toggle-hamburger i {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: background .2s ease;
}

.navbar-toggle-hamburger i::before,
.navbar-toggle-hamburger i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  border-radius: inherit;
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}

.navbar-toggle-hamburger i::before { top: -5.5px; }
.navbar-toggle-hamburger i::after  { top:  5.5px; }

/* Abierto: la barra del medio se apaga y las otras dos se cruzan.
   Se apaga con background y no con opacity porque ::before/::after
   pintan su propio fondo: el background del padre no los afecta. */
.toggled .navbar-toggle-hamburger i { background: transparent; }
.toggled .navbar-toggle-hamburger i::before { transform: translateY(5.5px) rotate(45deg); }
.toggled .navbar-toggle-hamburger i::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- backdrop ---------- */

/* Va como pseudo del wrapper para no tocar el HTML de las 7 paginas.
   pointer-events:none es intencional: el JS del theme cierra el menu
   cuando detecta un click fuera del wrapper, asi que el click tiene
   que atravesar el velo y llegar a la pagina. Si el velo lo capturara,
   tocar afuera dejaria de cerrar. */
.handheld-navigation-wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9998;
  transition: opacity .32s ease, visibility .32s ease;
}

.handheld-navigation-wrapper.toggled::before {
  opacity: 1;
  visibility: visible;
}

/* ---------- panel ---------- */
.handheld-navigation {
  left: 0;
  width: min(86vw, 360px);
  background: rgba(9,9,11,.94);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  backdrop-filter: blur(20px) saturate(1.3);
  border-right: 1px solid rgba(255,255,255,.09);
  box-shadow: 24px 0 60px rgba(0,0,0,.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translate3d(-100%, 0, 0);
  transition: transform .42s cubic-bezier(.16,1,.3,1);

  /* La barra de scroll del theme estaba siempre visible y cortaba el
     borde del panel. */
  scrollbar-width: none;
}

.handheld-navigation::-webkit-scrollbar { display: none; }

.handheld-navigation-wrapper.toggled .handheld-navigation {
  transform: translate3d(0, 0, 0);
}

/* ---------- fila superior: "MENU" + X ---------- */

/* El markup solo trae <span class="ehm-close">Close</span>. El texto
   se apaga con font-size:0 en el contenedor y los dos pseudos lo
   recuperan con su propio tamano: asi la palabra en ingles no se ve
   y la fila queda con etiqueta a la izquierda y X a la derecha, sin
   tocar el HTML. */
.handheld-navigation .ehm-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0;
  padding: 20px 22px 18px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.09);

  /* Es solo un rotulo: el cierre lo maneja el boton que flota arriba a
     la derecha. Sin esto la fila seguiria cerrando el menu al tocarla,
     que es lo que hacia el "Close" original y no se anuncia a la vista. */
  pointer-events: none;
}

.handheld-navigation .ehm-close::before {
  content: "Menú";
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6E6E7A;
  margin: 0;
  padding: 0;
}

/* ---------- items ---------- */
.handheld-navigation ul li + li {
  border-top: 1px solid rgba(255,255,255,.07);
}

.handheld-navigation ul li a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #E8E8ED;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, background .18s ease, padding-left .18s ease;
}

/* Chevron: indica que el item lleva a otra pagina */
.handheld-navigation ul li a::after {
  content: "\f105";
  font-family: "FontAwesome";
  font-weight: 400;
  margin-left: auto;
  font-size: 15px;
  color: #55555F;
  transition: transform .18s ease, color .18s ease;
}

.handheld-navigation ul li a:hover,
.handheld-navigation ul li a:active {
  color: #fff;
  background: rgba(255,255,255,.05);
  padding-left: 26px;
}

.handheld-navigation ul li a:hover::after,
.handheld-navigation ul li a:active::after {
  color: #fff;
  transform: translateX(3px);
}

/* Pagina actual: barra de acento a la izquierda.
   La clase la pone navbar-active.js. */
.handheld-navigation ul li.active > a {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.05);
}

.handheld-navigation ul li.active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: #fff;
}

/* ---------- entrada escalonada ---------- */

/* Los items entran uno detras del otro apenas se abre el panel. El
   retardo arranca en .12s para que empiecen cuando el drawer ya
   recorrio parte del camino, no antes. */
@keyframes menuItemIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.handheld-navigation-wrapper.toggled .handheld-navigation ul li {
  animation: menuItemIn .4s cubic-bezier(.16,1,.3,1) both;
}

.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(1) { animation-delay: .12s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(2) { animation-delay: .17s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(3) { animation-delay: .22s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(4) { animation-delay: .27s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(5) { animation-delay: .32s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(6) { animation-delay: .37s; }
.handheld-navigation-wrapper.toggled .handheld-navigation ul li:nth-child(7) { animation-delay: .42s; }

/* El boton flotante de WhatsApp (z-index 9999) queda por encima del
   backdrop y compite con el menu abierto. No es descendiente del
   wrapper, asi que la unica forma de alcanzarlo desde CSS es :has().
   Donde no haya soporte el selector se descarta y el boton sigue
   visible: molesta un poco, no rompe nada. */
body:has(.handheld-navigation-wrapper.toggled) .whatsapp-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .handheld-navigation { transition: none; }
  .handheld-navigation-wrapper.toggled .handheld-navigation ul li { animation: none; }
  .navbar-toggle-hamburger i,
  .navbar-toggle-hamburger i::before,
  .navbar-toggle-hamburger i::after { transition: none; }
}


/* ============================================================
   PAGINACION DE LA TIENDA
   ------------------------------------------------------------
   El catalogo entero llega en una sola consulta a Firestore, asi
   que el corte en paginas es del lado del cliente: cambiar de
   pagina no vuelve a pedir nada, solo recorta el array ya
   filtrado. Por eso el cambio es instantaneo y no hay estado de
   carga entre paginas.

   OJO CON EL NOMBRE: shop.html abre con
   <body class="shop-page full-color-background">, asi que una
   clase `.shop-page` para los botones le caia encima al body y lo
   convertia en un inline-flex de 40px de alto con borde. El
   resultado era la pagina entera de 3496px de ancho en una
   ventana de 1440. Por eso los botones se llaman
   `.shop-pagination-btn` y todo cuelga de `.shop-pagination`:
   dentro de ese prefijo no hay forma de pisar nada de afuera.

   La paleta sale de la card de producto (borde #E3E5E9, texto
   #14161A) para que la fila no se lea como una pieza pegada de
   otro lado.
   ============================================================ */

.shop-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}

/* El atributo hidden lo pone el JS cuando hay una sola pagina. Sin
   esta linea el display:flex de arriba le gana y los controles se
   verian igual. */
.shop-pagination[hidden] { display: none; }

.shop-pagination .shop-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #E3E5E9;
  border-radius: 10px;
  background: #ffffff;
  color: #14161A;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.shop-pagination .shop-pagination-btn:hover:not(:disabled):not(.is-current) {
  border-color: #C6CAD2;
  background: #F4F5F7;
}

.shop-pagination .shop-pagination-btn:focus-visible {
  outline: 2px solid #14161A;
  outline-offset: 2px;
}

.shop-pagination .shop-pagination-btn.is-current {
  background: #14161A;
  border-color: #14161A;
  color: #ffffff;
  cursor: default;
}

.shop-pagination .shop-pagination-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}

.shop-pagination .shop-pagination-btn--nav { padding: 0; }

.shop-pagination .shop-pagination-gap {
  min-width: 24px;
  text-align: center;
  color: #8B92A0;
  font-size: 14px;
  user-select: none;
}

@media (max-width: 560px) {
  .shop-pagination { gap: 6px; margin-top: 28px; }

  .shop-pagination .shop-pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 13px;
  }
}