/** 
** ICON LINK 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-with-icon-link {
  color: var(--icon-link-color, inherit);
  font-size: var(--icon-link-font-size, var(--size-step--1));
  text-decoration: var(--icon-link-text-decoration, underline);
  text-decoration-color: var(--icon-link-text-decoration-color, var(--text-decoration-color, var(--color-secondary)));
  text-decoration-thickness: var(--icon-link-text-decoration-thickness, var(--text-decoration-thickness));
}

.wm-with-icon-link[data-with-icon-variant="hidden-label"] {
  color: var(--icon-link-hidden-label-color, var(--color-light-glare));
  background-color: var(--icon-link-hidden-label-bg, var(--color-dark-grey));
}

.wm-with-icon-link svg {
  width: auto;
  height: var(--icon-link-svg-height, 1.75ex);
}

.wm-with-icon-link:hover svg {
  color: var(--icon-link-hover-svg-color, currentColor);
}

.wm-with-icon-link[data-with-icon-variant="hidden-label"] svg {
  --icon-link-svg-height: 2ex;
}
/* -------------- END OF ICON LINK ------------- */

/** 
** BUTTON 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-button {
  display: var(--button-display, inline-flex);
  justify-content: var(--button-justify-content, center);
  align-items: var(--button-align-items, center);
  gap: var(--button-gap, var(--gutter));
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
  border-color: var(--button-border-color);
  border-radius: var(--button-radius, var(--radius-m));
  border-style: var(--button-border-style, solid);
  border-width: var(--button-border-width, var(--stroke-weight-light));
  box-shadow: var(--button-box-shadow, none);
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--button-font-family, var(--font-display));
  font-size: var(--button-font-size, var(--size-step--3));
  font-weight: var(--button-font-weight, var(--font-bold));
  letter-spacing: var(--button-kerning, var(--kerning));
  line-height: var(--button-line-height, var(--leading));
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  cursor: pointer;
}

.wm-button svg {
  width: auto;
  height: var(--button-svg-height, 1.75ex);
  color: var(--button-svg-color, currentColor);
}

.wm-button:hover svg {
  color: var(--button-hover-svg-color, currentColor);
}

.wm-button[data-button-variant="hidden-label"] {
  --button-border-color: var(--button-hidden-label-border-color);
  --button-bg: var(--button-hidden-label-bg);
  --button-text: var(--button-hidden-label-text);
  --button-padding: var(--button-hidden-label-padding);

  /* ↓ Web accessibility. See https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/ */
  min-height: var(--button-hidden-label-min-tap-size, 44px);
  min-width: var(--button-hidden-label-min-tap-size, 44px);
}

.wm-button[data-button-variant="hidden-label"] svg {
  --button-svg-height: 2ex;
}

.wm-button[data-button-variant="primary"] {
  --button-bg: var(--button-primary-bg);
  --button-text: var(--button-primary-text);
  --button-border-color: var(--button-primary-border-color);
}

.wm-button[data-button-variant="primary"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-primary-bg-hover);
  --button-text: var(--button-primary-text-hover);
  --button-border-color: var(--button-primary-border-color-hover);
}

.wm-button[data-button-variant="dark"] {
  --button-bg: var(--button-dark-bg);
  --button-text: var(--button-dark-text);
  --button-border-color: var(--button-dark-border-color);
  --button-svg-color: var(--button-dark-text);
  --focus-ring-color: var(--button-dark-bg);
}

.wm-button[data-button-variant="dark"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-dark-hover-bg);
  --button-text: var(--button-dark-hover-text);
  --button-border-color: var(--button-dark-hover-border-color);
}

.wm-button[data-button-variant="light"] {
  --button-bg: var(--button-light-bg);
  --button-text: var(--button-light-text);
  --button-border-color: var(--button-light-border-color);
  --focus-ring-color: var(--button-light-bg);
}

.wm-button[data-button-variant="light"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-light-bg-hover);
  --button-text: var(--button-light-text-hover);
  --button-border-color: var(--button-light-border-color-hover);
}

.wm-button[data-button-variant="ghost-dark"] {
  --button-bg: var(--button-ghost-dark-bg);
  --button-text: var(--button-ghost-dark-text);
  --button-border-color: var(--button-ghost-dark-border-color);
}

.wm-button[data-button-variant="ghost-dark"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-ghost-dark-bg-hover);
  --button-text: var(--button-ghost-dark-text-hover);
  --button-border-color: var(--button-ghost-dark-border-color-hover);
}

.wm-button[data-button-variant="ghost-light"] {
  --button-bg: var(--button-ghost-light-bg);
  --button-text: var(--button-ghost-light-text);
  --button-border-color: var(--button-ghost-light-border-color);
}

.wm-button[data-button-variant="ghost-light"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-ghost-light-bg-hover);
  --button-text: var(--button-ghost-light-text-hover);
  --button-border-color: var(--button-ghost-light-border-color-hover);
}

.wm-button[data-button-variant="ghost-primary"] {
  --button-bg: var(--button-ghost-primary-bg);
  --button-text: var(--button-ghost-primary-text);
  --button-border-color: var(--button-ghost-primary-border-color);
}

.wm-button[data-button-variant="ghost-primary"]:hover:not([aria-selected="true"]) {
  --button-bg: var(--button-ghost-primary-bg-hover);
  --button-text: var(--button-ghost-primary-text-hover);
  --button-border-color: var(--button-ghost-primary-border-color-hover);
}
/* -------------- END OF BUTTON ------------- */

