/**
Theme Name: Azkitser
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: azkitser
Template: astra
*/

/* FOOTER */
/* NEWSLETTER */
.newsletter {
  & .elementor-field-type-submit {
    justify-content: start;
  }
}


/* ========================================
   ADD TO CART - PRODUCTO WOOCOMMERCE
   ======================================== */

.add-to-cart {

  /* Formulario general */
  & form.cart {
    margin: 0;
  }

  /* Variaciones */
  & .variations {
    width: 100%;
    margin: 0 0 20px 0;
    border: 0;

    & tbody,
    & tr,
    & th,
    & td {
      display: block;
      width: 100%;
    }

    & th,
    & td {
      padding: 0;
      border: 0;
      background: transparent;
    }

    /* Label de variación, ej: "Talla" */
    & .label {
      margin-bottom: 10px;

      & label {
        display: block;

        margin: 0 0 10px 0;

        color: #8ba4cc;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;
      }
    }

    /* Contenedor del select */
    & .value {
      position: relative;

      width: 100%;
      max-width: 185px;

      /* Flecha personalizada */
      &::after {
        content: "";

        position: absolute;

        right: 15px;
        top: 24px;

        width: 7px;
        height: 7px;

        border-right: 2px solid #253246;
        border-bottom: 2px solid #253246;

        transform: translateY(-65%) rotate(45deg);

        pointer-events: none;
      }
    }

    /* Select */
    & select {
      display: block;

      width: 100%;
      height: 48px;

      padding: 0 42px 0 14px;

      background: #ffffff;
      color: #303847;

      border: 1px solid #d6dae0;
      border-radius: 2px;

      font-family: inherit;
      font-size: 14px;
      font-weight: 400;

      cursor: pointer;

      outline: none;

      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      transition: border-color 0.2s ease;

      &:hover {
        border-color: #9ea8b5;
      }

      &:focus {
        border-color: #4f8df7;
      }
    }
  }

  /* Ocultar "Limpiar" */
  & .reset_variations {
    display: none !important;
  }

  /* Zona cantidad + botón */
  & .single_variation_wrap {
    margin-top: 18px;
  }

  & .woocommerce-variation-add-to-cart,
  & form.cart:not(.variations_form) {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* Selector de cantidad */
  & .quantity {
    display: flex;
    align-items: center;

    height: 48px;

    margin: 0 !important;

    background: #191f27;

    border: 1px solid #303844;
    border-radius: 0;

    /* Input de cantidad */
    & .qty {
      width: 45px;
      height: 46px;

      padding: 0;
      margin: 0;

      background: transparent;

      border: 0;

      color: #ffffff;

      font-family: inherit;
      font-size: 14px;
      font-weight: 500;
      text-align: center;

      outline: none;

      appearance: textfield;
      -moz-appearance: textfield;

      /* Ocultar flechas nativas */
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        margin: 0;

        -webkit-appearance: none;
      }
    }
  }

  /* Botones - y + */
  & .qty-minus,
  & .qty-plus {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 46px;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    border: 0;

    color: #ffffff;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    transition: background 0.2s ease;

    &:hover {
      background: rgba(255, 255, 255, 0.06);
    }
  }

  /* Botón añadir al carrito */
  & .single_add_to_cart_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding: 0 34px !important;

    margin: 0 !important;

    background: #4f8df7 !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 13px !important;
    font-weight: 500 !important;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
      background 0.2s ease,
      opacity 0.2s ease;

    &:hover {
      background: #3f7ce5 !important;
    }

    /* Producto no disponible */
    &.disabled,
    &:disabled {
      opacity: 0.45 !important;
      cursor: not-allowed;
    }

    /* Icono carrito */
    &::before {
      content: "";

      display: block;

      width: 20px;
      height: 20px;

      flex-shrink: 0;

      background-color: currentColor;

      -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");

      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;

      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='19' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 10.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L21 7H6'/%3E%3C/svg%3E");

      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
  }

  /* Precio de variación */
  & .woocommerce-variation-price {
    margin-bottom: 16px;
  }

  /* Mensaje de disponibilidad */
  & .woocommerce-variation-availability {
    margin-bottom: 12px;
  }

  @media (max-width: 767px) {

    & .variations .value {
      max-width: 100%;
    }

    & .woocommerce-variation-add-to-cart,
    & form.cart:not(.variations_form) {
      flex-wrap: wrap;
    }

    & .single_add_to_cart_button {
      flex: 1;
      min-width: 200px;
    }
  }
}

/* ========================================
   PACKS (WPC Product Bundles) - FICHA DE PRODUCTO
   ======================================== */

/* Precio principal: "80,30 € 37,40 € (ahorro 42,90 €)" */
.elementor-widget-woocommerce-product-price .price[class*="woosb-price-"] {
  & del {
    margin-right: 10px;

    font-size: 0.55em;
    font-weight: 400;

    opacity: 0.4;
  }

  & ins {
    text-decoration: none;
  }

  & .woocommerce-price-suffix {
    display: inline-block;

    margin-left: 12px;
    padding: 6px 10px;

    background: rgba(72, 136, 255, 0.12);
    color: #a1beff;

    font-family: "Syne", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: uppercase;

    vertical-align: middle;
  }
}

