/* stylelint-disable selector-class-pattern, no-descending-specificity */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* stylelint-disable no-empty-source */
:root,
.dropin-design {
  --primary-color: #171c8f;
  --secondary-color: #f5f5f5;
  --tertiary-color: #fff;

  /* Neturals */
  --neutrals-sub-texts-paragraphs: #000;
  --neutrals-headings: #1d1d1d;
  --neutrals-unfilled-inactive: #939393;
  --neutrals-bars-unselected: #ccc;
  --neutrals-tags: #c4c4c4;
  --neutrals-sub-texts-grey: #565656;

  /* Primary Variations */
  --primary-variations-hover: #01044b;
  --primary-variations-primary: var(--primary-color);
  --primary-variations-secondary: var(--secondary-color);
  --primary-variations-tertiary: var(--tertiary-color);

  /* Ancent Colours */
  --accent-colours-vibrant-sections-1: #fcbe62;
  --accent-colours-vibrant-sections-2: #398bd7;
  --accent-colours-vibrant-sections-3: #00bca4;
  --accent-colours-vibrant-sections-4: #e15f67;
  --accent-colours-vibrant-sections-5: #c563b1;

  /* Semantic */
  --semantics-text-or-icon-error: #c70f12;
  --semantics-text-or-icon-caution: #8e670b;
  --semantics-text-or-icon-success: #257500;
  --semantic-surface-flat-success: #37b200;
  --semantics-text-or-icon-link: #1a4993;
  --semantic-surface-tonal-warning: rgb(250 177 5 / 12%);

  /* Additional Color */
  --smart-emi-gradient-start: rgb(74 79 188 / 4%);
  --smart-emi-gradient-end: rgb(0 11 242 / 8%);
  --nexa-primary-main: #18171a;
  --nexa-tertiary-light-grey: #f2f2f2;
  --ui-scrim-default: rgba(15 17 20 / 30%);
  --interactive-text-icon-secondary: rgba(15 17 20 / 80%);
  --ui-surface-flat-high: #fff;
  --static-interactive-surface-enabled-tonal: rgb(255 255 255 / 12%);
  --transparent-bg: transparent;
  --text-black: #212121;
  --blue-surface-accent: #3482e6;
  --ui-divider-high: rgba(0 0 0 / 16%);
  --ui-divider-high-2: rgba(0 0 0 / 15%);
  --ui-surface-glass-thin: rgba(225 225 228 / 21%);
  --ui-surface-glass-thickest: rgb(248 249 251 / 80%);
  --icy-blue: #e0ecff;
  --ui-text-icon-high: #0f1114;
  --ui-text-icon-medium: rgb(0 0 0 / 67%);
  --instock-green: #37b200;
  --ui-light-green: #44b333;
  --out-of-stock-red: #ff0c0c;
  --ui-surface-accent-accent-1: #3482e6;
  --schemes-on-primary: white;
  --ui-border-color: #f1f1f1;
  --border-color: #d8d8d8;
  --border-color-2: #efeded;
  --border-color-3: #8d8d8d;
  --texts-paragraphs: #231f20;
  --color-light-blue: #ecf5ff;
  --color-background-light: #f7f7f7;
  --color-primary-blue: #171d9f;
  --color-white: #dadada;
  --tooltip-bg-color-light: #f7e8e1;
  --tooltip-bg-color-dark: #d8d7ee;
  --text-black-hover: #171d9b;
  --border-grey: #f2f2f2;
  --text-label: #18171a;
  --subtext-grey: #515151;
  --add-to-cart-cta: #002c8a;
  --success-bg: #d7f0cc;
  --warning-bg: #fcd7d8;
  --border-blue-button: rgba(23 28 143 / 70%);
  --interactive-surface-enabled-tonal-accent: rgba(23 28 143 / 12%);
  --schemes-on-surface: #1d1b20;
  --border-gray: #d1d1d1;
  --gray-bg-4: #dedfea;
  --static-gray-300: #d9d9d9;
  --semantics-background-info-link: #dde4ef;
  --color-seashell-gray: #f1f1f1;
  --tag-bg: #e0ecff;
  --text-grey: #545454;
  --border-gray-1: #e6e6e6;
  --discount-text: #f89500;
  --ui-background-color: #e2e7ee;
  --button-text-color: #f8f8f9;
  --icon-bg: #dadaea;
  --ui-surface-glass-regular: rgba(198 199 201 / 34%);
  --static-interactive-dots: rgba(255 255 255 / 80%);
  --static-interactive-arrow: rgba(255 255 255 / 25%);
  --ui-divider-low: rgb(0 0 0 / 12%);
  --selected-item: #cdf4d3;
  --text-grey-2: #29282a;
  --ui-text-icon-low: rgba(0 0 0 / 37%);
  --shimmer-bg: #e8e8e9;
  --shimmer-card-bg: #f9f9f9;
  --shimmer-gradient-bg: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  --semantic-surface-tonal-info: rgb(0 99 255 / 12%);
  --teaser-background-color: #050955;
  --dark-primary: #2a254b;
  --gradient-color: rgb(5 9 85 0);
  --subtitle-text: #1d1d1d;
  --ui-subtext: rgb(0 0 0 / 50%);
  --gray-light-bg: rgb(211 211 211 / 50%);
  --gray-text-color: #898989;
  --gray-text-color-1: #747474;
  --light-gray-text-color: #ababab;
  --gradient-color-start: rgb(23 29 155 /0%);
  --gradient-color-end: rgb(255 255 255 /0%);
  --gradient-color-dark-gray: rgb(255 255 255 /30%);
  --gradient-color-dark-brown: rgb(254 142 80 /30%);
  --border-light-gray: #cbcbcb;
  --tertiary-light-grey: #f2f2f2;
  --bg-image: #030306;
  --footer-text-grey-color: #f2f2f2;
  --footer-subtext-color: #d2d2d2;
  --footer-subtext-light-color: #b2b2b2;
  --thin-border-color: rgb(255 255 255 / 20%);
  --background-light-color: #eee;
  --background-light-color-2: rgba(227 227 227/ 30%);
  --background-dark-blue-color: #0c111f;
  --paragraph-text-color: #ddd;
  --feature-icons: rgb(24 25 26 / 10%);
  --gallery-arrow-bg: rgb(201 201 201 / 40%);
  --overlay-bg: rgb(0 0 0 / 55%);
  --tertiary-deep-grey: #767879;
  --gradient-medium-blue-color: #4c6396;
  --gradient-black-color: rgb(1 4 75 / 0%);
  --primary-color-hover: rgba(23 28 143 / 20%);
  --dark-blue: #010340;
  --gradient-dark-black-color: rgb(0 0 0 / 0%);
  --background-black-color: #020202;
  --gradient-thin-black-color: rgb(15 17 20 / 0%);
  --bg-grey-light: #f8f8f8;
  --gradient-black-background: rgb(0 0 0 / 0%);
  --gradient-overlay-black-80: rgb(0 0 0 / 80%);
  --gradient-gray-41-5: rgb(41 41 41 / 5%);
  --gradient-gray-68: rgb(68 68 68 / 67%);
  --gradient-black-98: rgb(0 0 0 / 98%);
  --color-opacity-14: rgba(255 255 255 / 14%);
  --color-opacity-35: rgba(255 255 255 / 35%);
  --input-gradient: rgba(244 244 244 / 20%);
  --progress-bar: rgba(255 255 255 / 67%);
  --box-shadow-profile: rgba(154 154 154 / 25%);
  --box-shadow-btn: 0 7px 10px 0 rgba(0 0 0 / 9%), 0 20px 50px 0 rgba(0 0 0 / 20%);
  --subtitle-dark-gray: #1e1e1e;
  --color-neutral-light-100: #eef2f9;
  --color-overlay-dark: rgb(30 30 30 / 70%);
  --gradient-overlay-light-95: rgb(238 242 249 / 95%);
  --gradient-overlay-light-85: rgb(238 242 249 / 85%);
  --gradient-text-black-80: rgba(255 255 255 / 80%);
  --interactive-border-enabled: rgb(23 28 143 / 70%);
  --interactive-text-icon-enabled-secondary: rgb(15 17 20 / 40%);
  --semantic-surface-tonal-error: rgb(253 13 17 / 12%);
  --interactive-surface-selected-tonal-accent: rgb(23 28 143 / 12%);
  --archived-light-theme-ui-border-specular: rgba(255 255 255 / 60%);
  --box-border: #dfdfdf;
  --ui-divider-high-3: rgb(23 28 143 / 2%);
  --background-blur-1: linear-gradient(90deg, var(--ui-divider-high-3) 0%, var(--interactive-surface-selected-tonal-accent) 50%, var(--ui-divider-high-3) 100%);
  --semantic-text-icon-error: #f0373a;
  --ui-gray-card-bg: #dddeec;
  --ui-gray-dark-bg: #4f4f4f;
  --ui-blue-heading: #232f9c;
  --ui-gray-light-header: #f3f3f3;
  --ui-white-light-text: #fefefe;
  --ui-badge-bg: #dcdcdc;
  --ui-badge-warning-bg: #f0b529;
  --ui-card-item-bg: #f2f3f4;
  --gradient-background-blue: rgba(52 130 230 / 5%);
  --gradient-background-orange: rgba(255 98 0 / 5%);
  --background-blur-2: linear-gradient(228deg, var(--gradient-background-blue) 31.52%, var(--gradient-background-orange) 111.9%);
  --background-input-color: #ececed;
  --btn-disabled-color: #979797;
  --no-result-text: #6c757d;
  --filter-ipad-search-bg: rgba(0 0 0 / 30%);
  --bg-divider-color: rgba(204 204 204 / 30%);
  --border-card-color: #cdcdcd;
  --arena-badge-bg: #2d3494;
  --placeholder-gray-text: rgba(81 78 78 / 30%);
  --table-border: #e1e1e1;
  --subtitle-light-grey: rgba(33 33 33 / 80%);

  /* Grid System */
  --grid-columns: 4;
  --grid-gutter-width: 16px;
  --container-margin: 20px;
  --grid-formula: (
    ((100vw - var(--container-margin) - var(--container-margin)) - (var(--grid-gutter-width) * (var(--grid-columns) - 1))) / var(--grid-columns)
  );

  /* Gradients */
  --gradients-accent-section-bg-3: linear-gradient(228deg, rgb(23 29 155 / 20%) 31.52%, rgb(255 98 0 / 20%) 111.9%);
  --gradients-accent-section-bg-1: linear-gradient(228deg, rgb(23 29 155 / 10%) 31.52%, rgb(255 98 0 / 10%) 111.9%);
  --gradients-accent-section-bg-2: linear-gradient(90deg, #d5805b 0%, #cd6931 44.02%);
  --tpb-overlay-gradient: linear-gradient(179deg, rgb(0 0 0 / 0%) 54.01%, rgb(0 0 0 / 70%) 86.52%);
  --gradient-sticky-bar: linear-gradient(92deg, rgb(255 255 255 / 90%) 37.63%, rgba(246 246 246 / 90%) 52.63%);
  --card-bottom-overlay: linear-gradient(180deg, rgb(0 0 0 / 0%) 26.38%, rgb(0 0 0 / 80%) 100%);
  --gradient-sticky-bar-bg: linear-gradient(228deg, rgba(236 227 227 / 90%) 31.52%, rgba(223 223 236 / 90%) 111.9%);
  --overlay-trust-bg: linear-gradient(180deg, #000 23.5%, rgba(0 0 0 / 0%) 100%);
  --card-content: linear-gradient(180deg, rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 32%) 70%, rgba(0 0 0 / 80%) 100%);
  --select-btn: linear-gradient(180deg, rgba(255 255 255 / 30%) 0%, rgba(105 105 105 / 30%) 100%);
  --light-theme-interactive-surface-selected:
    linear-gradient(0deg, rgba(0 20 124 / 5%) 0%, rgba(0 20 124 / 5%) 100%), linear-gradient(228deg, rgba(52 130 230 / 10%) 31.52%, rgba(255 98 0 / 10%) 111.9%);

  /* Adobe Commerce Dropin design tokens */
  --color-brand-300: #6d6d6d;
  --color-brand-500: #454545;
  --color-brand-600: #383838;
  --color-brand-700: #2b2b2b;
  --color-neutral-50: #fff;
  --color-neutral-100: #fafafa;
  --color-neutral-150: #f9f9f9;
  --color-neutral-200: #f5f5f5;
  --color-neutral-250: #e4e4e4;
  --color-neutral-300: #e8e8e8;
  --color-neutral-400: #d6d6d6;
  --color-neutral-500: #b8b8b8;
  --color-neutral-600: #8f8f8f;
  --color-neutral-700: #666;
  --color-neutral-800: #3d3d3d;
  --color-neutral-900: #292929;
  --color-neutral-1000: #d2d2d2;
  --color-positive-200: #eff5ef;
  --color-positive-500: #7fb078;
  --color-positive-800: #53824c;
  --color-positive-1000: #2e7d32;
  --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-200: #ffebeb;
  --color-alert-400: #f8bbd0;
  --color-alert-500: #db7070;
  --color-alert-800: #c35050;
  --color-error: #de371e;
  --color-error-2: #ff4d4d;
  --color-error-3: #c2185b;
  --color-button-active: var(--color-brand-700);
  --color-button-focus: var(--color-neutral-400);
  --color-button-hover: var(--color-brand-600);
  --color-action-button-active: var(--color-neutral-50);
  --color-action-button-hover: var(--color-neutral-300);
  --color-opacity-16: rgb(255 255 255 / 16%);
  --color-opacity-24: rgb(255 255 255 / 24%);
  --color-sort-label: #8e8e8e;
  --color-modal-bkg: #f9f9f9;
  --color-button-disable: #d0d0d0;
  --grid-1-columns: 4;
  --grid-1-margins: 0;
  --grid-1-gutters: 16px;
  --grid-2-columns: 12;
  --grid-2-margins: 0;
  --grid-2-gutters: 16px;
  --grid-3-columns: 12;
  --grid-3-margins: 0;
  --grid-3-gutters: 24px;
  --grid-4-columns: 12;
  --grid-4-margins: 0;
  --grid-4-gutters: 24px;
  --grid-5-columns: 12;
  --grid-5-margins: 0;
  --grid-5-gutters: 24px;
  --shape-border-radius-1: 3px;
  --shape-border-radius-2: 8px;
  --shape-border-radius-3: 10px;
  --shape-border-radius-4: 24px;
  --shape-border-width-1: 1px;
  --shape-border-width-2: 1.5px;
  --shape-border-width-3: 2px;
  --shape-border-width-4: 4px;
  --radius-12: 12px;
  --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 1px 9.6px 0 rgba(0 0 0 / 15%);
  --shape-icon-stroke-1: 1px;
  --shape-icon-stroke-2: 1.5px;
  --shape-icon-stroke-3: 2px;
  --shape-icon-stroke-4: 4px;
  --interactive-text-icon-disabled: rgba(0 0 0 / 30%);
  --grey-bg: #f6f6f6;
  --gray-bg-1: #f6f5f5;
  --view-all-card-bg: #d7d8de;
  --view-all-card-text: #505050;
  --radio-selected-bg: #dedeec;
  --slider-bgd: rgb(15 17 20 / 12%);
  --address-text: #575a5e;
  --color-option-selected: #f6f8fc;
  --color-option: #e1e1e4;
  --color-option-border: #49454f;
  --bg-color-options: #f6f8fc;
  --text-gray: #444;
  --text-gray-1: #a1a1a1;

  /* spacing */
  --sizing-2xs: 4px;
  --sizing-xs: 8px;
  --sizing-s: 12px;
  --sizing-m: 16px;
  --sizing-l: 20px;
  --sizing-xl: 24px;
  --sizing-xxl: 28px;
  --sizing-3xl: 40px;
  --sizing-100: 100px;
  --sizing-189: 189px;
  --spacing-n-8: -8px;
  --spacing-n-20: -20px;
  --spacing-n-15: -15px;
  --spacing-n-48: -48px;
  --spacing-none: 0px;
  --spacing-l: 20px;
  --spacing-3xl: 40px;
  --spacing-xxxsmall: 2px;
  --spacing-xxsmall: var(--sizing-2xs);
  --spacing-xsmall: var(--sizing-xs);
  --spacing-2xs: 10px;
  --spacing-xs: var(--sizing-s);
  --spacing-small: var(--sizing-m);
  --spacing-medium: var(--sizing-xl);
  --spacing-big: 32px;
  --spacing-xbig: 40px;
  --spacing-xxbig: 48px;
  --spacing-large: 64px;
  --spacing-xlarge: 72px;
  --spacing-xxlarge: 96px;
  --spacing-huge: 120px;
  --spacing-xhuge: 144px;
  --spacing-xxhuge: 192px;
  --spacing-3: 3px;
  --spacing-6: 6px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-17: 17px;
  --spacing-18: 18px;
  --spacing-22: 22px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-38: 38px;
  --spacing-44: 44px;
  --spacing-56: 56px;

  /* Font Weight */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-550: 550;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* Font Size 1rem is 10px */
  --fs-xxsmall: 1rem;
  --fs-xsmall: 1.2rem;
  --fs-small: 1.4rem;
  --fs-medium: 1.6rem;
  --fs-xmedium: 1.8rem;
  --fs-large: 2rem;
  --fs-xlarge: 2.4rem;
  --fs-xslarge: 2.2rem;
  --fs-xxlarge: 3.2rem;
  --fs-xxxlarge: 4rem;
  --fs-28: 2.8rem;
  --fs-11: 1.1rem;
  --fs-13: 1.3rem;
  --fs-15: 1.5rem;
  --fs-21: 2.1rem;
  --fs-23: 2.3rem;
  --fs-29: 2.9rem;

  /* letter spacing */
  --ls-014: 0.14px;
  --ls-024: 0.24px;
  --ls-04: 0.4px;

  /* line height */
  --line-height-body-low: 1.6rem;
  --lh-normal: normal;
  --lh-xsmall: 1.4rem;
  --lh-small: 1.8rem;
  --lh-medium: 2rem;
  --lh-large: 2.4rem;
  --lh-xlarge: 2.8rem;
  --lh-xxlarge: 3.8rem;
  --lh-xxxlarge: 4.8rem;
  --lh-22: 2.2rem;
  --lh-20: 2rem;
  --lh-16: 1.6rem;
  --lh-15: 1.5rem;
  --lh-12: 1.2rem;
  --lh-13: 1.3rem;
  --lh-40: 4rem;
  --lh-17: 1.7rem;
  --lh-30: 3rem;
  --lh-35: 3.5rem;

  /* letter spacing */
  --letter-spacing-title-medium: 0;
  --letter-spacing-body-low: 0.24px;
  --letter-spacing-body-medium: 0.14px;

  /* Fonts */
  --font-settings: 'liga' off, 'clig' off;
  --type-base-font-family: roboto, roboto-fallback;
  --nexa-font: 'Fira Sans', 'Fira Sans Fallback', sans-serif;
  --type-condensed-font-family: roboto-condensed, roboto-condensed-fallback, sans-serif;
  --display-bold: normal normal var(--fw-700) var(--fs-xlarge) / var(--lh-normal) var(--type-base-font-family);
  --display-semibold: normal normal var(--fw-600) var(--fs-xlarge) / var(--lh-normal) var(--type-base-font-family);
  --display-medium: normal normal var(--fw-500) var(--fs-xlarge) / var(--lh-normal) var(--type-base-font-family);
  --display-regular: normal normal var(--fw-400) var(--fs-xlarge) / var(--lh-normal) var(--type-base-font-family);
  --heading-bold: normal normal var(--fw-700) var(--fs-large) / var(--lh-normal) var(--type-base-font-family);
  --heading-semibold: normal normal var(--fw-600) var(--fs-large) / var(--lh-normal) var(--type-base-font-family);
  --heading-medium: normal normal var(--fw-500) var(--fs-large) / var(--lh-normal) var(--type-base-font-family);
  --heading-regular: normal normal var(--fw-400) var(--fs-large) / var(--lh-normal) var(--type-base-font-family);
  --sub-heading-bold: normal normal var(--fw-700) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --sub-heading-semibold: normal normal var(--fw-600) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --sub-heading-medium: normal normal var(--fw-500) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --sub-heading-regular: normal normal var(--fw-400) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-large-bold: normal normal var(--fw-700) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-large-semibold: normal normal var(--fw-600) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-large-medium: normal normal var(--fw-500) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-large-regular: normal normal var(--fw-400) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-large-light: normal normal var(--fw-300) var(--fs-medium) / var(--lh-normal) var(--type-base-font-family);
  --text-medium-bold: normal normal var(--fw-700) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  --text-medium-semibold: normal normal var(--fw-600) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  --text-medium-medium: normal normal var(--fw-500) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  --text-medium-regular: normal normal var(--fw-400) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  --text-medium-light: normal normal var(--fw-300) var(--fs-small) / var(--lh-normal) var(--type-base-font-family);
  --text-small-bold: normal normal var(--fw-700) var(--fs-xsmall) / var(--lh-normal) var(--type-base-font-family);
  --text-small-semibold: normal normal var(--fw-600) var(--fs-xsmall) / var(--lh-normal) var(--type-base-font-family);
  --text-small-medium: normal normal var(--fw-500) var(--fs-xsmall) / var(--lh-normal) var(--type-base-font-family);
  --text-small-regular: normal normal var(--fw-400) var(--fs-xsmall) / var(--lh-normal) var(--type-base-font-family);
  --text-small-light: normal normal var(--fw-300) var(--fs-xsmall) / var(--lh-normal) var(--type-base-font-family);

  /* dropin-design typography tokens */
  --type-display-1-font: var(--display-bold);
  --type-display-1-letter-spacing: 0;
  --type-display-2-font: var(--heading-bold);
  --type-display-2-letter-spacing: 0;
  --type-display-3-font: var(--sub-heading-bold);
  --type-display-3-letter-spacing: 0;
  --type-headline-1-font: var(--text-large-bold);
  --type-headline-1-letter-spacing: 0;
  --type-headline-2-default-font: var(--text-medium-bold);
  --type-headline-2-default-letter-spacing: 0;
  --type-headline-2-strong-font: var(--text-regular-bold);
  --type-headline-2-strong-letter-spacing: 0;
  --type-body-1-default-font: normal normal 300 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0;
  --type-body-1-strong-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0;
  --type-body-1-emphasized-font: normal normal 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0;
  --type-body-2-default-font: normal normal 300 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0;
  --type-body-2-strong-font: normal normal 400 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0;
  --type-body-2-emphasized-font: normal normal 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0em;
  --type-button-1-font: normal normal 400 2rem/2.6rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0;
  --type-button-2-font: normal normal 400 1.6rem/2.4rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0;
  --type-details-caption-1-font: normal normal 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0;
  --type-details-caption-2-font: normal normal 300 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0;
  --type-details-overline-font: normal normal 400 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0;

  /* Additional tokens */
  --type-fixed-font-family: 'Roboto Mono', menlo, consolas, 'Liberation Mono', monospace;
  --background-color: var(--tertiary-color);
  --background-blur: 80px;
  --primary-navigation-height: 6.5rem;
  --secondary-navigation-height: 3.2rem;
  --nav-height: calc(var(--primary-navigation-height) + var(--secondary-navigation-height));
  --selected-item-shadow: inset 0 0 0 4px var(--tertiary-color);
  --shadow-elevation: 0px 7px 10px 0px rgba(0 0 0 / 9%), 0px 20px 50px 0px rgba(0 0 0 / 20%);
  --stepper-active-shadow: 0 2px 4px 0 rgba(0 0 0 / 10%), 0 7px 10px 0 rgba(0 0 0 / 9%);
  --dd-hover-gray: rgb(196 196 196 / 20%);
  --original-price: #706e6e;
  --options-text: #706e6e;

  /* Z-Index Layers */
  --z-index-sticky: 10;

  /* Responsive Design Tokens */
  @media screen and (width >=768px) {
    --grid-columns: 8;
    --grid-gutter-width: 24px;
  }

  @media screen and (width >= 1024px) {
    --primary-navigation-height: 6.4rem;
    --secondary-navigation-height: 6rem;
    --grid-columns: 12;
    --grid-gutter-width: 24px;
    --container-margin: 56px;

    /* Font desktop */
    --display-bold: normal normal var(--fw-700) var(--fs-xxxlarge) / var(--lh-xxxlarge) var(--type-base-font-family);
    --display-semibold: normal normal var(--fw-600) var(--fs-xxxlarge) / var(--lh-xxxlarge) var(--type-base-font-family);
    --display-medium: normal normal var(--fw-500) var(--fs-xxxlarge) / var(--lh-xxxlarge) var(--type-base-font-family);
    --display-regular: normal normal var(--fw-400) var(--fs-xxxlarge) / var(--lh-xxxlarge) var(--type-base-font-family);
    --heading-bold: normal normal var(--fw-700) var(--fs-xxlarge) / var(--lh-xxlarge) var(--type-base-font-family);
    --heading-semibold: normal normal var(--fw-600) var(--fs-xxlarge) / var(--lh-xxlarge) var(--type-base-font-family);
    --heading-medium: normal normal var(--fw-500) var(--fs-xxlarge) / var(--lh-xxlarge) var(--type-base-font-family);
    --heading-regular: normal normal var(--fw-400) var(--fs-xxlarge) / var(--lh-xxlarge) var(--type-base-font-family);
    --sub-heading-bold: normal normal var(--fw-700) var(--fs-xlarge) / var(--lh-xlarge) var(--type-base-font-family);
    --sub-heading-semibold: normal normal var(--fw-600) var(--fs-xlarge) / var(--lh-xlarge) var(--type-base-font-family);
    --sub-heading-medium: normal normal var(--fw-500) var(--fs-xlarge) / var(--lh-xlarge) var(--type-base-font-family);
    --sub-heading-regular: normal normal var(--fw-400) var(--fs-xlarge) / var(--lh-xlarge) var(--type-base-font-family);
    --text-large-bold: normal normal var(--fw-700) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
    --text-large-semibold: normal normal var(--fw-600) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
    --text-large-medium: normal normal var(--fw-500) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
    --text-large-regular: normal normal var(--fw-400) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
    --text-large-light: normal normal var(--fw-300) var(--fs-large) / var(--lh-large) var(--type-base-font-family);
    --text-medium-bold: normal normal var(--fw-700) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
    --text-medium-semibold: normal normal var(--fw-600) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
    --text-medium-medium: normal normal var(--fw-500) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
    --text-medium-regular: normal normal var(--fw-400) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
    --text-medium-light: normal normal var(--fw-300) var(--fs-medium) / var(--lh-medium) var(--type-base-font-family);
    --text-small-bold: normal normal var(--fw-700) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    --text-small-semibold: normal normal var(--fw-600) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    --text-small-medium: normal normal var(--fw-500) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    --text-small-regular: normal normal var(--fw-400) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
    --text-small-light: normal normal var(--fw-300) var(--fs-small) / var(--lh-medium) var(--type-base-font-family);
  }
}

/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

*,
::before,
::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  text-size-adjust: 100%;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
}