/** 
** KEY VALUE GROUP
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-key-value-group {
  --key-value-group-calculated-block-padding: var(--key-value-group-block-padding, var(--space-s));

  display: grid;
  grid-template-columns: var(--key-value-group-grid-template-columns, max-content) 1fr;
  gap: 0;
  align-items: stretch;
}

.wm-key-value-group dt {
  grid-column: 1;
  align-content: center;
  margin: 0;
  font-family: var(--key-value-group-dt-font-family, var(--font-display));
  font-size: var(--key-value-group-dt-font-size, var(--size-step--1));
}

.wm-key-value-group :is(dt, dd) {
  padding-block: var(--key-value-group-calculated-block-padding);
}

.wm-key-value-group dd {
  grid-column: 2;
  align-content: center;
  margin: 0;
  padding-inline-start: var(--key-value-group-dd-inline-padding, var(--space-s));
  font-style: var(--key-value-group-dd-font-style, italic);
  font-size: var(--key-value-group-dd-font-size, var(--size-step--1));
  text-align: var(--key-value-group-dd-text-align, right);
}

.wm-key-value-group dd + dd {
  padding-block: 0;
}

.wm-key-value-group dd:has(+ dt) {
  padding-block-end: var(--key-value-group-calculated-block-padding);
}

.wm-key-value-group :is(dd + dt, dd + dt + dd) {
  border-block-start: var(--key-value-group-border-block-start, var(--stroke));
}

.wm-key-value-group :is(dt + dd + dd) {
  margin-block-start: calc(var(--key-value-group-calculated-block-padding) * -1);
}

.wm-key-value-group[data-key-value-group-variant="large-titles"] {
  --key-value-group-dt-font-size: var(--key-value-group-dt-large-font-size, var(--size-step-5));
}

.wm-key-value-group[data-key-value-group-variant="mega-titles"] {
  --key-value-group-dt-font-size: var(--key-value-group-dt-mega-font-size, var(--size-step-7));
}

[data-key-value-group-variant*="titles"] dt {
  letter-spacing: var(--heading-kerning);
  line-height: var(--leading-fine);
  text-transform: unset;
}
/* -------------- END OF KEY VALUE GROUP ------------- */

/** 
** SITE HEADER
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/

/* Site header container that is used for scroll-in / scroll-out effect */
#wm-scroll-header {
  --is-header-sticky: 1;
  --is-mobile-nav: 0;

  position: fixed;
  inset: 0 0 auto 0;
  transform: translateY(0%);
  transition: transform 350ms ease-out;
  z-index: 9998;
}

#wm-scroll-header[data-reveal="false"] {
  transform: translateY(-100%);
}

/* Progressive enhancement */
@supports (container-type: inline-size) {
  /* Currently "magic number" based on when children elements
  are intended to position themselves relative to the viewport
  instead of relative to the parent */
  @container (max-width: 666px) {
    #wm-scroll-header {
      --is-header-sticky: 0;
      --is-mobile-nav: 1;

      position: static;
      inset: unset;
      transform: unset;
    }

    /* Disable scroll-in / scroll-out effect  */
    #wm-scroll-header[data-reveal="false"] {
      transform: unset;
    }
  }
}
/* -------------- */

/* Site header content */
.wm-brand-header {
  --gutter-wrapper-inner-block: var(--space-m);
  --gutter-wrapper-inner-inline: var(--space-xm);
  --cluster-horizontal-alignment: space-between;
  --cluster-column-gap: var(--space-xl);

  background-color: var(--brand-header-bg, var(--color-dark-grey));
  background-color: #2a2c2e;
  --shadow-color: 0deg 0% 0%;
  box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.16), 0px 0.8px 0.8px -0.6px hsl(var(--shadow-color) / 0.15),
    0px 1.8px 1.8px -1.1px hsl(var(--shadow-color) / 0.14), 0.1px 3.4px 3.3px -1.7px hsl(var(--shadow-color) / 0.12),
    0.1px 6.4px 6.3px -2.3px hsl(var(--shadow-color) / 0.11), 0.2px 11px 10.8px -2.9px hsl(var(--shadow-color) / 0.1),
    0.3px 18px 17.7px -3.4px hsl(var(--shadow-color) / 0.09);
  color: var(--brand-header-color, var(--color-light-glare));
  border-radius: var(--radius-m);
}

.wm-brand-header__logo {
  display: inline-flex;
  align-items: center;
}

.wm-brand-header__logo svg {
  --logo-color: var(--color-light-glare);

  width: 100%;
  max-width: 175px;
  min-width: 100px;
  height: auto;
}

.wm-brand-header ul {
  --cluster-direction: var(--brand-header-nav-ul-cluster-direction, row);
  --cluster-wrap: var(--brand-header-nav-ul-wrap, wrap);
  --cluster-column-gap: var(--brand-header-nav-ul-cluster-column-gap, var(--space-l));
  --cluster-row-gap: var(--brand-header-nav-ul-cluster-row-gap, var(--space-xs));
  --cluster-horizontal-alignment: var(--brand-header-nav-ul-cluster-horizontal-alignment, flex-start);
  --cluster-vertical-alignment: var(--brand-header-nav-ul-cluster-vertical-alignment, center);

  list-style: none;
  padding-inline-start: 0;
}

