/*md

# Icons

List of all icons is [here](./iconsvfc.html)

Please see [icons](./styles-mixins-doc-_icons.html) documentation for details.

*/
/*md
@no-stat

# Icons variables

This is auto generated file. Please do not edit this file `_icons.scss`.

List of all icons is [here](./iconsvfc.html)

Please see [icons](./styles-mixins-doc-_icons.html) documentation for details.

*/
:root {
  /* -------------------- Colors -------------------- */
  /* Neutrals */
  --color-neutrals-0: #ffffff;
  --color-neutrals-25: #f7f7f7;
  --color-neutrals-50: #e0e0e0;
  --color-neutrals-100: #c9c9c9;
  --color-neutrals-200: #b2b2b2;
  --color-neutrals-300: #9b9b9b;
  --color-neutrals-400: #848484;
  --color-neutrals-500: #6d6d6d;
  --color-neutrals-600: #565656;
  --color-neutrals-700: #3f3f3f;
  --color-neutrals-800: #282828;
  --color-neutrals-900: #111111;
  --color-neutrals-1000: #000000;
  /* Error, Warnings, Success */
  --color-red-100: #fef3f2;
  --color-red-200: #f04438;
  --color-red-300: #d92d20;
  --color-red-400: #b42318;
  --color-orange-100: #fffaeb;
  --color-orange-200: #f79009;
  --color-orange-300: #dc6803;
  --color-orange-400: #b54708;
  --color-green-100: #d1fadf;
  --color-green-200: #32d583;
  --color-green-300: #12b76a;
  --color-green-400: #008247;
  /* Napapijri specific */
  --color-primary-essential-100: #ffffff;
  --color-primary-essential-200: #e2e2e2;
  --color-primary-essential-300: #cdcdcd;
  --color-primary-essential-400: #000000;
  --color-primary-napaorange-100: #fff0ea;
  --color-primary-napaorange-200: #ff9c6e;
  --color-primary-napaorange-300: #ff6c2c;
  --color-primary-napaorange-400: #f05c1c;
  --color-primary-napaorange-500: #bc4a1a;
  --color-accent-stonebeige-100: #fbfaf8;
  --color-accent-stonebeige-200: #ede8da;
  /* Typography Colors */
  --typography-color-default: var(--color-neutrals-1000);
  --typography-color-default-inverse: var(--color-neutrals-0);
  --typography-color-secondary: var(--color-neutrals-600);
  --typography-color-secondary-inverse: var(--color-neutrals-200);
  --typography-color-brand: var(--color-neutrals-1000);
  --typography-color-brand-inverse: var(--color-neutrals-0);
  --typography-color-links: var(--color-primary-napaorange-500);
  --typography-color-links-inverse: var(--color-primary-napaorange-300);
  --typography-color-hover-active: var(--color-primary-napaorange-500);
  --typography-color-hover-active-inverse: var(--color-primary-napaorange-300);
  --typography-color-disabled: var(--color-neutrals-400);
  --typography-color-disabled-inverse: var(--color-neutrals-500);
  --typography-color-error: var(--color-red-400);
  --typography-color-error-inverse: var(--color-neutrals-200);
  --typography-color-sale: var(--color-primary-napaorange-500);
  --typography-color-sale-inverse: var(--color-primary-napaorange-300);
  --typography-color-success: var(--color-green-400);
  --typography-color-success-inverse: var(--color-green-300);
  --typography-color-warning: var(--color-orange-400);
  --typography-color-warning-inverse: var(--color-orange-200);
  /* -------------------- Grids & Spacing -------------------- */
  /* Spacing */
  --spacing-none: 0px;
  --spacing-25: 2px;
  --spacing-50: 4px;
  --spacing-100: 6px;
  --spacing-200: 8px;
  --spacing-250: 10px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-450: 18px;
  --spacing-500: 20px;
  --spacing-600: 24px;
  --spacing-650: 28px;
  --spacing-700: 32px;
  --spacing-800: 40px;
  --spacing-850: 44px;
  --spacing-900: 48px;
  --spacing-925: 52px;
  --spacing-950: 56px;
  --spacing-1000: 64px;
  --spacing-1050: 72px;
  --spacing-1100: 80px;
  --spacing-1200: 96px;
  --spacing-1300: 128px;
  /* Mobile */
  --screens-mobile-width: 375px;
  --screens-mobile-height: 812px;
  --screens-mobile-gutter: var(--spacing-400);
  --screens-mobile-margin: var(--spacing-400);
  --screens-mobile-page-top: var(--spacing-600);
  --screens-mobile-page-bottom: var(--spacing-800);
  --screens-mobile-content-bottom: var(--spacing-800);
  /* Tablet */
  --screens-tablet-width: 768px;
  --screens-tablet-height: 1024px;
  --screens-tablet-gutter: var(--spacing-400);
  --screens-tablet-margin: var(--spacing-400);
  --screens-tablet-page-top: var(--spacing-800);
  --screens-tablet-page-bottom: var(--spacing-800);
  --screens-tablet-content-bottom: var(--spacing-800);
  /* Laptop */
  --screens-laptop-width: 1024px;
  --screens-laptop-height: 768px;
  --screens-laptop-gutter: var(--spacing-400);
  --screens-laptop-margin: var(--spacing-400);
  --screens-laptop-page-top: var(--spacing-800);
  --screens-tablet-page-bottom: var(--spacing-1000);
  --screens-laptop-content-bottom: var(--spacing-1000);
  /* Desktop */
  --screens-desktop-width: 1440px;
  --screens-desktop-height: 720px;
  --screens-desktop-gutter: var(--spacing-400);
  --screens-desktop-margin: var(--spacing-400);
  --screens-desktop-page-top: var(--spacing-800);
  --screens-tablet-page-bottom: var(--spacing-1100);
  --screens-desktop-content-bottom: var(--spacing-1100);
  /* -------------------- Shadows & Blurs -------------------- */
  --overlay: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
  --top-shadow: 0px -4px 10px 0px rgba(0, 0, 0, 0.08);
  --bottom-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.08);
  --left-shadow: -4px 0px 10px 0px rgba(0, 0, 0, 0.08);
  --right-shadow: 4px 0px 10px 0px rgba(0, 0, 0, 0.08);
  --background-blur: blur(4px);
  /* -------------------- Borders & Radius -------------------- */
  --borders-radius-none: 0px;
  --borders-radius-50: 2px;
  --borders-radius-default: var(--borders-radius-none);
  --borders-radius-secondary: var(--borders-radius-50);
  --borders-radius-full: 9999px;
  --borders-width-none: 0px;
  --borders-width-25: 0.6600000262260437px;
  --borders-width-50: 1px;
  --borders-width-100: 2px;
  --border-none: var(--borders-width-none);
  --border-decorative: var(--borders-width-25);
  --border-standard: var(--borders-width-50);
  --border-focus: var(--borders-width-100);
  --border-color-white: var(--color-neutrals-0);
  --border-color-light: var(--color-neutrals-100);
  --border-color-medium: var(--color-neutrals-400);
  --border-color-dark: var(--color-neutrals-700);
  --border-color-black: var(--color-neutrals-1000);
  --border-color-brand: var(--color-primary-napaorange-400);
  --border-color-brand-inverse: var(--color-primary-napaorange-300);
  --border-color-error: var(--color-red-400);
  --border-color-error-inverse: var(--color-red-200);
  --border-color-disabled: var(--color-neutrals-300);
  --border-color-disabled-inverse: var(--color-neutrals-600);
  /* -------------------- Dividers -------------------- */
  --ui-elements-dividers-primary: var(--borders-color-black);
  --ui-elements-dividers-secondary: var(--borders-color-medium);
  --ui-elements-dividers-dark: var(--borders-color-black);
  --ui-elements-dividers-inverse: var(--borders-color-white);
  /* -------------------- Design UI -------------------- */
  /* Global */
  --page-default: var(--color-primary-essential-100);
  /* Accordions */
  --accordion-padding: var(--spacing-400);
  --accordion-default-divider: var(--ui-elements-dividers-dark);
  /* Buttons */
  --buttons-background-primary: var(--color-primary-essential-400);
  --buttons-background-appearance-primary: 100%;
  --buttons-background-primary-hover: var(--color-neutrals-800);
  --buttons-background-appearance-primary-hover: 100%;
  --buttons-border-primary: var(--color-primary-essential-400);
  --buttons-border-primary-hover: var(--color-neutrals-800);
  --buttons-background-primary-inverse: var(--color-primary-essential-100);
  --buttons-background-appearance-primary-inverse: 100%;
  --buttons-background-primary-inverse-hover: var(--color-primary-essential-100);
  --buttons-background-appearance-primary-inverse-hover: 80%;
  --buttons-border-primary-inverse: var(--color-primary-essential-100);
  --buttons-border-primary-inverse-hover: var(--color-primary-essential-100);
  --buttons-background-secondary: var(--color-primary-essential-100);
  --buttons-background-appearance-secondary: 55%;
  --buttons-background-secondary-hover: var(--color-primary-essential-100);
  --buttons-background-appearance-secondary-hover: 80%;
  --buttons-border-secondary: var(--color-primary-essential-400);
  --buttons-border-secondary-hover: var(--color-primary-essential-400);
  --buttons-background-secondary-inverse: var(--color-primary-essential-100);
  --buttons-background-appearance-secondary-inverse: 55%;
  --buttons-background-secondary-inverse-hover: var(--color-primary-essential-100);
  --buttons-background-appearance-secondary-inverse-hover: 80%;
  --buttons-border-secondary-inverse: var(--color-primary-essential-100);
  --buttons-border-secondary-inverse-hover: var(--color-primary-essential-100);
  --buttons-background-tertiary: var(--color-primary-napaorange-100);
  --buttons-background-appearance-tertiary: 55%;
  --buttons-background-tertiary-hover: var(--color-primary-napaorange-100);
  --buttons-background-appearance-tertiary-hover: 80%;
  --buttons-border-tertiary: var(--color-primary-napaorange-400);
  --buttons-border-tertiary-hover: var(--color-primary-napaorange-400);
  --buttons-background-disabled: var(--color-neutrals-200);
  --buttons-border-radius: var(--borders-radius-default);
  --buttons-border-stroke-default: var(--borders-width-50);
  --buttons-border-stroke-hover: var(--borders-width-100);
  --buttons-mobile-padding-vertical: var(--spacing-200);
  --buttons-mobile-padding-horizontal: var(--spacing-600);
  --buttons-desktop-padding-vertical: var(--spacing-300);
  --buttons-desktop-padding-horizontal: var(--spacing-700);
  --buttons-tiny-padding-vertical: var(--spacing-250);
  --buttons-tiny-padding-horizontal: var(--spacing-200);
  /* Icons */
  --icons-default: var(--typography-color-default);
  --icons-default-inverse: var(--typography-color-default-inverse);
  --icons-secondary: var(--typography-color-secondary);
  --icons-secondary-inverse: var(--typography-color-secondary-inverse);
  --icons-brand: var(--typography-color-brand);
  --icons-brand-inverse: var(--typography-color-brand-inverse);
  --icons-hover: var(--typography-color-hover-active);
  --icons-hover-inverse: var(--typography-color-hover-active-inverse);
  --icons-disabled: var(--typography-color-disabled);
  --icons-disabled-inverse: var(--typography-color-disabled-inverse);
  --icons-sale: var(--typography-color-sale);
  --icons-sale-inverse: var(--typography-color-sale-inverse);
  --icons-success: var(--typography-color-success);
  --icons-success-inverse: var(--typography-color-success-inverse);
  --icons-warning: var(--color-orange-300);
  --icons-warning-inverse: var(--typography-color-warning-inverse);
  /* UI Elements */
  --ui-elements-container: var(--color-primary-essential-200);
  --ui-elements-light: var(--color-neutrals-0);
  --ui-elements-dark: var(--color-neutrals-900);
  --ui-elements-brand: var(--color-primary-essential-400);
  --ui-elements-indicator-border-radius: var(--borders-radius-default);
  --ui-elements-bar-border-radius: var(--borders-radius-default);
  --ui-elements-bar-height: var(--spacing-25);
  --ui-elements-handle-border-radius: var(--borders-radius-secondary);
  --ui-elements-handle-size: var(--spacing-500);
  --ui-elements-scrollbar-height: var(--spacing-25);
  --ui-elements-arrows-radius: var(--borders-radius-secondary);
  --ui-elements-forms-border-radius: var(--borders-radius-default);
  --ui-elements-forms-border-default: var(--borders-width-standard);
  --ui-elements-forms-border-focus: var(--borders-width-standard);
  --ui-elements-forms-color-default: var(--borders-color-medium);
  --ui-elements-forms-color-default-inverse: var(--borders-color-medium);
  --ui-elements-forms-color-focus: var(--borders-color-brand);
  --ui-elements-forms-color-focus-inverse: var(--borders-color-brand-inverse);
  --ui-elements-forms-color-error-inverse: var(--borders-color-error-inverse);
  --ui-elements-forms-color-error: var(--borders-color-error);
  --ui-elements-forms-color-disabled: var(--borders-color-disabled);
  --ui-elements-forms-color-disabled-inverse: var(--borders-color-disabled-inverse);
  --ui-elements-forms-input-gap: var(--spacing-400);
  --ui-elements-forms-form-submission: var(--spacing-600);
  --ui-elements-navigation-promo-bar-brand: var(--color-primary-essential-400);
  --ui-elements-navigation-promo-bar-brand-cta: var(--typography-color-inverse);
  --ui-elements-navigation-promo-bar-dark: var(--color-primary-napaorange-500);
  --ui-elements-navigation-promo-bar-dark-cta: var(--typography-color-inverse);
  --ui-elements-navigation-promo-bar-light: var(--color-primary-essential-100);
  --ui-elements-navigation-promo-bar-light-cta: var(--typography-color-default);
  --ui-elements-breadcrumbs-default: var(--typography-color-secondary);
  --ui-elements-breadcrumbs-active: var(--typography-color-default);
  --ui-elements-navigation-header-mobile-border-width: var(--border-decorative);
  --ui-elements-navigation-header-mobile-border: var(--border-color-white);
  --ui-elements-navigation-header-mobile-background: var(--color-neutrals-0);
  --ui-elements-navigation-header-mobile-icons: var(--icons-default);
  --ui-elements-navigation-header-desktop-border-width: var(--border-decorative);
  --ui-elements-navigation-header-desktop-border: var(--border-color-white);
  --ui-elements-navigation-header-desktop-background: var(--color-neutrals-0);
  --ui-elements-navigation-header-desktop-focus: var(--color-primary-napaorange-100);
  --ui-elements-navigation-header-desktop-textlink: var(--typography-color-default);
  --ui-elements-navigation-header-desktop-textlink-hover: var(--typeography-color-hover-active);
  --ui-elements-navigation-mega-menu-highlight: var(--color-primary-napaorange-100);
  --ui-elements-chips-default: var(--color-primary-napaorange-100);
  --ui-elements-chips-hover: var(--color-primary-essential-300);
  --ui-elements-filter-default: var(--color-neutrals-25);
  --ui-elements-filter-hover: var(--color-neutrals-50);
  --ui-elements-filter-border: var(--borders-width-decorative);
  --ui-elements-notifications-promo-callout-default: var(--color-primary-essential-400);
  --ui-elements-notifications-promo-callout-default-cta: var(--typography-color-default-inverse);
  --ui-elements-notifications-promo-callout-neutral: var(--color-primary-essential-200);
  --ui-elements-notifications-promo-callout-neutral-cta: var(--typography-color-default);
  --ui-elements-notifications-promo-callout-accent: var(--color-primary-napaorange-100);
  --ui-elements-notifications-promo-callout-accent-cta: var(--typography-color-sale);
  --ui-elements-notifications-notifications-default: var(--color-neutrals-0);
  --ui-elements-notifications-notifications-error: var(--color-red-100);
  --ui-elements-notifications-notifications-warning: var(--color-orange-100);
  --ui-elements-notifications-notifications-success: var(--color-green-100);
  --ui-elements-overlays-background: var(--color-neutrals-0);
  --ui-elements-overlays-default: var(--color-neutrals-0);
  --ui-elements-overlays-optional-border: var(--borders-width-decorative);
  --ui-elements-overlays-overlay-padding: var(--spacing-700);
  --ui-elements-overlays-essentials-scrim-appearance: 40%;
  --ui-elements-overlays-mobile-close-color: var(--color-primary-essential-400);
  --ui-elements-overlays-mobile-close-icon: var(--icons-default-inverse);
  --ui-elements-overlays-mobile-close-radius: var(--borders-radius-secondary);
  --ui-elements-overlays-tooltip-border-width: var(--border-decorative);
  --ui-elements-overlays-tooltip-border-color: var(--border-color-black);
  --ui-elements-overlays-tooltip-padding: var(--spacing-300);
  --ui-elements-overlays-quickshop-padding-scroll: var(--spacing-25);
  --ui-elements-overlays-quickshop-padding-desktop-heading-gap: var(--spacing-400);
  --ui-elements-overlays-quickshop-padding-desktop-info-gap: var(--spacing-50);
  --ui-elements-overlays-quickshop-padding-mobile-heading-gap: var(--spacing-300);
  --ui-elements-overlays-quickshop-padding-desktop-content-gap: var(--spacing-700);
  --ui-elements-overlays-quickshop-padding-mobile-content-gap: var(--spacing-300);
  /* -------------------- Messy Overwrites for Style Guide -------------------- */
  --borders-color-light: var(--border-color-light);
  --borders-color-medium: var(--border-color-medium);
  --borders-color-dark: var(--border-color-dark);
  --borders-color-black: var(--border-color-black);
  --borders-color-brand: var(--border-color-brand);
  --borders-width-decorative: var(--borders-width-25);
  --borders-width-standard: var(--borders-width-50);
  --borders-width-focus: var(--borders-width-100);
  --typography-color-error-sale: var(--typography-color-sale);
  --typography-color-error-sale-inverse: var(--typography-color-sale-inverse);
  --typography-color-inverse: var(--typography-color-default-inverse);
  --schemes-neutral-200: var(--color-accent-stonebeige-100);
  --schemes-accent-50: var(--color-primary-napaorange-200);
  --schemes-accent-100: var(--color-primary-napaorange-500);
  --borders-color-brand-inverse: var(--border-color-brand-inverse);
  --borders-color-error: var(--border-color-error);
  --borders-color-error-inverse: var(--border-color-error-inverse);
  --borders-color-disabled: var(--border-color-disabled);
  --borders-color-disabled-inverse: var(--border-color-disabled-inverse);
  --borders-radius-large: var(--borders-radius-secondary);
  --components-accordions-content-gap: var(--accordion-padding);
  --spacing-elements-group-gap-interactive: var(--spacing-200);
  --color-primary-warmgray-100: #f9f9f8;
  --color-primary-warmgray-200: #f0efed;
  --color-primary-warmgray-300: #c6c6c4;
  --color-primary-warmgray-400: #838382;
  --color-primary-warmgray-500: #4c4c4c;
  --color-accent-brownishpurple-100: #bba5aa;
  --color-accent-brownishpurple-400: var(--color-primary-napaorange-400);
  --color-accent-burntsienna-200: #eabdaa;
  --color-primary-dirtyblue-200: var(--color-primary-napaorange-100);
  --color-primary-dirtyblue-400: var(--color-neutrals-1000);
  --color-primary-dirtyblue-600: var(--color-neutrals-1000);
  --ui-elements-navigation-promo-bar-dark: #000000;
  --ui-elements-controls-brand: #000000;
  --ui-elements-forms-focus: #000000;
  --buttons-secondary-background: transparent;
  --buttons-tertiary-background: rgba(255, 240, 234, 0.55);
  --buttons-tertiary-border: var(--color-primary-napaorange-100);
  --ui-elements-badges-400: var(--color-primary-napaorange-200);
  --ui-elements-controls-container: var(--ui-elements-container);
  --ui-elements-controls-light: var(--ui-elements-light);
  --ui-elements-controls-dark: var(--ui-elements-dark);
  --ui-elements-controls-brand: var(--ui-elements-brand);
  --ui-elements-forms-default: var(--ui-elements-forms-color-default);
  --ui-elements-forms-default-inverse: var(--ui-elements-forms-color-default-inverse);
  --ui-elements-forms-focus: var(--ui-elements-forms-color-focus);
  --ui-elements-forms-focus-inverse: var(--ui-elements-forms-color-focus-inverse);
  --ui-elements-forms-error: var(--ui-elements-forms-color-error);
  --ui-elements-forms-error-inverse: var(--ui-elements-forms-color-error-inverse);
  --ui-elements-forms-disabled: var(--ui-elements-forms-color-disabled);
  --ui-elements-forms-disabled-inverse: var(--ui-elements-forms-color-disabled-inverse);
}

