/** Shopify CDN: Minification failed

Line 820:0 Unexpected "}"

**/
/* CÓDIGO CUSTOM MARTA*/

.globo-form-id-134518 .globo-form-app{background-color: transparent !important; border: solid thin white; border-radius:10px; padding: 40px 80px }
.globo-form-control .globo-form-input a {
    color: #307fe2 !important;
}
.globo-form-app .message.success {
    background: transparent !important;
    color: #9de866!important;
    border: solid #9de866;
    border-radius: 10px;
    padding: 20px;
}

.globo-form-control .gfb__dropzone--preview--item-filename {

    color: white !important;
}

.globo-form-app .message.success .gfb__content-title {
    text-transform: uppercase;
    font-family: "Font-1700745849483" !important;
}

.globo-form-app *:not(hr) {
    fill: #9de866;
}


.globo-form-id-134518 .globo-form-app .footer button, .globo-form-id-134518 .globo-form-app .gfb__footer button {
    background: white;
    color: #222;
    font-family: "Font-1700745849483" !important;
    border: none !important;
    border-radius: 10px;
    padding: 15px 60px;
}

.globo-form-id-134518 .globo-form-app .footer button, .globo-form-id-134518 .globo-form-app .gfb__footer button:hover {
    background: #307fe2;
    color: #fff;
   
}


.gx-custom-blog h4, .h4 {
    font-size: calc(1.5 * var(--font-scale) + var(--base-text-size));
}



@media (max-width: 767px) {.template-suffix-el-club .gallery--with-margins {
    margin: 0px;
}


.template-suffix-el-club .gallery--with-margins .gallery__item {

    margin-left: 0px;
}

}

.template-suffix-el-club .strongly-spaced-row, .fully-spaced-row--medium {
    margin-top: 0px;
    margin-bottom: 0px;
}

.template-suffix-el-club  .section-gallery {

    padding-top: 0px;
    padding-bottom: 0px;
}

.template-suffix-el-club  .section-gallery img {
border-radius: 10px
}
.template-suffix-el-club  h2 {
    font-size: 2.8rem !important; padding-bottom: 30px}

/* =============================================================
   GALERÍA FULL-WIDTH SOLO MÓVIL - PÁGINA EL CLUB
   ============================================================= */