.add-to-cart .woosb-wrap {
  margin-bottom: 24px;

  color: #f0f2f6;

  font-family: "Syne", sans-serif;

  /* Lista de productos del pack */
  & .woosb-products {
    margin: 0 0 20px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    & .woosb-product {
      gap: 16px;

      padding: 16px 0;

      border-bottom: 1px solid rgba(255, 255, 255, 0.08);

      & > div {
        padding: 0;
      }

      & .woosb-thumb {
        width: 56px;
        flex: 0 0 56px;

        & img {
          aspect-ratio: 1;
          object-fit: cover;

          background: #181d24;

          border: 1px solid rgba(255, 255, 255, 0.1);
        }
      }

      /* "1 × Nombre" */
      & .woosb-title .woosb-name {
        color: rgba(240, 242, 246, 0.55);

        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;

        & a {
          color: #f0f2f6;

          font-family: inherit;
          font-size: inherit;
          letter-spacing: 0;
          text-transform: none;

          transition: color 0.2s ease;

          &:hover {
            color: #a1beff;
          }
        }
      }

      & .woosb-price {
        width: auto;
        flex: 0 0 auto;

        color: #f0f2f6;

        font-size: 14px;
        font-weight: 600;

        white-space: nowrap;
      }

      /* Variaciones dentro del pack: mismo aspecto que en la ficha normal */
      & .variations_form .variations {
        display: block;

        margin: 12px 0 0 0;

        & .variation {
          display: block;

          margin: 0;
          padding: 0;

          border: 0;

          & .label {
            margin-bottom: 8px;

            & label {
              margin: 0;
            }
          }

          & .value {
            &::after {
              top: 20px;
            }

            & select {
              height: 40px;

              padding: 0 42px 0 14px;

              background: #ffffff;
              color: #303847;

              border: 1px solid #d6dae0;
              border-radius: 2px;

              font-size: 14px;
              line-height: 38px;
            }
          }
        }
      }
    }
  }

  /* "Precio del lote: 80,30 € 37,40 € (ahorro 42,90 €)" */
  & .woosb-summary {
    margin: 0 0 16px 0;

    & .woosb-total {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 12px;
    }

    & .woosb-total-label {
      color: #a1beff;

      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.3px;
      text-transform: uppercase;
    }

    & .woosb-total-value {
      font-family: "Unbounded", sans-serif;
      font-size: 18px;
      font-weight: 600;

      & del {
        margin-right: 6px;

        font-size: 14px;
        font-weight: 400;

        opacity: 0.4;
      }

      & ins {
        text-decoration: none;
      }

      & .woocommerce-price-suffix {
        color: rgba(240, 242, 246, 0.55);

        font-family: "Syne", sans-serif;
        font-size: 13px;
        font-weight: 600;
      }
    }
  }

  /* Aviso "Elige una variación..." */
  & .woosb-alert {
    margin: 0 0 16px 0;
    padding: 12px 16px;

    background: rgba(72, 136, 255, 0.08);
    color: #f0f2f6;

    border-left: 2px solid #4888ff;

    font-size: 13px;
    line-height: 1.5;

    & strong {
      color: #a1beff;
    }
  }

  @media (max-width: 767px) {
    & .woosb-products .woosb-product {
      align-items: flex-start;
      gap: 12px;

      & .woosb-thumb {
        width: 48px;
        flex-basis: 48px;
      }

      & .woosb-price {
        font-size: 13px;
      }
    }
  }
}

/* El texto del botón no se parte en dos líneas */
.add-to-cart .elementor-product-woosb .single_add_to_cart_button {
  white-space: nowrap;
}

.product-conditions {
  font-weight: 400;
  color: #F0F2F666;
  margin-left: 12px;
}

/* ========================================
   GALERÍA PRODUCTO
   ======================================== */

