/** Shopify CDN: Minification failed

Line 3629:0 Expected identifier but found "1.3rem"
Line 3747:0 Unexpected "}"

**/
/*============================================================================
 
Green Witch Shopify Theme
  Copyright 2024 Dreamshack All Rights Reserved

==============================================================================*/


:root {
  /* ---- Dark-theme backdrop controls -------------------------------------
     --backdrop-darken : black laid over the fixed texture behind every page.
                         0 = original texture, 1 = solid black.
     --scrim-darken    : the full-screen dimmer behind open drawers (cart,
                         menu, mega-menu, mobile filters). Stock Green Witch
                         tinted these with the sand foreground colour, which
                         washes a dark theme milky instead of dimming it.
     Both are plain numbers so they can be tuned in one place.            */
  --backdrop-darken: 0.6;
  --scrim-darken: 0.6;

  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.85;
  --alpha-badge-border: 0.1;
}

.product-card-wrapper .card,
.contains-card--product {
  --border-radius: var(--product-card-corner-radius);
  --border-width: var(--product-card-border-width);
  --border-opacity: var(--product-card-border-opacity);
  --shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--product-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--product-card-shadow-blur-radius);
  --shadow-opacity: var(--product-card-shadow-opacity);
  --shadow-visible: var(--product-card-shadow-visible);
  --image-padding: var(--product-card-image-padding);
  --text-alignment: var(--product-card-text-alignment);
}

.collection-card-wrapper .card,
.contains-card--collection {
  --border-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}

.article-card-wrapper .card,
.contains-card--article {
  --border-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}

.contains-content-container,
.content-container {
  --border-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --border-radius: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* base */

.no-js:not(html) {
  display: none !important;
}

html.no-js .no-js:not(html) {
  display: block !important;
}

.no-js-inline {
  display: none !important;
}

html.no-js .no-js-inline {
  display: inline-block !important;
}

html.no-js .no-js-hidden {
  display: none !important;
}

.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
  max-width: 100%;
}

.page-width.drawer-menu {
  max-width: 100%;
}

.page-width-desktop {
  padding: 0;
  margin: 0 auto;
}

.utility-bar__grid.page-width {
  padding-left: 3rem;
  padding-right: 3rem;
}

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 5rem;
  }

  .header.page-width,
  .utility-bar__grid.page-width {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .page-width--narrow {
    padding: 0 9rem;
  }

  .page-width-desktop {
    padding: 0;
  }

  .page-width-tablet {
    padding: 0 5rem;
  }
}

@media screen and (min-width: 990px) {
  .header:not(.drawer-menu).page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }

  .page-width-desktop {
    max-width: var(--page-width);
    padding: 0 5rem;
  }
}

.isolate {
  position: relative;
  z-index: 0;
}

.section + .section {
  margin-top: var(--spacing-sections-mobile);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-sections-desktop);
  }
}

.element-margin-top {
  margin-top: 5rem;
}

@media screen and (min-width: 750px) {
  .element-margin {
    margin-top: calc(5rem + var(--page-width-margin));
  }
}

.background-secondary {
  background-color: rgba(var(--color-foreground), 0.04);
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  word-wrap: normal !important;
}

.visually-hidden--inline {
  margin: 0;
  height: 1em;
}

.overflow-hidden {
  overflow: hidden;
}

.skip-to-content-link:focus {
  z-index: 9999;
  position: inherit;
  overflow: auto;
  width: auto;
  height: auto;
  clip: auto;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

::selection {
  background-color: rgba(var(--color-foreground), 0.2);
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
}

h1,
h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

.hxl {
  font-size: calc(var(--font-heading-scale) * 5rem);
}

@media only screen and (min-width: 750px) {
  .hxl {
    font-size: calc(var(--font-heading-scale) * 6.2rem);
  }
}

.h0 {
  font-size: calc(var(--font-heading-scale) * 4rem);
}

@media only screen and (min-width: 750px) {
  .h0 {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
  }
}

h1,
.h1 {
  font-size: calc(var(--font-heading-scale) * 3rem);
}

@media only screen and (min-width: 750px) {
  h1,
  .h1 {
    font-size: calc(var(--font-heading-scale) * 4rem);
  }
}

h2,
.h2 {
  font-size: calc(var(--font-heading-scale) * 2rem);
}

@media only screen and (min-width: 750px) {
  h2,
  .h2 {
    font-size: calc(var(--font-heading-scale) * 2.4rem);
  }
}

h3,
.h3 {
  font-size: calc(var(--font-heading-scale) * 1.7rem);
}

@media only screen and (min-width: 750px) {
  h3,
  .h3 {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

h4,
.h4 {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-size: calc(var(--font-heading-scale) * 1.5rem);
}

h5,
.h5 {
  font-size: calc(var(--font-heading-scale) * 1.2rem);
}

@media only screen and (min-width: 750px) {
  h5,
  .h5 {
    font-size: calc(var(--font-heading-scale) * 1.3rem);
  }
}

h6,
.h6 {
  color: rgba(var(--color-foreground), 0.75);
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

blockquote {
  font-style: italic;
  color: rgba(var(--color-foreground), 0.75);
  border-left: 0.2rem solid rgba(var(--color-foreground), 0.2);
  padding-left: 1rem;
}

@media screen and (min-width: 750px) {
  blockquote {
    padding-left: 1.5rem;
  }
}

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: calc(1 + 0.7 / var(--font-body-scale));
}

@media screen and (min-width: 750px) {
  .caption {
    font-size: 1.2rem;
  }
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  text-transform: uppercase;
}

.caption-with-letter-spacing--medium {
  font-size: 1.2rem;
  letter-spacing: 0.16rem;
}

.caption-with-letter-spacing--large {
  font-size: 1.4rem;
  letter-spacing: 0.18rem;
}

.caption-large,
.customer .field input,
.customer select,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: calc(1 + 0.5 / var(--font-body-scale));
  letter-spacing: 0.04rem;
}

.color-foreground {
  color: rgb(var(--color-foreground));
}

table:not([class]) {
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 1.4rem;
  border-style: hidden;
  box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.2);
  /* draws the table border  */
}

table:not([class]) td,
table:not([class]) th {
  padding: 1em;
  border: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

@media screen and (max-width: 749px) {
  .small-hide {
    display: none !important;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .medium-hide {
    display: none !important;
  }
}

@media screen and (min-width: 990px) {
  .large-up-hide {
    display: none !important;
  }
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.uppercase {
  text-transform: uppercase;
}

.light {
  opacity: 0.7;
}

a:empty,
ul:empty,
dl:empty,
div:empty,
section:empty,
article:empty,
p:empty,
h1:empty,
h2:empty,
h3:empty,
h4:empty,
h5:empty,
h6:empty {
  display: none;
}

.link,
.customer a {
  cursor: pointer;
  display: inline-block;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  color: rgb(var(--color-link));
  background-color: transparent;
  font-size: 1.4rem;
  font-family: inherit;
}

.link--text {
  color: rgb(var(--color-foreground));
}

.link--text:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.link-with-icon {
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
}

a:not([href]) {
  cursor: not-allowed;
}

.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

.placeholder {
  background-color: rgba(var(--color-foreground), 0.04);
  color: rgba(var(--color-foreground), 0.55);
  fill: rgba(var(--color-foreground), 0.55);
}

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}

:root {
  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-announcement-bar: 250ms;
  --duration-medium: 300ms;
  --duration-long: 500ms;
  --duration-extra-long: 600ms;
  --duration-extended: 3s;
  --ease-out-slow: cubic-bezier(0, 0, 0.3, 1);
  --animation-slide-in: slideIn var(--duration-extra-long) var(--ease-out-slow) forwards;
  --animation-fade-in: fadeIn var(--duration-extra-long) var(--ease-out-slow);
}

.underlined-link,
.customer a,
.inline-richtext a {
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness ease 100ms;
}

.underlined-link,
.customer a {
  color: rgba(var(--color-link), var(--alpha-link));
}

.inline-richtext a,
.rte.inline-richtext a {
  color: currentColor;
}

.underlined-link:hover,
.customer a:hover,
.inline-richtext a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.icon-arrow {
  width: 1.5rem;
}

h3 .icon-arrow,
.h3 .icon-arrow {
  width: calc(var(--font-heading-scale) * 1.5rem);
}

/* arrow animation */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

/* base-details-summary */
summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

summary .icon-caret {
  position: absolute;
  height: 0.6rem;
  right: 1.5rem;
  top: calc(50% - 0.2rem);
}

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

.disclosure-has-popup {
  position: relative;
}

.disclosure-has-popup[open] > summary::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  cursor: default;
  content: ' ';
  background: transparent;
}

.disclosure-has-popup > summary::before {
  display: none;
}

.disclosure-has-popup[open] > summary + * {
  z-index: 100;
}

@media screen and (min-width: 750px) {
  .disclosure-has-popup[open] > summary + * {
    z-index: 4;
  }

  .facets .disclosure-has-popup[open] > summary + * {
    z-index: 2;
  }
}

/* base-focus */
/*
  Focus ring - default (with offset)
*/

*:focus {
  outline: 0;
  box-shadow: none;
}

*:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Fallback - for browsers that don't support :focus-visible, a fallback is set for :focus */
.focused,
.no-js *:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.3rem;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

/* Negate the fallback side-effect for browsers that support :focus-visible */
.no-js *:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - inset
*/

.focus-inset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.focused.focus-inset,
.no-js .focus-inset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: -0.2rem;
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3);
}

.no-js .focus-inset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/*
  Focus ring - none
*/

/* Dangerous for a11y - Use with care */
.focus-none {
  box-shadow: none !important;
  outline: 0 !important;
}