@media (max-width: 767.98px) {
  /* 1. Forzamos al contenedor de la página a ignorar márgenes */
  .template-suffix-el-club .container--not-mobile {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* 2. Eliminamos los huecos entre las fotos de la galería */
  .template-suffix-el-club .gallery--with-margins {
    gap: 0 !important;
    margin: 0 !important;
  }

  /* 3. Ajustamos los items para que ocupen todo el ancho */
  .template-suffix-el-club .gallery__item {
    margin: 0 !important;
    width: 100% !important; /* Si quieres que se vea una sola foto por línea */
  }

  /* 4. Quitamos bordes redondeados (si los hubiera) para el look full-bleed */
  .template-suffix-el-club .gallery__image img {
    width: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
  }
  
  /* 5. Eliminamos posibles padding internos del tema Symmetry */
  .template-suffix-el-club .gallery {
    padding: 0 !important;
  }
}



/* =============================================================
   EFECTO "AGOTADO / SOLD OUT" 
   ============================================================= */

/* 1. Apagamos solo la imagen PRIMARIA (la que se ve primero) */
product-block:has(.price-label--sold-out) .product-block__image--primary {
    opacity: 0.3 !important;
    filter: grayscale(100%) !important;
}

/* 2. NUEVO: Ocultamos totalmente las imágenes secundarias (hover) para que no se mezclen */
product-block:has(.price-label--sold-out) .product-block__image--secondary {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Asegura que no reaccione al ratón */
}



/* 5. Ocultamos la etiqueta original que sale pequeña bajo el precio */
.price-label--sold-out {
    display: none !important;
}

/* 6. Ajuste para móvil */
@media (max-width: 767px) {
    product-block:has(.price-label--sold-out) .image-label-wrap::after {
        top: 10px;
        left: 10px;
        font-size: 10px;
        padding: 4px 10px;
    }
}



/* =============================================================
   REPARACIÓN HOTSPOTS MÓVIL GIANTX - ELIMINACIÓN DE HUECO
   ============================================================= */

@media (max-width: 767.98px) {
.section-id-template--28470046359877__custom_hotspots_grid_P3x3F7 .text-overlay__inner{ display: none }


    /* 1. Eliminamos el empuje invisible del tema Symmetry */
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 .height--adapt::before {
        display: none !important;
        content: none !important;
    }

    /* 2. Reseteamos el contenedor de altura */
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 .height--adapt {
        height: auto !important;
        padding-top: 0 !important;
        min-height: 0 !important;
        display: block !important;
    }

    /* 3. La imagen vertical define el tamaño real del bloque */
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 .image-overlay__image,
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 picture,
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 img.theme-img {
        position: relative !important; /* Cambia a relativo para que ocupe espacio real */
        display: block !important;
        width: 100% !important;
        height: auto !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 4. Los puntos (+) ahora se pegan a la imagen real */
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 .hotspot-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Mismo alto que la foto vertical */
        z-index: 5 !important;
    }

    /* 5. Aseguramos que el video no se monte encima */
    .gx-grid-container-template--28470046359877__custom_hotspots_grid_P3x3F7 {
        display: flex !important;
        flex-direction: column !important;
    }
}




/* Efecto para miniaturas de productos históricos en colecciones */
.product-block.is-historico .product-block__image {
    opacity: 0.3 !important; /* El 20% que pedías */
    filter: grayscale(50%);  /* Opcional: lo hace blanco y negro para reforzar el efecto */
    transition: opacity 0.3s ease;
}

/* Si quieres que al pasar el ratón se ilumine un poco (opcional) */
.product-block.is-historico:hover .product-block__image {
    opacity: 0.5 !important;
}

/* Mantenemos la badge con opacidad total para que se lea bien */
.product-block.is-historico .badge-overlay-historico {
    opacity: 1 !important;
}



/* Badge flotante para Catálogo y Ficha de Producto */
.image-label-wrap, .main-image {
    position: relative; /* Clave para que la badge flote dentro */
}

.badge-overlay-historico {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 20; /* Subimos el z-index para ganar al zoom */
    background-color: #333333;
    color: #ffffff;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 2px;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Ajuste móvil para que no sea tan grande */
@media (max-width: 767px) {


    .badge-overlay-historico {
        top: 10px;
        left: 10px;
        font-size: 10px;
        padding: 4px 10px;
    }
}

/* Estado desactivado del botón de añadir al carrito */
.add-to-cart:disabled,
.add-to-cart[disabled] {
    background-color: #d2d2d2 !important; /* Gris claro apagado */
    border-color: #d2d2d2 !important;     /* Borde a juego */
    color: #8e8e8e !important;            /* Texto en gris oscuro para que se lea pero se vea 'off' */
    cursor: not-allowed !important;       /* Cambia el cursor a un círculo rojo de prohibido */
    opacity: 0.8;                         /* Un toque de transparencia para suavizarlo más */
    box-shadow: none !important;          /* Quitamos sombras si las tuviera */
    transform: none !important;           /* Evitamos que haga animaciones de clic */
}

.gpo-app {
    background: transparent !important;
    border: solid thin white;
    PADDING: 20px;
    border-radius:10px
}

.addOn {
    color: rgb(var(--link-color)) !IMPORTANT;

}
 
.choicelist-item__value .addOn{ display:none !important}

.gpo-choicelist input:checked+label, .gpo-choicelist input:checked+label span {
    color: white !IMPORTANT;
}

.gpo-choicelist input+label, .gpo-choicelist input+label span {
    color: #FFF !important;

}
.swatch-image {
    padding: 3px;
    background: black;

}

.gpo-swatches .gpo-swatch__inner {
    border: none !important;
}

.gpo-group {
    margin-bottom: 0px !important;
}

.gpo-label {

    margin-bottom: 15px !important;

}

.quantity-submit-row .label{ display:none }


.media-gallery__inner img{ border-radius: 10px }


.product-title {
    font-size: 25px;
    margin-bottom: 0px !important;
    text-transform: uppercase;}


#shopify-section-template--28470046359877__newsletter_DzjkJQ .container {
    border: solid thin white;
    border-radius: 10px;
    padding: 60px 0;
    max-width: 100%;
}
#shopify-section-template--28470046359877__newsletter_DzjkJQ{
    padding-right: var(--container-pad-x);
    padding-left: var(--container-pad-x);     margin: 40px 0;}
    


.shopify-policy__container h2,
.shopify-policy__container h3,
.shopify-policy__container h4,
.shopify-policy__container h5 {
  font-family: "Nombre-De-Tu-Fuente-Legal", sans-serif !important;
}

.shopify-policy__container h1{ text-transform: uppercase }

.shopify-policy__container {
    padding-bottom: 60px;
}



/* 1. Limpiamos el contenedor principal */
#section-id-template--28470046359877__1619015739944f86f6 .gallery {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px !important; /* Ajusta aquí el espacio que quieras entre las fotos */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Ajustamos los items para que se repartan el espacio */
#section-id-template--28470046359877__1619015739944f86f6 .gallery__item {
    flex: 1 1 0px !important; /* Hace que todas midan lo mismo */
    margin: 0 !important; /* Quitamos márgenes individuales que traiga el tema */
    min-width: 0 !important;
}

/* 3. Forzamos que la primera y la última no tengan aire por fuera */
#section-id-template--28470046359877__1619015739944f86f6 .gallery__item:first-child {
    margin-left: 0 !important;
}

#section-id-template--28470046359877__1619015739944f86f6 .gallery__item:last-child {
    margin-right: 0 !important;
}

/* Ajuste para móvil: si quieres que en móvil sigan una debajo de otra pero pegadas */
@media (max-width: 767px) {
    #section-id-template--28470046359877__1619015739944f86f6 .gallery {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

#section-id-template--28470046359877__scrolling_banner_TcVGDT {
    --vertical-padding: 10px;
    margin-right: var(--container-pad-x);
    margin-left: var(--container-pad-x);
    border-left: solid thin white;
    border-right: solid thin white;
    border-bottom: solid thin white;
}

