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

# Palette

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

* Palette is general set of colors. It could be used directly if you do not have themes.
* Applied colors designed as layer of abstraction to have ability to overwrite it on brand level.

All themes have individual logic so it almost impossible to implement some single
universal approach. Launch 360 provide basic tools for further customization
depending of your requirements.

Please see _colors.md for more information about themes.

*/
/*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

# Breakpoints

## Launch 360 breakpoints

Launch 360 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

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

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

## Supported screen scaling

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

*/
/*md
@no-stat

# Media queries (breakpoints)

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

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

## Configuration

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

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

This is how `$media` map looks:

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

## Usage

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

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

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

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

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

*/
/*md
@no-stat

# Z-indexes

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

## Usage

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

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

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

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

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

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

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

*/
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

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

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

### Gaps / margin / column span configuration:

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

## Working with grids

### Development approaches

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

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

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

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

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

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

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

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

# grid-* (grid config get functions)

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

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

## Usage

```scss

// Configuration:

$grids: (
	default: (
		grid-columns: ('xl': 12,   'lg': 12,   'md': 12,   'sm': 6),
		grid-gutter:  ('xl': 20px, 'lg': 20px, 'md': 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);
	}
}
```
*/
/*md
@no-stat

# adjust-color-to-bg

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

It is especially useful for crating flexible themes.

## Arguments

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

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

## Usage

```scss
.component {
	color: adjust-color-to-bg($color-bg-header-line-1);

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

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

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

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

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

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

# grid-span

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

It returns value in percents.

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

### Parameters

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

## Examples

### Flex-basis example

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

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

### Floated items example

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

### Inline-block items example

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

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

*/
/*md
@no-stat

# aspect-ratio

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

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

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

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

## Arguments

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

=> percentage

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

## Usage

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

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

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

*/
/*md
@no-stat

# a11y-color

This function is used to adjust the text color contrast
based on the provided background color according to the WCAG AA contrast criteria (> 4.5)
*/
/*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 losing 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

# Icons from external SVG sprite (example)

`icon` mixin designed to insert an SVG icon symbol into `::before` or `::after` pseudo-elements.

Please pay attention that external SVG urls not supported in IE.

---

This mixin could come with JS automation of SVG preparation. Please ping **V.Ulanov** for details.

## Arguments

This mixin takes 4 arguments:

* icon name (ID attribute of a `<symbol/>` tag)
* icon width
* icon height
* position (before or after)

Also you can put a @content block for this mixin

## Usage

To add an icon:

* you have to manually add SVG to '../images/icons-sprite.svg' file as a symbol
* assign ID to the symbol
* add `<use/>` tag inside the sprite

To use an icon:

```scss
@include icon(icon-2);
```

Where icon name is a symbol ID in SVG sprite.

## SVG sprite template and example

```xml
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<symbol id="icon-1" viewBox="0 0 20 20">
		<line stroke="black" y1="10" x2="10" y2="0" />
		<line stroke="black" x1="0" y1="0" x2="10" y2="10" />
	</symbol>

	<symbol id="icon-2" viewBox="0 0 10 10" preserveAspectRatio="none">
		<g stroke="black" vector-effect="non-scaling-stroke">
			<line x1="0" y1="10" x2="10" y2="0" />
			<line x1="0" y1="0" x2="10" y2="10" />
		</g>
	</symbol>

	<!-- Preview of icons (optional) -->
	<defs><style>symbol:not(:target) { display: none; }</style></defs>
	<use x="0" y="0" href="#icon-1" />
	<use x="0" y="30" href="#icon-2" />
</svg>
```
*/
/*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

# text_overflow

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

## Usage

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

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

*/
/*md

# g-button

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

## First type button

```html_example
<button type="submit" class="b-button">
	Sign in
</button>
```

## First type disabled button

```html_example
<button type="submit" class="b-button m-disabled">
	Sign in
</button>
```

## First type, full width button

```html_example
<button type="submit" class="b-button m-width_full">
	Sign in
</button>
```

## Second type button

```html_example
<button type="submit" class="b-button m-secondary">
	Sign in
</button>
```

## Tertiary type button

```html_example
<button type="submit" class="b-button m-tertiary">
	Sign in
</button>
```

## Second type disabled button

```html_example
<button type="submit" class="b-button m-secondary m-disabled">
	Sign in
</button>
```

## Second type, full width button

```html_example
<button type="submit" class="b-button m-secondary m-width_full">
	Sign in
</button>
```

## CTA button

```html_example
<button type="submit" class="b-button m-cta">
	Sign in
</button>
```

## CTA button secondary

```html_example
<button type="submit" class="b-button m-cta-secondary">
	Sign in
</button>
```

## Link button

```html_example
<button type="submit" class="b-button m-link">
	Sign in
</button>
```

## Large height Link button

```html_example
<button type="submit" class="b-button m-link m-large">
	Sign in
</button>
```

## Small height Link button

```html_example
<button type="submit" class="b-button m-link m-small">
	Sign in
</button>
```

*/
/*md

# g-button_icon_only

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

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

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

# g-button_icon_round

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

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

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

# g-input

Designed to provide same styles of inputs across different form elements.

```scss_example
.b-input {
	@include g-input {
		cursor: text;
	}

	@include hover-supported {
		&:hover {
			@include g-input(hover);
		}
	}

	&.m-invalid {
		@include g-input(error);
	}

	&:focus {
		@include g-input(focus);
	}

	&:disabled {
		@include g-input(disabled);
	}
}
```
*/
/*md

# g-radio

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

It design to share same styles of radio across completely different
components:`b-payment_accordion`, `b-options_switch`, `b-refinement_radio`,
`b-variation_swatch`.

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

It design to share same styles of radio across completely different
components: `b-refinements_checkbox`, `b-comparison_checkbox` etc.

## 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 class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-1">Some text</label>
</div>
```

## Checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-2" checked/>
	<svg class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-2">Some text</label>
</div>
```

## Disabled unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-3" disabled/>
	<svg class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-3">Some text</label>
</div>
```

## Disabled checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-4" checked disabled/>
	<svg class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-4">Some text</label>
</div>
```

## Invalid unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-5"/>
	<svg class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-5">Some text</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 class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-6">Some text</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

This component is designed to provide same styles of text-type links (hyperlinks)
across different components.

For UI type links see `g-link_ui`.

## Usage

```scss
// for regular cases
.b-user_content-link {
	@include g-link;
}

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

*/
/*md

# g-link_ui

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

## Usage

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

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

*/
/*md

# g-link_hamburger

Hamburger menu generic link that used in several component.

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

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

# g-image_container

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

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

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

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

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

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

You could change aspect ration in mixin:

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

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

*/
/*md

# g-snap_scroll

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

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

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

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

*/
/*md

# g-backdrop_dialog

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

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

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

# g-backdrop_panel

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

Serve as regular overlay.

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

# g-section_holder

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

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

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

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

# g-section_holder_header

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

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

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

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

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

# g-heading_*

Basic simple typography styles applied to different UI components.

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

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

	&-title {
		@include g-heading_1;

		margin-bottom: 32px;
	}
}
```
*/
/* New style guide start */
/* New style guide end */
/*md

# g-accordion

Global accordion component

## Attributes

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

## Simple accordion example

```html_example
<div
    data-id="descriptions"
    data-widget="accordion"
    data-allow-toggle="false"
    data-open-first="true"
    data-allow-multiple="false"
    class="b-accordion"
>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="product-details-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 1</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="product-details"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				<p>
					Long content for first item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim bibendum neque in pellentesque. Nulla nunc sem, lacinia vitae sapien ac, blandit cursus odio. Praesent et elit condimentum, varius ligula id, ullamcorper neque.
				</p>
				<p>
					Vivamus in nulla quis nulla dapibus dictum. Aenean eu turpis et felis luctus eleifend. In ut pharetra metus. Praesent sed fringilla mauris. Donec dignissim, urna cursus euismod varius, nunc urna aliquam neque, eu posuere elit ex mollis enim. Nulla sollicitudin scelerisque faucibus. Donec porta vestibulum felis ac molestie.
				</p>
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 2</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for second item
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 3</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for third item
			</div>
		</div>
	</section>
</div>
```

## Accordion with multiple open items

```html_example
<div
    data-id="descriptions"
    data-widget="accordion"
    data-allow-toggle="true"
    data-open-first="false"
    data-allow-multiple="true"
    class="b-accordion"
>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="product-details-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 1</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="product-details"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				<p>
					Long content for first item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim bibendum neque in pellentesque. Nulla nunc sem, lacinia vitae sapien ac, blandit cursus odio. Praesent et elit condimentum, varius ligula id, ullamcorper neque.
				</p>
				<p>
					Vivamus in nulla quis nulla dapibus dictum. Aenean eu turpis et felis luctus eleifend. In ut pharetra metus. Praesent sed fringilla mauris. Donec dignissim, urna cursus euismod varius, nunc urna aliquam neque, eu posuere elit ex mollis enim. Nulla sollicitudin scelerisque faucibus. Donec porta vestibulum felis ac molestie.
				</p>
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 2</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for second item
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 3</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for third item
			</div>
		</div>
	</section>
</div>
```

## 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
<div
    data-id="descriptions"
    data-widget.sm.md.lg="accordion"
    data-allow-toggle="true"
    data-open-first="true"
    data-allow-multiple="true"
    class="b-accordion"
>
	<section
		data-widget.sm.md.lg="accordionItem"
		data-widget-event-closeallitems.sm.md.lg="closeItems"
		data-widget-event-accordionitemupdate.sm.md.lg="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="product-details-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent.sm.md.lg="togglePanel"
				data-event-keydown.sm.md.lg="handleKeydown"
				data-event-focus.sm.md.lg="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 1</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="product-details"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				<p>
					Long content for first item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dignissim bibendum neque in pellentesque. Nulla nunc sem, lacinia vitae sapien ac, blandit cursus odio. Praesent et elit condimentum, varius ligula id, ullamcorper neque.
				</p>
				<p>
					Vivamus in nulla quis nulla dapibus dictum. Aenean eu turpis et felis luctus eleifend. In ut pharetra metus. Praesent sed fringilla mauris. Donec dignissim, urna cursus euismod varius, nunc urna aliquam neque, eu posuere elit ex mollis enim. Nulla sollicitudin scelerisque faucibus. Donec porta vestibulum felis ac molestie.
				</p>
			</div>
		</div>
	</section>
	<section
		data-widget.sm.md.lg="accordionItem"
		data-widget-event-closeallitems.sm.md.lg="closeItems"
		data-widget-event-accordionitemupdate.sm.md.lg="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent.sm.md.lg="togglePanel"
				data-event-keydown.sm.md.lg="handleKeydown"
				data-event-focus.sm.md.lg="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 2</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for second item
			</div>
		</div>
	</section>
	<section
		data-widget.sm.md.lg="accordionItem"
		data-widget-event-closeallitems.sm.md.lg="closeItems"
		data-widget-event-accordionitemupdate.sm.md.lg="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent.sm.md.lg="togglePanel"
				data-event-keydown.sm.md.lg="handleKeydown"
				data-event-focus.sm.md.lg="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span>Title 3</span>
				<span class="b-icon_chevron"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for third item
			</div>
		</div>
	</section>
</div>
```

## Customization by SCSS

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

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

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

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

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

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

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

# g-grid

g-grid is layout component based on CSS grid.

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

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

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

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

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

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

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

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

*/
/*md

# g-icon_chevron

Allows to use "chevron up/down" icon for "b-icon_chevron" component.

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

# g-icon_chevron_as_plus

Allows to use "plus/minus" icon instead of standard chevron for "b-icon_chevron" component.

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

# g-selector_swatch

Global color swatch component.

```scss
.b-product_tile_swatches {
	&-swatch {
		@include g-selector_swatch(default, 32px);

		@include hover-supported {
			&:hover {
				@include g-selector_swatch(hover);
			}
		}

		&.m-selected {
			@include g-selector_swatch(selected);
		}
	}
	// ...
}
```
*/
/*md

# g-selector_tile

Global color swatch component.

```scss
.b-product_tile_swatches {
	&-swatch {
		@include g-selector_tile(default, 32px);

		@include hover-supported {
			&:hover {
				@include g-selector_tile(hover);
			}
		}

		&.m-selected {
			@include g-selector_tile(selected);
		}
	}
	// ...
}
```
*/
/*md

# g-slide_panel

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

# g-message

Designed to provide same styles of messages and also alerts/notifications.

```scss_example
.b-message {
	@include g-message;

	&.m-success {
		@include g-message(success);
	}

	&.m-error {
		@include g-message(error);
	}

	&.m-warning {
		@include g-message(warning);
	}
}
```
*/
@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,
  .b-klarna_placement {
    display: none !important;
  }
  .b-header_utility,
  .l-header,
  .l-header-bottom_promo,
  .b-menu_panel,
  .b-footer,
  .l-account-nav,
  .b-back_to_top,
  .b-nav_aux {
    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;
}

.l-cart_product:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.l-cart_product:last-of-type {
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 32px;
}
.l-cart_product-actions .b-button.m-link.m-small {
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .l-cart_product-qty {
    padding-right: 32px;
  }
}
.l-cart_product-image {
  max-width: 123px;
}

/*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 thumbs-zoom {
  0% {
    transform: translateY(35px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-from-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes dialog-backdrop {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
@keyframes dialog-opening {
  0% {
    transform: scale(0.6);
  }
  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;
  }
}
.b-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-link:hover {
    color: #757575;
  }
}

/*md

# b-button

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

*/
.b-button {
  align-items: center;
  background: #262424;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: 700 16px / 1 "FannDorenGrotesque", monospace;
  gap: 4px;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  padding-inline: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, border-color, color;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
}
@media not all and (pointer: coarse) {
  .b-button:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
  }
}
.b-button.m-secondary {
  background: #000;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary:hover {
    background: #000000;
    color: #ffffff;
  }
}
.b-button.m-tertiary, .b-button.m-outline {
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary:hover, .b-button.m-outline:hover {
    background: #000;
    border-color: #000000;
    color: #ffffff;
  }
}
.b-button.m-primary-inverse, .b-button.m-white {
  background: #ffffff;
  color: #000000;
}
@media not all and (pointer: coarse) {
  .b-button.m-primary-inverse:hover, .b-button.m-white:hover {
    background: #262424;
    color: #ffffff;
  }
}
.b-button.m-secondary-inverse {
  background: transparent;
  border: 1px solid #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary-inverse:hover {
    background: #ffffff;
    color: #000000;
  }
}
.b-button:disabled, .b-button.m-disabled {
  opacity: 0.6;
  pointer-events: none;
}
.b-button svg {
  height: 24px;
  width: 24px;
}
.b-button.m-large {
  font-size: 18px;
  height: 56px;
}
.b-button.m-medium {
  font-size: 16px;
  height: 48px;
}
.b-button.m-small {
  height: 40px;
  padding-inline: 16px;
}
.b-button.m-small svg {
  height: 16px;
  width: 16px;
}
.b-button.m-tiny {
  height: 32px;
  padding-inline: 8px;
}
.b-button.m-tiny svg {
  height: 16px;
  width: 16px;
}
.b-button.m-width_full {
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-button.m-width_full_mobile {
    width: 100%;
  }
}
.b-button.m-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font-family: inherit;
  font-weight: 400;
  height: auto;
  letter-spacing: 0;
  padding: 0;
  text-transform: initial;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-button.m-link:hover {
    color: #757575;
  }
}
.b-button.m-link.m-small {
  font-size: 12px;
}
.b-button.m-link.m-large {
  font-size: 16px;
}
.b-button.m-cta {
  background: transparent;
  border: none;
  border-bottom: 2px solid;
  border-radius: 0;
  color: #262424;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  height: 22px;
  line-height: 1;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-button.m-cta:hover {
    background: transparent;
    border: none;
    border-bottom: 2px solid;
    color: #000000;
  }
}
.b-button.m-cta:focus {
  background: transparent;
  border: none;
  border-bottom: 2px solid;
  color: #000000;
}
.b-button.m-cta.m-cta_secondary, .b-button.m-cta.m-black {
  color: #000000;
}
@media not all and (pointer: coarse) {
  .b-button.m-cta.m-cta_secondary:hover, .b-button.m-cta.m-black:hover {
    background: transparent;
    color: #262424;
  }
}
.b-button.m-cta.m-cta_inverse, .b-button.m-cta.m-white {
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-cta.m-cta_inverse:hover, .b-button.m-cta.m-white:hover {
    background: transparent;
    color: #e1e1e1;
  }
}
.b-button.m-cta svg {
  height: 16px;
  width: 16px;
}
.b-button.m-category {
  background-color: #000000;
  border-radius: 24px;
  font-size: 14px;
  height: 42px;
  padding: 0 16px;
}
@media not all and (pointer: coarse) {
  .b-button.m-category:hover {
    background: #262424;
  }
}

