@import url("../../styles/aura.css");

:root {
  /* H&M base design */

  /* Fallback for browsers that do not support Custom Properties */
  --vh: 100vh;

  /* colors */
  --color-primary-100: #d6001c;
  --color-primary-50: #e50010;
  --color-primary-90: #d0021b;
  --color-primary-40: #e66677;
  --color-primary-30: #ef99a4;
  --color-primary-31: #D92D20;
  --color-secondary-100: #222;
  --color-secondary-50: #555;
  --color-secondary-40: #7b7b7b;
  --color-secondary-30: #989898;
  --color-secondary-20: #c8c8c8;
  --color-tertiary-100: #efe4ce;
  --color-tertiary-40: #f4eddd;
  --color-tertiary-30: #efe4ce;
  --color-tertiary-20: #f9f1ee;
  --color-neutral-20: #f5f5f5;
  --color-neutral-70: #989898;
  --color-text-main: #222;
  --color-text-dark: #777;
  --color-text-dark-1: #707070;
  --color-text-light: #ccc;
  --tertiary-tertiary-40: rgba(244 237 221 / 70%);
  --secondary-secondary-50: rgba(255 255 255 / 70%);
  --color-icon-base: #010101;
  --color-icon-inactive: #ccc;
  --color-background-overley: rgba(0 0 0 / 50%);
  --color-background-offer-items: #f2f2f2;
  --color-background-border-color: #979797;
  --color-dropdown-disabled-border: #DDD;
  --color-box-shadow-color: rgb(0 0 0 / 24%);
  --color-checkout-box-shadow-color: rgb(0 0 0 / 7%);
  --color-primary-tooltip: #cd2026;
  --color-primary-aura: #8e227c;
  --color-primary-error-red: #C00;
  --color-primary-green: #347827; 
  --color-dark-green: #235619; 
  --color-aura-radion: #6B228D;
  --color-aura-info-link: #91147e;
  --color-aura-info-question: #7a2582;
  --color-aura-input-border: #b9b9b9;
  --color-aura-highlight-card: #772583;
  --color-aura-primary-10: #e71e6e;
  --color-info-text: #0078ff;
  --color-info-text-2: #E8EFF5;
  --color-aura-primary-100: #662483;
  --color-primary-aura-100: #662483;
  --color-radio-icon-blue: #005699;
  --color-toast-error-border: #ff9e9e;
  --color-secondary-1000: #222;
  --color-white-gradient: linear-gradient(#fff, #fff);

  /* Aura colors */
  --aura-color-primary-200: #1e274a;
  --aura-color-primary-50: #e71e6e;
  --aura-color-primary-gradient: linear-gradient(135deg, #e71e6e 0%, #662483 100%);
  --aura-color-secondary-100: #fc8a41;
  --aura-color-secondary-300: #1175ed;
  --aura-color-secondary-400: #cfba92;
  --aura-color-tier-hello: linear-gradient(135deg, #662483 0%, #e71e6e 33.05%, #fc8a41 69.78%, #fdd73c 100%);
  --aura-color-tier-star: linear-gradient(135deg, #1175ed 20.15%, #662483 89.85%);
  --aura-color-tier-vip: linear-gradient(135deg, #cfba92 4.44%, #662483 57.06%, #1e274a 100%);
  --aura-color-background-light: linear-gradient(180deg, #fff 0%, #f5f5ff 100%);
  --aura-color-stroke: #dbdbe8;
  --aura-color-text-main: #171717;
  --aura-color-text-dark: #777;
  --aura-color-text-light: #ccc;
  --aura-color-error-80: #e53333;
  --aura-color-primary: #e71e6e;
  --aura-color-primary-10: #662483;
  --aura-color-secondary: var(--color-neutral-50);
  --aura-color-opacity: var(--color-opacity-24);
  --aura-color-mob-nav-border: #dbdbe8;
  --aura-color-mob-nav-background: #f5f5ff;


   /* Aura */
  --aura-primary-100-light: #F4F0F6;
  --aura-text-main: #171717;
  --aura-stroke: #DBDBE8;
  --aura-tier-hello: linear-gradient(135deg, #662483 0%, #E71E6E 33.05%, #FC8A41 69.78%, #FDD73C 100%);
  --aura-tier-star: linear-gradient(135deg, #1175ED 20.15%, #662483 89.85%);
  --aura-tier-vip: linear-gradient(135deg, #CFBA92 4.44%, #662483 57.06%, #1E274A 100%);

  /* Aura modal width */
  --aura-grid-col-6 : 78rem;
  --aura-grid-width: 36rem;

  /* store finder */
  --sf-container-height: 75rem;
  --sf-container-height-2: 70rem;
  --sf-container-height-3: 61rem;
  --sf-height-1: 1rem;
  --sf-height-2: 2rem;
  --sf-height-3: 3rem;
  --sf-height-3-2: 3.2rem;
  --sf-height-2-4: 2.4rem;
  --sf-height-4: 4rem;
  --sf-height-48: 4.8rem;
  --sf-height-0-4: 0.4rem;
  --sf-height-6: 32rem;
  --sf-height-3-5: 3.5rem;
  --sf-height-50: 50rem;
  --sf-height-60: 60rem;
  --sf-height-1-5: 1.5rem;
  --sf-height-1-4: 1.4rem;
  --sf-height-1-6: 1.6rem;
  --sf-height-2-6: 2.6rem;
  --sf-height-28: 28rem;
  --sf-height-61-7: 61.7rem;
  --sf-height-38: 3.8rem;
  --sf-height-52: 5.2rem;
  --sf-height-57: 5.7rem;
  --sf-height-62: 6.2rem;
  --sf-height-5: 5rem;
  --sf-height-2x-1: 0.9rem;
  --sf-height-1-8: 1.8rem;
  --sf-width-1: 1rem;
  --sf-width-3-5: 3.5rem;
  --sf-width-2: 2rem;
  --sf-width-128: 12.8rem;
  --sf-width-2-4: 2.4rem;
  --sf-width-3: 3rem;
  --sf-width-3-2: 3.2rem;
  --sf-width-4: 4rem;
  --sf-width-1-5: 1.5rem;
  --sf-width-1-4: 1.4rem;
  --sf-width-1-6: 1.6rem;
  --sf-width-23: 23rem;
  --sf-width-17: 17.4rem;
  --sf-width-18-4: 18.4rem;
  --sf-width-18: 18rem;
  --sf-width-27-4: 27.4rem;
  --sf-width-32-2: 32.2rem;
  --sf-width-2x-1: 0.9rem;
  --sf-width-7: 7rem;
  --sf-width-71: 7.1rem;
  --sf-width-308: 30.8rem;
  --sf-height-11: 11rem;
  --sf-width-86: 8.6rem;
  --sf-width-28: 28rem;
  --sf-width-95: 95.4rem;
  --sf-width-60: 60rem;
  --sf-width-100: 100rem;
  --sf-width-648: 64.8rem;
  --sf-height-64: 6.4rem;
  --sf-height-644: 64.4rem;
  --sf-height-19-2: 19.2rem;
  --sf-width-36: 36rem;
  --sf-width-1-8: 1.8rem;
  --sf-height-48-1: 48rem;

  /* wishlist quick view */
  --qw-width-16: 16rem;
  --qw-height-3-4: 3.4rem;

  /* embed block */
  --embed-height-1: 2.2rem;
  --embed-height-1-2: 2.24rem;
  --embed-height-2: 1rem;
  --embed-width-1: 2.2rem;
  --embed-width-2: 80rem;
  --embed-width-96: 96rem;
  --embed-width-2-3-6: 2.36rem;
  --embed-width-28: 28rem;
  --embed-width-3-5: 35rem;

  /* font size */
  --font-size-10x: 0.625rem;
  --font-size-0x: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.2rem;
  --font-size-2-1: 1.3rem;
  --font-size-3: 1.4rem;
  --font-size-4: 1.6rem;
  --font-size-5: 1.8rem;
  --font-size-6: 2rem;
  --font-size-7: 2.4rem;
  --font-size-8: 2.8rem;
  --font-size-9: 3.2rem;
  --font-size-10: 4rem;
  --font-size-11: 5.6rem;
  --font-size-12: 6.4rem;
  --font-size-13: 1.3rem;
  --font-size-16: 1.6rem;
  --font-size-18: 1.8rem;
  --font-size11: 1.1rem;
  --font-size9: 0.9rem;

  /* font weight */
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;

  /* text size */
  --text-xxs: 1rem;
  --text-xs: 1.2rem;
  --text-s: 1.4rem;
  --text-m: 1.6rem;
  --text-l-2: 1.8rem;
  --text-l-1: 1.82rem;
  --text-xl: 2rem;
  --text-xxl: 3rem;
  --text-xxs-1: 0.813rem;
  --text-xxs-81: 0.81rem;

  /* line height */
  --line-height-xxs: 1.4;
  --line-height-xs: 1.3;
  --line-height-s: 1.3;
  --line-height-m: 1.4;
  --line-height-l: 1.3;
  --line-height-l-2: 1.32;
  --line-height-xl: 1.4;
  --line-height-xl-2: 1.56rem;
  --line-height-xxl: 1.6;
  --line-height-xx-8: 1.68;
  --line-height-xxl-2: 1.8;
  --line-height-xxl-3: 1.875;
  --line-height-xxxl: 2;
  --line-height-2-6: 2.6rem;
  --line-height-35: 3.5rem;
  --line-height-18-2: 1.82rem;
  --line-height-xxx1-2: 2.4rem;
  --aura-line-height-132: 3.168rem;
  --aura-line-height-130: 1.82rem;
  --aura-line-height-140: 2.24rem;
  --aura-line-height-121: 2.12rem;
  --line-height-2-3: 2.34rem;

  /* spacing */
  --space-space-11x: 8rem;
  --space-space-3-0-2: 3.02rem;
  --space-space-14x: 10rem;
  --space-space-10x: 6.4rem;
  --space-space-8x: 4rem;
  --space-space-9x: 5rem;
  --space-space-7x: 3.2rem;
  --space-space-6x: 2.4rem;
  --space-space-5x: 2rem;
  --space-space-4x: 1.6rem;
  --space-space-3x: 1.2rem;
  --space-space-3x-2: 1.1rem;
  --space-space-3x-1: 0.06rem;
  --space-space-3x-4: 0.0625rem;
  --space-space-2x-2: 1rem;
  --space-space-2x: 0.8rem;
  --space-space-3x-3: 0.25rem;
  --space-space-2x-1: 0.9rem;
  --space-space-2x-1-5: 0.95rem;
  --space-space-1x-2: 0.7rem;
  --space-space-1x-2-neg: -0.7rem;
  --space-space-1x-3-neg: -0.3rem;
  --space-space-1x-4-neg: -0.6rem;
  --space-space-1x-3: 0.75rem;
  --space-space-22: 2.2rem;
  --space-space-42: 4.2rem;
  --space-space-43: 4.3rem;
  --space-space-1x-4: 0.46rem;
  --space-space-1x: 0.4rem;
  --space-space-0-3: 0.3rem;
  --space-space-0x: 0rem;
  --space-space-0x-1: 0.2rem;
  --space-space-99: 9.9rem;
  --space-space-96: 9.6rem;
  --space-space-96-1: 1.96rem;
  --space-space-64: 6.4rem;
  --space-space-6-4: -6.4rem;
  --space-space-0-1: -0.1rem;
  --space-space-68: 6.8rem;
  --space-space-62: 6.2rem;
  --space-space-60: 6rem;
  --space-space-58: 5.8rem;
  --space-space-48: 4.8rem;
  --space-space-51: 5.1rem;
  --space-space-47: 4.7rem;
  --space-space-48-1: 4.75rem;
  --space-space-44: 4.4rem;
  --space-space-40: 4rem;
  --space-space-45: 4.5rem;
  --space-space-55: 5.5rem;
  --space-space-56: 5.6rem;
  --space-space-30: 3rem;
  --space-space-32: 3.2rem;
  --space-space-34: 3.4rem;
  --space-space-33: 3.3rem;
  --space-space-35: 3.5rem;
  --space-space-36: 3.6rem;
  --space-space-38: 3.8rem;
  --space-space-24: 2.4rem;
  --space-space-23: 2.3rem;
  --space-space-23-1: 2.376rem;
  --space-space-23-5: 2.35rem;
  --space-space-25: 2.5rem;
  --space-space-28: 2.8rem;
  --space-space-26: 2.6rem;
  --space-space-20: 2rem;
  --space-space-19: 1.9rem;
  --space-space-16: 1.6rem;
  --space-space-16-neg: -1.6rem;
  --space-space-15: 1.5rem;
  --space-space-17: 1.7rem;
  --space-space-15-1: 1.5625rem;
  --space-space-15-3: 1.56rem;
  --space-space-14: 1.4rem;
  --space-space-12: 1.2rem;
  --space-space-13: 1.3rem;
  --space-space-9: 0.9rem;
  --space-space-10: 1rem;
  --space-space-8: 0.8rem;
  --space-space-6: 0.6rem;
  --space-space-4: 0.4rem;
  --space-space-2: 0.2rem;
  --space-space-18: 1.8rem;
  --space-space-3: 0.3rem;
  --space-space-70: 7rem;
  --space-space-75: 7.5rem;
  --space-space-31: 0.31rem;
  --space-space-488: 48.8rem;
  --spacing-xxxsmall: 0.1rem;
  --spacing-xxxsmall-1: 0.114rem;
  --spacing-xxsmall: 0.4rem;
  --spacing-xxsmall-2: 0.5rem;
  --spacing-xsmall: 0.8rem;
  --spacing-xsmall-2: 1.2rem;
  --spacing-small: 1.6rem;
  --spacing-medium: 2.4rem;
  --spacing-big: 3.2rem;
  --spacing-xbig: 4rem;
  --spacing-xxbig: 4.8rem;
  --spacing-large: 6.4rem;
  --spacing-large-big: 6.5rem;
  --spacing-large-big-n: -6.5rem;
  --spacing-large-1: 6.25rem;
  --spacing-xlarge: 7.2rem;
  --spacing-xxlarge: 9.6rem;
  --spacing-huge: 12rem;
  --spacing-xhuge: 14.4rem;
  --spacing-xxhuge: 19.2rem;
  --spacing-xxhuge-2: 27rem;
  --spacing-xxhuge-27-4: 27.4rem;
  --spacing-xxxhuge: 29rem;
  --radius-radius-xs: 1.6rem;
  --radius-radius-none: 0;
  --space-space-50: 5rem;
  --space-space-54: 5.4rem;
  --space-space-52: 5.2rem;
  --space-space-84: 8.4rem;
  --list-spacing-3: 3rem;
  --space-space-115: 11.5rem;
  --space-space-90: 9rem;
  --space-space-117: 11.25rem;
  --space-space-1-25: 1.25rem;
  --space-space-15-2: 15rem;
  --space-space-116: 0.031rem;
  --space-space-265: 26.5rem;
  --space-space-72: 7.2rem;
  --space-space-78: 7.8rem;
  --space-space-46: 4.6rem;
  --space-space-308: 30.8rem;
  --space-space-280: 28rem;
  --space-space-86: 8.6rem;
  --space-space-110: 11rem;
  --space-space-57: 5.7rem;
  --space-space-21-8: 21.8rem;
  --space-space-140: 14rem;
  --space-space-145: 14.5rem;
  --space-space-160: 16rem;
  --space-space-162: 16.2rem;
  --space-space-95: 9.5rem;
  --space-space-281: 28.1rem;
  --space-space-360: 36rem;
  --space-space-500: 50rem;
  --space-space-600: 60rem;
  --space-space-650: 65rem;
  --space-space-968: 96.8rem;
  --space-space-471: 47.1rem;
  --space-space-11: 1.1rem;
  --space-space-92: 9.2rem;
  --space-space-148: 14.8rem;
  --spacing-xlarge-71: 7.1rem;
  --spacing-xlarge-60-8: 6.08rem;
  --space-space-0-4: 4%;
  --space-space-4-5: 4.5px;
  --space-space-80: 8rem;
  --space-space-101: 10.1rem;
  --space-space-102: 10.2rem;
  --space-space-0-72: 0.72rem;
  --space-space-72-72: 72rem;
  --space-space-0-48: 0.48rem;
  --space-space-8px: 0.5rem;
  --space-space-16px: 1rem;
  --space-space-214: 21.4rem;
  --space-space-320: 32rem;
  --space-space-2-24: 2.24rem;
  --space-space-130: 130rem;

  /* grid */
  --grid-full-frame: 168rem;
  --grid-margin: 4rem;
  --grid-gutter: 3.2rem;
  --grid-col-1: 12.5rem;
  --grid-col-2: 24rem;
  --grid-col-3: 37.6rem;
  --grid-col-4: 51.2rem;
  --grid-col-5: 64rem;
  --grid-col-6: 78.4rem;
  --grid-col-7: 48rem;
  --grid-col-8: 105.6rem;
  --grid-col-9: 21.1rem;
  --grid-col-10: 132.8rem;
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 1.6rem;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 1.6rem;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 2.4rem;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 2.4rem;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 2.4rem;
  --grid-6-gutters: 2rem;
  --grid-0-3-gutters: 0.3rem;
  --grid-1-2-gutters: 1.2rem;
  --grid-08-gutters: 0.8rem;
  --grid-04-gutters: 0.4rem;
  --grid-lg-max-width: 160rem;
  --grid-width-46: 46rem;
  --grid-height-27: 27rem;
  --grid-height-16: 16rem;

  /* Elsie base design - AEM default */
  --color-brand-100: #faf9f8;
  --color-brand-200: #ddd;
  --color-brand-250: #4d4d4d;
  --color-brand-300: #6d6d6d;
  --color-brand-500: #454545;
  --color-brand-600: #383838;
  --color-brand-750: #333;
  --color-brand-700: #222;
  --color-brand-800: #f1ebdf;
  --color-white : #fff;
  --color-neutral-10: #fdfdfd;
  --color-neutral-30: #eee;
  --color-neutral-40: #e4e4e4;
  --color-neutral-501: #ddd;
  --color-neutral-50: #fff;
  --color-neutral-60: #ccc;
  --color-neutral-100: #faf9f8;
  --color-neutral-200: #f5f5f5;
  --color-neutral-300: #e8e8e8;
  --color-neutral-350: #dadada;
  --color-neutral-400: #d6d6d6;
  --color-neutral-450: #ececec;
  --color-neutral-480: #efefef;
  --color-neutral-500: #b8b8b8;
  --color-neutral-550: #adadad;
  --color-neutral-600: #8f8f8f;
  --color-neutral-700: #666;
  --color-neutral-800: #3d3d3d;
  --color-neutral-900: #292929;
  --color-neutral-901: #FFF0C5;
  --color-neutral-902: #E6F5FF;
  --color-neutral-white: #fff;
  --color-neutral-black: #000;
  --color-positive-200: #eff5ef;
  --color-positive-500: #7fb078;
  --color-positive-800: #53824c;
  --color-informational-200: #eeeffb;
  --color-informational-500: #6978d9;
  --color-informational-800: #5d6dd6;
  --color-warning-200: #fdf3e9;
  --color-warning-500: #e79f5c;
  --color-warning-800: #cc7a2e;
  --color-alert-100: #f00;
  --color-alert-200: #ffebeb;
  --color-alert-500: #db7070;
  --color-alert-800: #c35050;
  --color-alert-900: #e50010;
  --color-footer-border: #e4e4e4;
  --color-footer-red: #d6001c;
  --color-error-20: #ffe5e5;
  --color-text-bg:#ffc26d;
  --color-text-black: #1a1a1a;
  --color-error-100: #c00;
  --color-success-100: #39b54a;
  --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-0: rgb(255 255 255 / 0%);
  --color-opacity-16: rgb(255 255 255 / 16%);
  --color-opacity-24: rgb(255 255 255 / 24%);
  --color-opacity-50: rgb(0 0 0 / 50%);
  --color-opacity-75: rgb(0 0 0 / 75%);
  --color-line-separator: #cdcdcd;
  --color-order-green: #1da545;
  --color-order-amber: #ffda7f;
  --color-order-grey: #797979;
  --color-order-info: #569de5;
  --color-order-info-10: #007aff;
  --color-dropdown-hover: #f7f7f7;
  --color-dropdown-icon: #333;
  --color-dropdown-error: #ff3030;
  --color-quntity-blue: #238ae8;
  --color-tooltip-label: #222;
  --color-grey-border: #e4e4e4;
  --color-tooltip-blue: #3680cb;
  --color-warning-orange: #ffd1a1;
  --color-warning-100: #e6591b;
  --color-icon-blue: #4285f4;
  --color-exopnea-banner: #f3eddf;
  --color-accordion-border: #E4E4E4;
  --color-thankyou-message: #F6FEF9;
  --color-free-shipping-bg: #FFFAEB;
  --color-warning-background : #FFE5E5;

  /* border shape */
  --shape-border-radius-2x: 2px;
  --shape-border-radius-1: 3px;
  --shape-border-radius-2: 8px;
  --shape-border-radius-3: 24px;
  --shape-border-radius-4: 2rem;
  --shape-border-radius-5: 4px;
  --shape-border-width-1: 1px;
  --shape-border-width-10: 10px;
  --shape-border-width-9: 9px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 0.2rem;
  --shape-border-width-4: 4px;
  --shape-border-width-16: 16px;
  --shape-border-width-11: 11px;
  --shape-border-width-15: 15px;
  --shape-border-width-5: 0.5rem;
  --shape-border-width-6: 0.6rem;
  --shape-border-width-8: 0.8rem;
  --shape-border-width-01: 0.1rem;
  --box-shadow-checkout: 0 -1px 20px 9px rgb(0 0 0 / 7%);

  /* shape attributes */
  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
  --shape-shadow-4: 0 -4px 4px 0 rgb(0 0 0 / 4%);
  --shape-icon-stroke-1: 0.1rem;
  --shape-icon-stroke-2: 0.15rem;
  --shape-icon-stroke-3: 0.2rem;
  --shape-icon-stroke-4: 0.4rem;

  /* type : base */
  --type-base-font-family: 'hm sans regular', 'hm sans regular fallback', 'helvetica neue';
  --type-base-font-family-semibold: 'hm sans semibold', 'hm sans semibold fallback', 'helvetica neue';
  --type-base-font-family-bold: 'hm sans bold', 'hm sans bold fallback', 'helvetica neue';

  /* type : display */
  --type-display-1-font: normal normal 300 6rem/7.2rem var(--type-base-font-family);
  --type-display-1-letter-spacing: 0.04em;
  --type-display-2-font: normal normal 300 4.8rem/5.6rem var(--type-base-font-family);
  --type-display-2-letter-spacing: 0.04em;
  --type-display-3-font: normal normal 300 3.4rem/4rem var(--type-base-font-family);
  --type-display-3-letter-spacing: 0.04em;

  /* type : headline */
  --type-headline-1-font: normal normal 400 2.4rem/3.2rem var(--type-base-font-family);
  --type-headline-1-letter-spacing: 0.04em;
  --type-headline-2-default-font: normal normal 300 2rem/2.4rem var(--type-base-font-family);
  --type-headline-2-default-letter-spacing: 0.04em;
  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem var(--type-base-font-family);
  --type-headline-2-strong-letter-spacing: 0.04em;

  /* type : body */
  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0.04em;
  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0.04em;
  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0.04em;
  --type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0.04em;
  --type-body-2-strong-font: normal normal 400 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0.04em;
  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0.04em;

  /* type : details */
  --type-details-1-font: normal normal 400 var(--font-size-1) var(--type-base-font-family);
  --type-details-2-font: normal normal 400 var(--font-size-2) var(--type-base-font-family);
  --type-details-3-font: normal normal 400 var(--font-size-3) var(--type-base-font-family);
  --type-details-4-font: normal normal 400 var(--font-size-4) var(--type-base-font-family);
  --type-details-5-font: normal normal 400 var(--font-size-5) var(--type-base-font-family);
  --type-details-6-font: normal normal 400 var(--font-size-6) var(--type-base-font-family);
  --type-details-7-font: normal normal 400 var(--font-size-7) var(--type-base-font-family);
  --type-details-8-font: normal normal 400 var(--font-size-8) var(--type-base-font-family);
  --type-details-9-font: normal normal 400 var(--font-size-9) var(--type-base-font-family);
  --type-details-10-font: normal normal 400 var(--font-size-10) var(--type-base-font-family);
  --type-details-11-font: normal normal 400 var(--font-size-11) var(--type-base-font-family);
  --type-details-12-font: normal normal 400 var(--font-size-12) var(--type-base-font-family);
  --type-details-13-font: normal normal 400 var(--font-size-13) var(--type-base-font-family);

  /** type : details semibold */
  --type-details-semibold-1-font: normal normal 600 var(--font-size-1) var(--type-base-font-family-semibold);
  --type-details-semibold-2-font: normal normal 600 var(--font-size-2) var(--type-base-font-family-semibold);
  --type-details-semibold-3-font: normal normal 600 var(--font-size-3) var(--type-base-font-family-semibold);
  --type-details-semibold-4-font: normal normal 600 var(--font-size-4) var(--type-base-font-family-semibold);
  --type-details-semibold-5-font: normal normal 600 var(--font-size-5) var(--type-base-font-family-semibold);
  --type-details-semibold-6-font: normal normal 600 var(--font-size-6) var(--type-base-font-family-semibold);
  --type-details-semibold-7-font: normal normal 600 var(--font-size-7) var(--type-base-font-family-semibold);
  --type-details-semibold-8-font: normal normal 600 var(--font-size-8) var(--type-base-font-family-semibold);
  --type-details-semibold-9-font: normal normal 600 var(--font-size-9) var(--type-base-font-family-semibold);
  --type-details-semibold-10-font: normal normal 600 var(--font-size-10) var(--type-base-font-family-semibold);
  --type-details-semibold-11-font: normal normal 600 var(--font-size-11) var(--type-base-font-family-semibold);
  --type-details-semibold-12-font: normal normal 600 var(--font-size-12) var(--type-base-font-family-semibold);

  /* type : button */
  --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 : bold */
  --type-details-bold-3-font: normal normal 700 var(--font-size-3) var(--type-base-font-family-bold);
  --type-details-bold-4-font: normal normal 700 var(--font-size-13) var(--type-base-font-family-bold);
  --type-details-bold-5-font: normal normal 700 var(--font-size-5) var(--type-base-font-family-bold);

  /* type : captions */
  --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 : overline */
  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.16em;

  /* Additional tokens */
  --fixed-font-family: menlo, monaco, consolas, 'courier new', monospace;
  --background-color: var(--color-neutral-50);
  --nav-height: 6rem;
  --nav-height-home: 11rem;
  --breadcrumbs-height: 4.4rem;
  --breadcrumbs-font-size: 1.4rem;
  --nav-height-with-breadcrumb: calc(var(--nav-height) + var(--breadcrumbs-height));
  --main-top-position: var(--nav-height-home);
  

  /* banner tokens */
  --color-background-banner: var(--color-neutral-50);
  --color-text-banner-vignette: var(--color-neutral-50);
  --color-text-banner-header: var(--color-neutral-50);
  --color-text-banner-preamble: var(--color-neutral-50);
  --color-text-banner-usp: var(--color-neutral-50);
  --color-text-banner-offer: var(--color-neutral-50);
  --color-background-banner-cta: var(--color-neutral-50);
  --color-text-banner-cta: var(--color-brand-600);
  --color-background-banner-countdown: transparent;
  --color-text-banner-countdown: var(--color-brand-600);

  /** price tag tokens */
  --color-background-banner-price: var(--color-neutral-50);
  --color-text-banner-price: var(--color-brand-600);
  --opacity-banner-price: 0.7;
  --opacity-swatch-image: 0.6;

  /* shimmer tokens */
  --shimmer-image-slide-start: var(--color-neutral-450);
  --shimmer-image-slide-mid: var(--color-neutral-200);
  --shimmer-image-slide-end: var(--color-neutral-450);

  /* PLP fonts */
  --plp-item-regular: var(--type-body-1-strong-font);
  --plp-item-semibold: var(--type-details-semibold-5-font);

  /* PLP colors */
  --plp-main-text: var(--color-text-main);
  --plp-color-primary-a: var(--color-primary-a);
  --plp-color-secondary-a: var(--color-secondary-a);
  --plp-color-secondary-b: var(--color-secondary-b);
  --plp-color-tertiary-a: var(--color-tertiary-a);
  --plp-color-tertiary-b: var(--color-tertiary-b);
}

@font-face {
  font-family: 'hm sans regular fallback';
  src: local('Arial');
  size-adjust: 102%;
  ascent-override: 107%;
  descent-override: 32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'hm sans semibold fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 102%;
  descent-override: 29%;
  line-gap-override: 2%;
}

@font-face {
  font-family: 'hm sans bold fallback';
  src: local('Arial');
  size-adjust: 106%;
  ascent-override: 102%;
  descent-override: 35%;
  line-gap-override: 0%;
}

@media (width <=767px) {
    :root {
      --text-xs: 1rem;
      --text-s: 1.2rem;
      --text-m: 1.4rem;
      --text-l: 1.6rem;

      /* spacing */
      --space-space-10x: 4.8rem;
      --space-space-9x: 4rem;
      --space-space-8x: 3.2rem;
      --space-space-7x: 2.4rem;
      --space-space-6x: 2rem;
      --space-space-5x: 1.6rem;
      --space-space-4x: 1.2rem;
      --space-space-3x: 0.8rem;
      --space-space-1x: 0.2rem;
      --space-space-9xx: 5rem;

      /* lineheight */
      --aura-line-height-132: 2.64rem;
      --aura-line-height-130: 1.56rem;
      --aura-line-height-140: 1.96rem;
      --aura-line-height-36: 3.6rem;

      /* grid */
      --grid-margin: 1.2rem;
      --grid-gutter: 1.2rem;

      /* type : details */
      --type-details-1-font: normal normal 400 var(--font-size-1) var(--type-base-font-family);
      --type-details-2-font: normal normal 400 var(--font-size-1) var(--type-base-font-family);
      --type-details-3-font: normal normal 400 var(--font-size-2) var(--type-base-font-family);
      --type-details-4-font: normal normal 400 var(--font-size-3) var(--type-base-font-family);
      --type-details-5-font: normal normal 400 var(--font-size-4) var(--type-base-font-family);
      --type-details-6-font: normal normal 400 var(--font-size-5) var(--type-base-font-family);
      --type-details-7-font: normal normal 400 var(--font-size-6) var(--type-base-font-family);
      --type-details-8-font: normal normal 400 var(--font-size-7) var(--type-base-font-family);
      --type-details-9-font: normal normal 400 var(--font-size-8) var(--type-base-font-family);
      --type-details-10-font: normal normal 400 var(--font-size-9) var(--type-base-font-family);
      --type-details-11-font: normal normal 400 var(--font-size-10) var(--type-base-font-family);
      --type-details-12-font: normal normal 400 var(--font-size-11) var(--type-base-font-family);

      /* type semibold: details */
      --type-details-semibold-1-font: normal normal 600 var(--font-size-1) var(--type-base-font-family-semibold);
      --type-details-semibold-2-font: normal normal 600 var(--font-size-1) var(--type-base-font-family-semibold);
      --type-details-semibold-3-font: normal normal 600 var(--font-size-2) var(--type-base-font-family-semibold);
      --type-details-semibold-4-font: normal normal 600 var(--font-size-3) var(--type-base-font-family-semibold);
      --type-details-semibold-5-font: normal normal 600 var(--font-size-4) var(--type-base-font-family-semibold);
      --type-details-semibold-6-font: normal normal 600 var(--font-size-5) var(--type-base-font-family-semibold);
      --type-details-semibold-7-font: normal normal 600 var(--font-size-6) var(--type-base-font-family-semibold);
      --type-details-semibold-8-font: normal normal 600 var(--font-size-7) var(--type-base-font-family-semibold);
      --type-details-semibold-9-font: normal normal 600 var(--font-size-8) var(--type-base-font-family-semibold);
      --type-details-semibold-10-font: normal normal 600 var(--font-size-9) var(--type-base-font-family-semibold);
      --type-details-semibold-11-font: normal normal 600 var(--font-size-10) var(--type-base-font-family-semibold);
      --type-details-semibold-12-font: normal normal 600 var(--font-size-11) var(--type-base-font-family-semibold);
    }
}

@media (width >=1024px) {
  :root {
    --nav-height: 14.6rem;
    --nav-height-home: 14.6rem;
  }
}

:root {
  /* AEO base design */

  /* Fallback for browsers that do not support Custom Properties */
  --vh: 100vh;

  /* colors */
  --color-primary-a: #24272a;
  --color-primary-b: #182c52;
  --color-primary-c: #becde2;
  --color-primary-d: #e9eef5;
  --color-secondary-a: #407499;
  --color-secondary-b: #78a5c5;
  --color-secondary-c: #d6e4ee;
  --color-tertiary-a: #385adc;
  --color-tertiary-b: #e51b23;
  --color-tertiary-c: #0661bb;
  --color-tertiary-d: #1f3fb7;
  --color-primary-alt-a: #328648;
  --color-primary-alt-b: #37653b;
  --color-warning-20: #fff0c5;
  --color-text-main: var(--color-primary-a);
  --color-primary-alt-c: #51b56b;
  --color-primary-alt-d: #43e36d;
  --color-primary-alt-e: #eef7d3;
  --color-white: #fff;
  --color-text-dark: #666;
  --color-text-light: #acacac;
  --color-text-link: #666;
  --color-text-trend-bar-bold: #fd9400;
  --color-disabled-default-text: #989898;
  --color-fill-alt: #f5f5f5;
  --color-neutral-20: #f5f5f5;
  --color-neutral-30: #eee;
  --color-neutral-40: #e4e4e4;
  --color-neutral-50: #FFF;
  --color-neutral-60: #ccc;
  --color-neutral-70: #ddd;
  --color-neutral-80: #bcbcbc;
  --neutral-neutral-100: #282828;
  --color-neutral-110: #EFEFEF;
  --color-button-secondary-default-icon: #333;
  --color-form-error: #d92d20;
  --color-promo-alternate: #78A5C5;
  --background-color: var( --color-white);
  --color-opacity-8: rgb(0 0 0 / 8%);
  --color-opacity-white-75: rgba(255 255 255 / 75%);
  --overlay-overlay-white-25:rgba(255 255 255 / 25%);
  --color-footer-border: var(--color-neutral-30);
  --color-overlay-black-75: rgba(0 0 0/ 75%);
  --color-overlay-black-20: rgba(0 0 0 / 20%);
  --color-rating-background-a: #DDE8F4;
  --color-rating-background-b: #E8EFF5;
  --color-success-100: #39B54A;
  --color-success-80: #5AD47F;
  --color-success-60: #ECFDF3;
  --color-location-pin: #182C52;
  --color-order-status: #fd9400;
  --color-order-info-80: #679bdf;
  --color-neutral-white: var(--color-white);
  --color-tlc-form-stroke: #E0DAD5;
  --color-text-text-dark: #605858;
  --color-text-text-main: #221d1d;


  /* Aura modal width */
  --aura-grid-col-6: 78rem;
  --aura-grid-width: 36rem;

   /* Aura fonts */
   --type-aura-font-family: 'aura regular', 'poppins regular fallback', 'helvetica neue';
   --type-aura-font-family-bold: 'aura bold', 'poppins bold fallback', 'helvetica neue';

  /* store finder */
  --sf-container-height: 75rem;
  --sf-container-height-2: 72rem;
  --sf-container-height-3: 66.4rem;
  --sf-height-1: 1rem;
  --sf-height-2: 2rem;
  --sf-height-3: 3rem;
  --sf-height-2-4: 2.4rem;
  --sf-height-4: 4rem;
  --sf-height-48: 4.8rem;
  --sf-height-0-4: 0.4rem;
  --sf-height-6: 48.2rem;
  --sf-height-3-5: 3.5rem;
  --sf-height-60: 60rem;
  --sf-height-1-5: 1.5rem;
  --sf-height-1-4: 1.4rem;
  --sf-height-1-6: 1.6rem;
  --sf-height-2-6: 2.6rem;
  --sf-height-28: 28rem;
  --sf-height-22-6: 22.6rem;
  --sf-height-61-7: 61.7rem;
  --sf-height-38: 3.8rem;
  --sf-height-52: 5.2rem;
  --sf-height-2x-1: 0.9rem;
  --sf-width-1: 1rem;
  --sf-width-3-5: 3.5rem;
  --sf-width-2: 2rem;
  --sf-width-128: 12.8rem;
  --sf-width-12-6: 12.6rem;
  --sf-width-29-2: 29.2rem;
  --sf-width-2-4: 2.4rem;
  --sf-width-3: 3rem;
  --sf-width-4: 4rem;
  --sf-width-1-5: 1.5rem;
  --sf-width-1-4: 1.4rem;
  --sf-width-1-6: 1.6rem;
  --sf-width-23: 23rem;
  --sf-width-17: 17.4rem;
  --sf-width-18-4: 18.4rem;
  --sf-width-18-96: 18.96rem;
  --sf-width-18: 18rem;
  --sf-width-27-4: 27.4rem;
  --sf-width-32-2: 32.2rem;
  --sf-width-38-2: 38.2rem;
  --sf-width-2x-1: 0.9rem;
  --sf-width-7: 7rem;
  --sf-width-308: 30.8rem;
  --sf-height-11: 11rem;
  --sf-width-86: 8.6rem;
  --sf-width-26-4: 26.4rem;
  --sf-width-28: 28rem;
  --sf-width-95: 95.4rem;
  --sf-width-60: 60rem;
  --sf-width-100: 100rem;
  --sf-width-648: 64.8rem;
  --sf-height-64: 6.4rem;
  --sf-height-644: 64.4rem;
  --sf-height-19-2: 19.2rem;
  --sf-height-24-8: 24.8rem;
  --sf-width-31: 31rem;
  --sf-width-36: 36rem;
  --sf-width-6-5: 6.5rem;
  --sf-height-6-5: 6.5rem;
  --sf-width-108: 10.8rem;
  --sf-width-336: 33.6rem;

  /* wishlist quick view */
  --qw-width-16: 16rem;
  --qw-height-3-4: 3.4rem;

  /* embed block */
  --embed-height-1: 2.2rem;
  --embed-height-1-2: 2.24rem;
  --embed-height-2: 1rem;
  --embed-width-1: 2.2rem;
  --embed-width-2: 80rem;
  --embed-width-96: 96rem;
  --embed-width-2-3-6: 2.36rem;
  --embed-width-28: 28rem;
  --embed-width-3-5: 35rem;

  /* font size */
  --font-size-sm: 0.75rem;
  --font-size-0x: 0.875rem;
  --font-size-1: 1rem;
  --font-size-2: 1.2rem;
  --font-size-2-1: 1.3rem;
  --font-size-3: 1.4rem;
  --font-size-3-1: 1.5rem;
  --font-size-4: 1.6rem;
  --font-size-5: 1.8rem;
  --font-size-6: 2rem;
  --font-size-7: 2.4rem;
  --font-size-8: 2.8rem;
  --font-size-9: 3.2rem;
  --font-size-10: 4rem;
  --font-size-11: 5.6rem;
  --font-size-12: 6.4rem;
  --font-size-13: 1.3rem;
  --font-size-14: 14px;
  --font-size-16: 1.6rem;
  --font-size11: 1.1rem;
  --font-size9: 0.9rem;
  --font-size18: 1.8rem;
  --font-size-22: 2.2rem;
  --font-size38: 3.8rem;
  --font-size34: 3.4rem;
  --font-size46: 4.6rem;

  /* font weight */
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;

  /* text size */
  --text-xxs: 1rem;
  --text-xs: 1.2rem;
  --text-s: 1.4rem;
  --text-m: 1.6rem;
  --text-l-2: 1.8rem;
  --text-l-1: 1.82rem;
  --text-xl: 2rem;
  --text-xxl: 3rem;
  --text-xxs-1: 0.813rem;
  --text-xxs-81: 0.81rem;

  /* spacing */
  --space-space-11x: 8rem;
  --space-space-3-0-2: 3.02rem;
  --space-space-14x: 10rem;
  --space-space-10x: 6.4rem;
  --space-space-8x: 4rem;
  --space-space-9x: 5rem;
  --space-space-7x: 3.2rem;
  --space-space-6x: 2.4rem;
  --space-space-5x: 2rem;
  --space-space-4x: 1.6rem;
  --space-space-3x: 1.2rem;
  --space-space-3x-2: 1.1rem;
  --space-space-3x-1: 0.06rem;
  --space-space-3x-4: 0.0625rem;
  --space-space-2x-2: 1rem;
  --space-space-2x: 0.8rem;
  --space-space-3x-3: 0.25rem;
  --space-space-2x-1: 0.9rem;
  --space-space-1x-2: 0.7rem;
  --space-space-1x-2-neg: -0.7rem;
  --space-space-1x-3: 0.75rem;
  --space-space-22: 2.2rem;
  --space-space-42: 4.2rem;
  --space-space-1x-4: 0.46rem;
  --space-space-1x: 0.4rem;
  --space-space-0-3: 0.3rem;
  --space-space-0x: 0rem;
  --space-space-0x-1: 0.2rem;
  --space-space-99: 9.9rem;
  --space-space-96: 9.6rem;
  --space-space-96-1: 1.96rem;
  --space-space-64: 6.4rem;
  --space-space-6-4: -6.4rem;
  --space-space-0-1: -0.1rem;
  --space-space-0-2: -0.2rem;
  --space-space-68: 6.8rem;
  --space-space-62: 6.2rem;
  --space-space-60: 6rem;
  --space-space-48: 4.8rem;
  --space-space-51: 5.1rem;
  --space-space-47: 4.7rem;
  --space-space-48-1: 4.75rem;
  --space-space-44: 4.4rem;
  --space-space-40: 4rem;
  --space-space-45: 4.5rem;
  --space-space-30: 3rem;
  --space-space-32: 3.2rem;
  --space-space-34: 3.4rem;
  --space-space-33: 3.3rem;
  --space-space-35: 3.5rem;
  --space-space-36: 3.6rem;
  --space-space-38: 3.8rem;
  --space-space-24: 2.4rem;
  --space-space-23: 2.3rem;
  --space-space-23-1: 2.376rem;
  --space-space-25: 2.5rem;
  --space-space-28: 2.8rem;
  --space-space-28-1: 2.81rem;
  --space-space-26: 2.6rem;
  --space-space-20: 2rem;
  --space-space-19: 1.9rem;
  --space-space-16: 1.6rem;
  --space-space-16-neg: -1.6rem;
  --space-space-20-neg: -2rem;
  --space-space-15: 1.5rem;
  --space-space-17: 1.7rem;
  --space-space-15-1: 1.5625rem;
  --space-space-15-3: 1.56rem;
  --space-space-14: 1.4rem;
  --space-space-12: 1.2rem;
  --space-space-13: 1.3rem;
  --space-space-10: 1rem;
  --space-space-8: 0.8rem;
  --space-space-6: 0.6rem;
  --space-space-4: 0.4rem;
  --space-space-2: 0.2rem;
  --space-space-18: 1.8rem;
  --space-space-3: 0.3rem;
  --space-space-21: 21rem;
  --space-space-70: 7rem;
  --space-space-75: 7.5rem;
  --space-space-76: 7.6rem;
  --space-space-31: 0.31rem;
  --space-space-488: 48.8rem;
  --spacing-xxxsmall: 0.1rem;
  --spacing-xxxsmall-1: 0.114rem;
  --spacing-xxsmall: 0.4rem;
  --spacing-xxsmall-2: 0.5rem;
  --spacing-xsmall: 0.8rem;
  --spacing-xsmall-2: 1.2rem;
  --spacing-small: 1.6rem;
  --spacing-medium: 2.4rem;
  --spacing-big: 3.2rem;
  --spacing-xbig: 4rem;
  --spacing-xxbig: 4.8rem;
  --spacing-large: 6.4rem;
  --spacing-large-big: 6.5rem;
  --spacing-large-big-n: -6.5rem;
  --spacing-large-1: 6.25rem;
  --spacing-xlarge: 7.2rem;
  --spacing-xxlarge: 9.6rem;
  --spacing-huge: 12rem;
  --spacing-xhuge: 14.4rem;
  --spacing-xxhuge: 19.2rem;
  --spacing-xxhuge-2: 27rem;
  --spacing-xxhuge-27-4: 27.4rem;
  --spacing-xxxhuge: 29rem;
  --radius-radius-xs: 1.6rem;
  --radius-radius-none: 0;
  --radius-radius-3xl: 4.8rem;
  --space-space-125: 1.25rem;
  --space-space-155: 1.55rem;
  --space-space-50: 5rem;
  --space-space-54: 5.4rem;
  --space-space-52: 5.2rem;
  --space-space-84: 8.4rem;
  --list-spacing-3: 3rem;
  --space-space-115: 11.5rem;
  --space-space-90: 9rem;
  --space-space-117: 11.25rem;
  --space-space-15-2: 15rem;
  --space-space-116: 0.031rem;
  --space-space-265: 26.5rem;
  --space-space-72: 7.2rem;
  --space-space-78: 7.8rem;
  --space-space-46: 4.6rem;
  --space-space-124: 12.4rem;
  --space-space-308: 30.8rem;
  --space-space-280: 28rem;
  --space-space-86: 8.6rem;
  --space-space-110: 11rem;
  --space-space-57: 5.7rem;
  --space-space-58: 5.8rem;
  --space-space-21-7: 21.7rem;
  --space-space-21-8: 21.8rem;
  --space-space-140: 14rem;
  --space-space-145: 14.5rem;
  --space-space-160: 16rem;
  --space-space-162: 16.2rem;
  --space-space-95: 9.5rem;
  --space-space-281: 28.1rem;
  --space-space-360: 36rem;
  --space-space-500: 50rem;
  --space-space-600: 60rem;
  --space-space-650: 65rem;
  --space-space-968: 96.8rem;
  --space-space-471: 47.1rem;
  --space-space-11: 1.1rem;
  --space-space-92: 9.2rem;
  --space-space-148: 14.8rem;
  --spacing-xlarge-71: 7.1rem;
  --spacing-xlarge-60-8: 6.08rem;
  --space-space-0-4: 4%;
  --space-space-4-5: 4.5px;
  --space-space-80: 8rem;
  --space-space-102: 10.2rem;
  --space-space-0-72: 0.72rem;
  --space-space-0-48: 0.48rem;
  --space-space-8px: 0.5rem;
  --space-space-16px: 1rem;
  --space-space-214: 21.4rem;
  --space-space-320: 32rem;
  --space-space-2-24: 2.24rem;
  --space-space-130: 130rem;
  --space-space-74: 7.4rem;
  --space-space-56: 5.6rem;

  /* grid */
  --grid-full-frame: 168rem;
  --grid-margin: 4rem;
  --grid-gutter: 3.2rem;
  --grid-col-1: 12.5rem;
  --grid-col-2: 24rem;
  --grid-col-3: 37.6rem;
  --grid-col-4: 51.2rem;
  --grid-col-5: 64rem;
  --grid-col-6: 78.4rem;
  --grid-col-7: 48rem;
  --grid-col-8: 105.6rem;
  --grid-col-9: 21.1rem;
  --grid-col-10: 132.8rem;
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 1.6rem;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 1.6rem;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 2.4rem;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 2.4rem;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 2.4rem;
  --grid-6-gutters: 2rem;
  --grid-0-3-gutters: 0.3rem;
  --grid-1-2-gutters: 1.2rem;
  --grid-08-gutters: 0.8rem;
  --grid-04-gutters: 0.4rem;
  --grid-lg-max-width: 160rem;
  --grid-width-46: 46rem;
  --grid-height-27: 27rem;
  --grid-height-16: 16rem;

  /* border shape */
  --shape-border-radius-1: 3px;
  --shape-border-radius-2: 8px;
  --shape-border-radius-3: 24px;
  --shape-border-radius-4: 2rem;
  --shape-border-radius-5: 4px;
  --shape-border-radius-6: 4.8rem;
  --shape-border-radius-7: 0.4rem;
  --shape-border-width-1: 1px;
  --shape-border-width-10: 10px;
  --shape-border-width-9: 9px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 0.2rem;
  --shape-border-width-4: 4px;
  --shape-border-width-16: 16px;
  --shape-border-width-11: 11px;
  --shape-border-width-15: 15px;
  --shape-border-width-5: 0.5rem;
  --shape-border-width-6: 0.6rem;
  --shape-border-width-8: 0.8rem;
  --shape-border-width-01: 0.1rem;
  --box-shadow-checkout: 0 -1px 20px 9px rgb(0 0 0 / 7%);

  /* line heights */
  --line-height-0-956: 0.956;
  --line-height-1: 1;
  --line-height-1-16: 1.16;
  --line-height-1-18: 1.18;
  --line-height-12: 1.2;
  --line-height-1-57: 1.57;
  --line-height-1-71: 1.71;
  --line-height-4-083: 4.083;

  /* shape attributes */
  --shape-shadow-1: 0 0 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-2: 0 2px 16px 0 rgb(0 0 0 / 16%);
  --shape-shadow-3: 0 2px 3px 0 rgb(0 0 0 / 16%);
  --shape-shadow-4: 0 -4px 4px 0 rgb(0 0 0 / 4%);
  --shape-shadow-5: 0 -0 3px 0 rgb(43 43 43 / 15%);
  --shape-icon-stroke-1: 0.1rem;
  --shape-icon-stroke-2: 0.15rem;
  --shape-icon-stroke-3: 0.2rem;
  --shape-icon-stroke-4: 0.4rem;

  /* type : base */
  --type-base-font-family: "Avenir Next", "helvetica neue";
  --type-base-font-family-semibold: "Avenir Next SemiBold", "helvetica neue";
  --type-base-font-family-bold: "Avenir Next Bold", "helvetica neue";

  /* type : display */
  --type-display-1-font: normal normal 300 6rem/7.2rem
    var(--type-base-font-family);
  --type-display-1-letter-spacing: 0.04em;
  --type-display-2-font: normal normal 300 4.8rem/5.6rem
    var(--type-base-font-family);
  --type-display-2-letter-spacing: 0.04em;
  --type-display-3-font: normal normal 300 3.4rem/4rem
    var(--type-base-font-family);
  --type-display-3-letter-spacing: 0.04em;

  /* type : headline */
  --type-headline-1-font: normal normal 400 2.4rem/3.2rem
    var(--type-base-font-family);
  --type-headline-1-letter-spacing: 0.04em;
  --type-headline-2-default-font: normal normal 300 2rem/2.4rem
    var(--type-base-font-family);
  --type-headline-2-default-letter-spacing: 0.04em;
  --type-headline-2-strong-font: normal normal 400 2rem/2.4rem
    var(--type-base-font-family);
  --type-headline-2-strong-letter-spacing: 0.04em;

  /* Heading */
    --type-heading-1: normal normal var(--font-weight-5) var(--font-size-10)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-semibold-1: normal normal var(--font-weight-6) var(--font-size-10)/var(--line-height-l) var(--type-base-font-family-semibold);
    --type-heading-bold-1: normal normal var(--font-weight-7) var(--font-size-10)/var(--line-height-l) var(--type-base-font-family-bold);
    --type-heading-2: normal normal var(--font-weight-4) var(--font-size-9)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-medium-2: normal normal var(--font-weight-5) var(--font-size-9)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-semibold-2: normal normal var(--font-weight-6) var(--font-size-9)/var(--line-height-l) var(--type-base-font-family-semibold);
    --type-heading-bold-2: normal normal var(--font-weight-7) var(--font-size-9)/var(--line-height-l) var(--type-base-font-family-bold);
    --type-heading-3: normal normal var(--font-weight-4) var(--font-size-8)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-medium-3: normal normal var(--font-weight-5) var(--font-size-8)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-semibold-3: normal normal var(--font-weight-6) var(--font-size-8)/var(--line-height-l) var(--type-base-font-family-semibold);
    --type-heading-bold-3: normal normal var(--font-weight-7) var(--font-size-8)/var(--line-height-l) var(--type-base-font-family-bold);
    --type-heading-4: normal normal var(--font-weight-4) var(--font-size-7)/var(--line-height-l-2) var(--type-base-font-family);
    --type-heading-medium-4: normal normal var(--font-weight-5) var(--font-size-7)/var(--line-height-l-2) var(--type-base-font-family);
    --type-heading-semibold-4: normal normal var(--font-weight-6) var(--font-size-7)/var(--line-height-l-2) var(--type-base-font-family-semibold);
    --type-heading-bold-4: normal normal var(--font-weight-7) var(--font-size-7)/var(--line-height-l-2) var(--type-base-font-family-bold);
    --type-heading-5: normal normal var(--font-weight-4) var(--font-size-6)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-medium-5: normal normal var(--font-weight-5) var(--font-size-6)/var(--line-height-l) var(--type-base-font-family);
    --type-heading-semibold-5: normal normal var(--font-weight-6) var(--font-size-6)/var(--line-height-l) var(--type-base-font-family-semibold);
    --type-heading-bold-5: normal normal var(--font-weight-7) var(--font-size-6)/var(--line-height-l) var(--type-base-font-family-bold);
    --type-heading-6: normal normal var(--font-weight-4) var(--font-size-4)/var(--line-height-xxs) var(--type-base-font-family);
    --type-heading-medium-6: normal normal var(--font-weight-5) var(--font-size-4)/var(--line-height-xxs) var(--type-base-font-family);
    --type-heading-semibold-6: normal normal var(--font-weight-6) var(--font-size-4)/var(--line-height-xxs) var(--type-base-font-family-semibold);
    --type-heading-bold-6: normal normal var(--font-weight-7) var(--font-size-4)/var(--line-height-xxs) var(--type-base-font-family-bold);

  /* type : body */
  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem
    var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0.04em;
  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem
    var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0.04em;
  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem
    var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0.04em;
  --type-body-2-default-font: normal normal 300 1.4rem/2rem
    var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0.04em;
  --type-body-2-strong-font: normal normal 400 1.4rem/2rem
    var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0.04em;
  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem
    var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0.04em;

  /* type : details */
  --type-details-1-font: normal normal 400 var(--font-size-1)
    var(--type-base-font-family);
  --type-details-2-font: normal normal 400 var(--font-size-2)
    var(--type-base-font-family);
  --type-details-3-font: normal normal 400 var(--font-size-3)
    var(--type-base-font-family);
  --type-details-4-font: normal normal 400 var(--font-size-4)
    var(--type-base-font-family);
  --type-details-5-font: normal normal 400 var(--font-size-5)
    var(--type-base-font-family);
  --type-details-6-font: normal normal 400 var(--font-size-6)
    var(--type-base-font-family);
  --type-details-7-font: normal normal 400 var(--font-size-7)
    var(--type-base-font-family);
  --type-details-8-font: normal normal 400 var(--font-size-8)
    var(--type-base-font-family);
  --type-details-9-font: normal normal 400 var(--font-size-9)
    var(--type-base-font-family);
  --type-details-10-font: normal normal 400 var(--font-size-10)
    var(--type-base-font-family);
  --type-details-11-font: normal normal 400 var(--font-size-11)
    var(--type-base-font-family);
  --type-details-12-font: normal normal 400 var(--font-size-12)
    var(--type-base-font-family);
  --type-details-13-font: normal normal 400 var(--font-size-13)
    var(--type-base-font-family);

  /** type : details medium */
  --type-details-medium-1-font: normal normal 500 var(--font-size-1) var(--type-base-font-family);
  --type-details-medium-2-font: normal normal 500 var(--font-size-2) var(--type-base-font-family);
  --type-details-medium-3-font: normal normal 500 var(--font-size-3) var(--type-base-font-family);

  /** type : details semibold */
  --type-details-semibold-1-font: normal normal 600 var(--font-size-1)
    var(--type-base-font-family-semibold);
  --type-details-semibold-2-font: normal normal 600 var(--font-size-2)
    var(--type-base-font-family-semibold);
  --type-details-semibold-3-font: normal normal 600 var(--font-size-3)
    var(--type-base-font-family-semibold);
  --type-details-semibold-4-font: normal normal 600 var(--font-size-4)
    var(--type-base-font-family-semibold);
  --type-details-semibold-5-font: normal normal 600 var(--font-size-5)
    var(--type-base-font-family-semibold);
  --type-details-semibold-6-font: normal normal 600 var(--font-size-6)
    var(--type-base-font-family-semibold);
  --type-details-semibold-7-font: normal normal 600 var(--font-size-7)
    var(--type-base-font-family-semibold);
  --type-details-semibold-8-font: normal normal 600 var(--font-size-8)
    var(--type-base-font-family-semibold);
  --type-details-semibold-9-font: normal normal 600 var(--font-size-9)
    var(--type-base-font-family-semibold);
  --type-details-semibold-10-font: normal normal 600 var(--font-size-10)
    var(--type-base-font-family-semibold);
  --type-details-semibold-11-font: normal normal 600 var(--font-size-11)
    var(--type-base-font-family-semibold);
  --type-details-semibold-12-font: normal normal 600 var(--font-size-12)
    var(--type-base-font-family-semibold);
  --type-details-semibold-18-font: normal normal 600 var(--font-size-18)
    var(--type-base-font-family-semibold);

  /* type : button */
  --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 : bold */
  --type-details-bold-3-font: normal normal 700 var(--font-size-3)
    var(--type-base-font-family-bold);
  --type-details-bold-4-font: normal normal 700 var(--font-size-13)
    var(--type-base-font-family-bold);
  --type-details-bold-5-font: normal normal 700 var(--font-size-4)
    var(--type-base-font-family);
  --type-details-bold-6-font: normal normal 700 var(--font-size-4)
    var(--type-base-font-family-bold);

  /* type : captions */
  --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 : overline */
  --type-details-overline-font: normal normal 400 1.2rem/2rem
    var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.16em;

  /* Additional tokens */
  --fixed-font-family: menlo, monaco, consolas, "courier new", monospace;
  --nav-height: 6rem;
  --nav-height-home: 11rem;
  --breadcrumbs-height: 4.4rem;
  --breadcrumbs-font-size: 1.4rem;
  --nav-height-with-breadcrumb: calc(
    var(--nav-height) + var(--breadcrumbs-height)
  );

  /* banner tokens */
  --color-background-banner: var(--color-neutral-50);
  --color-text-banner-vignette: var(--color-neutral-50);
  --color-text-banner-header: var(--color-neutral-50);
  --color-text-banner-preamble: var(--color-neutral-50);
  --color-text-banner-usp: var(--color-neutral-50);
  --color-text-banner-offer: var(--color-neutral-50);
  --color-background-banner-cta: var(--color-neutral-50);
  --color-text-banner-cta: var(--color-brand-600);
  --color-background-banner-countdown: transparent;
  --color-text-banner-countdown: var(--color-brand-600);

  /** price tag tokens */
  --color-background-banner-price: var(--color-neutral-50);
  --color-text-banner-price: var(--color-brand-600);
  --opacity-banner-price: 0.7;
  --opacity-swatch-image: 0.6;

  /* shimmer tokens */
  --shimmer-image-slide-start: var(--color-neutral-450);
  --shimmer-image-slide-mid: var(--color-neutral-200);
  --shimmer-image-slide-end: var(--color-neutral-450);
}

@font-face {
  font-family: "Avenir Next regular fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 107%;
  descent-override: 32%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Avenir Next semibold fallback";
  src: local("Arial");
  size-adjust: 105%;
  ascent-override: 102%;
  descent-override: 29%;
  line-gap-override: 2%;
}

@font-face {
  font-family: "Avenir Next bold fallback";
  src: local("Arial");
  size-adjust: 106%;
  ascent-override: 102%;
  descent-override: 35%;
  line-gap-override: 0%;
}

@media (width <=767px) {
  :root {
    --text-xs: 1rem;
    --text-s: 1.2rem;
    --text-m: 1.4rem;
    --text-l: 1.6rem;

    /* spacing */
    --space-space-10x: 4.8rem;
    --space-space-9x: 4rem;
    --space-space-8x: 3.2rem;
    --space-space-7x: 2.4rem;
    --space-space-6x: 2rem;
    --space-space-5x: 1.6rem;
    --space-space-4x: 1.2rem;
    --space-space-3x: 0.8rem;
    --space-space-1x: 0.2rem;
    --space-space-9xx: 5rem;

    /* lineheight */
    --aura-line-height-132: 2.64rem;
    --aura-line-height-130: 1.56rem;
    --aura-line-height-140: 1.96rem;
    --aura-line-height-36: 3.6rem;
    --line-height-4-9: 4.9rem;
    --line-height-4-16: 4.16rem;
    --line-height-2-08: 2.08rem;
    --line-height-36-4: 3.64rem;


    /* grid */
    --grid-margin: 1.2rem;
    --grid-gutter: 1.2rem;

    /* Additional tokens */
    --nav-height: 24.2rem;
    --nav-height-5-9: 5.9rem;

    /* type : details */
    --type-details-1-font: normal normal 400 var(--font-size-1)
      var(--type-base-font-family);
    --type-details-2-font: normal normal 400 var(--font-size-1)
      var(--type-base-font-family);
    --type-details-3-font: normal normal 400 var(--font-size-2)
      var(--type-base-font-family);
    --type-details-4-font: normal normal 400 var(--font-size-3)
      var(--type-base-font-family);
    --type-details-5-font: normal normal 400 var(--font-size-4)
      var(--type-base-font-family);
    --type-details-6-font: normal normal 400 var(--font-size-5)
      var(--type-base-font-family);
    --type-details-7-font: normal normal 400 var(--font-size-6)
      var(--type-base-font-family);
    --type-details-8-font: normal normal 400 var(--font-size-7)
      var(--type-base-font-family);
    --type-details-9-font: normal normal 400 var(--font-size-8)
      var(--type-base-font-family);
    --type-details-10-font: normal normal 400 var(--font-size-9)
      var(--type-base-font-family);
    --type-details-11-font: normal normal 400 var(--font-size-10)
      var(--type-base-font-family);
    --type-details-12-font: normal normal 400 var(--font-size-11)
      var(--type-base-font-family);

    /* type semibold: details */
    --type-details-semibold-1-font: normal normal 600 var(--font-size-1)
      var(--type-base-font-family-semibold);
    --type-details-semibold-2-font: normal normal 600 var(--font-size-1)
      var(--type-base-font-family-semibold);
    --type-details-semibold-3-font: normal normal 600 var(--font-size-2)
      var(--type-base-font-family-semibold);
    --type-details-semibold-4-font: normal normal 600 var(--font-size-3)
      var(--type-base-font-family-semibold);
    --type-details-semibold-5-font: normal normal 600 var(--font-size-4)
      var(--type-base-font-family-semibold);
    --type-details-semibold-6-font: normal normal 600 var(--font-size-5)
      var(--type-base-font-family-semibold);
    --type-details-semibold-7-font: normal normal 600 var(--font-size-6)
      var(--type-base-font-family-semibold);
    --type-details-semibold-8-font: normal normal 600 var(--font-size-7)
      var(--type-base-font-family-semibold);
    --type-details-semibold-9-font: normal normal 600 var(--font-size-8)
      var(--type-base-font-family-semibold);
    --type-details-semibold-10-font: normal normal 600 var(--font-size-9)
      var(--type-base-font-family-semibold);
    --type-details-semibold-11-font: normal normal 600 var(--font-size-10)
      var(--type-base-font-family-semibold);
    --type-details-semibold-12-font: normal normal 600 var(--font-size-11)
      var(--type-base-font-family-semibold);
  }
}

:lang(ar) {
  --type-base-font-family: "Noto Sans Arabic", "helvetica neue";
  --type-base-font-family-semibold: "Noto Sans Arabic SemiBold", "helvetica neue";
  --type-base-font-family-bold: "Noto Sans Arabic Bold", "helvetica neue";
}

/*
 * 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.
 */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Fully transparent */
}

html {
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
}

div.dropin-design {
  --type-base-font-family: 'hm sans regular', 'hm sans regular fallback', 'helvetica neue';
}

body {
  font: var(--type-body-1-strong-font);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin: 0;
  line-height: 1.4;
  color: var(--color-brand-700);
  background-color: var(--background-color);
}

html[dir='rtl'] body,
html[dir='rtl'] body * {
  letter-spacing: normal;
}

header {
  height: var(--nav-height);
  position: fixed;
  width: 100%;
  background-color: var(--color-neutral-50);
  z-index: 10;
}

h1 {
  font-size: var(--font-size-10);
  line-height: var(--line-height-m);
}

h2 {
  font-size: var(--font-size-9);
  line-height: var(--line-height-m);
}

h3 {
  font-size: var(--font-size-8);
  line-height: var(--line-height-m);
}

h4 {
  font-size: var(--font-size-7);
  line-height: var(--line-height-l);
}

h5 {
  font-size: var(--font-size-6);
  line-height: var(--line-height-l);
}

h6 {
  font-size: var(--font-size-4);
  line-height: var(--line-height-xl);
}

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: 1px solid var(--color-neutral-300);
}

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

code,
samp {
  padding: 0.125em;
}

pre {
  overflow: scroll;
}

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

/* links */

a:any-link {
  color: var(--color-text-main);
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary-30);
}

u {
  text-underline-offset: 0.6rem;
}

a>u,
button:not([class^='dropin'])>u {
  text-decoration: none;
}

/* buttons */

a.button:any-link,
button {
  font: var(--type-button-2-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  text-decoration: none;
  border: var(--shape-border-width-1) solid transparent;
  padding: var(--space-space-3x) var(--space-space-6x);
  text-align: center;
  cursor: pointer;
  color: var(--color-neutral-50);
  background-color: var(--color-brand-700);
  margin: 1.6rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 4.8rem;
  justify-content: center;
}

button:focus {
  outline: none;
}

a.button:hover,
button:hover {
  background-color: var(--color-secondary-50);
  transition: background-color ease-out 300ms;
}

a.button::after,
button::after {
  display: block;
  background-image: url('/icons/ic-loader.svg');
  background-repeat: no-repeat;
  background-position: center center;
  content: '';
  height: 0;
  width: 0;
  padding: 0.25rem;
  opacity: 0;
}

a.button.loader::after,
button.loader::after {
  opacity: 0.9;
  height: 4.8rem;
  width: 4.8rem;
}

/* stylelint-disable no-descending-specificity */

html[dir='rtl'] a.button:any-link,
button {
  letter-spacing: normal;
}

button.loader>span,
a.button.loader>span {
  display: none;
}

a.button.disabled,
button:disabled,
button:disabled:hover {
  background-color: var(--color-neutral-300);
  cursor: unset;
  color: var(--color-secondary-40);
}

a.button.secondary,
button.secondary {
  background-color: var(--color-neutral-50);
  border: var(--shape-border-width-1) solid var(--color-neutral-black);
  color: var(--color-brand-700);
}

a.button.secondary:hover,
button.secondary:hover {
  color: var(--color-neutral-white);
  background-color: var(--color-secondary-100);
  border-color: var(--color-secondary-40);
}

input,
input::placeholder {
  font: var(--type-body-2-strong-font);
}

input[type="password"]::-ms-reveal {
  display: none;
}

main input {
  letter-spacing: var(--type-body-2-strong-letter-spacing);
  width: 100%;
  height: 4rem;
  max-width: 50rem;
  display: block;
  margin-bottom: 1rem;
  padding: 0.4rem 1.6rem;
  padding-inline-start: 0.8rem;
  box-sizing: border-box;
  border: 0.1rem solid var(--color-neutral-40);
  background-color: var(--background-color);
  font-size: var(--font-size-4);
}

main input::placeholder {
  font-size: var(--font-size-4);
}

main input:hover {
  border: 1px solid var(--color-neutral-700);
}

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

main blockquote p::before {
  content: '“';
  line-height: 0;
}

main blockquote p::after {
  content: '”';
  line-height: 0;
}

/* Shimmer Styles */

@keyframes placeholder-shimmer {
  50% {
    opacity: 0.6;
  }
}

.loading-shimmer {
  background-image: linear-gradient(90deg, var(--shimmer-image-slide-start) 0, var(--shimmer-image-slide-mid) 40px, var(--shimmer-image-slide-end) 80px);
  background-size: 200% 100%;
  animation: placeholder-shimmer 1.5s infinite;
  width: var(--placeholder-width);
  display: inline-block;
  min-height: 1rem;
  height: var(--placeholder-height);
  margin: 0 0 var(--space-space-5x) 0;
  border-radius: var(--shape-border-radius-5);
}

@media (width >=900px) {
  .section:not(.full-width)>div {
    width: 100%;
    max-width: 160rem;
    margin: auto;
  }
}

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

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

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

/* sections */

main .section {
  padding: var(--space-space-16);
}

main .section.personalization-container,
main .section.recommendation-container {
  padding: unset;
}

/* home page */

body.home header,
body.search header {
  height: var(--nav-height-home);
}

.home header+main {
  padding-top: var(--main-top-position);
}

.breadcrumb-wrapper {
  padding-top: var(--nav-height);
  height: 0;
  visibility: hidden;
}

.show-breadcrumb-mobile .breadcrumb-wrapper {
  visibility: visible;
  height: auto;
}

.breadcrumb-wrapper .breadcrumbs {
  display: block;
}

.error-page .sidebar-plp {
  display: none
}

.error-page .breadcrumb-wrapper {
  display: none;
}

.error-page .sidebar-main {
  margin-left: unset;
}

html[dir='rtl'] .error-page .sidebar-main {
  margin-left: 0;
  margin-right: unset;
}

@media (width >=600px) {
  main .section {
    padding: var(--space-space-16) var(--space-space-6x);
  }
}

@media (width <=767px) {
  h1 {
    font-size: var(--font-size-9);
  }

  h2 {
    font-size: var(--font-size-8);
  }

  h3 {
    font-size: var(--font-size-7);
    line-height: var(--line-height-l);
  }

  h4 {
    font-size: var(--font-size-6);
    line-height: var(--line-height-m);
  }

  h5 {
    font-size: var(--font-size-5);
    line-height: var(--line-height-l);
  }

  main input {
    max-width: 100%;
  }
}

/* section metadata */

main .section.light,
main .section.highlight {
  background-color: var(--color-neutral-500);
}

.section.bottom-separator-small {
  position: relative;
}

.section.bottom-separator-small::after {
  content: ' ';
  border-top: 1px solid var(--color-line-separator);
  width: 20rem;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.section.headline {
  padding: 0 var(--grid-margin);
}

.section.headline h2 {
  padding: var(--space-space-4x) 0 var(--space-space-24);
  font-weight: var(--font-weight-4);
  margin: auto;
  text-align: center;
}

.section.headline p {
  max-width: var(--grid-col-8);
  margin: auto;
  font-weight: var(--font-weight-4);
  line-height: var(--line-height-xl);
}

.section.col-8 {
  max-width: var(--grid-col-8);
  margin: auto;
}

.section.col-7 {
  max-width: var(--grid-col-7);
  margin: auto;
}

.section.col-6 {
  max-width: var(--grid-col-6);
  margin: auto;
}

.section.col-5 {
  max-width: var(--grid-col-5);
  margin: auto;
}

.section.col-4 {
  max-width: var(--grid-col-4);
  margin: auto;
}

.section.no-padding .default-content-wrapper {
  padding: 0;
}

@media (width >=1024px) {
  header {
    position: static;
  }

  header+main,
  body.home header+main,
  body.search header+main,
  body.shopping header+main,
  body.user header+main {
    padding-top: unset;
  }

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

  .narrow-width main {
    max-width: 102.6rem;
    margin: auto;
  }

  .narrow-width main .section {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Utility classes */

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

.no-padding {
  padding: unset !important;
}

@media (width >=768px) {
  .static-page main .default-content-wrapper p {
    font-size: var(--font-size-4);
    line-height: var(--line-height-xl);
  }

  .section.headline p {
    padding: 0 80px;
  }
}

/* Modal */

body.modal-open {
  overflow: hidden;
}

.modal {
  width: 100%;
}

.modal dialog {
  overscroll-behavior: none;
  border: 1px solid var(--color-text-light);
  width: 36rem;
  padding: unset;
}

.modal dialog .modal-header {
  flex-direction: row;
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--space-space-4x);
  justify-content: center;
  align-items: center;
  gap: var(--space-space-3x);
  align-self: stretch;
  height: 6rem;
  background-color: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-text-light);
}

.modal dialog .modal-header h4 {
  flex: 1 0 0;
  text-align: center;
  height: 100%;
  margin: 0;
  font-weight: var(--font-weight-4);
  color: var(--color-text-main);
  border-bottom: none;
}

.modal dialog .modal-content {
  overflow-y: auto;
  overscroll-behavior: none;
  padding: var(--space-space-4x);
  max-height: calc(var(--vh, 1vh) * 100 - 6rem);
}

.modal dialog::backdrop {
  background-color: rgb(0 0 0 / 50%);
}

.modal .modal-header>span,
.modal .modal-close {
  height: 2.4rem;
  width: 2.4rem;
  margin: unset;
  background: none;
  padding: unset;
  border: none;
}

.modal-header .icon-close {
  height: 2.4rem;
  width: 2.4rem;
}

.modal dialog .section {
  padding: 0;
}

@media (width > 767px) {
  .modal dialog {
    width: 44rem;
  }

  .modal .modal-header {
    padding: var(--space-space-4x);
    gap: var(--space-space-3x);
  }

  .modal .overlay-text {
    padding: var(--space-space-6x) var(--space-space-4x);
  }

  .modal dialog .modal-content {
    max-height: calc(100vh - 9rem);
    padding: var(--space-space-6x) var(--space-space-3x);
  }
}

/* default content wrapper */

main .default-content-wrapper a {
  color: var(--color-text-main);
  text-decoration: underline;
}

main .default-content-wrapper a:hover:not(.button) {
  color: inherit;
}

.default-content-wrapper ul {
  padding-inline-start: var(--space-space-4x);
}

/* section variants */

.section.info>div {
  display: flex;
  flex-direction: column;
  padding: var(--space-space-40) var(--space-space-32);
  justify-content: center;
  align-items: center;
  gap: var(--space-space-4);
  flex: 1 0 0;
  border-radius: var(--radius-radius-none);
  background: var(--color-tertiary-40);
  text-align: center;
  color: var(--color-text-main);
}

.section.info>div h3,
.section.info>div h4 {
  font-size: var(--font-size-6);
  font-style: normal;
  font-weight: 600;
  margin: 0;
}

.section.info>div p {
  margin: 0;
  font-size: var(--font-size-3);
  font-weight: 400;
}

.section.heading-center .default-content-wrapper h1,
.section.heading-center .default-content-wrapper h2,
.section.heading-center .default-content-wrapper h3,
.section.heading-center .default-content-wrapper h4,
.section.heading-center .default-content-wrapper h5,
.section.heading-center .default-content-wrapper h6 {
  text-align: center;
}

.section.heading-center-line .default-content-wrapper h1,
.section.heading-center-line .default-content-wrapper h2,
.section.heading-center-line .default-content-wrapper h3,
.section.heading-center-line .default-content-wrapper h4,
.section.heading-center-line .default-content-wrapper h5,
.section.heading-center-line .default-content-wrapper h6 {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.section.heading-center-line .default-content-wrapper h1::before,
.section.heading-center-line .default-content-wrapper h2::before,
.section.heading-center-line .default-content-wrapper h3::before,
.section.heading-center-line .default-content-wrapper h4::before,
.section.heading-center-line .default-content-wrapper h5::before,
.section.heading-center-line .default-content-wrapper h6::before,
.section.heading-center-line .default-content-wrapper h1::after,
.section.heading-center-line .default-content-wrapper h2::after,
.section.heading-center-line .default-content-wrapper h3::after,
.section.heading-center-line .default-content-wrapper h4::after,
.section.heading-center-line .default-content-wrapper h5::after,
.section.heading-center-line .default-content-wrapper h6::after {
  content: '';
  border-top: 1px solid var(--color-neutral-60);
  margin: 0 var(--space-space-3x) 0 0;
  flex: 1 0 var(--space-space-3x);
}

[dir='rtl'] .section.heading-center-line .default-content-wrapper h1::before,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h2::before,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h3::before,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h4::before,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h5::before,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h6::before {
  margin-right: auto;
  margin-left: var(--space-space-3x);
}

.section.heading-center-line .default-content-wrapper h1::after,
.section.heading-center-line .default-content-wrapper h2::after,
.section.heading-center-line .default-content-wrapper h3::after,
.section.heading-center-line .default-content-wrapper h4::after,
.section.heading-center-line .default-content-wrapper h5::after,
.section.heading-center-line .default-content-wrapper h6::after {
  margin: 0 0 0 var(--space-space-3x);
}

[dir='rtl'] .section.heading-center-line .default-content-wrapper h1::after,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h2::after,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h3::after,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h4::after,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h5::after,
[dir='rtl'] .section.heading-center-line .default-content-wrapper h6::after {
  margin-left: auto;
  margin-right: var(--space-space-3x);
}

.section.col-10 {
  max-width: var(--grid-col-10);
  margin: 0 auto;
}

.section.highlighted-text {
  background: var(--tertiary-tertiary-40);
  padding: var(--space-space-48) var(--space-space-4x) var(--space-space-8);
}

.section.highlighted-text>div {
  max-width: var(--grid-col-8);
  margin: auto auto 4rem;
}

.section.highlighted-text>div>* {
  margin: unset;
}

.section.highlighted-text p {
  font-size: var(--font-size-3);
}

.section.highlighted-text>div>p:not(.button-container) {
  margin: 1.2rem 0 2rem;
}

.section.highlighted-text>div>p>a {
  width: 100%;
  font-size: inherit;
  margin: unset;
}

.section.quick-links .default-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-space-20);
}

.section.quick-links .default-content-wrapper .button-container {
  margin: 0;
}

.section.quick-links .default-content-wrapper a.button {
  padding: var(--space-space-8) var(--space-space-12);
  height: 3.4rem;
  font-size: var(--font-size-3);
}

.hidden {
  display: none;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
}

.text-ellipsis {
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

@media (width > 767px) {
  .section.info>div h3,
  .section.info>div h4 {
    font-size: var(--font-size-7);
  }

  .section.info>div p {
    font-size: var(--font-size-4);
  }

  .section.highlighted-text {
    padding: var(--space-space-11x) var(--space-space-4x) var(--space-space-8x);
  }

  .section.highlighted-text p {
    font-size: var(--font-size-4);
  }

  .section.highlighted-text>div>p>a {
    width: unset;
    padding: var(--space-space-8) var(--space-space-12);
  }

  .breadcrumb-wrapper {
    padding-top: calc(var(--nav-height) + 5.3rem);
  }
}

@media (width >=1024px) {
  aside {
    min-width: var(--grid-col-3);
    max-width: var(--grid-col-3);
    padding: var(--space-space-16) 0;
  }

  .main-wrapper {
    flex-direction: row;
  }

  .breadcrumb-wrapper {
    padding-top: revert;
    height: var(--breadcrumbs-height);
    visibility: visible;
  }
}

@media (width >1024px) {
  main {
    max-width: 160rem;
    margin: 0 auto;
  }

  .main-wrapper {
    max-width: 160rem;
    margin: 0 auto;
  }

  .membership-info main {
    max-width: 168rem;
  }
}

.icon-md {
  height: 2.4rem;
  width: 2.4rem;
}

.divider {
  border: 1px solid var(--color-neutral-501);
}

.mobile-only {
  display: block;
}

@media (width >=768px) {
  .mobile-only {
    display: none;
  }
}

.section.cart-vat-text{
  width: 100%;
  text-align: center;
  letter-spacing: 0;
  color: var(--color-text-dark);
  font: var(--type-body-2-strong-font);
}

.section.cart-vat-text .default-content-wrapper{
  max-width: 192rem;
  padding: var(--space-space-2x) var(--grid-margin);
}

@media (width >= 1024px){
  .section.cart-vat-text > .default-content-wrapper > p{
    text-align: start;
  }
}

/* ame specific style goes here */

div.dropin-design {
  --type-base-font-family: var(--type-base-font-family);
}

body {
  font: var(--type-body-1-default-font);
  letter-spacing: 0;
}

.ame {  
  a:any-link {
    color: var(--color-text-link);
    font-weight: var(--font-weight-5);
    line-height: var(--text-xxs);
  }

  a:hover,
  a:active {
    color: var(--color-primary-a);
  }

  a:active {
    font-weight: var(--font-weight-6);
    color: var(--color-primary-a);
  }

  a.link-sm {
    font-size: var(--font-size-sm);
  }

  a.link-md {
    font-size: var(--font-size-0x);
  }

  a.button:any-link,
  button {
    font: var(--type-body-1-strong-font);
    border-radius: var(--shape-border-radius-3);
    border: var(--shape-border-width-1) solid var(--color-primary-a);
    color: var(--color-white);
    background-color: var(--color-primary-a);
  }

  a.button:hover,
  button:hover {
    border-color: var(--color-neutral-40);
  }

  a.button:disabled,
  button:disabled,
  button:disabled:hover {
    background-color: var(--color-neutral-30);
    border-color: var(--color-neutral-30);
    color: var(--color-disabled-default-text);
  }

  .section.quick-links .default-content-wrapper a.button {
    line-height: 1.96rem;
  }

  a.button.secondary,
  button.secondary {
    background-color: var(--color-white);
    color: var(--color-primary-a);
    border: var(--shape-border-width-1) solid var(--color-neutral-80);
  }

  a.button.secondary:hover,
  button.secondary:hover {
    border-color: var(--color-primary-a);
  }

  a.button.secondary:disabled,
  button.secondary:disabled,
  button.secondary:disabled:hover {
    background-color: var(--color-neutral-30);
    border-color: var(--color-neutral-30);
    color: var(--color-disabled-default-text);
  }

  a.button.tertiary,
  button.tertiary {
    background-color: var(--color-tertiary-b);
    color: var(--color-primary-a);
    border: var(--shape-border-width-1) solid var(--color-white);
  }

  a.button.tertiary:hover,
  button.tertiary:hover {
    border-color: var(--color-primary-d);
    background-color: var(--color-primary-d);
  }

  a.button.tertiary:disabled,
  button.tertiary:disabled,
  button.tertiary:disabled:hover {
    background-color: var(--color-neutral-30);
    border-color: var(--color-neutral-30);
    color: var(--color-disabled-default-text);
  }

  a.button.flat,
  button.flat {
    font-weight: var(--font-weight-5);
    background-color: var(--color-white);
    color: var(--color-primary-a);
    border: var(--shape-border-width-1) solid var(--color-neutral-60);
    padding: var(--space-space-8px) var(--font-size-sm);
  }

  a.button.flat:hover,
  button.flat:hover {
    background-color: var(--color-primary-a);
    color: var(--color-white);
  } 

  a.button.flat:disabled,
  button.flat:disabled,
  button.flat:disabled:hover {
    background-color: var(--color-neutral-30);
    border-color: var(--color-neutral-30);
    color: var(--color-disabled-default-text);
  }

  input, main input {
    letter-spacing: var(--type-body-2-strong-letter-spacing);
    padding-inline-start: var(--space-space-2x);
    padding: var(--space-space-2x) var(--space-space-3x);
    align-self: stretch;
    border: 1px solid var(--color-disabled-default-text);
    background: var(--background-color);
    color: var(--color-text-dark);
    font: var(--type-details-4-font);
  }

  .modal .modal-header button:hover { 
    background-color: transparent;
    border: none;
  }

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

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

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

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

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

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

   @media (width <=767px) {
       h1 {
           font-size: var(--font-size-9); 
       }

       h2 {
           font-size: var(--font-size-8);
       }

       h3 {
           font-size: var(--font-size-7);
           line-height: var(--line-height-l-2);
       } 

       h4 {
           font-size: var(--font-size-6);
           line-height: var(--line-height-l);
       }

       h5 {
           font-size: var(--font-size-5);
           line-height: var(--line-height-l-2);
       }

       h6 {
           font-size: var(--font-size-6);
       }

       main .section {
           padding: 0 var(--space-space-12);
       }
  }

  @media (width >= 768px) {
    .main-wrapper {
      max-width: 160rem;
      margin: 0 var(--space-space-20);
    }

    main > div,
    main section {
      padding: var(--space-space-12) var(--space-space-20);
    }

    main > div:empty,
    main > div#aura-menu-dialog,
    main > .scroll-to-top {
      padding: 0;
    }

    /* when promo bar is visible in header */
    &.modal-open:not(:is(.static-aura, .user, .account, .static-page)) main .modal dialog.aura-user-details-popup {
      margin-top: var(--spacing-huge);
    }

    /* when promo bar is hidden in header */
    &.modal-open:is(.static-aura, .user, .account, .static-page) main .modal dialog.aura-user-details-popup {
      margin-top: var(--space-space-56);
    }
  }

  @media (width >= 1024px) {
    .main-wrapper {
      margin: 0 var(--space-space-40);
    }

    main > div,
    main .section {
      padding: var(--space-space-12) var(--space-space-40);
    }
  }
  
  @media (width >= 1680px) {
    .main-wrapper {
      margin: 0 auto;
    }

    main > div,
    main .section {
      padding: var(--space-space-12) 0;
      margin: 0 auto;
    }
  }
}