/*md
@no-stat

# Breakpoints

## Advocare breakpoints

Advocare 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/ADC/AdvoCare+-+Suggested+Browsers+and+Devices)

## Supported screen resolutions

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

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

*/
/*md
@no-stat

# Media queries (breakpoints)

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

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

## Configuration

**Site Layout Conception** details with examples you can find [here](https://confluence.ontrq.com/display/ADC/AdvoCare+FE+-+Breakpoints+and+Site+Layout+Conception)

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

This is how `$media` map looks:

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

## Usage

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

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

	@include media(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

# Globals variables

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

It include:

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

*/
/*md
@no-stat

# Rh (Indents rhythm)

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

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

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

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

Designers should use the rhythm in his work.

## Usage

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

# Grids

## How to setup grids config for project

### Several grid configs for project

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

### Gaps / margin / column span configuration:

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

### Grid-span configuration

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

## Work with grids

### Development approaches

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

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

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

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

### Get gaps / margin / column span

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

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

### Examples of usage

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

*/
/*md
@no-stat

# grid-* (grid config get functions)

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

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

## Usage

```scss

// Configuration:

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

// Usage:

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

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

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

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

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

# Palette

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

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

*/
/*md
@no-stat

# adjust-color-to-bg

This function used to adjust color depending on provided background color. It 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-text

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

## Usage

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

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

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

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

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

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

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

# grid-span

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

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

## Examples

### Flex-basis example

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

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

### Floated items example

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

### Inline-block items example

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

*/
/*md
@no-stat

# aspect-ratio

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

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

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

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

## Arguments

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

=> percentage

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

## Usage

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

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

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

*/
/*md
@no-stat

# Hide

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

Here is a list of parameters you can use:

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

## Usage

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

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

# Icons from SVG sprite (example)

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

## Arguments

This mixin takes 4 arguments:

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

Also you can put a `@content` block for this mixin

To add an icon:

* you have to manually add SVG to './images/icons-src/' folder
* run `gulp icons`
* after this build you'll be able to use icons from isml files:
  * `<isinclude template="icons/standalone/{icon-name}` />
  * `<img src="${URLUtils.staticURL('/images/icons-src/{iconName}.svg')}" />`
  * `<img src="${URLUtils.staticURL('/images/icons-sprite.svgiconName')}" />`

To use an icon:

```scss
@include icon(icon_name);
```

Where icon name is a file name of individual SVG icon.

## Possible issues:

### Icon doesn't changed on hover/active states. Repaint issue when icon dimensions remains the same.

Use `will-change: mask-image;` for hover/active state icon.

``` scss
.b-element {
	@include icon(icon_name);

	&.m-active {
		@include icon(icon_name-active) {
			will-change: mask-image;
		}
	}
}
```

*/
/*md
@no-stat

# Hover-supported

This mixin is designed to address iOS standard behaviour 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

This mixin is useful for adding ... for text with more than 1 line

## Usage

```scss
.component {
	@include line-clamp;
}
```
*/
/*md

# g-button

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

## First type button

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

## First type disabled button

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

## First type, full width button

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

## Second type button

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

## Second type disabled button

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

## Third type button

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

## Third type disabled button

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

## Fourth type button

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

## Fifth type button

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

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

*/
.b-picture_focal-point {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: var(--image-position);
  width: var(--width);
  height: 100%;
}

.b-image_tile {
  width: var(--max-width);
  overflow: hidden;
  position: relative;
}
.b-image_tile.m-focal-point {
  max-width: var(--max-width);
  min-height: 50px;
  padding-bottom: var(--height);
}
.b-image_tile.m-focal-point .b-image_tile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position);
}
.b-image_tile.m-none {
  max-width: var(--max-width);
  padding-bottom: 0;
}
.b-image_tile.m-none .b-image_tile-image {
  position: static;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-image_tile.m-focal-point-tablet {
    padding-bottom: var(--height-tablet);
  }
  .b-image_tile.m-focal-point-tablet .b-image_tile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-position-tablet);
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-image_tile.m-none-tablet {
    padding-bottom: 0;
  }
  .b-image_tile.m-none-tablet .b-image_tile-image {
    position: static;
  }
}
@media screen and (max-width: 767px) {
  .b-image_tile.m-focal-point-mobile {
    padding-bottom: var(--height-mobile);
  }
  .b-image_tile.m-focal-point-mobile .b-image_tile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--image-position-mobile);
  }
}
@media screen and (max-width: 767px) {
  .b-image_tile.m-none-mobile {
    padding-bottom: 0;
  }
  .b-image_tile.m-none-mobile .b-image_tile-image {
    position: static;
  }
}

/*md

# g-link

```html_example
<a href="tel:1-888-222-3380" class="b-link_1">Primary link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_2">Secondary link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_3">Third link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_4">Fourth link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_5">Fifth link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_6">Sixth link</a>
```

```html_example
<a href="tel:1-888-222-3380" class="b-link_8">Eighth link</a>
```

*/
/*md

# g-heading_*

Some basic simple typography applied to different UI components.

This covers only very basic cases and could be extended.

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

	&-title {
		@include g-heading_1;

		margin-bottom: rh(8);
	}
}
```
*/
.m-page_designer h1, .m-page_designer h2, .m-page_designer h3, .m-page_designer h4, .m-page_designer h5, .m-page_designer h6 {
  margin-bottom: 0;
}

.main-content {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .m-centered {
    padding: 0 15px;
  }
}

@media screen and (max-width: 767px) {
  .m-centered_mobile {
    padding: 0 15px;
  }
}

