/**
 * DG Product Coverflow Carousel
 *
 * All product PNGs are normalized to a uniform 700x1000 canvas with a
 * consistent inner safe area (~80%) and are bottom-aligned inside that safe
 * area. That means every image has the SAME intrinsic aspect ratio (7:10)
 * and the product baseline is always at 90% of canvas height. The CSS can
 * therefore treat cells as uniform boxes and never has to compensate for
 * per-image ratio differences.
 *
 * DOM structure (rendered by the [dg_product_carousel] shortcode):
 *
 *   .dg-product-carousel-wrapper
 *     .dg-product-carousel               (Flickity container)
 *       a.dg-product-carousel__cell      (Flickity cell, gets inline translateX)
 *         span.dg-product-carousel__inner (we transform THIS)
 *           img
 *
 * Flickity writes its own transform: translateX(N%) on each cell element,
 * so our own scale/translate effects must live on the __inner child.
 *
 * Breakpoints:
 *   - Desktop >= 1400px  : 13 visible (center + 6 per side)
 *   - Laptop  >= 1024px  : 5  visible (center + 2 per side)
 *   - Tablet  >=  640px  : 3  visible (center + 1 per side)
 *   - Phone   <   640px  : 1  visible
 *
 * Desktop overlap math (cell width 200px, center scale 1.25):
 *   - Center inner half-width:        125px
 *   - Neighbor inner half-width:      100px
 *   - Target reveal strip per tier:    70px
 *   - Resulting translateX per tier:   52.5%, 117.5%, 182.5%, 247.5%,
 *                                      312.5%, 377.5%  (delta = 65% constant)
 *   The constant 65% delta keeps the visible strip ~uniform across all
 *   distance tiers, so the fan-out looks evenly spaced from d=1 to d=6.
 */

/* ---- Outer wrapper ---- */
.dg-product-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    padding: 60px 0 80px;
}

/* ---- Flickity container ---- */
.dg-product-carousel {
    width: 100%;
    min-height: 460px;
    overflow: visible;
}

.dg-product-carousel .flickity-viewport {
    overflow: visible;
}

/* Pin the slider row so cells share the same bottom baseline. */
.dg-product-carousel .flickity-slider {
    align-items: flex-end;
}

/* While JS hasn't initialised Flickity yet, hide all but the first cell. */
.dg-product-carousel:not(.flickity-enabled) .dg-product-carousel__cell + .dg-product-carousel__cell {
    display: none;
}

/* ---- Cells: fixed size, identical for every product ----
   Image canvas is 7:10 so cell width * (10/7) gives the inner height.
   Desktop default: 200x286 (200 * 10/7 ~= 286). */
.dg-product-carousel .dg-product-carousel__cell {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    width: 200px;
    min-width: 200px;
    height: 320px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    z-index: 1;
}

/* Inner wrapper: this is the element we transform. It fills the cell width
   so the image's own dimensions drive the visible product size consistently. */
.dg-product-carousel .dg-product-carousel__inner {
    display: block;
    width: 100%;
    transform: translateX(0) scale(1);
    transform-origin: center bottom;
    opacity: 0.85;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition:
        transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity   0.45s ease,
        filter    0.45s ease;
    will-change: transform, opacity;
    pointer-events: none;
}

/* Image: fills the inner wrapper at its natural 7:10 ratio. Identical size
   across every product because every PNG has the same canvas dimensions.
   !important is required here because Salient ships an inline stylesheet rule
   `.row .col img:not([srcset]) { width: auto }` that would otherwise win
   specificity and let the image render at its 700x1000 intrinsic size. */
.dg-product-carousel .dg-product-carousel__cell .dg-product-carousel__inner img {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ---- Coverflow states ----

   Because every cell is the same size and every image has the same
   canvas + safe-area geometry, we only need:
     - a bigger scale on the center cell
     - a fixed translateX overlap on neighbors (in % of cell width)
     - a z-index stack so center paints last
   No per-distance scale changes on neighbors, no baseline hacks. The
   consistent vertical whitespace in every PNG guarantees the "hidden"
   portions of neighbours sit behind the opaque paint of the front cell,
   so nothing visually leaks into the whitespace.
*/

/* Center cell: modest upscale + prominent drop shadow. */
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="0"] .dg-product-carousel__inner,
.dg-product-carousel .dg-product-carousel__cell.is-center .dg-product-carousel__inner {
    transform: translateX(0) scale(1.25);
    opacity: 1;
    filter:
        drop-shadow(0 22px 18px rgba(0, 0, 0, 0.5))
        drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="0"],
.dg-product-carousel .dg-product-carousel__cell.is-center {
    z-index: 30;
}

/* 1 away. Reveal strip ~70px past the scaled center. */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-1"] .dg-product-carousel__inner {
    transform: translateX(52.5%) scale(1);
    opacity: 0.97;
    filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.4));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="1"] .dg-product-carousel__inner {
    transform: translateX(-52.5%) scale(1);
    opacity: 0.97;
    filter: drop-shadow(0 16px 14px rgba(0, 0, 0, 0.4));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="1"] {
    z-index: 20;
}