.shopify-pc__banner__dialog {
    border-top-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
}

.logo-area__right__inner .icon {
    width: 20px;
    height: 20px;
}

#shopify-section-template--27667468845381__main  {
    margin-bottom: 12%;
}

.slideshow{ border-bottom: solid thin }

.template-blog .container {
    max-width: 100%;}

#section-id-template--27705779192133__slideshow_gtaNAh .slideshow__slide .image-overlay__image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#section-id-template--27705779192133__slideshow_gtaNAh .slideshow__slide img.theme-img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    /* Esto anula posibles desplazamientos de la animación del tema */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
}

#section-id-sections--27667469533509__announcement-bar {
    --bg-color: none !important;
}

.pageheader--layout-inline-menu-center .logo-area__middle {
    border-left: solid thin #f5f5f5;
    padding-left: 30px;
}

.pageheader--layout-inline-permitted .logo-area__left {
    min-height: calc(44px + 0.2em);
}

.logo-area__right {
    min-height: calc(54px + 0.2em);
    border-right: solid thin #f5f5f5;
    padding-right: 30px;
}

.announcement-bar__right {
    border-right: solid thin #f5f5f5; padding-right: 30px;
}

.navigation__tier-1 {
    display: flex;
    justify-content: flex-start;
    padding-left: 0;
    margin-left: 0;
}

.navigation .navigation__item.navigation__item--active > .navigation__link:before {
    display: none;
}

.navigation--left .navigation__tier-1-container .navigation__tier-1>.navigation__item>.navigation__link:before {
    display: none
}

#section-id-template--27667468976453__slideshow_yFaybj .height--adapt {
    border-left: solid thin #f5f5f5;
    border-right: solid thin #f5f5f5;
    border-bottom: solid thin #f5f5f5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#shopify-section-template--27667468976453__slideshow_yFaybj{
    padding-right: var(--container-pad-x);
    padding-left: var(--container-pad-x);}

.section-gallery{     padding-right: var(--container-pad-x);
    padding-left: var(--container-pad-x); padding-top: 30px; padding-bottom: 30px} 


#shopify-section-template--27667468976453__1619015739944f86f6 .gallery {
    display: flex;
    /* Ajusta los 20px según el espacio que desees */
    gap: 20px; 
}

#shopify-section-template--27667468976453__1619015739944f86f6 .gallery__item {
    /* Esto asegura que los 4 items se repartan el espacio equitativamente */
    flex: 1; 
    /* Reseteamos posibles márgenes que el tema traiga por defecto */
    margin: 0 !important; 
}


/* Ajuste opcional para móvil: si quieres que en móvil sigan pegados o tengan menos espacio */
@media (max-width: 767px) {
    #shopify-section-template--27667468976453__1619015739944f86f6 .gallery {
        flex-direction: column;
        gap: 10px;
    }
}

.gallery__item .gallery__image {
    border-radius: 10px;
}



/* --- AJUSTE DE ALTURA Y CENTRADO VERTICAL EN LOGO-AREA --- */

/* 1. Establecer el contenedor padre (.logo-area) para usar Flexbox y centrar todos los bloques hijos (left, middle, right) verticalmente. */
.logo-area {
    display: flex;
    align-items: center; 
    height: auto; 
}

/* 2. Asegurar que el bloque de la derecha (.logo-area__right) ocupe la altura completa disponible que tenga su padre (.logo-area), y centrar sus elementos internos (iconos, etc.). */
.logo-area__right {
    height: 100%; /* Ocupa la altura completa del .logo-area */
    display: flex; 
    align-items: center; /* CLAVE: Alinea los iconos/enlaces dentro de este bloque al centro vertical */
}

/* 3. Asegurar que el contenedor interior (si existe) también se estire y centre su contenido. */
.logo-area__right__inner {
    height: 100%; /* Ocupa la altura completa del .logo-area__right */
    display: flex;
    align-items: center; /* Alinea los iconos/enlaces dentro de este sub-bloque al centro vertical */
}

.logo-area{ border-top: solid thin #f5f5f5; border-bottom: solid thin #f5f5f5 }

.announcement__text p{ border:solid thin #f5f5f5 }


/* --- Fondo Granulado para la Tienda (GiantX) --- */

body {background-color:rgb(36, 36, 36); }

body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: -1; 
    
    /* Propiedad clave para el efecto de grano */
    background-image: 
        repeating-radial-gradient(
            circle at 0 0, 
            rgba(255, 255, 255, 0.05), /* Puntos blancos muy sutiles */
            rgba(255, 255, 255, 0.05) 1px, 
            transparent 1px, 
            transparent 2px
        );
    
    /* Ajustar el tamaño y la opacidad para que sea sutil */
    background-size: 6px 6px; /* Pequeño tamaño del patrón */
    opacity: 0.9; /* Controlar la intensidad del efecto */
}


/* .pageheader*/
.pageheader { position: relative;   z-index: 10; background-color:rgb(36, 36, 36); }


.pageheader::before {
    content: "";
    /* Posición ABSOLUTA para cubrir SÓLO el .pageheader */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: -1; 
    
    /* Propiedad clave para el efecto de grano */
    background-image: 
        repeating-radial-gradient(
            circle at 0 0, 
            rgba(255, 255, 255, 0.05), /* Puntos blancos muy sutiles */
            rgba(255, 255, 255, 0.05) 1px, 
            transparent 1px, 
            transparent 2px
        );
    
    /* Ajustes para el efecto sutil */
    background-size: 6px 6px; 
    opacity: 0.9; 
    
}

/* --- Fin fondo granulado --- */



/* --- CAMBIADOR IDIOMA MENU--- */

.localization-switcher {
    position: relative; 
    display: flex; 
    align-items: center;
    margin-left: 15px;
    z-index: 100;
}

.localization-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 7px;
    color: currentColor; 
}

