@import url('https://googleapis.com');

/*
Theme Name: Blocksy Child
Template: blocksy
*/

/* ==========================================================================
   1. CONFIGURACIÓN BASE Y FONDO NEGRO PREMIUM (PHYRO ESTILO)
   ========================================================================== */
html, body, .site, #page, #main, .site-main, .shop-entries, article, #wrapper, .ct-container,
.hero-section, .page-title, .page-header, .ct-page-header, [data-header-layout], 
.woocommerce-info, .woocommerce-no-products-found, .woocommerce-product-gallery, 
.entry-summary, .woocommerce-message, .woocommerce-error, #main-container,
footer, .site-footer, [data-id="footer"], .ct-footer {
    background-color: #0b0b0b !important;
    background: #0b0b0b !important;
    border: none !important;
    box-shadow: none !important;
}

/* Elimina muescas de fondo y parches de color en los laterales de Blocksy */
#wrapper, .main-container, .site-container, #main, main {
    background-color: #0b0b0b !important;
}

/* ==========================================================================
   2. TIPOGRAFÍA BLANCA PURA OBLIGATORIA
   ========================================================================== */
body {
    font-family: 'Rajdhani', Arial, sans-serif;
    letter-spacing: 0.3px;
}

/* Fuerza el color blanco en absolutamente todas las etiquetas de texto e interfaz */
h1, h2, h3, h4, h5, h6, p, a, span, li, div, label, input, select, textarea,
.ct-menu-link, .header-menu a, nav a, h1.page-title, .entry-title,
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce ul.products li.product .price, .stock, .woocommerce-breadcrumb {
    color: #ffffff !important;
}

/* ==========================================================================
   3. BOTONES DE WOOCOMMERCE
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: transparent !important;
    color: #ffffff !important; 
    border: 1px solid #3a3a3a !important;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 12px;
    padding: 16px 24px;
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* HOVER DE BOTONES */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
    background: #ffffff !important;
    color: #0b0b0b !important; 
    border-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255,255,255,0.15);
}

/* EFECTO BRILLO INTERNO AL PASAR EL RATÓN */
.woocommerce a.button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.6s;
}

.woocommerce a.button:hover::before {
    left: 100%;
}

.single_add_to_cart_button {
    width: 100%;
    margin-top: 15px;
}

/* ==========================================================================
   4. PRECIOS Y CONTADOR DE STOCK
   ========================================================================== */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
}

.woocommerce div.product p.price::before {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #ffffff;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product .price {
    font-size: 18px;
    font-weight: 600;
}

.stock {
    font-size: 13px;
}

.stock.low-stock {
    letter-spacing: 0.5px;
}

.stock.low-stock::after {
    content: " — LOW STOCK";
    font-size: 11px;
    opacity: 0.7;
}

/* ==========================================================================
   5. TARJETAS DE PRODUCTO (GRID DEL CATÁLOGO)
   ========================================================================== */
.woocommerce ul.products {
    gap: 30px;
}

.woocommerce ul.products li.product {
    background: transparent !important;
    border: none;
    transition: all 0.35s ease;
    position: relative;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
}

.woocommerce ul.products li.product img {
    border-radius: 0;
    transition: all 0.5s ease;
    filter: contrast(1.05) brightness(0.98);
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.04);
}

.woocommerce ul.products li.product h2 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.woocommerce ul.products li.product::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.woocommerce ul.products li.product:hover::after {
    width: 100%;
}

.woocommerce ul.products li.product .star-rating {
    display: none;
}

/* ==========================================================================
   6. INTERFAZ INTERACTIVA: ANIMACIÓN 3D GIRO DE PRENDA (CARD FLIP)
   ========================================================================== */
.phyro-flip-container {
    perspective: 1000px;
    width: 100%;
    max-width: 450px;
    margin-bottom: 20px;
    display: inline-block;
}

.phyro-card-inner {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.phyro-card-inner.is-flipped {
    transform: rotateY(180deg);
}

.phyro-face-front, .phyro-face-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #222222;
}

.phyro-face-back {
    transform: rotateY(180deg);
}

.phyro-face-front img, .phyro-face-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phyro-flip-btn {
    background: #ffffff !important;
    color: #0b0b0b !important;
    border: none !important;
    padding: 12px 24px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    margin-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
    font-family: 'Rajdhani', sans-serif;
}

.phyro-flip-btn:hover {
    background: #cccccc !important;
}

/* ==========================================================================
   7. SOLUCIÓN FINAL CABECERA PHYRO (ANCHOS TOTALES Y MÁRGENES BLOCKSY)
   ========================================================================== */
header[data-id="header"], 
.ct-header, 
.ct-header-main, 
.ct-header-row,
.ct-header-inner,
.site-header,
[data-row="main"] {
    background-color: #0b0b0b !important;
    background: #0b0b0b !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Estira los contenedores internos de Blocksy que bloquean el ancho de la barra */
.ct-header-inner .ct-container,
.ct-header-inner .ct-container-fluid,
header .ct-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Elimina el desborde y limpia los bordes del tema */
body, html {
    overflow-x: hidden !important;
}