.focus-offset:focus-visible {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.focus-offset.focused,
.no-js .focus-offset:focus {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 1rem;
  box-shadow: 0 0 0 1rem rgb(var(--color-background)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3);
}

.no-js .focus-offset:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* component-title */
.title,
.title-wrapper-with-link {
  margin: 3rem 0 2rem;
}

.title-wrapper-with-link .title {
  margin: 0;
}

.title .link {
  font-size: inherit;
}

.title-wrapper {
  margin-bottom: 3rem;
}

.title-wrapper-with-link {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.title--primary {
  margin: 4rem 0;
}

.title-wrapper--self-padded-tablet-down,
.title-wrapper--self-padded-mobile {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media screen and (min-width: 750px) {
  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 990px) {
  .title,
  .title-wrapper-with-link {
    margin: 5rem 0 3rem;
  }

  .title--primary {
    margin: 2rem 0;
  }

  .title-wrapper-with-link {
    align-items: center;
  }

  .title-wrapper-with-link .title {
    margin-bottom: 0;
  }

  .title-wrapper--self-padded-tablet-down {
    padding-left: 0;
    padding-right: 0;
  }
}

.title-wrapper-with-link .link-with-icon {
  margin: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.title-wrapper-with-link .link-with-icon svg {
  width: 1.5rem;
}

.title-wrapper-with-link a {
  margin-top: 0;
  flex-shrink: 0;
}

.title-wrapper--no-top-margin {
  margin-top: 0;
}

.title-wrapper--no-top-margin > .title {
  margin-top: 0;
}

.subtitle {
  font-size: 1.8rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  letter-spacing: 0.06rem;
  color: rgba(var(--color-foreground), 0.7);
}

.subtitle--small {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
}

.subtitle--medium {
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
}

/* component-grid */
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
  padding: 0;
  list-style: none;
  column-gap: var(--grid-mobile-horizontal-spacing);
  row-gap: var(--grid-mobile-vertical-spacing);
}

@media screen and (min-width: 750px) {
  .grid {
    column-gap: var(--grid-desktop-horizontal-spacing);
    row-gap: var(--grid-desktop-vertical-spacing);
  }
}

.grid:last-child {
  margin-bottom: 0;
}

.grid__item {
  width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
  max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  flex-grow: 1;
  flex-shrink: 0;
}

@media screen and (min-width: 750px) {
  .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

.grid--gapless.grid {
  column-gap: 0;
  row-gap: 0;
}

@media screen and (max-width: 749px) {
  .grid__item.slider__slide--full-width {
    width: 100%;
    max-width: none;
  }
}

.grid--1-col .grid__item {
  max-width: 100%;
  width: 100%;
}

.grid--3-col .grid__item {
  width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}

@media screen and (min-width: 750px) {
  .grid--3-col .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }
}

.grid--2-col .grid__item {
  width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}

@media screen and (min-width: 750px) {
  .grid--2-col .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--4-col-tablet .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-tablet .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }
}

@media screen and (max-width: 989px) {
  .grid--1-col-tablet-down .grid__item {
    width: 100%;
    max-width: 100%;
  }

  .slider--tablet.grid--peek {
    margin: 0;
    width: 100%;
  }

  .slider--tablet.grid--peek .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .slider.slider--tablet .scroll-trigger.animate--slide-in,
  .slider.slider--mobile .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--6-col-desktop .grid__item {
    width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
    max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
  }

  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }

  .grid--4-col-desktop .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
  }

  .grid--3-col-desktop .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
    max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
  }

  .grid--2-col-desktop .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .slider.slider--desktop .scroll-trigger.animate--slide-in {
    animation: none;
    opacity: 1;
    transform: inherit;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
    animation: var(--animation-slide-in);
  }
}

@media screen and (min-width: 990px) {
  .grid--1-col-desktop {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .grid--1-col-desktop .grid__item {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 749px) {
  .grid--peek.slider--mobile {
    margin: 0;
    width: 100%;
  }

  .grid--peek.slider--mobile .grid__item {
    box-sizing: content-box;
    margin: 0;
  }

  .grid--peek .grid__item {
    min-width: 35%;
  }

  .grid--peek.slider .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  /* Fix to show some space at the end of our sliders in all browsers */
  .grid--peek.slider:after {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
  .grid--peek .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
  .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
    width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider--tablet.grid--peek .grid__item {
    width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
    width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
  .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }

  .slider--tablet.grid--peek .grid__item:first-of-type {
    margin-left: 1.5rem;
  }

  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
  }

  .grid--1-col-tablet-down.grid--peek .grid__item {
    width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
  }
}

/* component-media */
.media {
  display: block;
  /* Was rgba(--color-foreground, 0.1) — sand at 10%, which showed as a pale
     grey box behind every image while loading and anywhere an image did not
     fully cover its frame. Neutral near-black keeps the loading hint without
     the light cast. */
  background-color: rgba(255, 255, 255, 0.03);
  position: relative;
  overflow: hidden;
}

.media--transparent {
  background-color: transparent;
}

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.media > img {
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.media--square {
  padding-bottom: 100%;
}

.media--portrait {
  padding-bottom: 125%;
}

.media--landscape {
  padding-bottom: 66.6%;
}

.media--cropped {
  padding-bottom: 56%;
}

.media--16-9 {
  padding-bottom: 56.25%;
}

.media--circle {
  padding-bottom: 100%;
  border-radius: 50%;
}

.media.media--hover-effect > img + img {
  opacity: 0;
}

@media screen and (min-width: 990px) {
  .media--cropped {
    padding-bottom: 63%;
  }
}

deferred-media {
  display: block;
}

/* component-button */
/* Button - default */

.button--secondary,
.button--tertiary {
  --color-button: var(--color-secondary-button);
  --color-button-text: var(--color-secondary-button-text);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded,
.shopify-payment-button [role='button'],
.cart__dynamic-checkout-buttons [role='button'],
.cart__dynamic-checkout-buttons iframe {
  --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--buttons-shadow-vertical-offset);
  --shadow-blur-radius: var(--buttons-shadow-blur-radius);
  --shadow-opacity: var(--buttons-shadow-opacity);
  --shadow-visible: var(--buttons-shadow-visible);
  --border-offset: var(--buttons-border-offset); /* reduce radius edge artifacts */
  --border-opacity: calc(1 - var(--buttons-border-opacity));
  border-radius: var(--buttons-radius-outset);
  position: relative;
}

.button,
.shopify-challenge__button,
.customer button,
button.shopify-payment-button__button--unbranded {
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
}

.shopify-payment-button__button--branded {
  z-index: auto;
}

.cart__dynamic-checkout-buttons iframe {
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button,
.shopify-challenge__button,
.customer button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  padding: 0 3rem;
  cursor: pointer;
  font: inherit;
  font-size: 1.5rem;
  text-decoration: none;
  color: rgb(var(--color-button-text));
  transition: box-shadow var(--duration-short) ease;
  -webkit-appearance: none;
  appearance: none;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.button:before,
.shopify-challenge__button:before,
.customer button:before,
.shopify-payment-button__button--unbranded:before,
.shopify-payment-button [role='button']:before,
.cart__dynamic-checkout-buttons [role='button']:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--buttons-radius-outset);
  box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
    rgba(var(--color-shadow), var(--shadow-opacity));
}

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  content: '';
  position: absolute;
  top: var(--buttons-border-width);
  right: var(--buttons-border-width);
  bottom: var(--buttons-border-width);
  left: var(--buttons-border-width);
  z-index: 1;
  border-radius: var(--buttons-radius);
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover::after,
.shopify-challenge__button:hover::after,
.customer button:hover::after,
.shopify-payment-button__button--unbranded:hover::after {
  --border-offset: 1.3px;
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
      rgba(var(--color-button-text), var(--border-opacity)),
    0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button), var(--alpha-button-background));
}

.button--secondary:after {
  --border-opacity: var(--buttons-border-opacity);
}

.button:focus-visible,
.button:focus,
.button.focused,
.shopify-payment-button__button--unbranded:focus-visible,
.shopify-payment-button [role='button']:focus-visible,
.shopify-payment-button__button--unbranded:focus,
.shopify-payment-button [role='button']:focus {
  outline: 0;
  box-shadow: 0 0 0 0.3rem rgb(var(--color-background)), 0 0 0 0.5rem rgba(var(--color-foreground), 0.5),
    0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.button:focus:not(:focus-visible):not(.focused),
.shopify-payment-button__button--unbranded:focus:not(:focus-visible):not(.focused),
.shopify-payment-button [role='button']:focus:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
}

.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text), 0.3);
}

.button,
.button-label,
.shopify-challenge__button,
.customer button {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
}

.button--tertiary {
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  min-width: calc(9rem + var(--buttons-border-width) * 2);
  min-height: calc(3.5rem + var(--buttons-border-width) * 2);
}

.button--small {
  padding: 1.2rem 2.6rem;
}

/* Button - other */

.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.button--full-width {
  display: flex;
  width: 100%;
}

.button.loading {
  color: transparent;
  position: relative;
}

@media screen and (forced-colors: active) {
  .button.loading {
    color: rgb(var(--color-foreground));
  }
}

.button.loading > .loading-overlay__spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  height: 100%;
  display: flex;
  align-items: center;
}

.button.loading > .loading-overlay__spinner .spinner {
  width: fit-content;
}

.button.loading > .loading-overlay__spinner .path {
  stroke: rgb(var(--color-button-text));
}

/* Button - social share */

.share-button {
  display: block;
  position: relative;
}

.share-button details {
  width: fit-content;
}

.share-button__button {
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  color: rgb(var(--color-link));
  margin-left: 0;
  padding-left: 0;
  min-height: 4.4rem;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen var(--duration-default) ease;
}

.share-button__button:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.share-button__button,
.share-button__fallback button {
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.share-button__button .icon-share {
  height: 1.2rem;
  margin-right: 1rem;
  min-width: 1.3rem;
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: 3rem;
  left: 0.1rem;
  z-index: 3;
  width: 100%;
  min-width: max-content;
  border-radius: var(--inputs-radius);
  border: 0;
}

.share-button__fallback:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.share-button__fallback:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.share-button__fallback button {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  right: var(--inputs-border-width);
}

.share-button__fallback button:hover {
  color: rgba(var(--color-foreground), 0.75);
}

.share-button__fallback button:hover svg {
  transform: scale(1.07);
}

.share-button__close:not(.hidden) + .share-button__copy {
  display: none;
}

.share-button__close,
.share-button__copy {
  background-color: transparent;
  color: rgb(var(--color-foreground));
}

.share-button__copy:focus-visible,
.share-button__close:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.share-button__copy:focus,
.share-button__close:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused),
.field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) {
  background-color: inherit;
}

.share-button__fallback .field:after,
.share-button__fallback .field:before {
  content: none;
}

.share-button__fallback .field {
  border-radius: 0;
  min-width: auto;
  min-height: auto;
  transition: none;
}

.share-button__fallback .field__input:focus,
.share-button__fallback .field__input:-webkit-autofill {
  outline: 0.2rem solid rgba(var(--color-foreground), 0.5);
  outline-offset: 0.1rem;
  box-shadow: 0 0 0 0.1rem rgb(var(--color-background)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
}

.share-button__fallback .field__input {
  box-shadow: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  filter: none;
  min-width: auto;
  min-height: auto;
}

.share-button__fallback .field__input:hover {
  box-shadow: none;
}

.share-button__fallback .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.share-button__message:not(:empty) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 0;
  padding: 0.8rem 0 0.8rem 1.5rem;
  margin: var(--inputs-border-width);
}

.share-button__message:not(:empty):not(.hidden) ~ * {
  display: none;
}

/* component-form */
.field__input,
.select__select,
.customer .field input,
.customer select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-size: 1.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: box-shadow var(--duration-short) ease;
  border-radius: var(--inputs-radius);
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  min-width: calc(7rem + (var(--inputs-border-width) * 2));
  position: relative;
  border: 0;
}

.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.select__select {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), 0.75);
}

.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    rgba(var(--color-foreground), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground));
  outline: 0;
  border-radius: var(--inputs-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.text-area,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

.select__select,
.customer select {
  cursor: pointer;
  line-height: calc(1 + 0.6 / var(--font-body-scale));
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  margin: var(--inputs-border-width);
  min-height: calc(var(--inputs-border-width) * 2);
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--duration-short) ease;
}

.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
  margin: var(--inputs-border-width);
  transition: box-shadow var(--duration-short) ease;
}

.field__label,
.customer .field label {
  font-size: 1.6rem;
  left: calc(var(--inputs-border-width) + 2rem);
  top: calc(1rem + var(--inputs-border-width));
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
  color: rgba(var(--color-foreground), 0.75);
  letter-spacing: 0.1rem;
  line-height: 1.5;
}

.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:focus ~ label,
.customer .field input:not(:placeholder-shown) ~ label,
.customer .field input:-webkit-autofill ~ label {
  font-size: 1rem;
  top: calc(var(--inputs-border-width) + 0.5rem);
  left: calc(var(--inputs-border-width) + 2rem);
  letter-spacing: 0.04rem;
}

