/* Estilos globales */

body {

    font-family: Arial, sans-serif;

  }

  

  .post-card {

    background: white;

    border-radius: 15px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.08);

    margin-bottom: 2rem;

    padding: 1rem;

  }

  

  .post-img {

    max-width: 100%;

    border-radius: 10px;

    margin-top: 1rem;

  }

  

  .post-header {

    display: flex;

    justify-content: space-between;

    font-size: 0.9rem;

    color: #555;

  }

  

  .post-footer {

    margin-top: 1rem;

    display: flex;

    gap: 10px;

    align-items: center;

  }

  

  .comments-section {

    margin-top: 1rem;

    border-top: 1px solid #ddd;

    padding-top: 0.5rem;

  }

  

  .post-options,

  .comentario-options {

    position: relative;

    display: inline-block;

    margin-left: 10px;

  }

  

  .options-btn {

    background: none;

    border: none;

    font-size: 20px;

    cursor: pointer;

  }

  

  .options-menu {

    position: absolute;

    top: 25px;

    right: 0;

    background: white;

    border: 1px solid #ccc;

    border-radius: 6px;

    list-style: none;

    padding: 5px 0;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    z-index: 10;

  }

  

  .options-menu li {

    padding: 8px 15px;

    cursor: pointer;

  }

  

  .options-menu li:hover {

    background-color: #f5f5f5;

  }

  

  .comentario-item {

    display: flex;

    flex-direction: column;

  }

  

  .image-preview {

    position: relative;

    display: inline-block;

    margin-top: 1rem;

    border-radius: 10px;

    overflow: hidden;

    max-width: 100%;

    box-shadow: 0 2px 8px rgba(0,0,0,0.15);

  }

  

  .image-preview img {

    max-width: 100%;

    height: auto;

    border-radius: 10px;

  }

  

  .btn-delete-img {

    position: absolute;

    top: 8px;

    right: 8px;

    background-color: rgba(255, 0, 0, 0.9);

    color: white;

    border: none;

    font-size: 14px;

    border-radius: 50%;

    width: 25px;

    height: 25px;

    cursor: pointer;

  }

  

  

  .datos_perfil {

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    height: 165px;

    padding-bottom: 15px;

  }

  

  .contenedor_tienda-perfil {

    display: flex;

    justify-content: center;

    align-items: center;

  }

  

  .container-perfil {

    background-color: #3e4c5e;

    height: 70px;

    width: 70px;

    border-radius: 17px;

    border: 1px solid #FF9800;

  }

  

  

  

  .container-perfil img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

  }

  

  

  .contenedor_social {

    display: flex;

    margin-left: 25px;

    flex-direction: column;

  }

  

  .container-perfil {

    display: flex;

  }

  

  .container-perfil h4 {

    display: inline-block;

  }

  

  .container-perfil_user {

    font-size: 17px;

  }

  

  .info_perfil {

    font-size: 12px;

    display: flex;

  }

  

  .info_perfil p {

    margin: 5px;

  }

  

  .seguir {

    background-color: #ff8e15;

    padding: 5px 15px;

    margin: 5px 0;

    border: none;

    border-radius: 15px;

    color: #ffffff;

    font-size: 18px;

    transition: background-color 0.2s ease; /* Transición suave para el cambio de color */

  }

  

  .seguir:hover {

    background-color: #ff6f47; /* Color diferente al hacer hover */

  }

  .seguir:hover {

    /* transition: 1s; */

    box-shadow: #ff5315;

  }

  

  .tabs ul {

    list-style: none;

    display: flex;

    justify-content: center;

  }

  

  .tabs ul li {

    margin: 0 10px;

  }

  

  .tabs ul li a {

    color: #333;

    text-decoration: none;

    padding: 5px;

  }

  

  .tabs ul li.active a {

    color: #333;

    font-weight: 600;

    border-bottom: 2px solid #45454559;

  }

  

  .tab-content {

    display: none;

    padding: 20px;

    max-width: 900px;

    margin-top: 30px;

   

  }

  

  .tab-content.active {

    display: block;

    width: 100%;

    max-width: 970px;

    margin-top: 10px;

  }

  

  

  .main_perfil {

    display: flex;

    justify-content: center;

    

  }

  

  h2 {

    color: #3d5acd;

    margin-bottom: 10px;

    font-size: 16px;

  }

  

  .video-list {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));

    grid-gap: 15px;

  }

  

  .video-item {

    background-color: #fff;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  }

  

  .video-item p {

    overflow: hidden;

    color: #4bbd34;

  }

  

  .video-item h3 {

    color:#2d2d2e;

  }

  

  .redict__product {

    text-decoration: none;

  }

  

  .video-item img {

    width: 100%;

    height: 270px;

    object-fit: contain;

    border-radius: 5px;

  }

  

  .video-item h3 {

    margin: 10px 0;

  }

  

  .community-posts {

    /* display: flex;

    flex-direction: column;

    align-items: stretch; */

  }

  

  

  .content--box-publicar {

    display: flex;

    justify-content: center;

  }

  

  #content-form

    {

      width: 100%;

  }

  

  

  .campo-mensaje {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

  }

  

  .campo-mensaje input {

    width: 80%;

    height: 30px;

    margin: 0 0 0 10px;

  }

  

  .campo-contenido_tipo {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

  }

  

  #message-container {

    display: flex;

    flex-direction: column;

  }

  

  #message-container textarea {

    width: 100%;

    min-height: 100px;

    margin: 10px 0;

    overflow: auto;

    resize: none;

    padding: 7px;

  }

  

  .publicar_perfil {

    display: flex;

    justify-content: flex-end;

  }

  

  .publicar_perfil input {

    background-color: #488bdf;

    color: #fff;

    padding: 5px;

    border-radius: 7px;

    border: none;

  }

  

  #publish-form {

    display: block;

    margin-top: 24px;

    border: 1px solid #0000001a;

    padding: 16px 16px 8px 16px;

    border-radius: 12px;

  }

  

  .post {

    background-color: #fff;

    padding: 10px;

    border-radius: 5px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  }

  

  .post h3 {

    margin: 10px 0;

  }

  

  footer {

    background-color: #ebebeb;

    padding: 10px;

    text-align: center;

  }

  

  footer p {

    color: #767676;

  }

  

  

  #content-list {

    display: flex;

    margin-top: 20px;

    background-color: #fff;

    padding: 20px;

    border: 1px solid #0000001a;

    border-radius: 8px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  }

  

  #content-list h2 {

    margin: 0 0 10px;

    font-size: 18px;

    font-weight: 400;

  }

  

  #content-items {

    list-style: none;

    padding: 0;

  }

  

  #content-items li {

    display: flex;

    align-items: center;

    margin-bottom: 16px;

    font-size: 14px;

  }

  

  .img_content {

    width: 100%;

    /* display: flex;

    justify-content: space-around; */

    margin-bottom: 15px;

  }

  .img_post {

    width: 50%;

  

    

  }

  

  

  .img_post img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  

  .container_perfil-user {

    width: 75px;

    height: 100%;

    margin-right: 15px;

  }

  

  .perfil_user {

    width: 55px;

    height: 55px;

  }

  

  .perfil_user img {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    object-fit: cover;

  }

  /* 🧾 Estilo moderno y social para el formulario de comunidad */

  #publish-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 20px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);

    border: 1px solid #eaeaea;

    margin: 0 auto 40px auto;

  }

  

  #publish-form label {

    font-weight: bold;

    color: #3b3b3b;

    margin-bottom: 5px;

    display: block;

  }

  

  #publish-form input[type="text"],

  #publish-form textarea,

  #publish-form select {

    width: 100%;

    padding: 10px;

    border-radius: 12px;

    border: 1px solid #ddd;

    font-size: 15px;

    transition: border 0.3s;

  }

  

  #publish-form input[type="text"]:focus,

  #publish-form textarea:focus,

  #publish-form select:focus {

    border-color: #488bdf;

    outline: none;

  }

  

  #publish-form textarea {

    resize: vertical;

    min-height: 120px;

  }

  

  #publish-form input[type="file"] {

    background-color: #f9f9f9;

    padding: 8px;

    border-radius: 12px;

    border: 1px solid #ddd;

    cursor: pointer;

  }

  

  .publicar_perfil {

    display: flex;

    justify-content: flex-end;

  }

  

  .publicar_perfil input[type="submit"] {

    background: #4bbd34;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    font-weight: bold;

    font-size: 15px;

    transition: background 0.3s, transform 0.2s;

  }

  

  .publicar_perfil input[type="submit"]:hover {

    background: #3ea72a;

    transform: scale(1.05);

  }

  

  

  /* aca van la ultima modificacion  */

  

  /* NUEVO: Diseño del formulario tipo red social */

  .form-post-card {

    background: white;

    border-radius: 16px;

    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    padding: 20px;

    width: 100%;

    margin-bottom: 2rem;

  }

  

  .form-title {

    font-size: 18px;

    font-weight: bold;

    margin-bottom: 15px;

    color: #2c3e50;

  }

  

  #publish-form input[type="text"],

  #publish-form select,

  #publish-form textarea {

    width: 100%;

    padding: 10px;

    margin-top: 6px;

    margin-bottom: 15px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 14px;

    background-color: #fafafa;

    box-sizing: border-box;

  }

  

  #publish-form textarea {

    resize: vertical;

    min-height: 100px;

  }

  

  #publish-form input[type="submit"] {

    background-color: #2c7be5;

    color: white;

    border: none;

    padding: 10px 20px;

    font-size: 15px;

    border-radius: 8px;

    cursor: pointer;

    transition: background-color 0.3s ease;

  }

  

  #publish-form input[type="submit"]:hover {

    background-color: #1a5fb4;

  }

  

  /* Imagen grande tipo YouTube */

  .image-preview {

    display: block;

    max-width: 100%;

    margin-top: 1rem;

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    box-shadow: 0 3px 10px rgba(0,0,0,0.15);

  }

  

  .image-preview img {

    width: 100%;

    height: auto;

    object-fit: cover;

  }

  

  /* Botón X para cerrar imagen */

  .btn-delete-img {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: rgba(255, 0, 0, 0.85);

    color: white;

    border: none;

    border-radius: 50%;

    width: 30px;

    height: 30px;

    font-size: 16px;

    cursor: pointer;

  }

  

  .loader-comunidad {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 40px;

    text-align: center;

    color: #666;

    font-size: 14px;

  }

  

  .loader-comunidad .spinner {

    border: 4px solid #f3f3f3;

    border-top: 4px solid #488bdf;

    border-radius: 50%;

    width: 35px;

    height: 35px;

    animation: spin 1s linear infinite;

    margin-bottom: 10px;

  }

  

  @keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

  }

  

  .comentario-item {

    background-color: #f9f9f9;

    border-left: 3px solid #3498db;

    padding: 10px 15px;

    margin-bottom: 8px;

    border-radius: 5px;

    font-size: 14px;

    position: relative;

  }

  

  .comentario-item strong {

    color: #333;

  }

  

  .comentario-meta {

    font-size: 12px;

    color: #999;

    margin-left: 10px;

  }

  

  .btn-delete-comentario {

    background: transparent;

    border: none;

    color: #e74c3c;

    font-weight: bold;

    font-size: 16px;

    cursor: pointer;

    float: right;

    margin-left: 10px;

  }

  

  .btn-delete-comentario:hover {

    color: #c0392b;

  }

  

  

  

  

  

  .comentarios-box {

    margin-top: 10px;

    padding-left: 10px;

    border-left: 2px solid #ddd;

  }

  

  .comentario-item {

    margin-bottom: 8px;

    font-size: 0.95rem;

    line-height: 1.4;

  }

  

  .comentario-meta {

    display: block;

    font-size: 0.75rem;

    color: #999;

    margin-left: 5px;

  }

  

  .ver-mas-btn {

    background: none;

    color: #2c7be5;

    border: none;

    font-size: 0.85rem;

    cursor: pointer;

    margin-top: 5px;

  }

  .ver-mas-btn:hover {

    text-decoration: underline;

  }

  

  

  .ver-mas-btn {

    background-color: #f0f0f0;

    border: none;

    color: #333;

    padding: 6px 14px;

    margin-top: 10px;

    border-radius: 20px;

    cursor: pointer;

    font-size: 0.9em;

    transition: all 0.2s ease;

  }

  

  .ver-mas-btn:hover {

    background-color: #ddd;

  }

  .comentario-item {

    background-color: #fdfdfd;

    border: 1px solid #e5e5e5;

    border-radius: 10px;

    padding: 12px 16px;

    margin-bottom: 12px;

    font-size: 14px;

    position: relative;

    box-shadow: 0 2px 4px rgba(0,0,0,0.04);

  }

  

  .comentario-header-linea {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  

  .comentario-nombre a {

    font-weight: bold;

    color: #2c3e50;

    text-decoration: none;

  }

  

  .comentario-meta-derecha {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    color: #888;

  }

  

  .comentario-fecha {

    font-style: italic;

  }

  

  .btn-delete-comentario {

    background: transparent;

    border: none;

    color: #e74c3c;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    padding: 0;

  }

  

  .btn-delete-comentario:hover {

    transform: scale(1.2);

    color: #c0392b;

  }

  

  .comentario-contenido {

    margin-top: 8px;

    color: #444;

    white-space: pre-line;

    line-height: 1.5;

  }

  

  

  

  

  

  .fade-out {

    opacity: 0;

    transition: opacity 0.3s ease-out;

  }

  

  /* ==== Comentarios estilo red social (detalle producto) ==== */

  .comentarios__section {

    margin-top: 60px;

    background: #f9f9f9;

    padding: 40px 20px;

    border-radius: 12px;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

    box-shadow: 0 4px 12px rgba(0,0,0,0.05);

  }

  .comentario__formulario textarea {

    width: 100%;

    border-radius: 12px;

    border: 1px solid #ccc;

    padding: 15px;

    font-size: 15px;

    margin-bottom: 20px;

    resize: none;

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);

  }

  .comentario__estrellas {

    margin-bottom: 15px;

  }





  .estrellas__rating {

    display: flex;

    flex-direction: row-reverse; /* Importante para que funcione de izquierda a derecha */

    justify-content: flex-start;

  }

  

  .estrellas__rating input {

    display: none;

  }

  

  .estrellas__rating label {

    cursor: pointer;

    font-size: 24px;

    color: #ccc;

    transition: color 0.2s;

  }

  

  .estrellas__rating[data-input-stars] input:checked ~ label i,
  .estrellas__rating[data-input-stars] label:hover ~ label i,
  .estrellas__rating[data-input-stars] label:hover i {
    color: #ffc107;
  }

  .estrellas__rating[data-input-stars] label i {
    color: #d1d5db;
    transition: color 0.2s ease;
  }

  .estrellas__rating[data-input-stars] label.is-active i {
    color: #ffc107;
  }

  /* Estrellas de comentarios renderizados (sin inputs/labels) */
  .estrellas__rating > i {
    color: #d1d5db;
    transition: color 0.2s ease;
  }
  .estrellas__rating > i.activo {
    color: #ffc107;
  }
  



  .estrellas__rating label {

    cursor: pointer;

  }

  .btn__publicar-comentario {

    background: #28c328;

    color: white;

    padding: 10px 20px;

    border: none;

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 8px;

  }

  .comentarios__lista {

    margin-top: 40px;

  }

  .comentario__card {

    background: white;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 15px;

    box-shadow: 0 2px 6px rgba(0,0,0,0.06);

    position: relative;

  }

  .comentario__top {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  .comentario__texto {

    margin-top: 10px;

    margin-bottom: 10px;

    font-size: 15px;

  }

  .comentario__bottom {

    display: flex;

    justify-content: space-between;

    font-size: 13px;

    color: gray;

  }

  .comentario__eliminar {

    color: red;

    font-weight: bold;

    text-decoration: none;

    background: #ffe5e5;

    border-radius: 50%;

    padding: 4px 8px;

    font-size: 14px;

    line-height: 1;

  }



.product-summary__rating {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.product-summary__stars {

    display: flex;

    gap: 6px;

    color: #f59e0b;

}



.product-summary__rating-label {

    font-weight: 600;

    color: #1e293b;

}



.product-summary__stat {

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.product-summary__stat-value {

    font-size: 1.4rem;

    font-weight: 700;

    color: #0f172a;

}



.product-summary__stat-label {

    font-size: 0.85rem;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.04em;

}



.product-highlight-card {

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.08));

    border-radius: 20px;

    padding: 24px 28px;

    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);

}



