.product-header h1{
     font-size: clamp(2.2rem, 4vw, 4rem);
    }
    .product-price {
      font-family: "singular", sans-serif;
      font-size: 1.4rem;
      margin: 0.5rem 0 1.5rem;
      font-weight: 200;
    }
    .full-width-btn {
      width: 100%;
      justify-content: center;
    }
    .selector-label {
      margin-bottom: 0.8rem;
      font-weight: 400;
      color: var(--text);
    }
    .size-selector {
      display: flex;
      gap: 1rem;
      margin-bottom: 2.5rem;
    }
    
    /* Estilos de la galería dinámica */
    .gallery-container {
      display: flex;
      width: 100%;
      height: 100%;
    }
    
    .gallery-variant {
      display: none; 
      animation: fadeIn 0.3s ease;
      width: 100%;
      gap: 1.2rem;
    }

    /* Mostrar la galería activa en flex (lado a lado por defecto) */
    .gallery-variant.active-gallery {
      display: flex;
      flex-direction: row; 
    }

    /* Contenedor de miniaturas (Izquierda en escritorio) */
    .thumbnails {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      width: 70px; /* Ancho fijo para la barra lateral de miniaturas */
      flex-shrink: 0;
    }

    .thumb {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      cursor: pointer;
      opacity: 0.5;
      transition: all 0.25s ease;
    }

    .thumb:hover {
      opacity: 0.9;
    }

    .thumb.active-thumb {
      opacity: 1;
      border: 1px solid var(--line);
    }

    /* Contenedor de la imagen principal (Ocupa el resto del espacio) */
    .main-image-wrapper {
      aspect-ratio: 1 / 1;
      flex-grow: 1;
      width: 100%;
      min-height: 55vh;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      overflow: hidden;
    }

    .main-image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Llena el contenedor sin deformarse */
      object-position: center;
    }
    @media (min-width: 981px) {
      .product-grid {
        grid-template-columns: 2fr 1fr !important;
        align-items: start !important;
        gap: 3rem; /* Un poco más de espacio para que respire el diseño */
      }
    }

    /* Adaptación para móviles (Miniaturas en la parte inferior) */
    @media (max-width: 980px) {
      .gallery-variant.active-gallery {
        flex-direction: column-reverse; /* Imagen arriba, miniaturas abajo */
      }
      
      .thumbnails {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }

      .thumb {
        width: 60px;
      }
      
      .main-image-wrapper {
        min-height: 40vh;
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }