/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */
/* stylelint-disable no-empty-source */
:root, .dropin-design {
    --color-brand-300: var(--color-slate-500);
  --color-brand-500: var(--color-slate-600);
  --color-brand-600: var(--color-slate-700);
  --color-brand-700: var(--color-slate-800);
  --color-neutral-50: var(--color-bw-white);
  --color-neutral-100: var(--color-slate-50);
  --color-neutral-200: var(--color-slate-100);
  --color-neutral-300: var(--color-slate-200);
  --color-neutral-400: var(--color-slate-300);
  --color-neutral-500: var(--color-slate-400);
  --color-neutral-600: var(--color-slate-500);
  --color-neutral-700: var(--color-slate-500);
  --color-neutral-800: var(--color-slate-700);
  --color-neutral-900: var(--color-slate-800);
  --color-positive-200: var(--color-green-50);
  --color-positive-500: var(--color-green-300);
  --color-positive-800: var(--color-green-800);
  --color-informational-200: var(--color-violet-50);
  --color-informational-500: var(--color-violet-600);
  --color-informational-800: var(--color-violet-600);
  --color-warning-200: var(--color-yellow-50);
  --color-warning-500: var(--color-yellow-400);
  --color-warning-800: var(--color-yellow-600);
  --color-alert-200: var(--color-red-50);
  --color-alert-500: var(--color-red-400);
  --color-alert-800: var(--color-red-700);
  --color-button-active: var(--color-brand-700);
  --color-button-focus: var(--color-neutral-400);
  --color-button-hover: var(--color-brand-600);
  --color-action-button-active: var(--color-neutral-50);
  --color-action-button-hover: var(--color-neutral-300);
  --color-opacity-16: var(--color-alpha-dark-200);
  --color-opacity-24: var(--color-alpha-dark-300);
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 16px;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 16px;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 24px;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 24px;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 24px;
  --shape-border-radius-1: var(--radius-md);
  --shape-border-radius-2: var(--radius-lg);
  --shape-border-radius-3: var(--radius-3xl);
  --shape-border-width-1: 1px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 2px;
  --shape-border-width-4: 4px;
  --shape-shadow-1: var(--shadow-xs);
  --shape-shadow-2: var(--shadow-sm);
  --shape-shadow-3: var(--shadow-md);
  --shape-icon-stroke-1: 1px;
  --shape-icon-stroke-2: 1.5px;
  --shape-icon-stroke-3: 2px;
  --shape-icon-stroke-4: 4px;
  --spacing-xxsmall: var(--spacing-xxs);
  --spacing-xsmall: var(--spacing-xs);
  --spacing-small: var(--spacing-base);
  --spacing-medium: var(--spacing-lg);
  --spacing-big: var(--spacing-xl2);
  --spacing-xbig: var(--spacing-xl3);
  --spacing-xxbig: var(--spacing-xl4);
  --spacing-large: var(--spacing-xl5);
  --spacing-xlarge: var(--spacing-xl6);
  --spacing-xxlarge: var(--spacing-xl6);
  --spacing-huge: var(--spacing-xl6);
  --spacing-xhuge: var(--spacing-xl6);
  --spacing-xxhuge: var(--spacing-xl6);
  --type-base-font-family: var(--type-base-font-family);
  --type-display-1-font: var(--type-title-1-font);
  --type-display-1-letter-spacing: var(--type-title-1-letter-spacing);
  --type-display-2-font: var(--type-title-2-font);
  --type-display-2-letter-spacing: var(--type-title-2-letter-spacing);
  --type-display-3-font: var(--type-heading-1-font);
  --type-display-3-letter-spacing: var(--type-heading-1-letter-spacing);
  --type-headline-1-font: var(--type-heading-1-font);
  --type-headline-1-letter-spacing: var(--type-heading-1-letter-spacing);
  --type-headline-2-default-font: var(--type-heading-2-font);
  --type-headline-2-default-letter-spacing: var(--type-heading-2-letter-spacing);
  --type-headline-2-strong-font: var(--type-heading-2-strong-font);
  --type-headline-2-strong-letter-spacing: var(--type-heading-2-letter-spacing);
  --type-body-1-default-font: var(--type-body-1-font);
  --type-body-1-default-letter-spacing: var(--type-body-1-letter-spacing);
  --type-body-1-strong-font: var(--type-body-1-strong-font);
  --type-body-1-strong-letter-spacing: var(--type-body-1-letter-spacing);
  --type-body-1-emphasized-font: var(--type-body-1-strong-font);
  --type-body-1-emphasized-letter-spacing: var(--type-body-1-letter-spacing);
  --type-body-2-default-font: var(--type-body-2-font);
  --type-body-2-default-letter-spacing: var(--type-body-2-letter-spacing);
  --type-body-2-strong-font: var(--type-body-2-strong-font);
  --type-body-2-strong-letter-spacing: var(--type-body-2-letter-spacing);
  --type-body-2-emphasized-font: var(--type-body-2-strong-font);
  --type-body-2-emphasized-letter-spacing: var(--type-body-2-letter-spacing);
  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0.08em;
  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0.08em;
  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0.08em;
  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0.08em;
  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.16em;
  --type-fixed-font-family: adobe-clean, "Roboto Mono", menlo, consolas, "Liberation Mono", monospace, system-ui, sans-serif;
  --background-color: var(--color-bw-white);
  --background-color-header: var(--color-bw-pure-white);
  --nav-height: 6.4rem;

  /*
  * Semantic tokens for the accent variant and the links.
  * Sports Emotion theming must override them together with --color-brand-*.
   */
  --light-color: var(--color-neutral-300);
  --dark-color: var(--color-neutral-800);
  --link-color: var(--color-brand-500);
  --link-hover-color: var(--color-brand-600);
}


html, body {
  min-height: 100%;
}

body {
  margin: 0;
  background-color: var(--background-color);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  -webkit-font-smoothing: antialiased;
}

body:not(.appear) {
  display: none;
}

header {
  grid-row: 1;
  height: var(--nav-height);
}

main {
  grid-row: 2;
}

main > .section.sr-only ~ * {
    margin-top: 0;
}

footer {
  grid-row: 3;
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1.5625em;
  margin-bottom: 1.5625em;
}

