:root {
	--swiper-navigation-size: 2rem;
    --swiper-theme-color: #000000;
}

.glightbox-clean button.gbtn {
    padding: 0;
}

.custom-product-gallery{
    & img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* Preload: el slider real se oculta (sin perder su ancho) hasta que Swiper este listo */
.cpg {
    --cpg-ink: #7F0000;
    --cpg-bag: #F7A81B;
    --cpg-preloader-bg: #faf9f5;
    --cpg-dur: 3.2s;
    --cpg-gap: 8px;
}

.cpg__preloader {
    display: none;
}

.cpg--loading > .cpg__preloader {
    display: block;
}

.cpg--loading > .custom-product-gallery,
.cpg--loading > .custom-product-gallery-thumbs {
    height: 0;
    margin: 0;
    overflow: hidden;
    visibility: hidden;
}

.cpg__preloader-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: var(--cpg-ratio, 1 / 1);
    background: var(--cpg-preloader-bg);
}

.cpg__preloader-thumbs {
    display: flex;
    gap: var(--cpg-gap);
    margin-top: var(--cpg-gap);
}

.cpg__preloader-thumbs span {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    background: var(--cpg-preloader-bg);
}

/* Bolsa de cafe: se llena de granos, se sella y muestra la etiqueta */
.cpg-pl {
    width: clamp(96px, 45%, 180px);
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: visible;
}

.cpg-pl * { transform-box: fill-box; }
.cpg-pl .ink-s { stroke: var(--cpg-ink); }
.cpg-pl .ink-f { fill: var(--cpg-ink); }
.cpg-pl .bag-s { stroke: var(--cpg-bag); }
.cpg-pl .bag-f { fill: var(--cpg-bag); }

.cpg-pl .bean,
.cpg-pl .flap,
.cpg-pl .seal,
.cpg-pl .bag,
.cpg-pl .label,
.cpg-pl .aroma {
    animation-duration: var(--cpg-dur);
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.cpg-pl .b1 { animation-name: cpg-drop1; }
.cpg-pl .b2 { animation-name: cpg-drop2; }
.cpg-pl .b3 { animation-name: cpg-drop3; }
.cpg-pl .bean { transform-origin: 50% 50%; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .9, .6); }
.cpg-pl .flap { transform-origin: 50% 100%; animation-name: cpg-fold; }
.cpg-pl .seal { opacity: 0; transform-origin: 50% 100%; animation-name: cpg-seal; }
.cpg-pl .bag { transform-origin: 50% 100%; animation-name: cpg-bounce; }
.cpg-pl .label { opacity: 0; transform-origin: 50% 50%; animation-name: cpg-label; }
.cpg-pl .aroma { opacity: 0; animation-name: cpg-aroma; }
.cpg-pl .a2 { animation-delay: .12s; }

@keyframes cpg-drop1 { 0% { opacity: 0; transform: translateY(-30px) rotate(-20deg); } 4% { opacity: 1; } 24% { opacity: 1; transform: translateY(100px) rotate(40deg); } 25%, 100% { opacity: 0; transform: translateY(100px) rotate(40deg); } }
@keyframes cpg-drop2 { 0%, 14% { opacity: 0; transform: translateY(-30px) rotate(25deg); } 18% { opacity: 1; } 38% { opacity: 1; transform: translateY(100px) rotate(-35deg); } 39%, 100% { opacity: 0; transform: translateY(100px) rotate(-35deg); } }
@keyframes cpg-drop3 { 0%, 28% { opacity: 0; transform: translateY(-30px) rotate(-10deg); } 32% { opacity: 1; } 52% { opacity: 1; transform: translateY(100px) rotate(30deg); } 53%, 100% { opacity: 0; transform: translateY(100px) rotate(30deg); } }
@keyframes cpg-fold { 0%, 58% { transform: scaleY(1); } 66%, 90% { transform: scaleY(.15); } 97%, 100% { transform: scaleY(1); } }
@keyframes cpg-seal { 0%, 61% { opacity: 0; transform: scaleY(.2); } 66%, 90% { opacity: 1; transform: scaleY(1); } 95%, 100% { opacity: 0; transform: scaleY(.2); } }
@keyframes cpg-bounce { 0%, 24% { transform: scale(1, 1); } 27% { transform: scale(1.03, .97); } 30%, 38% { transform: scale(1, 1); } 41% { transform: scale(1.03, .97); } 44%, 52% { transform: scale(1, 1); } 55% { transform: scale(1.03, .97); } 58%, 64% { transform: scale(1, 1); } 68% { transform: scale(.97, 1.04); } 72%, 100% { transform: scale(1, 1); } }
@keyframes cpg-label { 0%, 68% { opacity: 0; transform: scale(.4); } 74% { opacity: 1; transform: scale(1.12); } 78%, 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes cpg-aroma { 0%, 72% { opacity: 0; transform: translateY(6px); } 80% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
    .cpg-pl * { animation-duration: calc(var(--cpg-dur) * 2.5) !important; }
}

.custom-product-gallery-thumbs {
    & .swiper-slide {
        opacity: 0.5;
        cursor: pointer;
    }

    & .swiper-slide-thumb-active {
        opacity: 1;
        cursor: default;
    }
}