@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: #333333;
  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: "Karla", Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.5; }

a {
  color: #333333;
  line-height: inherit;
  text-decoration: underline; }
  a:hover, a:focus {
    color: #757575; }

p {
  margin-bottom: 1.5rem; }

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

h1 {
  font-size: 28px; }

h2 {
  font-size: 25px; }

h3 {
  font-size: 22px; }

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 #cccccc;
  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 #cccccc;
  color: #333333;
  cursor: help;
  font-size: 90%;
  text-transform: uppercase; }

abbr {
  text-transform: none; }

blockquote { }

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

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

.icon {
  height: 1.14286rem;
  width: 1.14286rem;
  display: inline-block;
  vertical-align: middle; }
  .icon svg {
    display: inline-block;
    fill: #ec008c;
    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 #cccccc;
  margin-bottom: 2rem;
  table-layout: auto;
  width: 100%; }
  .table thead {
    background: white; }
    .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 #cccccc; }

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

.table-tbody tr {
  border-bottom: 1px solid #cccccc; }
  .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: 1px;
  cursor: pointer;
  font-family: "Montserrat", 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: transparent;
  border-color: #8f8f8f;
  color: #666666;
  font-size: 1rem;
  padding: 0.85714rem 2.28571rem;
  border-radius: 4px;
  outline: none;
  vertical-align: middle; }
  .button:hover, .button:focus, .button.is-active, .button.active {
    background-color: transparent;
    border-color: #474747;
    color: #333333; }
  .button:active {
    background-color: transparent;
    border: 1px solid #757575;
    color: black; }
  .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: #ec008c;
  border-color: #ec008c;
  color: white; }
  .button--primary:hover, .button--primary:focus, .button--primary.is-active, .button--primary.active {
    background-color: #666666;
    border-color: #666666;
    color: white; }
  .button--primary:active {
    background-color: black;
    border: 1px solid black;
    color: white; }