.product-gallery {

  & .woocommerce-product-gallery {
    display: grid !important;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;

    align-items: start;

    width: 100%;
    max-width: 100%;

    position: relative;
  }

  /* Viewport principal del slider */
  & .flex-viewport {
    grid-column: 2;
    grid-row: 1;

    width: 100% !important;
    min-width: 0;

    overflow: hidden !important;

    margin: 0 !important;
  }

  /* Wrapper de imágenes. IMPORTANTE: no romper flexslider */
  & .woocommerce-product-gallery__wrapper {
    /* Con una sola imagen flexslider no se inicializa y el wrapper es hijo
       directo del grid: ocupar todo el ancho en vez de la columna de 64px */
    grid-column: 1 / -1;

    margin: 0 !important;

    width: 100%;

    float: none !important;

    box-sizing: border-box;
  }

  /* Cada imagen / slide */
  & .woocommerce-product-gallery__image {
    margin: 0 !important;

    box-sizing: border-box;

    & a {
      display: block;

      width: 100%;
      height: 100%;
    }

    /* Imagen principal */
    & img {
      display: block;

      width: 100% !important;
      height: auto !important;

      max-width: 100%;

      object-fit: contain;

      background: #ffffff;

      margin: 0 auto;
    }
  }

  /* Miniaturas */
  & .flex-control-thumbs {
    grid-column: 1;
    grid-row: 1;

    display: flex !important;
    flex-direction: column;

    gap: 10px;

    width: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;

    float: none !important;

    box-sizing: border-box;

    /* Cada miniatura */
    & li {
      width: 64px !important;
      height: 64px !important;

      flex: 0 0 64px;

      margin: 0 !important;
      padding: 0 !important;

      float: none !important;

      overflow: hidden;

      box-sizing: border-box;

      /* Imagen miniatura */
      & img {
        display: block;

        width: 64px !important;
        height: 64px !important;

        object-fit: cover;

        background: #ffffff;

        border: 1px solid transparent;

        opacity: 1 !important;

        cursor: pointer;

        transition:
          border-color 0.2s ease,
          opacity 0.2s ease;

        &:hover {
          opacity: 0.75 !important;
        }

        /* Miniatura seleccionada */
        &.flex-active {
          border-color: #4f8df7;
          opacity: 1 !important;
        }
      }
    }
  }

  /* Lupa de WooCommerce */
  & .woocommerce-product-gallery__trigger {
    display: none !important;
  }

  /* Flechas del slider */
  & .flex-direction-nav {
    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 20;

    display: flex !important;
    gap: 6px;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none;

    & li {
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Botón base */
    & a {
      position: relative !important;

      top: auto !important;
      left: auto !important;
      right: auto !important;

      display: flex !important;
      align-items: center;
      justify-content: center;

      width: 42px !important;
      height: 42px !important;

      margin: 0 !important;
      padding: 0 !important;

      background: #252525 !important;

      border: 0 !important;
      border-radius: 0 !important;

      opacity: 1 !important;

      color: #ffffff;

      font-size: 0 !important;
      text-indent: 0 !important;

      cursor: pointer;

      transition: background 0.2s ease;

      &:hover {
        background: #333333 !important;
      }

      /* Flecha con CSS */
      &::before {
        content: "" !important;

        display: block;

        width: 8px;
        height: 8px;

        border-top: 1px solid #ffffff;
        border-right: 1px solid #ffffff;

        font-family: initial !important;
      }

      &.flex-prev::before {
        transform: rotate(-135deg);
      }

      &.flex-next::before {
        transform: rotate(45deg);
      }

      /* Forzar visibilidad */
      &.flex-prev,
      &.flex-next {
        opacity: 1 !important;
      }
    }
  }

  /* Evitar conflictos con WooCommerce */
  & figure {
    margin: 0;
  }

  /* Flechas personalizadas galería */
  & .custom-gallery-nav {
    position: absolute;

    top: 16px;
    right: 16px;

    z-index: 30;

    display: flex;
    align-items: center;
    gap: 6px;
  }

  & .custom-gallery-prev,
  & .custom-gallery-next {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;
    margin: 0;

    background: #252525;

    border: 0;
    border-radius: 0;

    cursor: pointer;

    transition: background-color 0.2s ease;

    &:hover {
      background: #3a3a3a;
    }

    /* Dibujar flechas */
    & span {
      display: block;

      width: 8px;
      height: 8px;

      border-top: 1px solid #ffffff;
      border-right: 1px solid #ffffff;
    }
  }

  /* Sin miniaturas (una sola imagen) no hay nada que navegar */
  & .woocommerce-product-gallery:not(:has(.flex-control-thumbs)) .custom-gallery-nav {
    display: none;
  }

  & .custom-gallery-prev span {
    transform: rotate(-135deg);
  }

  & .custom-gallery-next span {
    transform: rotate(45deg);
  }

  /* Responsive tablet / móvil */
  @media (max-width: 767px) {

    & .woocommerce-product-gallery {
      display: flex !important;
      flex-direction: column;

      gap: 12px;
    }

    /* Imagen principal primero */
    & .flex-viewport {
      order: 1;

      width: 100% !important;
    }

    /* Miniaturas debajo */
    & .flex-control-thumbs {
      order: 2;

      flex-direction: row;

      width: 100% !important;

      gap: 8px;

      overflow-x: auto;
      overflow-y: hidden;

      padding-bottom: 4px !important;

      & li {
        width: 60px !important;
        height: 60px !important;

        flex: 0 0 60px;

        & img {
          width: 60px !important;
          height: 60px !important;
        }
      }
    }

    /* Flechas */
    & .flex-direction-nav {
      top: 10px;
      right: 10px;

      gap: 5px;

      & a {
        width: 38px !important;
        height: 38px !important;
      }
    }

    & .custom-gallery-nav {
      top: 10px;
      right: 10px;

      gap: 5px;
    }

    & .custom-gallery-prev,
    & .custom-gallery-next {
      width: 38px;
      height: 38px;
    }
  }
}

/* ========================================
   TABS PRODUCTO
   ======================================== */

.product-tabs {

  & .elementor-tabs-wrapper {
    display: flex !important;
    align-items: stretch;

    background: #0b0b0b;

    border: 1px solid #FFFFFF1A !important;

    /* Títulos de los tabs */
    & .elementor-tab-title {
      position: relative;

      display: flex !important;
      align-items: center;

      min-height: 54px;

      padding: 0 26px !important;

      background: transparent;

      color: #6f7680 !important;

      font-size: 12px;
      font-weight: 600;

      letter-spacing: 0.7px;
      text-transform: uppercase;

      cursor: pointer;

      /* Eliminar pseudo-elementos que mete Elementor */
      &::before {
        display: none !important;
      }

      /* Tab activo */
      &.elementor-active {
        background: #1b222c;

        color: #ffffff !important;

        /* Línea azul inferior */
        &::after {
          content: "";

          position: absolute;

          left: 0;
          right: 0;
          bottom: 0;

          height: 2px;

          background: #4f8df7;

          border: 0 !important;
        }
      }
    }
  }

  /* IMPORTANTE: ocultar los títulos de móvil en escritorio */
  & .elementor-tab-mobile-title {
    display: none !important;
  }

  /* Contenido */
  & .elementor-tabs-content-wrapper {
    background: #1b222c;

    border: 0 !important;
  }

  & .elementor-tab-content {
    padding: 22px 28px !important;

    background: #1b222c;

    border: 0 !important;

    color: #c3c9d2;
  }

  /* Características */
  & .product-features {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 55px;
    row-gap: 16px;

    margin: 0;
    padding: 0;

    list-style: none;
  }

  & .product-feature {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 0;
    padding: 0;

    &-check {
      display: block;

      flex: 0 0 14px;

      width: 14px;

      color: #4f8df7;

      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
    }

    &-text {
      color: #c1c7d0;

      font-size: 12px;
      font-weight: 400;

      line-height: 1.5;
    }
  }

  /* Responsive */
  @media (max-width: 767px) {

    /* En móvil Elementor utiliza sus propios títulos internos */
    & .elementor-tabs-wrapper {
      display: none !important;
    }

    & .elementor-tab-mobile-title {
      display: flex !important;
      align-items: center;

      min-height: 48px;

      padding: 0 18px !important;

      background: #0b0b0b;

      border: 0 !important;
      border-bottom: 1px solid #202733 !important;

      color: #6f7680 !important;

      font-size: 11px;
      font-weight: 600;

      letter-spacing: 0.7px;
      text-transform: uppercase;

      &.elementor-active {
        background: #1b222c;

        color: #ffffff !important;

        border-bottom: 2px solid #4f8df7 !important;
      }
    }

    & .elementor-tab-content {
      padding: 18px !important;
    }

    & .product-features {
      grid-template-columns: 1fr;

      row-gap: 13px;
    }
  }
}

/* NEWS */

.news-card {
  display: flex;

  & .elementor-container {
    margin-left: 0;
    margin-bottom: 0;
  }

  & .elementor-container .elementor-top-column {
      margin-bottom: auto !important;
  }
}

/* ========================================
   CARRUSELES (Swiper sobre Loop Grid)
   JS: assets/js/azk-sliders.js
   ======================================== */

.azk-swiper {
  overflow: hidden;

  /* Antes de iniciar Swiper: fila horizontal en vez de rejilla */
  & .elementor-loop-container {
    display: flex !important;
    gap: 0;
  }

  & .elementor-loop-container:not(.swiper-wrapper) {
    overflow: hidden;

    & > .e-loop-item {
      flex: 0 0 auto;
      width: 100%;
    }
  }

  & .swiper {
    overflow: hidden;
  }

  & .swiper-wrapper {
    grid-template-columns: none;
  }

  /* Tarjetas de la misma altura: la última sección de la plantilla se estira */
  & .swiper-slide {
    display: flex;
    flex-direction: column;
    height: auto;

    & > .elementor-section:last-child {
      flex-grow: 1;

      & > .elementor-container {
        height: 100%;
      }
    }
  }
}

/* Antes de iniciar: tantas tarjetas como el preset de escritorio */
@media (min-width: 1025px) {
  .azk-swiper-products .elementor-loop-container:not(.swiper-wrapper) > .e-loop-item {
    width: calc((100% - 31px * 4) / 4.4);
    margin-right: 31px;
  }

  .azk-swiper:not(.azk-swiper-hero):not(.azk-swiper-products) .elementor-loop-container:not(.swiper-wrapper) > .e-loop-item {
    width: calc((100% - 48px) / 3);
    margin-right: 24px;
  }
}

/* Flechas (widgets Icono con clase azk-prev-* / azk-next-*)
   Diseño: cuadrado 48px, fondo #181D24, borde blanco 20%.
   Si no hay overflow, Swiper añade .swiper-button-lock (display:none);
   las dejamos visibles y atenuadas, como en Figma. */
[class*="azk-prev-"],
[class*="azk-next-"] {
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

  & .elementor-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  &.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  &.swiper-button-lock {
    display: block !important;
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  &:focus-visible {
    outline: 2px solid #4888ff;
    outline-offset: 2px;
  }
}

/* Chevrons del carrusel de noticias: assets de Figma (20.1794px) */
.azk-prev-blog .elementor-icon,
.azk-next-blog .elementor-icon {
  position: relative;
  width: 20.1794px;
  height: 20.1794px;
}

.azk-prev-blog .elementor-icon svg,
.azk-next-blog .elementor-icon svg {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.azk-prev-blog .elementor-icon::before,
.azk-next-blog .elementor-icon::before {
  content: "";
  display: block;
  width: 20.1794px;
  height: 20.1794px;
  background-repeat: no-repeat;
  background-position: center;
}

.azk-prev-blog .elementor-icon::before {
  background-image: url("assets/icons/azk-chevron-left.svg");
}

.azk-next-blog .elementor-icon::before {
  background-image: url("assets/icons/azk-chevron-right.svg");
}

/* «VER TODAS LAS GUÍAS» del carrusel de noticias */
.elementor-section:has(.azk-prev-blog) .elementor-heading-title a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Syne", sans-serif;
  font-size: 13.117px;
  font-weight: 700;
  letter-spacing: 0.6558px;
  line-height: 19.675px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.azk-see-all::after {
  content: "";
  flex-shrink: 0;
  width: 16.1435px;
  height: 16.1435px;
  background: url("assets/icons/azk-arrow-see-all.svg") no-repeat center;
  background-size: 16.1435px 16.1435px;
}

@media (max-width: 767px) {
  .elementor-section:has(.azk-prev-blog) .elementor-heading-title a {
    font-size: 11px;
    letter-spacing: 0.55px;
  }
}

/* Hero con columnas (Sección .azk-swiper-hero): cada columna es un slide */
.elementor-section.azk-swiper-hero {
  & .elementor-top-column {
    min-height: 838px;

    & > .elementor-widget-wrap {
      flex-grow: 1;
    }
  }

  & .swiper-wrapper {
    flex-wrap: nowrap;
  }
}

/* Antes de iniciar Swiper: solo el primer slide visible */
body:not(.elementor-editor-active) .elementor-section.azk-swiper > .elementor-container {
  flex-wrap: nowrap;
  overflow: hidden;

  & > .elementor-top-column {
    flex: 0 0 100%;
    width: 100% !important;
  }
}

/* Editor: columnas apiladas para editar cada slide */
.elementor-editor-active .elementor-section.azk-swiper > .elementor-container {
  flex-wrap: wrap;

  & > .elementor-top-column {
    width: 100% !important;
  }
}

@media (max-width: 1366px) {
  .elementor-section.azk-swiper-hero .elementor-top-column {
    min-height: 720px;
  }
}

@media (max-width: 1024px) {
  .elementor-section.azk-swiper-hero .elementor-top-column {
    min-height: 640px;
  }
}

@media (max-width: 767px) {
  .elementor-section.azk-swiper-hero .elementor-top-column {
    min-height: 600px;
  }
}

/* Controles del hero superpuestos al slider */
.azk-hero-controls {
  pointer-events: none;

  & .elementor-element {
    pointer-events: auto;
  }
}

/* ========================================
   PÁGINAS LEGALES
   Widget Editor de texto con clase azk-legal
   (aviso legal, condiciones de venta, privacidad, cookies)
   ======================================== */

.azk-legal {
  max-width: 880px;

  & h2 {
    margin: 56px 0 20px;
    padding-top: 32px;
    border-top: 1px solid #2A2E35;
    color: #F0F2F6;
    font-family: "Unbounded", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
  }

  & h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  & h3 {
    margin: 36px 0 14px;
    color: #A1BEFF;
    font-family: "Syne", sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
  }

  & p {
    margin: 0 0 16px;
  }

  & strong {
    color: #F0F2F6;
    font-weight: 600;
  }

  & a {
    color: #A1BEFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
    transition: color .2s;

    &:hover {
      color: #4888FF;
    }
  }

  & ul,
  & ol {
    margin: 0 0 20px;
    padding-left: 22px;
  }

  & li {
    margin-bottom: 8px;
    padding-left: 4px;
  }

  & ul li::marker {
    color: #4888FF;
  }

  & ol li::marker {
    color: #A1BEFF;
    font-weight: 600;
  }

  /* Tablas de cookies */
  & .azk-legal-table {
    margin: 0 0 28px;
    overflow-x: auto;
    border: 1px solid #2A2E35;
    border-radius: 8px;
  }

  & table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.5;
  }

  & th,
  & td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #2A2E35;
    text-align: left;
    vertical-align: top;
  }

  & thead th {
    background: #181D24;
    color: #F0F2F6;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  & tbody tr:last-child td {
    border-bottom: 0;
  }

  & tbody tr:nth-child(even) td {
    background: rgba(24, 29, 36, .5);
  }
}

@media (max-width: 767px) {
  .azk-legal {
    & h2 {
      margin-top: 40px;
      padding-top: 24px;
      font-size: 18px;
    }

    & h3 {
      font-size: 16px;
    }
  }
}

/* ========================================
   ARCHIVO DE PRODUCTOS (tienda y categorías)
   Plantilla Elementor "Archivo – Productos" + FacetWP
   ======================================== */

/* Filtros de 210px + 48px de separación (padding derecho de la columna) */
@media (min-width: 1025px) {
  .azk-catalog > .elementor-container {
    & > .azk-catalog-sidebar {
      flex: 0 0 258px;
      width: 258px !important;
    }

    & > .azk-catalog-main {
      flex: 1 1 0;
      width: auto !important;
      min-width: 0;
    }
  }
}

/* Facets: sin márgenes propios de FacetWP */
.azk-facet-count,
.azk-facet-sort,
.azk-facet-price {
  & .facetwp-facet {
    margin-bottom: 0;
  }
}

/* "19 productos" */
.azk-facet-count .facetwp-facet {
  font-family: "Syne", sans-serif;
  font-size: 13.1px;
  line-height: 19.7px;
  color: rgba(240, 242, 246, 0.4);
}

/* Ordenar por */
.azk-facet-sort .facetwp-facet {
  display: flex;
  justify-content: flex-end;

  & select {
    appearance: none;
    width: 251px;
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 40px 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: #181d24 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23f0f2f6' stroke-width='1.5' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: #f0f2f6;
    font-family: "Syne", sans-serif;
    font-size: 12.1px;
    font-weight: 600;
    letter-spacing: 1.21px;
    text-transform: uppercase;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid #4888ff;
      outline-offset: 2px;
    }
  }
}

