/*
 * Tema: DarkTech
 * Inspiración: Newegg/gamer — negro profundo + neón cyan + tipografía agresiva
 */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Marca — neón sobre oscuro */
  --color-primary:           #00D4FF;
  --color-primary-hover:     #00BBDD;
  --color-secondary:         #7C3AED;
  --color-secondary-hover:   #6D28D9;
  --color-accent:            #00D4FF;
  --color-accent-hover:      #00BBDD;

  /* Fondos */
  --color-bg:                #0A0A0F;
  --color-surface:           #12121A;
  --color-surface-muted:     #1A1A26;
  --color-bg-header:         #0D0D14;
  --color-bg-footer:         #060608;

  /* Textos */
  --color-text:              #E2E8F0;
  --color-text-muted:        #718096;
  --color-link:              #00D4FF;
  --color-link-hover:        #67E8FF;

  /* Precios */
  --color-price:             #E2E8F0;
  --color-price-sale:        #00D4FF;
  --color-price-original:    #718096;

  /* Botones */
  --color-btn-primary-bg:    #00D4FF;
  --color-btn-primary-text:  #0A0A0F;
  --color-btn-secondary-bg:  #1A1A26;
  --color-btn-secondary-text:#00D4FF;

  /* UI */
  --color-border:            #2D2D3A;
  --color-danger:            #FF4757;
  --color-badge-bg:          #00D4FF;
  --color-badge-text:        #0A0A0F;

  /* Tipografía */
  --font-main:               'Inter', 'Rajdhani', sans-serif;

  /* Forma — ángulos rectos, gamer */
  --radius-sm:               2px;
  --radius-base:             4px;
  --radius-lg:               6px;

  /* Sombras — neón glow */
  --shadow-card:             0 2px 12px rgba(0,212,255,.08), 0 0 0 1px #2D2D3A;
  --shadow-header:           0 2px 16px rgba(0,0,0,.6);
}

/* ── DarkTech: overrides estructurales ──────────────────────────────
   Scoped a data-color-scheme para ganar especificidad sobre bundle CSS
   ─────────────────────────────────────────────────────────────────── */

/* Página base oscura */
[data-color-scheme="darktech"] body { background: var(--color-bg); color: var(--color-text); }

/* Header: negro profundo + línea neon inferior */
[data-color-scheme="darktech"] .hm-header {
  background: var(--color-bg-header);
  box-shadow: 0 2px 16px rgba(0,0,0,.6), 0 1px 0 rgba(0,212,255,.18);
}
[data-color-scheme="darktech"] .hm-mid { background: var(--color-bg-header); }
[data-color-scheme="darktech"] .hm-top { background: #06060a; border-bottom: 1px solid rgba(0,212,255,.12); }
[data-color-scheme="darktech"] .hm-header--scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.8), 0 1px 0 rgba(0,212,255,.25);
}

/* Cards: fondo oscuro base */
[data-color-scheme="darktech"] .pc-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-color-scheme="darktech"] .pc-img-wrap { background: var(--color-surface-muted); }

/* Card hover: neon glow ring */
[data-color-scheme="darktech"] .pc-card:hover,
[data-color-scheme="darktech"] .pc-card--dt:hover {
  box-shadow: 0 0 0 1px var(--color-primary), 0 8px 32px rgba(0,212,255,.18);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}

/* Textos sobre fondo oscuro */
[data-color-scheme="darktech"] .pc-title     { color: var(--color-text); }
[data-color-scheme="darktech"] .pc-title:hover { color: var(--color-primary); }
[data-color-scheme="darktech"] .pc-brand     { color: var(--color-primary); opacity: .75; }
[data-color-scheme="darktech"] .pc-model     { color: var(--color-text-muted); }
[data-color-scheme="darktech"] .pc-price-old { color: var(--color-text-muted); }

/* Precio: neon con glow */
[data-color-scheme="darktech"] .pc-price,
[data-color-scheme="darktech"] .pc-price--neon {
  color: var(--color-primary);
  text-shadow: 0 0 12px rgba(0,212,255,.5), 0 0 24px rgba(0,212,255,.2);
}

/* Stock: cyan para "en stock" */
[data-color-scheme="darktech"] .pc-stock--in          { color: var(--color-primary); }
[data-color-scheme="darktech"] .pc-stock--in .pc-stock__dot { background: var(--color-primary); }

/* Badge descuento: outlined neon */
[data-color-scheme="darktech"] .pc-badge--discount,
[data-color-scheme="darktech"] .pc-badge--dt-hex {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 6px rgba(0,212,255,.35);
  text-shadow: 0 0 6px rgba(0,212,255,.6);
}

