/* custom font */
@font-face {
  font-family: Frutiger;
  src: url("../fonts/frutiger/FrutigerLTW05-55Roman.eot") format("eot");
  src: url("../fonts/frutiger/FrutigerLTW05-55Roman.ttf") format("ttf");
  src: url("../fonts/frutiger/FrutigerLTW05-55Roman.woff") format("woff");
  src: url("../fonts/frutiger/FrutigerLTW05-55Roman.woff2") format("woff2");
}

@font-face {
  font-family: FrutigerLight;
  src: url("../fonts/frutiger/FrutigerLTW05-45Light.eot") format("eot");
  src: url("../fonts/frutiger/FrutigerLTW05-45Light.ttf") format("ttf");
  src: url("../fonts/frutiger/FrutigerLTW05-45Light.woff") format("woff");
  src: url("../fonts/frutiger/FrutigerLTW05-45Light.woff2") format("woff2");
}
@font-face {
  font-family: FrutigerBold;
  src: url("../fonts/frutiger/FrutigerLTW05-65Bold.eot") format("eot");
  src: url("../fonts/frutiger/FrutigerLTW05-65Bold.ttf") format("ttf");
  src: url("../fonts/frutiger/FrutigerLTW05-65Bold.woff") format("woff");
  src: url("../fonts/frutiger/FrutigerLTW05-65Bold.woff2") format("woff2");
}

