/* Sofa Gamer Mode - CSS base estructural */

/* La clase gamer-section puede vivir en <html> (toggle manual, anti-flash) o
   en <body> (detección de URL server-side). Los selectores usan el prefijo
   `.gamer-section` para funcionar en ambos casos. */
.gamer-section {
    transition: background-color 0.2s;
}

/* Imagen de producto */
.gamer-section .woocommerce-product-gallery {
    border-radius: 8px;
    overflow: hidden;
}

/* Cards de producto */
.gamer-section .product-small,
.gamer-section li.product {
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.gamer-section .product-small:hover,
.gamer-section li.product:hover {
    transform: translateY(-2px);
}

/* Botón comprar */
.gamer-section .single_add_to_cart_button,
.gamer-section button.alt {
    transition: background-color 0.2s !important;
    cursor: pointer !important;
}

/* Botón flotante - estructura base */
#sofa-gamer-float-btn {
    position: fixed;
    z-index: 9999;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
}

#sofa-gamer-float-btn:hover {
    transform: scale(1.05);
}

/* Posiciones del botón flotante */
#sofa-gamer-float-btn.pos-bottom-right {
    bottom: 90px;
    right: 20px;
}

#sofa-gamer-float-btn.pos-bottom-left {
    bottom: 90px;
    left: 20px;
}

#sofa-gamer-float-btn.pos-top-right {
    top: 90px;
    right: 20px;
}

#sofa-gamer-float-btn.pos-top-left {
    top: 90px;
    left: 20px;
}