@media (min-width: 50em) {
  .wm-brand-header {
    --cluster-column-gap: var(--space-2xl);
  }

  .wm-brand-header ul {
    --brand-header-nav-ul-cluster-column-gap: var(--brand-header-nav-ul-cluster-column-gap-md, var(--space-xl));
  }
}

.wm-brand-header :where(a, button, .wm-mini-cart-wrapper) {
  --stroke-width: 4;
  --button-hover-svg-color: var(--color-primary);
  --icon-link-hover-svg-color: var(--color-primary);

  color: inherit;
  font-family: var(--brand-header-nav-link-font-family, var(--font-accent));
  font-size: var(--brand-header-nav-link-font-size, var(--size-step-0));
  line-height: var(--brand-header-nav-link-line-height, var(--leading-slim));
  text-decoration: var(--brand-header-nav-link-text-decoration, none);
}

.wm-brand-header [data-nav-type="secondary"] a {
  background-color: #2a2c2e !important;
}

.wm-brand-header :where(a, button, .wm-mini-cart-wrapper):hover {
  color: var(--brand-heaver-nav-link-text-color-hover, var(--color-primary));
  text-decoration: var(--brand-header-nav-link-text-decoration-hover, underline);
}

.wm-brand-header .wp-block-search {
  --input-padding: 0.2em 0.5em;
  --input-icon-height: 3ex;

  flex-grow: 1;
  max-width: var(--measure-l);
}

[data-nav-type="secondary"] {
  --cluster-column-gap: var(--space-xs);
}

[data-nav-type="secondary"] ul {
  --brand-header-nav-ul-cluster-column-gap: var(--space-xs);
}

[data-nav-action="collections"] {
  order: 1;
}

[data-nav-action="account"] {
  order: 2;
}

[data-nav-action="cart"] {
  order: 3;
}

.wm-brand-header :where([data-nav-action="primary-nav-toggle"], [data-nav-action="search-toggle"]) {
  --button-display: none;
}
/* -------------- */

/* Progressive enhancement */
@supports (container-type: inline-size) {
  .wm-brand-header {
    --container-name: brandHeader;
    /* 
    ↓ As it's not possible to query a container against itself we place the rule 
    outside. Reduce space between brand header elements. As based on container 
    size we hide primary navigation while showing its toggle button. However,
    the <nav> element still stays as part of the header markup for accessibility
    reasons. This resulta in flex declaration on header do keep double column gap,
    although the <nav> element itself might have 0 dimension at specific container
    size.
     */
    --cluster-column-gap: var(--space-xl);
  }

  @container brandHeader (max-width: 1150px) {
    [data-nav-type="primary"] {
      display: none;
    }

    /* ↓ Make visible primary nav toggle only present inside of secondary nav */
    [data-nav-type="secondary"] [data-nav-action="primary-nav-toggle"] {
      --button-display: revert;
      /* Position the toggle on very left among siblings. Asusming no other
      such elements change their natural order/ */
      order: -1;
    }
  }

  @container brandHeader (max-width: 850px) {
    /* ↓ Push the search bor on its own row by occupying the entire space available */
    .wm-brand-header .wp-block-search {
      width: 100%;
      max-width: unset;
      /* ↓ Position the search bar at the very end of any brand header elements.
      Assuming no other such elemnts change their natural order. */
      order: 1;
    }
  }

  @container brandHeader (max-width: 600px) {
    /* ↓ Make visible all toggles */
    .wm-brand-header :where([data-nav-action="primary-nav-toggle"], [data-nav-action="search-toggle"]) {
      --button-display: revert;
    }

    .wm-brand-header .wp-block-search {
      display: none;
    }

    [data-nav-type="secondary"] {
      --cluster-wrap: no-wrap;
      --cluster-column-gap: var(--space-2xs);
      --icon-link-hidden-label-bg: var(--color-darklight-grey);

      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 15px;
      padding-block: var(--space-2xs);
      padding-inline: var(--space-2xs);
      border-radius: var(--radius-xs);
      background-color: var(--brand-header-bg, var(--color-darklight-grey));

      --shadow-color: 0deg 0% 0%;
      box-shadow: 0px 0.2px 0.2px hsl(var(--shadow-color) / 0.16),
        0px 0.8px 0.8px -0.6px hsl(var(--shadow-color) / 0.15), 0px 1.8px 1.8px -1.1px hsl(var(--shadow-color) / 0.14),
        0.1px 3.4px 3.3px -1.7px hsl(var(--shadow-color) / 0.12),
        0.1px 6.4px 6.3px -2.3px hsl(var(--shadow-color) / 0.11),
        0.2px 11px 10.8px -2.9px hsl(var(--shadow-color) / 0.1),
        0.3px 18px 17.7px -3.4px hsl(var(--shadow-color) / 0.09);

      border: 1px solid var(--color-grey-4);
      z-index: 9999;
    }

    /* ↓ Re-arrange order of secondary nav actions */
    [data-nav-type="secondary"] ul {
      /* ↓ "Flatten" the ul elements. Thus we can shuffle flex order on parent level */
      display: contents;
    }

    [data-nav-action="primary-nav-toggle"] {
      order: 1;
    }

    [data-nav-action="collections"] {
      order: 2;
    }

    [data-nav-action="search-toggle"] {
      order: 3;
    }

    [data-nav-action="account"] {
      order: 4;
    }

    [data-nav-action="cart"] {
      order: 5;
    }

    [data-nav-type="secondary"] :where(a, button) {
      border: 1px solid var(--color-grey-4);
      border-radius: var(--radius-xs);
      background-color: var(--my-color);
    }
  }
}
/* -------------- */

