@charset "UTF-8";
/**
 * Foundation for Sites by ZURB
 * Version 6.5.1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.foundation-mq {
  font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em";
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #fefefe;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 3px;
}

select {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
}

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important;
}

button {
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: transparent;
  line-height: 1;
  cursor: auto;
}

[data-whatinput=mouse] button {
  outline: 0;
}

pre {
  overflow: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.is-visible {
  display: block !important;
}

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

.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

@media screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important;
  }
}
@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}
@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}
@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important;
  }
}
@media screen and (min-width: 40em) and (max-width: 63.99875em) {
  .hide-for-medium-only {
    display: none !important;
  }
}
@media screen and (max-width: 39.99875em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important;
  }
}
@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important;
  }
}
@media screen and (max-width: 63.99875em) {
  .show-for-large {
    display: none !important;
  }
}
@media screen and (min-width: 64em) and (max-width: 74.99875em) {
  .hide-for-large-only {
    display: none !important;
  }
}
@media screen and (max-width: 63.99875em), screen and (min-width: 75em) {
  .show-for-large-only {
    display: none !important;
  }
}
.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}

@media screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
  .hide-for-portrait {
    display: none !important;
  }
}
.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}

@media screen and (orientation: landscape) {
  .hide-for-landscape,
  .show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
  .show-for-portrait {
    display: block !important;
  }
}
.grid-container {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  max-width: 87.5rem;
  margin: 0 auto;
}

.grid-container.fluid {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
  max-width: 100%;
  margin: 0 auto;
}

.grid-container.full {
  padding-right: 0;
  padding-left: 0;
  max-width: 100%;
  margin: 0 auto;
}

.grid-x {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.cell {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 0px;
  min-width: 0px;
  width: 100%;
}

.cell.auto {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0px;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
}

.cell.shrink {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.grid-x > .auto {
  width: auto;
}

.grid-x > .shrink {
  width: auto;
}

.grid-x > .small-shrink, .grid-x > .small-full, .grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-shrink, .grid-x > .medium-full, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-shrink, .grid-x > .large-full, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}
.grid-x > .small-1, .grid-x > .small-2, .grid-x > .small-3, .grid-x > .small-4, .grid-x > .small-5, .grid-x > .small-6, .grid-x > .small-7, .grid-x > .small-8, .grid-x > .small-9, .grid-x > .small-10, .grid-x > .small-11, .grid-x > .small-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.grid-x > .small-1 {
  width: 8.33333%;
}

.grid-x > .small-2 {
  width: 16.66667%;
}

.grid-x > .small-3 {
  width: 25%;
}

.grid-x > .small-4 {
  width: 33.33333%;
}

.grid-x > .small-5 {
  width: 41.66667%;
}

.grid-x > .small-6 {
  width: 50%;
}

.grid-x > .small-7 {
  width: 58.33333%;
}

.grid-x > .small-8 {
  width: 66.66667%;
}

.grid-x > .small-9 {
  width: 75%;
}

.grid-x > .small-10 {
  width: 83.33333%;
}

.grid-x > .small-11 {
  width: 91.66667%;
}

.grid-x > .small-12 {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .grid-x > .medium-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto;
  }
  .grid-x > .medium-shrink, .grid-x > .medium-1, .grid-x > .medium-2, .grid-x > .medium-3, .grid-x > .medium-4, .grid-x > .medium-5, .grid-x > .medium-6, .grid-x > .medium-7, .grid-x > .medium-8, .grid-x > .medium-9, .grid-x > .medium-10, .grid-x > .medium-11, .grid-x > .medium-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .grid-x > .medium-shrink {
    width: auto;
  }
  .grid-x > .medium-1 {
    width: 8.33333%;
  }
  .grid-x > .medium-2 {
    width: 16.66667%;
  }
  .grid-x > .medium-3 {
    width: 25%;
  }
  .grid-x > .medium-4 {
    width: 33.33333%;
  }
  .grid-x > .medium-5 {
    width: 41.66667%;
  }
  .grid-x > .medium-6 {
    width: 50%;
  }
  .grid-x > .medium-7 {
    width: 58.33333%;
  }
  .grid-x > .medium-8 {
    width: 66.66667%;
  }
  .grid-x > .medium-9 {
    width: 75%;
  }
  .grid-x > .medium-10 {
    width: 83.33333%;
  }
  .grid-x > .medium-11 {
    width: 91.66667%;
  }
  .grid-x > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-x > .large-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    width: auto;
  }
  .grid-x > .large-shrink, .grid-x > .large-1, .grid-x > .large-2, .grid-x > .large-3, .grid-x > .large-4, .grid-x > .large-5, .grid-x > .large-6, .grid-x > .large-7, .grid-x > .large-8, .grid-x > .large-9, .grid-x > .large-10, .grid-x > .large-11, .grid-x > .large-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .grid-x > .large-shrink {
    width: auto;
  }
  .grid-x > .large-1 {
    width: 8.33333%;
  }
  .grid-x > .large-2 {
    width: 16.66667%;
  }
  .grid-x > .large-3 {
    width: 25%;
  }
  .grid-x > .large-4 {
    width: 33.33333%;
  }
  .grid-x > .large-5 {
    width: 41.66667%;
  }
  .grid-x > .large-6 {
    width: 50%;
  }
  .grid-x > .large-7 {
    width: 58.33333%;
  }
  .grid-x > .large-8 {
    width: 66.66667%;
  }
  .grid-x > .large-9 {
    width: 75%;
  }
  .grid-x > .large-10 {
    width: 83.33333%;
  }
  .grid-x > .large-11 {
    width: 91.66667%;
  }
  .grid-x > .large-12 {
    width: 100%;
  }
}
.grid-margin-x:not(.grid-x) > .cell {
  width: auto;
}

.grid-margin-y:not(.grid-y) > .cell {
  height: auto;
}

.grid-margin-x {
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;
}

.grid-margin-x > .cell {
  width: calc(100% - 1.875rem);
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
}

.grid-margin-x > .auto {
  width: auto;
}

.grid-margin-x > .shrink {
  width: auto;
}

.grid-margin-x > .small-1 {
  width: calc(8.33333% - 1.875rem);
}

.grid-margin-x > .small-2 {
  width: calc(16.66667% - 1.875rem);
}

.grid-margin-x > .small-3 {
  width: calc(25% - 1.875rem);
}

.grid-margin-x > .small-4 {
  width: calc(33.33333% - 1.875rem);
}

.grid-margin-x > .small-5 {
  width: calc(41.66667% - 1.875rem);
}

.grid-margin-x > .small-6 {
  width: calc(50% - 1.875rem);
}

.grid-margin-x > .small-7 {
  width: calc(58.33333% - 1.875rem);
}

.grid-margin-x > .small-8 {
  width: calc(66.66667% - 1.875rem);
}

.grid-margin-x > .small-9 {
  width: calc(75% - 1.875rem);
}

.grid-margin-x > .small-10 {
  width: calc(83.33333% - 1.875rem);
}

.grid-margin-x > .small-11 {
  width: calc(91.66667% - 1.875rem);
}

.grid-margin-x > .small-12 {
  width: calc(100% - 1.875rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-x > .medium-auto {
    width: auto;
  }
  .grid-margin-x > .medium-shrink {
    width: auto;
  }
  .grid-margin-x > .medium-1 {
    width: calc(8.33333% - 1.875rem);
  }
  .grid-margin-x > .medium-2 {
    width: calc(16.66667% - 1.875rem);
  }
  .grid-margin-x > .medium-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .medium-4 {
    width: calc(33.33333% - 1.875rem);
  }
  .grid-margin-x > .medium-5 {
    width: calc(41.66667% - 1.875rem);
  }
  .grid-margin-x > .medium-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .medium-7 {
    width: calc(58.33333% - 1.875rem);
  }
  .grid-margin-x > .medium-8 {
    width: calc(66.66667% - 1.875rem);
  }
  .grid-margin-x > .medium-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .medium-10 {
    width: calc(83.33333% - 1.875rem);
  }
  .grid-margin-x > .medium-11 {
    width: calc(91.66667% - 1.875rem);
  }
  .grid-margin-x > .medium-12 {
    width: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x > .large-auto {
    width: auto;
  }
  .grid-margin-x > .large-shrink {
    width: auto;
  }
  .grid-margin-x > .large-1 {
    width: calc(8.33333% - 1.875rem);
  }
  .grid-margin-x > .large-2 {
    width: calc(16.66667% - 1.875rem);
  }
  .grid-margin-x > .large-3 {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x > .large-4 {
    width: calc(33.33333% - 1.875rem);
  }
  .grid-margin-x > .large-5 {
    width: calc(41.66667% - 1.875rem);
  }
  .grid-margin-x > .large-6 {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x > .large-7 {
    width: calc(58.33333% - 1.875rem);
  }
  .grid-margin-x > .large-8 {
    width: calc(66.66667% - 1.875rem);
  }
  .grid-margin-x > .large-9 {
    width: calc(75% - 1.875rem);
  }
  .grid-margin-x > .large-10 {
    width: calc(83.33333% - 1.875rem);
  }
  .grid-margin-x > .large-11 {
    width: calc(91.66667% - 1.875rem);
  }
  .grid-margin-x > .large-12 {
    width: calc(100% - 1.875rem);
  }
}
.grid-padding-x .grid-padding-x {
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}

.grid-container:not(.full) > .grid-padding-x {
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}

.grid-padding-x > .cell {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

.small-up-1 > .cell {
  width: 100%;
}

.small-up-2 > .cell {
  width: 50%;
}

.small-up-3 > .cell {
  width: 33.33333%;
}

.small-up-4 > .cell {
  width: 25%;
}

.small-up-5 > .cell {
  width: 20%;
}

.small-up-6 > .cell {
  width: 16.66667%;
}

.small-up-7 > .cell {
  width: 14.28571%;
}

.small-up-8 > .cell {
  width: 12.5%;
}

@media print, screen and (min-width: 40em) {
  .medium-up-1 > .cell {
    width: 100%;
  }
  .medium-up-2 > .cell {
    width: 50%;
  }
  .medium-up-3 > .cell {
    width: 33.33333%;
  }
  .medium-up-4 > .cell {
    width: 25%;
  }
  .medium-up-5 > .cell {
    width: 20%;
  }
  .medium-up-6 > .cell {
    width: 16.66667%;
  }
  .medium-up-7 > .cell {
    width: 14.28571%;
  }
  .medium-up-8 > .cell {
    width: 12.5%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-up-1 > .cell {
    width: 100%;
  }
  .large-up-2 > .cell {
    width: 50%;
  }
  .large-up-3 > .cell {
    width: 33.33333%;
  }
  .large-up-4 > .cell {
    width: 25%;
  }
  .large-up-5 > .cell {
    width: 20%;
  }
  .large-up-6 > .cell {
    width: 16.66667%;
  }
  .large-up-7 > .cell {
    width: 14.28571%;
  }
  .large-up-8 > .cell {
    width: 12.5%;
  }
}
.grid-margin-x.small-up-1 > .cell {
  width: calc(100% - 1.875rem);
}

.grid-margin-x.small-up-2 > .cell {
  width: calc(50% - 1.875rem);
}

.grid-margin-x.small-up-3 > .cell {
  width: calc(33.33333% - 1.875rem);
}

.grid-margin-x.small-up-4 > .cell {
  width: calc(25% - 1.875rem);
}

.grid-margin-x.small-up-5 > .cell {
  width: calc(20% - 1.875rem);
}

.grid-margin-x.small-up-6 > .cell {
  width: calc(16.66667% - 1.875rem);
}

.grid-margin-x.small-up-7 > .cell {
  width: calc(14.28571% - 1.875rem);
}

.grid-margin-x.small-up-8 > .cell {
  width: calc(12.5% - 1.875rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-x.medium-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }
  .grid-margin-x.medium-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x.medium-up-3 > .cell {
    width: calc(33.33333% - 1.875rem);
  }
  .grid-margin-x.medium-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x.medium-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }
  .grid-margin-x.medium-up-6 > .cell {
    width: calc(16.66667% - 1.875rem);
  }
  .grid-margin-x.medium-up-7 > .cell {
    width: calc(14.28571% - 1.875rem);
  }
  .grid-margin-x.medium-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-x.large-up-1 > .cell {
    width: calc(100% - 1.875rem);
  }
  .grid-margin-x.large-up-2 > .cell {
    width: calc(50% - 1.875rem);
  }
  .grid-margin-x.large-up-3 > .cell {
    width: calc(33.33333% - 1.875rem);
  }
  .grid-margin-x.large-up-4 > .cell {
    width: calc(25% - 1.875rem);
  }
  .grid-margin-x.large-up-5 > .cell {
    width: calc(20% - 1.875rem);
  }
  .grid-margin-x.large-up-6 > .cell {
    width: calc(16.66667% - 1.875rem);
  }
  .grid-margin-x.large-up-7 > .cell {
    width: calc(14.28571% - 1.875rem);
  }
  .grid-margin-x.large-up-8 > .cell {
    width: calc(12.5% - 1.875rem);
  }
}
.small-margin-collapse {
  margin-right: 0;
  margin-left: 0;
}

.small-margin-collapse > .cell {
  margin-right: 0;
  margin-left: 0;
}

.small-margin-collapse > .small-1 {
  width: 8.33333%;
}

.small-margin-collapse > .small-2 {
  width: 16.66667%;
}

.small-margin-collapse > .small-3 {
  width: 25%;
}

.small-margin-collapse > .small-4 {
  width: 33.33333%;
}

.small-margin-collapse > .small-5 {
  width: 41.66667%;
}

.small-margin-collapse > .small-6 {
  width: 50%;
}

.small-margin-collapse > .small-7 {
  width: 58.33333%;
}

.small-margin-collapse > .small-8 {
  width: 66.66667%;
}

.small-margin-collapse > .small-9 {
  width: 75%;
}

.small-margin-collapse > .small-10 {
  width: 83.33333%;
}

.small-margin-collapse > .small-11 {
  width: 91.66667%;
}

.small-margin-collapse > .small-12 {
  width: 100%;
}

@media print, screen and (min-width: 40em) {
  .small-margin-collapse > .medium-1 {
    width: 8.33333%;
  }
  .small-margin-collapse > .medium-2 {
    width: 16.66667%;
  }
  .small-margin-collapse > .medium-3 {
    width: 25%;
  }
  .small-margin-collapse > .medium-4 {
    width: 33.33333%;
  }
  .small-margin-collapse > .medium-5 {
    width: 41.66667%;
  }
  .small-margin-collapse > .medium-6 {
    width: 50%;
  }
  .small-margin-collapse > .medium-7 {
    width: 58.33333%;
  }
  .small-margin-collapse > .medium-8 {
    width: 66.66667%;
  }
  .small-margin-collapse > .medium-9 {
    width: 75%;
  }
  .small-margin-collapse > .medium-10 {
    width: 83.33333%;
  }
  .small-margin-collapse > .medium-11 {
    width: 91.66667%;
  }
  .small-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .small-margin-collapse > .large-1 {
    width: 8.33333%;
  }
  .small-margin-collapse > .large-2 {
    width: 16.66667%;
  }
  .small-margin-collapse > .large-3 {
    width: 25%;
  }
  .small-margin-collapse > .large-4 {
    width: 33.33333%;
  }
  .small-margin-collapse > .large-5 {
    width: 41.66667%;
  }
  .small-margin-collapse > .large-6 {
    width: 50%;
  }
  .small-margin-collapse > .large-7 {
    width: 58.33333%;
  }
  .small-margin-collapse > .large-8 {
    width: 66.66667%;
  }
  .small-margin-collapse > .large-9 {
    width: 75%;
  }
  .small-margin-collapse > .large-10 {
    width: 83.33333%;
  }
  .small-margin-collapse > .large-11 {
    width: 91.66667%;
  }
  .small-margin-collapse > .large-12 {
    width: 100%;
  }
}
.small-padding-collapse {
  margin-right: 0;
  margin-left: 0;
}

.small-padding-collapse > .cell {
  padding-right: 0;
  padding-left: 0;
}

@media print, screen and (min-width: 40em) {
  .medium-margin-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .small-1 {
    width: 8.33333%;
  }
  .medium-margin-collapse > .small-2 {
    width: 16.66667%;
  }
  .medium-margin-collapse > .small-3 {
    width: 25%;
  }
  .medium-margin-collapse > .small-4 {
    width: 33.33333%;
  }
  .medium-margin-collapse > .small-5 {
    width: 41.66667%;
  }
  .medium-margin-collapse > .small-6 {
    width: 50%;
  }
  .medium-margin-collapse > .small-7 {
    width: 58.33333%;
  }
  .medium-margin-collapse > .small-8 {
    width: 66.66667%;
  }
  .medium-margin-collapse > .small-9 {
    width: 75%;
  }
  .medium-margin-collapse > .small-10 {
    width: 83.33333%;
  }
  .medium-margin-collapse > .small-11 {
    width: 91.66667%;
  }
  .medium-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-margin-collapse > .medium-1 {
    width: 8.33333%;
  }
  .medium-margin-collapse > .medium-2 {
    width: 16.66667%;
  }
  .medium-margin-collapse > .medium-3 {
    width: 25%;
  }
  .medium-margin-collapse > .medium-4 {
    width: 33.33333%;
  }
  .medium-margin-collapse > .medium-5 {
    width: 41.66667%;
  }
  .medium-margin-collapse > .medium-6 {
    width: 50%;
  }
  .medium-margin-collapse > .medium-7 {
    width: 58.33333%;
  }
  .medium-margin-collapse > .medium-8 {
    width: 66.66667%;
  }
  .medium-margin-collapse > .medium-9 {
    width: 75%;
  }
  .medium-margin-collapse > .medium-10 {
    width: 83.33333%;
  }
  .medium-margin-collapse > .medium-11 {
    width: 91.66667%;
  }
  .medium-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .medium-margin-collapse > .large-1 {
    width: 8.33333%;
  }
  .medium-margin-collapse > .large-2 {
    width: 16.66667%;
  }
  .medium-margin-collapse > .large-3 {
    width: 25%;
  }
  .medium-margin-collapse > .large-4 {
    width: 33.33333%;
  }
  .medium-margin-collapse > .large-5 {
    width: 41.66667%;
  }
  .medium-margin-collapse > .large-6 {
    width: 50%;
  }
  .medium-margin-collapse > .large-7 {
    width: 58.33333%;
  }
  .medium-margin-collapse > .large-8 {
    width: 66.66667%;
  }
  .medium-margin-collapse > .large-9 {
    width: 75%;
  }
  .medium-margin-collapse > .large-10 {
    width: 83.33333%;
  }
  .medium-margin-collapse > .large-11 {
    width: 91.66667%;
  }
  .medium-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 40em) {
  .medium-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-margin-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .small-1 {
    width: 8.33333%;
  }
  .large-margin-collapse > .small-2 {
    width: 16.66667%;
  }
  .large-margin-collapse > .small-3 {
    width: 25%;
  }
  .large-margin-collapse > .small-4 {
    width: 33.33333%;
  }
  .large-margin-collapse > .small-5 {
    width: 41.66667%;
  }
  .large-margin-collapse > .small-6 {
    width: 50%;
  }
  .large-margin-collapse > .small-7 {
    width: 58.33333%;
  }
  .large-margin-collapse > .small-8 {
    width: 66.66667%;
  }
  .large-margin-collapse > .small-9 {
    width: 75%;
  }
  .large-margin-collapse > .small-10 {
    width: 83.33333%;
  }
  .large-margin-collapse > .small-11 {
    width: 91.66667%;
  }
  .large-margin-collapse > .small-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .medium-1 {
    width: 8.33333%;
  }
  .large-margin-collapse > .medium-2 {
    width: 16.66667%;
  }
  .large-margin-collapse > .medium-3 {
    width: 25%;
  }
  .large-margin-collapse > .medium-4 {
    width: 33.33333%;
  }
  .large-margin-collapse > .medium-5 {
    width: 41.66667%;
  }
  .large-margin-collapse > .medium-6 {
    width: 50%;
  }
  .large-margin-collapse > .medium-7 {
    width: 58.33333%;
  }
  .large-margin-collapse > .medium-8 {
    width: 66.66667%;
  }
  .large-margin-collapse > .medium-9 {
    width: 75%;
  }
  .large-margin-collapse > .medium-10 {
    width: 83.33333%;
  }
  .large-margin-collapse > .medium-11 {
    width: 91.66667%;
  }
  .large-margin-collapse > .medium-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-margin-collapse > .large-1 {
    width: 8.33333%;
  }
  .large-margin-collapse > .large-2 {
    width: 16.66667%;
  }
  .large-margin-collapse > .large-3 {
    width: 25%;
  }
  .large-margin-collapse > .large-4 {
    width: 33.33333%;
  }
  .large-margin-collapse > .large-5 {
    width: 41.66667%;
  }
  .large-margin-collapse > .large-6 {
    width: 50%;
  }
  .large-margin-collapse > .large-7 {
    width: 58.33333%;
  }
  .large-margin-collapse > .large-8 {
    width: 66.66667%;
  }
  .large-margin-collapse > .large-9 {
    width: 75%;
  }
  .large-margin-collapse > .large-10 {
    width: 83.33333%;
  }
  .large-margin-collapse > .large-11 {
    width: 91.66667%;
  }
  .large-margin-collapse > .large-12 {
    width: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .large-padding-collapse {
    margin-right: 0;
    margin-left: 0;
  }
  .large-padding-collapse > .cell {
    padding-right: 0;
    padding-left: 0;
  }
}
.small-offset-0 {
  margin-left: 0%;
}

.grid-margin-x > .small-offset-0 {
  margin-left: calc(0% + 0.9375rem);
}

.small-offset-1 {
  margin-left: 8.33333%;
}

.grid-margin-x > .small-offset-1 {
  margin-left: calc(8.33333% + 0.9375rem);
}

.small-offset-2 {
  margin-left: 16.66667%;
}

.grid-margin-x > .small-offset-2 {
  margin-left: calc(16.66667% + 0.9375rem);
}

.small-offset-3 {
  margin-left: 25%;
}

.grid-margin-x > .small-offset-3 {
  margin-left: calc(25% + 0.9375rem);
}

.small-offset-4 {
  margin-left: 33.33333%;
}

.grid-margin-x > .small-offset-4 {
  margin-left: calc(33.33333% + 0.9375rem);
}

.small-offset-5 {
  margin-left: 41.66667%;
}

.grid-margin-x > .small-offset-5 {
  margin-left: calc(41.66667% + 0.9375rem);
}

.small-offset-6 {
  margin-left: 50%;
}

.grid-margin-x > .small-offset-6 {
  margin-left: calc(50% + 0.9375rem);
}

.small-offset-7 {
  margin-left: 58.33333%;
}

.grid-margin-x > .small-offset-7 {
  margin-left: calc(58.33333% + 0.9375rem);
}

.small-offset-8 {
  margin-left: 66.66667%;
}

.grid-margin-x > .small-offset-8 {
  margin-left: calc(66.66667% + 0.9375rem);
}

.small-offset-9 {
  margin-left: 75%;
}

.grid-margin-x > .small-offset-9 {
  margin-left: calc(75% + 0.9375rem);
}

.small-offset-10 {
  margin-left: 83.33333%;
}

.grid-margin-x > .small-offset-10 {
  margin-left: calc(83.33333% + 0.9375rem);
}

.small-offset-11 {
  margin-left: 91.66667%;
}

.grid-margin-x > .small-offset-11 {
  margin-left: calc(91.66667% + 0.9375rem);
}

@media print, screen and (min-width: 40em) {
  .medium-offset-0 {
    margin-left: 0%;
  }
  .grid-margin-x > .medium-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }
  .medium-offset-1 {
    margin-left: 8.33333%;
  }
  .grid-margin-x > .medium-offset-1 {
    margin-left: calc(8.33333% + 0.9375rem);
  }
  .medium-offset-2 {
    margin-left: 16.66667%;
  }
  .grid-margin-x > .medium-offset-2 {
    margin-left: calc(16.66667% + 0.9375rem);
  }
  .medium-offset-3 {
    margin-left: 25%;
  }
  .grid-margin-x > .medium-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }
  .medium-offset-4 {
    margin-left: 33.33333%;
  }
  .grid-margin-x > .medium-offset-4 {
    margin-left: calc(33.33333% + 0.9375rem);
  }
  .medium-offset-5 {
    margin-left: 41.66667%;
  }
  .grid-margin-x > .medium-offset-5 {
    margin-left: calc(41.66667% + 0.9375rem);
  }
  .medium-offset-6 {
    margin-left: 50%;
  }
  .grid-margin-x > .medium-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }
  .medium-offset-7 {
    margin-left: 58.33333%;
  }
  .grid-margin-x > .medium-offset-7 {
    margin-left: calc(58.33333% + 0.9375rem);
  }
  .medium-offset-8 {
    margin-left: 66.66667%;
  }
  .grid-margin-x > .medium-offset-8 {
    margin-left: calc(66.66667% + 0.9375rem);
  }
  .medium-offset-9 {
    margin-left: 75%;
  }
  .grid-margin-x > .medium-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }
  .medium-offset-10 {
    margin-left: 83.33333%;
  }
  .grid-margin-x > .medium-offset-10 {
    margin-left: calc(83.33333% + 0.9375rem);
  }
  .medium-offset-11 {
    margin-left: 91.66667%;
  }
  .grid-margin-x > .medium-offset-11 {
    margin-left: calc(91.66667% + 0.9375rem);
  }
}
@media print, screen and (min-width: 64em) {
  .large-offset-0 {
    margin-left: 0%;
  }
  .grid-margin-x > .large-offset-0 {
    margin-left: calc(0% + 0.9375rem);
  }
  .large-offset-1 {
    margin-left: 8.33333%;
  }
  .grid-margin-x > .large-offset-1 {
    margin-left: calc(8.33333% + 0.9375rem);
  }
  .large-offset-2 {
    margin-left: 16.66667%;
  }
  .grid-margin-x > .large-offset-2 {
    margin-left: calc(16.66667% + 0.9375rem);
  }
  .large-offset-3 {
    margin-left: 25%;
  }
  .grid-margin-x > .large-offset-3 {
    margin-left: calc(25% + 0.9375rem);
  }
  .large-offset-4 {
    margin-left: 33.33333%;
  }
  .grid-margin-x > .large-offset-4 {
    margin-left: calc(33.33333% + 0.9375rem);
  }
  .large-offset-5 {
    margin-left: 41.66667%;
  }
  .grid-margin-x > .large-offset-5 {
    margin-left: calc(41.66667% + 0.9375rem);
  }
  .large-offset-6 {
    margin-left: 50%;
  }
  .grid-margin-x > .large-offset-6 {
    margin-left: calc(50% + 0.9375rem);
  }
  .large-offset-7 {
    margin-left: 58.33333%;
  }
  .grid-margin-x > .large-offset-7 {
    margin-left: calc(58.33333% + 0.9375rem);
  }
  .large-offset-8 {
    margin-left: 66.66667%;
  }
  .grid-margin-x > .large-offset-8 {
    margin-left: calc(66.66667% + 0.9375rem);
  }
  .large-offset-9 {
    margin-left: 75%;
  }
  .grid-margin-x > .large-offset-9 {
    margin-left: calc(75% + 0.9375rem);
  }
  .large-offset-10 {
    margin-left: 83.33333%;
  }
  .grid-margin-x > .large-offset-10 {
    margin-left: calc(83.33333% + 0.9375rem);
  }
  .large-offset-11 {
    margin-left: 91.66667%;
  }
  .grid-margin-x > .large-offset-11 {
    margin-left: calc(91.66667% + 0.9375rem);
  }
}
.grid-y {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
}

.grid-y > .cell {
  width: auto;
  max-width: none;
}

.grid-y > .auto {
  height: auto;
}

.grid-y > .shrink {
  height: auto;
}

.grid-y > .small-shrink, .grid-y > .small-full, .grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}

@media print, screen and (min-width: 40em) {
  .grid-y > .medium-shrink, .grid-y > .medium-full, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-shrink, .grid-y > .large-full, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }
}
.grid-y > .small-1, .grid-y > .small-2, .grid-y > .small-3, .grid-y > .small-4, .grid-y > .small-5, .grid-y > .small-6, .grid-y > .small-7, .grid-y > .small-8, .grid-y > .small-9, .grid-y > .small-10, .grid-y > .small-11, .grid-y > .small-12 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.grid-y > .small-1 {
  height: 8.33333%;
}

.grid-y > .small-2 {
  height: 16.66667%;
}

.grid-y > .small-3 {
  height: 25%;
}

.grid-y > .small-4 {
  height: 33.33333%;
}

.grid-y > .small-5 {
  height: 41.66667%;
}

.grid-y > .small-6 {
  height: 50%;
}

.grid-y > .small-7 {
  height: 58.33333%;
}

.grid-y > .small-8 {
  height: 66.66667%;
}

.grid-y > .small-9 {
  height: 75%;
}

.grid-y > .small-10 {
  height: 83.33333%;
}

.grid-y > .small-11 {
  height: 91.66667%;
}

.grid-y > .small-12 {
  height: 100%;
}

@media print, screen and (min-width: 40em) {
  .grid-y > .medium-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .medium-shrink, .grid-y > .medium-1, .grid-y > .medium-2, .grid-y > .medium-3, .grid-y > .medium-4, .grid-y > .medium-5, .grid-y > .medium-6, .grid-y > .medium-7, .grid-y > .medium-8, .grid-y > .medium-9, .grid-y > .medium-10, .grid-y > .medium-11, .grid-y > .medium-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .grid-y > .medium-shrink {
    height: auto;
  }
  .grid-y > .medium-1 {
    height: 8.33333%;
  }
  .grid-y > .medium-2 {
    height: 16.66667%;
  }
  .grid-y > .medium-3 {
    height: 25%;
  }
  .grid-y > .medium-4 {
    height: 33.33333%;
  }
  .grid-y > .medium-5 {
    height: 41.66667%;
  }
  .grid-y > .medium-6 {
    height: 50%;
  }
  .grid-y > .medium-7 {
    height: 58.33333%;
  }
  .grid-y > .medium-8 {
    height: 66.66667%;
  }
  .grid-y > .medium-9 {
    height: 75%;
  }
  .grid-y > .medium-10 {
    height: 83.33333%;
  }
  .grid-y > .medium-11 {
    height: 91.66667%;
  }
  .grid-y > .medium-12 {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y > .large-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    height: auto;
  }
  .grid-y > .large-shrink, .grid-y > .large-1, .grid-y > .large-2, .grid-y > .large-3, .grid-y > .large-4, .grid-y > .large-5, .grid-y > .large-6, .grid-y > .large-7, .grid-y > .large-8, .grid-y > .large-9, .grid-y > .large-10, .grid-y > .large-11, .grid-y > .large-12 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
  .grid-y > .large-shrink {
    height: auto;
  }
  .grid-y > .large-1 {
    height: 8.33333%;
  }
  .grid-y > .large-2 {
    height: 16.66667%;
  }
  .grid-y > .large-3 {
    height: 25%;
  }
  .grid-y > .large-4 {
    height: 33.33333%;
  }
  .grid-y > .large-5 {
    height: 41.66667%;
  }
  .grid-y > .large-6 {
    height: 50%;
  }
  .grid-y > .large-7 {
    height: 58.33333%;
  }
  .grid-y > .large-8 {
    height: 66.66667%;
  }
  .grid-y > .large-9 {
    height: 75%;
  }
  .grid-y > .large-10 {
    height: 83.33333%;
  }
  .grid-y > .large-11 {
    height: 91.66667%;
  }
  .grid-y > .large-12 {
    height: 100%;
  }
}
.grid-padding-y .grid-padding-y {
  margin-top: -0.9375rem;
  margin-bottom: -0.9375rem;
}

.grid-padding-y > .cell {
  padding-top: 0.9375rem;
  padding-bottom: 0.9375rem;
}

.grid-margin-y {
  margin-top: -0.9375rem;
  margin-bottom: -0.9375rem;
}

.grid-margin-y > .cell {
  height: calc(100% - 1.875rem);
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}

.grid-margin-y > .auto {
  height: auto;
}

.grid-margin-y > .shrink {
  height: auto;
}

.grid-margin-y > .small-1 {
  height: calc(8.33333% - 1.875rem);
}

.grid-margin-y > .small-2 {
  height: calc(16.66667% - 1.875rem);
}

.grid-margin-y > .small-3 {
  height: calc(25% - 1.875rem);
}

.grid-margin-y > .small-4 {
  height: calc(33.33333% - 1.875rem);
}

.grid-margin-y > .small-5 {
  height: calc(41.66667% - 1.875rem);
}

.grid-margin-y > .small-6 {
  height: calc(50% - 1.875rem);
}

.grid-margin-y > .small-7 {
  height: calc(58.33333% - 1.875rem);
}

.grid-margin-y > .small-8 {
  height: calc(66.66667% - 1.875rem);
}

.grid-margin-y > .small-9 {
  height: calc(75% - 1.875rem);
}

.grid-margin-y > .small-10 {
  height: calc(83.33333% - 1.875rem);
}

.grid-margin-y > .small-11 {
  height: calc(91.66667% - 1.875rem);
}

.grid-margin-y > .small-12 {
  height: calc(100% - 1.875rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto {
    height: auto;
  }
  .grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.33333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.66667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.33333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.66667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.33333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.66667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.33333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.66667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}
.grid-frame {
  overflow: hidden;
  position: relative;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  width: 100vw;
}

.cell .grid-frame {
  width: 100%;
}

.cell-block {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-y {
  overflow-y: auto;
  max-height: 100%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.cell-block-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  max-height: 100%;
}

.cell-block-container > .grid-x {
  max-height: 100%;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

@media print, screen and (min-width: 40em) {
  .medium-grid-frame {
    overflow: hidden;
    position: relative;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100vw;
  }
  .cell .medium-grid-frame {
    width: 100%;
  }
  .medium-cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .medium-cell-block-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 100%;
  }
  .medium-cell-block-container > .grid-x {
    max-height: 100%;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .medium-cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
@media print, screen and (min-width: 64em) {
  .large-grid-frame {
    overflow: hidden;
    position: relative;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100vw;
  }
  .cell .large-grid-frame {
    width: 100%;
  }
  .large-cell-block {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .large-cell-block-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    max-height: 100%;
  }
  .large-cell-block-container > .grid-x {
    max-height: 100%;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .large-cell-block-y {
    overflow-y: auto;
    max-height: 100%;
    min-height: 100%;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}
.grid-y.grid-frame {
  width: auto;
  overflow: hidden;
  position: relative;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 100vh;
}

@media print, screen and (min-width: 40em) {
  .grid-y.medium-grid-frame {
    width: auto;
    overflow: hidden;
    position: relative;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 100vh;
  }
}
@media print, screen and (min-width: 64em) {
  .grid-y.large-grid-frame {
    width: auto;
    overflow: hidden;
    position: relative;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    height: 100vh;
  }
}
.cell .grid-y.grid-frame {
  height: 100%;
}

@media print, screen and (min-width: 40em) {
  .cell .grid-y.medium-grid-frame {
    height: 100%;
  }
}
@media print, screen and (min-width: 64em) {
  .cell .grid-y.large-grid-frame {
    height: 100%;
  }
}
.grid-margin-y {
  margin-top: -0.9375rem;
  margin-bottom: -0.9375rem;
}

.grid-margin-y > .cell {
  height: calc(100% - 1.875rem);
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
}

.grid-margin-y > .auto {
  height: auto;
}

.grid-margin-y > .shrink {
  height: auto;
}

.grid-margin-y > .small-1 {
  height: calc(8.33333% - 1.875rem);
}

.grid-margin-y > .small-2 {
  height: calc(16.66667% - 1.875rem);
}

.grid-margin-y > .small-3 {
  height: calc(25% - 1.875rem);
}

.grid-margin-y > .small-4 {
  height: calc(33.33333% - 1.875rem);
}

.grid-margin-y > .small-5 {
  height: calc(41.66667% - 1.875rem);
}

.grid-margin-y > .small-6 {
  height: calc(50% - 1.875rem);
}

.grid-margin-y > .small-7 {
  height: calc(58.33333% - 1.875rem);
}

.grid-margin-y > .small-8 {
  height: calc(66.66667% - 1.875rem);
}

.grid-margin-y > .small-9 {
  height: calc(75% - 1.875rem);
}

.grid-margin-y > .small-10 {
  height: calc(83.33333% - 1.875rem);
}

.grid-margin-y > .small-11 {
  height: calc(91.66667% - 1.875rem);
}

.grid-margin-y > .small-12 {
  height: calc(100% - 1.875rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y > .medium-auto {
    height: auto;
  }
  .grid-margin-y > .medium-shrink {
    height: auto;
  }
  .grid-margin-y > .medium-1 {
    height: calc(8.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-2 {
    height: calc(16.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .medium-4 {
    height: calc(33.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-5 {
    height: calc(41.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .medium-7 {
    height: calc(58.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-8 {
    height: calc(66.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .medium-10 {
    height: calc(83.33333% - 1.875rem);
  }
  .grid-margin-y > .medium-11 {
    height: calc(91.66667% - 1.875rem);
  }
  .grid-margin-y > .medium-12 {
    height: calc(100% - 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y > .large-auto {
    height: auto;
  }
  .grid-margin-y > .large-shrink {
    height: auto;
  }
  .grid-margin-y > .large-1 {
    height: calc(8.33333% - 1.875rem);
  }
  .grid-margin-y > .large-2 {
    height: calc(16.66667% - 1.875rem);
  }
  .grid-margin-y > .large-3 {
    height: calc(25% - 1.875rem);
  }
  .grid-margin-y > .large-4 {
    height: calc(33.33333% - 1.875rem);
  }
  .grid-margin-y > .large-5 {
    height: calc(41.66667% - 1.875rem);
  }
  .grid-margin-y > .large-6 {
    height: calc(50% - 1.875rem);
  }
  .grid-margin-y > .large-7 {
    height: calc(58.33333% - 1.875rem);
  }
  .grid-margin-y > .large-8 {
    height: calc(66.66667% - 1.875rem);
  }
  .grid-margin-y > .large-9 {
    height: calc(75% - 1.875rem);
  }
  .grid-margin-y > .large-10 {
    height: calc(83.33333% - 1.875rem);
  }
  .grid-margin-y > .large-11 {
    height: calc(91.66667% - 1.875rem);
  }
  .grid-margin-y > .large-12 {
    height: calc(100% - 1.875rem);
  }
}
.grid-frame.grid-margin-y {
  height: calc(100vh + 1.875rem);
}

@media print, screen and (min-width: 40em) {
  .grid-margin-y.medium-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
@media print, screen and (min-width: 64em) {
  .grid-margin-y.large-grid-frame {
    height: calc(100vh + 1.875rem);
  }
}
.align-left {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.align-right {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.align-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.align-justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.align-spaced {
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.align-left.vertical.menu > li > a {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.align-right.vertical.menu > li > a {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.align-center.vertical.menu > li > a {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.align-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.align-self-top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.align-bottom {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.align-self-bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.align-middle {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-self-middle {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.align-stretch {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

.align-self-stretch {
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}

.align-center-middle {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.small-order-1 {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.small-order-2 {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}

.small-order-3 {
  -webkit-box-ordinal-group: 4;
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}

.small-order-4 {
  -webkit-box-ordinal-group: 5;
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}

.small-order-5 {
  -webkit-box-ordinal-group: 6;
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}

.small-order-6 {
  -webkit-box-ordinal-group: 7;
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .medium-order-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .medium-order-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  .medium-order-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }
  .medium-order-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }
  .medium-order-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
  }
  .large-order-2 {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
  }
  .large-order-3 {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
  }
  .large-order-4 {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
    order: 4;
  }
  .large-order-5 {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
    -ms-flex-order: 5;
    order: 5;
  }
  .large-order-6 {
    -webkit-box-ordinal-group: 7;
    -webkit-order: 6;
    -ms-flex-order: 6;
    order: 6;
  }
}
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.flex-child-auto {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.flex-child-grow {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.flex-child-shrink {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.flex-dir-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.flex-dir-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.flex-dir-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-dir-column-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .medium-flex-child-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .medium-flex-child-grow {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  .medium-flex-child-shrink {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  .medium-flex-dir-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .medium-flex-dir-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .medium-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .medium-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
@media print, screen and (min-width: 64em) {
  .large-flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .large-flex-child-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .large-flex-child-grow {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  .large-flex-child-shrink {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
  .large-flex-dir-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  .large-flex-dir-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .large-flex-dir-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .large-flex-dir-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}
.slide-in-down.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-in-down.mui-enter.mui-enter-active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.slide-in-left.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-in-left.mui-enter.mui-enter-active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.slide-in-up.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-in-up.mui-enter.mui-enter-active {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.slide-in-right.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-in-right.mui-enter.mui-enter-active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.slide-out-down.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-out-down.mui-leave.mui-leave-active {
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.slide-out-right.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-out-right.mui-leave.mui-leave-active {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

.slide-out-up.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-out-up.mui-leave.mui-leave-active {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.slide-out-left.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slide-out-left.mui-leave.mui-leave-active {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

.fade-in.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.fade-in.mui-enter.mui-enter-active {
  opacity: 1;
}

.fade-out.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  opacity: 1;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.fade-out.mui-leave.mui-leave-active {
  opacity: 0;
}

.hinge-in-from-top.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(-90deg);
  transform: perspective(2000px) rotateX(-90deg);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-top.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-right.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(-90deg);
  transform: perspective(2000px) rotateY(-90deg);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-right.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-bottom.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(90deg);
  transform: perspective(2000px) rotateX(90deg);
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-bottom.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-left.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(90deg);
  transform: perspective(2000px) rotateY(90deg);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-left.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-middle-x.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateX(-90deg);
  transform: perspective(2000px) rotateX(-90deg);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-middle-x.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-in-from-middle-y.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotateY(-90deg);
  transform: perspective(2000px) rotateY(-90deg);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.hinge-in-from-middle-y.mui-enter.mui-enter-active {
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  opacity: 1;
}

.hinge-out-from-top.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-top.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(90deg);
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0;
}

.hinge-out-from-right.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-right.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(90deg);
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0;
}

.hinge-out-from-bottom.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: bottom;
  -ms-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-bottom.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(-90deg);
  transform: perspective(2000px) rotateX(-90deg);
  opacity: 0;
}

.hinge-out-from-left.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-left.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(-90deg);
  transform: perspective(2000px) rotateY(-90deg);
  opacity: 0;
}

.hinge-out-from-middle-x.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-middle-x.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateX(90deg);
  transform: perspective(2000px) rotateX(90deg);
  opacity: 0;
}

.hinge-out-from-middle-y.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: perspective(2000px) rotate(0deg);
  transform: perspective(2000px) rotate(0deg);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.hinge-out-from-middle-y.mui-leave.mui-leave-active {
  -webkit-transform: perspective(2000px) rotateY(90deg);
  transform: perspective(2000px) rotateY(90deg);
  opacity: 0;
}

.scale-in-up.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.scale-in-up.mui-enter.mui-enter-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.scale-in-down.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.scale-in-down.mui-enter.mui-enter-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.scale-out-up.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.scale-out-up.mui-leave.mui-leave-active {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  opacity: 0;
}

.scale-out-down.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.scale-out-down.mui-leave.mui-leave-active {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  opacity: 0;
}

.spin-in.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotate(-0.75turn);
  -ms-transform: rotate(-0.75turn);
  transform: rotate(-0.75turn);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.spin-in.mui-enter.mui-enter-active {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1;
}

.spin-out.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.spin-out.mui-leave.mui-leave-active {
  -webkit-transform: rotate(0.75turn);
  -ms-transform: rotate(0.75turn);
  transform: rotate(0.75turn);
  opacity: 0;
}

.spin-in-ccw.mui-enter {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotate(0.75turn);
  -ms-transform: rotate(0.75turn);
  transform: rotate(0.75turn);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 0;
}

.spin-in-ccw.mui-enter.mui-enter-active {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  opacity: 1;
}

.spin-out-ccw.mui-leave {
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
  opacity: 1;
}

.spin-out-ccw.mui-leave.mui-leave-active {
  -webkit-transform: rotate(-0.75turn);
  -ms-transform: rotate(-0.75turn);
  transform: rotate(-0.75turn);
  opacity: 0;
}

.slow {
  -webkit-transition-duration: 750ms !important;
  transition-duration: 750ms !important;
}

.fast {
  -webkit-transition-duration: 250ms !important;
  transition-duration: 250ms !important;
}

.linear {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.ease {
  -webkit-transition-timing-function: ease !important;
  transition-timing-function: ease !important;
}

.ease-in {
  -webkit-transition-timing-function: ease-in !important;
  transition-timing-function: ease-in !important;
}

.ease-out {
  -webkit-transition-timing-function: ease-out !important;
  transition-timing-function: ease-out !important;
}

.ease-in-out {
  -webkit-transition-timing-function: ease-in-out !important;
  transition-timing-function: ease-in-out !important;
}

.bounce-in {
  -webkit-transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

.bounce-out {
  -webkit-transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
  transition-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

.bounce-in-out {
  -webkit-transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
  transition-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

.short-delay {
  -webkit-transition-delay: 300ms !important;
  transition-delay: 300ms !important;
}

.long-delay {
  -webkit-transition-delay: 700ms !important;
  transition-delay: 700ms !important;
}

.shake {
  -webkit-animation-name: shake-7;
  animation-name: shake-7;
}

@-webkit-keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    -webkit-transform: translateX(7%);
    transform: translateX(7%);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    -webkit-transform: translateX(-7%);
    transform: translateX(-7%);
  }
}
@keyframes shake-7 {
  0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    -webkit-transform: translateX(7%);
    transform: translateX(7%);
  }
  5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
    -webkit-transform: translateX(-7%);
    transform: translateX(-7%);
  }
}
.spin-cw {
  -webkit-animation-name: spin-cw-1turn;
  animation-name: spin-cw-1turn;
}

@-webkit-keyframes spin-cw-1turn {
  0% {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes spin-cw-1turn {
  0% {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.spin-ccw {
  -webkit-animation-name: spin-ccw-1turn;
  animation-name: spin-ccw-1turn;
}

@-webkit-keyframes spin-ccw-1turn {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes spin-ccw-1turn {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
.wiggle {
  -webkit-animation-name: wiggle-7deg;
  animation-name: wiggle-7deg;
}

@-webkit-keyframes wiggle-7deg {
  40%, 50%, 60% {
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  35%, 45%, 55%, 65% {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  0%, 30%, 70%, 100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes wiggle-7deg {
  40%, 50%, 60% {
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  35%, 45%, 55%, 65% {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  0%, 30%, 70%, 100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
.shake,
.spin-cw,
.spin-ccw,
.wiggle {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.slow {
  -webkit-animation-duration: 750ms !important;
  animation-duration: 750ms !important;
}

.fast {
  -webkit-animation-duration: 250ms !important;
  animation-duration: 250ms !important;
}

.linear {
  -webkit-animation-timing-function: linear !important;
  animation-timing-function: linear !important;
}

.ease {
  -webkit-animation-timing-function: ease !important;
  animation-timing-function: ease !important;
}

.ease-in {
  -webkit-animation-timing-function: ease-in !important;
  animation-timing-function: ease-in !important;
}

.ease-out {
  -webkit-animation-timing-function: ease-out !important;
  animation-timing-function: ease-out !important;
}

.ease-in-out {
  -webkit-animation-timing-function: ease-in-out !important;
  animation-timing-function: ease-in-out !important;
}

.bounce-in {
  -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.24, 1.245) !important;
}

.bounce-out {
  -webkit-animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
  animation-timing-function: cubic-bezier(0.485, 0.155, 0.515, 0.845) !important;
}

.bounce-in-out {
  -webkit-animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
  animation-timing-function: cubic-bezier(0.76, -0.245, 0.24, 1.245) !important;
}

.short-delay {
  -webkit-animation-delay: 300ms !important;
  animation-delay: 300ms !important;
}

.long-delay {
  -webkit-animation-delay: 700ms !important;
  animation-delay: 700ms !important;
}

.splide__container {
  box-sizing: border-box;
  position: relative;
}

.splide__list {
  backface-visibility: hidden;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.splide.is-initialized:not(.is-active) .splide__list {
  display: block;
}

.splide__pagination {
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}

.splide__pagination li {
  display: inline-block;
  line-height: 1;
  list-style-type: none;
  margin: 0;
  pointer-events: auto;
}

.splide:not(.is-overflow) .splide__pagination {
  display: none;
}

.splide__progress__bar {
  width: 0;
}

.splide {
  position: relative;
  visibility: hidden;
}

.splide.is-initialized, .splide.is-rendered {
  visibility: visible;
}

.splide__slide {
  backface-visibility: hidden;
  box-sizing: border-box;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  list-style-type: none !important;
  margin: 0;
  position: relative;
}

.splide__slide img {
  vertical-align: bottom;
}

.splide__spinner {
  animation: splide-loading 1s linear infinite;
  border: 2px solid #999;
  border-left-color: transparent;
  border-radius: 50%;
  bottom: 0;
  contain: strict;
  display: inline-block;
  height: 20px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
}

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

.splide__toggle.is-active .splide__toggle__play, .splide__toggle__pause {
  display: none;
}

.splide__toggle.is-active .splide__toggle__pause {
  display: inline;
}

.splide__track {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

@keyframes splide-loading {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
.splide__track--draggable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.splide__track--fade > .splide__list > .splide__slide {
  margin: 0 !important;
  opacity: 0;
  z-index: 0;
}

.splide__track--fade > .splide__list > .splide__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.splide--rtl {
  direction: rtl;
}

.splide__track--ttb > .splide__list {
  display: block;
}

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: #ccc;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  z-index: 1;
}

.splide__arrow svg {
  fill: #000;
  height: 1.2em;
  width: 1.2em;
}

.splide__arrow:hover:not(:disabled) {
  opacity: 0.9;
}

.splide__arrow:disabled {
  opacity: 0.3;
}

.splide__arrow:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__arrow--prev {
  left: 1em;
}

.splide__arrow--prev svg {
  transform: scaleX(-1);
}

.splide__arrow--next {
  right: 1em;
}

.splide.is-focus-in .splide__arrow:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}

.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  position: relative;
  transition: transform 0.2s linear;
  width: 8px;
}

.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
  z-index: 1;
}

.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}

.splide__pagination__page:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__pagination__page:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__progress__bar {
  background: #ccc;
  height: 3px;
}

.splide__slide {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.splide__slide:focus {
  outline: 0;
}

@supports (outline-offset: -3px) {
  .splide__slide:focus-visible {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide__slide:focus-visible {
    border: 3px solid #0bf;
  }
}
@supports (outline-offset: -3px) {
  .splide.is-focus-in .splide__slide:focus {
    outline: 3px solid #0bf;
    outline-offset: -3px;
  }
}
@media screen and (-ms-high-contrast: none) {
  .splide.is-focus-in .splide__slide:focus {
    border: 3px solid #0bf;
  }
  .splide.is-focus-in .splide__track > .splide__list > .splide__slide:focus {
    border-color: #0bf;
  }
}
.splide__toggle {
  cursor: pointer;
}

.splide__toggle:focus-visible {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide.is-focus-in .splide__toggle:focus {
  outline: 3px solid #0bf;
  outline-offset: 3px;
}

.splide__track--nav > .splide__list > .splide__slide {
  border: 3px solid transparent;
  cursor: pointer;
}

.splide__track--nav > .splide__list > .splide__slide.is-active {
  border: 3px solid #000;
}

.splide__arrows--rtl .splide__arrow--prev {
  left: auto;
  right: 1em;
}

.splide__arrows--rtl .splide__arrow--prev svg {
  transform: scaleX(1);
}

.splide__arrows--rtl .splide__arrow--next {
  left: 1em;
  right: auto;
}

.splide__arrows--rtl .splide__arrow--next svg {
  transform: scaleX(-1);
}

.splide__arrows--ttb .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}

.splide__arrows--ttb .splide__arrow--prev {
  top: 1em;
}

.splide__arrows--ttb .splide__arrow--prev svg {
  transform: rotate(-90deg);
}

.splide__arrows--ttb .splide__arrow--next {
  bottom: 1em;
  top: auto;
}

.splide__arrows--ttb .splide__arrow--next svg {
  transform: rotate(90deg);
}

.splide__pagination--ttb {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

html {
  scroll-behavior: smooth;
  font-size-adjust: 100%;
}

html, body {
  max-width: 100%;
}

body {
  font-size: 14px;
  font-size: 0.875rem;
  background: #fff;
  box-sizing: border-box;
  font-family: "Inter";
  line-height: 1.6;
  color: #181A1D;
}

.navigation, .breadcrumbs, .page-header .header.panel, .footer.content, .page-wrapper > .widget, .page-wrapper > .page-bottom, .block.category.event, .top-container, .page-main {
  max-width: 1400px;
}

input[type=text], input[type=password], input[type=url], input[type=tel], input[type=search], input[type=number], input[type*=date], input[type=email], select {
  border: 1px solid #4F5154;
  height: 50px;
  font-family: "Inter";
  padding: 10px 16px;
  border-radius: 8px;
}

textarea {
  border: 1px solid #4F5154;
  font-family: "Inter";
  padding: 10px 16px;
  border-radius: 8px;
}

.action.primary,
.action-primary,
.amcompany-button.-fill.-primary:not(.-disabled),
.amcompany-customer-account .page-main .action.primary {
  font-family: "Inter";
  background-color: #007038;
  border-color: #007038;
  font-size: 16px;
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.action.primary:hover, .action.primary:active, .action.primary:focus,
.action-primary:hover,
.action-primary:active,
.action-primary:focus,
.amcompany-button.-fill.-primary:not(.-disabled):hover,
.amcompany-button.-fill.-primary:not(.-disabled):active,
.amcompany-button.-fill.-primary:not(.-disabled):focus,
.amcompany-customer-account .page-main .action.primary:hover,
.amcompany-customer-account .page-main .action.primary:active,
.amcompany-customer-account .page-main .action.primary:focus {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
}

.amquote-addto-button {
  font-family: "Inter";
  background-color: #fff;
  border-color: #007038;
  color: #007038;
  font-size: 16px;
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: normal;
}
.amquote-addto-button:hover, .amquote-addto-button:active {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  border-color: #007038;
  box-shadow: none !important;
}

.abs-button-l, #store-selector .form-continue .actions-toolbar .action.primary, .order-review-form .action.primary, .bundle-actions .action.primary.customize, .bundle-options-container .block-bundle-summary .box-tocart .action.primary, .box-tocart .action.tocart, .cart-summary .checkout-methods-items .action.primary.checkout, .block-minicart .block-content > .actions > .primary .action.primary, .methods-shipping .actions-toolbar .action.primary, .block-authentication .action.action-register, .block-authentication .action.action-login, .checkout-payment-method .payment-method-content > .actions-toolbar > .primary .action.primary, .form-address-edit .actions-toolbar .action.primary, .box-tocart .action.instant-purchase, .multicheckout .action.primary {
  font-size: 16px;
  font-size: 1rem;
  line-height: normal;
}

h1, .h1, .catalog-product-view .block.related .block-title strong {
  font-size: 37px;
  font-size: 2.3125rem;
  line-height: 1.2;
  font-weight: 600;
  margin-top: 0;
}

h4, .h4 {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 20px;
}
h4:first-child, .h4:first-child {
  margin-top: 0;
}

.space-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

.modal-popup {
  z-index: 99998;
}

.modals-overlay {
  z-index: 99997;
}

.amquote-cart-wrapper.minicart-wrapper .amquote-showcart .counter-number {
  text-shadow: none;
}

#html-body .quote-cart-sidebar .cart-container #shopping-cart-table td.col.qty.price {
  padding-left: 0;
  margin-top: 0;
  text-align: left;
  padding-bottom: 0;
  padding: 0 0 0 185px;
  position: relative;
  top: -20px;
}
#html-body .quote-cart-sidebar .cart-container #shopping-cart-table td.col.qty.price .cart-price .price {
  font-size: 18px;
}
#html-body .quote-cart-sidebar .cart.actions {
  display: flex;
}
#html-body .quote-cart-sidebar .cart.actions .action.clear-quote,
#html-body .quote-cart-sidebar .cart.actions .action.update {
  font-family: "Inter";
  font-size: 16px;
  font-size: 1rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: normal;
  display: inline-block;
  width: 50%;
  padding: 10px 0;
  cursor: pointer;
}
#html-body .quote-cart-sidebar .cart.actions .action.clear-quote,
#html-body .quote-cart-sidebar .cart.actions .action.update {
  background-color: #fff;
  color: #007038;
  border: 1px solid #007038;
  margin-bottom: 12px;
}
#html-body .quote-cart-sidebar .cart.actions .action.clear-quote:hover, #html-body .quote-cart-sidebar .cart.actions .action.clear-quote:active,
#html-body .quote-cart-sidebar .cart.actions .action.update:hover,
#html-body .quote-cart-sidebar .cart.actions .action.update:active {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  color: #fff;
  box-shadow: none !important;
}
#html-body .quote-cart-container div[name="data.firstname"],
#html-body .quote-cart-container div[name="data.lastname"],
#html-body .quote-cart-container div[name="data.quote_entity.zip_code"],
#html-body .quote-cart-container div[name="data.quote_entity.phone_number"],
#html-body .quote-cart-container div[name="data.quote_entity.address_city"],
#html-body .quote-cart-container div[name="data.quote_entity.address_state"],
#html-body .quote-cart-container div[name="data.quote_entity.address_zip"],
#html-body .quote-cart-container div[name="data.quote_entity.address_country"] {
  width: 48%;
  float: left;
}
#html-body .quote-cart-container div[name="data.firstname"] .label:after,
#html-body .quote-cart-container div[name="data.lastname"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.zip_code"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.phone_number"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.address_city"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.address_state"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.address_zip"] .label:after,
#html-body .quote-cart-container div[name="data.quote_entity.address_country"] .label:after {
  position: absolute;
}
#html-body .quote-cart-container div[name="data.lastname"],
#html-body .quote-cart-container div[name="data.quote_entity.phone_number"],
#html-body .quote-cart-container div[name="data.quote_entity.address_state"],
#html-body .quote-cart-container div[name="data.quote_entity.address_country"] {
  margin-left: 4%;
}
#html-body .quote-cart-container div[name="data.quote_entity.phone_number"] {
  margin-bottom: 20px;
}
#html-body .quote-cart-container div[name="data.quote_entity.ship_on"],
#html-body .quote-cart-container div[name="data.quote_entity.payment_terms"],
#html-body .quote-cart-container div[name="data.quote_entity.po_number"] {
  display: none !important;
}

.quote-cart-sidebar {
  display: flex;
  flex-direction: column;
}
.quote-cart-sidebar .cart-summary {
  order: 2;
}
.quote-cart-sidebar .cart-container {
  background: #f5f5f5;
  padding: 1px 20px 25px;
}
.quote-cart-sidebar .cart-container .form-cart.amasty-quote-update {
  padding: 0;
}

.amasty_quote-quote-success #maincontent, .checkout-onepage-success #maincontent {
  text-align: center;
  padding-top: 60px;
}
.amasty_quote-quote-success #maincontent .actions-toolbar, .checkout-onepage-success #maincontent .actions-toolbar {
  display: flex;
  justify-content: center;
}
.amasty_quote-quote-success #maincontent .actions-toolbar .action.primary.continue, .checkout-onepage-success #maincontent .actions-toolbar .action.primary.continue {
  margin-right: 0;
  line-height: 34px;
}

.block-minicart .subtitle.empty {
  width: 100%;
}

.account-dropdown {
  z-index: 10;
}

.customer-account-login #maincontent .actions-toolbar {
  display: flex;
  align-items: center;
}
.customer-account-login #maincontent .actions-toolbar .secondary a.action {
  margin-top: 0;
}
.customer-account-login #maincontent button, .customer-account-login #maincontent a.action.primary {
  border-radius: 8px;
}

.customer-account-create .page-title-wrapper,
.customer-account-login .page-title-wrapper,
body.account .page-title-wrapper {
  text-align: center;
  display: none;
}
.customer-account-create #maincontent,
.customer-account-login #maincontent,
body.account #maincontent {
  padding-top: 64px;
}

.customer-account-create .column.main,
.customer-account-login .column.main {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  text-align: center;
}
.customer-account-create .column.main .field,
.customer-account-login .column.main .field {
  text-align: left;
}
.customer-account-create .column.main .fieldset > .field > .control,
.customer-account-login .column.main .fieldset > .field > .control {
  width: 100%;
}

.customer-account-login .column.main {
  max-width: 400px;
}
.customer-account-login .login-container {
  display: flex;
  flex-direction: column;
}
.customer-account-login .login-container .fieldset:after {
  display: none;
}
.customer-account-login .login-container:before, .customer-account-login .login-container:after {
  display: none;
}
.customer-account-login .login-container > .block {
  width: 100%;
}
.customer-account-login .login-container .block-customer-login .field.note {
  text-align: center;
}
.customer-account-login .login-container .block-customer-login .actions-toolbar {
  flex-direction: column;
}
.customer-account-login .login-container .block-customer-login .actions-toolbar .primary {
  width: 100%;
}
.customer-account-login .login-container .block-customer-login .actions-toolbar .action.login.primary {
  margin: 0 0 16px;
  width: 100%;
}
.customer-account-login .login-container .block-customer-login .actions-toolbar:before, .customer-account-login .login-container .block-customer-login .actions-toolbar:after {
  display: none;
}
.customer-account-login .login-container .block-new-customer .actions-toolbar {
  flex-direction: column;
}
.customer-account-login .login-container .block-new-customer .actions-toolbar .primary {
  width: 100%;
}
.customer-account-login .login-container .block-new-customer .actions-toolbar .action.create.primary {
  margin: 0;
  width: 100%;
}
.customer-account-login .login-container .block-new-customer .actions-toolbar:before, .customer-account-login .login-container .block-new-customer .actions-toolbar:after {
  display: none;
}

.form-create-account {
  padding: 0 0 64px;
}
.form-create-account .fieldset.create.info legend,
.form-create-account .fieldset.create.account legend {
  font-size: 1.8rem;
  font-weight: 500;
}
.form-create-account .fieldset.create.info legend span,
.form-create-account .fieldset.create.account legend span {
  font-size: 1.8rem;
  font-weight: 500;
}
.form-create-account .fieldset.create.info:after,
.form-create-account .fieldset.create.account:after {
  display: none;
}
.form-create-account .fieldset.additional_info {
  display: none;
}
.form-create-account .actions-toolbar {
  flex-direction: column;
}
.form-create-account .actions-toolbar .primary {
  width: 100%;
}
.form-create-account .actions-toolbar .action.create.primary {
  margin: 0;
  width: 100%;
}
.form-create-account .actions-toolbar:before, .form-create-account .actions-toolbar:after {
  display: none;
}

.block-collapsible-nav .content {
  background: #edf5f1;
}
.block-collapsible-nav .item.current > strong {
  border-color: #007038;
}
.block-collapsible-nav .item a:hover {
  background: rgb(80.0840336134%, 88.9355742297%, 84.5098039216%);
}

body.account .column.main .block-title > strong {
  font-size: 1.8rem !important;
  font-weight: 500 !important;
}
body.account .column.main .block-title > span {
  font-size: 1.2rem !important;
}
body.account .column.main legend.legend > span {
  font-size: 1.8rem !important;
  font-weight: 500 !important;
}
body.account .column.main .box .box-title > span {
  font-size: 1.2rem !important;
}
body.account .column.main .box .box-content {
  font-size: 1rem;
}

.amcompany-customer-account .action.view,
.amcompany-customer-account .amcompany-profile-status,
.amcompany-customer-account .amcompany-title {
  display: none;
}
.amcompany-customer-account .amcompany-address-information p,
.amcompany-customer-account .amcompany-information p,
.amcompany-customer-account .box-contact-information p {
  margin: 0;
  font-size: 1rem;
}

#my-orders-table .col.actions .action.view {
  display: inline-block;
}

.fieldset.rate {
  margin-bottom: 0;
}

.order-details-items .table-order-items .product-item-name {
  font-size: 20px;
  font-size: 1.25rem;
}
.order-details-items .table-order-items .col.price .price-excluding-tax,
.order-details-items .table-order-items .col.price .price-including-tax,
.order-details-items .table-order-items .col.subtotal .price-excluding-tax,
.order-details-items .table-order-items .col.subtotal .price-including-tax {
  font-size: 16px;
  font-size: 1rem;
}

label.amexfee-title {
  display: none !important;
}

.vendor-note {
  background: #5bb9d6;
  color: #FFF;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}
.vendor-note p:last-of-type {
  margin: 0;
}

.page-layout-industry-news .sidebar-additional {
  display: none !important;
}
.page-layout-industry-news .columns {
  display: flex;
}
.page-layout-industry-news .columns .sidebar-main {
  width: 25%;
  order: 1;
}
.page-layout-industry-news .columns .column.main {
  width: 75%;
  order: 2;
}
@media (max-width: 768px) {
  .page-layout-industry-news .columns .column.main {
    width: 100%;
    order: 1;
  }
  .page-layout-industry-news .columns .column.main h1 {
    font-size: 28px !important;
  }
  .page-layout-industry-news .columns .sidebar-main {
    width: 100%;
    order: 2;
  }
}

.page-header {
  position: sticky;
  left: 0;
  top: 0;
  right: 0;
  z-index: 9000;
  margin-bottom: 0;
  background: #fff;
  border-bottom: 1px solid #D3D3D4;
}
.page-header.sticky {
  border-bottom: 1px solid #D3D3D4;
}
.page-header .header.content {
  padding: 0px;
  max-width: 100%;
}
.page-header .header.content .header-top {
  background: #edf5f1;
}
.page-header .header.content .header-top__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .page-header .header.content .header-top__inner {
    padding: 5px 10px;
  }
  .page-header .header.content .header-top__inner a {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .page-header .header.content .header-top__inner {
    flex-direction: column;
    justify-content: center;
  }
  .page-header .header.content .header-top__inner .top-banner-menu {
    width: 100%;
  }
}
.page-header .header.content .header-middle__inner {
  flex-wrap: nowrap;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}
@media (max-width: 768px) {
  .page-header .header.content .header-middle__inner {
    flex-wrap: wrap;
    padding: 10px;
  }
}
.page-header .header.content .header-bottom__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
}
.page-header .header.content .header-bottom__inner .rootmenu,
.page-header .header.content .header-bottom__inner .nav-sections {
  position: static;
  background: none;
  color: #000;
}
.page-header .header.content .header-bottom__inner .rootmenu .has-sub-cat:after {
  border-color: #007038;
  padding: 4px;
  width: 8px;
}
.page-header .header.content .header-bottom__inner .rootmenu .hover .has-sub-cat:after {
  border-width: 2px 0px 0px 2px;
  margin-bottom: -5px;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list {
    flex-direction: column;
  }
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li {
  border: none;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li > .megamenu {
  padding: 20px;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li > a {
  display: inline-block;
  background: none;
  color: #000;
  text-transform: none;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 4px solid #fff;
  line-height: 1.2;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li:hover > a {
  background: none;
  border-bottom: 4px solid #007038;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list .linksmenu ul > li {
  padding: 3px;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list .linksmenu ul > li > a {
  padding: 0;
  font-size: 14px;
  color: #000;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list.mobile-sub > li:hover {
  background: none !important;
}
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list.mobile-sub > li:hover a,
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list.mobile-sub > li:hover a:hover,
.page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list.mobile-sub > li:hover a.active {
  background: none !important;
  background-color: none !important;
}
.page-header .header.content .header-bottom__inner .rootmenu h4 {
  font-size: 16px;
}
.page-header .header.content .header-bottom__inner .rootmenu .root-sub-col-0 {
  display: none !important;
}
.page-header .header.content > .grid-x {
  justify-content: space-between;
}
.page-header .header.content .amsearch-form-block {
  display: block;
  width: 100% !important;
}
.page-header .header.content .block-search,
.page-header .header.content .amsearch-wrapper-block {
  padding-left: 35px;
  width: 100%;
}
@media (max-width: 768px) {
  .page-header .header.content .block-search,
  .page-header .header.content .amsearch-wrapper-block {
    padding-left: 0;
    margin-top: 0;
    padding-top: 14px;
    padding-bottom: 0;
  }
}
.page-header .header.content .block-search .amsearch-wrapper-input,
.page-header .header.content .amsearch-wrapper-block .amsearch-wrapper-input {
  width: 100%;
}
.page-header .header.content .block-search input,
.page-header .header.content .block-search .amsearch-input,
.page-header .header.content .amsearch-wrapper-block input,
.page-header .header.content .amsearch-wrapper-block .amsearch-input {
  border: 0;
  border: 1px solid #007038;
  font-size: 14px;
  font-size: 0.875rem;
  font-family: "Inter";
  padding-left: 0;
  width: 100%;
  border-radius: 0;
  transition: all 0.2 ease;
  padding: 8px 30px;
  border-radius: 4px;
}
@media (max-width: 768px) {
  .page-header .header.content .block-search input,
  .page-header .header.content .block-search .amsearch-input,
  .page-header .header.content .amsearch-wrapper-block input,
  .page-header .header.content .amsearch-wrapper-block .amsearch-input {
    height: 36px;
  }
}
.page-header .header.content .block-search input:focus,
.page-header .header.content .block-search .amsearch-input:focus,
.page-header .header.content .amsearch-wrapper-block input:focus,
.page-header .header.content .amsearch-wrapper-block .amsearch-input:focus {
  box-shadow: none;
}
.page-header .header.content .block-search .action.search,
.page-header .header.content .amsearch-wrapper-block .action.search {
  height: 100%;
}
.page-header .header.content .block-search .action.search:before,
.page-header .header.content .amsearch-wrapper-block .action.search:before {
  color: #007038;
  font-size: 18px;
  opacity: 1 !important;
  cursor: pointer;
}
.page-header .header.content .block-search .amsearch-button.-loupe,
.page-header .header.content .amsearch-wrapper-block .amsearch-button.-loupe {
  background: none;
  margin: 0;
  height: 100%;
}
.page-header .header.content .block-search button.amsearch-button.-loupe.-clear.-icon.-disabled:before,
.page-header .header.content .amsearch-wrapper-block button.amsearch-button.-loupe.-clear.-icon.-disabled:before {
  color: #007038;
  font-size: 18px;
  opacity: 1 !important;
  cursor: pointer;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 32px;
  content: "\e615";
  font-family: "luma-icons";
  margin: 0;
  vertical-align: top;
  display: inline-block;
  font-weight: normal;
  overflow: hidden;
  text-align: center;
}
.page-header .header.content .block-search .action.search[disabled],
.page-header .header.content .amsearch-wrapper-block .action.search[disabled] {
  opacity: 1;
}
.page-header .header.content .compare.wrapper {
  display: none;
}
@media (max-width: 768px) {
  .page-header .header.content .amsearch-wrapper-block:before {
    width: calc(100% + 25px) !important;
  }
}
.page-header .logo {
  margin: 0;
  width: 100%;
  max-width: 208px;
}
@media (max-width: 768px) {
  .page-header .logo {
    max-width: 170px;
    margin-inline: auto;
  }
  .page-header .logo img {
    margin-left: 20px;
  }
}
@media (max-width: 768px) {
  .page-header .nav-toggle {
    position: relative;
    top: -4px;
    left: 0;
  }
  .page-header .nav-toggle:after {
    background-color: rgba(0, 0, 0, 0.8);
  }
  .nav-open .page-header .nav-toggle:before {
    position: fixed;
    color: #fff;
    z-index: 9999;
    top: 8px;
    right: 16px;
    content: "\e616";
  }
}
@media (max-width: 768px) {
  .page-header .minicart-wrapper {
    margin-top: 0;
    margin-bottom: 8px;
  }
}
.page-header .minicart-wrapper .action.showcart:before {
  display: none;
}
.page-header .top-banner-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-header .top-banner-menu ul li {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
}
.page-header .top-banner-menu ul li:last-of-type {
  margin-right: 0;
}
.page-header .customer-account-menu {
  margin-inline: 12px;
  position: relative;
  border-left: 1px solid #b6c2bc;
  padding-left: 15px;
}
.page-header .customer-account-menu a {
  font-size: 14px;
  font-size: 0.875rem;
  color: #007038;
}
.page-header .customer-account-menu a:hover {
  text-decoration: underline;
}
.page-header .customer-account-menu .account-dropdown {
  display: block;
  display: none;
  margin: 0;
  position: absolute;
  top: calc(100% + 25px);
  right: -64px;
  padding: 30px 0;
  list-style: none;
  background: #fff;
  font-size: 15px;
  font-size: 0.9375rem;
  white-space: nowrap;
  width: 200px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.page-header .customer-account-menu .account-dropdown li {
  margin: 0;
}
.page-header .customer-account-menu .account-dropdown a {
  display: block;
  padding: 4px 20px;
  font-weight: 700;
  color: #007038;
  text-transform: uppercase;
}
.page-header .customer-account-menu .account-dropdown .close-this-account {
  display: block;
  margin-left: auto;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #212121;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0;
}
.page-header .customer-account-menu .account-dropdown .close-this-account:before {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 16px;
  color: #181A1D;
  content: "\e616";
  font-family: "luma-icons";
  margin: 0;
  vertical-align: top;
  display: inline-block;
  font-weight: 700;
  overflow: hidden;
  speak: none;
  text-align: center;
}

.breadcrumbs {
  padding-block: 12px;
  margin-bottom: 2px;
}
.breadcrumbs .items {
  font-size: 12px;
  font-size: 0.75rem;
  color: #393B3F;
  font-family: "Inter";
}
.breadcrumbs .items a {
  color: #393B3F;
  font-weight: 400;
}
.breadcrumbs .items strong {
  font-weight: 600;
}
.breadcrumbs .items .item:not(:last-child):after {
  content: "/";
  font-size: 12px;
  margin-inline: 6px;
}

.minicart-wrapper .action.showcart {
  background: #007038;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.minicart-wrapper .action.showcart.active {
  display: flex;
}
.minicart-wrapper .action.showcart .counter-number {
  text-shadow: none;
}

.minicart-wrapper .action.showcart .counter.qty {
  background: none;
  font-weight: bold;
  margin: 0;
}
.minicart-wrapper .action.showcart .counter.qty.empty {
  display: block;
}

.message.success {
  font-size: 14px;
  font-size: 0.875rem;
}

@media (min-width: 769px) {
  .nav-sections {
    margin-bottom: 0;
    background-color: transparent;
    padding-inline: 20px;
    margin-inline: auto;
  }
  .nav-sections .navigation {
    background-color: transparent;
  }
  .nav-sections .navigation .level0 {
    padding: 0px 12px;
  }
  .nav-sections .navigation .level0 > .level-top {
    line-height: 1.5;
    padding: 0;
  }
  .nav-sections .navigation .level0.active > .level-top, .nav-sections .navigation .level0.has-active > .level-top {
    border-bottom: 0;
  }
}
.minicart-wrapper .block-minicart {
  width: 420px;
  border: 2px solid #000;
  border-radius: 4px;
  margin-top: 8px;
  color: #000;
}
.minicart-wrapper .block-minicart:before {
  right: 20px;
}
.minicart-wrapper .block-minicart:after {
  right: 19px;
  border-color: transparent transparent #000 transparent;
}
.minicart-wrapper .block-minicart .action.close {
  width: 30px;
}
.minicart-wrapper .block-minicart .action.close:before {
  color: #000;
  font-weight: 700;
}
.minicart-wrapper .block-minicart .items-total, .minicart-wrapper .block-minicart .subtotal {
  text-transform: uppercase;
  font-weight: 700;
}
.minicart-wrapper .block-minicart .minicart-items-wrapper {
  border-color: #000;
}
.minicart-wrapper .block-minicart dl.product.options.list {
  font-size: 14px;
  font-size: 0.875rem;
  margin-bottom: 0;
}
.minicart-wrapper .block-minicart .minicart-items .product-item-name {
  line-height: 1;
}
.minicart-wrapper .block-minicart .minicart-items .product-item-name a {
  color: #000;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
}
.minicart-wrapper .block-minicart .minicart-items .product .toggle {
  font-size: 14px;
  font-size: 0.875rem;
  color: #000;
}
.minicart-wrapper .block-minicart .minicart-items .product-item-pricing {
  float: left;
}
.minicart-wrapper .block-minicart .minicart-items .details-qty {
  display: none;
}
.minicart-wrapper .block-minicart .minicart-items .action.edit:before, .minicart-wrapper .block-minicart .minicart-items .action.delete:before {
  color: #007038;
}
.minicart-wrapper .block-minicart .minicart-items .product .actions {
  margin-top: 7px;
  position: absolute;
  right: 0;
  color: #007038;
}
.minicart-wrapper .block-minicart .minicart-widgets {
  margin: 0;
}
.minicart-wrapper .block-minicart .block-content > .actions > .primary .action.primary {
  font-size: 20px;
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 700;
  height: 50px;
  line-height: 1;
  border-width: 2px;
}
.minicart-wrapper .block-minicart .block-content > .actions > .primary .action.primary:hover {
  border-color: #000;
  color: #000;
  background: transparent;
}
.minicart-wrapper .block-minicart .block-content > .actions > .secondary a {
  color: #000;
  text-decoration: underline;
  font-weight: 700;
}

.quickcart-wrapper .mage-dropdown-dialog {
  display: block !important;
}
.quickcart-wrapper.minicart-wrapper .block-minicart {
  z-index: 1001;
}

.amquote-cart-wrapper .mage-dropdown-dialog {
  display: block !important;
}
.amquote-cart-wrapper.minicart-wrapper .block-minicart {
  z-index: 1001;
}
@media (max-width: 400px) {
  .amquote-cart-wrapper {
    margin-right: 6px;
  }
}

.block-quotecart #quotecart-content-wrapper {
  width: 100%;
  height: 100%;
}

.quickcart-wrapper .block-quickcart, .amquote-cart-wrapper .block-quotecart {
  box-sizing: border-box;
  border-top: 0 none;
  border-bottom: 0 none;
  height: 100%;
  width: 400px;
  min-width: inherit;
  overflow: hidden;
  padding: 0;
  position: fixed !important;
  z-index: 9000001;
  right: -550px !important;
  top: 0px;
  margin-top: 0;
  border-radius: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 0;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
}
.quickcart-wrapper .block-quickcart *, .amquote-cart-wrapper .block-quotecart * {
  box-sizing: border-box;
}
@media (max-width: 400px) {
  .quickcart-wrapper .block-quickcart, .amquote-cart-wrapper .block-quotecart {
    width: 100%;
  }
}
.quickcart-wrapper .block-quickcart .product-item-pricing, .amquote-cart-wrapper .block-quotecart .product-item-pricing {
  display: flex;
  width: calc(100% + 30px);
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  order: 3;
}
.quickcart-wrapper .block-quickcart .product-item-pricing .price-container, .amquote-cart-wrapper .block-quotecart .product-item-pricing .price-container {
  order: 5;
}
.quickcart-wrapper .block-quickcart .product-item .product, .amquote-cart-wrapper .block-quotecart .product-item .product {
  display: flex;
  align-items: stretch;
}
.quickcart-wrapper .block-quickcart .product-item .product .product-item-details, .amquote-cart-wrapper .block-quotecart .product-item .product .product-item-details {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  position: relative;
}
.quickcart-wrapper .block-quickcart .quickcart-content-wrapper, .amquote-cart-wrapper .block-quotecart .quickcart-content-wrapper {
  height: 100%;
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart, .amquote-cart-wrapper .block-quotecart .block-content-quickcart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top {
  min-height: 73px;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #007038;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top span.text, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top span.text {
  display: block;
  text-align: left;
  font-size: 18px;
  line-height: 24px;
  margin-top: 0;
  padding: 24px 20px;
  letter-spacing: 0px;
  font-weight: 600;
  color: #007038;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top button.close, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top button.close {
  right: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  opacity: 1;
  display: block;
  width: 50px;
  height: 70px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top button.close span, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top button.close span {
  position: relative;
  display: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top button.close:before, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top button.close:before {
  font-size: 16px !important;
  font-size: 16px !important;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #007038;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-top button.close:hover span, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-top button.close:hover span {
  color: #000;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .no-items-position, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .no-items-position {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper {
  border: 0 none;
  height: calc(100% - 215px) !important;
  margin: 0;
  overflow-y: auto;
  width: 100%;
  max-height: 100%;
  overflow-x: hidden;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar-track, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar, .quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper::-moz-scrollbar, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper::-moz-scrollbar {
  width: 6px;
  background-color: #F5F5F5;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar-thumb, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item {
  padding-bottom: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-name, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-name {
  max-width: 90%;
  line-height: 1.1;
  font-size: 14px;
  text-transform: initial;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-name a, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-name a {
  color: #000;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-image-wrapper, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-image-wrapper {
  margin-bottom: 10px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .action.delete span, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .action.delete span {
  background: transparent;
  display: block;
  font-size: 16px;
  height: 15px;
  margin: 0;
  position: relative;
  padding: 0;
  top: 0;
  width: 15px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .details-qty, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .details-qty {
  float: left;
  margin-top: 5px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .details-qty .spinner, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .details-qty .spinner {
  display: none;
  width: 10px;
  height: 10px;
  background-color: transparent;
  margin: 4px 12px 4px 13px;
  float: left;
  border: 1px solid #000;
  border-radius: 50%;
  border-bottom: 0 none;
  border-top: 0 none;
  top: -2px;
  position: relative;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes sk-rotateplane {
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotateX(0deg);
  }
  50% {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
  }
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container {
  float: right;
  margin-top: 5px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span {
  margin: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-including-tax, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-including-tax {
  width: 100%;
  display: table;
  text-align: right;
  line-height: 0.5;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-excluding-tax, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-excluding-tax {
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-excluding-tax span.minicart-price span.price, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span span.price-excluding-tax span.minicart-price span.price {
  font-size: 15px;
  color: #007038;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span.price, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .price-container span.price {
  font-size: 14px;
  margin: 0 0 10px 0;
  float: right;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options {
  margin: 0;
  min-height: 18px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper {
  float: left;
  margin-bottom: 5px;
  width: 100%;
  font-size: 12px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dt.label,
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dd.values, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dt.label,
.amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dd.values {
  float: left;
  margin: 0 5px 0 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dd.values, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .options .option-wrapper dd.values {
  margin: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-pricing .label, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .product-item-pricing .label {
  line-height: 16px;
  float: left;
  padding: 0px;
  width: auto;
  display: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update {
  color: #000;
  font-size: 10px;
  float: left;
  padding: 0 8px 8px 8px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update.item-minus:after, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update.item-minus:after {
  content: "-";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update.item-plus:after, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item span.qty-update.item-plus:after {
  content: "+";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2 {
  padding: 0 5px 0;
  float: left;
  font-size: 13px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-minus, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-minus {
  margin-left: 5px;
  font-family: "luma-icons";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-minus:after, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-minus:after {
  content: "−";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-plus, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-plus {
  font-family: "luma-icons";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-plus:after, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .qty-update-v2.item-plus:after {
  content: "+";
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .cart-item-qty, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item .cart-item-qty {
  color: #000;
  border: 0 none;
  float: left;
  height: auto;
  line-height: 14px;
  margin: 0;
  opacity: 1;
  padding: 0;
  text-align: center;
  font-size: 13px;
  width: auto;
  max-width: 35px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item button.update-cart-item, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item button.update-cart-item {
  display: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item:last-child, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-items-wrapper .quickcart-items .quickcart-product-item:last-child {
  border-bottom: 1px solid #ccc;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container {
  background: #fff;
  margin-top: auto;
  width: 100%;
  color: #000;
  border-top: 1px solid #007038;
  padding-top: 5px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .extra.price-row, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .extra.price-row {
  display: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .items-total, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .items-total {
  display: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .subtotal, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .subtotal {
  margin: 0;
  padding: 10px 20px;
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .subtotal span.label, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .subtotal span.label {
  float: left;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .subtotal span.label span, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .subtotal span.label span {
  font-size: 16px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .subtotal .price-container span.price, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .subtotal .price-container span.price {
  font-size: 18px;
  font-weight: 600;
  color: #007038;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .primary, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .primary {
  padding: 0 15px 10px;
  margin-top: 0;
  margin-top: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .primary .action.checkout, .quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .primary .action.amquote-top-quotecart, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .primary .action.checkout, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .primary .action.amquote-top-quotecart {
  height: 56px;
  border: 1px solid #007038;
  background: #007038;
  color: #fff;
  font-size: 18px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 25px;
  font-weight: 600;
  letter-spacing: 0px;
  padding: 0;
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .primary .action.checkout:hover, .quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .primary .action.amquote-top-quotecart:hover, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .primary .action.checkout:hover, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .primary .action.amquote-top-quotecart:hover {
  text-decoration: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart {
  background: transparent;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart .secondary, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart .secondary {
  padding: 0;
  margin-top: 0;
  margin-top: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart .secondary .action.viewcart, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .actions.action-viewcart .secondary .action.viewcart {
  font-size: 16px;
  font-size: 1rem;
  color: #000;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .actions.action-checkout, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .actions.action-checkout {
  margin: 0;
  padding: 0 10px;
  width: 100%;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .actions.action-checkout button.checkout, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .actions.action-checkout button.checkout {
  display: block;
  min-width: 200px;
  width: 100%;
  margin: 0 auto 10px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .minicart-widgets, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .minicart-widgets {
  padding: 0;
  margin: 0;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .custom-msg-wrapper, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .custom-msg-wrapper {
  padding: 15px 20px;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .custom-msg-wrapper .custom-msg, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .custom-msg-wrapper .custom-msg {
  font-weight: 400;
  text-transform: none;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .custom-cms-block-wrapper, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .custom-cms-block-wrapper {
  max-height: 200px;
  overflow-y: auto;
}
.quickcart-wrapper .block-quickcart .block-content-quickcart .quickcart-bottom-container .minicart-note, .amquote-cart-wrapper .block-quotecart .block-content-quickcart .quickcart-bottom-container .minicart-note {
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  display: block;
  margin-bottom: 8px;
}

.quickcart-wrapper.active .block-quickcart, .amquote-cart-wrapper.-active .block-quotecart {
  right: 0 !important;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
}

.amsearch-block-header .amsearch-title {
  font-size: 1rem;
}

.amsearch-item-container .amsearch-item .amsearch-link {
  font-size: 1rem;
  color: #000;
}

.amsearch-products-section .amsearch-link {
  color: #000;
}
.amsearch-products-section .amsearch-link:hover {
  color: #007038;
  text-decoration: none;
}

.amsearch-highlight {
  color: #007038;
}

.amsearch-item-container .amsearch-item .amsearch-link:hover {
  color: #000;
}

#amasty-shopby-product-list {
  width: 100%;
}

.amquote-cart-wrapper.minicart-wrapper .block-minicart .minicart-items-wrapper {
  min-height: 146px;
}

.amquote-cart-wrapper.minicart-wrapper .amquote-showcart .counter.qty {
  background: #5AB8D6;
}

@media (max-width: 768px) {
  .header-bottom {
    position: fixed;
    left: 0;
    top: 0;
    background: #fff;
    padding: 0px 0px;
    z-index: 99999;
    height: 100%;
    max-height: 100%;
    width: calc(100% - 60px);
    transition: all 0.2s;
    left: -100%;
    overflow-y: auto;
  }
  .nav-open .header-bottom {
    left: 0;
  }
  .header-bottom__inner {
    padding: 0 !important;
  }
  .page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li > a {
    display: block;
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    padding: 20px 10px !important;
  }
  .rootmenu > .rootmenu-list > li > .rootmenu-click > .rootmenu-arrow {
    margin-top: 20px !important;
  }
  .page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li:last-child > a {
    border-bottom: 0 !important;
  }
  .page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li > .megamenu {
    padding: 10px;
    box-shadow: none;
  }
  .page-header .header.content .header-bottom__inner .rootmenu .rootmenu-list > li > .megamenu .pagebuilder-column {
    margin-bottom: 20px;
  }
  .nav-open .nav-sections {
    display: none;
  }
  .nav-open .page-wrapper {
    left: 0;
  }
}
@media (min-width: 769px) {
  .rootmenu > .rootmenu-list .halfmenu, .rootmenu > .rootmenu-list > li > .megamenu {
    transition: opacity 0.13s ease 0.13s, transform 0.13s ease 0.13s, -webkit-transform 0.13s ease 0.13s;
  }
}
.header-top-inner__phone p {
  margin: 0;
}
.header-top-inner__right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
@media (max-width: 480px) {
  .header-top-inner__right {
    display: none;
  }
}

.header-bottom .header-top-inner__right {
  display: none;
  padding: 0 10px;
}
.header-bottom .header-top-inner__right .top-banner-menu {
  display: block;
  border-top: 1px solid #ccc !important;
  padding-top: 12px;
}
.header-bottom .header-top-inner__right .top-banner-menu ul {
  padding: 0 15px;
}
.header-bottom .header-top-inner__right .top-banner-menu ul li {
  display: block;
  margin-bottom: 8px;
}
.header-bottom .header-top-inner__right .top-banner-menu a {
  font-size: 18px;
}
.header-bottom .header-top-inner__right .customer-account-menu {
  padding: 0;
  margin: 0;
  border: none;
  border-top: 1px solid #ccc !important;
  padding-top: 12px;
  padding: 12px 15px;
}
.header-bottom .header-top-inner__right .customer-account-menu a {
  font-size: 18px;
}
@media (max-width: 480px) {
  .header-bottom .header-top-inner__right {
    display: block;
  }
}

.global-promo {
  background: #ffc10d;
  color: #FFF;
  padding: 10px 0;
  font-weight: bold;
}
.global-promo p:last-of-type {
  margin: 0;
}
.global-promo a {
  color: #000;
}
.global-promo strong {
  background: #007038;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 0 4px;
  color: #FFF;
  text-decoration: none;
}
.global-promo strong:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .global-promo-text {
    display: none;
  }
}
.global-promo-text--mobile {
  display: none;
}
@media (max-width: 768px) {
  .global-promo-text--mobile {
    display: block;
  }
}

.category-description p:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .product-item .price-container .price {
    font-size: 1.2rem;
  }
  .pagebuilder-column-group h1,
  .row-full-width-inner h1 {
    margin: 20px 0 10px;
  }
  .pagebuilder-column-group h1 span,
  .row-full-width-inner h1 span {
    font-size: 32px !important;
  }
  .pagebuilder-column-group h2,
  .row-full-width-inner h2 {
    margin: 0 0 10px;
  }
  .pagebuilder-column-group h2 span,
  .row-full-width-inner h2 span {
    font-size: 28px !important;
  }
  .pagebuilder-column-group h3,
  .row-full-width-inner h3 {
    margin: 0 0 10px;
  }
  .pagebuilder-column-group h3 span,
  .row-full-width-inner h3 span {
    font-size: 24px !important;
  }
}
.page-footer {
  background: #1F1F1F;
  color: #fff;
  padding-block: 80px;
  margin-top: 0;
}
.page-footer .footer.content {
  padding: 0 10px;
  border-top: 0 !important;
}
@media (max-width: 768px) {
  .page-footer .footer.content {
    text-align: center;
  }
}
.page-footer .footer.content ul, .page-footer .footer.content [data-content-type=text] ul {
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 24px;
  color: #fff;
}
@media (max-width: 768px) {
  .page-footer .footer.content ul, .page-footer .footer.content [data-content-type=text] ul {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.page-footer .footer.content ul li, .page-footer .footer.content [data-content-type=text] ul li {
  margin-bottom: 8px;
}
.page-footer .footer.content ul li:last-child, .page-footer .footer.content [data-content-type=text] ul li:last-child {
  margin-bottom: 0;
}
.page-footer .footer.content ul a, .page-footer .footer.content [data-content-type=text] ul a {
  color: #fff;
}
.page-footer .footer.content table {
  width: auto !important;
  border: 0;
}
.page-footer .footer.content table tbody > tr > td {
  border: 0;
  padding-block: 0;
  padding-inline: 5px;
}
@media (max-width: 768px) {
  .page-footer .footer.content table {
    margin-inline: auto;
  }
}
.page-footer .block.newsletter .title {
  display: block;
}
.page-footer .block.newsletter .title strong {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.page-footer .block.newsletter .control:before {
  width: 24px;
  height: 19px;
  content: "";
  background: url(../images/email.svg) center center no-repeat;
  margin-top: 14px;
}
.page-footer .block.newsletter input[type=email] {
  border-radius: 8px 0px 0px 8px;
  height: 50px;
  padding-left: 40px;
  border: 1px solid #fff;
}
.page-footer .block.newsletter .action.subscribe {
  background: #181A1D;
  border: 1px solid #fff;
  height: 50px;
  font-size: 14px;
}

.copyright {
  background: #1F1F1F;
  color: #fff;
}
.copyright span {
  display: block;
  max-width: 1400px;
  padding-inline: 10px;
  width: 100%;
  text-align: left;
  margin-inline: auto;
}
@media (max-width: 768px) {
  .copyright span {
    text-align: center;
  }
}

.promo-modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4); /* Black with opacity */
}
.promo-modal .pagebuilder-column-group {
  background: #fff;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -60%);
  width: 90%;
  max-width: 900px;
  border-radius: 6px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .promo-modal .pagebuilder-column-group figure[data-content-type=image] {
    max-height: 300px;
    overflow: hidden;
  }
}
.promo-modal .pagebuilder-column-group .close-modal .pagebuilder-button-primary {
  background: none;
  padding: 0;
  border: none;
  color: #aaa;
}
.promo-modal .pagebuilder-column-group .close-modal-buttons {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
}