html.adobe-ue-preview,
html.adobe-ue-edit {
  height: unset;
}

html.adobe-ue-preview body,
html.adobe-ue-edit body {
  height: unset;
}

html {
  font-size: 62.5%;
}

body {
  font-family: var(--type-base-font-family);
  letter-spacing: var(--type-body-1-default-letter-spacing);
  margin: 0;
  color: var(--neutrals-sub-texts-paragraphs);
  background-color: var(--background-color);
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
}

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

body:not(.home) main {
  margin-top: var(--nav-height);
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  line-height: 1.25;
  scroll-margin: 40px;
}

h1 {
  font: var(--display-bold);
  letter-spacing: var(--type-display-1-letter-spacing);
}

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

h3 {
  font: var(--sub-heading-bold);
  letter-spacing: var(--type-display-3-letter-spacing);
}

h4 {
  font: var(--text-large-bold);
  letter-spacing: var(--type-headline-1-letter-spacing);
}

h5 {
  font: var(--text-medium-bold);
  letter-spacing: var(--type-headline-2-strong-letter-spacing);
}

h6 {
  font: var(--text-small-bold);
  letter-spacing: var(--type-headline-2-default-letter-spacing);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}

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

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

pre {
  overflow: scroll;
}

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

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

/* links */
a:not(.dropin-design a, .button) {
  color: var(--neutrals-sub-texts-paragraphs);
  text-decoration: none;
  word-break: break-word;

  &:hover {
    text-decoration: underline;
  }
}