/* Site header primary nav drawer  */
#wm-primary-nav-drawer {
  --repel-direction: row-reverse;
}

#wm-primary-nav-drawer nav {
  flex-grow: 1;
}

#wm-primary-nav-drawer ul {
  --cluster-direction: column;
  --cluster-vertical-alignment: stretch;

  list-style: none;
  padding-inline-start: 0;
}

#wm-primary-nav-drawer :where(a, button, .wm-mini-cart-wrapper) {
  --stroke-width: 4;
  --button-hover-svg-color: var(--color-primary);
  --icon-link-hover-svg-color: var(--color-primary);

  color: inherit;
  font-family: var(--font-accent);
  font-size: var(--size-step-1);
  line-height: var(--leading-slim);
  text-decoration: none;
}

#wm-primary-nav-drawer :where(a, button, .wm-mini-cart-wrapper):hover {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
}

#wm-primary-nav-drawer ul :where(a) {
  display: inline-flex;
  width: 100%;
}
/* -------------- */

/* -------------- END OF SITE HEADER ------------- */

/** 
** DRAWER OVERLAY
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* --drawer-content-max-width (550px): 
*
* EXCEPTIONS:
*
* [data-direction='rtl']: flips the drawer content to be on the right 
*/
.wm-drawer {
  --drawer-content-max-width: 550px;
  --drawer-content-bg: var(--color-global-bg);
  --drawer-overlay-bg: rgba(95, 95, 95, 0.35);
  --drawer-separator-thickness: 2px;
  --drawer-separator-color: inherit;
  --drawer-separator-color-opacity: 0.3;
  --focus-ring-color: var(--color-dark-shade);

  display: grid;
  grid-template-columns: minmax(0, var(--drawer-content-max-width)) 1fr;
  grid-template-areas: "drawer-content drawer-overlay";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  /* ↓ visibility: hidden is not animatable — it switches instantly. */
  visibility: hidden;
  /* ↓ delay hiding visibility */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  z-index: 9999;
}

.wm-drawer[data-direction="rtl"] {
  --drawer-is-right-border: 0;
  --drawer-is-left-border: 1;

  grid-template-columns: 1fr minmax(0, var(--drawer-content-max-width));
  grid-template-areas: "drawer-overlay drawer-content";
}

.wm-drawer[open] {
  opacity: 1;
  visibility: visible;
  /* ↓ no delay in visibility on modal reveal */
  transition: opacity 0.3s ease, visibility 0s;
}

/* Drawer overlay area */
.wm-drawer::before {
  grid-area: drawer-overlay;
  grid-column: 1/-1;
  content: "";
  background: var(--drawer-overlay-bg);
}
/* -------------- */

/* Imitate close button when hovering over drawer overlay as 
progressive enhancement as addition to "click outside" event listeners */
.wm-drawer:hover:not(:has(.wm-drawer__content:hover)) {
  --cursor-close-svg-url: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z' fill='%23252627' fill-opacity='0.12'/%3E%3Cpath d='M24 47C36.7025 47 47 36.7025 47 24C47 11.2975 36.7025 1 24 1C11.2975 1 1 11.2975 1 24C1 36.7025 11.2975 47 24 47Z' fill='white'/%3E%3Cpath d='M19 19L29 29M19 29L29 19.0009' stroke='%23252627' stroke-width='1.5'/%3E%3C/svg%3E");

  cursor: var(--drawer-overlay-hover-cursor, var(--cursor-close-svg-url)) 28 28, auto;
}
/* -------------- */

.wm-drawer__content {
  --stack-vertical-alignment: flex-end;
  --stack-space: var(--space-xs-s);

  grid-area: drawer-content;
  inline-size: 100%;
  background: var(--drawer-content-bg);
  transition: transform 0.3s;
  transform: translateX(100%);
  overflow-y: auto;
}

.wm-drawer[open] .wm-drawer__content {
  transform: translateX(0%);
}

/* Drawer separator line */
.wm-drawer__content::after {
  /* ↓ By default it is considered that the drawer content is located on the left side.
  Thus we place imitation of drawer separator on the left side */
  --border-left-width: calc(var(--drawer-separator-thickness, 0) * var(--drawer-is-left-border, 0));
  --border-right-width: calc(var(--drawer-separator-thickness, 0) * var(--drawer-is-right-border, 1));

  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-style: solid;
  border-width: 0 var(--border-right-width) 0 var(--border-left-width);
  border-color: var(--drawer-separator-color);
  opacity: var(--drawer-separator-color-opacity);
  pointer-events: none;
}
/* -------------- */

/* Drawer toggle button */
.wm-drawer .wm-drawer__close-button {
  position: sticky;
  top: 0;
  right: 0;
  align-self: flex-end;
  padding: 0.5em;
  border: 1px solid var(--color-dark-shade);
  border-radius: var(--radius-xs);
  color: var(--color-dark-shade);
  background: var(--color-light);
  font: inherit;
}

.wm-drawer .wm-drawer__close-button svg {
  --button-svg-height: 3ex;
  --button-svg-height: 16px;
  --button-svg-color: var(--color-dark-shade);
}
/* -------------- */
/* -------------- END OF DRAWER OVERLAY ------------- */

