/* ==========================================================================
   Accademia Amigurumi — base styles
   Tokens, reset, typography, layout utilities, buttons, fields, header,
   menu drawer, search modal, announcement bar, footer.
   Breakpoints: 750px (tablet up), 990px (desktop up).
   ========================================================================== */

:root {
  /* Typography */
  --font-body-family: Barlow, sans-serif;
  --font-body-weight: 500;
  --font-body-weight-bold: 800;
  --font-heading-family: Barlow, sans-serif;
  --font-heading-weight: 700;
  --font-heading-scale: 1.3;
  --font-heading-line-height: 0.3;
  --font-heading-letter-spacing: 0.06rem;
  --font-marquee-family: "DM Serif Display", serif;

  /* Colours ("r, g, b" triplets so they can be used with alpha) */
  --color-base-text: 18, 18, 18;
  --color-base-background-1: 255, 255, 255;
  --color-base-background-2: 143, 174, 158;
  --color-base-accent-1: 143, 174, 158;
  --color-base-accent-2: 143, 174, 158;
  --color-base-solid-button-labels: 255, 255, 255;
  --color-base-outline-button-labels: 143, 174, 158;
  --color-shadow: 18, 18, 18;
  --color-stars: #ffd700;
  --alpha-text: 0.9;

  /* Layout */
  --page-width: 140rem;
  --page-gutter-mobile: 1.5rem;
  --page-gutter-desktop: 5rem;
  --grid-desktop-vertical-spacing: 40px;
  --grid-desktop-horizontal-spacing: 40px;
  --grid-mobile-vertical-spacing: 20px;
  --grid-mobile-horizontal-spacing: 20px;

  /* Shapes */
  --media-radius: 12px;
  --text-boxes-radius: 24px;
  --buttons-radius: 20px;
  --buttons-border-width: 2px;
  --inputs-radius: 6px;
  --inputs-border-width: 1px;
  --inputs-border-opacity: 0.6;
  --badge-corner-radius: 0.6rem;
  --popup-corner-radius: 14px;
  --product-card-corner-radius: 1.2rem;
  --product-card-shadow: 0.2rem 0.6rem 1.5rem rgba(var(--color-shadow), 0.1);
  --collection-card-corner-radius: 1.2rem;
  --collection-card-shadow: 0.2rem 0.6rem 1.5rem rgba(var(--color-shadow), 0.05);
  --popup-shadow: 10px 12px 20px rgba(var(--color-shadow), 0.1);

  --duration-short: 100ms;
  --duration-default: 200ms;
  --duration-long: 500ms;
}

/* Colour schemes ---------------------------------------------------------- */

:root,
.color-background-1 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-1);
  --color-button: var(--color-base-accent-1);
  --color-button-text: var(--color-base-solid-button-labels);
  --color-link: var(--color-base-outline-button-labels);
  --color-badge-background: var(--color-background);
  --color-badge-border: var(--color-foreground);
}

.color-background-2 {
  --color-foreground: var(--color-base-text);
  --color-background: var(--color-base-background-2);
  --color-button: var(--color-base-text);
  --color-button-text: var(--color-base-background-2);
  --color-link: var(--color-foreground);
}

.color-inverse {
  --color-foreground: var(--color-base-background-1);
  --color-background: var(--color-base-text);
  --color-button: var(--color-base-background-1);
  --color-button-text: var(--color-base-text);
  --color-link: var(--color-foreground);
}

.color-accent-1,
.color-accent-2 {
  --color-foreground: var(--color-base-solid-button-labels);
  --color-background: var(--color-base-accent-1);
  --color-button: var(--color-base-solid-button-labels);
  --color-button-text: var(--color-base-accent-1);
  --color-link: var(--color-foreground);
}

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

.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2,
.color-custom {
  color: rgba(var(--color-foreground), var(--alpha-text));
  background-color: rgb(var(--color-background));
}

