/* Interacción — Boticasur, 5-sep-2026.
   Todo lo pulsable responde al ratón (Juan: "que se resalte… más intuitivo, que incite al cliente a
   interactuar"). Verde de marca al pasar por encima, tarjetas que se levantan, botones que responden
   y foco visible con teclado. Se enlaza desde head.tpl con ?v= para saltarse la caché. */
:root { --bs-verde: #5fb892; --bs-oscuro: #333d47; }

/* Enlaces de texto: migas, lateral, pie, marca y título de producto, cabecera */
a { transition: color .15s ease; }
.breadcrumb a:hover, .breadcrumb-item a:hover, .footer-container a:hover, .all-product-link:hover,
.product-manufacturer a:hover, .product-title a:hover, .brand-infos a:hover,
#header .header-top a:hover, #header .header-nav a:hover, #header .top-bar a:hover { color: var(--bs-verde) !important; }
.breadcrumb-item a { position: relative; }
.breadcrumb-item a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--bs-verde); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.breadcrumb-item a:hover::after { transform: scaleX(1); }
.all-product-link:hover { text-decoration: none; padding-left: 4px; }
.all-product-link { transition: color .15s ease, padding-left .15s ease; }

/* Menú lateral de categorías: se colorea y se desplaza un poco */
#left-column .category-sub-menu a, #left-column .category-top-menu > li > a { transition: color .15s ease, padding-left .15s ease; display: inline-block; }
#left-column .category-sub-menu a:hover, #left-column .category-top-menu > li > a:hover { color: var(--bs-verde) !important; padding-left: 6px; }
#left-column .arrows .material-icons { transition: color .15s ease, transform .15s ease; }
#left-column .arrows:hover .material-icons { color: var(--bs-verde); transform: scale(1.2); }

/* Tarjetas de producto: se levantan y el título se colorea */
.product-miniature .thumbnail-container { transition: transform .18s ease, box-shadow .18s ease; }
.product-miniature:hover .thumbnail-container { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,30,40,.14) !important; }
.product-miniature .product-title a { transition: color .15s ease; }
.product-miniature:hover .product-title a { color: var(--bs-verde); }

/* Botones: el principal pasa a verde y se levanta; los de contorno se tiñen */
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover, .btn-primary:focus-visible { background-color: var(--bs-verde) !important; border-color: var(--bs-verde) !important; color: #fff !important;
  transform: translateY(-1px); box-shadow: 0 8px 20px rgba(95,184,146,.35); }
.btn-outline-secondary:hover, .btn-secondary:hover { border-color: var(--bs-verde) !important; color: var(--bs-verde) !important; background: rgba(95,184,146,.08) !important; }
.btn:active { transform: translateY(0) scale(.98); }
.strip-nav:hover { color: var(--bs-verde); }

/* Pestañas de la ficha, "+ información", ordenar por */
.nav-tabs .nav-link { transition: color .15s ease, border-color .15s ease; }
.nav-tabs .nav-link:hover { color: var(--bs-verde) !important; border-bottom-color: var(--bs-verde) !important; }
.product-information-link:hover { color: var(--bs-verde) !important; }
.form-control, select { transition: border-color .15s ease, box-shadow .15s ease; }
.form-control:hover, select:hover { border-color: var(--bs-verde); }

/* Bolitas de categorías, marcas destacadas y tarjetas de marca */
.category-circle-icon, .featured-brand-item, li.brand { transition: transform .18s ease, box-shadow .18s ease; }
.category-circle:hover .category-circle-icon { transform: scale(1.06); box-shadow: 0 12px 28px rgba(20,30,40,.18) !important; }
.category-circle-name { transition: color .15s ease; }
.category-circle:hover .category-circle-name { color: var(--bs-verde) !important; }
.featured-brand-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20,30,40,.12); }
li.brand:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,30,40,.12) !important; }

/* Iconos de la cabecera (cuenta, carrito, lupa) */
.header-actions a img, .header-actions button img { transition: transform .15s ease; }
.header-actions a:hover img, .header-actions button:hover img { transform: scale(1.12); }

/* Todo lo pulsable con manita y foco visible por teclado */
a, button, [role=button], .category-circle, .featured-brand-item, label[for], select { cursor: pointer; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--bs-verde) !important; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .product-miniature:hover .thumbnail-container, .category-circle:hover .category-circle-icon, .featured-brand-item:hover,
  li.brand:hover, .btn-primary:hover, .btn:active { transform: none; }
}