html body[data-scroll-locked] {
  --removed-body-scroll-bar-size: 0 !important;
  margin-right: 0 !important;
}

@media only screen and (max-width: 767px) {
  html body[data-scroll-locked] {
    margin-top: 60px !important; /*Mobile menu height */
  }
}

:root {
  --ec-image-transition: none;
  /* Colors */
  --ec-primary-color-50: #e0f0ff;
  --ec-primary-color-100: #c7e4ff;
  --ec-primary-color-200: #8fc9ff;
  --ec-primary-color-300: #57aeff;
  --ec-primary-color-400: #1a90ff;
  --ec-primary-color-500: #007ba4;
  --ec-primary-color-600: #0057a8;
  --ec-primary-color-700: #007ba4;
  --ec-primary-color-800: #00284d;
  --ec-primary-color-900: #001224;
  --ec-primary-color-950: #000b14;

  --accent-color-50: #e0f0ff;
  --accent-color-100: #c7e4ff;
  --accent-color-200: #8fc9ff;
  --accent-color-300: #57aeff;
  --accent-color-400: #1a90ff;
  --accent-color-500: #007ba4;
  --accent-color-600: #007ba4;
  --accent-color-700: #00284d;
  --accent-color-800: #00284d;
  --accent-color-900: #001224;
  --accent-color-950: #000b14;

  --primary-color: var(--primary-color-200);
  --primary-color-hover: var(--primary-color-300);
  --accent-color: var(--accent-color-50);
  --accent-color-hover: var(--accent-color-100);

  /* Fonts */
  --heading-font: 'Catamaran', sans-serif, Helvetica, sans-serif;
  --body-font: 'Catamaran', sans-serif, Georgia, serif;
  --ec-body-font: 'Catamaran', sans-serif, Georgia, serif;
  --ec-heading-font: 'Catamaran', sans-serif, Georgia, serif;

  --body-font-regular: 'Bariol Regular', sans-serif;
  --font-color: var(--primary-color-700);
  --line-height: 1.6em;
  --font-weight: 400;
  --font-size: 16px;

  /* Borders */
  --ec-border-color: rgba(0, 0, 0, 0.1);
  --ec-border-radius-xs: 4px;
  --ec-border-radius-sm: 8px;
  --ec-border-radius-md: 16px;
  --ec-border-radius-lg: 20px;
  --ec-border-radius-xl: 24px;
  --ec-border-radius-xxl: 30px;

  /* Spacing */
  --ec-spacing-xxs: 4px;
  --ec-spacing-xs: 8px;
  --ec-spacing-sm: 16px;
  --ec-spacing-md: 24px;
  --ec-spacing-lg: 32px;
  --ec-spacing-xl: 40px;
  --ec-spacing-xxl: 48px;

  /* Box shadows */
  --ec-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);

  --ec-primary-color: var(--ec-primary-color-200);
  --ec-primary-color-hover: var(--ec-primary-color-300);
  --ec-accent-color: var(--ec-accent-color-50);
  --ec-accent-color-hover: var(--ec-accent-color-100);

  /* Transitions */
  --ec-transition: all 0.3s ease-in-out;
  --ec-transition-fast: all 0.1s ease-in-out;
  --ec-transition-slow: all 0.5s ease-in-out;
  --ec-transition-cubic: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --ec-transition-cubic-fast: all 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
  --ec-transition-cubic-slow: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  --ec-transition-linear: all 0.3s linear;
  --ec-transition-linear-fast: all 0.1s linear;
  --ec-transition-linear-slow: all 0.5s linear;
  --ec-transition-ease-in: all 0.3s ease-in;
  --ec-transition-ease-in-fast: all 0.1s ease-in;
  --ec-transition-ease-in-slow: all 0.5s ease-in;
  --ec-transition-ease-out: all 0.3s ease-out;
  --ec-transition-ease-out-fast: all 0.1s ease-out;
  --ec-transition-ease-out-slow: all 0.5s ease-out;
  --ec-transition-ease-in-out: all 0.3s ease-in-out;
  --ec-transition-ease-in-out-fast: all 0.1s ease-in-out;
  --ec-transition-ease-in-out-slow: all 0.5s ease-in-out;
  --ec-transition-none: none;
}

.container {
  max-width: 1128px;
  margin: 0 auto;
}

.add-to-cart-button-widget {
  --add-to-cart-button-border: none;
  --add-to-cart-button-background-color: #007ba4;
  --add-to-cart-button-background-color-hover: #007ba4;
  --quantity-buttons-wrapper-border-radius: 25px;
  --add-to-cart-button-border-radius: 25px;
  --add-to-cart-button-color: white;
  --quantity-buttons-button-icon-color: white;
  --add-to-cart-button-quantity-buttons-button-icon-color: white;
  --button-border: none;
  --quantity-button-current-value-color: #fff;
}

