@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 {
  /* Placement is the flex row's job now -- see the quote cart block
     in _checkout.scss. This rule carries only the price's own type.

     It used to pin the cell with `padding-left: 185px` and
     `top: -20px`, faking a column beside the photo, and did it from
     a two-id selector that nothing else on the page could answer.
     That is what kept the price boxed off on its own line with the
     delete control stranded beside it. */
  padding: 0;
  margin: 0;
  position: static;
  top: auto;
  text-align: left;
}
#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 {
  /* The two column form used to be built by hand here: a 48% width and a
     float on every field, a 4% gutter on every second one, each addressed
     by its data name. The fieldset is a grid now (see _checkout.scss), so
     the track does that job -- and these widths only fought it. 48% of a
     430px track is 206px, which is exactly the stub that City, Zip and
     the name fields were rendering at while Street filled its row.

     Removed rather than adjusted: a rule that names eight fields
     individually has to be edited again every time a field is added, and
     the address fields only reappeared this week. */
  /* PO number, ship-on date and payment terms stay hidden. They are
     staff fields, filled in against the quote in the admin rather than
     asked of the visitor. */
}
#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;
}
.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;
}
@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;
}

.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 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;
  /* Luma floats the fieldset legend left. Each statement is a flex
     row, and a flex row beside a float shrinks to the space left
     over -- none -- so the first statement rendered as a sliver
     outside the right edge of the form. */
  clear: both;
}
.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 .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;
  /* Luma floats the fieldset's children, and the third one -- the
     comments box -- came out of that with no width at all: a label
     squeezed into a column an inch wide and a textarea about as wide as
     a thumbnail. A grid instead, with the comments spanning both tracks,
     which is what a comments box wants anyway. */
  /* The email block above is Magento's checkout login form, and it
     carries its own border-bottom as the rule between the two. It also
     brings two stacked 20px margins -- one on its .fieldset, one on the
     .field inside it -- so 41px of air collected above that rule while
     the First Name and Last Name labels sat straight on it. One margin
     is enough above; the space below the rule belongs here. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .form-login .fieldset {
  margin-bottom: 0;
}
.amasty_quote-cart-index .quote-cart-container .quote-details .fieldset.amquote-summary-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  margin: 20px 0 0;
}
.amasty_quote-cart-index .quote-cart-container .quote-details .fieldset.amquote-summary-details > .field {
  display: block;
  float: none;
  width: auto;
  margin: 0;
}
.amasty_quote-cart-index .quote-cart-container .quote-details .fieldset.amquote-summary-details > .field.textarea {
  grid-column: 1/-1;
}
.amasty_quote-cart-index .quote-cart-container {
  /* Fill the column.
     A grid item sizes to its content unless told otherwise, and a bare
     <input> reports an intrinsic width of about 206px -- so City, Zip and
     the rest sat at two thirds of their track while Street, whose input
     Luma already stretches, filled it. Uneven by accident rather than by
     design. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .field .control {
  width: 100%;
}
.amasty_quote-cart-index .quote-cart-container .quote-details {
  /* The email field's help marker sat on the input's right border and
     a third of the way up it: Luma pins it to right: 0, top: 1px, and
     sizes it by a 32.5px line-height inside a 50px field, so it was
     neither inset nor centred. Centre it on the field's own middle,
     inset it, and let the input's padding keep a long address from
     running underneath. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .control._with-tooltip .field-tooltip {
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}
.amasty_quote-cart-index .quote-cart-container .quote-details .control._with-tooltip .field-tooltip-action {
  display: block;
  line-height: 1;
}
.amasty_quote-cart-index .quote-cart-container .quote-details .control._with-tooltip input.input-text {
  padding-right: 44px;
}
.amasty_quote-cart-index .quote-cart-container .quote-details input.input-text,
.amasty_quote-cart-index .quote-cart-container .quote-details select,
.amasty_quote-cart-index .quote-cart-container .quote-details textarea {
  width: 100%;
}
.amasty_quote-cart-index .quote-cart-container .quote-details textarea {
  resize: vertical;
}
.amasty_quote-cart-index .quote-cart-container .quote-details {
  /* Labels shrink-to-fit as inline-block, so "Street" plus its
     required asterisk wrapped onto a second line while "Street 2"
     stayed on one -- which is what pushed the two inputs out of line
     with each other. Block labels cannot wrap on a 430px track. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .field > .label {
  display: block;
  position: relative;
  margin: 0 0 8px;
  line-height: 20px;
  /* The required marker is a generated ::after. Left in flow it
     makes a required label taller than an optional one, which is
     what still held Street and Street 2 out of line by a few
     pixels once the labels stopped wrapping. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .field > .label:after {
  position: absolute;
}
.amasty_quote-cart-index .quote-cart-container .quote-details {
  /* Validation messages inherit the form's 16px body size, which is
     larger than the labels they sit under and tall enough that one
     error shoves the rest of the form down a line. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .mage-error,
.amasty_quote-cart-index .quote-cart-container .quote-details .field-error,
.amasty_quote-cart-index .quote-cart-container .quote-details div.message.error {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.amasty_quote-cart-index .quote-cart-container .quote-details {
  /* The address fields validate through a different path from the
     name fields. Their message is inserted as a *sibling* of the
     field rather than inside it, so in a grid it becomes an item of
     its own and takes a cell -- and every field after it slides into
     the wrong column. One empty box and the form reshuffled.

     Spanning the row keeps the two columns where they are, and the
     negative margin closes the grid gap so the message still reads
     as belonging to the field above it. */
}
.amasty_quote-cart-index .quote-cart-container .quote-details .fieldset.amquote-summary-details > .field-error {
  grid-column: 1/-1;
  margin: -12px 0 0;
}
@media (max-width: 640px) {
  .amasty_quote-cart-index .quote-cart-container .quote-details .fieldset.amquote-summary-details {
    grid-template-columns: minmax(0, 1fr);
  }
}
@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 {
  /* The quote item lands in a 35% sidebar, where the cart table's
     columns have nowhere to go. It used to be placed by hand: the
     price cell pushed 185px to clear the photo and hauled back up
     60px to sit beside it. That left the price in a white box of its
     own, and the delete control -- which Magento renders in a second
     <tr> entirely -- stranded below and to the right of it.

     Laid out as a flex row instead. `display: contents` on the info
     row is what lets a cell from it share a line with the actions
     row, without touching Magento's markup. */
}
.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 tbody.cart.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  padding: 16px 0;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table tr.item-info {
  display: contents;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table tr.item-info > td {
  display: block;
  position: static;
  top: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: 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.item {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table .product-item-photo {
  display: block;
  flex: none;
  width: 72px;
  padding: 0;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table .product-item-details {
  display: block;
  min-width: 0;
  padding: 0;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table td.col.qty.price {
  /* Flex rather than block so the amount centres inside its
     own box. The cell is taller than its line, and centring
     the boxes alone still left the price reading low against
     the bin beside it. */
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  text-align: left;
  font-weight: 600;
  color: #007038;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table tr.item-actions {
  display: block;
  flex: 0 0 auto;
  margin-left: auto;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table tr.item-actions > td {
  display: block;
  padding: 0;
  border: 0;
  background: none;
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table .item-actions .actions-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  /* Luma hauls this up 20px to tuck the controls under the
     row above. Left in place it collapsed the actions row to
     zero height, so centring had nothing to centre and the
     bin sat above the price rather than level with it. */
  margin: 0;
  /* And the controls themselves are absolutely positioned,
     pinned to the bottom of a row that no longer exists.
     Scoped to this sidebar: the cart page still wants them
     where they are. */
}
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table .item-actions .actions-toolbar > .action-delete,
.amasty_quote-cart-index .quote-cart-sidebar .cart-container #shopping-cart-table .item-actions .actions-toolbar > .action-edit {
  position: static;
  top: auto;
  bottom: auto;
}
.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;
}

/* The bar is one link now, so the underline belongs to the words that invite
   the tap rather than to everything in it. */
.promo-bar__inner {
  color: inherit;
  text-decoration: none;
}

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

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

/* The phone's copy. Hidden until the width calls for it; see the header. */
.promo-bar__msg--short {
  display: none;
}

/* ============================================================
   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;
}

/* Two selectors: Luma's `.logo img { height: auto }` outranks the bare class
   on pages Magento renders, where it stretched the logo to its container. */
.logo__img,
.logo .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);
}

/* --- The menu, below 880px ---

   The mega menu is a wide object -- a rail of categories beside a panel of
   subcategories -- so it is switched off at this width. Nothing took its
   place: no hamburger, and no way to a category but the footer or a search.

   Both pieces are off above the breakpoint rather than on below it, so a
   stylesheet that never reaches the media query cannot leave a stray drawer
   on a desktop page. */
.nav-burger,
.mobile-nav {
  display: none;
}

.mobile-nav[hidden] {
  display: none;
}

@media (max-width: 880px) {
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-900);
    cursor: pointer;
  }
  .nav-burger:hover {
    background: var(--navy-50);
  }
  .nav-burger__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
  }
  .nav-burger__box > span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.16s ease, opacity 0.16s ease;
  }
  /* Open, the bars become the cross that shuts it -- the drawer's own close
     button is off at the far side of the row and the burger is where the
     thumb already is. */
  .nav-burger.is-open .nav-burger__box > span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-burger.is-open .nav-burger__box > span:nth-child(2) {
    opacity: 0;
  }
  .nav-burger.is-open .nav-burger__box > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .mobile-nav {
    display: block;
    position: fixed;
    inset: 0;
    /* Over the sticky header, which is 30. */
    z-index: 60;
  }
  .mobile-nav[hidden] {
    display: none;
  }
  /* The whole screen. A drawer down one side leaves a strip of the page
     showing beside a list of seventeen categories, which reads as something
     half-open; this is the only thing on screen while it is open. */
  /* Three bands: the head, the list, and the call. Only the middle one
     scrolls, so the way out is at the top and the number is at the foot
     wherever the shopper has got to. The panel itself must not scroll or all
     three would move together. */
  .mobile-nav__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
    animation: pnp-nav-in 0.18s ease;
  }
  .mobile-nav__scroll {
    flex: 1 1 auto;
    /* A flex item will not shrink below its content without this, so the
       scrollbar would never appear and the call would be pushed off. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-nav__panel:focus {
    outline: none;
  }
  @keyframes pnp-nav-in {
    from {
      opacity: 0;
      transform: translateX(-16px);
    }
  }
  /* Held, because the panel is now the page: scrolled to Umbrellas there
     would otherwise be no way out but the back button. It is a band outside
     the scrolling middle rather than a sticky child of it. */
  .mobile-nav__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav__title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .mobile-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-900);
    cursor: pointer;
  }
  .mobile-nav__close:hover {
    background: var(--navy-50);
  }
  .mobile-nav__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
  }
  .mobile-nav__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobile-nav__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    /* 52px, so every row is a comfortable target without measuring text. */
    padding: 15px 18px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-900);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-nav__row:hover {
    background: var(--navy-50);
  }
  .mobile-nav__caret {
    transition: transform 0.15s ease;
    flex-shrink: 0;
  }
  .mobile-nav__row.is-open {
    color: var(--navy-900);
  }
  .mobile-nav__row.is-open .mobile-nav__caret {
    transform: rotate(180deg);
  }
  .mobile-nav__sub {
    display: flex;
    flex-direction: column;
    padding: 2px 0 10px;
    background: var(--navy-50);
  }
  .mobile-nav__sub a {
    padding: 11px 18px 11px 30px;
    font-size: 15px;
    color: var(--ink-700);
    text-decoration: none;
  }
  .mobile-nav__sub a:hover {
    color: var(--orange-500);
  }
  .mobile-nav__all {
    font-weight: 700;
    color: var(--navy-900) !important;
  }
  /* The columns the mega menu lays out side by side, stacked. Their headings
     are what breaks a run of twelve links into materials, then shapes, then
     makers -- without them the longer categories are a wall. */
  .mobile-nav__group {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav__grouptitle {
    margin: 12px 0 2px;
    padding: 0 18px 0 30px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .mobile-nav__extras {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }
  .mobile-nav__extras a {
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-700);
    text-decoration: none;
  }
  .mobile-nav__extras a:hover {
    color: var(--orange-500);
  }
  /* A band on the panel's bottom edge rather than a button floating above
     it: full width, and it ends where the screen does. The safe-area inset
     keeps it clear of the home indicator on a phone that has one. */
  .mobile-nav__call {
    flex: 0 0 auto;
    margin: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--navy-900);
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
  }
  .mobile-nav__call:hover {
    background: var(--navy-700, var(--navy-900));
    color: var(--white);
  }
}
/* The mark loses a few pixels only where the row is genuinely too tight for
   it. Measured against the narrowest phone in common use: at 390px the burger,
   the mark at full height and the two tightened basket buttons come to 361px
   of the 390, so the shrink starts below that rather than at 420 where it
   was costing the logo height it did not need to give up. */