.b-back_to_top {
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .b-back_to_top {
    align-items: center;
    background: #262424;
    border: none;
    border-radius: 2px;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font: 700 16px / 1 "FannDorenGrotesque", monospace;
    gap: 4px;
    height: 48px;
    justify-content: center;
    max-width: 100%;
    padding-inline: 32px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: background-color, border-color, color;
    -webkit-user-select: none;
            user-select: none;
    vertical-align: top;
    font-size: 12px;
    line-height: 16px;
    bottom: 156px;
    flex-direction: column;
    font-weight: 600;
    gap: 0;
    min-width: 48px;
    opacity: 0;
    padding: 4px;
    pointer-events: auto;
    position: fixed;
    right: 32px;
    text-transform: uppercase;
    visibility: hidden;
    z-index: 2;
  }
  @media not all and (pointer: coarse) {
    .b-back_to_top:hover {
      background: #000;
      color: #ffffff;
      text-decoration: none;
    }
  }
  html[dir=rtl] .b-back_to_top {
    left: 32px;
    right: initial;
  }
  @media not all and (pointer: coarse) {
    .b-back_to_top:hover svg {
      transform: translateY(0);
    }
    .b-back_to_top:hover .b-back_to_top-svg_line {
      transform: scale(1);
    }
  }
  .b-back_to_top.m-showed {
    opacity: 1;
    visibility: visible;
  }
  .b-back_to_top svg {
    transform: translateY(3px);
    transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  }
  .b-back_to_top-svg_line {
    transform: scale(1, 0);
    transform-origin: 50% 5%;
    transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  }
  .b-back_to_top-copy_small {
    display: none;
  }
  .l-page.m-comparison_panel .b-back_to_top {
    bottom: 314px;
  }
  .l-page.m-sticky_panel .b-back_to_top, .l-page.m-comparison_panel.m-comparison_panel_collapsed .b-back_to_top {
    bottom: 164px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-back_to_top {
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    max-width: 1440px;
    align-items: center;
    display: flex;
    flex-direction: row-reverse;
    font-weight: 600;
    justify-content: space-between;
    min-height: 48px;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
  }
}
@media screen and (max-width: 767.9px) and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-back_to_top {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (max-width: 767.9px) and (min-width: 768px) and (max-width: 1023.9px) {
  .b-back_to_top {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) and (max-width: 767.9px) {
  .b-back_to_top {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-back_to_top-copy_large {
    display: none;
  }
}

@media screen and (max-width: 767.9px) {
  .b-back_to_top {
    background: #000000;
    color: #ffffff;
    min-height: 44px;
  }
}
.b-back_to_top.m-size_drawer_opened {
  display: none;
}

/*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
<div class="b-global_alerts">
    <div
        class="b-global_alerts-item"
        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%;
  max-width: calc(100% - 32px);
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translateX(-50%);
  width: max-content;
  z-index: 22;
}
.b-global_alerts.m-visually_hidden {
  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-global_alerts-item {
  background-color: #ffffff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 10.5px 12px;
  position: relative;
  align-items: center;
  animation: slide-from-bottom cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  cursor: default;
  margin: 0 auto;
  min-width: 194px;
  pointer-events: initial;
}
.b-global_alerts-item::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-global_alerts-item.m-error {
  padding: 8px 12px 8px 42px;
  visibility: visible;
}
.b-global_alerts-item.m-error::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-global_alerts-item.m-error::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#error");
          mask-image: url("../images/icons-sprite.svg#error");
  -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%;
  min-width: 24px;
  width: 24px;
}
.b-global_alerts-item.m-error::before {
  color: #a21a10;
}

/*md

# b-link_phone

This component is designed to style phone links and separate it from regular links.

Phone link with **tel:[number]** scheme mostly needed additional styling or handling.

```html_example
<a href="tel:1-888-222-3380" class="b-link_phone">1-888-222-3380</a>
```
*/
.b-link_phone {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  align-items: center;
  display: inline-flex;
  font-weight: 500;
  unicode-bidi: isolate;
  vertical-align: top;
  white-space: nowrap;
}
@media not all and (pointer: coarse) {
  .b-link_phone:hover {
    color: #757575;
  }
}
.b-link_phone svg {
  margin-inline-end: 8px;
}
.b-user_content .b-link_phone.b-link_phone {
  text-decoration: none;
}

/*md

# b-link_email

This component is designed to style e-mail links and separate it from regular links.

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

```html_example
<a href="mailto:$tools.sitePref.getValue('customerServiceEmail')" class="b-link_email">$tools.sitePref.getValue('customerServiceEmail')</a>
```
*/
.b-link_email {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  align-items: center;
  display: inline-flex;
  font-weight: 500;
  vertical-align: top;
  white-space: nowrap;
}
@media not all and (pointer: coarse) {
  .b-link_email:hover {
    color: #757575;
  }
}
.b-link_email svg {
  margin-inline-end: 8px;
}
.b-user_content .b-link_email.b-link_email {
  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
<div>
	<button class="b-button m-outline"
			type="button"
			data-widget="emitBusEvent"
			data-bus-event-type="dialog.show"
			data-event-click.prevent="emitBusEvent"
			data-modal-config="{&quot;content&quot;: &quot; &quot;}"
	>
		Show usual dialog
	</button>
	<button class="b-button m-outline" data-widget="emitBusEvent" data-bus-event-type="page.show.searchbox" data-event-click.prevent="emitBusEvent">
		Show search suggestions dialog
	</button>
</div>
<div data-widget="globalModal" data-disable-rendering="false">
    <div class="b-dialog" data-ref="container" hidden></div>
    <script type="template/mustache" data-ref="template">
        <div data-ref="container" class="b-dialog m-reset_password">
            <div class="b-dialog-window m-top_dialog" role="dialog" data-ref="dialog" aria-modal="true">
                <div class="b-dialog-header">
                    <h2 class="b-dialog-title" id="forget-password-form-title">Forgot password?</h2>
                    <div data-tau="forgot_password_close">
                        <button class="b-dialog-close" type="button" data-dismiss="modal" data-event-click.prevent="cancel">
                            <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
                                <use href="#close"></use>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="b-dialog-body">
                    <p class="b-form_field">Don't worry - it's easily done! Just enter your email address below and we'll send you a link to reset your password.</p>
                    <form class="reset-password-form" action="" method="POST">
                        <div data-widget="inputEmail" class="b-form_field m-required">
                            <label class="b-form_field-label">Email</label>
                            <input type="email" class="b-input">
                        </div>
                        <div class="b-dialog-footer m-actions">
                            <button type="submit" class="b-button m-width_full">Reset password</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>
</div>
<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="close">
        <path fill="currentColor" d="m0.515,0.515c0.39,-0.39 1.023,-0.39 1.414,0l7.071,7.07l7.071,-7.07c0.39,-0.39 1.024,-0.39 1.414,0c0.39,0.39 0.39,1.023 0,1.414l-7.07,7.071l7.07,7.071c0.39,0.39 0.39,1.024 0,1.414c-0.39,0.39 -1.023,0.39 -1.414,0l-7.071,-7.07l-7.071,7.07c-0.39,0.39 -1.024,0.39 -1.414,0c-0.39,-0.39 -0.39,-1.023 0,-1.414l7.07,-7.071l-7.07,-7.071c-0.39,-0.39 -0.39,-1.024 0,-1.414z"></path>
    </symbol>
</svg>

<div data-widget="searchBox" data-disable-rendering="true">
    <div data-ref="container" class="b-dialog m-search_suggestions" data-event-click.self="closeModal">
        <div class="b-search_dialog" data-ref="dialog" role="dialog">
            <div class="b-search_dialog-inner">
                <div class="b-search_dialog-inner_top">
                    <div class="b-search_dialog-inner_top_content">
                        <div class="b-search_dialog-form_wrap">
                            <form role="search" method="get" name="simpleSearch" class="b-search_input">
                                <button class="b-search_input-submit" type="submit">
                                    <svg width="23" height="23" viewBox="0 0 27 28" focusable="false">
                                        <path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" d="M19.484 19.984c4.1-4.1 4.066-10.784-.078-14.927C15.263.913 8.58.879 4.48 4.979c-4.1 4.1-4.066 10.784.078 14.927 4.143 4.144 10.826 4.178 14.927.078zm-.567-.355l7.239 7.494"></path>
                                    </svg>
                                </button>
                                <input role="combobox" id="header-search-input" class="b-search_input-input" type="search" name="q" value="" placeholder="Search">
                            </form>
                            <button type="button" class="b-search_dialog-cancel" data-event-click="closeSearch">Cancel</button>
                        </div>
                    </div>
                </div>
                <div role="listbox" id="search-suggestions-list" class="b-suggestions m-active">
                    <div role="none" class="b-suggestions-inner">
                        <div role="none" class="b-suggestions-section m-content">
                            <div role="none" class="b-suggestions-title">Quick Links</div>
                            <a role="option" id="result-item-0" class="b-suggestions-option b-suggestions-link" href="#">Privacy Policy</a>
                            <a role="option" id="result-item-1" class="b-suggestions-option b-suggestions-link" href="#">Men</a>
                            <a role="option" id="result-item-2" class="b-suggestions-option b-suggestions-link" href="#">Women</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```
*/
.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: 20px 0;
}
.b-dialog.m-opened, .b-dialog.m-active {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  overflow-y: scroll;
}
.b-dialog-window {
  background-color: #ffffff;
  color: #000000;
  margin: auto;
  max-width: calc(100% - 32px);
  min-height: 150px;
  padding: 0 32px 32px;
  position: relative;
  transform-origin: center center;
  width: 690px;
  z-index: 17;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-window {
    padding: 0 16px 32px;
  }
}
.b-dialog-window.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #262424;
  border-left-color: #f5f5f5;
  border-radius: 50%;
  border-top-color: #f5f5f5;
  content: "";
  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-dialog-window.m-closed {
  visibility: hidden;
}
.m-add_to_cart .b-dialog-window {
  width: 750px;
}
.b-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}
@media screen and (min-width: 1024px) {
  .b-dialog-header.m-hide_lg {
    display: none;
  }
}
.b-dialog-title {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 40px;
  padding-inline-end: 32px;
}
@media screen and (min-width: 1024px) {
  .b-dialog-title {
    font-size: 32px;
  }
}
.b-dialog-close {
  color: #000000;
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 16px;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  z-index: 1;
}
html[dir=rtl] .b-dialog-close {
  left: 16px;
  right: initial;
}
.b-dialog-close:hover {
  opacity: 0.5;
}
.b-dialog-close svg {
  height: 20px;
  width: 20px;
}
.b-dialog-footer {
  grid-gap: 8px;
  display: grid;
  margin-top: 40px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-dialog-footer {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-dialog-footer {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-dialog-footer {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-dialog-footer {
    row-gap: 16px;
  }
}
@media screen and (min-width: 768px) {
  .b-dialog-footer {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
}

.b-dialog.m-size_guide {
  padding: 0;
}
.b-dialog.m-size_guide .b-dialog-window,
.b-dialog.m-size_guide .b-dialog-header {
  padding: 0;
}
.b-dialog.m-size_guide .b-dialog-window {
  animation: none;
  border-radius: 0;
  max-width: 100%;
  min-height: 100%;
  width: 100%;
}
.b-dialog.m-size_guide .b-dialog-body {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  padding-bottom: 80px;
  padding-top: 40px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-dialog.m-size_guide .b-dialog-body {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-dialog.m-size_guide .b-dialog-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-size_guide .b-dialog-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-size_guide .b-dialog-body {
    padding-top: 80px;
  }
}
.b-dialog.m-size_guide .b-dialog-close {
  height: 24px;
  right: 0;
  top: 16px;
  width: 24px;
  z-index: 1;
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-size_guide .b-dialog-close {
    top: 40px;
  }
}
html[dir=rtl] .b-dialog.m-size_guide .b-dialog-close {
  left: 0;
  right: initial;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-size_guide .b-dialog-close {
    margin: 0 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-dialog.m-size_guide .b-dialog-close {
    margin: 0 30px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-dialog.m-size_guide .b-dialog-close {
    margin: 0 40px;
  }
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-size_guide .b-dialog-close {
    margin: 0 80px;
  }
}

@media screen and (max-width: 767.9px) {
  .b-dialog.m-quick_view {
    padding: 0;
  }
}
.b-dialog.m-quick_view .b-dialog-window {
  min-height: 640px;
  padding: 0;
  width: 1056px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-quick_view .b-dialog-window {
    max-width: 100%;
    padding: 0 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-quick_view .b-dialog-window {
    min-height: 640px;
  }
}
.b-dialog.m-quick_view .b-dialog-header {
  padding: 0;
}
.b-dialog.m-quick_view .b-dialog-body {
  display: none;
}
.b-dialog.m-quick_view .b-dialog-close {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: rgba(248, 248, 248, 0.9);
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 44px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 44px;
  border-radius: 100%;
}
@media not all and (pointer: coarse) {
  .b-dialog.m-quick_view .b-dialog-close:hover {
    color: #757575;
  }
}
.b-dialog.m-quick_view .b-dialog-close svg {
  height: 20px;
  width: 20px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-quick_view .b-dialog-close {
    position: fixed;
    right: 12px;
    top: 12px;
  }
}
.b-dialog.m-quick_view .b-product_details-fit_meter {
  background: transparent;
}
.b-dialog.m-quick_view .b-product_details-qv_wrap,
.b-dialog.m-quick_view .b-product_details-form {
  margin-bottom: 32px;
}
.b-dialog.m-quick_view .b-badges {
  display: none;
}

.b-dialog.m-no_results .b-dialog-window {
  width: 560px;
}

.b-dialog.m-search_suggestions {
  align-items: flex-start;
  display: none;
  overflow-y: auto;
  padding: 0;
  transition: none;
}
.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,
.b-dialog.m-countdown .b-dialog-window {
  width: 400px;
}

.b-dialog.m-bonus_product .b-dialog-window {
  min-height: 60vh;
}
.b-dialog.m-bonus_product .b-dialog-body {
  display: none;
}

.b-dialog.m-cart_overlay .b-dialog-body {
  display: none;
}

.b-dialog.m-geolocation {
  background-color: initial;
  bottom: 80px;
  left: auto;
  overflow-y: initial;
  padding: 0;
  right: 20px;
  top: auto;
  transition: none;
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-geolocation {
    bottom: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-geolocation {
    left: 16px;
    max-width: calc(100% - 32px);
    width: 100%;
  }
}
.b-dialog.m-geolocation .b-dialog-window {
  margin: 0;
  max-width: 584px;
  padding-bottom: 48px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-geolocation .b-dialog-window {
    padding-bottom: 20px;
  }
}
.b-dialog.m-geolocation .b-dialog-header {
  margin-bottom: 0;
}

.b-dialog.m-country_selector {
  z-index: 30;
}

.b-user_content .b-dropsite_saved-subtitle {
  color: #757575;
  margin-bottom: 16px;
}
.b-user_content .b-dropsite_saved-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.b-user_content .b-dropsite_saved-item {
  border-top: 1px solid #f5f5f5;
}
.b-user_content .b-dropsite_saved-item:last-child {
  border-bottom: 1px solid #f5f5f5;
}
.b-user_content .b-dropsite_saved-item_link {
  align-items: center;
  color: #000000;
  display: flex;
  gap: 16px;
  padding: 12px 0;
  text-decoration: none;
}
.b-user_content .b-dropsite_saved-item_link:hover .b-dropsite_saved-name {
  text-decoration: underline;
}
.b-user_content .b-dropsite_saved-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}
.b-user_content .b-dropsite_saved-name {
  font-weight: 600;
}
.b-user_content .b-dropsite_saved-qty {
  color: #757575;
  font-size: 0.85em;
}
.b-user_content .b-dropsite_saved-image {
  width: 40%;
}

.b-flyout {
  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-flyout.m-opened, .b-flyout.m-active {
  background-color: rgba(0, 0, 0, 0.5);
  visibility: visible;
  animation: dialog-backdrop cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
.b-flyout.m-opened {
  overflow: hidden;
}
.b-flyout-window {
  background-color: #ffffff;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 512px;
  overflow: hidden;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 17;
  right: 0;
  transform: translateX(100%);
}
html[dir=rtl] .b-flyout-window {
  left: 0;
  right: initial;
  transform: translateX(-100%);
}
.b-flyout-window.m-closed, .b-flyout-window.m-active {
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: transform, visibility;
}
.b-flyout-window.m-active {
  transform: translateX(0);
  visibility: visible;
}
html[dir=rtl] .b-flyout-window.m-active {
  transform: translateX(0);
}
.b-flyout-window.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #262424;
  border-left-color: #f5f5f5;
  border-radius: 50%;
  border-top-color: #f5f5f5;
  content: "";
  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-flyout-body {
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 0 32px;
}
@media screen and (max-width: 767.9px) {
  .b-flyout-body {
    padding: 0 16px;
  }
}
.b-flyout-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-top: 32px;
}
@media screen and (min-width: 1024px) {
  .b-flyout-header.m-hide_lg {
    display: none;
  }
}
.b-flyout-title {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 40px;
  padding-inline-end: 32px;
}
@media screen and (min-width: 1024px) {
  .b-flyout-title {
    font-size: 32px;
  }
}
.b-flyout-close {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 24px;
  border-radius: 100%;
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1;
}
@media not all and (pointer: coarse) {
  .b-flyout-close:hover {
    color: #757575;
  }
}
.b-flyout-footer {
  grid-gap: 8px;
  display: grid;
  margin-top: 40px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-flyout-footer {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-flyout-footer {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-flyout-footer {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-flyout-footer {
    row-gap: 16px;
  }
}
@media screen and (min-width: 768px) {
  .b-flyout-footer {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
  }
}

/*md
# b-content_placeholder

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

## Example

```html_example
<div class="b-content_placeholder">
	Bazaarvoice reviews will be here
</div>
```
*/
.b-content_placeholder {
  font-weight: 600;
  font-size: 24px;
  align-items: center;
  background-color: #f5f5f5;
  color: #757575;
  display: flex;
  height: 70vh;
  justify-content: center;
}
@media screen and (min-width: 1024px) {
  .b-content_placeholder {
    font-size: 32px;
  }
}

/*md

# b-user_content

This component is used to provide regular document styling in places where content management 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 website</li>
		<li>Improve, personalize, and expand our website</li>
		<li>Understand and analyze how you use our website</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 website, 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 website</li>
		<li>Improve, personalize, and expand our website</li>
		<li>Understand and analyze how you use our website</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 website, 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 .title-h1,
.b-user_content h1 {
  font-weight: 600;
  font-size: 24px;
}
@media screen and (min-width: 1024px) {
  .b-user_content .title-h1,
  .b-user_content h1 {
    font-size: 32px;
  }
}
.b-user_content .title-h2,
.b-user_content h2 {
  font-weight: 600;
  font-size: 20px;
}
@media screen and (min-width: 1024px) {
  .b-user_content .title-h2,
  .b-user_content h2 {
    font-size: 24px;
  }
}
.b-user_content .title-h3,
.b-user_content h3 {
  font-size: 18px;
  font-weight: 600;
}
.b-user_content .title-h4,
.b-user_content h4 {
  font-size: 16px;
  font-weight: 600;
}
.b-user_content .title-h5,
.b-user_content h5 {
  font-size: 14px;
  font-weight: 600;
}
.b-user_content ul,
.b-user_content ol {
  list-style: auto;
  padding-left: 22px;
}
.b-user_content ul {
  list-style: disc outside;
}
.b-user_content ol {
  list-style: decimal outside;
}
.b-user_content li {
  line-height: 21px;
  padding-left: 2px;
}
.b-user_content p.m-p1,
.b-user_content div.m-p1,
.b-user_content span.m-p1,
.b-user_content li.m-p1 {
  font: 600 18px / 32px "FannDorenGrotesque", monospace;
}
@media screen and (min-width: 1024px) {
  .b-user_content p.m-p1,
  .b-user_content div.m-p1,
  .b-user_content span.m-p1,
  .b-user_content li.m-p1 {
    font: 600 24px / 32px "FannDorenGrotesque", monospace;
  }
}
.b-user_content p.m-p2,
.b-user_content div.m-p2,
.b-user_content span.m-p2,
.b-user_content li.m-p2 {
  font-size: 18px;
  font: 600 24px / 30px "FannDorenGrotesque", monospace;
}
.b-user_content p.m-eyebrow,
.b-user_content div.m-eyebrow,
.b-user_content span.m-eyebrow,
.b-user_content li.m-eyebrow {
  font: 400 18px / 24px "FannDorenGrotesque", monospace;
  text-transform: uppercase;
}
.b-user_content p.m-large,
.b-user_content div.m-large,
.b-user_content span.m-large,
.b-user_content li.m-large {
  font-size: 18px;
}
.b-user_content p.m-regular,
.b-user_content div.m-regular,
.b-user_content span.m-regular,
.b-user_content li.m-regular {
  font-size: 14px;
}
.b-user_content p.m-smaller,
.b-user_content div.m-smaller,
.b-user_content span.m-smaller,
.b-user_content li.m-smaller {
  font-size: 12px;
}
.b-user_content p.m-small,
.b-user_content div.m-small,
.b-user_content span.m-small,
.b-user_content li.m-small {
  font-size: 12px;
  line-height: 16px;
}
.b-user_content .b-text_block p + h1, .b-user_content .b-text_block p + h2, .b-user_content .b-text_block p + h3, .b-user_content .b-text_block p + h4, .b-user_content .b-text_block p + h5, .b-user_content .b-text_block p + p, .b-user_content .b-text_block p + div:not(.b-actions-item), .b-user_content .b-text_block p + ol, .b-user_content .b-text_block p + ul, .b-user_content .b-text_block div + h1, .b-user_content .b-text_block div + h2, .b-user_content .b-text_block div + h3, .b-user_content .b-text_block div + h4, .b-user_content .b-text_block div + h5, .b-user_content .b-text_block div + p, .b-user_content .b-text_block div + div:not(.b-actions-item), .b-user_content .b-text_block div + ol, .b-user_content .b-text_block div + ul, .b-user_content .b-text_block ol + h1, .b-user_content .b-text_block ol + h2, .b-user_content .b-text_block ol + h3, .b-user_content .b-text_block ol + h4, .b-user_content .b-text_block ol + h5, .b-user_content .b-text_block ol + p, .b-user_content .b-text_block ol + div:not(.b-actions-item), .b-user_content .b-text_block ol + ol, .b-user_content .b-text_block ol + ul, .b-user_content .b-text_block ul + h1, .b-user_content .b-text_block ul + h2, .b-user_content .b-text_block ul + h3, .b-user_content .b-text_block ul + h4, .b-user_content .b-text_block ul + h5, .b-user_content .b-text_block ul + p, .b-user_content .b-text_block ul + div:not(.b-actions-item), .b-user_content .b-text_block ul + ol, .b-user_content .b-text_block ul + ul {
  margin-top: 1rem;
}
.b-user_content blockquote {
  border-left: 4px solid #d9d9d9;
  font-style: italic;
  margin: 0 0 16px;
  padding: 0 0 0 20px;
}
.b-user_content hr {
  background: #cfcfcf;
  border: 0;
  height: 1px;
  margin: 24px 0;
}
.b-user_content hr:first-child {
  margin-top: 0;
}
.b-user_content .b-table_scroll {
  margin: 24px 0;
  overflow: hidden;
  overflow-x: auto;
}
@media not all and (pointer: coarse) {
  .b-user_content .b-table_scroll {
    scrollbar-color: #000 var(--color-bg, #ffffff);
    scrollbar-width: thin;
    margin-bottom: 20px;
    padding-bottom: 4px;
  }
  .b-user_content .b-table_scroll::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }
  .b-user_content .b-table_scroll::-webkit-scrollbar-thumb {
    background: #000;
  }
  .b-user_content .b-table_scroll::-webkit-scrollbar-track {
    background: var(--color-bg, #ffffff);
  }
}
@media screen and (max-width: 767.9px) {
  .b-user_content .b-table_scroll {
    margin: 24px -16px;
    padding: 0 16px;
  }
}
.b-user_content table {
  float: none;
  margin: 24px 0;
  max-width: 100%;
  width: 100%;
}
.b-user_content caption {
  font-weight: 600;
  padding-bottom: 8px;
  text-align: inherit;
}
.b-user_content th,
.b-user_content td {
  border: 1px solid #f5f5f5;
  height: 58px;
  min-height: 58px;
  padding: 8px 16px;
  text-align: inherit;
}
.b-user_content th {
  font-weight: 500;
}
.b-user_content .m-table_small th,
.b-user_content .m-table_small td {
  padding: 8px 4px;
}
.b-user_content .m-table_large th,
.b-user_content .m-table_large td {
  padding: 24px 16px;
}
@media screen and (max-width: 767.9px) {
  .b-user_content .m-table_large th,
  .b-user_content .m-table_large td {
    padding: 16px 12px;
  }
}
.b-user_content .m-no_border th,
.b-user_content .m-no_border td {
  border-width: 0;
}
.b-user_content .m-auto_height th,
.b-user_content .m-auto_height td {
  height: auto;
  min-height: 0;
}
.b-user_content tbody th:first-child {
  padding: 8px 24px;
}
.b-user_content .b-accordion-title {
  margin: 0;
}

.b-process_table {
  border: 1px solid #cfcfcf;
}
.b-process_table td,
.b-process_table th {
  border: 0;
  padding: 24px 6px;
  text-align: center;
  vertical-align: bottom;
}
@media screen and (min-width: 768px) {
  .b-process_table td,
  .b-process_table th {
    padding: 24px 12px;
  }
}
.b-process_table td:first-child,
.b-process_table th:first-child {
  padding-inline-start: 16px;
}
@media screen and (min-width: 768px) {
  .b-process_table td:first-child,
  .b-process_table th:first-child {
    padding-inline-start: 32px;
  }
}
.b-process_table td:last-child,
.b-process_table th:last-child {
  padding-inline-end: 16px;
}
@media screen and (min-width: 768px) {
  .b-process_table td:last-child,
  .b-process_table th:last-child {
    padding-inline-end: 32px;
  }
}
.b-process_table td:nth-child(2n),
.b-process_table th:nth-child(2n) {
  position: relative;
  width: 0;
}
.b-process_table td:nth-child(2n)::before,
.b-process_table th:nth-child(2n)::before {
  background: #cfcfcf;
  content: "";
  height: 100%;
  inset: 0;
  margin: auto;
  position: absolute;
  width: 1px;
}
.b-process_table td:nth-child(2n) p,
.b-process_table th:nth-child(2n) p {
  background: var(--color-bg, #ffffff);
  padding: 8px 0;
  position: relative;
}
.b-process_table td:nth-child(2n) p:first-child,
.b-process_table th:nth-child(2n) p:first-child {
  margin-top: -8px;
}
.b-process_table td:nth-child(2n) p:last-child,
.b-process_table th:nth-child(2n) p:last-child {
  margin-bottom: -8px;
}

/* stylelint-disable no-descending-specificity */
.b-progress_table.b-progress_table {
  font-size: 12px;
  line-height: 16px;
  border: 0;
  color: #757575;
}
@media screen and (max-width: 767.9px) {
  .b-progress_table.b-progress_table {
    min-width: 100%;
  }
}
.b-progress_table.b-progress_table td,
.b-progress_table.b-progress_table tbody th {
  border: 0;
  height: auto;
  min-height: 0;
  padding: 32px 6px 0;
  position: relative;
  text-align: center;
  vertical-align: top;
}
.b-progress_table.b-progress_table td::before,
.b-progress_table.b-progress_table tbody th::before {
  background: #000;
  border-radius: 16px;
  content: "";
  height: 16px;
  left: 0;
  margin: 0 -8px;
  position: absolute;
  right: 0;
  top: 0;
}
.b-progress_table.b-progress_table td:first-child,
.b-progress_table.b-progress_table tbody th:first-child {
  padding-inline-start: 0;
  text-align: start;
}
.b-progress_table.b-progress_table td:first-child::before,
.b-progress_table.b-progress_table tbody th:first-child::before {
  margin-inline-start: 0;
}
.b-progress_table.b-progress_table td:last-child,
.b-progress_table.b-progress_table tbody th:last-child {
  padding-inline-end: 0;
  text-align: end;
}
.b-progress_table.b-progress_table td:last-child::before,
.b-progress_table.b-progress_table tbody th:last-child::before {
  margin-inline-end: 0;
}
.b-progress_table.b-progress_table tbody th {
  color: #000000;
}
.b-progress_table.b-progress_table tbody th::before {
  z-index: 1;
}
.b-progress_table.b-progress_table tbody th ~ ::before {
  background: #d9d9d9;
}

/*md

# b-accordion

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

*/
.b-accordion {
  box-shadow: 0 1px 0 0 #cfcfcf;
}
.b-accordion .b-icon_chevron::after, .b-accordion .b-icon_chevron::before {
  border-radius: 1px;
  width: 60%;
}
.b-accordion .b-icon_chevron::before {
  transform: translateX(-33%) rotate(45deg) scale(1, 0.8);
}
.b-accordion .b-icon_chevron::after {
  transform: translateX(33%) rotate(-45deg) scale(1, 0.8);
}
.b-accordion [data-expanded=true] ~ .b-icon_chevron::before,
.b-accordion [data-expanded=true] .b-icon_chevron::before {
  transform: translateX(-33%) rotate(-45deg) scale(1, 0.8);
}
.b-accordion [data-expanded=true] ~ .b-icon_chevron::after,
.b-accordion [data-expanded=true] .b-icon_chevron::after {
  transform: translateX(33%) rotate(45deg) scale(1, 0.8);
}
.b-accordion-item {
  box-shadow: 0 1px 0 0 #cfcfcf inset;
}
.b-accordion-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 22px 0;
  text-align: start;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 100%;
}
@media not all and (pointer: coarse) {
  .b-accordion-button:hover {
    opacity: 0.5;
  }
}
.b-accordion-content {
  display: none;
  overflow: hidden;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: height;
}
.b-accordion-content[aria-hidden=false], .b-accordion-item:not([data-initialized="1"]) .b-accordion-content {
  display: block;
}
.b-accordion-content_inner {
  overflow: hidden;
  padding: 0 0 20px;
}

.b-accordion-item.m-always-opened {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 24px;
}
.b-accordion-item + .b-accordion-item {
  margin-top: 0;
}
.b-accordion-button {
  font-size: 18px;
  font-weight: 600;
}
.b-accordion-button[aria-expanded=true] {
  padding-bottom: 16px;
}
.b-accordion .b-icon_chevron {
  margin-inline-end: 4px;
}

.b-icon_chevron {
  display: block;
  flex-shrink: 0;
  height: 20px;
  margin-inline-start: auto;
  position: relative;
  width: 20px;
}
.b-icon_chevron::after, .b-icon_chevron::before {
  background: currentcolor;
  content: "";
  display: block;
  height: 2px;
  inset: 0;
  margin: auto;
  position: absolute;
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 80%;
}
.b-icon_chevron::before {
  transform: rotate(90deg);
}
[data-expanded=true] ~ .b-icon_chevron::before, [data-expanded=true] .b-icon_chevron::before {
  transform: rotate(0deg);
}
.b-icon_chevron::after {
  transform: rotate(0deg) scale(1);
}
[data-expanded=true] ~ .b-icon_chevron::after, [data-expanded=true] .b-icon_chevron::after {
  transform: rotate(-90deg) scale(0, 1);
}

.b-icon_chevron {
  height: 24px;
  width: 24px;
}
.b-icon_chevron::after, .b-icon_chevron::before {
  height: 1px;
  z-index: -1;
}

/*md

# b-message

This is component that designed to show different kind of component-level related messages.

TBD

*/
.b-message {
  background-color: #ffffff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 10.5px 12px;
  position: relative;
  margin-bottom: 8px;
}
.b-message::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-message.m-success {
  padding: 8px 12px 8px 42px;
}
.b-message.m-success::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-message.m-success::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#success");
          mask-image: url("../images/icons-sprite.svg#success");
  -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%;
  min-width: 24px;
  width: 24px;
}
.b-message.m-success::before {
  color: #457030;
}
.b-message.m-error {
  padding: 8px 12px 8px 42px;
}
.b-message.m-error::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-message.m-error::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#error");
          mask-image: url("../images/icons-sprite.svg#error");
  -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%;
  min-width: 24px;
  width: 24px;
}
.b-message.m-error::before {
  color: #a21a10;
}
.b-message.m-warning {
  padding: 8px 12px 8px 42px;
}
.b-message.m-warning::before {
  left: 12px;
  position: absolute;
  top: 8px;
}
.b-message.m-warning::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#error");
          mask-image: url("../images/icons-sprite.svg#error");
  -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%;
  min-width: 24px;
  width: 24px;
}
.b-message.m-warning::before {
  color: #f5a623;
}
.b-message.m-order_confirmation {
  margin-top: 28px;
}
.b-message.m-no_bg {
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
}
.b-message-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-message-link:hover {
    color: #757575;
  }
}
/*md

# Form

Form component designed to style basic form elements.

## Form elements

Form have 3 basic elements:

* title
* description
* message

```
form.b-form
	div.b-form-title
	div.b-form-description
	div.b-form-message

	// fields here

	// actions here
```

```html_example
<form
	class="b-form"
	action="/endpoint"
>
	<div class="b-form-title">
		Contact us
	</div>

	<div class="b-form-description">
		Customer service is available on 1-888-222-3380, via email $tools.sitePref.getValue('customerServiceEmail') or you can send us a message using the form
	</div>

	<div class="b-form-message b-message m-error" role="alert">
		Form error message here
	</div>
</form>
```

## Form structure

### Form fields (`b-form_field`)

Forms are built with a combination of standard form elements (b-input, b-select etc)
within `.b-form_field` wrapper that holds label, errors and caption for each field.

```
form.b-form
	div.b-form-title

	div.b-form_field
		label.b-form_field-label
		input.b-input
```

```html_example
<form
	class="b-form"
	action="/endpoint"
>
	<div class="b-form-title">Form title</div>

	<div class="b-form_field">
		<label class="b-form_field-label" for="input-1-example-1">
			Form section label
		</label>
		<input class="b-input" type="text" placeholder="input placeholder" id="input-1-example-1" />
	</div>
</form>
```

### Form actions (`b-form_actions`)

Form action represented as separate component that could hold one or several buttons.
And could provide different layouts for it.

```
form.b-form
	div.b-form-title

	div.b-form_field
		label.b-form_field-label
		input.b-input

	div.b-form_actions
		button.b-form_actions-button_first
```

```html_example
<form
	class="b-form"
	action="/endpoint"
>
	<div class="b-form-title">Form title</div>

	<div class="b-form_field">
		<label class="b-form_field-label" for="input-1-example-1">
			Form section label
		</label>
		<input class="b-input" type="text" placeholder="input placeholder" id="input-1-example-1" />
	</div>

	<div class="b-form_actions">
        <button
            type="submit"
            class="b-form_actions-button_first b-button"
        >
            Submit
        </button>
    </div>
</form>
```

### Form sets (`b-form_set`)

Form fields could be organized to set. Please see [appropriate doc](05-blocks-common-forms-b-form_set.html).

### Form group (`b-form_group_date`)

Form fields could be organized to groups. Please see [appropriate doc](05-blocks-common-forms-b-form_group_date.html).

### Form full structure

```html_example
<form
	class="b-form"
	id="shipping"
	style="border: 3px solid #5dcc25; padding: 40px 10px 10px; position: relative;"
>
	<span style="position: absolute;top: 0;right: 4px;color: #5dcc25;font-weight: 600;font-size: 17px;">b-form</span>

	<div class="b-form-title">Form title</div>

	<div class="b-form-description">Form description text</div>

	<div class="b-form-message b-message m-error" role="alert">
		Form level error message
	</div>

	<div style="border: 3px solid #af98ec; padding: 40px 10px 10px; position: relative;">
		<span style="position: absolute; top: 0; right: 4px; color: #af98ec; font-weight: 600; font-size: 17px;">b-form_set</span>

		<fieldset class="b-form_set">
			<legend class="b-form_set-label">
				Form set label
			</legend>

			<div
				class="b-form_field"
				style="border: 3px solid #fd2263; padding: 40px 10px 10px; position: relative;"
			>
				<span style="position: absolute; top: 0; right: 4px; color: #fd2263; font-weight: 600; font-size: 17px;">b-form_field</span>
				<label class="b-form_field-label" for="form-full-input-1">
					Form field label
				</label>
				<input class="b-input" type="text" placeholder="b-input" id="form-full-input-1">
			</div>

			<div
				class="b-form_field"
				style="border: 3px solid #fd2263; padding: 40px 10px 10px; position: relative;"
			>
				<span style="position: absolute; top: 0; right: 4px; color: #fd2263; font-weight: 600; font-size: 17px;">b-form_field</span>
				<label class="b-form_field-label" for="form-full-input-2">
					Form field label
				</label>
				<input class="b-input" type="text" placeholder="b-input"  id="form-full-input-2">
			</div>
		</fieldset>
	</div>
</form>
```

*/
.b-form {
  position: relative;
}
.b-form[aria-busy=true]::after {
  background-color: #ffffff;
  bottom: 0;
  content: "";
  cursor: wait;
  left: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.b-form-title {
  font: 600 24px / 32px "FannDorenGrotesque", monospace;
  margin-bottom: 24px;
}
.b-form-description {
  margin-bottom: 16px;
}
.b-form-description.m-small {
  font-size: 12px;
  line-height: 16px;
}
.b-form-message {
  margin-bottom: 32px;
}
.b-form-message.m-highlighted {
  font-weight: 600;
}
.b-form-message_container {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  margin: 36px auto 20px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-form-message_container {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-form-message_container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-form-message_container {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-form-message_container {
    margin: 32px auto 0;
  }
}
@media screen and (min-width: 768px) {
  .b-form-line {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    margin-bottom: 24px;
  }
  .b-form-line .b-form_field {
    margin-bottom: 0;
  }
}
.b-form.m-checkout_shipping .b-form-line {
  gap: 8px;
  margin-bottom: 0;
}
.b-form.m-checkout_shipping .b-form_field {
  margin-bottom: 0;
}
.b-form.m-checkout_shipping .b-form_set.m-shipping_method {
  margin-top: 0;
  margin-bottom: 8px;
}
.b-form.m-checkout_shipping .b-form_set-label {
  font-weight: 500;
  margin-bottom: 8px;
}
.b-form.m-checkout_shipping .b-options_group {
  margin-bottom: 8px;
  margin-top: 0;
}
.b-form.m-checkout_shipping .b-option_switch {
  margin-top: 8px;
}
.b-form.m-checkout_shipping .b-option_switch-inner {
  align-items: center;
}
.b-form.m-checkout_shipping .b-option_switch-name {
  align-items: initial;
  flex-direction: column;
}
.b-form.m-checkout_shipping .b-option_switch-display_name {
  font-size: 16px;
  font-weight: 400;
}
.b-form.m-checkout_shipping .b-option_switch-description {
  font-size: 12px;
  color: #757575;
}
.b-form.m-checkout_shipping .b-price-item {
  font-size: 16px;
  font-weight: 500;
}

.b-checkout_step .b-form.m-login .b-form-message {
  margin-top: 32px;
}

@media screen and (min-width: 768px) {
  .b-form.m-account {
    flex-grow: 0;
    max-width: 632px;
  }
}

.b-form.m-set_password {
  width: 100%;
}

/*md

# Form actions

This component is designed to hold form action buttons and provide solution for
different cases.

This is building block for full-featured form component.

```html_example
<div class="b-form_actions">
    <button
        type="submit"
        class="b-form_actions-button_first b-button"
    >
        Submit
    </button>
</div>
```

## Row align (by default)

This is default layout of the buttons

```html_example
<div class="b-form_actions">
    <button
        type="submit"
        class="b-form_actions-button_first b-button"
    >
        Submit
    </button>
    <button
        type="submit"
        class="b-form_actions-button_second b-button m-outline"
    >
        Cancel
    </button>
</div>
```

## `m-stack`

Show one button over another on all breakpoints

```html_example
<div class="b-form_actions m-stack">
    <button
        type="submit"
        class="b-form_actions-button_first b-button"
    >
        Submit
    </button>
    <button
        type="submit"
        class="b-form_actions-button_second b-button m-outline"
    >
        Cancel
    </button>
</div>
```

## `m-stack_mobile`

Show one button over another only on small breakpoints

```html_example
<div class="b-form_actions m-stack_mobile">
    <button
        type="button"
        class="b-form_actions-button_first b-button m-outline"
    >
        Cancel
    </button>
    <button
        type="submit"
        class="b-form_actions-button_second b-button"
    >
        Submit
    </button>
</div>
```

*/
.b-form_actions {
  grid-gap: 8px;
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  margin-top: 32px;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-form_actions {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-form_actions {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-form_actions {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-form_actions {
    grid-auto-columns: auto;
    row-gap: 16px;
  }
}
.b-dialog .b-form_actions {
  grid-auto-columns: 1fr;
}
.b-form_actions.m-margin_sm {
  margin-top: 16px;
}
.b-dialog.login-modal .b-form_actions {
  grid-auto-columns: max-content;
}
.b-form_actions.m-stack {
  grid-auto-flow: row;
  grid-template-columns: 1fr;
}
@media screen and (max-width: 767.9px) {
  .b-form_actions.m-stack_mobile {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}

/*md

# Input

Default input element

## Default

```html_example
	<input
		class="b-input"
		type="text"
		placeholder="Promo Code"
		name="couponCode"
		required=""
		value=""
	>
```

## Invalid

```html_example
	<input
		class="b-input m-invalid"
		type="text"
		placeholder="Promo Code"
		name="couponCode"
		required=""
		value=""
	>
```

*/
.b-input {
  font-size: 16px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #cfcfcf;
  color: #000000;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  scroll-margin-top: 150px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, box-shadow;
  vertical-align: top;
  width: 100%;
  cursor: text;
}
@media not all and (pointer: coarse) {
  .b-input {
    font-size: 14px;
  }
}
.b-input::placeholder {
  font-weight: 400;
}
.b-input:focus {
  box-shadow: inset 0 0 0 1px #2a2a2a;
}
.b-input.m-invalid {
  box-shadow: inset 0 0 0 1px var(--color-error, #a21a10);
}
.b-input:disabled {
  background-color: #eeeeee;
  box-shadow: inset 0 0 0 1px #cfcfcf;
  color: #757575;
  cursor: default;
  pointer-events: none;
}
.b-input.pac-target-input {
  background-image: none !important; /* stylelint-disable declaration-no-important */
}
.b-input:-webkit-autofill {
  box-shadow: inset 0 0 0 1px #cfcfcf, inset 0 0 0 48px var(--input-bg, #ffffff);
}

/*md

# Select

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

<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-down-small" viewBox="0 0 10 6">
        <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>
    </symbol>
</svg>

```html_example
<div class="b-select">
	<select data-ref="field" class="b-select-input m-valid" id="" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
		<option value="US" data-id="US" selected="">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">
		<use href="#arrow-down-small"></use>
	</svg>
</div>
```

## Error State

```html_example
<div class="b-select">
	<select data-ref="field" class="b-select-input m-invalid" id="" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
		<option value="" data-id="0">Please select</option>
		<option value="US" data-id="1">United States</option>
		<option value="CA" data-id="2">Canada</option>
	</select>
	<svg aria-hidden="true" class="b-select-icon" width="10" height="6" focusable="false">
		<use href="#arrow-down-small"></use>
	</svg>
</div>
```

*/
.b-select {
  position: relative;
  width: 100%;
}
.b-select-icon_wrap {
  color: #000000;
}
.b-select-input {
  font-size: 16px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #cfcfcf;
  color: #000000;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  scroll-margin-top: 150px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, box-shadow;
  vertical-align: top;
  width: 100%;
  cursor: pointer;
  padding-inline-end: 36px;
  position: relative;
  -webkit-appearance: base-select;
          appearance: base-select;
}
@media not all and (pointer: coarse) {
  .b-select-input {
    font-size: 14px;
  }
}
.b-select-input::placeholder {
  font-weight: 400;
}
.b-select-input::picker(select) {
  -webkit-appearance: base-select;
          appearance: base-select;
}
.b-select-input.m-saved_addresses {
  font-weight: 400;
}
.b-select-input:focus::-ms-value {
  background: transparent;
  color: #000000;
}
.b-select-input::-ms-expand {
  display: none;
}
.b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000000;
}
.b-select-input.m-invalid {
  box-shadow: inset 0 0 0 1px var(--color-error, #a21a10);
}
.b-select-input.m-disabled, .b-select-input[disabled] {
  background-color: #eeeeee;
  box-shadow: inset 0 0 0 1px #cfcfcf;
  color: #757575;
  cursor: default;
  pointer-events: none;
}
.b-select-input.m-disabled + .b-select-icon_wrap, .b-select-input[disabled] + .b-select-icon_wrap {
  color: #d9d9d9;
}
.b-select-input:invalid {
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  font-weight: 400;
}
.m-animated:not(.m-static) .b-select-input:invalid {
  color: transparent;
}
.b-select-input option:checked {
  background: rgba(0, 0, 0, 0.08);
  font-weight: 700;
}
.b-select-input option[disabled] {
  color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
}
.b-select-input option {
  padding-left: 20px;
}
.b-select-input option::checkmark {
  display: none;
}
.b-select-input::picker-icon {
  display: none;
}
.b-select-input_as_text {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: 0;
  box-shadow: none;
  max-width: 100%;
  padding-inline-end: 0.1em;
  pointer-events: none;
  white-space: normal;
}
.b-select-icon {
  bottom: 0;
  pointer-events: none;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
}

option {
  color: #000000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
}

.b-stepper {
  align-items: center;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  display: flex;
  height: 32px;
  -webkit-user-select: none;
          user-select: none;
  width: 103px;
}
.b-stepper-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  min-width: 32px;
  text-align: center;
  touch-action: manipulation;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
.b-stepper-button:active {
  opacity: 0.5;
}
.b-stepper-button[disabled] {
  opacity: 0.2;
  pointer-events: none;
}
.b-stepper-button.m-products_count_0 > svg, .b-stepper-button.m-products_count_1 > svg {
  display: none;
}
.b-stepper-button.m-products_count_0 .b-cart_product-remove, .b-stepper-button.m-products_count_1 .b-cart_product-remove {
  display: flex;
  align-items: center;
}
.b-stepper-button.m-products_count_0 .b-stepper-remove_btn, .b-stepper-button.m-products_count_1 .b-stepper-remove_btn {
  display: flex;
  align-items: center;
}
.b-stepper-input {
  -webkit-appearance: none;
          appearance: none;
  border: 0;
  box-shadow: none;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  height: 100%;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.b-stepper-input[disabled] {
  cursor: default;
  opacity: 0.2;
}
.b-stepper-label {
  font-size: 16px;
}
@media not all and (pointer: coarse) {
  .b-stepper-label {
    font-size: 14px;
  }
}
.b-stepper-icon_trash {
  width: 18px;
}
.b-stepper-remove_btn {
  display: none;
}

.b-stepper svg {
  height: 16px;
  width: 16px;
}

/*md

# Form field

This component is basic building block of forms.
It used as container for any input and hold all required elements.

```
div.b-form_field
	label.b-form_field-label
	input.b-input | select.b-select | input.b-checkbox etc.
	div.b-form_field-caption
	div.b-form_field-message
```

## Label element

Label is optional element that add information about field purpose.

### Input element with label

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

### Label for mandatory input element

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

### Input element with link inside

It is bad practice to insert interactive elements inside other interactive elements,
but sometimes it is required. Label could hold link element inside of it.

```html_example
<div class="b-form_field m-required">
	<div class="b-checkbox">
		<input type="checkbox" class="b-checkbox-input" aria-describedby="dwfrm_profile_customer_agreeToPrivacy-error" value="true" required="">
		<svg class="b-checkbox-icon" width="22" height="22" viewBox="0 0 24 24" focusable="false">
			<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="M5.3 10.4l5.1 7 10-12"></path>
		</svg>
		<label class="b-form_field-label m-checkbox" for="dwfrm_profile_customer_agreeToPrivacy">
			<span class="b-form_field-required_mark" aria-hidden="true">*</span>
			I agree to <a href="/terms-and-conditions.html" class="b-form_field-link" target="_blank">Terms &amp; Conditions</a>
			&amp; <a href="/privacy-policy.html" class="b-form_field-link" target="_blank">Privacy Policy</a>
		</label>
	</div>
</div>
```

## Caption element

Caption element used to provide some additional information for the filed.

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

### Right aligned caption

```html_example
<div class="b-form_field">
	<label class="b-form_field-label" for="area1">
		Your message
	</label>
	<textarea
		id="area1"
		class="b-textarea m-valid"
		data-ref="field"
		placeholder="Enter your text…"
		rows="3"
	></textarea>
	<span class="b-form_field-caption m-end">
		180 symbols
	</span>
</div>
```

## Message element

This element is used to show success / error field-level messages. Most of the time it is
client-side field validation.

```html_example
<div class="b-form_field">
	<label class="b-form_field-label" for="input4">
		<span class="b-form_field-required_mark" aria-hidden="true">*</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_field-message">
		Coupon cannot be added to your cart
	</div>
	<span class="b-form_field-caption">
		Casing &amp; hyphens need to be exact
	</span>
</div>
```

## Different input elements inside `b-form_field`

### Select element with label

```html_example
<div class="b-form_field">
	<label class="b-form_field-label" for="select1">
		<span class="b-form_field-required_mark">*</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_field">
	<div class="b-checkbox">
		<input type="checkbox" class="b-checkbox-input" id="checkbox1">
		<svg class="b-checkbox-icon" width="22" height="22" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path class="b-checkbox-icon_check" fill="none" stroke="currentColor" d="m5.2686 10.371 5.1528 6.9837 9.8939-11.913"/>
		</svg>
		<label class="b-form_field-label" for="checkbox1">
			<span class="b-form_field-required_mark">*</span>
			Checkbox
		</label>
	</div>
</div>
```

## Different width of the field

`b-form_field` provide several types of the static width of the fields.
This is useful to give a hint to the user about how much information should be provided.
Ex - Postal code, Telephone number, Province code fields should not be long etc.

By default form field is stretched to the full width of the container.

### `m-medium`

```html_example
<div class="b-form_field m-medium">
	<label class="b-form_field-label" for="input1">
		Enter Promo Code
	</label>
	<input class="b-input" type="text" id="input1" placeholder="Promo Code" name="couponCode" required="" value="">
</div>
```

### `m-small`

```html_example
<div class="b-form_field m-small">
	<label class="b-form_field-label" for="input1">
		Enter Promo Code
	</label>
	<input class="b-input" type="text" id="input1" placeholder="Promo Code" name="couponCode" required="" value="">
</div>
```

*/
.b-form_field {
  margin-bottom: 24px;
  width: 100%;
}
.b-form_field.m-no_margin {
  margin-bottom: 0;
}
.b-form_field.m-top_margin {
  margin-top: 32px;
}
.b-form_field.m-small_margin {
  margin-bottom: 12px;
}
.b-form_field.m-checkbox-top .b-checkbox {
  align-items: flex-start;
}
.b-form_field.m-highlight {
  background: #f5f5f5;
  padding: 24px;
}
@media screen and (min-width: 768px) {
  .b-form_field.m-medium {
    width: calc(50% - 8px);
  }
}
.b-form_field.m-small {
  width: 150px;
}
.b-form_field.m-animated:not(.m-input_as_text) {
  padding-top: 8px;
  position: relative;
}
.b-form_field[data-widget=inputHidden] {
  margin: 0;
  padding: 0;
}
.b-form_field-label {
  display: flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 8px;
  padding: 0;
}
.b-form_field-label.m-radio {
  margin-bottom: 16px;
}
.b-form_field.m-animated:not(.m-input_as_text) .b-form_field-label {
  border-radius: 2px;
  color: #757575;
  cursor: text;
  font-weight: 400;
  left: 10px;
  line-height: 1;
  padding: 0 6px;
  position: absolute;
  top: 0;
  transform: translate(-2px, 25px) scale(1);
  transform-origin: left center;
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  -webkit-user-select: none;
          user-select: none;
  z-index: 1;
}
.b-form_field-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-form_field-label a {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-form_field-label a:hover {
    color: #757575;
  }
}
.b-form_field-required_mark {
  margin-inline-start: 4px;
  order: 1;
}
.b-checkbox .b-form_field-required_mark {
  margin-inline-end: 2px;
  margin-inline-start: 0;
}
.b-checkout_shipping_address_selector .b-form_field-required_mark {
  margin-inline-start: 0;
}
.b-form_field.b-checkout_shipping_address_selector .b-select {
  margin-bottom: 16px;
}
.b-form_field-caption {
  font-size: 12px;
  line-height: 16px;
  display: block;
  flex-grow: 1;
  font-weight: 400;
  margin-top: 8px;
}
.b-form_field-caption.m-end {
  text-align: end;
}
.b-form_field-caption.m-counter {
  color: #757575;
}
.b-form_field-caption.m-with_icon {
  display: flex;
  gap: 8px;
}
.b-form_field-message {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-error, #a21a10);
  display: block;
  font-weight: 400;
}
.b-form_field-message, .b-user_content .b-form_field-message {
  margin-top: 8px;
}
.b-form_field-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
  display: inline-block;
}
@media not all and (pointer: coarse) {
  .b-form_field-link:hover {
    color: #757575;
  }
}
.b-form_field.m-animated .b-form_field {
  position: relative;
}
.b-form_field.m-google_recaptcha .b-form_field-message {
  margin: 24px 0;
}
.b-form_field .b-tooltip {
  position: absolute;
  right: 3%;
  top: 25px;
}
.b-form_field fieldset {
  border: none;
  display: block;
  padding: 0;
  position: relative;
}

.b-form_field {
  display: flex;
  flex-direction: column;
}
.m-animated:not(.m-input_as_text) .b-form_field-label {
  font-size: 14px;
}
.b-form_field-caption.m-counter {
  color: #000000;
}
.b-form_field .b-form_field-message {
  order: 5;
}
.b-form_field .b-tooltip {
  height: 22px;
  position: absolute;
  right: 2%;
  top: 20px;
  width: 22px;
}
.b-form_field.m-valid.m-animated {
  position: relative;
  /* stylelint-disable-next-line order/order */
}
.b-form_field.m-valid.m-animated::after {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#success");
          mask-image: url("../images/icons-sprite.svg#success");
  -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%;
  min-width: 24px;
  width: 24px;
}
.b-form_field.m-valid.m-animated .b-tooltip {
  right: 8%;
}
@media screen and (min-width: 768px) {
  .b-form_field.m-valid.m-animated .b-tooltip {
    right: 5%;
  }
}
.b-form_field.m-valid.m-animated::after {
  color: #457030;
  position: absolute;
  right: 8px;
  top: 20px;
}
.b-form_field.m-valid.m-animated .b-input {
  padding-right: 40px;
}
.b-form_field.m-valid.m-animated[data-widget=inputCheckbox]::after, .b-form_field.m-valid.m-animated[data-widget=radioSelector]::after, .b-form_field.m-valid.m-animated[data-widget=inputPassword]::after, .b-form_field.m-valid.m-animated[data-widget=inputSelect]::after, .b-form_field.m-valid.m-animated.b-newsletters-field::after, .b-login_email .b-form_field.m-valid.m-animated::after {
  content: none;
}
.b-form_field.m-valid.m-animated[data-widget=inputCheckbox] .b-input, .b-form_field.m-valid.m-animated[data-widget=radioSelector] .b-input, .b-form_field.m-valid.m-animated[data-widget=inputPassword] .b-input, .b-form_field.m-valid.m-animated[data-widget=inputSelect] .b-input, .b-form_field.m-valid.m-animated.b-newsletters-field .b-input, .b-login_email .b-form_field.m-valid.m-animated .b-input {
  padding-right: 16px;
}

@media screen and (min-width: 768px) {
  .b-form-line .b-form_field {
    /* stylelint-disable-next-line no-descending-specificity */
  }
  .b-form-line .b-form_field .b-tooltip {
    right: 3.5%;
  }
  .b-form-line .b-form_field.m-animated.m-valid .b-tooltip {
    right: 10%;
  }
}
/*md

# b-checkbox

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

*/
.b-checkbox {
  align-items: center;
  display: flex;
  padding-block: 2px;
  padding-left: 2px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.b-checkbox-top {
  align-items: flex-start;
}
.b-checkbox-input {
  cursor: pointer;
  height: 20px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 20px;
  z-index: 1;
}
html[dir=rtl] .b-checkbox-input {
  left: initial;
  right: 0;
}
.b-checkbox-icon {
  background: transparent;
  border: 1px solid #cfcfcf;
  border-radius: 2px;
  cursor: pointer;
  height: 20px;
  margin-inline-end: 12px;
  min-width: 20px;
  position: relative;
  transition: border-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 20px;
}
.b-checkbox-icon path {
  transform: scale(0);
  transform-origin: center center;
}
.b-checkbox-input:checked + .b-checkbox-icon {
  background: #262424;
  border-color: #262424;
  color: #ffffff;
}
.b-checkbox-input:checked + .b-checkbox-icon path {
  transform: scale(1);
}
.b-checkbox-input[disabled] + .b-checkbox-icon {
  background: #e1e1e1;
  border-color: #e1e1e1;
  cursor: default;
}
.b-checkbox-input.m-invalid + .b-checkbox-icon {
  border-color: var(--color-error, #a21a10);
}
.b-checkbox-label {
  cursor: pointer;
}
.b-checkbox-input[disabled] ~ .b-checkbox-label {
  color: #9a9a9a;
  cursor: default;
}
.b-subscriptions-sms_checkboxwrapper .b-checkbox-input[disabled] ~ .b-checkbox-label {
  color: #757575;
  opacity: 1;
}
.b-subscriptions-sms_checkboxwrapper .b-checkbox-input[disabled] ~ .b-checkbox-label a {
  color: #000;
}

.b-password_estimator {
  margin-top: 8px;
}
.b-password_estimator-inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.b-password_estimator-indicator {
  display: flex;
  padding: 8px 0;
}
.b-password_estimator-indicator_item {
  background-color: #cfcfcf;
  height: 3px;
  margin-inline-end: 4px;
  transition: background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 35px;
}
@media screen and (min-width: 768px) {
  .b-password_estimator-indicator_item {
    width: 50px;
  }
}
.b-password_estimator-indicator_item:last-child {
  margin-inline-end: 0;
}
.b-password_estimator-indicator_item.m-weak {
  background-color: #a21a10;
}
.b-password_estimator-indicator_item.m-medium {
  background-color: #f5a623;
}
.b-password_estimator-indicator_item.m-strong {
  background-color: #457030;
}
@media screen and (min-width: 1367px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 35px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 28px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-confirmation_create_account .b-password_estimator-indicator_item {
    width: 70px;
  }
}
.b-password_estimator-indicator_description {
  font-size: 12px;
  font-weight: 500;
}
.b-password_estimator-caption {
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.b-countdown {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.b-countdown-time {
  font-weight: 600;
  font-size: 20px;
  position: absolute;
}
@media screen and (min-width: 1024px) {
  .b-countdown-time {
    font-size: 24px;
  }
}
.b-countdown-icon {
  height: 190px;
  transform: rotateZ(-90deg);
  width: 190px;
}
.b-countdown-circle_bg {
  fill: none;
  stroke: #f5f5f5;
  stroke-width: 5px;
}
.b-countdown-circle_animated {
  fill: none;
  stroke: #a21a10;
  stroke-width: 5px;
  transition: stroke-dashoffset 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);
  visibility: visible;
  animation: dialog-backdrop cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
.b-minicart_panel-container.m-opened {
  overflow: hidden;
}

.b-minicart {
  background-color: #ffffff;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 512px;
  overflow: hidden;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 17;
  right: 0;
  transform: translateX(100%);
}
html[dir=rtl] .b-minicart {
  left: 0;
  right: initial;
  transform: translateX(-100%);
}
.b-minicart.m-closed, .b-minicart.m-active {
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: transform, visibility;
}
.b-minicart.m-active {
  transform: translateX(0);
  visibility: visible;
}
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 #262424;
  border-left-color: #f5f5f5;
  border-radius: 50%;
  border-top-color: #f5f5f5;
  content: "";
  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 {
  display: flex;
  flex-flow: column;
  height: 100%;
  padding-top: 32px;
}
.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-header, .b-minicart-messages, .b-minicart-discounts, .b-minicart-content, .b-minicart-footer, .b-minicart-empty {
  padding: 0 32px;
}
@media screen and (max-width: 767.9px) {
  .b-minicart-header, .b-minicart-messages, .b-minicart-discounts, .b-minicart-content, .b-minicart-footer, .b-minicart-empty {
    padding: 0 16px;
  }
}
.b-minicart-messages_item {
  margin: 20px 0 0;
}
.b-minicart-content {
  overflow-y: auto;
  padding-bottom: 20px;
}
.b-minicart-discounts {
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .b-minicart-discounts {
    margin-bottom: 8px;
  }
}
.b-minicart-summary {
  border-top: 2px solid #cfcfcf;
  padding: 16px 0;
}
.b-minicart-title {
  font-size: 14px;
  font-weight: 500;
}
.b-minicart-actions {
  margin-top: 40px;
}
.b-minicart-actions .b-button {
  width: 100%;
}
.b-minicart-actions .b-button + .b-button {
  margin-top: 16px;
}
.b-minicart-empty {
  font-size: 16px;
  font-weight: 600;
  display: grid;
  height: 100%;
  padding-bottom: 64px;
  text-align: center;
}
.b-minicart-empty_icon {
  display: none;
}
.b-minicart .b-form_field {
  margin-bottom: 0;
}

.b-minicart-title {
  font-size: 16px;
  font-weight: 600;
}

.b-product_line {
  font-size: 12px;
  padding-bottom: 24px;
  position: relative;
}
.b-product_line:not(.m-checkout):first-of-type {
  border-top: none;
}
.b-product_line.m-checkout {
  font-size: 12px;
  line-height: 16px;
}
.b-product_line.m-bonus {
  border-top: 1px solid #cfcfcf !important; /* stylelint-disable declaration-no-important */
  padding-bottom: 0;
}
.b-product_line.m-oms {
  border-top: 0;
  padding-bottom: 32px;
  padding-top: 0;
}
.b-product_line-message {
  margin-bottom: 20px;
}
.b-product_line-message.m-no_bg {
  margin-bottom: 8px;
  padding: 0;
}
.b-product_line-link {
  display: block;
}
.b-product_line-availability {
  white-space: nowrap;
}
.b-product_line-availability .b-availability {
  margin-top: 18px;
}
.b-product_line-attribute {
  margin-top: 4px;
  word-break: break-word;
}
.b-product_line-attribute_value {
  word-break: break-word;
}
.b-product_line-attribute_value.m-gift_certificate, .b-product_line-attribute_value.m-gift_certificate_email {
  display: inline-block;
}
.b-product_line-bundle_title {
  margin-bottom: 8px;
}
.b-product_line-bundle_item {
  margin-bottom: 4px;
}
.b-product_line-bundle_item:not(:last-child)::after {
  content: ",";
}
.b-product_line-price_each {
  margin-inline-end: 4px;
}
.b-product_line-info {
  grid-area: qty;
}
.b-product_line-info .b-form_field-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-product_line-qty {
  display: flex;
}
.b-product_line.m-checkout .b-product_line-qty {
  margin-top: 4px;
}
.b-product_line-qty_number {
  font-weight: 400;
}
.b-product_line-stepper {
  margin: 16px 0;
}
.b-product_line-remove {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.b-product_line-actions {
  grid-area: actions;
  margin-top: 12px;
}
.b-product_line-bonus {
  margin-top: 24px;
}
.b-product_line-bonus_title {
  font-size: 12px;
  font-weight: 500;
}

.b-product_line {
  font-size: 14px;
}
.b-product_line-attributes > p {
  text-transform: capitalize;
}
.b-product_line-attributes > p span {
  text-transform: initial;
}
.b-product_line-remove {
  margin-top: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.b-product_line-bundle {
  margin-top: 4px;
}
.b-product_line.m-checkout {
  font-size: 14px;
  line-height: 1.3;
}
.b-product_line .b-availability {
  white-space: initial;
  width: 100%;
}
.b-product_line-image {
  width: 123px;
  padding-left: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.b-product_line-title {
  font-weight: 600;
}
.b-product_line-inner {
  font-size: 12px;
  display: flex;
  column-gap: 8px;
}
.b-product_line-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  line-height: 1.28;
  margin-bottom: 8px;
}

.b-product_tile {
  font-size: 12px;
  position: relative;
  width: 100%;
}
.m-text_inverted .b-product_tile {
  color: #ffffff;
}
.m-text_inverted .b-product_tile .b-button.m-outline {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.m-text_inverted .b-product_tile .b-button.m-outline:hover {
  background: #ffffff;
  color: #000;
}
.b-product_tile-top {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.b-product_tile-eyebrow {
  font-size: 12px;
  line-height: 16px;
  color: #a21a10;
  font-weight: 600;
  margin-top: 8px;
}
.b-product_tile-content {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding: 8px;
  gap: 4px;
}
.b-product_tile-content .b-product_eyebrow {
  color: #757575;
  font-size: 14px;
  text-transform: uppercase;
}
.m-text_inverted .b-product_tile-content .b-product_eyebrow {
  color: #e1e1e1;
}
.b-product_tile-content .b-product_eyebrow-wrap {
  line-height: 1;
  margin-top: 16px;
}
.b-product_tile-content .b-product_eyebrow-text {
  font-weight: 600;
}
.b-product_tile-content .b-product_labels {
  color: #757575;
  font-size: 14px;
  margin-top: 5px;
}
.m-text_inverted .b-product_tile-content .b-product_labels {
  color: #e1e1e1;
}
.b-product_tile-content .b-product_labels-list {
  line-height: 1.5;
}
.b-product_tile-content .b-product_labels-item:not(:last-of-type)::after {
  content: ",";
  display: inline-block;
}
.b-product_tile-content .b-price-item {
  font-size: 18px;
  margin-top: 0;
  white-space: initial;
}
.m-text_inverted .b-product_tile-content .b-price-item.m-old {
  color: #e1e1e1;
}
.m-text_inverted .b-product_tile-content .b-price-item.m-new {
  color: #ffdada;
}
.b-product_tile-content .b-rating {
  margin-top: 4px;
  padding-bottom: 4px;
}
.b-product_tile-content .b-promotion {
  margin-top: 16px;
  order: 2;
}
.b-product_tile-image_link {
  display: block;
}
.b-product_tile-image_link.m-not_available {
  opacity: 0.5;
}
.b-product_tile-image_link.m-ext {
  border: 1px solid #cfcfcf;
}
.b-product_tile-image {
  background: #ffffff;
  border: 1px solid #cfcfcf;
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  border: 0;
}
.b-product_tile-image img {
  border: 0;
  bottom: 0;
  color: #ffffff;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  object-position: var(--img-obj-position);
}
.b-product_tile-quick_buy {
  margin: 20px auto 0 0;
}
.b-product_tile-quick_view {
  display: inline-flex;
  gap: 0;
  margin: 20px auto 0 0;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .b-product_tile-quick_view {
    display: none;
  }
}
.b-product_tile-quick_view.m-product_set, .b-product_tile-quick_view.m-bundle {
  display: none;
}
.b-product_tile-quick_view svg {
  height: 20px;
  width: 20px;
}
.b-product_tile-details_link {
  align-self: flex-start;
  margin-top: 20px;
}
.b-product_tile-no_available {
  font-size: 12px;
  font-weight: 500;
  background: #a21a10;
  bottom: 0;
  color: #ffffff;
  left: 0;
  padding: 8px 12px;
  position: absolute;
  text-transform: uppercase;
  z-index: 2;
}
.b-product_tile-title {
  font: 600 18px / 27px "FannDorenGrotesque", monospace;
}
.b-product_eyebrow + .b-product_tile-title {
  margin-top: 10px;
}
.b-product_tile-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  display: block;
}
@media not all and (pointer: coarse) {
  .b-product_tile-link:hover {
    color: #757575;
  }
}
.b-product_tile-description {
  font-size: 14px;
  line-height: 1.5;
}
.b-product_tile-actions {
  margin-top: 24px;
}
.b-product_tile.m-hero_product {
  grid-column: span 2;
  grid-row: span 2;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile .b-price {
    gap: 0;
  }
}
.b-product_tile-quick_view_button {
  position: absolute;
  top: 0;
  right: 0;
  width: 56px;
  height: 56px;
  padding: 4px;
  cursor: pointer;
}
.b-product_tile-quick_view_button-inner {
  display: block;
  margin: 8px;
  padding: 4px;
}
.b-product_tile-quick_view_button-inner:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.b-product_tile-quick_view_button-inner svg {
  width: 24px;
  height: 24px;
}

/*md

# b-product_tile_swatches

Product tile swatches is component that used to show that product has additional color variations.

This is simplified version of PDP swatches, the difference is it 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" style="background-color: #2e7d32"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="Black color" style="background-color: #000000"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="White color" style="background-color: #FFFFFF"></a>
	<a class="b-product_tile_swatches-leftover" href="#" title="Show all" aria-label="Show all">+1</a>
</div>
```
*/
.b-product_tile_swatches {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  font-size: 0;
  line-height: 0;
  max-height: 1000px;
  transition: max-height cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-product_tile_swatches.m-compact {
  max-height: 48px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .b-product_tile_swatches.m-compact {
    max-height: 40px;
  }
}
.b-product_tile_swatches-leftover {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  font-size: 14px;
  border: 1px solid #cfcfcf;
  border-radius: 50%;
  color: #757575;
  font-size: 12px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  margin-inline-end: 8px;
  margin-top: 8px;
  min-width: 0;
  order: 1;
  text-align: center;
  width: 40px;
}
@media not all and (pointer: coarse) {
  .b-product_tile_swatches-leftover:hover {
    color: #757575;
  }
}
@media screen and (min-width: 768px) {
  .b-product_tile_swatches-leftover {
    height: 32px;
    line-height: 32px;
    width: 32px;
  }
}
.b-product_tile_swatches-swatch {
  box-shadow: inset 0 0 0 var(--swatch-outline, 4px) #ffffff;
  display: flex;
  position: relative;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  margin-inline-end: 8px;
  margin-top: 8px;
  min-width: 0;
  order: 2;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile_swatches-swatch {
    min-width: var(--swatch-size-sm, 40px);
  }
}
@media not all and (pointer: coarse) {
  .b-product_tile_swatches-swatch:hover {
    border: 1px solid #000000;
  }
}
.b-product_tile_swatches-swatch.m-order-before {
  order: 0;
}
.b-product_tile_swatches-swatch.m-selected {
  border: 1px solid #000000;
}
.b-product_tile_swatches-color_value {
  background-size: cover;
  border: 1px solid #949494;
  border-radius: 100%;
  display: block;
  height: 100%;
  width: 100%;
}

.b-product_tile_alt_view::before {
  background-color: #000;
  transform: translateX(-16px);
}
.b-product_tile_alt_view::after {
  background-color: #d9d9d9;
  transform: translateX(2px);
}
.b-product_tile_alt_view::after, .b-product_tile_alt_view::before {
  border: 1px solid #f5f5f5;
  border-radius: 100%;
  bottom: 10px;
  content: "";
  display: inline-block;
  height: 10px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  width: 10px;
  z-index: 1;
}
@media not all and (pointer: coarse) {
  .b-product_tile_alt_view::after, .b-product_tile_alt_view::before {
    content: none;
  }
}
.b-carousel .b-product_tile_alt_view::after, .b-carousel .b-product_tile_alt_view::before {
  display: none;
}
.b-product_tile_alt_view.m-alt_active::before {
  background-color: #d9d9d9;
}
.b-product_tile_alt_view.m-alt_active::after {
  background-color: #000;
}
.b-product_tile_alt_view-track {
  display: flex;
  height: 100%;
  overflow: hidden;
  -ms-overflow-style: none;
  overflow-x: auto;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 100%;
}
.b-product_tile_alt_view-track::-webkit-scrollbar {
  display: none;
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-track {
  height: auto;
}
.b-product_tile_alt_view-item {
  height: 100%;
  min-width: 100%;
  scroll-snap-align: start;
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-item {
  height: auto;
}
@media not all and (pointer: coarse) {
  .b-product_tile_alt_view-item.m-alt {
    background-color: #ffffff;
    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;
  }
  .b-product_tile_alt_view:hover .b-product_tile_alt_view-item.m-alt {
    opacity: 1;
  }
}
.b-carousel .b-product_tile_alt_view-item.m-alt {
  display: none;
}
@media not all and (pointer: coarse) {
  .b-carousel .b-product_tile_alt_view-item.m-alt {
    display: block;
  }
}

/*md

# b-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 {
  align-items: center;
  display: flex;
}
.b-rating-link {
  align-items: center;
  cursor: pointer;
  display: flex;
}
.b-rating-star {
  margin-right: 0 !important;
}
.b-rating-stars {
  font-size: 0 !important;
  letter-spacing: 2px;
  margin-right: 8px !important;
}
.b-rating-number {
  font-size: 14px;
  margin-inline-start: 8px;
  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">
	<span class="b-price-item">
		$9.99
	</span>
</div>
```

## Sale price

```html_example
<div class="b-price">
	<span class="b-sr_only">Was</span>
	<span class="b-price-item m-old">
		$11.99
	</span>
	<span class="b-sr_only">, is</span>
	<span class="b-price-item">
		$9.99
	</span>
</div>
```

## Price range

```html_example
<div class="b-price">
	<span class="b-price-item">
		$9.99
	</span>
	<span class="b-price-divider">-</span>
	<span class="b-price-item">
		$11.99
	</span>
</div>
```

## Free price

```html_example
<div class="b-price">
	<span class="b-price-item m-free">
		FREE
	</span>
</div>
```

*/
.b-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  position: relative;
}
.b-product_details-form .b-price {
  align-items: center;
  font-weight: 600;
}
.b-price-item {
  display: inline-block;
  font-weight: 500;
  order: 0;
  white-space: nowrap;
}
.b-price-item.m-old {
  color: rgba(0, 0, 0, 0.6);
  order: 2;
  text-decoration: line-through;
}
.b-price-item.m-new {
  order: 1;
}
.b-price-item.m-label, .b-price-item.m-new {
  color: #a21a10;
  white-space: initial;
}
.b-price-per_unit {
  color: #757575;
  font-size: 14px;
  font-weight: 400;
}
.b-price-label {
  font-size: 0.875em;
  text-transform: uppercase;
}
.b-price-badge {
  display: none;
  order: 2;
}
.b-product_details-form .b-price-badge {
  color: #000;
  display: inline-block;
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  margin-top: -0.1em;
  order: 0;
}

/*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 details in dialog

```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: 12px;
  font-weight: 500;
  position: relative;
}
.b-promotion.m-alert {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  border: 1px #d9d9d9 solid;
  padding: 12px 24px;
}
.b-promotion.m-alert .m-bold {
  font-weight: 600;
}
.b-promotion.m-details {
  align-items: center;
  display: flex;
  margin: 8px 0;
}
.b-promotion-message {
  background-color: #f5f5f5;
  border-radius: 2px;
  color: #000000;
  display: flex;
  margin: 8px 0;
  padding: 8px 12px;
  width: fit-content;
}
.b-promotion-message:empty {
  display: none;
}
.b-promotion-message.m-centered {
  text-align: center;
  width: 100%;
}
.b-promotion-message.m-large {
  padding: 16px 20px;
}
.b-promotion-message.m-approaching {
  font-size: 14px;
  background-color: inherit;
  display: block;
  padding: 0;
  text-align: start;
}
@media screen and (max-width: 767.9px) {
  .b-promotion-message.m-approaching {
    font-size: 15px;
  }
}
.b-promotion-message.m-alternative {
  margin-bottom: 0;
}
.m-details > .b-promotion-message {
  margin: 0;
}
.b-promotion-message a {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-promotion-message a:hover {
    color: inherit;
    text-decoration: none;
  }
}
.b-promotion-details {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
  margin-inline: 4px;
}
@media not all and (pointer: coarse) {
  .b-promotion-details:hover {
    color: #757575;
  }
}

/*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-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-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-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 {
  align-items: center;
  display: flex;
  font-weight: 500;
}
.b-availability.m-instock .b-availability-icon {
  color: #457030;
}
.b-availability.m-outofstock {
  color: #a21a10;
}
.b-availability.m-lowinstock .b-availability-icon {
  color: #f5a623;
}
.b-availability.m-instoreonly {
  color: #a21a10;
}
.b-availability-icon {
  align-items: center;
  display: flex;
  margin-inline-end: 8px;
}
.b-availability-message.m-select_options_first {
  color: #a21a10;
}

.b-geolocation {
  background-color: #ffffff;
  bottom: 120px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  max-height: calc(100vh - 32px);
  max-width: calc(100% - 32px);
  overflow: auto;
  padding: 32px;
  position: fixed;
  width: 584px;
  z-index: 20;
}
@media screen and (max-width: 767.9px) {
  .b-geolocation {
    right: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-geolocation {
    right: 30px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-geolocation {
    right: 40px;
  }
}
@media screen and (min-width: 1367px) {
  .b-geolocation {
    right: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-geolocation {
    bottom: 192px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-geolocation {
    bottom: calc(50% - 160px);
    padding: 32px 16px;
  }
}
.b-geolocation-close {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 24px;
  border-radius: 100%;
  color: #000000;
  position: absolute;
  right: 16px;
  top: 16px;
}
@media not all and (pointer: coarse) {
  .b-geolocation-close:hover {
    color: #757575;
  }
}
html[dir=rtl] .b-geolocation-close {
  left: 16px;
  right: initial;
}
.b-geolocation-message {
  margin-inline-end: 40px;
}
.b-geolocation-actions {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}
@media screen and (min-width: 768px) {
  .b-geolocation-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*md

# Curalate

*/
/* stylelint-disable */
body.l-page #crl8-homepage-carousel,
body.l-page #crl8-product-carousel,
body.l-page #crl8-category-carousel {
  padding: 40px 30px;
  /* Image */
  /* Hovered image */
  /* arrows */
}
@media screen and (max-width: 1023.9px) {
  body.l-page #crl8-homepage-carousel,
  body.l-page #crl8-product-carousel,
  body.l-page #crl8-category-carousel {
    padding: 40px 0;
  }
}
@media screen and (max-width: 767.9px) {
  body.l-page #crl8-homepage-carousel .eAaVxo,
  body.l-page #crl8-product-carousel .eAaVxo,
  body.l-page #crl8-category-carousel .eAaVxo {
    padding: 0;
    margin: 0 -10px;
  }
}
@media screen and (max-width: 767.9px) {
  body.l-page #crl8-homepage-carousel .gpSdOR,
  body.l-page #crl8-product-carousel .gpSdOR,
  body.l-page #crl8-category-carousel .gpSdOR {
    right: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  body.l-page #crl8-homepage-carousel .bDxbFr,
  body.l-page #crl8-product-carousel .bDxbFr,
  body.l-page #crl8-category-carousel .bDxbFr {
    left: 16px;
  }
}
body.l-page #crl8-homepage-carousel .eDvSyS,
body.l-page #crl8-homepage-carousel .hPdjKr,
body.l-page #crl8-product-carousel .eDvSyS,
body.l-page #crl8-product-carousel .hPdjKr,
body.l-page #crl8-category-carousel .eDvSyS,
body.l-page #crl8-category-carousel .hPdjKr {
  height: 44px;
  width: 44px;
}
body.l-page #crl8-homepage-carousel .efqEJB,
body.l-page #crl8-homepage-carousel .bZXxyG,
body.l-page #crl8-product-carousel .efqEJB,
body.l-page #crl8-product-carousel .bZXxyG,
body.l-page #crl8-category-carousel .efqEJB,
body.l-page #crl8-category-carousel .bZXxyG {
  padding: 0;
}
body.l-page #crl8-homepage-carousel .ciTgsC,
body.l-page #crl8-homepage-carousel .efqEJB,
body.l-page #crl8-product-carousel .ciTgsC,
body.l-page #crl8-product-carousel .efqEJB,
body.l-page #crl8-category-carousel .ciTgsC,
body.l-page #crl8-category-carousel .efqEJB {
  margin-bottom: 40px;
}
body.l-page #crl8-homepage-carousel .ikRdBV,
body.l-page #crl8-product-carousel .ikRdBV,
body.l-page #crl8-category-carousel .ikRdBV {
  font-weight: 600;
  font-size: 24px;
  color: #000000;
  margin-bottom: 24px;
}
@media screen and (min-width: 1024px) {
  body.l-page #crl8-homepage-carousel .ikRdBV,
  body.l-page #crl8-product-carousel .ikRdBV,
  body.l-page #crl8-category-carousel .ikRdBV {
    font-size: 32px;
  }
}
body.l-page #crl8-homepage-carousel .gxOVjf,
body.l-page #crl8-product-carousel .gxOVjf,
body.l-page #crl8-category-carousel .gxOVjf {
  font-size: 14px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  body.l-page #crl8-homepage-carousel .gxOVjf,
  body.l-page #crl8-product-carousel .gxOVjf,
  body.l-page #crl8-category-carousel .gxOVjf {
    font-size: 18px;
    font-weight: 400;
  }
}
body.l-page #crl8-homepage-carousel .kQolpG,
body.l-page #crl8-product-carousel .kQolpG,
body.l-page #crl8-category-carousel .kQolpG {
  align-items: center;
  background: #262424;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: 700 16px / 1 "FannDorenGrotesque", monospace;
  gap: 4px;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  padding-inline: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, border-color, color;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  background: transparent;
  border: none;
  border-bottom: 2px solid;
  border-radius: 0;
  color: #262424;
  font-size: 16px;
  font-weight: 700;
  gap: 8px;
  height: 22px;
  line-height: 1;
  padding: 0;
  position: relative;
  text-transform: uppercase;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  margin-bottom: 0;
  width: auto;
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel .kQolpG:hover,
  body.l-page #crl8-product-carousel .kQolpG:hover,
  body.l-page #crl8-category-carousel .kQolpG:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
  }
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel .kQolpG:hover,
  body.l-page #crl8-product-carousel .kQolpG:hover,
  body.l-page #crl8-category-carousel .kQolpG:hover {
    background: transparent;
    border: none;
    border-bottom: 2px solid;
    color: #000000;
  }
}
body.l-page #crl8-homepage-carousel .kQolpG:focus,
body.l-page #crl8-product-carousel .kQolpG:focus,
body.l-page #crl8-category-carousel .kQolpG:focus {
  background: transparent;
  border: none;
  border-bottom: 2px solid;
  color: #000000;
}
body.l-page #crl8-homepage-carousel .FkeCM,
body.l-page #crl8-product-carousel .FkeCM,
body.l-page #crl8-category-carousel .FkeCM {
  padding: 0;
  margin-bottom: 40px;
}
body.l-page #crl8-homepage-carousel .bwOrop picture img,
body.l-page #crl8-product-carousel .bwOrop picture img,
body.l-page #crl8-category-carousel .bwOrop picture img {
  border: 1px solid #cfcfcf;
}
body.l-page #crl8-homepage-carousel .dTzKVJ,
body.l-page #crl8-product-carousel .dTzKVJ,
body.l-page #crl8-category-carousel .dTzKVJ {
  font-weight: 600;
  font-size: 20px;
  text-transform: capitalize;
  padding-bottom: 0;
}
@media screen and (min-width: 1024px) {
  body.l-page #crl8-homepage-carousel .dTzKVJ,
  body.l-page #crl8-product-carousel .dTzKVJ,
  body.l-page #crl8-category-carousel .dTzKVJ {
    font-size: 24px;
  }
}
body.l-page #crl8-homepage-carousel .haFYZR,
body.l-page #crl8-product-carousel .haFYZR,
body.l-page #crl8-category-carousel .haFYZR {
  gap: 32px;
  background-color: rgba(0, 0, 0, 0.5);
}
body.l-page #crl8-homepage-carousel .dTzKVJ,
body.l-page #crl8-homepage-carousel .hPGzOp,
body.l-page #crl8-homepage-carousel .gemcCN,
body.l-page #crl8-product-carousel .dTzKVJ,
body.l-page #crl8-product-carousel .hPGzOp,
body.l-page #crl8-product-carousel .gemcCN,
body.l-page #crl8-category-carousel .dTzKVJ,
body.l-page #crl8-category-carousel .hPGzOp,
body.l-page #crl8-category-carousel .gemcCN {
  opacity: 0.5;
}
body.l-page #crl8-homepage-carousel .hPGzOp,
body.l-page #crl8-product-carousel .hPGzOp,
body.l-page #crl8-category-carousel .hPGzOp {
  height: 32px;
  width: 32px;
}
body.l-page #crl8-homepage-carousel .hPGzOp,
body.l-page #crl8-product-carousel .hPGzOp,
body.l-page #crl8-category-carousel .hPGzOp {
  margin: 0;
}
body.l-page #crl8-homepage-carousel .gemcCN,
body.l-page #crl8-product-carousel .gemcCN,
body.l-page #crl8-category-carousel .gemcCN {
  font-size: 18px;
  position: static;
}
body.l-page #crl8-homepage-carousel .kHtTmt,
body.l-page #crl8-homepage-carousel .hvMCaU,
body.l-page #crl8-homepage-carousel .eDvSyS,
body.l-page #crl8-homepage-carousel .hPdjKr,
body.l-page #crl8-product-carousel .kHtTmt,
body.l-page #crl8-product-carousel .hvMCaU,
body.l-page #crl8-product-carousel .eDvSyS,
body.l-page #crl8-product-carousel .hPdjKr,
body.l-page #crl8-category-carousel .kHtTmt,
body.l-page #crl8-category-carousel .hvMCaU,
body.l-page #crl8-category-carousel .eDvSyS,
body.l-page #crl8-category-carousel .hPdjKr {
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.9;
}
body.l-page #crl8-homepage-carousel .kHtTmt svg,
body.l-page #crl8-homepage-carousel .hvMCaU svg,
body.l-page #crl8-homepage-carousel .eDvSyS svg,
body.l-page #crl8-homepage-carousel .hPdjKr svg,
body.l-page #crl8-product-carousel .kHtTmt svg,
body.l-page #crl8-product-carousel .hvMCaU svg,
body.l-page #crl8-product-carousel .eDvSyS svg,
body.l-page #crl8-product-carousel .hPdjKr svg,
body.l-page #crl8-category-carousel .kHtTmt svg,
body.l-page #crl8-category-carousel .hvMCaU svg,
body.l-page #crl8-category-carousel .eDvSyS svg,
body.l-page #crl8-category-carousel .hPdjKr svg {
  display: none;
}
body.l-page #crl8-homepage-carousel .kHtTmt::before,
body.l-page #crl8-homepage-carousel .hPdjKr::before,
body.l-page #crl8-product-carousel .kHtTmt::before,
body.l-page #crl8-product-carousel .hPdjKr::before,
body.l-page #crl8-category-carousel .kHtTmt::before,
body.l-page #crl8-category-carousel .hPdjKr::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#circle-arrow-back");
          mask-image: url("../images/icons-sprite.svg#circle-arrow-back");
  -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%;
  min-width: 24px;
  width: 24px;
}
body.l-page #crl8-homepage-carousel .hvMCaU::before,
body.l-page #crl8-homepage-carousel .eDvSyS::before,
body.l-page #crl8-product-carousel .hvMCaU::before,
body.l-page #crl8-product-carousel .eDvSyS::before,
body.l-page #crl8-category-carousel .hvMCaU::before,
body.l-page #crl8-category-carousel .eDvSyS::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#circle-arrow-forward");
          mask-image: url("../images/icons-sprite.svg#circle-arrow-forward");
  -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%;
  min-width: 24px;
  width: 24px;
}
body.l-page #crl8-homepage-carousel .gBPcUN,
body.l-page #crl8-product-carousel .gBPcUN,
body.l-page #crl8-category-carousel .gBPcUN {
  justify-content: center;
}
body.l-page #crl8-homepage-carousel .dpCJVr,
body.l-page #crl8-homepage-carousel .iKXLNq,
body.l-page #crl8-product-carousel .dpCJVr,
body.l-page #crl8-product-carousel .iKXLNq,
body.l-page #crl8-category-carousel .dpCJVr,
body.l-page #crl8-category-carousel .iKXLNq {
  position: static;
}
body.l-page #crl8-homepage-carousel-uploader,
body.l-page #crl8-product-carousel-uploader,
body.l-page #crl8-category-carousel-uploader {
  /* popup */
}
body.l-page #crl8-homepage-carousel-uploader .HMRRI,
body.l-page #crl8-homepage-carousel-uploader .hiXAEU,
body.l-page #crl8-product-carousel-uploader .HMRRI,
body.l-page #crl8-product-carousel-uploader .hiXAEU,
body.l-page #crl8-category-carousel-uploader .HMRRI,
body.l-page #crl8-category-carousel-uploader .hiXAEU {
  font-size: 18px;
  font: 600 24px / 30px "FannDorenGrotesque", monospace;
  color: #000000;
}
@media screen and (min-width: 768px) {
  body.l-page #crl8-homepage-carousel-uploader .HMRRI,
  body.l-page #crl8-homepage-carousel-uploader .bqxyRs,
  body.l-page #crl8-product-carousel-uploader .HMRRI,
  body.l-page #crl8-product-carousel-uploader .bqxyRs,
  body.l-page #crl8-category-carousel-uploader .HMRRI,
  body.l-page #crl8-category-carousel-uploader .bqxyRs {
    border-bottom: 1px solid #cfcfcf;
    padding-bottom: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  body.l-page #crl8-homepage-carousel-uploader .gzieuL,
  body.l-page #crl8-product-carousel-uploader .gzieuL,
  body.l-page #crl8-category-carousel-uploader .gzieuL {
    border-bottom: 1px solid #cfcfcf;
    padding: 24px 16px 16px;
  }
}
body.l-page #crl8-homepage-carousel-uploader .RpvUR,
body.l-page #crl8-product-carousel-uploader .RpvUR,
body.l-page #crl8-category-carousel-uploader .RpvUR {
  line-height: 21px;
}
body.l-page #crl8-homepage-carousel-uploader .QSqIJ,
body.l-page #crl8-product-carousel-uploader .QSqIJ,
body.l-page #crl8-category-carousel-uploader .QSqIJ {
  border: 0;
}
body.l-page #crl8-homepage-carousel-uploader .kcHNRZ:focus::before, body.l-page #crl8-homepage-carousel-uploader .kcHNRZ:active::before,
body.l-page #crl8-homepage-carousel-uploader .exSRxg:focus::before,
body.l-page #crl8-homepage-carousel-uploader .exSRxg:active::before,
body.l-page #crl8-product-carousel-uploader .kcHNRZ:focus::before,
body.l-page #crl8-product-carousel-uploader .kcHNRZ:active::before,
body.l-page #crl8-product-carousel-uploader .exSRxg:focus::before,
body.l-page #crl8-product-carousel-uploader .exSRxg:active::before,
body.l-page #crl8-category-carousel-uploader .kcHNRZ:focus::before,
body.l-page #crl8-category-carousel-uploader .kcHNRZ:active::before,
body.l-page #crl8-category-carousel-uploader .exSRxg:focus::before,
body.l-page #crl8-category-carousel-uploader .exSRxg:active::before {
  content: none;
}
body.l-page #crl8-homepage-carousel-uploader .fJXsY,
body.l-page #crl8-product-carousel-uploader .fJXsY,
body.l-page #crl8-category-carousel-uploader .fJXsY {
  color: #000000;
  height: 32px;
  width: 32px;
}
body.l-page #crl8-homepage-carousel-uploader .kcHNRZ,
body.l-page #crl8-homepage-carousel-uploader .kZmcaB,
body.l-page #crl8-product-carousel-uploader .kcHNRZ,
body.l-page #crl8-product-carousel-uploader .kZmcaB,
body.l-page #crl8-category-carousel-uploader .kcHNRZ,
body.l-page #crl8-category-carousel-uploader .kZmcaB {
  align-items: center;
  background: #262424;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: 700 16px / 1 "FannDorenGrotesque", monospace;
  gap: 4px;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  padding-inline: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, border-color, color;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  background: #000;
  color: #ffffff;
  height: 40px;
  padding-inline: 16px;
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-homepage-carousel-uploader .kZmcaB:hover,
  body.l-page #crl8-product-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-product-carousel-uploader .kZmcaB:hover,
  body.l-page #crl8-category-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-category-carousel-uploader .kZmcaB:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
  }
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-homepage-carousel-uploader .kZmcaB:hover,
  body.l-page #crl8-product-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-product-carousel-uploader .kZmcaB:hover,
  body.l-page #crl8-category-carousel-uploader .kcHNRZ:hover,
  body.l-page #crl8-category-carousel-uploader .kZmcaB:hover {
    background: #000000;
    color: #ffffff;
  }
}
@media screen and (max-width: 1023.9px) {
  body.l-page #crl8-homepage-carousel-uploader .kcHNRZ,
  body.l-page #crl8-homepage-carousel-uploader .kZmcaB,
  body.l-page #crl8-product-carousel-uploader .kcHNRZ,
  body.l-page #crl8-product-carousel-uploader .kZmcaB,
  body.l-page #crl8-category-carousel-uploader .kcHNRZ,
  body.l-page #crl8-category-carousel-uploader .kZmcaB {
    height: 32px;
    padding-inline: 8px;
  }
}
body.l-page #crl8-homepage-carousel-uploader .kcHNRZ:disabled,
body.l-page #crl8-homepage-carousel-uploader .kZmcaB:disabled,
body.l-page #crl8-product-carousel-uploader .kcHNRZ:disabled,
body.l-page #crl8-product-carousel-uploader .kZmcaB:disabled,
body.l-page #crl8-category-carousel-uploader .kcHNRZ:disabled,
body.l-page #crl8-category-carousel-uploader .kZmcaB:disabled {
  opacity: 0.6;
  pointer-events: none;
}
body.l-page #crl8-homepage-carousel-uploader .exSRxg,
body.l-page #crl8-homepage-carousel-uploader .ZAMPo,
body.l-page #crl8-product-carousel-uploader .exSRxg,
body.l-page #crl8-product-carousel-uploader .ZAMPo,
body.l-page #crl8-category-carousel-uploader .exSRxg,
body.l-page #crl8-category-carousel-uploader .ZAMPo {
  align-items: center;
  background: #262424;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: 700 16px / 1 "FannDorenGrotesque", monospace;
  gap: 4px;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  padding-inline: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, border-color, color;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
  height: 40px;
  padding-inline: 16px;
  width: auto;
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-homepage-carousel-uploader .ZAMPo:hover,
  body.l-page #crl8-product-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-product-carousel-uploader .ZAMPo:hover,
  body.l-page #crl8-category-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-category-carousel-uploader .ZAMPo:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
  }
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-homepage-carousel-uploader .ZAMPo:hover,
  body.l-page #crl8-product-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-product-carousel-uploader .ZAMPo:hover,
  body.l-page #crl8-category-carousel-uploader .exSRxg:hover,
  body.l-page #crl8-category-carousel-uploader .ZAMPo:hover {
    background: #000;
    border-color: #000000;
    color: #ffffff;
  }
}
@media screen and (max-width: 1023.9px) {
  body.l-page #crl8-homepage-carousel-uploader .exSRxg,
  body.l-page #crl8-homepage-carousel-uploader .ZAMPo,
  body.l-page #crl8-product-carousel-uploader .exSRxg,
  body.l-page #crl8-product-carousel-uploader .ZAMPo,
  body.l-page #crl8-category-carousel-uploader .exSRxg,
  body.l-page #crl8-category-carousel-uploader .ZAMPo {
    height: 32px;
    padding-inline: 8px;
  }
}
body.l-page #crl8-homepage-carousel-uploader .bhVLdT,
body.l-page #crl8-product-carousel-uploader .bhVLdT,
body.l-page #crl8-category-carousel-uploader .bhVLdT {
  align-items: center;
  background: #262424;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: 700 16px / 1 "FannDorenGrotesque", monospace;
  gap: 4px;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  padding-inline: 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, border-color, color;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  background: transparent;
  border: 1px solid #000000;
  color: #000000;
  height: 40px;
  padding-inline: 16px;
  width: auto;
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .bhVLdT:hover,
  body.l-page #crl8-product-carousel-uploader .bhVLdT:hover,
  body.l-page #crl8-category-carousel-uploader .bhVLdT:hover {
    background: #000;
    color: #ffffff;
    text-decoration: none;
  }
}
@media not all and (pointer: coarse) {
  body.l-page #crl8-homepage-carousel-uploader .bhVLdT:hover,
  body.l-page #crl8-product-carousel-uploader .bhVLdT:hover,
  body.l-page #crl8-category-carousel-uploader .bhVLdT:hover {
    background: #000;
    border-color: #000000;
    color: #ffffff;
  }
}
body.l-page #crl8-homepage-carousel-uploader .iRUydb,
body.l-page #crl8-product-carousel-uploader .iRUydb,
body.l-page #crl8-category-carousel-uploader .iRUydb {
  border: 2px dashed #cfcfcf;
}
body.l-page #crl8-homepage-carousel-uploader .fwtxlD,
body.l-page #crl8-product-carousel-uploader .fwtxlD,
body.l-page #crl8-category-carousel-uploader .fwtxlD {
  color: #000000;
  gap: 16px;
}
body.l-page #crl8-homepage-carousel-uploader .fJXsY,
body.l-page #crl8-homepage-carousel-uploader .fzeGLW,
body.l-page #crl8-homepage-carousel-uploader .iLpDPd,
body.l-page #crl8-product-carousel-uploader .fJXsY,
body.l-page #crl8-product-carousel-uploader .fzeGLW,
body.l-page #crl8-product-carousel-uploader .iLpDPd,
body.l-page #crl8-category-carousel-uploader .fJXsY,
body.l-page #crl8-category-carousel-uploader .fzeGLW,
body.l-page #crl8-category-carousel-uploader .iLpDPd {
  margin-bottom: 0;
}
body.l-page #crl8-homepage-carousel-uploader .iLpDPd,
body.l-page #crl8-product-carousel-uploader .iLpDPd,
body.l-page #crl8-category-carousel-uploader .iLpDPd {
  font-weight: 400;
  font-size: 20px;
}
@media screen and (min-width: 1024px) {
  body.l-page #crl8-homepage-carousel-uploader .iLpDPd,
  body.l-page #crl8-product-carousel-uploader .iLpDPd,
  body.l-page #crl8-category-carousel-uploader .iLpDPd {
    font-size: 24px;
  }
}
body.l-page #crl8-homepage-carousel-uploader .dtXnwp,
body.l-page #crl8-product-carousel-uploader .dtXnwp,
body.l-page #crl8-category-carousel-uploader .dtXnwp {
  font-size: 14px;
}
body.l-page #crl8-homepage-carousel-uploader .dSwaaM,
body.l-page #crl8-product-carousel-uploader .dSwaaM,
body.l-page #crl8-category-carousel-uploader .dSwaaM {
  flex: unset;
}
body.l-page #crl8-homepage-carousel-uploader .hLWuiA::before,
body.l-page #crl8-homepage-carousel-uploader .hCAcwV::before,
body.l-page #crl8-product-carousel-uploader .hLWuiA::before,
body.l-page #crl8-product-carousel-uploader .hCAcwV::before,
body.l-page #crl8-category-carousel-uploader .hLWuiA::before,
body.l-page #crl8-category-carousel-uploader .hCAcwV::before {
  background: var(--icon-color, currentColor);
  content: "";
  display: block;
  height: 24px;
  -webkit-mask-image: url("../images/icons-sprite.svg#close");
          mask-image: url("../images/icons-sprite.svg#close");
  -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%;
  min-width: 24px;
  width: 24px;
}
body.l-page #crl8-homepage-carousel-uploader .hLWuiA svg,
body.l-page #crl8-homepage-carousel-uploader .hCAcwV svg,
body.l-page #crl8-product-carousel-uploader .hLWuiA svg,
body.l-page #crl8-product-carousel-uploader .hCAcwV svg,
body.l-page #crl8-category-carousel-uploader .hLWuiA svg,
body.l-page #crl8-category-carousel-uploader .hCAcwV svg {
  display: none;
}
body.l-page #crl8-homepage-carousel-uploader .hCAcwV,
body.l-page #crl8-product-carousel-uploader .hCAcwV,
body.l-page #crl8-category-carousel-uploader .hCAcwV {
  padding: 0;
}
body.l-page #crl8-homepage-carousel-uploader .ijVkTI,
body.l-page #crl8-product-carousel-uploader .ijVkTI,
body.l-page #crl8-category-carousel-uploader .ijVkTI {
  border-left: none;
}
@media screen and (min-width: 768px) {
  body.l-page #crl8-homepage-carousel-uploader .hRocEu,
  body.l-page #crl8-product-carousel-uploader .hRocEu,
  body.l-page #crl8-category-carousel-uploader .hRocEu {
    right: 40px;
  }
}

