/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   TARJETAS DE LOS CARRILES DEL INICIO — CELULAR (4/10/2026)
   Se carga solo con (max-width: 767.98px) desde views/tienda/index-tech.php, DESPUÉS de cards-tech.css.
   En computadora no cambia nada.

   Idea: «el producto es el protagonista». Tarjeta clara (73 de 80 fotos tienen fondo blanco: sobre blanco se
   funden y el producto se ve grande, sin el «cuadro pegado» de la tarjeta oscura), foto cuadrada de borde a
   borde, debajo solo nombre (2 líneas), precio y «Agregar». Lo demás va SOBRE la foto: «Últimas N» arriba a la
   izquierda, favorito arriba a la derecha y los colores abajo («● ● ● 3 colores» en vez de «+2»). La sub-marca
   propia (Nyxivo Home…) no se muestra: es igual en toda la línea y no ayuda a decidir.
   Muchas reglas previas llevan !important (cards-tech, editorial, familia-card): aquí también, solo dentro del carril.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Sección ─────────────────────────────────────────────────────────────────────────────────────────────── */
.cat-shelf .cat-shelf-sub{display:none}
.cat-shelf .cat-shelf-sub.cat-shelf-sub--movil{display:block !important;color:#475569;font-weight:600;white-space:normal !important;overflow:visible !important}
/* La foto de ambiente de la línea ocupaba el primer sitio del carril: se veía UN producto. «Ver todo» ya lleva a la línea. */
.cat-shelf .cat-shelf-intro{display:none !important}
.cat-shelf .cat-shelf-track{--per:2.2;--gap:.625rem;padding:.25rem .25rem .75rem;margin:-.25rem -.25rem -.75rem}

/* ── Tarjeta ─────────────────────────────────────────────────────────────────────────────────────────────── */
.cat-shelf .cat-shelf-track > .product-card-tech{
  position:relative !important;
  container-type:inline-size;
  display:flex !important;flex-direction:column !important;
  overflow:hidden !important;
  background:#fff !important;background-image:none !important;
  border:1px solid #e2e8f0 !important;border-radius:16px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 24px -14px rgba(15,23,42,.22) !important;
  color:#0f172a;
  transform:none !important;
}
.cat-shelf .cat-shelf-track > .product-card-tech::before,
.cat-shelf .cat-shelf-track > .product-card-tech::after,
.cat-shelf .cat-shelf-track .product-card-tech .product-info::before,
.cat-shelf .cat-shelf-track .card-cat-halo{display:none !important;content:none !important}
.cat-shelf .cat-shelf-track > .product-card-tech:active{box-shadow:0 1px 2px rgba(15,23,42,.08) !important}

/* ── Foto: cuadrada, de borde a borde ────────────────────────────────────────────────────────────────────── */
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__img-link{display:block;margin:0 !important;padding:0 !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper{
  position:relative !important;
  width:100% !important;height:auto !important;aspect-ratio:1/1 !important;
  margin:0 !important;padding:0 !important;
  background:#fff !important;background-image:none !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  border-bottom:1px solid #f1f5f9 !important;
  overflow:hidden !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper::before,
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper::after{display:none !important;content:none !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper picture{display:block;width:100%;height:100%}
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper img{
  position:absolute !important;inset:0 !important;top:0 !important;left:0 !important;right:auto !important;bottom:auto !important;translate:none !important;z-index:0 !important;
  width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  margin:0 !important;padding:0 !important;
  object-fit:contain !important;background:transparent !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;filter:none !important;
  transform:none !important;mix-blend-mode:normal !important;
}
/* Foto completa (ambiente, sin fondo blanco): llena el cuadro */
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper.img-fondo-foto img,
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper.is-foto-completa img{object-fit:cover !important}
/* Foto de fondo oscuro: el cuadro toma su fondo */
.cat-shelf .cat-shelf-track .product-card-tech .product-image-wrapper.img-fondo-oscuro{background:#0a1015 !important}

/* ── Texto: nombre (2 líneas) · precio · botón ───────────────────────────────────────────────────────────── */
.cat-shelf .cat-shelf-track .product-card-tech .product-info{
  position:static !important;
  display:flex !important;flex-direction:column !important;gap:.375rem !important;
  flex:1 1 auto !important;
  padding:.625rem .625rem .75rem !important;
  background:transparent !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-info > *{grid-row:auto !important;margin:0 !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-brand{display:none !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-name{
  min-height:2.6em !important;margin:0 !important;
  font-family:Inter,"DM Sans",system-ui,sans-serif !important;
  font-size:.875rem !important;font-weight:600 !important;line-height:1.3 !important;letter-spacing:-.005em;
  color:#0f172a !important;
  display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2 !important;overflow:hidden !important;
  white-space:normal !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-name a{color:inherit !important;text-decoration:none}

/* Precio: letra de tienda (no de código), números alineados */
.cat-shelf .cat-shelf-track .product-card-tech .product-prices,
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__price-block{
  display:flex !important;flex-wrap:wrap !important;align-items:baseline !important;justify-content:flex-start !important;align-self:stretch !important;text-align:left !important;gap:.125rem .375rem !important;
  margin:0 !important;padding:0 !important;background:none !important;border:0 !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-price-current{
  font-family:"Space Grotesk",Inter,system-ui,sans-serif !important;
  font-size:1.125rem !important;font-weight:700 !important;line-height:1.2 !important;letter-spacing:-.01em !important;
  font-variant-numeric:tabular-nums;
  color:#0f172a !important;-webkit-text-fill-color:#0f172a !important;background:none !important;
  text-shadow:none !important;white-space:nowrap !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-price-old{font-size:.75rem !important;color:#64748b !important;-webkit-text-fill-color:#64748b !important;text-decoration:line-through}
.cat-shelf .cat-shelf-track .product-card-tech .product-savings{display:none !important}
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__price-label{font-size:.75rem !important;font-weight:600 !important;color:#475569 !important;-webkit-text-fill-color:#475569 !important;text-transform:none !important;letter-spacing:0 !important}

/* Reseñas: solo cuando existen, compactas junto al precio («★ (12)») */
.cat-shelf .cat-shelf-track .product-card-tech .product-rating{display:flex !important;align-items:center;gap:.25rem;font-size:.75rem !important;color:#475569 !important;order:2}
.cat-shelf .cat-shelf-track .product-card-tech .product-rating--empty{display:none !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-rating-stars i:not(:first-child){display:none}
.cat-shelf .cat-shelf-track .product-card-tech .product-rating-stars i{color:#d97706 !important}
.cat-shelf .cat-shelf-track .product-card-tech .product-sold-count{display:none !important}

/* ── Botón: relleno azul (el del pago), ancho completo, 44 px, siempre al pie ────────────────────────────── */
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart{
  order:9;margin-top:auto !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:.4rem !important;
  width:100% !important;min-height:44px !important;height:44px !important;padding:0 .625rem !important;
  border:0 !important;border-radius:12px !important;
  background:linear-gradient(180deg,#2b6cee 0%,#2563eb 55%,#1d4ed8 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 14px -8px rgba(37,99,235,.65) !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  font-family:Inter,"DM Sans",system-ui,sans-serif !important;font-size:.875rem !important;font-weight:700 !important;
  text-decoration:none !important;white-space:nowrap !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart i{color:#fff !important;font-size:.875rem}
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:active{transform:scale(.98)}
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart.is-agotado{
  background:#f1f5f9 !important;box-shadow:none !important;
  color:#475569 !important;-webkit-text-fill-color:#475569 !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart.is-agotado i{color:#475569 !important}
/* El orden: nombre, colores (van sobre la foto), precio, botón */
.cat-shelf .cat-shelf-track .product-card-tech .product-name{order:1}
.cat-shelf .cat-shelf-track .product-card-tech .product-prices,
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__price-block{order:3}

/* Lo que no va en la tarjeta del carril en celular */
.cat-shelf .cat-shelf-track .product-card-tech .clp-compare-toggle,
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__badge,
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__chips,
.cat-shelf .cat-shelf-track .product-card-tech .product-overlay{display:none !important}

/* ── Sobre la foto ───────────────────────────────────────────────────────────────────────────────────────── */
/* «Últimas N» arriba a la izquierda */
.cat-shelf .cat-shelf-track .product-card-tech .product-stock{
  position:absolute !important;top:.5rem !important;left:.5rem !important;z-index:10 !important;
  display:inline-flex !important;align-items:center;gap:.3rem;
  width:auto !important;max-width:calc(100% - 3.5rem);margin:0 !important;padding:.25rem .5rem !important;
  border:1px solid #fcd34d !important;border-radius:999px !important;
  background:#fffbeb !important;box-shadow:0 2px 6px rgba(15,23,42,.10) !important;
  color:#92400e !important;-webkit-text-fill-color:#92400e !important;
  font-size:.75rem !important;font-weight:700 !important;line-height:1.1 !important;white-space:nowrap !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-stock i{color:#d97706 !important;font-size:.7rem}
/* Badges de oferta: abajo a la izquierda no, arriba a la izquierda (si hay «Últimas», baja un poco) */
.cat-shelf .cat-shelf-track .product-card-tech .product-badges{top:.5rem !important;left:.5rem !important;z-index:10 !important}

/* Favorito arriba a la derecha, igual en todas */
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite{
  position:absolute !important;top:.375rem !important;right:.375rem !important;left:auto !important;z-index:11 !important;
  display:inline-flex !important;align-items:center;justify-content:center;
  width:36px !important;height:36px !important;padding:0 !important;margin:0 !important;
  border:1px solid rgba(15,23,42,.08) !important;border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 2px 8px rgba(15,23,42,.14) !important;
  color:#334155 !important;opacity:1 !important;transform:none !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite i{color:inherit;font-size:.95rem}
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite .fas,
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite.active,
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite.is-active{color:#e11d48 !important}
/* Área táctil de 44 px sin agrandar el círculo */
.cat-shelf .cat-shelf-track .product-card-tech .product-favorite::after{content:"" !important;display:block !important;position:absolute;inset:-4px;border-radius:999px}

/* Colores: pastilla abajo a la izquierda de la foto («● ● ● 3 colores») */
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatches{
  position:absolute !important;left:.5rem !important;top:calc(100cqw - 2.15rem) !important;z-index:10 !important;
  width:auto !important;height:auto !important;clip:auto !important;overflow:visible !important;
  display:inline-flex !important;align-items:center;gap:.25rem;
  max-width:calc(100% - 1rem);margin:0 !important;padding:.25rem .5rem .25rem .375rem !important;
  border:1px solid #e2e8f0;border-radius:999px;background:rgba(255,255,255,.95);
  box-shadow:0 2px 6px rgba(15,23,42,.10);
}
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatch{
  width:12px !important;height:12px !important;min-width:12px;margin:0 !important;
  border-radius:999px !important;background:var(--swatch) !important;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.18) !important;border:0 !important;
}
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatch:nth-of-type(n+5),
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatch-more{display:none !important}
.cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatch-txt{
  display:inline !important;margin-left:.15rem;
  font-size:.75rem;font-weight:600;line-height:1;color:#334155;white-space:nowrap;
}
@supports not (top:1cqw){
  .cat-shelf .cat-shelf-track .product-card-tech .fam-card__swatches{position:static !important;order:2;align-self:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:active{transform:none}
}

/* La info no debe crear su propia capa: así «Últimas», los colores y el favorito quedan por encima de la foto */
.cat-shelf .cat-shelf-track .product-card-tech .product-info{z-index:auto !important;isolation:auto !important;contain:none !important;transform:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;filter:none !important;opacity:1 !important}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   ORDEN DE LA PORTADA EN CELULAR (4/10/2026, propietario: «proceder con las recomendaciones»)
   El primer producto aparecía a 2.676 px (tras el slider, Beneficios, Compra por categoría y Nyxivo en cifras: más
   de 3 pantallas). Las secciones son hermanas dentro de <main>: en celular <main> pasa a columna flexible y
   «Nyxivo en cifras» baja detrás de los productos. «Beneficios» se compacta a una cuadrícula de 2 × 2.
   En computadora el orden no cambia.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
main#main-content{display:flex !important;flex-direction:column !important}
main#main-content > *{min-width:0}
main#main-content > .social-proof-section{order:1}
main#main-content > .cat-sections-wrapper ~ *{order:2}

/* Las secciones de productos se dibujan solo al acercarse (content-visibility): el navegador reservaba 500 px por
   sección y medían ~410; la barra de desplazamiento saltaba al dibujarlas. */
.cat-shelf{contain-intrinsic-size:auto 420px !important}

/* ── «Beneficios»: 2 × 2 compacto (antes ~500 px) ───────────────────────────────────────────────────────── */
.features-tech{padding:1.25rem 1rem 1rem !important;margin:0 !important;contain-intrinsic-size:auto 230px !important}
.features-tech .features-tech-grid{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;gap:.5rem !important;margin:0 !important;padding:0 !important;overflow:visible !important}
.features-tech .feature-tech-item{
  display:flex !important;flex-direction:row !important;align-items:flex-start !important;text-align:left !important;
  gap:.5rem !important;margin:0 !important;padding:.625rem !important;min-height:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;flex:none !important;
  border-radius:14px !important;
}
.features-tech .feature-tech-icon{flex:none !important;width:32px !important;height:32px !important;min-width:32px !important;margin:0 !important;border-radius:10px !important;font-size:.875rem !important}
.features-tech .feature-tech-icon i{font-size:.875rem !important}
.features-tech .feature-tech-text{min-width:0}
.features-tech .feature-tech-text strong{display:block;font-size:.8125rem !important;line-height:1.25 !important;margin:0 0 .125rem !important}
.features-tech .feature-tech-text p{font-size:.75rem !important;line-height:1.3 !important;margin:0 !important}
.features-tech .features-tech-link{margin-top:.625rem !important;min-height:44px;font-size:.8125rem !important}

/* ── «Marcas que vendemos»: más corta (hoy casi todas son las sub-marcas propias) ────────────────────────── */
.brands-slider-section{padding-top:1.75rem !important;padding-bottom:1.75rem !important}
.brands-slider-section .section-badge,
.brands-slider-section .brands-slider-subtitle{display:none !important}
.brands-slider-section .brands-slider-header{margin-bottom:1rem !important}
.brands-slider-section .brands-slider-title{font-size:1.25rem !important;margin:0 !important}

/* ── «Compra por categoría»: menos aire (antes 80 px arriba, 96 abajo y 48 bajo el título) ───────────────── */
#cat-bento-section{padding-top:1.75rem !important;padding-bottom:2rem !important;contain-intrinsic-size:auto 440px !important}
#cat-bento-section .cat-bento-header{margin-bottom:1rem !important}
#cat-bento-section .cat-bento-header h2{font-size:1.5rem !important;line-height:1.15 !important}
#cat-bento-section .cat-bento-header .cat-bento-accent{display:inline !important}
/* La primera sección de productos dejaba 68 px arriba (venía tras «Nyxivo en cifras»; ahora va tras las categorías) */
.cat-sections-wrapper > .cat-shelf:first-child{padding-top:2rem !important}

/* ── «Compra por categoría»: la foto como fondo de toda la tarjeta (4/10/2026, opción A aprobada) ───────────────
   El carrusel, los puntos, el icono, «N productos», el nombre y «Explorar» siguen igual. La foto medía 102 × 102 px
   dentro de un marco blanco en una tarjeta de 301 × 230 (15 %): ahora cubre la tarjeta entera y un oscurecido desde la
   izquierda y desde abajo deja leer el texto. Las líneas sin foto (icono) quedan como estaban. */
#cat-bento-section .cat-bento-card:has(.cat-bento-img){position:relative !important;overflow:hidden !important;isolation:isolate}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-img-col{
  position:absolute !important;inset:0 !important;z-index:0 !important;
  width:auto !important;height:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;
  display:block !important;transform:none !important;
}
#cat-bento-section .cat-bento-card .cat-bento-img-col .cat-bento-img{
  width:100% !important;height:100% !important;max-width:none !important;max-height:none !important;
  object-fit:cover !important;object-position:center !important;
  margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;
  background:none !important;box-shadow:none !important;filter:none !important;transform:none !important;
}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-img-col::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,13,26,.88) 0%,rgba(8,13,26,.62) 42%,rgba(8,13,26,.18) 78%,rgba(8,13,26,.05) 100%),
    linear-gradient(0deg,rgba(8,13,26,.55) 0%,rgba(8,13,26,0) 50%);
}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-halo{z-index:1 !important;opacity:.55}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-info{position:relative !important;z-index:2 !important}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-name{text-shadow:0 2px 10px rgba(0,0,0,.55)}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-label,
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-cta{text-shadow:0 1px 6px rgba(0,0,0,.6)}
/* Sobre la foto, «N productos» (gris de 9,5 px sobre un velo blanco al 5 %) y «Categoría» (9,5 px) no se leían en las
   zonas claras de la foto: pastilla oscura y letra de 12 px (mínimo del sitio); «Explorar» en blanco casi pleno. */
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-chip{
  background:rgba(8,13,26,.72) !important;border:1px solid rgba(255,255,255,.16) !important;
  color:#e2e8f0 !important;-webkit-text-fill-color:#e2e8f0 !important;font-size:12px !important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-label{font-size:12px !important}
#cat-bento-section .cat-bento-card:has(.cat-bento-img) .cat-bento-cta{color:rgba(255,255,255,.95) !important}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   «VITRINA CLARA PREMIUM» — zona de productos de la portada en celular (4/10/2026, propietario: «moderna, limpia, algo
   de blanco, no muy oscuro pero premium»). Antes: una hoja blanca lisa (#f8fafc) tras el banner oscuro, y las líneas
   separadas solo por una raya. Ahora: fondo blanco perla con grano fino y un resplandor azul arriba; cada línea en su
   panel blanco translúcido (borde de luz, esquinas de 24 px, sombra larga) con un resplandor tenue y una barrita del
   color de la línea; las tarjetas de producto siguen blancas (sus fotos tienen fondo blanco) y «flotan» con una sombra
   más profunda. Sin backdrop-filter: detrás solo hay un degradado claro (nada que desenfocar) y 8 paneles con desenfoque
   cuestan en un celular.
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
main#main-content > .cat-sections-wrapper{
  background:
    radial-gradient(120% 420px at 50% 0%,rgba(96,165,250,.16),rgba(96,165,250,0) 70%),
    linear-gradient(180deg,#f7f9fd 0%,#eef2f8 60%,#f3f6fb 100%) !important;
  border-radius:28px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 -18px 50px -30px rgba(96,165,250,.6) !important;
  padding:6px 0 14px !important;
  isolation:isolate;
}
/* El degradado oscuro→claro de 80 px arriba ensuciaba el borde de la hoja: ahora la luz va en el borde */
main#main-content > .cat-sections-wrapper::before{display:none !important}
/* Grano fino (mismo lenguaje que el banner, en claro) */
main#main-content > .cat-sections-wrapper::after{
  content:"" !important;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Cada línea en su panel */
.cat-sections-wrapper > .cat-shelf,
.cat-sections-wrapper > .cat-shelf:first-child{
  position:relative !important;z-index:1 !important;isolation:isolate;overflow:hidden !important;
  margin:14px 12px 0 !important;padding:18px 0 14px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 100%) !important;
  border:1px solid rgba(255,255,255,.95) !important;border-radius:24px !important;
  box-shadow:0 0 0 1px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.04),0 22px 44px -28px rgba(15,23,42,.32) !important;
  contain-intrinsic-size:auto 440px !important;
}
.cat-sections-wrapper > .cat-shelf:first-child{margin-top:18px !important}
/* Resplandor tenue del color de la línea, arriba a la izquierda */
.cat-sections-wrapper > .cat-shelf::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(70% 55% at 0% 0%,color-mix(in srgb,var(--cat-clr) 16%,transparent),transparent 70%);
}
/* Barrita del color de la línea junto al título */
.cat-sections-wrapper > .cat-shelf::after{
  content:"";position:absolute;left:0;top:24px;width:4px;height:38px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--cat-clr),color-mix(in srgb,var(--cat-clr) 60%,#0f172a));
}
.cat-sections-wrapper > .cat-shelf .tech-container{padding:0 14px !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-head{margin-bottom:12px !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-icon{box-shadow:0 6px 16px -8px color-mix(in srgb,var(--cat-clr) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.25) !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-all{
  background:rgba(255,255,255,.9) !important;
  box-shadow:0 4px 12px -8px color-mix(in srgb,var(--cat-clr) 70%,transparent) !important;
}
/* Tarjetas de producto: flotan sobre el panel */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track > .product-card-tech{
  border:1px solid rgba(15,23,42,.07) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 14px 28px -18px rgba(15,23,42,.38) !important;
}
/* El subtítulo «75 productos · desde S/ 7» se partía en dos líneas dentro del panel: una línea, 13 px, y «Ver todo» más compacto */
.cat-sections-wrapper > .cat-shelf .cat-shelf-sub.cat-shelf-sub--movil{font-size:13px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-titles{min-width:0 !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-head{gap:10px !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-all{padding:.4rem .75rem !important;min-height:40px !important}
.cat-sections-wrapper > .cat-shelf,
.cat-sections-wrapper > .cat-shelf:first-child{margin-left:10px !important;margin-right:10px !important}
.cat-sections-wrapper > .cat-shelf .tech-container{padding:0 12px !important}
@media (max-width:400px){
  .cat-sections-wrapper > .cat-shelf .cat-shelf-all i{display:none !important}
}
/* «Últimas N» se recortaba en celulares de 360 px: el panel resta ~16 px y la tarjeta queda en ~134 px (le quedan
   ~78 px a la etiqueta junto al corazón). En tarjetas angostas se quita la llamita; en 320 px caben 1,9 tarjetas. */
@container (max-width:140px){
  .cat-shelf .cat-shelf-track .product-card-tech .product-stock{gap:0 !important;padding:.25rem .45rem !important}
  .cat-shelf .cat-shelf-track .product-card-tech .product-stock i{display:none !important}
}
@media (max-width:340px){
  .cat-sections-wrapper > .cat-shelf .cat-shelf-track{--per:1.9}
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════
   MÁS PREMIUM, RONDA 2 (4/10/2026, propietario: «proceder» con las mejoras 1, 2 y 3)
   1. «Agregar» deja de ser una barra azul a lo ancho en cada tarjeta (4-6 a la vez en pantalla, aire de oferta): es
      un botón redondo a la derecha del precio, azul marino con el brillo del icono de soporte. Es el MISMO botón (mismo
      clic, mismo aria-label); el «+» se pinta con fondos para dejar libre ::after, que agranda el área táctil a 48 px.
      Al agregar, tienda-carrito-simple.js (animarBotonAgregado) le pone un icono de visto 2 s: entonces pasa a verde.
      «Ver N colores» (modelos con versiones) es el mismo círculo con su flecha; «Agotado» queda como franja gris.
   2. Precio: «S/» más pequeño y sin «.00» (las plantillas marcan .pc-sim y .pc-dec; en el resto del sitio se ve igual).
   3. El borde derecho del carril se desvanece en vez de cortar la tarjeta en seco; al deslizar aparece también a la
      izquierda, y al llegar al final se quita (carriles.js ya apaga las flechas en los extremos).
   ═════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-info{padding-bottom:.625rem !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-prices,
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .fam-card__price-block{
  margin-top:auto !important;min-height:40px !important;align-content:center !important;padding-right:48px !important;
}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:not(.is-agotado){
  position:absolute !important;right:.625rem !important;bottom:.625rem !important;left:auto !important;top:auto !important;z-index:5 !important;
  width:40px !important;min-width:40px !important;height:40px !important;min-height:40px !important;padding:0 !important;gap:0 !important;
  border:1px solid rgba(255,255,255,.22) !important;border-radius:999px !important;
  background:
    linear-gradient(#fff,#fff) center/14px 2px no-repeat,
    linear-gradient(#fff,#fff) center/2px 14px no-repeat,
    linear-gradient(180deg,#3563d9 0%,#1e40af 58%,#1a3690 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 4px rgba(0,0,0,.18),0 6px 14px -6px rgba(30,64,175,.6) !important;
  font-size:0 !important;overflow:visible !important;
}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:not(.is-agotado) > span{display:none !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech button.btn-add-cart:not(.is-agotado) > i{display:none !important}
/* Área táctil de 48 px sin agrandar el círculo */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:not(.is-agotado)::after{content:"" !important;display:block !important;position:absolute !important;inset:-4px !important;border-radius:999px;background:none !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:not(.is-agotado)::before{display:none !important;content:none !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart:not(.is-agotado):active{transform:scale(.94) !important}
/* Agregado (2 s): verde con visto */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech button.btn-add-cart:has(> .fa-check){
  background:linear-gradient(180deg,#10b981 0%,#059669 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 6px 14px -6px rgba(5,150,105,.6) !important;
}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech button.btn-add-cart:not(.is-agotado) > i.fa-check{display:inline-block !important;font-size:1rem !important;color:#fff !important}
/* «Ver N colores»: el mismo círculo con su flecha (o el ojo) */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech a.btn-add-cart:not(.is-agotado){background:linear-gradient(180deg,#3563d9 0%,#1e40af 58%,#1a3690 100%) !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech a.btn-add-cart > i{display:inline-block !important;margin:0 !important;font-size:.95rem !important;color:#fff !important;-webkit-text-fill-color:#fff !important}
/* Agotado: franja gris baja, sin reservar sitio para el círculo */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech:has(.btn-add-cart.is-agotado) .product-prices,
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech:has(.btn-add-cart.is-agotado) .fam-card__price-block{padding-right:0 !important;min-height:0 !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .btn-add-cart.is-agotado{
  margin-top:.25rem !important;height:34px !important;min-height:34px !important;border-radius:10px !important;font-size:.8125rem !important;
}

/* 2. Precio */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-price-current{font-size:1.25rem !important;letter-spacing:-.02em !important}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-price-current .pc-sim{
  font-size:.62em;font-weight:600;letter-spacing:0;margin-right:-.12em;color:#475569;-webkit-text-fill-color:#475569;
}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-price-current .pc-dec{font-size:.68em;font-weight:700;letter-spacing:0}
.cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-price-current .pc-dec--cero{display:none}
/* Tarjetas angostas (celulares de 360 px o menos): un punto menos para que «S/ 4,509» quepa junto al círculo */
@container (max-width:140px){
  .cat-sections-wrapper > .cat-shelf .cat-shelf-track .product-card-tech .product-price-current{font-size:1.125rem !important}
}

/* 3. Bordes del carril que se desvanecen */
.cat-sections-wrapper > .cat-shelf .cat-shelf-track{
  --fade-l:0px;--fade-r:36px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent 100%);
}
.cat-sections-wrapper > .cat-shelf:has([data-carril-prev]:not(:disabled)) .cat-shelf-track{--fade-l:24px}
.cat-sections-wrapper > .cat-shelf:has([data-carril-next]:disabled) .cat-shelf-track{--fade-r:0px}