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

# Breakpoints

## Boilerplate breakpoints

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

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

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

## Supported screen resolutions

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

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

## Supported screen scaling

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

*/
/*md
@no-stat

# Media queries (breakpoints)

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

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

## Configuration

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

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

This is how `$media` map looks:

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

## Usage

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

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

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

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

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

*/
/*md
@no-stat

# Grids

## How to setup grids config for project

### Several grid configs for project

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

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

### Gaps / margin / column span configuration:

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

## Working with grids

### Development approaches

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

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

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

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

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

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

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

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

# grid-* (grid config get functions)

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

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

## Usage

```scss

// Configuration:

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

// Usage:

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

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

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

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

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

# Globals variables

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

It include:

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

*/
/*md
@no-stat

# Z-indexes

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

## Usage

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

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

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

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

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

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

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

*/
/*md
@no-stat

# adjust-color-to-bg

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

It is especially useful for crating flexible themes.

## Arguments

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

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

## Usage

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

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

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

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

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

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

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

# grid-span

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

It returns value in percents.

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

### Parameters

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

## Examples

### Flex-basis example

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

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

### Floated items example

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

### Inline-block items example

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

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

*/
/*md
@no-stat

# aspect-ratio

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

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

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

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

## Arguments

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

=> percentage

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

## Usage

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

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

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

*/
/*md
@no-stat

# Hide

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

Here is a list of parameters you can use:

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

## Usage

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

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

# Hover-supported

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

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

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

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

## Usage

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

# RTL selector

This mixin is designed to alter styles for RTL languages.

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

## Usage

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

# g-button component

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

## g-button

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

Usage: `@include g-button`

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

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

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

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

### Parameters

#### `$_theme`

Default value: `default_light`

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

#### `$_size`

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

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

## g-button-constructor

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

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

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

### Parameters

#### `$_mod`

Default value: `default`

Available values:
- `default`
- `outline`

#### `$_theme`

Default value: `light`

Available values:
- `light`
- `dark`

#### `$_size`

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

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

## g-button-reset

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

Usage: `@include g-button-reset`

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

## g-button-size

Adds a custom height to a button.

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

### Parameters

#### `$_size`

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

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

*/
/*md

# g-button_icon_only

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

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

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

# g-radio

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

## Customization by SCSS

Radio button styles that used in several component.

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

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

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

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

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

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

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

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

# g-switch

The component is generally used for checkbox switch.

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

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

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

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

# g-checkbox

## Customization by SCSS

Checkbox styles that used in several component.

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

It provide styles only for icon element based on SVG.

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

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

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

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

# g-spinner

Global spinner component applied to different blocks that fetch data.

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

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

# g-link_ui

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

## Usage

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

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

*/
/*md

# g-link_hamburger

Hamburger menu generic link that used in several component.

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

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

# g-image_container

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

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

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

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

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

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

You could change aspect ration in mixin:

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

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

*/
/*md

# g-snap_scroll

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

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

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

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

*/
/*md

# g-backdrop_dialog

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

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

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

# g-backdrop_panel

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

Serve as regular overlay.

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

# g-section_holder

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

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

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

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

# g-section_holder_header

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

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

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

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

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

# g-heading_*

Basic simple typography styles applied to different UI components.

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

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

	&-title {
		@include g-heading_1;

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

# g-accordion

Global accordion component

## Customization by SCSS

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

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

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

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

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

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

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

# g-grid

g-grid is layout component based on CSS grid.

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

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

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

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

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

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

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

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

*/
/*md

# g-grid

g-grid is layout component based on CSS grid.

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

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

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

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

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

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

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

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

*/
/*md

# g-fullwidth

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

## Usage

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

*/
/*md

# g-text_overflow

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

## Usage

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

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

*/
@media print {
  html, body {
    height: 100%;
    overflow: hidden;
  }
  @page {
    margin: 8px 8px auto;
    padding: 16px 0;
    size: a4;
  }
  .b-reward_coupon-item_inner-header-plus-type-row-content-icon-mp,
  .coupon-background-MP,
  .b-reward_coupon-item_inner-header-background {
    background-size: cover;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  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,
  .helpButton,
  .b-global_alerts,
  .b-nav_aux,
  .l-account-nav,
  #kampyleButtonContainer,
  .b-header_top-wrapper,
  .l-header-bottom_promo,
  .b-chatbot-iframe,
  .grecaptcha-badge,
  .b-dialog-footer {
    display: none !important;
  }
  .b-reward_certificate-your_reward .b-reward_certificate-print,
  .b-reward_coupon-your_reward .b-reward_coupon-print,
  .b-member_card-body .b-member_card-print {
    display: block;
  }
  .l-account-main {
    width: 100%;
    max-width: 100%;
  }
  .b-wishlist.m-keepsake .b-wishlist-title,
  .b-wishlist.m-keepsake .b-required_message,
  .b-wishlist.m-keepsake .b-wishlist-messages,
  .b-wishlist.m-keepsake .b-wishlist-header a,
  .b-wishlist.m-keepsake .l-cart_product-pricing,
  .b-wishlist.m-keepsake .l-cart_product-remove,
  .b-wishlist.m-keepsake .b-wishlist-description {
    display: none;
  }
  .b-wishlist.m-keepsake .l-cart_product-item {
    display: flex;
  }
}
/*md

# Normalize forms

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

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

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

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

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

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

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

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

/*md
@no-stat

# global-animations

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

# b-button

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

## Primary button (light mode)

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

## Primary button with icon (light mode)

```html_example
<button type="submit" class="b-button m-primary">
	<span class="b-button-icon_left">
		<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.7799 1.25C20.7799 1.25 20.7699 1.24 20.7599 1.23C19.9599 0.43 18.8999 0 17.7699 0C16.6399 0 15.5799 0.44 14.7599 1.27L1.86985 14.16C1.73985 14.29 1.64985 14.45 1.60985 14.62L0.0398502 20.76C-0.0501498 21.1 0.0498503 21.47 0.29985 21.72C0.48985 21.91 0.74985 22.01 1.00985 22.01C1.08985 22.01 1.17985 22 1.25985 21.98L7.39985 20.41C7.56985 20.37 7.72985 20.28 7.85985 20.15L20.7399 7.27C22.4099 5.64 22.4398 2.96 20.7999 1.27L20.7799 1.25ZM17.7699 2C18.3699 2 18.9299 2.23 19.3499 2.65H19.3599C20.1699 3.49 20.1898 4.78 19.4599 5.65L16.3399 2.53C16.7399 2.19 17.2399 2 17.7699 2ZM17.6099 7.54L14.4099 4.44L15.2699 3.58L18.4199 6.73L17.6099 7.54ZM6.95985 18.18L3.80985 15.03L13.3499 5.5L16.5499 8.6L6.95985 18.18ZM3.16985 16.52L5.46985 18.81L2.37985 19.6L3.16985 16.52Z" fill="currentColor"></path>
        </svg>
	</span>
	Sign in
</button>
```

## Primary button (dark mode)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<button type="submit" class="b-button m-primary_dark_mode">
		Sign in
	</button>
</div>
```

## Secondary type button (light mode)

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

## Secondary type button (dark mode)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<button type="submit" class="b-button m-secondary_dark_mode">
		Sign in
	</button>
</div>
```

## Tertiary Buttons (light mode)

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

## Tertiary Buttons with icon (light mode)

```html_example
<button type="submit" class="b-button m-tertiary">
	Sign in
	<span class="b-button-icon_right">
		<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
		</svg>
	</span>
</button>
```

## Tertiary Buttons (dark)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<button type="submit" class="b-button m-tertiary_dark_mode">
		Sign in
	</button>
</div>
```

## Quick Tap Selected

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

## Quick Tap Not Selected

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

## Button as Text Link (light)

```html_example
<button class="b-button m-link">
	Link example
</button>
```

## Button as Text Link with icon (light)

```html_example
<button class="b-button m-link">
	Link example
	<span class="b-button-icon_right">
		<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
		</svg>
	</span>
</button>
```

*/
.b-button {
  font-weight: 136;
  height: 44px;
  padding: 0 20px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #604099;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button:hover, .b-button:focus {
    text-decoration: none;
  }
}
.b-button.m-disabled, .b-button:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button:hover, .b-button:focus {
    background-color: #753bbd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }
}
.b-button:active {
  background-color: #753bbd;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.18);
  color: #ffffff;
}
.b-button.m-disabled, .b-button:disabled {
  background-color: #535353;
  color: #ffffff;
}
.b-button.m-primary_dark_mode {
  font-weight: 136;
  height: 44px;
  padding: 0 20px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #ffffff;
  color: #604099;
}
@media not all and (pointer: coarse) {
  .b-button.m-primary_dark_mode:hover, .b-button.m-primary_dark_mode:focus {
    text-decoration: none;
  }
}
.b-button.m-primary_dark_mode.m-disabled, .b-button.m-primary_dark_mode:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-primary_dark_mode:hover, .b-button.m-primary_dark_mode:focus {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #753bbd;
  }
}
.b-button.m-primary_dark_mode:active {
  box-shadow: none;
  color: #604099;
}
.b-button.m-primary_dark_mode.m-disabled, .b-button.m-primary_dark_mode:disabled {
  background-color: #f3f4f3;
  color: #535353;
}
.b-button.m-primary .b-button-icon_left, .b-button.m-primary_dark_mode .b-button-icon_left {
  height: 24px;
  margin-right: 8px;
  margin-left: 0;
  width: 24px;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  padding: 6px;
  margin-left: -8px;
}
.b-button.m-primary .b-button-icon_left svg, .b-button.m-primary_dark_mode .b-button-icon_left svg {
  height: 100%;
  width: 100%;
}
.b-button.m-primary .b-button-icon_right, .b-button.m-primary_dark_mode .b-button-icon_right {
  height: 24px;
  margin-left: 8px;
  margin-right: 0;
  width: 24px;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  padding: 6px;
  margin-right: -8px;
}
.b-button.m-primary .b-button-icon_right svg, .b-button.m-primary_dark_mode .b-button-icon_right svg {
  height: 100%;
  width: 100%;
}
.b-button.m-secondary {
  font-weight: 136;
  height: 44px;
  padding: 0 20px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #ffffff;
  border: 2px solid #604099;
  color: #604099;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary:hover, .b-button.m-secondary:focus {
    text-decoration: none;
  }
}
.b-button.m-secondary.m-disabled, .b-button.m-secondary:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary:hover, .b-button.m-secondary:focus {
    border: 2px solid #753bbd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
    color: #753bbd;
  }
}
.b-button.m-secondary:active {
  border: 2px solid #604099;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.18);
  color: #604099;
}
.b-button.m-secondary.m-disabled, .b-button.m-secondary:disabled {
  background-color: #f3f4f3;
  border: 2px solid #535353;
  color: #535353;
}
.b-button.m-secondary_dark_mode {
  font-weight: 136;
  height: 44px;
  padding: 0 20px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: transparent;
  border: 2px solid #f3f4f3;
  color: #f3f4f3;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary_dark_mode:hover, .b-button.m-secondary_dark_mode:focus {
    text-decoration: none;
  }
}
.b-button.m-secondary_dark_mode.m-disabled, .b-button.m-secondary_dark_mode:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-secondary_dark_mode:hover, .b-button.m-secondary_dark_mode:focus {
    border: 2px solid #ffffff;
    box-shadow: none;
    color: #ffffff;
  }
}
.b-button.m-secondary_dark_mode:active {
  border: 2px solid #f3f4f3;
  box-shadow: none;
  color: #f3f4f3;
}
.b-button.m-secondary_dark_mode.m-disabled, .b-button.m-secondary_dark_mode:disabled {
  border: 2px solid #535353;
  color: #535353;
}
.b-button.m-secondary .b-button-icon_left, .b-button.m-secondary_dark_mode .b-button-icon_left {
  height: 24px;
  margin-right: 8px;
  margin-left: 0;
  width: 24px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 24px;
  padding: 0;
}
.b-button.m-secondary .b-button-icon_left svg, .b-button.m-secondary_dark_mode .b-button-icon_left svg {
  height: 100%;
  width: 100%;
}
.b-button.m-secondary .b-button-icon_right, .b-button.m-secondary_dark_mode .b-button-icon_right {
  height: 24px;
  margin-left: 8px;
  margin-right: 0;
  width: 24px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 24px;
  padding: 0;
}
.b-button.m-secondary .b-button-icon_right svg, .b-button.m-secondary_dark_mode .b-button-icon_right svg {
  height: 100%;
  width: 100%;
}
.b-button.m-tertiary {
  height: 30px;
  padding: 0 16px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #604099;
  color: #ffffff;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary:hover, .b-button.m-tertiary:focus {
    text-decoration: none;
  }
}
.b-button.m-tertiary.m-disabled, .b-button.m-tertiary:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary:hover, .b-button.m-tertiary:focus {
    background-color: #753bbd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #ffffff;
  }
}
.b-button.m-tertiary:active {
  background-color: #753bbd;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.18);
  color: #ffffff;
}
.b-button.m-tertiary.m-disabled, .b-button.m-tertiary:disabled {
  background-color: #535353;
  color: #ffffff;
}
.b-button.m-tertiary_dark_mode {
  height: 30px;
  padding: 0 16px;
  align-items: center;
  border-radius: 35px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  justify-content: center;
  max-width: 100%;
  text-decoration: none;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  -webkit-user-select: none;
          user-select: none;
  vertical-align: top;
  white-space: nowrap;
  background-color: #ffffff;
  color: #604099;
  border: 1px solid #535353;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary_dark_mode:hover, .b-button.m-tertiary_dark_mode:focus {
    text-decoration: none;
  }
}
.b-button.m-tertiary_dark_mode.m-disabled, .b-button.m-tertiary_dark_mode:disabled {
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
@media not all and (pointer: coarse) {
  .b-button.m-tertiary_dark_mode:hover, .b-button.m-tertiary_dark_mode:focus {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #753bbd;
  }
}
.b-button.m-tertiary_dark_mode:active {
  box-shadow: none;
  color: #604099;
}
.b-button.m-tertiary_dark_mode.m-disabled, .b-button.m-tertiary_dark_mode:disabled {
  background-color: #f3f4f3;
  color: #535353;
}
.b-button.m-tertiary .b-button-icon_left, .b-button.m-tertiary_dark_mode .b-button-icon_left {
  height: 12px;
  margin-right: 10px;
  margin-left: 0;
  width: 12px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 12px;
  padding: 0;
}
.b-button.m-tertiary .b-button-icon_left svg, .b-button.m-tertiary_dark_mode .b-button-icon_left svg {
  height: 100%;
  width: 100%;
}
.b-button.m-tertiary .b-button-icon_right, .b-button.m-tertiary_dark_mode .b-button-icon_right {
  height: 12px;
  margin-left: 10px;
  margin-right: 0;
  width: 12px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 12px;
  padding: 0;
}
.b-button.m-tertiary .b-button-icon_right svg, .b-button.m-tertiary_dark_mode .b-button-icon_right svg {
  height: 100%;
  width: 100%;
}
.b-button.m-processing {
  cursor: wait;
  display: inline-flex;
  pointer-events: none;
}
.b-button.m-link {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 102;
  height: auto;
  padding: 0;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-button.m-link:active {
  background: transparent;
  border-color: transparent;
}
.b-button.m-link:focus {
  border-radius: 0;
}
.b-button.m-link:active {
  color: #095c9c;
}
.b-button.m-link:hover, .b-button.m-link:focus {
  color: #043c8f;
}
.b-button.m-link.m-disabled, .b-button.m-link:disabled, .b-button.m-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-button.m-link_dark_mode {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 102;
  height: auto;
  padding: 0;
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #f3f4f3;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-button.m-link_dark_mode:active {
  background: transparent;
  border-color: transparent;
}
.b-button.m-link_dark_mode:focus {
  border-radius: 0;
}
.b-button.m-link_dark_mode:active {
  color: #ffffff;
}
.b-button.m-link_dark_mode:hover, .b-button.m-link_dark_mode:focus {
  color: #ffffff;
}
.b-button.m-link_dark_mode.m-disabled, .b-button.m-link_dark_mode:disabled, .b-button.m-link_dark_mode[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-button.m-link .b-button-icon_left, .b-button.m-link_dark_mode .b-button-icon_left {
  height: 12px;
  margin-right: 10px;
  margin-left: 0;
  width: 12px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 12px;
  padding: 0;
}
.b-button.m-link .b-button-icon_left svg, .b-button.m-link_dark_mode .b-button-icon_left svg {
  height: 100%;
  width: 100%;
}
.b-button.m-link .b-button-icon_right, .b-button.m-link_dark_mode .b-button-icon_right {
  height: 12px;
  margin-left: 10px;
  margin-right: 0;
  width: 12px;
  background: transparent;
  border-radius: 0;
  display: block;
  line-height: 12px;
  padding: 0;
}
.b-button.m-link .b-button-icon_right svg, .b-button.m-link_dark_mode .b-button-icon_right svg {
  height: 100%;
  width: 100%;
}
.b-button.m-large {
  font-weight: 136;
  height: 44px;
  padding: 0 20px;
}
.b-button.m-medium {
  height: 36px;
  padding: 0 16px;
}
.b-button.m-small {
  height: 30px;
  padding: 0 16px;
}
.b-button.m-width_full {
  width: 100%;
}
.b-button.m-on_input, .b-button.m-on_input_bottom, .b-button.m-crown_rewards_number {
  border-radius: 0 16px 16px 0;
  position: absolute;
  right: 0;
  top: 0;
}
.b-button.m-on_input_bottom {
  bottom: 0;
  top: auto;
}
.b-button.m-crown_rewards_number {
  top: 16px;
}
.b-button .b-button-icon_left.m-edit {
  display: none;
}
.b-button.m-personalize .b-button-icon_left.m-edit {
  display: inherit;
}
.b-button-addtocartbtn.hidden {
  display: none;
}

.b-icon_button.m-light {
  align-items: center;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  padding: 9px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  width: 36px;
  background: #ffffff;
  border: 1.8px solid #604099;
  color: #604099;
}
.b-icon_button.m-light svg {
  height: 100%;
  width: 100%;
}
@media not all and (pointer: coarse) {
  .b-icon_button.m-light:hover, .b-icon_button.m-light:focus {
    border-color: #753bbd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #753bbd;
  }
}
.b-icon_button.m-light:active {
  border-color: #604099;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  color: #604099;
}
.b-icon_button.m-light.m-disabled, .b-icon_button.m-light:disabled {
  border-color: #535353;
  color: #535353;
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}
.b-icon_button.m-dark {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 102;
  height: auto;
  padding: 0;
  color: #293035;
  cursor: pointer;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
}
.b-icon_button.m-dark:active {
  background: transparent;
  border-color: transparent;
}
.b-icon_button.m-dark:focus {
  border-radius: 0;
}
@media not all and (pointer: coarse) {
  .b-icon_button.m-dark:hover, .b-icon_button.m-dark:focus {
    color: #604099;
  }
}

.b-back_to_top {
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .b-back_to_top {
    align-items: center;
    background: #ffffff;
    bottom: 156px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
    color: #293035;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    justify-content: center;
    line-height: 1.2;
    min-width: 48px;
    opacity: 0;
    padding: 8px;
    pointer-events: auto;
    position: fixed;
    right: 32px;
    text-decoration: none;
    text-transform: uppercase;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    transition-property: opacity, visibility, box-shadow, bottom;
    visibility: hidden;
    z-index: 3;
  }
  html[dir=rtl] .b-back_to_top {
    left: 32px;
    right: initial;
  }
  @media not all and (pointer: coarse) {
    .b-back_to_top:hover {
      background: #293035;
      box-shadow: none;
      color: #ffffff;
      text-decoration: none;
    }
    .b-back_to_top:hover svg {
      height: 17px;
    }
    .b-back_to_top:hover .b-back_to_top-svg_line {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .b-back_to_top.m-showed {
    opacity: 1;
    visibility: visible;
  }
  .b-back_to_top svg {
    height: 10px;
    margin-bottom: 8px;
    transition: height cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  }
  .b-back_to_top-svg_line {
    opacity: 0;
    transform: translateY(-15px);
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: opacity, transform;
  }
  .b-back_to_top-copy_small {
    display: none;
  }
  .l-page.m-comparison_panel .b-back_to_top {
    bottom: 314px;
  }
  .l-page.m-sticky_panel .b-back_to_top, .l-page.m-comparison_panel.m-comparison_panel_collapsed .b-back_to_top {
    bottom: 164px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-back_to_top {
    margin: 0 auto;
    max-width: 1920px;
    padding-left: 88px;
    padding-right: 88px;
    align-items: center;
    color: #604099;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    letter-spacing: 0.036em;
    min-height: 48px;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
  }
}
@media screen and (max-width: 767.9px) and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-back_to_top {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 767.9px) and (min-width: 768px) and (max-width: 1023.9px) {
  .b-back_to_top {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) and (max-width: 767.9px) {
  .b-back_to_top {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-back_to_top-copy_large {
    display: none;
  }
}

/*md

# b-global_alerts

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

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

This messages should not have prominent visual styles.

## Warning

```html_example
<div class="b-global_alerts m-static_position">
    <div
        class="b-global_alerts-item"
        role="alert"
    >
		<h6> Title </h6>
        Filters applied
    </div>
</div>
```

## Error (Fixed position in the top of the page)

```html_example
<div class="b-global_alerts m-top_position">
    <div
        class="b-global_alerts-item m-error"
        role="alert"
    >
        Not available in selected store, please change the store before adding to cart
    </div>
</div>
```

## Success (Fixed position in the bottom of the page)

```html_example
<div class="b-global_alerts">
    <div
        class="b-global_alerts-item m-success"
        role="alert"
    >
		<h6> Title </h6>
        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:not(.m-static_position) {
  bottom: 20px;
  left: 50%;
  position: fixed;
  transform: translateX(-50%);
  z-index: 22;
}
@media screen and (max-width: 1023.9px) {
  .b-global_alerts:not(.m-static_position) {
    text-align: right;
    width: calc(100% - 20px);
  }
}
.b-global_alerts:not(.m-static_position) .b-global_alerts-item {
  display: inline-block;
  max-width: max-content;
}
@media screen and (max-width: 1023.9px) {
  .b-global_alerts:not(.m-static_position) .b-global_alerts-item {
    max-width: none;
    text-align: right;
    width: 100%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-global_alerts:not(.m-static_position) .b-global_alerts-item.text-left {
    text-align: left;
  }
}
.b-global_alerts.m-visually_hidden {
  pointer-events: none;
  visibility: hidden;
}
.b-global_alerts.m-static_position .b-global_alerts-item {
  margin-bottom: 20px;
  position: relative;
}
.b-global_alerts.m-top_position {
  bottom: auto;
  top: 12px;
  width: 98%;
}
.b-global_alerts.m-top_position .b-global_alerts-item {
  max-width: none;
  padding-right: 35px;
  position: relative;
  width: 100%;
}
.b-global_alerts.m-top_position .b-global_alerts-item + .b-global_alerts-item {
  margin-bottom: 10px;
}
.b-global_alerts.m-top_position a {
  text-decoration: none;
}
.b-global_alerts-wrapper {
  left: 1%;
  position: fixed;
  top: 12px;
  width: 100%;
  z-index: 22;
}
.b-global_alerts-item {
  animation: slide-from-bottom cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  background-color: #fff0cc;
  border-radius: 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  color: #602e00;
  cursor: default;
  margin: 0 auto;
  padding: 12px;
}
.b-global_alerts-item.m-error {
  background-color: #ffdddc;
  color: #8c0043;
  visibility: visible;
}
.b-global_alerts-item.m-success {
  background-color: #e4f3dc;
  color: #005016;
}
.b-global_alerts-item.m-accent {
  background-color: #f8f6fc;
  color: #604099;
}
.b-global_alerts-item h6 {
  font-size: 14px;
  font-weight: 102;
  text-transform: uppercase;
}
.b-global_alerts-close {
  cursor: pointer;
  position: absolute;
  right: 16px;
  top: 8px;
}
.b-global_alerts-close svg {
  height: 18px;
  width: 18px;
}

/*md

# b-link

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

## Navigation Utility (nav)

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

## Navigation Utility (nav disabled)

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

## Navigation Utility with icon (nav)

```html_example
<a href="#" class="b-link m-nav m-large m-left">
	<span>
		<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
		</svg>
	</span>
	Link example
</a>
```

## Navigation Utility with icon without wrapper (nav)

```html_example
<a href="#" class="b-link m-nav m-large m-left">
	<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
	</svg>
	Link example
</a>
```

## Navigation Utility with icon (nav disabled)

```html_example
<a href="#" class="b-link m-nav m-large m-disabled m-left">
	<span>
		<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
		</svg>
	</span>
	Link example
</a>
```

## Text Link (light)

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

## Text Link (light disabled)

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

## Text Link with right icon (light)

```html_example
<a href="#" class="b-link m-small m-right">
	Link example
	<span>
		<svg viewBox="0 0 11 16" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
			<path d="M1.11003 16C0.840029 16 0.56003 15.89 0.37003 15.67C2.95341e-05 15.26 0.0300292 14.63 0.440029 14.26L7.39003 7.99998L0.440029 1.73998C0.0300292 1.36998 2.95341e-05 0.739983 0.37003 0.329983C0.74003 -0.0800171 1.37003 -0.110017 1.78003 0.259983L10.38 7.99998L1.78003 15.74C1.59003 15.91 1.35003 16 1.11003 16Z" fill="currentColor"></path>
		</svg>
	</span>
</a>
```

## Text Link with left icon (light)

```html_example
<a href="#" class="b-link m-small m-left">
	<span">
		<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
			<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
		</svg>
	</span>
	Link example
</a>
```

## Text Link with left icon without wrapper (light)

```html_example
<a href="#" class="b-link m-small m-left">
	<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path d="M22 1C22 0.87 21.97 0.74 21.92 0.62C21.82 0.37 21.62 0.18 21.38 0.08C21.26 0.03 21.13 0 21 0H1C0.87 0 0.74 0.03 0.62 0.08C0.38 0.18 0.18 0.38 0.08 0.62C0.03 0.74 0 0.87 0 1V21C0 21.13 0.03 21.26 0.08 21.38C0.18 21.62 0.38 21.82 0.62 21.92C0.74 21.97 0.87 22 1 22H21C21.13 22 21.26 21.97 21.38 21.92C21.62 21.82 21.82 21.62 21.92 21.38C21.97 21.26 22 21.13 22 21V1ZM9.59 11L2 18.59V3.41L9.59 11ZM3.41 2H18.58L10.99 9.59L3.41 2ZM11 12.41L18.59 20H3.41L11 12.41ZM12.41 11L20 3.41V18.58L12.41 10.99V11Z"/>
	</svg>
	Link example
</a>
```

## Text Link with icon (light disabled)

```html_example
<a href="#" class="b-link m-small m-disabled m-right">
	Link example
	<span>
		<svg viewBox="0 0 11 16" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
			<path d="M1.11003 16C0.840029 16 0.56003 15.89 0.37003 15.67C2.95341e-05 15.26 0.0300292 14.63 0.440029 14.26L7.39003 7.99998L0.440029 1.73998C0.0300292 1.36998 2.95341e-05 0.739983 0.37003 0.329983C0.74003 -0.0800171 1.37003 -0.110017 1.78003 0.259983L10.38 7.99998L1.78003 15.74C1.59003 15.91 1.35003 16 1.11003 16Z" fill="currentColor"></path>
		</svg>
	</span>
</a>
```

## Text Link (dark)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<a href="#" class="b-link m-dark">
		Link example
	</a>
</div>
```

## Text Link (dark disabled)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<a href="#" class="b-link m-dark m-small m-disabled">
		Link example
	</a>
</div>
```

## Text Link with icon (dark)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<a href="#" class="b-link m-dark m-right m-small">
		Link example
		<span>
			<svg viewBox="0 0 11 16" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
				<path d="M1.11003 16C0.840029 16 0.56003 15.89 0.37003 15.67C2.95341e-05 15.26 0.0300292 14.63 0.440029 14.26L7.39003 7.99998L0.440029 1.73998C0.0300292 1.36998 2.95341e-05 0.739983 0.37003 0.329983C0.74003 -0.0800171 1.37003 -0.110017 1.78003 0.259983L10.38 7.99998L1.78003 15.74C1.59003 15.91 1.35003 16 1.11003 16Z" fill="currentColor"></path>
			</svg>
		</span>
	</a>
</div>
```

## Text Link with icon (dark disabled)

```html_example
<div style="background: hsla(206, 3%, 51%, 1); padding: 20px">
	<a href="#" class="b-link m-dark m-disabled m-right m-small">
		Link example
		<span>
			<svg viewBox="0 0 11 16" fill="currentColor" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
				<path d="M1.11003 16C0.840029 16 0.56003 15.89 0.37003 15.67C2.95341e-05 15.26 0.0300292 14.63 0.440029 14.26L7.39003 7.99998L0.440029 1.73998C0.0300292 1.36998 2.95341e-05 0.739983 0.37003 0.329983C0.74003 -0.0800171 1.37003 -0.110017 1.78003 0.259983L10.38 7.99998L1.78003 15.74C1.59003 15.91 1.35003 16 1.11003 16Z" fill="currentColor"></path>
			</svg>
		</span>
	</a>
</div>
```

*/
.b-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-link:active {
  color: #095c9c;
}
.b-link:hover, .b-link:focus {
  color: #043c8f;
}
.b-link.m-disabled, .b-link:disabled, .b-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-link svg {
  height: 14px;
  margin-left: 5px;
  margin-right: 0;
  width: 14px;
}
.b-link.m-dark {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #f3f4f3;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-link.m-dark:active {
  color: #ffffff;
}
.b-link.m-dark:hover, .b-link.m-dark:focus {
  color: #ffffff;
}
.b-link.m-dark.m-disabled, .b-link.m-dark:disabled, .b-link.m-dark[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-link.m-nav {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #293035;
  font-size: 14px;
  line-height: 22px;
  text-decoration: none;
}
.b-link.m-nav:active {
  color: #604099;
}
.b-link.m-nav:hover, .b-link.m-nav:focus {
  color: #753bbd;
}
.b-link.m-nav.m-disabled, .b-link.m-nav:disabled, .b-link.m-nav[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-link.m-small.m-left svg {
  height: 14px;
  margin-right: 5px;
  margin-left: 0;
  width: 14px;
}
.b-link.m-small.m-right svg {
  height: 14px;
  margin-left: 5px;
  margin-right: 0;
  width: 14px;
}
.b-link.m-large.m-left svg {
  height: 22px;
  margin-right: 9px;
  margin-left: 0;
  min-width: 22px;
  width: 22px;
}
.b-link.m-large.m-right svg {
  height: 22px;
  margin-left: 9px;
  margin-right: 0;
  min-width: 22px;
  width: 22px;
}

a.legal-inline-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
a.legal-inline-link:active {
  color: #095c9c;
}
a.legal-inline-link:hover, a.legal-inline-link:focus {
  color: #043c8f;
}
a.legal-inline-link.m-disabled, a.legal-inline-link:disabled, a.legal-inline-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

/*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 {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  unicode-bidi: isolate;
  white-space: nowrap;
}
.b-link_phone:active {
  color: #095c9c;
}
.b-link_phone:hover, .b-link_phone:focus {
  color: #043c8f;
}
.b-link_phone.m-disabled, .b-link_phone:disabled, .b-link_phone[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: 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 {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  white-space: nowrap;
}
.b-link_email:active {
  color: #095c9c;
}
.b-link_email:hover, .b-link_email:focus {
  color: #043c8f;
}
.b-link_email.m-disabled, .b-link_email:disabled, .b-link_email[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

.b-dialog {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, background-color;
  visibility: hidden;
  z-index: 18;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.b-dialog.m-opened, .b-dialog.m-active {
  background-color: rgba(0, 0, 0, 0.4);
  overflow-y: scroll;
  visibility: visible;
}
.b-dialog-window {
  animation: dialog-opening cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  color: #293035;
  display: flex;
  flex-direction: column;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 20px 0 0;
  position: relative;
  transform-origin: top center;
  width: 335px;
  z-index: 18;
}
@media screen and (max-width: 767.9px) {
  .b-dialog-window {
    margin: auto 16px;
  }
  .b-dialog.m-feature .b-dialog-window {
    height: auto;
  }
}
.b-dialog-window.m-widget-loading::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #095c9c;
  border-left-color: #c3d6ee;
  border-radius: 50%;
  border-top-color: #c3d6ee;
  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 (min-width: 768px) {
  .b-dialog-window.m-wide {
    width: 384px;
  }
}
@media screen and (min-width: 768px) {
  .b-dialog.m-reviews_guideline .b-dialog-window {
    width: 464px;
  }
}
.b-dialog.m-checkout_footer .b-dialog-window {
  width: 436px;
}
.b-dialog-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
@media screen and (min-width: 1024px) {
  .b-dialog-header.m-hide_lg {
    display: none;
  }
}
.b-dialog-header_icon {
  align-items: center;
  background: url('data:image/svg+xml,<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="35" cy="35" r="24" fill="%23604099"/><circle cx="1.5" cy="46.5" r="1" fill="%23604099"/><circle cx="46.5" cy="6.5" r="1" fill="%23604099"/><circle cx="59.1396" cy="55" r="1" fill="%23604099"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.56 55.4697C10.56 55.1936 10.3361 54.9697 10.06 54.9697C9.78383 54.9697 9.55997 55.1936 9.55997 55.4697V56.5697L8.45996 56.5697C8.18382 56.5697 7.95996 56.7936 7.95996 57.0697C7.95996 57.3459 8.18382 57.5697 8.45996 57.5697H9.55997V58.4697C9.55997 58.7459 9.78383 58.9697 10.06 58.9697C10.3361 58.9697 10.56 58.7459 10.56 58.4697V57.5697H11.46C11.7361 57.5697 11.96 57.3459 11.96 57.0697C11.96 56.7936 11.7361 56.5697 11.46 56.5697L10.56 56.5697V55.4697Z" fill="%23604099"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.6 1.5C36.6 1.22386 36.3762 1 36.1 1C35.8239 1 35.6 1.22386 35.6 1.5V2.60001L34.5 2.60001C34.2239 2.60001 34 2.82387 34 3.10001C34 3.37615 34.2239 3.60001 34.5 3.60001H35.6V4.5C35.6 4.77614 35.8239 5 36.1 5C36.3762 5 36.6 4.77614 36.6 4.5V3.60001H37.5C37.7761 3.60001 38 3.37616 38 3.10001C38 2.82387 37.7761 2.60001 37.5 2.60001L36.6 2.60001V1.5Z" fill="%23604099"/><path fill-rule="evenodd" clip-rule="evenodd" d="M66.6 42.4697C66.6 42.1936 66.3762 41.9697 66.1 41.9697C65.8239 41.9697 65.6 42.1936 65.6 42.4697V43.5697L64.5 43.5697C64.2239 43.5697 64 43.7936 64 44.0697C64 44.3459 64.2239 44.5697 64.5 44.5697H65.6V45.4697C65.6 45.7459 65.8239 45.9697 66.1 45.9697C66.3762 45.9697 66.6 45.7459 66.6 45.4697V44.5697H67.5C67.7761 44.5697 68 44.3459 68 44.0697C68 43.7936 67.7761 43.5697 67.5 43.5697L66.6 43.5697V42.4697Z" fill="%23604099"/></svg>');
  color: #ffffff;
  display: flex;
  height: 70px;
  justify-content: center;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  width: 70px;
}
.b-dialog-header_icon svg {
  width: 24px;
}
.b-dialog-title {
  font-size: 18px;
  font-weight: 136;
  letter-spacing: -0.0055em;
  line-height: 24px;
}
@media screen and (max-width: 1023.9px) {
  .b-dialog-title {
    font-size: 18px;
    line-height: 24px;
  }
}
.b-dialog-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
  background: #ffffff;
  border: 2px solid #604099;
  border-radius: 50%;
  color: #604099;
  height: 40px;
  position: absolute;
  right: 16px;
  top: -20px;
  width: 40px;
  z-index: 1;
}
.b-dialog-close:hover, .b-dialog-close:focus {
  color: #604099;
}
.b-dialog-close svg {
  height: 14px;
  width: 14px;
}
.b-dialog-close:hover {
  border-color: #753bbd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  color: #753bbd;
}
.b-dialog-body {
  flex: 1 1 auto;
  margin: 20px 0;
  overflow-y: auto;
  padding: 0 20px;
}
.b-dialog-body video {
  width: 100%;
}
@media screen and (max-height: 420px) {
  .b-dialog-body {
    background-color: #ffffff;
    margin: 20px 0 0;
    overflow-y: visible;
    padding: 0 20px 20px;
  }
}
.b-dialog-legal {
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 16px;
  margin-bottom: 20px;
}
.b-dialog-legal a {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.b-dialog-legal a:active {
  color: #095c9c;
}
.b-dialog-legal a:hover, .b-dialog-legal a:focus {
  color: #043c8f;
}
.b-dialog-legal a.m-disabled, .b-dialog-legal a:disabled, .b-dialog-legal a[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-dialog-footer {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  flex: 1 0 auto;
  gap: 20px;
  justify-content: space-between;
  padding: 16px 20px;
}
@media screen and (max-height: 420px) {
  .b-dialog-footer {
    background-color: #ffffff;
  }
}
.b-dialog-footer.m-inside {
  margin: 20px -20px -20px;
}
.b-dialog-footer.update-profile .b-button {
  width: auto;
  flex: initial;
}
.b-dialog-footer.m-gpay-apay-btn {
  display: block;
}
.b-dialog-footer::after {
  background: #ffffff;
  bottom: 0;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  width: 100%;
}
.b-dialog-footer button,
.b-dialog-footer .b-button {
  flex: 1 0 calc(50% - 10px);
  width: calc(50% - 10px);
}
.b-dialog-footer .b-button.m-link {
  flex: auto;
  justify-content: initial;
  width: auto;
}

@media screen and (max-width: 767.9px) {
  .b-dialog.m-feature {
    justify-content: flex-end;
    padding-bottom: 0;
  }
}
.b-dialog.m-feature .b-dialog-window {
  box-shadow: none;
  min-width: auto;
  padding: 0;
  width: 475px;
  border-radius: 750px 750px 145px 145px/170px 170px 80px 80px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-feature .b-dialog-window {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    width: 100%;
  }
}
.b-dialog.m-feature .b-dialog-header {
  justify-content: center;
  padding-top: 56px;
}
.b-dialog.m-feature .b-dialog-icon_background {
  height: 70px;
  left: calc(50% - 35px);
  position: absolute;
  top: -35px;
  width: 70px;
}
.b-dialog.m-feature .b-dialog-icon {
  height: 24px;
  left: calc(50% - 12px);
  position: absolute;
  top: -12px;
  width: 24px;
}
.b-dialog.m-feature .b-dialog-icon img {
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-feature.m-apply-reward-dollar .b-dialog-body, .b-dialog.m-feature.m-apply_reward_coupon .b-dialog-body {
    height: calc(100dvh - 120px);
  }
}
.b-dialog.m-feature .b-dialog-body {
  margin: 0;
  padding: 20px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-feature .b-dialog-body {
    max-height: calc(100vh - 280px);
    max-height: 100%;
    overflow-y: auto;
  }
}
@media screen and (max-height: 420px) {
  .b-dialog.m-feature .b-dialog-body {
    background-color: #ffffff;
    max-height: none;
    overflow-y: visible;
  }
}
.b-dialog.m-feature .b-dialog-footer {
  border-radius: 0;
  flex-wrap: initial;
  flex-grow: 0;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-feature .b-dialog-footer {
    box-shadow: none;
  }
}
.b-dialog.m-feature .b-dialog-footer::after {
  display: none;
}
.b-dialog.m-feature .b-dialog-close {
  top: 5px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-feature .b-dialog-close {
    right: 8%;
    top: -2px;
  }
}
.b-dialog.m-feature .b-carousel-item {
  min-width: 100%;
  position: relative;
  scroll-snap-align: center;
  width: 100%;
}
.b-dialog.m-feature .b-carousel-actions {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.b-dialog.m-feature .b-carousel-ctrl {
  margin-top: 0;
  position: static;
}
.b-dialog.m-feature .b-carousel-ctrl svg {
  width: 13px;
}
.b-dialog.m-feature .b-carousel-numeric_pagination {
  font-size: 12px;
}

.b-dialog.m-has_carousel .b-dialog-body {
  margin: 0;
  padding: 20px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-has_carousel .b-dialog-body {
    max-height: initial;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-has_carousel .b-carousel-actions {
    margin-top: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-has_carousel .b-carousel-track {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
  }
}

.b-dialog.m-feature_trigger .b-dialog-window {
  box-shadow: none;
  min-width: auto;
  padding: 0;
  width: 475px;
  border-radius: 750px 750px 0 0/170px 170px 0 0;
}
.b-dialog.m-feature_trigger .b-dialog-header {
  justify-content: center;
  padding: 56px 0 20px;
}
.b-dialog.m-feature_trigger .b-dialog-icon_background {
  height: 70px;
  left: calc(50% - 35px);
  position: absolute;
  top: -35px;
  width: 70px;
}
.b-dialog.m-feature_trigger .b-dialog-icon {
  height: 24px;
  left: calc(50% - 12px);
  position: absolute;
  top: -12px;
  width: 24px;
}
.b-dialog.m-feature_trigger .b-dialog-icon img {
  width: 100%;
}
.b-dialog.m-feature_trigger .b-dialog-close {
  top: -2px;
}

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

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

.b-dialog.m-sign_in .b-form_feedback_message {
  margin: 16px 0;
}
.b-dialog.m-sign_in .b-dialog-join {
  margin-bottom: 16px;
}
.b-dialog.m-sign_in .b-dialog-footer {
  margin-top: 0;
}

.b-dialog.m-reset_password .b-dialog-window {
  min-width: auto;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-reset_password .b-dialog-window {
    width: 455px;
  }
}

.b-dialog.m-delete_address .b-dialog-window {
  max-width: 100%;
  min-width: auto;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-delete_address .b-dialog-window {
    width: 335px;
  }
}

.b-dialog.m-wishlist .b-dialog-window {
  max-width: 100%;
  min-width: auto;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-wishlist .b-dialog-window {
    width: 384px;
  }
}

.b-dialog.m-countdown .b-dialog-window {
  border-radius: 8px 8px 0 0;
  min-height: auto;
  min-width: 335px;
  padding: 0;
}
.b-dialog.m-countdown .b-dialog-title {
  font-size: 18px;
  font-weight: 136;
  letter-spacing: -0.0055em;
  line-height: 24px;
  font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  margin-bottom: 20px;
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-countdown .b-dialog-title {
    font-size: 18px;
    line-height: 24px;
  }
}
.b-dialog.m-countdown .b-dialog-footer {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  font-weight: 136;
  margin-top: 20px;
  padding: 16px 20px;
}
.b-dialog.m-countdown .b-dialog-body {
  margin-top: 0;
  padding: 20px 16px 0;
}
.b-dialog.m-countdown .b-dialog-close {
  right: 20px;
}

.b-dialog.m-country_selector .b-dialog-window {
  min-width: auto;
  padding: 0 32px 48px;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-country_selector .b-dialog-window {
    max-width: 100%;
    width: 578px;
  }
}
@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;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-bonus_product .b-dialog-window {
    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-cart_overlay .b-dialog-window {
  min-height: 300px;
  padding: 0 32px 52px;
  width: 460px;
}
@media screen and (min-width: 768px) {
  .b-dialog.m-cart_overlay .b-dialog-window {
    width: 950px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-cart_overlay .b-dialog-window {
    padding: 0 16px 20px;
  }
}
.b-dialog.m-cart_overlay .b-dialog-body {
  display: none;
}

@media screen and (max-width: 767.9px) {
  .b-dialog.m-address_verification {
    justify-content: flex-end;
    padding: 0;
  }
}
.b-dialog.m-address_verification .b-dialog-window {
  padding-top: 0;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-address_verification .b-dialog-window {
    margin: 0;
    max-width: 100%;
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .b-dialog.m-address_verification .b-dialog-window {
    width: 390px;
  }
}
.b-dialog.m-address_verification .b-dialog-body {
  margin: 0;
  padding: 0;
}

.b-dialog.m-geolocation {
  background-color: initial;
  bottom: 80px;
  left: auto;
  overflow-y: initial;
  padding: 0;
  right: 20px;
  top: auto;
  transition: none;
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-geolocation {
    bottom: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-geolocation {
    left: 15px;
    max-width: calc(100% - 30px);
    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-video_player {
  background-color: #ffffff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  flex-direction: column;
  height: 96%;
  overflow: visible;
  top: 26px;
  z-index: 19;
}

.b-dialog.m-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: 18;
}
.b-dialog.m-drawer.m-opened, .b-dialog.m-drawer.m-active {
  background-color: rgba(0, 0, 0, 0.4);
  overflow-y: scroll;
  visibility: visible;
}
.b-dialog.m-drawer .b-dialog-window {
  display: none;
}

.b-dialog.m-subscriptions .b-account-title {
  display: none;
}
.b-dialog.m-subscriptions .b-drawer-header {
  padding-bottom: 0;
}
.b-dialog.m-subscriptions .b-form.m-account {
  padding-bottom: 80px;
}
.b-dialog.m-subscriptions .b-form_actions {
  background-color: #ffffff;
  bottom: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 16px 20px;
  bottom: 0;
  left: 0;
  padding: 20px;
  position: fixed;
  z-index: 23;
}
.b-dialog.m-subscriptions .b-form_field {
  margin-bottom: 12px;
}

.b-dialog.m-link_membership .b-dialog-window {
  width: 436px;
}
.b-dialog.m-link_membership .b-dialog-body {
  margin: 0;
  padding: 20px;
}

.b-dialog.m-membership_renewal .b-dialog-window {
  width: 460px;
}
.b-dialog.m-membership_renewal .b-membership_card {
  margin-bottom: 20px;
}

.b-dialog.m-full_width .b-dialog-window {
  min-width: 90vw;
}

.b-dialog.m-apply_reward_coupon.m-opened:not(:has(.m-top_dialog)) {
  display: none !important;
}
.b-dialog.m-apply_reward_coupon .b-dialog-footer.m-inside {
  margin-top: 0;
}

.b-dialog.m-store_submission .b-button {
  flex: 0 1 auto;
  width: auto;
}
.b-dialog.m-store_submission .b-dialog-body-text {
  margin-bottom: 24px;
}
.b-dialog.m-store_submission .b-dialog-body-selected_store {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.b-dialog.m-store_submission .b-dialog-body-selected_store-info {
  padding: 0;
  flex-grow: 2;
}
.b-dialog.m-store_submission .b-dialog-body-selected_store-info p {
  margin: 0;
}
.b-dialog.m-store_submission .b-dialog-body-selected_store-miles {
  text-align: right;
  flex-basis: 15%;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-store_submission .b-dialog-body-selected_store-miles {
    flex-basis: 25%;
  }
}
.b-dialog.m-store_submission .b-dialog-body-selected_store svg {
  width: 18px;
  height: 18px;
}
.b-dialog.m-store_submission .b-dialog-body .b-form_field {
  margin-bottom: 0;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-store_submission .b-dialog-window {
    width: 95%;
  }
}

@media screen and (min-width: 768px) {
  .b-dialog.m-wishlist.m-keepsake .b-dialog-window {
    width: 324px;
  }
}

.b-dialog.m-apply_reward_coupon .b-dialog-body {
  overflow: hidden;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-apply_reward_coupon .b-dialog-body {
    padding: 20px;
  }
}
.b-dialog.m-apply_reward_coupon .b-dialog-body .b-dialog-footer.m-inside {
  bottom: 0;
  margin: 0px;
  padding-bottom: 0px;
}
@media screen and (max-width: 767.9px) {
  .b-dialog.m-apply_reward_coupon .b-dialog-body .b-dialog-footer.m-inside {
    padding-bottom: 20px;
    margin: 20px -20px -20px;
  }
}
.b-dialog.m-apply_reward_coupon .b-reward-scroll {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  padding-right: 5px;
}
.b-dialog.m-apply_reward_coupon .b-reward-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.b-dialog.m-apply_reward_coupon .b-reward-scroll::-webkit-scrollbar-thumb {
  background-color: #555555;
  border-radius: 4px;
}
.b-dialog.m-apply_reward_coupon .b-reward-scroll::-webkit-scrollbar-track {
  background: #dddddd;
}
.b-dialog.m-apply_reward_coupon .b-reward_coupon-item {
  position: sticky;
  top: 0;
}
.b-dialog.m-apply_reward_coupon .b-reward_coupon-your_reward {
  overflow-x: hidden;
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  from {
    transform: translateY(80%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.b-dialog.m-show_left .b-dialog-window {
  width: 400px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 0;
  animation: slide-in-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-show_left .b-dialog-window {
    border-radius: 8px 8px 0 0;
    bottom: 0;
    width: 100%;
    height: 80%;
    top: unset;
    animation: slide-in-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
}
.b-dialog.m-show_left .b-dialog-header {
  justify-content: left;
  padding: 20px 20px 10px;
}
.b-dialog.m-show_left .b-dialog-title {
  font-size: 18px;
  font-weight: 136;
  letter-spacing: -0.0055em;
  line-height: 24px;
}
@media screen and (max-width: 1023.9px) {
  .b-dialog.m-show_left .b-dialog-title {
    font-size: 18px;
    line-height: 24px;
  }
}
.b-dialog.m-show_left .b-dialog-close {
  right: 16px;
  top: 10px;
  border: none;
  color: #293035;
}
.b-dialog.m-show_left .b-dialog-close:hover {
  box-shadow: none;
}
.b-dialog.m-show_left .b-dialog-close svg {
  width: 24px;
  height: 24px;
}

.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: 18;
}
.b-drawer.m-opened, .b-drawer.m-active {
  background-color: rgba(0, 0, 0, 0.4);
  overflow-y: scroll;
  visibility: visible;
}
.b-drawer.m-left .b-drawer-container {
  background-color: #ffffff;
  color: #293035;
  height: 100vh;
  height: 100dvh;
  max-width: 375px;
  position: fixed;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 18;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
}
@media screen and (max-height: 420px) {
  .b-drawer.m-left .b-drawer-container {
    overflow-y: scroll;
  }
}
.b-drawer.m-right .b-drawer-container {
  background-color: #ffffff;
  color: #293035;
  height: 100vh;
  height: 100dvh;
  max-width: 375px;
  position: fixed;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 18;
  bottom: 0;
  right: 0;
  transform: translateX(100%);
}
@media screen and (max-height: 420px) {
  .b-drawer.m-right .b-drawer-container {
    overflow-y: scroll;
  }
}
.b-drawer.m-top .b-drawer-container {
  background-color: #ffffff;
  color: #293035;
  height: 100vh;
  height: 100dvh;
  max-width: 375px;
  position: fixed;
  top: 0;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  transition-property: visibility, transform;
  visibility: hidden;
  width: 100%;
  z-index: 18;
  height: auto;
  left: 0;
  max-width: 100%;
  right: 0;
  transform: translateY(-100%);
}
@media screen and (max-height: 420px) {
  .b-drawer.m-top .b-drawer-container {
    overflow-y: scroll;
  }
}
.b-drawer.m-top .b-drawer-container.m-active {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  visibility: visible;
  transform: translateY(0);
}
.b-drawer.m-left .b-drawer-container.m-active, .b-drawer.m-right .b-drawer-container.m-active {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  visibility: visible;
  transform: translateX(0);
}
.b-drawer-inner {
  display: flex;
  flex-flow: column;
  height: 100vh;
  height: 100dvh;
  padding-top: 20px;
}
@media screen and (max-height: 420px) {
  .b-drawer-inner {
    background-color: #ffffff;
    height: auto;
  }
}
.b-drawer-header {
  padding: 0 20px 20px;
}
.b-drawer-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 24px;
  font-weight: 350;
  line-height: 32px;
}
@media screen and (max-width: 1023.9px) {
  .b-drawer-title {
    font-size: 22px;
    line-height: 28px;
  }
}
.b-drawer-close {
  color: #293035;
  cursor: pointer;
  position: absolute;
  right: 21px;
  top: 23px;
}
.b-drawer-close svg {
  height: 22px;
  width: 22px;
}
.b-drawer-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 20px;
}
.b-drawer-footer {
  background-color: #ffffff;
  bottom: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 16px 20px;
}

.b-drawer.m-store_pickup {
  z-index: 19;
}
.b-drawer.m-store_pickup .b-drawer-title {
  padding-bottom: 20px;
}
.b-drawer.m-store_pickup .b-drawer-header {
  padding-bottom: 0;
}
.b-drawer.m-store_pickup .b-drawer-inner {
  cursor: default;
}

@media screen and (max-width: 1023.9px) {
  .b-drawer.m-right .b-drawer-container {
    background-color: #ffffff;
    color: #293035;
    height: 100vh;
    height: 100dvh;
    max-width: 375px;
    position: fixed;
    top: 0;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
    transition-property: visibility, transform;
    visibility: hidden;
    width: 100%;
    z-index: 18;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
  }
}
@media screen and (max-width: 1023.9px) and (max-height: 420px) {
  .b-drawer.m-right .b-drawer-container {
    overflow-y: scroll;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-drawer.m-right .b-drawer-container.m-active {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
    visibility: visible;
    transform: translateX(0);
  }
}
/*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: "Queens Hat", "Times", serif;
  font-size: 52px;
  font-weight: 350;
  line-height: 68px;
  align-items: center;
  background-color: #f3f4f3;
  color: #293035;
  display: flex;
  height: 70vh;
  justify-content: center;
}
@media screen and (max-width: 1023.9px) {
  .b-content_placeholder {
    font-size: 42px;
    letter-spacing: -0.0075em;
    line-height: 58px;
  }
}

/*md

# b-user_content

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

## Headings

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

## Paragraphs

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

## An unordered list

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

## An ordered list

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

## Full page

```html_example
<div class="b-user_content">
	<h1>
		Privacy Policy
	</h1>
	<h2>General Information</h2>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
	<ul>
		<li>Provide, operate, and maintain our webste</li>
		<li>Improve, personalize, and expand our webste</li>
		<li>Understand and analyze how you use our webste</li>
	</ul>
	<ol>
		<li>Develop new products, services, features, and functionality</li>
		<li>Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes</li>
		<li>Send you emails</li>
		<li>Find and prevent fraud</li>
	</ol>
	<p>All orders are subject to product availability. If an item is not in stock at the time you place
		your order, we will notify you and refund you the total amount of your order, using the original
		method of payment.
	</p>
</div>
```
*/
@layer default.typography {
  .b-user_content > h1 {
    font-family: "Queens Hat", "Times", serif;
    font-size: 52px;
    font-weight: 350;
    line-height: 68px;
    margin-bottom: 32px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h1 {
      font-size: 42px;
      letter-spacing: -0.0075em;
      line-height: 58px;
    }
  }
  .b-user_content > h2 {
    font-family: "Queens Hat", "Times", serif;
    font-size: 46px;
    font-weight: 350;
    line-height: 48px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h2 {
      font-size: 38px;
      line-height: 48px;
    }
  }
  .b-user_content > h3 {
    font-family: "Queens Hat", "Times", serif;
    font-size: 36px;
    font-weight: 350;
    line-height: 40px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h3 {
      font-size: 30px;
      line-height: 40px;
    }
  }
  .b-user_content > h4 {
    font-size: 26px;
    font-weight: 136;
    letter-spacing: 0.01em;
    line-height: 32px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h4 {
      font-size: 24px;
      letter-spacing: 0.002em;
      line-height: 30px;
    }
  }
  .b-user_content > h5 {
    font-family: "Queens Hat", "Times", serif;
    font-size: 24px;
    font-weight: 350;
    line-height: 32px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h5 {
      font-size: 22px;
      line-height: 28px;
    }
  }
  .b-user_content > h6 {
    font-size: 18px;
    font-weight: 136;
    letter-spacing: -0.0055em;
    line-height: 24px;
  }
  @media screen and (max-width: 1023.9px) {
    .b-user_content > h6 {
      font-size: 18px;
      line-height: 24px;
    }
  }
  .b-user_content > :is(h2, h3, h4, h5, h6) {
    margin-bottom: 16px;
    margin-top: 32px;
  }
  .b-user_content > :is(h2, h3, h4, h5, h6):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-]) {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-weight: 102;
    color: #095c9c;
    font-size: 15px;
    line-height: 25px;
    text-decoration: underline;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  .b-user_content a:not([class^=b-]):active {
    color: #095c9c;
  }
  .b-user_content a:not([class^=b-]):hover, .b-user_content a:not([class^=b-]):focus {
    color: #043c8f;
  }
  .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: #535353;
    cursor: none;
    pointer-events: none;
  }
  .b-user_content ul,
  .b-user_content ol {
    display: block;
    margin-bottom: 16px;
    padding-left: 20px;
  }
  .b-user_content li {
    display: list-item;
    margin-bottom: 4px;
  }
  .b-user_content ul {
    list-style: disc outside;
  }
  .b-user_content ol {
    list-style: decimal outside;
  }
  .b-user_content ul > ul,
  .b-user_content ol > ul {
    margin-bottom: 0;
  }
  .b-user_content .b-unstyled_list {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
  }
}
/*md

# b-accordion

Global accordion component

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

## Simple accordion with plus/minus icon

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

## Accordion with multiple open items

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

*/
.b-accordion-item {
  box-shadow: 0 1px 0 0 #535353;
}
.b-accordion-button {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 18px;
  font-weight: 136;
  padding: 16px;
  text-align: start;
  width: 100%;
}
.b-accordion-button:hover, .b-accordion-button:focus {
  color: #604099;
}
.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.m-promo {
  height: auto !important;
}
.b-accordion-content.m-crown_rewards {
  overflow: visible;
}
.b-accordion-content[aria-hidden=false], .b-accordion-item:not([data-initialized="1"]) .b-accordion-content {
  display: block;
}
.b-accordion-content_inner {
  overflow: hidden;
  padding: 0 16px 20px;
}
.b-accordion-content_inner.m-crown_rewards {
  overflow: visible;
}

.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_plus_minus {
  display: block;
  flex-shrink: 0;
  height: 18px;
  margin-inline-start: auto;
  position: relative;
  width: 18px;
}
.b-icon_plus_minus::after, .b-icon_plus_minus::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: 100%;
}
.b-icon_plus_minus::before {
  animation-name: rotate-90up;
  border-radius: 1px;
  left: 0;
}
[aria-expanded=true] ~ .b-icon_plus_minus::before, [aria-expanded=true] .b-icon_plus_minus::before {
  animation-name: rotate-90down;
}
.b-icon_plus_minus.m-inverted::before {
  left: auto;
  right: 0;
}
.b-icon_plus_minus.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-size: 12px;
  line-height: 16px;
  margin-top: 8px;
}
.b-message.m-success {
  color: #005016;
}
.b-message.m-error {
  color: #8c0043;
}
.b-message.m-caption {
  color: #535353;
}

.b-info_message {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
}
.b-info_message svg {
  flex-shrink: 0;
}
.b-info_message svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-info_message.m-success {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #005016;
}
.b-info_message.m-success svg {
  flex-shrink: 0;
}
.b-info_message.m-success svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-info_message.m-regular {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #293035;
}
.b-info_message.m-regular svg {
  flex-shrink: 0;
}
.b-info_message.m-regular svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-info_message.m-error {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #8c0043;
}
.b-info_message.m-error svg {
  flex-shrink: 0;
}
.b-info_message.m-error svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-info_message.m-warning {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #602e00;
}
.b-info_message.m-warning svg {
  flex-shrink: 0;
}
.b-info_message.m-warning svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}

.b-qty .b-form_field {
  margin-bottom: 0;
}
.b-qty .b-select {
  height: 44px;
  min-width: 112px;
}

/*md

# form feedback message

Designed to display messages related to form submission, such as errors or success messages in a global context of the form.

*/
.b-form_feedback_message {
  font-size: 12px;
  line-height: 16px;
  margin-top: 24px;
  padding: 12px;
  border-radius: 8px;
}
.b-form_feedback_message.m-error {
  background-color: #ffdddc;
  color: #8c0043;
}
.b-form_feedback_message.m-error a {
  color: #8c0043;
}

/*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;
  gap: 20px;
  width: 100%;
}
.b-form_actions-button_first, .b-form_actions-button_second {
  width: 100%;
}
.b-form_actions-button_first + .b-form_actions-button_second {
  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: 20px 0 0;
}
@media screen and (max-width: 767.9px) {
  .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;
  }
}

/*md

# Input

Default input element

## Default

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

## Invalid

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

*/
.b-input {
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #535353;
  color: #293035;
  cursor: text;
  font-family: inherit;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  padding: 0 16px;
  vertical-align: baseline;
  width: 100%;
  /* stylelint-disable */
  /* stylelint-enable */
}
.b-input::placeholder {
  color: #535353;
}
.b-input:focus::placeholder {
  color: #293035;
}
.b-input:focus {
  border: 2px solid #753bbd;
  box-shadow: none;
}
.b-form_field label + .b-input[type=email], .b-form_field label + .b-input[type=text], .b-form_field label + .b-input[type=tel], .b-form_field label + .b-input[type=password], .b-form_field label + .b-input.m-cybersource {
  margin-top: -8px;
}
.b-form_field .iti .b-input, .b-form_field .b-input_password .b-input {
  margin-top: -8px;
}

/*md

# Select

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

<svg height="0" width="0" style="position:absolute" viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-down-small" viewBox="0 0 10 6">
        <path fill="currentColor" d="M5 6c-.256 0-.512-.098-.707-.293l-4-4c-.39-.39-.39-1.023 0-1.414.391-.39 1.023-.39 1.414 0l3.305 3.305L8.305.418c.4-.383 1.03-.372 1.414.025.384.397.373 1.031-.024 1.414l-4 3.862C5.5 5.907 5.25 6 5 6"></path>
    </symbol>
</svg>

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

## Error State

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

*/
.b-select {
  position: relative;
  width: 100%;
}
.b-select-input {
  appearance: none;
  background: #ffffff;
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px #535353;
  box-sizing: border-box;
  color: #535353;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  height: 44px;
  line-height: 18px;
  outline: none;
  padding: 0 36px 0 16px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  width: 100%;
}
.b-select-input:focus::-ms-value {
  background: transparent;
  color: #293035;
}
.b-select-input::-ms-expand {
  display: none;
}
.b-select-input:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #293035;
}
.b-select-input.m-disabled, .b-select-input[disabled] {
  background-color: #f3f4f3;
  box-shadow: inset 0 0 0 1px #535353;
  color: #535353;
  cursor: default;
  pointer-events: none;
}
.b-select-input.m-disabled + .b-select-icon_wrap, .b-select-input[disabled] + .b-select-icon_wrap {
  color: #535353;
}
.b-select-input:focus {
  border: 2px solid #753bbd;
  box-shadow: none;
}
.b-select-input_as_text {
  appearance: none;
  background: none;
  border: none;
  font-size: 16px;
  max-width: 100%;
  pointer-events: none;
  white-space: normal;
}
.b-select-icon {
  bottom: 0;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
}
.b-form_field-label + .b-select {
  margin-top: -8px;
}

option {
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-size: inherit;
}

.b-sorting {
  align-items: center;
  display: flex;
  position: relative;
}
.b-sorting-label {
  color: #293035;
  margin-right: 10px;
  width: 100%;
}
.b-sorting-label.m-small {
  font-size: 13px;
}
.b-sorting-input {
  appearance: none;
  background-color: #ffffff;
  border: 0;
  line-height: 25px;
}
.b-sorting-input::-ms-expand {
  display: none;
}
.b-sorting .b-select-icon {
  color: #095c9c;
  right: 15px;
}

.b-stepper {
  display: flex;
  -webkit-user-select: none;
          user-select: none;
  width: 141px;
}
.b-stepper-button {
  align-items: center;
  border: 1px solid #535353;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: -1px;
  min-height: 47px;
  min-width: 47px;
  text-align: center;
  touch-action: manipulation;
}
.b-stepper-button:active {
  background-color: #604099;
  color: #ffffff;
  fill: currentColor;
}
.b-stepper-button[disabled] {
  background-color: #f3f4f3;
  border-color: #535353;
  color: #535353;
  pointer-events: none;
}
.b-stepper-input {
  appearance: none;
  border: 1px solid;
  border-color: #535353;
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  margin: -1px;
  min-height: 47px;
  min-width: 47px;
  padding: 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}
.b-stepper-input:focus {
  border-color: #604099;
}
.b-stepper-input[disabled] {
  background-color: #f3f4f3;
  color: #293035;
  cursor: default;
  opacity: 1;
  -webkit-text-fill-color: #293035;
}

/*md

# Form field

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

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

## Label element

Label is optional element that add information about field purpose.

### Input element with label

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

### Label for mandatory input element

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

### Input element with link inside

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

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

## Caption element

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

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

### Right aligned caption

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

## Message element

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

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

## Different input elements inside `b-form_field`

### Select element with label

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

### Checkbox element with label

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

## Different width of the field

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

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

### `m-medium`

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

### `m-small`

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

*/
.b-form_field {
  margin-bottom: 24px;
  margin-top: 10px;
  position: relative;
  width: 100%;
}
.b-form_field.m-crown_reward {
  margin-bottom: 0px;
}
.b-form_field.m-highlight {
  background: #f3f4f3;
  margin-bottom: 0;
  padding: 32px 24px 24px;
}
.b-form_field.m-medium {
  width: 257px;
}
.b-form_field.m-small {
  width: 150px;
}
.b-form_field.m-password {
  margin-bottom: 0;
}
@media screen and (max-width: 767.9px) {
  .b-form_field.m-google_recaptcha {
    margin-bottom: 0;
  }
}
.b-form_field-label {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 56%, white 57%, white 100%);
  color: #535353;
  display: inline-block;
  font-size: 16px;
  line-height: 1;
  max-width: 90%;
  padding: 0 2px;
  padding-right: 6px;
  position: relative;
  transform: translate(12px, 0);
  z-index: 1;
}
.b-form_field-label.m-white_bg {
  background: #ffffff;
}
.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: 102;
  margin-bottom: 0;
}
.b-form_field-label a {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-form_field-label a:active {
  color: #095c9c;
}
.b-form_field-label a:hover, .b-form_field-label a:focus {
  color: #043c8f;
}
.b-form_field-label a.m-disabled, .b-form_field-label a:disabled, .b-form_field-label a[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-form_field-required_mark {
  color: #535353;
  position: absolute;
  right: 0;
  top: 0;
}
.b-newsletters .b-form_field-required_mark {
  color: #8c0043;
  display: inline-block;
  margin-left: -4px;
  position: static;
}
.b-form_field-caption {
  color: #535353;
  display: block;
  flex-grow: 1;
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
}
.b-form_field-caption.m-end {
  text-align: end;
}
.b-form_field.m-crown_reward .b-form_field-caption {
  color: #535353;
}
.b-form_field-message {
  color: #8c0043;
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
}
.b-form_field-message#dwfrm_login_recaptcha_googleRecaptcha-error {
  border-radius: 8px;
  background: var(--Color-Variables-Error-Background, #FFDDDC);
  display: flex;
  padding: 12px;
  align-items: flex-start;
  align-self: stretch;
  color: #8C0043;
  font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 102;
  line-height: 22px;
  margin-top: 20px;
}
.b-form_field-bottom {
  display: flex;
  justify-content: space-between;
}
.b-form_field-group {
  position: relative;
}
.b-form_field-group .b-input {
  appearance: none;
  background: #ffffff;
  border: 1px solid #293035;
  border-radius: 16px;
  box-shadow: none;
  box-sizing: border-box;
  font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  height: 48px;
  line-height: 48px;
  padding: 0 64px 0 20px;
  width: 100%;
}
.b-form_field-group .b-input::-ms-clear {
  display: none;
}
.b-form_field-group .b-input:focus {
  border: 2px solid #753bbd;
  box-shadow: none;
}
.b-form_field-group .b-button {
  border-radius: 0 16px 16px 0;
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  position: absolute;
  right: 0;
  top: 16px;
}
.b-form_field-group .b-button svg {
  height: 24px;
  width: 24px;
}
@media screen and (min-width: 1024px) {
  .b-offers-newsletters .b-form_field-group {
    margin: 0 auto;
    max-width: 507px;
  }
}
.b-form_field-dropdown_container {
  position: relative;
}
.b-form_field-dropdown {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  padding: 16px 18px;
  position: absolute;
  top: 63px;
  width: 100%;
  z-index: 9;
}
.b-form_field-dropdown button {
  display: block;
}
.b-form_field-dropdown button + button {
  margin-top: 20px;
}
.b-form_field-dropdown button:hover {
  cursor: pointer;
}
.b-form_field-dropdown button:focus {
  outline: 2px solid #753bbd;
}
.b-form_field-dropdown_highlight {
  color: #604099;
}
.b-form_field-wrapper.m-dual {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.b-form_field-wrapper.m-zip {
  max-width: 142px;
}
.b-form_field-wrapper.m-date {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  width: 100%;
}
.b-form_field-wrapper.m-date.m-divider {
  gap: 16px;
  justify-content: unset;
}
.b-form_field-wrapper.m-date.m-divider .b-form_field {
  max-width: 146px;
}
.b-form_field-wrapper.m-date.m-divider .b-form_field-divider {
  align-self: center;
}
.b-form_field-wrapper.m-toggle_show .b-link {
  margin-bottom: 16px;
  text-decoration: none;
}
.b-form_field-wrapper.m-toggle_show .b-link svg {
  transition-duration: 0.15s;
}
.b-form_field-wrapper.m-toggle_show .b-link[data-show=true] {
  margin-bottom: 10px;
}
.b-form_field-wrapper.m-toggle_show .b-link[data-show=true] svg {
  transform: rotate(180deg);
}
.b-form_field-wrapper.m-align-top {
  align-items: flex-start;
}
.b-form_field-toggle_link_label {
  text-decoration: underline;
}
[class^=b-form_field] + .b-form_field-wrapper.m-dual .b-form_field, [class^=b-form_field] + .b-form_field-wrapper.m-zip .b-form_field {
  margin-top: 0;
}
.b-form_field-label_radio {
  color: #535353;
  font-size: 16px;
}
.b-form_field fieldset {
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}
.b-form_field-hidden {
  display: none;
}
.b-form_field-info {
  display: block;
  font-size: 15px;
  line-height: 24px;
}

.cr-number-text {
  color: #535353;
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
  margin-bottom: 24px;
}

.b-email-message {
  margin-bottom: 0;
  top: -15px;
}

.b-form.m-login .recaptcha-v2-container {
  margin-bottom: 24px;
}

.crmember-field-error {
  color: #8c0043;
  font-size: 12px;
  font-weight: 102;
  line-height: 16px;
  padding: 12px;
  background-color: #ffdddc;
  border-radius: 8px;
  margin-bottom: 24px;
}

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

## Usage

A `b-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.

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

## Unchecked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-1" />
	<svg class="b-checkbox-icon" width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check fill="none" stroke="currentColor" d="M8.4866 19.1381L4.85437 15.2289L4.8544 15.2289L4.85058 15.2249C4.78094 15.1516 4.78253 15.0234 4.8626 14.9493L4.86296 14.949C4.94677 14.8713 5.0712 14.8791 5.14303 14.9568L5.14363 14.9574L8.04163 18.0794L8.44831 18.5175L8.80765 18.0398L18.8387 4.70482L18.8391 4.70425C18.9044 4.61717 19.032 4.59894 19.1191 4.66425C19.2061 4.72951 19.2244 4.85695 19.1592 4.94403C19.1592 4.94411 19.1591 4.94418 19.1591 4.94425L8.4866 19.1381Z"/>
		<line class="b-checkbox-disabled" x1="100%" y1="0" x2="0" y2="100%"></line>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-1">Some text</label>
</div>
```

## Checked
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-2" checked/>
	<svg class="b-checkbox-icon" width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check fill="none" stroke="currentColor" d="M8.4866 19.1381L4.85437 15.2289L4.8544 15.2289L4.85058 15.2249C4.78094 15.1516 4.78253 15.0234 4.8626 14.9493L4.86296 14.949C4.94677 14.8713 5.0712 14.8791 5.14303 14.9568L5.14363 14.9574L8.04163 18.0794L8.44831 18.5175L8.80765 18.0398L18.8387 4.70482L18.8391 4.70425C18.9044 4.61717 19.032 4.59894 19.1191 4.66425C19.2061 4.72951 19.2244 4.85695 19.1592 4.94403C19.1592 4.94411 19.1591 4.94418 19.1591 4.94425L8.4866 19.1381Z"/>
		<line class="b-checkbox-disabled" x1="100%" y1="0" x2="0" y2="100%"></line>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-2">Some text</label>
</div>
```

## Disabled
```html_example
<div class="b-checkbox">
	<input class="b-checkbox-input" type="checkbox" id="id-checkbox-3" disabled/>
	<svg class="b-checkbox-icon" width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<path class="b-checkbox-icon_check fill="none" stroke="currentColor" d="M8.4866 19.1381L4.85437 15.2289L4.8544 15.2289L4.85058 15.2249C4.78094 15.1516 4.78253 15.0234 4.8626 14.9493L4.86296 14.949C4.94677 14.8713 5.0712 14.8791 5.14303 14.9568L5.14363 14.9574L8.04163 18.0794L8.44831 18.5175L8.80765 18.0398L18.8387 4.70482L18.8391 4.70425C18.9044 4.61717 19.032 4.59894 19.1191 4.66425C19.2061 4.72951 19.2244 4.85695 19.1592 4.94403C19.1592 4.94411 19.1591 4.94418 19.1591 4.94425L8.4866 19.1381Z"/>
		<line class="b-checkbox-disabled" x1="100%" y1="0" x2="0" y2="100%"></line>
	</svg>
	<label class="b-checkbox-label" for="id-checkbox-3">Some text</label>
</div>
```

*/
.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 #604099;
  border-radius: 4px;
  cursor: pointer;
  margin-inline-end: 8px;
  min-width: 24px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border-color;
}
.b-checkbox-icon path {
  stroke: #ffffff;
  stroke-linecap: round;
  transform: scale(0);
  transform-origin: center center;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
}
.b-checkbox-icon line {
  display: none;
}
.b-checkbox-input:active + .b-checkbox-icon {
  transform: scale(0.9);
}
.b-checkbox:hover .b-checkbox-icon {
  border: 2px solid #753bbd;
}
.b-checkbox-input:checked + .b-checkbox-icon {
  background-color: #604099;
  border-width: 0;
}
.b-checkbox-input:checked + .b-checkbox-icon path {
  stroke: #ffffff;
  transform: scale(1);
}
.b-checkbox-input[disabled] + .b-checkbox-icon {
  background-color: #ffffff;
  border-color: #535353;
  border-width: 1px;
  cursor: default;
  transform: scale(1);
}
.b-checkbox-input[disabled] + .b-checkbox-icon path {
  display: none;
}
.b-checkbox-input[disabled] + .b-checkbox-icon line {
  display: block;
  stroke: #535353;
  stroke-width: 1.64px;
}
.b-checkbox-input.m-invalid + .b-checkbox-icon {
  border-color: #8c0043;
}
.b-checkbox-label {
  cursor: pointer;
  font-size: 15px;
  line-height: 1.7;
}
.b-newsletters .b-checkbox-label {
  position: relative;
  text-align: left;
}
.b-checkbox-input[disabled] + .b-checkbox-icon + .b-checkbox-label {
  color: #535353;
  cursor: default;
}
.b-checkbox_toggle-label {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 4px;
  background: #767676;
  border-radius: 20px;
}
.b-checkbox_toggle-label span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 100%;
}
.b-checkbox_toggle-label svg {
  width: 12px;
  height: 12px;
}
.b-checkbox_toggle-label svg path {
  stroke: #000000;
}
.b-checkbox_toggle-slider {
  position: relative;
  width: 52px;
  height: 28px;
}
.b-checkbox_toggle .b-checkbox-input {
  position: absolute;
  opacity: 0;
}
.b-checkbox-input:checked + .b-checkbox_toggle-label {
  background: #604099;
  justify-content: flex-end;
}
.b-checkbox-input:checked + .b-checkbox_toggle-label svg:first-child {
  display: block;
}
.b-checkbox-input:checked + .b-checkbox_toggle-label svg:last-child {
  display: none;
}
.b-checkbox-input:disabled + .b-checkbox_toggle-label {
  background-color: #767676;
}
.b-checkbox_toggle svg {
  border: 0;
  margin: 0;
  min-width: none;
  background: none;
}
.b-checkbox_toggle svg:first-child {
  display: none;
}
.b-checkbox_toggle svg:last-child {
  display: block;
}

/*md

# b-switch

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

## Usage

A `b-switch` 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.

`b-switch` has states (unchecked, checked).

## Unchecked
```html_example
<div class="b-switch">
	<input class="b-switch-input" type="checkbox" id="id-checkbox-1" />
	<div class="b-switch-icon"></div>
	<label class="b-switch-label" for="id-checkbox-1">Some text</label>
</div>
```

## Checked
```html_example
<div class="b-switch">
	<input class="b-switch-input" type="checkbox" id="id-checkbox-2" checked/>
	<div class="b-switch-icon"></div>
	<label class="b-switch-label" for="id-checkbox-2">Some text</label>
</div>
```

*/
.b-switch {
  align-items: center;
  display: flex;
  margin-bottom: 4px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  z-index: 1;
}
.b-switch-input {
  cursor: pointer;
  height: 24px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 24px;
}
html[dir=rtl] .b-switch-input {
  left: initial;
  right: 0;
}
.b-switch-icon {
  appearance: none;
  background: #ffffff;
  border: 2px solid #604099;
  border-radius: 24px;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  margin-inline-end: 8px;
  min-height: 24px;
  min-width: 48px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border;
  vertical-align: sub;
  width: 48px;
  z-index: -1;
}
.b-switch-icon::-ms-check {
  display: none;
}
.b-switch-icon::before {
  background-color: #604099;
  border-radius: 16px;
  content: "";
  height: 16px;
  left: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
  width: 16px;
}
.b-switch-input:active + .b-switch-icon {
  background-color: #604099;
}
.b-switch-input:active + .b-switch-icon::before {
  background-color: #ffffff;
  left: auto;
  right: 2px;
  transform: translateY(-50%);
}
.b-switch-input:checked + .b-switch-icon {
  background-color: #604099;
}
.b-switch-input:checked + .b-switch-icon::before {
  background-color: #ffffff;
  left: auto;
  right: 2px;
  transform: translateY(-50%);
}
.b-switch-label {
  cursor: pointer;
  font-size: 15px;
  line-height: 1.7;
}

.b-password_estimator {
  margin-top: 8px;
}
.b-password_estimator-inner {
  align-items: flex-end;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.b-password_estimator-indicator {
  display: flex;
  padding: 5px 0;
  width: 100%;
}
.b-password_estimator-indicator_item {
  background-color: #f3f4f3;
  height: 5px;
  margin-inline-end: 4px;
  transition: background-color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  width: 100%;
  border-radius: 5px;
}
.b-password_estimator-indicator_item:last-child {
  margin-inline-end: 0;
}
.b-password_estimator-indicator_item.m-weak {
  background-color: #8c0043;
}
.b-password_estimator-indicator_item.m-medium {
  background-color: #f3d03e;
}
.b-password_estimator-indicator_item.m-good {
  background-color: #a1d683;
}
.b-password_estimator-indicator_item.m-strong {
  background-color: #005016;
}
.b-password_estimator-validator_list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.b-password_estimator-validator_item {
  color: #293035;
  font-size: 15px;
  display: flex;
  align-items: center;
  line-height: 25px;
}
.b-password_estimator-validator_item.valid {
  color: #005016;
}
.b-password_estimator-validator_item svg {
  margin-right: 5px;
  width: 15px;
  height: 15px;
}
.b-password_estimator-indicator_description {
  color: #293035;
  font-size: 12px;
}
.b-password_estimator-caption {
  color: #535353;
  font-size: 12px;
  margin-top: 16px;
}

/*md

# b-radio

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

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

## Usage

Only one b-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.

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

## Unchecked

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

## Checked

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

## Disabled

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

*/
.b-radio {
  align-items: center;
  display: flex;
  margin-bottom: 4px;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
}
.b-radio.m-top_align {
  align-items: flex-start;
}
.b-radio-input {
  cursor: pointer;
  height: 20px;
  left: 0;
  opacity: 0;
  position: absolute;
  width: 20px;
}
html[dir=rtl] .b-radio-input {
  left: initial;
  right: 0;
}
.b-radio-icon {
  appearance: none;
  background: transparent;
  border: 1px solid #535353;
  border-radius: 20px;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin-inline-end: 8px;
  min-height: 20px;
  min-width: 20px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border;
  vertical-align: sub;
  width: 20px;
  z-index: -1;
}
@media screen and (max-height: 420px) {
  .b-radio-icon {
    z-index: 0;
  }
}
.b-radio-icon::-ms-check {
  display: none;
}
.b-radio-icon::before {
  background-color: #604099;
  border-radius: 12px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
  width: 12px;
}
.b-radio-input:active + .b-radio-icon {
  transform: scale(0.9);
}
.b-radio:hover .b-radio-icon, .b-radio:focus .b-radio-icon {
  border-color: #753bbd;
  border-width: 2px;
}
.b-radio:hover .b-radio-icon::before, .b-radio:focus .b-radio-icon::before {
  transform: translate(-50%, -50%) scale(1);
}
.b-radio-input:checked + .b-radio-icon {
  border-color: #604099;
  border-width: 2px;
}
.b-radio-input:checked + .b-radio-icon::before {
  transform: translate(-50%, -50%) scale(1);
}
.b-radio-input[disabled] + .b-radio-icon {
  background-color: #f3f4f3;
  border-color: #535353;
  border-width: 1px;
  cursor: default;
  transform: scale(1);
}
.b-radio-input[disabled] + .b-radio-icon::before {
  background-color: #535353;
  border: 1px solid #f3f4f3;
  height: 22px;
  top: 50%;
  transform: translate(-50%, -50%) scale(1) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  width: 3.39px;
}
.b-radio-input.m-invalid + .b-radio-icon {
  border-color: #8c0043;
}
.b-radio-label {
  cursor: pointer;
}
.b-radio-input[disabled] ~ .b-radio-label {
  color: #535353;
}

.b-countdown {
  position: relative;
}
.b-countdown-time {
  font-size: 15px;
  font-weight: 136;
  letter-spacing: 0.3px;
  line-height: 24px;
  text-align: center;
}

.b-product_partner {
  overflow: auto;
}
@media screen and (max-width: 1023.9px) {
  .b-product_partner {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1367px) {
  .b-product_partner {
    width: calc(100% + 88px);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-product_partner {
    width: calc(100% + 20px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-product_partner {
    width: calc(100% + 32px);
  }
}
.b-minicart-content .b-product_partner {
  margin-bottom: 12px;
  width: auto;
}
.b-product_partner-list {
  display: flex;
  gap: 12px;
}
@media screen and (max-width: 767.9px) {
  .b-product_partner-list {
    flex-direction: column;
  }
}
.b-minicart-content .b-product_partner-list {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .b-product_partner-list .b-product_tile:nth-of-type(n+3) {
    display: none;
  }
}
.b-product_partner-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 24px;
  font-weight: 350;
  line-height: 32px;
  margin-bottom: 8px;
}
@media screen and (max-width: 1023.9px) {
  .b-product_partner-title {
    font-size: 22px;
    line-height: 28px;
  }
}
.b-product_partner .b-product_tile {
  border: 1px solid #535353;
  border-radius: 16px;
  display: grid;
  flex: 0 0 auto;
  grid-template-areas: "image title" "image price" "image button";
  height: auto;
  overflow: hidden;
  padding: 0;
  width: 300px;
}
@media screen and (min-width: 768px) {
  .b-product_partner .b-product_tile {
    grid-auto-columns: 43% 57%;
  }
}
@media screen and (max-width: 767.9px) {
  .b-product_partner .b-product_tile {
    grid-auto-columns: 35% 65%;
  }
}
@media screen and (max-width: 767.9px) {
  .b-product_partner .b-product_tile {
    width: 100%;
  }
}
.b-minicart-content .b-product_partner .b-product_tile {
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .b-minicart-content .b-product_partner .b-product_tile {
    grid-auto-columns: 43% 57%;
  }
}
.b-product_partner .b-product_tile-image {
  height: 100%;
}
.b-product_partner .b-product_tile-inner {
  padding: 8px 8px 0;
}
.b-product_partner .b-product_tile-top {
  grid-area: image;
  padding: 0;
  width: 130px;
}
.b-product_partner .b-product_tile-top::before, .b-product_partner .b-product_tile-top::after {
  display: none;
}
.b-product_partner .b-product_tile-title {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-area: title;
}
.b-product_partner .b-product_tile-info {
  grid-area: price;
  margin: 0 0 8px;
}
.b-product_partner .b-product_tile-collection, .b-product_partner .b-product_tile-shipping_message, .b-product_partner .b-product_tile-highlight_message {
  display: none;
}
.b-product_partner .b-button_wrapper {
  grid-area: button;
  margin: 0 0 8px 8px;
  position: static;
}
.b-product_partner .b-wishlist_button,
.b-product_partner .b-product_tile_alt_view-item.m-alt,
.b-product_partner .b-button.m-personalize,
.b-product_partner .b-promotion,
.b-product_partner .b-rating {
  display: none;
}

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

.b-minicart {
  background-color: #ffffff;
  bottom: 0;
  color: #293035;
  height: 100%;
  max-width: 375px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  visibility: hidden;
  width: 100%;
  z-index: 18;
}
html[dir=rtl] .b-minicart {
  left: 0;
  right: initial;
  transform: translateX(-100%);
}
.b-minicart.m-activated {
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
}
.b-minicart.m-active {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  transform: translateX(0);
  transition: transform cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.5s;
  visibility: visible;
}
html[dir=rtl] .b-minicart.m-active {
  transform: translateX(0);
}
.b-minicart.m-loading_long::before {
  animation: 1s linear infinite rotate;
  border: 0.375em solid #095c9c;
  border-left-color: #c3d6ee;
  border-radius: 50%;
  border-top-color: #c3d6ee;
  content: "";
  display: block;
  height: 3em;
  margin: auto;
  pointer-events: none;
  position: relative;
  text-indent: -9999em;
  width: 3em;
  left: 50%;
  margin: -1em 0 0 -1em;
  position: absolute;
  top: 50%;
}
.b-minicart-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow-y: auto;
  padding-top: 72px;
}
.b-minicart[aria-busy=true] .b-minicart-inner {
  opacity: 0.6;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-minicart-header {
  background: #ffffff;
  left: 0;
  padding: 20px 20px 20px 24px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1;
}
.b-minicart-close {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 102;
  height: auto;
  padding: 0;
  color: #293035;
  cursor: pointer;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
  position: absolute;
  right: 21px;
  top: 23px;
}
.b-minicart-close:active {
  background: transparent;
  border-color: transparent;
}
.b-minicart-close:focus {
  border-radius: 0;
}
@media not all and (pointer: coarse) {
  .b-minicart-close:hover, .b-minicart-close:focus {
    color: #604099;
  }
}
.b-minicart-close svg {
  height: 22px;
  width: 22px;
}
.b-minicart-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 24px;
  font-weight: 350;
  line-height: 32px;
}
@media screen and (max-width: 1023.9px) {
  .b-minicart-title {
    font-size: 22px;
    line-height: 28px;
  }
}
.b-minicart-messages {
  padding: 0 20px;
}
.b-minicart-messages_item {
  border-radius: 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  margin-bottom: 20px;
  padding: 12px 34px 12px 16px;
  position: relative;
  text-align: left;
  width: 100%;
}
.b-minicart-messages_item:last-child {
  margin-bottom: 32px;
}
.b-minicart-messages_item button {
  cursor: pointer;
  height: 18px;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 18px;
}
.b-minicart-content {
  flex-grow: 1;
  padding: 51px 20px 0;
}
.b-minicart-content_title {
  font-size: 18px;
  font-weight: 136;
  letter-spacing: -0.0055em;
  line-height: 24px;
  display: flex;
  margin-bottom: 20px;
}
@media screen and (max-width: 1023.9px) {
  .b-minicart-content_title {
    font-size: 18px;
    line-height: 24px;
  }
}
.b-minicart-content_title_icon {
  height: 18px;
  margin-right: 8px;
  min-width: 18px;
  width: 18px;
}
.b-minicart-content_title_icon svg {
  width: 100%;
}
.b-minicart-content_title_icon.m-delivery {
  color: #604099;
}
.b-minicart-content_title_icon.m-store {
  margin-top: -2px;
}
.b-minicart-footer {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  padding: 8px;
}
.b-minicart-total {
  margin-bottom: 12px;
}
.b-minicart-progress {
  margin-bottom: 12px;
}
.b-minicart-progress_description {
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
}
.b-minicart-actions {
  display: flex;
  justify-content: space-between;
}
.b-minicart-actions .b-button {
  width: 100%;
}
.b-minicart-actions .b-button + .b-button {
  margin-inline-start: 8px;
}
.b-minicart-empty {
  align-items: center;
  display: flex;
  font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-size: 24px;
  height: 100%;
  justify-content: center;
}

@media screen and (max-width: 767.9px) {
  .b-minicart_panel.b-mobile-flyout .b-minicart {
    max-width: 350px;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_line {
    border: 0;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_line-remove {
    display: none;
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-title {
    font-size: 18px;
    font-family: "Beam";
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-content {
    padding-top: 0;
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-content_title {
    font-size: 15px;
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-actions .b-close-dialog {
    background-color: #fff;
    border: 2px solid #604099;
    color: #604099;
  }
  .b-minicart_panel.b-mobile-flyout .b-minicart-actions a {
    margin-inline-start: unset;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner {
    border-top: 1px solid #535353;
    padding-top: 1rem;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner-list {
    position: relative;
    display: flex;
    flex-direction: row;
    font-size: 15px;
    overflow: auto;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner-title {
    color: #293035;
    font-size: 15px;
    letter-spacing: 0.3px;
    font-family: "Beam";
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-product_tile {
    display: flex;
    flex-basis: 130px;
    flex-direction: column;
    border: 0;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-product_tile-image img {
    border: none;
    bottom: 0;
    color: #f3f4f3;
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-product_tile-info {
    margin-bottom: 12px;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-product_tile-top {
    padding: 0;
    width: 90px;
    align-self: center;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-button_wrapper {
    position: relative;
    padding: unset;
    margin: 0 0 8px;
    font-size: 14px;
  }
  .b-minicart_panel.b-mobile-flyout .b-product_partner .b-button_wrapper .b-button {
    border-radius: 35px;
    border: 1px solid #535353;
    font-size: 14px;
  }
  .b-minicart_panel.b-mobile-drawer .b-minicart {
    max-width: 100%;
    transform: translateY(0);
    top: unset;
    height: unset;
  }
  .b-minicart_panel.b-mobile-drawer .b-minicart_panel.m-activated {
    transform: translateY(0);
  }
  .b-minicart_panel.b-mobile-drawer .b-minicart-content {
    padding: 0 20px;
  }
  .b-minicart_panel.b-mobile-drawer .b-minicart-actions {
    flex-direction: column;
    gap: 10px;
  }
  .b-minicart_panel.b-mobile-drawer .b-minicart-actions .b-continue-checkout {
    margin: 0;
    margin-inline-start: unset;
  }
  .b-minicart_panel.b-mobile-drawer .b-continue-shopping {
    background-color: white;
    border: 1px solid #604099;
    color: #604099;
  }
  .b-minicart_panel.b-mobile-drawer [data-ref=einsteinRecomendations] {
    display: none;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart_panel-container.m-opened {
    z-index: 34;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-inner {
    padding-top: 45px;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-product_line-image {
    width: 90px;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-header {
    padding-bottom: 0px;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-title {
    font-size: 18px;
    font-family: "Beam";
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-content {
    padding: 0 20px;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-product_line {
    border: 0;
    margin-bottom: 0;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-footer {
    box-shadow: none;
  }
  .b-minicart_panel.b-mobile-drawer.m-minimized [data-ref=einsteinRecomendations],
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-product_line-remove,
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-content_block .b-minicart-content_title,
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-continue-shopping,
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-product_line-qty,
  .b-minicart_panel.b-mobile-drawer.m-minimized .b-minicart-progress {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .b-minicart_panel.b-desktop-flyout .b-minicart-content {
    padding: 0 20px;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_line {
    border-bottom: 0;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-content_title {
    margin-bottom: 0;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-content_subtotal {
    display: block !important;
    padding-bottom: 0.5rem;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-content_subtotal-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 136;
    line-height: 16px;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-content .b-product_partner-list {
    flex-flow: row wrap;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-content .b-product_partner .b-product_tile {
    width: 150px;
    display: flex;
    flex-direction: column;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_partner .b-product_tile {
    border: 0;
    margin: 12px 0;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_partner-list {
    justify-content: space-between;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_partner .b-button_wrapper,
  .b-minicart_panel.b-desktop-flyout .b-product_tile .b-button_wrapper {
    position: relative;
    margin: 0;
    padding: 0;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_partner .b-product_tile-top {
    grid-area: image;
    padding: 0;
    width: 100px;
    margin: 0 auto;
  }
  .b-minicart_panel.b-desktop-flyout .b-product_partner .b-product_tile-inner {
    padding: 8px 0 0;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-footer,
  .b-minicart_panel.b-desktop-flyout .b-continue-shopping {
    display: none;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-summary {
    margin-bottom: 1.25rem;
  }
  .b-minicart_panel.b-desktop-flyout .b-minicart-total {
    display: flex;
    justify-content: space-between;
  }
  .b-minicart_panel.b-desktop-flyout [data-ref=einsteinRecomendations] {
    height: 550px;
    overflow: hidden;
  }
}
.b-product_line {
  border-bottom: 1px solid #535353;
  margin-bottom: 20px;
  padding: 8px 0;
  position: relative;
}
.b-product_line.m-account {
  border-color: #f3f4f3;
  padding: 12px 0;
}
.b-product_line-heading {
  margin-bottom: 20px;
}
.b-product_line-inner {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}
.b-minicart .b-product_line-inner {
  flex-wrap: nowrap;
}
.b-product_line-message {
  border-radius: 8px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.18);
  margin-bottom: 32px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
}
.b-product_line-image {
  width: 120px;
}
.b-product_line.m-account .b-product_line-image {
  width: 143px;
}
.b-product_line-picture {
  background: #f3f4f3;
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-product_line-picture img {
  border: none;
  bottom: 0;
  color: #f3f4f3;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-product_line-title {
  font-weight: 102;
}
.b-product_line.m-account .b-product_line-title {
  margin-bottom: 8px;
}
.b-product_line-title_link {
  font-weight: 102;
  line-height: 24px;
  text-decoration: none;
}
.b-product_line-attribute {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.b-product_line-attribute.m-options {
  display: none;
}
.b-product_line.m-account .b-product_line-attribute {
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 16px;
  margin-bottom: 8px;
}
.b-product_line-details {
  flex: 1 1;
  width: 175px;
}
.b-product_line.m-account .b-product_line-details {
  display: flex;
  flex-direction: column;
}
.b-product_line-price_total {
  font-weight: 136;
  margin-bottom: 8px;
}
.b-product_line.m-account .b-product_line-price_total {
  order: 1;
}
.b-product_line-price_each {
  display: none;
}
.b-product_line-remove {
  width: 24px;
}
.b-product_line-remove_btn {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  font-weight: 102;
  height: auto;
  padding: 0;
  color: #293035;
  cursor: pointer;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: color;
}
.b-product_line-remove_btn:active {
  background: transparent;
  border-color: transparent;
}
.b-product_line-remove_btn:focus {
  border-radius: 0;
}
@media not all and (pointer: coarse) {
  .b-product_line-remove_btn:hover, .b-product_line-remove_btn:focus {
    color: #604099;
  }
}
.b-product_line.m-account .b-product_line-qty {
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 16px;
  margin-bottom: 8px;
}

.b-product_tile {
  height: 100%;
  padding-bottom: 50px;
  position: relative;
}
.l-wishlist_grid .b-product_tile {
  padding-bottom: 80px;
}
.b-product_tile-top {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 1023.9px) {
  .b-product_tile-top {
    padding-bottom: 16px;
  }
}
.b-wishlist .b-product_tile-top {
  margin-bottom: 20px;
}
.b-product_tile-image_link {
  display: block;
}
.b-product_tile-image {
  background: #f3f4f3;
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}
.b-product_tile-image img {
  border: none;
  bottom: 0;
  color: #f3f4f3;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-product_tile-inner {
  padding: 0 8px;
}
.b-product_tile-no_available {
  color: #8c0043;
  margin-bottom: 8px;
}
.b-product_tile-title {
  font-weight: 102;
  line-height: 1.6;
  padding-right: 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, .b-product_tile-link:focus {
    color: #604099;
  }
}
.b-product_tile-link:hover, .b-product_tile-link:focus {
  color: initial;
}
.b-product_tile-info {
  display: flex;
  justify-content: space-between;
}
.b-product_tile-info .freegift-title {
  font-weight: 136;
}
.b-product_tile-shipping_message {
  color: #005016;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 8px;
}
.b-product_tile-collection {
  color: #293035;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
}
.b-product_tile-collection_separator {
  margin: 0 7px;
}
.b-product_tile-highlight_message {
  font-size: 12px;
  line-height: 16px;
}
.b-product_tile.m-hero_product {
  grid-column: 2/-1;
  grid-row: 2/4;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-product_tile.m-hero_product {
    grid-column: 1/-1;
    grid-row: 3/4;
  }
}
@media screen and (max-width: 767.9px) {
  .b-product_tile.m-hero_product {
    grid-column: 1/-1;
    grid-row: 5;
  }
}
.b-product_tile .b-button_wrapper {
  bottom: 0;
  display: flex;
  gap: 20px;
  left: 0;
  padding: 0 8px;
  position: absolute;
  right: 0;
}
.b-carousel-item .b-product_tile .b-button_wrapper {
  gap: 10px;
}
.l-wishlist_grid .b-product_tile .b-button_wrapper {
  flex-wrap: wrap;
  row-gap: 5px;
}
.b-product_tile .b-button {
  height: 36px;
  padding: 0 16px;
}

/*md

# b-product_tile_swatches

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

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

```html_example
<div class="b-product_tile_swatches">
	<a class="b-product_tile_swatches-swatch m-selected" href="" title="Green color" style="background-color: #2e7d32"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="Black color" style="background-color: #000000"></a>
	<a class="b-product_tile_swatches-swatch" href="#" title="White color" style="background-color: #FFFFFF"></a>
	<a class="b-product_tile_swatches-leftover" href="#" title="Show all" aria-label="Show all">+1</a>
</div>
```
*/
.b-product_tile_swatches {
  align-items: center;
  display: flex;
  margin: 8px 0;
}
.b-product_tile_swatches-swatch {
  background-size: cover;
  border: 1px solid #535353;
  border-radius: 50%;
  height: 40px;
  margin: 0 12px 0 0;
  margin-inline-end: 12px;
  margin-inline-start: 0;
  min-width: 40px;
  width: 40px;
}
.b-product_tile_swatches-swatch:last-child {
  margin-inline-end: 0;
}
.b-product_tile_swatches-swatch:hover, .b-product_tile_swatches-swatch:focus, .b-product_tile_swatches-swatch.m-selected {
  border-color: #604099;
  outline: 1px solid #604099;
}
.b-product_tile_swatches-leftover {
  font-size: 18px;
  margin-left: 4px;
  text-decoration: none;
}

@media screen and (max-width: 1023.9px) {
  .b-product_tile_alt_view::before {
    background-color: #604099;
    transform: translateX(-20px);
  }
  .b-product_tile_alt_view::after {
    background-color: #535353;
    transform: translateX(8px);
  }
  .b-product_tile_alt_view::after, .b-product_tile_alt_view::before {
    border-radius: 100%;
    bottom: 0;
    content: "";
    display: inline-block;
    height: 12px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 12px;
    z-index: 1;
  }
  .b-product_tile_alt_view.m-alt_active::before {
    background-color: #535353;
  }
  .b-product_tile_alt_view.m-alt_active::after {
    background-color: #604099;
  }
}
.b-product_tile_alt_view-track {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media screen and (max-width: 1023.9px) {
  .b-product_tile_alt_view-track {
    display: flex;
    -ms-overflow-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .b-product_tile_alt_view-track::-webkit-scrollbar {
    display: none;
  }
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-track {
  height: auto;
}
.b-product_tile_alt_view-item {
  height: 100%;
}
@media screen and (max-width: 1023.9px) {
  .b-product_tile_alt_view-item {
    min-width: 100%;
    scroll-snap-align: start;
  }
}
.l-page-container.m-edit_mode .b-product_tile_alt_view-item {
  height: auto;
}
@media screen and (min-width: 1024px) {
  .b-product_tile_alt_view-item.m-alt {
    background-color: #ffffff;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
    visibility: hidden;
  }
  .b-product_tile_alt_view-item.m-alt img {
    color: #ffffff;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-carousel .b-product_tile_alt_view-item.m-alt {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .b-product_tile_alt_view:hover .b-product_tile_alt_view-item.m-alt, .b-product_tile_alt_view:focus .b-product_tile_alt_view-item.m-alt {
    opacity: 1;
    visibility: visible;
  }
}

/*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-product_tile .b-rating-icon {
  margin-top: -3px;
}
.b-rating-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.b-product_tile-info .b-rating-link:has(.empty) .b-rating-icon {
  display: none;
}
.b-product_tile-info .b-rating-link:has(.empty) .plp-hidden {
  display: none;
}
.b-product_details-rating .b-rating-link:has(.empty) .pdp-hidden {
  display: none;
}
.b-rating-link:hover {
  text-decoration: none;
}
.b-rating-filled {
  fill: #293035;
}
.b-rating-number {
  unicode-bidi: isolate;
  font-size: 15px;
}
.b-product_tile-info .b-rating-number {
  font-size: 12px;
}
.b-rating-number_value {
  font-weight: 170;
}
.b-rating-reviews-number {
  font-weight: 102;
}

.b-product_tile .b-rating {
  height: 24px;
}

/*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-price-item m-new">
		$9.99
	</span>
	<span class="b-sr_only">Was</span>
	<span class="b-sr_only">, is</span>
	<span class="b-price-item m-old">
		$11.99
	</span>
</div>
```

## Price range

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

*/
.b-price {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-weight: 136;
  position: relative;
}
.b-price-item {
  display: inline-block;
  margin-inline-end: 4px;
  white-space: nowrap;
}
.b-price-item:last-child {
  margin: 0;
}
.b-price-item.m-new {
  color: #bf0000;
  margin-inline-end: 12px;
}
.b-price-item.m-old {
  color: #535353;
  text-decoration: line-through;
}
.b-price-item.m-free {
  color: #bf0000;
  text-transform: uppercase;
}
.b-price-divider {
  margin-inline-end: 4px;
}
.b-price-per_unit {
  color: #535353;
  font-size: 14px;
}
.b-price .b-badges {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}

/*md

# b-promotion

Designed to provide same styles of promotion across different components.

We do not support any HTML in promotion messages.

## Base promotion

```html_example
<div class="b-promotion">
	<div class="b-promotion-message">
		This promo was configured for testing refinement promotion on the PLP
	</div>
</div>
```

## Delivery promotion

```html_example
<div class="b-promotion">
	<div class="b-promotion-message m-delivery">
		Personalize & send direct to recipient
	</div>
</div>
```

## Product Highlight promotion

```html_example
<div class="b-promotion">
	<div class="b-promotion-message m-product_highlight">
		Requires Keepsake Power Cord
	</div>
</div>
```

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

## 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>
```
## Promotion with configured label

```html_example
<div class="b-promotion">
	<div class="b-promotion-info">
		<a href="#"
			class="b-promotion-label"
			data-tau="promotion_label"
		>
			Label
		</a>
	</div>
</div>
```

*/
.b-promotion {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 8px;
  position: relative;
}
.b-promotion-message {
  color: #bf0000;
}
.b-promotion-message:empty {
  display: none;
}
.b-promotion-message.m-medium {
  font-size: 15px;
  font-weight: 136;
  line-height: 24px;
}
.b-promotion-message.m-large {
  font-size: 18px;
  font-weight: 136;
  line-height: 24px;
}
.b-promotion-message.m-delivery {
  color: #005016;
}
.b-promotion-message.m-product_highlight {
  color: #293035;
}
.b-promotion-message a {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
}
.b-promotion-message a.m-disabled, .b-promotion-message a:disabled, .b-promotion-message a[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-promotion-message .promotion-callout-secondary-message {
  color: #535353;
  font-weight: 102;
  line-height: 24px;
  font-size: 12px;
}
.b-promotion-label {
  font-size: 14px;
  font-weight: 102;
  letter-spacing: 0.5px;
  line-height: 18px;
  text-transform: uppercase;
  color: #bf0000;
  text-decoration: none;
}
.b-promotion-details {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-promotion-details:active {
  color: #095c9c;
}
.b-promotion-details:hover, .b-promotion-details:focus {
  color: #043c8f;
}
.b-promotion-details.m-disabled, .b-promotion-details:disabled, .b-promotion-details[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

/*md

# b-availability

Designed to provide same styles of availability across different components.

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

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

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

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

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

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

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

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

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

*/
.b-availability {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
}
.b-availability svg {
  flex-shrink: 0;
}
.b-availability svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-availability-outofstock_icon {
  display: none;
}
.b-availability.m-instock {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #005016;
}
.b-availability.m-instock svg {
  flex-shrink: 0;
}
.b-availability.m-instock svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-availability.m-instock .b-availability-instock_icon {
  display: flex;
}
.b-availability.m-outofstock {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #8c0043;
}
.b-availability.m-outofstock svg {
  flex-shrink: 0;
}
.b-availability.m-outofstock svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-availability.m-outofstock .b-availability-outofstock_icon {
  display: flex;
}
.b-availability.m-outofstock .b-availability-instock_icon {
  display: none;
}
.b-availability.m-lowinstock {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #602e00;
}
.b-availability.m-lowinstock svg {
  flex-shrink: 0;
}
.b-availability.m-lowinstock svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-availability.m-lowinstock .b-availability-outofstock_icon {
  display: flex;
}
.b-availability.m-lowinstock .b-availability-instock_icon {
  display: none;
}
.b-availability-ship_to_store {
  padding-bottom: 5px;
}
.b-availability-additionaly {
  font-size: 13px;
  line-height: 24px;
  padding-left: 33px;
}
.b-availability-instock_icon {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #005016;
  display: inline;
}
.b-availability-instock_icon svg {
  flex-shrink: 0;
}
.b-availability-instock_icon svg {
  height: 24px;
  margin-right: 12px;
  width: 24px;
}
.b-availability-instock_icon svg {
  margin-right: 5px;
}

.b-geolocation {
  background-color: #ffffff;
  bottom: 80px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.18);
  max-height: calc(100vh - 20px - 64px);
  overflow: auto;
  padding: 50px 36px;
  position: fixed;
  right: 20px;
  width: 584px;
  z-index: 9;
}
@media screen and (max-width: 767.9px) {
  .b-geolocation {
    bottom: 20px;
    max-width: calc(100% - 30px);
    min-width: 345px;
    padding: 32px 16px 20px;
    right: 15px;
  }
}
.b-geolocation-close {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
  color: #293035;
  position: absolute;
  right: 0;
  top: 0;
}
.b-geolocation-close:hover, .b-geolocation-close:focus {
  color: #604099;
}
html[dir=rtl] .b-geolocation-close {
  left: 0;
  right: initial;
}
.b-geolocation-message {
  color: #293035;
}
.b-geolocation-actions {
  display: flex;
  gap: 24px;
  margin-top: 24px;
}
@media screen and (max-width: 767.9px) {
  .b-geolocation-actions {
    flex-flow: column;
    gap: 24px;
  }
}
.b-geolocation-actions .b-button {
  width: 100%;
}

.b-wishlist .b-social {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: end;
}
.b-social-items {
  display: flex;
  gap: 20px;
}
.b-footer .b-social-items {
  margin: 16px 0;
}
@media screen and (max-width: 767.9px) {
  .b-footer .b-social-items {
    margin: 24px 0;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-social-title {
    display: none;
  }
}
.b-social-link {
  align-items: center;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  height: 36px;
  justify-content: center;
  padding: 9px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: background-color, color, border, box-shadow;
  width: 36px;
  background: #ffffff;
  border: 1.8px solid #604099;
  color: #604099;
  appearance: none;
  border-radius: 50%;
  flex-shrink: 0;
  text-align: center;
}
.b-social-link svg {
  height: 100%;
  width: 100%;
}
@media not all and (pointer: coarse) {
  .b-social-link:hover, .b-social-link:focus {
    border-color: #753bbd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #753bbd;
  }
}
.b-social-link:active {
  border-color: #604099;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  color: #604099;
}
.b-social-link.m-disabled, .b-social-link:disabled {
  border-color: #535353;
  color: #535353;
  cursor: none;
  pointer-events: none;
  -webkit-user-select: none;
          user-select: none;
}

.b-status.m-regular {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #293035;
}
.b-status.m-regular svg {
  flex-shrink: 0;
}
.b-status.m-regular svg {
  height: 24px;
  margin-right: 12px;
  width: 24px;
}
.b-status.m-regular svg {
  margin-right: 8px;
}
.b-status.m-done {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #005016;
}
.b-status.m-done svg {
  flex-shrink: 0;
}
.b-status.m-done svg {
  height: 24px;
  margin-right: 12px;
  width: 24px;
}
.b-status.m-done svg {
  margin-right: 8px;
}

.b-store_pickup-search {
  background: #f3f4f3;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.18), inset 0 1px 1px rgba(0, 0, 0, 0.18);
  margin: 0 -20px;
  padding: 10px 20px 20px;
}
.b-store_pickup-search .b-form_field .b-input {
  margin-top: 0;
}
.b-store_pickup-search .b-form_field-label {
  padding: 2px;
  background: #ffffff;
}
.b-store_pickup-results.m-no_result {
  padding-top: 20px;
}
.b-store_pickup-item {
  margin: 0;
  padding-top: 20px;
}
.b-store_pickup-item .b-radio-label {
  border-bottom: 1px solid #535353;
  padding-bottom: 12px;
}
.b-store_pickup-item:last-child .b-radio-label {
  border-width: 0;
}
.b-store_pickup-item.b-radio:hover .b-radio-icon, .b-store_pickup-item.b-radio:focus .b-radio-icon {
  appearance: none;
  background: transparent;
  border: 1px solid #535353;
  border-radius: 20px;
  cursor: pointer;
  display: inline-block;
  height: 20px;
  margin-inline-end: 8px;
  min-height: 20px;
  min-width: 20px;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: border;
  vertical-align: sub;
  width: 20px;
  z-index: -1;
}
@media screen and (max-height: 420px) {
  .b-store_pickup-item.b-radio:hover .b-radio-icon, .b-store_pickup-item.b-radio:focus .b-radio-icon {
    z-index: 0;
  }
}
.b-store_pickup-item.b-radio:hover .b-radio-icon::-ms-check, .b-store_pickup-item.b-radio:focus .b-radio-icon::-ms-check {
  display: none;
}
.b-store_pickup-item.b-radio:hover .b-radio-icon::before, .b-store_pickup-item.b-radio:focus .b-radio-icon::before {
  background-color: #604099;
  border-radius: 12px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
  transition-property: transform;
  width: 12px;
}
@media screen and (min-width: 1024px) {
  .b-store_pickup-item.b-radio:hover .b-radio-icon, .b-store_pickup-item.b-radio:focus .b-radio-icon {
    border-color: #753bbd;
    border-width: 2px;
  }
  .b-store_pickup-item.b-radio:hover .b-radio-icon::before, .b-store_pickup-item.b-radio:focus .b-radio-icon::before {
    transform: translate(-50%, -50%) scale(1);
  }
}
.b-store_pickup-item .b-radio-input:checked + .b-radio-icon {
  border-color: #604099;
  border-width: 2px;
}
.b-store_pickup-item .b-radio-input:checked + .b-radio-icon::before {
  transform: translate(-50%, -50%) scale(1);
}
.b-store_pickup-label {
  display: flex;
  flex-wrap: wrap;
}
.b-store_pickup-info, .b-store_pickup-info_message {
  padding-bottom: 12px;
}
.b-store_pickup-info_message, .b-store_pickup-details {
  flex-basis: 100%;
}
.b-store_pickup-info {
  flex-basis: 80%;
}
.b-store_pickup-miles {
  flex-basis: 20%;
}
.b-store_pickup-details_title .b-button-icon_right {
  height: 7px;
  line-height: 7px;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: transform;
  width: 10px;
}
.b-store_pickup-details_title[aria-expanded=true] .b-button-icon_right {
  transform: rotate(-180deg);
}
.b-store_pickup-details_panel {
  display: none;
  overflow: hidden;
  position: relative;
  transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  transition-property: height;
  margin-top: 12px;
}
.b-store_pickup-details_panel[aria-hidden=false] {
  display: block;
}
.b-store_pickup-phone {
  padding-bottom: 8px;
}
.b-store_pickup-operation_hours {
  display: flex;
}
.b-store_pickup-day {
  width: 52px;
}
.b-store_pickup-load_more {
  margin-bottom: 14px;
  margin-top: 20px;
}
.b-store_pickup-status {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #005016;
  margin-bottom: 5px;
}
.b-store_pickup-status svg {
  flex-shrink: 0;
}
.b-store_pickup-status svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-store_pickup-status.m-outofstock {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #8c0043;
}
.b-store_pickup-status.m-outofstock svg {
  flex-shrink: 0;
}
.b-store_pickup-status.m-outofstock svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-store_pickup-status.m-1left {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #8c0043;
}
.b-store_pickup-status.m-1left svg {
  flex-shrink: 0;
}
.b-store_pickup-status.m-1left svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-store_pickup-status.m-3left {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #602e00;
}
.b-store_pickup-status.m-3left svg {
  flex-shrink: 0;
}
.b-store_pickup-status.m-3left svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-store_pickup-status.m-call {
  align-items: center;
  display: flex;
  font-size: 15px;
  line-height: 24px;
  color: #293035;
}
.b-store_pickup-status.m-call svg {
  flex-shrink: 0;
}
.b-store_pickup-status.m-call svg {
  height: 18px;
  margin-right: 8px;
  width: 18px;
}
.b-store_pickup-filter {
  margin-top: 20px;
}

.b-delivery_option-find_store-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-delivery_option-find_store-link:active {
  color: #095c9c;
}
.b-delivery_option-find_store-link:hover, .b-delivery_option-find_store-link:focus {
  color: #043c8f;
}
.b-delivery_option-find_store-link.m-disabled, .b-delivery_option-find_store-link:disabled, .b-delivery_option-find_store-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-delivery_option-find_store-link svg {
  height: 14px;
  margin-left: 5px;
  margin-right: 0;
  width: 14px;
}
.b-availability-ship_to_store + .b-delivery_option-find_store {
  padding-left: 33px;
}
.b-delivery_option-free {
  color: #bf0000;
  font-size: 15px;
  font-weight: 136;
  line-height: 24px;
}
.b-delivery_option-info {
  line-height: 24px;
}
.b-delivery_option-info span {
  line-height: 24px;
}

.b-progress_indicator {
  font-size: 0;
  position: relative;
}
.b-progress_indicator-line {
  background-color: #f0e9f5;
  border: 1px solid #604099;
  border-radius: 16px;
  height: 12px;
  width: 100%;
}
.b-progress_indicator.m-wide .b-progress_indicator-line {
  background-color: #f3f4f3;
  height: 24px;
}
.b-progress_indicator-progress {
  background-color: #604099;
  border-radius: 16px;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
}
.b-progress_indicator.m-wide .b-progress_indicator-progress {
  background: linear-gradient(90deg, #cbb4ee, #604099);
}
.b-progress_indicator.m-gold .b-progress_indicator-progress {
  background: linear-gradient(90deg, #f5e79e, #f3d03e);
}
.b-progress_indicator-icon {
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #604099;
  border-radius: 50%;
  color: #604099;
  display: flex;
  height: 16px;
  justify-content: center;
  position: absolute;
  right: 0;
  top: -2px;
  transform: translateX(50%);
  width: 16px;
}
.b-progress_indicator-icon.m-less {
  left: 0;
  right: auto;
  transform: translateX(0);
}
.b-progress_indicator-icon.m-more {
  transform: translateX(0);
}
.b-progress_indicator.m-wide .b-progress_indicator-icon {
  height: 32px;
  top: -4px;
  width: 32px;
}
.b-progress_indicator.m-wide .b-progress_indicator-icon svg {
  height: 16px;
  width: 16px;
}
.b-progress_indicator.m-gold .b-progress_indicator-icon {
  border-color: #f3d03e;
  color: #f3d03e;
}

.b-chatbot-iframe {
  background: none;
  border: none;
  bottom: 20px;
  min-height: 70px;
  min-width: 70px;
  position: fixed;
  right: 0;
  z-index: 11;
}
.b-chatbot-iframe.m-hidden {
  right: -9999px;
}
@media screen and (max-width: 1023.9px) {
  .b-chatbot-iframe {
    display: none;
  }
}

.embeddedServiceSidebarState {
  overflow-y: scroll !important;
}

.embeddedServiceHelpButton .helpButton .uiButton {
  background-color: rgb(86, 61, 130) !important;
  font-family: "Lucida Sans Unicode", sans-serif;
}

.embeddedServiceHelpButton .helpButton .uiButton:focus {
  outline: 1px solid rgb(86, 61, 130);
}

.embeddedServiceLiveAgentSidebarFeature input {
  font-size: 16px;
}

.embeddedServiceLiveAgentStateChatInputFooter textarea.chasitorText {
  font-size: 16px;
}

.chat-button {
  position: fixed; /* Fixed position */
  bottom: 16px; /* 16px from the bottom */
  right: 16px; /* 16px from the right */
  width: 56px; /* Adjusted button width */
  height: 56px; /* Adjusted button height */
  background: none; /* Remove background color */
  background-image: url(./images/chatbot/chatbot.png); /* Set only the image */
  background-repeat: no-repeat; /* Prevent image repetition */
  background-size: cover; /* Ensure the image covers the entire button */
  border: none; /* Remove border */
  border-radius: 50%; /* Make it circular */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: none; /* Remove shadow */
  z-index: 12; /* Make sure it's on top */
  display: none; /* Hide by default */
}

.chat-button:hover {
  opacity: 0.8; /* Slight transparency on hover */
}

.chat-button:focus {
  outline: none; /* Remove focus outline */
}

.grecaptcha-badge {
  bottom: 60px !important;
  z-index: 24 !important;
  display: none;
}

@media screen and (max-width: 1023.9px) {
  [data-action=Cart-Show] .grecatcha-footer-messaging {
    padding-bottom: 87px;
  }
}
#nebula_div_btn {
  z-index: 25 !important;
}
@media screen and (max-width: 767.9px) {
  #nebula_div_btn {
    bottom: 250px !important;
  }
}

.b-required_message {
  font-size: 12px;
  letter-spacing: 0.12px;
  line-height: 16px;
  color: #535353;
  margin-bottom: 24px;
}

.b-social_account {
  margin: 32px auto 72px;
  max-width: 438px;
  padding-inline-end: 15px;
  padding-inline-start: 15px;
}
@media screen and (min-width: 1024px) {
  .b-social_account {
    margin-bottom: 96px;
    margin-top: 48px;
  }
}
.b-social_account-title {
  font-family: "Queens Hat", "Times", serif;
  font-size: 52px;
  font-weight: 350;
  line-height: 68px;
  margin-bottom: 32px;
}
@media screen and (max-width: 1023.9px) {
  .b-social_account-title {
    font-size: 42px;
    letter-spacing: -0.0075em;
    line-height: 58px;
  }
}
@media screen and (min-width: 1024px) {
  .b-social_account-title {
    margin-bottom: 40px;
  }
}
.b-social_account-desc {
  font-size: 16px;
  margin-bottom: 32px;
}
@media screen and (min-width: 1024px) {
  .b-social_account-desc {
    margin-bottom: 40px;
  }
}
.b-social_account-form {
  width: 100%;
}
.b-social_account-form .b-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;
  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 #535353;
  margin-right: 12px;
  padding: 8px;
}
.b-social_login-item:last-child {
  margin-right: 0;
}
.b-social_login-divider {
  border-top: 1px solid #535353;
  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: "Queens Hat", "Times", serif;
  font-size: 36px;
  font-weight: 350;
  line-height: 40px;
  margin-bottom: 24px;
}
@media screen and (max-width: 1023.9px) {
  .b-social_profile-title {
    font-size: 30px;
    line-height: 40px;
  }
}
.b-social_profile-item {
  align-items: center;
  border: 1px solid #535353;
  border-radius: 4px;
  display: flex;
  margin-bottom: 20px;
  padding: 24px;
}
.b-social_profile-item:last-child {
  margin-bottom: 0;
}
.b-social_profile-info {
  margin-left: 16px;
}
.b-social_profile-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
  margin-left: auto;
}
.b-social_profile-link:active {
  color: #095c9c;
}
.b-social_profile-link:hover, .b-social_profile-link:focus {
  color: #043c8f;
}
.b-social_profile-link.m-disabled, .b-social_profile-link:disabled, .b-social_profile-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}

.b-search_dialog {
  height: 100%;
  width: 100%;
}
.b-search_dialog-inner {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
  width: 100%;
  z-index: 13;
}
.b-search_dialog-inner_top {
  background-color: #f3f4f3;
}
.b-search_dialog-inner_top_content {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-search_dialog-inner_top_content {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.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: 15px;
    padding-right: 15px;
  }
}
.b-search_dialog-form_wrap {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 12px 0;
  position: relative;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-search_dialog-form_wrap {
    margin: 48px 0;
    padding: 0;
    width: 50%;
  }
}
.b-search_dialog-cancel {
  cursor: pointer;
  font-size: 16px;
  height: 44px;
  padding: 0 20px;
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
@media screen and (min-width: 1024px) {
  .b-search_dialog-cancel {
    left: 100%;
    position: absolute;
  }
}
.b-search_dialog-cancel:focus, .b-search_dialog-cancel:hover {
  color: #604099;
}
@media screen and (max-width: 1023.9px) {
  .b-search_dialog-container_scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

/*md

# Header search

```html_example
<form role="search" method="get" action="/s/HallmarkUS/us/search/" name="simpleSearch" class="b-search_input" data-event-submit="handleSubmit" data-tau="search_dialog_form">
	<button class="b-search_input-submit" data-ref="submit" type="submit" title="Search" aria-label="Search" data-tau="search_dialog_input_submit">
		<svg width="23" height="23" viewBox="0 0 27 28" focusable="false">
			<path fill="none" stroke="currentColor" stroke-width="2" d="M19.5 20c4-4.1 4-10.8 0-15-4.2-4-11-4.1-15 0s-4 10.8 0 15a10.6 10.6 0 0015 0zm-.6-.4l7.3 7.5"></path>
		</svg>
	</button>
	<input role="combobox" aria-autocomplete="list" aria-controls="search-suggestions-list" aria-expanded="false" aria-haspopup="listbox" aria-label="Search combobox" aria-owns="search-suggestions-list" data-ref="field" data-event-blur="handleBlur" data-event-focus="handleFocus" data-event-input="handleInput" data-event-keydown="handleKeydown" data-tau="search_dialog_input" id="header-search-input" class="b-search_input-input" type="search" name="q" value="" placeholder="Search our site" autocapitalize="off" autocomplete="off" spellcheck="false" maxlength="50" enterkeyhint="search" aria-activedescendant="">
</form>
<div aria-labelledby="header-search-input" id="search-suggestions-list" class="b-suggestions m-active" data-ref="listbox" data-event-mouseenter="markHover" data-event-mouseleave="unMarkHover" data-tau="search_suggestions_list" aria-hidden="false">
	<div role="none" class="b-suggestions-inner" data-ref="listboxInner">
		<h3 class="b-suggestions-title">
		Recent searches
		</h3>
		<div role="none" class="b-suggestions-section m-guess">
			<a role="option" class="b-suggestions-option b-suggestions_guess" data-event-click="handleSearchPhrase" href="/s/HallmarkUS/default/search/?q=fathers day card" data-search-value="fathers day card">
				<span class="b-suggestions_guess-correction_wrap">
				fathers day card
				</span>
			</a>
			<button class="b-suggestions-remove" title="Remove" type="button" data-search-value="fathers day card" data-event-click.prevent="removeRecentSearchPhrase">
				<svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
					<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>
				</svg>
			</button>
		</div>
		<div role="none" class="b-suggestions-section m-guess">
			<a role="option" class="b-suggestions-option b-suggestions_guess" data-event-click="handleSearchPhrase" href="/s/HallmarkUS/default/search/?q=custom_" data-search-value="custom_">
				<span class="b-suggestions_guess-correction_wrap">
				custom_
				</span>
			</a>
			<button class="b-suggestions-remove" title="Remove" type="button" data-search-value="custom_" data-event-click.prevent="removeRecentSearchPhrase">
				<svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
					<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>
				</svg>
			</button>
		</div>
		<div role="none" class="b-suggestions-section m-guess">
			<a role="option" class="b-suggestions-option b-suggestions_guess" data-event-click="handleSearchPhrase" href="/s/HallmarkUS/default/search/?q=custom_004" data-search-value="custom_004">
				<span class="b-suggestions_guess-correction_wrap">
				custom_004
				</span>
			</a>
			<button class="b-suggestions-remove" title="Remove" type="button" data-search-value="custom_004" data-event-click.prevent="removeRecentSearchPhrase">
				<svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
					<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>
				</svg>
			</button>
		</div>
		<div role="none" class="b-suggestions-section m-guess">
			<a role="option" class="b-suggestions-option b-suggestions_guess" data-event-click="handleSearchPhrase" href="/s/HallmarkUS/default/search/?q=custom_0004" data-search-value="custom_0004">
				<span class="b-suggestions_guess-correction_wrap">
				custom_0004
				</span>
			</a>
			<button class="b-suggestions-remove" title="Remove" type="button" data-search-value="custom_0004" data-event-click.prevent="removeRecentSearchPhrase">
				<svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18" focusable="false">
					<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>
				</svg>
			</button>
		</div>
	</div>
</div>
```

*/
.b-suggestions {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
  display: none;
  margin-top: 8px;
  max-height: 350px;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  z-index: 10;
}
.b-suggestions-section {
  border-top: 1px solid #535353;
}
.b-suggestions-section.m-guess {
  border-top: 0;
}
.b-search_noresults .b-suggestions {
  position: static;
}
.b-suggestions.m-active {
  display: block;
}
.b-suggestions-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.4s;
}
.b-suggestions-inner.m-empty {
  align-items: center;
  color: #293035;
  display: flex;
  justify-content: center;
  min-height: 120px;
  padding: 0 8px;
  text-align: center;
}
.b-suggestions.m-loading .b-suggestions-inner {
  opacity: 0.3;
  pointer-events: none;
}
.b-suggestions-option {
  border-radius: 0;
  display: block;
  text-decoration: none;
  color: #535353;
  position: relative;
  padding: 10px 18px;
  border-top: 1px solid #535353;
  text-transform: capitalize;
}
.b-suggestions-option:last-child {
  margin-bottom: 0;
}
.b-suggestions-highlight {
  color: #604099;
  font-weight: 150;
}
.b-suggestions-section.m-recentsearches {
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #604099;
  align-items: stretch;
}
.b-suggestions-inner.m-empty .b-suggestions-section {
  display: none;
}
.b-suggestions-title {
  font-size: 14px;
  font-weight: 102;
  letter-spacing: 0.5px;
  line-height: 18px;
  text-transform: uppercase;
  padding: 16px 18px;
  font-weight: 150;
  color: #293035;
}
.b-suggestions-clear.b-button.m-link {
  padding: 16px 18px;
}
.b-suggestions-clear.b-button.m-link:hover {
  color: #043c8f;
}
.b-suggestions-remove {
  padding: 10px 18px;
  border-top: 1px solid #535353;
}
.b-suggestions-remove:hover {
  cursor: pointer;
}
.b-suggestions-remove svg {
  height: 12px;
  width: 12px;
}
.b-suggestions-link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-suggestions-link:active {
  color: #095c9c;
}
.b-suggestions-link:hover, .b-suggestions-link:focus {
  color: #043c8f;
}
.b-suggestions-link.m-disabled, .b-suggestions-link:disabled, .b-suggestions-link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-suggestions-link.m-focused {
  color: #604099;
}
.b-suggestions-query {
  display: none;
}
@media screen and (min-width: 1024px) {
  .b-suggestions-query {
    display: initial;
  }
}
.b-suggestions-view_results.b-button.m-link {
  display: none;
}
@media screen and (min-width: 1024px) {
  .b-suggestions-view_results.b-button.m-link {
    display: initial;
    margin-left: auto;
    margin-right: 30px;
  }
}
.b-suggestions-accessibility_alert {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  left: 0;
  max-height: 1px;
  max-width: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  top: 0;
}
.l-header-flyout-active .b-suggestions {
  position: absolute;
  width: 100vw;
  margin-top: 30px;
  top: unset;
  left: 0;
  border-top: 1px solid #535353;
  border-radius: 0;
  max-height: unset;
  box-shadow: 0 100vw 0 100vw rgba(72, 70, 79, 0.2);
}
.b-header_stuck .l-header-flyout-active .b-suggestions {
  margin-top: 15px;
}
.l-header-flyout-active .b-suggestions-section {
  box-sizing: border-box;
  border: unset;
}
.l-header-flyout-active .b-suggestions-inner {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 1fr;
  margin: 40px 0;
}
.l-header-flyout-active .b-suggestions-title {
  text-transform: unset;
  line-height: 15px;
  font-size: 15px;
  font-weight: 150;
}
.l-header-flyout-active .b-suggestions-query {
  display: none;
}
@media screen and (min-width: 1024px) {
  .l-header-flyout-active .b-suggestions-query {
    display: initial;
  }
}
.l-header-flyout-active .b-suggestions-option {
  border: unset;
  color: #293035;
  line-height: 15px;
  font-size: 15px;
}
.l-header-flyout-active .b-suggestions_product_wrap {
  display: flex;
}
.l-header-flyout-active .b-suggestions .m-categories {
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  align-items: stretch;
  padding-left: 50px;
}
.l-header-flyout-active .b-suggestions .m-guess {
  grid-column: 1;
  grid-row: 2;
  justify-self: stretch;
  align-items: stretch;
  padding-left: 50px;
}
.l-header-flyout-active .b-suggestions .m-products {
  grid-column: 2;
  grid-row: 1/3;
  border-left: 1px solid #535353;
  padding: 0 50px;
  justify-self: start;
  width: 100%;
}

.b-suggestions_category:hover, .b-suggestions_category:focus, .b-suggestions_category.m-focused {
  color: #604099;
}
.b-suggestions_category-image {
  background: #f3f4f3;
  display: block;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
  border-radius: 0;
  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: #f3f4f3;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}

.b-suggestions_guess-recent {
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #604099;
  text-transform: none;
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions_guess {
    width: 100%;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}
.b-suggestions_guess.m-focused, .b-suggestions_guess:focus, .b-suggestions_guess:hover {
  text-decoration: none;
  color: #604099;
}
.b-suggestions-section.m-recentsearches .b-suggestions_guess {
  color: #604099;
  text-transform: none;
}

@media screen and (min-width: 1024px) {
  .b-suggestions_product {
    width: 25%;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions_product {
    display: flex;
    align-items: center;
  }
}
.b-suggestions_product.m-focused, .b-suggestions_product:hover, .b-suggestions_product:focus {
  color: #604099;
}
.b-suggestions_product-picture_wrap {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 40px;
  max-height: 250px;
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions_product-picture_wrap {
    width: 33%;
    margin: 0;
  }
}
.b-suggestions_product-correction_wrap {
  line-height: 24px;
}
.b-suggestions_product-picture {
  background: #f3f4f3;
  display: block;
  overflow: hidden;
  padding-bottom: 133.3333333333%;
  position: relative;
  width: 100%;
  background: none;
  padding: unset;
  overflow: hidden;
  object-position: center;
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions_product-picture {
    height: auto;
    width: 100%;
    max-width: 150px;
  }
}
.b-suggestions_product-title {
  transition: color cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
}
.b-suggestions_product:hover .b-suggestions_product-title, .b-suggestions_product.m-focused .b-suggestions_product-title {
  color: #604099;
}
.b-suggestions_product-title_wrap {
  display: flex;
  align-items: center;
}
.b-suggestions_product-price_info {
  margin-inline-end: 8px;
}
.b-suggestions_product-link {
  display: none;
}
@media screen and (max-width: 1023.9px) {
  .b-suggestions_product-correction_wrap {
    width: 67%;
    padding-left: 20px;
  }
}

@media screen and (min-width: 1024px) {
  .b-header_track_order {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_track_order {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0 4px;
  }
}
.b-header_track_order-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-header_track_order-icon:hover, .b-header_track_order-icon:focus {
  color: #604099;
}

.b-header_top {
  background-color: var(--bg-layout-color);
  position: relative;
  z-index: 8;
}
.b-header_top-wrapper {
  min-height: 48px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .b-header_top-wrapper {
    min-height: 52px;
  }
}
.b-header_top-wrapper:has(.b-header_promobar) ~ .l-header-bottom_promo {
  display: none;
}
.b-header_top-wrapper:has(.b-header_promobar) ~ .l-page-content {
  margin-top: 25px;
}
.b-header_top-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
  display: flex;
  font-size: 15px;
  justify-content: flex-end;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-header_top-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-header_top-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media screen and (min-width: 1024px) {
  .b-header_top-inner {
    padding-bottom: 13px;
    padding-top: 14px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_top-inner {
    padding-bottom: 24px;
    padding-top: 24px;
  }
}
.b-header_top-link.b-link {
  color: var(--text-color);
}
.b-header_top-link.b-link:hover, .b-header_top-link.b-link:focus {
  color: #043c8f;
}
.b-header_top-text {
  display: flex;
  flex-basis: 100%;
  gap: 16px;
  justify-content: center;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 1023.9px) {
  .b-header_top .b-header_top-text {
    display: none;
  }
}
.b-header_top .b-header_top-offers {
  flex: 1;
  justify-content: flex-end;
}
@media screen and (max-width: 1023.9px) {
  .b-header_top .b-header_top-offers {
    display: none;
  }
}

.b-header-bottom_promo {
  background-color: var(--bottom_promo-bg);
  color: var(--text-color);
}
.b-header-bottom_inner {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: center;
  line-height: 25px;
  margin: 0 auto;
  max-width: 1920px;
  padding: 12px 15px;
}
.b-header-bottom_inner svg {
  margin-left: 4px;
}

@media screen and (min-width: 1024px) {
  .b-header_wishlist {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    text-align: center;
    width: 48px;
  }
  .b-header_wishlist:hover, .b-header_wishlist:focus {
    color: #604099;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-header_wishlist {
    align-items: center;
    box-shadow: inset 0 -1px 0 0 #535353;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    min-height: 48px;
    padding: 0 16px;
    text-decoration: none;
    width: 100%;
    box-shadow: none;
    font-size: 14px;
    padding: 0 4px;
  }
}
.b-header_wishlist-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-header_wishlist-icon:hover, .b-header_wishlist-icon:focus {
  color: #604099;
}
.b-header_wishlist-icon svg {
  fill: none;
  height: 20px;
  overflow: visible;
  stroke: #293035;
  stroke-width: 2px;
  width: 20px;
}
.b-header_wishlist.m-active .b-header_wishlist-icon svg {
  fill: #de1d8a;
  stroke: #de1d8a;
}
.b-header_wishlist.m-animated .b-header_wishlist-icon {
  animation: heart-bit ease-out 1s;
  animation-delay: 2s;
}
.b-header_wishlist:focus .b-header_wishlist-icon svg {
  stroke: #604099;
}
.b-header_wishlist-copy {
  display: none;
}
.b-menu_panel .b-header_wishlist-copy {
  display: block;
}

.b-footer-container {
  background-color: #f8f6fc;
  color: #293035;
  padding: 40px 0 20px;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .b-footer-container {
    padding: 32px 0 24px;
  }
}
.b-footer-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-footer-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.b-footer-navigation {
  flex-basis: 100%;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer-navigation {
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-navigation {
    flex-basis: 68%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer-headline {
    flex-basis: 49%;
    margin: 25px auto 0;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-headline {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer-headline {
    flex-basis: 35%;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-headline {
    flex-basis: 32%;
  }
}
.b-footer-info {
  flex-basis: 100%;
}
.b-footer-bottom {
  margin-top: 24px;
  width: 100%;
}

@media screen and (min-width: 1024px) {
  .b-footer_nav {
    display: flex;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-title {
    color: #293035;
    display: inline-block;
    font-size: 18px;
    font-weight: 136;
    position: relative;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-button {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-button {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 18px;
    font-weight: 136;
    padding: 16px;
    text-align: start;
    width: 100%;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-heading {
    display: none;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-content {
    display: none;
    overflow: hidden;
    position: relative;
    transition: cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
    transition-property: height;
  }
  .b-footer_nav-content[aria-hidden=false], .b-footer_nav-column:not([data-initialized="1"]) .b-footer_nav-content {
    display: block;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-list {
    overflow: hidden;
    padding: 0 16px 20px;
    padding-bottom: 0;
  }
}
.b-footer_nav-item {
  display: block;
  line-height: 1;
  margin: 15px 0;
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-item:first-child {
    margin-top: 5px;
  }
}
.b-footer_nav-link {
  cursor: pointer;
  text-decoration: none;
}
@media not all and (pointer: coarse) {
  .b-footer_nav-link:hover, .b-footer_nav-link:focus {
    color: #604099;
  }
}
@media screen and (min-width: 1024px) {
  .b-footer_nav-column {
    flex-basis: 25%;
    padding-inline-end: 20px;
  }
}
@media screen and (max-width: 1023.9px) {
  .b-footer_nav-column {
    box-shadow: 0 1px 0 0 #535353;
  }
}

.b-footer-info {
  display: grid;
  gap: 0;
}
@media screen and (max-width: 767.9px) {
  .b-footer-info {
    grid-template-areas: "menu menu" "acces copy";
  }
}
@media screen and (min-width: 768px) {
  .b-footer-info {
    grid-template-areas: "acces copy" "menu menu";
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-info {
    grid-template: auto auto/12% 88%;
    grid-template-areas: "acces copy" "acces menu";
  }
}

.b-footer-copyright {
  grid-area: copy;
}

.b-footer-privacy {
  grid-area: menu;
}

.b-footer-accessibility {
  grid-area: acces;
}
@media screen and (max-width: 1366.9px) {
  .b-footer-accessibility {
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-accessibility {
    margin-bottom: 0;
  }
}
.b-footer-accessibility .b-essential_accessibility-logo {
  display: inline-block;
}
.b-footer-accessibility .b-essential_accessibility-logo img {
  height: 44px;
  width: 117px;
}

.b-footer-copyright {
  align-self: end;
  font-size: 14px;
  text-align: right;
  text-transform: uppercase;
  width: 100%;
}
@media screen and (max-width: 1366.9px) {
  .b-footer-copyright {
    margin-bottom: 12px;
  }
}
@media screen and (min-width: 1367px) {
  .b-footer-copyright {
    margin-bottom: 8px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer-copyright {
    margin-bottom: 0;
  }
}

.b-footer_headline-title {
  color: #293035;
  font-size: 18px;
  font-weight: 102;
}

.b-newsletters-caption {
  margin-bottom: 16px;
}
.b-newsletters-message_validation {
  color: #8c0043;
  line-height: 1.2;
  margin-top: 8px;
}
.b-newsletters-message_success {
  color: #005016;
}
.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: 12px;
}
.b-newsletters-submit {
  background: #604099;
  border-color: #604099;
  color: #ffffff;
}
.b-form_field-group .b-newsletters-submit {
  top: 0;
}
.b-newsletters-submit:hover, .b-newsletters-submit:focus {
  background: #493175;
  border-color: #493175;
  color: #ffffff;
}

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

.b-notification_dialog {
  background: rgba(228, 243, 220, 0.95);
  color: #293035;
  padding: 16px 0;
}
.b-notification_dialog-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
  align-items: center;
  display: flex;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-notification_dialog-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-notification_dialog-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-notification_dialog-inner {
    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 {
  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 {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  display: inline-block;
  white-space: nowrap;
}
.b-notification_dialog a.m-disabled, .b-notification_dialog a:disabled, .b-notification_dialog a[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-notification_dialog-button {
  margin: 0 24px;
}
@media screen and (min-width: 768px) and (max-width: 1023.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: #293035;
  color: #293035;
}
.b-notification_dialog-button.m-outline:hover, .b-notification_dialog-button.m-outline:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: #293035;
}
.b-notification_dialog-button + .b-notification_dialog-button {
  border: 0;
}
@media screen and (max-width: 1023.9px) {
  .b-notification_dialog-button + .b-notification_dialog-button {
    padding: 0 8px;
  }
}

.b-connection_monitor {
  margin-bottom: 0;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .b-connection_monitor {
    align-items: center;
    display: flex;
    padding: 12px 0;
  }
}
.b-connection_monitor-inner {
  margin: 0 auto;
  max-width: 1920px;
  padding-left: 88px;
  padding-right: 88px;
  align-items: center;
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-connection_monitor-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-connection_monitor-inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media screen and (max-width: 767.9px) {
  .b-connection_monitor-inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.b-connection_monitor-icon {
  flex-shrink: 0;
}
.b-connection_monitor-message {
  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: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
}
.b-connection_monitor-btn:hover, .b-connection_monitor-btn:focus {
  color: #604099;
}
@media screen and (min-width: 768px) {
  .b-connection_monitor-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.b-footer_top-banner {
  background-color: #ffffff;
  border-radius: 20px;
  color: #604099;
  left: 50%;
  min-width: 340px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: -20px;
  transform: translateX(-50%);
}
@media screen and (max-width: 767.9px) {
  .b-footer_top-banner {
    font-size: 12px;
    padding: 12px;
  }
}
@media screen and (min-width: 768px) {
  .b-footer_top-banner {
    font-size: 14px;
    padding: 10px;
  }
}
.b-footer_top-bold {
  font-weight: 136;
}
.b-footer_top-main_text {
  display: inline;
  font-family: "Beam", "Helvetica Neue", "Helvetica", "Arial", "Nimbus Sans L", "Liberation Sans", sans-serif;
  font-size: 15px;
  margin: 0;
}
@media screen and (max-width: 767.9px) {
  .b-footer_top-main_text {
    font-size: 12px;
  }
}

.b-footer_privacy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
@media screen and (min-width: 1024px) {
  .b-footer_privacy-list {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1366.9px) {
  .b-footer_privacy-list {
    justify-content: space-between;
  }
}
@media screen and (max-width: 767.9px) {
  .b-footer_privacy-list {
    flex-direction: column;
    margin-bottom: 12px;
  }
}
.b-footer_privacy-link {
  color: #095c9c;
  font-size: 15px;
}

.b-payment_total {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .b-payment_total {
    display: none;
  }
}
.b-minicart .b-payment_total {
  display: table;
}
.b-payment_total-content {
  padding-bottom: 12px;
  text-align: start;
}
.b-payment_total-name {
  font-size: 16px;
}
.b-payment_total-value {
  margin-left: 8px;
  text-align: end;
  vertical-align: baseline;
}
.b-payment_total-free_product {
  padding-bottom: 12px;
  text-align: end;
  vertical-align: top;
}
.b-payment_total-free_product_link {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-weight: 102;
  color: #095c9c;
  font-size: 15px;
  line-height: 25px;
  text-decoration: underline;
}
.b-payment_total-free_product_link:active {
  color: #095c9c;
}
.b-payment_total-free_product_link:hover, .b-payment_total-free_product_link:focus {
  color: #043c8f;
}
.b-payment_total-free_product_link.m-disabled, .b-payment_total-free_product_link:disabled, .b-payment_total-free_product_link[disabled] {
  color: #535353;
  cursor: none;
  pointer-events: none;
}
.b-payment_total-tax {
  display: block;
  font-size: 12px;
}

.login-modal-form .b-form.m-login .m-google_recaptcha {
  margin-bottom: 0;
}
@media screen and (max-width: 767.9px) {
  .login-modal-form .b-form.m-login {
    display: flex;
    flex-direction: column;
  }
  .login-modal-form .b-form.m-login .b-form_field.m-google_recaptcha {
    display: contents;
  }
  .login-modal-form .b-form.m-login #dwfrm_login_recaptcha_googleRecaptcha-error {
    order: 99;
    margin-top: 12px;
  }
  .login-modal-form .b-form.m-login .b-dialog-footer.m-actions.m-inside {
    order: 100;
  }
}

/*md

# Apple pay button

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

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

 */
.b-apple_pay.m-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.b-product_details .b-apple_pay {
  display: none;
}
.b-apple_pay-button.b-apple_pay-button, .b-apple_pay-button.b-apple_pay-button:hover, .b-apple_pay-button.b-apple_pay-button:active {
  background-size: 75% 52%;
  border-radius: 20px;
  cursor: pointer;
  margin: 0;
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.b-apple_pay-button, .b-apple_pay-button.b-apple_pay-button:hover, .b-apple_pay-button.b-apple_pay-button:active {
    appearance: -apple-pay-button;
    background: none;
    border: none;
    -apple-pay-button-style: #000000;
  }
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.b-apple_pay-button::after {
    content: "";
  }
}
.b-apple_pay-button.dw-apple-pay-logo-white {
  -apple-pay-button-style: #ffffff;
}
.b-apple_pay-button.dw-apple-pay-logo-white.dw-apple-pay-border {
  -apple-pay-button-style: white-outline;
}
.b-apple_pay-button.m-checkout {
  border-radius: 20px;
  height: 48px;
  margin-bottom: 22px;
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.m-checkout, .b-apple_pay-button.m-checkout:hover, .b-apple_pay-button.m-checkout:active {
    -apple-pay-button-type: continue;
  }
}
@supports (-webkit-appearance: -apple-pay-button) {
  .b-apple_pay-button.m-pdp, .b-apple_pay-button.m-pdp:hover, .b-apple_pay-button.m-pdp:active {
    -apple-pay-button-type: buy;
  }
}
.b-apple_pay-description {
  margin: 24px 0 20px;
}
@media screen and (min-width: 768px) and (max-width: 1023.9px) {
  .b-proceed_checkout .b-apple_pay {
    flex: 1;
    margin: 0;
  }
}

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

.b-wishlist_button {
  align-items: center;
  cursor: pointer;
  display: flex;
  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: #de1d8a;
    stroke: #de1d8a;
  }
}
.b-wishlist_button-icon {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 48px;
  justify-content: center;
  text-align: center;
  width: 48px;
  background-color: #f3f4f3;
  border-radius: 50%;
  height: 32px;
  width: 32px;
}
.b-wishlist_button-icon:hover, .b-wishlist_button-icon:focus {
  color: #604099;
}
.b-wishlist_button-icon svg {
  fill: none;
  height: 24px;
  overflow: visible;
  stroke: #293035;
  stroke-width: 2px;
  width: 24px;
}
.b-wishlist_button.m-keepsake .b-wishlist_button-icon svg {
  fill: #293035;
  stroke: none;
  stroke-width: 1px;
}
.b-wishlist_button.m-keepsake.m-added .b-wishlist_button-icon svg {
  stroke: #a6192e;
}
.b-wishlist_button-icon:hover, .b-wishlist_button-icon:focus {
  color: inherit;
}
.b-wishlist_button.m-added.m-tile svg, .b-wishlist_button:hover svg, .b-wishlist_button:focus svg {
  fill: #de1d8a;
  stroke: #de1d8a;
}
.b-wishlist_button.m-tile {
  position: absolute;
  right: 0;
  top: 8px;
}

@media (hover: none) {
  .b-wishlist_button:hover svg {
    fill: none;
    stroke: #293035;
  }
}
:root {
  --page_visibility: visible;
}

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