.button[disabled] {
  background-color: #cccccc;
  border-color: rgba(0, 0, 255, 0);
  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: #757575; }

/*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: 4px;
      border-top-left-radius: 4px; }
    .buttonGroup > .button:last-child {
      border-bottom-right-radius: 4px;
      border-right-width: 1px;
      border-top-right-radius: 4px; }

/*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: #e5e5e5;
  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: #e5e5e5;
  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: #666666;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.5rem; }
  .form-label small {
    color: #757575;
    font-size: 0.71429rem;
    text-transform: uppercase;
    vertical-align: bottom; }

.form-input {
  appearance: none;
  background-color: white;
  border-color: #8f8f8f;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #666666;
  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: #999999;
    cursor: not-allowed; }
  .form-input[readonly] {
    background-color: #e5e5e5;
    border-color: #999999;
    color: #757575;
    cursor: text; }
  .form-input:focus {
    border-color: #474747;
    outline: none; }
  .form-input[rows] {
    height: auto; }
  .form-input[type="search"] {
    box-sizing: border-box; }
  .form-input::-webkit-input-placeholder {
    color: #999999; }
  .form-input::-ms-clear {
    height: 0;
    width: 0; }
  .form-input::-moz-placeholder {
    color: #999999; }
  .form-input:-ms-input-placeholder {
    color: #999999; }

/*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: #8f8f8f;
  color: #666666;
  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: 4px; }
  .form-select:focus {
    border-color: #474747; }
  .form-select:disabled {
    background-color: white;
    cursor: not-allowed; }
  .form-select:focus {
    border-color: #474747; }

/*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: 4px; }

.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: #757575;
    box-shadow: 0 0 4px rgba(117, 117, 117, 0.4); }

.switch-toggle {
  background-color: #757575;
  border: 1px solid #757575;
  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: #e5e5e5;
    border-color: #999999;
    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: #757575; }

.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: #757575; }

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

.switch-description--on {
  color: #757575;
  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: white;
  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: white; }
  .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: #757575;
  float: left;
  font-size: 13px;
  line-height: 13px;
  margin: 0;
  line-height: 1.5; }
  .breadcrumb a {
    color: #757575; }
  .breadcrumb.current {
    color: #757575;
    cursor: default; }
    .breadcrumb.current a {
      color: #757575;
      cursor: default; }
    .breadcrumb.current:hover, .breadcrumb.current:hover a, .breadcrumb.current:focus, .breadcrumb.current:focus a {
      text-decoration: none; }
  .breadcrumb.unavailable {
    color: #999999; }
    .breadcrumb.unavailable a {
      color: #999999; }
    .breadcrumb.unavailable:hover,
    .breadcrumb.unavailable:hover a, .breadcrumb.unavailable:focus,
    .breadcrumb.unavailable a:focus {
      color: #999999;
      cursor: not-allowed;
      text-decoration: none; }
  .breadcrumb:before {
    color: #757575;
    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: #333333;
    text-decoration: none; }
  .breadcrumb.is-active > .breadcrumb-label {
    color: #757575;
    cursor: default; }
  .breadcrumb.is-unavailable > .breadcrumb-label {
    color: #999999;
    cursor: default; }

.tabs {
  border-bottom: 1px solid #cccccc;
  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: #757575;
  display: block;
  font-size: 15px;
  padding: 0.78571rem 1.57143rem; }
  .tab-title:hover {
    color: #333333; }

.tab.is-active .tab-title {
  color: #333333;
  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: #333333;
  font-size: 15px;
  padding: 0.21429rem 0; }

.pagination-list {
  display: block;
  margin-left: 0; }
  .pagination-list li {
    color: #757575;
    font-size: 1rem;
    margin-left: 0.35714rem; }
    .pagination-list li a, .pagination-list li button {
      border-radius: 4px;
      transition: background-color 300ms ease-out;
      background: none;
      color: #757575;
      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: #333333; }

li.pagination-item--current a, li.pagination-item--current button {
  color: #333333;
  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: #e5e5e5;
  border-color: #e5e5e5;
  color: white; }
  .alertBox .icon {
    height: 1.42857rem;
    width: 1.42857rem; }
  .alertBox .button {
    margin: 0 0 0 0.78571rem; }

.alertBox--info {
  background-color: #666666;
  border-color: #666666;
  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: #cccccc 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: #cccccc solid;
  border-width: 1px 0;
  cursor: pointer; }
  .accordion-navigation.is-open > a {
    background: white;
    color: black; }
  .accordion-navigation > a {
    background: white;
    color: #333333;
    padding: 1.85714rem;
    display: block;
    font-family: "Karla", Arial, Helvetica, sans-serif;
    font-size: 1rem; }
    .accordion-navigation > a:hover {
      background: white; }
  .accordion-navigation .accordion-title {
    padding: 1.5rem 1.85714rem; }

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

.accordion-content {
  display: none;
  padding: 2rem;
  border: #cccccc 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 #cccccc;
  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 #cccccc;
  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 #cccccc;
  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: #666666;
  cursor: pointer;
  font-size: 25px;
  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: #666666;
  border-radius: 4px;
  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: #757575; }

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

.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: #757575; }

.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: #8f8f8f;
    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: #333333;
        opacity: 0.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
    .slick-dots li.slick-active button:before {
      color: #757575;
      opacity: 1; }

.slick-next,
.slick-prev {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px 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: white;
    background-color: rgba(255, 255, 255, 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='%238f8f8f' 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='%238f8f8f' 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 #333333;
      display: inline-block;
      margin: 0;
      padding: 0;
      position: relative;
      text-align: center;
      vertical-align: middle; }
      .slick-dots li button:hover::before {
        background: #333333; }
    .slick-dots li button::before {
      display: block;
      left: -1px;
      top: -1px;
      transition: background 100ms ease-out; }
    .slick-dots li.slick-active button::before {
      background: #757575; }

.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%; }

.slick-slide .card-image,
.slick-slide .heroCarousel-image {
  -webkit-touch-callout: default; }

.carousel-tooltip {
  display: none;
  height: 1px;
  margin-top: 10px;
  position: relative; }
  .carousel-tooltip::before {
    border-color: transparent transparent #313440;
    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; } }

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: #999999;
  margin-top: 0.78571rem; }

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  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 3rem;
  text-align: center; }

h1 {
  font-size: 28px; }

h2 {
  font-size: 25px; }

h3 {
  font-size: 22px; }

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: #757575;
  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: 4px;
  padding: 0.75rem 3rem 0.75rem 1rem; }

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

.form-label--inlineSmall small {
  color: #757575;
  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 #cccccc; }
  .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: #cccccc;
  border-width: 0 0 1px; }
  .table--line .table-thead {
    background-color: white;
    border-color: #cccccc;
    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 #cccccc; }
    .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; }
  @media (min-width: 551px) {
    .form-wishlist {
      float: left;
      padding: 0 0.71429rem;
      width: 50%; } }
  @media (min-width: 801px) {
    .form-wishlist {
      padding: 0;
      width: auto; } }
  @media (min-width: 1261px) {
    .form-wishlist {
      display: inline-block;
      margin-top: 1rem; } }
  .form-wishlist .button {
    width: 100%; }
    @media (min-width: 801px) {
      .form-wishlist .button {
        width: auto; } }
    @media (min-width: 1261px) {
      .form-wishlist .button {
        margin-right: 0.78571rem; } }

.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: 22px;
  text-align: center; }
  @media (min-width: 801px) {
    .modal-header-title {
      font-size: 25px; } }

.modal-close {
  height: 2.28571rem;
  width: 2.28571rem;
  color: #ec008c;
  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;
    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: #999999; }
  .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: "Karla", Arial, Helvetica, sans-serif;
  padding: 40px 20px 20px;
  text-align: center; }
  .modal--alert .alert-icon {
    border: 0.25em solid transparent;
    border-radius: 50%;
    box-sizing: content-box;
    cursor: default;
    display: flex;
    font-family: inherit;
    height: 5em;
    justify-content: center;
    line-height: 5em;
    margin: 1.25em auto 1.875em;
    position: relative;
    user-select: none;
    width: 5em; }
  .modal--alert .error-icon {
    animation: animate-icon 0.5s;
    border-color: #f27474;
    color: #f27474; }
    .modal--alert .error-icon .icon-content {
      animation: animate-icon-content 0.5s;
      flex-grow: 1;
      position: relative; }
      .modal--alert .error-icon .icon-content .line {
        background-color: #f27474;
        border-radius: 0.125em;
        display: block;
        height: 0.3125em;
        position: absolute;
        top: 2.3125em;
        width: 2.9375em; }
        .modal--alert .error-icon .icon-content .line-left {
          left: 1.0625em;
          transform: rotate(45deg); }
        .modal--alert .error-icon .icon-content .line-right {
          right: 1em;
          transform: rotate(-45deg); }
  .modal--alert .warning-icon {
    animation: animate-icon 0.5s;
    border-color: #facea8;
    color: #f8bb86; }
    .modal--alert .warning-icon .icon-content {
      align-items: center;
      animation: animate-icon-content 0.5s;
      display: flex;
      font-size: 3.75em; }
  .modal--alert .modal-content {
    color: #333333;
    font-size: 1.14286rem; }
  .modal--alert .button-container {
    margin: 25px 0 0; }
    .modal--alert .button-container .confirm {
      background-color: #ec008c;
      border-color: #ec008c;
      color: white; }
    .modal--alert .button-container .confirm:focus,
    .modal--alert .button-container .confirm:hover {
      background-color: #666666;
      border-color: #666666;
      color: white; }
    .modal--alert .button-container .confirm:active {
      background-color: black;
      border-color: black;
      color: white; }

.hide-content {
  opacity: 0; }

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

@keyframes animate-icon-content {
  0% {
    margin-top: 1.625em;
    opacity: 0;
    transform: scale(0.4); }
  50% {
    margin-top: 1.625em;
    opacity: 0;
    transform: scale(0.4); }
  80% {
    margin-top: -0.375em;
    transform: scale(1.15); }
  100% {
    margin-top: 0;
    opacity: 1;
    transform: scale(1); } }

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 #757575;
    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; }
  .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: #333333; }
  .pagination-item.pagination-item--current {
    border-color: #cccccc;
    border-radius: 4px;
    margin: 0 0.35714rem 0 0.78571rem; }
  .pagination-item.pagination-item--previous > a, .pagination-item.pagination-item--next > a {
    color: #333333; }
    .pagination-item.pagination-item--previous > a:hover, .pagination-item.pagination-item--next > a:hover {
      color: #757575; }
      .pagination-item.pagination-item--previous > a:hover .icon > svg, .pagination-item.pagination-item--next > a:hover .icon > svg {
        fill: #757575; }

.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: #757575;
    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: #757575; }

.tab {
  border-top: 1px solid #cccccc;
  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 #cccccc;
        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: 4px;
  box-shadow: none; }
  .accordion .navList {
    margin-bottom: 0; }

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

.accordion-title {
  color: #444444;
  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-heading {
  font-size: 1rem;
  line-height: 19px;
  margin: 0; }

.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: #999999; }

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

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

.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: #757575;
  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: #333333; }

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: "Montserrat", 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: #999999;
  font-size: 13px; }

.form-field-group {
  border: 1px solid #8f8f8f;
  border-radius: 4px;
  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: #666666; }

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

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

@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 #8f8f8f;
  color: #666666;
  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: #474747; }
  .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;
  overflow: hidden;
  padding: 3px;
  position: relative; }
  .card-figure:hover .card-figcaption {
    opacity: 1; }
  .card-figure__link {
    display: block;
    position: relative; }

.card-img-container {
  max-width: 500px; }
  .card-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 131.8%;
    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: #333333;
    display: block;
    text-decoration: none; }
    .card-title > a:hover {
      color: #757575; }

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

.card-figcaption-button {
  border: none;
  display: block;
  margin: 0.35714rem 0 0; }
  .card-figcaption-button:active {
    background-color: white;
    border: none; }
  .card-figcaption-body .card-figcaption-button:focus {
    background-color: white;
    outline: revert; }
  .card-figcaption-button + .card-figcaption-button {
    margin: 0.35714rem 0 0; }

.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: #757575; }
    .card--alternate:hover .card-body {
      background-color: #757575; }
      .card--alternate:hover .card-body .card-text {
        color: white; }
    .card--alternate:hover .card-title > a {
      color: white; }

.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: 4px; }
  .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: white;
  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: #333333; }
  .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 #333333; } }
    .navBar--sub .navBar-item.is-active > .navBar-action {
      color: #666666; }
    @media (min-width: 801px) {
      .navBar--sub .navBar-item.navBar-item--separate {
        border-left: 1px solid #757575;
        margin: 0;
        padding-left: 0.78571rem; } }
  .navBar--sub .navBar-action {
    color: #757575;
    font-size: 1rem;
    padding: 0; }
    .navBar--sub .navBar-action:hover {
      color: #333333; }

.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 #8f8f8f;
  border-radius: 4px; }
  .actionBar-section .form-field:hover {
    border-color: #474747; }

.actionBar-section .form-label {
  color: #757575;
  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: #333333;
  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 {
      padding: 0 1.5rem;
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      z-index: 50; } }
  .navUser .dropdown-menu {
    background-color: white;
    border: 1px solid #cccccc;
    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 #cccccc 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 white transparent;
      border-bottom-style: solid;
      bottom: 100%;
      left: 0.92857rem;
      position: absolute; }

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

.navUser-action {
  color: black;
  font-weight: 700;
  padding: 1rem 0.78571rem;
  text-decoration: none;
  text-transform: uppercase; }
  .navUser-action:hover, .navUser-action.is-open {
    color: #757575; }
    .navUser-action:hover svg, .navUser-action.is-open svg {
      fill: #757575;
      stroke: #757575; }
  .navUser-action .icon {
    height: 0.57143rem;
    width: 0.57143rem;
    margin: -1px 0 0 0.21429rem; }
  .navUser-action svg {
    fill: black;
    stroke: black;
    transition: all 0.15s ease; }

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

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

.navUser-action--currencySelector + .dropdown-menu [data-locale-code],
.navUser-action--languageSelector + .dropdown-menu [data-locale-code],
.navUser-action--channelSelector + .dropdown-menu [data-locale-code] {
  text-transform: capitalize; }

.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 #cccccc;
  color: #757575;
  display: inline-block;
  padding: 0 1.42857rem 0 0;
  text-decoration: none; }

.navUser-item {
  display: none; }
  @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: black; }
    .navUser-item--cart .navUser-action:hover, .navUser-item--cart .navUser-action.is-open {
      color: #757575; }
  .navUser-item--cart .dropdown-menu {
    max-width: 22.85714rem; }
    .navUser-item--cart .dropdown-menu.is-open {
      left: auto !important;
      right: 0.35714rem;
      top: auto !important; }
      @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: black;
  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 #e5e5e5 transparent;
    border-bottom-style: solid;
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%); }

.dropdown--quickSearch {
  background-color: #e5e5e5;
  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: #333333;
  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: #cccccc;
  color: #333333; }

.navPages .navPage-subMenu-list, .navPage-childList {
  border-left: 1px solid #cccccc;
  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; }

.navPages {
  background-color: #e5e5e5;
  height: 100%;
  overflow-y: auto;
  padding: 1.5rem; }
  @media (min-width: 801px) {
    .navPages {
      margin: 0 auto;
      max-width: 85.71429rem;
      width: 100%;
      background: none;
      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 + .navPages-list {
    border-top: 1px solid #cccccc;
    margin-top: 0.78571rem;
    padding-top: 0.78571rem; }

.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 #cccccc;
  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;
    transform: rotate(90deg);
    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: #333333;
  display: block;
  font-size: 15px;
  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: #e5e5e5; } }
  .navPages-list:not(.navPages-list-depth-max) .navPages-action.has-subMenu {
    align-items: center;
    display: flex;
    justify-content: space-between; }
  .navPages-action.is-open svg,
  .navPages-action .collapsible-icon-wrapper.is-open svg {
    fill: #757575;
    stroke: #757575; }
  .navPages-action:hover, .navPages-action.activePage {
    color: #757575; }
    .navPages-action:hover svg, .navPages-action.activePage svg {
      fill: #757575;
      stroke: #757575; }
  .navPages-action svg {
    fill: #333333;
    stroke: #333333;
    transition: all 0.15s ease; }

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

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

.navPages-action-moreIcon {
  height: 0.57143rem;
  width: 0.57143rem;
  margin-left: 0.78571rem;
  transform: rotate(-90deg); }
  @media (min-width: 801px) {
    .navPages-action-moreIcon {
      transform: none; } }
  .has-subMenu.is-open .navPages-action-moreIcon,
  .collapsible-icon-wrapper.is-open .navPages-action-moreIcon {
    transform: rotate(0); }
  .navPages-list:not(.navPages-list-depth-max) .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-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: #e5e5e5;
      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 #cccccc;
    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 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      width: 25%;
      float: left;
      padding: 0 0.75rem !important; }
      .navPage-subMenu-item .navPages-action {
        text-transform: none;
        width: 100%; }
      .navPage-subMenu-item > .navPage-subMenu-action {
        border-bottom: 1px solid #cccccc;
        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; } }
  .navPages-list:not(.navPages-list-depth-max) .navPage-subMenu-action {
    padding: 0 0 0 1.5rem; }
    @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 #cccccc;
  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 #cccccc; }
  .navPages-list--user #currencySelection2 .dropdown-menu-item {
    padding: 0; }
    .navPages-list--user #currencySelection2 .dropdown-menu-item:not(:last-child) {
      border-bottom: 1px solid #cccccc; }
  .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: #757575;
    display: inline-block;
    padding: 0.35714rem 0.5rem;
    text-decoration: none; }
    .tag a:hover {
      color: #333333; }

.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: #999999; }
    .socialLinks .icon svg {
      fill: #ec008c;
      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;
      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: #757575; }

.heroCarousel {
  margin-bottom: 4.5rem;
  margin-top: -1.5rem;
  min-width: 100%;
  width: 1px; }
  @media (min-width: 801px) {
    .heroCarousel {
      margin-top: -2.5rem; } }
  @media (min-width: 551px) {
    .heroCarousel.slick-initialized {
      max-height: 28.57143rem; } }
  @media (min-width: 801px) {
    .heroCarousel.slick-initialized {
      max-height: 42.85714rem; } }
  @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: white;
      background-color: rgba(255, 255, 255, 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: contain;
    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;
    justify-content: center;
    max-height: 100vh;
    transition: height 0.3s ease; }
    @media (min-width: 551px) {
      .heroCarousel-slide .heroCarousel-image-wrapper {
        max-height: 28.57143rem; } }
    @media (min-width: 801px) {
      .heroCarousel-slide .heroCarousel-image-wrapper {
        max-height: 42.85714rem; } }

.heroCarousel-content {
  background-color: white;
  padding: 0.78571rem 1.5rem 3rem;
  text-align: center; }
  @media (min-width: 551px) {
    .heroCarousel-content {
      background-color: white;
      background-color: rgba(255, 255, 255, 0.9);
      background-color: rgba(255, 255, 255, 0.9);
      left: 0;
      margin: 0 auto;
      max-height: 80%;
      overflow: auto;
      padding: 2.25rem;
      padding: 1.5rem;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 50rem;
      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: #444444;
  font-size: 20px;
  margin: 0; }
  @media (min-width: 801px) {
    .heroCarousel-title {
      font-size: 50px; } }

.heroCarousel-description {
  color: #333333;
  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: 1.5rem 0 0; }

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

.writeReview-productDetails .product-brand {
  color: #999999;
  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: 131.8%;
    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: #999999;
  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: #757575;
  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: 500px;
  position: relative;
  width: 100%; }
  .productView-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 131.8%;
    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;";
    margin: 0;
    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 #cccccc;
  box-sizing: content-box;
  display: flex;
  height: 67px;
  justify-content: center;
  max-width: 75px;
  padding: 2px;
  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 #cccccc;
    padding-bottom: 2rem; } }

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

.productView-title {
  font-size: 20px;
  margin: -0.78571rem 0 0.35714rem; }
  @media (min-width: 801px) {
    .productView-title {
      margin-top: 1.5rem; } }
  @media (min-width: 1261px) {
    .productView-title {
      font-size: 28px; } }

.productView-brand {
  color: #757575;
  font-size: 15px;
  margin: 0 0 0.78571rem; }
  @media (min-width: 1261px) {
    .productView-brand {
      font-size: 20px;
      margin: -0.21429rem 0 1rem; } }
  .productView-brand a {
    color: #757575; }
    .productView-brand a:hover {
      color: #333333; }

.productView-price {
  font-size: 15px;
  margin-bottom: 0.5rem; }
  @media (min-width: 801px) {
    .productView-price {
      font-size: 25px;
      margin-bottom: 1rem; } }
  .productView-price .price-section--saving {
    font-size: 15px; }
  .productView-price abbr {
    border: 0;
    color: inherit;
    font-size: inherit; }

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

.productView-backorder-availability-prompt {
  margin-left: 0.78571rem; }

.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: left; }
  @media (min-width: 551px) {
    .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: "Montserrat", 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; }
  .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 0.71429rem;
        width: 50%; } }
    @media (min-width: 801px) {
      .productView-options .add-to-cart-buttons {
        padding-right: 0.78571rem;
        width: 50%; } }
    @media (min-width: 1261px) {
      .productView-options .add-to-cart-buttons {
        display: inline-block;
        margin-top: 1rem;
        padding-right: 0.78571rem;
        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: #757575;
      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: #333333; }

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

.productOptions-list-item {
  padding: 1.5rem; }
  .productOptions-list-item + .productOptions-list-item {
    border-top: 1px solid #8f8f8f; }
  .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; }

.product-questions-content {
  padding: 1.5rem 0; }

.product-section-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: 700; }

.question {
  padding: 1.5rem 0;
  cursor: pointer;
  position: relative;
  padding-right: 2rem;
  margin: 0;
  font-size: 18px;
  font-weight: 700; }
  .question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    font-weight: 700; }
  .question.is-active {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0.5rem; }
  .question.is-active::after {
    content: "\2212"; }

.acceptedAnswer {
  display: none;
  padding: 1.5rem 0; }

#tab-shipping h3 {
  font-size: 18px;
  font-weight: 700; }

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

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

.compareTable {
  border-top: 1px solid #cccccc;
  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 #cccccc; }
  .compareTable-row + .compareTable-row .compareTable-heading:empty {
    border-top: 0; }

.compareTable-heading {
  font-family: "Montserrat", 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: white;
  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: #ec008c;
    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 #cccccc;
  margin-bottom: 2.28571rem; }
  .toggle:last-of-type {
    margin-bottom: 4.57143rem; }

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

.toggleLink {
  color: #757575; }
  .toggleLink:hover {
    color: #333333; }
  .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: #cccccc solid;
  border-radius: 4px;
  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; }

.reset-filters {
  display: none; }

.banners {
  background-color: #757575;
  color: white;
  padding: 0.78571rem 0;
  text-align: center; }
  .banners p:last-child {
    margin-bottom: 0; }
  .banners a {
    color: white; }

.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: white;
  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: #757575;
    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 #cccccc;
  display: block; }
  @media (min-width: 801px) {
    .cart-list {
      display: table-row-group; } }

.cart-item {
  border-bottom: 1px solid #cccccc;
  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-quantity .cart-item-backorder-message {
  margin-bottom: 0; }

.cart-item-label {
  color: #333333;
  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: #757575;
  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: #333333; }

.cart-remove {
  background-color: white;
  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: #ec008c; }

.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;
      clear: both;
      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 #cccccc; } }
  .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: #757575;
  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: "Montserrat", 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; } }

.cart-total-enhanced .cart-total {
  border-top: none; }

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

.cart-total-enhanced .cart-total-value {
  float: right;
  font-weight: 600; }

.cart-total-enhanced .cart-total-label, .cart-total-enhanced .cart-total-value {
  padding: 0.5rem 0; }

.cart-total-enhanced .cart-total-with-savings {
  border-top: 1px solid #cccccc; }
  .cart-total-enhanced .cart-total-with-savings .cart-total-label {
    font-size: 25px; }
  .cart-total-enhanced .cart-total-with-savings .cart-total-grandTotal {
    display: flex;
    flex-direction: column;
    text-align: right;
    font-weight: 400; }
    .cart-total-enhanced .cart-total-with-savings .cart-total-grandTotal .cart-total-amount {
      font-size: 25px;
      font-weight: 600; }
    .cart-total-enhanced .cart-total-with-savings .cart-total-grandTotal .cart-total-savings {
      font-family: "Karla", Arial, Helvetica, sans-serif;
      font-size: 15px;
      font-weight: 700;
      color: #757575;
      display: block;
      margin-top: 0.21429rem; }
    .cart-total-enhanced .cart-total-with-savings .cart-total-grandTotal .cart-savings-amount {
      color: #008a06; }

.cart-total-enhanced .cart-total-gift-certificate .cart-total-label, .cart-total-enhanced .cart-total-shipping-estimator .cart-total-label {
  display: flex;
  gap: 0.5rem; }
  .cart-total-enhanced .cart-total-gift-certificate .cart-total-label a, .cart-total-enhanced .cart-total-gift-certificate .cart-total-label button, .cart-total-enhanced .cart-total-shipping-estimator .cart-total-label a, .cart-total-enhanced .cart-total-shipping-estimator .cart-total-label button {
    color: #476bef;
    text-decoration: none;
    font-weight: 400; }
    .cart-total-enhanced .cart-total-gift-certificate .cart-total-label a:hover, .cart-total-enhanced .cart-total-gift-certificate .cart-total-label button:hover, .cart-total-enhanced .cart-total-shipping-estimator .cart-total-label a:hover, .cart-total-enhanced .cart-total-shipping-estimator .cart-total-label button:hover {
      text-decoration: underline; }

.cart-total-enhanced .cart-total-shipping-estimator .shipping-estimate-value, .cart-total-enhanced .cart-total-shipping-estimator .shipping-estimate-show {
  text-decoration: none;
  font-style: normal; }

.cart-total-enhanced .cart-total-shipping-estimator .price--discounted {
  color: #999999; }

.cart-total-enhanced .cart-total-gift-certificate .cart-gift-certificate-form .button {
  background-color: white;
  color: #333333;
  font-weight: 700; }

.cart-total-enhanced .cart-total-gift-certificate .gift-certificate-add, .cart-total-enhanced .cart-total-gift-certificate .gift-certificate-cancel {
  color: #476bef;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 400; }
  .cart-total-enhanced .cart-total-gift-certificate .gift-certificate-add:hover, .cart-total-enhanced .cart-total-gift-certificate .gift-certificate-cancel:hover {
    text-decoration: underline; }

.cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #757575;
  width: auto;
  max-width: 80%;
  flex-wrap: wrap; }
  .cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-label .icon {
    flex-shrink: 0; }
  .cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-label a {
    color: #476bef;
    text-decoration: none;
    font-weight: 400; }
    .cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-label a:hover {
      text-decoration: underline; }

.cart-total-enhanced .cart-total-gift-certificate-list-item .cart-total-value {
  float: right;
  width: auto; }

.cart-total-enhanced .shipping-estimate-value, .cart-total-enhanced .shipping-estimate-show {
  text-decoration: none; }

.cart-total-enhanced .cart-total-discounts .cart-total-label {
  cursor: pointer; }

.cart-total-enhanced .cart-total-discounts .cart-discount-icon {
  transition: transform 0.3s ease; }
  .cart-total-enhanced .cart-total-discounts .cart-discount-icon.is-open {
    transform: rotate(180deg); }
  .cart-total-enhanced .cart-total-discounts .cart-discount-icon svg {
    fill: #333333; }

.cart-total-enhanced .cart-total-discounts .cart-discount-list {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  width: 100%; }

.cart-total-enhanced .cart-total-discounts .cart-discount-item {
  display: flex;
  justify-content: space-between;
  padding: 0.21429rem 0;
  color: #757575; }
  .cart-total-enhanced .cart-total-discounts .cart-discount-item .cart-discount-item-label {
    text-align: left; }

.coupon-code-add,
.coupon-code-cancel,
.shipping-estimate-show,
.gift-certificate-add,
.gift-certificate-cancel {
  color: #757575;
  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: #333333; }

.cart-coupons {
  width: 100%;
  padding-bottom: 1rem;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 551px) {
    .cart-coupons {
      float: right;
      width: 75%; } }
  @media (min-width: 801px) {
    .cart-coupons {
      width: 58.33333%; } }
  @media (min-width: 1261px) {
    .cart-coupons {
      width: 41.66667%; } }
  .cart-coupons .coupon-form {
    margin-top: 1rem; }
    .cart-coupons .coupon-form .button {
      background-color: white;
      color: #333333;
      font-weight: 700; }

.cart-coupon-link {
  color: #476bef;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-weight: 400; }
  .cart-coupon-link:hover {
    color: #476bef;
    text-decoration: underline; }

.coupon-code-form .form-input {
  display: inline-block;
  height: 2.28571rem;
  padding: 0.5rem;
  vertical-align: top;
  width: 75%; }

.cart-coupon-display {
  margin-top: 1rem; }

.cart-coupon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-start; }

.cart-coupon-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid #e5e7eb;
  color: #333333;
  max-width: 100%;
  border-radius: 3px;
  background: #fafafa; }
  .cart-coupon-item svg {
    fill: #ec008c; }
  .cart-coupon-item .cart-coupon-remove svg {
    fill: #ec008c; }

.cart-item-discount, .cart-item-value.price--discounted {
  color: #999999; }

.cart-coupon-name {
  flex: 1;
  margin-left: 0.28571rem;
  display: inline-flex;
  flex-direction: column; }
  .cart-coupon-name .cart-coupon-limit {
    color: #008a06;
    font-size: 12px; }

.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; }

.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 #cccccc; }

.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: #757575;
  display: inline-block;
  font-size: 13px; }

.previewCartAction {
  margin: 0 auto;
  max-width: 85.71429rem;
  width: 100%;
  border-top: 1px solid #cccccc;
  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; }

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

.shipping-estimate-value #shipping-cost-discounted {
  margin-left: 0.35714rem; }

.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: #757575;
  font-weight: 400; }

.panel--newAddress {
  display: block;
  text-align: center;
  text-decoration: none; }
  .panel--newAddress:hover .address-title {
    color: #757575; }
  .panel--newAddress .panel-body {
    background-color: transparent;
    border: 1px solid #cccccc;
    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;
  padding-top: 0; }
  .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: white;
  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: 28px;
  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; } }

.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; } }
  .quickSearchResults .modal-close {
    display: none; }
    @media (min-width: 801px) {
      .quickSearchResults .modal-close {
        display: block; } }

.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: 28px;
  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 #cccccc;
  margin: 0;
  padding-bottom: 1rem; }

.account-list {
  list-style: none;
  margin-left: 0; }

.account-listItem {
  border-bottom: 1px solid #cccccc;
  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 #cccccc;
  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: #999999;
  font-family: "Karla", 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: #999999;
  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: #757575;
  font-family: "Karla", 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: #757575;
  float: left;
  font-weight: 400; }
  .account-orderTotal-key:last-of-type {
    position: relative;
    top: 0.28571rem; }

.account-orderTotal-value {
  border-bottom: 1px solid #cccccc;
  text-align: right; }
  .account-orderTotal-value:last-child {
    border-bottom: 0;
    font-size: 20px; }

.account-orderTotal-discount {
  margin: 0;
  text-align: right;
  font-weight: 400;
  padding: 0.78571rem 0;
  border-bottom: 0; }
  .account-orderTotal-discount:last-of-type {
    border-bottom: 1px solid #cccccc;
    padding-top: 0; }

.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: #757575;
  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: #333333; }

.account .pagination {
  color: #999999;
  margin-top: 3rem;
  text-align: center; }

.account-message .is-read {
  color: #999999; }

.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: #757575;
  font-weight: 400;
  margin-top: 1.5rem; }

.account-downloads-summary {
  border-bottom: 1px solid #cccccc;
  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: #757575;
  font-size: 15px;
  margin-bottom: 0.21429rem;
  text-transform: inherit; }

.account-downloadsItem-description {
  margin-bottom: 0; }

.account-downloadsItem-availability {
  color: #757575; }

.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: #8f8f8f; }

.icon--ratingFull svg {
  fill: #474747; }

.rating--small {
  display: inline-block; }
  .rating--small .icon {
    height: 1rem;
    width: 1rem;
    margin-top: -3px; }

.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 {
    min-height: 17.85714rem;
    padding: 0.78571rem;
    width: 100%; }
    @media (min-width: 551px) {
      .paymentMethodsGrid-item {
        width: 50%; } }

.paymentMethod {
  background-color: #e5e5e5;
  border: 1px solid #cccccc;
  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 {
    color: #666666;
    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: #666666;
    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: "Karla", 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: #999999;
    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%; }

.manual-captcha-input-container {
  align-items: center;
  display: flex; }
  .manual-captcha-input-container .question {
    font-size: 1.25rem;
    margin-right: 1rem; }
  .manual-captcha-input-container .form-input {
    flex: 1; }

.skip-to-main-link {
  background: white;
  color: #333333;
  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 #cccccc;
  height: 55px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100; }
  @media (min-width: 801px) {
    .header {
      border-bottom: 1px solid #cccccc;
      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: #e5e5e5;
        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: #757575; }
    .header-logo__link:active {
      color: #757575; }

.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: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 2.25vw;
  font-weight: 400;
  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;
      overflow: auto;
      padding: 0 10px;
      white-space: normal; }
      .header.fixed .header-logo-text {
        font-size: 25px; } }

.header-logo-image-container {
  position: relative;
  width: 100%; }
  @media (min-width: 801px) {
    .header-logo-image-container {
      min-height: 100px; } }

.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: #444444;
    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: #444444;
      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; }

.page-content,
.page-content--full {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left; }

.page-region {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  width: 100%;
  float: left;
  float: right;
  width: 100%; }
  @media (min-width: 801px) {
    .page-region {
      width: 75%; } }

@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: white;
  border-top: 1px solid #cccccc;
  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: #757575;
  display: inline-block;
  float: none;
  font-size: 1rem;
  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 {
  font-size: 1rem;
  text-transform: inherit; }

.footer-info-list {
  list-style: none;
  margin-left: 0; }
  .footer-info-list a {
    color: #757575;
    text-decoration: none; }
    .footer-info-list a:hover {
      color: #333333; }

.footer-copyright {
  text-align: center; }
  @media (min-width: 551px) {
    .footer-copyright {
      text-align: left; } }
  .footer-copyright > .powered-by {
    color: #757575;
    font-size: 12px;
    margin: 0; }
  .footer-copyright a {
    color: #757575;
    text-decoration: none; }
    .footer-copyright a:hover {
      color: #333333; }

.footer-payment-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin-left: 0;
  margin-top: 1.5rem; }
  @media (min-width: 551px) {
    .footer-payment-icons {
      justify-content: normal; } }
  @media (min-width: 801px) {
    .footer-payment-icons {
      margin-top: 3rem; } }
  .footer-payment-icons .footer-payment-icon {
    height: 2.85714rem;
    margin: 0.35714rem;
    vertical-align: middle;
    width: 3.57143rem; }
  .footer-payment-icons svg {
    fill: #ec008c; }

.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 + .blog {
    border-top: 1px solid #cccccc;
    margin-top: 3rem;
    padding-top: 3rem; }
  .blog .tags {
    margin-top: 3rem;
    text-align: center; }
  .blog .socialLinks {
    text-align: center; }
  .blog .addthis_toolbox {
    margin-top: 3rem; }

.blog-title {
  font-size: 22px;
  margin: 0 1.5rem 0.35714rem; }
  .blog-title a {
    text-decoration: none; }

.blog-date,
.blog-author {
  color: #757575;
  text-align: center; }

.blog-author {
  margin-bottom: 2.5rem; }

.blog-post {
  font-size: 15px;
  text-align: left; }

.blog-thumbnail {
  margin: 0 auto 2rem;
  max-width: 190px;
  position: relative; }
  .blog-thumbnail img {
    width: 100%; }

.blog-post-figure {
  display: block;
  margin: auto;
  text-align: center; }
  @media (min-width: 801px) {
    .blog-post-figure {
      width: 66.66667%; } }

.blog-post-body {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 100%; }
  @media (min-width: 551px) {
    .blog-post-body {
      width: 83.33333%; } }
  @media (min-width: 801px) {
    .blog-post-body {
      width: 66.66667%; } }
  @media (min-width: 1261px) {
    .blog-post-body {
      width: 50%; } }

.sidebarBlock + .sidebarBlock {
  border-top: 1px solid #cccccc;
  margin-top: 2rem;
  padding-top: 2rem; }

.sidebarBlock-heading {
  font-size: 1.07143rem;
  margin-top: 0;
  text-transform: inherit; }
  @media (min-width: 801px) {
    .sidebarBlock-heading.heading-price {
      margin-top: -0.85714rem; } }

.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: 100px;
  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: 190px; }
  .brand .card-img-container::after {
    content: "";
    display: block;
    height: 0;
    padding-bottom: 131.57895%;
    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(255, 255, 255, 0.9);
  color: #ec008c; }
  .listItem-button:hover, .listItem-button:focus {
    background-color: white;
    color: #ec008c; }

.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: #999999;
  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-details.product-data {
    order: -1; }

.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 #cccccc;
    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: #007dc6; }

.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: black; }

.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: #007dc6;
  color: white; }

.sold-out-flag-side {
  background: #007dc6;
  color: white; }

.product:hover .sale-flag-side {
  background: black; }

.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: #007dc6;
  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: black; }

.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: 22px;
  width: 22px; }

.form-option-expanded {
  background-color: white;
  border: 1px solid #474747;
  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; } }

:root {
  /* The theme's own faces, exposed as the fallback for our sections. If the
     licensed brand fonts are missing, .dg-* degrades to these rather than to
     a generic serif. */
  --dg-theme-headings: "Montserrat", Arial, Helvetica, sans-serif;
  --dg-theme-body:     "Karla", Arial, Helvetica, sans-serif;
  --dg-font-display:   "Montserrat", Arial, Helvetica, sans-serif;
  --dg-font-sans:      "Karla", Arial, Helvetica, sans-serif; }

