@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         |

*/
/*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: 1023px)',
	md-landscape:  'screen and (min-width: 1024) and (max-width: 1200)',
	lg: 'screen and (min-width: 1024px) and (max-width: 1366px)',
	xl: 'screen and (min-width: 1367px)',
	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: 1366px)'
);
```

## 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

# Colors

## Palette

This is palette settings for project. It divided into 2 main categories palette and applied color.

* Palette is general set of colors.
* Applied colors designed as layer of abstraction to have ability to overwritten on brand level.

## Naming convention

Pattern: `<component-name>__<property>--<state>`

`<component-name>` refers to the name of the component or element that
the custom property is associated with.

`<property>` refers to the CSS property being defined, such as
`color`, `background`, `border`, `outline`, `fill`, etc.
Please don't use short names for property such as `bg` etc.

`<state>` term refers to the different states or conditions that a component might be in,
such as `hover`, `active`, `disabled`, `focus`, `invalid`, `error`, `placeholder` etc.

For example, if we have a button component, we might define custom properties for its text color and background color,
like this:

```scss
{$}color-primary-button__color: $color-white;
{$}color-primary-button__background: $color-blue-900;
```

If we want to define a variation of the button that has a different background color when it's in a hovered state,
we can add the state to the custom property name:

```scss
{$}color-primary-button__background--hover: $color-grey-900;
```
*/
/*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

# Rh (Indents rhythm)

This function is designed to keep consistency of vertical and horizontal indents in the project.

Not all values are identical in design, sometimes 20px become 21px, 19px, 22px etc. It does not make
any sense to implement it as is. To keep indents consistent we need to round this values to 4px steps.

Ex: in design 22px / 19px -> rh(5) => 20px; in design 23px -> rh(6) => 24px etc.

This is alternate approach to `$space-md: 10px; $space-lg: 20px;`.

Designers should use the rhythm in his work.

## Usage

```scss
.component {
	@include rh(2); // => 8px
	@include rh(2 4 0); // => 8px 16px 0
}
```
*/
/*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; }
```

*/
/* stylelint-disable-next-line */
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

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

### 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': 16px, 'sm': 9px),
		grid-margin:  ('xl': 88px, 'lg': 60px, 'md': 32px, 'sm': 15px),
	)
);
```

### Grid-span configuration

Please see details [grid-span](01-core-functions-grid-span.html)

## Work with grids

### Development approaches

#### 1. Using `g-grid` mixin

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

#### 2. Using `grid-span` function

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.

### Get gaps / margin / column span

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.

### Examples of usage

Please see [ready-made tools](05-blocks-guide-l-cols.html) details.

*/
/*md
@no-stat

# grid-* (grid config get functions)

This functions designed to get parameters 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': 16px, 'sm': 9px),
		grid-margin:  ('xl': 88px, 'lg': 60px, 'md': 32px, 'sm': 15px),
	),
	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);
	}
}
```
*/
/* stylelint-disable-next-line */
/*md
@no-stat

# Icons variables

This is auto generated file. Please do not edit `_icons.scss`.

List of all icons is [here](./iconsl360.html)

Please see [icons](./01-core-mixins-doc-_icons.html) documentation for details.

*/
/*md
@no-stat

# grid-span

`grid-span` function returns value which could be used as **width, max-witdth, flex-basis, etc.**

### 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);
	}
}
```

*/
/*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
@no-stat

# Icons

List of all icons is [here](./iconsl360.html)

Please see [icons](./01-core-mixins-doc-_icons.html) documentation for details.

*/
/*md
@no-stat

# Carousel slide dimension

This mixin calculates the max-width and min-width for carousel items
based on the number of slides to show and the gap between them.
It is designed to help create responsive carousel layouts by ensuring that the items adjust their sizes appropriately,
taking into account the specified gaps.

## Usage

```scss
.b-carousel-item {
	@include calculate-carousel-item(4, 20px);
}
```
*/
/*md

# g-button

Designed to provide same styles of buttons across different components.
It is possible to use with `<button>` or `<a>` elements

*/
/*md

# g-button_iconed

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_iconed;
	}
}
```
*/
/*md

# g-radio

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

## Usage

Only one g-radio in a given group can be selected at the same time.

If user selects one option in the list that other options come to unselected.

`g-radio` has states: unchecked, checked, hover, disabled and invalid.

## Unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-2" class="b-radio-input"/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-2">Some text</label>
</div>
```

## Checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-3" class="b-radio-input" checked/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-3">Some text</label>
</div>
```

## Disabled unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-4" class="b-radio-input" disabled/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-4">Some text</label>
</div>
```

## Disabled checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-5" class="b-radio-input" checked disabled/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-5">Some text</label>
</div>
```

## Invalid unchecked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-6" class="b-radio-input m-invalid"/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-6">Some text</label>
</div>
```

## Invalid checked

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-7" class="b-radio-input m-invalid" checked/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-7">Some text</label>
</div>
```

## 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
.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-checkbox

This component allows user to choose between two mutually exclusive state (checked or unchecked).

## Usage

A `g-checkbox` is used for select or unselect action items.

It is always tied to `<label>` that describes two opposite states.

The component usually points to choose settings or preferences.

`g-checkbox` has states (unchecked, checked, hover, disabled and invalid).

## Unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-1" />
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-1">Title</label>
</div>
```

## Checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-2" checked/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-2">Title</label>
</div>
```

## Disabled unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-3" disabled/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-3">Title</label>
</div>
```

## Disabled checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-4" checked disabled/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-4">Title</label>
</div>
```

## Invalid unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-5"/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-5">Title</label>
</div>
```

## Invalid checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-6" checked/>
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<label class="b-form_section-label" for="id-checkbox-6">Title</label>
</div>

```

## Required checkbox
```html_example
<div class="b-checkbox">
	<input type="checkbox" class="b-checkbox-input" id="checkox1">
	<svg xmlns="http://www.w3.org/2000/svg" focusable="false" role="presentation" width="16" height="16" viewBox="0 0 16 16">
		<path stroke="currentColor" d="M15.5 3.5 5 14.1.5 9.5l1.1-1.1L5 11.9l9.5-9.5z"/>
	</svg>
	<span class="b-form_section-required">*</span>
	<label class="b-form_section-label" for="checkox1">
		By signing up, you agree to <a href="#" target="_blank" class="b-form_section-link">Privacy and Cookie Policies</a>
	</label>
</div>
```

## 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

Designed to provide same styles of text-type links across different components.
For g-button with arrow icon please use next .isml templates:
<isinclude template="/common/icons/standalone/arrow-right" />
<isinclude template="/common/icons/standalone/arrow-left" />

There are some predefined parameters:
	$_mode: default,   // link variations
	$_type: primary,   // type
	$_font_size: 14px  //font size ( by default 14px )

## Usage

## Default link type

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<a href="#" class="b-link [modifier class]">
	I am a link
</a>
```

##  Primary link 1

```html_example
<!--
Classes:
.m-type_regular_underline - Regular underline
.m-type_regular - Regular
.m-type_light - Light
.m-type_regular_underline.m-big - Regular underline, big
.m-type_regular.m-big - Regular, big
-->
<a href="#" class="b-link m-primary [modifier class]">
	I am a link
</a>
```


## Secondary link 1

```html_example
<!--
Classes:
.m-type_regular_medium - Medium
.m-type_light - Light
.m-type_regular_big - Big
.m-type_bold - Bold
-->
<a href="#" class="b-link m-secondary [modifier class]">
	I am a link
</a>
```

## Icon link type

```html_example
<a href="#" class="b-link m-primary m-type_regular m-big m-icon">
	I am a link
	<svg viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M-7.32137e-07 3.93182L-7.81809e-07 5.06818L12.861 5.06818L9.79724 8.19318L10.5882 9L15 4.5L10.5882 7.6083e-07L9.79724 0.806819L12.861 3.93182L-7.32137e-07 3.93182Z" fill="currentColor"/>
	</svg>
</a>
```
*/
/*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_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-dialog_backdrop

Dialog window backdrop styles that used in several component.

Designed to use same style of backdrop and logic in different components and on particular breakpoints.
Ex: b-dialog, b-menu_panel, b-refinements_panel, b-minicart_panel etc.

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

# g-section_holder

This is global component designed to hold some standalone section of the site
as it 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_fullbleed

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

This is global component designed to hold header of the site as it wrapped into
main container.

This common designs it could be removed and changed to `section_holder`.

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

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

# g-grid

Grid layout component based on CSS grid.

It is designed to easy use project defined grid into components where CSS grid is
applicable.

```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;
		}
	}
}
```
*/
/*md

# g-select

Designed to provide same styles of select across different components.

*/
.g-recaptcha {
  position: relative;
  z-index: 5;
}
.g-recaptcha .grecaptcha-badge {
  width: 70px !important;
  bottom: 20px !important;
  right: 0 !important;
  left: 0;
  transform: scale(0.7);
  transform-origin: 0 bottom;
  transition: width 0.3s ease 0s !important;
}
@media screen and (max-width: 1023px) {
  .g-recaptcha .grecaptcha-badge.grecaptcha-badge {
    overflow: hidden;
    box-shadow: grey 0px 0px 5px;
    visibility: visible !important;
  }
}
.g-recaptcha .grecaptcha-badge:hover {
  width: 256px !important;
}
.b-consent_tracking_visible .g-recaptcha .grecaptcha-badge {
  bottom: 155px !important;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible .g-recaptcha .grecaptcha-badge {
    bottom: 90px !important;
  }
}

.ie-div-position-customer-chat .button-iframe-wrap {
  z-index: 5;
}
.ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 20px;
  right: 10px;
}
@media screen and (min-width: 768px) {
  .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    right: 30px;
  }
}
@media screen and (max-width: 1023px) {
  .b-buy_bar_float .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 90px;
  }
}
.b-consent_tracking_visible .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat, .b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 90px;
}
.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 110px;
}
@media screen and (max-width: 1023px) {
  .b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 130px;
  }
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 165px;
  }
}
.b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 265px;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 185px;
  }
}
@media screen and (max-width: 1023px) {
  .b-consent_tracking_visible .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 150px;
  }
}
@media screen and (max-width: 1023px) {
  .b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat, .b-consent_tracking_visible.b-buy_bar_float .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 220px;
  }
}
@media screen and (min-width: 1024px) {
  .l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 80px;
  }
}
.b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
  bottom: 155px;
}
@media screen and (min-width: 1024px) {
  .b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .button-iframe-wrap .ie-chat-button-iframe-fixed-customer-chat {
    bottom: 165px;
  }
}
.ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 90px;
  height: calc(100% - 110px);
}
.b-consent_tracking_visible .ie-div-position-customer-chat .chat-iframe-wrap, .b-buy_bar_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 160px;
  height: calc(100% - 185px);
}
.b-proceed_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 180px;
  height: calc(100% - 200px);
}
.b-consent_tracking_visible.b-proceed_stucks .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 255px;
  height: calc(100% - 270px);
}
.l-page-checkout .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 150px;
  height: calc(100% - 170px);
}
.b-consent_tracking_visible.b-buy_bar_stucks .ie-div-position-customer-chat .chat-iframe-wrap, .b-consent_tracking_visible.l-page-checkout .ie-div-position-customer-chat .chat-iframe-wrap {
  bottom: 235px;
  height: calc(100% - 255px);
}

.g-header_privacy {
  color: #fff;
}
.b-header_stuck .g-header_privacy {
  display: none;
}
.l-header:hover .g-header_privacy {
  background-color: #000;
}
.g-header_privacy-outer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 14px;
}
@media screen and (max-width: 1023px) {
  .g-header_privacy-outer {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    align-items: flex-start;
    padding: 8px 14px 6px;
  }
}
@media screen and (min-width: 768px) {
  .g-header_privacy-outer div {
    flex-grow: 1;
    text-align: center;
  }
}
.g-header_privacy-outer.onetimenotice-hide {
  display: none;
}
.g-header_privacy-close {
  color: #fff;
  display: table;
  height: 13px;
  width: 13px;
}
@media screen and (max-width: 1023px) {
  .g-header_privacy-close {
    height: 10px;
    width: 10px;
  }
}
.g-header_privacy-close:hover {
  opacity: 0.8;
}
.g-header_privacy-close svg {
  fill: currentColor;
  max-width: 100%;
}

@media print {
  @page {
    margin: 8px 8px auto;
    padding: 16px 0;
    size: a4;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }
  .b-hide_print {
    display: none !important;
  }
  .b-header_utility,
  .l-header,
  .b-menu_panel,
  .b-footer {
    display: none;
  }
}
/*md

# Normalize forms

This package address differences of default styling through all major browsers.

Best practice not include this package *globally* until we use HTML-tags for UI components.

This styles are based on N.Galaher [normalize.css](https://necolas.github.io/normalize.css/)

*/
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

input[type=button], input[type=submit], input[type=reset] {
  -webkit-appearance: button;
}
input[type=checkbox], input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
input[type=checkbox] {
  vertical-align: baseline;
}

button[disabled],
input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: none;
  padding: 0;
}
button:-moz-focusring,
input:-moz-focusring {
  outline: none !important;
}

input::-webkit-inner-spin-button {
  display: none;
}

input::-ms-clear {
  display: none;
}