.message.global.cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  margin: 0;
  padding: 16px 0;
  background: #fff;
  border: 0;
  border-top: 3px solid #007038;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  color: #181A1D;
  font-family: "Inter";
}
.message.global.cookie:before {
  display: none;
}
.message.global.cookie .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}
.message.global.cookie .content > p {
  margin: 0;
  flex: 1 1 320px;
  min-width: 240px;
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #181A1D;
}
.message.global.cookie .content > p strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}
.message.global.cookie .content > p a {
  color: #007038;
  font-weight: 500;
  text-decoration: underline;
}
.message.global.cookie .content > p a:hover {
  color: rgb(0%, 53.9215686275%, 26.9607843137%);
}
.message.global.cookie .actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin: 0;
}
.message.global.cookie .action.allow.primary,
.message.global.cookie .action.decline.secondary {
  display: inline-block;
  border-radius: 8px;
  font-family: "Inter";
  font-weight: 600;
  font-size: 15px;
  font-size: 0.9375rem;
  padding: 12px 28px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.message.global.cookie #btn-cookie-allow.action.allow.primary {
  background-color: #007038;
  border: 1px solid #007038;
  color: #fff;
}
.message.global.cookie #btn-cookie-allow.action.allow.primary:hover, .message.global.cookie #btn-cookie-allow.action.allow.primary:focus, .message.global.cookie #btn-cookie-allow.action.allow.primary:active {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  border-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  color: #fff;
}
.message.global.cookie #btn-cookie-decline.action.decline.secondary {
  background-color: #fff;
  border: 1px solid #007038;
  color: #007038;
}
.message.global.cookie #btn-cookie-decline.action.decline.secondary:hover, .message.global.cookie #btn-cookie-decline.action.decline.secondary:focus, .message.global.cookie #btn-cookie-decline.action.decline.secondary:active {
  background-color: #E5F1EB;
  border-color: #007038;
  color: #007038;
}
@media (max-width: 768px) {
  .message.global.cookie {
    padding: 14px 0;
  }
  .message.global.cookie .content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .message.global.cookie .actions {
    width: 100%;
  }
  .message.global.cookie .action.allow.primary,
  .message.global.cookie .action.decline.secondary {
    flex: 1 1 0;
    text-align: center;
  }
}