.field__input:focus,
.field__input:not(:placeholder-shown),
.field__input:-webkit-autofill,
.customer .field input:focus,
.customer .field input:not(:placeholder-shown),
.customer .field input:-webkit-autofill {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
  align-items: center;
  background-color: transparent;
  border: 0;
  color: currentColor;
  cursor: pointer;
  display: flex;
  height: 4.4rem;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 4.4rem;
}

.field__button > svg {
  height: 2.5rem;
  width: 2.5rem;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.text-area {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

/* Form global */

.form__label {
  display: block;
  margin-bottom: 0.6rem;
}

.form__message {
  align-items: center;
  display: flex;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1rem;
}

.form__message--large {
  font-size: 1.6rem;
}

.customer .field .form__message {
  font-size: 1.4rem;
  text-align: left;
}

.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
  font-size: 1.6rem;
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}

/* component-quantity */
.quantity {
  color: rgba(var(--color-foreground));
  position: relative;
  width: calc(14rem / var(--font-body-scale) + var(--inputs-border-width) * 2);
  display: flex;
  border-radius: var(--inputs-radius);
  min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}

.quantity:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}

.quantity:before {
  background: rgb(var(--color-background));
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--inputs-radius-outset);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
  z-index: -1;
}

.quantity__input {
  color: currentColor;
  font-size: 1.6rem;
  font-weight: 500;
  opacity: 0.85;
  text-align: center;
  background-color: transparent;
  border: 0;
  padding: 0 0.5rem;
  width: 100%;
  flex-grow: 1;
  -webkit-appearance: none;
  appearance: none;
}

.quantity__button {
  width: calc(4.5rem / var(--font-body-scale));
  flex-shrink: 0;
  font-size: 1.8rem;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--color-foreground));
  padding: 0;
}

.quantity__button:first-child {
  margin-left: calc(var(--inputs-border-width));
}

.quantity__button:last-child {
  margin-right: calc(var(--inputs-border-width));
}

.quantity__button svg {
  width: 1rem;
  pointer-events: none;
}

.quantity__button:focus-visible,
.quantity__input:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:focus,
.quantity__input:focus {
  background-color: rgb(var(--color-background));
  z-index: 2;
}

.quantity__button:not(:focus-visible):not(.focused),
.quantity__input:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.quantity__input:-webkit-autofill,
.quantity__input:-webkit-autofill:hover,
.quantity__input:-webkit-autofill:active {
  box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
  -webkit-box-shadow: 0 0 0 10rem rgb(var(--color-background)) inset !important;
}

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

.quantity__input[type='number'] {
  -moz-appearance: textfield;
}

.quantity__rules {
  margin-top: 1.2rem;
  position: relative;
  font-size: 1.2rem;
}

.quantity__rules .caption {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.quantity__rules .divider + .divider::before {
  content: '\2022';
  margin: 0 0.5rem;
}

.quantity__rules-cart {
  position: relative;
}

product-info .loading-overlay:not(.hidden) ~ *,
.quantity__rules-cart .loading-overlay:not(.hidden) ~ * {
  visibility: hidden;
}

/* component-modal */
.modal__toggle {
  list-style-type: none;
}

.no-js details[open] .modal__toggle {
  position: absolute;
  z-index: 5;
}

.modal__toggle-close {
  display: none;
}

.no-js details[open] svg.modal__toggle-close {
  display: flex;
  z-index: 1;
  height: 1.7rem;
  width: 1.7rem;
}

.modal__toggle-open {
  display: flex;
}

.no-js details[open] .modal__toggle-open {
  display: none;
}

.no-js .modal__close-button.link {
  display: none;
}

.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem;
  height: 4.4rem;
  width: 4.4rem;
  background-color: transparent;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.modal__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(var(--color-background));
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-modal {
  cursor: zoom-out;
}

.media-modal .deferred-media {
  cursor: initial;
}

/* component-cart-count-bubble */
.cart-count-bubble:empty {
  display: none;
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.7rem;
  width: 1.7rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: calc(1 + 0.1 / var(--font-body-scale));
}

/* utility-bar */
.utility-bar {
  height: 100%;
}

.utility-bar--bottom-border {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

@media screen and (min-width: 990px) {
  .utility-bar--bottom-border-social-only {
    border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  }
}

.utility-bar__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'announcements';
}

.utility-bar__grid .list-social {
  justify-content: flex-start;
  align-content: center;
  margin-left: -1.2rem;
  grid-area: social-icons;
}

@media screen and (max-width: 989px) {
  .utility-bar .utility-bar__grid .list-social {
    display: none;
  }
}

.utility-bar .list-social__item .icon {
  scale: 0.9;
}

@media screen and (min-width: 990px) {
  .utility-bar__grid--3-col {
    grid-template-columns: 3fr 4fr 3fr;
    grid-template-areas: 'social-icons announcements language-currency';
  }

  .utility-bar__grid--2-col {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'social-icons language-currency';
  }

  .announcement-bar.announcement-bar--one-announcement,
  .announcement-bar--one-announcement .announcement-bar__link {
    width: fit-content;
    margin: auto;
  }
}

.announcement-bar,
.announcement-bar__announcement {
  color: rgb(var(--color-foreground));
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  grid-area: announcements;
}

.announcement-bar .slider--everywhere {
  margin-bottom: 0;
  scroll-behavior: auto;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.utility-bar__grid .announcement-bar-slider {
  width: 100%;
}

.announcement-bar-slider,
.announcement-bar-slider .slider {
  width: 100%;
}

.announcement-bar .slider-button--next {
  margin-right: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--prev {
  margin-left: -1.5rem;
  min-width: 44px;
}

.announcement-bar .slider-button--next:focus-visible,
.announcement-bar .slider-button--prev:focus-visible,
.utility-bar .list-social__link:focus-visible {
  outline-offset: -0.3rem;
  box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground));
}

.localization-wrapper {
  grid-area: language-currency;
  align-self: center;
  display: flex;
  justify-content: flex-end;
}

.localization-wrapper .localization-selector + .disclosure__list-wrapper {
  animation: animateMenuOpen var(--duration-default) ease;
}

.utility-bar .localization-wrapper .disclosure .localization-form__select,
.utility-bar .localization-wrapper .disclosure__link {
  font-size: calc(var(--font-heading-scale) * 1.3rem);
}

@media screen and (min-width: 990px) {
  body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .announcement-bar-slider {
    width: 60%;
  }

  .announcement-bar .slider-button {
    height: 3.8rem;
  }
}

.announcement-bar__link {
  display: flex;
  width: 100%;
  text-decoration: none;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.announcement-bar__link:hover {
  text-decoration: underline;
}

.announcement-bar__link .icon-arrow {
  display: inline-block;
  pointer-events: none;
  margin-left: 0.8rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

.announcement-bar__message {
  text-align: center;
  padding: 1rem 0;
  margin: 0;
  letter-spacing: 0.1rem;
  min-height: 3.8rem;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message,
.announcement-bar-slider--fade-in-previous .announcement-bar__message,
.announcement-bar-slider--fade-out-next .announcement-bar__message,
.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  animation-duration: var(--duration-announcement-bar);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.announcement-bar-slider--fade-in-next .announcement-bar__message {
  --announcement-translate-from: -1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-in-previous .announcement-bar__message {
  --announcement-translate-from: 1.5rem;
  /* Prevent flicker */
  opacity: 0;
  animation-name: translateAnnouncementSlideIn;
  animation-delay: var(--duration-announcement-bar);
}

.announcement-bar-slider--fade-out-next .announcement-bar__message {
  --announcement-translate-to: 1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

.announcement-bar-slider--fade-out-previous .announcement-bar__message {
  --announcement-translate-to: -1.5rem;
  animation-name: translateAnnouncementSlideOut;
}

@keyframes translateAnnouncementSlideIn {
  0% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-from));
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes translateAnnouncementSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(var(--announcement-translate-to));
  }
}

/* section-header */
.section-header.shopify-section-group-header-group {
  z-index: 3;
}

.shopify-section-header-sticky {
  position: sticky;
  top: 0;
}

.shopify-section-header-hidden {
  top: calc(-1 * var(--header-height));
}

.shopify-section-header-hidden.menu-open {
  top: 0;
}

.section-header.animate {
  transition: top 0.15s ease-out;
}

.shopify-section-group-header-group {
  z-index: 4;
}

.section-header ~ .shopify-section-group-header-group {
  z-index: initial;
}

/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      'heading icons'
      'navigation navigation';
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: 'heading navigation icons';
    grid-template-columns: auto auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: 'navigation heading icons';
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      'left-icons heading icons'
      'navigation navigation navigation';
  }

  .header--top-center.drawer-menu {
    grid-template-areas: 'left-icons heading icons';
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center) .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex='-1']:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, var(--scrim-darken));
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