/*md
@no-stat

# global-animations

This component is designed to store all global animation and include it only once in single place
so all other components could reuse this animations.
*/
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes animation-chevron-up {
  0% {
    transform: translateY(-50%) rotate(46deg);
    width: 9px;
  }
  50% {
    transform: translate(-20%, -50%) rotate(0deg);
    width: 7px;
  }
  100% {
    transform: translateY(-50%) rotate(-46deg);
    width: 9px;
  }
}
@keyframes animation-chevron-down {
  0% {
    transform: translateY(-50%) rotate(-46deg);
    width: 9px;
  }
  50% {
    transform: translate(-20%, -50%) rotate(0deg);
    width: 7px;
  }
  100% {
    transform: translateY(-50%) rotate(46deg);
    width: 9px;
  }
}
@keyframes thumbs-zoom {
  0% {
    transform: translateY(35px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-from-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dialog-opening {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hero-carousel-progress {
  from {
    stroke-dashoffset: 104;
  }
  to {
    stroke-dashoffset: 1;
  }
}
@keyframes heart-bit {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
}
@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes launch360-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(3600deg);
  }
}
/*md

# b-button

Designed to provide same styles of buttons across different components.
It is possible to use with `<button>` or `<a>` elements
For g-button with arrow icon please use next .isml templates:
<isinclude template="/common/icons/standalone/arrow-right" />
<isinclude template="/common/icons/standalone/arrow-left" />

## Primary type button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-default [modifier class]">
	Button Text
</button>
```

## Secondary type button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-secondary [modifier class]">
	m-secondary
</button>
```

## Outline type button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-outline [modifier class]">
	m-outline
</button>
```

## Tertiary type button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-tertiary [modifier class]">
	Button Text
</button>
```

## Button as text / Transparent

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-transparent [modifier class]">
	Button Text
</button>
```

## PDP Add to cart button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-default m-pdp_add_to_cart [modifier class]">
	Add to cart
</button>
```

## Button modifiers

```html_example
<!--
Classes:
.m-small - Small
.m-responsive - Responsive
.m-full_width - Full width
-->
<button type="submit" class="b-button m-default [modifier class]">
	Button Text
</button>
```

## Primary type with icon (before)

```html_example
<!--
Classes:
.m-small - Small button
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="b-button m-default m-icon_before [modifier class]">
	<svg fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M3.8 3.5H.9C.6 3.5.3 3.3.1 3q-.15-.45 0-.9c.2-.3.5-.5.8-.5h2.9c.3-.5.8-.9 1.3-1 .6-.1 1.2 0 1.6.4.5.4.7 1 .7 1.5 0 .6-.3 1.1-.7 1.5s-1 .5-1.6.4c-.5-.1-1-.4-1.3-.9M15.9 3c-.2.3-.5.5-.8.5H8.4c.3-.6.3-1.3 0-1.8H15c.3 0 .6.2.8.5.2.2.2.5.1.8m-5.8 6.9c.5 0 .9-.2 1.2-.5s.6-.7.7-1.2 0-.9-.2-1.3-.6-.7-1-.8c-.5-.1-1-.1-1.4.1-.4.1-.8.5-1 .9H.9c-.3 0-.6.2-.8.5-.1.2-.1.6 0 .8.2.3.5.5.8.5h7.5c.2.3.4.6.7.7.3.2.6.3 1 .3M13 7.1h2.1c.3 0 .6.2.8.5q.3.45 0 .9c-.2.3-.5.5-.8.5H13c.3-.7.3-1.4 0-1.9m-7.5 4.4c-.3 0-.7.1-1 .3s-.5.4-.7.7H.9c-.3 0-.6.2-.8.5q-.3.45 0 .9c.2.3.5.5.8.5h2.9c.2.4.6.7 1 .9s.9.2 1.3 0c.4-.1.8-.4 1-.8s.3-.9.2-1.3c-.1-.5-.3-.9-.7-1.2-.2-.3-.6-.5-1.1-.5m2.9 1H15c.3 0 .6.2.8.5q.3.45 0 .9c-.2.3-.5.5-.8.5H8.4c.3-.6.3-1.3 0-1.9" fill="currentColor"/>
	</svg>
	Filter
</button>
<button type="submit" class="b-button m-default m-icon_after [modifier class]">
	Filter
	<svg fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M3.8 3.5H.9C.6 3.5.3 3.3.1 3q-.15-.45 0-.9c.2-.3.5-.5.8-.5h2.9c.3-.5.8-.9 1.3-1 .6-.1 1.2 0 1.6.4.5.4.7 1 .7 1.5 0 .6-.3 1.1-.7 1.5s-1 .5-1.6.4c-.5-.1-1-.4-1.3-.9M15.9 3c-.2.3-.5.5-.8.5H8.4c.3-.6.3-1.3 0-1.8H15c.3 0 .6.2.8.5.2.2.2.5.1.8m-5.8 6.9c.5 0 .9-.2 1.2-.5s.6-.7.7-1.2 0-.9-.2-1.3-.6-.7-1-.8c-.5-.1-1-.1-1.4.1-.4.1-.8.5-1 .9H.9c-.3 0-.6.2-.8.5-.1.2-.1.6 0 .8.2.3.5.5.8.5h7.5c.2.3.4.6.7.7.3.2.6.3 1 .3M13 7.1h2.1c.3 0 .6.2.8.5q.3.45 0 .9c-.2.3-.5.5-.8.5H13c.3-.7.3-1.4 0-1.9m-7.5 4.4c-.3 0-.7.1-1 .3s-.5.4-.7.7H.9c-.3 0-.6.2-.8.5q-.3.45 0 .9c.2.3.5.5.8.5h2.9c.2.4.6.7 1 .9s.9.2 1.3 0c.4-.1.8-.4 1-.8s.3-.9.2-1.3c-.1-.5-.3-.9-.7-1.2-.2-.3-.6-.5-1.1-.5m2.9 1H15c.3 0 .6.2.8.5q.3.45 0 .9c-.2.3-.5.5-.8.5H8.4c.3-.6.3-1.3 0-1.9" fill="currentColor"/>
	</svg>
</button>
```

*/
.b-button {
  font-size: 20px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: normal;
  align-items: center;
  border: 2px solid #22387c;
  border-radius: 40px;
  cursor: pointer;
  display: inline-flex;
  height: 56px;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  padding: 22px 23px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: initial;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
}
@media not all and (pointer: coarse) {
  .b-button.m-hover, .b-button:hover {
    text-decoration: none;
  }
}
.b-button.m-no_padding {
  height: auto;
  padding: 0;
}
.b-button.m-default {
  background-color: #22387c;
  color: #fff;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-button.m-default:hover, .b-button.m-default.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-button.m-secondary, .b-button.m-outline {
  background-color: #fff;
  color: #22387c;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary:hover, .b-button.m-secondary.m-hover, .b-button.m-outline:hover, .b-button.m-outline.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-button.m-tertiary {
  background-color: #abddf9;
  border-color: #abddf9;
  color: #22387c;
  transition-property: color, border;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary:hover, .b-button.m-tertiary.m-hover {
    background-color: #22387c;
    border-color: #22387c;
    color: #fff;
  }
}
.b-button.m-small {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 900;
  line-height: 18px;
  letter-spacing: normal;
  border: 1px solid;
  height: 44px;
  padding: 17px 24px;
}
@media screen and (max-width: 767px) {
  .b-button.m-responsive {
    font-size: 18px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: normal;
    border: 1px solid;
    height: 44px;
    padding: 17px 24px;
    white-space: normal;
  }
}
.b-button:active, .b-button.m-pressed {
  background-color: #222f58;
  border-color: #222f58;
  color: #fff;
}
.b-button.m-pdp_add_to_cart {
  background-color: #a3bc44;
  border-color: #a3bc44;
  color: #000;
}
@media not all and (pointer: coarse) {
  .b-button.m-pdp_add_to_cart.m-hover, .b-button.m-pdp_add_to_cart:hover {
    background-color: #c3e045;
    border-color: #c3e045;
    color: #000;
  }
}
.b-button.m-pdp_add_to_cart.m-pressed, .b-button.m-pdp_add_to_cart:active {
  background-color: #fff;
  border-color: #22387c;
  color: #000;
}
.b-button svg {
  fill: none;
  height: 16px;
  width: 16px;
}
.b-button svg path {
  fill: currentColor;
}
.b-button:disabled, .b-button.m-disabled {
  background-color: #d9d9d9;
  border-color: #d9d9d9;
  color: #4d4d4d;
  cursor: default;
  pointer-events: none;
}
.b-button.m-icon_before svg {
  margin-right: 8px;
}
.b-button.m-icon_after svg {
  margin-left: 8px;
}
.b-button.m-transparent {
  background-color: transparent;
  border-color: transparent;
  color: #22387c;
}
@media not all and (pointer: coarse) {
  .b-button.m-transparent.m-hover, .b-button.m-transparent:hover {
    background-color: transparent;
    text-decoration: underline;
  }
}
.b-button.m-transparent:active, .b-button.m-transparent.m-pressed {
  background-color: transparent;
  border-color: transparent;
  color: #222f58;
  text-decoration: none;
}
.b-button.m-transparent:disabled, .b-button.m-transparent.m-disabled {
  background-color: transparent;
  border-color: transparent;
  color: #4d4d4d;
}
.b-button-wrapper .b-button {
  min-height: auto;
}
.b-button-wrapper .b-button.m-default, .b-button-wrapper .b-button.m-default_inversed, .b-button-wrapper .b-button.m-outline, .b-button-wrapper .b-button.m-outline_inversed {
  min-height: 40px;
}
.b-options_group.m-account .b-button {
  margin-bottom: 20px;
}
.b-options_group.m-account .b-button:last-child {
  margin-bottom: 0;
}
.b-button-icon_left {
  margin-right: 8px;
}
.b-button-icon_right {
  margin-left: 8px;
}
.b-button.m-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
}
@media not all and (pointer: coarse) {
  .b-button.m-link:hover {
    text-decoration: none;
  }
}
.b-button.m-link > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.b-button svg {
  width: 15px;
}
.b-button.m-link:disabled, .b-button.m-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.b-button.m-link.m-type_regular_underline {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular_underline:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular_underline > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.m-type_regular_underline.b-button svg {
  width: 15px;
}
.b-button.m-link.m-type_regular_underline:disabled, .b-button.m-link.m-type_regular_underline.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular_underline:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-button.m-link.m-type_regular_underline.b-button {
  text-decoration: none;
}
.b-button.m-link.m-type_regular_underline.b-button .b-button-text {
  text-decoration: underline;
}
.b-button.m-link.m-type_regular_underline.m-big {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular_underline.m-big:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular_underline.m-big > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.m-type_regular_underline.m-big.b-button svg {
  width: 15px;
}
.b-button.m-link.m-type_regular_underline.m-big:disabled, .b-button.m-link.m-type_regular_underline.m-big.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular_underline.m-big:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular_underline.m-big.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular_underline.m-big.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular_underline.m-big.b-button .b-button-text {
  text-decoration: underline;
}
.b-button.m-link.m-type_regular {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.m-type_regular.b-button svg {
  width: 15px;
}
.b-button.m-link.m-type_regular:disabled, .b-button.m-link.m-type_regular.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular:hover {
    color: #000;
  }
}
.b-button.m-link.m-type_regular.m-big {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular.m-big:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_regular.m-big > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.m-type_regular.m-big.b-button svg {
  width: 15px;
}
.b-button.m-link.m-type_regular.m-big:disabled, .b-button.m-link.m-type_regular.m-big.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular.m-big:hover {
    text-decoration: underline;
  }
  .b-button.m-link.m-type_regular.m-big:hover > .b-button-text {
    text-decoration: underline;
  }
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_regular.m-big.b-button:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_light {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 300;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_light:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_light > svg {
  height: 9px;
  width: 15px;
}
.b-button.m-link.m-type_light.b-button svg {
  width: 15px;
}
.b-button.m-link.m-type_light:disabled, .b-button.m-link.m-type_light.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_light:hover {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_light:disabled, .b-button.m-link.m-type_light.m-disabled {
  color: rgba(0, 0, 0, 0.5);
}
.b-button.m-link.m-type_light.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-link.m-type_light.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-button.m-link.m-type_light.b-button .b-button-text {
  text-decoration: underline;
}
.b-button.m-full_width, .b-button.m-width_full {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-button.m-half_width {
    flex: 0 0 48%;
    padding: 8px 0;
  }
}

/* stylelint-disable-next-line */
.b-button .ps-widget[ps-sku].ps-disabled {
  all: initial;
}
.b-button .ps-widget[ps-sku].ps-disabled > small {
  all: initial;
  font-size: 20px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 900;
  line-height: 22px;
  letter-spacing: normal;
  cursor: pointer;
  color: #22387c;
}
.b-button .ps-widget[ps-sku].ps-disabled span {
  display: none;
}
@media not all and (pointer: coarse) {
  .b-button .ps-widget[ps-sku].ps-disabled:hover {
    all: initial;
  }
  .b-button .ps-widget[ps-sku].ps-disabled:hover > small {
    all: initial;
    font-size: 20px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 900;
    line-height: 22px;
    letter-spacing: normal;
    cursor: pointer;
    color: #22387c;
  }
}
.b-button:active .ps-widget[ps-sku].ps-disabled > small {
  color: #fff;
}

/*md

# b-global_alerts

This alerts used to notify blind user about dynamic changes on the page. Ex: load more products,
filters applied, sorting applied etc. To meet basic a11y requirements.

It is recommended to not hide this alerts and make them visible - it ease of testing
and fix as soon as it broken.

This messages should not have prominent visual styles.

```html_example
<!--
Classes:
.m-error - Error
-->
<div class="b-global_alerts" style="position: static; transform: none;">
    <div
        class="b-global_alerts-item [modifier class]"
        role="alert"
    >
        Filters applied
    </div>
</div>
```

## What this alerts covers

This is middle level between page and components.

Please see more [info](https://confluence.ontrq.com/pages/viewpage.action?pageId=228864950)

## Visually hide alerts

It is possible to hide this alerts visually, but it is not recommended.

We got special modificator to do so - `m-visually_hidden`. Please see `hideAccessibilityAlerts` site pref to more info.

*/
.b-global_alerts {
  bottom: 20px;
  left: 50%;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  z-index: 21;
}
.b-global_alerts.m-visually_hidden {
  pointer-events: none;
  visibility: hidden;
}
.b-global_alerts-item {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  animation: slide-from-bottom cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  background-color: #e7e7ff;
  color: #000;
  cursor: default;
  display: inline-block;
  margin: 0 auto;
  max-width: 400px;
  min-width: 194px;
  padding: 12px 16px;
}
.b-global_alerts-item.m-error {
  background-color: #fce6e6;
  color: #ed432c;
  visibility: visible;
}

/*md

# b-highlighter

Focus highlighter CSS part. It draw focus ring over focused element.

We have two types of focus highlighting. In case if custom highlighter is not initialized will be shown default outline highlighter.

### Default outline highlighter
```html_example
<br>
<div>
	<input class="b-input m-focused" type="text" placeholder="Default outline example" style="width:240px;">
</div>
<br>
```

### Custom highlighter
```html_example
<br>
<div style="position:relative;">
	<div class="b-highlighter_inited">
		<input class="b-input" type="text" placeholder="Custom highlighter example" style="width:240px;">
	</div>
	<div class="b-highlighter m-visible" style="top:-5px; left:-4px; width:241px; height:50px;"></div>
</div>
<br>
```
*/
.b-highlighter {
  border: 3px solid #fff;
  border-radius: 1px;
  box-sizing: content-box;
  color: #1c619f;
  opacity: 0;
  outline: 3px solid #1c619f;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: scale(1.2);
  transition-duration: 0.15s;
  transition-property: top, left, width, height, visibility, transform, opacity;
  transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
  visibility: hidden;
  z-index: 22;
}
.b-highlighter.m-visible {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}
.b-highlighter.m-hurry {
  transition-duration: 0.1s;
}

*:focus,
.m-focused {
  outline: 3px solid #1c619f !important;
}

.b-highlighter_inited *:focus {
  outline: none !important;
}

.b-continue_shopping {
  align-items: baseline;
  display: inline-flex;
  text-decoration: none;
}
.b-continue_shopping.b-link.m-icon svg {
  margin: 0 10px 0 0;
}

/*md

# b-link

Please see [g-link](./02-components-g-link.html) for details.

*/
.b-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
}
@media not all and (pointer: coarse) {
  .b-link:hover {
    text-decoration: none;
  }
}
.b-link > svg {
  height: 9px;
  width: 15px;
}
.b-link.b-button svg {
  width: 15px;
}
.b-link:disabled, .b-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.b-link.m-icon {
  align-items: center;
  display: flex;
}
.b-link.m-icon svg {
  margin-inline-start: 10px;
}
.b-link.m-primary.m-type_regular_underline {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular_underline:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_regular_underline > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-primary.m-type_regular_underline.b-button svg {
  width: 15px;
}
.b-link.m-primary.m-type_regular_underline:disabled, .b-link.m-primary.m-type_regular_underline.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular_underline:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-link.m-primary.m-type_regular_underline.b-button {
  text-decoration: none;
}
.b-link.m-primary.m-type_regular_underline.b-button .b-button-text {
  text-decoration: underline;
}
.b-link.m-primary.m-type_regular_underline.m-big {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular_underline.m-big:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_regular_underline.m-big > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-primary.m-type_regular_underline.m-big.b-button svg {
  width: 15px;
}
.b-link.m-primary.m-type_regular_underline.m-big:disabled, .b-link.m-primary.m-type_regular_underline.m-big.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular_underline.m-big:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_regular_underline.m-big.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular_underline.m-big.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_regular_underline.m-big.b-button .b-button-text {
  text-decoration: underline;
}
.b-link.m-primary.m-type_regular {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_regular > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-primary.m-type_regular.b-button svg {
  width: 15px;
}
.b-link.m-primary.m-type_regular:disabled, .b-link.m-primary.m-type_regular.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_regular:hover {
    color: #000;
  }
}
.b-link.m-primary.m-type_light {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 300;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_light:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_light > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-primary.m-type_light.b-button svg {
  width: 15px;
}
.b-link.m-primary.m-type_light:disabled, .b-link.m-primary.m-type_light.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_light:hover {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_light:disabled, .b-link.m-primary.m-type_light.m-disabled {
  color: rgba(0, 0, 0, 0.5);
}
.b-link.m-primary.m-type_light.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-primary.m-type_light.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-link.m-primary.m-type_light.b-button .b-button-text {
  text-decoration: underline;
}
.b-link.m-primary.m-big {
  font-size: 16px;
}
.b-link.m-secondary.m-type_regular {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: #787676;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_regular > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-secondary.m-type_regular.b-button svg {
  width: 15px;
}
.b-link.m-secondary.m-type_regular:disabled, .b-link.m-secondary.m-type_regular.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular:hover {
    text-decoration: underline;
  }
}
.b-link.m-secondary.m-type_regular_medium {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: #787676;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular_medium:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_regular_medium > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-secondary.m-type_regular_medium.b-button svg {
  width: 15px;
}
.b-link.m-secondary.m-type_regular_medium:disabled, .b-link.m-secondary.m-type_regular_medium.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular_medium:hover {
    text-decoration: underline;
  }
}
.b-link.m-secondary.m-type_regular_big {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 24px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular_big:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_regular_big > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-secondary.m-type_regular_big.b-button svg {
  width: 15px;
}
.b-link.m-secondary.m-type_regular_big:disabled, .b-link.m-secondary.m-type_regular_big.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_regular_big:hover {
    font-weight: 700;
  }
}
.b-link.m-secondary.m-type_bold {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_bold:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_bold > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-secondary.m-type_bold.b-button svg {
  width: 15px;
}
.b-link.m-secondary.m-type_bold:disabled, .b-link.m-secondary.m-type_bold.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_bold:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_light {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-weight: 300;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_light:hover {
    text-decoration: none;
  }
}
.b-link.m-secondary.m-type_light > svg {
  height: 9px;
  width: 15px;
}
.b-link.m-secondary.m-type_light.b-button svg {
  width: 15px;
}
.b-link.m-secondary.m-type_light:disabled, .b-link.m-secondary.m-type_light.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link.m-secondary.m-type_light:hover {
    text-decoration: underline;
  }
}

/*md

# b-link_phone

Phone link with **tel:[number]** scheme

```html_example
<a href="tel:1-866-867-0110" class="b-link_phone">1-866-867-0110</a>
```
*/
.b-link_phone {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #000;
  unicode-bidi: isolate;
  white-space: nowrap;
}
@media not all and (pointer: coarse) {
  .b-link_phone:hover {
    text-decoration: none;
  }
}
.b-link_phone > svg {
  height: 9px;
  width: 15px;
}
.b-link_phone.b-button svg {
  width: 15px;
}
.b-link_phone:disabled, .b-link_phone.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-link_phone:hover {
    color: #4d4d4d;
  }
}
.b-link_phone-icon {
  margin-inline-end: 10px;
}
.b-link_phone-icon svg {
  height: 17px;
  margin-top: -8px;
  width: 17px;
}

/*md

# b-link_email

Email link with **mailto:[email]** scheme

```html_example
<a href="mailto:customerservice@boilerplate.com" class="b-link_email">customerservice@boilerplate.com</a>
```
*/
.b-link_email {
  text-decoration: underline;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  white-space: nowrap;
}
.b-link_email:hover {
  color: #4d4d4d;
  text-decoration: none;
}

/*md

# b-dialog

### We have two types of dialog: *Usual dialog* and *Search suggestions dialog*

The usual dialog have different modifiers **m-*** which depend on the width of the dialog

```html_example
<!--
Include: _b-dialog.html
-->
```
*/
.b-dialog {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, background-color;
  visibility: hidden;
  z-index: 17;
  justify-content: center;
  padding: 40px 0;
}
.b-dialog.m-opened, .b-dialog.m-active {
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  visibility: visible;
}
.b-dialog.m-session_expiration {
  z-index: 16;
}
.b-dialog-window {
  animation: dialog-opening cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  color: #000;
  margin: auto;
  max-width: 508px;
  padding: 0 50px 50px;
  position: relative;
  transform-origin: top center;
  width: auto;
  z-index: 17;
}
@media screen and (min-width: 1024px) {
  .b-dialog-window {
    margin: auto 32px;
    min-width: 508px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-dialog-window {
    padding: 0 40px 43px;
    width: 488px;
  }
}
@media screen and (max-width: 767px) {
  .b-dialog-window {
    max-width: calc(100% - 50px);
    padding: 0 25px 40px;
  }
}
.m-coupons .b-dialog-window {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
@media screen and (min-width: 1024px) {
  .m-coupons .b-dialog-window {
    min-width: 648px;
    padding: 0 110px 65px;
  }
}
@media screen and (min-width: 768px) {
  .m-drug_facts .b-dialog-window {
    max-width: 720px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .m-drug_facts .b-dialog-window {
    width: 600px;
  }
}
.b-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  padding-top: 50px;
}
@media screen and (max-width: 1023px) {
  .b-dialog-header {
    margin-bottom: 25px;
    padding-top: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .b-dialog-header.m-hide_lg {
    display: none;
  }
}
.b-dialog-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-dialog-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dialog-title.m-small {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  display: block;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-dialog-title.m-small {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dialog.m-session_expiration .b-dialog-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-session_expiration .b-dialog-title {
    font-size: 32px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.m-success .b-dialog-title.m-default {
  display: none;
}
.b-dialog-title.m-success {
  display: none;
}
.m-success .b-dialog-title.m-success {
  display: block;
}
.b-dialog-close {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
  position: absolute;
  right: 20px;
  top: 20px;
  /* stylelint-disable-next-line */
}
.b-dialog-close:hover {
  color: #808080;
}
html[dir=rtl] .b-dialog-close {
  left: 20px;
  right: initial;
}
.b-dialog-close > svg {
  height: 14px;
  width: 14px;
}
.b-dialog.m-session_expiration .b-dialog-close {
  right: 15px;
  top: 10px;
}
.b-dialog-body {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: 8px;
}
@media screen and (max-width: 767px) {
  .b-dialog-body {
    margin-top: 32px;
  }
}
.b-dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .b-dialog-footer {
    flex-direction: column;
  }
}
.b-dialog-footer.m-buttons_group {
  gap: 10px;
}
.b-dialog-footer.m-buttons_group .b-button {
  width: calc(50% - 5px);
}
@media screen and (max-width: 767px) {
  .b-dialog-footer.m-buttons_group .b-button {
    width: 100%;
  }
}
.b-dialog-footer.m-buttons_group .b-dialog-close {
  width: auto;
}
.b-dialog.m-session_expiration .b-dialog-footer {
  margin-top: 60px;
}
.b-dialog.m-session_expiration .b-dialog-footer_button {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-dialog.m-session_expiration .b-dialog-footer_button:hover {
    text-decoration: none;
  }
}
.b-dialog.m-session_expiration .b-dialog-footer_button > svg {
  height: 9px;
  width: 15px;
}
.b-dialog.m-session_expiration .b-dialog-footer_button.b-button svg {
  width: 15px;
}
.b-dialog.m-session_expiration .b-dialog-footer_button:disabled, .b-dialog.m-session_expiration .b-dialog-footer_button.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-dialog.m-session_expiration .b-dialog-footer_button:hover {
    text-decoration: none;
  }
}
.b-dialog.m-session_expiration .b-dialog-footer_button.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-dialog.m-session_expiration .b-dialog-footer_button.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-dialog.m-session_expiration .b-dialog-footer_button.b-button .b-button-text {
  text-decoration: underline;
}
.m-drug_facts .b-dialog {
  padding: 90px 0;
}

.b-dialog.m-quick_view .b-dialog-window {
  min-height: 80vh;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-dialog.m-quick_view .b-dialog-window {
    min-width: calc(100% - 50px);
  }
}
@media screen and (min-width: 1024px) {
  .b-dialog.m-quick_view .b-dialog-window {
    max-width: 100%;
    padding: 0 48px 28px;
    width: 1264px;
  }
}

.b-dialog.m-search_suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: auto;
  align-items: flex-start;
  display: none;
  overflow-y: auto;
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .b-dialog.m-search_suggestions {
    max-height: calc(100vh - 138px);
  }
}
@media screen and (max-width: 1023px) {
  .b-dialog.m-search_suggestions {
    max-height: calc(var(--dynamic-search-height) - 188px);
    max-height: calc(100dvh - 188px);
  }
}
.b-dialog.m-search_suggestions.m-opened {
  display: block;
}
.b-dialog.m-search_suggestions::after {
  touch-action: none;
}

.b-dialog.m-reset_password .b-dialog-window {
  min-width: auto;
  width: 560px;
}
@media screen and (max-width: 1023px) {
  .b-dialog.m-reset_password .b-dialog-message {
    text-align: center;
  }
}
.b-dialog.m-reset_password .b-dialog-header {
  justify-content: center;
}

.b-dialog.m-remove_product .b-dialog-window {
  min-width: 560px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-dialog.m-remove_product .b-dialog-window {
    width: 488px;
  }
}
@media screen and (max-width: 767px) {
  .b-dialog.m-remove_product .b-dialog-window {
    min-width: 0;
  }
}

.b-dialog.m-notify_me .b-dialog-window {
  margin: 0 25px;
  max-width: 100%;
  min-width: auto;
  width: 508px;
}

@media screen and (max-width: 1023px) {
  .b-dialog.m-verify_address .b-form-line + .b-form-line {
    margin-top: 25px;
  }
}

.b-dialog.m-alle_removed .b-dialog-header {
  margin-bottom: 20px;
}
.b-dialog.m-alle_removed .b-dialog-body {
  margin-top: 0;
}

.b-dialog.m-first_visit_popup .b-dialog-body {
  margin-top: 0;
}
.b-dialog.m-first_visit_popup .b-dialog-title {
  margin-bottom: 25px;
}

.b-dialog.m-select_sample .b-dialog-window {
  width: 100%;
}
.b-dialog.m-select_sample .b-dialog-title {
  text-align: left;
}
@media screen and (max-width: 1023px) {
  .b-dialog.m-select_sample .b-dialog-title {
    margin-top: 6px;
  }
}
.b-dialog.m-select_sample .b-dialog-footer {
  margin-top: 25px;
}

.b-dialog.m-welcome_popup .b-dialog-window {
  overflow: hidden;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-welcome_popup .b-dialog-window {
    min-width: 700px;
  }
}
@media screen and (max-width: 767px) {
  .b-dialog.m-welcome_popup .b-dialog-window {
    max-width: 450px;
    min-width: auto;
    width: calc(100% - 30px);
  }
}
.b-dialog.m-welcome_popup .b-dialog-header {
  margin-bottom: 0;
  padding-top: 0;
}
.b-dialog.m-welcome_popup .b-dialog-body {
  height: 100%;
  margin-top: 0;
}

/*md
# b-content_placeholder

Future implemented content placeholder. Needed only for not implemented features, like "Bazarvoice reviews will be here".

## Example

```html_example
<div class="b-content_placeholder">
	Bazaarvoice reviews will be here
</div>
```
*/
.b-content_placeholder {
  font-size: 80px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  align-items: center;
  background-color: #f9f9f9;
  color: #999;
  display: flex;
  height: 70vh;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .b-content_placeholder {
    font-size: 40px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}

/*md

# b-user_content

This component is used to provide regular document styling in places where content managment team could
insert rich HTML markup.

## Headings

```html_example
<div class="b-user_content">
	<h1>General Information</h1>
	<h2>General Information</h2>
	<h3>General Information</h3>
	<h4>General Information</h4>
	<h5>General Information</h5>
</div>
```

## Paragraphs

```html_example
<div class="b-user_content">
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
</div>
```

## An unordered list

```html_example
<div class="b-user_content">
	<ul>
		<li>Provide, operate, and maintain our webste</li>
		<li>Improve, personalize, and expand our webste</li>
		<li>Understand and analyze how you use our webste</li>
	</ul>
</div>
```

## An ordered list

```html_example
<div class="b-user_content">
	<ol>
		<li>Develop new products, services, features, and functionality</li>
		<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
		<li>Send you emails</li>
		<li>Find and prevent fraud</li>
	</ol>
</div>
```

## Full page

```html_example
<div class="b-user_content">
	<h1>
		Privacy Policy
	</h1>
	<h2>General Information</h2>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<ul>
		<li>Provide, operate, and maintain our webste</li>
		<li>Improve, personalize, and expand our webste</li>
		<li>Understand and analyze how you use our webste</li>
	</ul>
	<ol>
		<li>Develop new products, services, features, and functionality</li>
		<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
		<li>Send you emails</li>
		<li>Find and prevent fraud</li>
	</ol>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
</div>
```
*/
.b-user_content > h1,
.b-user_content .b-h1 {
  font-size: 80px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
@media screen and (max-width: 1023px) {
  .b-user_content > h1,
  .b-user_content .b-h1 {
    font-size: 40px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-user_content > h2,
.b-user_content .b-h2 {
  font-size: 66px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
  .b-user_content > h2,
  .b-user_content .b-h2 {
    font-size: 36px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-user_content > h3,
.b-user_content .b-h3 {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-user_content > h3,
  .b-user_content .b-h3 {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-user_content > h4,
.b-user_content .b-h4 {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-user_content > h4,
  .b-user_content .b-h4 {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-user_content > h5,
.b-user_content .b-h5 {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-user_content > h5,
  .b-user_content .b-h5 {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-user_content > h2,
.b-user_content > h3,
.b-user_content > h4,
.b-user_content > h5 {
  margin-bottom: 16px;
  margin-top: 32px;
}
.b-user_content > h2:first-child,
.b-user_content > h3:first-child,
.b-user_content > h4:first-child,
.b-user_content > h5:first-child {
  margin-top: 0;
}
.b-user_content p {
  margin-bottom: 16px;
}
.b-user_content .b-paragraph {
  margin-bottom: 0;
}
.b-user_content ul,
.b-user_content ol {
  display: block;
  margin-bottom: 16px;
  padding-left: 20px;
}
.b-user_content li {
  display: list-item;
  margin-bottom: 4px;
}
.b-user_content ul {
  list-style: disc outside;
}
.b-user_content ol {
  list-style: decimal outside;
}
.b-user_content .b-unstyled_list {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

/*md

# b-accordion

Global accordion component

## Attributes

```
data-allow-toggle="true" - Flag that allow or dissallow toggle
data-open-first="true" - Flag that open first item
data-allow-multiple="true" - Flag that allow or dissallow multiple open items
```

## Simple accordion example

```html_example
<!--
Include: _b-accordion-1.html
-->
```

## Accordion with multiple open items

```html_example
<!--
Include: _b-accordion-2.html
-->
```

## Init accordion on sm, md & lg devices

### Attributes

```
.b-accordion
	data-widget="accordion" - init for all viewports
	data-widget.sm="accordion" - init for sm viewports
	data-widget.sm.md="accordion" - init for sm & md viewports
	data-widget.sm.md.lg="accordion" - init for sm & md & lg viewports
.b-accordion-item
	data-widget="accordionItem" - init for all viewports
	data-widget.sm="accordionItem" - init for sm viewports
	data-widget.sm.md="accordionItem" - init for sm & md viewports
	data-widget.sm.md.lg="accordionItem" - init for sm & md & lg viewports
```

```html_example
<!--
Include: _b-accordion-3.html
-->
```

## 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);
	}
}
```
*/
.b-accordion {
  border-top: 1px solid var(--g-accordion__border, #ccc);
}
.b-accordion-item {
  border-bottom: 1px solid var(--g-accordion__border, #ccc);
}
.b-accordion-button {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 20px 0 15px;
  text-align: start;
  width: 100%;
}
.b-accordion-button:hover {
  color: var(--g-accordion__color--hover, #4d4d4d);
}
.b-accordion-content {
  opacity: 0;
  overflow: hidden;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: height, opacity;
  visibility: hidden;
}
.b-accordion-content[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
}
.b-accordion-item:not([data-initialized="1"]) .b-accordion-content {
  opacity: 1;
  visibility: visible;
}
.b-accordion-content_inner {
  overflow: hidden;
}

/*md

# b-icon_chevron

```html_example
<!--
Classes:
.m-static_down - Static down
-->
<span class="b-icon_chevron [modifier class]"></span>
```

# m-opened

```html_example
<!--
Classes:
.m-static_down - Static down
-->
<div class="m-opened">
	<span class="b-icon_chevron [modifier class]"></span>
</div>
```

*/
.b-icon_chevron {
  display: block;
  flex-shrink: 0;
  height: 14px;
  margin-inline-start: auto;
  position: relative;
  width: 14px;
}
.b-icon_chevron::after, .b-icon_chevron::before {
  animation-duration: 0.23s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 2px solid;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: 50%;
  width: 9px;
}
.b-icon_chevron::before {
  animation-name: animation-chevron-down;
  border-bottom-left-radius: 1px;
  border-top-left-radius: 1px;
  left: 0;
}
[aria-expanded=true] ~ .b-icon_chevron::before, [aria-expanded=true] .b-icon_chevron::before {
  animation-name: animation-chevron-up;
}
.b-icon_chevron::after {
  animation-name: animation-chevron-up;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
  right: 0;
}
[aria-expanded=true] ~ .b-icon_chevron::after, [aria-expanded=true] .b-icon_chevron::after {
  animation-name: animation-chevron-down;
}
.b-icon_chevron.m-static_down {
  width: 15px;
}
.b-icon_chevron.m-static_down::before {
  animation-name: animation-chevron-up;
}
.b-icon_chevron.m-static_down::after {
  animation-name: animation-chevron-down;
}
.m-opened .b-icon_chevron.m-static_down::before {
  animation-name: animation-chevron-down;
}
.m-opened .b-icon_chevron.m-static_down::after {
  animation-name: animation-chevron-up;
}

/*md

# b-message

```html_example
<!--
Classes:
.m-success - Valid
.m-error - Invalid
.m-info - Inform
.m-warning - Warning
.m-primary - Primary
.m-full_box - Full box
.m-align_left - Align left
.m-minicart - Minicart
-->
<div class="b-message [modifier class]">
	<div class="b-message-icon">
		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
			<path
				fill="currentColor"
				d="M.8 13.4c0 .3.3.6.6.6h2.1c.3 0 .6-.3.6-.6v-.9H.8zm11.1 0c0 .3.3.6.6.6h2.1c.3 0 .6-.3.6-.6v-.9h-3.3zm2.8-6.5-.6-.6L11.8 3c-.4-.6-1.1-1-1.9-1H6.1c-.7 0-1.4.4-1.9 1L1.9 6.4l-.6.5C.5 7.6 0 8.7 0 9.8v1.5c0 .1 0 .2.1.3s.2.1.3.1h15.1c.1 0 .2 0 .3-.1s.1-.2.1-.3V9.8c.1-1.1-.4-2.2-1.2-2.9M4.9 3.4q.45-.6 1.2-.6h3.8q.75 0 1.2.6L13 6.2H3zm-2.4 7.1c-.5 0-.9-.3-1.1-.7-.1-.4 0-.9.3-1.2s.8-.4 1.3-.3c.4.2.7.7.6 1.1 0 .7-.5 1.2-1.1 1.1m11 0c-.5 0-.9-.3-1.1-.7s-.1-.9.3-1.3c.3-.2.8-.3 1.3-.2.4.2.7.6.7 1.1-.1.7-.6 1.2-1.2 1.1"/>
		</svg>
	</div>
	Some text message
	<a class="b-message-link" href="#">text</a>
</div>
```

*/
.b-message {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #000;
  margin-bottom: 8px;
  padding: 15px 15px 12px;
  text-align: center;
  border-radius: 8px;
}
@media screen and (max-width: 1023px) {
  .b-message {
    padding: 8px 16px;
  }
}
.b-message:not(:first-child):last-child {
  margin: 0;
}
.b-message.m-success {
  background-color: #2bb229;
}
.b-message.m-error {
  background-color: #fce6e6;
  color: #951e0f;
}
.b-message.m-primary {
  background-color: #22387c;
  color: #fff;
}
.b-message.m-info {
  background-color: #abddf9;
}
.b-message.m-warning {
  background-color: #e7e7ff;
}
.b-message.m-full_box {
  min-width: 100%;
}
.b-message.m-payment-card_error {
  color: #ed432c;
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .b-message.m-payment-card_error {
    padding-left: 0;
  }
}
.b-message.m-align_left {
  text-align: left;
}
.b-message-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-message-link:hover {
    text-decoration: none;
  }
}
.b-message-link > svg {
  height: 9px;
  width: 15px;
}
.b-message-link.b-button svg {
  width: 15px;
}
.b-message-link:disabled, .b-message-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-message-link:hover {
    text-decoration: none;
  }
}
.b-message-link.m-primary .b-message-link {
  color: #fff;
}
.b-message-icon {
  display: inline-flex;
  height: 22px;
  margin-right: 6px;
  vertical-align: middle;
  width: 22px;
}
.b-message-caption {
  margin-bottom: 20px;
}

.datepicker {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  display: none;
  padding: 15px 12px 20px;
  position: absolute;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  width: 272px;
  z-index: 6;
}
.datepicker.active {
  display: block;
  z-index: 17;
}
.datepicker-controls {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: flex;
  justify-content: space-between;
}
.datepicker-controls .button {
  cursor: pointer;
}
.datepicker-controls .button.view-switch {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.datepicker-controls .button[disabled] {
  color: #999;
  cursor: default;
}
.datepicker-controls svg {
  width: 18px;
  height: 10px;
}
.datepicker-view {
  border-top: 1px solid #d9d9d9;
  margin-top: 10px;
  padding-top: 12px;
}
.datepicker .days-of-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 1fr;
}
.datepicker .days-of-week .dow {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  height: 29px;
  justify-content: center;
  width: 29px;
}
.datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.datepicker-grid.months, .datepicker-grid.years, .datepicker-grid.decades {
  grid-template-columns: repeat(3, 1fr);
}
.datepicker-cell {
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  height: 29px;
  justify-content: center;
}
.datepicker-cell.day {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  width: 29px;
}
@media not all and (pointer: coarse) {
  .datepicker-cell.day:hover {
    text-decoration: underline;
  }
}
.datepicker-cell.day.prev, .datepicker-cell.day.next {
  color: #999;
}
.datepicker-cell.disabled {
  cursor: default;
  color: #999;
}
.datepicker-cell.disabled:hover {
  text-decoration: none;
}
.datepicker-cell.month {
  padding: 8px 16px;
}
.datepicker-cell.selected, .datepicker-cell.focused {
  background: #000;
  color: #fff;
}

/*md

# Input

Default input element

## Default

```html_example
<!--
Classes:
.m-invalid - Invalid
.m-valid - Valid
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<div class="b-input_icon">
	<input
		class="b-input [modifier class]"
		type="text"
		placeholder="Promo Code"
		name="couponCode"
		required=""
		value=""
	>
</div>
```

*/
.b-input {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #fff;
  border: none;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #4d4d4d;
  height: 44px;
  padding: 18px 10px;
  vertical-align: baseline;
  width: 100%;
}
.b-input::placeholder {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.5px;
  color: #4d4d4d;
}
.b-input.m-active, .b-input:active {
  background-color: #fff;
  border-color: #000;
}
.b-input.m-focus, .b-input:focus {
  background-color: #fff;
  border-color: #4d4d4d;
}
@media not all and (pointer: coarse) {
  .b-input.m-hover, .b-input:hover {
    background-color: #fff;
    border-color: #4d4d4d;
  }
}
.b-input.m-invalid {
  border-color: #da582f;
}
.b-input.m-invalid + * {
  color: #951e0f;
}
.b-input.m-disabled, .b-input:disabled, .b-input[disabled] {
  background-color: #ccc;
  border-color: #999;
}
.b-input.m-disabled::placeholder, .b-input:disabled::placeholder, .b-input[disabled]::placeholder {
  color: #808080;
}
.b-input.m-search {
  -webkit-appearance: none;
          appearance: none;
}
.b-input.m-search::-webkit-search-cancel-button {
  display: none;
}

/*md

# Select

This component allows user to choose one option from drop-down list.

## Default

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
.m-invalid - Invalid
-->
<div class="b-select m-default">
    <div class="b-select-wrap_input">
        <select data-ref="field" class="b-select-input [modifier class]" id="Default" name="" required="" value="" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
            <option value="Select Long Text 1" data-id="Select Long Text 1">Select 1 Select Long Text</option>
            <option value="Select Long Text 2" data-id="Select Long Text 2">Select 2 Select Long Text</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 12.6.5 5.1l1-1.1L8 10.5 14.5 4l1.1 1.1z"></path>
        </svg>
    </div>
</div>
```

## Primary - Rounded

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
.m-invalid - Invalid
-->
<div class="b-select m-primary">
    <div class="b-select-wrap_input">
        <select data-ref="field" class="b-select-input [modifier class]" id="Default" name="" required="" value="" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
            <option value="Select Long Text 1" data-id="Select Long Text 1">Select 1 Select Long Text</option>
            <option value="Select Long Text 2" data-id="Select Long Text 2">Select 2 Select Long Text</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 12.6.5 5.1l1-1.1L8 10.5 14.5 4l1.1 1.1z"></path>
        </svg>
    </div>
</div>
```

## Secondary - Rounded

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
.m-invalid - Invalid
-->
<div class="b-select m-secondary">
    <div class="b-select-wrap_input">
        <select data-ref="field" class="b-select-input [modifier class]" id="Default" name="" required="" value="" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
            <option value="Select Long Text 1" data-id="Select Long Text 1">Select 1 Select Long Text</option>
            <option value="Select Long Text 2" data-id="Select Long Text 2">Select 2 Select Long Text</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 12.6.5 5.1l1-1.1L8 10.5 14.5 4l1.1 1.1z"></path>
        </svg>
    </div>
</div>
```

## Tertiary - Rounded

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
.m-invalid - Invalid
-->
<div class="b-select m-tertiary">
    <div class="b-select-wrap_input">
        <select data-ref="field" class="b-select-input [modifier class]" id="Default" name="" required="" value="" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
            <option value="Select Long Text 1" data-id="Select Long Text 1">Select 1 Select Long Text</option>
            <option value="Select Long Text 2" data-id="Select Long Text 2">Select 2 Select Long Text</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 12.6.5 5.1l1-1.1L8 10.5 14.5 4l1.1 1.1z"></path>
        </svg>
    </div>
</div>
```

## Ghost - Rounded

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
.m-invalid - Invalid
-->
<div class="b-select m-ghost">
    <div class="b-select-wrap_input">
        <select data-ref="field" class="b-select-input [modifier class]" id="Default" name="" required="" value="" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
            <option value="Select Long Text 1" data-id="Select Long Text 1">Select 1 Select Long Text</option>
            <option value="Select Long Text 2" data-id="Select Long Text 2">Select 2 Select Long Text</option>
        </select>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 12.6.5 5.1l1-1.1L8 10.5 14.5 4l1.1 1.1z"></path>
        </svg>
    </div>
</div>
```

*/
.b-select.m-default {
  position: relative;
  width: 100%;
}
.b-select.m-default .b-select-wrap_input {
  position: relative;
}
.b-select.m-default .b-select-input {
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 44px;
  cursor: pointer;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 10px 38px 10px 12px;
}
.b-select.m-default .b-select-input:focus::-ms-value {
  background: transparent;
  color: #000;
}
.b-select.m-default .b-select-input::-ms-expand {
  display: none;
}
.b-select.m-default .b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.b-select.m-default .b-select-input_as_text {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-select.m-default svg {
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
.b-select.m-default option {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #fff;
  color: #000;
}
.b-select.m-default .b-select-input {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  border-radius: 8px;
}
.b-select.m-default .b-select-input {
  color: #4d4d4d;
  background-color: #fff;
  border-color: #ccc;
}
.b-select.m-default .b-select-input + svg,
.b-select.m-default .b-select-input + svg path {
  fill: #000;
}
.b-select.m-default .b-select-input:hover,
.b-select.m-default .b-select-input.m-hover {
  color: #4d4d4d;
  background-color: #fff;
  border-color: #4d4d4d;
}
.b-select.m-default .b-select-input:hover + svg,
.b-select.m-default .b-select-input:hover + svg path,
.b-select.m-default .b-select-input.m-hover + svg,
.b-select.m-default .b-select-input.m-hover + svg path {
  fill: #000;
}
.b-select.m-default .b-select-input:active,
.b-select.m-default .b-select-input.m-active {
  color: #4d4d4d;
  background-color: #fff;
  border-color: #4d4d4d;
}
.b-select.m-default .b-select-input:active + svg,
.b-select.m-default .b-select-input:active + svg path,
.b-select.m-default .b-select-input.m-active + svg,
.b-select.m-default .b-select-input.m-active + svg path {
  fill: #000;
}
.b-select.m-default .b-select-input.m-invalid {
  color: #4d4d4d;
  background-color: #fff;
  border-color: #da582f;
}
.b-select.m-default .b-select-input.m-invalid + svg,
.b-select.m-default .b-select-input.m-invalid + svg path {
  fill: #da582f;
}
.b-select.m-default .b-select-input:focus,
.b-select.m-default .b-select-input.m-focus {
  color: #4d4d4d;
  background-color: #fff;
  border-color: #4d4d4d;
}
.b-select.m-default .b-select-input:focus + svg,
.b-select.m-default .b-select-input:focus + svg path,
.b-select.m-default .b-select-input.m-focus + svg,
.b-select.m-default .b-select-input.m-focus + svg path {
  fill: #000;
}
.b-select.m-default .b-select-input:disabled,
.b-select.m-default .b-select-input[disabled],
.b-select.m-default .b-select-input.m-disabled {
  color: #4d4d4d;
  background-color: #ccc;
  border-color: #999;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-default .b-select-input:disabled + svg,
.b-select.m-default .b-select-input:disabled + svg path,
.b-select.m-default .b-select-input[disabled] + svg,
.b-select.m-default .b-select-input[disabled] + svg path,
.b-select.m-default .b-select-input.m-disabled + svg,
.b-select.m-default .b-select-input.m-disabled + svg path {
  fill: #ccc;
}
.b-select.m-transparent {
  position: relative;
  width: 100%;
}
.b-select.m-transparent .b-select-wrap_input {
  position: relative;
}
.b-select.m-transparent .b-select-input {
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 44px;
  cursor: pointer;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 10px 38px 10px 12px;
}
.b-select.m-transparent .b-select-input:focus::-ms-value {
  background: transparent;
  color: #000;
}
.b-select.m-transparent .b-select-input::-ms-expand {
  display: none;
}
.b-select.m-transparent .b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.b-select.m-transparent .b-select-input_as_text {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-select.m-transparent svg {
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
.b-select.m-transparent option {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #fff;
  color: #000;
}
.b-select.m-transparent .b-select-input {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  border-radius: 8px;
}
.b-select.m-transparent .b-select-input {
  color: currentColor;
  background-color: transparent;
  border-color: transparent;
}
.b-select.m-transparent .b-select-input + svg,
.b-select.m-transparent .b-select-input + svg path {
  fill: currentColor;
}
.b-select.m-transparent .b-select-input:hover,
.b-select.m-transparent .b-select-input.m-hover {
  color: currentColor;
  background-color: transparent;
  border-color: transparent;
}
.b-select.m-transparent .b-select-input:hover + svg,
.b-select.m-transparent .b-select-input:hover + svg path,
.b-select.m-transparent .b-select-input.m-hover + svg,
.b-select.m-transparent .b-select-input.m-hover + svg path {
  fill: currentColor;
}
.b-select.m-transparent .b-select-input:active,
.b-select.m-transparent .b-select-input.m-active {
  color: currentColor;
  background-color: transparent;
  border-color: transparent;
}
.b-select.m-transparent .b-select-input:active + svg,
.b-select.m-transparent .b-select-input:active + svg path,
.b-select.m-transparent .b-select-input.m-active + svg,
.b-select.m-transparent .b-select-input.m-active + svg path {
  fill: currentColor;
}
.b-select.m-transparent .b-select-input.m-invalid {
  color: #4d4d4d;
  background-color: transparent;
  border-color: transparent;
}
.b-select.m-transparent .b-select-input.m-invalid + svg,
.b-select.m-transparent .b-select-input.m-invalid + svg path {
  fill: #da582f;
}
.b-select.m-transparent .b-select-input:focus,
.b-select.m-transparent .b-select-input.m-focus {
  color: currentColor;
  background-color: transparent;
  border-color: transparent;
}
.b-select.m-transparent .b-select-input:focus + svg,
.b-select.m-transparent .b-select-input:focus + svg path,
.b-select.m-transparent .b-select-input.m-focus + svg,
.b-select.m-transparent .b-select-input.m-focus + svg path {
  fill: currentColor;
}
.b-select.m-transparent .b-select-input:disabled,
.b-select.m-transparent .b-select-input[disabled],
.b-select.m-transparent .b-select-input.m-disabled {
  color: #4d4d4d;
  background-color: #ccc;
  border-color: #999;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-transparent .b-select-input:disabled + svg,
.b-select.m-transparent .b-select-input:disabled + svg path,
.b-select.m-transparent .b-select-input[disabled] + svg,
.b-select.m-transparent .b-select-input[disabled] + svg path,
.b-select.m-transparent .b-select-input.m-disabled + svg,
.b-select.m-transparent .b-select-input.m-disabled + svg path {
  fill: #ccc;
}
.b-select.m-transparent .b-select-input {
  height: auto;
  padding: 0;
}
.b-select.m-transparent svg {
  right: 0;
}
.b-select.m-primary, .b-select.m-secondary, .b-select.m-tertiary, .b-select.m-ghost {
  position: relative;
  width: 100%;
}
.b-select.m-primary .b-select-wrap_input, .b-select.m-secondary .b-select-wrap_input, .b-select.m-tertiary .b-select-wrap_input, .b-select.m-ghost .b-select-wrap_input {
  position: relative;
}
.b-select.m-primary .b-select-input, .b-select.m-secondary .b-select-input, .b-select.m-tertiary .b-select-input, .b-select.m-ghost .b-select-input {
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 44px;
  cursor: pointer;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 10px 38px 10px 12px;
}
.b-select.m-primary .b-select-input:focus::-ms-value, .b-select.m-secondary .b-select-input:focus::-ms-value, .b-select.m-tertiary .b-select-input:focus::-ms-value, .b-select.m-ghost .b-select-input:focus::-ms-value {
  background: transparent;
  color: #000;
}
.b-select.m-primary .b-select-input::-ms-expand, .b-select.m-secondary .b-select-input::-ms-expand, .b-select.m-tertiary .b-select-input::-ms-expand, .b-select.m-ghost .b-select-input::-ms-expand {
  display: none;
}
.b-select.m-primary .b-select-input:-moz-focusring, .b-select.m-secondary .b-select-input:-moz-focusring, .b-select.m-tertiary .b-select-input:-moz-focusring, .b-select.m-ghost .b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.b-select.m-primary .b-select-input_as_text, .b-select.m-secondary .b-select-input_as_text, .b-select.m-tertiary .b-select-input_as_text, .b-select.m-ghost .b-select-input_as_text {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-select.m-primary svg, .b-select.m-secondary svg, .b-select.m-tertiary svg, .b-select.m-ghost svg {
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
.b-select.m-primary option, .b-select.m-secondary option, .b-select.m-tertiary option, .b-select.m-ghost option {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #fff;
  color: #000;
}
.b-select.m-primary .b-select-input, .b-select.m-secondary .b-select-input, .b-select.m-tertiary .b-select-input, .b-select.m-ghost .b-select-input {
  font-size: 14px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  border-radius: 40px;
}
.b-select.m-primary .b-select-input {
  color: #fff;
  background-color: #22387c;
  border-color: #22387c;
}
.b-select.m-primary .b-select-input + svg,
.b-select.m-primary .b-select-input + svg path {
  fill: #fff;
}
.b-select.m-primary .b-select-input:hover,
.b-select.m-primary .b-select-input.m-hover {
  color: #22387c;
  background-color: #fff;
  border-color: #22387c;
}
.b-select.m-primary .b-select-input:hover + svg,
.b-select.m-primary .b-select-input:hover + svg path,
.b-select.m-primary .b-select-input.m-hover + svg,
.b-select.m-primary .b-select-input.m-hover + svg path {
  fill: #22387c;
}
.b-select.m-primary .b-select-input:active,
.b-select.m-primary .b-select-input.m-active {
  color: #fff;
  background-color: #222f58;
  border-color: #222f58;
}
.b-select.m-primary .b-select-input:active + svg,
.b-select.m-primary .b-select-input:active + svg path,
.b-select.m-primary .b-select-input.m-active + svg,
.b-select.m-primary .b-select-input.m-active + svg path {
  fill: #fff;
}
.b-select.m-primary .b-select-input.m-invalid {
  color: #fff;
  background-color: #22387c;
  border-color: #da582f;
}
.b-select.m-primary .b-select-input.m-invalid + svg,
.b-select.m-primary .b-select-input.m-invalid + svg path {
  fill: #fff;
}
.b-select.m-primary .b-select-input:focus,
.b-select.m-primary .b-select-input.m-focus {
  color: #fff;
  background-color: #22387c;
  border-color: #22387c;
}
.b-select.m-primary .b-select-input:focus + svg,
.b-select.m-primary .b-select-input:focus + svg path,
.b-select.m-primary .b-select-input.m-focus + svg,
.b-select.m-primary .b-select-input.m-focus + svg path {
  fill: #fff;
}
.b-select.m-primary .b-select-input:disabled,
.b-select.m-primary .b-select-input[disabled],
.b-select.m-primary .b-select-input.m-disabled {
  color: #4d4d4d;
  background-color: #ccc;
  border-color: #999;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-primary .b-select-input:disabled + svg,
.b-select.m-primary .b-select-input:disabled + svg path,
.b-select.m-primary .b-select-input[disabled] + svg,
.b-select.m-primary .b-select-input[disabled] + svg path,
.b-select.m-primary .b-select-input.m-disabled + svg,
.b-select.m-primary .b-select-input.m-disabled + svg path {
  fill: #ccc;
}
.b-select.m-secondary .b-select-input {
  color: #22387c;
  background-color: #fff;
  border-color: #22387c;
}
.b-select.m-secondary .b-select-input + svg,
.b-select.m-secondary .b-select-input + svg path {
  fill: #22387c;
}
.b-select.m-secondary .b-select-input:hover,
.b-select.m-secondary .b-select-input.m-hover {
  color: #22387c;
  background-color: #abddf9;
  border-color: #abddf9;
}
.b-select.m-secondary .b-select-input:hover + svg,
.b-select.m-secondary .b-select-input:hover + svg path,
.b-select.m-secondary .b-select-input.m-hover + svg,
.b-select.m-secondary .b-select-input.m-hover + svg path {
  fill: #22387c;
}
.b-select.m-secondary .b-select-input:active,
.b-select.m-secondary .b-select-input.m-active {
  color: #fff;
  background-color: #222f58;
  border-color: #222f58;
}
.b-select.m-secondary .b-select-input:active + svg,
.b-select.m-secondary .b-select-input:active + svg path,
.b-select.m-secondary .b-select-input.m-active + svg,
.b-select.m-secondary .b-select-input.m-active + svg path {
  fill: #fff;
}
.b-select.m-secondary .b-select-input.m-invalid {
  color: #22387c;
  background-color: #fff;
  border-color: #da582f;
}
.b-select.m-secondary .b-select-input.m-invalid + svg,
.b-select.m-secondary .b-select-input.m-invalid + svg path {
  fill: #22387c;
}
.b-select.m-secondary .b-select-input:focus,
.b-select.m-secondary .b-select-input.m-focus {
  color: #22387c;
  background-color: #abddf9;
  border-color: #abddf9;
}
.b-select.m-secondary .b-select-input:focus + svg,
.b-select.m-secondary .b-select-input:focus + svg path,
.b-select.m-secondary .b-select-input.m-focus + svg,
.b-select.m-secondary .b-select-input.m-focus + svg path {
  fill: #000;
}
.b-select.m-secondary .b-select-input:disabled,
.b-select.m-secondary .b-select-input[disabled],
.b-select.m-secondary .b-select-input.m-disabled {
  color: #4d4d4d;
  background-color: #ccc;
  border-color: #999;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-secondary .b-select-input:disabled + svg,
.b-select.m-secondary .b-select-input:disabled + svg path,
.b-select.m-secondary .b-select-input[disabled] + svg,
.b-select.m-secondary .b-select-input[disabled] + svg path,
.b-select.m-secondary .b-select-input.m-disabled + svg,
.b-select.m-secondary .b-select-input.m-disabled + svg path {
  fill: #ccc;
}
.b-select.m-tertiary .b-select-input {
  color: #22387c;
  background-color: #abddf9;
  border-color: #abddf9;
}
.b-select.m-tertiary .b-select-input + svg,
.b-select.m-tertiary .b-select-input + svg path {
  fill: #22387c;
}
.b-select.m-tertiary .b-select-input:hover,
.b-select.m-tertiary .b-select-input.m-hover {
  color: #fff;
  background-color: #22387c;
  border-color: #22387c;
}
.b-select.m-tertiary .b-select-input:hover + svg,
.b-select.m-tertiary .b-select-input:hover + svg path,
.b-select.m-tertiary .b-select-input.m-hover + svg,
.b-select.m-tertiary .b-select-input.m-hover + svg path {
  fill: #fff;
}
.b-select.m-tertiary .b-select-input:active,
.b-select.m-tertiary .b-select-input.m-active {
  color: #fff;
  background-color: #222f58;
  border-color: #222f58;
}
.b-select.m-tertiary .b-select-input:active + svg,
.b-select.m-tertiary .b-select-input:active + svg path,
.b-select.m-tertiary .b-select-input.m-active + svg,
.b-select.m-tertiary .b-select-input.m-active + svg path {
  fill: #fff;
}
.b-select.m-tertiary .b-select-input.m-invalid {
  color: #22387c;
  background-color: #abddf9;
  border-color: #da582f;
}
.b-select.m-tertiary .b-select-input.m-invalid + svg,
.b-select.m-tertiary .b-select-input.m-invalid + svg path {
  fill: #22387c;
}
.b-select.m-tertiary .b-select-input:focus,
.b-select.m-tertiary .b-select-input.m-focus {
  color: #fff;
  background-color: #22387c;
  border-color: #22387c;
}
.b-select.m-tertiary .b-select-input:focus + svg,
.b-select.m-tertiary .b-select-input:focus + svg path,
.b-select.m-tertiary .b-select-input.m-focus + svg,
.b-select.m-tertiary .b-select-input.m-focus + svg path {
  fill: #fff;
}
.b-select.m-tertiary .b-select-input:disabled,
.b-select.m-tertiary .b-select-input[disabled],
.b-select.m-tertiary .b-select-input.m-disabled {
  color: #4d4d4d;
  background-color: #ccc;
  border-color: #999;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-tertiary .b-select-input:disabled + svg,
.b-select.m-tertiary .b-select-input:disabled + svg path,
.b-select.m-tertiary .b-select-input[disabled] + svg,
.b-select.m-tertiary .b-select-input[disabled] + svg path,
.b-select.m-tertiary .b-select-input.m-disabled + svg,
.b-select.m-tertiary .b-select-input.m-disabled + svg path {
  fill: #ccc;
}
.b-select.m-ghost {
  position: relative;
  width: 100%;
}
.b-select.m-ghost .b-select-wrap_input {
  position: relative;
}
.b-select.m-ghost .b-select-input {
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
  height: 44px;
  cursor: pointer;
  width: 100%;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 10px 38px 10px 12px;
}
.b-select.m-ghost .b-select-input:focus::-ms-value {
  background: transparent;
  color: #000;
}
.b-select.m-ghost .b-select-input::-ms-expand {
  display: none;
}
.b-select.m-ghost .b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.b-select.m-ghost .b-select-input_as_text {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-select.m-ghost svg {
  height: 16px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}
.b-select.m-ghost option {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #fff;
  color: #000;
}
.b-select.m-ghost .b-select-input {
  border: none;
  border-bottom: 1px solid transparent;
}
.b-select.m-ghost .b-select-input {
  color: #000;
  background-color: #fff;
  border-color: #fff;
}
.b-select.m-ghost .b-select-input + svg,
.b-select.m-ghost .b-select-input + svg path {
  fill: #000;
}
.b-select.m-ghost .b-select-input:hover,
.b-select.m-ghost .b-select-input.m-hover {
  color: #000;
  background-color: #fff;
  border-color: #000;
}
.b-select.m-ghost .b-select-input:hover + svg,
.b-select.m-ghost .b-select-input:hover + svg path,
.b-select.m-ghost .b-select-input.m-hover + svg,
.b-select.m-ghost .b-select-input.m-hover + svg path {
  fill: #000;
}
.b-select.m-ghost .b-select-input:active,
.b-select.m-ghost .b-select-input.m-active {
  color: #fff;
  background-color: #222f58;
  border-color: #222f58;
}
.b-select.m-ghost .b-select-input:active + svg,
.b-select.m-ghost .b-select-input:active + svg path,
.b-select.m-ghost .b-select-input.m-active + svg,
.b-select.m-ghost .b-select-input.m-active + svg path {
  fill: #fff;
}
.b-select.m-ghost .b-select-input.m-invalid {
  color: #000;
  background-color: #fff;
  border-color: #da582f;
}
.b-select.m-ghost .b-select-input.m-invalid + svg,
.b-select.m-ghost .b-select-input.m-invalid + svg path {
  fill: #000;
}
.b-select.m-ghost .b-select-input:focus,
.b-select.m-ghost .b-select-input.m-focus {
  color: #000;
  background-color: #fff;
  border-color: #000;
}
.b-select.m-ghost .b-select-input:focus + svg,
.b-select.m-ghost .b-select-input:focus + svg path,
.b-select.m-ghost .b-select-input.m-focus + svg,
.b-select.m-ghost .b-select-input.m-focus + svg path {
  fill: #000;
}
.b-select.m-ghost .b-select-input:disabled,
.b-select.m-ghost .b-select-input[disabled],
.b-select.m-ghost .b-select-input.m-disabled {
  color: #808080;
  background-color: #fff;
  border-color: #fff;
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select.m-ghost .b-select-input:disabled + svg,
.b-select.m-ghost .b-select-input:disabled + svg path,
.b-select.m-ghost .b-select-input[disabled] + svg,
.b-select.m-ghost .b-select-input[disabled] + svg path,
.b-select.m-ghost .b-select-input.m-disabled + svg,
.b-select.m-ghost .b-select-input.m-disabled + svg path {
  fill: #808080;
}

/*md
# Stepper number input

```html_example
<div data-widget="inputStepper">
<div class="b-stepper">
    <button aria-label="Decrease" class="b-stepper-button" data-ref="buttonDecrease" data-event-click="decrement" data-is-disabled="false">
        <svg role="presentation" focusable="false" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 0.500001V1.5L0.5 1.5L0.5 0.5L13.5 0.500001Z" fill="currentColor"></path>
        </svg>
    </button>
    <input id="quantity-04b97a94a7f6831f4020bb200f" name="quantity-04b97a94a7f6831f4020bb200f" class="b-stepper-input" aria-describedby="quantity-04b97a94a7f6831f4020bb200f-error" role="spinbutton" aria-valuemin="0" aria-valuemax="10" aria-valuenow="4" value="4" data-step="1" required="required" type="text" inputmode="numeric" pattern="[0-9]*" data-ref="field" data-tau="product_quantity" data-event-keydown="handleKeydown" data-event-input="handleInput" data-event-change="handleChange" data-event-blur="handleBlur">
    <button aria-label="Increase" class="b-stepper-button" data-ref="buttonIncrease" data-event-click="increment">
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0.5H6.5V6.5H0.5V7.5H6.5V13.5H7.5V7.5H13.5V6.5H7.5V0.5Z" fill="currentColor"></path>
        </svg>
    </button>
</div>
</div>
```

# Stepper number input disabled

```html_example
<div data-widget="inputStepper">
<div class="b-stepper m-disabled">
    <button aria-label="Decrease" class="b-stepper-button" data-ref="buttonDecrease" data-event-click="decrement" data-is-disabled="false">
        <svg role="presentation" focusable="false" viewBox="0 0 14 2" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 0.500001V1.5L0.5 1.5L0.5 0.5L13.5 0.500001Z" fill="currentColor"></path>
        </svg>
    </button>
    <input id="quantity-04b97a94a7f6831f4020bb200f" name="quantity-04b97a94a7f6831f4020bb200f" class="b-stepper-input" aria-describedby="quantity-04b97a94a7f6831f4020bb200f-error" role="spinbutton" aria-valuemin="0" aria-valuemax="10" aria-valuenow="4" value="4" data-step="1" required="required" type="text" inputmode="numeric" pattern="[0-9]*" data-ref="field" data-tau="product_quantity" data-event-keydown="handleKeydown" data-event-input="handleInput" data-event-change="handleChange" data-event-blur="handleBlur">
    <button aria-label="Increase" class="b-stepper-button" data-ref="buttonIncrease" data-event-click="increment">
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 0.5H6.5V6.5H0.5V7.5H6.5V13.5H7.5V7.5H13.5V6.5H7.5V0.5Z" fill="currentColor"></path>
        </svg>
    </button>
</div>
</div>
```

*/
.b-stepper {
  border: 2px solid #22387c;
  border-radius: 40px;
  color: #22387c;
  display: flex;
  -webkit-user-select: none;
          user-select: none;
  width: 124px;
}
.b-stepper.m-filled {
  overflow: hidden;
}
.b-stepper-button {
  cursor: pointer;
  display: block;
  line-height: 40px;
  min-height: 40px;
  min-width: 40px;
  text-align: center;
  touch-action: manipulation;
}
.b-stepper-button > svg {
  fill: #22387c;
  height: 16px;
  width: 16px;
}
.b-stepper-button.m-decrease:active {
  border-right: 1px solid #22387c;
}
.b-stepper-button.m-increase:active {
  border-left: 1px solid #22387c;
}
.b-stepper-button[disabled], .m-disabled .b-stepper-button {
  color: #808080;
  pointer-events: none;
}
.b-stepper-button[disabled] svg, .m-disabled .b-stepper-button svg {
  fill: #808080;
}
.b-stepper.m-filled .b-stepper-button {
  background-color: transparent;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-stepper.m-filled.m-disabled .b-stepper-button {
  background-color: #ccc;
}
.b-stepper.m-disabled {
  background-color: #ccc;
  border: 1px solid #808080;
}
.b-stepper.m-disabled svg {
  fill: #808080;
}
.b-stepper-input {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  -webkit-appearance: none;
          appearance: none;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  margin: -1px;
  min-height: 40px;
  min-width: 40px;
  position: relative;
  text-align: center;
  width: 40px;
  z-index: 1;
}
.b-stepper-input:focus {
  border: 1px solid #22387c;
}
.b-stepper-input[disabled] {
  color: #808080;
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: #808080;
}
.b-stepper.m-disabled .b-stepper-input {
  color: #808080;
  -webkit-text-fill-color: #808080;
}

/*md

# Form section

Use this component to add some structure to forms.
It is possible to use any form element inside.

## Input element with label

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="input1">
			Enter Promo Code
		</label>
		<input class="b-input" type="text" id="input1" placeholder="Promo Code" name="couponCode" required="" value="">
	</div>
```
## Input element with disabled label

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" disabled for="input1">
			Enter Promo Code
		</label>
		<input class="b-input" disabled type="text" id="input1" placeholder="Promo Code" name="couponCode" required="" value="">
	</div>
```
## Input element with required label

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="input2">
			<span class="b-form_section-required">*</span>
			Enter Promo Code
		</label>
		<input class="b-input" type="text" id="input2" placeholder="Promo Code" name="couponCode" required="" value="">
	</div>
```

## Input element with caption

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="input3">
			<span class="b-form_section-required">*</span>
			Enter Promo Code
		</label>
		<input class="b-input" type="text" id="input3" placeholder="Promo Code" name="couponCode" required="" value="">
		<span class="b-form_section-caption">
			Casing &amp; hyphens need to be exact
		</span>
	</div>
```

## Input element with disabled caption

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="input3">
			<span class="b-form_section-required">*</span>
			Enter Promo Code
		</label>
		<input class="b-input" type="text" id="input3" placeholder="Promo Code" name="couponCode" required="" value="">
		<span class="b-form_section-caption m-disabled">
			Casing &amp; hyphens need to be exact
		</span>
	</div>
```

## Input element with error

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="input4">
			<span class="b-form_section-required">*</span>
			Enter Promo Code
		</label>
		<input class="b-input m-invalid" type="text" id="input4" placeholder="Promo Code" name="couponCode" required="" value="">
		<div role="alert" class="b-form_section-message">
			Coupon cannot be added to your cart
		</div>
		<span class="b-form_section-caption">
			Casing &amp; hyphens need to be exact
		</span>
	</div>
```

## Select element with label

```html_example
	<div class="b-form_section">
		<label class="b-form_section-label" for="select1">
			<span class="b-form_section-required">*</span>
			Country
		</label>
		<div class="b-select">
			<select class="b-select-input" id="select1" name="" required="" value="">
				<option value="US" data-id="US">United States</option>
				<option value="CA" data-id="CA">Canada</option>
			</select>
			<svg aria-hidden="true" class="b-select-icon" width="10" height="6" focusable="false">
				<path fill="currentColor" d="M5 6c-.256 0-.512-.098-.707-.293l-4-4c-.39-.39-.39-1.023 0-1.414.391-.39 1.023-.39 1.414 0l3.305 3.305L8.305.418c.4-.383 1.03-.372 1.414.025.384.397.373 1.031-.024 1.414l-4 3.862C5.5 5.907 5.25 6 5 6"></path>
			</svg>
		</div>
	</div>
```

## Checkbox element with label

```html_example
	<div class="b-form_section">
		<div class="b-checkbox">
			<input type="checkbox" class="b-checkbox-input" id="checkox1">
			<svg width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
				<path fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
			</svg>
			<span class="b-form_section-required">*</span>
			<label class="b-form_section-label" for="checkox1">
				By signing up, you agree to <a href="#" target="_blank" class="b-form_section-link">Privacy and Cookie Policies</a>
			</label>
		</div>
	</div>
```
## Radio element with label

```html_example
<div class="b-radio">
	<input type="radio" id="id-radio-2" class="b-radio-input"/>
	<div class="b-radio-icon"></div>
	<label class="b-radio-label" for="id-radio-2">Some text</label>
	<label class="b-form_section-label" for="id-radio-2">
		<span class="b-form_section-required">*</span>
			By signing up, you agree to <a href="#" target="_blank" class="b-form_section-link">Privacy and Cookie Policies</a>
	</label>
</div>
```
Please add asterisk (*) into your code using ${Resource.msg('form.input.required', 'forms', '')}

*/
.b-form_section {
  position: relative;
}
.b-form_section.m-hide {
  display: none;
}
.b-form_section.m-small {
  width: 250px;
}
.b-form_section.m-highlight {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 25px;
}
.b-form_section.m-white_highlight {
  background: #fff;
  border-radius: 4px;
  padding: 25px;
}
.b-form .b-form_section {
  margin-bottom: 24px;
  width: 100%;
}
.b-form .b-form_section.m-no_margin {
  margin-bottom: 0;
}
.b-form .b-form_section.m-fullwidth {
  width: 100%;
}
.b-form_section.m-checkout {
  display: grid;
  flex-grow: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media screen and (max-width: 1200px) {
  .b-form_section.m-checkout {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1023px) {
  .b-form_section.m-checkout {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0;
  }
}
.b-form_section.m-fexed {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .b-form_section.m-forgot-password {
    margin-bottom: 40px;
  }
}
.b-form_section-address_form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.b-form_section-address_form .b-form_section {
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-form_section-address_form .b-form_section {
    margin-bottom: 15px;
  }
}
.b-form_section-address_form .m-hidden {
  display: none;
}
.b-form_section-alle_form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .b-form_section-alle_form {
    flex-direction: column;
  }
}
.b-form_section-required {
  color: #000;
  margin-inline-start: 2px;
}
.b-checkbox .b-form_section-required {
  margin-inline-end: 2px;
  margin-inline-start: 0;
}
.b-form_section-label {
  display: block;
  color: #4d4d4d;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.5px;
  padding-bottom: 4px;
}
.b-form_section-label.m-wai {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-radio .b-form_section-label {
  color: #000;
  font-weight: 300;
  left: 0;
  position: relative;
  top: 0;
}
.m-quickfinder .b-form_section-label {
  left: 35px;
  top: 40px;
}
.b-checkbox .b-form_section-label {
  color: #222f58;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  left: 0;
  letter-spacing: -0.5px;
  position: relative;
  top: 2px;
  width: -webkit-fit-content;
  width: fit-content;
}
.m-focused-element .b-checkbox .b-form_section-label {
  top: 0;
}
.b-form_section-label_box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.b-form_section > .b-form_section-label[disabled] {
  color: rgba(0, 0, 0, 0.5);
}
.b-checkbox-input[disabled] ~ .b-form_section-label {
  cursor: default;
}
.b-form_section-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-form_section-link:hover {
    text-decoration: none;
  }
}
.b-form_section-link > svg {
  height: 9px;
  width: 15px;
}
.b-form_section-link.b-button svg {
  width: 15px;
}
.b-form_section-link:disabled, .b-form_section-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-form_section-link:hover {
    text-decoration: none;
  }
}
.b-form_section-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-form_section-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-form_section-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-form_section-link.m-big {
  font-size: 16px;
}
.m-coupons .b-form_section-link {
  color: #222f58;
  display: inline;
  font-size: inherit;
}
.b-form_section-email {
  font-weight: 700;
}
.b-form_section-caption {
  display: block;
  font-size: 13px;
  font-weight: 300;
  margin: 4px 0 0;
  letter-spacing: -0.5px;
}
.b-form_section-caption.m-disabled {
  color: rgba(77, 77, 77, 0.5);
}
.b-form_section-value {
  display: block;
  font-size: 16px;
  line-height: 1;
}
.b-form_section-counter {
  font-size: 12px;
  text-align: end;
}
.b-form_section-message {
  display: block;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.5px;
}
.b-form_section-message[hidden] {
  display: none;
}
.b-form_section-message[data-ref=errorFeedback], .b-form_section-message.m-error {
  color: #951e0f;
}
.b-form_section.m-card_number.m-active {
  position: relative;
}
.b-form_section.m-card_number.m-active[data-type=amex]::before, .b-form_section.m-card_number.m-active[data-type=visa]::before, .b-form_section.m-card_number.m-active[data-type=mastercard]::before, .b-form_section.m-card_number.m-active[data-type=discover]::before {
  z-index: 6;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60px auto;
  content: "";
  height: 34px;
  position: absolute;
  right: 10px;
  top: 27px;
  width: 60px;
}
@media screen and (max-width: 1023px) {
  .b-form_section.m-card_number.m-active[data-type=amex]::before, .b-form_section.m-card_number.m-active[data-type=visa]::before, .b-form_section.m-card_number.m-active[data-type=mastercard]::before, .b-form_section.m-card_number.m-active[data-type=discover]::before {
    top: 37px;
  }
}
.b-form_section.m-card_number.m-active[data-type=amex]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='33' height='20' viewBox='0 0 33 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.5 0V20H32.5V0H0.5Z' fill='%23006FCF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M25.4042 9.55789H27.5347V4.59631H25.2611V5.38947L24.7547 4.59631H22.773V5.59947L22.3286 4.59631H19.052C18.8943 4.59631 18.7407 4.60789 18.5919 4.63105C18.4651 4.65105 18.3415 4.67895 18.2227 4.71631C18.0219 4.7773 17.8312 4.86757 17.6568 4.98421V4.59631H6.96311L6.67174 5.46158L6.37565 4.59631H3.88696V5.61L3.43782 4.59631H1.40775L0.5 6.71842V9.55789H1.93788L2.20505 8.84579H2.71152L2.98395 9.55789H14.0463V8.83631L14.6001 9.55789H17.6573V9.19684C17.8124 9.29739 17.9805 9.37636 18.1569 9.43158C18.2637 9.46631 18.3725 9.49263 18.4804 9.5121C18.6565 9.54421 18.8327 9.55789 18.9995 9.55789H20.8286L21.0958 8.84579H21.6023L21.8747 9.55789H24.9408V8.82158L25.4042 9.55789ZM32.4816 15.9211V11.2653H14.8752L14.4266 11.9011L13.9827 11.2653H8.91906V16.2263H13.9627L14.4024 15.5811L14.8562 16.2263H18.0134V15.1558H17.9802C18.3726 15.1558 18.7297 15.0847 19.0458 14.9674V16.2263H21.2473V15.5053L21.8016 16.2263H31.3535C31.6286 16.2263 31.8863 16.1795 32.1177 16.0958C32.2476 16.0484 32.3691 15.99 32.4806 15.9211H32.4816Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.3733 14.7495H29.6582V15.419H31.3486C32.0707 15.419 32.5003 14.979 32.5003 14.3527C32.5003 13.7553 32.1133 13.4063 31.4643 13.4063H30.6901C30.4987 13.4063 30.3651 13.2821 30.3651 13.0863C30.3651 12.8853 30.4987 12.7516 30.6901 12.7516H32.1417L32.4383 12.0727H30.7132C29.9927 12.0727 29.5625 12.5127 29.5625 13.1148C29.5625 13.7316 29.9691 14.0853 30.6038 14.0853H31.3733C31.5637 14.0853 31.7025 14.2095 31.7025 14.4106C31.7025 14.6158 31.5637 14.7495 31.3733 14.7495ZM28.1914 14.7495H26.4769V15.419H28.1678C28.8893 15.419 29.3195 14.979 29.3195 14.3527C29.3195 13.7553 28.9325 13.4063 28.2824 13.4063H27.5093C27.3179 13.4063 27.1843 13.2821 27.1843 13.0863C27.1843 12.8853 27.3179 12.7516 27.5088 12.7516H28.9603L29.257 12.0727H27.5324C26.8114 12.0727 26.3812 12.5127 26.3812 13.1148C26.3812 13.7316 26.7877 14.0853 27.4225 14.0853H28.192C28.3829 14.0853 28.5212 14.2095 28.5212 14.4106C28.5212 14.6158 28.3829 14.7495 28.192 14.7495H28.1914ZM25.9904 12.7516V12.0727H23.3156V15.419H25.9904V14.7448H24.1181V14.0711H25.9473V13.4016H24.1181V12.7516H25.9904ZM21.5101 12.7563C21.7967 12.7563 21.9497 12.9427 21.9497 13.1721C21.9497 13.4016 21.7972 13.5827 21.5101 13.5827H20.5692V12.7569H21.5106L21.5101 12.7563ZM20.5692 14.2142H20.9468L21.945 15.419H22.9432L21.8304 14.1858C22.3984 14.0806 22.7376 13.6695 22.7376 13.1342C22.7376 12.5079 22.2937 12.0727 21.5821 12.0727H19.7666V15.419H20.5692V14.2142ZM18.5249 13.1958C18.5249 13.4211 18.3819 13.6074 18.0994 13.6074H17.1396V12.7853H18.0994C18.3819 12.7853 18.5249 12.9669 18.5249 13.1958ZM16.3365 12.0727V15.419H17.1391V14.3142H18.1468C18.8778 14.3142 19.3312 13.8369 19.3312 13.1911C19.3312 12.5269 18.8873 12.0727 18.1757 12.0727H16.3365ZM15.1569 15.419H16.1598L14.8177 13.7316L16.1504 12.0727H15.1764L14.3543 13.1342L13.5376 12.0727H12.5352L13.8721 13.7463L12.5394 15.419H13.5134L14.3349 14.3432L15.1564 15.419H15.1569ZM12.3721 12.7516V12.0727H9.69727V15.419H12.3721V14.7448H10.4998V14.0711H12.33V13.4016H10.4998V12.7516H12.3721Z' fill='%23006FCF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.2908 6.74734L24.2813 6.46997L24.4486 6.74734L25.7287 8.74997H26.6648V5.40366H25.8812V7.33997L25.8917 7.58839L25.7434 7.33997L24.4917 5.40366H23.5082V8.74997H24.2908V6.74734ZM21.0911 6.65155L21.3346 6.02523L21.5775 6.65155L21.8742 7.3926H20.8002L21.0916 6.65155H21.0911ZM22.4185 8.74997H23.321L21.8941 5.40366H20.837L19.4049 8.74997H20.2596L20.5415 8.03313H22.1319L22.4185 8.74997ZM18.9174 8.74997H18.9605L19.2898 8.03787H19.0463C18.4972 8.03787 18.1722 7.69366 18.1722 7.10102V7.05366C18.1722 6.5226 18.4635 6.12576 19.0368 6.12576H19.9061V5.40366H18.97C17.9387 5.40366 17.3749 6.09734 17.3749 7.04839V7.10576C17.3749 8.1005 17.9529 8.74523 18.9174 8.74997ZM16.0658 8.74997H16.8684V5.40366H16.0658V8.74997ZM14.3797 6.08787C14.6663 6.08787 14.8194 6.27418 14.8194 6.50366C14.8194 6.73313 14.6669 6.91418 14.3797 6.91418H13.4388V6.08787H14.3802H14.3797ZM13.4388 7.54576H13.8164L14.8147 8.74997H15.8129L14.7 7.51681C15.268 7.41155 15.6078 7.0005 15.6078 6.46523C15.6078 5.83892 15.1633 5.40366 14.4518 5.40366H12.6363V8.74997H13.4388V7.54576ZM12.0493 6.0826V5.40366H9.37447V8.74997H12.0493V8.06629H10.1765V7.4026H12.0057V6.73313H10.1765V6.0826H12.0488H12.0493ZM5.39532 6.46576L5.37638 5.5626L6.30307 8.7505H7.02884L7.95553 5.58155L7.93659 6.4605V8.74997H8.71496V5.40366H7.30127L6.66596 7.77471L6.0259 5.40366H4.61642V8.74997H5.39584V6.46576H5.39532ZM2.19979 6.65208L2.44382 6.02576L2.68732 6.65208L2.98342 7.39313H1.90843L2.19979 6.65208ZM3.52775 8.74997H4.43077L3.00235 5.40366H1.94682L0.513672 8.74997H1.36883L1.65072 8.03313H3.24112L3.52775 8.74997Z' fill='%23006FCF'/%3E%3C/svg%3E%0A");
}
.b-form_section.m-card_number.m-active[data-type=visa]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='35' height='20' viewBox='0 0 35 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.7093 15.2744L14.4288 4.61788H17.1791L15.4583 15.2744H12.7093ZM25.3949 4.8476C24.8502 4.63171 23.9963 4.40002 22.93 4.40002C20.2123 4.40002 18.2981 5.84537 18.2817 7.91685C18.2664 9.44809 19.6484 10.3024 20.6916 10.8121C21.7622 11.3345 22.1221 11.6676 22.1169 12.1339C22.1101 12.8483 21.262 13.1745 20.4714 13.1745C19.3707 13.1745 18.7858 13.013 17.8826 12.6153L17.528 12.4459L17.1421 14.8314C17.7845 15.129 18.9724 15.3866 20.2058 15.4C23.097 15.4 24.9738 13.9712 24.9952 11.759C25.0054 10.5467 24.2727 9.6243 22.6859 8.86366C21.7246 8.37068 21.1359 8.04172 21.1421 7.54254C21.1421 7.09959 21.6404 6.62594 22.7173 6.62594C23.6166 6.61118 24.2682 6.81832 24.7758 7.03421L25.0222 7.15718L25.3949 4.8476ZM32.4725 4.61772H30.3474C29.689 4.61772 29.1963 4.80748 28.9072 5.50144L24.8225 15.2674H27.7106C27.7106 15.2674 28.1827 13.9543 28.2895 13.6659C28.6051 13.6659 31.4108 13.6705 31.8119 13.6705C31.8942 14.0436 32.1465 15.2674 32.1465 15.2674H34.6986L32.4725 4.61739V4.61772ZM29.1006 11.499C29.3282 10.8851 30.1965 8.52006 30.1965 8.52006C30.1803 8.54842 30.4223 7.90307 30.5611 7.50296L30.747 8.42174C30.747 8.42174 31.2736 10.9655 31.3837 11.4989H29.1006V11.499ZM10.3745 4.61772L7.68183 11.885L7.39498 10.4082C6.89366 8.70574 5.33191 6.86127 3.58594 5.93786L6.04807 15.2574L8.95802 15.254L13.288 4.61755H10.3745' fill='%230066B2'/%3E%3Cpath d='M5.16933 4.61713H0.734372L0.699219 4.83885C4.14957 5.72094 6.43253 7.85262 7.38044 10.4142L6.41609 5.51713C6.24965 4.84233 5.76678 4.64092 5.16943 4.6174' fill='%23F9A533'/%3E%3C/svg%3E%0A");
}
.b-form_section.m-card_number.m-active[data-type=mastercard]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='29' height='16' viewBox='0 0 29 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.0177 1.71039H9.98438V14.2859H18.0177V1.71039Z' fill='%23FF5F00'/%3E%3Cpath d='M10.8127 8.00207C10.8117 6.79116 11.0981 5.59589 11.6503 4.50673C12.2024 3.41757 13.0058 2.46305 13.9996 1.71541C12.7687 0.788232 11.2905 0.211675 9.73382 0.0516336C8.17718 -0.108407 6.60497 0.154525 5.19687 0.810381C3.78877 1.46624 2.6016 2.48855 1.77103 3.76049C0.940455 5.03243 0.5 6.50267 0.5 8.00318C0.5 9.5037 0.940455 10.9739 1.77103 12.2459C2.6016 13.5178 3.78877 14.5401 5.19687 15.196C6.60497 15.8518 8.17718 16.1148 9.73382 15.9547C11.2905 15.7947 12.7687 15.2181 13.9996 14.291C13.0055 13.5431 12.2019 12.5882 11.6498 11.4986C11.0976 10.4091 10.8114 9.21336 10.8127 8.00207Z' fill='%23EB001B'/%3E%3Cpath d='M27.5009 7.99921C27.5008 9.49983 27.0603 10.9702 26.2296 12.2421C25.3988 13.5141 24.2115 14.5364 22.8032 15.1922C21.3949 15.848 19.8226 16.1107 18.2658 15.9504C16.7091 15.7902 15.2308 15.2133 14 14.2859C14.9935 13.5376 15.7966 12.5828 16.3489 11.4936C16.9012 10.4043 17.1881 9.20912 17.1881 7.9981C17.1881 6.78707 16.9012 5.59185 16.3489 4.50263C15.7966 3.41341 14.9935 2.45863 14 1.71032C15.2308 0.782855 16.7091 0.206017 18.2658 0.0457464C19.8226 -0.114524 21.3949 0.148239 22.8032 0.804001C24.2115 1.45976 25.3988 2.48206 26.2296 3.75404C27.0603 5.02602 27.5008 6.49636 27.5009 7.99698V7.99921Z' fill='%23F79E1B'/%3E%3C/svg%3E%0A");
}
.b-form_section.m-card_number.m-active[data-type=discover]::before {
  background-image: url("data:image/svg+xml,%3Csvg width='66' height='20' viewBox='0 0 66 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M33.4767 4.59998C36.3037 4.59998 38.5957 6.83539 38.5957 9.59685V9.59998C38.5957 12.3614 36.3037 14.6 33.4767 14.6C30.6493 14.6 28.3574 12.3614 28.3574 9.59998V9.59685C28.3574 6.83539 30.6493 4.59998 33.4767 4.59998Z' fill='%23F47216'/%3E%3Cpath d='M25.434 4.62921C26.2414 4.62921 26.9186 4.79843 27.7431 5.20655V7.36356C26.9624 6.61814 26.2852 6.30615 25.3895 6.30615C23.629 6.30615 22.2448 7.72959 22.2448 9.53422C22.2448 11.4373 23.5864 12.7759 25.4767 12.7759C26.3276 12.7759 26.9923 12.4802 27.7431 11.7468V13.9048C26.8894 14.2975 26.1977 14.4523 25.3895 14.4523C22.5314 14.4523 20.3105 12.3101 20.3105 9.54768C20.3104 6.81457 22.5903 4.62921 25.434 4.62921ZM16.5599 4.68856C17.6149 4.68856 18.5802 5.04131 19.3873 5.7308L18.4052 6.98673C17.9162 6.45148 17.4538 6.22576 16.8917 6.22576C16.0826 6.22576 15.4935 6.67549 15.4935 7.26743C15.4935 7.775 15.8241 8.04366 16.9504 8.45064C19.0854 9.21313 19.7182 9.88935 19.7182 11.3825C19.7182 13.202 18.3497 14.4686 16.3994 14.4686C14.9711 14.4686 13.9328 13.9192 13.068 12.6796L14.2804 11.5392C14.7127 12.3552 15.4338 12.7927 16.3292 12.7927C17.1665 12.7927 17.7864 12.2287 17.7864 11.4671C17.7864 11.0724 17.5985 10.734 17.2237 10.4947C17.0349 10.3814 16.661 10.2123 15.9262 9.9594C14.1633 9.33959 13.5585 8.67703 13.5585 7.38214C13.5585 5.8438 14.8573 4.68856 16.5599 4.68856ZM38.0083 4.85247H40.0585L42.6248 11.1655L45.2243 4.85247H47.259L43.1019 14.4928H42.0918L38.0083 4.85247ZM10.4841 4.86688H12.3611V14.2657H10.4841V4.86688ZM48.1075 4.86688H53.4306V6.45944H49.9833V8.54564H53.3036V10.1374H49.9833V12.6745H53.4306V14.2657H48.1075V4.86688ZM58.67 10.3063C60.0837 10.0252 60.8615 9.08088 60.8615 7.6419C60.8615 5.8822 59.6211 4.86697 57.4562 4.86697H54.6734V14.2659H56.5481V10.49H56.7931L59.391 14.2657H61.6992L58.67 10.3063ZM57.0966 9.1937H56.5482V6.34729H57.1263C58.2951 6.34729 58.9304 6.82594 58.9304 7.74058C58.9306 8.68547 58.2953 9.1937 57.0966 9.1937ZM4.4542 4.86688H1.69922V14.2657H4.43985C5.89698 14.2657 6.94957 13.9299 7.87323 13.1807C8.97106 12.2935 9.62012 10.956 9.62012 9.5729C9.62021 6.79911 7.49821 4.86688 4.4542 4.86688ZM6.64702 11.9276C6.05726 12.4475 5.29123 12.6745 4.07854 12.6745H3.57468V6.45944H4.07845C5.29114 6.45944 6.02692 6.67161 6.64693 7.21956C7.29608 7.78419 7.68654 8.65902 7.68654 9.55944C7.68664 10.4613 7.29608 11.3629 6.64702 11.9276Z' fill='black'/%3E%3C/svg%3E%0A");
}
.b-form_section.m-payments {
  margin-bottom: 0;
}

/*md

# b-checkbox

Please see [g-checkbox](02-components-g-checkbox.html) for details.

*/
.b-checkbox {
  display: flex;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-checkbox.m-hover svg, .b-checkbox:hover svg {
    box-shadow: inset 0 0 0 0.5px #4d4d4d;
  }
  .b-checkbox.m-hover svg + .b-form_section-label, .b-checkbox:hover svg + .b-form_section-label {
    color: #000;
  }
}
.b-checkbox svg {
  background-color: #fff;
  border: 1px solid #4d4d4d;
  border-radius: 4px;
  cursor: pointer;
  height: 20px;
  margin-inline-end: 8px;
  min-width: 20px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-checkbox svg path {
  transform: scale(0);
  transform-origin: center center;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
}
.b-checkbox-input {
  cursor: pointer;
  height: 20px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 20px;
  z-index: 1;
}
.b-checkbox-input.m-checked + svg, .b-checkbox-input:checked + svg {
  background-color: #22387c;
  border-color: #22387c;
  border-width: 2px;
  box-shadow: none;
}
.b-checkbox-input.m-checked + svg path, .b-checkbox-input:checked + svg path {
  fill: #fff;
  transform: scale(1);
}
.b-checkbox-input.m-checked + svg + .b-form_section-label, .b-checkbox-input:checked + svg + .b-form_section-label {
  color: #000;
}
.b-checkbox-input.m-checked + svg path, .b-checkbox-input:checked + svg path {
  transform: scale(1);
}
.b-checkbox-input.m-disabled + svg, .b-checkbox-input[disabled] + svg {
  background-color: #d9d9d9;
  box-shadow: none;
  cursor: default;
  transform: scale(1);
}
.b-checkbox-input.m-disabled + svg + .b-form_section-label, .b-checkbox-input[disabled] + svg + .b-form_section-label {
  color: #000;
}
.b-checkbox-input.m-invalid + svg {
  background-color: #fff;
  border-color: #ed432c;
  border-width: 1px;
  box-shadow: none;
}
.b-checkbox-input.m-invalid + svg path {
  fill: #ed432c;
}
.b-checkbox-input.m-disabled-checked + svg, .b-checkbox-input:checked[disabled] + svg {
  background-color: #d9d9d9;
  border-color: #b3b3b3;
  box-shadow: none;
  cursor: default;
  transform: scale(1);
}
.b-checkbox-input.m-disabled-checked + svg path, .b-checkbox-input:checked[disabled] + svg path {
  transform: scale(1);
}

/*md

# b-password_estimator

```html_example
<!--
Classes:
.m-weak - Weak
.m-medium - Medium
.m-strong - Strong
-->
<div
    class="b-password_estimator"
    data-ref="passwordEstimator"
    data-error-weak-password="Your password should be strong enough"
    data-password-descriptions="{
        &quot;0&quot;: &quot;Too weak&quot;,
        &quot;1&quot;: &quot;Too weak&quot;,
        &quot;2&quot;: &quot;Should be stronger&quot;,
        &quot;3&quot;: &quot;Strong enough&quot;,
        &quot;4&quot;: &quot;Strong&quot;
    }">
    <div data-ref="passwordEstimatorIndicator">
        <div class="b-password_estimator-inner">
            <ul class="b-password_estimator-indicator">
                    <li class="b-password_estimator-indicator_item [modifier class]"></li>
                    <li class="b-password_estimator-indicator_item [modifier class]"></li>
                    <li class="b-password_estimator-indicator_item [modifier class]"></li>
                    <li class="b-password_estimator-indicator_item [modifier class]"></li>
                    <li class="b-password_estimator-indicator_item [modifier class]"></li>
            </ul>
            <span class="b-password_estimator-indicator_description" id="dwfrm_profile_login_password-description_[modifier class]">
                Too weak
            </span>
        </div>
        <span data-ref="passwordEstimatorCaption" class="b-form_field-caption b-password_estimator-caption"
        id="dwfrm_profile_login_password-caption_[modifier class]">
            Adding more letters, numbers and punctuation will make the password stronger
        </span>
    </div>
</div>
```
*/
.b-password_estimator {
  margin-top: 8px;
  padding: 0 15px;
}
.b-password_estimator-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.b-password_estimator-indicator {
  display: flex;
  padding: 8px 0;
  width: 60%;
}
.b-password_estimator-indicator_item {
  background-color: #f9f9f9;
  height: 2px;
  margin-inline-end: 4px;
  max-width: 37px;
  transition: background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 20%;
}
.b-password_estimator-indicator_item:last-child {
  margin-inline-end: 0;
}
.b-password_estimator-indicator_item.m-weak {
  background-color: #ed432c;
}
.b-password_estimator-indicator_item.m-medium {
  background-color: #d0a631;
}
.b-password_estimator-indicator_item.m-strong {
  background-color: #2bb229;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 70px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 28px;
  }
}
@media screen and (min-width: 1367px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 35px;
  }
}
.b-password_estimator-indicator_description {
  color: #000;
  font-size: 12px;
}
.b-password_estimator-caption {
  color: #000;
  margin-top: 4px;
}

/*md

# Input password

This is additional wrapper for `b-input`

Designed with possibility to `show/hide` masked text into input fields

## Default State

```html_example
<!--
Classes:
.m-invalid - Invalid
.m-valid - Valid
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<div class="b-input_password" data-widget="inputPassword">
	<input data-ref="field" id="" type="password" class="b-input [modifier class]" aria-describedby="" placeholder="Password" name="" required="" value="" maxlength="64" aria-required="true" minlength="8" data-event-input="onPasswordInput" data-tau="" data-event-blur="validate">
	<button class="b-input_password-toggle_visibility" data-ref="showButton" data-event-click="toggleMask" data-button-text-show="Show" data-button-text-hide="Hide" aria-pressed="false" title="Toggle password field visibility" type="button" hidden="hidden">
		Show
	</button>
</div>
<div role="alert" class="b-form_section-message" data-ref="errorFeedback" id="dwfrm_profile_login_password-error">This field is required.</div>
```

*/
.b-input_password {
  position: relative;
}
.b-input_password-toggle_visibility {
  cursor: pointer;
  font-size: 0;
  height: 32px;
  overflow: hidden;
  position: absolute;
  right: 7px;
  text-transform: lowercase;
  top: 6px;
  width: 32px !important;
}
.b-input_password-toggle_visibility::after {
  content: "";
  height: 16px;
  left: 50%;
  margin: -8px 0 0 -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}
[type=text] + .b-input_password-toggle_visibility::after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 16px;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M10.2 8 8 5.8c1.2 0 2.2 1 2.2 2.2M6.8 4.6c.4-.1.8-.2 1.2-.2a3.6 3.6 0 0 1 3.4 4.8l2.2 2.2c1-.9 1.9-2 2.4-3.4a8.7 8.7 0 0 0-8-5.5c-1 0-1.9.2-2.8.5zm8 9.8-1 1-2.6-2.6c-1 .4-2.1.7-3.2.7-3.6 0-6.7-2.3-8-5.5a9 9 0 0 1 2.7-3.6l-2-2 1-1zm-5.2-3.2-1.1-1.1c-.2 0-.3.1-.5.1-1.2 0-2.2-1-2.2-2.2 0-.2 0-.3.1-.5L4.8 6.4a3.59 3.59 0 0 0 4.8 4.8%22%2F%3E%3C%2Fsvg%3E");
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M10.2 8 8 5.8c1.2 0 2.2 1 2.2 2.2M6.8 4.6c.4-.1.8-.2 1.2-.2a3.6 3.6 0 0 1 3.4 4.8l2.2 2.2c1-.9 1.9-2 2.4-3.4a8.7 8.7 0 0 0-8-5.5c-1 0-1.9.2-2.8.5zm8 9.8-1 1-2.6-2.6c-1 .4-2.1.7-3.2.7-3.6 0-6.7-2.3-8-5.5a9 9 0 0 1 2.7-3.6l-2-2 1-1zm-5.2-3.2-1.1-1.1c-.2 0-.3.1-.5.1-1.2 0-2.2-1-2.2-2.2 0-.2 0-.3.1-.5L4.8 6.4a3.59 3.59 0 0 0 4.8 4.8%22%2F%3E%3C%2Fsvg%3E");
  vertical-align: sub;
  width: 16px;
}
[type=password] + .b-input_password-toggle_visibility::after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 16px;
  -webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M8 2.5C4.4 2.5 1.3 4.8 0 8c1.3 3.2 4.4 5.5 8 5.5s6.7-2.3 8-5.5a8.7 8.7 0 0 0-8-5.5m0 9.1C6 11.6 4.4 10 4.4 8S6 4.4 8 4.4 11.6 6 11.6 8 10 11.6 8 11.6m0-5.8c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2 2.2-1 2.2-2.2-1-2.2-2.2-2.2%22%2F%3E%3C%2Fsvg%3E");
          mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M8 2.5C4.4 2.5 1.3 4.8 0 8c1.3 3.2 4.4 5.5 8 5.5s6.7-2.3 8-5.5a8.7 8.7 0 0 0-8-5.5m0 9.1C6 11.6 4.4 10 4.4 8S6 4.4 8 4.4 11.6 6 11.6 8 10 11.6 8 11.6m0-5.8c-1.2 0-2.2 1-2.2 2.2s1 2.2 2.2 2.2 2.2-1 2.2-2.2-1-2.2-2.2-2.2%22%2F%3E%3C%2Fsvg%3E");
  vertical-align: sub;
  width: 16px;
}
.b-input_password .b-input {
  padding-right: 55px;
}
.b-input_password .b-input.m-disabled + .b-input_password-toggle_visibility::after, .b-input_password .b-input[disabled] + .b-input_password-toggle_visibility::after {
  background-color: #4d4d4d;
}

/*md

# Input password

This is additional wrapper for `b-input`

Designed with possibility to display icon on input field

## Default State

```html_example
<!--
Classes:
.m-invalid - Invalid
.m-valid - Valid
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<div class="b-input_icon">
	<input id="" type="text" class="b-input [modifier class]" aria-describedby="" placeholder="Placeholder Text" name="" required="" value="" maxlength="64" aria-required="true" minlength="8"  data-tau="" >
</div>
```

*/
.b-input_icon {
  position: relative;
}
.b-input_icon.m-icon_left::before, .b-input_icon.m-icon_right::before {
  background-color: #000;
  content: "";
  display: block;
  height: 16px;
  -webkit-mask-image: var(--input-icon);
          mask-image: var(--input-icon);
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  pointer-events: none;
  position: absolute;
  top: 14px;
  width: 16px;
}
.b-input_icon.m-icon_left .b-input {
  padding-left: 35px;
}
.b-input_icon.m-icon_left::before {
  left: 15px;
}
.b-input_icon.m-icon_right .b-input {
  padding-right: 35px;
}
.b-input_icon.m-icon_right::before {
  right: 15px;
}
.b-input_icon:has(.b-input.m-disabled)::before, .b-input_icon:has(.b-input[disabled])::before {
  background-color: #4d4d4d;
}

/*md

# b-countdown

```html_example
<div
	data-styleguide="true"
	data-widget="skmSessionExpiration"
	data-disable-rendering="true"
	data-initial-timeout="0"
	data-countdown-timeout="5"
	data-session-timeout-url="#"
	data-session-continue-url="#"
>
	<div class="b-countdown">
		<div data-ref="countdown" class="b-countdown-time"></div>
		<svg class="b-countdown-icon" data-ref="countdownCircle">
			<circle data-ref="countdownCircleBg" class="b-countdown-circle_bg" r="85" cx="90" cy="90"></circle>
			<circle data-ref="countdownCircleAnimated" class="b-countdown-circle_animated" r="85" cx="90" cy="90"></circle>
		</svg>
	</div>
</div>
```

*/
.b-countdown {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.b-countdown-time {
  font-size: 36px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  position: absolute;
}
@media screen and (min-width: 768px) {
  .b-countdown-time {
    font-size: 48px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-countdown-icon {
  height: 180px;
  transform: rotateZ(-90deg);
  width: 180px;
}
.b-countdown-circle_bg {
  fill: none;
  stroke: #f9f9f9;
  stroke-width: 10px;
}
.b-countdown-circle_animated {
  fill: none;
  stroke: #000;
  stroke-width: 10px;
  transition: stroke-dasharray 2.8s linear;
}

.b-minicart_panel-container {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, background-color;
  visibility: hidden;
  z-index: 17;
}
.b-minicart_panel-container.m-opened, .b-minicart_panel-container.m-active {
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  visibility: visible;
}
.b-minicart_panel-container.m-opened {
  overflow: hidden;
}
.b-minicart_panel .b-minicart_product-price_total {
  justify-content: center;
  margin-top: 0;
}
.b-minicart_panel .b-minicart_product-price_total .b-price {
  transform: none;
}

@media screen and (max-width: 1023px) {
  .b-proceed_checkout_dialog-body {
    margin-top: 25px;
  }
}
@media screen and (max-width: 1023px) {
  .b-proceed_checkout_dialog-body p + p {
    margin-top: 25px;
  }
}
.b-proceed_checkout_dialog-footer {
  justify-content: flex-start;
}
@media screen and (max-width: 1023px) {
  .b-proceed_checkout_dialog-footer {
    flex-direction: column;
  }
}
.b-proceed_checkout_dialog-footer .b-button {
  padding: 8px 24px;
}
.b-proceed_checkout_dialog-footer .b-button + .b-button {
  margin: 15px 0 0;
}
@media screen and (min-width: 1024px) {
  .b-proceed_checkout_dialog-footer .b-button + .b-button {
    margin: 0 0 0 20px;
  }
}

.b-minicart {
  background-color: #fff;
  bottom: 0;
  color: #000;
  height: 100%;
  max-width: 496px;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition-property: transform;
  visibility: hidden;
  width: 80vw;
  z-index: 17;
  /* stylelint-disable-next-line */
}
@media screen and (max-width: 767px) {
  .b-minicart {
    max-width: 100%;
    width: 100%;
  }
}
html[dir=rtl] .b-minicart {
  left: 0;
  right: initial;
  transform: translateX(-100%);
}
.b-minicart-sticky {
  padding: 40px 24px 24px;
}
.b-minicart.m-activated {
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
.b-minicart.m-active {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  transform: translateX(0);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  visibility: visible;
  /* stylelint-disable-next-line */
}
html[dir=rtl] .b-minicart.m-active {
  transform: translateX(0);
}
.b-minicart.m-loading_long::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #000;
  border-left-color: #d9d9d9;
  border-radius: 50%;
  border-top-color: #d9d9d9;
  content: "Loading…";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
}
.b-minicart-inner {
  height: 100%;
  overflow: hidden;
}
.b-minicart[aria-busy=true] .b-minicart-inner {
  opacity: 0.6;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-minicart-inner_in {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  overflow: hidden;
}
.b-minicart-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
  position: relative;
}
.b-minicart-empty .b-minicart-header {
  left: 30px;
  position: absolute;
  right: 20px;
  top: 30px;
}
.b-minicart-scroll {
  padding: 0 24px 40px;
  overflow-y: auto;
}
.b-minicart-close_title {
  font-size: 22px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .b-minicart-close_title {
    font-size: 22px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-minicart-close {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
}
.b-minicart-close svg {
  height: 20px;
  pointer-events: none;
  width: 20px;
}
.b-minicart-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-minicart-messages {
  transition: height cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
.b-minicart-messages .b-message.m-error {
  margin-bottom: 25px;
  padding: 15px;
}
.b-minicart-actions {
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.b-minicart-actions .b-button {
  width: 100%;
}
.b-minicart-actions .b-button + .b-button {
  margin-top: 10px;
}
.b-minicart-empty {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  text-align: center;
}
.b-minicart-empty_icon {
  margin: 0 auto;
}
.b-minicart-empty_icon svg {
  height: 52px;
  width: 52px;
}
.b-minicart-empty_text {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 20px 0;
}
.b-minicart-empty_button {
  min-width: 320px;
}

.b-minicart_product {
  border-top: 1px solid #999;
  padding: 20px 0;
  position: relative;
}
.b-minicart_product:first-child {
  border-top: none;
}
.b-minicart_product.m-checkout {
  border: none;
  margin-bottom: 20px;
  padding: 0;
}
.b-minicart_product.m-checkout:last-child {
  margin-bottom: 0;
}
.b-minicart_product.m-bonus {
  border-top: none;
}
.b-minicart_product-inner {
  display: grid;
  grid-template-areas: "msg . . ." "image details details remove" "image qty availability total" ". subscription . .";
  grid-template-columns: 120px auto auto 68px;
  grid-template-rows: repeat(4, auto);
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .b-minicart_product-inner {
    grid-template-columns: 88px auto auto 48px;
  }
}
.b-minicart_product.m-checkout .b-minicart_product-inner {
  grid-template-areas: "image details" "image total" "image total" "image qty";
  grid-template-columns: 105px 1fr;
}
@media screen and (max-width: 1023px) {
  .b-minicart_product.m-checkout.m-bonus .b-minicart_product-inner, .b-minicart_product.m-checkout.m-order_bonus .b-minicart_product-inner {
    grid-template-areas: "msg . . ." "image details details remove" "image total total total" "image qty . .";
  }
}
.b-minicart_product-msg {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fce6e6;
  color: #ed432c;
  grid-column: span 4;
  margin-bottom: 20px;
  padding: 12px 16px;
  text-align: center;
}
.b-minicart_product-msg.m-gift {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  background: none;
  border-bottom: 1px solid #d9d9d9;
  color: #000;
  margin-bottom: 30px;
  padding-bottom: 20px;
  text-align: start;
}
@media screen and (max-width: 1023px) {
  .b-minicart_product-msg.m-gift {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
.b-minicart_product-msg a {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
  color: #000;
}
@media not all and (pointer: coarse) {
  .b-minicart_product-msg a:hover {
    text-decoration: none;
  }
}
.b-minicart_product-msg a > svg {
  height: 9px;
  width: 15px;
}
.b-minicart_product-msg a.b-button svg {
  width: 15px;
}
.b-minicart_product-msg a:disabled, .b-minicart_product-msg a.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-minicart_product-msg a:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-minicart_product-msg a.b-button {
  text-decoration: none;
}
.b-minicart_product-msg a.b-button .b-button-text {
  text-decoration: underline;
}
.b-minicart_product.m-checkout .b-minicart_product-msg {
  display: none;
}
.b-minicart_product-link {
  display: block;
}
.b-minicart_product-image {
  grid-area: image;
}
.b-minicart_product-image .b-badges {
  left: 10px;
  top: 10px;
}
.b-minicart_product-details {
  grid-area: details;
  padding-inline-start: 20px;
}
.b-minicart_product.m-checkout .b-minicart_product-details {
  padding-inline-start: 10px;
}
.b-minicart_product-sku {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  color: #4d4d4d;
  margin-bottom: 20px;
}
.b-minicart_product.m-checkout .b-minicart_product-sku {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 0;
}
.b-minicart_product.m-checkout.m-bonus .b-minicart_product-sku {
  display: none;
}
.b-minicart_product-status {
  margin-bottom: 5px;
}
@media screen and (min-width: 1024px) {
  .b-minicart_product-status {
    margin-bottom: 10px;
  }
}
.b-minicart_product-status_text {
  margin-right: 5px;
}
.b-minicart_product-tracking_number {
  margin-bottom: 5px;
}
@media screen and (min-width: 1024px) {
  .b-minicart_product-tracking_number {
    margin-bottom: 10px;
  }
}
.b-minicart_product-tracking_number_text {
  margin-right: 5px;
}
.b-minicart_product-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 133.3333333333%;
  position: relative;
  width: 100%;
}
.b-minicart_product-picture img {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-minicart_product-title {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-minicart_product.m-checkout .b-minicart_product-title {
  margin-bottom: 10px;
}
.b-minicart_product-title a {
  text-decoration: none;
}
.b-minicart_product-title a:hover {
  text-decoration: underline;
}
.b-minicart_product-availability {
  display: flex;
  grid-area: availability;
  padding: 0 10px;
}
.b-minicart_product-subscription {
  font-weight: 300;
  grid-area: subscription;
  line-height: 19px;
  margin-top: 20px;
  padding-inline-start: 20px;
}
.b-minicart_product-attributes {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-minicart_product-attributes:not(:empty) {
  margin-bottom: 20px;
}
.b-minicart_product.m-checkout .b-minicart_product-attributes {
  display: none;
}
.b-minicart_product-attribute_value {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  word-break: break-word;
}
.b-minicart_product-bundle_title {
  margin-bottom: 8px;
}
.b-minicart_product-bundle_item {
  margin-bottom: 4px;
}
.b-minicart_product-bundle_item:not(:last-child)::after {
  content: ",";
}
.b-minicart_product-attribute {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 5px;
}
.b-minicart_product-attribute:last-of-type {
  margin-bottom: 0;
}
.b-minicart_product-price {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 5px;
}
.b-minicart_product.m-checkout .b-minicart_product-price {
  display: none;
}
.b-minicart_product-price_label {
  margin-right: 5px;
}
.b-minicart_product.m-checkout .b-minicart_product-price_each {
  margin-inline-end: 4px;
}
.b-minicart_product-price_total {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  grid-area: total;
  margin-top: 20px;
}
.b-minicart_product.m-checkout .b-minicart_product-price_total {
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  font-weight: 700;
  margin-top: 0;
  padding-left: 10px;
}
@media screen and (max-width: 1023px) {
  .b-minicart_product.m-checkout.m-bonus .b-minicart_product-price_total, .b-minicart_product.m-checkout.m-order_bonus .b-minicart_product-price_total {
    justify-content: flex-start;
  }
}
.b-minicart_product-price_total .b-price {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (max-width: 767px) {
  .b-minicart_product-price_total .b-price {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-minicart_product-price_total_label {
  margin-right: 5px;
}
.b-minicart_product-promotions {
  margin: 5px 0;
}
.b-minicart_product-info {
  grid-area: qty;
  padding-inline-start: 20px;
}
@media screen and (max-width: 1023px) {
  .b-minicart_product-info {
    align-items: center;
    display: flex;
  }
}
.b-minicart_product-info.m-gift {
  margin-top: 28px;
}
.b-minicart_product-info .b-form_section-label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-minicart_product.m-checkout .b-minicart_product-info {
  align-items: flex-end;
  display: flex;
  margin-top: 0;
  padding-left: 10px;
}
.b-minicart_product-qty {
  display: flex;
}
.b-minicart_product-qty_inline {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-minicart_product.m-checkout .b-minicart_product-qty_inline {
  font-weight: 400;
}
.b-minicart_product.m-checkout .b-minicart_product-qty_label {
  font-weight: 300;
}
.b-minicart_product-remove {
  display: flex;
  grid-area: remove;
  justify-content: flex-end;
}
.b-minicart_product.m-checkout .b-minicart_product-remove {
  display: none;
}
.b-minicart_product-remove_btn {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
}
.b-minicart_product-remove_btn:hover {
  color: #808080;
}
.b-minicart_product-remove_btn svg {
  width: 14px;
}
.b-minicart_product-returned {
  background-color: #f9f9f9;
  margin-top: 30px;
  padding: 20px;
}
@media screen and (min-width: 768px) {
  .b-minicart_product-returned {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
}
.b-minicart_product-returned_content {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-minicart_product-returned_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 300;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-minicart_product-returned_link:hover {
    text-decoration: none;
  }
}
.b-minicart_product-returned_link > svg {
  height: 9px;
  width: 15px;
}
.b-minicart_product-returned_link.b-button svg {
  width: 15px;
}
.b-minicart_product-returned_link:disabled, .b-minicart_product-returned_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-minicart_product-returned_link:hover {
    text-decoration: none;
  }
}
.b-minicart_product-returned_link:disabled, .b-minicart_product-returned_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
}
.b-minicart_product-returned_link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-minicart_product-returned_link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-minicart_product-returned_link.b-button .b-button-text {
  text-decoration: underline;
}
.b-minicart_product-status_value {
  color: #4d4d4d;
}
.b-minicart_product-returned_value {
  align-items: center;
  color: #ed432c;
  display: inline-flex;
}
.b-minicart_product-returned_value .b-tooltip {
  margin-left: 5px;
}

.b-othersites {
  padding: 30px 0 40px;
}
@media screen and (min-width: 768px) {
  .b-othersites {
    padding: 22px 0 58px;
  }
}
.b-othersites.m-footer {
  border-top: 1px solid #808080;
}
.b-othersites-section {
  display: flex;
  justify-content: center;
  position: relative;
}
.b-othersites.m-footer .b-othersites-title {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  left: 50%;
  margin: auto;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  width: auto;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .b-othersites.m-footer .b-othersites-title {
    top: 6px;
  }
}
.b-othersites-list {
  align-items: center;
  display: flex;
  padding: 112px 0 72px;
  position: relative;
}
@media screen and (min-width: 768px) {
  .b-othersites-list {
    padding: 118px 0 60px;
  }
}
.b-othersites-item {
  margin: 0 60px;
}
@media screen and (min-width: 768px) {
  .b-othersites-item {
    margin: 0 68px;
  }
}
.b-othersites-item:first-child {
  margin-left: 28px;
}
@media screen and (min-width: 768px) {
  .b-othersites-item:first-child {
    margin-left: 48px;
  }
}
.b-othersites-item:last-child {
  margin-right: 28px;
}
@media screen and (min-width: 768px) {
  .b-othersites-item:last-child {
    margin-right: 48px;
  }
}
.b-othersites-item_logo {
  max-width: unset;
}
.b-othersites-toggle_icon {
  height: 23px;
  margin: 0 0 4px 16px;
  position: relative;
  width: 23px;
}
.b-othersites-toggle_icon::before, .b-othersites-toggle_icon::after {
  background-color: #000;
  content: "";
  height: 23px;
  position: absolute;
  width: 1px;
}
.b-othersites-toggle_icon::before {
  left: 50%;
  transition: transform ease-in-out 0.3s;
}
[aria-expanded=true] .b-othersites-toggle_icon::before {
  transform: scale3d(0, 2, 0);
}
.b-othersites-toggle_icon::after {
  left: 50%;
  transform: rotate(90deg);
}

.b-payment_total {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-payment_total {
    display: none;
  }
}
.b-minicart .b-payment_total {
  display: table;
}
.b-payment_total-name, .b-payment_total-value {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  padding: 20px 0;
  text-align: start;
}
.b-payment_total-value {
  text-align: end;
  vertical-align: top;
}
.b-payment_total-tax {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: block;
}

.b-product_tile {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100%;
  overflow: hidden;
  padding: 0 0 20px;
  position: relative;
}
.b-product_tile-image_container {
  margin-bottom: 16px;
}
.b-product_tile-top {
  overflow: hidden;
  position: relative;
}
.b-product_tile-image_link {
  display: block;
}
.b-product_tile-image {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-product_tile-image img {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-product_tile-details, .b-product_tile-info {
  padding: 0 16px;
}
.b-product_tile-details {
  margin-bottom: 10px;
}
.b-product_tile-info {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  margin-bottom: 16px;
}
.b-product_tile-info .b-price {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -1px;
}
.b-product_tile-feature {
  margin-bottom: 8px;
}
.b-product_tile-attribute {
  font-size: 16px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-product_tile-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -1px;
}
@media screen and (max-width: 767px) {
  .b-product_tile-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
  }
}
.b-product_tile-subtitle, .b-product_tile-units {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: #4d4d4d;
}
.b-product_tile-actions {
  padding: 0 16px;
}
.b-product_tile-variations {
  border-top: 1px solid #e6e6e6;
  padding-top: 8px;
}
.b-product_tile-variations .b-variations_item-label {
  margin-bottom: 4px;
}

/*md

# Product Feature

Designed to provide styling of product feature element on PDP, product tile etc.

```html_example
<!--
Classes:
.m-contacts - Contacts
.m-nighttimeRelief - Night Time Relief
.m-screenTimeRelief - Screen Time Relief
.m-sensitiveEyes - Sensitive Eyes
.m-preservativeFree - Preservative Free
-->
<div class="b-product_feature m-icon-before [modifier class]">
	Product Feature Name
</div>
```

*/
.b-product_feature {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
}
.b-product_feature.m-icon-before::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.b-product_feature.m-contacts::before {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M15.66 4.03c-.86-2.12-4.96-2.2-9.22-.49C3.5 4.74 1.18 6.51.34 8.2c-.36.74-.45 1.46-.19 2.1l.01.03c1.3 3.17 5.8 4.24 10.04 2.53 4.26-1.72 6.75-5.64 5.46-8.82M8.95 9.75c-3.74 1.5-7.24 1.44-7.77.13l-.04-.13c-.33-1.33 2.1-3.7 5.72-5.17 3.74-1.51 7.24-1.44 7.77-.13.52 1.3-1.94 3.79-5.68 5.3m.84 2.07c-2.38.95-4.79.93-6.5.15 1.7.1 3.87-.3 6.08-1.19s4.05-2.1 5.19-3.36c-.68 1.75-2.4 3.44-4.77 4.4M5.35 6.16l.25.5a6 6 0 0 0-.72.42q-.82.5-1.52 1.13-.72.65-1.12 1.31l-.48-.28Q2.21 8.49 3 7.8a12 12 0 0 1 2.36-1.64%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}
.b-product_feature.m-nighttimeRelief::before {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M12.3 11.1A7.38 7.38 0 0 1 5.9 0C2.5 1 0 4.1 0 7.8 0 12.3 3.7 16 8.2 16c3.7 0 6.8-2.5 7.8-5.9-1.1.6-2.3 1-3.7 1%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}
.b-product_feature.m-screenTimeRelief::before {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M11.42 0h-6.6C3.82 0 3 .8 3 1.82v12.36c0 1 .8 1.82 1.82 1.82h6.6c1 0 1.82-.8 1.82-1.82V1.82A1.8 1.8 0 0 0 11.42 0m-3.3 14.99c-.56 0-1.01-.46-1.01-1.01 0-.56.45-1.01 1.01-1.01s1.01.45 1.01 1c0 .56-.45 1.02-1.01 1.02m3.3-3.02h-6.6a.4.4 0 0 1-.42-.42V1.82c0-.24.18-.42.42-.42h6.6c.24 0 .42.18.42.42v9.73c.02.24-.18.42-.42.42%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}
.b-product_feature.m-sensitiveEyes::before {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M8 2c-4.4 0-8 3.6-8 8h2c0-3.3 2.7-6 6-6s6 2.7 6 6h2c0-4.4-3.6-8-8-8M6.8 6.2a4 4 0 1 0 2.4 0L8 7.9z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}
.b-product_feature.m-preservativeFree::before {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23000%22 d%3D%22M12.3 6.2c.2.2.2.6 0 .8l-3.5 3.8c-.1.2-.3.2-.4.2-.2 0-.3 0-.4-.2L6.7 9.4a.6.6 0 0 1 0-.8c.2-.2.6-.2.8 0l1 1 3.2-3.4c.1-.2.4-.2.6 0M10 3c-.8 0-1.6.2-2.3.5L5.8 0 4.1 3 1.4 7.8l-.2.4c-.6 1-.8 2.2-.6 3.3s.7 2.2 1.5 3c1 1 2.3 1.5 3.7 1.5h.1c1.4 0 2.7-.5 3.7-1.5.2-.1.3-.3.4-.5 3 0 5.5-2.5 5.5-5.5S13 3 10 3m0 9.9c-2.4 0-4.4-2-4.4-4.4s2-4.4 4.4-4.4 4.4 2 4.4 4.4-2 4.4-4.4 4.4%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
  background-size: 100%;
}

.b-variations_item {
  position: relative;
}
.b-variations_item-label {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
  color: #4d4d4d;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.b-variations_item.m-quantity .b-variations_item-label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-variations_item-empty_value {
  display: block;
  font-size: 16px;
  font-weight: 300;
  left: 160px;
  position: absolute;
  text-align: start;
  top: 0;
  /* stylelint-disable-next-line */
}
html[dir=rtl] .b-variations_item-empty_value {
  left: initial;
  right: 60px;
}
.b-variations_item-content.m-list {
  display: flex;
  flex-wrap: wrap;
  scrollbar-width: none;
}
.b-variations_item-content.m-list::-webkit-scrollbar {
  display: none;
}
/*md

# b-button_multi_state

This button used to have several states, like: "Add to cart" - "Processed" - "Added" and icon of busy state.
It currently used on PDP and Checkout with Adyen integration.

```html_example
<button class="b-button_multi_state m-processing b-button" type="button">
	<svg class="b-button_multi_state-icon" width="19" height="19" viewBox="0 0 19 19" focusable="false">
		<g fill="currentColor" transform="rotate(-90 9.5 9.5)">
			<circle cx="15.9" cy="13.3" r="1.1"/>
			<circle cx="13" cy="16.2" r="1.1"/>
			<circle cx="16.9" cy="9.1" r="1.1"/>
			<circle cx="16.1" cy="5.1" r="1.1" opacity=".9"/>
			<circle cx="13" cy="2" r="1.1" opacity=".8"/>
			<circle cx="9.1" cy="1.2" r="1.1" opacity=".6"/>
			<circle cx="5.1" cy="2" r="1.1" opacity=".6"/>
			<circle cx="2" cy="5.2" r="1.1" opacity=".5"/>
			<circle cx="1.2" cy="9.1" r="1.1" opacity=".4"/>
			<circle cx="1.2" cy="9.1" r="1.1" opacity=".4"/>
			<circle cx="2" cy="13" r="1.1" opacity=".3"/>
			<circle cx="5.1" cy="16.1" r="1.1" opacity=".2"/>
			<circle cx="9.1" cy="16.9" r="1.1" opacity=".1"/>
			<circle cx="9.1" cy="16.9" r="1.1" opacity=".1"/>
		</g>
	</svg>
	<span>Processing...</span>
</button>
```

*/
.b-button_multi_state {
  text-overflow: ellipsis;
  width: calc(100% - 50px);
}
.b-button_multi_state.m-processing {
  cursor: wait;
  display: inline-flex;
  pointer-events: none;
}
.b-button_multi_state-icon {
  animation: rotate 1.5s linear infinite;
  display: none;
  height: 12px;
  margin-right: 4px;
}
.b-button_multi_state.m-processing .b-button_multi_state-icon {
  display: block;
}

@media screen and (max-width: 1023px) {
  .b-cart_discount {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 25px;
  }
}
.b-minicart_panel .b-cart_discount {
  box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.08);
  margin: 20px -20px 0;
  padding: 30px 20px 18px;
}
.b-cart_discount-wrapper {
  margin-top: auto;
}
.b-cart_discount-headline {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  margin: 30px 0 7px;
}
@media screen and (max-width: 1023px) {
  .b-cart_discount-headline {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-cart_discount-headline {
    margin: 25px 0 7px;
  }
}
.b-minicart_panel .b-cart_discount-headline {
  margin: 0 0 7px;
}
.b-cart_discount-subtitle {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 15px;
}
.b-cart_discount-subtitle_value {
  font-weight: 400;
}
.b-cart_discount-slider {
  position: relative;
}
.b-cart_discount-ctrl {
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  position: absolute;
  top: 43px;
  width: 50px;
  z-index: 1;
}
@media not all and (pointer: coarse) {
  .b-cart_discount-ctrl:hover {
    background: #000;
  }
}
.b-cart_discount-ctrl svg {
  width: 12px;
}
.b-cart_discount-ctrl[disabled] {
  display: none;
}
.b-cart_discount-ctrl.m-prev {
  left: 0;
}
.b-cart_discount-ctrl.m-next {
  right: 0;
  transform: rotate(180deg);
}
@media screen and (min-width: 1024px) {
  .l-cart .b-cart_discount-ctrl {
    display: none;
  }
}
.b-cart_discount-list {
  display: flex;
}
@media screen and (max-width: 1023px) {
  .l-cart .b-cart_discount-list {
    display: flex;
    overflow: hidden;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -ms-scroll-chaining: none;
    scrollbar-width: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* Fixing thin border on iOS */
    padding: 1px 0;
  }
  .l-cart .b-cart_discount-list::-webkit-scrollbar {
    display: none;
  }
}
.b-minicart_panel .b-cart_discount-list {
  display: flex;
  overflow: hidden;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -ms-scroll-chaining: none;
  scrollbar-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Fixing thin border on iOS */
  padding: 1px 0;
}
.b-minicart_panel .b-cart_discount-list::-webkit-scrollbar {
  display: none;
}
.b-cart_discount-item {
  align-items: center;
  border: 1px solid transparent;
  display: flex;
  flex: 0 0 96px;
  flex-direction: column;
  max-width: 96px;
  position: relative;
  text-align: center;
}
.b-cart_discount-item + .b-cart_discount-item {
  margin-left: 16px;
}
.b-cart_discount-item.m-disabled {
  opacity: 0.5;
}
.b-cart_discount-item_chosen {
  border-color: #000;
}
.b-cart_discount-checkbox.b-checkbox {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
}
.b-cart_discount-checkbox.b-checkbox svg {
  height: 20px;
  margin: 0;
  width: 20px;
}
.b-cart_discount-image_wrapper {
  flex: 0 0 128px;
  margin-bottom: 15px;
  width: 100%;
}
.b-cart_discount-picture {
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.b-cart_discount-picture img {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-cart_discount-title {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 10px;
  padding: 0 10px;
}
.b-cart_discount-select {
  margin-top: auto;
  padding-left: 0;
  padding-right: 0;
  width: 75px;
}
.b-cart_discount-remove {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 300;
  text-decoration: underline;
  line-height: 40px;
  margin-top: auto;
}
@media not all and (pointer: coarse) {
  .b-cart_discount-remove:hover {
    text-decoration: none;
  }
}
.b-cart_discount-remove > svg {
  height: 9px;
  width: 15px;
}
.b-cart_discount-remove.b-button svg {
  width: 15px;
}
.b-cart_discount-remove:disabled, .b-cart_discount-remove.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-cart_discount-remove:hover {
    text-decoration: none;
  }
}
.b-cart_discount-remove:disabled, .b-cart_discount-remove.m-disabled {
  color: rgba(0, 0, 0, 0.5);
}
.b-cart_discount-remove.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-cart_discount-remove.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-cart_discount-remove.b-button .b-button-text {
  text-decoration: underline;
}

/*md

# b-promo_box

`promo-box` is basic container for creating promo boxes and banners.
It designed to position description (`b-promo_caption`) over the image box.

This implementation could handle both image and text centric approaches.

## Example

```html_example
<figure class="b-promo_box m-caption_center">
	<picture class="b-promo_box-picture">
		<source type="image/jpeg" media="(max-width: 767px)"
				srcset="../images/guide/examples/banner-16x9-sm.jpg, images/guide/examples/banner-16x9-sm@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 768px) and (max-width: 1024px)"
				srcset="../images/guide/examples/banner-16x9-md.jpg, images/guide/examples/banner-16x9-md@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 1025px)"
				srcset="../images/guide/examples/banner-16x9-lg.jpg, images/guide/examples/banner-16x9-lg@2x.jpg2x" />
		<img
			loading="lazy"
			src="../images/guide/examples/banner-16x9-lg.jpg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<p class="b-promo_caption-subtitle">
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
		</p>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

## Overflow handling

This component is designed to handle any type of overlow without cutting text content.

### Very long text

```html_example
<figure class="b-promo_box m-caption_offcenter">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities and other thing into long long title with some additional details
		</h2>
		<p class="b-promo_caption-subtitle">
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app. <br/>
		</p>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

### Different aspect ratio of image

```html_example
<figure class="b-promo_box">
	<picture class="b-promo_box-picture" style="padding-bottom:10%">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<p class="b-promo_caption-subtitle">
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
		</p>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

## Horizontal alignment

### `m-caption_left`

```html_example
<figure class="b-promo_box m-caption_left">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

### `m-caption_right`

```html_example
<figure class="b-promo_box m-caption_right">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

### `m-caption_center`

```html_example
<figure class="b-promo_box m-caption_center">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

### `m-caption_offcenter`

```html_example
<figure class="b-promo_box m-caption_offcenter">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/image-placeholder.svg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

## Vertical alignment

For sake of simpleness and robustness Boilerplate do not provide predefined vertical alignment
variations.

## Video as base

It is not limited what you could use as base for banner - it could be image or video.

What you need to do:

* `autoplay loop muted playsinline` is required to auto play video without user gesture in iOS

Please see [iOS manual](https://webkit.org/blog/6784/new-video-policies-for-ios/)

```html_example
<figure class="b-promo_box">
	<div class="b-promo_box-picture">
		<video autoplay loop muted playsinline width="1600" height="800">
			<source src="../images/guide/examples/banner-video-16x9-lg.mp4" type="video/mp4" />
			<source src="../images/guide/examples/banner-video-16x9-lg.mov" type="video/quicktime" />
		</video>
	</div>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

## Advanced: tiled background

```html_example
<style>
	.b-promo_box.m-image_3x4_right {
		.b-promo_box-picture {
			grid-column: 8 / span 4;
			padding-bottom: aspect-ratio(3, 4);
			padding-bottom: 133.3333333333%;
		}
	}
	.b-promo_box.m-image_3x4_left {
		.b-promo_box-picture {
			grid-column: 1 / span 4;
			padding-bottom: aspect-ratio(3, 4);
			padding-bottom: 133.3333333333%;
		}
	}
</style>
<figure class="b-promo_box m-caption_left m-image_3x4_right m-text_below">
	<picture class="b-promo_box-picture">
		<img
			loading="lazy"
			src="../images/guide/examples/banner-3x4-5.jpg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
    <figcaption class="b-promo_box-caption b-promo_caption">
        <h2 class="b-promo_caption-title">
            New beauty neutrals color
        </h2>
        <p class="b-promo_caption-subtitle">
            Plunge into calm pastel colors, choose for yourself only the most sophisticated and beautiful attire in the new season
        </p>
        <div class="b-promo_caption-actions">
            <a
                class="b-button"
                href="$url('Search-Show', 'cgid', 'category')$"
            >
                Shop New Season
            </a>
        </div>
    </figcaption>
</figure>
```

## Advanced: Background stretched independent from container

```html_example
<figure class="b-promo_box m-full_bleed m-caption_offcenter">
	<picture class="b-promo_box-picture">
		<source type="image/jpeg" media="(max-width: 767px)"
				srcset="../images/guide/examples/banner-16x9-sm.jpg, images/guide/examples/banner-16x9-sm@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 768px) and (max-width: 1024px)"
				srcset="../images/guide/examples/banner-16x9-md.jpg, images/guide/examples/banner-16x9-md@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 1025px)"
				srcset="../images/guide/examples/banner-16x9-lg.jpg, images/guide/examples/banner-16x9-lg@2x.jpg2x" />
		<img
			loading="lazy"
			src="../images/guide/examples/banner-16x9-lg.jpg"
			alt="Some dummy alternative text for image."
			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">
                Make boilerplate better
            </h2>
            <p class="b-promo_caption-subtitle">
                Everyone's fallen for boilerplate so we added to her games repertoire for spring with 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="$url('Search-Show', 'cgid', 'category')$"
                >
                    Shop New Season
                </a>
            </div>
        </div>
    </figcaption>
</figure>
```
*/
.b-promo_box {
  display: grid;
}
@media screen and (min-width: 1367px) {
  .b-promo_box {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-promo_box {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-promo_box {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box {
    grid-gap: 9px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
.b-promo_box-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 44.2477876106%;
  position: relative;
  width: 100%;
  grid-column: grid-start/grid-end;
  grid-row: 1/2;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .b-promo_box-picture {
    padding-bottom: 100%;
  }
}
.b-promo_box-picture_in,
.b-promo_box-picture img,
.b-promo_box-picture video {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-promo_box-caption {
  grid-column: grid-start/grid-end;
  grid-row: 1/2;
  padding: 48px 0;
  text-align: center;
}
.b-promo_box.m-gradient .b-promo_box-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--gradientColor, #22387c) 18.33%, rgba(255, 255, 255, 0) 50%);
}
.b-promo_box.m-full_bleed {
  grid-template-columns: auto;
  height: 100%;
}
.b-promo_box.m-full_bleed .b-promo_box-picture {
  grid-column: 1/2;
  grid-row: 1/2;
  padding-bottom: 32.3162274619%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-promo_box.m-full_bleed .b-promo_box-picture {
    padding-bottom: 58.3333333333%;
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-full_bleed .b-promo_box-picture {
    padding-bottom: 115.2%;
  }
}
.b-promo_box.m-full_bleed .b-promo_box-inner {
  display: grid;
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  grid-column: 1/2;
  grid-row: 1/2;
  margin-bottom: 16px;
  margin-top: 16px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    grid-gap: 9px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-full_bleed .b-promo_box-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-promo_box.m-full_bleed .b-promo_box-inner.m-full {
  padding: 0;
}
.b-promo_box.m-account {
  margin-top: 45px;
}
@media screen and (max-width: 1023px) {
  .b-promo_box.m-account {
    margin-top: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box:not(.m-full_bleed) .b-promo_box-caption {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-promo_box.m-caption_left .b-promo_box-caption {
  text-align: start;
}
@media screen and (min-width: 768px) {
  .b-promo_box.m-caption_left .b-promo_box-caption {
    grid-column: 2/span 5;
  }
}
.b-promo_box.m-caption_right .b-promo_box-caption {
  text-align: start;
}
@media screen and (min-width: 768px) {
  .b-promo_box.m-caption_right .b-promo_box-caption {
    grid-column: 8/span 5;
  }
}
@media screen and (min-width: 768px) {
  .b-promo_box.m-caption_center .b-promo_box-caption {
    grid-column: 3/span 8;
  }
}
.b-promo_box.m-caption_offcenter .b-promo_box-caption {
  text-align: start;
}
@media screen and (min-width: 768px) {
  .b-promo_box.m-caption_offcenter .b-promo_box-caption {
    grid-column: 7/span 5;
  }
}
.b-promo_box.m-secondary {
  position: relative;
  height: 100%;
}
.b-promo_box.m-secondary .b-promo_box-picture {
  z-index: 1;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-promo_box.m-secondary .b-promo_box-picture {
    padding-bottom: 100%;
  }
}
.b-promo_box.m-secondary .b-promo_box-caption {
  z-index: 1;
  position: absolute;
  inset: auto 0 0;
  padding: 24px;
  max-width: 100%;
  grid-column: initial;
  grid-row: initial;
  text-align: left;
}
.b-promo_box.m-secondary .b-promo_caption-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  margin-bottom: 16px;
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-secondary .b-promo_caption-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: normal;
  }
}
.b-promo_box.m-secondary .b-promo_caption-actions {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-text_below:not(.m-full_bleed) .b-promo_box-picture {
    grid-column: grid-start/grid-end;
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-text_below:not(.m-full_bleed) .b-promo_box-caption {
    grid-column: grid-start/grid-end;
    grid-row: 2/3;
    padding: 16px 0;
  }
}
@media screen and (max-width: 767px) {
  .b-promo_box.m-text_below.m-full_bleed {
    display: block;
  }
  .b-promo_box.m-text_below.m-full_bleed .b-promo_box-picture {
    grid-column: grid-start/grid-end;
  }
  .b-promo_box.m-text_below.m-full_bleed .b-promo_box-inner {
    grid-column: grid-start/grid-end;
    grid-row: 2/3;
  }
  .b-promo_box.m-text_below.m-full_bleed .b-promo_box-caption {
    padding: 16px 0;
  }
}
@media screen and (min-width: 1024px) {
  .b-promo_box.m-third {
    margin-top: 45px;
    width: 100%;
  }
}
.b-promo_box.m-third .b-promo_box-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 25.1449275362%;
  position: relative;
  width: 100%;
}
.b-promo_box.m-third .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-promo_box.m-third .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-promo_box.m-third .b-logo-absolute_logo {
  margin-bottom: 20px;
}
.b-promo_box-wrapper.m-account {
  margin: 45px 0;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-account {
    margin: 25px 0;
  }
}
.b-promo_box-wrapper.m-account .b-promo_box-picture {
  padding-bottom: 60px;
}
.b-promo_box-wrapper.m-account .b-promo_box-caption {
  padding: 32px 0;
}
.b-promo_box-wrapper.m-account .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-account .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-promo_box-wrapper.m-guest_details {
  width: 100%;
}
.b-promo_box-wrapper.m-guest_details .b-promo_box {
  margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
  .b-promo_box-wrapper.m-guest_details .b-promo_box {
    margin-bottom: 45px;
  }
}
.b-promo_box-wrapper.m-guest_details .b-promo_box-picture {
  padding-bottom: 0;
}
.b-promo_box-wrapper.m-guest_details .b-promo_box-caption {
  padding: 20px 0;
}
.b-promo_box-wrapper.m-guest_details .b-promo_box .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 10px;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-guest_details .b-promo_box .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-promo_box-wrapper.m-guest_details .b-promo_box .b-promo_caption-subtitle {
  font-weight: 300;
}
.b-promo_box-wrapper.m-guest_details .b-promo_box .b-promo_caption-actions {
  margin: 0;
}
.b-promo_box-wrapper.m-brand_sustainability {
  margin-bottom: 40px;
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box {
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-brand_sustainability .b-promo_box {
    margin-top: 40px;
  }
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box-picture {
  padding-bottom: 0;
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box-caption {
  padding: 60px 0;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-brand_sustainability .b-promo_box-caption {
    padding: 40px 0;
  }
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-title {
    max-width: 720px;
  }
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-actions {
  margin: 35px 0 0;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-actions {
    margin: 25px 0 0;
  }
}
.b-promo_box-wrapper.m-brand_sustainability .b-promo_box .b-promo_caption-actions a {
  margin: 0;
}
.b-promo_box-wrapper.m-co_promo {
  margin-bottom: 40px;
}
.b-promo_box-wrapper.m-co_promo .b-promo_box {
  position: relative;
  width: 100%;
  z-index: 1;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-co_promo .b-promo_box {
    margin-top: 40px;
  }
}
.b-promo_box-wrapper.m-co_promo .b-promo_box-picture {
  padding-bottom: 0;
}
.b-promo_box-wrapper.m-co_promo .b-promo_box-caption {
  padding: 24px 0;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-co_promo .b-promo_box-caption {
    padding: 45px 0;
  }
}
.b-promo_box-wrapper.m-co_promo .b-promo_box .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1023px) {
  .b-promo_box-wrapper.m-co_promo .b-promo_box .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-promo_box-wrapper.m-co_promo .b-promo_box .b-promo_caption-title {
    max-width: 720px;
  }
}
.b-promo_box-wrapper.m-co_promo .b-promo_box .b-promo_caption-subtitle {
  margin-bottom: 0;
  margin-top: 15px;
}
.b-promo_box-wrapper.m-auto_replenish {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .b-promo_box-wrapper.m-auto_replenish {
    margin-bottom: 50px;
    padding-right: 25px;
    width: 66.6666666667%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-promo_box-wrapper.m-auto_replenish {
    padding-right: 25px;
  }
}
.b-promo_box-wrapper.m-auto_replenish .b-promo_box {
  position: relative;
  z-index: 1;
}
.b-promo_box-wrapper.m-auto_replenish .b-promo_box-picture {
  padding-bottom: 22.7272727273%;
}
.b-promo_box-wrapper.m-auto_replenish .b-promo_caption-title {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .b-promo_box-wrapper.m-auto_replenish .b-promo_caption-title {
    font-size: 24px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-promo_box-wrapper.m-auto_replenish .b-promo_caption-subtitle {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .b-promo_box-wrapper.m-auto_replenish .b-promo_caption-subtitle {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}

/*md

# b-promo_caption

Promo caption is the content of promo components.

## Structure

`b-promo_caption` consist from 3 main elements:

* title
* subtitle
* actions container

All of this elements are optional.

## Variation

For sake of simpleness and robustness Boilerplate do not provide predefined sizes and styles
variations.

## Examples

### All elements

```html_example
<div class="b-promo_caption">
	<h2 class="b-promo_caption-title">
		Shop Now. Pay Later.
		Exclusively for Members
	</h2>
	<p class="b-promo_caption-subtitle">
		Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
	</p>
	<div class="b-promo_caption-actions">
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Activate
		</a>
	</div>
</div>
```

### Different order

```html_example
<div class="b-promo_caption">
	<p class="b-promo_caption-subtitle">
		Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
	</p>
	<h2 class="b-promo_caption-title">
		Shop Now. Pay Later.
		Exclusively for Members
	</h2>
	<div class="b-promo_caption-actions">
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Activate
		</a>
	</div>
</div>
```

### Only title and CTA

```html_example
<div class="b-promo_caption">
	<h2 class="b-promo_caption-title">
		Shop Now. Pay Later.
	</h2>
	<div class="b-promo_caption-actions">
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Join
		</a>
	</div>
</div>
```

### 2 CTA

```html_example
<div class="b-promo_caption">
	<h2 class="b-promo_caption-title">
		New spring collections
	</h2>
	<div class="b-promo_caption-actions">
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Men
		</a>
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Woman
		</a>
	</div>
</div>
```

### 3 CTA

```html_example
<div class="b-promo_caption">
	<h2 class="b-promo_caption-title">
		New spring collections
	</h2>
	<div class="b-promo_caption-actions">
		<a
			class="b-button m-outline"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Men
		</a>
		<a
			class="b-button"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Woman
		</a>
		<a
			class="b-button m-link"
			href="$url('Search-Show', 'cgid', 'category-2')$"
		>
			Kids
		</a>
	</div>
</div>
```

### Without CTA

```html_example
<a
	class="b-promo_caption"
	href="$url('Search-Show', 'cgid', 'category-2')$"
>
	<h2 class="b-promo_caption-title">
		New spring collections
	</h2>
	<p class="b-promo_caption-subtitle">
		Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
	</p>
</a>
```

## Example in component

### b-promo_info_box

```html_example
<div class="b-promo_info_box">
	<div class="b-promo_info_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Shop Now. Pay Later. <br/>
			Exclusively for Members
		</h2>
		<p class="b-promo_caption-subtitle">
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
		</p>
		<div class="b-promo_caption-actions">
			<a class="m-outline b-button" href="$url('Search-Show', 'cgid', 'category-2')$">
				Join today
			</a>
		</div>
	</div>
</div>
```

### b-promo-box

```html_example
<figure class="b-promo_box">
	<picture class="b-promo_box-picture">
		<source type="image/jpeg" media="(max-width: 767px)"
				srcset="../images/guide/examples/banner-16x9-sm.jpg, images/guide/examples/banner-16x9-sm@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 768px) and (max-width: 1024px)"
				srcset="../images/guide/examples/banner-16x9-md.jpg, images/guide/examples/banner-16x9-md@2x.jpg 2x" />
		<source type="image/jpeg" media="(min-width: 1025px)"
				srcset="../images/guide/examples/banner-16x9-lg.jpg, images/guide/examples/banner-16x9-lg@2x.jpg2x" />
		<img
			loading="lazy"
			src="../images/guide/examples/banner-16x9-lg.jpg"
			alt="Some dummy alternative text for image."
			width="1600"
			height="800"
		/>
	</picture>
	<figcaption class="b-promo_box-caption b-promo_caption">
		<h2 class="b-promo_caption-title">
			Explore More Possibilities
		</h2>
		<p class="b-promo_caption-subtitle">
			Join our Loyalty Program and try before you buy. Pay Later is available online and in-store with boilerplate app.
		</p>
		<div class="b-promo_caption-actions">
			<a
				class="b-button"
				href="$url('Search-Show', 'cgid', 'category-2')$"
			>
				Shop Now
			</a>
		</div>
	</figcaption>
</figure>
```

*/
.b-promo_caption {
  align-self: center;
}
.b-promo_caption-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin: 0 0 15px;
}
@media screen and (max-width: 1023px) {
  .b-promo_caption-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-promo_caption-subtitle {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0 0 20px;
}
.b-promo_caption-description {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-promo_caption-actions {
  align-items: baseline;
  display: inline-flex;
  flex-wrap: wrap;
  margin: 24px -16px 0;
}
.b-promo_caption-actions a {
  margin: 0 16px 12px;
}
.b-promo_caption.m-text_grey {
  color: #4d4d4d;
}
.b-promo_caption.m-text_white {
  color: #fff;
}

/*md

# Loader

```html_example
<div class="b-loader-icon"></div>
```

*/
.b-loader {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  bottom: 0;
  display: none;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 23;
}
.b-loader.m-active {
  display: flex;
  opacity: 1;
}
.b-loader.m-hidden {
  display: none;
  opacity: 0;
}
.b-loader-icon {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  height: 140px;
  justify-content: center;
  position: relative;
  width: 140px;
}
.b-loader-icon::before {
  animation: launch360-rotate 20s linear infinite;
  background: url("../images/icons/loader-info.png") no-repeat center/100%;
  content: "";
  height: 100px;
  left: calc(50% - 50px);
  position: absolute;
  top: calc(50% - 50px);
  width: 100px;
}
.b-loader-icon::after {
  background: url("../images/icons/loader-brand.svg") no-repeat center/100%;
  content: "";
  height: 16px;
  width: 65px;
}

.b-scroll-content {
  align-items: center;
  display: flex;
  height: 100%;
  overflow-x: auto;
  position: relative;
}
.b-scroll-content::-webkit-scrollbar {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}
.b-scroll-content::-webkit-scrollbar-thumb {
  background: transparent;
}
.b-scroll-content::-webkit-scrollbar-track {
  background: transparent;
}
.b-scroll-track {
  background: rgba(128, 128, 128, 0.35);
  bottom: 0;
  height: 2px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 100%;
}
.b-alle_content .b-scroll-track {
  background: rgba(217, 217, 217, 0.35);
}
.b-scroll-slider {
  background: #000;
  height: 2px;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
.b-scroll-slider::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.b-alle_content .b-scroll-slider {
  background: #fff;
}

.b-youcam_widget {
  position: relative;
  display: flex;
  height: 100%;
}
.l-plp-products .b-youcam_widget {
  border-radius: 8px;
  overflow: hidden;
  flex-wrap: wrap;
}
.l-pdp-youcam .b-youcam_widget {
  background: #fff;
}
@media screen and (min-width: 1024px) {
  .l-pdp-youcam .b-youcam_widget {
    margin: 0 auto;
    max-width: 1440px;
    padding-left: 60px;
    padding-right: 60px;
    flex-direction: row-reverse;
    padding: 43px 30px;
  }
}
@media screen and (min-width: 1024px) and (min-width: 768px) and (max-width: 1023px) {
  .l-pdp-youcam .b-youcam_widget {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 767px) {
  .l-pdp-youcam .b-youcam_widget {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (min-width: 1024px) {
  .l-pdp-youcam .b-youcam_widget.m-full {
    padding: 0;
  }
}
@media screen and (max-width: 1023px) {
  .l-pdp-youcam .b-youcam_widget {
    padding: 25px 0 0;
  }
}
.b-account_dashboard .b-youcam_widget {
  background-color: #fff;
  padding: 35px 0;
}
.b-youcam_widget-image_container {
  font-size: 0;
}
@media screen and (min-width: 768px) {
  .b-youcam_widget-image_container {
    flex: 0 0 49.5%;
  }
  .b-account_dashboard .b-youcam_widget-image_container {
    flex: 0 0 calc(50% + 16px);
  }
}
.l-plp-products .b-youcam_widget-image_container {
  flex: 0 0 100%;
}
@media screen and (max-width: 767px) {
  .l-plp-products .b-youcam_widget-image_container {
    margin-bottom: -40px;
  }
}
@media screen and (min-width: 1024px) {
  .l-pdp-youcam .b-youcam_widget-image_container {
    flex: 0 0 50%;
  }
}
@media screen and (max-width: 1023px) {
  .l-pdp-youcam .b-youcam_widget-image_container {
    padding: 0 15px;
  }
}
.b-account_dashboard .b-youcam_widget-image_container {
  background-color: #fff;
}
.b-youcam_widget-figure {
  height: 100%;
}
@media screen and (min-width: 768px) {
  .l-plp-products .b-youcam_widget-figure {
    overflow: hidden;
    padding-top: 65%;
    position: relative;
  }
}
@media screen and (max-width: 1023px) {
  .b-youcam_widget-figure {
    margin-bottom: -60px;
  }
}
@media screen and (min-width: 1024px) {
  .l-pdp-youcam .b-youcam_widget-figure {
    height: 448px;
    margin: 0 auto;
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .l-pdp-youcam .b-youcam_widget-figure {
    height: 345px;
    margin: 0 auto;
    max-width: 345px;
    width: 100%;
  }
}
.b-youcam_widget-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .l-plp-products .b-youcam_widget-image {
    bottom: 0;
    position: absolute;
    top: 0;
  }
}
@media screen and (min-width: 1024px) {
  .b-account_dashboard .b-youcam_widget-image {
    flex: 0 0 calc(50% - 16px);
  }
}
.b-youcam_widget-content_column {
  position: relative;
  width: 100%;
  padding: 16px;
  background-color: #e5f5fd;
}
@media screen and (min-width: 1024px) {
  .b-youcam_widget-content_column {
    width: auto;
    padding: 16px 24px;
    border-radius: 8px;
  }
  .l-plp-products .b-youcam_widget-content_column {
    position: absolute;
    left: 24px;
    bottom: 24px;
  }
}
@media screen and (max-width: 1023px) {
  .b-youcam_widget-content_column::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    display: block;
    width: 100%;
    clip-path: url("#wavesClipCommon");
    height: 20px;
    transform: rotate(180deg);
    background-color: #e5f5fd;
  }
}
@media screen and (min-width: 1024px) {
  .b-youcam_widget-content {
    max-width: 420px;
  }
  .l-pdp-youcam .b-youcam_widget-content {
    max-width: 555px;
    text-align: left;
  }
  .b-account_dashboard .b-youcam_widget-content {
    max-width: 345px;
  }
}
.b-youcam_widget-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
}
@media screen and (min-width: 1024px) {
  .l-pdp-youcam .b-youcam_widget-title {
    font-size: 38px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
  .b-account_dashboard .b-youcam_widget-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
  }
}
@media screen and (max-width: 767px) {
  .b-youcam_widget-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-youcam_widget-text {
  font-size: 20px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1px;
}
@media screen and (max-width: 767px) {
  .b-youcam_widget-text {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }
}
.b-youcam_widget-text:not(:last-child) {
  margin-bottom: 14px;
}
.b-youcam_widget-text_small {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1px;
}
@media screen and (max-width: 767px) {
  .b-youcam_widget-text_small {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }
}
.b-youcam_widget-text_small:not(:last-child) {
  margin-bottom: 14px;
}
@media screen and (min-width: 1024px) {
  .b-youcam_widget-button {
    display: none;
  }
}
.b-youcam_widget-actions {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
@media screen and (min-width: 1024px) {
  .b-youcam_widget-actions {
    margin-left: auto;
    margin-right: auto;
  }
  .l-pdp-youcam .b-youcam_widget-actions {
    margin: 0;
    max-width: 320px;
  }
}

/*md

# b-custom_options

Designed to provide styling for custom CTAs on quiz pages.

## Plain option

```html_example
<!--
Classes:
.m-selected - Selected
-->
<div class="b-custom_options b-quiz_page-options m-row">
	<button class="b-custom_options-item [modifier class]">
		<div class="b-custom_options-value">
			<span class="b-custom_options-title">
				<span class="b-custom_options-title_copy">Without icon</span>
			</span>
		</div>
	</button>
	<button class="b-custom_options-item m-with_icon [modifier class]">
		<div class="b-custom_options-value">
			<span class="b-custom_options-icon">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8 4.3C6 4.3 4.3 6 4.3 8S6 11.7 8 11.7 11.7 10 11.7 8 10 4.3 8 4.3M7.5 3h1c.1 0 .3-.1.3-.3V.3q0-.3-.3-.3h-1q-.3 0-.3.3v2.5c0 .1.1.2.3.2M3.8 4.9q.15.15.3 0l.7-.7c.1-.1.1-.3 0-.4L3.1 2a.3.3 0 0 0-.4 0l-.7.7c-.1.1-.1.3 0 .4zM3 8.5v-1c0-.1-.1-.3-.3-.3H.3c-.1 0-.3.1-.3.3v1.1c0 .1.1.3.3.3h2.5c.1-.1.2-.2.2-.4m1.1 2.6a.3.3 0 0 0-.4 0l-1.8 1.8c-.1.1-.1.3 0 .4l.8.7c.1.1.3.1.4 0l1.8-1.8c.1-.1.1-.3 0-.4zM8.5 13h-1c-.1 0-.3.1-.3.3v2.5c0 .1.1.2.3.2h1c.1 0 .3-.1.3-.3v-2.5c0-.1-.1-.2-.3-.2m3.7-1.9a.3.3 0 0 0-.4 0l-.7.7c-.1.1-.1.3 0 .4l1.8 1.8c.1.1.3.1.4 0l.7-.7c.1-.1.1-.3 0-.4zm3.5-3.9h-2.5c-.1 0-.3.1-.3.3v1.1c0 .1.1.3.3.3h2.5c.1 0 .3-.1.3-.3V7.5q0-.3-.3-.3m-3.8-2.3c.1.1.3.1.4 0l1.8-1.8c.1-.1.1-.3 0-.4l-.8-.7a.3.3 0 0 0-.4 0l-1.8 1.8c-.1.1-.1.3 0 .4z"/></svg>
			</span>
			<span class="b-custom_options-title">
				<span class="b-custom_options-title_copy">With icon</span>
			</span>
		</div>
	</button>
	<button class="b-custom_options-item m-with_icon m-tall [modifier class]">
		<div class="b-custom_options-value">
			<span class="b-custom_options-icon">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M8 4.3C6 4.3 4.3 6 4.3 8S6 11.7 8 11.7 11.7 10 11.7 8 10 4.3 8 4.3M7.5 3h1c.1 0 .3-.1.3-.3V.3q0-.3-.3-.3h-1q-.3 0-.3.3v2.5c0 .1.1.2.3.2M3.8 4.9q.15.15.3 0l.7-.7c.1-.1.1-.3 0-.4L3.1 2a.3.3 0 0 0-.4 0l-.7.7c-.1.1-.1.3 0 .4zM3 8.5v-1c0-.1-.1-.3-.3-.3H.3c-.1 0-.3.1-.3.3v1.1c0 .1.1.3.3.3h2.5c.1-.1.2-.2.2-.4m1.1 2.6a.3.3 0 0 0-.4 0l-1.8 1.8c-.1.1-.1.3 0 .4l.8.7c.1.1.3.1.4 0l1.8-1.8c.1-.1.1-.3 0-.4zM8.5 13h-1c-.1 0-.3.1-.3.3v2.5c0 .1.1.2.3.2h1c.1 0 .3-.1.3-.3v-2.5c0-.1-.1-.2-.3-.2m3.7-1.9a.3.3 0 0 0-.4 0l-.7.7c-.1.1-.1.3 0 .4l1.8 1.8c.1.1.3.1.4 0l.7-.7c.1-.1.1-.3 0-.4zm3.5-3.9h-2.5c-.1 0-.3.1-.3.3v1.1c0 .1.1.3.3.3h2.5c.1 0 .3-.1.3-.3V7.5q0-.3-.3-.3m-3.8-2.3c.1.1.3.1.4 0l1.8-1.8c.1-.1.1-.3 0-.4l-.8-.7a.3.3 0 0 0-.4 0l-1.8 1.8c-.1.1-.1.3 0 .4z"/></svg>
			</span>
			<span class="b-custom_options-title">
				<span class="b-custom_options-title_copy">With icon</span>
				<span class="b-custom_options-subtitle">And with subtitle</span>
			</span>
		</div>
	</button>
</div>
```

*/
.b-custom_options {
  display: flex;
  gap: 12px;
}
.b-custom_options.m-row {
  align-items: start;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .b-custom_options.m-row {
    column-gap: 25px;
    row-gap: 28px;
  }
}
.b-custom_options.m-column {
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  .b-custom_options.m-column {
    width: 100%;
  }
}
.b-custom_options-item {
  background-color: #fff;
  color: #22387c;
  transition-property: background-color;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 4px;
  border: 2px solid #22387c;
  cursor: pointer;
  min-width: 192px;
  padding: 11px 24px;
  transition: border cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s, background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-custom_options-item:hover, .b-custom_options-item.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
@media screen and (max-width: 767px) {
  .b-custom_options-item {
    width: 100%;
  }
}
.b-custom_options-item.m-tall.m-with_icon {
  min-width: 255px;
}
.b-custom_options-item[aria-checked=true], .b-custom_options-item.m-selected {
  background: #222f58;
  border-color: #222f58;
}
.b-custom_options.m-column .b-custom_options-item {
  width: 100%;
}
.b-custom_options-value {
  align-items: center;
  color: #22387c;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
}
.b-custom_options-item[aria-checked=true] .b-custom_options-value, .b-custom_options-item.m-selected .b-custom_options-value {
  color: #fff;
}
.b-custom_options-item.m-with_icon .b-custom_options-value {
  justify-content: start;
}
.b-custom_options-item.m-with_icon.m-tall .b-custom_options-value {
  align-items: start;
}
.b-custom_options-icon svg {
  height: 16px;
  margin-right: 16px;
  width: 16px;
}
.b-custom_options-item.m-tall .b-custom_options-icon svg {
  height: 28px;
  position: relative;
  top: 3px;
  width: 28px;
}
.b-custom_options-title {
  display: flex;
  text-align: left;
  flex-direction: column;
}
.b-custom_options-title_copy {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-custom_options-subtitle {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

/*md

```html_example
<div class="b-cookie_banner-inner m-visible" data-widget="cookieBannerOneTrustContenItem" id="globalState" data-initialized="1">
    <div class="b-cookie_banner-content">
        <div class="b-cookie_banner-text">
            <div data-ref="textContent" data-text-length-desktop="127" data-text-length-mobile="127">AbbVie may use and disclose online usage data about you collected automatically through online tracking technologies such as...</div>
        </div>
        <button class="b-cookie_banner-btn_more" type="button" title="read more" aria-label="read more" data-ref="readMoreButton" data-event-click="onReadMoreClick">
            read more
        </button>
        <button class="b-cookie_banner-btn_more" type="button" title="read less" aria-label="read less" data-ref="readLessButton" hidden="" data-event-click="onReadLessClick">
            read less
        </button>
    </div>
    <button type="button" title="Cookie Settings" aria-label="Cookie Settings" data-event-click="onSettingsClick" class="b-cookie_banner-btn_settings">
        Cookies Settings
    </button>
    <button class="b-cookie_banner-btn_close" title="Close" aria-label="Close" data-event-click="onCloseClick" type="button">
        <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false">
    <path d="M7.85487 7L13.7027 1.1C13.8018 1 13.9009 0.8 13.9009 0.7C13.9009 0.5 13.8018 0.4 13.7027 0.2C13.5044 0 13.0088 0 12.8106 0.2L6.96283 6.1L1.11504 0.2C1.01593 0.1 0.817699 0 0.718584 0C0.520354 0 0.322124 0.1 0.223009 0.2C-0.0743363 0.5 -0.0743363 0.9 0.223009 1.1L6.0708 7L0.223009 12.9C0.123894 13 0.0247788 13.2 0.0247788 13.3C0.0247788 13.5 0.123894 13.6 0.223009 13.8C0.421239 14 0.916814 14 1.11504 13.8L6.96283 7.9L12.8106 13.8C12.9097 13.9 13.108 14 13.3062 14C13.5044 14 13.6035 13.9 13.8018 13.8C13.9009 13.7 14 13.5 14 13.3C14 13.1 13.9009 13 13.8018 12.8L7.85487 7Z" fill="currentColor"></path>
</svg>
    </button>
</div>
```

*/
.b-cookie_banner {
  --bottom-offset: 0px;
  bottom: var(--bottom-offset);
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  opacity: 0;
  position: fixed;
  right: 0;
  transform: translateY(100%);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  z-index: 19;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner {
    max-height: calc(100% - var(--bottom-offset));
    overflow-y: auto;
  }
}
.b-cookie_banner.m-active {
  opacity: 1;
  transform: translateY(0);
}
.b-buy_bar_stucks .b-cookie_banner {
  --bottom-offset: 75px;
}
@media screen and (max-width: 1023px) {
  .b-buy_bar_stucks .b-cookie_banner {
    --bottom-offset: 70px;
  }
}
.b-proceed_stucks .b-cookie_banner {
  --bottom-offset: 92px;
}
@media screen and (max-width: 1023px) {
  .b-proceed_stucks .b-cookie_banner {
    --bottom-offset: 107px;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout-sticky_panel .b-cookie_banner {
    --bottom-offset: 70px;
  }
}
.b-cookie_banner-inner {
  background: #fff;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.35);
  display: none;
  padding: 24px 30px;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-inner {
    flex-wrap: wrap;
  }
}
.b-cookie_banner-inner.m-visible {
  display: flex;
}
.b-cookie_banner-content {
  font-size: 14px;
  max-width: 680px;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-content {
    max-width: calc(100% - 60px);
  }
}
.b-cookie_banner-actions_group {
  align-items: center;
  display: flex;
  margin-left: 10px;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-actions_group {
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    order: 3;
  }
}
@media screen and (max-width: 767px) {
  .b-cookie_banner-actions_group {
    justify-content: space-between;
    width: 100%;
  }
}
.b-cookie_banner-action_btn {
  flex: 1 1 auto;
  margin: 0 4px;
  padding: 8px 16px;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-action_btn {
    margin: 0 8px 0 0;
  }
  .b-cookie_banner-action_btn:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-cookie_banner-action_btn {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-cookie_banner-btn_settings {
  margin: auto 20px auto auto;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-btn_settings {
    margin-right: 0;
    margin-top: 20px;
    order: 3;
    width: 100%;
  }
}
.b-cookie_banner-text {
  display: inline;
}
.b-cookie_banner-text > div {
  display: inline;
}
.b-cookie_banner-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
  display: inline;
  font-weight: 700;
}
@media not all and (pointer: coarse) {
  .b-cookie_banner-link:hover {
    text-decoration: none;
  }
}
.b-cookie_banner-link > svg {
  height: 9px;
  width: 15px;
}
.b-cookie_banner-link.b-button svg {
  width: 15px;
}
.b-cookie_banner-link:disabled, .b-cookie_banner-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-cookie_banner-link:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-cookie_banner-link.b-button {
  text-decoration: none;
}
.b-cookie_banner-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-cookie_banner-btn_more {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-cookie_banner-btn_more:hover {
    text-decoration: none;
  }
}
.b-cookie_banner-btn_more > svg {
  height: 9px;
  width: 15px;
}
.b-cookie_banner-btn_more.b-button svg {
  width: 15px;
}
.b-cookie_banner-btn_more:disabled, .b-cookie_banner-btn_more.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-cookie_banner-btn_more:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-cookie_banner-btn_more.b-button {
  text-decoration: none;
}
.b-cookie_banner-btn_more.b-button .b-button-text {
  text-decoration: underline;
}
.b-cookie_banner-btn_close {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
  margin-left: 15px;
}
.b-cookie_banner-btn_close:hover {
  color: #808080;
}
@media screen and (max-width: 1023px) {
  .b-cookie_banner-btn_close {
    margin-left: auto;
  }
}
.b-cookie_banner-btn_close > svg {
  height: 14px;
  width: 14px;
}

#onetrust-banner-sdk {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

@media screen and (max-width: 1023px) {
  .b-checkout_popup {
    padding-top: 0;
  }
}
.b-checkout_popup-window {
  border-radius: 0;
  padding: 0 25px 45px;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup-window {
    margin-top: auto;
    max-width: 100%;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup-window {
    max-width: 745px;
    min-width: 745px;
  }
}
.b-checkout_popup-subscription_header {
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: -20px;
  margin-top: 45px;
  padding-bottom: 25px;
  text-align: center;
}
.b-checkout_popup-subscription_title {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup-subscription_title {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
.b-checkout_popup-subscription_note {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: 15px;
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup-grid {
    column-gap: 45px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
  }
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup-grid {
    display: flex;
    flex-direction: column;
  }
}
.b-checkout_popup-header {
  display: block;
  margin: 0;
  padding-top: 45px;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup-header.m-checkout_popup-header_border {
    border-top: 1px solid #d9d9d9;
    margin-top: 25px;
    padding-top: 20px;
  }
}
.b-checkout_popup-title {
  font-size: 22px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  margin-bottom: 20px;
  text-align: center;
}
.m-registration_popup .b-checkout_popup-title {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .m-guest_checkout .b-checkout_popup-title {
    display: none;
  }
}
.b-dialog.m-select_sample .b-checkout_popup-title {
  margin-top: 0;
  text-align: center;
}
.b-checkout_popup-description {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  margin-bottom: 20px;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .m-guest_checkout .b-checkout_popup-description {
    display: none;
  }
}
.b-checkout_popup .b-form_section {
  margin-bottom: 15px;
}
.b-checkout_popup-reset_password {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 25px;
}
.b-checkout_popup-reset_password .b-form_section {
  margin-bottom: 0;
}
.b-checkout_popup-reset_password .b-link.b-reset_password-btn {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #000;
  position: relative;
  top: 0;
  width: auto;
}
.b-checkout_popup-reset_password .b-form_section-message {
  order: 1;
  width: 100%;
}
.b-checkout_popup-footer {
  display: block;
  margin-top: 0;
}
.b-dialog.m-select_sample .b-checkout_popup-footer {
  margin-top: 0;
}
.b-checkout_popup-info_list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .m-one_time .b-checkout_popup-info_list {
    display: none;
  }
}
.b-checkout_popup-info_icon {
  align-items: center;
  display: flex;
  margin: 0 auto 10px;
  max-width: 32px;
  min-height: 32px;
}
.b-checkout_popup-info_icon svg {
  height: 32px;
}
.b-checkout_popup-info_text {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
}
.b-checkout_popup-button_list {
  margin-top: 20px;
}
.m-one_time .b-checkout_popup-button_list {
  margin-top: 5px;
}
.b-checkout_popup-guest {
  border-top: 1px solid #d9d9d9;
  margin-top: 25px;
  padding-top: 25px;
}
@media screen and (max-width: 1023px) {
  .m-one_time .b-checkout_popup-guest {
    border-bottom: 1px solid #d9d9d9;
    border-top: none;
    padding-bottom: 25px;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup-guest .b-checkout_popup-description {
    display: none;
  }
}
.b-checkout_popup-registration {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup-registration {
    display: none;
  }
}
.b-checkout_popup-registration .b-link.m-primary {
  font-size: inherit;
}
.b-checkout_popup .m-registration_popup .b-form {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup .m-registration_popup .b-form {
    column-gap: 15px;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup .m-registration_popup .b-form {
    column-gap: 25px;
  }
}
.b-checkout_popup .m-registration_popup .b-form-line {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup .m-registration_popup .b-form-line.b-checkout_popup-half_elment {
    width: calc(50% - 7.5px);
  }
}
.b-checkout_popup .m-registration_popup .b-form-line .b-form_section {
  margin-bottom: 20px;
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup .m-registration_popup .b-form-line.m-equal, .b-checkout_popup .m-registration_popup .b-form-line.m-equal-lg {
    width: calc(50% - 12.5px);
  }
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement {
  display: inline;
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
  font-weight: 400;
  width: auto;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link:hover {
    text-decoration: none;
  }
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link > svg {
  height: 9px;
  width: 15px;
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link.b-button svg {
  width: 15px;
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link:disabled, .b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link:hover {
    text-decoration: none;
  }
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-checkout_popup .m-registration_popup .b-account-abbvie_agreement .b-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-checkout_popup .m-registration_popup .b-checkout_popup-footer .b-button {
  margin-top: 15px;
  max-width: 100%;
  width: 100%;
}
.b-checkout_popup .m-registration_popup .b-account-login_terms {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  padding-top: 20px;
  text-align: center;
  width: 100%;
}
.b-checkout_popup .m-registration_popup .b-account-login_terms a {
  font-weight: 400;
  text-decoration: underline;
}
.b-checkout_popup .m-registration_popup .b-account-login_terms a:hover {
  text-decoration: none;
}
.b-checkout_popup .m-registration_popup .b-account-login_terms br {
  display: none;
}
@media screen and (max-width: 1023px) {
  .b-checkout_popup .m-auto-replenish_popup {
    margin-top: 100px;
    max-width: 100%;
    min-width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup .m-auto-replenish_popup {
    max-width: 375px;
    min-width: 375px;
  }
}
.b-checkout_popup .m-auto-replenish_popup .b-checkout_popup-description {
  margin-bottom: 25px;
}
.b-checkout_popup .m-auto-replenish_popup .b-checkout_popup-buttons {
  display: flex;
  flex-direction: column;
}
.b-checkout_popup .m-auto-replenish_popup .b-checkout_popup-buttons .b-button:first-child {
  margin-bottom: 15px;
}
.b-checkout_popup .m-auto-replenish_popup .b-dialog-footer {
  margin-top: 20px;
  text-align: center;
}
.b-checkout_popup .m-auto-replenish_popup .b-dialog-footer .b-link {
  display: inline-block;
  text-decoration: underline;
  width: auto;
}
.b-checkout_popup .m-auto-replenish_popup .b-dialog-footer .b-link:hover {
  text-decoration: none;
}
.b-checkout_popup-col.m-login {
  grid-row: 1/3;
}
@media screen and (max-width: 1023px) {
  .m-one_time .b-checkout_popup-col.m-registration .b-checkout_popup-title {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .m-one_time .b-checkout_popup-col.m-registration .b-checkout_popup-description {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-checkout_popup-col.m-guest_checkout {
    grid-column: 2;
  }
}
@media screen and (max-width: 1023px) {
  .m-one_time .b-checkout_popup-col.m-guest_checkout {
    margin-bottom: -20px;
    order: -1;
  }
}
.m-subscription .b-checkout_popup-col.m-guest_checkout .b-checkout_popup-title {
  display: none;
}
.m-subscription .b-checkout_popup-col.m-guest_checkout .b-checkout_popup-description {
  display: none;
}
.b-checkout_popup.m-subscription .b-reset_password-btn_login {
  background-color: #22387c;
  color: #fff;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup.m-subscription .b-reset_password-btn_login:hover, .b-checkout_popup.m-subscription .b-reset_password-btn_login.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-checkout_popup.m-subscription .b-checkout_popup-button_guest {
  background-color: #fff;
  color: #22387c;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup.m-subscription .b-checkout_popup-button_guest:hover, .b-checkout_popup.m-subscription .b-checkout_popup-button_guest.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-checkout_popup.m-one_time .b-reset_password-btn_login {
  background-color: #fff;
  color: #22387c;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup.m-one_time .b-reset_password-btn_login:hover, .b-checkout_popup.m-one_time .b-reset_password-btn_login.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-checkout_popup.m-one_time .b-checkout_popup-button_guest {
  background-color: #22387c;
  color: #fff;
  transition-property: background-color;
}
@media not all and (pointer: coarse) {
  .b-checkout_popup.m-one_time .b-checkout_popup-button_guest:hover, .b-checkout_popup.m-one_time .b-checkout_popup-button_guest.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
.b-checkout_popup .b-dialog-close {
  right: 15px;
  top: 15px;
}

.b-welcome_popup {
  display: flex;
  height: 100%;
}
.b-welcome_popup-img {
  flex: 0 0 50%;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 767px) {
  .b-welcome_popup-img {
    display: none;
  }
}
.b-welcome_popup-img img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.b-welcome_popup-content {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .b-welcome_popup-content {
    flex: 0 0 50%;
    min-height: 550px;
  }
}
.b-welcome_popup-logo {
  margin: 60px auto 20px;
  width: 235px;
}
@media screen and (min-width: 768px) {
  .b-welcome_popup-logo {
    margin-top: 100px;
  }
}
.b-welcome_popup-step_content {
  padding: 0 20px 20px;
}
.b-welcome_popup-step_content h3 {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  text-transform: uppercase;
}
@media screen and (max-width: 1023px) {
  .b-welcome_popup-step_content h3 {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-welcome_popup-step_content h4 {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-welcome_popup-step_content h4 {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-welcome_popup-step_content h5 {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-welcome_popup-step_content h5 {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-welcome_popup-step_content h6 {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-welcome_popup-step_content h6 {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
.b-welcome_popup-info {
  text-align: center;
}
.b-welcome_popup-description {
  font-size: 14px;
  margin-top: 10px;
}
.b-welcome_popup-actions {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.b-welcome_popup-actions .b-button + .b-button {
  margin-top: 10px;
}
.b-welcome_popup-form {
  margin: 10px 0 0;
}
.b-welcome_popup-submit {
  margin-top: 24px;
  width: 100%;
}
.b-welcome_popup-message_success {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .b-welcome_popup-message_success {
    margin-top: 80px;
  }
}

/*md

# Product tile swatches

Swatch that used on product tile.

This is simplified version of swatch that use links to appropriate product variation.

```html_example
<div class="b-product_tile_swatches">
	<a class="b-product_tile_swatches-swatch m-selected" href="" title="Green color" data-attr-value="Green" data-tau-color-id="Green" data-tau="color_swatch_selected" style="background-color: #2e7d32"></a>
	<a class="b-product_tile_swatches-swatch " href="#" title="Black color" data-attr-value="Black" data-tau-color-id="Black" style="background-color: #000000"></a>
	<a class="b-product_tile_swatches-swatch " href="#" title="White color" data-attr-value="White" data-tau-color-id="White" style="background-color: #FFFFFF"></a>
	<a class="b-product_tile_swatches-leftover" href="#" title="Show all" aria-label="Show all" data-tau="product_color_showAll">+1</a>
</div>
```
*/
.b-product_tile_swatches {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid #e6e6e6;
}
.b-product_tile_swatches-headline {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: normal;
  flex-basis: 100%;
  margin-top: 8px;
}
.b-product_tile_swatches-swatch {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  border: 2px solid #e6e6e6;
  border-radius: 8px;
  padding: 10px 12px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border-color, color;
  color: #222f58;
}
.b-product_tile_swatches-swatch:hover, .b-product_tile_swatches-swatch.m-selected {
  color: #000;
  border-color: #222f58;
  text-decoration: none;
}

/*md

# Variation swatches

## Size swatch
```html_example
<!--
Classes:
.m-disabled - Disabled
.m-checked - Checked
.m-hover - Hovered
.m-disabled.m-checked - Disabled and checked
.m-disabled.m-checked.m-hover - Disabled and checked, Hovered
-->
<button
	id="variation-swatch-button-XSmall"
	role="radio"
	class="b-variation_swatch [modifier class]"
	aria-label="Size XS"
	title="XSmall"
	aria-checked="[true/false]"
	aria-disabled="[true/false]"
>
	<span class="b-variation_swatch-value">
		XS
	</span>
</button>

<button
	id="variation-swatch-button-id"
	role="radio"
	class="b-variation_swatch [modifier class]"
	aria-label="Size N"
	title="Title"
	aria-checked="[true/false]"
	aria-disabled="[true/false]"
>
	<span class="b-variation_swatch-value">
		Wider case
	</span>
</button>
```

*/
.b-variation_swatch {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff;
  border: 1.5px solid #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  height: 44px;
  margin-block-end: 8px;
  margin-inline-end: 8px;
  min-width: 64px;
  padding: 8px 12px;
  -webkit-user-select: none;
          user-select: none;
  transition: background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-variation_swatch-value {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.5px;
  align-items: center;
  color: #222f58;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media not all and (pointer: coarse) {
  .b-variation_swatch:hover:not(.m-disabled), .b-variation_swatch.m-hover:not(.m-disabled) {
    border-color: #abddf9;
    background-color: #abddf9;
  }
}
.b-variation_swatch.m-checked, .b-variation_swatch[aria-checked=true] {
  border-color: #22387c;
  cursor: default;
}
.b-variation_swatch.m-checked .b-variation_swatch-value, .b-variation_swatch[aria-checked=true] .b-variation_swatch-value {
  color: #000;
}
.b-variation_swatch.m-disabled {
  border-color: #b3b3b3;
  color: #b3b3b3;
  overflow: hidden;
  position: relative;
}
.b-variation_swatch.m-disabled::after {
  background: linear-gradient(to top left, transparent 0%, transparent calc(50% - 1px), #b3b3b3 50%, transparent calc(50% + 1px), transparent 100%);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-variation_swatch.m-disabled .b-variation_swatch-value {
  color: #b3b3b3;
}
@media not all and (pointer: coarse) {
  .b-variation_swatch.m-disabled:hover, .b-variation_swatch.m-disabled.m-hover {
    background-color: #abddf9;
  }
}
.b-variation_swatch.m-disabled.m-checked, .b-variation_swatch.m-disabled[aria-checked=true] {
  border-color: #22387c;
}
.b-variation_swatch.m-disabled.m-checked::after, .b-variation_swatch.m-disabled[aria-checked=true]::after {
  background: linear-gradient(to top left, transparent 0%, transparent calc(50% - 1px), #22387c 50%, transparent calc(50% + 1px), transparent 100%);
}

@media screen and (max-width: 1023px) {
  .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view)::after, .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view)::before {
    bottom: -13px;
    content: "";
    display: inline-block;
    height: 2px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 50px;
    z-index: 1;
  }
  .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view)::before {
    background-color: #000;
    transform: translateX(-50px);
  }
  .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view)::after {
    background-color: #808080;
    opacity: 0.35;
  }
  .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view).m-alt_active::before {
    background-color: #808080;
    opacity: 0.35;
  }
  .b-product_tile_alt_view:not(.b-carousel .b-product_tile_alt_view).m-alt_active::after {
    background-color: #000;
    opacity: 1;
  }
}
.b-product_tile_alt_view-track {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-product_tile_alt_view-track {
    display: flex;
  }
  .b-product_tile_alt_view-track:not(.b-carousel .b-product_tile_alt_view-track) {
    -ms-overflow-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .b-product_tile_alt_view-track:not(.b-carousel .b-product_tile_alt_view-track)::-webkit-scrollbar {
    display: none;
  }
}
.b-product_tile_alt_view-item {
  height: 100%;
}
@media screen and (max-width: 1023px) {
  .b-product_tile_alt_view-item {
    min-width: 100%;
    scroll-snap-align: start;
  }
}
@media screen and (min-width: 1024px) {
  .b-product_tile_alt_view-item.m-alt {
    background-color: #fff;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  }
}
@media screen and (min-width: 1024px) {
  .b-product_tile_alt_view:hover .b-product_tile_alt_view-item.m-alt {
    opacity: 1;
  }
}

/*md

# Rating

Designed to provide same styles of rating across different components.

<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <!-- 0 0 16.476 15.677 shape from 0.0 -->
    <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>
    <!-- 0 0 16.476 15.677 shape from 0.0 -->
    <symbol id="star-half">
        <path class="b-rating-empty" 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>
        <path class="b-rating-filled" d="m8.1348 0.19141-2.4434 4.9707-5.6914 0.83594 4.125 4.0078-0.96484 5.6719 4.9746-2.625v-12.861z"></path>
    </symbol>
</svg>

```html_example
<div class="b-rating" title="5 out of 5 Customer Rating">
	<svg class="b-rating-icon" width="100" height="20" viewBox="0 0 100 16" focusable="false">
		<use class="b-rating-filled" href="#star" y="0" x="0.0"></use>
		<use class="b-rating-filled" href="#star" y="0" x="20.0"></use>
		<use class="b-rating-filled" href="#star" y="0" x="40.0"></use>
		<use class="b-rating-filled" href="#star" y="0" x="60.0"></use>
		<use class="b-rating-filled" href="#star" y="0" x="80.0"></use>
	</svg>
	<span class="b-rating-number" data-tau="product_rating">(5)</span>
</div>
```

## Rating with link to product

```html_example
<div class="b-rating" title="3.2 out of 5 Customer Rating">
	<a class="b-rating-link" href="#" title="3.2 out of 5 Customer Rating" aria-label="3.2 out of 5 Customer Rating">
		<svg class="b-rating-icon" width="100" height="20" viewBox="0 0 100 16" focusable="false">
			<use class="b-rating-filled" href="#star" y="0" x="0.0"></use>
			<use class="b-rating-filled" href="#star" y="0" x="20.0"></use>
			<use class="b-rating-filled" href="#star" y="0" x="40.0"></use>
			<use href="#star-half" y="0" x="60.0"></use>
			<use class="b-rating-empty" href="#star" y="0" x="80.0"></use>
		</svg>
		<span class="b-rating-number" data-tau="product_rating">(3.2)</span>
	</a>
</div>
```
*/
.b-rating {
  display: flex;
}
.b-rating-link {
  text-decoration: none;
}
.b-rating-link:hover {
  text-decoration: none;
}
.b-rating-filled {
  fill: #000;
}
.b-rating-empty {
  fill: transparent;
}
.b-rating-number {
  font-weight: 600;
  unicode-bidi: isolate;
}

/*md

# b-price

Designed to provide same styles of pricing across different components without explicit CSS class.
`.b-price` inherit font-size from parent wrapper or general font-size

## Regular price

```html_example
<div class="b-price" data-tau-price="product_price">
	<span class="b-price-item" content="9.99" data-tau-price="new">
		$9.99
	</span>
</div>
```

## Sale price

```html_example
<div class="b-price" data-tau-price="product_price">
	<span class="b-price-to">Was</span>
	<span class="b-price-item m-old" content="11.99" data-tau-price="old">
		$11.99
	</span>
	<span class="b-price-to">, is</span>
	<span class="b-price-item" content="9.99" data-tau-price="new">
		$9.99
	</span>
</div>
```

## Price range

```html_example
<div class="b-price" data-tau-price="product_price">
	<span class="b-price-to">From</span>
	<span class="b-price-item" content="9.99" data-tau-price="new">
		$9.99
	</span>
	<span class="b-price-to">to</span>
	<span class="b-price-divider">-</span>
	<span class="b-price-item" content="11.99" data-tau-price="old">
		$11.99
	</span>
</div>
```

## Free price

```html_example
<div class="b-price" data-tau-price="product_price">
	<span class="b-price-item m-free" content="Free" data-tau-price="new">
		FREE
	</span>
</div>
```

*/
.b-price {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.b-price-item {
  color: #000;
  display: inline-block;
  margin-inline-end: 8px;
  white-space: nowrap;
}
.b-price-item:last-child {
  margin: 0;
}
.b-price-item.m-old {
  font-weight: 400;
  text-decoration: line-through;
}
.b-price-item.m-shipping_discount {
  color: #ed432c;
  font-weight: 400;
}
.b-price-item.m-new {
  color: #ed432c;
}
.b-price.m-huge {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
}
.b-price-divider {
  margin-inline-end: 8px;
}

/*md

# b-promotion

Designed to provide same styles of promotion across different components.

We do not support any HTML in promotion messages.

## Promotion with configured link

```html_example
<div class="b-promotion">
	<div class="b-promotion-message">
		Get 15% off for <a href="#">order</a>
	</div>
</div>
```

## Empty promotion

```html_example
<div class="b-promotion">
	<div class="b-promotion-message"></div>
</div>
```

## Promotion with open dialog button

```html_example
<div class="b-promotion">
	<div class="b-promotion-message">
		Get 15% off for order
	</div>
	<button
		class="b-promotion-details"
		type="button"
		data-widget="emitBusEvent"
		data-bus-event-type="dialog.show"
		data-event-click.prevent="emitBusEvent"
		data-tau="promotion_details_cta"
		data-initialized="1"
	>
		Details
	</button>
</div>
```

*/
.b-promotion {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  color: #000;
  display: flex;
  font-weight: normal;
  position: relative;
}
.b-promotion.m-full {
  width: 100%;
}
.b-cart_product-promotion .b-promotion-message {
  font-weight: normal;
}
.b-promotion-message:empty {
  display: none;
}
.b-promotion-message a {
  color: inherit;
  text-decoration: underline;
}
.b-promotion-details {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  margin-inline-start: 4px;
}
@media not all and (pointer: coarse) {
  .b-promotion-details:hover {
    text-decoration: none;
  }
}
.b-promotion-details > svg {
  height: 9px;
  width: 15px;
}
.b-promotion-details.b-button svg {
  width: 15px;
}
.b-promotion-details:disabled, .b-promotion-details.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-promotion-details:hover {
    text-decoration: none;
  }
}
.b-promotion-details.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-promotion-details.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-promotion-details.b-button .b-button-text {
  text-decoration: underline;
}

/*md

# b-availability

Designed to provide same styles of availability across different components.

```html_example
<div data-ref="container" class="b-availability m-instock" aria-label="Availability">
	<span class="b-availability-instock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd" stroke-width="2">
				<circle cx="10" cy="10" r="9" fill="currentColor" stroke="currentColor"></circle>
				<path stroke="white" d="M6 9.914L10 13 18 2"></path>
			</g>
		</svg>
	</span>

	<span class="b-availability-outofstock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd">
				<circle cx="10" cy="10" r="10" fill="currentColor"></circle>
				<path stroke="white" stroke-linejoin="round" stroke-width="2" d="M0 0L8 8M0 8L8 0" transform="translate(6 6)"></path>
			</g>
		</svg>
	</span>

	<div class="b-availability-status">
		In Stock
	</div>
</div>
```

```html_example
<div data-ref="container" class="b-availability m-outofstock" aria-label="Availability">
	<span class="b-availability-instock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd" stroke-width="2">
				<circle cx="10" cy="10" r="9" fill="currentColor" stroke="currentColor"></circle>
				<path stroke="white" d="M6 9.914L10 13 18 2"></path>
			</g>
		</svg>
	</span>

	<span class="b-availability-outofstock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd">
				<circle cx="10" cy="10" r="10" fill="currentColor"></circle>
				<path stroke="white" stroke-linejoin="round" stroke-width="2" d="M0 0L8 8M0 8L8 0" transform="translate(6 6)"></path>
			</g>
		</svg>
	</span>

	<div class="b-availability-status">
		Out Of Stock
	</div>
</div>
```

```html_example
<div data-ref="container" class="b-availability m-lowinstock" aria-label="Availability">
	<span class="b-availability-instock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd" stroke-width="2">
				<circle cx="10" cy="10" r="9" fill="currentColor" stroke="currentColor"></circle>
				<path stroke="white" d="M6 9.914L10 13 18 2"></path>
			</g>
		</svg>
	</span>

	<span class="b-availability-outofstock_icon">
		<svg width="20" height="20" viewBox="0 0 20 20" focusable="false">
			<g fill="none" fill-rule="evenodd">
				<circle cx="10" cy="10" r="10" fill="currentColor"></circle>
				<path stroke="white" stroke-linejoin="round" stroke-width="2" d="M0 0L8 8M0 8L8 0" transform="translate(6 6)"></path>
			</g>
		</svg>
	</span>

	<div class="b-availability-status">
		5 Items In Stock
	</div>
</div>
```

*/
.b-availability {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
}
.b-availability-instock_icon, .b-availability-outofstock_icon {
  align-items: center;
  display: none;
  margin-inline-end: 8px;
}
.b-availability.m-instock {
  color: #2bb229;
}
.b-availability.m-instock .b-availability-instock_icon {
  display: flex;
}
.b-availability.m-outofstock {
  color: #ed432c;
}
.b-availability.m-outofstock .b-availability-outofstock_icon {
  display: flex;
}
.b-availability.m-lowinstock {
  display: none;
}
.b-product_details-availability .b-availability {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-cart_product-availability .b-availability {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.l-pdp-main.m-bundle .b-availability {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

/*md

```html_example
<div class="b-secure_shopping">
	<span class="b-secure_shopping-icon">$tools.bindIcon('secureShopping')</span>
	<span class="b-secure_shopping-info">Secure Shopping</span>
</div>
```

*/
.b-secure_shopping {
  display: flex;
}
.b-secure_shopping-icon svg {
  height: 19px;
  width: 18px;
}
.b-secure_shopping-info {
  font: 300 14px/17px "minerva-modern", "Georgia", "DejaVu Serif", serif;
  margin-inline-start: 10px;
  margin-top: 5px;
}

/*md

# b-toggle

Designed to provide styling for togglable blocks.

## Togglable block
(Click the link/close cta to toggle the block)

```html_example
<!--
Classes:
.m-show - Opened Toggle block
-->
<div class="b-toggle" data-widget="toggle">
	<button class="b-toggle-open_button" data-ref="open-btn">Why do we ask?</button>
    <div class="b-toggle-container [modifier class]" data-ref="toggle-content">
		<button class="b-toggle-close_button" data-ref="close-btn">Close</button>
		<div>Age is one of the most common causes of dry eyes, because we can produce fewer tears as we get older.</div>
	</div>
</div>
```

*/
.b-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b-toggle-open_button {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #222f58;
  margin-bottom: 15px;
}
@media not all and (pointer: coarse) {
  .b-toggle-open_button:hover {
    text-decoration: none;
  }
}
.b-toggle-open_button > svg {
  height: 9px;
  width: 15px;
}
.b-toggle-open_button.b-button svg {
  width: 15px;
}
.b-toggle-open_button:disabled, .b-toggle-open_button.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-toggle-open_button:hover {
    text-decoration: none;
  }
}
.b-toggle-open_button.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-toggle-open_button.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-toggle-open_button.b-button .b-button-text {
  text-decoration: underline;
}
.b-toggle-container {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fff;
  border-radius: 8px;
  border: none;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 0;
  max-height: 0;
  max-width: 650px;
  opacity: 0;
  overflow: hidden;
  padding-bottom: 0;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 0;
  transition: all cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
@media screen and (max-width: 1023px) {
  .b-toggle-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.b-toggle-container.m-show {
  border: 1px solid #e6e6e6;
  margin-bottom: 15px;
  max-height: none;
  opacity: 1;
  padding-bottom: 15px;
  padding-top: 15px;
}
.b-toggle-close_button {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  display: inline-flex;
  gap: 5px;
  align-self: end;
  color: #222f58;
  text-decoration: underline;
  cursor: pointer;
}
.b-toggle-close_button::before {
  background-color: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 18px;
  -webkit-mask-image: url("../images/icons-sprite.svg#close-rounded-16");
          mask-image: url("../images/icons-sprite.svg#close-rounded-16");
  -webkit-mask-position: 50% 50%;
          mask-position: 50% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  width: 18px;
}
@media not all and (pointer: coarse) {
  .b-toggle-close_button:hover {
    text-decoration: none;
  }
}

.b-search_input {
  position: relative;
}
.b-search_input-submit {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
  color: #000;
  display: block;
  background-color: transparent;
}
.b-search_input-submit:hover {
  color: #808080;
}
.b-search_input-submit > svg {
  width: 16px;
  height: 16px;
}

.b-search_dialog {
  height: 100%;
  width: 100%;
  color: #000;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}
.b-search_dialog-inner {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  cursor: initial;
  max-height: 100%;
  position: relative;
  width: 100%;
  z-index: 10;
  padding-top: 32px;
  padding-bottom: 32px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-search_dialog-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-search_dialog-inner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-search_dialog-inner.m-full {
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .b-search_dialog-inner {
    padding: 24px 20px;
  }
}
.b-search_dialog-inner_top {
  display: flex;
  justify-content: right;
}
@media screen and (max-width: 1023px) {
  .b-search_dialog-inner_top {
    z-index: 10;
    position: absolute;
    top: 22px;
    right: 19px;
  }
  .b-search_dialog-inner_top .b-search_dialog-cancel > span {
    display: none;
  }
}
.b-search_dialog-cancel.b-button.m-transparent {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: normal;
  color: inherit;
  align-items: flex-end;
  padding: 0;
  height: auto;
  overflow: visible;
}
.b-search_dialog-cancel.b-button.m-transparent > .b-search_dialog-cancel-icon > svg {
  width: 24px;
  height: 24px;
  margin-left: 16px;
}
@media screen and (max-width: 1023px) {
  .b-search_dialog-cancel.b-button.m-transparent > .b-search_dialog-cancel-icon > svg {
    width: 16px;
    height: 16px;
    margin-left: 0;
  }
}
@media screen and (max-width: 1023px) {
  .b-search_dialog-cancel.b-button.m-transparent > .b-search_dialog-cancel-icon > span {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-search_dialog-cancel.b-button.m-transparent > .b-search_dialog-cancel-icon {
    padding: 5px;
    height: auto;
    width: auto;
  }
}

@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-container-pointer-events {
  touch-action: pan-y;
}

.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}

.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}

.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.b-suggestions {
  overflow-y: auto;
  position: relative;
  right: 0;
  width: 100%;
  z-index: 1;
}
.b-suggestions-option.m-focused {
  border: 3px solid #da582f;
  outline: none !important;
}
.b-suggestions-empty_description {
  padding-bottom: 28px;
}
.b-suggestions-inner {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1440px;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-inner > .b-suggestions-section.m-guess {
    padding-bottom: 15px;
  }
}
.b-suggestions-inner.m-empty {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  font-size: 20px;
  justify-content: center;
  max-width: 915px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-suggestions-inner.m-empty {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 1367px) {
  .b-suggestions-inner.m-empty {
    max-width: 1440px;
  }
}
.b-suggestions.m-loading .b-suggestions-inner {
  opacity: 0.3;
  pointer-events: none;
}
.b-suggestions-inner_group {
  display: flex;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-inner_group {
    flex-direction: column;
    gap: 24px;
  }
  .b-suggestions-inner_group > .b-suggestions-section.m-categories {
    min-height: 25px;
  }
}
.b-suggestions-inner_empty_wrapper {
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-suggestions-inner_empty_wrapper {
    margin: 0 auto;
    max-width: 915px;
    width: 100%;
  }
}
.b-suggestions-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  color: #222f58;
  padding-bottom: 32px;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-suggestions-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    padding-bottom: 8px;
  }
}
.b-suggestions-title_query {
  color: #000;
}
.b-suggestions-title_initial {
  color: #000;
}
.b-suggestions-slider_content {
  display: flex;
  flex-direction: column;
}
.b-suggestions-section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
  width: 100%;
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-section {
    margin-bottom: 0;
  }
}
.b-suggestions-section:last-of-type {
  margin-bottom: 0;
}
.b-suggestions-section.m-categories {
  display: flex;
  flex-basis: 31%;
}
.b-suggestions-section.m-categories .b-suggestions-title {
  margin-bottom: 0;
  padding-bottom: 20px;
}
.b-suggestions-section.m-products {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  margin-bottom: 0;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-section.m-products {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, calc(50% - 8px));
  }
}
.b-suggestions-footer {
  display: flex;
  gap: 8px;
  flex-direction: row;
  justify-content: center;
  padding-top: 24px;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-footer .b-button.m-secondary {
    display: none;
  }
}
.b-suggestions-section_initial {
  max-width: 915px;
  width: 100%;
}
.b-suggestions-section_slider {
  width: 100%;
}
.b-suggestions-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-suggestions-link:hover {
    text-decoration: none;
  }
}
.b-suggestions-link > svg {
  height: 9px;
  width: 15px;
}
.b-suggestions-link.b-button svg {
  width: 15px;
}
.b-suggestions-link:disabled, .b-suggestions-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.b-suggestions-link_initial svg {
  padding-left: 10px;
}
.b-suggestions-img_initial {
  height: 280px;
  object-fit: cover;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-suggestions-img_initial {
    height: 330px;
  }
}
.b-suggestions-message {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}

.b-suggestions_category {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 2;
  letter-spacing: normal;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_category {
    font-size: 16px;
    color: #222f58;
  }
}

.b-suggestions_guess {
  font-size: 18px;
  font-weight: 300;
  margin-bottom: 0;
  text-decoration: none;
}
.b-suggestions_guess.m-focused, .b-suggestions_guess:hover {
  text-decoration: none;
}
.b-suggestions_guess-correction_wrap {
  color: #000;
  font-weight: 400;
}
.b-suggestions_guess-correction {
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  unicode-bidi: isolate;
}
.b-suggestions_guess.m-focused .b-suggestions_guess-correction, .b-suggestions_guess:hover .b-suggestions_guess-correction {
  color: #4d4d4d;
}

.b-suggestions_product {
  position: relative;
  color: #000;
  display: flex;
  flex-basis: 25%;
  flex-direction: column;
  text-decoration: none;
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #e6e6e6;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product {
    background: none;
    border: none;
  }
}
.b-suggestions_product:hover {
  text-decoration: none;
}
.b-suggestions_product-picture_wrap {
  width: 100%;
  height: 232px;
  margin-bottom: 18px;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product-picture_wrap {
    padding: 10px 0;
    height: 160px;
    margin-bottom: 11px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #e6e6e6;
  }
}
.b-suggestions_product-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
.b-suggestions_product-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product-title {
    font-size: 16px;
  }
}
.b-suggestions_product-desc {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: #4d4d4d;
}
.b-suggestions_product-info {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 16px 20px;
}
.b-suggestions_product-info > .b-badges-item {
  margin-bottom: 8px;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product-info {
    padding: 0;
  }
}
.b-suggestions_product-price {
  margin-top: 8px;
}
@media screen and (max-width: 1023px) {
  .b-suggestions_product .b-badges-item {
    display: none;
  }
}

@media screen and (min-width: 1024px) {
  .b-header_track_order {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-header_track_order {
    font-size: 20px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    text-decoration: none;
    width: 100%;
    color: #222f58;
    box-shadow: none;
    padding: 0 4px;
  }
  .b-header_track_order:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 1023px) and (max-width: 1023px) {
  .b-header_track_order {
    font-size: 18px;
    line-height: 26px;
  }
}
.b-header_track_order-icon {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
}
.b-header_track_order-icon:hover {
  color: #808080;
}

.b-footer {
  background: linear-gradient(90deg, #042645 0%, #222f58 100%);
  color: #fff;
  position: relative;
}
.b-footer-container {
  margin: 0 auto;
  max-width: 1440px;
}
.b-buy_bar_stucks .b-footer-container {
  padding-bottom: 85px;
}
.b-footer-bg {
  background: linear-gradient(to bottom, transparent 70%, transparent 70%), linear-gradient(90deg, #042645 0%, #222f58 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 30%;
  height: 0;
  overflow: hidden;
  padding: 0 0 37%;
  position: relative;
  top: 1px;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .b-footer-bg {
    padding: 0 0 18.4%;
  }
}
.b-footer-bg img {
  clip-path: url("#wavesClip");
  height: 100%;
  left: 0;
  max-width: none;
  position: absolute;
  top: 0;
  width: 200%;
}
@media screen and (min-width: 768px) {
  .b-footer-bg img {
    height: 100%;
    width: 100%;
  }
}
.b-footer-top {
  padding: 24px;
}
@media screen and (max-width: 1023px) {
  .b-footer-top {
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-top {
    padding: 65px 25px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-top {
    padding: 65px 60px 68px;
  }
}
.b-footer-holder {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-footer-holder {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-footer-holder {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-footer-holder.m-full {
  padding: 0;
}
.b-footer-content {
  display: flex;
  flex-direction: column-reverse;
  margin-inline: auto;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-footer-content {
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-content {
    flex-flow: row wrap;
    justify-content: space-around;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-content {
    justify-content: normal;
  }
}

.b-footer_nav {
  --g-accordion__border: #fff;
}
@media screen and (min-width: 1024px) {
  .b-footer_nav {
    display: flex;
    padding: 20px 15px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_nav {
    padding: 20px 20px 20px 80px;
  }
}
.b-footer_nav-title {
  font-size: 20px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-title {
    margin-bottom: 6px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-button {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-footer_nav-button {
    font-size: 18px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.5px;
    border-top: 1px solid var(--g-accordion__border, #ccc);
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: 24px 16px 24px 8px;
    width: 100%;
  }
  .b-footer_nav-button[aria-expanded=true]::after {
    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M16 8.8H0V7.3h16z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
    background-size: 100%;
  }
  .b-footer_nav-button::after {
    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 version%3D%221%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E%3Cpath fill%3D%22%23fff%22 d%3D%22M7.3 7.3V0h1.5v7.3H16v1.5H8.8V16H7.3V8.8H0V7.3z%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
    background-size: 100%;
    content: "";
    height: 16px;
    width: 16px;
  }
}
.b-footer_nav-heading {
  display: none;
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-heading {
    display: block;
  }
}
@media screen and (max-width: 1023px) {
  .b-footer_nav-content {
    opacity: 0;
    overflow: hidden;
    position: relative;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: height, opacity;
    visibility: hidden;
    padding: 0 8px;
  }
  .b-footer_nav-content[aria-hidden=false] {
    opacity: 1;
    visibility: visible;
  }
}
@media screen and (max-width: 1023px) {
  .b-footer_nav-list {
    overflow: hidden;
    margin-top: -8px;
    padding-bottom: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-list {
    margin-right: 15px;
    width: 180px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_nav-list {
    width: 196px;
  }
}
.b-footer_nav-item {
  display: block;
  margin-bottom: 4px;
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-item {
    margin-bottom: 0;
  }
}
.b-footer_nav-link {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: normal;
  text-transform: capitalize;
}
@media screen and (max-width: 1023px) {
  .b-footer_nav-link {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: normal;
  }
}
.b-footer_nav-column {
  margin-right: 15px;
}
@media screen and (max-width: 1023px) {
  .b-footer_nav-column {
    margin-right: 0;
  }
  .b-footer_nav-column:last-child {
    border-bottom: 1px solid var(--g-accordion__border, #ccc);
  }
}

@media screen and (max-width: 1023px) {
  .b-footer_info {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    text-align: center;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_info {
    border-right: 1px solid #000;
    flex-basis: 28%;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_info {
    flex-basis: 36%;
    width: 380px;
  }
}
.b-footer_info-number {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.b-footer_social-logo {
  margin-bottom: 18px;
}
.b-footer_social-logo > svg {
  fill: #fff;
  width: 200px;
}
.b-footer_social-list {
  display: flex;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .b-footer_social-list {
    justify-content: center;
    padding: 28px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_social-list {
    padding: 30px 0;
  }
}
.b-footer_social-item {
  margin-right: 24px;
}
.b-footer_social-item:last-child {
  margin-right: 0;
}
@media not all and (pointer: coarse) {
  .b-footer_social-link:hover > svg {
    fill: #ccc;
  }
}
.b-footer_social-link > svg {
  fill: #fff;
  height: 24px;
  transition: fill cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  width: 24px;
}

.b-footer_policies {
  padding-bottom: 16px;
}
@media screen and (max-width: 1023px) {
  .b-footer_policies {
    padding: 6px 12px 18px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_policies {
    border-top: 1px solid #000;
    padding: 24px;
  }
}
.b-footer_policies-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .b-footer_policies-item {
    text-align: center;
    padding: 2px 8px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_policies-item {
    padding-right: 24px;
  }
  .b-footer_policies-item:first-child {
    padding-left: 0;
  }
  .b-footer_policies-item:last-child {
    padding-right: 0;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_policies-item {
    padding-right: 32px;
  }
}
.b-footer_policies-item.m-privacy_choices svg {
  height: 12px;
  margin-left: 3px;
  width: 28px;
}
.b-footer_policies-link {
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-transform: capitalize;
}
@media screen and (max-width: 1023px) {
  .b-footer_policies-link {
    font-size: 13px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
@media not all and (pointer: coarse) {
  .b-footer_policies-link:hover {
    text-decoration: none;
  }
}
.b-footer_policies.m-simplified {
  padding: 10px 0;
}
.b-footer_policies.m-simplified .b-footer_policies-list {
  justify-content: flex-start;
}
@media screen and (max-width: 1023px) {
  .b-footer_policies.m-simplified .b-footer_policies-list {
    justify-content: center;
  }
}

/* stylelint-disable selector-class-pattern , declaration-no-important */
#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
  border: none !important;
  color: #000 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 6px 0 !important;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s !important;
  transition-property: color !important;
}
#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
  background-color: transparent !important;
  color: #000 !important;
}

/* stylelint-enable selector-class-pattern , declaration-no-important */
.b-footer-secure_shopping {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .b-footer-secure_shopping {
    order: 1;
  }
}

.b-copyright {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.5px;
  padding-bottom: 0;
  text-align: left;
}

.b-prt_number {
  padding: 16px 0 0;
}
@media screen and (max-width: 1023px) {
  .b-prt_number {
    padding: 20px 0 14px;
    text-align: center;
  }
}
@media screen and (max-width: 1023px) {
  .b-footer.m-simple .b-prt_number {
    padding-bottom: 36px;
  }
}

/*md

# b-notification_panel

```html_example
<div style="position: static;" data-ref="container" aria-atomic="true" aria-describedby="consent-dialog-description" aria-labelledby="consent-dialog-label" aria-modal="false" class="b-notification_panel m-visible" data-tau="consent-dialog" id="consent-dialog" role="alertdialog">
    <section class="b-notification_panel-wrapper">
        <div class="b-notification_panel-inner">
            <div class="b-notification_panel-content">
                <div class="b-content_asset">
                    <h2 id="consent-dialog-label" class="b-notification_panel-title">Consent tracking</h2>
                    <p id="consent-dialog-description">
                        This website uses cookies and other technologies to personalize content and to show you more personalized ads (for example, Google Ads and Facebook) on this and other websites, as well as provide you with social media features on
                        this website (such as, Facebook, Twitter, LinkedIn). By clicking “Accept” you understand that you are directing Allergan to disclose your personal information, including internet tracking data (like cookies and the IP address you
                        used to access this website), to these third parties for the purposes stated above.
                        <br />
                        <br />
                        You can still use this website if you do not click “Accept,” but your experience may be different. For more information, including a list of the categories of third parties to whom we disclose your personal information, please
                        refer to our
                        <a href="https://www.dev-refresheyedrops.com/on/demandware.store/Sites-RME-US-Site/en_US/Page-Show?cid=privacy-policy" target="_blank" rel="noreferrer"
                            >California Privacy Policy</a
                        >
                        or for additional options please check your browser’s settings.
                    </p>
                </div>
            </div>
        </div>
        <div class="b-notification_panel-control">
            <button class="b-notification_panel-button b-button m-outline m-button_accept" aria-controls="consent-dialog" type="button" data-event-click="accept" data-tau="consent-dialog_accept">Accept</button>

            <button class="b-notification_panel-button m-button_more" aria-controls="consent-dialog" type="button" data-event-click="showMore" data-tau="consent-show_more">Show More</button>
        </div>
    </section>
</div>
```

*/
.b-notification_panel {
  background: #f9f9f9;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 19;
}
.b-notification_panel.m-visible {
  display: block;
}
.b-notification_panel-wrapper {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  align-items: flex-end;
  display: flex;
  margin: 20px auto;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-notification_panel-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-notification_panel-wrapper {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-notification_panel-wrapper.m-full {
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .b-notification_panel-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }
}
.b-notification_panel-inner {
  align-items: flex-end;
  color: #000;
  display: flex;
}
@media screen and (max-width: 1023px) {
  .b-notification_panel-inner {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.b-notification_panel-title {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-notification_panel-content {
  color: #4d4d4d;
  flex: 1;
  max-height: 42px;
  overflow: hidden;
  transition: max-height cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media screen and (max-width: 1023px) {
  .b-notification_panel-content {
    margin-bottom: 20px;
    width: 100%;
  }
}
.m-active .b-notification_panel-content {
  max-height: 500px;
}
.b-notification_panel-control {
  align-items: center;
  display: flex;
}
.b-notification_panel a {
  color: inherit;
  display: inline-block;
  text-decoration: underline;
  white-space: nowrap;
}
.b-notification_panel a:hover, .b-notification_panel a:focus {
  opacity: 0.8;
}
@media screen and (max-width: 1023px) {
  .b-notification_panel-button {
    margin-inline-end: 0;
    white-space: normal;
    width: 48%;
  }
}
.b-notification_panel-button.m-button_accept {
  height: 42px;
  margin-left: 16px;
  min-width: 216px;
  padding: 10px 44px 6px;
}
@media screen and (max-width: 1023px) {
  .b-notification_panel-button.m-button_accept {
    margin-left: 0;
    min-width: 168px;
  }
}
.b-notification_panel-button.m-button_more {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 300;
  text-decoration: underline;
  margin-left: 30px;
  padding: 0 14px 0 0;
  position: relative;
  width: 78px;
}
@media not all and (pointer: coarse) {
  .b-notification_panel-button.m-button_more:hover {
    text-decoration: none;
  }
}
.b-notification_panel-button.m-button_more > svg {
  height: 9px;
  width: 15px;
}
.b-notification_panel-button.m-button_more.b-button svg {
  width: 15px;
}
.b-notification_panel-button.m-button_more:disabled, .b-notification_panel-button.m-button_more.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-notification_panel-button.m-button_more:hover {
    text-decoration: none;
  }
}
.b-notification_panel-button.m-button_more:disabled, .b-notification_panel-button.m-button_more.m-disabled {
  color: rgba(0, 0, 0, 0.5);
}
.b-notification_panel-button.m-button_more.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-notification_panel-button.m-button_more.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-notification_panel-button.m-button_more.b-button .b-button-text {
  text-decoration: underline;
}
.b-notification_panel-button.m-button_more::before, .b-notification_panel-button.m-button_more::after {
  background-color: #000;
  content: "";
  height: 9px;
  position: absolute;
  top: 3px;
  width: 1px;
}
.b-notification_panel-button.m-button_more::before {
  right: 4px;
  transition: transform ease-in-out 0.3s;
}
.m-active .b-notification_panel-button.m-button_more::before {
  transform: scale3d(0, 2, 0);
}
.b-notification_panel-button.m-button_more::after {
  right: 4px;
  transform: rotate(90deg);
}

.b-product_actions {
  margin: 21px 0 17px;
}
.b-product_actions-inner {
  display: flex;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-product_actions-inner {
    flex-direction: column;
    gap: 16px;
  }
}
@media screen and (min-width: 1024px) {
  .m-in_store_only .b-product_actions-inner {
    flex-direction: row-reverse;
  }
}
.b-product_actions-cta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 60px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-product_actions-cta {
    padding-left: 0;
  }
}
.b-product_actions-status {
  font-weight: 600;
  margin: 20px 0 0;
  width: 100%;
}
.b-product_actions-success_msg {
  background: #da582f;
  font-weight: 300;
  padding: 16px;
}
.b-product_actions-success_title {
  display: block;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}
.b-product_actions-success_value {
  color: #4d4d4d;
}
.b-product_actions-error_msg {
  color: #ed432c;
}
.b-product_actions-promotion {
  display: contents;
  text-align: left;
}
.b-product_actions-promotion_highlighted {
  font-weight: 400;
}
.b-product_actions-recurring_order {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-product_actions-recurring_order_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
}
@media not all and (pointer: coarse) {
  .b-product_actions-recurring_order_link:hover {
    text-decoration: none;
  }
}
.b-product_actions-recurring_order_link > svg {
  height: 9px;
  width: 15px;
}
.b-product_actions-recurring_order_link.b-button svg {
  width: 15px;
}
.b-product_actions-recurring_order_link:disabled, .b-product_actions-recurring_order_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-product_actions-recurring_order_link:hover {
    text-decoration: none;
  }
}
.b-product_actions-recurring_order_link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-product_actions-recurring_order_link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-product_actions-recurring_order_link.b-button .b-button-text {
  text-decoration: underline;
}
@media screen and (min-width: 1024px) {
  .b-product_actions-recurring_order_link {
    font-size: 14px;
  }
}
.b-product_actions-print_coupon {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: normal;
  align-self: flex-start;
  color: #22387c;
  display: inline-block;
  padding: 0;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-product_actions-print_coupon:hover {
    text-decoration: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-product_actions-print_coupon {
    position: absolute;
    top: 55px;
  }
  .m-in_store_only .b-product_actions-print_coupon {
    position: relative;
    top: 0;
    margin: auto;
    min-width: 155px;
  }
}
.m-in_store_only .b-product_actions-online {
  display: none;
}
.b-product_actions-subscription_label {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  color: #4d4d4d;
  display: inline-block;
}
.b-product_actions .b-tab_panel {
  margin-top: -18px;
}

.b-product_actions .ps-widget[data-ps-sku],
.b-product_actions .ps-widget[ps-sku],
.b-product_actions .ps-widget[ps-sku]:hover {
  background-color: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  left: 0;
  line-height: 56px;
  position: absolute;
  right: 0;
}
.b-product_actions .ps-button-label {
  display: block;
  text-align: center;
  width: 100%;
}

.ps-open .b-highlighter {
  z-index: 2000;
}

.b-wishlist_button {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  letter-spacing: 0.036em;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: color, fill;
}
.b-wishlist_button:hover {
  color: #4d4d4d;
}
.b-wishlist_button[aria-busy=true] {
  cursor: wait;
  pointer-events: none;
}
.b-wishlist_button[aria-pressed=true] {
  color: #ed432c;
}
.b-wishlist_button[aria-pressed=true] svg {
  color: #ed432c;
}
.b-wishlist_button-icon {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
}
.b-wishlist_button-icon:hover {
  color: #808080;
}
.b-wishlist_button-icon:hover {
  color: inherit;
}
.b-wishlist_button use {
  color: inherit;
  fill: none;
}
.b-wishlist_button[aria-pressed=true] use {
  color: #ed432c;
  fill: #ed432c;
}

.b-wishlist_button.m-tile {
  left: 0;
  position: absolute;
  top: 0;
}

@media screen and (min-width: 1024px) {
  .b-header_wishlist {
    align-items: center;
    -webkit-appearance: none;
            appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 24px;
    justify-content: center;
    text-align: center;
    width: 24px;
  }
  .b-header_wishlist:hover {
    color: #808080;
  }
}
@media screen and (max-width: 1023px) {
  .b-header_wishlist {
    font-size: 20px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    text-decoration: none;
    width: 100%;
    color: #222f58;
    box-shadow: none;
    padding: 0 4px;
  }
  .b-header_wishlist:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 1023px) and (max-width: 1023px) {
  .b-header_wishlist {
    font-size: 18px;
    line-height: 26px;
  }
}
.b-header_wishlist-icon {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
}
.b-header_wishlist-icon:hover {
  color: #808080;
}
.b-header_wishlist-icon > svg {
  height: 20px;
  width: 20px;
}
.b-header_wishlist.m-active .b-header_wishlist-icon {
  animation: heart-bit ease-out 1s;
  animation-delay: 2s;
  color: #ed432c;
  fill: #ed432c;
}
.b-header_wishlist-copy {
  display: none;
}
.b-menu_panel .b-header_wishlist-copy {
  display: block;
}

.b-afterpay_widget {
  font-weight: 400;
}
.b-cart_product_afterpays .b-afterpay_widget {
  margin-top: 10px;
}
.m-hide-icon .b-afterpay_widget {
  align-items: baseline;
}
.b-afterpay_widget-placement {
  --logo-badge-width: 72px;
  --messaging-line-height: 1.5;
  font-weight: normal;
  margin: 0;
  text-align: left;
}
.m-autoreplenish .b-afterpay_widget-placement {
  --messaging-font-size: 0;
  margin-bottom: 0;
  margin-right: 5px;
  margin-top: 2px;
  position: relative;
}
.b-cart_product_afterpays .b-afterpay_widget-placement {
  margin-top: 4px;
}
.b-afterpay_widget.m-autoreplenish {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}
.b-afterpay_widget-treshold_msg {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-right: 5px;
}
.b-afterpay_widget-icon {
  margin-left: 5px;
  position: relative;
  top: 3px;
}
.b-product_details-form_price_promo_block .b-afterpay_widget-icon {
  margin-left: 2px;
}
.m-autoreplenish .b-afterpay_widget-icon {
  top: 7px;
}
.m-hide-icon .b-afterpay_widget-icon {
  display: none;
}
.b-afterpay_widget-autoreplenish_msg {
  font-size: 16px;
}

/* stylelint-disable-next-line */
afterpay-modal {
  position: relative;
  z-index: 15;
}

:root {
  --page_visibility: visible;
}

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