@media (max-width: 360px) {
  .logo__img,
  .logo .logo__img {
    height: 32px;
  }
}
/* ============================================================
   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);
}

/* A thin panel -- Bleachers has one column of links -- leaves most of its
   width empty. Featured products fill it, beside the links rather than under
   them, so the subcategories stay the first thing read. The link column keeps
   its own width and the products take what is left. */
.mega__split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: start;
}

.mega__split .mega__cols {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.mega__featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* A panel with no subcategories shows products instead: the same tile as a
   subcategory, but a product photo is shown whole on white rather than
   cropped to fill, and the tile carries a price. Names run long in this
   catalogue (sizes and post diameters), so they stop at two lines. */
.mega-sub--product .mega-sub__thumb {
  background: var(--white);
}

.mega-sub--product .mega-sub__thumb img {
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
}

.mega-sub--product .mega-sub__label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Quote-only products: Magento's own card says the same words, and the
   placeholder price behind them ($0.95 on every shade structure) is not a
   number to print. */
.pcard__price--hidden,
.mega-sub__price--hidden {
  font-weight: 600;
  color: var(--ink-600);
}

.mega-sub__price {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   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: 16px;
  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);
}

/* A card on sale prints both prices. Neither was styled, so they came out as
   two identical bold numbers side by side -- "$1,753.16 $1,947.95" -- with
   nothing to say which one you pay. The one being replaced is smaller, grey
   and struck through, as it is on the product page. */
.pcard__regular {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: line-through;
}

.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;
  /* The image was taking 836px of a 1296px row and the buy box 460 -- nearly
     two to one -- which left four required option palettes and a price
     squeezed into a column narrower than the product photo. Both tracks are
     fractional now, so the split holds at any width, and the buy box has a
     floor: below about 440px the swatch grid starts wrapping badly. */
  grid-template-columns: minmax(0, 1.35fr) minmax(440px, 1fr);
  gap: 48px;
  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);
}

/* A strip that scrolls, not a grid that wraps.

   Six to a row meant a product with ten images grew a second row and pushed
   the buy box down the page; one with eleven grew a third. A row that scrolls
   is the same height whether there are four images or forty, and at 64px
   instead of a sixth of the column about eight are in view at once -- enough
   that most products need no scrolling at all.

   scroll-snap so a flick lands on a thumbnail rather than between two, and
   scroll-padding so the one it lands on is not tight against the edge. */
.gallery__thumbs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 4px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 8px;
  scroll-behavior: smooth;
}

.gallery__thumbs > li {
  flex: 0 0 64px;
  scroll-snap-align: start;
}

/* A thin rail rather than a full-height scrollbar sitting under the strip. */
.gallery__thumbs::-webkit-scrollbar {
  height: 6px;
}

.gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.gallery__thumbs::-webkit-scrollbar-track {
  background: transparent;
}

.gallery__thumbs {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__thumbs {
    scroll-behavior: auto;
  }
}
/* The strip and its two arrows. The arrows are the storefront's; Magento's own
   gallery renders the strip alone and scrolls by drag and wheel. */
.gallery__thumbstrip {
  position: relative;
}

.gallery__thumbnav {
  position: absolute;
  top: calc(50% - 2px);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-800);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.gallery__thumbnav:hover {
  border-color: var(--navy-700);
  color: var(--navy-900);
  background: var(--white);
}

/* Straddling the edge rather than sitting on top of it: at -6px the button
   covered a third of the first thumbnail, which is a thumbnail nobody can
   click. Half in, half out, over the gap the gallery already has. */
.gallery__thumbnav--prev {
  left: -14px;
}

.gallery__thumbnav--next {
  right: -14px;
}

.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
   The buy box's quantity-and-button row. Matched by what it contains rather
   than by its class alone: Magento uses .actions on markup of its own, and a
   bare `.actions` gave the cart page's Update Shopping Cart row this 110px
   first column, which wrapped the button's label onto three lines.
   :where() keeps the specificity of the bare class, so every rule that
   overrode it before still does. */
.actions:where(:has(> .qty)) {
  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;
}

/* The quantity stepper, and only the stepper. A bare `.qty` also matched the
   cart table's Qty header and cells (class `col qty`), boxing the header in a
   border and turning each cell into a grid -- which took it out of table
   layout and dropped the input to the bottom of its row. */
.qty:where(:has(> .qty__btn)) {
  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);
}

/* Link states keep each button's own text colour and no underline.
   Most buttons here are <a> elements, and the variants above set a colour but
   never on :hover, so `a:hover { color: var(--navy-900) }` -- and on Magento's
   pages Luma's blue, underlined a:hover, a:visited and a:active -- won the
   moment a pointer arrived: the orange Shop the catalog button turned its label
   dark blue, the white-on-dark ghost button went blue too. Each state is named
   so the variant (two classes) outranks the element rule (one class, one
   element) in every case. */
.btn:hover,
.btn:focus,
.btn:active,
.btn:visited {
  text-decoration: none;
}

.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active,
.btn--primary:visited,
.btn--ghost:hover,
.btn--ghost:focus,
.btn--ghost:active,
.btn--ghost:visited {
  color: var(--white);
}

