/* 1025 is used instead of 1024 because touch devices design is not specified */
/* Mixin to use if touch devices design is specified */
/* Ignore, hover Device with limited pointing accuracy (touch) */
/**
 * Map with all possible units to be used by other utilities (i.e. fluid value)
 */
/**
 * Adds unit to a number
 * @param {Number} $value - Value to add unit to
 * @param {String} $unit - String representation of the unit
 * @return {Number} - `$value` expressed in `$unit`
 */
/**
 * Returns a number without units
 */
/**
 * Returns a rem value from a number of pixels.
 * Its uses 16px as root font-size
 */
/**
 * Returns a px value from a number of rems.
 * Its uses 16px as root font-size
 */
/**
 * Returns a rem value from a map
 */
/**
 * Returns a fluid value between two points in the viewport variable dimension.
 * This linear function can be applied to any property (width, font-size, ...).
 * @param {Number} $v1 - Value at init point - Linear function's Y1
 * @param {Number} $v2 - Value at end point - Linear function's Y2
 * @param {Number} $init - Init point in pixels - Linear function's X1
 * @param {Number} $end - End point in pixels - Linear function's X2
 * @param {Number} $var-dim - Variable dimension: 100vw as default, or 100vh, 100%
 * examples:
 * width: byl-linear-fluid-value(70vw, 58vw, 810px, 1024px);
 * padding-bottom: byl-linear-fluid-value(24px, 48px, 1025px, 1920px, 100%);
 * font-size: byl-linear-fluid-value(1rem, 2rem, 320px, 768px),
 * letter-spacing: byl-linear-fluid-value(0, 1px, 768px, 1024px),
 */
/*
 * Colors
 * (Named using "Name that color") - http://chir.ag/projects/name-that-color
 * -------------------------------------------------------------------------- */
/**
 * @tokens Colors Base
 * @presenter Color
 */
/**
 * @tokens Colors Promo
 * @presenter Color
 */
/**
 * @tokens Colors System
 * @presenter Color
 */
/**
 * @tokens Colors Others
 * @presenter Color
 */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/* -------------------------------------------------------------------------- *\
==============
| The Search |
==============
MOBILE:  Header < Search            PDPModals must hide the main header
                                    to show only a back button (as APP)
                                    Reference: SF-7800
------------------------------------------------------------------------
TABLET:                             no relevance
------------------------------------------------------------------------
DESKTOP: Header > Search            Subcategories must be viewed over
                                    the search form and its results
                                    Reference: SF-11932
\* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  INSETS
 * --------------------------------------------------------------------------
 *  An inset offers indents content on all four sides like the matte of the
 *  framed photo on a wall
 *
 *  $inset-X : a b;
 *  $inset-stack-X : a;
 *  $inset-inline-X : b;
 *
 *  -----------------------
 *  |          a          |
 *  |   ---------------   |
 *  | b |             | b |
 *  |   ---------------   |
 *  |          a          |
 *  -----------------------
 *
\* -------------------------------------------------------------------------- */
/**
 * @tokens Inset Block
 * @presenter Spacing
 */
/**
 * @tokens Inset Inline
 * @presenter Spacing
 */
/**
 * @tokens Insets
 * @presenter Spacing
 */
/* -------------------------------------------------------------------------- *\
 *  Main header
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Footer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Main content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Landing pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Account pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Form Login content
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Product Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Cart/Minicart
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Article pages
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Home Page
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Customizer
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  CTA static buttons
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  IOS navigator bottom spacing
 * -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- *\
 *  Rest of variables
 * -------------------------------------------------------------------------- */
/**
 * Returns a new string with some or all matches of a pattern replaced by a replacement
 * @param {String} $string - Initial string
 * @param {String} $search - Value to replace
 * @param {String} $replace - Replacement
 * @return {String} New string
 */
/*
  NOTE: Setup the svg.
    1- export the svg from the sketch in abstract
    2- go to optimizer, https://jakearchibald.github.io/svgomg/
    3- Copy source, check if need to have some changes in the path or fill.
*/
/* stylelint-disable scss/operator-no-unspaced */
/**
 * Payment cards used in account, visa, mastercard,
 */
/* stylelint-enable scss/operator-no-unspaced */
/**
 * Returns an url encoded SVG with the given color
 * @param {String} $icon - SVG code
 * @param {String} $fill-color - Fill color
 * @param {String} $stroke-color - Stroke color
 * @return {String} URL encoded svg
 */