/* Color adjustments */
:root,
:host {
  --c-brand-color-h: 211;
  --c-brand-color-s: 100%;
  --c-brand-root: hsla(var(--c-brand-color-h), 0%, 100%, 1);
  --c-brand-root-contrast: hsla(var(--c-brand-color-h), 0%, 20%, 1);
  --c-brand-color-primary: hsla(var(--c-brand-color-h), var(--c-brand-color-s), 31%, 1);
  --c-brand-color-primary-contrast: hsla(var(--c-brand-color-h), var(--c-brand-color-s), 100%, 1);
  --c-brand-color-secondary: hsla(198, 100%, 46%, 1);
  --c-brand-color-secondary-contrast: hsla(var(--c-brand-color-h), var(--c-brand-color-s), 100%, 1);
  --c-brand-color-neutral-s: 0%;
  --c-brand-color-neutral-light: hsla(var(--c-brand-color-h), var(--c-brand-color-neutral-s), 96%, 1);
  --c-brand-color-neutral-light-contrast: var(--c-brand-root-contrast);
  --c-brand-color-neutral-lighter: hsla(var(--c-brand-color-h), var(--c-brand-color-neutral-s), 93%, 1);
  --c-brand-color-neutral-lighter-contrast: var(--c-brand-root-contrast);
  --c-brand-color-neutral-medium: hsla(var(--c-brand-color-h), 5%, 76%, 1);
  --c-brand-color-neutral-medium-contrast: var(--c-brand-root-contrast);
  --c-brand-color-neutral-darker: hsla(var(--c-brand-color-h), 7%, 53%, 1);
  --c-brand-color-neutral-darker-contrast: var(--c-brand-root);
  --c-brand-color-neutral-dark: hsla(var(--c-brand-color-h), var(--c-brand-color-neutral-s), 32%, 1);
  --c-brand-color-neutral-dark-contrast: var(--c-brand-root);
  --c-brand-color-green: hsla(82, 73%, 41%, 1);
  --c-brand-color-green-contrast: var(--c-brand-root);
  --c-brand-color-orange: hsla(39, 100%, 48%, 1);
  --c-brand-color-orange-contrast: var(--c-brand-root);
  --c-brand-color-red: hsla(327, 100%, 36%, 1);
  --c-brand-color-red-contrast: var(--c-brand-root);
  --c-wishlist-icon-color: var(--c-brand-color-secondary);

  --c-table-background-color: #fff;
  --c-table-font-color: #333;
  --c-table-border-color: #e5e5e5;
  --c-table-header-row-background-color: #00a6eb;
  --c-table-header-row-font-color: #fff;
  --c-table-header-column-font-color: #00a6eb;
  --c-table-row-highlight-background-color: #f5f5f5;

  --dxp-g-brand: var(--c-brand-color-primary);
  --dxp-g-brand-contrast: var(--c-brand-color-primary-contrast);
  --dxp-g-root: var(--c-brand-root);
  --dxp-g-root-contrast: var(--c-brand-root-contrast);
  --dxp-g-root-1: var(--c-brand-color-neutral-light);
  --dxp-g-root-contrast-1: var(--c-brand-color-neutral-light-contrast);
  --dxp-g-root-2: var(--c-brand-color-neutral-darker);
  --dxp-g-root-3: var(--c-brand-color-neutral-dark);
  --dxp-g-root-contrast-2: var(--c-brand-color-neutral-darker-contrast);
  --dxp-g-root-contrast-3: var(--c-brand-color-neutral-dark-contrast);
  --dxp-s-button-color: var(--c-brand-color-secondary);
  --dxp-s-button-color-1: var(--c-brand-color-primary);
  --dxp-s-button-color-hover: var(--c-brand-color-neutral-darker);
  --dxp-s-button-color-hover-contrast: var(--c-brand-color-secondary-contrast);
  --dxp-s-button-color-focus-contrast: var(--c-brand-color-secondary-contrast);
  --dxp-s-button-color-active-contrast: var(--c-brand-color-secondary-contrast);
  --dxp-g-success: var(--c-brand-color-green);
  --dxp-g-success-contrast: var(--c-brand-color-green-contrast);
  --dxp-g-brand-1: var(--c-brand-color-secondary);
  --dxp-g-brand-contrast-1: var(--c-brand-color-secondary-contrast);
  --slds-g-color-border-brand-1: var(--c-brand-color-secondary);
  --dxp-g-neutral: var(--c-brand-color-neutral-light);
  --dxp-g-neutral-contrast: var(--c-brand-color-neutral-light-contrast);
  --dxp-g-neutral-1: var(--c-brand-color-neutral-lighter);
  --dxp-g-neutral-contrast-1: var(--c-brand-color-neutral-lighter-contrast);
  --dxp-g-neutral-2: var(--c-brand-color-neutral-darker);
  --dxp-g-neutral-contrast-2: var(--c-brand-color-neutral-darker-contrast);
  --dxp-g-neutral-3: var(--c-brand-color-neutral-dark);
  --dxp-g-neutral-contrast-3: var(--c-brand-color-neutral-dark-contrast);

  --dxp-g-warning: #f49d00;

  /* Button Brand - new */
  --slds-c-button-brand-color-background: var(--c-brand-color-secondary);
  --slds-c-button-brand-color-border: var(--c-brand-color-secondary);
  --slds-c-button-brand-color-background-active: var(--c-brand-color-neutral-darker);
  --slds-c-button-brand-color-background-hover: var(--c-brand-color-neutral-darker);
  --slds-c-button-brand-color-border-hover: var(--c-brand-color-neutral-darker);
  --slds-c-button-brand-text-color: var(--c-brand-color-secondary-contrast);
  --slds-c-button-brand-text-color-active: var(--c-brand-color-neutral-darker-contrast);
  --slds-c-button-brand-text-color-hover: var(--c-brand-color-neutral-darker-contrast);

  --slds-kx-button-underline-scale-x: 0;

  /* Button Neutral - new */
  --slds-c-button-neutral-color-border: var(--c-brand-color-neutral-darker);
  --slds-c-button-neutral-color-border-active: var(--c-brand-color-neutral-dark);
  --slds-c-button-neutral-color-border-hover: var(--c-brand-color-neutral-dark);
  --slds-c-button-neutral-color-text: var(--c-brand-color-neutral-darker);
  --slds-c-button-neutral-color-text-hover: var(--c-brand-color-neutral-dark);

  /* Button Outline - Color Secondary  - new */
  --slds-c-button-outline-brand-color-border: var(--c-brand-color-secondary);
  --slds-c-button-outline-brand-color-border-hover: var(--c-brand-color-neutral-dark);
  --slds-c-button-outline-brand-color-text: var(--c-brand-color-secondary);
  --slds-c-button-outline-brand-color-text-hover: var(--c-brand-color-neutral-dark);

  /* Button Stateful - aka Dropdown  - new */
  --slds-c-button-stateful-color-background-selected: transparent;
  --slds-c-button-stateful-color-background-selected-active: 95, var(--c-brand-color-neutral-light);
  --slds-c-button-stateful-color-background-selected-hover: 95, var(--c-brand-color-neutral-light);
  --slds-c-button-stateful-color-border-selected: transparent;
  --slds-c-button-stateful-color-border-selected-hover: 1, var(--c-brand-color-neutral-medium);

  /* Button Outline - Color Success  - new */
  --slds-c-button-success-color-background: var(--c-brand-color-green);
  --slds-c-button-success-color-border: var(--c-brand-color-green);
  --slds-c-button-success-text-color: var(--c-brand-color-green-contrast);
  --slds-c-button-success-text-color-active: var(--c-brand-color-green-contrast);
  --slds-c-button-success-text-color-hover: var(--c-brand-color-green-contrast);

  /* Button Brand - old */
  --sds-c-button-brand-color-background: var(--c-brand-color-secondary);
  --sds-c-button-brand-color-border: var(--c-brand-color-secondary);
  --sds-c-button-brand-color-background-active: var(--c-brand-color-neutral-darker);
  --sds-c-button-brand-color-background-hover: var(--c-brand-color-neutral-darker);
  --sds-c-button-brand-color-border-hover: var(--c-brand-color-neutral-darker);
  --sds-c-button-brand-text-color: var(--c-brand-color-secondary-contrast);
  --sds-c-button-brand-text-color-active: var(--c-brand-color-neutral-darker-contrast);
  --sds-c-button-brand-text-color-hover: var(--c-brand-color-neutral-darker-contrast );

  /* Button Neutral - old */
  --sds-c-button-neutral-color-border: var(--c-brand-color-neutral-darker);
  --sds-c-button-neutral-color-border-active: var(--c-brand-color-neutral-dark);
  --sds-c-button-neutral-color-border-hover: var(--c-brand-color-neutral-dark);
  --sds-c-button-neutral-color-text: var(--c-brand-color-neutral-darker);
  --sds-c-button-neutral-color-text-hover: var(--c-brand-color-neutral-dark);

  /* Button Outline - Color Secondary  - old*/
  --sds-c-button-outline-brand-color-border: var(--dxp-s-button-color);
  --sds-c-button-outline-brand-color-border-hover: var(--c-brand-color-neutral-dark);
  --sds-c-button-outline-brand-color-text: var(--c-brand-color-secondary);
  --sds-c-button-outline-brand-color-text-hover: var(--c-brand-color-neutral-dark);

  /* Button Stateful - aka Dropdown  - old */
  --sds-c-button-stateful-color-background-selected: transparent;
  --sds-c-button-stateful-color-background-selected-active: 95, var(--c-brand-color-neutral-light);
  --sds-c-button-stateful-color-background-selected-hover: 95, var(--c-brand-color-neutral-light);
  --sds-c-button-stateful-color-border-selected: transparent;
  --sds-c-button-stateful-color-border-selected-hover: 1, var(--c-brand-color-neutral-medium);

  /* Button Outline - Color Success  - old*/
  --sds-c-button-success-color-background: var(--c-brand-color-green);
  --sds-c-button-success-color-border: var(--c-brand-color-green);
  --sds-c-button-success-text-color: var(--c-brand-color-green-contrast);
  --sds-c-button-success-text-color-active: var(--c-brand-color-green-contrast);
  --sds-c-button-success-text-color-hover: var(--c-brand-color-green-contrast);

  /* Styles for cards - new */
  --slds-c-card-color-background: var(--c-brand-root);
  --slds-c-card-color-border: var(--c-brand-color-neutral-medium);
  --com-c-my-profile-border-color: var(--c-brand-color-neutral-medium);

  /* Styles for cards - old */
  --sds-c-card-color-background: var(--c-brand-root);
  --sds-c-card-color-border: var(--c-brand-color-neutral-medium);
  --sds-g-color-border-base-1: var(--c-brand-color-neutral-medium);

  --dxp-c-link-text-color: var(--c-brand-color-secondary);

  /* borders */
  --sds-c-input-color-border: var(--c-brand-color-neutral-medium);
  --slds-g-color-border-base-1: var(--c-brand-color-neutral-medium);
  --sds-c-input-radius-border: 0.25rem;

  /* forms, fields */
  --sds-c-input-text-color: hsla(var(--c-brand-color-h), 0%, 20%, 1);

  /* accordion */
  --slds-c-accordion-heading-text-color: var(--c-brand-color-root-contrast);
  --sds-c-accordion-heading-text-color: var(--c-brand-color-root-contrast);

  /* Content tiles background */
  --b2b-content-tile-background-blue: rgb(0, 77, 160);
  --b2b-content-tile-background-cyan: rgb(0, 166, 235);
  --b2b-content-tile-background-violet: rgb(107, 29, 124);
  --b2b-content-tile-background-red: rgb(183, 0, 100);
  --b2b-content-tile-background-petrol: rgb(0, 124, 150);
  --b2b-content-tile-background-green: rgb(126, 182, 28);
  --b2b-content-tile-background-orange: rgb(244, 157, 0);
  --b2b-content-tile-background-gold: rgb(196, 159, 100);
  --b2b-content-tile-background-silver: rgb(190, 196, 199);
  --b2b-content-tile-background-light-gray: rgb(245, 245, 245);
  --b2b-content-tile-background-blue-gray: rgb(126, 136, 144);
  --b2b-content-tile-background-dark-gray: rgb(82, 86, 90);
  --b2b-content-tile-background-black: rgb(51, 51, 51);
  --b2b-content-tile-background-gardco-red: rgb(225, 39, 38);
  --b2b-content-tile-background-navy: rgb(22, 37, 56);
  --b2b-content-tile-background-dark-gray-blue: rgb(103, 127, 149);
  --b2b-content-tile-background-mid-gray-blue: rgb(177, 191, 202);
  --b2b-content-tile-background-light-blue: rgb(233, 238, 244);
  --b2b-content-tile-background-default: var(--b2b-content-tile-background-cyan);

  /* Content tiles the matching font color to the background */
  --b2b-content-tile-match-color-blue: var(--c-brand-root, white);
  --b2b-content-tile-match-color-cyan: var(--c-brand-root, white);
  --b2b-content-tile-match-color-violet: var(--c-brand-root, white);
  --b2b-content-tile-match-color-red: var(--c-brand-root, white);
  --b2b-content-tile-match-color-petrol: var(--c-brand-root, white);
  --b2b-content-tile-match-color-green: var(--c-brand-root, white);
  --b2b-content-tile-match-color-orange: var(--c-brand-root, white);
  --b2b-content-tile-match-color-gold: var(--c-brand-root, white);
  --b2b-content-tile-match-color-silver: var(--c-brand-root-contrast, black);
  --b2b-content-tile-match-color-light-gray: var(--c-brand-root-contrast, black);
  --b2b-content-tile-match-color-blue-gray: var(--c-brand-root, white);
  --b2b-content-tile-match-color-dark-gray: var(--c-brand-root, white);
  --b2b-content-tile-match-color-black: var(--c-brand-root, white);
  --b2b-content-tile-match-color-gardco-red: var(--c-brand-root, white);
  --b2b-content-tile-match-color-navy: var(--c-brand-root, white);
  --b2b-content-tile-match-color-dark-gray-blue: var(--c-brand-root, white);
  --b2b-content-tile-match-color-mid-gray-blue: var(--c-brand-root, white);
  --b2b-content-tile-match-color-light-blue: var(--c-brand-root-contrast, black);
  --b2b-content-tile-match-color-default: var(--b2b-content-tile-match-color-cyan);

  --b2b-content-tile-match-color-hover-silver: hsla(var(--c-brand-color-h), 0%, 20%, 0.5);
  --b2b-content-tile-match-color-hover-light-blue: hsla(var(--c-brand-color-h), 0%, 20%, 0.5);
  --b2b-content-tile-match-color-hover-fallback: rgba(255, 255, 255, 0.5);

  --ccnavmenus-navContainer-text-color: var(--dxp-g-brand);
  --overwrite-navContainer-text-color-hover: inherit;
  --overwrite-megaPopover-border-color: #3370b3;
  --overwrite-expandedNavigation-border-color: #004da0;
}

