/* ============================================================
   CCM Product Gallery — ccmg-gallery.css
   Diseño basado en Figma: CCM web design 2026 · desktop 608:5376 / mobile 610:5407
   Especificidad mínima (0,2,0): .ccmg-gallery .ccmg-gallery__*
   ============================================================ */

/* ============================================================
   VARIABLES — tokens del diseño Figma
   ============================================================ */
.ccmg-gallery {
    --ccmg-red:            #E60000;          /* rgba(0.902, 0, 0, 1) */
    --ccmg-border-light:   rgba(0,0,0,0.10);
    --ccmg-border-thumb:   rgba(0,0,0,0.10);
    --ccmg-overlay:        rgba(0,0,0,0.85);
    --ccmg-media-overlay:  rgba(0,0,0,0.04);
    --ccmg-card-accent-hot:#ff3b00;
    --ccmg-card-sold-out-bg:#191919;
    --ccmg-card-font:      "Founder grotesk CCM", "Founders Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ccmg-radius-main:    24px;
    --ccmg-radius-thumb:   12px;
    --ccmg-thumb-padding:  4px;
    --ccmg-radius-nav:     100px;
    --ccmg-action-size:    39px;
    --ccmg-action-gap:     12px;
    --ccmg-action-offset:  16px;
    --ccmg-action-shadow:  0 2px 4px rgba(0,0,0,0.15);
    --ccmg-thumbs-rail:    110px;
    --ccmg-gallery-max-inline-size: 960px;
    --ccmg-thumb-w:        94px;
    --ccmg-thumb-h:        95px;
    --ccmg-nav-size:       40px;
    --ccmg-gap:            8px;
    --ccmg-padding-main:   16px;
    --ccmg-split-track-min: 460px;
    --ccmg-split-track-max: 600px;
    --ccmg-zoom-scale:     1.65;
    --ccmg-transition:     0.2s ease;
    --ccmg-scrollbar-size: 6px;
    --ccmg-scrollbar-gap:  4px;
    --ccmg-scrollbar-radius: 999px;
    --ccmg-scrollbar-track: rgba(18,18,18,0.08);
    --ccmg-scrollbar-thumb: rgba(18,18,18,0.22);
    --ccmg-scrollbar-thumb-hover: rgba(18,18,18,0.32);

    /* Root del componente: contenedor de queries, no grid principal */
    display:               block;
    width:                 100%;
    max-inline-size:       min(100%, var(--ccmg-gallery-max-inline-size));
    align-self:            start;
    container-type:        inline-size;
    container-name:        ccmg-gallery;
    box-sizing:            border-box;
}

.ccmg-gallery .ccmg-gallery__layout {
    --ccmg-split-track-size: clamp(var(--ccmg-split-track-min), 62vh, var(--ccmg-split-track-max));

    display:               grid;
    grid-template-columns: var(--ccmg-thumbs-rail) minmax(0, 1fr);
    gap:                   var(--ccmg-gap);
    width:                 100%;
    min-inline-size:       0;
    align-items:           start;
}

@supports (width: 1cqi) {
    .ccmg-gallery .ccmg-gallery__layout {
        --ccmg-split-track-size: clamp(
            var(--ccmg-split-track-min),
            calc(100cqi - var(--ccmg-thumbs-rail) - var(--ccmg-gap)),
            var(--ccmg-split-track-max)
        );
    }
}

/* Reset box-model interno */
.ccmg-gallery *,
.ccmg-gallery *::before,
.ccmg-gallery *::after {
    box-sizing: border-box;
}

/* ============================================================
   MINIATURAS — columna izquierda
   ============================================================ */
