@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
  /**
   * Spaces.
   */
  --d-space-xxl: 6.4rem;
  --d-space-xl: 4.8rem;
  --d-space-ml: 3.2rem;
  --d-space-l: 2.4rem;
  --d-space-m: 1.6rem;
  --d-space-s: 1.2rem;
  --d-space-xs: 0.8rem;
  --d-space-xxs: 0.6rem;
  --d-space-xxxs: 0.4rem;
  --d-space-zero: 0;
  /**
   * VW Spaces
   */
  --d-vw-space-xl: 4vw;
  --d-vw-space-l: 3vw;
  --d-vw-space-m: 2vw;
  --d-vw-space-s: 1vw;
  /*
   * Common.
   */
  --d-base-border-radius: 3px;
  --d-base-button-border-radius: 3px;
  /*
   * Typography.Base sizes
   */
  --d-font-size-s: 1.3rem; 
  --d-font-size-xs: 1.2rem; 
  --d-font-size-xxs: 1.1rem; 
  /* base line heights */
  --d-line-height-s: 1.3;
  --d-line-height-xs: 1.15;
  --d-line-height-xxs: 1;
  /* base font */
  --d-font-size-base: 1.5rem; 
  --d-color-base: var(--color-grey);
  --d-text-align-base:left;
  --d-font-weight-base:400;
  --d-line-height-base: 1.5;
  --d-font-family-base: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  /* top margin on elements for alignment wth text */
  --d-margin-top-base:var(--d-space-xxxs);
  --d-margin-bottom-base:var(--d-space-l);
}
h1 {
  /* Heading Styles */
  /* h1 */
  --d-font-size-h1: 3.2rem; 
  --d-color-h1: var(--color-eight);
  --d-margin-top-h1:var(--d-space-zero);
  --d-margin-bottom-h1:var(--d-space-xxxs);
  --d-text-align-h1:center;
  --d-font-weight-h1:700;
  --d-line-height-h1:var(--d-line-height-xs);
}
@media all and (min-width: 768px) {
  h1 {
    --d-font-size-h1: 4rem; 
  }
}
@media all and (min-width: 1025px), print {
  h1 {
    --d-font-size-h1: 4.8rem;
  }
}
h2:not(#block-useraccountmenu-menu), .h2, .modal, .ck-button__label {
  /* h2*/
  --d-font-size-h2: 2.6rem;
  --d-color-h2: var(--color-eight);
  --d-margin-top-h2:var(--d-space-zero);
  --d-margin-bottom-h2:var(--d-space-s);
  --d-text-align-h2:left;
  --d-font-weight-h2:700;
  --d-line-height-h2:var(--d-line-height-s);
}
@media all and (min-width: 768px) {
  h2:not(#block-useraccountmenu-menu), .h2, .modal, .ck-button__label {
    --d-font-size-h2: 3.2rem; 
  }
}
@media all and (min-width: 1025px), print {
  h2:not(#block-useraccountmenu-menu), .h2, .modal, .ck-button__label {
    --d-font-size-h2: 3.6rem;
  }
}
h3, .h3, .modal, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend , .ck-button__label{
  /*h3 */
  --d-font-size-h3: 2.2rem;
  --d-color-h3: var(--color-eight);
  --d-margin-top-h3:var(--d-space-zero);
  --d-margin-bottom-h3:var(--d-space-m);
  --d-text-align-h3:left;
  --d-font-weight-h3:400;
  --d-line-height-h3:var(--d-line-height-s);
}
@media all and (min-width: 768px) {
  h3, .h3, .modal, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend, .ck-button__label {
    --d-font-size-h3: 2.4rem; 
  }
}
@media all and (min-width: 1025px), print {
  h3, .h3, .modal, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend, .ck-button__label {
    --d-font-size-h3: 2.8rem;
  }
}
h4, .h4, .ck-button__label {
  /* h4 */
  --d-font-size-h4: 2rem;
  --d-color-h4: var(--color-grey);
  --d-margin-top-h4:var(--d-space-zero);
  --d-margin-bottom-h4:var(--d-space-xs);
  --d-text-align-h4:left;
  --d-font-weight-h4:400;
  --d-line-height-h4:var(--d-line-height-base);
}
h5, .h5, .ck-button__label {
  /* h5 */
  --d-font-size-h5: 2rem;
  --d-color-h5: var(--color-grey);
  --d-margin-top-h5:var(--d-space-zero);
  --d-margin-bottom-h5:var(--d-space-l);
  --d-text-align-h5:left;
  --d-font-weight-h5:400;
  --d-line-height-h5:var(--d-line-height-base);
}
h6, .h6, .ck-button__label {
  /* h6 */
  --d-font-size-h6: 1.6rem;
  --d-color-h6: var(--color-grey);
  --d-margin-top-h6:var(--d-space-zero);
  --d-margin-bottom-h6:var(--d-space-xxs);
  --d-text-align-h6:left;
  --d-font-weight-h6:700;
  --d-line-height-h6:var(--d-line-height-base);
}
blockquote {
  --d-blockquote-border: var(--d-font-size-xxs) solid var(--color-three);
  --d-blockquote-bg: var(--color-eight);
  --d-blockquote-padding: var(--d-space-ml) var(--d-space-l) var(--d-space-xs) var(--d-space-l);
}
table {
  /* Tables */
  --d-color-th-bg: var(--d-color-base);
  --d-color-th: var(--color-white);
  --d-color-th-border: var(--color-white);
  --d-color-td-border: var(--color-light-grey-hover);
}
:root {
  /* Links */
  --d-color-link: var(--color-four);/**/
  --d-color-link-hover: var(--color-four-hover);/**/
  /* Buttons */
  --d-button-color: var(--color-eight);
  --d-button-bg: var(--color-three);
  --d-button-border: var(--color-three);
  --d-button-padding-tb: var(--d-space-s);
  --d-button-padding-lr: var(--d-space-ml);
  /* button hover */
  --d-button-color-hover: var(--color-eight-hover);
  --d-button-bg-hover: var(--color-three-hover);
  --d-button-border-hover: var(--color-three-hover);
}
ul, ol {
  /* Bullet/Numbered Lists */
  --li-marker-color: var(--color-four);/**/
}