.no-js .predictive-search {
  display: none;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.no-js details[open] > .header__icon--search {
  top: 1rem;
  right: 0.5rem;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}

@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

details[open] > .header__menu-item {
  text-decoration: underline;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.2rem;
}

.header__submenu {
  transition: opacity var(--duration-default) ease, transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

@media screen and (min-width: 750px) {
  .overflow-hidden-mobile {
    overflow: auto;
  }
}

@media screen and (min-width: 990px) {
  .overflow-hidden-tablet {
    overflow: auto;
  }
}

.badge {
  border: 1px solid transparent;
  border-radius: var(--badge-corner-radius);
  display: inline-block;
  font-size: 1.2rem;
  letter-spacing: 0.1rem;
  line-height: 1;
  padding: 0.5rem 1.3rem 0.6rem 1.3rem;
  text-align: center;
  background-color: rgb(var(--color-badge-background));
  border-color: rgba(var(--color-badge-border), var(--alpha-badge-border));
  color: rgb(var(--color-badge-foreground));
  word-break: break-word;
}

.gradient {
  background: rgb(var(--color-background));
  background: var(--gradient-background);
  background-attachment: fixed;
}

@media screen and (forced-colors: active) {
  .icon {
    color: CanvasText;
    fill: CanvasText !important;
  }

  .icon-close-small path {
    stroke: CanvasText;
  }
}

.ratio {
  display: flex;
  position: relative;
  align-items: stretch;
}

.ratio::before {
  content: '';
  width: 0;
  height: 0;
  padding-bottom: var(--ratio-percent);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  border: var(--text-boxes-border-width) solid rgba(var(--color-foreground), var(--text-boxes-border-opacity));
  position: relative;
}

.content-container:after {
  content: '';
  position: absolute;
  top: calc(var(--text-boxes-border-width) * -1);
  right: calc(var(--text-boxes-border-width) * -1);
  bottom: calc(var(--text-boxes-border-width) * -1);
  left: calc(var(--text-boxes-border-width) * -1);
  border-radius: var(--text-boxes-radius);
  box-shadow: var(--text-boxes-shadow-horizontal-offset) var(--text-boxes-shadow-vertical-offset)
    var(--text-boxes-shadow-blur-radius) rgba(var(--color-shadow), var(--text-boxes-shadow-opacity));
  z-index: -1;
}

.content-container--full-width:after {
  left: 0;
  right: 0;
  border-radius: 0;
}


@media screen and (max-width: 749px) {
  .content-container--full-width-mobile {
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
  .content-container--full-width-mobile:after {
    display: none;
  }
}

.global-media-settings {
  position: relative;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings:after {
  content: '';
  position: absolute;
  top: calc(var(--media-border-width) * -1);
  right: calc(var(--media-border-width) * -1);
  bottom: calc(var(--media-border-width) * -1);
  left: calc(var(--media-border-width) * -1);
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  z-index: -1;
  pointer-events: none;
}

.global-media-settings--no-shadow {
  overflow: hidden !important;
}

.global-media-settings--no-shadow:after {
  content: none;
}

.global-media-settings img,
.global-media-settings iframe,
.global-media-settings model-viewer,
.global-media-settings video,
.global-media-settings .placeholder-svg {
  border-radius: calc(var(--media-radius) - var(--media-border-width));
}

.content-container--full-width,
.global-media-settings--full-width,
.global-media-settings--full-width img,
.global-media-settings--full-width video,
.global-media-settings--full-width iframe,
.global-media-settings--full-width .placeholder-svg {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

/* check for flexbox gap in older Safari versions */
@supports not (inset: 10px) {
  .grid {
    margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
  }

  .grid__item {
    padding-left: var(--grid-mobile-horizontal-spacing);
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
    }

    .grid__item {
      padding-left: var(--grid-desktop-horizontal-spacing);
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }

  .grid--gapless .grid__item {
    padding-left: 0;
    padding-bottom: 0;
  }

  @media screen and (min-width: 749px) {
    .grid--peek .grid__item {
      padding-left: var(--grid-mobile-horizontal-spacing);
    }
  }

  .product-grid .grid__item {
    padding-bottom: var(--grid-mobile-vertical-spacing);
  }

  @media screen and (min-width: 750px) {
    .product-grid .grid__item {
      padding-bottom: var(--grid-desktop-vertical-spacing);
    }
  }
}

.font-body-bold {
  font-weight: var(--font-body-weight-bold);
}

/* outline and border styling for Windows High Contrast Mode */
@media (forced-colors: active) {
  .button,
  .shopify-challenge__button,
  .customer button {
    border: transparent solid 1px;
  }

  .button:focus-visible,
  .button:focus,
  .button.focused,
  .shopify-payment-button__button--unbranded:focus-visible,
  .shopify-payment-button [role='button']:focus-visible,
  .shopify-payment-button__button--unbranded:focus,
  .shopify-payment-button [role='button']:focus {
    outline: solid transparent 1px;
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus.localization-form__select:after {
    outline: transparent solid 1px;
  }

  .localization-form__select:focus {
    outline: transparent solid 1px;
  }
}

.rte:after {
  clear: both;
  content: '';
  display: block;
}

.rte > *:first-child {
  margin-top: 0;
}

.rte > *:last-child {
  margin-bottom: 0;
}

.rte table {
  table-layout: fixed;
}

@media screen and (min-width: 750px) {
  .rte table td {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}

.rte img {
  height: auto;
  max-width: 100%;
  border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity));
  border-radius: var(--media-radius);
  box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius)
    rgba(var(--color-shadow), var(--media-shadow-opacity));
  margin-bottom: var(--media-shadow-vertical-offset);
}

.rte ul,
.rte ol {
  list-style-position: inside;
  padding-left: 2rem;
}

.rte li {
  list-style: inherit;
}

.rte li:last-child {
  margin-bottom: 0;
}

.rte a {
  color: rgba(var(--color-link), var(--alpha-link));
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.1rem;
  transition: text-decoration-thickness var(--duration-short) ease;
}

.rte a:hover {
  color: rgb(var(--color-link));
  text-decoration-thickness: 0.2rem;
}

.rte blockquote {
  display: inline-flex;
}

.rte blockquote > * {
  margin: -0.5rem 0 -0.5rem 0;
}

/* Image mask global styles */

.shape--mask {
  display: block;
  height: 0;
  width: 0;
}

.shape--arch {
  clip-path: url('#Shape-Arch');
}

.shape--blob {
  clip-path: polygon(var(--shape--blob-1));
}

.shape--chevronleft {
  clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 15% 100%, 0% 50%, 15% 0%);
}

.shape--chevronright {
  clip-path: polygon(85% 0%, 100% 50%, 85% 100%, 0% 100%, 15% 50%, 0% 0%);
}

.shape--circle {
  clip-path: circle(closest-side);
}

.shape--diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.shape--parallelogram {
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}

.shape--round {
  clip-path: ellipse(45% 45% at 50% 50%);
}

/* Fixed background */
.animate--fixed {
  clip-path: inset(0);
}

.animate--fixed > img:not(.zoom):not(.deferred-media__poster-button),
.animate--fixed > svg:not(.zoom):not(.deferred-media__poster-button) {
  position: fixed;
  height: 100vh;
}

/* Zoom in image on scroll */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > svg {
  transition: scale var(--duration-short) linear;
  scale: var(--zoom-in-ratio);
}

/* Animations */

@media (prefers-reduced-motion: no-preference) {
  .animate--ambient > img,
  .animate--ambient > svg {
    animation: animateAmbient 30s linear infinite;
  }

  @keyframes animateAmbient {
    0% {
      transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
    }
    100% {
      transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
    }
  }

  .scroll-trigger.animate--fade-in,
  .scroll-trigger.animate--slide-in {
    opacity: 0.01;
  }

  .scroll-trigger.animate--slide-in {
    transform: translateY(2rem);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--animation-slide-in);
    animation-delay: calc(var(--animation-order) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }

  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
    to {
      opacity: 1;
    }
  }
}

/* Element Hovers: Vertical Lift, 3d Lift */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
      0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2; /* Make sure the hovered card is the topmost card. */
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    background-image: var(--easter-egg);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift
    .card-wrapper:hover
    .card--shape.card--standard:not(.card--text)
    .card__inner
    .card__media:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .animate--hover-3d-lift .card-wrapper .card--card:before,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    mix-blend-mode: overlay;
    background-size: 400% 100%;
    background-position: 90% 0;
    background-repeat: no-repeat;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0) 55%
    );
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-long) ease;
    background-position: left;
    z-index: 2;
  }

  :root {
    --easter-egg: none;
    --sparkle: url('./sparkle.gif');
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration-medium) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover:after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after {
    --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on.  */
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset))
        rgba(var(--color-button-text), var(--border-opacity)),
      0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after {
    --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */
  }
}
.collection-list .card__content h3{
display:none;
}
/* remove drop down arrow */
.header__inline-menu .icon-caret {
display:none;
}

/* remove hover underline menu and footer  */
.header__menu-item:hover span, .mega-menu__link:hover, .footer-block__details-content .list-menu__item--link:hover {  
    text-decoration: none !important;
}

/* remove active nav underline top and bottom menu */
.header__active-menu-item, .list-menu__item--active {  
    text-decoration: none !important;
}


/*adding a new font Yanone*/
@font-face {
font-family: Yanone;
src: url("https://cdn.shopify.com/s/files/1/0646/0909/1739/files/YanoneKaffeesatzExtraLight-Regular.woff2?v=1717143851") format(woff2),
     url("https://cdn.shopify.com/s/files/1/0646/0909/1739/files/YanoneKaffeesatzExtraLight-Regular.woff?v=1717143851") format(woff),
	 url("https://cdn.shopify.com/s/files/1/0646/0909/1739/files/YanoneKaffeesatzExtraLight-Regular.otf?v=1717143851") format(otf),
	 url("https://cdn.shopify.com/s/files/1/0646/0909/1739/files/YanoneKaffeesatzExtraLight-Regular.ttf?v=1717143851") format(ttf),
	 url("https://cdn.shopify.com/s/files/1/0646/0909/1739/files/YanoneKaffeesatzExtraLight-Regular.eot?v=1717143851") format(eot);
}

/*adding a new font JosefinLight*/
@font-face {
font-family: JosefinLight;
src: url("https://cdn.shopify.com/s/files/1/0648/9263/3305/files/JosefinSans-Light.woff2?v=1699625245") format(woff2),
     url("https://cdn.shopify.com/s/files/1/0648/9263/3305/files/JosefinSans-Light.woff?v=1699625245") format(woff),
	 url("https://cdn.shopify.com/s/files/1/0648/9263/3305/files/JosefinSans-Light.otf?v=1699625245") format(otf),
	 url("https://cdn.shopify.com/s/files/1/0648/9263/3305/files/JosefinSans-Light.ttf?v=1699625245") format(ttf),
	 url("https://cdn.shopify.com/s/files/1/0648/9263/3305/files/JosefinSans-Light.eot?v=1699625245") format(eot);
}

/*adding a new font GlacialIndifference*/
@font-face {
font-family: GlacialIndifference;
src: url("https://cdn.shopify.com/s/files/1/0698/4921/9289/files/GlacialIndifference-Regular.woff2?v=1716562359") format(woff2),
     url("https://cdn.shopify.com/s/files/1/0698/4921/9289/files/GlacialIndifference-Regular.woff?v=1716562359") format(woff),
	 url("https://cdn.shopify.com/s/files/1/0698/4921/9289/files/GlacialIndifference-Regular.otf?v=1716562360") format(otf),
	 url("https://cdn.shopify.com/s/files/1/0698/4921/9289/files/GlacialIndifference-Regular.ttf?v=1716562359") format(ttf),
	 url("https://cdn.shopify.com/s/files/1/0698/4921/9289/files/GlacialIndifference-Regular.eot?v=1716562359") format(eot);
}


/* adding a new font and font styling to all headers */
h1, h2, h3, h4, h5, h6 {
  font-family: Yanone!important;
  letter-spacing: 1rem!important;
}

/* adding a new font and font styling to all paragraphs */
p{
  font-family: GlacialIndifference!important;
}

/* adding a new font and font styling to all headers */
h1, h2, h3, h4, h5, h6 {
  font-family: Yanone!important;
  letter-spacing: 1rem!important;
}


/* adding a new font to all headers when in bold*/
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family: GlacialIndifference!important;
  font-weight:400!important;
  letter-spacing: 0.9rem!important;
}

/* adding font styling to buttons*/
A {
font-size:12px !important;
letter-spacing: 0.3rem!important;
}

/*making paragraph text smaller on mobile*/
@media only screen and (max-width: 749px) {
p {
    font-size: 16px !important;
1.3rem!important;
  }
}

/*removing page titles*/
.main-page-title {
    display: none !important;
}

/*editing sale colour*/
.badge--bottom-left {
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(30,23,24,1) 100%);
  color: #b6ab99;
  border: solid 1px #b6ab99;
}
span.badge.price__badge-sale{
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(30,23,24,1) 100%);
  color: #b6ab99;
  border: solid 1px #b6ab99;
}

/*editing sold out colour*/
.product .price--sold-out .price__badge-sold-out {
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(30,23,24,1) 100%);
  color: #b6ab99;
  border: solid 1px #b6ab99;
}

/* change buy it now button colour */
.shopify-payment-button .shopify-payment-button__button--unbranded {
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(41,40,32,1) 100%);
  color: #b6ab99;
} 