/* ---------------------------- */
/* ----------- ally ----------- */
/* ---------------------------- */
[data-whatintent=mouse] *,
[data-whatintent=touch] * {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.sr-only {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-to-content-link {
  position: fixed;
  top: var(--spacing-600);
  left: var(--spacing-600);
  z-index: 20;
  background-color: var(--color-neutrals-0);
  padding: var(--spacing-200);
  border: 1px solid var(--borders-color-dark);
  box-shadow: var(--overlay);
}
.skip-to-content-link:not(:focus) {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ---------------------------- */
/* ----------- base ----------- */
/* ---------------------------- */
body,
html {
  min-height: 100vh;
}

body {
  background-color: var(--page-default);
  overflow-x: clip;
}

button {
  cursor: pointer;
}

/* css reset */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

/* reset buttons on safari which have a native blue color */
button {
  color: inherit;
}

/* templates used in webcomponent workaround, alternative to <template> */
.template {
  display: none !important;
}

/* Standard container */
.container {
  margin: 0 auto;
  padding: 0 16px;
}

/* 11. extensions */
div[data-lastpass-icon-root],
com-1password-button {
  display: none !important;
}

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}
.container--small {
  max-width: 1280px;
  padding: 0 var(--spacing-400);
}

.hidden {
  display: none !important;
}

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

/*md

# Buttons

## Button types

```html_example
<!--
Classes:
.button--secondary - Secondary
.button--tertiary - Tertiary
.button--tiny - Tiny
-->
<button type="submit" class="button [modifier class]">
    Primary
</button>
```

## Primary button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="button [modifier class]">
    Primary
</button>
```

## Secondary button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="button button--secondary [modifier class]">
    Secondary
</button>
```

## Tertiary button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="button button--tertiary [modifier class]">
    Secondary
</button>
```

## Tiny button

```html_example
<!--
Classes:
:disabled - Disabled
:hover - Hover
:active - Active
:focus - Focus
-->
<button type="submit" class="button button--tiny [modifier class]">
    Secondary
</button>
```

*/
/* -------------------------------------------
   Buttons
------------------------------------------- */
.button,
a.button,
.button--primary {
  font-family: var(--button-font);
  font-size: var(--button-size);
  font-weight: var(--button-weight);
  line-height: var(--button-line-height);
  letter-spacing: calc(var(--button-size) * var(--button-letter-spacing));
  /* Shared Base Styles */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-50);
  flex-shrink: 0;
  min-width: 228px;
  text-decoration: none;
  border-radius: var(--borders-radius-default);
  transform: translateY(0);
  transition: transform 0.4s;
  /* Default Primary Colors & Sizing */
  color: var(--color-neutrals-0);
  background: var(--color-neutrals-1000);
  border: none !important;
  height: 52px;
  padding: var(--spacing-400) var(--spacing-700);
  /* Pseudo-element for border effects */
  /* ----------------------------
     Variant: Secondary
  ---------------------------- */
  /* ----------------------------
     Variant: Tertiary
  ---------------------------- */
  /* ----------------------------
     Variant: Tiny (can combine with any variant)
  ---------------------------- */
}
.button:disabled, .button[aria-disabled=true], .button.disabled,
a.button:disabled,
a.button[aria-disabled=true],
a.button.disabled,
.button--primary:disabled,
.button--primary[aria-disabled=true],
.button--primary.disabled {
  color: var(--buttons-disabled-text);
  background: var(--buttons-disabled-background);
}
.button:after,
a.button:after,
.button--primary:after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
}
.button:hover:not(:disabled), .button:active:not(:disabled),
a.button:hover:not(:disabled),
a.button:active:not(:disabled),
.button--primary:hover:not(:disabled),
.button--primary:active:not(:disabled) {
  background: var(--color-neutrals-800);
}
@media (min-width: 481px) {
  .button:hover:not(:disabled), .button:active:not(:disabled),
  a.button:hover:not(:disabled),
  a.button:active:not(:disabled),
  .button--primary:hover:not(:disabled),
  .button--primary:active:not(:disabled) {
    transform: translateY(-4px);
  }
}
@media (max-width: 480px) {
  .button,
  a.button,
  .button--primary {
    height: 48px;
    padding: var(--spacing-300) var(--spacing-700);
  }
}
.button.button--secondary,
a.button.button--secondary,
.button--primary.button--secondary {
  color: var(--buttons-secondary-text);
  background: var(--buttons-secondary-background);
  backdrop-filter: var(--buttons-secondary-backdrop-filter);
  position: relative;
}
.button.button--secondary:after,
a.button.button--secondary:after,
.button--primary.button--secondary:after {
  display: block;
  border: var(--borders-width-50) solid var(--color-neutrals-1000);
}
.button.button--secondary:hover:not(:disabled), .button.button--secondary:active:not(:disabled),
a.button.button--secondary:hover:not(:disabled),
a.button.button--secondary:active:not(:disabled),
.button--primary.button--secondary:hover:not(:disabled),
.button--primary.button--secondary:active:not(:disabled) {
  background: var(--buttons-secondary-background);
}
.button.button--secondary:hover:not(:disabled):after, .button.button--secondary:active:not(:disabled):after,
a.button.button--secondary:hover:not(:disabled):after,
a.button.button--secondary:active:not(:disabled):after,
.button--primary.button--secondary:hover:not(:disabled):after,
.button--primary.button--secondary:active:not(:disabled):after {
  border: var(--borders-width-100) solid var(--color-neutrals-1000);
}
.button.button--tertiary,
a.button.button--tertiary,
.button--primary.button--tertiary {
  color: var(--buttons-tertiary-text);
  background-color: color-mix(in srgb, var(--color-primary-napaorange-100) 55%, transparent);
  backdrop-filter: var(--buttons-tertiary-backdrop-filter);
}
.button.button--tertiary:after,
a.button.button--tertiary:after,
.button--primary.button--tertiary:after {
  display: block;
  border: var(--borders-width-50) solid var(--color-primary-napaorange-400);
}
.button.button--tertiary:hover:not(:disabled), .button.button--tertiary:active:not(:disabled),
a.button.button--tertiary:hover:not(:disabled),
a.button.button--tertiary:active:not(:disabled),
.button--primary.button--tertiary:hover:not(:disabled),
.button--primary.button--tertiary:active:not(:disabled) {
  background-color: color-mix(in srgb, var(--color-primary-napaorange-100) 80%, transparent);
}
.button.button--tertiary:hover:not(:disabled):after, .button.button--tertiary:active:not(:disabled):after,
a.button.button--tertiary:hover:not(:disabled):after,
a.button.button--tertiary:active:not(:disabled):after,
.button--primary.button--tertiary:hover:not(:disabled):after,
.button--primary.button--tertiary:active:not(:disabled):after {
  border: var(--borders-width-100) solid var(--color-primary-napaorange-400);
}
.button.button--tiny,
a.button.button--tiny,
.button--primary.button--tiny {
  font-family: var(--body-font);
  font-size: var(--body-medium-size);
  font-weight: var(--body-weight);
  line-height: var(--body-medium-line-height);
  letter-spacing: calc(var(--body-medium-size) * var(--body-letter-spacing));
  height: 44px;
  padding: 10px var(--spacing-200);
  min-width: initial;
}
@media (min-width: 480px) {
  .button.button--tiny:hover:not(:disabled), .button.button--tiny:active:not(:disabled),
  a.button.button--tiny:hover:not(:disabled),
  a.button.button--tiny:active:not(:disabled),
  .button--primary.button--tiny:hover:not(:disabled),
  .button--primary.button--tiny:active:not(:disabled) {
    transform: translateY(-2px);
  }
}
.button.button--text-link,
a.button.button--text-link,
.button--primary.button--text-link {
  background: 0 0;
  color: var(--typography-color);
}
@media (min-width: 480px) {
  .button.button--text-link:hover:not(:disabled), .button.button--text-link:active:not(:disabled),
  a.button.button--text-link:hover:not(:disabled),
  a.button.button--text-link:active:not(:disabled),
  .button--primary.button--text-link:hover:not(:disabled),
  .button--primary.button--text-link:active:not(:disabled) {
    background: 0 0;
    color: var(--typography-color-hover-active);
    transform: none;
  }
}