.mothers-day-home-modal {
  position: sticky;
  z-index: 29;
  display: block;
  flex-basis: 0;
}
.mothers-day-home-modal.hide {
  display: none;
}
.mothers-day-home-modal__dialog {
  position: fixed;
  top: auto;
  right: 8px;
  bottom: calc(24px + 3.625rem);
  left: auto;
  width: calc(0.1605177994 * 100vw + 251.8058252427px);
  min-width: 19.5rem;
  max-width: 35rem;
  height: auto;
  min-height: 10.3125rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 575px) {
  .mothers-day-home-modal__dialog {
    right: 16px;
    bottom: calc(32px + 3.625rem);
  }
}
@media (min-width: 768px) {
  .mothers-day-home-modal__dialog {
    right: 24px;
  }
}
@media (min-width: 1025px) {
  .mothers-day-home-modal__dialog {
    right: 1.3125rem;
    bottom: 2.5625rem;
  }
}
.mothers-day-home-modal__content {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 16px 16px 12px 0.875rem;
  background-color: hsl(0, 0%, 100%);
  border-radius: 1.375rem;
  box-shadow: none;
}
@media (min-width: 375px) {
  .mothers-day-home-modal__content {
    padding-top: calc(0.0051779935 * 100vw + 14.0582524272px);
    padding-bottom: calc(0.0025889968 * 100vw + 11.0291262136px);
    padding-left: calc(0.0058252427 * 100vw + 12.8155339806px);
    border-radius: calc(0.0051779935 * 100vw + 20.0582524272px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__content {
    padding-top: 24px;
    padding-bottom: 16px;
    padding-left: 24px;
    border-radius: 1.875rem;
  }
}
.mothers-day-home-modal__body {
  position: static;
  margin: 0;
  padding: 0;
}
.mothers-day-home-modal__btn-close {
  position: absolute;
  top: 1.1875rem;
  right: 1.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><g fill-rule="evenodd"><path d="M0 1.944L1.944 0l15.91 15.91-1.944 1.944z" fill="hsl(0, 0%, 0%)"/><path d="M15.91 0l1.944 1.944-15.91 15.91L0 15.91z" fill="hsl(0, 0%, 0%)"/></g></svg>');
}
@media (min-width: 375px) {
  .mothers-day-home-modal__btn-close {
    top: calc(0.0071197411 * 100vw + 16.3300970874px);
    width: calc(0.0045307443 * 100vw + 12.3009708738px);
    height: calc(0.0045307443 * 100vw + 12.3009708738px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__btn-close {
    top: 1.875rem;
    width: 1.3125rem;
    height: 1.3125rem;
  }
}
.mothers-day-home-modal__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  margin: 0 0 6px;
}
.mothers-day-home-modal__title-text {
  --uses-typography: "home-modal-title";
  color: hsl(0, 100%, 50%);
  color: var(--color-text-highlight, hsl(0, 100%, 50%));
  font-weight: 900;
  font-size: 1.3125rem;
  font-family: "FKGrotesk", "Arial", sans-serif;
  line-height: 1.0625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  color: hsl(0, 0%, 0%);
}
@media (min-width: 375px) {
  .mothers-day-home-modal__title-text {
    font-size: calc(0.0097087379 * 100vw + 17.359223301px);
    line-height: calc(0.0181229773 * 100vw + 10.2038834951px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__title-text {
    font-size: 2.25rem;
    line-height: 2.8125rem;
  }
}
.mothers-day-home-modal__title-image {
  width: auto;
  height: 1.625rem;
}
@media (min-width: 375px) {
  .mothers-day-home-modal__title-image {
    height: calc(0.0110032362 * 100vw + 21.8737864078px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__title-image {
    height: 2.6875rem;
  }
}
.mothers-day-home-modal__text {
  --uses-typography: "home-modal-text";
  color: hsl(0, 100%, 50%);
  color: var(--color-text-highlight, hsl(0, 100%, 50%));
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: "EBGaramond", georgia, serif;
  font-style: italic;
  line-height: 1.0625rem;
  margin: 0 5.25rem 0.875rem 0;
  color: hsl(0, 0%, 0%);
}
@media (min-width: 375px) {
  .mothers-day-home-modal__text {
    font-size: calc(0.0038834951 * 100vw + 13.5436893204px);
    line-height: calc(0.0058252427 * 100vw + 14.8155339806px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__text {
    font-size: 1.3125rem;
    line-height: 1.625rem;
  }
}
@media (min-width: 375px) {
  .mothers-day-home-modal__text {
    margin: 0 calc(0.0401294498 * 100vw + 68.9514563107px) calc(0.0213592233 * 100vw + 5.9902912621px) 0;
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__text {
    margin: 0 9.125rem 2.9375rem 0;
  }
}
.mothers-day-home-modal__link {
  --uses-typography: "home-modal-link";
  color: hsl(0, 100%, 50%);
  color: var(--color-text-highlight, hsl(0, 100%, 50%));
  font-weight: 900;
  font-size: 0.875rem;
  font-family: "FKGrotesk", "Arial", sans-serif;
  line-height: 1.0625rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  left: 0;
  display: inline-block;
  margin-bottom: 12px;
  color: hsl(0, 0%, 0%);
}
@media (min-width: 375px) {
  .mothers-day-home-modal__link {
    font-size: calc(0.0051779935 * 100vw + 12.0582524272px);
    line-height: calc(0.0019417476 * 100vw + 16.2718446602px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__link {
    font-size: 1.375rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 375px) {
  .mothers-day-home-modal__link {
    margin-bottom: calc(0.0025889968 * 100vw + 11.0291262136px);
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__link {
    margin-bottom: 16px;
  }
}
.mothers-day-home-modal__image {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: auto;
  height: calc(100% - 24px);
  border-bottom-right-radius: 1.375rem;
}
@media (min-width: 375px) {
  .mothers-day-home-modal__image {
    border-bottom-right-radius: calc(0.0051779935 * 100vw + 20.0582524272px);
  }
}
@media (min-width: 1025px) {
  .mothers-day-home-modal__image {
    height: calc(100% - (0.0290502793 * 100vw + -5.7765363128px));
    height: calc(100% - calc(0.0290502793 * 100vw + -5.7765363128px));
  }
}
@media (min-width: 1920px) {
  .mothers-day-home-modal__image {
    height: calc(100% - 3.125rem);
    border-bottom-right-radius: 1.875rem;
  }
}

/*# sourceMappingURL=mothers-day-home-modal.css.map*/