#fw-section-hero-0 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
.hero__content {


  position: absolute;
  buttom: 5px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  text-align: center;
}

@media (max-width: 768px) {

  .hero__content {
    top: 20px;
    bottom: 10px;          /* 🔑 definimos ambos */
    height: auto;
    padding: 0 16px;

    display: flex;
    flex-direction: column;
  }

  .hero__heading {
    font-size: 24px;
    line-height: 1.2;
  }

  .hero__text {
    font-size: 14px;
    line-height: 1.4;
  }

}


}
#fw-section-collections-list-e2e43348-db96-47b2-833f-e4aea6c6a70c {
--font-heading-scale: 2.0;
--font-body-scale: 1.79;
}


#fw-section-hero-a0f5b422-feb2-48b8-83db-102237079803 {
--font-heading-scale: 1.09;
--font-body-scale: 1.0;
}
#fw-section-hero-a0f5b422-feb2-48b8-83db-102237079803 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
/* 1. Contenedor principal como referencia */
.hero__inner {
  position: relative !important;
}

/* 2. SOMBRA PARA EL TEXTO: Hace que las letras blancas resalten */
.hero__inner .hero__heading {
  /* Los valores son: desplazamiento X, desplazamiento Y, desenfoque, color */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Botón expandido y transparente */
.hero__inner .button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; 
  z-index: 999 !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Evitamos que contenedores intermedios bloqueen la expansión */
.hero__wrapper, 
.hero__content, 
.hero__cta-container, 
.hero__cta {
  position: static !important;
}
}
#fw-section-collections-list-1854fd09-1d90-40c1-ac6c-ebd17494c451 {
--font-heading-scale: 2.0;
--font-body-scale: 1.53;
}
#fw-section-collections-list-1854fd09-1d90-40c1-ac6c-ebd17494c451 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #2d2d2d;
--color-on-background-rgb: 45, 45, 45;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #2d2d2d;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #2d2d2d;
--secondary-btn-bg: transparent;
--secondary-btn-text: #2d2d2d;
--secondary-btn-border-color: #2d2d2d;

}
#fw-section-featured-product-33db09ca-7266-43e5-99ab-4975fff7e4ea {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #2d2d2d;
--color-on-background-rgb: 45, 45, 45;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #2d2d2d;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #2d2d2d;
--secondary-btn-bg: transparent;
--secondary-btn-text: #2d2d2d;
--secondary-btn-border-color: #2d2d2d;
/* Añade el aviso debajo de los precios en todas las secciones */
.featured-product-info__price--original::after, 
.tile__price--original::after, 
.inline-image__price--original::after,
.product-drawer__subtotal-value::after {
    content: "Excl. VAT. Calculated at checkout";
    display: block;
    font-size: 0.65rem; /* Tamaño pequeño pero legible */
    color: #757575;    /* Gris suave para no distraer del precio */
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 4px;
    font-weight: 400;
}

/* Ajuste específico para el carrito (Drawer) para que se vea elegante */
.product-drawer__subtotal-value::after {
    font-size: 0.6rem;
    text-align: right;
}
}

#fw-section-featured-product-2b9aec40-1f59-4a5b-ba85-2e6138386596 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #2d2d2d;
--color-on-background-rgb: 45, 45, 45;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #2d2d2d;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #2d2d2d;
--secondary-btn-bg: transparent;
--secondary-btn-text: #2d2d2d;
--secondary-btn-border-color: #2d2d2d;

}

#fw-section-hero-0718279e-5b50-4c62-af05-9f039d5d4c04 {
--font-heading-scale: 0.8;
--font-body-scale: 1.01;
}
#fw-section-hero-0718279e-5b50-4c62-af05-9f039d5d4c04 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
/* 1. Contenedor principal como referencia */
.hero__inner {
  position: relative !important;
}

/* 2. SOMBRA PARA EL TEXTO: Hace que las letras blancas resalten */
.hero__inner .hero__heading {
  /* Los valores son: desplazamiento X, desplazamiento Y, desenfoque, color */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Botón expandido y transparente */
.hero__inner .button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; 
  z-index: 999 !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Evitamos que contenedores intermedios bloqueen la expansión */
.hero__wrapper, 
.hero__content, 
.hero__cta-container, 
.hero__cta {
  position: static !important;
}
}


#fw-section-hero-753d42a8-d0f0-4305-8880-9121cbcf7d96 {
--font-heading-scale: 0.92;
--font-body-scale: 1.0;
}
#fw-section-hero-753d42a8-d0f0-4305-8880-9121cbcf7d96 {
--color-primary: #ffffff;
--color-primary-rgb: 255, 255, 255;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #060000;
--color-on-primary-rgb: 6, 0, 0;
--color-product-image-background: #ffffff;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #ffffff;
--primary-btn-text: #060000;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;
/* 1. Contenedor principal como referencia */
.hero__inner {
  position: relative !important;
}

/* 2. SOMBRA PARA EL TEXTO: Hace que las letras blancas resalten */
.hero__inner .hero__heading {
  /* Los valores son: desplazamiento X, desplazamiento Y, desenfoque, color */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Botón expandido y transparente */
.hero__inner .button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; 
  z-index: 999 !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Evitamos que contenedores intermedios bloqueen la expansión */
.hero__wrapper, 
.hero__content, 
.hero__cta-container, 
.hero__cta {
  position: static !important;
}
}