/* -------------------------------------------
   Button Icon & Unstyled Button
------------------------------------------- */
.button__icon {
  height: 16px;
  width: 16px;
}
.button__icon svg {
  height: 100%;
  width: 100%;
}

.button-unstyled {
  border: none;
  background-color: transparent;
  padding: 0;
}

/* ---------------------------- */
/* ----------- form ----------- */
/* ---------------------------- */
/*
* Styling for Forms, inputs, textareas
*
*/
form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-300);
}

.field {
  position: relative;
  width: 100%;
  display: flex;
  gap: var(--spacing-200);
}

.field-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-50);
}

.field-container {
  display: flex;
  gap: var(--spacing-400);
}

/* base input styles */
.field__input,
.field input,
.field textarea {
  font-family: var(--body-font);
  font-size: var(--body-medium-size);
  font-weight: var(--body-weight);
  line-height: var(--body-medium-line-height);
  letter-spacing: calc(var(--body-medium-size) * var(--body-letter-spacing));
  background-color: transparent;
  border: var(--borders-width-standard) solid var(--ui-elements-forms-default);
  border-radius: var(--borders-radius-default);
  box-sizing: border-box;
  color: var(--typography-color-default);
  height: 48px;
  min-height: 2px;
  padding: var(--spacing-500) var(--spacing-200) var(--spacing-300) var(--spacing-300);
  position: relative;
  width: 100%;
}
.field__input::placeholder,
.field input::placeholder,
.field textarea::placeholder {
  opacity: 0;
}
.field__input:focus,
.field input:focus,
.field textarea:focus {
  border-color: var(--ui-elements-forms-focus);
  border-width: 2px;
}
.field__input[aria-invalid=true],
.field input[aria-invalid=true],
.field textarea[aria-invalid=true] {
  color: var(--typography-color-error);
  border-color: var(--typography-color-error);
}
.field__input[disabled],
.field input[disabled],
.field textarea[disabled] {
  color: var(--typography-color-disabled);
  background-color: rgba(0, 0, 0, 0.08);
}
.field__input[disabled] .field__label, .field__input[disabled] label,
.field input[disabled] .field__label,
.field input[disabled] label,
.field textarea[disabled] .field__label,
.field textarea[disabled] label {
  color: var(--typography-color-disabled);
}