/* backgrounds */

.bg-white {
  background-color: #fff;
  color: var(--c-brand-color-root-contrast);
}

.bg-white *:not(button, button *) {
  color: var(--c-brand-color-root-contrast);
}

.bg-primary {
  background-color: var(--c-brand-color-primary);
  color: var(--dxp-g-brand-contrast);
}

.bg-primary *:not(button, button *) {
  color: var(--c-brand-color-primary-contrast) !important;
}

.bg-secondary {
  background-color: var(--c-brand-color-secondary);
  color: var(--c-brand-color-secondary-contrast);
}

.bg-secondary *:not(button, button *) {
  color: var(--c-brand-color-secondary-contrast) !important;
}

.bg-light {
  background-color: var(--c-brand-color-neutral-light);
  color: var(--c-brand-color-neutral-light-contrast);
}

.bg-light *:not(button, button *) {
  color: var(--c-brand-color-neutral-light-contrast);
}

.bg-dark {
  background-color: var(--c-brand-color-neutral-dark);
  color: var(--c-brand-color-neutral-dark-contrast);
}

.bg-dark *:not(button, button *) {
  color: var(--c-brand-color-neutral-dark-contrast) !important;
}

.bg-fullwidth--gray {
  --c-table-background-color: transparent;
  --c-table-row-highlight-background-color: white;
  --c-table-header-row-background-color: white;

  border-image: conic-gradient(var(--c-brand-color-neutral-light) 0 0) fill 0//0 100vw;
}