/* ==========================================================================
   DayGlo design tokens
   Extracted from Figma: DayGlo Landing Page Prototype (w3tJn5smwyVnKQx7HCOQfH)
   These are the THEME-LEVEL tokens. Widgets override only via their own
   scoped custom properties -- never by redefining these.
   ========================================================================== */
:root {
  /* ---- Color ------------------------------------------------------------ */
  --dg-fuchsia:      #EC008C;
  /* "Fuschia Flame" - single brand accent      */
  --dg-black:        #000000;
  --dg-white:        #FFFFFF;
  --dg-smoke:        #F2F2F2;
  /* "White Smoke" - light section ground       */
  --dg-deep-blue:    #0B2A3D;
  /* "Deep Space Blue" - FAQ heading only (!)   */
  /* Neutrals introduced by the Black Light Paint shop page (Figma 293:250).
     Exact Figma values, named by role. Several greys sit within a shade of
     each other; they are kept distinct because the comp uses them distinctly. */
  --dg-text-muted:        #555555;
  /* product-grid intros                     */
  --dg-text-subtle:       #6B6B6B;
  /* card eyebrows on white                  */
  --dg-text-faint:        #8A8A8A;
  /* counts, idle tabs, dates, struck prices */
  --dg-text-on-dark:      #BDBDBD;
  /* body copy on black                      */
  --dg-text-on-dark-strong: #E6E6E6;
  /* hero checklist on black                 */
  --dg-text-on-pink:      #FFE3F2;
  /* body copy on a Fuschia promo tile       */
  --dg-line-card:         #E3E3E3;
  /* chooser card border                     */
  --dg-line-section:      #ECECEC;
  /* rule between product-grid sections      */
  --dg-line-table:        #E6E6E6;
  /* compare-table row rules                 */
  --dg-line-soft:         #EDEDED;
  /* review-card footer rule                 */
  --dg-line-on-dark:      rgba(255, 255, 255, 0.25);
  --dg-line-on-dark-soft: rgba(255, 255, 255, 0.15);
  --dg-surface-track:     #F3F3F1;
  /* quart/gallon selector track             */
  --dg-surface-chip:      #F4F4F4;
  /* idle color chip                         */
  --dg-surface-toggle:    #F1F1F1;
  /* Daylight/Blacklight track               */
  --dg-surface-reviews:   #F4F4F2;
  /* reviews marquee ground                  */
  --dg-surface-table:     #FAFAFA;
  /* compare table, non-DayGlo column        */
  --dg-notice-bg:         #FFF4E5;
  /* shipping-restriction note               */
  --dg-notice-text:       #7A4A0A;
  /* Color-filter chip swatches. Taken from the Figma swatch fills; they stand
     for a color FAMILY, not any one product. */
  --dg-swatch-blue:   #1E7BFF;
  --dg-swatch-green:  #22E12B;
  --dg-swatch-orange: #FF7A00;
  --dg-swatch-pink:   #FF1493;
  --dg-swatch-purple: #A21CAF;
  --dg-swatch-red:    #FF3B3B;
  --dg-swatch-yellow: #FFE100;
  /* ---- Typeface ---------------------------------------------------------
     Deliberately NOT pinned. Type faces come from the theme's own settings
     (Page Builder -> Design -> Typography), so these sections inherit whatever
     the store is already using. Headings inherit via their real <h1>/<h2>
     elements; body-level text inherits from the theme body font.

     If a section ever needs to force a face, set --dg-font-display or
     --dg-font-sans on that instance only -- never here.
     ---------------------------------------------------------------------- */
  /* ---- Type scale ------------------------------------------------------- */
  /* Figma values are the max of each clamp; minimums are our responsive
     assumption -- the Figma file has desktop (1920) frames only.            */
  /* Figma values exactly, held down to 1200px; the step-downs live in the
     responsive block at the foot of this file. Previously these were fluid
     clamps, which matched the comp only at exactly 1920 and shrank sharply
     below it -- H1 was 72px at 1440 instead of 96. */
  --dg-h1-size:   96px;
  /* 96  Romana 500                              */
  /* Figma's 1.0, restored now the real face is in. Romana's actual ink extent
     measures 0.956em (ink top 0.736, descender -0.220), so it fits inside a
     1.0 line box. The earlier 1.12 existed only because Montserrat's box is
     1.219em and its lines collided. */
  --dg-h1-lh:     1;
  --dg-h1-ls:     -0.03125em;
  /* -3px @ 96                                   */
  --dg-h2-size:   64px;
  /* 64  Romana 500                              */
  --dg-h2-lh:     1.1;
  --dg-h2-ls:     -0.0234em;
  /* -1.5px @ 64                                 */
  --dg-h3-size:   56px;
  /* 56  Romana 500 - product-grid titles        */
  --dg-h3-lh:     1.1;
  --dg-h3-ls:     -0.0268em;
  /* -1.5px @ 56                                 */
  --dg-h4-size:   48px;
  /* 48  Romana 500 - promo-tile headlines       */
  --dg-h4-lh:     1.1;
  --dg-h4-ls:     -0.03125em;
  /* -1.5px @ 48                                 */
  --dg-h5-size:   40px;
  /* 40  Romana 500                              */
  --dg-h5-lh:     1.1;
  --dg-h5-ls:     -0.025em;
  /* -1px @ 40                                   */
  --dg-h6-size:   24px;
  /* 24  Nimbus Sans L 400                       */
  --dg-h6-lh:     1.2;
  --dg-h6-ls:     -0.0208em;
  /* -0.5px @ 24                                 */
  --dg-h7-size:   16px;
  /* 16  eyebrow, uppercase                      */
  --dg-h7-lh:     1;
  --dg-h7-ls:     0.125em;
  /* +2px @ 16                                   */
  --dg-h8-size:   24px;
  /* 24  Romana 500                              */
  --dg-h8-lh:     1.2;
  --dg-h8-ls:     -0.0208em;
  --dg-body-size: 16px;
  /* 16                      */
  --dg-body-lh:   1.4;
  --dg-body-ls:   0;
  --dg-btn-size:  18px;
  /* 18                      */
  --dg-btn-lh:    1.1;
  /* ---- Spacing scale ---------------------------------------------------- */
  /* Derived from measured Figma offsets: 10 / 32 / 40 / 96 / 128            */
  --dg-space-xs:  10px;
  /* 10  - bullet row gap                         */
  --dg-space-sm:  24px;
  /* 24  - mobile gutter                          */
  --dg-space-md:  32px;
  /* 32  - block rhythm (the workhorse)           */
  --dg-space-lg:  40px;
  /* 40  - text block -> CTA                      */
  --dg-gap-48:    48px;
  /* 48  - product card grid gutter (Figma)       */
  --dg-gap-64:    64px;
  /* 64  - brand-story column gutter (Figma)      */
  --dg-space-xl:  96px;
  /* 96  - section padding (light sections)       */
  --dg-space-2xl: 128px;
  /* 128 - hero content inset                     */
  /* ---- Layout ----------------------------------------------------------- */
  --dg-container:      1200px;
  /* 1200 - content container                */
  --dg-container-half: 600px;
  /* 600  - precomputed; see note below      */
  --dg-space-md-half:  16px;
  /* 16   - precomputed                      */
  --dg-gap-48-half:    24px;
  /* 24   - precomputed                      */
  --dg-content-measure: 704px;
  /* 704  - hero text column max-width         */
  --dg-grid-inner:     960px;
  /* 960  - the grid/heading block Figma nests
                                   inside the 1200 container                 */
  --dg-container-wide: 1680px;
  /* 1680 - Figma's padding-section: the full
                                   canvas less the 120px page gutter         */
  --dg-page-gutter:    120px;
  /* 120  - Figma's padding-global side inset   */
  /* Halves are precomputed rather than divided inside calc(). BigCommerce
     compiles this as SCSS, and a "/" inside calc() can be read as Sass
     division by older compilers. Nothing here may rely on Sass evaluating
     arithmetic -- see the guard in scripts/package-theme.sh.
     ------------------------------------------------------------------------ */
  /* ---- Components ------------------------------------------------------- */
  --dg-btn-height:  52px;
  /* 52                                         */
  --dg-btn-pad-x:   24px;
  --dg-btn-radius:  0;
  /* square corners throughout                  */
  /* Pink (accent) buttons turn the store's own primary-button hover grey,
     the theme's Light style setting, so DayGlo buttons and product-page
     Add to Cart behave alike. Figma defines no hover state. */
  --dg-btn-hover:   #666666;
  /* Optical centring. At 18px / 1.1 the uppercase label (DG Nimbus Sans:
     ascent 13, descent 5) sits 2px above centre, because the descender room
     below it is always empty. Buttons push their label down by this much. */
  --dg-btn-optical:    2px;
  --dg-btn-optical-2x: 4px;
  /* precomputed: min-height buttons pad the top
                                  by twice the shift to move the label by it */
  --dg-border-hair: 1px solid rgba(0, 0, 0, 0.1);
  --dg-radius-pill: 999px;
  /* chips and the view toggle only             */
  /* Shadows from the shop page comp */
  --dg-shadow-bar:     0 8px 24px rgba(0, 0, 0, 0.04);
  /* pinned filter bar */
  --dg-shadow-raised:  0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.1);
  /* chosen size tile  */
  --dg-shadow-segment: 0 1px 4px rgba(0, 0, 0, 0.1);
  /* active toggle pill */
  --dg-shadow-card:    0 12px 16px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.04);
  /* review card       */ }

