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

# Breakpoints

## Birkenstock breakpoints

Read more about [supported devices] https://confluence.birkenstock.com/display/LP/09.05+-+Test+Plan - iPhone 12, Samsung Galaxy S22 , IPad Air, iPad Pro 11'', 13'', Samsung Galaxy Tab A9 11'', Samsung Galaxy Tab S9+ 12.4', MS Windows desktop , Macbook Pro/ Macbook Air retina

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

## Supported screen resolutions

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

| Device             | Screen Resolution, CSS pixels | Pixel density |
|--------------------|-------------------------------|---------------|
| Desktop Windows PC                  | 1920x1080                     | MDPI          |
| Macbook pro 13                      | 1280x800 / 1440x900           | XHDPI         |
| Samsung Galaxy Tab S9 12.4'         | 1024x768                      | XHDPI         |
| iPad Pro 13''                       | 1366x1024                     | XHDPI         |
| iPad Pro 11''                       | 1194x834                      | XHDPI         |
| iPad Air 2                          | 1024x768                      | XHDPI         |
| iPhone 12                           | 390x844                       | XHDPI         |
| Samsung Galaxy S22                  | 360x780                       | XHDPI         |

## Supported screen scaling

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

*/
/*md
@no-stat

# Media queries (breakpoints)

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

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

## Configuration

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

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

This is how `$media` map looks:

```scss
$media: (
	sm: 'screen and (max-width: 767px)',
	md: 'screen and (min-width: 768px) and (max-width: 1179px)',
	lg: 'screen and (min-width: 1180px) and (max-width: 1439px)',
	xl: 'screen and (min-width: 1440px)',
	md-up: 'screen and (min-width: 768px)',
	md-down: 'screen and (max-width: 1179px)',
	lg-up: 'screen and (min-width: 1180px)',
	lg-down: 'screen and (max-width: 1439px)'
);
```

## Usage

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

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

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

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

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

*/
/*md
@no-stat

# Palette

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

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

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

Please see _colors.md for more information about themes.

*/
/*md
@no-stat

# Globals variables

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

It include:

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

*/
/*md
@no-stat

# Z-indexes

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

## Usage

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

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

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

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

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

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

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

*/
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

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

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

### Gaps / margin / column span configuration:

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

## Working with grids

### Development approaches

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

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

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

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

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

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

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

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

# grid-* (grid config get functions)

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

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

## Usage

```scss

// Configuration:

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

// Usage:

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

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

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

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

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

# adjust-color-to-bg

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

It is especially useful for crating flexible themes.

## Arguments

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

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

## Usage

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

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

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

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

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

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

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

# grid-span

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

It returns value in percents.

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

### Parameters

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

## Examples

### Flex-basis example

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

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

### Floated items example

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

### Inline-block items example

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

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

*/
/*md
@no-stat

# aspect-ratio

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

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

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

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

## Arguments

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

=> percentage

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

## Usage

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

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

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

*/
/*md

# opposite-position

This function returns the opposite direction of each direction in a list
$directions - List of initial directions

 ```scss
.b-component {
	border-opposite-position(top): $size solid $color;

	// ...
}
```

*/
/*md
@no-stat

# Hide

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

Here is a list of parameters you can use:

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

## Usage

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

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

# Hover-supported

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

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

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

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

## Usage

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

# 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

# Triangle helper mixin

$direction - Triangle direction, either `top`, `right`, `bottom` or `left`
$color - Triangle color
$size - Triangle size

 ```scss
.b-component {
	@include triangle(top, $color-primary, 12px);

	// ...
}
```

*/
/*md

# Shorthand mixin for offset positioning

$position - Either `relative`, `absolute` or `fixed`
$top - Top offset
$right - Right offset
$bottom - Bottom offset
$left - Left offset

 ```scss
.b-component {
	@include position(absolute, -8px, null, null, 12px);

	// ...
}
```

*/
/*md

# text_overflow

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

## Usage

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

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

*/
/*md

# g-button

This component is designed to provide same styles of buttons
across different components.

## Usage

```scss
// for regular cases
.b-user_content-btn {
	@include g-button(primary_inverted);
}
```

*/
/*md

# g-button_icon_only

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

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

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

# g-radio

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

*/
/*md

# g-checkbox

This component is designed to provide same styles of checkboxes across different components.

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

```
*/
/*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::after {
		@include g-spinner();
	}
	// ...
}
```
*/
/*md

# g-text*

Some basic simple typography applied to different UI components.

This covers only very basic cases and could be extended.

```scss
.b-cart {
	// ...

	&-description {
		@include g-text_state;
	}
}
```
*/
/*md

# g-link

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

## Usage

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

*/
/*md

# g-link_ui

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

## Usage

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

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

*/
/*md

# g-link_hamburger

Hamburger menu generic link that used in several component.

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

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

# g-image_container

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

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

```scss
.b-image_example {
	&.m-1-1 {
		@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.

Example of usage:
## 1:1

```html_example
<div style="width: 500px">
	<picture class="b-image_example m-1-1">
		<img
			loading="lazy"
			src="../images/guide/examples/guide_image_example.jpg?$staticlink$"
			alt="Some dummy alternative text for image."
		/>
	</picture>
</div>
```

## 4:3

```html_example
<div style="width: 500px">
	<picture class="b-image_example m-4-3">
		<img
			loading="lazy"
			src="../images/guide/examples/guide_image_example.jpg?$staticlink$"
			alt="Some dummy alternative text for image."
		/>
	</picture>
</div>
```

## 3:4

```html_example
<div style="width: 500px">
	<picture class="b-image_example m-3-4">
		<img
			loading="lazy"
			src="../images/guide/examples/guide_image_example.jpg?$staticlink$"
			alt="Some dummy alternative text for image."
		/>
	</picture>
</div>
```

## 3:2

```html_example
<div style="width: 500px">
	<picture class="b-image_example m-3-2">
		<img
			loading="lazy"
			src="../images/guide/examples/guide_image_example.jpg?$staticlink$"
			alt="Some dummy alternative text for image."
		/>
	</picture>
</div>
```

## 2:3

```html_example
<div style="width: 500px">
	<picture class="b-image_example m-2-3">
		<img
			loading="lazy"
			src="../images/guide/examples/guide_image_example.jpg?$staticlink$"
			alt="Some dummy alternative text for image."
		/>
	</picture>
</div>
```
*/
.b-image_example.m-1-1 {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-image_example.m-4-3 {
  display: block;
  overflow: hidden;
  padding-bottom: 75%;
  position: relative;
  width: 100%;
}
.b-image_example.m-3-4 {
  display: block;
  overflow: hidden;
  padding-bottom: 133%;
  position: relative;
  width: 100%;
}
.b-image_example.m-3-2 {
  display: block;
  overflow: hidden;
  padding-bottom: 66.6%;
  position: relative;
  width: 100%;
}
.b-image_example.m-2-3 {
  display: block;
  overflow: hidden;
  padding-bottom: 150%;
  position: relative;
  width: 100%;
}
.b-image_example img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

/*md

# g-snap_scroll

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

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

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

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

*/
/*md

# g-backdrop_dialog

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

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

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

# g-backdrop_panel

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

Serve as regular overlay.

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

# g-section_holder

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

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

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

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

# g-section_holder_narrow

Expected to use on checkout and shopping cart.
Need update in future.
Differs from other container (g-section_holder)
we need special component with different `max-width` and `margin` than
`section_holder`.

This is global component designed to hold narrow content of the site.

It could be removed and changed to `section_holder`.

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

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

# g-heading_*

Basic simple typography styles applied to different UI components.

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

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

	&-title {
		@include g-heading_1;

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

# g-accordion

Global accordion component

*/
/*md

# g-grid

g-grid is layout component based on CSS grid.

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

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

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

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

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

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

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

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

*/
/*md

# g-drawer

This component is designed to provide same styles of popup(drawer)

*/
/*md

# g-scrollbar

Designed to modify the look of the browser's scrollbar.
Customization applies for Chrome, Edge, Safari and Opera browsers.
Firefox doesn't support full customization.

On storefront you can see the result on the minicart.

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

# Normalize forms

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

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

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

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

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

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

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

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

/*
 * Display helper classes to show/hide elements on specific breakpoints.
 *
 * The classes are named in a way that indicates on which breakpoints the element will be hidden or shown. For example,
 * .hide-on-mobile will hide the element on mobile devices, while .only-on-desktop will show the element only on desktop devices.
 *
 * Usage example:
 *
 * <div class="hide-on-mobile">
 *   This element will be hidden on mobile devices.
 * </div>
 *
 * <div class="only-on-desktop">
 *   This element will only be visible on desktop devices.
 * </div>
 */
@media screen and (max-width: 767.9px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .hide-on-tablet {
    display: none !important;
  }
}

@media screen and (min-width: 1180px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .only-on-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 767.9px) {
  .only-on-tablet {
    display: none !important;
  }
}
@media screen and (min-width: 1180px) {
  .only-on-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 1179.9px) {
  .only-on-desktop {
    display: none !important;
  }
}

.l-newsletter {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  margin-bottom: 40px;
  margin-top: 40px;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .l-newsletter {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .l-newsletter {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .l-newsletter {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .l-newsletter {
    margin-bottom: 96px;
  }
}
.l-newsletter-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-align: center;
}
@media screen and (max-width: 1179.9px) {
  .l-newsletter-title {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .l-newsletter-title {
  letter-spacing: 0;
}
.l-newsletter-icon {
  margin-bottom: 24px;
  text-align: center;
}
.l-newsletter-icon svg {
  height: 40px;
  width: 40px;
}
.l-newsletter-content {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin: 24px 0 32px;
}
html[dir=rtl] .l-newsletter-content {
  letter-spacing: 0;
}
.l-page.m-care_essentials .l-newsletter-content, .b-dialog.m-care_essentials-product .l-newsletter-content {
  letter-spacing: normal;
}
.l-newsletter.m-small {
  max-width: 438px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
}
.l-newsletter.m-signup {
  margin-bottom: 80px;
  margin-top: 40px;
  max-width: 900px;
  padding: 0;
}
@media screen and (max-width: 1179.9px) {
  .l-newsletter.m-signup {
    margin: 40px 0 32px;
    max-width: 100%;
    padding: 0 92px;
  }
}
@media screen and (max-width: 767.9px) {
  .l-newsletter.m-signup {
    margin-bottom: 24px;
    padding: 0 16px;
  }
}
.l-newsletter.m-unsubscription, .l-newsletter.m-confirm-subscribe, .l-newsletter.m-preference {
  margin-bottom: 80px;
  margin-top: 40px;
  max-width: 670px;
  padding: 0;
}
@media screen and (max-width: 1179.9px) {
  .l-newsletter.m-unsubscription, .l-newsletter.m-confirm-subscribe, .l-newsletter.m-preference {
    margin: 40px 0 64px;
    max-width: 100%;
    padding: 0 92px;
  }
}
@media screen and (max-width: 767.9px) {
  .l-newsletter.m-unsubscription, .l-newsletter.m-confirm-subscribe, .l-newsletter.m-preference {
    margin-bottom: 48px;
    padding: 0 16px;
  }
}
.l-newsletter.m-unsubscription {
  text-align: center;
}
.l-newsletter.m-unsubscription .l-newsletter-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .l-newsletter.m-unsubscription .l-newsletter-title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .l-newsletter.m-unsubscription .l-newsletter-title {
  letter-spacing: 0;
}

/*md
@no-stat

# global-animations

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

# Typography - Text

Designed to provide same styles of text across different components.

## Paragraph Text (Arial)

### Paragraph Text - Large
```html_example
<p class="b-text_large_regular" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
<p class="b-text_large_bold" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
```

### Paragraph Text - Body

```html_example
<p class="b-text_body_regular" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
<p class="b-text_body_bold" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
```

### Paragraph Text - Small

```html_example
<p class="b-text_small_regular" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
<p class="b-text_small_bold" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
```

### Paragraph Text - Micro

```html_example
<p class="b-text_micro_regular" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
<p class="b-text_micro_bold" style="#282727">Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
</br></br>Now, together with the New York Times, we have embarked on a journalistic investigation into the foot.</p>
</br>
</br>
```

### Misc / Eyebrow (DIN Next CYR, Regular)

```html_example
<p class="b-eyebrow" style="#282727">Eyebrow Text</p>
```

### Misc / Button (Arial Bold)

```html_example
<p class="b-button_text" style="#282727">Button CTA</p>
```

*/
.b-text_large_regular {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 20px;
}
html[dir=rtl] .b-text_large_regular {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_large_regular, .b-dialog.m-care_essentials-product .b-text_large_regular {
  letter-spacing: normal;
}

.b-text_large_bold {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 20px;
}
html[dir=rtl] .b-text_large_bold {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_large_bold, .b-dialog.m-care_essentials-product .b-text_large_bold {
  letter-spacing: normal;
}

.b-text_body_regular {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
html[dir=rtl] .b-text_body_regular {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_body_regular, .b-dialog.m-care_essentials-product .b-text_body_regular {
  letter-spacing: normal;
}

.b-text_body_bold {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
html[dir=rtl] .b-text_body_bold {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_body_bold, .b-dialog.m-care_essentials-product .b-text_body_bold {
  letter-spacing: normal;
}

.b-text_small_regular {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-text_small_regular {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_small_regular, .b-dialog.m-care_essentials-product .b-text_small_regular {
  letter-spacing: normal;
}

.b-text_small_bold {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
}
html[dir=rtl] .b-text_small_bold {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_small_bold, .b-dialog.m-care_essentials-product .b-text_small_bold {
  letter-spacing: normal;
}

.b-text_micro_regular {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
}
html[dir=rtl] .b-text_micro_regular {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_micro_regular, .b-dialog.m-care_essentials-product .b-text_micro_regular {
  letter-spacing: normal;
}

.b-text_micro_bold {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 12px;
}
html[dir=rtl] .b-text_micro_bold {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-text_micro_bold, .b-dialog.m-care_essentials-product .b-text_micro_bold {
  letter-spacing: normal;
}

.b-eyebrow {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}
html[dir=rtl] .b-eyebrow {
  letter-spacing: 0;
}

.b-button_text {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.08;
  text-transform: uppercase;
}
html[dir=rtl] .b-button_text {
  letter-spacing: 0;
}

/*md

# Typography - Headlines

Designed to provide same styles of headlines across different components.

## Headlines

## Headlines - DIN Next CYR, Bold

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

```

## Editorial Headlines - DIN Condensed, Bold
###Editorial Headlines are intended for rare editorial or accent sections, used selectively depending on the context. The main purpose is to serve as an accent font, highlighting special content and creating a distinct visual separation from the rest of the design

```html_example
<h1 class="b-heading_1_accent">H1 Headline With </br>Multiple Lines</h1>
</br>
<h2 class="b-heading_2_accent">H2 Headline With </br>Multiple Lines</h2>
</br>
<h3 class="b-heading_3_accent">H3 Headline With </br>Multiple Lines</h3>
</br>
<h4 class="b-heading_4_accent">H4 Headline With </br>Multiple Lines</h4>
```
*/
.b-heading_hero {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 140px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_hero {
    font-size: 64px;
    letter-spacing: 0.9;
  }
}
html[dir=rtl] .b-heading_hero {
  letter-spacing: 0;
}

.b-heading_1 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_1 {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-heading_1 {
  letter-spacing: 0;
}

.b-heading_2 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_2 {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .b-heading_2 {
  letter-spacing: 0;
}

.b-heading_3 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_3 {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-heading_3 {
  letter-spacing: 0;
}

.b-heading_4 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_4 {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-heading_4 {
  letter-spacing: 0;
}

.b-heading_5 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
html[dir=rtl] .b-heading_5 {
  letter-spacing: 0;
}

.b-heading_6 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03;
}
html[dir=rtl] .b-heading_6 {
  letter-spacing: 0;
}

.b-heading_1_accent {
  font-family: var(--care-essentials-font, "DIN Condensed", "Arial", "Helvetica", sans-serif);
  font-size: 80px;
  font-weight: 700;
  line-height: 0.88;
  text-transform: uppercase;
}
@media screen and (max-width: 767.9px) {
  .b-heading_1_accent {
    font-size: 56px;
  }
}
html[dir=rtl] .b-heading_1_accent {
  letter-spacing: 0;
}

.b-heading_2_accent {
  font-family: var(--care-essentials-font, "DIN Condensed", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  line-height: 0.88;
  text-transform: uppercase;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_2_accent {
    font-size: 40px;
  }
}
html[dir=rtl] .b-heading_2_accent {
  letter-spacing: 0;
}

.b-heading_3_accent {
  font-family: var(--care-essentials-font, "DIN Condensed", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  line-height: 0.88;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_3_accent {
    font-size: 32px;
  }
}
html[dir=rtl] .b-heading_3_accent {
  letter-spacing: 0;
}

.b-heading_4_accent {
  font-family: var(--care-essentials-font, "DIN Condensed", "Arial", "Helvetica", sans-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 0.88;
}
@media screen and (max-width: 1179.9px) {
  .b-heading_4_accent {
    font-size: 20px;
  }
}
html[dir=rtl] .b-heading_4_accent {
  letter-spacing: 0;
}

/*md

# b-button

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

## Primary type button

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

## Primary type disabled button

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

## Secondary type button

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

## Secondary type disabled button

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

## Tertiary type button

```html_example
<button type="submit" class="b-button m-outline">
	Button
</button>
```

## Tertiary type disabled button

```html_example
<button type="submit" class="b-button m-outline m-disabled">
	Button
</button>
```

## Primary inverted type button

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-primary_inverted">
		Button
	</button>
</div>
```

## Primary inverted type disabled button

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-primary_inverted m-disabled">
		Button
	</button>
</div>
```

## Tertiary inverted type button

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-outline_inverted">
		Button
	</button>
</div>
```

## Tertiary inverted type disabled button

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-outline_inverted m-disabled">
		Button
	</button>
</div>
```

## Primary button with icon on the left

```html_example
<button type="submit" class="b-button">
	<span class="b-button-icon_left">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9927 4.06826C9.71596 1.97662 6.28465 1.52058 3.63482 3.78466C0.808374 6.19963 0.399975 10.2616 2.63232 13.1342C3.4939 14.2428 5.18557 15.9194 6.82381 17.4657C8.47737 19.0265 10.1275 20.5018 10.9415 21.2226L10.9556 21.2351C11.0338 21.3043 11.1234 21.3838 11.2081 21.4476C11.3074 21.5223 11.4429 21.6098 11.6213 21.663C11.8629 21.7351 12.123 21.7351 12.3646 21.663C12.543 21.6098 12.6785 21.5223 12.7778 21.4476C12.8625 21.3838 12.9521 21.3043 13.0303 21.2351L13.0444 21.2226C13.8584 20.5018 15.5085 19.0265 17.1621 17.4657C18.8003 15.9194 20.492 14.2428 21.3536 13.1342C23.5789 10.2707 23.2313 6.17841 20.3428 3.77764C17.6607 1.54846 14.2672 1.97573 11.9927 4.06826ZM11.385 5.73869C9.62109 3.67651 6.78606 3.19666 4.67417 5.0011C2.49051 6.86687 2.19356 9.96209 3.89568 12.1524C4.66972 13.1484 6.27083 14.7436 7.92206 16.3022C9.55168 17.8404 11.1814 19.2977 11.993 20.0165C12.8045 19.2977 14.4342 17.8404 16.0638 16.3022C17.7151 14.7436 19.3162 13.1484 20.0902 12.1524C21.7994 9.953 21.5278 6.84306 19.3201 5.00812C17.1569 3.2102 14.3588 3.68356 12.6009 5.73869C12.4489 5.91638 12.2268 6.01868 11.993 6.01868C11.7591 6.01868 11.537 5.91638 11.385 5.73869Z" fill="currentColor"/>
		</svg>
	</span>
	Sign in
</button>
```

## Tertiary button with icon on the right

```html_example
<button type="submit" class="b-button m-outline">
	Sign in
	<span class="b-button-icon_right">
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9927 4.06826C9.71596 1.97662 6.28465 1.52058 3.63482 3.78466C0.808374 6.19963 0.399975 10.2616 2.63232 13.1342C3.4939 14.2428 5.18557 15.9194 6.82381 17.4657C8.47737 19.0265 10.1275 20.5018 10.9415 21.2226L10.9556 21.2351C11.0338 21.3043 11.1234 21.3838 11.2081 21.4476C11.3074 21.5223 11.4429 21.6098 11.6213 21.663C11.8629 21.7351 12.123 21.7351 12.3646 21.663C12.543 21.6098 12.6785 21.5223 12.7778 21.4476C12.8625 21.3838 12.9521 21.3043 13.0303 21.2351L13.0444 21.2226C13.8584 20.5018 15.5085 19.0265 17.1621 17.4657C18.8003 15.9194 20.492 14.2428 21.3536 13.1342C23.5789 10.2707 23.2313 6.17841 20.3428 3.77764C17.6607 1.54846 14.2672 1.97573 11.9927 4.06826ZM11.385 5.73869C9.62109 3.67651 6.78606 3.19666 4.67417 5.0011C2.49051 6.86687 2.19356 9.96209 3.89568 12.1524C4.66972 13.1484 6.27083 14.7436 7.92206 16.3022C9.55168 17.8404 11.1814 19.2977 11.993 20.0165C12.8045 19.2977 14.4342 17.8404 16.0638 16.3022C17.7151 14.7436 19.3162 13.1484 20.0902 12.1524C21.7994 9.953 21.5278 6.84306 19.3201 5.00812C17.1569 3.2102 14.3588 3.68356 12.6009 5.73869C12.4489 5.91638 12.2268 6.01868 11.993 6.01868C11.7591 6.01868 11.537 5.91638 11.385 5.73869Z"fill="currentColor"/>
		</svg>
	</span>
</button>

```
## Link button

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

## Primary type, full width button

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

## Primary icon only button

```html_example
<button type="submit" class="b-button m-icon_only">
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
		<path fill="currentColor" fill-rule="evenodd" d="M7.685 3.934a.8.8 0 0 1 1.13 0l6.794 6.793a1.8 1.8 0 0 1 0 2.546l-6.793 6.793a.8.8 0 1 1-1.131-1.132l6.792-6.793a.2.2 0 0 0 0-.283L7.685 5.066a.8.8 0 0 1 0-1.132Z" clip-rule="evenodd"/>
	</svg>
</button>
```

## Tertiary icon only button

```html_example
<button type="submit" class="b-button m-outline m-icon_only">
	<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
		<path fill="currentColor" fill-rule="evenodd" d="M7.685 3.934a.8.8 0 0 1 1.13 0l6.794 6.793a1.8 1.8 0 0 1 0 2.546l-6.793 6.793a.8.8 0 1 1-1.131-1.132l6.792-6.793a.2.2 0 0 0 0-.283L7.685 5.066a.8.8 0 0 1 0-1.132Z" clip-rule="evenodd"/>
	</svg>
</button>
```

## Primary icon only button inverted

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-primary_inverted m-icon_only">
		<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
			<path fill="currentColor" fill-rule="evenodd" d="M7.685 3.934a.8.8 0 0 1 1.13 0l6.794 6.793a1.8 1.8 0 0 1 0 2.546l-6.793 6.793a.8.8 0 1 1-1.131-1.132l6.792-6.793a.2.2 0 0 0 0-.283L7.685 5.066a.8.8 0 0 1 0-1.132Z" clip-rule="evenodd"/>
		</svg>
	</button>
</div>
```

## Tertiary icon only button inverted

```html_example
<div style="background:#282727; padding:15px;">
	<button type="submit" class="b-button m-outline_inverted m-icon_only">
		<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none" viewBox="0 0 24 24">
			<path fill="currentColor" fill-rule="evenodd" d="M7.685 3.934a.8.8 0 0 1 1.13 0l6.794 6.793a1.8 1.8 0 0 1 0 2.546l-6.793 6.793a.8.8 0 1 1-1.131-1.132l6.792-6.793a.2.2 0 0 0 0-.283L7.685 5.066a.8.8 0 0 1 0-1.132Z" clip-rule="evenodd"/>
		</svg>
	</button>
</div>
```

*/
.b-button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #001489;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #ffffff;
  padding: 0 24px;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.08;
  text-transform: uppercase;
}
@media not all and (pointer: coarse) {
  .b-button:hover {
    background: transparent;
    border-color: #001489;
    color: #001489;
    text-decoration: none;
  }
}
.b-button:active {
  background: transparent;
  border-color: #001489;
  color: #001489;
  text-decoration: none;
}
html[dir=rtl] .b-button {
  letter-spacing: 0;
}
.b-button.m-outline {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: transparent;
  border-color: #282727;
  color: #282727;
}
@media not all and (pointer: coarse) {
  .b-button.m-outline:hover {
    background: #282727;
    border-color: #282727;
    color: #ffffff;
  }
}
.b-button.m-outline:active {
  background: #282727;
  border-color: #282727;
  color: #ffffff;
}
.b-button.m-secondary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #282727;
  border-color: #ffffff;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary:hover {
    background: transparent;
    border-color: #282727;
    color: #282727;
  }
}
.b-button.m-secondary:active {
  background: transparent;
  border-color: #282727;
  color: #282727;
}
.b-button.m-primary_inverted {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #ffffff;
  border-color: #ffffff;
  color: #282727;
}
@media not all and (pointer: coarse) {
  .b-button.m-primary_inverted:hover {
    background: transparent;
    border-color: #ffffff;
    color: #ffffff;
  }
}
.b-button.m-primary_inverted:active {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.b-button.m-outline_inverted {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-outline_inverted:hover {
    background: #ffffff;
    color: #282727;
  }
}
.b-button.m-outline_inverted:active {
  background: #ffffff;
  color: #282727;
}
.b-button.m-link {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  background: transparent;
  border-color: transparent;
  color: inherit;
  height: auto;
  letter-spacing: 0;
  padding: 0;
  text-transform: none;
  transition: none;
}
.b-button.m-link.m-disabled::after, .b-button.m-link:disabled::after, .b-button.m-link[disabled]::after {
  background: #898992;
}
.b-button.m-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-button.m-link:hover::after, .b-button.m-link:active::after {
  transform: scaleX(0);
}
.b-button.m-link.m-disabled, .b-button.m-link:disabled, .b-button.m-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-button.m-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-button.m-link, .b-dialog.m-care_essentials-product .b-button.m-link {
  letter-spacing: normal;
}
.b-button.m-link.m-disabled::after, .b-button.m-link:disabled::after, .b-button.m-link[disabled]::after {
  background: #898992;
}
.b-button.m-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-button.m-link:hover::after, .b-button.m-link:active::after {
  transform: scaleX(0);
}
.b-button.m-link.m-small {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
.b-button.m-link.m-small.m-disabled::after, .b-button.m-link.m-small:disabled::after, .b-button.m-link.m-small[disabled]::after {
  background: #898992;
}
.b-button.m-link.m-small::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-button.m-link.m-small:hover::after, .b-button.m-link.m-small:active::after {
  transform: scaleX(0);
}
.b-button.m-link.m-small.m-disabled, .b-button.m-link.m-small:disabled, .b-button.m-link.m-small[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-button.m-link.m-small {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-button.m-link.m-small, .b-dialog.m-care_essentials-product .b-button.m-link.m-small {
  letter-spacing: normal;
}
.b-button.m-link.m-inverted {
  position: relative;
}
.b-button.m-link.m-inverted.m-disabled::after, .b-button.m-link.m-inverted:disabled::after, .b-button.m-link.m-inverted[disabled]::after {
  background: #898992;
}
.b-button.m-link.m-inverted::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.b-button.m-link.m-inverted:hover::after, .b-button.m-link.m-inverted:active::after {
  transform: scaleX(1);
}
.b-button.m-link.m-option-store {
  font-size: 14px;
}
.b-button.m-disabled, .b-button:disabled, .b-button[disabled] {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #f3f3f6;
  border-color: transparent;
  color: #898992;
  pointer-events: none;
}
.b-button.m-width_full {
  width: 100%;
}
.b-button .b-button-icon_left {
  background: transparent;
  border-radius: 0;
  display: block;
  height: 24px;
  line-height: 24px;
  margin-left: 0;
  margin-right: 12px;
  padding: 0;
  width: 24px;
}
.b-button .b-button-icon_left svg {
  height: 100%;
  width: 100%;
}
.b-button .b-button-icon_right {
  background: transparent;
  border-radius: 0;
  display: block;
  height: 24px;
  line-height: 24px;
  margin-right: 0;
  margin-left: 12px;
  padding: 0;
  width: 24px;
}
.b-button .b-button-icon_right svg {
  height: 100%;
  width: 100%;
}
.b-button.m-secondary_inverted_care {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.048em;
  line-height: 1.12;
  text-transform: uppercase;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary_inverted_care:hover {
    background: transparent;
    color: #ffffff;
  }
}
.b-button.m-secondary_inverted_care:active {
  background: transparent;
  color: #ffffff;
}
html[dir=rtl] .b-button.m-secondary_inverted_care {
  letter-spacing: 0;
}
.b-button.m-secondary_care {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: transparent;
  border-color: #282727;
  color: #282727;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.048em;
  line-height: 1.12;
  text-transform: uppercase;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary_care:hover {
    background: #282727;
    color: #ffffff;
  }
}
.b-button.m-secondary_care:active {
  background: #282727;
  color: #ffffff;
}
html[dir=rtl] .b-button.m-secondary_care {
  letter-spacing: 0;
}
.b-button.m-tertiary_care {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #ffffff;
  border-color: #d0c8bf;
  color: #282727;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.048em;
  line-height: 1.12;
  text-transform: uppercase;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary_care:hover {
    background: #d0c8bf;
    color: #282727;
  }
}
.b-button.m-tertiary_care:active {
  background: #d0c8bf;
  color: #282727;
}
html[dir=rtl] .b-button.m-tertiary_care {
  letter-spacing: 0;
}
.b-button.m-icon_only {
  padding: 0 12px;
}

.b-button_apple_pay:not(:empty) {
  border-radius: 4px;
  display: block;
  height: 48px;
  margin-top: 12px;
  width: 100%;
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-style: white-outline;
  -apple-pay-button-type: plain;
}
.b-button_apple_pay:not(:empty).m-apple_pay-disabled {
  display: none;
}
.b-button_apple_pay:not(:empty):not(.m-minicart_applepay) {
  -apple-pay-button-style: white-outline;
}
.b-button_apple_pay:not(:empty).m-minicart_applepay.m-black {
  -apple-pay-button-style: black;
}
.b-button_apple_pay:not(:empty).m-minicart_applepay.m-white_outline {
  -apple-pay-button-style: white-outline;
}
.b-button_apple_pay:not(:empty) button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  min-height: 43px;
  width: 100%;
}
.b-button_apple_pay.b-applepay-express button {
  border-radius: 4px;
  -apple-pay-button-style: white-outline;
  -apple-pay-button-type: plain;
}

.b-google_pay {
  display: flex;
  margin-top: 12px;
  position: relative;
  z-index: 10;
}
.b-google_pay:has(> div[hidden]) {
  margin-top: 0;
}
.b-google_pay div:not(:empty) {
  flex: 1;
  height: 48px;
}

.b-button_shop_pay {
  /* stylelint-disable-next-line selector-type-no-unknown */
}
.b-button_shop_pay shop-pay-payment-request-button {
  --shop-pay-button-width: 100%;
  --shop-pay-button-height: 48px;
  --shop-pay-button-border-radius: 4px;
}

/*md

# b-link

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

## Text Link (default - body)

```html_example
<a href="#" class="b-link">
	Primary Link
</a>
```

## Text Link (large)

```html_example
<a href="#" class="b-link m-large">
	Primary Link
</a>
```

## Text Link (small)

```html_example
<a href="#" class="b-link m-small">
	Primary Link
</a>
```

## Text Link (micro)

```html_example
<a href="#" class="b-link m-micro">
	Primary Link
</a>
```

## Text Link disabled

```html_example
<a href="#" class="b-link m-disabled">
	Primary Link
</a>
```

## Text Link with right icon

```html_example
<a href="#" class="b-link m-icon_right">
	<span>Primary Link</span>
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  aria-hidden="true" focusable="false">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0655 7.68427C20.3779 7.99669 20.3779 8.50322 20.0655 8.81564L13.2726 15.6085C12.5697 16.3115 11.43 16.3115 10.727 15.6085L3.93412 8.81564C3.6217 8.50322 3.6217 7.99668 3.93412 7.68427C4.24654 7.37185 4.75307 7.37185 5.06549 7.68427L11.8584 14.4772C11.9365 14.5553 12.0631 14.5553 12.1412 14.4772L18.9341 7.68427C19.2465 7.37185 19.7531 7.37185 20.0655 7.68427Z" fill="#currentColor"/>
	</svg>
</a>
```

## Text Link with left icon

```html_example
<a href="#" class="b-link m-icon_left">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  aria-hidden="true" focusable="false">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0655 7.68427C20.3779 7.99669 20.3779 8.50322 20.0655 8.81564L13.2726 15.6085C12.5697 16.3115 11.43 16.3115 10.727 15.6085L3.93412 8.81564C3.6217 8.50322 3.6217 7.99668 3.93412 7.68427C4.24654 7.37185 4.75307 7.37185 5.06549 7.68427L11.8584 14.4772C11.9365 14.5553 12.0631 14.5553 12.1412 14.4772L18.9341 7.68427C19.2465 7.37185 19.7531 7.37185 20.0655 7.68427Z" fill="#currentColor"/>
	</svg>
	<span>Primary Link</span>
</a>
```

*/
.b-link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.b-link.m-disabled::after, .b-link:disabled::after, .b-link[disabled]::after {
  background: #898992;
}
.b-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link:hover::after, .b-link:active::after {
  transform: scaleX(0);
}
.b-link.m-disabled, .b-link:disabled, .b-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link, .b-dialog.m-care_essentials-product .b-link {
  letter-spacing: normal;
}
.b-link.m-small {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
.b-link.m-small.m-disabled::after, .b-link.m-small:disabled::after, .b-link.m-small[disabled]::after {
  background: #898992;
}
.b-link.m-small::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link.m-small:hover::after, .b-link.m-small:active::after {
  transform: scaleX(0);
}
.b-link.m-small.m-disabled, .b-link.m-small:disabled, .b-link.m-small[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link.m-small {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link.m-small, .b-dialog.m-care_essentials-product .b-link.m-small {
  letter-spacing: normal;
}
.b-link.m-large {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 20px;
}
.b-link.m-large.m-disabled::after, .b-link.m-large:disabled::after, .b-link.m-large[disabled]::after {
  background: #898992;
}
.b-link.m-large::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link.m-large:hover::after, .b-link.m-large:active::after {
  transform: scaleX(0);
}
.b-link.m-large.m-disabled, .b-link.m-large:disabled, .b-link.m-large[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link.m-large {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link.m-large, .b-dialog.m-care_essentials-product .b-link.m-large {
  letter-spacing: normal;
}
.b-link.m-micro {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
}
.b-link.m-micro.m-disabled::after, .b-link.m-micro:disabled::after, .b-link.m-micro[disabled]::after {
  background: #898992;
}
.b-link.m-micro::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link.m-micro:hover::after, .b-link.m-micro:active::after {
  transform: scaleX(0);
}
.b-link.m-micro.m-disabled, .b-link.m-micro:disabled, .b-link.m-micro[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link.m-micro {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link.m-micro, .b-dialog.m-care_essentials-product .b-link.m-micro {
  letter-spacing: normal;
}
.b-link.m-icon_left, .b-link.m-icon_right {
  gap: 4px;
}
.b-link.m-icon_left svg, .b-link.m-icon_right svg {
  height: 24px;
  width: 24px;
}
.b-link.m-icon_left::after, .b-link.m-icon_right::after {
  content: none;
}
.b-link.m-icon_left > span, .b-link.m-icon_right > span {
  position: relative;
}
.b-link.m-icon_left > span.m-disabled::after, .b-link.m-icon_left > span:disabled::after, .b-link.m-icon_left > span[disabled]::after, .b-link.m-icon_right > span.m-disabled::after, .b-link.m-icon_right > span:disabled::after, .b-link.m-icon_right > span[disabled]::after {
  background: #898992;
}
.b-link.m-icon_left > span::after, .b-link.m-icon_right > span::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link.m-icon_left > span:hover::after, .b-link.m-icon_left > span:active::after, .b-link.m-icon_right > span:hover::after, .b-link.m-icon_right > span:active::after {
  transform: scaleX(0);
}
.b-link.m-inverted {
  position: relative;
}
.b-link.m-inverted.m-disabled::after, .b-link.m-inverted:disabled::after, .b-link.m-inverted[disabled]::after {
  background: #898992;
}
.b-link.m-inverted::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.b-link.m-inverted:hover::after, .b-link.m-inverted:active::after {
  transform: scaleX(1);
}
@media not all and (pointer: coarse) {
  .b-link.m-inverted:hover {
    color: #282727;
  }
}
.b-link.m-bold {
  font-weight: 700;
}
.b-link.m-multiline {
  background-image: linear-gradient(to right, currentcolor, currentcolor);
  background-position: bottom center;
  background-repeat: no-repeat;
  display: inline;
  position: relative;
  text-decoration: none;
  transition: background-size ease-out 150ms;
  background-size: 100% 1px;
}
.b-link.m-multiline.m-disabled, .b-link.m-multiline:disabled, .b-link.m-multiline[disabled] {
  background-image: linear-gradient(to right, #898992, #898992);
}
.b-link.m-multiline::after {
  display: none;
}
.b-link.m-multiline:active, .b-link.m-multiline:hover {
  background-size: 0% 1px;
}
@media screen and (max-width: 767.9px) {
  .b-link.m-mobile_simplified {
    text-decoration: underline;
  }
  .b-link.m-mobile_simplified::after {
    display: none;
  }
}

.b-back_to_top {
  align-items: center;
  background: #ffffff;
  border: 2px solid #282727;
  border-radius: 50%;
  bottom: 60px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  opacity: 0;
  pointer-events: auto;
  position: fixed;
  right: 15px;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(0);
  transition: ease-out 150ms;
  transition-property: opacity, visibility, box-shadow, background-color, color, bottom;
  visibility: hidden;
  z-index: 6;
}
@media screen and (max-width: 767.9px) {
  .b-back_to_top {
    bottom: 20px;
  }
}
html[dir=rtl] .b-back_to_top {
  left: 15px;
  right: initial;
}
@media not all and (pointer: coarse) {
  .b-back_to_top:hover svg {
    background: #ffffff;
    color: #282727;
  }
}
.b-back_to_top.m-showed {
  opacity: 1;
  visibility: visible;
}
.b-back_to_top.sticky-showed {
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
.b-back_to_top svg {
  background: #282727;
  border: 2px solid #282727;
  border-radius: 50%;
  box-sizing: border-box;
  height: 35px;
  padding: 5px;
  transition: ease-out 150ms;
  width: 35px;
}
.b-back_to_top-copy_small {
  display: none;
}
.l-page.m-comparison_panel .b-back_to_top {
  bottom: 314px;
}
.l-page.m-comparison_panel.m-comparison_panel_collapsed .b-back_to_top {
  bottom: 164px;
}

.ebcss-chat-button-wrapper {
  transition: ease-out 150ms;
  transition-property: opacity, visibility, box-shadow, background-color, color, bottom, transform;
}
div.eb-css .ebcss-chat-button-wrapper {
  z-index: 19;
}

body:has(.b-product_sticky_panel.m-opened) {
  /* stylelint-disable-next-line */
}
body:has(.b-product_sticky_panel.m-opened) #gladlyChat_container.browser {
  transform: translateY(var(--sticky-element-height));
}
body:has(.b-product_sticky_panel.m-opened) .b-back_to_top,
body:has(.b-product_sticky_panel.m-opened) #chat_button_online {
  transform: translateY(var(--sticky-element-height));
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
body:has(.b-product_sticky_panel.m-opened) #ebcss-chat-button {
  transform: translateY(var(--sticky-element-height));
}
@media screen and (max-width: 767.9px) {
  body:has(.b-summary_table.m-sticky) #chat_button_online { /* stylelint-disable-line selector-id-pattern */
    bottom: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  body:has(.b-summary_table.m-sticky) #chat_button_online { /* stylelint-disable-line selector-id-pattern */
    bottom: 110px;
  }
}
@media screen and (min-width: 768px) {
  body:has(.b-back_to_top.m-showed) #chat_button_online { /* stylelint-disable-line selector-id-pattern */
    bottom: 115px;
  }
}
body:has(.b-back_to_top.m-showed) #ebcss-chat-button {
  bottom: 115px;
}
@media screen and (max-width: 767.9px) {
  body:has(.b-back_to_top.m-showed) #ebcss-chat-button {
    bottom: 75px;
  }
}
body #chat_button_online {
  z-index: 6;
}

#gladlyChat_container.browser {
  transform: translateY(0);
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s !important;
}

[data-locale=en_US] body:has(#gladlyChat_container) .b-back_to_top {
  bottom: 75px;
  right: 18px;
}

[data-locale=en_CA] body:has(#gladlyChat_container) .b-back_to_top {
  bottom: 75px;
  right: 18px;
}

[data-locale=fr_CA] body:has(#gladlyChat_container) .b-back_to_top {
  bottom: 75px;
  right: 18px;
}

.l-page #gladlyChat_container.preload {
  z-index: 21 !important;
}

/*md

# Arvato Chat Button

This is component that is replaced by the initial Arvato Chat Button to look consistently with the current design.
We use these styles to overwrite the default styling of Arvato Chat Button.

*/
.eb-css .ebcss-chat-button-wrapper {
  display: none !important;
}

#ebcss-chat-button {
  align-items: center;
  background: #ffffff;
  border: 2px solid #282727;
  border-radius: 50%;
  bottom: 25px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  padding: 0 !important;
  position: fixed;
  pointer-events: auto !important;
  right: 15px;
  transform: translateY(0);
  transition: ease-out 150ms;
  transition-property: opacity, visibility, box-shadow, background-color, color, bottom;
  z-index: 4;
}
.m-1774 #ebcss-chat-button {
  border-radius: 0;
}
#ebcss-chat-button svg {
  background: #282727;
  border: 2px solid #282727;
  border-radius: 50%;
  box-sizing: border-box;
  height: 35px;
  overflow: visible;
  padding: 5px;
  width: 35px;
}
@media screen and (max-width: 767.9px) {
  #ebcss-chat-button svg {
    border-radius: 0;
    clip-path: circle(50%);
  }
}
.m-1774 #ebcss-chat-button svg {
  border-radius: 0;
  clip-path: none;
}
@media screen and (min-width: 768px) {
  #ebcss-chat-button:hover {
    color: #282727;
  }
  #ebcss-chat-button:hover svg {
    background: #ffffff;
  }
}

/*md

# b-global_alerts

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

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

This messages should not have prominent visual styles.

## Default

```html_example
<div class="b-global_alerts" style="position: relative">
    <div
        class="b-global_alerts-item"
        role="alert"
    >
        Filters applied
    </div>
</div>
```

## Error

```html_example
<div class="b-global_alerts" style="position: relative">
    <div
        class="b-global_alerts-item m-error"
        role="alert"
    >
        Filters applied
    </div>
</div>
```

## Success

```html_example
<div class="b-global_alerts" style="position: relative">
    <div
        class="b-global_alerts-item m-success"
        role="alert"
    >
        Filters applied
    </div>
</div>
```

## Warning

```html_example
<div class="b-global_alerts" style="position: relative">
    <div
        class="b-global_alerts-item m-warning"
        role="alert"
    >
        Filters applied
    </div>
</div>
```

## What this alerts covers

This is middle level between page and components.

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

## Visually hide alerts

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

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

*/
.b-global_alerts {
  bottom: 20px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  z-index: 26;
}
@media screen and (max-width: 767.9px) {
  .m-hide_alerts .b-global_alerts {
    visibility: hidden;
  }
}
@media screen and (min-width: 1180px) {
  .m-has_dialog .b-global_alerts {
    left: calc(50% - 7.5px);
  }
}
.b-global_alerts.m-visually_hidden {
  pointer-events: none;
  visibility: hidden;
}
.b-global_alerts-item {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  background-color: #ebedf6;
  border: 1px solid #001489;
  border-radius: 4px;
  margin: 0 auto;
  align-items: center;
  color: #282727;
  cursor: default;
  display: flex;
  animation: slide-from-bottom ease-out 150ms;
  max-width: 400px;
  min-width: 241px;
  padding: 18px 16px;
}
html[dir=rtl] .b-global_alerts-item {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-global_alerts-item, .b-dialog.m-care_essentials-product .b-global_alerts-item {
  letter-spacing: normal;
}
.b-global_alerts-item::before {
  content: url("./images/icons/info.svg");
  height: 24px;
  margin-bottom: auto;
  margin-inline-end: 12px;
  width: 24px;
}
.b-global_alerts-item.m-error {
  background-color: #fbeded;
  border-color: #d01d1b;
  visibility: visible;
}
.b-global_alerts-item.m-error::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 2.79995C6.91918 2.79995 2.8002 6.91893 2.8002 12C2.8002 17.081 6.91918 21.2 12.0002 21.2C17.0812 21.2 21.2002 17.081 21.2002 12C21.2002 6.91893 17.0812 2.79995 12.0002 2.79995ZM1.2002 12C1.2002 6.03528 6.03552 1.19995 12.0002 1.19995C17.9649 1.19995 22.8002 6.03528 22.8002 12C22.8002 17.9646 17.9649 22.7999 12.0002 22.7999C6.03552 22.7999 1.2002 17.9646 1.2002 12Z' fill='%23d01d1b'/%3E%3Cpath d='M12.025 18.65C11.45 18.65 11 18.2 11 17.625C11 17.05 11.45 16.6 12.025 16.6C12.575 16.6 13.05 17.083 13.05 17.625C13.05 18.192 12.6 18.65 12.025 18.65Z' fill='%23d01d1b'/%3E%3Cpath d='M11.9932 14.317C11.5352 14.317 11.1602 13.942 11.1602 13.484V5.63403C11.1602 5.17603 11.5352 4.80103 11.9932 4.80103C12.4512 4.80103 12.8262 5.17603 12.8262 5.63403V13.484C12.8262 13.942 12.4512 14.317 11.9932 14.317Z' fill='%23d01d1b'/%3E%3C/svg%3E%0A");
}
.b-global_alerts-item.m-success {
  background-color: #ebf6eb;
  border-color: #008a00;
  visibility: visible;
}
.b-global_alerts-item.m-success::before {
  content: url("./images/icons/tick.svg");
}
.b-global_alerts-item.m-warning {
  background-color: #f9f2eb;
  border-color: #b36200;
  visibility: visible;
}
.b-global_alerts-item.m-warning::before {
  content: url("./images/icons/warning.svg");
}

/*md

# b-highlighter

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

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

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

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

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

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

/*md

# b-link_phone

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

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

```html_example
<a href="tel:1-888-222-3380" class="b-link_phone">1-888-222-3380</a>
```
*/
.b-link_phone {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.b-link_phone.m-disabled::after, .b-link_phone:disabled::after, .b-link_phone[disabled]::after {
  background: #898992;
}
.b-link_phone::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link_phone:hover::after, .b-link_phone:active::after {
  transform: scaleX(0);
}
.b-link_phone.m-disabled, .b-link_phone:disabled, .b-link_phone[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link_phone {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link_phone, .b-dialog.m-care_essentials-product .b-link_phone {
  letter-spacing: normal;
}
.l-header-right .b-link_phone {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding-right: 8px;
  text-decoration: none;
}

/*md

# b-link_email

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

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

```html_example
<a href="mailto:$tools.sitePref.getValue('customerServiceEmail')" class="b-link_email">$tools.sitePref.getValue('customerServiceEmail')</a>
```
*/
.b-link_email {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
}
.b-link_email.m-disabled::after, .b-link_email:disabled::after, .b-link_email[disabled]::after {
  background: #898992;
}
.b-link_email::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-link_email:hover::after, .b-link_email:active::after {
  transform: scaleX(0);
}
.b-link_email.m-disabled, .b-link_email:disabled, .b-link_email[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-link_email {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-link_email, .b-dialog.m-care_essentials-product .b-link_email {
  letter-spacing: normal;
}

/*md

# b-dialog

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

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

```html_example
<div>
	<button class="b-button m-outline"
			type="button"
			data-widget="emitBusEvent"
			data-bus-event-type="dialog.show"
			data-event-click.prevent="emitBusEvent"
			data-modal-config="{&quot;content&quot;: &quot; &quot;}"
	>
		Show usual dialog
	</button>
	<button class="b-button m-outline" data-widget="emitBusEvent" data-bus-event-type="page.show.searchbox" data-event-click.prevent="emitBusEvent">
		Show search suggestions dialog
	</button>
</div>
<div data-widget="globalModal" data-disable-rendering="false">
    <div class="b-dialog" data-ref="container" hidden></div>
    <script type="template/mustache" data-ref="template">
        <div data-ref="container" class="b-dialog m-reset_password">
            <div class="b-dialog-window m-top_dialog" role="dialog" data-ref="dialog" aria-modal="true">
                <div class="b-dialog-header">
                    <h2 class="b-dialog-title" id="forget-password-form-title">Forgot password?</h2>
                    <div data-tau="forgot_password_close">
                        <button class="b-dialog-close" type="button" data-dismiss="modal" data-event-click.prevent="cancel">
                            <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
                                <use href="#close"></use>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="b-dialog-body">
                    <p class="b-form_field">Don't worry - it's easily done! Just enter your email address below and we'll send you a link to reset your password.</p>
                    <form class="reset-password-form" action="" method="POST">
                        <div data-widget="inputEmail" class="b-form_field m-required">
                            <label class="b-form_field-label">Email</label>
                            <input type="email" class="b-input">
                        </div>
                        <div class="b-dialog-footer m-actions">
                            <button type="submit" class="b-button m-width_full">Reset password</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </script>
</div>
<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="close">
        <path fill="currentColor" d="m0.515,0.515c0.39,-0.39 1.023,-0.39 1.414,0l7.071,7.07l7.071,-7.07c0.39,-0.39 1.024,-0.39 1.414,0c0.39,0.39 0.39,1.023 0,1.414l-7.07,7.071l7.07,7.071c0.39,0.39 0.39,1.024 0,1.414c-0.39,0.39 -1.023,0.39 -1.414,0l-7.071,-7.07l-7.071,7.07c-0.39,0.39 -1.024,0.39 -1.414,0c-0.39,-0.39 -0.39,-1.023 0,-1.414l7.07,-7.071l-7.07,-7.071c-0.39,-0.39 -0.39,-1.024 0,-1.414z"></path>
    </symbol>
</svg>

<div data-widget="searchBox" data-disable-rendering="true">
    <div data-ref="container" class="b-dialog m-search_suggestions" data-event-click.self="closeModal">
        <div class="b-search_dialog" data-ref="dialog" role="dialog">
            <div class="b-search_dialog-inner">
                <div class="b-search_dialog-inner_top">
                    <div class="b-search_dialog-inner_top_content">
                        <div class="b-search_dialog-form_wrap">
                            <form role="search" method="get" name="simpleSearch" class="b-search_input">
                                <button class="b-search_input-submit" type="submit">
                                    <svg width="23" height="23" viewBox="0 0 27 28" focusable="false">
                                        <path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" d="M19.484 19.984c4.1-4.1 4.066-10.784-.078-14.927C15.263.913 8.58.879 4.48 4.979c-4.1 4.1-4.066 10.784.078 14.927 4.143 4.144 10.826 4.178 14.927.078zm-.567-.355l7.239 7.494"></path>
                                    </svg>
                                </button>
                                <input role="combobox" id="header-search-input" class="b-search_input-input" type="search" name="q" value="" placeholder="Search">
                            </form>
                            <button type="button" class="b-search_dialog-cancel" data-event-click="closeSearch">Cancel</button>
                        </div>
                    </div>
                </div>
                <div role="listbox" id="search-suggestions-list" class="b-suggestions m-active">
                    <div role="none" class="b-suggestions-inner">
                        <div role="none" class="b-suggestions-section m-content">
                            <div role="none" class="b-suggestions-title">Quick Links</div>
                            <a role="option" id="result-item-0" class="b-suggestions-option b-suggestions-link" href="#">Privacy Policy</a>
                            <a role="option" id="result-item-1" class="b-suggestions-option b-suggestions-link" href="#">Men</a>
                            <a role="option" id="result-item-2" class="b-suggestions-option b-suggestions-link" href="#">Women</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```
*/
.b-dialog {
  align-items: center;
  bottom: 0;
  display: flex;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, background-color;
  visibility: hidden;
  z-index: 22;
  justify-content: center;
  padding: 40px 0;
}
.b-dialog:not(.m-initialized) {
  transition: none !important;
}
.b-dialog.m-opened, .b-dialog.m-active {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  visibility: visible;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-mobile_bottom {
    align-items: flex-end;
    padding-bottom: 0;
  }
}
.b-dialog-window {
  animation: dialog-opening cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 3px 15px hsla(0deg, 0%, 0%, 0.35);
  color: #282727;
  margin: auto;
  max-width: 960px;
  padding: 0 32px 32px;
  position: relative;
  transform-origin: top center;
  width: auto;
  z-index: 22;
}
@media screen and (min-width: 1180px) {
  .b-dialog-window {
    margin: auto 32px;
  }
}
@media screen and (min-width: 768px) {
  .b-dialog-window {
    min-width: 600px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-dialog-window {
    max-width: calc(100% - 64px);
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog-window {
    max-width: calc(100% - 32px);
    min-width: 345px;
    padding: 0 16px 24px;
  }
}
.b-dialog-window.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-window.m-mobile_bottom {
    border-radius: 4px 4px 0 0;
    margin: 0;
  }
}
.b-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-top: 32px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-header {
    padding-top: 24px;
  }
}
@media screen and (min-width: 1180px) {
  .b-dialog-header.m-hide_lg {
    display: none;
  }
}
.b-dialog-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-dialog-title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-dialog-title {
  letter-spacing: 0;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-title {
    font-size: 24px;
  }
}
.b-dialog-title.m-small {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  display: block;
  text-align: center;
  width: 100%;
}
html[dir=rtl] .b-dialog-title.m-small {
  letter-spacing: 0;
}
.b-dialog-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  position: absolute;
  right: 0;
  top: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-dialog-close {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-dialog-close:hover {
  color: #001489;
}
.m-care_essentials .b-dialog-close:hover, .m-1774 .b-dialog-close:hover {
  color: inherit;
}
@media screen and (max-width: 1179.9px) {
  .b-dialog-close {
    min-height: 24px;
  }
}
html[dir=rtl] .b-dialog-close {
  left: 0;
  right: initial;
}
.b-dialog-body {
  margin-top: 8px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-body {
    margin-top: 20px;
  }
}
.b-dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-footer {
    flex-direction: column;
  }
}
.b-dialog-footer button,
.b-dialog-footer .b-button {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .b-dialog-footer button + button,
  .b-dialog-footer .b-button + .b-button {
    margin-inline-start: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog-footer button + button,
  .b-dialog-footer .b-button + .b-button {
    margin-top: 20px;
  }
}

.b-dialog.m-size_guide .b-dialog-window {
  min-height: 90vh;
  min-width: auto;
  width: 754px;
}

.b-dialog.m-quick_view_cart {
  z-index: 22;
}

.b-dialog.m-quick_view .b-dialog-window {
  animation: none;
  border-radius: 0;
  bottom: 0;
  box-shadow: none;
  height: 100%;
  margin: 0;
  max-height: 100vh;
  max-width: 100%;
  min-width: 100%;
  overflow-y: scroll;
  padding: 0 0 40px;
  position: fixed;
  right: 0;
  transform-origin: initial;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: transform, visibility;
  visibility: hidden;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-quick_view .b-dialog-window {
    transform: translateY(100%);
  }
}
@media screen and (min-width: 768px) {
  .b-dialog.m-quick_view .b-dialog-window {
    max-width: 400px;
    min-width: 400px;
    transform: translateX(100%);
  }
  html[dir=rtl] .b-dialog.m-quick_view .b-dialog-window {
    left: 0;
    right: initial;
    transform: translateX(-100%);
  }
}
.b-dialog.m-quick_view .b-dialog-window.m-active {
  transform: translate(0);
  visibility: visible;
}
html[dir=rtl] .b-dialog.m-quick_view .b-dialog-window.m-active {
  transform: translate(0);
}
.b-dialog.m-quick_view .b-dialog-header {
  justify-content: flex-end;
  left: 0;
  margin: 0;
  padding: 0;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 3;
}
.b-dialog.m-quick_view .b-drawer-close {
  background-color: #ffffff;
  border-radius: 4px;
  height: 32px;
  inset-inline-end: 24px;
  justify-content: center;
  position: absolute;
  top: 24px;
  width: 32px;
}
.b-dialog.m-quick_view .b-dialog-close {
  background-color: #ffffff;
  border-radius: 4px;
  height: 32px;
  inset-inline-end: 16px;
  min-width: 32px;
  top: 16px;
  width: 32px;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-quick_view .b-dialog-close {
    inset-inline-end: 24px;
    top: 24px;
  }
}
.b-dialog.m-quick_view .b-dialog-body {
  display: none;
}
.b-dialog.m-quick_view.m-1774-product .b-dialog-close {
  border-radius: 0;
}

.b-dialog.m-search_suggestions {
  align-items: flex-start;
  overflow-y: auto;
  padding: 0;
  top: -100%;
  transition-property: top;
}
.b-dialog.m-search_suggestions.m-opened {
  display: block;
  top: 0;
}
.b-dialog.m-search_suggestions::after {
  touch-action: none;
}

.b-dialog.m-reset_password .b-dialog-window {
  min-width: auto;
  width: 560px;
}

.b-dialog.m-delete_address .b-dialog-window,
.b-dialog.m-wishlist .b-dialog-window {
  max-width: 100%;
  min-width: auto;
  width: 524px;
}

.b-dialog.m-countdown .b-dialog-window {
  min-height: auto;
}

.b-dialog.m-country_selector .b-dialog-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
@media screen and (max-width: 1179.9px) {
  .b-dialog.m-country_selector .b-dialog-title {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .b-dialog.m-country_selector .b-dialog-title {
  letter-spacing: 0;
}
.b-dialog.m-country_selector .b-dialog-window {
  min-width: auto;
  padding: 0 32px 48px;
  width: 578px;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-country_selector .b-dialog-window {
    max-width: 100%;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-country_selector .b-dialog-window {
    padding: 0 16px 20px;
  }
}

.b-dialog.m-bonus_product .b-dialog-window {
  min-height: 60vh;
  padding: 0 32px 26px;
  width: 680px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-bonus_product .b-dialog-window {
    padding: 0 16px;
  }
}
.b-dialog.m-bonus_product .b-dialog-body {
  display: none;
}

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

.b-dialog.m-drawer .b-dialog-window {
  animation: none;
  bottom: 0;
  box-shadow: none;
  margin: 0;
  padding: 0 16px 36px;
  position: fixed;
  right: 0;
  transform-origin: initial;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: transform, visibility;
  visibility: hidden;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-drawer .b-dialog-window {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 100vh;
    max-width: 100%;
    min-width: 100%;
    overflow-y: scroll;
    transform: translateY(100%);
  }
}
@media screen and (min-width: 768px) {
  .b-dialog.m-drawer .b-dialog-window {
    border-radius: 0;
    height: 100%;
    max-width: 400px;
    min-width: 400px;
    padding-inline: 24px;
    transform: translateX(100%);
  }
  html[dir=rtl] .b-dialog.m-drawer .b-dialog-window {
    left: 0;
    right: initial;
    transform: translateX(-100%);
  }
}
@media screen and (min-width: 1440px) {
  .b-dialog.m-drawer .b-dialog-window {
    padding-inline: 32px;
  }
}
.b-dialog.m-drawer .b-dialog-window.m-active {
  transform: translate(0);
  visibility: visible;
}
html[dir=rtl] .b-dialog.m-drawer .b-dialog-window.m-active {
  transform: translate(0);
}
.b-dialog.m-drawer .b-dialog-header {
  margin-bottom: 20px;
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-drawer .b-dialog-header {
    padding-top: 32px;
  }
}
.b-dialog.m-drawer .b-dialog-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-dialog.m-drawer .b-dialog-title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-dialog.m-drawer .b-dialog-title {
  letter-spacing: 0;
}
.b-dialog.m-drawer .b-dialog-subtitle {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 24px;
}
html[dir=rtl] .b-dialog.m-drawer .b-dialog-subtitle {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-dialog.m-drawer .b-dialog-subtitle, .b-dialog.m-care_essentials-product .b-dialog.m-drawer .b-dialog-subtitle {
  letter-spacing: normal;
}
.b-dialog.m-drawer .b-dialog-footer {
  flex-direction: column;
  margin-top: 24px;
}
.b-dialog.m-drawer .b-dialog-footer .b-button + .b-button {
  margin-inline-start: 0;
  margin-top: 12px;
}
html[lang=fr] .b-dialog.m-drawer .b-dialog-footer .b-button {
  font-size: 14px;
}
.b-dialog.m-drawer.m-wishlist .b-dialog-subtitle {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-dialog.m-drawer.m-wishlist .b-dialog-subtitle {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-dialog.m-drawer.m-wishlist .b-dialog-subtitle, .b-dialog.m-care_essentials-product .b-dialog.m-drawer.m-wishlist .b-dialog-subtitle {
  letter-spacing: normal;
}

/*md
# b-content_placeholder

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

## Example

```html_example
<div class="b-content_placeholder">
	Bazaarvoice reviews will be here
</div>
```
*/
.b-content_placeholder {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  align-items: center;
  background-color: #ebebea;
  color: #494954;
  display: flex;
  height: 70vh;
  justify-content: center;
}
@media screen and (max-width: 1179.9px) {
  .b-content_placeholder {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-content_placeholder {
  letter-spacing: 0;
}

/*md

# b-user_content

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

## Headings

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

## Paragraphs

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

## An unordered list

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

## An ordered list

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

## Full page

```html_example
<div class="b-user_content">
	<h1>
		Privacy Policy
	</h1>
	<h2>General Information</h2>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<ul>
		<li>Provide, operate, and maintain our website</li>
		<li>Improve, personalize, and expand our website</li>
		<li>Understand and analyze how you use our website</li>
	</ul>
	<ol>
		<li>Develop new products, services, features, and functionality</li>
		<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
		<li>Send you emails</li>
		<li>Find and prevent fraud</li>
	</ol>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
</div>
```
*/
.b-user_content > h1,
.b-user_content .b-h1 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: 32px;
}
@media screen and (max-width: 1179.9px) {
  .b-user_content > h1,
  .b-user_content .b-h1 {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-user_content > h1,
html[dir=rtl] .b-user_content .b-h1 {
  letter-spacing: 0;
}
.b-user_content > h2,
.b-user_content .b-h2 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
@media screen and (max-width: 1179.9px) {
  .b-user_content > h2,
  .b-user_content .b-h2 {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .b-user_content > h2,
html[dir=rtl] .b-user_content .b-h2 {
  letter-spacing: 0;
}
.b-user_content > h3,
.b-user_content .b-h3 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .b-user_content > h3,
  .b-user_content .b-h3 {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-user_content > h3,
html[dir=rtl] .b-user_content .b-h3 {
  letter-spacing: 0;
}
.b-user_content > h4,
.b-user_content .b-h4 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-user_content > h4,
  .b-user_content .b-h4 {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-user_content > h4,
html[dir=rtl] .b-user_content .b-h4 {
  letter-spacing: 0;
}
.b-user_content > h5,
.b-user_content .b-h5 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
html[dir=rtl] .b-user_content > h5,
html[dir=rtl] .b-user_content .b-h5 {
  letter-spacing: 0;
}
.b-user_content > h2,
.b-user_content > h3,
.b-user_content > h4,
.b-user_content > h5 {
  margin-bottom: 16px;
  margin-top: 32px;
}
.b-user_content > h2:first-child,
.b-user_content > h3:first-child,
.b-user_content > h4:first-child,
.b-user_content > h5:first-child {
  margin-top: 0;
}
.b-user_content p {
  margin-bottom: 16px;
}
.b-user_content .b-paragraph {
  margin-bottom: 0;
}
.b-user_content a:not([class^=b-]) {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  font-size: inherit;
}
.b-user_content a:not([class^=b-]).m-disabled::after, .b-user_content a:not([class^=b-]):disabled::after, .b-user_content a:not([class^=b-])[disabled]::after {
  background: #898992;
}
.b-user_content a:not([class^=b-])::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-user_content a:not([class^=b-]):hover::after, .b-user_content a:not([class^=b-]):active::after {
  transform: scaleX(0);
}
.b-user_content a:not([class^=b-]).m-disabled, .b-user_content a:not([class^=b-]):disabled, .b-user_content a:not([class^=b-])[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-user_content a:not([class^=b-]) {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-user_content a:not([class^=b-]), .b-dialog.m-care_essentials-product .b-user_content a:not([class^=b-]) {
  letter-spacing: normal;
}
.b-user_content ul > ul,
.b-user_content ol > ul {
  margin-bottom: 0;
}
.b-user_content ul:not([class^=b-]) {
  list-style: disc outside;
}
.b-user_content ol:not([class^=b-]) {
  list-style: decimal outside;
}
.b-user_content ul:not([class^=b-]),
.b-user_content ol:not([class^=b-]) {
  display: block;
  margin-bottom: 16px;
  padding-left: 20px;
}
.b-user_content ul:not([class^=b-]):last-child,
.b-user_content ol:not([class^=b-]):last-child {
  margin-bottom: 0;
}
.b-user_content li:not([class^=b-]) {
  display: list-item;
  margin-bottom: 4px;
}
.b-user_content .b-unstyled_list {
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

/*md

# b-content_page

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

## Headings

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

## Paragraphs

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

## An unordered list

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

## An ordered list

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

## Full page

```html_example
<div class="b-content_page">
	<h1 class="b-heading_1_accent">
		Privacy Policy
	</h1>
	<h2>General Information</h2>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<ul>
		<li>Provide, operate, and maintain our website</li>
		<li>Improve, personalize, and expand our website</li>
		<li>Understand and analyze how you use our website</li>
	</ul>
	<ol>
		<li>Develop new products, services, features, and functionality</li>
		<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the website, and for marketing and promotional purposes</li>
		<li>Send you emails</li>
		<li>Find and prevent fraud</li>
	</ol>
	<p class="b-text_large_bold">All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
</div>
```
*/
.b-content_page h1 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 40px;
  margin-bottom: 32px;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page h1 {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-content_page h1 {
  letter-spacing: 0;
}
.b-content_page h2 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  font-size: 28px;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page h2 {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .b-content_page h2 {
  letter-spacing: 0;
}
.b-content_page h3 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page h3 {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-content_page h3 {
  letter-spacing: 0;
}
.b-content_page h4 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page h4 {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-content_page h4 {
  letter-spacing: 0;
}
.b-content_page h5 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
html[dir=rtl] .b-content_page h5 {
  letter-spacing: 0;
}
.b-content_page h2,
.b-content_page h3,
.b-content_page h4,
.b-content_page h5 {
  margin-bottom: 16px;
  margin-top: 32px;
}
.b-content_page h2:first-child,
.b-content_page h3:first-child,
.b-content_page h4:first-child,
.b-content_page h5:first-child {
  margin-top: 0;
}
.b-content_page p {
  line-height: 1.4;
  margin-bottom: 16px;
}
.b-content_page .b-paragraph {
  margin-bottom: 0;
}
.b-content_page a:not([class^=b-]) {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  font-size: inherit;
}
.b-content_page a:not([class^=b-]).m-disabled::after, .b-content_page a:not([class^=b-]):disabled::after, .b-content_page a:not([class^=b-])[disabled]::after {
  background: #898992;
}
.b-content_page a:not([class^=b-])::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-content_page a:not([class^=b-]):hover::after, .b-content_page a:not([class^=b-]):active::after {
  transform: scaleX(0);
}
.b-content_page a:not([class^=b-]).m-disabled, .b-content_page a:not([class^=b-]):disabled, .b-content_page a:not([class^=b-])[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-content_page a:not([class^=b-]) {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-content_page a:not([class^=b-]), .b-dialog.m-care_essentials-product .b-content_page a:not([class^=b-]) {
  letter-spacing: normal;
}
.b-content_page #gladly-help-center a:not([class^=b-]) {
  background-image: linear-gradient(to right, currentcolor, currentcolor);
  background-position: bottom center;
  background-repeat: no-repeat;
  display: inline;
  position: relative;
  text-decoration: none;
  transition: background-size ease-out 150ms;
  background-size: 100% 1px;
}
.b-content_page #gladly-help-center a:not([class^=b-]).m-disabled, .b-content_page #gladly-help-center a:not([class^=b-]):disabled, .b-content_page #gladly-help-center a:not([class^=b-])[disabled] {
  background-image: linear-gradient(to right, #898992, #898992);
}
.b-content_page #gladly-help-center a:not([class^=b-])::after {
  display: none;
}
.b-content_page #gladly-help-center a:not([class^=b-]):active, .b-content_page #gladly-help-center a:not([class^=b-]):hover {
  background-size: 0% 1px;
}
.b-content_page ul,
.b-content_page ol {
  display: block;
  margin-bottom: 16px;
  padding-inline-start: 20px;
}
.b-content_page li {
  display: list-item;
  margin-bottom: 4px;
}
.b-content_page ul {
  list-style: disc outside;
}
.b-content_page ol {
  list-style: decimal outside;
}
.b-content_page ul > ul,
.b-content_page ol > ul {
  margin-bottom: 0;
}
.b-content_page .b-unstyled_list {
  list-style: none;
  margin-bottom: 0;
  padding-inline-start: 0;
}
.b-content_page .b-radio {
  margin-bottom: 12px;
}
.b-content_page .b-form-message {
  margin-bottom: 16px;
}
.b-content_page .b-track_order-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page .b-track_order-title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-content_page .b-track_order-title {
  letter-spacing: 0;
}
.b-content_page .b-accordion h2 {
  margin: 0;
}
.b-content_page .b-accordion .b-icon_accordion {
  align-self: center;
}
.b-content_page.m-faq_landing {
  margin-bottom: 64px;
}
@media screen and (min-width: 1180px) {
  .b-content_page.m-faq_landing {
    margin: 0 auto 104px;
    width: 900px;
  }
}
.b-content_page-banner {
  position: relative;
}
.b-content_page-banner picture {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  padding-bottom: 321px;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-content_page-banner picture {
    padding-bottom: 241px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-content_page-banner picture {
    padding-bottom: 184px;
  }
}
.b-content_page-banner picture img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-content_page-banner_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
  align-items: center;
  bottom: 0;
  color: #ffffff;
  display: flex;
  justify-content: center;
  left: 16px;
  position: absolute;
  right: 16px;
  text-align: center;
  top: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-content_page-banner_title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-content_page-banner_title {
  letter-spacing: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-content_page-banner_title {
    font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.98;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) and (max-width: 1179.9px) {
  .b-content_page-banner_title {
    font-size: 24px;
    line-height: 1.02;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  html[dir=rtl] .b-content_page-banner_title {
    letter-spacing: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-content_page-banner_title {
    font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.98;
  }
}
@media screen and (max-width: 767.9px) and (max-width: 1179.9px) {
  .b-content_page-banner_title {
    font-size: 24px;
    line-height: 1.02;
  }
}
@media screen and (max-width: 767.9px) {
  html[dir=rtl] .b-content_page-banner_title {
    letter-spacing: 0;
  }
}
@media screen and (min-width: 768px) {
  .b-content_page-banner_title br {
    display: none;
  }
}

.l-static_page-inner.m-faq_section .b-content_page {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 16px;
}
html[dir=rtl] .l-static_page-inner.m-faq_section .b-content_page {
  letter-spacing: 0;
}
.l-page.m-care_essentials .l-static_page-inner.m-faq_section .b-content_page, .b-dialog.m-care_essentials-product .l-static_page-inner.m-faq_section .b-content_page {
  letter-spacing: normal;
}
@media screen and (max-width: 1179.9px) {
  .l-static_page-inner.m-faq_section .b-content_page {
    margin-bottom: 56px;
  }
}
.l-static_page-inner.m-faq_section .b-content_page h1 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
}
@media screen and (max-width: 1179.9px) {
  .l-static_page-inner.m-faq_section .b-content_page h1 {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .l-static_page-inner.m-faq_section .b-content_page h1 {
  letter-spacing: 0;
}
@media screen and (max-width: 1179.9px) {
  .l-static_page-inner.m-faq_section .b-content_page h1 {
    border-bottom: 1px solid #d2d1d4;
    margin-bottom: 24px;
    padding: 20px 0;
  }
}
.l-static_page-inner.m-faq_section .b-content_page h2 {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 20px;
  margin-top: 64px;
}
@media screen and (max-width: 1179.9px) {
  .l-static_page-inner.m-faq_section .b-content_page h2 {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .l-static_page-inner.m-faq_section .b-content_page h2 {
  letter-spacing: 0;
}
@media screen and (max-width: 1179.9px) {
  .l-static_page-inner.m-faq_section .b-content_page h2 {
    margin-top: 60px;
  }
}
.l-static_page-inner.m-faq_section .b-content_page h4 {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 12px;
  margin-top: 0;
}
html[dir=rtl] .l-static_page-inner.m-faq_section .b-content_page h4 {
  letter-spacing: 0;
}
.l-page.m-care_essentials .l-static_page-inner.m-faq_section .b-content_page h4, .b-dialog.m-care_essentials-product .l-static_page-inner.m-faq_section .b-content_page h4 {
  letter-spacing: normal;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  background-image: linear-gradient(to right, currentcolor, currentcolor);
  background-position: bottom center;
  background-repeat: no-repeat;
  display: inline;
  position: relative;
  text-decoration: none;
  transition: background-size ease-out 150ms;
  background-size: 0% 1px;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a.m-disabled::after, .l-static_page-inner.m-faq_section .b-content_page h4 a:disabled::after, .l-static_page-inner.m-faq_section .b-content_page h4 a[disabled]::after {
  background: #898992;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.l-static_page-inner.m-faq_section .b-content_page h4 a:hover::after, .l-static_page-inner.m-faq_section .b-content_page h4 a:active::after {
  transform: scaleX(0);
}
.l-static_page-inner.m-faq_section .b-content_page h4 a.m-disabled, .l-static_page-inner.m-faq_section .b-content_page h4 a:disabled, .l-static_page-inner.m-faq_section .b-content_page h4 a[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .l-static_page-inner.m-faq_section .b-content_page h4 a {
  letter-spacing: 0;
}
.l-page.m-care_essentials .l-static_page-inner.m-faq_section .b-content_page h4 a, .b-dialog.m-care_essentials-product .l-static_page-inner.m-faq_section .b-content_page h4 a {
  letter-spacing: normal;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a.m-disabled::after, .l-static_page-inner.m-faq_section .b-content_page h4 a:disabled::after, .l-static_page-inner.m-faq_section .b-content_page h4 a[disabled]::after {
  background: #898992;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.l-static_page-inner.m-faq_section .b-content_page h4 a:hover::after, .l-static_page-inner.m-faq_section .b-content_page h4 a:active::after {
  transform: scaleX(1);
}
.l-static_page-inner.m-faq_section .b-content_page h4 a.m-disabled, .l-static_page-inner.m-faq_section .b-content_page h4 a:disabled, .l-static_page-inner.m-faq_section .b-content_page h4 a[disabled] {
  background-image: linear-gradient(to right, #898992, #898992);
}
.l-static_page-inner.m-faq_section .b-content_page h4 a::after {
  display: none;
}
.l-static_page-inner.m-faq_section .b-content_page h4 a:active, .l-static_page-inner.m-faq_section .b-content_page h4 a:hover {
  background-size: 100% 1px;
}

/* stylelint-disable-next-line selector-type-no-unknown */
ssp-profilehub {
  display: block;
  max-width: 831px;
}

.b-sustainability-header {
  margin: 50px 10px 0;
  text-align: center;
}
@media screen and (max-width: 767.9px) {
  .b-sustainability-header {
    margin: 60px 10px 50px;
  }
}
.b-sustainability-heading {
  line-height: 1;
  margin: 0 auto;
  max-width: 700px;
  text-transform: uppercase;
}
.b-content_page .b-sustainability-heading {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 18px;
}
@media screen and (max-width: 767.9px) {
  .b-content_page .b-sustainability-heading {
    font-size: 24px;
  }
}
.b-sustainability-subheading {
  font-size: 18px;
  margin: 20px 0;
}
@media screen and (max-width: 767.9px) {
  .b-sustainability-subheading {
    font-size: 16px;
  }
}
.b-sustainability-search {
  margin: 30px auto 0;
  position: relative;
}
@media screen and (min-width: 768px) {
  .b-sustainability-search {
    width: 350px;
  }
}
.b-sustainability-search input {
  background: #ffffff;
  border: 1px solid #a7a7a7;
  border-radius: 3px;
  box-sizing: border-box;
  height: 45px;
  padding: 0.9rem;
  width: 100%;
}
.b-sustainability-search input::placeholder {
  color: rgb(99, 99, 99);
}
.b-sustainability-search .b-search_input-submit {
  display: none;
}
.b-sustainability-search .b-search_input-submit.m-visible {
  color: #282727;
  cursor: pointer;
  display: block;
}
.b-sustainability-search .b-search_input-clear {
  border-radius: 4px;
  display: none;
  height: 40px;
  inset-inline-end: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
}
.b-sustainability-search .b-search_input-clear.m-visible {
  display: block;
}
.b-sustainability-search .b-search_input-clear:hover {
  color: #282727;
}
.b-sustainability-wrapper {
  background-color: #ddd;
  border: 1px solid #ccc;
  margin: 50px auto 15px;
  max-width: 1000px;
  overflow: auto;
}
@media screen and (max-width: 767.9px) {
  .b-sustainability-wrapper {
    margin-top: 60px;
    max-width: 350px;
    overflow: hidden;
  }
}
.b-sustainability-wrapper table {
  background: #ffffff;
  border-collapse: separate;
  overflow-x: scroll;
  table-layout: fixed;
  width: 100%;
}
.b-sustainability-wrapper td,
.b-sustainability-wrapper th {
  border: 0.5px solid #ccc;
}
.b-sustainability-wrapper td {
  padding: 5px;
}
.b-sustainability-wrapper th {
  background-color: #f6f6f6;
  border-bottom: 2px solid #1a1919;
  font-weight: 600;
  padding: 12px;
  text-align: center;
  vertical-align: middle;
}
.b-sustainability-wrapper .fixed-td {
  background-color: #ffffff;
  font-weight: 500;
  left: 0;
  position: sticky;
  width: 120px;
  z-index: 2;
}
.b-sustainability-wrapper .fixed-td-2 {
  left: 120px;
  width: 200px;
}
.b-sustainability-wrapper .fixed-td-2 .b-sustainability-mobile_link {
  color: #282727;
  display: block;
  padding: 2px 20px;
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
}
@media screen and (min-width: 768px) {
  .b-sustainability-wrapper .fixed-td-2 .b-sustainability-mobile_link {
    display: none;
  }
}
.b-sustainability-wrapper .fixed-hd {
  position: sticky;
  top: 0;
  z-index: 1;
}
.b-sustainability-wrapper .left-top-td {
  background: #f6f6f6;
  font-weight: 700;
  width: 120px;
  z-index: 2;
}
.b-sustainability-wrapper .left-top-td_2 {
  font-weight: 700;
  left: 120px;
  width: 200px;
}
.b-sustainability-wrapper .scrollable-td {
  width: 120px;
}
@media screen and (max-width: 767.9px) {
  .b-sustainability-wrapper .scrollable-td {
    display: none;
  }
}
.b-sustainability-pagination {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
.b-sustainability-pagination_arrow {
  align-items: center;
  border: 1px solid;
  border-radius: 4px;
  color: #282727;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 700;
  height: 40px;
  justify-content: center;
  padding: 8px 0;
  text-decoration: none;
  text-transform: uppercase;
  width: 100px;
}
.b-sustainability-pagination_arrow.m-disabled {
  border-color: #a7a7a7;
  color: #a7a7a7;
  cursor: default;
  pointer-events: none;
}
.b-sustainability-pagination_arrow_left {
  margin-right: 35px;
}
.b-sustainability-pagination_arrow_right {
  margin-left: 35px;
}
.b-sustainability-pagination_page {
  color: #60606a;
  font-size: 13px;
}
.b-sustainability-noresult {
  margin: 70px 0 35px;
}
.b-sustainability-noresult_heading {
  text-align: center;
  text-transform: uppercase;
}
.b-content_page .b-sustainability-noresult_heading {
  font-size: 20px;
}
.b-sustainability-noresult_subheading {
  text-align: center;
}
.b-content_page .b-sustainability-noresult_subheading {
  font-size: 18px;
  margin-bottom: 35px;
}
.b-sustainability-noresult_wrapper {
  border: 1px solid #e3e3e5;
  border-radius: 3px;
  margin: 0 auto;
  max-width: 380px;
  padding: 15px;
}
.b-sustainability-noresult_price {
  font-size: 35px;
  font-weight: 700;
}
.b-sustainability-noresult_subtitle {
  margin: 16px 0;
}
.b-sustainability-noresult_subtitle span {
  text-decoration: underline;
}
.b-sustainability-noresult_item {
  color: #636363;
}
.b-sustainability-noresult_item span {
  border: 1px solid #d01d1b;
  border-radius: 2px;
  display: inline-block;
}
.b-sustainability-mobile_heading {
  margin: 30px 0;
  text-transform: uppercase;
}
@media screen and (max-width: 767.9px) {
  .b-content_page .b-sustainability-mobile_heading {
    font-size: 24px;
  }
}
.b-sustainability-product_cell {
  border-bottom: 1px solid #ccc;
  display: flex;
  font-size: 15px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 5px;
}
.b-sustainability-product_cell_heading {
  font-weight: 700;
  width: 60%;
}
.b-sustainability-product_cell_item {
  align-items: flex-end;
  display: flex;
  justify-content: flex-end;
  width: 40%;
}
.b-sustainability-button {
  margin-top: 20px;
  width: 100%;
}

/*md

# b-accordion

## Attributes

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

## Simple accordion example

```html_example
<div
    data-id="descriptions"
    data-widget="accordion"
    data-allow-toggle="false"
    data-open-first="true"
    data-allow-multiple="false"
    class="b-accordion"
>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="product-details-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span class="b-heading_5">Title 1</span>
				<span class="b-icon_accordion" aria-hidden="true"></span>
			</button>
		</h2>
		<div
			id="product-details"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				<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
				</p>
				</br>
				<p>
					More from <a href="#" class="b-link">Arizona</a>
				</p>
				</br>
				<p class="b-text_micro_regular">
					Item ID: 8018435
				</p>
				</br>
				<p>
					<a href="#" class="b-link">Label</a>
				</p>
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span class="b-heading_5">Title 2</span>
				<span class="b-icon_accordion" aria-hidden="true"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for second item
			</div>
		</div>
	</section>
	<section
		data-widget="accordionItem"
		data-widget-event-closeallitems="closeItems"
		data-widget-event-accordionitemupdate="updateFocusedItem"
		class="b-accordion-item"
	>
		<h2>
			<button
				id="delivery-and-returns-btn"
				data-ref="accordionItemBtn"
				data-event-click.prevent="togglePanel"
				data-event-keydown="handleKeydown"
				data-event-focus="handleFocus"
				class="b-accordion-button"
				type="button"
			>
				<span class="b-heading_5">Title 3</span>
				<span class="b-icon_accordion" aria-hidden="true"></span>
			</button>
		</h2>
		<div
			id="delivery-and-returns"
			data-ref="accordionItemPanel"
			class="b-accordion-content"
		>
			<div class="b-accordion-content_inner" data-ref="accordionItemPanelInner">
				Content for third item
			</div>
		</div>
	</section>
</div>
```

## Accordion with multiple open items

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

## Init accordion on sm, md & lg devices

### Attributes

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

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

## Customization by SCSS

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

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

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

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

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

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

	&-content_inner {
		@include g-accordion(_content_inner);
	}
}
```
*/
.b-accordion {
  box-shadow: 0 -1px 0 0 #d2d1d4;
}
.b-accordion.m-profile {
  max-width: 700px;
}
.b-accordion-item {
  box-shadow: 0 1px 0 0 #d2d1d4;
}
.b-accordion-button {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03;
  align-items: center;
  background: none;
  border: none;
  color: #282727;
  cursor: pointer;
  display: flex;
  line-height: 24px;
  padding: 16px 0;
  text-align: start;
  width: 100%;
}
html[dir=rtl] .b-accordion-button {
  letter-spacing: 0;
}
.b-accordion-button:hover {
  color: #282727;
}
.b-accordion-content {
  display: none;
  overflow: hidden;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: height;
}
.b-accordion-content[aria-hidden=false], .b-accordion-item:not([data-initialized="1"]) .b-accordion-content {
  display: block;
}
.b-accordion-content_inner {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #282727;
  overflow: hidden;
  padding: 0 16px 20px 0;
}
html[dir=rtl] .b-accordion-content_inner {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-accordion-content_inner, .b-dialog.m-care_essentials-product .b-accordion-content_inner {
  letter-spacing: normal;
}
.b-accordion.m-profile .b-accordion-content_inner {
  padding-inline: 0;
}
.b-accordion.m-employee-discount {
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  box-shadow: none;
  margin-top: 20px;
  max-width: 704px;
  padding: 0 20px;
}
.b-accordion.m-employee-discount .b-accordion-content_inner {
  font-size: 14px;
  padding-bottom: 24px;
}
.b-accordion.m-employee-discount .b-accordion-content_inner h5 {
  padding-bottom: 20px;
}
.b-accordion.m-employee-discount .b-accordion-content_inner .benefit-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.b-accordion.m-employee-discount .b-accordion-content_inner .benefit-row p,
.b-accordion.m-employee-discount .b-accordion-content_inner .benefit-row span {
  font-size: 14px;
  margin: 0;
  text-align: right;
}

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

.b-icon_accordion {
  align-self: self-start;
  display: block;
  flex-shrink: 0;
  height: 24px;
  margin-inline-start: auto;
  position: relative;
  width: 24px;
}
.b-icon_accordion::after, .b-icon_accordion::before {
  background-size: cover;
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}
.b-icon_accordion::before {
  background: url("./images/icons/plus.svg") no-repeat;
}
[aria-expanded=true] ~ .b-icon_accordion::before, [aria-expanded=true] .b-icon_accordion::before {
  display: none;
}
[aria-expanded=false] ~ .b-icon_accordion::before, [aria-expanded=false] .b-icon_accordion::before {
  display: block;
}
.b-icon_accordion::after {
  background: url("./images/icons/minus.svg") no-repeat;
}
[aria-expanded=true] ~ .b-icon_accordion::after, [aria-expanded=true] .b-icon_accordion::after {
  display: block;
}
[aria-expanded=false] ~ .b-icon_accordion::after, [aria-expanded=false] .b-icon_accordion::after {
  display: none;
}
.b-icon_accordion.m-inverted::before {
  left: auto;
  right: 0;
}
.b-icon_accordion.m-inverted::after {
  left: 0;
  right: auto;
}

/*md

# b-message

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

TBD

*/
.b-message {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  background-color: #ebedf6;
  border: 1px solid #001489;
  border-radius: 4px;
  margin: 0 auto;
  align-items: center;
  color: #282727;
  cursor: default;
  display: flex;
  padding: 14.5px 16px;
}
html[dir=rtl] .b-message {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-message, .b-dialog.m-care_essentials-product .b-message {
  letter-spacing: normal;
}
.b-message::before {
  content: url("./images/icons/info.svg");
  height: 24px;
  margin-bottom: auto;
  margin-inline-end: 12px;
  width: 24px;
}
.b-message:last-child {
  margin-bottom: 0;
}
.b-message.m-small {
  padding: 4px 20px;
}
.b-message.m-error {
  background-color: #fbeded;
  border-color: #d01d1b;
  visibility: visible;
}
.b-message.m-error::before {
  content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 2.79995C6.91918 2.79995 2.8002 6.91893 2.8002 12C2.8002 17.081 6.91918 21.2 12.0002 21.2C17.0812 21.2 21.2002 17.081 21.2002 12C21.2002 6.91893 17.0812 2.79995 12.0002 2.79995ZM1.2002 12C1.2002 6.03528 6.03552 1.19995 12.0002 1.19995C17.9649 1.19995 22.8002 6.03528 22.8002 12C22.8002 17.9646 17.9649 22.7999 12.0002 22.7999C6.03552 22.7999 1.2002 17.9646 1.2002 12Z' fill='%23d01d1b'/%3E%3Cpath d='M12.025 18.65C11.45 18.65 11 18.2 11 17.625C11 17.05 11.45 16.6 12.025 16.6C12.575 16.6 13.05 17.083 13.05 17.625C13.05 18.192 12.6 18.65 12.025 18.65Z' fill='%23d01d1b'/%3E%3Cpath d='M11.9932 14.317C11.5352 14.317 11.1602 13.942 11.1602 13.484V5.63403C11.1602 5.17603 11.5352 4.80103 11.9932 4.80103C12.4512 4.80103 12.8262 5.17603 12.8262 5.63403V13.484C12.8262 13.942 12.4512 14.317 11.9932 14.317Z' fill='%23d01d1b'/%3E%3C/svg%3E%0A");
}
.b-login_register.m-mini .b-message.m-error {
  margin-top: 32px;
}
.b-form.m-checkout_billing > .b-message.m-error {
  margin: 12px 0 32px;
}
.b-message.m-success {
  background-color: #ebf6eb;
  border-color: #008a00;
  visibility: visible;
}
.b-message.m-success::before {
  content: url("./images/icons/tick.svg");
}
.b-message.m-warning {
  background-color: #f9f2eb;
  border-color: #b36200;
  visibility: visible;
}
.b-message.m-warning::before {
  content: url("./images/icons/warning.svg");
}
.b-message.m-bonus {
  background-color: #ebf6eb;
  border-color: #008a00;
  visibility: visible;
  justify-content: center;
  padding-block: 3px;
}
.b-message.m-bonus::before {
  content: url("./images/icons/tick.svg");
  display: none;
}
.b-message.m-fit-guide {
  padding: 12px 16px;
}
.b-message.m-tip {
  margin-bottom: 20px;
}
.b-message.m-tip::before {
  content: url("./images/icons/tip.svg");
}
.b-message.m-info {
  background: none;
  border: none;
  padding: 0;
}
.b-message.m-info::before {
  background: url("./images/icons/info.svg") no-repeat;
  background-size: contain;
  color: #282727;
  content: "";
  filter: invert(4%) sepia(2%) saturate(23%) hue-rotate(314deg) brightness(99%) contrast(86%);
  height: 16px;
  margin-inline-end: 8px;
  min-width: 16px;
  width: 16px;
}
.b-message.m-size-info, .b-message.m-gift-info {
  background-color: #ebedf6;
  border-color: #023f85;
  border-radius: 3px;
  color: #023f85;
  margin-top: 25px;
}
.b-message.m-gift-info {
  margin-bottom: 20px;
}
.b-message.m-present, .b-message.m-return, .b-message.m-new, .b-message.m-membership_info {
  width: 100%;
}
.b-message.m-present::before, .b-message.m-return::before, .b-message.m-new::before, .b-message.m-membership_info::before {
  content: url("./images/icons/membership-present.svg");
  min-width: 24px;
}
.b-message.m-return::before {
  content: url("./images/icons/returned.svg");
}
.b-message.m-new::before {
  content: url("./images/icons/announcement.svg");
}
.b-message.m-membership_info::before {
  content: url("./images/icons/membership-info.svg");
}
.b-message.m-top_margin {
  margin-top: 24px;
}
.b-message.m-double_margin {
  margin-bottom: 40px;
}
.b-message.m-order_confirmation {
  font-size: 16px;
  font-weight: 500;
  margin-top: 28px;
}
.b-message.m-no_bg {
  background: none;
  color: #282727;
  font-weight: 500;
  text-align: start;
}
.b-cart_product.m-gift .b-message.m-no_bg, .b-product_line.m-bonus .b-message.m-no_bg {
  border: none;
  padding: 0;
}
.b-cart_product.m-gift .b-message.m-no_bg::before, .b-product_line.m-bonus .b-message.m-no_bg::before {
  content: url("./images/icons/gift.svg");
  margin-inline-end: 4px;
}
@media screen and (min-width: 1440px) {
  .b-cart_product.m-gift:not(.m-gift_order_level) .b-message.m-no_bg {
    margin-inline-start: 48px;
  }
}
.b-cart_product.m-gift:not(.m-gift_order_level) .b-message.m-no_bg.m-checkout_summary {
  margin-inline-start: 0;
}
.b-cart_product.m-gift.m-gift_order_level .b-message.m-no_bg {
  border-top: 1px solid #d2d1d4;
  padding-top: 24px;
}
.b-cart_product.m-gift.m-gift_order_level .b-message.m-no_bg.m-checkout_summary {
  padding-top: 20px;
}
.b-message_disclaimer {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}
.b-message.m-full_width {
  width: 100%;
}
.b-message-link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.b-message-link.m-disabled::after, .b-message-link:disabled::after, .b-message-link[disabled]::after {
  background: #898992;
}
.b-message-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-message-link:hover::after, .b-message-link:active::after {
  transform: scaleX(0);
}
.b-message-link.m-disabled, .b-message-link:disabled, .b-message-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-message-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-message-link, .b-dialog.m-care_essentials-product .b-message-link {
  letter-spacing: normal;
}
.b-message + .b-message,
.b-message + .b-promotion {
  margin-top: 8px;
}

/*md

# b-drawer

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

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

```html_example
<div>
	<button class="b-button m-outline"
			type="button"
			data-widget="drawerDialogToggle"
			data-event-click="showDrawerDialogToggle"
	>
		Show drawer
	</button>
</div>
<div class="b-drawer m-right" data-widget="drawerDialog" data-ref="container" data-disable-rendering="true" data-classes-loading="m-loading_long">
    <div class="b-drawer-container" data-ref="dialog" role="dialog" aria-modal="true">
        <div class="b-drawer-inner">
            <div class="b-drawer-header">
                <h2 class="b-drawer-title" data-ref="title">
                Drawer Title
                </h2>
                <button class="b-drawer-close" title="Close" aria-label="Close" type="button" data-dismiss="modal" data-event-click.prevent="cancel" data-ref="firstFocusElement" data-tau="dialog_close">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path fill-rule="evenodd" clip-rule="evenodd" d="M5.14131 17.7275C4.82889 18.0399 4.8289 18.5464 5.14131 18.8589C5.45373 19.1713 5.96027 19.1713 6.27269 18.8589L12.0002 13.1313L17.7279 18.8589C18.0403 19.1714 18.5468 19.1714 18.8592 18.8589C19.1717 18.5465 19.1717 18.04 18.8592 17.7276L13.1316 11.9999L18.8592 6.27233C19.1716 5.95991 19.1716 5.45338 18.8592 5.14096C18.5468 4.82854 18.0403 4.82854 17.7278 5.14096L12.0002 10.8686L6.27287 5.14121C5.96045 4.82879 5.45392 4.82879 5.1415 5.14121C4.82908 5.45363 4.82908 5.96016 5.1415 6.27258L10.8689 11.9999L5.14131 17.7275Z" fill="#282727"/>
					</svg>
                </button>
            </div>
            <div class="b-drawer-content" data-ref="content">
                <p class="b-text_small_regular">
					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
					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
				</p>
				<br>
				<p class="b-text_small_regular">
					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
					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
				</p>
				<br>
				<p class="b-text_small_regular">
					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
					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
				</p>
				<br>
				<form action="" class="b-form">
					<div class="b-form_field">
						<input type="text" class="b-input" placeholder="Label">
					</div>
					<div class="b-form_field">
						<div class="b-select">
							<select data-ref="field" class="b-select-input m-valid" id="" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
								<option value="US" data-id="US" selected="">United States</option>
								<option value="CA" data-id="CA">Canada</option>
							</select>
							<svg aria-hidden="true" class="b-select-icon" width="10" height="6" focusable="false">
								<use href="#arrow-down-small"></use>
							</svg>
						</div>
					</div>
					<div class="b-form_field">
						<div class="b-form_actions">
							<button type="submit" class="b-button m-secondary m-width_full">
								Button
							</button>
						</div>
					</div>
					<button type="submit" class="b-button m-link">
						Label
					</button>
				</form>
				<br>
				<p class="b-text_small_regular">
					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
					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
				</p>
				<br>
				<p class="b-text_small_regular">
					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
					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
				</p>
				<br>
				<br>
            </div>
        </div>
    </div>
</div>
```
*/
.b-drawer {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, background-color;
  visibility: hidden;
  z-index: 22;
  overflow: hidden;
}
.b-drawer:not(.m-initialized) {
  transition: none !important;
}
.b-drawer.m-opened, .b-drawer.m-active {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  visibility: visible;
}
.b-drawer[hidden] {
  display: block !important;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-fit_guide, .b-drawer.m-size_guide, .b-drawer.m-width_guide {
    align-items: flex-end;
  }
}
.b-drawer:not(.m-initialized) .b-drawer-container {
  transition: none !important;
}
.b-drawer-container {
  border-radius: 4px;
}
.b-drawer.m-left .b-drawer-container {
  background-color: #ffffff;
  color: #282727;
  min-height: 100vh;
  position: fixed;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 22;
  left: 0;
  top: 0;
  transform: translateX(-100%);
}
@media screen and (min-width: 768px) {
  .b-drawer.m-left .b-drawer-container {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    max-width: 400px;
    top: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-left .b-drawer-container {
    transform: translateY(100%);
  }
}
.b-drawer.m-left .b-drawer-container.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.b-drawer.m-right .b-drawer-container {
  background-color: #ffffff;
  color: #282727;
  min-height: 100vh;
  position: fixed;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 22;
  right: 0;
  top: 0;
  transform: translateX(100%);
}
@media screen and (min-width: 768px) {
  .b-drawer.m-right .b-drawer-container {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    max-width: 400px;
    top: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-right .b-drawer-container {
    transform: translateY(100%);
  }
}
.b-drawer.m-right .b-drawer-container.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.b-drawer.m-top .b-drawer-container {
  background-color: #ffffff;
  color: #282727;
  min-height: 100vh;
  position: fixed;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 22;
}
@media screen and (min-width: 768px) {
  .b-drawer.m-top .b-drawer-container {
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    max-width: 400px;
    top: 0;
  }
}
.b-drawer.m-top .b-drawer-container.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
  z-index: 1;
}
.b-drawer.m-top .b-drawer-container.m-active {
  transform: translateX(0);
  visibility: visible;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-top .b-drawer-container.m-active {
    transform: translateY(0);
  }
}
.b-drawer.m-left .b-drawer-container.m-active, .b-drawer.m-right .b-drawer-container.m-active {
  transform: translateX(0);
  visibility: visible;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-left .b-drawer-container.m-active, .b-drawer.m-right .b-drawer-container.m-active {
    transform: translateY(0);
  }
}
@media screen and (min-width: 768px) {
  .b-drawer.m-left .b-drawer-container.m-active, .b-drawer.m-right .b-drawer-container.m-active {
    border-radius: 0.1px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-left.m-menu_dialog .b-drawer-container {
    transform: translateX(-100%);
  }
  .b-drawer.m-right.m-menu_dialog .b-drawer-container {
    transform: translateX(100%);
  }
  .b-drawer.m-left.m-menu_dialog .b-drawer-container.m-active, .b-drawer.m-right.m-menu_dialog .b-drawer-container.m-active {
    bottom: auto;
    min-height: 100vh;
    top: 0;
    transform: translateX(0);
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
    transition-property: visibility, transform;
  }
}
.b-drawer.m-hamburger_menu .b-drawer-container {
  min-height: 100vh;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-fit_guide .b-drawer-container, .b-drawer.m-size_guide .b-drawer-container, .b-drawer.m-width_guide .b-drawer-container {
    min-height: auto;
    top: auto;
  }
}
.b-drawer-header_inner {
  align-items: center;
  display: flex;
  padding-inline-end: 8px;
}
.b-drawer-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 16px 24px;
}
@media screen and (min-width: 768px) {
  .b-drawer-header {
    padding: 0 24px 24px;
  }
}
.b-drawer.m-hamburger_menu .b-drawer-header {
  border-bottom: 1px solid #d2d1d4;
  padding-bottom: 8px;
}
.b-drawer.m-reset_password .b-drawer-header {
  padding-bottom: 24px;
}
.m-care_essentials .b-drawer-header {
  padding-bottom: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .m-care_essentials .b-drawer-header {
    padding: 0 24px 24px;
  }
}
.b-drawer.m-hamburger_menu.m-country_selector .b-drawer-header, .b-drawer.m-hamburger_menu.m-country_selector_sl .b-drawer-header {
  padding-block: 15px 14px;
}
@media screen and (min-width: 768px) {
  .b-drawer.m-hamburger_menu.m-country_selector .b-drawer-header, .b-drawer.m-hamburger_menu.m-country_selector_sl .b-drawer-header {
    padding-block: 22px 16px;
  }
}
.m-care_essentials .b-drawer.m-hamburger_menu.m-country_selector .b-drawer-header, .m-care_essentials .b-drawer.m-hamburger_menu.m-country_selector_sl .b-drawer-header {
  padding-block: 15px 14px;
}
.b-drawer.m-quick_buy .b-drawer-header {
  padding: 0;
}
.b-drawer-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: 24px;
  margin-bottom: 0;
}
html[dir=rtl] .b-drawer-title {
  letter-spacing: 0;
}
.m-care_essentials .b-drawer-title {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: normal;
  line-height: normal;
}
@media screen and (max-width: 1179.9px) {
  .m-care_essentials .b-drawer-title {
    font-size: 20px;
    line-height: 1.28;
  }
}
.b-drawer.m-hamburger_menu .b-drawer-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 20px;
  line-height: normal;
}
html[dir=rtl] .b-drawer.m-hamburger_menu .b-drawer-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-drawer.m-hamburger_menu .b-drawer-title, .b-dialog.m-care_essentials-product .b-drawer.m-hamburger_menu .b-drawer-title {
  letter-spacing: normal;
}
.b-drawer.m-reset_password .b-drawer-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-drawer.m-reset_password .b-drawer-title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-drawer.m-reset_password .b-drawer-title {
  letter-spacing: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-drawer.m-reset_password .b-drawer-title {
    font-size: 28px;
  }
}
.b-drawer-inner {
  display: flex;
  flex-flow: column;
  max-height: 100dvh;
  padding-top: 24px;
}
@media screen and (min-width: 768px) {
  .b-drawer-inner {
    padding-top: 32px;
  }
}
.b-drawer.m-hamburger_menu .b-drawer-inner {
  padding-top: 15px;
}
.b-drawer.m-hamburger_menu.m-country_selector .b-drawer-inner, .b-drawer.m-hamburger_menu.m-country_selector_sl .b-drawer-inner {
  padding-top: 0;
}
.b-drawer.m-quick_buy .b-drawer-inner {
  padding-top: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-drawer.m-fit_guide .b-drawer-inner, .b-drawer.m-width_guide .b-drawer-inner, .b-drawer.m-size_guide .b-drawer-inner {
    max-height: 100dvh;
  }
}
.b-drawer-body {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
html[dir=rtl] .b-drawer-body {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-drawer-body, .b-dialog.m-care_essentials-product .b-drawer-body {
  letter-spacing: normal;
}
.m-care_essentials .b-drawer-body {
  letter-spacing: normal;
  font-weight: 300;
  color: #282727;
}
.m-care_essentials .b-drawer.m-hamburger_menu .b-drawer-body {
  font-weight: 400;
}
.b-drawer.m-reset_password .b-drawer-body {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 20px;
}
html[dir=rtl] .b-drawer.m-reset_password .b-drawer-body {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-drawer.m-reset_password .b-drawer-body, .b-dialog.m-care_essentials-product .b-drawer.m-reset_password .b-drawer-body {
  letter-spacing: normal;
}
.b-drawer-close {
  align-items: center;
  align-self: flex-start;
  background: none;
  border: none;
  color: #282727;
  cursor: pointer;
  display: flex;
  height: 30px;
}
.b-drawer-close svg {
  height: 24px;
  width: 24px;
}
.b-drawer-close.m-newsletters {
  inset-inline-end: 20px;
  position: absolute;
  top: -5px;
}
@media screen and (max-width: 1179.9px) {
  .b-drawer-close.m-newsletters {
    inset-inline-end: 0;
  }
}
.b-drawer.m-quick_buy .b-drawer-close {
  background-color: #ffffff;
  border-radius: 4px;
  height: 32px;
  inset-inline-end: 39px;
  justify-content: center;
  position: absolute;
  top: 24px;
  width: 32px;
  z-index: 1;
}
.b-drawer-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 16px 24px;
}
@media screen and (min-width: 768px) {
  .b-drawer-content {
    padding: 0 24px 24px;
  }
}
.b-drawer.m-hamburger_menu .b-drawer-content {
  padding-top: 25px;
}
.b-drawer.m-reset_password .b-drawer-content {
  padding-bottom: 32px;
}
.b-drawer.m-quick_buy .b-drawer-content {
  padding-inline: 0;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .m-care_essentials .b-drawer-content {
    padding: 0 24px 24px;
  }
}
.b-drawer .b-menu_panel-back {
  display: none;
  height: 24px;
  margin-inline-end: 8px;
  width: 25px;
}
.m-care_essentials .b-drawer .b-form_field-label {
  letter-spacing: normal;
  font-weight: 300;
}
.b-drawer.m-country_selector .b-select-input_as_text,
.b-drawer.m-country_selector .b-select-input {
  box-shadow: inset 0 0 0 1px #a4a4aa;
  text-transform: capitalize;
}
.b-drawer.m-country_selector .b-select-input_as_text {
  padding: 25px 0 0 15px;
  text-transform: capitalize;
}
.b-drawer.m-country_selector .b-form_field {
  margin-bottom: 16px;
}
.b-drawer.m-country_selector .b-form_actions {
  padding-top: 8px;
}
.b-drawer.m-country_selector .b-drawer-title {
  line-height: normal;
}
.b-drawer.m-country_selector .b-drawer-body {
  margin-bottom: 24px;
}
.b-drawer.m-country_selector .b-menu_panel-back {
  margin-inline-end: 12px;
  min-height: 30px;
  min-width: 24px;
}
.b-drawer.m-cart_overlay .b-drawer-content, .b-drawer.m-bopis_overlay .b-drawer-content {
  display: none;
}
.b-drawer.m-hamburger_menu .b-menu_panel-back {
  display: block;
}
.b-drawer.m-bopis_overlay .b-drawer-content {
  display: none;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-address_verification .b-drawer-container {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    bottom: 0;
    min-height: auto;
    top: auto;
  }
}
.b-drawer.m-address_verification .b-drawer-header {
  padding-bottom: 24px;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-address_verification .b-drawer-content {
    padding-bottom: 32px;
  }
}
@media screen and (min-width: 1180px) {
  .b-drawer.m-store_availability .b-drawer-header,
  .b-drawer.m-store_availability .b-drawer-content {
    padding-inline: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-cart_overlay .b-drawer-container.m-active {
    bottom: 0;
    min-height: auto;
    top: auto;
    transition: none;
  }
}
.b-drawer.m-cart_overlay .b-drawer-header {
  align-items: flex-end;
}
@media screen and (min-width: 768px) {
  .b-drawer.m-cart_overlay .b-drawer-header {
    padding-inline: 32px;
  }
}
.b-drawer.m-cart_overlay .b-drawer-header_inner {
  padding-inline-end: 5px;
}
.b-drawer.m-cart_overlay:has(.b-drawer-content > .b-promotion) .b-product_line.m-add_to_cart_overlay {
  padding-top: 16px;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active {
  bottom: auto;
  height: 100vh;
  max-width: 404px;
  min-height: 0;
  top: 0;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active .b-drawer-content {
  max-height: calc(100vh - 60px);
  scrollbar-gutter: stable;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active .b-drawer-content::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active .b-drawer-content::-webkit-scrollbar-thumb {
  background: #282727;
  border-radius: 11px;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active .b-drawer-content::-webkit-scrollbar-track {
  background: #ebebea;
  border-radius: 11px;
}
.b-drawer.m-country_selector_sl .b-drawer-container.m-active .b-drawer-inner {
  height: 100dvh;
}
@media screen and (max-width: 767.9px) {
  .b-drawer.m-footer {
    overflow: hidden;
  }
  .b-drawer.m-footer .b-drawer-container {
    bottom: 0;
    min-height: 378px;
    top: auto;
  }
  .b-drawer.m-footer.m-reset_password .b-drawer-container {
    min-height: 229px;
  }
}
.b-drawer:has(.b-drawer.m-opened) > .b-drawer-container {
  bottom: auto;
  max-width: 400px;
  min-height: 100vh;
  top: 0;
}

/*md

# Form actions

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

This is building block for full-featured form component.

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

## Row align (by default)

This is default layout of the buttons

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

## `m-stack`

Show one button over another on all breakpoints

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

## `m-stack_mobile`

Show one button over another only on small breakpoints

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

*/
.b-form_actions {
  display: flex;
  width: 100%;
}
.b-form_actions-button_first, .b-form_actions-button_second {
  width: 100%;
}
.b-form_actions-button_first + .b-form_actions-button_second {
  margin-inline-start: 20px;
  width: auto;
}
.b-dialog .b-form_actions-button_first + .b-form_actions-button_second {
  width: 100%;
}
.b-form_actions.m-stack {
  flex-flow: column;
}
.b-form_actions.m-stack .b-form_actions-button_first + .b-form_actions-button_second {
  margin: 16px 0 0;
}
@media screen and (max-width: 767.9px) {
  .b-form_actions.m-stack .b-form_actions-button_first + .b-form_actions-button_second {
    margin: 12px 0 0;
  }
  .b-form_actions.m-stack_mobile {
    flex-flow: column;
  }
  .b-form_actions.m-stack_mobile .b-form_actions-button_first + .b-form_actions-button_second {
    margin: 20px 0 0;
  }
}
.b-form_actions.m-top_margin {
  margin-top: 24px;
}
.b-form_field + .b-form_actions {
  padding-top: 4px;
}

.b-input {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #a4a4aa;
  color: #282727;
  cursor: text;
  padding: 19px 16px 0;
  transition: box-shadow ease-out;
  vertical-align: baseline;
  height: 48px;
  width: 100%;
}
html[dir=rtl] .b-input {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-input, .b-dialog.m-care_essentials-product .b-input {
  letter-spacing: normal;
}
@media not all and (pointer: coarse) {
  .b-input:hover {
    box-shadow: inset 0 0 0 1px #282727;
  }
}
.b-input:active {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-input:active {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-input:focus {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-input:focus {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-input.m-disabled, .b-input:disabled, .b-input[disabled] {
  background: #f3f3f6;
  box-shadow: inset 0 0 0 1px #d2d1d4;
  color: #898992;
  opacity: 1;
}
.b-input.m-invalid {
  box-shadow: inset 0 0 0 1px #d01d1b;
}
html[dir=rtl] .b-input {
  direction: rtl;
}
@media screen and (max-width: 767.9px) {
  .b-input {
    font-size: 16px;
  }
}
.b-input.m-valid:not(.m-empty) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1998 12C21.1998 6.91893 17.0808 2.79995 11.9998 2.79995C6.91878 2.79995 2.7998 6.91893 2.7998 12C2.7998 17.081 6.91878 21.2 11.9998 21.2C17.0808 21.2 21.1998 17.081 21.1998 12ZM11.9998 1.19995C17.9645 1.19995 22.7998 6.03528 22.7998 12C22.7998 17.9646 17.9645 22.7999 11.9998 22.7999C6.03513 22.7999 1.19981 17.9646 1.19981 12C1.19981 6.03528 6.03513 1.19995 11.9998 1.19995Z' fill='%23008A00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0239 14.9876C10.046 15.0167 10.0702 15.0446 10.0967 15.0711C10.3931 15.3675 10.8642 15.3827 11.1785 15.1168C11.1976 15.101 11.2161 15.0841 11.2339 15.0662C11.2418 15.0584 11.2494 15.0505 11.2568 15.0424L16.3501 9.94918C16.6625 9.63676 16.6625 9.13023 16.3501 8.81781C16.0376 8.50539 15.5311 8.50539 15.2187 8.81781L10.6678 13.3687L8.57662 11.2775C8.2642 10.9651 7.75767 10.9651 7.44525 11.2775C7.13283 11.59 7.13283 12.0965 7.44525 12.4089L10.0239 14.9876Z' fill='%23008A00'/%3E%3C/svg%3E%0A");
  background-position: right 16px center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding-inline-end: 44px;
  padding-inline-start: 16px;
}
html[dir=rtl] .b-input.m-valid:not(.m-empty) {
  background-position: left 16px center;
}
.b-input.m-password:not(.m-empty) {
  background-position: right 45px center;
}
html[dir=rtl] .b-input.m-password:not(.m-empty) {
  background-position: left 45px center;
}
.b-input.m-strength {
  box-shadow: inset 0 0 0 2px #001489;
}
.b-form_field.m-muted .b-input {
  background: #f3f3f6;
  box-shadow: inset 0 0 0 1px #d2d1d4;
  cursor: default;
}
@media not all and (pointer: coarse) {
  .b-form_field.m-muted .b-input:hover {
    box-shadow: inset 0 0 0 1px #d2d1d4;
  }
}
.b-form_field.m-dark .b-input {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #d2d1d4;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-form_field.m-dark .b-input:hover {
    box-shadow: inset 0 0 0 1px #ffffff;
  }
}
.b-form_field.m-dark .b-input:active {
  box-shadow: inset 0 0 0 1.6px #ffffff;
}
.b-form_field.m-dark .b-input:focus {
  box-shadow: inset 0 0 0 1.6px #ffffff;
}
.b-form_field.m-dark .b-input.m-disabled, .b-form_field.m-dark .b-input:disabled, .b-form_field.m-dark .b-input[disabled] {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px #898992;
  color: #bbbbbf;
}
.b-form_field.m-dark .b-input.m-invalid {
  box-shadow: inset 0 0 0 1px #ff9d9d;
}
.b-form_field.m-dark .b-input.m-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1998 12C21.1998 6.91893 17.0808 2.79995 11.9998 2.79995C6.91878 2.79995 2.7998 6.91893 2.7998 12C2.7998 17.081 6.91878 21.2 11.9998 21.2C17.0808 21.2 21.1998 17.081 21.1998 12ZM11.9998 1.19995C17.9645 1.19995 22.7998 6.03528 22.7998 12C22.7998 17.9646 17.9645 22.7999 11.9998 22.7999C6.03513 22.7999 1.19981 17.9646 1.19981 12C1.19981 6.03528 6.03513 1.19995 11.9998 1.19995Z' fill='%2371D471'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0239 14.9876C10.046 15.0167 10.0702 15.0446 10.0967 15.0711C10.3931 15.3675 10.8642 15.3827 11.1785 15.1168C11.1976 15.101 11.2161 15.0841 11.2339 15.0662C11.2418 15.0584 11.2494 15.0505 11.2568 15.0424L16.3501 9.94918C16.6625 9.63676 16.6625 9.13023 16.3501 8.81781C16.0376 8.50539 15.5311 8.50539 15.2187 8.81781L10.6678 13.3687L8.57662 11.2775C8.2642 10.9651 7.75767 10.9651 7.44525 11.2775C7.13283 11.59 7.13283 12.0965 7.44525 12.4089L10.0239 14.9876Z' fill='%2371D471'/%3E%3C/svg%3E");
}
.b-form_field.m-quick_finder .b-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.5752 17.5744C17.8876 17.262 18.3941 17.262 18.7065 17.5744L22.0664 20.9348C22.3788 21.2472 22.3788 21.7538 22.0664 22.0662C21.7539 22.3786 21.2474 22.3785 20.935 22.0661L17.5751 18.7057C17.2627 18.3933 17.2627 17.8868 17.5752 17.5744Z' fill='%23282727'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1758 3.29995C6.37852 3.29995 3.3002 6.37828 3.3002 10.1756C3.3002 13.9729 6.37852 17.0512 10.1758 17.0512C13.9731 17.0512 17.0515 13.9729 17.0515 10.1756C17.0515 6.37828 13.9731 3.29995 10.1758 3.29995ZM1.7002 10.1756C1.7002 5.49462 5.49487 1.69995 10.1758 1.69995C14.8568 1.69995 18.6515 5.49462 18.6515 10.1756C18.6515 14.8566 14.8568 18.6512 10.1758 18.6512C5.49487 18.6512 1.7002 14.8566 1.7002 10.1756Z' fill='%23282727'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 24px;
  padding-right: 44px;
}

/*md

# Select

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

```html_example
<div class="b-form_field">
	<label class="b-form_field-label m-select" data-ref="label" for="select2">
		Please select
		<span class="b-form_field-required_mark" aria-hidden="true">*</span>
	</label>
	<div class="b-select">
		<select data-ref="field" class="b-select-input m-valid" id="select2" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
			<option value="US" data-id="US" selected="">United States</option>
			<option value="CA" data-id="CA">Canada</option>
		</select>
		<div class="b-select-icon_wrap" data-ref="icon">
			<svg aria-hidden="true" class="b-select-icon" width="18" height="10" focusable="false">
				<path fill="currentColor"
					d="M17.0655 0.684266C17.3779 0.996685 17.3779 1.50322 17.0655 1.81564L10.2726 8.60853C9.56965 9.31147 8.42996 9.31147 7.72701 8.60853L0.93412 1.81564C0.6217 1.50322 0.6217 0.996684 0.93412 0.684265C1.24654 0.371846 1.75307 0.371846 2.06549 0.684265L8.85838 7.47716C8.93649 7.55526 9.06312 7.55526 9.14123 7.47716L15.9341 0.684266C16.2465 0.371846 16.7531 0.371846 17.0655 0.684266Z" />
			</svg>
		</div>
	</div>
</div>
```

## Error State

```html_example
<div class="b-form_field">
	<label class="b-form_field-label m-select" data-ref="label" for="select1">
		Please select
		<span class="b-form_field-required_mark" aria-hidden="true">*</span>
	</label>
	<div class="b-select">
		<select data-ref="field" class="b-select-input m-invalid" id="select1" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate">
			<option value="" data-id="0">Select Country</option>
			<option value="US" data-id="1">United States</option>
			<option value="CA" data-id="2">Canada</option>
		</select>
		<div class="b-select-icon_wrap" data-ref="icon">
			<svg aria-hidden="true" class="b-select-icon" width="18" height="10" focusable="false">
				<path fill="currentColor"
					d="M17.0655 0.684266C17.3779 0.996685 17.3779 1.50322 17.0655 1.81564L10.2726 8.60853C9.56965 9.31147 8.42996 9.31147 7.72701 8.60853L0.93412 1.81564C0.6217 1.50322 0.6217 0.996684 0.93412 0.684265C1.24654 0.371846 1.75307 0.371846 2.06549 0.684265L8.85838 7.47716C8.93649 7.55526 9.06312 7.55526 9.14123 7.47716L15.9341 0.684266C16.2465 0.371846 16.7531 0.371846 17.0655 0.684266Z" />
			</svg>
		</div>
	</div>
	<div class="b-form_field-message" role="alert">This field is required</div>
</div>
```

## Disabled State

```html_example
<div class="b-form_field">
	<label class="b-form_field-label m-select m-disabled" data-ref="label" for="select1">
		Please select
		<span class="b-form_field-required_mark" aria-hidden="true">*</span>
	</label>
	<div class="b-select">
		<select data-ref="field" class="b-select-input" id="select1" name="" required="" value="" maxlength="2147483647" aria-required="true" data-event-change="onChange" data-tau="" aria-describedby="" data-event-blur="validate" disabled>
			<option value="" data-id="0">Select Country</option>
			<option value="US" data-id="1">United States</option>
			<option value="CA" data-id="2">Canada</option>
		</select>
		<div class="b-select-icon_wrap" data-ref="icon">
			<svg aria-hidden="true" class="b-select-icon" width="18" height="10" focusable="false">
				<path fill="currentColor"
					d="M17.0655 0.684266C17.3779 0.996685 17.3779 1.50322 17.0655 1.81564L10.2726 8.60853C9.56965 9.31147 8.42996 9.31147 7.72701 8.60853L0.93412 1.81564C0.6217 1.50322 0.6217 0.996684 0.93412 0.684265C1.24654 0.371846 1.75307 0.371846 2.06549 0.684265L8.85838 7.47716C8.93649 7.55526 9.06312 7.55526 9.14123 7.47716L15.9341 0.684266C16.2465 0.371846 16.7531 0.371846 17.0655 0.684266Z" />
			</svg>
		</div>
	</div>
</div>
```

*/
option {
  font-family: inherit;
  font-size: inherit;
}

.b-select {
  position: relative;
  width: 100%;
}
.b-select-input {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #a4a4aa;
  color: #282727;
  cursor: text;
  padding: 19px 16px 0;
  transition: box-shadow ease-out;
  vertical-align: baseline;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  height: 48px;
  outline: none;
  padding-inline-end: 36px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  width: 100%;
}
html[dir=rtl] .b-select-input {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-select-input, .b-dialog.m-care_essentials-product .b-select-input {
  letter-spacing: normal;
}
@media not all and (pointer: coarse) {
  .b-select-input:hover {
    box-shadow: inset 0 0 0 1px #282727;
  }
}
.b-select-input:active {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-select-input:active {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-select-input:focus {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-select-input:focus {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-select-input.m-disabled, .b-select-input:disabled, .b-select-input[disabled] {
  background: #f3f3f6;
  box-shadow: inset 0 0 0 1px #d2d1d4;
  color: #898992;
  opacity: 1;
}
.b-select-input.m-invalid {
  box-shadow: inset 0 0 0 1px #d01d1b;
}
.b-select-input.m-disabled, .b-select-input:disabled, .b-select-input[disabled] {
  cursor: default;
  opacity: 1;
  pointer-events: none;
}
.b-select-input.m-disabled + .b-select-icon_wrap, .b-select-input:disabled + .b-select-icon_wrap, .b-select-input[disabled] + .b-select-icon_wrap {
  color: #bbbbbf;
}
.b-select-input:focus ~ .b-select-icon_wrap svg {
  transform: translateY(-50%) rotateX(180deg);
}
.b-select-input:focus::-ms-value {
  background: transparent;
  color: #282727;
}
.b-select-input::-ms-expand {
  display: none;
}
.b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #282727;
}
.b-dialog.m-country_selector .b-select-input {
  box-shadow: inset 0 0 0 1px #898992;
  color: #494954;
  font-size: 14px;
  text-transform: capitalize;
}
.b-dialog.m-country_selector .b-select-input option {
  font-size: 16px;
  text-transform: capitalize;
}
.b-select-input_as_text {
  appearance: none;
  background: none;
  border: none;
  font-size: 16px;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-dialog.m-country_selector .b-select-input_as_text {
  color: #494954;
  font-size: 14px;
  padding: 0 36px 0 16px;
}
.b-select-input_as_text.m-input_as_text_disabled {
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(40, 39, 39, 0.3);
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  height: 48px;
  line-height: 18px;
  outline: none;
  padding: 0 36px 0 16px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  width: 100%;
}
.b-select-input_as_text.m-input_as_text_disabled:focus::-ms-value {
  background: transparent;
  color: #282727;
}
.b-select-input_as_text.m-input_as_text_disabled::-ms-expand {
  display: none;
}
.b-select-input_as_text.m-input_as_text_disabled:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #282727;
}
.b-select-input_as_text.m-input_as_text_disabled.m-invalid {
  background: transparent;
  box-shadow: inset 0 0 0 1px #d01d1b;
}
.b-select-input_as_text.m-input_as_text_disabled.m-disabled, .b-select-input_as_text.m-input_as_text_disabled[disabled] {
  box-shadow: inset 0 0 0 1px #a4a4aa;
  color: #a4a4aa;
  cursor: default;
  pointer-events: none;
}
.b-select-input_as_text.m-input_as_text_disabled.m-disabled + .b-select-icon_wrap, .b-select-input_as_text.m-input_as_text_disabled[disabled] + .b-select-icon_wrap {
  color: #a4a4aa;
}
.b-select-icon {
  bottom: 0;
  inset-inline-end: 16px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
}
.b-dialog.m-country_selector .b-select-icon {
  color: #494954;
}
.b-select.m-forward .b-select-icon {
  width: 24px;
}
html[dir=rtl] .b-select.m-forward .b-select-icon {
  margin-top: -12px;
  transform: scale(-1);
}

/*md

# Stepper

This component is a control for editing a numeric value with buttons for decrementing / incrementing.

## Default

```html_example

<div class="b-stepper">
	<div class="b-stepper-button m-left" role="button" tabindex="-1" aria-hidden="true" disabled="disabled">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M2.7002 12C2.7002 11.5582 3.05837 11.2 3.5002 11.2L20.5002 11.2C20.942 11.2 21.3002 11.5582 21.3002 12C21.3002 12.4418 20.942 12.8 20.5002 12.8L3.5002 12.8C3.05837 12.8 2.7002 12.4418 2.7002 12Z" fill="currentColor"></path>
		</svg>
	</div>
	<input id="quantity-1" class="b-stepper-input" type="text" inputmode="numeric" pattern="[0-9]*" data-ref="field" data-tau="product_quantity" data-event-input="handleInput" data-event-keydown="handleKeydown" data-event-change="handleChange" data-event-blur="handleBlur" value="1">
	<div class="b-stepper-button m-right" role="button" tabindex="-1" aria-hidden="true">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1997 20.5C11.1997 20.9418 11.5579 21.3 11.9997 21.3C12.4415 21.3 12.7997 20.9418 12.7997 20.5V12.8H20.5002C20.942 12.8 21.3002 12.4419 21.3002 12C21.3002 11.5582 20.942 11.2 20.5002 11.2H12.7997V3.50001C12.7997 3.05818 12.4415 2.70001 11.9997 2.70001C11.5579 2.70001 11.1997 3.05818 11.1997 3.50001V11.2H3.5002C3.05837 11.2 2.7002 11.5582 2.7002 12C2.7002 12.4419 3.05837 12.8 3.5002 12.8H11.1997V20.5Z" fill="currentColor"></path>
		</svg>
	</div>
</div>

```

## Disabled state

```html_example
<div class="b-stepper m-disabled">
	<div class="b-stepper-button m-left" role="button" tabindex="-1" aria-hidden="true" disabled="disabled">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M2.7002 12C2.7002 11.5582 3.05837 11.2 3.5002 11.2L20.5002 11.2C20.942 11.2 21.3002 11.5582 21.3002 12C21.3002 12.4418 20.942 12.8 20.5002 12.8L3.5002 12.8C3.05837 12.8 2.7002 12.4418 2.7002 12Z" fill="currentColor"></path>
		</svg>
	</div>
	<input id="quantity-1" class="b-stepper-input" type="text" inputmode="numeric" pattern="[0-9]*" data-ref="field" data-tau="product_quantity" data-event-input="handleInput" data-event-keydown="handleKeydown" data-event-change="handleChange" data-event-blur="handleBlur"  disabled="disabled" value="1">
	<div class="b-stepper-button m-right" role="button" tabindex="-1" aria-hidden="true" disabled="disabled">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1997 20.5C11.1997 20.9418 11.5579 21.3 11.9997 21.3C12.4415 21.3 12.7997 20.9418 12.7997 20.5V12.8H20.5002C20.942 12.8 21.3002 12.4419 21.3002 12C21.3002 11.5582 20.942 11.2 20.5002 11.2H12.7997V3.50001C12.7997 3.05818 12.4415 2.70001 11.9997 2.70001C11.5579 2.70001 11.1997 3.05818 11.1997 3.50001V11.2H3.5002C3.05837 11.2 2.7002 11.5582 2.7002 12C2.7002 12.4419 3.05837 12.8 3.5002 12.8H11.1997V20.5Z" fill="currentColor"></path>
		</svg>
	</div>
</div>

```
## Error state

```html_example

<div class="b-stepper m-error">
	<div class="b-stepper-button m-left" role="button" tabindex="-1" aria-hidden="true" disabled="disabled">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M2.7002 12C2.7002 11.5582 3.05837 11.2 3.5002 11.2L20.5002 11.2C20.942 11.2 21.3002 11.5582 21.3002 12C21.3002 12.4418 20.942 12.8 20.5002 12.8L3.5002 12.8C3.05837 12.8 2.7002 12.4418 2.7002 12Z" fill="currentColor"></path>
		</svg>
	</div>
	<input id="quantity-1" class="b-stepper-input" type="text" inputmode="numeric" pattern="[0-9]*" data-ref="field" data-tau="product_quantity" data-event-input="handleInput" data-event-keydown="handleKeydown" data-event-change="handleChange" data-event-blur="handleBlur" value="1">
	<div class="b-stepper-button m-right" role="button" tabindex="-1" aria-hidden="true">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M11.1997 20.5C11.1997 20.9418 11.5579 21.3 11.9997 21.3C12.4415 21.3 12.7997 20.9418 12.7997 20.5V12.8H20.5002C20.942 12.8 21.3002 12.4419 21.3002 12C21.3002 11.5582 20.942 11.2 20.5002 11.2H12.7997V3.50001C12.7997 3.05818 12.4415 2.70001 11.9997 2.70001C11.5579 2.70001 11.1997 3.05818 11.1997 3.50001V11.2H3.5002C3.05837 11.2 2.7002 11.5582 2.7002 12C2.7002 12.4419 3.05837 12.8 3.5002 12.8H11.1997V20.5Z" fill="currentColor"></path>
		</svg>
	</div>
</div>
<div class="b-form_field-message" role="alert">This field is required</div>

```
*/
.b-stepper {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #a4a4aa;
  display: flex;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  width: 126px;
}
@media not all and (pointer: coarse) {
  .b-stepper:hover {
    box-shadow: inset 0 0 0 1px #282727;
  }
}
.b-stepper:active {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.b-stepper.m-disabled, .b-stepper:disabled, .b-stepper[disabled] {
  background-color: #f3f3f6;
  box-shadow: inset 0 0 0 1px #d2d1d4;
}
.b-stepper:focus {
  box-shadow: inset 0 0 0 1px #001489;
}
.b-stepper.m-error {
  box-shadow: inset 0 0 0 1px #d01d1b;
}
.b-stepper-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin: -1px;
  min-height: 42px;
  min-width: 42px;
  position: absolute;
  text-align: center;
  touch-action: manipulation;
  z-index: 2;
}
.b-stepper-button.m-left {
  justify-content: flex-end;
  left: 0;
}
html[dir=rtl] .b-stepper-button.m-left {
  left: auto;
  right: 0;
}
.b-stepper-button.m-right {
  justify-content: flex-start;
  right: 0;
}
html[dir=rtl] .b-stepper-button.m-right {
  left: 0;
  right: auto;
}
.b-stepper-button[disabled] {
  color: #bbbbbf;
  pointer-events: none;
}
.b-stepper-input {
  appearance: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin: -1px;
  min-height: 42px;
  min-width: 42px;
  padding: 0;
  position: relative;
  text-align: center;
  transition: ease-out 150ms;
  transition-property: border;
  width: 126px;
  z-index: 1;
}
.b-stepper-input.m-disabled, .b-stepper-input:disabled, .b-stepper-input[disabled] {
  background-color: #f3f3f6;
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  color: #898992;
  cursor: default;
  margin: 0;
  opacity: 1;
  -webkit-text-fill-color: #898992;
}

/*md

# Form field

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

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

# Input

Default input element

## Default

```html_example
	<div class="b-form_field" data-widget="inputText">
		<label class="b-form_field-label" for="input_email_1" data-ref="label" >
			Email
			<span class="b-form_field-required_mark" aria-hidden="true">
				*
			</span>
		</label>
		<input
			class="b-input"
			type="text"
			id="input_email_1"
			required=""
			value=""
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
		>
	</div>
```

## Invalid

```html_example
	<div class="b-form_field" data-widget="inputText">
		<label class="b-form_field-label" for="input_email_2" data-ref="label" >
			Email
			<span class="b-form_field-required_mark" aria-hidden="true">
				*
			</span>
		</label>
		<input
			class="b-input m-invalid"
			type="text"
			id="input_email_2"
			required=""
			value=""
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
		>
		<div class="b-form_field-message">This field is required</div>
	</div>
```

## Disabled

```html_example
	<div class="b-form_field">
		<label class="b-form_field-label m-disabled" for="input_emal_1" data-ref="label" >
			Email
			<span class="b-form_field-required_mark" aria-hidden="true">
				*
			</span>
		</label>
		<input
			class="b-input"
			type="text"
			id="input_emal_1"
			required=""
			value=""
			disabled
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
		>
	</div>
```

### On dark background

```html_example
<div style="background: #282727; padding: 30px;">
	<div class="b-form_field m-dark" data-widget="inputText">
		<label class="b-form_field-label" data-ref="label" for="input2">
			Enter Promo Code
			<span class="b-form_field-required_mark" aria-hidden="true">*</span>
		</label>
		<input
			class="b-input"
			type="text"
			id="input2"
			name="couponCode"
			required=""
			value=""
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
			>
	</div>
</div>
```

### On dark background error state

```html_example
<div style="background: #282727; padding: 30px;">
	<div class="b-form_field m-dark" data-widget="inputText">
		<label class="b-form_field-label" data-ref="label" for="input2">
			Enter Promo Code
			<span class="b-form_field-required_mark" aria-hidden="true">*</span>
		</label>
		<input
			class="b-input m-invalid"
			type="text"
			id="input2"
			name="couponCode"
			required=""
			value=""
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
			>
		<div class="b-form_field-message">This field is required</div>
	</div>
</div>
```

### On dark background disabled state

```html_example
<div style="background: #282727; padding: 30px;">
	<div class="b-form_field m-dark" data-widget="inputText">
		<label class="b-form_field-label m-disabled" data-ref="label" for="input2">
			Enter Promo Code
			<span class="b-form_field-required_mark" aria-hidden="true">*</span>
		</label>
		<input
			class="b-input"
			type="text"
			id="input2"
			name="couponCode"
			required=""
			value=""
			disabled
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
			>
	</div>
</div>
```
## Caption element

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

```html_example
<div class="b-form_field" data-widget="inputText">
	<label class="b-form_field-label" data-ref="label" for="input3">
		Enter Promo Code
		<span class="b-form_field-required_mark" aria-hidden="true">*</span>
	</label>
		<input
			class="b-input"
			type="text"
			id="input3"
			name="couponCode"
			required=""
			value=""
			data-ref="field"
			data-event-blur="validate"
			data-event-focus="handleFocus"
			>
	<span class="b-form_field-caption">
		Casing &amp; hyphens need to be exact
	</span>
</div>
```

*/
.b-form_field {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}
.b-form_field.m-bopis {
  width: auto;
}
.b-form_field.m-highlight {
  background: #ffffff;
  padding: 32px 0 24px;
}
.b-form_field.m-medium {
  width: 257px;
}
@media screen and (min-width: 768px) {
  .b-form_field.m-half {
    width: 48.8%;
  }
}
@media screen and (min-width: 1180px) {
  .b-form_field.m-half {
    width: 48.5%;
  }
}
@media screen and (min-width: 768px) {
  .b-form_field.m-third {
    width: 32.2%;
  }
}
@media screen and (min-width: 1180px) {
  .b-form_field.m-third {
    width: 32%;
  }
}
.b-form_field.m-small {
  width: 150px;
}
@media screen and (max-width: 767.9px) {
  .b-form_field.m-small {
    width: 130px;
  }
}
@media screen and (min-width: 768px) {
  .b-form_field.m-small + .m-next_small-md_up {
    width: calc(100% - 170px);
  }
  .b-form_field.m-small_desktop {
    width: 180px;
  }
  .b-form_field.m-small-md_up {
    width: 170px;
  }
}
.b-form_field.m-next_small {
  width: calc(100% - 170px);
}
@media screen and (max-width: 767.9px) {
  .b-form_field.m-next_small {
    width: calc(100% - 140px);
  }
}
@media screen and (min-width: 768px) {
  .b-form_field.m-next_small_desktop {
    width: calc(100% - 200px);
  }
  .b-form_field.m-next_small-md_up {
    width: calc(100% - 190px);
  }
}
.b-form_field.m-next_small-md_up + .m-small {
  width: 170px;
}
@media screen and (max-width: 767.9px) {
  .b-form_field.m-next_small-md_up + .m-small {
    width: 130px;
  }
}
.b-form_field.m-no_margin, .b-form_field.m-zero_margin, .b-form_field.m-coupon_code {
  margin-bottom: 0;
}
.b-form_field.m-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_field.m-invalid .b-form_field-message span {
  display: none;
}
.b-form_field.m-muted .b-form_field-required_mark {
  color: #60606a;
}
.b-form_field-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  display: flex;
  margin-inline-start: 16px;
  position: absolute;
  top: 24px;
  transform: translateY(-50%);
  transition: transform, font-size ease-out;
  z-index: 2;
}
html[dir=rtl] .b-form_field-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-label, .b-dialog.m-care_essentials-product .b-form_field-label {
  letter-spacing: normal;
}
.b-form_field-label.m-disabled, .b-form_field-label:disabled, .b-form_field-label[disabled] {
  color: #898992;
}
.b-form_field-label.m-disabled > span, .b-form_field-label:disabled > span, .b-form_field-label[disabled] > span {
  color: #898992;
}
.b-form_field-label span:not(.b-form_field-required_mark) {
  margin-inline-start: 4px;
}
.b-form_field-label:not(.m-select) {
  cursor: text;
}
.b-form_field.m-dark .b-form_field-label {
  color: #d2d1d4;
}
.b-form_field.m-dark .b-form_field-label.m-disabled, .b-form_field.m-dark .b-form_field-label:disabled, .b-form_field.m-dark .b-form_field-label[disabled] {
  color: #bbbbbf;
}
.b-form_field.m-dark .b-form_field-label.m-disabled > span, .b-form_field.m-dark .b-form_field-label:disabled > span, .b-form_field.m-dark .b-form_field-label[disabled] > span {
  color: #bbbbbf;
}
.b-form_field.m-small_desktop .b-form_field-label {
  white-space: nowrap;
}
.b-form_field-label.m-focus, .b-form_field-label.m-select {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  top: 0;
  transform: translateY(5px);
}
html[dir=rtl] .b-form_field-label.m-focus, html[dir=rtl] .b-form_field-label.m-select {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-label.m-focus, .b-dialog.m-care_essentials-product .b-form_field-label.m-focus, .l-page.m-care_essentials .b-form_field-label.m-select, .b-dialog.m-care_essentials-product .b-form_field-label.m-select {
  letter-spacing: normal;
}
.b-form_field-label.m-wai {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-form_field-label.m-checkbox {
  display: block;
  font-size: 14px;
  font-weight: normal;
  margin-bottom: 0;
}
.b-form_field-label a {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.b-form_field-label a.m-disabled::after, .b-form_field-label a:disabled::after, .b-form_field-label a[disabled]::after {
  background: #898992;
}
.b-form_field-label a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-form_field-label a:hover::after, .b-form_field-label a:active::after {
  transform: scaleX(0);
}
.b-form_field-label a.m-disabled, .b-form_field-label a:disabled, .b-form_field-label a[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-form_field-label a {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-label a, .b-dialog.m-care_essentials-product .b-form_field-label a {
  letter-spacing: normal;
}
.b-form_field-label.m-checkbox, .b-form_field-label.m-radio {
  margin-bottom: 10px;
  margin-inline-start: 0;
  position: static;
  transform: none;
}
.b-form_field-label.m-group {
  margin: 0 0 8px;
  position: static;
  transform: none;
}
.b-form_field-label.m-textarea {
  width: calc(100% - 40px);
}
.b-form_field-label.m-textarea::before {
  background-color: #ffffff;
  content: "";
  display: block;
  height: calc(100% + 3px);
  left: 0;
  position: absolute;
  top: 0;
  transform: translate(-10px, -4px);
  width: calc(100% + 20px);
  z-index: -1;
}
.b-form_field-label.m-textarea:has(+ .b-textarea:focus)::before {
  transform: translate(-10px, -3.4px);
}
.l-page.m-care_essentials .b-form_field-label {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.22;
}
html[dir=rtl] .l-page.m-care_essentials .b-form_field-label {
  letter-spacing: 0;
}
.b-form_field:has(.b-input:autofill) .b-form_field-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  top: 0;
  transform: translateY(5px);
}
html[dir=rtl] .b-form_field:has(.b-input:autofill) .b-form_field-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field:has(.b-input:autofill) .b-form_field-label, .b-dialog.m-care_essentials-product .b-form_field:has(.b-input:autofill) .b-form_field-label {
  letter-spacing: normal;
}
.b-form_field:not(.m-quick_finder):has(.b-input.m-valid:not(.m-password):not(.m-empty):autofill)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1998 12C21.1998 6.91893 17.0808 2.79995 11.9998 2.79995C6.91878 2.79995 2.7998 6.91893 2.7998 12C2.7998 17.081 6.91878 21.2 11.9998 21.2C17.0808 21.2 21.1998 17.081 21.1998 12ZM11.9998 1.19995C17.9645 1.19995 22.7998 6.03528 22.7998 12C22.7998 17.9646 17.9645 22.7999 11.9998 22.7999C6.03513 22.7999 1.19981 17.9646 1.19981 12C1.19981 6.03528 6.03513 1.19995 11.9998 1.19995Z' fill='%23008A00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0239 14.9876C10.046 15.0167 10.0702 15.0446 10.0967 15.0711C10.3931 15.3675 10.8642 15.3827 11.1785 15.1168C11.1976 15.101 11.2161 15.0841 11.2339 15.0662C11.2418 15.0584 11.2494 15.0505 11.2568 15.0424L16.3501 9.94918C16.6625 9.63676 16.6625 9.13023 16.3501 8.81781C16.0376 8.50539 15.5311 8.50539 15.2187 8.81781L10.6678 13.3687L8.57662 11.2775C8.2642 10.9651 7.75767 10.9651 7.44525 11.2775C7.13283 11.59 7.13283 12.0965 7.44525 12.4089L10.0239 14.9876Z' fill='%23008A00'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 24px;
  content: "";
  height: 24px;
  inset-inline-end: 16px;
  position: absolute;
  top: 12px;
  width: 24px;
}
.b-form_field:not(.m-quick_finder):has(.b-input.m-valid.m-password:not(.m-empty):autofill)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1998 12C21.1998 6.91893 17.0808 2.79995 11.9998 2.79995C6.91878 2.79995 2.7998 6.91893 2.7998 12C2.7998 17.081 6.91878 21.2 11.9998 21.2C17.0808 21.2 21.1998 17.081 21.1998 12ZM11.9998 1.19995C17.9645 1.19995 22.7998 6.03528 22.7998 12C22.7998 17.9646 17.9645 22.7999 11.9998 22.7999C6.03513 22.7999 1.19981 17.9646 1.19981 12C1.19981 6.03528 6.03513 1.19995 11.9998 1.19995Z' fill='%23008A00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0239 14.9876C10.046 15.0167 10.0702 15.0446 10.0967 15.0711C10.3931 15.3675 10.8642 15.3827 11.1785 15.1168C11.1976 15.101 11.2161 15.0841 11.2339 15.0662C11.2418 15.0584 11.2494 15.0505 11.2568 15.0424L16.3501 9.94918C16.6625 9.63676 16.6625 9.13023 16.3501 8.81781C16.0376 8.50539 15.5311 8.50539 15.2187 8.81781L10.6678 13.3687L8.57662 11.2775C8.2642 10.9651 7.75767 10.9651 7.44525 11.2775C7.13283 11.59 7.13283 12.0965 7.44525 12.4089L10.0239 14.9876Z' fill='%23008A00'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 24px;
  content: "";
  height: 24px;
  inset-inline-end: 45px;
  position: absolute;
  top: 12px;
  width: 24px;
}
@media screen and (min-width: 1180px) {
  .b-form_field:has(.b-input:not(:placeholder-shown)) .b-form_field-label {
    font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
    letter-spacing: 0.07em;
    line-height: 1.36;
    font-weight: 400;
    font-size: 12px;
    top: 0;
    transform: translateY(5px);
  }
  html[dir=rtl] .b-form_field:has(.b-input:not(:placeholder-shown)) .b-form_field-label {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-form_field:has(.b-input:not(:placeholder-shown)) .b-form_field-label, .b-dialog.m-care_essentials-product .b-form_field:has(.b-input:not(:placeholder-shown)) .b-form_field-label {
    letter-spacing: normal;
  }
}
.b-form_field:has(.b-input[disabled]) .b-form_field-label {
  color: #898992;
}
.b-form_field:has(.b-input[disabled]) .b-form_field-label > span {
  color: #898992;
}
.b-form_field-required_mark {
  color: #d01d1b;
  margin-inline-start: 2px;
}
.b-form_field-caption {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  display: block;
  flex-grow: 1;
  margin-top: 8px;
}
html[dir=rtl] .b-form_field-caption {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-caption, .b-dialog.m-care_essentials-product .b-form_field-caption {
  letter-spacing: normal;
}
.b-form_field-caption.m-end {
  text-align: end;
}
.b-checkout_step-content .b-form_field-caption {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
}
html[dir=rtl] .b-checkout_step-content .b-form_field-caption {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-checkout_step-content .b-form_field-caption, .b-dialog.m-care_essentials-product .b-checkout_step-content .b-form_field-caption {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-form_field-caption {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.22;
}
html[dir=rtl] .l-page.m-care_essentials .b-form_field-caption {
  letter-spacing: 0;
}
.b-subscriptions .b-form_field-caption .b-content_asset.m-legal-terms-grecaptcha {
  margin-bottom: 32px;
  margin-top: 16px;
}
.b-form_field-label_birthday {
  flex-direction: column;
}
.b-form_field-legalterms {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  display: block;
  margin-top: 8px;
}
html[dir=rtl] .b-form_field-legalterms {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-legalterms, .b-dialog.m-care_essentials-product .b-form_field-legalterms {
  letter-spacing: normal;
}
.b-form_field-message {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #d01d1b;
  display: flex;
  margin-top: 8px;
}
html[dir=rtl] .b-form_field-message {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_field-message, .b-dialog.m-care_essentials-product .b-form_field-message {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-form_field-message {
  letter-spacing: normal;
}
.b-form_field-message::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 2.79995C6.91918 2.79995 2.8002 6.91893 2.8002 12C2.8002 17.081 6.91918 21.2 12.0002 21.2C17.0812 21.2 21.2002 17.081 21.2002 12C21.2002 6.91893 17.0812 2.79995 12.0002 2.79995ZM1.2002 12C1.2002 6.03528 6.03552 1.19995 12.0002 1.19995C17.9649 1.19995 22.8002 6.03528 22.8002 12C22.8002 17.9646 17.9649 22.7999 12.0002 22.7999C6.03552 22.7999 1.2002 17.9646 1.2002 12Z' fill='%23d01d1b'/%3E%3Cpath d='M12.025 18.65C11.45 18.65 11 18.2 11 17.625C11 17.05 11.45 16.6 12.025 16.6C12.575 16.6 13.05 17.083 13.05 17.625C13.05 18.192 12.6 18.65 12.025 18.65Z' fill='%23d01d1b'/%3E%3Cpath d='M11.9932 14.317C11.5352 14.317 11.1602 13.942 11.1602 13.484V5.63403C11.1602 5.17603 11.5352 4.80103 11.9932 4.80103C12.4512 4.80103 12.8262 5.17603 12.8262 5.63403V13.484C12.8262 13.942 12.4512 14.317 11.9932 14.317Z' fill='%23d01d1b'/%3E%3C/svg%3E%0A");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  height: 20px;
  margin-inline-end: 8px;
  width: 20px;
}
.b-form_field-message.m-strength {
  color: #282727;
}
.b-form_field-message.m-strength::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%2377767F' fill-rule='evenodd' d='M2.333 10a7.667 7.667 0 1 1 15.334 0 7.667 7.667 0 0 1-15.334 0ZM10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM7.066 5.934a.8.8 0 1 0-1.132 1.132L8.87 10l-2.935 2.934a.8.8 0 1 0 1.132 1.132L10 11.13l2.934 2.935a.8.8 0 1 0 1.132-1.132L11.13 10l2.935-2.934a.8.8 0 0 0-1.132-1.132L10 8.87 7.066 5.934Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.b-form_field-message.m-success {
  color: #008a00;
}
.b-form_field-message.m-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.1998 12C21.1998 6.91893 17.0808 2.79995 11.9998 2.79995C6.91878 2.79995 2.7998 6.91893 2.7998 12C2.7998 17.081 6.91878 21.2 11.9998 21.2C17.0808 21.2 21.1998 17.081 21.1998 12ZM11.9998 1.19995C17.9645 1.19995 22.7998 6.03528 22.7998 12C22.7998 17.9646 17.9645 22.7999 11.9998 22.7999C6.03513 22.7999 1.19981 17.9646 1.19981 12C1.19981 6.03528 6.03513 1.19995 11.9998 1.19995Z' fill='%23008A00'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.0239 14.9876C10.046 15.0167 10.0702 15.0446 10.0967 15.0711C10.3931 15.3675 10.8642 15.3827 11.1785 15.1168C11.1976 15.101 11.2161 15.0841 11.2339 15.0662C11.2418 15.0584 11.2494 15.0505 11.2568 15.0424L16.3501 9.94918C16.6625 9.63676 16.6625 9.13023 16.3501 8.81781C16.0376 8.50539 15.5311 8.50539 15.2187 8.81781L10.6678 13.3687L8.57662 11.2775C8.2642 10.9651 7.75767 10.9651 7.44525 11.2775C7.13283 11.59 7.13283 12.0965 7.44525 12.4089L10.0239 14.9876Z' fill='%23008A00'/%3E%3C/svg%3E%0A");
}
.b-form_field.m-dark .b-form_field-message {
  color: #ff9d9d;
}
.b-form_field.m-dark .b-form_field-message::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 2.79995C6.91918 2.79995 2.8002 6.91893 2.8002 12C2.8002 17.081 6.91918 21.2 12.0002 21.2C17.0812 21.2 21.2002 17.081 21.2002 12C21.2002 6.91893 17.0812 2.79995 12.0002 2.79995ZM1.2002 12C1.2002 6.03528 6.03552 1.19995 12.0002 1.19995C17.9649 1.19995 22.8002 6.03528 22.8002 12C22.8002 17.9646 17.9649 22.7999 12.0002 22.7999C6.03552 22.7999 1.2002 17.9646 1.2002 12Z' fill='%23ff9d9d'/%3E%3Cpath d='M12.025 18.65C11.45 18.65 11 18.2 11 17.625C11 17.05 11.45 16.6 12.025 16.6C12.575 16.6 13.05 17.083 13.05 17.625C13.05 18.192 12.6 18.65 12.025 18.65Z' fill='%23ff9d9d'/%3E%3Cpath d='M11.9932 14.317C11.5352 14.317 11.1602 13.942 11.1602 13.484V5.63403C11.1602 5.17603 11.5352 4.80103 11.9932 4.80103C12.4512 4.80103 12.8262 5.17603 12.8262 5.63403V13.484C12.8262 13.942 12.4512 14.317 11.9932 14.317Z' fill='%23ff9d9d'/%3E%3C/svg%3E%0A");
}
.b-form_field-message ul {
  list-style: circle inside;
  margin-inline-start: 20px;
}
.b-form_field-bottom {
  display: flex;
  justify-content: space-between;
}
.b-form_field-checkbox_link {
  right: 0;
}
.b-form_field fieldset {
  border: none;
  display: block;
  padding: 0;
  position: relative;
}

/*md

# b-checkbox

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

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

## Unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-1" />
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-1">Some text</label>
</div>
```

## Checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-2" checked/>
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-2">Some text</label>
</div>
```

## Disabled unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-3" disabled/>
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-3">Some text</label>
</div>
```

## Disabled checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-4" checked disabled/>
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-4">Some text</label>
</div>
```

## Invalid unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-5"/>
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-5">Some text</label>
</div>
```

## Invalid checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input m-invalid" type="checkbox" id="id-checkbox-6" checked/>
	<svg class="b-checkbox-icon" aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check" fill-rule="evenodd" clip-rule="evenodd" d="M10.0244 14.9876C10.0464 15.0167 10.0707 15.0446 10.0972 15.0711C10.3936 15.3675 10.8647 15.3827 11.179 15.1168C11.1981 15.101 11.2166 15.0841 11.2344 15.0662C11.2423 15.0584 11.2499 15.0505 11.2573 15.0424L16.3505 9.94918C16.663 9.63676 16.663 9.13023 16.3505 8.81781C16.0381 8.50539 15.5316 8.50539 15.2192 8.81781L10.6683 13.3687L8.57711 11.2775C8.26469 10.9651 7.75816 10.9651 7.44574 11.2775C7.13332 11.59 7.13332 12.0965 7.44574 12.4089L10.0244 14.9876Z" fill="currentColor"/>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-6">Some text</label>
</div>

```

## Customization by SCSS

Checkbox styles that used in several component.

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

It provide styles only for icon element based on SVG.

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

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

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

		.b-refinement_checkbox.m-disabled & {
			@include g-checkbox(_icon, m-disabled);
		}
	}
}
```
*/
.b-checkbox {
  display: flex;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.b-checkbox-input {
  cursor: pointer;
  height: 24px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 24px;
  z-index: 1;
}
html[dir=rtl] .b-checkbox-input {
  left: initial;
  right: 0;
}
.b-checkbox-icon {
  background-color: #ffffff;
  border: 1px solid #898992;
  border-radius: 4px;
  cursor: pointer;
  margin-inline-end: 12px;
  min-width: 24px;
  position: relative;
  transition: ease-out 150ms;
  transition-property: border-color;
}
.b-checkbox-icon path {
  fill: #ffffff;
  transform: scale(0);
  transform-origin: center center;
  transition: ease-out 150ms;
  transition-property: transform;
}
.b-checkbox-input:active + .b-checkbox-icon {
  transform: scale(0.9);
}
@media not all and (pointer: coarse) {
  .b-checkbox:hover .b-checkbox-icon {
    border-color: #282727;
  }
}
.b-checkbox-input:checked + .b-checkbox-icon {
  background: #282727;
  border-color: #282727;
}
.b-checkbox-input:checked + .b-checkbox-icon path {
  transform: scale(1);
}
.b-checkbox-input[disabled] + .b-checkbox-icon {
  background-color: #f3f3f6;
  border-color: #d2d1d4;
  cursor: default;
  transform: scale(1);
}
.b-checkbox-input[disabled] + .b-checkbox-icon path {
  fill: #898992;
}
.b-checkbox-input.m-invalid + .b-checkbox-icon {
  background-color: #fbeded;
  border-color: #d01d1b;
}
.b-checkbox-input.m-invalid + .b-checkbox-icon path {
  fill: #d01d1b;
}
@media not all and (pointer: coarse) {
  .b-checkbox-input:not([disabled]):not(.m-invalid):checked:hover + .b-checkbox-icon {
    background: #001489;
    border-color: #001489;
  }
}
.b-checkbox-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
html[dir=rtl] .b-checkbox-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-checkbox-label, .b-dialog.m-care_essentials-product .b-checkbox-label {
  letter-spacing: normal;
}
.b-checkout_step-content .b-checkbox-label {
  margin-top: 3px;
}
.b-form_field.m-optional_checkbox .b-checkbox-label div {
  display: inline;
}
.b-form_field.m-optional_checkbox .b-checkbox-label .b-checkbox-label_discount {
  display: block;
}
.b-checkbox-input[disabled] + .b-checkbox-icon + .b-checkbox-label {
  cursor: default;
}
.b-checkbox-label .accept-all-title {
  font-weight: 600;
  margin-right: 4px;
}
.b-checkbox-label a {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
.b-checkbox-label a.m-disabled::after, .b-checkbox-label a:disabled::after, .b-checkbox-label a[disabled]::after {
  background: #898992;
}
.b-checkbox-label a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-checkbox-label a:hover::after, .b-checkbox-label a:active::after {
  transform: scaleX(0);
}
.b-checkbox-label a.m-disabled, .b-checkbox-label a:disabled, .b-checkbox-label a[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-checkbox-label a {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-checkbox-label a, .b-dialog.m-care_essentials-product .b-checkbox-label a {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-checkbox-label a {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.22;
}
html[dir=rtl] .l-page.m-care_essentials .b-checkbox-label a {
  letter-spacing: 0;
}

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

/*md

# Form set

Form set is component that designed to style fieldset HTML element and divide form
to small subsets.

```
fieldset.b-form_set
	legend.b-form_set-label
```

```html_example
<form
	class="b-form"
	id="shipping"
>
	<div class="b-form-title">Form title</div>

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

		<div class="b-form_field">
			<label class="b-form_field-label" for="form-full-input-1">
				Town
			</label>
			<input class="b-input" type="text" placeholder="b-input" id="form-full-input-1">
		</div>

		<div class="b-form_field">
			<label class="b-form_field-label" for="form-full-input-2">
				Street
			</label>
			<input class="b-input" type="text" placeholder="b-input"  id="form-full-input-2">
		</div>
	</fieldset>
</form>
```

*/
.b-form_set {
  border: none;
  display: block;
  margin: 16px 0;
  min-width: 0;
  padding: 0;
  position: relative;
}
.b-form_set.m-no_margin {
  margin: 0;
}
.b-form_set-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  display: block;
  margin: 24px 0;
  max-width: 100%;
  padding: 0;
  white-space: normal;
  width: 100%;
}
html[dir=rtl] .b-form_set-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_set-label, .b-dialog.m-care_essentials-product .b-form_set-label {
  letter-spacing: normal;
}
.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_set-label.m-shipping_method {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 20px;
  margin-top: 0;
  padding-top: 20px;
}
html[dir=rtl] .b-form_set-label.m-shipping_method {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_set-label.m-shipping_method, .b-dialog.m-care_essentials-product .b-form_set-label.m-shipping_method {
  letter-spacing: normal;
}
.b-form_set-required {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  color: #60606a;
  margin-bottom: 20px;
  max-width: 100%;
  padding: 0;
  text-align: end;
  white-space: normal;
  width: 100%;
}
html[dir=rtl] .b-form_set-required {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-form_set-required, .b-dialog.m-care_essentials-product .b-form_set-required {
  letter-spacing: normal;
}

/*md

# Input password

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

```html_example
<div class="b-input_password" data-widget="inputPassword">
	<input data-ref="field" id="" type="password" class="b-input m-valid" aria-describedby="" placeholder="" name="" required="" value="" maxlength="64" aria-required="true" minlength="8" data-event-input="onPasswordInput" data-tau="" data-event-blur="validate">
	<button class="b-input_password-toggle_visibility" data-ref="showButton" data-event-click="toggleMask" data-button-text-show="Show" data-button-text-hide="Hide" aria-pressed="false" title="Toggle password field visibility" type="button">
		Show
	</button>
</div>
```

```html_example
<div class="b-input_password" data-widget="inputPassword">
	<input data-ref="field" id="" type="password" class="b-input m-valid" aria-describedby="" placeholder="" name="" required="" value="" maxlength="64" aria-required="true" minlength="8" data-event-input="onPasswordInput" data-tau="" data-event-blur="validate">
	<button class="b-input_password-toggle_visibility" data-ref="showButton" data-event-click="toggleMask" data-button-text-show="Show" data-button-text-hide="Hide" aria-pressed="false" title="Toggle password field visibility" type="button" hidden="hidden">
		Show
	</button>
</div>
```

## Error State

```html_example
<div class="b-input_password" data-widget="inputPassword">
	<input data-ref="field" id="" type="password" class="b-input m-invalid" aria-describedby="" placeholder="" name="" required="" value="" maxlength="64" aria-required="true" minlength="8" data-event-input="onPasswordInput" data-tau="" data-event-blur="validate">
	<button class="b-input_password-toggle_visibility" data-ref="showButton" data-event-click="toggleMask" data-button-text-show="Show" data-button-text-hide="Hide" aria-pressed="false" title="Toggle password field visibility" type="button" hidden="hidden">
		Show
	</button>
</div>
```
*/
.b-input_password {
  align-items: center;
  display: flex;
  position: relative;
}
.b-input_password-toggle_visibility {
  color: #77767f;
  cursor: pointer;
  inset-inline-end: 16px;
  position: absolute;
}
@media not all and (pointer: coarse) {
  .b-input_password-toggle_visibility:hover {
    color: #282727;
  }
}
.b-input_password .b-input {
  padding-inline-end: 68px;
}

/*md

# Radio

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

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

## 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);
		}
	}
}
```
*/
.b-radio {
  align-items: center;
  display: flex;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.b-radio-input {
  cursor: pointer;
  height: 24px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 24px;
  z-index: 4;
}
html[dir=rtl] .b-radio-input {
  left: initial;
  right: 0;
}
.b-radio-icon {
  appearance: none;
  background: transparent;
  border: 1.6px solid #898992;
  border-radius: 24px;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin-inline-end: 12px;
  min-height: 24px;
  min-width: 24px;
  position: relative;
  transition: ease-out 150ms;
  transition-property: border;
  vertical-align: sub;
  width: 24px;
  z-index: 3;
}
.b-radio-icon::-ms-check {
  display: none;
}
.b-radio-icon::before {
  background-color: #282727;
  border-radius: 12px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: ease-out 150ms;
  transition-property: transform;
  width: 12px;
}
.b-radio-input:active + .b-radio-icon {
  transform: scale(0.9);
}
@media not all and (pointer: coarse) {
  .b-radio-input:hover + .b-radio-icon {
    border-color: #001489;
  }
}
.b-radio-input:checked + .b-radio-icon {
  border-color: #282727;
  border-width: 1px;
}
.b-radio-input:checked + .b-radio-icon::before {
  transform: translate(-50%, -50%) scale(1);
}
.b-radio-input[disabled] + .b-radio-icon {
  background-color: #f3f3f6;
  border-color: #d2d1d4;
  cursor: default;
  transform: scale(1);
}
.b-radio-input[disabled] + .b-radio-icon::before {
  background-color: #bbbbbf;
}
.b-form_field.m-invalid .b-radio-icon, .b-radio-input.m-invalid + .b-radio-icon {
  background-color: #fbeded;
  border-color: #d01d1b;
}
.b-form_field.m-invalid .b-radio-icon::before, .b-radio-input.m-invalid + .b-radio-icon::before {
  background-color: #d01d1b;
}
@media not all and (pointer: coarse) {
  .b-radio-input:not([disabled]):not(.m-invalid):checked:hover + .b-radio-icon {
    border-color: #001489;
  }
  .b-radio-input:not([disabled]):not(.m-invalid):checked:hover + .b-radio-icon::before {
    background-color: #001489;
  }
}
.b-radio-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
html[dir=rtl] .b-radio-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-radio-label, .b-dialog.m-care_essentials-product .b-radio-label {
  letter-spacing: normal;
}

/*md

# Textarea

This component represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text

### Default state

```html_example
<div class="b-form_field" data-widget="inputText">
	<label class="b-form_field-label" data-ref="label" for="area1">
		Your message
	</label>
	<textarea
		id="area1"
		class="b-textarea m-valid"
		data-ref="field"
		data-event-blur="validate"
		data-event-focus="handleFocus"
		rows="3"
		></textarea>
	<span class="b-form_field-caption">
		180 symbols
	</span>
</div>
```

### Error state

```html_example
<div class="b-form_field" data-widget="inputText">
	<label class="b-form_field-label" data-ref="label" for="area1">
		Your message
	</label>
	<textarea
		id="area1"
		class="b-textarea m-invalid"
		data-ref="field"
		data-event-blur="validate"
		data-event-focus="handleFocus"
		rows="3"
	></textarea>
	<div class="b-form_field-message" role="alert">This field is required</div>
</div>
```

### Disabled state

```html_example
<div class="b-form_field" data-widget="inputText">
	<label class="b-form_field-label m-disabled" data-ref="label" for="area1">
		Your message
	</label>
	<textarea
		id="area1"
		class="b-textarea"
		data-ref="field"
		data-event-blur="validate"
		data-event-focus="handleFocus"
		rows="3"
		disabled
	></textarea>
</div>
```

### Right aligned caption with textarea

```html_example
<div class="b-form_field" data-widget="inputText">
	<label class="b-form_field-label" data-ref="label" for="area1">
		Your message
	</label>
	<textarea
		id="area1"
		class="b-textarea m-valid"
		data-ref="field"
		data-event-blur="validate"
		data-event-focus="handleFocus"
		rows="3"
	></textarea>
	<span class="b-form_field-caption m-end">
		180 symbols
	</span>
</div>
```
*/
.b-textarea {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #a4a4aa;
  color: #282727;
  cursor: text;
  padding: 19px 16px 0;
  transition: box-shadow ease-out;
  vertical-align: baseline;
  display: block;
  max-width: 100%;
  min-height: 48px;
  min-width: 100%;
}
html[dir=rtl] .b-textarea {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-textarea, .b-dialog.m-care_essentials-product .b-textarea {
  letter-spacing: normal;
}
@media not all and (pointer: coarse) {
  .b-textarea:hover {
    box-shadow: inset 0 0 0 1px #282727;
  }
}
.b-textarea:active {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-textarea:active {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-textarea:focus {
  box-shadow: inset 0 0 0 1.6px #001489;
}
.l-page.m-care_essentials .b-textarea:focus {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-textarea.m-disabled, .b-textarea:disabled, .b-textarea[disabled] {
  background: #f3f3f6;
  box-shadow: inset 0 0 0 1px #d2d1d4;
  color: #898992;
  opacity: 1;
}
.b-textarea.m-invalid {
  box-shadow: inset 0 0 0 1px #d01d1b;
}
@media screen and (max-width: 767.9px) {
  .b-textarea {
    font-size: 16px;
  }
}
.b-textarea.m-no_resize {
  resize: none;
}
.b-textarea::placeholder {
  padding-top: 16px;
}
.b-textarea:focus::placeholder {
  color: #ffffff;
  padding-top: 0;
}

.b-countdown {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.b-countdown-time {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  position: absolute;
}
@media screen and (max-width: 1179.9px) {
  .b-countdown-time {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-countdown-time {
  letter-spacing: 0;
}
.b-countdown-icon {
  height: 190px;
  transform: rotateZ(-90deg);
  width: 190px;
}
.b-countdown-circle_bg {
  fill: none;
  stroke: #ebebea;
  stroke-width: 5px;
}
.b-countdown-circle_animated {
  fill: none;
  stroke: #001489;
  stroke-width: 5px;
  transition: stroke-dashoffset 2.8s linear;
}

.b-minicart {
  background-color: #ffffff;
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  color: #282727;
  inset-inline-end: 24px;
  min-height: 150px;
  position: absolute;
  top: calc(100% + 23px);
  visibility: hidden;
  width: 500px;
  z-index: 22;
  height: 240px;
}
.b-minicart:not(.m-loading_long)::after {
  bottom: 100%;
  content: "";
  display: block;
  height: 75px;
  inset-inline-end: 12px;
  position: absolute;
  transform: translateY(5px);
  width: 180px;
}
.b-minicart.m-closed {
  display: none;
}
@media screen and (min-width: 1180px) {
  .b-minicart.m-active {
    visibility: visible;
  }
}
.b-minicart.m-loading_long::after {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
}
.b-minicart.m-not_empty {
  height: 240px;
  min-height: max(415px, var(--header-dialog-height, 40vh));
}
.b-minicart.m-no_discounts .b-product_line:first-child {
  padding-top: 0;
}
.b-minicart-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.b-minicart[aria-busy=true] .b-minicart-inner {
  opacity: 0.6;
  transition: opacity ease-out 150ms;
}
.b-minicart-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 24px;
  gap: 5px;
  padding-bottom: 32px;
}
.b-minicart-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-minicart-title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-minicart-title {
  letter-spacing: 0;
}
.b-minicart-title strong {
  font-weight: 700;
}
.b-minicart-messages {
  margin: 0 24px;
}
.b-minicart-messages:has(.b-message:not([hidden=hidden])) {
  border-bottom: 1px solid #d2d1d4;
}
.b-minicart-messages .b-message:last-child {
  margin-bottom: 24px;
}
.b-minicart-messages_item {
  margin-bottom: 8px;
}
.b-minicart-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 24px;
}
.b-minicart-content::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.b-minicart-content::-webkit-scrollbar-thumb {
  background: #282727;
  border-radius: 11px;
}
.b-minicart-content::-webkit-scrollbar-track {
  background: #ebebea;
  border-radius: 11px;
}
.b-minicart-footer {
  border-top: 1px solid #d2d1d4;
  bottom: 0;
  padding: 16px 0 20px;
}
.b-minicart-discounts {
  padding: 0 24px;
}
.b-minicart-discounts + .b-promotion {
  margin-top: 8px;
  padding: 0 24px;
}
.b-minicart-discounts + .b-promotion.b-bonus-product {
  padding: 0 24px;
}
.b-minicart-discounts .b-promotion {
  margin-bottom: 0;
}
.b-minicart-discounts .b-promotion + .b-promotion {
  margin-top: 8px;
}
.b-minicart-summary {
  padding: 0 20px;
}
.b-minicart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.b-minicart-actions .b-button {
  flex: 1 0 48%;
  width: -moz-fit-content;
  width: fit-content;
}
.b-minicart-empty_content {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
  text-align: center;
}
html[dir=rtl] .b-minicart-empty_content {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-minicart-empty_content, .b-dialog.m-care_essentials-product .b-minicart-empty_content {
  letter-spacing: normal;
}
.b-minicart-empty_icon svg {
  height: 40px;
  width: 40px;
}
.b-minicart .b-form_field {
  margin-bottom: 0;
}

.b-header_dialog {
  background-color: #ffffff;
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  color: #282727;
  inset-inline-end: 24px;
  min-height: 150px;
  position: absolute;
  top: calc(100% + 23px);
  visibility: hidden;
  width: 500px;
  z-index: 22;
}
.b-header_dialog:not(.m-loading_long)::after {
  bottom: 100%;
  content: "";
  display: block;
  height: 75px;
  inset-inline-end: 12px;
  position: absolute;
  transform: translateY(5px);
  width: 180px;
}
.b-header_dialog.m-closed {
  display: none;
}
@media screen and (min-width: 1180px) {
  .b-header_dialog.m-active {
    visibility: visible;
  }
}
.b-header_dialog.m-loading_long::after {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #001489;
  border-left-color: #ebedf6;
  border-radius: 50%;
  border-top-color: #ebedf6;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
}
.b-header_dialog.m-not_empty {
  height: 240px;
  min-height: max(415px, var(--header-dialog-height, 40vh));
}
.b-header_dialog.m-authenticated {
  inset-inline-end: 30px;
  max-width: 350px;
  padding: 24px;
}
@media screen and (min-width: 768px) {
  .b-header_dialog.m-authenticated .b-user_title {
    font-size: 28px;
  }
}
.b-header_dialog.m-guest {
  width: 800px;
}
html[lang=ja] .b-header_dialog.m-guest {
  width: 900px;
}
.b-header_dialog.m-miniwishlist.m-not_empty {
  min-height: max(330px, var(--header-dialog-height, 34vh));
}
.b-header_dialog.m-miniwishlist .b-product_line-attributes {
  margin-bottom: 0;
}
.b-header_dialog.m-miniwishlist .b-header_dialog-title strong {
  font-weight: 700;
}
.b-header_dialog-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.b-header_dialog[aria-busy=true] .b-header_dialog-inner {
  opacity: 0.6;
  transition: opacity ease-out 150ms;
}
.b-header_dialog-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding: 24px;
}
.b-header_dialog-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-header_dialog-title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-header_dialog-title {
  letter-spacing: 0;
}
.b-header_dialog-messages {
  margin: 0 24px;
}
.b-header_dialog-messages:has(.b-message:not([hidden=hidden])) {
  border-bottom: 1px solid #d2d1d4;
}
.b-header_dialog-messages .b-message:last-child {
  margin-bottom: 24px;
}
.b-header_dialog-messages:has(.b-message:not([hidden=hidden])) {
  margin-bottom: 8px;
}
.b-header_dialog-messages_item {
  margin-bottom: 8px;
  width: 100%;
}
.b-header_dialog-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 24px;
}
.b-header_dialog-content::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
.b-header_dialog-content::-webkit-scrollbar-thumb {
  background: #282727;
  border-radius: 11px;
}
.b-header_dialog-content::-webkit-scrollbar-track {
  background: #ebebea;
  border-radius: 11px;
}
.b-header_dialog-summary {
  padding: 0 20px;
}
.b-header_dialog-footer {
  border-top: 1px solid #d2d1d4;
  bottom: 0;
  padding: 16px 0 20px;
}
.b-header_dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.b-header_dialog-actions .b-button {
  flex: 1 0 48%;
  width: -moz-fit-content;
  width: fit-content;
}
.b-header_dialog-actions.m-empty {
  padding: 32px 24px 24px;
}
.b-header_dialog-empty_content {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px;
  text-align: center;
}
html[dir=rtl] .b-header_dialog-empty_content {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-header_dialog-empty_content, .b-dialog.m-care_essentials-product .b-header_dialog-empty_content {
  letter-spacing: normal;
}
.b-header_dialog-empty_icon svg {
  height: 40px;
  width: 40px;
}
.b-header_dialog .b-user_greeting {
  border-bottom: 1px solid #d2d1d4;
  margin: 8px 0 16px;
  padding-bottom: 16px;
}
.b-header_dialog .b-user_greeting-message {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-header_dialog .b-user_greeting-message {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-header_dialog .b-user_greeting-message, .b-dialog.m-care_essentials-product .b-header_dialog .b-user_greeting-message {
  letter-spacing: normal;
}
.b-header_dialog .b-account_nav {
  margin-bottom: 0;
  overflow: hidden;
}

.b-product_line {
  border-top: 1px solid #d2d1d4;
  padding-bottom: 20px;
  padding-top: 20px;
  position: relative;
}
.b-product_line:first-child:not(.m-checkout):not(.m-bonus_order_level) {
  border-top: none;
}
.b-header_dialog.m-miniwishlist .b-product_line:first-child:not(.m-checkout):not(.m-bonus_order_level) {
  padding-top: 8px;
}
.b-product_line.m-bonus:not(.m-bonus_order_level) {
  border-top: none;
  grid-area: bonus;
}
@media screen and (min-width: 1440px) {
  .b-product_line.m-bonus_order_level.m-order_details .b-product_line-inner {
    grid-template-columns: 160px auto auto 0;
  }
}
@media screen and (min-width: 768px) {
  .b-product_line.m-bonus_order_level.m-order_details .b-product_line-details {
    padding-inline-start: 20px;
  }
}
.b-product_line.m-minicart {
  padding-bottom: 24px;
  padding-top: 24px;
}
.b-product_line.m-minicart .b-product_line.m-bonus {
  padding-bottom: 0;
  padding-top: 24px;
}
.b-product_line.m-minicart .b-product_line-attributes {
  margin-bottom: 0;
}
.b-product_line.m-minicart .b-product_line-promotions {
  margin: 0;
}
.b-product_line.m-minicart .b-product_line-promotions:has(.b-promotion-message:not(:empty)) {
  margin: 8px 0 0;
}
.b-product_line.m-minicart .b-product_line-promotions:has(.b-promotion-message:not(:empty)) .b-promotion {
  margin-bottom: 0;
}
.b-product_line.m-minicart .b-product_line-promotions:has(.b-promotion-message:not(:empty)) .b-promotion + .b-promotion {
  margin-top: 8px;
}
.b-product_line.m-minicart .b-product_line-promotions:has(.b-promotion-message:not(:empty)):not(:first-child) {
  margin-top: 8px;
}
.b-product_line.m-fit_guide {
  padding-bottom: 0;
  padding-top: 8px;
}
.b-product_line.m-add_to_cart_overlay {
  padding-top: 0;
}
.b-product_line.m-oms {
  border-top: none;
}
.b-product_line.m-oms + .b-product_line.m-oms {
  border-top: 1px solid #d2d1d4;
}
.b-product_line-inner {
  display: grid;
  grid-template-areas: "msg . . ." "image details details remove" "image qty     total   total" "bonus bonus   bonus   bonus";
  grid-template-columns: 143px auto auto 48px;
  grid-template-rows: auto auto 1fr;
  position: relative;
  width: 100%;
}
.b-product_line.m-minicart .b-product_line-inner, .b-product_line.m-bonus_order_level .b-product_line-inner, .b-product_line.m-add_to_cart_overlay .b-product_line-inner, .b-product_line.m-store_panel_overlay .b-product_line-inner, .b-product_line.m-bopis_store_selector_overlay .b-product_line-inner {
  grid-template-columns: 96px auto auto 0;
}
.b-product_line.m-checkout .b-product_line-inner {
  grid-template-areas: "msg ." "image details" "image qty" "image total" "bonus bonus";
  grid-template-columns: 87px auto;
}
.b-product_line.m-oms .b-product_line-inner {
  grid-template-areas: "msg ." "image details" "image qty" "image stepper" "image total";
  grid-template-columns: 87px auto;
}
.b-product_line-message {
  grid-column: span 4;
  margin-bottom: 12px;
}
.b-product_line-link {
  display: block;
}
.b-product_line-image {
  grid-area: image;
}
.b-product_line-details {
  grid-area: details;
  padding-inline-start: 16px;
}
.b-product_line-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-product_line-picture img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-product_line-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03;
  margin-bottom: 8px;
}
html[dir=rtl] .b-product_line-title {
  letter-spacing: 0;
}
.b-product_line-title a {
  cursor: pointer;
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-product_line-title a:hover {
    color: #001489;
  }
}
.b-product_line-subtitle {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 8px;
}
html[dir=rtl] .b-product_line-subtitle {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_line-subtitle, .b-dialog.m-care_essentials-product .b-product_line-subtitle {
  letter-spacing: normal;
}
.b-product_line-availability {
  white-space: nowrap;
}
.b-product_line-availability .b-availability {
  margin-top: 18px;
}
.b-product_line.m-minicart .b-product_line-availability .b-availability {
  align-items: baseline;
  margin-top: 12px;
  white-space: normal;
}
.b-product_line-product_number {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  color: #60606a;
  display: none;
}
html[dir=rtl] .b-product_line-product_number {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_line-product_number, .b-dialog.m-care_essentials-product .b-product_line-product_number {
  letter-spacing: normal;
}
.b-product_line.m-store_panel_overlay .b-product_line-product_number {
  display: block;
}
.b-product_line-attribute {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  word-break: break-word;
}
html[dir=rtl] .b-product_line-attribute {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_line-attribute, .b-dialog.m-care_essentials-product .b-product_line-attribute {
  letter-spacing: normal;
}
.b-product_line.m-fit_guide .b-product_line-attribute {
  margin: 0;
}
.b-product_line-attribute.m-netcontent {
  margin: -3px 0 8px;
}
.b-minicart .b-product_line-attribute.m-netcontent {
  color: #282727;
}
.b-product_line-attribute.m-netcontent + .b-product_line-price {
  margin-bottom: 0;
}
.b-product_line-attribute_value {
  word-break: break-word;
}
.b-product_line-attribute_value.m-gift_certificate {
  display: block;
  font-weight: normal;
}
.b-product_line-attribute_value.m-gift_certificate_email {
  display: block;
}
.b-product_line-bundle_title {
  margin-bottom: 8px;
}
.b-product_line-bundle_item {
  margin-bottom: 4px;
}
.b-product_line-bundle_item:not(:last-child)::after {
  content: ",";
}
.b-product_line-price {
  margin-bottom: 8px;
}
.l-order_confirmation .b-product_line-price .b-price-badge {
  margin-top: 8px;
}
.b-product_line.m-checkout .b-product_line-price_each {
  margin-inline-end: 4px;
}
.b-product_line-price_total {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  grid-area: total;
  margin-top: 16px;
}
.b-product_line.m-checkout .b-product_line-price_total {
  flex-direction: row;
  flex-wrap: wrap;
  font-weight: 700;
  padding-inline-start: 20px;
}
.b-product_line.m-minicart .b-product_line-price_total {
  margin-top: 22px;
}
.b-product_line.m-oms .b-product_line-price_total {
  margin-top: 4px;
}
.b-product_line.m-fit_guide .b-product_line-price_total {
  align-items: flex-start;
  grid-area: qty;
  margin-top: 0;
  padding-inline-start: 16px;
}
.b-product_line.m-fit_guide .b-product_line-price_total .b-price-badge {
  display: none;
}
.b-product_line-promotions {
  margin: 8px 0;
}
.b-product_line-info {
  grid-area: qty;
  margin-top: 12px;
  padding-inline-start: 20px;
}
.b-product_line-info.m-gift {
  margin-top: 28px;
}
.b-product_line-info .b-form_field-label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-product_line.m-checkout .b-product_line-info {
  margin-top: 0;
}
.b-product_line.m-minicart .b-product_line-info {
  padding-inline-start: 16px;
}
.b-product_line-qty {
  display: flex;
}
.b-product_line-stepper {
  grid-area: stepper;
  margin: 4px 0;
  padding-inline-start: 20px;
}
.b-product_line-remove {
  grid-area: remove;
  margin-top: -8px;
}
.b-product_line.m-checkout .b-product_line-remove {
  display: none;
}
.b-product_line.m-minicart .b-product_line-remove {
  inset-inline-end: 0;
  margin: 0;
  position: absolute;
  top: 0;
}
.b-product_line-remove_btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width: 1179.9px) {
  .b-product_line-remove_btn {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-product_line-remove_btn:hover {
  color: #001489;
}
.m-care_essentials .b-product_line-remove_btn:hover, .m-1774 .b-product_line-remove_btn:hover {
  color: inherit;
}
.b-product_line.m-minicart .b-product_line-remove_btn {
  min-width: auto;
}

.b-product_tile {
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile {
    padding: 0 8px;
  }
}
.b-product_tile-top {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile-top {
    margin-inline: -8px;
  }
}
.b-product_tile.m-hero_product .b-product_tile-top {
  flex-grow: 1;
}
.b-product_tile-image_link {
  display: block;
  text-decoration: none;
}
.b-product_tile-image_link.m-not_available {
  opacity: 0.5;
}
.b-product_tile-image {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-product_tile-image img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-product_tile-quick_view {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  bottom: 0;
  color: #001489;
  font-weight: 500;
  left: 0;
  opacity: 0;
  position: absolute;
  text-transform: initial;
  transition-duration: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: color, opacity;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-product_tile-quick_view {
    display: none;
  }
}
.b-product_tile-quick_view:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #001489;
}
.b-product_tile-quick_view.m-product_set {
  display: none;
  pointer-events: none;
}
.b-product_tile-quick_view:focus, .b-product_tile-top:hover .b-product_tile-quick_view {
  opacity: 1;
}
.b-product_tile-no_available {
  color: #d01d1b;
  font-weight: 700;
  margin-bottom: 8px;
}
.b-product_tile-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03;
  margin-bottom: 8px;
}
html[dir=rtl] .b-product_tile-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_tile-title {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 1.12;
  margin-bottom: 4px;
}
.b-product_tile-link {
  cursor: pointer;
  text-decoration: none;
  display: block;
  word-break: break-word;
}
@media not all and (pointer: coarse) {
  .b-product_tile-link:hover {
    color: #282727;
  }
}
.b-product_tile-aux_name {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-product_tile-aux_name {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_tile-aux_name, .b-dialog.m-care_essentials-product .b-product_tile-aux_name {
  letter-spacing: normal;
}
.b-product_tile-aux_name:has(.b-product_tile-shortname:not(:empty)), .b-product_tile-aux_name:has(.b-product_tile-net_value:not(:empty)) {
  margin-bottom: 8px;
}
.b-drawer:not(.m-cart_overlay) .b-product_tile-aux_name p {
  margin-bottom: 2px;
}
.b-product_tile-shortname {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b-product_tile-net_value {
  color: #60606a;
}
html[dir=rtl] .b-product_tile-net_value {
  direction: ltr;
  text-align: right;
}
.l-page.m-care_essentials .b-product_tile-net_value {
  font-weight: 300;
}
.l-page.m-care_essentials .b-product_tile-net_value:empty {
  margin-bottom: 4px;
}
.b-product_tile-price {
  margin-bottom: 5px;
}
@media screen and (min-width: 1180px) {
  .b-product_tile-price .b-price {
    line-height: 23px;
    min-height: 23px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-product_tile-price .b-price-badge {
    bottom: 0;
    right: 30px;
  }
}
.l-page.m-care_essentials .b-product_tile-price {
  margin-bottom: 0;
}
.l-page.m-care_essentials .b-product_tile-price .b-price {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.4;
  min-height: auto;
}
.b-product_tile.m-hero_product {
  display: flex;
  flex-direction: column;
  grid-column: 2/-1;
  grid-row: 2/4;
}
@media screen and (max-width: 767.9px) {
  .b-product_tile.m-hero_product {
    grid-column: 1/-1;
    grid-row: 3/4;
  }
}
@media screen and (min-width: 1180px) {
  .l-page.m-care_essentials .b-product_tile.m-hero_product {
    grid-column: 3/-1;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-product_tile .b-product_slider {
    margin-bottom: 14px;
    padding-bottom: 0;
  }
}
.b-product_tile .b-product_slider-pagination_dot.m-current {
  background-color: #939393;
}

/*md

# b-product_tile_swatches

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

This is simplified version of PDP swatches, the difference is it use links to appropriate product variation.

```html_example
<div class="b-product_tile_swatches">
	<a class="b-product_tile_swatches-swatch m-selected" href="" title="Green color" style="background-color: #2e7d32"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="Black color" style="background-color: #000000"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="White color" style="background-color: #FFFFFF"></a>
	<a class="b-product_tile_swatches-leftover" href="#" title="Show all" aria-label="Show all">+1</a>
</div>
```
*/
.b-product_tile_swatches {
  margin: auto 0 5px;
  padding-top: 5px;
}
.b-product_tile_swatches-swatch {
  border: 1px solid #898992;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 24px;
  margin: 4px 0;
  overflow: hidden;
  width: 24px;
}
@media not all and (pointer: coarse) {
  .b-product_tile_swatches-swatch:hover {
    border-color: #282727;
    border-width: 1.6px;
    box-shadow: inset 0 0 0 2px #ffffff;
    padding: 1px;
  }
}
.b-product_tile_swatches-swatch:focus {
  border-color: #282727;
  border-width: 1.6px;
  box-shadow: inset 0 0 0 2px #ffffff;
  padding: 1px;
}
.b-product_tile_swatches-swatch.m-selected {
  border-color: #282727;
  border-width: 1.6px;
  box-shadow: inset 0 0 0 2px #ffffff;
  padding: 2px;
}
.b-product_tile_swatches-swatch_image {
  background-size: cover;
  border-radius: 2px;
  display: block;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.b-product_tile_swatches-leftover {
  cursor: pointer;
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-product_tile_swatches-leftover:hover {
    color: #001489;
  }
}

.b-product_tile_alt_view-track {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-product_tile_alt_view-track {
    display: flex;
  }
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-track {
  height: auto;
}
.b-product_tile_alt_view-item {
  height: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-product_tile_alt_view-item {
    min-width: 100%;
  }
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-item {
  height: auto;
}
.b-product_tile_alt_view-item.m-alt {
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity ease-out 150ms;
}
@media screen and (max-width: 1179.9px) {
  .b-carousel .b-product_tile_alt_view-item.m-alt {
    display: none;
  }
}
@media screen and (min-width: 1180px) {
  .b-product_tile_alt_view:hover .b-product_tile_alt_view-item.m-alt {
    opacity: 1;
  }
}
.m-hero_product .b-product_tile_alt_view-item.m-alt {
  opacity: 1;
}

/*md

# b-rating

Designed to provide same styles of rating across different components.

<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <!-- 0 0 16.476 15.677 shape from 0.0 -->
    <symbol id="star">
        <path d="m13.344 15.662-5.0953-2.6691-5.0873 2.6842 0.96393-5.6707-4.1249-4.0089 5.691-0.83558 2.538-5.1618 2.5533 5.1543 5.6935 0.81868-4.113 4.0211z"></path>
    </symbol>
    <!-- 0 0 16.476 15.677 shape from 0.0 -->
    <symbol id="star-half">
        <path class="b-rating-empty" d="m13.344 15.662-5.0953-2.6691-5.0873 2.6842 0.96393-5.6707-4.1249-4.0089 5.691-0.83558 2.538-5.1618 2.5533 5.1543 5.6935 0.81868-4.113 4.0211z"></path>
        <path class="b-rating-filled" d="m8.1348 0.19141-2.4434 4.9707-5.6914 0.83594 4.125 4.0078-0.96484 5.6719 4.9746-2.625v-12.861z"></path>
    </symbol>
</svg>

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

## Rating with link to product

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

.b-product_tile .b-rating {
  display: none;
}

/*md

# b-price

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

## Regular price

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

## Sale price

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

## Price range

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

## Free price

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

*/
.b-price {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
html[dir=rtl] .b-price {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-price, .b-dialog.m-care_essentials-product .b-price {
  letter-spacing: normal;
}
.b-price-item {
  display: inline-block;
  margin-inline-end: 8px;
  white-space: nowrap;
}
.b-price-item:last-child {
  margin: 0;
}
.b-price-item.m-old {
  color: #60606a;
  font-weight: 400;
  text-decoration: line-through;
}
.b-price-item.m-free {
  color: #008a00;
  text-transform: uppercase;
}
.b-price-divider {
  margin-inline-end: 8px;
}
.b-price-per_unit {
  color: #494954;
  font-size: 12px;
  font-weight: 400;
  padding-top: 5px;
  width: 100%;
}
.b-price-badge {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 12px;
  background-color: #ffffff;
  border: 1px solid #001489;
  border-radius: 4px;
  color: #001489;
  line-height: 1;
  padding: 4px 6px;
  word-break: break-word;
}
html[dir=rtl] .b-price-badge {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-price-badge, .b-dialog.m-care_essentials-product .b-price-badge {
  letter-spacing: normal;
}
html[dir=rtl] .b-price-badge {
  direction: ltr;
}
.b-product_details-price .b-price-badge, .b-cart_product-price .b-price-badge {
  align-self: center;
  background-color: #ffffff;
  border-color: #001489;
  color: #001489;
  margin-inline-end: 8px;
}
@media screen and (max-width: 767.9px) {
  .b-product_details-price .b-price-badge, .b-cart_product-price .b-price-badge {
    display: inline-block;
  }
}
.b-suggestions_product-price .b-price-badge {
  position: relative;
  top: -1px;
}
.b-quick_buy .b-price-badge {
  margin-inline-end: 8px;
}

.b-product_best-price {
  color: #60606a;
  display: flex;
  font-size: 12px;
  font-weight: 100;
}
.m-miniwishlist .b-product_best-price, .b-wishlist_tile .b-product_best-price, .m-minicart .b-product_best-price, .l-cart .b-product_best-price {
  margin-bottom: 7px;
}
.l-order_confirmation .b-product_best-price {
  margin-bottom: 8px;
}
.b-summary_products .b-product_best-price {
  margin-bottom: 10px;
}
.b-suggestions .b-product_best-price {
  margin-top: 5px;
}
.b-product_tile .b-product_best-price {
  min-height: 22px;
  padding-top: 7px;
}
.b-product_details .b-product_best-price {
  margin-top: 5px;
}
.m-1774 .b-product_line-details .b-product_best-price {
  color: #ffffff;
}

/*md

# b-promotion

Designed to provide same styles of promotion across different components.

We do not support any HTML in promotion messages.

## Promotion with configured link

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

## Empty promotion

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

## Promotion with details in dialog

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

*/
.b-promotion {
  align-items: center;
  display: flex;
  margin-bottom: 8px;
  position: relative;
}
.b-promotion-message {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #001489;
  border-radius: 4px;
  color: #001489;
  padding: 4px 10px;
}
html[dir=rtl] .b-promotion-message {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-promotion-message, .b-dialog.m-care_essentials-product .b-promotion-message {
  letter-spacing: normal;
}
.b-promotion-message:empty {
  display: none;
}
.b-promotion-message.m-centered {
  text-align: center;
  width: 100%;
}
.b-promotion-message.m-large {
  padding: 16px 20px;
}
.b-promotion-message.m-order {
  background: #001489;
  border: 0;
  color: #ffffff;
}
.b-promotion-message a {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
}
.b-promotion-message a.m-disabled::after, .b-promotion-message a:disabled::after, .b-promotion-message a[disabled]::after {
  background: #898992;
}
.b-promotion-message a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-promotion-message a:hover::after, .b-promotion-message a:active::after {
  transform: scaleX(0);
}
.b-promotion-message a.m-disabled, .b-promotion-message a:disabled, .b-promotion-message a[disabled] {
  color: #898992;
  pointer-events: none;
}
.l-page.m-care_essentials .b-promotion-message {
  border-color: #282727;
  color: #282727;
  font-weight: 300;
  letter-spacing: 0;
}
.b-promotion-details {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin-inline-start: 12px;
}
.b-promotion-details.m-disabled::after, .b-promotion-details:disabled::after, .b-promotion-details[disabled]::after {
  background: #898992;
}
.b-promotion-details::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-promotion-details:hover::after, .b-promotion-details:active::after {
  transform: scaleX(0);
}
.b-promotion-details.m-disabled, .b-promotion-details:disabled, .b-promotion-details[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-promotion-details {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-promotion-details, .b-dialog.m-care_essentials-product .b-promotion-details {
  letter-spacing: normal;
}
.b-promotion.b-bonus-product {
  padding: 0 20px;
}

/*md

# b-availability

Designed to provide same styles of availability across different components.

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

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

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

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

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

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

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

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

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

*/
.b-availability {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-items: center;
  display: flex;
}
html[dir=rtl] .b-availability {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-availability, .b-dialog.m-care_essentials-product .b-availability {
  letter-spacing: normal;
}
.b-availability.m-instoreonly {
  color: #d01d1b;
}
.b-availability.m-backorder {
  color: #b36200;
}
.b-availability.m-preorder {
  color: #282727;
}
.b-availability-icon::before {
  border-radius: 50%;
  content: "";
  display: block;
  height: 12px;
  margin-inline-end: 8px;
  width: 12px;
}
.m-instock .b-availability-icon::before {
  background-color: #008a00;
}
.m-outofstock .b-availability-icon::before {
  background-color: #d01d1b;
}
.m-lowinstock .b-availability-icon::before {
  background-color: #f69623;
}
.b-availability-icon svg {
  display: none;
}
.b-availability-message.m-select_options_first {
  color: #d01d1b;
}
.l-pdp-main.m-bundle .b-availability {
  font-size: 14px;
}
.b-availability-status_divider {
  border-left: 1px solid #282727;
  margin: 0 8px;
}
.b-availability-footer {
  font-size: 14px;
}

.b-geolocation {
  background-color: #ffffff;
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  bottom: 15px;
  max-height: calc(100vh - 20px - 48px - 64px);
  overflow: auto;
  padding: 24px 24px 32px;
  position: fixed;
  right: 15px;
  width: 400px;
  z-index: 15;
}
@media screen and (max-width: 767.9px) {
  .b-geolocation {
    bottom: 0;
    max-width: 400px;
    padding-inline: 16px;
    right: 0;
    width: 100%;
  }
}
.b-geolocation-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  color: #282727;
  height: 24px;
  min-height: 24px;
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
}
@media screen and (max-width: 1179.9px) {
  .b-geolocation-close {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-geolocation-close:hover {
  color: #001489;
}
.m-care_essentials .b-geolocation-close:hover, .m-1774 .b-geolocation-close:hover {
  color: inherit;
}
@media screen and (max-width: 1179.9px) {
  .b-geolocation-close {
    min-height: 24px;
  }
}
html[dir=rtl] .b-geolocation-close {
  left: 0;
  right: initial;
}
.b-geolocation-container[dir=ltr] .b-geolocation-close {
  left: inherit;
  right: 0;
}
.b-geolocation-container[dir=rtl] .b-geolocation-close {
  left: 0;
  right: initial;
}
.b-geolocation-header {
  align-items: flex-start;
  display: flex;
  margin-bottom: 30px;
  position: relative;
}
.b-geolocation-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-top: 3px;
  padding-right: 30px;
}
html[dir=rtl] .b-geolocation-title {
  letter-spacing: 0;
  padding-left: 30px;
  padding-right: 0;
}
.b-geolocation-container[dir=ltr] .b-geolocation-title {
  padding-left: 0;
  padding-right: 30px;
}
.b-geolocation-container[dir=rtl] .b-geolocation-title {
  padding-left: 30px;
  padding-right: 0;
}
.b-geolocation-buttons {
  display: flex;
  flex-wrap: wrap;
}
.b-geolocation-item {
  margin-bottom: 24px;
  width: 33%;
}
.b-geolocation-item.m-nl_BE, .b-geolocation-item.m-nl_NL {
  width: 50%;
}
.b-geolocation-link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.b-geolocation-link.m-disabled::after, .b-geolocation-link:disabled::after, .b-geolocation-link[disabled]::after {
  background: #898992;
}
.b-geolocation-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-geolocation-link:hover::after, .b-geolocation-link:active::after {
  transform: scaleX(0);
}
.b-geolocation-link.m-disabled, .b-geolocation-link:disabled, .b-geolocation-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-geolocation-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-geolocation-link, .b-dialog.m-care_essentials-product .b-geolocation-link {
  letter-spacing: normal;
}
.m-care_essentials .b-geolocation-link {
  letter-spacing: normal;
  font-weight: 400;
}
.b-geolocation-flag {
  height: 20px;
  width: 100%;
}
.b-geolocation .b-country_selector-icon {
  margin-right: 15px;
  min-width: 30px;
}
html[dir=rtl] .b-geolocation .b-country_selector-icon {
  margin-left: 15px;
  margin-right: 0;
}
.b-geolocation-container[dir=ltr] .b-geolocation-header .b-country_selector-icon {
  margin-left: 0;
  margin-right: 15px;
}
.b-geolocation-container[dir=ltr] .b-geolocation-buttons .b-radio-input {
  left: 0;
  right: initial;
}
.b-geolocation-container[dir=rtl] .b-geolocation-header .b-country_selector-icon {
  margin-left: 15px;
  margin-right: 0;
}
.b-geolocation-container[dir=rtl] .b-geolocation-buttons .b-radio-input {
  left: initial;
  right: 0;
}
.b-geolocation .b-radio-label {
  text-transform: capitalize;
}
.m-care_essentials .b-geolocation .b-radio-label {
  letter-spacing: normal;
  font-weight: 300;
}

/*md

# Spacing

This component can be used to manage top or bottoms margins and padding for any block.

Possible sizes are: `5xs`, `xxxxs`, `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`, `3xl`, `4xl`.

Use `.b-space` + modifier with needed space size `.m-space_padding-top-<size>` or `.m-space_margin-bottom-<size>` to apply the spacing.

```html_example
	<div class="b-space m-space_padding-top-l m-space_padding-bottom-l">
		Throughout the over two century long, rich history of shoemaking, BIRKENSTOCK has always championed the health of the human foot: with shoes that enable everybody to walk in a way that is as close as possible to how nature intended us to.
	</div>
```

*/
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-5xs {
    margin-top: 2px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-5xs {
    margin-top: 2px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xxxxs {
    margin-top: 4px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xxxxs {
    margin-top: 4px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xxxs {
    margin-top: 8px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xxxs {
    margin-top: 8px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xxs {
    margin-top: 12px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xxs {
    margin-top: 12px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xs {
    margin-top: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xs {
    margin-top: 16px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-s {
    margin-top: 24px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-s {
    margin-top: 24px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-m {
    margin-top: 32px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-m {
    margin-top: 32px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-l {
    margin-top: 48px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-l {
    margin-top: 48px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xl {
    margin-top: 64px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xl {
    margin-top: 64px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-xxl {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-xxl {
    margin-top: 80px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-3xl {
    margin-top: 104px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-3xl {
    margin-top: 104px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-top-4xl {
    margin-top: 140px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-top-4xl {
    margin-top: 140px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-5xs {
    margin-bottom: 2px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-5xs {
    margin-bottom: 2px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xxxxs {
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xxxxs {
    margin-bottom: 4px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xxxs {
    margin-bottom: 8px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xxxs {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xxs {
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xxs {
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xs {
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xs {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-s {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-s {
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-m {
    margin-bottom: 32px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-m {
    margin-bottom: 32px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-l {
    margin-bottom: 48px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-l {
    margin-bottom: 48px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xl {
    margin-bottom: 64px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xl {
    margin-bottom: 64px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-xxl {
    margin-bottom: 80px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-xxl {
    margin-bottom: 80px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-3xl {
    margin-bottom: 104px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-3xl {
    margin-bottom: 104px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_margin-bottom-4xl {
    margin-bottom: 140px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_margin-bottom-4xl {
    margin-bottom: 140px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-5xs {
    padding-top: 2px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-5xs {
    padding-top: 2px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xxxxs {
    padding-top: 4px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xxxxs {
    padding-top: 4px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xxxs {
    padding-top: 8px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xxxs {
    padding-top: 8px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xxs {
    padding-top: 12px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xxs {
    padding-top: 12px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xs {
    padding-top: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xs {
    padding-top: 16px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-s {
    padding-top: 24px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-s {
    padding-top: 24px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-m {
    padding-top: 32px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-m {
    padding-top: 32px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-l {
    padding-top: 48px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-l {
    padding-top: 48px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xl {
    padding-top: 64px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xl {
    padding-top: 64px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-xxl {
    padding-top: 80px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-xxl {
    padding-top: 80px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-3xl {
    padding-top: 104px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-3xl {
    padding-top: 104px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-top-4xl {
    padding-top: 140px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-top-4xl {
    padding-top: 140px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-5xs {
    padding-bottom: 2px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-5xs {
    padding-bottom: 2px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xxxxs {
    padding-bottom: 4px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xxxxs {
    padding-bottom: 4px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xxxs {
    padding-bottom: 8px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xxxs {
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xxs {
    padding-bottom: 12px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xxs {
    padding-bottom: 12px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xs {
    padding-bottom: 16px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xs {
    padding-bottom: 16px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-s {
    padding-bottom: 24px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-s {
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-m {
    padding-bottom: 32px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-m {
    padding-bottom: 32px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-l {
    padding-bottom: 48px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-l {
    padding-bottom: 48px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xl {
    padding-bottom: 64px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xl {
    padding-bottom: 64px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-xxl {
    padding-bottom: 80px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-xxl {
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-3xl {
    padding-bottom: 104px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-3xl {
    padding-bottom: 104px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-space.m-space_padding-bottom-4xl {
    padding-bottom: 140px;
  }
}
@media screen and (min-width: 1180px) {
  .b-space.m-space_padding-bottom-4xl {
    padding-bottom: 140px;
  }
}

.b-continue_shopping {
  align-items: center;
  color: #60606a;
  display: inline-flex;
  line-height: 24px;
  text-decoration: none;
}
.b-continue_shopping.m-fit_guide {
  margin-bottom: 24px;
}
.b-continue_shopping.m-adressbook {
  margin-bottom: 20px;
}
html[dir=rtl] .b-continue_shopping.m-adressbook {
  flex-direction: row;
}
.b-continue_shopping-icon {
  transform: rotate(90deg);
}
html[dir=rtl] .b-continue_shopping-icon {
  transform: rotate(270deg);
}
.b-continue_shopping-icon svg {
  max-width: 20px;
}
html[dir=rtl] .b-continue_shopping.m-adressbook .b-continue_shopping-icon {
  transform: rotate(270deg);
}
.b-continue_shopping-text {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  line-height: 1.4;
  position: relative;
  font-size: 14px;
  margin-inline-start: 6px;
}
.b-continue_shopping-text.m-disabled::after, .b-continue_shopping-text:disabled::after, .b-continue_shopping-text[disabled]::after {
  background: #898992;
}
.b-continue_shopping-text::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-continue_shopping-text:hover::after, .b-continue_shopping-text:active::after {
  transform: scaleX(0);
}
.b-continue_shopping-text.m-disabled, .b-continue_shopping-text:disabled, .b-continue_shopping-text[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-continue_shopping-text {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-continue_shopping-text, .b-dialog.m-care_essentials-product .b-continue_shopping-text {
  letter-spacing: normal;
}
.b-continue_shopping-text.m-disabled::after, .b-continue_shopping-text:disabled::after, .b-continue_shopping-text[disabled]::after {
  background: #898992;
}
.b-continue_shopping-text::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.b-continue_shopping-text:hover::after, .b-continue_shopping-text:active::after {
  transform: scaleX(1);
}

.b-payment_total {
  border-color: #d2d1d4;
  width: 100%;
}
@media screen and (min-width: 1180px) {
  .b-payment_total {
    display: none;
  }
}
.b-minicart .b-payment_total {
  display: table;
}
.b-payment_total-content {
  text-align: start;
  padding-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .b-payment_total-content {
    padding-bottom: 24px;
  }
}
.b-payment_total-name {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
}
html[dir=rtl] .b-payment_total-name {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-payment_total-name, .b-dialog.m-care_essentials-product .b-payment_total-name {
  letter-spacing: normal;
}
.b-payment_total-value {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 20px;
  margin-left: 8px;
  text-align: end;
  vertical-align: baseline;
}
html[dir=rtl] .b-payment_total-value {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-payment_total-value, .b-dialog.m-care_essentials-product .b-payment_total-value {
  letter-spacing: normal;
}
.b-payment_total-free_product {
  padding-bottom: 12px;
  text-align: end;
  vertical-align: top;
}
.b-payment_total-free_product_link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
.b-payment_total-free_product_link.m-disabled::after, .b-payment_total-free_product_link:disabled::after, .b-payment_total-free_product_link[disabled]::after {
  background: #898992;
}
.b-payment_total-free_product_link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-payment_total-free_product_link:hover::after, .b-payment_total-free_product_link:active::after {
  transform: scaleX(0);
}
.b-payment_total-free_product_link.m-disabled, .b-payment_total-free_product_link:disabled, .b-payment_total-free_product_link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-payment_total-free_product_link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-payment_total-free_product_link, .b-dialog.m-care_essentials-product .b-payment_total-free_product_link {
  letter-spacing: normal;
}
.b-payment_total-tax {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  color: #60606a;
  display: block;
  margin-top: 4px;
}
html[dir=rtl] .b-payment_total-tax {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-payment_total-tax, .b-dialog.m-care_essentials-product .b-payment_total-tax {
  letter-spacing: normal;
}

.b-minicart-summary .b-payment_total-content {
  display: flex;
  justify-content: space-between;
  padding-bottom: 16px;
}
.b-minicart-summary .b-payment_total-name {
  font-size: 15px;
}
.b-minicart-summary .b-payment_total-value {
  font-size: 22px;
}
.b-minicart-summary .b-payment_total-tax, .b-minicart-summary .b-payment_total-shipping {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.b-social_account {
  margin: 32px auto 72px;
  max-width: 438px;
  padding-inline-end: 16px;
  padding-inline-start: 16px;
}
@media screen and (min-width: 1180px) {
  .b-social_account {
    margin-bottom: 96px;
    margin-top: 48px;
  }
}
.b-social_account-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: 32px;
}
@media screen and (max-width: 1179.9px) {
  .b-social_account-title {
    font-size: 48px;
    line-height: 0.92;
  }
}
html[dir=rtl] .b-social_account-title {
  letter-spacing: 0;
}
@media screen and (min-width: 1180px) {
  .b-social_account-title {
    margin-bottom: 40px;
  }
}
.b-social_account-desc {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 32px;
}
@media screen and (min-width: 1180px) {
  .b-social_account-desc {
    margin-bottom: 40px;
  }
}
.b-social_account-form {
  width: 100%;
}
.b-social_account-form .b-input {
  font-weight: 300;
}
.b-social_account-form .b-form_field-label.m-email + .b-input[disabled] {
  box-shadow: none;
  height: auto;
  line-height: initial;
  padding: 0;
}

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

.b-social_profile {
  margin: 48px 0;
}
.b-social_profile-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin-bottom: 24px;
}
@media screen and (max-width: 1179.9px) {
  .b-social_profile-title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-social_profile-title {
  letter-spacing: 0;
}
.b-social_profile-item {
  align-items: center;
  border: 1px solid #a4a4aa;
  border-radius: 4px;
  display: flex;
  margin-bottom: 20px;
  padding: 24px;
}
.b-social_profile-item:last-child {
  margin-bottom: 0;
}
.b-social_profile-info {
  font-weight: 500;
  margin-left: 16px;
}
.b-social_profile-link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin-left: auto;
}
.b-social_profile-link.m-disabled::after, .b-social_profile-link:disabled::after, .b-social_profile-link[disabled]::after {
  background: #898992;
}
.b-social_profile-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-social_profile-link:hover::after, .b-social_profile-link:active::after {
  transform: scaleX(0);
}
.b-social_profile-link.m-disabled, .b-social_profile-link:disabled, .b-social_profile-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-social_profile-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-social_profile-link, .b-dialog.m-care_essentials-product .b-social_profile-link {
  letter-spacing: normal;
}

.b-account_benefits {
  margin-bottom: 32px;
}
.b-account_benefits-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 20px;
}
html[dir=rtl] .b-account_benefits-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-account_benefits-title, .b-dialog.m-care_essentials-product .b-account_benefits-title {
  letter-spacing: normal;
}
.b-account_benefits-list {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
html[dir=rtl] .b-account_benefits-list {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-account_benefits-list, .b-dialog.m-care_essentials-product .b-account_benefits-list {
  letter-spacing: normal;
}
.b-account_benefits-item {
  padding-inline-start: 22px;
  position: relative;
}
.b-account_benefits-item::before {
  content: url("./images/icons/listTick.svg");
  display: block;
  height: 19px;
  inset-inline-start: 0;
  position: absolute;
  top: 0;
  width: 10px;
}
.b-account_benefits-learn_more {
  margin-bottom: 24px;
}

.b-login_register {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  display: flex;
  margin: 0 auto;
}
html[dir=rtl] .b-login_register {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-login_register, .b-dialog.m-care_essentials-product .b-login_register {
  letter-spacing: normal;
}
.b-login_register.m-registration {
  display: block;
  max-width: 670px;
  padding-top: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register.m-registration {
    max-width: 465px;
  }
}
.b-login_register.m-employee_registration {
  display: block;
  margin-left: 336px;
  max-width: 670px;
  padding-top: 0;
  position: relative;
  top: -50px;
}
@media screen and (max-width: 767.9px) {
  .b-login_register.m-employee_registration {
    margin-left: 0;
    top: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-login_register.m-employee_registration {
    margin-left: auto;
    top: 0;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-login_register.m-employee_registration {
    max-width: 465px;
    top: 0;
  }
}
@media screen and (min-width: 1180px) {
  .b-login_register.m-mini {
    flex-wrap: wrap;
    gap: 0;
    padding-top: 0;
  }
}
.b-login_register.m-popup {
  flex-direction: column;
  gap: 50px;
}
@media screen and (min-width: 1180px) {
  .b-login_register-login:not(.m-popup), .b-login_register-register:not(.m-popup) {
    flex: 1 1 calc((100% - 161px) / 2);
    max-width: calc((100% - 161px) / 2);
  }
  .b-login_register.m-mini .b-login_register-login:not(.m-popup), .b-login_register.m-mini .b-login_register-register:not(.m-popup) {
    flex: 1 1 calc((100% - 1px) / 2);
    max-width: calc((100% - 1px) / 2);
    padding: 32px;
  }
}
.b-login_register.m-mini .b-login_register-login {
  border-inline-start: 1px solid #d2d1d4;
}
.b-login_register-divider {
  background-color: #d2d1d4;
  flex-shrink: 0;
  text-align: center;
  width: 1px;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register-divider {
    height: 1px;
    width: 100%;
  }
}
.b-login_register-divider.m-popup {
  height: 1px;
  width: 100%;
}
.b-login_register-divider_text {
  background-color: #ffffff;
  display: inline-block;
  font-weight: 700;
  padding: 0 16px;
  text-transform: uppercase;
  transform: translateY(-50%);
  vertical-align: middle;
}
@media screen and (min-width: 1180px) {
  .b-login_register-divider_text {
    display: none;
  }
}
.b-login_register-divider_text.m-popup {
  display: inline-block;
}
.b-login_register.m-mini .b-login_register-recaptcha {
  border-top: 1px solid #d2d1d4;
  padding: 8px 24px 16px;
  text-align: center;
  width: 100%;
}
.b-login_register.m-mini .b-login_register-recaptcha .b-form_field-caption {
  font-size: 12px;
}
.b-login_register-page_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.92;
  margin-top: 60px;
  text-align: center;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register-page_title {
    font-size: 40px;
    line-height: 0.96;
  }
}
html[dir=rtl] .b-login_register-page_title {
  letter-spacing: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register-page_title {
    margin: 30px 16px 0;
    text-align: left;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-login_register-page_title {
    margin-inline: auto;
    max-width: 464px;
  }
}
.b-login_register-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
  margin-bottom: 20px;
  text-transform: uppercase;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register-title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-login_register-title {
  letter-spacing: 0;
}
.b-login_register-title.m-popup {
  font-size: 28px;
}
html[lang=ja] .b-login_register-title.m-popup, html[lang=ko] .b-login_register-title.m-popup {
  line-height: normal;
}
.b-login_register-title_employee {
  text-transform: capitalize;
}
.b-login_register.m-mini .b-login_register-title {
  font-size: 24px;
  margin-bottom: 24px;
}
.b-login_register.m-mini .b-login_register-title.m-mini {
  margin-bottom: -16px;
}
.b-login_register-desc {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  display: block;
  margin-bottom: 20px;
}
html[dir=rtl] .b-login_register-desc {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-login_register-desc, .b-dialog.m-care_essentials-product .b-login_register-desc {
  letter-spacing: normal;
}
.b-login_register-bottom_slot {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
@media screen and (max-width: 1179.9px) {
  .b-login_register-bottom_slot {
    margin-top: 40px;
  }
}
.b-login_register-bottom_slot img {
  display: block;
}
.b-login_register-toggle.m-active {
  display: none;
}
@media screen and (min-width: 1180px) {
  .b-login_register-toggle.m-login:not(.m-popup) {
    display: none;
  }
}
.b-login_register-login_link {
  border-top: 1px solid #d2d1d4;
  margin-top: 16px;
  padding-top: 16px;
}
.b-login_register-login_link a {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
.b-login_register-login_link a.m-disabled::after, .b-login_register-login_link a:disabled::after, .b-login_register-login_link a[disabled]::after {
  background: #898992;
}
.b-login_register-login_link a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-login_register-login_link a:hover::after, .b-login_register-login_link a:active::after {
  transform: scaleX(0);
}
.b-login_register-login_link a.m-disabled, .b-login_register-login_link a:disabled, .b-login_register-login_link a[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-login_register-login_link a {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-login_register-login_link a, .b-dialog.m-care_essentials-product .b-login_register-login_link a {
  letter-spacing: normal;
}
.b-login_register-submit {
  background: #001489;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #ffffff;
  padding: 0 24px;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.08;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: transparent;
  border-color: #282727;
  color: #282727;
}
@media not all and (pointer: coarse) {
  .b-login_register-submit:hover {
    background: transparent;
    border-color: #001489;
    color: #001489;
    text-decoration: none;
  }
}
.b-login_register-submit:active {
  background: transparent;
  border-color: #001489;
  color: #001489;
  text-decoration: none;
}
html[dir=rtl] .b-login_register-submit {
  letter-spacing: 0;
}
@media not all and (pointer: coarse) {
  .b-login_register-submit:hover {
    background: #282727;
    border-color: #282727;
    color: #ffffff;
  }
}
.b-login_register-submit:active {
  background: #282727;
  border-color: #282727;
  color: #ffffff;
}
.b-login_register.m-registration .b-login_register-submit {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #282727;
  border-color: #ffffff;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-login_register.m-registration .b-login_register-submit:hover {
    background: transparent;
    border-color: #282727;
    color: #282727;
  }
}
.b-login_register.m-registration .b-login_register-submit:active {
  background: transparent;
  border-color: #282727;
  color: #282727;
}
.b-login_register.m-registration .b-login_register-submit.m-disabled, .b-login_register.m-registration .b-login_register-submit:disabled, .b-login_register.m-registration .b-login_register-submit[disabled] {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  text-transform: uppercase;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #f3f3f6;
  border-color: transparent;
  color: #898992;
  pointer-events: none;
}
.b-login_register-footer .b-form_field-caption {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  margin-top: 16px;
}
html[dir=rtl] .b-login_register-footer .b-form_field-caption {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-login_register-footer .b-form_field-caption, .b-dialog.m-care_essentials-product .b-login_register-footer .b-form_field-caption {
  letter-spacing: normal;
}

.b-reset_password {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-top: 4px;
  position: relative;
}
.b-reset_password-btn {
  position: relative;
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-self: center;
  color: #60606a;
  cursor: pointer;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
.b-reset_password-btn.m-disabled::after, .b-reset_password-btn:disabled::after, .b-reset_password-btn[disabled]::after {
  background: #898992;
}
.b-reset_password-btn::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-reset_password-btn:hover::after, .b-reset_password-btn:active::after {
  transform: scaleX(0);
}
.b-reset_password-btn.m-disabled, .b-reset_password-btn:disabled, .b-reset_password-btn[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-reset_password-btn {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-reset_password-btn, .b-dialog.m-care_essentials-product .b-reset_password-btn {
  letter-spacing: normal;
}
.b-reset_password-error {
  width: 100%;
}
.b-reset_password .b-checkbox-label {
  line-height: 22px;
}

.b-account_nav {
  margin-bottom: 32px;
}
.b-account_nav-item {
  cursor: pointer;
  font-size: 16px;
  margin: 0 -12px 8px;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media screen and (min-width: 1180px) {
  .b-account_nav-item {
    margin-left: 0;
    margin-right: 0;
  }
}
.b-account_nav-item.m-logout {
  border-top: 1px solid #d2d1d4;
  margin: 16px 0 0;
  padding-top: 12px;
}
.b-account_nav-item.m-logout:hover {
  background: none;
}
.b-account_nav-item:hover {
  color: #001489;
}
.b-account_nav-item:hover .b-link {
  color: #001489;
}
.b-account_nav-item.m-active {
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  color: #282727;
}
@media screen and (max-width: 1179.9px) {
  .b-account_nav-item.m-active {
    display: none;
  }
}
.b-account_nav-item_link {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  align-items: center;
  display: flex;
  gap: 12px;
  line-height: 24px;
  min-height: 48px;
  padding: 12px;
  text-decoration: none;
}
html[dir=rtl] .b-account_nav-item_link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-account_nav-item_link, .b-dialog.m-care_essentials-product .b-account_nav-item_link {
  letter-spacing: normal;
}
@media screen and (min-width: 1180px) {
  .b-account_nav-item_link {
    padding-inline-end: 0;
    padding-inline-start: 8px;
  }
}
.b-account_nav-item_link.m-logout {
  padding: 12px 0;
}
@media screen and (min-width: 1180px) {
  .b-account_nav-item_link.m-logout {
    padding-inline-start: 8px;
  }
}
.b-account_nav-item_link svg {
  height: 22px;
  margin-inline-start: auto;
  width: 22px;
}
.b-account_nav-item_link svg:first-child {
  height: 24px;
  margin-inline-start: 0;
  width: 24px;
}
html[dir=rtl] .b-account_nav-item_link svg:last-child {
  transform: rotate(180deg);
}

.b-search_input {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  font-size: 16px;
  position: relative;
  width: 100%;
}
.b-search_noresults .b-search_input {
  margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
  .b-search_noresults .b-search_input {
    margin-bottom: 48px;
  }
}
.b-search_input-submit {
  border-radius: 4px;
  color: #77767f;
  height: 40px;
  inset-inline-end: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 40px;
}
.b-search_input-submit.m-active {
  background: #001489;
  border: 1px solid #001489;
  color: #ffffff;
  cursor: pointer;
}
@media not all and (pointer: coarse) {
  .b-search_input-submit.m-active:hover {
    background: #ffffff;
    color: #001489;
  }
}
.b-search_input-submit svg {
  width: 20px;
}
.b-search_input-after {
  background: #001489;
  bottom: 0;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: transform ease-out 500ms;
  transition-delay: 300ms;
  width: 100%;
}
.b-search_input-input {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid #a4a4aa;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #282727;
  height: 64px;
  line-height: 64px;
  padding: 0 108px 0 56px;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-search_input-input {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-search_input-input {
  letter-spacing: 0;
}
@media screen and (max-width: 767.9px) {
  .b-search_input-input {
    font-size: 20px;
    height: 56px;
    line-height: 56px;
    padding: 0 76px 0 40px;
  }
}
.m-animated .b-search_input-input:focus + .b-search_input-after {
  transform: scaleX(1);
}
.b-search_input-input::-webkit-search-cancel-button, .b-search_input-input::-webkit-search-decoration, .b-search_input-input::-webkit-inner-spin-button {
  appearance: none;
}
.b-search_input-input::-ms-clear {
  display: none;
}
.b-search_input-input::placeholder {
  color: #898992;
}
.b-search_noresults .b-search_input-input {
  padding: 0 56px 0 0;
}
.b-search_input-clear {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  height: 64px;
  inset-inline-end: 52px;
  min-width: 24px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity ease-out 150ms;
}
@media screen and (max-width: 1179.9px) {
  .b-search_input-clear {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-search_input-clear:hover {
  color: #001489;
}
.m-care_essentials .b-search_input-clear:hover, .m-1774 .b-search_input-clear:hover {
  color: inherit;
}
@media screen and (max-width: 767.9px) {
  .b-search_input-clear {
    height: 56px;
  }
}
.b-search_input-clear.m-visible {
  opacity: 1;
  pointer-events: all;
}
.b-search_input-clear svg {
  height: 27.8px;
  width: 27.8px;
}
.b-search_noresults .b-search_input-clear {
  display: none;
}
@media screen and (max-width: 1179.9px) {
  .b-search_noresults .b-search_input-clear {
    font-size: 20px;
  }
}

.b-search_dialog {
  height: 100%;
  position: relative;
  width: 100%;
}
.b-search_dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
  width: 100%;
  z-index: 14;
}
.b-search_dialog-inner_top {
  background-color: #ffffff;
}
.b-search_dialog-inner_top_content {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  justify-content: center;
  opacity: 0;
  padding: 0;
  transition: opacity ease-out 150ms;
  transition-delay: 200ms;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-search_dialog-inner_top_content {
    padding: 0;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-search_dialog-inner_top_content {
    padding: 0 92px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-search_dialog-inner_top_content {
    padding: 0 16px;
  }
}
.b-search_dialog-form_wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 32px 0;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1180px) {
  .b-search_dialog-form_wrap {
    margin: 40px 0;
    max-width: 1130px;
    padding: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-search_dialog-form_wrap {
    margin-top: 24px;
  }
}
.b-search_dialog-cancel {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  inset-inline-start: 0;
  padding: 0;
  position: absolute;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
html[dir=rtl] .b-search_dialog-cancel svg {
  transform: rotate(180deg);
}
.b-search_dialog-cancel:focus, .b-search_dialog-cancel:hover {
  color: #001489;
}
@media screen and (max-width: 1179.9px) {
  .b-search_dialog-container_scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.b-search_dialog-overlay {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-search_dialog.m-animated .b-search_dialog-inner_top_content {
  opacity: 1;
}
.b-search_dialog.m-animated .b-suggestions-inner {
  opacity: 1;
}
.b-search_dialog.m-animated .b-search_input-input:focus + .b-search_input-after {
  transform: scaleX(1);
}

.b-search_incorrect {
  margin-bottom: 30px;
}
.b-search_incorrect-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 20px;
}
html[dir=rtl] .b-search_incorrect-title {
  letter-spacing: 0;
}
.b-search_noresults .b-search_incorrect-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #60606a;
}
html[dir=rtl] .b-search_noresults .b-search_incorrect-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-search_noresults .b-search_incorrect-title, .b-dialog.m-care_essentials-product .b-search_noresults .b-search_incorrect-title {
  letter-spacing: normal;
}
.b-search_incorrect-item {
  margin-bottom: 8px;
  padding-inline-start: 18px;
  position: relative;
}
.b-search_incorrect-item::before {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  position: absolute;
  top: 50%;
  background: #001489;
  border-radius: 50%;
  content: "";
  display: block;
  height: 6px;
  inset-inline-start: 0;
  margin-top: -3px;
  width: 6px;
}
html[dir=rtl] .b-search_incorrect-item::before {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-search_incorrect-item::before, .b-dialog.m-care_essentials-product .b-search_incorrect-item::before {
  letter-spacing: normal;
}

.b-popular_searches-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #60606a;
  margin-bottom: 20px;
}
html[dir=rtl] .b-popular_searches-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-popular_searches-title, .b-dialog.m-care_essentials-product .b-popular_searches-title {
  letter-spacing: normal;
}
.b-popular_searches-list {
  display: flex;
  flex-wrap: wrap;
}
.b-popular_searches-option {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 0 0 1px #d2d1d4;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  margin-bottom: 12px;
  margin-inline-end: 12px;
  padding: 0 12px;
  text-align: center;
  text-decoration: none;
}
html[dir=rtl] .b-popular_searches-option {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-popular_searches-option, .b-dialog.m-care_essentials-product .b-popular_searches-option {
  letter-spacing: normal;
}
@media not all and (pointer: coarse) {
  .b-popular_searches-option:hover {
    box-shadow: 0 0 0 1px #282727;
  }
}

.b-suggestions {
  background-color: #ffffff;
  overflow-y: auto;
  padding: 24px 0;
  position: relative;
  right: 0;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1180px) {
  .b-suggestions {
    padding: 0 0 40px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions {
    padding: 0 0 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions {
    padding-bottom: 12px;
  }
  .b-suggestions:has(.b-suggestions-section.m-guess) {
    margin-top: -8px;
  }
}
.b-suggestions-inner {
  opacity: 0;
  transition: opacity ease-out 150ms;
  transition-delay: 700ms;
}
@media screen and (min-width: 1180px) {
  .b-suggestions-inner {
    align-items: center;
    margin: 0 auto;
    max-width: 1130px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-inner {
    padding: 0 92px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-inner {
    padding: 0 16px;
  }
}
.b-suggestions.m-loading .b-suggestions-inner {
  opacity: 0.3;
  pointer-events: none;
}
.b-suggestions-container {
  display: flex;
}
.b-suggestions-section {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-section {
    margin-bottom: 32px;
  }
}
.b-suggestions-section.m-categories {
  margin-bottom: 32px;
}
.b-suggestions-inner.m-empty .b-suggestions-section {
  display: none;
}
.b-suggestions-section.m-content {
  margin-bottom: 0;
}
.b-suggestions-section.m-guess {
  margin-bottom: 40px;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-section.m-guess {
    margin-bottom: 32px;
  }
}
.b-suggestions-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: 20px;
}
html[dir=rtl] .b-suggestions-title {
  letter-spacing: 0;
}
html[lang=ja] .b-suggestions-title, html[lang=ko] .b-suggestions-title {
  line-height: normal;
}
.b-suggestions-option {
  border-radius: 4px;
  display: block;
  margin-bottom: 16px;
  position: relative;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-option {
    margin-bottom: 12px;
  }
}
.b-suggestions-option:last-child {
  margin-bottom: 0;
}
.b-suggestions-link {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  text-decoration: underline;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media not all and (pointer: coarse) {
  .b-suggestions-link:hover {
    text-decoration: none;
  }
}
.b-suggestions-link.m-disabled, .b-suggestions-link:disabled, .b-suggestions-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-suggestions-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions-link, .b-dialog.m-care_essentials-product .b-suggestions-link {
  letter-spacing: normal;
}
.b-suggestions-link.m-focused {
  color: #001489;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-view_results {
    width: 100%;
  }
}
.b-suggestions-view_results.m-focused {
  background: #001489;
  color: #ffffff;
}
@media screen and (min-width: 1180px) {
  .b-suggestions-sidebar {
    flex: 0 0 325px;
    padding-inline-end: 40px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-sidebar {
    order: 2;
  }
}
@media screen and (min-width: 1180px) {
  .b-suggestions-content {
    padding-inline-start: 20px;
    width: 100%;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-content {
    order: 1;
  }
}
.b-suggestions-container_scroll {
  display: flex;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-container_scroll {
    flex-direction: column;
  }
}
.b-suggestions-container_scroll.m-products_empty {
  display: block;
}
.b-suggestions-container_scroll.m-products_empty .b-suggestions-content {
  margin-top: 32px;
  padding-inline-start: 0;
}
.b-suggestions-container_scroll.m-products_empty .b-suggestions-section.m-total {
  margin-bottom: 0;
}
.b-suggestions-products {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 40px;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions-products {
    padding-bottom: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-suggestions-products {
    flex-direction: column;
  }
}

.b-suggestions_category {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #282727;
  text-decoration: none;
}
html[dir=rtl] .b-suggestions_category {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_category, .b-dialog.m-care_essentials-product .b-suggestions_category {
  letter-spacing: normal;
}
.b-suggestions_category-link {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  text-decoration: underline;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  padding-inline-end: 4px;
}
@media not all and (pointer: coarse) {
  .b-suggestions_category-link:hover {
    text-decoration: none;
  }
}
.b-suggestions_category-link.m-disabled, .b-suggestions_category-link:disabled, .b-suggestions_category-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-suggestions_category-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_category-link, .b-dialog.m-care_essentials-product .b-suggestions_category-link {
  letter-spacing: normal;
}
.b-suggestions_category-link.m-focused {
  outline: none !important;
}
.b-suggestions_category-image {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  border-radius: 4px;
  height: 30px;
  margin-inline-end: 12px;
  max-height: 30px;
  max-width: 30px;
  min-width: 30px;
  padding: 0;
  width: 30px;
}
.b-suggestions_category-image img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-suggestions_category-parent_title {
  font-weight: normal;
}

.b-suggestions_guess {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #60606a;
  margin-bottom: 0;
}
html[dir=rtl] .b-suggestions_guess {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_guess, .b-dialog.m-care_essentials-product .b-suggestions_guess {
  letter-spacing: normal;
}
.b-suggestions_guess-link {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #282727;
}
.b-suggestions_guess-link.m-disabled::after, .b-suggestions_guess-link:disabled::after, .b-suggestions_guess-link[disabled]::after {
  background: #898992;
}
.b-suggestions_guess-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-suggestions_guess-link:hover::after, .b-suggestions_guess-link:active::after {
  transform: scaleX(0);
}
.b-suggestions_guess-link.m-disabled, .b-suggestions_guess-link:disabled, .b-suggestions_guess-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-suggestions_guess-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_guess-link, .b-dialog.m-care_essentials-product .b-suggestions_guess-link {
  letter-spacing: normal;
}
@media not all and (pointer: coarse) {
  .b-suggestions_guess-link:hover {
    color: #282727;
  }
}

.b-suggestions_product {
  color: #282727;
  display: flex;
  margin-bottom: 16px;
  padding-inline-end: 20px;
  text-decoration: none;
  width: 50%;
}
@media screen and (max-width: 1179.9px) {
  .b-suggestions_product {
    padding: 0;
    width: 100%;
  }
}
.b-suggestions_product:hover {
  text-decoration: none;
}
.b-suggestions_product.m-focused {
  outline: none !important;
}
.b-suggestions_product-picture_wrap {
  margin-inline-end: 20px;
}
.b-suggestions_product-picture_wrap + .b-suggestions_product-picture_wrap {
  display: none;
}
.b-suggestions_product-picture {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  max-width: 100%;
  width: 96px;
}
.b-suggestions_product-picture img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-suggestions_product-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.03;
  margin-bottom: 3px;
  max-width: 300px;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
html[dir=rtl] .b-suggestions_product-title {
  letter-spacing: 0;
}
.b-suggestions_product:hover .b-suggestions_product-title, .b-suggestions_product.m-focused .b-suggestions_product-title {
  color: #001489;
}
.b-suggestions_product-price_info {
  margin-inline-end: 8px;
}
.b-suggestions_product-link {
  display: none;
}
.b-suggestions_product-price_item {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
}
html[dir=rtl] .b-suggestions_product-price_item {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_product-price_item, .b-dialog.m-care_essentials-product .b-suggestions_product-price_item {
  letter-spacing: normal;
}
.b-suggestions_product-aux_name {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 8px;
}
html[dir=rtl] .b-suggestions_product-aux_name {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-suggestions_product-aux_name, .b-dialog.m-care_essentials-product .b-suggestions_product-aux_name {
  letter-spacing: normal;
}
.b-suggestions_product-attribute {
  display: block;
}

@media screen and (min-width: 1180px) {
  .b-header_track_order {
    display: none;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-header_track_order {
    position: relative;
    border-radius: 4px;
    display: inline-flex;
    font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
    letter-spacing: 0.07em;
    line-height: 1.36;
    font-weight: 700;
    align-items: center;
    cursor: pointer;
    display: flex;
    min-height: 44px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0 4px;
  }
  .b-header_track_order.m-disabled::after, .b-header_track_order:disabled::after, .b-header_track_order[disabled]::after {
    background: #898992;
  }
  .b-header_track_order::after {
    background: currentcolor;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transition: transform ease-out 150ms;
    width: 100%;
    transform: scaleX(1);
  }
  .b-header_track_order:hover::after, .b-header_track_order:active::after {
    transform: scaleX(0);
  }
  .b-header_track_order.m-disabled, .b-header_track_order:disabled, .b-header_track_order[disabled] {
    color: #898992;
    pointer-events: none;
  }
  html[dir=rtl] .b-header_track_order {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-header_track_order, .b-dialog.m-care_essentials-product .b-header_track_order {
    letter-spacing: normal;
  }
  html[dir=rtl] .b-header_track_order {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-header_track_order, .b-dialog.m-care_essentials-product .b-header_track_order {
    letter-spacing: normal;
  }
  .m-care_essentials .b-header_track_order {
    letter-spacing: normal;
    font-weight: 400;
  }
  .b-header_track_order::after {
    display: none;
  }
}
.b-header_track_order-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width: 1179.9px) {
  .b-header_track_order-icon {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-header_track_order-icon:hover {
  color: #001489;
}
.m-care_essentials .b-header_track_order-icon:hover, .m-1774 .b-header_track_order-icon:hover {
  color: inherit;
}

.b-menu_panel-footer .b-customer_service_link {
  align-items: center;
  display: flex;
  text-decoration: none;
}

.b-hamburger_categories {
  background: hsla(239deg, 100%, 9%, 0.03);
  margin: -10px -24px 17px;
  padding: 32px 0;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 767.9px) {
  .m-care_essentials .b-hamburger_categories {
    margin-left: -16px;
    margin-right: -16px;
  }
}
.b-hamburger_categories::before {
  background: #ffffff;
  content: "";
  display: block;
  height: 3px;
  left: 0;
  position: absolute;
  top: -17px;
  width: 100%;
}
.b-hamburger_categories-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 10px;
  padding: 0 24px;
  text-transform: uppercase;
}
html[dir=rtl] .b-hamburger_categories-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-hamburger_categories-title, .b-dialog.m-care_essentials-product .b-hamburger_categories-title {
  letter-spacing: normal;
}
.m-care_essentials .b-hamburger_categories-title {
  margin-bottom: 20px;
}
.b-hamburger_categories-content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.b-hamburger_categories-item {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  text-decoration: none;
  width: 33.3%;
}
html[dir=rtl] .b-hamburger_categories-item {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-hamburger_categories-item, .b-dialog.m-care_essentials-product .b-hamburger_categories-item {
  letter-spacing: normal;
}
.m-care_essentials .b-hamburger_categories-item {
  letter-spacing: normal;
  font-weight: 300;
}
html[lang=ja] .b-hamburger_categories-item {
  padding: 0 14px;
}
.b-hamburger_categories-show_more {
  align-items: center;
  background: #f3f3f6;
  border-radius: 50%;
  bottom: -20px;
  display: flex;
  height: 40px;
  justify-content: center;
  left: 50%;
  margin-left: -20px;
  position: absolute;
  width: 40px;
}
.b-hamburger_categories-show_more[hidden] {
  display: flex !important;
}
.b-hamburger_categories-show_more[hidden] .b-icon_chevron::before {
  animation-name: animation-chevron-up;
}
.b-hamburger_categories-show_more[hidden] .b-icon_chevron::after {
  animation-name: animation-chevron-down;
}

.b-footer.m-consent-invisible .b-footer_nav-item.consent-settings,
.b-footer.m-consent-invisible .b-footer_nav-link.consent-settings {
  display: none;
}
.b-footer-region.m-1 {
  background-color: #f3f3f6;
  color: #282727;
  padding: 48px 0;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-region.m-1 {
    padding: 40px 0 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-region.m-1 {
    padding: 32px 0;
  }
}
.b-footer-region.m-2, .b-footer-region.m-3 {
  background-color: #f3f3f6;
  color: rgba(40, 39, 39, 0.8);
}
@media screen and (min-width: 768px) {
  .b-footer-region.m-3 .b-content_asset.m-footer-social {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-region.m-3 {
    border-top: 1px solid #d2d1d4;
    padding-top: 25px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-region.m-3 {
    padding-bottom: 50px;
  }
  .b-footer-region.m-3 .b-country_selector {
    margin-bottom: 25px;
    order: 1;
    width: 100%;
  }
  .b-footer-region.m-3 .b-content_asset.m-footer-secure {
    order: 2;
  }
  .b-footer-region.m-3 .b-content_asset.m-footer-social {
    border-top: 1px solid #d2d1d4;
    order: 3;
    width: 100%;
  }
  .b-footer-region.m-3 .b-content_asset.m-footer-logo {
    border-top: 1px solid #d2d1d4;
    display: flex;
    justify-content: center;
    order: 4;
    padding-top: 30px;
    width: 100%;
  }
}
.b-footer-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-footer-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-inner {
    padding-left: 16px;
    padding-right: 16px;
    padding: 0;
  }
}
.b-footer-content {
  display: flex;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-content {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-content {
    flex-direction: column;
  }
}
@media screen and (min-width: 1180px) {
  .b-footer-content.m-1 {
    gap: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-content.m-1 {
    gap: 40px 48px;
  }
}
.b-footer-content .b-content_asset.m-footer-storefinder {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-content .b-content_asset.m-footer-storefinder {
    flex-basis: calc((100% - 48px) / 2);
    max-width: calc((100% - 48px) / 2);
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-content .b-content_asset.m-footer-storefinder {
    border-top: 1px solid #d2d1d4;
    max-width: none;
    padding: 32px 16px;
    width: 100%;
  }
}
@media screen and (min-width: 1180px) {
  .l-page.m-subscription_page .b-footer-content .b-content_asset.m-footer-storefinder {
    max-width: 420px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .l-page.m-subscription_page .b-footer-content .b-content_asset.m-footer-storefinder {
    padding: 0 24px 0 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .l-page.m-subscription_page .b-footer-content .b-content_asset.m-footer-storefinder {
    border-top: none;
  }
}
.l-page.m-subscription_page .b-footer-content {
  justify-content: space-between;
}
.b-footer-newsletters_content {
  position: relative;
}
@media screen and (min-width: 1180px) {
  .b-footer-newsletters_content {
    padding-right: 20px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer-newsletters_content {
    width: 100%;
  }
  .b-footer-find_store .b-button {
    width: 100%;
  }
}
.b-footer-newsletters {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-newsletters {
    flex-basis: calc((100% - 48px) / 2);
    max-width: calc((100% - 48px) / 2);
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-newsletters {
    max-width: none;
    padding: 0 16px 32px;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .b-footer-newsletters:has(.b-newsletters-toggle_form) ~ .b-content_asset.m-footer-storefinder .b-footer-find_store {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    max-height: var(--nl-content-height, 162px);
  }
}
.l-page.m-subscription_page .b-footer-newsletters {
  display: none;
}
.b-footer-security_shopping {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  align-items: center;
  color: #282727;
  display: flex;
}
html[dir=rtl] .b-footer-security_shopping {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer-security_shopping, .b-dialog.m-care_essentials-product .b-footer-security_shopping {
  letter-spacing: normal;
}
@media screen and (max-width: 767.9px) {
  .b-footer-security_shopping {
    padding-bottom: 24px;
  }
}
.b-footer-payment_methods {
  margin: 0 0 28px;
}
.b-footer-services {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
  width: 33.3333333333%;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-services {
    gap: 48px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer-services {
    border-top: 1px solid #d2d1d4;
    display: flex;
    flex-basis: auto;
    margin: 0 -32px;
    max-width: none;
    padding: 32px 32px 0;
    width: calc(100% + 64px);
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-services {
    flex-wrap: wrap;
    margin: 0;
    padding: 32px 16px 0;
    width: 100%;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer-services .b-content_asset {
    width: 50%;
  }
  .b-footer-services .b-content_asset.m-footer-shipping {
    padding-inline-start: 25px;
  }
}
@media screen and (max-width: 1179.9px) and (max-width: 1179.9px) {
  .b-footer-services .b-content_asset.m-footer-shipping {
    padding-left: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-services .b-content_asset {
    width: 100%;
  }
}
@media screen and (min-width: 1180px) {
  .l-page.m-subscription_page .b-footer-services {
    display: flex;
    gap: 90px;
    width: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .l-page.m-subscription_page .b-footer-services {
    border: none;
    flex-basis: 50%;
    flex-direction: column;
    margin: 0;
    padding: 0 24px 0 32px;
  }
}
.b-footer-subregion {
  border-top: 1px solid #d2d1d4;
  padding: 48px 0 25px;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-subregion {
    border: none;
    padding: 24px 0 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-subregion {
    padding: 0;
  }
  .b-content_asset.m-footer-top + .b-footer-subregion {
    padding-top: 18px;
  }
}
.b-footer-subregion .b-content_asset {
  width: 100%;
}
.b-footer-subregion .b-content_asset.m-footer-social {
  max-width: 245px;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-subregion .b-content_asset.m-footer-social {
    max-width: 100%;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-subregion .b-content_asset.m-footer-social {
    display: none;
  }
}
.b-footer-subregion .b-footer-inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-subregion .b-footer-inner {
    flex-wrap: wrap;
  }
}
.b-footer-legal {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  background: #f3f3f6;
  color: #60606a;
  padding: 20px 16px;
  text-align: center;
}
html[dir=rtl] .b-footer-legal {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer-legal, .b-dialog.m-care_essentials-product .b-footer-legal {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-footer-legal {
  color: #8d8d94;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.05;
}
.l-page.m-care_essentials .b-footer-legal span:first-child {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}
@media screen and (max-width: 1179.9px) {
  .b-footer-socials {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 38px;
    text-align: center;
  }
  .b-footer-socials .b-footer_headline-copy {
    margin-bottom: 2px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-socials {
    padding: 32px 16px 20px;
  }
}
.b-footer-cookie {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-footer-cookie {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer-cookie {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-cookie {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-footer-cookie_settings {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
}
.b-footer-cookie_settings.m-disabled, .b-footer-cookie_settings:disabled, .b-footer-cookie_settings[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-footer-cookie_settings {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer-cookie_settings, .b-dialog.m-care_essentials-product .b-footer-cookie_settings {
  letter-spacing: normal;
}
.b-footer-cookie_settings::before {
  content: url("./images/icons/privacyoptions.svg");
  height: 15px;
  margin-right: 6px;
  width: 28px;
}
.b-footer .b-footer-region.m-1 .b-content_asset.m-footer-social {
  display: none;
}
@media screen and (max-width: 1179.9px) {
  .b-footer.m-ca .b-footer-region.m-1 .b-footer-socials, .b-footer.m-us .b-footer-region.m-1 .b-footer-socials {
    display: block;
    padding-top: 0;
    text-align: left;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social {
    display: block;
    padding: 0 25px;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-footer_social-link:first-child, .b-footer.m-us .b-footer-region.m-1 .b-footer_social-link:first-child {
    margin-left: 0;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-footer_social-items, .b-footer.m-us .b-footer-region.m-1 .b-footer_social-items {
    padding: 0 8px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social {
    border-top: 1px solid #d2d1d4;
    display: block;
    padding: 32px 16px 16px;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social .b-footer_headline-copy, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social .b-footer_headline-copy {
    height: auto;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-logo, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-logo {
    border-top: 1px solid #d2d1d4;
    display: flex;
    justify-content: center;
    padding: 30px 16px 10px;
    width: 100%;
  }
  .b-footer.m-ca .b-footer-region.m-1 .b-footer-socials, .b-footer.m-us .b-footer-region.m-1 .b-footer-socials {
    padding-top: 32px;
  }
}
.b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social {
  display: block;
  width: 25%;
}
@media screen and (max-width: 1179.9px) {
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social {
    padding: 0;
    width: calc((100% - 48px) / 2);
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-footer-social {
    width: 100%;
  }
}
.b-footer.m-ca .b-footer-region.m-1 .b-content_asset.m-null, .b-footer.m-us .b-footer-region.m-1 .b-content_asset.m-null {
  display: none;
}
.b-footer.m-ca .b-footer-region.m-3 .b-content_asset.m-footer-social,
.b-footer.m-ca .b-footer-region.m-2 .b-content_asset.m-footer-social, .b-footer.m-us .b-footer-region.m-3 .b-content_asset.m-footer-social,
.b-footer.m-us .b-footer-region.m-2 .b-content_asset.m-footer-social {
  display: none;
}
@media screen and (min-width: 1180px) {
  .b-footer.m-ca .b-footer-region.m-3 .b-content_asset.m-footer-navigation,
  .b-footer.m-ca .b-footer-region.m-2 .b-content_asset.m-footer-navigation, .b-footer.m-us .b-footer-region.m-3 .b-content_asset.m-footer-navigation,
  .b-footer.m-us .b-footer-region.m-2 .b-content_asset.m-footer-navigation {
    width: 100%;
  }
}
.b-footer.m-ca .b-footer-region.m-3, .b-footer.m-us .b-footer-region.m-3 {
  border: none;
}
@media screen and (max-width: 1179.9px) {
  .b-footer.m-ca .b-footer-subregion, .b-footer.m-us .b-footer-subregion {
    padding-top: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer.m-ca .b-content_asset.m-footer-logo, .b-footer.m-us .b-content_asset.m-footer-logo {
    border: none;
    padding-top: 15px;
  }
}
.b-footer.m-kr .b-footer-services {
  display: flex;
  flex: 0 0 auto;
  width: 100%;
}
@media screen and (max-width: 1179.9px) {
  .b-footer.m-kr .b-footer-services {
    border: none;
    margin: 0;
    padding-top: 0;
  }
}
.b-footer.m-kr .b-content_asset.m-footer-payments,
.b-footer.m-kr .b-content_asset.m-footer-shipping {
  margin-bottom: 0;
  width: 35%;
}
@media screen and (max-width: 1179.9px) {
  .b-footer.m-kr .b-content_asset.m-footer-payments,
  .b-footer.m-kr .b-content_asset.m-footer-shipping {
    width: 50%;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer.m-kr .b-content_asset.m-footer-payments,
  .b-footer.m-kr .b-content_asset.m-footer-shipping {
    width: 100%;
  }
}
.b-footer.m-kr .b-footer_services.m-payments {
  margin-bottom: 0;
}
@media screen and (max-width: 767.9px) {
  .b-footer.m-kr .b-footer_services.m-payments {
    margin-bottom: 15px;
  }
}
.b-footer.m-kr .b-footer-region.m-1 {
  padding-bottom: 30px;
}
.b-footer .b-footer-content.m-1 > .b-content_asset.m-footer-payments {
  display: none;
}
.b-footer.m-sea .b-footer-region.m-1 .b-footer-services .b-content_asset.m-footer-payments {
  display: block;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer.m-sea .b-footer-region.m-1 .b-footer-services .b-content_asset.m-footer-payments {
    display: none;
  }
}
.b-footer.m-sea .b-footer-region.m-1 .b-footer-content.m-1 > .b-content_asset.m-footer-payments {
  display: none;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer.m-sea .b-footer-region.m-1 .b-footer-content.m-1 > .b-content_asset.m-footer-payments {
    display: block;
  }
}
.l-page.m-subscription_page .b-footer .b-footer-region.m-1 {
  padding: 40px 0;
}
@media screen and (max-width: 767.9px) {
  .l-page.m-subscription_page .b-footer .b-footer-region.m-1 {
    padding: 0 0 32px;
  }
}

@media screen and (min-width: 1180px) {
  .b-footer_nav {
    display: flex;
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer_nav {
    box-shadow: 0 -1px 0 0 #d2d1d4;
    box-shadow: none;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_nav {
    padding: 0 16px;
  }
}
@media screen and (min-width: 1180px) {
  .b-footer_nav-title {
    color: #282727;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 8px;
    position: relative;
  }
  .b-footer_nav-title .b-icon_chevron {
    display: none;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer_nav-title {
    color: #282727;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1180px) {
  .b-footer_nav-button {
    display: none;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer_nav-button {
    align-items: center;
    background: none;
    border: none;
    color: #282727;
    cursor: pointer;
    display: flex;
    line-height: 24px;
    text-align: start;
    width: 100%;
    font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.03;
    padding: 16px 0;
  }
  html[dir=rtl] .b-footer_nav-button {
    letter-spacing: 0;
  }
}
@media screen and (min-width: 1180px) {
  .l-page.m-care_essentials .b-footer_nav-button {
    display: none;
  }
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_nav-button {
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.5;
  }
}
.b-footer_nav-heading {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}
html[dir=rtl] .b-footer_nav-heading {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_nav-heading, .b-dialog.m-care_essentials-product .b-footer_nav-heading {
  letter-spacing: normal;
}
@media screen and (max-width: 1179.9px) {
  .b-footer_nav-heading {
    display: none;
  }
}
.l-page.m-care_essentials .b-footer_nav-heading {
  font-size: 20px;
  letter-spacing: normal;
  line-height: 1.87;
  text-transform: capitalize;
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_nav-heading {
    display: none;
  }
  .b-footer_nav-content {
    display: none;
    overflow: hidden;
    position: relative;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: height;
  }
  .b-footer_nav-content[aria-hidden=false], .b-footer_nav-column:not([data-initialized="1"]) .b-footer_nav-content {
    display: block;
  }
  .l-page.m-care_essentials .b-footer_nav-content {
    margin-top: -10px;
  }
  .b-footer_nav-list {
    font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
    letter-spacing: 0.07em;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: #282727;
    overflow: hidden;
    padding: 0 16px 20px 0;
  }
  html[dir=rtl] .b-footer_nav-list {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-footer_nav-list, .b-dialog.m-care_essentials-product .b-footer_nav-list {
    letter-spacing: normal;
  }
  .l-page.m-care_essentials .b-footer_nav-list {
    padding-bottom: 10px;
  }
}
.b-footer_nav-item {
  display: block;
  margin: 4px 0;
}
.b-footer_nav-item:first-child {
  margin-top: 0;
}
.b-footer_nav-item:last-child {
  margin-bottom: 0;
}
.l-page.m-care_essentials .b-footer_nav-item {
  margin: 7px 0;
}
.b-footer_nav-link {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  color: #60606a;
  padding: 4px 0;
}
.b-footer_nav-link.m-disabled::after, .b-footer_nav-link:disabled::after, .b-footer_nav-link[disabled]::after {
  background: #898992;
}
.b-footer_nav-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-footer_nav-link:hover::after, .b-footer_nav-link:active::after {
  transform: scaleX(0);
}
.b-footer_nav-link.m-disabled, .b-footer_nav-link:disabled, .b-footer_nav-link[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-footer_nav-link {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_nav-link, .b-dialog.m-care_essentials-product .b-footer_nav-link {
  letter-spacing: normal;
}
.b-footer_nav-link.m-disabled::after, .b-footer_nav-link:disabled::after, .b-footer_nav-link[disabled]::after {
  background: #898992;
}
.b-footer_nav-link::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.b-footer_nav-link:hover::after, .b-footer_nav-link:active::after {
  transform: scaleX(1);
}
.l-page.m-care_essentials .b-footer_nav-link {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.4;
}
@media screen and (min-width: 1180px) {
  .b-footer_nav-column {
    flex-basis: 20%;
    padding-inline-end: 20px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-footer_nav-column {
    border-bottom: 1px solid #d2d1d4;
    margin: 0;
  }
  .b-footer_nav-column:first-child {
    border-top: 1px solid #d2d1d4;
  }
}
.b-footer_nav-find_store .b-button {
  line-height: 49px;
}
@media screen and (min-width: 768px) {
  .b-footer_nav-find_store .b-button {
    width: 100%;
  }
}
.m-care_essentials .b-footer_nav-find_store .b-button {
  background: #ffffff;
  max-width: 100%;
}
@media not all and (pointer: coarse) {
  .m-care_essentials .b-footer_nav-find_store .b-button:hover {
    background: #000;
  }
}
@media screen and (min-width: 1180px) {
  .l-page.m-subscription_page .b-footer_nav-find_store .b-button {
    max-width: 400px;
  }
}
.b-footer_nav-find_store .b-button svg {
  margin-top: -1px;
}
.l-page.m-care_essentials .b-footer_nav-find_store .b-button {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: ease-out 150ms;
  transition-property: background-color, color, border;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background: #ffffff;
  border-color: #d0c8bf;
  color: #282727;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.048em;
  line-height: 1.12;
  text-transform: uppercase;
}
@media not all and (pointer: coarse) {
  .l-page.m-care_essentials .b-footer_nav-find_store .b-button:hover {
    background: #d0c8bf;
    color: #282727;
  }
}
.l-page.m-care_essentials .b-footer_nav-find_store .b-button:active {
  background: #d0c8bf;
  color: #282727;
}
html[dir=rtl] .l-page.m-care_essentials .b-footer_nav-find_store .b-button {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_nav-find_store .b-button-icon_left {
  margin-top: -7px;
}
@media screen and (min-width: 1440px) {
  html[lang=ja] .b-footer_nav {
    justify-content: space-between;
  }
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  html[lang=ja] .b-footer_nav div {
    flex-basis: 33.3333333333% !important;
  }
}
@media screen and (min-width: 1440px) {
  html[lang=ja] .b-footer_nav div {
    flex-basis: auto !important;
    padding-inline-end: 0;
  }
  html[lang=ja] .b-footer_nav div:last-child {
    flex-basis: 12% !important;
  }
}

.b-footer_info {
  align-items: center;
}
@media screen and (max-width: 767.9px) {
  .b-footer_info {
    padding-top: 46px;
  }
}
.b-footer_info .b-content_asset:last-child {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  justify-content: flex-end;
}
.b-footer_info-inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (max-width: 767.9px) {
  .b-footer_info-inner {
    flex-direction: column;
  }
}
.b-footer_info .b-header_actions-item {
  flex-basis: 0;
  flex-grow: 1;
}

@media screen and (min-width: 768px) {
  .b-footer_social {
    flex-basis: 33.3333333333%;
  }
}
.b-footer_social-items {
  display: flex;
  gap: 20px;
  margin: 16px 0 0;
}
.b-footer_social-link {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #282727;
  min-height: 32px;
  min-width: 32px;
}
@media screen and (max-width: 1179.9px) {
  .b-footer_social-link {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-footer_social-link:hover {
  color: #001489;
}
.m-care_essentials .b-footer_social-link:hover, .m-1774 .b-footer_social-link:hover {
  color: inherit;
}
@media screen and (max-width: 1179.9px) {
  .b-footer_social-link {
    min-height: 32px;
    min-width: 32px;
  }
}
.b-footer_social svg {
  fill: currentColor;
  height: 22px;
}
.b-footer_social .b-footer_headline-copy {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-footer_social .b-footer_headline-copy {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_social .b-footer_headline-copy, .b-dialog.m-care_essentials-product .b-footer_social .b-footer_headline-copy {
  letter-spacing: normal;
}

.b-footer_logo .b-footer_icon.m-logo {
  background-position: -96px -80px;
  height: 80px;
  width: 80px;
}
.m-sea .b-footer_logo .b-footer_icon.m-logo {
  background-position: -80px -80px;
}

.b-footer_icon {
  background: url("./images/footer-icons.svg") no-repeat;
  display: block;
  height: 24px;
  width: 36px;
}
.b-footer_icon.m-dhl {
  background-position: -96px -389px;
}
.b-footer_icon.m-ups {
  background-position: -152px -389px;
}
.b-footer_icon.m-austrian_post {
  background-position: -208px -389px;
}
.b-footer_icon.m-bpost {
  background-position: -264px -389px;
}
.b-footer_icon.m-postnord {
  background-position: -320px -389px;
}
.b-footer_icon.m-posti {
  background-position: -376px -389px;
}
.b-footer_icon.m-la_poste {
  background-position: -432px -389px;
}
.b-footer_icon.m-colissimo {
  background-position: -488px -389px;
}
.b-footer_icon.m-hermes {
  background-position: -544px -389px;
}
.b-footer_icon.m-postnl {
  background-position: -600px -389px;
}
.b-footer_icon.m-bring {
  background-position: -656px -389px;
}
.b-footer_icon.m-poczta_polska {
  background-position: -712px -389px;
}
.b-footer_icon.m-colis_prive {
  background-position: -768px -389px;
}
.b-footer_icon.m-evri {
  background-position: -824px -389px;
}
.b-footer_icon.m-swiss_post {
  background-position: -880px -389px;
}
.b-footer_icon.m-gls {
  background-position: -936px -389px;
}
.b-footer_icon.m-correos {
  background-position: -992px -389px;
}
.b-footer_icon.m-poste_italiane {
  background-position: -1048px -388px;
}
.b-footer_icon.m-royal_mail {
  background-position: -1104px -389px;
}
.b-footer_icon.m-inpost {
  background-position: -1160px -389px;
}
.b-footer_icon.m-sending {
  background-position: -1216px -389px;
}
.m-mea .b-footer_icon.m-naqel {
  background-position: -96px -292px;
}
.b-footer_icon.m-sagawa {
  background-position: -96px -389px;
}
.b-footer_icon.m-visa {
  background-position: -96px -292px;
}
.m-sea .b-footer_icon.m-visa {
  background-position: -80px -292px;
}
.m-mea .b-footer_icon.m-visa {
  background-position: -96px -587px;
}
.b-footer_icon.m-mc {
  background-position: -152px -292px;
}
.m-sea .b-footer_icon.m-mc {
  background-position: -136px -292px;
}
.m-mea .b-footer_icon.m-mc {
  background-position: -152px -587px;
}
.b-footer_icon.m-amex {
  background-position: -208px -292px;
}
.m-sea .b-footer_icon.m-amex {
  background-position: -192px -292px;
}
.m-mea .b-footer_icon.m-amex {
  background-position: -208px -587px;
}
.b-footer_icon.m-applepay {
  background-position: -376px -292px;
}
.m-mea .b-footer_icon.m-applepay {
  background-position: -320px -587px;
}
.b-footer_icon.m-diners {
  background-position: -432px -292px;
}
.m-sea .b-footer_icon.m-diners {
  background-position: -304px -292px;
}
.m-jp .b-footer_icon.m-diners {
  background-position: -264px -292px;
}
.m-mea .b-footer_icon.m-diners {
  background-position: -264px -587px;
}
.b-footer_icon.m-klarna {
  background-position: -320px -292px;
}
.b-footer_icon.m-paypal {
  background-position: -264px -292px;
}
.m-sea .b-footer_icon.m-paypal {
  background-position: -248px -292px;
}
.b-footer_icon.m-ideal {
  background-position: -488px -292px;
}
.b-footer_icon.m-blik {
  background-position: -544px -292px;
}
.b-footer_icon.m-tabby {
  background-position: -376px -587px;
}
.b-footer_icon.m-discover {
  background-position: -432px -587px;
}
.b-footer_icon.m-k_net {
  background-position: -488px -587px;
}
.b-footer_icon.m-benefit_pay {
  background-position: -544px -587px;
}
.b-footer_icon.m-g_pay {
  background-position: -600px -587px;
}
.b-footer_icon.m-jcb {
  background-position: -360px -292px;
}
.m-jp .b-footer_icon.m-jcb {
  background-position: -320px -292px;
}
.b-footer_icon.m-union_pay {
  background-position: -416px -292px;
}
.b-footer_icon.m-grab_pay_later {
  background-position: -472px -292px;
}
.b-footer_icon.m-touch_n_go {
  background-position: -528px -292px;
}
.b-footer_icon.m-grab_pay {
  background-position: -584px -292px;
}
.b-footer_icon.m-fpx {
  background-position: -640px -292px;
}
.b-footer_icon.m-atome {
  background-position: -696px -292px;
}
.b-footer_icon.m-duit_now {
  background-position: -752px -292px;
}
.b-footer_icon.m-g_cash {
  background-position: -808px -292px;
}
.b-footer_icon.m-pay_now {
  background-position: -864px -292px;
}
.b-footer_icon.m-we_chat_pay {
  background-position: -920px -292px;
}
.b-footer_icon.m-ali_pay {
  background-position: -472px -292px;
}
.b-footer_icon.m-cash_on_delivery {
  background-position: -376px -292px;
}
.b-footer_icon.m-pay_pay {
  background-position: -431px -292px;
}
.b-footer_icon.m-naver_pay {
  background-position: -96px -292px;
}
.b-footer_icon.m-kcp {
  background-position: -152px -292px;
}
.b-footer_icon.m-kakao_pay {
  background-position: -208px -292px;
}
.b-footer_icon.m-facebook, .b-footer_icon.m-instagram, .b-footer_icon.m-pinterest, .b-footer_icon.m-x, .b-footer_icon.m-youtube, .b-footer_icon.m-snapchat, .b-footer_icon.m-tick_tok, .b-footer_icon.m-line {
  height: 33px;
  width: 33px;
}
.b-footer_icon.m-facebook {
  background-position: -92px -481px;
}
.m-us .b-footer_icon.m-facebook, .m-ca .b-footer_icon.m-facebook {
  background-position: -156px -287px;
}
.m-mea .b-footer_icon.m-facebook, .m-kr .b-footer_icon.m-facebook {
  background-position: -155px -385px;
}
.m-sea .b-footer_icon.m-facebook {
  background-position: -141px -385px;
}
.m-jp .b-footer_icon.m-facebook {
  background-position: -155px -481px;
}
.b-footer_icon.m-instagram {
  background-position: -155px -481px;
}
.m-us .b-footer_icon.m-instagram, .m-ca .b-footer_icon.m-instagram {
  background-position: -92px -287px;
}
.m-mea .b-footer_icon.m-instagram, .m-kr .b-footer_icon.m-instagram {
  background-position: -92px -385px;
}
.m-sea .b-footer_icon.m-instagram {
  background-position: -76px -385px;
}
.m-jp .b-footer_icon.m-instagram {
  background-position: -220px -481px;
}
.b-footer_icon.m-pinterest {
  background-position: -220px -481px;
}
.m-us .b-footer_icon.m-pinterest, .m-ca .b-footer_icon.m-pinterest {
  background-position: -219px -287px;
}
.b-footer_icon.m-x {
  background-position: -283px -481px;
}
.b-footer_icon.m-youtube {
  background-position: -347px -481px;
}
.m-us .b-footer_icon.m-youtube, .m-ca .b-footer_icon.m-youtube {
  background-position: -284px -287px;
}
.m-sea .b-footer_icon.m-youtube {
  background-position: -204px -385px;
}
.m-jp .b-footer_icon.m-youtube {
  background-position: -283px -481px;
}
.m-kr .b-footer_icon.m-youtube {
  background-position: -220px -385px;
}
.b-footer_icon.m-line {
  background-position: -92px -481px;
}
.b-footer_icon.m-snapchat {
  background-position: -221px -385px;
}
.b-footer_icon.m-tick_tok {
  background-position: -283px -385px;
}
.b-footer_icon.m-ssl {
  background-position: -96px -580px;
  height: 32px;
  width: 83px;
}
.m-kr .b-footer_icon.m-ssl, .m-mea .b-footer_icon.m-ssl {
  background-position: -96px -484px;
}
.m-sea .b-footer_icon.m-ssl {
  background-position: -80px -484px;
}
html[data-locale^=ar] .b-footer_icon.m-ssl {
  background-position: -250px -484px;
}
html[lang=en] .m-eu .b-footer_icon.m-ssl {
  background-position: -218px -581px;
}
html[lang=da] .m-eu .b-footer_icon.m-ssl {
  background-position: -340px -581px;
}
html[lang=fr] .m-eu .b-footer_icon.m-ssl {
  background-position: -456px -581px;
}
html[lang=it] .m-eu .b-footer_icon.m-ssl {
  background-position: -578px -581px;
}
html[lang=nl] .m-eu .b-footer_icon.m-ssl {
  background-position: -700px -581px;
}
html[lang=es] .m-eu .b-footer_icon.m-ssl {
  background-position: -813px -581px;
  width: 86px;
}
html[lang=sv] .m-eu .b-footer_icon.m-ssl {
  background-position: -938px -581px;
}
.b-footer-socials .b-footer_icon {
  filter: brightness(0) saturate(100%) invert(13%) sepia(22%) saturate(4%) hue-rotate(314deg) brightness(103%) contrast(98%);
}

.b-copyright {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  color: #60606a;
  padding: 32px 0 16px;
  text-align: center;
  width: 100%;
}
html[dir=rtl] .b-copyright {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-copyright, .b-dialog.m-care_essentials-product .b-copyright {
  letter-spacing: normal;
}
@media screen and (max-width: 767.9px) {
  .b-copyright {
    padding: 17px 16px 12px;
  }
}
.b-copyright.m-simplified {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  padding: 32px 0;
}
html[dir=rtl] .b-copyright.m-simplified {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-copyright.m-simplified, .b-dialog.m-care_essentials-product .b-copyright.m-simplified {
  letter-spacing: normal;
}
@media screen and (max-width: 767.9px) {
  .b-copyright.m-simplified {
    padding: 32px 0;
  }
}
.l-page.m-care_essentials .b-copyright {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.05;
}
.b-copyright-copy {
  display: block;
  margin-bottom: 4px;
}
@media screen and (max-width: 767.9px) {
  .b-copyright-copy {
    margin-bottom: 8px;
  }
}
.b-copyright-copy.m-simplified {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .b-copyright-link {
    margin-inline-start: 16px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-copyright-link {
    margin-inline-end: 16px;
  }
}
.b-copyright-link.m-simplified {
  display: inline-block;
  margin: 12px 0 0;
}
.b-copyright a {
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  position: relative;
}
.b-copyright a.m-disabled, .b-copyright a:disabled, .b-copyright a[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-copyright a {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-copyright a, .b-dialog.m-care_essentials-product .b-copyright a {
  letter-spacing: normal;
}
.b-copyright a.m-disabled::after, .b-copyright a:disabled::after, .b-copyright a[disabled]::after {
  background: #898992;
}
.b-copyright a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(0);
}
.b-copyright a:hover::after, .b-copyright a:active::after {
  transform: scaleX(1);
}

.b-newsletters-form_wrapper .b-newsletters-toggle_form,
.b-newsletters-form_wrapper .b-drawer-close.m-newsletters {
  display: none;
}
.b-newsletters-form_wrapper .b-tab_panel {
  display: block;
}
.b-newsletters-message_validation {
  color: #d01d1b;
  line-height: 1.2;
  margin-top: 8px;
}
.b-newsletters-message_success {
  color: #008a00;
  margin-top: 24px;
}
.b-newsletters-message_success_announcement {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-newsletters-privacy {
  margin-top: 16px;
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-privacy {
    max-width: 100%;
  }
}
@media not all and (pointer: coarse) {
  .b-newsletters-privacy a:hover {
    text-decoration: none;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_middle .b-newsletters-privacy {
    max-width: 100%;
  }
}
.b-newsletters-message_title {
  color: #282727;
  display: flex;
  margin: 16px 0;
}
.b-newsletters-message_title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0002 1.8002C16.0812 1.8002 20.2002 5.91918 20.2002 11.0002C20.2002 16.0812 16.0812 20.2002 11.0002 20.2002C5.91917 20.2002 1.80019 16.0812 1.80019 11.0002C1.80019 5.91918 5.91917 1.8002 11.0002 1.8002ZM21.8002 11.0002C21.8002 5.03552 16.9649 0.200195 11.0002 0.200195C5.03552 0.200195 0.200195 5.03552 0.200195 11.0002C0.200195 16.9649 5.03552 21.8002 11.0002 21.8002C16.9649 21.8002 21.8002 16.9649 21.8002 11.0002ZM9.09738 14.0714C9.07086 14.0448 9.04658 14.0169 9.02456 13.9878L6.44588 11.4092C6.13347 11.0967 6.13347 10.5902 6.44589 10.2778C6.75831 9.96536 7.26484 9.96536 7.57726 10.2778L9.66842 12.369L14.2193 7.81806C14.5317 7.50564 15.0383 7.50563 15.3507 7.81805C15.6631 8.13047 15.6631 8.63701 15.3507 8.94942L10.2574 14.0427C10.25 14.0507 10.2424 14.0587 10.2346 14.0665C10.2167 14.0844 10.1982 14.1012 10.1791 14.117C9.86481 14.383 9.39375 14.3677 9.09738 14.0714Z' fill='%23282727'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  height: 22px;
  margin-inline-end: 12px;
  width: 22px;
}
.m-error .b-newsletters-message_title {
  align-items: flex-start;
  color: #d01d1b;
}
.m-error .b-newsletters-message_title::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0002 2.79995C6.91918 2.79995 2.8002 6.91893 2.8002 12C2.8002 17.081 6.91918 21.2 12.0002 21.2C17.0812 21.2 21.2002 17.081 21.2002 12C21.2002 6.91893 17.0812 2.79995 12.0002 2.79995ZM1.2002 12C1.2002 6.03528 6.03552 1.19995 12.0002 1.19995C17.9649 1.19995 22.8002 6.03528 22.8002 12C22.8002 17.9646 17.9649 22.7999 12.0002 22.7999C6.03552 22.7999 1.2002 17.9646 1.2002 12Z' fill='%23d01d1b'/%3E%3Cpath d='M12.025 18.65C11.45 18.65 11 18.2 11 17.625C11 17.05 11.45 16.6 12.025 16.6C12.575 16.6 13.05 17.083 13.05 17.625C13.05 18.192 12.6 18.65 12.025 18.65Z' fill='%23d01d1b'/%3E%3Cpath d='M11.9932 14.317C11.5352 14.317 11.1602 13.942 11.1602 13.484V5.63403C11.1602 5.17603 11.5352 4.80103 11.9932 4.80103C12.4512 4.80103 12.8262 5.17603 12.8262 5.63403V13.484C12.8262 13.942 12.4512 14.317 11.9932 14.317Z' fill='%23d01d1b'/%3E%3C/svg%3E%0A");
  height: 16px;
  width: 16px;
}
.l-page.m-subscription_page .b-newsletters-message_title {
  display: inline;
}
.l-page.m-subscription_page .b-newsletters-message_title::before {
  background-image: url("./images/icons/tick.svg");
  inset-inline-start: 16px;
  position: absolute;
}
.b-newsletters-message_container {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  max-width: 705px;
  scroll-margin-top: 150px;
}
html[dir=rtl] .b-newsletters-message_container {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-message_container, .b-dialog.m-care_essentials-product .b-newsletters-message_container {
  letter-spacing: normal;
}
.b-account .b-newsletters-message_container.m-success {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  background-color: #ebedf6;
  border: 1px solid #001489;
  border-radius: 4px;
  margin: 0 auto;
  align-items: center;
  color: #282727;
  cursor: default;
  display: flex;
  background-color: #ebf6eb;
  border-color: #008a00;
  visibility: visible;
  margin: 0 0 32px;
  padding: 16px;
}
html[dir=rtl] .b-account .b-newsletters-message_container.m-success {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-account .b-newsletters-message_container.m-success, .b-dialog.m-care_essentials-product .b-account .b-newsletters-message_container.m-success {
  letter-spacing: normal;
}
.b-account .b-newsletters-message_container.m-success::before {
  content: url("./images/icons/info.svg");
  height: 24px;
  margin-bottom: auto;
  margin-inline-end: 12px;
  width: 24px;
  content: url("./images/icons/tick.svg");
}
.b-newsletters-advantages {
  max-width: 705px;
}
.b-newsletters-advantages_title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 32px;
  text-align: center;
}
html[dir=rtl] .b-newsletters-advantages_title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-advantages_title, .b-dialog.m-care_essentials-product .b-newsletters-advantages_title {
  letter-spacing: normal;
}
.l-page.m-subscription_page .b-newsletters-message_container {
  border-radius: 4px;
  color: #282727;
  cursor: default;
  display: inline-block;
  margin: 0;
  padding: 12px 16px;
  padding-inline-start: 52px;
  position: relative;
}
.l-page.m-subscription_page .b-newsletters-message_container.m-success {
  background-color: #ebf6eb;
  border: 1px solid #008a00;
}
.b-newsletters-signup_form .b-form_set-required {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  color: #60606a;
  margin-bottom: 20px;
  max-width: 100%;
  padding: 0;
  text-align: end;
  white-space: normal;
  width: 100%;
}
html[dir=rtl] .b-newsletters-signup_form .b-form_set-required {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-signup_form .b-form_set-required, .b-dialog.m-care_essentials-product .b-newsletters-signup_form .b-form_set-required {
  letter-spacing: normal;
}
.l-page.m-subscription_page .b-newsletters-message_body {
  display: inline;
}
.b-newsletters-optout_success {
  text-align: center;
}
.b-newsletters-signup_top {
  margin: auto;
  max-width: 700px;
  padding: 12px 0 28px;
  text-align: center;
}
.b-newsletters-signup_top p {
  font-size: 18px;
  line-height: 26px;
}
.b-newsletters-settings {
  border: 1px solid #f3f3f6;
  margin-left: auto;
  margin-right: auto;
  min-width: 514px;
  padding: 20px 24px 24px;
  width: 53.75%;
}
.b-newsletters-settings_header {
  border-bottom: 2px solid #f3f3f6;
  font-size: 24px;
  line-height: 26px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  text-align: center;
  text-transform: uppercase;
}
.b-newsletters-settings .b-form_field {
  max-width: 100%;
}
.b-newsletters-signup_img img {
  height: auto;
  max-width: 100%;
  padding-bottom: 8px;
}
.b-newsletters-optout_error {
  background-color: rgba(208, 29, 27, 0.025);
  border: 1px solid #d01d1b;
  color: #d01d1b;
  font-size: 14px;
  margin-bottom: 24px;
  padding: 18px 18px 18px 54px;
  position: relative;
}
.b-newsletters-optout_error a {
  color: #d01d1b;
}
.b-newsletters-optout_error::before {
  content: url("./images/icons/warning.svg");
  left: 18px;
  position: absolute;
}
.b-newsletters-signup_header {
  margin-bottom: 20px;
}
.b-newsletters-signup_header .b-newsletters-signup_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
  text-align: center;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_header .b-newsletters-signup_title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-newsletters-signup_header .b-newsletters-signup_title {
  letter-spacing: 0;
}
.b-newsletters-signup_header_text {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
}
html[dir=rtl] .b-newsletters-signup_header_text {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-signup_header_text, .b-dialog.m-care_essentials-product .b-newsletters-signup_header_text {
  letter-spacing: normal;
}
@media screen and (min-width: 1180px) {
  .b-newsletters-signup_header_text {
    padding: 0 34px;
  }
}
.b-newsletters-signup_middle {
  background-color: #f3f3f6;
  display: flex;
  padding: 40px;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_middle {
    flex-direction: column;
    padding: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-signup_middle {
    padding: 32px 20px 20px;
  }
}
.b-newsletters-signup_form, .b-newsletters-signup_list {
  width: 100%;
}
@media screen and (min-width: 1180px) {
  .b-newsletters-signup_form, .b-newsletters-signup_list {
    width: 50%;
  }
  .b-newsletters-signup_form {
    padding-inline-start: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-newsletters-signup_form {
    padding-top: 24px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-signup_form {
    padding-top: 20px;
  }
}
.b-newsletters-signup_form .b-form_field {
  margin-bottom: 16px;
}
.b-newsletters-signup_form .b-form_field.m-email {
  margin-bottom: 0;
}
@media screen and (min-width: 1180px) {
  .b-newsletters-signup_list {
    border-inline-end: 1px solid #d2d1d4;
    padding-inline-end: 32px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_list {
    border-bottom: 1px solid #d2d1d4;
    padding-bottom: 24px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-signup_list {
    padding-bottom: 20px;
  }
}
.b-newsletters-signup_list .b-newsletters-signup_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_list .b-newsletters-signup_title {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-newsletters-signup_list .b-newsletters-signup_title {
  letter-spacing: 0;
}
.b-newsletters-signup_items {
  margin-top: 32px;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_items {
    margin-top: 20px;
  }
}
.b-newsletters-signup_item {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  align-items: center;
  color: #282727;
  cursor: default;
  display: flex;
  font-size: 14px;
  margin-bottom: 13px;
}
html[dir=rtl] .b-newsletters-signup_item {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-signup_item, .b-dialog.m-care_essentials-product .b-newsletters-signup_item {
  letter-spacing: normal;
}
.b-newsletters-signup_item::before {
  content: url("./images/icons/tick-blue.svg");
  height: 24px;
  margin-bottom: auto;
  margin-inline-end: 12px;
  width: 24px;
}
.b-newsletters-signup_item:last-child {
  margin-bottom: 0;
}
.b-newsletters-signup_bottom {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 12px;
  margin-top: 12px;
}
html[dir=rtl] .b-newsletters-signup_bottom {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-signup_bottom, .b-dialog.m-care_essentials-product .b-newsletters-signup_bottom {
  letter-spacing: normal;
}
.b-newsletters-signup_bottom.m-availability_reminder {
  display: none;
}
.b-newsletters-banner picture {
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  padding-bottom: 418px;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-newsletters-banner picture {
    padding-bottom: 293px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-banner picture {
    padding-bottom: 143px;
  }
}
.b-newsletters-banner picture img {
  border: none;
  bottom: 0;
  color: #ebebea;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-newsletters-optout_header, .b-newsletters-subscribed_header {
  margin-bottom: 32px;
  text-align: center;
}
.b-newsletters-optout_header .b-newsletters-signup_title, .b-newsletters-subscribed_header .b-newsletters-signup_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-optout_header .b-newsletters-signup_title, .b-newsletters-subscribed_header .b-newsletters-signup_title {
    font-size: 32px;
    line-height: 0.98;
  }
}
html[dir=rtl] .b-newsletters-optout_header .b-newsletters-signup_title, html[dir=rtl] .b-newsletters-subscribed_header .b-newsletters-signup_title {
  letter-spacing: 0;
}
.b-newsletters-optout_header_text, .b-newsletters-subscribed_header_text {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-top: 24px;
}
html[dir=rtl] .b-newsletters-optout_header_text, html[dir=rtl] .b-newsletters-subscribed_header_text {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-optout_header_text, .b-dialog.m-care_essentials-product .b-newsletters-optout_header_text, .l-page.m-care_essentials .b-newsletters-subscribed_header_text, .b-dialog.m-care_essentials-product .b-newsletters-subscribed_header_text {
  letter-spacing: normal;
}
.b-newsletters-optout_icon, .b-newsletters-subscribed_icon {
  margin-bottom: 24px;
}
.b-newsletters-optout_icon svg, .b-newsletters-subscribed_icon svg {
  height: 40px;
  width: 40px;
}
.b-newsletters-optout_icon.m-success {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.b-newsletters-optout_icon.m-success::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.0002 1.8002C16.0812 1.8002 20.2002 5.91918 20.2002 11.0002C20.2002 16.0812 16.0812 20.2002 11.0002 20.2002C5.91917 20.2002 1.80019 16.0812 1.80019 11.0002C1.80019 5.91918 5.91917 1.8002 11.0002 1.8002ZM21.8002 11.0002C21.8002 5.03552 16.9649 0.200195 11.0002 0.200195C5.03552 0.200195 0.200195 5.03552 0.200195 11.0002C0.200195 16.9649 5.03552 21.8002 11.0002 21.8002C16.9649 21.8002 21.8002 16.9649 21.8002 11.0002ZM9.09738 14.0714C9.07086 14.0448 9.04658 14.0169 9.02456 13.9878L6.44588 11.4092C6.13347 11.0967 6.13347 10.5902 6.44589 10.2778C6.75831 9.96536 7.26484 9.96536 7.57726 10.2778L9.66842 12.369L14.2193 7.81806C14.5317 7.50564 15.0383 7.50563 15.3507 7.81805C15.6631 8.13047 15.6631 8.63701 15.3507 8.94942L10.2574 14.0427C10.25 14.0507 10.2424 14.0587 10.2346 14.0665C10.2167 14.0844 10.1982 14.1012 10.1791 14.117C9.86481 14.383 9.39375 14.3677 9.09738 14.0714Z' fill='%23282727'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  height: 38px;
  width: 38px;
}
.b-newsletters-optout_form .b-form_field {
  margin-bottom: 32px;
  max-width: 100%;
}
.b-newsletters-optout_form .b-form_field .b-form_field-label.m-textarea {
  display: none;
}
.b-newsletters-optout_form .b-form_field .b-form_field-caption.m-end {
  display: none;
}
.b-newsletters-optout_form .b-form_field .b-textarea {
  margin-top: -20px;
  padding: 12px 16px;
}
.b-newsletters-optout_bottom {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: center;
}
html[dir=rtl] .b-newsletters-optout_bottom {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-optout_bottom, .b-dialog.m-care_essentials-product .b-newsletters-optout_bottom {
  letter-spacing: normal;
}
.b-newsletters-optout_social_title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-top: 32px;
  padding: 24px 0;
}
html[dir=rtl] .b-newsletters-optout_social_title {
  letter-spacing: 0;
}
.b-newsletters-optout_social_list {
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
}
@media screen and (max-width: 767.9px) {
  .b-newsletters-optout_social_list {
    padding-bottom: 0;
  }
}
.b-newsletters-optout_social_link {
  display: flex;
  margin: 0 10px;
}
.b-newsletters-optout_social_link::before {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  height: 32px;
  width: 32px;
}
.b-newsletters-optout_social_link.m-instagram::before {
  background-image: url("./images/icons/instagram.svg");
}
.b-newsletters-optout_social_link.m-facebook::before {
  background-image: url("./images/icons/facebook.svg");
}
.b-newsletters-optout_social_link.m-pinterest::before {
  background-image: url("./images/icons/pinterest.svg");
}
.b-newsletters-optout_social_link.m-twitter::before {
  background-image: url("./images/icons/twitter.svg");
}
.b-newsletters-optout_social_link.m-youtube::before {
  background-image: url("./images/icons/youtube.svg");
}
.b-newsletters-unsubscribe_header {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 24px;
  margin-top: 32px;
  text-align: center;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-unsubscribe_header {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-newsletters-unsubscribe_header {
  letter-spacing: 0;
}
.b-newsletters-unsubscribe_content {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  color: #60606a;
  font-size: 14px;
  margin-bottom: 24px;
  text-align: center;
}
html[dir=rtl] .b-newsletters-unsubscribe_content {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters-unsubscribe_content, .b-dialog.m-care_essentials-product .b-newsletters-unsubscribe_content {
  letter-spacing: normal;
}
.b-newsletters-submit {
  margin-bottom: 8px;
}
.b-newsletters fieldset {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 7px;
  margin-inline-start: 0;
}
.b-newsletters fieldset .b-form_field-label {
  margin-bottom: 12px;
  margin-inline-start: 0;
  width: 100%;
}
.b-newsletters fieldset .b-form_field-message {
  width: 100%;
}
.b-newsletters fieldset .b-radio {
  margin-inline-end: 24px;
}
.b-newsletters fieldset .b-radio.b-radio_custom-lenght_2 {
  flex: 0 0 auto;
}
.b-newsletters fieldset .b-radio.b-radio_custom-lenght_2 .b-radio-icon {
  border-width: 1px;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters .b-footer_headline-copy {
    max-width: 380px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-newsletters .b-form_field {
    max-width: 100%;
  }
}
.b-newsletters .b-form_field.m-email {
  margin-bottom: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-newsletters-signup_middle .b-newsletters .b-form_field {
    max-width: 100%;
  }
}
.b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy {
  margin: 20px 0 24px;
}
.b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a {
  background-image: linear-gradient(to right, currentcolor, currentcolor);
  background-position: bottom center;
  background-repeat: no-repeat;
  display: inline;
  position: relative;
  text-decoration: none;
  transition: background-size ease-out 150ms;
  background-size: 100% 1px;
}
.b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a.m-disabled, .b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a:disabled, .b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a[disabled] {
  background-image: linear-gradient(to right, #898992, #898992);
}
.b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a::after {
  display: none;
}
.b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a:active, .b-footer-newsletters .b-newsletters .b-form_field.m-agree_to_privacy a:hover {
  background-size: 0% 1px;
}
.b-newsletters .b-select-input,
.b-newsletters .b-input {
  background: transparent;
}
.b-newsletters .b-select-input::-ms-clear,
.b-newsletters .b-input::-ms-clear {
  display: none;
}
.b-newsletters .b-checkbox-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  display: flex;
}
html[dir=rtl] .b-newsletters .b-checkbox-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters .b-checkbox-label, .b-dialog.m-care_essentials-product .b-newsletters .b-checkbox-label {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-newsletters .b-checkbox-label {
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.22;
}
html[dir=rtl] .l-page.m-care_essentials .b-newsletters .b-checkbox-label {
  letter-spacing: 0;
}
.b-newsletters .b-form_field-required_mark {
  display: inline;
  margin-inline-end: 2px;
  margin-inline-start: 0;
}
.b-newsletters-signup_middle .b-newsletters .b-form_field-required_mark {
  display: inline-block;
}
.b-newsletters .showless-button,
.b-newsletters .showmore-button {
  position: relative;
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  text-decoration: none;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
  padding-top: 8px;
}
.b-newsletters .showless-button.m-disabled::after, .b-newsletters .showless-button:disabled::after, .b-newsletters .showless-button[disabled]::after,
.b-newsletters .showmore-button.m-disabled::after,
.b-newsletters .showmore-button:disabled::after,
.b-newsletters .showmore-button[disabled]::after {
  background: #898992;
}
.b-newsletters .showless-button::after,
.b-newsletters .showmore-button::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-newsletters .showless-button:hover::after, .b-newsletters .showless-button:active::after,
.b-newsletters .showmore-button:hover::after,
.b-newsletters .showmore-button:active::after {
  transform: scaleX(0);
}
.b-newsletters .showless-button.m-disabled, .b-newsletters .showless-button:disabled, .b-newsletters .showless-button[disabled],
.b-newsletters .showmore-button.m-disabled,
.b-newsletters .showmore-button:disabled,
.b-newsletters .showmore-button[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-newsletters .showless-button,
html[dir=rtl] .b-newsletters .showmore-button {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-newsletters .showless-button, .b-dialog.m-care_essentials-product .b-newsletters .showless-button,
.l-page.m-care_essentials .b-newsletters .showmore-button,
.b-dialog.m-care_essentials-product .b-newsletters .showmore-button {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-newsletters .showless-button,
.l-page.m-care_essentials .b-newsletters .showmore-button {
  letter-spacing: 0.012em;
}
.b-newsletters .b-checkbox-icon {
  background: transparent;
}
.b-newsletters .b-checkbox + .b-form_field-message {
  padding-left: 40px;
}
.b-newsletters .b-form_set-required {
  display: none;
  margin: 4px 0 16px;
}
.b-product_notify_me-newsletter .b-newsletters .b-form_set-required {
  display: block;
  margin-top: 0;
}
@media screen and (min-width: 1180px) {
  .b-newsletters::after {
    background: transparent;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
  }
  html[dir=rtl] .b-newsletters::after {
    left: 0;
    right: auto;
  }
  .b-newsletters.m-open::after, .b-tab_panel.m-active .b-newsletters::after {
    background: #d2d1d4;
  }
}
.b-newsletters.m-open .b-form_set-required, .b-tab_panel.m-active .b-newsletters .b-form_set-required {
  display: block;
}
.b-newsletters u {
  text-decoration: none;
}

.g-recaptcha {
  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-footer-newsletters .b-newsletters-form_wrapper .b-newsletters-toggle_form {
  display: block;
}
.b-footer-newsletters .b-newsletters-form_wrapper .b-drawer-close.m-newsletters {
  display: flex;
}
.b-footer-newsletters .b-newsletters-form_wrapper .b-newsletters-toggle_form.m-active {
  display: none;
}
.b-footer-newsletters .b-newsletters-form_wrapper .b-tab_panel .b-drawer-close.m-newsletter {
  display: flex;
}
.b-footer-newsletters .b-newsletters-form_wrapper .b-tab_panel:not(.m-active) {
  display: none;
}

.b-notification_dialogs {
  bottom: 0;
  color: #ffffff;
  left: 0;
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  right: 0;
  z-index: 24;
}

.b-notification_dialog {
  background: rgba(0, 138, 0, 0.95);
  color: #ffffff;
  padding: 16px 0;
}
.b-notification_dialog-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  display: flex;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-notification_dialog-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-notification_dialog-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-inner {
    padding-left: 16px;
    padding-right: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.b-notification_dialog-title {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-notification_dialog-content {
  font-weight: 300;
  margin: 0 auto;
  max-width: 1000px;
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-content {
    margin-bottom: 24px;
    width: 100%;
  }
}
.b-notification_dialog a {
  position: relative;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.b-notification_dialog a.m-disabled::after, .b-notification_dialog a:disabled::after, .b-notification_dialog a[disabled]::after {
  background: #898992;
}
.b-notification_dialog a::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-notification_dialog a:hover::after, .b-notification_dialog a:active::after {
  transform: scaleX(0);
}
.b-notification_dialog a.m-disabled, .b-notification_dialog a:disabled, .b-notification_dialog a[disabled] {
  color: #898992;
  pointer-events: none;
}
.b-notification_dialog-button {
  margin: 0 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-notification_dialog-button {
    margin-inline-end: 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-button {
    margin: 0;
    white-space: normal;
    width: 49%;
  }
}
.b-notification_dialog-button.m-outline {
  border-color: #ffffff;
  color: #ffffff;
}
.b-notification_dialog-button.m-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}
.b-notification_dialog-button + .b-notification_dialog-button {
  border: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-notification_dialog-button + .b-notification_dialog-button {
    padding: 0 8px;
  }
}

.b-connection_monitor {
  background-color: #fbeded;
  color: #d01d1b;
  font-size: 14px;
  padding: 16px 20px;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .b-connection_monitor {
    align-items: center;
    display: flex;
    padding: 12px 0;
  }
}
.b-connection_monitor-wrapper {
  width: 100%;
}
.b-connection_monitor-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-connection_monitor-inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-connection_monitor-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-connection_monitor-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.b-connection_monitor-icon {
  flex-shrink: 0;
}
.b-connection_monitor-caption {
  font-weight: 700;
}
.b-connection_monitor-message {
  font-weight: 400;
  margin-inline-start: 12px;
  text-align: start;
}
.b-connection_monitor-btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
}
@media screen and (max-width: 1179.9px) {
  .b-connection_monitor-btn {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-connection_monitor-btn:hover {
  color: #001489;
}
.m-care_essentials .b-connection_monitor-btn:hover, .m-1774 .b-connection_monitor-btn:hover {
  color: inherit;
}
@media screen and (min-width: 768px) {
  .b-connection_monitor-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.b-footer_top {
  border-top: 1px solid #d2d1d4;
  font-weight: 300;
  line-height: 22px;
  padding: 40px 0;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-footer_top {
    flex-direction: column;
    padding: 32px 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_top {
    flex-direction: column;
    padding: 32px 0 0;
  }
}
.b-footer_top-block {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  flex-basis: 33.3333333333%;
}
html[dir=rtl] .b-footer_top-block {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_top-block, .b-dialog.m-care_essentials-product .b-footer_top-block {
  letter-spacing: normal;
}
@media screen and (max-width: 767.9px) {
  .b-footer_top-block {
    margin: 0 0 32px;
    padding: 0;
  }
}
.b-footer_top-block:last-child {
  padding: 0;
}
.b-footer_top-title {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: #282727;
  display: block;
  margin: 0 0 6px;
}
html[dir=rtl] .b-footer_top-title {
  letter-spacing: 0;
}
@media screen and (max-width: 1179.9px) {
  .b-footer_top-title {
    margin: 0 0 5px;
  }
}
.l-page.m-care_essentials .b-footer_top-title {
  font-size: 20px;
  letter-spacing: normal;
  line-height: 1.87;
  margin: 0 0 4px;
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_top-title {
    font-size: 16px;
    line-height: 1.5;
  }
}
.b-footer_top p {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-footer_top p {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_top p, .b-dialog.m-care_essentials-product .b-footer_top p {
  letter-spacing: normal;
}
.l-page.m-care_essentials .b-footer_top p {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.4;
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_top p {
    font-size: 14px;
    line-height: 1.2;
  }
}
.b-footer_top .b-footer-inner {
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767.9px) {
  .b-footer_top .b-footer-inner {
    flex-direction: column;
    padding: 0 16px;
  }
}
@media screen and (min-width: 1180px) {
  .m-2 .b-footer_top .b-footer-inner {
    gap: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .m-2 .b-footer_top .b-footer-inner {
    gap: 32px;
  }
}

.b-footer_headline-title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
  color: #282727;
  margin-bottom: 8px;
  text-transform: uppercase;
}
html[dir=rtl] .b-footer_headline-title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_headline-title, .b-dialog.m-care_essentials-product .b-footer_headline-title {
  letter-spacing: normal;
}
@media screen and (max-width: 1179.9px) {
  .b-footer_headline-title {
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_headline-title {
    margin-bottom: 7px;
  }
}
.m-footer-social .b-footer_headline-title {
  margin-bottom: 0;
}
.b-footer_services .b-footer_headline-title {
  margin-bottom: 16px;
}
.l-page.m-care_essentials .b-footer_headline-title {
  font-size: 20px;
  letter-spacing: normal;
  line-height: 1.87;
  margin: 0 0 8px;
  text-transform: capitalize;
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_headline-title {
    font-size: 16px;
    line-height: 1.5;
  }
}
.l-page.m-care_essentials .b-footer_services.m-shipping .b-footer_headline-title {
  text-transform: none;
}
.l-page.m-care_essentials .b-footer_services.m-payments .b-footer_headline-title, .l-page.m-care_essentials .b-footer_services.m-shipping .b-footer_headline-title {
  line-height: 1.36;
  margin-bottom: 16px;
}
.b-footer_headline-copy {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #60606a;
  margin-bottom: 16px;
}
html[dir=rtl] .b-footer_headline-copy {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-footer_headline-copy, .b-dialog.m-care_essentials-product .b-footer_headline-copy {
  letter-spacing: normal;
}
.m-footer-social .b-footer_headline-copy {
  margin: 8px 0 0;
}
.l-page.m-care_essentials .b-footer_headline-copy {
  font-size: 16px;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.4;
  margin-bottom: 20px;
}
@media screen and (max-width: 1179.9px) {
  .l-page.m-care_essentials .b-footer_headline-copy {
    font-size: 14px;
    line-height: 1.2;
  }
}
.l-page.m-care_essentials .m-footer-social .b-footer_headline-copy {
  margin-bottom: 0;
}

.b-content_asset.m-footer-payments ~ .b-content_asset.m-footer-shipping .b-footer_services.m-shipping {
  margin-top: 24px;
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-content_asset.m-footer-payments ~ .b-content_asset.m-footer-shipping .b-footer_services.m-shipping {
    margin-top: 0;
  }
}
.b-footer_services-content {
  display: flex;
}
.b-footer_services-item {
  margin-inline-end: 8px;
}

.b-seo_content {
  color: #60606a;
  margin-top: 32px;
}
.b-seo_content p {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 16px;
}
html[dir=rtl] .b-seo_content p {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-seo_content p, .b-dialog.m-care_essentials-product .b-seo_content p {
  letter-spacing: normal;
}
.b-seo_content h2 {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}
html[dir=rtl] .b-seo_content h2 {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-seo_content h2, .b-dialog.m-care_essentials-product .b-seo_content h2 {
  letter-spacing: normal;
}

.b-country_selector {
  margin-bottom: 30px;
}
@media screen and (min-width: 1180px) {
  .b-country_selector {
    align-items: center;
    display: flex;
    margin-bottom: 0;
    position: relative;
  }
}
.b-country_selector.m-footer {
  flex-basis: 0;
  flex-grow: 1;
  margin-bottom: 0;
}
@media screen and (max-width: 767.9px) {
  .b-country_selector.m-footer {
    padding: 0 16px;
  }
}
.b-country_selector-locale {
  align-items: flex-start;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media screen and (min-width: 1180px) {
  .b-country_selector-locale {
    flex-direction: row;
    height: auto;
    padding: 0 16px;
  }
}
.m-care_essentials .b-country_selector-locale {
  letter-spacing: normal;
  font-weight: 300;
}
@media screen and (min-width: 1180px) {
  .b-country_selector-locale.m-switcher:hover {
    background: #ebebea;
  }
  .b-country_selector-locale.m-link {
    cursor: pointer;
    text-decoration: none;
  }
  @media not all and (pointer: coarse) {
    .b-country_selector-locale.m-link:hover {
      color: #282727;
    }
  }
}
.b-country_selector.m-footer .b-country_selector-locale {
  flex-direction: column;
  padding: 0;
}
.b-drawer.m-country_selector_sl .b-country_selector-locale {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
}
html[dir=rtl] .b-drawer.m-country_selector_sl .b-country_selector-locale {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-drawer.m-country_selector_sl .b-country_selector-locale, .b-dialog.m-care_essentials-product .b-drawer.m-country_selector_sl .b-country_selector-locale {
  letter-spacing: normal;
}
.b-country_selector-item {
  width: 100%;
}
@media screen and (min-width: 1180px) {
  .b-country_selector-switcher {
    box-shadow: inset 0 0 0 1px rgba(40, 39, 39, 0.3);
    display: block;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-country_selector-switcher {
    position: relative;
    border-radius: 4px;
    display: inline-flex;
    font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
    letter-spacing: 0.07em;
    line-height: 1.36;
    align-items: center;
    cursor: pointer;
    display: flex;
    min-height: 44px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    height: 48px;
    padding: 0;
  }
  .b-country_selector-switcher.m-disabled::after, .b-country_selector-switcher:disabled::after, .b-country_selector-switcher[disabled]::after {
    background: #898992;
  }
  .b-country_selector-switcher::after {
    background: currentcolor;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transition: transform ease-out 150ms;
    width: 100%;
    transform: scaleX(1);
  }
  .b-country_selector-switcher:hover::after, .b-country_selector-switcher:active::after {
    transform: scaleX(0);
  }
  .b-country_selector-switcher.m-disabled, .b-country_selector-switcher:disabled, .b-country_selector-switcher[disabled] {
    color: #898992;
    pointer-events: none;
  }
  html[dir=rtl] .b-country_selector-switcher {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-country_selector-switcher, .b-dialog.m-care_essentials-product .b-country_selector-switcher {
    letter-spacing: normal;
  }
  html[dir=rtl] .b-country_selector-switcher {
    letter-spacing: 0;
  }
  .l-page.m-care_essentials .b-country_selector-switcher, .b-dialog.m-care_essentials-product .b-country_selector-switcher {
    letter-spacing: normal;
  }
  .m-care_essentials .b-country_selector-switcher {
    letter-spacing: normal;
    font-weight: 400;
  }
  .b-country_selector-switcher::after {
    display: none;
  }
}
.b-country_selector.m-footer .b-country_selector-switcher {
  position: relative;
  border-radius: 4px;
  display: inline-flex;
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  align-items: center;
  cursor: pointer;
  display: flex;
  min-height: 44px;
  padding: 0 16px;
  text-decoration: none;
  width: 100%;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
  padding: 0;
}
.b-country_selector.m-footer .b-country_selector-switcher.m-disabled::after, .b-country_selector.m-footer .b-country_selector-switcher:disabled::after, .b-country_selector.m-footer .b-country_selector-switcher[disabled]::after {
  background: #898992;
}
.b-country_selector.m-footer .b-country_selector-switcher::after {
  background: currentcolor;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transition: transform ease-out 150ms;
  width: 100%;
  transform: scaleX(1);
}
.b-country_selector.m-footer .b-country_selector-switcher:hover::after, .b-country_selector.m-footer .b-country_selector-switcher:active::after {
  transform: scaleX(0);
}
.b-country_selector.m-footer .b-country_selector-switcher.m-disabled, .b-country_selector.m-footer .b-country_selector-switcher:disabled, .b-country_selector.m-footer .b-country_selector-switcher[disabled] {
  color: #898992;
  pointer-events: none;
}
html[dir=rtl] .b-country_selector.m-footer .b-country_selector-switcher {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-country_selector.m-footer .b-country_selector-switcher, .b-dialog.m-care_essentials-product .b-country_selector.m-footer .b-country_selector-switcher {
  letter-spacing: normal;
}
html[dir=rtl] .b-country_selector.m-footer .b-country_selector-switcher {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-country_selector.m-footer .b-country_selector-switcher, .b-dialog.m-care_essentials-product .b-country_selector.m-footer .b-country_selector-switcher {
  letter-spacing: normal;
}
.m-care_essentials .b-country_selector.m-footer .b-country_selector-switcher {
  letter-spacing: normal;
  font-weight: 400;
}
.b-country_selector.m-footer .b-country_selector-switcher::after {
  display: none;
}
@media screen and (min-width: 768px) {
  .b-country_selector.m-footer .b-country_selector-switcher {
    max-width: 220px;
  }
}
.b-country_selector-inner {
  align-items: center;
  border: 1px solid #a4a4aa;
  border-radius: 4px;
  display: flex;
  position: relative;
  width: 100%;
}
.b-country_selector.m-footer .b-country_selector-inner {
  height: 48px;
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-country_selector.m-footer .b-country_selector-inner {
    max-width: 100%;
  }
}
.b-country_selector-locale_language {
  color: #60606a;
  margin: 2px 12px 0;
  text-transform: capitalize;
}
.b-country_selector.m-footer .b-country_selector-locale_language {
  margin: 0;
}
.b-country_selector.m-footer .b-country_selector-locale_country, .b-country_selector.m-footer .b-country_selector-locale_language {
  color: #282727;
}
@media screen and (min-width: 768px) {
  .b-country_selector.m-footer .b-country_selector-locale_country, .b-country_selector.m-footer .b-country_selector-locale_language {
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
  }
}
@media screen and (max-width: 1179.9px) {
  .b-country_selector-locale_icon {
    margin-inline-start: auto;
  }
}
.b-country_selector-flyout {
  background-color: #ffffff;
  border: 1px solid #b3b3b3;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35);
  color: #282727;
  display: none;
  left: 0;
  position: absolute;
  top: 47px;
  width: 100%;
  z-index: 12;
}
.b-country_selector-flyout[aria-hidden=false] {
  display: block;
}
.b-country_selector-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  min-height: 22px;
}
@media screen and (max-width: 1179.9px) {
  .b-country_selector-icon {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-country_selector-icon:hover {
  color: #001489;
}
.m-care_essentials .b-country_selector-icon:hover, .m-1774 .b-country_selector-icon:hover {
  color: inherit;
}
@media screen and (max-width: 1439.9px) {
  .b-country_selector-icon {
    min-height: 22px;
  }
}
.b-country_selector-switcher .b-country_selector-icon {
  height: 48px;
  width: 48px;
}
.b-country_selector.m-footer .b-country_selector-icon {
  margin: 0 2px 0 7px;
  min-width: 40px;
}
.b-country_selector-chevron {
  margin-inline-end: 12px;
}
html[dir=rtl] .b-footer .b-country_selector-chevron {
  transform: scaleX(-1);
}

.b-selectors_container .b-select-icon {
  width: 24px;
}
.b-selectors_container .b-select.m-link .b-select-input {
  padding-top: 24px;
  text-align: start;
}

.b-countries_container-item {
  padding: 16px 0;
}
.b-countries_container .b-accordion-content {
  height: auto !important;
  padding-block: 4px 24px;
}
.b-countries_container .b-accordion-content div[role=listitem] {
  margin-bottom: 16px;
}
.b-countries_container .b-accordion-content div[role=listitem]:last-child {
  margin-bottom: 0;
}
.b-countries_container .b-country-item {
  align-items: center;
}
.b-countries_container .b-country_selector-icon {
  min-height: 22px;
  min-width: 24px;
}
.b-countries_container .b-country_selector-locale {
  padding: 0;
  padding-inline-start: 12px;
}

.pac-item {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-items: center;
  color: #60606a;
  display: flex;
  padding: 12px;
}
html[dir=rtl] .pac-item {
  letter-spacing: 0;
}
.l-page.m-care_essentials .pac-item, .b-dialog.m-care_essentials-product .pac-item {
  letter-spacing: normal;
}
.pac-item:hover {
  background-color: #ebedf6;
}
.pac-item span:last-of-type {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
}

.pac-item-query {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  color: #282727;
  padding: 0;
  padding-inline-end: 3px;
}
html[dir=rtl] .pac-item-query {
  letter-spacing: 0;
}
.l-page.m-care_essentials .pac-item-query, .b-dialog.m-care_essentials-product .pac-item-query {
  letter-spacing: normal;
}

.pac-matched {
  font-weight: 700;
}

.pac-icon {
  background: url("./images/icons/pin.svg") no-repeat;
  background-size: cover;
  height: 16px;
  margin: 0;
  margin-inline-end: 10px;
  min-width: 11px;
  width: 11px;
}
.hdpi .pac-icon {
  background: url("./images/icons/pin.svg") no-repeat;
}

.pac-icon-marker {
  background-position: center;
}

html[dir=rtl] .pac-logo::after {
  background-position: left;
}
html[dir=rtl] .hdpi .pac-logo::after {
  background-position: left;
}

/*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;
  scrollbar-width: none;
  -webkit-user-select: none;
          user-select: none;
}
.b-tab_list::-webkit-scrollbar {
  display: none;
}
.b-tab_list.m-search {
  justify-content: flex-start;
  margin-bottom: 0;
}
@media screen and (min-width: 1180px) {
  .b-tab_list.m-search {
    margin: 17px 0 36px;
  }
}
@media screen and (max-width: 1439.9px) {
  .b-tab_list.m-search {
    margin: 0 0 -64px;
    position: relative;
    width: 50%;
    z-index: 9;
  }
}
@media screen and (max-width: 767.9px) {
  .b-tab_list.m-search {
    margin-bottom: 16px;
    width: auto;
  }
}
.b-tab_list.m-pdp {
  font-size: 2rem;
  justify-content: flex-start;
  margin: 0 0 32px -8px;
}
.b-tab_list.m-checkout {
  justify-content: flex-start;
}
.b-tab_list.m-account {
  margin-bottom: 40px;
}
@media screen and (max-width: 767.9px) {
  .b-tab_list.m-account {
    margin-bottom: 32px;
  }
}
.b-tab_list.m-size_guide {
  margin: 0 0 24px;
  width: 100%;
}
.b-tab_list.m-shipping_type {
  gap: 10px;
  margin-bottom: 24px;
}
.b-tab_list.m-store_pickup {
  margin-top: 0;
}
.b-tab_list-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 0 #d2d1d4;
  color: #60606a;
  cursor: pointer;
  display: block;
  font-size: 20px;
  font-weight: 700;
  padding: 15px 25px;
  position: relative;
  text-decoration: none;
  text-transform: initial;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  white-space: nowrap;
}
@media screen and (max-width: 767.9px) {
  .b-tab_list-tab {
    padding: 12px 20px;
    width: 100%;
  }
}
.b-tab_list-tab:hover {
  box-shadow: inset 0 -2px 0 0 #282727;
  color: #282727;
}
.b-tab_list-tab.m-active {
  box-shadow: inset 0 -1px 0 0 #282727;
  color: #282727;
}
.b-tab_list.m-pdp .b-tab_list-tab {
  margin-inline-start: 0;
  padding: 16px;
}
.b-tab_list.m-checkout .b-tab_list-tab {
  font-weight: bold;
  text-transform: uppercase;
}
.b-tab_list.m-search .b-tab_list-tab {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  padding: 12px 25px;
}
html[dir=rtl] .b-tab_list.m-search .b-tab_list-tab {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-tab_list.m-search .b-tab_list-tab, .b-dialog.m-care_essentials-product .b-tab_list.m-search .b-tab_list-tab {
  letter-spacing: normal;
}
.b-tab_list.m-size_guide .b-tab_list-tab {
  font-size: 16px;
  padding: 8px 16px 16px;
  width: 50%;
}
.b-tab_list.m-shipping_type .b-tab_list-tab {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-size: 16px;
  line-height: 1.4;
  align-items: center;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0.5px #a4a4aa;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  gap: 2px;
  padding: 16px 0;
  width: 50%;
}
html[dir=rtl] .b-tab_list.m-shipping_type .b-tab_list-tab {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-tab_list.m-shipping_type .b-tab_list-tab, .b-dialog.m-care_essentials-product .b-tab_list.m-shipping_type .b-tab_list-tab {
  letter-spacing: normal;
}
.b-tab_list.m-shipping_type .b-tab_list-tab.m-active {
  box-shadow: inset 0 0 0 1.6px #282727;
}
.b-tab_list.m-shipping_type .b-tab_list-tab.m-active svg path {
  fill: #282727;
}
.b-tab_list.m-store_pickup .b-tab_list-tab {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 700;
  font-size: 14px;
  flex: 1;
  padding: 8px 0 16px;
}
html[dir=rtl] .b-tab_list.m-store_pickup .b-tab_list-tab {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-tab_list.m-store_pickup .b-tab_list-tab, .b-dialog.m-care_essentials-product .b-tab_list.m-store_pickup .b-tab_list-tab {
  letter-spacing: normal;
}

.b-tab_panel {
  display: none;
  width: 100%;
}
.b-tab_panel::before {
  display: none;
}
.b-tab_panel.m-active {
  display: block;
}
@media screen and (min-width: 1180px) {
  .b-tab_panel.m-login:not(.m-popup) {
    display: block;
  }
}
.b-tab_panel-description {
  margin-bottom: 16px;
}

.b-size_table {
  border-bottom: 1px solid #282727;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
.b-size_table th,
.b-size_table td {
  border: 1px solid #d2d1d4;
  border-bottom: none;
  padding: 9px;
}
.b-size_table-divider:first-child {
  font-size: 14px;
}
.b-size_table-divider th,
.b-size_table-divider td {
  border-top: 1px solid #282727;
}
.b-size_table-table {
  text-align: center;
  width: 100%;
}
.b-size_table-table td,
.b-size_table-table th {
  border: 1px solid #d2d1d4;
  font-size: 12px;
  padding: 9px;
}
.b-size_table-table th {
  background-color: #f3f3f6;
  font-size: 14px;
}
.b-size_table-header:first-child th {
  border-top: 1px solid #282727;
}
.b-size_table-header:first-child th:nth-child(-n+2) {
  background-color: #f3f3f6;
  font-size: 14px;
  font-weight: 400;
}
.b-size_table-background {
  background-color: #f3f3f6;
}
.b-size_table-table + .b-size_table-content {
  margin-top: 24px;
}
.b-size_table-content_title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 16px;
}
html[dir=rtl] .b-size_table-content_title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-size_table-content_title, .b-dialog.m-care_essentials-product .b-size_table-content_title {
  letter-spacing: normal;
}
.b-size_table-table_title {
  font-size: 20px;
  margin: 32px 0 20px;
}
.b-size_table-table_header {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  background-color: #f3f3f6;
  border: 1px solid #d2d1d4;
  border-bottom: none;
  margin-top: 20px;
  padding: 12px;
  text-align: center;
}
html[dir=rtl] .b-size_table-table_header {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-size_table-table_header, .b-dialog.m-care_essentials-product .b-size_table-table_header {
  letter-spacing: normal;
}
.b-size_table-list {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-size_table-list {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-size_table-list, .b-dialog.m-care_essentials-product .b-size_table-list {
  letter-spacing: normal;
}

.b-width_guide {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-width_guide {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-width_guide, .b-dialog.m-care_essentials-product .b-width_guide {
  letter-spacing: normal;
}
.b-width_guide-heading {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 16px;
}
html[dir=rtl] .b-width_guide-heading {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-width_guide-heading, .b-dialog.m-care_essentials-product .b-width_guide-heading {
  letter-spacing: normal;
}
.b-width_guide-table {
  display: flex;
  gap: 8px;
  margin: 24px 0;
}
.b-width_guide-section {
  border: 1px solid #d2d1d4;
  border-radius: 4px;
  padding: 16px 8px 4px;
  text-align: center;
  width: 50%;
}
.b-width_guide-icon {
  color: #001489;
  margin-bottom: 16px;
}
.b-width_guide-section_title {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 12px;
}
html[dir=rtl] .b-width_guide-section_title {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-width_guide-section_title, .b-dialog.m-care_essentials-product .b-width_guide-section_title {
  letter-spacing: normal;
}

.b-product_fit_guide {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
}
html[dir=rtl] .b-product_fit_guide {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_fit_guide, .b-dialog.m-care_essentials-product .b-product_fit_guide {
  letter-spacing: normal;
}
.b-product_fit_guide-link {
  max-width: 50%;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767.9px) {
  .b-product_fit_guide-link.m-small {
    text-decoration: underline;
  }
  .b-product_fit_guide-link.m-small::after {
    display: none;
  }
}
.b-product_fit_guide-warning {
  margin-bottom: 16px;
}
.b-product_fit_guide-description {
  margin-bottom: 16px;
  padding-bottom: 8px;
}
.b-product_fit_guide-description.m-large {
  font-size: 16px;
}
.b-product_fit_guide-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b-product_fit_guide-links a {
  width: -moz-fit-content;
  width: fit-content;
}
.b-product_fit_guide-subheading {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin: 32px 0 20px;
}
html[dir=rtl] .b-product_fit_guide-subheading {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_fit_guide-subheading, .b-dialog.m-care_essentials-product .b-product_fit_guide-subheading {
  letter-spacing: normal;
}
.b-product_fit_guide-size_options {
  display: flex;
  gap: 6px;
}
.b-product_fit_guide-group {
  display: flex;
  gap: 8px;
}
.b-product_fit_guide-group .b-form_field {
  margin-bottom: 0;
}
.b-product_fit_guide-group .b-form_field .b-form_field-message {
  display: none;
}
.b-product_fit_guide-group .b-form_field.m-error .b-form_field-message {
  display: flex;
}
.b-product_fit_guide-foot {
  margin-bottom: 32px;
}
.b-product_fit_guide-option {
  align-items: center;
  border: 1px solid #a4a4aa;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex: 1 1 50%;
  height: 40px;
  justify-content: center;
  padding: 0 16px;
  transition: ease-out 150ms;
  transition-property: box-shadow, border-color, border-width;
}
@media not all and (pointer: coarse) {
  .b-product_fit_guide-option:hover {
    border-color: #282727;
  }
}
.b-product_fit_guide-option.m-selected {
  border-color: #282727;
  box-shadow: inset 0 0 0 1px #282727;
}
.b-product_fit_guide-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.b-product_fit_guide-results:last-child {
  margin-bottom: 20px;
}
.b-product_fit_guide-results.m-columns {
  flex-direction: row;
}
.b-product_fit_guide-recommended {
  align-items: center;
  background-color: #f3f3f6;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  line-height: 22px;
  padding: 20px;
}
.b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  width: 50%;
}
html[dir=rtl] .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended, .b-dialog.m-care_essentials-product .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  letter-spacing: normal;
}
.b-product_fit_guide-recommended_title {
  font-weight: 700;
}
.b-product_fit_guide-label {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  margin-inline-end: auto;
}
html[dir=rtl] .b-product_fit_guide-label {
  letter-spacing: 0;
}
.l-page.m-care_essentials .b-product_fit_guide-label, .b-dialog.m-care_essentials-product .b-product_fit_guide-label {
  letter-spacing: normal;
}
.b-product_fit_guide-result, .b-product_fit_guide-size {
  color: #001489;
  display: flex;
  font-size: 24px;
  font-weight: 700;
  gap: 8px;
}
.b-product_fit_guide-size {
  display: none;
}
.b-product_fit_guide-recommended.m-narrow .b-product_fit_guide-size.m-narrow, .b-product_fit_guide-recommended.m-regular .b-product_fit_guide-size.m-regular {
  display: flex;
}
.b-product_fit_guide-availability {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.b-product_fit_guide-availability_icon {
  background-color: #008a00;
  border-radius: 50%;
  display: block;
  height: 12px;
  width: 12px;
}
.b-product_fit_guide-availability.m-outofstock .b-product_fit_guide-availability_icon {
  background-color: #d01d1b;
}
.b-product_fit_guide-availability.m-lowinstock .b-product_fit_guide-availability_icon {
  background-color: #f69623;
}
.b-product_fit_guide-step {
  margin-bottom: 24px;
}
.b-product_fit_guide-step:last-child {
  margin-bottom: 0;
}
.b-product_fit_guide-step img {
  display: block;
  margin-bottom: 16px;
}
.b-product_fit_guide-remind {
  margin-bottom: 24px;
}
.b-product_fit_guide-browse {
  margin-top: 32px;
}
.b-product_fit_guide-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.b-product_fit_guide-actions.m-no_gap {
  gap: 0;
  margin-top: 32px;
}
.b-product_fit_guide-actions > .b-product_fit_guide-remind:first-child {
  margin-bottom: 0;
}
.b-product_fit_guide-no_product {
  margin-bottom: 24px;
}

.m-fit-guide-calculator-content .b-product_fit_guide {
  background: #f3f3f6;
  padding: 40px;
}
@media screen and (max-width: 767.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide {
    padding: 20px;
  }
}
.m-fit-guide-calculator-content .b-product_fit_guide-description {
  text-align: center;
}
.m-fit-guide-calculator-content .b-product_fit_guide-description.m-large {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-transform: uppercase;
}
@media screen and (max-width: 1179.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-description.m-large {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .m-fit-guide-calculator-content .b-product_fit_guide-description.m-large {
  letter-spacing: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-alt_links {
  display: flex;
  flex-flow: row nowrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-alt_links .b-link svg {
  height: 20px;
  width: 20px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-heading {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0 0 20px;
  text-align: center;
  text-transform: uppercase;
}
@media screen and (max-width: 1179.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-heading {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .m-fit-guide-calculator-content .b-product_fit_guide-heading {
  letter-spacing: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-subheading {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-align: center;
}
html[dir=rtl] .m-fit-guide-calculator-content .b-product_fit_guide-subheading {
  letter-spacing: 0;
}
.b-content_page .m-fit-guide-calculator-content .b-product_fit_guide-subheading {
  margin: 32px 0 20px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-actions_container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.m-fit-guide-calculator-content .b-product_fit_guide-actions_container .m-calculate {
  max-width: 350px;
}
@media screen and (max-width: 767.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-actions_container .m-calculate {
    max-width: none;
  }
}
.m-fit-guide-calculator-content .b-product_fit_guide-select_wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 32px;
}
@media screen and (max-width: 767.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-select_wrapper {
    gap: 0;
    grid-template-columns: 1fr;
  }
}
.m-fit-guide-calculator-content .b-product_fit_guide-form {
  margin: 0 auto;
  max-width: 740px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-group {
  flex-flow: column nowrap;
  gap: 20px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-results_container {
  margin: 0 auto;
  max-width: 550px;
}
.m-fit-guide-calculator-content .b-product_fit_guide-results {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 30px;
  text-align: center;
}
@media screen and (max-width: 767.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-results {
    grid-template-columns: 1fr;
  }
}
.m-fit-guide-calculator-content .b-product_fit_guide-results:last-child {
  margin-bottom: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-results.m-columns {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}
.m-fit-guide-calculator-content .b-product_fit_guide-foot {
  margin: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-recommended {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  background-color: transparent;
  border-radius: 0;
  justify-content: flex-start;
  line-height: normal;
  padding: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  font-family: var(--care-essentials-font), "Arial", "Helvetica", sans-serif;
  letter-spacing: 0.07em;
  line-height: 1.36;
  font-weight: 400;
  font-size: 14px;
  align-items: center;
  gap: 0;
  min-width: 125px;
  padding: 0;
  text-align: center;
  width: auto;
}
html[dir=rtl] .m-fit-guide-calculator-content .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  letter-spacing: 0;
}
.l-page.m-care_essentials .m-fit-guide-calculator-content .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended, .b-dialog.m-care_essentials-product .m-fit-guide-calculator-content .b-product_fit_guide-results.m-columns .b-product_fit_guide-recommended {
  letter-spacing: normal;
}
.m-fit-guide-calculator-content .b-product_fit_guide-label {
  margin-inline-end: 0;
  padding: 10px 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-result, .m-fit-guide-calculator-content .b-product_fit_guide-size {
  background: #ffffff;
  border-radius: 4px;
  justify-content: center;
  padding: 10px 0;
  text-align: center;
}
.m-fit-guide-calculator-content .b-product_fit_guide-browse {
  margin-top: 0;
}
.m-fit-guide-calculator-content .b-product_fit_guide-actions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 767.9px) {
  .m-fit-guide-calculator-content .b-product_fit_guide-actions {
    grid-template-columns: 1fr;
  }
}

.b-combined_carousel {
  position: relative;
}
.b-combined_carousel-tabs {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: flex-start;
  overflow: auto;
  padding: 0 40px 24px;
  position: absolute;
  top: 55px;
  width: 100%;
  z-index: 2;
}
@media screen and (min-width: 1180px) and (max-width: 1439.9px) {
  .b-combined_carousel-tabs {
    padding: 0 40px 24px;
    padding-right: 120px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1179.9px) {
  .b-combined_carousel-tabs {
    padding: 0 32px 24px;
    padding-right: 120px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-combined_carousel-tabs {
    gap: 16px;
    padding: 0 16px 16px;
    padding-right: 16px;
  }
}
.b-combined_carousel-tabs::-webkit-scrollbar {
  display: none;
}
.b-combined_carousel-tab {
  font-family: var(--care-essentials-font, "DIN Next CYR", "Arial", "Helvetica", sans-serif);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: #77767f;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  text-decoration: none;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  white-space: nowrap;
}
@media screen and (max-width: 1179.9px) {
  .b-combined_carousel-tab {
    font-size: 24px;
    line-height: 1.02;
  }
}
html[dir=rtl] .b-combined_carousel-tab {
  letter-spacing: 0;
}
@media screen and (max-width: 767.9px) {
  .b-combined_carousel-tab {
    font-size: 24px;
  }
}
.b-combined_carousel-tab:hover {
  color: #282727;
}
.b-combined_carousel-tab:focus-visible {
  outline: 2px solid #282727;
  outline-offset: 2px;
}
.b-combined_carousel-tab.m-active, .b-combined_carousel-tab[aria-selected=true] {
  color: #282727;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 15px;
}
.b-combined_carousel-tab.m-hidden {
  display: none;
}
.b-combined_carousel-panel {
  display: none;
  padding: 45px 0;
}
.b-combined_carousel-panel.m-active, .b-combined_carousel-panel[aria-hidden=false] {
  display: block;
}
.b-combined_carousel-panel[aria-hidden=true] {
  display: none;
}
.b-combined_carousel .optimizely-carousel .b-carousel.m-products {
  margin-inline: 0;
  margin-top: 0;
}
.b-combined_carousel .b-carousel.m-products .b-carousel-header {
  justify-content: flex-end;
  padding-right: 0;
}
.b-combined_carousel .b-carousel.m-products .b-carousel-header .b-carousel-title {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.b-combined_carousel .b-combined_carousel-panel.m-active .b-carousel-nav,
.b-combined_carousel .b-combined_carousel-panel[aria-hidden=false] .b-carousel-nav {
  display: flex;
  gap: 8px;
  position: absolute;
  right: 40px;
  top: 8px;
  z-index: 3;
}
@media screen and (max-width: 767.9px) {
  .b-combined_carousel .b-combined_carousel-panel.m-active .b-carousel-nav,
  .b-combined_carousel .b-combined_carousel-panel[aria-hidden=false] .b-carousel-nav {
    bottom: 0;
    right: 0;
    top: unset;
  }
}
.b-combined_carousel .b-carousel-track {
  padding: 45px 0;
}

.b-wishlist_button {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  letter-spacing: 0.036em;
  text-transform: uppercase;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: color, fill;
}
@media not all and (pointer: coarse) {
  .b-wishlist_button:hover svg {
    fill: #282727;
  }
}
.b-wishlist_button.m-added svg {
  fill: #282727;
}
.b-wishlist_button[aria-busy=true] {
  cursor: wait;
  pointer-events: none;
}
.b-wishlist_button[aria-pressed=true] {
  color: #282727;
}
.b-wishlist_button[aria-pressed=true] svg {
  color: #282727;
}
.b-wishlist_button-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 24px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-width: 24px;
}
@media screen and (max-width: 1179.9px) {
  .b-wishlist_button-icon {
    min-height: 44px;
    min-width: 24px;
  }
}
.b-wishlist_button-icon:hover {
  color: #001489;
}
.m-care_essentials .b-wishlist_button-icon:hover, .m-1774 .b-wishlist_button-icon:hover {
  color: inherit;
}
@media not all and (pointer: coarse) {
  .b-wishlist_button-icon:hover {
    color: inherit;
  }
}
.l-page.m-care_essentials .b-wishlist_button-icon {
  color: #282727;
  min-height: 24px;
}
.b-wishlist_button-text {
  display: none;
}
.b-wishlist_button use {
  color: inherit;
  fill: none;
}
.b-wishlist_button[aria-pressed=true] use {
  color: #282727;
  fill: #282727;
}

.b-wishlist_button.m-tile {
  inset-inline-end: 8px;
  position: absolute;
  top: 8px;
}

:root {
  --page_visibility: visible;
}

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