.btn--secondary:hover,
.btn--secondary:focus,
.btn--secondary:active,
.btn--secondary:visited {
  color: var(--navy-900);
}

/* 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);
  }
  /* One column of links and two of products no longer both fit. */
  .mega__split {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .mega__featured-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* Two full rows of three rather than a stray pair on a third. */
  .mega__grid--products .mega-sub:nth-child(n+7) {
    display: none;
  }
  .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) {
  /* Menu, mark, basket. The outer columns are both 1fr so the logo sits dead
     centre whatever the burger and the two basket buttons measure -- sized to
     their contents, the mark drifted left as the cart count went from one
     digit to two. */
  .header__inner {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "menu logo actions" "search search search";
    gap: 12px 8px;
    padding: 12px var(--gutter);
  }
  .nav-burger {
    grid-area: menu;
    justify-self: start;
  }
  .logo {
    grid-area: logo;
    justify-self: center;
  }
  .header__actions {
    grid-area: actions;
    justify-self: end;
  }
  /* The grid item is .search-wrap, not the form inside it, so the area is
     placed on the wrapper in chrome.css where that element is styled. This
     line is kept for the Magento-rendered header, which has no wrapper. */
  .search {
    grid-area: search;
    max-width: none;
  }
  .primary-nav {
    display: none;
  }
  .mega {
    display: none;
  }
  .utility-bar__right {
    display: none;
  }
  /* The promo bar wrapped onto three lines -- 117px of a 950px screen before
     anything else. Same words, one or two lines. */
  /* One line, which needs shorter words rather than smaller ones: the full
     message at 12px ran to three lines and left "Shop now" on the last by
     itself, 60px of the first screen spent on a sentence nobody reads twice. */
  .promo-bar {
    font-size: 12px;
  }
  .promo-bar__inner {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 12px;
  }
  .promo-bar__pill {
    font-size: 10px;
    padding: 2px 8px;
    letter-spacing: 0.06em;
    flex: 0 0 auto;
  }
  .promo-bar__msg {
    display: none;
  }
  .promo-bar__msg--short {
    display: inline;
  }
  .promo-bar__link {
    flex: 0 0 auto;
  }
  /* "My Quote" and "My Cart" spelled out took the width the logo needed. The
     icon and the count say the same thing; the words stay for screen readers,
     and the title attribute on the link already names it.

     With the words gone the two buttons still carried the padding and the
     label gap they were given to sit either side of a word, so the icons sat
     20px apart and read as two unrelated controls. They are tightened with
     the rest of the basket rules further down this file: these are Magento's
     own class names, and a rule here is one class short of reaching them. */
  /* The utility bar keeps the phone number, which is the one thing worth
     tapping up here, and drops the opening hours that pushed it off centre. */
  .utility-bar__inner {
    justify-content: center;
  }
  .util-meta {
    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%;
  }
}
/* Narrower than a 390px phone the pill is the first thing to go: "Sale" is
   said again by the offer right beside it. */
@media (max-width: 380px) {
  .promo-bar {
    font-size: 11px;
  }
  .promo-bar__pill {
    display: none;
  }
}
@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: 16px;
  margin-top: 28px;
}

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

/* An issue is a newsletter laid out in an email tool and pasted in whole: the
   masthead is 1400x1622, the item pictures are 1400x1400 squares, and none of
   them carry a width. Stretched to the column each one is most of a screen.

   The cap is on height, not width, because the two kinds of picture here want
   opposite things: the infographics are wide and have writing on them, so
   narrowing them makes them unreadable, while the photos are square or portrait
   and only need to stop filling the page. Capping the height leaves a wide
   graphic alone and brings a tall one down, which is what the client's own
   newsletter did by giving every image a size. */
.news-article__banner {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 340px;
  height: auto;
  margin: 0 auto 22px;
  border-radius: var(--r-lg);
}

/* A paragraph that is nothing but a link is a call to action. The pasted
   issues shout them six different ways and the hand-written 2026 ones set them
   in title case with an arrow; NewsArticleView now writes them all the second
   way, and this is what they look like. */
.news-article .rich-text p:has(> a:only-child) {
  margin: 18px 0 22px;
}

.news-article .rich-text p:has(> a:only-child) > a {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-900);
  text-decoration: none;
  border-bottom: 2px solid var(--orange-500);
  padding-bottom: 2px;
}

.news-article .rich-text p:has(> a:only-child) > a:hover {
  color: var(--orange-500);
}

.news-article .rich-text img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  margin: 18px auto;
  border-radius: var(--r-md);
}

.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(0, 1.35fr) minmax(440px, 1fr);
  gap: 48px;
  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;
}

/* The flex box was on .price-box, whose only child is .price-container -- so
   the gap had nothing to sit between and the sale price, the price it replaces
   and the "Starting at" label all ran together. The row that actually holds
   them is this one. */
.catalog-product-view .pnp-pdp-hero .product-info-price .price-container {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

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

/* Says what the strike-through only implies. Green, not the orange of the
   price card and the Add to Cart beneath it, so it reads as information
   rather than a second thing to press. */
.catalog-product-view .pnp-pdp-hero .product-info-price .price-save {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--green-deep);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  /* Baseline-aligned with a 32px number would hang it low; this sits it on
     the same optical line as the old price beside it. */
  align-self: center;
}

.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;
  /* The design's 12px. It had been raised to 14 on the grounds that an option
     name squeezed beside its selected value was hard to read; the buy box is
     wider now, so the squeeze that argument rested on is gone. */
  font-size: 12px;
  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: 290px 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;
  /* Inset by the gutter, so the band starts on the same line as the filter
     rail and the product grid below it. It ran edge to edge before, which
     made the picture and the copy over it the only things on the page wider
     than everything else. */
  max-width: none;
  width: auto;
  /* `padding: 0` below is what the picture needs, and it takes the 32px that
     .plp-head sets above the plain header with it -- so the band started on
     the breadcrumbs' bottom edge with nothing between them. The gap goes back
     as a margin, where the background cannot follow it. */
  margin: 16px var(--gutter) 0;
  border-radius: var(--r-lg);
  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;
}

/* The category's own copy, between the header and the grid. It had no side
   padding at all, so it sat 24px wider than the grid under it. */
.catalog-category-view .category-description {
  padding: 16px var(--gutter) 0;
  max-width: var(--container);
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  /* Restates the side margins, so it has to restate the gap above the band
     as well or the phone loses it again. */
  .plp-head--hero {
    min-height: 220px;
    margin: 12px var(--gutter) 0;
  }
  .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,
.catalogsearch-result-index .pages-label,
.catalogsearch-result-index .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.

   Both renderers print the toolbar twice: the first carries the count and the
   sorter, the second carries only the pager. Hiding `.toolbar-products .pages`
   outright was meant for the first one and took the second with it -- so a
   search for "bench" showed 24 of 174 results and no way to reach the rest.
   The pager is hidden only where the count lives. */
.catalog-category-view .toolbar-products .toolbar-amount,
.catalogsearch-result-index .toolbar-products .toolbar-amount {
  display: block !important;
}

.catalog-category-view .toolbar-products:has(.toolbar-amount) .pages,
.catalogsearch-result-index .toolbar-products:has(.toolbar-amount) .pages {
  display: none !important;
}

/* Where there is no Load More -- every page the front end renders -- the pager
   under the grid is the only way to page two, so it is shown and given room.
   `.pnp-loadmore` is set by pnp.js, which only a Magento-rendered page loads. */
:not(.pnp-loadmore) .catalogsearch-result-index .product-grid ~ .toolbar-products,
:not(.pnp-loadmore) .catalog-category-view .product-grid ~ .toolbar-products {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
  margin-top: 28px;
  border-top: 1px solid var(--border);
}

/* The pager that survives sits on its own under the grid. */
.catalog-category-view .toolbar-products:not(:has(.toolbar-amount)),
.catalogsearch-result-index .toolbar-products:not(:has(.toolbar-amount)) {
  display: flex;
  justify-content: center;
  padding: 28px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 28px;
}

/* 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. */
.pnp-loadmore .catalog-category-view .product-grid ~ .toolbar-products,
.pnp-loadmore .catalogsearch-result-index .product-grid ~ .toolbar-products {
  display: none !important;
}

/* --- Load More, on the pages the front end renders ---

   The same job as the Amasty button above, in the renderer that does not load
   Amasty. It sits under the grid with the room the pager never had: the
   numbered pager used to butt up against the last row of products, so the
   first thing under a wall of cards was more small text.

   A column, centred, so the count reads as a caption to the button rather
   than as something next to it. */
.listing-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 0 8px;
  margin-top: 40px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.listing-more__count {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-600, var(--ink-900));
}

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

/* Wide enough to be the obvious thing to press, not so wide it reads as a
   band across the page. */
.listing-more__button {
  min-width: 220px;
  justify-content: center;
}

.listing-more__button[aria-busy=true] {
  opacity: 0.6;
  pointer-events: none;
}

