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

:root,
h2 button.accordion-button { /* this is for Accordions */
  /**
   * 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-border-radius: 3px;
  --d-button-border-radius: 1rem;
  /*
   * Typography Sizes
   */
  --d-font-size-s: 1.3rem; 
  --d-font-size-xs: 1.2rem; 
  --d-font-size-xxs: 1.1rem; 
  /* line heights */
  --d-line-height-xl: 2;
  --d-line-height-l: 1.8;
  --d-line-height-m: 1.5;
  --d-line-height-s: 1.3;
  --d-line-height-xs: 1.15;
  --d-line-height-xxs: 1;
  /* font */
  --d-font-size: 1.5rem; 
  --d-color: var(--color-grey);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height: var(--d-line-height-m);
  --d-font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  --d-margin-bottom:var(--d-space-ml);
  --d-extra-margin:var(--d-space-ml); /* ALWAYS same as --d-margin-bottom above */
}
h1, .ck.ck-button.ck-heading_heading1 .ck-button__label {
  /* Heading Styles */
  /* h1 */
  --d-font-size: 3rem; 
  --d-color: var(--color-one);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-l);
  --d-text-align:left;
  --d-font-weight:600;
  --d-line-height:var(--d-line-height-xxs);
}
@media all and (min-width: 768px) {
  h1, .ck.ck-button.ck-heading_heading1 .ck-button__label {
    --d-font-size: 4rem; 
  }
}
@media all and (min-width: 1025px), print {
  h1, .ck.ck-button.ck-heading_heading1 .ck-button__label {
    --d-font-size: 5rem;
    --d-margin-bottom:var(--d-space-xl);
  }
}
h2:not(#block-useraccountmenu-menu), .h2, .ck.ck-button.ck-heading_heading2 .ck-button__label {
  /* h2*/
  --d-font-size: 2.4rem;
  --d-color: var(--color-three);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-m);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height:var(--d-line-height-s);
}
@media all and (min-width: 768px) {
  h2:not(#block-useraccountmenu-menu), .h2, .ck.ck-button.ck-heading_heading2 .ck-button__label {
    --d-font-size: 2.6rem; 
  }
}
@media all and (min-width: 1025px), print {
  h2:not(#block-useraccountmenu-menu), .h2, .ck.ck-button.ck-heading_heading2 .ck-button__label {
    --d-font-size: 2.8rem;
  }
}
h3, .h3, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend , .ck.ck-button.ck-heading_heading3 .ck-button__label, .ui-dialog-title {
  /*h3 */
  --d-font-size: 2.2rem;
  --d-color: var(--color-two);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-s);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height:var(--d-line-height-s);
}
@media all and (min-width: 768px) {
  h3, .h3, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend, .ck.ck-button.ck-heading_heading3 .ck-button__label, .ui-dialog-title {
    --d-font-size: 2.4rem; 
  }
}
@media all and (min-width: 1025px), print {
  h3, .h3, ol.search-results > li::before, .order-total-line__total, .checkout-pane legend, .ck.ck-button.ck-heading_heading3 .ck-button__label, .ui-dialog-title {
    --d-font-size: 2.6rem;
  }
}
h4, .h4, .ck.ck-button.ck-heading_heading4 .ck-button__label {
  /* h4 */
  --d-font-size: 1.8rem;
  --d-color: var(--color-red);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-xs);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height:var(--d-line-height-m);
}
@media all and (min-width: 768px) {
  h4, .h4, .ck.ck-button.ck-heading_heading4 .ck-button__label {
    --d-font-size: 2rem; 
  }
}
h5, .h5, .ck.ck-button.ck-heading_heading5 .ck-button__label {
  /* h5 */
  --d-font-size: 1.8rem;
  --d-color: var(--color-grey);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-l);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height:var(--d-line-height-m);
}
@media all and (min-width: 768px) {
  h5, .h5, .ck.ck-button.ck-heading_heading5 .ck-button__label {
    --d-font-size: 2rem; 
  }
}
h6, .h6, .ck.ck-button.ck-heading_heading6 .ck-button__label {
  /* h6 */
  --d-font-size: 1.6rem;
  --d-color: var(--color-grey);
  --d-margin-top:var(--d-space-zero);
  --d-margin-bottom:var(--d-space-xxs);
  --d-text-align:left;
  --d-font-weight:400;
  --d-line-height:var(--d-line-height-m);
}
blockquote {
  --d-blockquote-border: var(--d-font-size-xxs) solid var(--color-two);
  --d-blockquote-bg:rgba(0,0,0,0.08);
  --d-blockquote-padding: calc(((var(--d-font-size) * var(--d-line-height)) - var(--d-font-size)) + var(--d-margin-bottom)) var(--d-space-l) 0 var(--d-space-l);
}
table {
  /* Tables */
  --d-color-th-bg: var(--color-grey);
  --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-red);/**/
  --d-color-link-hover: var(--color-red-hover);/**/
  /* Buttons */
  --d-button-color: var(--color-white);
  --d-button-bg: var(--color-one);
  --d-button-border: var(--color-one);
  --d-button-padding-tb: var(--d-space-s);
  --d-button-padding-lr: var(--d-space-ml);
  /* button hover */
  --d-button-color-hover: var(--color-white);
  --d-button-bg-hover: var(--color-one-hover);
  --d-button-border-hover: var(--color-one-hover);
}
ul, ol {
  /* Bullet/Numbered Lists */
  --li-marker-color: var(--color-two);/**/
}