/* font-styles */
.text-primary {
  color: var(--c-brand-color-primary);
}

.text-secondary {
  color: var(--c-brand-color-secondary);
}

.text-gray,
.slds-text-color_weak {
  color: var(--c-brand-color-neutral-darker);
}

.text-white {
  color: #fff;
}

/* text styles */

:root {
  --dxp-g-root-font-family: Frutiger, Arial, sans-serif;
  --dxp-g-heading-font-family: FrutigerLight, Arial, serif;
  --dxp-g-bold-font-family: FrutigerBold, Arial, sans-serif;
  --dxp-s-body-text-color: var(--c-brand-root-contrast);
  --dxp-s-button-letter-spacing: 1px;
}
/* overwrite DXP heading styles */
.dxp-text-heading-xlarge,
.dxp-text-heading-large,
.dxp-text-heading-medium {
    all: unset;
    display: block;
    font-family: var(--dxp-g-heading-font-family);
    color: inherit;
}

.dxp-text-heading-xlarge {
    font-size: var(--dxp-g-font-size-10); /* h1 */
}

.dxp-text-heading-large {
    font-size: var(--dxp-g-font-size-7); /* h2 */
    margin-bottom: var(--dxp-g-spacing-xsmall);
}

.dxp-text-heading-medium {
    font-size: var(--dxp-g-font-size-6); /* h3 */
}