.product-highlight-card__title {

    margin: 0 0 16px;

    font-size: 1.2rem;

    color: #1d4ed8;

    font-weight: 700;

}



.product-highlight-card__grid {

    list-style: none;

    display: grid;

    gap: 10px;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    padding: 0;

    margin: 0;

}



.product-highlight-card__item {

    display: flex;

    gap: 10px;

    align-items: flex-start;

    font-size: 0.95rem;

    color: #1e293b;

}



.product-highlight-card__marker {

    color: #1d4ed8;

    font-size: 0.8rem;

    transform: translateY(6px);

}



.rich-description-card {

    background: #ffffff;

    border-radius: 20px;

    padding: 28px 30px;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);

    border: 1px solid rgba(148, 163, 184, 0.2);

}



.rich-description-card__header h2 {

    font-size: 1.4rem;

    margin: 0;

    color: #0f172a;

}



.rich-description-card__sub {

    margin: 8px 0 20px;

    color: #64748b;

}



.rich-description-card__content {

    color: #1f2937;

    line-height: 1.65;

}



.product-actions {

    display: flex;

    flex-direction: column;

    gap: 24px;

}



.product-card {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);

    border: 1px solid rgba(148, 163, 184, 0.18);

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.product-card--primary {

    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);

}



.product-card--secondary {

    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

    color: #e2e8f0;

    gap: 16px;

}



