.elementor-1316 .elementor-element.elementor-element-ba7b3e2{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:50px;--padding-bottom:50px;--padding-left:025px;--padding-right:25px;--z-index:10;}.elementor-1316 .elementor-element.elementor-element-ba7b3e2:not(.elementor-motion-effects-element-type-background), .elementor-1316 .elementor-element.elementor-element-ba7b3e2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1316 .elementor-element.elementor-element-45bec3d > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-1316 .elementor-element.elementor-element-45bec3d.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-1316 .elementor-element.elementor-element-45bec3d .elementor-heading-title{font-family:"Noto Sans", Sans-serif;font-size:21px;font-weight:500;text-transform:uppercase;line-height:1.2;color:#000000;}.elementor-1316 .elementor-element.elementor-element-b298b94{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:767px){.elementor-1316 .elementor-element.elementor-element-ba7b3e2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-1316 .elementor-element.elementor-element-b298b94{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1316 .elementor-element.elementor-element-87d7105 > .elementor-widget-container{padding:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-87d7105 *//* ─── Section spacing ───────────────────────────── */
.range {
  margin: 3rem 0;

}
}
@media (min-width: 1024px) {
  .range { margin: 1rem 0;}
}

/* ─── MEDIA WRAPPER: fixed 300×413 ratio ─────────── */
.range .card .media {
  aspect-ratio: 300 / 513;
  overflow: hidden;
  position: relative;
}
.range .card .media img,
.range .card .media video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* fills the wrapper without distortion */
  display: block;
}

/* ─── CAPTION ───────────────────────────────────── */
.range .card .caption {
  
  margin-top: 1rem;
}
.range .card .caption h2 {
    font-family: "Noto Sans", Sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  text-transform: uppercase;
  margin: 0;
  padding-left: 0.5rem
}

.range .card .caption h3 {
    font-family: "Noto Sans", Sans-serif;
  font-size: 1rem;
  font-weight: 300;
  color: #000;
  text-transform: uppercase;
   margin: 0.25Rem 0 0;
  padding-left: 0.5rem;

} 
.range .card .caption p {
    font-family: "Cormorant Garamond", Sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  margin: 0.25Rem 0 0;
  color: #000;
  text-align: right;
  padding-right: 0.5rem
}

/* ─── DESKTOP (≥769px): 4-column grid ───────────── */
@media (min-width: 769px) {
  .range .scroller {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;           /* adjust gutter */
    
  }
}

/* ─── MOBILE (≤768px): swipe-scroll row ─────────── */
@media (max-width: 768px) {
  .range .scroller {
      --sbw: 0px;
   --hpad: calc(4.83092vw - var(--sbw) * 0.04831);
  padding-left: var(--hpad);
  padding-right: var(--hpad);

   display: flex;
    overflow-x: auto;
    gap: 40px;
    padding: 1rem ;
    scroll-snap-type: x proximity;
    

  /* 2) Tighten the “re-center” area to the middle 60% of each card */
  scroll-padding-inline: 20% 20%;

  /* hide native scrollbars */
  scrollbar-width: none;
  }
  .range .scroller .card {
    flex: 0 0 80vw;       /* each card is 80% of viewport width */
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
}


.disabled{
    pointer-events: none;
}

.range .scroller .card–premium .caption h2 {
  color: #2680C4;  /* e.g. dark red */
}
.range .scroller .card–mango .caption h2 {
  color: #F5AD1E;  /* e.g. rosy pink */
}
.range .scroller .card–guava .caption h2 {
  color: #F36F63;  /* e.g. deep blue */
}
.range .scroller .card–coffee .caption h2 {
  color: #6F4E38;  /* e.g. fresh green */
}/* End custom CSS */