/* 2 away. One reveal tier further. */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-2"] .dg-product-carousel__inner {
    transform: translateX(117.5%) scale(1);
    opacity: 0.92;
    filter: drop-shadow(0 13px 12px rgba(0, 0, 0, 0.34));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="2"] .dg-product-carousel__inner {
    transform: translateX(-117.5%) scale(1);
    opacity: 0.92;
    filter: drop-shadow(0 13px 12px rgba(0, 0, 0, 0.34));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="2"] {
    z-index: 12;
}

/* 3 away. */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-3"] .dg-product-carousel__inner {
    transform: translateX(182.5%) scale(1);
    opacity: 0.87;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.28));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="3"] .dg-product-carousel__inner {
    transform: translateX(-182.5%) scale(1);
    opacity: 0.87;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.28));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="3"] {
    z-index: 6;
}

/* 4 away. */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-4"] .dg-product-carousel__inner {
    transform: translateX(247.5%) scale(1);
    opacity: 0.82;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.24));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="4"] .dg-product-carousel__inner {
    transform: translateX(-247.5%) scale(1);
    opacity: 0.82;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.24));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="4"] {
    z-index: 4;
}

/* 5 away. */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-5"] .dg-product-carousel__inner {
    transform: translateX(312.5%) scale(1);
    opacity: 0.77;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.2));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="5"] .dg-product-carousel__inner {
    transform: translateX(-312.5%) scale(1);
    opacity: 0.77;
    filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.2));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="5"] {
    z-index: 2;
}

/* 6 away (outermost at desktop). */
.dg-product-carousel .dg-product-carousel__cell[data-distance="-6"] .dg-product-carousel__inner {
    transform: translateX(377.5%) scale(1);
    opacity: 0.72;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18));
}
.dg-product-carousel .dg-product-carousel__cell[data-distance="6"] .dg-product-carousel__inner {
    transform: translateX(-377.5%) scale(1);
    opacity: 0.72;
    filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.18));
}
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="6"] {
    z-index: 1;
}

/* 7+ away: hidden, ready to rotate in. */
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="7"] .dg-product-carousel__inner,
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="8"] .dg-product-carousel__inner,
.dg-product-carousel .dg-product-carousel__cell[data-abs-distance="9"] .dg-product-carousel__inner {
    transform: translateX(0) scale(1);
    opacity: 0;
}

/* Prevent the native focus ring. */
.dg-product-carousel .dg-product-carousel__cell:focus,
.dg-product-carousel .dg-product-carousel__cell:focus-visible {
    outline: none;
}

/* Drag cursor feel. */
.dg-product-carousel.is-draggable { cursor: grab; }
.dg-product-carousel.is-draggable.is-dragging { cursor: grabbing; }
.dg-product-carousel.is-draggable .dg-product-carousel__cell { cursor: pointer; }

/* ---------------------------------------------------------------------- */
/* Responsive overrides                                                   */
/* ---------------------------------------------------------------------- */

/* Laptop: 5 cells visible, 3/4/5/6-away hidden. Uses the old desktop cell
   size (240x380) so the look at <1400px viewports is unchanged. The d=1/2
   translate values here override the 52.5/117.5 defaults back to 55/120
   because those were tuned for the 240px cell width used at this tier. */
@media (max-width: 1399px) {
    .dg-product-carousel {
        min-height: 520px;
    }
    .dg-product-carousel .dg-product-carousel__cell {
        width: 240px;
        min-width: 240px;
        height: 380px;
    }
    .dg-product-carousel .dg-product-carousel__cell[data-distance="-1"] .dg-product-carousel__inner {
        transform: translateX(55%) scale(1);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-distance="1"] .dg-product-carousel__inner {
        transform: translateX(-55%) scale(1);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-distance="-2"] .dg-product-carousel__inner {
        transform: translateX(120%) scale(1);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-distance="2"] .dg-product-carousel__inner {
        transform: translateX(-120%) scale(1);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="3"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="4"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="5"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="6"] .dg-product-carousel__inner {
        opacity: 0;
        transform: translateX(0) scale(1);
    }
}

/* Tablet: 3 cells visible, 2+away hidden. */
@media (max-width: 1023px) {
    .dg-product-carousel-wrapper {
        padding: 30px 0 50px;
    }
    .dg-product-carousel {
        min-height: 420px;
    }
    .dg-product-carousel .dg-product-carousel__cell {
        width: 180px;
        min-width: 180px;
        height: 300px;
    }
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="0"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell.is-center .dg-product-carousel__inner {
        transform: translateX(0) scale(1.2);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="2"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="3"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="4"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="5"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="6"] .dg-product-carousel__inner {
        opacity: 0;
        transform: translateX(0) scale(1);
    }
}

/* Phone: 1 cell visible, neighbours hidden. No overlap needed. */
@media (max-width: 639px) {
    .dg-product-carousel-wrapper {
        padding: 10px 0 30px;
    }
    .dg-product-carousel {
        min-height: 340px;
    }
    .dg-product-carousel .dg-product-carousel__cell {
        width: 70%;
        min-width: 0;
        height: 300px;
        margin: 0 4px;
    }
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="0"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell.is-center .dg-product-carousel__inner {
        transform: translateX(0) scale(1.1);
    }
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="1"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="2"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="3"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="4"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="5"] .dg-product-carousel__inner,
    .dg-product-carousel .dg-product-carousel__cell[data-abs-distance="6"] .dg-product-carousel__inner {
        opacity: 0;
        transform: translateX(0) scale(1);
    }
}