/* edit space under heading for 'image with text' (if ever line height isn't working, add display:block) */
h2.image-with-text__heading {
  line-height: 1;
  display: block;
}
/* rearrange footer column spacing on desktop */
@media screen and (min-width: 750px) {
.grid--4-col-tablet .grid__item {
    width: calc(21% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
.grid--4-col-tablet .grid__item:nth-child(1) {
    width: calc(37% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
}
/* tweak sign up form home page only using section class */
/* adjust form field */
.newsletter__wrapper input{
  background: #000000;
  color:#000000!important;
  height: 4rem;
  padding: 1.5rem 2.5rem !important;
}
/* adjust paragraph text sign up newsletter margin top and bottom */
@media screen and (min-width: 750px) {
  .newsletter__wrapper p{
    margin: -20px 0 -10px !important;
    font-size:10px!important
  }
}
/* adjust heading letter spacing */
.newsletter__wrapper h2{
  letter-spacing: 12px !important;
}
/* hide arrow icon */
.newsletter__wrapper .newsletter-form__button .icon {
  display:none;
}
/* add text to button */
.newsletter__wrapper .newsletter-form__button:after {
  content:"SIGN UP";
  color: #b6ab99;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  font-family:GlacialIndifference!important;
  font-weight:300!important;
}
/* widen button and add left border */
.newsletter__wrapper .newsletter-form__button {
  width: 16rem;
  border-left: solid 2px rgba(0,0,0,0);
}
@media screen and (max-width: 749px) {
.newsletter__wrapper .newsletter-form__button {
  width: 10rem;
}
}
/* move placeholder to suit new field height */
.newsletter__wrapper .field__label {
    top: calc(0.5rem + var(--inputs-border-width));
}
/* widen input field */
.newsletter__wrapper .newsletter-form, .newsletter__wrapper .newsletter-form__field-wrapper {
    max-width: 60rem !important ;
}
/* Contact page button - reduce top margin */
#ContactForm .contact__button{
    margin-top: 2rem;
}
/* Contact page button - change colour and centre */
#ContactForm .contact__button button{
  background: #000000;
  color: #b6ab99;
  display: block !important;
  margin: 0 auto;
}
/* Contact page button - widen*/
@media screen and (min-width: 400px) {
#ContactForm .contact__button button{
  min-width: calc(36rem + var(--buttons-border-width) * 2);
}
}


}
/* Product page selected variant set bg and colour*/
.product-form__input input[type=radio]:checked+label {
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(41,40,32,1) 100%);
  color: #b6ab99;
}
/* make continue shopping button like checkout button with new bg */
cart-items a.underlined-link{
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(30,23,24,1) 100%);
  color: #b6ab99 !important;
  border: solid 1px #000000;
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
  text-decoration:none;
  max-width: 36rem;
  font-size: 1.5rem !important;
  letter-spacing: 0.1rem !important;
  line-height: calc(1 + 0.2 / var(--font-body-scale));
  padding: 1.5rem 3rem 0.2rem;
}
cart-items a.underlined-link:hover{
border-width:2px;
  padding:calc(1.5rem - 1px) calc(3rem - 1px) calc(0.2rem - 1px);
}
/* New bg for checkout button incl in cart popup plus empty cart button */
.cart__checkout-button.button, .cart__warnings .button, #cart-notification-form .button {
  background-image: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(30,23,24,1) 100%);
  color: #b6ab99 !important;
}
.cart__warnings .button {
  margin-bottom:40px;
}
/* asign slideshow low z-index so menu will show over */
.top-slider {
  position: relative;
  z-index: 1;
}

/* remove underline from selected menu item */
details[open] .header__menu-item {
  text-decoration: none;
}
/* add top border to footer and legal */
footer, .footer__content-bottom{
  border-top: solid 1px #746854 !important;
}
/* add space between footer and bottom of collection grid */
ul.collection-list {
  margin-bottom:40px;
}

/* remove grey background to socials on mobile menu */
.menu-drawer__utility-links  {
  background: #0a0909 !important;
}
/* styling centred menu */
.header__inline-menu {
    background: #0a0909;
    text-align: center;
    padding-top: 5px;
}

/* remove border from image-with-text */
.image-with-text__media.global-media-settings {
  border:none;
}
/* set banner heading to 90% screen width */
.banner--medium.banner--desktop-transparent .banner__box {
  max-width: 90vw !important;
}

/* comment submit button */
.comment-submit-button {
  background: #000000;
  color: #b6ab99;
}

.comment-submit-button:hover {
  background: #1e1718;
  color: #b6ab99;
}

/*styling collection header*/
.collection-hero {
  justify-content: center;
  text-align: center;
  width: 100vw;
  background: linear-gradient(90deg, rgba(30,23,24,1) 0%, rgba(41,40,32,1) 100%);
  margin-bottom: -15px;
  text-align: center;
  padding-top: 10px;
}

.collection-hero__title {
  color: #b6ab99;
}

/*styling menu items footer*/
.footer-block__details-content .list-menu__item--link {
  line-height: 25px !important;
  font-size: 15px !important;
  font-family:GlacialIndifference!important;
  letter-spacing:0rem!important;
}


/* make comment box background transparent */
.article-template__comment-wrapper {
background-color:transparent !important;
}

/* legal line adjustments */
.footer small, .footer small.copyright__content {
font-size: 11px !important;
    letter-spacing: 0.2rem!important;
text-transform:uppercase;
}

.footer small, .footer small.copyright__content a {
font-size: 11px !important;
    letter-spacing: 0.2rem!important;
text-transform:uppercase;
  font-family:GlacialIndifference!important;
}



/* make image banner taller on mobile */
@media screen and (max-width: 749px) and (min-width: 333px) {
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 35rem !important;
}
}

/* desktop menu and mobile menu items bold */
.header__menu-item span, .list-menu__item {
  font-style:normal;
font-weight: 300!important;
}


/*all edits to announcement bar*/
@media only screen and (min-width: 750px) {
.announcement-bar__message {
  font-size: 13px !important;
  padding-top:12px!important;
  margin-bottom:-5px!important;
  font-weight:normal!important;
}
}

@media only screen and (max-width: 749px) {
.announcement-bar__message {
  font-size: 10px !important;
  padding-top:10px!important;
    margin-bottom:-10px!important;
    font-weight:normal!important;
  line-height:1.4!important;
}
}


/* removing background from image banner text box */
.banner__box.gradient {
background:transparent !important;
}

/*removing background from image with text*/
.image-with-text .gradient{
background:transparent !important;
}



/*adding margin for add to cart on desktop*/
#cart-notification {
  margin-top: 11px;
}

/* reduce h2 & h3 letter spacing for cart drop down */
h2.cart-notification__heading, h3.cart-notification-product__name{
letter-spacing: 0.4rem !important;
}

/* about page image with text make full width (remove media query if required on mobile also) */
.about .image-with-text {
padding-left:0;
padding-right:0; 
}

/* make header full width */
header {
    margin-left: 0!important;
    margin-right: 0!important;
    max-width: 100%!important;
}
/* matching account pages to rest of site */
body.gradient.account{
padding:0 !important;
margin:0 !important;
width:100% !important;
max-width:100% !important;
}
.account .section-header.shopify-section-group-header-group {
    margin-top: -20px !important;
}
.account .gradient{
width:100% !important;
max-width:100% !important;
 padding-right:0 !important;
}

:is(.account,.order)>div:nth-of-type(2) {
    display: block !important;
    margin-top: 0!important;
  padding-right:0 !important;
}


h1,h2,h3,h4,h5,h6 {
  word-break: keep-all;
}

/* inline images and text in customContainer (marquee) */
.marquee h2, .marquee h4, .marquee h3, .marquee img {
display:inline-block !important;
}

/* Marquee styles */
.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
     align-items: center;
  justify-content: center;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Enable animation */
 .marquee__content {
  animation: scroll 20s linear infinite;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
  max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
  position: absolute;
  top: 0;
  left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
  animation-name: scroll-abs;
}

@keyframes scroll-abs {
  from {
    transform: translateX(calc(100% + var(--gap)));
  }
  to {
    transform: translateX(0);
  }
}
/* menu dropdown adjustments */
.header__submenu .header__menu-item {
padding: 0.8rem 3rem;
justify-content: center;
}
.list-menu--disclosure {
    left: -4rem;
}

/*styling button hover*/
a.button--primary:hover {
    background: #292820;
}



/*navigation settings*/

/*  Change navigation text size */
.header__menu-item, .mega-menu__link {
  font-size:16px !important;
  letter-spacing:0.1rem!important;
    font-family:GlacialIndifference!important;
}


/*adding padding between menu items*/
.header__menu-item {
padding-right:2.5rem;
padding-left:2.5rem;
}

/* remove padding to right of SHOP */
summary.list-menu__item {
  padding-right: 2.5rem !important;
}

/*changing dropdown submenu letter spacing*/
.header__submenu .header__menu-item {
font-size:14px !important;
    letter-spacing:0rem!important;
}

/*changing mega-menu submenu letter spacing*/
.mega-menu__link, .Mega-menu__link—level-2, .header__submenu .header__menu-item {
font-size:14px !important;
    letter-spacing:0rem!important;
}


/*styling menu item hover*/
.header__submenu .list-menu__item--active {
    background: #1e1718;
    color: #b6ab99;
}

.header__submenu li:hover a {
    background: #1e1718;
    color: #b6ab99;
}

/*remove hover lines menu items*/
.header__submenu .header__menu-item:hover {
    text-decoration-line: none !important;
}
.header__submenu .header__menu-item:before {
    background: transparent !important;
}

/*reduce padding below header logo*/
@media only screen and (min-width: 990px) {
header,  .header__heading-link {
padding-bottom:0.75rem !important;
  padding-top:1rem !important;
}
}
.header__inline-menu {
    padding-top: 0;
}

/*reduce padding below header menu*/
.header__menu-item {
   padding: 0.5rem 2.5rem;
}
.header__submenu .header__menu-item {
    padding: 0.7rem 3rem;
}

/*styling the accordian block*/
.accordion {
margin-bottom: 30px !important;
padding: 0 20px;
Border: 0;
Border-radius: 0px;
}

/*creating blend mode customisation for logo*/
.header__heading-logo {
  mix-blend-mode:  lighten
/*delete lighten to remove this feature*/;
}
/*remove border from menu dropdown and announcement bar*/
.global-settings-popup, .header__submenu.global-settings-popup, .utility-bar--bottom-border {
    border: none;
}
/*make home slideshow full width on mobile and remove box-shadow below*/
@media only screen and (max-width: 480px) {
.flickity-slideshow .carousel-cell, .flickity-slideshow .carousel-cell img{
    height: auto !important;
}
.carousel {
box-shadow:none !important;
}
}


/*adding hover effect menu items*/
.header__menu-item:hover {
color: #D8CDC1
}

/*remove hover borders all form fields*/
.field:before, .customer .field:before,.field:after, .customer .field:after {
	display: none!important;
}
.customer .field input, .customer select, .field__input, .select__select {
	box-shadow: 0 0 0!important;
    border: 0px solid #000;
}

/*making form font smaller*/
label.field__label {
    font-size: 14px;
}


/*remove overlay to allow home slideshow to be clickable*/
.overlay-color {
    display: none !important;
}

/*remove arrows from announcement bar*/
button.slider-button.slider-button--prev {
    display: none;
}
button.slider-button.slider-button--next {
    display: none;
}

/*editing font sizes for mobile*/
@media only screen and (max-width: 749px) {
 h1 {
  letter-spacing: 0.5em !important;
  font-size: 20px !important;
   line-height:1.8rem!important;
      margin-bottom:-10px!important;
}
}

