@layer components {
  :root {
    /*----------  buttons  ----------*/
    --button-font-size: 1.6rem;
    --button-font-weight: bold;
    --button-font-family: var(--body-font-family);
    --button-font: var(--button-font-weight) var(--button-font-size) var(--button-font-family);
    --button-height: 4.2rem;
    --button-padding: 0 1.8rem;
    --button-margin: 1.6rem 0;
    --button-border: 1px solid;
    --button-border-color: transparent;
    --button-border-radius: 0;
    --button-transition: all 0.15s ease-in-out;
    --button-text-transform: none;

    --button-primary-background: var(--clr-brand-primary);
    --button-secondary-background: var(--clr-black);
    --button-tertiary-background: var(--clr-white);

    --button-primary-background-hover: color-mix(in srgb, var(--button-primary-background) 80%, var(--clr-white));
    --button-secondary-background-hover: color-mix(in srgb, var(--button-secondary-background) 80%, var(--clr-white));
    --button-tertiary-background-hover: color-mix(in srgb, var(--button-tertiary-background) 80%, var(--clr-black));

    --button-primary-color: var(--clr-white);
    --button-secondary-color: var(--clr-white);
    --button-tertiary-color: var(--clr-black);

    --button-primary-color-hover: var(--clr-white);
    --button-secondary-color-hover: var(--clr-white);
    --button-tertiary-color-hover: var(--clr-black);

    --button-primary-border-color: var(--button-border-color);
    --button-secondary-border-color: var(--button-border-color);
    --button-tertiary-border-color: var(--clr-black);

    --button-primary-border-color-hover: var(--button-border-color);
    --button-secondary-border-color-hover: var(--button-border-color);
    --button-tertiary-border-color-hover: var(--clr-black);

    --button-promo-background: var(--clr-black);
    --button-promo-color: var(--clr-white);
    --button-promo-background-hover: var(--clr-white);
    --button-promo-color-hover: var(--clr-black);
    --button-promo-border-color: var(--clr-black);
    --button-promo-border-color-hover: var(--clr-black);

    --button-cancel-background: var(--clr-neutral-40);
    --button-cancel-color: var(--text-color);
    --button-cancel-border-color: transparent;
    --button-cancel-background-hover: var(--clr-charcoal);
    --button-cancel-color-hover: var(--clr-white);
    --button-cancel-border-color-hover: var(--text-color);

    --clr-disabled: var(--clr-neutral-70);

    /*----------  inputs  ----------*/
    --input-height: 4rem;
    --input-border-radius: 4px;
    --input-border-color: var(--clr-neutral-70);
    --input-placeholder-color: var(--clr-neutral-80);
    --input-text-color: var(--clr-neutral);
    --input-padding: var(--gutter-12);

    --input-label-top: -0.6lh;
    --input-label-color: var(--clr-neutral);

    --field-gap: 20px;
  }



/*=============================================
=            buttons            =
=============================================*/
  :is(a.button:any-link, button, .button):is(.primary, .secondary, .tertiary, .action, .primary.cart-button) {
    font: var(--button-font);
    line-height: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: var(--button-height);
    padding: var(--button-padding);
    margin: var(--button-margin);
    border: var(--button-border);
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius);
    white-space: normal;
    transition: var(--button-transition);
    min-inline-size: fit-content;
    text-decoration: none;
    text-transform: var(--button-text-transform);

    @media (width >= 900px),
    (min-width: 900px) {
      min-inline-size: 11rem;
    }
  }

  :is(a.button:any-link, button, .button):is(.primary, .secondary, .tertiary):is(:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  :is(a.button:any-link, button, .button):is(.primary, .secondary, .tertiary) sup {
    font-size: 60%;
    translate: 0 .2em;
  }

  /* ===== primary ===== */
  :is(a.button:any-link, button, .button):is(.primary),
  div.primary button.action.primary,
  div.primary a.action.primary,
  .minicart-panel .minicart-actions button:nth-child(2),
  .checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout,
  .minicart-panel .overlay>.actions button:nth-child(2),
  .checkout-index-index .payment-methods.content .payment-methods-row .actions-toolbar .primary .proceed-checkout,
  .checkout-index-index #shipping-method-buttons-container>div button.primary {
    --button-border-color: var(--button-primary-border-color);

    background: var(--button-primary-background);
    color: var(--button-primary-color);
  }

  :is(a.button:any-link, button, .button):is(.primary):is( :hover, :focus-visible) {
    --button-border-color: var(--button-primary-border-color-hover);

    background: var(--button-primary-background-hover);
    color: var(--button-primary-color-hover);
  }

  /* ===== secondary ===== */
  :is(a.button:any-link, button, .button):is(.secondary),
  .checkout-cart-index .cart-summary .block.discount .content .fieldset .actions-toolbar button,
  .minicart-wrapper .minicart-product .overlay .actions>button:first-child,
  #discount-form .actions-toolbar .primary .action.action-apply {
    --button-border-color: var(--button-secondary-border-color);

    background: var(--button-secondary-background);
    color: var(--button-secondary-color);
  }

  :is(a.button:any-link, button, .button):is(.secondary):is( :hover, :focus-visible) {
    --button-border-color: var(--button-secondary-border-color-hover);

    background: var(--button-secondary-background-hover);
    color: var(--button-secondary-color-hover);
  }

  /* ===== tertiary ===== */
  :is(a.button:any-link, button, .button):is(.tertiary),
  .minicart-panel .minicart-actions button:first-child {
    --button-border-color: var(--button-tertiary-border-color);

    background: var(--button-tertiary-background);
    color: var(--button-tertiary-color);
  }

  :is(a.button:any-link, button, .button):is(.tertiary):is( :hover, :focus-visible) {
    --button-border-color: var(--button-tertiary-border-color-hover);

    background: var(--button-tertiary-background-hover);
    color: var(--button-tertiary-color-hover);
  }

  /* ===== disabled ===== */

  .button-container > del {
    text-decoration-line: none;
  }

  /* ===== close ===== */
  :is(button.close, span.close, button[aria-label='Close (ESC)']) {
    background: var(--clr-white);
    width: 4rem;
    height: 4rem;
    text-align: center;
    color: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    padding: 0;
    font-size: 0;
    z-index: 100;
    transition: all 0.3s ease;
    text-decoration: none !important;
    margin: 0;
    overflow: clip;
  }

  :is(button.close, span.close, button[aria-label='Close (ESC)'])::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="%23000000"><path fill="none" stroke="%23000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>') center/50% no-repeat;
    height: 100%;
    aspect-ratio: 1;
    padding: 0;
    transition: all 0.3s ease;
  }

  :is(button.close, span.close, button[aria-label='Close (ESC)']):is(:hover, :focus-visible) {
    border-color: var(--clr-white);
  }

  :is(button.close, span.close, button[aria-label='Close (ESC)']):is(:hover, :focus-visible)::before {
    background: #000 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24" fill="%23ffffff"><path fill="%23000000" stroke="%23ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18 6L6 18M6 6l12 12"/></svg>') center/50% no-repeat;
  }

  :is(.promo-disclaimer, .hlx-modal-content, dialog, .overlay) button.close {
    position: absolute;
    top: var(--gutter-xs);
    right: var(--gutter-xs);
  }

  .hlx-modal-content button[aria-label='Close (ESC)'] {
    align-self: flex-end;
    position: absolute;
    right: .5rem;
    top: .5rem;

    @media (width >= 768px) {
      right: 2rem;
    }
  }

  /* ================================================================================================ */
  /*     ICONS     */
  /* ================================================================================================ */
  /* ===== details button ===== */
  button.details-icon {
    appearance: none;
    height: 1lh;
    width: 4.4rem;
    background: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: inline-grid;
    place-content: center;
    color: currentColor;
  }

  a .details-icon {
    position: relative;
    z-index: 10;
  }

  .details-icon::after {
    content: "";
    display: block;
    width: 4.4rem;
    aspect-ratio: 1/1;
    background-color: currentColor;
    mask-image: url("/icons/icon-Info.svg");
    mask-size: 50%;
    mask-position: 10% 45%;
    mask-repeat: no-repeat;

    @media (width >= 1800px) {
      mask-size: 2.6rem;
      mask-position: 10% 45%;
    }
  }

  /* ===== external link ===== */
  a[target="_blank"] .cta-wrapper .button::after,
  a[target="_blank"]:not(:has(.target-blank))::after,
  .button[target="_blank"]::after,
  .target-blank::after,
  a:has(.target-blank) .target-blank::after {
    content: "\279A";
    background-color: currentColor;
    cursor: pointer;
    overflow: hidden;
    mask-image: url("/icons/icon-external-link.svg");
    mask-size: 1.05em;
    mask-position: 50% 40%;
    mask-repeat: no-repeat;
    display: inline-flex;
    height: 1lh;
    aspect-ratio: 1 / 1;
    margin-inline-start: 0.25em;
  }

  .button[target="_blank"]::after {
    height: var(--button-height);
  }

  .disruptor a[target="_blank"]::after,
  .link-wrap a[target="_blank"]::after {
    content: "";
    display: none;
  }

  a[target="_blank"]:has(.target-blank)::after {
    display: none;
  }

  :has(> span[class^="icon-"]) {
    align-items: center;
    display: flex;
  }