.cookie-preferences-link {
  display: inline-block;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  font-size: 0.8125rem;
}
.cookie-preferences-link:hover {
  color: #007038;
}

.catalog-product-view #maincontent {
  padding-bottom: 40px;
}
@media (max-width: 768px) {
  .catalog-product-view #maincontent {
    padding-bottom: 0;
  }
}
.catalog-product-view #maincontent .column.main {
  display: flex;
  flex-direction: row;
  position: relative;
}
@media (max-width: 768px) {
  .catalog-product-view #maincontent .column.main {
    flex-direction: column;
  }
}
@media (min-width: 769px) {
  .catalog-product-view .product.media, .catalog-product-view .product-info-main {
    width: 50%;
  }
}
.catalog-product-view .product.media {
  margin-bottom: 0;
}
.catalog-product-view .product.media .gallery-placeholder {
  position: sticky;
  top: 200px;
}
.catalog-product-view .product.media .fotorama__nav {
  margin-top: 10px;
}
.catalog-product-view .product.media .fotorama__nav .fotorama__img, .catalog-product-view .product.media .fotorama__nav .fotorama__thumb-border {
  border-radius: 5px;
}
.catalog-product-view .product.media .fotorama__nav .fotorama__thumb-border {
  border-color: #181A1D;
}
.catalog-product-view .fotorama--fullscreen {
  z-index: 9999 !important;
}
.catalog-product-view .product-info-main {
  order: 2;
  padding-left: 65px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
@media (max-width: 768px) {
  .catalog-product-view .product-info-main {
    padding-left: 0;
  }
}
.catalog-product-view .product-info-main > * {
  order: 2;
}
@media (max-width: 768px) {
  .catalog-product-view .product-info-main .page-title {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.catalog-product-view .product-info-main .product-info-stock-sku {
  display: none;
}
.catalog-product-view .product-info-main .product-info-price .price-box .price-container > .price-label {
  display: none !important;
}
.catalog-product-view .product-info-main .mageworx-swatch-container {
  margin: 0 16px 12px 0;
  padding: 0;
  border: none;
}
.catalog-product-view .product-info-main .swatch-attribute-options {
  margin-top: 0;
}
.catalog-product-view .product-info-main .swatch-option.image {
  border-radius: 50%;
}
.catalog-product-view .product-info-main .mageworx-swatch-option.text,
.catalog-product-view .product-info-main .mageworx-swatch-option.image {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-size: cover !important;
}
.catalog-product-view .product-options-bottom .price-box .price-container .price, .catalog-product-view .product-info-price .price-box .price-container .price {
  font-size: 28px;
  font-size: 1.75rem;
  line-height: 1.2;
  color: #007038;
  font-weight: 600;
}
@media (max-width: 768px) {
  .catalog-product-view .product-options-bottom .price-box .price-container .price, .catalog-product-view .product-info-price .price-box .price-container .price {
    font-size: 18px;
    font-size: 1.125rem;
  }
}
.catalog-product-view .product-info-price {
  border-bottom: 0;
  margin-bottom: 0;
}
.catalog-product-view .product-add-form .product-options-wrapper .field .control {
  width: 100%;
}
.catalog-product-view .product-add-form {
  padding-top: 0;
}
.catalog-product-view .product-add-form .box-tocart {
  margin-top: 30px;
  padding-top: 30px;
  margin-bottom: 0;
  border-top: 1px solid #D3D3D4;
}
.catalog-product-view .product-add-form .box-tocart .fieldset {
  margin: 0;
  letter-spacing: 0;
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
}
.catalog-product-view .product-add-form .box-tocart .fieldset .qty .label {
  display: none;
}
.catalog-product-view .product-add-form .box-tocart .actions {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalog-product-view .product-add-form .box-tocart .actions button {
  margin-right: 10px;
}
.catalog-product-view .product-add-form .box-tocart .actions button:last-of-type {
  margin-right: 0;
}
.catalog-product-view .product-add-form .swatch-option {
  margin: 0 18px 12px 0;
  width: 48px !important;
  height: 48px !important;
  background-size: cover !important;
}
.catalog-product-view .product-add-form .swatch-opt {
  margin: 0;
}
.catalog-product-view .product-add-form .swatch-attribute {
  margin-bottom: 20px;
}
.catalog-product-view .product-add-form .swatch-attribute-selected-option {
  padding: 0;
}
.catalog-product-view .product-add-form .mageworx-swatch-info {
  display: none;
}
.catalog-product-view .product-section-title:has(+ .amfaq-product-tab) {
  display: none;
}
.catalog-product-view .amfaq-product-tab {
  padding: 100px 0px 80px;
  max-width: 874px;
  margin-inline: auto;
}
.catalog-product-view .amfaq-product-tab > .h1, .catalog-product-view .block.related .block-title .amfaq-product-tab > strong {
  margin-bottom: 48px;
}
.catalog-product-view .amfaq-product-tab .am-item {
  background: #F4F4F4;
  padding: 28px 30px;
  border-bottom: 0;
  border-radius: 8px;
  margin-bottom: 26px;
}
.catalog-product-view .amfaq-product-tab .am-item .am-title {
  margin-bottom: 0;
  font-size: 21px;
  font-size: 1.3125rem;
  font-weight: 400;
  color: #181A1D;
}
.catalog-product-view .amfaq-product-tab .am-item {
  /* Spacing comes from the shared rule's animated padding-top; a
     margin here sits outside the collapsing track and would show as
     a gap under every closed question. */
}
.catalog-product-view .amfaq-product-tab .am-item .am-content {
  margin-top: 0;
}
.catalog-product-view .amfaq-product-tab .am-item .am-links {
  font-size: 14px;
  font-size: 0.875rem;
}
.catalog-product-view .block.related {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  margin-block: 80px;
}
.catalog-product-view .block.related .block-actions {
  display: none;
}
@media (max-width: 768px) {
  .catalog-product-view .block.related {
    margin-block: 40px;
  }
}
.catalog-product-view .block.related .block-title {
  text-align: center;
}
.catalog-product-view .block.related .products-grid {
  width: 100%;
  margin: 0;
}
.catalog-product-view .block.related .products-grid .product-items {
  margin: 0;
}
.catalog-product-view .block.related .products-grid .product-item {
  width: 25%;
  padding: 10px 13px;
  margin-left: 0;
}
@media (max-width: 768px) {
  .catalog-product-view .block.related .products-grid .product-item {
    width: 50%;
  }
}
@media (max-width: 520px) {
  .catalog-product-view .block.related .products-grid .product-item {
    width: 100%;
  }
}
.catalog-product-view .block.related .products-grid .product-item .product-item-info {
  width: 100%;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-info:hover, .catalog-product-view .block.related .products-grid .product-item .product-item-info.active {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-photo {
  display: block;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-photo .product-image-container {
  width: 100% !important;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-name a {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 600;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-name a:hover {
  text-decoration: none;
  color: #007038;
}
.catalog-product-view .block.related .products-grid .product-item .product-item-actions {
  display: none;
}

.why-pnp {
  padding: 90px 0px;
}
.why-pnp[data-content-type=row][data-appearance=full-width] .row-full-width-inner {
  max-width: 1400px;
}
.why-pnp h2 {
  margin-top: 0;
  font-weight: 600;
  margin-bottom: 20px;
}
.why-pnp h3 {
  font-weight: 600;
}
.why-pnp p {
  color: #393B3F;
}
.why-pnp .pagebuilder-column-group {
  margin-top: 28px;
}
@media (max-width: 768px) {
  .why-pnp {
    padding: 45px 0;
  }
}

.pdp-question-block {
  background: url(../images/pdp-questions-bg.png) right center no-repeat #5BB8D6;
  color: #fff;
  padding: 120px 0;
}
.pdp-question-block__content h2 {
  font-weight: 600;
  font-size: 50px;
  font-size: 3.125rem;
  line-height: 1.2;
  margin-bottom: 24px;
}
.pdp-question-block__content p {
  font-size: 18px;
  font-size: 1.125rem;
}
@media (max-width: 768px) {
  .pdp-question-block__content {
    text-align: center;
  }
  .pdp-question-block__content h2 {
    font-size: 30px;
    font-size: 1.875rem;
  }
}
.pdp-question-block__buttons {
  text-align: right;
}
@media (max-width: 768px) {
  .pdp-question-block__buttons {
    text-align: center;
    width: 100%;
  }
}
.pdp-question-block__buttons .btn {
  display: inline-block;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 18px 55px;
  border-radius: 8px;
  background: #fff;
  color: #4FB0CF;
  border: 1px solid #fff;
  margin-block: 5px;
  margin-left: 10px;
}
.pdp-question-block__buttons .btn.alt {
  background: #4FB0CF;
  color: #fff;
}
.pdp-question-block__buttons .btn:hover {
  text-decoration: none;
  background: #E5F1EB;
  color: #181A1D;
}

.hide {
  display: none !important;
}

#additional {
  display: none !important;
}

.data-content-inner {
  overflow: hidden;
  max-height: 200px;
  transition: all 0.2s;
}

a[data-readmore-toggle] {
  padding: 20px 0;
  display: block;
  font-weight: bold;
}

.amfaq_questions.widget {
  padding: 100px 0px 80px;
  max-width: 874px;
  margin-inline: auto;
}

.catalog-product-view .page-main-details {
  display: none !important;
}

.mageworx-swatch-container {
  position: relative;
}
.mageworx-swatch-container .pnp-tooltip {
  border: 1px solid #dadada;
  color: #949494;
  background: #fff;
  display: none;
  max-height: 100%;
  min-height: 20px;
  min-width: 20px;
  padding: 5px;
  position: absolute;
  text-align: center;
  display: none;
}
.mageworx-swatch-container .pnp-tooltip .image {
  margin: 0 auto;
  display: block;
  background-size: contain !important;
}
.mageworx-swatch-container .pnp-tooltip .title {
  color: #282828;
  display: block;
  max-height: 200px;
  min-height: 20px;
  overflow: hidden;
  text-align: center;
}
.mageworx-swatch-container .pnp-tooltip .corner {
  bottom: 0;
  height: 8px;
  left: 40%;
  position: absolute;
  display: block;
}
.mageworx-swatch-container .pnp-tooltip .corner:before {
  content: "";
  border-color: #adadad transparent transparent transparent;
  border-width: 8px 8.5px 0 8.5px;
  left: 0;
  top: 2px;
  position: absolute;
}
.mageworx-swatch-container .pnp-tooltip .corner:after {
  content: "";
  border-color: #fff transparent transparent transparent;
  border-width: 7px 7.5px 0 7.5px;
  left: -15px;
  top: 1px;
  position: absolute;
}

.product-features {
  border-top: 1px solid #D3D3D4;
  padding: 20px 0;
}
.product-features strong.type {
  margin-bottom: 5px;
  display: block;
  text-transform: uppercase;
  font-weight: 600;
}
.product-features ul {
  padding: 0 0 0 14px;
  margin: 0;
}
.product-features ul li {
  margin: 0;
}

.media-digital-catalog {
  align-items: center;
}
.media-digital-catalog figure {
  max-width: 50% !important;
}
@media (max-width: 768px) {
  .media-digital-catalog figure {
    max-width: 100% !important;
  }
}

.js-read-more {
  max-height: 200px;
  overflow: hidden;
}

.read-more-toggle {
  margin-top: 20px;
  display: inline-block;
}

.swatch-option-tooltip .corner {
  display: none !important;
}

/* ============================================================
   Required-option validation

   Magento's validation puts its message immediately after the field it is
   validating. For a MageWorx swatch that field is a hidden <select> sitting
   *inside* .swatch-attribute-options — which the v2 PDP lays out as a
   twelve-column grid. So the message arrived as a grid item, took a single
   1/12 cell, wrapped into a tall sliver and shoved the swatches out of line.

   Given a full row and pushed to the end, it reads as a message under the
   options, which is where it was always meant to be.

   Scoped to the option area on purpose. Magento inserts .mage-error all over
   checkout and the customer account, and those are somebody else's layout.
   ============================================================ */
.catalog-product-view {
  /* Every option's message, whatever the option looks like. Two of the three
     on a chaise are swatches and the third is a plain select, and styling
     only the swatch grid left that one inheriting a larger size — the same
     sentence in two sizes on one form. */
}
.catalog-product-view .product-options-wrapper .mage-error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--red-600);
}
.catalog-product-view .swatch-attribute-options .mage-error {
  /* Placement only — the type is set above. A swatch's hidden select
     sits inside this twelve-column grid, so its message arrives as a
     grid item and needs a whole row rather than a 1/12 cell. */
  grid-column: 1/-1;
  order: 99;
  width: 100%;
  clear: both;
  /* The grid's own 8px gap already separates this from the swatches
     above. Keeping the margin as well made a swatch's message sit
     14px below its options while a drop-down's sat 8px below its
     select — the same sentence at two different distances on one
     form. */
  margin-top: 0;
}
.catalog-product-view {
  /* The label of an option that failed, so the eye has somewhere to go when
     several options are required and only one is missing.

     Both selectors are needed: app-v2.js moves the label inside a
     .config__head, so it stops being a direct child of .field and the first
     of these no longer reaches it. */
}
.catalog-product-view .product-options-wrapper .field.required._error > .label > span,
.catalog-product-view .product-options-wrapper .field.required._error > .config__head > .label > span {
  color: var(--red-600);
}
.catalog-product-view {
  /* Magento marks a required option with an asterisk on
     .field.required > .label, which promotion breaks for the same reason —
     so a promoted option quietly stopped saying it was required while an
     unpromoted one beside it still did. Put it back on the label's span,
     which is the block that holds the words. */
}
.catalog-product-view .product-options-wrapper .field.required > .config__head > .label > span::after,
.catalog-product-view .product-options-wrapper .field._required > .config__head > .label > span::after {
  content: "*";
  color: var(--red-600);
  margin-left: 4px;
  font-weight: 700;
}

.catalog-category-view .category-view,
.catalogsearch-result-index .category-view {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .catalog-category-view .category-view,
  .catalogsearch-result-index .category-view {
    text-align: center;
  }
}
.catalog-category-view .category-view h1.page-title,
.catalogsearch-result-index .category-view h1.page-title {
  font-size: 50px;
  font-size: 3.125rem;
  color: #181A1D;
}
@media (max-width: 768px) {
  .catalog-category-view .category-view h1.page-title,
  .catalogsearch-result-index .category-view h1.page-title {
    font-size: 32px;
    font-size: 2rem;
  }
}
.catalog-category-view .category-view p,
.catalogsearch-result-index .category-view p {
  font-size: 18px;
  font-size: 1.125rem;
  color: #4F5154;
}
.catalog-category-view .category-view__left,
.catalogsearch-result-index .category-view__left {
  flex-basis: 45%;
  padding: 20px;
}
.catalog-category-view .category-view__left:only-child,
.catalogsearch-result-index .category-view__left:only-child {
  flex-basis: 80%;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 768px) {
  .catalog-category-view .category-view__left,
  .catalogsearch-result-index .category-view__left {
    flex-basis: 100%;
    text-align: center;
  }
}
.catalog-category-view .category-view .page-main,
.catalogsearch-result-index .category-view .page-main {
  max-width: 100%;
  padding: 0;
  flex-basis: 55%;
}
@media (max-width: 768px) {
  .catalog-category-view .category-view .page-main,
  .catalogsearch-result-index .category-view .page-main {
    display: none;
  }
}
.catalog-category-view .category-view .page-main .category-image,
.catalogsearch-result-index .category-view .page-main .category-image {
  margin: 0;
}
.catalog-category-view .category-view .page-main .category-image img,
.catalogsearch-result-index .category-view .page-main .category-image img {
  width: 100%;
  display: block;
}
.catalog-category-view #maincontent,
.catalogsearch-result-index #maincontent {
  position: relative;
  padding-top: 75px;
  z-index: 1;
}
@media (max-width: 768px) {
  .catalog-category-view #maincontent,
  .catalogsearch-result-index #maincontent {
    padding-top: 0;
  }
}
.catalog-category-view #maincontent .columns,
.catalogsearch-result-index #maincontent .columns {
  position: static;
}
@media (max-width: 768px) {
  .catalog-category-view #maincontent .columns,
  .catalogsearch-result-index #maincontent .columns {
    padding-top: 0;
  }
}
.catalog-category-view #maincontent .toolbar:last-of-type,
.catalogsearch-result-index #maincontent .toolbar:last-of-type {
  display: none;
}
.catalog-category-view #maincontent .toolbar:not(:last-of-type),
.catalogsearch-result-index #maincontent .toolbar:not(:last-of-type) {
  position: absolute;
  top: 0;
  left: 20px;
  margin: 0;
  height: 75px;
  display: flex;
  align-items: center;
  width: calc(25% - 20px);
  justify-content: space-between;
}
.catalog-category-view #maincontent .toolbar:not(:last-of-type):before, .catalog-category-view #maincontent .toolbar:not(:last-of-type):after,
.catalogsearch-result-index #maincontent .toolbar:not(:last-of-type):before,
.catalogsearch-result-index #maincontent .toolbar:not(:last-of-type):after {
  display: none;
}
@media (max-width: 768px) {
  .catalog-category-view #maincontent .toolbar:not(:last-of-type),
  .catalogsearch-result-index #maincontent .toolbar:not(:last-of-type) {
    position: static;
    width: auto;
  }
}
.catalog-category-view #maincontent .toolbar:not(:last-of-type) .sorter,
.catalogsearch-result-index #maincontent .toolbar:not(:last-of-type) .sorter {
  position: static;
}
.catalog-category-view #maincontent .modes,
.catalogsearch-result-index #maincontent .modes {
  display: none;
}
.catalog-category-view #maincontent .toolbar-amount,
.catalogsearch-result-index #maincontent .toolbar-amount {
  margin-right: 10px;
  font-size: 16px;
  font-size: 1rem;
  color: #393B3F;
  font-weight: 300;
}
.catalog-category-view #maincontent .toolbar-sorter label,
.catalogsearch-result-index #maincontent .toolbar-sorter label {
  font-size: 16px;
  font-size: 1rem;
  color: #393B3F;
  font-weight: 300;
}
.catalog-category-view #maincontent .toolbar-sorter label:after,
.catalogsearch-result-index #maincontent .toolbar-sorter label:after {
  content: " - ";
}
.catalog-category-view #maincontent .toolbar-sorter .sorter-action,
.catalogsearch-result-index #maincontent .toolbar-sorter .sorter-action {
  display: none;
}
.catalog-category-view #maincontent .toolbar-sorter #sorter,
.catalogsearch-result-index #maincontent .toolbar-sorter #sorter {
  margin-right: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  padding-left: 0;
  margin-left: 0;
}
.catalog-category-view .products-grid,
.catalogsearch-result-index .products-grid {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 40px;
  padding-bottom: 40px;
  border-left: 1px solid #D3D3D4;
}
@media (max-width: 768px) {
  .catalog-category-view .products-grid,
  .catalogsearch-result-index .products-grid {
    padding-left: 0;
    border-left: 0;
  }
}
.catalog-category-view .products-grid .product-item,
.catalogsearch-result-index .products-grid .product-item {
  width: 33.3333333333%;
  margin-inline: 0;
  padding-inline: 16px;
}
@media (max-width: 768px) {
  .catalog-category-view .products-grid .product-item,
  .catalogsearch-result-index .products-grid .product-item {
    width: 50%;
  }
}
@media (max-width: 480px) {
  .catalog-category-view .products-grid .product-item,
  .catalogsearch-result-index .products-grid .product-item {
    width: 100%;
  }
}
.catalog-category-view .products-grid .product-item .product-item-info,
.catalogsearch-result-index .products-grid .product-item .product-item-info {
  width: 100%;
}
.catalog-category-view .products-grid .product-item .product-item-info:hover, .catalog-category-view .products-grid .product-item .product-item-info.active,
.catalogsearch-result-index .products-grid .product-item .product-item-info:hover,
.catalogsearch-result-index .products-grid .product-item .product-item-info.active {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
.catalog-category-view .products-grid .product-item .product-item-info .product-item-inner,
.catalogsearch-result-index .products-grid .product-item .product-item-info .product-item-inner {
  display: none;
}
.catalog-category-view .products-grid .product-item .product-item-info .product-item-photo,
.catalogsearch-result-index .products-grid .product-item .product-item-info .product-item-photo {
  display: block;
}
.catalog-category-view .products-grid .product-item .product-item-info .product-item-photo .product-image-container,
.catalogsearch-result-index .products-grid .product-item .product-item-info .product-item-photo .product-image-container {
  width: 100% !important;
}
.catalog-category-view .products-grid .product-item .product-item-info .product-item-name a,
.catalogsearch-result-index .products-grid .product-item .product-item-info .product-item-name a {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 600;
}
.catalog-category-view .products-grid .product-item .product-item-info .product-item-name a:hover,
.catalogsearch-result-index .products-grid .product-item .product-item-info .product-item-name a:hover {
  text-decoration: none;
  color: #007038;
}

@media (min-width: 769px) {
  .sidebar.sidebar-main {
    padding-right: 40px;
  }
}
@media (max-width: 768px) {
  .sidebar.sidebar-main {
    padding: 20px 0;
    margin: 0 -15px;
    overflow: hidden;
    border-top: 1px solid #D3D3D4;
    border-bottom: 1px solid #D3D3D4;
    display: flex;
    flex-direction: column;
  }
}
.sidebar .block.filter {
  order: 10;
}
.sidebar .block.filter .filter-current {
  display: none;
}
@media (max-width: 768px) {
  .sidebar .block.filter .filter-title {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .sidebar .block.filter .filter-title strong {
    position: relative;
    margin: 0 auto;
    font-family: "Inter";
    background-color: #007038;
    border-color: #007038;
    font-size: 16px;
    font-size: 1rem;
    border-radius: 8px;
    font-weight: 600;
    color: #fff;
    box-shadow: none;
    display: inline-block;
    padding: 14px 30px;
    width: 100%;
    display: block;
    cursor: pointer;
    margin-top: 0px;
  }
  .sidebar .block.filter .filter-title strong:hover {
    background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  }
}
.sidebar .block.filter.active .filter-title {
  background: #fff;
  border-bottom: 1px solid #D3D3D4;
  padding: 13px 20px;
  text-align: left;
  height: 50px;
  top: 73px;
}
.sidebar .block.filter.active .filter-title strong {
  position: static;
  padding: 0;
  color: #007038;
  background: transparent;
}
.sidebar .block.filter.active .filter-title strong:after {
  color: #007038;
  position: absolute;
  right: 20px;
}
.sidebar .block.filter.active .filter-options {
  padding: 20px;
  top: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 60px;
}
.sidebar .block.filter .filters-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #BDBEBF;
  padding-block: 40px;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .sidebar .block.filter .filters-title {
    padding: 0;
    margin-bottom: 0;
    border: 0;
    justify-content: center;
  }
}
.sidebar .block.filter .filters-title .filter-actions {
  margin: 0;
}
@media (max-width: 768px) {
  .sidebar .block.filter .filters-title .filter-actions {
    margin-top: 10px;
  }
}
.sidebar .block.filter .filters-title .block-subtitle {
  border-bottom: 0;
  padding: 0px 10px 0 0;
  font-size: 21px;
  font-size: 1.3125rem;
  line-height: 1.2;
  font-weight: 600;
  color: #181A1D;
}
@media (max-width: 768px) {
  .sidebar .block.filter .filters-title .block-subtitle {
    display: none;
  }
}
.sidebar .block.filter .filter-options-title {
  text-transform: capitalize;
  font-size: 16px;
  font-size: 1rem;
  color: #181A1D;
  font-weight: 600;
  padding-inline: 0;
}
.sidebar .block.filter .filter-options-title:after {
  content: "\e616";
  color: #007038;
  font-size: 12px;
  font-size: 0.75rem;
  right: 5px;
}
.sidebar .block.filter .filter-options-title.closed:after {
  rotate: 45deg;
  font-size: 10px;
  font-size: 0.625rem;
}
.sidebar .block.filter .filter-options-content {
  margin-bottom: 10px;
  padding-inline: 0;
}
.sidebar .block.filter .filter-options-content .items a {
  padding: 0;
  font-size: 16px;
  font-size: 1rem;
  color: #181A1D;
}
.sidebar .block.filter .filter-options-content .items a:visited {
  color: #181A1D;
}
.sidebar .block.filter .filter-options-content .items a:hover {
  background: transparent;
  color: #007038;
  text-decoration: none;
}
.sidebar .block.filter .filter-options-content .items a input[type=checkbox] {
  top: 1px;
}
.sidebar .block.filter .am-filter-items-color_option form {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  column-gap: 15px;
  row-gap: 0px;
  flex-wrap: wrap;
}
.sidebar .block.filter .am-filter-items-color_option .item a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid #e0e0e0;
  display: block;
  margin: 0;
  overflow: hidden;
  line-height: 1;
}
.sidebar .block.filter .am-filter-items-color_option .item a input, .sidebar .block.filter .am-filter-items-color_option .item a span {
  display: none;
}
.sidebar .block.filter .am-filter-items-color_option .item a.am_shopby_link_selected {
  outline-color: #007038;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Black] a {
  background: #1b1b1b;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Brown] a {
  background: #8B4513;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Burgundy] a {
  background: #800020;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label="Dark Blue"] a {
  background: #0b2e69;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Gray] a {
  background: #616161;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Green] a {
  background: #047e49;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label="Light Blue"] a {
  background: #2c9dcd;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Orange] a {
  background: #d98106;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Purple] a {
  background: #a106d9;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Red] a {
  background: #db2121;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Tan] a {
  background: #D2B48C;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=White] a {
  background: #fff;
}
.sidebar .block.filter .am-filter-items-color_option .item[data-label=Yellow] a {
  background: #e3c437;
}