h1,
h2,
h3,
h4 {
  font-family: var(--dxp-g-heading-font-family);
}

h1 {
  font-size: var(--dxp-g-font-size-10);
}

h2 {
  font-size: var(--dxp-g-font-size-7);
  margin-bottom: var(--dxp-g-spacing-xsmall);
}

h3 {
  font-size: var(--dxp-g-font-size-6);
}

b,
strong,
.headline-bold h1,
.headline-bold h2,
.headline-bold h3,
.headline-bold p {
  font-family: var(--dxp-g-bold-font-family);
  font-weight: normal;
}

p {
  font-family: var(--dxp-s-body-font-family);
  font-size: var(--dxp-s-body-font-size);
  margin-bottom: 1.25rem;
}

.no-p-margin,
.no-p-margin p {
  margin: 0;
}

.no-component-wrapper-space {
  --dxp-c-component-wrapper-spacer-size: 0;
  --dxp-c-component-wrapper-spacer-size-tablet: 0;
  --dxp-c-component-wrapper-spacer-size-mobile: 0;
}

a {
  color: var(--c-brand-color-primary);
}


/* text color styles */

/** navigation alignment **/
.navigation-menu {
  background-color: var(--c-brand-color-neutral-light);
}

.disable-checkbox {
  pointer-events: none;
  opacity: 0.6; /* You can adjust the opacity to give a visual indication of the disabled state */
}

/** stacked accordion **/

.form-container {
  max-width: 600px; /* Adjust max-width as needed */
  margin: 0 auto; /* Center the container horizontally */
  border: 1px solid #d8dde6; /* Add border around the form */
  border-radius: 5px; /* Add border-radius for rounded corners */
  padding: 20px; /* Add padding to the container */
}

.form-headline {
  text-align: center; /* Center the headline horizontally */
  margin-bottom: 20px; /* Add spacing between headline and form */
  font-size: 20px; /* Set font size to 20px */
  font-weight: bold; /* Make the headline bold */
}

lightning-accordion.accordion-parent:nth-child(n) > div > slot > lightning-accordion-section > div > section > div.slds-accordion__summary {
  background-color: var(--c-brand-color-neutral-light);
  margin-bottom: var(--dxp-g-spacing-xxsmall);
}

/** buttons **/
[kx-scope="button-brand"]:hover:before {
  background: var(--slds-c-button-brand-color-background-hover);
}

[kx-scope="button-neutral"]:hover:before {
  background: none !important;
}