#fw-section-hero-98f5eb62-71f8-4f7a-9e12-b6bc18ed714d {
--font-heading-scale: 1.07;
--font-body-scale: 0.95;
}
#fw-section-hero-98f5eb62-71f8-4f7a-9e12-b6bc18ed714d {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #f7f7f7;
--color-on-background-rgb: 247, 247, 247;
--color-on-primary: #f6f6f6;
--color-on-primary-rgb: 246, 246, 246;
--color-product-image-background: #f7f7f7;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #f6f6f6;
--primary-btn-border-color: #f7f7f7;
--secondary-btn-bg: transparent;
--secondary-btn-text: #f7f7f7;
--secondary-btn-border-color: #f7f7f7;
/* 1. Contenedor principal como referencia */
.hero__inner {
  position: relative !important;
}

/* 2. SOMBRA PARA EL TEXTO: Hace que las letras blancas resalten */
.hero__inner .hero__heading {
  /* Los valores son: desplazamiento X, desplazamiento Y, desenfoque, color */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* 3. Botón expandido y transparente */
.hero__inner .button {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important; 
  z-index: 999 !important; 
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 4. Evitamos que contenedores intermedios bloqueen la expansión */
.hero__wrapper, 
.hero__content, 
.hero__cta-container, 
.hero__cta {
  position: static !important;
}
}

#fw-section-image-with-text-e4642675-d3aa-4e97-930c-3620f1291035 {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #2d2d2d;
--color-on-background-rgb: 45, 45, 45;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #2d2d2d;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #2d2d2d;
--secondary-btn-bg: transparent;
--secondary-btn-text: #2d2d2d;
--secondary-btn-border-color: #2d2d2d;
/* 1. Ocultar "Powered by Fourthwall" manteniendo el copyright */
.footer__powered-by {
    display: none !important;
}

/* 2. Efecto de recorte y zoom para la imagen (2752x1536) */
.image-with-text__image {
    width: 100% !important;
    /* Ajusta esta altura (ej. 600px o 700px) para que la imagen se vea 
       tan grande como desees en el espacio */
    height: 650px !important; 
    object-fit: cover !important; /* Llena el espacio y recorta los sobrantes */
    object-position: center !important; /* Centra el recorte para no perder el foco */
}

/* Ajuste opcional para móviles para que no quede demasiado alta */
@media (max-width: 767px) {
    .image-with-text__image {
        height: 400px !important;
    }
}

/* Evitar que el botón de Añadir al Carrito se vuelva cuadrado o el texto se ponga en vertical */
.button[data-cart-widget="add-to-cart"],
.product-form__submit {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: max-content !important; /* Asegura que el botón sea al menos tan ancho como el texto */
}
}



#fw-section-hero-6909d566-dd8e-40b6-8053-0f7a077af67f {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #63ff87;
--color-background-rgb: 99, 255, 135;
--color-on-background: #04ffb4;
--color-on-background-rgb: 4, 255, 180;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #04ffb4;
--color-background-brightness: 195;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #04ffb4;
--secondary-btn-bg: transparent;
--secondary-btn-text: #04ffb4;
--secondary-btn-border-color: #04ffb4;
/* Sombra para la frase principal */
.hero__heading {
    text-shadow: 0px 0px 9px rgba(0, 1, 1, 1) !important;
}

/* Sombra para el nombre (Francisco Llamas) */
.hero__text {
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.6) !important;
}
}
#fw-section-footer {

/* Oculta el mensaje de Fourthwall sin afectar el copyright */
.footer__powered-by {
    display: none !important;
}
}

#fw-section-header {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #303030;
--color-on-background-rgb: 48, 48, 48;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #303030;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #303030;
--secondary-btn-bg: transparent;
--secondary-btn-text: #303030;
--secondary-btn-border-color: #303030;
/* Asegura la cuadrícula base de 3 columnas */
.grid--layout-3-cols {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important; /* Espacio entre los items */
  padding: 0 10px !important;
}

/* Habilitar la perspectiva 3D para la interacción */
.grid--waffle {
  perspective: 1500px !important; /* Añade profundidad al contenedor */
}
}




#fw-section-hero-video-61f3c7d9-c5a3-4e83-aedd-e9578baefd5a {
--color-primary: #000000;
--color-primary-rgb: 0, 0, 0;
--color-background: #ffffff;
--color-background-rgb: 255, 255, 255;
--color-on-background: #ffffff;
--color-on-background-rgb: 255, 255, 255;
--color-on-primary: #ffffff;
--color-on-primary-rgb: 255, 255, 255;
--color-product-image-background: #ffffff;
--color-background-brightness: 255;
background-color: var(--color-background);
color: var(--color-on-background);
--primary-btn-bg: #000000;
--primary-btn-text: #ffffff;
--primary-btn-border-color: #ffffff;
--secondary-btn-bg: transparent;
--secondary-btn-text: #ffffff;
--secondary-btn-border-color: #ffffff;

}














#fw-section-password {

/* Ocultar el pie de página de Fourthwall */
.password__powered-by {
    display: none !important;
}
}