/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
:root {
  --ratio: 1.3;
  --ms--1: calc(var(--ms-0) / var(--ratio));
  --ms-0: clamp(13px, calc(0.15vw + 0.8rem), 15px);
  --ms-1: calc(var(--ms-0) * var(--ratio));
  --ms-2: calc(var(--ms-1) * var(--ratio));
  --ms-3: calc(var(--ms-2) * var(--ratio));
  --ms-4: calc(var(--ms-3) * var(--ratio));
  --header-height: calc(var(--baseline) * 1.4);
  --index-row-height: calc(var(--baseline) * 1.2);
  --padding: var(--ms-0);
  --padding-large: var(--ms-4);
  --baseline: calc(var(--ms-0) * 1.45);
  --sans: atlas, "Lucida Console", monospace;
  --helvetica: "helvetica-now", "Helvetica", Arial, sans-serif;
  --lightgray: #ededed;
  --gray: #bcbcbc;
  --darkgray: #777777;
  --black: black;
  --red: rgb(160, 40, 3);
  --text: rgb(8, 6, 5);
  --text-hover: rgb(37, 37, 37);
  --background: #dad7cf;
  --background-hover: rgba(255, 255, 255, 0.125);
  --fast: 150ms;
  --br-small: 2px;
  --highlight: rgb(109, 4, 165);
  --border-color: var(--text);
  --border-color-hover: var(--text-hover);
  --br: 0;
}
@media (min-width: 800px) {
  :root {
    --br: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
  :root {
    font-size: 0.85rem;
  }
}

.slider__slides {
  scrollbar-width: none;
}
.slider__slides::-webkit-scrollbar {
  display: none;
}

.site_mode--a {
  --border-color: var(--border-a);
  --border-color-hover: var(--border-hover-a);
  --background: var(--background-a);
  --background-hover: rgba(255, 255, 255, 0.025);
  --background-button: var(--catalogue-hover-a);
  --button-hover: var(--catalogue-hover-a);
  --text-button: white;
  --text: var(--text-a);
  --text-hover: var(--text-hover-a);
  --highlight: var(--text-hover-a);
}

.site_mode--b {
  --border-color: var(--border-b);
  --border-color-hover: var(--border-hover-b);
  --background: var(--background-b);
  --background-hover: rgba(255, 255, 255, 0.025);
  --background-button: var(--text-b);
  --button-hover: var(--text-hover);
  --text-button: var(--background-b);
  --text: var(--text-b);
  --text-hover: var(--text-hover-b);
  --highlight: var(--text-hover-b);
}

.block-press .press__title, .site__footer a, .page__content a, .single__product-press a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.block-press .press__title:hover, .site__footer a:hover, .page__content a:hover, .single__product-press a:hover, .block-press .press__title:focus-visible, .site__footer a:focus-visible, .page__content a:focus-visible, .single__product-press a:focus-visible {
  text-decoration-style: solid;
}

.site__footer, .site__title, .header__post-title, .woocommerce-page .wc-block-components-title, .wc-block-cart__totals-title, .catalogue__title, body, .site__mode, .site__footer .caps, .site__title .caps, .header__post-title .caps, .woocommerce-page .wc-block-components-title .caps, .wc-block-cart__totals-title .caps, .catalogue__title .caps, body .caps, .site__mode .caps {
  font-family: var(--sans);
  font-size: var(--ms-0);
  font-weight: 200;
  word-spacing: -0.185em;
  letter-spacing: -0.0175em;
  line-height: var(--baseline);
  -webkit-hyphens: auto;
          hyphens: auto;
}
.site__footer .caps, .site__title .caps, .header__post-title .caps, .woocommerce-page .wc-block-components-title .caps, .wc-block-cart__totals-title .caps, .catalogue__title .caps, body .caps, .site__mode .caps {
  font-style: normal;
}
@media (min-width: 800px) {
  .site__footer, .site__title, .header__post-title, .woocommerce-page .wc-block-components-title, .wc-block-cart__totals-title, .catalogue__title, body, .site__mode, .site__footer .caps, .site__title .caps, .header__post-title .caps, .woocommerce-page .wc-block-components-title .caps, .wc-block-cart__totals-title .caps, .catalogue__title .caps, body .caps, .site__mode .caps {
    -webkit-hyphens: none;
            hyphens: none;
  }
}

.site__mode, .site__footer .caps, .site__title .caps, .header__post-title .caps, .woocommerce-page .wc-block-components-title .caps, .wc-block-cart__totals-title .caps, .catalogue__title .caps, body .caps, .site__mode .caps {
  letter-spacing: 0.025em;
  word-spacing: -0.3em;
  text-transform: uppercase;
}

.site__footer, .site__header, .page__container, .product__info__container, .catalogue__item, .site__content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 0 var(--padding);
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
@media (min-width: 800px) {
  .site__footer, .site__header, .page__container, .product__info__container, .catalogue__item, .site__content {
    -moz-column-gap: var(--padding);
         column-gap: var(--padding);
  }
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-weight: inherit;
  font-size: 100%;
  color: inherit;
}

html {
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
          text-size-adjust: none;
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--text) var(--background);
}
html::-webkit-scrollbar-thumb {
  background: var(--text);
}
html::-webkit-scrollbar-track {
  background: var(--background);
}

body {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  background: var(--background);
  color: var(--text);
  max-width: 130rem;
  margin: 0 auto;
  padding-top: var(--header-height);
}

a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
}
a:focus-visible {
  outline: 1px solid blue;
}
a:hover, a:focus-visible {
  color: var(--highlight);
}

button {
  -webkit-tap-highlight-color: transparent;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 1px solid var(--highlight);
  outline-offset: 2px;
}

abbr {
  text-decoration: none;
}