.product-card__title {

    margin: 0;

    font-size: 1.2rem;

    font-weight: 600;

}



.product-card__price-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.product-card__price {

    font-size: clamp(2rem, 2.6vw, 2.8rem);

    font-weight: 800;

    color: #0f172a;

}



.product-card__favourite {

    width: 44px;

    height: 44px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: rgba(244, 63, 94, 0.12);

    color: #f43f5e;

    text-decoration: none;

    transition: transform 0.2s ease;

}



.product-card__favourite:hover {

    transform: scale(1.06);

}



.product-card__meta {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

    color: #475569;

    font-size: 0.95rem;

}



.product-card__meta-label {

    font-weight: 600;

    color: #0f172a;

    margin-right: 6px;

}



.product-card__meta-label--alert {

    color: #dc2626;

}



.product-card__meta-value i {

    margin-right: 6px;

    color: #dc2626;

}



.product-card__share {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 14px;

    border-radius: 14px;

    background: #22c55e;

    color: #ffffff;

    text-decoration: none;

    font-weight: 600;

    transition: transform 0.2s ease;

    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.25);

}



.product-card__share:hover {

    transform: translateY(-2px);

}



.product-card__shop-link {

    font-weight: 600;

    color: #2563eb;

    text-decoration: none;

}



.product-card__shop-link:hover {

    text-decoration: underline;

}