@media (min-width: 769px) {
  .page-layout-2columns-left .column.main {
    width: 75%;
    padding-left: 0;
    padding-bottom: 0;
  }
  .page-layout-2columns-left .sidebar-main {
    width: 25%;
    display: flex;
    flex-direction: column;
  }
}
.product-item .price-box .price-label {
  color: #242424;
}

.page-layout-2columns-left .category-cms {
  background: #F4F4F4;
  margin-bottom: 0;
}
.page-layout-2columns-left .category-cms > div {
  margin: 20px 0 0 0;
  padding: 40px 20px 40px;
}
.page-layout-2columns-left .category-cms h2 {
  margin: 0 0 10px;
  padding-top: 10px;
  font-size: 1.8rem;
  font-weight: 600;
}
.page-layout-2columns-left .category-cms h2:first-of-type {
  padding-top: 0;
}
.page-layout-2columns-left .category-cms h3 {
  margin: 0 0 10px;
  padding-top: 6px;
  font-size: 1.4rem;
  font-weight: 500;
}
.page-layout-2columns-left .category-cms p {
  margin-bottom: 6px;
}
.page-layout-2columns-left .category-cms p:last-of-type {
  margin-bottom: 0;
}

.page-products .products-grid .product-item:nth-child(3n+1) {
  margin-left: 0;
}

.toolbar-amount {
  display: none;
}

.catalogsearch-result-index .page-title {
  margin: 0.67em 0;
}

.block-cats {
  margin-top: 50px;
  order: -1;
}
.block-cats ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.block-cats ul li:last-of-type {
  margin: 0;
}
.block-cats ul li a {
  font-size: 1rem;
  color: #181A1D;
  font-weight: 600;
}
@media (max-width: 768px) {
  .block-cats {
    margin: 0 0 15px;
  }
  .block-cats .block-content {
    overflow: hidden;
    background: #007038;
    position: relative;
    padding: 10px 0;
  }
  .block-cats .block-content:before {
    content: "";
    width: 40px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(to right, rgb(0, 112, 56) 0%, rgba(0, 112, 56, 0) 100%);
  }
  .block-cats .block-content:after {
    content: "";
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(to left, rgb(0, 112, 56) 0%, rgba(0, 112, 56, 0) 100%);
  }
  .block-cats ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: none;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    gap: 8px;
    scrollbar-width: none;
  }
  .block-cats ul li {
    margin: 0;
    display: inline-block;
  }
  .block-cats ul li a {
    color: #007038;
    background: #fff;
    text-decoration: none;
    font-weight: 700;
    border: 1px solid #fff;
    border-radius: 5px;
    display: flex;
    text-align: center;
    padding: 13px;
    font-size: 16px;
  }
}

.js-close-filter {
  z-index: 99999;
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: calc(100% - 30px);
  background: #007038;
  text-align: center;
  padding: 14px 16px;
  border-radius: 8px;
  color: #FFF;
  font-size: 18px;
  display: block;
}

.block.filter .js-close-filter {
  display: none;
}
.block.filter.active .js-close-filter {
  display: block;
}
@media (max-width: 768px) {
  .block.filter {
    padding: 0 15px;
  }
}

body.filter-open {
  position: fixed;
}