/* ==========================================================================
   Responsive type
   The comp is a single 1920 canvas. Desktop holds the Figma values exactly;
   these steps take over where they would otherwise overflow their measure.
   ========================================================================== */
/* The 96px H1 holds to 1600, not 1200 as the type spec says. Below ~1600 the
   copy column is narrow enough that the longer headlines wrap to five or six
   lines, which pushed the hero CTA well below the fold. Deliberate deviation,
   requested after client review. */
@media (max-width: 1600px) {
  :root {
    --dg-h1-size: 72px; } }

/* H3 and H4 steps are our assumption (desktop-only comp): they keep their
   place between H2 and H5 at every width. */
@media (max-width: 1200px) {
  :root {
    --dg-h1-size: 72px;
    --dg-h2-size: 48px;
    --dg-h5-size: 32px;
    --dg-h3-size: 44px;
    --dg-h4-size: 40px; } }

@media (max-width: 900px) {
  :root {
    --dg-h1-size: 56px;
    --dg-h2-size: 40px;
    --dg-h5-size: 28px;
    --dg-h3-size: 36px;
    --dg-h4-size: 32px; } }

@media (max-width: 560px) {
  :root {
    --dg-h1-size: 40px;
    --dg-h2-size: 32px;
    --dg-h5-size: 24px;
    --dg-h6-size: 20px;
    --dg-h3-size: 28px;
    --dg-h4-size: 26px; } }

/* ==========================================================================
   DayGlo landing-page typefaces
   --------------------------------------------------------------------------
   SCOPED DELIBERATELY. The @font-face rules below only declare the families;
   nothing on the site uses them except elements inside a .dg-* section, where
   --dg-font-display / --dg-font-sans are set. Every other page keeps the
   theme's own typography untouched.

   Files live in <theme>/assets/fonts/dayglo/ and are referenced relative to
   the compiled stylesheet, which Stencil emits alongside assets/.

   Figma specifies:
     Romana 500                 H1 96, H2 64, H5 40, H8 24
     Nimbus Sans L 400          H6 24, H7 16, body 16, button 18
     Instrument Sans Condensed  the FAQ heading only
   ========================================================================== */
@font-face {
  font-family: "DG Romana";
  src: url("../fonts/dayglo/romana-500.woff2") format("woff2"), url("../fonts/dayglo/romana-500.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: "DG Nimbus Sans";
  src: url("../fonts/dayglo/nimbus-sans-400.woff2") format("woff2"), url("../fonts/dayglo/nimbus-sans-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

/* Instrument Sans is open licence (SIL OFL), so this one ships already.
   It is the condensed width instance (font-stretch 75%) that the comp uses. */
@font-face {
  font-family: "DG Instrument Condensed";
  src: url("../fonts/dayglo/instrument-sans-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 75%;
  font-style: normal;
  font-display: swap; }

/* Apply only within our sections. The fallbacks mean that if a file is missing
   the page degrades to the theme's fonts rather than to Times. */
.dg-hero, .dg-icongrid, .dg-story, .dg-products,
.dg-collections, .dg-compare, .dg-related, .dg-faq,
.dg-chooser, .dg-imagecards, .dg-reviews, .dg-filterbar, .dg-shop {
  --dg-font-display: "DG Romana", var(--dg-theme-headings, Georgia), serif;
  --dg-font-sans:    "DG Nimbus Sans", var(--dg-theme-body, Helvetica), sans-serif; }

/* Headings take the display face explicitly: the theme sets its own family on
   h1-h6, which would otherwise win over inheritance. */
.dg-hero__heading,
.dg-icongrid__title, .dg-icongrid__heading,
.dg-story__heading,
.dg-products__title,
.dg-collections__title, .dg-collections__name,
.dg-compare__title, .dg-compare__headline,
.dg-related__title {
  font-family: var(--dg-font-display);
  font-weight: 500; }

/* Sans-face headings per the Figma type scale (H6). */
.dg-products__name, .dg-related__name, .dg-faq__q {
  font-family: var(--dg-font-sans);
  font-weight: 400; }

/* The FAQ heading is the one place the comp uses the condensed sans. Its
   tracking is set in faq-accordion.css, which loads after this file. */
.dg-faq__title {
  font-family: "DG Instrument Condensed", var(--dg-font-sans);
  font-weight: 400; }

/* ==========================================================================
   Section: brand-story
   "Our Happy Accident Invented Daylight Fluorescent Color" — heading and
   staggered narrative lines left, historical collage right, caption beneath.
   Identical on all three landing pages, so this is the prime candidate for a
   single shared widget instance once widgets are deployable.
   ========================================================================== */
.dg-story {
  --_ground: var(--dg-story-ground, var(--dg-smoke));
  --_ink:    var(--dg-story-ink,    var(--dg-black));
  --_accent: var(--dg-story-accent, var(--dg-fuchsia));
  position: relative;
  overflow: hidden;
  background: var(--_ground);
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

/* The splatter artwork ships as TWO crops, each anchored to what it belongs to.
   One full-width background could not do both: the artwork is 2880x1275 and
   matches the comp's 1920x850 section exactly, but ours runs ~160px taller, so
   `cover` cropped the sides off and `100% 100%` stretched the top splatter ~19%
   taller than drawn, which lifted it out from behind the collage.

   splatter-bg.png  - the bottom-left splatter, sized to the section width at
                      its natural aspect and anchored bottom.
   splatter-top.png - the one that sits BEHIND the collage, attached to the
                      figure and sized as a share of it, so the two keep the
                      comp's relationship at any viewport.

   Both crops keep the White Smoke ground of the export, which is the section
   ground, so their rectangular edges are invisible. */
.dg-story {
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% auto; }

.dg-story__inner {
  position: relative;
  z-index: 1;
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-story__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dg-gap-64);
  align-items: start; }

.dg-story__heading {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0 0 var(--dg-space-lg);
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-wrap: balance; }

/* Narrative lines sit as separate blocks with generous rhythm, not a
   paragraph — the pacing is the point. */
.dg-story__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md); }

.dg-story__line {
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-story__media {
  margin: 0;
  position: relative; }

/* On the 1920 canvas the collage column is x 992-1560 and this splatter is
   x 1248-1767, y 0-421 -- so it starts 45% across the column, is 91% of its
   width, bleeds past its right edge, and reaches the section's top padding.
   Expressed against the figure, those proportions hold at any width. */
.dg-story__media::before {
  content: "";
  position: absolute;
  left: 45%;
  top: calc(0px - var(--dg-space-xl));
  width: 91%;
  aspect-ratio: 1.233;
  /* 519 x 421 -- decimal avoids Sass reading a "/" */
  background: url("../img/dayglo/splatter-top.png") center/100% 100% no-repeat;
  z-index: 0;
  pointer-events: none; }

/* Keeps the collage and its caption over the splatter. */
.dg-story__media img,
.dg-story__caption {
  position: relative;
  z-index: 1; }

.dg-story__media img {
  display: block;
  width: 100%;
  height: auto; }

.dg-story__caption {
  margin: var(--dg-space-md) 0 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  color: color-mix(in srgb, currentColor 55%, transparent); }

.dg-story__features {
  margin-top: var(--dg-space-xl); }

@media (max-width: 900px) {
  .dg-story {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-story__top {
    grid-template-columns: 1fr;
    gap: var(--dg-space-lg); } }

/* ==========================================================================
   Section: chooser-cards
   "Which paint do I need?" -- a heading block, then full-width cards with a
   square product image on the left and the copy, a check-marked note and an
   outline button on the right. Black Light Paint page (Figma 295:300).
   ========================================================================== */
.dg-chooser {
  --_ground: var(--dg-chooser-ground, var(--dg-smoke));
  --_ink:    var(--dg-chooser-ink,    var(--dg-black));
  --_accent: var(--dg-chooser-accent, var(--dg-fuchsia));
  background: var(--_ground);
  color: var(--_ink);
  padding: 112px var(--dg-space-lg); }

.dg-chooser[data-ground="white"] {
  --_ground: var(--dg-white); }

.dg-chooser[data-ground="black"] {
  --_ground: var(--dg-black);
  --_ink: var(--dg-white); }

.dg-chooser__inner {
  max-width: var(--dg-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px; }

/* ---- Heading block ------------------------------------------------------ */
.dg-chooser__head {
  display: flex;
  flex-direction: column;
  gap: 20px; }

.dg-chooser__eyebrow,
.dg-chooser__label,
.dg-chooser__card-eyebrow {
  margin: 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: var(--dg-h7-lh);
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase; }

.dg-chooser__eyebrow {
  color: var(--_accent); }

.dg-chooser__title {
  /* The theme colours h1-h6 itself; sections own their ink. */
  color: inherit;
  margin: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-wrap: balance; }

.dg-chooser__intro,
.dg-chooser__subtitle,
.dg-chooser__copy,
.dg-chooser__note {
  margin: 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-chooser__intro {
  max-width: 760px; }

/* ---- Cards -------------------------------------------------------------- */
.dg-chooser__group,
.dg-chooser__cards {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-sm); }

.dg-chooser__card {
  display: flex;
  align-items: center;
  gap: var(--dg-gap-48);
  padding: var(--dg-space-lg);
  background: var(--dg-white);
  border: 1px solid var(--dg-line-card);
  color: var(--dg-black); }

.dg-chooser__media {
  flex: none;
  width: 391px;
  aspect-ratio: 1; }

.dg-chooser__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dg-chooser__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dg-space-md); }

.dg-chooser__text {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md-half); }

.dg-chooser__card-eyebrow {
  color: var(--dg-text-subtle); }

.dg-chooser__name {
  color: inherit;
  margin: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h5-size);
  line-height: var(--dg-h5-lh);
  letter-spacing: var(--dg-h5-ls); }

.dg-chooser__subtitle {
  color: var(--_accent); }

/* The comp's check icon, from the theme's own assets (resolved against the
   compiled stylesheet in assets/css). */
.dg-chooser__note {
  position: relative;
  padding-left: 30px; }

.dg-chooser__note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  background: url("../img/dayglo/ui/check.svg") center/18px 18px no-repeat; }

/* Secondary button: 1px black outline, the eyebrow type. */
.dg-chooser__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px var(--dg-space-md);
  border: 1px solid currentColor;
  border-radius: var(--dg-btn-radius);
  color: inherit;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: normal;
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease-out, color 120ms ease-out; }

.dg-chooser__cta:hover,
.dg-chooser__cta:focus-visible {
  background: var(--dg-black);
  color: var(--dg-white); }

.dg-chooser__cta:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 3px; }

/* ==========================================================================
   Responsive -- desktop-only comp; this is our proposal.
   ========================================================================== */
@media (max-width: 1200px) {
  .dg-chooser__media {
    width: 320px; } }

@media (max-width: 900px) {
  .dg-chooser {
    padding: var(--dg-space-xl) var(--dg-space-sm); }
  .dg-chooser__inner {
    gap: var(--dg-space-lg); }
  .dg-chooser__card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--dg-space-sm);
    padding: var(--dg-space-sm); }
  .dg-chooser__media {
    width: 100%;
    max-width: 391px;
    align-self: center; } }

@media (prefers-reduced-motion: reduce) {
  .dg-chooser__cta {
    transition: none; } }

/* ==========================================================================
   Section: collection-rows
   "Shop the Collections" — stacked rows, each a text card beside a lifestyle
   image, on the black ground. Pages 2 (Epoxy & Resin) and 3 (Cosmetic).

   Rows alternate side via data-media-side on the row, so the same markup
   covers a left- or right-image layout without duplicate rules.
   ========================================================================== */