/* Botones: clip-path angular, uppercase gamer */
[data-color-scheme="darktech"] .pc-btn-cart,
[data-color-scheme="darktech"] .pc-btn-cart--dt {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 20px rgba(0,212,255,.05);
}
[data-color-scheme="darktech"] .pc-btn-cart:hover:not(:disabled),
[data-color-scheme="darktech"] .pc-btn-cart--dt:hover:not(:disabled) {
  background: rgba(0,212,255,.12);
  box-shadow: 0 0 14px rgba(0,212,255,.3), inset 0 0 20px rgba(0,212,255,.08);
  transform: none;
}
[data-color-scheme="darktech"] .pc-btn-cart--disabled {
  background: transparent;
  border-color: #2D2D3A;
  color: #2D2D3A;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Quick view: neon */
[data-color-scheme="darktech"] .pc-quick-view {
  background: rgba(0,212,255,.07);
  border-top: 1px solid rgba(0,212,255,.25);
  color: var(--color-primary);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
[data-color-scheme="darktech"] .pc-quick-view:hover { background: rgba(0,212,255,.18); }

/* Wishlist: outline cyan */
[data-color-scheme="darktech"] .pc-wish { color: var(--color-text-muted); }
[data-color-scheme="darktech"] .pc-wish:hover,
[data-color-scheme="darktech"] .pc-wish--active { color: var(--color-primary); }

/* Compare: outline */
[data-color-scheme="darktech"] .pc-compare {
  border-color: rgba(0,212,255,.2);
  color: var(--color-text-muted);
}
[data-color-scheme="darktech"] .pc-compare:hover,
[data-color-scheme="darktech"] .pc-compare--active { color: var(--color-primary); border-color: var(--color-primary); }

/* Headings: Rajdhani uppercase */
[data-color-scheme="darktech"] h1,
[data-color-scheme="darktech"] h2,
[data-color-scheme="darktech"] h3 {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Overlay "AGOTADO": neon */
[data-color-scheme="darktech"] .pc-out-overlay { background: rgba(10,10,15,.7); }
[data-color-scheme="darktech"] .pc-out-overlay__label {
  background: rgba(10,10,15,.9);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Corner accent — acento superior izquierdo en pc-card--dt */
[data-color-scheme="darktech"] .pc-dt-corner {
  position: absolute;
  top: 0; left: 0;
  width: 40px; height: 3px;
  background: var(--color-primary);
  box-shadow: 0 0 8px rgba(0,212,255,.6);
  z-index: 2;
  border-radius: 0 0 2px 0;
}

/* ── DarkTech: Countdown terminal ────────────────────────────────────
   Dígitos grandes, fondo oscuro, neon glow — estilo lanzamiento de cohete
   ─────────────────────────────────────────────────────────────────── */
.ocd-dt-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ocd-dt-eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: rgba(0,212,255,.7);
  text-transform: uppercase;
  letter-spacing: .18em;
}
.ocd-dt-eyebrow .fas { margin-right: 4px; }
.ocd-dt-units {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ocd-dt-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.25);
  padding: 10px 16px 8px;
  min-width: 64px;
  border-radius: 2px;
}
.ocd-dt-block--tick { animation: ocdTick .22s ease-out both; }
.ocd-dt-num {
  font-size: 36px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: 'Rajdhani', monospace;
  text-shadow: 0 0 12px rgba(0,212,255,.6);
  letter-spacing: .04em;
}
.ocd-dt-lbl {
  font-size: 9px;
  color: rgba(0,212,255,.5);
  margin-top: 4px;
  letter-spacing: .2em;
}
.ocd-dt-sep {
  font-size: 28px;
  font-weight: 700;
  color: rgba(0,212,255,.4);
  line-height: 1;
  margin-bottom: 14px;
  text-shadow: 0 0 8px rgba(0,212,255,.5);
}

/* ── DarkTech: InfoBoxes como stat-panel ─────────────────────────────
   Estructura: números grandes tipo dashboard, separador vertical neon
   ─────────────────────────────────────────────────────────────────── */
[data-color-scheme="darktech"] .ib-strip {
  background: var(--color-surface);
  border: 1px solid rgba(0,212,255,.15);
  border-radius: 4px;
}
[data-color-scheme="darktech"] .ib-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 20px 28px;
  border-right: 1px solid rgba(0,212,255,.12);
}
[data-color-scheme="darktech"] .ib-card:hover { background: rgba(0,212,255,.04); }
[data-color-scheme="darktech"] .ib-icon {
  background: transparent;
  color: var(--color-primary);
  font-size: 24px;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: 0 0 10px rgba(0,212,255,.3);
  margin-bottom: 4px;
}
[data-color-scheme="darktech"] .ib-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: 'Rajdhani', 'Inter', sans-serif;
  letter-spacing: .02em;
  text-shadow: 0 0 8px rgba(0,212,255,.4);
}
[data-color-scheme="darktech"] .ib-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: normal;
}

/* ── DarkTech: Nav bar ───────────────────────────────────────────────
   Barra oscura con trigger neon y mega panel dark
   ─────────────────────────────────────────────────────────────────── */
