/**
 * 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
 */
/**
 * 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),
 */
/**
 * Returns a curve from the $transition-curves list
 */
/**
 * Returns a speed from the $transition-times list
 */
/**
 * Returns a transition string
 * used internally by byl-transition and byl-complex-transition mixins
 * @param {string} property - property to be transitioned (i.e. width)
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 */
/* -------------------------------------------------------------------------- *\
 *  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
 * -------------------------------------------------------------------------- */
/*
 * 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
 */
/*
$color__black: hsl(0, 0%, 0%);          // #000
$color__white: hsl(0, 0%, 100%);        // #fff

$color__nero: hsl(0, 0%, 14%);         //#242424
$color__matterhorn: hsl(0, 0%, 33%);         //#555555
$color__dark-gray: hsl(0, 0%, 66%);         //#A8A8A8
$color__gray: hsl(0, 0%, 78%);         //#C8C8C8
$color__white-smoke: hsl(0, 0%, 96%);         //#F4F4F4

$color__black20: hsla(0, 0%, 0%, 0.2);    //rgba(255, 255, 255, 20)
$color__gray50: hsla(0, 0%, 78%, 0.5);   //rgba(200, 200, 200, 50)

// Promo colors
$color__green: hsl(132, 100%, 49%);     // #00F830
$color__cookie: $color__green;
$color__red: hsl(0, 100%, 50%);       // #f00
$color__red-campaign: $color__red;
$color__international-orange: hsl(19, 100%, 50%);      // #ff5200
$color__sales: $color__international-orange;
$color__yellow: hsl(60, 100%, 50%);      // #FFFF00
$color__razzle-dazzle-rose: hsl(310, 100%, 64%);     // #FF45E0
$color__who-we-are: $color__razzle-dazzle-rose;

/// --------------------------------------------------------------------------
///    Old palette
/// --------------------------------------------------------------------------
$color__alabaster: hsl(0, 0%, 98%);         // #fafafa;
$color__alto: hsla(0, 0%, 0%, 0.33);   // #00000054 = #d3d3d3;
$color__blue: hsl(231, 100%, 50%);     // #0026FF
$color__silver: hsl(0, 0%, 51%);         // #838383
$color__early-dawn: hsl(44, 100%, 95%);      // #fff9e8
$color__orange: hsl(30, 100%, 53%);      // #ff8810
$color__malachite: hsl(122, 69%, 51%);      // #2dd933
$color__violet: hsl(275, 77%, 15%);      // #2c0945
$color__royal-blue: hsl(229, 73.1%, 57.6%);  // #4462e2
$color__sunset-orange: hsl(0, 100%, 64.7%);     // #ff4b4b
$color__transparent: hsla(360, 100%, 100%, 0); //rgba(255, 255, 255, 0)

//Social networks
$color__facebook: $color__royal-blue;
$color__google: $color__sunset-orange;
*/
/* 1025 is used instead of 1024 because touch devices design is not specified */
/**
 * 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),
 */
/**
 * @tokens Font Families
 * @presenter FontFamily
 */
/** System monospace */
/**
 * @tokens Font Weights
 * @presenter FontWeight
 */
/**
 * @tokens Font Sizes
 * @presenter FontSize
 */
/**
 * @tokens Line Height
 * @presenter Spacing
 */
/* @token Border
 * @presenter Spacing
 */
/* @token Border
 * @presenter Spacing
 */
/* Scrollbars customization */
/* Custom width */
/* Custom width */
/*
  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.
*/
/**
 * Payment cards used in account, visa, mastercard,
 */
/**
 * 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
 */
/* -------------------------------------------------------------------------- *\
==============
| 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
\* -------------------------------------------------------------------------- */
/* $theme-colors: map-merge(
    (
      "primary":    $primary,
      "secondary":  $secondary,
      "success":    $success,
      "info":       $info,
      "warning":    $warning,
      "danger":     $danger,
      "light":      $light,
      "dark":       $dark
    ),
    $theme-colors
); */
/*
$carousel-control-prev-icon-bg: str-replace(
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 7 7'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"),
  "#",
  "%23"
);
$carousel-control-next-icon-bg: str-replace(
  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"),
  "#",
  "%23"
);
*/
/*
 * https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden
 */
/**
 * Extends click zone by adding a pseudo overflowing on the element
 *
 * @param $margins: size overflowing the click zone
 * @param $pseudo: the pseudo where attach the hotzone
 * @param $debug: just to see the zone added
 */
/**
 * Calculate button icon size based on capital height
 *
 * $margin: 4px by default ($inset-inline-xxs)
 *
 * $icon-side: left or right (right by default) to apply margin properly
 *
 * $capital-height: (em) height of capital characters, in FK Grotesk is 0.72em
 **/