/* Grupos de filtros desplegables (assets/js/azk-catalog-filters.js) */
.azk-catalog-sidebar .azk-filter-title {
  cursor: pointer;
  user-select: none;

  & .elementor-heading-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    &::after {
      content: "";
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
      background: url("assets/icons/azk-filter-chevron.svg") no-repeat center / contain;
      transform: rotate(180deg);
      transition: transform 0.2s ease;
    }
  }

  &:focus-visible {
    outline: 2px solid #4888ff;
    outline-offset: 2px;
  }

  /* Cerrado: flecha hacia abajo, se oculta el contenido y la línea pasa al título */
  &.is-collapsed {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    & .elementor-heading-title::after {
      transform: none;
    }

    & + .elementor-element {
      display: none;
    }
  }
}

/* Subcategorías (lista generada en functions.php sobre el widget WooCommerce
   "Categorías de producto"), con "Todas las categorías" como primer elemento */
.azk-cat-list .product-categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;

  & a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: "Syne", sans-serif;
    font-size: 13.1px;
    line-height: 19.7px;
    color: rgba(240, 242, 246, 0.55);
    transition: color 0.2s ease;

    &:hover {
      color: #4888ff;
    }
  }

  & .current-cat > a {
    color: #4888ff;
    font-weight: 600;

    &::before {
      content: "";
      flex: 0 0 12px;
      width: 12px;
      height: 12px;
      background: url("assets/icons/azk-filter-active.svg") no-repeat center / contain;
    }
  }
}