/* buttons */
a.button,
.dropin-button,
button.button {
  --cta-border-width: 0px;
  --cta-padding-y: 11px;
  --cta-padding-x: 12px;
  --shape-border-radius-3: 0;
  --icon-size: 20px;

  align-items: center;
  border: none;
  cursor: pointer;
  display: inline-flex;
  padding: calc(var(--cta-padding-y) - var(--cta-border-width)) calc(var(--cta-padding-x) - var(--cta-border-width));
  justify-content: center;
  font: var(--text-medium-regular);
  line-height: var(--lh-small);
  font-feature-settings: var(--font-settings);
  gap: 4px;
  text-decoration: none;
  transition: all 0.3s linear;
  position: relative !important;

  @media (width >=1024px) {
    --cta-padding-x: 16px;
    --icon-size: 24px;
  }

  &.button--icon,
  &.dropin-button--with-icon {
    --cta-padding-y: 10px;

    svg {
      height: var(--icon-size);
      width: var(--icon-size);
    }

    @media (width >=1024px) {
      --cta-padding-y: 8px;
    }
  }

  &.dropin-button--primary,
  &.primary,
  &.button--primary {
    border: 1px solid var(--primary-variations-primary);
    background-color: var(--primary-variations-primary);
    color: var(--primary-variations-secondary);

    &:hover:not(:disabled, .disabled),
    &:focus {
      border: 1px solid var(--primary-variations-hover);
      color: var(--primary-variations-tertiary);
      background-color: var(--primary-variations-hover);
    }

    &.disabled,
    &:disabled {
      border: 1px solid var(--neutrals-bars-unselected);
      background-color: var(--neutrals-bars-unselected);
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }

  &.button--primary-white {
    background-color: var(--primary-variations-tertiary);
    color: var(--neutrals-sub-texts-paragraphs);

    &:focus,
    &:hover:not(:disabled, .disabled) {
      background-color: var(--primary-variations-hover);
      color: var(--primary-variations-tertiary);
    }

    &.disabled,
    &:disabled {
      background-color: transparent;
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }

  &.dropin-button--secondary,
  &.secondary,
  &.button--secondary {
    --cta-border-width: 1px;

    border: 1px solid var(--primary-variations-primary);
    background-color: transparent;
    color: var(--primary-variations-primary);

    &:hover:not(:disabled, .disabled),
    &:focus {
      color: var(--primary-variations-tertiary);
      background-color: var(--primary-variations-hover);
    }

    &.disabled,
    &:disabled {
      border: 1px solid var(--neutrals-bars-unselected);
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }

  &.button--secondary-white {
    --cta-border-width: 1px;

    border: 1px solid var(--primary-variations-tertiary);
    background-color: transparent;
    color: var(--primary-variations-tertiary);

    &:focus,
    &:hover:not(:disabled, .disabled) {
      border: 1px solid var(--primary-variations-hover);
      background-color: var(--primary-variations-hover);
      color: var(--primary-variations-tertiary);
    }

    &.disabled,
    &:disabled {
      border: 1px solid var(--neutrals-bars-unselected);
      background-color: var(--neutrals-bars-unselected);
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }

  &.dropin-button--tertiary,
  &.button--tertiary {
    background-color: transparent;
    color: var(--primary-variations-primary);
    text-decoration: underline;

    &:hover:not(:disabled, .disabled),
    &:focus {
      color: var(--primary-variations-hover);
      text-decoration: underline;
    }

    &.disabled,
    &:disabled {
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }

  &.button--tertiary-white {
    background-color: transparent;
    color: var(--primary-variations-tertiary);
    text-decoration: underline;

    &:focus,
    &:hover:not(:disabled, .disabled) {
      color: var(--primary-variations-hover);
    }

    &.disabled,
    &:disabled {
      color: var(--neutrals-unfilled-inactive);
      cursor: unset;
    }
  }
}

.dropin-button--primary--disabled {
  border: 1px solid var(--neutrals-bars-unselected);
  background-color: var(--neutrals-bars-unselected);
  color: var(--neutrals-unfilled-inactive);
  cursor: unset;
}

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

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

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

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

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

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

/* Base Design System Tokens */
.dropin-design.dropin-design {
  --background-none: none 0 0% no-repeat padding-box;
}

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

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

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

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

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

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

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

@media (width >= 1024px) {
  body.columns main {
    flex-direction: row;
  }

  body.columns main > .section {
    flex: 1;
    flex-basis: var(--column-width, auto);
  }
}

/**
* Reset main element visibility
* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
*/
main[hidden] {
  display: none !important;
}

.hidden {
  display: none !important;
}

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

/* Grid system */
.g-container {
  width: 100%;
  padding-inline: var(--container-margin);
}

.g-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--grid-gutter-width);
}

[class^='g-lg-'],
[class^='g-sm'],
[class^='g-md'] {
  width: 100%;
}

.g-sm-1 {
  width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
}

.g-sm-2 {
  width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
}

.g-sm-3 {
  width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
}

.g-sm-4 {
  width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
}

@media screen and (width >=768px) {
  .g-md-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-md-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-md-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-md-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-md-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-md-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-md-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-md-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }
}

/* Media Queries for desktop */
@media screen and (width >=1024px) {
  .g-lg-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-lg-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-lg-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-lg-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-lg-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-lg-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-lg-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-lg-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }

  .g-lg-9 {
    width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
  }

  .g-lg-10 {
    width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
  }

  .g-lg-11 {
    width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
  }

  .g-lg-12 {
    width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
  }
}

/* Media Queries for Large desktop */
@media screen and (width >=1366px) {
  .g-xl-1 {
    width: calc((var(--grid-formula) * 1) + (var(--grid-gutter-width) * (1 - 1)));
  }

  .g-xl-2 {
    width: calc((var(--grid-formula) * 2) + (var(--grid-gutter-width) * (2 - 1)));
  }

  .g-xl-3 {
    width: calc((var(--grid-formula) * 3) + (var(--grid-gutter-width) * (3 - 1)));
  }

  .g-xl-4 {
    width: calc((var(--grid-formula) * 4) + (var(--grid-gutter-width) * (4 - 1)));
  }

  .g-xl-5 {
    width: calc((var(--grid-formula) * 5) + (var(--grid-gutter-width) * (5 - 1)));
  }

  .g-xl-6 {
    width: calc((var(--grid-formula) * 6) + (var(--grid-gutter-width) * (6 - 1)));
  }

  .g-xl-7 {
    width: calc((var(--grid-formula) * 7) + (var(--grid-gutter-width) * (7 - 1)));
  }

  .g-xl-8 {
    width: calc((var(--grid-formula) * 8) + (var(--grid-gutter-width) * (8 - 1)));
  }

  .g-xl-9 {
    width: calc((var(--grid-formula) * 9) + (var(--grid-gutter-width) * (9 - 1)));
  }

  .g-xl-10 {
    width: calc((var(--grid-formula) * 10) + (var(--grid-gutter-width) * (10 - 1)));
  }

  .g-xl-11 {
    width: calc((var(--grid-formula) * 11) + (var(--grid-gutter-width) * (11 - 1)));
  }

  .g-xl-12 {
    width: calc((var(--grid-formula) * 12) + (var(--grid-gutter-width) * (12 - 1)));
  }
}

/* end Grid System */

/* scroll */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: var(--primary-variations-primary);
  border-left: none;
}