.listing-more__failed {
  margin: 0;
  font-size: 13px;
  color: var(--orange-600, #b45309);
}

/* "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,
.catalogsearch-result-index .filter-current + .filter-actions,
.catalogsearch-result-index .filter-actions a {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
}

.catalog-category-view .filter-actions a:hover,
.catalogsearch-result-index .filter-actions a:hover {
  color: var(--orange-500);
}

/* --- Applied filters ---

   _plp.scss hides Magento's "Now Shopping by" block outright, from when the
   only sign of an applied filter was the checkbox in its group. That is not
   enough: once a filter is applied its group often has a single option left,
   so the checkbox carries the whole message, and "Clear all" was the only way
   out -- lose one filter, lose them all.

   Rows rather than pills. A pill is sized by its text, so "Low (Sand / Beach /
   Spa)" either wrapped inside its own border or pushed the row ragged; a row
   is the width of the rail whatever it says, and the names stay in a column
   the eye can run down. */
.catalog-category-view .block.filter .filter-current,
.catalogsearch-result-index .block.filter .filter-current {
  display: block;
  margin: 0;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
}

.catalog-category-view .filter-current-subtitle,
.catalogsearch-result-index .filter-current-subtitle {
  display: block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-600);
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0;
}

.catalog-category-view .filter-current .items,
.catalogsearch-result-index .filter-current .items {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalog-category-view .filter-current .item,
.catalogsearch-result-index .filter-current .item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  column-gap: 8px;
  align-items: center;
  margin: 0;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--ink-50);
}

/* The attribute name is context, so it goes above in small caps and the value
   gets the weight: a shopper scanning reads "Cross Strap", and "Strap Pattern"
   only if they need to. */
.catalog-category-view .filter-current .filter-label,
.catalogsearch-result-index .filter-current .filter-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
  line-height: 1.4;
}

.catalog-category-view .filter-current .filter-value,
.catalogsearch-result-index .filter-current .filter-value {
  grid-column: 1;
  grid-row: 2;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* An × drawn with an SVG, because the luma-icons font is not loaded here and
   its glyph renders as tofu -- the same reason the group chevrons are SVG. */
.catalog-category-view .filter-current .action.remove,
.catalogsearch-result-index .filter-current .action.remove {
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: 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='%236b7a8c' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  text-decoration: none;
}

.catalog-category-view .filter-current .action.remove:hover,
.catalogsearch-result-index .filter-current .action.remove:hover {
  background-color: var(--white);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

/* The text is for a screen reader; the mark is the control. */
.catalog-category-view .filter-current .action.remove span,
.catalogsearch-result-index .filter-current .action.remove span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.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: flex-start;
  gap: 9px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-700);
  text-decoration: none;
}

/* A long option -- "Low (Sand / Beach / Spa)" -- wraps under itself rather than
   under the checkbox, which otherwise reads as two separate options. */
.catalog-category-view .filter-options-content .item > a .label,
.catalogsearch-result-index .filter-options-content .item > a .label {
  min-width: 0;
}

.catalog-category-view .filter-options-content .item > a:hover,
.catalogsearch-result-index .filter-options-content .item > a:hover {
  color: var(--ink-900);
}

/* Sized and nudged on to the label's first line. The browser's own checkbox is
   a different size with margins of its own, which is what a search page got
   while this rule named only the category page. */
.catalog-category-view .filter-options-content .item input[type=checkbox],
.catalogsearch-result-index .filter-options-content .item input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--navy-900);
  cursor: pointer;
  flex-shrink: 0;
  margin: 1px 0 0;
}

.catalog-category-view .filter-options-content .item .count,
.catalogsearch-result-index .filter-options-content .item .count {
  margin-left: auto;
  padding-left: 8px;
  font-size: 13px;
  color: var(--ink-400);
  flex-shrink: 0;
}

.catalog-category-view .filter-options-content .item .count::before,
.catalog-category-view .filter-options-content .item .count::after,
.catalogsearch-result-index .filter-options-content .item .count::before,
.catalogsearch-result-index .filter-options-content .item .count::after {
  content: none;
}

/* The front end's own "Clear all". Magento prints its equivalent inside
   .filter-actions, which is styled above; this one sits in the rail's heading
   row and had never been given anything. */
.catalog-category-view .filter-clear,
.catalogsearch-result-index .filter-clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
}

.catalog-category-view .filter-clear:hover,
.catalogsearch-result-index .filter-clear:hover {
  color: var(--orange-500);
}

/* The legacy skin zeroes the listing's top padding below 768px, from a layout
   where the toolbar sat directly under the title. In v2 the first thing in
   that column is the Filter button, which was left touching the category's
   own copy. */
@media (max-width: 900px) {
  .catalog-category-view #maincontent .columns,
  .catalogsearch-result-index #maincontent .columns {
    padding-top: 24px;
  }
}
/* --- The rail, shut, below 900px ---

   At 900px the two-column grid becomes one and the rail stops being a column
   beside the products and becomes a block above them. At full height that
   block was the whole first screen: a shopper arriving on a category met a
   list of checkboxes and scrolled past all of them to reach a product.

   So below that width it opens from a button. `.filter--collapsible` is set
   by the front end's own rail and never by Magento's, which keeps its own
   script and its own narrow-width behaviour -- the two renderers share every
   other class on this element, so the marker is the only safe hook. */
.filter-toggle,
.filter-done,
.filter-panel__head {
  display: none;
}

/* Above the breakpoint the wrapper must not exist as far as layout is
   concerned: the rail is a column of blocks, as it always was. */
.filter-panel__scroll {
  display: contents;
}

@media (max-width: 900px) {
  .filter--collapsible .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--white);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink-900);
    cursor: pointer;
  }
  .filter--collapsible .filter-toggle__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* How many are on, where the groups that say so are out of sight. */
  .filter--collapsible .filter-toggle__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--orange-500);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
  }
  .filter--collapsible .filter-toggle__caret {
    transition: transform 0.15s ease;
  }
  .filter--open .filter-toggle__caret {
    transform: rotate(180deg);
  }
  /* The legacy skin gives the rail its own hairlines above and below, from a
     layout where it was a banded section of the page. v2 already zeroes its
     padding and margins there but left the borders, so the Filter button sat
     between two full-width rules belonging to nothing. */
  .catalog-category-view .columns > .sidebar.sidebar-main,
  .catalogsearch-result-index .columns > .sidebar.sidebar-main {
    border: 0;
  }
  /* In the page, the block is the button and nothing else: the card it used
     to draw belongs to the panel now. */
  .filter--collapsible:not(.filter--open) .filter-content {
    display: none;
  }
  .catalog-category-view .sidebar-main .block.filter--collapsible,
  .catalogsearch-result-index .sidebar-main .block.filter--collapsible {
    border: 0;
    padding: 0;
    background: none;
  }
  /* The legacy skin gives #maincontent `position: relative; z-index: 1` to
     hang a hairline off, which makes it a stacking context -- and a fixed
     panel inside one cannot rise above anything outside it, however high its
     own z-index. The filter panel came out *under* the sticky header, which
     is z-index 30, while measuring as if it were over it. `z-index: auto`
     keeps the positioning and drops the context, so the panel stacks against
     the page. Listing pages only, and only at this width. */
  .catalog-category-view #maincontent,
  .catalogsearch-result-index #maincontent {
    z-index: auto;
  }
  /* --- Open, the rail comes in over the page ---

     It used to open downwards, pushing the whole listing below the fold and
     leaving the shopper scrolling a list of checkboxes with the products they
     were choosing between nowhere in sight. It is the same kind of thing as
     the menu, so it behaves like it: in from the left, over everything, three
     bands with only the middle one scrolling. */
  .filter--collapsible.filter--open .filter-content {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow: hidden;
    animation: pnp-nav-in 0.18s ease;
  }
  .filter--open .filter-panel__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
  }
  .filter-panel__title {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-600);
  }
  .filter-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    color: var(--ink-900);
    cursor: pointer;
  }
  .filter-panel__close:hover {
    background: var(--navy-50);
  }
  .filter--open .filter-panel__scroll {
    display: block;
    flex: 1 1 auto;
    /* Or the flex item will not shrink below its content and the count at the
       foot is pushed off the bottom. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 18px;
  }
  /* A band on the panel's bottom edge, like the menu's call. */
  .filter--open .filter-done {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  /* The button says "Filter", so the heading under it says it twice. The
     legacy skin already hid this below 768px and left the empty row behind;
     the row goes with it, unless it is carrying "Clear all", which is the one
     thing in it a shopper needs. */
  .filter--collapsible .filters-title .filter-subtitle {
    display: none;
  }
  .filter--collapsible .filters-title:not(:has(.filter-clear)) {
    display: none;
  }
  .filter--collapsible .filters-title {
    justify-content: flex-end;
    border-bottom: 0;
    padding: 0 0 10px !important;
  }
}
/* 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;
  /* The dropdown below is absolutely positioned against this. */
  position: relative;
}

