@charset "UTF-8";
/*
 * Web Fonts from colophon-foundry.org
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased from Colophon Foundry. The fonts are protected under domestic and international trademark and copyright law. You are prohibited from modifying, reverse engineering, duplicating, or distributing this font software.
 *
 * (c) 2017 Colophon Foundry
 *
 * Licenced to Mateusz Piekarski Gunter Piekarski Ltd
 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

svg {
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  padding: 0;
  border: 0 none;
  border-radius: 0;
  background: none;
}

/* Reset headings for custom fonts */
h1, h2, h3, h4, h5 {
  font-weight: normal;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Remove _all_ animations and transitions for people that prefer not to see them */
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
  position: relative;
}
.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* ---- draggable ---- */
.flickity-enabled.is-draggable {
  tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}
.flickity-button:hover {
  cursor: pointer;
}
.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}
.flickity-button:active {
  opacity: 0.6;
}
.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  width: 1.5rem;
  height: 1.5rem;
}
.flickity-prev-next-button.previous {
  order: 2;
}
.flickity-rtl .flickity-prev-next-button.previous {
  order: 4;
}
.flickity-prev-next-button.next {
  order: 4;
}
.flickity-rtl .flickity-prev-next-button.next {
  order: 2;
}
.flickity-prev-next-button .flickity-button-icon {
  fill: currentColor;
}

/* ---- page dots ---- */
.flickity-page-dots {
  order: 3;
  bottom: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}
.flickity-rtl .flickity-page-dots {
  direction: rtl;
}
.flickity-page-dots .dot {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.25rem;
  opacity: 0.25;
  cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
  opacity: 1;
}
.flickity-page-dots .dot:after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.button-base {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
}
.button-base:link, .button-base:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-base:is(button) {
    cursor: pointer;
  }
}

.button {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: ReaderMedium;
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button:link, .button:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}
.button--alt {
  background-color: var(--black);
  color: var(--white);
}
@media only screen and (min-width: 768px) {
  .button {
    padding: 0.875rem 1.5rem 0.6875rem;
  }
}