/* Sin subcategorías: se oculta el grupo entero */
.azk-cat-list:not(:has(li)),
.azk-filter-title:has(+ .azk-cat-list:not(:has(li))) {
  display: none;
}

/* Slider de precio (noUiSlider de FacetWP) */
.azk-facet-price {
  & .noUi-target {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }

  & .noUi-connect {
    background: #4888ff;
  }

  & .noUi-horizontal .noUi-handle {
    top: -6px;
    right: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid #f0f2f6;
    border-radius: 50%;
    background: #4888ff;
    box-shadow: none;
    cursor: grab;

    &::before,
    &::after {
      display: none;
    }
  }

  & .facetwp-slider-wrap {
    padding: 0;
    margin-bottom: 16px;
  }

  & .facetwp-slider-label {
    display: block;
    font-family: "Unbounded", sans-serif;
    font-size: 11.1px;
    line-height: 16.6px;
    color: rgba(240, 242, 246, 0.6);
  }

  & .facetwp-slider-reset {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: #4888ff;
    font-family: "Syne", sans-serif;
    font-size: 11.1px;
    font-weight: 600;
    letter-spacing: 1.11px;
    text-transform: uppercase;
    cursor: pointer;
  }
}

/* Tarjetas de la misma altura en la parrilla */
.azk-product-grid .e-loop-item {
  display: flex;
  flex-direction: column;

  & > .elementor-section {
    flex-grow: 1;

    & > .elementor-container {
      height: 100%;
    }
  }
}