body.page-layout-category-landing .category-cms, body.page-layout-cms-full-width .category-cms {
  margin-bottom: 0;
}
body.page-layout-category-landing #maincontent, body.page-layout-cms-full-width #maincontent {
  display: none;
}
body.page-layout-category-landing .breadcrumbs, body.page-layout-cms-full-width .breadcrumbs {
  margin-top: 73px;
  position: relative;
  z-index: 1;
  color: #fff;
}
body.page-layout-category-landing .breadcrumbs .items a, body.page-layout-category-landing .breadcrumbs .items strong, body.page-layout-cms-full-width .breadcrumbs .items a, body.page-layout-cms-full-width .breadcrumbs .items strong {
  color: #fff;
}
body.page-layout-category-landing .breadcrumbs .item:not(:last-child):after, body.page-layout-cms-full-width .breadcrumbs .item:not(:last-child):after {
  color: #fff;
}
body.page-layout-category-landing .landing-hero, body.page-layout-cms-full-width .landing-hero {
  margin-top: -120px;
  color: #fff;
}
body.page-layout-category-landing .landing-hero .pagebuilder-column-line, body.page-layout-cms-full-width .landing-hero .pagebuilder-column-line {
  column-gap: 40px;
}
body.page-layout-category-landing .landing-hero h1, body.page-layout-cms-full-width .landing-hero h1 {
  font-size: 50px;
  font-size: 3.125rem;
  line-height: 1.4;
  font-weight: 600;
}
@media (max-width: 768px) {
  body.page-layout-category-landing .landing-hero h1, body.page-layout-cms-full-width .landing-hero h1 {
    font-size: 40px;
    font-size: 2.5rem;
    line-height: 1.2;
  }
}
body.page-layout-category-landing [data-content-type=row][data-appearance=full-width] > .row-full-width-inner, body.page-layout-cms-full-width [data-content-type=row][data-appearance=full-width] > .row-full-width-inner {
  max-width: 1400px;
  padding-inline: 20px;
}
body.page-layout-category-landing .image-with-text h2, body.page-layout-cms-full-width .image-with-text h2 {
  font-weight: 600;
  margin-top: 0;
}
@media (max-width: 940px) {
  body.page-layout-category-landing .image-with-text .pagebuilder-column-line, body.page-layout-cms-full-width .image-with-text .pagebuilder-column-line {
    flex-direction: column;
  }
  body.page-layout-category-landing .image-with-text .pagebuilder-column-line .pagebuilder-column, body.page-layout-cms-full-width .image-with-text .pagebuilder-column-line .pagebuilder-column {
    width: 100% !important;
  }
  body.page-layout-category-landing .image-with-text .pagebuilder-column-line .pagebuilder-column figure img, body.page-layout-cms-full-width .image-with-text .pagebuilder-column-line .pagebuilder-column figure img {
    width: 100%;
  }
  body.page-layout-category-landing .image-with-text .pagebuilder-column-line .pagebuilder-column[data-appearance=align-center], body.page-layout-cms-full-width .image-with-text .pagebuilder-column-line .pagebuilder-column[data-appearance=align-center] {
    padding-inline: 0 !important;
    order: 1;
  }
  body.page-layout-category-landing .image-with-text .pagebuilder-column-line h2, body.page-layout-cms-full-width .image-with-text .pagebuilder-column-line h2 {
    margin-top: 40px;
  }
}
body.page-layout-category-landing .image-with-text [data-content-type=text] a, body.page-layout-cms-full-width .image-with-text [data-content-type=text] a {
  display: inline-block;
  padding: 14px 28px;
  background: #007038;
  color: #fff;
  border-radius: 8px;
  line-height: 1.4;
  font-weight: 400;
  font-size: 14px;
  font-size: 0.875rem;
  transition: all 0.2s;
  margin-top: 20px;
}
body.page-layout-category-landing .image-with-text [data-content-type=text] a:hover, body.page-layout-cms-full-width .image-with-text [data-content-type=text] a:hover {
  background: rgb(0%, 33.9215686275%, 16.9607843137%);
  text-decoration: none;
  color: #fff;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line {
  column-gap: 35px;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .pagebuilder-column figure, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .pagebuilder-column figure {
  flex-grow: 1;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .pagebuilder-column img, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .pagebuilder-column img {
  display: block;
  margin-inline: auto;
  mix-blend-mode: multiply;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .landing-categories-link h2, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .landing-categories-link h2 {
  margin-top: 40px;
  margin-bottom: 0;
  display: block;
  font-weight: 600;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .landing-categories-link h2 a, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .landing-categories-link h2 a {
  display: block;
  color: #181A1D;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .landing-categories-link h2 a:hover, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .landing-categories-link h2 a:hover {
  text-decoration: none;
  color: #007038;
}
body.page-layout-category-landing .landing-categories .pagebuilder-column-line .landing-categories-link h2 a:after, body.page-layout-cms-full-width .landing-categories .pagebuilder-column-line .landing-categories-link h2 a:after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../images/arrow-right.svg) center center no-repeat;
  background-size: cover;
}
@media (min-width: 767px) {
  body.page-layout-category-landing .landing-categories.home .pagebuilder-column-line .landing-categories-link h2 a:after, body.page-layout-cms-full-width .landing-categories.home .pagebuilder-column-line .landing-categories-link h2 a:after {
    width: auto;
    height: auto;
    content: "Shop Now";
    background: #007038;
    display: inline-block;
    padding: 14px 28px;
    background: #007038;
    color: #fff;
    border-radius: 8px;
    line-height: 1.4;
    font-weight: 400;
    font-size: 14px;
    font-size: 0.875rem;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    margin-top: 20px;
  }
}
body.page-layout-category-landing .landing-products h2, body.page-layout-cms-full-width .landing-products h2 {
  font-weight: 600;
  margin-bottom: 0;
}
body.page-layout-category-landing .landing-products .products-grid, body.page-layout-cms-full-width .landing-products .products-grid {
  padding: 0;
  border: 0;
}
body.page-layout-category-landing .landing-products .products-grid .product-items, body.page-layout-cms-full-width .landing-products .products-grid .product-items {
  display: flex;
  column-gap: 30px;
}
@media (max-width: 768px) {
  body.page-layout-category-landing .landing-products .products-grid .product-items, body.page-layout-cms-full-width .landing-products .products-grid .product-items {
    flex-wrap: wrap;
  }
  body.page-layout-category-landing .landing-products .products-grid .product-items .product-item, body.page-layout-cms-full-width .landing-products .products-grid .product-items .product-item {
    width: calc(50% - 20px);
    margin-inline: 0;
  }
}
@media (max-width: 580px) {
  body.page-layout-category-landing .landing-products .products-grid .product-items .product-item, body.page-layout-cms-full-width .landing-products .products-grid .product-items .product-item {
    width: 100%;
  }
}
body.page-layout-category-landing .landing-products .products-grid .product-items img, body.page-layout-cms-full-width .landing-products .products-grid .product-items img {
  mix-blend-mode: multiply;
}
body.page-layout-category-landing .landing-products .products-grid .product-item-info:hover, body.page-layout-cms-full-width .landing-products .products-grid .product-item-info:hover {
  background: transparent;
}
body.page-layout-category-landing .landing-products .landing-products-list.gray .products-grid .product-image-wrapper, body.page-layout-cms-full-width .landing-products .landing-products-list.gray .products-grid .product-image-wrapper {
  background: #F4F4F4;
}
body.page-layout-category-landing .landing-featured, body.page-layout-cms-full-width .landing-featured {
  padding: 100px 0px 10px;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 30px;
  row-gap: 30px;
}
@media (max-width: 768px) {
  body.page-layout-category-landing .landing-featured .pagebuilder-column-line, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line {
    display: flex !important;
    flex-direction: column;
  }
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.big, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.big {
  grid-row: 1/3;
  width: 100% !important;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.big figure, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.big figure {
  flex-grow: 1;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line figure img, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line figure img {
  mix-blend-mode: multiply;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.small, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.small {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.small figure, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.small figure {
  flex-basis: 45%;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.small div[data-content-type=text], body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.small div[data-content-type=text] {
  flex-grow: 1;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line .pagebuilder-column.small div[data-content-type=text] h2, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line .pagebuilder-column.small div[data-content-type=text] h2 {
  margin-top: 0;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line h2, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line h2 {
  margin-top: 40px;
  margin-bottom: 0;
  display: block;
  font-weight: 600;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line h2 a, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line h2 a {
  display: block;
  color: #181A1D;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line h2 a:hover, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line h2 a:hover {
  text-decoration: none;
  color: #007038;
}
body.page-layout-category-landing .landing-featured .pagebuilder-column-line h2 a:after, body.page-layout-cms-full-width .landing-featured .pagebuilder-column-line h2 a:after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background: url(../images/arrow-right.svg) center center no-repeat;
  background-size: cover;
}
body.page-layout-category-landing .semibold h2, body.page-layout-cms-full-width .semibold h2 {
  margin-top: 0;
  font-weight: 600;
}
body.page-layout-category-landing .styles .pagebuilder-column-line, body.page-layout-cms-full-width .styles .pagebuilder-column-line {
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
}
body.page-layout-category-landing .styles .pagebuilder-column-line h2, body.page-layout-cms-full-width .styles .pagebuilder-column-line h2 {
  font-weight: 600;
  margin-top: 0;
}

body.page-layout-cms-full-width #maincontent {
  display: block;
}

body.page-layout-cms-full-width .page-header:not(.sticky) {
  border-bottom-color: transparent;
}

body.page-layout-cms-full-width .column.main {
  padding-bottom: 0;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item {
  width: 24.439%;
  margin-left: 0;
}
@media (max-width: 768px) {
  body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item {
    width: calc(50% - 20px);
  }
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info {
  width: 100%;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info:hover, body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info.active {
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info .product-item-inner {
  display: none;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info .product-item-photo {
  display: block;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info .product-item-photo .product-image-container {
  width: 100% !important;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info .product-item-name a {
  font-size: 18px;
  font-size: 1.125rem;
  font-weight: 600;
}
body.page-layout-cms-full-width.page-layout-1column .block.widget .products-grid .product-item .product-item-info .product-item-name a:hover {
  text-decoration: none;
  color: #007038;
}

@media (max-width: 860px) {
  .home-hero .pagebuilder-column-line {
    flex-direction: column;
  }
}
.home-hero .pagebuilder-column {
  justify-content: center !important;
  align-items: flex-end;
}
@media (max-width: 860px) {
  .home-hero .pagebuilder-column {
    width: 100% !important;
    padding: 0 !important;
    min-height: 580px !important;
  }
  .home-hero .pagebuilder-column + .pagebuilder-column {
    display: none !important;
  }
}
.home-hero .pagebuilder-column .home-hero-text {
  width: 100%;
  max-width: 700px;
  padding: 60px 80px 60px 20px;
  position: relative;
}
@media (max-width: 860px) {
  .home-hero .pagebuilder-column .home-hero-text {
    padding: 60px 20px;
    max-width: 100%;
  }
}
.home-hero .pagebuilder-column .home-hero-text h1 {
  color: #fff;
  font-size: 84px;
  font-size: 5.25rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.1;
  word-wrap: normal;
}
@media (max-width: 1180px) {
  .home-hero .pagebuilder-column .home-hero-text h1 {
    font-size: 60px;
    font-size: 3.75rem;
  }
}
@media (max-width: 480px) {
  .home-hero .pagebuilder-column .home-hero-text h1 {
    font-size: 48px;
    font-size: 3rem;
  }
}
.home-hero .pagebuilder-column .home-hero-text p {
  font-size: 18px;
  font-size: 1.125rem;
  color: #fff;
}
.home-hero .pagebuilder-column .home-hero-text a {
  display: inline-block;
  padding: 16px 32px;
  background: #fff;
  border-radius: 8px;
  line-height: 1.4;
  font-weight: 600;
  font-size: 16px;
  font-size: 1rem;
  transition: all 0.2s;
  margin-top: 20px;
}
.home-hero .pagebuilder-column .home-hero-text a:hover {
  background: rgb(95%, 95%, 95%);
  text-decoration: none;
  color: #007038;
}
.home-hero .pagebuilder-column .home-hero-text--arrow:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 10px;
  text-align: center;
  font-size: 20px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  z-index: 9;
  left: 40px;
  transform: translate(-50%, 0%) rotate(45deg);
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  40% {
    transform: translateY(-30px) rotate(45deg);
  }
  60% {
    transform: translateY(-15px) rotate(45deg);
  }
}

.amfaq_questions.widget {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}
.amfaq_questions.widget .amfaq-title {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 40px;
}
.amfaq_questions.widget .am-item {
  background: #F4F4F4;
  padding: 28px 30px;
  border-bottom: 0;
  border-radius: 8px;
  margin-bottom: 26px;
}
.amfaq_questions.widget .am-item .am-title {
  margin-bottom: 0;
  font-size: 21px;
  font-size: 1.3125rem;
  font-weight: 400;
  color: #181A1D;
}
.amfaq_questions.widget .am-item .am-title .am-minus:before {
  color: #007038;
}
.amfaq_questions.widget .am-item .am-content {
  margin-top: 0;
}
.amfaq_questions.widget .am-item .am-links {
  font-size: 14px;
  font-size: 0.875rem;
}

/* ============================================================
   Amasty FAQ — how an answer opens

   Site-wide, and deliberately not nested under .amfaq_questions.widget: the
   FAQ landing page renders the accordion inside .amfaq_questions with no
   .widget class on it (that sits on an outer .am-widget-categories), so a
   rule scoped to .widget reaches the homepage and skips the page that is
   nothing but FAQs.

   This replaces a JavaScript animation. Both of Amasty's templates
   initialised the collapsible with animate:500, which steps the element's
   height from script and forces a layout every frame — that is the jerk, and
   half a second is a long time to watch it. Both are overridden to animate:
   false and the movement happens here.

   display is !important because the widget still writes display inline on
   every toggle, and that is the only way a stylesheet outranks an inline
   style.

   Spacing above the answer is padding, not margin, and it transitions with
   the row. It has to: both sit outside the collapsing track, so a fixed value
   holds the gap open on a closed item and leaves a space under every
   question.
   ============================================================ */
.amfaq_questions .am-item .am-content {
  display: grid !important;
  grid-template-rows: 0fr;
  margin-top: 0;
  /* Amasty's own padding-bottom is zeroed here and restored when open.
     Padding sits outside the collapsing track, so left alone it shows as a
     10px shelf under every closed question. */
  padding-top: 0;
  padding-bottom: 0;
  transition: grid-template-rows 240ms ease, padding 240ms ease;
  /* A 0fr track only collapses if its content can be crushed. The
     templates put everything in one .am-content__inner so there is exactly
     one grid item — several children would each take a row of their own and
     only the first would collapse. The bare > * is a fallback for any
     Amasty template still rendering unwrapped. */
}
.amfaq_questions .am-item .am-content > * {
  min-height: 0;
  overflow: hidden;
}

/* Open. Magento's collapsible sets no state class — openedState defaults to
   null and Amasty passes none — and it never removes .amfaq-hidden, which the
   template ships and which therefore stays on the element for the life of the
   page. The swapped header icon is the only readable signal, and .am-plus is
   the open one. */
.amfaq_questions .am-item:has(.am-title .am-plus) .am-content {
  grid-template-rows: 1fr;
  padding-top: 20px;
  padding-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .amfaq_questions .am-item .am-content {
    transition: none;
  }
}
.page-layout-cms-landing.cms-page-view [data-content-type=row][data-appearance=full-width] > .row-full-width-inner {
  max-width: 1400px;
  padding-inline: 20px;
}
.page-layout-cms-landing.cms-page-view [data-content-type=text] ul {
  padding-left: 20px;
}
.page-layout-cms-landing.cms-page-view [data-content-type=text] ul li {
  margin-bottom: 0;
}

#html-body hr[data-element=line] {
  margin: 0;
  display: block;
}

.cms-home .landing-products-list {
  padding-top: 36px;
}

body.page-layout-category-landing .breadcrumbs {
  margin-top: 0;
}

.pnp_core-quote-request {
  padding: 0;
}

.quote-request {
  max-width: 900px;
  margin: 0 auto;
}
.quote-request__title {
  text-align: center;
  margin: 16px 0;
}
.quote-request__header {
  display: flex;
  justify-content: space-between;
}
.quote-request-header__left p {
  margin: 16px 0 0 0;
}
.quote-request-header__right p {
  text-align: center;
  font-weight: bold;
}
.quote-request .fieldset--actions {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 32px;
  margin-bottom: 0;
}
.quote-request .fieldset--actions .field {
  flex-grow: 1;
}
.quote-request .fieldset--actions .field label {
  height: 32px;
}
.quote-request #approvalForm legend {
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
.quote-request #approvalForm .form-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quote-request .tb-item__desc {
  max-width: 300px;
}
.quote-request {
  /*	--------------------------------------------------
  :: Tables
  -------------------------------------------------- */
}
.quote-request table {
  background: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0 0 18px;
  border: 1px solid #ddd;
}
.quote-request table thead, .quote-request table tfoot {
  background: #f5f5f5;
}
.quote-request table thead tr th,
.quote-request table tfoot tr th,
.quote-request table tbody tr td,
.quote-request table tr td,
.quote-request table tfoot tr td {
  font-size: 14px;
  text-align: left;
}
.quote-request table thead tr th,
.quote-request table tfoot tr td {
  padding: 8px 10px 9px;
  font-size: 14px;
  font-weight: bold;
  color: #222;
}
.quote-request table thead tr th:first-child, .quote-request table tfoot tr td:first-child {
  border-left: none;
}
.quote-request table thead tr th:last-child, .quote-request table tfoot tr td:last-child {
  border-right: none;
}
.quote-request table tbody tr.even,
.quote-request table tbody tr.alt {
  background: #f9f9f9;
}
.quote-request table tbody tr:nth-child(even) {
  background: #f9f9f9;
}
.quote-request table tbody tr td {
  color: #333;
  padding: 9px 10px;
  vertical-align: top;
  border: none;
}
.quote-request table th {
  font-weight: bold;
}
.quote-request table td, .quote-request table th {
  padding: 9px 10px;
  text-align: left;
}
.quote-request .item-name {
  display: block;
  margin-bottom: 10px;
}
.quote-request .item-options {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.quote-request .item-options:after {
  clear: both;
}
.quote-request .item-options dt {
  font-weight: 700;
  display: inline-block;
  margin: 0 10px 5px 0;
  clear: left;
  float: left;
}
.quote-request .item-options dt:after {
  content: ": ";
}
.quote-request .item-options dd {
  display: inline-block;
  float: left;
}

.product-item-details .add-note-quote {
  display: none;
}

.payment-methods-notice {
  background: #e5f1eb;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.payment-methods-notice p:last-child {
  margin: 0;
}

.faq-category-view .amfaq-search, .faq-question-view .amfaq-search {
  display: none;
}
.faq-category-view .amfaq_categories, .faq-question-view .amfaq_categories {
  border-width: 0;
  border-right-width: 1px;
  border-radius: 0;
  margin-top: 20px;
  flex-grow: 1;
}
.faq-category-view .amfaq_categories .item:first-child, .faq-question-view .amfaq_categories .item:first-child {
  border-radius: 0;
}
.faq-category-view .amfaq_categories .item, .faq-question-view .amfaq_categories .item {
  background-color: transparent;
  padding: 6px 10px 6px 0px;
  border: 0;
  font-size: 15px;
  font-size: 0.9375rem;
}
.faq-category-view .amfaq_categories .item.current, .faq-question-view .amfaq_categories .item.current {
  background: transparent;
}
.faq-category-view .amfaq_categories .item.current a, .faq-question-view .amfaq_categories .item.current a {
  color: #007038;
  text-decoration: underline;
}
.faq-category-view .amfaq_categories .item.title, .faq-question-view .amfaq_categories .item.title {
  background: transparent;
  font-size: 19px;
  font-size: 1.1875rem;
  text-align: left;
  padding-left: 0;
  padding-right: 10px;
  color: #000;
  font-weight: 400;
}
.faq-category-view .column.main, .faq-question-view .column.main {
  margin-top: 20px;
}
.faq-category-view .column.main .page-title-wrapper h1, .faq-question-view .column.main .page-title-wrapper h1 {
  font-weight: 400;
}
.faq-category-view .amfaq_questions.widget, .faq-question-view .amfaq_questions.widget {
  max-width: 100%;
  padding: 20px 0 0;
}
@media (min-width: 769px) {
  .faq-category-view .columns, .faq-question-view .columns {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding-bottom: 80px;
  }
  .faq-category-view .columns .column.main, .faq-question-view .columns .column.main {
    order: 2;
    flex-basis: 75%;
    flex-grow: 0;
  }
  .faq-category-view .columns .sidebar-additional, .faq-question-view .columns .sidebar-additional {
    flex-basis: 20.83%;
    order: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
  }
}

.amblog-index-index .page-main .page-title, .amblog-index-post .page-main .page-title, .amblog-index-search .page-main .page-title, .amblog-index-category .page-main .page-title, .amblog-index-tag .page-main .page-title {
  font-size: 37px;
  font-size: 2.3125rem;
  line-height: 1.4;
  font-weight: normal;
  display: none;
}
.amblog-index-index .amblog-element-block:not(.widget) > div:not(.amblog-overlay), .amblog-index-index .amblog-element-block.widget, .amblog-index-index .amblog-grid-list .list-item, .amblog-index-index .amblog-post-container, .amblog-index-index .amblog-tags.amblog-widget-container, .amblog-index-index .amblog-post-container .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-index .amblog-post-container .amblog-widget-container.widget, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container.widget, .amblog-index-post .amblog-element-block:not(.widget) > div:not(.amblog-overlay), .amblog-index-post .amblog-element-block.widget, .amblog-index-post .amblog-grid-list .list-item, .amblog-index-post .amblog-post-container, .amblog-index-post .amblog-tags.amblog-widget-container, .amblog-index-post .amblog-post-container .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-post .amblog-post-container .amblog-widget-container.widget, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container.widget, .amblog-index-search .amblog-element-block:not(.widget) > div:not(.amblog-overlay), .amblog-index-search .amblog-element-block.widget, .amblog-index-search .amblog-grid-list .list-item, .amblog-index-search .amblog-post-container, .amblog-index-search .amblog-tags.amblog-widget-container, .amblog-index-search .amblog-post-container .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-search .amblog-post-container .amblog-widget-container.widget, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container.widget, .amblog-index-category .amblog-element-block:not(.widget) > div:not(.amblog-overlay), .amblog-index-category .amblog-element-block.widget, .amblog-index-category .amblog-grid-list .list-item, .amblog-index-category .amblog-post-container, .amblog-index-category .amblog-tags.amblog-widget-container, .amblog-index-category .amblog-post-container .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-category .amblog-post-container .amblog-widget-container.widget, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container.widget, .amblog-index-tag .amblog-element-block:not(.widget) > div:not(.amblog-overlay), .amblog-index-tag .amblog-element-block.widget, .amblog-index-tag .amblog-grid-list .list-item, .amblog-index-tag .amblog-post-container, .amblog-index-tag .amblog-tags.amblog-widget-container, .amblog-index-tag .amblog-post-container .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-tag .amblog-post-container .amblog-widget-container.widget, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container:not(.widget) > div:not(.amblog-overlay), .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container.widget {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.amblog-index-index .amblog-title, .amblog-index-index .amblog-post-title, .amblog-index-post .amblog-title, .amblog-index-post .amblog-post-title, .amblog-index-search .amblog-title, .amblog-index-search .amblog-post-title, .amblog-index-category .amblog-title, .amblog-index-category .amblog-post-title, .amblog-index-tag .amblog-title, .amblog-index-tag .amblog-post-title {
  padding-inline: 0;
  font-size: 19px;
  font-size: 1.1875rem;
  text-align: left;
  padding-left: 0;
  padding-right: 10px;
  color: #000;
  font-weight: 400;
  padding-block: 6px;
  line-height: 1.6;
}
.amblog-index-index .amblog-list, .amblog-index-post .amblog-list, .amblog-index-search .amblog-list, .amblog-index-category .amblog-list, .amblog-index-tag .amblog-list {
  padding-inline: 0;
  font-size: 15px;
  font-size: 0.9375rem;
}
.amblog-index-index .amblog-element-block .amblog-categories li, .amblog-index-index .amblog-post-container .amblog-widget-container .amblog-categories li, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories li, .amblog-index-post .amblog-element-block .amblog-categories li, .amblog-index-post .amblog-post-container .amblog-widget-container .amblog-categories li, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories li, .amblog-index-search .amblog-element-block .amblog-categories li, .amblog-index-search .amblog-post-container .amblog-widget-container .amblog-categories li, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories li, .amblog-index-category .amblog-element-block .amblog-categories li, .amblog-index-category .amblog-post-container .amblog-widget-container .amblog-categories li, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories li, .amblog-index-tag .amblog-element-block .amblog-categories li, .amblog-index-tag .amblog-post-container .amblog-widget-container .amblog-categories li, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories li {
  margin-bottom: 0;
}
.amblog-index-index .amblog-element-block .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-index .amblog-post-container .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-post .amblog-element-block .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-post .amblog-post-container .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-search .amblog-element-block .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-search .amblog-post-container .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-category .amblog-element-block .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-category .amblog-post-container .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-tag .amblog-element-block .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-tag .amblog-post-container .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-widget-container .amblog-categories.-level1 > .amblog-category > .amblog-link {
  padding: 6px 10px 6px 0px;
  border: 0;
  font-size: 15px;
  font-size: 0.9375rem;
  margin-bottom: 0;
  line-height: 1.2;
  font-weight: 400;
  color: #007038;
}
.amblog-index-index .amblog-form-search.amblog-item, .amblog-index-post .amblog-form-search.amblog-item, .amblog-index-search .amblog-form-search.amblog-item, .amblog-index-category .amblog-form-search.amblog-item, .amblog-index-tag .amblog-form-search.amblog-item {
  padding-inline: 0 40px;
}
.amblog-index-index .amblog-form-search .amblog-input, .amblog-index-index .amblog-form-comment .amblog-input, .amblog-index-post .amblog-form-search .amblog-input, .amblog-index-post .amblog-form-comment .amblog-input, .amblog-index-search .amblog-form-search .amblog-input, .amblog-index-search .amblog-form-comment .amblog-input, .amblog-index-category .amblog-form-search .amblog-input, .amblog-index-category .amblog-form-comment .amblog-input, .amblog-index-tag .amblog-form-search .amblog-input, .amblog-index-tag .amblog-form-comment .amblog-input {
  font-size: 14px;
  font-size: 0.875rem;
}
.amblog-index-index .amblog-tag, .amblog-index-post .amblog-tag, .amblog-index-search .amblog-tag, .amblog-index-category .amblog-tag, .amblog-index-tag .amblog-tag {
  font-size: 14px;
  font-size: 0.875rem;
}
.amblog-index-index .amblog-tag:hover, .amblog-index-post .amblog-tag:hover, .amblog-index-search .amblog-tag:hover, .amblog-index-category .amblog-tag:hover, .amblog-index-tag .amblog-tag:hover {
  background: #007038;
}
.amblog-index-index .amblog-element-block[data-set=sidebar-recentcomments], .amblog-index-index .amblog-element-block[data-set=sidebar-recentpost], .amblog-index-post .amblog-element-block[data-set=sidebar-recentcomments], .amblog-index-post .amblog-element-block[data-set=sidebar-recentpost], .amblog-index-search .amblog-element-block[data-set=sidebar-recentcomments], .amblog-index-search .amblog-element-block[data-set=sidebar-recentpost], .amblog-index-category .amblog-element-block[data-set=sidebar-recentcomments], .amblog-index-category .amblog-element-block[data-set=sidebar-recentpost], .amblog-index-tag .amblog-element-block[data-set=sidebar-recentcomments], .amblog-index-tag .amblog-element-block[data-set=sidebar-recentpost] {
  display: none;
}
.amblog-index-index .amblog-post-container .amblog-content, .amblog-index-index .amblog-grid-list .amblog-content, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-content, .amblog-index-post .amblog-post-container .amblog-content, .amblog-index-post .amblog-grid-list .amblog-content, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-content, .amblog-index-search .amblog-post-container .amblog-content, .amblog-index-search .amblog-grid-list .amblog-content, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-content, .amblog-index-category .amblog-post-container .amblog-content, .amblog-index-category .amblog-grid-list .amblog-content, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-content, .amblog-index-tag .amblog-post-container .amblog-content, .amblog-index-tag .amblog-grid-list .amblog-content, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-content {
  padding: 0;
}
.amblog-index-index .amblog-date, .amblog-index-index .amblog-views, .amblog-index-index .amblog-minread, .amblog-index-post .amblog-date, .amblog-index-post .amblog-views, .amblog-index-post .amblog-minread, .amblog-index-search .amblog-date, .amblog-index-search .amblog-views, .amblog-index-search .amblog-minread, .amblog-index-category .amblog-date, .amblog-index-category .amblog-views, .amblog-index-category .amblog-minread, .amblog-index-tag .amblog-date, .amblog-index-tag .amblog-views, .amblog-index-tag .amblog-minread {
  font-size: 12px;
  font-size: 0.75rem;
}
.amblog-index-index .amblog-grid-list .amblog-dates > *:last-child, .amblog-index-index .amblog-post-container .amblog-dates > *:last-child, .amblog-index-index .amblog-container-list .amblog-dates > *:last-child, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-dates > *:last-child, .amblog-index-post .amblog-grid-list .amblog-dates > *:last-child, .amblog-index-post .amblog-post-container .amblog-dates > *:last-child, .amblog-index-post .amblog-container-list .amblog-dates > *:last-child, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-dates > *:last-child, .amblog-index-search .amblog-grid-list .amblog-dates > *:last-child, .amblog-index-search .amblog-post-container .amblog-dates > *:last-child, .amblog-index-search .amblog-container-list .amblog-dates > *:last-child, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-dates > *:last-child, .amblog-index-category .amblog-grid-list .amblog-dates > *:last-child, .amblog-index-category .amblog-post-container .amblog-dates > *:last-child, .amblog-index-category .amblog-container-list .amblog-dates > *:last-child, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-dates > *:last-child, .amblog-index-tag .amblog-grid-list .amblog-dates > *:last-child, .amblog-index-tag .amblog-post-container .amblog-dates > *:last-child, .amblog-index-tag .amblog-container-list .amblog-dates > *:last-child, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-dates > *:last-child {
  margin-bottom: 10px;
}
.amblog-index-index .amblog-post-title, .amblog-index-post .amblog-post-title, .amblog-index-search .amblog-post-title, .amblog-index-category .amblog-post-title, .amblog-index-tag .amblog-post-title {
  font-size: 37px;
  font-size: 2.3125rem;
  line-height: 1.2;
  padding: 0;
}
.amblog-index-index .amblog-post-title a:hover, .amblog-index-post .amblog-post-title a:hover, .amblog-index-search .amblog-post-title a:hover, .amblog-index-category .amblog-post-title a:hover, .amblog-index-tag .amblog-post-title a:hover {
  color: #007038;
  text-decoration: none;
}
.amblog-index-index .amblog-post-container .amblog-shot > p, .amblog-index-index .amblog-post-container .amblog-content > p, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-shot > p, .amblog-index-index .amblog-grid-list .slick-slide .amblog-item .amblog-content > p, .amblog-index-post .amblog-post-container .amblog-shot > p, .amblog-index-post .amblog-post-container .amblog-content > p, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-shot > p, .amblog-index-post .amblog-grid-list .slick-slide .amblog-item .amblog-content > p, .amblog-index-search .amblog-post-container .amblog-shot > p, .amblog-index-search .amblog-post-container .amblog-content > p, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-shot > p, .amblog-index-search .amblog-grid-list .slick-slide .amblog-item .amblog-content > p, .amblog-index-category .amblog-post-container .amblog-shot > p, .amblog-index-category .amblog-post-container .amblog-content > p, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-shot > p, .amblog-index-category .amblog-grid-list .slick-slide .amblog-item .amblog-content > p, .amblog-index-tag .amblog-post-container .amblog-shot > p, .amblog-index-tag .amblog-post-container .amblog-content > p, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-shot > p, .amblog-index-tag .amblog-grid-list .slick-slide .amblog-item .amblog-content > p {
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.amblog-index-index .amblog-footer, .amblog-index-post .amblog-footer, .amblog-index-search .amblog-footer, .amblog-index-category .amblog-footer, .amblog-index-tag .amblog-footer {
  padding: 0;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #c9c9c9;
}
.amblog-index-index .amblog-content h2, .amblog-index-post .amblog-content h2, .amblog-index-search .amblog-content h2, .amblog-index-category .amblog-content h2, .amblog-index-tag .amblog-content h2 {
  font-size: 30px;
  font-size: 1.875rem;
}
@media (min-width: 769px) {
  .amblog-index-index .columns, .amblog-index-post .columns, .amblog-index-search .columns, .amblog-index-category .columns, .amblog-index-tag .columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 80px;
  }
  .amblog-index-index .columns .column.main, .amblog-index-post .columns .column.main, .amblog-index-search .columns .column.main, .amblog-index-category .columns .column.main, .amblog-index-tag .columns .column.main {
    order: 2;
    flex-basis: 75%;
    flex-grow: 0;
    border-left: 1px solid #c9c9c9;
    padding-left: 40px;
  }
  .amblog-index-index .columns .sidebar-additional, .amblog-index-post .columns .sidebar-additional, .amblog-index-search .columns .sidebar-additional, .amblog-index-category .columns .sidebar-additional, .amblog-index-tag .columns .sidebar-additional {
    flex-basis: 25%;
    order: 0;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    padding-left: 0;
  }
}

.amblog-index-index .amblog-ref, .amblog-index-search .amblog-ref, .amblog-index-tag .amblog-ref, .amblog-index-category .amblog-ref, .amblog-index-post .amblog-ref, .amblog-index-author .amblog-ref {
  color: #007038;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 400;
}

.amblog-post-container .amblog-read, .amblog-grid-list .slick-slide .amblog-item .amblog-read {
  font-size: 14px;
  font-size: 0.875rem;
  background-color: #007038;
  padding: 5px 20px;
}
.amblog-post-container .amblog-read:hover, .amblog-grid-list .slick-slide .amblog-item .amblog-read:hover {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
}

.amblog-search-suggest, .amblog-search-title {
  font-size: 14px;
  font-size: 0.875rem;
}

.amblog-index-search .page-main .page-title, .amblog-index-category .page-main .page-title, .amblog-index-tag .page-main .page-title {
  display: block;
}

.amblog-search-title.open:after {
  background: #007038;
}

.amblog-comments-action {
  margin-inline: 0;
}

.amblog-secondary-title {
  font-size: 16px;
  font-size: 1rem;
}

.amblog-head-note {
  font-size: 12px;
  font-size: 0.75rem;
}

.amblog-form-comment .amblog-btn {
  font-size: 14px;
  font-size: 0.875rem;
  background-color: #007038;
  padding: 20px 20px;
}
.amblog-form-comment .amblog-btn:hover {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
}

.amblog-element-block .amblog-author, .amblog-comment-content .amblog-author, .amblog-comment-content .amblog-button {
  font-size: 14px;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  body[class*=amblog-index-] .amblog-title {
    font-size: 16px;
    font-size: 1rem;
  }
}
.columns .sidebar-main {
  flex-basis: auto;
}

.amblog-index-post.page-layout-1column .columns .column.main {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex-basis: 100%;
  border-left: 0;
  padding-left: 0;
}

.am-powered-by {
  display: none !important;
}

body[class*=amblog-index-] .page-title-wrapper {
  display: none !important;
}

.checkout-cart-index .page-main > .page-title-wrapper .page-title, .amasty_quote-cart-index .page-main > .page-title-wrapper .page-title {
  display: block;
  text-align: left;
  margin-top: 40px;
  font-size: 32px;
  font-size: 2rem;
  margin-bottom: 40px;
  color: #181A1D;
}
.checkout-cart-index .cart.table-wrapper .product-item-name, .amasty_quote-cart-index .cart.table-wrapper .product-item-name {
  font-size: 18px;
  font-size: 1.125rem;
  margin: 0;
  line-height: 1.2;
  font-weight: 600;
  color: #181A1D;
}
.checkout-cart-index .cart.table-wrapper .item-options, .amasty_quote-cart-index .cart.table-wrapper .item-options {
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.checkout-cart-index .cart.table-wrapper .item-options dt, .amasty_quote-cart-index .cart.table-wrapper .item-options dt {
  width: 100px;
}
.checkout-cart-index .cart.table-wrapper .product-item-details, .amasty_quote-cart-index .cart.table-wrapper .product-item-details {
  padding-bottom: 5px;
}
.checkout-cart-index .cart.table-wrapper .col.qty .input-text, .amasty_quote-cart-index .cart.table-wrapper .col.qty .input-text {
  font-size: 15px;
  font-size: 0.9375rem;
  color: #181A1D;
  font-weight: 400;
}
.checkout-cart-index .cart.table-wrapper .col.price .price-excluding-tax, .checkout-cart-index .cart.table-wrapper .col.subtotal .price-including-tax, .checkout-cart-index .cart.table-wrapper .col.subtotal .price-including-tax, .checkout-cart-index .cart.table-wrapper .col.subtotal .price-excluding-tax, .amasty_quote-cart-index .cart.table-wrapper .col.price .price-excluding-tax, .amasty_quote-cart-index .cart.table-wrapper .col.subtotal .price-including-tax, .amasty_quote-cart-index .cart.table-wrapper .col.subtotal .price-including-tax, .amasty_quote-cart-index .cart.table-wrapper .col.subtotal .price-excluding-tax {
  font-size: 16px;
  font-size: 1rem;
  color: #007038;
  padding-top: 5px;
}
.checkout-cart-index .cart.table-wrapper .actions-toolbar, .amasty_quote-cart-index .cart.table-wrapper .actions-toolbar {
  margin-top: -20px;
}
.checkout-cart-index .cart.table-wrapper .actions-toolbar > .action-edit, .checkout-cart-index .cart.table-wrapper .actions-toolbar > .action-delete, .amasty_quote-cart-index .cart.table-wrapper .actions-toolbar > .action-edit, .amasty_quote-cart-index .cart.table-wrapper .actions-toolbar > .action-delete {
  top: auto;
  bottom: 20px;
}
.checkout-cart-index .cart-summary > .title, .amasty_quote-cart-index .cart-summary > .title {
  font-size: 22px;
  font-size: 1.375rem;
}
.checkout-cart-index .cart-summary .block .title strong, .amasty_quote-cart-index .cart-summary .block .title strong {
  font-size: 16px;
  font-size: 1rem;
}
.checkout-cart-index .quote-details .title, .amasty_quote-cart-index .quote-details .title {
  font-size: 22px;
  font-size: 1.375rem;
}
.checkout-cart-index .cart-totals .grand .mark, .checkout-cart-index .opc-block-summary .table-totals .grand .mark, .amasty_quote-cart-index .cart-totals .grand .mark, .amasty_quote-cart-index .opc-block-summary .table-totals .grand .mark {
  font-size: 20px;
  font-size: 1.25rem;
}
.checkout-cart-index .cart-totals .grand .amount, .checkout-cart-index .opc-block-summary .table-totals .grand .amount, .amasty_quote-cart-index .cart-totals .grand .amount, .amasty_quote-cart-index .opc-block-summary .table-totals .grand .amount {
  font-size: 20px;
  font-size: 1.25rem;
}
.checkout-cart-index .abs-discount-block-desktop .block > .title strong, .checkout-cart-index .paypal-review-discount .block > .title strong, .checkout-cart-index .cart-discount .block > .title strong, .amasty_quote-cart-index .abs-discount-block-desktop .block > .title strong, .amasty_quote-cart-index .paypal-review-discount .block > .title strong, .amasty_quote-cart-index .cart-discount .block > .title strong {
  font-size: 15px;
  font-size: 0.9375rem;
}
.checkout-cart-index .abs-discount-block .block > .title strong, .checkout-cart-index .paypal-review-discount .block > .title strong, .checkout-cart-index .cart-discount .block > .title strong, .amasty_quote-cart-index .abs-discount-block .block > .title strong, .amasty_quote-cart-index .paypal-review-discount .block > .title strong, .amasty_quote-cart-index .cart-discount .block > .title strong {
  color: #007038;
}

.checkout-index-index {
  padding-top: 84px;
}
.checkout-index-index .page-main {
  max-width: 1000px;
}
.checkout-index-index .nav-sections {
  display: block;
}
.checkout-index-index .opc-progress-bar {
  display: flex;
  max-width: 900px;
  margin-inline: auto;
  margin-top: 40px;
  margin-bottom: 40px;
  line-height: 1;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item {
  flex-grow: 1;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item > span {
  font-size: 16px;
  font-size: 1rem;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item > span:after {
  font-size: 22px;
  font-size: 1.375rem;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item._active:before {
  background: #007038;
  border-color: #007038;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item._active > span:before {
  background: #007038;
  border-color: #007038;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item._active > span:after {
  border-color: #007038;
}
.checkout-index-index .opc-progress-bar .opc-progress-bar-item._complete > span {
  color: #007038;
}
.checkout-index-index .abs-checkout-title, .checkout-index-index .opc-wrapper .step-title, .checkout-index-index .opc-block-shipping-information .shipping-information-title, .checkout-index-index .opc-block-summary > .title, .checkout-index-index .checkout-agreements-items .checkout-agreements-item-title {
  font-size: 20px;
  font-size: 1.25rem;
  font-weight: 600;
}
.checkout-index-index .opc-block-summary .items-in-cart > .title strong {
  font-size: 16px;
  font-size: 1rem;
}
.checkout-index-index .opc-wrapper .form-login, .checkout-index-index .opc-wrapper .form-shipping-address {
  max-width: 100%;
}
.checkout-index-index .product-item {
  font-size: 14px;
  font-size: 0.875rem;
}
.checkout-index-index .opc-block-summary .product-item .price {
  font-size: 16px;
  font-size: 1rem;
  color: #007038;
  font-weight: 600;
}
.checkout-index-index .product-item-name {
  line-height: 1.1;
  font-size: 15px;
  text-transform: initial;
  font-weight: 600;
}
.checkout-index-index .product-item-name a {
  color: #000;
}
@media (min-width: 769px) {
  .checkout-index-index .opc-wrapper {
    width: 60%;
  }
}
@media (min-width: 769px) {
  .checkout-index-index .opc-sidebar {
    width: 40%;
  }
}
.checkout-index-index #checkout #shipping-new-address-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.checkout-index-index #checkout #shipping-new-address-form > .field {
  flex-basis: calc(50% - 10px);
  margin-bottom: 10px;
}
.checkout-index-index #checkout #shipping-new-address-form > .field[name="shippingAddress.company"], .checkout-index-index #checkout #shipping-new-address-form > .field[name="shippingAddress.custom_attributes.residential"], .checkout-index-index #checkout #shipping-new-address-form > .field[name="shippingAddress.custom_attributes.wineclub_shipping"], .checkout-index-index #checkout #shipping-new-address-form > .field[name="shippingAddress.telephone"], .checkout-index-index #checkout #shipping-new-address-form > .field.street {
  flex-basis: 100%;
}
.checkout-index-index #checkout .billing-address-form .fieldset.address {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.checkout-index-index #checkout .billing-address-form .fieldset.address > .field {
  flex-basis: calc(50% - 10px);
  margin-bottom: 10px;
}
.checkout-index-index #checkout .billing-address-form .fieldset.address > .field.street {
  flex-basis: 100%;
}
.checkout-index-index #checkout .billing-address-form .fieldset.address > .field[name="billingAddressstripe_payments.company"], .checkout-index-index #checkout .billing-address-form .fieldset.address > .field[name="billingAddressstripe_payments.telephone"], .checkout-index-index #checkout .billing-address-form .fieldset.address > .field[name="billingAddressaffirm_gateway.company"], .checkout-index-index #checkout .billing-address-form .fieldset.address > .field[name="billingAddressaffirm_gateway.telephone"] {
  flex-basis: 100%;
}
.checkout-index-index .fieldset > .field.required > .label:after, .checkout-index-index .fieldset > .fields > .field.required > .label:after, .checkout-index-index .fieldset > .field._required > .label:after, .checkout-index-index .fieldset > .fields > .field._required > .label:after {
  line-height: 1;
}
.checkout-index-index input[type=text], .checkout-index-index input[type=password], .checkout-index-index input[type=url], .checkout-index-index input[type=tel], .checkout-index-index input[type=search], .checkout-index-index input[type=number], .checkout-index-index input[type*=date], .checkout-index-index input[type=email], .checkout-index-index select {
  border-color: #d0d0d0;
}
.checkout-index-index .abs-sidebar-totals .grand .mark, .checkout-index-index .cart-totals .grand .mark, .checkout-index-index .opc-block-summary .table-totals .grand .mark, .checkout-index-index .abs-sidebar-totals .grand .amount, .checkout-index-index .cart-totals .grand .amount, .checkout-index-index .opc-block-summary .table-totals .grand .amount {
  font-size: 20px;
  font-size: 1.25rem;
}
.checkout-index-index .checkout-payment-method .field-select-billing, .checkout-index-index .checkout-payment-method .billing-address-form {
  max-width: 100%;
}
.checkout-index-index .field-error {
  font-size: 12px;
  font-size: 0.75rem;
}
.checkout-index-index .checkout-payment-method .checkout-billing-address .primary .action-update {
  margin-bottom: 0;
  padding: 8px 10px;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
}
.checkout-index-index .checkout-payment-method .checkout-billing-address .primary .action-update:hover {
  border: 0;
}
.checkout-index-index .checkout-payment-method .checkout-billing-address .primary .action-cancel {
  color: #007038;
  cursor: pointer;
}
.checkout-index-index .checkout-payment-method .payment-option-title .action-toggle {
  color: #007038;
}
.checkout-index-index .checkout-payment-method .payment-option-content .form-discount .actions-toolbar .primary .action {
  display: inline-block;
  height: 50px;
  margin-left: 5px;
  padding-inline: 10px;
  border-radius: 4px;
  background: #007038;
  border-color: #007038;
  color: #fff;
  box-shadow: none;
  cursor: pointer;
}
.checkout-index-index .message.error, .checkout-index-index .message {
  font-size: 12px;
  font-size: 0.75rem;
}
.checkout-index-index .header-bottom {
  display: none;
}
.checkout-index-index .page-header .header.content .header-middle__inner {
  justify-content: center;
}
.checkout-index-index .page-header .header.content .amsearch-wrapper-block, .checkout-index-index .page-header .header.content .amquote-cart-wrapper {
  display: none;
}

.checkout-payment-method .ccard .cvv .input-text {
  width: 75px !important;
}

.amasty_quote-cart-index .column.main {
  display: flex;
  margin-inline: auto;
}
@media (max-width: 840px) {
  .amasty_quote-cart-index .column.main {
    flex-direction: column;
  }
}
.amasty_quote-cart-index .quote-cart-container {
  width: 65%;
  padding-right: 30px;
}
@media (max-width: 840px) {
  .amasty_quote-cart-index .quote-cart-container {
    width: 100%;
    padding-right: 0;
  }
}
.amasty_quote-cart-index .quote-cart-sidebar {
  width: 35%;
  padding-left: 60px;
}
@media (max-width: 840px) {
  .amasty_quote-cart-index .quote-cart-sidebar {
    width: 100%;
    padding-left: 0;
  }
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-summary {
  width: 100%;
  float: none;
  top: 0 !important;
  margin-bottom: 25px !important;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container .form-cart {
  width: 100%;
  float: none;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table thead, .amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table th {
  display: none;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table td.col.qty, .amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table td.col.subtotal {
  display: none;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table td.col.qty.price {
  display: block;
  padding-left: 185px;
  margin-top: -60px;
  text-align: left;
  padding-bottom: 20px;
  color: #007038;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container .actions-toolbar > .action-edit {
  display: none;
}

.cart-summary .checkout-methods-items .amasty-quote-link {
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.4;
}

.cart .action.update {
  border: 1px solid #007038;
  font-family: "Inter";
  background-color: #fff;
  color: #007038;
  font-size: 16px;
  font-size: 1rem;
  padding: 14px 16px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: normal;
  cursor: pointer;
}
.cart .action.update:hover, .cart .action.update:active {
  background-color: rgb(0%, 53.9215686275%, 26.9607843137%);
  box-shadow: none !important;
  color: #fff;
}

/* ==========================================================================
   ParknPool product page — design refresh prototype
   ========================================================================== */
:root {
  /* Brand */
  --navy-900: #0f2c4a;
  --navy-800: #163b62;
  --navy-700: #1c4a78;
  --navy-100: #dde8f1;
  --navy-50: #f3f7fb;
  --orange-500: #e87722;
  --orange-600: #cf6618;
  --orange-50: #fef3e8;
  /* Seafoam — pool/water adjacency */
  --seafoam-50: #edf5f1;
  --seafoam-100: #e5f1eb;
  --seafoam-300: #b8d8c8;
  --seafoam-500: #6aae8e;
  --seafoam-700: #2f7d4f;
  /* Blue spectrum — secondary accent */
  --blue-50: #eaf1fb;
  --blue-100: #d4e2f5;
  --blue-soft: #5f96cc;
  --blue-bright:#4776F0;
  --blue-deep: #1846BE;
  --gold-50: #fff7e0;
  --gold-100: #fde9b3;
  --gold-300: #f1cf6a;
  --gold-500: #d4a017;
  --gold-700: #8a6a17;
  --red-600: #c43d3d;
  --red-50: #fbeaea;
  --green-50: #e8f3ec;
  --green-100: #c9e3d3;
  --green-500: #2f7d4f;
  --green-600: #2f7d4f;
  --green-deep: #007038;
  /* Ink scale */
  --ink-900: #0c1721;
  --ink-800: #1a2632;
  --ink-700: #3a4a5c;
  --ink-600: #4f6173;
  --ink-500: #6b7a8c;
  --ink-400: #95a1b1;
  --ink-300: #c9d1da;
  --ink-200: #dee4eb;
  --ink-100: #eef2f6;
  --ink-50: #f6f8fb;
  --white: #ffffff;
  --border: #e1e6ec;
  --border-strong: #c9d1da;
  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 44, 74, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 44, 74, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 44, 74, 0.12);
  /* Layout */
  --container: 1440px;
  /* Full height of the sticky .page-header. Anything that pins below it or
     needs the remaining viewport measures from here. */
  --header-h: 212px;
  --gutter: 24px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-800);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--navy-700);
  text-decoration: none;
}

a:hover {
  color: var(--navy-900);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Magento's legacy stylesheet styles `button:hover` / `:focus` / `:active`
   with a 1px border and a grey fill. An element+pseudo-class selector outranks
   a plain class, so every v2 button reset with a bare class picked both up the
   moment the cursor touched it — the border grew each one by 2px, which
   visibly shunted the mega-menu rail down as you moved through it.

   Restating the resets at pseudo-class specificity settles it in one place.
   Components keep their own rest-state rules, and anything declared later in
   this file still wins, so this only sets a floor. */
.nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active,
.mega-cat,
.mega-cat:hover,
.mega-cat:focus,
.mega-cat:active,
.filters__clear,
.filters__clear:hover,
.filters__clear:focus,
.filters__clear:active,
.filter-group__toggle,
.filter-group__toggle:hover,
.filter-group__toggle:focus,
.filter-group__toggle:active,
.qty__btn,
.qty__btn:hover,
.qty__btn:focus,
.qty__btn:active,
.tab,
.tab:hover,
.tab:focus,
.tab:active,
.news-archive__toggle,
.news-archive__toggle:hover,
.news-archive__toggle:focus,
.news-archive__toggle:active,
.footer-newsletter__field button,
.footer-newsletter__field button:hover,
.footer-newsletter__field button:focus,
.footer-newsletter__field button:active,
.header .search button,
.header .search button:hover,
.header .search button:focus,
.header .search button:active {
  border: none;
  box-shadow: none;
}

/* Split out because the two buttons above that carry a fill — the quantity
   stepper and the newsletter submit — must keep it. */
.nav-link, .nav-link:hover, .nav-link:focus, .nav-link:active,
.mega-cat,
.mega-cat:hover,
.mega-cat:focus,
.mega-cat:active,
.filters__clear,
.filters__clear:hover,
.filters__clear:focus,
.filters__clear:active,
.filter-group__toggle,
.filter-group__toggle:hover,
.filter-group__toggle:focus,
.filter-group__toggle:active,
.tab,
.tab:hover,
.tab:focus,
.tab:active,
.news-archive__toggle,
.news-archive__toggle:hover,
.news-archive__toggle:focus,
.news-archive__toggle:active {
  background: transparent;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   Promo bar
   ============================================================ */
.promo-bar {
  background: var(--gold-300);
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(15, 44, 74, 0.12);
  box-shadow: 0 1px 0 rgba(15, 44, 74, 0.06);
}

.promo-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 11px 24px;
  flex-wrap: wrap;
}

.promo-bar__pill {
  background: var(--navy-900);
  color: var(--gold-300);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.promo-bar__link {
  color: var(--navy-900);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

.promo-bar__link:hover {
  color: var(--orange-600);
}

/* ============================================================
   Utility bar
   ============================================================ */
.utility-bar {
  background: var(--navy-900);
  color: var(--ink-200);
  font-size: 13px;
}

.utility-bar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}

.utility-bar__left,
.utility-bar__right {
  display: flex;
  gap: 22px;
  align-items: center;
}

.util-link {
  color: var(--ink-200);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.util-link:hover {
  color: var(--white);
}

.util-meta {
  color: var(--navy-100);
  opacity: 0.85;
}

.util-icon {
  font-size: 12px;
}

/* ============================================================
   Header
   ============================================================ */
.header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 18px 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  /* Magento's blank theme ships a bare `.logo { float: left }`, which made the
     footer blurb wrap around the mark. */
  float: none;
}

.logo__img {
  height: 38px;
  width: auto;
  display: block;
}

.logo__img--light {
  filter: brightness(0) invert(1);
}

/* Scoped to the header on purpose. Magento's search results page wraps its
   content in <div class="search results">, which a bare `.search` selector
   also matches — that capped the whole results column at 560px. */
.header .search {
  position: relative;
  display: flex;
  max-width: 560px;
  width: 100%;
  justify-self: center;
}

.header .search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 0 50px 0 18px;
  font-size: 14px;
  color: var(--ink-800);
  background: var(--ink-50);
  transition: border-color 120ms, background 120ms;
}

.header .search input::placeholder {
  color: var(--ink-500);
}

.header .search input:focus {
  outline: none;
  border-color: var(--navy-700);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--navy-50);
}

.header .search button {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--navy-900);
  color: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.header .search button:hover {
  background: var(--navy-800);
}

.header__actions {
  display: flex;
  gap: 18px;
}

.header-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-800);
  padding: 8px 12px;
  border-radius: var(--r-md);
}

.header-action:hover {
  background: var(--ink-50);
  color: var(--navy-900);
}

.header-action .badge {
  display: inline-grid;
  place-items: center;
  font-style: normal;
  background: var(--orange-500);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
}

/* Primary nav */
.primary-nav {
  --nav-h: 46px;
  border-top: 1px solid var(--border);
}

.primary-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 38px;
}

/* Magento's list defaults put 16px of bottom margin on every li. As flex
   items that made each nav entry 64px tall inside a 46px row, so centring
   lifted the labels off the baseline and dragged the hover underline with
   them. The row is spaced by the ul's gap alone. */
.primary-nav ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

/* Sized to the row rather than by padding, so the label sits dead centre and
   the hover underline lands exactly on the row's bottom edge — padding left
   it dependent on whatever line-height the button inherited. */
.nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--nav-h);
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
  transition: background 120ms;
}

.nav-link:hover {
  color: var(--navy-900);
}

.nav-link:hover::after {
  background: var(--orange-500);
}

.primary-nav__meta {
  font-size: 13px;
  color: var(--ink-600);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.dot--green {
  background: var(--seafoam-500);
  box-shadow: 0 0 0 3px var(--seafoam-100);
}

/* ============================================================
   Mega menu — click to open, category rail + subcategory panel
   ============================================================ */
.nav-link--mega,
.nav-link--cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
  cursor: pointer;
  white-space: nowrap;
}

.nav-link__caret {
  transition: transform 160ms;
}

.nav-link--mega.is-open {
  color: var(--navy-900);
}

.nav-link--mega.is-open::after {
  background: var(--orange-500);
}

.nav-link--mega.is-open .nav-link__caret {
  transform: rotate(180deg);
}

.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 40;
}

.mega[hidden] {
  display: none;
}

.mega__inner {
  display: grid;
  grid-template-columns: 290px 1fr;
}

.mega__rail {
  border-right: 1px solid var(--border);
  padding: 16px 16px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(700px, 72vh);
  overflow-y: auto;
}

.mega-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  text-align: left;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.mega-cat svg {
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 120ms;
}

.mega-cat:hover {
  background: var(--ink-50);
  color: var(--navy-900);
}

.mega-cat.is-active {
  background: var(--navy-50);
  color: var(--navy-900);
}

.mega-cat.is-active svg {
  opacity: 1;
}

.mega__panel {
  padding: 24px 0 30px 30px;
}

.mega__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.mega__head h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0;
}

.mega__shopall {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-700);
  white-space: nowrap;
}

.mega__shopall:hover {
  color: var(--orange-500);
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Grouped panel: Shop by Collection / Type / Brand */
.mega__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.mega-col__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.mega-col__items {
  display: grid;
  gap: 2px;
}

.mega-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 5px 8px 5px 5px;
  border-radius: var(--r-md);
  color: var(--ink-800);
  transition: background 120ms, color 120ms;
}

.mega-row__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  transition: border-color 120ms;
}

.mega-row__thumb--tint {
  background: var(--navy-50);
}

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

.mega-row__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
}

.mega-row__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.mega-row:hover {
  background: var(--navy-50);
  color: var(--navy-900);
}

.mega-row:hover .mega-row__thumb {
  border-color: var(--navy-700);
}

.mega-sub {
  display: block;
  color: var(--ink-800);
}

.mega-sub__thumb {
  display: block;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-50);
  margin-bottom: 9px;
  transition: border-color 140ms, box-shadow 140ms;
}

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

/* White-on-white product photography (in-pool furniture) needs a tinted backdrop to read */
.mega-sub__thumb--tint {
  background: var(--navy-50);
}

.mega-sub__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
}

.mega-sub__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.mega-sub:hover .mega-sub__thumb {
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
}

.mega-sub:hover .mega-sub__label {
  color: var(--navy-900);
}

.mega__empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-600);
}

/* ============================================================
   Category (landing) page
   ============================================================ */
.cat-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 44px 24px 40px;
}

.cat-hero__title {
  font-family: var(--font-sans);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink-900);
  margin: 10px 0 16px;
}

.cat-hero__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 24px;
  max-width: 560px;
}