::-webkit-scrollbar-track {
  background-color: var(--primary-variations-secondary);
}

::-webkit-scrollbar-thumb {
  background-repeat: no-repeat;
  background-size: auto;
  cursor: pointer;
  position: relative;
  background-position: top left;
  background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb::after {
  content: 'abcd';
  position: absolute;
  top: 0;
  width: 10px;
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--neutrals-bars-unselected);
  margin-bottom: var(--sizing-m);
  gap: 30px;

  .tabs__tab {
    text-align: center;
    font: var(--text-small-regular);
    cursor: pointer;

    button {
      background: none;
      border: none;
      color: var(--neutrals-sub-texts-paragraphs);
      cursor: pointer;
      padding: var(--spacing-xsmall) 0 var(--sizing-s);
    }

    &.tabs__tab--active {
      font: var(--text-small-bold);
      border-bottom: 2px solid var(--primary-variations-primary);

      button {
        color: var(--primary-variations-primary);
      }
    }
  }

  @media screen and (width >= 768px) {
    gap: 0;

    .tabs__tab button {
      padding: var(--sizing-s) var(--spacing-xxbig);
    }
  }
}

.default-content-wrapper {
  padding: var(--sizing-xl) var(--sizing-l);

  h1 {
    font: var(--heading-regular);
    font-size: var(--fs-large);
    margin-bottom: var(--spacing-xsmall);

    @media (width >= 1024px) {
      font: var(--heading-regular);
    }
  }

  p {
    font: var(--text-small-regular);
    margin-top: var(--spacing-xsmall);

    @media (width >= 1024px) {
      font: var(--text-small-regular);
    }
  }

  @media (width >= 1024px) {
    margin: auto;
    padding: 50px 56px 0;
  }

  a.button {
    padding: 0;
    color: var(--primary-color);

    &:hover {
      text-decoration: underline;
    }
  }
}