hr {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  border: 0;
  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-300);
}

code,
pre {
  font: var(--type-body-2-default-font);
  letter-spacing: var(--type-body-2-default-letter-spacing);
  font-family: var(--type-fixed-font-family);
}

pre {
  overflow: scroll;
}

main pre {
  background-color: var(--color-neutral-300);
  padding: 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: var(--spacing-xbig) var(--spacing-small);
}

input,
textarea,
select,
button {
  font: inherit;
}

a:not(.dropin-design a, .button) {
  color: var(--color-brand-500);
  font: var(--type-body-2-medium-font);
  letter-spacing: var(--type-body-1-letter-spacing);
  text-decoration: none;
  overflow-wrap: break-word;
}

a:not(.dropin-design a, .button):hover {
  color: var(--color-brand-600);
  text-decoration: underline;
}

main blockquote {
  font-style: italic;
  margin: 3rem;
  text-indent: -1rem;
  hanging-punctuation: first;
}

main blockquote p::before {
  content: '\201C';
  line-height: 0;
}

main blockquote p::after {
  content: '\201D';
  line-height: 0;
}

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

.icon {
  display: inline-block;
  height: 2.4rem;
  width: 2.4rem;
}

.icon img {
  height: 100%;
  width: 100%;
}

main > .section {
  margin: var(--spacing-xbig) 0;
}

.section:empty {
  display: none;
}

main > .section > div {
  max-width: 1440px;
  margin: auto;
  padding: 0 var(--spacing-medium);
}

main > .section:first-of-type {
  margin-top: 0;
}

@media (min-width: 900px) {
  main > .section > div {
    padding: 0 var(--spacing-big);
  }
}

main .section.light,
main .section.highlight {
  background-color: var(--color-neutral-100);
  margin: 0;
  padding: var(--spacing-xbig) 0;
}

main .section[data-padding="default"] {
    padding: var(--spacing-xxsmall) 0;
}

main .section[data-padding="small"] {
    padding: var(--spacing-xsmall) 0;
}

main .section[data-padding="medium"] {
    padding: var(--spacing-small) 0;
}

main .section[data-padding="large"] {
    padding: var(--spacing-medium) 0;
}

main .section[data-padding="big"] {
    padding: var(--spacing-big) 0;
}

main .section[data-padding="xbig"] {
    padding: var(--spacing-xbig) 0;
}

main .section[data-padding="xxbig"] {
    padding: var(--spacing-xxbig) 0;
}

main .section[data-padding="huge"] {
    padding: var(--spacing-huge) 0;
}

main .section[data-padding="xhuge"] {
    padding: var(--spacing-xhuge) 0;
}

main .section[data-padding="xxhuge"] {
    padding: var(--spacing-xxhuge) 0;
}


main .section[data-margin="small"] {
    margin: var(--spacing-xsmall) 0;
}

main .section[data-margin="medium"] {
    margin: var(--spacing-small) 0;
}

main .section[data-margin="large"] {
    margin: var(--spacing-medium) 0;
}

main .section[data-margin="big"] {
    margin: var(--spacing-big) 0;
}

main .section[data-margin="xbig"] {
    margin: var(--spacing-xbig) 0;
}

main .section[data-margin="xxbig"] {
    margin: var(--spacing-xxbig) 0;
}

main .section[data-margin="huge"] {
    margin: var(--spacing-huge) 0;
}

main .section[data-margin="xhuge"] {
    margin: var(--spacing-xhuge) 0;
}

main .section[data-margin="xxhuge"] {
    margin: var(--spacing-xxhuge) 0;
}


.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

.dropin-input-date__icon {
  z-index: 2;
}

body.columns main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1264px;
  margin: 0 auto;
  padding: var(--spacing-large) var(--spacing-small);
  box-sizing: border-box;
}

body.columns main > .section {
  flex: 1;
  flex-basis: 100%;
  max-width: unset;
  margin: unset;
  padding: 0;
  box-sizing: border-box;
}

body.columns main > .section > div {
  max-width: unset;
  padding: unset;
}

body.columns main > .section > div:not(:last-child) {
  margin-bottom: var(--gap, unset);
}

body.columns main > .section:empty {
  display: none;
}

@media (min-width: 600px) {
  body.columns main {
    padding: var(--spacing-large) var(--spacing-big);
  }
}

.dropin-product-item-card {
  border: unset;
  position: relative;
}

@media (min-width: 900px) {
  body.columns main {
    flex-flow: row wrap;
  }

  body.columns main > .section {
    flex: 1;
    flex-basis: var(--column-width, auto);
    padding: calc(var(--grid-4-gutters) / 2);
  }

  body.account-page main > .section[data-section-status="initialized"],
  body.account-page main > .section[data-section-status="loading"] {
    display: block !important;
    visibility: hidden;
    height: 0;
    min-height: 0;
    overflow: hidden;
  }

  body.columns main > .section:first-child {
    padding-inline-start: 0;
    padding-block-start: 0;
  }

  body.columns main > .section:last-child {
    padding-inline-end: 0;
    padding-block-end: 0;
  }
}

main[hidden] {
  display: none !important;
}

/* ==========================================================================
   SPORTS EMOTION — THEME OVERRIDES
   ==========================================================================
   Single source of brand theming. These tokens override (in cascade
   order) those of the base design system defined at the top of the file, and
   re-theme at the same time the storefront's own CSS and ALL dropin
   components (which render under .dropin-design).

   ⚠️ PROVISIONAL VALUES: mapped to the base Adobe palette until receiving
   the Sports Emotion style guide. To apply the brand you only need to
   replace the values in this block; no block or section should use
   literal colors/type outside tokens (project rule, see
   docs/adr/0005-theming-por-tokens.md).
   ========================================================================== */