:root {
  --button-background-color: #007ba4;
  --button-background-color-hover: #007ba4;
  --button-border-radius: 25px;
  --button-color: #fff;
  --button-icon-color: #fff;
  --button-height: 40px;
  --button-font-family: var(--ec-body-font);
  --button-font-weight: 600;
  --button-font-size: 0.75rem;

  --skeleton-loader-bg-grey: #ececec;
  --ec-lazy-load-transition: opacity 0.25s ease-in-out;
  --ec-lazy-load-opacity: 0;

  /* Product list */
  --product-list-grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  --product-list-grid-gap: 12px;
  --pagination-button-background-color: #007ba4;
  --product-list-item-image-wrapper-padding: 0;

  --product-image-carousel-inner-wrapper-padding: 0;
  --product-image-carousel-img-object-fit: contain;

  /* Product list filter */
  --filter-trigger-button-open-background-color: #fff;
  --filter-trigger-button-open-norder-color: #007ba4;
  --filters-margin: 0;
  --filter-trigger-button-background-color: #fff;
  --filter-trigger-button-color: #000;
  --filter-trigger-button-border: 1px solid #fff;
  --filter-trigger-button-hover-background-color: #fff;
  --filter-trigger-button-border-radius: 6px;
  --filter-trigger-button-padding: 0 16px;
  --sort-trigger-button-background-color: #fff;
  --sort-trigger-button-color: #000;
  --sort-trigger-button-border: 1px solid #fff;
  --sort-trigger-button-hover-background-color: #fff;
  --sort-trigger-button-border-radius: 6px;
  --sort-trigger-button-padding: 0 16px;
  --filter-trigger-button-font-weight: 700;
  --filter-trigger-button-font-size: 16px;
  --filter-trigger-button-gap: 10px;
  --sort-trigger-button-gap: 10px;
  --filter-trigger-icon-width: 18px;
  --filter-trigger-icon-height: 18px;
  --sort-trigger-icon-width: 18px;
  --sort-trigger-icon-height: 18px;
  --filter-content-max-height: 30vh;
  --filter-trigger-numValue-display: block;

  /* Product list filter modal */
  --accordionContent-filter-content-inner-gap: 4px;
  --filter-modal-accordion-trigger-button-padding: 16px;
  --filter-modal-footer-flex-direction: column;
  --filter-modal-button-padding: 8px 12px;
  --filter-modal-button-border: none;
  --filter-modal-button-border-radius: 6px;
  --filter-modal-button-font-weight: 600;
  --icon-height: 20px;
  --icon-width: 20px;
  --cart-button-icon-width: 20px;
  --filter-modal-title-color: #4a4a4a;
  --sort-modal-title-color: #4a4a4a;
  --sort-modal-radio-label-color: #4a4a4a;
  --sort-modal-radio-indicator-border: 2px solid #4a4a4a;
  --sort-modal-radio-indicator-dot-background: #4a4a4a;
  --filter-modal-button-background-color-hover: #fff;

  @media screen and (max-width: 768px) {
    --filter-modal-button-min-width: calc(50vw - 28px);
  }

  --filter-modal-apply-button-background-color-hover: #007ba4;

  --product-item-price-wrapper-margin: 0px 0px 12px 0px;
  --checkbox-hover-background-color: none;
  --checkbox-label-margin: 3px;

  /*ProductDetail */
  --product-detail-info-item-trigger-background-color: transparent;
  --checkbox-checked-background-color: #007ba4;
  --checkbox-border-radius: 2px;
  --checkbox-border: 2px solid #978d8d;
  --checkbox-hover-border: 2px solid #978d8d;
  --checkbox-indicator-color: #fff;
  --checkbox-checked-border: 2px solid #007ba4;
  --checkbox-label-text-font-size: 16px;
  --filter-checkbox-height: 25px;
  --filter-checkbox-width: 25px;
  --checkbox-checked-icon-color: #fff;

  /* Image no available */
  --image-not-avalible-background-color: #fff;
  --image-not-avalible-color: #7b7e7f;

  /* --slider-track-background-color: #007ba4; */
  --slider-range-background-color: #007ba4;
  --slider-thumb-background-color: #007ba4;

  /* slick slider */

  --slick-prev-top: 23%;
  --slick-next-top: 23%;
  --slick-next-right: -25px;

  /* Dropdowncart */
  --dropdown-cart-button-background-hover: transparent;

  /* Menuicons */
  --dropdown-cart-button-color: #fff;
  --dropdown-cart-button-background: transparent;
  --cart-counter-wrapper-background-color-rgb: rgb(22, 159, 219);
  --search-field-icon-color: #fff;
  --menu-icon-background-hover: transparent;
  --checkbox-indicator-width: 17px;
  --checkbox-indicator-height: 17px;

  /* Search Field */
  --search-field-product-price-align-self: center;
  --search-field-show-all-button-background-color: #007ba4;
  --search-field-show-all-width: 100%;
  --search-field-padding: 24px;
  --search-field-margin-top: none;
  --search-field-content-padding: 0;
  --search-field-show-all-top: auto;
  --search-field-show-all-bottom: auto;
  --search-field-show-all-right: auto;
  --search-field-dialog-content-height: 100dvh;
  --search-field-dialog-content-justify-content: flex-start;
  --search-field-height: 100%;
  --search-field-background-color-overlay-background: transparent;
  --search-field-border-radius: 0;
  --search-field-product-image-background: rgb(242, 242, 242);
  --search-field-input-border-radius: var(--ec-spacing-xs, 8px);
  --search-field-content-height: auto;
  --search-field-show-all-padding: 12px 30px;
  /*checkout */
  --checkout-step-trigger-indicator-background-color: transparent;
  --checkout-cart-inner-border: none;
  --checkout-padding: 8px;
  --checkout-border-radius: none;
  --select-trigger-width: calc(100% - 50px);

  /* OrderView */
  --order-view-button-color: #60605a;
  --order-view-status-bg-color: #d1e8f6;
  --order-view-heading-font-family: var(--ec-heading-font);

  /* Order */
  --order-border: none;
  --order-border-radius: none;
  --order-padding: none;
  --order-item-image-height: 100%;
  --order-item-image-width: 100%;
  --order-quantity-text-justify-content: flex-start;

  /* Dialog */
  --dialog-content-border-radius: var(--ec-border-radius-xxl);

  /* Login modal */
  --login-dialog-width: 630px;
  --login-dialog-height: auto;
  --login-dialog-max-height: 85vh;
  --dialog-content-border-radius: var(--ec-border-radius-lg, 20px);
  --close-button-top: 16px;
  --close-button-right: 16px;

  /* Login */
  --login-form-wrapper-font-family: var(--ec-body-font);
  --login-message-wrapper-font-family: var(--ec-body-font);

  /* Order view */
  --order-view-heading-font-size: 46px;
  --order-lines-quantity-text-font-family: var(--ec-body-font);
  --order-lines-quantity-text-color: var(--ec-primary-color-700);

  /* Add to cart button */
  --add-to-cart-button-width: 100%;
  --add-to-cart-button-height: 40px;
  --add-to-cart-button-padding: 0 8px;
  --add-to-cart-button-wrapper-margin: 0;
  --add-to-cart-button-max-width: 100%;
  --add-to-cart-button-quantity-buttons-wrapper-border: none;
  --add-to-cart-button-border-radius: none;
  --add-to-cart-button-border: 2px solid #bebebe;
  --add-to-cart-button-background-color: transparent;
  --add-to-cart-button-background-color-hover: transparent;
  --add-to-cart-button-color: #4a4a4a;
  --add-to-cart-button-border-radius: 3px;

  /* Quantity button*/
  --quantity-buttons-value-min-width: auto;
  --quantity-buttons-wrapper-border-radius: 3px;
  --quantity-buttons-wrapper-height: 100%;
  --quantity-buttons-wrapper-border: none;
  --quantity-buttons-button-icon-color: #4a4a4a;
  --add-to-cart-button-quantity-buttons-button-icon-color: #4a4a4a;

  /*Orderlines*/
  --order-lines-item-flex-direction: column;
  --order-lines-item-content-flex-direction: column;
  --order-lines-item-image-width: 100%;
  --order-lines-item-image-height: 100%;
  --order-lines-item-content-name-font-family: var(--ec-heading-font);
  --order-lines-item-content-name-font-weight: normal;
  --order-lines-item-content-name-color: #4a4a4a;
  --order-lines-item-content-name-font-size: 18px;
  --order-lines-item-content-price-font-size: 18px;
  --order-lines-item-content-price-font-family: var(--ec-heading-font);
  --order-lines-item-content-price-padding: 0 8px 0 8px;
  --order-lines-item-padding: 15px;
  --order-lines-remove-padding: 5px;
  --order-lines-remove-background-color: white;
  --order-lines-remove-border-radius: none;
  --order-lines-remove-height: 24px;
  --order-lines-remove-width: 24px;
  --order-lines-remove-bottom: auto;
  --order-lines-remove-top: 12px;
  --order-lines-remove-right: 12px;
  --order-lines-item-content-flex-direction: column;
  --order-lines-item-content-align-items: center;
  --order-lines-item-content-price-align-self: center;
  --order-lines-item-content-name-line-clamp: 1;
  --order-lines-item-content-discount-price-font-family: var(--ec-body-font);
  --order-lines-item-width: auto;
  --order-lines-quantity-text-margin: 0 0 0 8px;
  --order-lines-quantity-wrapper-justify-content: space-between;
  --order-lines-adjust-width: auto;
  --order-lines-wrap: nowrap;
  --order-lines-item-content-gap: 16px;

  /* Login */
  --login-form-wrapper-font-family: var(--ec-body-font);
  --login-message-wrapper-font-family: var(--ec-body-font);

  /* Price */
  --price-component-min-height: 100%;
  --price-component-font-family: var(--heading-font);
  --price-component-from-display: unset;
  --price-component-from-font-size: unset;
  --price-component-from-font-weight: unset;
  --price-component-from-font-color: unset;

  --price-component-amount-display: unset;
  --price-component-amount-font-size: unset;
  --price-component-amount-font-weight: unset;
  --price-component-amount-font-color: unset;

  --price-component-currency-display: unset;
  --price-component-currency-font-size: unset;
  --price-component-currency-font-weight: unset;
  --price-component-currency-font-color: unset;

  /* Badge */
  /* --badge-max-width: 80%; */
  --badge-wrapper-padding: 15px;
  --badge-height: 52%;
  --badges-container-z-index: 2;
  --badge-object-position: 0 0;

  --product-list-item-border-radius: none;
  --product-list-item-border: none;
  --product-list-item-height: 535px;
  --product-list-item-padding: 0;
  --product-list-item-image-object-fit: cover;

  --product-item-info-wrapper-padding: 20px;

  --filter-flex-wrap: nowrap;
  --filter-trigger-button-width: 100%;
  --filter-margin: 0;
  --sort-trigger-button-font-weight: 700;
  --sort-trigger-button-font-size: 16px;

  /* variant options */
  --variant-options-radio-background-color-checked: #007ba4;
  --variant-options-radio-background-color: #fff;
  --variant-options-radio-color-checked: #fff;
  --variant-options-radio-padding: 8px 8px 7px 8px;
  --variant-options-radio-font-weight: 400;
  --variant-options-label-font-size: 18px;
  --variant-options-radio-options-gap: 8px 4px;

  @media screen and (min-width: 768px) {
    --search-field-margin-top: var(--ec-spacing-sm, 16px);
    --search-field-border-radius: var(--ec-spacing-xs, 8px);
    --search-field-background-color-overlay-background: rgba(0, 0, 0, 0.2);
    --search-field-padding: 16px;
    --search-field-content-padding: 16px;
    --search-field-show-all-position: relative;
    --search-field-dialog-content-height: fit-content;
    --search-field-height: fit-content;
    --search-field-show-all-width: 100%;
    --filter-flex-wrap: wrap;
    --filter-trigger-button-width: auto;

    --order-lines-item-content-flex-direction: row;
    --order-lines-item-flex-direction: row;
    --order-lines-item-image-width: 64px;
    --order-lines-item-image-height: 64px;
    --order-lines-item-width: auto;
    --order-lines-item-image-display: flex;
    --order-lines-remove-top: none;
    --order-lines-item-content-flex-direction: row;
    --order-lines-item-content-text-wrapper-width: 40%;
    --order-lines-adjust-width: 20%;
    --order-lines-quantity-wrapper-justify-content: space-evenly;
    --order-lines-item-content-price-font-weight: none;
    --order-item-image-height: unset;
    --order-item-image-width: unset;
    --order-quantity-wrapper-justify-content: flex-end;
    --order-quantity-wrapper-gap: 30px;
  }

  .ecom-components-root[data-widget-type='product-image-carousel'] {
    --badge-height: 32%;
  }
}

/* Media queries */
:root {
}

.placeholder-cards {
  /* margin-top: 90px; */
  display: grid;
  grid-template-columns: var(
    --product-list-grid-template-columns,
    repeat(auto-fill, minmax(250px, 1fr))
  );

  gap: var(--product-list-grid-gap, var(--ec-spacing-md, 24px));
}

.placeholder-card {
  display: flex;
  flex-direction: var(--product-list-item-flex-direction, column);
  align-items: var(--product-list-item-align-items, center);
  justify-content: var(--product-list-item-justify-content, space-between);
  border-radius: var(--product-list-item-border-radius, var(--ec-border-radius-lg, 20px));
  border: var(--product-list-item-border, 1px solid rgba(0, 0, 0, 0.1));
  box-shadow: var(--product-list-item-box-shadow, none);
  padding: var(--product-list-item-padding, 16px 0);
  width: var(--product-list-item-width, 100%);
  box-sizing: var(--product-list-item-box-sizing, border-box);
  height: var(--product-list-item-height, 373px);
  overflow: hidden;

  background-color: #e0e0e0;
  background-size: 200% 100%;
}