/**
 *  FLOATING ELEMENTS
 * --------------------------------------------------------------------------
 *  Works from 0 to 575px breakpoints.
 *
 *  Element with is equal to 100vw subtracting
 *    1. Page inset left: 16px
 *    2. Menu with: 45px
 *    3. Space between menu and element: 24px
 *    4. Menu right position: 8px
 *  Even if menu isn't present
 *
 *  bottom: menu offset bottom (24px) + 4px
 *
 *  When the element coexists with the floating menu on mobile:
 *  right: 24px + menu width (45px) + 8px
 *  left: page inset (16px)
 *
 *  When there is no menu, element is centered
 */
/* Mixin to use if touch devices design is specified */
/* Ignore, hover Device with limited pointing accuracy (touch) */
/**
 * Hide scrollbars during width/height transition with keyframes
 * Source: https://css-tricks.com/hide-scrollbars-during-an-animation/
 */
@-webkit-keyframes hide-scroll {
  from,
  to {
    overflow-y: hidden; } }
@keyframes hide-scroll {
  from,
  to {
    overflow-y: hidden; } }

/*
 * Returns a transition with one or multiple properties and common speed, curve and delay.
 * @param {String,List} string with the property, or each value of the list is a property
 * @param {number} speed - passed directly or through the speed function (i.e. 150ms or speed(t2))
 * @param {string} curve - passed directly or through the curve function (i.e. linear or curve(ease2))
 * @param {number} delay - passed directly or through the speed function (i.e. 10ms or speed(t1))
 * Examples of use:
 * @include byl-transition((border-color));
 * @include byl-transition((border-color, height), speed(t2));
 * @include byl-transition((border-color, height), null, curve(ease3));
*/
/*
 * Returns a transition with multiple properties and independent speed, curve and delay.
 * @param {List} each value of the list is in turn a list for each transition properties and values
 * Expected order in each transition will be property, speed, curve and delay
 * Examples of use:
 * @include byl-complex-transition((height, speed(t3)), (opacity, null, curve(ease3)));
*/
/*
 * Returns a set of selectors to apply some interaction styles to,
 * when we need to style the element or its related nodes
*/
/*
 * Returns a set of selectors to apply some interaction active styles to,
 * when we need to style the element or its related nodes
*/
/*
 * Adds content for an interaction state
*/
/**
 * The product tiles grows with the columns of the product grid. These columns
 * are defined using bootstrap:
 *
 * >=0     2 columns
 * >=768   4 columns
 *
 * Because of this, the design considers two product tile sizes (S, L) to define
 * the look&feel of the tiles depending on the space that those columns leave to
 * grow to a tile
 *
 * >=0     tileS  - non-fluid
 * >=375   tileS  ---- fluid ---> 767 tileL
 * >=768   tileS  - non-fluid
 * >=1025  tileS  ---- fluid ---> 1920 tileL
 * >=1920  tileL  - non-fluid
 *
 * This mixin eases the task of defining the fluid values of a property for
 * these workflow
 *
 * @param {string} $property - Property name
 * @param {any} $small-tile-value - Property vale for a tile of size S
 * @param {any} $big-tile-value - Property vale for a tile of size L
 */
.single-approaching-discount {
  margin-bottom: 0.3125rem;
  color: #28a745;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125); }

.edit {
  margin-right: 0.625em; }

.product-edit {
  margin-top: auto; }
  .product-edit a {
    font-size: 0.813em; }

.item-attributes {
  display: inline-block;
  vertical-align: top; }

.line-item-divider {
  margin: 0.625em -0.625rem 0.625em -0.625rem; }

.line-item-price {
  color: #222;
  font-size: 1em; }

.line-item-price-info {
  margin-bottom: 0.5rem;
  font-size: 0.75em; }

.no-margin-top {
  margin-top: 0; }

.product-to-remove {
  font-weight: bold; }

.product-info .remove-btn {
  position: absolute;
  top: -0.625rem;
  right: 0.25rem;
  padding: 0;
  color: #999;
  font-size: 1.625em;
  background-color: #fff;
  border: 0; }
  @media (min-width: 1025px) {
    .product-info .remove-btn {
      top: 0;
      right: -0.625rem;
      bottom: 0;
      margin-top: -0.625rem;
      margin-bottom: -0.625rem; } }

.bonus-product {
  display: block;
  text-align: center; }

.line-item-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.bundle-includes {
  margin-bottom: 0.625em;
  font-size: 0.813em; }

.cart-content .bundled-line-item + .bundled-line-item::before,
.cart-content .bonus-line-item-row + .bonus-line-item-msg::before {
  display: block;
  margin: 0.625em -0.625em;
  border-bottom: 0.063em dashed #ccc;
  content: ''; }

.quantity {
  width: 100%;
  min-width: 5em; }

.bundle-misc {
  font-size: 0.813rem; }
  @media (max-width: 1024.98px) {
    .bundle-misc {
      margin-bottom: 0.625em; } }

.bundled-line-item .item-attributes {
  margin-left: 0; }

.bonus-product-button {
  margin-right: 1.5em; }

/*# sourceMappingURL=cart.css.map*/