/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_custom_bbw/cartridge/client/default/scss/experience/components/commerceLayouts/pickedJustForYou.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * Get Font Family Function
 *
 * This function retrieves the font family based on the provided font type and RTL status.
 *
 * Parameters:
 *   $fontType: Type of font family to retrieve. Default is "base".
 *   $noRTL: Boolean indicating whether to exclude RTL support. Default is false.
 *
 * Returns:
 *   Font family value based on the provided parameters.
 */
/**
 * Typography Value Function
 *
 * This function retrieves the value of a specified typography property for a given text type and optional media breakpoint.
 *
 * Parameters:
 *   $property: The typography property to retrieve.
 *   $textType: The text type for which the typography property value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve typography property value for responsive designs.
 *
 * Returns:
 *   The value of the specified typography property for the given text type and optional media breakpoint.
 */
/**
 * Font Size Function (fz)
 *
 * This function retrieves the font size value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font size value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font size value for responsive designs.
 *
 * Returns:
 *   The font size value for the specified text type and optional media breakpoint.
 */
/**
 * Line Height Function (lh)
 *
 * This function retrieves the line height value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the line height value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve line height value for responsive designs.
 *
 * Returns:
 *   The line height value for the specified text type and optional media breakpoint.
 */
/**
 * Font Weight Function (fw)
 *
 * This function retrieves the font weight value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font weight value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font weight value for responsive designs.
 *
 * Returns:
 *   The font weight value for the specified text type and optional media breakpoint.
 */
/**
 * Font Family Function (ff)
 *
 * This function retrieves the font family value for a given text type and optional media breakpoint using the `typography-value` function.
 *
 * Parameters:
 *   $textType: The text type for which the font family value is needed. Default is "default".
 *   $media: Optional media breakpoint to retrieve font family value for responsive designs.
 *
 * Returns:
 *   The font family value for the specified text type and optional media breakpoint.
 */
/**
 * Apply Style Rules Mixin
 *
 * This mixin applies style rules based on the provided map.
 * It supports nested states, pseudo-elements, media queries, class states,
 * custom mixins for icons and text styles, and regular CSS properties.
 *
 * Parameters:
 *   $mainMap: Main map containing the style rules.
 *   $key: Key in the main map to apply styles for (optional).
 *   $textType: Text type for additional comments (optional).
 */
/**
 * Text Mixin
 *
 * This mixin applies text styles based on the provided text type and text map.
 *
 * Parameters:
 *   $textType: Text type to apply styles for (default: body).
 *   $textMap: Text map containing the text styles (default: $brandTypography).
 */
/**
 * Create Components From Map Mixin
 *
 * This mixin generates CSS components based on the provided main map and class prefix.
 *
 * Parameters:
 *   $mainMap: Main map containing component types and their respective styles.
 *   $classPrefix: Prefix for the generated CSS class names.
 */
/**
 * Mixin for creating helper classes with configurable properties.
 * This mixin generates helper classes based on the provided configuration.
 *
 * @param {Map} $propertyConfig - Configuration map containing properties and values.
 * @param {String} $propertyClass - Base class name for the helper classes.
 */
/**
 * Mixin to handle helper class properties and values
 *
 * This mixin iterates over a list of property values and generates helper classes for each value.
 * It includes the `createHelperForEachMedia` mixin to create helper classes for each media breakpoint,
 * and then invokes the `helperHandlerValues` mixin to apply the property values to the generated classes.
 *
 * @param {String} $classname - The base class name for the helper classes
 * @param {List} $properties - List of properties to apply to the helper classes
 * @param {List} $values - List of values to apply to the helper classes
 * @param {String} $unit - Optional unit for the property values (default: '')
 * @param {Map} $propertyConfig - Optional configuration for generating helper classes (default: false)
 */
/**
 * Mixin to handle a single property value for a helper class.
 * If the value is zero, the unit is removed.
 * If the unit is "rem" and the value is not zero, it is converted to "rem".
 * Generates CSS with !important flag for specificity.
 *
 * @param {String} $property - The CSS property name.
 * @param {Number} $value - The value of the CSS property.
 * @param {String} $unit - The unit of measurement for the value.
 */
/**
 * Mixin to create helper classes for each media breakpoint.
 * Dynamically generates helper classes based on the provided parameters.
 * Applies content within each generated helper class.
 *
 * @param {String} $classNameStart - The base class name for the helper classes.
 * @param {String} $classNameEnd - The optional suffix for the helper class name.
 * @param {Map} $propertyConfig - Configuration settings for the helper classes.
 */
/**
 * Mixin to apply absolute positioning to an element based on specified device breakpoints.
 * Positions the element horizontally and vertically with options for center, left, or right alignment.
 * Generates CSS for absolute positioning and alignment properties.
 *
 * @param {String} $index - Index value used to generate unique class names for positioned elements.
 * @param {String} $device - Device breakpoint identifier ('d' for desktop, 'm' for mobile, etc.).
 */