.cat-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.cat-hero__actions .btn {
  width: auto;
}

.cat-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
}

.cat-hero__stats li {
  font-size: 13px;
  color: var(--ink-600);
}

.cat-hero__stats strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}

.cat-hero__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}

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

.cat-section {
  padding: 40px 24px;
}

.cat-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.cat-section__head .section-title {
  margin: 0 0 6px;
}

.cat-section__sub {
  font-size: 15px;
  color: var(--ink-600);
  margin: 0;
}

.cat-section__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-700);
  white-space: nowrap;
}

.cat-section__link:hover {
  color: var(--orange-500);
}

/* Shop-by-category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Grouped variant: Shop by Collection / Type / Brand */
.cat-groups {
  display: grid;
  gap: 48px;
}

.cat-group__title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 20px;
}

.cat-group__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cat-card {
  display: block;
  color: var(--ink-900);
}

.cat-card__media {
  display: block;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-50);
  margin-bottom: 12px;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.cat-card__media--tint {
  background: var(--navy-50);
}

.cat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.cat-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
}

.cat-card__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.cat-card__label svg {
  color: var(--ink-400);
  flex-shrink: 0;
  transition: transform 150ms, color 150ms;
}

.cat-card:hover .cat-card__media {
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.cat-card:hover .cat-card__media img {
  transform: scale(1.04);
}

.cat-card:hover .cat-card__label {
  color: var(--navy-900);
}

.cat-card:hover .cat-card__label svg {
  color: var(--orange-500);
  transform: translateX(2px);
}

/* Product cards */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pcard {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.pcard:hover {
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.pcard__media {
  display: block;
  position: relative;
  /* Matches category_page_grid in etc/view.xml (320x300), so the generated
     image fills the box exactly — shorter than a square, and nothing is
     cropped. Keep the two in step if that image size ever changes. */
  aspect-ratio: 320/300;
  background: var(--ink-50);
  overflow: hidden;
}

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

.pcard:hover .pcard__media img {
  transform: scale(1.04);
}

.pcard__flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--navy-900);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
}

.pcard__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.pcard__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}

.pcard__title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
}

.pcard__title a {
  color: var(--ink-900);
}

.pcard__title a:hover {
  color: var(--navy-900);
}

.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.pcard__price {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
}

.pcard__meta {
  font-size: 12px;
  color: var(--ink-500);
}

/* Colour-configuration indicator */
.pcard__colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.pcard__dots {
  display: inline-flex;
}

.pcard__dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(12, 23, 33, 0.18);
  margin-right: -4px;
  box-shadow: 0 0 0 1.5px var(--white);
}

.pcard__dot:last-child {
  margin-right: 0;
}

/* A swatch dot shows the manufacturer's own printed swatch rather than a flat
   colour, because that is all the catalogue stores — every option value has an
   image and not one has a hex. Cover, so a rectangular swatch fills the
   circle instead of letterboxing inside it. */
.pcard__dot--swatch {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--white);
}

.pcard__colorcount {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600);
}

/* Colour-wheel "configuration available" badge (matches the live site pattern) */
.config-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  line-height: 1.25;
  white-space: nowrap;
}

.config-badge__icon {
  height: 18px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}

.config-badge__text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-800);
}

.pcard__colors--none {
  font-size: 12px;
  color: var(--ink-400);
  font-style: italic;
}

/* Quick specs on a product card.
 *
 * The point is comparison down a column, so every card puts them in the same
 * place and the same shape: a fixed two-column grid, not flow. A product with
 * one spec leaves the second cell empty rather than centring the first, so the
 * values in column one still line up with the values in column one of every
 * other card.
 *
 * Values use tabular figures. Dimensions are mostly numbers, and proportional
 * digits make a column of them look ragged even when it is aligned.
 */
.pcard__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 2px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border);
}

.pcard__spec {
  min-width: 0;
}

.pcard__spec-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  /* A long label must not push the value onto another line and break the
     shared baseline across cards. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard__spec-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  /* Wraps to two lines rather than truncating. A dimensions string —
     25" W x 25" D x 45" H — is the common case and the whole of it is the
     value; clipped to one line it reads as a different, smaller product.
     The box is held at two lines either way so the row sits at the same
     height on every card and the columns still line up across a grid. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  overflow-wrap: anywhere;
}

/* Collection band */
.collection-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.collection-tile {
  position: relative;
  display: block;
  aspect-ratio: 3/2;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--ink-100);
}

.collection-tile--tint {
  background: var(--navy-50);
}

.collection-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms ease;
}

.collection-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 23, 33, 0.72) 0%, rgba(12, 23, 33, 0.1) 45%, transparent 70%);
}

.collection-tile__name {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.collection-tile:hover img {
  transform: scale(1.05);
}

/* SEO copy block (CMS text) with balancing image */
.seo-block {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 44px;
  align-items: start;
}

.seo-block__media {
  position: sticky;
  top: 96px;
  aspect-ratio: 4/5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

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

.seo-block .seo-copy {
  max-width: none;
}

.seo-block__media--placeholder {
  background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
  min-height: 320px;
  position: static;
  box-shadow: none;
}

.seo-block--center {
  align-items: center;
}

.seo-copy h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 14px;
}

.seo-copy a {
  color: var(--navy-700);
  font-weight: 600;
}

.seo-copy a:hover {
  color: var(--orange-500);
}

/* ============================================================
   Product listing page (subcategory)
   ============================================================ */
.plp-head {
  padding: 32px 24px 8px;
}

.plp-head__title {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 8px 0 12px;
}

.plp-head__lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
  max-width: 720px;
}

.plp {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  padding: 24px 24px 48px;
  align-items: start;
}

/* Filter rail */
.filters {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 18px 14px;
  background: var(--white);
}

.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
}

.filters__head h2 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}

.filters__clear {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-700);
  cursor: pointer;
}

.filters__clear:hover {
  color: var(--orange-500);
}

.filter-group {
  border-bottom: 1px solid var(--border);
}

.filter-group:last-child {
  border-bottom: none;
}

.filter-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-800);
  cursor: pointer;
}

.filter-group__toggle svg {
  transition: transform 160ms;
  color: var(--ink-500);
}

.filter-group.is-collapsed .filter-group__toggle svg {
  transform: rotate(-90deg);
}

.filter-group__body {
  display: grid;
  gap: 9px;
  padding-bottom: 14px;
}

.filter-group.is-collapsed .filter-group__body {
  display: none;
}

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
}

.check input {
  width: 15px;
  height: 15px;
  accent-color: var(--navy-900);
  cursor: pointer;
  flex-shrink: 0;
}

.check__count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-400);
}

.check:hover {
  color: var(--ink-900);
}

/* Results column */
.results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.results__count {
  margin: 0;
  font-size: 14px;
  color: var(--ink-600);
}

.results__count strong {
  color: var(--ink-900);
}

.sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-600);
}

.sort__select {
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--ink-900);
  padding: 8px 30px 8px 12px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a4a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

.sort__select:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--navy-50);
}

.product-grid--plp {
  grid-template-columns: repeat(3, 1fr);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}

.pagination__page, .pagination__btn {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  background: var(--white);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}

.pagination__page:hover:not(.is-current), .pagination__btn:hover:not([disabled]) {
  border-color: var(--navy-700);
  color: var(--navy-900);
}

.pagination__page.is-current {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
  cursor: default;
}

.pagination__btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   Breadcrumbs
   ============================================================ */
.breadcrumbs {
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink-500);
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--ink-400);
}

.breadcrumbs a {
  color: var(--ink-600);
}

.breadcrumbs a:hover {
  color: var(--navy-900);
}

.breadcrumbs [aria-current=page] {
  color: var(--ink-800);
  font-weight: 500;
}

/* ============================================================
   Product hero
   ============================================================ */
/* Scoped to the PDP hero wrapper on purpose. A bare `.product` selector also
   matches Magento utility classes — `li.item.product` in the breadcrumbs and
   `div.product.media` around the gallery — and imposed this grid on them. */
.pnp-pdp-hero {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 460px;
  gap: 56px;
  padding: 40px 24px 56px;
  align-items: start;
}

/* Gallery */
.gallery {
  position: sticky;
  top: 110px;
}

.gallery__stage {
  position: relative;
  aspect-ratio: 5/4;
  background: var(--ink-50);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.gallery__main {
  position: absolute;
  inset: 0;
}

.gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.gallery__slide img,
.gallery__slide svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--white);
}

.gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  color: var(--ink-800);
  display: grid;
  place-items: center;
  transition: background 120ms, transform 120ms;
}

.gallery__nav:hover {
  background: var(--white);
  transform: translateY(-50%) scale(1.05);
}

.gallery__nav--prev {
  left: 16px;
}

.gallery__nav--next {
  right: 16px;
}

.gallery__counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: rgba(15, 32, 43, 0.78);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}

.gallery__thumbs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.gallery-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  padding: 0;
  transition: border-color 120ms, transform 120ms;
}

.gallery-thumb:hover {
  border-color: var(--navy-700);
}

.gallery-thumb.is-active {
  border-color: var(--orange-500);
}

.gallery-thumb img,
.gallery-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Buy box
   ============================================================ */
.buybox {
  position: sticky;
  top: 110px;
  background: var(--white);
}

.eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--orange-500);
  margin: 0 0 8px;
}

.eyebrow a {
  color: inherit;
}

.buybox__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 6px;
}

.buybox__subtitle {
  margin: 0 0 12px;
  color: var(--ink-600);
  font-size: 14px;
}

.buybox__meta {
  font-size: 13px;
  color: var(--ink-500);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.buybox__meta strong {
  color: var(--ink-800);
  font-weight: 600;
}

.meta-divider {
  color: var(--ink-300);
}

.meta-link {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 0;
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 600;
}

.badge-tag--green {
  background: var(--seafoam-100);
  color: var(--seafoam-700);
}

/* Price. Deliberately NOT a bare `.price` rule: Magento uses that class on the
   price *text* (span.price), so the card treatment lands on .product-info-price
   in the PDP reskin below. */
.price-card {
  margin: 22px 0 18px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--orange-50), var(--white));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.price__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.price__special {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}

.price__regular {
  font-size: 16px;
  color: var(--ink-500);
  text-decoration: line-through;
}

.price__save {
  background: var(--red-600);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
}

.price__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-600);
}

/* At a glance */
.atglance {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.atglance li {
  /* Magento's list defaults put a bottom margin on every li. Inside a grid
     whose cells are drawn with borders, that margin lands under the cell and
     opens a gap in the middle of the box. */
  margin: 0;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.atglance li:nth-child(2n) {
  border-right: none;
}

.atglance li:nth-last-child(-n+2) {
  border-bottom: none;
}

.atglance__label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  font-weight: 600;
  margin-bottom: 4px;
}

.atglance__value {
  font-size: 14px;
  color: var(--ink-900);
  font-weight: 600;
}

/* Configurator */
.config {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.config__group {
  margin-bottom: 20px;
}

.config__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.config__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-700);
}

.config__value {
  font-size: 13px;
  color: var(--ink-900);
  font-weight: 600;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
}

.swatch {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: var(--white);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms, border-color 120ms, box-shadow 120ms;
}

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

.swatch:hover {
  transform: scale(1.06);
  border-color: var(--navy-700);
}

.swatch.is-selected {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 1px var(--orange-500);
}

.swatch.is-selected::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  background: var(--orange-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.swatch--more,
.swatch--none {
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  background: var(--ink-50);
}

.swatch--none {
  color: var(--ink-500);
}

.swatch--more:hover,
.swatch--none:hover {
  background: var(--ink-100);
}

.swatch--more.is-selected::after,
.swatch--none.is-selected::after {
  display: none;
}

/* Segmented control */
.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.seg {
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--ink-700);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  transition: border-color 120ms, background 120ms, color 120ms;
}

.seg:hover {
  border-color: var(--navy-700);
}

.seg.is-selected {
  border-color: var(--navy-900);
  background: var(--navy-50);
  color: var(--navy-900);
}

/* Select field */
.config__select {
  width: 100%;
  border: 1px solid var(--border-strong);
  background-color: var(--white);
  color: var(--ink-900);
  padding: 11px 38px 11px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a4a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 120ms, box-shadow 120ms;
}

.config__select:hover {
  border-color: var(--navy-700);
}

.config__select:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--navy-50);
}

.config__select:required:invalid {
  color: var(--ink-500);
  font-weight: 500;
}

/* Actions */
.actions {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  margin-top: 8px;
}

.actions .btn--primary {
  grid-column: 2;
}

.actions .btn--secondary {
  grid-column: 1/-1;
}

.qty {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  height: 48px;
  overflow: hidden;
  background: var(--white);
}

.qty__btn {
  border: none;
  background: var(--white);
  color: var(--ink-800);
  font-size: 18px;
  font-weight: 600;
}

.qty__btn:hover {
  background: var(--ink-50);
}

.qty__input {
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--white);
  outline: none;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, transform 80ms;
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--orange-500);
  color: var(--white);
  border-color: var(--orange-500);
}

.btn--primary:hover {
  background: var(--orange-600);
  border-color: var(--orange-600);
}

.btn--secondary {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--navy-900);
}

.btn--secondary:hover {
  background: var(--navy-50);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

/* Trust strip */
.trust {
  list-style: none;
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-700);
}

.trust svg {
  color: var(--blue-deep);
  background: var(--blue-50);
  flex: none;
  width: 32px;
  height: 32px;
  padding: 7px;
  border-radius: 8px;
  box-sizing: border-box;
}

.trust strong {
  color: var(--ink-900);
  font-weight: 600;
}

/* ============================================================
   Features
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 40px 24px;
  border-top: 1px solid var(--border);
}

.feature-card {
  background: var(--seafoam-50);
  border: 1px solid var(--seafoam-100);
  border-radius: var(--r-lg);
  padding: 28px 26px;
}

.feature-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background: var(--white);
  color: var(--blue-deep);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  border: 1px solid var(--blue-100);
  box-shadow: 0 2px 0 var(--blue-50);
}

.feature-card h3 {
  font-family: var(--font-sans);
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.feature-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.6;
}

/* ============================================================
   Details + tabs
   ============================================================ */
.details {
  padding: 24px 24px 56px;
}

.details__intro {
  max-width: 720px;
  margin-bottom: 32px;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 12px;
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
}

/* Product description — overview + key features (two rich-text fields) */
.description {
  max-width: 760px;
  margin-bottom: 32px;
}

.rich-text + .rich-text {
  margin-top: 26px;
}

.rich-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  max-width: 760px;
}

/* The 760px measure is for copy running the full width of a page — the PLP
   SEO block. Inside a tab panel the column is already narrowed by the panel,
   so the cap applied a second time and left the text short of the panel it
   sits in. */
.tab-panel .rich-text {
  max-width: none;
}

/* Overview reads as the lead paragraph(s) */
.rich-text--lead {
  font-size: 17px;
  color: var(--ink-800);
}

.rich-text > :first-child {
  margin-top: 0;
}

.rich-text > :last-child {
  margin-bottom: 0;
}

.rich-text p {
  margin: 0 0 16px;
}

.rich-text h3 {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 28px 0 14px;
}

.rich-text ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.rich-text ul li {
  position: relative;
  padding-left: 26px;
}

.rich-text ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--blue-deep);
}

.rich-text strong {
  color: var(--ink-900);
  font-weight: 700;
}

.tabs {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--ink-50);
}

.tab {
  border: none;
  background: transparent;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-600);
  position: relative;
  white-space: nowrap;
}

.tab:hover {
  color: var(--ink-900);
}

.tab.is-active {
  color: var(--ink-900);
  background: var(--white);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 2px;
  background: var(--orange-500);
}

.tabs__panels {
  background: var(--white);
}

.tab-panel {
  display: none;
  padding: 32px;
}

.tab-panel.is-active {
  display: block;
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}

.specs-col h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-500);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.speclist {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 14px;
}

.speclist dt {
  color: var(--ink-500);
  font-weight: 500;
}

.speclist dd {
  margin: 0;
  color: var(--ink-900);
  font-weight: 500;
}

.warranty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.warranty-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  background: var(--white);
}

.warranty-card header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.warranty-card h4 {
  margin: 0;
  font-size: 16px;
  color: var(--ink-900);
  font-weight: 600;
}

.warranty-card .duration {
  font-size: 13px;
  color: var(--blue-deep);
  font-weight: 600;
}

.warranty-card .duration small {
  color: var(--ink-500);
  font-weight: 500;
}

.warranty-card p {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.55;
}

.warranty-card p:last-child {
  margin-bottom: 0;
}

.warranty-card .exclusion {
  color: var(--ink-500);
  font-size: 12px;
  font-style: italic;
}

.warranty-note {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--ink-50);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink-700);
  border-left: 3px solid var(--ink-300);
}

.warranty-note strong {
  color: var(--ink-900);
}

.care-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.care-list li {
  padding: 14px 18px;
  background: var(--ink-50);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-700);
}

.care-list strong {
  color: var(--ink-900);
}

.downloads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.downloads li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color 120ms, background 120ms;
}

.downloads li:hover {
  border-color: var(--navy-700);
  background: var(--navy-50);
}

.dl-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--blue-deep);
  color: var(--white);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dl-meta strong {
  display: block;
  font-size: 14px;
  color: var(--ink-900);
  margin-bottom: 2px;
}

.dl-meta small {
  font-size: 12px;
  color: var(--ink-500);
}

.dl-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--orange-500);
}

/* ============================================================
   Collection CTA
   ============================================================ */
.collection-cta {
  padding: 48px 24px 56px;
  border-top: 1px solid var(--border);
}

.collection-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  background: linear-gradient(135deg, var(--seafoam-50) 0%, var(--blue-50) 100%);
  border: 1px solid var(--seafoam-100);
  border-radius: var(--r-lg);
  padding: 48px;
}

.collection-cta__copy p {
  margin: 12px 0 24px;
  color: var(--ink-700);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
}

.collection-cta__copy .section-title {
  margin-bottom: 0;
}

.collection-cta__btn {
  display: inline-flex;
}

.collection-cta__image {
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
}

.collection-cta__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ============================================================
   Why ParknPool
   ============================================================ */
.why {
  padding: 64px 24px;
  text-align: center;
}

.why__head {
  max-width: 720px;
  margin: 0 auto 40px;
}

.why__head .eyebrow {
  color: var(--orange-500);
}

.why__head .section-title {
  margin-bottom: 14px;
}

.why__head .lede {
  color: var(--ink-600);
  margin: 0 auto;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}

.why-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}