/* Reset ------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-columns: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  color: rgba(var(--color-foreground), var(--alpha-text));
  background-color: rgb(var(--color-background));
}

@media screen and (min-width: 750px) {
  body {
    font-size: 1.6rem;
  }
}

img {
  max-width: 100%;
  height: auto;
}

b,
strong {
  font-weight: var(--font-body-weight-bold);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: rgb(var(--color-link));
}

summary {
  cursor: pointer;
  list-style: none;
  position: relative;
}

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

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/* Chromium's ::details-content slot resets inherited box-sizing. */
details > * {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

.focus-inset:focus-visible {
  outline-offset: -0.2rem;
}

.focus-none:focus {
  outline: 0;
}

/* Typography -------------------------------------------------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

.caption {
  font-size: 1rem;
  letter-spacing: 0.07rem;
  line-height: 1.7;
}

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

.caption-large,
.field__input,
.form__label,
.select__select {
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: 0.04rem;
}

.caption-with-letter-spacing {
  font-size: 1rem;
  letter-spacing: 0.13rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.text-body {
  font-size: 1.5rem;
  letter-spacing: 0.06rem;
  line-height: 1.8;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.light {
  opacity: 0.7;
}

.nowrap {
  white-space: nowrap;
}

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

.title {
  margin: 3rem 0 2rem;
}

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

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

.title-wrapper-with-link {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0 0 3rem;
  flex-wrap: wrap;
  text-align: center;
}

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

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

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

/* Rich text */
.rte::after {
  clear: both;
  content: "";
  display: block;
}

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

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

.rte p {
  margin: 0 0 1em;
}

.rte h1 {
  margin: 0.67em 0;
}

.rte h2 {
  margin: 0.83em 0;
}

.rte h3 {
  margin: 1em 0;
}

.rte h4 {
  margin: 1.33em 0;
}

.rte h5 {
  margin: 1.67em 0;
}

.rte ul,
.rte ol {
  padding-left: 2rem;
  margin: 0 0 1em;
}

.rte a {
  color: rgba(var(--color-link), 0.85);
  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 img {
  border-radius: var(--media-radius);
}

/* Utilities --------------------------------------------------------------- */

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

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

.hidden {
  display: none !important;
}

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

@media screen and (max-width: 749px) {
  .small-hide,
  .mobile-hidden {
    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;
  }
}

@media screen and (min-width: 750px) {
  .desktop-hidden {
    display: none !important;
  }
}

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

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

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.display-block {
  display: block;
}

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

.text-color-accent-1,
.text-color-accent-2 {
  color: rgb(var(--color-base-accent-1));
}

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

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

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

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

.link {
  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);
}

.icon-arrow {
  width: 1.5rem;
}

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

/* Layout ------------------------------------------------------------------ */

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

@media screen and (min-width: 750px) {
  .page-width {
    padding: 0 var(--page-gutter-desktop);
  }

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

@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: 72.6rem;
    padding: 0;
  }
}

.page-margin {
  margin: 7rem auto;
}

/* Per-section padding: [mobile top/bottom, desktop top/bottom] set inline. */
.section-padding {
  padding-top: var(--pt-m, 0);
  padding-bottom: var(--pb-m, 0);
}

@media screen and (min-width: 750px) {
  .section-padding {
    padding-top: var(--pt-d, 0);
    padding-bottom: var(--pb-d, 0);
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  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;
}

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

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
  }
}

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

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

@media screen and (min-width: 990px) {
  .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--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);
  }
}

/* Media boxes ------------------------------------------------------------- */

.media {
  display: block;
  background-color: rgba(var(--color-foreground), 0.1);
  position: relative;
  overflow: hidden;
}

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