.dg-collections {
  --_ground: var(--dg-collections-ground, var(--dg-black));
  --_ink:    var(--dg-collections-ink,    var(--dg-white));
  --_accent: var(--dg-collections-accent, var(--dg-fuchsia));
  /* The multicolour bloom is Figma artwork layered over the black ground,
     supplied from the template with {{cdn}}. Cards sit semi-transparent on
     top so the bloom reads through them, as in the comp. */
  background-color: var(--_ground);
  background-repeat: no-repeat;
  background-position: center;
  /* Stretched, not cover: these sections run far taller than the artwork, and
     cover would crop the bloom to a narrow vertical slice. It is a soft
     gradient with no detail to distort. */
  background-size: 100% 100%;
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-collections__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-collections__head {
  text-align: center;
  margin-bottom: var(--dg-space-xl); }

.dg-collections__title {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-wrap: balance; }

.dg-collections__intro {
  margin: var(--dg-space-md) auto 0;
  max-width: var(--dg-grid-inner);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-collections__rows {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md); }

.dg-collections__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--dg-space-md);
  align-items: stretch; }

.dg-collections__row[data-media-side="left"] .dg-collections__body {
  order: 2; }

.dg-collections__row[data-media-side="left"] .dg-collections__media {
  order: 1; }

.dg-collections__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--dg-space-lg);
  background: rgba(255, 255, 255, 0.05); }

.dg-collections__name {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-size: var(--dg-h5-size);
  line-height: var(--dg-h5-lh);
  letter-spacing: var(--dg-h5-ls);
  text-wrap: balance; }

.dg-collections__copy {
  margin: var(--dg-space-md) 0 0;
  max-width: 544px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-collections__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--dg-space-lg);
  min-height: var(--dg-btn-height);
  padding: var(--dg-btn-optical-2x) var(--dg-btn-pad-x) 0;
  /* label optically centred */
  background: var(--_accent);
  color: var(--dg-white);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-btn-size);
  line-height: var(--dg-btn-lh);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--dg-btn-radius);
  transition: background-color 120ms ease-out; }

/* Grey, like the store's own primary buttons (see --dg-btn-hover). The
   colour is restated because the theme's own a:hover (#757575) would
   otherwise turn the label grey on grey. */
.dg-collections__cta:hover,
.dg-collections__cta:focus-visible {
  background: var(--dg-btn-hover);
  color: var(--dg-white); }

.dg-collections__cta:focus-visible {
  outline: 2px solid var(--_ink);
  outline-offset: 3px; }

.dg-collections__media {
  overflow: hidden;
  min-height: 240px; }

.dg-collections__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

@media (max-width: 900px) {
  .dg-collections {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-collections__row {
    grid-template-columns: 1fr; }
  /* Image leads on small screens regardless of desktop side. */
  .dg-collections__row .dg-collections__media {
    order: 1; }
  .dg-collections__row .dg-collections__body {
    order: 2; }
  .dg-collections__media {
    min-height: 0;
    aspect-ratio: 1.6; } }

/* ==========================================================================
   Section: compare-table
   "How We Compare" — feature column plus N vendor columns, one of which is
   highlighted as a continuous solid block running the full height of the
   table (header included).

   Built on CSS grid rather than <table> so it can restructure into stacked
   per-feature cards on narrow screens. Column count is data-driven via
   --dg-compare-columns, which covers both the 4-column (page 1) and
   3-column (pages 2-3) variants with no markup change.

   Semantics are preserved with role="table"/"row"/"cell" so it still reads
   as a comparison table to assistive tech.
   ========================================================================== */
.dg-compare {
  --_ground:    var(--dg-compare-ground,    var(--dg-white));
  --_ink:       var(--dg-compare-ink,       var(--dg-black));
  --_accent:    var(--dg-compare-accent,    var(--dg-fuchsia));
  --_rule:      var(--dg-compare-rule,      rgba(0, 0, 0, 0.1));
  --_feature-w: var(--dg-compare-feature-width, 300px);
  background: var(--_ground);
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-compare__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-compare__title {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0 0 var(--dg-space-xl);
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-align: center;
  text-wrap: balance; }

.dg-compare__table {
  display: grid;
  grid-template-columns: var(--_feature-w) repeat(var(--dg-compare-columns, 3), 1fr); }

.dg-compare__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dg-space-md) var(--dg-space-sm);
  text-align: center;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  border-bottom: 1px solid var(--_rule); }

/* Feature labels: left aligned, uppercase, tracked out, no visual weight
   competing with the values. */
.dg-compare__cell--feature {
  justify-content: flex-start;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: var(--dg-h7-ls); }

/* Header row carries no rule and sizes to the brand lockups. */
.dg-compare__cell--head {
  border-bottom: 0;
  min-height: 160px;
  font-size: var(--dg-h6-size);
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls);
  font-family: inherit; }

/* The highlighted column. Consecutive cells share an unbroken background, so
   the column reads as one solid block from header to final row. */
.dg-compare__cell--highlight {
  background: var(--_accent);
  color: var(--dg-white);
  border-bottom-color: color-mix(in srgb, var(--dg-white) 22%, transparent); }

.dg-compare__cell--highlight.dg-compare__cell--head {
  border-bottom: 0; }

.dg-compare__cell--head {
  flex-direction: column;
  gap: var(--dg-space-xs); }

.dg-compare__logo {
  display: block;
  width: 100%;
  max-width: 144px;
  height: auto; }

.dg-compare__headline {
  display: block; }

.dg-compare__actions {
  margin-top: var(--dg-space-xl);
  text-align: center; }

.dg-compare__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dg-btn-height);
  padding: 0 var(--dg-space-lg);
  border: 1px solid var(--_ink);
  border-radius: var(--dg-btn-radius);
  background: transparent;
  color: var(--_ink);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-btn-size);
  line-height: var(--dg-btn-lh);
  text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out; }

.dg-compare__cta:hover,
.dg-compare__cta:focus-visible {
  background: var(--_ink);
  color: var(--_ground); }

.dg-compare__cta:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 3px; }

/* ---- Table style: shaded (schema: select) --------------------------------
   The Black Light Paint table (Figma 301:948): 112px section padding, 64px
   heading gap, a 360px label column with no left inset, serif H5 column
   heads, the comparison column tinted, 1.5px rules, and no rule under the
   final row. Drawn for two comparison columns: label + two values per row,
   which is what the last-row selector counts. */
/* Desktop only: below 861px the table restacks into per-feature blocks and
   these selectors would outrank the stacked rules. */
@media (min-width: 861px) {
  .dg-compare[data-style="shaded"] {
    --_feature-w: var(--dg-compare-feature-width, 360px);
    --_rule: var(--dg-compare-rule, var(--dg-line-table));
    padding-top: 112px;
    padding-bottom: 112px; }
  .dg-compare[data-style="shaded"] .dg-compare__title {
    margin-bottom: var(--dg-gap-64); }
  .dg-compare[data-style="shaded"] .dg-compare__cell {
    padding: var(--dg-space-sm) var(--dg-space-md);
    min-height: 120px;
    border-bottom-width: 1.5px;
    text-wrap: balance; }
  .dg-compare[data-style="shaded"] .dg-compare__cell--feature {
    padding-left: 0;
    padding-right: var(--dg-space-sm); }
  .dg-compare[data-style="shaded"] .dg-compare__cell--value:not(.dg-compare__cell--highlight),
  .dg-compare[data-style="shaded"] .dg-compare__cell--head:not(.dg-compare__cell--highlight) {
    background: var(--dg-surface-table); }
  .dg-compare[data-style="shaded"] .dg-compare__cell--highlight {
    border-bottom-color: var(--dg-line-on-dark); }
  .dg-compare[data-style="shaded"] .dg-compare__cell--head {
    gap: 8px;
    min-height: 162px;
    padding: var(--dg-space-md);
    font-family: var(--dg-font-display, inherit);
    font-weight: 500;
    font-size: var(--dg-h5-size);
    line-height: var(--dg-h5-lh);
    letter-spacing: var(--dg-h5-ls); }
  /* The empty corner cell above the labels stays unruled and untinted. */
  .dg-compare[data-style="shaded"] .dg-compare__cell--head:first-child {
    background: none;
    border-bottom: 0; }
  .dg-compare[data-style="shaded"] .dg-compare__cell--head:not(:first-child) {
    border-bottom: 1px solid var(--_rule); }
  .dg-compare[data-style="shaded"] .dg-compare__cell--head.dg-compare__cell--highlight {
    border-bottom-color: var(--dg-line-on-dark); }
  .dg-compare[data-style="shaded"] .dg-compare__logo {
    max-width: 160px; }
  .dg-compare[data-style="shaded"] .dg-compare__cell:nth-last-child(-n + 3) {
    border-bottom: 0; } }

/* At full width the comp holds every value to a 276px measure (420 column,
   72 each side), which is what wraps most answers onto two balanced lines.
   Only where the columns are at their full 420: narrower, 72px would starve
   the text. A media query because Sass owns max()/min(). */
@media (min-width: 1201px) {
  .dg-compare[data-style="shaded"] .dg-compare__cell--value {
    padding-inline: 72px; } }

/* ---- Stacked layout ------------------------------------------------------
   Below 860px the grid collapses to one feature per block. Each value cell
   gains its vendor name from data-vendor, so the comparison stays readable
   without horizontal scrolling. */
@media (max-width: 860px) {
  .dg-compare {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-compare__table {
    display: block; }
  .dg-compare__cell {
    display: block;
    text-align: left;
    padding: var(--dg-space-sm) 0;
    border-bottom: 1px solid var(--_rule); }
  /* Header row is redundant once every value carries its own vendor label.
     Scoped to the table so it outranks the .dg-compare__cell rule above --
     equal specificity would let source order win. */
  .dg-compare__table .dg-compare__cell--head {
    display: none; }
  .dg-compare__cell--feature {
    margin-top: var(--dg-space-lg);
    padding-bottom: var(--dg-space-xs);
    font-weight: 600;
    border-bottom: 0; }
  .dg-compare__cell--value::before {
    content: attr(data-vendor);
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    letter-spacing: var(--dg-h7-ls);
    text-transform: uppercase;
    opacity: 0.6; }
  .dg-compare__cell--highlight {
    padding: var(--dg-space-sm);
    border-bottom: 0; }
  .dg-compare__cell--highlight.dg-compare__cell--value::before {
    opacity: 0.85; } }

@media (prefers-reduced-motion: reduce) {
  .dg-compare__cta {
    transition: none; } }

/* ==========================================================================
   Section: faq-accordion
   Collapsed question rows with a +/- affordance.

   Built on <details>/<summary> so it works with no JavaScript, is keyboard
   operable and screen-reader announced for free, and degrades safely if the
   theme bundle fails to load. The marker is suppressed and replaced with a
   drawn glyph so it can take the accent colour.
   ========================================================================== */
.dg-faq {
  --_ground: var(--dg-faq-ground, var(--dg-white));
  --_ink:    var(--dg-faq-ink,    var(--dg-black));
  --_accent: var(--dg-faq-accent, var(--dg-fuchsia));
  --_rule:   var(--dg-faq-rule,   rgba(0, 0, 0, 0.12));
  --_title:  var(--dg-faq-title-color, var(--dg-deep-blue));
  background: var(--_ground);
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-faq__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-faq__title {
  margin: 0 0 var(--dg-space-xl);
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  /* The comp uses a different 64px style here: Instrument Sans Condensed with
     zero tracking, not the Romana H2's -1.5px. */
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  color: var(--_title); }

.dg-faq__item {
  border-bottom: 1px solid var(--_rule); }

.dg-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-md);
  padding: var(--dg-space-md) 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h6-size);
  line-height: 1.35; }

.dg-faq__q::-webkit-details-marker {
  display: none; }

.dg-faq__q:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 2px; }

/* Drawn +/- so it can carry the accent colour. */
.dg-faq__sign {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--_accent); }

.dg-faq__sign::before,
.dg-faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: currentColor;
  transition: transform 160ms ease-out; }

.dg-faq__sign::after {
  transform: rotate(90deg); }

.dg-faq__item[open] .dg-faq__sign::after {
  transform: rotate(0deg); }

.dg-faq__a {
  margin: 0;
  padding: 0 48px var(--dg-space-lg) 48px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  max-width: 960px; }

/* Answers that enumerate. The 6px round marker matches the comp's bullet. */
.dg-faq__list {
  margin: 0;
  padding: 0 48px var(--dg-space-lg) 76px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  max-width: 960px;
  list-style: none; }

.dg-faq__list li {
  position: relative;
  padding-left: 0; }

.dg-faq__list li + li {
  margin-top: 10px; }

.dg-faq__list li::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor; }

/* An intro paragraph sits directly above its list, so it drops its gap. */
.dg-faq__a:has(+ .dg-faq__list) {
  padding-bottom: var(--dg-space-sm); }

/* ---- Ground (schema: select) --------------------------------------------- */
.dg-faq[data-ground="smoke"] {
  --_ground: var(--dg-faq-ground, var(--dg-smoke)); }

/* ---- Style: minimal (schema: select) --------------------------------------
   The Black Light Paint FAQ (Figma 301:1037): the standard Romana H2 in black,
   a 960px list between 0.5px black rules, questions at 28px vertical padding
   with no side inset, 32px from question to answer, and the +/- drawn at the
   comp's 17.5px inside a 30px box. */
.dg-faq[data-style="minimal"] {
  --_rule:  var(--dg-faq-rule, var(--dg-black));
  --_title: var(--dg-faq-title-color, var(--dg-black)); }

.dg-faq[data-style="minimal"] .dg-faq__inner {
  max-width: var(--dg-grid-inner); }

.dg-faq[data-style="minimal"] .dg-faq__title {
  margin-bottom: var(--dg-gap-64);
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  letter-spacing: var(--dg-h2-ls); }

.dg-faq[data-style="minimal"] .dg-faq__item {
  border-bottom: 0.5px solid var(--_rule); }

.dg-faq[data-style="minimal"] .dg-faq__title + .dg-faq__item {
  border-top: 0.5px solid var(--_rule); }

.dg-faq[data-style="minimal"] .dg-faq__q {
  gap: var(--dg-space-sm);
  padding: 28px 0;
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls); }

.dg-faq[data-style="minimal"] .dg-faq__sign {
  width: 17.5px;
  height: 17.5px;
  margin: 6.25px; }

.dg-faq[data-style="minimal"] .dg-faq__a {
  padding: 4px 0 28px;
  max-width: none; }

.dg-faq[data-style="minimal"] .dg-faq__list {
  padding: 0 0 28px 28px;
  max-width: none; }

.dg-faq[data-style="minimal"] .dg-faq__a:has(+ .dg-faq__list) {
  padding-bottom: var(--dg-space-sm); }

@media (min-width: 901px) {
  .dg-faq[data-style="minimal"] {
    padding-top: 112px;
    padding-bottom: 112px; } }