[data-color-scheme="darktech"] .hm-nav {
  background: var(--color-surface);
  border-top: 1px solid rgba(0,212,255,.12);
  border-bottom: 1px solid rgba(0,212,255,.08);
}
[data-color-scheme="darktech"] .mm-trigger {
  background: rgba(0,212,255,.08);
  border-right: 1px solid rgba(0,212,255,.2);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 700;
}
[data-color-scheme="darktech"] .mm-trigger:hover,
[data-color-scheme="darktech"] .mm-root--open .mm-trigger {
  background: rgba(0,212,255,.15);
}
[data-color-scheme="darktech"] .mm-trigger__bars,
[data-color-scheme="darktech"] .mm-trigger__arrow { color: var(--color-primary); }
[data-color-scheme="darktech"] .mm-panel {
  background: var(--color-surface);
  border: 1px solid rgba(0,212,255,.2);
  border-top: 2px solid var(--color-primary);
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
[data-color-scheme="darktech"] .mm-sidebar { background: #0a0a12; border-right: 1px solid rgba(0,212,255,.1); }
[data-color-scheme="darktech"] .mm-sidebar__link,
[data-color-scheme="darktech"] .mm-list__link { color: var(--color-text); }
[data-color-scheme="darktech"] .mm-sidebar__item--active .mm-sidebar__link,
[data-color-scheme="darktech"] .mm-sidebar__link:hover,
[data-color-scheme="darktech"] .mm-list__link:hover { color: var(--color-primary); background: rgba(0,212,255,.06); }
[data-color-scheme="darktech"] .mm-col__title { color: var(--color-primary); opacity: .7; }
[data-color-scheme="darktech"] .mm-hint       { color: var(--color-text-muted); }

/* ── DarkTech: layouts estructurales ────────────────────────────────── */

/* Sidebar del hero: oculto, hero full-width */
[data-color-scheme="darktech"] .cm-sidebar { display: none; }
[data-color-scheme="darktech"] .cm-wrap { grid-template-columns: 1fr; }

/* Hero: fondo negro, sin bordes redondeados, efecto scanline */
[data-color-scheme="darktech"] .hs-wrap {
  border-radius: 0;
  background: #000;
}
/* Overlay scanline horizontal — efecto CRT */
[data-color-scheme="darktech"] .hs-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0px,
    transparent 3px,
    rgba(0,212,255,.025) 3px,
    rgba(0,212,255,.025) 4px
  );
  pointer-events: none;
  z-index: 5;
}
/* Gradiente inferior más oscuro */
[data-color-scheme="darktech"] .hs-slide::after {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.35) 45%,
    transparent 100%
  );
}
/* Textos del hero: neon */
[data-color-scheme="darktech"] .hs-h4 {
  color: rgba(0,212,255,.75);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12px;
}
[data-color-scheme="darktech"] .hs-h2 {
  color: #fff;
  text-shadow: 0 0 20px rgba(0,212,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* Botón hero: clip-path angular neon */
[data-color-scheme="darktech"] .hs-btn {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  box-shadow: 0 0 14px rgba(0,212,255,.3);
}
[data-color-scheme="darktech"] .hs-btn:hover {
  background: rgba(0,212,255,.12);
  box-shadow: 0 0 24px rgba(0,212,255,.5);
}
/* Flechas: neon */
[data-color-scheme="darktech"] .hs-arrow {
  background: rgba(0,212,255,.08);
  border: 1px solid rgba(0,212,255,.3);
  color: var(--color-primary);
  border-radius: 2px;
}
[data-color-scheme="darktech"] .hs-arrow:hover {
  background: rgba(0,212,255,.18);
  border-color: var(--color-primary);
}
/* Dots: neon */
[data-color-scheme="darktech"] .hs-dot { background: rgba(0,212,255,.25); }
[data-color-scheme="darktech"] .hs-dot--on { background: var(--color-primary); box-shadow: 0 0 6px rgba(0,212,255,.8); }

/* Sección productos: fondo oscuro completo */
[data-color-scheme="darktech"] .ttp-section {
  background: var(--color-surface-muted);
  padding: 28px 16px;
  border-radius: 4px;
}
/* Title header: línea cyan en vez de amarillo */
[data-color-scheme="darktech"] .ttp-header { border-bottom-color: var(--color-primary); }
[data-color-scheme="darktech"] .ttp-title  { color: var(--color-primary); text-transform: uppercase; letter-spacing: .04em; }
[data-color-scheme="darktech"] .ttp-subtitle { color: var(--color-text-muted); }
[data-color-scheme="darktech"] .ttp-see-all  { color: var(--color-primary); border-color: var(--color-primary); }

/* Grid: 3 columnas grandes en lugar de 5 */
[data-color-scheme="darktech"] .ttp-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Escala interior de la card aprovechando el mayor ancho */
[data-color-scheme="darktech"] .ttp-section .pc-body { padding: 16px 18px 20px; }
[data-color-scheme="darktech"] .ttp-section .pc-title { font-size: 15px; line-height: 1.4; -webkit-line-clamp: 2; }
[data-color-scheme="darktech"] .ttp-section .pc-brand { font-size: 12px; }
[data-color-scheme="darktech"] .ttp-section .pc-price,
[data-color-scheme="darktech"] .ttp-section .pc-price--neon { font-size: 21px; }
[data-color-scheme="darktech"] .ttp-section .pc-price-old { font-size: 14px; }
[data-color-scheme="darktech"] .ttp-section .pc-btn-cart,
[data-color-scheme="darktech"] .ttp-section .pc-btn-cart--dt { font-size: 12px; padding: 10px 16px; }

/* Responsive darktech */
@media (max-width: 767px) {
  [data-color-scheme="darktech"] .ttp-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
  [data-color-scheme="darktech"] .ttp-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════
   DARKTECH — TopBrands: grid Porto-style (bordes internos)
   ═══════════════════════════════════════════════════════ */

/* Header */
[data-color-scheme="darktech"] .tb-header {
  border-bottom-color: rgba(0,212,255,.25);
}
[data-color-scheme="darktech"] .tb-title {
  font-size: 22px; font-weight: 800; color: #e2e8f0; letter-spacing: .01em;
}
[data-color-scheme="darktech"] .tb-subtitle { color: #4a5568; }
[data-color-scheme="darktech"] .tb-see-all {
  background: #e2e8f0; color: #0a0a12; border: none;
  border-radius: 100px; font-weight: 700; font-size: 13px;
  padding: 8px 22px;
  transition: background .15s, color .15s;
}
[data-color-scheme="darktech"] .tb-see-all:hover {
  background: #00d4ff; color: #0a0a12;
}

/* Ocultar flechas y fade mask — grid estático, no carousel */
[data-color-scheme="darktech"] .tb-arrow { display: none !important; }
[data-color-scheme="darktech"] .tb-track-wrap::after { display: none !important; }

/* Grid: sin gap, bordes internos estilo tabla */
[data-color-scheme="darktech"] .tb-track {
  display: grid !important;
  flex-wrap: unset !important;
  overflow-x: visible !important;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 0 !important;
  border: 1px solid rgba(0,212,255,.15);
  border-radius: 6px;
  overflow: hidden !important;
}

/* Cada celda */
[data-color-scheme="darktech"] .tb-card {
  background: #0d0d14;
  border: none;
  border-right: 1px solid rgba(0,212,255,.12);
  border-bottom: 1px solid rgba(0,212,255,.12);
  border-radius: 0;
  padding: 28px 20px 24px;
  gap: 0;
  flex: unset !important;
  width: auto !important;
  scroll-snap-align: unset;
  transition: background .2s;
}
/* Última columna: sin borde derecho */
[data-color-scheme="darktech"] .tb-card:nth-child(6n) { border-right: none; }
/* Última fila (con 6 items = 1 fila): sin borde inferior */
[data-color-scheme="darktech"] .tb-card:nth-last-child(-n+6):nth-child(6n+1),
[data-color-scheme="darktech"] .tb-card:nth-last-child(-n+6),
[data-color-scheme="darktech"] .tb-card:last-child { border-bottom: none; }

[data-color-scheme="darktech"] .tb-card:hover {
  background: rgba(0,212,255,.05);
  border-color: rgba(0,212,255,.12); /* mantener el borde de la celda */
  box-shadow: none;
  transform: none;
}

/* Imagen: sin grayscale, escala al hover */
[data-color-scheme="darktech"] .tb-card__img-wrap {
  aspect-ratio: 5 / 3;
}
[data-color-scheme="darktech"] .tb-card__img {
  filter: none;
  opacity: .85;
  transition: opacity .2s, transform .25s;
}
[data-color-scheme="darktech"] .tb-card:hover .tb-card__img {
  filter: none;
  opacity: 1;
  transform: scale(1.07);
}

/* Nombre de marca: oculto (solo logos, como Porto) */
[data-color-scheme="darktech"] .tb-card__name { display: none; }

/* Skeleton */
[data-color-scheme="darktech"] .tb-card--skeleton {
  background: #0d0d14;
  border-right: 1px solid rgba(0,212,255,.12);
  border-bottom: 1px solid rgba(0,212,255,.12);
  border-radius: 0;
  padding: 28px 20px 24px;
}
[data-color-scheme="darktech"] .tb-card--skeleton:nth-child(6n) { border-right: none; }
[data-color-scheme="darktech"] .tb-skeleton__img {
  aspect-ratio: 5 / 3;
  background: linear-gradient(90deg, #1a1a26 25%, #252535 50%, #1a1a26 75%);
  background-size: 200% 100%;
}
[data-color-scheme="darktech"] .tb-skeleton__name { display: none; }

/* Responsive darktech */
@media (max-width: 991px) {
  [data-color-scheme="darktech"] .tb-track {
    grid-template-columns: repeat(3, 1fr);
  }
  [data-color-scheme="darktech"] .tb-card:nth-child(6n) { border-right: 1px solid rgba(0,212,255,.12); }
  [data-color-scheme="darktech"] .tb-card:nth-child(3n) { border-right: none; }
  [data-color-scheme="darktech"] .tb-card--skeleton:nth-child(6n) { border-right: 1px solid rgba(0,212,255,.12); }
  [data-color-scheme="darktech"] .tb-card--skeleton:nth-child(3n) { border-right: none; }
}
@media (max-width: 575px) {
  [data-color-scheme="darktech"] .tb-track {
    grid-template-columns: repeat(2, 1fr);
  }
  [data-color-scheme="darktech"] .tb-card:nth-child(3n) { border-right: 1px solid rgba(0,212,255,.12); }
  [data-color-scheme="darktech"] .tb-card:nth-child(2n) { border-right: none; }
  [data-color-scheme="darktech"] .tb-card--skeleton:nth-child(3n) { border-right: 1px solid rgba(0,212,255,.12); }
  [data-color-scheme="darktech"] .tb-card--skeleton:nth-child(2n) { border-right: none; }
}

/* OfferProducts: oscuro total con borde neon */
[data-color-scheme="darktech"] .op-section {
  background: var(--color-surface);
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 4px;
}
[data-color-scheme="darktech"] .op-title    { color: var(--color-primary); text-transform: uppercase; letter-spacing: .04em; }
[data-color-scheme="darktech"] .op-eyebrow  { color: rgba(0,212,255,.7); }
[data-color-scheme="darktech"] .op-subtitle { color: var(--color-text-muted); }

/* Footer: dark con línea cyan */
[data-color-scheme="darktech"] .ft-root {
  background: var(--color-bg-footer);
  border-top: 1px solid rgba(0,212,255,.25);
}
[data-color-scheme="darktech"] .ft-bottom { background: rgba(0,212,255,.04); border-top: 1px solid rgba(0,212,255,.12); }

/* Skeletons adaptados */
[data-color-scheme="darktech"] .pc-skeleton {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-color-scheme="darktech"] .pc-skeleton__img { background: var(--color-surface-muted); }
[data-color-scheme="darktech"] .pc-skeleton__line {
  background: linear-gradient(90deg, #1A1A26 25%, #252535 50%, #1A1A26 75%);
  background-size: 200% 100%;
}


/* ═══════════════════════════════════════════════════════════════════
   HeaderDarktech — info bar + barra oscura + categorías 3 niveles + pills
   ═══════════════════════════════════════════════════════════════════ */

/* Info bar (hm-top) — ultra oscuro, texto apagado */
[data-color-scheme="darktech"] .hm-top { background: #06060a; border-bottom: 1px solid rgba(0,212,255,.1); }
[data-color-scheme="darktech"] .hm-top__nav-link { color: #4a5568; font-size: 12px; }
[data-color-scheme="darktech"] .hm-top__nav-link:hover { color: #00d4ff; }
[data-color-scheme="darktech"] .hm-top__nav-link--cta {
  color: #00d4ff; font-weight: 600; background: none; padding: 0;
}
[data-color-scheme="darktech"] .hm-top__social-link { color: #4a5568; }
[data-color-scheme="darktech"] .hm-top__social-link:hover { color: #00d4ff; }
[data-color-scheme="darktech"] .hm-top__tc { color: #718096; font-size: 12px; font-weight: 600; }
[data-color-scheme="darktech"] .hm-top__announce { color: #4a5568; font-size: 12px; }
[data-color-scheme="darktech"] .hm-top__announce .fa-truck { color: #00d4ff; }
[data-color-scheme="darktech"] .hm-top__nav-list a { color: #4a5568; }
[data-color-scheme="darktech"] .hm-top__nav-list a:hover { color: #00d4ff; }

/* Barra principal */
[data-color-scheme="darktech"] .hmd-bar {
  background: var(--color-bg-header);
  border-bottom: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-bar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  height: 60px;
}
[data-color-scheme="darktech"] .hmd-logo img {
  height: 36px; width: auto; display: block; object-fit: contain;
}

/* Search */
[data-color-scheme="darktech"] .hmd-search { position: relative; width: 100%; }
[data-color-scheme="darktech"] .hmd-search .hm-search {
  background: #1a1a26; border: 1px solid rgba(0,212,255,.2);
  border-radius: 2px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
[data-color-scheme="darktech"] .hmd-search .hm-search:focus-within {
  border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0,212,255,.1), 0 0 12px rgba(0,212,255,.08);
}
[data-color-scheme="darktech"] .hmd-search .hm-search__input { background: transparent; color: #e2e8f0; }
[data-color-scheme="darktech"] .hmd-search .hm-search__input::placeholder { color: #4a5568; }
[data-color-scheme="darktech"] .hmd-search .hm-search__icon { color: rgba(0,212,255,.5); }
[data-color-scheme="darktech"] .hmd-search .hm-search__btn {
  background: #00d4ff; color: #0a0a0f; border-radius: 0; font-weight: 700;
}
[data-color-scheme="darktech"] .hmd-search .hm-search__btn:hover { background: #00bbdd; box-shadow: 0 0 8px rgba(0,212,255,.4); }
[data-color-scheme="darktech"] .hmd-search .hm-search__select-wrap select {
  background: #12121a; color: #a0aec0; border-right: 1px solid rgba(0,212,255,.15); font-size: 13px;
}

/* Acciones */
[data-color-scheme="darktech"] .hmd-actions { display: flex; align-items: center; gap: 4px; }
[data-color-scheme="darktech"] .hmd-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid transparent;
  background: transparent; cursor: pointer; color: #a0aec0;
  font-size: 17px; border-radius: 2px;
  transition: color .15s, border-color .15s, background .15s; text-decoration: none;
}
[data-color-scheme="darktech"] .hmd-icon-btn:hover {
  color: #00d4ff; border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.06);
}
[data-color-scheme="darktech"] .hmd-toggler {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer; font-size: 20px; color: #a0aec0;
}

/* Carrito — mc-toggle */
[data-color-scheme="darktech"] .hmd-actions .mc-toggle {
  color: #00d4ff; font-size: 18px; padding: 0 10px;
  display: flex; align-items: center; gap: 4px; height: 36px;
  border: 1px solid rgba(0,212,255,.3); border-radius: 2px;
  background: rgba(0,212,255,.06);
  transition: background .15s, box-shadow .15s;
}
[data-color-scheme="darktech"] .hmd-actions .mc-toggle:hover {
  background: rgba(0,212,255,.12); box-shadow: 0 0 8px rgba(0,212,255,.2);
}
[data-color-scheme="darktech"] .hmd-actions .mc-count {
  background: #00d4ff; color: #0a0a0f; font-size: 10px;
  border-radius: 2px; padding: 1px 5px; font-weight: 800;
}

/* Fila de categorías */
[data-color-scheme="darktech"] .hmd-cats { background: #0d0d14; border-bottom: 1px solid rgba(0,212,255,.1); }
[data-color-scheme="darktech"] .hmd-cats__row {
  display: flex; align-items: center; gap: 0; padding: 7px 0;
}
/* MainMenu dentro de darktech */
[data-color-scheme="darktech"] .hmd-cats__menu { flex-shrink: 0; position: relative; margin-right: 16px; }
[data-color-scheme="darktech"] .hmd-cats__menu .mm-trigger {
  background: rgba(0,212,255,.1); color: #00d4ff;
  border: 1px solid rgba(0,212,255,.3); border-radius: 2px;
  font-size: 12px; font-weight: 700; font-family: 'Inter', sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; gap: 8px; white-space: nowrap;
}
[data-color-scheme="darktech"] .hmd-cats__menu .mm-trigger:hover {
  background: rgba(0,212,255,.18); box-shadow: 0 0 8px rgba(0,212,255,.2);
}
[data-color-scheme="darktech"] .hmd-cats__menu .mm-trigger__bars { font-size: 13px; }
[data-color-scheme="darktech"] .hmd-cats__menu .mm-trigger__text { font-size: 12px; }

/* Pills scrollables */
[data-color-scheme="darktech"] .hmd-cats__pills {
  display: flex; align-items: center; gap: 6px; flex: 1;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -ms-overflow-style: none;
}
[data-color-scheme="darktech"] .hmd-cats__pills::-webkit-scrollbar { display: none; }
[data-color-scheme="darktech"] .hmd-cats__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; font-size: 11px; font-weight: 600;
  font-family: 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #718096; text-decoration: none;
  border: 1px solid rgba(0,212,255,.15); border-radius: 2px;
  white-space: nowrap; flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
[data-color-scheme="darktech"] .hmd-cats__pill:hover {
  color: #00d4ff; border-color: rgba(0,212,255,.5);
  background: rgba(0,212,255,.07); box-shadow: 0 0 8px rgba(0,212,255,.15);
}
[data-color-scheme="darktech"] .hmd-cats__pill--hot { color: #ff4757; border-color: rgba(255,71,87,.3); }
[data-color-scheme="darktech"] .hmd-cats__pill--hot:hover {
  color: #ff6b81; border-color: rgba(255,71,87,.6);
  background: rgba(255,71,87,.07); box-shadow: 0 0 8px rgba(255,71,87,.2);
}

/* Mega menu panel coloreado para darktech */
[data-color-scheme="darktech"] .mm-panel {
  background: #12121a; border: 1px solid rgba(0,212,255,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.08);
}
[data-color-scheme="darktech"] .mm-sidebar { background: #0d0d14; border-right: 1px solid rgba(0,212,255,.1); }
[data-color-scheme="darktech"] .mm-sidebar__link { color: #a0aec0; }
[data-color-scheme="darktech"] .mm-sidebar__item--active .mm-sidebar__link,
[data-color-scheme="darktech"] .mm-sidebar__link:hover { color: #00d4ff; background: rgba(0,212,255,.07); }
[data-color-scheme="darktech"] .mm-list__link { color: #718096; }
[data-color-scheme="darktech"] .mm-list__item--active .mm-list__link,
[data-color-scheme="darktech"] .mm-list__link:hover { color: #00d4ff; background: rgba(0,212,255,.05); }
[data-color-scheme="darktech"] .mm-list__link--l3 { color: #718096; }
[data-color-scheme="darktech"] .mm-list__link--l3:hover { color: #00d4ff; }
[data-color-scheme="darktech"] .mm-col__title { color: #00d4ff; border-bottom-color: rgba(0,212,255,.2); }
[data-color-scheme="darktech"] .mm-hint { color: #4a5568; }

/* ═══════════════════════════════════════════════════════
   DARKTECH — Header Porto-style (strip + nav)
   ═══════════════════════════════════════════════════════ */

/* Ocultar barra de info clásica en darktech */
[data-color-scheme="darktech"] .hm-top { display: none !important; }

/* ── Fila 1: strip (trust | logo | acciones) ── */
[data-color-scheme="darktech"] .hmd-strip {
  background: #0a0a12;
  border-bottom: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-strip__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 82px;
  gap: 16px;
}
[data-color-scheme="darktech"] .hmd-strip__left {
  display: flex; align-items: center;
}

/* Trust badges */
[data-color-scheme="darktech"] .hmd-trust {
  display: flex; align-items: center; gap: 0;
}
[data-color-scheme="darktech"] .hmd-trust__item {
  display: flex; align-items: center; gap: 10px;
  padding-right: 20px; margin-right: 20px;
  border-right: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-trust__item:last-child {
  padding-right: 0; margin-right: 0; border-right: none;
}
[data-color-scheme="darktech"] .hmd-trust__icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid rgba(0,212,255,.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #00d4ff; font-size: 14px;
}
[data-color-scheme="darktech"] .hmd-trust__text {
  font-size: 11.5px; font-weight: 500; color: #718096;
  font-family: 'Inter', sans-serif; white-space: nowrap; line-height: 1.2;
}

/* Logo centrado */
[data-color-scheme="darktech"] .hmd-logo {
  display: flex; align-items: center; justify-content: center;
}
[data-color-scheme="darktech"] .hmd-logo img {
  height: 50px; width: auto; display: block; object-fit: contain;
}

/* Acciones con etiqueta */
[data-color-scheme="darktech"] .hmd-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
}
[data-color-scheme="darktech"] .hmd-action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 10px; min-width: 52px;
  color: #a0aec0; text-decoration: none; cursor: pointer;
  font-family: 'Inter', sans-serif;
  border: 1px solid transparent; border-radius: 2px;
  background: transparent;
  transition: color .15s, border-color .15s, background .15s;
}
[data-color-scheme="darktech"] .hmd-action-btn i {
  font-size: 19px; line-height: 1;
}
[data-color-scheme="darktech"] .hmd-action-btn__label {
  font-size: 10px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
}
[data-color-scheme="darktech"] .hmd-action-btn:hover {
  color: #00d4ff; border-color: rgba(0,212,255,.25); background: rgba(0,212,255,.05);
  text-decoration: none;
}

/* Carrito dentro de hmd-actions */
[data-color-scheme="darktech"] .hmd-actions .mc-toggle {
  flex-direction: column; align-items: center; gap: 3px;
  height: auto; padding: 8px 10px; min-width: 52px;
  border: 1px solid rgba(0,212,255,.3); border-radius: 2px;
  background: rgba(0,212,255,.06); color: #00d4ff;
  font-size: 19px;
  transition: background .15s, box-shadow .15s;
}
[data-color-scheme="darktech"] .hmd-actions .mc-toggle:hover {
  background: rgba(0,212,255,.12); box-shadow: 0 0 8px rgba(0,212,255,.2);
}
[data-color-scheme="darktech"] .hmd-actions .mc-count {
  background: #00d4ff; color: #0a0a0f; font-size: 10px;
  border-radius: 2px; padding: 1px 5px; font-weight: 800;
}

/* Buscador móvil */
[data-color-scheme="darktech"] .hmd-mobile-search {
  background: #0d0d14;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search {
  background: #1a1a26;
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 2px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search:focus-within {
  border-color: #00d4ff;
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search__input { background: transparent; color: #e2e8f0; }
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search__input::placeholder { color: #4a5568; }
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search__icon { color: rgba(0,212,255,.5); }
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search__btn {
  background: #00d4ff; color: #0a0a0f; font-weight: 700; border-radius: 0;
}
[data-color-scheme="darktech"] .hmd-mobile-search .hm-search__btn:hover {
  background: #00bbdd;
}

/* Toggler mobile */
[data-color-scheme="darktech"] .hmd-toggler {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: none; cursor: pointer;
  font-size: 22px; color: #a0aec0;
}

/* ── Fila 2: nav links flat + buscador ── */
[data-color-scheme="darktech"] .hmd-nav {
  background: #0d0d14;
  border-bottom: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-nav__inner {
  display: flex; align-items: center; height: 46px; gap: 0;
}

/* NavMenuDarktech: wrap ocupa el espacio restante */
[data-color-scheme="darktech"] .hmd-nav__wrap {
  flex: 1; position: relative; height: 46px; overflow: visible;
  display: flex; flex-direction: column;
}

[data-color-scheme="darktech"] .hmd-nav__links {
  display: flex; align-items: center; flex: 1;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -ms-overflow-style: none;
}
[data-color-scheme="darktech"] .hmd-nav__links::-webkit-scrollbar { display: none; }
[data-color-scheme="darktech"] .hmd-nav__link {
  display: inline-flex; align-items: center;
  padding: 0 13px; height: 46px;
  font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif;
  color: #718096; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
[data-color-scheme="darktech"] .hmd-nav__link:hover,
[data-color-scheme="darktech"] .hmd-nav__link--active {
  color: #00d4ff; border-bottom-color: #00d4ff; text-decoration: none;
}
[data-color-scheme="darktech"] .hmd-nav__arrow {
  font-size: 9px; opacity: .4; margin-left: 3px;
}

/* ── Panel flotante L2 + L3 ── */
[data-color-scheme="darktech"] .hmd-nav__panel {
  position: absolute;
  top: 46px; left: 0;
  display: flex;
  min-width: 240px;
  background: #12121a;
  border: 1px solid rgba(0,212,255,.18);
  border-top: 2px solid #00d4ff;
  box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(0,212,255,.06);
  z-index: 9999;
  border-radius: 0 0 4px 4px;
}
[data-color-scheme="darktech"] .hmd-nav__panel--wide { min-width: 480px; }

/* Columna L2 */
[data-color-scheme="darktech"] .hmd-nav__panel-col {
  display: flex; flex-direction: column;
  padding: 8px 0;
}
[data-color-scheme="darktech"] .hmd-nav__panel-col--l2 {
  min-width: 220px;
  border-right: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-nav__panel-col--l3 {
  min-width: 220px; padding: 8px 0 8px;
}

/* Links del panel */
[data-color-scheme="darktech"] .hmd-nav__panel-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 18px;
  font-size: 13px; font-weight: 500; font-family: 'Inter', sans-serif;
  color: #a0aec0; text-decoration: none;
  transition: color .12s, background .12s;
  white-space: nowrap;
}
[data-color-scheme="darktech"] .hmd-nav__panel-link:hover {
  color: #00d4ff; background: rgba(0,212,255,.06); text-decoration: none;
}
[data-color-scheme="darktech"] .hmd-nav__panel-link--active {
  color: #00d4ff; background: rgba(0,212,255,.08);
}
[data-color-scheme="darktech"] .hmd-nav__panel-chevron {
  font-size: 10px; opacity: .5;
}

/* L3 */
[data-color-scheme="darktech"] .hmd-nav__panel-l3-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #00d4ff;
  padding: 6px 18px 4px; margin: 0;
  border-bottom: 1px solid rgba(0,212,255,.12);
}
[data-color-scheme="darktech"] .hmd-nav__panel-link--l3 {
  font-size: 12px; color: #718096;
  justify-content: flex-start; gap: 0;
}
[data-color-scheme="darktech"] .hmd-nav__panel-link--l3:hover { color: #00d4ff; }

/* Skeletons del panel */
[data-color-scheme="darktech"] .hmd-nav__panel-loading { padding: 8px 18px; display: flex; flex-direction: column; gap: 8px; }
[data-color-scheme="darktech"] .hmd-nav__panel-skel {
  height: 14px; border-radius: 3px;
  background: linear-gradient(90deg, #1a1a26 25%, #252535 50%, #1a1a26 75%);
  background-size: 200% 100%;
  animation: tbShimmer 1.4s infinite;
}

/* Buscador en la fila nav */
[data-color-scheme="darktech"] .hmd-nav__search {
  flex-shrink: 0; width: 380px;
  padding-left: 16px; border-left: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-nav__search .hm-search {
  background: #1a1a26; border: 1px solid rgba(0,212,255,.2);
  border-radius: 2px; width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
[data-color-scheme="darktech"] .hmd-nav__search .hm-search:focus-within {
  border-color: #00d4ff; box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__input { background: transparent; color: #e2e8f0; }
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__input::placeholder { color: #4a5568; }
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__icon { color: rgba(0,212,255,.5); }
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__btn {
  background: #00d4ff; color: #0a0a0f; font-weight: 700; border-radius: 0;
}
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__btn:hover {
  background: #00bbdd; box-shadow: 0 0 8px rgba(0,212,255,.4);
}
[data-color-scheme="darktech"] .hmd-nav__search .hm-search__select-wrap select {
  background: #12121a; color: #a0aec0; border-right: 1px solid rgba(0,212,255,.15); font-size: 13px;
}

/* Responsive */
@media (max-width: 1199px) {
  [data-color-scheme="darktech"] .hmd-nav__search { width: 300px; }
}
@media (max-width: 991px) {
  [data-color-scheme="darktech"] .hmd-strip__inner {
    grid-template-columns: auto 1fr auto; height: 64px; gap: 12px;
  }
  [data-color-scheme="darktech"] .hmd-logo { justify-content: flex-start; }
  [data-color-scheme="darktech"] .hmd-logo img { height: 36px; }
}
@media (max-width: 575px) {
  [data-color-scheme="darktech"] .hmd-strip__inner { height: 56px; gap: 8px; }
  [data-color-scheme="darktech"] .hmd-logo img { height: 30px; }
}

/* ── Checkout: hero banner ── */
[data-color-scheme="darktech"] .co-hero {
  background: linear-gradient(135deg, #0a0a12 0%, #0d1a26 100%);
  border-bottom: 2px solid #00d4ff;
}
[data-color-scheme="darktech"] .co-hero__eyebrow {
  color: #00d4ff;
}
[data-color-scheme="darktech"] .co-hero__title {
  color: #e2e8f0;
}

/* ── Checkout: botón Realizar pago ── */
[data-color-scheme="darktech"] .co-pay-btn {
  background: #00d4ff;
  color: #0a0a0f;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,212,255,.25);
}
[data-color-scheme="darktech"] .co-pay-btn:hover {
  background: #00bbdd;
  color: #0a0a0f;
  box-shadow: 0 0 16px rgba(0,212,255,.45);
}

/* ── Checkout: botones primarios (co-btn--primary) ── */
[data-color-scheme="darktech"] .co-btn--primary {
  background: #00d4ff;
  color: #0a0a0f;
  border-color: #00d4ff;
}
[data-color-scheme="darktech"] .co-btn--primary:hover {
  background: #00bbdd;
  border-color: #00bbdd;
  color: #0a0a0f;
}

/* ── Carrito: botón checkout ── */
[data-color-scheme="darktech"] .sc-checkout-btn {
  background: #00d4ff;
  color: #0a0a0f;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,212,255,.25);
}
[data-color-scheme="darktech"] .sc-checkout-btn:hover {
  background: #00bbdd;
  color: #0a0a0f;
  box-shadow: 0 0 16px rgba(0,212,255,.45);
  transform: translateY(-1px);
  text-decoration: none;
}
[data-color-scheme="darktech"] .sc-keep-shopping {
  color: #718096;
}
[data-color-scheme="darktech"] .sc-keep-shopping:hover {
  color: #00d4ff;
}

/* ═══════════════════════════════════════════════════════
   DARKTECH — CategoryShowcase (csd-*)
   Dashboard strip: header con chips + productos en fila
   ═══════════════════════════════════════════════════════ */

[data-color-scheme="darktech"] .csd-section {
  padding: 0 0 40px;
}

/* Bloque por categoría */
[data-color-scheme="darktech"] .csd-block {
  background: #0d0d14;
  border: 1px solid rgba(0,212,255,.18);
  border-top: 3px solid #00d4ff;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

/* Header */
[data-color-scheme="darktech"] .csd-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(0,212,255,.12);
}

[data-color-scheme="darktech"] .csd-header__info {
  flex-shrink: 0;
}

[data-color-scheme="darktech"] .csd-title {
  font-size: 17px;
  font-weight: 800;
  color: #00d4ff;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 2px;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  text-shadow: 0 0 10px rgba(0,212,255,.4);
}

[data-color-scheme="darktech"] .csd-subtitle {
  font-size: 11px;
  color: #4a5568;
  margin: 0;
  letter-spacing: .04em;
}

/* Chips de subcategorías */
[data-color-scheme="darktech"] .csd-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
[data-color-scheme="darktech"] .csd-chips::-webkit-scrollbar { display: none; }

[data-color-scheme="darktech"] .csd-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: #718096;
  border: 1px solid rgba(0,212,255,.2);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s, border-color .15s, background .15s;
}
[data-color-scheme="darktech"] .csd-chip:hover {
  color: #00d4ff;
  border-color: rgba(0,212,255,.5);
  background: rgba(0,212,255,.06);
  text-decoration: none;
}

/* Botón Ver todo */
[data-color-scheme="darktech"] .csd-view-all {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #00d4ff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: 5px 14px;
  border: 1px solid rgba(0,212,255,.3);
  border-radius: 2px;
  transition: background .15s, box-shadow .15s;
}
[data-color-scheme="darktech"] .csd-view-all:hover {
  background: rgba(0,212,255,.08);
  box-shadow: 0 0 8px rgba(0,212,255,.2);
  text-decoration: none;
}

/* Grid de productos: 4 en fila sin gap, separadores entre cards */
[data-color-scheme="darktech"] .csd-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
[data-color-scheme="darktech"] .csd-products .pc-card {
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid rgba(0,212,255,.1);
}
[data-color-scheme="darktech"] .csd-products .pc-card:last-child {
  border-right: none;
}

/* Responsive */
@media (max-width: 991px) {
  [data-color-scheme="darktech"] .csd-header { flex-wrap: wrap; gap: 10px; }
  [data-color-scheme="darktech"] .csd-products { grid-template-columns: repeat(2, 1fr); }
  [data-color-scheme="darktech"] .csd-products .pc-card { border-bottom: 1px solid rgba(0,212,255,.1); }
  [data-color-scheme="darktech"] .csd-products .pc-card:nth-child(2n) { border-right: none; }
  [data-color-scheme="darktech"] .csd-products .pc-card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 575px) {
  [data-color-scheme="darktech"] .csd-header { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  [data-color-scheme="darktech"] .csd-products { grid-template-columns: repeat(2, 1fr); }
}