/* stylelint-disable-next-line no-duplicate-selectors -- intentional override of the base block */
:root,
.dropin-design {
  /* --- Brand color (replace with the Sports Emotion palette) --- */
  --color-brand-300: #6d6d6d; /* temporary = base Adobe */
  --color-brand-500: #454545; /* temporary = base Adobe (main color) */
  --color-brand-600: #383838; /* temporary = base Adobe (hover) */
  --color-brand-700: #2b2b2b; /* temporary = base Adobe (active) */

  /* --- Interaction derived from the brand --- */
  --color-button-hover: var(--color-brand-600);
  --color-button-active: var(--color-brand-700);
  --link-color: var(--color-brand-500);
  --link-hover-color: var(--color-brand-600);

  /*
   * --- Brand typography ---
   * Once the corporate font exists:
   *  1. Add the @font-face to styles/fonts.css (with font-display: swap)
   *     and the corresponding preload in head.html.
   *  2. Override --type-base-font-family here; the whole typographic
   *     scale (--type-*) derives from it.
   * --type-base-font-family: 'SportsEmotionSans', adobe-clean, sans-serif;
   */

  /* --- PDP shipping pill --- */
  --color-bg-envio-pill: rgb(15 23 42 / 75%);
}


/* stylelint-disable comment-empty-line-before, custom-property-empty-line-before, no-descending-specificity, no-duplicate-selectors -- critical consolidated sheets; their original cascade order is preserved */
/** Primitive colour tokens */