.localization-switcher .icon-language {
    margin-right: 5px;
}

.localization-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    position: absolute; 
    top: 100%; 
    right: 0; 
    min-width: 120px;
    background-color: #1a1a1a; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease-out;
    border: solid thin #f5f5f5 !important;
    border-radius: 10px !important;
}

.localization-menu li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    color: white; 
}

.localization-menu li a:hover,
.localization-menu li a.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* CLAVE HOVER */
.localization-switcher:hover .localization-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}



/*ICONOS EN CAJAS*/

.logo-area__right__inner .localization-switcher {
    border: solid thin #f5f5f5;
    border-radius: 10px;
}

.logo-area__right__inner .header-account-link {
    margin-inline-end: 0px;
    border: solid thin #f5f5f5;
    border-radius: 10px;
    padding: 7px;
    margin: 0 10px;
}

.logo-area__right__inner .header-account-link__icon {
    margin-inline-start: 0px !important;
}

.logo-area__right__inner .show-search-link {
    margin-inline-end: 0px !important;
    border: solid thin #f5f5f5;
    border-radius: 10px;
    padding: 7px;
}

.logo-area__right__inner .cart-link {
    border: solid thin #f5f5f5;
    border-radius: 10px;
    padding: 7px;
    margin-left: 10px;
}

/*ICONOS EN CAJAS FIN*/


/* ==========================================================================
   BLOG CON SIDEBAR
   ========================================================================== */

/* ==========================================================================
   DESBLOQUEO DE STICKY (Vital para Symmetry y Temas Shopify)
   ========================================================================== */
/* Esto elimina cualquier restricción de scroll en los padres */
#MainContent, 
.shopify-section, 
.page-section-spacing {
    overflow: visible !important;
}

/* ==========================================================================
   PLANTILLA GIANTX-BLOG INDIVIDUAL
   ========================================================================== */

/* Contenedor principal a 1400px con paddings nativos */
.article-giantx-container {
    padding-left: var(--container-pad-x);
    padding-right: var(--container-pad-x);
    width: 100%;
    max-width: 1400px; /* Definido a 1400px como pediste */
    box-sizing: border-box;
    margin: 0 auto;
    overflow: visible !important;
}

/* Breadcrumbs con estilo */
.article-giantx-container .breadcrumb {
    margin: 40px 0 30px 0;
    font-size: 13px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.article-giantx-container .breadcrumb a { text-decoration: none; color: rgb(var(--link-color));  }
.article-giantx-container .breadcrumb span { margin: 0 10px; }
.breadcrumb-current { font-weight: bold; opacity: 1; }

/* Grid Proporción 60% / 40% corregido */
.giantx-article-grid {
    display: flex; /* Cambiamos a flex para mayor compatibilidad con sticky */
    gap: 60px;
    align-items: flex-start; 
    margin-bottom: 80px;
    width: 100%;
}

/* Columna Noticia (60%) */
.giantx-article-main-column {
    flex: 0 0 60%;
    width: 60%;
}

.article-image-custom {
    width: 100%;
    margin-bottom: 30px;
}

.theme-img-custom {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Estilo de Meta y Tags */
.article-meta-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.date { font-size: 14px; opacity: 0.6; margin-right: 20px; }
.tag-pill {
    background: #fff;
    color: #000;
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 8px;
}

/* Título */
.majortitle {
    font-size: 2.8rem !important;
    line-height: 1.1;
    margin: 0 0 30px 0;
    font-family: "Font-1700745849483" !important;
}
}

/* Sidebar Sticky (40%) */
.giantx-article-sidebar {
    flex: 0 0 calc(40% - 60px);
    width: calc(40% - 60px);
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 40px; /* Ajusta este valor si tienes un header fijo */
    padding-left: 30px;
    border-left: 1px solid rgba(255,255,255,0.1);
    height: auto;
    z-index: 2;
}

.sidebar-title {
    font-size: 1.4rem;
    margin-bottom: 30px;
    text-transform: uppercase;
    
}

/* Noticias Relacionadas en Sidebar */
.sidebar-item {
    display: flex; /* Cambiado a flex para mejor alineación sin excerpt */
    flex-direction: column;
    gap: 10px;
    margin-bottom: 35px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
}
.sidebar-item:hover { opacity: 0.7; }

.sidebar-img-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    line-height: 0;
}

