@font-face {
  font-family: 'Spectral';
  src: url('https://perforacare.com/cdn/shop/files/Spectral-Medium.woff2?v=4719448846934224036') format('woff2'),
    url('https://perforacare.com/cdn/shop/files/Spectral-Medium.woff?v=2119732077659049007') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body-family: 'Spectral', serif;
  --font-body-style: normal;
  --font-body-weight: 400;
  --font-body-size: 1.6rem;
  --font-heading-family: 'Spectral', serif;
  --font-heading-style: normal;
  --font-heading-weight: 400;
  --font-heading-size: 1;
  --gutter-base: 1.6rem;
  --gutter: calc((var(--gutter-base) * var(--times-fold, .5)));
  --gutter-container: calc(var(--gutter) * var(--times-fold-container, 2.5));
  --overlay: 0.28;
  --type-scale: 1.125;
  --heading-1: calc(var(--heading-2) * var(--font-heading-size) * var(--type-scale));
  --heading-2: calc(var(--heading-3) * var(--font-heading-size) * var(--type-scale));
  --heading-3: calc(var(--heading-4) * var(--font-heading-size) * var(--type-scale));
  --heading-4: calc(var(--heading-5) * var(--font-heading-size) * var(--type-scale));
  --heading-5: calc(var(--font-body-size) * var(--font-heading-size) * var(--type-scale));
  --heading-6: calc(var(--font-body-size) * var(--font-heading-size) * var(--type-scale-sm, 1.067));
  --form-field-lg: 44px;
  --form-field-sm: 36px;
  --timing-function-on: cubic-bezier(.5,0,.1,1);
  --timing-function-off: cubic-bezier(.9,0,.5,1);
  --font-button-family: var(--font-heading-family);
  --font-button-style: var(--font-heading-style);
  --font-button-weight: var(--font-heading-weight);
  --font-button-size: calc(var(--font-body-size) * 1.2);
  --font-subheading-family: var(--font-body-family);
  --font-subheading-style: var(--font-body-style);
  --font-subheading-weight: var(--font-body-weight);
  --font-menu-item-family: var(--font-body-family);
  --font-menu-item-style: var(--font-body-style);
  --font-menu-item-weight: var(--font-body-weight);
  --font-menu-item-size: var(--font-body-size);
  --spacing-scale-sm: 8px;
  --spacing-scale-md: 10px;
  --spacing-scale-lg: 12px;
  --spacing: var(--spacing-scale-sm);
  --color-sale-badge-text: #ffffff;
  --color-sale-badge-bg: #b0132d;
  --color-low-stock-badge-text: #090C26;
  --color-low-stock-badge: #FFA800;
  --color-success: #10873f;
  --color-danger: #da3d08;
  --color-warning: #e38c09;
  --color-page-bg: #ffffff;
  --color-page-bg-rgb: 255, 255, 255;
  --color-normal-text: #0e0d1c;
  --gradient-background: #ffffff;
  --color-normal-text-rgb: 14, 13, 28;
  --color-btn-bg-rgb: 33, 33, 33;
  --primary_button_background_gradient: #212121;
  --color-btn-label: #ffffff;
  --color-btn-secondary-bg-rgb: 255, 255, 255;
  --secondary_button_background_gradient: #ffffff;
  --color-light-text: rgba(var(--color-normal-text-rgb), .6);
  --color-disabled-text: rgba(var(--color-normal-text-rgb), .3);
  --color-btn-secondary-label: #0e0d1c;
  --color-badge-text: #090c26;
  --color-badge-background: #9594da;
  --color-main-accent-text: #ffffff;
  --color-main-accent-bg: #9594da;
  --color-extra-accent-text: #ffffff;
  --color-extra-accent-bg: #0e0d1c;
  --color-bg-line: rgba(var(--color-normal-text-rgb), .04);
  --color-divider: rgba(var(--color-normal-text-rgb), .12);
  --color-border: var(--color-divider);
  --header-height: 68px;
}

@media (max-width: 768px) {
  :root {
    --times-fold-container: 1.75;
    --header-height: 56px;
  }
}

@media (max-width: 480px) {
  :root {
    --times-fold-container: 1.25;
    --font-body-size: 1.5rem;
  }
}

.color-scheme-announcement {
  --color-page-bg: #9594da;
  --color-page-bg-rgb: 149, 148, 218;
  --color-normal-text: #ffffff;
  --color-normal-text-rgb: 255, 255, 255;
}

.color-scheme-footer {
  --color-page-bg: #f5f5f7;
  --color-normal-text: #0e0d1c;
}