/* Color custom properties */

  :root,
  .color-background-1 {
    --color-foreground: var(--color-base-text);
    --color-background: var(--color-base-background-1);
    --gradient-background: var(--gradient-base-background-1);
  }

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

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

  .color-accent-1 {
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
  }

  .color-accent-2 {
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-2);
    --gradient-background: var(--gradient-base-accent-2);
  }

  .color-foreground-outline-button {
    --color-foreground: var(--color-base-outline-button-labels);
  }

  .color-foreground-accent-1 {
    --color-foreground: var(--color-base-accent-1);
  }

  .color-foreground-accent-2 {
    --color-foreground: var(--color-base-accent-2);
  }

  :root,
  .color-background-1 {
    --color-link: var(--color-base-outline-button-labels);
    --alpha-link: 0.85;
  }

  .color-background-2,
  .color-inverse,
  .color-accent-1,
  .color-accent-2 {
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
  }

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

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

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

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

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

  .color-background-2 .button--tertiary,
  .color-inverse .button--tertiary,
  .color-accent-1 .button--tertiary,
  .color-accent-2 .button--tertiary {
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-foreground);
  }

  :root,
  .color-background-1 {
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-foreground);
    --alpha-badge-border: 0.1;
  }

  .color-background-2,
  .color-inverse,
  .color-accent-1,
  .color-accent-2 {
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
  }

  :root,
  .color-background-1,
  .color-background-2 {
    --color-card-hover: var(--color-base-text);
  }

  .color-inverse {
    --color-card-hover: var(--color-base-background-1);
  }

  .color-accent-1,
  .color-accent-2 {
    --color-card-hover: var(--color-base-solid-button-labels);
  }

  :root,
  .color-icon-text {
    --color-icon: rgb(var(--color-base-text));
  }

  .color-icon-accent-1 {
    --color-icon: rgb(var(--color-base-accent-1));
  }

  .color-icon-accent-2 {
    --color-icon: rgb(var(--color-base-accent-2));
  }

  .color-icon-outline-button {
    --color-icon: rgb(var(--color-base-outline-button-labels));
  }

  .color-light-text {
    color: rgba(var(--color-base-text), 0.6);
  }

  /* 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;
  }

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

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

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

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

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

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

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

  .spaced-section {
    margin-top: 5rem;
  }

  .spaced-section:last-child {
    margin-bottom: 5rem;
  }

  .spaced-section--full-width + .spaced-section--full-width {
    margin-top: 0;
  }

  .spaced-section--full-width:first-child {
    margin-top: 0;
  }

  .spaced-section--full-width:last-child {
    margin-bottom: 0;
  }

  .mt-0{
    margin-top: 0 !important;
  }

  .mt-1{
    margin-top: 0.5rem !important;
  }

  .mt-2{
    margin-top: 1rem !important;
  }

  .mt-3{
    margin-top: 1.5rem !important;
  }

  .mt-4{
    margin-top: 2rem !important;
  }

  .mb-0{
    margin-bottom: 0 !important;
  }

  .mb-1{
    margin-bottom: 0.5rem !important;
  }

  .mb-2{
    margin-bottom: 1rem !important;
  }

  .mb-3{
    margin-bottom: 1.5rem !important;
  }

  .mb-4{
    margin-bottom: 2rem !important;
  }

  .ml-1 {
    margin-left: 0.5rem !important;
  }

  .ml-2 {
    margin-left: 1rem !important;
  }

  .p-2{
    padding: 1rem !important;
  }

  .p-3{
    padding: 2rem !important;
  }

  .pt-0{
    padding-top: 0 !important;
  }

  .pb-0{
    padding-bottom: 0 !important;
  }

  .pl-0 {
    padding-left: 0 !important;
  }

  .py-1 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .lh-2{
    line-height: 1.2 !important;
  }

  .gap-x-2 {
    column-gap: 1rem;
  }

  .gap-y-1 {
    row-gap: 0.5rem;
  }

  .gap-y-2 {
    row-gap: 1rem;
  }

  body,
  .color-background-1,
  .color-background-2,
  .color-inverse,
  .color-accent-1,
  .color-accent-2 {
    color: rgba(var(--color-foreground), 0.75);
    background-color: rgb(var(--color-background));
  }

  .background-secondary {
    background-color: rgba(var(--color-foreground), 0.04);
    padding: 4rem 0 5rem;
  }

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

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

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

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

  .rte, img{
    max-width: 100%;
  }

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

  .hidden, .hide {
    display: none !important;
  }

  .transparent {
    opacity: 0 !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;
  }

  .overflow-auto {
    overflow: auto;
  }

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

  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: 0.06rem;
    color: rgb(var(--color-foreground));
    line-height: 1.3;
  }

  .h0 {
    font-size: 4rem;
  }

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

  h1,
  .h1 {
    font-size: 3rem;
  }

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

  h2,
  .h2 {
    font-size: 2rem;
  }

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

  h3,
  .h3 {
    font-size: 1.7rem;
  }

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

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

  h5,
  .h5 {
    font-size: 1.2rem;
  }

  @media only screen and (min-width: 750px) {
    h5,
    .h5 {
      font-size: 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: 1.7;
  }

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

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

  .caption-large,
  .customer .field input,
  .customer select,
  .field__input,
  .form__label,
  .select__select {
    font-size: 1.3rem;
    line-height: 1.5;
    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);
  }

  .hidden {
    display: none !important;
  }

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

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

  .customer a.h3 {
    font-size: 1.8rem;
  }

  .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: 3.5rem;
    white-space: nowrap;
  }

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

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

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

  .underlined-link,
  .customer a {
    color: rgba(var(--color-link), var(--alpha-link));
    text-underline-offset: 0.3rem;
    text-decoration-thickness: 0.1rem;
    transition: text-decoration-thickness ease 100ms;
  }

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

  .icon-arrow {
    width: 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 遮罩
     原本 background 是 transparent，所以你怎麼調遮罩都看不到。
     這裡保留一般彈窗的基礎遮罩，但 Header 下拉會另外覆蓋。
     ================================================== */

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

  /* 桌機版 Header 下拉專用遮罩 */
  @media screen and (min-width: 990px) {
    .header__inline-menu .disclosure-has-popup[open] > summary::before {
      content: '' !important;
      display: block !important;
      position: fixed !important;

      /*
        遮罩開始位置 =
        Header 高度 + 白色下拉選單高度
      */
      top: calc(var(--gzl-header-height, 96px) + var(--gzl-dropdown-height, 128px)) !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;

      width: 100vw !important;
      height: auto !important;

      background: rgba(0, 0, 0, 0.52) !important;
      z-index: 9990 !important;

      cursor: default !important;
    }
  }

  .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: 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-wrapper {
    margin-bottom: 3rem;
  }

  .title-wrapper-with-link {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin: 4rem 0 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 {
    color: rgb(var(--color-link));
    margin-top: 0;
    flex-shrink: 0;
  }

  @media screen and (min-width: 990px) {
    .title-wrapper-with-link.title-wrapper-with-link--no-heading {
      display: none;
    }
  }

  .subtitle {
    font-size: 1.8rem;
    line-height: 1.8;
    letter-spacing: 0.05rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* component-grid */
  .grid {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    margin-left: -1rem;
    padding: 0;
    list-style: none;
  }

  @media screen and (min-width: 750px) {
    .grid {
      margin-left: -3rem;
    }
  }

  .grid__item {
    padding-left: 1rem;
    padding-bottom: 1rem;
    width: calc(25% - 1rem * 3 / 4);
    max-width: 50%;
    flex-grow: 1;
    flex-shrink: 0;
  }

  .slider--tablet.grid--peek .grid__item.slider__slide,
  .grid__item.slider__slide{
    margin-top: 2rem;
  }

  @media screen and (min-width: 750px) {
    .grid__item {
      padding-left: 3rem;
      padding-bottom: 3rem;
      width: calc(25% - 3rem * 3 / 4);
      max-width: 50%;
    }
  }

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

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

  @media screen and (min-width: 750px) and (max-width: 989px) {
    .grid--one-third-max.grid--3-col-tablet .grid__item {
      max-width: 33.33%;
    }
  }

  @media screen and (min-width: 990px) {
    .grid--quarter-max.grid--5-col-desktop .grid__item {
      max-width: 20%;
    }

    .grid--quarter-max.grid--4-col-desktop .grid__item {
      max-width: 25%;
    }
  }

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

  .grid--3-col .grid__item {
    width: calc(33.33% - 0.5rem * 2 / 3);
  }

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

  .grid--2-col .grid__item {
    width: calc(50% - 0.5rem / 2);
  }

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

    .grid--4-col-tablet .grid__item {
      width: calc(25% - 1rem * 3 / 4);
    }

    .grid--3-col-tablet .grid__item {
      width: calc(33.33% - 1rem * 2 / 3);
    }

    .grid--2-col-tablet .grid__item {
      width: calc(50% - 1rem / 2);
    }
  }

  @media screen and (min-width: 990px) {
    .grid--5-col-desktop .grid__item {
      width: calc(20% - 1rem * 3 / 4);
    }

    .grid--4-col-desktop .grid__item {
      width: calc(25% - 1rem * 3 / 4);
    }

    .grid--3-col-desktop .grid__item {
      width: calc(33.33% - 1rem * 2 / 3);
    }

    .grid--2-col-desktop .grid__item {
      width: calc(50% - 1rem / 2);
    }

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

  .grid__item--vertical-align {
    align-self: center;
  }

  .grid__item--full-width {
    flex: 0 0 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 {
      width: calc(50% - 3.75rem / 2);
    }

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

    .grid--peek .grid__item:last-of-type {
      padding-right: 1.5rem;
    }
  }

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

    .slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
      width: calc(33.33% - 4rem * 2 / 3);
    }

    .slider--tablet.grid--peek.grid--2-col-tablet .grid__item {
      width: calc(50% - 4rem / 2);
    }

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

    .slider--tablet.grid--peek .grid__item:last-of-type {
      padding-right: 1.5rem;
    }
  }

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

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

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

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

  .media > *:not(.zoom, .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%;
  }

  .product-card-wrapper .card--product .media.media--circle > img ,
  .media--circle > img {
    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,
  .btn,
  .challenge__button,
  .customer button {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    font: inherit;
    padding: 0.9rem 3rem 1.1rem;
    text-decoration: none;
    border: 0;
    border-radius: 4rem;
    background-color: rgba(var(--color-button), var(--alpha-button-background));
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
    color: rgb(var(--color-button-text));
    min-width: 12rem;
    min-height: 4rem;
    transition: box-shadow var(--duration-short) ease;
    -webkit-appearance: none;
    appearance: none;
  }

  a{
    color: rgba(var(--color-button), var(--alpha-button-background));
  }

  .button:focus-visible {
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
      0 0 0 0.3rem rgb(var(--color-background)),
      0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  }

  .button:focus {
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border)),
      0 0 0 0.3rem rgb(var(--color-background)),
      0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3);
  }

  .button:focus:not(:focus-visible) {
    box-shadow: 0 0 0 0.1rem rgba(var(--color-button), var(--alpha-button-border));
  }

  .button,
  .btn,
  .button-label,
  .challenge__button,
  .customer button {
    font-size: 1.5rem;
    letter-spacing: 0.1rem;
    line-height: 1.2;
  }

  .button--tertiary {
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
    min-width: 9rem;
    min-height: 3.5rem;
  }

  .button--small {
    padding: 1.2rem 2.6rem;
    min-width: 10rem;
    min-height: unset;
  }

  /* Button - hover */

  .button:not([disabled]):hover,
  .challenge__button:hover,
  .customer button:hover {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-button), var(--alpha-button-border));
  }

  /* Button - other */

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

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

  .btn.loading,
  .btn.btn--loading,
  .button.loading {
    color: transparent;
    pointer-events: none;
  }

  .btn.loading:after,
  .btn.btn--loading:after,
  .button.loading:after {
    animation: loading var(--duration-long) infinite linear;
    border: 0.5rem solid rgba(var(--color-button-text), 0.4);
    border-left: 0.5rem solid rgb(var(--color-button-text));
    border-radius: 100%;
    box-sizing: content-box;
    content: '';
    display: block;
    height: 2rem;
    position: absolute;
    width: 2rem;
  }

  @keyframes loading {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* Button - social share */

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

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

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

  .share-button_copy-wrapper{
    display: flex;
    width: 100%;
    background: rgba(0,0,0,0.05);
    margin: 5px;
  }

  .social-sharing-icons {
    margin: 8px 8px 0;
  }

  .social-sharing-icons .sharing-icons-label{
    line-height: 1;
    margin-bottom: 8px;
    text-align: left;
  }

  .social-sharing-icons .share-icon-button{
    text-decoration: none;
    color: var(--color-base-text);
    margin: 0 5px;
  }

  .social-sharing-icons .share-icon-button svg{
    width: 2.5rem;
    height: 2.5rem;
  }

  .share-button__button:hover,
  details[open] > .share-button__button {
    color: rgb(var(--color-link));
  }

  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 {
    margin-right: 1rem;
  }

  .share-button__fallback {
    background: rgb(var(--color-background));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: absolute;
    top: 3rem;
    left: 0.1rem;
    z-index: 6;
    width: 100%;
    min-width: 31rem;
    max-width: 50rem;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
  }

  .share-button__fallback button {
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .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__fallback .field__input {
    box-shadow: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

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

  .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: transparent;
    border: 0;
    border-radius: 3.5rem;
    color: rgb(var(--color-foreground));
    font-size: 1.5rem;
    width: 100%;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 1), inset 0 2px 3px rgba(0,0,0,0.05);
    height: 4rem;
    box-sizing: border-box;
    transition: box-shadow var(--duration-short) ease;
  }

  .field__input.no-float-label{
    padding: 1.2rem 2rem !important;
  }

  .field__input:disabled,
  .select__select:disabled,
  .customer .field input:disabled,
  .customer select:disabled {
    color: rgba(var(--color-foreground),0.6);
    background: rgba(0,0,0,0.06);
  }

  textarea{
    display: block;
    width: 100%;
    min-height: 100px;
    -webkit-appearance: none;
    appearance: none;
    resize: none;
    background-color: transparent;
    border: 0;
    border-radius: 10px;
    color: rgb(var(--color-foreground));
    font-size: 1.6rem;
    width: 100%;
    box-shadow: 0 0 0 0.1rem rgba(var(--color-foreground), 0.55);
    min-height: 4.5rem;
    box-sizing: border-box;
    transition: box-shadow var(--duration-short) ease;
    padding: 1.5rem;
  }

  .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__input:hover,
  .select__select:hover,
  .customer .field input:hover,
  .customer select:hover,
  .localization-form__select:hover {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.55);
  }

  .field__input:focus,
  .select__select:focus,
  .customer .field input:focus,
  .customer select:focus,
  .localization-form__select:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--color-foreground), 0.75);
    outline: transparent;
  }

  .text-area,
  .select {
    display: inline-block;
    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: 1.5rem;
  }

  .select__select,
  .customer select {
    cursor: pointer;
    line-height: 1.6;
    padding: 0 4rem 0 2rem;
  }

  /* Field */

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

  .field-group .field__input:first-child{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .field-group .button:last-child{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .customer .field {
    display: block;
  }

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

  .field__input,
  .customer .field input {
    flex-grow: 1;
    text-align: left;
    padding: 1.2rem 2rem;
  }

  .field__label,
  .customer .field label {
    font-size: 1.5rem;
    left: 2rem;
    top: 1rem;
    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.55);
    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 ,
  .customer .field.on_focus label,
  .field__input.on_focus ~ .field__label {
    font-size: 0.9rem;
    top: 0.3em;
    letter-spacing: 0.04rem;
  }

  .customer .field.on_focus select{
    padding-top: 1.4rem;
  }

  .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 2rem 0.8rem;
  }

  .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: 3.9rem;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 6.4rem;
  }

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

  .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);
    padding: 1.2rem;
    min-height: 10rem;
    resize: none;
  }

  .text-area--resize-vertical {
    resize: vertical;
  }

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

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

  .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 {
    border: 0.1rem solid rgba(var(--color-base-text), 0.08);
    border-radius: 4em;
    position: relative;
    height: 3.5rem;
    width: 14rem;
    display: flex;
  }

  .quantity__input {
    color: currentColor;
    font-size: 1.4rem;
    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__input:disabled {
    color: rgba(var(--color-foreground),0.6);
    background: rgba(0,0,0,0.06);
  }

  .quantity__button {
    width: 3.5rem;
    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 svg {
    width: 1rem;
    pointer-events: none;
  }

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

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

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

  .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: 1;
    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;
    min-width: 1.7rem;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    top: -0.3rem;
    left: 1rem;
    line-height: 1.1;
  }

  /* section-announcement-bar */
  #section-announcement-bar {
    z-index: 4;
  }

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

  .announcement-bar__link {
    display: block;
    width: 100%;
    padding: 1rem 2rem;
    text-decoration: none;
  }

  .announcement-bar__link:hover {
    color: rgb(var(--color-foreground));
    background-color: rgba(var(--color-card-hover), 0.06);
  }

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

  .announcement-bar__link .announcement-bar__message {
    padding: 0;
  }

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

  /* section-header */

  /* section-header */
  #easystore-section-header {
    z-index: 3;
  }

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

  .easystore-section-header-hidden {
    transform: translateY(-100%);
  }

  #easystore-section-header.animate {
    transition: transform 0.15s ease-out;
  }

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

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

  .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'
      'search search search';
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .header .search-modal__form{
    width: 100%;
    max-width: 100%;
  }

  @media screen and (min-width: 990px) {
    .header {
      padding-top: 2rem;
      padding-bottom: 0rem;
    }

    .header--has-menu:not(.header--middle-left) {
      padding-bottom: 0;
    }

    .header--top-left {
      grid-template-areas:
        'heading search icons'
        'navigation navigation navigation';
      grid-template-columns: 1fr auto;
    }

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

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

    .header--middle-left .header__inline-menu {
      min-width: 45rem;
    }

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

    .header .search-modal__form{
      max-width: 38rem;
    }

    .header--top-center .search-modal__form{
      margin: 0 auto 10px;
    }
  }

  .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;
    width: var(--logo-width);
    max-width: 100%;
  }

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

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

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

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

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

  .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--menu{
    height: 4.4rem;
    width: 4.4rem;
  }

  .header__icons .header__icon{
    margin-left: 2rem;
    text-decoration: none;
  }

  .header__link-label{
    margin-left: 1rem;
    text-decoration: none;
  }

  .header__icon--cart {
    position: relative;
  }

  @media screen and (max-width: 989px) {
    menu-drawer ~ .header__icons .header__icon--account {
      display: none;
    }
    .header__icon{
      height: 4.4rem;
      width: 4.4rem;
    }
    .header__icons .header__icon{
      margin-left: 0;
      margin-right: -1.2rem;
    }
    .cart-count-bubble{
      top: 0.5rem;
    }
  }

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

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

  .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);
    height: 100%;
  }

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

  .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: 47.8rem;
    }

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

  /* ==================================================
     果子狸：修正 Header 下拉選單位置
     讓白色下拉區塊直接接在墨綠色 Header 下方
     ================================================== */

  @media screen and (min-width: 990px) {
    .header__inline-menu details[open] > .header__submenu {
      opacity: 1 !important;
      visibility: visible !important;

      position: fixed !important;
      top: var(--gzl-header-height, 96px) !important;
      left: 0 !important;
      right: 0 !important;

      width: 100vw !important;
      max-width: none !important;
      min-width: 100vw !important;

      min-height: var(--gzl-dropdown-height, 128px) !important;

      margin: 0 !important;
      padding: 34px clamp(72px, 8vw, 150px) 38px !important;

      background: #ffffff !important;
      border: 0 !important;
      box-shadow: none !important;

      display: flex !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      gap: clamp(70px, 9vw, 150px) !important;

      transform: none !important;
      animation: none !important;

      z-index: 9992 !important;
    }

    .header__inline-menu details[open] > .header__submenu > li {
      width: clamp(150px, 16vw, 240px) !important;
      min-width: clamp(150px, 16vw, 240px) !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .header__inline-menu details[open] > .header__submenu .header__menu-item {
      display: block !important;
      width: 100% !important;

      padding: 0 0 14px !important;
      margin: 0 !important;

      color: #355966 !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      line-height: 1.5 !important;
      letter-spacing: 0.08em !important;

      border-bottom: 1px solid rgba(53, 89, 102, 0.12) !important;
      text-align: left !important;
      white-space: nowrap !important;
    }

    .header__inline-menu details[open] > .header__submenu .header__menu-item span,
    .header__inline-menu details[open] > .header__submenu .header__menu-item a {
      color: #355966 !important;
      text-decoration: none !important;
    }
  }

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

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

  .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;
      margin: 1rem 0;
    }

    .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 a {
    color: currentColor;
    text-decoration: none;
  }

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

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

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

  .header__submenu .header__submenu {
    position: absolute;
    top: calc(-0.5rem - 1px);
    left: 100%;
    width: 100%;
    padding: 0.5rem 0;
  }

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

  .header__submenu .header__menu-item {
    padding: 0.95rem 3.5rem 0.95rem 2rem;
  }

  .header__submenu .header__submenu .header__menu-item {
    padding-left: 3rem;
  }

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

  .header__submenu .icon-caret {
    right: 2rem;
  }

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

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

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

  .badge {
    border-radius: 5px;
    display: inline-block;
    font-size: 1.4rem;
    letter-spacing: 0.1rem;
    line-height: 1;
    padding: 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-foreground));
    word-break: break-word;
    box-sizing: content-box;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  }

  .badge.addToClassList{
    background-color: rgba(var(--color-button), var(--alpha-button-background));
    border-color: none;
    color: rgb(var(--color-button-text));
  }

  .badge.badge-ribbon {
    text-orientation: mixed;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    padding: 1rem 0.7rem;
    position: relative;
    border: none;
    border-radius: 0;
  }

  .badge.badge-ribbon::after{
    border-color: rgb(var(--color-badge-background)) rgb(var(--color-badge-background)) transparent;
    border-radius: 3px;
    border-style: solid;
    border-width: 5px 1em;
    bottom: -8px;
    content: "";
    height: 0;
    left: 0;
    right: 0;
    position: absolute;
  }

  .badge.badge-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem;
    width: 2.5em;
    height: 2.5em;
    border-radius: 3em;
    box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.1);
  }

  .badge.badge-circle .icon {
    width: 1.3em;
    height: 1.3em;
  }

  @media screen and (max-width: 749px) {
    .badge.badge-circle {
      width: 1.6em;
      height: 1.6em;
    }
  }

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

  .select:before, .select:after {
    border-right: 2px solid;
    content: '';
    display: block;
    height: 0.7rem;
    position: absolute;
    transform: rotate(45deg);
    top: calc(50% - 0.3rem);
    right: 1.6rem;
    width: 0;
    border-radius: 1rem;
  }

  .select:after {
    transform: rotate(-45deg);
    right: 2rem;
  }

  .text-right{
    text-align: right;
  }

  .text-left{
    text-align: left;
  }

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

  .splide {
    position: relative;
  }

  .splide .splide__arrow{
    background: rgba(var(--color-button), 0.9);
    width: 3em;
    height: 3em;
  }
  .splide .splide__arrow svg{
    fill: rgb(var(--color-button-text));
  }

  .splide .splide__arrow:disabled{
    display: none !important;
  }

  .splide .splide__pagination__page.is-active{
    background: rgba(var(--color-button), 0.7);
    transform: scale(1.3);
    border: none;
    box-shadow: none;
  }

  .splide .splide__pagination__page{
    background-color: #fff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    opacity: 0.9;
  }

  .splide_pagination-bottom{
    margin-bottom: 10rem;
  }
  .splide_pagination-bottom .splide__pagination{
    bottom: -4rem;
  }

  .splide-index-count{
    position: absolute;
    bottom: 20px;
    right: 20px;
    line-height: 1;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 5px 8px;
    border-radius: 50px;
    letter-spacing: 3px;
    font-size: 12px;
  }


  @media screen and (max-width: 749px) {
    .splide .splide__arrow {
      display: none;
    }
  }

  .d-flex{
    display: flex;
  }

  .flex-wrap{
    flex-wrap: wrap;
  }

  .flex-justify-center{
    justify-content: center;
  }

  .flex-space-between{
    justify-content: space-between;
  }

  .flex-align-center{
    align-items: center;
  }

  .flex-shrink-0{
    flex-shrink: 0;
  }

  .rotate-90{
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }

  select.currency-picker{
    height: 3.5rem;
  }

  .note {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: rgba(0,0,0,0.05);
  }

  .note.form-success {
    background: rgba(145, 245, 150 ,0.3);
  }

  .note.errors {
    background: rgba(245, 185, 145, 0.3);
    padding-left: 3rem;
  }

  .svg-icon {
    width: 1.2em;
    height: 1.4em;
    vertical-align: middle;
    fill: currentcolor;
    margin-top: -0.2em;
  }

  .collection .title-wrapper-with-link--no-heading{
    justify-content: flex-end;
  }

  img{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }

  .table-wrapper{
      overflow: auto;
  }

  .table-wrapper table{
      min-width: 100%;
      width: auto !important;
  }

  .justify-center{
      justify-content: center;
  }

  /* ==== Flex table ==== */
  .flex-table{
      border: 0.01rem solid rgba(var(--color-foreground), 0.08);
      display:flex;
      flex-direction: column;
  }

  .flex-table-tr{
      padding: 2.2rem;
  }

  .flex-table-tr:not(:last-child){
      border-bottom: 0.01rem solid rgba(var(--color-foreground), 0.08);
  }


  /* ==========================================
     果子狸首頁 - 客製化裝潢設定
     ========================================== */

  /* 1. 首頁頂部大圖輪播：畫框縮小 + 圓角 + 精品陰影 (擴大打擊範圍版) */
  .hero, .slider-wrapper, .home-slider, .flexslider, .slideshow,
  .image-banner, .banner, .carousel-section, .slider-component,
  .home-carousel, .hero-banner {
    max-width: 1600px !important;  
    margin: 0px auto !important;  
    border-radius: 0px !important; 
    overflow: hidden !important;    

  }

  /* 確保裡面的圖片也跟著變圓 */
  .hero img, .slider-wrapper img, .home-slider img, .flexslider img, .slideshow img,
  .image-banner img, .banner img, .carousel-section img, .slider-component img,
  .home-carousel img, .hero-banner img {
    border-radius: 24px !important;
  }

  /* ==========================================
     果子狸全站氣氛設定：新宿高野風底色與字體
     ========================================== */

  /* 1. 注入微風般的淺綠/奶油底色 (代替死白) */
  body, .main-content, .gradient {
    background-color: #ffffff !important; /* 0523已修正成白色 */
    color: #333333 !important; /* 全站字體改成柔和的深灰色，不要用純黑 */
  }

  /* 2. 讓全站的標題都有「呼吸感」的字距 */
  h1, h2, h3, h4, .section-header__title, .title {
    letter-spacing: 0.15em !important; /* 字與字之間拉開空間 */
    font-weight: 500 !important; /* 字體粗細調柔和 */
    text-align: center !important; /* 標題一律優雅置中 */
    margin-bottom: 40px !important; /* 標題跟內容拉開距離 */
  }

  /* 3. 圖片滑過微放大特效 (套用到全站連結圖片) */
  a img {
    transition: transform 0.5s ease !important;
  }
  a:hover img {
    transform: scale(1.03) !important;
  }

  /*=============================================
   2. 新宿高野風格：圓圈選單專用排版 
  ============================================= */
  .custom-category-circles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; 
    padding: 60px 20px;
    flex-wrap: wrap; 
  }
  .circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .circle-item:hover {
    transform: translateY(-8px); 
  }
  .circle-image-wrapper {
    width: 160px; 
    height: 160px;
    border-radius: 50%; 
    overflow: hidden;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-bottom: 20px;
    border: 1px solid #eee;
  }
  .circle-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  .circle-item:hover .circle-image-wrapper img {
    transform: scale(1.05); 
  }
  .circle-title {
    font-size: 16px;
    color: #333;
    font-weight: 600;
    letter-spacing: 2px;
  }
  .circle-subtitle {
    font-size: 13px;
    color: #777;
    margin-top: 5px;
  }
  @media (max-width: 768px) {
    .circle-image-wrapper { width: 110px; height: 110px; }
    .custom-category-circles { gap: 15px; padding: 40px 10px; }
  }

  /* ==========================================
     3. 輪播圖按鈕大改造 (游標懸浮版)：預設隱藏 + 滑過顯示 + 左右歸位
     ========================================== */

  /* 1. 打破隱形牢籠：把關住按鈕的小盒子撐開滿版 */
  [class*="controls"], [class*="arrows"], slider-component {
    position: static !important; 
    width: 100% !important;
  }

  /* 2. 所有輪播按鈕的基礎設定 (變成白底黑字的精美圓形) */
  button[class*="arrow"], button[class*="prev"], button[class*="next"], 
  button[name="previous"], button[name="next"], .slider-button {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* 垂直置中 */

    /* 預設隱藏的關鍵  */
    opacity: 0 !important; 
    visibility: hidden !important; 
    transition: all 0.3s ease !important; /* 0.3秒優雅漸顯 */

    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important; /* 變成正圓形 */
    background-color: rgba(255, 255, 255, 0.85) !important; /* 半透明白色背景 */
    color: #333 !important; /* 箭頭變成深灰色 */
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px !important; /* 加上高級微陰影 */
    z-index: 9999 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 3. 確保箭頭圖示顯示正常，不再透明 */
  button[class*="arrow"] svg, .slider-button svg {
    display: block !important;
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    color: #333 !important;
  }

  /* 4. 魔法啟動：當滑鼠移到整個輪播圖區域時，按鈕浮現！ */
  div[class*="slider"]:hover button, section:hover button[class*="arrow"], 
  div[class*="banner"]:hover button, slideshow-component:hover button {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 5. 客人滑鼠停在按鈕上時，按鈕微微放大變純白 */
  button[class*="arrow"]:hover, .slider-button:hover {
    transform: translateY(-50%) scale(1.1) !important;
    background-color: #fff !important;
  }

  /* 6. 強制左邊按鈕歸位：距離左邊 20px */
  button[class*="prev"], button[name="previous"], button[aria-label*="previous"] {
    left: 20px !important;
    right: auto !important;
  }

  /* 7. 強制右邊按鈕歸位：距離右邊 20px */
  button[class*="next"], button[name="next"], button[aria-label*="next"] {
    right: 20px !important;
    left: auto !important;
  }

  /* ==================================================
     果子狸：Header 下拉時，遮罩覆蓋單獨頁面角色介紹
     貼在 assets/base.css 最底部
     ================================================== */

  @media screen and (min-width: 990px) {

    /* 1. Header 必須比頁面內容高 */
    #easystore-section-header,
    .header-wrapper {
      position: relative !important;
      z-index: 9000 !important;
      overflow: visible !important;
    }

    /* 2. 下拉白色選單最高 */
    .header__inline-menu details[open] > .header__submenu {
      position: fixed !important;
      z-index: 10020 !important;
    }

    /* 3. 灰黑遮罩要蓋過頁面所有圖片與文字 */
    .header__inline-menu .disclosure-has-popup[open] > summary::before,
    .header__inline-menu details[open] > summary::before {
      content: "" !important;
      display: block !important;
      position: fixed !important;

      top: calc(var(--gzl-header-height, 96px) + var(--gzl-dropdown-height, 128px)) !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;

      width: 100vw !important;
      height: auto !important;

      background: rgba(0, 0, 0, 0.55) !important;

      z-index: 10010 !important;
      pointer-events: none !important;
    }

    /* 4. 關掉之前測試用的 after 遮罩，避免互相打架 */
    .header__inline-menu details[open] > summary::after {
      display: none !important;
      content: none !important;
    }

    /* 5. 單獨頁面角色介紹不要自己蓋到遮罩上 */
    .gzl-character-page,
    .gzl-char-page-nojs,
    .gzl-char-stage,
    .gzl-char-section,
    #gzlCharPage {
      position: relative !important;
      z-index: 1 !important;
    }

    .gzl-bg-slant,
    .gzl-static-ui,
    .gzl-slide,
    .gzl-char-slide,
    .gzl-char-img,
    .gzl-char-info,
    .gzl-thumbs,
    .gzl-thumbs-container {
      z-index: auto !important;
    }

    /* 6. active slide 仍然正常顯示，但不要高過 header 遮罩 */
    .gzl-slide,
    .gzl-char-slide {
      z-index: 2 !important;
    }

    .gzl-slide img,
    .gzl-char-img {
      z-index: 3 !important;
    }

    .gzl-static-ui,
    .gzl-char-info,
    .gzl-thumbs,
    .gzl-thumbs-container {
      z-index: 4 !important;
    }
  }






  /* ==================================================
     果子狸 Header：頁面縮小時隱藏搜尋 / 登入 / 購物車
     貼在 assets/base.css 最最下面
     ================================================== */

  /* 這個寬度以下，就隱藏右側三個功能 */
  @media screen and (min-width: 800px) and (max-width: 1450px) {
    /* Header 改成只剩 Logo + 主選單 */
    #easystore-section-header .header,
    .header-wrapper .header,
    .header {
      grid-template-areas: "heading navigation" !important;
      grid-template-columns: auto minmax(0, 1fr) !important;
    }

    /* 主選單不要被右側功能擠壓 */
    #easystore-section-header .header__inline-menu,
    .header-wrapper .header__inline-menu,
    .header__inline-menu {
      grid-area: navigation !important;
      max-width: 100% !important;
    }

    /* 關鍵：右側搜尋 / 登入 / 購物車整組隱藏 */
    #easystore-section-header .header__icons,
    .header-wrapper .header__icons,
    .header .header__icons,
    .header__icons {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      width: 0 !important;
      min-width: 0 !important;
      max-width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
      margin: 0 !important;
      padding: 0 !important;
      pointer-events: none !important;
    }

    /* 保險：如果搜尋不是包在 header__icons 裡，也一起隱藏 */
    #easystore-section-header .header__search,
    .header-wrapper .header__search,
    .header .header__search,
    .header__search {
      display: none !important;
    }

    /* 保險：購物車 icon 若獨立存在，也一起隱藏 */
    #easystore-section-header #cart-icon-bubble,
    .header-wrapper #cart-icon-bubble,
    #cart-icon-bubble {
      display: none !important;
    }
  }

  /* 大螢幕才顯示搜尋 / 登入 / 購物車 */
  @media screen and (min-width: 1501px) {
    #easystore-section-header .header,
    .header-wrapper .header,
    .header {
      grid-template-areas: "heading navigation icons" !important;
      grid-template-columns: auto minmax(0, auto) auto !important;
    }

    #easystore-section-header .header__icons,
    .header-wrapper .header__icons,
    .header .header__icons,
    .header__icons {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: auto !important;
      overflow: visible !important;
      pointer-events: auto !important;
    }
  }


 
