/* =========================================================
   FLY4 – Product Category Grid  (Angie snippet e1201a1e)
   Palette:  Eternity #353632 · Amber Glow #AF722A · Cream #F7EFDF
   POP-OUT  = circular cream pedestal, product rises above it.
   AUTO-SCROLL = pure-CSS marquee (no JS). Sticky "View All" optional.
   ========================================================= */

.cat-grid-wrapper-e1201a1e {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ---------- Container: GRID is the default ---------- */
.cat-grid-container-e1201a1e {
    display: grid;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: var(--fly4-gap, 20px);
}

/* ---------- Container: CAROUSEL (manual scroll) ---------- */
.cat-layout-carousel .cat-grid-container-e1201a1e {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 6px;
    justify-content: flex-start;
    align-items: flex-start;
}
.cat-layout-carousel .cat-grid-container-e1201a1e::-webkit-scrollbar { display: none; }
@media (min-width: 1025px) {
    .cat-layout-carousel .cat-grid-container-e1201a1e { justify-content: center; }
}
.cat-layout-carousel .cat-card-e1201a1e {
    flex: 0 0 auto;
    width: var(--fly4-card-w, 190px);
    scroll-snap-align: start;
}

/* Head-room so the popped-out product never clips against elements above */
.cat-style-popout .cat-grid-container-e1201a1e {
    padding-top: calc(var(--fly4-card-h, 190px) * 0.30);
}

/* ---------- Card ---------- */
.cat-card-e1201a1e {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
    width: 100%;
}

.cat-image-wrapper-e1201a1e {
    width: 100%;
    position: relative;
    margin-bottom: 12px;
}

/* Aspect ratio (CONTAINED only) */
.cat-ratio-1-1  .cat-image-wrapper-e1201a1e { padding-top: 100%; }
.cat-ratio-4-3  .cat-image-wrapper-e1201a1e { padding-top: 75%; }
.cat-ratio-3-4  .cat-image-wrapper-e1201a1e { padding-top: 133.33%; }
.cat-ratio-16-9 .cat-image-wrapper-e1201a1e { padding-top: 56.25%; }
.cat-ratio-4-5  .cat-image-wrapper-e1201a1e { padding-top: 125%; }

/* =========================================================
   CONTAINED style
   ========================================================= */
.cat-style-contained .cat-image-wrapper-e1201a1e {
    overflow: hidden;
    background-color: var(--fly4-cream, #F7EFDF);
    border-radius: var(--cat-radius, 16px);
}
.cat-style-contained .cat-image-wrapper-e1201a1e img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   POP-OUT style – CIRCULAR pedestal, product rises above it
   ========================================================= */
.cat-style-popout .cat-card-e1201a1e {
    width: var(--fly4-card-w, 190px);
}
.cat-style-popout .cat-image-wrapper-e1201a1e {
    width: var(--fly4-card-w, 190px);
    height: var(--fly4-card-h, 190px);
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 14px;
    background: transparent;
    overflow: visible;
}
.cat-style-popout .cat-image-wrapper-e1201a1e::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--fly4-cream, #F7EFDF);
    border-radius: 50%;
    z-index: 0;
}
.cat-style-popout .cat-image-wrapper-e1201a1e img {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: auto;
    height: var(--fly4-product-h, 130%);
    max-width: var(--fly4-product-maxw, 118%);
    object-fit: contain;
    object-position: center bottom;
    z-index: 1;
}

/* =========================================================
   Placeholder
   ========================================================= */
.cat-placeholder-e1201a1e {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--fly4-cream, #F7EFDF);
    color: #353632;
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--cat-radius, 16px);
}
.cat-style-popout .cat-placeholder-e1201a1e {
    inset: 0;
    height: auto;
    border-radius: 50%;
}

/* ---------- Label ---------- */
.cat-name-e1201a1e {
    margin: 0;
    padding: 0;
    color: #AF722A;
    transition: color 0.25s ease;
}

/* =========================================================
   View All tile – CIRCLE with centred text (pop-out)
   ========================================================= */
.cat-viewall-e1201a1e .cat-viewall-text-e1201a1e {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #AF722A;
    font-weight: 700;
    z-index: 1;
    transition: color 0.25s ease;
}
.cat-style-popout .cat-viewall-e1201a1e .cat-viewall-text-e1201a1e {
    inset: 0;
    height: auto;
}

/* =========================================================
   AUTO-SCROLL  (pure-CSS marquee) – carousel only
   ========================================================= */
@keyframes fly4-marquee-e1201a1e {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* container becomes a horizontal clip window, vertical stays open for pop-out */
.cat-layout-carousel.cat-autoscroll-yes .cat-grid-container-e1201a1e {
    display: block;
    width: 100%;
    overflow-x: clip;      /* clip sideways… */
    overflow-y: visible;   /* …but let products pop out the top */
    scroll-snap-type: none;
    padding-bottom: 0;
}

/* the moving track */
.cat-marquee-track-e1201a1e {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    align-items: flex-start;
    animation: fly4-marquee-e1201a1e var(--fly4-scroll-dur, 25s) linear infinite;
    animation-delay: var(--fly4-scroll-delay, 3s);
    will-change: transform;
}
.cat-marquee-track-e1201a1e > .cat-card-e1201a1e {
    flex: 0 0 auto;
    width: var(--fly4-card-w, 190px);
    margin-right: var(--fly4-gap, 20px);   /* gap that keeps the loop seamless */
}

/* pause on hover (optional) */
.cat-pausehover-yes .cat-marquee-track-e1201a1e:hover {
    animation-play-state: paused;
}

/* respect reduced-motion: stop animating, allow manual swipe instead */
@media (prefers-reduced-motion: reduce) {
    .cat-marquee-track-e1201a1e { animation: none; }
    .cat-layout-carousel.cat-autoscroll-yes .cat-grid-container-e1201a1e { overflow-x: auto; }
}

/* =========================================================
   STICKY "View All" – carousel only
   Cards scroll inside their own area; View All stays pinned right.
   ========================================================= */
.cat-layout-carousel.cat-sticky-yes .cat-grid-wrapper-e1201a1e {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--fly4-gap, 20px);
}
.cat-layout-carousel.cat-sticky-yes .cat-grid-container-e1201a1e {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;   /* let the scroll area shrink instead of pushing View All off */
}
.cat-viewall-sticky-e1201a1e {
    flex: 0 0 auto;
}
.cat-viewall-sticky-e1201a1e .cat-card-e1201a1e {
    width: var(--fly4-card-w, 190px);
}
/* line the sticky circle up with the scrolling circles (pop-out head-room) */
.cat-style-popout .cat-viewall-sticky-e1201a1e {
    padding-top: calc(var(--fly4-card-h, 190px) * 0.30);
}

/* ---------- Hover Lift (UNCHANGED) ---------- */
.cat-grid-lift-yes .cat-card-e1201a1e:hover { transform: translateY(-6px); }