img {
  opacity: 0;
  transition: var(--fast);
}
img.loaded {
  opacity: 1;
}

::-moz-selection {
  background-color: var(--text);
  color: var(--background);
}

::selection {
  background-color: var(--text);
  color: var(--background);
}

.price__deleted {
  opacity: 0.75;
}

@media (min-width: 1400px) {
  .label--short {
    display: none;
  }
}

.label--long {
  display: none;
}
@media (min-width: 1400px) {
  .label--long {
    display: inline;
  }
}

@keyframes spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}
/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.skip-link {
  position: absolute;
  left: -9999px;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.catalogue {
  display: contents;
}

.catalogue-list {
  margin-bottom: -1px;
  grid-column: 1/13;
}
@media (min-width: 1400px) {
  .catalogue-list {
    grid-column: 1/7;
  }
}
.catalogue-list > li {
  display: contents;
}
.catalogue-list > li:last-child:has(details[open]):after {
  display: none;
}
.catalogue-list details[open] summary {
  background: var(--catalogue-hover-a);
  color: white;
}
.catalogue-list > li:has(details[open]) ~ li .catalogue__summary {
  border-top: 1px solid currentColor;
}
.catalogue-list button {
  text-align: left;
}

.catalogue__summary {
  display: grid;
  padding: 0;
  cursor: pointer;
  height: var(--index-row-height);
  align-content: center;
  position: relative;
  -moz-column-gap: var(--padding);
       column-gap: var(--padding);
  margin-bottom: -1px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
  grid-template-columns: repeat(6, 1fr);
  padding: 0 0.1em;
}
.catalogue__summary:hover, .catalogue__summary:focus-visible {
  background: var(--catalogue-hover-a);
  color: white;
}

.catalogue__summary:after {
  content: "";
  border-bottom: 1px solid currentColor;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

.catalogue li.is-forthcoming {
  pointer-events: none;
}
.catalogue li:last-of-type {
  margin-bottom: calc(var(--padding) * 1.5);
}

.catalogue__item {
  padding: 0;
  grid-column: 1/13;
}

.catalogue__index {
  display: inline-block;
  width: calc(2ch - 0.2em);
  flex-shrink: 0;
}
@media (min-width: 500px) {
  .catalogue__index {
    width: calc(3ch - 0.2em);
  }
}

.catalogue__title {
  grid-column: 1/10;
  white-space: nowrap;
  display: flex;
  justify-content: flex-start;
}
.catalogue__title em {
  display: block;
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.catalogue__title .title-author:before {
  content: ", ";
}
@media (min-width: 500px) {
  .catalogue__title {
    grid-column: 1/10;
  }
}
@media (min-width: 800px) {
  .catalogue__title {
    grid-column: 1/3;
  }
  .catalogue__title .title__author {
    display: none;
  }
}
@media (min-width: 1400px) {
  .catalogue__title {
    grid-column: 1/3;
  }
}

.catalogue__authors {
  grid-column: 8/13;
  display: none;
  white-space: nowrap;
}
@media (min-width: 650px) {
  .catalogue__authors {
    grid-column: 7/11;
  }
}
@media (min-width: 800px) {
  .catalogue__authors {
    display: block;
    grid-column: 3/5;
  }
}
@media (min-width: 1400px) {
  .catalogue__authors {
    grid-column: 3/5;
  }
}

.catalogue__format {
  display: none;
  white-space: nowrap;
}
.catalogue__format .format__full {
  display: none;
}
@media (min-width: 800px) {
  .catalogue__format {
    display: block;
    grid-row: 1;
    grid-column: 5/8;
  }
}
@media (min-width: 1400px) {
  .catalogue__format {
    grid-column: 5/7;
  }
}
@media (min-width: 1750px) {
  .catalogue__format .format__short {
    display: none;
  }
  .catalogue__format .format__full {
    display: block;
  }
}

.catalogue__date {
  display: none;
}
@media (min-width: 800px) {
  .catalogue__date {
    grid-column: 8/13;
    text-align: right;
    display: block;
  }
}
@media (min-width: 1400px) {
  .catalogue__date {
    grid-row: 1;
    grid-column: 6/7;
  }
}

.catalogue__description {
  margin-bottom: 1em;
}

.catalogue-grid {
  grid-column: 1/13;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
  align-self: flex-start;
  display: none;
  position: relative;
  min-height: calc(100vh - var(--header-height) - var(--index-row-height) + 1px);
}
.view-grid .catalogue-grid {
  display: grid;
}
.catalogue-grid li {
  display: contents;
}
.catalogue-grid li:nth-of-type(2n) .grid__caption {
  padding-left: calc(var(--padding) * 0.5);
  padding-right: 0.2em;
}
.catalogue-grid li:nth-of-type(2n - 1) .grid__item {
  border-right: 1px solid var(--highlight);
}
.catalogue-grid .grid__item {
  background: rgb(27, 24, 24);
  padding: var(--padding);
  position: relative;
  display: flex;
  grid-column: span 2;
  height: 50vh;
}
@media (min-width: 800px) {
  .catalogue-grid .grid__item {
    grid-column: span 1;
    height: 80vh;
  }
}
.catalogue-grid .grid__item:hover .grid__price, .catalogue-grid .grid__item:focus-visible .grid__price {
  opacity: 1;
}
.catalogue-grid img {
  display: block;
  position: absolute;
  top: calc(var(--padding) + var(--baseline));
  bottom: var(--padding);
  height: calc(100% - var(--padding) * 2 - var(--baseline));
  width: calc(100% - var(--padding) * 2);
  -o-object-fit: contain;
     object-fit: contain;
}
.catalogue-grid .grid__caption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  -moz-column-gap: var(--padding);
       column-gap: var(--padding);
  padding: 0 0.1em;
  height: calc(var(--baseline) * 1.15);
  color: var(--background);
  background: var(--catalogue-hover-a);
  padding-right: calc(var(--padding) * 0.5);
}
.catalogue-grid .catalogue__title {
  grid-column: span 4;
  white-space: nowrap;
}
@media (min-width: 500px) {
  .catalogue-grid .catalogue__title {
    grid-column: span 3;
  }
}
.catalogue-grid .grid__price {
  text-align: right;
  grid-column: 6/7;
  transition: var(--fast);
  white-space: nowrap;
}
@media (min-width: 800px) {
  .catalogue-grid .grid__price {
    opacity: 0;
    position: absolute;
  }
}
.catalogue-grid .grid__title-author {
  display: none;
  margin-left: 1ch;
}
@media (min-width: 420px) {
  .catalogue-grid .grid__title-author {
    display: inline;
  }
}
@media (min-width: 650px) {
  .catalogue-grid .grid__title-author {
    display: none;
  }
}
.catalogue-grid .grid__author {
  display: none;
}
@media (min-width: 650px) {
  .catalogue-grid .grid__author {
    display: block;
    grid-column: span 2;
  }
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.single-product .header__post-title {
  gap: 2ch;
}

.single__product {
  display: contents;
}

.single__product-title {
  grid-column: 1/3;
  grid-row: 1;
}

.single__product-author {
  grid-column: 3/4;
  grid-row: 1;
}

.single__product-slider {
  grid-column: 1/13;
}
.single__product-slider .slider {
  max-height: 80vh;
}
.single__product-slider .slider__loading {
  display: none !important;
}

.product__header {
  grid-row: 2;
  grid-column: 1/13;
  margin-bottom: 0.5em;
}
@media (min-width: 800px) {
  .product__header {
    grid-column: 1/6;
  }
}
@media (min-width: 1400px) {
  .product__header {
    grid-column: 1/7;
    margin-bottom: var(--padding);
    padding-left: var(--padding-large);
  }
}

.product__actions {
  grid-column: 1/13;
  flex-flow: column;
  gap: 0.3em;
  align-items: flex-start;
  margin-bottom: 0.5em;
  display: none;
}
@media (min-width: 800px) {
  .product__actions {
    display: flex;
    grid-column: 1/13;
    justify-self: flex-start;
    margin-bottom: 1.3em;
  }
}

.product__title-mobile {
  grid-column: 1/13;
  margin-bottom: 0.5em;
}
.product__title-mobile span {
  display: block;
}
@media (min-width: 800px) {
  .product__title-mobile {
    display: none;
  }
}

.product-actions--mobile {
  grid-column: 1/13;
  margin-bottom: var(--baseline);
}
@media (min-width: 800px) {
  .product-actions--mobile {
    display: none;
  }
}

.product__action {
  display: flex;
  gap: 0.65em;
  align-items: flex-start;
}

@media (min-width: 800px) {
  .product__add-to-cart {
    grid-column: 7/9;
  }
}

.product__view-cart {
  justify-self: flex-start;
}
@media (min-width: 800px) {
  .product__view-cart {
    grid-column: 9/12;
  }
}

.product__copy {
  grid-column: 1/13;
  padding-right: 1em;
}
.product__copy p + p {
  margin-top: 1em;
}
@media (min-width: 800px) {
  .product__copy p + p {
    margin-top: 0;
    text-indent: 4ch;
  }
}
.product__copy blockquote,
.product__copy ol {
  margin: calc(var(--baseline) * 0.75) 0;
  margin-left: 4ch;
}
.product__copy ol {
  list-style: decimal;
}
.product__copy sup {
  font-feature-settings: "sups";
  font-family: var(--helvetica);
  font-weight: 300 !important;
  margin-left: 0.05em;
}
@media (min-width: 800px) {
  .product__copy {
    grid-column: 1/8;
  }
}
@media (min-width: 1400px) {
  .product__copy {
    grid-column: 1/7;
  }
}

.product__info__container {
  padding: 0;
  grid-column: 1/13;
}
@media (min-width: 800px) {
  .product__info__container {
    padding-bottom: 1em;
  }
}

.product__meta-container {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: subgrid;
  padding-top: 1em;
}
@media (min-width: 800px) {
  .product__meta-container {
    display: block;
    padding: 0;
    grid-column: 8/13;
  }
}
@media (min-width: 1400px) {
  .product__meta-container {
    display: contents;
  }
}

.product__meta {
  margin-bottom: var(--padding);
  grid-column: 1/13;
  margin-left: 2ch;
}
@media (min-width: 800px) {
  .product__meta {
    margin-bottom: 0;
    grid-column: 9/13;
    margin-left: 0;
  }
}
@media (min-width: 1400px) {
  .product__meta {
    grid-column: 7/9;
  }
}

.product__isbn {
  white-space: nowrap;
  padding-top: 1.2em;
}
@media (min-width: 800px) {
  .product__isbn {
    padding-top: var(--baseline);
  }
}

.isbn__number {
  letter-spacing: -0.05em;
}

.product__notes {
  grid-column: 1/13;
  margin-left: 2ch;
}
@media (min-width: 800px) {
  .product__notes {
    grid-column: 9/13;
    padding-top: 0;
    margin-left: 0;
  }
}

.product__closeups {
  grid-column: 1/13;
  margin-left: calc(-1 * var(--padding));
  margin-right: calc(-1 * var(--padding));
  padding-top: var(--padding);
}
@media (min-width: 1400px) {
  .product__closeups {
    padding-top: calc(var(--padding) * 1.5);
  }
}

.closeup {
  position: relative;
  list-style: none;
}
.closeup .spinner {
  color: var(--color-text);
  transition: var(--fast);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -10;
}
.closeup picture {
  display: flex;
}
.closeup img {
  max-width: 100%;
}

.section__title {
  margin-top: var(--padding);
  margin-bottom: 0.25em;
  grid-column: 2/13;
}

.single__product-press {
  margin-top: var(--baseline);
  text-wrap: balance;
}
.single__product-press li {
  list-style: "x ";
}
.product__detail-images {
  grid-column: 1/13;
  padding-top: calc(var(--baseline) * 4);
}
.product__detail-images ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.product__detail-images li {
  display: block;
  grid-column: span 2;
  border-bottom: 1px solid var(--highlight);
  position: relative;
}
.product__detail-images li .slide__tag {
  top: 0;
  bottom: auto;
}
.product__detail-images li:nth-last-child(1) {
  border-bottom: 0;
}
@media (min-width: 800px) {
  .product__detail-images li {
    grid-column: span 1;
  }
  .product__detail-images li:nth-last-child(1), .product__detail-images li:nth-last-child(2) {
    border-bottom: 0;
  }
  .product__detail-images li:nth-child(2n-1) {
    border-right: 1px solid var(--highlight);
  }
}
.product__detail-images img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left;
     object-position: left;
  display: block;
}

.product__detail-next {
  grid-column: 1/13;
  display: grid;
  grid-template-columns: subgrid;
  height: calc(var(--baseline) * 1.15);
  position: relative;
}
@media (min-width: 800px) {
  .product__detail-next {
    margin-top: -0.5em;
    margin-bottom: 0.5em;
  }
}
.product__detail-next a {
  border-bottom: 1px solid currentColor;
  grid-column: 1/13;
  display: grid;
  grid-template-columns: subgrid;
  padding: 0;
  text-decoration: none;
}
.product__detail-next a:before {
  content: "Next";
  grid-column: 1/2;
}
.product__detail-next a:hover, .product__detail-next a:focus-visible {
  background: var(--button-hover);
  color: var(--background);
}
.product__detail-next .catalogue__index {
  display: none;
}
.product__detail-next .catalogue__title {
  grid-column: 3/13;
}
@media (min-width: 800px) {
  .product__detail-next .catalogue__title {
    grid-column: 7/9;
  }
}
.product__detail-next .catalogue__authors {
  grid-column: 3/13;
  grid-row: 1;
}
@media (min-width: 800px) {
  .product__detail-next .catalogue__authors {
    grid-column: 9/11;
  }
}
@media (min-width: 800px) {
  .product__detail-next .catalogue__format {
    grid-column: 11/12;
  }
}
@media (min-width: 800px) {
  .product__detail-next .catalogue__date {
    grid-column: 12/13;
  }
}

.product__upsells {
  margin-bottom: 1em;
  margin-top: 1em;
}
.product__upsells h3 {
  margin-bottom: 0.5em;
}
.product__upsells > ul {
  display: flex;
  flex-flow: column;
}

.product__upsell {
  padding: 1ch;
  background: var(--background);
  border: 1px solid var(--text);
  margin-bottom: -1px;
  position: relative;
}
.product__upsell.active {
  color: var(--highlight);
  border: 1px solid var(--highlight);
  z-index: 1000;
}
.product__upsell.active .upsell__thumbnail {
  background: var(--highlight);
}

.upsell__content {
  display: flex;
  gap: 1ch;
  align-items: flex-start;
}

.upsell__thumbnail {
  width: 8ch;
  display: block;
  flex-shrink: 0;
  background: black;
}
.upsell__thumbnail img {
  display: block;
  filter: grayscale(1);
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
}

.upsell__title {
  margin-bottom: 0.25em;
}

.upsell__actions {
  margin-top: 0.5em;
  display: flex;
  gap: 0.75em;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.button, .newsletter__button, .wc-block-components-button, .button--secondary, .newsletter__success {
  background: var(--text);
  color: var(--background);
  border: 1px solid var(--text);
  border-radius: var(--br);
  padding: 0em 0.5em;
  border: 0;
  text-decoration: none !important;
  display: inline-flex;
  height: calc(var(--baseline) + 0.1em);
  word-spacing: -0.15em;
  position: relative;
  line-height: var(--baseline);
}
@media (min-width: 800px) {
  .button, .newsletter__button, .wc-block-components-button, .button--secondary, .newsletter__success {
    padding: 0 0.35em;
  }
}
.button .price__deleted, .newsletter__button .price__deleted, .wc-block-components-button .price__deleted, .button--secondary .price__deleted, .newsletter__success .price__deleted {
  margin-right: 0.5em;
}
.button .spinner, .newsletter__button .spinner, .wc-block-components-button .spinner, .button--secondary .spinner, .newsletter__success .spinner {
  position: relative;
  top: 0.35em;
}

.button__label {
  pointer-events: none;
}

a.button, a.newsletter__button, a.wc-block-components-button, a.button--secondary, a.newsletter__success,
button.button,
button.newsletter__button,
button.wc-block-components-button,
button.button--secondary,
button.newsletter__success,
input.button,
input.newsletter__button,
input.wc-block-components-button,
input.button--secondary,
input.newsletter__success {
  cursor: pointer;
}
a.button:hover, a.newsletter__button:hover, a.wc-block-components-button:hover, a.button--secondary:hover, a.newsletter__success:hover, a.button:focus-visible, a.newsletter__button:focus-visible, a.wc-block-components-button:focus-visible, a.button--secondary:focus-visible, a.newsletter__success:focus-visible,
button.button:hover,
button.newsletter__button:hover,
button.wc-block-components-button:hover,
button.button--secondary:hover,
button.newsletter__success:hover,
button.button:focus-visible,
button.newsletter__button:focus-visible,
button.wc-block-components-button:focus-visible,
button.button--secondary:focus-visible,
button.newsletter__success:focus-visible,
input.button:hover,
input.newsletter__button:hover,
input.wc-block-components-button:hover,
input.button--secondary:hover,
input.newsletter__success:hover,
input.button:focus-visible,
input.newsletter__button:focus-visible,
input.wc-block-components-button:focus-visible,
input.button--secondary:focus-visible,
input.newsletter__success:focus-visible {
  color: var(--background);
  background: var(--text-hover);
}

.spinner {
  justify-content: center;
  align-items: center;
  transform-origin: center;
  margin-left: 0.5em;
  width: 0.8em;
  height: 0.8em;
  position: relative;
  color: var(--background);
  display: none;
}
.is-loading .spinner {
  display: inline-flex;
}
.spinner svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: spin 0.35s steps(4) infinite;
}
.spinner path {
  fill: currentColor;
  stroke: 0;
}

.button--loading {
  background: var(--text-hover);
  cursor: progress;
  pointer-events: none;
}
.button--loading:hover, .button--loading:focus-visible {
  background: var(--black-hover);
}

.button--error {
  background: rgb(243, 56, 49);
}
.button--error:hover, .button--error:focus-visible {
  background: rgb(243, 56, 49);
}

.button--secondary, .newsletter__success {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
}
.button--secondary:hover, .newsletter__success:hover, .button--secondary:focus-visible, .newsletter__success:focus-visible {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-color-hover);
}
.button--secondary[aria-disabled=true], [aria-disabled=true].newsletter__success {
  color: var(--border-color);
  cursor: default;
  text-decoration: line-through !important;
}
.button--secondary[aria-disabled=true]:hover, [aria-disabled=true].newsletter__success:hover, .button--secondary[aria-disabled=true]:focus-visible, [aria-disabled=true].newsletter__success:focus-visible {
  border: 1px solid var(--border-color);
}

.woocommerce-page .page__content {
  max-width: none;
  grid-column: 2/11;
}
.woocommerce-page .wc-block-components-title {
  text-transform: capitalize;
  font-size: var(--ms-0) !important;
  margin: 0 !important;
}
.woocommerce-page * {
  font-weight: 400 !important;
}
.woocommerce-page label {
  overflow: visible !important;
}
.woocommerce-page input,
.woocommerce-page label,
.woocommerce-page textarea,
.woocommerce-page .wc-block-components-address-card,
.woocommerce-page .wc-block-components-radio-control-accordion-option {
  border-radius: 0 !important;
}
.woocommerce-page .has-error label,
.woocommerce-page .has-error .wc-block-components-validation-error {
  color: var(--red) !important;
}
.woocommerce-page .has-error input {
  border-color: var(--red) !important;
}
.woocommerce-page .wc-block-cart-item__remove-link {
  font-size: var(--ms-0) !important;
  text-decoration: none !important;
}

.wp-block-woocommerce-empty-cart-block {
  grid-column: span 6;
}

.wc-block-components-radio-control-accordion-content {
  margin-top: 0 !important;
}

.wcpay-payment-element {
  margin-bottom: 0.5em !important;
}

.wc-block-components-checkout-step__description {
  margin-bottom: 1em !important;
  font-size: var(--ms--1) !important;
}

.wc-block-components-product-metadata__description {
  font-size: var(--ms--1) !important;
}

.wc-block-components-checkout-step {
  margin-bottom: var(--baseline) !important;
}

.wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid currentColor !important;
  border-radius: 0 !important;
}