/* Bloque SEO: solo si la categoría tiene título en ACF */
.azk-cat-seo:not(:has(h2)) {
  display: none;
}

.azk-cat-seo-image .elementor-widget-container {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 10, 10, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }
}

/* ========================================
   VÍDEO DE LA HOME (assets/js/azk-video.js)
   ======================================== */

.azk-video {
  & .elementor-icon {
    box-shadow: 0 0 16px rgba(72, 136, 255, 0.4);
    cursor: pointer;
  }

  /* Antes de reproducir se ve la imagen alternativa (fondo de la sección)
     y no el primer fotograma del vídeo */
  &:not(.is-playing) > .elementor-background-video-container {
    visibility: hidden;
  }

  /* Reproduciendo: se ocultan los textos, el play y la superposición, y
     queda el vídeo de fondo */
  &.is-playing {
    cursor: pointer;

    & > .elementor-background-overlay,
    & .elementor-widget-wrap > .elementor-element {
      display: none;
    }
  }
}

/* ========================================
   BUSCADOR DEL HEADER (assets/js/azk-search.js)
   ======================================== */

/* Lupa (widget Icono con la clase azk-search-open) */
.azk-search-open,
.azk-search-open .elementor-icon {
  cursor: pointer;
}

.azk-search-open .elementor-icon:focus-visible {
  outline: 2px solid #4888ff;
  outline-offset: 4px;
}

