/* =========================================================
   GREENEASE - Popular Categories Carousel (Avada) - CLEAN
   Container class: pop-cat-card
   Carousel wrapper (Row or Column): pop-cat-carousel
   Tile column class: cat-container
   Title text class: cat-title
   Image frame class: cat-img
   ========================================================= */

:root{
  /* Greenease palette */
  --ge-green: #184328;
  --ge-mint:  #dff6e6;

  /* Section */
  --section-radius: 12px;
  --section-pad: 28px;
  --section-shadow: 0 10px 24px rgba(0,0,0,.08);
  --section-max: 1180px;

  /* Tile */
  --tile-radius: 12px;
  --tile-shadow: 0 10px 22px rgba(0,0,0,.10);
  --tile-img-h: 390px;
  --title-h: 84px;

  /* Carousel */
  --tile-w: 360px;     /* desktop card width */
  --gap: 2px;
}

/* ===== OUTER WHITE CARD (wraps heading + carousel) ===== */
.pop-cat-card{
  background: #fff !important;
  border-radius: var(--section-radius) !important;
  box-shadow: var(--section-shadow) !important;
  padding: var(--section-pad) !important;

  max-width: var(--section-max) !important;
  width: 100% !important;
  margin: 18px auto !important;
}

/* ===== SINGLE SCROLL CONTAINER (ONLY this scrolls) ===== */
.pop-cat-card .pop-cat-carousel{
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* makes first/last item not clip */
  padding: 10px 8px 14px !important;
}

/* The FLEX “track” that holds the tiles
   - If pop-cat-carousel is a ROW: tiles are usually inside > .fusion-row
   - If pop-cat-carousel is a COLUMN: tiles are usually inside .fusion-column-wrapper > ... > .fusion-row
*/
.pop-cat-card .pop-cat-carousel > .fusion-row,
.pop-cat-card .pop-cat-carousel > .fusion-column-wrapper > .fusion-row,
.pop-cat-card .pop-cat-carousel > .fusion-column-wrapper > .fusion-builder-row > .fusion-row{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--gap) !important;
  margin: 0 !important;
}

/* Make each tile column a fixed-width flex item (no wrapping) */
.pop-cat-card .pop-cat-carousel .cat-container{
  float: none !important;
  flex: 0 0 var(--tile-w) !important;
  width: var(--tile-w) !important;
  max-width: var(--tile-w) !important;
  margin: 0 !important;
  scroll-snap-align: start;
  position: relative;
}

/* Optional scrollbar styling */
.pop-cat-card .pop-cat-carousel::-webkit-scrollbar{ height: 8px; }
.pop-cat-card .pop-cat-carousel::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 20px;
}

/* ===== TILE CARD ===== */
.pop-cat-card .cat-container > .fusion-column-wrapper{
  position: relative !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--tile-radius);
  background: #fff;
  box-shadow: var(--tile-shadow);
  transition: transform .18s ease, box-shadow .18s ease;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  min-height: calc(var(--tile-img-h) + var(--title-h));
}

.pop-cat-card .cat-container:hover > .fusion-column-wrapper{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.14);
}

/* ===== IMAGE (no crop) ===== */
.pop-cat-card .cat-container .fusion-image-element{
  margin: 0 !important;
  width: 100% !important;
}

.pop-cat-card .cat-container .fusion-imageframe.cat-img{
  display: flex !important;
  width: 100% !important;
  height: var(--tile-img-h) !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f4f4;
}

.pop-cat-card .cat-container .fusion-imageframe.cat-img img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* ===== TITLE BAR (fixed height + auto shrink) ===== */
.pop-cat-card .cat-container .fusion-text.cat-title{
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  z-index: 10;

  height: var(--title-h);
  display: flex !important;
  align-items: center !important;

  margin: 0 !important;
  background: var(--ge-green);
  padding: 14px 16px 14px 70px;
  border-bottom-left-radius: var(--tile-radius);
  border-bottom-right-radius: var(--tile-radius);

  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff !important;
}

.pop-cat-card .cat-container .fusion-text.cat-title p{
  margin: 0 !important;
  width: 100%;
  color: #fff !important;

  font-size: clamp(14px, 1.05vw, 14px) !important;
  line-height: 1.05 !important;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Mint wedge */
.pop-cat-card .cat-container .fusion-text.cat-title:before{
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 52px;
  background: var(--ge-mint);
  transform: skewX(-20deg);
}

/* Divider */
.pop-cat-card .cat-container .fusion-text.cat-title:after{
  content: "";
  position: absolute;
  left: 52px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.35);
  transform: skewX(-20deg);
}

/* ===== MOBILE (swipe carousel) ===== */
@media (max-width: 640px){
  :root{ --section-pad: 18px; --gap: 16px; }

  .pop-cat-card .pop-cat-carousel .cat-container{
    flex: 0 0 78% !important;
    width: 78% !important;
    max-width: 78% !important;
    min-width: 260px !important;
  }
}

@media (max-width: 480px){
  :root{ --tile-img-h: 220px; --title-h: 74px; }

  .pop-cat-card .cat-container .fusion-text.cat-title p{
    font-size: clamp(13px, 3.2vw, 16px) !important;
  }
}