/*=============================================
=               modals | dialogs              =
=============================================*/
  html:has(.modal-background),
  html:has(details.promo-disclaimer[open]) {
    overflow: hidden;
  }

  .modal-background {
    position: fixed;
    inset: 0;
    z-index: var(--dialog-z-level);
    background: var(--backdrop-color);
    backdrop-filter: var(--backdrop-blur);
  }

  .hlx-modal-content {
    background: var(--clr-white);
    left: 50%;
    width: var(--dialog-width);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--dialog-border-radius);
    font-size: var(--dialog-text-size);
    font-family: var(--dialog-font-family);
    padding: 2rem 0;
  }

  .modal-scroll-content {
    padding: 0.5rem var(--gutter-xxl) 0.5rem var(--gutter-m);
    overflow: auto;
  }

  .hlx-modal-content.size-guide img {
    width: 100%;
    max-width: 100%;
  }

  .hlx-modal-content :is(h1, h2, h3, h4, h5, h6, strong),
  details.promo-disclaimer ol li :is(h1, h2, h3, h4, h5, h6, strong) {
    margin: 0 0 1rem;
    padding: 0;
    display: block;
    font-family: var(--dialog-font-family);
    font-size: var(--dialog-heading-size);
    text-wrap: balance;

    @media (width <= 480px) {
      padding-inline-end: 2rem;
    }
  }

  /* ===== promo-disclaimer ===== */
  :has(> details.promo-disclaimer) {
    display: inline-flex;
    align-items: center;
  }

  details.promo-disclaimer summary {
    list-style: none;
    list-style-type: none;
    width: 4.4rem;
    aspect-ratio: 1/1;
    background-color: currentColor;
    cursor: pointer;
    overflow: hidden;
    mask-image: url('/icons/icon-Info.svg');
    mask-size: 2.4rem;
    mask-position: 50% 40%;
    mask-repeat: no-repeat;
  }

  details.promo-disclaimer[open] .disclaimer-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: 100vw;
    height: 100vh;
    background: var(--backdrop-color);
    backdrop-filter: var(--backdrop-blur);
    z-index: var(--dialog-z-level);
  }

  details.promo-disclaimer[open] .disclaimer-content {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background: var(--background-color);
    padding: var(--gutter-l);
    border: 1px solid var(--base-border-color);
    color: var(--text-color);
    width: var(--dialog-width);
    border-radius: var(--dialog-border-radius);
  }

  details.promo-disclaimer ol {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  details.promo-disclaimer ol li {
    font-family: var(--dialog-font-family);
    font-size: var(--dialog-font-size);
    font-weight: var(--fw-normal);
    text-align: left;
  }

  details.promo-disclaimer ol li br {
    display: none;
  }

  details.promo-disclaimer ol li :is(h1, h2, h3, h4, h5, h6, strong) {
    margin-block-end: 0.3em;
    display: block;
    font-family: var(--dialog-heading-family);
    font-size: var(--dialog-heading-size);

    @media (width <= 480px) {
      padding-inline-end: 2rem;
    }
  }

  html:has(details.promo-disclaimer[open]) {
    overflow: hidden;
  }

  /* ===== DIALOG ===== */
  dialog {
    font-family: var(--dialog-font-family);
    font-size: var(--dialog-font-size);
    font-weight: var(--fw-normal);
    text-align: left;
    background: var(--background-color);
    padding: .5em 1em;
    border: 1px solid var(--base-border-color);
    color: var(--text-color);
    width: var(--dialog-width);
    border-radius: var(--dialog-border-radius);
  }

  dialog::content {
    font-family: var(--dialog-font-family);
    font-size: var(--dialog-font-size);
    font-weight: var(--fw-normal);
    text-align: left;
  }

  dialog::backdrop {
    background: var(--backdrop-color);
    backdrop-filter: var(--backdrop-blur);
  }

  dialog :where(h1, h2, h3, h4, h5, h6, strong) {
    margin-block-end: 0.5em;
    display: block;
    font-family: var(--dialog-heading-family);
    font-size: var(--dialog-heading-size);
    text-wrap: pretty;
    line-height: 1.2;
    margin-inline-end: 30px;

    @media (width <= 480px) {
      padding-inline-end: 2rem;
    }
  }

  dialog p {
    margin-block: 0 .5em;
  }

} /* END Layer */