:root {
/** === b&w === */
  --color-bw-pure-white: #FFF;
  --color-bw-white: #FDFDFD;
  --color-bw-black: #0D0D0E;
  --color-bw-transparent: rgb(0 0 0 / 0%);

/** === slate === */
  --color-slate-50: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #18191A;
  --color-slate-950: #090909;

/** === red === */
  --color-red-50: #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-200: #FECACA;
  --color-red-300: #FCA5A5;
  --color-red-400: #F87171;
  --color-red-500: #EF4444;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;
  --color-red-800: #991B1B;
  --color-red-900: #7F1D1D;
  --color-red-950: #450A0A;

/** === green === */
  --color-green-50: #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-200: #BBF7D0;
  --color-green-300: #86EFAC;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;
  --color-green-700: #15803D;
  --color-green-800: #166534;
  --color-green-900: #14532D;
  --color-green-950: #052E16;

/** === yellow === */
  --color-yellow-50: #FEFCE8;
  --color-yellow-100: #FEF9C3;
  --color-yellow-200: #FEF08A;
  --color-yellow-300: #FDE047;
  --color-yellow-400: #FACC15;
  --color-yellow-500: #EAB308;
  --color-yellow-600: #CA8A04;
  --color-yellow-700: #A16207;
  --color-yellow-800: #854D0E;
  --color-yellow-900: #713F12;
  --color-yellow-950: #422006;

/** === violet === */
  --color-violet-50: #F5F3FF;
  --color-violet-100: #EDE9FE;
  --color-violet-200: #DDD6FE;
  --color-violet-300: #C4B5FD;
  --color-violet-400: #A78BFA;
  --color-violet-500: #8B5CF6;
  --color-violet-600: #7C3AED;
  --color-violet-700: #6D28D9;
  --color-violet-800: #5B21B6;
  --color-violet-900: #4C1D95;
  --color-violet-950: #2E1065;

/** === alpha/light === */
  --color-alpha-light-00: #FFF;
  --color-alpha-light-50: rgb(26 26 26 / 6%);
  --color-alpha-light-100: rgb(26 26 26 / 9%);
  --color-alpha-light-200: rgb(26 26 26 / 20%);
  --color-alpha-light-300: rgb(26 26 26 / 28%);
  --color-alpha-light-400: rgb(26 26 26 / 36%);
  --color-alpha-light-500: rgb(26 26 26 / 48%);
  --color-alpha-light-600: rgb(26 26 26 / 60%);
  --color-alpha-light-700: rgb(26 26 26 / 70%);
  --color-alpha-light-800: rgb(26 26 26 / 75%);
  --color-alpha-light-900: rgb(26 26 26 / 80%);
  --color-alpha-light-1000: #1A1A1A;

  /** === alpha/dark === */
  --color-alpha-dark-50: rgb(255 255 255 / 2%);
  --color-alpha-dark-100: rgb(255 255 255 / 9%);
  --color-alpha-dark-200: rgb(255 255 255 / 20%);
  --color-alpha-dark-300: rgb(255 255 255 / 28%);
  --color-alpha-dark-400: rgb(255 255 255 / 36%);
  --color-alpha-dark-500: rgb(255 255 255 / 48%);
  --color-alpha-dark-600: rgb(255 255 255 / 60%);
  --color-alpha-dark-700: rgb(255 255 255 / 70%);
  --color-alpha-dark-800: rgb(255 255 255 / 75%);
  --color-alpha-dark-900: rgb(255 255 255 / 80%);
  --color-alpha-dark-1000: #FCFCFC;
  --color-alpha-dark-00: #141414;

/** === semantic: bg === */
  --color-bg-primary: var(--color-bw-white);
  --color-bg-primary-hover: var(--color-slate-50);
  --color-bg-secondary: var(--color-slate-50);
  --color-bg-secondary-hover: var(--color-slate-100);
  --color-bg-tertiary: var(--color-slate-100);
  --color-bg-tertiary-hover: var(--color-slate-200);
  --color-bg-neutral: #F2F2F2; /* Neutral surface gris del SPORTS, p.ej. tarjetas de tienda (SE-0149) */
  --color-bg-quartiary: var(--color-slate-300);
  --color-bg-quartiary-hover: var(--color-slate-400);
  --color-bg-black-solid: var(--color-slate-900);
  --color-bg-black-solid-hover: var(--color-slate-800);
  --color-bg-disabled: var(--color-slate-300);
  --color-bg-disabled-alt: var(--color-slate-100);
  --color-bg-error-primary: var(--color-red-50);
  --color-bg-error-primary-hover: var(--color-red-100);
  --color-bg-error-secondary: var(--color-red-600);
  --color-bg-error-secondary-hover: var(--color-red-700);
  --color-bg-success-primary: var(--color-green-100);
  --color-bg-success-primary-hover: var(--color-green-200);
  --color-bg-success-secondary: var(--color-green-600);
  --color-bg-success-secondary-hover: var(--color-green-700);
  --color-bg-warning-primary: var(--color-yellow-100);
  --color-bg-warning-primary-hover: var(--color-yellow-200);
  --color-bg-warning-secondary: var(--color-yellow-700);
  --color-bg-warning-secondary-hover: var(--color-yellow-800);
  --color-bg-info-primary: var(--color-slate-50);
  --color-bg-info-primary-hover: var(--color-slate-100);
  --color-bg-info-secondary: var(--color-slate-600);
  --color-bg-info-secondary-hover: var(--color-slate-700);
  --color-bg-offer-primary: var(--color-green-100);
  --color-bg-offer-primary-hover: var(--color-green-200);
  --color-bg-offer-secondary: var(--color-green-600);
  --color-bg-offer-secondary-hover: var(--color-green-700);
  --color-bg-overlay-alpha-primary: var(--color-alpha-light-200);
  --color-bg-overlay-alpha-secondary: var(--color-alpha-light-500);
  --color-bg-overlay-alpha-white-primary: var(--color-alpha-dark-50);
  --color-bg-overlay-alpha-white-secondary: var(--color-alpha-dark-500);

/** === semantic: text === */
  --color-text-primary: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-tertiary: var(--color-slate-500);
  --color-text-primary-hover: var(--color-slate-800);
  --color-text-secondary-hover: var(--color-slate-700);
  --color-text-tertiary-hover: var(--color-slate-600);
  --color-text-disabled: var(--color-slate-400);
  --color-text-disabled-alt: var(--color-slate-300);
  --color-text-placeholder: var(--color-slate-400);
  --color-text-white: var(--color-bw-white);
  --color-text-on-dark-color: var(--color-bw-white);
  --color-text-error-primary: var(--color-red-600);
  --color-text-error-secondary: var(--color-red-400);
  --color-text-error-primary-hover: var(--color-red-700);
  --color-text-error-secondary-hover: var(--color-red-500);
  --color-text-success-primary: var(--color-green-600);
  --color-text-success-secondary: var(--color-green-400);
  --color-text-success-primary-hover: var(--color-green-700);
  --color-text-success-secondary-hover: var(--color-green-700);
  --color-text-warning-primary: var(--color-yellow-700);
  --color-text-warning-secondary: var(--color-yellow-500);
  --color-text-warning-primary-hover: var(--color-yellow-800);
  --color-text-warning-secondary-hover: var(--color-yellow-600);
  --color-text-info-primary: var(--color-slate-600);
  --color-text-info-secondary: var(--color-slate-500);
  --color-text-info-primary-hover: var(--color-slate-700);
  --color-text-info-secondary-hover: var(--color-slate-500);
  --color-text-offer-primary: var(--color-green-600);
  --color-text-offer-secondary: var(--color-green-500);
  --color-text-offer-primary-hover: var(--color-green-700);
  --color-text-offer-secondary-hover: var(--color-green-600);
  --color-grid-card-active-bg: #F2F2F2; /* Background of the grid size selector's active overlay (SE-0512) */
  --color-grid-add-disabled-bg-from: #e0e0e0; /* Disabled pill of the grid add-to-cart (SE-0513), gradient 1 */
  --color-grid-add-disabled-bg-to: #d0d0d0; /* Disabled pill of the grid add-to-cart (SE-0513), gradient 2 */
  --color-grid-add-disabled-text: #000; /* Text of the disabled pill of the grid add-to-cart (SE-0513) */

/** === semantic: icon === */
  --color-icon-primary: var(--color-slate-900);
  --color-icon-secondary: var(--color-slate-600);
  --color-icon-tertiary: var(--color-slate-400);
  --color-icon-primary-hover: var(--color-slate-800);
  --color-icon-secondary-hover: var(--color-slate-700);
  --color-icon-tertiary-hover: var(--color-slate-600);
  --color-icon-disabled: var(--color-slate-400);
  --color-icon-disabled-alt: var(--color-slate-300);
  --color-icon-placeholder: var(--color-slate-400);
  --color-icon-white: var(--color-bw-white);
  --color-icon-on-dark-color: var(--color-bw-white);
  --color-icon-error-primary: var(--color-red-600);
  --color-icon-error-secondary: var(--color-red-300);
  --color-icon-error-primary-hover: var(--color-red-600);
  --color-icon-error-secondary-hover: var(--color-red-500);
  --color-icon-success-primary: var(--color-green-600);
  --color-icon-success-secondary: var(--color-green-200);
  --color-icon-success-primary-hover: var(--color-green-700);
  --color-icon-success-secondary-hover: var(--color-green-300);
  --color-icon-warning-primary: var(--color-yellow-600);
  --color-icon-warning-secondary: var(--color-yellow-400);
  --color-icon-warning-primary-hover: var(--color-yellow-700);
  --color-icon-warning-secondary-hover: var(--color-yellow-500);
  --color-icon-info-primary: var(--color-slate-600);
  --color-icon-info-secondary: var(--color-slate-400);
  --color-icon-info-primary-hover: var(--color-slate-700);
  --color-icon-info-secondary-hover: var(--color-slate-500);
  --color-icon-offer-primary: var(--color-green-600);
  --color-icon-offer-secondary: var(--color-green-400);
  --color-icon-offer-primary-hover: var(--color-green-700);
  --color-icon-offer-secondary-hover: var(--color-green-500);

/** === semantic: border === */
  --color-border-primary: var(--color-slate-300);
  --color-border-secondary: var(--color-slate-200);
  --color-border-tertiary: var(--color-slate-100);
  --color-border-primary-solid: var(--color-slate-900);
  --color-border-disabled: var(--color-slate-300);
  --color-border-disabled-alt: var(--color-slate-200);
  --color-border-error-primary: var(--color-red-500);
  --color-border-error-secondary: var(--color-red-300);
  --color-border-success-primary: var(--color-green-500);
  --color-border-success-secondary: var(--color-green-300);
  --color-border-warning-primary: var(--color-yellow-500);
  --color-border-warning-secondary: var(--color-yellow-300);
  --color-border-info-primary: var(--color-slate-500);
  --color-border-info-secondary: var(--color-slate-300);
  --color-border-offer-primary: var(--color-green-500);
  --color-border-offer-secondary: var(--color-green-300);
}

/** Typography tokens */

@font-face {
  font-family: 'Be The Best';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Bethebest-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Be The Best';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Bethebest-Semibold.woff2') format('woff2');
}

@font-face {
  font-family: 'Be The Best';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Bethebest-Bold.woff2') format('woff2');
}