.media > img,
.media > a > img,
.media > .aa-placeholder {
  display: block;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

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

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

.global-media-settings {
  position: relative;
  border-radius: var(--media-radius);
  overflow: visible !important;
  background-color: rgb(var(--color-background));
}

.global-media-settings img {
  border-radius: var(--media-radius);
}

.content-container {
  border-radius: var(--text-boxes-radius);
  position: relative;
}

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

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

/* Missing-asset placeholder: same box as the image it stands in for. */
.aa-placeholder {
  display: block;
  width: 100%;
  min-height: 4rem;
  background: repeating-linear-gradient(45deg, rgba(var(--color-foreground), 0.06) 0 12px, rgba(var(--color-foreground), 0.12) 12px 24px);
}

/* Buttons ----------------------------------------------------------------- */

.button {
  --alpha-button-background: 1;
  --button-border-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: calc(12rem + var(--buttons-border-width) * 2);
  min-height: calc(4.5rem + var(--buttons-border-width) * 2);
  padding: 0 calc(3rem - var(--buttons-border-width));
  border: var(--buttons-border-width) solid var(--button-border-color);
  border-radius: var(--buttons-radius);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: rgb(var(--color-button-text));
  background-color: rgba(var(--color-button), var(--alpha-button-background));
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--duration-short) ease;
}

.button:not([disabled]):hover {
  box-shadow: 0 0 0 1px rgba(var(--color-button), var(--alpha-button-background)), 0 0 0 1px var(--button-border-color);
}

.button--secondary {
  --alpha-button-background: 0;
  --color-button-text: var(--color-base-outline-button-labels);
  --button-border-color: rgb(var(--color-button-text));
}

.color-accent-1 .button--secondary,
.color-accent-2 .button--secondary,
.color-background-2 .button--secondary,
.color-inverse .button--secondary,
.banner--desktop-transparent .button--secondary {
  --color-button-text: var(--color-foreground);
}

.button--tertiary {
  --alpha-button-background: 0;
  --color-button-text: var(--color-base-outline-button-labels);
  --button-border-color: rgba(var(--color-button-text), 0.2);
  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--full-width {
  display: flex;
  width: 100%;
}

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

.button .loading-overlay__spinner {
  position: absolute;
  width: 1.8rem;
  height: 1.8rem;
}

.button.loading > span {
  visibility: hidden;
}

.button.loading .loading-overlay__spinner {
  display: block !important;
}

.spinner {
  animation: aa-rotator 1.4s linear infinite;
  width: 100%;
  height: 100%;
}

.spinner .path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: currentColor;
  animation: aa-dash 1.4s ease-in-out infinite;
}

@keyframes aa-rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

@keyframes aa-dash {
  0% { stroke-dashoffset: 280; }
  50% { stroke-dashoffset: 75; transform: rotate(135deg); }
  100% { stroke-dashoffset: 280; transform: rotate(450deg); }
}

/* Fields (floating label) -------------------------------------------------- */

.field {
  position: relative;
  width: 100%;
  display: flex;
}