@media only screen and (max-width: 749px) {
 h2 {
  letter-spacing: 0.5em !important;
  font-size: 20px !important;
   line-height:1.8rem!important;
   margin-bottom:-10px!important;
}
}


/* reduce image with text padding on mobile */
@media only screen and (max-width: 749px) {
.image-with-text--overlap .image-with-text__content {
    width: 100% !important;
       padding: 10px 0px;
    margin: 0!important;
}
}


/*removing margin collection list mobile*/
@media only screen and (max-width: 749px) {
.collection-list.grid {
  Margin-top: -20px!important;
}
}

/* remove collection paging */
.slider-buttons.no-js-hidden{
display:none !important;
}

/*button styling for mobile*/

/* adding font styling (mobile) to buttons*/
a.button {
font-size:15px !important;
  letter-spacing:0rem!important;
  font-family:GlacialIndifference;
}


/* making button smaller on mobile */
@media screen and (max-width: 749px){
.banner__buttons .button{
     padding: 10px 15px;
     min-width: auto;
     min-height: auto;
  }
}

/*changing font and size for product headings - card */
.card__information a {
  font-size: 13px !important;
    Font-family: GlacialIndifference!important;
  margin-top:-15px!important;
}

/*changing font and size for product headings - card - mobile */
@media only screen and (max-width: 749px) {
  .card__information a {
  font-size: 13px !important;
    Font-family: GlacialIndifference!important;
  margin-top:-15px!important;
    letter-spacing:0rem!important;
}
}


/*changing font for product prices - card */
  .card-information .price {
  font-size: 14px !important;
    Font-family: GlacialIndifference!important;
      margin-bottom:-15px!important;
}

@media only screen and (max-width: 749px) {
  .card-information .price {
    font-size: 13px !important;
  }
}




/*styling brand info and centre brand info desktop*/
@media screen and (min-width:769px){ 
  .footer-block__brand-info  {
  font-size:14px!important;
}
}

/*changing size of buy it now and add to cart buttons desktop*/
@media screen and (min-width: 750px){
  .product-form__buttons {
    max-width: 100% !important;
}
}


/*changing size and styling of buy it now and add to cart buttons desktop*/
@media screen and (min-width: 750px){
  product-form.product-form button:not(.shopify-payment-button__more-options),
product-form.product-form .shopify-cleanslate span {
   font-size:13px!important;
    max-width: 100% !important;
  text-transform:uppercase!important;
  font-family: GlacialIndifference!important;
}
}

/*changing size and styling of buy it now and add to cart buttons mobile*/
@media screen and (max-width: 749px){
  product-form.product-form button:not(.shopify-payment-button__more-options),
product-form.product-form .shopify-cleanslate span {
   font-size:13px!important;
    font-family: GlacialIndifference !important;
    text-transform:uppercase!important;
}
}

/*changing font for product titles on product pages */
@media screen and (min-width: 750px){
.product__title h1 {
  font-size: 20px!important;
  letter-spacing: 1rem!important;
  font-family: Yanone !important;
  padding-top: 60px !important;
}
}

/*changing font for product titles on product pages mobile */
@media screen and (max-width: 749px){
.product__title h1 {
  font-size: 30px!important;
  letter-spacing: 0.5rem!important;
  font-family: Yanone !important;
  padding-top: 20px !important;
    padding-bottom: 10px !important;
}
}

.product__description p {
    font-size: 15px!important;
  line-height:18px!important
}

/*limit desktop width to 100% */
#MainContent {
overflow: hidden;
}

/*shop button border */
.quick-add__submit.button {
border:solid 0px  #C0AC99;
background-color: #000000 !important;
font-size: 12px;
}

/*sorting forced to Raleway */
.facets-container h2{
font-family: var(--font-body-family) !important;
font-weight: var(--font-body-weight);
}

/*mobile sorting font size and product/price spacing */
@media screen and (max-width: 749px){
.facets-container h2, .mobile-facets__open-label{
font-size:12px !important;
}
.card__content{
padding: 10px 0!important;
}
.card__content .price{
padding-bottom: 10px;
}
}

/*styling add to cart and choose options modals and cart */
#cart-notification h3{
    font-size: 18px !important;
font-family: GlacialIndifference!important;
letter-spacing: -0.04rem !important;
  margin-top:10px;
}
#cart-notification h2{
font-size: 20px!important;
    line-height: calc(1 + 0.2 / var(--font-body-scale));  
  font-weight:bolder;
  font-family: 'Yanone' !important;
letter-spacing: 0 !important;
}
#cart-notification-product{
padding-bottom:0;
}
.quick-add-modal__content-info h2{
font-size: 17px !important;
  letter-spacing:0.5rem!important;
    font-family: 'Yanone' !important;
    line-height: 1.5 !important;
}

.quick-add-modal__content-info a{
font-size: 12px !important;
  letter-spacing:0.01rem!important;
    font-family: 'GlacialIndifference' !important;
    line-height: 1.5 !important;
}


  
 .product-form__input input[type=radio]:checked+label {
    background-color: #000000!important;
   border:solid 0px  #C0AC99;
}


#cart-notification-button, .product-form__submit{
min-width: calc(12rem + var(--buttons-border-width)* 2);
    min-height: calc(4.5rem + var(--buttons-border-width)* 2);
  display: inline-flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #000000!important;
    padding: 0 3rem;
    cursor: pointer;
    font-family: GlacialIndifference !important;
    text-decoration: none;
    color: rgb(var(--color-button-text));
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
  font-size: 1.5rem !important;
    letter-spacing: 0.1rem !important;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
}
.link, .customer a {
text-decoration:none;
}
.facet-filters__sort:focus-visible {
    outline:none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
cart-items h1 {
    font-family: 'Yanone' !important;
}
.cart-item__name {
font-family: 'GlacialIndifference' !important;
}
h2.totals__total{
font-family: 'Yanone' !important;
font-size: 24px !important;
}
@media screen and (min-width: 750px){
h2.totals__total{
margin-bottom:5px;
}
}
cart-items a.underlined-link, cart-items a.underlined-link:hover{
    border: solid 1px #000000!important;
    padding: 0 5rem;
    font-family: GlacialIndifference !important;
  font-size: 1.5rem !important;
    letter-spacing: 0.1rem !important;
  border:none;
line-height: 3;
}
.cart__warnings a{
 font-family: GlacialIndifference !important;
  font-size: 1.5rem !important;
    letter-spacing: 0.1rem !important;
padding: 0 5rem !important;
}
h2.cart__login-title{
font-size: 40px !important;
font-family: 'Yanone' !important;
  margin: 1rem 0 3rem;
}
@media screen and (max-width: 749px){
h2.cart__login-title{
font-size: 24px !important;
}
}

/*styling ‘sort by’ filter on mobile */
.mobile-facets__summary, .mobile-facets__details {
    padding: 0 1.4rem !important;
}
.mobile-facets__details summary{
padding: 1rem 1.4rem !important;
}

/*centre submenu on desktop */
.list-menu--disclosure {
    left: -5.5rem;
}

/*Remove button hover border */
.button::after, .shopify-challenge__button::after, .customer button::after, .shopify-payment-button__button--unbranded::after {
  content: none;
}

/*styling mobile menu*/

/*editing colour for menu items on hover*/
@media (max-width:768px) {
.menu-drawer__menu-item:hover {
  background: #1e1718!important;
  color: #b6ab99!important;
}
}
/*editing colour for active menu item*/
@media (max-width:768px) {
.menu-drawer__menu-item--active {
  background: transparent !important;
}
}

/* Edits to font styling mobile menu */
.menu-drawer__menu-item a, .menu-drawer__menu-item, .menu-drawer__close-button{
  font-size: 17px !important;
  letter-spacing:0.2rem;
}

/* Submenu (second level) in the mobile drawer, slightly smaller than top level */
.menu-drawer__submenu .menu-drawer__menu-item,
.menu-drawer__submenu .menu-drawer__menu-item a {
  font-size: 15px !important;
}

/*collection card border radius*/
.collection-list .card .card__inner .card__media {
  border-radius: 10% 0% 10% 0% !important;
}

/*collection card transparent*/
.collection-list .card .gradient {
  background: transparent !important;
}

/*adding border around product cards*/
.card--card {
  border: solid 1px #d8cdc1!important;
}

h1, h2, h3, h4, h5, h6 {
  word-break: keep-all!important;
}

/*styling image with text section*/
.image-with-text {
  margin-top: -30px;
}

@media only screen and (max-width: 749px) {
 .image-with-text   {
    padding-bottom: 50px !important;
  }
}



/*all edits to multicolumn*/

/*changing body text size multicolumn mobile*/
@media only screen and (max-width: 749px) {
  .multicolumn-card__info p {
    font-size: 13px !important;
    margin-top: -20px;
  }
}
.multicolumn-card__info p {
  line-height: 1.5 !important;
}

/*changing body text size featured collection mobile */
@media only screen and (max-width: 749px) {
  .collection__description p {
    font-size: 13px !important;
    margin-top:10px!important;
  }
}
  .collection__description {
  line-height: 1.5 !important;
}


/*remove effect of h1 size on home page logo*/
h1.header__heading {
       font-size: 0 !important;
    }

/*all edits to blog page*/

/*row of 3 blog posts - desktop/ipad*/
@media screen and (min-width: 750px) {
  .blog-articles {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .blog-articles--collage > *:nth-child(3n + 1) {
    grid-column: span 1 !important;
  }
}

/*centre title and date blog posts*/
.article-card__info {
text-align: center!important;
font-size: 10px!important;
  letter-spacing:none!important;
  text-transform: none!important;
  
}



/*changing font for blog titles on blog pages */
@media screen and (min-width: 750px){
.article-template__title {
  font-size: 40px!important;
  font-family: Yanone !important;
  letter-spacing: 0.5rem!important;
  margin-top:-210px!important;
  color:#F1EDE3!important;
}
}

/*changing font for blog titles on blog pages mobile */
@media screen and (max-width: 749px){
.article-template__title {
  font-size: 25px!important;
  letter-spacing: 0.5rem!important;
  line-height:30px!important;
  text-align: left!important;
  margin-left:-8px!important;
  font-family: Yanone !important;
    max-width: 100%;
    margin-left:8px!important;
}
}

/*font for blog content on blog pages */
@media screen and (min-width: 750px){
.article-template__content {
  line-height: 23px!important;
  font-family: GlacialIndifference !important;
  margin-top:-30px!important;
  font-size:15px!important;
  max-width: 80%;
}
}

/*font for blog content on blog pages */
@media screen and (max-width: 749px){
.article-template__content {
  line-height: 22px!important;
      max-width: 100%!important;
  margin-left:-3px!important;
}
}

/*editing accordian block*/
@media only screen and (min-width: 750px) {
h2.accordion__title {
  font-size: 14px !important;
  font-family: GlacialIndifference!important;
  letter-spacing: 0.3rem!important;
    text-transform: uppercase;
  margin-left: 10px!important;
}
}


@media only screen and (max-width: 749px) {
h2.accordion__title {
  font-size: 13px !important;
  font-family: GlacialIndifference!important;
  letter-spacing: 0.25rem!important;
    text-transform: uppercase;
  margin-bottom:1px!important;
      margin-left: 10px!important;
}
}

.accordion .icon-accordion {
    margin-right: calc(var(--font-heading-scale)* .2rem)!important;
    height: calc(var(--font-heading-scale)* 1.4rem)!important;
}
.accordion {
padding:0!important;
margin:0!important;
}
/*space above accordian */
.product-form__buttons {
margin-bottom:50px;
}

/*reduce marquee top and bottom 'padding'*/
.marquee__content{
max-height: 60px;
}


/*move date above title on news page*/
.news .card__information {
display: flex; 
flex-direction: column;
}
.news .card__information .card__heading {
order: 2; 
    margin-top: 15px;
margin-bottom: 0;
}
.news .card__information .article-card__info{
order: 1; 
margin-bottom: -5px;
}
.news .card__information .article-card__excerpt{
order: 3; 
}

/*make blog images full width and back to blog postion and styling */
.article-template{
display: flex; 
flex-direction: column;
}
.article-template .article-template__hero-container {
  width: 100%!important;
  max-width: 100%!important;
  order: 1; 
}
.article-template .article-template__comment-wrapper {
order: 5; 
}
.article-template header {
  order: 2; 
}
.article-template .article-template__social-sharing{
order: 3; 
}
.article-template .article-template__content{
order: 4; 
}
.article-template .article-template__back{
order: 6; 
}
.article-template__back a{
border: solid 1px #000000!important;
    font-size: 12px;
padding: 1vw 3vw 1vw 3vw !important;
letter-spacing: 0.1rem;
    line-height: calc(1 + 0.2 / var(--font-body-scale));
justify-content: center;
    align-items: center;
    color: rgb(var(--color-button-text));
    transition: box-shadow var(--duration-short) ease;
    appearance: none;
    background-color: transparent);
}
.article-template__back{
  max-width:300px;
margin: 0 auto 50px ;
}

/*centre comment post button*/
.comment-submit-button {
    margin: 0 auto;
    display: block;
  font-size: 12px;
}

/*borders on comment inputs*/
#comment_form input, #comment_form textarea{
border: solid 0px #C0AC99;
}