/* label styles and transitions */
.field input:focus ~ .field__label,
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ .field__label,
.field input:not(:placeholder-shown) ~ label {
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
  top: var(--spacing-50);
  transform: translateY(0);
}
.field input[aria-invalid=true] ~ label {
  color: var(--typography-color-error);
}
.field textarea {
  min-height: 96px;
}
.field textarea:focus ~ .field__label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ .field__label,
.field textarea:not(:placeholder-shown) ~ label {
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
  top: var(--spacing-50);
  transform: translateY(0);
}

.field__label,
.field label {
  font-family: var(--body-font);
  font-size: var(--body-medium-size);
  font-weight: var(--body-weight);
  line-height: var(--body-medium-line-height);
  letter-spacing: calc(var(--body-medium-size) * var(--body-letter-spacing));
  color: var(--typography-color-secondary);
  left: var(--spacing-300);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transition: top 0.5s ease, font-size 0.5s ease, transform 0.5s ease;
  transform: translateY(-50%);
}

/* textarea specific label styles */
.field-textarea .field__label,
.field-textarea label {
  top: var(--spacing-50);
  transform: none;
}

/* help and error styles */
.field-error-hint {
  display: none;
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
  color: var(--typography-color-error);
  padding: var(--spacing-50) 0;
}
.field-error-hint .icon {
  margin-top: 1px;
  flex: 0 0 12px;
}