/* Shimmer animation effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  .shimmer-base {
    background: var(--shimmer-gradient-bg);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  .shimmer-heading {
    height: 48px;
    width: 30%;
  }

  .shimmer-title {
    height: 32px;
    width: 100%;

    &.short {
      width: 40%;
    }
  }

  .shimmer-line {
    height: 12px;
    width: 100%;

    &.short {
      width: 40%;
    }
  }

  .shimmer-cta {
    width: 100%;
    height: 42px;
  }

  .shimmer-star {
    width: 100%;
    height: 42px;
  }

  button {
    border: none;
    outline: none;
  }
}

/* Common styling for Slider arrows in header */
.splide__arrows {
  display: none;

  @media screen and (width >= 1024px) {
    display: flex;
    gap: var(--spacing-xsmall);
  }
}

.splide__arrow {
  position: static;
  width: 34px;
  height: 34px;
  cursor: pointer;
  background-color: transparent;
  transform: none;
  border: none;

  @media (width >= 768px) and (width < 1024px) {
    width: 19px;
    height: 19px;
    background-size: 19px;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  svg {
    display: none;
  }
}

.splide__arrow--prev {
  background-image: url('/genuine-accessories/icons/carosuel-prev-arrow.svg');
}

.splide__arrow--next {
  background-image: url('/genuine-accessories/icons/carosuel-next-arrow.svg');
}

.splide__pagination {
  position: relative;
  width: fit-content;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  bottom: var(--sizing-m);
  gap: var(--sizing-2xs);
  padding: var(--sizing-2xs);
  border-radius: 8px;
  background: var(--ui-surface-glass-regular);

  li {
    display: flex;

    .splide__pagination__page {
      width: 8px;
      height: 8px;
      border-radius: 8px;
      border: none;
      background: var(--ui-text-icon-low);
      padding-inline: unset;
    }

    .splide__pagination__page.is-active {
      width: 16px;
      background-color: var(--interactive-text-icon-secondary);
    }
  }
}

.splide__pagination:empty {
  display: none;
}

.enrichment-wrapper {
  display: none;
}

.accordion {
  details > summary::-webkit-details-marker {
    display: none;
  }

  .accordion__item {
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-xs) 0;

    @media (width >= 768px) {
      padding: var(--spacing-small) 0;
    }

    @media (width >= 1024px) {
      padding: 28px 0;
    }

    .accordion__question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      width: 100%;
      cursor: pointer;
      color: var(--texts-paragraphs);
      font-size: var(--fs-small);
      font-weight: var(--fw-400);
      line-height: var(--lh-medium);
      word-wrap: break-word;
      -webkit-tap-highlight-color: transparent;

      @media (width >= 768px) {
        font-size: var(--fs-small);
        line-height: var(--lh-xsmall);

        &::after {
          width: 10px;
          height: 10px;
        }
      }

      @media (width >= 1024px) {
        font-size: 2.6rem;
        line-height: 2.8rem;

        &::after {
          width: 18px;
          height: 18px;
        }
      }

      &::after {
        content: '';
        width: 24px;
        height: 24px;
        background-image: url('/genuine-accessories/icons/accordion-expand.svg');
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    .accordion__answer {
      font-size: var(--fs-xxsmall);
      font-weight: var(--fw-300);
      line-height: 1.2rem;
      margin-top: 14px;
      color: var(--neutrals-texts-paragraphs);

      @media (width >= 768px) {
        font-size: 1.1rem;
        font-weight: var(--fw-400);
      }

      @media (width >= 1024px) {
        font-size: var(--fs-small);
        font-weight: var(--fw-300);
        line-height: var(--lh-medium);
        margin-top: var(--spacing-medium);
      }
    }

    .accordion__content {
      overflow: hidden;
      max-height: 0;
      transition:
        max-height 0.3s ease,
        padding 0.3s ease;
    }

    details[open] .accordion__content {
      max-height: 1000px;
    }

    &[open] {
      .accordion__question {
        &::after {
          background-image: url('/genuine-accessories/icons/accordion-collapse.svg');
        }
      }
    }
  }
}

/* Full-screen loader */
.full-screen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 80%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}

