@charset "UTF-8";
input:focus,
button:focus,
textarea:focus,
select:focus,
details:focus,
[href]:focus,
[tabindex]:not([tabindex="-1"]):focus,
[contenteditable="true"]:focus {
  outline: 2px solid #0f7fff !important;
  outline-offset: 1px !important; }

input:focus + label {
  outline: 2px solid #0f7fff !important;
  outline-offset: 1px !important; }

meta.foundation-version {
  font-family: "/5.5.3/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0; }

meta.foundation-mq-small-only {
  font-family: "/only screen and (max-width: 551px)/";
  width: 0; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:551px)/";
  width: 551px; }

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:551px) and (max-width:801px)/";
  width: 551px; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:801px)/";
  width: 801px; }

meta.foundation-mq-large-only {
  font-family: "/only screen and (min-width:801px) and (max-width:1261px)/";
  width: 801px; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:1261px)/";
  width: 1261px; }

meta.foundation-mq-xlarge-only {
  font-family: "/only screen and (min-width:1261px) and (max-width:1681px)/";
  width: 1261px; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:1681px)/";
  width: 1681px; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

.u-block {
  display: block !important; }

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100% !important; }

.u-hidden {
  display: none !important; }

.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.is-srOnly {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.u-textAlignCenter {
  text-align: center !important; }

.u-textAlignLeft {
  text-align: left !important; }

.u-textAlignRight {
  text-align: right !important; }

.u-textBreak {
  word-wrap: break-word !important; }

.u-textInheritColor {
  color: inherit !important; }

.u-textKern {
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "kern" 1 !important;
  font-kerning: normal !important; }

.u-textLead {
  line-height: 1.6 !important;
  font-size: 1.1em !important; }

.u-textNoWrap {
  white-space: nowrap !important; }

.u-textTruncate {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; }

.u-fontSmoothing {
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

*,
*:before,
*:after {
  box-sizing: border-box; }

html,
body {
  height: 100%; }

body {
  background: white;
  color: #4e4e4e;
  cursor: auto;
  margin: 0;
  padding: 0;
  position: relative; }

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

a:hover {
  cursor: pointer; }

figure {
  margin: 0 0 1.5rem; }

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle; }

img {
  -ms-interpolation-mode: bicubic; }

button {
  background: none;
  border: 0; }
  button:active, button:focus {
    box-shadow: none;
    outline: none; }

textarea {
  height: auto;
  min-height: 50px; }

select {
  width: 100%; }

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

html {
  font-size: 14px; }
  @media (min-width: 551px) {
    html {
      font-size: 14px; } }
  @media (min-width: 801px) {
    html {
      font-size: 14px; } }
  @media (min-width: 1261px) {
    html {
      font-size: 14px; } }

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.5; }

a {
  color: #8cc640;
  line-height: inherit;
  text-decoration: underline; }
  a:hover, a:focus {
    color: #a5a5a5; }

p {
  margin-bottom: 1.5rem; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #4e4e4e;
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-weight: 700;
  letter-spacing: 0.25px;
  margin-bottom: 0.78571rem; }
  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small {
    color: #989898;
    font-size: 60%;
    line-height: 0; }

h1 {
  font-size: 42px; }

h2 {
  font-size: 32px; }

h3 {
  font-size: 21px; }

h4 {
  font-size: 20px; }

h5 {
  font-size: 15px; }

h6 {
  font-size: 13px; }

.subheader {
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 0.78571rem; }

hr {
  border: solid #ebebeb;
  border-width: 1px 0 0;
  clear: both;
  height: 0;
  margin: 2rem 0 1.92857rem; }

em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: 700;
  line-height: inherit; }

small {
  font-size: 60%;
  line-height: inherit; }

ul,
ol,
dl {
  list-style-position: outside;
  margin-bottom: 1.5rem; }

ul ul,
ul ol,
ol ul,
ol ol {
  margin-left: 1.2rem;
  margin-bottom: 0; }

ul {
  margin-left: 1.15rem; }

ol {
  margin-left: 1.15rem; }

dl dt {
  font-weight: 700;
  margin-bottom: 0.35714rem; }

dl dd {
  margin-bottom: 1.5rem; }

abbr,
acronym {
  border-bottom: 1px dotted #dfdfdf;
  color: #4e4e4e;
  cursor: help;
  font-size: 90%;
  text-transform: uppercase; }

abbr {
  text-transform: none; }

blockquote { }

blockquote,
blockquote p {
  font-size: 21px;
  line-height: 29px; }

cite {
  color: #a5a5a5;
  display: block;
  font-size: 1rem; }

.icon {
  height: 1.14286rem;
  width: 1.14286rem;
  display: inline-block;
  vertical-align: middle; }
  .icon svg {
    display: inline-block;
    fill: #424242;
    height: 100%;
    vertical-align: top;
    width: 100%; }

/*doc
---
title: Lists
name: lists
category: Elements
---

*/
/*doc
---
title: Inline List
name: inline_list
category: Elements
parent: lists
---


```html_example
<ul class="inlineList">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li><a href="#">Link 5</a></li>
</ul>
```
##### Inline list settings
```sass_file_example
src/settings/foundation/inlineList/_settings.scss
```

*/
.inlineList {
  list-style: none;
  margin-top: 0;
  margin-bottom: 1.21429rem;
  margin-left: -1.57143rem;
  margin-right: 0;
  overflow: hidden;
  padding: 0; }
  .inlineList > li {
    display: block;
    float: left;
    list-style: none;
    margin-left: 1.57143rem; }
    .inlineList > li > * {
      display: block; }

/*doc
---
title: Tables
name: tables
category: Elements
---


```html_example
<table class="table">
    <thead class="table-thead">
        <tr>
            <th>Table Header</th>
            <th>Table Header</th>
            <th class="table-header--numericData" scope="column">Totals</th>
        </tr>
    </thead>
    <tbody class="table-tbody">
        <tr>
            <td>Content Goes Here</td>
            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
            <td class="table-cell--numericData">$10</td>
        </tr>
    </tbody>
    <tfoot class="table-tfoot">
        <tr>
            <td class="table-cell--numericData" colspan="2">Subtotal:</td>
            <td class="table-cell--numericData"><strong>$60</strong></td>
        </tr>
    </tfoot>
</table>
```
##### Tables settings
```sass_file_example
src/settings/foundation/tables/_settings.scss
```

*/
.table {
  border: solid 1px #ebebeb;
  margin-bottom: 2rem;
  table-layout: auto;
  width: 100%; }
  .table thead {
    background: #e5e5e5; }
    .table thead tr th,
    .table thead tr td {
      font-size: 1rem;
      font-weight: 700;
      padding: 0.78571rem 1.5rem; }
  .table tr th,
  .table tr td {
    padding: 0.78571rem 1.5rem;
    text-align: left; }
  .table thead tr th,
  .table tfoot tr th,
  .table tfoot tr td,
  .table tbody tr th,
  .table tbody tr td,
  .table tr td {
    display: table-cell; }
  .table th.table-header--numericData,
  .table td.table-cell--numericData {
    text-align: right; }

.table-thead {
  border: 1px solid #ebebeb; }

.table-tfoot {
  border: 1px solid #ebebeb; }

.table-tbody tr {
  border-bottom: 1px solid #ebebeb; }
  .table-tbody tr:last-child {
    border-bottom: 0; }

/*doc
---
title: Buttons
name: button
category: Components
---

These are all the button

```sass_file_example
src/settings/foundation/buttons/_settings.scss
```

```html_example
<button class="button">Button</button>

<input type="submit" class="button" value="Button">

<a class="button" role="button" href="#">Button</a>
```

*/
.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: #424242;
  border-color: #424242;
  color: white;
  font-size: 1rem;
  padding: 1rem 2.78571rem;
  border-radius: 0;
  outline: none;
  vertical-align: middle; }
  .button:hover, .button:focus, .button.is-active, .button.active {
    background-color: #0f0f0f;
    border-color: #424242;
    color: white; }
  .button:active {
    background-color: #0f0f0f;
    border: 0 solid #424242;
    color: white; }
  .button:focus, .button.is-active, .button.active {
    outline: none; }
  @media (min-width: 481px) {
    .button + .button {
      margin-left: 0.78571rem; } }

/*doc
---
title: Button states
name: button_states
category: Components
parent: button
---

```html_example
<button class="button button--primary">Primary Button</button>

<button class="button">Secondary / Default Button</button>

<button class="button button--tertiary">Tertiary Button</button>

<button class="button button--action">Call-to-Action Button</button>
```
    */
.button--primary {
  background-color: #333333;
  border-color: #333333;
  color: white; }
  .button--primary:hover, .button--primary:focus, .button--primary.is-active, .button--primary.active {
    background-color: #333333;
    border-color: #333333;
    color: white; }
  .button--primary:active {
    background-color: #333333;
    border: 0 solid #333333;
    color: white; }

.button[disabled] {
  background-color: #dadada;
  border-color: #dadada;
  color: white;
  cursor: default; }

/*doc
---
title: Button sizes
name: button_sizes
category: Components
parent: button
---

```html_example
<button class="button button--large">Large</button>

<button class="button">Default</button>

<button class="button button--small">Small</button>

<button class="button button--tiny">Tiny</button>
```

And a special case, slab, which takes the full width of it's container and any
size modifier

```html_example
<button class="button button--slab">Slab</button>

<button class="button button--slab button--large">Slab</button>
```

*/
.button--large {
  font-size: 15px; }

.button--small {
  font-size: 13px;
  padding: 0.57143rem 1.5rem; }

.button--tiny { }

.button--slab {
  display: block;
  width: 100%; }
  .button + .button--slab {
    margin-left: 0; }

.button--icon {
  font-size: 1rem;
  padding: 0.78571rem 0.78571rem; }
  .button--icon svg {
    fill: #a3a3a3; }

/*doc
---
title: Button Groups
name: button_groups
category: Components
parent: button
---


```html_example
<div class="buttonGroup">
    <button class="button">Button1</button>
    <button class="button">Button2</button>
    <button class="button">Button3</button>
</div>
```
##### Button group settings
```sass_file_example
src/settings/bigcommerce/buttonGroup/_settings.scss
```

*/
.buttonGroup {
  display: inline-block; }
  .buttonGroup > .button {
    border-radius: 0;
    border-right-width: 0;
    float: left;
    margin-left: 0; }
    .buttonGroup > .button:first-child {
      border-bottom-left-radius: 0;
      border-top-left-radius: 0; }
    .buttonGroup > .button:last-child {
      border-bottom-right-radius: 0;
      border-right-width: 0;
      border-top-right-radius: 0; }

/*doc
---
title: Dropdowns
name: dropdown
category: Components
---

Dropdowns are simple lists that can appear next to any element that can trigger a click event.
They can be used by buttons, icons, links and other similar items.

```sass_file_example
src/settings/foundation/dropdown/_settings.scss
```
```html_example
<ul class="dropdown-menu" style="display:block; left: 0;">
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">One</a></li>
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">Two</a></li>
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">Three</a></li>
</ul>
```
*/
.dropdown-menu {
  display: none;
  left: -9999px;
  list-style: none;
  margin-left: 0;
  position: absolute;
  background: #f9f9f9;
  font-size: 1rem;
  height: auto;
  width: 100%;
  z-index: 89;
  max-width: 200px; }
  .dropdown-menu.open {
    display: block; }
  .dropdown-menu > *:first-child {
    margin-top: 0; }
  .dropdown-menu > *:last-child {
    margin-bottom: 0; }

.dropdown-menu--content {
  display: none;
  left: -9999px;
  list-style: none;
  margin-left: 0;
  position: absolute;
  background: #f9f9f9;
  font-size: 1rem;
  height: auto;
  padding: 0.78571rem;
  width: 100%;
  z-index: 89;
  max-width: 200px; }
  .dropdown-menu--content.open {
    display: block; }
  .dropdown-menu--content > *:first-child {
    margin-top: 0; }
  .dropdown-menu--content > *:last-child {
    margin-bottom: 0; }

.dropdown-menu-item {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.35714rem 0.71429rem; }
  .dropdown-menu-item a {
    display: block;
    padding: 0.35714rem; }
  .dropdown-menu-item a {
    margin: -0.35714rem; }

/*doc
---
title: Forms
name: forms
category: Forms
---

##### Foundation Forms settings
```sass_file_example
src/settings/foundation/forms/_settings.scss
```

##### Citadel Forms settings
```sass_file_example
src/settings/foundation/forms/_settings.scss
```

*/
/*doc
---
title: Form basics
name: 01forms_basics
category: Forms
parent: forms
---

Citadel comes with styling for most form input types and some custom ones. To start
things off a basic, semantic mark-up structure should be adhered too, including
the `form`, `fieldset` and `legend` elements where ever possible.

```html_example
<form action="#" class="form">
    <fieldset class="form-fieldset">
        <legend class="form-legend">Form legend</legend>
    </fieldset>
</form>
```

*/
.form {
  margin: 0 0 1.5rem; }

.form-fieldset {
  border-width: 0;
  margin: 0;
  padding: 0; }

.form-legend {
  background: transparent;
  border: solid #999999;
  border-width: 0 0 1px;
  display: block;
  line-height: 32px;
  margin-bottom: 0.78571rem;
  padding: 0;
  width: 100%; }

/*doc
---
title: Form labels and inputs
name: 03forms_basics
category: Forms
parent: forms
---

Inputs of all types should be associated with a label which has a `for` attribute

```html_example
<div class="form-field">
    <label class="form-label" for="input1">Input Label</label>
    <input class="form-input" id="input1" type="text" placeholder="Placeholder text">
</div>
<div class="form-field">
    <label class="form-label" for="input2">Number Label</label>
    <input class="form-input" id="input2" type="number" placeholder="Number input">
</div>
<div class="form-field">
    <label class="form-label" for="input3">Textarea Label <small>additional context</small></label>
    <textarea class="form-input" id="input3" placeholder="Placeholder text" rows="3"></textarea>
</div>
```
*/
.form-label {
  color: #4e4e4e;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem; }
  .form-label small {
    color: #989898;
    font-size: 0.71429rem;
    text-transform: uppercase;
    vertical-align: bottom; }

.form-input {
  appearance: none;
  background-color: white;
  border-color: #cccccc;
  border-style: solid;
  border-width: 1px;
  border-radius: 0;
  color: #4e4e4e;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  height: 3rem;
  margin: 0;
  padding: 0.75rem 1rem;
  transition: border-color 100ms ease-out;
  width: 100%;
  /*doc
---
title: Disabled inputs
name: 04forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label" for="disabled_input1">Input Label</label>
    <input class="form-input" id="disabled_input1" disabled type="text" value="Disabled text">
</div>

<div class="form-field">
    <label class="form-label" for="disabled_input2">Input Label</label>
    <input class="form-input" id="disabled_input2" readonly type="text" value="Readonly text">
</div>
```
*/ }
  .form-input:disabled {
    background-color: white;
    color: #a5a5a5;
    cursor: not-allowed; }
  .form-input[readonly] {
    background-color: #e5e5e5;
    border-color: #999999;
    color: dimgray;
    cursor: text; }
  .form-input:focus {
    border-color: #999999;
    outline: none; }
  .form-input[rows] {
    height: auto; }
  .form-input[type="search"] {
    box-sizing: border-box; }
  .form-input::-webkit-input-placeholder {
    color: #a5a5a5; }
  .form-input::-ms-clear {
    height: 0;
    width: 0; }
  .form-input::-moz-placeholder {
    color: #a5a5a5; }
  .form-input:-ms-input-placeholder {
    color: #a5a5a5; }

/*doc
---
title: Selects
name: 05forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label" for="select1">Native Select label</label>
    <select class="form-select" name="select1" id="select1">
        <option>Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
```
*/
.form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: white;
  border-radius: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
  background-position: 100% center;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 1px;
  border-color: #cccccc;
  color: #4e4e4e;
  font-family: inherit;
  font-size: 1rem;
  line-height: normal;
  padding: 0.75rem;
  border-radius: 0;
  cursor: pointer;
  height: 3rem;
  margin: 0;
  outline: 0; }
  .form-select::-ms-expand {
    display: none; }
  .form-select.radius {
    border-radius: 0; }
  .form-select:focus {
    border-color: #999999; }
  .form-select:disabled {
    background-color: white;
    cursor: not-allowed; }
  .form-select:focus {
    border-color: #999999; }

/*doc
---
title: Form Panels and Layouts
name: 13forms_layouts
category: Forms
parent: forms
---

We provide a couple of component styles to layout forms.

The more `form-field` components you place in the `form-row`, the smaller the columns gets.
Columns are equal length, and calculated automatically by Flexbox by default.

It's the same mark-up but depending on your browser support needs, you can switch
between a flexbox layout or a more traditional grid based layout by setting
`$formRow-modernBrowsers` to `false`.

The grid based layout of `form-feilds` will require the use of modifiers to calculate
the correct widths. We support `form-field--half`, `form-field--third` and
`form-field--quarter`

```html_example
<form action="#" class="form">
    <fieldset class="form-fieldset">
        <legend class="form-legend">Form legend</legend>
        <div class="form-body">
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
```
*/
.form-body {
  background-color: white;
  border: 1px solid #999999;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.13);
  margin-bottom: 1.5rem;
  max-width: none;
  padding: 1.5rem; }

.form-row {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto; }
  .form-row:before, .form-row:after {
    content: " ";
    display: table; }
  .form-row:after {
    clear: both; }
  .form-row .form-field {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    float: left;
    max-width: none; }
  @media (min-width: 551px) {
    .form-row--half .form-field {
      width: 50%; }
    .form-row--third .form-field {
      width: 33.33333%; }
    .form-row--quarter .form-field {
      width: 25%; } }

/*doc
---
title: Form Fields
name: 02forms_basics
category: Forms
parent: forms
---

Each form input should be wrapped in a `form-field`

```html_example
<div class="form-field">
</div>
```
*/
.form-field {
  display: block;
  margin: 0 0 2rem;
  max-width: none; }
  .form-field:before, .form-field:after {
    content: " ";
    display: table; }
  .form-field:after {
    clear: both; }

/*doc
---
title: Selects [multiple]
name: 06forms_basics
category: Forms
parent: forms
---

Styling of the select element with the multiple attribute

```html_example
<div class="form-field">
    <label class="form-label" for="multiselect1">Native Select Multiple label</label>
    <select class="form-select" multiple name="multiselect1" id="multiselect1">
        <option>Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>
```
*/
.form-select[multiple] {
  height: auto; }
  .form-select[multiple] option {
    padding: 5px; }

/*doc
---
title: Radios and Checkbox
name: 07forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label">Field label</label>
    <input class="form-checkbox" type="checkbox" id="check1">
    <label class="form-label" for="check1">Checkbox 1 label</label>
    <input class="form-checkbox" type="checkbox" id="check2">
    <label class="form-label" for="check2">Checkbox 2 label</label>
</div>
```

```html_example
<div class="form-field">
    <label class="form-label">Field label</label>
    <input class="form-radio" type="radio" name="radio_example" id="radio1">
    <label class="form-label" for="radio1">Radio 1 label</label>
    <input class="form-radio" type="radio" name="radio_example" id="radio2">
    <label class="form-label" for="radio2">Radio 2 label</label>
</div>
```
*/
.form-checkbox,
.form-radio {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .form-checkbox + .form-label,
  .form-radio + .form-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 0.35714rem;
    padding-left: 1.85714rem;
    position: relative;
    vertical-align: baseline;
    width: 100%; }
    .form-checkbox + .form-label::before, .form-checkbox + .form-label::after,
    .form-radio + .form-label::before,
    .form-radio + .form-label::after {
      content: "";
      display: block;
      position: absolute;
      transition: all 50ms ease-out; }
    .form-checkbox + .form-label::before,
    .form-radio + .form-label::before {
      background-color: white;
      border: solid #8f8f8f;
      border-width: 1px;
      height: 1.14286rem;
      left: 0;
      top: 0;
      width: 1.14286rem; }
    .form-checkbox + .form-label::after,
    .form-radio + .form-label::after {
      height: 1rem;
      left: 1px;
      opacity: 0;
      top: 1px;
      transform: scale(0);
      width: 1rem; }

.form-checkbox:checked + .form-label::after,
.form-radio:checked + .form-label::after {
  opacity: 1;
  transform: scale(1); }

.form-checkbox[disabled] + .form-label,
.form-radio[disabled] + .form-label {
  cursor: default; }
  .form-checkbox[disabled] + .form-label::before,
  .form-radio[disabled] + .form-label::before {
    background-color: white; }

.form-checkbox + .form-label::before {
  border-radius: 0; }

.form-checkbox + .form-label::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='rgba(51, 51, 51, 0.999)' /%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  color: rgba(51, 51, 51, 0.999);
  content: "";
  font-size: 1rem;
  line-height: 1;
  text-align: center; }

.form-radio + .form-label::before {
  border-radius: 50%; }

.form-radio + .form-label::after {
  background: rgba(51, 51, 51, 0.999);
  border: 3px solid white;
  border-radius: 1rem; }

/*doc
---
title: Inputs with Extras
name: 08forms_inputextras
category: Forms
parent: forms
---

Sometimes inputs need inline actions. An inline button for a search box for example.

```html_example
<div class="form-field">
    <label class="form-label" for="input9">Input with action</label>
    <input class="form-input has-action" type="search" id="input9">
    <button class="button button--icon button--inputAction">
        <span class="u-hiddenVisually">Search</span>
        <icon glyph="ic-search" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></icon>
    </button>
</div>
```
*/
.form-input.has-action {
  float: left;
  padding-right: 2.85714rem; }
  .form-input.has-action + .button--inputAction {
    background: transparent;
    border: 0;
    border-radius: 0 0 0 0;
    float: left;
    height: 2.85714rem;
    margin: 0.07143rem 0 0 -2.92857rem;
    width: 2.85714rem; }

/*doc
---
title: Inputs with Icons
name: 09forms_inputicons
category: Forms
parent: forms
---

Sometimes inputs need to display an informative icon to convey a certain meaning, like secure.

```html_example
<div class="form-field">
    <label class="form-label" for="input99">Input with icon</label>
    <input class="form-input has-icon" type="search" id="input9">
    <icon glyph="ic-lock" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></svg></icon>
</div>
```
*/
.form-input.has-icon {
  float: left;
  padding-right: 2.57143rem; }
  .form-input.has-icon + .icon {
    height: 3rem;
    margin-left: -2.57143rem;
    width: 1.42857rem; }

/*doc
---
title: Form PrefixPostfix
name: 10forms_prefixpostfix
category: Forms
parent: forms
---

PrefixPostfix

```html_example
<div class="form-field">
    <label class="form-label" for="input4">Prefixed Label <small>(Inc. tax)</small></label>
    <div class="form-prefixPostfix">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">AUD $</span>
        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input5">Postfixed Label</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="input5" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc2">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc2">KG</span>
    </div>
</div>
```

### PrefixPostfix with a button

```html_example
<div class="form-field">
    <label class="form-label" for="input6">Prefixed Button</label>
    <div class="form-prefixPostfix">
        <input class="button form-prefixPostfix-button--prefix" type="submit" value="Save">
        <input class="form-input" id="input6" type="text" placeholder="Placeholder text">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input7">Postfixed Button</label>
    <div class="form-prefixPostfix">
        <input class="form-input" id="input7" type="text" placeholder="Placeholder text">
        <input class="button form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
</div>
```
*/
.form-prefixPostfix {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }
  .form-prefixPostfix .form-input {
    flex: 1; }
  .form-prefixPostfix .button {
    height: 3rem; }

.form-prefixPostfix-input {
  border-radius: 0 0 0 0; }

.form-prefixPostfix-label {
  background-color: white;
  border: solid #999999;
  border-width: 1px;
  flex: 1;
  font-weight: 300;
  height: 3rem;
  line-height: normal;
  max-width: 6.42857rem;
  padding: 0.75rem;
  text-align: center; }

.form-prefixPostfix-label--prefix {
  border-radius: 0 0 0 0;
  border-width: 1px 0 1px 1px; }
  .form-prefixPostfix-label--prefix + .form-input {
    border-radius: 0 0 0 0; }

.form-prefixPostfix-label--postfix {
  border-radius: 0 0 0 0;
  border-width: 1px 1px 1px 0; }

.form-prefixPostfix-button--prefix {
  margin: 0 0.75rem 0 0; }

.form-prefixPostfix-button--postfix {
  margin: 0 0 0 0.75rem; }

/*doc
---
title: Form Switch
name: 11forms_switch
category: Forms
parent: forms
---

Switch

```html_example
<div class="form-field">
    <switch>
        <div class="switch">
            <input class="switch-checkbox" type="checkbox" id="switch-1" aria-describedby="switch-ariaDescription-2">
            <label class="switch-toggle" for="switch-1">
            </label>
            <span id="switch-ariaDescription-2" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--checked">
            <input class="switch-checkbox" type="checkbox" id="switch-1" aria-describedby="switch-ariaDescription-2">
            <label class="switch-toggle" for="switch-1">
            </label>
            <span id="switch-ariaDescription-2" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--checked">
            <input class="switch-checkbox" type="checkbox" id="switch-3" aria-describedby="switch-ariaDescription-4">
            <label class="switch-toggle" for="switch-3">
                <span class="switch-label">On</span>
            </label>
            <span id="switch-ariaDescription-4" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch">
            <input class="switch-checkbox" type="checkbox" id="switch-3" aria-describedby="switch-ariaDescription-4">
            <label class="switch-toggle" for="switch-3">
                <span class="switch-label">Off</span>
            </label>
            <span id="switch-ariaDescription-4" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--important">
            <span class="switch-description--off">Down for Maintenance</span>
            <input class="switch-checkbox" type="checkbox" id="switch-7" aria-describedby="switch-ariaDescription-8">
            <label class="switch-toggle" for="switch-7">
            </label>
            <span class="switch-description--on">Open</span>
            <span id="switch-ariaDescription-8" class="switch-ariaDescription">
                Switching this setting to off will enter your store into maintenance mode.
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--important switch--checked">
            <span class="switch-description--off">Down for Maintenance</span>
            <input class="switch-checkbox" type="checkbox" id="switch-7" aria-describedby="switch-ariaDescription-8">
            <label class="switch-toggle" for="switch-7">
            </label>
            <span class="switch-description--on">Open</span>
            <span id="switch-ariaDescription-8" class="switch-ariaDescription">
                Switching this setting to off will enter your store into maintenance mode.
            </span>
        </div>
    </switch>
</div>
```
*/
.switch-checkbox {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .switch-checkbox:focus + .switch-toggle {
    border-color: #a3a3a3;
    box-shadow: 0 0 4px rgba(163, 163, 163, 0.4); }

.switch-toggle {
  background-color: dimgray;
  border: 1px solid dimgray;
  border-radius: 2rem;
  cursor: pointer;
  display: inline-block;
  height: 2rem;
  position: relative;
  transition: all 100ms ease-out;
  vertical-align: middle;
  width: 4.28571rem; }
  .switch--important .switch-toggle {
    background-color: #f1a500;
    border-color: #f1a500; }
  .switch--checked .switch-toggle {
    background-color: #008a06;
    border-color: #008a06; }
  .switch--disabled .switch-toggle {
    background-color: #f9f9f9;
    border-color: #a5a5a5;
    cursor: default; }

.switch-toggle::before {
  background: white;
  border-radius: 1.4286rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  content: "";
  height: 1.4286rem;
  left: 0.21427rem;
  position: absolute;
  top: 0.21427rem;
  transition: all 100ms ease-out;
  width: 1.4286rem; }
  .switch--checked .switch-toggle::before {
    left: 2.49999rem; }

.switch-label {
  color: white;
  height: 26px;
  line-height: 1.92857;
  position: absolute;
  right: 0.42857rem;
  text-transform: uppercase;
  transition: all 100ms ease-out; }
  .switch--checked .switch-label {
    font-weight: 600;
    left: 0.42857rem;
    right: auto; }
  .switch--disabled .switch-label {
    color: dimgray; }

.switch-label--icon.icon {
  height: 1.85714rem;
  width: 1.85714rem; }
  .switch-label--icon.icon svg {
    height: 1.85714rem;
    width: 1.85714rem;
    fill: white; }
    .switch--disabled .switch-label--icon.icon svg {
      fill: dimgray; }

.switch-description--off {
  color: black;
  margin-right: 5px; }
  .switch--checked .switch-description--off {
    color: dimgray; }

.switch-description--on {
  color: dimgray;
  margin-left: 5px; }
  .switch--checked .switch-description--on {
    color: black; }

.switch-ariaDescription {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*doc
---
title: Form Actions
name: 14forms_actions
category: Forms
parent: forms
---

Forms require actions to submit or cancel (or what ever action a user should perform).
Form actions come in 2 flavours; normal and fixed.

```html_example
<div class="form-actions">
    <a href="#">Cancel</a>
    <button class="button">Reset</button>
    <button class="button button--primary">Submit</button>
</div>
```

### Form Actions --fixed

```html_example
<div class="form-actions form-actions--fixed">
    <a href="#">Cancel</a>
    <button class="button">Reset</button>
    <button class="button button--primary">Submit</button>
</div>
```
*/
.form-actions {
  background: none;
  border: 0;
  text-align: center; }
  @media (min-width: 481px) {
    .form-actions {
      text-align: left; } }

.form-actions > * {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%; }
  @media (min-width: 481px) {
    .form-actions > * {
      vertical-align: baseline;
      width: auto; } }

@media (min-width: 481px) {
  .form-actions--fixed {
    background: white;
    border-top: 1px solid #999999;
    bottom: 0;
    left: 0;
    padding: 1.5rem 2rem;
    position: fixed;
    right: 0;
    text-align: right;
    z-index: 20; } }

/*doc
---
title: Form Errors
name: 12forms_errors
category: Forms
parent: forms
---

Form inline errors

```html_example
<div class="form-field form-field--success">
    <label class="form-label" for="valid_simple">Valid field</label>
    <input class="form-input" id="valid_simple" type="text" value="Some Valid text">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-check-circle" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg></icon>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_simple">Invalid field</label>
    <input class="form-input" id="invalid_simple" type="text" value="Some Invalid text">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_simple">
                This is not a valid email address
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--warning">
    <label class="form-label" for="warning_simple">Warning field</label>
    <input class="form-input" id="warning_simple" type="text" value="Text that generated a Warning">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="warning_simple">
                Did you mean…
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_select">Select label</label>
    <select class="form-select" name="invalid_select" id="invalid_select">
        <option value="Please select a value">Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_select">
                You must select a value
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label">Checkbox label</label>
    <input class="form-checkbox" type="checkbox" id="invalid_check1">
    <label class="form-label" for="invalid_check1">Checkbox 1 label</label>
    <input class="form-checkbox" type="checkbox" id="invalid_check2">
    <label class="form-label" for="invalid_check2">Checkbox 2 label</label>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage">
                Please select one or more
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label">Radio label</label>
    <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio1">
    <label class="form-label" for="invalid_radio1">Radio 1 label</label>
    <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio2">
    <label class="form-label" for="invalid_radio2">Radio 2 label</label>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage">
                Please select an option
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_prefix">Prefixed Label <small>(Inc. tax)</small></label>
    <div class="form-prefixPostfix">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">AUD $</span>
        <input class="form-input form-prefixPostfix-input" id="invalid_prefix" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
        <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_prefix">
                Please input a dollar amount
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_postfix">Postfixed Label</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="invalid_postfix" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc2">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc2">KG</span>
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix">
                Please enter the weight in kilograms
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_postfix_button">Postfixed Button</label>
    <div class="form-prefixPostfix">
        <input class="form-input" id="invalid_postfix_button" type="text" placeholder="Placeholder text">
        <input class="button form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                This is a really long error message to give alot
                more detail to the user about what is wrong with this field.
            </label>
        </li>
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                Something else was wrong
            </label>
        </li>
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                You really messed up here
            </label>
        </li>
    </ul>
</div>
```
*/
.form-input-indicator {
  height: 1.57143rem;
  width: 1.57143rem;
  float: left;
  margin: 0 0 0 -2.14286rem;
  position: relative;
  top: 0.71429rem; }
  .form-prefixPostfix .form-input-indicator {
    top: 0; }
  .form-input-indicator > svg {
    fill: #008a06; }

.form-field-errors {
  list-style: none;
  margin-left: 0;
  margin-left: 0;
  clear: both;
  margin-bottom: 0;
  margin-top: 0.21429rem; }
  .form-field-errors ul,
  .form-field-errors ol {
    list-style: none;
    margin-bottom: 0; }

.form-inlineMessage {
  display: inline-block;
  line-height: 24px;
  margin: 0.35714rem 0 -0.5rem;
  width: 100%; }

.form-field--success .form-input,
.form-field--error .form-input,
.form-field--warning .form-input {
  float: left; }

.form-field--success .form-input,
.form-field--success .form-select,
.form-field--success .form-checkbox + .form-label::before,
.form-field--success .form-radio + .form-label::before,
.form-field--success .form-prefixPostfix-label {
  border-color: #008a06; }

.form-field--success .form-field-error,
.form-field--success .form-inlineMessage {
  color: #008a06; }

.form-field--success .form-input-indicator > svg {
  fill: #008a06; }

.form-field--error .form-input,
.form-field--error .form-select,
.form-field--error .form-checkbox + .form-label::before,
.form-field--error .form-radio + .form-label::before,
.form-field--error .form-prefixPostfix-label {
  border-color: #cc4749; }

.form-field--error .form-field-error,
.form-field--error .form-inlineMessage {
  color: #cc4749; }

.form-field--error .form-input-indicator > svg {
  fill: #cc4749; }

.form-field--warning .form-input,
.form-field--warning .form-select,
.form-field--warning .form-checkbox + .form-label::before,
.form-field--warning .form-radio + .form-label::before,
.form-field--warning .form-prefixPostfix-label {
  border-color: #f1a500; }

.form-field--warning .form-field-error,
.form-field--warning .form-inlineMessage {
  color: #f1a500; }

.form-field--warning .form-input-indicator > svg {
  fill: #f1a500; }

/*doc
---
title: Panels
name: panel
category: Components
---

Panels are a simple container which is relatively positioned within the document which helps you section
your content. Panels may also have a header, which contains a related title to describe the contents.

```sass_file_example
src/settings/foundation/panels/_settings.scss
```
```html_example
<div class="panel">
    <div class="panel-header">
        <h2 class="panel-title">Panel Title</h2>
    </div>
    <div class="panel-body">
        <h2>Some Panel Content</h2>
        <p>Should be able to handle any type of content.</p>
    </div>
</div>
```
*/
.panel {
  position: relative; }

.panel-header {
  background-color: #e5e5e5;
  margin: 0;
  padding: 1.5rem 2rem 0; }

.panel-title {
  line-height: 1.5;
  margin: 0; }

.panel-body {
  margin-bottom: 1.5rem;
  padding: 1rem 2rem 1.5rem;
  background: #e5e5e5; }
  .panel-body > :first-child {
    margin-top: 0; }
  .panel-body > :last-child {
    margin-bottom: 0; }
  .panel-body > :last-child {
    margin-bottom: 0; }

.breadcrumbs {
  display: block;
  list-style: none;
  margin-left: 0;
  overflow: hidden; }

.breadcrumb {
  color: #989898;
  float: left;
  font-size: 13px;
  line-height: 13px;
  margin: 0;
  line-height: 1.5; }
  .breadcrumb a {
    color: #989898; }
  .breadcrumb.current {
    color: #989898;
    cursor: default; }
    .breadcrumb.current a {
      color: #989898;
      cursor: default; }
    .breadcrumb.current:hover, .breadcrumb.current:hover a, .breadcrumb.current:focus, .breadcrumb.current:focus a {
      text-decoration: none; }
  .breadcrumb.unavailable {
    color: #a5a5a5; }
    .breadcrumb.unavailable a {
      color: #a5a5a5; }
    .breadcrumb.unavailable:hover,
    .breadcrumb.unavailable:hover a, .breadcrumb.unavailable:focus,
    .breadcrumb.unavailable a:focus {
      color: #a5a5a5;
      cursor: not-allowed;
      text-decoration: none; }
  .breadcrumb:before {
    color: #989898;
    content: "/";
    margin: 0;
    position: relative;
    top: 1px; }
  .breadcrumb:first-child:before {
    content: " ";
    margin: 0; }
  .breadcrumb::before {
    margin: 0 0.5rem; }
    @media (min-width: 481px) {
      .breadcrumb::before {
        margin: 0 0.5rem; } }

.breadcrumb-label {
  cursor: pointer; }
  .breadcrumb-label:hover {
    color: #4f4f4f;
    text-decoration: none; }
  .breadcrumb.is-active > .breadcrumb-label {
    color: #989898;
    cursor: default; }
  .breadcrumb.is-unavailable > .breadcrumb-label {
    color: #a5a5a5;
    cursor: default; }

.tabs {
  border-bottom: 1px solid #ebebeb;
  margin: 0; }
  .tabs:before, .tabs:after {
    content: " ";
    display: table; }
  .tabs:after {
    clear: both; }

.tab {
  border-bottom: white;
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative; }
  @media (min-width: 551px) {
    .tab {
      float: left; } }

.tab-title {
  color: #989898;
  display: block;
  font-size: 15px;
  padding: 0.78571rem 1.57143rem; }
  .tab-title:hover {
    color: #4e4e4e; }

.tab.is-active .tab-title {
  color: #4e4e4e;
  font-weight: 700; }

@media (min-width: 551px) {
  .tabs--vertical {
    border-bottom: 0;
    float: left;
    margin: 0 0 1.5rem;
    max-width: 20%;
    width: 20%; } }

.tabs--vertical .tab {
  float: none; }

.tabs-contents {
  margin-bottom: 1.5rem; }
  .tabs-contents:before, .tabs-contents:after {
    content: " ";
    display: table; }
  .tabs-contents:after {
    clear: both; }

@media (min-width: 551px) {
  .tabs-contents--vertical {
    float: left;
    max-width: 80%;
    padding-left: 1.5rem;
    width: 80%; }
    .tabs-contents--vertical > .tab-content {
      padding: 0 1.5rem; } }

.tab-content {
  display: none;
  padding: 1.5rem 0; }
  .tab-content.is-active {
    display: block; }

.no-js .tab-content {
  display: block;
  float: none; }

/*doc
---
title: Navigation
name: nav
category: Components
---

The navigation pattern holds a list of links wrapped in a navigation element. The links can help you navigate
the document, or the information architecture. Each link should modify the URL in some way.

```sass_file_example
src/settings/bigcommerce/nav/_settings.scss
```
We generate our own navigation abstractions through a `nav()` mixin. The mixin works as follows:

```scss_example
nav($style: "navBar", $wrapper: "nav")
```
Where:

 - `$style` - The type of navigation (a bar or list)
 - `$wrapper` - The wrapper of the navigation (usually nav, ul or ol)

There is also a `nav-action()` mixin, which when used will set the styles for any actionable items in your navigation list.

```scss_example
nav-action($color, $fontFamily, $fontSize, $padding)
```

*/
/*doc
---
title: Navigation Bar
name: navBar
parent: nav
category: Components
---

The Navigation Bar is a horizontal navigation component, useful for page navigation or any other primary content navigation.

```html_example
<nav class="navBar navBar--internal">
    <ul class="navBar-section">
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 1</a>
        </li>
        <li class="navBar-item is-active">
            <a class="navBar-action" href="#">Item 2</a>
        </li>
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 3</a>
        </li>
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 4</a>
        </li>
    </ul>
    <ul class="navBar-section navBar-section--alt">
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 5</a>
        </li>
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 6</a>
        </li>
        <li class="navBar-item">
            <a class="navBar-action" href="#">Item 7</a>
        </li>
    </ul>
</nav>
```

You can create a navigation bar abstraction with the following mixin:

```scss_example
.pageNavigation {
    @include nav("navBar", "nav");
    @include nav-action($navBar-action-color, $navBar-action-fontFamily, $navBar-action-fontSize, $navBar-action-padding);
}
```

*/
.navBar:before, .navBar:after {
  content: " ";
  display: table; }

.navBar:after {
  clear: both; }

.navBar ul,
.navBar ol {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0; }
  .navBar ul ul,
  .navBar ul ol,
  .navBar ol ul,
  .navBar ol ol {
    list-style: none;
    margin-bottom: 0; }
  .navBar ul li,
  .navBar ol li {
    margin: 0;
    padding: 0; }

.navBar-section {
  float: left; }
  .navBar-section:before, .navBar-section:after {
    content: " ";
    display: table; }
  .navBar-section:after {
    clear: both; }

.navBar-section--alt {
  float: right;
  margin-left: 1.5rem; }

.navBar-section + .navBar-section {
  margin-left: 1.5rem; }

@media (min-width: 551px) {
  .navBar-item {
    float: left; } }

.navBar-item, .navBar-action {
  display: block; }

.navBar-action {
  color: black;
  font-size: 15px;
  padding: 0.78571rem; }

/*doc
---
title: Navigation List
name: navList
parent: nav
category: Components
---

The Navigation List is a vertical navigation component, useful for secondary navigation like a list of child pages.

```html_example
<nav class="navList navList--aside">
    <ul class="navList-section">
        <li class="navList-item">
            <a class="navList-action" href="#">Item 1</a>
        </li>
        <li class="navList-item is-active">
            <a class="navList-action" href="#">Item 2</a>
            <ul class="navList-subSection">
                <li class="navList-item">
                    <a class="navList-action" href="#">Sub-item 1</a>
                </li>
                <li class="navList-item is-active">
                    <a class="navList-action" href="#">Sub-item 2</a>
                </li>
                <li class="navList-item">
                    <a class="navList-action" href="#">Sub-item 3</a>
                </li>
                <li class="navList-item">
                    <a class="navList-action" href="#">Sub-item 4</a>
                </li>
            </ul>
        </li>
        <li class="navList-item">
            <a class="navList-action" href="#">Sub-item 3</a>
        </li>
        <li class="navList-item">
            <a class="navList-action" href="#">Sub-item 4</a>
        </li>
    </ul>
</nav>
```

You can create a navigation list abstraction with the following mixin:

```scss_example
.subPagesList {
    @include nav("navList", "ul");
    @include nav-action($navBar-action-color, $navBar-action-fontFamily, $navBar-action-fontSize, $navBar-action-padding);
}
```

*/
.navList:before, .navList:after {
  content: " ";
  display: table; }

.navList:after {
  clear: both; }

.navList ul,
.navList ol {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0; }
  .navList ul ul,
  .navList ul ol,
  .navList ol ul,
  .navList ol ol {
    list-style: none;
    margin-bottom: 0; }
  .navList ul li,
  .navList ol li {
    margin: 0;
    padding: 0; }

.navList-section:before, .navList-section:after {
  content: " ";
  display: table; }

.navList-section:after {
  clear: both; }

.navList-section--alt {
  float: right;
  margin-left: 1.5rem; }

.navList-section + .navList-section {
  margin-top: 1.5rem; }

.navList-item, .navList-action {
  display: block; }

.navList-action {
  color: #8cc640;
  font-size: 15px;
  padding: 0.21429rem 0; }

.pagination-list {
  display: block;
  margin-left: 0; }
  .pagination-list li {
    color: #989898;
    font-size: 1rem;
    margin-left: 0.35714rem; }
    .pagination-list li a, .pagination-list li button {
      border-radius: 0;
      transition: background-color 300ms ease-out;
      background: none;
      color: #989898;
      display: block;
      font-size: 1em;
      font-weight: normal;
      line-height: inherit;
      padding: 0.28571rem 0.5rem; }
  .pagination-list li {
    display: block; }

li.pagination-item {
  cursor: pointer; }
  li.pagination-item:first-child {
    margin-left: 0; }
  li.pagination-item a:hover {
    color: #8cc640; }

li.pagination-item--current a, li.pagination-item--current button {
  color: #8cc640;
  cursor: default; }

/*doc
---
title: Alerts
name: alerts
category: Components
---

Alerts can be used to inform users about the actions they perform, whether it's a successful message, a warning, error, or just information.
They can be displayed at a page level or inside a specific container. They will take the full width of their containers.

```sass_file_example
src/settings/foundation/alerts/_settings.scss
```

The alert box consists of three `alertBox-column`s: The `alertBox-icon` which contains the icon for the type of alert,
the `alertBox-message` which can contain the heading and text for the alert message, and `alertBox-close` which holds the close button.
You can set the vertical alignment of the columns in the setting variables.

```html_example
<div class="alertBox">
    <div class="alertBox-column alertBox-icon">
        <icon class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
            </svg>
        </icon>
    </div>
    <div class="alertBox-column alertBox-message">
        <span>Generic alert</span>
    </div>
    <a class="alertBox-column alertBox-close" tabindex="0" href="#">
        <icon glyph="ic-close" class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
            </svg>
        </icon>
    </a>
</div>
```
*/
.alertBox {
  border-style: none;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.78571rem;
  padding: 0.78571rem 1.14286rem 0.78571rem 1.14286rem;
  position: relative;
  transition: opacity 300ms ease-out;
  background-color: #f9f9f9;
  border-color: #f9f9f9;
  color: white; }
  .alertBox .icon {
    height: 1.42857rem;
    width: 1.42857rem; }
  .alertBox .button {
    margin: 0 0 0 0.78571rem; }

.alertBox--info {
  background-color: #4e4e4e;
  border-color: #4e4e4e;
  color: #333333; }
  .alertBox--info svg {
    fill: #dfdfdf; }

.alertBox--success {
  background-color: #d5ffd8;
  border-color: #d5ffd8;
  color: white; }
  .alertBox--success svg {
    fill: #008a06; }

.alertBox--warning {
  background-color: #fffdea;
  border-color: #fffdea;
  color: white; }
  .alertBox--warning svg {
    fill: #f1a500; }

.alertBox--error {
  background-color: #ffdddd;
  border-color: #ffdddd;
  color: white; }
  .alertBox--error svg {
    fill: #cc4749; }

.alertBox-column {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

.alertBox-icon {
  padding-right: 1.14286rem; }

.alertBox-message {
  margin: 0;
  text-align: left;
  width: 100%; }

.alertBox-heading {
  margin: 0; }

.alertBox-close {
  cursor: pointer;
  padding-left: 1.14286rem; }
  .alertBox-close .icon {
    height: 1.42857rem;
    width: 1.42857rem; }
  .alertBox-close svg {
    fill: #999999; }

/*doc
---
title: Accordion
name: accordion
category: Components
---
```html_example
<section class="accordion">
    <article heading="Dynamic Group Header - 1" class="is-open">
        <h2 class="accordion-navigation is-open">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 1
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
        <div class="accordion-content is-open">
            Dynamic Group Body - 1
        </div>
    </article>
    <article heading="Dynamic Group Header - 2">
        <h2 class="accordion-navigation">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 2
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
    </article>
<article heading="Dynamic Group Header - 3">
        <h2 class="accordion-navigation accordion-navigation--error">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 3
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
    </article>
</section>
```

```sass_file_example
src/settings/foundation/accordion/_settings.scss
```
*/
.accordion {
  margin-bottom: 0;
  border: #ebebeb solid;
  border-width: 1px;
  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.13);
  margin: 0 0 1.5rem; }
  .accordion:before, .accordion:after {
    content: " ";
    display: table; }
  .accordion:after {
    clear: both; }

.accordion-navigation {
  display: block;
  margin-bottom: 0 !important;
  border: #ebebeb solid;
  border-width: 1px 0;
  cursor: pointer; }
  .accordion-navigation.is-open > a {
    background: white;
    color: black; }
  .accordion-navigation > a {
    background: white;
    color: #4e4e4e;
    padding: 1.85714rem;
    display: block;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 1rem; }
    .accordion-navigation > a:hover {
      background: #e5e5e5; }
  .accordion-navigation .accordion-title {
    padding: 1.5rem 1.85714rem; }

.accordion-title {
  font-weight: 700;
  line-height: 24px; }

.accordion-content {
  display: none;
  padding: 2rem;
  border: #ebebeb solid;
  border-width: 0 0 1px; }
  .accordion-content.is-open {
    display: block; }

.accordion-navigation--success .accordion-title,
.accordion-navigation--success.is-open > a {
  color: #008a06; }

.accordion-navigation--error .accordion-title,
.accordion-navigation--error.is-open > a {
  color: #cc4749; }

.accordion-navigation--warning .accordion-title,
.accordion-navigation--warning.is-open > a {
  color: #f1a500; }

body.has-activeModal {
  overflow: hidden; }

.modal-background {
  background: black;
  background: rgba(51, 51, 51, 0.95);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1004;
  left: 0; }
  .has-activeModal .modal-background {
    display: block; }

.modal {
  border-radius: 0;
  display: none;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1005;
  left: 0;
  background-color: white;
  padding: 2.25rem 2.25rem;
  border: solid 0 #ebebeb;
  box-shadow: none;
  max-height: 80%;
  overflow: auto;
  position: fixed; }
  @media only screen and (max-width: 551px) {
    .modal {
      min-height: 100vh; } }
  .modal .column, .modal .columns {
    min-width: 0; }
  .modal > :first-child {
    margin-top: 0; }
  .modal > :last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 551px) {
    .modal {
      left: 0;
      margin: 0 auto;
      max-width: 80%;
      right: 0;
      width: 900px; } }
  @media only screen and (min-width: 551px) {
    .modal {
      top: 50% !important; } }
  @media (min-width: 551px) {
    .modal {
      transform: translateY(-50%); } }

.modal--large {
  max-height: 90%;
  width: 1280px; }

.modal--small {
  width: 500px; }

.modal-header {
  border-bottom: 1px solid #ebebeb;
  padding: 1rem 0;
  position: relative; }

.modal-header-title {
  margin: 0; }

.modal-body {
  padding: 3rem 0; }
  .modal-body > :last-child {
    margin-bottom: 0; }

.modal-footer {
  border-top: 1px solid #ebebeb;
  padding: 0.78571rem 1.5rem;
  text-align: center; }
  @media (min-width: 481px) {
    .modal-footer {
      text-align: right; } }
  .modal-footer .button {
    display: block; }
    @media (min-width: 481px) {
      .modal-footer .button {
        display: inline-block;
        margin-bottom: 0; } }

.modal-footer-link {
  display: inline-block;
  font-size: 15px;
  margin: 0 0 0.78571rem; }
  @media (min-width: 481px) {
    .modal-footer-link {
      display: inline;
      margin: 1.5rem; } }

.modal-close {
  color: #424242;
  cursor: pointer;
  font-size: 32px;
  font-weight: normal;
  line-height: 1;
  position: absolute;
  top: 1.05rem;
  right: 0.75rem;
  transform: translateY(none); }
  .modal-close .icon {
    height: 1.42857rem;
    width: 1.42857rem; }

@media print {
  .modal {
    background: #FFFFFF !important;
    display: none; } }

.loadingNotification {
  left: 50%;
  position: fixed;
  text-align: center;
  top: 3rem;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  transition: all 200ms ease-out;
  z-index: 500; }
  .loadingNotification.ng-hide-remove, .loadingNotification.ng-hide-add-active {
    opacity: 0;
    top: 3.6rem;
    transform: scale(0.9) translateX(-50%); }
  .loadingNotification.ng-hide-remove-active {
    opacity: 1;
    top: 3rem;
    transform: scale(1) translateX(-50%); }

.loadingNotification-label {
  background: #424242;
  border-radius: 0;
  color: white;
  display: inline-block;
  font-size: 15px;
  padding: 0.35714rem 0.78571rem; }

.loadingOverlay-container {
  min-height: 120px;
  position: relative; }

.loadingOverlay {
  background: rgba(51, 51, 51, 0.9);
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 250ms ease-out;
  width: 100%; }
  .loadingOverlay::before {
    height: 2.85714rem;
    width: 2.85714rem;
    border-radius: 2.85714rem;
    border: solid 2px;
    border-color: white white #999999 #999999;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-style: preserve-3d;
    animation: spin 500ms infinite cubic-bezier(0.69, 0.31, 0.56, 0.83); }
  .loadingOverlay.ng-enter, .loadingOverlay.ng-leave.ng-leave-active {
    opacity: 0; }
  .loadingOverlay.ng-leave, .loadingOverlay.ng-enter.ng-enter-active {
    opacity: 1; }

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg); }
  100% {
    transform: translateY(-50%) rotate(360deg); } }

/*doc
---
title: ActionBar
name: action_bar
category: Patterns
---
```html_example
<div class="actionBar">
    <div class="actionBar-section">
        <fieldset class="form-fieldset">
            <div class="actionBar-item form-field">
                <input class="form-input has-action" type="search" placeholder="Search">
                <button class="button button--icon button--inputAction">
                    <span class="is-srOnly">Search</span>
                    <icon glyph="ic-search"></icon>
                </button>
            </div>
            <a href="#" class="actionBar-item">Advanced</a>
        </fieldset>
    </div>
    <div class="actionBar-section actionBar-section--alt">
        <fieldset class="form-fieldset">
            <div class="actionBar-item form-field">
                <div class="buttonGroup">
                    <button class="button">
                        All
                    </button>
                    <button class="button">
                        Free
                    </button>
                    <button class="button">
                        Paid
                    </button>
                </div>
            </div>
            <div class="actionBar-item form-field">
                <label class="form-label" for="select1">Sort by</label>
                <select class="form-select" name="select1" id="select1">
                    <option value="1">Popular</option>
                    <option value="2">Newest</option>
                </select>
            </div>
        </fieldset>
    </div>
</div>
```

```sass_file_example
src/settings/bigcommerce/actionBar/_settings.scss
```
*/
.actionBar {
  margin: 1.5rem 0; }
  .actionBar:before, .actionBar:after {
    content: " ";
    display: table; }
  .actionBar:after {
    clear: both; }
  .actionBar .button {
    margin-bottom: 0; }
  .actionBar .buttonGroup {
    vertical-align: middle; }

.actionBar-link {
  display: block;
  padding: 0.78571rem 0; }

.actionBar-section:before, .actionBar-section:after {
  content: " ";
  display: table; }

.actionBar-section:after {
  clear: both; }

@media (min-width: 551px) {
  .actionBar-section {
    float: left; }
    .actionBar-section .form-label {
      display: inline-block;
      margin: 0 0.35714rem 0 0; }
    .actionBar-section .form-select,
    .actionBar-section .form-input {
      display: inline-block;
      width: 14.28571rem; } }

@media (min-width: 551px) {
  .actionBar-section--alt {
    float: right; } }

.actionBar-item {
  margin-bottom: 1.5rem; }
  @media (min-width: 551px) {
    .actionBar-item {
      display: inline-block;
      margin-bottom: 0;
      margin-right: 1.5rem;
      vertical-align: middle; }
      .actionBar-item:last-child {
        margin-right: 0; } }

/*doc
---
title: Cards
name: cards
category: Components
---

Cards are a typical component consisting of a figure and a short snippet of descriptive text.
This could include a heading and a caption or definition, and perhaps a call to action
or other actionable functions.

```sass_file_example
src/settings/bigcommerce/cards/_settings.scss
```
```html_example
<article class="card">
    <figure class="card-figure">
        <img class="card-image" src="http://lorempixel.com/960/360/sports/" alt="Example card image">
        <figcaption class="card-figcaption">
            <a class="card-figcaption-action" href="#">
                <div class="card-figcaption-body">
                    <span class="button card-figcaption-button">Learn more</span>
                </div>
            </a>
        </figcaption>
    </figure>
    <div class="card-body">
        <h2 class="card-title">20% Off First Design Project</h2>
        <h3 class="card-subTitle">Custom Designs</h3>
        <p class="card-text">
            Be seen by customers at the very moment that
            they are searching on Google for the things you offer.
        </p>
    </div>
</article>
```
*/
.card {
  background-color: transparent;
  margin-bottom: 3rem;
  padding: 0 0; }

.card-figure {
  background-color: white;
  margin-bottom: 0;
  padding: 0 0;
  position: relative; }

.card-image {
  border: 1px solid #999999;
  width: 100%; }

.card-figcaption {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0; }
  .card-figcaption:hover {
    opacity: 1; }

.card-figcaption-action {
  display: block;
  height: 100%; }

.card-figcaption-body {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transform-style: preserve-3d; }
  .card-figcaption-body > :first-child {
    margin-top: 0; }
  .card-figcaption-body > :last-child {
    margin-bottom: 0; }
  .card-figcaption-body .card-text {
    color: #989898; }

.card-figcaption-button {
  background-color: rgba(51, 51, 51, 0.9);
  color: white; }
  .card-figcaption-button:hover {
    background-color: #333333;
    color: white; }

.card-body {
  padding: 0.78571rem 0 0; }
  .card-body > :first-child {
    margin-top: 0; }
  .card-body > :last-child {
    margin-bottom: 0; }
  .card-body .card-text {
    color: #989898; }

.card-surTitle {
  float: right;
  margin-left: 1.5rem;
  max-width: 40%;
  text-align: right; }

.card-footer {
  background-color: transparent;
  margin: 0; }
  .card-footer:before, .card-footer:after {
    content: " ";
    display: table; }
  .card-footer:after {
    clear: both; }

.card-button {
  margin-bottom: 0; }

.aria-description--hidden {
  height: 1px;
  left: 0;
  margin-left: -10000px;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 1px; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
  .slick-list:focus {
    outline: none; }
  .slick-list.dragging {
    cursor: pointer;
    cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  .slick-track:before, .slick-track:after {
    content: "";
    display: table; }
  .slick-track:after {
    clear: both; }
  .slick-loading .slick-track {
    visibility: hidden; }

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
  [dir="rtl"] .slick-slide {
    float: right; }
  .slick-slide img {
    display: block; }
  .slick-slide.slick-loading img {
    display: none; }
  .slick-slide.dragging img {
    pointer-events: none; }
  .slick-initialized .slick-slide {
    display: block; }
  .slick-loading .slick-slide {
    visibility: hidden; }
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff center center no-repeat; }

/* Icons */
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
  .slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
    .slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 0.8; }
  .slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.6; }
  .slick-prev:before,
  .slick-next:before {
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }
  [dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
  .slick-prev:before {
    content: ""; }
    [dir="rtl"] .slick-prev:before {
      content: ""; }

.slick-next {
  right: -25px; }
  [dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
  .slick-next:before {
    content: ""; }
    [dir="rtl"] .slick-next:before {
      content: ""; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
    .slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
      .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
        .slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 0.8; }
      .slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 20px;
        height: 20px;
        font-family: inherit;
        font-size: 60px;
        line-height: 20px;
        text-align: center;
        color: white;
        opacity: 0.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: white;
      opacity: 1; }

.slick-next,
.slick-prev {
  background-color: black;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1;
  border: 0px solid white;
  height: 4.35714rem;
  margin-top: -1.07143rem;
  padding: 0.71429rem;
  width: 2.85714rem;
  z-index: 1; }
  .slick-next::before,
  .slick-prev::before {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    height: 2.92857rem;
    width: 1.42857rem; }
  .slick-next:hover, .slick-next:focus,
  .slick-prev:hover,
  .slick-prev:focus {
    background-color: black;
    background-color: rgba(0, 0, 0, 0.9);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%; }

.slick-next {
  right: -5px; }
  @media (min-width: 1261px) {
    .slick-next {
      right: -3.35714rem; } }
  .slick-next::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }
  .slick-next:hover::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='%23474747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }

.slick-prev {
  left: -5px; }
  @media (min-width: 1261px) {
    .slick-prev {
      left: -3.35714rem; } }
  .slick-prev::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }
  .slick-prev:hover::before {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='%23474747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }

.slick-slide img {
  display: block;
  width: 100%; }

.slick-dots {
  margin: 0; }
  .slick-dots li {
    height: 2.28571rem;
    width: 2.28571rem;
    margin: 0;
    padding: 0.35714rem; }
    .slick-dots li button,
    .slick-dots li button::before {
      height: 1.07143rem;
      width: 1.07143rem;
      border-radius: 50%; }
    .slick-dots li button {
      border: 1px solid white;
      display: inline-block;
      margin: 0;
      padding: 0;
      position: relative;
      text-align: center;
      vertical-align: middle; }
      .slick-dots li button:hover::before {
        background: white; }
    .slick-dots li button::before {
      display: block;
      left: -1px;
      top: -1px;
      transition: background 100ms ease-out; }
    .slick-dots li.slick-active button::before {
      background: white; }

.productView .slick-dots {
  position: relative; }

.slick-disabled {
  cursor: default;
  opacity: 0.1; }

.slick-track {
  backface-visibility: hidden;
  perspective: 1000px; }

div.slick-slider {
  min-width: 100%;
  width: 1px;
  *width: 100%; }

.carousel-tooltip {
  display: none;
  height: 1px;
  margin-top: 10px;
  position: relative; }
  .carousel-tooltip::before {
    border-color: transparent transparent #313440 transparent;
    border-style: solid;
    border-width: 0.71429rem;
    content: " ";
    position: absolute;
    right: 0;
    top: 50%; }
  .carousel-tooltip::after {
    background-color: #313440;
    border-radius: 0.57143rem;
    color: white;
    content: attr(aria-label);
    cursor: default;
    font-size: 1rem;
    padding: 0.28571rem 0.42857rem;
    position: absolute;
    right: 0;
    top: 100%;
    white-space: nowrap; }
  .carousel-tooltip::before, .carousel-tooltip::after {
    display: none; }
  .carousel-tooltip:focus::before, .carousel-tooltip:focus::after {
    display: block; }
  @media (min-width: 551px) {
    .carousel-tooltip {
      display: block; } }
  .carousel-tooltip::after {
    padding: 15px 10px;
    top: 10px; }
  .slick-prev:focus .carousel-tooltip::before, .slick-prev:focus .carousel-tooltip::after,
  .slick-next:focus .carousel-tooltip::before,
  .slick-next:focus .carousel-tooltip::after,
  .slick-dots button:focus .carousel-tooltip::before,
  .slick-dots button:focus .carousel-tooltip::after {
    display: block; }
  .slick-prev .carousel-tooltip::before,
  .slick-next .carousel-tooltip::before {
    top: -7px; }
  .slick-prev .carousel-tooltip::before {
    right: -2px; }
  .slick-prev .carousel-tooltip::after {
    left: -5px;
    right: auto; }
  .slick-next .carousel-tooltip::after {
    right: -5px; }
  .slick-dots button .carousel-tooltip {
    margin-top: 25px; }
    .slick-dots button .carousel-tooltip::before, .slick-dots button .carousel-tooltip::after {
      right: 50%;
      transform: translateX(50%); }
    .slick-dots button .carousel-tooltip::before {
      top: -7px; }

.carousel-play-pause-button {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid white;
  bottom: 0.5rem;
  color: #8f8f8f;
  display: none;
  font-size: 14px;
  font-weight: 700;
  height: 32px;
  left: 15px;
  line-height: 1.25;
  max-width: 60px;
  min-width: 60px;
  overflow: hidden;
  position: absolute;
  text-overflow: ellipsis;
  transition: color 100ms ease-out;
  white-space: nowrap;
  z-index: 5; }
  @media (min-width: 551px) {
    .carousel-play-pause-button {
      font-size: 18px;
      max-width: 150px; } }
  @media (min-width: 801px) {
    .carousel-play-pause-button {
      bottom: 1.5rem;
      left: 25px; } }
  .carousel-play-pause-button:hover {
    color: #474747; }
  @media (min-width: 375px) {
    .carousel-play-pause-button {
      max-width: 90px;
      min-width: 80px; } }

.nanobar {
  display: none;
  height: 0.35714rem;
  pointer-events: none;
  top: 0;
  user-select: none;
  width: 100%;
  z-index: 9999; }
  .nanobar .bar {
    background-color: #999999;
    height: 100%;
    transition: height 0.1s;
    width: 0; }

.swal2-popup.swal2-toast {
  flex-direction: row;
  align-items: center;
  width: auto;
  padding: 0.625em;
  overflow-y: hidden;
  background: #fff;
  box-shadow: 0 0 0.625em #d9d9d9; }
  .swal2-popup.swal2-toast .swal2-header {
    flex-direction: row;
    padding: 0; }
  .swal2-popup.swal2-toast .swal2-title {
    flex-grow: 1;
    justify-content: flex-start;
    margin: 0 0.6em;
    font-size: 1em; }
  .swal2-popup.swal2-toast .swal2-footer {
    margin: 0.5em 0 0;
    padding: 0.5em 0 0;
    font-size: 0.8em; }
  .swal2-popup.swal2-toast .swal2-close {
    position: static;
    width: 0.8em;
    height: 0.8em;
    line-height: 0.8; }
  .swal2-popup.swal2-toast .swal2-content {
    justify-content: flex-start;
    padding: 0;
    font-size: 1em; }
  .swal2-popup.swal2-toast .swal2-icon {
    width: 2em;
    min-width: 2em;
    height: 2em;
    margin: 0; }
    .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
      display: flex;
      align-items: center;
      font-size: 1.8em;
      font-weight: bold; }
      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        .swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
          font-size: .25em; } }
    .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
      width: 2em;
      height: 2em; }
    .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
      top: .875em;
      width: 1.375em; }
      .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
        left: .3125em; }
      .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
        right: .3125em; }
  .swal2-popup.swal2-toast .swal2-actions {
    flex-basis: auto !important;
    width: auto;
    height: auto;
    margin: 0 .3125em; }
  .swal2-popup.swal2-toast .swal2-styled {
    margin: 0 .3125em;
    padding: .3125em .625em;
    font-size: 1em; }
    .swal2-popup.swal2-toast .swal2-styled:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4); }
  .swal2-popup.swal2-toast .swal2-success {
    border-color: #a5dc86; }
    .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'] {
      position: absolute;
      width: 1.6em;
      height: 3em;
      transform: rotate(45deg);
      border-radius: 50%; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='left'] {
        top: -.8em;
        left: -.5em;
        transform: rotate(-45deg);
        transform-origin: 2em 2em;
        border-radius: 4em 0 0 4em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='right'] {
        top: -.25em;
        left: .9375em;
        transform-origin: 0 1.5em;
        border-radius: 0 4em 4em 0; }
    .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
      width: 2em;
      height: 2em; }
    .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
      top: 0;
      left: .4375em;
      width: .4375em;
      height: 2.6875em; }
    .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] {
      height: .3125em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='tip'] {
        top: 1.125em;
        left: .1875em;
        width: .75em; }
      .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='long'] {
        top: .9375em;
        right: .1875em;
        width: 1.375em; }
    .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-tip {
      animation: swal2-toast-animate-success-line-tip .75s; }
    .swal2-popup.swal2-toast .swal2-success.swal2-icon-show .swal2-success-line-long {
      animation: swal2-toast-animate-success-line-long .75s; }
  .swal2-popup.swal2-toast.swal2-show {
    animation: swal2-toast-show 0.5s; }
  .swal2-popup.swal2-toast.swal2-hide {
    animation: swal2-toast-hide 0.1s forwards; }

.swal2-container {
  display: flex;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.625em;
  overflow-x: hidden;
  transition: background-color 0.1s;
  -webkit-overflow-scrolling: touch; }
  .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
    background: rgba(0, 0, 0, 0.4); }
  .swal2-container.swal2-backdrop-hide {
    background: transparent !important; }
  .swal2-container.swal2-top {
    align-items: flex-start; }
  .swal2-container.swal2-top-start, .swal2-container.swal2-top-left {
    align-items: flex-start;
    justify-content: flex-start; }
  .swal2-container.swal2-top-end, .swal2-container.swal2-top-right {
    align-items: flex-start;
    justify-content: flex-end; }
  .swal2-container.swal2-center {
    align-items: center; }
  .swal2-container.swal2-center-start, .swal2-container.swal2-center-left {
    align-items: center;
    justify-content: flex-start; }
  .swal2-container.swal2-center-end, .swal2-container.swal2-center-right {
    align-items: center;
    justify-content: flex-end; }
  .swal2-container.swal2-bottom {
    align-items: flex-end; }
  .swal2-container.swal2-bottom-start, .swal2-container.swal2-bottom-left {
    align-items: flex-end;
    justify-content: flex-start; }
  .swal2-container.swal2-bottom-end, .swal2-container.swal2-bottom-right {
    align-items: flex-end;
    justify-content: flex-end; }
  .swal2-container.swal2-bottom > :first-child,
  .swal2-container.swal2-bottom-start > :first-child,
  .swal2-container.swal2-bottom-left > :first-child,
  .swal2-container.swal2-bottom-end > :first-child,
  .swal2-container.swal2-bottom-right > :first-child {
    margin-top: auto; }
  .swal2-container.swal2-grow-fullscreen > .swal2-modal {
    display: flex !important;
    flex: 1;
    align-self: stretch;
    justify-content: center; }
  .swal2-container.swal2-grow-row > .swal2-modal {
    display: flex !important;
    flex: 1;
    align-content: center;
    justify-content: center; }
  .swal2-container.swal2-grow-column {
    flex: 1;
    flex-direction: column; }
    .swal2-container.swal2-grow-column.swal2-top, .swal2-container.swal2-grow-column.swal2-center, .swal2-container.swal2-grow-column.swal2-bottom {
      align-items: center; }
    .swal2-container.swal2-grow-column.swal2-top-start, .swal2-container.swal2-grow-column.swal2-center-start, .swal2-container.swal2-grow-column.swal2-bottom-start, .swal2-container.swal2-grow-column.swal2-top-left, .swal2-container.swal2-grow-column.swal2-center-left, .swal2-container.swal2-grow-column.swal2-bottom-left {
      align-items: flex-start; }
    .swal2-container.swal2-grow-column.swal2-top-end, .swal2-container.swal2-grow-column.swal2-center-end, .swal2-container.swal2-grow-column.swal2-bottom-end, .swal2-container.swal2-grow-column.swal2-top-right, .swal2-container.swal2-grow-column.swal2-center-right, .swal2-container.swal2-grow-column.swal2-bottom-right {
      align-items: flex-end; }
    .swal2-container.swal2-grow-column > .swal2-modal {
      display: flex !important;
      flex: 1;
      align-content: center;
      justify-content: center; }
  .swal2-container.swal2-no-transition {
    transition: none !important; }
  .swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
    margin: auto; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .swal2-container .swal2-modal {
      margin: 0 !important; } }

.swal2-popup {
  display: none;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border: none;
  border-radius: 0.3125em;
  background: #fff;
  font-family: inherit;
  font-size: 1rem; }
  .swal2-popup:focus {
    outline: none; }
  .swal2-popup.swal2-loading {
    overflow-y: hidden; }

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.8em; }

.swal2-title {
  position: relative;
  max-width: 100%;
  margin: 0 0 0.4em;
  padding: 0;
  color: #595959;
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word; }

.swal2-actions {
  display: flex;
  z-index: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.25em auto 0; }
  .swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
    opacity: .4; }
  .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)); }
  .swal2-actions:not(.swal2-loading) .swal2-styled:active {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)); }
  .swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
    box-sizing: border-box;
    width: 2.5em;
    height: 2.5em;
    margin: .46875em;
    padding: 0;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border: .25em solid transparent;
    border-radius: 100%;
    border-color: transparent;
    background-color: transparent !important;
    color: transparent !important;
    cursor: default;
    user-select: none; }
  .swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
    margin-right: 30px;
    margin-left: 30px; }
  .swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
    border: 3px solid #999999;
    border-radius: 50%;
    border-right-color: transparent;
    box-shadow: 1px 1px 1px #fff; }

.swal2-styled {
  margin: .3125em;
  padding: .625em 2em;
  box-shadow: none;
  font-weight: 500; }
  .swal2-styled:not([disabled]) {
    cursor: pointer; }
  .swal2-styled.swal2-confirm {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #3085d6;
    color: #fff;
    font-size: 1.0625em; }
  .swal2-styled.swal2-cancel {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #aaa;
    color: #fff;
    font-size: 1.0625em; }
  .swal2-styled:focus {
    outline: none;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(50, 100, 150, 0.4); }
  .swal2-styled::-moz-focus-inner {
    border: 0; }

.swal2-footer {
  justify-content: center;
  margin: 1.25em 0 0;
  padding: 1em 0 0;
  border-top: 1px solid #eee;
  color: #545454;
  font-size: 1em; }

.swal2-timer-progress-bar-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.25em;
  overflow: hidden;
  border-bottom-right-radius: 0.3125em;
  border-bottom-left-radius: 0.3125em; }

.swal2-timer-progress-bar {
  width: 100%;
  height: 0.25em;
  background: rgba(0, 0, 0, 0.2); }

.swal2-image {
  max-width: 100%;
  margin: 1.25em auto; }

.swal2-close {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  overflow: hidden;
  transition: color 0.1s ease-out;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #cccccc;
  font-family: serif;
  font-size: 2.5em;
  line-height: 1.2;
  cursor: pointer; }
  .swal2-close:hover {
    transform: none;
    background: transparent;
    color: #f27474; }
  .swal2-close::-moz-focus-inner {
    border: 0; }

.swal2-content {
  z-index: 1;
  justify-content: center;
  margin: 0;
  padding: 0 1.6em;
  color: #545454;
  font-size: 1.125em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word; }

.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select,
.swal2-radio,
.swal2-checkbox {
  margin: 1em auto; }

.swal2-input,
.swal2-file,
.swal2-textarea {
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
  border: 1px solid #d9d9d9;
  border-radius: 0.1875em;
  background: inherit;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 1.125em; }
  .swal2-input.swal2-inputerror,
  .swal2-file.swal2-inputerror,
  .swal2-textarea.swal2-inputerror {
    border-color: #f27474 !important;
    box-shadow: 0 0 2px #f27474 !important; }
  .swal2-input:focus,
  .swal2-file:focus,
  .swal2-textarea:focus {
    border: 1px solid #b4dbed;
    outline: none;
    box-shadow: 0 0 3px #c4e6f5; }
  .swal2-input::placeholder,
  .swal2-file::placeholder,
  .swal2-textarea::placeholder {
    color: #cccccc; }

.swal2-range {
  margin: 1em auto;
  background: #fff; }
  .swal2-range input {
    width: 80%; }
  .swal2-range output {
    width: 20%;
    color: inherit;
    font-weight: 600;
    text-align: center; }
  .swal2-range input,
  .swal2-range output {
    height: 2.625em;
    padding: 0;
    font-size: 1.125em;
    line-height: 2.625em; }

.swal2-input {
  height: 2.625em;
  padding: 0 0.75em; }
  .swal2-input[type='number'] {
    max-width: 10em; }

.swal2-file {
  background: inherit;
  font-size: 1.125em; }

.swal2-textarea {
  height: 6.75em;
  padding: 0.75em; }

.swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: .375em .625em;
  background: inherit;
  color: inherit;
  font-size: 1.125em; }

.swal2-radio,
.swal2-checkbox {
  align-items: center;
  justify-content: center;
  background: #fff;
  color: inherit; }
  .swal2-radio label,
  .swal2-checkbox label {
    margin: 0 .6em;
    font-size: 1.125em; }
  .swal2-radio input,
  .swal2-checkbox input {
    margin: 0 .4em; }

.swal2-validation-message {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.625em;
  overflow: hidden;
  background: #f0f0f0;
  color: #666666;
  font-size: 1em;
  font-weight: 300; }
  .swal2-validation-message::before {
    content: '!';
    display: inline-block;
    width: 1.5em;
    min-width: 1.5em;
    height: 1.5em;
    margin: 0 .625em;
    border-radius: 50%;
    background-color: #f27474;
    color: #fff;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center; }

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: .25em solid transparent;
  border-radius: 50%;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  user-select: none; }
  .swal2-icon .swal2-icon-content {
    display: flex;
    align-items: center;
    font-size: 3.75em; }
  .swal2-icon.swal2-error {
    border-color: #f27474;
    color: #f27474; }
    .swal2-icon.swal2-error .swal2-x-mark {
      position: relative;
      flex-grow: 1; }
    .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
      display: block;
      position: absolute;
      top: 2.3125em;
      width: 2.9375em;
      height: .3125em;
      border-radius: .125em;
      background-color: #f27474; }
      .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
        left: 1.0625em;
        transform: rotate(45deg); }
      .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
        right: 1em;
        transform: rotate(-45deg); }
    .swal2-icon.swal2-error.swal2-icon-show {
      animation: swal2-animate-error-icon .5s; }
      .swal2-icon.swal2-error.swal2-icon-show .swal2-x-mark {
        animation: swal2-animate-error-x-mark .5s; }
  .swal2-icon.swal2-warning {
    border-color: #facea8;
    color: #f8bb86; }
  .swal2-icon.swal2-info {
    border-color: #9de0f6;
    color: #3fc3ee; }
  .swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd; }
  .swal2-icon.swal2-success {
    border-color: #a5dc86;
    color: #a5dc86; }
    .swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
      position: absolute;
      width: 3.75em;
      height: 7.5em;
      transform: rotate(45deg);
      border-radius: 50%; }
      .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='left'] {
        top: -.4375em;
        left: -2.0635em;
        transform: rotate(-45deg);
        transform-origin: 3.75em 3.75em;
        border-radius: 7.5em 0 0 7.5em; }
      .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='right'] {
        top: -.6875em;
        left: 1.875em;
        transform: rotate(-45deg);
        transform-origin: 0 3.75em;
        border-radius: 0 7.5em 7.5em 0; }
    .swal2-icon.swal2-success .swal2-success-ring {
      position: absolute;
      z-index: 2;
      top: -.25em;
      left: -.25em;
      box-sizing: content-box;
      width: 100%;
      height: 100%;
      border: 0.25em solid rgba(165, 220, 134, 0.3);
      border-radius: 50%; }
    .swal2-icon.swal2-success .swal2-success-fix {
      position: absolute;
      z-index: 1;
      top: .5em;
      left: 1.625em;
      width: .4375em;
      height: 5.625em;
      transform: rotate(-45deg); }
    .swal2-icon.swal2-success [class^='swal2-success-line'] {
      display: block;
      position: absolute;
      z-index: 2;
      height: .3125em;
      border-radius: .125em;
      background-color: #a5dc86; }
      .swal2-icon.swal2-success [class^='swal2-success-line'][class$='tip'] {
        top: 2.875em;
        left: .8125em;
        width: 1.5625em;
        transform: rotate(45deg); }
      .swal2-icon.swal2-success [class^='swal2-success-line'][class$='long'] {
        top: 2.375em;
        right: .5em;
        width: 2.9375em;
        transform: rotate(-45deg); }
    .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-tip {
      animation: swal2-animate-success-line-tip .75s; }
    .swal2-icon.swal2-success.swal2-icon-show .swal2-success-line-long {
      animation: swal2-animate-success-line-long .75s; }
    .swal2-icon.swal2-success.swal2-icon-show .swal2-success-circular-line-right {
      animation: swal2-rotate-success-circular-line 4.25s ease-in; }

.swal2-progress-steps {
  align-items: center;
  margin: 0 0 1.25em;
  padding: 0;
  background: inherit;
  font-weight: 600; }
  .swal2-progress-steps li {
    display: inline-block;
    position: relative; }
  .swal2-progress-steps .swal2-progress-step {
    z-index: 20;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    background: #3085d6;
    color: #fff;
    line-height: 2em;
    text-align: center; }
    .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
      background: #3085d6; }
      .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
        background: #add8e6;
        color: #fff; }
      .swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
        background: #add8e6; }
  .swal2-progress-steps .swal2-progress-step-line {
    z-index: 10;
    width: 2.5em;
    height: .4em;
    margin: 0 -1px;
    background: #3085d6; }

[class^='swal2'] {
  -webkit-tap-highlight-color: transparent; }

.swal2-show {
  animation: swal2-show 0.3s; }

.swal2-hide {
  animation: swal2-hide 0.15s forwards; }

.swal2-noanimation {
  transition: none; }

.swal2-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll; }

.swal2-rtl .swal2-close {
  right: auto;
  left: 0; }

.swal2-rtl .swal2-timer-progress-bar {
  right: 0;
  left: auto; }

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important; }
  .swal2-range output {
    display: none; } }

@-moz-document url-prefix() {
  .swal2-close:focus {
    outline: 2px solid rgba(50, 100, 150, 0.4); } }

@keyframes swal2-toast-show {
  0% {
    transform: translateY(-0.625em) rotateZ(2deg); }
  33% {
    transform: translateY(0) rotateZ(-2deg); }
  66% {
    transform: translateY(0.3125em) rotateZ(2deg); }
  100% {
    transform: translateY(0) rotateZ(0deg); } }

@keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0; } }

@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: .5625em;
    left: .0625em;
    width: 0; }
  54% {
    top: .125em;
    left: .125em;
    width: 0; }
  70% {
    top: .625em;
    left: -.25em;
    width: 1.625em; }
  84% {
    top: 1.0625em;
    left: .75em;
    width: .5em; }
  100% {
    top: 1.125em;
    left: .1875em;
    width: .75em; } }

@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0; }
  65% {
    top: 1.25em;
    right: .9375em;
    width: 0; }
  84% {
    top: .9375em;
    right: 0;
    width: 1.125em; }
  100% {
    top: .9375em;
    right: .1875em;
    width: 1.375em; } }

@keyframes swal2-show {
  0% {
    transform: scale(0.7); }
  45% {
    transform: scale(1.05); }
  80% {
    transform: scale(0.95); }
  100% {
    transform: scale(1); } }

@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(0.5);
    opacity: 0; } }

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: .0625em;
    width: 0; }
  54% {
    top: 1.0625em;
    left: .125em;
    width: 0; }
  70% {
    top: 2.1875em;
    left: -.375em;
    width: 3.125em; }
  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em; }
  100% {
    top: 2.8125em;
    left: .8125em;
    width: 1.5625em; } }

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0; }
  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em; }
  100% {
    top: 2.375em;
    right: .5em;
    width: 2.9375em; } }

@keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg); }
  5% {
    transform: rotate(-45deg); }
  12% {
    transform: rotate(-405deg); }
  100% {
    transform: rotate(-405deg); } }

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0; }
  50% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0; }
  80% {
    margin-top: -.375em;
    transform: scale(1.15); }
  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1; } }

@keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0; }
  100% {
    transform: rotateX(0deg);
    opacity: 1; } }

@keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden; }

body.swal2-height-auto {
  height: auto !important; }

body.swal2-no-backdrop .swal2-container {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 0.625em * 2);
  background-color: transparent !important; }
  body.swal2-no-backdrop .swal2-container > .swal2-modal {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
  body.swal2-no-backdrop .swal2-container.swal2-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%); }
  body.swal2-no-backdrop .swal2-container.swal2-top-start, body.swal2-no-backdrop .swal2-container.swal2-top-left {
    top: 0;
    left: 0; }
  body.swal2-no-backdrop .swal2-container.swal2-top-end, body.swal2-no-backdrop .swal2-container.swal2-top-right {
    top: 0;
    right: 0; }
  body.swal2-no-backdrop .swal2-container.swal2-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  body.swal2-no-backdrop .swal2-container.swal2-center-start, body.swal2-no-backdrop .swal2-container.swal2-center-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%); }
  body.swal2-no-backdrop .swal2-container.swal2-center-end, body.swal2-no-backdrop .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%); }
  body.swal2-no-backdrop .swal2-container.swal2-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); }
  body.swal2-no-backdrop .swal2-container.swal2-bottom-start, body.swal2-no-backdrop .swal2-container.swal2-bottom-left {
    bottom: 0;
    left: 0; }
  body.swal2-no-backdrop .swal2-container.swal2-bottom-end, body.swal2-no-backdrop .swal2-container.swal2-bottom-right {
    right: 0;
    bottom: 0; }

@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important; }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden='true'] {
      display: none; }
    body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
      position: static !important; } }

body.swal2-toast-shown .swal2-container {
  background-color: transparent; }
  body.swal2-toast-shown .swal2-container.swal2-top {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 0;
    right: 0;
    bottom: auto;
    left: auto; }
  body.swal2-toast-shown .swal2-container.swal2-top-start, body.swal2-toast-shown .swal2-container.swal2-top-left {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0; }
  body.swal2-toast-shown .swal2-container.swal2-center-start, body.swal2-toast-shown .swal2-container.swal2-center-left {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    transform: translateY(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-center {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%); }
  body.swal2-toast-shown .swal2-container.swal2-center-end, body.swal2-toast-shown .swal2-container.swal2-center-right {
    top: 50%;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-bottom-start, body.swal2-toast-shown .swal2-container.swal2-bottom-left {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0; }
  body.swal2-toast-shown .swal2-container.swal2-bottom {
    top: auto;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); }
  body.swal2-toast-shown .swal2-container.swal2-bottom-end, body.swal2-toast-shown .swal2-container.swal2-bottom-right {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto; }

body.swal2-toast-column .swal2-toast {
  flex-direction: column;
  align-items: stretch; }
  body.swal2-toast-column .swal2-toast .swal2-actions {
    flex: 1;
    align-self: stretch;
    height: 2.2em;
    margin-top: .3125em; }
  body.swal2-toast-column .swal2-toast .swal2-loading {
    justify-content: center; }
  body.swal2-toast-column .swal2-toast .swal2-input {
    height: 2em;
    margin: .3125em auto;
    font-size: 1em; }
  body.swal2-toast-column .swal2-toast .swal2-validation-message {
    font-size: 1em; }

.swal2-modal {
  background-color: white !important;
  border-radius: 4px;
  font-family: "Roboto", Arial, Helvetica, sans-serif; }
  .swal2-modal .swal2-title {
    color: #4e4e4e;
    font-size: 3.14286rem; }
  .swal2-modal .swal2-content {
    color: #4e4e4e;
    font-size: 1.14286rem; }
  .swal2-modal .swal2-file,
  .swal2-modal .swal2-input,
  .swal2-modal .swal2-textarea {
    border: 1px solid #cccccc;
    color: #4e4e4e; }
  .swal2-modal .swal2-checkbox,
  .swal2-modal .swal2-select {
    color: #4e4e4e; }
  .swal2-modal .swal2-buttonswrapper {
    margin: 25px 0 0; }
  .swal2-modal .swal2-styled {
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 0;
    border-style: solid;
    border-width: 0;
    cursor: pointer;
    font-family: "Barlow", Arial, Helvetica, sans-serif;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 1rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    background-color: #424242;
    border-color: #424242;
    color: white;
    font-size: 1rem;
    padding: 1rem 2.78571rem;
    border-radius: 0;
    line-height: 1rem;
    outline: none;
    transition: all 0.15s ease;
    vertical-align: middle; }
    .swal2-modal .swal2-styled:hover, .swal2-modal .swal2-styled:focus, .swal2-modal .swal2-styled.is-active, .swal2-modal .swal2-styled.active {
      background-color: #0f0f0f;
      border-color: #424242;
      color: white; }
    .swal2-modal .swal2-styled:active {
      background-color: #0f0f0f;
      border: 0 solid #424242;
      color: white; }
  .swal2-modal .swal2-styled:focus {
    outline: none; }
  .swal2-modal .swal2-confirm {
    background-color: #333333;
    border-color: #333333;
    color: white; }
  .swal2-modal .swal2-confirm:focus,
  .swal2-modal .swal2-confirm:hover {
    background-color: #333333;
    border-color: #333333;
    color: white; }
  .swal2-modal .swal2-confirm:active {
    background-color: #333333;
    border-color: #333333;
    color: white; }
  .swal2-modal .swal2-cancel {
    background-color: transparent;
    border-color: #424242;
    color: white; }
  .swal2-modal .swal2-cancel:focus,
  .swal2-modal .swal2-cancel:hover {
    background-color: transparent;
    border-color: #424242;
    color: white; }
  .swal2-modal .swal2-cancel:active {
    background-color: transparent;
    border-color: #424242;
    color: white; }
  .swal2-modal .button + .button {
    margin-left: 0.78571rem; }

.swal2-icon {
  display: flex; }

.swal2-container {
  z-index: 1000; }

html,
body {
  height: auto; }

body {
  padding-top: 55px; }
  @media (min-width: 801px) {
    body {
      padding-top: 0; } }

figure {
  margin-bottom: 2rem;
  margin-top: 2rem; }
  figure > figcaption {
    margin-bottom: -0.5rem; }

figcaption {
  color: #a5a5a5;
  margin-top: 0.78571rem; }

body {
  font-size: 1rem;
  font-weight: 400; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-top: 2.28571rem; }

h5,
h6 {
  text-transform: uppercase; }

a {
  transition: color 0.15s ease; }

cite {
  line-height: 1.5;
  margin: 0.5rem 0 0; }

.page-heading {
  margin: 0 0 1.5rem;
  text-align: center; }

h1 {
  font-size: 42px; }

h2 {
  font-size: 32px; }

h3 {
  font-size: 21px; }

h4 {
  font-size: 20px; }

h5 {
  font-size: 15px; }

h6 {
  font-size: 13px; }

.definitionList:before, .definitionList:after {
  content: " ";
  display: table; }

.definitionList:after {
  clear: both; }

.definitionList-key {
  color: #989898;
  float: left;
  font-weight: 400;
  margin: 0 0.35714rem 0 0; }

.definitionList-value {
  margin: 0; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z' fill='rgba(117, 117, 117, 0.999)' /%3E%3C/svg%3E");
  background-position: right 0.57143rem top 0.71429rem;
  border-radius: 0;
  padding: 0.75rem 3rem 0.75rem 1rem; }

.form-label small {
  float: right;
  margin-top: 0.35714rem; }

.form-label--inlineSmall small {
  color: #989898;
  float: none;
  font-size: inherit;
  font-weight: 400;
  margin-left: 0.35714rem;
  text-transform: none; }

.table {
  margin-top: 2rem; }
  .table td + td {
    border-left: 1px solid #ebebeb; }
  .table .table-alignCenter {
    text-align: center; }
  .table .table-alignRight {
    text-align: right; }

.table-actions {
  margin: 1.5rem;
  text-align: center; }
  .table-actions .form {
    margin-bottom: 0; }
  .table-actions .button {
    display: block;
    margin-left: 0;
    margin-right: 0;
    width: 100%; }
    @media (min-width: 551px) {
      .table-actions .button {
        display: inline-block;
        margin-bottom: 0;
        width: auto; } }
    @media (min-width: 551px) {
      .table-actions .button + .button {
        margin-left: 0.35714rem; } }

.table--line {
  border-color: #ebebeb;
  border-width: 0 0 1px; }
  .table--line .table-thead {
    background-color: white;
    border-color: #ebebeb;
    border-width: 0 0 1px; }
    .table--line .table-thead tr th {
      padding-left: 0;
      padding-right: 0; }
      @media (min-width: 551px) {
        .table--line .table-thead tr th {
          text-align: center; }
          .table--line .table-thead tr th:first-child {
            text-align: left; }
          .table--line .table-thead tr th:last-child {
            text-align: right; } }
      .table--line .table-thead tr th + th {
        padding-left: 1.5rem; }
  .table--line tr {
    border-color: 1px solid #ebebeb; }
    .table--line tr td {
      display: block;
      padding-left: 0;
      padding-right: 0; }
      @media (min-width: 551px) {
        .table--line tr td {
          text-align: center; }
          .table--line tr td:first-child {
            text-align: left; }
          .table--line tr td:last-child {
            text-align: right; } }
      .table--line tr td + td {
        padding-left: 1.5rem; }
  .table--line td + td {
    border-left: 0; }

.dropdown {
  left: -9999px;
  outline: none;
  position: absolute; }

.dropdown-menu {
  z-index: 5; }
  .dropdown-menu.is-loading .loadingOverlay {
    background: none;
    padding: 4.5rem 0;
    position: relative; }
  .dropdown-menu.is-open {
    display: block; }
  .dropdown-menu .button:focus {
    z-index: 5; }

.dropdown-menu-item {
  text-align: left; }
  .dropdown-menu-item:first-child > a {
    padding-top: 0.78571rem; }
  .dropdown-menu-item:last-child > a {
    padding-bottom: 1rem; }
  .dropdown-menu-item > a {
    margin: 0;
    padding: 0.28571rem 1.14286rem;
    text-decoration: none; }

.form-wishlist {
  position: relative; }

.dropdown-menu-button {
  width: 100%; }
  .dropdown-menu-button.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; }
  .dropdown-menu-button .icon {
    float: right;
    margin-left: 10px; }
  .dropdown-menu-button:focus {
    z-index: 10; }

#wishlist-dropdown.is-open {
  background: transparent;
  left: auto !important;
  max-width: none !important;
  width: 100% !important; }
  @media (min-width: 551px) {
    #wishlist-dropdown.is-open {
      padding-right: 20px; } }
  @media (min-width: 801px) {
    #wishlist-dropdown.is-open {
      padding-right: 0; } }
  @media (min-width: 1261px) {
    #wishlist-dropdown.is-open {
      padding-right: 11px; } }
  #wishlist-dropdown.is-open:focus {
    outline: none; }
  #wishlist-dropdown.is-open [data-wishlist] {
    border-top: 0;
    margin-bottom: 0;
    width: 100%; }
  #wishlist-dropdown.is-open .button {
    background-color: white;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 100%; }
  #wishlist-dropdown.is-open .button--has-items {
    font-weight: 700; }
  #wishlist-dropdown.is-open li:not(:last-child) .button {
    border-bottom: 0;
    border-radius: 0;
    border-top: 0;
    margin-bottom: 0; }

.modal {
  left: 50%;
  margin: 0;
  max-height: 90%;
  max-width: 95%;
  min-height: 240px;
  outline: none;
  overflow: hidden;
  padding: 0;
  top: 50% !important;
  transform: translate(-50%, -50%); }
  .modal .form-field {
    position: relative; }

@media (min-width: 1261px) {
  .modal--large {
    width: 1280px; } }

.modal-header {
  padding-left: 2.25rem;
  padding-right: 3.03571rem; }

.modal-header-title {
  font-size: 21px;
  text-align: center; }
  @media (min-width: 801px) {
    .modal-header-title {
      font-size: 32px; } }

.modal-close {
  height: 2.28571rem;
  width: 2.28571rem;
  color: #424242;
  font-size: 26px;
  line-height: 2.28571rem;
  padding: 0;
  position: absolute;
  text-align: center;
  text-decoration: none;
  z-index: 50; }
  .modal-close::before {
    border-color: transparent transparent #313440 transparent;
    border-style: solid;
    border-width: 0.71429rem;
    content: " ";
    position: absolute;
    right: 0;
    top: 50%; }
  .modal-close::after {
    background-color: #313440;
    border-radius: 0.57143rem;
    color: white;
    content: attr(title);
    cursor: default;
    font-size: 1rem;
    padding: 0.28571rem 0.42857rem;
    position: absolute;
    right: 0;
    top: 100%;
    white-space: nowrap; }
  .modal-close::before, .modal-close::after {
    display: none; }
  .modal-close:focus::before, .modal-close:focus::after {
    display: block; }
  @media (min-width: 801px) {
    .modal-close {
      font-size: 32px; } }
  .modal-close:hover {
    color: #424242; }
  .modal-close::before {
    right: 50%;
    transform: translateX(50%); }
  .modal-close::after {
    right: 50%;
    transform: translateX(0.71429rem); }

.modal-body {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2.25rem 2.25rem; }

.modal--alert {
  background-color: white !important;
  border-radius: 4px;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  padding: 40px 20px 20px;
  text-align: center; }
  .modal--alert .modal-content {
    color: #4e4e4e;
    font-size: 1.14286rem; }
  .modal--alert .button-container {
    margin: 25px 0 0; }
    .modal--alert .button-container .confirm {
      background-color: #333333;
      border-color: #333333;
      color: white; }
    .modal--alert .button-container .confirm:focus,
    .modal--alert .button-container .confirm:hover {
      background-color: #333333;
      border-color: #333333;
      color: white; }
    .modal--alert .button-container .confirm:active {
      background-color: #333333;
      border-color: #333333;
      color: white; }

.hide-content {
  opacity: 0; }

ol.breadcrumbs {
  display: none;
  font-size: 0;
  overflow: visible;
  text-align: center; }
  @media (min-width: 551px) {
    ol.breadcrumbs {
      display: block; } }

.breadcrumb {
  display: inline-block;
  float: none;
  margin-right: 0.25rem; }
  .breadcrumb.is-active > .breadcrumb-label {
    cursor: pointer;
    font-weight: 700; }
  .breadcrumb:not(:first-child)::before {
    border-right: 0.1em solid #a3a3a3;
    content: "";
    display: inline-block;
    height: 0.8em;
    margin: 0 0.25rem;
    transform: rotate(15deg); }

.panel-title {
  font-size: 20px; }

.panel--large .panel-body {
  margin-bottom: 2rem;
  padding: 2rem; }

.pagination-list {
  font-size: 0;
  margin-bottom: 1.5rem;
  text-align: center;
  float: right; }
  .pagination-list:before, .pagination-list:after {
    content: " ";
    display: table; }
  .pagination-list:after {
    clear: both; }
  .pagination-list .pagination-item {
    display: inline-block; }

.pagination-item {
  border: 1px solid transparent;
  line-height: 1; }
  .pagination-item .pagination-link {
    text-decoration: none;
    transition: all 0.2s ease; }
    .pagination-item .pagination-link:hover {
      color: #4f4f4f; }
  .pagination-item.pagination-item--current {
    border-color: #ebebeb;
    border-radius: 0;
    margin: 0 0.35714rem 0 0.78571rem; }
  .pagination-item.pagination-item--previous > a, .pagination-item.pagination-item--next > a {
    color: #8cc640; }
    .pagination-item.pagination-item--previous > a:hover, .pagination-item.pagination-item--next > a:hover {
      color: #a5a5a5; }
      .pagination-item.pagination-item--previous > a:hover .icon > svg, .pagination-item.pagination-item--next > a:hover .icon > svg {
        fill: #a5a5a5; }

.pagination-item--previous .icon,
.pagination-item--next .icon {
  height: 1.42857rem;
  margin-top: -0.14286rem;
  width: 1.42857rem; }

.pagination-item--previous {
  float: left; }
  .pagination-item--previous .icon {
    margin-left: -0.85714rem; }

.pagination-item--next {
  float: right; }
  .pagination-item--next .icon {
    margin-right: -0.85714rem; }

.pagination-list--small {
  position: relative; }
  .pagination-list--small .pagination-item {
    color: #989898;
    cursor: inherit;
    line-height: 1.5; }
  .pagination-list--small .pagination-link {
    padding: 0 0.35714rem; }
  .pagination-list--small .pagination-item--previous,
  .pagination-list--small .pagination-item--next {
    position: absolute;
    top: 0; }
  .pagination-list--small .pagination-item--previous {
    left: 0; }
  .pagination-list--small .pagination-item--next {
    right: 0; }

.button {
  line-height: 1rem;
  transition: all 0.15s ease; }
  .button + .button {
    margin-left: 0; }
    @media (min-width: 801px) {
      .button + .button {
        margin-left: 0.78571rem; } }

.button[disabled] {
  cursor: not-allowed; }

.button--icon svg {
  fill: white; }

.tab {
  border-top: 1px solid #ebebeb;
  float: none; }
  @media (min-width: 801px) {
    .tab {
      border-top-color: white;
      float: left; } }
  .tab.is-active {
    border-left-color: white;
    border-right-color: white; }
    @media (min-width: 551px) {
      .tab.is-active {
        margin-bottom: -1px; } }
    @media (min-width: 801px) {
      .tab.is-active {
        border: 1px solid #ebebeb;
        border-bottom: 1px solid white; } }

.tab-title {
  padding: 1.14286rem 0;
  text-align: center;
  text-decoration: none; }
  @media (min-width: 551px) {
    .tab-title {
      text-align: left; } }
  @media (min-width: 801px) {
    .tab-title {
      padding: 0.78571rem 1.5rem; } }
  @media (min-width: 1261px) {
    .tab-title {
      padding: 0.78571rem 1.28571rem; } }

.tab-content.has-jsContent {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  visibility: hidden; }
  .tab-content.has-jsContent.is-active {
    height: auto;
    overflow: visible;
    padding: 1.5rem 0;
    visibility: visible; }

@media (min-width: 551px) {
  .tab-content .productReview {
    width: 50%; } }

@media (min-width: 801px) {
  .tab-content .productReview {
    width: 33.33333%; } }

@media (min-width: 1261px) {
  .tab-content .productReview {
    width: 50%; } }

.tab-content .productReviews {
  border-top: 0; }

.accordion {
  border-radius: 0;
  box-shadow: none; }
  .accordion .navList {
    margin-bottom: 0; }

.accordion-content {
  border: 0; }
  .accordion-content .form:only-child {
    margin-bottom: 0; }

.accordion-title {
  color: #4e4e4e;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 1.07143rem;
  margin: 0; }

.accordion-navigation {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-right: 1rem;
  position: relative;
  text-decoration: none;
  width: 100%; }

@media (min-width: 801px) {
  .accordion--navList {
    border: 0; } }

@media (min-width: 801px) {
  .sidebarBlock + .accordion--navList {
    margin-top: 2rem; } }

@media (min-width: 801px) {
  .accordion--navList .accordion-block {
    margin-top: 2rem; } }

.accordion--navList .accordion-content {
  padding: 1rem; }
  @media (min-width: 801px) {
    .accordion--navList .accordion-content {
      padding: 0; } }

@media (min-width: 801px) {
  .accordion--navList .accordion-navigation {
    background-position: right 0 top 50%;
    border: 0;
    margin-bottom: 0.78571rem !important;
    padding: 0; } }

.accordion--navList .accordion-title {
  font-weight: normal;
  padding: 1rem;
  text-decoration: none;
  text-transform: inherit; }
  @media (min-width: 801px) {
    .accordion--navList .accordion-title {
      padding: 0; } }

.accordion--navList .accordion-indicator {
  fill: #a5a5a5; }

.accordion-block:first-child {
  margin-top: 0; }
  .accordion-block:first-child .accordion-navigation {
    border-radius: 0 0 0 0; }

.accordion-block:last-child .accordion-navigation,
.accordion-block:last-child .accordion-content {
  border-radius: 0 0 0 0; }

.accordion-block:last-child .accordion-navigation {
  border-bottom-width: 0; }
  .accordion-block:last-child .accordion-navigation.is-open {
    border-bottom-width: 1px;
    border-radius: 0; }

.accordion-nav-clear-holder {
  position: relative; }

.facetedSearch-clearLink {
  color: #989898;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%); }
  @media (min-width: 801px) {
    .facetedSearch-clearLink {
      right: 20px;
      top: 3px;
      transform: none; } }
  .facetedSearch-clearLink:hover {
    color: #4f4f4f; }

ul.inlineList {
  overflow: visible; }
  ul.inlineList:before, ul.inlineList:after {
    content: " ";
    display: table; }
  ul.inlineList:after {
    clear: both; }

.inlineList--labels {
  margin-bottom: 0;
  margin-left: -0.78571rem; }
  .inlineList--labels > li {
    margin-bottom: 0.78571rem;
    margin-left: 0.78571rem; }

.alertBox {
  border-radius: 4px;
  color: #333333; }

.alertBox-icon .icon {
  height: 1.78571rem;
  width: 1.78571rem; }

.alertBox--info {
  background-color: #707070;
  color: white; }
  .alertBox--info .alertBox-close svg {
    fill: #dfdfdf; }

.form--hiddenLabels .form-label {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.form-inlineMessage {
  display: block; }

.form-field--error .form-input {
  float: none; }

.form-field--error .form-inlineMessage::before {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='rgba(204, 71, 73, 0.999)' /%3E%3C/svg%3E") no-repeat;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 1rem;
  left: -0.14286rem;
  margin-right: 0.07143rem;
  position: relative;
  top: 0.21429rem;
  width: 1rem; }

.form-field--success .form-input[type="text"] {
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='rgba(0, 138, 6, 0.999)' /%3E%3C/svg%3E");
  background-position: right 0.71429rem center;
  background-repeat: no-repeat; }

.form-field--success .form-input[name="credit_card_number"] {
  background-position: right 2.28571rem center; }

.form-field--success .form-input[name="cvv"] {
  background-position: right 2.28571rem center; }

.form-checkbox + .form-label:last-child,
.form-radio + .form-label:last-child {
  display: block;
  margin-bottom: -0.28571rem; }

.form-checkbox + .form-label::after,
.form-radio + .form-label::after {
  top: 0.28571rem; }

.form-checkbox + .form-label::before,
.form-radio + .form-label::before {
  top: 0.21429rem; }

.form-option-wrapper {
  display: inline-block;
  position: relative; }
  .form-option-wrapper .form-radio,
  .form-option-wrapper .form-checkbox {
    bottom: 0.5rem;
    left: 0.5rem; }

.form-actions {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  display: block;
  text-align: center; }
  .form-actions:before, .form-actions:after {
    content: " ";
    display: table; }
  .form-actions:after {
    clear: both; }
  @media (min-width: 551px) {
    .form-actions {
      margin-top: 1.5rem; } }
  .form-actions .button,
  .form-actions input,
  .form-actions a {
    vertical-align: top;
    width: 100%; }
    @media (min-width: 551px) {
      .form-actions .button,
      .form-actions input,
      .form-actions a {
        margin-bottom: 0;
        width: auto; } }
    .form-actions .button + .button,
    .form-actions .button + input,
    .form-actions .button + a,
    .form-actions input + .button,
    .form-actions input + input,
    .form-actions input + a,
    .form-actions a + .button,
    .form-actions a + input,
    .form-actions a + a {
      margin-top: 0.78571rem; }
      @media (min-width: 551px) {
        .form-actions .button + .button,
        .form-actions .button + input,
        .form-actions .button + a,
        .form-actions input + .button,
        .form-actions input + input,
        .form-actions input + a,
        .form-actions a + .button,
        .form-actions a + input,
        .form-actions a + a {
          margin: 0 0 0 0.78571rem; } }

.form-label--alternate {
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-size: 13px;
  margin-bottom: 0.78571rem; }

.form-select--date {
  width: initial; }
  .form-select--date + .form-select--date {
    margin-left: 0.35714rem; }

.form-select--small,
.form-select--date {
  background-position: right 0.5rem top 0.5rem;
  background-size: 1.28571rem;
  font-size: 13px;
  height: 2.28571rem;
  line-height: 1rem;
  max-width: 20rem;
  padding: 0.57143rem 0.78571rem;
  padding-right: 2rem; }

.form-select--short {
  max-width: 6rem;
  width: 4.5rem; }

.form-file {
  margin-bottom: 0.5rem; }

.form-fileDescription {
  color: #a5a5a5;
  font-size: 13px; }

.form-field-group {
  border: 1px solid #cccccc;
  border-radius: 0;
  padding: 1.5rem; }

.form-column {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }
  @media (min-width: 551px) {
    .form-column {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 50%;
      float: left; } }

.form-prefixPostfix.wrap {
  flex-wrap: wrap; }

.form-prefixPostfix .form-input,
.form-prefixPostfix .button {
  display: block;
  width: 100%; }

@media (min-width: 1261px) {
  .form-prefixPostfix .form-input {
    width: auto; } }

.form-prefixPostfix .form-input::-webkit-input-placeholder {
  color: #4e4e4e; }

.form-prefixPostfix .form-input::-moz-placeholder {
  color: #4e4e4e; }

.form-prefixPostfix .form-input:-ms-input-placeholder {
  color: #4e4e4e; }

@media (min-width: 1261px) {
  .form-prefixPostfix .button {
    width: auto; } }

.form-prefixPostfix .form-inlineMessage {
  margin-bottom: 0.35714rem; }
  @media (min-width: 1261px) {
    .form-prefixPostfix .form-inlineMessage {
      margin-bottom: 0; } }

.form-prefixPostfix--centeredColumn.wrap {
  flex-direction: column; }

.form-prefixPostfix--centeredColumn .g-recaptcha {
  margin: 2em auto 0; }

@media (min-width: 1261px) {
  .form-prefixPostfix--centeredColumn .form-prefixPostfix-button--postfix {
    margin: 1em 0 0.78571rem; } }

.form-prefixPostfix-button--postfix {
  margin: 0.78571rem 0 0;
  order: 1; }
  @media (min-width: 1261px) {
    .form-prefixPostfix-button--postfix {
      margin: 0 0 0 0.78571rem;
      order: 0; } }

.form-increment .button {
  margin: 0;
  padding: 0.21429rem 0.35714rem; }

.form-input--incrementTotal {
  border: 0;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  height: auto;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  width: 2.5rem; }
  .form-field--success .form-input--incrementTotal {
    float: none; }

.form-option {
  border: 1px solid #cccccc;
  color: #4e4e4e;
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
  padding: 1px;
  transition: all 0.15s ease; }
  .form-option:hover {
    border-color: #999999; }
  .form-radio:checked + .form-option {
    border-color: #333333;
    box-shadow: 0 0 0 1px #333333; }

.form-option-variant {
  display: inline-block;
  font-size: 1rem;
  min-width: 2.71429rem;
  padding: 1px 0.35714rem;
  pointer-events: none;
  text-align: center; }

.form-option-variant--color,
.form-option-variant--pattern {
  height: 1.57143rem;
  width: 1.57143rem;
  min-width: initial;
  padding: 0; }
  @media (min-width: 551px) {
    .form-option-variant--color,
    .form-option-variant--pattern {
      pointer-events: inherit; } }

.form-option-variant--pattern {
  background-position: center;
  background-repeat: no-repeat; }

.form-input--small {
  font-size: 13px;
  height: 2.28571rem;
  line-height: 1rem;
  padding: 0.57143rem 0.78571rem; }

.form-minMaxRow {
  margin-left: -0.375rem;
  margin-right: -0.375rem; }
  .form-minMaxRow:before, .form-minMaxRow:after {
    content: " ";
    display: table; }
  .form-minMaxRow:after {
    clear: both; }
  .form-minMaxRow .form-field {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 33.33333%;
    float: left;
    margin-bottom: 0;
    padding-left: 0.375rem;
    padding-right: 0.375rem; }
  .form-minMaxRow .button {
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%; }

@media (min-width: 551px) {
  .form-row--half > .form-field:nth-child(odd) {
    clear: left; } }

[data-product-attribute] .form-option {
  overflow: hidden;
  position: relative; }
  [data-product-attribute] .form-option.unavailable {
    background-color: #ddd;
    opacity: 0.3; }
    [data-product-attribute] .form-option.unavailable::before {
      background-color: #000;
      content: "";
      height: 2px;
      left: -5px;
      position: absolute;
      top: 11px;
      transform: rotate(-45deg);
      width: 141%; }

[data-product-attribute="set-radio"] .unavailable,
[data-product-attribute="product-list"] .unavailable {
  opacity: 0.6;
  text-decoration: line-through; }

.card:focus-within .card-figcaption {
  opacity: 1; }

.card.focus-within .card-figcaption {
  opacity: 1; }

.card-figure {
  margin-top: 0;
  padding: 3px;
  position: relative; }
  .card-figure:hover .card-figcaption {
    opacity: 1; }
  .card-figure__link {
    display: block;
    position: relative; }

.card-img-container {
  max-width: 300px; }
  .card-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }

.card-figcaption {
  display: none;
  margin: 0;
  pointer-events: none; }
  @media (min-width: 801px) {
    .card-figcaption {
      display: block; } }

.card-figcaption-body {
  display: inline-block;
  pointer-events: all;
  transform: translate3d(0, -50%, 0); }

.card-image {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  border: 0;
  /* Object-fit polyfill */
  font-family: "object-fit: contain;";
  max-height: 100%;
  object-fit: contain;
  width: 100%; }

.card-title {
  font-size: 15px;
  margin: 0 0 0.28571rem; }
  .card-title > a {
    color: #4e4e4e;
    display: block;
    text-decoration: none; }
    .card-title > a:hover {
      color: #4e4e4e; }

.card-text {
  margin-bottom: 0.21429rem; }
  .card-text abbr {
    border: 0;
    color: inherit;
    font-size: inherit; }

.card-figcaption-button {
  border: none;
  display: block; }
  .card-figcaption-button:active {
    background-color: #333333;
    border: none; }
  .card-figcaption-body .card-figcaption-button:focus {
    outline: revert; }

.card-body {
  text-align: center; }
  @media (min-width: 551px) {
    .card-body {
      text-align: left; } }

.card--alternate {
  border: 3px solid white;
  transition: all 0.15s ease; }
  .card--alternate .card-body {
    background-color: white;
    padding: 0.78571rem;
    transition: all 0.15s ease; }
    @media (min-width: 551px) {
      .card--alternate .card-body {
        padding: 1.5rem; } }
  .card--alternate:hover {
    border-color: #a3a3a3; }
    .card--alternate:hover .card-body {
      background-color: #a3a3a3; }
      .card--alternate:hover .card-body .card-text {
        color: #333333; }
    .card--alternate:hover .card-title > a {
      color: #333333; }

.navList,
.navBar {
  margin-left: 0; }

.navList-action,
.navBar-action {
  text-decoration: none; }

.navList-action.is-active {
  font-weight: 700; }

.navList-action--checkbox {
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.35714rem;
  padding-left: 1.85714rem;
  position: relative;
  vertical-align: baseline;
  width: 100%; }
  .navList-action--checkbox::before, .navList-action--checkbox::after {
    content: "";
    display: block;
    position: absolute;
    transition: all 50ms ease-out; }
  .navList-action--checkbox::before {
    background-color: white;
    border: solid #8f8f8f;
    border-width: 1px;
    height: 1.14286rem;
    left: 0;
    top: 0;
    width: 1.14286rem; }
  .navList-action--checkbox::after {
    height: 1rem;
    left: 1px;
    opacity: 0;
    top: 1px;
    transform: scale(0);
    width: 1rem; }
  .navList-action--checkbox::before {
    border-radius: 0; }
  .navList-action--checkbox::after {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='rgba(51, 51, 51, 0.999)' /%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100%;
    color: rgba(51, 51, 51, 0.999);
    content: "";
    font-size: 1rem;
    line-height: 1;
    text-align: center; }
  .navList-action--checkbox::before, .navList-action--checkbox::after {
    top: 50%; }
  .navList-action--checkbox::before {
    margin-top: -0.57143rem; }
  .navList-action--checkbox::after {
    margin-top: -0.5rem; }
  .navList-action--checkbox.is-disabled {
    cursor: default; }
    .navList-action--checkbox.is-disabled::before {
      background-color: white; }
  .navList-action--checkbox.is-checked::after, .navList-action--checkbox.is-selected::after {
    opacity: 1;
    transform: scale(1); }

.navList-action-close {
  background: #e5e5e5;
  border-radius: 100%;
  display: inline-block;
  float: right;
  line-height: 0;
  opacity: 0;
  padding: 0.28571rem;
  transition: opacity 0.3s ease;
  visibility: hidden; }
  .navList-action-close .icon {
    height: 0.92857rem;
    width: 0.92857rem;
    fill: #8cc640; }
  .navList-action.is-selected:hover .navList-action-close {
    opacity: 1;
    visibility: visible; }

.navBar--sub {
  margin-bottom: 4.5rem;
  text-align: center; }
  .navBar--sub .navBar-section {
    float: none; }
  .navBar--sub .navBar-item {
    float: none;
    margin: 0 0.78571rem; }
    @media (min-width: 801px) {
      .navBar--sub .navBar-item {
        display: inline-block; } }
    @media (min-width: 801px) {
      .navBar--sub .navBar-item.is-active {
        border-bottom: 1px solid #4e4e4e; } }
    .navBar--sub .navBar-item.is-active > .navBar-action {
      color: #424242; }
    @media (min-width: 801px) {
      .navBar--sub .navBar-item.navBar-item--separate {
        border-left: 1px solid #989898;
        margin: 0;
        padding-left: 0.78571rem; } }
  .navBar--sub .navBar-action {
    color: #989898;
    font-size: 1rem;
    padding: 0; }
    .navBar--sub .navBar-action:hover {
      color: #4f4f4f; }

.loadingOverlay {
  background-color: rgba(255, 255, 255, 0.9);
  display: none;
  z-index: 20; }

.icons-svg-sprite {
  display: none; }

.icon,
.icon svg {
  transition: all 0.15s ease; }

.actionBar-section .form-field {
  background-color: white;
  border: 1px solid #cccccc;
  border-radius: 0; }
  .actionBar-section .form-field:hover {
    border-color: #999999; }

.actionBar-section .form-label {
  color: #989898;
  font-size: 13px;
  line-height: 2.14286rem;
  margin-bottom: 0;
  padding-left: 0.78571rem; }

.actionBar-section .form-input,
.actionBar-section .form-select {
  border: 0;
  padding-left: 0.21429rem;
  width: auto; }

.actionBar-section .form-label,
.actionBar-section .form-input,
.actionBar-section .form-select {
  display: inline-block; }

.actionBar-section .form-select {
  color: #8cc640;
  height: 2.14286rem; }

.has-ribbon {
  position: relative; }

.ribbon {
  background-color: #333333;
  color: white;
  cursor: default;
  font-weight: 700;
  margin: -0.78571rem -0.78571rem 0 0;
  padding: 0.07143rem 1rem;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
  z-index: 1; }

.navUser {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  top: 26px;
  width: 100%;
  z-index: 5; }
  .navUser:before, .navUser:after {
    content: " ";
    display: table; }
  .navUser:after {
    clear: both; }
  .navUser ul,
  .navUser ol {
    list-style: none;
    margin-left: 0;
    margin: 0;
    padding: 0; }
    .navUser ul ul,
    .navUser ul ol,
    .navUser ol ul,
    .navUser ol ol {
      list-style: none;
      margin-bottom: 0; }
    .navUser ul li,
    .navUser ol li {
      margin: 0;
      padding: 0; }
  .navUser-section {
    float: left; }
    .navUser-section:before, .navUser-section:after {
      content: " ";
      display: table; }
    .navUser-section:after {
      clear: both; }
  .navUser-section--alt {
    float: right;
    margin-left: 1.5rem; }
  .navUser-section + .navUser-section {
    margin-left: 1.5rem; }
  @media (min-width: 551px) {
    .navUser-item {
      float: left; } }
  .navUser-item, .navUser-action {
    display: block; }
  @media (min-width: 801px) {
    .navUser {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      z-index: 50; } }
  .navUser .dropdown-menu {
    background-color: #f9f9f9;
    border: 1px solid #f9f9f9;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.13);
    position: absolute; }
    .navUser .dropdown-menu.is-open::before {
      border: inset 10px;
      content: "";
      display: block;
      height: 0;
      width: 0;
      border-color: transparent transparent #f9f9f9 transparent;
      border-bottom-style: solid;
      bottom: 100%;
      left: 0.78571rem;
      position: absolute; }
    .navUser .dropdown-menu.is-open::after {
      border: inset 8px;
      content: "";
      display: block;
      height: 0;
      width: 0;
      border-color: transparent transparent #f9f9f9 transparent;
      border-bottom-style: solid;
      bottom: 100%;
      left: 0.92857rem;
      position: absolute; }

@media (min-width: 801px) {
  .navUser-section {
    position: relative; } }

.navUser-action {
  color: #4e4e4e;
  text-decoration: none; }
  .navUser-action:hover, .navUser-action.is-open {
    color: #4e4e4e; }
    .navUser-action:hover svg, .navUser-action.is-open svg {
      fill: #4e4e4e;
      stroke: #4e4e4e; }
  .navUser-action .icon {
    margin: -1px 0 0 0.21429rem; }
  .navUser-action svg {
    fill: #4e4e4e;
    stroke: #4e4e4e;
    transition: all 0.15s ease; }

.navUser-action--currencySelector + .dropdown-menu::before {
  left: auto !important;
  right: 0.78571rem; }

.navUser-action--currencySelector + .dropdown-menu::after {
  left: auto !important;
  right: 0.92857rem; }

.navUser-action--storeCredit + .dropdown-menu {
  max-width: 21.42857rem;
  padding: 1.5rem; }
  .navUser-action--storeCredit + .dropdown-menu::before {
    left: 10rem !important; }
  .navUser-action--storeCredit + .dropdown-menu::after {
    left: 10.14286rem !important; }

.navUser-action-divider {
  border-right: 1px solid #ebebeb;
  color: #989898;
  display: inline-block;
  padding: 0 1.42857rem 0 0;
  text-decoration: none; }

.navUser-item {
  display: none; }
  .navUser-item svg, .navUser-item g {
    fill: #4e4e4e; }
  .navUser-item:not(.navUser-item--account):hover svg, .navUser-item:not(.navUser-item--account):hover g {
    fill: #4e4e4e;
    stroke: #4e4e4e; }
  @media (min-width: 801px) {
    .navUser-item {
      display: block; }
      .navUser-item.navUser-item--social {
        margin-top: 0.35714rem;
        padding-right: 0.35714rem; }
      .navUser-item.navUser-item--divider {
        font-size: 1.78571rem;
        margin-top: 0.57143rem;
        padding-left: 0.14286rem; } }

.navUser-item--cart {
  display: block; }
  @media (max-width: 551px) {
    .navUser-item--cart__hidden-s {
      display: none; } }
  .navUser-item--cart .navUser-action {
    color: #4e4e4e; }
    .navUser-item--cart .navUser-action:hover, .navUser-item--cart .navUser-action.is-open {
      color: #4e4e4e; }
  .navUser-item--cart .dropdown-menu {
    max-width: 22.85714rem; }
    @media (min-width: 801px) {
      .navUser-item--cart .dropdown-menu.is-open {
        right: 0; } }
    .navUser-item--cart .dropdown-menu.is-open::before, .navUser-item--cart .dropdown-menu.is-open::after {
      left: auto; }
    .navUser-item--cart .dropdown-menu.is-open::before {
      right: 0.42857rem; }
      @media (min-width: 801px) {
        .navUser-item--cart .dropdown-menu.is-open::before {
          right: 0.78571rem; } }
    .navUser-item--cart .dropdown-menu.is-open::after {
      right: 0.57143rem; }
      @media (min-width: 801px) {
        .navUser-item--cart .dropdown-menu.is-open::after {
          right: 0.92857rem; } }

.navUser-item-cartLabel {
  display: none; }
  @media (min-width: 551px) {
    .navUser-item-cartLabel {
      display: inline; } }

.navUser-item--compare {
  display: none; }
  .navUser-item--compare.show {
    display: block; }

.navUser-item--account .navUser-or + .navUser-action {
  margin-right: -0.5rem; }

.navUser-item--account .navUser-action {
  display: inline-block; }

.navUser-or {
  color: #4e4e4e;
  cursor: default;
  display: inline-block;
  margin: 0 -0.85714rem;
  padding: 0 2px;
  position: relative;
  z-index: 1; }

.navUser-action--quickSearch.is-open {
  position: relative; }
  .navUser-action--quickSearch.is-open::before {
    border: inset 10px;
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-color: transparent transparent #f9f9f9 transparent;
    border-bottom-style: solid;
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%); }

.dropdown--quickSearch {
  background-color: white;
  display: none;
  padding: 1.5rem 0; }
  @media (min-width: 551px) {
    .dropdown--quickSearch {
      padding: 3rem; } }
  .dropdown--quickSearch.is-open {
    display: block;
    left: 0 !important;
    outline: none;
    right: 0 !important;
    width: 100% !important;
    z-index: 50; }
  .dropdown--quickSearch .form {
    margin: auto;
    max-width: 30rem; }
  .dropdown--quickSearch .form,
  .dropdown--quickSearch .form-field {
    margin-bottom: 0; }
  .dropdown--quickSearch .form-input {
    font-size: 20px;
    height: unset; }
  .dropdown--quickSearch .productGrid {
    padding: 1.5rem 0 0; }
    @media (min-width: 551px) {
      .dropdown--quickSearch .productGrid {
        padding: 3rem 0 0; } }

.countPill {
  background-color: #4e4e4e;
  border-radius: 50%;
  color: white;
  display: none;
  font-size: 12px;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  margin-left: 0.21429rem;
  text-align: center;
  width: 20px; }

.countPill--positive {
  display: inline-block; }

.countPill--alt {
  background-color: #dfdfdf;
  color: #333333; }

.navPages .navPage-subMenu-list, .navPage-childList {
  border-left: 1px solid #d2d2d2;
  margin: 0.35714rem 0.78571rem;
  padding-left: 0.78571rem; }

.has-activeNavPages {
  overflow: hidden;
  -webkit-overflow-scrolling: auto; }

.navPages-container {
  bottom: 0;
  display: none;
  height: 100%;
  left: 0;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  right: 0;
  z-index: 10; }
  @media (min-width: 801px) {
    .navPages-container {
      background: transparent;
      display: block;
      height: auto;
      padding: 0;
      position: relative; } }
  .navPages-container.is-open {
    display: block;
    padding-top: 55px;
    z-index: 0; }

.navPages {
  background-color: white;
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem; }
  @media (min-width: 801px) {
    .navPages {
      margin: 0 auto;
      max-width: 85.71429rem;
      width: 100%;
      background: white;
      font-size: 0;
      overflow-y: visible;
      padding: 0;
      text-align: center; }
      .navPages:before, .navPages:after {
        content: " ";
        display: table; }
      .navPages:after {
        clear: both; }
      .navPages:before, .navPages:after {
        content: " ";
        display: table; }
      .navPages:after {
        clear: both; }
      .navPages ul,
      .navPages ol {
        list-style: none;
        margin-left: 0;
        margin: 0;
        padding: 0; }
        .navPages ul ul,
        .navPages ul ol,
        .navPages ol ul,
        .navPages ol ol {
          list-style: none;
          margin-bottom: 0; }
        .navPages ul li,
        .navPages ol li {
          margin: 0;
          padding: 0; }
      .navPages-section {
        float: left; }
        .navPages-section:before, .navPages-section:after {
          content: " ";
          display: table; }
        .navPages-section:after {
          clear: both; }
      .navPages-section--alt {
        float: right;
        margin-left: 1.5rem; }
      .navPages-section + .navPages-section {
        margin-left: 1.5rem; } }
  @media (min-width: 801px) and (min-width: 551px) {
    .navPages-item {
      float: left; } }
  @media (min-width: 801px) {
      .navPages-item, .navPages-action {
        display: block; } }
  .navPages ul {
    list-style: none; }
  .navPages .navPage-subMenu-list {
    border-left: 0;
    list-style: none;
    margin-left: 0;
    padding-left: 0; }
    @media (min-width: 801px) {
      .navPages .navPage-subMenu-list {
        margin: 0 auto;
        max-width: 85.71429rem;
        width: 100%;
        border-left: 0;
        margin: auto;
        padding-left: 0; }
        .navPages .navPage-subMenu-list:before, .navPages .navPage-subMenu-list:after {
          content: " ";
          display: table; }
        .navPages .navPage-subMenu-list:after {
          clear: both; } }

.navPages-list {
  margin: 0; }
  @media (min-width: 801px) {
    .navPages-list {
      display: inline-block;
      float: none; } }

.navPages-list-depth-max.subMenu-is-open .is-hidden {
  display: none; }
  @media (min-width: 801px) {
    .navPages-list-depth-max.subMenu-is-open .is-hidden {
      display: inline-block; } }

.navPages-list-depth-max.subMenu-is-open .navPages-item-page {
  display: none; }
  @media (min-width: 801px) {
    .navPages-list-depth-max.subMenu-is-open .navPages-item-page {
      display: inline-block; } }

@media (min-width: 801px) {
  .navPages-action-depth-max.has-subMenu.is-root.is-open .navPages-action-moreIcon {
    transform: rotate(0); } }

.navPages-action-depth-max.has-subMenu.is-open {
  border-bottom: 1px solid #d2d2d2;
  text-align: center; }
  @media (min-width: 801px) {
    .navPages-action-depth-max.has-subMenu.is-open {
      border-bottom: 0;
      text-align: left; } }
  .navPages-action-depth-max.has-subMenu.is-open .navPages-action-moreIcon {
    border: solid 1px #d6cdc0;
    border-radius: 4px;
    float: left;
    height: 35px;
    margin-top: -10px;
    padding: 11.7px;
    width: 35px; }
    @media (min-width: 801px) {
      .navPages-action-depth-max.has-subMenu.is-open .navPages-action-moreIcon {
        height: 0.57143rem;
        width: 0.57143rem;
        border: 0;
        border-radius: 0;
        float: none;
        margin-top: 0;
        padding: 0;
        transform: rotate(-90deg); } }
  .navPages-action-depth-max.has-subMenu.is-open svg {
    height: 9.6px;
    width: 9.6px; }
    @media (min-width: 801px) {
      .navPages-action-depth-max.has-subMenu.is-open svg {
        height: 100%;
        width: 100%; } }

.navPages-action {
  color: #4e4e4e;
  display: block;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.78571rem 0;
  text-decoration: none;
  text-transform: uppercase; }
  @media (min-width: 801px) {
    .navPages-action {
      display: inline-block;
      padding: 0.78571rem 1.14286rem 1.14286rem; }
      .navPages-action.is-open {
        background-color: #f9f9f9; } }
  .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu {
    align-items: center;
    display: flex; }
  @media (min-width: 801px) {
    .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu {
      justify-content: center; } }
  .navPages-action.is-open svg,
  .navPages-action .collapsible-icon-wrapper.is-open svg {
    fill: #969696;
    stroke: #969696; }
  @media (min-width: 801px) {
    .navPages-action {
      display: inline-block;
      padding: 0.78571rem 1.14286rem 1.14286rem; }
      .navPages-action.is-open {
        background-color: #f9f9f9; } }
  .navPages-action:hover, .navPages-action.activePage {
    color: #969696; }
    .navPages-action:hover svg, .navPages-action.activePage svg {
      fill: #969696;
      stroke: #969696; }
  .navPages-action svg {
    fill: #4e4e4e;
    stroke: #4e4e4e;
    transition: all 0.15s ease; }

.navPages-action--storeCredit {
  color: #989898; }

.navPages-action--compare {
  display: none; }
  .navPages-action--compare.show {
    display: block; }

.navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
  height: 0.57143rem;
  width: 0.57143rem;
  margin-left: 0.35714rem; }
  @media (min-width: 801px) {
    .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
      transform: none; } }
  .has-subMenu.is-open .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon,
  .collapsible-icon-wrapper.is-open .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
    transform: rotate(0); }
  .navPages-list:not(.navPages-list-depth-max) .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
    height: 0.78571rem;
    width: 0.78571rem;
    margin: 0 1.5rem; }
    @media (min-width: 801px) {
      .navPages-list:not(.navPages-list-depth-max) .navPages-mainNav .navPages-item > a > .navPages-action-moreIcon {
        height: 0.57143rem;
        width: 0.57143rem;
        margin: 0 0 0 0.78571rem; } }

.navPage-childList {
  display: none; }
  @media (min-width: 801px) {
    .navPage-childList {
      border: 0;
      display: block; } }
  .navPage-childList.is-open {
    display: block; }
  .navPage-subMenu-action:not(.navPages-action-depth-max) + .navPage-childList {
    margin-left: 3rem; }
    @media (min-width: 801px) {
      .navPage-subMenu-action:not(.navPages-action-depth-max) + .navPage-childList {
        margin-left: 0; } }

.navPage-subMenu {
  display: none;
  outline: 0; }
  @media (min-width: 801px) {
    .navPage-subMenu {
      background-color: #f9f9f9;
      padding: 1.5rem 1.5rem 2.28571rem !important;
      position: absolute;
      text-align: left; }
      .navPage-subMenu.is-open {
        display: block;
        left: 0;
        width: 100%; }
      .navPage-subMenu .navPages-action-moreIcon {
        display: none; } }
  .navPage-subMenu.is-open {
    display: block; }
  .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu + .navPage-subMenu .navPage-subMenu-list {
    margin-right: 0; }
    @media (min-width: 801px) {
      .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu + .navPage-subMenu .navPage-subMenu-list {
        margin-right: auto; } }

@media (min-width: 801px) {
  .has-subMenu.is-root + .navPage-subMenu-horizontal {
    border-left: 0;
    height: auto;
    left: inherit;
    margin: auto;
    top: inherit;
    width: 15.35714rem; } }

@media (min-width: 801px) {
  .navPage-subMenu-horizontal.is-open {
    border-left: 1px solid #d2d2d2;
    display: inherit;
    height: auto;
    margin-left: 15.35714rem;
    padding: 0 !important;
    top: 0;
    width: 16.35714rem; } }

@media (min-width: 801px) {
  .navPage-subMenu-horizontal .navPages-action-moreIcon {
    display: inline-block;
    transform: rotate(-90deg); } }

.navPage-subMenu-item {
  padding: 0.78571rem 0; }
  @media (min-width: 801px) {
    .navPage-subMenu-item .navPages-action {
      width: 100%; }
    .navPage-subMenu-item > .navPage-subMenu-action {
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 1.14286rem; } }

.navPage-subMenu-item-child,
.navPage-subMenu-item-parent {
  width: 100%; }
  @media (min-width: 801px) {
    .navPage-subMenu-item-child .navPage-subMenu-action,
    .navPage-subMenu-item-parent .navPage-subMenu-action {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      width: 100%; } }

.navPage-subMenu-action {
  padding: 0.78571rem 0; }
  @media (min-width: 801px) {
    .navPage-subMenu-action {
      padding: 0.78571rem 0 1.14286rem; } }
  @media (min-width: 801px) {
    .navPages-list:not(.navPages-list-depth-max) .navPage-subMenu-action {
      padding: 0.78571rem 0 1.14286rem; } }
  .navPage-subMenu-action .collapsible-icon-wrapper {
    box-sizing: content-box;
    display: inline-block;
    height: 100%;
    text-align: right;
    width: 100%; }
    @media (min-width: 801px) {
      .navPage-subMenu-action .collapsible-icon-wrapper {
        display: none; } }

.navPage-childList-action {
  font-weight: 400;
  padding: 0 0 0.35714rem; }

.navPages-quickSearch {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 0.78571rem; }
  @media (min-width: 801px) {
    .navPages-quickSearch {
      display: none; } }
  .navPages-quickSearch > .container {
    padding: 0; }
  .navPages-quickSearch .form {
    margin: 0; }
  .navPages-quickSearch .form-field {
    margin-bottom: 0; }

@media (min-width: 801px) {
  .navPages-list--user {
    display: none; } }

.navPages-list--user #currencySelection2 {
  background-color: white;
  border: 1px solid #ebebeb; }
  .navPages-list--user #currencySelection2 .dropdown-menu-item {
    padding: 0; }
    .navPages-list--user #currencySelection2 .dropdown-menu-item:not(:last-child) {
      border-bottom: 1px solid #ebebeb; }
  .navPages-list--user #currencySelection2 a {
    padding: 0.78571rem 1.5rem; }

.tags {
  list-style: none;
  margin-left: 0;
  font-size: 0;
  text-align: center; }
  .tags ul,
  .tags ol {
    list-style: none;
    margin-bottom: 0; }

.tag {
  display: inline-block;
  font-size: 1rem; }
  .tag a {
    color: #989898;
    display: inline-block;
    padding: 0.35714rem 0.5rem;
    text-decoration: none; }
    .tag a:hover {
      color: #4f4f4f; }

.socialLinks {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
  line-height: 37px; }
  .socialLinks:before, .socialLinks:after {
    content: " ";
    display: table; }
  .socialLinks:after {
    clear: both; }
  .socialLinks ul,
  .socialLinks ol {
    list-style: none;
    margin-bottom: 0; }
  .socialLinks li {
    margin: 0;
    padding: 0; }
  .socialLinks .icon {
    height: 1.42857rem;
    width: 1.42857rem;
    margin: 0;
    text-decoration: none; }
    .socialLinks .icon:hover svg {
      fill: #424242; }
    .socialLinks .icon svg {
      fill: #424242;
      transition: all 0.15s ease; }

.socialLinks-item--pinterest {
  width: 25px; }

.pin_it_iframe_widget {
  display: none; }

.socialLinks-item {
  display: inline-block;
  font-size: 0; }
  .socialLinks .socialLinks-item {
    margin-bottom: 0.35714rem;
    margin-right: 0.78571rem; }
    .socialLinks .socialLinks-item:last-child {
      margin-right: 0; }
  .socialLinks-item .socialLinks__link {
    height: 2rem;
    position: relative; }
    .socialLinks-item .socialLinks__link::before {
      border-color: transparent transparent #313440 transparent;
      border-style: solid;
      border-width: 0.71429rem;
      content: " ";
      position: absolute;
      right: 0;
      top: 50%; }
    .socialLinks-item .socialLinks__link::after {
      background-color: #313440;
      border-radius: 0.57143rem;
      color: white;
      content: attr(title);
      cursor: default;
      font-size: 1rem;
      padding: 0.28571rem 0.42857rem;
      position: absolute;
      right: 0;
      top: 100%;
      white-space: nowrap; }
    .socialLinks-item .socialLinks__link::before, .socialLinks-item .socialLinks__link::after {
      display: none; }
    .socialLinks-item .socialLinks__link:focus::before, .socialLinks-item .socialLinks__link:focus::after {
      display: block; }
    .socialLinks-item .socialLinks__link:focus::after {
      left: 0;
      right: auto;
      z-index: 20; }

.socialLinks--alt .icon {
  height: 1.5rem;
  width: 1.5rem; }

.socialLinks--alt svg {
  fill: #989898; }

.heroCarousel {
  margin-bottom: 4.5rem;
  margin-top: -1.5rem;
  min-width: 100%;
  width: 1px; }
  @media (min-width: 801px) {
    .heroCarousel {
      margin-top: -2.5rem; } }
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .heroCarousel {
      opacity: 0; }
      .heroCarousel.slick-initialized {
        opacity: 1; } }
  .heroCarousel:not(.slick-initialized) :not(.heroCarousel-slide--first).heroCarousel-slide {
    display: none; }
  .heroCarousel a {
    text-decoration: none; }
  .heroCarousel .slick-next,
  .heroCarousel .slick-prev {
    margin: 0;
    top: 50%;
    transform: translateY(-50%); }
  .heroCarousel .slick-next {
    right: 15px; }
    @media (min-width: 801px) {
      .heroCarousel .slick-next {
        right: 25px; } }
  .heroCarousel .slick-prev {
    left: 15px; }
    @media (min-width: 801px) {
      .heroCarousel .slick-prev {
        left: 25px; } }
  .heroCarousel .slick-dots {
    bottom: 0.5rem; }
    @media (min-width: 801px) {
      .heroCarousel .slick-dots {
        bottom: 1.5rem; } }
    .heroCarousel .slick-dots li {
      background-color: black;
      background-color: rgba(0, 0, 0, 0.9); }
  .heroCarousel .slick-slide.is-square-image-type .heroCarousel-image-wrapper {
    height: 100vw; }
  .heroCarousel .slick-slide.is-vertical-image-type .heroCarousel-image-wrapper {
    height: 110vw; }
  @media (min-width: 551px) {
    .heroCarousel .slick-slide.is-square-image-type .heroCarousel-image-wrapper, .heroCarousel .slick-slide.is-vertical-image-type .heroCarousel-image-wrapper {
      height: 56.25vw; } }
  .heroCarousel .slick-slide.is-image-error .heroCarousel-image-wrapper {
    background: url("../img/hero-carousel-image-load-error.svg") center center no-repeat;
    background-size: contain; }

.heroCarousel-slide {
  position: relative; }
  .heroCarousel-slide a {
    text-decoration: none; }
  .heroCarousel-slide .heroCarousel-image {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    width: 100%; }
    @media (min-width: 551px) {
      .heroCarousel-slide .heroCarousel-image {
        object-position: 50% 50%; } }
  .heroCarousel-slide.stretch .heroCarousel-image {
    object-fit: cover;
    object-position: 50% 50%; }
  .heroCarousel-slide.stretch.compat-object-fit .heroCarousel-image {
    height: 100%;
    width: 100%; }
  .heroCarousel-slide.compat-object-fit {
    overflow: hidden; }
    .heroCarousel-slide.compat-object-fit .heroCarousel-image {
      width: auto; }
  .heroCarousel-slide .heroCarousel-image-wrapper {
    align-items: flex-start;
    display: flex;
    height: 56.25vw;
    transition: height .3s ease; }

.heroCarousel-content {
  background-color: black;
  padding: 0.78571rem 1.5rem 3rem;
  text-align: center; }
  @media (min-width: 801px) {
    .heroCarousel-content p + .heroCarousel-action {
      margin-top: 1.5rem; } }
  @media (min-width: 551px) {
    .heroCarousel-content {
      background-color: black;
      background-color: rgba(0, 0, 0, 0.9);
      background-color: rgba(0, 0, 0, 0.9);
      left: 0;
      margin: 0 auto;
      max-height: 80%;
      overflow: auto;
      padding: 2.25rem;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 35.71429rem;
      width: 70%; }
      .heroCarousel-content.heroCarousel-content--empty {
        background-color: transparent;
        left: 50%;
        overflow: visible;
        padding: 0;
        right: auto;
        transform: translateX(-50%) translateY(-50%);
        width: auto; } }

.heroCarousel-title {
  color: white;
  font-size: 20px;
  margin: 0; }
  @media (min-width: 801px) {
    .heroCarousel-title {
      font-size: 50px; } }

.heroCarousel-description {
  color: white;
  font-size: 12px;
  margin: 0; }
  @media (min-width: 551px) {
    .heroCarousel-description {
      font-size: 13px; } }
  @media (min-width: 801px) {
    .heroCarousel-description {
      font-size: 15px; } }

.heroCarousel-action {
  margin: 0; }

@media (min-width: 801px) {
  .writeReview-productDetails {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 50%;
    float: left; } }

.writeReview-productDetails .product-brand {
  color: #a5a5a5;
  margin: 0; }

.writeReview-productDetails .product-title {
  margin-top: 0; }

@media (min-width: 801px) {
  .writeReview-form {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 50%;
    float: left; } }

.writeReview-productImage-container {
  position: relative; }
  .writeReview-productImage-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }
  .writeReview-productImage-container img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    /* Object-fit polyfill */
    font-family: "object-fit: contain;";
    height: 100%;
    object-fit: contain; }

.account--addReturn .table {
  display: block;
  margin-bottom: 3rem; }
  @media (min-width: 551px) {
    .account--addReturn .table {
      display: table;
      margin-bottom: 6rem; } }
  .account--addReturn .table tr {
    display: block;
    padding: 1.5rem 0; }
    @media (min-width: 551px) {
      .account--addReturn .table tr {
        display: table-row;
        padding: 0; } }
  .account--addReturn .table th,
  .account--addReturn .table td {
    display: block;
    padding: 0; }
    @media (min-width: 551px) {
      .account--addReturn .table th,
      .account--addReturn .table td {
        display: table-cell;
        padding-bottom: 0.78571rem;
        padding-top: 0.78571rem; } }
    .account--addReturn .table th + th,
    .account--addReturn .table th + td,
    .account--addReturn .table td + th,
    .account--addReturn .table td + td {
      padding-left: 0; }
      @media (min-width: 551px) {
        .account--addReturn .table th + th,
        .account--addReturn .table th + td,
        .account--addReturn .table td + th,
        .account--addReturn .table td + td {
          padding-left: 1.5rem; } }
  .account--addReturn .table .return-itemTitle + .definitionList {
    margin-top: 0.21429rem; }
  @media (min-width: 551px) {
    .account--addReturn .table .return-itemPrice {
      text-align: center; } }
  @media (min-width: 551px) {
    .account--addReturn .table .return-itemQuantity {
      text-align: right; } }

.account--addReturn .table-thead {
  display: none; }
  @media (min-width: 551px) {
    .account--addReturn .table-thead {
      display: table-header-group; } }
  .account--addReturn .table-thead th {
    font-size: 15px; }
  .account--addReturn .table-thead th:first-child {
    width: 60%; }

.account--addReturn .table-tbody {
  display: block; }
  @media (min-width: 551px) {
    .account--addReturn .table-tbody {
      display: table-row-group; } }

.return-itemName {
  font-size: 15px;
  font-weight: 700; }
  @media (min-width: 551px) {
    .return-itemName {
      font-size: 1rem;
      font-weight: 400; } }

.return-itemPrice {
  color: #a5a5a5;
  margin-bottom: 0.35714rem; }
  @media (min-width: 551px) {
    .return-itemPrice {
      color: inherit;
      margin-bottom: 0;
      text-align: center; } }

.return-itemQuantity .form-label {
  display: inline;
  margin-right: 0.35714rem; }
  @media (min-width: 551px) {
    .return-itemQuantity .form-label {
      border: 0;
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px; } }

.account--addReturn-row {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  margin: 0 -1rem; }
  .account--addReturn-row:before, .account--addReturn-row:after {
    content: " ";
    display: table; }
  .account--addReturn-row:after {
    clear: both; }

.account--addReturn-column {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  padding: 0 1rem; }
  @media (min-width: 551px) {
    .account--addReturn-column {
      width: 50%; } }

.productCarousel {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  min-width: 100%;
  position: relative;
  width: 1px; }
  .productCarousel:before, .productCarousel:after {
    content: " ";
    display: table; }
  .productCarousel:after {
    clear: both; }

.productCarousel-slide {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 50%;
  float: left; }
  @media (min-width: 551px) {
    .productCarousel-slide {
      width: 33.33333%; } }
  @media (min-width: 801px) {
    .productCarousel-slide {
      width: 25%; } }
  @media (min-width: 1261px) {
    .productCarousel-slide {
      width: 16.66667%; } }
  .productCarousel-slide .card {
    margin-bottom: 0; }
    .productCarousel-slide .card .card-title {
      overflow-wrap: break-word; }

.quickView:before, .quickView:after {
  content: " ";
  display: table; }

.quickView:after {
  clear: both; }

.productReviews-list {
  list-style: none;
  margin-left: 0;
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  font-size: 0; }
  .productReviews-list ul,
  .productReviews-list ol {
    list-style: none;
    margin-bottom: 0; }
  .productReviews-list:before, .productReviews-list:after {
    content: " ";
    display: table; }
  .productReviews-list:after {
    clear: both; }

.productReview {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  display: inline-block;
  float: none;
  font-size: 1rem;
  vertical-align: top; }
  @media (min-width: 801px) {
    .productReview {
      width: 50%; } }
  @media (min-width: 1261px) {
    .productReview {
      width: 33.33333%; } }

.productReview-title {
  margin: 0;
  text-transform: none; }

.productReview-author {
  color: #989898;
  margin-bottom: 1rem; }

.productReview-rating {
  display: inline-block;
  margin-bottom: 0.35714rem; }

.productReview-ratingNumber {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.productView {
  padding-top: 1rem; }

.productView-images {
  margin-bottom: 3rem; }

.productView-image {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto;
  position: relative; }
  @media (min-width: 801px) {
    .productView-image {
      min-height: 366px;
      min-width: inherit; } }
  .productView-image + .productView-thumbnails {
    margin-top: 0.78571rem; }
  @media (min-width: 320px) and (max-width: 801px) {
    .productView-image {
      pointer-events: none; } }

.productView-img-container {
  margin: auto;
  max-width: 760px;
  position: relative;
  width: 100%; }
  .productView-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }
  .productView-img-container img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    /* Object-fit polyfill */
    font-family: "object-fit: contain;";
    height: 100%;
    object-fit: contain;
    width: 100%; }

.productView-thumbnails {
  list-style: none;
  margin-left: 0;
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  margin-left: -0.35714rem;
  margin-right: -0.35714rem; }
  .productView-thumbnails ul,
  .productView-thumbnails ol {
    list-style: none;
    margin-bottom: 0; }
  .productView-thumbnails:before, .productView-thumbnails:after {
    content: " ";
    display: table; }
  .productView-thumbnails:after {
    clear: both; }
  .productView-thumbnails[data-slick] {
    opacity: 0; }
    .productView-thumbnails[data-slick].slick-initialized {
      opacity: 1; }
  .productView-thumbnails .slick-list {
    margin-left: 2.85714rem;
    margin-right: 2.85714rem; }
  .productView-thumbnails .slick-next {
    right: 0; }
  .productView-thumbnails .slick-prev {
    left: 0; }
  .productView-thumbnails img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    /* Object-fit polyfill */
    font-family: "object-fit: contain;";
    object-fit: contain;
    position: relative;
    width: 50px; }

.productView-thumbnail {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 25%;
  float: left;
  padding: 0.35714rem;
  text-align: center; }
  @media (min-width: 1261px) {
    .productView-thumbnail {
      width: 20%; } }

.productView-thumbnail-link {
  border: 1px solid #ebebeb;
  box-sizing: content-box;
  display: flex;
  height: 67px;
  justify-content: center;
  max-width: 75px;
  position: relative;
  width: 100%; }
  .productView-thumbnail-link:hover, .productView-thumbnail-link.is-active {
    border-color: #333333; }

.productView-details {
  padding-bottom: 2rem; }

@media (min-width: 801px) {
  .productView-product {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 2rem; } }

.productView-product > :last-child {
  margin-bottom: 0; }

.productView-title {
  margin: 0 0 0.35714rem; }

.productView-brand {
  margin: 0 1rem 0.78571rem 0; }
  .productView-brand a:hover {
    color: #4f4f4f; }

.productView-price {
  font-size: 21px;
  margin-bottom: 0.5rem; }
  .productView-price .price-section--saving {
    font-size: 15px; }
  .productView-price abbr {
    border: 0;
    color: inherit;
    font-size: inherit; }

.productView-reviewLink {
  color: #989898;
  display: inline-block;
  margin-left: 0.35714rem;
  vertical-align: middle; }
  .productView-reviewLink:hover {
    color: #4f4f4f; }
  .productView-reviewLink--new {
    padding: 0; }

.productView-info {
  margin-top: 0.78571rem; }
  .productView-info:before, .productView-info:after {
    content: " ";
    display: table; }
  .productView-info:after {
    clear: both; }
  @media (min-width: 551px) {
    .productView-info {
      margin-top: 0; } }
  @media (min-width: 551px) {
    .productView-info > :first-child {
      margin-top: 1.5rem; } }
  .productView-info > :last-child {
    margin-bottom: 0; }

.productView-info-name,
.productView-info-value {
  float: none; }

.productView-info-name {
  clear: both;
  margin-bottom: 0.21429rem;
  margin-right: 0.35714rem; }
  @media (min-width: 551px) {
    .productView-info-name {
      font-family: "Barlow", Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-weight: 400; } }

.productView-info-value {
  margin-bottom: 0.35714rem; }
  @media (min-width: 551px) {
    .productView-info-value {
      margin-bottom: 1rem; } }

.productView-options {
  margin-bottom: 1.5rem;
  text-align: center; }
  .productView-options:before, .productView-options:after {
    content: " ";
    display: table; }
  .productView-options:after {
    clear: both; }
  @media (min-width: 551px) {
    .productView-options {
      text-align: left; } }
  @media (min-width: 551px) {
    .productView-options .form-input[type="number"] {
      width: 16.66667%; } }
  .productView-options .form {
    display: inline; }
    .productView-options .form .add-to-cart-wrapper {
      display: inline; }
  .productView-options input[type="file"] {
    font-size: 13px; }
  .productView-options .form-field {
    font-size: 0;
    margin-bottom: 2rem; }
    .productView-options .form-field--error > .form-inlineMessage {
      font-size: 1rem; }
    .productView-options .form-field > .form-checkbox + .form-label {
      display: inline-block;
      margin-left: 1.5rem;
      width: auto; }
      @media (min-width: 551px) {
        .productView-options .form-field > .form-checkbox + .form-label {
          margin-left: 0;
          width: 100%; } }
    .productView-options .form-field > .form-radio + .form-label {
      display: inline-block;
      text-align: justify; }
    .productView-options .form-field > .form-label:nth-of-type(2) {
      margin-left: 0; }
  @media (min-width: 801px) {
    .productView-options .form-action {
      padding: 0;
      width: auto; } }
  @media (min-width: 1261px) {
    .productView-options .form-action {
      display: inline-block;
      margin-top: 1rem; } }
  .productView-options .form-action .button {
    width: 100%; }
    @media (min-width: 801px) {
      .productView-options .form-action .button {
        width: auto; } }
    @media (min-width: 1261px) {
      .productView-options .form-action .button {
        margin-right: 0.78571rem; } }
  .productView-options .form-action .button--primary {
    margin-right: 0.78571rem; }
  .productView-options .add-to-cart-buttons {
    display: inline-grid;
    float: left;
    margin-bottom: 1rem;
    width: 100%; }
    @media (min-width: 551px) {
      .productView-options .add-to-cart-buttons {
        padding: 0;
        width: 50%; } }
    @media (min-width: 801px) {
      .productView-options .add-to-cart-buttons {
        width: 50%; } }
    @media (min-width: 1261px) {
      .productView-options .add-to-cart-buttons {
        display: inline-block;
        margin-top: 1rem;
        width: 50%; } }
    @media (min-width: 551px) {
      .productView-options .add-to-cart-buttons.pre-order-buttons {
        min-width: 50%;
        width: auto; } }
    @media (min-width: 801px) {
      .productView-options .add-to-cart-buttons.pre-order-buttons {
        margin-right: 0.78571rem;
        min-width: auto;
        padding: 0;
        width: auto; } }
    .productView-options .add-to-cart-buttons.pre-order-buttons .button {
      padding: 0.92857rem 1.71429rem; }
    .productView-options .add-to-cart-buttons .button {
      margin: 0;
      width: 100%; }
  .productView-options .add-to-cart-wallet-buttons {
    margin-top: 0.78571rem; }
    .productView-options .add-to-cart-wallet-buttons div[data-smart-button-container-id] {
      line-height: 0;
      margin-top: 6px; }
      .productView-options .add-to-cart-wallet-buttons div[data-smart-button-container-id] button,
      .productView-options .add-to-cart-wallet-buttons div[data-smart-button-container-id] div {
        width: 100%; }
    .productView-options .add-to-cart-wallet-buttons button.show-more-button {
      color: #989898;
      display: block;
      margin-top: 0.35714rem;
      padding: 0.35714rem 0;
      text-align: center;
      text-decoration: underline;
      vertical-align: middle;
      width: 100%; }
      .productView-options .add-to-cart-wallet-buttons button.show-more-button:hover {
        color: #4f4f4f; }

.productOptions-list {
  border: 1px solid #cccccc;
  list-style: none;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
  position: relative; }

.productOptions-list-item {
  padding: 1.5rem; }
  .productOptions-list-item + .productOptions-list-item {
    border-top: 1px solid #cccccc; }
  .productOptions-list-item .form-label {
    text-align: left;
    top: -2px; }

.productOptions-list-item-figure,
.productOptions-list-item-content {
  display: table-cell;
  vertical-align: middle; }

.productOptions-list-item-figure {
  width: 3rem; }

.productOptions-list-item-content {
  padding-left: 1.28571rem; }

.shareProduct {
  text-align: center; }

.productView-image .easyzoom-flyout {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%; }
  .productView-image .easyzoom-flyout img {
    max-width: none;
    width: auto; }

.price--rrp,
.price--non-sale,
.price--discounted {
  text-decoration: line-through; }

.price-section--minor {
  color: #a5a5a5; }

.compareTable {
  border-top: 1px solid #ebebeb;
  table-layout: fixed;
  width: 100%; }

.compareTable-row {
  vertical-align: top; }
  .compareTable-row + .compareTable-row .compareTable-heading,
  .compareTable-row + .compareTable-row .compareTable-item {
    border-top: 1px solid #ebebeb; }
  .compareTable-row + .compareTable-row .compareTable-heading:empty {
    border-top: 0; }

.compareTable-heading {
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 1.28571rem 1rem;
  position: relative;
  text-align: right;
  width: 0; }
  @media (min-width: 801px) {
    .compareTable-heading {
      width: 25%; } }

.compareTable-headingText {
  position: absolute;
  top: 1.28571rem;
  white-space: nowrap; }
  @media (min-width: 801px) {
    .compareTable-headingText {
      position: inherit;
      top: inherit; } }

.compareTable-item {
  padding: 3.28571rem 1rem 1.28571rem; }
  @media (min-width: 801px) {
    .compareTable-item {
      padding-top: 1.28571rem; } }

.compareTable-removeProduct {
  background-color: #e5e5e5;
  border-radius: 50%;
  height: 2.5rem;
  position: absolute;
  right: -1rem;
  top: -1rem;
  transition: background-color 0.15s ease;
  width: 2.5rem; }
  .compareTable-removeProduct .icon {
    fill: #424242;
    height: 1.5rem;
    margin-top: 0.5rem;
    width: 1.5rem; }

.compareTable-product {
  font-weight: 400;
  padding: 2rem 1rem 1.28571rem; }
  .compareTable-product .card {
    margin-bottom: 0; }
  .compareTable-product .card-body {
    min-height: 6rem;
    padding-top: 1rem; }
  .compareTable-product .card-figure {
    overflow: visible; }

.compareTable-action {
  padding: 0 1rem 1rem; }
  .compareTable-action .button {
    display: block;
    padding-left: 0.78571rem;
    padding-right: 0.78571rem;
    width: 100%; }

.blocker {
  background: rgba(255, 255, 255, 0.5);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 500; }

.blocker-container {
  position: relative; }

.textTruncate {
  padding-bottom: 1.5rem;
  position: relative;
  transition: max-height 100ms ease-out; }

.js .textTruncate {
  max-height: 110px;
  overflow: hidden; }

.js .textTruncate--visible {
  max-height: 71.42857rem; }

.textTruncate-viewMore {
  background-color: white;
  bottom: 0;
  padding-top: 10px;
  position: absolute;
  width: 100%; }

.toggle {
  border-top: 1px solid #ebebeb;
  margin-bottom: 2.28571rem; }
  .toggle:last-of-type {
    margin-bottom: 4.57143rem; }

.toggle-title {
  margin-bottom: 2.28571rem; }

.toggleLink {
  color: #989898; }
  .toggleLink:hover {
    color: #4f4f4f; }
  .toggle-title .toggleLink {
    float: right;
    line-height: 24px; }

.toggleLink-text {
  font-size: 13px;
  font-weight: 400; }

.toggleLink-text--off {
  display: inline-block; }
  .toggleLink.is-open .toggleLink-text--off {
    display: none; }

.toggleLink-text--on {
  display: none; }
  .toggleLink.is-open .toggleLink-text--on {
    display: inline-block; }

.toggle-content {
  display: none; }
  .toggle-content.is-open {
    display: block; }

.facetedSearch-toggle {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  border: #ebebeb solid;
  border-radius: 0;
  border-width: 1px;
  display: block;
  margin-bottom: 2rem;
  padding: 1rem; }
  .facetedSearch-toggle:before, .facetedSearch-toggle:after {
    content: " ";
    display: table; }
  .facetedSearch-toggle:after {
    clear: both; }
  @media (min-width: 801px) {
    .facetedSearch-toggle {
      display: none !important; } }
  .facetedSearch-toggle.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0; }

.facetedSearch-toggle-text,
.facetedSearch-toggle-indicator {
  display: block;
  font-weight: normal; }

.facetedSearch-toggle-text {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 58.33333%;
  float: left;
  padding: 0;
  text-align: left; }

.facetedSearch-toggle-indicator {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 41.66667%;
  float: left;
  font-weight: bold;
  padding: 0;
  text-align: right; }

.facetedSearch-navList {
  display: none; }
  @media (min-width: 801px) {
    .facetedSearch-navList {
      display: block !important; } }
  .facetedSearch-navList.is-open {
    display: block; }
    .facetedSearch-navList.is-open .accordion--navList,
    .facetedSearch-navList.is-open .accordion-block:first-child .accordion-navigation {
      border-top-left-radius: 0;
      border-top-right-radius: 0; }
  .facetedSearch-toggle + .facetedSearch-navList,
  .sidebarBlock + .facetedSearch-navList {
    margin-top: 2rem; }
  .facetedSearch-toggle + .facetedSearch-navList.is-open,
  .sidebarBlock + .facetedSearch-navList.is-open {
    margin-top: -1px; }
    @media (min-width: 801px) {
      .facetedSearch-toggle + .facetedSearch-navList.is-open,
      .sidebarBlock + .facetedSearch-navList.is-open {
        margin-top: 2rem; } }
  .facetedSearch-navList .navList--inner {
    margin-left: 1.5rem; }

.facet-quick-heading {
  text-transform: capitalize; }

.facetedSearch-optionColumns {
  column-count: 3;
  column-gap: 20px; }

.facetedSearch-refineFilters {
  display: none; }
  @media (min-width: 801px) {
    .facetedSearch-refineFilters {
      display: block; } }

.facetedSearch-content--rating .is-selected {
  font-weight: bold; }

.banners {
  background-color: #a3a3a3;
  padding: 1.71429rem 0;
  text-align: center; }
  .banners p:last-child {
    margin-bottom: 0; }

.banner {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%; }
  .banner:before, .banner:after {
    content: " ";
    display: table; }
  .banner:after {
    clear: both; }
  .banner + .banner {
    margin-top: 1.5rem; }

.facetLabel {
  background: #e5e5e5;
  border-radius: 4px;
  padding: 0.21429rem 0.5rem 0.21429rem 0.71429rem;
  text-decoration: none; }
  .facetLabel .icon {
    height: 0.85714rem;
    width: 0.85714rem;
    display: inline-block;
    fill: #989898;
    position: relative;
    top: -1px; }

.cart-additionalCheckoutButtons:before, .previewCart-additionalCheckoutButtons:before, .cart-additionalCheckoutButtons:after, .previewCart-additionalCheckoutButtons:after {
  content: " ";
  display: table; }

.cart-additionalCheckoutButtons:after, .previewCart-additionalCheckoutButtons:after {
  clear: both; }

.cart-additionalCheckoutButtons .FloatRight:before, .previewCart-additionalCheckoutButtons .FloatRight:before, .cart-additionalCheckoutButtons .FloatRight:after, .previewCart-additionalCheckoutButtons .FloatRight:after {
  content: " ";
  display: table; }

.cart-additionalCheckoutButtons .FloatRight:after, .previewCart-additionalCheckoutButtons .FloatRight:after {
  clear: both; }

.cart-additionalCheckoutButtons .FloatRight p, .previewCart-additionalCheckoutButtons .FloatRight p {
  float: none !important;
  margin: 0.5rem 0;
  text-align: right; }

.cart-additionalCheckoutButtons .FloatRight div, .previewCart-additionalCheckoutButtons .FloatRight div {
  float: right; }

.cart {
  display: block;
  margin-bottom: 1.5rem;
  width: 100%; }
  @media (min-width: 801px) {
    .cart {
      display: table; } }

.cart-header {
  display: none; }
  @media (min-width: 801px) {
    .cart-header {
      display: table-header-group;
      text-align: left; } }

.cart-header-item {
  padding-bottom: 1rem; }
  .cart-header-item:last-child {
    text-align: right; }

.cart-list {
  border-top: 1px solid #ebebeb;
  display: block; }
  @media (min-width: 801px) {
    .cart-list {
      display: table-row-group; } }

.cart-item {
  border-bottom: 1px solid #ebebeb;
  clear: both;
  display: block;
  padding: 1.5rem 0; }
  @media (min-width: 551px) {
    .cart-item {
      padding-left: 25%; }
      .cart-item:before, .cart-item:after {
        content: " ";
        display: table; }
      .cart-item:after {
        clear: both; } }
  @media (min-width: 801px) {
    .cart-item {
      display: table-row;
      padding-left: 0; }
      .cart-item::before, .cart-item::after {
        display: none; } }

.cart-item-block {
  display: block; }
  @media (min-width: 801px) {
    .cart-item-block {
      display: table-cell; } }
  .cart-item-block .definitionList {
    margin-bottom: 0.35714rem; }

.cart-item-figure {
  float: left;
  margin-bottom: 1.5rem;
  position: relative;
  text-align: center;
  width: 33.33333%; }
  .cart-item-figure::after {
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%; }
  @media (min-width: 551px) {
    .cart-item-figure {
      margin-bottom: 0;
      margin-left: -33.33333%;
      width: 33.33333%; } }
  @media (min-width: 801px) {
    .cart-item-figure {
      float: none;
      padding: 0.5rem 0;
      width: 8.33333%; } }

.cart-item-fixed-image {
  width: 100%; }

.cart-item-image {
  max-height: 14rem;
  max-width: 100px; }
  @media (min-width: 801px) {
    .cart-item-image {
      margin-left: 0; } }

.cart-item-title {
  display: table-cell;
  height: 7.14286rem;
  padding-left: 1.5rem; }
  @media (min-width: 551px) {
    .cart-item-title {
      display: block;
      height: auto;
      margin-bottom: 1.5rem;
      overflow: hidden; } }
  @media (min-width: 801px) {
    .cart-item-title {
      display: table-cell;
      padding: 1.5rem; } }

.cart-item-info {
  clear: both;
  width: 100%; }
  @media (min-width: 551px) {
    .cart-item-info {
      clear: none;
      float: left;
      overflow: hidden;
      width: 33.33333%; }
      .cart-item-info + .cart-item-info {
        margin-top: 0; } }
  @media (min-width: 801px) {
    .cart-item-info {
      float: none;
      width: 16.66667%; }
      .cart-item-info:last-child {
        text-align: right; } }

.cart-content-padding-right {
  padding-right: 4px; }

@media (min-width: 801px) {
  .cart-header-quantity,
  .cart-item-quantity {
    text-align: center; } }

.cart-item-quantity .form-increment {
  display: inline-block;
  margin: 0 0.21429rem 1px 1.5rem;
  vertical-align: middle; }
  @media (min-width: 801px) {
    .cart-item-quantity .form-increment {
      margin-left: 0; } }

.cart-item-label {
  color: #4e4e4e;
  float: left;
  margin-bottom: 0.35714rem;
  text-align: right;
  width: 33.33333%; }
  @media (min-width: 551px) {
    .cart-item-label {
      display: block;
      padding-left: 1.5rem;
      text-align: left;
      width: 100%; } }
  @media (min-width: 801px) {
    .cart-item-label {
      display: none; } }

.cart-item-value {
  padding-left: 1.5rem; }
  @media (min-width: 801px) {
    .cart-item-value {
      padding-left: 0; } }

.cart-item-brand {
  color: #989898;
  margin-bottom: 0.21429rem; }

.cart-item-name {
  display: inline-block;
  font-size: 15px;
  margin: 0; }
  .cart-item-name__label {
    display: inline-block; }
  .cart-item-name + .definitionList {
    margin-top: 0.35714rem; }

.cart-item-options--giftWrapping {
  margin-top: 1.14286rem; }
  .cart-item-options--giftWrapping .cart-item-option-description {
    color: #4e4e4e; }

.cart-remove {
  background-color: #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  float: right;
  height: 1.28571rem;
  margin-top: 0.14286rem;
  padding: 0.21429rem;
  transition: background-color 0.15s ease;
  width: 1.28571rem; }
  @media (min-width: 551px) {
    .cart-remove {
      margin-left: 1rem; } }
  .cart-remove.cart-remove--spacer {
    visibility: hidden; }
  .cart-remove > svg {
    fill: #424242; }

.cart-totals {
  list-style: none;
  margin-left: 0;
  margin-bottom: 1.5rem;
  text-align: right;
  width: 100%; }
  .cart-totals ul,
  .cart-totals ol {
    list-style: none;
    margin-bottom: 0; }
  @media (min-width: 551px) {
    .cart-totals {
      float: right;
      width: 75%; } }
  @media (min-width: 801px) {
    .cart-totals {
      margin-bottom: 1rem;
      width: 58.33333%; } }
  @media (min-width: 1261px) {
    .cart-totals {
      width: 41.66667%; } }

.cart-total {
  border-bottom: 0; }
  .cart-total:before, .cart-total:after {
    content: " ";
    display: table; }
  .cart-total:after {
    clear: both; }
  @media (min-width: 801px) {
    .cart-total + .cart-total {
      border-top: 1px solid #ebebeb; } }
  .cart-total .form-input {
    display: inline-block;
    height: 2.28571rem;
    padding: 0.5rem;
    vertical-align: top;
    width: 75%; }
  .cart-total .form-select {
    background-position: right 0.35714rem center;
    background-size: 1.42857rem 1.42857rem;
    height: 2.28571rem;
    margin-bottom: 0.78571rem;
    padding: 0 0.78571rem; }
  .cart-total .form-inlineMessage {
    text-align: left; }

.cart-total-label {
  color: #989898;
  width: 33.33333%; }
  @media (min-width: 551px) {
    .cart-total-label {
      width: 50%; } }
  @media (min-width: 801px) {
    .cart-total-label {
      display: block;
      padding-left: 0;
      text-align: left; } }

.cart-total-value {
  text-align: left; }
  @media (min-width: 551px) {
    .cart-total-value {
      text-align: right; } }
  @media (min-width: 801px) {
    .cart-total-value {
      width: 50%; } }

.cart-total-label,
.cart-total-value {
  float: left;
  padding: 0.5rem 0 0.5rem 1.5rem; }
  @media (min-width: 801px) {
    .cart-total-label,
    .cart-total-value {
      padding: 1rem 0; } }

.cart-total-grandTotal {
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 0.21429rem;
  padding-top: 0.21429rem;
  position: relative; }
  @media (min-width: 801px) {
    .cart-total-grandTotal {
      padding: 1rem 0;
      top: -0.28571rem; } }

.coupon-code-add,
.coupon-code-cancel,
.shipping-estimate-show,
.gift-certificate-add,
.gift-certificate-cancel {
  color: #989898;
  padding: 0;
  text-decoration: underline;
  transition: color 0.15s ease; }
  .coupon-code-add:hover,
  .coupon-code-cancel:hover,
  .shipping-estimate-show:hover,
  .gift-certificate-add:hover,
  .gift-certificate-cancel:hover {
    color: #4f4f4f; }

.coupon-code-cancel,
.shipping-estimate-show[aria-expanded="true"] {
  font-style: italic; }

.coupon-form,
.cart-gift-certificate-form {
  font-size: 0;
  margin-bottom: 1rem; }
  .coupon-form:before, .coupon-form:after,
  .cart-gift-certificate-form:before,
  .cart-gift-certificate-form:after {
    content: " ";
    display: table; }
  .coupon-form:after,
  .cart-gift-certificate-form:after {
    clear: both; }
  .coupon-form .form-input,
  .coupon-form .button,
  .cart-gift-certificate-form .form-input,
  .cart-gift-certificate-form .button {
    float: left; }
  .coupon-form .form-input,
  .cart-gift-certificate-form .form-input {
    width: 78%; }
  .coupon-form .button,
  .cart-gift-certificate-form .button {
    margin: 0 0 0 2%;
    padding-left: 0.78571rem;
    padding-right: 0.78571rem;
    width: 20%; }

.estimator-form {
  margin-bottom: 0; }
  .estimator-form .form-input {
    margin-bottom: 0.78571rem;
    width: 100%; }
  .estimator-form .button--primary {
    width: 60%; }

.estimator-form-label {
  clear: both;
  float: left;
  font-weight: 400;
  margin-bottom: 0; }
  .estimator-form-label .form-label {
    line-height: 2.28571rem;
    margin-bottom: 0; }

.estimator-form-label-text {
  margin-left: 0.71429rem; }

.estimator-form-input {
  float: right;
  margin-bottom: 1em;
  width: 60%; }
  .estimator-form-input .form-input,
  .estimator-form-input .form-select {
    margin-bottom: 0; }

.estimator-form-input--price {
  width: 30%; }

.estimator-form-row:before, .estimator-form-row:after {
  content: " ";
  display: table; }

.estimator-form-row:after {
  clear: both; }

.estimator-form-toggleUPSRate {
  display: block;
  margin-bottom: 1em; }

.cart-actions {
  clear: both; }
  .cart-actions:before, .cart-actions:after {
    content: " ";
    display: table; }
  .cart-actions:after {
    clear: both; }
  .cart-actions .button {
    display: block;
    margin-bottom: 0; }
    @media (min-width: 551px) {
      .cart-actions .button {
        display: inline-block;
        float: right; } }
  .cart-actions .checkoutMultiple {
    clear: right;
    display: block;
    float: right;
    padding-top: 0.35714rem; }

.previewCart-additionalCheckoutButtons {
  padding-bottom: 1.5rem;
  padding-right: 1.5rem; }

.previewCartWrapper {
  max-height: calc(100vh - 6rem);
  overflow: auto; }

.previewCartList {
  list-style: none;
  margin-left: 0;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
  width: 100%; }
  .previewCartList ul,
  .previewCartList ol {
    list-style: none;
    margin-bottom: 0; }
  .previewCartList li {
    margin: 0;
    padding: 0; }

.previewCartItem {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  display: table-row;
  line-height: 19px; }
  .previewCartItem:before, .previewCartItem:after {
    content: " ";
    display: table; }
  .previewCartItem:after {
    clear: both; }
  .previewCartItem + .previewCartItem {
    border-top: 1px solid #ebebeb; }

.previewCartItem-image,
.previewCartItem-content {
  display: table-cell;
  vertical-align: middle; }

.previewCartItem-image {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 33.33333%;
  padding: 0;
  position: relative;
  text-align: center; }
  .previewCartItem-image::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }
  .previewCartItem-image img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    max-height: 90%; }
  @media (min-width: 320px) {
    .previewCartItem-image::after {
      padding-bottom: 75%; } }
  @media (min-width: 481px) {
    .previewCartItem-image::after {
      padding-bottom: 100%; } }

.previewCartItem-content {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 66.66667%;
  padding-left: 0; }

.previewCartItem-name {
  margin: 0;
  text-transform: none; }
  .previewCartItem-name > a {
    text-decoration: none; }

.previewCartItem-brand,
.previewCartItem-name {
  margin-bottom: 0.21429rem; }

.previewCartItem-brand,
.previewCartItem-price {
  color: #989898;
  display: inline-block;
  font-size: 13px; }

.previewCartAction {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  border-top: 1px solid #ebebeb;
  display: block; }
  .previewCartAction:before, .previewCartAction:after {
    content: " ";
    display: table; }
  .previewCartAction:after {
    clear: both; }
  @media (min-width: 320px) {
    .previewCartAction {
      padding: 0.78571rem 0.35714rem; } }
  @media (min-width: 481px) {
    .previewCartAction {
      padding: 1.5rem 0.78571rem; } }
  .previewCartAction .button {
    margin: 0;
    padding-left: 0.78571rem;
    padding-right: 0.78571rem;
    width: 100%; }

.previewCartAction-checkout,
.previewCartAction-viewCart {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 50%;
  float: left; }
  .previewCartAction-checkout.previewCartAction-viewCart--sole,
  .previewCartAction-viewCart.previewCartAction-viewCart--sole {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 50%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    float: none; }

.previewCartAction-checkout {
  padding-right: 0.35714rem; }

.previewCartAction-checkoutMultiple {
  clear: both;
  padding-left: 0.78571rem;
  padding-top: 0.35714rem; }

.previewCartAction-viewCart {
  padding-left: 0.35714rem; }

.previewCart-emptyBody {
  padding: 3rem;
  text-align: center; }

.addressList {
  font-size: 0;
  list-style: none;
  margin-left: -0.78571rem;
  margin-right: -0.78571rem; }

.address {
  display: inline-block;
  padding: 0 0.78571rem;
  vertical-align: top;
  width: 100%; }
  @media (min-width: 551px) {
    .address {
      width: 50%; } }
  @media (min-width: 1261px) {
    .address {
      width: 33.33333%; } }

.panel--address {
  font-size: 1rem;
  position: relative; }
  .panel--address .panel-body {
    min-height: 17.85714rem;
    padding: 1.5rem; }
    @media (min-width: 551px) {
      .panel--address .panel-body {
        padding: 1.5rem 1.5rem 4.5rem; } }
  .panel--address .form-actions {
    margin-bottom: -0.78571rem;
    margin-top: 1.5rem;
    text-align: left; }
    @media (min-width: 551px) {
      .panel--address .form-actions {
        bottom: 1.5rem;
        position: absolute;
        width: auto; } }
    .panel--address .form-actions .button {
      margin-bottom: 0.78571rem; }
      .panel--address .form-actions .button + .button {
        margin-left: 0;
        margin-top: 0; }
        @media (min-width: 551px) {
          .panel--address .form-actions .button + .button {
            margin-left: 0.35714rem; } }

.address-title {
  margin: 0 0 0.78571rem;
  text-transform: none; }

.address-details {
  list-style: none;
  margin: 0 0 0.78571rem; }

.address-details--postal {
  font-size: 15px; }

.address-label,
.address-description {
  display: inline-block;
  font-size: 1rem;
  margin: 0; }

.address-label {
  color: #989898;
  font-weight: 400; }

.panel--newAddress {
  display: block;
  text-align: center;
  text-decoration: none; }
  .panel--newAddress:hover .address-title {
    color: #a5a5a5; }
  .panel--newAddress .panel-body {
    background-color: transparent;
    border: 1px solid #ebebeb;
    display: block; }
  .panel--newAddress .address-title {
    margin-bottom: 0;
    transition: all 0.15s ease; }

.address-addNew {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-55%); }

.address-symbol {
  font-size: 50px;
  line-height: 1; }

.videoGallery-main {
  height: 0;
  margin-bottom: 1.14286rem;
  overflow: hidden;
  padding-bottom: 67.5%;
  padding-top: 1.78571rem;
  position: relative;
  margin-bottom: 1.85714rem; }
  .videoGallery-main.widescreen {
    padding-bottom: 56.34%; }
  .videoGallery-main.vimeo {
    padding-top: 0; }
  .videoGallery-main iframe,
  .videoGallery-main object,
  .videoGallery-main embed,
  .videoGallery-main video {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0; }

.videoGallery-list {
  list-style: none;
  margin-left: 0;
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  font-size: 0; }
  .videoGallery-list ul,
  .videoGallery-list ol {
    list-style: none;
    margin-bottom: 0; }
  .videoGallery-list:before, .videoGallery-list:after {
    content: " ";
    display: table; }
  .videoGallery-list:after {
    clear: both; }

.videoGallery-item {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  display: inline-block;
  float: none;
  vertical-align: top; }
  @media (min-width: 801px) {
    .videoGallery-item {
      width: 50%; } }

.video {
  display: block;
  margin-bottom: 1.85714rem;
  opacity: 0.4;
  text-decoration: none;
  transition: opacity 100ms ease-out; }
  .video:before, .video:after {
    content: " ";
    display: table; }
  .video:after {
    clear: both; }
  .video-figure {
    float: left;
    margin-right: 0.78571rem; }
    .video-figure > img {
      display: block; }
  .video-figure--opposite {
    float: right;
    margin-left: 0.78571rem;
    margin-right: 0; }
  .video-body:before, .video-body:after {
    content: " ";
    display: table; }
  .video-body:after {
    clear: both; }
  @media (min-width: 801px) {
    .video {
      margin-bottom: 1.85714rem; } }
  .video:hover, .video.is-active {
    color: #333333;
    opacity: 1; }

.video-figure {
  margin-right: 1.85714rem; }

.video-title {
  margin-bottom: 0;
  margin-top: 0;
  text-transform: none; }

.video-description {
  font-size: 1rem;
  margin-bottom: 0; }

.previewCart {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%; }
  .previewCart:before, .previewCart:after {
    content: " ";
    display: table; }
  .previewCart:after {
    clear: both; }
  @media (min-width: 801px) {
    .previewCart .productView {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 75%;
      float: left;
      display: flex;
      margin: 0;
      padding-bottom: 0;
      padding-top: 0; }
    .previewCart .productView-image {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 58.33333%;
      float: left;
      display: flex;
      flex-direction: column; }
    .previewCart .productView-image--cart {
      align-self: flex-start;
      margin: 0 auto;
      width: 100%; }
    .previewCart .productView-details {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 41.66667%;
      float: left; } }
  .previewCart .productView-title {
    margin-top: 0; }

.previewCartCheckout {
  background: #e5e5e5;
  padding: 1rem;
  text-align: center; }
  @media (min-width: 801px) {
    .previewCartCheckout {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 25%;
      float: right;
      padding: 1.5rem; } }
  .previewCartCheckout .button {
    display: block;
    margin: 0;
    width: 100%; }
    .previewCartCheckout .button + p {
      margin-top: 0.78571rem; }
    .previewCartCheckout .button:not(:last-child) {
      margin-bottom: 0.78571rem; }

.previewCartCheckout-price {
  display: block;
  font-size: 42px;
  font-weight: bold;
  text-align: center; }

.previewCartCheckout-subtotal {
  display: block;
  margin-bottom: 1.5rem;
  margin-top: 1.5rem; }

.previewCartCheckout-additionalCheckoutButtons p {
  float: none !important;
  margin: 0.5rem 0; }

.previewCartCheckout-additionalCheckoutButtons .CheckoutButton {
  margin-bottom: 1rem; }
  .previewCartCheckout-additionalCheckoutButtons .CheckoutButton:first-child {
    margin-top: 1.5rem; }
  .previewCartCheckout-additionalCheckoutButtons .CheckoutButton:last-child {
    margin-bottom: 1.5rem; }

.suggestiveCart {
  display: none;
  text-align: center; }
  @media (min-width: 801px) {
    .suggestiveCart {
      display: block; } }

.maintenanceNotice {
  background-color: #fffdea;
  box-shadow: 0 0 5px #a5a5a5;
  color: #333333;
  left: 1.14286rem;
  padding: 1rem 1.28571rem;
  position: fixed;
  top: 1.14286rem;
  width: 24rem;
  z-index: 500; }
  .maintenanceNotice > :last-child {
    margin-bottom: 0; }
  .maintenanceNotice a {
    color: #333333; }

.maintenanceNotice-header {
  font-family: "Barlow";
  margin: 0 0 0.78571rem; }

body.hasAdminBar {
  padding-top: 55px; }
  @media (min-width: 801px) {
    body.hasAdminBar {
      padding-top: 0;
      margin-top: 46px; }
      body.hasAdminBar .banners {
        margin-top: 46px; }
      body.hasAdminBar .header {
        padding-top: 46px; } }
  body.hasAdminBar .navPages-container.is-open {
    padding-top: 55px; }

.adminBar {
  background-color: white;
  box-shadow: 0 0.14286rem 0.5rem 0 rgba(0, 0, 0, 0.2);
  color: #626568;
  display: none;
  font-family: "Source Sans Pro", arial, "sans serif", sans-serif;
  font-size: 14px;
  font-weight: normal;
  height: 46px;
  left: 0;
  position: fixed;
  text-decoration: none;
  top: 0;
  width: 100%;
  z-index: 10000; }
  @media (min-width: 801px) {
    .adminBar {
      display: block; } }
  .adminBar .svg-icon {
    align-self: center;
    display: inline-flex; }
  .adminBar .svg-icon svg {
    height: 1em;
    width: 1em; }
  .adminBar .svg-icon.svg-baseline svg {
    position: relative;
    top: 0.125em; }

.adminBar-logo {
  float: left;
  height: 46px;
  width: 45px; }
  .adminBar-logo svg {
    height: 100%;
    padding: 7px 10px 11px 7px;
    width: 100%; }

.adminBar-content {
  align-items: center;
  display: flex;
  height: 46px;
  justify-content: space-between; }
  .adminBar-content a {
    color: #3e67f8;
    text-decoration: none; }
  .adminBar-content a:hover {
    background-color: #f0f3fe;
    border-radius: 5px; }

.adminBar-private {
  margin-right: auto;
  text-align: left;
  /* Tooltip container */
  /* Tooltip text */
  /* Show the tooltip text when you mouse over the tooltip container */ }
  .adminBar-private a {
    padding: 10px; }
  .adminBar-private span {
    white-space: nowrap; }
  .adminBar-private .tooltip {
    display: inline-block;
    position: relative; }
  .adminBar-private .tooltip .tooltiptext {
    background-color: #313440;
    border-radius: 6px;
    color: #fff;
    padding: 5px 10px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: auto;
    z-index: 1; }
  .adminBar-private .tooltip-bottom {
    left: 50%;
    margin-left: -60px;
    top: 135%; }
  .adminBar-private .tooltip:hover .tooltiptext {
    visibility: visible; }

.adminBar-links {
  margin-left: auto;
  padding-right: 5px;
  text-align: right; }
  .adminBar-links a {
    padding: 10px; }
  .adminBar-links span {
    white-space: nowrap; }

.adminBar-large {
  display: none; }
  @media (min-width: 1261px) {
    .adminBar-large {
      display: initial; } }

.adminBar-close span {
  margin-bottom: 0.25em;
  margin-right: 5px;
  padding: 10px; }

.adminBar-close span:hover {
  background-color: #f0f3fe;
  border-radius: 5px; }

.adminBar-close span svg {
  height: 100%;
  width: 100%; }

.preview {
  font-weight: 400;
  padding-left: 9px; }

.cookieMessage {
  background: #f9f9f9;
  color: #333333;
  display: none; }
  .cookieMessage .button {
    width: 100%; }
    @media (min-width: 801px) {
      .cookieMessage .button {
        vertical-align: middle;
        width: 25%; } }
    @media (min-width: 1261px) {
      .cookieMessage .button {
        vertical-align: top; } }

.cookieMessage-container {
  margin: 0 auto;
  padding: 1.5rem; }
  @media (min-width: 801px) {
    .cookieMessage-container {
      width: 83.33333%; } }
  @media (min-width: 1261px) {
    .cookieMessage-container {
      width: 58.33333%; } }

@media (min-width: 801px) {
  .cookieMessage-text {
    display: inline-block;
    padding: 0 0.78571rem;
    vertical-align: middle;
    width: 66.66667%; } }

.login {
  margin: 3rem auto 6rem;
  max-width: 64.28571rem; }

.login-row {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%; }
  .login-row:before, .login-row:after {
    content: " ";
    display: table; }
  .login-row:after {
    clear: both; }
  @media (min-width: 801px) {
    .login-row {
      margin-top: 6rem; } }

.login-form {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }
  @media (min-width: 801px) {
    .login-form {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 50%;
      float: left;
      margin-top: 3rem; } }

.new-customer {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }
  @media (min-width: 801px) {
    .new-customer {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 50%;
      float: left; } }

.new-customer-intro {
  margin-bottom: 0; }

.new-customer-fact-list {
  margin-left: 3rem; }

.new-customer-fact {
  padding-left: 0.78571rem; }

.search-suggestion {
  margin-bottom: 2rem; }
  .search-suggestion > :last-child {
    margin-bottom: 0; }

.suggestion-title {
  margin-top: 0;
  text-transform: inherit; }

.advancedSearch-form {
  margin-bottom: 3rem; }
  .advancedSearch-form .form-row {
    margin-bottom: -1.5rem; }

.quickSearchResults {
  margin-top: 1.5rem; }
  @media (min-width: 801px) {
    .quickSearchResults {
      margin-top: 0; } }
  @media (min-width: 801px) {
    .quickSearchResults .modal-close {
      display: none; } }

.advancedSearch-separator {
  display: none; }

.advancedSearch-title {
  margin: 0 0 1.5rem;
  text-transform: inherit; }

.search-price-range label {
  display: inline; }
  .search-price-range label input {
    display: block;
    padding-left: 1.5rem; }
    @media (min-width: 551px) {
      .search-price-range label input {
        display: inline;
        width: 6rem; } }
  @media (min-width: 551px) {
    .search-price-range label span {
      display: inline;
      padding-left: 1.5rem;
      padding-right: 1.5rem; } }

.category-suggestion-list {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  list-style-type: none; }
  .category-suggestion-list:before, .category-suggestion-list:after {
    content: " ";
    display: table; }
  .category-suggestion-list:after {
    clear: both; }

.category-suggestion {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 33.33333%;
  float: left;
  font-size: 15px; }

.search-refine {
  margin-left: 1.5rem; }

.quickSearchMessage {
  font-size: 42px;
  margin: 1.5rem 0 0;
  text-align: center; }

.search-nav {
  position: relative; }

.navBar--account {
  display: none; }
  @media (min-width: 801px) {
    .navBar--account {
      display: block; } }

.account-heading {
  border-bottom: 1px solid #ebebeb;
  margin: 0;
  padding-bottom: 1rem; }

.account-list {
  list-style: none;
  margin-left: 0; }

.account-listItem {
  border-bottom: 1px solid #ebebeb;
  padding: 1.5rem 0;
  position: relative; }
  .account-listItem img {
    width: 100%; }
  .account-listItem .account-product-image {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    position: relative; }

.account-listShipping {
  border-bottom: 1px solid #ebebeb;
  font-weight: 700;
  padding: 2rem 0; }
  .account-listShipping .account-listShipping-title {
    margin: 0;
    text-transform: inherit; }

.account-product:before, .account-product:after {
  content: " ";
  display: table; }

.account-product:after {
  clear: both; }

.account-product-figure {
  float: left;
  margin-right: 0.78571rem; }
  .account-product-figure > img {
    display: block; }

.account-product-figure--opposite {
  float: right;
  margin-left: 0.78571rem;
  margin-right: 0; }

.account-product-body:before, .account-product-body:after {
  content: " ";
  display: table; }

.account-product-body:after {
  clear: both; }

.account-product-figure {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 2rem 0 0;
  position: relative;
  width: 70px; }
  .account-product-figure::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }

.account-product-download {
  border-radius: 50%;
  height: 2.35714rem;
  padding: 0;
  position: absolute;
  right: -0.78571rem;
  top: -0.78571rem;
  width: 2.35714rem;
  z-index: 1; }
  .account-product-download .icon {
    height: 1.5rem;
    margin-top: 0.35714rem;
    width: 1.5rem; }
  .account-product-download svg {
    fill: white; }

.account-product-body {
  overflow: hidden;
  padding-bottom: 3.5rem;
  position: relative; }
  @media (min-width: 551px) {
    .account-product-body {
      padding-bottom: 0; } }
  .account-product-body .definitionList {
    font-size: 15px;
    margin-bottom: 0; }

.account-product-title {
  margin: 0 0 0.21429rem;
  text-transform: inherit; }
  .account-product-title > a {
    text-decoration: none; }
  .account-product-title + .definitionList {
    margin-top: 0.78571rem; }

.account-product-subtitle {
  color: #a5a5a5;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 15px;
  margin: -0.21429rem 0 1rem;
  text-transform: inherit; }

.account-product-price {
  float: right;
  font-size: 15px; }

.account-product-description + .definitionList {
  margin: -1.35714rem 0 1.5rem; }

.account-product-refundQty {
  color: #a5a5a5;
  margin-bottom: 0; }

.account-product-details {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto; }
  .account-product-details:before, .account-product-details:after {
    content: " ";
    display: table; }
  .account-product-details:after {
    clear: both; }

.account-product-detail {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }
  @media (min-width: 551px) {
    .account-product-detail {
      width: 33.33333%; } }
  @media (min-width: 1261px) {
    .account-product-detail {
      width: 25%; } }
  .account-product-detail + .account-product-detail {
    margin-top: 1rem; }
    @media (min-width: 551px) {
      .account-product-detail + .account-product-detail {
        margin-top: 0; } }
  @media (min-width: 551px) {
    .account-product-detail + .account-product-detail--full {
      margin-top: 1.5rem; } }

@media (min-width: 1261px) {
  .account-product-detail--large {
    width: 50%; } }

.account-product-detail--full {
  width: 100%; }

.account-product-detail-heading {
  color: #989898;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin: 0 0 0.35714rem; }

.account-product--alignMiddle {
  display: table;
  width: 100%; }
  .account-product--alignMiddle .account-product-checkItem {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    width: 2rem; }
    @media (min-width: 1261px) {
      .account-product--alignMiddle .account-product-checkItem {
        left: -2.5rem; } }
    .account-product--alignMiddle .account-product-checkItem .form-label {
      height: 1.5rem;
      margin: 0;
      padding: 0;
      width: 1.5rem; }
  .account-product--alignMiddle .account-product-figure,
  .account-product--alignMiddle .account-product-body {
    display: table-cell; }
  .account-product--alignMiddle .account-product-figure {
    float: none;
    margin-right: 0; }
    @media (min-width: 1261px) {
      .account-product--alignMiddle .account-product-figure {
        left: -2rem; } }
  .account-product--alignMiddle .account-product-body {
    padding-left: 2rem;
    vertical-align: middle; }
    @media (min-width: 1261px) {
      .account-product--alignMiddle .account-product-body {
        padding-left: 0; } }

.account-orderTotal {
  float: right;
  font-size: 15px;
  margin-top: -1.5rem;
  width: 66.66667%; }

.account-orderTotal-key,
.account-orderTotal-value {
  margin: 0;
  padding: 1.5rem 0; }

.account-orderTotal-key {
  color: #989898;
  float: left;
  font-weight: 400; }
  .account-orderTotal-key:last-of-type {
    position: relative;
    top: 0.28571rem; }

.account-orderTotal-value {
  border-bottom: 1px solid #ebebeb;
  text-align: right; }
  .account-orderTotal-value:last-child {
    border-bottom: 0;
    font-size: 20px; }

.account-orderStatus {
  bottom: 0;
  left: 0;
  position: absolute; }
  @media (min-width: 551px) {
    .account-orderStatus {
      float: right;
      position: inherit;
      text-align: right; } }

.account-orderStatus-label {
  background-color: #cccccc;
  color: white;
  display: inline-block;
  font-size: 12px;
  line-height: 15px;
  margin: 0 0 0.35714rem;
  padding: 0.21429rem 0.5rem; }

.account-orderStatus-action {
  color: #989898;
  display: inline-block;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.25px;
  margin-left: 0.78571rem;
  text-align: right;
  text-decoration: underline;
  vertical-align: top; }
  @media (min-width: 551px) {
    .account-orderStatus-action {
      display: block;
      margin-left: 0; } }
  .account-orderStatus-action:hover {
    color: #4f4f4f; }

.account .pagination {
  color: #a5a5a5;
  margin-top: 3rem;
  text-align: center; }

.account-message .is-read {
  color: #a5a5a5; }

.account-sidebar-block {
  font-size: 15px; }
  .account-sidebar-block + .account-sidebar-block {
    margin-top: 3rem; }
  .account-sidebar-block .account-heading {
    margin-bottom: 1.5rem; }

.account-order-address {
  list-style: none;
  margin-left: 0; }
  .account-order-address ul,
  .account-order-address ol {
    list-style: none;
    margin-bottom: 0; }

.account-reorder-form {
  display: inline-block; }

.order-payments-description {
  color: #a3a3a3;
  font-weight: 400;
  margin-top: 1.5rem; }

.account-downloads-summary {
  border-bottom: 1px solid #ebebeb;
  font-size: 15px;
  padding-bottom: 1.5rem; }

.account-downloadsList {
  list-style: none;
  margin-left: 0; }
  .account-downloadsList ul,
  .account-downloadsList ol {
    list-style: none;
    margin-bottom: 0; }

.account-downloadsItem {
  margin-bottom: 1.5rem; }
  .account-downloadsItem > :first-child {
    margin-top: 0; }
  .account-downloadsItem > :last-child {
    margin-bottom: 0; }

.account-downloadsItem-title {
  color: #989898;
  font-size: 15px;
  margin-bottom: 0.21429rem;
  text-transform: inherit; }

.account-downloadsItem-description {
  margin-bottom: 0; }

.account-downloadsItem-availability {
  color: #989898; }

.wishlists-table {
  margin-left: auto;
  margin-right: auto;
  max-width: 85.71429rem; }

.wishlist-header {
  display: none;
  text-align: center; }

.modal .wishlist-header {
  display: block; }

.wishlist-form {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 39.28571rem; }
  .wishlist-form:before, .wishlist-form:after {
    content: " ";
    display: table; }
  .wishlist-form:after {
    clear: both; }
  .wishlist-form .form-field {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    float: left; }

.share-wishlist {
  margin-left: auto;
  margin-right: auto;
  max-width: 46.42857rem;
  text-align: center; }

.icon--ratingEmpty svg {
  fill: #f9f9f9; }

.icon--ratingFull svg {
  fill: #4e4e4e; }

.rating--small {
  display: inline-block; }
  .rating--small .icon {
    height: 1rem;
    width: 1rem;
    margin-top: -3px; }

.apple-pay-checkout-button {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 60%;
  border-radius: 0.28571rem;
  cursor: pointer;
  display: none;
  max-height: 4.57143rem;
  min-height: 2.28571rem;
  min-width: 90px;
  padding: 1.5rem;
  width: 160px;
  background-color: #000;
  background-image: -webkit-named-image(apple-pay-logo-white); }

.apple-pay-supported .apple-pay-checkout-button {
  display: block;
  float: right; }

.apple-pay-supported .previewCartCheckout .apple-pay-checkout-button {
  display: inline-block;
  float: none; }

.paymentMethodsTitle {
  margin: 0 0 0.78571rem;
  padding: 0;
  text-transform: none;
  width: 100%; }

.paymentMethodsGrid {
  display: flex;
  flex-wrap: wrap;
  margin: -0.78571rem;
  margin-bottom: 1.5rem; }
  .paymentMethodsGrid-item {
    padding: 0.78571rem;
    width: 100%; }
    @media (min-width: 551px) {
      .paymentMethodsGrid-item {
        width: 50%; } }

.paymentMethod {
  background-color: #e5e5e5;
  border: 1px solid #ebebeb;
  border-radius: 0.21429rem;
  display: flex;
  flex-flow: column nowrap;
  height: 100%; }
  .paymentMethod-row {
    padding: 1.5rem; }
    .paymentMethod-row:first-child {
      background-color: #fff; }
    .paymentMethod-row:last-child {
      margin-top: auto; }
    .paymentMethod-row:only-child {
      height: 100%; }
  .paymentMethod .button {
    margin-bottom: 0; }

.methodHeader {
  align-items: center;
  display: flex;
  flex-flow: row;
  justify-content: space-between; }
  .methodHeader-icon {
    margin-right: 0.78571rem;
    width: 2rem; }
    @media (min-width: 1261px) {
      .methodHeader-icon {
        width: 3rem; } }
  .methodHeader-title {
    font-size: 13px;
    font-weight: 600; }
    @media (min-width: 1261px) {
      .methodHeader-title {
        font-size: 1rem; } }
  .methodHeader-brand {
    font-size: 13px;
    font-weight: 600; }
    @media (min-width: 1261px) {
      .methodHeader-brand {
        font-size: 1rem; } }
  .methodHeader-meta {
    display: flex;
    flex-wrap: nowrap;
    margin-left: auto;
    padding-left: 0.78571rem; }
  .methodHeader-default {
    fill: #424242;
    height: 1.28571rem;
    margin-left: 0.78571rem;
    width: 1.28571rem; }
    @media (min-width: 1261px) {
      .methodHeader-default {
        height: 1.42857rem;
        width: 1.42857rem; } }
  .methodHeader-expiry {
    font-size: 15px;
    text-transform: capitalize; }

.methodDetails {
  display: flex;
  margin: 0; }
  .methodDetails-label {
    flex: 1;
    font-weight: 600; }
  .methodDetails-description {
    flex: 2;
    font-size: 13px; }

.newPaymentMethod {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-items: center;
  min-height: 13.28571rem;
  text-decoration: none; }
  .newPaymentMethod-icon {
    font-size: 50px;
    line-height: 1;
    margin: auto 0 0.78571rem; }
  .newPaymentMethod-title {
    margin: 0 auto auto;
    text-align: center; }

@media (min-width: 551px) {
  .paymentMethodForm {
    max-width: 60%; } }

@media (min-width: 551px) {
  .paymentMethodForm-column {
    display: flex; }
    .paymentMethodForm-column:first-child .form-field {
      margin-bottom: 0.78571rem; } }

.paymentMethodForm-heading {
  color: #333333;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  margin-top: 1.5rem;
  text-transform: capitalize; }

.paymentMethodForm-subheading {
  display: flex;
  font-weight: 600; }

@media (min-width: 551px) {
  .paymentMethodForm-cards {
    margin-left: auto; } }

.paymentMethodForm-cards-icon {
  margin-right: 0.21429rem;
  width: 2.42857rem; }

.paymentMethodForm-inputs {
  position: relative; }
  @media (min-width: 551px) {
    .paymentMethodForm-inputs:last-child {
      padding-left: 1.5rem;
      width: 30%; }
    .paymentMethodForm-inputs:first-child {
      width: 70%; } }

.paymentMethodForm-inputs-icon {
  position: absolute;
  right: 0.64286rem;
  top: 2.78571rem; }
  .paymentMethodForm-inputs-icon.icon {
    fill: #a5a5a5;
    height: 1.5rem;
    width: 1.5rem; }

.paymentMethodForm-details {
  margin-bottom: 0; }
  @media (min-width: 551px) {
    .paymentMethodForm-details {
      display: inline-block;
      margin: 0 3rem 0 0; } }

.paymentMethodForm-details-term {
  font-weight: 400;
  margin-bottom: 0.78571rem; }

.paymentMethodForm-details-description {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.25px; }

.category-header-image {
  width: 100%; }

.skip-to-main-link {
  background: white;
  color: #4e4e4e;
  font-weight: 700;
  left: 50%;
  padding: 4px;
  position: absolute;
  transform: translate(-50%, calc(-100% - 55px));
  transition: transform 0.3s;
  z-index: 500; }
  .skip-to-main-link:focus {
    transform: translate(-50%, 0%); }

.header {
  background-color: white;
  border-bottom: 1px solid #ebebeb;
  height: 55px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; }
  @media (min-width: 801px) {
    .header {
      border-bottom: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      height: auto;
      overflow: visible;
      position: relative; } }
  .header.is-open {
    height: 100%; }
    @media (min-width: 801px) {
      .header.is-open {
        height: auto; } }

.header-logo {
  font-size: 0;
  height: 55px;
  margin: 0 3.92857rem;
  text-align: center; }
  @media (min-width: 551px) {
    .header-logo {
      margin-left: 5.89286rem;
      margin-right: 5.89286rem; } }
  @media (min-width: 801px) {
    .header-logo {
      height: auto;
      margin: 4rem auto 4.5rem;
      padding: 0; }
      .header.fixed .header-logo {
        background-color: #f9f9f9;
        margin: 0;
        padding: 0.35714rem 0;
        position: absolute;
        top: 0;
        width: 100%; } }
  .header-logo__link {
    align-items: center;
    color: #333333;
    display: flex;
    height: inherit;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    text-decoration: none;
    width: 70%;
    z-index: 20; }
    .header-logo__link:before, .header-logo__link:after {
      content: " ";
      display: table; }
    .header-logo__link:after {
      clear: both; }
    @media (min-width: 801px) {
      .header-logo__link {
        background: none;
        border-bottom: 0;
        display: inline-flex;
        padding: 0;
        width: auto; } }
    .header-logo__link:hover {
      color: #a5a5a5; }
    .header-logo__link:active {
      color: #a5a5a5; }

.header-logo--left {
  text-align: left; }
  @media (min-width: 801px) {
    .header-logo--left {
      margin-left: 2.85714rem; } }
  .header-logo--left .header-logo-image {
    right: unset; }

.header-logo--right {
  text-align: right; }
  @media (min-width: 801px) {
    .header-logo--right {
      margin-right: 2.85714rem; } }
  .header-logo--right .header-logo-image {
    left: unset; }

.header-logo-text {
  display: block;
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  font-size: 2.25vw;
  font-weight: 700;
  letter-spacing: 0.14286rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap; }
  @media (min-width: 551px) {
    .header-logo-text {
      font-size: 2.5vw; } }
  @media (min-width: 801px) {
    .header-logo-text {
      display: inline;
      font-size: 28px;
      max-width: none;
      padding: 0;
      white-space: normal; }
      .header.fixed .header-logo-text {
        font-size: 32px; } }

.header-logo-image-container {
  position: relative;
  width: 100%; }
  @media (min-width: 801px) {
    .header-logo-image-container {
      min-height: 45px; } }

.header-logo-image-container::after {
  content: "";
  display: block; }

.header-logo-image {
  display: block;
  margin: 0 auto;
  max-height: 2.35714rem; }
  @media (min-width: 801px) {
    .header-logo-image {
      max-height: none; } }

.header-logo-image-unknown-size {
  max-height: 2.35714rem; }
  @media (min-width: 801px) {
    .header-logo-image-unknown-size {
      max-height: none; } }

.mobileMenu-toggle {
  height: 3.92857rem;
  width: 3.92857rem;
  display: inline-block;
  font-size: 0;
  left: 0;
  overflow: hidden;
  padding: 0 1.28571rem;
  position: absolute;
  z-index: 50; }
  @media (min-width: 801px) {
    .mobileMenu-toggle {
      display: none; } }
  .mobileMenu-toggle .mobileMenu-toggleIcon,
  .mobileMenu-toggle .mobileMenu-toggleIcon::before,
  .mobileMenu-toggle .mobileMenu-toggleIcon::after {
    background: #4e4e4e;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    transform: rotate(0deg);
    transition: transform 100ms ease-in, top 100ms ease-in 150ms, bottom 100ms ease-in 150ms;
    width: 1.42857rem; }
  .mobileMenu-toggle .mobileMenu-toggleIcon {
    top: 1.92857rem;
    transition: background-color 10ms ease-in 100ms; }
  .mobileMenu-toggle .mobileMenu-toggleIcon::before {
    top: -0.5rem; }
  .mobileMenu-toggle .mobileMenu-toggleIcon::after {
    bottom: -0.5rem; }
  .mobileMenu-toggle.is-open .mobileMenu-toggleIcon {
    background-color: transparent;
    transition-delay: 100ms; }
    .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::before, .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::after {
      background-color: #4e4e4e;
      bottom: auto;
      top: auto;
      transition: transform 100ms ease-in 150ms, top 100ms ease-in, bottom 100ms ease-in; }
    .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::before {
      top: 0;
      transform: rotate(45deg); }
    .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::after {
      bottom: 0;
      transform: rotate(-45deg); }

.body {
  margin-bottom: 6rem;
  margin-top: 1.5rem; }
  @media (min-width: 801px) {
    .body {
      margin-top: 2.5rem; } }

.page {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto; }
  .page:before, .page:after {
    content: " ";
    display: table; }
  .page:after {
    clear: both; }

@media (min-width: 801px) {
  .page-content--centered {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 66.66667%;
    float: left;
    margin-left: auto;
    margin-right: auto;
    float: none; } }

.page-content--textCenter {
  text-align: center; }

.page-sidebar {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  position: relative; }
  @media (min-width: 801px) {
    .page-sidebar {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 25%;
      float: left; }
      .page-sidebar + .page-content {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        width: 75%;
        float: left; } }

.footer {
  background-color: #333333;
  border-top: 1px solid #ebebeb;
  padding: 3rem 0;
  position: relative;
  transform: translateZ(0); }

.footer-title-sr-only {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px; }

.footer-info {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  font-size: 0; }
  .footer-info:before, .footer-info:after {
    content: " ";
    display: table; }
  .footer-info:after {
    clear: both; }

.footer-info-col {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  color: #989898;
  display: inline-block;
  float: none;
  font-size: 1rem;
  margin-bottom: 3rem;
  overflow-wrap: break-word;
  text-align: center;
  vertical-align: top;
  -ms-word-break: break-all; }
  @media (min-width: 551px) {
    .footer-info-col {
      text-align: left;
      width: 50%; } }
  @media (min-width: 801px) {
    .footer-info-col {
      width: 33.33334%; } }
  .footer-info-col > :first-child {
    margin-top: 0; }
  .footer-info-col > :last-child {
    margin-bottom: 0; }

@media (min-width: 801px) {
  .footer-info-col--small {
    width: 16.66667%; } }

.footer-info-col--social {
  width: 100%; }

@media (min-width: 551px) {
  .footer-info-col--left {
    padding: 0; } }

@media (min-width: 551px) {
  .footer-info-col--right {
    left: 50%;
    position: inherit;
    width: 50%; } }

@media (min-width: 801px) {
  .footer-info-col--right {
    left: 0;
    padding: 0;
    text-align: right;
    width: 100%; } }

.footer-info-heading {
  color: white;
  font-size: 1rem;
  text-transform: inherit; }

.footer-info-list {
  list-style: none;
  margin-left: 0; }
  .footer-info-list a {
    color: #989898;
    text-decoration: none; }
    .footer-info-list a:hover {
      color: #4f4f4f; }

.footer-copyright {
  text-align: center; }
  @media (min-width: 551px) {
    .footer-copyright {
      text-align: left; } }
  .footer-copyright > .powered-by {
    color: #989898;
    margin: 0; }
  .footer-copyright > .paypal-credit {
    color: #989898;
    font-size: 12px;
    margin: 1em 0 2em; }
  .footer-copyright a {
    color: #989898;
    text-decoration: none; }
    .footer-copyright a:hover {
      color: #4f4f4f; }

.footer-payment-icons {
  height: 2.85714rem;
  margin-top: 1.5rem; }
  @media (min-width: 801px) {
    .footer-payment-icons {
      margin-top: 3rem; } }
  .footer-payment-icons .footer-payment-icon {
    height: 100%;
    margin: 0.35714rem 15px;
    vertical-align: middle;
    width: 3.57143rem; }
  .footer-payment-icons svg {
    fill: #424242; }

.footer-newsletter-summary {
  text-align: left; }

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 91.71429rem;
  padding: 0 1.5rem;
  position: relative;
  width: 100%; }
  @media (min-width: 1261px) {
    .container {
      padding: 0 6rem; } }

.blog {
  margin-bottom: 1.5rem; }
  @media (min-width: 801px) {
    .blog {
      margin: auto;
      width: 100%; } }
  .blog .tags {
    margin-top: 3rem;
    text-align: center; }
  .blog .socialLinks {
    text-align: center; }
  .blog .addthis_toolbox {
    margin-top: 3rem; }

.blog-title {
  margin-top: 0;
  text-transform: none; }
  .blog-title a {
    text-decoration: none; }

.blog-date,
.blog-author {
  color: #989898;
  text-align: left;
  margin: 0; }

.blog-author {
  margin-bottom: 2.5rem; }

.blog-post {
  text-align: left; }

.blog-thumbnail {
  margin: 0 auto 1.5rem;
  max-width: 384px;
  position: relative; }
  .blog-thumbnail img {
    width: 100%; }

.blog-post-figure {
  display: block;
  margin: auto;
  text-align: center; }

.blog-post-body {
  display: block;
  margin: 0 auto;
  width: 100%; }

.sidebarBlock + .sidebarBlock {
  border-top: 1px solid #ebebeb;
  margin-top: 2rem;
  padding-top: 2rem; }

.sidebarBlock-heading {
  font-size: 1.07143rem;
  margin-top: 0;
  text-transform: inherit; }

.brandGrid {
  list-style: none;
  margin-left: 0;
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  font-size: 0;
  margin-bottom: 1.5rem; }
  .brandGrid ul,
  .brandGrid ol {
    list-style: none;
    margin-bottom: 0; }
  .brandGrid:before, .brandGrid:after {
    content: " ";
    display: table; }
  .brandGrid:after {
    clear: both; }
  .brandGrid .brand {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 50%;
    float: none;
    display: inline-block;
    font-size: 1rem;
    vertical-align: top; }
    @media (min-width: 551px) {
      .brandGrid .brand {
        width: 33.33333%; } }
    @media (min-width: 801px) {
      .brandGrid .brand {
        width: 25%; } }
    .brandGrid .brand .card-title {
      text-align: center; }

.brand-image-container {
  max-width: 250px;
  position: relative; }
  .brand-image-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }
  .brand-image-container img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; }

.brand .card-img-container {
  max-width: 250px; }
  .brand .card-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 100%;
    width: 100%; }

.productGrid {
  list-style: none;
  margin-left: 0;
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  font-size: 0;
  margin-bottom: 1.5rem; }
  .productGrid ul,
  .productGrid ol {
    list-style: none;
    margin-bottom: 0; }
  .productGrid:before, .productGrid:after {
    content: " ";
    display: table; }
  .productGrid:after {
    clear: both; }
  .productGrid .product {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 50%;
    float: none;
    display: inline-block;
    font-size: 1rem;
    vertical-align: top; }
    @media (min-width: 551px) {
      .productGrid .product {
        width: 33.33333%; } }
    @media (min-width: 801px) {
      .productGrid .product {
        width: 25%; } }

@media (min-width: 551px) {
  .page-sidebar + .page-content .productGrid .product {
    width: 33.33333%; } }

.productMasonry {
  column-count: 2;
  column-fill: auto;
  column-gap: 1.42857rem;
  margin: 0 0 1.5rem;
  overflow: hidden; }
  @media (min-width: 551px) {
    .productMasonry {
      column-count: 3; } }
  @media (min-width: 801px) {
    .productMasonry {
      column-count: 4; } }
  .productMasonry .product {
    break-inside: avoid;
    display: block;
    margin-bottom: 3rem;
    padding: 0;
    page-break-inside: avoid;
    width: 100%; }
  .productMasonry .card {
    margin: 0; }

@media (min-width: 801px) {
  .no-csscolumns .productGrid--maxCol6 .product {
    width: 16.66667%; } }

@media (min-width: 801px) {
  .csscolumns .productGrid--maxCol6 {
    column-count: 6; } }

@media (min-width: 801px) {
  .no-csscolumns .productGrid--maxCol3 .product {
    width: 33.33333%; } }

@media (min-width: 801px) {
  .csscolumns .productGrid--maxCol3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%;
    float: left;
    float: none; }
    .csscolumns .productGrid--maxCol3 .product {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 33.33333%;
      float: none; } }

.productList {
  list-style: none;
  margin-left: 0;
  margin: 0.78571rem; }
  .productList ul,
  .productList ol {
    list-style: none;
    margin-bottom: 0; }
  .productList .product + .product {
    margin-top: 4rem; }

@media (min-width: 551px) {
  .listItem {
    margin: 0 -0.75rem;
    max-width: none;
    width: auto;
    display: table;
    width: 100%; }
    .listItem:before, .listItem:after {
      content: " ";
      display: table; }
    .listItem:after {
      clear: both; } }

@media (min-width: 1261px) {
  .listItem:focus-within .listItem-figureBody {
    opacity: 1; } }

@media (min-width: 1261px) {
  .listItem.focus-within .listItem-figureBody {
    opacity: 1; } }

@media (min-width: 551px) {
  .listItem-figure,
  .listItem-body {
    display: table-cell;
    vertical-align: top; } }

@media (min-width: 1261px) {
  .listItem-figure,
  .listItem-body {
    vertical-align: middle; } }

.listItem-button {
  background-color: rgba(51, 51, 51, 0.9);
  color: white; }
  .listItem-button:hover, .listItem-button:focus {
    background-color: #333333;
    color: white; }

.listItem-figure {
  margin: 0 0 1.5rem;
  position: relative; }
  @media (min-width: 551px) {
    .listItem-figure {
      margin-bottom: 0;
      padding-left: 0.78571rem;
      padding-right: 0.78571rem;
      width: 25%; } }
  .listItem-figure__link {
    display: block;
    margin: 3px; }
  .listItem-figure .listItem-button {
    margin: 1.5rem 0; }
    @media (min-width: 1261px) {
      .listItem-figure .listItem-button {
        display: inline-block;
        margin: 0;
        pointer-events: all; } }

.listItem-figureBody {
  opacity: 1;
  text-align: center; }
  @media (min-width: 1261px) {
    .listItem-figureBody {
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-50%); }
      .listItem:hover .listItem-figureBody {
        opacity: 1; } }

.listItem-image {
  width: 100%; }

@media (min-width: 551px) {
  .listItem-body {
    padding-left: 1.28571rem;
    padding-right: 0.78571rem;
    width: 75%; } }

@media (min-width: 1261px) {
  .listItem-content {
    display: table; } }

@media (min-width: 1261px) {
  .listItem-details,
  .listItem-actions {
    display: table-cell;
    vertical-align: top; } }

@media (min-width: 1261px) {
  .listItem-details {
    padding-right: 6rem; }
    .listItem-details > :last-child {
      margin-bottom: 0; } }

.listItem-rating {
  margin-bottom: 0.35714rem; }

.listItem-brand {
  color: #a5a5a5;
  font-size: 1rem;
  margin: 0 0 0.21429rem; }
  @media (min-width: 801px) {
    .listItem-brand {
      font-size: 15px;
      margin-bottom: 0; } }

.listItem-title {
  font-size: 15px;
  margin: 0 0 0.21429rem; }
  @media (min-width: 801px) {
    .listItem-title {
      font-size: 20px; } }
  .listItem-title > a {
    text-decoration: none; }

.listItem-price {
  margin-bottom: 1rem; }
  @media (min-width: 801px) {
    .listItem-price {
      font-size: 20px; } }

@media (min-width: 1261px) {
  .listItem-actions {
    vertical-align: middle;
    width: 22%; }
    .listItem-actions .button--compare {
      font-size: 13px;
      padding: 0.57143rem 1.5rem; } }

.listItem-actions .button {
  margin-bottom: 0; }
  @media (min-width: 1261px) {
    .listItem-actions .button {
      width: 100%; }
      .listItem-actions .button + .button {
        margin: 0.78571rem 0 0; } }

@media (min-width: 1261px) {
  .page-sidebar + .page-content .productList .listItem-details {
    padding-right: 3rem; } }

@media (min-width: 1261px) {
  .page-sidebar + .page-content .productList .listItem-actions {
    width: 30%; } }

.productView {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: -1rem;
  margin-right: -1rem; }
  .productView:before, .productView:after {
    content: " ";
    display: table; }
  .productView:after {
    clear: both; }
  @media (min-width: 801px) {
    .productView {
      display: block; } }
  .modal .productView {
    padding-bottom: 0;
    padding-top: 0; }

.productView--quickView .socialLinks-item--print {
  display: none; }

.productView-images {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem; }
  @media (min-width: 801px) {
    .productView-images {
      width: 50%; } }

.productView-details {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem; }
  @media (min-width: 801px) {
    .productView-details {
      clear: right;
      float: right;
      width: 50%; } }
  .productView--quickView .productView-details {
    position: relative; }

.productView-description {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
  position: relative;
  z-index: 1; }
  .productView-description .productView-title {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem; }
  @media (min-width: 801px) {
    .productView-description .productView-description {
      clear: both;
      float: none;
      width: 100%; } }

.sale-flag-star,
.sale-flag-star::before,
.sale-flag-star::after, .sold-out-flag-star,
.sold-out-flag-star::before,
.sold-out-flag-star::after {
  content: "";
  display: block;
  height: 3.57143rem;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  transform: scaleX(1) scaleY(1) scaleZ(1);
  transform-origin: 50% 50% 0;
  transition: background-color 800ms ease;
  width: 3.57143rem;
  z-index: 10; }
  
  .sale-flag-star::before,
  .sold-out-flag-star::before {
    transform: rotateZ(30deg) scaleX(1) scaleY(1) scaleZ(1); }
  
  .sale-flag-star::after,
  .sold-out-flag-star::after {
    transform: rotateZ(60deg) scaleX(1) scaleY(1) scaleZ(1); }

.sale-flag-star,
.sale-flag-star::before,
.sale-flag-star::after {
  background: #f54a3a; }

.sold-out-flag-star,
.sold-out-flag-star::before,
.sold-out-flag-star::after {
  background: #007dc6; }

.starwrap {
  height: 3.57143rem;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 3.57143rem; }

.listItem-figure .starwrap {
  transform: scale(0.7); }
  @media (min-width: 551px) {
    .listItem-figure .starwrap {
      top: 0;
      transform: scale(0.6); } }
  @media (min-width: 1261px) {
    .listItem-figure .starwrap {
      top: 10px;
      transform: scale(0.7); } }

.sale-text-burst, .sold-out-text-burst {
  font-weight: 600;
  line-height: 1.07143rem;
  position: absolute;
  text-align: center;
  top: 20%;
  width: 3.57143rem;
  z-index: 50; }

.sale-text-burst {
  color: white; }

.sold-out-text-burst {
  color: white; }

.product:hover .starwrap .sale-flag-star,
.product:hover .starwrap .sale-flag-star::before,
.product:hover .starwrap .sale-flag-star::after {
  background: #c41c22; }

.product:hover .starwrap .sold-out-flag-star,
.product:hover .starwrap .sold-out-flag-star::before,
.product:hover .starwrap .sold-out-flag-star::after {
  background: black; }

.sale-flag-side, .sold-out-flag-side {
  border-radius: 0 50px 50px 0;
  font-size: 15px;
  font-weight: 700;
  height: 1.42857rem;
  line-height: 1.14286rem;
  padding-left: 0.5rem;
  padding-right: 0.78571rem;
  padding-top: 0.10714rem;
  position: absolute;
  transition: background-color 800ms ease;
  z-index: 10; }

.sale-flag-side {
  background: #f54a3a;
  color: white;
  font-size: 14px;
  font-weight: 700;
  position: absolute;
  transition: background-color 800ms ease;
  z-index: 10; }

.sale-flag-side {
  background: #f54a3a;
  color: white; }

.sold-out-flag-side {
  background: #007dc6;
  color: white; }

.product:hover .sale-flag-side {
  background: #c41c22; }

.product:hover .sold-out-flag-side {
  background: black; }

.sale-flag-sash, .sold-out-flag-sash {
  font-size: 15px;
  font-weight: 700;
  height: 1.42857rem;
  left: -25px;
  line-height: 1.14286rem;
  padding-top: 0.10714rem;
  position: absolute;
  text-align: center;
  top: 25px;
  transform: rotate(-45deg);
  transition: background-color 800ms ease;
  width: 8.5rem;
  z-index: 10; }

.sale-flag-sash {
  background: #f54a3a;
  color: white; }

.sold-out-flag-sash {
  background: #007dc6;
  color: white; }

.listItem-figure .sale-flag-sash,
.listItem-figure .sold-out-flag-sash {
  top: 24px; }
  @media (min-width: 551px) {
    .listItem-figure .sale-flag-sash,
    .listItem-figure .sold-out-flag-sash {
      left: -20px;
      top: 19px; } }
  @media (min-width: 1261px) {
    .listItem-figure .sale-flag-sash,
    .listItem-figure .sold-out-flag-sash {
      left: -15px;
      top: 24px; } }

.product:hover .sale-flag-sash {
  background: #c41c22; }

.product:hover .sold-out-flag-sash {
  background: black; }

.product {
  overflow: hidden; }

[data-product-attribute] .form-option.form-option-swatch {
  overflow: visible; }

.form-option-variant--none {
  height: 22px;
  overflow: hidden; }

.form-option-variant--color,
.form-option-variant--pattern {
  height: 45px;
  width: 45px; }

.form-option-expanded {
  background-color: white;
  border: 1px solid #999999;
  left: calc(100% + 55px);
  opacity: 0;
  padding: 3px;
  position: absolute;
  top: calc(100% + 5px);
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  visibility: hidden; }

.form-option:hover .form-option-expanded {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
  z-index: 5000; }

.form-option-image {
  display: block;
  height: 100px;
  width: 100px;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover; }

.account {
  margin-bottom: 1.5rem; }

@media (min-width: 801px) {
  .account--fixed {
    margin: 0 auto;
    width: 66.66667%; } }

@media (min-width: 801px) {
  .account--fixedSmall {
    margin: 0 auto;
    width: 50%; } }

@media (min-width: 801px) {
  .account--fixedLarge {
    margin: 0 auto;
    width: 75%; } }

.account-head {
  margin-bottom: 3rem;
  text-align: center; }
  .account-head .alertBox {
    padding-left: 3rem;
    padding-right: 3rem;
    text-align: left; }

.account-body {
  margin: 0 -0.75rem;
  max-width: none;
  width: auto; }
  .account-body:before, .account-body:after {
    content: " ";
    display: table; }
  .account-body:after {
    clear: both; }

.account-content {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }

@media (min-width: 801px) {
  .account-content--fixed {
    width: 66.66667%; } }

@media (min-width: 801px) {
  .account-content--fixedSmall {
    width: 50%; } }

.account-sidebar {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }
  @media (min-width: 801px) {
    .account-sidebar {
      width: 33.33333%; }
      .account-content--fixedSmall + .account-sidebar {
        float: right; } }

/* ==========================================================================
   ROOTS 5.2.2 + 2026 ELEVATION CUSTOMIZATIONS
   ========================================================================== */
/* ==========================================================================
Section 1 ROOTS VARIABLES
   ========================================================================== */
/* ==========================================================================
   Section 2. GENERAL
   ========================================================================== */
[data-content-region] {
  clear: both; }

body {
  transition: padding-top .3s linear; }

h1, h2 {
  text-transform: uppercase; }

h3 {
  font-family: "Roboto"; }

.main-heading {
  font-family: "Barlow";
  font-size: 32px;
  text-transform: none;
  line-height: normal; }

.page-heading {
  color: #4e4e4e;
  font-family: "Barlow";
  font-weight: 700; }

.uppercase {
  text-transform: uppercase; }

.center {
  text-align: center; }

a {
  text-decoration: none; }

.breadcrumbs {
  display: block; }

.breadcrumbs, ol.breadcrumbs, .body:not(.home) .page-heading {
  text-align: left; }

.button:not(.dropdown-button) {
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  font-weight: bold;
  font-size: 15px;
  border-radius: 2px; }

.button:not(.button--icon) i {
  max-height: 1rem;
  max-width: 1rem; }

.swal2-modal .swal2-cancel, .swal2-modal .swal2-cancel:active, .swal2-modal .swal2-cancel:focus, .swal2-modal .swal2-cancel:hover {
  background: #424242;
  color: white; }

.page {
  margin: 0; }

.button.dropdown-menu-button svg {
  fill: white; }

.socialLinks .icon svg {
  fill: #8cc640; }

.socialLinks .icon:hover svg {
  fill: #a5a5a5; }

.navList-section:after, .navList-section:before, .navList:after, .navList:before {
  display: none; }

/* ==========================================================================
   Section 3. SLICK SLIDER
   ========================================================================== */
.slick-prev,
.slick-next {
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: auto;
  height: auto; }

.slick-prev, .slick-next, .slick-prev:hover, .slick-next:hover, .slick-prev:focus, .slick-next:focus {
  background-color: transparent; }

.slick-prev:before,
.slick-next:before {
  height: 20px;
  width: 15px;
  background-size: 100% auto; }

.slick-slider:not(.heroCarousel) .slick-prev:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M22.4572074 1.00746147l-21 20.02482143 20.9479397 19.9751786' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }

.slick-slider:not(.heroCarousel) .slick-next:before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='42' viewBox='0 0 24 42'%3E%3Cpath d='M1.45679 1.00746147l21 20.02482143L1.50885 41.0074615' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none' fill-rule='evenodd' /%3E%3C/svg%3E"); }

.slick-disabled {
  opacity: .3; }

/* ==========================================================================
   Section 4. ALERTS
   ========================================================================== */
.alertBox--info {
  background-color: #424242;
  color: white; }

.alertBox--info a {
  color: white; }

/* ==========================================================================
   Section 5. CONTAINERS
   ========================================================================== */
.container, .banner, .previewCartAction, .previewCartItem {
  max-width: 1230px;
  padding: 0 15px;
  width: 100%;
  min-width: 0; }

.container {
  clear: both;
  float: none; }

.grid-bg {
  background: #f9f9f9;
  overflow: hidden;
  padding-top: 40px; }

.navUser {
  max-width: 1230px;
  width: 100%;
  font-size: 1rem; }

.navPages {
  max-width: 1230px;
  width: 100%; }

.navUser, .navPages, .heroCarousel {
  margin: 0 auto; }

/* ==========================================================================
   Section 6. SOCIAL LINKS
   ========================================================================== */
footer .socialLinks {
  display: flex;
  flex-flow: row wrap; }

.socialLinks .socialLinks-item {
  margin: 0 14px 14px 0; }

/* ==========================================================================
   Section 7. PRODUCT GRID
   ========================================================================== */
.brandGrid:after, .brandGrid:before, .productGrid:before, .productGrid:after, .productView:after, .productView:before {
  display: none; }

.productGrid, .brandGrid {
  display: flex;
  flex-flow: row wrap; }

.productGrid .product, .brandGrid .brand {
  flex: 0 1 25%;
  margin-bottom: 20px;
  max-width: 25%;
  overflow: visible; }

.productGrid .card, .brandGrid .card, .productCarousel-slide .card, .card {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  height: 100%;
  margin-bottom: 0; }

.card .card-figure {
  border: 1px solid #ebebeb;
  display: flex;
  flex: 1 1 100%;
  flex-flow: column nowrap;
  height: 285px;
  justify-content: center; }

.card .card-figure .card-figure__link {
  height: 100%;
  outline-offset: 3px; }

.card .card-image {
  max-height: calc(285px - 6px); }

.card-img-container:after {
  display: none; }

.card:hover .card-figcaption {
  height: auto;
  max-height: 300px;
  padding: 20px;
  z-index: 5; }

.card-figcaption {
  background: white;
  border: 1px solid #ebebeb;
  border-top: 0;
  bottom: auto;
  height: auto;
  top: 100%;
  opacity: 1;
  height: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s linear;
  width: calc(100% + 2px);
  left: -1px; }

.card-figcaption .button {
  font-size: 13px; }

.card-figcaption-body {
  color: #8cc640;
  transform: none;
  width: 100%;
  text-align: left; }

.button.button--secondary {
  background: white;
  border: 1px solid #333333;
  color: #333333; }

.button.button--secondary svg {
  fill: #333333; }

.card-figcaption-body .button:not(.quickview) {
  background: #333333; }

.quickView .productView-images, .quickView .productView-details {
  max-width: 50%;
  flex: 0 1 50%; }

.card-figcaption--action-buttons {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center; }

.card-figcaption--action-buttons .button {
  flex: 1 1 50%;
  margin: 0;
  line-height: normal;
  padding: 12px 15px; }

.card-figcaption--action-buttons .quickview {
  margin-right: 10px; }

.card .card-body {
  display: flex;
  flex: 1 1 100%;
  flex-flow: row wrap;
  height: calc(100% - 285px);
  text-align: left; }

.card .card-title {
  align-self: flex-start;
  flex: 0 1 100%;
  font-family: "Roboto Condensed";
  font-size: 15px;
  letter-spacing: normal;
  margin: 0;
  text-align: left;
  text-transform: uppercase; }

.card .card-text {
  color: #4e4e4e;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  flex: 1 1 100%; }

.card .price-section {
  display: flex;
  flex-flow: row wrap; }

.card .price-section .price {
  order: 1;
  margin-right: 10px; }

.card .price-section .regular-price {
  order: 2; }

.card .price-section .price--rrp {
  order: 3;
  flex: 1 1 100%; }

.card .brand-name {
  color: #4e4e4e; }

.card .card-details {
  flex: 0 1 100%;
  align-self: flex-end; }

.regular-price {
  text-decoration: line-through; }

.price--discounted + .price, .price--rrp + .price, .regular-price + .price {
  color: #F54A3A;
  font-weight: 600; }

.price--discounted, .price--rrp {
  color: #4e4e4e;
  display: block;
  font-size: 12px; }

.price--rrp:before {
  content: "MSRP "; }

.rating--small .icon, .productView-rating .icon {
  width: 12px;
  height: 12px; }

.rating--small .icon svg, .productView-rating .icon svg {
  stroke: #4e4e4e; }

.productGrid .card-body .button {
  text-transform: uppercase; }

.card .button {
  padding: 8px 15px; }

.card-compare {
  display: block;
  margin: 5px 0 0; }

.compare-button-wrap {
  display: none;
  font-size: 12px;
  font-weight: bold;
  position: relative;
  text-align: center;
  visibility: hidden; }

.compare-button-wrap .countPill {
  background: none;
  color: #8cc640;
  display: inline;
  margin: 0; }

.compare-button-wrap a:hover .countPill, .compare-button-wrap a:focus .countPill {
  color: #a5a5a5; }

/* ==========================================================================
   Section 8. SALE & STOCK BADGES
   ========================================================================== */
.sale-text {
  text-transform: uppercase; }

.sale-flag-side {
  border-radius: 0;
  height: auto;
  left: 0;
  line-height: normal;
  text-align: center;
  font-family: "Roboto Condensed";
  top: 0;
  padding: 4px 13px; }

.stock-badge {
  background: #969696;
  top: 0;
  color: white;
  font-family: "Roboto Condensed";
  font-weight: 700;
  right: 0;
  line-height: normal;
  padding: 4px 13px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  z-index: 1; }

/* ==========================================================================
   Section 9. COMPARE TABLE
   ========================================================================== */
.compareTable .card-figure__link {
  width: 100%;
  height: 100%; }

/* ==========================================================================
   Section 10. HEADER
   ========================================================================== */
.navUser i {
  vertical-align: baseline; }

.navUser-item-currency ul.dropdown-menu {
  border: 1px solid #d2d2d2;
  z-index: -1;
  margin-top: -1px;
  right: -1px; }

.navUser-item-currency a.has-dropdown.is-open {
  border-top: 1px solid #d2d2d2;
  margin-top: -1px; }

.navUser-item-currency i {
  width: 8px;
  height: 8px;
  vertical-align: middle; }

#cart-preview-dropdown {
  width: 320px !important;
  margin-top: 10px; }

.previewCartAction {
  border: 0;
  display: flex;
  flex-flow: row nowrap;
  padding: 15px;
  width: 100%; }

.previewCartAction > div {
  float: left;
  flex: 1 1 auto; }

.previewCartAction > div:not(.previewCartAction--close) {
  width: 45%;
  padding: 0;
  text-transform: uppercase; }

.previewCartAction div + div {
  margin-left: 10px; }

.previewCartAction .button {
  border: 0; }

.previewCartAction--close {
  display: flex;
  width: 10%; }

.previewCartAction .cart-preview-close {
  display: inline-block;
  font-size: 15px;
  line-height: normal;
  padding: 0; }

.navUser-item .previewCart .cart-preview-close svg {
  fill: white;
  stroke: white; }

.previewCart .checkoutMultiple {
  display: block;
  padding: 0 15px 15px;
  text-align: center; }

.cart-preview-title {
  display: inline-block;
  font-weight: 700;
  font: "Roboto";
  font-size: 12px;
  padding: 14px 10px;
  text-transform: uppercase; }

.previewCartList .previewCartItem {
  border: 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  padding: 0 15px;
  width: 100%; }

.previewCart .productView-img-container {
  max-height: 400px; }

.previewCartItem-image {
  align-items: center;
  display: flex;
  flex: 0 1 60px;
  padding-right: 10px; }

.previewCartItem-image img {
  position: static; }

.previewCartItem-content {
  display: flex;
  flex: 1 1 auto;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0; }

.previewCartItem-name {
  flex: 1 1 calc(100% - 65px);
  margin: 0; }

.previewCartItem-price {
  color: #4e4e4e;
  flex: 1 1 65px;
  text-align: right; }

.cart-preview-list-item-remove {
  flex: 1 1 100%; }

.cart-preview-list-item-remove a {
  font-size: 11px;
  text-decoration: none; }

.cart-preview-pricing {
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 10px 15px; }

.cart-preview-total-price-label {
  text-transform: uppercase;
  font-size: 12px; }

.cart-preview-footer {
  border-top: 1px solid #f9f9f9;
  margin-top: 15px; }

.cart-preview-total-price {
  font-size: 15px; }

/* ==========================================================================
   Section 11. HEADER LOGO
   ========================================================================== */
.header-logo {
  display: flex;
  flex-flow: row nowrap;
  text-align: left; }

.header-logo h1, .header-logo > .logo-wrap {
  flex: 0 1 calc(100% - 85px); }

.logo-and-toggle {
  max-width: 100%; }

.logo-wrap a {
  width: auto;
  max-width: 100%;
  text-overflow: ellipsis;
  line-height: 1; }

.header-logo-text {
  white-space: normal;
  font-size: 28px; }

.header-logo h1 {
  margin: 0;
  padding: 3px; }

.header-logo h1 a, .header-logo > a {
  width: 100%; }

.header-logo-image {
  margin: 0; }

.navUser-item-cartLabel {
  display: inline; }

.navUser-item--cart .countPill {
  border-radius: 0; }

/* ==========================================================================
   Section 12. QUICK SEARCH
   ========================================================================== */
.quickSearchWrap .form-input, .navPages-quickSearch .form-input {
  background: white;
  border: 1px solid #d2d2d2;
  border-radius: 0;
  color: #969696;
  height: 45px;
  padding-left: 45px; }

.quickSearchWrap .form-input::placeholder {
  color: #969696;
  opacity: 1; }

.quickSearchWrap .form-input:-ms-input-placeholder {
  color: #969696; }

.quickSearchWrap .form-input::-ms-input-placeholder {
  color: #969696; }

.quickSearchResults .stock-badge {
  font-size: 10px;
  padding: 1px 5px; }

.quickSearchWrap .form-button, .navPages-quickSearch .form-button {
  height: 45px;
  padding: 0 19px;
  position: absolute;
  left: 0;
  top: 0; }

.quickSearchWrap .form-button .icon, .navPages-quickSearch .form-button .icon {
  width: 19px;
  height: 19px; }

.navPages-quickSearch form {
  position: relative; }

.quickSearchMessage {
  font-size: 15px;
  text-align: left;
  padding: 0 20px 15px;
  font-weight: bold;
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  color: #4e4e4e; }

.quickSearchResults {
  background: white;
  border: 1px solid #d2d2d2;
  border-top: 0;
  width: 410px;
  max-width: 100%;
  font-size: 13px;
  overflow-y: auto; }

.quickSearchResults h5 {
  background: #f9f9f9;
  border-top: 1px solid #d2d2d2;
  padding: 15px 20px;
  margin: 0;
  font-family: "Roboto Condensed"; }

.quickSearchResults .card-figcaption {
  display: none; }

.quickSearchResults .card--alternate:hover {
  border-color: #fff; }

.quickSearchResults .card--alternate:hover .card-body {
  background: none; }

.quickSearchResults .productGrid {
  display: block;
  margin: 0; }

.quickSearchResults ul .product {
  display: block;
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
  position: relative; }

.quickSearchResults li .overlay-link {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%; }

.quickSearchResults .card {
  align-items: flex-start;
  border: 0;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 0;
  padding: 12px 20px; }

.quickSearchResults .card:hover {
  border-color: white; }

.quickSearchResults .card-figure {
  border: 1px solid #ebebeb;
  display: block;
  flex: 1 1 75px;
  height: auto; }

.quickSearchResults .card-image {
  max-height: 75px;
  position: static; }

.quickSearchResults div.card-body {
  background: white;
  flex: 1 1 calc(100% - 75px);
  padding: 0 0 0 15px;
  font-size: 12px; }

.quickSearchResults .card-title {
  font-size: 13px; }

.quickSearchResults .card-figcaption-button {
  display: none; }

.quickSearchResults button {
  text-transform: uppercase;
  font-weight: bold;
  font-family: "Roboto Condensed";
  padding: 10px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  top: 10px; }

/* ==========================================================================
   Section 13. NAVIGATION
   ========================================================================== */
.navPages-mainNav, .navPages-list {
  font-family: "Roboto Condensed";
  position: relative; }

.navPages-action:focus {
  color: #969696; }

.navPages-list:not(.navPages-mega) ul {
  padding: 0 0 10px; }

.navPages .navPages-action {
  -webkit-transition: color .3s ease-in-out;
  transition: color .3s ease-in-out; }

.navPage-subMenu-action {
  font-size: 15px; }

.navPage-childList-action {
  font-family: "Roboto";
  text-transform: none; }

/* ==========================================================================
   Section 14. FOOTER
   ========================================================================== */
.footer-newsletter {
  background: #fff;
  text-align: center;
  padding: 55px 15px 40px; }

.footer-newsletter h5 {
  font-family: "Barlow";
  text-transform: none;
  font-size: 32px;
  margin-top: 0; }

.footer-newsletter-summary {
  text-align: center; }

.footer-newsletter form {
  width: 688px;
  max-width: 100%;
  margin: auto; }

.footer-newsletter .form-prefixPostfix {
  position: relative; }

.footer-newsletter .icon {
  position: absolute;
  left: 15px;
  top: 1.5rem;
  transform: translateY(-50%); }

.footer-newsletter .form-input {
  padding-left: 45px; }

.footer-info:before, .footer-info:after {
  display: none; }

.footer-info {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -15px;
  align-items: flex-start; }

.footer-info-col {
  flex: 1 1 100%;
  margin-bottom: 25px;
  padding-left: 15px;
  padding-right: 15px;
  text-align: left;
  max-width: 100%; }

.footer-info-col, .footer-copyright > .powered-by {
  color: #d2d2d2; }

.footer-copyright + .footer-copyright {
  margin-top: 20px; }

.footer-info-heading:not(.footer-store-name) {
  text-transform: uppercase; }

.footer-info-heading.footer-store-name {
  font-family: "Roboto";
  font-size: 24px; }

footer address {
  font-style: normal; }

footer address + .footer-info-phone {
  margin-top: 20px; }

footer .icon svg {
  fill: white; }

.footer-info-phone a {
  color: white;
  font-size: 15px;
  vertical-align: middle; }

footer .socialLinks-item {
  background: #8cc640;
  width: 33px;
  height: 33px;
  text-align: center;
  line-height: 33px;
  border-radius: 50px; }

.footer-info .socialLinks .icon {
  width: 17px;
  height: 17px; }

.footer-info .socialLinks .icon svg {
  fill: white; }

.footer-info .socialLinks .icon svg:hover {
  fill: white; }

.footer-info-list a, footer a {
  color: #d2d2d2;
  text-decoration: none; }

.footer-info-list a:hover, footer a:hover {
  color: #d2d2d2; }

.footer-giftCerts {
  margin-bottom: 10px; }

.footer-payment-icons {
  height: auto;
  margin: 0 -15px; }

.footer-payment-icons .footer-payment-icon {
  width: 50px;
  height: 30px; }

.footer-payment-icons svg.footer-payment-icon-visa {
  width: 37px;
  height: 12px; }

.footer-payment-icons svg.footer-payment-icon-amex {
  width: 48px;
  height: 19px; }

.footer-payment-icons svg.footer-payment-icon-paypal {
  width: 52px;
  height: 14px; }

.footer-payment-icons svg.footer-payment-icon-apple {
  width: 41px;
  height: 19px; }

.footer-payment-icons svg.footer-payment-icon-mastercard {
  width: 87px;
  height: 14px; }

.footer-payment-icons svg.footer-payment-icon-discover {
  width: 54px;
  height: 8px; }

.footer-payment-icons svg {
  fill: white; }

.footer-copyright {
  border-top: 1px solid #4e4e4e;
  padding-top: 20px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between; }

/* ==========================================================================
   Section 15. BANNERS
   ========================================================================== */
.banners {
  background-color: #fff;
  color: #4e4e4e; }

.promo-box-row ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  flex-flow: row wrap; }

.promo-box-row li {
  flex: 0 1 32.5%; }

/* ==========================================================================
   Section 16. CAROUSEL
   ========================================================================== */
.heroCarousel a {
  text-decoration: none; }

.heroCarousel.slick-slider {
  margin-bottom: 0;
  opacity: 1; }

.slick-slide {
  height: auto; }

.heroCarousel-title {
  font-family: "Barlow";
  font-weight: bold;
  text-transform: uppercase;
  font-size: 32px; }

.heroCarousel-title + .heroCarousel-description {
  margin-top: 17px; }

.heroCarousel-action, .heroCarousel-action:hover, .heroCarousel-action:focus {
  background: transparent;
  border: 1px solid white;
  color: white;
  text-transform: uppercase; }

.heroCarousel .slick-prev, .heroCarousel .slick-next {
  background-color: rgba(0, 0, 0, 0.4);
  height: auto;
  opacity: 0;
  padding: 10px;
  -webkit-transition: opacity .3s ease-in-out;
  transition: opacity .3s ease-in-out;
  width: auto; }

.heroCarousel:hover .slick-prev, .heroCarousel:hover .slick-next {
  opacity: 1; }

.heroCarousel .carousel-tooltip {
  left: 0;
  position: absolute; }

.heroCarousel .slick-dots li {
  background: transparent;
  height: auto;
  width: auto;
  text-align: center; }

.slick-dots li button,
.slick-dots li button::before {
  border-width: 2px;
  height: 10px;
  width: 10px; }

.slick-dots li button::before {
  top: -2px;
  left: -2px; }

.heroCarousel .slick-dots li button:before, .heroCarousel .slick-dots li button:hover:before, .heroCarousel .slick-dots li button:focus:before {
  opacity: 1; }

/* ==========================================================================
   Section 17. HOME PAGE
   ========================================================================== */
.home {
  margin-top: 0; }

.body {
  margin-bottom: 0; }

.featured-categories {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 24px 0; }

.featured-categories > div {
  flex: 0 1 calc(50% - 12px);
  margin-bottom: 24px;
  position: relative; }

.featured-categories--text {
  padding: 0 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; }

.featured-categories--text, .featured-categories--text h2 {
  color: #fff; }

.featured-categories--text h2 {
  margin-top: 0; }

.featured-categories--text .button {
  background: transparent;
  border: 1px solid #fff;
  margin-bottom: 0; }

.featured-categories .overlay-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.blog-posts-wrap {
  padding-top: 60px; }

.blog-posts {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  text-align: left;
  margin: -12px -12px 0; }

.blog:not(.full-post) {
  flex: 0 1 33.333%;
  margin: 0;
  width: 33.333%;
  padding: 20px 12px; }

.read-more {
  margin-top: 15px; }

/* ==========================================================================
   Section 18. CATEGORY PAGE
   ========================================================================== */
.page--category h1 {
  text-transform: uppercase; }

.facetedSearch-refineFilters {
  margin-bottom: 15px; }

.facetedSearch .toggleSidebarBlock:not(.facetedSearch-toggle) {
  margin: 0 auto 2rem;
  padding: 1rem;
  width: 100%; }

.facetedSearch .toggleSidebarBlock:not(.facetedSearch-toggle).is-open {
  margin-bottom: 0; }

.grid-bg > .container > *:first-child:not(.page-sidebar) {
  padding-left: 0;
  padding-right: 0;
  width: 100%; }

.page-sidebar {
  background: #fff;
  margin-bottom: 40px; }

.page-sidebar .toggleLink {
  color: #8cc640; }

.page-sidebar .toggleLink:hover, .page-sidebar .toggleLink:active {
  color: #a5a5a5; }

.page-sidebar .accordion-indicator {
  fill: #4e4e4e; }

.page-sidebar svg.toggleLink-text--on {
  transform: rotate(180deg); }

.sidebarBlock-heading, .page-sidebar .accordion-title {
  font-family: "Roboto Condensed";
  color: #4e4e4e;
  text-transform: uppercase;
  font-weight: bold; }

.page-sidebar .navList-action--checkbox {
  padding-left: 0;
  padding-right: 1.85714rem; }

.page-sidebar .navList-action--checkbox::before {
  left: auto;
  right: 0; }

.page-sidebar .navList-action--checkbox::after {
  left: auto;
  right: 1px; }

.navList-action--checkbox span {
  color: #4e4e4e; }

.toggleLink + .facetedSearch-navList {
  margin-top: 0; }

#product-listing-container .actionBar {
  margin: 0; }

.page-content-subcategories ul.subcategory-grid {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  margin: 0 -0.75rem; }

.page-content-subcategories .subcategory-grid li {
  margin-bottom: 20px;
  padding-left: 0.75rem;
  padding-right: 0.75rem; }

.page-content-subcategories .subcategory-grid a {
  display: flex;
  flex-flow: column nowrap;
  height: 100%; }

.page-content-subcategories .navList:not(.subcategory-grid) .image-wrap {
  display: none; }

.page-content-subcategories .subcategory-grid .image-wrap {
  align-items: center;
  border: 1px solid #ebebeb;
  display: flex;
  flex: 0 1 auto;
  flex-flow: row nowrap;
  height: 285px;
  margin: 0 auto 10px;
  width: 100%;
  position: relative; }

.page-content-subcategories img {
  margin: auto;
  max-height: 285px; }

.page-content-subcategories .subcategory-grid span {
  display: block; }

.sort-and-pagination {
  clear: both;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; }

.sort-and-pagination > * {
  flex: 0 1 auto; }

.pagination-item:not(.pagination-item--next):not(.pagination-item--previous) {
  border: 0;
  border-bottom: 1px solid #ebebeb;
  margin: 0; }

.pagination-item:not(.pagination-item--next):not(.pagination-item--previous).pagination-item--current {
  border-color: #4e4e4e;
  font-weight: bold; }

.pagination-item:not(.pagination-item--next):not(.pagination-item--previous).pagination-item--current a {
  font-weight: bold; }

.pagination-item:not(.pagination-item--next):not(.pagination-item--previous) a {
  padding: 6px 13px; }

li.pagination-item--next a, li.pagination-item--previous a {
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  font-weight: bold; }

/* ==========================================================================
   Section 19. PRODUCT PAGE
   ========================================================================== */
.productView {
  overflow: hidden; }

.productView-thumbnails:not(.slick-slider) {
  display: flex;
  justify-content: center; }

.productView-thumbnails img {
  max-width: calc(100% - 6px);
  max-height: calc(100% - 6px); }

.productView-thumbnail-link {
  margin: auto; }

.productView-product {
  border: 0;
  padding-bottom: 0; }

.productView-warranty {
  margin-top: 2rem; }

.productView .sale-flag-side {
  display: inline-block;
  min-width: 0;
  position: static; }

.productSKU .productView-info-name {
  font-weight: normal; }

[data-product-attribute] .form-option.unavailable:before {
  transform: translatex(-11%) translatey(22px) rotate(-45deg);
  top: 0;
  left: 0;
  width: 128%; }

.productView-info-bulkPricing {
  background: #f9f9f9;
  padding: 15px;
  margin-bottom: 20px; }

.productView-info-bulkPricing .productView-info-bulkPricing-name {
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  font-weight: bold; }

.productView-info-bulkPricing p {
  color: #4e4e4e;
  margin-bottom: 0; }

.productView-info-bulkPricing ul {
  border-top: 1px solid #4e4e4e;
  margin: 15px 0 0;
  list-style: inside;
  padding-top: 15px; }

.productView-info-bulkPricing li span {
  color: #F54A3A; }

.form-fileDescription {
  margin-bottom: 0; }

.button--small {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px; }

.productView-shipping--free {
  color: #f54a3a; }

.productView-info-name {
  clear: left;
  font-family: "Roboto";
  font-weight: bold; }

.productView-info-name.hide-label {
  display: none; }

.productView-info-value {
  margin-bottom: 0; }

.productView-info-name,
.productView-info-value {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 3px;
  margin-top: 3px; }

.productView .form-label.form-label--alternate, .productView .productView-shipping .productView-info-name, .productView .productView-giftWrap .productView-info-name, .form-field--stock .productView-info-name {
  color: #4e4e4e;
  font-family: "Roboto Condensed";
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px; }

.button--out-of-stock {
  margin-top: 1rem; }

.button--out-of-stock, .button--out-of-stock:hover, .button--out-of-stock:focus {
  background: #969696;
  color: white;
  cursor: default; }

.tab-heading--specs {
  display: none; }

.tabs-contents .productView-info .productView-info-name, .tabs-contents .productView-info .productView-info-value {
  display: inline-block;
  font-size: 14px;
  margin-bottom: 3px;
  margin-top: 3px;
  float: left; }

.productSKU, .productUPC {
  display: inline-block;
  vertical-align: middle; }

.productView-price {
  clear: both;
  margin-top: 5px; }

.productView-reviewLink:last-of-type:first-of-type {
  margin-left: 0; }

.min-max-purchase {
  margin-bottom: 1rem; }

.min-max-purchase .productView-info-name, .min-max-purchase .productView-info-value {
  margin-bottom: 0;
  margin-top: 0; }

.productView-options {
  margin-top: 25px;
  margin-bottom: 0;
  text-align: left; }

.productView-specs > div {
  overflow: hidden; }

.productView-specs > div:first-child {
  border-top: 1px solid #ebebeb;
  margin-top: 20px;
  padding-top: 20px; }

.productView-specs > div:last-child {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding-bottom: 20px; }

.form-field[data-product-attribute="set-rectangle"] .form-option {
  padding: 10px 15px;
  line-height: normal; }

.productView-options-wrap .productView-options-inner {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20px; }

.shipping-giftWrap-stock > div:last-child {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 20px;
  padding-bottom: 20px; }

.productView .form-label--inlineSmall small {
  font-size: 0; }

.productView .form-label--inlineSmall small.is-required:after {
  content: "*";
  color: #F54A3A;
  font-size: 14px; }

.form-input--incrementTotal {
  border: 1px solid #424242;
  padding: 12px 0;
  width: 45px;
  height: 45px; }

.form-increment .button {
  background: #fff;
  border: 1px solid #ebebeb;
  height: 45px;
  padding: 0 9px; }

.form-increment .button svg {
  fill: #424242; }

.productView-options .form-action {
  margin-right: 10px;
  padding-right: 0; }
  .productView-options .form-action .button {
    margin-right: 0; }

:root {
  --add-to-cart-button-width: 100%; }
  @media (min-width: 801px) {
    :root {
      --add-to-cart-button-width: 80%; } }
  @media (min-width: 1261px) {
    :root {
      --add-to-cart-button-width: 60%; } }

.productView-options .add-to-cart-buttons {
  display: grid;
  gap: 1rem;
  width: var(--add-to-cart-button-width);
  float: none; }
  .productView-options .add-to-cart-buttons .form-action {
    width: 100%;
    margin: 0; }
  .productView-options .add-to-cart-buttons .add-to-cart-wallet-buttons {
    margin-top: 0; }
    .productView-options .add-to-cart-buttons .add-to-cart-wallet-buttons #bc-smart-payment-buttons {
      display: flex;
      align-items: center;
      justify-content: stretch;
      gap: 1rem;
      flex-direction: column; }
      .productView-options .add-to-cart-buttons .add-to-cart-wallet-buttons #bc-smart-payment-buttons [data-smart-button-container-id] {
        margin-top: 0;
        width: 100%; }
      .productView-options .add-to-cart-buttons .add-to-cart-wallet-buttons #bc-smart-payment-buttons button.show-more-button {
        margin-top: 0;
        padding: 0; }

.form-action.form-wishlist {
  float: none;
  width: var(--add-to-cart-button-width);
  display: block; }
  .form-action.form-wishlist .button {
    width: 100%; }

.form-wishlist + * {
  clear: both; }

.form-wishlist.form-action {
  margin-bottom: 0; }

#wishlist-dropdown .button {
  border: 1px solid #cccccc;
  color: #8cc640;
  text-align: left; }

.addthis_toolbox {
  clear: both; }

.socialLinks {
  clear: both; }

.socialLinks-item--facebook_like > div > span {
  vertical-align: middle !important; }

.productReview {
  width: 100%; }

.icon.accordion-indicator {
  width: 12px;
  height: 12px; }

.productReviews {
  margin-top: 30px; }

.productReviews-list li + li {
  border-top: 1px solid #ebebeb;
  padding-top: 20px; }

/* ==========================================================================
   Section 20. FAST CART
   ========================================================================== */
.fastCart .whatNext {
  flex: 1 1 100%; }

.fastCart .productView {
  flex-wrap: wrap;
  align-items: flex-start; }

.fastCart .productView-image {
  width: 150px;
  min-height: 0; }

.fastCart .productView-details {
  width: auto;
  flex: 1 1 calc(100% - 150px); }

.fastCart .productView-details .productView-info > * {
  margin-top: 0; }

.fastCart .productView-info {
  margin-bottom: 0; }

.fastCart .productView .productView-price {
  font-size: 14px; }

.fastCart .previewCartCheckout {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between; }

.fastCart .previewCartCheckout .button {
  width: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 5px;
  margin-bottom: 5px; }

.fastCart .previewCartCheckout > div {
  flex: 0 1 48%;
  width: 48%; }

.fastCart .previewCartCheckout > div p {
  margin-bottom: 0; }

.fastCart .previewCart:after {
  display: none; }

.fastCart .suggestiveCart {
  clear: both; }

/* ==========================================================================
   Section 21. ACCOUNT PAGES
   ========================================================================== */
.navBar--account {
  display: block; }

.wishlistGrid article {
  max-height: calc(100% - 40px); }

.wishlist-item-remove {
  margin: 8px 0 0; }

.wishlist-item-remove input {
  margin: 0;
  padding-left: 15px;
  padding-right: 15px;
  white-space: normal;
  width: 100%; }

.pagination-list.pagination-list--small {
  float: none; }

.pagination-list--small .pagination-item--previous,
.pagination-list--small .pagination-item--next {
  position: relative; }

/* ==========================================================================
   Section 22. SEARCH PAGE
   ========================================================================== */
.category-suggestion {
  width: 100%;
  float: none; }

/* ==========================================================================
   Section 23. ACCOUNT ADDRESS PANEL
   ========================================================================== */
.panel--address .form-actions {
  display: flex;
  flex-flow: row wrap; }

/* ==========================================================================
   Section 24. MEDIA QUERIES
   ========================================================================== */
/* ==========================================================================
   Section 24.1 MEDIA QUERIES - DESKTOP (min-width: 801px)
   ========================================================================== */
@media only screen and (min-width: 801px) {
  body {
    padding-top: calc(45px + 40px + 6px + 53px); }
  .header-logo--wrap {
    background: white;
    padding: 20px 0; }
  .header-logo {
    position: relative; }
  .header-logo:not(.logo-full-size-desktop) .header-logo-image {
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: relative; }
  .logo-full-size-desktop .header-logo-image {
    position: static; }
  .logo-full-size-desktop .header-logo-image-container:after {
    display: none; }
  .mobileMenu-toggle .mobileMenu-toggleIcon,
  .mobileMenu-toggle .mobileMenu-toggleIcon::before,
  .mobileMenu-toggle .mobileMenu-toggleIcon::after {
    background: #424242; }
  .header {
    position: fixed;
    transition: all .3s linear;
    top: 0;
    border-bottom: 0; }
  .header .navPages-container {
    background: white;
    position: relative;
    transition: all .3s linear;
    z-index: -1; }
  .header.slim .navPages-container {
    bottom: 0; }
  .logo-and-toggle {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    overflow: hidden;
    transition: all .3s linear;
    width: calc(100px + 30px); }
  .desktopMenu-toggle {
    width: 0;
    position: relative;
    transition: all .3s linear;
    left: -44px; }
  .header-logo .mobileMenu-toggle {
    display: block;
    padding: 0;
    position: static;
    height: 25px !important;
    width: auto;
    margin-right: 25px; }
  .header-logo .mobileMenu-toggle span {
    top: 50%;
    transform: translateY(-50%); }
  .mobile-closeNav {
    display: none; }
  .navUser {
    padding-left: 40px; }
  .navUser-item-currency {
    position: relative; }
  .navUser-item--mobile-search {
    display: none; }
  .navUser-item-currency a {
    padding: 0 15px; }
  .navUser-item-currency a.is-open {
    background: #f9f9f9; }
  .navUser-item-currency .dropdown-menu {
    left: auto !important;
    right: 0;
    outline: 0;
    width: 200px; }
  .navUser > ul > li:not(:last-child):not(:first-child):not(.navUser-item-currency) {
    padding: 0 15px; }
  .navUser > ul > li:first-child {
    padding: 0 15px 0 0; }
  .navUser > ul > li:last-child {
    padding: 0 0 0 15px; }
  .navUser > ul > li:not(:first-child) {
    border-left: 1px solid #D2D2D2; }
  .header-logo {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    margin: 0 auto;
    max-width: 1230px;
    padding: 0 15px;
    text-align: left;
    width: 100%; }
  .header-logo h1, .header-logo div.logo-wrap {
    display: flex;
    flex: 0 1 auto;
    flex: 0 1 100px;
    margin-right: 30px; }
  .header-logo-image-container {
    height: 45px;
    width: 100px; }
  .header-logo .quickSearchWrap {
    flex: 1 1 auto; }
  .header-logo .navUser-wrap {
    flex: 0 1 auto; }
  .header-logo .form,
  .header-logo .form-field {
    margin: 0; }
  .quickSearchWrap {
    position: relative; }
  .quickSearchResults {
    position: absolute;
    left: 0;
    z-index: 15;
    top: calc(100% - 1px);
    max-height: calc(100vh - 200%);
    overflow-y: auto; }
  .quickSearchResults button {
    width: calc(100% - 24px);
    margin: 12px; }
  .navPages-container {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb; }
  .navPages-mainNav {
    display: flex;
    flex-flow: row wrap; }
  .navPages-mainNav > li {
    flex: 1 1 auto; }
  .navPages-action-moreIcon {
    display: none; }
  .navPages:hover .navPages-action {
    color: #969696; }
  .navPages li:hover .navPages-action {
    color: #4e4e4e; }
  .navPages li:hover {
    background: #f9f9f9; }
  .navPages li.navPages-item:hover > .navPages-action:before, .navPage-subMenu .navPages-action:hover:before {
    content: "";
    display: block;
    height: 2px;
    background: #4e4e4e;
    position: absolute;
    bottom: 12px; }
  .navPages li.navPages-item:hover > .navPages-action:before {
    width: calc(100% - 30px); }
  .navPage-subMenu .navPages-action:hover:before {
    width: 100%;
    bottom: 0; }
  .navPage-subMenu-item > a.navPages-action:hover:before {
    bottom: 7px; }
  .navPage-subMenu .navPages-action {
    display: inline-block;
    width: auto; }
  .navPages-secondLevel {
    display: none; }
  .navPages-item {
    position: relative; }
  .navPages-list .navPage-subMenu-item > .navPage-subMenu-action {
    border: 0;
    font-weight: bold;
    margin-bottom: 0; }
  .navPages-list .navPage-subMenu-item ul a:not(.icon) {
    padding-top: 0;
    padding-bottom: 0; }
  .navPages-mainNav li li .has-subMenu {
    padding-right: 30px; }
  .navPage-subMenu-horizontal .navPages-action-moreIcon {
    display: none; }
  .navPages-action {
    position: relative;
    padding: 15px;
    width: 100%; }
  .navPages-action.is-open.is-root:after {
    border: 8px solid transparent;
    border-bottom-color: #4e4e4e;
    bottom: 0px;
    content: "";
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
  .navPage-subMenu-horizontal.is-open {
    height: auto;
    margin-left: 100%; }
  .navPage-childList-item + .navPage-subMenu-item {
    margin-top: 20px; }
  .navPage-subMenu-item-child .navPage-subMenu-action.is-open, .navPage-subMenu-item-child .navPage-subMenu-action:hover, .navPage-subMenu-item-parent .navPage-subMenu-action.is-open, .navPage-subMenu-item-parent .navPage-subMenu-action:hover {
    background-color: #f9f9f9;
    color: #969696;
    opacity: 1;
    font-weight: bold; }
  .navPage-subMenu-item-child {
    position: relative; }
  .navPage-subMenu-item > a {
    padding-bottom: 10px;
    padding-top: 10px; }
  .navPage-childList-item > a {
    padding: 3px 0; }
  .navPages-item.hover > .navPage-subMenu {
    display: block;
    display: flex;
    flex-flow: row nowrap;
    left: 0;
    top: 100%;
    z-index: 5; }
  .navPage-subMenu-item-child > .navPage-subMenu {
    display: block;
    margin: 0;
    position: static; }
  .navPage-subMenu-item-child .navPage-subMenu .navPages-action {
    font-family: "Roboto";
    font-size: 14px;
    font-weight: 400; }
  .has-subMenu.is-root + .navPage-subMenu-horizontal, .navPage-subMenu-horizontal {
    padding: 0 !important;
    width: 200px; }
  .navPages-mega .navPage-subMenu {
    border-top: 1px solid #fff; }
  .navPages-item.hover .navPage-subMenu {
    display: flex;
    flex-flow: row wrap; }
  .navPages-mega .navPage-subMenu > ul {
    flex: 1 1 0; }
  .navPages-mega .navPage-childList {
    padding-left: 4px; }
  .heroCarousel-content--wrapper {
    height: 100%;
    left: 50%;
    margin: auto;
    max-width: 100%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 1230px; }
  .heroCarousel-content {
    background-color: rgba(0, 0, 0, 0.4);
    margin: 0 0 0 15px;
    text-align: left; }
  .heroCarousel-title, .heroCarousel-description {
    margin: 0; }
  .heroCarousel-title {
    font-size: 48px;
    line-height: normal; }
  .heroCarousel-description {
    font-size: 16px; }
  .heroCarousel .slick-prev {
    left: 0; }
  .heroCarousel .slick-next {
    right: 0; }
  .heroCarousel .slick-prev, .heroCarousel .slick-next {
    margin-top: -20px; }
  .heroCarousel .slick-dots {
    padding: 0 15px; }
  .page-sidebar {
    border: 1px solid #ebebeb;
    padding: 20px 20px 0; }
  .page-sidebar #subcategoryList h5 {
    border-bottom: 1px solid dimgray;
    padding-bottom: 15px;
    margin-bottom: 15px; }
  .page-sidebar .accordion-block + .accordion-block {
    border-top: 1px solid #ebebeb; }
  .sidebarBlock + .sidebarBlock, .page-sidebar .accordion-block + .accordion-block {
    padding-top: 20px;
    margin-top: 20px; }
  .page-sidebar:not(.u-hiddenVisually):not(.u-hidden) + .page-content {
    padding: 0 0 0 15px; }
  .page-sidebar.u-hiddenVisually + .page-content,
  .page-sidebar.u-hidden + .page-content {
    float: none; }
  .page-content-subcategories .subcategory-grid li {
    flex: 0 1 25%; }
  .page-sidebar + .page-content .page-content-subcategories .subcategory-grid li {
    flex: 0 1 33.333%; }
  .page-sidebar + .page-content .productGrid .product, .page-sidebar + .page-content .productGrid .brand {
    flex: 0 1 33.333%;
    max-width: 33.333%; }
  .toggleSidebarBlock.button {
    display: none; }
  .productView {
    display: flex;
    flex-flow: row nowrap;
    overflow: visible; }
  .productView-images {
    flex: 0 1 calc(760px - 2rem);
    max-width: 60%;
    width: calc(760px - 2rem); }
  .productView-image + .productView-thumbnails {
    margin-left: 0;
    margin-right: 0;
    width: calc(760px - 2rem);
    max-width: 100%; }
  .productView-details {
    color: #4e4e4e;
    flex: 0 1 calc(100% - 760px);
    min-width: 40%; }
  .fastCart .previewCart .productView {
    width: 60%; }
  .fastCart .previewCartCheckout {
    width: 40%; }
  .fastCart .productView-details {
    max-width: calc(100% - 150px); }
  .footer-newsletter .button {
    width: auto;
    margin: 0 0 0 10px; }
  .footer-info-col[data-section-type="storeInfo"] {
    flex: 1 1 auto;
    order: 1; }
  .footer-giftCerts {
    text-align: right; }
  .footer-info-col {
    flex: 0 1 16.666%;
    order: 2; }
  .footer-info-heading .icon {
    display: none; } }

/* ==========================================================================
   Section 24.2 MEDIA QUERIES - MOBILE (max-width: 800px)
   ========================================================================== */
@media only screen and (max-width: 800px) {
  body {
    padding-top: calc(45px + 40px + 6px + 45px); }
  .header {
    transition: all .3s linear; }
  .desktopMenu-toggle {
    display: none; }
  .header-logo:not(.logo-full-size-mobile) .header-logo-image {
    max-height: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: relative; }
  .logo-full-size-mobile .logo-and-toggle {
    width: auto !important; }
  .logo-full-size-mobile .header-logo-image {
    position: static;
    max-height: none; }
  .logo-full-size-mobile .header-logo-image-container:after {
    display: none; }
  .navUser {
    z-index: 50;
    padding: 0;
    top: 0;
    transform: none;
    width: auto; }
  .header-logo .socialLinks {
    display: none; }
  .mobileMenu-toggle .mobileMenu-toggleIcon span {
    color: #424242;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 10px;
    position: absolute;
    right: 100%;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }
  .mobileMenu-toggle .mobileMenu-toggleIcon, .mobileMenu-toggle .mobileMenu-toggleIcon::before, .mobileMenu-toggle .mobileMenu-toggleIcon::after, .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::before, .mobileMenu-toggle.is-open .mobileMenu-toggleIcon::after {
    background: #424242; }
  .mobileMenu-toggle .mobileMenu-toggleIcon {
    top: 50%; }
  header .quickSearchWrap {
    z-index: -1; }
  header.is-open {
    height: 100% !important; }
  .header-logo--wrap {
    background: white; }
  .header-logo h1, .header-logo > .logo-wrap {
    flex: 1 1 100%; }
  .header-logo {
    padding: 20px 0;
    z-index: 10;
    text-align: center;
    margin-left: 55px;
    margin-right: 55px;
    justify-content: center;
    height: auto; }
  .header-logo-text {
    font-size: 16px; }
  .header-logo h1, .header-logo > .logo-wrap {
    display: flex;
    flex: 0 1 auto;
    flex: 0 1 74px;
    justify-content: center; }
  .header-logo-image-container {
    height: 45px;
    width: 74px;
    max-width: 100%; }
  .header-logo h1 a, .header-logo > a {
    width: auto;
    display: inline; }
  .header-logo-image {
    display: block;
    max-height: 50px;
    position: relative;
    margin: auto; }
  .header-logo-image-container:after {
    padding: 0; }
  .navUser .navUser-section, .navUser-item {
    float: none;
    margin: 0 15px;
    text-align: center; }
  .navUser-section {
    display: flex;
    flex-flow: row nowrap;
    align-items: center; }
  .navUser .navUser-item--mobile-search {
    display: block;
    padding-right: 15px;
    position: relative;
    transition: all .3s linear;
    cursor: pointer; }
  .navUser-item--cart {
    display: flex;
    flex-flow: row wrap;
    align-items: center; }
  .navUser-item--cart .navUser-action {
    font-size: 14px;
    padding: 0;
    width: 100%; }
  .navUser-item-cartLabel {
    display: none; }
  .navUser .countPill {
    background: #424242;
    color: white; }
  .quickSearchWrap {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%; }
  .quickSearchWrap form, .quickSearchWrap .form-field {
    margin: 0; }
  .quickSearchWrap .form-field {
    position: relative; }
  .quickSearchWrap .form-field .form-input {
    background: #f9f9f9;
    border-width: 1px 0 1px 0;
    border-color: #ebebeb;
    padding-left: 30px;
    padding-right: 30px;
    text-align: center; }
  .quickSearchWrap .form-button {
    padding-right: 0; }
  .quickSearchResults {
    margin: 0;
    position: absolute;
    top: 100%;
    z-index: 50;
    max-height: calc(100vh - calc(45px + 40px + 6px + 45px) - 20px);
    margin-top: -1px; }
  body.has-activeNavPages .header-logo {
    opacity: 0; }
  .navPages .socialLinks {
    padding-left: 15px;
    padding-right: 15px; }
  .navPages .socialLinks svg {
    fill: #4e4e4e; }
  .navPages .socialLinks a:hover svg {
    fill: #969696; }
  .navPages-list--user {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between; }
  .navPages-list--user .navPages-item, .navPages-list--user .navPages-action {
    display: inline-block;
    font-size: 14px; }
  .navPages-mainNav > li {
    border-bottom: 1px solid #d2d2d2; }
  .navPages-list + .navPages-mainNav {
    border-top: 3px solid #d2d2d2; }
  .navPages-list--user > li + li {
    border-top: 1px solid #d2d2d2; }
  .navPages-item {
    float: none;
    font-size: 0; }
  .navPages-item > a {
    font-size: 15px; }
  .navPages-container.is-open {
    background: rgba(0, 0, 0, 0.5);
    padding-top: 0;
    z-index: 50; }
  li.link-expanded > div {
    display: block; }
  .navPage-subMenu > ul {
    margin-left: 0px; }
  .navPage-subMenu-item {
    display: flex;
    align-items: center;
    padding: 0; }
  .navPage-subMenu-item > a {
    display: inline-block;
    vertical-align: middle;
    flex: 1 1 auto;
    padding-left: 5px; }
  .navPages-item--content-first {
    border-top: 3px solid #d2d2d2; }
  .navPage-subMenu-item.is-open .navPages-action-closed {
    display: none; }
  .navPage-subMenu-item:not(.is-open) .navPages-action-open {
    display: none; }
  .navPage-subMenu-item a ~ .navPages-action-moreIcon {
    flex: 0 0 42px;
    padding: 5px 15px;
    width: 42px;
    height: 22px;
    cursor: pointer; }
  .navPage-childList-item {
    margin-left: 25px; }
  .navPage-childList-item:not(.is-open) {
    display: none; }
  .mobile-closeNav {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 0;
    cursor: pointer; }
  .mobile-closeNav .icon {
    width: 35px;
    height: 35px; }
  .mobile-closeNav .icon svg {
    fill: #fff; }
  .navPages {
    width: calc(100% - 75px);
    margin-left: 0; }
  .navPages-item {
    color: #4e4e4e; }
  .navPage-subMenu-item + .navPages-action-more {
    margin-left: -5px; }
  .navPage-subMenu-item ul, .navPage-subMenu-item div {
    display: none; }
  .navPages-secondLevel {
    width: 7px;
    height: 10px; }
  .link-expanded > ul, .link-expanded > div {
    background: rgba(255, 255, 255, 0.2); }
  .navPages-action:not(.navPage-childList-action) {
    position: relative; }
  .navPages-action.has-subMenu.is-open {
    border: 0;
    text-align: left; }
  .navPages-list .navPages-action.has-subMenu .navPages-action-moreIcon, .navPages-list .navPages-action.has-subMenu.is-open .navPages-action-moreIcon {
    border: 0;
    border-radius: 0;
    height: 100%;
    margin: 0;
    padding: 0 15px;
    width: 42px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0; }
  .navPages-item.link-expanded > a > .navPages-action-moreIcon, .navPages-list--user .navPages-action.is-open .navPages-action-moreIcon {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .navPages-action.has-subMenu.is-open svg {
    width: 100%;
    height: 100%; }
  .navPages .navPage-subMenu-list, .navPage-childList {
    border: 0;
    margin: 0; }
  .navPage-subMenu-item-child .navPage-subMenu-item-child > a {
    font-weight: 400;
    text-transform: none;
    padding-left: 35px; }
  .navPage-subMenu-item-child .navPage-subMenu-item-child > a .navPages-secondLevel {
    display: none; }
  .heroCarousel-content {
    position: static;
    transform: none;
    background: white;
    padding: 27px 20px 40px; }
  .heroCarousel-title {
    margin: 0;
    color: #4e4e4e; }
  .heroCarousel-title + .heroCarousel-description {
    margin-top: 10px; }
  .slick-dots {
    display: none !important; }
  .heroCarousel-description {
    color: #969696; }
  .heroCarousel-action, .heroCarousel-action:hover, .heroCarousel-action:focus {
    color: #454545;
    border-color: #454545; }
  .heroCarousel + .banners {
    padding-top: 0; }
  .heroCarousel + .banners .featured-categories {
    padding-top: 0; }
  .featured-categories {
    margin: 0 -15px; }
  .featured-categories > div {
    flex: 0 1 auto;
    margin: 0 auto 10px; }
  .blog:not(.full-post) {
    flex: 0 1 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0; }
  .blog-posts {
    margin: 0; }
  .footer {
    padding-top: 0; }
  .footer-info-col {
    border-bottom: 1px solid #4a4a4a;
    margin: 0;
    flex: 1 1 100%; }
  .footer-info-col.footer-newsletter-col {
    flex: 1 1 100%; }
  .footer-giftCerts {
    text-align: center;
    margin: 15px 0; }
  .footer-mobile-limited {
    max-width: calc(100% - 50px);
    margin: auto;
    text-align: center;
    padding-top: 45px;
    padding-bottom: 45px; }
  .footer-info-col.footer-info-dropdown:not(.is-open) ul {
    display: none; }
  .footer-info-col.footer-info-dropdown h5 {
    cursor: pointer;
    margin: 0;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 15px; }
  .footer-info-list {
    padding-bottom: 15px; }
  .footer-info-list li {
    padding: 12px 0; }
  .socialLinks {
    justify-content: center;
    position: relative;
    top: 11px; }
  footer .socialLinks .socialLinks-item, footer .socialLinks .socialLinks-item:last-child {
    margin: 0 7px 14px 7px; }
  .footer-copyright {
    padding-top: 0;
    text-align: center; }
  .footer-payment-icons, .powered-by {
    flex: 1 1 100%; }
  .footer-payment-icons {
    border-bottom: 1px solid #4a4a4a;
    padding-top: 30px;
    padding-bottom: 30px; }
  .footer-copyright .powered-by {
    margin-top: 15px; }
  .productGrid .product {
    flex: 0 1 33.333%;
    max-width: 33.333%; }
  .page-sidebar {
    padding: 0; }
  .sidebar-nav-mobile {
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    position: relative;
    justify-content: space-between; }
  .grid-bg .sidebar-nav-mobile {
    background: #f9f9f9; }
  .sidebar-nav-mobile > a {
    display: flex;
    align-items: center;
    flex: 0 1 calc(50% - 6px);
    margin: 0;
    padding: 9px 15px;
    height: 45px; }
  .sidebar-nav-mobile > a:first-child:last-child {
    flex-grow: 1; }
  .sidebar-nav-mobile > a:not(.is-open), .sidebar-nav-mobile > a:not(.is-open):hover, .sidebar-nav-mobile > a:not(.is-open):focus {
    background: #f9f9f9;
    border-color: #ebebeb;
    color: #4e4e4e; }
  .sidebar-nav-mobile > a.is-open {
    width: 100%;
    z-index: 5;
    color: white; }
    .sidebar-nav-mobile > a.is-open:not(:only-child) {
      position: absolute; }
  .sidebar-nav-mobile > a:nth-child(3) {
    margin-top: 12px;
    flex: 1 1 100%; }
  .sidebarBlock + .sidebarBlock {
    border: 0;
    margin: 0;
    padding: 0; }
  .sidebarBlock > .facetedSearch-toggle {
    display: none; }
  .accordion .sidebarBlock-heading {
    border-bottom: 1px solid #ebebeb;
    padding: 14px; }
  #subcategoryList:not(.is-open) {
    display: none; }
  #subcategoryList .accordion .navList, #facetedSearch-byPrice .navList {
    padding: 0 14px 14px; }
  .facetedSearch-toggle-indicator {
    text-align: left;
    width: 100%; }
  .facetedSearch-toggle-indicator > .toggleLink-text {
    font-size: 14px;
    width: 100%; }
  .toggleLink-text span {
    vertical-align: middle;
    font-weight: bold; }
  .sidebarBlock .accordion {
    margin: 0; }
  .sidebar-nav-mobile .toggleLink-text.toggleLink-text--on i {
    border-radius: 100px;
    border: 2px solid white;
    padding: 1px;
    width: 25px;
    height: 25px; }
  .sidebar-nav-mobile .toggleLink-text i {
    max-width: none;
    max-height: none;
    width: 19px;
    height: 16px;
    margin-right: 5px; }
  .page-sidebar .toggleLink.button svg {
    fill: white; }
  .page-sidebar .toggleLink.button:hover svg, .page-sidebar .toggleLink.button:active svg {
    fill: white; }
  .facetedSearch-toggle-indicator .toggleLink-text--on svg {
    transform: rotate(180deg); }
  #product-listing-container .sort-and-pagination .actionBar-section {
    float: none; }
  .sort-and-pagination .actionBar-section select {
    width: 100%;
    max-width: calc(100% - 65px); }
  .sort-and-pagination > * {
    flex: 1 1 auto; }
  li.pagination-item.pagination-item--next {
    margin-right: 10px; }
  li.pagination-item.pagination-item--previous {
    margin-left: 10px; }
  .page-content {
    clear: both; } }

/* ==========================================================================
   Section 24.3 MEDIA QUERIES - TABLET (min-width: 531px and max-width: 800px)
   ========================================================================== */
@media only screen and (min-width: 531px) and (max-width: 800px) {
  .blog-posts-wrap .blog:not(.full-post) {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 10px 0; }
  .blog-posts-wrap .blog:not(.full-post) > div {
    flex: 0 1 calc(50% - 10px);
    margin: 0; }
  .blog-posts-wrap .blog:not(.full-post) figure {
    margin: 0; } }

/* ==========================================================================
   Section 24.4 MEDIA QUERIES - TABLET CATEGORY (min-width: 481px and max-width: 800px)
   ========================================================================== */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  .page-content-subcategories .subcategory-grid li {
    flex: 0 1 33.333%; } }

/* ==========================================================================
   Section 24.5 MEDIA QUERIES - SMALL MOBILE (max-width: 480px)
   ========================================================================== */
@media only screen and (max-width: 480px) {
  #cart-preview-dropdown {
    right: 15px !important;
    left: auto !important;
    max-width: calc(100vw - 45px) !important;
    min-width: 0 !important; }
  .productGrid .product {
    flex: 0 1 50%;
    max-width: 50%; }
  .page-content-subcategories .subcategory-grid li {
    flex: 0 1 50%; }
  .promo-box-row li {
    flex: 0 1 100%;
    margin-bottom: 15px; }
  .footer-payment-icons {
    text-align: center; } }

/* ==========================================================================
   2026. NEW CUSTOM SECTIONS
   ========================================================================== */
/* ==========================================================================
   Section 25. 2026 GRID SYSTEM & HYBRID CATALOG
   ========================================================================== */
/* --- 25.1 CORE CONTAINERS --- */
.grid-container, .span-left-4, .split-50, .split-33, .split-23rd-13rd, .split-13rd-23rd, .split-25-25-25-25, .split-5-col, .split-6-col, .split-8-col {
  display: grid !important;
  width: 100% !important;
  gap: 0 !important;
  box-sizing: border-box !important; }

/* --- 25.2 SPECIFIC LAYOUT DEFINITIONS --- */
.span-left-4 {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: repeat(4, auto) !important; }

.split-50 {
  grid-template-columns: 1fr 1fr !important; }

.split-33 {
  grid-template-columns: repeat(3, 1fr) !important; }

.split-23rd-13rd {
  grid-template-columns: 2fr 1fr !important; }

.split-13rd-23rd {
  grid-template-columns: 1fr 2fr !important; }

.split-25-25-25-25 {
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: start !important; }

.split-5-col {
  grid-template-columns: repeat(5, 1fr) !important; }

.split-6-col {
  grid-template-columns: repeat(6, 1fr) !important; }

.split-8-col {
  grid-template-columns: repeat(8, 1fr) !important; }

/* ---25.3 Header Banner Logic */
.grid-container.header-banner {
  max-height: 375px !important;
  overflow: hidden !important; }

.header-banner.v-split-50 {
  grid-template-rows: 187.5px 187.5px !important; }

.header-banner.v-split-33-66 {
  grid-template-rows: 125px 250px !important; }

/* ---25.4 UNIVERSAL CELL STYLING --- */
.cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 100% !important;
  position: relative !important; }

/* ---25.5 Image Handling - consolidated (removed duplicate .split-25-25-25-25 .cell img block from original) */
.split-25-25-25-25 .cell img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important; }

.split-33 .cell img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important; }

.header-banner .cell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; }

/* --- 25.6 SPANNING RULES --- */
.cell-main-span {
  grid-row: 1 / span 4 !important;
  grid-column: 1 !important; }

.cell-3-span {
  grid-row: 1 / span 2 !important;
  grid-column: 2 !important; }

.header-banner.v-split-50 .cell-3-span, .header-banner.v-split-33-66 .cell-3-span {
  grid-row: 1 / span 2 !important; }

/* --- 25.7 CONTENT STYLING --- */
.cell h3 {
  margin: 0 0 8px 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  display: block !important;
  width: 100% !important;
  color: inherit !important; }

.cell h3.text-center {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important; }

.cell ul {
  margin: 0 !important;
  padding-left: 20px !important;
  color: inherit !important; }

.cell li {
  margin-bottom: 5px !important;
  color: inherit !important; }

/* --- 25.8 H3 Banner Modifier (Refined) --- */
.cell h3.h3-banner {
  background: #38383e !important;
  color: #ffffff !important;
  padding: 6px 40px 6px 20px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  width: fit-content !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%) !important; }

.cell:hover h3.h3-banner {
  background: #8cc640 !important;
  transition: background 0.3s ease !important; }

/* --- 25.9 RESPONSIVE (MOBILE) --- */
@media (max-width: 768px) {
  .grid-container, .split-50, .split-33, .split-25-25-25-25, .split-23rd-13rd, .split-13rd-23rd {
    display: flex !important;
    flex-direction: column !important; }
  .split-5-col, .split-6-col {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid !important;
    gap: 6px !important; }
  .split-6-col {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid !important;
    gap: 6px !important; }
  .split-8-col {
    grid-template-columns: repeat(3, 1fr) !important;
    display: grid !important;
    gap: 6px !important; }
  .grid-container.header-banner {
    max-height: none !important; }
  .header-banner .cell-3-span {
    order: 1 !important; }
  .header-banner .cell-1 {
    order: 2 !important; }
  .header-banner .cell-2 {
    order: 3 !important; }
  .cell {
    padding: 15px 0 !important; } }

/* --- 25.10 HOVER EFFECTS --- */
.hover-color-shift {
  transition: background-color 0.3s ease, color 0.3s ease !important;
  cursor: pointer !important; }

.hover-color-shift:hover {
  background-color: #8cc640 !important; }

.hover-color-shift:hover h3, .hover-color-shift:hover p, .hover-color-shift:hover li {
  color: #ffffff !important; }

/* --- 25.11 RESPONSIVE BUTTONS --- */
.responsive-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  color: #000000 !important;
  background-color: #8cc640 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: clamp(0.8rem, 2vw, 1.2rem) !important;
  text-transform: uppercase !important;
  transition: 0.3s !important; }

.responsive-btn:hover {
  background-color: #333333 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important; }

/* --- 25.12 LIGHTBOX SYSTEM --- */
.lightbox-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.92) !important;
  display: flex !important;
  visibility: hidden !important;
  opacity: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
  transition: opacity 0.3s ease, visibility 0.3s !important; }

.lightbox-overlay:target {
  visibility: visible !important;
  opacity: 1 !important; }

.close-hitbox {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: zoom-out !important;
  z-index: 10 !important;
  text-decoration: none !important; }

.close-hitbox::before {
  content: '\2715' !important;
  position: absolute !important;
  top: 25px !important;
  right: 35px !important;
  color: #ffffff !important;
  font-size: 45px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
  transition: 0.2s ease !important; }

.lightbox-overlay img {
  position: relative !important;
  z-index: 5 !important;
  max-width: 85% !important;
  max-height: 85% !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;
  pointer-events: none !important;
  user-select: none !important; }

@media (max-width: 768px) {
  .lightbox-overlay img {
    max-width: 95% !important;
    max-height: 80% !important; }
  .close-hitbox::before {
    top: 15px !important;
    right: 20px !important;
    font-size: 35px !important; } }

/* --- 25.13 ZOOM ICON & POP EFFECTS --- */
.pop-image {
  cursor: zoom-in !important;
  overflow: hidden !important;
  position: relative !important; }

.pop-image img {
  transition: 0.3s !important; }

.pop-image:hover img {
  opacity: 0.7 !important;
  transform: translateY(-3px) !important; }

.pop-image::after {
  content: '\271A' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: rgba(140, 198, 64, 0.9) !important;
  color: white !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  opacity: 0 !important;
  transition: 0.3s !important;
  pointer-events: none !important; }

.pop-image:hover::after {
  opacity: 1 !important; }

/* --- 25.14 HYBRID CATALOG --- */
.catalog-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin: 20px 0 !important; }

.catalog-card {
  border: 1px solid #e5e5e5 !important;
  padding: 15px !important;
  width: 300px !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: transform 0.2s !important;
  background-color: #ffffff !important; }

.catalog-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; }

.btn-catalog {
  display: inline-block !important;
  padding: 10px 20px !important;
  margin: 5px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: bold !important; }

.btn-flip {
  background: #000 !important;
  color: #fff !important; }

.btn-pdf {
  background: #f4f4f4 !important;
  color: #333 !important;
  border: 1px solid #ccc !important; }

#flipbook-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.9) !important;
  z-index: 9999 !important; }

/* --- 25.15 Spinner Animation for Loading Widget */
@keyframes spin {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

/* --- 25.16 FABRIC GRID MODIFIER --- */
.grid-container.fabric-grid {
  gap: 15px !important;
  margin-bottom: 40px !important;
  align-items: start !important; }

.fabric-grid .cell {
  justify-content: flex-start !important;
  height: auto !important; }

.fabric-grid .cell .pop-image {
  width: 100% !important;
  aspect-ratio: 800 / 478 !important;
  overflow: hidden !important;
  margin-bottom: 10px !important; }

.fabric-grid .cell .pop-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important; }

/* --- 25.17 FONT GRID MODIFIER --- */
.grid-container.font-grid {
  gap: 15px !important;
  row-gap: 35px !important;
  align-items: start !important;
  margin-bottom: 40px !important; }

.font-grid .cell {
  height: auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important; }

.font-grid .cell .pop-image {
  width: 100% !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  margin-bottom: 0 !important; }

.font-grid .cell .pop-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important; }

/* --- 25.18 DESIGN GRID MODIFIER --- */
.grid-container.design-grid {
  gap: 15px !important;
  row-gap: 30px !important;
  align-items: start !important;
  margin-bottom: 50px !important; }

.design-grid .cell {
  height: auto !important;
  justify-content: flex-start !important;
  padding: 0 !important; }

.design-grid .cell .pop-image {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  margin-bottom: 10px !important; }

.design-grid .cell .pop-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  padding: 5px !important; }

/*/ ==========================================================================
//   Section 25.18.1 — DESIGN-GRID TEMPLATE-CARDS MODIFIER
//   Adds link-wrapper + label treatment for InkSoft template thumbnails
//   pulled from elevationprinting.com. Inherits .design-grid (1/1 aspect,
//   contain object-fit, 5px image padding) and .split-25-25-25-25 (4-col
//   desktop, flex-column on mobile via Section 25.9).
// ========================================================================== */
.design-grid.template-cards .cell {
  background: #ffffff !important;
  border: 1px solid #e5e5e8 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; }

.design-grid.template-cards .cell:hover {
  border-color: #8cc640 !important;
  box-shadow: 0 8px 18px rgba(56, 56, 62, 0.1) !important;
  transform: translateY(-3px) !important; }

.design-grid.template-cards .cell a.template-link {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important; }

.design-grid.template-cards .cell .pop-image {
  margin-bottom: 0 !important;
  background: #ffffff !important; }

.design-grid.template-cards .cell .template-label {
  display: block !important;
  width: 100% !important;
  padding: 10px 12px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #38383e !important;
  text-align: center !important;
  border-top: 1px solid #e5e5e8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important; }

/* --- 25.19 SWATCH GRID MODIFIER (SQUARE ROUNDED) --- */
.grid-container.swatch-grid {
  gap: 12px !important; }

.swatch-grid .cell {
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  padding: 10px 5px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important; }

.swatch-grid .swatch-title {
  font-weight: 800 !important;
  font-size: clamp(10px, 1.2vw, 14px) !important;
  text-transform: uppercase;
  line-height: 1.1;
  display: block; }

.swatch-grid .swatch-code {
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  display: block;
  margin-top: 2px; }

/* --- 25.20 SUB-CATEGORY GRID MODIFIER --- */
.grid-container.sub-category-grid {
  gap: 20px !important;
  row-gap: 40px !important;
  align-items: start !important;
  margin-bottom: 60px !important; }

.sub-category-grid .cell {
  height: auto !important;
  justify-content: flex-start !important;
  padding: 0 !important; }

.sub-category-grid .cell img {
  border-radius: 4px !important;
  margin-bottom: 12px !important; }

/* --- 25.20.1 SUB-CATEGORY GRID — BORDERED IMAGE VARIANT (Featured Products) --- */
.sub-category-grid.bordered-img .cell img {
  border: 1px solid #ebebeb !important; }

/* --- 25.21 GLOBAL BANNER HEADING (Free-standing) --- */
h2.banner-heading, h3.banner-heading {
  background: #38383e !important;
  color: #ffffff !important;
  padding: 6px 40px 6px 20px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  width: fit-content !important;
  margin: 20px 0 !important;
  line-height: 1.2 !important;
  display: block !important;
  clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%) !important; }

h2.banner-heading.red, h3.banner-heading.red {
  background: #c60000 !important; }

h2.banner-heading-span {
  background: #8cc640 !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  font-family: 'Figtree', sans-serif !important;
  text-transform: uppercase !important;
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  margin: 15px 0 !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important; }

h3.banner-heading {
  font-size: 18px !important; }

/* --- 25.22 PRODUCT PAGE GRID REFINEMENT (40px Center Gap) --- */
.split-50:not(.header-banner) .cell:first-child {
  padding-right: 20px !important; }

.split-50:not(.header-banner) .cell:last-child {
  padding-left: 20px !important; }

.grid-container.split-50:not(.header-banner) {
  max-width: 1260px !important;
  margin: 0 auto !important; }

@media (max-width: 768px) {
  .split-50:not(.header-banner) .cell:first-child, .split-50:not(.header-banner) .cell:last-child {
    padding-left: 0 !important;
    padding-right: 0 !important; } }

/* --- 25.23 PRODUCT SPECS MODIFIER (The "Level-Line" Fix) --- */
.product-specs-container .grid-container.split-50 {
  gap: 40px !important;
  max-width: 1260px !important;
  margin: 40px auto !important;
  align-items: flex-start !important; }

.product-specs-container h3:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important; }

.product-specs-container .info-main {
  padding-top: 30px !important; }

.product-specs-container .sidebar-bg {
  background-color: #f9f9f9 !important;
  padding: 30px !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important; }

/* --- 25.24 TESTIMONIAL GALLERY STYLING --- */
#testimonial-gallery .cell img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important; }

@media (max-width: 800px) {
  #testimonial-gallery {
    display: none !important; } }

/* --- 25.25 H3 BANNER FULL-WIDTH MODIFIER (stacks below image in card tiles)
   Used for category showcase grids, featured tile grids, and anywhere the
   dark banner label needs to be full-width rectangular instead of the default
   fit-content angled clip-path from 25.8.
*/
.cell h3.h3-banner.full-width {
  width: 100% !important;
  clip-path: none !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  text-align: center !important;
  border-radius: 0 !important; }

/* Grid gap modifier — reusable on any .grid-container variant */
.grid-container.gap-md {
  gap: 8px !important; }

.grid-container.gap-lg {
  gap: 16px !important; }

/* --- 25.26 SPLIT-5-COL MODIFIER (5 equal columns)
   Companion to .split-6-col. Used by category showcase row 3.
   Mobile collapse handled in Section 25.9 alongside .split-6-col (3-up).
*/
/* (template-columns rule lives in Section 25.2 alongside other split definitions) */
/* --- 25.27 CATEGORY SHOWCASE GRID
   Used by 3-row category block on home page (Row 1: 3-up 16:9 real images,
   Row 2: 4-up 1:1, Row 3: 5-up 1:1).
   Architecture: image on top, light-grey textbox below holding the H2 label
   and caption paragraph. The textbox uses .box3 grey (#eaeaea) and butts
   directly against the bottom of the image; small visual margin BELOW the
   textbox is provided by the row's margin-bottom (45px desktop / 33px mobile).
   No overlays. Class names retain the `cat-row-overlay` / `cat-img-*` legacy
   prefix so HTML doesn't need re-keying — the visual treatment is now
   "label-below-on-grey" rather than "label-overlaid".

   .cat-row-overlay  -> row container modifier (grid wrapper).
   .cat-img-wrap     -> image/placeholder wrapper, fixed aspect ratio.
   .cat-img-16x9     -> 16:9 aspect ratio (Row 1).
   .cat-img-1x1      -> 1:1 aspect ratio (Rows 2 and 3).
   .cat-label        -> H2 category label, centered, top of grey textbox.
                        Sized DOWN from page-level H2 default so this grid
                        doesn't dominate the page typographically.
   .cat-caption      -> short paragraph centered beneath label, ~2 lines,
                        flex-grow:1 fills remaining cell height so cells
                        in a row are visually equal-height (the grid already
                        equalizes the .cell box; flex-grow keeps the grey
                        textbox filling that equalized area).

   Vertical alignment: each .cell is a flex column with stretched children
   so labels and captions across a row sit at matching y-positions even
   when text wraps to different line counts. Cell background is grey from
   bottom-of-image down to bottom-of-cell — image opaque covers the top
   portion, so visually the grey appears as a textbox attached to the
   image's bottom edge.

   Inter-row spacing: 45px desktop / 33px mobile margin-bottom on each row
   container so the three rows breathe and the small visual margin below
   each grey textbox is preserved.
*/
/* Cell as a flex column. Grey background shows from bottom-of-image down to bottom-of-cell since .cat-img-wrap is opaque and stacks at top. */
.cat-row-overlay .cell {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  background-color: #eaeaea !important;
  border-radius: 0 0 4px 4px !important;
  overflow: hidden !important; }

/* Image wrapper — locked aspect ratio means every cell in a row has identical image height, which is the foundation for everything below it lining up across the row. */
.cat-row-overlay .cat-img-wrap {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important; }

.cat-row-overlay .cat-img-wrap img, .cat-row-overlay .cat-img-wrap .cs-ph {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important; }

.cat-row-overlay .cat-img-16x9 {
  aspect-ratio: 16 / 9 !important; }

.cat-row-overlay .cat-img-1x1 {
  aspect-ratio: 1 / 1 !important; }

/* H2 category label — first element inside the grey textbox. Scoped override so this grid's H2s render smaller than page-level H2s. Centered, uppercase, tight line-height. */
.cat-row-overlay .cat-label {
  margin: 0 !important;
  padding: 16px 12px 8px 12px !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #38383e !important;
  text-align: center !important; }

/* Caption paragraph — second element inside the grey textbox. flex-grow:1 lets the caption fill any remaining vertical room in the cell so the grey area extends to a consistent bottom across the row regardless of caption length. padding-bottom gives breathing room inside the grey box. */
.cat-row-overlay .cat-caption {
  flex-grow: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 12px 18px 12px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #38383e !important;
  text-align: center !important;
  box-sizing: border-box !important; }

/* Inter-row spacing — separate the three grid rows so they breathe.
   Bumped to 45px (desktop) / 33px (mobile) to give each grey textbox
   a small visual margin between it and the next row's image. */
.cat-row-overlay {
  margin-bottom: 45px !important; }

.cat-row-overlay:last-of-type {
  margin-bottom: 0 !important; }

/* Hover treatments — image zoom + slight label color shift to brand green on hover. Caption color stays put so the cell doesn't visually flicker. Cell background stays grey (overrides .hover-color-shift default green fill). */
.cat-row-overlay .cell.hover-color-shift:hover {
  background-color: #eaeaea !important; }

.cat-row-overlay .cell.hover-color-shift:hover .cat-label {
  color: #8cc640 !important; }

.cat-row-overlay .cell.hover-color-shift:hover .cat-caption {
  color: #38383e !important; }

.cat-row-overlay .cell.hover-color-shift:hover .cat-img-wrap img,
.cat-row-overlay .cell.hover-color-shift:hover .cat-img-wrap .cs-ph {
  transform: scale(1.03) !important;
  transition: transform 0.4s ease !important; }

.cat-row-overlay .cat-img-wrap img, .cat-row-overlay .cat-img-wrap .cs-ph {
  transition: transform 0.4s ease !important; }

/* Mobile — Row 2 (.split-25-25-25-25) collapses to 2-up; Row 1 (.split-33) stacks single-column. Label/caption sizes step down for narrower screens. Inter-row spacing tightens to 33px so mobile doesn't get too airy. */
@media (max-width: 768px) {
  .cat-row-overlay.split-25-25-25-25 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important; }
  .cat-row-overlay.split-33 {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important; }
  .cat-row-overlay .cat-label {
    font-size: 16px !important;
    padding: 12px 10px 6px 10px !important; }
  .cat-row-overlay .cat-caption {
    font-size: 13px !important;
    padding: 0 10px 14px 10px !important; }
  .cat-row-overlay {
    margin-bottom: 33px !important; } }

/* ==========================================================================
   Section 26. FONT PLAYGROUND
   ========================================================================== */
@font-face {
  font-family: 'Full-Block';
  src: url("/dav/content/fonts/full-block.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Spartan';
  src: url("/dav/content/fonts/spartan.ttf");
  font-display: swap; }

@font-face {
  font-family: 'College-Slab';
  src: url("/dav/content/fonts/college-slab.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Super-Smash';
  src: url("/dav/content/fonts/super-smash.ttf");
  font-display: swap; }

@font-face {
  font-family: 'MLB-Block';
  src: url("/dav/content/fonts/mlb-block.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Smooth-Peak';
  src: url("/dav/content/fonts/smooth-peak.ttf");
  font-display: swap; }

@font-face {
  font-family: 'BU-Tiger-Paw';
  src: url("/dav/content/fonts/bu-tiger-paw.ttf");
  font-display: swap; }

@font-face {
  font-family: 'College-Bold-2-0';
  src: url("/dav/content/fonts/college-bold-2-0.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Cuse-2014';
  src: url("/dav/content/fonts/cuse-2014.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Facet-Bold';
  src: url("/dav/content/fonts/facet-bold.ttf");
  font-display: swap; }

@font-face {
  font-family: 'NCAA-OSU';
  src: url("/dav/content/fonts/ncaa-osu.ttf");
  font-display: swap; }

@font-face {
  font-family: 'NFL-Tampa-Bay-Buc';
  src: url("/dav/content/fonts/nfl-tampa-bay-buc.ttf");
  font-display: swap; }

@font-face {
  font-family: 'UA-Cadet';
  src: url("/dav/content/fonts/ua-cadet.ttf");
  font-display: swap; }

@font-face {
  font-family: 'UA-Terra-Font';
  src: url("/dav/content/fonts/ua-terra-font.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Adidas-2014';
  src: url("/dav/content/fonts/adidas-2014.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Brewer-94';
  src: url("/dav/content/fonts/brewer-94.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Brewer';
  src: url("/dav/content/fonts/brewer.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Buzz-City';
  src: url("/dav/content/fonts/buzz-city.ttf");
  font-display: swap; }

@font-face {
  font-family: 'Commando';
  src: url("/dav/content/fonts/commando.ttf");
  font-display: swap; }

@font-face {
  font-family: 'UA-University';
  src: url("/dav/content/fonts/ua-university.ttf");
  font-display: swap; }

.preview-text {
  word-break: break-word;
  line-height: 1.2; }

/* ==========================================================================
   Section 27. VERTICAL PARITY OVERRIDES
   ========================================================================== */
.v-align-top .cell {
  justify-content: flex-start !important; }

.v-align-top .cell > h3:first-child, .v-align-top .cell > div > h3:first-child {
  margin-top: 0 !important; }

/* ==========================================================================
   Section 28. CAKE LAYER SYSTEM — Full-Bleed Break-Out + Color Palette
   ==========================================================================
   Architecture:
     - Every homepage section is a full-bleed cake layer (.box1-.box8).
     - Backgrounds run edge-to-edge; content stays inside the 1230px
       reading column via direct-child re-centering (28.2) or the
       opt-in .cake-contents wrapper (28.3).
     - Each layer owns its own internal padding. Layers stack flush —
       no margin between adjacent boxes.
     - .box1-.box3 = light backgrounds (charcoal text via .light-bg-txt)
       .box4-.box8 = dark/accent backgrounds (white text via .dark-bg-txt)
     - Vertical padding: 20px top/bottom mobile, 50px top/bottom desktop.
   ========================================================================== */
/* --- 28.0 GRID-BG WRAPPER OVERRIDE -------------------------------------
   Roots core puts `padding-top: 40px` on the .main wrapper to push page
   content below the header. With cake layers, every section owns its
   internal padding, so the wrapper padding just creates a dead gap above
   the first layer. Zero it so layers stack flush from the header down.
*/
.grid-bg {
  padding-top: 0 !important; }

/* --- 28.1 BASE BOX PALETTE (mobile-first) ------------------------------
   Mobile defaults: 20px top/bottom padding, flush stacking (no margin
   between adjacent boxes), no border-radius (full-bleed full-width).
*/
.box {
  margin: 0 auto !important;
  border-radius: 0 !important; }

.box1 {
  background-color: #ffffff !important;
  padding: 20px 0 !important; }

.box2 {
  background-color: #fafafa !important;
  padding: 20px 0 !important; }

.box3 {
  background-color: #eaeaea !important;
  padding: 20px 0 !important; }

.box4 {
  background-color: #58585e !important;
  padding: 20px 0 !important; }

.box5 {
  background-color: #38383e !important;
  padding: 20px 0 !important; }

.box6 {
  background-color: #8cc640 !important;
  padding: 20px 0 !important; }

.box7 {
  background-color: #c60000 !important;
  padding: 20px 0 !important; }

.box8 {
  background-color: #ff6600 !important;
  padding: 20px 0 !important; }

/* Slim banner variant — tighter vertical rhythm for ribbon-style layers */
.box1.border-bottom-green {
  padding: 10px 0 !important; }

/* Shared utility backgrounds + reading column */
.cakelt {
  width: 100%;
  background-color: #f9f9f9; }

.cakedk {
  width: 100%;
  background-color: #333333; }

.grid-container {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto; }

.border-bottom-green {
  border-bottom: 5px solid #8cc640 !important; }

/* Text color modes — paired with box classes via .{light|med|dark}-bg-txt */
.dark-bg, .dark-bg-txt p, .dark-bg-txt h1, .dark-bg-txt h2, .dark-bg-txt h3, .dark-bg-txt h4, .dark-bg-txt h5, .dark-bg-txt h6 {
  color: #ffffff !important; }

.med-bg, .med-bg-txt p, .med-bg-txt h1, .med-bg-txt h2, .med-bg-txt h3, .med-bg-txt h4, .med-bg-txt h5, .med-bg-txt h6 {
  color: #ffffff !important; }

.light-bg, .light-bg-txt p, .light-bg-txt h1, .light-bg-txt h2, .light-bg-txt h3, .light-bg-txt h4, .light-bg-txt h5, .light-bg-txt h6 {
  color: #38383e !important; }

.boxhead {
  text-align: center;
  font: 18pt Barlow, Arial, Helvetica, sans-serif;
  font-weight: 700; }

/* --- 28.2 FULL-BLEED BREAK-OUT (DESKTOP ≥801px) ------------------------
   `margin-left: calc(50% - 50vw) + width: 100vw` breaks each box out of
   BigCommerce's centered max-width container so the background color
   runs edge-to-edge. Inner content is re-centered into the 1230px
   reading column via the direct-child re-center rule below.
*/
@media only screen and (min-width: 801px) {
  .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    margin-left: calc(50% - 50vw) !important;
    width: 100vw !important;
    padding: 50px 0 !important; }
  .box1.border-bottom-green {
    padding: 10px 0 !important; }
  /* Re-center direct text children back into the 1230px reading column */
  .box1 > p, .box1 > h1, .box1 > h2, .box1 > h3, .box1 > h4, .box1 > h5, .box1 > h6,
  .box2 > p, .box2 > h1, .box2 > h2, .box2 > h3, .box2 > h4, .box2 > h5, .box2 > h6,
  .box3 > p, .box3 > h1, .box3 > h2, .box3 > h3, .box3 > h4, .box3 > h5, .box3 > h6,
  .box4 > p, .box4 > h1, .box4 > h2, .box4 > h3, .box4 > h4, .box4 > h5, .box4 > h6,
  .box5 > p, .box5 > h1, .box5 > h2, .box5 > h3, .box5 > h4, .box5 > h5, .box5 > h6,
  .box6 > p, .box6 > h1, .box6 > h2, .box6 > h3, .box6 > h4, .box6 > h5, .box6 > h6,
  .box7 > p, .box7 > h1, .box7 > h2, .box7 > h3, .box7 > h4, .box7 > h5, .box7 > h6,
  .box8 > p, .box8 > h1, .box8 > h2, .box8 > h3, .box8 > h4, .box8 > h5, .box8 > h6 {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1230px !important;
    box-sizing: border-box !important;
    padding-left: 30px !important;
    padding-right: 10px !important; } }

/* --- 28.2.1 FIRST-CHILD MARGIN GUARD (all breakpoints) ----------------
   The 28.2 reset above only targets DIRECT children of a box. When
   content is wrapped in .grid-container, .cake-contents, .productCarousel,
   or any Page Builder shell, the inner heading keeps its UA default
   top margin (~0.83em on h2 = ~15-25px). Padding doesn't collapse with
   child margin, so that escapes the box's padding-top and inflates the
   top edge — making the layer feel ~15px taller at the top than at
   the bottom.
   Fix: zero the top margin of the very first element inside every box,
   plus the first element inside its most common wrappers. Catches the
   four nesting patterns that actually occur in BC output without going
   universal-selector deep.
*/
.box1 > *:first-child, .box2 > *:first-child, .box3 > *:first-child, .box4 > *:first-child,
.box5 > *:first-child, .box6 > *:first-child, .box7 > *:first-child, .box8 > *:first-child {
  margin-top: 0 !important; }

.box1 .grid-container > *:first-child, .box2 .grid-container > *:first-child, .box3 .grid-container > *:first-child, .box4 .grid-container > *:first-child,
.box5 .grid-container > *:first-child, .box6 .grid-container > *:first-child, .box7 .grid-container > *:first-child, .box8 .grid-container > *:first-child {
  margin-top: 0 !important; }

.box1 .cake-contents > *:first-child, .box2 .cake-contents > *:first-child, .box3 .cake-contents > *:first-child, .box4 .cake-contents > *:first-child,
.box5 .cake-contents > *:first-child, .box6 .cake-contents > *:first-child, .box7 .cake-contents > *:first-child, .box8 .cake-contents > *:first-child {
  margin-top: 0 !important; }

/* --- 28.3 CAKE CONTENTS WRAPPER (reading-column constraint) ----------
   Opt-in wrapper for content whose markup isn't a direct <p>/<h1-h6>
   child of the cake layer — Stencil partials (.productCarousel), the
   blog posts wrapper, Page Builder region output. Wrap that content
   in <div class="cake-contents"> to pull it back into the 1230px
   reading column while the cake layer background stays full-bleed.
*/
@media only screen and (min-width: 801px) {
  .box1 .cake-contents, .box2 .cake-contents, .box3 .cake-contents, .box4 .cake-contents,
  .box5 .cake-contents, .box6 .cake-contents, .box7 .cake-contents, .box8 .cake-contents {
    max-width: 1230px !important;
    margin: 0 auto !important;
    padding-left: 30px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important; } }

/* ============================================================
   Section 28.4 — SHOP BY SPORT
   All sport tiles use the h3-banner full-width treatment from the
   9-up showcase pattern (Section 25). Two rows of 6, collapsing to
   3-up on mobile via .split-6-col.
   Hover overrides .hover-color-shift default green (#8cc640) to a
   neutral mid grey (#6d6d6d) so the section reads as calm/neutral
   rather than activated.
   ============================================================ */
/* Tile sizing — square crop to match 9-up pattern */
.shop-by-sport-tier1 .cell {
  padding: 10px !important; }

.shop-by-sport-tier1 .cell img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  margin-bottom: 10px !important;
  border-radius: 4px !important; }

/* Hover — mid grey on cell, banner matches with white text */
.shop-by-sport-tier1 .cell.hover-color-shift:hover {
  background-color: #6d6d6d !important; }

.shop-by-sport-tier1 .cell.hover-color-shift:hover h3.h3-banner {
  background: #6d6d6d !important;
  color: #ffffff !important; }

/* ============================================================
   Section 28.5 — BRAND BAR
   Square brand tiles on dark (#58585e) background.
   Uses .split-6-col from Section 25 (auto 3-up on mobile).
   Logos display as square crops; brand name below for SEO signal
   in case of broken/unloaded images.
   ============================================================ */
.brand-bar {
  gap: 12px !important;
  margin-top: 20px !important; }

.brand-bar .cell {
  padding: 16px 10px !important;
  text-align: center !important;
  align-items: center !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  transition: background-color 0.3s ease !important; }

.brand-bar .cell img {
  width: 100% !important;
  max-width: 140px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 10px auto !important; }

.brand-bar .brand-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: #38383e !important;
  line-height: 1.2 !important; }

/* Hover state — override .hover-color-shift default green so it feels
   consistent with the rest of the cake-layer hover vocabulary. */
.brand-bar .cell:hover {
  background-color: #8cc640 !important; }

.brand-bar .cell:hover .brand-label {
  color: #ffffff !important; }

/* Mobile */
@media (max-width: 768px) {
  .brand-bar .cell {
    padding: 12px 8px !important; }
  .brand-bar .cell img {
    max-width: 100px !important; }
  .brand-bar .brand-label {
    font-size: 12px !important; } }

/* ============================================================
   PATCH C — Section 28.5.1 BRAND GRID (rounded tile + caption below)
   Drop in just after Section 28.5 (legacy .brand-bar). 27-tile homepage
   "Shop by Brand" pattern with transparent charcoal PNG inside a white
   rounded square and the brand name rendered BELOW the tile for
   SEO/AEO crawl signal.
   ============================================================ */
.brand-grid {
  gap: 16px !important;
  margin-top: 20px !important;
  align-items: start !important; }

/* Tile = anchor wrapping a logo block + caption. flex-column so the
   caption sits beneath the white rounded square. */
.brand-grid .brand-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
  gap: 10px !important; }

/* The square — white background, 16px rounded corners, soft drop shadow.
   aspect-ratio locks every tile to a uniform 1:1 regardless of logo dims. */
.brand-grid .brand-tile__logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 18% !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important; }

/* Transparent charcoal PNG centered, contained inside the padded square */
.brand-grid .brand-tile__logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important; }

/* Caption — brand name below the tile, charcoal, Figtree, semantic-weight
   but not heading-level. Acts as the visible SEO/AEO label. */
.brand-grid .brand-tile__caption {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #38383e !important;
  line-height: 1.25 !important;
  transition: color 0.25s ease !important; }

/* Hover — gentle lift + deepen the shadow; caption flips to brand green
   to match the rest of the cake-layer hover vocabulary. */
.brand-grid .brand-tile:hover .brand-tile__logo {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.06) !important; }

.brand-grid .brand-tile:hover .brand-tile__caption {
  color: #8cc640 !important; }

/* Keyboard focus parity for accessibility */
.brand-grid .brand-tile:focus-visible .brand-tile__logo {
  outline: 2px solid #8cc640 !important;
  outline-offset: 3px !important; }

/* View All variant — orange fill tile, charcoal caption */
.brand-grid .brand-tile--view-all .brand-tile__logo {
  background-color: #ff6600 !important; }

.brand-grid .brand-tile--view-all .brand-tile__caption {
  color: #38383e !important; }

.brand-grid .brand-tile--view-all:hover .brand-tile__caption {
  color: #ff6600 !important; }

/* Mobile — tighter gap, smaller caption, slightly less internal padding
   so logos read at the 3-up width without floating in too much whitespace. */
@media (max-width: 768px) {
  .brand-grid {
    gap: 10px !important; }
  .brand-grid .brand-tile {
    gap: 8px !important; }
  .brand-grid .brand-tile__logo {
    border-radius: 12px !important;
    padding: 16% !important; }
  .brand-grid .brand-tile__caption {
    font-size: 12px !important; } }

/* ============================================================
   Section 28.6 — AUDIENCE / WHO WE SERVE
   6 pure-text buyer-type cards in 3x2 grid on desktop,
   1-col on mobile (via .split-33 responsive from Section 25).
   Left-aligned text, green top accent bar on hover.
   ============================================================ */
.audience-grid {
  gap: 20px !important;
  margin-top: 20px !important;
  align-items: stretch !important; }

.audience-card {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-top: 4px solid #8cc640 !important;
  border-radius: 4px !important;
  padding: 24px 22px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important; }

.audience-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px) !important; }

.audience-card h3 {
  margin: 0 0 12px 0 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #38383e !important;
  text-transform: none !important;
  line-height: 1.25 !important; }

.audience-card p {
  margin: 0 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #58585e !important; }

/* Mobile */
@media (max-width: 768px) {
  .audience-grid {
    gap: 15px !important; }
  .audience-card {
    padding: 20px 18px !important; }
  .audience-card h3 {
    font-size: 17px !important; } }

/* ============================================================
   28.7 TESTIMONIALS (home) — CONTINUOUS SCROLLER
   Replaces previous static 3-up editorial card treatment.

   This section assumes the HTML wraps H2, P, and .t-home-scroller
   inside a .grid-container (standard 1230px reading column pattern
   used everywhere else on the page). The scroller inherits the
   reading column width naturally — no separate max-width rule needed.
   ============================================================
   SCROLL SPEED: edit --t-scroll-duration on .t-home-track below.
   Higher value = slower scroll. 60s is a comfortable reading pace
   for 6 cards; bump to 90s for slower, drop to 40s for faster.
   ============================================================ */
/* Scroller viewport — clips overflow, establishes hover target.
   display:flex puts the two .t-home-track siblings in a ROW
   (not stacked), which is required for the duplicate-track
   infinite loop pattern to render side-by-side. */
.t-home-scroller {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 20px;
  padding: 10px 0;
  display: flex; }

/* Edge fade masks — hide cards entering/leaving the viewport */
.t-home-scroller::before,
.t-home-scroller::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none; }

.t-home-scroller::before {
  left: 0;
  background: linear-gradient(to right, #f5f5f5, rgba(245, 245, 245, 0)); }

.t-home-scroller::after {
  right: 0;
  background: linear-gradient(to left, #f5f5f5, rgba(245, 245, 245, 0)); }

/* Track — horizontally-scrolling flex row. TWO tracks render side-by-side
   (original + duplicate in HTML) for seamless looping: when track 1
   scrolls fully off-screen left, track 2 is perfectly in its place.
   flex-shrink:0 prevents the flex parent from squishing each track
   to fit the viewport — each track must keep its natural card-sum width. */
.t-home-track {
  --t-scroll-duration: 60s;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 20px;
  padding: 0 10px;
  animation: t-home-scroll var(--t-scroll-duration) linear infinite;
  will-change: transform; }

/* Pause on hover anywhere in the scroller viewport */
.t-home-scroller:hover .t-home-track {
  animation-play-state: paused; }

@keyframes t-home-scroll {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-100%); } }

/* Card width — 380px fits ~3 cards in reading column with gaps */
.t-home-track .cell {
  flex: 0 0 380px;
  max-width: 380px; }

/* Testimonial card — white card on light-gray box3 background */
.t-home-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box; }

/* Logo area — consistent height at top of each card */
.t-home-logo {
  height: 70px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start; }

.t-home-logo img {
  max-height: 70px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain; }

/* Quote body — Figtree 15px, flex-grow pushes author block to bottom */
.t-home-quote {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #38383e;
  flex-grow: 1;
  margin-bottom: 20px; }

/* Author block — three-tier color hierarchy */
.t-home-author {
  border-top: 2px solid #8cc640;
  padding-top: 16px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px; }

.t-home-name {
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #38383e;
  text-transform: none; }

.t-home-role {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #8cc640;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.t-home-org {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  color: #808080; }

/* Location line — sits below org name, slightly lighter treatment than org
   so the four-line author block reads as: NAME → role → org → city/state */
.t-home-location {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #a0a0a0;
  font-style: italic; }

/* Mobile — 1 card visible, still auto-scrolling */
@media (max-width: 768px) {
  .t-home-track .cell {
    flex: 0 0 85vw;
    max-width: 85vw; }
  .t-home-card {
    padding: 24px; }
  .t-home-scroller::before,
  .t-home-scroller::after {
    width: 40px; } }

/* ============================================================
   28.8 CAKE-LAYER VIDEO BANNER
   Generic full-bleed responsive video for use inside any cake
   layer (.box1-.box8). Locks 16:9 aspect ratio so the banner
   reserves space before the video loads (no CLS / layout jump).
   width:100% means the video stretches to the cake layer's
   reading column (.grid-container = 1230px max).
   ============================================================ */
.cake-video {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  background: #000 !important; }

/* ============================================================
   28.9 INTRO COPY (Home cake layer) — EDITORIAL TREATMENT
   Visual polish for the home intro <section>. Pairs with
   .box3 .light-bg-txt cake layer; styling is scoped to the
   .intro-magazine wrapper class so other .box3 sections are
   unaffected.
   HTML usage:
     <section class="box3 light-bg-txt intro-magazine">
   Treatment: H2 centered with green underline rule, H3s with
   green vertical bar accents, single-column flow.
   Width strategy: container inherits the standard 1230px
   .grid-container reading column; child elements fill that
   width (no inner max-width caps) so text breathes naturally.
   ============================================================ */
.intro-magazine .grid-container {
  padding: 50px 30px !important;
  box-sizing: border-box !important; }

/* Font family/size/weight intentionally OMITTED so the H2 inherits the
   theme default H2 typography — matching every other cake-layer section
   heading on the page (Built for the Sports / Explore Brands / etc.).
   What's kept: centered alignment, proper case (overrides global uppercase),
   color, line-height, margin/padding for the green ::after underline bar,
   letter-spacing, and positioning. */
.intro-magazine h2 {
  color: #38383e !important;
  line-height: 1.2 !important;
  text-align: center !important;
  margin: 0 0 30px 0 !important;
  padding-bottom: 22px !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  position: relative !important; }

.intro-magazine h2::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: #8cc640 !important; }

.intro-magazine h2 + p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: #4a4a52 !important;
  text-align: left !important;
  margin: 0 0 40px 0 !important; }

.intro-magazine h3 {
  font-family: 'Figtree', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #38383e !important;
  margin: 32px 0 10px 0 !important;
  line-height: 1.3 !important;
  position: relative !important;
  padding-left: 18px !important;
  text-transform: none !important;
  text-align: left !important; }

.intro-magazine h3::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 4px !important;
  background: #8cc640 !important;
  border-radius: 2px !important; }

.intro-magazine h3 + p {
  font-family: 'Figtree', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4a4a52 !important;
  margin: 0 !important;
  padding-left: 18px !important; }

@media only screen and (max-width: 800px) {
  .intro-magazine .grid-container {
    padding: 36px 20px !important; }
  .intro-magazine h2 {
    font-size: 24px !important;
    padding-bottom: 18px !important;
    margin-bottom: 22px !important; }
  .intro-magazine h2 + p {
    font-size: 15px !important;
    margin-bottom: 28px !important; }
  .intro-magazine h3 {
    font-size: 17px !important;
    margin-top: 24px !important; }
  .intro-magazine h3 + p {
    font-size: 14px !important; } }

/* ==========================================================================
   Section 29. LIVE BANNERS
   ========================================================================== */
.tackle-twill {
  padding: 40px 0 !important;
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important; }

.tackle-twill .info-content {
  padding: 0 40px !important; }

.tackle-twill .brand-name {
  font-weight: 200 !important;
  text-transform: lowercase !important;
  font-size: 24px !important;
  margin: 0 !important; }

.tackle-twill .product-title {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 48px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  color: inherit !important; }

.tackle-twill .price {
  color: #8cc640 !important;
  font-weight: 800 !important;
  font-size: 32px !important; }

.tackle-twill .price-details {
  font-weight: 200 !important;
  font-size: 24px !important;
  text-transform: lowercase !important; }

.tackle-twill .inclusion-details {
  margin-top: 20px !important;
  font-size: 16px !important; }

.tackle-twill .inclusion-details strong {
  font-weight: 800 !important;
  display: block !important; }

@media (max-width: 768px) {
  .tackle-twill .product-title {
    font-size: 32px !important; }
  .tackle-twill .price {
    font-size: 24px !important; }
  .tackle-twill .info-content {
    padding: 20px 0 !important;
    text-align: left !important; } }

/* ==========================================================================
   Section 30. GLOBAL BODY OFFSET - Header Top Extender
   ========================================================================== */
/* Pushes page content below the fixed header + 2026 brand ecosystem tab bar.
   Previously lived in theme.scss as `padding-top: 165px !important`.
   Stock Roots uses `$init_header_height` variable, but the ecosystem tabs
   (Section 25) add ~52px of additional fixed height not accounted for.
   Hard value used to match measured header height.
   Re-tune if Section 25 tab heights change.
*/
@media only screen and (min-width: 801px) {
  body {
    padding-top: 165px !important; } }

/* ==========================================================================
   Section 31. THEME BANNERS & GLOBAL NAV UTILITIES
   ========================================================================== */
/* --- 31.1 Core Scrolling & Anchor Logic */
:target {
  scroll-margin-top: 130px; }

html {
  scroll-behavior: smooth; }

/* --- 31.2 ALIGNMENT FIX FOR ALL CAKE LAYERS - Resets side padding so internal grid controls alignment. */
section.box1, section.box2, section.box3, section.box4, section.box5, section.box6, section.box7, section.box8,
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

/* --- 31.3 Centering Anchor */
.theme-banner-anchor {
  width: 100% !important;
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 60px 0 !important;
  display: block !important; }

/* --- 31.4 STANDARD ALTERNATING BANNER (The "Cake Layer" Grid) --- */
.theme-banner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  align-items: stretch !important;
  padding: 50px 0 !important; }

.theme-banner .theme-content-cell {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 0 50px !important;
  height: 100% !important; }

/* --- 31.5 Typography & Elements
   2026-05 update: UPPERCASE all .banner-title variants across cake layers
   (standard, theme-ads, banner-overlay, hero-layout). Tagline rule added
   as 31.5b — sits one notch below H1/H2/H3 and supports highlight-green span. */
.theme-banner h1.banner-title, .theme-banner h2.banner-title, .theme-banner h3.banner-title {
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 0 20px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  text-wrap: balance !important; }

.theme-banner p {
  margin-bottom: 15px !important;
  line-height: 1.5 !important;
  color: inherit !important; }

.theme-banner ul {
  margin: 0 0 25px 20px !important;
  padding: 0 !important; }

.theme-banner li {
  margin-bottom: 8px !important;
  line-height: 1.4 !important; }

/* --- 31.5b HERO TAGLINE
   Sits one notch below the .banner-title H1/H2/H3 in visual weight.
   Used as the emotional/positioning line directly under the SEO-anchored heading.
   Supports inline <span class="highlight-green"> for the green accent treatment.
   2026-05 fix: specificity bumped with .theme-content-cell to beat
   31.16's `.theme-banner .theme-content-cell p { font-size: 18px !important }`. */
.theme-banner .theme-content-cell p.hero-tagline,
.banner-overlay-wrapper .theme-content-cell p.hero-tagline,
.hero-layout .theme-content-cell p.hero-tagline,
.theme-ads .theme-content-cell p.hero-tagline,
.theme-banner p.hero-tagline,
.banner-overlay-wrapper p.hero-tagline,
.hero-layout p.hero-tagline,
.theme-ads p.hero-tagline {
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  margin: -8px 0 20px 0 !important;
  text-wrap: balance !important; }

.theme-banner .theme-content-cell p.hero-tagline span.highlight-green,
.banner-overlay-wrapper .theme-content-cell p.hero-tagline span.highlight-green,
.hero-layout .theme-content-cell p.hero-tagline span.highlight-green,
.theme-ads .theme-content-cell p.hero-tagline span.highlight-green,
.theme-banner p.hero-tagline span.highlight-green,
.banner-overlay-wrapper p.hero-tagline span.highlight-green,
.hero-layout p.hero-tagline span.highlight-green,
.theme-ads p.hero-tagline span.highlight-green {
  color: #8cc640 !important; }

.dark-bg-txt .theme-banner .theme-content-cell p.hero-tagline,
.dark-bg-txt .banner-overlay-wrapper .theme-content-cell p.hero-tagline,
.dark-bg-txt .hero-layout .theme-content-cell p.hero-tagline,
.dark-bg-txt .theme-ads .theme-content-cell p.hero-tagline,
.dark-bg-txt .theme-banner p.hero-tagline,
.dark-bg-txt .banner-overlay-wrapper p.hero-tagline,
.dark-bg-txt .hero-layout p.hero-tagline,
.dark-bg-txt .theme-ads p.hero-tagline {
  color: #ffffff !important; }

/* --- 31.5c BANNER TITLE — single-line modifier (REVISED 2026-05)
   Use .banner-title.nowrap on hero H1/H2/H3 short enough to fit one line at desktop.
   Specificity fix: must match `.theme-banner h1.banner-title` (0,2,1) selectors
   from 31.5 / 31.11 / 31.12 to beat their `text-wrap: balance !important`.
   Also adds a slight font-size reduction since uppercase Figtree 800 at the 40px
   cap is wider than the 515px usable content-cell width in a split-50 grid. */
.theme-banner h1.banner-title.nowrap,
.theme-banner h2.banner-title.nowrap,
.theme-banner h3.banner-title.nowrap,
.banner-overlay-wrapper h1.banner-title.nowrap,
.banner-overlay-wrapper h2.banner-title.nowrap,
.banner-overlay-wrapper h3.banner-title.nowrap,
.hero-layout h1.banner-title.nowrap,
.hero-layout h2.banner-title.nowrap,
.hero-layout h3.banner-title.nowrap {
  text-wrap: nowrap !important;
  white-space: nowrap !important;
  font-size: clamp(24px, 2.7vw, 36px) !important; }

/* Restore natural wrapping below 768px so long titles don't overflow mobile viewports */
@media (max-width: 768px) {
  .theme-banner h1.banner-title.nowrap,
  .theme-banner h2.banner-title.nowrap,
  .theme-banner h3.banner-title.nowrap,
  .banner-overlay-wrapper h1.banner-title.nowrap,
  .banner-overlay-wrapper h2.banner-title.nowrap,
  .banner-overlay-wrapper h3.banner-title.nowrap,
  .hero-layout h1.banner-title.nowrap,
  .hero-layout h2.banner-title.nowrap,
  .hero-layout h3.banner-title.nowrap {
    text-wrap: balance !important;
    white-space: normal !important;
    font-size: clamp(28px, 3.2vw, 40px) !important; } }

/* --- 31.6 Dark Background Text Overrides */
.dark-bg-txt .theme-banner h1.banner-title, .dark-bg-txt .theme-banner h2.banner-title, .dark-bg-txt .theme-banner h3.banner-title {
  color: #ffffff !important; }

.dark-bg-txt .theme-banner p {
  color: #ffffff !important; }

.dark-bg-txt .theme-banner li {
  color: #ffffff !important; }

/* --- 31.7 Small Category Tag (Green/Red) */
p.small-green-text {
  color: #8cc640 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 5px 0 !important;
  text-transform: lowercase !important; }

p.small-red-text {
  color: #c60000 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  margin: 0 0 5px 0 !important;
  text-transform: lowercase !important; }

/* --- 31.8 Buttons */
.theme-btn {
  display: inline-block !important;
  margin: 10px 0 0 0 !important;
  padding: 14px 40px !important;
  min-width: 0 !important;
  width: auto !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  text-align: center !important; }

.btn-orange {
  background-color: #ff6600 !important; }

.btn-green {
  background-color: #8cc640 !important; }

.btn-red {
  background-color: #c60000 !important; }

.btn-dark-grey {
  background-color: #38383e !important; }

.btn-purple {
  background-color: #660099 !important; }

.btn-blue {
  background-color: #0062ff !important; }

/* --- 31.9 THEME ADS MODIFIER (3-Up Grid) ---
   2026-05 update: banner-title flipped to uppercase. */
.theme-ads .cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-start !important;
  padding: 0 15px 30px 15px !important; }

.theme-ads h1.banner-title, .theme-ads h2.banner-title, .theme-ads h3.banner-title {
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  font-size: clamp(26px, 2.5vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin: 15px 0 15px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  width: 100% !important; }

.theme-ads .theme-btn {
  display: inline-block !important;
  margin: 0 auto !important;
  min-width: 260px !important;
  width: auto !important;
  padding: 12px 20px !important; }

.theme-ads .info-main {
  width: 100% !important;
  margin-bottom: 0 !important; }

/* --- 31.10 CTA BANNER MODIFIER --- */
.cta-banner .grid-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  max-width: 1230px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 30px 20px !important;
  width: 100% !important; }

.cta-banner .cell {
  flex: 0 0 auto !important;
  height: auto !important;
  width: auto !important;
  justify-content: center !important;
  align-items: center !important; }

.cta-banner .boxhead {
  font-size: clamp(18px, 2.2vw, 26px) !important; }

@media (max-width: 768px) {
  .cta-banner .grid-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 20px !important; } }

/* --- 31.11 BACKGROUND OVERLAY MODIFIER ---
   2026-05 update: banner-title flipped to uppercase. */
.banner-overlay-wrapper {
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  display: block !important;
  min-height: 450px !important; }

.theme-content-cell.white-space-align {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 0 0 60px 20px !important;
  text-align: left !important; }

.banner-overlay-wrapper h1.banner-title, .banner-overlay-wrapper h2.banner-title, .banner-overlay-wrapper h3.banner-title {
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  font-size: clamp(28px, 3.5vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 0 0 20px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important; }

@media (max-width: 768px) {
  .banner-overlay-wrapper {
    background-position: 25% center !important; }
  .theme-content-cell.white-space-align {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important;
    background: rgba(255, 255, 255, 0.85) !important; } }

/* --- 31.12 HERO 3-CELL OVERLAY ---
   2026-05 update: banner-title flipped to uppercase. */
.hero-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  gap: 0 !important; }

.hero-sidebar {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  background: #ffffff !important; }

.hero-layout h1.banner-title, .hero-layout h2.banner-title, .hero-layout h3.banner-title {
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin: 0 0 20px 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important; }

.banner-title span.highlight-green {
  color: #8cc640 !important; }

.sub-cell.text-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 0 40px 40px !important; }

.hero-layout .theme-btn {
  min-width: 320px !important;
  text-align: center !important; }

@media (max-width: 768px) {
  .hero-layout {
    display: flex !important;
    flex-direction: column !important; }
  .sub-cell.text-content {
    align-items: center !important;
    text-align: center !important;
    padding: 40px 20px !important; }
  .hero-layout .theme-btn {
    margin: 0 auto !important;
    min-width: 100% !important; } }

/* --- 31.13 BUTTON SIZE MODIFIERS --- */
.theme-btn.btn-lg {
  font-size: 20px !important;
  letter-spacing: 0.5px !important;
  padding: 16px 40px !important; }

.theme-btn.btn-heavy {
  font-weight: 900 !important; }

/* --- 31.14 BUTTON ROW ADJUSTMENTS --- */
.theme-btn-row {
  display: inline-flex !important;
  flex-flow: row wrap !important;
  gap: 15px !important;
  margin-top: 20px !important;
  width: fit-content !important;
  justify-content: flex-start !important;
  border: 1px solid transparent; }

.theme-btn-row.btn-center {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important; }

.theme-btn-row.btn-right {
  margin-left: auto !important;
  justify-content: flex-end !important; }

.theme-btn-row .theme-btn {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important; }

.theme-btn-row .theme-btn.btn-lg {
  padding: 18px 50px !important;
  min-width: 280px !important;
  justify-content: center !important; }

.split-25-25-25-25 .theme-btn-row {
  width: 100% !important;
  justify-content: center !important; }

.split-25-25-25-25 .theme-btn-row .theme-btn {
  width: 100% !important;
  max-width: 260px !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important; }

.theme-banner .theme-content-cell p.btn-sub-link {
  flex: 0 0 100% !important;
  font-size: 16px !important;
  margin-top: 12px !important;
  text-align: left !important;
  color: #38383e !important;
  font-family: 'Figtree', sans-serif !important;
  line-height: 1.2 !important; }

.dark-bg-txt .theme-banner .theme-content-cell p.btn-sub-link, .dark-bg-txt .theme-banner .theme-content-cell p.btn-sub-link a {
  color: #ffffff !important; }

.btn-sub-link a {
  text-decoration: underline !important;
  color: inherit !important;
  font-weight: 600 !important;
  transition: opacity 0.3s ease; }

.btn-sub-link a:hover {
  opacity: 0.7; }

@media (max-width: 768px) {
  .theme-btn-row {
    width: 100% !important; }
  .theme-banner .theme-content-cell p.btn-sub-link {
    margin-top: 15px !important;
    text-align: center !important; } }

/* --- 31.14a BUTTON ROW — EQUAL-WIDTH FILL MODIFIER
   Use .theme-btn-row.btn-fill when you need 2+ buttons to share the row
   width equally instead of each sizing to its own text. Buttons stretch
   to fill the row regardless of label length, and the row itself spans
   the full content-cell width so spacing stays consistent.
   Mobile (≤768px) inherits the existing 31.15 stack behavior unchanged. */
.theme-btn-row.btn-fill {
  width: 100% !important; }

.theme-btn-row.btn-fill .theme-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important; }

/* --- 31.15 Mobile Stacking & Responsive Logic */
@media (max-width: 768px) {
  .theme-banner-anchor {
    padding: 40px 15px !important; }
  .theme-banner {
    display: flex !important;
    flex-direction: column !important;
    padding: 30px 0 !important; }
  .theme-banner .theme-content-cell {
    padding: 30px 20px !important;
    order: 2 !important;
    align-items: center !important;
    text-align: center !important; }
  .theme-banner .info-main {
    order: 1 !important;
    width: 100% !important; }
  .theme-banner h1.banner-title, .theme-banner h2.banner-title, .theme-banner h3.banner-title {
    text-align: center !important;
    margin-bottom: 15px !important; }
  .theme-btn-row {
    flex-direction: column !important; }
  .theme-btn-row.btn-center, .theme-btn-row.btn-right {
    justify-content: center !important; }
  .theme-btn-row .theme-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important; } }

/* --- 31.16 TYPOGRAPHY TWEAKS --- */
.theme-banner .theme-content-cell p {
  font-size: 18px !important;
  line-height: 1.6 !important; }

.theme-banner .theme-content-cell li {
  font-size: 17px !important;
  line-height: 1.5 !important; }

/* --- 31.17 TEAMSTORE CODE ENTRY (nav utility)
   Font bump (2026-Q2): two-line "STORE / LOGIN" label 11->13px,
   input + GO button 13->15px with heights bumped 34->38px to match
   the new text. Input width widened 110->125px so "Enter Code"
   placeholder doesn't clip at the larger font size.
*/
.teamstore-form {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: 'Figtree', sans-serif; }

.teamstore-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  font-weight: 800;
  color: #38383e;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding-right: 8px;
  text-transform: uppercase; }

.teamstore-label-top, .teamstore-label-bottom {
  display: block; }

.teamstore-input-field {
  height: 38px;
  width: 125px;
  padding: 0 10px;
  font-size: 15px;
  font-family: 'Figtree', sans-serif;
  border: 1px solid #d0d0d0;
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: #f6f9f1;
  color: #38383e;
  box-sizing: border-box;
  outline: none; }

.teamstore-input-field:focus {
  border-color: #8cc640;
  background: #ffffff; }

.teamstore-submit {
  height: 38px;
  padding: 0 14px;
  background-color: #8cc640;
  color: #ffffff;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #8cc640;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background 0.2s; }

.teamstore-submit:hover {
  background-color: #7ab535;
  border-color: #7ab535; }

.nav-quote-btn {
  margin: 0 !important;
  padding: 9px 20px !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important; }

@media (max-width: 800px) {
  .navUser-item--teamstore, .navUser-item--quote {
    display: none; } }

/* --- 31.18 TRUST BAR (Stats Strip)
   Dark full-bleed cake layer with 4 large stat numbers + small green labels.
   HTML uses .box5 + .dark-bg-txt + .grid-container.split-25-25-25-25 +
   .trust-bar wrapper + .trust-stat / .trust-label inside each cell.
*/
.trust-bar .grid-container {
  padding: 40px 20px 20px 20px !important;
  gap: 15px !important; }

.trust-bar .cell {
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important; }

.trust-stat {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important; }

.trust-label {
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #8cc640 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin: 6px 0 0 !important; }

/* --- 31.19 TRUST STRIP (Home — Icon Facts)
   Replaces the 4-up numeric trust bar on home only. Other pages still use
   31.18 (.trust-bar / .trust-stat / .trust-label) — DO NOT TOUCH 31.18.
   Architecture: Reuses .box1 light cake layer (28.1) + .light-bg-txt utility (28.2).
   All selectors prefixed .trust-strip — zero collision risk.

   Desktop >=801px: static single-row x 5-col grid, all 5 facts visible.
   Tablet 481-800px: 2-col x rows stack.
   Mobile <=480px: single-row CSS marquee (60s loop), pauses on prefers-reduced-motion.

   HTML uses .trust-strip wrapper + .box1 .light-bg-txt + .trust-strip__list (ul)
   + .trust-strip__item (li) + .trust-strip__icon (svg) + .trust-strip__text
   + .trust-strip__accent. Marquee duplicates use .trust-strip__item--dupe.

   Icon+text pair is centered as a group via fixed-width text column so icons
   align vertically across the grid regardless of label length.

   FONT SIZES (2026-Q2): primary label 15px desktop / 13.5px tablet / 13px mobile;
   accent 13px desktop / 12.5px tablet / 13px mobile. Text column fixed at 160px
   desktop / 145px tablet so two-line labels don't crowd the icon.

   AUTHORIZED DEALER CELL (cell #1 only): uses .trust-strip__accent--icons
   modifier to render Nike + green plus + Under Armour brand chips instead
   of text. The cell's icon and text are anchored to flex-start via :has()
   so the brand-icon row hangs below the label without lifting the cell's
   visual top above the other 4 text-only cells. See 31.19.1 below.

   HISTORY: Section was deleted during a 2026-Q2 refactor and rebuilt from
   scratch. If you're refactoring this file, KEEP THIS BLOCK INTACT — home.html
   wires the trust strip section to all of these classes (~10 selectors, ~40 rules).
   Removing 31.19 strips ALL styling from the entire 5-cell trust strip,
   not just the brand-icon cell.
*/
.trust-strip .box1 {
  padding: 30px 0 !important; }

.trust-strip__list {
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  max-width: 1230px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 0 !important;
  box-sizing: border-box !important; }

.trust-strip__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
  text-align: left !important;
  min-height: 48px !important; }

.trust-strip__item:nth-child(5n) {
  border-right: none !important; }

.trust-strip__icon {
  flex: 0 0 auto !important;
  width: 22px !important;
  height: 22px !important;
  stroke: #8cc640 !important;
  fill: none !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important; }

.trust-strip__text {
  font-family: 'Figtree', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #38383e !important;
  letter-spacing: 0.04em !important;
  line-height: 1.25 !important;
  display: block !important;
  width: 160px !important;
  flex: 0 0 160px !important; }

.trust-strip__accent {
  display: block !important;
  color: #6d6d6d !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  margin-top: 2px !important; }

/* Authorized Dealer cell — anchor icon + text to top so the brand-icon row
   hangs below the label without pulling the cell's visual centerline up.
   :has() lets us target only the cell with .trust-strip__accent--icons
   without needing a modifier class on the <li>. Browser support: Chrome 105+,
   Safari 15.4+, Firefox 121+ — fine for current BC themes. */
.trust-strip__item:has(.trust-strip__accent--icons) .trust-strip__icon {
  align-self: flex-start !important;
  margin-top: 2px !important; }

.trust-strip__item:has(.trust-strip__accent--icons) .trust-strip__text {
  align-self: flex-start !important; }

/* --- 31.19.1 ACCENT MODIFIER FOR BRAND-ICON ROW
   Authorized Dealer cell renders the accent as a horizontal flex row of two
   grey SVG brand chips (Nike + Under Armour) separated by a green "+".
   Icon row is left-aligned within its 160px text column so it visually
   aligns with the left edge of the "Authorized Dealer" label above it
   (which is also left-aligned, not centered). Centering the icons in the
   column would shift them right of the label's visual edge.

   ICON SIZING NOTE (2026-Q2 update): Brand SVGs were edge-trimmed by Dave
   (whitespace padding removed, logos re-scaled to be more proportional
   inside the viewBox). Edge-to-edge SVGs render visually larger than the
   original padded versions at the same CSS height. Current sizing matches
   visible-logo to text accent baseline — 18px desktop, 16px tablet, 14px
   mobile. The plus character is sized ~0.9x icon height to compensate for
   the visual lightness of a text glyph vs a filled shape.

   Patagonia logo removed 2026-Q2; original 3-logo version with Patagonia
   nth-child(3) size override is in git history.
*/
.trust-strip__accent--icons {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin-top: 4px !important;
  font-size: 0 !important;
  letter-spacing: 0 !important; }

.trust-strip__brand-icon {
  display: block !important;
  height: 18px !important;
  width: auto !important;
  max-width: 55px !important;
  object-fit: contain !important;
  opacity: 0.85 !important; }

.trust-strip__brand-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8cc640 !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important; }

/* TABLET (481–800px) — 2 cols x rows */
@media only screen and (min-width: 481px) and (max-width: 800px) {
  .trust-strip .box1 {
    padding: 24px 0 !important; }
  .trust-strip__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 16px !important; }
  .trust-strip__item {
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    padding: 14px 12px !important;
    min-height: 56px !important; }
  .trust-strip__item:nth-child(5n) {
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important; }
  .trust-strip__item:nth-child(2n) {
    border-right: none !important; }
  .trust-strip__item:nth-last-child(-n+2) {
    border-bottom: none !important; }
  .trust-strip__text {
    font-size: 13.5px !important;
    width: 145px !important;
    flex: 0 0 145px !important; }
  .trust-strip__accent {
    font-size: 12.5px !important; }
  .trust-strip__icon {
    width: 20px !important;
    height: 20px !important; }
  .trust-strip__brand-icon {
    height: 16px !important;
    max-width: 46px !important; }
  .trust-strip__brand-plus {
    font-size: 14px !important; } }

/* MOBILE MARQUEE (<=480px) — single-row CSS marquee */
@media only screen and (max-width: 480px) {
  .trust-strip .box1 {
    padding: 16px 0 !important; }
  .trust-strip__list {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 28px !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    animation: trustStripMarquee 60s linear infinite !important;
    will-change: transform !important; }
  .trust-strip__item {
    flex: 0 0 auto !important;
    border: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    white-space: nowrap !important; }
  .trust-strip__item:nth-child(5n) {
    border: none !important;
    padding: 0 !important; }
  .trust-strip__text {
    display: inline !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important; }
  .trust-strip__accent {
    display: inline !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    font-size: 13px !important; }
  .trust-strip__icon {
    width: 16px !important;
    height: 16px !important; }
  .trust-strip__accent--icons {
    display: inline-flex !important;
    justify-content: flex-start !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
    gap: 6px !important;
    vertical-align: middle !important; }
  .trust-strip__brand-icon {
    height: 14px !important;
    max-width: 36px !important; }
  .trust-strip__brand-plus {
    font-size: 12px !important; } }

@keyframes trustStripMarquee {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(-50%); } }

/* Accessibility: prefers-reduced-motion falls back to 2-col stacked grid */
@media only screen and (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .trust-strip__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-wrap: initial !important;
    gap: 0 !important;
    padding: 0 12px !important;
    overflow: visible !important;
    animation: none !important; }
  .trust-strip__item {
    border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    padding: 12px 10px !important;
    white-space: normal !important; }
  .trust-strip__item:nth-child(2n) {
    border-right: none !important; }
  .trust-strip__item:nth-last-child(-n+2) {
    border-bottom: none !important; }
  .trust-strip__text {
    display: block !important;
    white-space: normal !important;
    width: 145px !important;
    flex: 0 0 145px !important; }
  .trust-strip__accent {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 2px !important; }
  .trust-strip__item--dupe {
    display: none !important; } }

/* Hide marquee duplicates on desktop/tablet (only visible during mobile marquee) */
@media only screen and (min-width: 481px) {
  .trust-strip__item--dupe {
    display: none !important; } }

/* ==========================================================================
   Section 32. CATEGORY HERO BANNERS (SEO GOLD STANDARD)
   ========================================================================== */
.category-hero-wrapper {
  width: 100% !important;
  max-width: 1260px !important;
  margin: 0 auto 40px auto !important;
  overflow: hidden !important;
  display: block !important; }

.category-hero-wrapper .cell-1 {
  background-color: #38383e !important;
  padding: 20px 40px !important;
  justify-content: center !important; }

.category-hero-wrapper h1 {
  font-family: 'Figtree', sans-serif !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  text-align: left !important; }

.category-hero-wrapper h1 .highlight-green {
  color: #8cc640 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important; }

.category-hero-wrapper h1 .sub-text {
  font-weight: 800 !important;
  text-transform: uppercase !important; }

.category-hero-wrapper .cell-2 {
  background-color: #f9f9f9 !important;
  color: #38383e !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 300 !important;
  font-size: 18px !important;
  padding: 30px 40px !important;
  line-height: 1.4 !important;
  justify-content: center !important; }

.category-hero-wrapper .cell-3-span img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; }

@media (max-width: 768px) {
  .category-hero-wrapper .cell-1, .category-hero-wrapper .cell-2 {
    padding: 30px 20px !important;
    text-align: center !important; }
  .category-hero-wrapper h1 {
    text-align: center !important; } }

/* ==========================================================================
   Section 33. TEXT COLOR MODIFIERS
   ========================================================================== */
.boxhead.white-text {
  color: #ffffff !important; }

/* ==========================================================================
   Section 34. MODERN FAQ SYSTEM (NO-JS)
   ========================================================================== */
.faq-modern-container {
  max-width: 1260px;
  margin: 40px auto;
  font-family: 'Figtree', sans-serif; }

.faq-item {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s ease; }

.faq-item:hover {
  border-color: #8cc640; }

.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-weight: 800;
  font-size: 18px;
  color: #38383e;
  text-transform: uppercase;
  letter-spacing: 0.5px; }

.faq-item summary::-webkit-details-marker {
  display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 24px;
  color: #8cc640;
  font-weight: 400;
  transition: transform 0.3s ease; }

.faq-item[open] {
  border-color: #8cc640;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); }

.faq-item[open] summary {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e5e5e5; }

.faq-item[open] summary::after {
  transform: rotate(45deg);
  color: #c60000; }

.faq-content {
  padding: 25px;
  line-height: 1.6;
  color: #58585e;
  background-color: #ffffff;
  font-size: 16px; }

.faq-content p {
  margin-bottom: 15px !important; }

.faq-content p:last-child {
  margin-bottom: 0 !important; }

@media (max-width: 768px) {
  .faq-item summary {
    font-size: 16px;
    padding: 15px; } }

/* --- 34.1 FAQ GROUP HEADERS --- */
.faq-group-heading {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: #8cc640;
  padding: 10px 16px;
  margin-bottom: 4px;
  display: block; }

.faq-group-heading:first-child {
  padding-top: 10px; }

/* ==========================================================================
   Section 35. BRAND ECOSYSTEM UMBRELLA NAVIGATION (Pixel Perfect & iPhone 15 Safe)
   ========================================================================== */
.header-tabs {
  display: flex;
  align-items: center;
  background-color: #38383e;
  width: 100%;
  min-height: 52px;
  max-height: 52px;
  border-bottom: 5px solid #8cc43f;
  box-sizing: border-box; }

.header-tab-header {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 auto;
  max-width: 1230px;
  width: 100%;
  height: 100%;
  padding: 0 15px;
  box-sizing: border-box; }

.header_tab_bttn_cont {
  display: flex;
  flex-direction: row;
  height: 100%; }

.header_tab_link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  padding: 0 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  transition: 300ms;
  height: 47px; }

.header_tab_link:focus, .header_tab_link:active, .header_tab_link:focus-visible {
  outline: none !important;
  box-shadow: none !important; }

.tab-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0; }

.tab-title {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0; }

.header_tab_bttn__text {
  font-family: 'Figtree', sans-serif;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  margin: 0;
  padding: 0;
  white-space: nowrap; }

/* --- 35.1 ACTIVE STATE */
.ep_link_active {
  background-color: #ffffff !important;
  pointer-events: none;
  margin-bottom: -5px;
  height: 52px !important;
  border-bottom: 5px solid #ffffff !important;
  box-sizing: border-box; }

.ep_link_active .header_tab_bttn__text {
  color: #000000 !important; }

.header_tab_link:hover {
  background-color: #dbdbdb !important; }

.header_tab_link:hover .header_tab_bttn__text {
  color: #000000 !important; }

.ep_link_1 .tab-title {
  color: #4476C7 !important;
  padding-bottom: 3px; }

.ep_link_2 .tab-title {
  color: #8cc640 !important;
  padding-bottom: 3px; }

.ep_link_3 .tab-title {
  color: #D25E1F !important;
  padding-bottom: 3px; }

.ep_link_4 .tab-title {
  color: #F2C402 !important;
  padding-bottom: 3px; }

.header-tab-section2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  margin-left: 20px;
  flex-grow: 1; }

.header-utility-text {
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: normal;
  line-height: 1.2; }

/* --- 35.2 MOBILE TAB OVERRIDES (iPhone 15 Scale) --- */
@media (max-width: 768px) {
  .header-tabs {
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0; }
  .header-tab-header {
    padding: 0; }
  .header_tab_bttn_cont {
    width: 100%; }
  .header_tab_link {
    height: 58px !important;
    padding: 0 5px !important; }
  .header_tab_bttn__text {
    white-space: normal !important;
    text-align: left;
    font-size: clamp(10px, 3.5vw, 13px);
    line-height: 1.1; }
  .ep_link_active {
    height: 63px !important;
    margin-bottom: -5px; }
  .header-tab-section2 {
    display: none; } }

/* ==========================================================================
   Section 36.  NATIVE LEAD FORM OVERRIDES
   ========================================================================== */
.sidebar-bg {
  background: #ffffff !important;
  padding: 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; }

#elevation-lead-form .form-input, #team-store-form .form-input, .native-lead-form .form-input {
  width: 100% !important;
  margin-bottom: 15px !important;
  padding: 12px 15px !important;
  border: 1px solid #dbdbdb !important;
  border-radius: 4px !important;
  font-family: 'Figtree', sans-serif !important; }

.disclaimer-text {
  font-size: 11px !important;
  color: #58585e !important;
  line-height: 1.3 !important;
  margin-top: 15px !important; }

.native-lead-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1em; }

/* ==========================================================================
   Section 37.  TRUST CARD BLOCKS - EPC Screen Print & Embroidery
   Variants: V1 Trust Card · V2 Dark Band · V3 Split Panel
   Color modes: .sp (orange) · .emb (green)
   ========================================================================== */
/* --- 37.1 TRUST CARD COLOR TOKENS ---
   --emb maps to site-wide green (#8cc640). --sp (#f26522) is EPC-specific
   and distinct from .btn-orange (#ff6600) - do not consolidate these.
*/
.v1-block, .v2-block, .v3-block, .v1-cta-wrap {
  --sp: #f26522;
  --sp-dark: #d45510;
  --emb: #8cc640;
  --emb-dark: #6fa82e;
  --tc-dark-bg: #38383e;
  --tc-border: #e0e0e0;
  --tc-muted: #666666;
  --tc-subtle: #999999;
  font-family: 'Figtree', sans-serif; }

/* --- 37.2 SHARED ICON CONTAINER --- */
.icon-wrap-base {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 12px;
  background: #f0f0f0;
  flex-shrink: 0; }

.icon-wrap-base svg, .icon-wrap-base img {
  width: 30px;
  height: 30px; }

.icon-badge {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff; }

.icon-badge.sp {
  background: var(--sp); }

.icon-badge.emb {
  background: var(--emb); }

.icon-badge-dark.sp {
  background: var(--sp);
  border-color: var(--tc-dark-bg); }

.icon-badge-dark.emb {
  background: var(--emb);
  border-color: var(--tc-dark-bg); }

/* --- 37.3 SHARED SELLING-POINT TRIO ROWS --- */
.sp-list {
  --sp: #f26522;
  --sp-dark: #d45510;
  --emb: #8cc640;
  --emb-dark: #6fa82e;
  --blu: #0062ff;
  --blu-dark: #004fcc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0; }

.sp-row {
  display: flex;
  align-items: flex-start;
  gap: 10px; }

.sp-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 1px; }

.sp-icon.sp, .sp-icon.dark-sp {
  background: var(--sp); }

.sp-icon.emb, .sp-icon.dark-emb {
  background: var(--emb); }

.sp-icon.blu, .sp-icon.dark-blu {
  background: var(--blu); }

.sp-label {
  display: flex;
  flex-direction: column;
  gap: 1px; }

.sp-label strong {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3; }

.sp-label span {
  font-size: 13.5px;
  color: var(--tc-muted);
  line-height: 1.3; }

.sp-row.dark .sp-label strong {
  color: #ffffff; }

.sp-row.dark .sp-label span {
  color: #bbbbbb; }

/* --- 37.4 V1 - TRUST CARD (white bg, full structured, best default) --- */
.v1-block {
  background: #ffffff;
  border: 1px solid var(--tc-border);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; }

.v1-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px 22px;
  border-bottom: 1px solid var(--tc-border);
  background: #fafafa; }

.v1-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1; }

.v1-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase; }

.v1-eyebrow.sp {
  color: var(--sp); }

.v1-eyebrow.emb {
  color: var(--emb); }

.v1-brand {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  line-height: 1.1; }

.v1-brand .sp {
  color: var(--sp); }

.v1-brand .emb {
  color: var(--emb); }

.v1-body {
  padding: 14px 16px; }

.v1-block .v1-headline {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ff6600 !important;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important; }

.v1-sub {
  font-size: 14.5px;
  color: var(--tc-muted);
  line-height: 1.5;
  margin: 0 0 4px; }

.v1-sub strong {
  color: #1a1a1a; }

.v1-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 14px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  box-sizing: border-box;
  transition: background-color 0.3s, transform 0.15s; }

.v1-cta-btn:hover {
  transform: translateY(-1px); }

.v1-cta-btn.sp {
  background: var(--sp); }

.v1-cta-btn.sp:hover {
  background: var(--sp-dark); }

.v1-cta-btn.emb {
  background: var(--emb); }

.v1-cta-btn.emb:hover {
  background: var(--emb-dark); }

.v1-cta-main {
  display: contents; }

.v1-cta-sub {
  display: none; }

.v1-cta-btn > span:last-child {
  font-size: 16px; }

.v1-footer {
  padding: 9px 16px;
  background: #f8f8f8;
  border-top: 1px solid var(--tc-border);
  font-size: 10.5px;
  color: var(--tc-subtle);
  text-align: center; }

/* --- 37.5 V2 - DARK BAND (charcoal bg, high contrast) --- */
.v2-block {
  background: var(--tc-dark-bg);
  border-radius: 12px;
  overflow: hidden;
  max-width: 320px;
  position: relative; }

.v2-accent-bar {
  height: 4px;
  width: 100%; }

.v2-accent-bar.sp {
  background: linear-gradient(90deg, var(--sp-dark), var(--sp) 60%, #f7941d); }

.v2-accent-bar.emb {
  background: linear-gradient(90deg, var(--emb-dark), var(--emb) 60%, #aad95c); }

.v2-inner {
  padding: 16px 18px 18px; }

.v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px; }

.v2-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 20px; }

.v2-badge.sp {
  background: var(--sp);
  color: #ffffff; }

.v2-badge.emb {
  background: var(--emb);
  color: #ffffff; }

.v2-icon-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px; }

.v2-icon-wrap svg, .v2-icon-wrap img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
  opacity: 0.85; }

.v2-headline {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.1; }

.v2-headline .sp {
  color: var(--sp); }

.v2-headline .emb {
  color: var(--emb); }

.v2-sub {
  font-size: 12.5px;
  color: #aaaaaa;
  line-height: 1.5;
  margin: 0 0 4px; }

.v2-cta {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: #ffffff;
  margin-top: 16px;
  transition: opacity 0.15s, transform 0.15s; }

.v2-cta:hover {
  opacity: 0.88;
  transform: translateY(-1px); }

.v2-cta.sp {
  background: var(--sp); }

.v2-cta.emb {
  background: var(--emb); }

.v2-trust {
  font-size: 10px;
  color: #777777;
  text-align: center;
  margin-top: 10px; }

/* --- 37.6 V3 - SPLIT PANEL (compact horizontal, narrow sidebars) --- */
.v3-block {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 360px;
  border: 2px solid transparent; }

.v3-block.sp {
  border-color: var(--sp); }

.v3-block.emb {
  border-color: var(--emb); }

.v3-top-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px; }

.v3-top-tag.sp {
  background: var(--sp); }

.v3-top-tag.emb {
  background: var(--emb); }

.v3-tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0; }

.v3-tag-text {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  flex: 1; }

.v3-tag-brand {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff; }

.v3-split {
  display: flex; }

.v3-left {
  flex-shrink: 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 10px 14px 12px;
  gap: 6px;
  border-right: 1px solid var(--tc-border); }

.v3-icon-big {
  position: relative;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-radius: 8px; }

.v3-icon-big svg, .v3-icon-big img {
  width: 28px;
  height: 28px; }

.v3-icon-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--tc-muted);
  text-align: center;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.05em; }

.v3-right {
  flex: 1;
  padding: 12px 14px 14px; }

.v3-headline {
  font-size: 13.5px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 5px;
  line-height: 1.3; }

.v3-sub {
  font-size: 11.5px;
  color: var(--tc-muted);
  line-height: 1.45;
  margin: 0 0 10px; }

.v3-sub .sp {
  color: var(--sp);
  font-weight: 600; }

.v3-sub .emb {
  color: var(--emb);
  font-weight: 600; }

.v3-trio {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px; }

.v3-trio-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--tc-muted);
  line-height: 1.3; }

.v3-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0; }

.v3-dot.sp {
  background: var(--sp); }

.v3-dot.emb {
  background: var(--emb); }

.v3-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s; }

.v3-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px); }

.v3-cta.sp {
  background: var(--sp); }

.v3-cta.emb {
  background: var(--emb); }

.v3-cta-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2; }

.v3-cta-sub {
  font-size: 9.5px;
  font-weight: 400;
  opacity: 0.85; }

.v3-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0; }

.v3-arrow.sp {
  background: var(--sp-dark); }

.v3-arrow.emb {
  background: var(--emb-dark); }

/* --- 37.7 RESPONSIVE - only V3 needs stack rule at narrow sidebar width --- */
@media (max-width: 380px) {
  .v3-split {
    flex-direction: column; }
  .v3-left {
    flex-direction: row;
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--tc-border);
    padding: 10px 14px; }
  .v3-icon-label {
    text-align: left; } }

/* --- 37.8 MOBILE HEADER OVERRIDE --- */
@media (max-width: 480px) {
  .v1-header {
    gap: 12px;
    padding: 12px 16px 20px; }
  .v1-header-text {
    min-width: 0; }
  .v1-eyebrow {
    font-size: 10px;
    letter-spacing: 0.05em; }
  .v1-brand {
    font-size: 22px; } }

/* --- 37.9 STANDALONE CTA WRAPPER - matches V1 button treatment, no card --- */
.v1-cta-wrap {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 15px; }

.v1-cta-wrap .v1-cta-btn {
  display: block;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  margin-top: 0; }

/* ==========================================================================
   Section 38. TESTIMONIAL CARDS
   ========================================================================== */
.testimonial-grid {
  gap: 20px !important;
  padding: 20px 0 40px 0 !important;
  max-width: 1260px !important;
  margin: 0 auto !important; }

.testimonial-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 30px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  height: 100% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  font-family: 'Figtree', sans-serif !important;
  color: #38383e !important;
  width: 100% !important;
  box-sizing: border-box !important; }

.testimonial-logo {
  width: 225px !important;
  height: 225px !important;
  background: #58585e !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 25px !important;
  border: 2px solid #e5e5e5 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important; }

.testimonial-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 25px !important;
  box-sizing: border-box !important; }

.testimonial-quote {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  font-style: italic !important;
  margin-bottom: 25px !important;
  flex-grow: 1 !important; }

.testimonial-author {
  margin-top: auto !important;
  border-top: 2px solid #8cc640 !important;
  padding-top: 15px !important;
  width: 100% !important; }

.testimonial-author strong {
  display: block !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #38383e !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important; }

.testimonial-author span {
  display: block !important;
  font-size: 12px !important;
  color: #666666 !important;
  line-height: 1.4 !important; }

@media (max-width: 768px) {
  .testimonial-card {
    padding: 25px 15px !important; }
  .testimonial-quote {
    font-size: 14px !important; } }

/* ==========================================================================
   Section 39. CATALOG SYSTEM - /catalogs/ grid page
   Viewer CSS lives inline in catalog-viewer-SELFCONTAINED.html
   ========================================================================== */
/* --- 39.1 SEARCH BAR --- */
.es-cat-search-wrap {
  max-width: 1200px !important;
  margin: 0 auto 30px auto !important;
  padding: 20px !important;
  background: #f4f4f4 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 6px !important;
  font-family: 'Figtree', sans-serif !important; }

.es-cat-filter-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-bottom: 12px !important; }

.es-cat-pill {
  padding: 7px 16px !important;
  border-radius: 20px !important;
  border: 1px solid #38383e !important;
  background: #ffffff !important;
  color: #38383e !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s !important; }

.es-cat-pill:hover, .es-cat-pill-active {
  background: #38383e !important;
  color: #ffffff !important; }

.es-cat-search-row {
  position: relative !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important; }

#es-cat-search {
  width: 100% !important;
  padding: 11px 40px 11px 14px !important;
  font-size: 15px !important;
  font-family: 'Figtree', sans-serif !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px !important;
  color: #38383e !important;
  background: #ffffff !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important; }

#es-cat-search:focus {
  border-color: #8cc640 !important; }

.es-cat-clear-btn {
  position: absolute !important;
  right: 10px !important;
  background: none !important;
  border: none !important;
  font-size: 20px !important;
  color: #999 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  padding: 0 !important; }

.es-cat-clear-btn:hover {
  color: #38383e !important; }

/* --- 39.2 GRID LIBRARY WRAPPER & SECTION LABELS --- */
#es-catalog-library {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px 60px !important;
  font-family: 'Figtree', sans-serif !important; }

.es-cat-section-desc {
  color: #58585e !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin: -10px 0 20px 0 !important; }

/* --- 39.3 CATALOG GRID --- */
.es-cat-grid {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 18px !important;
  margin-bottom: 40px !important;
  align-items: start !important; }

@media (max-width: 1100px) {
  .es-cat-grid {
    grid-template-columns: repeat(5, 1fr) !important; } }

@media (max-width: 900px) {
  .es-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important; } }

@media (max-width: 700px) {
  .es-cat-grid {
    grid-template-columns: repeat(3, 1fr) !important; } }

@media (max-width: 480px) {
  .es-cat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important; } }

/* --- 39.4 CATALOG CARD --- */
.es-cat-item {
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important; }

.es-cat-link {
  text-decoration: none !important;
  display: block !important;
  color: inherit !important; }

.es-cat-name {
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #38383e !important;
  text-transform: uppercase !important;
  margin: 8px 0 6px 0 !important;
  line-height: 1.3 !important;
  min-height: 30px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important; }

/* --- 39.5 COVER IMAGE & HOVER OVERLAY --- */
.es-cat-cover-wrap {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  display: block !important; }

.es-cat-cover-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important; }

.es-cat-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(56, 56, 62, 0.82) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.25s ease !important; }

.es-cat-hover-overlay span {
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: #8cc640 !important;
  padding: 7px 14px !important;
  border-radius: 3px !important; }

.es-cat-cover-wrap:hover .es-cat-hover-overlay {
  opacity: 1 !important; }

/* --- 39.6 CARD ACTION BUTTONS --- */
.es-cat-actions {
  display: flex !important;
  gap: 5px !important;
  justify-content: center !important;
  margin-top: 5px !important; }

.es-cat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border-radius: 3px !important;
  padding: 6px 8px !important;
  line-height: 1 !important;
  transition: background 0.2s, color 0.2s !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  border: none !important; }

.es-cat-btn-view {
  background: #38383e !important;
  color: #ffffff !important;
  flex: 1 !important; }

.es-cat-btn-view:hover {
  background: #8cc640 !important;
  color: #ffffff !important; }

.es-cat-btn-dl {
  background: #f0f0f0 !important;
  color: #38383e !important;
  border: 1px solid #d5d5d5 !important; }

.es-cat-btn-dl:hover {
  background: #e0e0e0 !important; }

/* --- 39.7 PLACEHOLDER THUMBNAIL --- */
.es-cat-placeholder {
  width: 100% !important;
  aspect-ratio: 175 / 226 !important;
  background: #38383e !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  gap: 8px !important; }

.es-cat-placeholder-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.es-cat-placeholder-name {
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1.3 !important;
  letter-spacing: 0.05em !important; }

/* --- 39.8 SEARCH HIDDEN STATE --- */
.es-hidden {
  display: none !important; }

/* ==========================================================================
   Section 40. FORMS & WIDGETS
   ========================================================================== */
/* --- 40.1 CARD STYLE FORM — ESW Multi-Step Store Request Form
   All esw-* rules scoped to #team-store-form to avoid BigCommerce cascade
   conflicts. The form HTML lives inside <section id="team-store-form">.
   Companion JS file applies dynamic state changes (selected, active, error)
   via inline styles — those remain in JS and are noted inline below.
   Override order: this section comes AFTER Section 26 .form-input rules,
   so !important on scoped .form-input rules is required to win.
*/
/* Form card container — overrides Section 26 .sidebar-bg globals */
#team-store-form .sidebar-bg {
  padding: 0 !important;
  overflow: hidden;
  align-self: center !important;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  border-radius: 8px !important; }

/* Progress bar */
#team-store-form #esw-progress-bar {
  background: #f2f2f2;
  padding: 12px 20px 11px;
  border-bottom: 1px solid #e0e0e0;
  display: none;
  box-sizing: border-box;
  width: 100%; }

#team-store-form .esw-progress-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px; }

#team-store-form .esw-step-label {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #aaa; }

#team-store-form .esw-progress-track {
  background: #d0d0d0;
  height: 4px;
  border-radius: 2px;
  width: 100%; }

#team-store-form #esw-progress-fill {
  background: #8cc640;
  height: 4px;
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease; }

/* Note: active step label color changes applied by JS updateProgress() */
/* Slide window & track */
#team-store-form #esw-window {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 360px; }

#team-store-form #esw-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform; }

#team-store-form .esw-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; }

/* Welcome slide (Slide 0) — centered content */
#team-store-form #esw-slide-welcome {
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center; }

#team-store-form .esw-welcome-icon {
  margin-bottom: 16px;
  display: block; }

#team-store-form .esw-welcome-title {
  font-family: 'Figtree', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #38383e;
  margin: 0 0 10px 0;
  text-transform: uppercase;
  line-height: 1.15; }

#team-store-form .esw-welcome-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  color: #58585e;
  line-height: 1.6;
  margin: 0 0 26px 0; }

/* Slide inner layouts */
#team-store-form .esw-slide-body {
  padding: 16px 20px 0;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column; }

#team-store-form .esw-slide-body--scroll {
  overflow-y: auto; }

#team-store-form .esw-slide-body--no-overflow {
  overflow: hidden; }

#team-store-form .esw-slide-footer {
  padding: 12px 20px 16px;
  flex-shrink: 0;
  display: flex;
  gap: 10px; }

#team-store-form .esw-slide-footer--tight {
  padding: 10px 20px 14px; }

#team-store-form .esw-slide-intro {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #58585e;
  margin: 0 0 12px 0;
  line-height: 1.3;
  flex-shrink: 0; }

/* Colors slide (Slide 1) */
#team-store-form #esw-color-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  flex: 1;
  align-content: start; }

#team-store-form #esw-color-other-wrap {
  display: none;
  margin-top: 4px;
  flex-shrink: 0; }

/* Note: #esw-color-other-wrap display toggled to block by JS when "Other" selected */
#team-store-form #esw-color-other {
  margin-bottom: 0 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  width: 100%;
  box-sizing: border-box; }

/* Note: color swatch button styles are applied by JS buildSwatches() — data-driven */
/* Logo choice slide (Slide 2) */
#team-store-form .esw-logo-tile-list {
  display: flex;
  flex-direction: column;
  gap: 10px; }

#team-store-form .esw-logo-tile {
  background: #fafafa;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  padding: 16px 15px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box; }

#team-store-form .esw-logo-tile:hover {
  border-color: rgba(140, 198, 64, 0.5); }

/* Note: .esw-logo-tile active state (green border, light-green bg) applied by JS on click */
#team-store-form .esw-logo-tile svg {
  flex-shrink: 0;
  opacity: 0.45; }

#team-store-form .esw-logo-tile-text {
  display: flex;
  flex-direction: column; }

#team-store-form .esw-logo-tile-text strong {
  display: block;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #38383e;
  text-transform: uppercase;
  letter-spacing: 0.04em; }

#team-store-form .esw-logo-tile-text span {
  font-size: 11px;
  color: #777;
  line-height: 1.3;
  display: block;
  margin-top: 2px; }

/* Logo notes slide (Slide 3) */
#team-store-form #esw-logo-notes {
  resize: none;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px !important;
  font-family: 'Figtree', sans-serif !important;
  line-height: 1.5;
  margin-bottom: 0 !important; }

/* Upload slide (Slide 4) */
#team-store-form #esw-drop-zone {
  position: relative;
  border: 2px dashed #c8c8c8;
  border-radius: 6px;
  padding: 28px 16px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color 0.2s, background 0.2s;
  background: #fafafa; }

#team-store-form #esw-drop-zone:hover {
  border-color: #8cc640;
  background: #f0f8e6; }

/* Note: drop zone drag-over state (green border + bg) applied by JS dragover handler */
#team-store-form .esw-drop-icon {
  margin: 0 auto 8px;
  display: block;
  opacity: 0.3; }

#team-store-form .esw-drop-main {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #38383e;
  margin-bottom: 2px; }

#team-store-form .esw-drop-sub {
  font-family: 'Figtree', sans-serif;
  font-size: 10px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

#team-store-form #esw-logo-file {
  display: none; }

#team-store-form #esw-upload-error {
  display: none;
  background: #fff3f3;
  border: 1px solid #f5c0c0;
  border-left: 4px solid #c60000;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #c60000;
  font-weight: 600;
  font-family: 'Figtree', sans-serif; }

#team-store-form #esw-file-chosen {
  display: none;
  background: #f0f8e6;
  border: 1px solid #8cc640;
  border-left: 4px solid #8cc640;
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: #38383e;
  font-weight: 600;
  font-family: 'Figtree', sans-serif; }

/* Note: #esw-upload-error and #esw-file-chosen toggled by JS validateFiles()/showFiles() */
#team-store-form #esw-upload-notes {
  display: none;
  resize: none;
  height: auto;
  margin-bottom: 0 !important;
  font-size: 13px !important;
  width: 100%;
  box-sizing: border-box; }

#team-store-form .esw-upload-heading {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #38383e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px 0; }

#team-store-form .esw-upload-hint {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  color: #58585e;
  margin: 0 0 8px 0;
  line-height: 1.4; }

/* Contact slide (Slide 5) */
#team-store-form #esw-fax {
  display: none !important; }

#team-store-form #esw-name, #team-store-form #esw-org {
  width: 100% !important;
  display: block;
  margin-bottom: 10px !important;
  box-sizing: border-box;
  font-size: 14px !important;
  font-family: 'Figtree', sans-serif !important; }

#team-store-form .esw-contact-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px; }

#team-store-form .esw-contact-row #esw-email, #team-store-form .esw-contact-row #esw-phone {
  flex: 1;
  min-width: 0;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  font-size: 14px !important;
  font-family: 'Figtree', sans-serif !important; }

#team-store-form #esw-org-type {
  width: 100% !important;
  display: block;
  margin-bottom: 30px !important;
  box-sizing: border-box;
  height: 46px !important;
  padding-right: 36px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23666%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1em; }

/* Error messages — shared */
#team-store-form #esw-color-error, #team-store-form #esw-logo-error, #team-store-form #esw-contact-error {
  display: none;
  color: #c60000;
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  font-family: 'Figtree', sans-serif;
  flex-shrink: 0; }

#team-store-form #esw-logo-error {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 11px; }

/* Success slide (Slide 6) */
#team-store-form #esw-slide-success {
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  overflow-y: auto; }

/* Buttons — primary NEXT / SUBMIT */
#team-store-form .esw-btn-primary, #team-store-form #esw-get-started-btn, #team-store-form #esw-colors-next, #team-store-form #esw-logo-next, #team-store-form #esw-logo-notes-next, #team-store-form #esw-upload-next, #team-store-form #esw-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #8cc640;
  color: #ffffff;
  font-family: 'Figtree', sans-serif;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 15px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
  transition: background 0.2s; }

#team-store-form .esw-btn-primary:hover, #team-store-form #esw-get-started-btn:hover, #team-store-form #esw-colors-next:hover, #team-store-form #esw-logo-next:hover, #team-store-form #esw-logo-notes-next:hover, #team-store-form #esw-upload-next:hover, #team-store-form #esw-submit-btn:hover {
  background-color: #7ab535; }

/* Welcome button exception — inline-flex + custom padding for pill look */
#team-store-form #esw-get-started-btn {
  display: inline-flex;
  padding: 16px 44px;
  font-size: 18px; }

/* Step buttons fill full slide footer width */
#team-store-form #esw-colors-next, #team-store-form #esw-logo-notes-next {
  width: 100%; }

/* Paired footer buttons (NEXT + BACK) use flex: 1 on primary */
#team-store-form .esw-slide-footer #esw-logo-next, #team-store-form .esw-slide-footer #esw-upload-next, #team-store-form .esw-slide-footer #esw-submit-btn {
  flex: 1; }

/* Buttons — BACK secondary */
#team-store-form .esw-btn-back, #team-store-form #esw-contact-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 2px solid #d0d0d0;
  border-radius: 6px;
  padding: 13px 18px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #58585e;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-sizing: border-box;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s; }

#team-store-form .esw-btn-back:hover, #team-store-form #esw-contact-back-btn:hover {
  border-color: #8cc640;
  color: #8cc640; }

/* Input baseline — inherits from Section 26 .form-input but scopes font-size override */
#team-store-form .form-input {
  font-size: 14px !important;
  font-family: 'Figtree', sans-serif !important; }

/* Error state — outlined by JS when validation fails */
#team-store-form .esw-input-error {
  outline: 2px solid #e05c5c !important;
  border-color: #c60000 !important; }

/* Shake animation for validation errors (kept from original, still referenced by some JS paths) */
#team-store-form .esw-shake {
  animation: eswShake 0.35s ease; }

@keyframes eswShake {
  0%, 100% {
    transform: translateX(0); }
  20% {
    transform: translateX(-6px); }
  40% {
    transform: translateX(6px); }
  60% {
    transform: translateX(-4px); }
  80% {
    transform: translateX(4px); } }

/* Responsive — mobile adjustments */
@media (max-width: 480px) {
  #team-store-form #esw-window {
    height: 400px; }
  #team-store-form .esw-welcome-title {
    font-size: 28px; }
  #team-store-form .esw-welcome-sub {
    font-size: 16px; }
  #team-store-form #esw-color-grid {
    grid-template-columns: repeat(5, 1fr); }
  #team-store-form .esw-contact-row {
    flex-direction: column;
    gap: 10px; }
  #team-store-form .esw-contact-row #esw-email, #team-store-form .esw-contact-row #esw-phone {
    margin-bottom: 0 !important; } }

/* ==========================================================================
   Section 41. CUSTOM HERO BANNER (single, static)
   ==========================================================================
   Single-banner hero replacing stock Roots .heroCarousel.

   RESPONSIVE STRATEGY (aligned with Roots Section 24 breakpoints):
   - >=801px (desktop)       : image overlay layout, hero 2800/855
                               (hero-desktop.jpg as full-bleed background)
   - 481-800px (tablet)      : foreground mobile banner stacks ABOVE the
                               text/button block on flat #58585e
                               (hero-mobile.jpg, 1200x600 / 2:1 ratio)
   - <=480px (small mobile)  : same as tablet, full-width stacked buttons

   801px is Roots' header collapse point (Section 24.1/24.2), so the hero
   transitions to mobile-mode in sync with the nav becoming hamburger.

   Each tier loads ONLY its own image via <picture> + media query in
   markup, so no device pays bandwidth for an image it won't see.

   DESKTOP SUB-TIERS (object-position):
   - >=1920px : center center  (wide monitor, both halves visible)
   - 1701-1919px : 65% center  (general desktop, slight right-bias)
   - 1501-1700px : 80% center  (mid desktop, stronger right-bias)
   - 801-1500px : right center (laptop / narrow desktop, products flush right)

   Content column max-width tightens from 50% to 45% at <=1600px and the
   H1 font cap drops at <=1600px so 'CUSTOM TEAM APPAREL' fits 2 lines max.

   ASPECT-RATIO RELEASE (801-1200px): At small-desktop / iPad-landscape
   widths the locked 2800/855 aspect ratio renders the hero too short
   (~312px at 1024px) for content to fit, clipping the buttons.  In this
   band the aspect ratio is released and a min-height keeps the hero tall
   enough for content while the image continues to cover-fit.

   XL TIER (>=1920px): On wide monitors the hero is 580px+ tall and the
   default clamp() caps make all content feel undersized for the space.
   The XL tier overrides H1, eyebrow, body, button, and padding sizes so
   the content scales up proportionally with the hero.

   MOBILE BANNER (41.MOBILE): The .elv-hero-mobile-banner picture is
   display:none on desktop and display:block at <=800px, stacked ABOVE
   .elv-hero-content via flex order on #elv-hero.  Image renders at
   100% width / auto height (true aspect ratio of the asset, currently
   1200x600 = 2:1).

   Section background = #58585e (matches box4 cake layer) so the hero
   blends with the page on load.  All rules scoped under #elv-hero.

   Per-banner color overrides via CSS custom properties on .elv-hero.
   Defaults below; override inline on the section for future banners.
   ========================================================================== */
/* Outer container: full-bleed, dark gray to match #58585e box4 backdrop, locks 2800/855 */
#elv-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #58585e;
  aspect-ratio: 2800 / 855;
  --elv-hero-eyebrow-color: #c60000;
  --elv-hero-eyebrow-bg: #ffffff;
  --elv-hero-text-color: #ffffff;
  --elv-hero-btn1-bg: #c60000;
  --elv-hero-btn1-fg: #ffffff;
  --elv-hero-btn1-border: #ffffff;
  --elv-hero-btn1-hover-bg: #a30000;
  --elv-hero-btn2-bg: #38383e;
  --elv-hero-btn2-fg: #ffffff;
  --elv-hero-btn2-border: #ffffff;
  --elv-hero-btn2-hover-bg: #c60000; }

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
  #elv-hero {
    height: 30.5357vw;
    min-height: 240px; } }

/* Picture wrapper — display: contents so it doesn't create its own layout box (img positions absolutely within #elv-hero either way, but this is bulletproof) */
#elv-hero .elv-hero-picture {
  display: contents; }

/* Image: covers the full hero. Object-position shifts right as viewport narrows so the apparel cluster (right side of source image) never crowds the text column on the left. */
#elv-hero .elv-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0; }

/* General desktop (<1920px) — slight right-bias keeps left text area clean */
@media (max-width: 1919px) {
  #elv-hero .elv-hero-image {
    object-position: 65% center; } }

/* Mid desktop (<=1700px) — stronger right-bias as viewport narrows */
@media (max-width: 1700px) {
  #elv-hero .elv-hero-image {
    object-position: 80% center; } }

/* Narrow desktop / laptop (<=1500px) — image fully right, left half is clean gray for text */
@media (max-width: 1500px) {
  #elv-hero .elv-hero-image {
    object-position: right center; } }

/* Small desktop / iPad landscape (801-1200px) — release the locked aspect ratio because the hero would render too short (312px at 1024px viewport) for the content to fit. Use min-height so the hero grows vertically as needed; image still cover-fits. Also tighten H1 and force buttons inline (no wrap) so they fit the narrow 45% column. */
@media (min-width: 801px) and (max-width: 1200px) {
  #elv-hero {
    aspect-ratio: auto;
    min-height: clamp(380px, 38vw, 480px); }
  #elv-hero .elv-hero-headline {
    font-size: clamp(24px, 2.4vw, 32px) !important; }
  #elv-hero .elv-hero-description {
    font-size: 14px !important;
    line-height: 1.4 !important; }
  #elv-hero .elv-hero-actions {
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: auto !important; }
  #elv-hero .elv-hero-btn {
    font-size: 13px !important;
    padding: 10px 18px !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important; } }

/* Section 41.MOBILE — foreground mobile/tablet banner. Hidden on desktop; shown at <=800px via tablet block below. */
#elv-hero .elv-hero-mobile-banner {
  display: none; }

#elv-hero .elv-hero-mobile-image {
  display: block;
  width: 100%;
  height: auto; }

/* Content overlay: top-anchored on the left half. Padding-top puts H1 at a consistent visual distance from the top edge regardless of how tall the hero renders. */
#elv-hero .elv-hero-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: clamp(40px, 6vw, 110px) clamp(40px, 4vw, 80px) clamp(40px, 4vw, 80px);
  max-width: 50%;
  pointer-events: none; }

#elv-hero .elv-hero-content > * {
  pointer-events: auto; }

/* Tighten content column on narrower desktops so it never approaches the apparel cluster */
@media (max-width: 1600px) {
  #elv-hero .elv-hero-content {
    max-width: 45%; } }

/* Headline (H1) — Figtree weight 800, white, uppercase. text-wrap:pretty preserves natural breaks (avoid 'balance' which forces 3-line wraps in narrow columns) */
#elv-hero .elv-hero-headline {
  font-family: 'Figtree', sans-serif;
  color: var(--elv-hero-text-color);
  font-size: clamp(32px, 3.2vw, 56px);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  text-wrap: pretty; }

/* Narrow desktop / laptop — cap H1 size so 'CUSTOM TEAM APPAREL' fits the narrowed 45% column on 2 lines max */
@media (max-width: 1600px) {
  #elv-hero .elv-hero-headline {
    font-size: clamp(28px, 2.6vw, 40px); } }

/* Eyebrow (subheader) — block <p> with inline-block child for white pill behind text only */
#elv-hero .elv-hero-eyebrow {
  margin: 0 0 clamp(14px, 1.8vw, 24px);
  padding: 0; }

#elv-hero .elv-hero-eyebrow-text {
  display: inline-block;
  background: var(--elv-hero-eyebrow-bg);
  color: var(--elv-hero-eyebrow-color);
  font-family: 'Figtree', sans-serif;
  font-size: clamp(14px, 1.6vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  padding: clamp(4px, 0.5vw, 8px) clamp(10px, 1vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.04em; }

/* Body paragraph — Figtree, white */
#elv-hero .elv-hero-description {
  font-family: 'Figtree', sans-serif;
  color: var(--elv-hero-text-color);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 clamp(18px, 2.2vw, 32px);
  max-width: 38ch;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }

/* Button row */
#elv-hero .elv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1vw, 14px); }

/* Buttons — bordered, color-overridable per banner via custom properties */
#elv-hero .elv-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: clamp(10px, 1.1vw, 14px) clamp(18px, 2vw, 28px);
  min-height: 44px;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer; }

#elv-hero .elv-hero-btn:hover {
  transform: translateY(-1px); }

#elv-hero .elv-hero-btn:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px; }

/* Primary — red fill, white border, white text; hover darkens fill */
#elv-hero .elv-hero-btn-primary {
  background: var(--elv-hero-btn1-bg);
  color: var(--elv-hero-btn1-fg);
  border-color: var(--elv-hero-btn1-border); }

#elv-hero .elv-hero-btn-primary:hover {
  background: var(--elv-hero-btn1-hover-bg); }

/* Secondary — dark gray fill, red border, white text; hover swaps fill to red */
#elv-hero .elv-hero-btn-secondary {
  background: var(--elv-hero-btn2-bg);
  color: var(--elv-hero-btn2-fg);
  border-color: var(--elv-hero-btn2-border); }

#elv-hero .elv-hero-btn-secondary:hover {
  background: var(--elv-hero-btn2-hover-bg); }

/* ==========================================================================
   XL desktop tier (>=1920px) — at wide monitor widths the hero is 580px+
   tall and the default clamp() caps make the H1, eyebrow, body, and
   buttons all feel undersized for the space.  This tier raises the caps
   so the content fills the larger hero proportionally.
   ========================================================================== */
@media (min-width: 1920px) {
  #elv-hero .elv-hero-content {
    padding: clamp(60px, 5vw, 140px) clamp(60px, 4.5vw, 110px) clamp(60px, 4vw, 100px);
    max-width: 55%; }
  #elv-hero .elv-hero-headline {
    font-size: clamp(56px, 3.6vw, 84px);
    margin: 0 0 clamp(18px, 1.4vw, 28px); }
  #elv-hero .elv-hero-eyebrow {
    margin: 0 0 clamp(20px, 1.8vw, 32px); }
  #elv-hero .elv-hero-eyebrow-text {
    font-size: clamp(20px, 1.4vw, 30px);
    padding: clamp(6px, 0.5vw, 10px) clamp(14px, 1vw, 20px); }
  #elv-hero .elv-hero-description {
    font-size: clamp(17px, 1.1vw, 22px);
    margin: 0 0 clamp(24px, 2vw, 40px);
    max-width: 48ch; }
  #elv-hero .elv-hero-btn {
    font-size: clamp(16px, 1vw, 19px);
    padding: clamp(14px, 1.1vw, 18px) clamp(28px, 2vw, 38px);
    min-height: 52px; }
  #elv-hero .elv-hero-actions {
    gap: clamp(12px, 1vw, 18px); } }

/* ==========================================================================
   Tablet tier (max-width: 800px) — aligned with Roots Section 24.2
   At this width the header collapses to hamburger.  Hero collapses too:
   the desktop overlay image is hidden, and the .elv-hero-mobile-banner
   <picture> reveals as a foreground image stacked ABOVE the content
   block via flex order.  The desktop image is gated by <source media>
   at 801px so it never downloads here; the mobile banner is gated by
   <source media> at 800px so desktop never downloads it.
   ========================================================================== */
@media only screen and (max-width: 800px) {
  #elv-hero {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column; }
  #elv-hero .elv-hero-image {
    display: none; }
  #elv-hero .elv-hero-mobile-banner {
    display: block;
    order: 0;
    width: 100%; }
  #elv-hero .elv-hero-content {
    position: relative;
    inset: auto;
    max-width: 100%;
    padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 32px);
    order: 1; }
  #elv-hero .elv-hero-headline {
    font-size: clamp(28px, 5.5vw, 44px);
    text-shadow: none; }
  #elv-hero .elv-hero-eyebrow-text {
    font-size: clamp(13px, 2.4vw, 18px);
    padding: 5px 12px; }
  #elv-hero .elv-hero-description {
    font-size: clamp(14px, 2.2vw, 17px);
    text-shadow: none;
    max-width: 100%; }
  #elv-hero .elv-hero-btn {
    font-size: 14px;
    padding: 12px 22px; } }

/* ==========================================================================
   Small mobile tier (max-width: 480px) — aligned with Roots Section 24.5
   Same as tablet plus: stacked full-width buttons for one-thumb tap, and
   tighter horizontal padding to maximize content width on small screens.
   The mobile banner inherits display:block and order:0 from the tablet
   block above.
   ========================================================================== */
@media only screen and (max-width: 480px) {
  #elv-hero .elv-hero-content {
    padding: 28px 16px 32px; }
  #elv-hero .elv-hero-headline {
    font-size: clamp(24px, 7vw, 32px); }
  #elv-hero .elv-hero-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%; }
  #elv-hero .elv-hero-btn {
    width: 100%;
    min-height: 48px; } }

/* ==========================================================================
   Section 42. CUSTOM PRODUCT LABELS
   ==========================================================================
   Card-figure overlay labels driven by BC custom fields named "Custom Label".
   Value format: TEXT|#HEXCOLOR (e.g. "QUICK TURN|#8CC640"). Handlebars loop
   in templates/components/products/card.html renders each match.
   Multiple labels per product stack vertically via adjacent-sibling selectors.
   ========================================================================== */
.CustomLabelsWrap {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important; }

.CustomLabelsWrap + .CustomLabelsWrap {
  top: 25px !important; }

.CustomLabelsWrap + .CustomLabelsWrap + .CustomLabelsWrap {
  top: 50px !important; }

.CustomLabelsWrap span {
  display: inline-block !important;
  margin-bottom: 5px !important;
  padding: 2px 5px !important;
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important; }

/* Hide in quick-search results to avoid clutter in condensed dropdown lists */
.quickSearchResults .CustomLabelsWrap {
  display: none !important; }

/* ============================================================
   SECTION 43 — INFINITE SCROLL & LOAD MORE
   ============================================================
   Paste after Section 42 in mods.scss.
   Brand tokens: #8cc640 green, #38383e charcoal, #ff6600 orange
   Font: Figtree
   ============================================================ */
/* 43.1 — SR-ONLY UTILITY (for ARIA live region) */
.es-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important; }

/* 43.2 — WRAPPER */
.es-infscroll-wrap {
  width: 100%;
  max-width: 1230px;
  margin: 24px auto 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
  text-align: center;
  font-family: 'Figtree', sans-serif !important; }

/* 43.3 — PRODUCT COUNT INDICATOR */
.es-product-count {
  display: inline-block;
  margin: 0 auto 16px auto;
  padding: 6px 14px;
  background: #f0f0f0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #38383e !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Figtree', sans-serif !important; }

.es-product-count .es-count-current {
  color: #8cc640 !important;
  font-weight: 800; }

.es-product-count .es-count-total {
  color: #38383e !important;
  font-weight: 800; }

/* 43.4 — STATUS CONTAINER (spinner + end + error) */
.es-page-load-status {
  display: none;
  text-align: center;
  padding: 20px 0;
  min-height: 80px; }

.es-page-load-status.infinite-scroll-request {
  display: none; }

/* Stock Metafizzy adds these states — override with our styling */
.page-load-status .infinite-scroll-request,
.page-load-status .infinite-scroll-last,
.page-load-status .infinite-scroll-error {
  display: none; }

/* 43.5 — BRANDED SPINNER (matches catalog flipbook spinner pattern) */
@keyframes es-infscroll-spin {
  to {
    transform: rotate(360deg); } }

.es-spinner {
  display: inline-block;
  width: 44px;
  height: 44px;
  border: 4px solid #e0e0e0;
  border-top-color: #8cc640;
  border-radius: 50%;
  animation: es-infscroll-spin 0.9s linear infinite;
  margin: 0 auto 12px auto; }

.es-scroll-request {
  text-align: center; }

.es-scroll-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #38383e !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Figtree', sans-serif !important; }

/* 43.6 — END-OF-RESULTS & ERROR MESSAGES */
.es-scroll-last {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #58585e !important;
  font-family: 'Figtree', sans-serif !important; }

.es-scroll-last::before {
  content: '\2713';
  display: inline-block;
  margin-right: 8px;
  color: #8cc640 !important;
  font-weight: 800;
  font-size: 16px; }

.es-scroll-error {
  padding: 12px 20px;
  font-size: 13px;
  color: #c60000 !important;
  font-family: 'Figtree', sans-serif !important; }

/* 43.7 — LOAD MORE BUTTON (brand green, Figtree, accessible focus) */
.es-load-more-btn {
  display: none;
  margin: 16px auto 24px auto;
  padding: 14px 36px;
  min-width: 260px;
  background: #8cc640 !important;
  color: #ffffff !important;
  border: 2px solid #8cc640 !important;
  border-radius: 4px;
  font-family: 'Figtree', sans-serif !important;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); }

.es-load-more-btn:hover {
  background: #7ab035 !important;
  border-color: #7ab035 !important;
  box-shadow: 0 3px 8px rgba(140, 198, 64, 0.3); }

.es-load-more-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.es-load-more-btn:focus {
  outline: 3px solid #38383e !important;
  outline-offset: 2px; }

.es-load-more-btn:focus:not(:focus-visible) {
  outline: none !important; }

.es-load-more-btn:focus-visible {
  outline: 3px solid #38383e !important;
  outline-offset: 2px; }

.es-load-more-btn[disabled] {
  background: #bbb !important;
  border-color: #bbb !important;
  cursor: not-allowed;
  opacity: 0.7; }

.es-load-more-btn.es-visible {
  display: inline-block; }

/* 43.8 — BACK TO TOP STICKY BUTTON */
.es-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: #38383e !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  -webkit-appearance: none;
  appearance: none;
  padding: 0; }

.es-back-to-top.es-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; }

.es-back-to-top:hover {
  background: #8cc640 !important;
  transform: translateY(-2px); }

.es-back-to-top:focus {
  outline: 3px solid #8cc640 !important;
  outline-offset: 2px; }

.es-back-to-top:focus:not(:focus-visible) {
  outline: none !important; }

.es-back-to-top:focus-visible {
  outline: 3px solid #8cc640 !important;
  outline-offset: 2px; }

.es-back-to-top svg {
  width: 20px;
  height: 20px;
  display: block; }

/* 43.9 — NEWLY-LOADED PRODUCT FADE-IN */
@keyframes es-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

[data-product-listing] .product.es-new-item {
  animation: es-fade-in-up 0.4s ease-out both; }

/* 43.10 — RESPONSIVE */
@media (max-width: 640px) {
  .es-load-more-btn {
    min-width: 0;
    width: 100%;
    max-width: 320px;
    padding: 12px 24px;
    font-size: 13px; }
  .es-back-to-top {
    width: 44px;
    height: 44px;
    bottom: 16px;
    right: 16px; }
  .es-back-to-top svg {
    width: 18px;
    height: 18px; }
  .es-product-count {
    font-size: 11px;
    padding: 5px 12px; } }

/* 43.11 — REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .es-spinner {
    animation: none;
    border-top-color: #8cc640; }
  [data-product-listing] .product.es-new-item {
    animation: none; }
  .es-back-to-top {
    transition: none; }
  .es-load-more-btn {
    transition: none; }
  html {
    scroll-behavior: auto !important; } }

/* 43.12 — HIDE LEGACY PAGINATION DUPLICATES IN SORT BAR IF UNWANTED */
/* Uncomment to hide the top paginator and keep only the sort dropdown there:
.sort-and-pagination .pagination { display:none !important; }
*/
/* ============================================================
   SECTION 44 — HEADER SEARCH FIX
   ============================================================
   Fixes Roots 5.2.2 quickSearch bug where icon button sits at
   left:0 overlapping placeholder text. Moves icon to the right.
   ============================================================ */
.quickSearchWrap .form-button, .navPages-quickSearch .form-button {
  left: 0 !important;
  right: auto !important; }

.quickSearchWrap .form-input, .navPages-quickSearch .form-input {
  padding-left: 45px !important;
  padding-right: 15px !important; }

.quickSearchResults:empty {
  display: none !important; }

/* =====================================================================
   Section 45. FOOTER 2026 REBUILD
   ---------------------------------------------------------------------
   Replaces legacy Section 14 footer styling for the new 5-column ES
   footer. Scoped via .footer-info--es so legacy footer instances are
   untouched. Source-order override — sits at file bottom, below all
   earlier footer rules. Color tokens match homepage (Section 28+):
   #38383e charcoal bg, #8cc640 accent green, #cccccc body link.
   Breakpoints: 801px desktop / 800px tablet / 480px small mobile, per
   Section 24 family. Figtree font (Section 26 baseline).
   ===================================================================== */
/* Footer body + container ---------------------------------------------- */
.footer {
  background: #38383e;
  color: #ffffff;
  padding: 48px 0 0 0;
  font-family: 'Figtree', sans-serif; }

.footer .container {
  max-width: 1230px;
  padding: 0 30px; }

/* Column 1 — Brand identity ------------------------------------------- */
.footer-info-col--brand {
  display: flex;
  flex-direction: column;
  gap: 0; }

.footer-brand {
  margin-bottom: 18px; }

.footer-brand__name {
  font-family: 'Figtree', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1; }

.footer-brand__accent {
  color: #8cc640; }

.footer-address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.6;
  color: #cccccc;
  margin: 0 0 14px 0; }

.footer-hours {
  font-size: 11px;
  font-weight: 700;
  color: #a0a0a0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 22px 0; }

/* Phone + email rows --------------------------------------------------- */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 22px 0; }

.footer-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.4; }

.footer-contact__item:last-child {
  margin-bottom: 0; }

.footer-contact__item .icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.footer-contact__item .icon svg {
  width: 14px;
  height: 14px;
  fill: #cccccc; }

.footer-contact__item a {
  color: #ffffff;
  text-decoration: none;
  word-break: break-word; }

.footer-contact__item a:hover {
  color: #8cc640; }

.footer-contact__item--phone a {
  font-weight: 700;
  font-size: 15px; }

/* Social row — inline, larger, no bullets ----------------------------- */
.footer-social-row {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  gap: 10px; }

.footer-social-row li {
  margin: 0;
  padding: 0; }

.footer-social-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #8cc640;
  transition: background 0.15s ease; }

.footer-social-row a:hover {
  background: #ffffff; }

.footer-social-row .icon {
  width: 18px;
  height: 18px; }

.footer-social-row .icon svg {
  width: 18px;
  height: 18px;
  fill: #38383e; }

.footer-social-row a:hover .icon svg {
  fill: #38383e; }

/* MOBILE (max-width: 800px) — Column 1 -------------------------------- */
@media (max-width: 800px) {
  .footer-info-col--brand {
    text-align: center;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 32px; }
  .footer-contact__item {
    justify-content: center; }
  .footer-social-row {
    justify-content: center; } }

/* Legal bar — copyright + policy links -------------------------------- */
.footer-legal {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding: 20px 0 24px 0;
  border-top: 1px solid #4a4a52; }

.footer-legal__copy {
  margin: 0;
  font-size: 12px;
  color: #888; }

.footer-legal__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: row wrap;
  gap: 0;
  align-items: center; }

.footer-legal__links li {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1; }

.footer-legal__links li + li::before {
  content: '\00B7';
  display: inline-block;
  margin: 0 12px;
  color: #4a4a52;
  font-weight: 700; }

.footer-legal__links a {
  color: #888;
  text-decoration: none;
  transition: color 0.15s ease; }

.footer-legal__links a:hover {
  color: #8cc640; }

/* MOBILE (max-width: 800px) — Legal bar ------------------------------- */
@media (max-width: 800px) {
  .footer-legal {
    flex-flow: column nowrap;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 20px 20px 24px 20px; }
  .footer-legal__links {
    justify-content: center; } }

/* ==========================================================================
   Section 46. SIMPLE LEAD FORM — FIELD PAIR ROWS (esf-)
   --------------------------------------------------------------------------
   Two-up field rows for the native esf- lead/quote forms (formSource-driven,
   GAS-routed). Distinct from Section 40, which is scoped to #team-store-form
   (the esw- multi-step store request form). These rules are unscoped on
   purpose so the .esf-pair grid works on any page that drops in a simple
   lead form layer (Custom Team Apparel, Simple Quote Request, etc.).

   The .esf-pair wrapper holds two label+input columns side-by-side on
   desktop and collapses to a single stacked column at the Roots small-mobile
   breakpoint (Section 24.5, max-width: 480px), mirroring the .esw-contact-row
   collapse in Section 40.
   ========================================================================== */
.esf-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px; }

/* Mobile — collapse to single column (aligned with Roots Section 24.5) */
@media (max-width: 480px) {
  .esf-pair {
    grid-template-columns: 1fr;
    gap: 0; }
  .esf-pair > div {
    margin-bottom: 20px; }
  .esf-pair > div:last-child {
    margin-bottom: 0; } }

/* ==========================================================================
   TEST AND EXPERIMENTAL (Conditional Forms and Instant Quoter
   ========================================================================== */
/* --- T.2 CONDITIONAL LOGIC FORM (Store Request) --- */
/* All rules scoped to #es-store-form-wrap to avoid BigCommerce theme cascade conflicts */
#es-store-form-wrap *, #es-store-form-wrap *::before, #es-store-form-wrap *::after {
  box-sizing: border-box !important; }

#es-store-form-wrap {
  font-family: 'Figtree', Arial, sans-serif !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 16px 48px !important;
  color: #fff !important;
  background: transparent !important; }

#es-store-form-wrap .esf-section {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  padding: 28px 32px !important;
  margin-bottom: 16px !important; }

#es-store-form-wrap .esf-hidden {
  display: none !important; }

#es-store-form-wrap .esf-reveal {
  animation: esfReveal .35s ease forwards !important; }

@keyframes esfReveal {
  from {
    opacity: 0;
    transform: translateY(-8px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

/* Section headers */
#es-store-form-wrap .esf-section-num {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: #8cc640 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 4px !important;
  display: block !important; }

#es-store-form-wrap .esf-section-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.01em !important;
  margin: 0 0 6px !important;
  color: #fff !important;
  line-height: 1.2 !important; }

#es-store-form-wrap .esf-section-sub {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.5 !important;
  margin: 0 0 20px !important; }

/* Inputs, selects, textareas */
#es-store-form-wrap input[type="text"], #es-store-form-wrap input[type="email"], #es-store-form-wrap input[type="tel"], #es-store-form-wrap input[type="password"], #es-store-form-wrap select, #es-store-form-wrap textarea {
  width: 100% !important;
  display: block !important;
  margin-bottom: 14px !important;
  padding: 13px 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-family: 'Figtree', Arial, sans-serif !important;
  line-height: 1.4 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important; }

#es-store-form-wrap input[type="text"]:focus, #es-store-form-wrap input[type="email"]:focus, #es-store-form-wrap input[type="tel"]:focus, #es-store-form-wrap select:focus, #es-store-form-wrap textarea:focus {
  border-color: #8cc640 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
  box-shadow: none !important; }

#es-store-form-wrap input::placeholder, #es-store-form-wrap textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
  opacity: 1 !important; }

#es-store-form-wrap select {
  height: 50px !important;
  cursor: pointer !important; }

#es-store-form-wrap select option {
  background: #2b2b2b !important;
  color: #fff !important; }

#es-store-form-wrap textarea {
  resize: vertical !important;
  min-height: 90px !important; }

#es-store-form-wrap input[type="radio"], #es-store-form-wrap input[type="checkbox"] {
  width: auto !important;
  display: inline !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important; }

#es-store-form-wrap input.esf-error, #es-store-form-wrap select.esf-error {
  border-color: #e05c5c !important; }

/* Layout grids */
#es-store-form-wrap .esf-row-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important; }

#es-store-form-wrap .esf-radio-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 6px !important; }

#es-store-form-wrap .esf-color-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 14px !important; }

#es-store-form-wrap .esf-fund-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 6px !important; }

/* Radio cards */
#es-store-form-wrap .esf-radio-card {
  position: relative !important;
  cursor: pointer !important;
  list-style: none !important; }

#es-store-form-wrap .esf-radio-card input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important; }

#es-store-form-wrap .esf-radio-card-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: border-color .2s, background .2s !important;
  cursor: pointer !important; }

#es-store-form-wrap .esf-radio-card input:checked + .esf-radio-card-inner {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.1) !important; }

#es-store-form-wrap .esf-radio-card-inner:hover {
  border-color: rgba(140, 198, 64, 0.5) !important; }

#es-store-form-wrap .esf-radio-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #fff !important; }

#es-store-form-wrap .esf-radio-desc {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.4 !important; }

#es-store-form-wrap .esf-radio-card.esf-full {
  grid-column: 1 / -1 !important; }

#es-store-form-wrap .esf-radio-card.esf-full .esf-radio-card-inner {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important; }

/* Color checkboxes */
#es-store-form-wrap .esf-color-check {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 4px !important;
  transition: border-color .2s, background .2s !important;
  user-select: none !important;
  background: transparent !important; }

#es-store-form-wrap .esf-color-check:hover {
  border-color: rgba(140, 198, 64, 0.4) !important; }

#es-store-form-wrap .esf-color-check input[type="checkbox"] {
  accent-color: #8cc640 !important;
  width: 15px !important;
  height: 15px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important; }

#es-store-form-wrap .esf-color-check:has(input:checked) {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.08) !important;
  color: #fff !important; }

/* Logo options */
#es-store-form-wrap .esf-logo-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 6px !important; }

#es-store-form-wrap .esf-logo-option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  background: transparent !important; }

#es-store-form-wrap .esf-logo-option:hover {
  border-color: rgba(140, 198, 64, 0.4) !important; }

#es-store-form-wrap .esf-logo-option:has(input:checked) {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.08) !important; }

#es-store-form-wrap .esf-logo-option input[type="radio"] {
  margin-top: 2px !important;
  accent-color: #8cc640 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important; }

#es-store-form-wrap .esf-logo-option-text strong {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important; }

#es-store-form-wrap .esf-logo-option-text span {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  line-height: 1.4 !important; }

/* Fundraising options */
#es-store-form-wrap .esf-fund-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color .2s, background .2s !important;
  position: relative !important;
  background: transparent !important; }

#es-store-form-wrap .esf-fund-option:hover {
  border-color: rgba(140, 198, 64, 0.4) !important; }

#es-store-form-wrap .esf-fund-option:has(input:checked) {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.1) !important; }

#es-store-form-wrap .esf-fund-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important; }

#es-store-form-wrap .esf-fund-icon {
  font-size: 26px !important;
  line-height: 1 !important; }

#es-store-form-wrap .esf-fund-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: #fff !important;
  line-height: 1.3 !important; }

/* Payment methods */
#es-store-form-wrap .esf-pay-methods {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 6px !important; }

#es-store-form-wrap .esf-pay-method {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  transition: border-color .2s, background .2s !important;
  background: transparent !important; }

#es-store-form-wrap .esf-pay-method:hover {
  border-color: rgba(140, 198, 64, 0.4) !important; }

#es-store-form-wrap .esf-pay-method:has(input:checked) {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.08) !important; }

#es-store-form-wrap .esf-pay-method input[type="radio"] {
  accent-color: #8cc640 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important; }

#es-store-form-wrap .esf-pay-method-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important; }

#es-store-form-wrap .esf-pay-method-sub {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 1px !important; }

/* Agreement checkbox */
#es-store-form-wrap .esf-agree-wrap {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 5px !important;
  margin-bottom: 6px !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  background: transparent !important; }

#es-store-form-wrap .esf-agree-wrap:has(input:checked) {
  border-color: #8cc640 !important;
  background: rgba(140, 198, 64, 0.06) !important; }

#es-store-form-wrap .esf-agree-wrap input[type="checkbox"] {
  margin-top: 3px !important;
  accent-color: #8cc640 !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  position: relative !important;
  width: 16px !important;
  height: 16px !important; }

#es-store-form-wrap .esf-agree-text {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.5 !important; }

#es-store-form-wrap .esf-agree-text a {
  color: #8cc640 !important; }

/* Submit, feedback, progress */
#esf-submit-btn {
  width: 100% !important;
  padding: 18px !important;
  background: #8cc640 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background .2s, transform .1s !important;
  margin-top: 4px !important;
  box-shadow: none !important;
  font-family: 'Figtree', Arial, sans-serif !important;
  display: block !important; }

#esf-submit-btn:hover {
  background: #7ab535 !important; }

#esf-submit-btn:active {
  transform: scale(0.98) !important; }

#esf-submit-btn:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important; }

#esf-feedback {
  margin-top: 14px !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important; }

#esf-progress-wrap {
  height: 4px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 2px !important;
  margin-bottom: 28px !important;
  overflow: hidden !important; }

#esf-progress-bar {
  height: 100% !important;
  background: #8cc640 !important;
  border-radius: 2px !important;
  transition: width .4s ease !important;
  width: 10% !important; }

/* Responsive */
@media (max-width: 560px) {
  #es-store-form-wrap .esf-row-2 {
    grid-template-columns: 1fr !important; }
  #es-store-form-wrap .esf-radio-grid {
    grid-template-columns: 1fr !important; } }

@media (max-width: 500px) {
  #es-store-form-wrap .esf-fund-grid {
    grid-template-columns: 1fr 1fr !important; } }

/* --- T.3 INSTANT QUOTER V2 (eq2-) --- */
/* Prefixed eq2- - safe alongside any future V1 eq- classes */
.eq2-wrap * {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

.eq2-wrap {
  font-family: 'Barlow', 'Figtree', Arial, sans-serif;
  max-width: 580px;
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-top: 4px solid #e85d04;
  margin: 28px 0;
  color: #f0f0f0;
  overflow: hidden;
  position: relative; }

/* Progress bar */
.eq2-progress {
  display: flex;
  align-items: center;
  padding: 16px 24px 14px;
  background: #161616;
  border-bottom: 1px solid #2a2a2a; }

.eq2-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0; }

.eq2-progress-step span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #555;
  font-weight: 600;
  transition: color 0.25s;
  white-space: nowrap; }

.eq2-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 2px solid #333;
  transition: all 0.25s; }

.eq2-progress-line {
  flex: 1;
  height: 2px;
  background: #2a2a2a;
  margin: 0 6px;
  margin-bottom: 14px;
  transition: background 0.3s; }

.eq2-step-dot-active .eq2-step-dot {
  background: #e85d04;
  border-color: #e85d04;
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.2); }

.eq2-step-dot-active span {
  color: #e85d04; }

.eq2-step-dot-done .eq2-step-dot {
  background: #4caf50;
  border-color: #4caf50; }

.eq2-step-dot-done span {
  color: #4caf50; }

.eq2-progress-line-done {
  background: #4caf50 !important; }

/* Header */
.eq2-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #1e1e1e; }

.eq2-header-icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0; }

.eq2-title {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-size: 21px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1; }

.eq2-subtitle {
  font-size: 11px;
  color: #666;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.08em; }

/* SKU pill */
.eq2-sku-pill {
  background: #1a1a1a;
  border-left: 3px solid #e85d04;
  padding: 10px 16px;
  margin: 0 24px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; }

.eq2-sku-inner {
  display: flex;
  align-items: center;
  gap: 8px; }

.eq2-sku-badge {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  background: #242424;
  padding: 2px 7px;
  border-radius: 3px; }

.eq2-sku-code {
  font-family: 'Barlow Condensed', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #e85d04;
  letter-spacing: 0.05em; }

.eq2-product-name {
  font-size: 12px;
  color: #888;
  margin-left: auto;
  text-align: right;
  line-height: 1.3; }

/* Loading */
.eq2-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px;
  color: #666;
  font-size: 13px; }

.eq2-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #2a2a2a;
  border-top-color: #e85d04;
  border-radius: 50%;
  animation: eq2spin 0.7s linear infinite;
  flex-shrink: 0; }

@keyframes eq2spin {
  to {
    transform: rotate(360deg); } }

/* Not-in-catalog state */
.eq2-not-in-catalog {
  padding: 20px 24px 24px;
  background: #141414;
  border-left: 3px solid #ff9800; }

.eq2-nic-icon {
  font-size: 28px;
  margin-bottom: 10px;
  display: block; }

.eq2-nic-text {
  font-size: 14px;
  color: #aaa;
  line-height: 1.5;
  margin-bottom: 4px; }

.eq2-nic-text strong {
  color: #f0f0f0;
  display: block;
  margin-bottom: 3px;
  font-size: 15px; }

.eq2-nic-btn {
  width: 100%;
  background: #e85d04;
  color: #ffffff;
  border: none;
  padding: 13px;
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.2s; }

.eq2-nic-btn:hover {
  background: #ff6a0f; }

.eq2-nic-btn:disabled {
  background: #2a2a2a;
  color: #444;
  cursor: not-allowed; }

/* Step shell */
.eq2-step {
  padding: 20px 24px 24px;
  animation: eq2fadeIn 0.22s ease; }

@keyframes eq2fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.eq2-step-back {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  margin-bottom: 14px;
  display: inline-block;
  transition: color 0.15s; }

.eq2-step-back:hover {
  color: #e85d04; }

.eq2-step-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #f0f0f0;
  font-weight: 600;
  flex-wrap: wrap; }

.eq2-step-num {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #e85d04;
  line-height: 1;
  flex-shrink: 0; }

.eq2-optional {
  font-size: 11px;
  color: #555;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.eq2-optional-inline {
  display: block;
  width: 100%;
  margin-top: 2px; }

.eq2-optional-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle; }

/* Quantity grid */
.eq2-qty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px; }

.eq2-qty-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  font-family: 'Barlow', Arial, sans-serif; }

.eq2-qty-btn:hover {
  border-color: #555;
  color: #f0f0f0;
  background: #222; }

.eq2-qty-btn.eq2-qty-selected {
  border-color: #e85d04;
  background: #1f1008;
  color: #e85d04;
  font-weight: 700; }

.eq2-qty-btn.eq2-qty-notSure {
  border-style: dashed;
  color: #555; }

.eq2-qty-btn.eq2-qty-notSure.eq2-qty-selected {
  border-style: solid;
  color: #e85d04; }

/* Price preview */
.eq2-price-preview {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-top: 2px solid #e85d04;
  padding: 14px 16px;
  margin-bottom: 0;
  text-align: center; }

.eq2-price-preview-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 6px; }

.eq2-price-preview-value {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: #e85d04;
  line-height: 1;
  margin-bottom: 4px; }

.eq2-price-preview-note {
  font-size: 10px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

/* Garment large view */
.eq2-tee-large {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 260 / 290;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  margin: 0 auto 16px;
  overflow: visible; }

.eq2-tee-svg {
  width: 100%;
  height: 100%;
  display: block; }

/* Hotspots */
.eq2-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  z-index: 10;
  display: none; }

.eq2-hotspot.eq2-hs-visible {
  display: block; }

.eq2-hotspot-dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e85d04;
  border: 2px solid #0f0f0f;
  box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.25);
  transition: all 0.2s;
  animation: eq2pulse 2s ease-in-out infinite; }

@keyframes eq2pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(232, 93, 4, 0.25); }
  50% {
    box-shadow: 0 0 0 7px rgba(232, 93, 4, 0.08); } }

.eq2-hotspot-tip {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #f0f0f0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  white-space: nowrap;
  border-radius: 3px;
  border: 1px solid #333;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 20; }

.eq2-hotspot:hover .eq2-hotspot-tip, .eq2-hotspot:focus .eq2-hotspot-tip {
  opacity: 1; }

.eq2-hotspot.eq2-hs-selected .eq2-hotspot-dot {
  background: #4caf50;
  border-color: #0f0f0f;
  box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.35);
  animation: none; }

.eq2-hotspot.eq2-hs-unavailable .eq2-hotspot-dot {
  background: #333;
  border-color: #2a2a2a;
  box-shadow: none;
  animation: none;
  cursor: not-allowed; }

/* Selected placements chip list */
.eq2-selected-list {
  background: #141414;
  border: 1px solid #2a4a2a;
  border-left: 3px solid #4caf50;
  padding: 10px 14px;
  margin-bottom: 16px; }

.eq2-selected-list-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #4caf50;
  margin-bottom: 8px;
  font-weight: 700; }

.eq2-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; }

.eq2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  color: #a5d6a7;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 3px; }

.eq2-chip-remove {
  background: none;
  border: none;
  color: #555;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s; }

.eq2-chip-remove:hover {
  color: #e85d04; }

/* Step action rows */
.eq2-step2-actions {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px; }

/* Drop zone */
.eq2-drop-zone {
  position: relative;
  border: 2px dashed #2a2a2a;
  background: #141414;
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 14px;
  border-radius: 2px; }

.eq2-drop-zone:hover, .eq2-drop-zone.eq2-drag-over {
  border-color: #e85d04;
  background: #1a1208; }

.eq2-drop-icon {
  font-size: 28px;
  color: #444;
  margin-bottom: 8px;
  display: block;
  font-weight: 700; }

.eq2-drop-main {
  font-size: 14px;
  color: #aaa;
  font-weight: 600;
  margin-bottom: 4px; }

.eq2-drop-sub {
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.eq2-file-chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a2a1a;
  border: 1px solid #2a4a2a;
  border-left: 3px solid #4caf50;
  padding: 10px 14px;
  margin-bottom: 14px; }

.eq2-file-icon {
  font-size: 18px;
  flex-shrink: 0; }

.eq2-file-name {
  font-size: 13px;
  color: #a5d6a7;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.eq2-logo-hint {
  font-size: 12px;
  color: #555;
  line-height: 1.5;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: #141414;
  border-left: 2px solid #333; }

.eq2-logo-hint strong {
  color: #888; }

/* Summary card */
.eq2-summary-card {
  background: #141414;
  border: 1px solid #2a2a2a;
  padding: 14px 16px;
  margin-bottom: 18px; }

.eq2-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid #1e1e1e;
  gap: 12px; }

.eq2-summary-row:last-child {
  border-bottom: none; }

.eq2-summary-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
  flex-shrink: 0; }

.eq2-summary-val {
  font-size: 13px;
  color: #f0f0f0;
  font-weight: 600;
  text-align: right; }

/* Fields and inputs */
.eq2-field {
  margin-bottom: 14px; }

.eq2-field-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 6px;
  font-weight: 700; }

.eq2-input {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #333;
  color: #f0f0f0;
  padding: 12px 14px;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 15px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.2s; }

.eq2-input:focus {
  border-color: #e85d04; }

.eq2-input::placeholder {
  color: #444; }

/* Buttons */
.eq2-next-btn {
  flex: 2;
  background: #e85d04;
  color: #ffffff;
  border: none;
  padding: 14px;
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap; }

.eq2-next-btn:hover {
  background: #ff6a0f; }

.eq2-next-btn:disabled {
  background: #2a2a2a;
  color: #444;
  cursor: not-allowed; }

#eq2-step1-next {
  width: 100%;
  flex: none;
  margin-top: 16px; }

.eq2-skip-btn {
  flex: 1;
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #666;
  padding: 13px 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Barlow', Arial, sans-serif;
  white-space: nowrap; }

.eq2-skip-btn:hover {
  border-color: #555;
  color: #aaa; }

.eq2-submit {
  width: 100%;
  background: #e85d04;
  color: #fff;
  border: none;
  padding: 15px;
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 10px; }

.eq2-submit:hover {
  background: #ff6a0f; }

.eq2-submit:disabled {
  background: #2a2a2a;
  color: #444;
  cursor: not-allowed; }

.eq2-clear-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #555;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.15s; }

.eq2-clear-btn:hover {
  color: #e85d04; }

.eq2-privacy-note {
  font-size: 11px;
  color: #444;
  text-align: center;
  line-height: 1.4; }

/* Status messages */
.eq2-status {
  display: none;
  padding: 12px 24px;
  font-size: 13px;
  border-left: 3px solid #e85d04;
  background: #1a1a1a;
  line-height: 1.5; }

.eq2-status.eq2-success {
  border-color: #4caf50;
  color: #a5d6a7;
  display: block; }

.eq2-status.eq2-error {
  border-color: #f44336;
  color: #ef9a9a;
  display: block; }

.eq2-status.eq2-loading {
  border-color: #e85d04;
  color: #888;
  display: block; }

/* Logo choice grid */
.eq2-logo-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px; }

.eq2-logo-choice-btn {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-left: 3px solid transparent;
  padding: 18px 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%; }

.eq2-logo-choice-btn:hover {
  border-color: #555;
  background: #222; }

.eq2-logo-choice-btn.eq2-logo-selected {
  border-color: #e85d04;
  border-left-color: #e85d04;
  background: #1f1008; }

.eq2-logo-choice-icon {
  font-size: 20px;
  line-height: 1;
  color: #555;
  transition: color 0.15s; }

.eq2-logo-choice-btn.eq2-logo-selected .eq2-logo-choice-icon {
  color: #e85d04; }

.eq2-logo-choice-label {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f0f0f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block; }

.eq2-logo-choice-sub {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
  display: block; }

.eq2-logo-choice-btn.eq2-logo-selected .eq2-logo-choice-sub {
  color: #aaa; }

/* Price estimate block */
.eq2-price-estimate {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-top: 3px solid #e85d04;
  padding: 16px;
  margin-bottom: 18px; }

.eq2-price-estimate-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #666;
  margin-bottom: 12px;
  font-weight: 700; }

.eq2-est-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #2a2a2a; }

.eq2-est-total-label {
  font-size: 13px;
  color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em; }

.eq2-est-total-price {
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #e85d04;
  line-height: 1; }

.eq2-est-breakdown {
  display: flex;
  flex-direction: column;
  gap: 5px; }

.eq2-est-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: #888;
  gap: 12px; }

.eq2-est-line span:last-child {
  color: #aaa;
  font-weight: 600;
  text-align: right;
  flex-shrink: 0; }

.eq2-est-muted {
  opacity: 0.5; }

.eq2-price-estimate-note {
  font-size: 10px;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 12px;
  line-height: 1.5; }

/* Responsive */
@media (max-width: 480px) {
  .eq2-wrap {
    margin: 16px 0; }
  .eq2-header {
    padding: 18px 16px 14px; }
  .eq2-title {
    font-size: 18px; }
  .eq2-sku-pill {
    margin: 0 16px 14px; }
  .eq2-step {
    padding: 16px 16px 20px; }
  .eq2-not-in-catalog {
    padding: 16px; }
  .eq2-qty-grid {
    grid-template-columns: repeat(2, 1fr); }
  .eq2-tee-large {
    max-width: 100%; }
  .eq2-step2-actions {
    flex-direction: column; }
  .eq2-skip-btn {
    width: 100%;
    flex: none; }
  .eq2-next-btn {
    flex: none;
    width: 100%; }
  .eq2-progress {
    padding: 12px 12px 10px; }
  .eq2-progress-line {
    margin: 0 3px;
    margin-bottom: 14px; }
  .eq2-progress-step span {
    font-size: 8px; }
  .eq2-logo-choice-grid {
    grid-template-columns: 1fr; } }