*[data-invalid] .field-error-hint {
  display: flex;
  gap: var(--spacing-50);
}

.field--help {
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
  color: var(--typography-color-default);
}

form .errors {
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
  color: var(--typography-color-error);
}

.field-error {
  color: var(--typography-color-error);
}

.field-error__message {
  align-items: center;
  color: var(--typography-color-error);
  display: flex;
  flex-direction: row;
  gap: var(--spacing-50);
}

/* Invalid state using native form validation */
form-input[data-invalid] .field__input,
form-textarea[data-invalid] .field__input {
  border-color: var(--typography-color-error);
}

form-input[data-invalid] .field__error,
form-input[data-invalid] .field__label,
form-textarea[data-invalid] .field__label {
  color: var(--typography-color-error);
}

/* Required field indicator */
.field__label[data-required]::after {
  content: "*";
  color: var(--typography-color-error);
  margin-left: var(--spacing-50);
}

/* ---------------------------- */
/* ----------- icons ---------- */
/* ---------------------------- */
.icon-xs {
  height: 12px;
  width: 12px;
}
.icon-xs svg {
  height: 100%;
  width: 100%;
}

.icon-s {
  height: 16px;
  width: 16px;
}
.icon-s svg {
  height: 100%;
  width: 100%;
}

.icon-m {
  height: 24px;
  width: 24px;
}
.icon-m svg {
  height: 100%;
  width: 100%;
}