.button-small {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: ReaderMedium;
  font-size: 0.625rem;
  letter-spacing: 1.2px;
  line-height: 1rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button-small:link, .button-small:visited {
  text-decoration: none;
}
.button-small--alt {
  background-color: var(--black);
  color: var(--white);
}

.button-large {
  position: relative;
  display: inline-block;
  color: inherit;
  border: 1px solid var(--black);
  border-radius: 1.5rem;
  padding: 0.625rem 1.5rem 0.5625rem;
  text-align: center;
  font-family: ReaderMedium;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
}
.button-large:link, .button-large:visited {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .button-large {
    padding: 0.875rem 1.5rem 0.6875rem;
  }
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@font-face {
  font-family: Reader;
  src: url("/library/fonts/reader-regular-pro-web/reader-regular-pro.eot");
  src: url("/library/fonts/reader-regular-pro-web/reader-regular-pro.eot?#iefix") format("embedded-opentype"), url("/library/fonts/reader-regular-pro-web/reader-regular-pro.woff") format("woff"), url("/library/fonts/reader-regular-pro-web/reader-regular-pro.woff2") format("woff2"), url("/library/fonts/reader-regular-pro-web/reader-regular-pro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: ReaderMedium;
  src: url("/library/fonts/reader-medium-pro-web/reader-medium-pro.eot");
  src: url("/library/fonts/reader-medium-pro-web/reader-medium-pro.eot?#iefix") format("embedded-opentype"), url("/library/fonts/reader-medium-pro-web/reader-medium-pro.woff") format("woff"), url("/library/fonts/reader-medium-pro-web/reader-medium-pro.woff2") format("woff2"), url("/library/fonts/reader-medium-pro-web/reader-medium-pro.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
:root {
  --black: #1A1A1A;
  --black_rgb: 26, 26, 26;
  --white: #FFFFFF;
  --white_rgb: 255, 255, 255;
  --grey: #8C8C8C;
  --grey_rgb: 140, 140, 140;
  --green: #616B55;
  --green_rgb: 97, 107, 85;
  --red: #AB2A09;
  --red_rgb: 171, 42, 9;
  --placeholder: #C5C5C5;
  --placeholder_rgb: 197, 197, 197;
  --beige: #DBD5CD;
  --beige_rgb: 219, 213, 205;
  --offwhite: #F6F4F2;
  --offwhite_rgb: 246, 244, 242;
  --lightbeige: #ECEAE6;
  --lightbeige_rgb: 236, 234, 230;
  --error: #D10000;
  --error_rgb: 209, 0, 0;
  --adminbg: #DBD5CD;
  --adminbg_rgb: 219, 213, 205;
}

body {
  background: var(--offwhite);
  font-family: Reader;
  --mb: 1.5rem;
  font-size: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.5rem;
}
@media only screen and (min-width: 768px) {
  body {
    --mb: 1.6875rem;
    font-size: 1.125rem;
    line-height: 1.6875rem;
  }
}

.shop {
  padding-top: 8rem;
}
@media only screen and (min-width: 768px) {
  .shop {
    padding: 5rem 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}

.news {
  padding-top: 8rem;
}
@media only screen and (min-width: 768px) {
  .news {
    padding-top: 5rem;
  }
}

.modules {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 3rem;
  padding-bottom: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules {
    row-gap: 6rem;
    padding-bottom: 6rem;
  }
}
.shop .sidebar ~ .modules {
  row-gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .shop .sidebar ~ .modules {
    grid-column: 4/span 13;
    row-gap: 3rem;
  }
}
.shop ~ .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .shop ~ .modules {
    margin-top: 6rem;
  }
}
.modules + .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules + .modules {
    margin-top: 6rem;
  }
}
.cart__form + .modules {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .cart__form + .modules {
    margin-top: 6rem;
  }
}
.modules .simple-text--h2 + .module,
.modules .product-featured-title + .module {
  margin-top: -1.5rem;
}
@media only screen and (min-width: 768px) {
  .modules .simple-text--h2 + .module,
  .modules .product-featured-title + .module {
    margin-top: -3rem;
  }
}
.modules + .cart-footer {
  margin-top: 3rem;
}
@media only screen and (min-width: 768px) {
  .modules + .cart-footer {
    margin-top: 6rem;
  }
}

.ratio-box {
  padding-bottom: var(--pad);
  position: relative;
}
.ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

:link,
:visited {
  color: currentColor;
  text-decoration-color: var(--placeholder);
  text-underline-offset: 2px;
}

.link:link,
.link:visited {
  text-underline-offset: 5px;
}

.pagination {
  font-family: Reader;
  font-size: 0.75;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  padding: 0 1rem;
  margin: 2.5rem 0;
}
@media only screen and (min-width: 768px) {
  .pagination {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
@media only screen and (min-width: 768px) {
  .pagination {
    padding: 0 1.5rem;
  }
}
.pagination nav {
  border-top: 1px solid var(--placeholder);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pagination__prev, .pagination__next {
  flex-grow: 1;
}
.pagination__prev:not(a), .pagination__next:not(a) {
  opacity: 0.25;
}
.pagination__prev:before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat 50% url("data:image/svg+xml,%3Csvg width='8' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 1.41 6 0 0 6l6 6 1.41-1.41L2.83 6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
  vertical-align: middle;
}
.pagination__nums {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pagination__nums {
    display: flex;
    justify-content: center;
  }
  .pagination__nums a, .pagination__nums span, .pagination__nums i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    padding-top: 3px;
  }
  .pagination__nums span {
    border: 1px solid;
    border-radius: 50%;
  }
}
.pagination__next {
  text-align: right;
}
.pagination__next:after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: no-repeat 50% url("data:image/svg+xml,%3Csvg width='8' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 0 .59 1.41 5.17 6 .59 10.59 2 12l6-6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
  vertical-align: middle;
}
.pagination :link,
.pagination :visited {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .tape {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
  }
  .tape-unit {
    height: calc(100% / var(--units));
  }
  .tape-unit.seen {
    background-color: red;
  }
}

@media only screen and (min-width: 768px) {
  .flash-notices {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    padding-bottom: 1rem;
  }
}
.flash-notices__notice {
  color: var(--green);
}
@media only screen and (min-width: 768px) {
  .flash-notices__notice {
    grid-column: 2/span 6;
  }
}
.flash-notices__notice--error {
  color: var(--red);
}

.sale-banner {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--lightbeige);
  width: 2.625rem;
  height: 2.625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  z-index: 1;
  border-radius: 50%;
  padding-left: 1.2px;
  -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 1024px) {
  .sale-banner {
    font-family: ReaderMedium;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    line-height: 1.125rem;
    letter-spacing: 4px;
    padding-left: 4px;
    top: 1.25rem;
    right: 1.25rem;
    width: 3.75rem;
    height: 3.75rem;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 768px) {
  .sale-banner {
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}

.header {
  padding: var(--header-wrp);
  position: fixed;
  top: 0;
  transition: top 0.3s ease, padding-top 0.3s ease;
  width: 100%;
  z-index: 5;
}
:root {
  --header-wrp: 0.5rem;
  --header-pad: 1rem;
  --header-row: 1.5625rem;
  --top-pad: calc(
    calc(var(--header-wrp) * 2) +
    calc(var(--header-pad) * 2) +
    var(--header-row)
  );
}
@media only screen and (min-width: 768px) {
  :root {
    --header-pad-top: 1.5rem;
    --header-row-top: 2.5rem;
    --header-row-gap: 1.125rem;
    --header-row-btm: 1.75rem;
    --header-pad-btm: 1.125rem;
    --top-pad: calc(
      var(--header-pad-top) +
      var(--header-row-top) +
      var(--header-row-gap) +
      var(--header-row-btm) +
      var(--header-pad-btm)
    );
    --top-row-only: calc(
      var(--header-pad-top) +
      var(--header-row-top)
    );
    --btm-row-only: calc(
      var(--header-row-gap) +
      var(--header-row-btm) +
      var(--header-pad-btm)
    );
  }
}

@media only screen and (min-width: 768px) {
  .header {
    padding: 0rem;
    position: -webkit-sticky;
    position: sticky;
    top: calc(-1 * var(--top-row-only));
  }
}
.has-banner .header {
  top: 2rem;
}
@media only screen and (min-width: 768px) {
  .has-banner .header {
    top: calc(-1 * var(--top-row-only));
    padding-top: 2.25rem;
  }
}
.header:before {
  content: "";
  opacity: 0;
  transition: opacity 0.3s ease;
  background: rgba(var(--black_rgb), 0.5);
}
.header.open-sub:before {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 1;
}
.header.open-sub .nav__item:not([open]),
.header.open-sub .menu-sheet-search:not([open]),
.header.open-sub .header__cart,
.header.open-sub .header__book {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.header__wrapper {
  background-color: var(--white, #FFF);
  padding: var(--header-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  align-items: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .header__wrapper {
    row-gap: var(--header-row-gap);
    padding: var(--header-pad-top) 1.5rem var(--header-pad-btm);
    grid-template-columns: repeat(16, 1fr);
  }
}
.header__header {
  grid-column: 2/span 2;
  grid-row: 1;
}
@media only screen and (min-width: 768px) {
  .header__header {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    grid-column: 1/span 16;
    height: var(--header-row-top);
    border-bottom: 1px solid var(--grey);
  }
}
.header__header h1 {
  height: var(--header-row);
  transform: translateY(3px);
}
@media only screen and (min-width: 768px) {
  .header__header h1 {
    height: 2.16375rem;
    grid-column: 7/span 4;
    transform: translateY(0);
  }
}
.header__header h1 svg {
  height: 100%;
  margin: auto;
}
.header__time-weather {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header__time-weather {
    display: flex;
    font-family: ReaderMedium;
    font-size: 0.75rem;
    letter-spacing: 1.2px;
    line-height: 1.125rem;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    color: var(--grey);
    grid-column: 1/span 6;
    grid-row: 1;
  }
  .header__time-weather:last-child {
    grid-column: 11/span 6;
    justify-content: flex-end;
  }
}
.header__time-weather a,
.header__time-weather span,
.header__time-weather live-time {
  white-space: nowrap;
}
.header__time-weather a svg,
.header__time-weather span svg,
.header__time-weather live-time svg {
  display: block;
  width: 1.0625rem;
  margin: -1px 0.5rem 0;
}
.header__time-weather a:link, .header__time-weather a:visited,
.header__time-weather span:link,
.header__time-weather span:visited,
.header__time-weather live-time:link,
.header__time-weather live-time:visited {
  text-decoration: none;
}
.header__time-weather live-time span {
  animation: 1s linear infinite blink;
}
.header__menu-drawer {
  grid-column: 1;
  grid-row: 1;
}
@media only screen and (min-width: 768px) {
  .header__menu-drawer {
    display: none;
  }
}
.header__menu-sheet {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header__menu-sheet {
    display: block;
    grid-column: 1/span 15;
    grid-row: 2;
  }
}
.header__buttons {
  grid-column: 4;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
}
@media only screen and (min-width: 768px) {
  .header__buttons {
    grid-column: 16;
    grid-row: 2;
  }
}
.header__cart, .header__book {
  display: block;
  width: var(--header-row);
  height: var(--header-row);
  border: 1px solid var(--black);
  border-radius: 100%;
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  line-height: 1rem;
}
@media only screen and (min-width: 768px) {
  .header__cart, .header__book {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .header__cart, .header__book {
    width: var(--header-row-btm);
    height: var(--header-row-btm);
    transition: opacity 0s;
  }
}
.header__cart svg, .header__book svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.header__cart {
  margin-left: 0.625rem;
}
@media only screen and (min-width: 768px) {
  .header__cart {
    background: var(--black);
  }
}
.header__cart:link, .header__cart:visited {
  text-decoration: none;
  color: currentColor;
}
@media only screen and (min-width: 768px) {
  .header__cart:link, .header__cart:visited {
    color: var(--white);
  }
}
.header__cart svg path {
  fill: var(--black);
}
@media only screen and (min-width: 768px) {
  .header__cart svg path {
    fill: var(--white);
  }
}
.header__cart-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.header__cart-qty {
  transform: translateX(0.75px) translateY(1px);
}
.header__book {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .header__book {
    cursor: pointer;
  }
}
.header__book svg path {
  fill: var(--black);
}

@keyframes blink {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}
.hamburger {
  display: block;
  width: 1.5625rem;
  cursor: pointer;
  color: inherit;
  border: 0;
  margin: 0;
}
.hamburger::-webkit-details-marker {
  display: none;
}
.hamburger__box {
  display: block;
  height: 1.5625rem;
  position: relative;
}
.hamburger__inner {
  display: block;
  top: 50%;
  margin-top: -0.5px;
}
.hamburger__inner, .hamburger__inner::before, .hamburger__inner::after {
  content: "";
  display: block;
  width: 1.5625rem;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-drawer[open] .hamburger__inner, .menu-drawer[open] .hamburger__inner::before, .menu-drawer[open] .hamburger__inner::after {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger__inner::before {
  top: -7px;
  transition: top 0.075s 0.12s ease;
}
.menu-drawer[open] .hamburger__inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.075s ease;
}
.hamburger__inner::after {
  bottom: -7px;
  transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.menu-drawer[open] .hamburger__inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media only screen and (min-width: 768px) {
  .menu-drawer {
    height: auto;
  }
}
.menu-drawer__contents {
  position: absolute;
  top: 100%;
  left: 0;
  height: 0;
  width: 100%;
  background-color: var(--white);
  padding: var(--header-ip);
  transition: height 0.195s ease;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.menu-drawer[open] .menu-drawer__contents {
  height: calc(100vh - (var(--header-su) + var(--header-ip) * 2 + var(--header-op) * 2));
}

.nav {
  display: none;
  font-family: ReaderMedium;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}
.nav--drawer {
  display: block;
  height: 100%;
  padding: 0 1rem 1rem;
}
@media only screen and (min-width: 768px) {
  .nav {
    display: block;
    grid-column: 2/span 14;
  }
}
.nav__top-nav {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 768px) {
  .nav__top-nav {
    position: static;
  }
  .nav--sheet .nav__top-nav {
    flex-direction: row;
    justify-content: center;
  }
}
.nav__sub-nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--white);
  padding-bottom: 1.5rem;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  .nav__sub-nav {
    padding: 1.625rem 1.5rem 1.5rem;
    top: 100%;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    align-items: start;
    font-family: Reader;
    --mb: 1.5rem;
    font-size: 1rem;
    letter-spacing: 0.5px;
    line-height: 1.5rem;
    text-transform: none;
    transform: translate(0, -100%);
    transition: transform 0.3s ease;
    z-index: -1;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .nav__sub-nav {
    --mb: 1.6875rem;
    font-size: 1.125rem;
    line-height: 1.6875rem;
  }
}
@media only screen and (min-width: 768px) {
  .nav__sub-nav.open {
    transform: translate(0, 0%);
  }
}
.nav summary {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .nav ul li, .nav__item li {
    padding: 1rem 0 0.8125rem;
    border-top: 1px solid var(--placeholder);
  }
  .nav ul li:last-child, .nav__item li:last-child {
    border-bottom: 1px solid var(--placeholder);
  }
}
@media only screen and (min-width: 768px) {
  .nav ul, .nav__item {
    display: flex;
    transition: opacity 0s;
  }
  .nav ul ul, .nav__item ul {
    grid-column: 1/span 6;
    flex-wrap: wrap;
  }
}
.nav__sub-item, .nav__item {
  padding: 1rem 0 0.75rem;
  border-bottom: 1px solid var(--grey);
}
.nav__sub-item:first-child, .nav__item:first-child {
  border-top: 1px solid var(--grey);
}
@media only screen and (min-width: 768px) {
  .nav__sub-item, .nav__item {
    padding: 0;
    border: 0 none;
    margin: 0 12px;
  }
  .nav__sub-item:first-child, .nav__item:first-child {
    border: 0 none;
  }
  .nav__sub-item.util-link, .nav__item.util-link {
    font-family: ReaderMedium;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 1.5px;
    line-height: 1rem;
    position: absolute;
    bottom: 1.1875rem;
    left: 1.5rem;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .nav__sub-item.util-link, .nav__item.util-link {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .nav__sub-item {
    width: 50%;
    margin: 0;
    transform: translateY(-10%);
    opacity: 0;
    transition: all 0s;
  }
  .open .nav__sub-item {
    transition: all 0.5s ease calc(0.1s * var(--loop));
    transform: translateY(0%);
    opacity: 1;
  }
}
.nav button {
  font-family: ReaderMedium;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  color: var(--grey);
  padding: 1rem 0 0.75rem;
  border-top: 1px solid var(--grey);
  width: 100%;
  text-align: left;
}
.nav :link,
.nav :visited {
  color: currentColor;
  text-decoration: none;
}
.nav :link.util-link,
.nav :visited.util-link {
  color: var(--grey);
}
.footer {
  position: relative;
  background: var(--lightbeige);
  font-family: Reader;
  --mb: 1.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .footer {
    --mb: 1.3125rem;
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer {
    padding: 0 0.5rem 0.5rem;
  }
}
.footer__info {
  padding: 1.5rem 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1.5rem;
  align-items: start;
}
@media only screen and (min-width: 768px) {
  .footer__info {
    grid-template-columns: repeat(16, 1fr);
    padding-bottom: 3rem;
  }
}
.footer__block nav {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.25rem;
}
.footer__block nav :link,
.footer__block nav :visited {
  display: inline-block;
  text-decoration: none;
}
.footer__block--news {
  grid-column: span 2;
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  margin-bottom: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__block--news {
    --mb: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer__block--news {
    grid-column: 1/span 5;
    grid-row: 1;
    margin-bottom: 1.5rem;
  }
}
.footer__block--news p {
  margin-bottom: 1.5rem;
}
.footer__block--news p.error {
  color: var(--red);
}
.footer__block--tp, .footer__block--r {
  grid-column: span 2;
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--placeholder);
}
@media only screen and (min-width: 768px) {
  .footer__block--tp, .footer__block--r {
    grid-column: 1/1;
    grid-row: 2;
    align-self: end;
    border-bottom: 0 none;
    padding-bottom: 0;
  }
}
.footer__block--tp svg, .footer__block--r svg {
  display: inline-block;
  vertical-align: sub;
}
@media only screen and (min-width: 768px) {
  .footer__block--r {
    grid-row: 1/span 2;
  }
}
@media only screen and (min-width: 768px) {
  .footer__block--tp {
    grid-column: 2/span 4;
  }
}
.footer__block--tp svg {
  width: 98px;
}
@media only screen and (min-width: 768px) {
  .footer__block--nav-1, .footer__block--nav-2, .footer__block--nav-3 {
    grid-column: span 3;
  }
}
@media only screen and (min-width: 768px) {
  .footer__block--nav-1 {
    grid-column: 8/span 3;
  }
}
.footer__block--nav-4 {
  align-self: end;
}
@media only screen and (min-width: 768px) {
  .footer__block--nav-4 {
    grid-column: 14/span 3;
    grid-row: 2;
  }
}
.footer__block--hours {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  align-items: center;
}
@media only screen and (min-width: 768px) {
  .footer__block--hours {
    grid-column: 8/span 6;
  }
}
.footer__block--hours a {
  font-family: Reader;
  --mb: 1.125rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  display: inline-flex;
  align-items: center;
  margin-right: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__block--hours a {
    --mb: 1.3125rem;
    font-size: 0.875rem;
    line-height: 1.3125rem;
  }
}
.footer__block--hours a:before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--red);
  border-radius: 50%;
  margin-right: 0.25rem;
}
.footer__block--hours a.active:before {
  background-color: var(--green);
  animation: blink 1.5s infinite;
}
.footer__block--hours span {
  font-family: Reader;
  --mb: 0.9375rem;
  font-size: 0.625rem;
  letter-spacing: 0.5px;
  line-height: 0.9375rem;
}
@media only screen and (min-width: 768px) {
  .footer__block--hours span {
    --mb: 1.125rem;
    font-size: 0.75rem;
    line-height: 1.125rem;
  }
}
.footer__h1 {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  margin-bottom: 1rem;
}
.footer__h2 {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  line-height: 1rem;
  margin-bottom: 0.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__h2 {
    font-size: 0.75rem;
  }
}
@media only screen and (min-width: 768px) {
  .footer__h2 {
    margin-bottom: 1rem;
  }
}
.footer__foot {
  padding: 1.5rem 1rem 1rem;
  background: var(--white);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .footer__foot {
    grid-template-columns: repeat(16, 1fr);
    padding: 1rem;
    align-items: center;
  }
}
.footer__foot nav {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 0.25rem;
  grid-auto-flow: column;
  font-family: Reader;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .footer__foot nav {
    grid-row: 1;
    grid-column: 8/span 7;
    display: flex;
  }
}
.footer__foot nav a {
  margin-right: 1.5rem;
}
.footer__foot nav a:last-child {
  margin-right: 0;
}
@media only screen and (max-width: 767px) {
  .footer__foot nav a:nth-child(n+5) {
    grid-column: 2;
  }
}
.footer__foot nav :link,
.footer__foot nav :visited {
  display: inline-block;
  text-decoration: none;
}
.footer__util {
  grid-column: 1;
}
.footer__socs {
  grid-column: 2;
}
.footer__cards {
  grid-column: span 2;
  display: flex;
}
@media only screen and (min-width: 768px) {
  .footer__cards {
    grid-row: 1;
    grid-column: 1/span 4;
  }
}
.footer__cards svg {
  display: block;
  width: 37px;
  margin-right: 1rem;
}
.footer__copy {
  font-family: Reader;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
}
@media only screen and (min-width: 768px) {
  .footer__copy {
    grid-row: 1;
    grid-column: 5/span 2;
  }
}
.footer__gp {
  font-family: Reader;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  line-height: 1.125rem;
  color: var(--grey);
  justify-self: end;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .footer__gp {
    grid-row: 1;
    grid-column: -3/span 2;
  }
}
.footer .subscribe-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.footer .subscribe-form input {
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  border-bottom: 1px solid var(--grey);
}
.footer .subscribe-form input::-moz-placeholder {
  color: var(--grey);
}
.footer .subscribe-form input::placeholder {
  color: var(--grey);
}
.footer .subscribe-form input:focus {
  outline: none;
}
.footer .subscribe-form input:focus-visible {
  border-color: var(--black);
}
.footer .subscribe-form input:focus-visible::-moz-placeholder {
  color: var(--beige);
}
.footer .subscribe-form input:focus-visible::placeholder {
  color: var(--beige);
}
.footer .subscribe-form input[type=email] {
  grid-column: span 3;
}
.footer .subscribe-form input[type=submit] {
  margin-right: auto;
  color: currentColor;
}
.footer .subscribe-form input[type=submit]:focus-visible {
  color: var(--grey);
}

the-hills {
  display: block;
  opacity: 0;
}
the-hills.animated {
  opacity: 1;
}
the-hills svg {
  display: block;
}

to-top {
  position: absolute;
  width: 1.75rem;
  height: 1.75rem;
  bottom: 7rem;
  right: 1.5rem;
  opacity: 0;
  transform: rotate(135deg);
  transition: all 1s ease;
  cursor: pointer;
}
to-top.show {
  opacity: 1;
  transform: rotate(0deg);
}

@keyframes blink {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.menu-drawer-search {
  border: 1px solid var(--grey);
  border-radius: 0.25rem;
  margin-top: auto;
}
.menu-drawer-search__field {
  display: flex;
  align-items: center;
}
.menu-drawer-search input[type=search] {
  padding: 1rem 0 0.75rem 1.25rem;
  flex-grow: 1;
}
.menu-drawer-search button {
  display: block;
  width: 3.75rem;
  height: 3.75rem;
  padding: 0.5rem;
  background: var(--black);
  color: var(--white);
  border: 1rem solid var(--white);
  border-radius: 100%;
}

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  border-left: 1px solid var(--grey);
  border-right: 1px solid var(--grey);
}
@media only screen and (min-width: 768px) {
  .features {
    grid-column: 8/span 9;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    margin: 0;
    border: 0 none;
  }
}
.features__feature {
  position: relative;
  width: 73.7%;
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 1.5px;
  line-height: 1rem;
}
@media only screen and (min-width: 768px) {
  .features__feature {
    grid-column: span 3;
    width: auto;
    transform: translateY(-10%);
    opacity: 0;
    transition: all 0s;
  }
  .open .features__feature {
    transition: all 0.75s ease calc(0.1s * var(--loop));
    transform: translateY(0%);
    opacity: 1;
  }
}
.features__feature:not(:first-child) {
  display: none;
}
@media only screen and (min-width: 768px) {
  .features__feature:not(:first-child) {
    display: block;
  }
}
.features__feature a, .features__feature span {
  display: block;
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.25rem;
  padding: 0.75rem 0.5rem 0.6875rem;
  text-align: center;
  background: var(--white);
}

.menu-sheet {
  display: none;
}
@media only screen and (min-width: 768px) {
  .menu-sheet {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    align-items: center;
  }
}

.menu-sheet-search {
  display: none;
}
@media only screen and (min-width: 768px) {
  .menu-sheet-search {
    display: block;
    transition: opacity 0s;
  }
  .menu-sheet-search summary {
    display: block;
    width: var(--header-row-btm);
    height: var(--header-row-btm);
    padding: 7px;
    border: 1px solid var(--black);
    background: var(--black);
    color: var(--white);
    border-radius: 100%;
    cursor: pointer;
  }
  .menu-sheet-search > div {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--white);
    padding: 8.25rem 1.5rem 1.125rem;
    transform: translate(0, -100%);
    transition: transform 0.3s ease;
    z-index: -1;
  }
  .menu-sheet-search > div.open {
    transform: translate(0, 0%);
  }
  .menu-sheet-search form {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
  .menu-sheet-search form:focus button {
    color: var(--black);
  }
  .menu-sheet-search input[type=search] {
    font-family: Reader;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    line-height: 2rem;
    grid-column: 1/span 7;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .menu-sheet-search input[type=search] {
    font-size: 3rem;
    line-height: 3.625rem;
  }
}
@media only screen and (min-width: 768px) {
  .menu-sheet-search input[type=search]::-moz-placeholder {
    color: var(--placeholder);
  }
  .menu-sheet-search input[type=search]::placeholder {
    color: var(--placeholder);
  }
  .menu-sheet-search input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1.02983433.30761196 18.05555559 18.05555558-.72222223.72222222L.30761211 1.02983418z'/%3E%3Cpath d='M.30761196 18.36316767 18.36316754.30761208l.72222222.72222223L1.02983418 19.08538989z'/%3E%3C/svg%3E");
    background-size: cover;
    cursor: pointer;
  }
  .menu-sheet-search input[type=search]:valid + button {
    color: var(--black);
  }
  .menu-sheet-search button {
    font-family: Reader;
    font-size: 1.5rem;
    letter-spacing: 0.5px;
    line-height: 2rem;
    color: var(--placeholder);
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .menu-sheet-search button {
    font-size: 3rem;
    line-height: 3.625rem;
  }
}

.sidebar {
  display: none;
}
@media only screen and (min-width: 768px) {
  .sidebar {
    display: block;
    grid-column: span 3;
  }
}
.sidebar__wrap {
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
}
@media only screen and (min-width: 768px) {
  .sidebar__wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 4rem;
  }
}
.sidebar__wrap > a {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  display: block;
  border-bottom: 1px solid var(--placeholder);
  padding: 1rem 2.5rem 0.875rem 0;
}
.sidebar details {
  border-bottom: 1px solid var(--placeholder);
  background: no-repeat calc(100% - 6px) 20.59px url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.sidebar details[open] {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41 7.41 6 2.83l4.59 4.58L12 6 6 0 0 6z' fill='%231A1A1A' fill-rule='nonzero'/%3E%3C/svg%3E");
}
.sidebar details li {
  margin-bottom: 0.5rem;
}
.sidebar details li :link,
.sidebar details li :visited {
  color: var(--grey);
}
.sidebar summary {
  font-family: ReaderMedium;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  line-height: 1.125rem;
  display: block;
  padding: 1rem 2.5rem 0.875rem 0;
}
@media only screen and (min-width: 768px) {
  .sidebar summary {
    cursor: pointer;
  }
}
.sidebar :link,
.sidebar :visited {
  text-decoration: none;
}

.product-popup__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--black_rgb), 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
  z-index: 99;
}
.product-popup__container {
  background-color: var(--white);
  padding: 2rem;
  width: 100%;
  max-width: 90%;
  max-height: calc(90 * var(--vh));
  overflow-y: auto;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .product-popup__container {
    max-width: 33%;
  }
}
.product-popup__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}
.product-popup__close {
  background: transparent;
  border: 0;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  cursor: pointer;
}
.product-popup__close:before {
  content: "✕";
}
.product-popup__content {
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
}
@media only screen and (min-width: 768px) {
  .product-popup__content {
    --mb: 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
  }
}
.product-popup__content p:not(:last-child) {
  margin-bottom: var(--mb);
}
.product-popup__field input, .product-popup__field textarea {
  padding-right: 3rem;
}
.product-popup__field:after {
  font-family: Reader;
  --mb: 1.3125rem;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  color: var(--placeholder);
  content: attr(data-maxlength);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 3rem;
}
.product-popup__field {
  border: 1px solid var(--grey);
  border-radius: 0.25rem;
  position: relative;
  -webkit-font-smothing: antialiased;
}
.product-popup__field:not(:last-child) {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 768px) {
  .product-popup__field {
    grid-column: span 7;
  }
}
.product-popup__field--email label, .product-popup__field--text label, .product-popup__field--textarea label {
  font-family: ReaderMedium;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 1rem;
  left: 1rem;
}
.product-popup__field--email input,
.product-popup__field--email select,
.product-popup__field--email textarea, .product-popup__field--text input,
.product-popup__field--text select,
.product-popup__field--text textarea, .product-popup__field--textarea input,
.product-popup__field--textarea select,
.product-popup__field--textarea textarea {
  font-family: ReaderMedium;
  font-size: 0.875rem;
  letter-spacing: 0.5px;
  line-height: 1.3125rem;
  display: block;
  width: 100%;
  padding: 1rem 1rem 0.875rem 1rem;
}
.product-popup__field--email input::-moz-placeholder, .product-popup__field--email select::-moz-placeholder, .product-popup__field--email textarea::-moz-placeholder, .product-popup__field--text input::-moz-placeholder, .product-popup__field--text select::-moz-placeholder, .product-popup__field--text textarea::-moz-placeholder, .product-popup__field--textarea input::-moz-placeholder, .product-popup__field--textarea select::-moz-placeholder, .product-popup__field--textarea textarea::-moz-placeholder {
  opacity: 0;
}
.product-popup__field--email input::placeholder,
.product-popup__field--email select::placeholder,
.product-popup__field--email textarea::placeholder, .product-popup__field--text input::placeholder,
.product-popup__field--text select::placeholder,
.product-popup__field--text textarea::placeholder, .product-popup__field--textarea input::placeholder,
.product-popup__field--textarea select::placeholder,
.product-popup__field--textarea textarea::placeholder {
  opacity: 0;
}
.product-popup__field--email input:not(:-moz-placeholder-shown) ~ label, .product-popup__field--email select:not(:-moz-placeholder-shown) ~ label, .product-popup__field--email textarea:not(:-moz-placeholder-shown) ~ label, .product-popup__field--text input:not(:-moz-placeholder-shown) ~ label, .product-popup__field--text select:not(:-moz-placeholder-shown) ~ label, .product-popup__field--text textarea:not(:-moz-placeholder-shown) ~ label, .product-popup__field--textarea input:not(:-moz-placeholder-shown) ~ label, .product-popup__field--textarea select:not(:-moz-placeholder-shown) ~ label, .product-popup__field--textarea textarea:not(:-moz-placeholder-shown) ~ label {
  transform: translateY(-1rem) scale(0.75);
  color: var(--grey);
}
.product-popup__field--email input:focus ~ label, .product-popup__field--email input:not(:placeholder-shown) ~ label,
.product-popup__field--email select:focus ~ label,
.product-popup__field--email select:not(:placeholder-shown) ~ label,
.product-popup__field--email textarea:focus ~ label,
.product-popup__field--email textarea:not(:placeholder-shown) ~ label, .product-popup__field--text input:focus ~ label, .product-popup__field--text input:not(:placeholder-shown) ~ label,
.product-popup__field--text select:focus ~ label,
.product-popup__field--text select:not(:placeholder-shown) ~ label,
.product-popup__field--text textarea:focus ~ label,
.product-popup__field--text textarea:not(:placeholder-shown) ~ label, .product-popup__field--textarea input:focus ~ label, .product-popup__field--textarea input:not(:placeholder-shown) ~ label,
.product-popup__field--textarea select:focus ~ label,
.product-popup__field--textarea select:not(:placeholder-shown) ~ label,
.product-popup__field--textarea textarea:focus ~ label,
.product-popup__field--textarea textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-1rem) scale(0.75);
  color: var(--grey);
}

.popup-message__buttons {
  display: flex;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .popup-message__buttons button {
    cursor: pointer;
  }
}
.popup-message__save {
  background: var(--black);
  color: var(--white);
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.popup-slide {
  display: none;
}
.popup-slide.is-open {
  display: block;
}
.popup-slide[aria-hidden=false] .product-popup__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=false] .product-popup__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=true] .product-popup__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide[aria-hidden=true] .product-popup__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}
.popup-slide .product-popup__container,
.popup-slide .product-popup__overlay {
  will-change: transform;
}