/* stylelint-enable */
.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-content {
  display: flex;
  justify-content: space-between;
}
.b-payment_total-name {
  font-size: 14px;
  font-weight: 500;
}
.b-payment_total-value {
  font-size: 14px;
  font-weight: 600;
  margin-left: 8px;
  text-align: end;
  vertical-align: baseline;
}
.b-payment_total-free_product {
  padding-bottom: 12px;
  text-align: end;
  vertical-align: top;
}
.b-payment_total-free_product_link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-payment_total-free_product_link:hover {
    color: #757575;
  }
}

.b-payment_total-name, .b-payment_total-value {
  font-size: 16px;
  font-weight: 600;
}

.b-cart_progress {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 12px 0 0;
}
.b-cart_progress-description {
  margin-bottom: 16px;
}
.b-cart_progress-indicator {
  background-color: #cfcfcf;
  border-radius: 16px;
  height: 8px;
  width: 100%;
}
.b-cart_progress-value {
  background-color: #262424;
  border-radius: 16px;
  height: 100%;
}

.b-social_account {
  margin: 32px auto 72px;
  max-width: 438px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
}
@media screen and (min-width: 1024px) {
  .b-social_account {
    margin-bottom: 96px;
    margin-top: 48px;
  }
}
.b-social_account-title {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 32px;
}
@media screen and (min-width: 1024px) {
  .b-social_account-title {
    font-size: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .b-social_account-title {
    margin-bottom: 40px;
  }
}
.b-social_account-desc {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 32px;
}
@media screen and (min-width: 1024px) {
  .b-social_account-desc {
    margin-bottom: 40px;
  }
}
.b-social_account-form {
  width: 100%;
}
.b-social_account-form .b-input {
  font-weight: 400;
}
.b-social_account-form .b-form_field-label.m-email + .b-input[disabled] {
  box-shadow: none;
  height: auto;
  line-height: initial;
  padding: 0;
}

.b-social_login {
  display: block;
  margin-top: 24px;
  text-align: center;
}
.b-checkout_step .b-social_login, .b-form.m-registration .b-social_login {
  text-align: left;
}
.b-social_login-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
}
.b-social_login-list {
  display: flex;
  justify-content: center;
}
.b-checkout_step .b-social_login-list {
  justify-content: flex-start;
  margin-bottom: 32px;
}
.b-form.m-registration .b-social_login-list {
  justify-content: flex-start;
  margin-bottom: 16px;
}
.b-social_login-item {
  box-shadow: inset 0 0 0 2px #f5f5f5;
  margin-right: 12px;
  padding: 8px;
}
.b-social_login-item:last-child {
  margin-right: 0;
}
.b-social_login-desc {
  font-weight: 400;
}
.b-social_login-divider {
  border-top: 1px solid #f5f5f5;
  margin-bottom: 16px;
  text-align: center;
}
.b-social_login-divider_text {
  background-color: #ffffff;
  display: inline-block;
  padding: 0 24px;
  text-transform: uppercase;
  transform: translateY(-10px);
}
.b-social_login + .b-form_field {
  margin-top: 24px;
}