.sidebar-img-wrapper img {
    width: 100%;
    aspect-ratio: 3 / 2 !important; 
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.sidebar-card-title{ padding-top: 10px }
.sidebar-card-date{ margin-bottom: 30px }

.sidebar-info h4 { font-size: 16px; margin: 25px 0 2px 0; line-height: 1.3; font-weight: 600; }
.sidebar-date { font-size: 12px; opacity: 0.5; text-transform: uppercase; }

/* Responsive móvil */
@media screen and (max-width: 1024px) {
    .giantx-article-grid {
        flex-direction: column;
        gap: 50px;
    }
    .giantx-article-main-column, 
    .giantx-article-sidebar {
        flex: 0 0 100%;
        width: 100%;
    }
    .giantx-article-sidebar {
        position: relative !important;
        top: 0 !important;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 40px;
    }
    .majortitle { font-size: 2rem !important; }
}¨





/*///////////////OFERTAS DE TRABAJO///////////////*/

.jobs-container { max-width: 800px; margin: 0 auto; padding: 20px; font-family: sans-serif; }
.job-filters { list-style: none; display: flex; gap: 20px; margin-bottom: 30px; padding: 0; border-bottom: 1px solid #eee; }
.filter-item { cursor: pointer; padding-bottom: 10px; color: #666; font-weight: bold; }
.filter-item.active { color: #000; border-bottom: 2px solid #000; }

.job-card { 
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; border-bottom: 1px solid #eee; transition: all 0.3s;
}
.job-card:hover { border: 1px solid #000; padding: 20px; border-radius: 5px; margin: -1px 0; }

.job-info { display: flex; align-items: center; gap: 15px; }
.job-details h3 { margin: 0; font-size: 1.2rem; font-weight: 500; }
.job-tags { font-size: 0.8rem; color: #888; margin-top: 5px; }
.job-tags span { margin-right: 10px; }

.job-action a { 
  color: #00bcd4; text-decoration: none; font-weight: bold; 
  position: relative; padding-right: 20px;
}
.job-action a::after { content: '>'; position: absolute; right: 0; }


/* Forzar altura en móvil para que no desaparezca */
@media (max-width: 767px) {
  #section-id-template--28470046359877__1619015739944f86f6 .gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
  }
  
  #section-id-template--28470046359877__1619015739944f86f6 .gallery__item {
    height: 400px !important; /* Ajusta este valor a la altura que quieras en móvil */
    flex: 0 0 calc(50% - 7.5px) !important; /* Para que salgan 2 columnas si usas gap de 15px */
    margin-bottom: 15px !important;
  }
}

/* Reparar el ratio de aspecto si prefieres que sea automático */
.gallery--height-adapt .image-overlay__image img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

    #section-id-template--28470046359877__1619015739944f86f6 .text-overlay__title {
        text-align: left;
        text-transform: uppercase;
        text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    }


    #section-id-template--28470046359877__1619015739944f86f6 .text-overlay__button-row .text-overlay__button {
    margin: -5px .5em 0;
    float: left;
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

#section-id-template--28470046359877__1619015739944f86f6 .small-feature-link {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}


/* 1. Forzar el contenedor a un ratio 3:4 vertical */
.main-search__results .img-ar {
    padding-top: 133.33% !important; /* Ratio 3:4 (4/3 = 1.3333) */
    position: relative;
    height: 0;
    overflow: hidden;
    background-color: #f5f5f5; /* Color de fondo por si la imagen tarda en cargar */
    border-radius: 10px;
}

/* 2. Ajustar la imagen para que rellene todo el espacio vertical */
.main-search__results .img-ar img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Rellena la caja recortando lo necesario */
    object-position: center top;  /* Prioriza la parte superior (cuello/cabeza) si hay recorte */
}

/* 3. Asegurar que las imágenes secundarias (hover) hereden el mismo tamaño */
.main-search__results .product-block__image--secondary {
    height: 100% !important;
}

/* 4. Ajuste estético para el contenedor de búsqueda */
.main-search-result {
    margin-bottom: 20px;
}

/* 1. Eliminamos el margen/padding del contenedor de esta sección específica */
#section-id-template--28470046359877__gallery_mM46xd {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* 2. Ajustamos la galería para que llegue a los bordes laterales */
#section-id-template--28470046359877__gallery_mM46xd .gallery {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    flex-wrap: wrap;
    /* Ajustamos el espacio entre las imágenes (gap) */
    gap: 20px; 
}

/* 3. Calculamos el ancho de los items restando el hueco central */
@media (min-width: 768px) {
    #section-id-template--28470046359877__gallery_mM46xd .gallery__item {
        /* Para 2 columnas: 50% menos la mitad del gap (10px) */
        flex: 0 0 calc(50% - 10px) !important;
        margin: 0 !important;
    }
}

/* 4. En móvil, si quieres que ocupe todo el ancho */
@media (max-width: 767px) {
    #section-id-template--28470046359877__gallery_mM46xd .gallery__item {
        flex: 0 0 100% !important;
        margin: 0 0 15px 0 !important; /* Espacio solo abajo entre fotos apiladas */
    }
}

/* 5. Aseguramos que el border-radius de 10px se mantenga */
#section-id-template--28470046359877__gallery_mM46xd img {
    border-radius: 10px;
    width: 100%;
    display: block;
}
 