/* ==================================================
   果子狸：背景圖從「新鮮果物」開始，不限定首頁模板
   貼在 assets/base.css 最最下面
   ================================================== */

/* 只要有這些 class / id，就強制套背景 */
.gzl-bg-start,
.gzl-bg-area,
[id^="gzl-season-"] {
  background-color: #c7e3a8 !important;
  background-image: url("https://i.meee.com.tw/9no3GLt.jpg") !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: top center !important;
  background-attachment: scroll !important;
}

/* 清掉新鮮果物裡面的白底，避免背景被蓋住 */
.gzl-bg-start .page-width,
.gzl-bg-start .color-background-1,
.gzl-bg-start .gradient,
.gzl-bg-start .content-container,
.gzl-bg-start .section-background,
.gzl-bg-start .collection,
.gzl-bg-start .multicolumn,
.gzl-bg-start .rich-text,
.gzl-bg-area .page-width,
.gzl-bg-area .color-background-1,
.gzl-bg-area .gradient,
.gzl-bg-area .content-container,
.gzl-bg-area .section-background,
.gzl-bg-area .collection,
.gzl-bg-area .multicolumn,
.gzl-bg-area .rich-text,
[id^="gzl-season-"] .page-width,
[id^="gzl-season-"] .color-background-1,
[id^="gzl-season-"] .gradient,
[id^="gzl-season-"] .content-container {
  background-color: transparent !important;
  background-image: none !important;
}

/* 圖片本身不要被背景影響 */
.gzl-bg-start img,
.gzl-bg-area img,
[id^="gzl-season-"] img {
  background: none !important;
}

/* 強制讓新鮮果物內容容器也透明 */
[id^="gzl-season-"] .guozili-recommend-section,
[id^="gzl-season-"] .recommend-header,
[id^="gzl-season-"] .recommend-grid,
[id^="gzl-season-"] .recommend-item,
[id^="gzl-season-"] .item-text-wrapper {
  background-color: transparent !important;
  background-image: none !important;
}