/** 
** SITE FOOTER 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-brand-footer {
  --gutter-wrapper-inner-block: var(--space-s);
  --gutter-wrapper-inner-inline: var(--space-s);
  --region-space: var(--space-s);
  --stack-space: var(--space-xl);
  --full-bleed-bg-color: var(--brand-footer-bg, var(--color-dark-grey));

  padding-bottom: calc(var(--is-mobile-nav, 0) * var(--mobile-nav-height, 0) * 1.2 + var(--region-space)) !important;
  color: var(--brand-footer-color, var(--color-light-glare));
  background-color: var(--full-bleed-bg-color);
  font-size: var(--size-step--1);
  font-family: var(--font-base);
}

.wm-brand-footer ul {
  list-style: none;
  padding-inline-start: 0;
}

.wm-brand-footer :where(a, button) {
  --stroke-width: 4;
  --button-hover-svg-color: var(--color-primary);
  --icon-link-hover-svg-color: var(--color-primary);

  color: inherit;
  line-height: var(--brand-header-nav-link-line-height, var(--leading-slim));
  text-decoration: var(--brand-header-nav-link-text-decoration, none);
}

.wm-brand-footer :where(a, button):hover {
  color: var(--brand-heaver-nav-link-text-color-hover, var(--color-primary));
  text-decoration: var(--brand-header-nav-link-text-decoration-hover, underline);
}

.wm-address {
  --flow-space: var(--space-2xs);
}

.wm-address__location {
  --border-offest: 7px;

  display: inline-block;
  border-left: 1px solid var(--color-light-glare);
  padding-left: var(--border-offest);
  margin-left: calc(var(--border-offest) * -1);
  margin-block-end: 0.5em;
}

.wm-address__location .wm-mobile-only {
  display: block;
}

@media (min-width: 666px) {
  .wm-address__location {
    border: none;
    margin-block-end: 0;
  }

  .wm-address__location .wm-mobile-only {
    display: none;
  }
}

.wm-brand-footer__address > svg {
  width: 2.25rem;
  height: auto;
  padding: 0.3rem;
  border: 1px solid var(--color-primary);
  border-radius: 100vh;
}

.wm-brand-footer__links {
  --cluster-direction: column;
  --cluster-vertical-alignment: stretch;
}

.wm-brand-footer__links ul :where(a) {
  display: inline-flex;
  width: 100%;
}

.wm-brand-footer__social {
  --stack-space: var(--space-2xs);

  align-self: flex-end;
}

.wm-brand-footer__social > .wm-icon {
  --book-1-color: var(--color-primary);
  --book-2-color: var(--color-light-glare);
  --book-3-color: var(--color-light-glare);
  --book-4-color: var(--color-light-glare);
  --book-5-color: var(--color-light-glare);

  align-self: center;
  width: 100%;
  max-width: 175px;
  min-width: 100px;
  height: auto;
}

.wm-brand-footer__social ul {
  --cluster-column-gap: var(--space-xs);
}

.wm-brand-footer__social [data-with-icon-variant="hidden-label"] svg {
  --icon-link-svg-height: 2rem;
}

.wm-brand-footer__copyright {
  --repel-column-gap: var(--space-2xl);
  --gutter-wrapper-inner-block: var(--space-xs-s);
}
/* -------------- END OF SITE FOOTER ------------- */

/** 
** ITEMS SHOWCASE 
*
* A block that allows to
*
* CUSTOM PROPERTIES AND CONFIGURATION:
*
* EXCEPTIONS:
*
*/
.wm-items-showcase {
  --region-space: var(--space-2xl);
  --full-bleed-bg-color: var(--color-dark-grey);

  color: var(--color-light-glare);
  background-color: var(--full-bleed-bg-color);
}

.wm-authors > a {
  display: flex;
  min-height: 8rem;
}

.wm-authors > a:hover {
  text-decoration: none;
}

.wm-authors > a:hover .wm-author-card {
  background-color: #f7edc8;
}

.wm-author-card {
  --cluster-wrap: no-wrap;
  --cluster-vertical-alignment: stretch;
  --cluster-column-gap: 0;

  flex-grow: 1;
  color: var(--color-dark-shade);
  background-color: var(--color-light-glare);
  border-radius: var(--radius-m);
  font-size: var(--size-step--2);
}

.wm-author__img {
  display: inline-flex;
  justify-content: center;
  min-width: 6rem;
  height: auto;
  background-color: var(--color-grey-12);
  border-radius: var(--radius-m) 0 0 var(--radius-m);
}

.wm-author__img svg {
  width: 100%;
  max-width: 3rem;
  height: auto;
}

.wm-authors > a:nth-child(5n + 1) .wm-author__img svg {
  --book-1-color: var(--color-primary);
  --book-2-color: var(--color-light-glare);
  --book-3-color: var(--color-light-glare);
  --book-4-color: var(--color-light-glare);
  --book-5-color: var(--color-light-glare);
}

.wm-authors > a:nth-child(5n + 2) .wm-author__img svg {
  --book-1-color: var(--color-light-glare);
  --book-2-color: var(--color-primary);
  --book-3-color: var(--color-light-glare);
  --book-4-color: var(--color-light-glare);
  --book-5-color: var(--color-light-glare);
}

.wm-authors > a:nth-child(5n + 3) .wm-author__img svg {
  --book-1-color: var(--color-light-glare);
  --book-2-color: var(--color-light-glare);
  --book-3-color: var(--color-primary);
  --book-4-color: var(--color-light-glare);
  --book-5-color: var(--color-light-glare);
}