/* ==========================================================================
   GIANTX PDP - RECONSTRUCCIÓN DEFINITIVA (SOLO CSS)
   ========================================================================== */
/*PRODUCTO*/

.template-product .container { max-width: 100%;}

.template-product .product-info {
    display: flex;
    justify-content: center;
    border: solid thin white;
    margin-right: var(--container-pad-x) !important;
    margin-left: var(--container-pad-x) !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 30px 0 0 0 !important;
}
 .template-product .page-section-spacing {margin-top: -1px;}



/* ==========================================================================
   GIANTX PDP - DISEÑO RESPONSIVE CORREGIDO
   ========================================================================== */

/* --- 1. DISEÑO PARA ESCRITORIO (Solo pantallas de más de 768px) --- */
@media screen and (min-width: 768px) {
    #template--28470046687557__main .product-column-left {
        flex: 0 0 45% !important;
        width: 45% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
    }

    #template--28470046687557__main .product-column-right {
        flex: 0 0 55% !important;
        width: 55% !important;
        margin: 0 !important;
        padding: 20px 0 70px 0 !important;
    }
}





/* --- 2. DISEÑO PARA MÓVIL (Todo en una sola columna hacia abajo) --- */
@media screen and (max-width: 767px) {

    .media-gallery .main-image {

        margin: 15px 0px  !important;
    }

.collapsible-tabs {
    margin-top: 0px !important;
}
.collapsible-tabs__tab .disclosure__title {

    font-size: 1em !important;
}

    /* Forzamos que el formulario del producto se comporte como una columna */
    #template--28470046687557__main.product-info {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 15px 30px 15px !important;
    }

    /* Cada bloque (Galería e Info) ocupará el 100% del ancho */
    #template--28470046687557__main .product-column-left,
    #template--28470046687557__main .product-column-right {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Reordenamos la galería: Imagen arriba, Miniaturas debajo */
    .media-gallery__inner {
        display: flex !important;
        flex-direction: column !important;
    }

    .main-image {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Convertimos las miniaturas a carrusel horizontal debajo de la foto */
    .thumbnails {
        order: 2 !important;
        width: 100% !important;
        display: block !important;
        margin-bottom: 20px !important;
    }

    .thumbnails .slider__grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important; /* Permite scroll lateral con el dedo */
        -webkit-overflow-scrolling: touch;
        gap: 10px !important;
        padding-bottom: 10px !important;
    }

    .thumbnails .slider__item {
        flex: 0 0 75px !important; /* Tamaño de cada miniatura en móvil */
        width: 75px !important;
    }

    /* La información del producto irá debajo de las miniaturas */
    .product-column-right {
        order: 3 !important;
        padding-top: 10px !important;
    }
    
    /* Ajuste para que el título no sea gigante en móvil */
    .product-title {
        font-size: 20px !important;
    }
}

.vendor .underline {
    text-decoration: none;
    color: white
}

.vendor .product-info-label {
    display: none;
}

.product-info-label {
    margin-top: 7px;
    margin-bottom: 8px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4em;
}







/* Centrado vertical absoluto para el Slideshow de Pokemon */
#section-id-template--28470046982469__slideshow_gtaNAh .text-overlay {
    display: flex !important;
    align-items: center !important;    /* Centrado Vertical */
    justify-content: center !important;  /* Centrado Horizontal */
    height: 100% !important;
    top: 0 !important;
}

#section-id-template--28470046982469__slideshow_gtaNAh .text-overlay__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;              /* Elimina empujes automáticos del tema */
    padding: 0 !important;
    width: 100% !important;
}

#section-id-template--28470046982469__slideshow_gtaNAh .text-overlay__text.slideshow__motion-overlay {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
}



/* Estilos solo para móviles (pantallas menores a 767px) */
@media only screen and (max-width: 767px) {
    
    
#section-id-template--28470046982469__slideshow_gtaNAh .slide-1 .text-overlay__title {
    font-size: 30px !important;
}

}