@media (max-width: 900px) {
  .dg-faq {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-faq__q {
    padding-left: 0;
    padding-right: 0; }
  .dg-faq__a {
    padding-left: 0;
    padding-right: 0; }
  .dg-faq__list {
    padding-right: 0;
    padding-left: 28px; } }

@media (prefers-reduced-motion: reduce) {
  .dg-faq__sign::before,
  .dg-faq__sign::after {
    transition: none; } }

/* ==========================================================================
   Section: hero-two-column
   50/50 split -- text panel + full-bleed media. Used as the page opener on
   all three landing pages (Stage/Theatrical, Epoxy & Resin, Cosmetic).

   EDITOR SEAMS
   Everything a content editor is allowed to change is either
     (a) a data-* variant attribute, or
     (b) a --dg-hero-* custom property set inline on the root.
   Theme tokens in styles/tokens.css are the fallback for every one of them,
   so an untouched widget renders exactly to the Figma spec.
   ========================================================================== */
.dg-hero {
  /* Instance-overridable, defaulting to theme tokens */
  --_ground: var(--dg-hero-ground, var(--dg-black));
  --_ink:    var(--dg-hero-ink,    var(--dg-white));
  --_accent: var(--dg-hero-accent, var(--dg-fuchsia));
  --_inset:  var(--dg-hero-inset,  var(--dg-space-2xl));
  /* Vertical inset is tuned separately from the horizontal one. The horizontal
     128 is the design inset and drives the canvas alignment below, so it stays.
     The vertical is deliberately SHORTER than the comp's 128: Figma's frame
     allows 119px of header, where the live store puts 278px above the hero
     (promo bar + taller nav), which pushed the CTA below the fold. */
  --_inset-block: var(--dg-hero-inset-block, 64px);
  --_minh:   var(--dg-hero-min-height, 780px);
  /* comp is 955; see above */
  /* Half the 1920 design canvas (960px) less the 128px inset. Precomputed
     rather than divided in calc(): "/" inside calc() can be read as Sass
     division by older compilers. */
  --dg-hero-canvas-inset: 832px;
  background: var(--_ground);
  color: var(--_ink); }

/* The grid lives on __inner, not on the section, so the ground can stay
   full-bleed while the contained variant holds its columns to the 1680
   container. In the default layout __inner is unconstrained, which renders
   identically to the original section-level grid. */
.dg-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: var(--_minh); }

/* ---- Ground variants (schema: select) ----------------------------------- */
.dg-hero[data-ground="smoke"] {
  --_ground: var(--dg-smoke);
  --_ink: var(--dg-black); }

.dg-hero[data-ground="white"] {
  --_ground: var(--dg-white);
  --_ink: var(--dg-black); }

/* ---- Media side (schema: select) ---------------------------------------- */
.dg-hero[data-media-side="left"] .dg-hero__body {
  order: 2; }

.dg-hero[data-media-side="left"] .dg-hero__media {
  order: 1; }

/* ---- Layout variants (schema: select) ------------------------------------
   Cosmetic & Beauty moved off the full-bleed split: same two columns, but held
   inside the 1680 container on a full-width black ground, with the image
   bounded (792 x 633.6 in the comp) instead of running to the edge.

   The 120px side padding plus a 1680 cap on __inner reproduces Figma's
   padding-global -> container-large nesting at any width, and needs no
   max()/min() -- which Sass would claim before the browser sees them. */
.dg-hero[data-layout="contained"] {
  padding: var(--dg-space-xl) var(--dg-page-gutter); }

.dg-hero[data-layout="contained"] .dg-hero__inner {
  max-width: var(--dg-container-wide);
  margin: 0 auto;
  gap: var(--dg-space-xl);
  align-items: center;
  min-height: 0; }

/* The column already is the measure here (792 in the comp), so the copy is not
   also held to the canvas measure the full-bleed hero uses. */
.dg-hero[data-layout="contained"] .dg-hero__body {
  padding: 0; }

.dg-hero[data-layout="contained"] .dg-hero__content {
  max-width: none; }

.dg-hero[data-layout="contained"] .dg-hero__media {
  aspect-ratio: 1.25;
  /* 792 x 633.6 */
  height: auto; }

/* ---- Text panel --------------------------------------------------------- */
.dg-hero__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--_inset-block) var(--_inset); }

.dg-hero__content {
  width: 100%;
  max-width: var(--dg-content-measure); }

.dg-hero__eyebrow {
  margin: 0 0 var(--dg-space-md);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: var(--dg-h7-lh);
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase;
  color: var(--_accent); }

.dg-hero__heading {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  margin: 0;
  color: inherit;
  /* no font-family: the theme's own h1 face wins */
  font-size: var(--dg-h1-size);
  font-weight: 500;
  line-height: var(--dg-h1-lh);
  letter-spacing: var(--dg-h1-ls);
  text-wrap: balance; }

/* ---- Bullets ------------------------------------------------------------ */
.dg-hero__bullets {
  margin: var(--dg-space-md) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-xs); }

.dg-hero__bullet {
  position: relative;
  padding-left: 16px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-hero__bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--_accent); }

.dg-hero__fineprint {
  margin: var(--dg-space-md) 0 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

/* ---- Rating row + body copy (optional) -----------------------------------
   Both render only when their settings are filled in, so heroes built before
   they existed are unaffected. */
.dg-hero__rating {
  display: flex;
  align-items: center;
  gap: var(--dg-space-xs);
  margin: var(--dg-space-sm) 0 0; }

.dg-hero__score {
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h8-size);
  line-height: var(--dg-h8-lh);
  letter-spacing: var(--dg-h8-ls); }

/* Intrinsic size comes from the SVG itself (108.9 x 18.2). */
.dg-hero__stars {
  display: block;
  flex: none; }

.dg-hero__reviews {
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  color: var(--dg-text-faint);
  text-decoration: underline; }

.dg-hero[data-ground="black"] .dg-hero__reviews {
  color: var(--dg-text-on-dark); }

a.dg-hero__reviews:hover,
a.dg-hero__reviews:focus-visible {
  color: inherit; }

.dg-hero__text {
  margin: var(--dg-space-sm) 0 0;
  max-width: 655px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

/* ---- CTA ---------------------------------------------------------------- */
.dg-hero__actions {
  margin-top: var(--dg-space-lg); }

.dg-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dg-btn-height);
  padding: var(--dg-btn-optical-2x) var(--dg-btn-pad-x) 0;
  /* label optically centred */
  border: 0;
  border-radius: var(--dg-btn-radius);
  background: var(--_accent);
  color: var(--dg-white);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-btn-size);
  line-height: var(--dg-btn-lh);
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 120ms ease-out; }

/* Grey, like the store's own primary buttons (see --dg-btn-hover). The
   colour is restated because the theme's own a:hover (#757575) would
   otherwise turn the label grey on grey. */
.dg-hero__cta:hover,
.dg-hero__cta:focus-visible {
  background: var(--dg-btn-hover);
  color: var(--dg-white); }

.dg-hero__cta:focus-visible {
  outline: 2px solid var(--_ink);
  outline-offset: 3px; }

/* ---- Content style: shop (schema: select) --------------------------------
   The Black Light Paint category hero (Figma 293:715). One flex column with
   the comp's 24px rhythm; the button and the checklist sit 40px apart
   (24 gap + 16 margin). The bullets are moved below the button with `order`
   rather than in the markup, so every page shares one template. Neither the
   bullets nor the eyebrow are focusable, so the visual reorder does not
   change keyboard order. */
.dg-hero[data-content="shop"] {
  --dg-hero-canvas-inset: 840px; }

/* 960 - 120 */
/* Only above 1200, so the responsive step-downs further on still apply
   (this selector would otherwise outrank them). */
@media (min-width: 1201px) {
  .dg-hero[data-content="shop"] {
    --_inset: var(--dg-hero-inset, var(--dg-page-gutter)); } }

.dg-hero[data-content="shop"] .dg-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dg-space-sm);
  max-width: 720px; }

.dg-hero[data-content="shop"] .dg-hero__eyebrow,
.dg-hero[data-content="shop"] .dg-hero__heading,
.dg-hero[data-content="shop"] .dg-hero__rating,
.dg-hero[data-content="shop"] .dg-hero__text,
.dg-hero[data-content="shop"] .dg-hero__fineprint {
  margin: 0; }

.dg-hero[data-content="shop"] .dg-hero__heading {
  align-self: stretch; }

.dg-hero[data-content="shop"] .dg-hero__fineprint {
  order: 5; }

.dg-hero[data-content="shop"] .dg-hero__actions {
  order: 6;
  margin-top: var(--dg-space-md-half); }

.dg-hero[data-content="shop"] .dg-hero__cta {
  padding: var(--dg-btn-optical-2x) var(--dg-space-md) 0; }

.dg-hero[data-content="shop"] .dg-hero__bullets {
  order: 7;
  margin: var(--dg-space-md-half) 0 0;
  gap: 12px; }

.dg-hero[data-content="shop"] .dg-hero__bullet {
  padding-left: 30px; }

.dg-hero[data-content="shop"][data-ground="black"] .dg-hero__bullet {
  color: var(--dg-text-on-dark-strong); }

/* The comp's check icon, from the theme's own assets. Resolved against the
   compiled stylesheet (assets/css), the same way brand-story's splatter is. */
.dg-hero[data-content="shop"] .dg-hero__bullet::before {
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: url("../img/dayglo/ui/check.svg") center/18px 18px no-repeat; }

/* ---- Media -------------------------------------------------------------- */
.dg-hero__media {
  position: relative;
  overflow: hidden; }

.dg-hero__media img {
  /* Taken out of flow deliberately. Left in flow, the image's intrinsic aspect
     sets the grid row height -- hero-wall.jpg is 960x863, so at a 967px column
     it forced an 870px hero and the copy's padding had no effect on the height
     at all. Absolute + cover means the text column governs the hero height and
     the image crops to fill, which is what a full-bleed hero should do. */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--dg-hero-focal, 50% 50%); }

/* ==========================================================================
   Responsive
   NOTE: the Figma file contains desktop (1920) frames only. The breakpoint
   behaviour below is our proposal, not a spec -- worth a design review.
   ========================================================================== */
/* Canvas-based alignment.
   The comp is drawn on a 1920 canvas with a 128px inset, which is what gives
   the copy its 704px measure. Rather than aligning to the shared 1200
   container -- which would squeeze the measure and fragment the heading -- the
   hero holds its position on a centred 1920 canvas, so the copy stops drifting
   toward the edge on wider screens without losing its proportions.

   Percentage padding resolves against this grid area (half the hero), so the
   canvas edge plus inset is 100% - (960px - 128px) = 100% - 52rem.

   A media query rather than max(): Sass owns max(), and var() arguments make
   older compilers abort the whole stylesheet. Below 1920 the plain inset
   already gives the design position, so nothing is needed there. */
@media (min-width: 1920px) {
  .dg-hero__body {
    padding-left: calc(100% - var(--dg-hero-canvas-inset)); } }

@media (max-width: 1200px) {
  .dg-hero {
    --_inset: var(--dg-space-xl);
    --_inset-block: var(--dg-space-lg); }
  /* The 120px gutter is a 1920-canvas figure; below the container width it only
     eats the measure, so it steps down with the rest of the section. */
  .dg-hero[data-layout="contained"] {
    padding: var(--dg-space-xl) var(--dg-space-lg); }
  .dg-hero[data-layout="contained"] .dg-hero__inner {
    gap: var(--dg-space-lg); } }

@media (max-width: 900px) {
  .dg-hero {
    --_inset: var(--dg-space-lg);
    --_inset-block: var(--dg-space-lg);
    --_minh: auto; }
  /* The grid is on __inner, so the stack has to be set there -- setting it on
     .dg-hero would silently do nothing and the hero would stay side by side. */
  .dg-hero__inner {
    grid-template-columns: 1fr; }
  /* Text leads on small screens regardless of desktop media side */
  .dg-hero[data-media-side="left"] .dg-hero__body {
    order: 1; }
  .dg-hero[data-media-side="left"] .dg-hero__media {
    order: 2; }
  .dg-hero__media {
    aspect-ratio: 1.3333;
    /* 4:3 — decimal avoids Sass division ambiguity */ }
  .dg-hero[data-layout="contained"] {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-hero[data-layout="contained"] .dg-hero__media {
    aspect-ratio: 1.3333; } }

@media (max-width: 560px) {
  .dg-hero {
    --_inset: var(--dg-space-sm);
    --_inset-block: var(--dg-space-sm); } }

@media (prefers-reduced-motion: reduce) {
  .dg-hero__cta {
    transition: none; } }

/* ==========================================================================
   Section: icon-grid
   3-up (or 4-up) grid of accent icon + heading + supporting line.
   Used for the "Build a Brighter Stage" row and, at 4-up with no body copy,
   the feature row beneath the brand story.
   ========================================================================== */
.dg-icongrid {
  --_ground: var(--dg-icongrid-ground, var(--dg-smoke));
  --_ink:    var(--dg-icongrid-ink,    var(--dg-black));
  --_accent: var(--dg-icongrid-accent, var(--dg-fuchsia));
  background: var(--_ground);
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-icongrid[data-ground="black"] {
  --_ground: var(--dg-black);
  --_ink: var(--dg-white); }

.dg-icongrid[data-ground="white"] {
  --_ground: var(--dg-white);
  --_ink: var(--dg-black); }

.dg-icongrid__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-icongrid__title {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0 0 var(--dg-space-lg);
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-align: center;
  text-wrap: balance; }

.dg-icongrid__grid {
  display: grid;
  grid-template-columns: repeat(var(--dg-icongrid-columns, 3), 1fr);
  gap: var(--dg-space-md); }

.dg-icongrid__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--dg-space-lg) var(--dg-space-sm); }

.dg-icongrid__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--dg-space-lg);
  color: var(--_accent);
  flex: none; }

/* Inline <svg> in the theme templates, <img> in widgets (templates are size
   capped, so widgets reference the icon as a theme asset). Both size the same. */
.dg-icongrid__icon svg,
.dg-icongrid__icon img {
  display: block;
  width: 100%;
  height: 100%; }

.dg-icongrid__heading {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-size: var(--dg-h5-size);
  line-height: var(--dg-h5-lh);
  letter-spacing: var(--dg-h5-ls);
  text-wrap: balance; }

.dg-icongrid__body {
  margin: var(--dg-space-md) 0 0;
  max-width: 384px;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

/* Compact variant: the 4-up feature row under the brand story — icon + label,
   no body copy, tighter vertical rhythm. */
.dg-icongrid[data-variant="compact"] {
  padding: 0;
  background: none; }

.dg-icongrid[data-variant="compact"] .dg-icongrid__card {
  padding: 0; }

.dg-icongrid[data-variant="compact"] .dg-icongrid__icon {
  margin-bottom: var(--dg-space-md); }

/* Card style: left (schema: select). The Black Light Paint feature row
   (Figma 294:2560): left aligned, 50px icon, 32px to the copy, the sans H6
   heading and a 16px heading-to-body gap. Cards carry no padding of their own;
   the 32px grid gap is the only space between them. */
.dg-icongrid[data-card-style="left"] .dg-icongrid__card {
  align-items: flex-start;
  text-align: left;
  padding: 0; }

.dg-icongrid[data-card-style="left"] .dg-icongrid__icon {
  width: 50px;
  height: 50px;
  margin-bottom: var(--dg-space-md); }

.dg-icongrid[data-card-style="left"] .dg-icongrid__heading {
  font-family: var(--dg-font-sans, inherit);
  font-weight: 400;
  font-size: var(--dg-h6-size);
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls);
  text-wrap: wrap; }

.dg-icongrid[data-card-style="left"] .dg-icongrid__body {
  margin-top: var(--dg-space-md-half);
  max-width: none; }