.wm-authors > a:nth-child(5n + 4) .wm-author__img svg {
  --book-1-color: var(--color-light-glare);
  --book-2-color: var(--color-light-glare);
  --book-3-color: var(--color-light-glare);
  --book-4-color: var(--color-primary);
  --book-5-color: var(--color-light-glare);
}

.wm-authors > a:nth-child(5n + 5) .wm-author__img svg {
  --book-1-color: var(--color-light-glare);
  --book-2-color: var(--color-light-glare);
  --book-3-color: var(--color-light-glare);
  --book-4-color: var(--color-light-glare);
  --book-5-color: var(--color-primary);
}

.wm-author__stats {
  max-width: var(--measure-xs);
  padding: var(--space-2xs-xs);
}

.wm-search-cta {
  /* --cluster-wrap: no-wrap; */
  --cluster-column-gap: var(--space-l-3xl);
  --cluster-horizontal-alignment: center;
  padding: var(--space-m);

  color: var(--color-light-glare);
  background-color: var(--color-dark-grey);
  border-radius: var(--radius-m);
  text-decoration: none;
}

.wm-search-cta .wm-content {
  max-width: 35ch;
}

.wm-search-cta .wm-icon {
  width: auto;
  height: var(--space-3xl-4xl);

  padding: var(--space-s-m);
  color: var(--color-dark-grey);
  background-color: var(--color-primary);
  border-radius: var(--radius-m);
}

.wm-search-cta:hover .wm-icon {
  color: var(--color-dark);
  background-color: #f1a72b;
}

.wm-cta-group .wm-action-call {
  --button-padding: var(--space-l-xl);
  --button-font-size: var(--size-step-0);
  --button-primary-bg: var(--color-dark-grey);
  --button-primary-text: var(--color-light-glare);
  --button-primary-border-color: var(--color-dark-grey);
}

.wm-action-call {
  display: grid;
  grid-template-areas: "content";
  overflow: hidden;
}

.wm-action-call > * {
  grid-area: content;
  z-index: 2;
}

.wm-action-call .wm-decor-bg {
  position: relative;
  place-self: start;
  margin-left: calc(-1 * var(--button-padding) / 2);
  color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.wm-action-call .wm-decor-bg > *:first-child {
  position: absolute;
  left: 200%;
  top: -135%;
  transform: scale(4);
}

.wm-action-call .wm-decor-bg > *:last-child {
  transform: scale(2.5);
}
/* -------------- END OF ITEMS SHOWCASE ------------- */

/** 
** SINGLE PRODUCT TEMPLATE
*
*/
.wm-single-product {
  border-radius: var(--radius-m);
  background-color: var(--color-dark-grey);
  color: var(--color-light-glare);
}

.wm-single-product__content {
  --sidebar-gutter: var(--space-s-l);
  --sidebar-wrap-at: 46%;
  --sidebar-target-size: 55ch;
}

/* Product breadcrumbs */
.wm-single-product .woocommerce-breadcrumb {
  opacity: 0.8;
}
/* -------------- */

/* Product Gallery */
.wm-single-product .wp-block-woocommerce-product-image-gallery {
  max-width: 400px;
}

.wm-single-product :where(.woocommerce-product-gallery__image, img) {
  border-radius: var(--radius-xs);
}

.wm-single-product .woocommerce-product-gallery * > :has(img) {
  border-radius: var(--radius-xs);
  /* background-color: var(--color-grey-6); */
}

.wm-single-product .wp-block-woocommerce-product-image-gallery .flex-control-thumbs {
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs) !important;
}

.wm-single-product .wp-block-woocommerce-product-image-gallery .flex-control-thumbs > * {
  flex-grow: 1;
}

.wm-single-product .woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius-xs);
  box-shadow: 10px 40px 40px -10px #00000030;
}

.wm-single-product .woocommerce-product-gallery [data-thumb] {
  display: grid !important;
  grid-template-areas: "content";
}

.wm-single-product .woocommerce-product-gallery [data-thumb] > a {
  grid-area: content;
  order: 1;
}

.wm-single-product .woocommerce-product-gallery [data-thumb]::before {
  content: "";
  grid-area: content;
  order: 2;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-xs);
  box-shadow: inset 4px 1px 3px hsla(0, 0%, 100%, 0.376), inset 0 -1px 2px hsla(0, 0%, 0%, 0.502);
  pointer-events: none;
}

.wm-single-product .woocommerce-product-gallery [data-thumb]::after {
  content: "";
  grid-area: content;
  order: 3;
  width: 20px;
  height: 100%;
  margin-left: 10px;
  border-left: 2px solid #00000010;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0.2) 0%, hsla(0, 0%, 100%, 0) 100%);
  pointer-events: none;
}
/* -------------- */

/* Product Title */
.wm-single-product .wp-block-post-title {
  font-size: var(--size-step-4);
}
/* -------------- */

/* Product Rating */
.wm-single-product .woocommerce-review-link {
  color: var(--color-light-glare);
}
.wm-single-product .rating::before {
  color: var(--color-primary) !important;
}
/* -------------- */

/* Product Price */
.wm-single-product .wc-block-components-product-price {
  font-size: var(--size-step-3) !important;
}
/* -------------- */