.l-layout-wrapper {
  position: relative;
  display: grid;
  margin: 0 auto;
  max-width: 1750px;
  width: 100%;
  background-color: var(--bg-color);
  background-position: var(--bg-image-position);
  background-repeat: var(--bg-image-repeat);
  background-size: var(--bg-image-size);
}
@media screen and (max-width: 767px) {
  .l-layout-wrapper {
    background-image: var(--bg-image-mobile);
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .l-layout-wrapper {
    background-image: var(--bg-image-mobile);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .l-layout-wrapper {
    background-image: var(--bg-image-tablet);
  }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .l-layout-wrapper {
    background-image: var(--bg-image-desktop);
  }
}
@media screen and (min-width: 1440px) {
  .l-layout-wrapper {
    background-image: var(--bg-image-desktop);
  }
}
.m-gutter_none .l-layout-wrapper {
  grid-gap: 0;
}
.m-gutter_small .l-layout-wrapper {
  grid-gap: 20px;
}
.m-gutter_medium .l-layout-wrapper {
  grid-gap: 40px;
}
@media screen and (max-width: 1279px) {
  .m-gutter_medium .l-layout-wrapper {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .m-gutter_medium .l-layout-wrapper {
    grid-gap: 40px;
  }
}
.m-gutter_large .l-layout-wrapper {
  grid-gap: 56px;
}
@media screen and (max-width: 1279px) {
  .m-gutter_large .l-layout-wrapper {
    grid-gap: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .m-gutter_large .l-layout-wrapper {
    grid-gap: 56px;
  }
}
@media screen and (max-width: 767px) {
  .l-layout-wrapper .b-text_block {
    padding: 0px 1.5rem;
  }
}
.l-layout-1up .l-layout-wrapper {
  display: block;
}
.m-padding_extra_small .l-layout-wrapper {
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
}
.m-padding_small .l-layout-wrapper {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.m-padding_medium .l-layout-wrapper {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
.m-padding_large .l-layout-wrapper {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.m-padding_extra_large .l-layout-wrapper {
  padding-bottom: 3rem;
  padding-top: 3rem;
}
@media screen and (max-width: 767px) {
  .m-padding_extra_large .l-layout-wrapper {
    padding-bottom: 2.5rem;
    padding-top: 2.5rem;
  }
}
.m-padding_2xextra_large .l-layout-wrapper {
  padding-bottom: 4rem;
  padding-top: 4rem;
}
@media screen and (max-width: 767px) {
  .m-padding_2xextra_large .l-layout-wrapper {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }
}
.m-padding_3xextra_large .l-layout-wrapper {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
@media screen and (max-width: 767px) {
  .m-padding_3xextra_large .l-layout-wrapper {
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
}
.l-layout-item {
  display: flex;
  width: 100%;
}
.l-layout-item.m-horizontal-left .b-component-wrapper {
  justify-content: flex-start;
}
.l-layout-item.m-horizontal-left .b-component-wrapper.b-image_tile-container {
  display: block;
}
.l-layout-item.m-horizontal-center .b-component-wrapper {
  justify-content: center;
}
.l-layout-item.m-horizontal-right .b-component-wrapper {
  justify-content: flex-end;
}
.l-layout-item.m-vertical-top {
  align-items: flex-start;
}
.l-layout-item.m-vertical-middle {
  align-items: center;
}
.l-layout-item.m-vertical-bottom {
  align-items: flex-end;
}
.l-layout-item .experience-region {
  width: 100%;
}
.l-layout-item.m-stack-tablet {
  width: 100%;
}
.l-layout.m-full-width .l-layout-wrapper {
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .l-layout.m-full-width_small {
    margin-left: 10px;
    margin-right: 10px;
  }
  .l-layout.m-full-width_small .l-layout-wrapper {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .l-layout.m-full-width_medium {
    margin-left: 25px;
    margin-right: 25px;
  }
  .l-layout.m-full-width_medium .l-layout-wrapper {
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.m-full-width_small_mobile {
    margin-left: 10px;
    margin-right: 10px;
  }
  .l-layout.m-full-width_small_mobile .l-layout-wrapper {
    max-width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.m-full-width_medium_mobile {
    margin-left: 20px;
    margin-right: 20px;
  }
  .l-layout.m-full-width_medium_mobile .l-layout-wrapper {
    max-width: 100%;
  }
}
.l-layout.l-layout-1up .l-layout-wrapper {
  grid-template-columns: 100%;
}
.l-layout.l-layout-2up .l-layout-wrapper {
  grid-template-columns: 100%;
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-2up .l-layout-wrapper {
    grid-template-columns: repeat(2, minmax(45%, 1fr));
  }
}
.l-layout.l-layout-2up .m-layout-tablet-stack {
  grid-template-columns: 100%;
}
@media screen and (min-width: 1280px) {
  .l-layout.l-layout-2up .m-layout-tablet-stack {
    grid-template-columns: repeat(2, minmax(45%, 1fr));
  }
}
@media screen and (max-width: 1279px) {
  .l-layout.l-layout-2up .m-layout-tablet-stack {
    grid-template-columns: 100%;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-2up .l-default-behavior .l-layout-item:not(:first-child) {
    padding-top: 0.625rem;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-2up .l-revers-behavior .l-layout-item:first-child {
    padding-top: 0.625rem;
  }
}
.l-layout.l-layout-3up .l-layout-wrapper {
  grid-template-columns: 100%;
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-3up .l-layout-wrapper {
    grid-template-columns: repeat(3, minmax(30%, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3up .l-layout-item:not(:first-child) {
    padding-top: 0.625rem;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3up .l-layout-item:last-child .b-category_tile {
    margin-bottom: 0;
  }
}
.l-layout.l-layout-4up .l-layout-wrapper {
  grid-template-columns: repeat(2, minmax(45%, 1fr));
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-4up .l-layout-wrapper {
    grid-template-columns: repeat(4, minmax(18%, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-4up .b-category_tile {
    margin-bottom: 2.0625rem;
  }
}
.l-layout.l-layout-4up-wide .l-layout-wrapper {
  grid-template-columns: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .l-layout.l-layout-4up-wide .l-layout-wrapper {
    grid-template-columns: repeat(2, minmax(45%, 1fr));
  }
}
@media screen and (min-width: 1280px) {
  .l-layout.l-layout-4up-wide .l-layout-wrapper {
    grid-template-columns: repeat(4, minmax(18%, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-4up-wide .b-category_tile {
    margin-bottom: 2.0625rem;
  }
}
.l-layout.l-layout-3070 .l-layout-wrapper, .l-layout.l-layout-7030 .l-layout-wrapper {
  display: flex;
  flex-flow: row wrap;
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-3070 .l-layout-wrapper, .l-layout.l-layout-7030 .l-layout-wrapper {
    display: grid;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3070 .l-layout-wrapper .l-layout-item.l-layout-col1, .l-layout.l-layout-7030 .l-layout-wrapper .l-layout-item.l-layout-col1 {
    padding-top: 0;
    order: 1;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3070 .l-layout-wrapper .l-layout-item.l-layout-col2, .l-layout.l-layout-7030 .l-layout-wrapper .l-layout-item.l-layout-col2 {
    padding-top: 0.625rem;
    order: 2;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3070 .l-layout-wrapper.l-reverse-behavior .l-layout-item.l-layout-col1, .l-layout.l-layout-7030 .l-layout-wrapper.l-reverse-behavior .l-layout-item.l-layout-col1 {
    padding-top: 0.625rem;
    order: 2;
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3070 .l-layout-wrapper.l-reverse-behavior .l-layout-item.l-layout-col2, .l-layout.l-layout-7030 .l-layout-wrapper.l-reverse-behavior .l-layout-item.l-layout-col2 {
    padding-top: 0;
    order: 1;
  }
}
.l-layout.l-layout-3070 .m-layout-tablet-stack, .l-layout.l-layout-7030 .m-layout-tablet-stack {
  grid-template-columns: 100%;
}
@media screen and (max-width: 1279px) {
  .l-layout.l-layout-3070 .m-layout-tablet-stack, .l-layout.l-layout-7030 .m-layout-tablet-stack {
    grid-template-columns: 100% !important;
  }
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-3070 .l-layout-wrapper {
    grid-template-columns: calc(30% - 10px) calc(70% - 10px);
  }
}
@media screen and (max-width: 767px) {
  .l-layout.l-layout-3070 .l-layout-item:last-child {
    grid-row-end: 2;
    grid-row-start: 1;
  }
}
@media screen and (min-width: 768px) {
  .l-layout.l-layout-7030 .l-layout-wrapper {
    grid-template-columns: calc(70% - 10px) calc(30% - 10px);
  }
}
@media screen and (min-width: 768px) {
  .l-layout-col1 {
    background-color: var(--bg-color-col1);
  }
}
.l-layout-col1 .experience-column1 {
  background-color: var(--bg-color-col1);
}
@media screen and (min-width: 768px) {
  .l-layout-col2 {
    background-color: var(--bg-color-col2);
  }
}
.l-layout-col2 .experience-column2 {
  background-color: var(--bg-color-col2);
}

@media screen and (max-width: 767px) {
  .l-revers-behavior .l-layout-col2 {
    order: -1;
  }
}

#js-load-curalate {
  width: 100%;
}
@media screen and (min-width: 1280px) {
  #js-load-curalate {
    padding-top: 0;
  }
}

@media screen and (min-width: 1280px) {
  footer {
    margin-top: 0;
  }
}

.b-component {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.b-component.m-full_height {
  height: 100%;
}
.b-component-wrapper {
  display: flex;
  width: 100%;
}
.b-component-wrapper.m-margin_top-extra_small {
  margin-top: 0.75rem;
}
.b-component-wrapper.m-margin_top-small {
  margin-top: 1rem;
}
.b-component-wrapper.m-margin_top-medium {
  margin-top: 1.5rem;
}
.b-component-wrapper.m-margin_top-large {
  margin-top: 2rem;
}
.b-component-wrapper.m-margin_top-extra_large {
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_top-extra_large {
    margin-top: 2.5rem;
  }
}
.b-component-wrapper.m-margin_top-2xextra_large {
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_top-2xextra_large {
    margin-top: 3rem;
  }
}
.b-component-wrapper.m-margin_top-3xextra_large {
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_top-3xextra_large {
    margin-top: 4rem;
  }
}
.b-component-wrapper.m-margin_bottom-extra_small {
  margin-bottom: 0.75rem;
}
.b-component-wrapper.m-margin_bottom-small {
  margin-bottom: 1rem;
}
.b-component-wrapper.m-margin_bottom-medium {
  margin-bottom: 1.5rem;
}
.b-component-wrapper.m-margin_bottom-large {
  margin-bottom: 2rem;
}
.b-component-wrapper.m-margin_bottom-extra_large {
  margin-bottom: 3rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_bottom-extra_large {
    margin-bottom: 2.5rem;
  }
}
.b-component-wrapper.m-margin_bottom-2xextra_large {
  margin-bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_bottom-2xextra_large {
    margin-bottom: 3rem;
  }
}
.b-component-wrapper.m-margin_bottom-3xextra_large {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .b-component-wrapper.m-margin_bottom-3xextra_large {
    margin-bottom: 4rem;
  }
}
.b-component h1 {
  font-size: 2.5rem;
  font-stretch: condensed;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .b-component h1 {
    font-size: 3.125rem;
  }
}
.b-component h2 {
  font-size: 2.5rem;
  font-stretch: condensed;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .b-component h2 {
    font-size: 1.875rem;
  }
}
.b-component h3 {
  font-size: 1.25rem;
  font-stretch: condensed;
  font-weight: 700;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-component h3 {
    font-size: 1.6875rem;
  }
}
@media screen and (min-width: 1024px) {
  .b-component h3 {
    font-size: 1.875rem;
  }
}
.b-component h4 {
  font-size: 1.25rem;
  font-stretch: condensed;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .b-component h4 {
    font-size: 1.5rem;
  }
}
.b-component h5 {
  font-size: 1.25rem;
  font-stretch: condensed;
  font-weight: 700;
}
.b-component p {
  overflow-wrap: break-word;
  margin-bottom: 0;
}
.b-component li {
  color: #333;
  font-size: 0.875rem;
  line-height: 1.0625rem;
  margin-top: 0.625rem;
  position: relative;
}
.b-component sup,
.b-component sub {
  font-size: 80%;
}
.b-component iframe {
  max-width: 100%;
}
.b-component .b-button:not(.btn-primary-new):not(.btn-primary-ghost):not(.btn-secondary-new):not(.btn-secondary-ghost):not(.btn-reverse):not(.btn-reverse-ghost):not(.btn-plus):not(.btn-plus-ghost) {
  padding: 13px 30px;
}
.b-component.ske-trustarc-dns-form {
  /* Override TrustArc iframe style */
}
.b-component.ske-trustarc-dns-form iframe {
  height: 1450px !important;
  margin: 0 auto !important;
  width: 100% !important;
  /* Use custom breakpoint for 425px - 768px as per requirement */
}
@media screen and (min-width: 425px) {
  .b-component.ske-trustarc-dns-form iframe {
    height: 1320px !important;
  }
}
@media screen and (min-width: 1024px) {
  .b-component.ske-trustarc-dns-form iframe {
    height: 1000px !important;
  }
}

.b-header_deluxe {
  justify-content: inherit;
}
@media screen and (min-width: 1280px) {
  .b-header_deluxe {
    display: flex;
    width: 100%;
    align-items: center;
  }
}
@media screen and (min-width: 1280px) {
  .b-header_deluxe-divider-dark::after, .b-header_deluxe-divider-dark::before {
    background-color: #dedede;
    content: "";
    display: inline-block;
    flex: 1 1 100%;
    height: 1px;
    max-width: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .b-header_deluxe-divider-light::after, .b-header_deluxe-divider-light::before {
    background-color: #fff;
    content: "";
    display: inline-block;
    flex: 1 1 100%;
    height: 1px;
    max-width: 100%;
  }
}
.b-header_deluxe-icon {
  width: 1.375rem;
  height: 1.375rem;
  margin-top: -3px;
  margin-left: 8px;
}
@media screen and (min-width: 768px) {
  .b-header_deluxe-icon {
    margin-left: 10px;
  }
}
@media screen and (min-width: 1024px) {
  .b-header_deluxe-icon {
    margin-left: 12px;
  }
}
.b-header_deluxe-horizontal_left {
  text-align: left;
  justify-content: flex-start;
}
.b-header_deluxe-horizontal_left .b-header_deluxe::before {
  content: none;
}
.b-header_deluxe-horizontal_right {
  text-align: right;
  justify-content: flex-end;
}
.b-header_deluxe-horizontal_right .b-header_deluxe::after {
  content: none;
}
.b-header_deluxe-horizontal_center {
  justify-content: center;
  text-align: center;
}
.b-header_deluxe .b-header_deluxe-heading {
  font-weight: 400;
  font-size: 2.5rem;
  flex-shrink: 0;
  max-width: 100%;
  margin-bottom: 17px;
}
@media screen and (min-width: 768px) {
  .b-header_deluxe .b-header_deluxe-heading {
    padding: 0 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-header_deluxe .b-header_deluxe-heading {
    font-size: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .b-header_deluxe .b-header_deluxe-heading {
    font-size: 1.6875rem;
  }
}
.b-header_deluxe .b-header_deluxe-heading-title-light {
  fill: #fff;
  color: #fff;
}
.b-header_deluxe .b-header_deluxe-heading-title-light a {
  fill: #fff;
  color: #fff;
}
.b-header_deluxe .b-header_deluxe-heading-title-dark {
  fill: #434343;
}
.b-header_deluxe .b-header_deluxe-heading-title-dark a {
  fill: #434343;
  color: #434343;
}
.b-header_deluxe-wrapper.b-component-wrapper.b-component-wrapper-init {
  display: block;
  justify-content: inherit;
}

@media screen and (min-width: 1280px) {
  .l-layout-1up .b-header_deluxe-horizontal_center {
    width: calc(100vw - 34px);
    transform: translateX(-50%);
    left: 50%;
    position: relative;
  }
}

.b-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .b-button {
    min-width: 100%;
    max-width: 100%;
    flex-basis: 100%;
  }
}
.b-button_icon-left {
  margin-right: 0.625rem;
  max-width: 19px;
  height: 19px;
  fill: currentColor;
  margin-top: -4px;
}
.b-button_icon-right {
  margin-left: 0.625rem;
  max-width: 19px;
  height: 19px;
  fill: currentColor;
  margin-top: -4px;
}
.b-button.m-type-secondary {
  background: transparent;
  border: 2px solid #1973C1;
  color: #1973C1;
}
.b-button.m-type-secondary:hover {
  background: #1973C1;
  border: 2px solid #0063ba;
  color: #ffffff;
  text-decoration: none;
}
.b-button.m-width-type_fill {
  width: 100%;
}
.b-button.m-width-type_auto {
  min-width: auto;
}
.b-button-custom-width {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .b-button-custom-width.m-width-type_auto {
    min-width: 100% !important;
    max-width: 100%;
  }
}
.b-button.btn-primary {
  font-size: 1.125rem;
}
.b-button.btn-primary:not(:disabled):not(.disabled):hover, .b-button.btn-primary:not(:disabled):not(.disabled):active {
  background-color: #005495;
  border-color: #005495;
}
.b-button.btn-primary:not(:disabled):not(.disabled):focus {
  background-color: #005495;
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0px 0px 8px 0px #408acb;
}
.b-button.btn-secondary {
  font-size: 1.125rem;
  background: transparent;
  color: #333333;
  border-color: #333333;
}
.b-button.btn-secondary:not(:disabled):not(.disabled):hover, .b-button.btn-secondary:not(:disabled):not(.disabled):active {
  background: #434343;
  color: #ffffff;
  border-color: #333333;
}
.b-button.btn-secondary:not(:disabled):not(.disabled):focus {
  background: #434343;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 8px 0 #666666;
}

.b-link {
  transition: all cubic-bezier(0.3, 0.46, 0.45, 0.94) 0.2s;
  color: #333;
  text-decoration: none;
  font-weight: 700;
  text-align: center;
}
.b-link:visited {
  color: #333;
  text-decoration: none;
}
.b-link:active {
  color: #0063ba;
  text-decoration: underline;
}
@media screen and (min-width: 1280px) {
  .b-link:hover {
    color: #0063ba;
    text-decoration: underline;
  }
}
.b-link_full {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.b-link.m-type-primary, .b-link.m-type-primary-new {
  font-size: var(--link-font-size, 18px);
  position: relative;
  text-transform: uppercase;
  color: #1973C1;
}
@media screen and (max-width: 767px) {
  .b-link.m-type-primary, .b-link.m-type-primary-new {
    font-size: var(--link-font-size-mobile, 18px);
  }
}
.b-link.m-type-primary:hover, .b-link.m-type-primary-new:hover {
  color: #1973C1;
}
.b-link.m-type-secondary, .b-link.m-type-secondary-new {
  font-size: var(--link-font-size, 18px);
  color: #434343;
}
@media screen and (max-width: 767px) {
  .b-link.m-type-secondary, .b-link.m-type-secondary-new {
    font-size: var(--link-font-size-mobile, 18px);
  }
}
.b-link.m-type-secondary:hover, .b-link.m-type-secondary-new:hover {
  color: #434343;
}
.b-link.m-type-tertiary, .b-link.m-type-plus {
  font-size: var(--link-font-size, 14px);
  color: #0e7e83;
}
@media screen and (max-width: 767px) {
  .b-link.m-type-tertiary, .b-link.m-type-plus {
    font-size: var(--link-font-size-mobile, 14px);
  }
}
.b-link.m-type-tertiary:hover, .b-link.m-type-plus:hover {
  color: #0e7e83;
}
.b-link.m-type-icon {
  fill: currentColor;
  display: inline-flex;
  align-items: center;
}
.b-link.m-type-icon svg {
  height: var(--link-font-size, 18px);
  max-width: var(--link-font-size, 18px);
  margin-left: 2px;
}
@media screen and (max-width: 767px) {
  .b-link.m-type-icon svg {
    height: var(--link-font-size-mobile, 18px);
    max-width: var(--link-font-size-mobile, 18px);
  }
}

.b-banner__theme-dark .b-link {
  color: #ffffff;
  fill: #ffffff;
}

.b-category_tile {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .b-category_tile {
    margin-bottom: 2.5rem;
  }
}
.b-category_tile-text {
  margin-top: 1.0625rem;
  text-align: center;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.b-category_tile-text.m-with-bg {
  padding: 0.625rem 0.9375rem;
  margin-top: 0;
}
.b-category_tile .componentLink {
  color: #333;
}
.b-category_tile .componentLink:hover {
  color: #333;
  text-decoration-color: #333;
}
.b-category_tile-link {
  font-weight: 700;
  margin: 0 auto;
  fill: #333;
  color: #333;
  font-size: 1.75rem;
}
.b-category_tile-link:hover {
  color: #333;
  text-decoration-color: #333;
}
@media screen and (max-width: 1279px) {
  .b-category_tile-link {
    font-size: 1.25rem;
  }
}
.b-category_tile-link_icon {
  margin-left: 3px;
  height: 24px;
  width: 24px;
  margin-top: -2px;
}
@media screen and (max-width: 1279px) {
  .b-category_tile-link_icon {
    width: 18px;
    height: 18px;
  }
}
@media screen and (min-width: 1280px) {
  .b-category_tile-link--small {
    font-size: 1.25rem;
  }
  .b-category_tile-link--small .b-category_tile-link_icon {
    width: 18px;
    height: 18px;
  }
}
@media screen and (min-width: 1280px) {
  .b-category_tile-link--medium {
    font-size: 1.5rem;
  }
  .b-category_tile-link--medium .b-category_tile-link_icon {
    width: 20px;
    height: 20px;
  }
}
.b-category_tile-link .b-link {
  text-decoration: none;
  color: currentColor;
}
.b-category_tile-link + .b-category_tile-text-block {
  margin-top: 11px;
  color: #333;
  text-decoration-color: #333;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-category_tile-link + .b-category_tile-text-block {
    margin-top: 8px;
  }
}
.b-category_tile-text-block {
  font-size: 1rem;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-category_tile-text-block {
    font-size: 0.8125rem;
  }
}
@media screen and (max-width: 767px) {
  .b-category_tile-text-block {
    font-size: 1rem;
  }
}
.b-category_tile-link_icon {
  margin-left: 3px;
  height: 24px;
  width: 24px;
  margin-top: -2px;
}
@media screen and (max-width: 1279px) {
  .b-category_tile-link_icon {
    width: 18px;
    height: 18px;
  }
}
.b-category_tile.m-mask_type-circle .b-image_tile, .b-category_tile.m-mask_type-circle .b-image_tile-image {
  clip-path: circle();
}

.m-page_designer img {
  max-width: 100%;
  width: 100%;
}

.b-image_tile {
  max-width: 100%;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .b-image_tile {
    max-width: var(--max-width);
  }
}
.b-image_tile-image {
  width: 100%;
  display: block;
  height: 100%;
  aspect-ratio: var(--img-aspect-ratio);
}
@media screen and (max-width: 767px) {
  .b-image_tile-image {
    aspect-ratio: var(--img-aspect-ratio-mobile);
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-image_tile-image {
    aspect-ratio: var(--img-aspect-ratio-tablet);
  }
}
.b-image_tile.m-fixed_aspect {
  background: #EBEBEB;
  display: block;
  overflow: hidden;
  padding-bottom: var(--height);
  position: relative;
  width: 100%;
  width: var(--width);
}
.b-image_tile.m-fixed_aspect .b-image_tile-image {
  bottom: 0;
  color: #EBEBEB;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-image_tile.m-focal_point {
  position: relative;
  width: var(--width);
  padding-bottom: var(--height);
}
.b-image_tile-link {
  width: 100%;
}
.b-image_tile-container {
  position: relative;
}
.b-image_tile-container-link {
  width: 100%;
}

.c-product-grid__item, .c-product-grid__item__wrapper {
  width: 100%;
  transition: all 0.3s ease;
  min-width: 100%;
}
.c-product-grid__container {
  margin-left: auto;
  margin-right: auto;
}

.b-product {
  min-width: 100%;
}
@media screen and (min-width: 1280px) {
  .b-product {
    min-height: 0;
    position: relative;
  }
}

@media screen and (min-width: 1280px) {
  .b-product-tile {
    width: 100%;
  }
}
.b-product-tile.c-product-tile .color-swatches .swatches {
  min-height: 80px;
}
@media screen and (min-width: 1024px) {
  .b-product-tile.c-product-tile .color-swatches .swatches {
    min-height: 20px;
  }
}
@media screen and (min-width: 1280px) {
  .b-product-tile.c-product-tile .color-swatches .swatches {
    height: auto;
    margin-bottom: 20px;
    max-width: 100%;
  }
}
@media screen and (min-width: 1280px) {
  .b-product-tile.c-product-tile:hover, .b-product-tile.c-product-tile:focus-within {
    box-shadow: none;
    padding: 0;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    transition: none;
    width: 100%;
  }
  .b-product-tile.c-product-tile:hover .c-product-tile__image-container, .b-product-tile.c-product-tile:focus-within .c-product-tile__image-container {
    padding-left: 0;
    padding-right: 0;
  }
}

.b-carousel .b-product-tile.c-product-tile .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile .color-swatches .swatches {
  min-height: 0;
}
@media screen and (min-width: 1280px) {
  .b-carousel .b-product-tile.c-product-tile .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile .color-swatches .swatches {
    height: 0;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .b-product-tile.c-product-tile:hover, .b-carousel .b-product-tile.c-product-tile:focus-within,
.b-einstein-carousel .b-product-tile.c-product-tile:hover,
.b-einstein-carousel .b-product-tile.c-product-tile:focus-within,
.s-slick .b-product-tile.c-product-tile:hover,
.s-slick .b-product-tile.c-product-tile:focus-within {
    box-shadow: 0 55px 55px -25px rgba(0, 0, 0, 0.25), 0 10px 30px 0 rgba(0, 0, 0, 0.1);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 35px;
    position: absolute;
    left: -30px;
    right: -30px;
    top: -35px;
    z-index: 1;
    transition: box-shadow 0.2s;
    width: calc(100% + 60px);
  }
  .b-carousel .b-product-tile.c-product-tile:hover .c-product-tile__image-container, .b-carousel .b-product-tile.c-product-tile:focus-within .c-product-tile__image-container,
.b-einstein-carousel .b-product-tile.c-product-tile:hover .c-product-tile__image-container,
.b-einstein-carousel .b-product-tile.c-product-tile:focus-within .c-product-tile__image-container,
.s-slick .b-product-tile.c-product-tile:hover .c-product-tile__image-container,
.s-slick .b-product-tile.c-product-tile:focus-within .c-product-tile__image-container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .b-carousel .b-product-tile.c-product-tile:hover .color-swatches .swatches, .b-carousel .b-product-tile.c-product-tile:focus-within .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile:hover .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile:focus-within .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile:hover .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile:focus-within .color-swatches .swatches {
    min-height: 0;
  }
}
@media screen and (min-width: 1280px) and (min-width: 1280px) {
  .b-carousel .b-product-tile.c-product-tile:hover .color-swatches .swatches, .b-carousel .b-product-tile.c-product-tile:focus-within .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile:hover .color-swatches .swatches,
.b-einstein-carousel .b-product-tile.c-product-tile:focus-within .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile:hover .color-swatches .swatches,
.s-slick .b-product-tile.c-product-tile:focus-within .color-swatches .swatches {
    height: auto;
    margin-bottom: 20px;
    max-width: 100%;
  }
}

.c-product-grid__container {
  flex-wrap: wrap;
}
.c-product-grid__container .b-section_title {
  text-align: center;
  margin-bottom: 40px;
}
.c-product-grid__container ul li::before {
  content: none;
}

.b-product-tile-component .tile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.b-product-tile-component .c-product-tile__image-container a {
  position: relative;
  padding-bottom: 88.5%;
}
.b-product-tile-component .c-product-tile__badge {
  z-index: 1;
}

.b-carousel {
  width: 100%;
  display: flex;
  padding: 0 33px;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
@media screen and (max-width: 1279px) {
  .b-carousel {
    padding-bottom: 65px;
    padding-top: 0;
  }
}
.b-carousel.slick-initialized {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .b-carousel_mobile-disabled .b-carousel {
    opacity: 1;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(12, 1fr);
  }
  .b-carousel_mobile-disabled .b-carousel-slide {
    grid-column: span 6;
  }
}
@media screen and (max-width: 767px) {
  .b-carousel {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel {
    position: relative;
    overflow: hidden;
    transform: translate(0, 0);
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .b-product-tile-component {
    padding-top: 48px;
  }
}
.b-carousel-wrapper {
  flex-wrap: wrap;
}
.b-carousel .slick-slide {
  padding: 0 9px;
}
.b-carousel .slick-track {
  position: relative;
}
@media screen and (min-width: 1280px) {
  .b-carousel .slick-track {
    background-color: #ffffff;
  }
}
.b-carousel .slick-dots {
  bottom: 40px;
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .b-carousel .slick-dots {
    bottom: 53px;
  }
}
@media screen and (min-width: 1440px) {
  .b-carousel .slick-dots {
    bottom: 80px;
  }
}
.b-carousel .slick-track {
  align-items: flex-start;
}
@media screen and (min-width: 1280px) {
  .b-carousel > .slick-list {
    overflow: visible;
  }
  .b-carousel > .slick-list > .slick-track:before, .b-carousel > .slick-list > .slick-track:after {
    content: "";
    position: fixed;
    width: 25px;
    height: 100%;
    background: #ffffff;
    z-index: 1;
  }
  .b-carousel > .slick-list > .slick-track::after {
    right: 0;
  }
  .b-carousel > .slick-list > .slick-track::before {
    left: 0;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .slick-slide {
    padding-bottom: 115px;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .b-product-tile-component {
    margin-bottom: -115px;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .product {
    margin-bottom: 115px;
  }
}
@media screen and (min-width: 1440px) {
  .b-carousel .product {
    margin-bottom: 40%;
  }
}
@media screen and (min-width: 1280px) {
  .b-carousel .product .product-tile:hover {
    box-shadow: 0 35px 35px -25px rgba(0, 0, 0, 0.05), 0 10px 24px 0 rgba(0, 0, 0, 0.2);
  }
}
.b-carousel .b-category_tile {
  margin-bottom: 0;
}
.b-carousel .c-product-tile:hover {
  z-index: 2;
}
.b-carousel > .slick-arrow {
  width: 45px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.b-carousel > .slick-next {
  right: 0;
}
.b-carousel > .slick-prev {
  left: 0;
}
@media screen and (min-width: 768px) {
  .b-carousel > .slick-arrow::after {
    width: 19px;
    height: 19px;
  }
}
.b-carousel .b-product-tile-component {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.m-full-width .b-carousel-desktop-1 .slick-track:before, .m-full-width .b-carousel-desktop-1 .slick-track:after {
  display: none;
}
@media screen and (min-width: 1280px) {
  .m-full-width .b-carousel-desktop-1 [role=group] > .b-component-banner {
    padding-bottom: 0;
  }
}

.s-slick--swatches .slick-slide {
  padding: 0;
}
@media screen and (min-width: 1280px) {
  .s-slick--swatches .slick-slide {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .s-slick--swatches .slick-arrow {
    width: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 .b-carousel {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .b-carousel-tablet-1 [role=group] > .b-component {
    padding-bottom: 70px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) and (min-width: 768px) {
  .b-carousel-tablet-1 [role=group] > .b-product-tile-component {
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 [role=group] > .b-component-banner {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 .slick-dots {
    bottom: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 .slick-slide {
    padding: 0 38px;
    margin-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 .swatches .slick-slide {
    padding: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-1 > .slick-list > .slick-track:before, .b-carousel-tablet-1 > .slick-list > .slick-track:after {
    content: none;
  }
}

@media screen and (min-width: 1280px) {
  .b-carousel-desktop-1 .b-carousel {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .b-carousel-desktop-1 [role=group] > .b-component {
    padding-bottom: 70px;
  }
  .b-carousel-desktop-1 [role=group] > .b-component-banner {
    padding-bottom: 0;
  }
  .b-carousel-desktop-1 .slick-dots {
    bottom: 40px;
  }
  .b-carousel-desktop-1 .slick-slide {
    padding: 0 38px;
    margin-bottom: 0;
  }
  .b-carousel-desktop-1 .swatches .slick-slide {
    padding: 0;
  }
  .b-carousel-desktop-1 .b-product-tile-component {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 767px) {
  .b-carousel-mobile-1 .b-carousel {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }
  .b-carousel-mobile-1 [role=group] > .b-component {
    padding-bottom: 50px;
  }
  .b-carousel-mobile-1 [role=group] > .b-component-banner {
    padding-bottom: 0;
  }
  .b-carousel-mobile-1 .slick-dots {
    bottom: 20px;
  }
  .b-carousel-mobile-1 .slick-slide {
    padding: 0;
  }
  .b-carousel-mobile-1 .slick-slide {
    margin-bottom: 0;
  }
}

.m-vertical-top .slick-track {
  align-items: flex-start;
}

.m-vertical-middle .slick-track {
  align-items: center;
}

.m-vertical-bottom .slick-track {
  align-items: flex-end;
}

.m-horizontal-center .slick-track {
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .m-horizontal-center .b-carousel_mobile-disabled .b-carousel-slide:last-child:nth-child(2n-1) {
    grid-column-end: -4;
  }
}

@media screen and (max-width: 767px) {
  .m-horizontal-left .b-carousel-mobile-1 .b-product-tile-component {
    margin-right: auto;
    margin-left: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .m-horizontal-left .b-carousel-tablet-1 .b-product-tile-component {
    margin-right: auto;
    margin-left: 0;
  }
}
@media screen and (min-width: 1280px) {
  .m-horizontal-left .b-carousel-desktop-1 .b-product-tile-component {
    margin-right: auto;
    margin-left: 40px;
  }
}

@media screen and (min-width: 1280px) {
  .b-section_title-text {
    padding: 0 40px;
  }
}

.m-horizontal-right .slick-track {
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .m-horizontal-right .b-carousel-mobile-1 .b-product-tile-component {
    margin-left: auto;
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .m-horizontal-right .b-carousel-tablet-1 .b-product-tile-component {
    margin-left: auto;
    margin-right: 0;
  }
}
@media screen and (min-width: 1280px) {
  .m-horizontal-right .b-carousel-desktop-1 .b-product-tile-component {
    margin-left: auto;
    margin-right: 40px;
  }
}
@media screen and (max-width: 767px) {
  .m-horizontal-right .b-carousel_mobile-disabled .b-carousel-slide:last-child:nth-child(2n-1) {
    grid-column-end: -1;
  }
}

@media screen and (min-width: 1280px) {
  .m-full-width .b-carousel-desktop-1 .slick-slide {
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .m-full-width .b-carousel-tablet-1 .slick-slide {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel-tablet-no-arrow .b-carousel {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .b-carousel-mobile-arrow .b-carousel > .slick-arrow {
    width: 17px;
  }
  .b-carousel-mobile-arrow .b-carousel > .slick-arrow::after {
    width: 12px;
    height: 12px;
  }
  .b-carousel-mobile-arrow .b-carousel {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media screen and (max-width: 767px) {
  .m-full-width_medium_mobile .b-carousel-mobile-arrow,
.m-centered_mobile .b-carousel-mobile-arrow {
    margin-left: -5px;
    margin-right: -5px;
    flex-grow: 1;
  }
}

@media screen and (max-width: 767px) {
  .m-full-width_small_mobile .b-carousel-mobile-arrow {
    margin-left: -10px;
    margin-right: -10px;
    flex-grow: 1;
  }
}

@media screen and (max-width: 767px) {
  .m-full-width_mobile .b-carousel-mobile-1 .b-carousel {
    padding-left: 0;
    padding-right: 0;
  }
}

.b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.b-image_tile-container), .b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.m-background) {
  transition: transform 0.5s ease-in-out;
  transform: scale(1);
}
.b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.b-image_tile-container) .b-image_tile-container,
.b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.b-image_tile-container) .b-banner-content.m-background .b-banner-content-wrapper.m-background, .b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.m-background) .b-image_tile-container,
.b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.m-background) .b-banner-content.m-background .b-banner-content-wrapper.m-background {
  margin-top: 6px;
}
.b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.b-image_tile-container).hover, .b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.b-image_tile-container):hover, .b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.m-background).hover, .b-carousel-wrapper.b-carousel-hover-animation .slick-slide div[role=group]:has(.m-background):hover {
  transform: scale(1.03);
}

.b-carousel_slider {
  overflow: hidden;
}
.b-carousel_slider:hover {
  overflow: visible;
}
.b-carousel_slider .veil {
  display: none;
}
@media screen and (min-width: 1280px) {
  .b-carousel_slider .c-product-grid__slider {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .b-carousel_slider .c-product-grid__slider {
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .b-carousel_slider .c-product-grid__container {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 767px) {
  .b-carousel_slider .c-product-grid__container {
    display: block;
  }
}
.b-carousel_slider .c-product-grid__container .c-product-grid__slider {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.b-carousel_slider .c-product-grid__container .c-product-grid__slider.slick-initialized {
  opacity: 1;
}
.b-carousel_slider .c-product-grid__container .slick-arrow::after {
  margin-left: 8px;
}
@media screen and (max-width: 767px) {
  .b-carousel_slider .c-product-grid__container .slick-arrow::after {
    margin-left: 5px;
  }
}
@media screen and (max-width: 767px) {
  .b-carousel_slider .s-slick--product-grid {
    padding-bottom: 21px;
  }
}
@media screen and (max-width: 767px) {
  .b-carousel_slider .slick-slide {
    padding: 0 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-carousel_slider .c-product-grid__item {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.b-carousel_slider .b-header_deluxe-heading {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .c-product-tile__color-swatches__swatch__inner {
    padding-bottom: 88.5%;
    position: relative;
    overflow: hidden;
  }
}

.c-product-tile__color-swatches__swatch__img {
  padding: 1px;
}
@media screen and (max-width: 767px) {
  .c-product-tile__color-swatches__swatch__img {
    position: absolute;
    width: 100%;
  }
}

.b-einstein-carousel {
  min-height: 358px;
}
@media screen and (min-width: 1024px) {
  .b-einstein-carousel {
    min-height: 463px;
  }
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel {
    min-height: 658px;
  }
}
.b-einstein-carousel .tile-image {
  min-height: 140px;
}
@media screen and (min-width: 1024px) {
  .b-einstein-carousel .tile-image {
    min-height: 180px;
  }
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel .tile-image {
    min-height: 310px;
  }
}
.b-einstein-carousel.initialized {
  min-height: auto;
}
@media screen and (min-width: 1024px) {
  .b-einstein-carousel.initialized {
    min-height: auto;
  }
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel.initialized {
    min-height: auto;
  }
}
.b-einstein-carousel.initialized .tile-image {
  min-height: auto;
}
@media screen and (min-width: 1024px) {
  .b-einstein-carousel.initialized .tile-image {
    min-height: auto;
  }
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel.initialized .tile-image {
    min-height: auto;
  }
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel.initialized .slick-track.single-slide {
    min-height: 400px;
  }
}
.b-einstein-carousel.slick-initialized {
  margin-bottom: 0;
}
@media screen and (min-width: 1280px) {
  .b-einstein-carousel .slick-list {
    margin-top: -10px;
  }
}
.b-einstein-carousel .swatches .slick-slide {
  padding-left: 0;
  padding-right: 0;
}

.b-text_block {
  width: 100%;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .b-text_block {
    max-width: var(--max-width);
    padding-left: var(--content-max-width);
  }
}
@media screen and (min-width: 768px) {
  .b-text_block h1,
.b-text_block h2,
.b-text_block h3,
.b-text_block h4,
.b-text_block h5,
.b-text_block h6 {
    margin-left: var(--content-heading-margin-left);
  }
}
.b-text_block-content {
  overflow-wrap: break-word;
  word-break: break-word;
}
.b-text_block-content > *:not(:first-child) {
  margin-top: 1.25rem;
}
@media screen and (max-width: 1023px) {
  .b-text_block-content > *:not(:first-child) {
    margin-top: 0.9375rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .m-full_height .b-text_block {
    max-width: 100% !important;
  }
}
.b-text_block iframe {
  border: none;
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-right-tablet,
.text-align-right-tablet .b-text_block-content * {
    text-align: right !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-right-tablet,
.text-align-right-tablet .b-component-wrapper {
    justify-content: flex-end !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-center-tablet,
.text-align-center-tablet .b-text_block-content * {
    text-align: center !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-center-tablet,
.text-align-center-tablet .b-component-wrapper {
    justify-content: center !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-left-tablet,
.text-align-left-tablet .b-text_block-content * {
    text-align: left !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .text-align-left-tablet,
.text-align-left-tablet .b-component-wrapper {
    justify-content: flex-start !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-right-mobile,
.text-align-right-mobile .b-text_block-content * {
    text-align: right !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-right-mobile,
.text-align-right-mobile .b-component-wrapper {
    justify-content: flex-end !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-center-mobile,
.text-align-center-mobile .b-text_block-content * {
    text-align: center !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-center-mobile,
.text-align-center-mobile .b-component-wrapper {
    justify-content: center !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-left-mobile,
.text-align-left-mobile .b-text_block-content * {
    text-align: left !important;
  }
}

@media screen and (max-width: 767px) {
  .text-align-left-mobile,
.text-align-left-mobile .b-component-wrapper {
    justify-content: flex-start !important;
  }
}

.b-banner {
  display: flex;
  position: relative;
  z-index: 0;
  width: 100%;
  overflow: hidden;
}
.b-banner__theme-dark .b-text_block-content {
  color: #ffffff;
}
.b-banner__theme-dark .b-text_block-content * {
  color: currentColor;
}
.b-banner-content-image.b-banner-content-image {
  width: auto;
}
.b-banner-content-align-center {
  text-align: center;
}
.b-banner-content-align-right {
  text-align: right;
}
.b-banner-content-image-wrapper {
  width: 100%;
}
@media screen and (max-width: 767px) {
  .b-banner.m-full_height {
    flex-wrap: wrap;
  }
}
.b-banner.m-focal_point .b-banner-picture {
  position: relative;
  width: var(--width);
}
.b-banner.m-top_left {
  align-items: flex-start;
  justify-content: flex-start;
}
.b-banner.m-top_center {
  align-items: flex-start;
  justify-content: center;
}
.b-banner.m-top_right {
  align-items: flex-start;
  justify-content: flex-end;
}
.b-banner.m-middle_left {
  align-items: center;
  justify-content: flex-start;
}
.b-banner.m-middle_center {
  align-items: center;
  justify-content: center;
}
.b-banner.m-middle_right {
  align-items: center;
  justify-content: flex-end;
}
.b-banner.m-bottom_left {
  align-items: flex-end;
  justify-content: flex-start;
}
.b-banner.m-bottom_center {
  align-items: flex-end;
  justify-content: center;
}
.b-banner.m-bottom_right {
  align-items: flex-end;
  justify-content: flex-end;
}
.b-banner.m-beneath-image, .b-banner.m-beneath-image-left, .b-banner.m-beneath-image-right {
  align-items: flex-start;
}
.b-banner.m-beneath-image .b-banner-content.m-background, .b-banner.m-beneath-image-left .b-banner-content.m-background, .b-banner.m-beneath-image-right .b-banner-content.m-background {
  padding: 0;
}
@media screen and (max-width: 767px) {
  .b-banner.m-beneath-image, .b-banner.m-beneath-image-left, .b-banner.m-beneath-image-right {
    flex-direction: column;
  }
}
.b-banner.m-beneath-image .b-banner-content, .b-banner.m-beneath-image-left .b-banner-content, .b-banner.m-beneath-image-right .b-banner-content {
  position: relative;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .b-banner.m-beneath-image .b-banner-content, .b-banner.m-beneath-image-left .b-banner-content, .b-banner.m-beneath-image-right .b-banner-content {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .b-banner.m-beneath-image .b-banner-picture, .b-banner.m-beneath-image-left .b-banner-picture, .b-banner.m-beneath-image-right .b-banner-picture {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .b-banner.m-beneath-image-left .b-banner-content-wrapper, .b-banner.m-beneath-image-right .b-banner-content-wrapper {
    justify-content: center;
  }
}
.m-vertical-center .b-banner {
  align-items: center;
}
.m-vertical-bottom .b-banner {
  align-items: flex-end;
}
d .b-banner.m-beneath-image {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .b-banner.m-beneath-image-left {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .b-banner.m-beneath-image-mobile {
    flex-direction: column;
  }
  .b-banner.m-beneath-image-mobile .b-banner-content {
    position: static;
    margin: 0;
    width: 100%;
  }
}
.b-banner-image_container {
  background: #EBEBEB;
  display: block;
  overflow: hidden;
  padding-bottom: var(--banner-image-proportions-xl, 30%);
  position: relative;
  width: 100%;
}
@media screen and (max-width: 767px), screen and (min-width: 768px) and (max-width: 1023px) {
  .b-banner-image_container {
    background: #EBEBEB;
    display: block;
    overflow: hidden;
    padding-bottom: var(--banner-image-proportions-sm, 72.25%);
    position: relative;
    width: 100%;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .b-banner-image_container {
    background: #EBEBEB;
    display: block;
    overflow: hidden;
    padding-bottom: var(--banner-image-proportions-md, 56.25%);
    position: relative;
    width: 100%;
  }
}
.b-banner__noimage .b-banner-content {
  position: static;
}
.b-banner__noimage .experience-region:empty {
  display: none;
}
@media screen and (min-width: 768px) {
  .b-banner-content-wrapper {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
}
.m-vertical-top .b-banner-content-wrapper {
  align-items: flex-start;
  align-content: flex-start;
}
.m-vertical-middle .b-banner-content-wrapper {
  align-items: center;
  align-content: center;
}
.m-vertical-bottom .b-banner-content-wrapper {
  align-items: flex-end;
  align-items: flex-end;
}
.b-banner-image {
  bottom: 0;
  color: #EBEBEB;
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
}
.b-banner-content {
  position: absolute;
  font-size: 1.125rem;
  max-width: 100%;
  padding: 3.75rem;
}
@media screen and (max-width: 767px) {
  .b-banner-content {
    padding: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .b-banner-content.m-background {
    padding: 0.9375rem;
  }
}
@media screen and (max-width: 767px) {
  .b-banner-content {
    left: 0;
    right: 0;
  }
}
@media screen and (max-width: 767px) {
  .m-full-width .b-banner-content {
    left: 0;
    right: 0;
  }
}
@media screen and (min-width: 768px) {
  .b-banner-content {
    width: var(--banner-content-width);
  }
}
.b-banner-content.m-text_left {
  text-align: left;
}
.b-banner-content.m-text_center {
  text-align: center;
}
.b-banner-content.m-text_right {
  text-align: right;
}
.b-banner-content .m-background {
  background: var(--banner-background-image) no-repeat;
  background-position: var(--banner-content-background-img-pos);
  background-size: cover;
  padding: 2rem 2.25rem;
}
@media screen and (max-width: 767px) {
  .b-banner-content .m-background {
    padding: 2rem 1.5rem;
  }
}
.b-banner-content.m-full_height {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .b-banner-content.m-full_height {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
  }
}
@media screen and (max-width: 767px) {
  .b-banner-content.m-full_height {
    position: static;
  }
}
@media screen and (max-width: 767px) {
  .b-banner-content .b-text_block {
    padding: 0;
  }
}
.b-banner-title {
  font-size: 1.25rem;
  font-stretch: condensed;
  font-weight: 700;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .b-banner-title {
    font-size: 1.6875rem;
  }
}
@media screen and (min-width: 1024px) {
  .b-banner-title {
    font-size: 1.875rem;
  }
}
.b-banner-description {
  line-height: normal;
}
.b-banner-button {
  margin-top: 1.875rem;
}
.b-banner-picture::after {
  content: "";
  position: relative;
  padding-bottom: var(--height);
  display: block;
}
.b-banner .b-link,
.b-banner .b-button {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .m-beneath-image-mobile.m-background {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  .m-beneath-image-mobile .b-banner-content.m-background {
    padding: 0px;
  }
}

@media screen and (min-width: 768px) {
  .b-banner__elements-stacked .experience-component {
    flex-basis: 100%;
  }
}
@media screen and (min-width: 768px) {
  .b-banner-content-wrapper {
    margin-left: -12px;
    margin-right: -12px;
  }
}
.b-banner .experience-assets-textBlock,
.b-banner .experience-assets-imageTile {
  flex-basis: 100%;
}
@media screen and (min-width: 768px) {
  .b-banner .b-subelements {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .b-banner .b-banner-content-image-wrapper,
.b-banner .b-text_block,
.b-banner .b-button,
.b-banner .b-link {
    margin-left: 12px;
    margin-right: 12px;
  }
}
@media screen and (min-width: 768px) {
  .b-banner .b-text_block .b-subelements {
    margin-left: -12px;
    margin-right: -12px;
  }
}
.b-banner .b-banner__elements-center .b-subelements {
  justify-content: center;
  width: 100%;
}
.b-banner .b-banner__elements-right .b-subelements {
  justify-content: flex-end;
  width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-banner .b-banner__elements-center-tablet .b-subelements {
    justify-content: center;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-banner .b-banner__elements-right-tablet .b-subelements {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 1280px) {
  .b-banner__elements-stacked.b-banner__elements-left .b-button, .b-banner__elements-stacked.b-banner__elements-left .b-link {
    margin-right: auto;
  }
}
@media screen and (min-width: 1280px) {
  .b-banner__elements-stacked.b-banner__elements-right .b-button, .b-banner__elements-stacked.b-banner__elements-right .b-link {
    margin-left: auto;
  }
}
@media screen and (min-width: 1280px) {
  .b-banner__elements-stacked.b-banner__elements-center .b-button, .b-banner__elements-stacked.b-banner__elements-center .b-link {
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-banner__elements-stacked.b-banner__elements-left-tablet .b-button, .b-banner__elements-stacked.b-banner__elements-left-tablet .b-link {
    margin-right: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-banner__elements-stacked.b-banner__elements-right-tablet .b-button, .b-banner__elements-stacked.b-banner__elements-right-tablet .b-link {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .b-banner__elements-stacked.b-banner__elements-center-tablet .b-button, .b-banner__elements-stacked.b-banner__elements-center-tablet .b-link {
    margin-left: auto;
    margin-right: auto;
  }
}

.m-beneath-image {
  flex-wrap: wrap;
}
.m-beneath-image .b-banner-content {
  width: 100%;
  padding: 10px 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .m-beneath-image .b-banner-content {
    padding: 10px 0 0;
  }
}

@media screen and (min-width: 768px) {
  .l-layout-col-multiply .b-banner-content {
    padding: 0.625rem 0.75rem;
  }
  .l-layout-col-multiply .b-banner-content .m-background {
    padding: 0.625rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .l-layout .b-carousel-tablet-modify .b-banner-content {
    padding: 0.625rem 0.75rem;
  }
  .l-layout .b-carousel-tablet-modify .b-banner-content .m-background {
    padding: 0.625rem;
  }
}

@media screen and (min-width: 1280px) {
  .l-layout .b-carousel-desktop-modify .b-banner-content {
    padding: 0.625rem 0.75rem;
  }
  .l-layout .b-carousel-desktop-modify .b-banner-content .m-background {
    padding: 0.625rem;
  }
}

.m-page_designer .c-video-feature-banner {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  height: auto;
  min-height: auto;
  margin-bottom: 0;
  max-height: 100%;
}
.m-page_designer .c-video-feature-banner__video__wrapper {
  position: static;
  width: 100%;
}
.m-page_designer .c-video-feature-banner__video__wrapper::after {
  display: none;
}
.m-page_designer .c-video-feature-banner__wrapper {
  width: 100%;
  z-index: 1;
}
.m-page_designer .c-video-feature-banner__video {
  height: 100%;
}
.m-page_designer .b-carousel-slide .c-video-feature-banner__video {
  cursor: pointer;
}

.m-page_designer .signup-component-header {
  min-height: 22px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 22px;
  text-align: center;
  width: 100%;
}
.m-page_designer .signup-component-title {
  min-height: 40px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 40px;
  text-align: center;
  margin: 4px 0 0 0;
}
.m-page_designer .signup-component-message {
  min-height: 24px;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  margin-top: 40px;
}
.m-page_designer .signup-component-email {
  box-sizing: border-box;
  min-height: 45px;
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 1px;
  padding: 11px 12px;
}
.m-page_designer .signup-component-email:focus, .m-page_designer .signup-component-email:focus-visible {
  border: 2px solid rgba(0, 99, 186, 0.25);
  box-shadow: 0 0 2px 0 rgba(59, 163, 255, 0.5);
}
.m-page_designer .signup-component-email.is-invalid {
  border: 1px solid #d31717;
}
.m-page_designer .signup-component-submit {
  min-height: 48px;
  box-sizing: border-box;
  width: 100%;
  border-radius: 8px;
  margin-top: 44px;
  float: left;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 14px;
  text-align: center;
}
.m-page_designer label {
  min-height: 22px;
  min-width: 107px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0;
  line-height: 22px;
  margin-top: 24px;
}
.m-page_designer .signup-component-bg {
  width: 100%;
}
.m-page_designer .l-layout-2up .signup-component-container {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .m-page_designer .l-layout-2up .signup-component-container {
    max-width: 304px;
  }
}
@media screen and (min-width: 1024px) {
  .m-page_designer .l-layout-2up .signup-component-container {
    max-width: 424px;
  }
}
.m-page_designer .l-layout-7030 > .l-layout-col2 .signup-component-container,
.m-page_designer .l-layout-3070 > .l-layout-col1 .signup-component-container {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .m-page_designer .l-layout-7030 > .l-layout-col2 .signup-component-container,
.m-page_designer .l-layout-3070 > .l-layout-col1 .signup-component-container {
    max-width: 100%;
    padding: 56px 20px 0 20px;
  }
}
@media screen and (min-width: 1024px) {
  .m-page_designer .l-layout-7030 > .l-layout-col2 .signup-component-container,
.m-page_designer .l-layout-3070 > .l-layout-col1 .signup-component-container {
    max-width: 100%;
  }
}
.m-page_designer .l-layout-7030 .l-layout-wrapper:has(.experience-assets-signupForm),
.m-page_designer .l-layout-3070 .l-layout-wrapper:has(.experience-assets-signupForm) {
  grid-gap: 0;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .m-page_designer .l-layout-7030 .l-layout-wrapper:has(.experience-assets-signupForm),
.m-page_designer .l-layout-3070 .l-layout-wrapper:has(.experience-assets-signupForm) {
    display: block;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .m-page_designer .l-layout-2up form,
.m-page_designer .l-layout-7030 > .l-layout-col2 form,
.m-page_designer .l-layout-3070 > .l-layout-col1 form {
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    align-items: flex-start;
  }
}
.m-page_designer .signup-component-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  padding: 40px 0 48px 0;
  min-height: 594px;
  display: flex;
  flex-flow: row wrap;
  max-width: 335px;
  align-items: flex-start;
}
@media screen and (min-width: 768px) {
  .m-page_designer .signup-component-container {
    min-height: 562px;
    max-width: 424px;
    padding: 56px 0 64px 0;
  }
}
@media screen and (min-width: 1024px) {
  .m-page_designer .signup-component-container {
    min-height: 594px;
    padding: 72px 0 69px 0;
  }
}
.m-page_designer .signup-component-theme-dark {
  color: #FFF;
}
.m-page_designer .signup-component-theme-light {
  color: #434343;
}
.m-page_designer .signup-component-disclaimer {
  min-height: 38px;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 19px;
  position: relative;
  top: 12px;
}
.m-page_designer .signup-component-disclaimer a {
  font-weight: 600;
}
.m-page_designer .signup-component-disclaimer a:hover {
  text-decoration: underline;
}
.m-page_designer .signup-component-disclaimer-dark {
  color: #FFF;
}
.m-page_designer .signup-component-disclaimer-light {
  color: #434343;
}
.m-page_designer .signup-component-disclaimer-dark a {
  color: #FFF;
}
.m-page_designer .signup-component-disclaimer-light a {
  color: #1973c1;
}
.m-page_designer .signup-component-email-box {
  min-height: 192px;
}
.m-page_designer .signup-form-component {
  min-height: 549px;
}
@media screen and (min-width: 768px) {
  .m-page_designer .signup-form-component {
    min-height: 562px;
  }
}
@media screen and (min-width: 1024px) {
  .m-page_designer .signup-form-component {
    min-height: 594px;
  }
}
.m-page_designer .signup-component-prompt.alert-danger {
  margin-top: 24px;
}
.m-page_designer .signup-component-prompt.alert-success {
  margin-top: 40px;
}

/*
    Page designer accordion component
*/
.b-accordion-component {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.b-accordion-component .b-accordion-wrapper {
  display: flex;
  flex-flow: row wrap;
  border: 1px #dedede solid;
  border-radius: 6px;
}
.b-accordion-component .b-accordion-wrapper.b-component-wrapper {
  justify-content: center;
}
.b-accordion-component .experience-region {
  width: 100%;
}
.b-accordion-component .experience-assets-accordionItem {
  border-top: 1px solid #dedede;
  margin: 0 16px;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component .experience-assets-accordionItem {
    margin: 0;
  }
}
.b-accordion-component .experience-assets-accordionItem:first-child {
  border-top: none;
}
.b-accordion-component--title {
  color: #434343;
  background-color: #f8f8f8;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  width: 100%;
  letter-spacing: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #dedede;
  border-radius: 6px 6px 0 0;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component--title {
    padding: 16px 24px;
  }
}
.b-accordion-component-item.collapsible-xs .title {
  line-height: 24px;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component-item.collapsible-xs .title {
    line-height: 28px;
  }
}
.b-accordion-component-item.active .b-accordion-component-item--body {
  display: block;
}
.b-accordion-component-item.active .b-accordion-component-item--title {
  background-image: url("../../images/img-accordion-arrow-active.svg");
  padding-bottom: 16px;
}
.b-accordion-component-item--title {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  width: 100%;
  background-image: url("../../images/img-accordion-arrow.svg");
  background-repeat: no-repeat;
  background-position: right center;
  border: none;
  background-color: transparent;
  padding: 20px 28px 20px 0;
  text-align: left;
  position: relative;
  color: #434343;
}
.b-accordion-component-item--title::after {
  background-image: url("../../images/img-accordion-arrow-active.svg");
  content: "";
  width: 1px;
  height: 1px;
  position: absolute;
  visibility: hidden;
}
@media screen and (min-width: 1024px) {
  .b-accordion-component-item--title {
    padding: 20px 28px 20px 0;
  }
}
@media screen and (min-width: 1280px) {
  .b-accordion-component-item--title {
    font-size: 18px;
    line-height: 28px;
    padding: 20px 58px 21px 24px;
    background-size: 20px 20px;
    background-position: calc(100% - 30px) center;
  }
}
.b-accordion-component-item--body {
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0;
  width: 100%;
  display: none;
  padding: 0 0 32px 0;
  color: #434343;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component-item--body {
    padding: 0 24px 44px 24px;
    font-size: 16px;
    line-height: 24px;
  }
}
.b-accordion-component-item--body p {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 22px;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component-item--body p {
    font-size: 16px;
    line-height: 24px;
  }
}
.b-accordion-component-item--body p + p {
  margin: 16px 0 0 0;
}
.b-accordion-component-item--body a {
  color: #1973C1;
  font-weight: 600;
}
.b-accordion-component-item--body a:hover {
  color: #1973C1;
}
.b-accordion-component-item--body ul {
  margin: 0 0 16px 0;
  padding: 0 0 0 34px;
}
.b-accordion-component-item--body ul li {
  margin: 8px 0 0 0;
  font-size: 15px;
  line-height: 22px;
}
@media screen and (min-width: 1280px) {
  .b-accordion-component-item--body ul li {
    font-size: 16px;
    line-height: 24px;
  }
}
.b-accordion-component-item--body ul li:first-child {
  margin: 16px 0 0 0;
}