.icon-l {
  height: 32px;
  width: 32px;
}
.icon-l svg {
  height: 100%;
  width: 100%;
}

/* ---------------------------- */
/* -------- typography -------- */
/* ---------------------------- */
html {
  font-size: 16px;
}

body {
  font-family: var(--body-font);
  font-size: var(--body-medium-size);
  font-weight: var(--body-weight);
  line-height: var(--body-medium-line-height);
  letter-spacing: calc(var(--body-medium-size) * var(--body-letter-spacing));
  color: var(--typography-color-default);
}

/* default heading styles */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
}

.display-large {
  font-family: var(--display-font);
  font-size: var(--display-large-size);
  font-weight: var(--display-weight);
  line-height: var(--display-large-line-height);
  letter-spacing: calc(var(--display-large-size) * var(--display-letter-spacing));
  text-transform: var(--display-text-transform);
}

.display-medium {
  font-family: var(--display-font);
  font-size: var(--display-medium-size);
  font-weight: var(--display-weight);
  line-height: var(--display-medium-line-height);
  letter-spacing: calc(var(--display-medium-size) * var(--display-letter-spacing));
  text-transform: var(--display-text-transform);
}

.display-small {
  font-family: var(--display-font);
  font-size: var(--display-small-size);
  font-weight: var(--display-weight);
  line-height: var(--display-small-line-height);
  letter-spacing: calc(var(--display-small-size) * var(--display-letter-spacing));
  text-transform: var(--display-text-transform);
}