/* Product CTAs */
.wm-single-product .single_add_to_cart_button {
  --button-bg: var(--button-primary-bg);
  --button-text: var(--button-primary-text);
  --button-border-color: var(--button-primary-border-color);

  display: var(--button-display, inline-flex);
  justify-content: var(--button-justify-content, center);
  align-items: var(--button-align-items, center);
  gap: var(--button-gap, var(--gutter));
  padding: var(--button-padding, var(--space-xs, 0.8em) var(--space-m, 2em));
  border-color: var(--button-border-color);
  border-radius: var(--button-radius, var(--radius-s));
  border-style: var(--button-border-style, solid);
  border-width: var(--button-border-width, var(--stroke-weight-light));
  box-shadow: var(--button-box-shadow, none);
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--button-font-family, var(--font-display));
  font-size: var(--button-font-size, var(--size-step--1));
  font-weight: var(--button-font-weight, var(--font-bold));
  letter-spacing: var(--button-kerning, var(--kerning));
  line-height: var(--button-line-height, var(--leading));
  text-decoration: none;
  text-transform: var(--button-text-transform, uppercase);
  white-space: nowrap;
  cursor: pointer;
}

.wm-single-product .quantity input[type="number"] {
  --button-bg: var(--button-primary-bg);
  --button-text: var(--button-primary-text);
  --button-border-color: var(--button-primary-border-color);
  --button-border-width: 2px;

  font-size: var(--button-font-size, var(--size-step--1));
  outline: 2px solid var(--button-border-color);
}

.wm-single-product .wp-block-add-to-cart-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wm-single-product .wp-block-add-to-cart-form form.cart {
  margin-bottom: 0 !important;
}
/* -------------- */

/* Product Summary */
.wm-single-product__summary {
  align-self: flex-start;
  padding: var(--space-m);
  color: var(--color-dark-shade);
  background-color: var(--color-light-glare);
  border-radius: var(--radius-s);
}

.wm-single-product__summary .wm-button {
  color: var(--color-dark-shade);
  text-decoration: underline;
  font-size: var(--size-step-0);
}

#wm-book-summary-drawer {
  --drawer-content-max-width: var(--measure);

  margin-block-start: 0;
}
#wm-book-summary-drawer .wm-drawer__content {
  --stack-vertical-alignment: flex-start;
}
/* -------------- */

/* Product Reviews */
.wm-product-reviews .woocommerce-Reviews-title {
  margin-top: 24px;
  margin-bottom: 24px;
  font-size: var(--size-step-3);
  max-width: unset;
}

.wm-product-reviews .woocommerce-Reviews-title span {
  font-size: var(--size-step--1);
  font-weight: normal;
}

/* See https://www.youtube.com/watch?v=LEkFckg7sfw */
.wm-product-reviews .commentlist {
  /* user setting */
  --min-column-size: 35ch;
  --column-count: 2;
  --gap: var(--space-2xs);

  /* calculations */
  --breakpoint: calc(var(--min-column-size) * var(--column-count) + (var(--gap) * (var(--column-count) - 1)));
  --column-size: calc((100% / var(--column-count)) - var(--gap));

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(max(var(--column-size), (100% - var(--breakpoint)) * -999), 100%), 1fr)
  );
  align-items: start;

  padding-inline-start: 0;
}

.acf-field-66faddc055888 {
  display: none !important;
}

.wm-product-reviews .commentlist::before {
  display: none !important;
}

.wm-product-reviews .commentlist > li {
  padding: var(--space-s) !important;
  border-radius: var(--radius-m);
  color: var(--color-dark-shade);
  background: var(--color-light-glare) !important;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  border-radius: var(--radius-s);
}

.woocommerce-Reviews input.submit {
  color: black;
}
/* -------------- */
/* -------------- END OF SINGLE PRODUCT TEMPLATE ------------- */

/* -------------- MARQUEE HEADING RIBBON ------------- */
.wm-marquee {
  --marquee-bg-color: var(--color-primary);

  display: grid;
  grid-template-areas: "container";
  justify-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--marquee-bg-color);
}

.wm-marquee > * {
  grid-area: container;
}

.wm-marquee > *:first-child {
  max-width: unset;
  margin: unset !important;
  z-index: 1;
}

.wm-marquee__content {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  /* max-width: unset;
  min-width: 100%; */
  margin: unset !important;
  color: #f4ba30;
  user-select: none;
}

.wm-marquee__content > * {
  /* white-space: nowrap; */
  flex-shrink: 0;
  max-width: unset;
}
/* -------------- END OF MARQUEE HEADING RIBBON ------------- */

/* -------------- SEARCH FILTERS ------------- */
.wm-search-filters {
  --label-font-size: var(--size-step-0);

  padding: var(--space-s);
  border-radius: var(--radius-m);
  color: var(--color-dark-shade);
  background: var(--color-light-glare);
  font-family: var(--font-base);
  font-size: var(--size-step--2);
}

/* Hide sidebar due to search filters toggle button appearance */
@media screen and (max-width: 768px) {
  .wm-shop-layout {
    --sidebar-wrap-at: 100%;
  }

  .wm-search-filters {
    padding: 0;
    background: none;
  }
}

/* --- Filter chips --- */
.wpc-filter-chips-list a {
  padding: var(--space-2xs) var(--space-xs) !important;
  color: var(--color-light-glare) !important;
  background-color: var(--color-grey-4);
  border-color: hsl(220, 5%, 12%) !important;
}

.wpc-filter-chips-list a:hover .wpc-chip-remove-icon {
  color: var(--color-error) !important;
}