@media (max-width: 900px) {
  .dg-icongrid {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-icongrid__grid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px) {
  .dg-icongrid__grid {
    grid-template-columns: 1fr;
    gap: var(--dg-space-lg); } }

/* ==========================================================================
   Section: image-card-grid
   Heading, then a 2- (or 3-) column grid of photo cards: image, eyebrow,
   serif heading, body. "Why DayGlo" on the Black Light Paint page
   (Figma 297:995), on black.
   ========================================================================== */
.dg-imagecards {
  --_ground: var(--dg-imagecards-ground, var(--dg-black));
  --_ink:    var(--dg-imagecards-ink,    var(--dg-white));
  --_muted:  var(--dg-imagecards-muted,  var(--dg-text-on-dark));
  --_accent: var(--dg-imagecards-accent, var(--dg-fuchsia));
  background: var(--_ground);
  color: var(--_ink);
  padding: 112px var(--dg-space-lg); }

.dg-imagecards[data-ground="white"] {
  --_ground: var(--dg-white);
  --_ink: var(--dg-black);
  --_muted: var(--dg-text-muted); }

.dg-imagecards[data-ground="smoke"] {
  --_ground: var(--dg-smoke);
  --_ink: var(--dg-black);
  --_muted: var(--dg-text-muted); }

.dg-imagecards__inner {
  max-width: var(--dg-container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px; }

.dg-imagecards__title {
  color: inherit;
  margin: 0;
  max-width: var(--dg-grid-inner);
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls); }

.dg-imagecards__grid {
  display: grid;
  grid-template-columns: repeat(var(--dg-imagecards-columns, 2), 1fr);
  column-gap: var(--dg-space-md);
  row-gap: 56px; }

.dg-imagecards__card {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md); }

.dg-imagecards__media {
  height: 360px;
  overflow: hidden; }

.dg-imagecards__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dg-imagecards__body {
  display: flex;
  flex-direction: column;
  gap: 12px; }

.dg-imagecards__eyebrow {
  margin: 0;
  color: var(--_accent);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: normal;
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase; }

.dg-imagecards__heading {
  color: inherit;
  margin: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h5-size);
  line-height: var(--dg-h5-lh);
  letter-spacing: var(--dg-h5-ls); }

.dg-imagecards__text {
  margin: 0;
  color: var(--_muted);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

/* ---- Responsive (our proposal; desktop-only comp) ----------------------- */
@media (max-width: 900px) {
  .dg-imagecards {
    padding: var(--dg-space-xl) var(--dg-space-sm); }
  .dg-imagecards__inner {
    gap: var(--dg-space-lg); }
  .dg-imagecards__grid {
    row-gap: var(--dg-space-lg); }
  .dg-imagecards__media {
    height: auto;
    aspect-ratio: 1.6333;
    /* 588 x 360 */ } }

@media (max-width: 640px) {
  .dg-imagecards__grid {
    grid-template-columns: 1fr; } }

/* ==========================================================================
   Section: product-card-grid
   "Shop the Colors" — product cards on black, each with a colour-flooded
   image panel above a dark info panel.

   Card artwork is the Figma export per colourway (colour flood, starburst and
   both cans baked in). In production these come from the catalog via the
   Storefront GraphQL API; the markup here is the presentation layer only.
   ========================================================================== */
.dg-products {
  --_ground: var(--dg-products-ground, var(--dg-black));
  --_ink:    var(--dg-products-ink,    var(--dg-white));
  --_accent: var(--dg-products-accent, var(--dg-fuchsia));
  position: relative;
  /* The multicolour bloom is Figma artwork layered over the black ground,
     supplied from the template with {{cdn}}. Cards sit semi-transparent on
     top so the bloom reads through them, as in the comp. */
  background-color: var(--_ground);
  background-repeat: no-repeat;
  background-position: center;
  /* Stretched, not cover: these sections run far taller than the artwork, and
     cover would crop the bloom to a narrow vertical slice. It is a soft
     gradient with no detail to distort. */
  background-size: 100% 100%;
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-products__inner {
  position: relative;
  z-index: 1;
  /* Figma nests a 960 grid inside the 1200 container; 960 - 48 gutter
     gives the 456 card width the comp states explicitly. */
  max-width: var(--dg-grid-inner);
  margin: 0 auto; }

.dg-products__head {
  text-align: center;
  margin-bottom: var(--dg-space-xl); }

.dg-products__title {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-wrap: balance; }

.dg-products__intro {
  margin: var(--dg-space-md) auto 0;
  max-width: var(--dg-grid-inner);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-products__grid {
  display: grid;
  grid-template-columns: repeat(var(--dg-products-columns, 2), 1fr);
  gap: var(--dg-gap-48);
  justify-items: stretch; }

/* A lone trailing card centres rather than hugging the left edge. */
.dg-products__card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc(50% - var(--dg-gap-48-half));
  justify-self: center; }

.dg-products__card {
  display: flex;
  flex-direction: column; }

.dg-products__swatch {
  aspect-ratio: 1.452;
  /* 684 x 471, the Figma export ratio */
  overflow: hidden;
  background: var(--dg-card-color, transparent); }

.dg-products__swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dg-products__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--dg-space-lg);
  background: rgba(255, 255, 255, 0.06); }

.dg-products__name {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-size: var(--dg-h6-size);
  line-height: 1.35;
  letter-spacing: var(--dg-h6-ls); }

.dg-products__price {
  margin: var(--dg-space-md) 0 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-products__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--dg-space-md);
  min-height: var(--dg-btn-height);
  padding: var(--dg-btn-optical-2x) var(--dg-btn-pad-x) 0;
  /* label optically centred */
  background: var(--_accent);
  color: var(--dg-white);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-btn-size);
  line-height: var(--dg-btn-lh);
  text-decoration: none;
  text-transform: uppercase;
  border-radius: var(--dg-btn-radius);
  transition: background-color 120ms ease-out; }

/* Grey, like the store's own primary buttons (see --dg-btn-hover). The
   colour is restated because the theme's own a:hover (#757575) would
   otherwise turn the label grey on grey. */
.dg-products__cta:hover,
.dg-products__cta:focus-visible {
  background: var(--dg-btn-hover);
  color: var(--dg-white); }

.dg-products__cta:focus-visible {
  outline: 2px solid var(--_ink);
  outline-offset: 3px; }

@media (max-width: 900px) {
  .dg-products {
    padding: var(--dg-space-lg) var(--dg-space-sm); } }

@media (max-width: 640px) {
  .dg-products__grid {
    grid-template-columns: 1fr; }
  .dg-products__card:last-child:nth-child(odd) {
    max-width: none; } }

@media (prefers-reduced-motion: reduce) {
  .dg-products__cta {
    transition: none; } }

/* ==========================================================================
   Section: related-products
   "Shop Related Products" — 5-up row of compact product cards on the light
   ground. Same colour-flood approach as product-card-grid; imagery and price
   come from the catalog in production.
   ========================================================================== */
.dg-related {
  --_ground: var(--dg-related-ground, var(--dg-smoke));
  --_ink:    var(--dg-related-ink,    var(--dg-black));
  background: var(--_ground);
  color: var(--_ink);
  padding: var(--dg-space-xl) var(--dg-space-lg); }

.dg-related__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-related__title {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0 0 var(--dg-space-xl);
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-align: center;
  text-wrap: balance; }

.dg-related__grid {
  display: grid;
  grid-template-columns: repeat(var(--dg-related-columns, 5), 1fr);
  gap: var(--dg-space-md); }

.dg-related__card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none; }

.dg-related__swatch {
  /* 214.4 x 199.8 in the comp. The product shots are cut-out PNGs, so the
     section ground shows through -- no radius and no fill, or the transparent
     art reads as a card. */
  aspect-ratio: 1.073;
  margin-bottom: var(--dg-space-lg);
  overflow: hidden; }

.dg-related__swatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dg-related__name {
  /* The theme sets an explicit colour on h1-h6 (color-textHeading).
     Our sections own their ink, so headings must inherit. */
  color: inherit;
  margin: 0;
  font-family: var(--dg-font-sans, inherit);
  /* H6 in the comp, not body */
  font-size: var(--dg-h6-size);
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls); }

.dg-related__price {
  margin: var(--dg-space-md-half) 0 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  opacity: 0.75; }

.dg-related__card:hover .dg-related__name,
.dg-related__card:focus-visible .dg-related__name {
  text-decoration: underline; }

@media (max-width: 1100px) {
  .dg-related__grid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 720px) {
  .dg-related {
    padding: var(--dg-space-lg) var(--dg-space-sm); }
  .dg-related__grid {
    grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Section: reviews-marquee
   Two rows of review cards drifting in opposite directions, faded at both
   edges. Black Light Paint page (Figma 297:793; prototype: linear, ~40px/s).

   Each row's track holds two identical groups (the second aria-hidden and
   inert). Each group carries a trailing gap equal to the card gap, so moving
   the track by exactly -50% lands the second group where the first began:
   a seamless loop with no script. Duration scales with the review count, so
   the speed stays ~40px/s whatever the editor adds: one card is 384 + 24 =
   408px, 408 / 40 = 10.2s.

   Hover or keyboard focus pauses a row. With reduced motion there is no
   animation at all; the row becomes a normal horizontal scroller.
   ========================================================================== */
.dg-reviews {
  --_ground: var(--dg-reviews-ground, var(--dg-surface-reviews));
  --_card-w: 384px;
  --_gap:    var(--dg-space-sm);
  --_per-card: 10.2s;
  background: var(--_ground);
  color: var(--dg-black);
  padding: var(--dg-space-xl) 0;
  overflow: hidden; }

.dg-reviews__title {
  color: inherit;
  margin: 0 auto var(--dg-space-lg);
  padding: 0 var(--dg-space-lg);
  max-width: var(--dg-container);
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h2-size);
  line-height: var(--dg-h2-lh);
  letter-spacing: var(--dg-h2-ls);
  text-align: center; }

.dg-reviews__rows {
  display: flex;
  flex-direction: column;
  gap: var(--_gap);
  padding: var(--dg-space-md-half) 0; }

.dg-reviews__row {
  position: relative;
  /* 16px above and below the 340px cards leaves room for the card shadow. */
  padding: var(--dg-space-md-half) 0;
  overflow: hidden; }

/* Edge fades, 200px each side, in the section ground. */
.dg-reviews__row::before,
.dg-reviews__row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 200px;
  pointer-events: none; }

.dg-reviews__row::before {
  left: 0;
  background: linear-gradient(to right, var(--_ground), transparent); }

.dg-reviews__row::after {
  right: 0;
  background: linear-gradient(to left, var(--_ground), transparent); }

.dg-reviews__track {
  display: flex;
  width: max-content;
  animation: dg-reviews-left calc(var(--dg-reviews-count, 5) * var(--_per-card)) linear infinite; }

.dg-reviews__row[data-direction="right"] .dg-reviews__track {
  animation-name: dg-reviews-right; }

.dg-reviews__row:hover .dg-reviews__track,
.dg-reviews__row:focus-within .dg-reviews__track {
  animation-play-state: paused; }

.dg-reviews__group {
  display: flex;
  gap: var(--_gap);
  padding-right: var(--_gap); }

@keyframes dg-reviews-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-50%); } }

@keyframes dg-reviews-right {
  from {
    transform: translateX(-50%); }
  to {
    transform: translateX(0); } }

/* ---- Card --------------------------------------------------------------- */
.dg-review {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--_card-w);
  height: 340px;
  margin: 0;
  padding: var(--dg-space-md);
  background: var(--dg-white);
  box-shadow: var(--dg-shadow-card); }

.dg-review__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px; }

/* Intrinsic size from the SVG itself (108.9 x 18.2). */
.dg-review__stars {
  display: block; }

.dg-review__text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h8-size);
  line-height: var(--dg-h8-lh);
  letter-spacing: var(--dg-h8-ls);
  font-style: normal; }

.dg-review__more,
.dg-review__name,
.dg-review__date,
.dg-review__avatar {
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-review__more {
  color: var(--dg-fuchsia);
  text-decoration: underline; }

.dg-review__by {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: var(--dg-space-sm) 0 2px;
  border-top: 1px solid var(--dg-line-soft); }

.dg-review__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dg-black);
  color: var(--dg-white); }

.dg-review__who {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; }

.dg-review__date {
  color: var(--dg-text-faint); }

.dg-review__source {
  flex: none;
  width: 60px;
  height: 18px;
  object-fit: contain; }

/* ---- Responsive (our proposal) ----------------------------------------- */
@media (max-width: 900px) {
  .dg-reviews {
    padding: var(--dg-space-lg) 0;
    --_card-w: 300px; }
  .dg-review {
    height: 300px;
    padding: var(--dg-space-sm); }
  .dg-reviews__row::before,
  .dg-reviews__row::after {
    width: 48px; } }

@media (prefers-reduced-motion: reduce) {
  .dg-reviews__track {
    animation: none; }
  .dg-reviews__row {
    overflow-x: auto;
    scroll-snap-type: x proximity; }
  .dg-reviews__row::before,
  .dg-reviews__row::after {
    display: none; }
  .dg-reviews__group {
    padding-left: var(--_gap); }
  .dg-review {
    scroll-snap-align: start; }
  .dg-reviews__group[aria-hidden="true"] {
    display: none; } }

/* ==========================================================================
   Section: shop-filter-bar
   Type tabs, the Daylight / Blacklight toggle, and color chips above the
   product grids. Black Light Paint page (Figma 306:804).

   Pinning: the comp's 96px of space above the tabs belongs to the bar, so the
   bar sticks at top: -96px. The space scrolls away, the tabs and chips stay.
   On the storefront each widget sits inside its own Page Builder wrappers, so
   the page script moves the sticky behaviour onto the wrapper that shares a
   parent with the grids (assets/js/dayglo/shop.js).

   Progressive enhancement: without the script the tabs are plain anchor links
   and the toggle and chips (.dg-needs-js) stay hidden, since they cannot work.
   ========================================================================== */
.dg-filterbar {
  --_space-above: var(--dg-filterbar-space-above, var(--dg-space-xl));
  position: sticky;
  top: calc(var(--_space-above) * -1);
  z-index: 20;
  background: var(--dg-white);
  color: var(--dg-black);
  box-shadow: var(--dg-shadow-bar);
  padding: var(--_space-above) var(--dg-space-lg) 0; }

.dg-filterbar:not(.is-ready) .dg-needs-js {
  display: none; }

.dg-filterbar__view[hidden] {
  display: none; }

/* Set by the page script on the bar's first ancestor whose parent also holds
   the product grids -- on the storefront, a Page Builder wrapper. It takes
   over the pinning the bar itself cannot do from inside that wrapper. */
.dg-pin-carrier {
  position: sticky;
  top: var(--dg-pin-top, 0);
  z-index: 20; }

.dg-filterbar__inner {
  max-width: var(--dg-container);
  margin: 0 auto; }

.dg-filterbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-sm); }

/* ---- Type tabs ---------------------------------------------------------- */
.dg-filterbar__tabs {
  display: flex;
  gap: 36px; }

.dg-filterbar__tab {
  padding: 22px 0 20px;
  border-bottom: 2px solid transparent;
  color: var(--dg-text-faint);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: normal;
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap; }

.dg-filterbar__tab:hover {
  color: var(--dg-black); }

.dg-filterbar__tab[aria-current="true"] {
  color: var(--dg-black);
  border-bottom-color: var(--dg-black); }