/* The signed-in account dropdown.
   These rules used to live under .page-header in _header.scss, which only
   exists on pages Magento renders. On the storefront's own pages the dropdown
   got nothing but a z-index, and opened as a bare list spilling into the
   utility bar. Scoped to the menu itself now, so it is the same dropdown
   everywhere. */
.customer-account-menu .account-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(16, 32, 48, 0.16));
  white-space: nowrap;
}

/* The little arrow, so the panel reads as belonging to the name above it
   rather than floating over the header. */
.customer-account-menu .account-dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 18px;
  width: 9px;
  height: 9px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}

.customer-account-menu .account-dropdown li {
  margin: 0;
}

.customer-account-menu .account-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-800);
  text-transform: none;
  text-decoration: none;
}

.customer-account-menu .account-dropdown a:hover,
.customer-account-menu .account-dropdown a:focus-visible {
  background: var(--navy-50);
  color: var(--navy-900);
  text-decoration: none;
}

/* Signing out is not one of the places to go, so it sits under a rule. */
.customer-account-menu .account-dropdown li:last-child {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.customer-account-menu .account-dropdown li:last-child a {
  color: var(--ink-600);
}

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

/* And on a narrow screen the words come off again.

   "My Quote" and "My Cart" spelled out took the width the logo needed; the
   icon and the count say the same thing. The text stays for screen readers,
   and each link carries a title attribute as well.

   It has to sit here rather than in the mobile block higher up the file: the
   rule above is three classes deep and later, so a two-class rule earlier in
   the file never reached it. */
@media (max-width: 880px) {
  .header .header__actions .amquote-showcart .text,
  .header .header__actions .action.showcart .text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .header .header__actions .amquote-showcart,
  .header .header__actions .action.showcart {
    /* Nothing between them but their own padding: the two buttons are one
       pair, and 20px of air made them read as two unrelated controls. What
       this gives back goes to the mark between them. The count is lifted on
       to the icon further down this file, which is why there is no gap left
       to set here. */
    position: relative;
    padding: 8px 4px;
    gap: 0;
  }
  .header .header__actions {
    gap: 0;
  }
}
/* Counter becomes the v2 pill badge, hidden while empty.

   Two things have to be kept off it. `.qty` is also the buy box quantity
   stepper, whose `grid-template-columns: 38px 1fr 38px` stretched this badge
   to 86px -- a bare `.qty` rule reaching markup that has nothing to do with a
   stepper. And Amasty colours the quote counter through a four-class selector,
   which outranks a three-class one, so the quote badge came out pale blue
   beside an orange cart badge. Both are answered here rather than in the app
   that renders the header: the markup and these class names are Magento's. */
/* Both showcart variants are named at four classes, because the legacy skin
   names them at four: `.minicart-wrapper .action.showcart .counter.qty` sets
   `background: none`, and `.amquote-cart-wrapper.minicart-wrapper
   .amquote-showcart .counter.qty` sets it pale blue. A three-class rule loses
   to either -- which left the cart badge as white text on a transparent
   ground, i.e. invisible, while the quote badge beside it was fine. */
.header .header__actions .counter.qty,
.header .header__actions .action.showcart .counter.qty,
.header .header__actions .amquote-showcart .counter.qty {
  display: inline-grid;
  grid-template-columns: auto;
  border: 0;
  place-items: center;
  position: static;
  margin: 0;
  /* A fixed circle, not a pill that grows with its number: 13 used to
     stretch it into an oval beside a round 0. Twenty pixels holds two digits
     at this size; past 99 the header shows 99+ in a smaller face. */
  box-sizing: border-box;
  width: 20px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  background: var(--orange-500);
  color: var(--white);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
}

.header .header__actions .counter.qty.many {
  font-size: 8px;
  letter-spacing: -0.04em;
}

/* An empty basket's badge stays on screen, reading 0, at reduced strength.
   Hiding it meant the badge appeared only once the session's counts loaded,
   after first paint, and pushed both buttons wider as it did -- the header
   visibly jumped. Kept in place, the space is reserved from the start and
   only the number and the strength change.

   !important because Luma and Amasty both hide an empty counter from
   selectors as specific as this one, and the display has to win over both. */
.header .header__actions .counter.qty.empty {
  display: inline-grid !important;
  opacity: 0.4;
}

.header .header__actions .counter.qty {
  transition: opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .header .header__actions .counter.qty {
    transition: none;
  }
}
.header .header__actions .counter-label {
  display: none !important;
}

/* --- Below 880px the count sits on the icon ---

   Beside it, each count is a 20px circle of width in a row that has a logo to
   centre and a burger to fit: two of them cost 40px, and the pair of buttons
   came to 104px between them. Lifted on to the corner of its own icon the
   count costs nothing across, which is 48px back for the mark and for the
   right-hand end of the row.

   Smaller with it -- 16px rather than 20 -- because it now sits over artwork
   rather than beside it, and a ring in the header's own colour so it reads as
   on top of the icon rather than merged into it.

   Late in the file on purpose: the rules above set `position: static` on this
   element at the same specificity, so an override in the mobile block higher
   up never reached it. */
@media (max-width: 880px) {
  .header .header__actions .counter.qty,
  .header .header__actions .action.showcart .counter.qty,
  .header .header__actions .amquote-showcart .counter.qty {
    position: absolute;
    top: 2px;
    right: 0;
    width: 16px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--white);
  }
  /* Three digits in sixteen pixels. */
  .header .header__actions .counter.qty.many {
    font-size: 7px;
  }
  /* Full strength whatever the number.

     An empty basket's badge is dimmed at full width, where it is a 20px
     circle on white with a word beside it and reading 0 at 40% is plenty. On
     an icon it is 16px with artwork behind it, and the same 40% left the
     number hard to make out -- so here the badge is always legible and only
     the number changes. Later in the file than the rule it overrides, which
     is the only reason it wins: the two selectors are the same weight. */
  .header .header__actions .counter.qty.empty {
    opacity: 1;
  }
}
/* ===== 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 {
  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;
}

/* The 360 viewer gets a border, and nothing else.

   On the page background with no edge the product looked like it was
   floating. The frame is only the gallery's border and radius: no tint and no
   aspect ratio of its own. Cylindo's render is square on a white ground and
   the SDK fills its element with the parent's background, so a 5:4 tinted box
   showed as grey bars either side of the product. The box takes the viewer's
   own shape instead. */
.catalog-product-view .pnp-pdp-hero .product.media .cylindo-viewer {
  display: block;
  width: 100%;
  position: static;
  top: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* The SDK's element fills the frame's width and keeps its own aspect ratio,
   so the border sits on the edge of the image. */
.catalog-product-view .pnp-pdp-hero .product.media cylindo-viewer,
.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);
}

/* ===== The chosen colour, beside its name =====================================
   Cart lines and minicart lines carry the swatch the shopper picked from: this
   catalogue is bought by colour, and "232 Adobe" on its own asks them to
   remember what that looked like. Round, as the buy box draws them. */
.item-options dd .option-swatch,
.product.options .values .option-swatch {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
}

/* Beside the name, not above it. These dd cells are narrow enough that an
   inline image wraps the text onto a second line, which reads as two separate
   facts rather than one colour. Only the cells that have a swatch change.

   Named at every scope Luma already names them at -- cart table, minicart,
   checkout summary -- because `.cart.table-wrapper .item-options dd` sets
   `display: inline-block` and outranks the bare selector, which is how the
   first version of this ended up stacked anyway. */
.item-options dd:has(.option-swatch),
.cart.table-wrapper .item-options dd:has(.option-swatch),
.minicart-items .product-item-details .product .options.list dd:has(.option-swatch),
.opc-block-summary .items-in-cart .product .item-options dd:has(.option-swatch),
.multicheckout .item-options dd:has(.option-swatch),
.product.options .values:has(.option-swatch) {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== Add to Quote, held closed =============================================
   The button is disabled until every required option is answered -- Amasty's
   own script does it on the Magento PDP and the storefront does it in React --
   but nothing ever styled that state, so it sat there looking pressable and
   did nothing when pressed. The theme dims .action.primary:disabled already;
   this is the same treatment for the outline button beside it. */
.catalog-product-view .amquote-addto-button:disabled,
.catalog-product-view .pnp-pdp-hero .amquote-addto-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--white) !important;
  border-color: var(--border-strong) !important;
  color: var(--ink-500) !important;
}

.catalog-product-view .amquote-addto-button:disabled:hover,
.catalog-product-view .pnp-pdp-hero .amquote-addto-button:disabled:hover {
  background: var(--white) !important;
  border-color: var(--border-strong) !important;
}

/* ============================================================
   Checkout header
   ------------------------------------------------------------
   checkout_index_index.xml strips the header down to the logo: no promo bar,
   no utility bar, no search, no mega nav, no quote or cart buttons. What is
   left is a one-item grid whose single column is still `auto`, so the logo
   sits hard left. Lay the row out as a centred flex line instead.

   Scoped to the checkout body class -- .header__inner is the same block on
   every other page, where the three column grid is exactly right.
   ============================================================ */
