@import url("//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
:root {
  --theme-h: 0;
  --theme-s: 0%;
  --theme-l: 50%;
}

:root {
  /* Gutter variables control the spacing of all elements on the site. Edit with care. */
  --gutter: 1rem;
  --half-gutter: calc(0.5 * var(--gutter));
  --quarter-gutter: calc(0.25 * var(--gutter));
  /*  Controlling the width of the content
      ------------------------------------
      --container-* variables control the width of the header, footer, and body content

      The clamp(a,b,c) function acts in the following way:
          First, it determines which is smaller, a or b, as in in min(a,b).
          Next, it determines which is larger, min(a,b) or c, as in max(min(a,b), c);
          This allows for fluid sizing.

          Given these default values, if the 70% of the browser viewport width is greater than
          1000px, it the container will be 70% of the width. Otherwise, the container will
          have whitespace to each side if the viewport is at least 1300px in width.

      A static value is also acceptable, and is the easiest path forward, e.g., 1200px

      The header and footer's container widths default to the same value, but can
      be set independently using:
          --header-container-max-width
          --footer-container-max-width
      This is useful when full-width headers and footers are desired, but content
      should still be constrained.
  */
  --container-max-width: clamp(1000px, 70vw, 1300px);
  --container-padding-mobile: 0 var(--gutter);
  --container-padding: 0;
  /* Change the body and body container background colors */
  --body-background-color: white;
  --body-container-background-color: white;
  /* ============================== *
  * Default Colors
  * ============================== */
  --mix-color: HSL(var(--theme-h), var(--theme-s), var(--theme-l));
  --color-alert: hsl(40,100%,85%);
  --color-alert-medium: hsl(40,100%,50%);
  --color-alert-dark: hsl(40,60%,20%);
  --color-warning: var(--color-alert);
  --color-warning-medium: var(--color-alert-medium);
  --color-warning-dark: var(--color-alert-dark);
  --color-negative: hsl(0,90%,90%);
  --color-negative-medium: hsl(0,90%,50%);
  --color-negative-dark: hsl(0,90%,25%);
  --color-error: var(--color-negative);
  --color-error-medium: var(--color-negative);
  --color-error-dark: var(--color-negative-dark);
  --color-positive: hsl(100,50%,85%);
  --color-positive-medium: hsl(100,50%,55%);
  --color-positive-dark: hsl(100,80%,20%);
  --color-success: var(--color-positive);
  --color-success-dark: var(--color-positive-dark);
  --color-info: hsl(220,100%,90%);
  --color-info-dark: hsl(220,100%,25%);
  /* hsl(hue, saturation, lightness) Useful tool: https://hslpicker.com/ */
  --color-black: HSL(var(--theme-h), var(--theme-s), calc(0.25 * var(--theme-l)));
  --color-x-light-grey: HSL(var(--theme-h), calc(.4 * var(--theme-s)), calc(1.8 * var(--theme-l)));
  --color-light-grey: HSL(var(--theme-h), calc(.4 * var(--theme-s)), calc(1.4 * var(--theme-l)));
  --color-grey: HSL(var(--theme-h), calc(.5 * var(--theme-s)), calc(0.6 * var(--theme-l)));
  --color-dark-grey: HSL(var(--theme-h), calc(.4 * var(--theme-s)), calc(0.5 * var(--theme-l)));
  --divider-color: HSL(var(--theme-h), calc(0.8 * var(--theme-s)), calc(.8 * var(--theme-l)));
  /* ============================== *
  * Typography
  * ============================== */
  /* Font sizes based on 1.2 Minor Third scale */
  --font-size-xxxl: 2.488rem;
  --font-size-xxl: 2.074rem;
  --font-size-xl: 1.728rem;
  --font-size-l: 1.44rem;
  --font-size-normal: 1rem;
  --font-size-s: .833rem;
  /* Copy refers to any non-heading text */
  --text-copy-font-family: "Poppins", sans-serif;
  --text-heading-font-family: var(--text-copy-font-family, sans-serif);
  --text-copy-color: var(--color-black);
  --text-heading-color: var(--color-black);
  --link-text-color: var(--color-grey);
  /* ============================== *
  * UI Twiddles
  * ============================== */
  --shadow-standard: 0 1px 2px hsl(0,0%,75%);
  /* ============================== *
  * SITE HEADER
  * ============================== */
  /* The header's grid template can be altered using:
          --header-grid-template
          --header-grid-template-areas
      The template areas MUST include the following:
        user-nav, logo, search, nav

      Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
  */
  --header-border-width: 1px;
  --header-border-style: solid;
  --header-border-color: var(--divider-color, #ddd);
  /* Comment out the following line to remove the bottom border */
  --header-border: var(--header-border-width, 1px) var(--header-border-style, solid) var(--header-border-color,#000);
  --header-link-color: var(--color-black, #000);
  --header-link-visited-color: var(--header-link-color,#000);
  --header-link-hover-color: var(--header-link-color,#000);
  --header-link-active-color: var(--header-link-color,#000);
  --header-background-color: white;
  /* The "banner" can be used along with Liftoff's default content feature to provide site-wide messaging */
  --banner-width: var(--container-max-width);
  /* Set to 100% for full width */
  --banner-background-color: var(--mix-color);
  --banner-text-color: white;
  /* ============================== *
  * SITE FOOTER
  * ============================== */
  /* The footer's grid template can be altered using:
          --footer-grid-template
          --footer-grid-template-areas
      The template areas MUST include the following:
        logo, cc, nav, copyright, legal

      Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid
  */
  --footer-border-width: 1px;
  --footer-border-style: solid;
  --footer-border-color: var(--header-border-color, #ddd);
  /* Comment out following line to remove the top border */
  --footer-border: var(--footer-border-width) var(--footer-border-style) var(--footer-border-color);
  --footer-text-color: var(--header-link-color,#000);
  --footer-link-color: var(--header-link-color,#000);
  --footer-link-visited-color: var(--header-link-color,#000);
  --footer-link-hover-color: var(--header-link-color,#000);
  --footer-link-active-color: var(--header-link-color,#000);
  --footer-background-color: var(--color-x-light-grey, white);
  /* ============================== *
  * Buttons
  * ============================== */
  --button-default-text-color: white;
  --button-primary-background-color: var(--mix-color,#4c4e4d);
  --button-primary-hover-background-color: HSL(var(--theme-h), var(--theme-s), calc(1.2 * var(--theme-l)));
  --button-primary-border-color: var(--button-primary-background-color);
  --button-secondary-color: var(--button-primary-background-color);
  --button-secondary-background-color: white;
  /* ============================== *
  * Tables
  * ============================== */
  --table-text-color: var(--text-copy-color, var(--color-black));
  --table-border-color: var(--divider-color, var(--color-grey));
  --table-header-background-color: var(--color-grey);
  --table-header-text-color: white;
  --table-footer-background-color: var(--table-header-background-color);
  --table-footer-text-color: var(--table-header-text-color);
  --table-stripe-color: white;
  --table-stripe-alternate-color: var(--color-x-light-grey);
  --table-width: 100%;
  --table-row-hover-background-color: var(--color-light-grey);
  --table-row-hover-alternate-background-color: var(--color-light-grey);
  /* ============================== *
  * "Specsheets"
  * ============================== */
  --specsheet-column-widths: auto 1fr;
  --specsheet-border-color: var(--specsheet-label-background-color,#ddd);
  --specsheet-border-radius: 5px;
  --specsheet-label-background-color: var(--color-grey);
  --specsheet-label-text-color: white;
  --specsheet-label-font-weight: 600;
  /* ============================== *
  * Alerts / Flashes
  * ============================== */
  --flash-padding: var(--half-gutter) var(--gutter);
  --flash-vertical-margin: var(--gutter);
  --flash-border-radius: 5px;
  /* ============================== *
  * FORMS
  * ============================== */
  --validation-required-color: var(--color-alert-medium);
  --validation-invalid-color: var(--color-negative-medium);
  --validation-invalid-color-dark: var(--color-negative-dark);
  --validation-invalid-color-semitransparent: rgba(#ff0000, 0.15);
  --validation-required-color-semitransparent: rgba(#f9a937,0.15);
  --validation-valid-color: var(--color-positive-medium);
  --validation-valid-color-dark: var(--color-positive-dark);
  --validation-valid-color-semitransparent: rgba(#51a351, 0.15);
  --form-label-font-size: 1rem;
  --form-label-font-weight: normal;
  --form-hint-font-size: .8rem;
  --form-file-input-background-color: var(--color-x-light-grey);
  --form-file-input-button-background-color: var(--button-primary-background-color);
  --form-file-input-button-background-color-dark: var(--color-black);
  --form-file-input-button-text-color: white;
  --form-input-background-color: white;
  --form-input-padding: .25em .25em .25em .5em;
  --form-input-font-size: 1em;
  --form-input-border-color: var(--color-light-grey);
  --form-select-padding: var(--quarter-gutter,1rem);
  /* ============================== *
  * PAGE: Homepage
  * ============================== */
  /* The homepage's grid template can be altered using:
          --homepage-grid-template
          --homepage-grid-template-areas
      The template areas MUST include the following:
        slider, callouts, secondary-callouts

      Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/grid

      Example:
      --homepage-grid-template: auto auto / 1fr 1fr;
      --homepage-grid-template-areas: 'slider slider' 'callouts secondary-callouts';

  */
  --homepage-category-link-color: white;
  --homepage-category-caption-background-color: var(--mix-color);
  --homepage-category-caption-text-color: white;
  --homepage-section-title-font-size: clamp(1rem, 6vw, 3rem);
  /* This will affect homepage headings and slide titles */
  --homepage-section-title-color: var(--mix-color);
  /* ===== Hero Unit / Slider */
  --homepage-slider-base-text-size: 16px;
  --homepage-slider-margin-top: var(--gutter);
  --homepage-slide-image-fit: cover;
  /* cover | contain */
  --homepage-slide-content-border-color: white;
  --homepage-slide-content-border-width: 1px;
  --homepage-slide-content-border-style: solid;
  --homepage-slide-shadow: 0 2px 5px -3px rgba(0,0,0,.8);
  --slide-style-a-column-widths-mobile: 1fr;
  --slide-style-a-column-widths-tablet: 3fr 1fr;
  --slide-style-a-column-widths-large: 3fr 2fr;
  --slide-style-a-vertical-alignment: center;
  --slide-style-b-content-text-color: var(--text-copy-color);
  --slide-style-b-content-border-radius: 5px;
  --slide-style-b-content-background-color: rgba(255,255,255,.8);
  /* Comment out the following line to hide the border */
  --homepage-slide-content-border: var(--homepage-slide-content-border-width) var(--homepage-slide-content-border-style) var(--homepage-slide-content-border-color);
  --homepage-slide-content-background: rgba(0,0,0,.7);
  --homepage-slide-content-visibility: visible;
  /* visible | hidden */
  /* ===== Callouts */
  --homepage-callout-col-count: 2;
  --homepage-callout-col-count-mobile: 1;
  --homepage-callout-shadow: 0 2px 5px rgba(0,0,0,.8);
  /* Change to "none" to hide */
  --homepage-callout-title-horizontal-alignment: center;
  /* start | center | end */
  --homepage-callout-title-vertical-alignment: center;
  /* start | center | end */
  --homepage-callout-title-border-radius: 5px;
  --homepage-callout-title-visibility: visible;
  /* visible | hidden */
  --homepage-callout-title-background-color: var(--mix-color);
  --homepage-callout-title-font-size: clamp(1rem,4vw,1.5rem);
  --homepage-callout-cta-hover-background-color: var(--color-black);
  /* ===== Secondary Callouts */
  --homepage-secondary-callout-subtitle-background-color: var(--color-dark-grey);
  --homepage-secondary-callout-subtitle-border-radius: 5px;
  --homepage-secondary-callout-subtitle-font-size: .8em;
  --homepage-secondary-callout-shadow: var(--homepage-callout-shadow, none);
  /* Change to "none" to hide */
  --homepage-secondary-callout-col-count-mobile: 1;
  --homepage-secondary-callout-col-count: 3;
  --homepage-secondary-callout-title-font-size: 1em;
  --homepage-secondary-callout-title-text-alignment: center;
  --homepage-secondary-callout-title-link-color: var(--text-copy-color);
  --homepage-secondary-callout-title-link-hover-color: var(--color-light-grey);
  /* Use the four following variables to control the position of the subtitle
     for secondary callouts. By default, it is set to be 0px from the top
     and 0px from the right of its container

     n.b., To position above the title and over the bottom of the image, the
     recommended bottom value is 3em.
   */
  --homepage-secondary-callout-subtitle-top: 0;
  --homepage-secondary-callout-subtitle-right: 0;
  --homepage-secondary-callout-subtitle-bottom: none;
  --homepage-secondary-callout-subtitle-left: none;
  /* ============================== *
   * PAGE: Product Landing
   * ============================== */
  --product-grid-template-mobile: auto / 1fr;
  --product-grid-template-medium: auto / 1fr 2fr;
  --product-grid-template-large: auto / 1fr 1fr;
  --product-description-font-style: italic;
  /* italic | normal */
  --product-description-font-weight: 300;
  --product-description-font-size: 1.4em;
  --product-description-line-height: 1.2;
  --product-description-border: 1px solid var(--divider-color, #ddd);
  /* ============================== *
   * PAGE: Cart
   * ============================== */
  --cart-link-text-color: white;
  /* Change only if text not visible for "Update Product Options" */
  /* ============================== *
   * PAGE: Checkout
   * ============================== */
  --order-overview-background-color: var(--color-x-light-grey);
  /* ============================== *
   * PAGE: Order History (search)
   * ============================== */
  --order-history-search-link-color: #2685ff;
  --order-history-search-link-color-dark: #005fd9;
  /* ============================== *
   * PAGE/VIEW: Category Listing
   * ============================== */
  --categories-per-row-small: 1;
  --categories-per-row-medium: 2;
  --categories-per-row-large: 3;
  --categories-per-row-xlarge: 4;
  --categories-subcategory-layout: "title" "image" "info";
  --category-title-text-alignment: center;
  /* left | center | right */
  --category-title-font-size: 1.2rem;
  --category-title-text-color: var(--text-heading-color, black);
  /* Uncomment the following line to hide subcategory CTAs in categories */
  /* --category-cta-display: none; */
  --category-cta-horizontal-alignment: center;
  /* start | center | end */
  /* Uncomment the following line to hide product CTAs in categories */
  /* --product-cta-display: none; */
  --product-cta-horizontal-alignment: end;
  /* start | center | end */
  --category-products-per-row-mobile: 1;
  --category-products-per-row-medium: 2;
  --category-products-per-row-large: 3;
  --category-products-per-row-xlarge: 4;
  --category-product-grid-template-mobile: repeat(2,auto) / 1fr;
  --category-product-grid-template: auto 1fr / 1fr;
  --category-product-name-font-size: var(--font-size-l);
  --category-product-name-text-alignment: left;
  /* left | center | right */
  --category-product-cta-alignment: end;
  /* start | center | end */
  /* ============================== *
   * PAGE/VIEW: Customization Page
   * ============================== */
  --customization-column-widths: 1fr 1fr;
  --customization-label-font-weight: 600;
  --customization-preview-max-height: 60vh;
  --customization-preview-background: var(--color-x-light-grey);
  --customization-preview-border: none;
}

:root {
  --button-primary-background-color: HSL(var(--theme-h), var(--theme-s), calc(0.5 * var(--theme-l)));
}