.b-social_profile {
  margin: 48px 0;
}
.b-social_profile-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}
.b-social_profile-item {
  align-items: center;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  display: flex;
  margin-bottom: 20px;
  padding: 24px;
}
.b-social_profile-item:last-child {
  margin-bottom: 0;
}
.b-social_profile-info {
  font-weight: 500;
  margin-left: 16px;
}
.b-social_profile-link {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
  margin-left: auto;
}
@media not all and (pointer: coarse) {
  .b-social_profile-link:hover {
    color: #757575;
  }
}

.b-search_input {
  font-size: 16px;
  -webkit-appearance: none;
          appearance: none;
  background: #ffffff;
  border: none;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #cfcfcf;
  color: #000000;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  scroll-margin-top: 150px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: background-color, box-shadow;
  vertical-align: top;
  width: 100%;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #000;
  align-items: center;
  display: flex;
  padding: 0 8px 0 16px;
  position: relative;
  width: 100%;
}
@media not all and (pointer: coarse) {
  .b-search_input {
    font-size: 14px;
  }
}
.b-search_input::placeholder {
  font-weight: 400;
}
.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: 32px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 32px;
  margin-inline-end: 16px;
}
@media not all and (pointer: coarse) {
  .b-search_input-submit:hover {
    color: #757575;
  }
}
.b-search_input-input {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #000000;
  font: inherit;
  height: 48px;
  padding: 0;
  padding-inline-start: 4px;
  width: 100%;
}
.b-search_input-input::-webkit-search-cancel-button, .b-search_input-input::-webkit-search-decoration, .b-search_input-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.b-search_input-input::placeholder {
  color: #000000;
}
.b-search_input-clear {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 32px;
}
@media not all and (pointer: coarse) {
  .b-search_input-clear:hover {
    color: #757575;
  }
}
.b-search_input-clear:not(.m-visible) {
  opacity: 0;
  pointer-events: none;
}