.heading-xlarge {
  font-family: var(--heading-font);
  font-size: var(--heading-xlarge-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-xlarge-line-height);
  letter-spacing: calc(var(--heading-xlarge-size) * var(--heading-letter-spacing));
  text-transform: var(--heading-text-transform);
}

.heading-large {
  font-family: var(--heading-font);
  font-size: var(--heading-large-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-large-line-height);
  letter-spacing: calc(var(--heading-large-size) * var(--heading-letter-spacing));
  text-transform: var(--heading-text-transform);
}

.heading-medium {
  font-family: var(--heading-font);
  font-size: var(--heading-medium-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-medium-line-height);
  letter-spacing: calc(var(--heading-medium-size) * var(--heading-letter-spacing));
  text-transform: var(--heading-text-transform);
}

.heading-small {
  font-family: var(--heading-font);
  font-size: var(--heading-small-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-small-line-height);
  letter-spacing: calc(var(--heading-small-size) * var(--heading-letter-spacing));
  text-transform: var(--heading-text-transform);
}

.heading-xsmall {
  font-family: var(--heading-font);
  font-size: var(--heading-xsmall-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-xsmall-line-height);
  letter-spacing: calc(var(--heading-xsmall-size) * var(--heading-letter-spacing));
  text-transform: var(--heading-text-transform);
}