.why-card:hover {
  border-color: var(--navy-700);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.why-card__num {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue-deep);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.why-card h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.why-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* ============================================================
   Help band
   ============================================================ */
.help-band {
  background: #c9e3d3;
  color: var(--navy-900);
  padding: 56px 0;
  margin-top: 24px;
  position: relative;
}

.help-band__inner {
  position: relative;
  z-index: 1;
}

.help-band .btn--ghost {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--white);
}

.help-band .btn--ghost:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}

.help-band__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.help-band h3 {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--navy-900);
}

.help-band p {
  margin: 0;
  color: var(--navy-800);
  max-width: 600px;
  font-size: 15px;
}

.help-band__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: #0a1f37;
  color: var(--ink-300);
  padding: 0 0 0;
}

/* Footer newsletter — simple inline field inside footer brand block */
.footer-newsletter {
  margin-top: 18px;
  max-width: 360px;
}

.footer-newsletter__label {
  display: block;
  font-size: 13px;
  color: var(--ink-300);
  margin-bottom: 10px;
}

.footer-newsletter__field {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 120ms, background 120ms;
}

.footer-newsletter__field:focus-within {
  border-color: var(--gold-300);
  background: rgba(255, 255, 255, 0.1);
}

.footer-newsletter__field input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
}

.footer-newsletter__field input:focus {
  outline: none;
}

.footer-newsletter__field input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter__field button {
  border: none;
  background: var(--orange-500);
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 16px;
  cursor: pointer;
  transition: background 120ms;
  white-space: nowrap;
}

.footer-newsletter__field button:hover {
  background: var(--orange-600);
}

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

/* Social icons */
.social {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  gap: 8px;
}

.social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink-300);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 160ms, color 160ms, transform 160ms, border-color 160ms;
}

.social a:hover {
  background: var(--gold-500);
  color: var(--navy-900);
  border-color: var(--gold-500);
  transform: translateY(-2px);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 48px;
  padding: 56px 24px 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* .logo is inline-flex, so in the footer it sat on a text baseline and carried
   the line box's descender space beneath it — a gap that reads as margin but
   is not one, and that adjusting the paragraph below would never have
   explained. */
.footer__brand .logo {
  display: flex;
}

.footer__brand p {
  margin: 10px 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-400);
  max-width: 380px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.footer__contact a {
  color: var(--white);
  font-weight: 600;
  font-size: 16px;
}

.footer__contact span {
  color: var(--ink-400);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Shop lists every panel in the mega menu — seventeen of them, which is a very
   long single column beside a Company list of four. Give it two of the three
   tracks and let the links flow down one and up the next. */
.footer__col--shop {
  grid-column: span 2;
}

/* display: block is load-bearing, and so is the selector. .footer__col ul is
   display: grid, and CSS multi-column has no effect on a grid container — so
   columns: 2 computed as 2 and flowed as one. A bare .footer__links--split
   (0,1,0) also loses to .footer__col ul (0,1,1) whatever the order, hence
   matching on both. */
.footer__col ul.footer__links--split {
  display: block;
  columns: 2;
  column-gap: 32px;
}

/* The grid's gap went with the grid, so the rhythm comes from the items.
   break-inside keeps a link from splitting across the boundary and reading
   as two. */
.footer__links--split li {
  break-inside: avoid;
  margin-bottom: 8px;
}

.footer__col h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 14px;
}

.footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer__col a {
  color: var(--ink-300);
  font-size: 14px;
}

.footer__col a:hover {
  color: var(--white);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  font-size: 13px;
  color: var(--ink-400);
}

.footer__bottom ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 22px;
}

.footer__bottom a {
  color: var(--ink-400);
}

.footer__bottom a:hover {
  color: var(--white);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .pnp-pdp-hero {
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 36px;
  }
  .features, .specs-grid, .warranty-grid, .why__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .collection-cta__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px;
  }
  .mega__inner {
    grid-template-columns: 240px 1fr;
  }
  .mega__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .cat-grid, .product-grid, .collection-band, .cat-group__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .plp {
    grid-template-columns: 220px 1fr;
    gap: 24px;
  }
  .product-grid--plp {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 880px) {
  .header__inner {
    grid-template-columns: auto auto;
    grid-template-areas: "logo actions" "search search";
    gap: 14px 16px;
  }
  .logo {
    grid-area: logo;
  }
  .header__actions {
    grid-area: actions;
  }
  .search {
    grid-area: search;
    max-width: none;
  }
  .primary-nav {
    display: none;
  }
  .mega {
    display: none;
  }
  .utility-bar__right {
    display: none;
  }
  .pnp-pdp-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 20px;
  }
  .gallery, .buybox {
    position: static;
  }
  .features {
    grid-template-columns: 1fr;
    padding: 32px 20px;
  }
  .specs-grid, .warranty-grid, .why__grid {
    grid-template-columns: 1fr;
  }
  .cat-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px;
  }
  .cat-hero__media {
    order: -1;
  }
  .cat-hero__title {
    font-size: 34px;
  }
  .cat-section {
    padding: 32px 20px;
  }
  .cat-grid, .product-grid, .collection-band, .cat-group__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .seo-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .seo-block__media {
    position: static;
    aspect-ratio: 16/9;
    max-height: 300px;
  }
  /* Listing: filters collapse above the grid */
  .plp {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .filters {
    position: static;
    top: auto;
  }
  .product-grid--plp {
    grid-template-columns: repeat(2, 1fr);
  }
  .why {
    padding: 48px 20px;
  }
  .help-band__inner {
    grid-template-columns: 1fr;
  }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .footer__links--split {
    columns: 1;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 12px;
  }
  .newsletter__inner {
    gap: 14px;
    padding: 16px 20px;
  }
  .newsletter__form {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 560px) {
  .swatches {
    grid-template-columns: repeat(8, 1fr);
  }
  .segmented {
    grid-template-columns: 1fr;
  }
  .price__special {
    font-size: 26px;
  }
  .buybox__title {
    font-size: 22px;
  }
  .footer__cols {
    grid-template-columns: 1fr;
  }
  .specs-grid {
    gap: 24px;
  }
  .tab-panel {
    padding: 22px 18px;
  }
  .cat-grid, .product-grid, .collection-band, .cat-group__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .cat-section__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .product-grid--plp {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .results__bar {
    flex-wrap: wrap;
    gap: 10px;
  }
}
/* ============================================================
   Content pages (About, Contact, Design, Catalog, Blog, News)
   ============================================================ */
.page-hero {
  padding: 44px 24px 8px;
}

.page-hero__title {
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink-900);
  margin: 10px 0 16px;
  max-width: 820px;
}

.page-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  max-width: 720px;
}

.page-hero__lede a {
  color: var(--navy-700);
  font-weight: 600;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-hero__actions .btn {
  width: auto;
}

.section-head-center {
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
}

.section-head-center .section-title {
  margin: 6px 0 10px;
}

.section-head-center .cat-section__sub {
  margin: 0 auto;
}

.why__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Stat band */
.statband {
  background: var(--navy-900);
  color: var(--white);
  padding: 40px 24px;
}

.statband__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.statband__item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.statband__item span {
  font-size: 13px;
  color: var(--navy-100);
}

/* Affiliations */
.affiliations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}

.affiliations li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  min-height: 96px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--ink-50);
}

.affil-abbr {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy-900);
  line-height: 1;
}

.affil-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  line-height: 1.3;
}

.article-width {
  max-width: 760px;
}

/* Forms */
.form {
  display: block;
}

.card-form {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.form__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 20px;
}

.field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}

.field input,
.field textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-900);
  background: var(--white);
  width: 100%;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field .config__select:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--navy-50);
}

.field .config__select {
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

.form-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.form .btn {
  width: 100%;
  margin-top: 4px;
}

/* Checkbox groups (design request form) */
.checkgroup {
  border: none;
  margin: 0 0 18px;
  padding: 0;
}

.checkgroup legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-800);
  padding: 0;
  margin-bottom: 10px;
}

.check-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-700);
  cursor: pointer;
  margin-bottom: 9px;
}

.check-opt input {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--navy-900);
  flex-shrink: 0;
  cursor: pointer;
}

.form__note {
  font-size: 13px;
  color: var(--ink-500);
  margin: 14px 0 0;
  text-align: center;
}

.form__note a {
  color: var(--navy-700);
  font-weight: 600;
}

/* Contact + design two-column */
.contact-split,
.catalog-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contact-info {
  display: grid;
  gap: 26px;
  align-content: start;
}

.contact-info__group h3 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 8px;
}

.contact-info__group p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-800);
}

.contact-info__group a {
  color: var(--navy-700);
  font-weight: 600;
}

/* Catalog download card */
.catalog-download {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--ink-50);
  text-align: center;
}

.catalog-download__cover {
  width: 260px;
  max-width: 100%;
  aspect-ratio: 1316/1708;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  margin: 0 auto 20px;
}

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

.catalog-download h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.catalog-download p {
  font-size: 15px;
  color: var(--ink-600);
  line-height: 1.6;
  margin: 0 0 18px;
}

.catalog-download__btn {
  width: auto;
  display: inline-flex;
}

.catalog-download__meta {
  font-size: 12px;
  color: var(--ink-500);
  margin: 14px 0 0;
}

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  counter-reset: step;
}

.timeline__step {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  background: var(--white);
}

.timeline__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 700;
  margin-bottom: 14px;
}

.timeline__step h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.timeline__step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600);
}

/* Blog: category tints */
.post-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-800);
}

.post-meta {
  font-size: 13px;
  color: var(--ink-500);
  margin: 0 0 8px;
}

.post-card__media,
.feature-post__media {
  position: relative;
  overflow: hidden;
}

/* Category tint shows as a placeholder behind the image while it loads */
[data-cat=park] {
  background: linear-gradient(135deg, var(--seafoam-500), var(--seafoam-700));
}

[data-cat=pool] {
  background: linear-gradient(135deg, var(--blue-soft), var(--blue-deep));
}

[data-cat=eco] {
  background: linear-gradient(135deg, var(--seafoam-300), var(--seafoam-500));
}

.post-card__media img,
.feature-post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-card__media .post-tag,
.feature-post__media .post-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}

/* Featured post */
.feature-post {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  color: var(--ink-900);
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.feature-post:hover {
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.feature-post__media {
  min-height: 300px;
}

.feature-post__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-post__title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 12px;
}

.feature-post__excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0 0 18px;
}

.feature-post__link {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-700);
}

.feature-post:hover .feature-post__link {
  color: var(--orange-500);
}

/* Blog grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  color: var(--ink-900);
  transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}

.post-card:hover {
  border-color: var(--navy-700);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.post-card__media {
  aspect-ratio: 16/9;
}

.post-card__body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.post-card__title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.post-card__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-600);
  margin: 0;
}

/* Article (blog post + news) */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 24px 56px;
}

.article__head {
  margin-bottom: 28px;
}

.post-tag--inline {
  background: var(--navy-50);
  color: var(--navy-900);
  margin-bottom: 16px;
}

.article__title {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink-900);
  margin: 0 0 12px;
}

.article__meta {
  font-size: 14px;
  color: var(--ink-500);
  margin: 0;
}

.article__body {
  font-size: 17px;
}

.article__body h2 {
  font-size: 24px;
  margin: 34px 0 14px;
}

.article__cta {
  margin-top: 40px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--ink-50);
  border: 1px solid var(--border);
  text-align: center;
}

.article__cta h2 {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.article__cta p {
  font-size: 15px;
  color: var(--ink-600);
  margin: 0 0 18px;
}

.article__cta .btn {
  width: auto;
}

@media (max-width: 1080px) {
  .why__grid--3, .timeline, .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .affiliations {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 880px) {
  .page-hero__title {
    font-size: 32px;
  }
  .contact-split, .catalog-split, .feature-post {
    grid-template-columns: 1fr;
  }
  .feature-post__media {
    min-height: 180px;
  }
  .statband__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
  .why__grid--3, .timeline, .blog-grid, .affiliations {
    grid-template-columns: 1fr;
  }
  .article__title {
    font-size: 28px;
  }
}
@media (max-width: 560px) {
  .form-grid, .form-grid--3 {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Industry news: archive sidebar + newsletter article
   ============================================================ */
.news-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 44px;
  padding: 28px 24px 56px;
  align-items: start;
}

.news-archive {
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.news-archive__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.news-archive__year {
  border-bottom: 1px solid var(--border);
}

.news-archive__year:last-child {
  border-bottom: none;
}

.news-archive__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 4px;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
}

.news-archive__toggle svg {
  color: var(--ink-400);
  transition: transform 160ms;
}

.news-archive__year.is-open .news-archive__toggle svg {
  transform: rotate(180deg);
}

.news-archive__year ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: none;
  gap: 1px;
}

.news-archive__year.is-open ul {
  display: grid;
}

.news-archive__year a {
  display: block;
  padding: 5px 10px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-700);
}

.news-archive__year a:hover {
  background: var(--ink-50);
  color: var(--navy-900);
}

.news-archive__year a.is-current {
  background: var(--navy-50);
  color: var(--navy-900);
  font-weight: 700;
}

.news-article {
  max-width: 800px;
}

.news-article__banner {
  width: 100%;
  border-radius: var(--r-lg);
  display: block;
  margin-bottom: 22px;
}

.news-article__title {
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 20px;
  text-align: center;
}

.news-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 34px 0 8px;
  padding-top: 28px;
  border-top: 3px solid var(--orange-500);
}

.news-col img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-bottom: 10px;
}

.news-col h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.25;
}

.news-col p {
  font-size: 14px;
  color: var(--ink-600);
  line-height: 1.55;
  margin: 0 0 8px;
}

.news-col ul {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.6;
}

@media (max-width: 880px) {
  .news-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .news-archive {
    position: static;
    max-height: none;
  }
  .news-cols {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Blog post: article + sidebar navigation
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  padding: 28px 24px 56px;
  align-items: start;
}

.post-main {
  min-width: 0;
}

.post-main .article__body {
  max-width: none;
}

.back-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-700);
  margin-bottom: 18px;
}

.back-link:hover {
  color: var(--orange-500);
}

.post-hero {
  width: 100%;
  border-radius: var(--r-lg);
  display: block;
  margin: 4px 0 26px;
}

.post-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 24px;
}

.sidebar-block {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
}

.sidebar-block__title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.cat-list, .recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cat-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--ink-700);
  border-bottom: 1px solid var(--border);
}

.cat-list li:last-child a {
  border-bottom: none;
  padding-bottom: 0;
}

.cat-list a span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-500);
  background: var(--ink-50);
  border-radius: 999px;
  padding: 2px 8px;
}

.cat-list a:hover {
  color: var(--navy-900);
}

.cat-list a:hover span {
  color: var(--navy-900);
  background: var(--navy-50);
}

.recent-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.recent-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.recent-list a {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-800);
}

.recent-list a:hover {
  color: var(--navy-700);
}

/* Links inside article body */
.article__body a {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article__body a:hover {
  color: var(--orange-500);
}

@media (max-width: 880px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .post-sidebar {
    position: static;
  }
}
/* ===== v2 PDP hero — reskin of Magento markup (high specificity to beat pnp.css) ===== */
/* The old PDP made .column.main a flex row for its two-column layout. The v2
   hero is a self-contained grid, and as a flex item it shrink-wrapped to its
   min-content width (360px media column) instead of filling the container. */
.catalog-product-view .columns .column.main {
  display: block;
  flex-direction: initial;
}

.catalog-product-view .pnp-pdp-hero {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) 460px;
  gap: 56px;
  align-items: start;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 24px 56px;
  box-sizing: border-box;
  float: none;
}

@media (max-width: 900px) {
  .catalog-product-view .pnp-pdp-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.catalog-product-view .pnp-pdp-hero .product.media,
.catalog-product-view .pnp-pdp-hero .product-info-main {
  position: sticky;
  top: 110px;
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  .catalog-product-view .pnp-pdp-hero .product.media,
  .catalog-product-view .pnp-pdp-hero .product-info-main {
    position: static;
    top: auto;
  }
}
/* --- Buy-box header: the theme renders real .buybox__* markup, so only the
   Magento leftovers (compare link, empty sku container) need mapping. --- */
.catalog-product-view .pnp-pdp-hero .buybox__title {
  font-size: 28px;
  margin: 0 0 6px;
}

.catalog-product-view .pnp-pdp-hero .product-info-stock-sku {
  display: none !important;
}

/* --- Price card --- */
.catalog-product-view .pnp-pdp-hero .product-info-price {
  margin: 22px 0 18px !important;
  padding: 18px 20px !important;
  background: linear-gradient(180deg, var(--orange-50), var(--white));
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md);
}

.catalog-product-view .pnp-pdp-hero .product-info-price .price-box {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.catalog-product-view .pnp-pdp-hero .product-info-price .price-container .price {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.catalog-product-view .pnp-pdp-hero .product-info-price .old-price .price {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink-500) !important;
  text-decoration: line-through;
}

.catalog-product-view .pnp-pdp-hero .product-info-price .special-price .price {
  color: var(--ink-900) !important;
}

.catalog-product-view .pnp-pdp-hero .product-info-price .special-price .price::before {
  content: none !important;
}

.catalog-product-view .pnp-pdp-hero .product-info-price .price-label {
  color: var(--ink-500);
  font-size: 12px;
}

/* --- Options as v2 config groups. Magento and MageWorx own this markup;
   app-v2.js promotes each field and adds the selected-value readout. --- */
.catalog-product-view .pnp-pdp-hero .product-add-form {
  padding-top: 0;
}

.catalog-product-view .pnp-pdp-hero #product-options-wrapper .fieldset {
  display: block !important;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.catalog-product-view .pnp-pdp-hero .config__group {
  margin: 0 0 20px !important;
}

.catalog-product-view .pnp-pdp-hero .config__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

/* The label spans the field and sits above the control, so a long option name
   reads on one line instead of being squeezed against the selected value. */
.catalog-product-view .pnp-pdp-hero .config__head > .label {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-product-view .pnp-pdp-hero .config__head > .label > span {
  display: block;
  /* Larger than the design's 12px: at that size, squeezed beside the selected
     value, the option names were hard to read. */
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-700);
}

.catalog-product-view .pnp-pdp-hero .config__value {
  font-size: 13px;
  color: var(--ink-900);
  font-weight: 600;
  text-align: right;
}

/* MageWorx appends its own "- <value>" span beside the label once a swatch is
   picked; .config__value already says that, and covers plain drop-downs too. */
.catalog-product-view .pnp-pdp-hero .config__head > span#value {
  display: none !important;
}

.catalog-product-view .pnp-pdp-hero .product-options-wrapper .control {
  width: 100%;
}

.catalog-product-view .pnp-pdp-hero .swatch-attribute-options {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin: 0 !important;
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-container.is-collapsed {
  display: none !important;
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-option.image,
.catalog-product-view .pnp-pdp-hero .mageworx-swatch-option.text {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1;
  margin: 0 !important;
  padding: 0;
  border-radius: 8px !important;
  border: 2px solid var(--border);
  overflow: hidden;
  /* 200%, not cover: a lot of the supplied swatch art has a drop shadow and
     dead margin around the edge, and the overscan crops it out of the tile. */
  background-size: 200% !important;
  background-position: center !important;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-option.image:hover,
.catalog-product-view .pnp-pdp-hero .mageworx-swatch-option.text:hover {
  transform: scale(1.06);
  border-color: var(--navy-700);
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-option.selected {
  border-color: var(--orange-500) !important;
  box-shadow: 0 0 0 1px var(--orange-500);
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-container:has(.mageworx-swatch-option.selected)::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/10px no-repeat;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.catalog-product-view .pnp-pdp-hero .swatch-attribute-options .swatch--more {
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: 2px solid var(--border);
}

.catalog-product-view .pnp-pdp-hero .mageworx-swatch-info {
  display: none !important;
}

.catalog-product-view .pnp-pdp-hero select.product-custom-option,
.catalog-product-view .pnp-pdp-hero .config__group select {
  width: 100%;
  border: 1px solid var(--border-strong);
  background-color: var(--white);
  color: var(--ink-900);
  padding: 11px 38px 11px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  height: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a4a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.catalog-product-view .pnp-pdp-hero select.product-custom-option:focus {
  outline: none;
  border-color: var(--navy-900);
  box-shadow: 0 0 0 3px var(--navy-50);
}

/* --- Cart actions: stepper + Add to cart + Add to quote --- */
.catalog-product-view .pnp-pdp-hero .box-tocart {
  display: block !important;
  margin: 0 !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--border);
}

.catalog-product-view .pnp-pdp-hero .box-tocart .actions {
  display: grid !important;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  align-items: stretch;
  justify-items: stretch;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .actions .qty {
  grid-column: 1;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .actions .action.tocart {
  grid-column: 2;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .actions .amquote-addto-button {
  grid-column: 1/-1;
}

/* Buttons are form controls: browsers size them to fit-content as grid items
   even when justify-items is stretch, so fill the track explicitly. */
.catalog-product-view .pnp-pdp-hero .box-tocart .actions .action.tocart,
.catalog-product-view .pnp-pdp-hero .box-tocart .actions .amquote-addto-button {
  width: 100% !important;
  justify-self: stretch;
  margin: 0 !important;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .action.tocart {
  background: var(--orange-500) !important;
  border: 1px solid var(--orange-500) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600;
  font-size: 14px;
  height: 48px;
  padding: 0 20px;
  color: #fff !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .action.tocart:hover {
  background: var(--orange-600) !important;
}

.catalog-product-view .pnp-pdp-hero .box-tocart .action.tocart[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.catalog-product-view .pnp-pdp-hero .amquote-addto-button {
  background: #fff !important;
  border: 1px solid var(--navy-900) !important;
  color: var(--navy-900) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600;
  font-size: 14px;
  height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.catalog-product-view .pnp-pdp-hero .amquote-addto-button:hover {
  background: var(--navy-50) !important;
}

/* The qty input keeps Magento's .input-text for validation, so undo the parts
   of that skin the v2 stepper supplies instead. */
.catalog-product-view .pnp-pdp-hero .qty {
  margin: 0;
}

.catalog-product-view .pnp-pdp-hero input.qty__input {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--white);
}

/* The legacy skin puts margin-right on every button inside .box-tocart .actions,
   which ate 10px off each stepper column. */
.catalog-product-view .pnp-pdp-hero .qty__btn {
  line-height: 1;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
}

/* v2 PDP — old pnp.css puts the buy box on a grid, which collapses the stacked
   v2 blocks; keep it a plain block flow. */
.catalog-product-view .pnp-pdp-hero .product-info-main {
  display: block !important;
}

.catalog-product-view .pnp-pdp-hero .product-info-main > * {
  float: none !important;
  position: static !important;
}

.catalog-product-view .pnp-pdp-hero .gallery__stage {
  aspect-ratio: 5/4;
}

.catalog-product-view .pnp-pdp-hero .gallery__stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== v2 category listing — reskin of Magento's 2columns-left =====
   Magento floats .sidebar-main and .column.main; the v2 design is a two-column
   grid with the filter rail first. The sidebar comes after main in the DOM, so
   it is re-ordered rather than moved in layout XML. */
.catalog-category-view .columns,
.catalogsearch-result-index .columns {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
  box-sizing: border-box;
}

/* Magento clears the old float layout with a `content: " "` ::after. In a grid
   container that generated box becomes a grid item and takes column 2, pushing
   the product column onto a second row. */
.catalog-category-view .columns::before,
.catalog-category-view .columns::after,
.catalogsearch-result-index .columns::before,
.catalogsearch-result-index .columns::after {
  content: none;
  display: none;
}

/* The category header wrapper is a flex box with auto side margins, which
   squeezed .plp-head to its content width instead of the container. */
.catalog-category-view .category-view {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.catalog-category-view .columns > .sidebar.sidebar-main,
.catalogsearch-result-index .columns > .sidebar.sidebar-main {
  order: -1;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Follows the page. The offset clears the sticky header (212px) plus a gap;
     a long filter list scrolls inside the rail rather than running off screen. */
  position: sticky;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.catalog-category-view .columns > .sidebar.sidebar-main::-webkit-scrollbar {
  width: 6px;
}

.catalog-category-view .columns > .sidebar.sidebar-main::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.catalog-category-view .columns > .column.main,
.catalogsearch-result-index .columns > .column.main {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
}

/* No filters on this category — let the grid use the full width. */
.catalog-category-view .columns:not(:has(.sidebar-main .filter-options)) {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-category-view .plp-head,
.catalogsearch-result-index .plp-head {
  padding: 32px var(--gutter) 8px;
}

/* Long-form copy + CMS block below the grid.
   Vertical only — .cat-section also carries .container, and zeroing the
   horizontal padding here took its gutter with it. The section kept the
   1440px measure but ran its text right out to that edge, so on a landing
   category the heading and copy sat 24px wider than the header above them
   and touched the sides. */
.catalog-category-view .cat-section {
  padding: 8px var(--gutter) 48px;
}

.catalog-category-view .seo-block--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.catalog-category-view .category-cms,
.catalog-category-view .category-cms .page-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 900px) {
  .catalog-category-view .columns,
  .catalogsearch-result-index .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .catalog-category-view .columns > .sidebar.sidebar-main,
  .catalogsearch-result-index .columns > .sidebar.sidebar-main {
    order: 0;
    position: static;
    max-height: none;
    overflow: visible;
  }
}
/* --- Category header. With an image it becomes a hero: picture behind, copy
   over a scrim. Without one it stays plain dark-on-white. --- */
.plp-head--hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Full-bleed band: the picture runs edge to edge and the copy inside is what
     lines up with the container, so .container's own width cap is dropped. */
  max-width: none;
  width: 100%;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 0 !important;
}

.plp-head--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 31, 55, 0.15) 0%, rgba(10, 31, 55, 0.55) 55%, rgba(10, 31, 55, 0.82) 100%);
}

.plp-head--hero .plp-head__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Matches the gutter the grid and header use, so all three share a left edge. */
  padding: 48px var(--gutter);
  box-sizing: border-box;
}

.plp-head--hero .plp-head__lede {
  max-width: 780px;
}

/* .catalog-category-view .category-view p sets a dark body colour and outranks
   a plain component selector, so scope these to the page too. */
.catalog-category-view .plp-head--hero .eyebrow {
  color: var(--gold-300);
}

.catalog-category-view .plp-head--hero .plp-head__title {
  color: var(--white);
}

.catalog-category-view .plp-head--hero .plp-head__lede,
.catalog-category-view .category-view .plp-head--hero p.plp-head__lede {
  color: rgba(255, 255, 255, 0.9);
}

/* The standalone banner would repeat the same picture above the hero. */
.catalog-category-view .category-image {
  display: none;
}

@media (max-width: 700px) {
  .plp-head--hero {
    min-height: 220px;
  }
  .plp-head--hero .plp-head__copy {
    padding: 28px var(--gutter);
  }
}
/* Magento caps .page-main at 1400px, which would clamp the wider v2 container. */
.page-main {
  max-width: var(--container);
}

/* The legacy skin pads the top of <main> by 75px to clear its old page title.
   The v2 hero runs to the edge of the content, so drop it and let .columns'
   own 24px be the whole gap.

   The full-width landing layout gives <main> page-main-full-width instead of
   page-main, so this reset missed it and the 75px stayed — an empty band under
   the breadcrumbs on every category using that layout. */
.catalog-category-view #maincontent.page-main,
.catalog-category-view #maincontent.page-main-full-width,
.catalogsearch-result-index #maincontent.page-main {
  padding-top: 0;
  /* Its 20px side padding sat inside the 1440 cap, leaving .columns 1400 wide
     and its content 20px in from the header. The inner wrappers carry the
     gutter themselves, so the content lines up with the header at 1440. */
  padding-left: 0;
  padding-right: 0;
}

/* That padding also parked a decorative hairline: .page-main::before is an
   absolutely positioned 1px rule at top:75px, full container width. It used to
   sit exactly on the content's top edge; with the padding gone it floats down
   into the filter rail and draws straight through the subcategory card. */
.catalog-category-view #maincontent.page-main::before,
.catalogsearch-result-index #maincontent.page-main::before {
  content: none;
}

/* Product card imagery. Magento's image helper wraps every <img> in fixed-size
   spans carrying a per-product inline <style> (width:320px, aspect-ratio), so
   the picture sat top-left in the card's square instead of filling it.
   Collapse the wrappers and pin the image to the media box. */
.pcard__media .product-image-container,
.pcard__media .product-image-wrapper {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
}

.pcard__media .product-image-photo {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
}

/* --- Results bar. The legacy skin absolutely positions the toolbar, which
   floated it out of the results column entirely. --- */
.catalog-category-view .toolbar-products,
.catalogsearch-result-index .toolbar-products {
  position: relative !important;
  /* The legacy skin positioned this absolutely with a left offset. Switching it
     to relative for the underline made that offset shift the row 20px right of
     the product grid, so pin all four insets. */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 0 14px !important;
  border-bottom: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
}

/* The underline belongs to the count/sort row only. Drawn on an inner element
   rather than on .toolbar-products itself so it can never be widened by a
   legacy rule that repositions or stretches the toolbar across the filter rail. */
.catalog-category-view .toolbar-products::after,
.catalogsearch-result-index .toolbar-products::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--border);
}

.catalog-category-view .product-grid ~ .toolbar-products::after,
.catalogsearch-result-index .product-grid ~ .toolbar-products::after {
  content: none;
}

/* Grid/list toggle and the "Page" label are not part of the v2 design. */
.catalog-category-view .toolbar-products .modes,
.catalogsearch-result-index .toolbar-products .modes,
.catalog-category-view .pages-label,
.catalog-category-view .pages .label {
  display: none !important;
}

.catalog-category-view .toolbar-amount,
.catalogsearch-result-index .toolbar-amount {
  margin: 0;
  padding: 0;
  position: static;
  font-size: 14px;
  color: var(--ink-600);
}

.catalog-category-view .toolbar-amount .toolbar-number {
  color: var(--ink-900);
  font-weight: 700;
}

.catalog-category-view .toolbar-sorter,
.catalogsearch-result-index .toolbar-sorter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  position: static;
}

.catalog-category-view .sorter-label,
.catalogsearch-result-index .sorter-label {
  font-size: 13px;
  color: var(--ink-600);
  margin: 0;
  font-weight: 500;
  white-space: nowrap;
}

/* The asc/desc arrow is a separate control the v2 sort field doesn't have. */
.catalog-category-view .sorter-action,
.catalogsearch-result-index .sorter-action {
  display: none !important;
}

/* A legacy rule uses two IDs (#maincontent … #sorter) to strip the border, so
   the v2 field has to match that weight to put it back. */
.catalog-category-view #maincontent .toolbar-sorter #sorter,
.catalogsearch-result-index #maincontent .toolbar-sorter #sorter,
.catalog-category-view .sorter-options,
.catalogsearch-result-index .sorter-options {
  border: 1px solid var(--border-strong);
  background-color: var(--white);
  color: var(--ink-900);
  padding: 9px 34px 9px 12px !important;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-strong) !important;
  font-family: inherit;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a4a5c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
}

/* The legacy skin hides both the result count and the pager outright, because
   its toolbar showed neither. The v2 bar needs the count on top and the pager
   at the bottom. */
.catalog-category-view .toolbar-products .toolbar-amount,
.catalogsearch-result-index .toolbar-products .toolbar-amount {
  display: block !important;
}

.catalog-category-view .toolbar-products .pages,
.catalogsearch-result-index .toolbar-products .pages {
  display: none !important;
}

/* The bottom toolbar used to carry the pager. Listings now load with a
   button, so a numbered pager under it is a second control for the same job —
   and a stale one, still reading "you're currently reading page 1" after three
   more batches have been loaded.

   Hidden rather than removed from the markup. Those page links are the crawl
   path to every product past the first twelve, and deleting the block would
   take the path with it. display:none keeps them in the DOM, where a crawler
   still finds them and where the Load More script still reads the next page's
   address off them — it needs them as much as Google does. It also keeps them
   out of the tab order, which a visually-hidden version would not: invisible
   tab stops sitting next to the button that actually does the work.

   The whole toolbar goes, not just the pager: the amount and sorter are
   already hidden here and the limiter with them, so leaving the container
   would leave a bordered strip with nothing in it. */
.catalog-category-view .product-grid ~ .toolbar-products,
.catalogsearch-result-index .product-grid ~ .toolbar-products {
  display: none !important;
}

/* "Starting at" is Magento's label for range prices; the card shows the figure
   alone. Scoped to .pcard so the PDP keeps its label. */
.pcard .price-label {
  display: none !important;
}

.pcard .price-from, .pcard .price-to {
  display: inline;
}

/* The category CMS block ships as a full-bleed Page Builder row; inside the SEO
   text column it needs to behave like ordinary flow content. */
.catalog-category-view .seo-copy [data-content-type=row],
.catalog-category-view .seo-copy [data-content-type=row] > div {
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
  min-height: 0 !important;
}

.catalog-category-view .seo-copy .row-full-width-inner {
  width: auto;
  max-width: none;
  padding: 0;
}

.catalog-category-view .seo-copy > :first-child {
  margin-top: 0;
}

/* The wrapper carried a grey band from when this was a full-width section. */
.catalog-category-view .seo-copy .category-cms {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* --- Filter rail --- */
.catalog-category-view .sidebar-main .block.filter,
.catalogsearch-result-index .sidebar-main .block.filter {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 18px 14px;
  background: var(--white);
  margin: 0;
}

.catalog-category-view .filters-title,
.catalogsearch-result-index .filters-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border);
}

.catalog-category-view .filter-subtitle,
.catalogsearch-result-index .filter-subtitle {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3;
}

/* Magento only prints "Clear all" while filters are active; style it for then. */
.catalog-category-view .filter-current + .filter-actions,
.catalog-category-view .filter-actions a {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
}