:root, .dropin-design {
  --type-base-font-family: 'Be The Best', system-ui, sans-serif;

  --type-title-1-font: 400 7.2rem/8.8rem var(--type-base-font-family);

  --type-title-1-medium-font: 600 7.2rem/8.8rem var(--type-base-font-family);
  --type-title-1-strong-font: 700 7.2rem/8.8rem var(--type-base-font-family);
  --type-title-1-letter-spacing: -0.0111em;
  --type-title-2-font: 400 6.4rem/7.6rem var(--type-base-font-family);
  --type-title-2-medium-font: 600 6.4rem/7.6rem var(--type-base-font-family);
  --type-title-2-strong-font: 700 6.4rem/7.6rem var(--type-base-font-family);
  --type-title-2-letter-spacing: -0.0125em;

  --type-heading-1-font: 400 5.6rem/6.8rem var(--type-base-font-family);

  --type-heading-1-medium-font: 600 5.6rem/6.8rem var(--type-base-font-family);
  --type-heading-1-strong-font: 700 5.6rem/6.8rem var(--type-base-font-family);
  --type-heading-1-letter-spacing: -0.0089em;
  --type-heading-2-font: 400 4.8rem/5.8rem var(--type-base-font-family);
  --type-heading-2-medium-font: 600 4.8rem/5.8rem var(--type-base-font-family);
  --type-heading-2-strong-font: 700 4.8rem/5.8rem var(--type-base-font-family);
  --type-heading-2-letter-spacing: -0.0083em;
  --type-heading-3-font: 400 4rem/4.8rem var(--type-base-font-family);
  --type-heading-3-medium-font: 600 4rem/4.8rem var(--type-base-font-family);
  --type-heading-3-strong-font: 700 4rem/4.8rem var(--type-base-font-family);
  --type-heading-3-letter-spacing: -0.0075em;
  --type-heading-4-font: 400 3.2rem/3.8rem var(--type-base-font-family);
  --type-heading-4-medium-font: 600 3.2rem/3.8rem var(--type-base-font-family);
  --type-heading-4-strong-font: 700 3.2rem/3.8rem var(--type-base-font-family);
  --type-heading-4-letter-spacing: -0.0063em;
  --type-heading-5-font: 400 2.4rem/3rem var(--type-base-font-family);
  --type-heading-5-medium-font: 600 2.4rem/3rem var(--type-base-font-family);
  --type-heading-5-strong-font: 700 2.4rem/3rem var(--type-base-font-family);
  --type-heading-5-letter-spacing: -0.0063em;
  --type-heading-6-font: 400 2rem/2.4rem var(--type-base-font-family);
  --type-heading-6-medium-font: 600 2rem/2.4rem var(--type-base-font-family);
  --type-heading-6-strong-font: 700 2rem/2.4rem var(--type-base-font-family);
  --type-heading-6-letter-spacing: 0;

  --type-label-1-font: 400 1.6rem/2.2rem var(--type-base-font-family);
  --type-label-1-letter-spacing: -0.0113em;
  --type-label-2-font: 400 1.4rem/2rem var(--type-base-font-family);
  --type-label-2-letter-spacing: -0.0114em;
  --type-label-3-font: 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-label-3-letter-spacing: -0.01em;

  --type-body-1-font: 400 1.8rem/2.8rem var(--type-base-font-family);
  --type-body-1-medium-font: 600 1.8rem/2.8rem var(--type-base-font-family);
  --type-body-1-strong-font: 700 1.8rem/2.8rem var(--type-base-font-family);
  --type-body-1-letter-spacing: 0;
  --type-body-2-font: 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-2-medium-font: 600 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-2-strong-font: 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-2-letter-spacing: 0;
  --type-body-3-font: 400 1.4rem/2rem var(--type-base-font-family);
  --type-body-3-medium-font: 600 1.4rem/2rem var(--type-base-font-family);
  --type-body-3-strong-font: 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-3-letter-spacing: 0;

  --type-caption-1-font: 400 1.2rem/1.4rem var(--type-base-font-family);
  --type-caption-1-medium-font: 600 1.2rem/1.4rem var(--type-base-font-family);
  --type-caption-1-strong-font: 700 1.2rem/1.4rem var(--type-base-font-family);
  --type-caption-1-letter-spacing: 0;
  --type-caption-2-font: 400 1rem/1.2rem var(--type-base-font-family);
  --type-caption-2-medium-font: 600 1rem/1.2rem var(--type-base-font-family);
  --type-caption-2-strong-font: 700 1rem/1.2rem var(--type-base-font-family);
  --type-caption-2-letter-spacing: 0;
}


html {
  font-size: 62.5%;
}

body {
  font: var(--type-body-1-font);
  letter-spacing: var(--type-body-1-letter-spacing);
  color: var(--color-text-primary);
}

