/* NavOptica Variation Gallery v1.6 */

/* ═══════════════════════════════════════════════════
   PÁGINA PRODUCTO — Caja de miniaturas NVG
   Está DENTRO de .woocommerce-product-gallery
   para que el zoom del tema funcione sobre ellas
═══════════════════════════════════════════════════ */
#nvg-tbox {
    width: 100%;
    padding: 10px 0 0;
    clear: both;
    background: #fff;
}
.nvg-grid {
    display: grid;
    gap: 8px;
    /* grid-template-columns definido inline */
}
.nvg-t {
    border: 2px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: #f8f8f8;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, box-shadow .2s;
}
.nvg-t img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
    pointer-events: none;
}
.nvg-t:hover  { border-color: #1a2c56; box-shadow: 0 2px 8px rgba(26,44,86,.2); }
.nvg-t.active { border-color: #1a2c56; box-shadow: 0 0 0 1px #1a2c56; }

/* ═══════════════════════════════════════════════════
   PÁGINA PRODUCTO — Bolitas de variación
   Reemplazan el <select> de color de la montura
═══════════════════════════════════════════════════ */
.nvg-var-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}
.nvg-var-dot {
    display: inline-block;
    width: var(--nvg-swatch-size, 42px);
    height: var(--nvg-swatch-size, 42px);
    border-radius: 50%;
    border: 2px solid #ccc;
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.nvg-var-dot:hover  { border-color: #1a2c56; transform: scale(1.1); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.nvg-var-dot.active { border-color: #1a2c56; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a2c56; }
.nvg-var-dot.active::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; font-weight: 700;
    text-shadow: 0 1px 5px rgba(0,0,0,.7);
    background: rgba(0,0,0,.1);
}
.nvg-var-dot::before {
    content: attr(title);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color: #fff;
    font-size: 10px; white-space: nowrap; padding: 3px 8px; border-radius: 3px;
    pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 10;
}
.nvg-var-dot:hover::before { opacity: 1; }

/* Variantes de forma */
.nvg-swatch-rounded .nvg-var-dot,
.nvg-swatch-style-rounded .nvg-var-dot { border-radius: 6px; }
.nvg-swatch-square .nvg-var-dot,
.nvg-swatch-style-square .nvg-var-dot  { border-radius: 2px; }

/* ═══════════════════════════════════════════════════
   LOOP / TIENDA / CATEGORÍAS — Bolitas de color
═══════════════════════════════════════════════════ */
.nvg-archive-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    align-items: center;
    margin: 6px 0 8px;
    min-height: 34px;
}
.nvg-swatch-dot {
    display: inline-block;
    width: var(--nvg-swatch-size, 36px);
    height: var(--nvg-swatch-size, 36px);
    border-radius: 50%;
    border: 2px solid #ccc;
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .2s, transform .15s, box-shadow .2s;
}
.nvg-swatch-rounded .nvg-swatch-dot,
.nvg-swatch-style-rounded .nvg-swatch-dot { border-radius: 6px; }
.nvg-swatch-square .nvg-swatch-dot,
.nvg-swatch-style-square .nvg-swatch-dot  { border-radius: 2px; }

.nvg-swatch-dot:hover  { border-color: #1a2c56; transform: scale(1.18); box-shadow: 0 2px 10px rgba(0,0,0,.25); z-index: 2; }
.nvg-swatch-dot.active { border-color: #1a2c56; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a2c56; }
.nvg-swatch-dot.active::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700;
    text-shadow: 0 1px 5px rgba(0,0,0,.6); background: rgba(0,0,0,.12);
}
.nvg-swatch-dot[data-label]::before {
    content: attr(data-label);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,.8); color: #fff;
    font-size: 10px; white-space: nowrap; padding: 3px 8px; border-radius: 3px;
    pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 10;
}
.nvg-swatch-dot:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════════════
   HOVER imagen en loop
═══════════════════════════════════════════════════ */
.nvg-hi {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; padding: 4px;
    background: #fff;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 1; pointer-events: none;
}
/* Fade (default) */
.woocommerce-LoopProduct-link:hover .nvg-hi,
.woocommerce-loop-product__link:hover .nvg-hi { opacity: 1; }
/* Slide */
.nvg-hover-slide .nvg-hi { transform: translateX(102%); opacity:1; transition: transform .35s ease; }
.nvg-hover-slide .woocommerce-LoopProduct-link:hover .nvg-hi,
.nvg-hover-slide .woocommerce-loop-product__link:hover .nvg-hi { transform: translateX(0); }
/* None */
.nvg-hover-none .nvg-hi { display: none !important; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .nvg-grid { grid-template-columns: repeat(3,1fr) !important; }
    .nvg-swatch-dot, .nvg-var-dot { width: 28px; height: 28px; }
}

/* ── Selector tipo TEXTO ── */
.nvg-text-swatches { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.nvg-text-btn {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; padding:5px 10px;
    border:2px solid #ccc; border-radius:4px;
    font-size:13px; font-weight:600; color:#333; background:#fff;
    cursor:pointer; transition:border-color .15s, background .15s, color .15s;
    user-select:none; white-space:nowrap;
}
.nvg-text-btn:hover  { border-color:#1a2c56; color:#1a2c56; background:#f0f4ff; }
.nvg-text-btn.active { border-color:#1a2c56; background:#1a2c56; color:#fff; }