.elementor-31 .elementor-element.elementor-element-a1df9f9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS */* Isolate the slider from Elementor’s globals */
.elementor .pfm-shop img {
  height: 100% !important;   /* beats .elementor img {height:auto} */
  width: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Ensure the rail remains a single row with the intended gap */
.elementor .pfm-shop .rail {
  display: flex !important;
  gap: var(--gap) !important;
  flex-wrap: nowrap !important;
}

/* (Optional) guard the card sizing too */
.elementor .pfm-shop .pfm-card {
  flex: 0 0 calc((100% - (var(--gap) * 2)) / 3);
}
@media (max-width:1024px){
  .elementor .pfm-shop .pfm-card{ flex: 0 0 calc((100% - var(--gap)) / 2); }
}
@media (max-width:640px){
  .elementor .pfm-shop .pfm-card{ flex: 0 0 calc(100% - var(--gap)); }
}


/* ---- Scope + defaults ---- */
.pfm-shop { 
  --gap: 24px;           /* adjust if you used a different gap */
  --cards: 3;            /* desktop: show 3 */
}
@media (max-width: 1024px){ .pfm-shop { --cards: 2; } }
@media (max-width: 640px){  .pfm-shop { --cards: 1; } }

/* ---- Rail must be a single line ---- */
.elementor .pfm-shop .viewport {
  overflow: hidden !important;
}
.elementor .pfm-shop .rail {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: var(--gap) !important;
  align-items: stretch !important;
}

/* ---- CRITICAL: stop Elementor from forcing flex:1 on children ---- */
.elementor .pfm-shop .rail > * {
  flex: 0 0 auto !important;   /* resets any flex:1 1 0 defaults */
}

/* ---- Card width per view ---- */
.elementor .pfm-shop .pfm-card {
  /* width = (container - total gaps) / cards-per-view */
  flex-basis: calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards)) !important;
  max-width:  calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards)) !important;
  min-width:  calc((100% - (var(--gap) * (var(--cards) - 1))) / var(--cards)) !important;
}

/* keep the image rules we added earlier */
.elementor .pfm-shop img {
  height: 100% !important;
  width: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}/* End custom CSS */