/*
   o35-tema.css — O35 (8-oct-2026). Cambios de presentación del tema sugoi.
   Archivo NUEVO: en producción el CDN de Hostinger cachea por nombre, así que
   las reglas nuevas van aquí y el enqueue apunta a este nombre.
   Solo presentación: no toca pagos, envíos, plugins, precios ni pedidos.
   ========================================================= */

/* ---------------------------------------------------------
   1. Botón naranja «subir» (back-to-top) tapado por el flotante
   de WhatsApp. Ambos están abajo a la derecha (bottom:20px,
   right:20px). Se sube «subir» por encima del de WhatsApp, a la
   derecha, con 14 px de separación (56 + 20 + 14 = 90).
   z-index por encima del flotante (9999).
   --------------------------------------------------------- */
body .back-to-top {
  bottom: 90px !important;
  right: 20px !important;
  z-index: 10000 !important;
}
@media (max-width: 640px) {
  body .back-to-top {
    bottom: 90px !important;
    right: 20px !important;
  }
}

/* ---------------------------------------------------------
   2. Pie de página.
   --------------------------------------------------------- */

/* 2a. En el logo スゴイ, la イ pasa de roja a naranja (el naranja de
   la marca Sugoi: --sg-accent-2, #ea4a12). */
body.o27 .kana-pie i {
  color: var(--sg-accent-2, #ea4a12) !important;
}

/* 2b. Tienda, Nosotros y Políticas en una sola fila, columnas más
   juntas, para que el pie sea más bajo. En escritorio el pie pasa a
   4 columnas (marca + 3 secciones). En celular queda apilado. */
@media (min-width: 901px) {
  body.o27 .aa-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 20px;
    padding: 40px 0 30px;
  }
}

/* ---------------------------------------------------------
   4. Galería de la ficha: la imagen grande y las miniaturas
   mantienen proporción y no dejan el carrusel en blanco.
   La imagen de la variación (paquete) se muestra en la diapositiva
   activa; el ancho lo fija flexslider. Se refuerza el alto del
   viewport para que no colapse mientras se recalcula el ancho. */
body.o27 .woocommerce-product-gallery .flex-viewport {
  min-height: 1px;
}
body.o27 .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   5. Banner de la tienda (/shop/): la imagen se sirve ya a
   1000 px de ancho (generada por O35), sin versión de 1440
   descargable. Se muestra a lo ancho de la banda. */
body.o27 .o27-banda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}