/*
Theme Name: PeterMason Child Theme
Theme URI: http://petermason.themerex.net/
Description: PeterMason - excellent WordPress theme with many different blog and header layouts
Author: ThemeREX
Author URI: http://themerex.net/
Template: petermason
Version: 1.2.1
EV: 1.0.12
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
Text Domain: petermason
*/


/* Theme customization starts here
------------------------------------------------------------ */

header span {
	color:white !important;
}

/* === LOOKBOOK CATEGORY (MEJORADO) === */

.lookbook-grid {
  column-count: 3;
  column-gap: 1.5rem;
  max-width: 100%;
  margin: 60px auto;
  padding: 0 2rem;
}

.lookbook-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.5rem;
  break-inside: avoid; /* Evita cortes raros entre columnas */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lookbook-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.lookbook-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* Ajustes responsive */
@media (max-width: 1280px) {
  .lookbook-grid {
    column-count: 3;
  }
}
@media (max-width: 900px) {
  .lookbook-grid {
    column-count: 2;
    padding: 0 1rem;
  }
}
@media (max-width: 600px) {
  .lookbook-grid {
    column-count: 1;
    padding: 0 0.5rem;
  }
}

/* === HEADER CON VIDEO DE FONDO === */
.site-header-video {
  position: relative;
  width: 100%;
  height: 100vh; /* altura completa de pantalla */
  overflow: hidden;
  color: #fff;
  text-align: center;
}

.video-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35); /* capa oscura */
  z-index: 2;
}

.header-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 1rem;
}

.header-title {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.header-subtitle {
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.9;
}

/* Versión móvil: usa imagen si el video no carga */
@media (max-width: 768px) {
  .video-bg video {
    display: none;
  }
  .site-header-video {
    background: url('https://couture360atelier.com/wp-content/uploads/2025/10/home-poster.jpg') center/cover no-repeat;
  }
  .mejs-container {
	height:100% !important;
  }
}

a[href="aviso-legal"]::before {
  content: "\A\A";
  white-space: pre;
}

/*** OCULTAR FILTROS WOOCOMERCE **/
.woocommerce .sidebar,
#secondary,
.widget-area {
    display: none !important;
}

.woocommerce .content-area {
    width: 100% !important;
}

/* Hacer que el contenido ocupe todo el ancho */
.content,
.content_wrap,
.page_content_wrap .content {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important; /* Centrar */
    float: none !important;
}

/* 4 productos por fila en tienda */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 23% !important;    /* 4 por fila (4×23% = 92%, deja espacio entre ellos) */
    margin-right: 2% !important;
}

/* Quitar el margen derecho del último producto de cada fila */
.woocommerce ul.products li.product:nth-child(4n),
.woocommerce-page ul.products li.product:nth-child(4n) {
    margin-right: 0 !important;
}

/* Repara el contenedor de Google Pay */
#wc-square-google-pay {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Mantener un espacio fijo para el botón sin que se corte */
#wc-square-google-pay .gpay-card-info-container-fill,
#wc-square-google-pay .gpay-button-fill {
    width: 100% !important;
    max-width: 350px !important;
    height: auto !important;
    min-height: 55px !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Evita que el iframe se recorte cuando Google lo redimensiona */
#wc-square-google-pay iframe {
    width: 100% !important;
    max-width: 350px !important;
    min-height: 55px !important;
    height: 55px !important;   /* clave para evitar el "corte" */
    overflow: visible !important;
    display: block !important;
    margin: 0 auto !important;
}

.trx_addons_scroll_to_top {
    display: none !important;
}






/* Botones con degradado elegante */
.products .product .button.add_to_cart_button,
.products .product a.button {
    background: linear-gradient(135deg, #c9a56a 0%, #b8954f 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 35px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border-radius: 50px !important;
    transition: all 0.4s ease !important;
    display: inline-block !important;
    text-align: center !important;
    box-shadow: 0 4px 15px rgba(201, 165, 106, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.products .product .button.add_to_cart_button::before,
.products .product a.button::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.2) !important;
    transition: left 0.4s ease !important;
}

.products .product .button.add_to_cart_button:hover::before,
.products .product a.button:hover::before {
    left: 100% !important;
}

.products .product .button.add_to_cart_button:hover,
.products .product a.button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(201, 165, 106, 0.4) !important;
}



/* Vista en lista */
.products.list-view {
    display: block !important;
}

.products.list-view li.product {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    margin-bottom: 30px;
    clear: both;
}

.products.list-view li.product img {
    width: 250px !important;
    max-width: 250px !important;
    margin-right: 30px;
    flex-shrink: 0;
}

.products.list-view li.product .woocommerce-loop-product__title {
    text-align: left;
}

/* Vista en cuadrícula (por defecto) */
.products.grid-view li.product {
    display: inline-block;
}




/* Fondo negro para toda la página cuando hay video en header */
body.with_bg_video,
body .with_bg_video {
    background-color: #000000 !important;
}

/* Fondo negro específico para el header con video */
.top_panel_custom.with_bg_video {
    background-color: #000000 !important;
    position: relative;
}

/* El video debe cubrir todo */
.top_panel_custom.with_bg_video video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}