.wpc-filter-chips-list .wpc-chip-reset-all a {
  background-color: hsl(220, 5%, 12%);
  border-color: var(--color-error) !important;
}

.wpc-filter-chips-list .wpc-chip-reset-all a:hover {
  background-color: hsl(216, 6%, 15%);
}
/* -------------- */

.wm-search-filters a {
  color: var(--color-dark-shade);
}

.wm-search-filters .wpc-filter-title {
  font-family: var(--font-display);
  font-size: var(--size-step--1);
  font-weight: var(--font-bold);
  text-transform: uppercase;
}

.wm-search-filters :where(input[type="text"], input[type="number"], .select2-selection--single) {
  --focus-ring-offset: 0;

  border-radius: var(--radius-s) !important;
  background-color: var(--color-grey-16) !important;
  color: var(--color-grey-6) !important;
  font-size: var(--size-step--1) !important;
  font-family: var(--font-display) !important;
}

/* --- Dropdown List --- */
.wm-search-filters .select2-selection__arrow > b {
  /* ↓ artifcat with arrow icon */
  background: none !important;
}

.wm-search-filters .select2-selection,
.wm-search-filters .select2-selection__arrow {
  border-radius: var(--radius-s) !important;
}
/* -------------- */

/* --- Hierarchy List --- */
.wm-search-filters .wpc-filter-has-hierarchy .wpc-term-item-content-wrapper {
  padding-right: unset !important;
}

.wm-search-filters .wpc-toggle-children-list {
  --tap-area-target-size: 44px;

  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="hsl(40, 2%, 38%)"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.5rem;
}

/* ↓ Align term count on the right */
.wm-search-filters .wpc-checkbox-item label {
  flex-grow: 1;
  justify-content: space-between !important;
}

.wm-search-filters .wpc-checkbox-item label a {
  flex-grow: 1;
}

.wm-search-filters .wpc-checkbox-item .wpc-term-count {
  text-align: end;
}
/* --- ↑ --- */

/* ↓ Increase dropdown arrow target size. */
.wm-search-filters i.wpc-toggle-children-list::after {
  content: "" !important;
  position: absolute !important;
  inset: 50% !important;
  min-width: var(--tap-area-target-size) !important;
  min-height: var(--tap-area-target-size) !important;
  margin: auto !important;
  background-color: unset;
  transform: translate(-50%);
}

.wm-search-filters i.wpc-toggle-children-list:hover::after {
  background-color: unset;
}

.wm-search-filters i.wpc-toggle-children-list::before {
  display: none;
}

.wm-search-filters .wpc-has-children.wpc-opened i.wpc-toggle-children-list {
  transform: rotate(180deg);
}
/* -------------- */

/* --- Filter toggle button --- */
.wpc-filters-open-button-container {
  margin: 0 !important;
}

.wpc-filters-open-widget {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px !important;
  border-radius: var(--radius-xs) !important;
  border-color: var(--color-grey-4) !important;
  color: var(--color-light-glare) !important;
  background-color: var(--brand-header-bg, var(--color-darklight-grey)) !important;
}

:where(.wpc-widget-close-icon, .wpc-filters-open-widget) .wpc-icon-html-wrapper br {
  display: none;
}

.wpc-filters-open-widget .wpc-icon-html-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpc-filters-open-widget .wpc-icon-html-wrapper span {
  background: var(--color-light-glare);
}

/* On mobile make search toggle sticky to the viewport */
@media screen and (max-width: 768px) {
  .wm-shop-layout .wpc-filters-open-button-container {
    position: fixed;
    bottom: calc(15px * 1.5 + var(--mobile-nav-height));
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
  }
}
/* -------------- */

/* --- Filter mobile action toggles --- */
.wpc-filters-apply-button,
.wpc-filters-close-button {
  padding-top: calc(0.667em + 2px) !important;
  padding-right: calc(1.333em + 2px) !important;
  padding-bottom: calc(0.667em + 2px) !important;
  padding-left: calc(1.333em + 2px) !important;
  border-radius: var(--radius-xs) !important;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-size: 1rem !important;
  color: var(--color-dark-shade) !important;
  box-shadow: inset 0 0 0 1px currentColor !important;
  border-width: 0 !important;
}

.wpc-filters-apply-button {
  background: var(--color-primary) !important;
}
/* -------------- */
/* -------------- END OF SEARCH FILTERS ------------- */

/* -------------- SHOP LAYOUT ------------- */
.wm-shop-layout .wc-block-components-notice-banner {
  margin-top: 0;
}

/* --- Pagination --- */
.wm-shop-layout .wp-block-query-pagination {
  color: var(--color-light-glare);
}

.wm-shop-layout .wp-block-query-pagination :where(a, .current) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 100vh;
  border: 1px solid var(--color-grey-4);
  color: var(--color-light-glare);
  background-color: #222325;
  text-decoration: none;
}

.wm-shop-layout .wp-block-query-pagination .current {
  background-color: #050606;
}

.wm-shop-layout
  .wp-block-query-pagination
  :where(.wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
  padding: var(--space-2xs) var(--space-xs);
  background-color: #1a1b1d;
}

.wm-shop-layout .wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: flex;
  gap: var(--space-2xs);
}

.wm-shop-layout .wp-block-query-pagination .page-numbers {
  aspect-ratio: 1/1;
}
/* -------------- */
/* -------------- END OF SHOP LAYOUT ------------- */