.dg-filterbar__tab:focus-visible {
  outline: 2px solid var(--dg-fuchsia);
  outline-offset: 2px; }

/* ---- Daylight / Blacklight toggle --------------------------------------- */
.dg-filterbar__view {
  display: flex;
  align-items: center;
  gap: 14px; }

.dg-filterbar__view-label {
  color: var(--dg-text-faint);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: normal;
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase; }

.dg-filterbar__segments {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--dg-radius-pill);
  background: var(--dg-surface-toggle); }

.dg-filterbar__segment {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--dg-radius-pill);
  background: transparent;
  color: var(--dg-text-faint);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  cursor: pointer; }

.dg-filterbar__segment img {
  display: block;
  flex: none; }

.dg-filterbar__segment[aria-pressed="true"] {
  background: var(--dg-white);
  color: var(--dg-black);
  box-shadow: var(--dg-shadow-segment); }

/* The comp supplies each icon in one state only: the sun black (selected),
   the moon grey (idle). The other two states are derived without touching
   the files: black at 46% over white is the comp's #8A8A8A, and brightness(0)
   takes the grey moon to black. */
.dg-filterbar__segment[data-dg-view="day"][aria-pressed="false"] img {
  opacity: 0.46; }

.dg-filterbar__segment[data-dg-view="uv"][aria-pressed="true"] img {
  filter: brightness(0); }

.dg-filterbar__segment:focus-visible {
  outline: 2px solid var(--dg-fuchsia);
  outline-offset: 2px; }

/* ---- Color chips -------------------------------------------------------- */
.dg-filterbar__colors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: var(--dg-space-md-half) 0; }

.dg-filterbar__chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px 7px 8px;
  border: 0;
  border-radius: var(--dg-radius-pill);
  background: var(--dg-surface-chip);
  color: var(--dg-black);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh);
  white-space: nowrap;
  cursor: pointer; }

.dg-filterbar__chip[data-dg-color="all"] {
  padding-left: 14px; }

.dg-filterbar__chip[aria-pressed="true"] {
  background: var(--dg-black);
  color: var(--dg-white); }

/* No products of this color in the chosen type (set by the page script). */
.dg-filterbar__chip:disabled {
  opacity: 0.4;
  cursor: default; }

.dg-filterbar__chip:focus-visible {
  outline: 2px solid var(--dg-fuchsia);
  outline-offset: 2px; }

.dg-filterbar__swatch {
  display: block;
  flex: none; }

/* "Blue (2)": the script writes the number; the space and brackets are ours. */
.dg-filterbar__count:not(:empty)::before {
  content: " (";
  white-space: pre; }

.dg-filterbar__count:not(:empty)::after {
  content: ")"; }

/* ---- Responsive (our proposal; desktop-only comp) ------------------------
   Tabs and chips scroll sideways rather than wrap, so the pinned bar stays
   one predictable height. */
@media (max-width: 1100px) {
  .dg-filterbar {
    --_space-above: var(--dg-space-lg);
    padding-left: var(--dg-space-sm);
    padding-right: var(--dg-space-sm); }
  .dg-filterbar__row {
    flex-wrap: wrap;
    row-gap: 0; }
  .dg-filterbar__view {
    padding-bottom: 8px; }
  /* Chips stay on ONE row and scroll sideways from here down. The full set is
     ~943px wide, so at tablet width it wrapped to a second row and the pinned
     bar grew by a row's height. */
  .dg-filterbar__colors {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--dg-space-sm) * -1);
    padding-left: var(--dg-space-sm);
    padding-right: var(--dg-space-sm); }
  .dg-filterbar__colors::-webkit-scrollbar {
    display: none; } }

@media (max-width: 760px) {
  .dg-filterbar__tabs,
  .dg-filterbar__colors {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(var(--dg-space-sm) * -1);
    padding-left: var(--dg-space-sm);
    padding-right: var(--dg-space-sm); }
  .dg-filterbar__tabs {
    gap: var(--dg-space-sm); }
  .dg-filterbar__colors {
    padding-top: 12px;
    padding-bottom: 12px; }
  /* Keep the pinned bar short on phones: the toggle's buttons say enough. */
  .dg-filterbar__view-label {
    display: none; }
  .dg-filterbar__segment {
    padding: 6px 14px; } }

/* ==========================================================================
   Section: shop-product-grid
   One product line: heading with a count, intro, optional amber notice, then
   a 4-up grid of buyable cards and an optional promo tile. Black Light Paint
   page (Figma 307:793 water-based, 307:1004 oil-based, 307:1282 clear coats).

   Card (Figma component "product-card", 306:783): image, serif name, pink
   type line, dotted usage line, a rule, a quart/gallon selector and a full-
   width button. Hover lifts the card and zooms the image; the chosen size
   rises to a white tile. The selector is a pair of real radio buttons, so it
   works with no script and with the keyboard.
   ========================================================================== */
/* Shared by every section that tabs or buttons scroll to: clears the pinned
   filter bar (its tabs and chips are ~131px tall). */
.dg-anchor {
  display: block;
  scroll-margin-top: var(--dg-pin-offset, 150px); }

/* The page script filters by setting [hidden]. These elements set their own
   display, which would otherwise outrank the browser's [hidden] rule. */
.dg-shop[hidden],
.dg-shop__card[hidden],
.dg-shop__promo[hidden] {
  display: none; }

/* A promo whose figures come from live prices stays hidden until the page
   script has filled them in, so the {save} placeholders are never seen. */
.dg-shop__promo[data-dg-tokens]:not(.is-priced) {
  display: none; }

.dg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; }

.dg-shop {
  --_accent: var(--dg-shop-accent, var(--dg-fuchsia));
  background: var(--dg-white);
  color: var(--dg-black);
  padding: 0 var(--dg-space-lg); }

/* The rule sits on the 1200 container, not full width, as in the comp. */
.dg-shop__inner {
  max-width: var(--dg-container);
  margin: 0 auto;
  padding: var(--dg-space-xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--dg-gap-48); }

.dg-shop[data-spacing="closing"] .dg-shop__inner {
  padding: var(--dg-gap-64) 0 112px; }

.dg-shop[data-rule] .dg-shop__inner {
  border-bottom: 1px solid var(--dg-line-section); }

/* ---- Heading ------------------------------------------------------------ */
.dg-shop__head {
  display: flex;
  flex-direction: column;
  gap: 14px; }

.dg-shop__title-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  column-gap: var(--dg-space-md-half); }

.dg-shop__title {
  color: inherit;
  margin: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h3-size);
  line-height: var(--dg-h3-lh);
  letter-spacing: var(--dg-h3-ls); }

.dg-shop__count,
.dg-shop__intro,
.dg-shop__note,
.dg-shop__type,
.dg-shop__usage,
.dg-shop__unit,
.dg-shop__status,
.dg-shop__promo-body,
.dg-shop__compare {
  margin: 0;
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-body-size);
  line-height: var(--dg-body-lh); }

.dg-shop__count {
  padding-bottom: 12px;
  color: var(--dg-text-faint); }

/* The comp sets the water-based intro in black and the other two in #555;
   one value here, the #555. */
.dg-shop__intro {
  color: var(--dg-text-muted); }

/* ---- Notice ------------------------------------------------------------- */
.dg-shop__note {
  position: relative;
  padding: 12px var(--dg-space-md-half) 12px 44px;
  background: var(--dg-notice-bg);
  color: var(--dg-notice-text); }

.dg-shop__note::before {
  content: "";
  position: absolute;
  left: var(--dg-space-md-half);
  top: 14px;
  width: 18px;
  height: 18px;
  background: url("../img/dayglo/ui/info.svg") center/18px 18px no-repeat; }

/* ---- Grid --------------------------------------------------------------- */
.dg-shop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--dg-space-sm);
  row-gap: 56px;
  align-items: stretch; }

/* Reading order stays cards-then-tile; `order` places the tile visually.
   Cards take even slots, the tile the odd slot before card N+1. */
.dg-shop__card {
  order: calc(var(--dg-shop-i, 0) * 2); }

.dg-shop__promo {
  order: calc(var(--dg-shop-after, 99) * 2 - 1); }

/* ---- Card --------------------------------------------------------------- */
.dg-shop__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--dg-white);
  border: var(--dg-border-hair);
  transition: box-shadow 160ms ease-out; }

.dg-shop__card:hover {
  box-shadow: var(--dg-shadow-raised); }

.dg-shop__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden; }

.dg-shop__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease-out; }

.dg-shop__card:hover .dg-shop__img {
  transform: scale(1.04); }

/* Blacklight view (set by the page script on <html>): the UV image covers
   the daylight one where a card has it; cards without one keep daylight. */
.dg-shop__img--uv {
  position: absolute;
  inset: 0;
  visibility: hidden; }

[data-dg-view="uv"] .dg-shop__img--uv {
  visibility: visible; }

.dg-shop__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md-half);
  padding: var(--dg-space-sm); }

.dg-shop__info {
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md-half);
  padding-bottom: var(--dg-space-md-half);
  border-bottom: var(--dg-border-hair); }

.dg-shop__name {
  color: inherit;
  margin: 0 0 -8px;
  /* name and type sit 8px apart, not 16 */
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h8-size);
  line-height: var(--dg-h8-lh);
  letter-spacing: var(--dg-h8-ls); }

.dg-shop__name a {
  color: inherit;
  text-decoration: none; }

.dg-shop__name a:hover {
  text-decoration: underline; }

.dg-shop__type {
  color: var(--_accent); }

.dg-shop__usage {
  position: relative;
  padding-left: 14px; }

.dg-shop__usage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: url("../img/dayglo/ui/dot.svg") center/6px 6px no-repeat; }

/* Pushes the size selector and button to the bottom, so buttons line up
   across a row even when a name runs to two lines. */
.dg-shop__form {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--dg-space-md-half); }

/* ---- Size selector ------------------------------------------------------ */
.dg-shop__sizes {
  display: flex;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  background: var(--dg-surface-track); }

.dg-shop__size {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px var(--dg-space-md-half);
  cursor: pointer; }

.dg-shop__size input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer; }

/* The chosen size. .is-selected is the same state set by the page script,
   for browsers without :has(). */
.dg-shop__size:has(input:checked),
.dg-shop__size.is-selected {
  background: var(--dg-white);
  box-shadow: var(--dg-shadow-raised); }

/* A size the store reports out of stock (set by the page script). */
.dg-shop__size.is-unavailable {
  color: var(--dg-text-faint);
  cursor: not-allowed; }

.dg-shop__size.is-unavailable input {
  cursor: not-allowed; }

.dg-shop__size.is-unavailable .dg-shop__price {
  text-decoration: line-through; }

.dg-shop__size:has(input:focus-visible) {
  outline: 2px solid var(--_accent);
  outline-offset: 1px; }

.dg-shop__price {
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h6-size);
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls); }

/* Prices are never stored in the page; the page script fills each slot from
   the store. Until it does (or if the store can't be reached), show a dash. */
.dg-shop__price:empty::before {
  content: "\2014";
  color: var(--dg-text-faint); }

/* ---- Button ------------------------------------------------------------- */
.dg-shop__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  /* 16px all round, with the label moved down to its optical centre. */
  padding: calc(var(--dg-space-md-half) + var(--dg-btn-optical)) var(--dg-space-md-half) calc(var(--dg-space-md-half) - var(--dg-btn-optical));
  border: 0;
  border-radius: var(--dg-btn-radius);
  background: var(--_accent);
  color: var(--dg-white);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-btn-size);
  line-height: var(--dg-btn-lh);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 120ms ease-out; }

/* Grey, like the store's own primary buttons (see --dg-btn-hover). The
   colour is restated because the theme's own a:hover (#757575) would
   otherwise turn the label grey on grey. */
.dg-shop__cta:not(:disabled):hover,
.dg-shop__cta:focus-visible {
  background: var(--dg-btn-hover);
  color: var(--dg-white); }

.dg-shop__cta:focus-visible {
  outline: 2px solid var(--dg-black);
  outline-offset: 2px; }

/* Sold out is not in the comp. Greyed, not removed, so the grid keeps its
   rhythm and the shopper can still open the product page. */
.dg-shop__cta:disabled {
  background: var(--dg-line-soft);
  color: var(--dg-text-faint);
  cursor: not-allowed;
  opacity: 1; }

.dg-shop__status:empty {
  display: none; }

.dg-shop__status {
  color: var(--dg-text-subtle);
  text-align: center; }

/* ---- Promo tile --------------------------------------------------------- */
.dg-shop__promo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--dg-space-sm);
  padding: 28px;
  background: var(--dg-black);
  color: var(--dg-white); }

.dg-shop__promo[data-style="pink"] {
  background: var(--_accent); }

.dg-shop__promo-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dg-space-sm); }

.dg-shop__promo-icon {
  display: block; }

.dg-shop__promo-bottom {
  display: flex;
  flex-direction: column; }

.dg-shop__promo-eyebrow {
  margin: 0;
  color: var(--_accent);
  font-family: var(--dg-font-sans, inherit);
  font-size: var(--dg-h7-size);
  line-height: normal;
  letter-spacing: var(--dg-h7-ls);
  text-transform: uppercase; }

.dg-shop__promo[data-style="pink"] .dg-shop__promo-eyebrow {
  color: var(--dg-white); }

.dg-shop__promo-heading {
  margin: 0;
  font-family: var(--dg-font-display, inherit);
  font-weight: 500;
  font-size: var(--dg-h4-size);
  line-height: var(--dg-h4-lh);
  letter-spacing: var(--dg-h4-ls); }

.dg-shop__promo-body {
  color: var(--dg-text-on-pink); }

.dg-shop__compare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dg-space-xs);
  padding: 14px 0;
  border-bottom: 1px solid var(--dg-line-on-dark); }

.dg-shop__compare-row:first-child {
  border-bottom-color: var(--dg-line-on-dark-soft);
  color: var(--dg-text-faint); }

.dg-shop__compare dt, .dg-shop__compare dd {
  margin: 0; }

.dg-shop__compare-row:last-child:not(:first-child) dd {
  color: var(--_accent);
  font-size: var(--dg-h6-size);
  line-height: var(--dg-h6-lh);
  letter-spacing: var(--dg-h6-ls); }

/* ==========================================================================
   Responsive (our proposal; desktop-only comp)
   ========================================================================== */
@media (max-width: 1100px) {
  .dg-shop__grid {
    grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) {
  .dg-shop {
    padding: 0 var(--dg-space-sm); }
  .dg-shop__inner,
  .dg-shop[data-spacing="closing"] .dg-shop__inner {
    padding: var(--dg-space-lg) 0;
    gap: var(--dg-space-md); } }

@media (max-width: 820px) {
  .dg-shop__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--dg-space-md-half);
    row-gap: var(--dg-space-md); } }

@media (max-width: 520px) {
  .dg-shop__grid {
    grid-template-columns: 1fr; }
  .dg-shop__promo-heading {
    font-size: var(--dg-h5-size); } }

@media (prefers-reduced-motion: reduce) {
  .dg-shop__card, .dg-shop__img, .dg-shop__cta {
    transition: none; }
  .dg-shop__card:hover .dg-shop__img {
    transform: none; } }

[data-content-region="header_bottom--global"] [data-sub-layout] {
  padding-left: 0;
  padding-right: 0; }