/* ==========================================================================
   Product Media Carousel — construido sobre Swiper.js

   Se renderizan DOS bloques de markup independientes (uno para desktop,
   uno para mobile) y la visibilidad se controla 100% por CSS (un <style>
   inline con @media según el breakpoint elegido en el widget). Así el
   modo mobile (Swiper real) nunca depende del mismo DOM/instancia que el
   stack de desktop, y un cambio en uno no puede desajustar al otro.

   Desktop (.pmc-desktop-stack): sin carousel — imágenes y videos uno
   debajo del otro (flex-direction: column), 100% de ancho cada uno.

   Mobile (.pmc-mobile-carousel): Swiper real (loop, swipe, flechas,
   dots), contenedor de altura fija 50vh. Las imágenes cubren todo el
   alto (object-fit: cover); los videos mantienen su proporción
   (object-fit: contain) y quedan centrados dentro del 50vh si son más
   chicos que el contenedor.
   ========================================================================== */

.pmc-wrapper {
    position: relative;
    width: 100%;
    margin: 0 auto;
    --pmc-arrow-color: #1a1a1a;
}

.pmc-media {
    display: block;
    width: 100%;
}

.pmc-media-embed {
    position: relative;
    width: 100%;
}

.pmc-media-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   DESKTOP — stack vertical simple
   ========================================================================== */
.pmc-desktop-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pmc-desktop-item {
    width: 100%;
}

.pmc-desktop-item .pmc-media {
    height: auto;
}

.pmc-desktop-item .pmc-media-embed {
    aspect-ratio: 16 / 9;
}

/* ==========================================================================
   MOBILE — Swiper real, contenedor fijo 50vh
   ========================================================================== */
.pmc-mobile-carousel {
    width: 100%;
}

.pmc-mobile-carousel .pmc-swiper {
    width: 100%;
    height: 50vh;
}

.pmc-mobile-carousel .swiper-slide {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pmc-mobile-carousel .pmc-media {
    height: 100%;
}

.pmc-mobile-carousel .pmc-media-image {
    object-fit: cover;
}

.pmc-mobile-carousel .pmc-media-video {
    object-fit: contain;
}

.pmc-mobile-carousel .pmc-media-embed {
    height: 100%;
}

/* ==========================================================================
   Flechas — estilo minimal: sin fondo, sin sombra, ícono fino y oscuro,
   apoyado sobre la imagen. Reemplazamos los estilos default de Swiper
   (que traen "::after" con flechas propias) por nuestro SVG.
   ========================================================================== */
.pmc-arrow {
    --swiper-navigation-size: 0px; /* anula el ícono default de Swiper */
    width: 28px;
    height: 28px;
    margin-top: -14px;
    color: var(--pmc-arrow-color);
}

.pmc-arrow::after {
    content: '' !important;
}

.pmc-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pmc-arrow:hover {
    opacity: 0.65;
}

.pmc-arrow.swiper-button-disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}

.pmc-arrow-prev {
    left: 16px;
}

.pmc-arrow-next {
    right: 16px;
}

/* Dots — overlay absoluto sobre la imagen/video: el contenedor mobile
   tiene alto fijo (50vh) y overflow:hidden (propio de Swiper), así que
   si los dots fueran parte del flujo normal quedarían recortados. */
.pmc-pagination.swiper-pagination-bullets {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

.pmc-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 !important;
    background: #d4d4d4;
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pmc-pagination .swiper-pagination-bullet-active {
    background: #111111;
    transform: scale(1.25);
}