.checkout-index-index .header__inner {
  display: flex;
  justify-content: center;
  padding: 18px 24px;
}

/* The logo is the whole header here, so it can carry more size than the 38px
   it has beside search and the basket buttons. */
.checkout-index-index .header__inner .logo__img {
  height: 48px;
}

/* header-inner.phtml emits the .search and .header__actions wrappers itself and
   fills them with getChildHtml(), so removing the blocks in
   checkout_index_index.xml empties them but leaves them in the row. .search
   still carries its 560px track and holds the logo off centre. */
.checkout-index-index .header__inner .search,
.checkout-index-index .header__inner .header__actions {
  display: none;
}

/* A colour swatch is a span the browser paints, not an image it loads, so it
   needs the box an <img> is given for free. Everything else about it -- size,
   ring, radius -- it already inherits from .option-swatch above. */
.option-swatch--color {
  display: inline-block;
}

/* ===== The storefront chrome on Magento's own pages ========================
   Cart, quote and account pages print the header and footer the storefront
   renders (Vonnda\Frontend\Model\Chrome), so the markup is identical on both.
   What differs is that these pages also load Luma's base stylesheets, which
   the storefront never has, and Luma styles bare elements: headings at a 1.1
   line height, every button at weight 600, search inputs at a line height of
   their own, and anything classed .logo with margins, a max width, relative
   positioning and a float. Measured element by element against the
   storefront's computed styles, those were the whole of the difference.

   Each is undone at Luma's own specificity, through :where(), so a reset beats
   the base rule it answers (this file loads after styles-m and styles-l) and
   still loses to every class rule in the theme -- which is what the storefront
   renders with. */
:where(.page-header, .page-footer) :is(h1, h2, h3, h4, h5, h6) {
  line-height: inherit;
}

:where(.page-header, .page-footer) button {
  font-weight: 400;
}

:where(.page-header) input[type=search] {
  line-height: 1.15;
}

:where(.page-header, .page-footer) .logo {
  margin: 0;
  max-width: none;
  position: static;
}

:where(.page-header) :is(.minicart-wrapper, .amquote-cart-wrapper.minicart-wrapper) {
  float: none;
}

/* Luma's footer list rules are more specific than the theme's list classes
   rather than equal to them, so a :where() reset alone cannot let the theme
   through; these restate the theme's own values at a specificity that wins.
   Luma pads every footer list 50px on the right and zeroes the margin under
   each item -- and .footer__links--split is a column layout, so that margin
   (8px, from `.footer__links--split li`) is the only spacing its links have.
   The legacy footer rules used to mask both, by accident. */
:where(.page-footer) .footer.content ul {
  padding-right: 0;
}

:where(.page-footer) .footer.content .footer__links--split > li {
  margin-bottom: 8px;
}

/* ===== Cart page ============================================================ */
/* Update Shopping Cart: one line, at the right edge, under the grid. */
.checkout-cart-index .cart.main.actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.checkout-cart-index .cart.main.actions .action.update {
  width: auto;
  white-space: nowrap;
}

/* Get Shipping Quotes, which app-v2.js moves inside the estimator's panel.
   Eniture's template gives it a bare <button> and an inline width only. */
.checkout-cart-index #block-summary .getrate.btn {
  display: flex;
  width: 100%;
  margin: 16px 0 4px;
}

.checkout-cart-index #block-summary .getrate.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Checkbox and radio rows ==============================================
   Magento wraps a checkbox or radio and its label in .field.choice. The
   theme's bare `.field { display: flex; flex-direction: column }` and
   `.field input { width: 100% }`, written for stacked text fields, turned each
   of those into a full-width box above its label: the cart's shipping rates
   (a radio over "Fixed $325.00") and, on the account pages, Sign Up for
   Newsletter, Allow remote shopping assistance and Show Password. Laid back
   out as a row. Nothing on the storefront's pages uses .field.choice. */