.field__input,
.select__select {
  -webkit-appearance: none;
  appearance: none;
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: var(--inputs-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
  height: 4.5rem;
  min-height: calc(var(--inputs-border-width) * 2);
  margin: var(--inputs-border-width);
  position: relative;
  transition: box-shadow var(--duration-short) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  padding: 1.5rem;
}

.field__input:hover,
.select__select:hover {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

.field__input:focus-visible,
.select__select:focus-visible {
  box-shadow: 0 0 0 var(--inputs-border-width) rgb(var(--color-foreground));
  outline: 0;
}

.field__label {
  font-size: 1.6rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  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), var(--alpha-text));
  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 {
  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 {
  padding: 2.2rem 1.5rem 0.8rem 2rem;
  margin: var(--inputs-border-width);
}

.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.1rem;
  width: 4.4rem;
}

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

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

.text-area.field__input {
  padding-top: 2.2rem;
}

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

.select {
  position: relative;
  width: 100%;
}

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

.select__select {
  cursor: pointer;
  line-height: 1.6;
  padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem;
  font-family: var(--font-body-family);
  font-weight: var(--font-body-weight);
  font-size: 1.2rem;
  color: rgba(var(--color-foreground), var(--alpha-text));
}

/* Header ------------------------------------------------------------------ */

.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

.header-wrapper {
  display: block;
  position: relative;
}

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

.header {
  display: grid;
  grid-template-areas: "left-icon heading icons";
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 2px;
}

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

.header-drawer {
  grid-area: left-icon;
  justify-self: start;
  margin-left: -1.2rem;
}

.header__heading {
  grid-area: heading;
  justify-self: center;
  margin: 0;
  line-height: 0;
}

.header__heading-link {
  display: inline-flex;
  justify-self: center;
  margin-left: -0.75rem;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link.media {
  --media-radius: 0;
  width: 230px;
  max-width: 230px;
  padding: 0;
  overflow: visible;
}

.header__heading-link.media img {
  object-fit: contain;
}

@media screen and (min-width: 750px) {
  .header__heading-link.media {
    width: 280px;
    max-width: 280px;
  }
}

@media screen and (max-width: 989px) {
  .header__heading-link {
    margin-left: 0;
  }
}

.header__icons {
  grid-area: icons;
  display: flex;
  justify-self: end;
}

.header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

.header__icon span {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.header__icon .icon-hamburger,
.header__icon .icon-search,
.header__icon .icon-close {
  transition: transform 150ms ease, opacity 150ms ease;
}

.header__icon:hover .icon {
  transform: scale(1.07);
}

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

.header__icon--cart .icon {
  height: 2.4rem;
  width: 2.4rem;
  transform: scale(0.9);
}

.header__icon--cart:hover .icon {
  transform: scale(0.96);
}

.cart-count-bubble {
  position: absolute;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  bottom: 0.8rem;
  left: 2.2rem;
  line-height: 1.8;
}

/* Menu drawer ------------------------------------------------------------- */

.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: 35rem;
  max-width: calc(100vw - 4rem);
  overflow-x: hidden;
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.1);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width: 40rem;
  }
}

.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: rgba(var(--color-base-text), 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-default) ease, visibility var(--duration-default) ease;
}

.menu-open .menu-drawer {
  transform: translateX(0);
  visibility: visible;
}

.menu-open .menu-drawer-overlay {
  opacity: 1;
  visibility: visible;
}

.menu-drawer__inner-container {
  position: relative;
  height: 100%;
}

.menu-drawer__title-and-close-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0.5rem 1rem 2rem;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.menu-drawer__title {
  margin: 0;
}

.menu-drawer__close-btn .icon {
  width: 2rem;
  height: 2rem;
}

.menu-drawer__navigation-container {
  overflow-y: auto;
  height: calc(100% - 6.5rem);
}

.menu-drawer__navigation {
  padding: 1rem 0;
}

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