/*leave a comment styling */
@media screen and (min-width: 750px){
#comment_form h2 {
  font-size: 20px;
  letter-spacing: 0.5rem !important;
  font-family: Yanone !important;
  margin: -40px auto 30px !important;
  text-align:left!important;
}
}

/*leave a comment styling mobile */
@media screen and (max-width: 749px){
#comment_form h2  {
    font-size: 25px !important;
    letter-spacing: 0.3rem !important;
  font-family: Yanone !important;
    margin: -40px auto 20px !important;
}
}


/* changing button widths */
.button {
  padding: 1vw 5vw 1vw 5vw !important;
}


/*styling mobile fonts - line heights*/
@media only screen and (max-width: 749px) {
  h2 {
    line-height: 4.75rem !important;
  }
}

/*removing back to blog*/
.article-template__back { display: none; }
  
/*changing shape of badges*/
.badge{
border-radius: 0;
  top: 0;
  left: initial;
  right: 0;
  padding: 5px;
}

/*adding padding above product card heading*/
.card__heading a {
  padding-top: 15px!important;
}

/*adding colour to contact form fields*/
.field__input {
background-color:  #000000!important;
}

/*more styling for store page filters*/
.product-count__text .text-body {
letter-spacing: 0rem!important
}


/* assign blog image low z-index so title will show over */
.article-template .article-template__title {
  position: relative;
  z-index: 1;
}

/*editing accordian block FAQS*/
@media only screen and (min-width: 750px) {
h3.accordion__title {
  font-size: 14px !important;
  font-family: GlacialIndifference!important;
  letter-spacing: 0.3rem!important;
    text-transform: uppercase;
  margin-left: 10px!important;
}
}


@media only screen and (max-width: 749px) {
h3.accordion__title {
  font-size: 12px !important;
  font-family: GlacialIndifference!important;
  letter-spacing: 0.2rem!important;
    line-height: 23px!important;
    text-transform: uppercase;
  margin-bottom:1px!important;
    margin-left: 10px!important;
}
}

/*styling cart drawer*/
h2.drawer__heading {
  font-size: 20px!important;
      letter-spacing: 1rem!important;
  margin-top:20px!important;
    text-transform: uppercase;
}

h2.totals__total {
  font-size: 16px!important;
      letter-spacing: 0.5rem!important;
    text-transform: uppercase;
}

p.totals__total-value {
  font-size: 15px!important;
  margin-bottom:4px!important;
}

h2.cart__empty-text {
  font-size: 20px!important;
      letter-spacing: 0.5rem!important;
    margin-bottom:40px!important;
}

/*styling login*/
#customer_login .field input {
  background-color: #000000;
}

#customer_login a {
  letter-spacing: 0rem !important;
}

/*matching all account pages to rest of site*/
#customer_login.header {
  margin-top:0px!important
}

/*styling create account page*/
h1.create_customer {
  font-size: 20px!important;
      letter-spacing: 0.5rem!important;
}

form#create_customer .field input {
  background-color: #000000;
}



/*fix menu dropdown on account pages*/
.account .header__submenu{
max-width: 200px !important;
    width: 200px !important;
}

/*match comments padding on mobile*/
@media screen and (max-width: 749px) {
 #comments {
 padding: 0 23px;
}
}

/*black badge outlines - product page*/
.product-form__input input[type=radio]+label {
    border-color: #000000!important;
}

/*black thumbnails outlines - product page*/
.thumbnail[aria-current] {
    box-shadow: none!important;
    border-color: #000000!important;
}

/*making text black in all form fields*/

.form__label {
  color:#b6ab99!important;
}

.field__label {
  color:#b6ab99!important;
}


.newsletter__wrapper .field__label {
  color:#b6ab99!important;
}

.article-template__comment-wrapper .field__label {
  color:#b6ab99!important;
}

.article-template__comment-wrapper  input {
  color:#b6ab99!important;
}


/*making thumbnails round*/
.thumbnail {
border-radius: 100%!important;
}

/*fix journal text margins on mobile*/
@media screen and (max-width: 749px) {
    .article-template__content {
        margin: 0px 0px 0px 0px !important;
    }
}
/*adding margin desktop collections*/
@media screen and (max-width: 749px) {
.collection-list {
    margin-left: -10px;
    margin-right: -10px;
  }
}

/*stop hover underline in FAQs headings*/
h3.accordion__title:hover, .collapsible-content summary:hover .accordion__title{
text-decoration:none !important;
}

/**/
@media screen and (max-width: 749px) {
.footer-block__brand-info{
  display: none !important;
}
}

/*styling menu items footer - mobile*/
@media screen and (max-width: 749px){
.footer-block__details-content .list-menu__item--link {
  line-height: 10px !important;
  font-size: 14px !important;
  font-family:GlacialIndifference!important;
  letter-spacing:0rem!important;
}
}

@media screen and (max-width: 749px){
.footer-block__heading{
  margin-bottom: 10px !important;
}
}

/*input fields and quick add button colour*/
.field__input, .select__select, .customer .field input, .customer select, .quick-add__submit.button { 
  color:#b6ab99!important;
}

/*account input label colour*/
.field__label, .customer .field label{ 
  color:#b6ab99!important;
}

  /*changing header letter spacing on mobile*/
@media only screen and (max-width: 749px) {
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.5rem!important;
}
}

@media only screen and (max-width: 749px) {
  h2 {
    font-size: 30px !important;
  }
}

/* adding fixed background mobile - new css*/
@media only screen and (max-width: 749px) {
body:after {
      content:"";
      width: 100%;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      z-index:-1; /* needed to keep in the background */
      background-color: #000;
      background-image:
        linear-gradient(rgba(0,0,0,var(--backdrop-darken)), rgba(0,0,0,var(--backdrop-darken))),
        url("https://cdn.shopify.com/s/files/1/0604/7868/5338/files/mobile_image_-_seamless_copy.jpg?v=1717574513&width=900");
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
}
.color-background-1 {
    background: transparent;
}
}

/* adding fixed background desktop - new css*/
@media only screen and (min-width: 750px) {
body:after {
      content:"";
      width: 100%; 
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      z-index:-1; /* needed to keep in the background */
      background-color: #000;
      background-image:
        linear-gradient(rgba(0,0,0,var(--backdrop-darken)), rgba(0,0,0,var(--backdrop-darken))),
        url("https://cdn.shopify.com/s/files/1/0604/7868/5338/files/desktop_background_copy.jpg?v=1717576263&width=1600");
      background-repeat: no-repeat;
      background-size: cover;
      position: fixed;
}
}
.color-background-1 {
    background: transparent;
}
/* give background to cart drop-down and the drop down menu
   Note: the store runs cart_type "drawer", so #cart-notification does not
   currently render. The trailing comma here made the whole rule invalid, so
   this never applied even when it did render. Fixed so it works if the cart
   type is ever switched to "notification". */
#cart-notification {
 background-image: url("https://cdn.shopify.com/s/files/1/0604/7868/5338/files/desktop_background_32e49d50-cd2e-4f61-80ef-58140d56d145.jpg?v=1717574467&width=1200");
        background-repeat: no-repeat;
      background-size: cover;
}

/* adding menu background - new css*/
@media only screen and (max-width: 749px) {
#menu-drawer {
      background-color: #000;
      background-image:
        linear-gradient(rgba(0,0,0,var(--backdrop-darken)), rgba(0,0,0,var(--backdrop-darken))),
        url("https://cdn.shopify.com/s/files/1/0604/7868/5338/files/mobile_image_-_seamless_copy.jpg?v=1717574513&width=900");
        background-size: cover;
}
}
/* ^ This closing brace was missing in the stock theme. The @media
   (max-width: 749px) block above was never closed, so every rule appended
   after it was silently nested inside a mobile-only media query and had no
   effect on desktop. */

/* ==========================================================================
   Minimum readable text size (12px floor)

   37 elements rendered at 10-11px, mostly custom !important overrides layered
   on top of Dawn. 10px is below the practical floor for body text on a phone,
   and it is worse here because the palette is low-contrast sand on black.

   Deliberately NOT raised: floating input labels and the decorative badge at
   0.9rem, which are UI chrome rather than text anyone reads.
   ========================================================================== */

.caption,
.caption-with-letter-spacing {
  font-size: 1.2rem;
}

.unit-price {
  font-size: 1.2rem;
}

.copyright__content,
.footer small,
.footer small.copyright__content,
.footer small.copyright__content a {
  font-size: 1.2rem !important;
}

.article-card__info {
  font-size: 1.2rem !important;
}

.active-facets__button-wrapper *,
.active-facets .active-facets__button {
  font-size: 1.2rem;
}

@media screen and (min-width: 750px) {
  .newsletter__wrapper p {
    font-size: 1.2rem !important;
  }
}

@media only screen and (max-width: 749px) {
  .announcement-bar__message {
    font-size: 1.2rem !important;
  }
}

/* ==========================================================================
   Touch target sizing (44px minimum)

   Padding is used rather than width/height so the visual size of each control
   is unchanged — only the tappable area grows. Product card links are already
   full-card tappable via a .full-unstyled-link::after overlay, so they are
   deliberately excluded despite a small text bounding box.
   ========================================================================== */

@media screen and (max-width: 749px) {
  /* Announcement bar link: 330x28 */
  .announcement-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.4rem;
  }

  /* Search icon: 20px wide */
  .header__icon--search {
    min-width: 4.4rem;
  }

  /* Footer credit + policy links: as small as 121x14 */
  .footer__content-bottom a,
  .copyright__content a,
  .policies a,
  .footer-block__details-content > li > a,
  .list-menu__item--link {
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
  }

  /* Facet controls: widths down to 20px */
  .mobile-facets__open-wrapper,
  .mobile-facets__summary,
  .mobile-facets__clear,
  .facets__label,
  .product-count__text {
    min-height: 4.4rem;
    display: inline-flex;
    align-items: center;
  }

  .mobile-facets__summary,
  .facets .select__select {
    min-width: 4.4rem;
  }

  /* Buttons sitting just under the line (38-42px) */
  .button,
  .shopify-challenge__button,
  .newsletter-form__button,
  .field__input,
  .field__button {
    min-height: 4.4rem;
  }
}

/* ==========================================================================
   Header logo sizing

   Desktop size comes from the logo_width theme setting (now 330px). On mobile
   the logo is squeezed by the header grid rather than by a fixed cap, so it
   needs explicit room. Values stay clear of the hamburger, search and cart
   icons at 375px, the narrowest common phone.
   ========================================================================== */

@media screen and (max-width: 749px) {
  /* Size the WRAPPER, not the image. The theme's "reduce logo size on scroll"
     setting shrinks .header__heading-logo-wrapper to 75%; pinning a fixed
     width on the image made it overflow that shrunken wrapper and drift ~22px
     right of centre once the header stuck. Letting the image fill the wrapper
     keeps it centred at both sizes.
     The vw cap reserves room for the hamburger, search and cart icons — a flat
     vw value let the logo crowd them on 320-360px phones and pushed the cart
     icon past the viewport. */
  .header__heading-logo-wrapper {
    width: 175px;
    max-width: calc(100vw - 190px);
    margin-left: auto;
    margin-right: auto;
    /* Take the wrapper out of the parent's width calculation. It is an
       inline-block in an auto-sized grid cell, so with a percentage width the
       cell sizes to the child and the child sizes to the cell. During the
       0.3s width transition on scroll that loop visibly oscillated. */
    flex: 0 0 auto;
  }

  /* The theme shrinks the logo on scroll with width:75%. That percentage
     resolves against the content-sized cell above and is the other half of the
     feedback loop. Pinned to an absolute value instead — same 75% result,
     no circular dependency, so the transition is smooth and stays centred. */
  .scrolled-past-header .header__heading-logo-wrapper {
    width: 131px !important;
    /* Deliberately no max-width here. The base cap already applies in both
       states, and a second cap snapped instantly while width was still
       animating, throwing the logo ~11px off centre mid-transition on
       320-360px phones. */
  }

  .header__heading-logo {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .header__heading-logo {
    max-width: 100%;
  }
}

/* ==========================================================================
   Instagram feed (Instafeed app) — limit visible rows

   The app renders 8 posts: 2 columns x 4 rows on mobile, 4 columns x 2 rows
   on desktop. Four rows of Instagram pushed the newsletter and footer a long
   way down on a phone. This trims it to 2 rows on mobile.

   NOTE: this hides posts, it does not stop them loading. The proper fix that
   also saves the bandwidth is to lower the post count inside the Instafeed
   app settings in Shopify admin.
   ========================================================================== */

@media screen and (max-width: 749px) {
  .instafeed-new-layout-item:nth-child(n + 5) {
    display: none;
  }
}

/* ==========================================================================
   Round 2 sizing adjustments
   ========================================================================== */

/* Marquees (STAY CONNECTED / SHOP BY COLLECTION). A global mobile rule sets
   every h2 to 30px, which made the scrolling strips shout next to 15px body
   copy. Desktop was already fine, so this is mobile only. */
@media screen and (max-width: 749px) {
  .marquee h2,
  .marquee .marquee__text {
    font-size: 17px !important;
    letter-spacing: 0.25em;
  }

  .marquee__image {
    max-height: 34px;
    width: auto;
  }
}

/* Newsletter body. Was 15px with 0.6px tracking, which on a low-contrast
   sand-on-black palette read as spaced-out and hard to scan. */
.newsletter__wrapper .rte,
.newsletter__wrapper p,
.newsletter__subheading {
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.65;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile main drawer: 17px was slightly oversized. Submenu stays at 15px. */
.menu-drawer > .menu-drawer__inner-container > .menu-drawer__navigation > .menu-drawer__menu > .menu-drawer__menu-item,
.menu-drawer__navigation > ul > li > a.menu-drawer__menu-item,
.menu-drawer__navigation > ul > li > details > summary.menu-drawer__menu-item {
  font-size: 15px !important;
}

/* Featured-collection heading ("ADORN, TRANSFORM."). At 30px with 5px tracking
   it filled the full line box and broke across two lines on phones. Scaling
   with the viewport keeps it on one line from 320px up without shrinking it
   on larger screens. */
@media screen and (max-width: 749px) {
  /* !important is required: a global mobile rule sets h2 to 30px !important.
     line-height also needs resetting — it was fixed at 47.5px, which left a
     19px heading sitting in a 99px box. */
  .collection__title h2.title,
  .collection__title .title.h2,
  .featured-collection .title {
    font-size: clamp(15px, 4.8vw, 30px) !important;
    letter-spacing: 0.08em !important;
    line-height: 1.35 !important;
    text-wrap: balance;
  }
}

/* ==========================================================================
   Section-scoped rules

   Scoped with [id$="__section_key"] rather than plain class selectors, because
   a bare .multicolumn-card__image-wrapper rule also hit the 60 images on the
   Custom Gallery page and shrank them to icon size. Kept here rather than in
   section custom_css, which Shopify caps at 500 characters.
   ========================================================================== */

/* Homepage feature row: WORLDWIDE / HANDMADE icons */
[id$="__multicolumn_d8BHbG"] .multicolumn-card__image-wrapper {
  max-width: 42px !important;
  width: 42px !important;
}

@media screen and (max-width: 749px) {
  [id$="__multicolumn_d8BHbG"] .multicolumn-card__image-wrapper {
    max-width: 34px !important;
    width: 34px !important;
  }
}

/* Customer notes / testimonials */
[id$="__customer_notes"] .multicolumn-card {
  border-top: 1px solid rgba(var(--color-foreground), 0.25);
  padding-top: 1.8rem;
}

[id$="__customer_notes"] .multicolumn-card__info {
  padding-top: 0 !important;
}

[id$="__customer_notes"] .multicolumn-card__info h3 {
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
  opacity: 0.7;
  margin-bottom: 1.2rem;
}

[id$="__customer_notes"] .multicolumn-card__info p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  font-style: italic;
}

[id$="__customer_notes"] .multicolumn-card__info p:last-child {
  font-style: normal;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  opacity: 0.7;
  margin-top: 1.4rem;
}

@media screen and (max-width: 749px) {
  [id$="__customer_notes"] .multicolumn-card__info p {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   Round 3 typography
   ========================================================================== */

/* "Notes from those who found their piece" is a sentence, not a one-word
   display heading like DRYAD, so it should not carry the full h2 display size.
   Same Yanone face as the rest of the site, scaled down and with tracking
   loosened rather than the 10px display setting. */
[id$="__customer_notes"] .title,
[id$="__customer_notes"] h2 {
  font-size: 24px !important;
  letter-spacing: 0.16em !important;
  line-height: 1.45 !important;
}

@media screen and (max-width: 749px) {
  [id$="__customer_notes"] .title,
  [id$="__customer_notes"] h2 {
    font-size: 18px !important;
    letter-spacing: 0.14em !important;
  }
}

/* Desktop dropdown / submenu links only. Top-level nav stays at 16px. */
@media screen and (min-width: 990px) {
  .header__submenu .header__menu-item,
  .header__submenu a.header__menu-item,
  .mega-menu__link {
    font-size: 15px !important;
  }
}

/* Founder caption on mobile. The mystic section carries a section-level
   override (12px / 0.3em) that image-with-text does not inherit, so the two
   captions drifted apart on phones. Mirrored here. */
@media screen and (max-width: 749px) {
  [id$="__founder_story"] .caption,
  [id$="__founder_story"] .image-with-text__text--caption {
    font-size: 12px !important;
    letter-spacing: 0.3em !important;
  }
}

/* ==========================================================================
   Round 4
   ========================================================================== */

/* Reviews / "Notes from those who found their piece" hidden on every screen.
   Kept in the template rather than deleted so the copy is recoverable. */
[id$="__customer_notes"] {
  display: none !important;
}

/* Marquee strips (STAY CONNECTED / SHOP BY COLLECTION) were too tall on
   phones. The height is set by a flat .marquee__content{max-height:60px} rule,
   so it has to be lowered there — adding padding only made the strip taller. */
@media screen and (max-width: 749px) {
  .marquee__content {
    max-height: 40px !important;
  }

  .marquee {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .marquee h2,
  .marquee .marquee__text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
  }

  .marquee__image {
    max-height: 24px !important;
  }
}

/* Instagram: 2 rows on desktop as well. The feed renders 6 per row there,
   so everything past the 12th is hidden. Mobile is 2 per row and handled
   separately above. */
@media screen and (min-width: 750px) {
  .instafeed-new-layout-item:nth-child(n + 13) {
    display: none;
  }
}

/* Newsletter desktop size is set in that section's own custom_css, which
   Shopify injects inline after this file and therefore wins. Handled there. */

/* Founder block on desktop: the heading ran to two lines and there was no gap
   under the caption. Mobile was already correct, so this is desktop only.
   The caption class is image-with-text__text--caption, not .caption. */
@media screen and (min-width: 750px) {
  [id$="__founder_story"] .image-with-text__text--caption {
    margin-bottom: 1.6rem !important;
    display: block;
  }

  [id$="__founder_story"] h1,
  [id$="__founder_story"] h2 {
    font-size: 34px !important;
    letter-spacing: 0.14em !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
  }
}

/* Instagram grid: pin the desktop column count.
   The app's grid is responsive (6 cols at 1280px, 7 at 1440, 8 at 1680), so a
   fixed "hide past the 12th" cut only produced two complete rows at 1280 and
   left gaps everywhere else. Six columns makes 12 exactly two full rows at any
   desktop width. Mobile keeps the app's own 2-column layout. */
@media screen and (min-width: 750px) {
  .instafeed-new-layout-wrapper {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* True centre for the header logo on mobile.
   The stock grid is `56px 190px 69px` — one icon on the left, two on the
   right — so the middle column sits ~6px left of centre at 375px and ~11px at
   360px. (Pre-existing: the live theme measures the same.) Equal 1fr flanks
   put the logo dead centre at every width while the icons keep their space. */
@media screen and (max-width: 749px) {
  /* Balance the flanks by CONTENT, not by fixing the track widths.
     The middle drifts because the right flank holds two icons and the left
     holds one, so the auto tracks differ. Fixed flank widths fixed the centring
     but forced a total wider than 360px viewports and caused sideways scroll.
     Matching the drawer's min-width to the icon group keeps the tracks equal
     while letting the grid still shrink naturally. */
  .header--top-center header-drawer,
  .header--mobile-center header-drawer {
    min-width: 6.9rem;
  }

  .header--top-center .header__icons,
  .header--mobile-center .header__icons {
    justify-self: end;
  }

  .header--top-center header-drawer,
  .header--mobile-center header-drawer {
    justify-self: start;
  }
}