/**
 * Mixin to apply static positioning to an element within a root container.
 * Handles various alignment options based on specified device breakpoints.
 * Generates CSS for static positioning and alignment properties.
 *
 * @param {String} $root - Selector for the root container element.
 * @param {String} $device - Device breakpoint identifier ('d' for desktop, 'm' for mobile, etc.).
 */
/**
 * Mixin to generate media queries for screen sizes equal to or greater than the specified breakpoint.
 *
 * @param {String} $media - The breakpoint name.
 */
/**
 * Mixin to generate media queries for screen sizes equal to or smaller than the specified breakpoint.
 *
 * @param {String} $media - The breakpoint name.
 */
/**
 * Mixin to generate media queries for screen sizes between two specified breakpoints.
 *
 * @param {String} $mediaUp - The upper breakpoint name.
 * @param {String} $mediaDown - The lower breakpoint name.
 */
.firefox .picked-just-recomm {
  scrollbar-width: thin;
  scrollbar-color: #828282 #f2f2f2;
}

@media only screen and (min-width: 768px) {
  .picked-just-header-wrapper__title {
    line-height: 1.75rem;
    letter-spacing: 0;
    margin-top: 20px;
  }
}

.picked-just-contatiner {
  margin: 48px 16px;
}
@media only screen and (min-width: 768px) {
  .picked-just-contatiner {
    margin: 56px auto;
  }
}

.picked-just-recomm {
  -webkit-column-gap: 16px;
     -moz-column-gap: 16px;
          column-gap: 16px;
  overflow-y: auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  scrollbar-width: none;
}
@media only screen and (min-width: 768px) {
  .picked-just-recomm {
    padding-bottom: 28px;
    -webkit-column-gap: 32px;
       -moz-column-gap: 32px;
            column-gap: 32px;
    margin: 0 16px;
    scrollbar-width: auto;
  }
  .picked-just-recomm::-webkit-scrollbar {
    margin-top: 20px;
    height: 8px;
    display: inline;
  }
  .picked-just-recomm::-webkit-scrollbar-thumb {
    background-color: #828282;
  }
}
@media only screen and (max-width: 1023px) {
  .picked-just-recomm {
    scrollbar-color: unset;
  }
  .picked-just-recomm::-webkit-scrollbar {
    display: none;
  }
}
.picked-just-recomm__item .product .b-product-tile {
  min-height: 100%;
  margin-top: auto;
  margin-bottom: 0;
  min-width: 228px;
  max-width: 256px;
  overflow: visible;
}
.picked-just-recomm__item .product .b-product-tile__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer {
  margin-top: auto;
}
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .add-to-cart,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .notify-me-btn,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .out-of-stock {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .add-to-cart:hover,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .notify-me-btn:hover,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .out-of-stock:hover {
  background-color: #4d4d4d;
  border-color: #4d4d4d;
}
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .add-to-cart:active,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .notify-me-btn:active,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .out-of-stock:active {
  background-color: #828282;
  border-color: #828282;
}
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .add-to-cart:focus,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .notify-me-btn:focus,
.picked-just-recomm__item .product .b-product-tile__body .tile-body-footer .out-of-stock:focus {
  background-color: #4d4d4d;
  border-color: #4d4d4d;
  outline: 1px dotted #000;
  outline-offset: 2px;
}
.picked-just-recomm__item .product .b-product-tile__body .price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 8px 0 2px;
}
.picked-just-recomm__item .product .b-product-tile__body .price span:first-of-type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 5px;
}
.picked-just-recomm__item .product .b-product-tile__img-wrapper {
  margin-bottom: 12px;
}
.picked-just-recomm__item .product .b-product-tile__img-wrapper .suggestions__btn-add-to-cart {
  display: none;
}
.picked-just-recomm__item .product .b-product-tile__carousel .carousel-controls-wrapper,
.picked-just-recomm__item .product .b-product-tile__carousel .slider-control {
  display: none;
}
.picked-just-recomm__item .product .b-product-tile__product-type {
  color: #4d4d4d;
}
.picked-just-recomm__item .product .b-product-tile square-placement {
  display: none;
}
.picked-just-recomm__item .product .b-product-tile__ratings, .picked-just-recomm__item .product .b-product-tile__availability {
  display: none;
}
.picked-just-recomm__item .product .b-product-tile__price-link {
  pointer-events: none;
}
.picked-just-recomm__item .product .b-product-tile__price-link:hover {
  pointer-events: none;
}

/*# sourceMappingURL=default\css\experience\components\commerceLayouts\pickedJustForYou.css.map*/