.product-card__actions {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.product-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.9rem 1.6rem;

    border-radius: 999px;

    font-weight: 600;

    color: #ffffff;

    background: linear-gradient(135deg, #ff8b37, #ff4d58);

    text-decoration: none;

    box-shadow: 0 18px 35px rgba(255, 89, 94, 0.28);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.product-button:hover {

    transform: translateY(-2px);

    box-shadow: 0 22px 50px rgba(255, 89, 94, 0.35);

}



.product-button--secondary {

    background: linear-gradient(135deg, #e2e8f0, #cbd5f5);

    color: #0f172a;

    box-shadow: none;

}



.product-button--accent {

    background: linear-gradient(135deg, #2563eb, #7c3aed);

    box-shadow: 0 18px 35px rgba(37, 99, 235, 0.28);

}



.product-card__list {

    list-style: none;

    padding: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

    font-size: 0.95rem;

}



.product-detail-cta {

    margin-top: 48px;

    background: linear-gradient(135deg, #0f172a, #1e293b);

    border-radius: 24px;

    padding: 28px;

    color: #e2e8f0;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);

    text-align: center;

}



.product-detail-cta__content {

    display: flex;

    flex-direction: column;

    gap: 16px;

    align-items: center;

}



.product-detail-cta__title {

    font-size: 1.4rem;

    font-weight: 700;

    margin: 0;

}



.comentarios__empty {

    margin-top: 18px;

    color: #64748b;

    text-align: center;

}



@media (max-width: 1200px) {

    .product-detail-grid {

        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);

    }



    .product-actions {

        grid-column: 1 / -1;

        flex-direction: row;

        flex-wrap: wrap;

    }



    .product-actions .product-card {

        flex: 1 1 320px;

    }



    .product-media__zoom {

        display: none !important;

    }

}



@media (max-width: 992px) {

    .product-detail-grid {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .product-media {

        grid-template-columns: 92px 1fr;

    }



    .product-actions {

        flex-direction: column;

    }

}



@media (max-width: 768px) {

    .product-media {

        grid-template-columns: 1fr;

    }



    .product-media__thumbs {

        flex-direction: row;

        justify-content: center;

        flex-wrap: wrap;

    }



    .product-media__stage {

        min-height: 320px;

    }



    .product-media__item {

        padding: 16px;

    }

}



@media (max-width: 640px) {

    .product-detail-shell {

        padding: 0 14px;

    }



    .product-detail-breadcrumbs {

        font-size: 0.85rem;

    }



    .product-highlight-card__grid {

        grid-template-columns: 1fr;

    }



    .rich-description-card {

        padding: 20px;

    }



    .product-card {

        padding: 22px;

    }



    .product-card__actions {

        flex-direction: column;

    }



    .product-detail-cta {

        padding: 24px;

    }

}





/* --- Layout inspirado en marketplaces --- */

.ml-product-wrapper {



    background: #f5f6f8;



    padding: 40px 0 60px;



}



.ml-product-page {



    max-width: 1180px;



    margin: 0 auto;



    background: #ffffff;



    border-radius: 18px;



    padding: 32px;



    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);



    display: flex;



    flex-direction: column;



    gap: 28px;



}



.ml-breadcrumbs {



    display: flex;



    flex-wrap: wrap;



    align-items: center;



    gap: 8px;



    font-size: 0.93rem;



    color: #64748b;



}



.ml-breadcrumbs__back {



    font-weight: 600;



    color: #1f2937;



    text-decoration: none;



}



.ml-breadcrumbs__back:hover,

.ml-breadcrumbs__link:hover {



    color: #111827;



}



.ml-breadcrumbs__link {



    color: inherit;



    text-decoration: none;



}



.ml-breadcrumbs__divider {



    opacity: 0.5;



}



.ml-breadcrumbs__placeholder {



    color: #9ca3af;



}



.ml-layout {

  display: grid;

  grid-template-columns: 1fr 360px;

  grid-template-areas:

      "gallery buybox"

      "info    buybox";

  gap: 28px;

  align-items: start;

}



/* asignación de las 3 tarjetas */

.ml-gallery {

  grid-area: gallery;

}



.ml-info {

  grid-area: info;

}



.ml-buybox {

  grid-area: buybox;

}





.ml-gallery {



    display: grid;



    grid-template-columns: 88px 1fr;



    gap: 16px;



}



.ml-gallery__thumbs {



    display: flex;



    flex-direction: column;



    gap: 12px;



}



.ml-gallery__thumb {



    width: 86px;



    height: 86px;



    border-radius: 12px;



    overflow: hidden;



    border: 1px solid #e2e8f0;



    background: #f8fafc;



    display: flex;



    align-items: center;



    justify-content: center;



    cursor: pointer;



    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;



}



.ml-gallery__thumb img {



    width: 100%;



    height: 100%;



    object-fit: contain;



}



.ml-gallery__thumb:hover {



    transform: translateY(-2px);



    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.14);



}



.ml-gallery__thumb.is-active {



    border-color: #ff9f1c;



    box-shadow: 0 12px 24px rgba(255, 159, 28, 0.25);



}



.ml-gallery__thumb--video {



    flex-direction: column;



    gap: 6px;



    background: #1e293b;



    color: #ffffff;



}



.ml-gallery__thumb-icon {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    width: 32px;



    height: 32px;



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.16);



}



.ml-gallery__thumb-label {



    font-size: 0.72rem;



    text-transform: uppercase;



    letter-spacing: 0.04em;



}



.ml-gallery__thumb--placeholder {



    cursor: default;



    background: #e2e8f0;



}



.ml-gallery__stage {



    border-radius: 16px;



    border: 1px solid #e2e8f0;



    background: #ffffff;



    min-height: 420px;



    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.5);



    display: flex;



    align-items: center;



    justify-content: center;



}



.ml-gallery__item {



    display: none;



    width: 100%;



    height: 100%;



    /* padding: 24px; */



    align-items: center;



    justify-content: center;



}



.ml-gallery__item.is-active {



    display: flex;



}



.ml-gallery__item img,

.ml-gallery__item video {



    width: 100%;



    height: 100%;



    object-fit: contain;



    border-radius: 12px;



    background: #f9fafb;



}



.ml-gallery__video {



    background: #000;



}



.ml-zoom-pane {

    margin-top: 18px;


    border-radius: 16px;



    background-repeat: no-repeat;



    background-size: 220% auto;


    background-position: center;



    height: 320px;



    border: 1px solid #dbe2ee;



    display: none;



}



.ml-zoom-pane.is-visible {



    display: block;



}



.ml-info {



    display: flex;



    flex-direction: column;



    gap: 22px;



}



.ml-info__badges {



    display: flex;



    gap: 10px;



    flex-wrap: wrap;



}



.ml-badge {



    display: inline-flex;



    align-items: center;



    padding: 4px 12px;



    border-radius: 999px;



    font-size: 0.75rem;



    text-transform: uppercase;



    letter-spacing: 0.04em;



    font-weight: 600;



    background: rgba(255, 159, 28, 0.12);



    color: #c2410c;



}



.ml-badge--estado {

    background: rgba(56, 189, 248, 0.16);

    color: #0369a1;

}

.ml-badge--sale {

    background: rgba(253, 230, 138, 0.26);

    border: 1px solid rgba(251, 191, 36, 0.45);

    color: #92400e;

}

.ml-badge--sale-soft {

    background: rgba(191, 219, 254, 0.3);

    border: 1px solid rgba(96, 165, 250, 0.45);

    color: #1d4ed8;

}

.ml-badge--destacado {

    background: linear-gradient(135deg, #fff2bf, #ffd54a);

    border: 1px solid #f3b300;

    color: #6b4200;

    box-shadow: 0 0 0 1px rgba(243, 179, 0, 0.2), 0 10px 20px -16px rgba(146, 64, 14, 0.45);

}

.ml-badge--service-home,
.ml-badge--service-urgency,
.ml-badge--service-ia,
.ml-badge--service-launchpad {

    gap: 6px;

    border: 1px solid transparent;

}

.ml-badge--service-home {

    background: linear-gradient(135deg, #eef2ff, #dbeafe);

    border-color: #a5b4fc;

    color: #3730a3;

}

.ml-badge--service-urgency {

    background: linear-gradient(135deg, #fff1f2, #fecdd3);

    border-color: #fb7185;

    color: #9f1239;

}

.ml-badge--service-ia {

    background: linear-gradient(135deg, #ecfeff, #cffafe);

    border-color: #22d3ee;

    color: #155e75;

}

.ml-badge--service-launchpad {

    background: linear-gradient(135deg, #f0fdf4, #dcfce7);

    border-color: #4ade80;

    color: #166534;

}

.ml-badge--flash {

    gap: 6px;

    background: linear-gradient(135deg, #fff4d4, #ff9f1c);

    border: 1px solid #fb923c;

    color: #7c2d12;

    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.24), 0 8px 20px -14px rgba(194, 65, 12, 0.55);

    animation: mbxFlashPulse 1.25s ease-in-out infinite;

}


.ml-title {



    margin: 0;



    font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);



    color: #1f2937;



    line-height: 1.25;



}



.ml-info__meta {



    display: flex;



    flex-wrap: wrap;



    gap: 12px;



    color: #6b7280;



    font-size: 0.95rem;



}



.ml-info__meta i {



    color: #ef4444;



    margin-right: 4px;



}



.ml-info__rating {



    display: flex;



    align-items: center;



    gap: 10px;



}



.ml-info__stars {

    display: flex;

    flex-direction: row;

    gap: 6px;

}

.ml-info__stars .fa-star {

    color: #d1d5db;

}

.ml-info__stars .fa-star.activo {

    color: #fbbf24;

}


.ml-info__rating-text {

    color: #4b5563;

    font-size: 0.95rem;

}

.ml-info__rating-link {

    align-items: center;

    color: inherit;

    display: inline-flex;

    gap: 4px;

    text-decoration: none;

}

.ml-info__rating-link:hover,
.ml-info__rating-link:focus-visible {

    text-decoration: underline;

}


.ml-section-title {



    margin: 0 0 12px;



    font-size: 1.2rem;



    color: #1f2937;



}



.ml-section-subtitle {



    margin: 0 0 12px;



    font-size: 1.05rem;



    color: #1f2937;



}



.ml-keypoints__list {



    list-style: none;



    padding: 0;



    margin: 0;



    display: grid;



    gap: 10px;



}



.ml-keypoints__list li {



    display: flex;



    gap: 10px;



    align-items: flex-start;



    color: #374151;



}



.ml-keypoints__list i {



    color: #22c55e;



    margin-top: 3px;



}



.ml-info-card {



    border: 1px solid #e2e8f0;



    border-radius: 16px;



    padding: 20px 24px;



    background: #ffffff;



    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);



}



.ml-info-card__content {



    color: #1f2937;



    line-height: 1.65;



}



.ml-info-card__list {

    list-style: none;


    padding: 0;



    margin: 0;



    display: flex;



    flex-direction: column;



    gap: 10px;



    color: #4b5563;

}

.ml-description-blocks {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 12px;

}

.ml-description-blocks__item {

    border: 1px solid #e2e8f0;

    background: #f8fafc;

    border-radius: 12px;

    padding: 12px 14px;

    display: grid;

    gap: 7px;

}

.ml-description-blocks__type {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding: 4px 10px;

    border-radius: 999px;

    background: #e2e8f0;

    color: #1e293b;

    font-size: 0.78rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}

.ml-description-blocks__text {

    margin: 0;

    color: #334155;

    line-height: 1.5;

}

.ml-buybox__card {


    border: 1px solid #e0e7ff;



    border-radius: 18px;



    padding: 24px;



    background: #f8fafc;



    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);



    display: flex;



    flex-direction: column;



    gap: 18px;



}



.ml-buybox__price {



    display: flex;



    flex-direction: column;



    gap: 6px;



    color: #64748b;



}



.ml-price {

    font-size: clamp(2rem, 2.6vw, 2.8rem);

    font-weight: 700;

    color: #111827;

}

.ml-buybox__price--discounted {

    gap: 8px;

}

.ml-promo-head {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    align-items: center;

}

.ml-promo-badge {

    display: inline-flex;

    align-items: center;

    padding: 5px 11px;

    border-radius: 999px;

    border: 1px solid #fcd34d;

    background: #fffbeb;

    color: #92400e;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-transform: uppercase;

}

.ml-promo-badge--flash {

    background: linear-gradient(135deg, #fff4d4, #ff9f1c);

    border-color: #fb923c;

    color: #7c2d12;

    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.24), 0 8px 20px -14px rgba(194, 65, 12, 0.55);

    animation: mbxFlashPulse 1.25s ease-in-out infinite;

}

.ml-promo-countdown {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 5px 11px;

    border-radius: 999px;

    border: 1px solid #fed7aa;

    background: #fff7ed;

    color: #7c2d12;

    font-size: 0.75rem;

    font-weight: 700;

}

.ml-price-old {

    font-size: 1.1rem;

    color: #94a3b8;

    text-decoration: line-through;

    text-decoration-thickness: 1.5px;

}

.ml-price--discount {

    color: #b42318;

}

.ml-price-saving {

    margin: 0;

    color: #b45309;

    font-size: 0.9rem;

    font-weight: 700;

}


.ml-buybox__status {



    display: flex;



}



.ml-status {



    display: inline-flex;



    align-items: center;



    padding: 6px 14px;



    border-radius: 999px;



    font-size: 0.8rem;



    font-weight: 600;



    text-transform: uppercase;



}



.ml-status--available {



    background: rgba(34, 197, 94, 0.12);



    color: #15803d;



}



.ml-status--warning {



    background: rgba(250, 204, 21, 0.18);



    color: #b45309;



}



.ml-buybox__buttons {



    display: flex;



    flex-direction: column;



    gap: 10px;



}



.ml-button {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    padding: 12px 18px;



    border-radius: 999px;



    text-decoration: none;



    font-weight: 600;



    transition: transform 0.2s ease, box-shadow 0.2s ease;



}



.ml-button--primary {



    background: #1779f2;



    color: #ffffff;



    box-shadow: 0 12px 32px rgba(23, 121, 242, 0.3);



}



.ml-button--primary:hover {



    transform: translateY(-1px);



}



.ml-button--ghost {



    background: #ffffff;



    color: #1779f2;



    border: 1px solid #dbeafe;



}



.ml-button--accent {



    background: #ff9f1c;



    color: #1f1f1f;



    box-shadow: 0 12px 30px rgba(255, 159, 28, 0.28);



}



.ml-buybox__share {



    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 10px;



    padding: 10px 14px;



    border-radius: 12px;



    background: #22c55e;



    color: #ffffff;



    text-decoration: none;



    font-weight: 600;



    font-size: 0.95rem;



}



.ml-buybox__details {



    display: grid;



    gap: 12px;



    color: #475569;



    font-size: 0.93rem;



}



.ml-buybox__details h4 {



    margin: 0 0 4px;



    color: #1f2937;



    font-size: 0.95rem;



}



.ml-buybox__seller {



    border-top: 1px solid #e2e8f0;



    padding-top: 16px;



    display: flex;



    flex-direction: column;



    gap: 6px;



}



.ml-buybox__seller-header {



    display: flex;



    justify-content: space-between;



    color: #1f2937;



}



.ml-seller-name {



    font-weight: 600;



}



.ml-buybox__seller-link {



    color: #1779f2;



    text-decoration: none;



    font-weight: 500;



}



.ml-publish-cta {



    border: 1px solid #e5e7eb;



    border-radius: 18px;



    background: #ffffff;



    padding: 24px;



    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);



}



.ml-publish-cta__content {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 24px;



    flex-wrap: wrap;



}



.ml-publish-cta__content h3 {



    margin: 0;



    color: #1f2937;



    font-size: 1.4rem;



}



.ml-publish-cta__content p {



    margin: 6px 0 0;



    color: #6b7280;



}



.ml-comments-wrapper {



    max-width: 1180px;



    margin: 40px auto 80px;



}



@media (max-width: 1200px) {



    .ml-layout {

      grid-template-columns: 1fr;

      grid-template-areas:

          "gallery"

          "buybox"

          "info";

  }



}



@media (max-width: 992px) {



    .ml-layout {



        grid-template-columns: 1fr;



    }





    .ml-gallery {



        grid-template-columns: 1fr;



    }





    .ml-gallery__thumbs {



        flex-direction: row;



        flex-wrap: wrap;



        justify-content: center;



    }



}



@media (max-width: 768px) {



    .ml-product-page {



        padding: 24px;



    }





    .ml-gallery__stage {



        min-height: 320px;



    }



}



@media (max-width: 640px) {



    .ml-product-wrapper {



        padding: 24px 0 40px;



    }





    .ml-product-page {



        padding: 20px;



    }





    .ml-publish-cta__content {



        flex-direction: column;



        align-items: flex-start;



    }



}


/* ===== Review Lab 3.0 ===== */
.social-comments {
  --review-bg: #f8fafd;
  --review-card: #ffffff;
  --review-ink: #111827;
  --review-muted: #607086;
  --review-stroke: #d8e1ec;
  --review-navy: #2f4a63;
  --review-accent: #d9a441;
  --review-accent-strong: #c18a2b;
  --review-success: #0f9f4a;
  --review-danger: #dc2626;
  --review-font: "Space Grotesk", "Trebuchet MS", "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #fbfdff 0%, var(--review-bg) 100%);
  border: 1px solid var(--review-stroke);
  border-radius: 22px;
  box-shadow: 0 10px 24px rgba(18, 34, 53, 0.08);
  font-family: var(--review-font);
  max-width: 1060px;
  overflow: hidden;
  padding: 28px;
  position: relative;
}

.social-comments::before {
  content: none;
}

.social-comments::after {
  content: none;
}

.social-comments > * {
  position: relative;
  z-index: 1;
}

.social-comments__header {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.social-comments__identity {
  display: grid;
  gap: 9px;
}

.social-comments__brand {
  background: #eef3f8;
  border: 1px solid #d6e0ea;
  border-radius: 999px;
  color: #3b4b5f;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  text-transform: uppercase;
  width: fit-content;
}

.social-comments__title {
  color: var(--review-ink);
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  letter-spacing: -0.02em;
  margin: 0;
}

.social-comments__subtitle {
  color: var(--review-muted);
  font-size: 0.95rem;
  margin: 5px 0 0;
  max-width: 560px;
}

.social-comments__stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(104px, 1fr));
  min-width: 336px;
}

.social-comments__stat {
  background: #ffffff;
  border: 1px solid var(--review-stroke);
  border-radius: 14px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  text-align: center;
}

.social-comments__stat strong {
  color: var(--review-ink);
  font-size: 1.26rem;
  font-weight: 700;
}

.social-comments__stat span {
  color: var(--review-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.social-comments__breakdown {
  background: var(--review-card);
  border: 1px solid var(--review-stroke);
  border-radius: 16px;
  box-shadow: none;
  margin-bottom: 12px;
  padding: 14px;
}

.social-breakdown__row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 92px 1fr 34px;
}

.social-breakdown__row + .social-breakdown__row {
  margin-top: 8px;
}

.social-breakdown__label {
  color: #324156;
  font-size: 0.8rem;
  font-weight: 600;
}

.social-breakdown__bar {
  background: #e8edf4;
  border-radius: 999px;
  height: 9px;
  overflow: hidden;
}

.social-breakdown__bar > span {
  background: linear-gradient(90deg, #e2bd79, #cc9b53);
  border-radius: inherit;
  box-shadow: none;
  display: block;
  height: 100%;
}

.social-breakdown__value {
  color: #324156;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
}

.social-comments__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.social-comments__trust span {
  align-items: center;
  background: #f2f6fa;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  color: #4a5b70;
  display: inline-flex;
  font-size: 0.77rem;
  font-weight: 600;
  gap: 7px;
  padding: 6px 12px;
}

.social-comments__trust i {
  color: #8fa0b3;
  font-size: 0.74rem;
}

.social-comments__toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 220px 220px;
  margin-bottom: 14px;
}

.social-toolbar__field {
  align-items: center;
  background: #ffffff;
  border: 1px solid #cfd9e5;
  border-radius: 12px;
  box-shadow: none;
  display: flex;
  gap: 8px;
  padding: 0 12px;
}

.social-toolbar__field i {
  color: #64748b;
  font-size: 0.86rem;
}

.social-toolbar__field input,
.social-toolbar__select {
  background: transparent;
  border: none;
  color: var(--review-ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  height: 42px;
  outline: none;
  width: 100%;
}

.social-toolbar__select {
  background: #ffffff;
  border: 1px solid #cfd9e5;
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  padding: 0 12px;
}

.social-comment-compose {
  background: #ffffff;
  border: 1px solid var(--review-stroke);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(18, 34, 53, 0.06);
  margin-bottom: 18px;
  padding: 18px;
}

.social-comment-compose__layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 200px 1fr;
}

.social-compose__persona {
  align-items: flex-start;
  background: #f7faff;
  border: 1px solid #dce4ee;
  border-radius: 16px;
  color: #42566d;
  display: grid;
  gap: 10px;
  padding: 16px 14px;
}

.social-compose__persona-meta {
  display: grid;
  gap: 5px;
}

.social-compose__persona-meta strong {
  color: #203247;
  font-size: 1rem;
  font-weight: 700;
}

.social-compose__persona-meta span {
  color: #66788f;
  font-size: 0.82rem;
  line-height: 1.35;
}

.social-avatar {
  align-items: center;
  background: #eaf1f8;
  border: 1px solid #c8d5e3;
  border-radius: 999px;
  color: #2f4a64;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
}

.social-avatar--xl {
  font-size: 1.2rem;
  height: 58px;
  width: 58px;
}

.social-avatar--sm {
  flex: 0 0 auto;
  font-size: 0.92rem;
  height: 38px;
  width: 38px;
}

.social-compose__editor {
  display: grid;
  gap: 10px;
}

.social-comment-compose__head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}

.social-comment-compose__head h3 {
  color: var(--review-ink);
  font-size: 1rem;
  margin: 0;
}

.social-comment-compose__head p {
  color: var(--review-muted);
  font-size: 0.84rem;
  margin: 3px 0 0;
}

.social-comments .comentario__formulario textarea {
  background: #ffffff;
  border: 1px solid #cad5e4;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--review-ink);
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.5;
  margin-bottom: 0;
  min-height: 120px;
  padding: 12px 13px;
  resize: vertical;
}

.social-comments .comentario__formulario textarea:focus,
.social-toolbar__field input:focus,
.social-toolbar__select:focus,
.social-reply-form textarea:focus {
  border-color: #a6b8cc;
  box-shadow: 0 0 0 2px rgba(132, 151, 173, 0.18);
  outline: none;
}

.social-compose__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.social-compose__hints span {
  align-items: center;
  background: #f6f9fc;
  border: 1px solid #dde6f0;
  border-radius: 999px;
  color: #516377;
  display: inline-flex;
  font-size: 0.76rem;
  gap: 6px;
  padding: 5px 10px;
}

.social-compose__hints i {
  color: #93a4b8;
}

.social-compose__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.social-compose__rating {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.social-compose__rating > label {
  color: #33465d;
  font-size: 0.86rem;
  font-weight: 600;
}

.social-compose__rating .estrellas__rating[data-input-stars] {
  display: flex;
  flex-direction: row-reverse;
  gap: 3px;
}

.social-compose__rating .estrellas__rating[data-input-stars] label {
  background: transparent;
  border: 1px solid #d7e1ec;
  border-radius: 8px;
  line-height: 1;
  padding: 4px;
}

.social-compose__rating .estrellas__rating[data-input-stars] label i {
  color: #b1bfce;
  font-size: 1rem;
}

.social-compose__rating .estrellas__rating[data-input-stars] label.is-active {
  background: #f6f8fb;
  border-color: #c8d6e4;
}

.social-compose__rating .estrellas__rating[data-input-stars] label.is-active i {
  color: #c89843;
}

.social-rating-label {
  color: #607087;
  font-size: 0.82rem;
  font-weight: 600;
}

.social-compose__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.social-btn-primary,
.social-btn-secondary,
.social-comments .btn__publicar-comentario {
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 9px 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.social-comments .btn__publicar-comentario {
  background: #1c7e4b;
  border: none;
  box-shadow: none;
}

.social-comments .btn__publicar-comentario:hover {
  background: #17673e;
  transform: none;
}

.social-btn-secondary {
  background: #ffffff;
  border: 1px solid #c7d2e1;
  color: #33475f;
  cursor: pointer;
}

.social-btn-primary {
  background: #35526e;
  border: 1px solid #2f4a63;
  color: #ffffff;
  cursor: pointer;
}

.social-btn-primary:hover {
  box-shadow: 0 4px 10px rgba(34, 56, 79, 0.2);
}

.social-btn-secondary:hover {
  background: #f5f8fc;
}

.social-comments .comentarios__lista {
  border-left: 1px dashed #d9e2ec;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 0;
  padding-left: 12px;
}

.social-comment-card {
  background: var(--review-card);
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(18, 34, 53, 0.06);
  margin-bottom: 0;
  padding: 13px 14px;
  position: relative;
}

.social-comment-card::before {
  background: linear-gradient(180deg, rgba(118, 138, 160, 0.35), rgba(118, 138, 160, 0));
  border-radius: 999px;
  content: "";
  height: calc(100% - 18px);
  left: -8px;
  position: absolute;
  top: 9px;
  width: 3px;
}

.social-comment-card[data-rating="5"]::before,
.social-comment-card[data-rating="4"]::before {
  background: linear-gradient(180deg, rgba(91, 153, 116, 0.42), rgba(91, 153, 116, 0));
}

.social-comment-card[data-rating="2"]::before,
.social-comment-card[data-rating="1"]::before {
  background: linear-gradient(180deg, rgba(190, 111, 111, 0.4), rgba(190, 111, 111, 0));
}

.social-comment-card__top {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.social-comment-card__meta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.social-comment-card__meta a {
  color: #1f3852;
  font-weight: 700;
  text-decoration: none;
}

.social-comment-card__meta a:hover {
  text-decoration: underline;
}

.social-comment-card__meta > span {
  color: var(--review-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.social-comment-card__rating-wrap {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.social-stars-view {
  display: inline-flex;
  flex-direction: row;
  gap: 3px;
}

.social-stars-view i {
  color: #ced8e4;
  font-size: 0.84rem;
}

.social-stars-view i.activo {
  color: #c6943a;
}

.social-rating-pill {
  background: #f5f7fa;
  border: 1px solid #d8e1eb;
  border-radius: 999px;
  color: #5f6f83;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
}

.social-comment-card__body {
  margin-left: 48px;
}

.social-comment-card__text {
  color: #1a2b41;
  font-size: 0.92rem;
  line-height: 1.58;
  margin: 10px 0 5px;
  white-space: pre-wrap;
  word-break: break-word;
}

.social-comment-card__text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.social-comment-card__expand {
  margin-bottom: 5px;
  margin-left: -4px;
}

.social-comment-card__actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.social-comment-card__action-left {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.social-btn-link {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: #35506b;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 7px;
  transition: background 0.2s ease, color 0.2s ease;
}

.social-btn-link i {
  margin-right: 4px;
}

.social-btn-link:hover,
.social-btn-link.is-active {
  background: rgba(66, 84, 106, 0.12);
  color: #21364c;
}

.social-btn-link--danger {
  color: var(--review-danger);
}

.social-replies-count {
  color: var(--review-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.social-comments .comentario__eliminar {
  align-items: center;
  background: #ffe7e7;
  border-radius: 999px;
  color: #b91c1c;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  height: 24px;
  justify-content: center;
  min-width: 24px;
  padding: 0;
}

.social-replies {
  border-left: 2px solid #d4e0ef;
  margin-left: 6px;
  margin-top: 10px;
  padding-left: 12px;
}

.social-reply-item {
  background: #f8fbff;
  border: 1px solid #d6e0ef;
  border-radius: 11px;
  padding: 8px 10px;
}

.social-reply-item + .social-reply-item {
  margin-top: 8px;
}

.social-reply-item__meta {
  align-items: center;
  color: #596a81;
  display: flex;
  font-size: 0.77rem;
  gap: 8px;
  justify-content: space-between;
}

.social-reply-item__meta a {
  color: #1e4f7a;
  text-decoration: none;
}

.social-reply-item__meta a:hover {
  text-decoration: underline;
}

.social-reply-item__text {
  color: #1c2d45;
  font-size: 0.88rem;
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.social-reply-form {
  background: #f6faff;
  border: 1px solid #d2deee;
  border-radius: 12px;
  margin-top: 10px;
  padding: 10px;
}

.social-reply-form textarea {
  background: #ffffff;
  border: 1px solid #c8d5e6;
  border-radius: 10px;
  font-family: inherit;
  min-height: 74px;
  padding: 9px 10px;
  resize: vertical;
  width: 100%;
}

.social-reply-form__footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.social-reply-form__actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.social-counter {
  color: #5f6f86;
  font-size: 0.78rem;
  font-weight: 600;
}

.social-counter.is-limit {
  color: var(--review-danger);
}

.social-comments .comentarios__empty {
  background: #ffffff;
  border: 1px dashed #c6d4e6;
  border-radius: 12px;
  color: #4f6077;
  font-size: 0.9rem;
  padding: 14px;
  text-align: center;
}

.social-comments .is-hidden {
  display: none !important;
}

.social-comments,
.social-comment-compose,
.social-comment-card {
  animation: reviewFadeUp 0.45s ease both;
}

@keyframes reviewFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .social-comments {
    padding: 20px;
  }

  .social-comments__header {
    flex-direction: column;
  }

  .social-comments__stats {
    min-width: 100%;
  }

  .social-comments__toolbar {
    grid-template-columns: 1fr;
  }

  .social-comment-compose__layout {
    grid-template-columns: 1fr;
  }

  .social-compose__persona {
    grid-template-columns: 56px 1fr;
  }
}

@media (max-width: 720px) {
  .social-comments {
    border-radius: 18px;
    margin: 28px auto 70px;
    padding: 15px;
  }

  .social-comments__stat strong {
    font-size: 1.12rem;
  }

  .social-breakdown__row {
    grid-template-columns: 78px 1fr 24px;
  }

  .social-comment-card {
    padding: 11px 11px;
  }

  .social-comment-card__body {
    margin-left: 0;
  }

  .social-comment-card__top {
    flex-wrap: wrap;
  }

  .social-comment-card__actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .social-reply-form__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .social-compose__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}

/* ===== Detalle producto warm conversion refresh ===== */
.ml-product-wrapper {
  background:
    radial-gradient(1200px 280px at 12% -8%, rgba(251, 191, 36, 0.2), transparent 62%),
    radial-gradient(1200px 340px at 88% -12%, rgba(251, 146, 60, 0.17), transparent 58%),
    #fff6ef;
}

.ml-product-page {
  border: 1px solid #ffe2c7;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
  box-shadow: 0 20px 42px rgba(217, 119, 6, 0.11);
}

.ml-layout {
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(332px, 376px);
}

.ml-gallery {
  --thumb-column: 92px;
  position: relative;
  gap: 15px;
  grid-template-columns: var(--thumb-column) minmax(0, 1fr);
}

.ml-gallery__thumbs {
  max-height: clamp(320px, 60vh, 520px);
  overflow-y: auto;
  align-content: flex-start;
}

.ml-gallery__thumb {
  border-color: #ffe4cf;
  background: #fff8f1;
}

.ml-gallery__thumb.is-active {
  border-color: #fb923c;
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.2);
}

.ml-gallery__stage {
  min-height: clamp(290px, 57vh, 520px);
  height: clamp(290px, 57vh, 520px);
  border-color: #ffe3c6;
  background: linear-gradient(180deg, #fffdf9 0%, #fff5e9 100%);
}

.ml-gallery__item img,
.ml-gallery__item video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ml-gallery__video {
  background: #0f1115;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.24);
}

.ml-gallery__video.is-landscape {
  max-width: 100%;
  max-height: min(54vh, 470px);
}

.ml-gallery__video.is-portrait {
  max-width: min(44vh, 100%);
  max-height: min(62vh, 520px);
}

.ml-gallery__video.is-square {
  max-width: min(56vh, 100%);
  max-height: min(58vh, 500px);
}

.ml-zoom-pane {
  position: absolute;
  top: 16px;
  left: calc(var(--thumb-column) + 16px);
  width: 176px;
  height: 176px;
  margin-top: 0;
  border: 2px solid #fb923c;
  background-size: 220% auto;
  background-color: #fffaf6;
  box-shadow: 0 12px 32px rgba(124, 45, 18, 0.2);
  z-index: 12;
  pointer-events: none;
}

.ml-title {
  color: #1f2a37;
}

.ml-info__meta {
  color: #5b6578;
}

.ml-fomo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -2px;
}

.ml-fomo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid #ffd7b5;
  background: #fff6ea;
  color: #9a3412;
  font-size: 0.79rem;
  font-weight: 700;
  padding: 6px 12px;
}

.ml-fomo-pill i {
  color: #f97316;
}

.ml-fomo-pill--stock {
  border-color: #fdba74;
  background: #fff0de;
}

.ml-fomo-pill--clock {
  border-color: #fb923c;
  background: linear-gradient(135deg, #fff5e8, #ffe7cc);
  animation: mlClockPulse 1.25s ease-in-out infinite;
}

@keyframes mlClockPulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.03);
  }
}

.ml-keypoints__list li {
  background: #fff8ef;
  border: 1px solid #ffe3c7;
  border-radius: 12px;
  padding: 10px 12px;
}

.ml-info-card {
  border-color: #ffe2c8;
  background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%);
  box-shadow: 0 12px 26px rgba(217, 119, 6, 0.08);
}

.ml-description-blocks__item {
  background: #fff7ed;
  border-color: #ffdcbc;
}

.ml-buybox__card {
  border-color: #ffd6b3;
  background: linear-gradient(180deg, #ffffff 0%, #fff8ee 100%);
  box-shadow: 0 20px 36px rgba(217, 119, 6, 0.14);
  position: sticky;
  top: 16px;
}

.ml-buybox__price {
  color: #6b7280;
}

.ml-price {
  color: #111827;
}

.ml-price--discount {
  color: #b45309;
}

.ml-price-saving {
  font-size: 0.92rem;
  font-weight: 700;
  color: #c2410c;
}

.ml-buybox__status {
  margin-top: -4px;
}

.ml-status {
  font-weight: 700;
}

.ml-urgencia-plus-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid #fdba74;
  background: linear-gradient(135deg, #fff5e7, #ffe5c7);
  box-shadow: 0 10px 22px rgba(249, 115, 22, 0.17);
}

.ml-urgencia-plus-card__head {
  display: grid;
  gap: 6px;
  color: #7c2d12;
}

.ml-urgencia-plus-card__head strong {
  font-size: 0.95rem;
  line-height: 1.3;
}

.ml-urgencia-plus-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #f97316;
  background: #ffffff;
  color: #c2410c;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ml-urgencia-plus-card__list,
.ml-decision-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ml-urgencia-plus-card__list li,
.ml-decision-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #7c2d12;
  font-size: 0.88rem;
  line-height: 1.35;
}

.ml-urgencia-plus-card__list i,
.ml-decision-card__list i {
  color: #ea580c;
  margin-top: 2px;
}

.ml-decision-card {
  border-radius: 14px;
  border: 1px solid #fed7aa;
  background: #fffaf3;
  padding: 13px 14px;
  display: grid;
  gap: 10px;
}

.ml-decision-card h3 {
  margin: 0;
  font-size: 0.94rem;
  color: #7c2d12;
}

.ml-buybox__buttons {
  gap: 9px;
}

.ml-button {
  font-weight: 700;
}

.ml-button--primary {
  background: linear-gradient(135deg, #ff8f1f, #f97316);
  box-shadow: 0 14px 26px rgba(249, 115, 22, 0.3);
}

.ml-button--accent {
  background: linear-gradient(135deg, #ffd18f, #ffb85e);
  color: #7c2d12;
  box-shadow: 0 10px 22px rgba(251, 146, 60, 0.24);
}

.ml-button--ghost {
  border-color: #ffcf9c;
  background: #ffffff;
  color: #9a3412;
}

.ml-buybox__microcopy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px dashed #fbbf24;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.83rem;
  font-weight: 600;
  padding: 10px 12px;
}

.ml-buybox__microcopy i {
  color: #d97706;
}

.ml-buybox__service-cta {
  display: grid;
  gap: 10px;
  border-radius: 14px;
  border: 1px solid #fed7aa;
  background: #fff8ef;
  padding: 12px;
}

.ml-buybox__service-cta h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #9a3412;
}

.ml-buybox__service-cta-buttons {
  display: grid;
  gap: 8px;
}

.ml-buybox__service-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #475569;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 10px 12px;
}

.ml-buybox__service-note i {
  margin-top: 2px;
}

.ml-buybox__service-note--ia {
  border-color: #c4b5fd;
  background: #f8f5ff;
  color: #5b21b6;
}

.ml-buybox__service-note--ia i {
  color: #7c3aed;
}

.ml-button--service {
  border-radius: 12px;
  padding: 10px 12px;
  justify-content: flex-start;
  font-size: 0.84rem;
  line-height: 1.2;
  border: 1px solid #fdba74;
  background: #ffffff;
  color: #9a3412;
  box-shadow: 0 8px 18px rgba(251, 146, 60, 0.12);
}

.ml-button--service:hover {
  transform: translateY(-1px);
}

.ml-button--service i {
  color: #ea580c;
}

.ml-button--service-ia {
  border-color: #c4b5fd;
  background: #f8f5ff;
  color: #5b21b6;
}

.ml-button--service-ia i {
  color: #7c3aed;
}

.ml-button--service-flash {
  border-color: #f59e0b;
  background: #fff7e6;
  color: #9a3412;
}

.ml-button--service-call {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.ml-button--service-call i {
  color: #16a34a;
}

.ml-buybox__share {
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(34, 197, 94, 0.24);
}

@media (max-width: 1200px) {
  .ml-layout {
    grid-template-columns: 1fr;
  }

  .ml-buybox__card {
    position: static;
  }

  .ml-gallery {
    --thumb-column: 84px;
  }

  .ml-gallery__stage {
    min-height: clamp(270px, 52vh, 470px);
    height: clamp(270px, 52vh, 470px);
  }

  .ml-zoom-pane {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .ml-gallery {
    grid-template-columns: 1fr;
  }

  .ml-gallery__thumbs {
    order: 2;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    justify-content: flex-start;
  }

  .ml-gallery__thumb {
    min-width: 76px;
    min-height: 76px;
  }

  .ml-gallery__stage {
    order: 1;
    min-height: min(50vh, 430px);
    height: min(50vh, 430px);
  }

  .ml-fomo-strip {
    gap: 7px;
  }

  .ml-fomo-pill {
    font-size: 0.76rem;
    padding: 6px 10px;
  }
}

@media (max-width: 640px) {
  .ml-product-wrapper {
    padding: 18px 0 36px;
  }

  .ml-product-page {
    padding: 16px;
    border-radius: 14px;
  }

  .ml-title {
    font-size: clamp(1.45rem, 7vw, 1.95rem);
  }

  .ml-gallery__stage {
    min-height: min(44vh, 360px);
    height: min(44vh, 360px);
  }

  .ml-gallery__video.is-portrait {
    max-width: min(72vw, 100%);
    max-height: min(42vh, 340px);
  }

  .ml-decision-card,
  .ml-urgencia-plus-card {
    padding: 12px;
  }

  .ml-buybox__service-cta {
    padding: 10px;
  }

  .ml-button--service {
    font-size: 0.82rem;
    padding: 9px 10px;
  }
}

/* ===== Zoom (detalle producto) ===== */
.ml-gallery {
  position: relative;
}

.ml-gallery__stage {
  position: relative;
}

.ml-gallery__tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 14;
}

.ml-gallery__zoom-action {
  border: 1px solid #fdba74;
  background: linear-gradient(135deg, #fff4e6, #ffe8ca);
  color: #9a3412;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.2);
}

.ml-gallery__zoom-action:hover {
  transform: translateY(-1px);
}

.ml-gallery__zoom-action i {
  color: #ea580c;
}

.ml-zoom-lightbox[hidden] {
  display: none !important;
}

.ml-zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1210;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ml-zoom-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 31, 0.74);
  backdrop-filter: blur(2px);
}

.ml-zoom-lightbox__dialog {
  position: relative;
  z-index: 2;
  width: min(1120px, 95vw);
  height: min(88vh, 900px);
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 143, 0.55);
  background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
  padding: 16px 16px 12px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.ml-zoom-lightbox__close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.ml-zoom-lightbox__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: stretch;
  padding-right: 40px;
}

.ml-zoom-lightbox__scale {
  min-width: 58px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #9a3412;
}

.ml-zoom-lightbox__range-wrap {
  flex: 1;
  display: inline-flex;
  align-items: center;
}

.ml-zoom-lightbox__range {
  width: 100%;
  accent-color: #ea580c;
}

.ml-zoom-lightbox__range::-webkit-slider-runnable-track {
  height: 5px;
}

.ml-zoom-lightbox__range::-webkit-slider-thumb {
  margin-top: -5px;
}

.ml-zoom-lightbox__btn {
  border: 1px solid #fdba74;
  background: #ffffff;
  color: #9a3412;
  border-radius: 10px;
  min-width: 96px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.ml-zoom-lightbox__stage {
  border-radius: 12px;
  border: 1px solid #ffe0c3;
  background: #fffefb;
  overflow: auto;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: grab;
  overscroll-behavior: contain;
}

.ml-zoom-lightbox__stage.is-dragging {
  cursor: grabbing;
}

.ml-zoom-lightbox__stage img {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 900px) {
  .ml-gallery__tools {
    top: 10px;
    right: 10px;
  }

  .ml-gallery__zoom-action {
    font-size: 0.74rem;
    padding: 7px 10px;
  }

  .ml-zoom-lightbox__toolbar {
    gap: 8px;
    padding-right: 34px;
  }

  .ml-zoom-lightbox__btn {
    min-width: 88px;
    height: 34px;
    font-size: 0.78rem;
  }

  .ml-zoom-lightbox__dialog {
    width: min(100vw, 100vw);
    height: min(100vh, 100vh);
    border-radius: 0;
    padding: 12px 12px 10px;
  }

  .ml-zoom-lightbox__stage img {
    max-height: none;
  }
}