.azk-search-dialog {
  width: 100%;
  max-width: none;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0a0a;
  color: #f0f2f6;
  overflow-y: auto;

  &::backdrop {
    background: rgba(10, 10, 10, 0.8);
  }

  &[open] {
    animation: azk-search-in 0.25s ease;
  }
}

@keyframes azk-search-in {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
}

.azk-search-dialog__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 60px;

  @media (max-width: 767px) {
    padding: 24px 20px 32px;
  }
}

.azk-search-dialog__form {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);

  &:focus-within {
    border-bottom-color: #4888ff;
  }
}

.azk-search-dialog__input,
.azk-search-dialog__input:focus {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #f0f2f6;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  text-transform: uppercase;

  &::placeholder {
    color: rgba(240, 242, 246, 0.35);
  }

  &::-webkit-search-cancel-button {
    display: none;
  }
}

.azk-search-dialog__close {
  display: flex;
  flex: 0 0 auto;
  padding: 8px;
  border: 0;
  background: none;
  color: #f0f2f6;
  cursor: pointer;

  &:hover,
  &:focus {
    background: none;
    color: #4888ff;
  }
}

.azk-search-dialog__results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 48px;
  transition: opacity 0.2s ease;

  &:not(:empty) {
    padding-top: 32px;
  }

  &.is-loading {
    opacity: 0.5;
  }

  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }

  & ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

.azk-search-dialog__group-title {
  margin: 0 0 16px;
  font-family: "Syne", sans-serif;
  font-size: 11.1px;
  font-weight: 700;
  line-height: 16.6px;
  letter-spacing: 1.66px;
  text-transform: uppercase;
  color: rgba(240, 242, 246, 0.55);
}

.azk-search-dialog__product,
.azk-search-dialog__post {
  font-family: "Syne", sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: #f0f2f6;
  transition: color 0.2s ease;

  &:hover,
  &:focus-visible {
    color: #4888ff;
  }
}

.azk-search-dialog__product {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px;
  background: #181d24;

  & img {
    width: 56px;
    height: 56px;
    object-fit: cover;
  }

  & del {
    margin-right: 6px;
    opacity: 0.5;
  }

  & ins {
    text-decoration: none;
  }
}

.azk-search-dialog__price {
  font-family: "Unbounded", sans-serif;
  font-size: 13px;
  white-space: nowrap;
}

.azk-search-dialog__post {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.azk-search-dialog__empty {
  grid-column: 1 / -1;
  margin: 0;
  font-family: "Syne", sans-serif;
  color: rgba(240, 242, 246, 0.55);
}

.azk-search-dialog__all {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: #4888ff;
  font-family: "Syne", sans-serif;
  font-size: 12.1px;
  font-weight: 600;
  letter-spacing: 1.21px;
  text-transform: uppercase;
  cursor: pointer;

  &:hover,
  &:focus {
    background: none;
    color: #f0f2f6;
  }
}

/* ========================================
   CHECKOUT - RESUMEN "TU PEDIDO"
   ======================================== */

body .elementor-widget-woocommerce-checkout-page .woocommerce .woocommerce-checkout-review-order-table {
  width: 100%;

  border-collapse: collapse;

  /* Separador por fila completa (en las celdas quedaba cortado) */
  & tbody tr.cart_item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    & td {
      border-bottom: 0;
    }
  }

  & tbody tr.cart_item:last-child {
    border-bottom-color: rgba(255, 255, 255, 0.16);
  }

  /* Elementor limita el nombre a 150px y lo parte en varias líneas */
  & .cart_item td.product-name {
    width: 100%;
    max-width: none;

    padding-inline-end: 24px;

    line-height: 1.4;

    & .product-quantity {
      display: inline-block;

      margin-left: 6px;

      color: rgba(240, 242, 246, 0.55);

      font-size: 13px;
      white-space: nowrap;
    }
  }

  & .cart_item td.product-total,
  & thead th.product-total,
  & tfoot td {
    text-align: right;
    white-space: nowrap;
  }

  /* Productos incluidos en un pack: sangrados y en segundo plano */
  & tbody tr.woosb-item-parent {
    border-bottom: 0;
  }

  & tbody tr.woosb-item-child {
    & td {
      padding-top: 0;
    }

    & td.product-name {
      position: relative;

      padding-left: 18px;

      color: rgba(240, 242, 246, 0.55);

      font-size: 13px;

      &::before {
        content: "";

        position: absolute;
        left: 4px;
        top: 0;

        width: 8px;
        height: 9px;

        border-left: 1px solid rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      }

      & a {
        color: inherit;
      }
    }

    & td.product-total {
      font-size: 13px;
    }
  }

  /* Sin separador entre productos del mismo pack: solo tras el último */
  & tbody tr.woosb-item-child:has(+ tr.woosb-item-child) {
    border-bottom: 0;
  }
}

/* ========================================
   PEDIDO RECIBIDO (página de gracias)
   Astra y el widget de checkout de Elementor la pintan para fondo claro:
   títulos blancos sobre #fbfbfb y precios en #000.
   ======================================== */

body.woocommerce-order-received.woocommerce-checkout .woocommerce .woocommerce-order {
  color: #f0f2f6;

  font-family: "Syne", sans-serif;

  & > p {
    color: rgba(240, 242, 246, 0.55);

    font-size: 14px;
  }

  /* "Gracias. Tu pedido ha sido recibido." */
  & .woocommerce-thankyou-order-received {
    margin: 0 0 24px 0;

    color: #f0f2f6;

    font-family: "Unbounded", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
  }

  /* Resumen: nº de pedido, fecha, email, total, método de pago */
  & ul.order_details {
    display: flex;
    flex-wrap: wrap;

    margin: 0 0 24px 0;
    padding: 0;

    background: #181d24;

    border: 1px solid rgba(255, 255, 255, 0.1);

    &::before,
    &::after {
      display: none;
    }

    & li {
      float: none;
      flex: 1 1 160px;

      margin: 0;
      padding: 20px 24px;

      border: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.08);

      color: #a1beff;

      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: 1.3px;
      text-transform: uppercase;

      &:last-of-type {
        border-right: 0;
      }

      & strong {
        margin-top: 8px;

        color: #f0f2f6;

        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0;
        word-break: break-word;
      }
    }
  }

  /* Cajas "Detalles del pedido" y "Dirección de facturación" */
  & .woocommerce-order-details,
  & .woocommerce-customer-details {
    margin: 0 0 24px 0;
    padding: 32px;

    background: #181d24;

    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  & h2.woocommerce-order-details__title,
  & h2.woocommerce-column__title {
    margin: 0 0 20px 0;
    padding: 0;

    background: transparent;
    color: #f0f2f6;

    border: 0;

    font-family: "Unbounded", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
  }

  /* Tabla de productos */
  & table.shop_table.order_details {
    width: 100%;

    margin: 0;

    border: 0;
    border-collapse: collapse;

    font-size: 14px;

    & thead th,
    & tfoot th {
      padding: 0 0 14px 0;

      background: transparent;
      color: #f0f2f6;

      border: 0;

      font-family: "Geist Mono", monospace;
      font-size: 13px;
      font-weight: 400;
    }

    & tbody td,
    & tfoot td,
    & tfoot th {
      padding: 14px 0;

      background: transparent;
      color: #f0f2f6;

      border: 0;
    }

    & thead tr,
    & tbody tr {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    & td.product-name {
      padding-right: 24px;

      line-height: 1.4;

      & a {
        color: #f0f2f6;

        font-family: inherit;
        font-size: inherit;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;

        transition: color 0.2s ease;

        &:hover {
          color: #a1beff;
        }
      }

      & .product-quantity {
        margin-left: 6px;

        color: rgba(240, 242, 246, 0.55);

        font-weight: 400;
        white-space: nowrap;
      }

      & .wc-item-meta {
        margin: 6px 0 0 0;
        padding: 0;

        color: rgba(240, 242, 246, 0.55);

        font-size: 13px;
        list-style: none;
      }
    }

    & .product-total,
    & tfoot td {
      text-align: right;
      white-space: nowrap;
    }

    & .woocommerce-Price-amount {
      color: inherit;
    }

    & tfoot th {
      padding-top: 14px;

      color: rgba(240, 242, 246, 0.55);

      text-align: left;
    }

    & tfoot tr:first-child th,
    & tfoot tr:first-child td {
      padding-top: 24px;
    }

    /* Total del pedido destacado */
    & tfoot tr:has(.woocommerce-Price-amount):nth-last-child(2) td,
    & tfoot tr.order-total td {
      font-family: "Unbounded", sans-serif;
      font-size: 18px;
      font-weight: 600;
    }

    /* Productos incluidos en un pack: mismo tratamiento que en el checkout */
    & tbody tr.woosb-item-parent,
    & tbody tr.woosb-item-child:has(+ tr.woosb-item-child) {
      border-bottom: 0;
    }

    & tbody tr.woosb-item-child {
      & td {
        padding-top: 0;

        font-size: 13px;
      }

      & td.product-name {
        position: relative;

        padding-left: 18px;

        color: rgba(240, 242, 246, 0.55);

        &::before {
          content: "";

          position: absolute;
          left: 4px;
          top: 0;

          width: 8px;
          height: 9px;

          border-left: 1px solid rgba(255, 255, 255, 0.2);
          border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        & a {
          color: inherit;
          font-weight: 400;
        }
      }

      & td.product-total {
        color: rgba(240, 242, 246, 0.55);
      }
    }
  }

  /* Dirección */
  & .woocommerce-customer-details address {
    margin: 0;
    padding: 0;

    color: rgba(240, 242, 246, 0.75);

    border: 0;

    font-size: 15px;
    font-style: normal;
    line-height: 1.7;

    & p {
      color: inherit;
    }
  }

  @media (max-width: 767px) {
    & .woocommerce-thankyou-order-received {
      font-size: 17px;
    }

    & ul.order_details li {
      flex-basis: 50%;

      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    & .woocommerce-order-details,
    & .woocommerce-customer-details {
      padding: 24px 20px;
    }
  }
}