/* ============================================================
   Sidebar de categorías — copiado y adaptado de tes-cronostec
   (assets/css/theme.css: .cat-page-sidebar, .cat-tab, .cat-page-sublink),
   con la paleta Cronostec Chile (azul/rojo, sin amarillo/verde de Brasil).
   ============================================================ */
.cat-page-layout{ display:grid; gap:2rem; }
@media (min-width:1024px){ .cat-page-layout{ grid-template-columns:240px 1fr; } }

.cat-sidebar{ background:#fff; border-radius:.85rem; border:1px solid var(--border); box-shadow:0 4px 14px -4px rgba(20,32,70,.13); padding:.5rem; align-self:start; }

.cat-tab:first-child{ border-radius:.5rem .5rem 0 0; }
.cat-tab:last-child{ border-radius:0 0 .5rem .5rem; }
.cat-tab{
  display:flex; align-items:center; gap:.8rem; padding:.92rem 1.1rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color: var(--brand-ink); border-bottom:1px solid rgba(20,32,70,.07);
  cursor:pointer; position:relative; overflow:hidden; z-index:1; text-decoration:none;
  transition:color 1s cubic-bezier(.2,.8,.2,1), box-shadow 1s cubic-bezier(.2,.8,.2,1), z-index 0s;
}
.cat-tab:last-child{ border-bottom:none; }
.cat-tab::before{ content:''; position:absolute; inset:0; background: var(--brand); transform:scaleX(0); transform-origin:left; transition:transform 1s cubic-bezier(.2,.8,.2,1); z-index:-1; }
.cat-tab:hover::before, .cat-tab.active::before{ transform:scaleX(1); }
.cat-tab:hover, .cat-tab.active{ color:#fff; font-weight:800; z-index:10; box-shadow:0 8px 20px rgba(0,0,0,.25),0 -8px 20px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12),0 -2px 6px rgba(0,0,0,.10); }
.cat-tab-icon, .cat-tab span{ position:relative; z-index:1; }
.cat-tab-icon{ width:26px; height:26px; flex-shrink:0; object-fit:contain; filter:brightness(0) saturate(100%) invert(10%) sepia(50%) saturate(3000%) hue-rotate(215deg); transition:filter .25s ease; }
.cat-tab:hover .cat-tab-icon, .cat-tab.active .cat-tab-icon{ filter:brightness(0) saturate(100%) invert(100%); }

.cat-sublink{ display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem .5rem 1.75rem; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--muted-foreground); border-radius:.5rem; text-decoration:none; transition:background .2s, color .2s; }
.cat-sublink-arrow{ color: var(--danger); font-weight:800; }
.cat-sublink:hover{ background: rgba(230,0,18,.08); color: var(--brand-ink); }
.cat-sublink.active{ color: var(--brand-ink); font-weight:800; }

@media (max-width:1023px){
  .cat-sidebar{ display:none; }
  .cat-page-layout{ grid-template-columns:1fr; }
}

/* ============================================================
   Navegación móvil de categoría — misma estructura y comportamiento
   que tes-cronostec (mob-sub-chips-wrap, mob-other-cats de
   archive-product.php), con la paleta y tipografía Cronostec Chile.
   Solo visible en categoría/subcategoría (no en /productos/).
   ============================================================ */
.mob-sub-chips-wrap{ display:none; background:#fff; border-bottom:1px solid var(--border); padding:0; }
@media (max-width:1023px){ .mob-sub-chips-wrap{ display:block; } }
.mob-sub-chips{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:12px 16px; }
.mob-sub-chip{
  display:flex; align-items:center; justify-content:center; gap:5px; padding:9px 14px; border-radius:999px;
  font-family: var(--font-display); font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  text-align:center; border:1.5px solid var(--brand); background:#fff; color: var(--brand);
  text-decoration:none; -webkit-tap-highlight-color:transparent; transition:all .18s;
}
.mob-sub-chip:active{ transform:scale(.96); }
.mob-sub-chip.active{ background: var(--brand); color:#fff; border-color: var(--brand); box-shadow:0 3px 12px rgba(0,64,168,.3); }

.mob-other-cats{ display:none; padding:24px 16px 16px; background:#f6f8fb; border-top:1px solid var(--border); }
@media (max-width:1023px){ .mob-other-cats{ display:block; } }
.mob-other-label{ font-family: var(--font-display); font-size:.6rem; font-weight:800; color: var(--brand-ink); letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.mob-other-label::after{ content:''; flex:1; height:1px; background: var(--brand-ink); opacity:.15; }
.mob-other-list{ display:flex; flex-direction:column; gap:6px; }
@media (max-width:1023px){ .mob-other-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } }
.mob-other-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border:1px solid var(--border);
  border-radius:.6rem; text-decoration:none; box-shadow:0 1px 4px rgba(20,32,70,.07);
  -webkit-tap-highlight-color:transparent; transition:transform .15s, background .18s;
}
@media (max-width:1023px){ .mob-other-item{ flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:14px 8px; gap:8px; } }
.mob-other-item:active{ transform:scale(.98); background:#f6f8fb; }
.mob-other-icon{ width:36px; height:36px; border-radius:9px; background: rgba(0,64,168,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width:1023px){ .mob-other-icon{ width:44px; height:44px; } }
.mob-other-icon img{ width:22px; height:22px; filter:brightness(0) saturate(100%) invert(10%) sepia(50%) saturate(3000%) hue-rotate(215deg); }
@media (max-width:1023px){ .mob-other-icon img{ width:26px; height:26px; } }
.mob-other-name{ flex:1; font-family: var(--font-display); font-size:.72rem; font-weight:800; color: var(--brand-ink); text-transform:uppercase; letter-spacing:.04em; line-height:1.2; }
@media (max-width:1023px){ .mob-other-name{ font-size:.6rem; flex:none; } }
.mob-other-arrow{ color: var(--brand); flex-shrink:0; }
@media (max-width:1023px){ .mob-other-arrow{ display:none; } }