/**
* Scoped to the root of the document and all its descendant elements.
* Add this to the Header markup in Experience builder>Settings>Advanced>Edit Header: 
* <link rel="stylesheet" href="/sfsites/c/resource/MarketingExperienceStyles" />
*/
:root {
  /* Global Default Variables */
  /* Link  */
  --dxp-s-link-text-decoration-hover: none;
  --dxp-s-link-text-decoration-focus: none;

  /* Divider */
  --dxp-c-hr-margin-block-start: 1rem;
  --dxp-c-hr-margin-block-end: 1rem;

  /* Border */
  --slds-g-color-border-base-1: var(--bc-stroke-color);

  /* Input Radius */
  --slds-c-input-radius-border: 8px;

  /* Badge */
  --slds-c-badge-radius-border : 8px;
  --slds-c-badge-text-color: #ffffff;
  --slds-c-badge-color-background: var(--bc-black-seanight);
  --slds-c-badge-sizing-border: 0px;
  --slds-c-badge-font-size: var(--body);

  /* Text-size styles */
  --h1: 64px;
  --h1-line-height: 96px;
  --h2: 48px;
  --h2-line-height: 72px;
  --h3: 40px;
  --h3-line-height: 60px;
  --h4: 32px;
  --h4-line-height: 48px;
  --h5: 24px;
  --h5-line-height: 36px;
  --h6: 18px;
  --h6-line-height: 27px;
  --body: 14px;
  --body-line-height: 21px;
  --body--underline: 14px;
  --body--underline-line-height: 21px;
  --body--bold: 14px;
  --body--bold-line-height: 21px;
  --body--italic: 14px;
  --body--italic-line-height: 21px;
  --span--small: 16px;
  --span--small-line-height: 24px;
  --span--med: 18px;
  --span--med-line-height: 27px;
  --span--large: 24px;
  --span--large-line-height: 36px;
  --span--med--bold: 18px;
  --span--med--bold-line-height: 27px;
  --span--small--bold: 16px;
  --span--small--bold-line-height: 24px;
  --body--smallest: 12px;
  --body--smallest-line-height: 18px;
  --dxp-s-form-element-label-color: var(--lucky-grey);
  --sds-c-input-color-border: var(--lucky-grey);
  --dxp-s-button-line-height: 24px;
  --slds-c-button-spacing-block-start: 12px;
  --slds-c-button-spacing-block-end: 12px;

  /* Brand Colors with --bc- prefix */
  --bc-leapfrog: #3da655;
  --bc-black-seanight: #092562;
  --bc-greek-blue: #069cbb;
  --bc-princeton-orange: #ff9100;
  --bc-stop: #c23934;
  --bc-mechrite-red: #a61a14;
  --bc-white: #ffffff;
  --bc-million-grey: #999999; /* Grey 1 */
  --bc-lucky-grey: #777777; /* Grey 2 */
  --bc-stone-cold: #555555; /* Grey 3 */
  --bc-carbon: #333333; /* Grey 4 */
  --bc-dreamless-sleep: #111111; /* Grey 5 */
  --bc-oxford-blue: #041949;
  --bc-super-silver: #eeeeee;
  --bc-black-seanight-overlay: #092562b3;
  --bc-stroke-color: #77777725;
  --bc-modish-moss: #C4B78B;

  /* Custom border specs */
  --cs-border-radius: 8px;

  /* Custom container size */
  --cs-container-size: 1140px;

  /* Custom Layout */
  /* Spacing */
  --global-layout-horizontal-spacing: 16px;

  /* Footer */
  --c-footer-background: var(--bc-black-seanight);

  /* Header */
  --cs-header-gap-horizontal: var(--global-layout-horizontal-spacing);
  --cs-header-submenu-title-background: var(--bc-super-silver);
  --cs-header-submenu-title-color: var(--bc-carbon);
  
  /* Z-indexes */
  --cs-submenu-z-index: 1000;
  --cs-header-menu-mobile-z-index: 1000;

  /* Navigation Menu */
  --cs-navigation-menu-link-padding-top: 4px;
  --cs-navigation-menu-link-padding-bottom: 4px;

  /* Tab Content */
  --cs-vertical-tabs-border: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
  --cs-vertical-tabs__content-padding: 1rem;
  --cs-vertical-tabs__nav-width: 12rem;
  --cs-vertical-tabs__nav-border-radius: 0;
  --cs-vertical-tabs__nav-padding: 0;
  --cs-vertical-tabs__nav-background: var(--slds-g-color-neutral-base-95, #f3f3f3);
  --cs-vertical-tabs__nav-border-width: 0 1px 0 0;
  --cs-vertical-tabs__nav-border-style: solid;
  --cs-vertical-tabs__nav-border-color: var(--slds-g-color-border-base-1, #e5e5e5);
  --cs-vertical-tabs__link-padding: .75rem;
  --cs-vertical-tabs__link-active-color: currentColor;

  /* File Selector */
  --cs-file-selector-width: auto;
  --cs-file-selector-height: auto;

  /* SwiperJS */
  --swiper-theme-color: var(--bc-black-seanight) !important;
}

@media screen and (min-width: 768px) {
  :root {
    /* Custom Layout */
    /* Spacing */
    --global-layout-horizontal-spacing: 32px;
  }
}

@media screen and (min-width: 1124px) {
  :root {
    /* Custom Layout */
    /* Spacing */
    --global-layout-horizontal-spacing: 64px;
  }
}

/* Layout */
.columns-content {
  box-sizing: content-box;
  padding: 0 var(--global-layout-horizontal-spacing);
}

.columns-content .full-width {
  margin-left: calc(-1 * var(--global-layout-horizontal-spacing));
  margin-right: calc(-1 * var(--global-layout-horizontal-spacing));
}

.container {
  max-width: var(--cs-container-size);
}

.bc-primary {
  color: var(--bc-black-seanight);
}

.bc-text {
  color: var(--bc-carbon);
}

.bc-text-light-extra {
  color: var(--bc-million-grey);
}

.bc-text-light {
  color: var(--bc-lucky-grey);
}

.bc-greek-blue {
  color: var(--bc-greek-blue);
}

.bc-greek-blue-bg {
  background-color: var(--bc-greek-blue);
}

.bc-white {
  color: var(--bc-white)!important;
}

.bc-super-silver {
  color: var(--bc-super-silver)!important;
}

.bc-bg-super-silver {
  background-color: var(--bc-super-silver)!important;
}

.bc-bg-primary {
  background-color: var(--bc-black-seanight)!important;
}

.bc-modish-moss {
  color: var(--bc-modish-moss)!important;
}

.bc-bg-modish-moss {
  background-color: var(--bc-modish-moss)!important;
}

.bc-bg-white {
  background-color: var(--bc-white)!important;
}

/* Typographic */
h1 {
  font-size: var(--h1);
  line-height: var(--h1-line-height);
  font-weight: 700;
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2-line-height);
  font-weight: 700;
}

h3 {
  font-size: var(--h3);
  line-height: var(--h3-line-height);
  font-weight: 700;
}

h4 {
  font-size: var(--h4);
  line-height: var(--h4-line-height);
  font-weight: 700;
}

h5 {
  font-size: var(--h5);
  line-height: var(--h5-line-height);
  font-weight: 700;
}

h6 {
  font-size: var(--h6);
  line-height: var(--h6-line-height);
  font-weight: 700;
}

.body {
  font-size: var(--body);
  line-height: var(--body-line-height);
}

.body-underline {
  font-size: var(--body--underline);
  line-height: var(--body--underline-line-height);
  text-decoration: underline;
}

.body-bold {
  font-size: var(--body--bold);
  line-height: var(--body--bold-line-height);
  font-weight: bold;
}

.body-italic {
  font-size: var(--body--italic);
  line-height: var(--body--italic-line-height);
  font-style: italic;
}

.span-small {
  font-size: var(--span--small);
  line-height: var(--span--small-line-height);
}

.span-med {
  font-size: var(--span--med);
  line-height: var(--span--med-line-height);
}

.span-large {
  font-size: var(--span--large);
  line-height: var(--span--large-line-height);
}

.span-med-bold {
  font-size: var(--span--med--bold);
  line-height: var(--span--med--bold-line-height);
  font-weight: bold;
}

.span-small-bold {
  font-size: var(--span--small--bold);
  line-height: var(--span--small--bold-line-height);
  font-weight: bold;
}

.body-smallest {
  font-size: var(--body--smallest);
  line-height: var(--body--smallest-line-height);
}
/* Typographic */

/* OVERRIDE CSS */
/* Customize Form Elements */
.slds-input {
  min-height: 48px;
}

.slds-input::placeholder {
  color: var(--lucky-grey);
}

.slds-form-element__label {
  margin-bottom: 0.25rem;
}

.date input + lightning-button-icon .slds-button_icon {
  padding: 0;
  margin: 0;
  position: absolute;
  height: 10.5px;
  width: 10.5px;
}

.slds-dropdown {
  border-radius: 8px;
}

.fix-slds-input_faux {
  line-height: 48px!important;
}

.slds-listbox__option .slds-truncate {
  font-size: 16px;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

/* Customize button  */
/* reverse brand button */
.brand-button-reverse {
  /* button colors */
  --slds-c-input-shadow-focus: 0 0 3px rgb(255, 255, 255);
  --sds-c-button-brand-color-background: #ffffff;
  --sds-c-button-brand-color-border: #ffffff;
  --sds-c-button-brand-text-color: var(--bc-black-seanight);
  /* button hover */
  --sds-c-button-brand-color-background-hover: #ffffff;
  --sds-c-button-brand-color-border-hover: #ffffff;
  --sds-c-button-brand-text-color-hover: var(--bc-black-seanight);
  /* button active  */
  --sds-c-button-brand-color-background-active: #ffffff;
  --sds-c-button-brand-color-border-active: #ffffff;
  --sds-c-button-brand-text-color-active: var(--bc-black-seanight);
}

.slds-button:disabled:hover, .slds-button[disabled]:hover {
  background-color: var(--slds-g-color-neutral-base-80, #c9c7c5);
  border-color: var(--slds-g-color-neutral-base-80, #c9c7c5);
  color: var(--slds-g-color-neutral-base-100, #fff);
}

.slds-button:disabled:hover, .slds-button[disabled]:hover {
  background-color: var(--slds-g-color-neutral-base-80, #c9c7c5);
  border-color: var(--slds-g-color-neutral-base-80, #c9c7c5);
  color: var(--slds-g-color-neutral-base-100, #fff);
}

.slds-button-group .slds-button {
  padding: 4px 16px;
}

.slds-button_icon-border-filled.slds-is-selected {
  background-color: var(--bc-black-seanight);
  border-color: var(--bc-black-seanight);
}

.slds-button_icon-border-filled {
  width: unset;
}
/* Customize button  */

.slds-breadcrumb .slds-breadcrumb__item:before, .slds-breadcrumb .slds-list__item:before {
  line-height: 27px;
}

/* Tab Content */
.slds-vertical-tabs {
  border: var(--cs-vertical-tabs-border);
}

.slds-vertical-tabs__content {
  padding: var(--cs-vertical-tabs__content-padding);
}

.slds-vertical-tabs__nav {
  width: var(--cs-vertical-tabs__nav-width);
  padding: var(--cs-vertical-tabs__nav-padding);
  background: var(--cs-vertical-tabs__nav-background);
  border-width: var(--cs-vertical-tabs__nav-border-width);
  border-style: var(--cs-vertical-tabs__nav-border-style);
  border-color: var(--cs-vertical-tabs__nav-border-color);
  border-radius: var(--cs-vertical-tabs__nav-border-radius);
}

.slds-vertical-tabs__nav-item:last-child {
  border-bottom: none;
}

.slds-vertical-tabs__link {
  padding: var(--cs-vertical-tabs__link-padding);
}

.slds-vertical-tabs__nav-item.slds-is-active .slds-vertical-tabs__link {
  color: var(--cs-vertical-tabs__link-active-color);
}

/* account page tab */
.account-page__tab .slds-vertical-tabs {
  display: block;
}

.account-page__tab .slds-vertical-tabs__nav {
  margin-bottom: 32px;
}

@media screen and (min-width: 768px) {
  .account-page__tab .slds-vertical-tabs {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 32px;
  }
}

/* OVERRIDE CSS */

/* Language Selector */
.lang-selector {
  --slds-c-button-spacing-block-start: 5px;
  --slds-c-button-spacing-block-end: 5px;
}

.w-100 {
  width: 100%;
}

.clickable {
  cursor: pointer;
}

.z-index-1 {
  z-index: 1 !important;
}

.avatar-uploader .slds-file-selector__body {
    width: var(--cs-file-selector-width);
    height: var(--cs-file-selector-height);
    overflow: hidden;
    border-radius: 100%;
    cursor: pointer;
}

.avatar-uploader .slds-file-selector__button {
  visibility: hidden;
}

.avatar-uploader .slds-form-element__label {
  display: none;
}

.avatar-uploader .slds-file-selector__dropzone {
  border: 0;
  padding: 0;
}

/* FAQ accordion button css */
.slds-button.slds-accordion__summary-action {
  color: var(--bc-carbon);
}

.slds-accordion__summary {
  border-radius: 8px;
}

.slds-accordion__summary-heading .slds-button:focus {
  box-shadow: none;
}

/* Contact Us send button css */
.send-btn button.slds-button.slds-button_brand {
  width: 100%;
}

/* Similar Boats */
@media (max-width: 959px) {
  .similar_boat-container .img-tile img {
    width: 235px !important;
  }
}

@media (max-width: 960px) {
  .similar_boat-container .img-tile img {
    width: 100% !important;
  }
  
  .similar_boat-container .product-tile {
    padding: 12px;
  }
}

.slds-input::placeholder {
  color: var(--dxp-s-form-element-placeholder-text-color);
}

/* lightning-combobox override */
.sorting .slds-listbox_vertical .slds-listbox__option:hover,
.sorting .slds-listbox_vertical .slds-listbox__option.slds-has-focus {
  box-shadow: none!important;
}

.sorting .slds-dropdown_fluid {
  min-width: 13rem;
}

.sorting .slds-dropdown {
  padding: 0!important;
}

/*My Account -> Sell My Boat*/
.upload_boat-img.slds-form-element .slds-file-selector.slds-file-selector_files,
.upload_boat-img.slds-form-element .slds-file-selector__dropzone {
  width: 100%;
}

.upload_boat-img.slds-form-element .slds-file-selector__dropzone {
  height: 48px;
}

.upload_boat-img.slds-form-element span.slds-file-selector__button.slds-button.slds-button_neutral,
.upload_boat-img.slds-form-element span.slds-file-selector__text.slds-medium-show {
  margin-top: 4px;
}

.upload_boat-img.slds-form-element span.slds-file-selector__button.slds-button.slds-button_neutral {
  height: 36px;
  padding: 4px;
}

.swiper-wrapper .main-container {
  box-shadow: none!important;
}

/*My Account -> My Favourite*/

.slds-vertical-tabs__nav-item:focus-within { 
  box-shadow: none;
}

/* reset input helptext padding issue because of button element */
.slds-button_icon-bare {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* Blog */
.blog-wrapper p {
  font-size: var(--body) !important;
  line-height: var(--body-line-height) !important;
}

.blog-wrapper h3 {
  font-size: var(--span--small);
  line-height: var(--span--small-line-height);
}

.blog-wrapper .dxp-block-image-host {
  border-top-right-radius: var(--cs-border-radius);
  border-top-left-radius: var(--cs-border-radius);
}