/* ==========================================================================
   HEADER / INDEX RESPONSIVE (SOLO MÓVIL)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    /* 1. Contenedor principal: Forzamos el reparto en 3 columnas */
    .logo-area.container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 10px !important;
        padding-right: 15px !important;
        gap: 0 !important;
    }

    /* 2. Columna Izquierda (Menú + Buscar) */
    .logo-area__left {
        order: 1 !important; /* La movemos a la primera posición */
        flex: 1 1 30% !important;
        display: flex !important;
        justify-content: flex-start !important;
        border: none !important; /* ELIMINA LA LÍNEA VERTICAL */
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo-area__left__inner {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important; /* Espacio entre hamburguesa y lupa */
    }

    /* 3. Columna Central (LOGO) */
    .logo-area__middle {
        order: 2 !important; /* La movemos al centro */
        flex: 0 0 auto !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin: 0 !important;
    }

    .logo-area__middle .logo img {
        margin: 0 auto !important;
        max-width: 110px !important; /* Ajusta este valor si quieres el logo más grande o pequeño */
    }

    /* 4. Columna Derecha (Idioma + Cuenta + Carrito) */
    .logo-area__right {
        order: 3 !important; /* La movemos a la última posición */
        flex: 1 1 30% !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo-area__right__inner {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; /* Espacio entre los 3 botones de la derecha */
    }

    /* 5. Limpieza de elementos residuales de Symmetry */
    .logo-area__left:after, 
    .logo-area__middle:after, 
    .logo-area__middle:before,
    .logo-area__right:before {
        display: none !important; /* Elimina cualquier otra línea flotante */
    }

    /* Ajuste específico para el botón de idioma en móvil para que no ocupe tanto */
    .localization-toggle {
        padding: 5px !important;
        min-width: unset !important;
    }

.pageheader--layout-inline-menu-center .logo-area__middle {
    border-left: none;
}

.logo-area__right{ border:none }


.gx-product-title {
    font-size: 13px !important;

}
.gx-product-detail {
    padding: 0 5px 30px 10px !important;
}

    .cart-link {
        width: 40px !important;
        height: 40px !important;
        margin-left: 0px !important
    }

        .header-account-link {
        width: 40px;
        height: 40px;
    }

    .logo-area__right__inner .header-account-link {
    margin: 0px;
    padding: 7px 8px !important;
}

    .logo-area__left__inner {
        gap: 5px !important;
    }
.localization-toggle {
        padding:5px !important;
    }


    .show-search-link__icon {
        border: solid thin;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0;
        margin-right: -2px;
        border-radius: 10px;
        padding: 8px;
    }

.logo-area .mobile-nav-toggle {
    flex: 0 0 auto;
    width: 20px;
    height: 44px;
    color: white;
    margin-right: 15px !important;
}

}


@media only screen and (max-width: 767px) {
    /* 1. Forzamos que el menú empiece oculto */
    .localization-switcher .localization-menu {
        display: none !important; 
        position: absolute !important; /* Para que no empuje el header hacia abajo */
        top: 100% !important;
        right: 0 !important;
        background: #232323 !important; /* Ajusta al color de tu header */
        border: 1px solid rgba(255,255,255,0.2) !important;
        z-index: 99 !important;
        min-width: 120px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
    }

    /* 2. Solo se muestra cuando el contenedor tiene la clase 'active' */
    .localization-switcher.active .localization-menu {
        display: block !important;
    }

    /* 3. Ajuste del contenedor para que el menú flote respecto a él */
    .localization-switcher {
        position: relative !important;
    }

    /* 4. Estética de las opciones para que sea cómodo al tacto */
    .localization-menu li a {
        padding: 12px 15px !important;
        display: block !important;
        color: #fff !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   HEADER /INDEX RESPONSIVE (SOLO MÓVIL)
   ========================================================================== */




/* ==========================================================================
   GIANTX HEADER MOBILE - LOGO IZQUIERDA Y BUSCAR A LA DERECHA
   ========================================================================== */

@media (max-width: 767.98px) {
    /* 1. Preparamos el contenedor principal */
    .logo-area.container {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Todo empieza a la izquierda */
        padding: 8px 15px !important;
        gap: 5px !important; /* Espacio entre menú y logo */
    }

    /* 2. "Rompemos" los grupos originales del tema para mover las piezas libremente */
    .logo-area__left, 
    .logo-area__middle, 
    .logo-area__right,
    .logo-area__left__inner,
    .logo-area__middle__inner,
    .logo-area__right__inner {
        display: contents !important;
    }

    /* 3. ASIGNACIÓN DE ORDEN (Lógica LEGO) */

    /* Posición 1: Menú Hamburguesa */
    .mobile-nav-toggle {
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

   /* Posición 2: Logo (Pegado al menú) */
    .logo {
        order: 2 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .logo img {
        max-width: 95px !important; /* <--- ESTE ES EL VALOR A CAMBIAR */
        height: auto !important;
    }

    /* Posición 3: Icono de Buscar (Empuja a la derecha) */
    .show-search-link {
        order: 3 !important;
        margin-left: auto !important; /* ESTE ES EL TRUCO: crea el hueco central */
        margin-right: 0 !important;
    }

    /* Posición 4: Selector de Idioma */
    .localization-switcher {
        order: 4 !important;
        margin: 0 !important;
    }

    /* Posición 5: Mi Cuenta */
    .header-account-link {
        order: 5 !important;
        margin: 0 !important;
    }

    /* Posición 6: Carrito */
    .cart-link {
        order: 6 !important;
        margin: 0 !important;
    }

    /* 4. LIMPIEZA DE LÍNEAS Y BORDES (Elimina la línea flotante) */
    .logo-area__left,
    .logo-area__middle,
    .logo-area__right {
        border: none !important;
    }

    /* Matamos cualquier pseudo-elemento que cree líneas verticales */
    .logo-area__left::after, 
    .logo-area__middle::before, 
    .logo-area__middle::after,
    .logo-area__right::before {
        display: none !important;
        content: none !important;
    }

    
    /* Espaciado mínimo entre iconos de la derecha */
    .show-search-link, .localization-switcher, .header-account-link, .cart-link {
        padding: 4px !important;
    }

    #section-id-template--28470046359877__1619015739944f86f6 .gallery__item {
        width: 100%;
    }

    #shopify-section-template--28470046359877__newsletter_DzjkJQ .container {
    padding: 60px 30px;
}

}


/* ==========================================================================
   MENÚ MÓVIL GIANTX - VERSIÓN FINAL CON SÍMBOLO (+)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    /* 1. EL CAJÓN PRINCIPAL */
    .mobile-navigation-drawer {
        background-color: #202020 !important;
        top: var(--theme-header-height) !important;
        height: calc(100vh - var(--theme-header-height)) !important;
        position: fixed !important;
        width: 100% !important;
        left: 0 !important;
        border: none !important;
        box-shadow: none !important;
        display: block !important;
        overflow-x: hidden !important;
    }

    /* 2. ESTRUCTURA VERTICAL */
    .mobile-navigation-drawer .navigation__tier-1,
    .mobile-navigation-drawer .navigation__tier-2 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .mobile-navigation-drawer .navigation__item {
        display: block !important;
        width: 100% !important;
        background-color: #202020 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        /* Mantenemos static para que el submenú suba al top 0 del drawer */
        position: static !important; 
    }

    .mobile-navigation-drawer .navigation__link {
        display: block !important;
        padding: 20px 60px 20px 25px !important; /* Espacio a la derecha para el + */
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        text-transform: uppercase;
    }

    /* 3. SUBMENÚS (TIER 2): CAPA DESDE EL TOP 0 */
    .navigation__child-tier {
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #202020 !important;
        z-index: 50 !important;
        transform: none !important;
        display: none !important;
    }

    .mobile-navigation-drawer .navigation__item.navigation__item--open > .navigation__child-tier {
        display: block !important;
    }

    .navigation__child-tier .container {
        padding-top: 63px !important; /* Espacio para la cabecera del menú */
    }

    /* 4. EL SÍMBOLO (+) A LA DERECHA */
    .mobile-navigation-drawer .navigation__children-toggle svg { 
        display: none !important; 
    }

    .mobile-navigation-drawer .navigation__children-toggle {
        position: absolute !important;
        right: 0 !important;
        /* El truco: No ponemos 'top', así se queda en su línea actual */
        margin-top: -62px; /* Ajuste para centrarlo verticalmente en su fila */
        width: 60px !important;
        height: 60px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 10;
        background: transparent !important;
        color: #ffffff !important;
    }

    /* Dibujamos el + con CSS */
    .mobile-navigation-drawer .navigation__children-toggle::before,
    .mobile-navigation-drawer .navigation__children-toggle::after {
        content: "";
        position: absolute;
        background-color: #ffffff;
        transition: all 0.2s;
    }

    /* Línea horizontal */
    .mobile-navigation-drawer .navigation__children-toggle::before {
        width: 14px;
        height: 2px;
    }

    /* Línea vertical */
    .mobile-navigation-drawer .navigation__children-toggle::after {
        width: 2px;
        height: 14px;
    }

    /* 5. CABECERA (Atrás / Título) */
    .mobile-navigation-drawer .navigation__mobile-header {
        position: relative !important;
        z-index: 60 !important;
        background-color: #202020 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .navigation__mobile-header     .mobile-nav-toggle {
        padding: 18px !important;
    }

    .mobile-navigation-drawer--child-open .mobile-nav-title {
    font-family: "Font-1701948080876" !important;
    padding-top: 15px;
    font-size: 21px;
}

.mobile-navigation-drawer--child-open .mobile-nav-back {
    padding-top: 17px;
}

.navigation__tier-2 a { background: #333333 !important;}

  .navigation__tier-2 .navigation__link {
        font-size: 14px !important;
        font-family: "Font-1700750871972" !important;
        font-weight: 400 !important;

    }
}



/* ==========================================================================
   FOOTER DEL MENÚ MÓVIL (CUENTA + IDIOMA)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    
    /* 1. LIMPIEZA HEADER SUPERIOR */
    /* Ocultamos Cuenta e Idioma arriba para dejar espacio al logo */
    .logo-area__right .header-account-link,
    .logo-area__right .localization-switcher {
        display: none !important;
    }

    /* 2. DISEÑO DEL FOOTER DEL MENÚ */
    .mobile-navigation-drawer__footer {
        padding: 30px 20px !important;
        background: #151515 !important; /* Un poco más oscuro para separar */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Sección Cuenta */
    .giantx-account-link {
        display: flex;
        align-items: center;
        text-decoration: none;
        margin-bottom: 25px;
        gap: 15px;
    }

    .giantx-account-icon {
        width: 45px;
        height: 45px;
        background: #333;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .giantx-account-info {
        display: flex;
        flex-direction: column;
    }

    .giantx-login-text, .giantx-user-name {
        color: #ffffff;
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
    }

    .giantx-user-orders {
        color: #aaaaaa;
        font-size: 13px;
        margin-top: 2px;
    }

    /* Selector de Idioma Horizontal (Estilo Barra) */
    .giantx-language-bar {
        display: flex;
        background: #202020;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50px; /* Forma de cápsula */
        overflow: hidden;
    }

    .lang-btn {
        flex: 1;
        background: transparent;
        border: none;
        color: #777;
        padding: 12px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .lang-btn.active {
        background: #ffffff;
        color: #000000;
        border-radius: 50px;
    }
}