:root {
    --border-radius-square: 50%;
    --border-radius-pill: 9999px;
    --border-radius: 8px;
    --space-xsmall: 0.33rem;
    --space-small: 0.66rem;
    --space-medium: 1rem;
    --space-large: 2rem;
    --space-xlarge: 4rem;
    --font-body-family: 'Noto Sans JP', sans-serif;
    --font-body-style: 'Noto Sans JP', sans-serif;
    --font-body-weight: normal;
    --font-body-size: 16px;
    --font-heading-family: 'Noto Sans JP', sans-serif;
    --font-heading-style: 'Noto Sans JP', sans-serif;
    --font-heading-weight: normal;
    --font-heading-base-size: 1.6rem;
    --font-heading-text-transform: none;
    --font-heading-letter-spacing: 0;
    --font-heading-size-large: var(--font-heading-base-size);
    --font-heading-size-medium: calc(var(--font-heading-base-size) * 0.8);
    --font-heading-size-small: calc(var(--font-heading-base-size) * 0.6);
    --font-heading-size-xsmall: 1.3rem;
    --font-heading-line-height: 1.15;
    --font-copy-size-large: 1.25rem;
    --font-copy-size-small: 0.9rem;
    --font-copy-size-xsmall: 0.775rem;
    --font-copy-size-xxsmall: 0.7rem;
    --font-copy-line-height: 1.5;
    --product-image-aspect-ratio: 1;
    --border-color-opacity: 0.25;
    --color-border: #d9d9d9;
    --color-background-raw: 0, 0%, 100%;
    --color-foreground-raw: 9, 23%, 11%;
    --color-primary-raw: 0, 0%, 24%;
    --color-secondary-raw: 24, 21%, 72%;
    --color-tertiary-raw: 200, 15%, 85%;
    --color-quaternary-raw: 0, 0%, 24%;
    --color-quinary-raw: 134, 23%, 89%;
    --color-senary-raw: 15, 55%, 96%;
    --color-primary-contrast-raw: 0, 0%, 100%;
    --color-secondary-contrast-raw: 0, 0%, 24%;
    --color-tertiary-contrast-raw: 0, 0%, 24%;
    --color-quaternary-contrast-raw: 0, 0%, 100%;
    --color-quinary-contrast-raw: 0, 0%, 24%;
    --color-senary-contrast-raw: 0, 0%, 24%;
    --color-site-header-bg: #ffffff;
    --color-site-header-border: #d9d9d9;
    --color-nav-text: #3c3c3c;
    --color-nav-text-raw: 0, 0%, 24%;
    --color-site-footer-bg: #f7f7f7;
    --color-site-footer-text-raw: 0, 0%, 100%;
    --color-site-footer-text: #ffffff;
    --color-site-footer-border: #d1d1d1;
    --color-badge-default: #d9d9d9;
    --color-sale-badge-bg: #ca663f;
    --color-sale-badge-text: #ffffff;
    --color-sold-out-badge-bg: #e9e8e4;
    --color-sold-out-badge-text: #494949;
    --color-coming-soon-badge-bg: #e9e8e4;
    --color-coming-soon-badge-text: #494949;
    --color-new-badge-bg: #e9e8e4;
    --color-new-badge-text: #494949;
    --color-foreground: hsl(var(--color-foreground-raw));
    --color-background: hsl(var(--color-background-raw));
    --color-image-placeholder: linear-gradient(335deg, rgba(255, 255, 255, 1) 12%, rgba(255, 255, 255, 1) 100%);
    --color-primary: hsl(var(--color-primary-raw));
    --color-secondary: hsl(var(--color-secondary-raw));
    --color-tertiary: hsl(var(--color-tertiary-raw));
    --color-quaternary: hsl(var(--color-quaternary-raw));
    --color-quinary: hsl(var(--color-quinary-raw));
    --color-senary: hsl(var(--color-senary-raw));
    --color-primary-contrast: hsl(var(--color-primary-contrast-raw));
    --color-secondary-contrast: hsl(var(--color-secondary-contrast-raw));
    --color-tertiary-contrast: hsl(var(--color-tertiary-contrast-raw));
    --color-quaternary-contrast: hsl(var(--color-quaternary-contrast-raw));
    --color-quinary-contrast: hsl(var(--color-quinary-contrast-raw));
    --color-senary-contrast: hsl(var(--color-senary-contrast-raw));
    --color-box-shadow: hsla(var(--color-foreground-raw), 0.15);
    --color-overlay: hsla(var(--color-background-raw), 0.7);
    --color-default: var(--color-background);
    --color-inverse: var(--color-foreground);
    --color-discount-bg: hsla(var(--color-foreground-raw), 0.07);
    --border-size--thick: 2px;
    --border-size--thin: 1px;
    --border--thin: var(--border-size--thin) solid var(--color-border);
    --border--thick: var(--border-size--thick) solid var(--color-border);
    --border-radius-arch: 120px;
    --box-shadow--bottom: 0 12px 20px -15px var(--color-box-shadow);
    --box-shadow--all-sides: 0 0 20px var(--color-box-shadow);
    --box-shadow--all-sides-small: 0 0 10px var(--color-box-shadow);
    --space-drawer-sides: var(--space-medium);
    --space-viewport-sides: var(--space-large);
    --space-grid-gap: var(--space-large);
    --container-max-width-copy: 45rem;
    --container-width-form: 38ch;
    --container-width-large: 62rem;
    --container-width-medium: 40rem;
    --container-width-small: 24rem;
    --drawer-width: 320px;
    --page-width: 100rem;
    --drawer-header-height: 5rem;
    --pointer-element-min-height: 44px;
    --button-tag-height: calc(var(--pointer-element-min-height) * 0.75);
    --site-header-min-height: 6rem;
    --site-header-height: var(--site-header-min-height);
    --link-underline-offset: 0.25em;
    --transition-duration: 200ms;
    --transition-duration-long: 500ms;
    --transition-timing-function: ease;
    --z-index-hidden: -1;
    --z-index-background: 0;
    --z-index-base: 1;
    --z-index-overlay: 2;
    --z-index-overlay-interaction: 3;
    --z-index-slideshow-interaction: 5;
    --z-index-header-under-freeze: 10;
    --z-index-site-footer: 90;
    --z-index-pop-up-open: 92;
    --z-index-pop-up-overlay: 93;
    --z-index-newsletter-modal: 95;
    --z-index-product-quick-add: 100;
    --z-index-site-header: 110;
    --z-index-site-header-heading: 111;
    --z-index-announcement-bar: 111;
    --z-index-skip-to-content-link: 115;
    --z-index-search-on-mobile: 120;
    --z-index-freeze-overlay: 195;
    --z-index-drawer: 200;
    --z-index-modal-overlay: 249;
    --z-index-modal: 250;
    --z-index-age-verifier: 300;
}