.wc-block-components-totals-item * {
  font-size: var(--ms-0) !important;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: none !important;
  border: 1px solid black;
  border-radius: 0;
}

.wp-block-woocommerce-checkout,
.wp-block-woocommerce-cart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  -moz-column-gap: var(--padding);
       column-gap: var(--padding);
}

.wp-block-woocommerce-cart div[class=""],
.wp-block-woocommerce-cart .wc-block-cart {
  display: contents;
}

.wc-block-components-sidebar-layout {
  display: contents !important;
}

.with-scroll-to-top__scroll-point {
  display: none;
}

.wc-block-cart-item__quantity {
  display: flex;
  gap: 1ch;
}

.wc-block-components-notices,
.wc-block-components-notice-snackbar-list {
  grid-column: 1/8;
}

.wp-block-woocommerce-checkout-totals-block,
.wc-block-components-sidebar {
  grid-column: 6/8;
  grid-row: 1;
}

.wc-block-cart__sidebar {
  grid-column: 1/5;
  grid-row: 2;
}

.wc-block-cart-item__image {
  padding: 0 !important;
}
.wc-block-cart-item__image img {
  display: none;
}

.wc-block-components-sidebar {
  padding-left: 0 !important;
  width: 100% !important;
}
.wc-block-components-sidebar .wc-block-components-radio-control__option {
  padding-left: 3rem !important;
}
.wc-block-components-sidebar .wc-block-components-radio-control__input {
  left: 0.5rem !important;
}