.catalog-category-view .filter-actions a:hover {
  color: var(--orange-500);
}

.catalog-category-view .filter-options,
.catalogsearch-result-index .filter-options {
  margin: 0;
}

.catalog-category-view .filter-options-title,
.catalogsearch-result-index .filter-options-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0 12px;
  margin: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-800);
  cursor: pointer;
}

/* Amasty/Luma draw the toggle with a glyph from the luma-icons font, which is
   not loaded here and rendered as tofu. Replace it with a chevron.

   Two explicit glyphs rather than one rotated with a transform: rotating the
   background image produced a malformed mark in the un-rotated state, and a
   state-specific image is simpler to reason about anyway. */
.catalog-category-view .filter-options-title::after,
.catalogsearch-result-index .filter-options-title::after {
  content: "" !important;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  position: static;
  font-size: 0;
  line-height: 0;
  overflow: visible;
  /* Amasty tilts its marker with the standalone `rotate` property on .closed,
     which `transform` does not override — that skewed the box into a diamond. */
  transform: none !important;
  rotate: none !important;
  /* chevron up = group is open */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7a8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}

.catalog-category-view .filter-options-title.is-collapsed::after,
.catalogsearch-result-index .filter-options-title.is-collapsed::after {
  /* chevron down = group is collapsed, click to open */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7a8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Amasty also stamps its own `closed` class on click and re-asserts display,
   so this needs to be the last word. */
.catalog-category-view .filter-options-title.is-collapsed + .filter-options-content,
.catalogsearch-result-index .filter-options-title.is-collapsed + .filter-options-content {
  display: none !important;
}

.catalog-category-view .filter-options-content,
.catalogsearch-result-index .filter-options-content {
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}

/* The rule between groups is a separator, so the last group does not get one —
   a trailing border reads as the start of a group that is not there. The
   padding goes with it, or the rail ends on 14px of nothing.

   :last-of-type rather than :last-child because these are dt/dd pairs inside
   one dl: the last dd is never the last child, the closing dt/dd sequence
   means it is the last of its type. */
.catalog-category-view .filter-options-content:last-of-type,
.catalogsearch-result-index .filter-options-content:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.catalog-category-view .filter-options-content .items,
.catalogsearch-result-index .filter-options-content .items {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-category-view .filter-options-content .item,
.catalogsearch-result-index .filter-options-content .item {
  margin: 0;
}

.catalog-category-view .filter-options-content .item > a,
.catalogsearch-result-index .filter-options-content .item > a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
}

.catalog-category-view .filter-options-content .item > a:hover {
  color: var(--ink-900);
}

.catalog-category-view .filter-options-content .item input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--navy-900);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.catalog-category-view .filter-options-content .item .count,
.catalogsearch-result-index .filter-options-content .item .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-400);
}

.catalog-category-view .filter-options-content .item .count::before,
.catalog-category-view .filter-options-content .item .count::after {
  content: none;
}

/* Subcategory links sit above the filters in the same rail. */
.catalog-category-view .sidebar-main .block-cats {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 6px 18px 14px;
  background: var(--white);
  margin: 0 0 16px;
}

.catalog-category-view .sidebar-main .block-cats ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  gap: 9px;
}

.catalog-category-view .sidebar-main .block-cats li {
  margin: 0;
}

.catalog-category-view .sidebar-main .block-cats a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
}

.catalog-category-view .sidebar-main .block-cats a:hover {
  color: var(--orange-500);
}

/* --- Pagination --- */
.catalog-category-view .pages,
.catalogsearch-result-index .pages {
  margin: 0;
}

.catalog-category-view .pages .items,
.catalogsearch-result-index .pages .items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-category-view .pages .item,
.catalogsearch-result-index .pages .item {
  margin: 0;
}

.catalog-category-view .pages .page,
.catalog-category-view .pages .action,
.catalogsearch-result-index .pages .page,
.catalogsearch-result-index .pages .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  background: var(--white);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  text-decoration: none;
}

.catalog-category-view .pages .page:hover,
.catalog-category-view .pages .action:hover {
  border-color: var(--navy-700);
  color: var(--navy-900);
}

.catalog-category-view .pages .item.current .page,
.catalogsearch-result-index .pages .item.current .page {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
  cursor: default;
}

/* ===== v2 search field — reskin of the Amasty_Xsearch form =====
   Structure is .amsearch-form-block > .amsearch-input-wrapper > input + two
   buttons (-close to clear, -loupe to submit) + .amsearch-result-section.
   Amasty's own CSS is specific, so the overrides here are explicit. */
.header .search .amsearch-wrapper-block,
.header .search .amsearch-form-block {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.header .search .amsearch-input-wrapper {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.header .search input.amsearch-input {
  width: 100% !important;
  height: 42px !important;
  box-sizing: border-box;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-pill) !important;
  padding: 0 84px 0 18px !important;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-800);
  background: var(--ink-50) !important;
  box-shadow: none;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
}

.header .search input.amsearch-input::placeholder {
  color: var(--ink-500);
}

.header .search input.amsearch-input:focus {
  outline: none;
  border-color: var(--navy-700) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 4px var(--navy-50);
}

/* Loupe is Amasty's submit control — make it the v2 circular button. */
.header .search .amsearch-button.-loupe {
  position: absolute !important;
  right: 4px;
  top: 4px;
  left: auto;
  width: 34px !important;
  height: 34px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--navy-900) !important;
  display: grid !important;
  place-items: center;
  opacity: 1 !important;
  cursor: pointer;
}

.header .search .amsearch-button.-loupe:hover {
  background: var(--navy-800) !important;
}

.header .search .amsearch-button.-loupe::before,
.header .search .amsearch-button.-loupe::after {
  content: none !important;
}

.header .search .amsearch-button.-loupe {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

/* Clear button sits just inside the loupe. */
.header .search .amsearch-button.-close {
  position: absolute !important;
  right: 46px;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  opacity: 0.6;
}

.header .search .amsearch-button.-close:hover {
  opacity: 1;
}

/* Autocomplete panel spans the full container rather than the input.
   The panel is a sibling of .amsearch-input-wrapper inside .amsearch-form-block,
   so every wrapper between it and .header__inner is made static and the header
   row becomes the containing block. .amsearch-input-wrapper stays relative — it
   positions the loupe and clear buttons. */
.header .header__inner {
  position: relative;
}

.header .search,
.header .search .amsearch-wrapper-block,
.header .search .amsearch-form-block {
  position: static;
}

.header .search .amsearch-result-section {
  position: absolute !important;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  z-index: 120;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  /* Never run the full page: cap at 80vh less the header and scroll inside. */
  max-height: calc(80vh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.header .search .amsearch-result-section::-webkit-scrollbar {
  width: 8px;
}

.header .search .amsearch-result-section::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 4px;
}

/* Nothing between the field and the panel may clip it. */
.header .header__inner,
.header .search,
.header .search .amsearch-wrapper-block,
.header .search .amsearch-form-block {
  overflow: visible;
}

/* ===== v2 header chrome — reskin of Magento's account / quote / cart =====
   Sign In inherits the utility bar's light colour rather than the legacy green,
   and loses the divider rule the old header used to separate it. */
.utility-bar .customer-account-menu {
  border-left: 0;
  padding-left: 0;
}

.utility-bar .customer-account-menu__link,
.utility-bar .customer-account-menu__link.not-logged-in,
.utility-bar .customer-account-menu__link.logged-in {
  color: var(--ink-200);
}

.utility-bar .customer-account-menu__link:hover {
  color: var(--white);
}

/* Quote and cart as v2 .header-action buttons. Magento supplies no icon, so
   each gets one as a background on a ::before box. */
.header .header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header .header__actions .amquote-cart-wrapper,
.header .header__actions .minicart-wrapper {
  margin: 0;
  position: relative;
}

.header .header__actions .amquote-showcart,
.header .header__actions .action.showcart {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  background: transparent !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-800) !important;
  padding: 8px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
}

.header .header__actions .amquote-showcart:hover,
.header .header__actions .action.showcart:hover {
  background: var(--ink-50);
  color: var(--navy-900);
}

/* The legacy skin drew its own icons with the luma-icons font and sized the
   cart as a 36px green square; both need overriding outright. */
.header .header__actions .amquote-showcart::after,
.header .header__actions .action.showcart::after {
  content: none !important;
}

.header .header__actions .amquote-showcart::before,
.header .header__actions .action.showcart::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px;
  margin: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
}

.header .header__actions .amquote-showcart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a2632' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") !important;
}

.header .header__actions .action.showcart::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a2632' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") !important;
}

.header .header__actions .amquote-showcart .text,
.header .header__actions .action.showcart .text {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* Counter becomes the v2 pill badge, hidden while empty. */
.header .header__actions .counter.qty {
  display: inline-grid;
  border: 0;
  place-items: center;
  position: static;
  margin: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--orange-500);
  color: var(--white);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Legacy styles the empty counter as a bordered box and forces it visible. */
.header .header__actions .counter.qty.empty {
  display: none !important;
}

.header .header__actions .counter-label {
  display: none !important;
}

/* ===== v2 footer: full-bleed dark band, content constrained by .container =====
   Magento nests the footer as .page-footer > .footer.content > footer.footer.
   The legacy skin put its background and padding on the middle wrapper, which
   is width-capped, so the dark band stopped short of the viewport edges. Move
   the band to .page-footer and let the inner wrappers be pure layout. */
.page-footer {
  background: #0a1f37;
  color: var(--ink-300);
  padding: 0;
  margin-top: 0;
  border-top: 0;
}

.page-footer .footer.content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 0;
}

.page-footer footer.footer {
  background: transparent;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.page-footer .footer__inner,
.page-footer .footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* The newsletter now sits in the brand column rather than floating above. */
.page-footer .footer-newsletter {
  margin-top: 22px;
}

.page-footer .footer-newsletter .form.subscribe {
  margin: 0;
}

.page-footer .footer-newsletter__field input {
  min-width: 0;
}

.page-footer .block.newsletter {
  width: auto;
  float: none;
  margin: 0;
}

/* .action.primary is a two-class selector and outranked the component rule. */
.page-footer .footer-newsletter__field button.action.subscribe {
  background: var(--orange-500);
  color: var(--white);
  border: 0;
  border-radius: 0;
  height: auto;
  box-shadow: none;
}

.page-footer .footer-newsletter__field button.action.subscribe:hover {
  background: var(--orange-600);
}

@media (max-width: 900px) {
  .page-footer .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-footer .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-footer .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
/* ===== v2 breadcrumbs: full-width bar, crumbs in a centered container ===== */
.catalog-product-view .breadcrumbs,
.cms-index-index .breadcrumbs,
.breadcrumbs {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: 14px 0 !important;
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
}

.breadcrumbs .items {
  max-width: var(--container);
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2px;
  font-size: 13px;
}

.breadcrumbs .item.product {
  color: var(--ink-900);
  font-weight: 600;
}

/* v2 PDP tabs: full-width band, inner content constrained to container width */
.catalog-product-view .pdp-tabs {
  background: var(--white);
  padding: 8px 0 0;
}

.catalog-product-view .pdp-tabs__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 8px var(--gutter) 48px;
}

/* The tab panels carry their own padding; the old band padding double-spaced them. */
.catalog-product-view .pdp-tabs .tab-panel {
  padding: 32px;
}

/* Let the tab strip scroll sideways on narrow screens, but pin overflow-y:
   setting only overflow-x makes overflow-y compute to auto, which reserved a
   vertical scrollbar for the strip's 1px overflow. */
.catalog-product-view .pdp-tabs .tabs__nav {
  overflow-x: auto;
  overflow-y: hidden;
}

/* v2 PDP lower sections. The templates emit real v2 markup, so these only
   neutralise the old full-width Page Builder / Foundation wrappers. */
.catalog-product-view .collection-cta,
.catalog-product-view .why {
  background: var(--white);
}

.catalog-product-view .collection-cta__inner--no-image {
  grid-template-columns: 1fr;
}

.catalog-product-view .help-band {
  margin-top: 0;
}

.catalog-product-view .help-band .btn {
  text-decoration: none;
}

.catalog-product-view .collection-cta__btn {
  text-decoration: none;
}

@media (max-width: 900px) {
  .catalog-product-view .collection-cta__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }
  .catalog-product-view .why__grid {
    grid-template-columns: 1fr;
  }
  .catalog-product-view .help-band__inner {
    grid-template-columns: 1fr;
  }
  .catalog-product-view .pnp-pdp-hero .swatch-attribute-options {
    grid-template-columns: repeat(8, 1fr);
  }
  .catalog-product-view .pdp-tabs .tab-panel {
    padding: 20px;
  }
  .catalog-product-view .specs-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* v2 PDP: Cylindo viewer. It needs a non-zero box at init; the aspect ratio
   itself is left to Vonnda_Cylindo's own CSS so the admin setting still wins.
   The module's inner sticky is dropped — .product.media already sticks. */
.catalog-product-view .pnp-pdp-hero .product.media {
  display: block;
}

.catalog-product-view .pnp-pdp-hero .product.media .cylindo-viewer {
  display: block;
  width: 100%;
  position: static;
  top: auto;
}

.catalog-product-view .pnp-pdp-hero .product.media cylindo-viewer {
  display: block;
  width: 100%;
}

/* ============================================================
   PDP — Magento's own configurable options

   MageWorx custom options go through app-v2.js and end up as .config__group.
   A configurable product's own attributes do not: Magento renders them inside
   .swatch-opt, which had never been styled here, so its labels stayed 16px
   sentence case beside 14px uppercase ones.

   Worse, the grid rule for MageWorx swatch tiles also matched Magento's
   .swatch-attribute-options, turning its <select> fallback into a single 34px
   grid cell — the tiny dropdowns on Length and Mount.

   Everything here is scoped to .swatch-opt. MageWorx's own markup reuses the
   same .swatch-attribute class names but sits outside that container, so an
   unscoped rule reaches both — which is how an earlier attempt un-gridded the
   colour swatches.
   ============================================================ */
.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-attribute {
  margin: 0 0 20px;
}

.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-attribute-label {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-700);
}

.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-attribute-label::after {
  content: none;
}

/* The chosen value is already visible on the control. */
.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-attribute-selected-option {
  display: none;
}

/* A select fallback is not a swatch tile, so it opts out of the grid. */
.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-attribute-options {
  display: block !important;
}

.catalog-product-view .pnp-pdp-hero .swatch-opt select.swatch-select {
  width: 100%;
  border: 1px solid var(--border-strong);
  background-color: var(--white);
  color: var(--ink-900);
  padding: 11px 38px 11px 12px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  height: auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233a4a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* Image swatches on a configurable attribute, e.g. Style. */
.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-option {
  border-radius: 8px;
  border: 2px solid var(--border);
}

.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-option.selected {
  border-color: var(--navy-700);
}

/* Magento's hidden value carrier; it was taking 50px of layout. */
.catalog-product-view .pnp-pdp-hero .swatch-opt .swatch-input {
  position: absolute;
  left: -1000px;
  visibility: hidden;
  height: 0;
}

/* ===== Blog: two things the design's own stylesheet never had to say =====
   The design pages are standalone, so a card that is an <a> inherits nothing.
   Inside Magento, the base stylesheet underlines links on hover, which drags
   an underline across the whole card — title, date and excerpt together. */
.post-card,
.post-card:hover,
.post-card:focus,
.feature-post,
.feature-post:hover,
.feature-post:focus {
  text-decoration: none;
}

/* The category row on the blog index is ours, not the design's — the design
   lists categories only in the post sidebar. It reuses the card's own pill
   rather than a look of its own, so this is layout and nothing else. */
.blog-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
}

.blog-cats .post-tag {
  border: 1px solid var(--border);
  background: var(--white);
  text-decoration: none;
  transition: border-color 150ms, color 150ms, background 150ms;
}

.blog-cats .post-tag:hover {
  border-color: var(--navy-900);
  color: var(--navy-900);
  background: var(--navy-50);
}

/* ==========================================================================
   v2 redesign — homepage sections.

   Ported from the design's home.css, with three deliberate departures:

   - .cat-grid is left alone. The category page already owns that name with a
     different layout, so the homepage tiles are .cat-tiles.
   - .why and .why-card are not ported. The theme already carries the v2
     version of that section, which is the one product-whypnp.phtml renders.
   - .btn, .eyebrow, .lede and .section-title are not redefined; the v2
     stylesheet already owns them and the design's versions would fight.
   ========================================================================== */
/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 600px;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Layered with positive z-indexes rather than the design's negative ones.
   The photo would intermittently not paint at all, despite being loaded and
   fully opaque — most likely the backdrop-filter on .hero__eyebrow, which
   forces a compositing layer whose backdrop does not reliably include
   negative-z-index siblings. Media 0, gradient 1, copy 2 sidesteps it.
   The category and market tiles keep the design's negative z-indexes: they
   have no backdrop-filter and have never shown the problem. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Every slide is stacked in the same box and cross-faded by opacity, so the
   copy above never reflows as the background changes. */
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__media img.is-active {
  opacity: 1;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg, rgba(15, 44, 74, 0.92) 0%, rgba(15, 44, 74, 0.78) 38%, rgba(24, 70, 190, 0.45) 70%, rgba(15, 44, 74, 0.12) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 88px 24px 96px;
  color: var(--white);
  text-align: left;
}

/* This is an h1 — it carries the page heading even though the display line
   below it is larger — so the heading defaults have to be overridden here. */
.hero__eyebrow {
  display: inline-block;
  font-family: inherit;
  line-height: 1.4;
  margin: 0 0 18px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seafoam-100);
}

/* A <p>, not a heading: the h1 is the line above it. */
.hero__title {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(36px, 5.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0 0 20px;
  max-width: 660px;
}

.hero__lede {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 32px;
  max-width: 600px;
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero__trust {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  display: flex;
  gap: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  flex-wrap: wrap;
  max-width: 720px;
}

.hero__trust li {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}

.hero__trust strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.hero__stat--blue {
  color: var(--blue-soft);
}

.hero__stat--green {
  color: var(--seafoam-300);
}

.hero__stat--gold {
  color: var(--gold-300);
}

/* ============================================================
   Section heads (homepage)
   ============================================================ */
.section-head {
  margin-bottom: 32px;
  max-width: 720px;
}

.section-head .eyebrow {
  color: var(--orange-500);
  margin-bottom: 8px;
}

.section-head .section-title {
  margin-bottom: 10px;
}

.section-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

.section-head--center {
  text-align: center;
  margin: 0 auto 40px;
}

.section-head--center .section-lede {
  max-width: 600px;
  margin: 0 auto;
}

.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  margin-bottom: 28px;
}

.row-view-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-500);
  white-space: nowrap;
}

.row-view-all:hover {
  color: var(--orange-600);
}

/* ============================================================
   Shop by category
   ============================================================ */
.categories {
  padding: 72px 24px 24px;
}

/* Named .cat-tiles, not .cat-grid: the category page already owns that class
   with a different layout. */
.cat-tiles {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 14px;
}

.cat-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink-100);
  text-decoration: none;
  color: var(--white);
  isolation: isolate;
}

.cat-tile--lg {
  grid-row: span 2;
}

.cat-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.cat-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 44, 74, 0) 0%, rgba(15, 44, 74, 0.05) 40%, rgba(15, 44, 74, 0.85) 100%);
}

.cat-tile:hover .cat-tile__media img {
  transform: scale(1.05);
}

.cat-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 22px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.cat-tile__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

.cat-tile--lg .cat-tile__title {
  font-size: 28px;
}

.cat-tile__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--seafoam-100);
  white-space: nowrap;
  opacity: 0.92;
  transition: color 160ms;
}

.cat-tile:hover .cat-tile__cta {
  color: var(--white);
}

/* ============================================================
   Product rows
   ============================================================ */
.prod-row {
  padding: 56px 24px;
}

.prod-row--alt {
  background: var(--seafoam-50);
  margin: 0 0 24px;
  max-width: none;
  padding: 64px 0;
}

/* Descendant, not child: the grid comes out of a CMS block and is wrapped in
   that block's own div, so `>` never matched and the row ran full-bleed. */
.prod-row--alt .section-head--row,
.prod-row--alt .prod-row__grid {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.prod-row__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* ============================================================
   Markets we serve
   ============================================================ */
.markets {
  background: linear-gradient(180deg, var(--white) 0%, var(--seafoam-50) 100%);
  padding: 72px 0;
  border-bottom: 1px solid var(--border);
}

.markets__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.market-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--ink-100);
  text-decoration: none;
  isolation: isolate;
  aspect-ratio: 4/3;
  border: 1px solid var(--border);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.market-tile:hover {
  transform: translateY(-4px);
  border-color: var(--blue-deep);
  box-shadow: 0 14px 32px rgba(15, 44, 74, 0.18);
}

.market-tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.market-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.market-tile:hover .market-tile__media img {
  transform: scale(1.06);
}

.market-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 44, 74, 0) 0%, rgba(15, 44, 74, 0.15) 35%, rgba(15, 44, 74, 0.92) 100%);
}

.market-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 24px;
  color: var(--white);
  display: block;
}

.market-tile__title {
  display: block;
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

.market-tile__copy {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  max-width: 380px;
}

.market-tile__cta {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--seafoam-100);
}

@media (max-width: 1024px) {
  .cat-tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 220px 220px;
  }
  .cat-tile--lg {
    grid-row: span 1;
    grid-column: span 2;
  }
  .prod-row__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .markets__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .hero {
    min-height: 520px;
  }
  .hero__content {
    padding: 64px 20px;
  }
  .hero__title {
    font-size: clamp(32px, 8vw, 44px);
  }
  .hero__lede {
    font-size: 16px;
  }
  .hero__trust {
    gap: 22px;
    padding-top: 18px;
  }
  .hero__trust strong {
    font-size: 18px;
  }
  .cat-tiles {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 200px;
  }
  .cat-tile--lg {
    grid-column: span 1;
  }
  .prod-row__grid {
    grid-template-columns: 1fr;
  }
  .markets__grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Why ParknPool

   Replaces the three-card grid in _pnp-v2.scss with the design's layout:
   photo and caption on the left, numbered reasons on the right. This partial
   is imported after that one, so these win.
   ============================================================ */
.why {
  padding: 80px 0;
  text-align: left;
  background: linear-gradient(180deg, var(--white) 0%, var(--seafoam-50) 100%);
}

.why__inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: stretch;
  padding: 0 24px;
}

.why__media {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 480px;
  isolation: isolate;
  background: var(--ink-100);
  box-shadow: 0 24px 50px -16px rgba(15, 44, 74, 0.28);
}

.why__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.why__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 44, 74, 0.05) 0%, rgba(15, 44, 74, 0.55) 60%, rgba(15, 44, 74, 0.92) 100%);
}

.why__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 32px 32px 36px;
  color: var(--white);
  margin: 0;
}

.why__caption .eyebrow {
  color: var(--seafoam-100);
  margin: 0 0 10px;
}

.why__title {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.15;
  color: var(--white);
  margin: 0;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
}

.why__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.why-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid var(--seafoam-300);
  align-items: baseline;
}

.why-step:first-child {
  border-top: none;
  padding-top: 0;
}

.why-step__num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  opacity: 0.85;
}

.why-step:nth-child(2) .why-step__num,
.why-step:nth-child(2) .why-step__proof {
  color: var(--green-deep);
}

.why-step:nth-child(2) .why-step__proof::before {
  background: var(--green-deep);
}

.why-step:nth-child(3) .why-step__num,
.why-step:nth-child(3) .why-step__proof {
  color: var(--gold-500);
}

.why-step:nth-child(3) .why-step__proof::before {
  background: var(--gold-500);
}

.why-step__body h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.why-step__body p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 560px;
}

.why-step__proof {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue-deep);
}

.why-step__proof::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--blue-deep);
  margin-right: 10px;
}

.why-cta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin: 8px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--seafoam-300);
  flex-wrap: wrap;
}

.why-cta__link {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--orange-500);
  letter-spacing: -0.01em;
}

.why-cta__link:hover {
  color: var(--orange-600);
}

.why-cta span {
  font-size: 13px;
  color: var(--ink-500);
}

@media (max-width: 1080px) {
  .why__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .why__media {
    min-height: 360px;
  }
}
/* ============================================================
   FAQ

   The questions are Amasty FAQ's, because that is where they are already
   managed. Rather than rebuild the accordion, its markup is restyled to the
   design: .am-item is the card, .am-title the question row, .am-content the
   answer.

   Open state is read from .am-plus on the header. That is the only honest
   signal Magento's collapsible gives: it never removes .amfaq-hidden — the
   class the template ships stays on the element for the life of the page —
   and it never sets a state class on the item, because openedState defaults
   to null and Amasty does not pass one. It toggles inline display and swaps
   the header icon class, and the icon is all that is left to read.
   (.am-minus is the closed one and .am-plus the open one, which is Amasty's
   naming, not a mistake here.)
   ============================================================ */
/* section.faq, not .faq: Magento gives the last breadcrumb item a class named
   after the page — <li class="item faq"> on the FAQ page — which a bare .faq
   matched, dropping 72px of padding and a white ground into the breadcrumb
   bar. cms-faq.phtml renders a <section>, so the element name is enough to
   tell the two apart. */
/* Amasty's own runtime drives this: it swaps .am-minus for .am-plus on the
   title, which the :has() rule above reads. An earlier attempt to drive it
   from app-v2.js was built on a mis-measurement — the script had simply not
   finished initialising when it was checked — and left the page with two
   chevrons. */
section.faq {
  padding: 72px 0;
  background: var(--white);
}

.faq__inner {
  max-width: 880px;
  padding: 0 24px;
}

.faq .amfaq_questions {
  display: grid;
  gap: 10px;
}

/* Amasty prints its own heading above the list; ours is in the section head. */
.faq .amfaq-title {
  display: none;
}

/* Qualified with .amfaq_questions to outrank Amasty's own grey fill. */
.faq .amfaq_questions.widget .am-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  margin: 0;
  padding: 0;
  transition: border-color 160ms;
}

.faq .amfaq_questions.widget .am-item:has(.am-title .am-plus) {
  border-color: var(--blue-deep);
}

/* Amasty prints the toggle before the question text, so the row is reversed
   to put the question on the left and the chevron on the right, as designed. */
/* Qualified to (0,5,0) deliberately: pages/_landing.scss styles Amasty's FAQ
   globally at .amfaq_questions.widget .am-item .am-title, which is (0,4,0) and
   was setting 21px/400 over these. */
.faq .amfaq_questions.widget .am-item .am-title {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px 22px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}

.faq .amfaq_questions.widget .am-item .am-title:hover {
  background: var(--seafoam-50);
}

/* Amasty's toggle is an empty span; drawn as the design's chevron. */
.faq .am-minus,
.faq .am-plus {
  flex: none;
  width: 18px;
  height: 18px;
  position: relative;
  background: none;
  transition: transform 200ms, color 200ms;
  color: var(--ink-500);
}

.faq .am-minus::before,
.faq .am-plus::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.faq .am-item:has(.am-title .am-plus) .am-minus,
.faq .am-item:has(.am-title .am-plus) .am-plus {
  transform: rotate(180deg);
  color: var(--blue-deep);
}

/* The answer opens and closes in CSS, matching the design's
   grid-template-rows 0fr -> 1fr. It used to be jQuery: the collapsible was
   initialised with animate:500, which animates the element's height frame by
   frame from script, forcing a layout on every one of them — the jerk. The
   widget is now told not to animate and this does it instead.

   display is !important because the widget still sets it inline on every
   toggle, and a stylesheet only outranks an inline style that way. Nothing
   else here needs it.

   The padding is transitioned alongside the rows. It has to be: padding sits
   outside the animated track, so a fixed padding-top would hold the answer's
   spacing open on a closed item and leave a gap under every question. */
.faq .amfaq_questions.widget .am-item .am-content {
  display: grid !important;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease, padding 240ms ease;
  margin-top: 0;
  padding: 0 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}

/* A grid row of 0fr only collapses if its content can be crushed, and only if
   there is one thing in it — the template wraps the answer and its footer in a
   single .am-content__inner for exactly that reason. */
.faq .amfaq_questions.widget .am-item .am-content > * {
  min-height: 0;
  overflow: hidden;
}

/* The gap under the question is the point of the padding-top: the hover tint
   fills the question row to its edge, and with the answer starting flush
   against that edge the highlight ran straight into the text. */
.faq .amfaq_questions.widget .am-item:has(.am-title .am-plus) .am-content {
  grid-template-rows: 1fr;
  padding: 14px 22px 20px;
}

@media (prefers-reduced-motion: reduce) {
  .faq .amfaq_questions.widget .am-item .am-content {
    transition: none;
  }
}
.faq .am-content p {
  margin: 0 0 10px;
}

.faq .am-content p:last-child {
  margin-bottom: 0;
}

/* Amasty's own footer links are not part of this design. */
.faq .amfaq-question-footer-wrapper {
  display: none;
}

/* The faq block is a Page Builder row carrying its own 100px of vertical
   padding, and Amasty adds another 100/80 of its own. Between them they left
   a 250px hole under the heading; the section owns its spacing.

   !important is needed for the row only: Page Builder writes per-row rules as
   `#html-body [data-pb-style=...]`, and an id selector cannot be outranked by
   class selectors. Scoped to .faq__inner so it reaches nothing else. */
.faq__inner > div,
.faq__inner [data-content-type=row],
.faq__inner [data-content-type=row] > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.faq .amfaq_questions {
  padding: 0;
  margin: 0;
}

/* Both of these layouts build their page entirely from theme blocks, leaving
   Magento's .column.main empty — but it still reserves its 300px minimum,
   which shows up as a large hole mid-page. Messages render in their own
   container above this, so hiding it costs nothing. */
.page-layout-home .columns,
.page-layout-category-landing-v2 .columns {
  display: none;
}

/* ============================================================
   FAQ page

   The homepage FAQ restyles Amasty's markup; this is the standalone page,
   which is ours, so it uses the design's own accordion — .faq-item and its
   parts, straight out of home.css. The two look identical and share nothing,
   which is the point: the page does not depend on Amasty being installed.

   Everything below is the design's, with one addition — .faq-item__a-inner.
   The design animates the answer's <p> directly, which only works while the
   answer is exactly one paragraph; these are authored rich text and can be a
   list or three paragraphs, so the crushable child is a wrapper.
   ============================================================ */
.faq--page {
  padding: 56px 0 88px;
}

.faq--page .faq__inner {
  max-width: 880px;
  padding: 0 24px;
}

.faq__group-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 40px 0 14px;
}

.faq__group-title:first-child {
  margin-top: 0;
}

.faq--page .faq__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq--page .faq-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--white);
  transition: border-color 160ms;
}

.faq--page .faq-item.is-open {
  border-color: var(--blue-deep);
}

.faq--page .faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 18px 22px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}

.faq--page .faq-item__q:hover {
  background: var(--seafoam-50);
}

.faq--page .faq-item__chev {
  transition: transform 200ms, color 200ms;
  color: var(--ink-500);
  flex: none;
  display: inline-flex;
}

.faq--page .faq-item.is-open .faq-item__chev {
  transform: rotate(180deg);
  color: var(--blue-deep);
}

/* The same collapse the homepage uses: a grid track from 0fr to 1fr, with the
   padding travelling alongside it because padding sits outside the track and a
   fixed value would hold the gap open on a closed question. */
.faq--page .faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 22px;
  transition: grid-template-rows 240ms ease, padding 240ms ease;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
}

.faq--page .faq-item__a-inner {
  min-height: 0;
  overflow: hidden;
}

.faq--page .faq-item.is-open .faq-item__a {
  grid-template-rows: 1fr;
  padding: 14px 22px 20px;
}

.faq--page .faq-item__a p {
  margin: 0 0 10px;
}

.faq--page .faq-item__a p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .faq--page .faq-item__a {
    transition: none;
  }
}
/* ============================================================
   Market landing pages

   Mostly borrowed: the hero is .cat-hero, the sections are .cat-section, the
   accordion is the FAQ page's, and the product row is the homepage's. Only the
   four things below are actually new, because only four of the blueprint's
   twelve sections had no existing equivalent.
   ============================================================ */
/* 03 — Spaces. Two columns rather than the usual three: each card carries a
   paragraph of guidance and a list of links, so three across leaves the text
   too narrow to read as prose. */
.market-spaces__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.market-space {
  border-top: 2px solid var(--ink-900);
  padding-top: 16px;
}

.market-space__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 0 0 8px;
}

.market-space__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 0 12px;
}

.market-space__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
}

.market-space__links a {
  color: var(--blue-deep);
}

.market-space__links a:hover {
  text-decoration: underline;
}

/* 05 — Materials. Wide by nature, so it scrolls inside its own box rather
   than pushing the page sideways. */
.market-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
}

.market-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 780px;
  font-size: 14px;
}

.market-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.market-table tbody th {
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-900);
  white-space: normal;
  border-bottom: 1px solid var(--border);
}

.market-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-700);
  vertical-align: top;
  line-height: 1.45;
}

.market-table tbody tr:last-child th,
.market-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 09 — How to buy. Transactional detail, so it is set as a definition list
   rather than prose: people scan it for one answer. */
.market-buy__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  margin: 0;
}

.market-buy__item dt {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.market-buy__item dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}

/* 08 / 12 — Proof photos and the sibling-market strip. */
.market-proof__images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.market-proof__images img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

.market-related__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.market-related__list a {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
}

.market-related__list a:hover {
  border-color: var(--blue-deep);
  color: var(--blue-deep);
}

.market-quote__form {
  max-width: 760px;
}

@media (max-width: 860px) {
  .market-spaces__grid,
  .market-buy__list {
    grid-template-columns: 1fr;
  }
  .market-proof__images {
    grid-template-columns: repeat(2, 1fr);
  }
}