.full-screen-loader.active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s ease,
    visibility 0s linear;
}

.full-screen-loader__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;

  .spinner-gif {
    width: 47px;
    aspect-ratio: 1/1;
  }

  .spinner-text {
    color: var(--ui-text-icon-high);
    font-size: var(--fs-small);
    font-style: normal;
    font-weight: var(--fw-500);
    line-height: var(--lh-20);
    letter-spacing: var(--letter-spacing-label-medium, 0.14px);
  }
}

.toggle {
  position: relative;
  min-width: 52px;
  width: 52px;
  height: 32px;
  border-radius: 34px;
  border: 2px solid var(--border-blue-button);
  cursor: pointer;
  transition: background-color 0.3s;
  background: var(--interactive-surface-enabled-tonal-accent);
}

/* Circle knob */
.toggle-circle {
  position: absolute;
  top: var(--spacing-6);
  left: var(--spacing-6);
  width: 16px;
  height: 16px;
  background-color: var(--primary-color);
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle.active .toggle-circle {
  transform: translateX(20px);
  background-color: var(--primary-color);
}

.static-content {
  .default-content-wrapper {
    padding: var(--sizing-xl) var(--sizing-l);

    @media (width>=1024px) {
      padding: 50px var(--container-margin);
    }

    p {
      margin-block: var(--spacing-small);
      font: var(--text-medium-regular);
    }

    a {
      color: var(--primary-color);

      &:hover {
        text-decoration: underline;
      }
    }

    ul {
      list-style: disc;
    }

    ol,
    ul {
      padding-left: var(--spacing-l);

      li {
        font: var(--text-small-regular);
      }

      ol,
      ul {
        list-style-type: lower-alpha;

        ol,
        ul {
          list-style: lower-roman;
        }
      }
    }

    li:not(:last-child) {
      margin-bottom: var(--spacing-xs);
    }
  }
}

em * {
  font-style: italic !important;
}

/* .TT_bankOfferModal .close-btn icon placement : Adding standard right spacing */
.TT_bankOfferModal .close-btn {
  @media (width < 768px) {
    right: 20px;
  }
}