.wc-block-components-address-card {
  margin: 1em 0 !important;
  padding: 0.5em 0.5em !important;
  border: 1px solid black !important;
}

.wc-block-components-panel__button {
  margin-bottom: 0.5rem !important;
}

.wc-block-components-totals-wrapper {
  border-top: 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
  border-top: 1px solid black !important;
}

.wc-block-components-order-summary-item__quantity {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.wc-block-components-order-summary-item__quantity:before {
  content: "(";
}
.wc-block-components-order-summary-item__quantity:after {
  content: ")";
}

.wp-block-woocommerce-checkout-fields-block,
.wc-block-components-main {
  margin: 0;
  padding: 0 !important;
  grid-column: 1/5;
  grid-row: 1;
  width: 100% !important;
}

.wc-block-components-order-summary-item__image {
  display: none !important;
}

.wc-block-components-order-summary-item__description {
  padding-left: 0 !important;
}

.wc-block-checkout__guest-checkout-notice {
  font-size: var(--ms--1) !important;
}

.wp-block-woocommerce-checkout-terms-block {
  font-size: var(--ms-0) !important;
  text-wrap: balance;
  padding-top: 3em !important;
  margin-bottom: 2em !important;
}

.wc-block-components-totals-item {
  padding: 0 !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block {
  padding-bottom: 1em !important;
}

.wc-block-components-order-summary {
  padding: 0 !important;
}

.wc-block-components-totals-wrapper:not(:empty),
.wc-block-cart-item__product,
.wc-block-cart-item__total {
  padding: 0.5em 0 !important;
}

.wp-block-woocommerce-checkout-order-summary-subtotal-block {
  border-bottom: 1px solid currentColor !important;
}

.wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-order-summary-item__description {
  padding-bottom: 0 !important;
}

.wc-block-components-product-name {
  margin-bottom: 0 !important;
  text-decoration: none !important;
}

.wc-block-components-product-price,
.wc-block-components-order-summary-item {
  padding-top: 0 !important;
}

.p-block-woocommerce-cart-order-summary-subtotal-block,
.wc-block-components-product-metadata {
  display: none !important;
}

.wc-block-components-totals-item__value em {
  font-style: normal;
}
.wc-block-components-totals-item__value em:before {
  content: "(";
}
.wc-block-components-totals-item__value em:after {
  content: ")";
}

.wc-block-cart__totals-title {
  font-size: var(--ms-0) !important;
  text-transform: none !important;
}

.wc-block-cart-items thead {
  display: none;
}

.wc-block-components-quantity-selector {
  border: 1px solid var(--text);
  border-radius: 0 !important;
}
.wc-block-components-quantity-selector button {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.wc-block-components-quantity-selector button:hover, .wc-block-components-quantity-selector button:focus-visible {
  color: var(--background);
  background: var(--button-hover);
}
.wc-block-components-quantity-selector input {
  padding: 0.2em 0 !important;
  border-left: 1px solid var(--text) !important;
  border-right: 1px solid var(--text) !important;
}
.wc-block-components-quantity-selector input:focus {
  box-shadow: none !important;
}

.wp-block-woocommerce-cart-order-summary-totals-block,
.wc-block-cart-items td {
  border-top: 1px solid var(--text) !important;
}

.wc-block-cart-items {
  border-bottom: 0 !important;
}

.wc-block-components-quantity-selector {
  margin-bottom: 0 !important;
}

.wc-block-cart-items__header-total {
  padding-right: 0 !important;
}

.wc-block-cart-items__header-image {
  text-align: left;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper {
  justify-content: baseline !important;
}

.wp-block-woocommerce-checkout.is-loading {
  opacity: 0 !important;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.page__content {
  grid-column: 1/13;
  padding-bottom: var(--padding);
}
@media (min-width: 800px) {
  .page__content {
    padding-bottom: var(--padding-large);
    grid-column: 2/11;
  }
}
@media (min-width: 1100px) {
  .page__content {
    grid-column: 2/9;
  }
}
@media (min-width: 1400px) {
  .page__content {
    grid-column: 2/8;
    max-width: 55em;
  }
}
.page__content h2 {
  margin-top: 1em;
}
.page__content h2:first-child {
  margin-top: 0;
}
.page__content p + p {
  text-indent: var(--padding-large);
}
.page__content > ul, .page__content > ol {
  list-style: "x ";
  margin-left: var(--padding-large);
}
.page__content .newsletter__form {
  margin-top: 0.5em;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.site__header {
  padding: 0;
  height: var(--header-height);
  margin: 0 var(--padding);
  align-items: center;
  background: var(--background);
  position: fixed;
  z-index: 1000;
  transition: 100ms;
  top: 0;
  box-shadow: 1px 0 0 var(--background);
  border-bottom: 1px solid transparent;
  width: min(100% - var(--padding) * 2, 130rem - var(--padding) * 2);
}
.is-scrolled .site__header {
  transform: translateY(-100%);
  border-bottom: 1px solid var(--highlight);
}
.scrolled-up.is-scrolled .site__header {
  transform: translateY(0);
}

.site__title {
  grid-column: 1/3;
  display: flex;
  white-space: nowrap;
  position: relative;
}
@media (min-width: 800px) {
  .site__title {
    grid-column: 1/2;
  }
}

.coda__index,
.header__post-title {
  color: var(--highlight);
}

.coda__index {
  margin-left: 1ch;
}

.header__post-title {
  white-space: nowrap;
  grid-column: 8/13;
  text-align: right;
  grid-row: 1;
  display: none;
}
@media (min-width: 800px) {
  .header__post-title {
    display: flex;
    text-align: left;
    grid-column: 2/6;
  }
}

.header__nav {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 5/13;
  grid-row: 1;
  position: relative;
}
@media (min-width: 420px) {
  .header__nav {
    grid-column: 5/13;
  }
}
@media (min-width: 500px) {
  .header__nav {
    grid-column: 6/13;
  }
}
@media (min-width: 800px) {
  .header__nav {
    grid-column: 8/13;
    grid-row: 1;
  }
}
@media (min-width: 1400px) {
  .header__nav {
    grid-column: 10/13;
  }
}
.header__nav button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
}
.header__nav a {
  display: block;
}
.header__nav ul {
  grid-row: 1;
  list-style: none;
  grid-column: 1/6;
  display: flex;
  gap: 1ch;
  justify-content: center;
}
@media (min-width: 500px) {
  .header__nav ul {
    gap: 2ch;
  }
}
@media (min-width: 800px) {
  .header__nav ul {
    gap: 4ch;
  }
}
@media (min-width: 1400px) {
  .header__nav ul {
    display: contents;
  }
}
.header__nav .label-short {
  display: none;
}
.header__nav li:has(.label-short) .label {
  display: none;
}
.header__nav li:has(.label-short) .label-short {
  display: inline;
}
@media (min-width: 420px) {
  .header__nav li:has(.label-short) .label {
    display: inline;
  }
  .header__nav li:has(.label-short) .label-short {
    display: none;
  }
}

.catalogue__toggle {
  text-underline-offset: 0.2em;
  text-align: left;
}
.catalogue__toggle:hover, .catalogue__toggle:focus-visible {
  cursor: pointer;
}

.woocommerce-cart .header__cart, .current-menu-item a, .view-list [data-state=list], .view-grid [data-state=grid] {
  position: relative;
  color: var(--highlight);
}

.site__mode {
  grid-row: 1;
  color: var(--text);
  grid-column: 6/8;
  text-align: center;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  display: none;
}
@media (min-width: 800px) {
  .site__mode {
    display: block;
  }
}

.header__cart {
  grid-row: 1;
  justify-self: flex-end;
  grid-column: 10/13;
}
.woocommerce-cart .header__cart:before {
  position: relative;
  left: 0.2em;
}
@media (min-width: 1400px) {
  .header__cart {
    grid-column: 12/13;
    grid-row: 1;
    width: 100%;
    justify-self: flex-end;
    text-align: right;
  }
}

.cart__counter {
  margin-left: 0.3em;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.site__footer {
  margin: 0 var(--padding);
  padding: 0;
  bottom: 0;
  right: 0;
  padding-bottom: 1em;
}
.home .site__footer {
  padding-top: calc(var(--index-row-height) + 2px + 0.5em);
  margin-top: 0;
}
.site__footer .widget {
  margin-bottom: 1em;
}
@media (min-width: 800px) {
  .site__footer .widget {
    margin-bottom: 0;
  }
}
.site__footer .widget:nth-of-type(1) {
  grid-column: 1/13;
}
.site__footer .widget:nth-of-type(1) p {
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .site__footer .widget:nth-of-type(1) {
    grid-column: 1/6;
  }
}
.site__footer .widget:nth-of-type(2) {
  grid-column: 1/13;
}
@media (min-width: 800px) {
  .site__footer .widget:nth-of-type(2) {
    grid-column: 7/10;
  }
}

.widget a {
  white-space: nowrap;
}
.widget p {
  margin-bottom: 1em;
}
.widget p:last-child {
  margin-bottom: 0;
}
.widget .newsletter__form-container {
  margin-top: calc(var(--baseline) * 0.5);
  margin-bottom: calc(var(--baseline) * 0.5 - 2px);
}

.footer__nav {
  grid-column: 1/13;
  justify-content: space-between;
  display: flex;
  flex-flow: column;
}
.footer__nav .label-short {
  display: none;
}
@media (min-width: 800px) {
  .footer__nav {
    margin-top: 0;
    grid-column: 11/12;
  }
}
.footer__nav a {
  text-decoration: none;
}
.footer__nav > ul {
  display: flex;
  list-style: none;
  white-space: nowrap;
  align-items: flex-end;
  gap: 1em;
  margin-bottom: 1em;
}
@media (min-width: 800px) {
  .footer__nav > ul {
    flex-flow: column;
    align-items: flex-start;
    grid-column: 11/13;
    gap: 0.1em;
  }
}

.footer__copyright {
  grid-column: 11/13;
  white-space: nowrap;
}

.footer__marquee {
  border-bottom: 1px solid var(--text);
  border-top: 1px solid var(--text);
  grid-column: 1/13;
  color: var(--text);
  height: var(--index-row-height);
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.newsletter__form-container.is-success .submit {
  display: none;
}
.newsletter__form-container.is-success .newsletter__success {
  display: block;
}

.newsletter__success {
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
  padding: 0 0.25em;
  display: none;
  pointer-events: none;
}

.newsletter__form {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  height: calc(var(--baseline) + 0.2em);
}
.newsletter__form.is-loading .spinner {
  display: block;
}

.newsletter__label {
  font-size: 0;
  position: absolute;
}

.newsletter__input {
  max-width: 9em;
  background: transparent;
  position: relative;
  padding-left: 0.25em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: 0;
  padding-bottom: 0.25em;
  height: 100%;
}
@media (min-width: 800px) {
  .newsletter__input {
    max-width: 12em;
  }
}
.newsletter__input::-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}
.newsletter__input::placeholder {
  color: inherit;
  opacity: 0.5;
}
.newsletter__input:focus {
  outline: 0;
  background: transparent;
}

.newsletter__field.submit {
  display: contents;
}

.newsletter__button {
  height: 100%;
  padding-top: 0.05em;
}

.newsletter__errors {
  padding-top: 0.25em;
  opacity: 0;
}
.newsletter__errors.active {
  opacity: 1;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.block-events {
  display: flex;
  flex-flow: column;
  margin-top: var(--baseline);
}
.block-events ol {
  display: flex;
  flex-flow: column;
  row-gap: 1em;
}
@media (min-width: 800px) {
  .block-events ol {
    row-gap: 0;
  }
}
.block-events li {
  text-wrap: balance;
}
@media (min-width: 800px) {
  .block-events li {
    white-space: nowrap;
  }
}
.block-events .location {
  display: block;
}
@media (min-width: 800px) {
  .block-events .location {
    display: inline;
  }
}
.block-events .date {
  margin-right: 1ch;
}
.block-events .label:nth-of-type(2) {
  margin-top: var(--baseline);
  display: block;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.block-press ol {
  display: flex;
  flex-flow: column;
  row-gap: 1em;
}
@media (min-width: 800px) {
  .block-press ol {
    row-gap: 0;
  }
}
@media (min-width: 800px) {
  .block-press li {
    white-space: nowrap;
  }
}
.block-press .date {
  margin-right: 1ch;
}
.block-press .press__title {
  display: inline-block;
  vertical-align: bottom;
  max-width: min(100%, 55ch);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*!
Theme Name: Ex. Coda
Text Domain: ex-coda
Domain Path: /languages
Author: Max Kohler
Author URI: https://maxkohler.com/
Description: Custom Wordpress theme for Ex. Coda. Required plugins: Advanced Custom Fields Pro, WooCommerce. See README.md for developer information.
Version: 1.9.17
License: All rights reserved
Tags: WooCommerce
*/
.slider {
  position: relative;
  background: var(--black);
  max-height: 50vh;
  display: flex;
  margin-bottom: 1em;
}

.slider__index {
  color: var(--background);
  position: absolute;
  bottom: 0;
  padding-bottom: 0.4em;
  z-index: 1000;
  left: 2ch;
}
.slider__index .spinner {
  display: inline-block;
  width: 1.1em;
  opacity: 0.5;
}
@media (min-width: 800px) {
  .slider__index {
    left: 1ch;
  }
}

.slider__slides {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  opacity: 1;
  margin: 0 auto;
  transition: 100ms;
}
.is-loading .slider__slides {
  opacity: 0;
}

.slider__loading {
  display: none;
  line-height: var(--baseline);
}
.is-loading .slider__loading {
  display: block;
  background: var(--color);
  height: var(--baseline);
  width: 100%;
}
.slider__loading .spinner {
  transition: var(--fast);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.slider__image {
  justify-content: center;
  max-height: 100%;
  background: var(--black);
  top: 0;
  flex-shrink: 0;
  scroll-snap-align: center;
  display: inline-flex;
  margin-right: var(--padding);
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: none;
}
.slider__image img {
  pointer-events: none;
}
.slider__image.layout--book {
  padding: calc(var(--baseline) * 2);
}
.slider__image.layout--bleed img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.slider__image:after {
  content: "";
  width: 1px;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1000;
}
@media (min-width: 800px) {
  .slider__image {
    display: flex;
    position: absolute;
    opacity: 0;
    margin-right: 0;
  }
}
.slider__image:last-of-type {
  margin-right: 0;
}
.slider__image:nth-of-type(1) {
  position: static;
}
.slider__image.active {
  opacity: 1;
}
.slider__image picture {
  display: flex;
  justify-content: center;
}
.slider__image img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  z-index: 100;
  opacity: 0;
  position: relative;
  transition-duration: 500ms;
  transition-delay: var(--fast);
}
.slider__image img.loaded {
  opacity: 1;
}

.slide__tag {
  background: linear-gradient(to right, color-mix(in srgb, var(--highlight) 20%, transparent) 0ch, color-mix(in srgb, var(--highlight) 20%, transparent) 1ch, color-mix(in srgb, var(--highlight) 60%, transparent) 1ch, color-mix(in srgb, var(--highlight) 60%, transparent) 2ch, color-mix(in srgb, var(--highlight) 100%, transparent) 2ch, color-mix(in srgb, var(--highlight) 100%, transparent) 3ch, var(--highlight) 3ch);
  color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.1em 1ch;
  padding-bottom: 0.3em;
  display: inline-block;
  padding-left: 3ch;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.home .marquee__scroll-container,
.home .marquee__container {
  display: flex;
}

.marquee__scroll-container {
  top: 0;
  left: var(--padding);
  right: var(--padding);
  bottom: calc(var(--footer-height) - var(--index-row-height) + 0.5em);
  position: absolute;
  display: contents;
  pointer-events: none;
}

.marquee__container {
  height: 100vh;
  flex-flow: column;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  display: contents;
  justify-content: flex-end;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  gap: 3ch;
  background: var(--background);
  margin: 0 var(--padding);
  margin-top: calc(var(--baseline) * 4);
  margin-bottom: 0.5em;
}
.home .marquee {
  margin: 0;
}
.marquee:hover .marquee__animate {
  animation-play-state: paused;
}
.marquee strong {
  display: block;
  margin: 0 4ch;
  background: var(--text);
  height: calc(100% + 2px);
  color: var(--background);
  display: flex;
  position: relative;
}
.marquee strong:before, .marquee strong:after {
  position: absolute;
  top: 0;
  bottom: 0;
}
.marquee strong:before {
  content: "";
  display: block;
  width: 3ch;
  left: -3ch;
  background: linear-gradient(to right, color-mix(in srgb, var(--text) 20%, transparent) 0, color-mix(in srgb, var(--text) 20%, transparent) 1ch, color-mix(in srgb, var(--text) 60%, transparent) 1ch, color-mix(in srgb, var(--text) 60%, transparent) 2ch, color-mix(in srgb, var(--text) 100%, transparent) 2ch, color-mix(in srgb, var(--text) 100%, transparent) 3ch);
}
.marquee strong:after {
  content: "";
  display: block;
  width: 3ch;
  right: -3ch;
  background: linear-gradient(to left, color-mix(in srgb, var(--text) 20%, transparent) 0, color-mix(in srgb, var(--text) 20%, transparent) 1ch, color-mix(in srgb, var(--text) 60%, transparent) 1ch, color-mix(in srgb, var(--text) 60%, transparent) 2ch, color-mix(in srgb, var(--text) 100%, transparent) 2ch, color-mix(in srgb, var(--text) 100%, transparent) 3ch);
}

.marquee__animate {
  animation: marquee linear infinite var(--animation-duration);
  display: flex;
  gap: 3ch;
}

.marquee__inner {
  white-space: nowrap;
  display: flex;
  gap: 3ch;
}

.marquee__element {
  display: flex;
}