/* Style the section that contains the header */
.section__site-header {
  display: block;
  line-height: var(--font-heading-line-height);
  position: relative;
  z-index: var(--z-index-site-header);
}

.overlay-on .section__site-header {
  z-index: var(--z-index-header-under-freeze);
}

/* Sticky header styles and animations */
.section__site-header.sticky {
  position: sticky;
  top: 0;
}

.section__site-header.sticky.scrolling-up {
  transform: translateY(0);
  transition: transform 0.5s ease;
  z-index: var(--z-index-site-header);
}

.section__site-header.sticky.scrolled-past,
.section__site-header.sticky.scrolling-up.scrolled-past {
  transform: translateY(calc(var(--site-header-height) * -1));
}

.section__site-header.sticky.disable-animation {
  position: static;
}

/* Site header */
.site-header {
  background-color: var(--color-site-header-bg);
  color: var(--color-nav-text);
  display: flex;
  min-height: var(--site-header-min-height);
  height: auto;
}

.section__site-header.sticky .site-header {
  box-shadow: var(--box-shadow--bottom);
  border-bottom: 1px solid var(--color-site-header-border);
}

/* Styles for transparent header */
.body--template-index .site-header--transparent {
  background-color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  transition: background-color var(--transition-duration) var(--transition-timing-function);
}

