/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/string-replace-loader/index.js??ruleSet[1].rules[3]!./cartridges/app_custom_hmk/cartridge/client/default/scss/common-critical-na.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*md
@no-stat

# Breakpoints

## Boilerplate breakpoints

Boilerplate has 4 main breakpoints that targeted to [supported devices](https://confluence.ontrq.com/display/RSB/SFRA+BP+-+Supported+Browsers+and+Devices)
 - iPhone X, iPad, MS Windows desktop / Macbook Pro retina

** Please not iPad landscape - is LG breakpoint **

[See more info](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

## Supported screen resolutions

Boilerplate is come "Retina ready". It supports MDPI and XHDPI pixel density across all site.

| Device             | Screen Resolution, CSS pixels | Pixel density |
|--------------------|-------------------------------|---------------|
| Desktop Windows PC | 1920x1080                     | MDPI          |
| Macbook pro 13     | 1280x800 / 1440x900           | XHDPI         |
| iPad Air 2         | 1024x768                      | XHDPI         |
| iPhone X           | 375x812                       | XHDPI         |
| Samsung Galaxy S9  | 360x740                       | XHDPI         |

## Supported screen scaling

Boilerplate comes with support of 1:1, 1:1.25, 1.5, 1:2 screen scaling. To do so you need
to take care not only by whole pixel but pixel fractions that is used.

*/
/*md
@no-stat

# Media queries (breakpoints)

We have a `media` mixin for make it easier to implement responsive styling via media queries.

You can nest them right within other blocks of CSS,which puts the properties and values you are changing right next
to each other.
That creates an obvious connection between them, which is a much nicer authoring experience than trying to maintain
those changes separated by tons of other code or in a different file.

## Configuration

**Site Layout Conception** details with examples you can find [here](https://confluence.ontrq.com/display/RSB/SFRA+-+Site+Layout+Conception)

`media` mixin works with `$media` map where `media-name: media query`

This is how `$media` map looks:

```scss
$media: (
	sm: 'screen and (max-width: 767px)',
	md: 'screen and (min-width: 768px) and (max-width: 1199px)',
	lg: 'screen and (min-width: 1024px) and (max-width: 1366px)',
	xl: 'screen and (min-width: 1201px)',
	md-up: 'screen and (min-width: 768px)',
	md-down: 'screen and (max-width: 1023px)',
	lg-up: 'screen and (min-width: 1024px)',
	lg-down: 'screen and (max-width: 1367px)'
);
```

## Usage

Here is how to use `media()` mixin:

```scss
.b-block {
	// styles outside of a media query

	@include media(sm) {
		// styles for "s" viewports
	};

	@include media(md-up) {
		// styles for "m" and "l" viewports
	};
}
```

Simply edit this file and add your own media queries to `$media` map.

*/
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

We can use several grid configs per project. To do this, we need to add a new grid name to the `$grids` map with settings.

```scss
$grids: (
	default: (
		//...
	),
	altered: (
		//...
	)
);
```

### Gaps / margin / column span configuration:

```scss
$grids: (
	default: (
		grid-columns: ('xl': 12,   'lg': 12,   'md': 12,   'sm': 6),
		grid-gutter:  ('xl': 20px, 'lg': 20px, 'md': 20px, 'sm': 20px),
		grid-margin:  ('xl': 60px, 'lg': 40px, 'md': 20px, 'sm': 20px),
	)
);
```

## Working with grids

### Development approaches

#### 1. Using `g-grid` mixin when css grid is applicable.

With features of `display: grid`. Please see [g-grid](02-components-g-grid.html) details.

#### 2. Using `grid-span` function to create custom layout based on (flex, float, inline-block, table etc.)

Could be used in conjunction with different display properties while maintaining their common features(floating, centering, etc.).
Please see [grid-span](01-core-functions-grid-span.html) details.

As example please see [flex based non semantic grid](05-blocks-guide-l-cols.html) like you could see before CSS grid era (Foundation, Bootstrap etc.).

#### 3. Get gaps / margin / column span to create your own grid layout system.

For that we have the next grid functions in `_grids_tools.scss`:
- grid-gutter
- grid-margin
- grid-columns

Please see [grid functions](00-configuration-grids_tools.html) details with usage examples.
*/
/*md
@no-stat

# grid-* (grid config get functions)

This functions designed to get data from grid configuration config and
use it for creating grids or reuse grid configuration into different components.

* `grid-gutter`
* `grid-columns`
* `grid-margin`

## Usage

```scss

// Configuration:

$grids: (
	default: (
		grid-columns: ('xl': 12,   'lg': 12,   'md': 12,   'sm': 6),
		grid-gutter:  ('xl': 20px, 'lg': 20px, 'md': 20px, 'sm': 20px),
		grid-margin:  ('xl': 60px, 'lg': 40px, 'md': 20px, 'sm': 20px),
	),
	altered: (
		grid-columns: ('xl': 10,   'lg': 10,   'md': 10,   'sm': 6),
		grid-gutter:  ('xl': 10px, 'lg': 10px, 'md': 10px, 'sm': 10px),
		grid-margin:  ('xl': 40px, 'lg': 30px, 'md': 30px, 'sm': 20px),
	)
);

// Usage:

.component {
	padding: grid-gutter('lg'); // => grids -> 'default' -> grid-gutter -> lg = 20px
	padding: grid-gutter('lg', 'altered'); // => => grids -> 'altered' -> grid-gutter -> lg = 10px
}

.component-b {
	margin: grid-margin('lg');
	margin: grid-margin('lg', 'altered');

	@include media(sm) {
		margin: grid-margin('sm');
	}
}

.component-c {
	width: percentage(grid-columns('lg') / 4);

	@include media(sm) {
		width: percentage(grid-columns('sm') / 2);
	}
}
```
*/
/*md
@no-stat

# Globals variables

This variables are set of different global settings that is used across sets of components.

It include:

* globals
* depth of components (box-shadow)
* motion of components

*/
/*md
@no-stat

# Z-indexes

Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is difficult.
With different stacking orders and contexts, keeping track of them as their numbers increase can be hard.
<br />
<br />
We use sass function to help manage z-indexes from single place.
The most important requirement of this technique is sticking to it.
Any rogue hard-coded z-index values could compromise the integrity of those derived from your list.

## Usage

**We don't use hardcoded integer `z-index` values. Instead, we use indexes from the map `$z-indexes`**

### 1. Set up `$z-indexes` map
```scss
$z-indexes: (
    components: (
        component_name: (),
        checkbox: (
            before: (),
            after: (),
            icon: (),
        )
    ),
    content: (),
    popup-menu: ()
);
```

### 2. Add values in SCSS classes using `z()` function

#### Global components
```scss
.b-components { z-index: z(components); }
.b-content { z-index: z(content); }
.b-pop_up-menu { z-index: z(popup-menu); }
```

#### Inside a component
```scss
.b-component_name { z-index: z(components, component_name); }
.b-checkbox {
    &-before { z-index: z(components, checkbox, before); }
    &-after { z-index: z(components, checkbox, after); }
    &-icon { z-index: z(components, checkbox, icon); }
}
```

### 3. Get resulting CSS
```scss
.b-components { z-index: 1; }
.b-content { z-index: 2; }
.b-pop_up-menu { z-index: 3; }

.b-component_name { z-index: 1; }
.b-checkbox-before { z-index: 1; }
.b-checkbox-after { z-index: 2; }
.b-checkbox-icon { z-index: 3; }
```

*/
/*md
@no-stat

# adjust-color-to-bg

This function used to adjust color of some element depending on provided background color.
As basis function use luminance human persived criteria as breakpoint for colors
[See more details](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef).

It is especially useful for crating flexible themes.

## Arguments

```
$backgroundColor - bg color
$colorInverse - color if bg is dark. If not provided would return $color-white
$colorNormal - color if bg is light. If not provided would return $color-black

adjust-color-to-bg($backgroundColor, $colorInverse, $colorNormal)
```

## Usage

```scss
.component {
	color: adjust-color-to-bg($color-white);

	// => results default 'white' if background dark
	// => results default 'black' if background is light
}

.component-custom-inverse-color {
	color: adjust-color-to-bg($color-light-gray, grey);

	// => results 'grey' if background dark
	// => results default 'black' if background is light
}

.component-all-custom-colors {
	color: adjust-color-to-bg($color-light-gray, green, red);

	// => result 'green' if background dark
	// => result 'red' if background is light
}
```

Based on Hugo Giraudel [work](https://css-tricks.com/snippets/sass/luminance-color-function/)
*/
/*md
@no-stat

# grid-span

`grid-span` function returns the width which 1 or several columns are takes (including inner gutters).

It returns value in percents.

This could be used for direct set to **width, max-width, flex-basis, etc.** to create
custom grid layout.

### Parameters

```scss
@function grid-span($column: 1, $break: 'lg', $with-gutter: false, $grid: 'default')
```

## Examples

### Flex-basis example

```scss
.b-grid {
	display: flex;

	.b-grid__item {
		flex-basis: grid-span($column: 3);
	}
}
```

### Floated items example

```scss
.b-grid {
	.b-grid__item {
		float: left;
		width: grid-span($column: 2);
	}
}
```

### Inline-block items example

```scss
.b-grid {
	.b-grid__item {
		display: inline-block;
		max-width: grid-span($column: 2);
	}
}
```

Please see [grid](00-configuration-grids.html) for more grid usage examples.

*/
/*md
@no-stat

# aspect-ratio

This function used to get percentage value of aspect ratio color to use in `padding` to
create container for images.

This technique used to prevent content bouncing during load and create layout shifts.

Calculation. 16:9 Aspect Ratio would result `(9 / 16) * 100 = 0.5625%`.

See proposed [specs](https://drafts.csswg.org/css-sizing-4/#aspect-ratio)

## Arguments

```
$width - width of element
$height - height of element

=> percentage

aspect-ratio($width, $height)
```

## Usage

```scss
.component {
	padding-bottom: aspect-ratio(16, 9);
	padding-bottom: aspect-ratio(1920, 1080);
	padding-bottom: aspect-ratio(1920px, 1080px);
}

.b-suggestions-item_image {
	@include g-image_container(_container, aspect-ratio(16, 9));

	img {
		@include g-image_container(_img);
	}
}
```

*/
/*md
@no-stat

# Hide

This mixin is especially useful for hiding text
or visually hide needed elements

Here is a list of parameters you can use:

* text - helps to hide text without loosing visibility for parsers
* visually - like for text but for the whole element

## Usage

```scss
.component {
	@include hide(visually);
}

.h-hide_vis {
	@include hide(visually, true);
}
```
*/
/*md
@no-stat

# Hover-supported

This mixin is designed to address iOS standard behavior of first tap - hover,
second tap - click that is engaged when control has hover styles applied.

This is critical for functionality like back-top-button. If we apply hover styles as is.
It would be activated only after second tap.

If rules are wrapped into this media it applied only in case if device have fine
pointer mechanism. [See more info](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer).

Please note about mixed input devices - touch screen + mouse + touchpad,
touchpad + trackpoint, touch screen + stylus ("apple pencil") etc. -
sometimes browser do not report it properly, so logic should be builded around
exclusions.

## Usage

```scss
.component {
	@include hover-supported {
		&:hover {
			// Hover styles that should not be applied to touch
		}
	};
}
```
*/
/*md
@no-stat

# RTL selector

This mixin is designed to alter styles for RTL languages.

It mostly needed for alter position:absolute left|right coords, but could be used
as facade for different selectors.

## Usage

```scss
.component {
	left: 0;
	@include rtl {
		left: initial;
		right: 0;
	};
}
```
*/
/*md

# g-button component

Designed to provide the same styles for buttons across different components. It can be used with `<button>` or `<a>` elements.

## g-button

Create base completed button patterns using the g-button mixin.

Usage: `@include g-button`

By default, the mixin uses the `default_light` theme and `large` size. You can customize it using the following parameters.

Usage: `@include g-button(outline_dark, small)`

Usage: `@include g-button(outline_light)`

Usage: `@include g-button-constructor(__theme__, __size__)`

### Parameters

#### `$_theme`

Default value: `default_light`

Available values:
- `default_light`
- `default_dark`
- `outline_light`
- `outline_dark`

#### `$_size`

Default value: `large` (height: 44px)

Available values:
- `large` (height: 44px)
- `small` (height: 36px)
- `medium` (height: 30px)

## g-button-constructor

Describes button styles for each state, mode, and theme.

Usage: `@include g-button-constructor(outline, dark, small)`

Usage: `@include g-button-constructor(__mod__, __theme__, __size__)`

### Parameters

#### `$_mod`

Default value: `default`

Available values:
- `default`
- `outline`

#### `$_theme`

Default value: `light`

Available values:
- `light`
- `dark`

#### `$_size`

Default value: `large` (height: 44px)

Available values:
- `large` (height: 44px)
- `small` (height: 36px)
- `medium` (height: 30px)

## g-button-reset

Resets all button styles. Used when a button should have the same style as another component, such as a link.

Usage: `@include g-button-reset`

For a link: `@include g-button-reset` `@include g-link`

## g-button-size

Adds a custom height to a button.

Usage: `@include g-button-size`
Usage: `@include g-button-size(medium)`

### Parameters

#### `$_size`

Default value: `large` (height: 44px)

Available values:
- `large` (height: 44px)
- `small` (height: 36px)
- `medium` (height: 30px)

*/
/*md

# g-button_icon_only

Designed to provide same styles of buttons that contain only icon (without any text)
across different components without explicit CSS class.

It is used for header menubar icons, hamburger menu items and dialog close button.

```scss
.b-dialog {
	// ...
	&-close {
		@include g-button_icon_only;
	}
}
```
*/
/*md

# g-radio

The component is generally used for choosing item which includes in the radio group.

## Customization by SCSS

Radio button styles that used in several component.

Designed to use same style of radio in different components
ex: b-radio, b-payment_option, b-shipping_option, b-stores etc.

It provide styles only for icon element based on input node.

```scss_example
.b-option_switch {
	// ...
	&-input {
		@include g-radio(_input);
	}

	&-icon {
		@include g-radio(_icon);

		.b-option_switch-input:active + & {
			@include g-radio(_icon, m-active);
		}

		.b-option_switch-input:hover + & {
			@include g-radio(_icon, m-hover);
		}

		.b-option_switch-input:checked + & {
			@include g-radio(_icon, m-checked);
		}

		.b-option_switch-input[disabled] + & {
			@include g-radio(_icon, m-disabled);
		}
	}
}
```
*/
/*md

# g-switch

The component is generally used for checkbox switch.

```scss_example
.b-switch {
	// ...
	&-input {
		@include g-switch(_input);
	}

	&-icon {
		@include g-switch(_icon);

		.b-switch-input:active + & {
			@include g-switch(_icon, m-active);
		}

		.b-switch-input:checked + & {
			@include g-switch(_icon, m-checked);
		}
	}
}
```
*/
/*md

# g-checkbox

## Customization by SCSS

Checkbox styles that used in several component.

Designed to use same style of checkbox in different components without additional CSS class.
ex: `b-checkbox`, `b-refinement_checkbox`, `b-account_preference` etc.

It provide styles only for icon element based on SVG.

```scss
.b-refinement_checkbox {
	// ...
	&-icon {
		@include g-checkbox(_icon);

		.b-refinement_checkbox:active & {
			@include g-checkbox(_icon, m-active);
		}

		.b-refinement_checkbox.m-checked & {
			@include g-checkbox(_icon, m-checked);
		}

		.b-refinement_checkbox.m-disabled & {
			@include g-checkbox(_icon, m-disabled);
		}
	}
}
```
*/
/*md

# g-spinner

Global spinner component applied to different blocks that fetch data.

Designed to use same style of spinner in different components and on particular breakpoints.
Ex: `b-minicart_popup`, `b-suggestions`, `b-plp_grid`, `b-product_details`, `b-cart` etc.

```scss
.b-product_gallery {
	&.m-loading_long::before {
		@include g-spinner();
	}
	// ...
}
```
*/
/*md

# g-link_ui

This component is designed to provide consistent styles of UI-type links across
different UI components. For example links in header or footer, that expected to be more
like buttons and do not have attributes that expected for text links (hyperlinks) -
to be underlined, have visited state etc.

## Usage

```scss
// for regular cases
.b-menu_bar-item {
	@include g-link_ui;
}

// for cases when text color is inverted (white, red etc) and action color will not
// be good (ex blue hover state on red alert banner)
.b-component-link {
	@include g-link_ui(inherit);
}
```

*/
/*md

# g-link_hamburger

Hamburger menu generic link that used in several component.

Designed to use same style of hamburger link in different components
ex: menu, account link, language switcher etc.

```scss
.b-menu {
	// ...
	&-item {
		@include media(sm) {
			@include g-link_hamburger;
		}
	}
}
```
*/
/*md

# g-image_container

This is global component designed to hold image in place and preventing from layout bouncing during page load.

It based on `padding-bottom` trick. `padding-bottom` and `padding-top` relative units are based
on parent element `width`. So if you had an element that is 500px wide, and padding-top of 100%,
the padding-top would be 500px. [More info](https://css-tricks.com/aspect-ratio-boxes/)

```scss
.b-suggestions-item_image {
	@include g-image_container(_container, 100%);

	img {
		@include g-image_container(_img);
	}
}

.b-suggestions-item_image {
	@include g-image_container(_container, 100%);

	img {
		@include g-image_container(_img);
	}
}
```

You could change aspect ration in mixin:

```scss
@include g-image_container(_container, 100%);   // 1:1
@include g-image_container(_container, 150%);   // 2:3
@include g-image_container(_container, 133%);   // 3:4
@include g-image_container(_container, 125%);   // 5:4
@include g-image_container(_container, 75%);    // 4:3
@include g-image_container(_container, 66.6%);  // 3:2
@include g-image_container(_container, 56.25%); // 16:9
```

But it is preferable to define only one aspect ration through all images and not change it.

*/
/*md

# g-snap_scroll

Components that apply snap scroll CSS rules to different components and cases.

Designed to use same snap scroll functionality in different components and/or on
particular breakpoints.
Ex: b-carousel, b-product_gallery, .b-product_slider etc.

```scss
.b-product_gallery {
	&-thumbs_track {
		@include g-snap_scroll($direction: y);
	}
	// ...
}
```

[Snap scroll MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap)

*/
/*md

# g-backdrop_dialog

Dialog window backdrop styles that used in several components and particular breakpoints.

Serve as overlay and container to hold dialog box inside + provide scroll on overflow.
This is solution for large dialogs that scrolled inside viewport.

```scss
.b-menu_panel {
	@include media(sm) {
		@include g-backdrop_dialog;
	}
	// ...
}
```
*/
/*md

# g-backdrop_panel

Backdrop (overlay) for panels designed to handle swipe-to-close animation.

Serve as regular overlay.

```scss
.b-menu_panel {
	@include media(sm) {
		@include g-backdrop_dialog;
	}
	// ...
}
```
*/
/*md

# g-section_holder

This is global component designed to hold some standalone section of the site
in the manner as it would be just wrapped into main container.

It could be used not only for standalone blocks, but also for page layouts.

```scss
.b-section {
	background: green;

	&-inner {
		@include g-section_holder;
	}
}
```
*/
/*md

# g-section_holder_header

Since header is differs from other container (g-section_holder)
we need special component with different `max-width` and `margin` than
`section_holder`.

This is global component designed to hold header of the site.

On projects it could be removed and changed to `section_holder`.

```scss
.l-header-inner {
	background: green;

	&-inner {
		@include g-section_holder_header;
	}
}
```
*/
/*md

# g-heading_*

Basic simple typography styles applied to different UI components.

This covers only very basic cases and should be extended on project.

```scss
.b-cart_empty {
	// ...

	&-title {
		@include g-heading_1;

		margin-bottom: 32px;
	}
}
```
*/
/*md

# g-accordion

Global accordion component

## Customization by SCSS

This implementation allow to use accordion for one vieport and any other component for rest viewports

```scss
.b-accordion {
	@include g-accordion;

	&-item {
		@include g-accordion(_item);
	}

	&-title {
		@include g-accordion(_control);
	}

	&-content {
		@include g-accordion(_content);

		&[aria-hidden='false'] {
			@include g-accordion(_content, expanded);
		}
	}

	&-content_inner {
		@include g-accordion(_content_inner);
	}
}
```
*/
/*md

# g-grid

g-grid is layout component based on CSS grid.

It is designed to use project defined grid (see _grids.scss) into components where CSS grid is
applicable.

As the result this component declare CSS grid configuration. Ex:

```
// scss
@include g-grid();
// css
grid-gap: 20px;
grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
```

And that it could be used to place items inside this declared grid. Ex:

```scss
.b-grid {
	@include g-grid();

	.b-columns__item {
		@include media(lg-up) {
			grid-column: 2 / span 4;
			grid-row: 1 / 2;
		}

		@include media(md-down) {
			grid-column: grid-start / span 7;
		}
	}
}
```

Please see [grid](00-configuration-grids.html) for more grid usage examples.

*/
/*md

# g-grid

g-grid is layout component based on CSS grid.

It is designed to use project defined grid (see _grids.scss) into components where CSS grid is
applicable.

As the result this component declare CSS grid configuration. Ex:

```
// scss
@include g-grid();
// css
grid-gap: 20px;
grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
```

And that it could be used to place items inside this declared grid. Ex:

```scss
.b-grid {
	@include g-grid();

	.b-columns__item {
		@include media(lg-up) {
			grid-column: 2 / span 4;
			grid-row: 1 / 2;
		}

		@include media(md-down) {
			grid-column: grid-start / span 7;
		}
	}
}
```

Please see [grid](00-configuration-grids.html) for more grid usage examples.

*/
/*md

# g-fullwidth

The component is generally used for fullwidth view (full viewport) and ignore main sitewidth margins and pddings.

## Usage

Add @include g-fullwidth() to the section in the main container to stretch block out of the main container

*/
/*md

# g-text_overflow

This is global component designed to reduce text lines and add "..." in the end.

## Usage

```scss
.component-link {
	@include g-text_overflow;
}

.component-link {
	@include g-text_overflow(2);
}
```

*/
body {
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
body.m-chatbot {
  overflow: initial;
  pointer-events: all;
  visibility: visible;
}

.b-header_utility,
.l-header,
.b-menu_panel {
  pointer-events: all;
  visibility: visible;
}

@layer thirdparty, defaults, components, layouts, helpers, overrides;
@layer defaults {
  @layer normalize, typography;
}
@layer defaults.normalize {
  /* stylelint-disable selector-max-universal */
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  /* stylelint-enable */
  a {
    background-color: transparent;
  }
  ul,
  ol,
  p {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    margin: 0;
  }
  figure {
    margin: 0;
  }
  img {
    border: none;
    height: auto;
    max-width: 100%;
  }
  svg {
    overflow: hidden;
    vertical-align: middle;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  td,
  th {
    padding: 0;
  }
  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }
}
[hidden] {
  display: none !important;
}

html {
  background: #ffffff;
  color: #293035;
  direction: ltr;
  font: 102 15px / 24px "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 24px;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  font-synthesis-style: auto;
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
html.m-has_dialog {
  overflow-x: hidden;
  overflow-y: hidden;
}
html.m-chatbot {
  background: none;
}

@supports (font-variation-settings: normal) {
  html {
    font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-stretch: 700%;
  }
}
body {
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  min-width: 320px;
  overflow: hidden;
  padding: 0.01px 0 0;
}
html[dir=rtl] body {
  direction: rtl;
}

a {
  color: inherit;
}
@media not all and (pointer: coarse) {
  a:hover, a:focus {
    color: inherit;
  }
}
a:not([class]) {
  color: #095c9c;
}

*:focus {
  outline: none;
}

button {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

img {
  overflow: hidden;
}

b,
strong {
  font-weight: 136;
}

:target {
  scroll-margin-top: 120px;
}

.b-sr_only {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}

@media screen and (max-width: 767.9px) {
  .m-hidden_sm {
    display: none;
  }
}

@media screen and (max-width: 1023.9px) {
  .m-hidden_md {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .m-hidden_lg {
    display: none;
  }
}

form input:-webkit-autofill {
  animation: autofill-start 1ms linear;
}
form input:not(:-webkit-autofill) {
  animation: autofill-end 1ms linear;
}

@keyframes autofill-start {
  from {
    /* intentionally empty */
  }
  to {
    /* intentionally empty */
  }
}
@keyframes autofill-end {
  from {
    /* intentionally empty */
  }
  to {
    /* intentionally empty */
  }
}
.m-has_dialog .l-page {
  overflow: hidden;
}
.l-page-content {
  width: 100%;
}
.m-has_dialog .l-page-content, .m-has_dialog .l-page-footer {
  overflow-y: scroll;
}

.l-header {
  background: #ffffff;
  padding: 1px 0;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 1023.9px) {
  .l-header {
    box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.25);
    position: sticky;
    top: -0.1px;
  }
}
@media screen and (max-height: 420px) {
  .l-header {
    position: static;
  }
}
.m-has_dialog .l-header {
  overflow-y: scroll;
}
.l-header-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-header-inner {
    padding: 12px 12px 0 20px;
  }
}
@media screen and (min-width: 1367px) {
  .l-header-inner {
    padding: 12px 30px 0 40px;
  }
}
@media screen and (max-width: 1023.9px) {
  .l-header-inner {
    padding: 12px 15px 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .l-header-inner.ab-test-participant {
    padding-bottom: 12px;
  }
  .l-header-inner.ab-test-participant .l-header-middle {
    margin-top: 12px;
  }
}
.l-header-left {
  flex: 1 0 auto;
}
@media screen and (min-width: 1024px) {
  .l-header-left {
    flex: 0 1 165px;
    margin-right: 50px;
  }
}
@media screen and (max-width: 1023.9px) {
  .l-header-left {
    order: 1;
  }
}
@media screen and (min-width: 1024px) {
  .l-header-middle {
    flex: 1 0 auto;
  }
}
@media screen and (max-width: 1023.9px) {
  .l-header-middle {
    flex-basis: 100%;
    margin-top: 14px;
    order: 3;
  }
}
@media screen and (min-width: 1024px) {
  .l-header-right {
    margin-left: 28px;
  }
}
@media screen and (max-width: 1023.9px) {
  .l-header-right {
    order: 2;
  }
}
.l-header-flyout-active .l-header-middle {
  flex: 1 0 auto;
}
.l-header-flyout-active .l-header-middle .b-header_actions-item.m-search {
  max-width: unset;
}
.l-header-flyout-active .l-header-right {
  display: none;
}
.l-header-flyout-active .b-search_input {
  display: flex;
}
.l-header-flyout-active .b-search-inner {
  position: unset;
}

body:has(#clp-membership-plus) .hide-mmr {
  display: none;
}

.b-header_promobar {
  background-color: #604099;
  color: #fff;
}
.b-header_promobar .b-find_store-trigger {
  left: unset;
  display: block;
  position: relative;
  top: unset;
  transform: unset;
  max-width: initial;
}
.b-header_promobar .b-find_store-trigger svg {
  display: none;
}
.b-header_promobar .b-find_store-selected {
  display: block;
}
.b-header_promobar .b-find_store-name {
  color: #fff;
}
@media screen and (max-width: 767.9px) {
  .b-header_promobar .b-find_store-name {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
}
.b-header_promobar .b-find_store .b-link.m-nav {
  color: #fff;
}
.b-header_promobar-inner {
  font-size: 14px;
  height: 40px;
  max-width: 1920px;
  padding-left: 25px;
  padding-right: 25px;
  justify-content: flex-end;
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (min-width: 1367px) {
  .b-header_promobar-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
.b-header_promobar-slider {
  position: relative;
  height: 20px;
  flex-grow: 1;
  margin: 0 10px 0 20px;
  overflow: hidden;
}
.b-header_promobar-track {
  position: relative;
  height: 100%;
}
.b-header_promobar-track_item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  max-width: 100%;
  height: 20px;
  line-height: 20px;
  top: 0;
  left: 0;
  z-index: 0;
  cursor: pointer;
  visibility: hidden;
}
@media screen and (max-width: 767.9px) {
  .b-header_promobar-track_item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
}
.b-header_promobar-track_item.fade-in {
  opacity: 1;
  z-index: 1;
  visibility: visible;
}
.b-header_promobar-track_item.fade-out {
  opacity: 0;
  z-index: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.b-header_promobar-navigation {
  display: flex;
  gap: 15px;
  font-size: 14px;
}
.b-header_promobar-navigation_element {
  display: flex;
  align-items: center;
}
.b-header_promobar-navigation_element::before {
  content: "|";
  padding-right: 15px;
}
.b-header_promobar-navigation_element > a {
  color: #fff;
  text-decoration: none;
}
.b-header_promobar-navigation_element:first-child::before {
  content: "";
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-navigation_element.hallmark-plus, .b-header_promobar-navigation_element.blog {
    display: none;
  }
}
.b-header_promobar-drawer {
  display: block;
  color: #000;
  padding: 24px 32px;
  position: absolute;
  width: 100%;
  z-index: 17;
  background-color: #ffffff;
  flex-direction: row;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  transform: translateY(-150%);
}
.b-header_promobar-drawer.display {
  visibility: visible;
  transform: translateY(0);
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer {
    background-color: #604099;
    flex-direction: column;
    padding: 14px 20px;
  }
}
.b-header_promobar-drawer-item {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  width: 100%;
  max-width: 440px;
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-item {
    padding: 0 8px;
  }
}
.b-header_promobar-drawer-item a {
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-item a {
    background-color: #ffffff;
    color: #604099;
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    border-radius: 35px;
    margin-top: 8px;
    text-decoration: none;
    display: block;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-text {
    display: block;
    min-height: 50px;
    color: #ffffff;
  }
}
@media screen and (min-width: 1024px) {
  .b-header_promobar-drawer-carousel {
    width: 100%;
  }
}
.b-header_promobar-drawer-carousel .b-carousel-track {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-header_promobar-drawer-carousel .b-carousel-item {
    width: 25%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-carousel .b-carousel-item {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}
.b-header_promobar-drawer-carousel .b-carousel-control_group {
  display: none;
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-carousel .b-carousel-control_group {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 24px;
    gap: 20px;
    margin-top: 14px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_promobar-drawer-carousel .b-carousel-ctrl {
    display: block;
    position: relative;
    color: #ffffff;
    width: 14px;
  }
}
.b-header_promobar-drawer-carousel .b-carousel-ctrl:hover, .b-header_promobar-drawer-carousel .b-carousel-ctrl:focus {
  background-color: none;
}
.b-header_promobar-drawer-carousel .b-carousel-ctrl.m-disabled {
  opacity: 0.4;
  display: block;
  visibility: visible;
}
.b-header_promobar-drawer-carousel .b-carousel_pagination {
  color: #ffffff;
  font-size: 14px;
}
.b-header_promobar-drawer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.b-header_promobar-drawer li {
  padding: 5px 0;
}
.b-header_promobar-toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  transform: rotate(90deg);
}
.b-header_promobar-toggle::before {
  content: ">";
}
.b-header_promobar-toggle.rotated {
  transform: unset;
  font-size: 14px;
}
.b-header_promobar-toggle.rotated::before {
  content: "x";
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 150;
  border-radius: 25px;
  border: 2px solid #fff;
  margin-right: 8px;
}
.b-header_promobar-toggle.rotated + .b-header_promobar-slider .fade-in {
  display: none;
}

.b-header_utility {
  background-color: #095c9c;
  color: #ffffff;
  display: flex;
}
.m-has_dialog .b-header_utility {
  overflow-y: scroll;
}
.b-header_utility-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-header_utility-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-header_utility-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}
.b-header_utility-item.m-promo_slot {
  font-weight: 136;
  letter-spacing: 0.071em;
  margin: auto;
}
@media screen and (max-width: 1023.9px) {
  .b-header_utility-item.m-promo_slot {
    font-size: 12px;
  }
}

.b-logo {
  color: #293035;
  display: block;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .b-logo {
    color: #293035;
    width: 116px;
  }
  .b-logo img {
    height: 62px;
    width: 164px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-logo {
    width: 36px;
  }
  .b-checkout_header .b-logo {
    width: 40px;
  }
}
.b-logo svg {
  width: 100%;
}
.b-logo img {
  display: block;
}

.b-logo_sticky {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .b-logo_sticky {
    animation: fade-in cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    display: block;
  }
}

.b-header_actions {
  align-items: center;
  color: #293035;
  display: flex;
}
.l-header-right .b-header_actions {
  justify-content: flex-end;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-header_actions-item.m-search {
    max-width: 228px;
    margin-left: auto;
    width: 100%;
  }
  .b-header_stuck .b-header_actions-item.m-search {
    right: 160px;
  }
}
.b-header_actions-item.m-hamburger {
  margin-inline-end: 10px;
  margin-inline-start: -8px;
}
@media screen and (min-width: 1024px) {
  .b-header_actions-item.m-hamburger {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_actions-item.m-locale {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .b-header_stuck .b-header_actions_sticky {
    animation: fade-in cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    color: #293035;
    position: fixed;
    right: 14px;
    top: 7px;
    width: auto;
    z-index: 15;
  }
  .b-header_stuck .l-header-flyout-active .b-logo_sticky {
    display: block;
    left: 0;
    padding-left: 40px;
  }
  .b-header_stuck .l-header-flyout-active .b-header_actions_sticky {
    animation: unset;
  }
}
.b-header_button {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-header_button:hover, .b-header_button:focus {
  color: #604099;
}
.b-header_button-text {
  display: none;
}

@media screen and (min-width: 768px) {
  .b-header_login {
    position: relative;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_login {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0;
  }
}
.b-header_login-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-header_login-icon:hover, .b-header_login-icon:focus {
  color: #604099;
}
.b-header_login-caption {
  display: flex;
}
@media screen and (min-width: 1024px) {
  .b-header_login-caption {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-header_actions-item .b-header_login-caption {
    display: none;
  }
}
.b-header_login-text {
  display: none;
}
.b-header_login-title {
  font-size: 18px;
  max-width: 295px;
  overflow: hidden;
  padding-right: 25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-header_login-dropdown {
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  min-width: 328px;
  padding: 16px 16px 5px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 16;
}
@media screen and (max-width: 767.9px) {
  .b-header_login-dropdown {
    left: 0;
    top: 75px;
  }
}
.b-header_login-dropdown_chevron {
  cursor: pointer;
  position: absolute;
  right: 22px;
  rotate: 180deg;
  top: 22px;
}
.b-header_login-dropdown_chevron .b-icon_chevron::before, .b-header_login-dropdown_chevron .b-icon_chevron::after {
  height: 8px;
  width: 11px;
}
.b-header_login-nav {
  color: #604099;
}
.b-header_login-link {
  align-items: center;
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 5px 0;
  text-decoration: none;
}
.b-form.m-logout .b-header_login-link {
  cursor: pointer;
  width: 100%;
}
.b-header_login-link_info {
  background: #f0e9f5;
  border-radius: 100px;
  color: #604099;
  font-size: 12px;
  line-height: 1;
  padding: 8px;
  white-space: nowrap;
}
@media screen and (max-width: 1023.9px) {
  .b-header_login-link_info {
    margin-left: 8px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-header_login-link_info {
    padding: 4px 8px;
  }
}
.b-header_login-link_info svg {
  fill: #604099;
  width: 14px;
}
@media screen and (max-width: 767.9px) {
  .b-header_login-link_info svg {
    display: none;
  }
}
.b-header_login-item {
  border-bottom: 1px solid #604099;
}
.b-header_login-item:last-child {
  border-bottom: 0;
}
.b-header_login-item:last-child .b-header_login-link {
  padding-bottom: 0;
}

.b-minicart_icon-link {
  position: relative;
}
.b-minicart_icon-icon {
  margin: 8px 0;
}
.b-minicart_icon-qty {
  background-color: #604099;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  height: 20px;
  left: 24px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 3px;
  position: absolute;
  text-align: center;
  top: 6px;
}
html[dir=rtl] .b-minicart_icon-qty {
  left: initial;
  right: 24px;
}

/*md

# Header search

```html_example
<form role="search" method="get" action="/s/HallmarkUS/us/search/" name="simpleSearch" class="b-search_input" data-event-submit="handleSubmit" data-tau="search_dialog_form">
	<button class="b-search_input-submit" data-ref="submit" type="submit" title="Search" aria-label="Search" data-tau="search_dialog_input_submit">
		<svg width="23" height="23" viewBox="0 0 27 28" focusable="false">
			<path fill="none" stroke="currentColor" stroke-width="2" d="M19.5 20c4-4.1 4-10.8 0-15-4.2-4-11-4.1-15 0s-4 10.8 0 15a10.6 10.6 0 0015 0zm-.6-.4l7.3 7.5"></path>
		</svg>
	</button>
	<input role="combobox" aria-autocomplete="list" aria-controls="search-suggestions-list" aria-expanded="false" aria-haspopup="listbox" aria-label="Search combobox" aria-owns="search-suggestions-list" data-ref="field" data-event-blur="handleBlur" data-event-focus="handleFocus" data-event-input="handleInput" data-event-keydown="handleKeydown" data-tau="search_dialog_input" id="header-search-input" class="b-search_input-input" type="search" name="q" value="" placeholder="Search our site" autocapitalize="off" autocomplete="off" spellcheck="false" maxlength="50" enterkeyhint="search" aria-activedescendant="">
</form>
```

*/
.b-search_input {
  background-color: #ffffff;
  border-radius: 16px;
  font-size: 16px;
  height: 40px;
  position: relative;
  width: 100%;
  align-items: center;
}
.b-search_input-submit {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
  background-color: #604099;
  border-radius: 50%;
  color: #ffffff;
  height: 24px;
  left: 12px;
  position: absolute;
  top: 8px;
  width: 24px;
}
.b-search_input-submit:hover, .b-search_input-submit:focus {
  color: #604099;
}
.b-search_input-submit:hover, .b-search_input-submit:focus {
  background-color: #753bbd;
  color: #ffffff;
}
.b-search_input-submit svg {
  width: 12px;
}
.b-search_input-input {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 1px solid #535353;
  border-radius: 16px;
  box-shadow: none;
  box-sizing: border-box;
  color: #293035;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  padding: 0 12px 0 44px;
  width: 100%;
}
.b-search_input-input:focus::placeholder {
  color: #293035;
}
.b-search_input-input:focus {
  border: 2px solid #753bbd;
  box-shadow: none;
}
.b-search_input-input::-webkit-search-cancel-button, .b-search_input-input::-webkit-search-decoration, .b-search_input-input::-webkit-inner-spin-button {
  appearance: none;
}
.b-search_input-input::-ms-clear {
  display: none;
}
.b-search_input-input::placeholder {
  color: #535353;
}
.b-search_input-input:focus::placeholder {
  color: transparent;
}
.b-search_input-clear {
  display: none;
  flex: 1 1 100px;
  color: #095c9c;
  cursor: pointer;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  margin-left: 12px;
}
.b-search_input-clear:hover, .b-search_input-clear:focus {
  color: #043c8f;
}
.b-search_input-clear.m-visible {
  display: flex;
}
.b-search_input-toggle {
  cursor: pointer;
  display: none;
  height: 45px;
  width: 45px;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .l-header-middle .b-search_input-toggle {
    display: block;
  }
}
.b-search_input-toggle svg {
  height: 21px;
  width: 21px;
}

.b-search_toggle {
  align-items: center;
  border: 1px solid #604099;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: start;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .b-search_toggle {
    border: none;
    font-size: 0;
    height: 48px;
  }
}
.b-search_toggle-icon {
  align-items: center;
  display: flex;
  height: 100%;
  margin: 0 8px;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .b-search_toggle-icon {
    margin: 0;
  }
}
.b-search_toggle:hover .b-search_toggle-icon, .b-search_toggle:hover .b-search_toggle-icon {
  color: #604099;
}
.b-search_toggle-icon svg {
  background-color: #604099;
  border-radius: 50%;
  fill: #ffffff;
  height: 24px;
  width: 24px;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .b-search_toggle-icon svg {
    background-color: transparent;
    fill: #293035;
    height: 41px;
    width: 41px;
  }
}
.b-search_toggle-text {
  color: #000000;
}

.b-search {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .b-search_noresults .b-search {
    width: 351px;
  }
}
.b-search-wrapper {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .l-header-middle .b-search-wrapper {
    background: #ffffff;
    display: none;
    justify-content: flex-end;
    right: 0;
    max-height: 0;
    opacity: 0;
    padding: 3px 33px 20px 0;
    position: fixed;
    top: 60px;
    transition-duration: 0.2s;
    transition-property: opacity, max-height;
    transition-timing-function: ease-out;
    width: auto;
  }
  .b-header_stuck .l-header-middle .b-search-wrapper.m-show {
    display: flex;
    max-height: 100%;
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .b-header_stuck .l-header-flyout-active .l-header-middle .b-search-wrapper.m-show {
    top: 0;
    left: unset;
    width: 100%;
    right: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
.b-search-wrapper .b-logo_sticky {
  display: none;
}
.b-search-inner {
  position: relative;
}
.b-header_stuck .l-header-flyout-active .b-search-inner {
  width: 83%;
}

.b-brands_switcher {
  background-color: #293035;
  color: #ffffff;
}
@media screen and (max-width: 1023.9px) {
  .b-brands_switcher {
    display: none;
  }
}
.b-menu_bar-container .b-brands_switcher {
  display: none;
}
@media screen and (max-width: 1023.9px) {
  .b-menu_bar-container .b-brands_switcher {
    display: block;
  }
}
.b-brands_switcher-title {
  align-items: center;
  background-color: #293035;
  display: flex;
  font-size: 16px;
  height: 54px;
  line-height: 1;
  padding: 4px 16px 0;
}
@media screen and (min-width: 1024px) {
  .b-brands_switcher-title {
    display: none;
  }
}
.b-brands_switcher-list {
  display: flex;
  padding: 8px 0;
}
@media screen and (min-width: 1024px) {
  .b-brands_switcher-list {
    margin: 0 auto;
    max-width: 1920px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 1024px) and (min-width: 768px) and (max-width: 1023.9px) {
  .b-brands_switcher-list {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 767.9px) {
  .b-brands_switcher-list {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-brands_switcher-list {
    padding: 0 0 12px;
  }
}
.b-menu_bar-container .b-brands_switcher-list {
  flex-flow: column;
  width: 100%;
}
.b-brands_switcher-link {
  align-items: center;
  color: #535353;
  display: flex;
  font-size: 12px;
  height: 48px;
  letter-spacing: 1px;
  line-height: 1;
  padding: 0 16px;
  text-decoration: none;
  text-transform: uppercase;
}
@media screen and (min-width: 1024px) {
  .b-brands_switcher-link {
    border-left: 1px solid #535353;
    height: 26px;
    padding: 0 28px;
  }
  .b-brands_switcher-item:first-child .b-brands_switcher-link {
    border-left: none;
    margin-left: -14px;
  }
}
.b-brands_switcher-link.m-active {
  color: #ffffff;
  cursor: default;
}

.b-country_selector {
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .b-country_selector {
    align-items: center;
    display: flex;
    position: relative;
  }
}
.b-country_selector-locale {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-country_selector-locale {
    height: 48px;
    padding: 0 16px;
  }
}
@media screen and (min-width: 1024px) {
  .b-country_selector-locale.m-switcher:hover, .b-country_selector-locale.m-switcher:focus {
    background: #f3f4f3;
  }
}
@media screen and (min-width: 1024px) {
  .b-country_selector-locale.m-link {
    cursor: pointer;
    text-decoration: none;
  }
  @media not all and (pointer: coarse) {
    .b-country_selector-locale.m-link:hover, .b-country_selector-locale.m-link:focus {
      color: #604099;
    }
  }
}
.b-country_selector-item {
  width: 100%;
}
@media screen and (max-width: 1023.9px) {
  .b-country_selector-switcher {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .b-country_selector-switcher {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    display: block;
  }
}
.b-country_selector-locale_language {
  margin: 0 12px;
}
@media screen and (max-width: 1023.9px) {
  .b-country_selector-locale_icon {
    margin-inline-start: auto;
  }
}
.b-country_selector-flyout {
  background-color: #ffffff;
  border: 1px solid #b3b3b3;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
  color: #293035;
  display: none;
  left: 0;
  position: absolute;
  top: 47px;
  width: 100%;
  z-index: 10;
}
.b-country_selector-flyout[aria-hidden=false] {
  display: block;
}

@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-header_stuck .b-menu_bar-link {
    padding: 19px 8px;
  }
}
.b-menu_bar-link:visited {
  color: inherit;
}
.b-menu_bar-link.m-highlight {
  color: #bf0000;
}
.b-menu_bar-link.m-has-submenu {
  cursor: default;
}
.b-menu_bar-link_text {
  position: relative;
}
.b-menu_bar-link_text::after {
  border-bottom: 3px solid transparent;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color, border;
}
[aria-expanded=true] .b-menu_bar-link_text, .b-menu_bar-link:hover .b-menu_bar-link_text, .b-menu_bar-link:focus .b-menu_bar-link_text {
  color: #753bbd;
}
[aria-expanded=true] .b-menu_bar-link_text::after, .b-menu_bar-link:hover .b-menu_bar-link_text::after, .b-menu_bar-link:focus .b-menu_bar-link_text::after {
  border-color: #753bbd;
}

@media screen and (min-width: 1024px) {
  .b-menu_bar {
    background-color: #ffffff;
    box-shadow: 0 -10px 10px white, 0 0 10px rgba(0, 0, 0, 0.25);
    color: #293035;
    position: relative;
    transition: background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    z-index: 8;
  }
  .b-menu_bar-container {
    margin: 0 auto;
    max-width: 1920px;
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 1024px) and (min-width: 768px) and (max-width: 1023.9px) {
  .b-menu_bar-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 767.9px) {
  .b-menu_bar-container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-inner {
    color: #604099;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .b-header_stuck .b-menu_bar-inner {
    margin: 0 auto;
    max-width: 65%;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-link {
    color: inherit;
    display: block;
    letter-spacing: 0.02em;
    line-height: 24px;
    padding: 19px 16px;
    position: relative;
    text-decoration: none;
  }
  .b-menu_bar-link[aria-expanded=true], .b-menu_bar-link:hover, .b-menu_bar-link:focus, .b-menu_bar-item:hover .b-menu_bar-link, .b-menu_bar-item:focus .b-menu_bar-link {
    background-color: #ffffff;
    color: #604099;
    position: relative;
    text-decoration: none;
    z-index: 1;
  }
  .b-menu_bar-link[aria-expanded=true]::before, .b-menu_bar-link:hover::before, .b-menu_bar-link:focus::before, .b-menu_bar-item:hover .b-menu_bar-link::before, .b-menu_bar-item:focus .b-menu_bar-link::before {
    opacity: 1;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout {
    background-color: #ffffff;
    border-top: 1px solid #535353;
    box-shadow: 0 50vh 0 50vh rgba(0, 0, 0, 0.4);
    color: #293035;
    display: none;
    left: 0;
    max-height: 70vh;
    min-height: 300px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 16;
  }
  .b-menu_bar-flyout[aria-hidden=false] {
    display: block;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1920px;
    padding: 24px;
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 77%;
  }
  .b-menu_bar-flyout_inner .b-content_asset {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_box {
    margin-bottom: 24px;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_column {
    flex-basis: 20%;
    padding: 0 20px 0 0;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-view_all {
    color: #095c9c;
    display: inline-block;
    flex-basis: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_close {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    text-align: center;
    width: 48px;
    position: absolute;
    right: 40px;
    top: 20px;
  }
  .b-menu_bar-flyout_close:hover, .b-menu_bar-flyout_close:focus {
    color: #604099;
  }
  html[dir=rtl] .b-menu_bar-flyout_close {
    left: 40px;
    right: initial;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_bar-flyout_promo {
    width: 23%;
  }
  .b-menu_bar-flyout_promo picture {
    background: #f3f4f3;
    display: block;
    overflow: hidden;
    padding-bottom: 75%;
    position: relative;
    width: 100%;
  }
  .b-menu_bar-flyout_promo img {
    border: none;
    bottom: 0;
    color: #f3f4f3;
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_bar-inner {
    margin: 0;
  }
  .b-menu_bar-flyout_close,
  .b-menu_bar-view_all.b-link {
    display: none;
  }
  .b-menu_bar-flyout_promo {
    padding: 28px 16px;
  }
  .b-menu_bar-item,
  .b-menu_item-link {
    background-color: #ffffff;
  }
  .b-menu_bar-link {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    font-weight: 136;
  }
  .b-menu_bar-link_highlight {
    color: #de1d8a;
  }
}
.b-flyout_promo-title {
  font-size: 26px;
  font-weight: 136;
  letter-spacing: 0.01em;
  line-height: 32px;
  font-weight: 136;
  margin: 12px 0 8px;
  padding-left: 10px;
}
@media screen and (max-width: 1023.9px) {
  .b-flyout_promo-title {
    font-size: 24px;
    letter-spacing: 0.002em;
    line-height: 30px;
  }
}

.b-flyout_promo-link {
  text-decoration: none;
}

@media screen and (max-width: 1023.9px) {
  .b-menu_item.m-view_all_bottom {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-menu_item.m-view_all_top {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_item.m-view_all_top {
    text-transform: capitalize;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_item .m-view {
    display: none;
  }
}
.b-menu_item-link {
  background-color: #ffffff;
  display: inline-block;
  position: relative;
  text-decoration: none;
}
@media screen and (min-width: 1024px) {
  .b-menu_item-link {
    font-size: 18px;
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_item-link {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    font-weight: 136;
  }
}
.b-menu_item-link:hover, .b-menu_item-link:focus {
  color: #753bbd;
}
@media screen and (min-width: 1024px) {
  .b-menu_item-link.m-has-submenu {
    font-weight: 136;
    pointer-events: none;
  }
}
.b-menu_item-link.m-highlight {
  color: #de1d8a;
}
.b-menu_item-link.m-highlight::after {
  background-color: #de1d8a;
}
.b-menu_item-link.m-highlight:hover, .b-menu_item-link.m-highlight:focus {
  color: #604099;
}
.b-menu_item-link.m-all_link {
  font-weight: 136;
}
@media screen and (min-width: 1024px) {
  .b-menu_item-link.m-all_link_2nd {
    display: none;
  }
}
.b-menu_item-submenu {
  line-height: 24px;
}
.b-menu_item-submenu .b-menu_item-link {
  font-size: 15px;
}
.b-menu_item-link_text {
  margin: 0 12px;
}
.b-menu_item-link_icon {
  display: none;
  margin-inline-start: auto;
}
@media screen and (max-width: 1023.9px) {
  .b-menu_bar-link.m-has-submenu .b-menu_item-link_icon, .b-menu_item-link.m-has-submenu .b-menu_item-link_icon {
    display: block;
  }
}
.b-menu_item-link_icon svg {
  height: 14px;
  width: 14px;
}

@media screen and (min-width: 1024px) {
  .b-menu_panel {
    position: sticky;
    top: -0.1px;
    z-index: 8;
  }
  html.m-has_dialog .b-menu_panel {
    overflow-y: scroll;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-wrapper::before {
    background-color: rgba(0, 0, 0, 0.4);
    bottom: 0;
    content: "";
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
    transition-property: visibility, opacity;
    visibility: hidden;
    z-index: 18;
  }
  .b-menu_panel-wrapper.m-opened::before, .b-menu_panel-wrapper.m-active::before {
    opacity: var(--backdrop-opacity);
    transition: none;
    visibility: visible;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-inner {
    background-color: #ffffff;
    bottom: 0;
    height: 100%;
    left: 0;
    max-width: 375px;
    overflow: hidden;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition-property: transform;
    visibility: hidden;
    width: 90vw;
    z-index: 18;
  }
  html[dir=rtl] .b-menu_panel-inner {
    left: initial;
    right: 0;
    transform: translateX(100%);
  }
  .b-menu_panel-inner.m-closed {
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  }
  .b-menu_panel-inner.m-opened {
    transform: translateX(0);
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
    visibility: visible;
  }
  html[dir=rtl] .b-menu_panel-inner.m-opened {
    transform: translateX(0);
  }
  .b-menu_panel-inner.m-no_transition {
    transition: none !important;
  }
}
.b-menu_panel-head {
  display: none;
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-head {
    align-items: center;
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    min-height: 50px;
  }
}
.b-menu_panel-title {
  font-size: 22px;
  text-align: center;
  width: 100%;
}
.b-menu_panel-back {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-menu_panel-back:hover, .b-menu_panel-back:focus {
  color: #604099;
}
.b-menu_panel-back svg {
  fill: #293035;
  width: 22px;
}
.b-menu_panel-back_text {
  display: none;
}
.b-menu_panel-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
  margin-inline-start: auto;
}
.b-menu_panel-close:hover, .b-menu_panel-close:focus {
  color: #604099;
}
.b-menu_panel-close svg {
  height: 22px;
  width: 22px;
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-link {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
  }
}
.b-menu_panel-footer {
  display: none;
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-footer {
    display: block;
    padding: 17px 20px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-footer_item {
    margin-bottom: 17px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-footer_inner, .b-menu_panel-footer_link {
    align-items: center;
    display: flex;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-footer_link {
    color: #293035;
    text-decoration: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_panel-footer_icon {
    color: #604099;
    display: inline-block;
    margin-right: 9px;
    min-width: 24px;
  }
}
.b-menu_panel .b-header_wishlist {
  min-height: auto;
  padding: 0;
}
.b-menu_panel .b-header_wishlist-icon {
  color: #604099;
  height: auto;
  width: auto;
}
.b-menu_panel .b-header_wishlist-icon svg {
  fill: none;
  overflow: visible;
  stroke: #604099;
  stroke-width: 2px;
}
.b-menu_panel .b-header_wishlist.m-active svg {
  fill: #de1d8a;
  stroke: #de1d8a;
}
.b-menu_panel .b-header_wishlist.m-animated svg {
  animation: heart-bit ease-out 1s;
  animation-delay: 2s;
}

@media screen and (min-width: 1024px) {
  .b-menu_subpanel-container.m-level_2, .b-menu_subpanel-container.m-level_3 {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-menu_subpanel {
    display: flex;
    height: 100%;
    transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  }
  .b-menu_subpanel.m-active_level_1 {
    transform: translateX(0);
  }
  .b-menu_subpanel.m-active_level_2 {
    transform: translateX(-100%);
  }
  html[dir=rtl] .b-menu_subpanel.m-active_level_2 {
    transform: translateX(100%);
  }
  .b-menu_subpanel.m-active_level_3 {
    transform: translateX(-200%);
  }
  html[dir=rtl] .b-menu_subpanel.m-active_level_3 {
    transform: translateX(200%);
  }
  .b-menu_subpanel.m-active_level_3 .m-view_all_top {
    display: none;
  }
  .b-menu_subpanel-container {
    background-color: #f3f4f3;
    min-width: 100%;
    overflow-y: auto;
  }
  .b-menu_subpanel-container.m-level_1 .b-menu_subpanel-content.m-level_2_content, .b-menu_subpanel-container.m-level_2 .b-menu_subpanel-content.m-level_3_content {
    display: none;
  }
}
.b-skip_to {
  background-color: #f3f4f3;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  clip: rect(1px, 1px, 1px, 1px);
  color: #000000;
  display: block;
  left: 0;
  margin: 0 auto;
  max-width: 320px;
  opacity: 0;
  overflow: hidden;
  padding: 12px 48px;
  position: absolute;
  right: 0;
  text-align: center;
  text-decoration: none;
  top: 8px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: opacity, clip;
  width: 100%;
  z-index: 21;
}
.b-skip_to:focus {
  clip: auto;
  opacity: 1;
}

.b-find_store {
  align-items: center;
  display: flex;
}
@media screen and (min-width: 768px) {
  .b-find_store {
    cursor: pointer;
    text-decoration: none;
    flex: 1;
    text-decoration: none;
  }
  @media not all and (pointer: coarse) {
    .b-find_store:hover, .b-find_store:focus {
      color: #604099;
    }
  }
}
.b-find_store-trigger {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 18;
}
@media screen and (min-width: 1024px) {
  .b-find_store-trigger {
    left: 40px;
    max-width: 400px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-find_store-trigger {
    left: 20px;
    max-width: 23%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-find_store-trigger {
    left: 16px;
  }
}
.b-find_store-icon {
  margin-right: 10px;
}
.b-find_store-icon svg {
  fill: #000000;
  height: 22px;
  width: 16px;
}
.b-find_store-link {
  text-decoration: none;
}
.b-find_store-label {
  color: #535353;
  font-size: 12px;
  line-height: 1;
}
.b-find_store-selected {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.b-badges:not(.m-static) {
  align-items: flex-start;
  display: flex;
  flex-flow: column;
  left: 20px;
  max-width: calc(100% - 156px);
  position: absolute;
  top: 20px;
  z-index: 1;
}
.b-badges.m-static {
  display: inline-flex;
}
.b-badges-item {
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 16px;
  background-color: #de1d8a;
  border-radius: 4px;
  color: #ffffff;
  padding: 4px 5px;
  word-break: break-word;
}
.b-price .b-badges-item {
  line-height: 1;
  padding: 4px 8px;
}
html[dir=rtl] .b-price .b-badges-item {
  direction: ltr;
}
.b-product_details-price .b-badges-item {
  margin-inline-end: 8px;
  position: relative;
  top: -4px;
}
.b-suggestions_product-price .b-badges-item {
  position: relative;
  top: -1px;
}
.b-quick_buy .b-badges-item {
  margin-inline-end: 8px;
}
.b-badges.m-koc .b-badges-item {
  background-color: #a6192e;
  color: #ffffff;
}
.b-badges-item + .b-badges-item {
  margin-top: 4px;
}
.b-product_tile .b-badges, .b-carousel .b-badges {
  left: 4px;
  max-width: calc(100% - 68px);
  top: 12px;
}
.b-price .b-badges {
  max-width: initial;
  position: static;
}

/*md

# b-carousel (based on scroll)

## Carousel examples

### 1. Hero carousel

```html_example
<div data-widget="carousel" class="b-carousel m-hero">
    <button class="b-carousel-ctrl m-prev" tabindex="-1" aria-hidden="true" title="Previous" data-ref="elemPrevButton" data-event-click="scrollToPrevPage">
        <svg width="40" height="40" viewBox="2 1 40 40" aria-hidden="true" focusable="false">
            <path d="m26.541 8.3536-12.728 12.728 12.728 12.728" fill="none" stroke="currentColor" stroke-width="2"></path>
        </svg>
    </button>
    <button class="b-carousel-ctrl m-next" tabindex="-1" aria-hidden="true" title="Next" data-ref="elemNextButton" data-event-click="scrollToNextPage">
        <svg width="40" height="40" viewBox="-1 1 40 40" aria-hidden="true" focusable="false">
            <path d="m13.459 8.3536 12.728 12.728-12.728 12.728" fill="none" stroke="currentColor" stroke-width="2"></path>
        </svg>
    </button>
    <div class="b-carousel-track" data-ref="elemCarouselTrack" data-event-scroll.passive="onScroll" data-event-touchstart="onScroll" data-event-mousedown.prevent="onMouseDown" data-event-mouseup="onMouseUp">
        <div class="b-carousel-item">
            <figure class="b-promo_box m-full_bleed m-caption_offcenter">
                <picture class="b-promo_box-picture">
                    <img src="../images/guide/examples/hero-carousel-banner-1.jpg?$staticlink$" alt="Girl stand on the beach." loading="eager" width="1600" height="800">
                </picture>
                <figcaption class="b-promo_box-inner">
                    <div class="b-promo_box-caption b-promo_caption">
                        <h2 class="b-promo_caption-title">Carousel first slide</h2>
                        <p class="b-promo_caption-subtitle">Everyone's fallen for boilerplate so we added to her games repertoire.</p>
                        <div class="b-promo_caption-actions">
                            <a class="b-button" href="#" aria-label="Shop new season at boilerplate">Shop New Season</a>
                        </div>
                    </div>
                </figcaption>
            </figure>
        </div>
        <div class="b-carousel-item">
            <figure class="b-promo_box m-full_bleed m-caption_offcenter">
                <picture class="b-promo_box-picture">
                    <img src="../images/guide/examples/hero-carousel-banner-2.jpg?$staticlink$" alt="Girl with khaki panama." loading="lazy" width="1600" height="800">
                </picture>
                <figcaption class="b-promo_box-inner">
                    <div class="b-promo_box-caption b-promo_caption">
                        <h2 class="b-promo_caption-title">Carousel second slide</h2>
                        <p class="b-promo_caption-subtitle">New playful styles inspired by darts and that staple of a British pub - the fruit machine.</p>
                        <div class="b-promo_caption-actions">
                            <a class="b-button" href="#" aria-label="Shop new Collection at boilerplate">Shop New Collection</a>
                        </div>
                    </div>
                </figcaption>
            </figure>
        </div>
        <div class="b-carousel-item">
            <figure class="b-promo_box m-full_bleed m-caption_offcenter">
                <picture class="b-promo_box-picture">
                    <img src="../images/guide/examples/hero-carousel-banner-3.jpg?$staticlink$" alt="Girl stand in cloak." loading="lazy" width="1600" height="800">
                </picture>
                <figcaption class="b-promo_box-inner">
                    <div class="b-promo_box-caption b-promo_caption">
                        <h2 class="b-promo_caption-title">Carousel third slide</h2>
                        <div class="b-promo_caption-actions">
                            <a class="b-button" href="#" aria-label="Shop new Season at boilerplate">Shop New Season</a>
                        </div>
                    </div>
                </figcaption>
            </figure>
        </div>
    </div>
    <div aria-hidden="true" class="b-carousel-pagination" data-ref="pagination">
        <button class="b-carousel-page" data-page="0" tabindex="-1" data-event-click.prevent="handlePaginationClick"></button>
        <button class="b-carousel-page" data-page="1" tabindex="-1" data-event-click.prevent="handlePaginationClick"></button>
        <button class="b-carousel-page" data-page="2" tabindex="-1" data-event-click.prevent="handlePaginationClick"></button>
    </div>
</div>
```

### 2. Products carousel

```html_example
<section data-widget="carousel" class="b-carousel m-products m-next_visible m-inited">
	<h2 class="b-carousel-title ">
		Recommendations
	</h2>
	<button class="b-carousel-ctrl m-prev" tabindex="-1" aria-hidden="true" title="Next" data-ref="elemPrevButton" data-event-click="scrollToPrevPage" data-tau="carousel_prev" disabled="">
		<svg viewBox="0 0 7 10" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
			<path d="M0.844262 9.14823L0.844352 9.14815L0.837048 9.14006C0.804792 9.10431 0.809084 9.05314 0.841666 9.02373L4.89548 5.37238L5.30794 5.00087L4.89548 4.62936L0.841666 0.978007C0.841635 0.977979 0.841605 0.977951 0.841574 0.977924C0.809076 0.948507 0.804822 0.897394 0.837047 0.861686C0.866451 0.829103 0.917626 0.824812 0.953368 0.857067L0.953868 0.857517L5.55759 5.00087L0.954953 9.14325C0.954856 9.14334 0.95476 9.14342 0.954664 9.14351C0.934407 9.16151 0.912844 9.16754 0.897517 9.16754C0.885672 9.16754 0.872965 9.16494 0.862229 9.16031C0.852108 9.15594 0.846821 9.15119 0.844262 9.14823Z" fill="currentColor"></path>
		</svg>
	</button>
	<button class="b-carousel-ctrl m-next" tabindex="-1" aria-hidden="true" title="Previous" data-ref="elemNextButton" data-event-click="scrollToNextPage" data-tau="carousel_next">
		<svg viewBox="0 0 7 10" fill="none" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
			<path d="M0.844262 9.14823L0.844352 9.14815L0.837048 9.14006C0.804792 9.10431 0.809084 9.05314 0.841666 9.02373L4.89548 5.37238L5.30794 5.00087L4.89548 4.62936L0.841666 0.978007C0.841635 0.977979 0.841605 0.977951 0.841574 0.977924C0.809076 0.948507 0.804822 0.897394 0.837047 0.861686C0.866451 0.829103 0.917626 0.824812 0.953368 0.857067L0.953868 0.857517L5.55759 5.00087L0.954953 9.14325C0.954856 9.14334 0.95476 9.14342 0.954664 9.14351C0.934407 9.16151 0.912844 9.16754 0.897517 9.16754C0.885672 9.16754 0.872965 9.16494 0.862229 9.16031C0.852108 9.15594 0.846821 9.15119 0.844262 9.14823Z" fill="currentColor"></path>
		</svg>
	</button>
    <div class="b-carousel-track" data-ref="elemCarouselTrack" data-event-scroll.passive="onScroll" data-event-touchstart="onScroll" data-event-mousedown.prevent="onMouseDown" data-event-mouseup="onMouseUp">
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
        <div class="b-carousel-item">
            <section class="b-product_tile">
                <img src="../images/guide/examples/product-carousel-image.png?$staticlink$" width="260" height="346">
            </section>
        </div>
    </div>
</section>
<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="star">
        <path d="m13.344 15.662-5.0953-2.6691-5.0873 2.6842 0.96393-5.6707-4.1249-4.0089 5.691-0.83558 2.538-5.1618 2.5533 5.1543 5.6935 0.81868-4.113 4.0211z"></path>
    </symbol>
</svg>
```
*/
.b-carousel {
  position: relative;
}
.b-carousel-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 36px;
  font-weight: 350;
  line-height: 40px;
  margin-bottom: 36px;
  text-align: center;
}
@media screen and (max-width: 1023.9px) {
  .b-carousel-title {
    font-size: 30px;
    line-height: 40px;
  }
}
.b-carousel-track {
  display: flex;
  overflow: hidden;
  overflow-behavior: contain;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -ms-scroll-chaining: none;
  scrollbar-width: none;
  overflow-x: auto;
  overscroll-behavior-x: none;
  scroll-snap-type: x mandatory;
}
.b-carousel-track::-webkit-scrollbar {
  display: none;
}
.b-carousel-track.m-mousemove_navigation {
  scroll-snap-type: unset;
}
.b-carousel-track.m-grabbing {
  cursor: grab;
  scroll-behavior: auto;
  -webkit-user-select: none;
          user-select: none;
}
.b-carousel-track.m-grabbing::before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.b-carousel-item {
  flex: 1 0 auto;
  max-width: 100%;
  scroll-snap-align: start;
}
.b-carousel-ctrl {
  align-items: center;
  appearance: none;
  background-color: #604099;
  border: none;
  border-radius: 50%;
  color: #293035;
  cursor: pointer;
  display: none;
  height: 36px;
  justify-content: center;
  margin-top: -18px;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, opacity;
  -webkit-user-select: none;
          user-select: none;
  width: 36px;
  z-index: 2;
}
@media not all and (pointer: coarse) {
  .b-carousel-ctrl:hover, .b-carousel-ctrl:focus {
    background-color: #753bbd;
  }
}
.b-carousel-ctrl.m-secondary {
  background-color: transparent;
  border: 2px solid #604099;
  color: #604099;
}
@media not all and (pointer: coarse) {
  .b-carousel-ctrl.m-secondary:hover, .b-carousel-ctrl.m-secondary:focus {
    border-color: #753bbd;
    color: #753bbd;
  }
}
.b-carousel-ctrl.m-secondary svg {
  color: #604099;
  stroke: #604099;
  stroke-width: 0;
  width: 13px;
}
.b-carousel.m-inited .b-carousel-ctrl {
  display: flex;
}
.b-carousel-ctrl[disabled], .b-carousel.m-has_dialog .b-carousel-ctrl {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
@media not all and (pointer: coarse) {
  .b-carousel-ctrl[disabled]:hover, .b-carousel-ctrl[disabled]:focus, .b-carousel.m-has_dialog .b-carousel-ctrl:hover, .b-carousel.m-has_dialog .b-carousel-ctrl:focus {
    color: inherit;
  }
}
.b-carousel-ctrl.m-prev {
  left: 0;
  transform: rotate(180deg);
}
.b-carousel-ctrl.m-next {
  right: 0;
}
.b-carousel-pagination {
  display: none;
  justify-content: center;
  margin-top: 20px;
}
.b-carousel.m-inited .b-carousel-pagination {
  display: flex;
}
.b-carousel.m-has_dialog .b-carousel-pagination {
  display: none;
}
.b-carousel-page {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: block;
  height: 20px;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 20px;
}
.b-carousel-page::before {
  background-color: #535353;
  border-radius: 12px;
  content: "";
  display: inline-block;
  height: 12px;
  left: 50%;
  margin-inline-start: -6px;
  margin-top: -6px;
  position: absolute;
  top: 50%;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color;
  width: 12px;
}
.b-carousel-page.m-current::before {
  background-color: #753bbd;
  content: "";
  height: 12px;
  margin-inline-start: -6px;
  margin-top: -6px;
  width: 12px;
}

.b-carousel.m-products {
  min-width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-carousel.m-products {
    margin: 40px -88px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-carousel.m-products {
    margin: 40px -20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-carousel.m-products {
    margin: 40px -32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-carousel.m-products {
    margin: 40px -15px;
  }
}
@media screen and (min-width: 1367px) {
  .b-carousel.m-products .b-carousel-ctrl.m-prev {
    left: 88px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-prev {
    left: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-prev {
    left: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-prev {
    left: 11px;
  }
}
@media screen and (min-width: 1367px) {
  .b-carousel.m-products .b-carousel-ctrl.m-next {
    right: 88px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-next {
    right: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-next {
    right: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-carousel.m-products .b-carousel-ctrl.m-next {
    right: 11px;
  }
}
.b-carousel.m-products .b-carousel-item {
  margin-inline-end: 16px;
}
@media screen and (min-width: 1367px) {
  .b-carousel.m-products .b-carousel-item {
    max-width: 306px;
    min-width: 306px;
  }
  .b-carousel.m-products .b-carousel-item:first-child {
    max-width: 394px;
    min-width: 394px;
    padding-left: 88px;
  }
  .b-carousel.m-products .b-carousel-item:last-child {
    max-width: 394px;
    min-width: 394px;
    padding-right: 88px;
  }
  .b-carousel.m-products .b-carousel-item:only-child {
    padding-right: 0;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-carousel.m-products .b-carousel-item {
    max-width: 306px;
    min-width: 306px;
  }
  .b-carousel.m-products .b-carousel-item:first-child {
    max-width: 326px;
    min-width: 326px;
    padding-left: 20px;
  }
  .b-carousel.m-products .b-carousel-item:last-child {
    max-width: 326px;
    min-width: 326px;
    padding-right: 20px;
  }
  .b-carousel.m-products .b-carousel-item:only-child {
    padding-right: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-carousel.m-products .b-carousel-item {
    max-width: 306px;
    min-width: 306px;
  }
  .b-carousel.m-products .b-carousel-item:first-child {
    max-width: 338px;
    min-width: 338px;
    padding-left: 32px;
  }
  .b-carousel.m-products .b-carousel-item:last-child {
    max-width: 338px;
    min-width: 338px;
    padding-right: 32px;
  }
  .b-carousel.m-products .b-carousel-item:only-child {
    padding-right: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-carousel.m-products .b-carousel-item {
    max-width: 375px;
    min-width: 375px;
  }
  .b-carousel.m-products .b-carousel-item:first-child {
    max-width: 375px;
    min-width: 375px;
    padding-left: 0px;
  }
  .b-carousel.m-products .b-carousel-item:last-child {
    max-width: 375px;
    min-width: 375px;
    padding-right: 0px;
  }
  .b-carousel.m-products .b-carousel-item:only-child {
    padding-right: 0;
  }
}
.b-carousel.m-products .b-product_tile-inner,
.b-carousel.m-products .b-button_wrapper {
  padding: 0 8px;
}
.b-carousel.m-products .b-wishlist_button.m-tile {
  right: 8px;
}

.b-carousel.m-hero {
  margin: 0 auto;
  max-width: 1920px;
}
.b-carousel.m-hero .b-carousel-ctrl.m-prev {
  left: 40px;
}
.b-carousel.m-hero .b-carousel-ctrl.m-next {
  right: 40px;
}
.b-carousel.m-hero .b-carousel-item {
  max-width: 100%;
  min-width: 100%;
}

.b-hero_carousel {
  margin: 0 auto;
  max-width: 1920px;
  overflow: hidden;
  position: relative;
}
.b-hero_carousel-track {
  display: flex;
  overflow: hidden;
}
.b-hero_carousel-track.m-grabbing {
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}
.b-hero_carousel-track.m-grabbing::before,
.b-hero_carousel-track .b-promo_box-picture::before {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}
.b-hero_carousel-item {
  height: 100%;
  left: 0;
  min-width: 100%;
  top: 0;
  width: 100%;
  will-change: transform;
  z-index: 1;
}
.b-hero_carousel-item:not(:first-child) {
  visibility: hidden;
}
.b-hero_carousel.m-initialized .b-hero_carousel-item {
  overflow: hidden;
  position: absolute;
  transition: cubic-bezier(0.56, 0.03, 0.47, 0.98) 0.8s;
  transition-property: transform, visibility;
  visibility: hidden;
}
.b-hero_carousel.m-initialized .b-hero_carousel-item.m-prev {
  transform: translateX(-100%);
}
.b-hero_carousel.m-initialized .b-hero_carousel-item.m-next {
  transform: translateX(100%);
}
.b-hero_carousel.m-initialized .b-hero_carousel-item.m-current {
  position: static;
  transform: translateX(0);
  visibility: visible;
}
.b-hero_carousel-ctrl {
  appearance: none;
  background-color: rgba(255, 255, 255, 0.26);
  border: none;
  color: #293035;
  cursor: pointer;
  display: none;
  height: 48px;
  margin-top: -24px;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, opacity;
  -webkit-user-select: none;
          user-select: none;
  width: 48px;
  z-index: 2;
}
@media not all and (pointer: coarse) {
  .b-hero_carousel-ctrl:hover, .b-hero_carousel-ctrl:focus {
    background-color: #ffffff;
  }
}
.b-hero_carousel.m-initialized .b-hero_carousel-ctrl {
  display: block;
}
@media screen and (max-width: 767.9px) {
  .b-hero_carousel.m-initialized .b-hero_carousel-ctrl {
    display: none;
  }
}
.b-hero_carousel-ctrl.m-prev {
  left: 40px;
}
.b-hero_carousel-ctrl.m-next {
  right: 40px;
}
.b-hero_carousel-pagination {
  bottom: 8px;
  display: flex;
  justify-content: center;
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  visibility: hidden;
  z-index: 2;
}
@media screen and (max-width: 767.9px) {
  .b-hero_carousel-pagination {
    left: 16px;
    transform: none;
  }
}
.b-hero_carousel-pagination.m-initialized {
  opacity: 1;
  visibility: visible;
}
.b-hero_carousel-pagination_content {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 27px;
  display: flex;
  padding: 8px;
}
.b-hero_carousel-pagination_dots {
  display: flex;
  margin: 0 4px 0 0;
}
.b-hero_carousel-pagination_dot {
  border: none;
  color: transparent;
  cursor: pointer;
  display: block;
  fill: #636363;
  height: 34px;
  margin-inline-end: 6px;
  padding: 0;
  position: relative;
  width: 34px;
}
@media not all and (pointer: coarse) {
  .b-hero_carousel-pagination_dot:hover, .b-hero_carousel-pagination_dot:focus {
    fill: #575757;
  }
}
.b-hero_carousel-pagination_dot.m-current {
  fill: #604099;
}
.b-hero_carousel-pagination_dot:last-child {
  margin-inline-end: 0;
}
.b-hero_carousel-pagination_dot[aria-disabled=true] {
  cursor: initial;
}
.b-hero_carousel-pagination_svg_dot_outline {
  stroke: white;
  stroke-width: 5;
  transition: 0.4s ease;
  transition-property: stroke-width;
}
@media not all and (pointer: coarse) {
  .b-hero_carousel-pagination_dot:not(.m-current):hover .b-hero_carousel-pagination_svg_dot_outline {
    stroke-width: 20;
  }
}
.b-hero_carousel-autoplay {
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  margin-inline-end: 4px;
  padding: 0;
}
.b-hero_carousel-autoplay.m-initialized {
  display: block;
}
.b-hero_carousel-autoplay.m-animated {
  animation: hero-carousel-progress linear;
}
.b-hero_carousel-autoplay_svg {
  fill: transparent;
  stroke-linecap: round;
  stroke-width: 1;
}
.b-hero_carousel-autoplay_progress {
  stroke: white;
  stroke-width: 3;
}
.b-hero_carousel-autoplay.m-animated .b-hero_carousel-autoplay_progress {
  stroke: #604099;
}
.b-hero_carousel-autoplay_progress_back {
  stroke: white;
  stroke-width: 3;
}
.b-hero_carousel-autoplay_play, .b-hero_carousel-autoplay_pause {
  display: block;
  fill: #604099;
  opacity: 1;
  stroke: #604099;
  transition: opacity ease 0.2s;
}
.b-hero_carousel-autoplay[aria-pressed=false] .b-hero_carousel-autoplay_play {
  opacity: 0;
}
.b-hero_carousel-autoplay_pause {
  stroke-width: 3;
}
.b-hero_carousel-autoplay[aria-pressed=true] .b-hero_carousel-autoplay_pause {
  opacity: 0;
}

.b-dialog {
  visibility: hidden;
}

/*md

# b-breadcrumbs

Breadcrumbs navigation is represented as a list of links.

Вisplay path from Home to parent Folder, including active page as non-clickable

```html_example
<nav class="b-breadcrumbs" aria-label="Breadcrumbs" data-tau="breadcrumbs">
	<ul class="b-breadcrumbs-list">
		<li class="b-breadcrumbs-item m-hidden_sm">
			<a class="b-breadcrumbs-link b-link " href="https://development-na05-hallmark.demandware.net/s/HallmarkUS/" data-tau="breadcrumbs_link">
				Home
			</a>
		</li>
		<li class="b-breadcrumbs-item ">
				/
			<a class="b-breadcrumbs-link b-link " href="/s/HallmarkUS/default/cards/" data-tau="breadcrumbs_link">
				Cards
			</a>
		</li>
		<li class="b-breadcrumbs-item m-hidden_sm">
				/
			<a class="b-breadcrumbs-link b-link m-current" aria-current="page" href="/s/HallmarkUS/default/cards/greeting-cards/" data-tau="breadcrumbs_link">
				Greeting Card(4,327)
			</a>
		</li>
	</ul>
</nav>
```
*/
.b-breadcrumbs {
  color: #095c9c;
  font-size: 14px;
  margin-top: 20px;
}
.b-nav_aux .b-breadcrumbs {
  margin-top: 0;
}
.b-breadcrumbs-list {
  display: flex;
  flex-wrap: wrap;
}
.b-breadcrumbs-item {
  margin-inline-end: 8px;
  white-space: nowrap;
}
.b-breadcrumbs-icon {
  color: #604099;
  margin-inline-end: 4px;
  vertical-align: baseline;
}
.b-breadcrumbs-link {
  white-space: normal;
}
.b-breadcrumbs-link.b-link {
  font-size: 14px;
}
.b-breadcrumbs-link[aria-current=page] {
  color: #293035;
  cursor: default;
  pointer-events: none;
  text-decoration: none;
}

.b-nav_aux {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
  color: #293035;
  margin-bottom: 10px;
  margin-top: 8px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-nav_aux {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-nav_aux {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-nav_aux {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-nav_aux {
    margin-top: 5px;
  }
}
.b-nav_aux.m-content_page {
  margin-top: 32px;
}

/*md

# b-promo_line

Promo-line is classic text banner. It placed right under the header and stretched to full viewport width.

It consist from several elements, but has only one to place text into it - `b-promo_line-inner`.

It could consist inline images, rich formatting text (`strong`, `em`) or links.

## Example

```html_example
<div class="b-promo_line m-header">
	<p class="b-promo_line-inner">
		Get 20% off everything with code: <strong>ILOVE20</strong> <a href="$url('Product-Show', 'pid', 'product-1')$">Buy now</a>
	</p>
</div>
```

*/
.b-promo_line {
  background-color: #c3d6ee;
  color: #095c9c;
  font-size: 16px;
  font-weight: 136;
  padding: 28px 0;
  text-align: center;
}
@media screen and (max-width: 1023.9px) {
  .b-promo_line {
    padding: 12px 0;
  }
}
.b-promo_line.m-search_results {
  background-color: #e4f3dc;
  color: #005016;
}
.m-has_dialog .b-promo_line.m-header {
  overflow-y: scroll;
}
.b-promo_line-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-promo_line-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-promo_line-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-promo_line-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.b-promo_line a {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
}
.b-promo_line a.m-disabled, .b-promo_line a:disabled, .b-promo_line a[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

/*md

# b-promo_tile

This is kind of small banners that used in Page designer as ImageTiles

This is special type of banners that designed to be used in different layout arrangement.

## With caption

```html_example
<figure class="b-promo_tile" style="width: 300px">
	<picture class="b-promo_tile-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
			alt="Just dummy image."
			width="336"
			height="420"
		/>
	</picture>
	<figcaption class="b-promo_tile-caption">
		<p class="b-promo_tile-title">
			New in
		</p>
	</figcaption>
</figure>
```

## Without caption

```html_example
<div class="b-promo_tile" style="width: 300px">
	<picture class="b-promo_tile-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
			alt="Just dummy image."
			width="336"
			height="420"
		/>
	</picture>
</div>
```

*/
.b-promo_tile {
  border-radius: 8px;
  display: grid;
  height: 100%;
  overflow: hidden;
}
.b-promo_tile-picture {
  background: #f3f4f3;
  display: block;
  overflow: hidden;
  padding-bottom: 133.3333333333%;
  position: relative;
  width: 100%;
  grid-column: 1/2;
  grid-row: 1/2;
  height: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-promo_tile-picture {
    padding-bottom: 0;
  }
}
.b-promo_tile-picture img {
  border: none;
  bottom: 0;
  color: #f3f4f3;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-promo_tile-caption {
  align-items: center;
  display: flex;
  flex-direction: column;
  grid-column: 1/2;
  grid-row: 1/2;
  justify-content: center;
  padding: 48px 12px;
  text-align: center;
  z-index: 1;
}
@media screen and (max-width: 767.9px) {
  .b-promo_tile-caption {
    padding-bottom: 36px;
    padding-top: 36px;
  }
}
.b-promo_tile.m-caption_below .b-promo_tile-caption {
  grid-row: 2/2;
  padding-bottom: 20px;
  padding-top: 20px;
}
.b-promo_tile-caption .b-button {
  margin-top: 20px;
}
.b-promo_tile-icon {
  margin-bottom: 8px;
}
.b-promo_tile-title {
  font-size: 18px;
  margin-bottom: 8px;
}
.b-promo_tile-subtitle {
  margin-bottom: 8px;
}

.b-promo_tiles_grid.m-custom_menu .b-promo_tile-title {
  font-size: 16px;
}

/*md

# b-promo_tiles_grid

This component designed to be starting point for developing different kind of
symmetrical and asymmetrical banner layouts.

It used in Page Designer as tilesGrid. See tilesGrid.isml and imageTile.isml for details.

## Basic component implementation

```html_example
<section class="b-promo_tiles_grid">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

## Layouts

In Boilerplate, as example, we provide with 5 basic layouts,
but it could be easily extended to different combinations and any client needs.

### lg-4 md-4 sm-2

```html_example
<section class="b-promo_tiles_grid m-lg_4 m-md_4 m-sm_2">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

### m-lg_4 m-md_4 m-sm_1

```html_example
<section class="b-promo_tiles_grid m-lg_4 m-md_4 m-sm_1">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

### m-lg_3 m-md_3 m-sm_2-1

```html_example
<section class="b-promo_tiles_grid m-lg_3 m-md_3 m-sm_2-1">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

### m-lg_3 m-md_3 m-sm_1

```html_example
<section class="b-promo_tiles_grid m-lg_3 m-md_3 m-sm_1">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
	</div>
</section>
```

### m-lg_2 m-md_2 m-sm_2

```html_example
<section class="b-promo_tiles_grid m-lg_2 m-md_2 m-sm_2">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

### m-lg_2 m-md_2 m-sm_1

```html_example
<section class="b-promo_tiles_grid m-lg_2 m-md_2 m-sm_1">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
	</div>
</section>
```

## Amount for image tiles

Technically it holds unlimited amount of imageTiles (b-promo_tile).

```html_example
<section class="b-promo_tiles_grid m-lg_3 m-md_3 m-sm_2-1">
	<h2 class="b-promo_tiles_grid-title">
		Top Categories
	</h2>
	<div class="b-promo_tiles_grid-content">
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-1')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-1.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							New in
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-2')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-2.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Women
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-4')$"
			>
				<div class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-4.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
				</div>
			</a>
		</div>
		<div class="b-promo_tiles_grid-item">
			<a
				class="b-promo_tiles_grid-item_link"
				href="$url('Search-Show', 'cgid', 'subcategory-2-3')$"
			>
				<figure class="b-promo_tile">
					<picture class="b-promo_tile-picture">
						<img
							loading="lazy"
							src="../images/guide/examples/banner-3x4-3.jpg?$staticlink$"
							alt="Just dummy image."
							width="336"
							height="420"
						/>
					</picture>
					<figcaption class="b-promo_tile-caption">
						<p class="b-promo_tile-title">
							Inspiration
						</p>
					</figcaption>
				</figure>
			</a>
		</div>
	</div>
</section>
```

*/
.b-promo_tiles_grid-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 46px;
  font-weight: 350;
  line-height: 48px;
  margin: 60px 0 40px;
  text-align: center;
}
@media screen and (max-width: 1023.9px) {
  .b-promo_tiles_grid-title {
    font-size: 38px;
    line-height: 48px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-promo_tiles_grid-title {
    margin-top: 48px;
  }
}
.b-promo_tiles_grid-content {
  display: grid;
}
@media screen and (min-width: 1367px) {
  .b-promo_tiles_grid-content {
    grid-gap: 20px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-promo_tiles_grid-content {
    grid-gap: 20px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-promo_tiles_grid-content {
    grid-gap: 20px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
@media screen and (max-width: 767.9px) {
  .b-promo_tiles_grid-content {
    grid-gap: 20px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
.b-promo_tiles_grid-item {
  display: block;
  grid-column: span 3;
}
@media screen and (min-width: 768px) {
  .b-promo_tiles_grid.m-lg_2 .b-promo_tiles_grid-item {
    grid-column: span 6;
  }
  .b-promo_tiles_grid.m-lg_3 .b-promo_tiles_grid-item {
    grid-column: span 4;
  }
}
@media screen and (max-width: 767.9px) {
  .b-promo_tiles_grid-item {
    grid-column: span 3;
  }
  .b-promo_tiles_grid.m-sm_1 .b-promo_tiles_grid-item {
    grid-column: span 6;
  }
  .b-promo_tiles_grid.m-sm_2_1 .b-promo_tiles_grid-item:nth-child(3n) {
    grid-column: span 6;
  }
}
.b-promo_tiles_grid-item_link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  display: block;
}
.b-promo_tiles_grid-item_link.m-disabled, .b-promo_tiles_grid-item_link:disabled, .b-promo_tiles_grid-item_link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

.b-promo_tiles_grid.m-custom_menu {
  margin: 8px auto 40px;
  max-width: 66.6666666667%;
  width: 100%;
}

/*md

# Typography

## Fonts
Hallmark Master Brand web typography uses IBM Plex Serif for serif fonts, and Hallmark’s Beam font for sans-serif.

```html_example
<p style="font-family: 'Beam'"> Beam New VF HMK</p>
<p style="font-family: 'Beam'">
ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
abcdefghijklmnopqrstuvwxyz</br>
0123456789!@#$?^*()</p></br>
<p style="font-family: 'Queens Hat'">Queens Hat</p>
<p style="font-family: 'Queens Hat'">
ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
abcdefghijklmnopqrstuvwxyz</br>
0123456789!@#$?^*()</p>
```

## Headings
Designed to provide same styles of headings across different components.

```html_example
<h1 class="b-heading_1">H1 Headline </h1>
<h2 class="b-heading_2">H2 Headline </h2>
<h3 class="b-heading_3">H3 Headline </h3>
<h4 class="b-heading_4">H4 Headline </h4>
<h5 class="b-heading_5">H5 Headline </h5>
<h6 class="b-heading_6">H6 Headline </h6>
```

### Body
```html_example
<p class="b-body_regular">Body regular<p/>
<p class="b-body_bold">Body bold<p/>
```

*/
.b-body_regular {
  font-size: 15px;
  font-weight: 102;
  letter-spacing: 0.3px;
  line-height: 24px;
}

.b-body_bold {
  font-size: 15px;
  font-weight: 136;
  letter-spacing: 0.3px;
  line-height: 24px;
}

.b-heading_1,
.b-h1 {
  font-family: "Queens Hat", "Times", serif;
  font-size: 52px;
  font-weight: 350;
  line-height: 68px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_1,
  .b-h1 {
    font-size: 42px;
    letter-spacing: -0.0075em;
    line-height: 58px;
  }
}

.b-heading_2,
.b-h2 {
  font-family: "Queens Hat", "Times", serif;
  font-size: 46px;
  font-weight: 350;
  line-height: 48px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_2,
  .b-h2 {
    font-size: 38px;
    line-height: 48px;
  }
}

.b-heading_3,
.b-h3 {
  font-family: "Queens Hat", "Times", serif;
  font-size: 36px;
  font-weight: 350;
  line-height: 40px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_3,
  .b-h3 {
    font-size: 30px;
    line-height: 40px;
  }
}

.b-heading_4,
.b-h4 {
  font-size: 26px;
  font-weight: 136;
  letter-spacing: 0.01em;
  line-height: 32px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_4,
  .b-h4 {
    font-size: 24px;
    letter-spacing: 0.002em;
    line-height: 30px;
  }
}

.b-heading_5,
.b-h5 {
  font-family: "Queens Hat", "Times", serif;
  font-size: 24px;
  font-weight: 350;
  line-height: 32px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_5,
  .b-h5 {
    font-size: 22px;
    line-height: 28px;
  }
}

.b-heading_6,
.b-h6 {
  font-size: 18px;
  font-weight: 136;
  letter-spacing: -0.0055em;
  line-height: 24px;
}
@media screen and (max-width: 1023.9px) {
  .b-heading_6,
  .b-h6 {
    font-size: 18px;
    line-height: 24px;
  }
}

.b-header_comparison {
  align-items: center;
  display: flex;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .b-header_comparison {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    text-align: center;
    width: 48px;
  }
  .b-header_comparison:hover, .b-header_comparison:focus {
    color: #604099;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_comparison {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0 4px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-header_comparison {
    display: none;
  }
  .b-menu_panel .b-header_comparison {
    display: flex;
  }
}
.b-header_comparison-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-header_comparison-icon:hover, .b-header_comparison-icon:focus {
  color: #604099;
}
.b-header_comparison-qty {
  background-color: #de1d8a;
  border-radius: 10px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  height: 20px;
  left: 24px;
  line-height: 20px;
  min-width: 20px;
  padding: 0 3px;
  position: absolute;
  text-align: center;
  top: 6px;
}
html[dir=rtl] .b-header_comparison-qty {
  left: initial;
  right: 24px;
}
.b-header_comparison-copy {
  display: none;
}
.b-menu_panel .b-header_comparison-copy {
  display: block;
}

/*# sourceMappingURL=common-critical-na.css.map*/