.slds-button--brand,
.slds-button.slds-button_icon.slds-button_icon-brand,
.slds-button_brand,
lightning-button[variant="brand"]::part(button) {
  background-color: var(--slds-c-button-brand-color-background, var(--dxp-s-button-color, var(--dxp-g-brand, #0176d3)));
  border-color: var(--slds-c-button-brand-color-border, var(--dxp-s-button-color, var(--dxp-g-brand, #0176d3)));
  color: var(--slds-c-button-brand-text-color, var(--dxp-s-button-color-contrast, var(--dxp-g-brand-contrast, #fff)));
  text-transform: uppercase;
}

.slds-button--brand:focus,
.slds-button--brand:hover,
.slds-button.slds-button_icon.slds-button_icon-brand:focus,
.slds-button.slds-button_icon.slds-button_icon-brand:hover,
.slds-button_brand:focus,
.slds-button_brand:hover,
lightning-button[variant="brand"]::part(button):focus,
lightning-button[variant="brand"]::part(button):hover,
.slds-button--brand:active,
.slds-button.slds-button_icon.slds-button_icon-brand:active,
.slds-button_brand:active,
lightning-button[variant="brand"]::part(button):active {
  background-color: var(--slds-c-button-brand-color-background-hover, var(--dxp-s-button-color-hover, var(--dxp-g-brand-1, #014486)));
  border-color: var(--slds-c-button-brand-color-border-hover, var(--dxp-s-button-color-hover, var(--dxp-g-brand-1, #014486)));
  color: var(--slds-c-button-brand-text-color-hover, var(--dxp-s-button-color-hover-contrast, var(--dxp-g-brand-contrast-1, #fff)));
}

.slds-button--neutral,
.slds-button_neutral,
lightning-button[variant="neutral"]::part(button) {
  background: none !important;
  border-color: var(--sds-c-button-neutral-color-border);
  transition: var(--dxp-c-button-neutral-transition);
  color: var(--slds-c-button-neutral-color-text);
}

.slds-button--neutral:focus,
.slds-button--neutral:hover,
.slds-button_neutral:focus,
.slds-button_neutral:hover,
lightning-button[variant="neutral"]::part(button):focus,
lightning-button[variant="neutral"]::part(button):hover,
.slds-button--neutral:active,
.slds-button_neutral:active,
lightning-button[variant="neutral"]::part(button):active {
  background: none !important;
  border-color: var(--slds-c-button-neutral-color-border-active);
  color: var(--slds-c-button-neutral-color-text-hover);
}

.slds-button_outline-brand,
lightning-button[variant="brand-outline"]::part(button) {
  background: none !important;
  border-color: var(--slds-c-button-outline-brand-color-border);
  color: var(--slds-c-button-outline-brand-color-text);
}

.slds-button_outline-brand:focus,
.slds-button_outline-brand:hover,
lightning-button[variant="brand-outline"]::part(button):active,
lightning-button[variant="brand-outline"]::part(button):focus {
  background: none !important;
  border-color: var(--slds-c-button-outline-brand-color-border-hover);
  color: var(--slds-c-button-outline-brand-color-text-hover);
}

/* Standard Button */
.slds-button,
lightning-button::part(button),
lightning-button-menu::part(button) {
    --slds-c-button-spacing-inline-start: var(--dxp-s-button-padding, var(--dxp-s-button-padding-inline-start, 1em));;
    --slds-c-button-spacing-inline-end: var(--dxp-s-button-padding, var(--dxp-s-button-padding-inline-end, 1em));;
}

[kx-scope=button][kx-type=underline]:focus:after,
[kx-scope=button][kx-type=underline]:hover:after {
  --slds-kx-button-underline-scale-x: 0;
}

/* Large Button */
.slds-button.dxp-button-large,
.dxp-button-large>.slds-button,
.dxp-button-large>lightning-button::part(button) {
    --slds-c-button-spacing-inline-start: var(--dxp-s-button-large-padding, var(--dxp-s-button-large-padding-inline-start, 1em));;
    --slds-c-button-spacing-inline-end: var(--dxp-s-button-large-padding, var(--dxp-s-button-large-padding-inline-end, 1em));;
}

/* Small Button */
.slds-button.dxp-button-small,
.dxp-button-small>.slds-button,
.dxp-button-small>lightning-button::part(button) {
    --slds-c-button-spacing-inline-start: var(--dxp-s-button-small-padding, var(--dxp-s-button-small-padding-inline-start, 1em));;
    --slds-c-button-spacing-inline-end: var(--dxp-s-button-small-padding, var(--dxp-s-button-small-padding-inline-end, 1em));;
}

/* List elements */
div .cb-outputRichText-container.ql-editor li:not(.ql-direction-rtl) {
  padding-left: 0;
}

div .cb-outputRichText-container.ql-editor li:not(.ql-direction-rtl)::before {
  margin-right: 0.5rem;
  color: inherit;
  margin-left: -2.5rem;
  width: 2rem;
}

div .cb-outputRichText-container.ql-editor ul li:not(.ql-direction-rtl)::before {
  padding-right: 0.2em;
}

div .cb-outputRichText-container.ql-editor li.ql-indent-1:not(.ql-direction-rtl){
  padding-left: 2.5rem;
}

div .cb-outputRichText-container.ql-editor ol,
div .cb-outputRichText-container.ql-editor ul {
  padding-left: 2.5rem;
  margin-bottom: 1.25rem;
}

.slds-list--ordered,
.slds-list_ordered,
.slds-list--dotted,
.slds-list_dotted {
  margin-left: 0;
  padding-left: 2.5rem;
  margin-bottom: 1.25rem;
}


/* Rich Text Editor */
div .cb-outputRichText-container.ql-editor {
  line-height: var(--dxp-s-body-line-height);
}

div .cb-outputRichText-container.ql-editor p {
  margin-bottom: 1.25rem;
}

/* progress-bar */
.slds-path__nav .slds-is-complete {
  background: var(--c-brand-color-green) !important;
}

.slds-path__nav .slds-is-complete:hover {
  background: var(--c-brand-color-green) !important;
}

.slds-path__nav .slds-is-complete:after,
.slds-path__nav .slds-is-complete:before {
  background: var(--c-brand-color-green) !important;
}

.slds-path__nav .slds-is-complete.slds-is-active:first-child {
  background: var(--c-brand-color-green);
}

.slds-path__nav .slds-is-complete .slds-is-active:hover:after,
.slds-path__nav .slds-is-active:hover:before {
  background: var(--c-brand-color-green) !important;
}

.slds-path__nav .slds-is-complete:hover:after,
.slds-path__nav .slds-is-complete:hover:before {
  background: var(--c-brand-color-green) !important;
}

header {
  --dxp-c-section-content-spacing-block-start: 0;
  --dxp-c-section-content-spacing-inline-end: 0;
  --dxp-c-section-content-spacing-block-end: 0;
  --dxp-c-section-content-spacing-inline-start: 0;
  --dxp-c-section-columns-max-width: none;
}

.layout-header-desktop {
    padding-inline: 0;
}


/* Footer */
footer *:not(strong) {
  font-family: var(--dxp-g-heading-font-family);
  font-size: 0.8rem;
}

footer ul li p {
    margin-bottom: 0.3125rem;
}

footer {
  --dxp-c-section-content-spacing-block-start: 0;
  --dxp-c-section-content-spacing-inline-end: 0;
  --dxp-c-section-content-spacing-block-end: 0;
  --dxp-c-section-content-spacing-inline-start: 0;
  --dxp-c-section-columns-max-width: none;
}

.max-content-width {
  max-width: var(--com-c-layout-header-max-width, var(--dxp-s-header-content-max-width));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: block;
  width: 100%;
}

.max-content-wrapper {
  padding-right: var(--dxp-s-section-content-spacing-inline-end);
  padding-left: var(--dxp-s-section-content-spacing-inline-start);

  & > div {
    max-width: var(--com-c-layout-header-max-width, var(--dxp-s-header-content-max-width));
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: block;
    width: 100%;
  }
}

.commerce-footer__members-section {
  margin-bottom: 1rem;
}

/* Cart item */
c-cart-item {
  .quantityInput {
    .slds-input {
      --sds-c-input-radius-border: 0;

      text-align: center;
      border-style: solid;
      border-color: var(--c-brand-root-contrast);
      border-width: 1px 0;
      box-shadow: none;
    }
  }
  .quantityButton button:hover,
  .quantityButton button:disabled,
  .quantityButton button:active,
  .quantityButton button:focus {
    border-color: var(--c-brand-root-contrast);
    border-width: 1px;
    box-shadow: none;
  }
}

/* Card Component */
dxp_content_layout-card .main-content-container {
  --dxp-c-content-container-padding: 1.25rem 1.875rem;
  --dxp-c-content-vertical-alignment: flex-start;
}

/* Tables */
table,
.table {
  border-collapse: collapse;
  border: 1px solid var(--c-table-border-color);
  border-spacing: 0;
  background-color: var(--c-table-background-color);
  width: 100%;
  margin-bottom: 2rem;

  td,
  th {
    text-align: inherit;
    vertical-align: top;
    border: 1px solid var(--c-table-border-color);
    color: var(--c-table-font-color);
    font-family: FrutigerLight, sans-serif;
    font-size: 0.875rem;
    padding: 0.5rem;

    &.slds-text-align_center {
      text-align: center;
    }

    &.slds-text-align_right {
      text-align: right;
    }

    p {
      color: var(--c-table-font-color);
      font-family: FrutigerLight, sans-serif;
      font-size: 0.875rem;
    }
  }

  thead tr {
    td,
    th {
      color: var(--c-table-header-row-font-color);
      font-family: FrutigerBold, sans-serif;
      background-color: var(--c-table-header-row-background-color);
    }
  }

  :not(thead) tr {
    th {
      color: var(--c-table-header-column-font-color);
      font-family: FrutigerBold, sans-serif;
      position: sticky;
      left: 0;
      background-color: var(--c-table-background-color);
      text-align: inherit;
      z-index: 1;
    }

    &:hover th,
    &:hover td {
      background-color: var(--c-table-row-highlight-background-color);
    }
  }
}

/* Tabs */
.commerce-tabs {
  .dxp-tab {
    --dxp-c-l-text-block-font-size: 1rem;
    --dxp-c-tab-border-weight: 1px;
    --dxp-c-tab-border-color: transparent;
    --dxp-c-active-tab-border-color: #00a4eb;
    --dxp-c-hover-tab-border-color: #00a4eb;
    --dxp-c-tab-background-color: transparent;

    .dxp-active-tab-text-style {
      --dxp-c-l-text-block-font-family: FrutigerBold, sans-serif;
      --dxp-s-body-font-family: FrutigerBold, sans-serif;
      --dxp-c-l-text-block-font-weight: 400;
    }

    .dxp-tab-text-style,
    .dxp-active-tab-text-style {
      margin-bottom: 0;
    }

    &.dxp-tab-bar-active-tab-horizontal:focus,
    &.dxp-tab-bar-active-tab-horizontal:active,
    &.dxp-tab-nav-container:focus {
      border-width: 0 0 2px 0;
    }

    &.dxp-tab-bar-active-tab-horizontal:focus-visible,
    &.dxp-tab-nav-container:focus-visible {
      border-width: 2px;
    }
  }

  .slds-tabs_default__nav {
    --slds-c-tabs-list-color-border: var(--slds-g-color-border-base-1);
  }
}

/* CHECKOUT */

.checkout-layout-one-page {

    .slds-radio {
        margin-bottom: 5px;
    }

    lightning-button .slds-button,
    .upload {
        margin-top: 1.5rem;
    }
}

commerce_cart-summary dxp_base-text-block p,
commerce_cart-summary .summary-value lightning-formatted-number {
  --dxp-s-body-font-size: 1rem;
  --com-c-cart-summary-discount-amount-text-size: 1rem;
  --com-c-cart-summary-original-text-size: 1rem;
  --com-c-cart-summary-shipping-text-size: 1rem;
  --com-c-cart-summary-subtotal-text-size: 1rem;
  --com-c-cart-summary-tax-text-size: 1rem;
  --com-c-cart-summary-total-text-size: 1rem;
}

commerce_cart-summary .total-price dxp_base-text-block p,
commerce_cart-summary .item.total-price .summary-value lightning-formatted-number {
  font-family: 'FrutigerBold', 'Helevetica Neue', 'Arial Bold', sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/*Shipping Method options*/

commerce_unified_checkout-checkout-section-delivery section commerce_unified_checkout-checkout-section-one-page fieldset div[slot="content"] div dxp_base-text-block h3,
commerce_unified_checkout-checkout-section-payment-dual section commerce_unified_checkout-checkout-section-one-page fieldset div[slot="content"] div dxp_base-text-block h3 {
    font-size: 1rem;
    font-family: Frutiger, Arial, sans-serif;
}

.commerce-shipping-section__shipping-methods {

    fieldset {
        position: relative;
        margin-bottom: 3rem;

        header .slds-show div commerce_builder-action-button commerce-action-button {
            position: absolute;
            top: 100%;
            left: 1rem;
        }
    }

    c-no-available-delivery-options div {
        margin-left: 1rem;
    }
}

.commerce-shipping-section__shipping-method-options {

    .slds-form-element fieldset .slds-form-element__control .slds-radio {
        padding: 0;
    }

    .slds-radio__label.flex-container {
        justify-content: flex-start;
    }

    .slds-form-element__label {
        flex: 0 0;
        max-width: 12.5rem;
    }
}

/*Payment Methods*/

.commerce-payment-methods {

    div lightning-file-upload .slds-form-element lightning-primitive-input-file span.slds-form-element__label {
        margin-bottom: 10px;
    }

    div lightning-file-upload .slds-form-element lightning-primitive-input-file .slds-form-element__control .slds-file-selector .slds-file-selector__dropzone slot .slds-file-selector__body .slds-file-selector__text,
    p,
    span {
        font-size: 1rem;
    }

    .upload--primary .slds-form-element lightning-primitive-input-file .slds-button_neutral {
        background: var(--slds-c-button-brand-color-background) !important;
        border: 1px solid var(--slds-c-button-brand-color-border);
        color: var(--slds-c-button-brand-text-color);
    }

    .upload--primary .slds-form-element lightning-primitive-input-file .slds-button_neutral:hover {
        background: var(--slds-c-button-brand-color-background-hover) !important;
        color: var(--slds-c-button-brand-text-color-hover);
    }

    .upload--secondary .slds-form-element lightning-primitive-input-file .slds-button_neutral {
        background: var(--slds-c-button-neutral-color-background, transparent) !important;
        border: 1px solid var(--slds-c-button-neutral-color-border);
        color: var(--slds-c-button-neutral-color-text);
    }

    .upload--secondary .slds-form-element lightning-primitive-input-file .slds-button_neutral:hover {
        background: var(--slds-c-button-neutral-color-background-hover, transparent) !important;
        border-color: var(--slds-c-button-neutral-color-border-hover, var(--slds-c-button-neutral-color-border));
        color: var(--slds-c-button-neutral-color-text-hover, var(--slds-c-button-neutral-color-text));
    }
}

/* Lightning-Modal */

lightning-modal lightning-modal-header .slds-modal__title,
lightning-modal lightning-modal-body .slds-modal__content article h3.slds-text-heading_small {
    font-weight: 400;
    font-family: FrutigerBold;
}

lightning-modal lightning-modal-body .slds-modal__content slot p,
lightning-modal lightning-modal-footer .slds-modal__footer slot p {
    text-align: left;
}

lightning-modal lightning-modal-footer .slds-modal__footer slot lightning-button[variant="neutral"] {
    margin-right: 1rem;
}


.slds-modal__container lightning-button-icon {
    position: relative;
    z-index: 1;
    top: 2.8125rem;
    right: 0.625rem;
    border: 0;

    button {
        border: 0;
        padding: 0;
    }
}

/* Login */

.login-form__container div.comm-login-form__container {
    max-height: 27rem;
}

/* Category */

commerce_builder-search-results-layout .search-container .category-header h1 {
    min-height: 3rem;
}

commerce_builder-search-sort-menu .sort-menu-dropdown dxp_base-text-block .dxp-text-body,
commerce-link-list ul li p {
    margin-bottom: 0;
}

commerce_builder-search-sort-menu {
    --dxp-s-tertiary-button-text-color: rgb(127, 135, 144);
    --dxp-s-tertiary-button-text-color-hover: rgba(127,135,144, 0.5);
    --dxp-s-tertiary-button-text-color-focus: rgba(127,135,144, 0.5);
    --dxp-s-tertiary-button-text-color-active: rgba(127,135,144, 0.5);
}