.elementor-1014 .elementor-element.elementor-element-11c0e41{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-1014 .elementor-element.elementor-element-11c0e41:not(.elementor-motion-effects-element-type-background), .elementor-1014 .elementor-element.elementor-element-11c0e41 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c81d91b );}@media(min-width:768px){.elementor-1014 .elementor-element.elementor-element-11c0e41{--content-width:1600px;}}@media(max-width:1024px){.elementor-1014 .elementor-element.elementor-element-11c0e41{--padding-top:0px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}}@media(max-width:767px){.elementor-1014 .elementor-element.elementor-element-11c0e41{--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for shortcode, class: .elementor-element-8bb4d20 *//* =========================
   CUSTOMISE
   ========================= */
:root{
  /* layout */
  --fr-gap-desktop: 22px;
  --fr-gap-tablet: 16px;
  --fr-gap-mobile: 12px;

  /* card */
  --fr-card-pad-desktop: 16px;

  /* text padding when image is full bleed */
  --fr-text-pad-tablet: 14px;
  --fr-text-pad-mobile: 12px;

  /* typography */
  --fr-title-tablet-min: 1.4rem;
  --fr-title-tablet-max: 2.0rem;
  --fr-title-mobile-min: 1.1rem;
  --fr-title-mobile-max: 1.45rem;

  --fr-desc-desktop: 0.95rem;
  --fr-desc-tablet: 0.90rem;
  --fr-desc-mobile: 0.82rem;

  --fr-cta-desktop: 0.95rem;
  --fr-cta-tablet: 0.88rem;
  --fr-cta-mobile: 0.78rem;
}
/* ========================= */


/* =========================
   GRID
   ========================= */
.fragrance-grid{
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--fr-gap-desktop);
}

/* Override inline --cols from shortcode on tablet and mobile */
@media (max-width: 1024px){
  .fragrance-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--fr-gap-tablet);
  }
}
@media (max-width: 640px){
  .fragrance-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--fr-gap-mobile);
  }
}


/* =========================
   CARD
   ========================= */
.fragrance-card{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: var(--fr-card-pad-desktop);
  gap: 12px;
}

.fragrance-cta{
  margin-top: auto;
}


/* =========================
   MEDIA
   ========================= */
.fragrance-media{
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f7f5f1;
}
.fragrance-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fragrance-placeholder{
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 2rem;
  color: #A19278;
}


/* =========================
   TEXT
   ========================= */
.fragrance-title{
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 100;
  color: #A19278;
  font-size: 2.5rem;
  line-height: 1.08;
  letter-spacing: 0;
}
.fragrance-title a{
  color: inherit;
  text-decoration: none;
}
.fragrance-title a:hover{
  color: inherit;
}

.fragrance-desc{
  color: #555;
  font-size: var(--fr-desc-desktop);
  line-height: 1.45;
  margin-top: 2px;
}


/* =========================
   CTA
   ========================= */
.shop-now{
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 100;
  font-size: var(--fr-cta-desktop);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A19278;
  text-decoration: none;
}
.shop-now:hover,
.shop-now:focus{
  color: #A19278;
  text-decoration: underline;
  outline: none;
}


/* =========================
   TABLET AND MOBILE
   full bleed image, tighter type
   ========================= */
@media (max-width: 1024px){
  .fragrance-card{
    padding: 0 !important;
    gap: 0 !important;
  }

  .fragrance-title,
  .fragrance-desc,
  .fragrance-cta{
    padding-left: var(--fr-text-pad-tablet) !important;
    padding-right: var(--fr-text-pad-tablet) !important;
  }

  .fragrance-title{
    padding-top: 12px !important;
    font-size: clamp(var(--fr-title-tablet-min), 4.2vw, var(--fr-title-tablet-max)) !important;
    line-height: 1.08;
  }

  .fragrance-desc{
    font-size: var(--fr-desc-tablet) !important;
    line-height: 1.45;
  }

  .shop-now{
    font-size: var(--fr-cta-tablet) !important;
  }
}

@media (max-width: 640px){
  .fragrance-title,
  .fragrance-desc,
  .fragrance-cta{
    padding-left: var(--fr-text-pad-mobile) !important;
    padding-right: var(--fr-text-pad-mobile) !important;
  }

  .fragrance-title{
    padding-top: 10px !important;
    font-size: clamp(var(--fr-title-mobile-min), 5.2vw, var(--fr-title-mobile-max)) !important;
    line-height: 1.05;
  }

  .fragrance-desc{
    font-size: var(--fr-desc-mobile) !important;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .shop-now{
    font-size: var(--fr-cta-mobile) !important;
  }

  .fragrance-cta{
    padding-bottom: 12px !important;
  }
}/* End custom CSS */