.site-header__heading-logo--transparent {
  display: none;
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent .site-header__heading-logo {
  display: none;
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent .site-header__heading-logo--transparent {
  display: block;
}

/* Hover or focus-within transparent header or when search is open makes it solid again */
.body--template-index .section__site-header.sticky.scrolling-up .site-header--transparent,
.body--template-index .site-header--transparent:hover,
.body--template-index .site-header--transparent:focus-within,
html.search-open .body--template-index .section__site-header .site-header--transparent {
  background-color: var(--color-site-header-bg);
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:hover .site-header__link,
.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:focus-within .site-header__link,
html.search-open .body--template-index .section__site-header .site-header--transparent .site-header__link {
  --color-link: var(--color-nav-text);
  --color-link-raw: var(--color-nav-text-raw);
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:hover .site-header__icon-button,
.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:focus-within .site-header__icon-button,
html.search-open .body--template-index .section__site-header .site-header--transparent .site-header__icon-button {
  --button-foreground-color: var(--color-nav-text);
  --button-foreground-color-raw: var(--color-nav-text-raw);
  --button-background-color: transparent;
  --button-background-color-raw: transparent;
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:hover .site-header__heading-logo,
.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:focus-within .site-header__heading-logo,
html.search-open .body--template-index .section__site-header .site-header--transparent .site-header__heading-logo {
  display: block;
}

.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:hover .site-header__heading-logo--transparent,
.body--template-index .section__site-header:not(.scrolling-up) .site-header--transparent:focus-within .site-header__heading-logo--transparent,
html.search-open .body--template-index .section__site-header .site-header--transparent .site-header__heading-logo--transparent {
  display: none;
}

/* Site header element styles */
.site-header__link,
.site-header__expanded-section-link {
  --color-link: var(--color-nav-text);
  --color-link-raw: var(--color-nav-text-raw);
  text-decoration-color: transparent;
}

.site-header__link:hover,
.site-header__expanded-section-link:hover {
  text-decoration-color: hsla(var(--color-link-raw), 0.3);
}

.site-header .site-header__icon-button {
  --button-foreground-color: var(--color-nav-text);
  --button-foreground-color-raw: var(--color-nav-text-raw);
}

.site-header__menu-button svg {
  height: var(--icon-width);
  width: var(--icon-width);
}

.site-header__menu-toggle {
  display: none;
  grid-area: menu-toggle;
}

.site-header__container--has-menu .site-header__menu-toggle {
  display: block;
}

.site-header__heading {
  grid-area: heading;
  position: relative;
  justify-self: center;
  text-align: center;
  z-index: var(--z-index-site-header-heading);
}

.site-header__menu-button svg {
  height: var(--icon-width);
  width: var(--icon-width);
}

.site-header__inline-menu {
  display: none;
  grid-area: inline-menu;
}

.site-header__account {
  grid-area: account;
  justify-self: end;
}

.site-header__search {
  grid-area: search;
}

.site-header__cart {
  grid-area: cart;
  justify-self: end;
}

/* Site header layouts */
.site-header__container {
  --icon-width: 34px;

  align-items: center;
  display: grid;
  gap: 0 var(--space-medium);
  grid-template-areas: "search heading cart";
  grid-template-columns: var(--icon-width) minmax(0, 1fr) var(--icon-width);
  width: 100%;
}

.site-header__container--has-menu {
  grid-template-areas: "menu-toggle heading search";
  grid-template-columns: var(--icon-width) minmax(0, 1fr) var(--icon-width);
}

.site-header__container--has-menu .site-header__search {
  justify-self: end;
}

@media screen and (min-width: 900px) {
  .site-header__inline-menu-list {
    display: flex;
    flex-wrap: wrap;
  }

  .site-header__container--has-menu .site-header__menu-toggle {
    display: none;
  }

  .site-header__inline-menu {
    display: block;
  }

  .site-header__container--middle-left {
    grid-template-areas: "heading search cart";
    grid-template-columns: minmax(0, 1fr) var(--icon-width) var(--icon-width);
  }

  .site-header__container--middle-left .site-header__search {
    justify-self: end;
  }

  .site-header__container--middle-left .site-header__heading {
    justify-self: start;
    text-align: left;
  }

  .site-header__container--middle-center,
  .site-header__container--top-center {
    grid-template-areas: "search heading cart";
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
  }

  .site-header__container--accounts-enabled.site-header__container--middle-left {
    grid-template-areas: "heading search account cart";
    grid-template-columns: minmax(0, 1fr) var(--icon-width) var(--icon-width) var(--icon-width);
  }

  .site-header__container--accounts-enabled.site-header__container--middle-center,
  .site-header__container--accounts-enabled.site-header__container--top-center {
    grid-template-areas: "search search heading account cart";
    grid-template-columns:var(--icon-width) minmax(0, 1fr) max-content minmax(0, 1fr) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--middle-left {
    grid-template-areas: "heading inline-menu search cart";
    grid-template-columns: max-content minmax(0, 1fr) var(--icon-width) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--middle-center {
    grid-template-areas: "inline-menu inline-menu inline-menu heading . search cart";
    grid-template-columns: var(--icon-width) var(--icon-width) minmax(0, 1fr) max-content minmax(0, 1fr) var(--icon-width) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--middle-center .site-header__search {
    justify-self: end;
  }

  .site-header__container--has-menu.site-header__container--top-center {
    grid-template-areas: "search heading cart"
                          "inline-menu inline-menu inline-menu";
    grid-template-columns: var(--icon-width) minmax(0, 1fr) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--top-center .site-header__search {
    justify-self: start;
  }

  .site-header__container--has-menu.site-header__container--accounts-enabled.site-header__container--middle-left {
    grid-template-areas: "heading inline-menu search account cart";
    grid-template-columns: max-content minmax(0, 1fr) var(--icon-width) var(--icon-width) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--accounts-enabled.site-header__container--middle-center {
    grid-template-areas: "inline-menu inline-menu inline-menu inline-menu heading . search account cart";
    grid-template-columns: var(--icon-width) var(--icon-width) var(--icon-width) minmax(0, 1fr) max-content minmax(0, 1fr) var(--icon-width) var(--icon-width) var(--icon-width);
  }

  .site-header__container--has-menu.site-header__container--accounts-enabled.site-header__container--top-center {
    grid-template-areas: "search search heading account cart"
                          "inline-menu inline-menu inline-menu inline-menu inline-menu";
    grid-template-columns: var(--icon-width) var(--icon-width) minmax(0, 1fr) var(--icon-width) var(--icon-width);
  }
}

.site-header__inline-menu-item {
  align-items: center;
  display: flex;
}

.site-header__link {
  align-items: center;
  display: flex;
  min-height: var(--pointer-element-min-height);
  padding: var(--space-small);
}

.site-header__container--middle-left .site-header__inline-menu {
  margin-left: var(--space-large);
  text-align: right;
}

.site-header__container--top-center .site-header__inline-menu {
  text-align: center;
}

.site-header__container--middle-left .site-header__inline-menu-list {
  justify-content: end;
}

.site-header__container--top-center .site-header__inline-menu-list {
  justify-content: center;
}

.site-header__container--middle-center .site-header__inline-menu-list {
  justify-content: start;
}

/* Dropdowns and search sections */
.site-header__expanded-section {
  background-color: var(--color-site-header-bg);
  border-bottom: var(--border-size--thick) solid var(--color-site-header-border);
  box-shadow: var(--box-shadow--bottom);
  left: 0;
  padding: var(--space-small) var(--space-viewport-sides) var(--space-large);
  position: absolute;
  top: calc(var(--site-header-height) - 1px);
  transform: translateY(calc(var(--space-medium) * -1));
  transition-property: transform;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  width: 100%;
  z-index: 9999;
}

.dropdown-link[open] .site-header__expanded-section {
  transform: translateY(0);
}

.site-header__expanded-section-list {
  display: grid;
  gap: var(--space-grid-gap);
  grid-auto-rows: auto;
  grid-template-columns: repeat(auto-fit, minmax(0, 10rem));
  justify-content: center;
}

@media screen and (min-width: 100rem) {
  .site-header__expanded-section-list {
    grid-template-columns: repeat(auto-fit, minmax(0, 14.3rem));
  }
}

.site-header__expanded-section--search {
  height: 100vh;
  padding-top: var(--space-xlarge);
  padding-left: 0;
  padding-right: 0;
  position: fixed;
  top: 0;
  z-index: var(--z-index-search-on-mobile);
}

.site-header__search-close-button {
  position: absolute;
  top: 1.5rem;
  right: 4px;
}

@media screen and (min-width: 900px) {
  .site-header__expanded-section--search {
    position: absolute;
    height: unset;
    padding-top: var(--space-medium);
    padding-left: var(--space-viewport-sides);
    padding-right: var(--space-viewport-sides);
    top: var(--site-header-height);
    z-index: unset;
  }

  .site-header__search-close-button {
    position: absolute;
    top: var(--space-xsmall);
    right: var(--space-viewport-sides);
  }
}

.no-js .site-header__expanded-section--search {
  height: unset;
  padding-left: var(--space-viewport-sides);
  padding-right: var(--space-viewport-sides);
  padding-top: var(--space-medium);
  position: absolute;
  margin-top: 3.2rem;
  top: unset;
  z-index: var(--z-index-search-on-mobile);
}

.no-js .site-header__expanded-section {
  margin-top: 3.2rem;
  top: unset;
  z-index: var(--z-index-search-on-mobile);
}

.site-header__cart-indicator {
  position: relative
}

.site-header__cart-count {
  --cart-indicator-size: 1.35em;
  align-items: center;
  border-radius: var(--cart-indicator-size);
  display: flex;
  font-size: var(--font-copy-size-xxsmall);
  font-weight: bold;
  height: var(--cart-indicator-size);
  justify-content: center;
  line-height: 1;
  min-width: var(--cart-indicator-size);
  padding-left: 3px;
  padding-right: 3px;
  position: absolute;
  top: calc((var(--cart-indicator-size) / 3) * -1);
  left: var(--cart-indicator-size);
}

.site-header .search-bar input {
  color: var(--color-nav-text);
  background-color: var(--color-site-header-bg);
  border-color: var(--color-site-header-border);
}

.site-header .search-bar input:focus {
  border-color: var(--color-nav-text);
}

.site-header .search-bar input::placeholder {
  color: hsla(var(--color-nav-text-raw), 0.5);
}

.site-header .search-bar button {
  --button-foreground-color: var(--color-nav-text);
  --button-foreground-color-raw: var(--color-nav-text-raw);
}