@charset "UTF-8";
/*md
@no-stat

# Breakpoints

## Boilerplate breakpoints

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

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

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

## Supported screen resolutions

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

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

*/
/*md
@no-stat

# Media queries (breakpoints)

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

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

## Configuration

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

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

This is how `$media` map looks:

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

## Usage

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

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

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

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

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

*/
/*md
@no-stat

# Colors

## Palette

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

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

## Naming convention

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

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

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

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

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

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

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

```scss
{$}color-primary-button__background--hover: $color-grey-900;
```
*/
/*md
@no-stat

# Globals variables

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

It include:

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

*/
/*md
@no-stat

# Rh (Indents rhythm)

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

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

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

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

Designers should use the rhythm in his work.

## Usage

```scss
.component {
	@include rh(2); // => 8px
	@include rh(2 4 0); // => 8px 16px 0
}
```
*/
/*md
@no-stat

# Z-indexes

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

## Usage

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

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

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

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

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

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

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

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

# Grids

## How to setup grids config for project

### Several grid configs for project

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

### Gaps / margin / column span configuration:

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

### Grid-span configuration

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

## Work with grids

### Development approaches

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

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

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

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

### Get gaps / margin / column span

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

Please see [grid functions](00-configuration-grids_tools.html) details with usage examples.

### Examples of usage

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

*/
/*md
@no-stat

# grid-* (grid config get functions)

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

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

## Usage

```scss

// Configuration:

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

// Usage:

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

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

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

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

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

# Icons variables

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

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

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

*/
/*md
@no-stat

# grid-span

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

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

## Examples

### Flex-basis example

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

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

### Floated items example

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

### Inline-block items example

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

*/
/*md
@no-stat

# aspect-ratio

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

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

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

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

## Arguments

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

=> percentage

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

## Usage

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

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

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

*/
/*md
@no-stat

# Hide

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

Here is a list of parameters you can use:

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

## Usage

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

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

# Hover-supported

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

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

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

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

## Usage

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

# RTL selector

This mixin is designed to alter styles for RTL languages.

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

## Usage

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

# Icons

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

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

*/
/*md
@no-stat

# Carousel slide dimension

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

## Usage

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

# g-button

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

*/
/*md

# g-button_iconed

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

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

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

# g-radio

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

## Usage

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

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

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

## Unchecked

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

## Checked

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

## Disabled unchecked

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

## Disabled checked

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

## Invalid unchecked

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

## Invalid checked

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

## Customization by SCSS

Radio button styles that used in several component.

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

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

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

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

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

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

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

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

# g-checkbox

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

## Usage

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

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

The component usually points to choose settings or preferences.

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

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

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

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

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

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

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

```

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

## Customization by SCSS

Checkbox styles that used in several component.

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

It provide styles only for icon element based on SVG.

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

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

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

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

# g-spinner

Global spinner component applied to different blocks that fetch data.

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

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

# g-link

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

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

## Usage

## Default link type

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

##  Primary link 1

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


## Secondary link 1

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

## Icon link type

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

# g-link_hamburger

Hamburger menu generic link that used in several component.

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

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

# g-image_container

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

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

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

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

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

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

You could change aspect ration in mixin:

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

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

*/
/*md

# g-snap_scroll

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

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

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

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

*/
/*md

# g-backdrop_panel

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

Serve as regular overlay.

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

# g-dialog_backdrop

Dialog window backdrop styles that used in several component.

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

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

# g-section_holder

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

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

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

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

# g-section_holder_fullbleed

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

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

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

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

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

# g-grid

Grid layout component based on CSS grid.

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

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

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

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

# g-select

Designed to provide same styles of select across different components.

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

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

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

.l-account {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 72px;
  margin-top: 35px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-account {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .l-account {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.l-account.m-full {
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .l-account {
    margin-bottom: 95px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 1023px) {
  .l-account.m-track_order {
    margin-bottom: 15px;
  }
}
.l-account.m-gift_certificate_balance {
  margin-bottom: 88px;
  margin-top: 80px;
  max-width: 480px;
  padding-inline-end: 25px;
  padding-inline-start: 25px;
}
@media screen and (max-width: 767px) {
  .l-account.m-gift_certificate_balance {
    margin-bottom: 56px;
    margin-top: 32px;
  }
}
@media screen and (max-width: 1023px) {
  .l-account.m-login {
    margin-bottom: 60px;
    margin-top: 0;
  }
}
.l-account-slot {
  width: 100%;
}
.l-account-slot.m-account {
  margin-top: 15px;
}
.l-account.m-track_order .l-account-slot {
  margin-top: 0;
}
.l-account-message {
  margin-bottom: 24px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-account-message {
    margin-bottom: 48px;
  }
}
.l-account-nav {
  overflow: hidden;
  padding: 0;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-account-nav {
    border-right: 1px solid #808080;
    margin-right: 48px;
    padding-right: 30px;
    width: calc(25% - 48px);
  }
}
.l-account-main {
  flex-basis: 100%;
  max-width: 100%;
}
@media screen and (min-width: 1024px) {
  .l-account-main {
    flex-basis: 75%;
    max-width: 75%;
    padding-left: 4px;
    width: 75%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-account-banner {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (max-width: 767px) {
  .l-account-banner {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (min-width: 1024px) {
  .l-account-banner {
    margin-top: 45px;
    width: 100%;
  }
}
.l-account-banner .b-promo_box-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 25.1449275362%;
  position: relative;
  width: 100%;
}
.l-account-banner .b-promo_caption-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 35px;
}
@media screen and (max-width: 1023px) {
  .l-account-banner .b-promo_caption-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.l-account-recommendations {
  width: 100%;
}
.l-account-recommendations .b-carousel {
  margin: 45px 0 0;
}
@media screen and (max-width: 767px) {
  .l-account-recommendations .b-carousel-track {
    margin-right: -15px;
  }
}
.l-account .b-breadcrumbs {
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}
.l-account .b-options_group {
  border: unset;
  min-inline-size: auto;
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .l-account-profile {
    flex-basis: 75%;
    max-width: 75%;
    width: 75%;
  }
}
@media screen and (max-width: 767px) {
  .b-account .l-account-profile .b-options_group {
    border: none;
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-account .l-account-profile .b-options_group-legend {
    padding: 0;
  }
}

/*md

# Form

Form component designed to create an easy and versatile form layout system.

Forms are built with a combination of standard form elements with a `.b-form_section` wrapper to hold labels, errors and caption for each field.

Each line can hold from one to three form elements, it required only modifier to control that. Also it possible to use any form element inside lines

```html_example
<form class="b-form" autocomplete="on" novalidate="" data-widget="shippingForm" data-event-submit.prevent="handleSubmit" data-widget-event-updateshippingform="updateSummaryEv" data-address-selector="shippingAddressSelector" data-address-fields="dwfrm_shipping_shippingAddress_addressFields_firstName,dwfrm_shipping_shippingAddress_addressFields_lastName,dwfrm_shipping_shippingAddress_addressFields_address1,dwfrm_shipping_shippingAddress_addressFields_address2,dwfrm_shipping_shippingAddress_addressFields_country,dwfrm_shipping_shippingAddress_addressFields_states_stateCode,dwfrm_shipping_shippingAddress_addressFields_city,dwfrm_shipping_shippingAddress_addressFields_postalCode,dwfrm_shipping_shippingAddress_addressFields_phone" data-widget-event-submit="shippingSubmitted" data-select-shipping-method-url="https://zzrk-007.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.store/Sites-Boilerplate-NA-Site/en_US/CheckoutShippingServices-SelectShippingMethod" data-update-shipping-list-url="https://zzrk-007.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.store/Sites-Boilerplate-NA-Site/en_US/CheckoutShippingServices-UpdateShippingMethodsList" data-create-shipment-url="https://zzrk-007.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.store/Sites-Boilerplate-NA-Site/en_US/CheckoutAddressServices-CreateNewAddress" action="/on/demandware.store/Sites-Boilerplate-NA-Site/en_US/CheckoutShippingServices-SubmitShipping" data-address-mode="edit" data-form-definition-url="/on/demandware.store/Sites-Boilerplate-NA-Site/en_US/Forms-FormDefinition?form=shipping" name="dwfrm_shipping" id="dwfrm_shipping" data-address-autocomplete-enabled="false" data-initialized="1" aria-busy="false">

	<div class="b-form-message" role="alert" data-ref="errorMessageLabel">
		Form error message here <a class="b-form-message_link" href="#">Link</a>
	</div>

	<fieldset class="b-form-set" data-ref="addressForm">
		<legend class="b-form-set_label">
			Shipping address (form-set)
		</legend>

		<div class="b-form_section">
			<label class="b-form_section-label">
				First Name (form_section)
			</label>
			<input class="b-input" type="text" placeholder="First Name">
		</div>

		<div class="b-form-line m-equal">
			<div class="b-form_section">
				<label class="b-form_section-label">
					First Name (form-line equal)
				</label>
				<input class="b-input" type="text" placeholder="First Name">
			</div>

			<div class="b-form_section">
				<label class="b-form_section-label">
					Last Name (form-line)
				</label>
				<input class="b-input" type="text" placeholder="Last Name">
			</div>
		</div>

		<div class="b-form-line m-fixed_width">
			<div class="b-form_section">
				<label class="b-form_section-label">
					First Name (form-line fixed-width)
				</label>
				<input class="b-input" type="text" placeholder="First Name">
			</div>

			<div class="b-form_section">
				<label class="b-form_section-label">
					Last Name
				</label>
				<input class="b-input" type="text" placeholder="Last Name">
			</div>

			<div class="b-form_section">
				<label class="b-form_section-label">
					Phone Number
				</label>
				<input class="b-input" type="text" placeholder="Phone Number">
			</div>
		</div>
	</fieldset>
</form>
```

*/
.b-form.m-multiline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.b-form.m-visibility_hidden {
  visibility: hidden;
}
.b-form-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 32px;
}
@media screen and (max-width: 1023px) {
  .b-form-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-form-description {
  margin-bottom: 20px;
  padding: 8px 0;
}
.b-form-message {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fce6e6;
  color: #951e0f;
  flex: 0 0 100%;
  font-weight: 300;
  margin-bottom: 25px;
  padding: 16px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-form-message {
    margin-bottom: 20px;
  }
}
.b-form-message_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-form-message_link:hover {
    text-decoration: none;
  }
}
.b-form-message_link > svg {
  height: 9px;
  width: 15px;
}
.b-form-message_link.b-button svg {
  width: 15px;
}
.b-form-message_link:disabled, .b-form-message_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-form-message_link:hover {
    text-decoration: none;
  }
}
.b-form-error_feedback {
  color: #ed432c;
  font-size: 12px;
  margin-top: 20px;
}
.b-form-set {
  border: none;
  display: block;
  margin: 16px 0;
  min-width: 0;
  padding: 0;
  position: relative;
}
.b-form-set[hidden] {
  display: none;
}
.b-form-set_label {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  display: block;
  margin-bottom: 16px;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-form-set_label {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-form-set_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-line {
  display: flex;
  width: 100%;
}
.b-form-line.m-actions {
  margin-top: 48px;
}
.b-form-line[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-form-line > .b-form_section {
  width: 100%;
}
.b-form-line.m-address_quick > .b-form_section {
  background-color: #fff;
}
@media screen and (max-width: 767px) {
  .b-form-line.m-address_quick > .b-form_section {
    padding: 25px 15px;
  }
}
.b-form-line.m-equal {
  justify-content: space-between;
  width: calc(50% - 12px);
}
.b-form-line.m-equal-lg {
  justify-content: space-between;
  width: calc(50% - 12px);
}
@media screen and (max-width: 1023px) {
  .b-form-line.m-equal-lg {
    width: 100%;
  }
}
.b-form-line.m-third-lg {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-form-line.m-third-lg {
    justify-content: space-between;
    width: calc(33% - 12px);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-form-line.m-third-lg {
    width: 100%;
  }
}
.b-form-line.m-third {
  width: calc(33% - 12px);
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .l-checkout-main .b-form-line.m-third {
    width: calc(50% - 7px);
  }
}
@media screen and (max-width: 1023px) {
  .b-form-line.m-third.m-mobile_full_width {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .b-form-line.m-mobile_column {
    flex-flow: column;
  }
}
.b-form-line.m-column {
  flex-flow: column;
}
.b-form-line.m-column .b-button + .b-button {
  margin-top: 20px;
}
.b-form-line.m-card_expiration {
  flex-wrap: nowrap;
}
.b-options_group.m-account .b-form-line {
  flex-direction: column;
  padding-top: 20px;
}
.b-form-line_title {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 15px;
}
.b-form-line_divider {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 300;
  height: 44px;
  margin: 0 16px;
}
.b-form-btn_save {
  margin-inline-end: 20px;
}
@media screen and (max-width: 767px) {
  .b-form-btn_save {
    margin: 0 0 20px;
  }
}
.b-form-btn_cancel {
  padding: 0 36px;
}
.b-form .m-checkout_shipping-new_address {
  margin-bottom: 25px;
}
.b-form .m-checkout_shipping-new_address .b-options_group-actions {
  margin-top: 25px;
}
.b-form .m-checkout_shipping-new_address .b-button.m-outline {
  padding: 8px 80px;
}
.b-form .m-checkout_shipping-new_address .b-form-line > .b-form_section,
.b-form .m-checkout_shipping-new_address .m-manual_block-show .b-swiching_form-manual {
  margin-bottom: 15px;
}
.b-form .m-checkout_shipping-new_address .b-swiching_form .b-form-line:last-child > .b-form_section {
  margin-bottom: 0;
}
.b-form .m-checkout_billing-new_address .b-options_group-actions {
  margin-top: 25px;
}
.b-form .m-checkout_billing-new_address .b-swiching_form .b-form-line:last-child > .b-form_section {
  margin-bottom: 0;
}
.b-form.m-coupons {
  margin: auto;
  max-width: 865px;
}
.b-form.m-coupons .b-button.m-default {
  margin: auto;
}
@media screen and (max-width: 767px) {
  .b-form.m-coupons .b-button.m-default {
    width: 100%;
  }
}

/*md

# b-checkbox

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

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

/*md

# Textarea

Default textarea element

## Default

```html_example
<!--
Classes:
.m-invalid - Invalid
.m-valid - Valid
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<textarea
	id=""
	class="b-textarea [modifier class]"
	data-ref="field"
	placeholder="Enter your text…"
	rows="5"
></textarea>
```

*/
.b-textarea {
  -webkit-appearance: none;
          appearance: none;
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  box-shadow: none;
  color: #000;
  cursor: text;
  font-family: inherit;
  font-size: 16px;
  max-width: 100%;
  min-height: 6em;
  min-width: 100%;
  padding: 8px 16px;
  vertical-align: baseline;
}
.b-textarea.m-invalid {
  background: #fff;
  border: 2px solid #ed432c;
}
.b-textarea.m-no_resize {
  resize: none;
}
.b-textarea.m-disabled, .b-textarea[disabled] {
  background: #fff;
  cursor: default;
  pointer-events: none;
}

.b-input_as_text {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  -webkit-appearance: none;
          appearance: none;
  border: none;
  color: inherit;
  display: block;
  width: 100%;
  background-color: inherit;
  padding: 10px 0 5px;
}

/*md

# Tabs (`b-tab_list` / `b-tab_panel`)

Tabs presents multiple mutually exclusive panes of content in the same area.
Includes a tabbed control(tab) and a content area. Clicking a tab displays its corresponding pane in the content area.

## Attributes

```
[boolean] - data-active-first - activate first tab and first tab panel
[string]  - data-active-panel - activate tab and tab panel by provided panel id
[boolean] - data-auto-activation - if tabs list should follow accessibility `Tabs with Automatic Activation` feature
```

## Usage

To get started with tabs we should link the tab and the content area.
We have a `data-panel-name` attribute on a tab and `id` attribute on the pane for that.

### Tabs with automatic activation (data-auto-activation="true")

The tab pane content will change just in case of using arrow keys.
With using just a Tab key, inactive tabs will be skipped by focus.
Click functionality works as usual.

```html_example
<div
	data-widget="tabs"
	data-auto-activation="true"
	data-active-panel="firstPanel"
	data-event-keydown="handleKeydown"
>
	<div data-ref="tablist" role="tablist" class="b-tab_list">
		<button aria-selected="true"
				class="b-tab_list-tab"
				data-panel-name="firstPanel"
				data-widget-event-click="handleTabClick"
				data-id="button-firstPanel"
				data-event-click.prevent="handleClick"
				data-widget="button"
				role="tab"
		>
			First tab
		</button>

		<button
				tabindex="-1"
				aria-selected="false"
				class="b-tab_list-tab"
				data-panel-name="secondPanel"
				data-widget-event-click="handleTabClick"
				data-id="button-secondPanel"
				data-event-click.prevent="handleClick"
				data-widget="button"
				role="tab"
		>
			Second tab
		</button>
	</div>

	<div
		role="tabpanel"
		tabindex="0"
		aria-expanded="false"
		class="b-tab_panel"
		aria-labelledby="content-pane-tab"
		data-widget="tabPanel"
		id="firstPanel"
	>
		<h1>The content of a FIRST tab</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
			magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
			nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
			anim id est laborum.</p>
	</div>

	<div
		role="tabpanel"
		tabindex="0"
		aria-expanded="false"
		class="b-tab_panel"
		aria-labelledby="content-pane-tab"
		data-widget="tabPanel"
		id="secondPanel"
	>
		<h1>The content of a SECOND tab</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
			magna aliqua.</p>
	</div>
</div>
```

### Tabs with manual activation (data-auto-activation="false")

The tab pane content will change just in case of using Enter/Space button on focused element.
Click functionality works as usual.

```html_example
<div
	data-widget="tabs"
	data-auto-activation="false"
	data-event-keydown="handleKeydown"
	data-active-panel="firstPanel"
>
	<div data-ref="tablist" role="tablist" class="b-tab_list">
		<button aria-selected="true"
				class="b-tab_list-tab"
				data-panel-name="firstPanel"
				data-widget-event-click="handleTabClick"
				data-id="button-firstPanel"
				data-event-click.prevent="handleClick"
				data-widget="button"
				role="tab"
		>
			First tab
		</button>

		<button
			aria-selected="false"
			class="b-tab_list-tab"
			data-panel-name="secondPanel"
			data-widget-event-click="handleTabClick"
			data-id="button-secondPanel"
			data-event-click.prevent="handleClick"
			data-widget="button"
			role="tab"
		>
			Second tab
		</button>
	</div>

	<div
		role="tabpanel"
		tabindex="0"
		aria-expanded="false"
		class="b-tab_panel"
		aria-labelledby="content-pane-tab"
		data-widget="tabPanel"
		id="firstPanel"
	>
		<h1>The content of a FIRST tab</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
			magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
			commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
			nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
			anim id est laborum.</p>
	</div>

	<div
		role="tabpanel"
		tabindex="0"
		aria-expanded="false"
		class="b-tab_panel"
		aria-labelledby="content-pane-tab"
		data-widget="tabPanel"
		id="secondPanel"
	>
		<h1>The content of a SECOND tab</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
			magna aliqua.</p>
	</div>
</div>
```

## SCSS Notes

We have two SCSS blocks for Tabs. The first is for tab controls `b-tab_list` , and the second is fortab content
areas `b-tab_panel`.
*/
.b-tab_list {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 16px auto;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-user-select: none;
          user-select: none;
}
.b-tab_list::-webkit-scrollbar {
  display: none;
}
.b-tab_list.m-search {
  margin: 0 0 44px;
}
.b-tab_list.m-pdp {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 32px 0 40px;
}
@media screen and (max-width: 1023px) {
  .b-tab_list.m-pdp {
    flex-direction: column;
    margin: 0 0 30px;
  }
}
.b-tab_list.m-checkout {
  justify-content: flex-start;
}
.b-tab_list.m-account {
  display: none;
}
@media screen and (max-width: 1023px) {
  .b-tab_list.m-account {
    display: flex;
    flex: 0 0 100%;
    margin: 10px 0 35px;
  }
}
.b-tab_list.m-account .b-tab_list-tab {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: unset;
  color: #222f58;
  padding: 12px 8px;
}
@media screen and (max-width: 1023px) {
  .b-tab_list.m-account .b-tab_list-tab {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-tab_list.m-account .b-tab_list-tab {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-tab_list.m-account .b-tab_list-tab.m-active {
  border-color: #22387c;
}
.b-tab_list-tab {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  padding: 12px 40px;
  position: relative;
  text-decoration: none;
  text-transform: initial;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  white-space: nowrap;
  min-height: 54px;
}
@media screen and (max-width: 1023px) {
  .b-tab_list-tab {
    width: 100%;
  }
}
.b-tab_list-tab i {
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: 1px solid #4d4d4d;
  border-radius: 20px;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin-inline-end: 12px;
  min-height: 20px;
  min-width: 20px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border, box-shadow;
  vertical-align: sub;
  width: 20px;
  margin-inline-end: 8px;
}
.b-tab_list-tab i::-ms-check {
  display: none;
}
.b-tab_list-tab i::before {
  background-color: #fff;
  border-radius: 12px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
  width: 12px;
}
.b-tab_list-tab.m-active {
  border-color: #22387c;
}
.b-tab_list-tab.m-active i {
  border-color: #22387c;
  border-width: 1px;
}
.b-tab_list-tab.m-active i::before {
  background-color: #22387c;
  transform: translate(-50%, -50%) scale(1);
}
.m-pdp .b-tab_list-tab {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  color: #22387c;
  margin-inline-start: 0;
}
.m-pdp .b-tab_list-tab.m-active {
  border-color: #22387c;
}
@media screen and (max-width: 1023px) {
  .m-pdp .b-tab_list-tab {
    font-size: 14px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: normal;
    align-items: center;
    display: flex;
    text-align: left;
  }
}
@media screen and (min-width: 1024px) {
  .m-pdp .b-tab_list-tab {
    font-size: 20px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: normal;
    flex: 1 0 50%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .m-pdp .b-tab_list-tab {
    font-size: 18px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: normal;
  }
}
.b-tab_list.m-checkout .b-tab_list-tab {
  font-weight: bold;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .b-tab_list.m-search .b-tab_list-tab {
    font-size: 20px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    padding: 12px;
  }
}
@media screen and (max-width: 1366px) {
  .b-tab_list-tab.m-left {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
  }
}
@media screen and (min-width: 1367px) {
  .b-tab_list-tab.m-left {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}
@media screen and (max-width: 1366px) {
  .b-tab_list-tab.m-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media screen and (min-width: 1367px) {
  .b-tab_list-tab.m-right {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}

.b-tab_panel {
  display: none;
  width: 100%;
}
.b-tab_panel.m-active {
  display: block;
}

/*md

# b-message

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

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

.b-social {
  align-items: center;
  display: flex;
}
.b-social-title {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-inline-end: 12px;
}
@media screen and (max-width: 767px) {
  .b-social-title {
    display: none;
  }
}
.b-social-items {
  display: flex;
}
.b-social-link {
  align-items: center;
  -webkit-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  width: 24px;
}
.b-social-link:hover {
  color: #808080;
}

.b-summary_section {
  padding-top: 20px;
}
.b-summary_section.m-payments {
  margin-bottom: 0;
}
.b-summary_section.m-banner {
  margin-top: 35px;
  padding-top: 0;
}
@media screen and (max-width: 1023px) {
  .b-summary_section.m-banner {
    margin-top: 20px;
  }
}
.b-summary_section .b-promo_box-picture {
  padding-bottom: 37.1937639198%;
}
.b-summary_section .b-promo_box.m-caption_center .b-promo_box-caption {
  padding: 15px 0;
}
@media screen and (min-width: 1024px) {
  .b-summary_section .b-promo_box.m-caption_center .b-promo_box-caption {
    grid-column: 2/span 10;
    padding: 26px 0;
  }
}
.b-summary_section .b-promo_caption-title {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (min-width: 1024px) {
  .b-summary_section .b-promo_caption-title {
    font-size: 12px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-summary_section-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 16px;
}
@media screen and (max-width: 1023px) {
  .b-summary_section-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}

.b-summary_table {
  width: 100%;
}
.b-summary_table-name, .b-summary_table-value {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1px;
  color: inherit;
  text-align: start;
}
@media screen and (max-width: 1023px) {
  .b-summary_table-name, .b-summary_table-value {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-summary_table.m-checkout-aside .b-summary_table-name, .b-summary_table.m-checkout-aside .b-summary_table-value {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (max-width: 1023px) {
  .b-summary_table.m-checkout-aside .b-summary_table-name, .b-summary_table.m-checkout-aside .b-summary_table-value {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-summary_table-name.m-tooltip {
  align-items: center;
  display: flex;
}
.b-summary_table-value {
  text-align: end;
  vertical-align: top;
  white-space: nowrap;
}
.b-summary_table-value.m-free_shipping {
  text-transform: uppercase;
}
.b-summary_table-value.m-top_align {
  vertical-align: top;
}
.b-summary_table-value.m-middle_align {
  vertical-align: middle;
}
.b-summary_table-value.m-secondary {
  color: #4d4d4d;
}
.b-summary_table-item {
  display: table;
  width: 100%;
}
.b-summary_table-item.m-discount {
  color: #ed432c;
}
.b-summary_table-item.m-total {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 20px 0;
  position: relative;
}
.b-summary_table:not(.m-checkout-aside) .b-summary_table-item.m-total {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  margin-top: 20px;
}
.b-summary_table.m-checkout-aside .b-summary_table-item.m-total {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}
@media screen and (max-width: 1023px) {
  .b-summary_table.m-checkout-aside .b-summary_table-item.m-total {
    margin-top: 20px;
    padding-top: 20px;
  }
}
.b-summary_table.m-checkout .b-summary_table-item.m-total {
  color: #000;
  margin-top: 26px;
}
@media screen and (min-width: 1024px) {
  .b-summary_table.m-checkout .b-summary_table-item.m-total {
    margin-top: 36px;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_table-item.m-tooltip {
    position: relative;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_table-item.m-tooltip .b-tooltip {
    position: static;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_table-item.m-alle {
    position: relative;
  }
}
.b-summary_table-item.m-alle .b-summary_table-value {
  font-size: 16px;
  font-weight: 400;
}
@media screen and (max-width: 1023px) {
  .b-summary_table-item.m-alle .b-summary_table-value {
    font-size: 14px;
  }
}
.b-summary_table-item.m-promo {
  margin-top: 11px;
}
.b-summary_table-item.m-afterpay {
  margin-top: 20px;
}
.m-checkout-aside .b-summary_table-item:first-child {
  margin-top: 20px;
}
.b-summary_table-item + .b-summary_table-item:not(.m-promo):not(.m-recurring):not(.m-total):not(.m-afterpay) {
  margin-top: 15px;
}
.b-summary_table.m-checkout-aside .b-summary_table-item + .b-summary_table-item:not(.m-promo):not(.m-recurring):not(.m-total):not(.m-afterpay) {
  margin-top: 10px;
}
.b-summary_table-alle {
  align-items: center;
  display: flex;
  margin-top: 10px;
}
.b-summary_table-alle_text {
  font-size: 16px;
  font-weight: 400;
  margin-inline-end: 6px;
}
.b-summary_table-alle_value {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: 10px;
}
.b-summary_table-recurring {
  color: #000;
  text-align: left;
}
.b-summary_table-recurring .b-recurring {
  margin-bottom: 30px;
}
.b-summary_table-recurring_button {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  padding: 16px 0 12px;
}
.b-summary_table-recurring_button:hover {
  color: #000;
}
.b-summary_table-tax {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-summary_table.m-checkout-aside {
  border-top: 1px solid #ccc;
  margin-top: 20px;
}

.b-summary_address {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: -0.5px;
  word-break: break-word;
}
.b-summary_address-default {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fff;
  border-radius: 4px;
  color: #000;
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 10px 2px;
}
.b-option_switch .b-summary_address {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-option_switch .b-summary_address .b-summary_address-default {
  margin-top: 7px;
  padding: 2px 10px;
  color: #fff;
  background-color: #22387c;
}
.b-option_switch .b-summary_address p {
  font-size: 13px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-option_switch .b-summary_address p:first-child {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.5px;
  margin-bottom: 5px;
}

.b-summary_shipping-arrival_time {
  color: #999;
  display: block;
}
.b-summary_shipping-cost {
  margin-inline-start: auto;
}

.b-summary_payment {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
@media screen and (max-width: 767px) {
  .b-summary_payment {
    margin-bottom: 0;
  }
}
.b-summary_payment-line {
  display: block;
}
.b-summary_payment-line.m-confirmation {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-summary_payment-line.m-card_info {
    white-space: nowrap;
  }
}
.b-summary_payment-afterpay_logo {
  align-items: center;
  background: #000;
  border-radius: 200px;
  display: flex;
  flex-grow: 0;
  min-width: 103px;
  min-width: auto;
  padding: 5px 10px;
}
.b-summary_payment-afterpay_img {
  height: 16px;
}
@media screen and (max-width: 1023px) {
  .b-summary_payment-afterpay_img {
    height: auto;
    width: 83px;
  }
}

.b-summary_group-item {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: normal;
  line-height: 1.5;
  letter-spacing: -0.5px;
}
.b-summary_group-item.m-confirmation {
  width: 100%;
  margin-bottom: 30px;
}
.b-summary_group-item.m-confirmation.m-account {
  margin-left: 0;
}
.b-summary_group-item.m-confirmation.m-account + .b-summary_group-item.m-confirmation.m-account {
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .b-summary_group-item.m-confirmation.m-account:last-of-type {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-summary_group-item.m-confirmation.m-account {
    margin-bottom: 16px;
  }
}
.b-summary_group-item.m-gift-message.m-hide {
  display: none;
}
.b-summary_group-email {
  font-weight: 300;
  word-wrap: break-word;
}
.b-summary_group.m-confirmation .b-summary_group-email {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-summary_group-title {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  color: #222f58;
  margin-bottom: 8px;
}
@media screen and (max-width: 1023px) {
  .b-summary_group-title {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .m-account .b-summary_group-title {
    font-size: 18px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
  }
}
.b-summary_group-caption {
  color: #999;
}
.b-summary_group-message {
  color: #2bb229;
  margin-top: 20px;
}
.m-summary .b-summary_group {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

.b-summary_group.m-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .b-summary_group.m-columns {
    flex-direction: column;
  }
}
.b-summary_group.m-columns.m-billing {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-summary_group.m-columns.m-billing {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_group.m-columns.m-billing {
    flex-wrap: wrap;
  }
}
.b-summary_group.m-columns .b-summary_group-item {
  margin-top: 0;
}
@media screen and (max-width: 1023px) {
  .b-summary_group.m-columns .b-summary_group-item {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-summary_group.m-columns .b-summary_group-item {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-summary_group.m-columns .b-summary_group-item + .b-summary_group-item {
    margin: 24px 0 0;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_group.m-columns .b-summary_group-item + .b-summary_group-item {
    margin: 24px 0 0;
  }
}
.b-summary_group.m-columns .b-summary_group-item.m-gift {
  margin-top: 24px;
  width: 100%;
}

.b-checkout_products {
  color: #000;
}
@media screen and (max-width: 1023px) {
  .b-checkout_products {
    padding: 20px 0 0;
  }
}
.b-checkout_products.m-confirmation_page {
  padding: 20px 16px 0;
}
@media screen and (max-width: 1023px) {
  .b-checkout_products.m-confirmation_page {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
  }
}
.b-checkout_products-counter {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-checkout_products-counter {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-checkout_products.m-confirmation_page .b-checkout_products-counter {
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 10px;
    padding-bottom: 18px;
  }
}
.b-checkout_products-list_header {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: grid;
  grid-template-areas: "product product qty total";
  grid-template-columns: 120px 3fr 1fr 1fr;
  padding: 24px 0 18px;
}
@media screen and (max-width: 1023px) {
  .b-checkout_products-list_header {
    display: none;
  }
}
.b-checkout_products-list_header_item {
  grid-area: product;
}
.b-checkout_products-list_header_qty {
  grid-area: qty;
  padding-inline-start: 20px;
}
.b-checkout_products-list_header_total {
  grid-area: total;
  text-align: right;
}

.b-payment_icon {
  background-size: cover;
  display: inline-block;
  flex-shrink: 0;
  height: 28px;
}
.b-summary_payment .b-payment_icon {
  margin-left: 10px;
}
.b-payment_icon.m-payment_list {
  align-self: center;
  width: 50px;
}
.b-payment_icon.m-visa {
  background: url("./images/icons/visa.svg") no-repeat;
}
.b-payment_icon.m-amex {
  background: url("./images/icons/amex.svg") no-repeat;
  width: 45px;
}
.b-payment_icon.m-discover {
  background: url("./images/icons/discover.svg") no-repeat;
  width: 60px;
}
.b-payment_icon.m-mastercard, .b-payment_icon.m-master {
  background: url("./images/icons/mastercard.svg") no-repeat;
}

.b-form_line_cvv {
  position: relative;
  width: 100%;
}
.b-form_line_cvv .b-input {
  width: calc(50% - 20px);
}
.b-form_line_cvv-image {
  align-items: center;
  display: flex;
  height: 44px;
  position: absolute;
  right: 0;
  top: 26px;
  width: 50%;
  /* stylelint-disable-next-line */
}
html[dir=rtl] .b-form_line_cvv-image {
  left: 0;
  right: initial;
}

.b-load_progress {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}
.b-load_progress-description {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 25px;
}
.b-load_progress-indicator {
  background-color: #b3b3b3;
  height: 2px;
  max-width: 333px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .b-load_progress-indicator {
    max-width: initial;
  }
}
.b-load_progress-value {
  background-color: #22387c;
  height: 100%;
}

.b-load_more {
  margin-top: 35px;
  text-align: center;
}
.b-load_more.m-previous {
  margin-top: 16px;
}
.b-load_more-button {
  padding: 0 24px;
}

.b-reset_password {
  position: relative;
}
.b-reset_password-btn {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  line-height: 1.2;
  position: absolute;
  right: 0;
  top: 4px;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  /* stylelint-disable-next-line */
}
@media not all and (pointer: coarse) {
  .b-reset_password-btn:hover {
    text-decoration: none;
  }
}
.b-reset_password-btn > svg {
  height: 9px;
  width: 15px;
}
.b-reset_password-btn.b-button svg {
  width: 15px;
}
.b-reset_password-btn:disabled, .b-reset_password-btn.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
html[dir=rtl] .b-reset_password-btn {
  left: 0;
  right: initial;
}
.b-reset_password-btn::after {
  bottom: -6px;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: -6px;
}
.b-reset_password-btn_login {
  width: 100%;
}

.b-order_details {
  color: #000;
}
.b-order_details.m-guest {
  max-width: 915px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-order_details.m-guest {
    margin: 0 auto;
    padding: 0;
  }
}
.b-order_details-main {
  margin-bottom: 56px;
}
.m-account .b-order_details-main {
  margin-bottom: 20px;
}
@media screen and (min-width: 1367px) {
  .b-order_details-main {
    margin-bottom: 0;
    padding-inline-end: 12%;
    width: 65%;
  }
}
.b-order_details.m-guest .b-order_details-main {
  padding-inline-end: 0;
  width: 100%;
}
.b-order_details.m-account .b-order_details-main {
  padding-inline-end: 0;
  width: 100%;
}
@media screen and (min-width: 1367px) {
  .b-order_details-aside {
    width: 35%;
  }
}
@media screen and (min-width: 1024px) {
  .l-checkout .b-order_details-aside {
    max-width: 498px;
  }
}
.b-order_details.m-guest .b-order_details-aside {
  width: 100%;
}
.b-order_details-aside.m-checkout {
  width: 100%;
}
.b-order_details.m-account .b-order_details-aside {
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 24px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .b-order_details.m-account .b-order_details-aside {
    flex-direction: column;
    padding: 16px;
  }
}
.b-order_details-aside .b-promo_box {
  z-index: 1;
  margin-top: 35px;
  position: relative;
}
.b-order_details-aside_item {
  margin-bottom: 50px;
}
.b-order_details-aside_item:last-child {
  margin-bottom: 0;
}
.b-order_details.m-confirmation_page .b-order_details-aside_item {
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.35);
  padding: 40px 40px 75px;
}
@media screen and (max-width: 1023px) {
  .b-order_details.m-confirmation_page .b-order_details-aside_item {
    margin-bottom: 30px;
    padding: 18px 16px;
  }
}
.b-order_details.m-confirmation_page .b-order_details-aside_item .b-recurring {
  margin-top: 20px;
}
.b-order_details.m-account .b-order_details-aside_item {
  margin-bottom: 0;
  width: calc(50% - 20px);
}
@media screen and (max-width: 767px) {
  .b-order_details.m-account .b-order_details-aside_item {
    width: 100%;
  }
}
.b-order_details.m-account .b-order_details-aside_item.m-total {
  padding-top: 46px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-order_details.m-account .b-order_details-aside_item.m-total {
    padding-top: 24px;
  }
}
.b-order_details-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 32px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-order_details-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-order_details.m-confirmation_page .b-order_details-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 20px;
  padding-bottom: 12px;
}
@media screen and (max-width: 1023px) {
  .b-order_details.m-confirmation_page .b-order_details-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-order_details-subtitle {
  font-weight: 600;
  margin-bottom: 12px;
}

.b-navigation_show {
  border-bottom: 1px solid #808080;
  border-top: 1px solid #808080;
  display: flex;
  justify-content: center;
  margin: 0 0 35px;
  padding: 24px 0;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-navigation_show {
    display: none;
  }
}
.b-navigation_show svg {
  height: 25px;
  left: 4px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
}
.b-navigation_show-text {
  font-size: 20px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0 auto;
}

.b-navigation_panel {
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .b-navigation_panel {
    display: block;
    position: static;
    visibility: visible;
    z-index: initial;
  }
}
@media screen and (min-width: 1024px) {
  .b-navigation_panel::after {
    display: none;
  }
}
.b-navigation_panel .b-dialog-close {
  justify-content: flex-end;
  margin-bottom: 35px;
  position: static;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-navigation_panel .b-dialog-close {
    display: none;
  }
}
.b-navigation_panel .b-dialog-close svg {
  color: #000;
}
@media screen and (max-width: 1023px) {
  .b-navigation_panel-inner {
    background-color: #fff;
    bottom: 0;
    height: 100%;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    transform: translateX(-100%);
    transition-property: visibility, transform;
    visibility: hidden;
    width: 100vw;
    z-index: 17;
    /* stylelint-disable-next-line */
  }
  html[dir=rtl] .b-navigation_panel-inner {
    left: initial;
    right: 0;
    transform: translateX(100%);
  }
  .b-navigation_panel-inner.m-closed {
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  }
  .b-navigation_panel-inner.m-active {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    transform: translateX(0);
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
    visibility: visible;
    /* stylelint-disable-next-line */
  }
  html[dir=rtl] .b-navigation_panel-inner.m-active {
    transform: translateX(0);
  }
}
@media screen and (max-width: 1023px) {
  .b-navigation_panel-header {
    background: radial-gradient(1412.55% 304.15% at 27.64% -147.55%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #f9f9f9;
    padding: 16px 15px 19px;
  }
}
@media screen and (max-width: 1023px) {
  .b-navigation_panel-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-navigation_panel-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  display: block;
  margin-bottom: 32px;
}
@media screen and (max-width: 1023px) {
  .b-navigation_panel-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-navigation_panel-title {
    display: none;
  }
}

/*md

```html_example
<div class="b-customer_service_info" aria-label="Need Help?">
    <h2 class="b-customer_service_info-title">Need Help? Contact Us</h2>
    <p class="b-customer_service_info-schedule">
        We’re available by phone 8:00am - 6:00pm CST, M-F, except holidays.
    </p>
    <a
        href="tel:1-888-912-1572"
        aria-label="Call customer service: 1-888-912-1572"
        class="b-customer_service_info-phone">
        <svg role="presentation" focusable="false" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.66965 9.7014C6.44762 11.2919 7.73687 12.5753 9.3309 13.346C9.44753 13.4013 9.57654 13.4252 9.70523 13.4155C9.83392 13.4058 9.95786 13.3627 10.0648 13.2905L12.4119 11.7254C12.5157 11.6562 12.6352 11.6139 12.7594 11.6025C12.8837 11.5911 13.0088 11.6109 13.1235 11.66L17.5144 13.5419C17.6636 13.6052 17.7881 13.7154 17.8693 13.8556C17.9504 13.9959 17.9838 14.1588 17.9643 14.3197C17.8255 15.4057 17.2956 16.4039 16.4739 17.1273C15.6521 17.8508 14.5948 18.2499 13.5 18.25C10.1185 18.25 6.87548 16.9067 4.48439 14.5156C2.0933 12.1245 0.75 8.88148 0.75 5.49997C0.750058 4.40513 1.14918 3.34786 1.87264 2.5261C2.5961 1.70435 3.59428 1.17448 4.68028 1.03569C4.84117 1.01622 5.00403 1.04956 5.14432 1.1307C5.28461 1.21183 5.39473 1.33636 5.4581 1.48552L7.34158 5.88032C7.3903 5.994 7.41015 6.11796 7.39936 6.24116C7.38858 6.36436 7.3475 6.48299 7.27977 6.58647L5.72011 8.96957C5.64912 9.07677 5.60716 9.20056 5.59831 9.32883C5.58947 9.4571 5.61405 9.58547 5.66965 9.7014V9.7014Z" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        1-888-912-1596
    </a>
    <p>Email us: <a href="#" aria-label="Send Email to the customer service" class="b-customer_service_info-link">email@email.com</a></p>
</div>
```

*/
.b-customer_service_info {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-customer_service_info-title {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 15px;
}
@media screen and (max-width: 1023px) {
  .b-customer_service_info-title {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
.b-customer_service_info-schedule {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 20px;
}
.b-customer_service_info-phone {
  display: flex;
  margin-bottom: 20px;
}
.b-customer_service_info-phone svg {
  height: 16px;
  margin-right: 10px;
  width: 16px;
}
.b-customer_service_info-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
  color: #000;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-customer_service_info-link:hover {
    text-decoration: none;
  }
}
.b-customer_service_info-link > svg {
  height: 9px;
  width: 15px;
}
.b-customer_service_info-link.b-button svg {
  width: 15px;
}
.b-customer_service_info-link:disabled, .b-customer_service_info-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-customer_service_info-link:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-customer_service_info-link.b-button {
  text-decoration: none;
}
.b-customer_service_info-link.b-button .b-button-text {
  text-decoration: underline;
}

/*md

# b-options_group

This component designed to hold checkout section when one panel is the list of something
(saved payments, saved addresses etc) the other panel is new item form.

Currently it used only on checkout for Saved payments, saved addresses section on both steps.

```html_example
<fieldset class="b-options_group">
	<legend class="b-options_group-legend">
		Saved payments
	</legend>

	<div class="b-options_group-actions">
		<button
			class="b-options_group-control b-button"
			data-event-click.prevent="backToAddresses"
			type="button"
		>
			<svg aria-hidden="true" width="12" height="12" viewBox="0 0 10 10" focusable="false">
				<path fill="currentColor" fill-rule="evenodd" d="M6 0v4h4v2H6v4H4V6H0V4h4V0h2z"></path>
			</svg>
			Add new payment card
		</button>
	</div>
	<div>
		List of saved payments here
	</div>
</fieldset>

<fieldset class="b-options_group">
	<legend class="b-options_group-legend">
		Add new payment
	</legend>

	<div class="b-options_group-actions">
		<button
			class="b-options_group-control b-button"
			data-event-click.prevent="backToAddresses"
			type="button"
		>
			<svg width="10" height="17" focusable="false">
				<path fill="currentColor" d="m7.828828,0.721626c0.39,-0.39 1.024,-0.39 1.414,0c0.39,0.39 0.39,1.024 0,1.414l-6.364,6.364l6.364,6.364c0.39,0.39 0.39,1.024 0,1.414c-0.39,0.391 -1.023,0.391 -1.414,0l-7.07,-7.07c-0.364,-0.363 -0.39,-0.935 -0.079,-1.328l0.078,-0.087l7.071,-7.07l0,-0.001z"></path>
			</svg>
			Back to saved payments
		</button>
	</div>
	<div>
		New payment card form here
	</div>
</fieldset>
```

*/
.b-options_group {
  margin-bottom: 50px;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  padding: 40px 30px 50px;
}
@media screen and (max-width: 1023px) {
  .b-options_group {
    border: none;
    padding: 0;
  }
}
.b-options_group-control.m-cancel {
  margin-bottom: 20px;
}
.m-checkout_shipping-new_address .b-options_group-control.m-cancel {
  margin-bottom: 0;
}
.b-options_group-control.m-back_to {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
  margin: 0 0 24px;
  text-transform: inherit;
}
@media not all and (pointer: coarse) {
  .b-options_group-control.m-back_to:hover {
    text-decoration: none;
  }
}
.b-options_group-control.m-back_to > svg {
  height: 9px;
  width: 15px;
}
.b-options_group-control.m-back_to.b-button svg {
  width: 15px;
}
.b-options_group-control.m-back_to:disabled, .b-options_group-control.m-back_to.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-options_group-control.m-back_to:hover {
    text-decoration: none;
  }
}
.b-options_group-control.m-back_to.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-options_group-control.m-back_to.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-options_group-control.m-back_to.b-button .b-button-text {
  text-decoration: underline;
}
@media screen and (max-width: 1023px) {
  .b-options_group-control.m-back_to {
    margin: 22px 0 24px;
  }
}
.b-options_group-control svg {
  display: inline-block;
  margin-inline-end: 12px;
  margin-top: -2px;
}
.b-options_group.m-shipping {
  display: none;
}
.m-shipping .b-options_group.m-shipping {
  border: none;
  display: block;
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .m-shipping .b-options_group.m-shipping {
    margin-bottom: 0;
  }
}
.m-shipping .b-options_group.m-shipping > .b-options_group-legend {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 40px;
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .m-shipping .b-options_group.m-shipping > .b-options_group-legend {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (max-width: 1023px) {
  .m-shipping .b-options_group.m-shipping > .b-options_group-legend {
    margin-bottom: 20px;
  }
}
.m-shipping .b-options_group.m-shipping > .b-options_group-box {
  margin-top: 0;
  padding: 0;
}
.m-summary .b-options_group.m-shipping {
  display: block;
}
@media screen and (max-width: 1023px) {
  .m-summary .b-options_group.m-shipping {
    flex: 0 0 calc(50% - 12px);
    margin: 0;
    max-width: calc(50% - 12px);
    min-inline-size: auto;
  }
}
@media screen and (min-width: 1024px) {
  .m-summary .b-options_group.m-shipping {
    border: 1px solid #d9d9d9;
  }
}
@media screen and (max-width: 1023px) {
  .m-summary .b-options_group.m-shipping > .b-options_group-legend {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-shipping .b-options_group-control.m-cancel {
    margin-top: 0;
  }
}
.b-options_group.m-billing {
  display: none;
}
.m-billing .b-options_group.m-billing {
  border: none;
  display: block;
  padding: 0;
}
.b-options_group.m-billing > .b-options_group-legend {
  display: none;
}
.m-summary .b-options_group.m-billing {
  display: block;
}
@media screen and (max-width: 1023px) {
  .m-summary .b-options_group.m-billing {
    flex: 0 0 calc(50% - 12px);
    margin: 0;
    max-width: calc(50% - 12px);
    min-inline-size: auto;
  }
}
@media screen and (min-width: 1024px) {
  .m-summary .b-options_group.m-billing {
    border: 1px solid #d9d9d9;
  }
}
.m-summary .b-options_group.m-billing > .b-options_group-legend {
  display: block;
}
@media screen and (max-width: 1023px) {
  .m-summary .b-options_group.m-billing > .b-options_group-legend {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-billing .b-options_group-control.m-back_to {
    margin-top: 0;
  }
}
.b-options_group.m-credit_card {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-credit_card {
    margin-inline: 0;
  }
}
@media screen and (min-width: 1024px) {
  .b-options_group.m-credit_card .b-form_section:not(.m-fullwidth) {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-credit_card .b-form_section-label {
    margin-bottom: 10px;
    margin-top: 0;
  }
}
.b-options_group.m-credit_card .b-payment_accordion-head.m-payment {
  margin-top: 0;
}
.b-options_group.m-credit_card .b-billing-date, .b-options_group.m-credit_card {
  column-gap: 20px;
  align-items: flex-start;
}
.b-options_group.m-confirmation_page {
  margin-bottom: 0;
  padding: 0 20px 40px;
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-confirmation_page {
    padding: 0;
  }
}
.b-options_group.m-confirmation_page.m-billing, .b-options_group.m-confirmation_page.m-shipping {
  display: block;
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-shipping_method, .b-options_group.m-payment_options {
    margin-bottom: 0;
  }
}
.b-options_group-legend {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #22387c;
  max-width: -webkit-fit-content;
  max-width: fit-content;
  padding: 0 20px 24px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-options_group-legend {
    padding: 0 0 24px;
  }
}
.b-options_group-legend.m-profile {
  padding-left: 0;
}
@media screen and (max-width: 1023px) {
  .b-options_group-legend.m-add_new {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-width: 100%;
    overflow: hidden;
  }
}
.b-options_group-legend.m-add_new .b-options_group-control {
  display: none;
}
@media screen and (max-width: 1023px) {
  .b-options_group-legend.m-add_new .b-options_group-control {
    display: block;
  }
}
@media screen and (max-width: 1023px) {
  .b-options_group-legend.m-add_new .b-options_group-actions {
    float: right;
  }
}
@media screen and (max-width: 1023px) {
  .l-checkout.m-login .b-options_group-legend {
    display: none;
  }
}
.b-options_group.m-confirmation_page .b-options_group-legend {
  display: block;
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-confirmation_page .b-options_group-legend {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-options_group.m-account .b-options_group-legend {
    margin: auto;
    padding: 0 0 34px;
    text-align: left;
    align-items: flex-start;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-options_group-actions.m-saved_address {
    margin-top: 15px;
  }
}
@media screen and (max-width: 767px) {
  .b-options_group-actions.m-saved_address {
    margin-top: 15px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-options_group-actions.m-saved_address .b-button {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .b-options_group-actions.m-saved_address .b-button {
    width: 100%;
  }
}
.b-options_group-actions.m-new_address {
  margin-bottom: 20px;
  width: 100%;
}
.b-options_group-actions.m-edit_profile {
  margin-top: 25px;
}
@media screen and (min-width: 1024px) {
  .b-options_group-actions.m-edit_profile {
    margin-top: 50px;
  }
}
.b-options_group-actions_button {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-options_group-actions_button {
    width: auto;
  }
}
.b-options_group-actions_button.m-edit_profile {
  margin-block-end: 20px;
}
@media screen and (min-width: 1024px) {
  .b-options_group-actions_button.m-edit_profile {
    margin-block-end: 0;
    margin-inline-end: 20px;
  }
}
.b-options_group-box {
  padding: 0 20px;
}
@media screen and (max-width: 1023px) {
  .b-options_group-box {
    padding: 0;
  }
}
.b-options_group-box.m-address {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}
@media screen and (min-width: 768px) {
  .b-options_group-box.m-address {
    margin-left: 20px;
  }
}
.b-options_group-box.m-dashboard, .b-options_group-box.m-profile, .b-options_group-box.m-password {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}
@media screen and (max-width: 1023px) {
  .b-options_group-box.m-dashboard, .b-options_group-box.m-profile, .b-options_group-box.m-password {
    padding: 20px;
  }
}

/*md

# b-button_multi_state

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

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

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

.b-tooltip {
  position: relative;
}
.b-tooltip.m-order_summary {
  margin-left: 8px;
}
.b-tooltip.m-input {
  align-items: center;
  align-self: center;
  bottom: 13px;
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  right: 0;
}
.b-tooltip-button {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  cursor: pointer;
  display: flex;
  height: 13px;
  justify-content: center;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color;
  width: 13px;
}
.b-tooltip-button > svg {
  height: 14px;
  width: 13px;
}
.b-tooltip-button:hover, .b-tooltip-button:focus {
  background-color: #fff;
  color: #4d4d4d;
}
.b-tooltip-button.m-transparent {
  color: transparent;
}
.b-tooltip-container {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background-color: #000;
  border-radius: 2px;
  color: #fff;
  padding: 12px 17px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: opacity, visibility;
  visibility: hidden;
  z-index: 17;
}
@media screen and (min-width: 1024px) {
  .b-tooltip-container {
    padding: 9px 15px;
    width: 240px;
  }
}
@media screen and (max-width: 1023px) {
  .b-summary_table-alle .b-tooltip-container {
    width: 220px;
  }
}
.b-tooltip-container.m-bold {
  font-weight: 400;
}
.b-tooltip-container.m-left {
  left: 0;
  right: auto;
}
.b-tooltip-container.m-show {
  visibility: visible;
}
.b-tooltip-container.m-white {
  background-color: #fff;
  border: 1px solid;
  color: #000;
}
.b-tooltip.m-data_picker {
  margin-left: 8px;
}
.b-tooltip.m-data_picker .b-tooltip-container {
  width: 50vw;
}
@media screen and (min-width: 1024px) {
  .b-tooltip.m-data_picker .b-tooltip-container {
    width: 240px;
  }
}
.b-tooltip.m-data_picker .b-tooltip-button {
  background-color: transparent;
  height: 19px;
  width: 19px;
}
.b-tooltip.m-data_picker .b-tooltip-button:hover, .b-tooltip.m-data_picker .b-tooltip-button:focus {
  color: #808080;
}
.b-tooltip.m-data_picker .b-tooltip-button > svg {
  height: 19px;
  width: 19px;
}
.b-tooltip-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #fff;
  font-weight: 300;
}
@media not all and (pointer: coarse) {
  .b-tooltip-link:hover {
    text-decoration: none;
  }
}
.b-tooltip-link > svg {
  height: 9px;
  width: 15px;
}
.b-tooltip-link.b-button svg {
  width: 15px;
}
.b-tooltip-link:disabled, .b-tooltip-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-tooltip-link:hover {
    text-decoration: none;
  }
}
.b-tooltip-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-tooltip-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-tooltip-link.b-button .b-button-text {
  text-decoration: underline;
}

.b-need_help {
  padding: 44px 34px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-need_help {
    padding: 72.68px 34px 100px;
  }
}
.b-need_help-inner {
  margin: auto;
  max-width: 1440px;
  width: 100%;
}
.b-need_help-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  padding-bottom: 38px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-need_help-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-need_help-title {
    padding-bottom: 46px;
  }
}
.b-need_help-list {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 550px;
  min-width: auto;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-need_help-list {
    max-width: 1260px;
  }
}
@media screen and (min-width: 1024px) {
  .b-need_help-item {
    flex: 1 1 auto;
  }
}
@media screen and (min-width: 1024px) {
  .b-need_help-item.m-middle {
    border-inline: 1px solid #000;
  }
}
.b-need_help-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: #787676;
  align-items: center;
  display: flex;
  flex-direction: column;
}
@media not all and (pointer: coarse) {
  .b-need_help-link:hover {
    text-decoration: none;
  }
}
.b-need_help-link > svg {
  height: 9px;
  width: 15px;
}
.b-need_help-link.b-button svg {
  width: 15px;
}
.b-need_help-link:disabled, .b-need_help-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-need_help-link:hover {
    text-decoration: underline;
  }
}
@media screen and (min-width: 1024px) {
  .b-need_help-link {
    font-size: 24px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    flex-direction: row;
    justify-content: center;
  }
}
.b-need_help-link > svg {
  height: 35px;
  width: 35px;
}
@media screen and (max-width: 1023px) {
  .b-need_help-link > svg {
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .b-need_help-link > svg {
    height: 42px;
    margin-right: 22px;
    width: 42px;
  }
}

/*md

# Variation swatches

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

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

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

.b-login {
  display: flex;
  justify-content: space-between;
  margin: 40px auto;
  max-width: 900px;
}
@media screen and (max-width: 767px) {
  .b-login {
    flex-direction: column;
  }
}
.b-login-section {
  padding-bottom: 40px;
}
@media screen and (min-width: 768px) {
  .b-login-section {
    flex: 1 0 50%;
  }
}
@media screen and (min-width: 768px) {
  .b-login-section:first-child {
    border-right: 1px solid #d9d9d9;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) {
  .b-login-section + .b-login-section {
    padding-left: 40px;
  }
}
.b-login-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 20px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-login-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}

.b-track_order {
  margin: 0 auto 5px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-track_order {
    width: 620px;
  }
}
.b-track_order .b-form_section {
  margin-bottom: 35px;
}
.b-track_order .b-options_group-legend {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-track_order .b-options_group-legend {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}

.b-track_notification {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  margin: 0 auto 45px;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-track_notification {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-track_notification {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-track_notification.m-full {
  padding: 0;
}
.b-track_notification-title {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 12px;
}
.b-track_notification-image {
  color: #4d4d4d;
  margin-bottom: 8px;
  position: relative;
}
.b-track_notification-image::before {
  background-color: #d9d9d9;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
}
.b-track_notification-image svg {
  background-color: #fff;
  box-sizing: content-box;
  padding: 0 16px;
  position: relative;
}
.b-track_notification-message {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 28px;
}
.b-track_notification-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-track_notification-link:hover {
    text-decoration: none;
  }
}
.b-track_notification-link > svg {
  height: 9px;
  width: 15px;
}
.b-track_notification-link.b-button svg {
  width: 15px;
}
.b-track_notification-link:disabled, .b-track_notification-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.b-gift_certificate_balance-header {
  font-size: 66px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 40px;
}
@media screen and (max-width: 1023px) {
  .b-gift_certificate_balance-header {
    font-size: 36px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-gift_certificate_balance-message {
  margin-bottom: 24px;
}
.b-gift_certificate_balance-value {
  font-weight: 700;
}

.b-card {
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  min-inline-size: auto;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .b-card {
    padding: 16px;
    margin-bottom: 15px;
  }
}
.b-card.m-account {
  border-bottom: 0;
  margin-bottom: 16px;
  padding-bottom: 0;
}
.b-card.m-recent_order {
  background-color: unset;
  padding: 0 20px;
}
.b-card.m-recent_order .b-options_group-legend {
  padding-left: 0;
}
.b-card.m-recent_order .b-product_tile-feature {
  height: auto;
}
.b-card.m-recent_order .b-product_feature {
  justify-content: center;
}
.b-card-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .b-card-inner {
    border-top: 1px solid #ccc;
    margin-bottom: 4px;
    padding: 12px 0;
  }
}
.b-card-inner:first-of-type {
  border-top: none;
}
.b-card-inner:last-of-type {
  padding: 0;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .b-card-inner {
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .b-card-inner_item {
    width: calc(50% - 16px);
  }
}
.b-card-header {
  margin: 20px 0 8px;
}
.b-card-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 0;
  text-align: start;
}
@media screen and (max-width: 1023px) {
  .b-card-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-card-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (min-width: 768px) {
  .b-card-aside {
    max-width: 400px;
    padding-right: 10px;
  }
  .m-recent_order .b-card-aside {
    max-width: 250px;
  }
}
.b-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .b-card-body {
    flex-direction: column;
    gap: 8px;
  }
}
.b-card-body.m-empty {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 35px;
}
.b-card.m-recent_order .b-card-body {
  background-color: #fff;
  flex-direction: row;
  padding: 30px;
}
@media screen and (max-width: 767px) {
  .b-card.m-recent_order .b-card-body {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 32px;
  }
}
.b-card-body table {
  width: 100%;
}
.b-card-body th,
.b-card-body td {
  text-align: start;
}
@media screen and (max-width: 767px) {
  .b-card-body th,
  .b-card-body td {
    display: table-row;
  }
}
@media screen and (max-width: 767px) {
  .b-card-body tr {
    display: table-row-group;
  }
}
.b-card-body th {
  padding-bottom: 4px;
  width: 125px;
}
.b-card-body_text {
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-card-button {
    text-decoration: underline;
  }
  .b-card-button.m-small {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    padding: 8px 0;
    height: 24px;
  }
}
.b-card-control {
  text-align: right;
}
@media screen and (min-width: 768px) {
  .b-card-control {
    position: absolute;
    right: 12px;
  }
}
@media screen and (max-width: 767px) {
  .b-card-control {
    margin-top: 16px;
  }
}
.b-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media screen and (min-width: 768px) {
  .b-card-list.m-bottom {
    flex-direction: row;
    justify-content: space-between;
    padding-top: 16px;
    width: 100%;
  }
  .b-card-list.m-bottom .b-card-list_item {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }
}
.b-card-list_value {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.5px;
  margin-left: 5px;
}
.b-card-list_name {
  display: inline-block;
  margin-right: 8px;
  min-width: 76px;
  text-transform: capitalize;
}
.b-card-list_name.m-order-number {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-card-list_name.m-order-number {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
    margin-bottom: 12px;
  }
}
.b-card-list_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
  color: #000;
}
@media not all and (pointer: coarse) {
  .b-card-list_link:hover {
    text-decoration: none;
  }
}
.b-card-list_link > svg {
  height: 9px;
  width: 15px;
}
.b-card-list_link.b-button svg {
  width: 15px;
}
.b-card-list_link:disabled, .b-card-list_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-card-list_link:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-card-list_link.b-button {
  text-decoration: none;
}
.b-card-list_link.b-button .b-button-text {
  text-decoration: underline;
}
.b-card-message {
  margin-bottom: 4px;
}
.b-card-products {
  padding-left: 30px;
  width: calc(100% - 250px);
}
@media screen and (max-width: 767px) {
  .b-card-products {
    padding-left: 0;
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .b-card-products .b-product_tile-info {
    padding: 25px 10px 0;
  }
}
.b-card-products .b-product_tile-link {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (max-width: 1023px) {
  .b-card-products .b-product_tile-link {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-card-products_slider {
  position: relative;
  width: calc(100% - 30px);
}
@media screen and (max-width: 767px) {
  .b-card-products_slider {
    width: 100%;
  }
}
.b-card-products_list {
  display: flex;
  overflow: hidden;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -ms-scroll-chaining: none;
  scrollbar-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}
.b-card-products_list::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 768px) {
  .b-card-products_list {
    gap: 20px;
  }
}
.b-card-products_list.m-dashboard .b-product_tile-price, .b-card-products_list.m-dashboard .b-product_tile-replenish, .b-card-products_list.m-dashboard .b-product_tile-attribute,
.b-card-products_list.m-dashboard .b-product_tile .b-button_multi_state {
  display: none;
}
.b-card-products_item {
  max-width: calc(50% - 10px);
  min-width: calc(50% - 10px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .b-card-products_item {
    max-width: 100%;
    min-width: 100%;
  }
}
.b-card-products_ctrl {
  -webkit-appearance: none;
          appearance: none;
  background-color: #fff;
  border: 1px solid #22387c;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 44px;
  margin-top: -50px;
  position: absolute;
  text-align: center;
  top: 50%;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, opacity;
  -webkit-user-select: none;
          user-select: none;
  width: 44px;
  z-index: 1;
}
@media not all and (pointer: coarse) {
  .b-card-products_ctrl:not(:disabled):hover {
    background-color: #f3f3f3;
  }
}
.b-card-products_ctrl[disabled] {
  opacity: 0.5;
}
.b-card-products_slider.m-no_scroll .b-card-products_ctrl {
  opacity: 0;
  z-index: -1;
}
.b-card-products_ctrl.m-prev {
  left: -20px;
}
.b-card-products_ctrl.m-next {
  right: -20px;
}
.b-card-products_ctrl svg {
  height: 16px;
  width: 16px;
}
.b-card .b-migration_message {
  margin-bottom: 35px;
  padding: 15px;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-card .b-migration_message {
    margin-bottom: 40px;
    padding: 20px 0;
  }
}
.b-card .html-slot-container {
  width: 100%;
}
.b-card-list_item {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.5px;
}

@media screen and (min-width: 1024px) {
  .b-account.m-login {
    display: grid;
    grid-gap: 40px;
    grid-template-areas: "login register";
    grid-template-columns: 6fr 6fr;
  }
}
@media screen and (max-width: 1023px) {
  .b-account-login {
    display: none;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-account-login {
    grid-area: login;
  }
}
.b-account-login.m-active {
  display: block;
}
.b-account-login .b-options_group {
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-account-login .b-options_group-legend {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-account-registration {
    display: none;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-account-registration {
    grid-area: register;
  }
}
.b-account-registration.m-active {
  display: block;
}
.b-account-registration .b-options_group {
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-account-registration .b-options_group-legend {
    display: none;
  }
}
.b-account-title {
  font-size: 80px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 36px;
}
@media screen and (max-width: 1023px) {
  .b-account-title {
    font-size: 40px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-account-title.m-top_margin {
  margin-top: 24px;
}
.b-account-empty_state {
  margin: 16px 0 40px;
}
.b-account-messages {
  margin-bottom: 32px;
}
.b-account-auth_text {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 0 0 35px;
}
@media screen and (max-width: 1023px) {
  .b-account-auth_text {
    margin: 0 0 25px;
  }
}
.b-account-login_terms {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: 25px;
  padding: 0 59px;
  text-align: center;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-account-login_terms {
    margin-top: 20px;
    padding: 0;
  }
}
.b-account-login_terms .b-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-account-login_terms .b-link:hover {
    text-decoration: none;
  }
}
.b-account-login_terms .b-link > svg {
  height: 9px;
  width: 15px;
}
.b-account-login_terms .b-link.b-button svg {
  width: 15px;
}
.b-account-login_terms .b-link:disabled, .b-account-login_terms .b-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-account-login_terms .b-link:hover {
    text-decoration: none;
  }
}
.b-account-login_terms .b-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-account-login_terms .b-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-account-login_terms .b-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-account-abbvie_agreement {
  display: inline;
}
.b-account-abbvie_agreement .b-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #000;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-account-abbvie_agreement .b-link:hover {
    text-decoration: none;
  }
}
.b-account-abbvie_agreement .b-link > svg {
  height: 9px;
  width: 15px;
}
.b-account-abbvie_agreement .b-link.b-button svg {
  width: 15px;
}
.b-account-abbvie_agreement .b-link:disabled, .b-account-abbvie_agreement .b-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-account-abbvie_agreement .b-link:hover {
    text-decoration: none;
  }
}
.b-account-abbvie_agreement .b-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-account-abbvie_agreement .b-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-account-abbvie_agreement .b-link.b-button .b-button-text {
  text-decoration: underline;
}
@media screen and (max-width: 1023px) {
  .b-account .b-options_group {
    margin: auto;
  }
  .b-account .b-options_group:not(.m-credit_card) {
    padding: 35px 0 25px;
  }
}
.b-account .b-options_group.m-account {
  border: none;
  padding: 0;
}
.b-account .b-options_group.m-account_small {
  max-width: 680px;
  width: 100%;
}
.b-account .b-options_group.m-login, .b-account .b-options_group.m-registration {
  border: none;
  padding: 25px 30px 50px;
}
@media screen and (max-width: 1023px) {
  .b-account .b-options_group.m-login, .b-account .b-options_group.m-registration {
    padding: 0;
  }
}
.b-account .b-options_group-legend {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  color: #22387c;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-account .b-options_group-legend {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    margin-bottom: 0;
    padding: 10px 0;
  }
}
.b-account .b-options_group-legend.m-dashboard {
  padding-left: 0;
}
.b-account .b-options_group-legend.m-login, .b-account .b-options_group-legend.m-registration {
  justify-content: flex-start;
}
.b-account .b-options_group-legend.m-login > sup, .b-account .b-options_group-legend.m-registration > sup {
  margin-right: 8px;
}
@media screen and (max-width: 1023px) {
  .b-account .b-options_group.m-login .b-options_group-box,
  .b-account .b-options_group.m-registration .b-options_group-box {
    padding: 0;
  }
}
.b-account.m-forget_password, .b-account.m-new_password {
  align-items: center;
  flex-direction: column;
}
.b-account.m-forget_password .b-account-title, .b-account.m-new_password .b-account-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-account.m-forget_password .b-account-title, .b-account.m-new_password .b-account-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-account.m-forget_password .b-options_group, .b-account.m-new_password .b-options_group {
  width: 50%;
}
@media screen and (max-width: 1023px) {
  .b-account.m-forget_password .b-options_group, .b-account.m-new_password .b-options_group {
    width: 100%;
  }
}
.b-account-section_small .b-options_group-legend {
  padding-left: 0;
  margin-bottom: 0;
}
.b-account-multiline {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .b-account-multiline {
    display: grid;
    grid-gap: 16px;
    grid-template-areas: "col col";
    grid-template-columns: 6fr 6fr;
    max-width: 100%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-account-multiline {
    display: flex;
    flex-direction: column;
  }
}
.b-account .b-history_page .b-button_multi_state {
  bottom: 0;
  left: 0;
  margin-top: 25px;
  opacity: 1;
  position: static;
  right: 0;
  visibility: visible;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-account .b-history_page .b-button_multi_state {
    margin-top: 15px;
  }
}
.b-account-profile_control {
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .b-account-profile_control {
    margin-top: 10px;
  }
}
.b-account .b-form_section-label {
  font-weight: 400;
}
.b-account .b-reset_password-btn,
.b-account .b-form_section-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
  color: #222f58;
}
@media not all and (pointer: coarse) {
  .b-account .b-reset_password-btn:hover,
  .b-account .b-form_section-link:hover {
    text-decoration: none;
  }
}
.b-account .b-reset_password-btn > svg,
.b-account .b-form_section-link > svg {
  height: 9px;
  width: 15px;
}
.b-account .b-reset_password-btn.b-button svg,
.b-account .b-form_section-link.b-button svg {
  width: 15px;
}
.b-account .b-reset_password-btn:disabled, .b-account .b-reset_password-btn.m-disabled,
.b-account .b-form_section-link:disabled,
.b-account .b-form_section-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-account .b-reset_password-btn:hover,
  .b-account .b-form_section-link:hover {
    text-decoration: none;
  }
}
.b-account .b-form_section-caption {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #4d4d4d;
}

.b-account_banner {
  margin: 0 auto;
  max-width: 1440px;
  padding-left: 60px;
  padding-right: 60px;
  color: #000;
  margin: 24px auto;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-account_banner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media screen and (max-width: 767px) {
  .b-account_banner {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.b-account_banner.m-full {
  padding: 0;
}
@media screen and (min-width: 1024px) {
  .b-account_banner {
    margin: 48px auto 72px;
  }
}
.b-account_banner-inner {
  border-bottom: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  padding-bottom: 32px;
  padding-top: 32px;
  text-align: center;
}
.b-account_banner-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  display: inline-block;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-account_banner-link:hover {
    text-decoration: none;
  }
}
.b-account_banner-link > svg {
  height: 9px;
  width: 15px;
}
.b-account_banner-link.b-button svg {
  width: 15px;
}
.b-account_banner-link:disabled, .b-account_banner-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.b-account_benefits {
  margin-bottom: 32px;
}
.b-account_benefits-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
.b-account_benefits-list {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  list-style: disc inside;
}
.b-account_benefits-item {
  margin-bottom: 12px;
}

.b-account_download_data {
  border-top: 1px solid #d9d9d9;
  margin-top: 48px;
  padding-top: 24px;
}
.b-account_download_data-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  align-items: center;
  display: inline-flex;
  font-weight: 700;
  text-transform: uppercase;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-account_download_data-link:hover {
    text-decoration: none;
  }
}
.b-account_download_data-link > svg {
  height: 9px;
  width: 15px;
}
.b-account_download_data-link.b-button svg {
  width: 15px;
}
.b-account_download_data-link:disabled, .b-account_download_data-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.b-account_download_data-text {
  margin-inline-start: 16px;
}

.b-cards_grid {
  display: grid;
}
@media screen and (min-width: 1367px) {
  .b-cards_grid {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-cards_grid {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-cards_grid {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (max-width: 767px) {
  .b-cards_grid {
    grid-gap: 9px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
@media screen and (max-width: 1023px) {
  .b-cards_grid {
    grid-template-columns: 100%;
  }
}
.b-cards_grid-body {
  display: flex;
  flex-flow: column;
}
@media screen and (min-width: 1024px) {
  .b-cards_grid-item {
    grid-column: span 6;
  }
}
@media screen and (min-width: 1024px) {
  .b-cards_grid-item.m-add_new {
    grid-column: span 12;
  }
}
@media screen and (max-width: 1023px) {
  .b-cards_grid-item .b-button {
    width: 100%;
  }
}
.b-cards_grid-add_new {
  font-size: 14px;
  font-weight: 700;
  margin-top: 16px;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .b-cards_grid-add_new {
    margin-inline-start: 16px;
    margin-top: 0;
  }
}
.b-cards_grid-header {
  align-items: baseline;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}
.b-cards_grid-header.m-align_top {
  align-items: flex-start;
  margin-bottom: 8px;
}
.b-cards_grid-header_left {
  margin-inline-end: auto;
}
.b-cards_grid-header_right {
  margin-inline-start: 20px;
  white-space: nowrap;
}
.b-cards_grid-title {
  font-size: 16px;
  font-weight: 700;
  margin-inline-end: auto;
}
.b-cards_grid-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-cards_grid-link:hover {
    text-decoration: none;
  }
}
.b-cards_grid-link > svg {
  height: 9px;
  width: 15px;
}
.b-cards_grid-link.b-button svg {
  width: 15px;
}
.b-cards_grid-link:disabled, .b-cards_grid-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-cards_grid-link:hover {
    text-decoration: none;
  }
}
.b-cards_grid-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-cards_grid-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-cards_grid-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-cards_grid-link + .b-cards_grid-link {
  margin-inline-start: 40px;
}
.b-cards_grid-link.m-set_default {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
}
@media not all and (pointer: coarse) {
  .b-cards_grid-link.m-set_default:hover {
    text-decoration: none;
  }
}
.b-cards_grid-link.m-set_default > svg {
  height: 9px;
  width: 15px;
}
.b-cards_grid-link.m-set_default.b-button svg {
  width: 15px;
}
.b-cards_grid-link.m-set_default:disabled, .b-cards_grid-link.m-set_default.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-cards_grid-link.m-set_default:hover {
    color: #000;
  }
}
@media screen and (max-width: 1023px) {
  .b-cards_grid-link.m-set_default {
    margin-right: auto;
  }
}
.b-cards_grid-expired {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px 15px 12px;
  width: 100%;
}
.b-cards_grid-info {
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 16px;
  word-break: break-word;
}
.b-cards_grid-shipping {
  align-items: center;
  display: flex;
  margin-top: 8px;
  width: 100%;
}
.b-cards_grid-shipping.m-default {
  order: -1;
}
.b-cards_grid-icon {
  color: #2bb229;
  margin-inline-end: 12px;
}
.b-cards_grid-message {
  color: #2bb229;
  margin-top: 20px;
}
.b-cards_grid .b-dashboard_payment-body {
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-cards_grid .b-dashboard_payment-body {
    padding: 20px;
  }
}
.b-cards_grid .b-dashboard_payment-footer {
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 0;
  min-height: 22px;
}
@media screen and (max-width: 1023px) {
  .b-cards_grid .b-dashboard_payment-footer {
    flex-direction: row;
  }
}
.b-cards_grid .b-dashboard_payment-default {
  margin-right: auto;
  line-height: 18px;
}

.b-history_page-header {
  margin-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .b-history_page-header {
    margin-bottom: 14px;
  }
}
.b-history_page-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #222f58;
  display: inline-block;
}
.b-history_page-start_shopping {
  margin-top: 28px;
}
.b-history_page-find_order_link.b-button {
  margin-bottom: 8px;
  padding: 8px 4px;
}
@media screen and (max-width: 1023px) {
  .b-history_page .b-dashboard_content-image_wrapper {
    display: none;
  }
}

.b-account_nav {
  margin-bottom: 40px;
}
@media screen and (max-width: 1023px) {
  .b-account_nav {
    margin-top: 24px;
  }
}
.b-account_nav-item {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: normal;
  color: #222f58;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 0;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
.b-account_nav-item:hover {
  text-decoration: underline;
}
.b-account_nav-item.m-active {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: normal;
  color: #000;
}
.b-account_nav-item:last-child {
  margin-bottom: 28px;
}
.b-account_nav-item_link {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding-left: 0;
  text-align: start;
}
@media screen and (max-width: 1023px) {
  .b-account_nav-item_link {
    padding-left: 0;
  }
}
.b-account_nav-item_link:hover {
  text-decoration: none;
}
.b-account_nav-item_link svg {
  height: 12px;
  width: 12px;
}

.b-user_greeting {
  align-items: center;
  display: flex;
  margin-bottom: 22px;
}
@media screen and (max-width: 1023px) {
  .b-user_greeting {
    margin-bottom: 0;
  }
}
.b-user_greeting-content {
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .b-user_greeting-content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.b-user_greeting-message {
  font-size: 20px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  color: #000;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-user_greeting-message {
    width: auto;
  }
}
.b-user_greeting-signout {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: #4d4d4d;
  font-weight: 400;
  text-decoration: underline;
  color: #000;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media not all and (pointer: coarse) {
  .b-user_greeting-signout:hover {
    text-decoration: none;
  }
}
.b-user_greeting-signout > svg {
  height: 9px;
  width: 15px;
}
.b-user_greeting-signout.b-button svg {
  width: 15px;
}
.b-user_greeting-signout:disabled, .b-user_greeting-signout.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-user_greeting-signout:hover {
    color: #000;
    text-decoration: underline;
  }
}
.b-user_greeting-signout.b-button {
  text-decoration: none;
}
.b-user_greeting-signout.b-button .b-button-text {
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-user_greeting-signout:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-user_greeting-signout {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}

.b-migration_message {
  background-color: #f9f9f9;
  margin-bottom: 35px;
  padding: 29px 0 24px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-migration_message {
    margin-bottom: 25px;
    padding: 20px 66px 15px;
  }
}
.b-migration_message-text {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-migration_message-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-migration_message-link:hover {
    text-decoration: none;
  }
}
.b-migration_message-link > svg {
  height: 9px;
  width: 15px;
}
.b-migration_message-link.b-button svg {
  width: 15px;
}
.b-migration_message-link:disabled, .b-migration_message-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-migration_message-link:hover {
    text-decoration: none;
  }
}
.b-migration_message-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-migration_message-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-migration_message-link.b-button .b-button-text {
  text-decoration: underline;
}

.b-account_dashboard-headline {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 767px) {
  .b-account_dashboard .b-dashboard_payment-label {
    margin-right: 16px;
  }
}

.b-dashboard_banner {
  background: radial-gradient(1412.55% 304.15% at 27.64% -147.55%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #f9f9f9;
  display: grid;
  grid-template-areas: ". content .";
  grid-template-columns: 2fr 6fr 2fr;
  margin-bottom: 60px;
  padding: 38px 0 74px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_banner {
    grid-template-areas: "content";
    grid-template-columns: 12fr;
    margin-bottom: 46px;
    padding: 40px 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-dashboard_banner {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (max-width: 767px) {
  .b-dashboard_banner {
    margin-left: -25px;
    margin-right: -25px;
  }
}
.b-dashboard_banner-inner {
  grid-area: content;
}
.b-dashboard_banner-title {
  font-size: 66px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  word-break: break-all;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_banner-title {
    font-size: 36px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-dashboard_banner-signout {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  font-weight: 400;
  margin-top: 25px;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-signout:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-signout > svg {
  height: 9px;
  width: 15px;
}
.b-dashboard_banner-signout.b-button svg {
  width: 15px;
}
.b-dashboard_banner-signout:disabled, .b-dashboard_banner-signout.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-signout:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-signout.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-signout.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-dashboard_banner-signout.b-button .b-button-text {
  text-decoration: underline;
}
.b-dashboard_banner-alle {
  align-items: center;
  background: #fff;
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding: 12px 25px 10px;
}
.b-dashboard_banner-alle_info {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: flex;
  flex-wrap: wrap;
  width: 48%;
}
.b-dashboard_banner-alle_value {
  font-weight: 400;
  margin-inline-end: 4px;
}
.b-dashboard_banner-alle_text {
  white-space: nowrap;
}
.b-dashboard_banner-alle_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-alle_link:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-alle_link > svg {
  height: 9px;
  width: 15px;
}
.b-dashboard_banner-alle_link.b-button svg {
  width: 15px;
}
.b-dashboard_banner-alle_link:disabled, .b-dashboard_banner-alle_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-alle_link:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-alle_link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-alle_link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-dashboard_banner-alle_link.b-button .b-button-text {
  text-decoration: underline;
}
.b-dashboard_banner-shipment {
  align-items: center;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 35px;
  padding: 23px;
}
.b-dashboard_banner-shipment_description {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-dashboard_banner-shipment_headline {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-top: 10px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_banner-shipment_headline {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dashboard_banner-shipment_link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  font-weight: 400;
  margin-top: 15px;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-shipment_link:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-shipment_link > svg {
  height: 9px;
  width: 15px;
}
.b-dashboard_banner-shipment_link.b-button svg {
  width: 15px;
}
.b-dashboard_banner-shipment_link:disabled, .b-dashboard_banner-shipment_link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-shipment_link:hover {
    text-decoration: none;
  }
}
.b-dashboard_banner-shipment_link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_banner-shipment_link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-dashboard_banner-shipment_link.b-button .b-button-text {
  text-decoration: underline;
}

.b-dashboard_content {
  background: #fff;
  border-radius: 8px;
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 65px;
  overflow: hidden;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content {
    flex-direction: column;
    margin-bottom: 45px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-dashboard_content {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (max-width: 767px) {
  .b-dashboard_content {
    margin-left: -25px;
    margin-right: -25px;
  }
}
.b-account_dashboard .b-dashboard_content {
  margin-bottom: 24px;
}
.b-history_page .b-dashboard_content, .b-subscription_page .b-dashboard_content {
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-history_page .b-dashboard_content, .b-subscription_page .b-dashboard_content {
    margin-left: 0;
    margin-right: 0;
  }
}
.b-dashboard_content-image {
  object-fit: cover;
  width: 100%;
}
.b-dashboard_content-image_wrapper {
  display: flex;
  flex: 0 0 100%;
}
@media screen and (min-width: 1024px) {
  .b-dashboard_content-image_wrapper {
    flex: 0 0 calc(50% + 16px);
    max-width: calc(50% + 16px);
    min-height: 500px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-subscription_page .b-dashboard_content-image_wrapper {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription_page .b-dashboard_content-image_wrapper {
    display: none;
  }
}
.b-dashboard_content-image_wrapper img {
  object-fit: cover;
  width: 100%;
}
.b-dashboard_content-content {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
}
.b-dashboard_content-content.m-centered {
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content + .b-dashboard_content-image_wrapper {
    order: -1;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .b-subscription_page .b-dashboard_content-content {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 40px 35px;
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription_page .b-dashboard_content-content {
    padding: 40px 35px;
  }
}
.b-dashboard_content-content h2,
.b-dashboard_content-content .m-h2 {
  font-size: 66px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content h2,
  .b-dashboard_content-content .m-h2 {
    font-size: 36px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}
.b-dashboard_content-content h3,
.b-dashboard_content-content .m-h3 {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content h3,
  .b-dashboard_content-content .m-h3 {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dashboard_content-content h4,
.b-dashboard_content-content .m-h4 {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content h4,
  .b-dashboard_content-content .m-h4 {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dashboard_content-content h5,
.b-dashboard_content-content .m-h5 {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content h5,
  .b-dashboard_content-content .m-h5 {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dashboard_content-content h6,
.b-dashboard_content-content .m-h6 {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content h6,
  .b-dashboard_content-content .m-h6 {
    font-size: 16px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: normal;
    text-transform: none;
  }
}
.b-dashboard_content-content p {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_content-content p {
    font-size: 18px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.b-dashboard_content-content ul,
.b-dashboard_content-content ol {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  line-height: 20px;
  list-style: outside;
  padding-left: 16px;
}
.b-dashboard_content-content li + li {
  margin-top: 15px;
}
.b-dashboard_content-content sub {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  vertical-align: baseline;
}
.b-dashboard_content .b-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
}
@media not all and (pointer: coarse) {
  .b-dashboard_content .b-link:hover {
    text-decoration: none;
  }
}
.b-dashboard_content .b-link > svg {
  height: 9px;
  width: 15px;
}
.b-dashboard_content .b-link.b-button svg {
  width: 15px;
}
.b-dashboard_content .b-link:disabled, .b-dashboard_content .b-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_content .b-link:hover {
    text-decoration: none;
  }
}
.b-dashboard_content .b-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-dashboard_content .b-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-dashboard_content .b-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-dashboard_content-promo {
  display: block;
  font-weight: 400;
}
.b-dashboard_content-control {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.b-dashboard_content-control .b-button {
  max-width: 100%;
  min-width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-dashboard_content-control .b-button {
    min-width: 295px;
  }
}
.b-dashboard_content-control .b-button + .b-button {
  margin-top: 10px;
}

@media screen and (min-width: 1024px) {
  .b-dashboard_profile {
    padding: 0 20px;
  }
}
.b-dashboard_profile-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_profile-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-dashboard_profile-body {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .b-dashboard_profile-body {
    flex-wrap: wrap;
  }
}
.b-dashboard_profile-list {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-right: 20px;
}
.b-dashboard_profile-item + .b-dashboard_profile-item {
  margin-top: 15px;
}
.b-dashboard_profile-control {
  align-items: center;
  display: flex;
}
@media screen and (max-width: 767px) {
  .b-dashboard_profile-control {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 17px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .b-dashboard_profile-button:first-of-type {
    width: 100%;
  }
}
.b-dashboard_profile-button + .b-dashboard_profile-button {
  margin-left: 35px;
}
@media screen and (max-width: 767px) {
  .b-dashboard_profile-button + .b-dashboard_profile-button {
    margin: 20px 0 0;
  }
}
@media screen and (max-width: 767px) {
  .b-dashboard_profile-button.m-full_width_sm {
    width: 100%;
  }
}

.b-dashboard_address {
  container-type: inline-size;
}
.b-dashboard_address-footer {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
  justify-content: space-between;
  margin: -15px 0 0;
}
@container (min-width: 750px) {
  .b-dashboard_address-footer {
    flex-flow: row nowrap;
  }
}
.b-cards_grid-item .b-dashboard_address-footer {
  flex-flow: row nowrap;
}
.b-dashboard_address-button {
  display: flex;
  padding: 8px 23px;
}
.b-dashboard_address-inner {
  margin-bottom: 35px;
}
.b-dashboard_address-inner_item {
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 30px;
}
.b-dashboard_address-inner_item + .b-dashboard_address-inner_item {
  margin-top: 20px;
}
.b-dashboard_address-inner_item.m-address {
  border: 1px solid #d9d9d9;
}
.b-dashboard_address-name {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 5px;
}
.b-dashboard_address-name.m-empty {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 0;
}
.b-dashboard_address-value {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: #4d4d4d;
}
.b-dashboard_address-type {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #22387c;
  border-radius: 4px;
  color: #fff;
  display: inline-flex;
  margin-top: 20px;
  padding: 5px 10px;
}

.b-dashboard_payment {
  container-type: inline-size;
}
.b-dashboard_payment-footer {
  display: flex;
  flex-flow: column nowrap;
  gap: 15px;
  justify-content: space-between;
  margin: -15px 0 0;
}
@container (min-width: 750px) {
  .b-dashboard_payment-footer {
    flex-flow: row nowrap;
  }
}
.b-cards_grid-item .b-dashboard_payment-footer {
  flex-flow: row nowrap;
}
.b-dashboard_payment-button {
  display: flex;
  padding: 8px 23px;
}
.b-dashboard_payment-body {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 35px;
  padding: 30px;
  position: relative;
}
.b-dashboard_payment.m-payment_card .b-dashboard_payment-body {
  flex-wrap: wrap;
}

.b-dashboard_payment-body.m-default {
  background: radial-gradient(1412.55% 304.15% at 27.64% -147.55%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #f9f9f9;
}
.b-dashboard_payment-body.m-expired {
  border-color: #ed432c;
}
.b-dashboard_payment-body.m-error {
  border-color: #ed432c;
}
.b-dashboard_payment-label {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-right: 20px;
}
.b-dashboard_payment-value {
  font-size: 20px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  word-break: break-all;
}
.b-dashboard_payment-value + .b-dashboard_payment-value {
  margin-top: 35px;
}
@media screen and (max-width: 1023px) {
  .b-dashboard_payment-value + .b-dashboard_payment-value {
    margin-top: 20px;
  }
}
.b-dashboard_payment-value.m-empty {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-dashboard_payment-expiration_date.m-expired {
  color: #ed432c;
}
.b-dashboard_payment-default {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #22387c;
  color: #fff;
  border-radius: 4px;
  display: inline-flex;
  padding: 2px 10px;
}
.b-dashboard_payment-expired {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  align-items: center;
  align-self: flex-start;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  color: #ed432c;
  display: inline-flex;
  margin-left: auto;
  padding: 5px 8px;
  position: absolute;
  right: 20px;
  top: 20px;
}
@media screen and (min-width: 1024px) {
  .b-dashboard_payment-expired {
    right: 30px;
    top: 30px;
  }
}

.b-dashboard_payment.m-payment_card .b-dashboard_payment-footer {
  width: 100%;
}

.b-account_page-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .b-account_page-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 14px;
  }
}
.b-account_page-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  color: #222f58;
  display: inline-block;
}
@media screen and (max-width: 1023px) {
  .b-account_page-title {
    margin-bottom: 16px;
  }
}

.b-order_details_page {
  max-width: 756px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_page {
    max-width: 100%;
  }
}
.b-order_details_page .b-options_group-legend {
  padding: 10px 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_page .b-options_group-legend {
    display: none;
  }
}
.b-order_details_page .b-options_group {
  padding: 0;
}
.b-order_details_page .b-options_group-box {
  padding: 0;
}
.b-order_details_page .b-summary_group-item:first-child {
  margin-top: 0;
}
.b-order_details_page-top {
  margin-bottom: 20px;
  width: 100%;
}
.b-order_details_page-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  width: 100%;
}
.b-order_details_page-controls.m-guest {
  justify-content: center;
}
@media screen and (max-width: 1023px) {
  .b-order_details_page-controls .b-button {
    width: 100%;
  }
  .b-order_details_page-controls .b-button:first-child {
    margin-bottom: 20px;
  }
}

.b-order_details_products {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products {
    padding: 16px;
  }
}
.b-order_details_products-header {
  padding-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products-header {
    padding-bottom: 8px;
  }
}
.b-order_details_products-header > h2 {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: normal;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products-header > h2 {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
  }
}
.b-order_details_products .b-minicart_product-inner {
  grid-template-columns: 127px 3fr 1fr;
  row-gap: 6px;
}
@media screen and (min-width: 768px) {
  .b-order_details_products .b-minicart_product-inner {
    grid-template-areas: "msg . ." "image details total" "image qty ." "image . addToCard";
    grid-template-columns: 127px 3fr 160px;
  }
}
@media screen and (max-width: 767px) {
  .b-order_details_products .b-minicart_product-inner {
    grid-template-columns: 88px 2fr 1fr;
    grid-template-areas: "msg . ." "image details total" "image qty qty" ". addToCard addToCard";
  }
}
.b-order_details_products .b-minicart_product-inner.m-bonus {
  padding-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-minicart_product-inner.m-bonus {
    padding-bottom: 26px;
  }
}
.b-order_details_products .b-minicart_product {
  border-top: 1px solid #999;
}
.b-order_details_products .b-minicart_product:last-child {
  border-bottom: 1px solid #999;
}
.b-order_details_products .b-minicart_product-title {
  margin-bottom: 15px;
}
.b-order_details_products .b-minicart_product-attributes {
  font-size: 14px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.5px;
}
.b-order_details_products .b-minicart_product-attributes:not(:empty) {
  margin-bottom: 0;
}
.b-order_details_products .b-minicart_product-details {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  padding-left: 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-minicart_product-details {
    padding-left: 15px;
  }
}
.b-order_details_products .b-minicart_product-msg {
  grid-column: span 5;
  margin-bottom: 20px;
  padding: 0 0 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-minicart_product-msg {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}
.b-order_details_products .b-button_multi_state {
  align-self: end;
  grid-area: addToCard;
  margin-left: auto;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-button_multi_state {
    margin-top: 10px;
  }
}
.b-order_details_products .b-minicart_product-price .b-price {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-order_details_products .b-minicart_product-info {
  padding-left: 20px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-minicart_product-info {
    display: block;
    margin-bottom: 5px;
    padding-left: 15px;
  }
}
.b-order_details_products .b-minicart_product-price_total {
  margin-top: 0;
  padding-left: 8px;
}
.b-order_details_products .b-minicart_product-price_total_label,
.b-order_details_products .b-minicart_product-price_label {
  display: none;
}
.b-order_details_products .b-price {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-price {
    font-size: 16px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.5px;
  }
}
.b-order_details_products .b-minicart_product-qty {
  display: flex;
  gap: 5px;
}
.b-order_details_products .b-minicart_product-qty_value {
  color: #4d4d4d;
}
.b-order_details_products .b-minicart_product-status {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}
.b-order_details_products .b-minicart_product-sku {
  margin-bottom: 0;
}
.b-order_details_products .b-summary_table-item.m-total:not(.m-checkout-aside) {
  border-bottom: none;
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .b-summary_table-item.m-total:not(.m-checkout-aside) {
    margin-top: 8px;
  }
}
@media screen and (max-width: 1023px) {
  .b-order_details_products .m-bonus {
    grid-template-areas: "msg . . . ." "image details details details details" "image qty . . ." "image total total total total" "image . . . .";
  }
}
@media screen and (min-width: 1024px) {
  .b-order_details_products .m-bonus .b-minicart_product-info {
    padding-left: 30px;
  }
}
.b-order_details_products .m-bonus .b-minicart_product-price_total {
  padding-left: 16px;
}
@media screen and (min-width: 1024px) {
  .b-order_details_products .m-bonus .b-minicart_product-price_total {
    padding-left: 6px;
  }
}
.b-order_details_products-returned {
  border-top: 1px solid #d9d9d9;
  margin: 20px 0;
}

.b-alle_profile-list {
  display: flex;
  flex-direction: column;
}
.b-alle_profile-item {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  border-bottom: 1px solid #d9d9d9;
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-alle_profile-item {
    flex-direction: column;
    padding-bottom: 16px;
  }
}
.b-alle_profile-item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.b-alle_profile-item + .b-alle_profile-item {
  margin-top: 25px;
}
.b-alle_profile-label {
  width: 40%;
}
@media screen and (max-width: 1023px) {
  .b-alle_profile-label {
    margin-block-end: 4px;
    width: 100%;
  }
}
.b-alle_profile-value {
  font-weight: 400;
  width: 60%;
  word-break: break-all;
}
@media screen and (max-width: 1023px) {
  .b-alle_profile-value {
    width: 100%;
  }
}
.b-alle_profile-value .b-form_section-label {
  word-break: normal;
}
@media screen and (max-width: 1023px) {
  .b-alle_profile .b-dashboard_content {
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (max-width: 1023px) {
  .b-alle_profile .b-dashboard_content-image_wrapper {
    display: none;
  }
}

.b-alle_loyalty_page-alle_program {
  padding-bottom: 15px;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-alle_program {
    margin-bottom: 35px;
  }
}
.b-alle_loyalty_page-alle_program h2 {
  margin-bottom: 35px;
}
.b-alle_loyalty_page-alle_program p {
  font-size: 18px;
}
.b-alle_loyalty_page-alle_program p + p {
  margin-top: 10px;
}
.b-alle_loyalty_page-alle_program .b-button {
  margin-top: 35px;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-alle_program .b-button {
    width: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-alle_loyalty_page-alle_program.m-no_linked .b-button {
    min-width: 237px;
  }
}
.b-alle_loyalty_page-alle_program_text {
  font-weight: 300;
  margin-right: 5px;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-alle_program_image {
    display: none;
  }
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content {
  background: transparent;
  margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-no_alle_benefits .b-dashboard_content {
    margin: 0;
  }
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-no_alle_benefits .b-alle_content-content_wrapper {
    padding: 0;
  }
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-image_wrapper img {
  width: 100%;
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-content {
  padding: 80px 0 80px 80px;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-content {
    padding: 45px 15px;
  }
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-content .b-button {
  margin-top: 45px;
  min-width: 237px;
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-content ul {
  list-style: none;
  padding-left: 0;
}
.b-alle_loyalty_page-no_alle_benefits .b-dashboard_content-content p {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-alle_loyalty_page-no_alle_benefits_item {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
}
.b-alle_loyalty_page-no_alle_benefits_item svg {
  flex-shrink: 0;
  height: 23px;
  margin-right: 15px;
  width: 27px;
}
.b-alle_loyalty_page .b-alle_content {
  margin-bottom: 50px;
}
@media screen and (max-width: 1023px) {
  .b-alle_loyalty_page .b-alle_content {
    margin-bottom: 35px;
  }
}

.b-alle_content.m-background_image {
  display: grid;
}
@media screen and (min-width: 1367px) {
  .b-alle_content.m-background_image {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .b-alle_content.m-background_image {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-alle_content.m-background_image {
    grid-gap: 16px;
    grid-template-columns: [grid-start] repeat(12, 1fr) [grid-end];
  }
}
@media screen and (max-width: 767px) {
  .b-alle_content.m-background_image {
    grid-gap: 9px;
    grid-template-columns: [grid-start] repeat(6, 1fr) [grid-end];
  }
}
.b-alle_content.m-text_white {
  color: #fff;
}
.b-alle_content-background_image {
  display: block;
  overflow: hidden;
  padding-bottom: 40.1551891368%;
  position: relative;
  width: 100%;
  grid-column: grid-start/grid-end;
  grid-row: 1/2;
  z-index: -1;
}
.b-alle_content-background_image img {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-alle_content-content_wrapper {
  background-color: #f9f9f9;
  padding: 50px 60px;
}
@media screen and (max-width: 1023px) {
  .b-alle_content-content_wrapper {
    padding: 45px 35px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-alle_content-content_wrapper {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (max-width: 767px) {
  .b-alle_content-content_wrapper {
    margin-left: -25px;
    margin-right: -25px;
  }
}
.b-alle_content.m-background_image .b-alle_content-content_wrapper {
  background-color: transparent;
  grid-column: grid-start/grid-end;
  grid-row: 1/2;
  padding: 65px 0;
}
.b-alle_content-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45px 35px;
}
@media screen and (min-width: 1024px) {
  .b-alle_content-content {
    padding: 0 65px;
  }
}
.b-alle_content-content.m-horisontal {
  padding: 0;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .b-alle_content-content.m-horisontal {
    padding: 0 88px;
  }
}
.b-alle_content-title {
  font-size: 48px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -1px;
  text-transform: none;
  margin-bottom: 25px;
  margin-top: 10px;
}
@media screen and (max-width: 1023px) {
  .b-alle_content-title {
    font-size: 28px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-alle_content-text {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-alle_content-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
@media not all and (pointer: coarse) {
  .b-alle_content-link:hover {
    text-decoration: none;
  }
}
.b-alle_content-link > svg {
  height: 9px;
  width: 15px;
}
.b-alle_content-link.b-button svg {
  width: 15px;
}
.b-alle_content-link:disabled, .b-alle_content-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-alle_content-link:hover {
    text-decoration: none;
  }
}
.b-alle_content-link.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-alle_content-link.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-alle_content-link.b-button .b-button-text {
  text-decoration: underline;
}
.b-alle_content-link svg {
  margin-inline-start: 10px;
}
.b-alle_content-image_wrapper {
  display: block;
  overflow: hidden;
  padding-bottom: 35.1648351648%;
  position: relative;
  width: 100%;
  margin-top: 45px;
}
@media screen and (max-width: 1023px) {
  .b-alle_content-image_wrapper {
    padding-bottom: 59.0163934426%;
  }
}
.b-alle_content-image_wrapper img {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-alle_content-box {
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  margin-top: 35px;
  padding: 30px;
}
.b-alle_content-box .b-alle_content-title {
  margin: 0;
}
.b-alle_content-box .b-alle_content-link {
  margin-top: 0;
}
@media screen and (max-width: 1023px) {
  .b-alle_content-box .b-alle_content-link {
    margin-top: 15px;
  }
}
.b-alle_content-box_row {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-alle_content-box_row {
    align-items: flex-start;
    flex-direction: column;
  }
}
.b-alle_content-box_row + .b-alle_content-box_row {
  margin-top: 15px;
}

.b-alle_othersites-content {
  padding-left: 80px;
}
@media screen and (max-width: 1023px) {
  .b-alle_othersites-content {
    padding-left: 5px;
  }
}
.b-alle_othersites-content .b-othersites-list {
  padding: 15px 0 0;
}
.b-alle_othersites-content .b-othersites-list::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}
.b-alle_othersites-content .b-othersites-list::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 0;
}
.b-alle_othersites-content .b-othersites-list::-webkit-scrollbar-track {
  background: rgba(217, 217, 217, 0.35);
  border-radius: 0;
}
.b-alle_othersites-content .b-othersites-item {
  margin-left: 0;
  margin-right: 35px;
}
.b-alle_othersites-caption {
  margin: 0 auto;
  max-width: 540px;
}
@media screen and (max-width: 1023px) {
  .b-alle_othersites-caption {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-alle_othersites .b-alle_content-content_wrapper {
    margin: 0;
  }
}
.b-alle_othersites .b-alle_content-content {
  padding: 0;
}
@media screen and (max-width: 1023px) {
  .b-alle_othersites .b-alle_content-content {
    padding: 0 35px;
  }
}
@media screen and (max-width: 1023px) {
  .b-alle_othersites .b-alle_content-title {
    margin-bottom: 0;
  }
}

.b-subscription {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fff;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 120px 20px 1fr;
  padding: 25px 15px;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-subscription {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (max-width: 767px) {
  .b-subscription {
    margin-left: -25px;
    margin-right: -25px;
  }
}
@media screen and (min-width: 1024px) {
  .b-subscription {
    grid-template-columns: 120px 25px 1fr;
    padding: 45px 60px;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription:last-child {
    border: none;
  }
}
.b-subscription + .b-subscription {
  margin-top: 25px;
}
.b-subscription.m-error {
  border: none;
}
@media screen and (max-width: 1023px) {
  .b-subscription:first-child.m-error {
    margin-top: 25px;
  }
}
.b-subscription-title {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 10px;
}
@media screen and (max-width: 1023px) {
  .b-subscription-title {
    margin-bottom: 5px;
  }
}
.b-subscription-msg {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  background: #fce6e6;
  color: #ed432c;
  grid-column: span 3;
  margin-bottom: 25px;
  padding: 15px 15px 16px;
  text-align: center;
}
.b-subscription-image_wrapper {
  display: block;
  overflow: hidden;
  padding-bottom: 150%;
  position: relative;
  width: 100%;
}
.b-subscription-image {
  bottom: 0;
  color: #999;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-subscription-discount_msg {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-subscription-attribute, .b-subscription-qty {
  font-weight: 300;
}
.b-subscription-details {
  align-content: baseline;
  display: flex;
  flex-wrap: wrap;
  grid-column: 3;
  justify-content: space-between;
}
@media screen and (max-width: 1023px) {
  .b-subscription-details {
    flex-direction: column;
  }
}
.b-subscription-details_column.m-width {
  width: 100%;
}
.b-subscription-details_item + .b-subscription-details_item {
  margin-top: 10px;
}
@media screen and (max-width: 1023px) {
  .b-subscription-details_item + .b-subscription-details_item {
    margin-top: 5px;
  }
}
.b-subscription-details_label {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-right: 5px;
}
.b-subscription-form_wrapper {
  grid-column: 3;
}
@media screen and (max-width: 1023px) {
  .b-subscription-form_wrapper {
    grid-column: span 3;
  }
}
.b-subscription-spacer {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  padding: 0 0 3px;
}
@media screen and (max-width: 1023px) {
  .b-subscription-spacer {
    display: none;
  }
}
.b-subscription-form {
  border-top: 1px solid #d9d9d9;
  column-gap: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 25px 0;
}
@media screen and (min-width: 1367px) {
  .b-subscription-form {
    column-gap: 35px;
    grid-template-columns: 200px 160px 1fr;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription-form {
    margin-top: 25px;
    padding: 20px 0;
  }
}
.b-subscription-form .b-form_section {
  margin-bottom: 0;
}
.b-subscription-frequency .b-form_section-label {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  top: 3px;
}
.b-subscription-next_order .b-form_section-label {
  font-size: 12px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  top: 3px;
  width: 100%;
}
.b-subscription-next_order .b-tooltip.m-data_picker {
  display: none;
}
.b-subscription-skip_next_order {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  font-weight: 700;
  text-decoration: underline;
  color: #222f58;
  margin: 15px 0 0 10px;
}
@media not all and (pointer: coarse) {
  .b-subscription-skip_next_order:hover {
    text-decoration: none;
  }
}
.b-subscription-skip_next_order > svg {
  height: 9px;
  width: 15px;
}
.b-subscription-skip_next_order.b-button svg {
  width: 15px;
}
.b-subscription-skip_next_order:disabled, .b-subscription-skip_next_order.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-subscription-skip_next_order:hover {
    text-decoration: none;
  }
}
.b-subscription-skip_next_order.b-button {
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-subscription-skip_next_order.b-button:hover .b-button-text {
    text-decoration: none;
  }
}
.b-subscription-skip_next_order.b-button .b-button-text {
  text-decoration: underline;
}
@media screen and (max-width: 1023px) {
  .b-subscription-skip_next_order {
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    transition-property: color;
    font-weight: 700;
    text-decoration: underline;
    margin: 10px 0 20px 12px;
  }
  @media not all and (pointer: coarse) {
    .b-subscription-skip_next_order:hover {
      text-decoration: none;
    }
  }
  .b-subscription-skip_next_order > svg {
    height: 9px;
    width: 15px;
  }
  .b-subscription-skip_next_order.b-button svg {
    width: 15px;
  }
  .b-subscription-skip_next_order:disabled, .b-subscription-skip_next_order.m-disabled {
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }
  @media not all and (pointer: coarse) {
    .b-subscription-skip_next_order:hover {
      text-decoration: none;
    }
  }
  .b-subscription-skip_next_order.b-button {
    text-decoration: none;
  }
  @media not all and (pointer: coarse) {
    .b-subscription-skip_next_order.b-button:hover .b-button-text {
      text-decoration: none;
    }
  }
  .b-subscription-skip_next_order.b-button .b-button-text {
    text-decoration: underline;
  }
}
.b-subscription-update_btn {
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-subscription-update_btn {
    max-width: 235px;
  }
}
@media screen and (min-width: 1024px) {
  .b-subscription-update_btn {
    white-space: normal;
    word-break: break-word;
  }
}
.b-subscription-bottom {
  grid-column: 2/-1;
}
@media screen and (max-width: 1366px) {
  .b-subscription-bottom {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription-bottom {
    grid-column: span 3;
  }
}
@media screen and (min-width: 1024px) {
  .b-subscription-bottom {
    padding-top: 16px;
    padding-left: 25px;
    border-top: 1px solid #999;
  }
}
.b-subscription-status {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  padding-top: 16px;
  border-top: 1px solid #999;
}
@media screen and (max-width: 1023px) {
  .b-subscription-status {
    font-size: 14px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    grid-column: 1/-1;
    margin-bottom: 10px;
    width: 100%;
  }
}
.b-subscription-status_label {
  color: #2bb229;
  padding: 0 3px;
  text-transform: capitalize;
}
.b-subscription-status_label.m-paused {
  color: #ed432c;
}
.b-subscription-price {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 1024px) {
  .b-subscription-price {
    text-align: right;
  }
}
.b-subscription-price .m-old {
  font-weight: 300;
}
.b-subscription-price_row .b-price-item.m-new {
  color: #000;
}
@media screen and (min-width: 1024px) {
  .b-subscription-price_row + .b-subscription-price_row {
    margin-top: 10px;
  }
}
.b-subscription-control {
  display: flex;
}
@media screen and (min-width: 1024px) {
  .b-subscription-control + .b-subscription-control {
    margin-left: 30px;
  }
}
.b-subscription-control_wrapper {
  display: flex;
}
@media screen and (max-width: 1023px) {
  .b-subscription-control_wrapper {
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription-control_wrapper .b-tooltip {
    position: static;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription-control_wrapper .b-tooltip-container {
    left: 0;
  }
}
.b-subscription-button {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
  color: #222f58;
  cursor: pointer;
}
@media not all and (pointer: coarse) {
  .b-subscription-button:hover {
    text-decoration: none;
  }
}
.b-subscription-button > svg {
  height: 9px;
  width: 15px;
}
.b-subscription-button.b-button svg {
  width: 15px;
}
.b-subscription-button:disabled, .b-subscription-button.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-subscription-button:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 1023px) {
  .b-subscription-button {
    white-space: nowrap;
  }
}
.b-subscription-toolptip {
  margin-left: 5px;
}
.b-subscription-toolptip .b-tooltip-button {
  background-color: transparent;
  color: #000;
  height: auto;
  width: auto;
}
.b-subscription-toolptip .b-tooltip-button svg {
  height: 16px;
  width: 16px;
}

.b-subscription_page-header {
  margin-bottom: 35px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .b-subscription_page-header {
    margin-bottom: 20px;
  }
}
.b-subscription_page-title {
  font-size: 28px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  color: #222f58;
}
@media screen and (max-width: 1023px) {
  .b-subscription_page-title {
    font-size: 24px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-subscription_page .b-dashboard_content {
  margin-bottom: 0;
}
.b-subscription_page .b-dashboard_content .b-button {
  margin-bottom: 35px;
}

.b-profile_address-list {
  background: #fff;
  border-radius: 10px;
  display: grid;
  margin-top: -30px;
  padding: 0 20px 20px;
}
@media screen and (min-width: 1024px) {
  .b-profile_address-list {
    gap: 20px;
    margin-top: 0;
    grid-template-columns: 1fr 1fr;
    padding: 20px 20px 0;
  }
}
.b-profile_address-item {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
  padding: 20px;
}
@media screen and (min-width: 1024px) {
  .b-profile_address-item {
    margin-top: 0;
    padding: 30px;
  }
}
.b-profile_address-item.m-default {
  background: #f3f3f3;
}
@media screen and (min-width: 1024px) {
  .b-profile_address-header {
    margin-right: 20px;
  }
}
.b-profile_address-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-actions {
    gap: 12px;
    margin-bottom: 20px;
  }
}
.b-profile_address-buttons {
  flex-shrink: 0;
  margin-left: auto;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-buttons.m-hidden_mobile {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-profile_address-buttons.m-hidden_desktop {
    display: none;
  }
}
.b-profile_address-name {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  font-weight: 400;
  margin-bottom: 5px;
}
.b-profile_address-body {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-body {
    margin-bottom: 20px;
  }
}
.b-profile_address-add {
  margin-top: 24px;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-add {
    display: none;
  }
}
.b-profile_address-add_mobile {
  display: none;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-add_mobile {
    display: inline-flex;
    margin-top: 30px;
    width: 100%;
  }
}
.b-profile_address-link {
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  color: inherit;
  font-variant-numeric: lining-nums;
  font-weight: 700;
  text-decoration: underline;
  color: #22387c;
}
@media not all and (pointer: coarse) {
  .b-profile_address-link:hover {
    text-decoration: none;
  }
}
.b-profile_address-link > svg {
  height: 9px;
  width: 15px;
}
.b-profile_address-link.b-button svg {
  width: 15px;
}
.b-profile_address-link:disabled, .b-profile_address-link.m-disabled {
  color: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
@media not all and (pointer: coarse) {
  .b-profile_address-link:hover {
    text-decoration: none;
  }
}
.b-profile_address-link + .b-profile_address-link {
  margin-left: 25px;
}
.b-profile_address-shipping:not(.m-default) {
  display: inline-flex;
}
.b-profile_address-shipping.m-default {
  font-size: 18px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
}
.b-profile_address-shipping + .b-profile_address-shipping {
  margin-top: 10px;
}
@media screen and (min-width: 1024px) {
  .b-profile_address-change .b-options_group {
    max-width: 680px;
  }
}
@media screen and (max-width: 1023px) {
  .b-profile_address-change .b-options_group {
    border: 0;
    padding: 0;
  }
}
.b-profile_address-change .b-options_group-legend {
  padding-left: 0;
}
.b-profile_address-change .b-options_group-box {
  padding: 30px;
  background: #fff;
  border-radius: 10px;
}
@media screen and (max-width: 1023px) {
  .b-profile_address-change .b-options_group-box {
    padding: 20px;
  }
}

.b-account_payments-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-account_payments-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-account_payments .b-cards_grid {
  grid-gap: 20px;
}
.b-account_payments .b-options_group {
  margin-bottom: 0;
  min-inline-size: auto;
}
.b-account_payments .b-dashboard_content {
  margin-bottom: 40px;
}

@media screen and (min-width: 1024px) {
  .b-account_new_payment-content {
    max-width: 680px;
  }
}
.b-account_new_payment-form_caption {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-bottom: 25px;
}

.b-account_payment_form {
  max-width: unset;
}
.b-account_payment_form-controls {
  flex-wrap: wrap;
}
.b-account_payment_form-card {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 30px;
  padding: 20px;
}
@media screen and (min-width: 1024px) {
  .b-account_payment_form-card {
    padding: 30px;
  }
}
@media screen and (max-width: 1023px) {
  .b-account_payment_form-card .b-billing-card_box {
    align-items: baseline;
  }
}
@media screen and (max-width: 1023px) {
  .b-account_payment_form-card .b-billing-card_box .b-form_section-label {
    margin-top: 0;
  }
}
.b-account_payment_form-bottom {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 25px;
  margin-bottom: 25px;
}
@media screen and (min-width: 1024px) {
  .b-account_payment_form-bottom {
    margin-top: 35px;
    margin-bottom: 35px;
  }
}
@media screen and (max-width: 1023px) {
  .b-account_payment_form-bottom {
    flex-wrap: wrap;
  }
}
.b-account_payment_form-bottom .b-form_section {
  margin-bottom: 0;
  width: auto;
}
@media screen and (max-width: 1023px) {
  .b-account_payment_form-bottom .b-form_section {
    margin-top: 30px;
  }
}
.b-account_payment_form-btn_save {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .b-account_payment_form .b-billing-card_date {
    row-gap: 16px;
  }
}

.b-billing:not(.b-options_group) {
  margin: 0;
  padding: 0;
}
.b-billing-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
  display: block;
  margin-bottom: 16px;
}
@media screen and (max-width: 1023px) {
  .b-billing-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-billing-description {
  font-weight: 300;
  margin-bottom: 32px;
}
.b-billing-use_provided {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  display: flex;
}
.b-billing-card_date {
  flex-wrap: wrap;
}
.b-billing-card_date > .b-form_section-label {
  flex-basis: 100%;
}
.b-billing-card_box {
  display: flex;
  flex-wrap: nowrap;
}
@media screen and (max-width: 1023px) {
  .b-billing-card_box {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .b-billing-card_box {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1023px) {
  .b-billing-card_box .b-select-icon {
    right: 5px;
  }
}
.b-billing-card_box > .b-form_section-label {
  font-size: 16px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin: 10px 10px 0 0;
  overflow: visible;
  position: static;
  white-space: nowrap;
  width: auto;
}
@media screen and (min-width: 1024px) {
  .b-account_payment_form .b-billing-card_box > .b-form_section-label {
    margin-top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .b-billing-card_box .b-select-input {
    padding-inline-end: 22px;
  }
}
@media screen and (max-width: 767px) {
  .b-billing-card_box .b-form_section-message {
    margin: 8px 0 0 10px;
  }
}
.b-billing-cvv .b-input_password {
  width: 100%;
}
.b-billing-date {
  display: flex;
  gap: 8px;
  width: 100%;
}
@media screen and (max-width: 1023px) {
  .b-billing-date {
    margin-bottom: 24px;
  }
}
.b-billing-date > .b-form_section {
  margin-bottom: 0;
}
.b-billing-shipp_address {
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-billing-shipp_address .b-billing {
    margin-bottom: 0;
  }
}

/*md

# Input

Default input element

## Tooltip icon

```html_example
	<div class="b-input_tooltip">
		<input
			class="b-input"
			type="text"
			placeholder="Promo Code"
			name="couponCode"
			required=""
			value=""
		>
		<div class="b-tooltip m-right m-input m-order_summary">
			<button
				class="b-tooltip-button"
				type="button"
				aria-label="${Resource.msg('summary.order.salesTax.more','confirmation', null)}"
			>
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path  d="M9.99951 17.5C14.1416 17.5 17.4995 14.1421 17.4995 10C17.4995 5.85786 14.1416 2.5 9.99951 2.5C5.85738 2.5 2.49951 5.85786 2.49951 10C2.49951 14.1421 5.85738 17.5 9.99951 17.5Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                    <path  d="M9.37451 9.375H9.99951V13.75H10.6245" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
                    <path  d="M9.84326 7.1875C10.1884 7.1875 10.4683 6.90768 10.4683 6.5625C10.4683 6.21732 10.1884 5.9375 9.84326 5.9375C9.49808 5.9375 9.21826 6.21732 9.21826 6.5625C9.21826 6.90768 9.49808 7.1875 9.84326 7.1875Z" fill="black"/>
                </svg>
			</button>
			<div
				class="b-tooltip-container"
				id="tooltip"
			>
				Test text
			</div>
		</div>
	</div>
```

*/
.b-input_tooltip {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.b-input_tooltip .b-input {
  padding-inline-end: 68px;
}
@media screen and (max-width: 767px) {
  .b-input_tooltip .b-input {
    padding-inline-end: 24px;
  }
}

.b-account .b-face_validation {
  overflow: visible;
  padding: 15px 40px 45px;
  position: relative;
}
@media screen and (max-width: 1023px) {
  .b-account .b-face_validation {
    padding: 15px 15px 35px;
  }
}
.b-account .b-face_validation_group-legend {
  transform: translateY(15px);
}
.b-account .b-face_validation-body {
  display: grid;
  grid-template-areas: "aside result" "action_block result";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}
@media screen and (max-width: 1023px) {
  .b-account .b-face_validation-body {
    display: block;
  }
}
.b-account .b-face_validation-aside {
  grid-area: aside;
  margin: 0 30px 30px 0;
  max-width: 315px;
  padding: 20px 0 0;
}
@media screen and (max-width: 1023px) {
  .b-account .b-face_validation-aside {
    border-bottom: 1px solid #d9d9d9;
    margin: 0 0 20px;
    max-width: 100%;
    padding: 0 0 20px;
  }
}
.b-account .b-face_validation-char_list {
  margin-bottom: 0;
}
.b-account .b-face_validation-char_item {
  line-height: 1;
}
.b-account .b-face_validation-char_name {
  font-size: 20px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  margin-right: 5px;
}
.b-account .b-face_validation-char_value {
  font-size: 26px;
  font-weight: normal;
}
.b-account .b-face_validation-action_block {
  grid-area: action_block;
  margin-right: 30px;
  max-width: 315px;
}
@media screen and (max-width: 1023px) {
  .b-account .b-face_validation-action_block {
    margin-right: 0;
    max-width: 100%;
  }
}
.b-account .b-face_validation-action_block .b-button {
  font-weight: 400;
  width: 100%;
}
.b-account .b-face_validation-share_list {
  border-top: 1px solid #d9d9d9;
  display: flex;
  margin-bottom: 30px;
  padding-top: 30px;
}
@media screen and (max-width: 1023px) {
  .b-account .b-face_validation-share_list {
    justify-content: center;
    margin-bottom: 20px;
    padding-top: 20px;
  }
}
.b-account .b-face_validation-share_item {
  margin-right: 35px;
}
.b-account .b-face_validation-share_item:last-child {
  margin-right: 0;
}
.b-account .b-face_validation-share_link {
  color: #000;
}
.b-account .b-face_validation-share_link:hover {
  color: #808080;
}
.b-account .b-face_validation-share_link svg {
  height: 22px;
  width: 22px;
}
.b-account .b-face_validation-remove {
  position: absolute;
  right: 16px;
  top: -15px;
}
.b-account .b-face_validation-remove svg {
  height: 14px;
  width: 14px;
}

.b-face_validation_history-header {
  margin-bottom: 15px;
}
.b-face_validation_history-title {
  font-size: 24px;
  font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -1px;
  text-transform: none;
}
@media screen and (max-width: 1023px) {
  .b-face_validation_history-title {
    font-size: 21px;
    font-family: "minerva-modern", "Georgia", "DejaVu Serif", serif;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: none;
  }
}
.b-face_validation_history-page_total {
  display: flex;
  font-size: 18px;
  justify-content: flex-end;
  margin-bottom: 25px;
}
@media screen and (max-width: 1023px) {
  .b-face_validation_history-page_total {
    margin-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-face_validation_history-page_total {
    justify-content: center;
  }
}
.b-face_validation_history .b-load_progress {
  margin-bottom: 35px;
}
.b-face_validation_history .b-load_progress-description {
  font-size: 18px;
}
.b-face_validation_history .b-load_prev.b-button {
  font-weight: 400;
}
.b-face_validation_history .b-load_more {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  .b-face_validation_history .b-load_more {
    margin-bottom: 40px;
  }
}
.b-face_validation_history-bottom_content {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  padding-top: 10px;
}

.b-delete_face_validation-description {
  font-weight: 400;
}
.b-delete_face_validation-button.b-button {
  font-weight: 400;
}

.b-face_validation_banner {
  align-items: center;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
  padding: 35px;
  text-align: center;
}
@media screen and (max-width: 1023px) {
  .b-face_validation_banner {
    padding: 20px 15px;
  }
}
.b-face_validation_banner-title {
  font-size: 24px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  .b-face_validation_banner-title {
    font-size: 20px;
    font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
  }
}
.b-face_validation_banner-description {
  font-size: 18px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
  margin-bottom: 25px;
}
.b-face_validation_banner-button {
  background-color: #22387c;
  color: #fff;
  transition-property: background-color;
  font-weight: 400;
  width: auto;
}
@media not all and (pointer: coarse) {
  .b-face_validation_banner-button:hover, .b-face_validation_banner-button.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
@media screen and (min-width: 1024px) {
  .b-face_validation_banner-button {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .b-face_validation_banner-button {
    width: 100%;
  }
}
.b-face_validation_banner-link {
  background-color: #22387c;
  color: #fff;
  transition-property: background-color;
  min-width: 280px;
}
@media not all and (pointer: coarse) {
  .b-face_validation_banner-link:hover, .b-face_validation_banner-link.m-hover {
    background-color: #abddf9;
    color: #22387c;
  }
}
@media screen and (max-width: 1023px) {
  .b-face_validation_banner-link {
    display: none;
  }
}

.b-face_validation_results {
  grid-area: result;
}
@media screen and (max-width: 1023px) {
  .b-face_validation_results {
    margin-bottom: 20px;
  }
}
.b-face_validation_results-item {
  line-height: 1;
  margin-bottom: 18px;
}
.b-face_validation_results-item:last-child {
  margin-bottom: 0;
}
.b-face_validation_results-title {
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 1px;
  text-transform: capitalize;
}
.b-face_validation_results-hilighted {
  font-size: 22px;
  font-family: "Quattrocento Sans", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  align-items: center;
  border-radius: 4px;
  color: #fff;
  display: flex;
  font-variant-numeric: lining-nums;
  height: 49px;
  padding: 16px;
  width: -webkit-min-content;
  width: min-content;
}
.b-face_validation_results-great {
  background: green;
}
.b-face_validation_results-good {
  background: orange;
}
.b-face_validation_results-okay {
  background: red;
}

body {
  overflow: auto;
  overflow-y: scroll;
  pointer-events: all;
  visibility: var(--page_visibility, hidden);
}

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