.field.choice {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field.choice input[type=radio],
.field.choice input[type=checkbox] {
  flex: none;
  width: auto;
  margin: 0;
}

/* Luma gives the cart rate's label a bottom margin, which would sit it a few
   pixels above the radio's centre in a row. */
.cart-summary .block .fieldset .field.choice > .label {
  margin: 0;
}

/* ==========================================================================
   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);
  }
}
/* ============================================================
   Customer account

   Magento renders sign in, registration and the account dashboard, and the v2
   theme had nothing for any of them: a 400px column adrift in a 1440px page,
   Luma's green buttons, and the page title hidden. Everything here is scoped
   to the account body classes, because the class names Magento uses -- .block,
   .box, .fieldset, .actions-toolbar -- are far too generic to style loosely.
   ============================================================ */
.customer-account-login .columns,
.customer-account-create .columns,
.customer-account-forgotpassword .columns,
.customer-account-edit .columns,
.customer-address-form .columns,
.customer-address-index .columns,
.account .columns {
  padding: 0 var(--gutter) 56px;
}
.customer-account-login,
.customer-account-create,
.customer-account-forgotpassword,
.customer-account-edit,
.customer-address-form,
.customer-address-index,
.account {
  /* Luma caps the one-column account layout at 400px and floats the blocks
     inside it, which left the sign-in pair as two narrow strips adrift in a
     1440px page. */
}
.customer-account-login .columns > .column.main,
.customer-account-create .columns > .column.main,
.customer-account-forgotpassword .columns > .column.main,
.customer-account-edit .columns > .column.main,
.customer-address-form .columns > .column.main,
.customer-address-index .columns > .column.main,
.account .columns > .column.main {
  max-width: none;
  width: auto;
  float: none;
  padding: 0;
}
.customer-account-login .block,
.customer-account-create .block,
.customer-account-forgotpassword .block,
.customer-account-edit .block,
.customer-address-form .block,
.customer-address-index .block,
.account .block {
  float: none;
  width: auto;
}
.customer-account-login .page-title-wrapper,
.customer-account-create .page-title-wrapper,
.customer-account-forgotpassword .page-title-wrapper,
.customer-account-edit .page-title-wrapper,
.customer-address-form .page-title-wrapper,
.customer-address-index .page-title-wrapper,
.account .page-title-wrapper {
  display: block;
  padding: 32px 0 4px;
}
.customer-account-login .page-title,
.customer-account-create .page-title,
.customer-account-forgotpassword .page-title,
.customer-account-edit .page-title,
.customer-address-form .page-title,
.customer-address-index .page-title,
.account .page-title {
  display: block;
  width: auto;
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 20px;
}
.customer-account-login,
.customer-account-create,
.customer-account-forgotpassword,
.customer-account-edit,
.customer-address-form,
.customer-address-index,
.account {
  /* Panels: the same card the rest of the site uses. */
}
.customer-account-login .block,
.customer-account-login .form.form-edit-account > .fieldset,
.customer-account-login .form-address-edit > .fieldset,
.customer-account-create .block,
.customer-account-create .form.form-edit-account > .fieldset,
.customer-account-create .form-address-edit > .fieldset,
.customer-account-forgotpassword .block,
.customer-account-forgotpassword .form.form-edit-account > .fieldset,
.customer-account-forgotpassword .form-address-edit > .fieldset,
.customer-account-edit .block,
.customer-account-edit .form.form-edit-account > .fieldset,
.customer-account-edit .form-address-edit > .fieldset,
.customer-address-form .block,
.customer-address-form .form.form-edit-account > .fieldset,
.customer-address-form .form-address-edit > .fieldset,
.customer-address-index .block,
.customer-address-index .form.form-edit-account > .fieldset,
.customer-address-index .form-address-edit > .fieldset,
.account .block,
.account .form.form-edit-account > .fieldset,
.account .form-address-edit > .fieldset {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 0 0 24px;
  box-sizing: border-box;
}
.customer-account-login,
.customer-account-create,
.customer-account-forgotpassword,
.customer-account-edit,
.customer-address-form,
.customer-address-index,
.account {
  /* Luma zeroes the bottom margin of the last block in a column, which on the
     dashboard is every block after the first -- they ended up touching. */
}
.customer-account-login .block + .block,
.customer-account-login .block:last-child,
.customer-account-create .block + .block,
.customer-account-create .block:last-child,
.customer-account-forgotpassword .block + .block,
.customer-account-forgotpassword .block:last-child,
.customer-account-edit .block + .block,
.customer-account-edit .block:last-child,
.customer-address-form .block + .block,
.customer-address-form .block:last-child,
.customer-address-index .block + .block,
.customer-address-index .block:last-child,
.account .block + .block,
.account .block:last-child {
  margin-bottom: 24px;
}
.customer-account-login,
.customer-account-create,
.customer-account-forgotpassword,
.customer-account-edit,
.customer-address-form,
.customer-address-index,
.account {
  /* Luma centres a fieldset legend and hangs it above the box; inside a card
     that reads as a heading belonging to nothing. */
}
.customer-account-login .fieldset > .legend,
.customer-account-create .fieldset > .legend,
.customer-account-forgotpassword .fieldset > .legend,
.customer-account-edit .fieldset > .legend,
.customer-address-form .fieldset > .legend,
.customer-address-index .fieldset > .legend,
.account .fieldset > .legend {
  text-align: left;
  margin-bottom: 16px;
  padding: 0;
}
.customer-account-login .fieldset,
.customer-account-create .fieldset,
.customer-account-forgotpassword .fieldset,
.customer-account-edit .fieldset,
.customer-address-form .fieldset,
.customer-address-index .fieldset,
.account .fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.customer-account-login .fieldset > .legend + br,
.customer-account-create .fieldset > .legend + br,
.customer-account-forgotpassword .fieldset > .legend + br,
.customer-account-edit .fieldset > .legend + br,
.customer-address-form .fieldset > .legend + br,
.customer-address-index .fieldset > .legend + br,
.account .fieldset > .legend + br {
  display: none;
}
.customer-account-login .block-title,
.customer-account-login .legend,
.customer-account-create .block-title,
.customer-account-create .legend,
.customer-account-forgotpassword .block-title,
.customer-account-forgotpassword .legend,
.customer-account-edit .block-title,
.customer-account-edit .legend,
.customer-address-form .block-title,
.customer-address-form .legend,
.customer-address-index .block-title,
.customer-address-index .legend,
.account .block-title,
.account .legend {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  border: 0;
  margin: 0 0 14px;
  padding: 0;
  width: auto;
  float: none;
}
.customer-account-login .block-title > strong,
.customer-account-login .legend > span,
.customer-account-create .block-title > strong,
.customer-account-create .legend > span,
.customer-account-forgotpassword .block-title > strong,
.customer-account-forgotpassword .legend > span,
.customer-account-edit .block-title > strong,
.customer-account-edit .legend > span,
.customer-address-form .block-title > strong,
.customer-address-form .legend > span,
.customer-address-index .block-title > strong,
.customer-address-index .legend > span,
.account .block-title > strong,
.account .legend > span {
  font-weight: 700;
}
.customer-account-login .block-content,
.customer-account-create .block-content,
.customer-account-forgotpassword .block-content,
.customer-account-edit .block-content,
.customer-address-form .block-content,
.customer-address-index .block-content,
.account .block-content {
  margin: 0;
}
.customer-account-login .field,
.customer-account-create .field,
.customer-account-forgotpassword .field,
.customer-account-edit .field,
.customer-address-form .field,
.customer-address-index .field,
.account .field {
  margin-bottom: 16px;
}
.customer-account-login .field .label,
.customer-account-create .field .label,
.customer-account-forgotpassword .field .label,
.customer-account-edit .field .label,
.customer-address-form .field .label,
.customer-address-index .field .label,
.account .field .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700);
}
.customer-account-login input[type=text],
.customer-account-login input[type=email],
.customer-account-login input[type=password],
.customer-account-login input[type=tel],
.customer-account-login select,
.customer-account-login textarea,
.customer-account-create input[type=text],
.customer-account-create input[type=email],
.customer-account-create input[type=password],
.customer-account-create input[type=tel],
.customer-account-create select,
.customer-account-create textarea,
.customer-account-forgotpassword input[type=text],
.customer-account-forgotpassword input[type=email],
.customer-account-forgotpassword input[type=password],
.customer-account-forgotpassword input[type=tel],
.customer-account-forgotpassword select,
.customer-account-forgotpassword textarea,
.customer-account-edit input[type=text],
.customer-account-edit input[type=email],
.customer-account-edit input[type=password],
.customer-account-edit input[type=tel],
.customer-account-edit select,
.customer-account-edit textarea,
.customer-address-form input[type=text],
.customer-address-form input[type=email],
.customer-address-form input[type=password],
.customer-address-form input[type=tel],
.customer-address-form select,
.customer-address-form textarea,
.customer-address-index input[type=text],
.customer-address-index input[type=email],
.customer-address-index input[type=password],
.customer-address-index input[type=tel],
.customer-address-index select,
.customer-address-index textarea,
.account input[type=text],
.account input[type=email],
.account input[type=password],
.account input[type=tel],
.account select,
.account textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 11px 12px;
  font: inherit;
  background: var(--white);
}
.customer-account-login input:focus, .customer-account-login select:focus, .customer-account-login textarea:focus,
.customer-account-create input:focus,
.customer-account-create select:focus,
.customer-account-create textarea:focus,
.customer-account-forgotpassword input:focus,
.customer-account-forgotpassword select:focus,
.customer-account-forgotpassword textarea:focus,
.customer-account-edit input:focus,
.customer-account-edit select:focus,
.customer-account-edit textarea:focus,
.customer-address-form input:focus,
.customer-address-form select:focus,
.customer-address-form textarea:focus,
.customer-address-index input:focus,
.customer-address-index select:focus,
.customer-address-index textarea:focus,
.account input:focus,
.account select:focus,
.account textarea:focus {
  outline: 2px solid var(--navy-700);
  outline-offset: 1px;
  border-color: var(--navy-700);
}
.customer-account-login,
.customer-account-create,
.customer-account-forgotpassword,
.customer-account-edit,
.customer-address-form,
.customer-address-index,
.account {
  /* Buttons. Magento's own classes, given the site's look. */
}
.customer-account-login .actions-toolbar,
.customer-account-create .actions-toolbar,
.customer-account-forgotpassword .actions-toolbar,
.customer-account-edit .actions-toolbar,
.customer-address-form .actions-toolbar,
.customer-address-index .actions-toolbar,
.account .actions-toolbar {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.customer-account-login .actions-toolbar .primary,
.customer-account-login .actions-toolbar .secondary,
.customer-account-create .actions-toolbar .primary,
.customer-account-create .actions-toolbar .secondary,
.customer-account-forgotpassword .actions-toolbar .primary,
.customer-account-forgotpassword .actions-toolbar .secondary,
.customer-account-edit .actions-toolbar .primary,
.customer-account-edit .actions-toolbar .secondary,
.customer-address-form .actions-toolbar .primary,
.customer-address-form .actions-toolbar .secondary,
.customer-address-index .actions-toolbar .primary,
.customer-address-index .actions-toolbar .secondary,
.account .actions-toolbar .primary,
.account .actions-toolbar .secondary {
  float: none;
  margin: 0;
}
.customer-account-login .actions-toolbar button.action.primary,
.customer-account-login .actions-toolbar .action.primary,
.customer-account-create .actions-toolbar button.action.primary,
.customer-account-create .actions-toolbar .action.primary,
.customer-account-forgotpassword .actions-toolbar button.action.primary,
.customer-account-forgotpassword .actions-toolbar .action.primary,
.customer-account-edit .actions-toolbar button.action.primary,
.customer-account-edit .actions-toolbar .action.primary,
.customer-address-form .actions-toolbar button.action.primary,
.customer-address-form .actions-toolbar .action.primary,
.customer-address-index .actions-toolbar button.action.primary,
.customer-address-index .actions-toolbar .action.primary,
.account .actions-toolbar button.action.primary,
.account .actions-toolbar .action.primary {
  background: var(--orange-500);
  border: 1px solid var(--orange-500);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 11px 22px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.customer-account-login .actions-toolbar button.action.primary:hover,
.customer-account-login .actions-toolbar .action.primary:hover,
.customer-account-create .actions-toolbar button.action.primary:hover,
.customer-account-create .actions-toolbar .action.primary:hover,
.customer-account-forgotpassword .actions-toolbar button.action.primary:hover,
.customer-account-forgotpassword .actions-toolbar .action.primary:hover,
.customer-account-edit .actions-toolbar button.action.primary:hover,
.customer-account-edit .actions-toolbar .action.primary:hover,
.customer-address-form .actions-toolbar button.action.primary:hover,
.customer-address-form .actions-toolbar .action.primary:hover,
.customer-address-index .actions-toolbar button.action.primary:hover,
.customer-address-index .actions-toolbar .action.primary:hover,
.account .actions-toolbar button.action.primary:hover,
.account .actions-toolbar .action.primary:hover {
  background: var(--orange-600);
  border-color: var(--orange-600);
}
.customer-account-login .actions-toolbar .action.secondary,
.customer-account-login .actions-toolbar a.action:not(.primary),
.customer-account-create .actions-toolbar .action.secondary,
.customer-account-create .actions-toolbar a.action:not(.primary),
.customer-account-forgotpassword .actions-toolbar .action.secondary,
.customer-account-forgotpassword .actions-toolbar a.action:not(.primary),
.customer-account-edit .actions-toolbar .action.secondary,
.customer-account-edit .actions-toolbar a.action:not(.primary),
.customer-address-form .actions-toolbar .action.secondary,
.customer-address-form .actions-toolbar a.action:not(.primary),
.customer-address-index .actions-toolbar .action.secondary,
.customer-address-index .actions-toolbar a.action:not(.primary),
.account .actions-toolbar .action.secondary,
.account .actions-toolbar a.action:not(.primary) {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--ink-800);
  border-radius: var(--r-md);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
}
.customer-account-login .actions-toolbar a.action.remind,
.customer-account-login .actions-toolbar a.action.back,
.customer-account-create .actions-toolbar a.action.remind,
.customer-account-create .actions-toolbar a.action.back,
.customer-account-forgotpassword .actions-toolbar a.action.remind,
.customer-account-forgotpassword .actions-toolbar a.action.back,
.customer-account-edit .actions-toolbar a.action.remind,
.customer-account-edit .actions-toolbar a.action.back,
.customer-address-form .actions-toolbar a.action.remind,
.customer-address-form .actions-toolbar a.action.back,
.customer-address-index .actions-toolbar a.action.remind,
.customer-address-index .actions-toolbar a.action.back,
.account .actions-toolbar a.action.remind,
.account .actions-toolbar a.action.back {
  border: 0;
  padding: 0;
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: underline;
}

/* --- Sign in ---

   Two columns made a poor pair: the sign-in form is twice the height of the
   sentence beside it, so the boxes never matched. One card at a readable
   measure, with the offer to register as a quiet strip under it. --- */
.customer-account-login .login-container {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

/* Zeroing the card margin here beat the gap set on the registration strip
   below -- three classes to its two -- so the two boxes met with no space
   between them. Only the top card is flattened. */
.customer-account-login .login-container .block {
  float: none;
  width: auto;
}

.customer-account-login .login-container .block-customer-login {
  margin: 0;
}

.customer-account-login .block-customer-login {
  padding: 28px;
}

.customer-account-login .block-customer-login .block-title {
  display: block;
}

.customer-account-login .block-customer-login .actions-toolbar {
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

.customer-account-login .block-customer-login .actions-toolbar .primary {
  width: 100%;
}

.customer-account-login .block-customer-login button.action.login {
  width: 100%;
  justify-content: center;
}

.customer-account-login .block-customer-login .actions-toolbar .secondary {
  text-align: center;
}

/* The registration prompt: one line and a button, so it does not pretend to
   be a second form. */
.customer-account-login .login-container .block-new-customer {
  margin: 16px 0 0;
  padding: 18px 28px;
  text-align: center;
  background: var(--ink-50);
}

.customer-account-login .block-new-customer .block-title {
  font-size: 15px;
  margin-bottom: 6px;
}

.customer-account-login .block-new-customer .block-content p {
  font-size: 13.5px;
  color: var(--ink-600);
  margin: 0 0 14px;
}

.customer-account-login .block-new-customer .actions-toolbar {
  margin-top: 0;
  justify-content: center;
}

.customer-account-login .block-new-customer .action.create {
  background: transparent;
  border: 1px solid var(--navy-700);
  color: var(--navy-900);
}

.customer-account-login .block-new-customer .action.create:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}

/* The notice above the form, which Magento prints as a plain paragraph. */
.customer-account-login .message.notice,
.customer-account-create .message.notice {
  max-width: var(--container);
  margin: 0 auto 20px;
  border-radius: var(--r-md);
}

/* The single-form pages centre their heading over the form; the dashboard
   keeps its heading at the left, above the rail. */
.customer-account-login .page-title-wrapper,
.customer-account-create .page-title-wrapper,
.customer-account-forgotpassword .page-title-wrapper {
  text-align: center;
}

.customer-account-forgotpassword .form.password.forget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}

.customer-account-forgotpassword .form.password.forget .fieldset > .field.note {
  margin-bottom: 16px;
}

.customer-account-create .form-create-account,
.customer-account-forgotpassword .form.password.forget,
.customer-account-edit .form-edit-account,
.customer-address-form .form-address-edit {
  max-width: 720px;
  margin: 0 auto;
}

/* Account Information.

   Luma lays this form out in two 48% columns: the details on the left and the
   email and password fields on the right. The right column is hidden until
   "Change Email" or "Change Password" is ticked, so the page opens with one
   card at half width and a lot of space beside it. Each fieldset takes the
   full measure and they stack. */
.customer-account-edit .form-edit-account {
  max-width: 800px;
}

.customer-account-edit .form-edit-account > .fieldset {
  width: auto !important;
  float: none !important;
}

/* Magento prints an empty fieldset for third-party fields; with a card around
   it, it showed as a blank box under the form. */
.customer-account-edit .form-edit-account > .fieldset.additional_info:not(:has(.field)) {
  display: none;
}

.customer-account-create .form-create-account > .fieldset {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin: 0 0 20px;
}

.customer-account-create .form-create-account .field-name-firstname,
.customer-account-create .form-create-account .field-name-lastname {
  margin-bottom: 16px;
}

/* --- Dashboard: the account menu as a rail beside the content --- */
/* Only where there is a menu to put beside it. The address form carries the
   same body class with no sidebar at all, and a two-track grid squeezed it
   into the 250px meant for the rail. */
.account .columns:has(> .sidebar-main) {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* _global.scss hides the title on every account page with body.account, which
   outweighs the rule above. Each page is left without a heading of any kind,
   so it is put back at the same weight. */
body.account .page-title-wrapper {
  display: block;
}

/* Luma's clearfix on .columns is a grid item here: ::after carries a space
   and took the second cell, which pushed the content onto a second row in the
   narrow track -- the menu filling the page and the dashboard squeezed into
   250px. The category pages clear the same pair for the same reason. */
.account .columns::before,
.account .columns::after {
  content: none;
  display: none;
}

/* Magento prints the content before the menu, so the grid handed the narrow
   track to the content and the wide one to the menu. The menu is moved into
   the first track rather than the markup being fought. */
.account .columns > .sidebar-main {
  order: -1;
}

.account .columns > .sidebar-main,
.account .columns > .sidebar-additional {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.account .columns > .sidebar-additional {
  display: none;
}

.account .columns > .column.main {
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  min-width: 0;
}

.account .block-collapsible-nav {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 8px;
  position: sticky;
  top: calc(var(--header-h) + 16px);
}

.account .block-collapsible-nav .content {
  background: transparent;
  padding: 0;
}

.account .block-collapsible-nav .item {
  margin: 0;
}

.account .block-collapsible-nav .item a,
.account .block-collapsible-nav .item > strong {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  border: 0;
  text-decoration: none;
}

.account .block-collapsible-nav .item a:hover {
  background: var(--ink-50);
  color: var(--navy-900);
}

.account .block-collapsible-nav .item.current a,
.account .block-collapsible-nav .item.current > strong {
  background: var(--navy-50);
  color: var(--navy-900);
  border-left: 0;
}

/* Magento's account menu is a <ul>, and Luma's list reset does not reach it
   here, so every link carried a bullet. */
.account .block-collapsible-nav .nav.items,
.account .block-collapsible-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Dashboard panels sit two to a row where there is room. */
.account .block-dashboard-info .box,
.account .block-dashboard-addresses .box {
  width: auto;
  float: none;
  margin: 0 0 16px;
}

.account .block-dashboard-info .block-content,
.account .block-dashboard-addresses .block-content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* The same clearfix, one level down: it took a cell of its own and left the
   boxes sitting in the wrong halves of the card. Luma declares these inside a
   desktop media query, which wins on order at equal weight, so they are
   forced here. */
.account .block-content::before,
.account .block-content::after,
.account .box::before,
.account .box::after {
  content: none !important;
  display: none !important;
}

/* Luma also gives each box 48% and floats it, which left them at half the
   width of the track they sit in. */
.account .block-content > .box {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

.account .box-title > span {
  font-weight: 700;
  color: var(--ink-900);
  display: block;
  margin-bottom: 6px;
}

/* Orders and address tables. */
.account .table-wrapper {
  overflow-x: auto;
  margin: 0;
}

.account table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.account table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border);
  padding: 10px 12px;
}

.account table td {
  border-bottom: 1px solid var(--border);
  padding: 12px;
  color: var(--ink-800);
}

@media (max-width: 880px) {
  .customer-account-login .login-container {
    grid-template-columns: minmax(0, 1fr);
  }
  .account .columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .account .block-collapsible-nav {
    position: static;
  }
  .account .block-dashboard-info .block-content,
  .account .block-dashboard-addresses .block-content {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* ============================================================
   The 404.

   Magento renders it from the no-route CMS page in its own one-column layout,
   so it gets none of the page furniture the rest of the site has.
   ============================================================ */
/*
 * Left, under the title, not centred. The heading is Magento's own
 * `.page-title-wrapper`, which runs the full width of the column and starts at
 * the left margin like every other heading on the site. Centring the body
 * below it left the two of them on opposite sides of the page.
 *
 * The 640px measure stays: it is the line length the rest of the prose pages
 * read at.
 */
.cms-sys-page {
  max-width: 640px;
  padding: 8px 0 56px;
}

.cms-sys-page p {
  margin: 0 0 16px;
  color: var(--ink-700);
}

.cms-sys-page__lede {
  font-size: 18px;
  color: var(--ink-900);
}

.cms-sys-page__links {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cms-sys-page__links a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-800);
  text-decoration: none;
}

.cms-sys-page__links a:hover {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}

.cms-no-route .page-title-wrapper {
  padding: 32px 0 0;
}