.ccmg-gallery .ccmg-gallery__thumbs {
    grid-column:    1;
    grid-row:       1;
    display:        flex;
    flex-direction: column;
    gap:            var(--ccmg-thumb-gap, var(--ccmg-gap));
    overflow-y:     auto;
    overflow-x:     hidden;
    margin:         0;
    padding:        8px;
    list-style:     none;
    min-inline-size: 0;
    min-block-size: 0;
    block-size:     var(--ccmg-split-track-size);
    max-block-size: var(--ccmg-split-track-size);
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

.ccmg-gallery .ccmg-gallery__thumbs[hidden] {
    display: none;
}

.ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar       { width: 0; height: 0; }
.ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb { background: transparent; border-radius: 0; }

.ccmg-gallery .ccmg-gallery__thumb {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    font-family:        inherit;
    text-decoration:    none;
    color:              inherit;
    padding:            var(--ccmg-thumb-padding);
    margin:             0;

    /* Dimensiones Figma */
    flex-shrink:        0;
    position:           relative;
    isolation:          isolate;
    width:              var(--ccmg-thumb-w);
    height:             var(--ccmg-thumb-h);
    border-radius:      var(--ccmg-radius-thumb);
    overflow:           hidden;
    cursor:             pointer;
    background:         #ffffff;

    border:             none;
    box-shadow:         none;
    transition:         box-shadow var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__thumb::after {
    content:          "";
    position:         absolute;
    inset:            0;
    border-radius:    inherit;
    background:       var(--ccmg-media-overlay);
    pointer-events:   none;
    z-index:          1;
}

/* Imagen dentro de miniatura */
.ccmg-gallery .ccmg-gallery__thumb img {
    display:        block !important;
    width:          100% !important;
    height:         100% !important;
    max-width:      none !important;
    max-height:     none !important;
    margin:         0 !important;
    padding:        0 !important;
    object-fit:     contain;
    pointer-events: none;
    border:         none;
    border-radius:  0;
}

/* Estado activo: aro rojo sin usar border sólido */
.ccmg-gallery .ccmg-gallery__thumb.is-active {
    box-shadow: inset 0 0 0 2px var(--ccmg-red);
}

.ccmg-gallery .ccmg-gallery__thumb:hover:not(.is-active) {
    border:     1px solid rgba(0,0,0,0.4);
    box-shadow: none;
}

.ccmg-gallery .ccmg-gallery__thumb:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   IMAGEN PRINCIPAL — columna derecha
   ============================================================ */
.ccmg-gallery .ccmg-gallery__main {
    grid-column:   2;
    grid-row:      1;
    position:      relative;
    isolation:     isolate;
    background:    #ffffff;
    border:        none;
    border-radius: var(--ccmg-radius-main);
    padding:       var(--ccmg-padding-main);
    overflow:      hidden;
    inline-size:   100%;
    min-inline-size: 0;
    block-size:    var(--ccmg-split-track-size);
    aspect-ratio:  1 / 1;
    touch-action:  pan-y pinch-zoom;
    overscroll-behavior-x: contain;
}

.ccmg-gallery .ccmg-gallery__main::after {
    content:        "";
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    background:     var(--ccmg-media-overlay);
    pointer-events: none;
    z-index:        1;
}

.ccmg-gallery .ccmg-card__cat-badge {
    position:       absolute;
    top:            9px;
    left:           6px;
    z-index:        2;
    display:        inline-flex;
    align-items:    center;
    padding:        5px 16px 0;
    border-radius:  100px;
    background:     var(--ccmg-card-sold-out-bg);
    color:          #ffffff;
    font-family:    var(--ccmg-card-font);
    font-size:      14px;
    font-weight:    500;
    line-height:    18px;
    white-space:    nowrap;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ccmg-gallery .ccmg-card__cat-badge--sold-out {
    background: var(--ccmg-card-accent-hot);
}

@media (max-width: 479px) {
    .ccmg-gallery .ccmg-card__cat-badge {
        top:        6px;
        left:       4px;
        font-size:  11px;
        line-height:11px;
        padding:    4px 10px 0;
    }
}

.ccmg-gallery .ccmg-gallery__actions {
    position:       absolute;
    top:            var(--ccmg-action-offset);
    right:          var(--ccmg-action-offset);
    z-index:        4;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            var(--ccmg-action-gap);
}

.ccmg-gallery .ccmg-gallery__share {
    position: relative;
}

.ccmg-gallery .ccmg-gallery__action {
    appearance:         none;
    -webkit-appearance: none;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    width:              var(--ccmg-action-size);
    height:             var(--ccmg-action-size);
    padding:            2px;
    border:             none;
    border-radius:      999px;
    box-shadow:         var(--ccmg-action-shadow);
    text-decoration:    none;
    cursor:             pointer;
    transition:         transform var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition),
                        color var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__action:hover {
    transform:  translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}

.ccmg-gallery .ccmg-gallery__action:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

.ccmg-gallery .ccmg-gallery__action--share {
    background: #ffffff;
    color:      #191919;
}

.ccmg-gallery .ccmg-gallery__action--whatsapp {
    background: #191919;
    color:      #ffffff;
}

.ccmg-gallery .ccmg-gallery__action svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery__share-modal {
    position:        fixed;
    inset:           0;
    z-index:         2147483000;
    display:         grid;
    place-items:     center;
    padding:         16px;
}

.ccmg-gallery__share-modal[hidden] {
    display: none;
}

.ccmg-gallery__share-backdrop {
    appearance:         none;
    -webkit-appearance: none;
    position:           absolute;
    inset:              0;
    border:             none;
    background:         rgba(0,0,0,0.72);
    backdrop-filter:    blur(2px);
    cursor:             pointer;
}

.ccmg-gallery__share-backdrop:hover,
.ccmg-gallery__share-backdrop:focus,
.ccmg-gallery__share-backdrop:focus-visible,
.ccmg-gallery__share-backdrop:active {
    background:       rgba(0,0,0,0.72) !important;
    background-color: rgba(0,0,0,0.72) !important;
    background-image: none !important;
    border:           none !important;
    box-shadow:       none !important;
    filter:           none !important;
    transform:        none !important;
    outline:          none !important;
}

.ccmg-gallery__share-sheet {
    position:        relative;
    z-index:         1;
    width:           min(440px, calc(100vw - 32px));
    max-height:      min(350px, calc(100vh - 32px));
    overflow:        auto;
    padding:         16px 18px 18px;
    border-radius:   20px;
    background:      #232323;
    color:           #ffffff;
    box-shadow:      0 20px 54px rgba(0,0,0,0.36);
    display:         grid;
    gap:             12px;
}

.ccmg-gallery__share-sheet:hover,
.ccmg-gallery__share-sheet:focus,
.ccmg-gallery__share-sheet:focus-within,
.ccmg-gallery__share-sheet:active {
    background:       #232323 !important;
    background-color: #232323 !important;
    background-image: none !important;
    color:            #ffffff;
    box-shadow:       0 20px 54px rgba(0,0,0,0.36);
    outline:          none;
}

.ccmg-gallery__share-header {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    gap:             12px;
}

.ccmg-gallery__share-heading {
    display: grid;
    gap:     4px;
}

.ccmg-gallery__share-title {
    margin:      0;
    font-size:   clamp(17px, 1.5vw, 22px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.ccmg-gallery__share-subtitle {
    margin:      0;
    max-width:   46ch;
    color:       rgba(255,255,255,0.72);
    font-size:   11px;
    line-height: 1.45;
}

.ccmg-gallery__share-close {
    appearance:         none;
    -webkit-appearance: none;
    width:              32px;
    height:             32px;
    padding:            0;
    border:             none;
    border-radius:      999px;
    background:         transparent;
    color:              #ffffff;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    cursor:             pointer;
    transition:         background var(--ccmg-transition),
                        transform var(--ccmg-transition);
}

.ccmg-gallery__share-close:hover {
    background: rgba(255,255,255,0.08);
    transform:  translateY(-1px);
}

.ccmg-gallery__share-close:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-hero {
    display:         grid;
    justify-items:   center;
    gap:             6px;
    padding-bottom:  0;
}

.ccmg-gallery__share-hero-action {
    appearance:         none;
    -webkit-appearance: none;
    min-width:          172px;
    min-height:         44px;
    padding:            8px 14px;
    border:             none;
    border-radius:      999px;
    background:         #f2f2f2;
    color:              #181818;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    gap:                6px;
    font:               inherit;
    font-size:          13px;
    font-weight:        600;
    cursor:             pointer;
    box-shadow:         0 8px 18px rgba(0,0,0,0.18);
    transition:         transform var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition);
}

.ccmg-gallery__share-hero-action:hover {
    transform:  translateY(-1px);
    box-shadow: 0 12px 22px rgba(0,0,0,0.22);
}

.ccmg-gallery__share-hero-action:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-hero-icon {
    width:           24px;
    height:          24px;
    border-radius:   999px;
    background:      #181818;
    color:           #ffffff;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}

.ccmg-gallery__share-hero-meta {
    margin:      0;
    color:       rgba(255,255,255,0.58);
    font-size:   10px;
    line-height: 1.4;
}

.ccmg-gallery__share-section {
    display:     grid;
    gap:         8px;
    padding-top: 10px;
    border-top:  1px solid rgba(255,255,255,0.15);
}

.ccmg-gallery__share-section-title {
    margin:      0;
    font-size:   14px;
    line-height: 1.2;
    font-weight: 500;
}

.ccmg-gallery__share-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap:                   3px;
}

.ccmg-gallery__share-card {
    appearance:         none;
    -webkit-appearance: none;
    min-height:         68px;
    padding:            4px 3px 3px;
    border:             none;
    border-radius:      16px;
    background:         transparent;
    color:              #ffffff;
    display:            grid;
    justify-items:      center;
    align-content:      start;
    gap:                4px;
    font:               inherit;
    text-align:         center;
    cursor:             pointer;
    transition:         background var(--ccmg-transition),
                        transform var(--ccmg-transition);
}

.ccmg-gallery__share-card:hover {
    background: rgba(255,255,255,0.05);
    transform:  translateY(-1px);
}

.ccmg-gallery__share-card:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-card-icon {
    width:           38px;
    height:          38px;
    border-radius:   999px;
    background:      #4b4b4b;
    color:           #ffffff;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      inset 0 0 0 1px rgba(255,255,255,0.06);
}

.ccmg-gallery__share-glyph {
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    font-size:      20px;
    line-height:    1;
    font-weight:    700;
}

.ccmg-gallery__share-card-label {
    display:        block;
    max-width:      10ch;
    font-size:      10px;
    line-height:    1.25;
    font-weight:    500;
}

.ccmg-gallery__share-card-icon svg {
    width:  18px;
    height: 18px;
}

.ccmg-gallery__share-hero-icon svg {
    width:  14px;
    height: 14px;
}

.ccmg-gallery__share-card--facebook .ccmg-gallery__share-card-icon { background: #4867aa; }
.ccmg-gallery__share-card--whatsapp .ccmg-gallery__share-card-icon { background: #25D366; color: #ffffff; }
.ccmg-gallery__share-card--telegram .ccmg-gallery__share-card-icon { background: #2aabee; }
.ccmg-gallery__share-card--x .ccmg-gallery__share-card-icon { background: #000000; }
.ccmg-gallery__share-card--instagram .ccmg-gallery__share-card-icon { background: linear-gradient(135deg, #f58529 0%, #dd2a7b 48%, #515bd4 100%); }
.ccmg-gallery__share-card--tiktok .ccmg-gallery__share-card-icon { background: #111111; }
.ccmg-gallery__share-card--copy_message .ccmg-gallery__share-card-icon { background: #a8a8a8; color: #1b1b1b; }

.ccmg-gallery__share-card.is-success .ccmg-gallery__share-card-icon,
.ccmg-gallery__share-copy-trigger.is-success {
    box-shadow: 0 0 0 2px rgba(99, 214, 146, 0.6);
}

.ccmg-gallery__share-card.is-error .ccmg-gallery__share-card-icon,
.ccmg-gallery__share-copy-trigger.is-error {
    box-shadow: 0 0 0 2px rgba(255, 117, 117, 0.55);
}

.ccmg-gallery__share-copy-head {
    display:     grid;
    gap:         3px;
}

.ccmg-gallery__share-copy-note {
    margin:      0;
    color:       rgba(255,255,255,0.58);
    font-size:   10px;
    line-height: 1.45;
}

.ccmg-gallery__share-copy-box {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:           center;
    gap:                   8px;
    padding:               8px 8px 8px 10px;
    border-radius:         14px;
    border:                1px solid rgba(255,255,255,0.14);
    background:            #121212;
}

.ccmg-gallery__share-copy-value {
    margin:         0;
    min-width:      0;
    color:          #ffffff;
    font-size:      11px;
    line-height:    1.4;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.ccmg-gallery__share-copy-trigger {
    appearance:         none;
    -webkit-appearance: none;
    min-width:          72px;
    min-height:         34px;
    padding:            0 12px;
    border:             none;
    border-radius:      999px;
    background:         #42a5ff;
    color:              #0a1730;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    font:               inherit;
    font-size:          11px;
    font-weight:        700;
    cursor:             pointer;
    transition:         transform var(--ccmg-transition),
                        filter var(--ccmg-transition);
}

.ccmg-gallery__share-copy-trigger:hover {
    filter:    brightness(1.05);
    transform: translateY(-1px);
}

.ccmg-gallery__share-copy-trigger:focus-visible {
    outline:        3px solid #ffffff;
    outline-offset: 2px;
}

.ccmg-gallery__share-feedback {
    min-height:   14px;
    margin:       0;
    color:        rgba(255,255,255,0.72);
    font-size:    10px;
    line-height:  1.4;
}

.ccmg-gallery__share-feedback.is-success {
    color: #7ce7a8;
}

.ccmg-gallery__share-feedback.is-error {
    color: #ff9f9f;
}

@media (max-width: 767px) {
    .ccmg-gallery__share-modal {
        padding:     0;
        place-items: end stretch;
    }

    .ccmg-gallery__share-sheet {
        width:         100%;
        max-height:    min(350px, calc(100vh - 12px));
        max-height:    min(350px, calc(100svh - 12px));
        padding:       14px 14px 16px;
        border-radius: 18px 18px 0 0;
        gap:           10px;
    }

    .ccmg-gallery__share-header {
        gap: 10px;
    }

    .ccmg-gallery__share-title {
        font-size: 16px;
    }

    .ccmg-gallery__share-subtitle {
        font-size: 10px;
    }

    .ccmg-gallery__share-section-title {
        font-size: 12px;
    }

    .ccmg-gallery__share-hero-action {
        min-width: 100%;
        min-height: 44px;
        font-size: 13px;
    }

    .ccmg-gallery__share-grid {
        display:         flex;
        flex-wrap:       nowrap;
        align-items:     flex-start;
        gap:             2px;
        overflow-x:      auto;
        overflow-y:      hidden;
        padding-bottom:  2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ccmg-gallery__share-grid::-webkit-scrollbar {
        display: none;
    }

    .ccmg-gallery__share-card {
        flex:       0 0 58px;
        min-height: 56px;
        padding:    3px 2px 2px;
        gap:        3px;
    }

    .ccmg-gallery__share-card-icon {
        width:  30px;
        height: 30px;
    }

    .ccmg-gallery__share-card-label {
        font-size:   9px;
        line-height: 1.15;
        max-width:   7ch;
    }

    .ccmg-gallery__share-card-icon svg {
        width:  15px;
        height: 15px;
    }

    .ccmg-gallery__share-glyph {
        font-size: 17px;
    }

    .ccmg-gallery__share-copy-box {
        grid-template-columns: 1fr;
    }

    .ccmg-gallery__share-copy-trigger {
        width: 100%;
    }
}

.ccmg-gallery .ccmg-gallery__zoom-wrap {
    position: relative; /* containing block para la imagen absolute */
    width:    100%;
    height:   100%;
    overflow: hidden;
    cursor:   zoom-in;
    border-radius: calc( var(--ccmg-radius-main) - var(--ccmg-padding-main) / 2 );
    touch-action: pan-y pinch-zoom;
    transition: transform 180ms ease;
}

.ccmg-gallery .ccmg-gallery__zoom-wrap.is-touch-dragging {
    transition: none;
    will-change: transform;
}

/* Imagen principal — reset contra Elementor.
   position: absolute saca la imagen del flujo: no infla la intrinsic size
   del zoom-wrap ni del main → aspect-ratio: 1/1 nunca se sobreescribe. */
.ccmg-gallery .ccmg-gallery__main-img {
    display:          block !important;
    position:         absolute;
    inset:            0;
    width:            100% !important;
    height:           100% !important;
    max-width:        none !important;
    max-height:       none !important;
    margin:           0 !important;
    padding:          0 !important;
    border:           none;
    border-radius:    0;
    object-fit:       contain;
    transition:       transform var(--ccmg-transition);
    transform-origin: center center;
    opacity:          0;
    pointer-events:   none;
    will-change:      transform, opacity;
}

.ccmg-gallery .ccmg-gallery__main-img.is-active {
    opacity:        1;
    pointer-events: auto;
}

.ccmg-gallery .ccmg-gallery__main-img.is-zoomed {
    transform: scale(var(--ccmg-zoom-scale));
    cursor:    zoom-out;
}

.ccmg-gallery .ccmg-gallery__main-img:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* Accesibilidad — visualmente oculto */
.ccmg-gallery .ccmg-gallery__live-label,
.ccmg-gallery .screen-reader-text {
    position:    absolute !important;
    width:       1px !important;
    height:      1px !important;
    padding:     0 !important;
    margin:      -1px !important;
    overflow:    hidden !important;
    clip:        rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border:      0 !important;
}

/* ============================================================
   FLECHAS DE NAVEGACIÓN
   Figma: 40×40 círculos, sombra sutil
   ============================================================ */
.ccmg-gallery .ccmg-gallery__nav {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    font-family:        inherit;
    padding:            0;
    margin:             0;
    text-decoration:    none;

    /* Posición */
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;

    /* Dimensiones Figma */
    width:           var(--ccmg-nav-size);
    height:          var(--ccmg-nav-size);
    border-radius:   var(--ccmg-radius-nav);
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Visual Figma */
    background:      #ffffff;
    border:          none;
    /* Sombra Figma: offset -3 2, blur 7.5, color rgba(0,0,0,0.05) */
    box-shadow:      -3px 2px 7.5px rgba(0,0,0,0.05);
    cursor:          pointer;
    color:           #000000;

    transition:      box-shadow var(--ccmg-transition),
                     background var(--ccmg-transition);
}

.ccmg-gallery .ccmg-gallery__nav:hover {
    background:  #f9f9f9;
    box-shadow:  -3px 2px 12px rgba(0,0,0,0.10);
}

.ccmg-gallery .ccmg-gallery__nav--prev { left:  12px; }
.ccmg-gallery .ccmg-gallery__nav--next { right: 12px; }

.ccmg-gallery .ccmg-gallery__nav svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery .ccmg-gallery__nav:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   LIGHTBOX — posición fixed, fuera del widget Elementor
   ============================================================ */
.ccmg-lightbox {
    position:        fixed;
    inset:           0;
    background:      var(--ccmg-overlay);
    z-index:         99999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
}

.ccmg-lightbox[hidden] { display: none; }

.ccmg-lightbox__img {
    display:       block;
    max-width:     90vw;
    max-height:    90vh;
    width:         auto;
    height:        auto;
    object-fit:    contain;
    border-radius: var(--ccmg-radius-main);
    box-shadow:    0 8px 40px rgba(0,0,0,0.4);
    margin:        0;
    padding:       0;
}

.ccmg-lightbox__close {
    appearance:         none;
    -webkit-appearance: none;
    position:        absolute;
    top:             16px;
    right:           16px;
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,0.15);
    border:          none;
    border-radius:   100px;
    color:           #ffffff;
    font-size:       20px;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    line-height:     1;
    transition:      background var(--ccmg-transition);
    z-index:         1;
}

.ccmg-lightbox__close:hover         { background: rgba(255,255,255,0.28); }
.ccmg-lightbox__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.ccmg-lightbox__nav {
    appearance:         none;
    -webkit-appearance: none;
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    width:           48px;
    height:          48px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(255,255,255,0.15);
    border:          none;
    border-radius:   100px;
    color:           #ffffff;
    cursor:          pointer;
    padding:         0;
    margin:          0;
    line-height:     1;
    transition:      background var(--ccmg-transition);
}

.ccmg-lightbox__nav:hover         { background: rgba(255,255,255,0.28); }
.ccmg-lightbox__nav--prev         { left:  16px; }
.ccmg-lightbox__nav--next         { right: 16px; }
.ccmg-lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================================================
   DESKTOP THUMB NAV — botón "bajar" inyectado por JS
   Mismo estilo visual que .ccmg-gallery__nav.
   Ocupa la misma celda de grid que las miniaturas (grid-column:1),
   alineado al fondo. Oculto por defecto; se muestra en hover via JS.
   ============================================================ */
.ccmg-gallery .ccmg-thumb-nav--down {
    /* Reset button */
    appearance:         none;
    -webkit-appearance: none;
    padding:            0;
    margin:             0;
    font-family:        inherit;

    /* Grid: misma celda que miniaturas, pegado al fondo */
    grid-column:        1;
    grid-row:           1;
    align-self:         end;
    justify-self:       center;
    margin-bottom:      8px;
    z-index:            2;
    position:           relative;

    /* Dimensiones (mismas que nav principal Figma) */
    width:              var(--ccmg-nav-size);
    height:             var(--ccmg-nav-size);
    border-radius:      var(--ccmg-radius-nav);
    display:            flex;
    align-items:        center;
    justify-content:    center;

    /* Visual Figma */
    background:         #ffffff;
    border:             none;
    box-shadow:         -3px 2px 7.5px rgba(0,0,0,0.05);
    cursor:             pointer;
    color:              #000000;

    /* Oculto por defecto, visible en hover via JS */
    opacity:            0;
    pointer-events:     none;
    transition:         opacity    var(--ccmg-transition),
                        box-shadow var(--ccmg-transition),
                        background var(--ccmg-transition);
}

.ccmg-gallery .ccmg-thumb-nav--down.is-visible {
    opacity:        1;
    pointer-events: auto;
}

.ccmg-gallery .ccmg-thumb-nav--down[disabled] {
    opacity:        0 !important;
    pointer-events: none;
}

.ccmg-gallery .ccmg-thumb-nav--down:hover {
    background:  #f9f9f9;
    box-shadow:  -3px 2px 12px rgba(0,0,0,0.10);
}

.ccmg-gallery .ccmg-thumb-nav--down svg {
    display:        block;
    pointer-events: none;
    flex-shrink:    0;
}

.ccmg-gallery .ccmg-thumb-nav--down:focus-visible {
    outline:        3px solid var(--ccmg-red);
    outline-offset: 2px;
}

/* ============================================================
   SLIDE TRANSITION — imagen principal
   transform + opacity: propiedades GPU, no causan layout.
   .is-entering-r = navegación hacia adelante
   .is-entering-l = navegación hacia atrás
   ============================================================ */
@keyframes ccmg-enter-r {
    from { transform: translateX( 18px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ccmg-enter-l {
    from { transform: translateX(-18px); opacity: 0; }
    to   { transform: translateX(0);     opacity: 1; }
}
@keyframes ccmg-exit-r {
    from { transform: translateX(0);      opacity: 1; }
    to   { transform: translateX(-18px);  opacity: 0; }
}
@keyframes ccmg-exit-l {
    from { transform: translateX(0);     opacity: 1; }
    to   { transform: translateX( 18px); opacity: 0; }
}

.ccmg-gallery .ccmg-gallery__main-img.is-entering-r {
    animation: ccmg-enter-r .2s ease forwards;
}
.ccmg-gallery .ccmg-gallery__main-img.is-entering-l {
    animation: ccmg-enter-l .2s ease forwards;
}
.ccmg-gallery .ccmg-gallery__main-img.is-exiting-r {
    animation: ccmg-exit-r .2s ease forwards;
    pointer-events: none;
}
.ccmg-gallery .ccmg-gallery__main-img.is-exiting-l {
    animation: ccmg-exit-l .2s ease forwards;
    pointer-events: none;
}

/* ============================================================
   RESPONSIVE — contrato component-first
   La autoridad principal es el ancho real de .ccmg-gallery.
   Las media queries quedan solo como fallback para navegadores
   sin container queries size.
   ============================================================ */
@container ccmg-gallery (max-width: 47.9375rem) {
    .ccmg-gallery .ccmg-gallery__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ccmg-gallery .ccmg-gallery__main {
        grid-column:   1;
        grid-row:      1;
        background:    transparent;
        border:        0;
        border-radius: 0;
        padding:       0;
        block-size:    clamp(320px, 56vh, 420px);
        aspect-ratio:  auto;
    }

    .ccmg-gallery .ccmg-gallery__thumbs {
        grid-column:       1;
        grid-row:          2;
        flex-direction:    row;
        inline-size:       100%;
        block-size:        auto;
        max-block-size:    none;
        overflow-x:        auto;
        overflow-y:        hidden;
        padding:           6px 8px calc(6px + var(--ccmg-scrollbar-gap));
        scroll-snap-type:  x proximity;
        scrollbar-width:   thin;
        scrollbar-color:   var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
        scrollbar-gutter:  stable both-edges;
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar {
        width:  auto;
        height: var(--ccmg-scrollbar-size);
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-track {
        background:    var(--ccmg-scrollbar-track);
        border-radius: var(--ccmg-scrollbar-radius);
    }

    .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb {
        background:      var(--ccmg-scrollbar-thumb);
        border:          1px solid transparent;
        border-radius:   var(--ccmg-scrollbar-radius);
        background-clip: padding-box;
    }

    .ccmg-gallery .ccmg-gallery__thumb {
        width:             69px;
        height:            70px;
        padding:           4px;
        border-radius:     8px;
        scroll-snap-align: start;
    }

    .ccmg-gallery .ccmg-gallery__nav,
    .ccmg-gallery .ccmg-thumb-nav--down {
        display: none;
    }
}

@container ccmg-gallery (max-width: 37.5rem) {
    .ccmg-gallery .ccmg-gallery__main {
        border-radius: var(--ccmg-mobile-radius-main, 0px);
        block-size:    clamp(260px, 52vh, 309px);
    }

    .ccmg-gallery .ccmg-gallery__thumbs {
        gap: var(--ccmg-mobile-thumb-gap, 8px);
    }

    .ccmg-gallery .ccmg-gallery__thumb {
        width:         var(--ccmg-mobile-thumb-w, 69px);
        height:        var(--ccmg-mobile-thumb-h, 70px);
        padding:       var(--ccmg-mobile-thumb-padding, 4px);
        border-radius: var(--ccmg-mobile-radius-thumb, 8px);
    }
}

@supports (width: 1cqi) {
    @container ccmg-gallery (max-width: 47.9375rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(320px, 58cqi, 420px);
        }
    }

    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(260px, 84cqi, 309px);
        }
    }
}

@supports (height: 100svh) {
    @container ccmg-gallery (max-width: 37.5rem) {
        .ccmg-gallery .ccmg-gallery__main {
            block-size: clamp(260px, 52svh, 309px);
        }
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 1019px) {
        .ccmg-gallery .ccmg-gallery__layout {
            grid-template-columns: minmax(0, 1fr);
        }

        .ccmg-gallery .ccmg-gallery__main {
            grid-column:   1;
            grid-row:      1;
            background:    transparent;
            border:        0;
            border-radius: 0;
            padding:       0;
            block-size:    clamp(320px, 56vh, 420px);
            aspect-ratio:  auto;
        }

        .ccmg-gallery .ccmg-gallery__thumbs {
            grid-column:       1;
            grid-row:          2;
            flex-direction:    row;
            inline-size:       100%;
            block-size:        auto;
            max-block-size:    none;
            overflow-x:        auto;
            overflow-y:        hidden;
            padding:           6px 8px calc(6px + var(--ccmg-scrollbar-gap));
            scroll-snap-type:  x proximity;
            scrollbar-width:   thin;
            scrollbar-color:   var(--ccmg-scrollbar-thumb) var(--ccmg-scrollbar-track);
            scrollbar-gutter:  stable both-edges;
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar {
            width:  auto;
            height: var(--ccmg-scrollbar-size);
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-track {
            background:    var(--ccmg-scrollbar-track);
            border-radius: var(--ccmg-scrollbar-radius);
        }

        .ccmg-gallery .ccmg-gallery__thumbs::-webkit-scrollbar-thumb {
            background:      var(--ccmg-scrollbar-thumb);
            border:          1px solid transparent;
            border-radius:   var(--ccmg-scrollbar-radius);
            background-clip: padding-box;
        }

        .ccmg-gallery .ccmg-gallery__thumb {
            width:             69px;
            height:            70px;
            padding:           4px;
            border-radius:     8px;
            scroll-snap-align: start;
        }

        .ccmg-gallery .ccmg-gallery__nav,
        .ccmg-gallery .ccmg-thumb-nav--down {
            display: none;
        }
    }

    @media (max-width: 600px) {
        .ccmg-gallery .ccmg-gallery__main {
            border-radius: var(--ccmg-mobile-radius-main, 0px);
            block-size:    clamp(260px, 52vh, 309px);
        }

        .ccmg-gallery .ccmg-gallery__thumbs {
            gap: var(--ccmg-mobile-thumb-gap, 8px);
        }

        .ccmg-gallery .ccmg-gallery__thumb {
            width:         var(--ccmg-mobile-thumb-w, 69px);
            height:        var(--ccmg-mobile-thumb-h, 70px);
            padding:       var(--ccmg-mobile-thumb-padding, 4px);
            border-radius: var(--ccmg-mobile-radius-thumb, 8px);
        }
    }

    @supports (height: 100svh) {
        @media (max-width: 600px) {
            .ccmg-gallery .ccmg-gallery__main {
                block-size: clamp(260px, 52svh, 309px);
            }
        }
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ccmg-gallery .ccmg-gallery__main-img,
    .ccmg-gallery .ccmg-gallery__thumb,
    .ccmg-gallery .ccmg-gallery__action,
    .ccmg-gallery__share-close,
    .ccmg-gallery__share-hero-action,
    .ccmg-gallery__share-card,
    .ccmg-gallery__share-copy-trigger,
    .ccmg-gallery .ccmg-gallery__nav,
    .ccmg-lightbox__close,
    .ccmg-lightbox__nav {
        transition: none;
    }

    .ccmg-gallery .ccmg-gallery__main-img.is-zoomed,
    .ccmg-gallery .ccmg-gallery__main-img.is-entering-r,
    .ccmg-gallery .ccmg-gallery__main-img.is-entering-l,
    .ccmg-gallery .ccmg-gallery__main-img.is-exiting-r,
    .ccmg-gallery .ccmg-gallery__main-img.is-exiting-l {
        animation:  none;
        transform:  none;
        opacity:    1;
        cursor:     default;
    }

    .ccmg-gallery .ccmg-gallery__zoom-wrap {
        cursor: default;
    }
}

/* ============================================================
   WOO PRODUCT FILTER — override defensivo contra Elementor Kit
   ============================================================ */
.elementor-kit-7 .wpfFilterWrapper input[type="checkbox"],
.elementor-kit-7 .wpfFilterWrapper input[type="radio"] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
}