.b-search_dialog {
  height: 100%;
  position: relative;
  width: 100%;
}
.b-search_dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
  width: 100%;
  z-index: 12;
}
.b-search_dialog-inner_top {
  background-color: #ffffff;
}
.b-search_dialog-inner_top_content {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-search_dialog-form_wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 24px 0 32px;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-search_dialog-form_wrap {
    width: 50%;
  }
}
.b-search_dialog-cancel {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  height: 48px;
  margin-inline-start: 20px;
}
@media not all and (pointer: coarse) {
  .b-search_dialog-cancel:hover {
    color: #757575;
  }
}
@media screen and (min-width: 1024px) {
  .b-search_dialog-cancel {
    left: 100%;
    position: absolute;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-search_dialog-container_scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.b-search_dialog-overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.b-suggestions {
  background-color: #ffffff;
  overflow-y: auto;
  padding-bottom: 32px;
  position: relative;
  right: 0;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1024px) {
  .b-suggestions {
    padding-bottom: 40px;
  }
}
.b-suggestions-inner {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-suggestions-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-suggestions-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-suggestions-inner.m-empty {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 120px;
  text-align: center;
}
.b-suggestions.m-loading .b-suggestions-inner {
  opacity: 0.3;
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .b-suggestions-container_scroll {
    display: grid;
    grid-template: "categories products" "content    products" "total      products";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto auto 1fr;
  }
}
.b-suggestions-section {
  display: grid;
  justify-items: start;
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .b-suggestions-section {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .b-suggestions-section {
    margin-right: 16px;
  }
}
.b-suggestions-section.m-categories {
  grid-area: categories;
}
.b-suggestions-section.m-products {
  grid-gap: 8px;
  grid-area: products;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(2, 1fr);
  justify-items: initial;
  margin-bottom: 0;
  margin-right: 0;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-suggestions-section.m-products {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-suggestions-section.m-products {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-suggestions-section.m-products {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-section.m-products {
    margin-bottom: 20px;
    row-gap: 0;
  }
}
@media screen and (min-width: 768px) {
  .b-suggestions-section.m-products {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 0;
  }
}
.b-suggestions-section.m-content {
  grid-area: content;
}
.b-suggestions-section.m-total {
  grid-area: total;
}
@media screen and (min-width: 768px) {
  .b-suggestions-section.m-total {
    display: block;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-section.m-guess {
    padding: 8px 0;
  }
}
.b-suggestions-section:last-of-type {
  margin-bottom: 0;
}
.b-suggestions-inner.m-empty .b-suggestions-section {
  display: none;
}
@media screen and (min-width: 1024px) {
  .b-suggestions-inner > .b-suggestions-section {
    margin-inline: auto;
    width: 50%;
  }
}
.b-suggestions-title {
  font-size: 16px;
  font-weight: 600;
  grid-column: 1/-1;
  margin-bottom: 16px;
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-title {
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-section.m-products .b-suggestions-title {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 768px) {
  .b-suggestions-section.m-products .b-suggestions-title {
    margin-bottom: 12px;
  }
}
.b-suggestions-option {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-suggestions-option:hover {
    color: #757575;
  }
}
.b-suggestions-link {
  line-height: 20px;
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  margin-bottom: 4px;
  padding: 8px 0;
}
@media not all and (pointer: coarse) {
  .b-suggestions-link:hover {
    color: #757575;
  }
}
@media screen and (min-width: 1024px) {
  .b-suggestions-link {
    margin-bottom: 16px;
    padding: 0;
  }
}
.b-suggestions-link:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions-view_results {
    width: 100%;
  }
}
.b-suggestions-view_results.b-button {
  background: #000;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-suggestions-view_results.b-button:hover {
    background: #000000;
    color: #ffffff;
  }
}

.b-suggestions_category {
  margin-bottom: 4px;
  padding: 8px 0;
}
@media screen and (min-width: 1024px) {
  .b-suggestions_category {
    margin-bottom: 16px;
    padding: 0;
  }
}
.b-suggestions_category:last-child {
  margin-bottom: 0;
}
.b-suggestions_category-title {
  font-weight: 600;
}

.b-suggestions_guess-correction {
  font-weight: 600;
  unicode-bidi: isolate;
}

.b-suggestions_product {
  font-size: 12px;
  margin-top: 8px;
}
@media screen and (max-width: 767.9px) {
  .b-suggestions_product {
    margin-bottom: 8px;
    margin-top: 0;
  }
}
@media not all and (pointer: coarse) {
  .b-suggestions_product:hover {
    opacity: 1;
  }
}
.b-suggestions_product-picture {
  background: #ffffff;
  border: 1px solid #cfcfcf;
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-suggestions_product-picture img {
  border: 0;
  bottom: 0;
  color: #ffffff;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-suggestions_product-title {
  font: 600 18px / 27px "FannDorenGrotesque", monospace;
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
  margin-top: 16px;
}
@media not all and (pointer: coarse) {
  .b-suggestions_product-title:hover {
    color: #757575;
  }
}
@media screen and (min-width: 1024px) {
  .b-suggestions_product-title {
    margin-top: 24px;
  }
}
.b-suggestions_product-price {
  font-size: 18px;
  margin-top: 8px;
}
@media screen and (min-width: 1024px) {
  .b-suggestions_product-price {
    margin-top: 16px;
  }
}
.b-suggestions_product-link {
  display: none;
}

@media screen and (min-width: 1024px) {
  .b-header_track_order {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_track_order {
    color: inherit;
    cursor: pointer;
    text-transform: none;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: opacity, color;
    text-decoration: none;
    align-items: center;
    display: flex;
    padding: 4px 16px;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0 4px;
  }
  @media not all and (pointer: coarse) {
    .b-header_track_order:hover {
      color: #757575;
    }
  }
}
.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: 32px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 32px;
}
@media not all and (pointer: coarse) {
  .b-header_track_order-icon:hover {
    color: #757575;
  }
}

.b-footer {
  /* stylelint-disable */
}
.b-footer-help {
  background-color: #f5f5f5;
  color: #000000;
}
.b-footer-content {
  --color-error: #e32416;
  background-color: #000;
  color: #ffffff;
  padding: 40px 0;
}
.b-footer-inner {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1920px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-footer-grid {
  grid-gap: 8px;
  display: grid;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer-grid {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer-grid {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-grid {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer-grid {
    row-gap: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-grid {
    grid-template: "top         navigation" "newsletters navigation" "klarna      navigation" "copyright   copyright";
    grid-template-columns: minmax(420px, 40%) 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-top {
    grid-area: top;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-newsletters {
    grid-area: newsletters;
    margin-top: 56px;
    padding-inline-end: 16px;
  }
}
.b-footer-newsletters .b-newsletters {
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .b-footer-navigation {
    grid-area: navigation;
  }
}
.b-footer-klarna {
  display: none;
}
@media screen and (min-width: 1024px) {
  .b-footer-klarna {
    align-self: end;
    grid-area: klarna;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-copyright {
    grid-area: copyright;
    margin-top: 46px;
  }
}
.b-footer-store_finder {
  margin-top: 40px;
}
.b-footer-feedback {
  display: block;
  margin-top: 40px;
}
@media screen and (min-width: 1024px) {
  .b-footer-feedback {
    display: none;
  }
}
.b-footer a:not(.b-form_field-link):not(.b-button),
.b-footer button.b-footer_nav-link {
  /* stylelint-enable */
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-footer a:not(.b-form_field-link):not(.b-button):hover,
  .b-footer button.b-footer_nav-link:hover {
    color: #e1e1e1;
  }
}

.b-footer_help {
  font-weight: 600;
  padding: 40px 0;
}
@media screen and (min-width: 1024px) {
  .b-footer_help {
    padding: 80px 0;
  }
}
.b-footer_help-title {
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
  .b-footer_help-title {
    font-size: 32px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_help-title {
    margin-bottom: 64px;
  }
}
.b-footer_help-grid {
  margin-top: 24px;
}
@media screen and (min-width: 768px) {
  .b-footer_help-grid {
    margin-top: 0;
  }
}
.b-footer_help-grid, .b-footer_help-container {
  grid-gap: 8px;
  align-items: start;
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer_help-grid, .b-footer_help-container {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer_help-grid, .b-footer_help-container {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_help-grid, .b-footer_help-container {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_help-grid, .b-footer_help-container {
    row-gap: 56px;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_help-grid, .b-footer_help-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_help-grid, .b-footer_help-container {
    row-gap: 56px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_help-container {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
  }
}
.b-footer_help-tile {
  font-size: 14px;
  font-weight: 600;
  display: grid;
  font-family: "FannDorenGrotesque", monospace;
  gap: 20px;
  grid-template-rows: 42px auto;
  justify-self: start;
  text-decoration: unset;
}
@media screen and (min-width: 1024px) {
  .b-footer_help-tile {
    font-size: 18px;
    grid-template-rows: 56px auto;
  }
}
.b-footer_help-text a {
  text-decoration: unset;
}
.b-footer_help .open-live-chat u {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-footer_help .open-live-chat u:hover {
    color: #757575;
  }
}

.b-footer_nav {
  grid-gap: 8px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer_nav {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer_nav {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_nav {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav {
    gap: 8px;
    margin-top: -12px;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_nav {
    grid-template: "section1 section2 section3 section4" auto "section1 section2 section3 section5" 1fr/1fr 1fr 1fr 1fr;
    row-gap: 40px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-column {
    grid-column: span 2;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_nav-column.m-section-1 {
    grid-area: section1;
  }
  .b-footer_nav-column.m-section-2 {
    grid-area: section2;
  }
  .b-footer_nav-column.m-section-3 {
    grid-area: section3;
  }
  .b-footer_nav-column.m-section-4 {
    grid-area: section4;
  }
  .b-footer_nav-column.m-section-5 {
    grid-area: section5;
  }
}
.b-footer_nav-title {
  font: 600 16px / 1 "FannDorenGrotesque", monospace;
}
@media screen and (min-width: 768px) {
  .b-footer_nav-title {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_nav-button {
    display: none;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-button {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 22px 0;
    text-align: start;
    transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    width: 100%;
    padding: 12px 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-heading {
    display: none;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-content {
    display: none;
    overflow: hidden;
    position: relative;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: height;
    font-size: 12px;
  }
  .b-footer_nav-content[aria-hidden=false], .b-footer_nav-column:not([data-initialized="1"]) .b-footer_nav-content {
    display: block;
  }
}
.b-footer_nav-list {
  display: grid;
  gap: 10px;
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-list {
    overflow: hidden;
    padding: 0 0 20px;
    gap: 8px;
    padding-top: 12px;
  }
}
.b-footer_nav-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-link {
    min-height: 44px;
  }
}
.b-footer_nav-link svg {
  height: 14px;
  margin-inline-end: 4px;
}
.b-footer_nav-link.m-icon-original svg {
  height: auto;
}
.b-footer_nav-bottom {
  margin-top: 40px;
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav-bottom {
    margin-top: 20px;
  }
}

.b-footer_info {
  grid-gap: 8px;
  display: grid;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer_info {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer_info {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_info {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_info {
    row-gap: 40px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_info {
    grid-template-columns: minmax(420px, 40%) 1fr;
  }
}
.b-footer_info-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
@media screen and (max-width: 767.9px) {
  .b-footer_info-links {
    gap: 8px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_info-links {
    order: -1;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_info-links {
    font-size: 12px;
    line-height: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_info-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}
.b-footer_info-link svg {
  margin-inline-end: 4px;
}
.b-footer_info-copyright {
  font-size: 12px;
  line-height: 16px;
}

.b-footer_social {
  margin-top: 16px;
}
@media screen and (max-width: 1023.9px) {
  .b-footer_social {
    margin-top: 16px;
  }
}
.b-footer_social-items {
  display: flex;
  gap: 8px;
}
.b-footer_social-link {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: auto;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: auto;
}
@media not all and (pointer: coarse) {
  .b-footer_social-link:hover {
    color: #757575;
  }
}
.b-footer_social svg {
  fill: currentColor;
}

.b-copyright {
  font-size: 12px;
  line-height: 16px;
}

.b-newsletters-group {
  max-width: 420px;
  position: relative;
}
.b-newsletters-field.m-animated:not(.m-input_as_text) {
  padding-top: 0;
}
.b-newsletters-field.m-animated:not(.m-input_as_text) .b-form_field-label {
  color: #000000;
  left: 18px;
  top: -8px;
}
.b-newsletters-field.m-animated:not(.m-input_as_text) .b-form_field-required_mark {
  display: none;
}
.b-newsletters-label {
  color: #000000;
}
.b-newsletters-submit {
  background: none;
  border: 0;
  color: #000000;
  padding-inline: 16px;
  position: absolute;
  right: 0;
  top: 0;
  transition-property: opacity;
}
html[dir=rtl] .b-newsletters-submit {
  left: 0;
  right: initial;
}
@media not all and (pointer: coarse) {
  .b-newsletters-submit:hover {
    background: none;
    color: #000;
    opacity: 0.5;
  }
}
.b-newsletters-message_success {
  font-size: 18px;
}
.b-newsletters-message_success_announcement {
  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_dialogs {
  bottom: 0;
  color: #000000;
  left: 0;
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  right: 0;
  z-index: 19;
}

.b-notification_dialog {
  background: rgba(232, 221, 199, 0.95);
  color: #000000;
  padding: 16px 0;
}
.b-notification_dialog-inner {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  align-items: center;
  display: grid;
  font-weight: 500;
  gap: 16px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-notification_dialog-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-notification_dialog-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-notification_dialog-inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .b-notification_dialog-inner {
    grid-template-columns: 1fr auto auto;
  }
}
.b-notification_dialog-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;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-notification_dialog-content {
    grid-column: span 2;
  }
}
.b-notification_dialog a {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
  display: inline-block;
  white-space: nowrap;
}
@media not all and (pointer: coarse) {
  .b-notification_dialog a:hover {
    color: inherit;
    text-decoration: none;
  }
}

.b-connection_monitor {
  align-items: center;
  background-color: #ffdada;
  color: #a21a10;
  display: flex;
  font-weight: 500;
  padding: 16px 0;
  position: relative;
}
.b-connection_monitor-inner {
  padding-left: 80px;
  padding-right: 80px;
  margin: 0 auto;
  max-width: 1440px;
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-connection_monitor-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-connection_monitor-inner {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-connection_monitor-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-connection_monitor-icon {
  flex-shrink: 0;
  margin-inline-end: 12px;
}
.b-connection_monitor-caption {
  font-weight: 600;
}
.b-connection_monitor-btn {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 32px;
}
@media not all and (pointer: coarse) {
  .b-connection_monitor-btn:hover {
    color: #757575;
  }
}
@media screen and (min-width: 768px) {
  .b-connection_monitor-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.b-footer_top {
  grid-gap: 8px;
  display: grid;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer_top {
    grid-gap: 12px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer_top {
    grid-gap: 16px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer_top {
    grid-gap: 16px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_top {
    row-gap: 56px;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_top {
    grid-template-columns: 1fr minmax(540px, 1fr);
  }
}
.b-footer_top-logo svg {
  height: auto;
  width: 118px;
}
@media screen and (min-width: 1024px) {
  .b-footer_top-logo svg {
    width: 176px;
  }
}

.b-footer_headline-title {
  font-family: "FannDorenGrotesque", monospace;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
}
.b-footer_headline-copy {
  font-size: 12px;
  margin-bottom: 16px;
}

.b-hero_carousel {
  border: 1px solid #cfcfcf;
  width: 100%;
}
.b-hero_carousel-item {
  min-width: 100%;
  width: 100%;
}
.b-hero_carousel-ctrl {
  background: #f8f8f8;
  border-radius: 50%;
  opacity: 0;
}
.b-hero_carousel-ctrl.m-prev {
  left: 16px;
}
.b-hero_carousel-ctrl.m-next {
  right: 16px;
}
.b-hero_carousel-ctrl[disabled] {
  z-index: 1;
}
.b-hero_carousel-pagination {
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-hero_carousel-pagination {
    left: 0;
  }
}
.b-hero_carousel-pagination_content {
  background: none;
  padding: 0;
}
.b-hero_carousel-dots, .b-hero_carousel-pagination_dots {
  bottom: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}
@media screen and (max-width: 767.9px) {
  .b-hero_carousel-dots, .b-hero_carousel-pagination_dots {
    opacity: 1;
  }
}
.b-hero_carousel-pagination_dots svg {
  display: none;
}
.b-hero_carousel-dots_track {
  text-align: center;
}
.b-hero_carousel-dot, .b-hero_carousel-pagination_dot {
  display: inline-block;
  height: 24px;
  margin-inline-end: 0;
  position: relative;
  vertical-align: top;
  width: 10px;
}
.b-hero_carousel-dot::before, .b-hero_carousel-pagination_dot::before {
  background-color: #ffffff;
  border: 2px solid #cfcfcf;
  border-radius: 50%;
  bottom: 0;
  content: "";
  display: block;
  height: 8px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
}
.b-hero_carousel-dot.m-current::before, .b-hero_carousel-pagination_dot.m-current::before {
  background-color: #000000;
  border-color: #000000;
}

@media not all and (pointer: coarse) {
  .b-hero_carousel_ext:hover .b-hero_carousel-ctrl,
  .b-hero_carousel_ext:hover .b-hero_carousel-dots,
  .b-hero_carousel_ext:hover .b-hero_carousel-pagination_dots, .b-hero_carousel_ext:focus-within .b-hero_carousel-ctrl,
  .b-hero_carousel_ext:focus-within .b-hero_carousel-dots,
  .b-hero_carousel_ext:focus-within .b-hero_carousel-pagination_dots,
  .b-product_tile:hover .b-hero_carousel-ctrl,
  .b-product_tile:hover .b-hero_carousel-dots,
  .b-product_tile:hover .b-hero_carousel-pagination_dots,
  .b-product_tile:focus-within .b-hero_carousel-ctrl,
  .b-product_tile:focus-within .b-hero_carousel-dots,
  .b-product_tile:focus-within .b-hero_carousel-pagination_dots,
  .b-quick_buy:hover .b-hero_carousel-ctrl,
  .b-quick_buy:hover .b-hero_carousel-dots,
  .b-quick_buy:hover .b-hero_carousel-pagination_dots,
  .b-quick_buy:focus-within .b-hero_carousel-ctrl,
  .b-quick_buy:focus-within .b-hero_carousel-dots,
  .b-quick_buy:focus-within .b-hero_carousel-pagination_dots,
  .b-size_guide_top:hover .b-hero_carousel-ctrl,
  .b-size_guide_top:hover .b-hero_carousel-dots,
  .b-size_guide_top:hover .b-hero_carousel-pagination_dots,
  .b-size_guide_top:focus-within .b-hero_carousel-ctrl,
  .b-size_guide_top:focus-within .b-hero_carousel-dots,
  .b-size_guide_top:focus-within .b-hero_carousel-pagination_dots {
    opacity: 0.9;
  }
  .b-hero_carousel_ext:hover .b-hero_carousel-ctrl[disabled], .b-hero_carousel_ext:focus-within .b-hero_carousel-ctrl[disabled],
  .b-product_tile:hover .b-hero_carousel-ctrl[disabled],
  .b-product_tile:focus-within .b-hero_carousel-ctrl[disabled],
  .b-quick_buy:hover .b-hero_carousel-ctrl[disabled],
  .b-quick_buy:focus-within .b-hero_carousel-ctrl[disabled],
  .b-size_guide_top:hover .b-hero_carousel-ctrl[disabled],
  .b-size_guide_top:focus-within .b-hero_carousel-ctrl[disabled] {
    opacity: 0.5;
  }
}

.b-hero_carousel_ext .b-hero_carousel {
  border: none;
}

.b-second_cut .b-form {
  margin-top: 40px;
  max-width: 632px;
}

.b-dialog.m-quick_buy {
  display: flex;
  justify-content: stretch;
  left: initial;
  margin: 0;
  padding: 0;
  right: initial;
  transform: none;
  z-index: 3;
}
.b-dialog.m-quick_buy.m-opened {
  background-color: transparent;
  overflow: initial;
  position: absolute;
}
.b-dialog.m-quick_buy.m-opened::before {
  bottom: 0;
  content: "";
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.b-dialog.m-quick_buy .b-dialog-window {
  align-self: stretch;
  background: transparent;
  min-width: 100%;
  padding: 0;
  position: relative;
  top: -8px;
  width: 100%;
}
.b-dialog.m-quick_buy .b-dialog-body {
  background: transparent;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  margin-top: 0;
  min-height: 480px;
  padding: 8px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-quick_buy .b-dialog-body {
    min-height: 600px;
  }
}
.b-dialog.m-quick_buy.m-opened .b-dialog-body {
  background: #ffffff;
}
.b-dialog.m-quick_buy .b-dialog-header {
  margin: 0;
  padding: 0;
}
.b-dialog.m-quick_buy .b-dialog-close {
  z-index: 2;
}

.b-product_tile-quick_buy {
  display: inline-flex;
  line-height: 40px;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile-quick_buy {
    display: none;
  }
}
.b-product_tile-quick_buy.m-product_set, .b-product_tile-quick_buy.m-bundle {
  display: none;
}
.b-product_tile-quick_buy .b-button-icon svg {
  height: 20px;
  margin-bottom: 2px;
  width: 20px;
}
.b-quickshop {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b-quickshop-heading {
  border-bottom: 1px solid #cfcfcf;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 4px 32px 12px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-heading {
    padding: 4px 16px 12px;
  }
}
.b-quickshop-sizes {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.b-quickshop-size_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.b-quickshop-size_item {
  border-bottom: 1px solid #cfcfcf;
}
.b-quickshop-size_button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  justify-content: space-between;
  padding: 16px 32px;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-size_button {
    padding: 16px;
  }
}
.b-quickshop-size_button:hover {
  background-color: #f5f5f5;
}
.b-quickshop-size_button[aria-current=true] {
  background-color: #000;
  color: #ffffff;
  font-weight: 600;
}
.b-quickshop-size_button[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
}
.b-quickshop-size_label {
  font-size: 14px;
}
.b-quickshop-size_oos {
  color: #757575;
  font-size: 12px;
}
.b-quickshop[data-ready-to-order=false] .b-quickshop-actions {
  display: none;
}
.b-quickshop-actions {
  border-top: 1px solid #cfcfcf;
  flex-shrink: 0;
  padding: 16px 32px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-actions {
    padding: 16px;
  }
}
.b-quickshop-actions .b-quick_buy-actions {
  margin: 0;
}
.b-quickshop-actions .b-quick_buy-actions_inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-flyout.m-quickshop .b-flyout-body {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  padding: 0;
}
.b-flyout.m-quickshop .b-flyout-header {
  border-bottom: 1px solid #cfcfcf;
}
.b-flyout.m-quickshop .b-flyout-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-type-no-unknown */
.l-page:has(klarna-web-sdk-fullscreen), .l-page:has(klarna-osm-interstitial) {
  overflow: hidden !important;
}
.l-page:has(klarna-web-sdk-fullscreen) .l-header,
.l-page:has(klarna-web-sdk-fullscreen) .l-page-content,
.l-page:has(klarna-web-sdk-fullscreen) .l-page-footer,
.l-page:has(klarna-web-sdk-fullscreen) .b-klarna_placement.m-header, .l-page:has(klarna-osm-interstitial) .l-header,
.l-page:has(klarna-osm-interstitial) .l-page-content,
.l-page:has(klarna-osm-interstitial) .l-page-footer,
.l-page:has(klarna-osm-interstitial) .b-klarna_placement.m-header {
  overflow-y: scroll;
}
.m-has_dialog .l-page {
  overflow: hidden !important;
}
.m-has_dialog .l-page .b-klarna_placement.m-header {
  overflow-y: scroll;
}

/* stylelint-disable selector-max-universal */
.b-klarna_placement {
  display: grid;
}
.b-klarna_placement::part(osm-cta), .b-klarna_placement::part(osm-container) {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  font-family: "FannDorenGrotesque", "Arial", sans-serif;
  letter-spacing: 0.01em;
  text-transform: capitalize;
}
.b-klarna_placement::part(osm-container) {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: start;
  z-index: 1;
}
.b-klarna_placement::part(osm-container)::before {
  background: #ffffff;
  bottom: -22px;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
.b-klarna_placement::part(osm-link), .b-klarna_placement::part(osm-cta) {
  color: inherit;
  cursor: pointer;
  text-transform: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: opacity, color;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: max(0.1em, 1.5px);
}
@media not all and (pointer: coarse) {
  .b-klarna_placement::part(osm-link):hover, .b-klarna_placement::part(osm-cta):hover {
    color: #757575;
  }
}
.b-klarna_placement::part(osm-logo) {
  font-family: "FannDorenGrotesque", monospace;
  letter-spacing: 0;
}
.b-klarna_placement.m-header::part(osm-container), .b-klarna_placement.m-header::part(osm-cta) {
  font-size: 15px;
  font-weight: 600;
}
.b-klarna_placement.m-header::part(osm-container) {
  padding-left: 80px;
  padding-right: 80px;
  padding-bottom: 8px;
  padding-top: 8px;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-klarna_placement.m-header::part(osm-container) {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-klarna_placement.m-header::part(osm-container) {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-klarna_placement.m-header::part(osm-container) {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-klarna_placement.m-header::part(osm-cta) {
  font-family: "FannDorenGrotesque", monospace;
}
.m-transparent_header .b-klarna_placement.m-header {
  display: none;
}
.b-klarna_placement.m-cart {
  margin-top: 8px;
}
.b-klarna_placement.m-pdp {
  margin: 8px 0 4px;
}
.m-quick_view .b-klarna_placement.m-pdp {
  margin: 16px 0 0;
}

/*md

# Apple pay button

Part of the styling of Apple pay button is implemented by Demandware. Those styles inserted throgh
isactivedatahead tag. [Please see](https://confluence.ontrq.com/display/ACDC/ApplePay+button+styling)

We overwrite Demandware styles and provide modern approach for button styling and localization
possibilities.

 */
.b-apple_pay {
  margin-top: 16px;
}
.b-apple_pay.m-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.b-apple_pay-button.b-apple_pay-button, .b-apple_pay-button.b-apple_pay-button:hover, .b-apple_pay-button.b-apple_pay-button:active {
  background-size: 75% 52%;
  border-radius: 0;
  cursor: pointer;
  margin: 0;
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.b-apple_pay-button, .b-apple_pay-button.b-apple_pay-button:hover, .b-apple_pay-button.b-apple_pay-button:active {
    -webkit-appearance: -apple-pay-button;
            appearance: -apple-pay-button;
    background: none;
    border: none;
    -apple-pay-button-style: black; /* stylelint-disable-line color-named */
  }
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.b-apple_pay-button::after {
    content: "";
  }
}
.b-apple_pay-button.dw-apple-pay-logo-white {
  -apple-pay-button-style: white; /* stylelint-disable-line color-named */
}
.b-apple_pay-button.dw-apple-pay-logo-white.dw-apple-pay-border {
  -apple-pay-button-style: white-outline;
}
.b-apple_pay-button.m-checkout {
  margin-bottom: 22px;
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.m-checkout, .b-apple_pay-button.m-checkout:hover, .b-apple_pay-button.m-checkout:active {
    -apple-pay-button-type: plain;
  }
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.m-pdp, .b-apple_pay-button.m-pdp:hover, .b-apple_pay-button.m-pdp:active {
    -apple-pay-button-type: plain;
  }
}
.b-apple_pay.m-disabled .b-apple_pay-button {
  opacity: 0.6;
  pointer-events: none;
}
.b-apple_pay-description {
  margin: 24px 0 20px;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-proceed_checkout .b-apple_pay {
    flex: 1;
    margin: 0;
  }
}

.b-wishlist_button[aria-busy=true] {
  cursor: wait;
  pointer-events: none;
}
.b-wishlist_button.m-added svg {
  color: #000000;
}
.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: 32px;
  justify-content: center;
  text-align: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 32px;
}
@media not all and (pointer: coarse) {
  .b-wishlist_button-icon:hover {
    color: #757575;
  }
}
.b-wishlist_button use {
  color: inherit;
  fill: none;
}
.b-wishlist_button.m-added use {
  color: #000000;
  fill: #000000;
}

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

.b-tile_image_carousel {
  position: relative;
}
.b-tile_image_carousel-track {
  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;
  position: relative;
}
.b-tile_image_carousel-track::-webkit-scrollbar {
  display: none;
}
.b-tile_image_carousel-track.m-mousemove_navigation {
  scroll-snap-type: unset;
}
.b-tile_image_carousel-track.m-grabbing {
  cursor: grab;
  scroll-behavior: auto;
  -webkit-user-select: none;
          user-select: none;
}
.b-tile_image_carousel-track.m-grabbing::before {
  bottom: 0;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.b-tile_image_carousel-item {
  display: block;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}
.b-tile_image_carousel-ctrl {
  -webkit-appearance: none;
          appearance: none;
  background: none;
  border: none;
  color: #000000;
  cursor: pointer;
  display: none;
  opacity: 0;
  outline: none;
  padding: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: opacity, background-color;
  -webkit-user-select: none;
          user-select: none;
  z-index: 3;
}
.b-tile_image_carousel-ctrl:focus, .b-tile_image_carousel-ctrl:focus-visible {
  outline: none !important;
}
.b-tile_image_carousel-ctrl svg {
  display: block;
  height: 28px;
  width: 16px;
}
@media not all and (pointer: coarse) {
  .b-tile_image_carousel-ctrl:hover {
    background-color: #ffffff;
  }
}
@media not all and (pointer: coarse) {
  .b-tile_image_carousel.m-inited .b-tile_image_carousel-ctrl {
    display: block;
  }
}
@media not all and (pointer: coarse) {
  .b-tile_image_carousel:hover .b-tile_image_carousel-ctrl {
    opacity: 1;
  }
}
.b-tile_image_carousel-ctrl[disabled], .b-tile_image_carousel.m-no_scroll .b-tile_image_carousel-ctrl {
  opacity: 0;
  pointer-events: none;
}
.b-tile_image_carousel-ctrl.m-prev {
  left: 0;
}
.b-tile_image_carousel-ctrl.m-next {
  right: 0;
}
.b-tile_image_carousel-pagination {
  bottom: 0;
  display: none;
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  z-index: 3;
}
.b-tile_image_carousel.m-inited .b-tile_image_carousel-pagination {
  display: flex;
}
.b-tile_image_carousel.m-no_scroll .b-tile_image_carousel-pagination {
  display: none;
}
@media not all and (pointer: coarse) {
  .b-tile_image_carousel:hover .b-tile_image_carousel-pagination {
    opacity: 1;
  }
}
.b-tile_image_carousel-pagination_segment {
  background-color: rgb(184, 184, 184);
  flex: 1;
  height: 100%;
  transition: background-color 0.15s ease;
}
.b-tile_image_carousel-pagination_segment.m-current {
  background-color: #000;
}

.b-dialog.m-quick_buy {
  display: flex;
  justify-content: stretch;
  left: initial;
  margin: 0;
  padding: 0;
  right: initial;
  transform: none;
  z-index: 3;
}
.b-dialog.m-quick_buy.m-opened {
  background-color: transparent;
  overflow: initial;
  position: absolute;
}
.b-dialog.m-quick_buy.m-opened::before {
  bottom: 0;
  content: "";
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.b-dialog.m-quick_buy .b-dialog-window {
  align-self: stretch;
  background: transparent;
  min-width: 100%;
  padding: 0;
  position: relative;
  top: -8px;
  width: 100%;
}
.b-dialog.m-quick_buy .b-dialog-body {
  background: transparent;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  margin-top: 0;
  min-height: 480px;
  padding: 8px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-quick_buy .b-dialog-body {
    min-height: 600px;
  }
}
.b-dialog.m-quick_buy.m-opened .b-dialog-body {
  background: #ffffff;
}
.b-dialog.m-quick_buy .b-dialog-header {
  margin: 0;
  padding: 0;
}
.b-dialog.m-quick_buy .b-dialog-close {
  z-index: 2;
}

.b-product_tile-quick_buy {
  display: inline-flex;
  line-height: 40px;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile-quick_buy {
    display: none;
  }
}
.b-product_tile-quick_buy.m-product_set, .b-product_tile-quick_buy.m-bundle {
  display: none;
}
.b-product_tile-quick_buy .b-button-icon svg {
  height: 20px;
  margin-bottom: 2px;
  width: 20px;
}
.b-quickshop {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b-quickshop-heading {
  border-bottom: 1px solid #cfcfcf;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 4px 32px 12px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-heading {
    padding: 4px 16px 12px;
  }
}
.b-quickshop-sizes {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.b-quickshop-size_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.b-quickshop-size_item {
  border-bottom: 1px solid #cfcfcf;
}
.b-quickshop-size_button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  justify-content: space-between;
  padding: 16px 32px;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-size_button {
    padding: 16px;
  }
}
.b-quickshop-size_button:hover {
  background-color: #f5f5f5;
}
.b-quickshop-size_button[aria-current=true] {
  background-color: #000;
  color: #ffffff;
  font-weight: 600;
}
.b-quickshop-size_button[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
}
.b-quickshop-size_label {
  font-size: 14px;
}
.b-quickshop-size_oos {
  color: #757575;
  font-size: 12px;
}
.b-quickshop[data-ready-to-order=false] .b-quickshop-actions {
  display: none;
}
.b-quickshop-actions {
  border-top: 1px solid #cfcfcf;
  flex-shrink: 0;
  padding: 16px 32px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-actions {
    padding: 16px;
  }
}
.b-quickshop-actions .b-quick_buy-actions {
  margin: 0;
}
.b-quickshop-actions .b-quick_buy-actions_inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-flyout.m-quickshop .b-flyout-body {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  padding: 0;
}
.b-flyout.m-quickshop .b-flyout-header {
  border-bottom: 1px solid #cfcfcf;
}
.b-flyout.m-quickshop .b-flyout-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

.b-dialog.m-quick_buy {
  display: flex;
  justify-content: stretch;
  left: initial;
  margin: 0;
  padding: 0;
  right: initial;
  transform: none;
  z-index: 3;
}
.b-dialog.m-quick_buy.m-opened {
  background-color: transparent;
  overflow: initial;
  position: absolute;
}
.b-dialog.m-quick_buy.m-opened::before {
  bottom: 0;
  content: "";
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}
.b-dialog.m-quick_buy .b-dialog-window {
  align-self: stretch;
  background: transparent;
  min-width: 100%;
  padding: 0;
  position: relative;
  top: -8px;
  width: 100%;
}
.b-dialog.m-quick_buy .b-dialog-body {
  background: transparent;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  margin-top: 0;
  min-height: 480px;
  padding: 8px;
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-dialog.m-quick_buy .b-dialog-body {
    min-height: 600px;
  }
}
.b-dialog.m-quick_buy.m-opened .b-dialog-body {
  background: #ffffff;
}
.b-dialog.m-quick_buy .b-dialog-header {
  margin: 0;
  padding: 0;
}
.b-dialog.m-quick_buy .b-dialog-close {
  z-index: 2;
}

.b-product_tile-quick_buy {
  display: inline-flex;
  line-height: 40px;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile-quick_buy {
    display: none;
  }
}
.b-product_tile-quick_buy.m-product_set, .b-product_tile-quick_buy.m-bundle {
  display: none;
}
.b-product_tile-quick_buy .b-button-icon svg {
  height: 20px;
  margin-bottom: 2px;
  width: 20px;
}
.b-quickshop {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.b-quickshop-heading {
  border-bottom: 1px solid #cfcfcf;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  padding: 4px 32px 12px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-heading {
    padding: 4px 16px 12px;
  }
}
.b-quickshop-sizes {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.b-quickshop-size_list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.b-quickshop-size_item {
  border-bottom: 1px solid #cfcfcf;
}
.b-quickshop-size_button {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 14px;
  justify-content: space-between;
  padding: 16px 32px;
  text-align: left;
  transition: background-color 0.15s ease;
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-size_button {
    padding: 16px;
  }
}
.b-quickshop-size_button:hover {
  background-color: #f5f5f5;
}
.b-quickshop-size_button[aria-current=true] {
  background-color: #000;
  color: #ffffff;
  font-weight: 600;
}
.b-quickshop-size_button[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
}
.b-quickshop-size_label {
  font-size: 14px;
}
.b-quickshop-size_oos {
  color: #757575;
  font-size: 12px;
}
.b-quickshop[data-ready-to-order=false] .b-quickshop-actions {
  display: none;
}
.b-quickshop-actions {
  border-top: 1px solid #cfcfcf;
  flex-shrink: 0;
  padding: 16px 32px;
}
@media screen and (max-width: 767.9px) {
  .b-quickshop-actions {
    padding: 16px;
  }
}
.b-quickshop-actions .b-quick_buy-actions {
  margin: 0;
}
.b-quickshop-actions .b-quick_buy-actions_inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.b-flyout.m-quickshop .b-flyout-body {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  padding: 0;
}
.b-flyout.m-quickshop .b-flyout-header {
  border-bottom: 1px solid #cfcfcf;
}
.b-flyout.m-quickshop .b-flyout-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 0;
}

:root {
  --page_visibility: visible;
}

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