.list-menu__item {
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.menu-drawer__menu li {
  margin-bottom: 0.2rem;
}

.menu-drawer__menu-item {
  padding: 0.9rem 2rem;
  text-decoration: none;
  font-size: 1.8rem;
  color: rgb(var(--color-foreground));
}

.menu-drawer__menu-item--active,
.menu-drawer__menu-item:focus,
.menu-drawer__menu-item:hover {
  color: rgb(var(--color-foreground));
  background-color: rgba(var(--color-foreground), 0.04);
}

.menu-drawer__utility-links {
  padding: 1rem 2rem;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 1.2rem;
  margin-left: -1.2rem;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}

.menu-drawer__account .icon-account {
  height: 2rem;
  width: 2rem;
  margin-right: 1rem;
}

/* Search modal ------------------------------------------------------------ */

.search-modal {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  z-index: 4;
  display: flex;
  min-height: calc(100% + 0.1rem);
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

.modal-overlay {
  position: fixed;
  left: 0;
  right: 0;
  top: 100%;
  height: 100vh;
  background-color: rgba(var(--color-base-text), 0.5);
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 7.3rem;
  padding: 0 5rem 0 1rem;
  line-height: 1.8;
  position: relative;
}

.search-modal__form {
  width: 100%;
  position: relative;
}

.search-modal__content > .search-modal__form {
  max-width: 74.2rem;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  color: rgb(var(--color-link));
}

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

@media screen and (min-width: 750px) {
  .search-modal__content {
    padding: 0 6rem;
  }

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

.search__input.field__input {
  padding-right: 9.8rem;
}

.search__button {
  right: var(--inputs-border-width);
  top: var(--inputs-border-width);
}

.reset__button {
  right: calc(var(--inputs-border-width) + 4.4rem);
  top: var(--inputs-border-width);
}

.reset__button:not(.hidden)::after {
  content: "";
  position: absolute;
  right: 0;
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  height: calc(100% - 2rem);
}

.search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}

.reset__button .icon.icon-close {
  height: 1.8rem;
  width: 1.8rem;
  stroke-width: 0.1rem;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.predictive-search {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: -0.1rem;
  right: -0.1rem;
  z-index: 3;
  background-color: rgb(var(--color-background));
  border-bottom-right-radius: var(--popup-corner-radius);
  border-bottom-left-radius: var(--popup-corner-radius);
  border: 0.1rem solid rgba(var(--color-foreground), 0.1);
  border-top: 0;
  box-shadow: var(--popup-shadow);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 12rem);
  text-align: left;
}

.predictive-search__heading {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  margin: 0 2rem;
  padding: 1.5rem 0 0.75rem;
  color: rgba(var(--color-foreground), 0.7);
}

.predictive-search__item {
  display: flex;
  padding: 1rem 2rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.predictive-search__item--link-with-thumbnail {
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 2rem;
  grid-template-areas: "product-image product-content";
}

.predictive-search__item:hover,
.predictive-search__item:focus {
  background-color: rgba(var(--color-foreground), 0.04);
}

.predictive-search__image {
  grid-area: product-image;
  width: 5rem;
  height: auto;
  object-fit: contain;
  font-family: "object-fit: contain";
}

.predictive-search__item-content {
  grid-area: product-content;
  display: flex;
  flex-direction: column;
}

.predictive-search__item-heading {
  margin: 0;
  color: rgb(var(--color-foreground));
}

.predictive-search__item .price {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 1.2rem;
}

.predictive-search__item--term {
  justify-content: space-between;
  align-items: center;
  padding: 1.3rem 2rem;
  word-break: break-all;
  line-height: 1.4;
  border: 0;
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  margin-top: 1rem;
  text-decoration: none;
  color: rgb(var(--color-link));
  font-weight: 700;
}

.predictive-search__item--term .icon-arrow {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  margin-left: 2rem;
  color: rgb(var(--color-link));
}

/* Announcement bar -------------------------------------------------------- */

.announcement-bar {
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  color: rgb(var(--color-foreground));
}

.announcement-bar__item {
  display: flex;
  justify-content: center;
}

.announcement-bar__message {
  display: flex;
  align-items: center;
  margin: 0;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.1rem;
}

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

@media screen and (min-width: 750px) {
  .announcement-bar {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .announcement-bar__message {
    font-size: 1.8rem;
  }
}

/* Floating "back to top" -------------------------------------------------- */

.floating-btn {
  position: fixed;
  z-index: 2;
  bottom: calc(1.5rem + var(--sticky-atc-offset, 0px));
  transition: bottom 300ms ease;
  left: 1.5rem;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  box-shadow: 0 0.2rem 0.6rem rgba(var(--color-shadow), 0.2);
}

.floating-btn svg {
  width: 1.6rem;
  height: 1.6rem;
}

@media screen and (min-width: 750px) {
  .floating-btn {
    bottom: calc(2rem + var(--sticky-atc-offset, 0px));
    left: 2rem;
  }
}

/* Footer ------------------------------------------------------------------ */

.footer {
  padding-top: 24px;
  padding-bottom: 15px;
}

.footer a {
  color: rgba(var(--color-foreground), 0.7);
}

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

.footer__content-top {
  padding-bottom: 3rem;
  display: block;
}

.footer__blocks-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  column-gap: 0;
  row-gap: 0;
  align-items: flex-start;
}

.footer-block.grid__item {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0 0 4rem;
}

.footer-block.grid__item:last-child {
  margin-bottom: 0;
}

.footer-block__heading {
  margin-bottom: 2rem;
  margin-top: 0;
  font-size: calc(var(--font-heading-scale) * 1.6rem);
}

.footer-block__details-content {
  margin-bottom: 0;
}

.footer-block__details-content-mb {
  margin-bottom: 1.6rem;
}

.footer-block__details-content.rte a {
  text-decoration: none;
  font-size: 1.5rem;
}

.footer-block__details-content.rte a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.footer__newsletter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
}

.newsletter-form__field-wrapper {
  width: 100%;
}

.newsletter-form__message {
  justify-content: flex-start;
  margin-bottom: 0;
}

.newsletter__solid-btn {
  margin-top: 1rem;
}

.footer-block-image {
  display: flex;
}

.footer-block-image.center {
  justify-content: center;
}

.footer-block__image-wrapper {
  margin-bottom: 2rem;
  overflow: hidden !important;
  width: 100%;
  background: transparent;
}

.footer-block__image-wrapper img {
  display: block;
  height: auto;
  width: 100%;
}

.footer__content-bottom {
  border-top: 0.1rem solid rgba(var(--color-foreground), 0.08);
  padding-top: 0;
}

.footer__content-bottom-wrapper {
  display: flex;
  width: 100%;
  justify-content: center;
}

.footer__copyright {
  text-align: center;
  margin-top: 1.5rem;
}

.copyright__content {
  font-size: 1.1rem;
}

.copyright__content a {
  color: currentColor;
  text-decoration: none;
}

.copyright__content a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 750px) {
  .footer {
    padding-top: 32px;
    padding-bottom: 20px;
  }

  .footer__content-top {
    padding-bottom: 5rem;
  }

  .footer__content-bottom {
    padding-top: 3rem;
  }

  .footer__blocks-wrapper {
    margin: 0 -2rem;
    row-gap: 6rem;
  }

  .footer-block.grid__item {
    margin: 0 2rem;
  }

  .footer-block--desktop-3.grid__item {
    width: calc(25% - 4rem);
  }

  .footer-block--desktop-4.grid__item {
    width: calc(33.3333% - 4rem);
  }

  .footer-block--desktop-12.grid__item {
    width: calc(100% - 4rem);
  }

  .footer-block__details-content.rte a {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 990px) {
  .footer-block__heading {
    font-size: calc(var(--font-heading-scale) * 1.8rem);
  }
}

/* Policy pages + generic pages ------------------------------------------- */

.shopify-policy__container {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

.shopify-policy__title {
  text-align: center;
}

.shopify-policy__title h1 {
  margin: 0.67em 0;
}

.main-page-title {
  margin-bottom: 3rem;
}

.template-404 {
  padding: 7rem 1.5rem;
}

.template-404 .title {
  margin: 1rem 0 3rem;
}

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

.reset__button .icon.icon-close circle {
  stroke: currentColor;
  fill: none;
}

.reset__button .icon.icon-close path {
  stroke: currentColor;
}

/* Payment method icons (footer + cart drawer) ----------------------------- */

.list-payment {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem auto 0;
  padding: 0;
  list-style: none;
}

.list-payment__item {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.6rem;
}

.list-payment .icon--full-color {
  display: block;
  width: 3.8rem;
  height: 2.4rem;
}

.footer-block-image .list-payment {
  margin: 0 auto 2rem;
}

.cart-drawer__payment-icons {
  margin: 0 0 0.9rem;
}

.cart-drawer__payment-icons .list-payment {
  margin: 0;
}

.cart-drawer__payment-icons .list-payment__item {
  padding: 0.5rem 0.4rem;
}

@media screen and (max-width: 749px) {
  /* All eight icons on one line at phone width. */
  .list-payment__item {
    padding: 0.5rem 0.3rem;
  }
}