.subheading-xlarge {
  font-family: var(--subheading-font);
  font-size: var(--subheading-xlarge-size);
  font-weight: var(--subheading-weight);
  line-height: var(--subheading-xlarge-line-height);
  letter-spacing: calc(var(--subheading-xlarge-size) * var(--subheading-letter-spacing));
  text-transform: var(--subheading-text-transform);
}

.subheading-large {
  font-family: var(--subheading-font);
  font-size: var(--subheading-large-size);
  font-weight: var(--subheading-weight);
  line-height: var(--subheading-large-line-height);
  letter-spacing: calc(var(--subheading-large-size) * var(--subheading-letter-spacing));
  text-transform: var(--subheading-text-transform);
}

.subheading-medium {
  font-family: var(--subheading-font);
  font-size: var(--subheading-medium-size);
  font-weight: var(--subheading-weight);
  line-height: var(--subheading-medium-line-height);
  letter-spacing: calc(var(--subheading-medium-size) * var(--subheading-letter-spacing));
  text-transform: var(--subheading-text-transform);
}

.subheading-small {
  font-family: var(--subheading-font);
  font-size: var(--subheading-small-size);
  font-weight: var(--subheading-weight);
  line-height: var(--subheading-small-line-height);
  letter-spacing: calc(var(--subheading-small-size) * var(--subheading-letter-spacing));
  text-transform: var(--subheading-text-transform);
}

.subheading-xsmall {
  font-family: var(--subheading-font);
  font-size: var(--subheading-xsmall-size);
  font-weight: var(--subheading-weight);
  line-height: var(--subheading-xsmall-line-height);
  letter-spacing: calc(var(--subheading-xsmall-size) * var(--subheading-letter-spacing));
  text-transform: var(--subheading-text-transform);
}

.body-large {
  font-family: var(--body-font);
  font-size: var(--body-large-size);
  font-weight: var(--body-weight);
  line-height: var(--body-large-line-height);
  letter-spacing: calc(var(--body-large-size) * var(--body-letter-spacing));
}

.body-medium {
  font-family: var(--body-font);
  font-size: var(--body-medium-size);
  font-weight: var(--body-weight);
  line-height: var(--body-medium-line-height);
  letter-spacing: calc(var(--body-medium-size) * var(--body-letter-spacing));
}

.body-small {
  font-family: var(--body-font);
  font-size: var(--body-small-size);
  font-weight: var(--body-weight);
  line-height: var(--body-small-line-height);
  letter-spacing: calc(var(--body-small-size) * var(--body-letter-spacing));
}

.body-xsmall {
  font-family: var(--body-font);
  font-size: var(--body-xsmall-size);
  font-weight: var(--body-weight);
  line-height: var(--body-xsmall-line-height);
  letter-spacing: calc(var(--body-xsmall-size) * var(--body-letter-spacing));
}

a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-50);
  text-decoration: underline;
  color: inherit;
}

/* ---------------------------- */
/* ----------- loading ---------- */
/* ---------------------------- */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border: 8px solid var(--border-color-disabled);
  border-top: 8px solid var(--border-color-brand-inverse);
  border-radius: var(--borders-radius-full);
  margin: -30px 0 0 -30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ---------------------------- */
/* ----------- util ----------- */
/* ---------------------------- */
/* adds clickable area to relatively positioned parent */
.click-area {
  position: relative;
}
.click-area::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-height: 36px;
  min-width: 36px;
}

/* adds clickable area to relatively positioned parent */
.click-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#MainContent:not(:has(.product-grid)) {
  padding-top: var(--header-height);
}

@media (min-width: 769px) {
  .main-collection-offset {
    margin-top: 64px;
  }
}

.vertical-heading {
  position: absolute;
  top: var(--spacing-800);
  bottom: var(--spacing-600);
  left: var(--spacing-400);
  z-index: 10;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  writing-mode: vertical-rl; /* Rotates the text vertically from bottom to top */
  transform: rotate(180deg);
  white-space: nowrap;
}
.vertical-heading:before {
  content: "";
  width: 1px;
  background-color: currentColor;
  flex: 1;
  margin-bottom: var(--spacing-200);
}

/* -------------------- Messy Overwrites for Style Guide -------------------- */
@media (hover: hover) {
  .interactive-link-list__link:hover,
  .header__nav-link:hover {
    color: var(--color-primary-napaorange-400) !important;
  }
}
.price-slider__input::-webkit-slider-thumb {
  border-radius: 2px !important;
}

/* h:\projects\vfc\reference-theme\src\entrypoints\style.scss */