@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* ====== MENÚ INLINE (barra) ====== */
.vm-inline{display:flex;justify-content:center;align-items:center;width:100%}
.vm-inline-root{display:flex;justify-content:space-evenly;align-items:center;flex-wrap:nowrap;width:100%;padding:0;margin:0;list-style:none;font-family:'Montserrat',sans-serif}
.vm-inline-item{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;text-align:center}
.vm-inline-item a{font-size:17px;font-weight:400 !important;color:#111;text-decoration:none;white-space:nowrap;transition:color .3s ease}
.vm-inline-item a:hover{color:#6c772e}
.vm-inline-item .vm-icon{width:20px;height:20px;border-radius:6px;background-size:contain;background-repeat:no-repeat;background-position:center;display:inline-flex;align-items:center;justify-content:center}
.vm-inline-item .vm-icon:before{font-size:18px;line-height:1}
.vm-icon--empty{display:none !important}

/* ====== OVERLAY LATERAL ====== */
.vm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:all .25s ease;z-index:9999}
.vm-overlay.is-open{opacity:1;visibility:visible}

/* Drawer sin fondo blanco extra (solo el bloque) */
.vm-drawer{position:absolute;left:0;top:0;height:100%;background:transparent;transform:translateX(-10px);opacity:0;transition:all .25s ease}
.vm-overlay.is-open .vm-drawer{transform:translateX(0);opacity:1}

.vm-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border-radius:10px;border:none;background:#40501a;color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;z-index:5;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.25)}

/* Estructura de columnas */
.vm-mega{display:grid;grid-template-columns: 420px 420px 520px;background:#fff;height:100%;box-shadow:10px 0 40px rgba(0,0,0,.25);font-family:'Montserrat',sans-serif}
.vm-panel{padding:22px 26px}
.vm-mid{background:#fff;border-right:0;overflow:auto}
.vm-right{background:#fff;border-right:1px solid #e5e7eb;overflow:auto}
.vm-third{background:#40501a;color:#fff;overflow:auto}

/* Estados: 1, 2 o 3 columnas según interacción */
.vm-mega.is-single {grid-template-columns: 420px;}
.vm-mega.is-single .vm-right,
.vm-mega.is-single .vm-third {display:none;}
.vm-mega.is-double {grid-template-columns: 420px 420px;}
.vm-mega.is-double .vm-right {display:block;}
.vm-mega.is-double .vm-third {display:none;}
.vm-mega.is-triple {grid-template-columns: 420px 420px 520px;}
.vm-mega.is-triple .vm-right,
.vm-mega.is-triple .vm-third {display:block;}
/* Línea divisoria sutil entre columna 1 y 2 */
.vm-mid {
    border-right: 1px solid #f0f0f0;
}

/* Para la columna 2 verde, una línea más sutil */
.vm-right {
    border-right: 1px solid rgba(255,255,255,0.05);
}
/* Breadcrumb y lista de subcategorías */
.vm-bc{font-weight:700;margin:2px 0 12px;color:#374151}
.vm-bc-sep{opacity:.5}
.vm-sub{list-style:none;margin:0;padding:0}
.vm-sub li{padding:10px 8px;border-radius:10px;cursor:pointer;transition:background .12s;display:flex;align-items:center;gap:10px}
.vm-sub li:hover{background:#f3f4f6}
.vm-thumb-sm{width:36px;height:36px;border-radius:8px;background:#eef1e6 center/cover no-repeat;flex:0 0 36px}
.vm-label{font-size:18px;font-weight:600;color:#111;flex:1}
/* Flechita más notoria en subcategorías */
.vm-chevron {
  font-weight: 700;
  color: #40501a; /* verde corporativo de Vmateriaux */
  opacity: 0.9;
  font-size: 20px;
  margin-left: auto;
  transition: transform 0.2s ease, color 0.2s ease;
}
.vm-sub li:hover .vm-chevron {
  transform: translateX(4px);
  color: #708d2e; /* tono más claro al pasar el mouse */
}

/* Panel tercero verde con grilla */
.vm-feature{display:flex;flex-direction:column;gap:12px;height:100%}
.vm-feature-title{font-weight:800;font-size:18px;color:#fff}
.vm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.vm-card{background:rgba(255,255,255,.08);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:transform .15s;cursor:pointer}
.vm-card:hover{transform:translateY(-2px)}
.vm-thumb{width:100%;height:120px;border-radius:10px;background:#2e3912 center/cover no-repeat}
.vm-title{color:#fff;font-size:14px;line-height:1.25}