.first-letter-featured::first-letter,
h1::first-letter {
    font-feature-settings: "ss01"
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

h1 {
  font: var(--type-heading-1-strong-font);
  letter-spacing: var(--type-heading-1-letter-spacing);
}

h2 {
  font: var(--type-heading-2-strong-font);
  letter-spacing: var(--type-heading-2-letter-spacing);
}

h3 {
  font: var(--type-heading-3-strong-font);
  letter-spacing: var(--type-heading-3-letter-spacing);
}

h4 {
  font: var(--type-heading-4-strong-font);
  letter-spacing: var(--type-heading-4-letter-spacing);
}

h5 {
  font: var(--type-heading-5-strong-font);
  letter-spacing: var(--type-heading-5-letter-spacing);
}

h6 {
  font: var(--type-heading-6-strong-font);
  letter-spacing: var(--type-heading-6-letter-spacing);
}

.sr-only,
.section.sr-only * {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/** Spacing tokens */

:root {
  --spacing-zero: 0;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-base: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 28px;
  --spacing-xl2: 32px;
  --spacing-xl3: 40px;
  --spacing-xl4: 48px;
  --spacing-xl5: 60px;
  --spacing-xl6: 72px;
}

/** Border radius tokens */

:root {
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-5xl: 48px;
  --radius-full: 999px;
}

/** Shadow tokens */

:root {
  --shadow-xs: 1px 2px 2px 0px rgb(0 0 0 / 10%);
  --shadow-sm: 1px 1px 4px 0px rgb(0 0 0 / 15%);
  --shadow-md: 1px 1px 4px 3px rgb(0 0 0 / 10%);
  --shadow-lg: 1px 1px 10px 4px rgb(0 0 0 / 12%);
  --shadow-xl: 1px 1px 12px 6px rgb(0 0 0 / 25%);
}

/** Button styles */

@property --button-primary-gradient-start {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 11.3%;
}

@property --button-primary-gradient-end {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 85.62%;
}

p.button-wrapper {
  margin: var(--spacing-small) 0;
}

.button,
button.dropin-button,
a.dropin-button {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  gap: var(--spacing-xs);
  padding: 11px var(--spacing-lg);
  border-radius: var(--radius-full);
  font: var(--type-label-1-font);
  font-weight: 600;
  letter-spacing: var(--type-label-1-letter-spacing);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  isolation: isolate;
  backdrop-filter: blur(3px);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.button:hover,
button.dropin-button:hover,
a.dropin-button:hover {
    text-decoration: none;
}

.button:disabled,
.button[aria-disabled='true'],
button.dropin-button:disabled,
button.dropin-button[aria-disabled='true'],
button.dropin-button.dropin-button--disabled,
a.dropin-button[aria-disabled='true'],
a.dropin-button.dropin-button--disabled {
  background: #e0e0e0;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1;
}

.button.primary,
button.dropin-button.dropin-button--primary,
a.dropin-button.dropin-button--primary {
  --button-primary-gradient-start: 11.3%;
  --button-primary-gradient-end: 85.62%;

  border: 1px solid #18191a;
  color: var(--color-bw-black);
  padding-top: 10px;
  padding-bottom: 10px;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 40%) 100%),
    linear-gradient(98.88deg, rgb(255 140 0) var(--button-primary-gradient-start), rgb(255 209 87) var(--button-primary-gradient-end));
  transition:
    --button-primary-gradient-start 0.3s ease,
    --button-primary-gradient-end 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    opacity 0.3s ease;
}

.button.primary:hover,
.button.primary:focus-visible,
button.dropin-button.dropin-button--primary:hover,
button.dropin-button.dropin-button--primary:focus-visible,
a.dropin-button.dropin-button--primary:hover,
a.dropin-button.dropin-button--primary:focus-visible {
  --button-primary-gradient-start: 70%;
  --button-primary-gradient-end: 100%;

  box-shadow: none;
}

.button.secondary,
button.dropin-button.dropin-button--secondary,
a.dropin-button.dropin-button--secondary {
  border: 2px solid transparent;
  color: var(--color-bw-black);
  padding-top: 9px;
  padding-bottom: 9px;
  background:
    linear-gradient(#fdfdfd, #fdfdfd) padding-box,
    linear-gradient(135deg, #bd7c4e, #824323) border-box;
  box-shadow: none;
}

.button.secondary:hover,
.button.secondary:focus-visible,
button.dropin-button.dropin-button--secondary:hover,
button.dropin-button.dropin-button--secondary:focus-visible,
a.dropin-button.dropin-button--secondary:hover,
a.dropin-button.dropin-button--secondary:focus-visible {
  border-width: 4px;
  padding: 7px calc(var(--spacing-lg) - 2px);
  background:
    linear-gradient(#fdfdfd, #fdfdfd) padding-box,
    linear-gradient(135deg, #bd7c4e, #824323) border-box;
}

.button.secondary:disabled,
.button.secondary[aria-disabled='true'],
button.dropin-button.dropin-button--secondary:disabled,
button.dropin-button.dropin-button--secondary[aria-disabled='true'],
button.dropin-button.dropin-button--secondary.dropin-button--disabled,
a.dropin-button.dropin-button--secondary[aria-disabled='true'],
a.dropin-button.dropin-button--secondary.dropin-button--disabled {
  background: #e0e0e0;
  border-color: #ddd;
}

.button.tertiary,
.button.accent {
  border: none;
  background: var(--color-slate-50);
  color: var(--color-bw-black);
  box-shadow: var(--shadow-xl);

}

.button.tertiary:hover,
.button.tertiary:focus-visible,
.button.accent:hover,
.button.accent:focus-visible {
  background: var(--color-slate-50);
  box-shadow: none;
}

.button.tertiary:disabled,
.button.tertiary[aria-disabled='true'],
.button.accent:disabled,
.button.accent[aria-disabled='true'] {
  box-shadow: none;
}

button.dropin-button--tertiary,
a.dropin-button--tertiary {
    text-decoration: underline;
    text-underline-position: under;
    border-radius: 0;
}

:root,
.dropin-design {
    --input-height: 48px;
    --input-border-width: var(--shape-border-width-1);
    --input-border-width-active: var(--shape-border-width-1);
    --input-padding-x: var(--spacing-small);
    --input-padding-y: 11px;
    --input-padding-x-active: var(--input-padding-x);
    --input-padding-y-active: var(--input-padding-y);
    --icon-size: var(--spacing-small);
    --input-icon-space: calc(var(--icon-size) + (var(--spacing-small) * 2));
    --input-password-icon-space: calc(24px + var(--icon-size) + (var(--spacing-small) * 3));
}

.dropin-input,
.dropin-picker__select,
.dropin-picker select {
    box-sizing: border-box;
    height: var(--input-height);
    min-height: var(--input-height);
    padding: var(--input-padding-y) var(--input-padding-x);
    border: var(--input-border-width) solid var(--color-slate-600);
    border-radius: var(--shape-border-radius-1);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font: var(--type-body-2-font);
    letter-spacing: var(--type-body-2-letter-spacing);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        border-width 0.2s ease,
        padding 0.2s ease;
}

.dropin-input:where(:not(:disabled, .dropin-input--disabled, .dropin-input--error, .dropin-input--success)):hover {
    padding: var(--input-padding-y-active) var(--input-padding-x-active);
    border-width: var(--input-border-width-active);
    border-color: var(--color-slate-800);
    background-color: var(--color-bg-primary-hover);
    box-shadow: 0 0 0 var(--input-border-width) var(--color-slate-800);
}

.dropin-input:focus,
.dropin-input--floating:focus {
    padding: var(--input-padding-y-active) var(--input-padding-x-active);
    border-width: var(--input-border-width-active);
    border-color: var(--color-slate-600);
    background-color: var(--color-bg-primary);
    box-shadow: 0 0 0 var(--input-border-width) var(--color-slate-800), 0 0 0 3px var(--color-bg-primary), 0 0 0 5px var(--color-icon-warning-secondary);
    outline: none;
}

.dropin-input--floating:not(:placeholder-shown) {
    padding: var(--input-padding-y-active) var(--input-padding-x-active);
}

.dropin-input--icon-left {
    padding-left: var(--input-icon-space);
}

.dropin-input--icon-right {
    padding-right: var(--input-icon-space);
}

.dropin-input-password .dropin-input {
    padding-right: var(--input-password-icon-space);
}

.dropin-input--icon-left:where(:not(:disabled, .dropin-input--disabled, .dropin-input--error, .dropin-input--success)):hover,
.dropin-input--icon-left:focus,
.dropin-input--icon-left.dropin-input--floating:not(:placeholder-shown) {
    padding-left: var(--input-icon-space);
}

.dropin-input--icon-right:where(:not(:disabled, .dropin-input--disabled, .dropin-input--error, .dropin-input--success)):hover,
.dropin-input--icon-right:focus,
.dropin-input--icon-right.dropin-input--floating:not(:placeholder-shown) {
    padding-right: var(--input-icon-space);
}

.dropin-input-password .dropin-input:where(:not(:disabled, .dropin-input--disabled, .dropin-input--error, .dropin-input--success)):hover,
.dropin-input-password .dropin-input:focus,
.dropin-input-password .dropin-input.dropin-input--floating:not(:placeholder-shown) {
    padding-right: var(--input-password-icon-space);
}

.dropin-input__field-icon--left {
    left: var(--spacing-small);
    bottom: 12px;
}

.dropin-input__field-icon--right {
    right: var(--spacing-small);
}

.dropin-input-password .dropin-input-password__eye-icon {
    top: 40px;
    right: var(--spacing-small);
    margin: 0;
}

.dropin-input-password--error .dropin-input-password__eye-icon {
    right: var(--spacing-small);
}

.dropin-input-container--floating .dropin-input-label-container {
    flex-direction: column-reverse;
}

.dropin-input-container--floating .dropin-input__label--floating {
    position: static;
    margin-bottom: 8px;
    transform: none;
    padding-left: 0;
    color: var(--color-text-primary);
    font: var(--type-label-1-font);
    letter-spacing: var(--type-label-1-letter-spacing);
    pointer-events: auto;
    transition: none;
}

.dropin-input--floating:-webkit-autofill~.dropin-input__label--floating,
.dropin-input--floating:not(:placeholder-shown)~.dropin-input__label--floating,
.dropin-input-container--floating:focus-within .dropin-input__label--floating {
    transform: none;
    color: var(--color-text-primary);
    font: var(--type-label-1-font);
    letter-spacing: var(--type-label-1-letter-spacing);
}

.dropin-input__label--floating--error {
    color: var(--color-text-error-primary);
}

.dropin-input__field-icon--error {
    display: none;
}

.dropin-picker {
    align-items: stretch;
    gap: 0;
    background-color: transparent;
}

.dropin-picker__select,
.dropin-picker select {
    padding-right: var(--spacing-xxbig);
}

.dropin-picker__medium.dropin-picker__floating select,
.dropin-picker__medium.dropin-picker__floating.dropin-picker__selected select {
    padding: var(--input-padding-y) var(--input-padding-x);
}

.dropin-picker__select:focus {
    outline: none;
    border-color: var(--color-slate-600);
    box-shadow: 0 0 0 var(--input-border-width) var(--color-slate-800), 0 0 0 3px var(--color-bg-primary), 0 0 0 5px var(--color-icon-warning-secondary);
}

.dropin-picker__disabled select.dropin-picker__select {
    border-color: var(--color-border-disabled);
    background-color: var(--color-bg-disabled-alt);
    color: var(--color-text-disabled);
}

.dropin-picker__external-label {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-primary);
    font: var(--type-label-1-font);
    letter-spacing: var(--type-label-1-letter-spacing);
}

.dropin-picker__chevronDown {
    top: 50%;
    height: inherit;
    width: inherit;
    color: var(--color-text-primary);
    transform: translateY(-50%);
}

.dropin-picker__error .dropin-picker__chevronDown {
    color: var(--color-text-error-primary);
}

.dropin-field__hint--error {
    display: flex;
    gap: var(--spacing-xxsmall);
    align-items: flex-start;
    color: var(--color-text-error-primary);
    font: var(--type-body-3-font);
    letter-spacing: var(--type-body-3-letter-spacing);
}

.dropin-field__hint--error::before {
    content: '';
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin-top: 4px;
    background-color: currentcolor;
    mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3419 10.6667H0.658073C0.158607 10.6667 -0.15826 10.1503 0.0818734 9.72781L5.4238 0.32915C5.67327 -0.109717 6.32673 -0.109717 6.5762 0.32915L11.9181 9.72781C12.1583 10.1503 11.8414 10.6667 11.3419 10.6667ZM0.654873 10.0343H11.3451L6 0.630683L0.654873 10.0343ZM6.33333 3.33335H5.66667V7.33334H6.33333V3.33335ZM6.33333 8.00001H5.66667V9.33334H6.33333V8.00001Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dropin-input--error,
.dropin-input-container--primary .dropin-input--error {
    padding: var(--input-padding-y) var(--input-padding-x);
    border: var(--input-border-width) solid var(--color-border-error-primary);
}

.dropin-input--error:focus,
:where(.dropin-input-container--primary) .dropin-input--error:focus {
    box-shadow: 0 0 0 var(--input-border-width) var(--color-border-error-primary), 0 0 0 3px var(--color-bg-primary), 0 0 0 5px var(--color-icon-warning-secondary);
}

.dropin-input--icon-left.dropin-input--error {
    padding-left: var(--input-icon-space);
}

.dropin-input--icon-right.dropin-input--error {
    padding-right: var(--input-icon-space);
}

.dropin-input-password .dropin-input--error {
    padding-right: var(--input-password-icon-space);
}

.dropin-input--error:hover,
:where(.dropin-input-container--primary) .dropin-input--error:hover {
    padding: var(--input-padding-y-active) var(--input-padding-x-active);
    border-width: var(--input-border-width-active);
    box-shadow: 0 0 0 var(--input-border-width) var(--color-border-error-primary);
}

.dropin-field__hint {
    --input-helper-font: 400 1.2rem/1.8rem var(--type-base-font-family);
    --input-helper-letter-spacing: 0;

    font: var(--input-helper-font);
    letter-spacing: var(--input-helper-letter-spacing);
}

.dropin-input--error:hover:focus,
:where(.dropin-input-container--primary) .dropin-input--error:hover:focus {
    box-shadow:
        0 0 0 var(--input-border-width) var(--color-border-error-primary),
        0 0 0 3px var(--color-bg-primary),
        0 0 0 5px var(--color-icon-warning-secondary);
}

.dropin-input--icon-left.dropin-input--error:hover {
    padding-left: var(--input-icon-space);
}

.dropin-input--icon-right.dropin-input--error:hover {
    padding-right: var(--input-icon-space);
    padding-left: calc(var(--input-icon-space) - var(--shape-border-width-1));
}

.dropin-input-password .dropin-input--error:hover {
    padding-right: var(--input-password-icon-space);
}

.dropin-input--success,
.dropin-input-container--primary .dropin-input--success {
    padding: var(--input-padding-y-active) var(--input-padding-x-active);
    border: var(--input-border-width-active) solid var(--color-border-success-primary);
    background-color: var(--color-bg-primary);
}

.dropin-input--icon-left.dropin-input--success {
    padding-left: var(--input-icon-space);
}

.dropin-input--icon-right.dropin-input--success {
    padding-right: var(--input-icon-space);
}

.dropin-input-password .dropin-input--success {
  padding-right: var(--input-password-icon-space);
}

:where(.dropin-input:disabled, .dropin-input--disabled, div.dropin-input-container--primary .dropin-input--disabled) {
    border-color: var(--color-border-disabled);
    background-color: var(--color-bg-disabled-alt);
    color: var(--color-text-disabled);
}

.dropin-input--floating::placeholder {
    opacity: 1;
    transition: none;
}

.dropin-input--medium.dropin-input--floating:focus,
.dropin-input--medium.dropin-input--floating:not(:placeholder-shown) {
    padding-top: var(--input-padding-y);
}

.dropin-checkbox {
    --checkbox-size: 18px;
    --checkbox-border-width: 1px;
    --checkbox-border-width-active: 2px;
    --checkbox-border-color: var(--color-slate-600);
    --checkbox-border-color-focus: var(--color-text-primary);
    --checkbox-border-color-checked-hover: #5999ff;
    --checkbox-bg: var(--color-bg-primary);
    --checkbox-bg-hover: var(--color-bg-secondary-hover);
    --checkbox-bg-checked: var(--color-text-primary);
    --checkbox-bg-checked-hover: var(--color-bg-black-solid-hover);
    --checkbox-bg-disabled: var(--color-slate-200);
    --checkbox-bg-checked-disabled: var(--color-border-disabled);
    --checkbox-text-color: var(--color-text-primary);
    --checkbox-text-color-disabled: var(--color-text-disabled);

    align-items: flex-start;
    grid-template-columns: var(--checkbox-size) auto;
    gap: 0 var(--spacing-xsmall);
}

.dropin-checkbox__checkbox-icon {
    align-items: flex-start;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
}

.dropin-checkbox__box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    border-radius: var(--shape-border-radius-1);
    background: var(--checkbox-bg);
    color: var(--color-bg-primary);
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        border-width 0.2s ease;
}

.dropin-checkbox__box:hover {
    border: var(--checkbox-border-width) solid var(--checkbox-border-color);
    background: var(--checkbox-bg-hover);
}

.dropin-checkbox__box:focus-visible {
    border: var(--checkbox-border-width-active) solid var(--checkbox-border-color-focus);
    background: var(--color-bg-primary);
    outline: none;
}

.dropin-checkbox--disabled .dropin-checkbox__box,
.dropin-checkbox__box--disabled {
    border-color: var(--checkbox-bg-checked-disabled);
    background: var(--checkbox-bg-disabled);
    cursor: not-allowed;
}

.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box {
    border: var(--checkbox-border-width) solid var(--checkbox-bg-checked);
    background: var(--checkbox-bg-checked);
}

.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box:hover {
    border: var(--checkbox-border-width) solid var(--checkbox-bg-checked-hover);
    background: var(--checkbox-bg-checked-hover);
    box-shadow: 0 0 0 var(--checkbox-border-width-active) var(--checkbox-border-color-checked-hover);
}

.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box:focus-visible {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width-active) solid var(--checkbox-border-color-focus);
    background: var(--checkbox-bg-checked);
    outline: none;
}

.dropin-checkbox__checkmark {
    display: block;
    flex: 0 0 16px;
    position: static;
    width: 16px;
    height: 16px;
    border-radius: 0;
    color: var(--color-bg-primary);
    background: transparent;
}

.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box .dropin-checkbox__checkmark,
.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box .dropin-checkbox__checkmark:hover,
.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box:focus-visible .dropin-checkbox__checkmark {
    position: static;
    top: auto;
    color: var(--color-bg-primary);
    background: transparent;
    transform: none;
}

.dropin-checkbox__label,
.dropin-checkbox__label--medium {
    padding-left: 0;
    color: var(--checkbox-text-color);
    font: var(--type-body-3-font);
    letter-spacing: var(--type-body-3-letter-spacing);
    text-align: left;
}

.dropin-checkbox__description,
.dropin-checkbox__description--medium {
    grid-column: 2;
    color: var(--color-text-secondary);
    font: var(--type-body-3-font);
    letter-spacing: var(--type-body-3-letter-spacing);
}

.dropin-checkbox__checkbox:checked + .dropin-checkbox__checkbox-icon .dropin-checkbox__box--disabled {
    border-color: var(--checkbox-bg-checked-disabled);
    background: var(--checkbox-bg-checked-disabled);
}

.dropin-checkbox__label--disabled,
.dropin-checkbox__description--disabled {
    color: var(--checkbox-text-color-disabled);
}

/* stylelint-enable comment-empty-line-before, custom-property-empty-line-before, no-descending-specificity, no-duplicate-selectors */