/** Start OWM variable definitions **/
:root {
  --yellow: #dfd763;
  --green-dark: #2E432B;
  --green-medium: #395938;
  --green-light: #43593d;
  --blue-gray-dark: #4D5A6C;
  --blue-light: #88C9EF;
  --blue-gray: #BFD1E0;
  --white: #ffffff;
  --clr-link-default: #395938;
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341cqw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136cqw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273cqw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864cqw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057cqw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044cqw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072cqw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461cqw, 3.8147rem);
  --step-6: clamp(3.3592rem, 2.7828rem + 2.5621cqw, 4.7684rem);
  --step-7: clamp(4.0311rem, 3.2418rem + 3.508cqw, 5.9605rem);
  --angle-headline-hype: 20deg;
  --fs-headline-xl: 72px;
  --ff-heading: "Oswald", sans-serif;
  --ff-copy: "Arial", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-heading-hype: var(--step-6);
  --_color-section-primary-default: #bb5291;
  --_color-section-secondary-default: #94D4A6;
  --_color-section-accent-default: #76ACC8;
  --_color-section-text-default: #0F060B;
}

body {
  --theme: blackfriday;
}

/** End OWM variable definitions **/
/** Start OWM custom styles **/
/** allow for a three-up display of categories **/
@media (min-width: 1200px) {
  .three-up .col-lg-3 {
    width: 33.333333%;
  }
}

@media (min-width: 992px) {
  .row.flex {
    display: flex;
    justify-content: stretch;
  }
  .row.flex > * {
    float: none;
  }
  .row.flex .sub-hero-image {
    height: 100%;
    margin-bottom: 0;
    max-height: none;
    position: absolute;
    inset: 0;
  }
  .row.flex .sub-hero-image > a {
    display: block;
    height: 100%;
  }
  .row.flex img:not(.image img) {
    height: 100%;
    object-fit: cover;
  }
  .row.flex .section {
    height: 100%;
  }
}
.container-fluid:has(.section) {
  padding-inline: 0;
}

:has(> .section) {
  container: section-container/inline-size;
}

.section {
  --_section-padding-block: var(--section-padding, 5rem);
  --_section-padding-block-inner: var(--section-padding-inner, 0);
  --padding-top: var(--_section-padding-block);
  --padding-bottom: var(--_section-padding-block);
  --padding-top-inner: var(--_section-padding-block-inner);
  --padding-bottom-inner: var(--_section-padding-block-inner);
  --_section-background-color: var(--section-background-color, var(--_color-section-primary-default));
  --_section-heading-color: var(--section-heading-color, var(--_color-section-text-default));
  --_section-heading-background-color: var(--section-heading-background-color, var(--_color-section-secondary-default));
  --_section-text-color: var(--section-text-color, var(--_color-section-text-default));
  --_section-text-background-color: var(--section-text-background-color, transparent);
  --_content-padding-inline: var(--content-padding-inline, var(--fs-heading-hype, 2rem));
  --_content-padding-block: var(--content-padding-block, 0);
  --_section-heading-padding-block: var(--section-heading-padding-block, 0);
  --_section-heading-padding-inline: vaR(--section-heading-padding-inline, var(--_content-padding-inline));
  --_backdrop-background-color: var(--backdrop-background-color, rgb(0 0 0 / .2));
  --_overlap: var(--overlap, 50px);
  --_min-margin-inline: var(--min-margin-inline, 1rem);
  --_content-width: var(--content-width, 50%);
  --_container-width: var(--container-width, 1280px);
  --_image-bottom-offset: var(--image-bottom-offset, -35%);
  --_image-left-offset: var(--image-left-offset, 0);
  --_calc-min-margin-inline: minmax(var(--_min-margin-inline), 1fr);
  --_calc-content-width: calc(var(--_content-width) - (2 * var(--_min-margin-inline)) - var(--_overlap));
  --_calc-image-width: calc(100% - var(--_content-width) - (2 * var(--_min-margin-inline)) - var(--_overlap));
  --grid-template-columns: [full-width-start] var(--_calc-min-margin-inline) [container-start content-start headline-start body-start] var(--_calc-content-width) [body-end image-start] var(--_overlap) [content-end] var(--_calc-image-width) [image-end headline-end container-end] var(--_calc-min-margin-inline) [full-width-end];
  --grid-template-rows: [full-width-start container-start content-start headline-start image-start] min-content [headline-end body-start] 1fr [body-end image-end content-end container-end full-width-end];
  background-color: var(--_section-background-color);
  color: var(--_section-text-color);
  isolation: isolate;
  padding-block: var(--padding-top) var(--padding-bottom) !important;
  overflow: clip;
  position: relative;
  /* this selector is ridiculous because everything on this site is !importanted */
  /** this is just for the mobile view, 'cause layers */
}
@container section-container (max-width: 780px) {
  .section {
    --grid-template-columns: [full-width-start] var(--_calc-min-margin-inline) [container-start content-start headline-start body-start image-start] [image-end body-end headline-end content-end container-end] var(--_calc-min-margin-inline) [full-width-end];
    --image-bottom-offset: -40%;
    --image-left-offset: 30%;
    --content-padding-inline: 1rem;
  }
  .section.split {
    --grid-template-columns: [full-width-start container-start content-start headline-start body-start] 1fr [body-end image-start] 1fr [image-end body-end headline-end content-end container-end full-width-end];
    --section-text-background-color: transparent;
    --image-bottom-offset: -10%;
    --image-left-offset: 0%;
  }
}
@container section-container (max-width: 400px) {
  .section {
    --image-bottom-offset: -20%;
  }
}
.section.has-backdrop::before {
  content: "";
  background: var(--_backdrop-background-color);
  position: absolute;
  inset: 0;
  z-index: -3;
}
.section :is(h1, h2, h3, h4, h5):is(h1, h2, h3, h4, h5),
.section .h1, .section .h2, .section .h3, .section .h4, .section .h5 {
  color: var(--_section-heading-color) !important;
}
.section .section-inner {
  display: grid;
  gap: 0;
  grid-template-columns: var(--grid-template-columns);
  grid-template-rows: var(--grid-template-rows);
  overflow: clip;
  padding-block: var(--padding-top-inner) var(--padding-bottom-inner);
  position: relative;
  height: 100%;
}
.section .headline {
  grid-column-start: var(--headline-column-start, headline);
  grid-column-end: var(--headline-column-end, headline);
  grid-row-start: var(--headline-row-start, headline);
  grid-row-end: var(--headline-row-end, headline);
  background: var(--_section-heading-background-color);
  padding-inline: var(--_section-heading-padding-inline);
  padding-block: var(--_section-heading-padding-block);
  position: relative;
  margin: 0.65em 0 0;
  font-size: var(--fs-heading-hype) !important;
  text-transform: uppercase;
}
.section .headline-bg {
  display: var(--headline-bg-display, none);
}
.section .body {
  grid-column-start: var(--body-column-start, body);
  grid-column-end: var(--body-column-end, body);
  grid-row-start: var(--body-row-start, body);
  grid-row-end: var(--body-row-end, body);
  background: var(--_section-text-background-color);
  z-index: 3;
  font-size: var(--step-2);
  font-family: var(--ff-heading);
  padding-inline-start: var(--_content-padding-inline);
  text-wrap: balance;
  align-self: end;
}
.section .image {
  --_calc-image-bottom-offset: calc(var(--_image-bottom-offset) - var(--padding-bottom-inner));
  grid-column-start: var(--image-column-start, image);
  grid-column-end: var(--image-column-end, image);
  grid-row-start: var(--image-row-start, image);
  grid-row-end: var(--image-row-end, image);
  position: relative;
  z-index: 5;
}
.section .image img {
  max-width: none;
  position: absolute;
  bottom: var(--_calc-image-bottom-offset);
  left: var(--_image-left-offset);
}
@container section-container (max-width: 780px) {
  .section .headline {
    background: transparent;
    z-index: 7;
  }
  .section .headline-bg {
    grid-column-start: var(--headline-column-start, headline);
    grid-column-end: var(--headline-column-end, headline);
    grid-row-start: var(--headline-row-start, headline);
    grid-row-end: var(--headline-row-end, headline);
    inset: 0;
    background: var(--_section-heading-background-color);
    position: absolute;
    z-index: 1;
  }
  .section .body {
    z-index: 100;
    width: fit-content;
  }
  .section .image img {
    max-width: 100%;
  }
}

.hype {
  --section-padding: 0;
  --section-padding-inner: var(--step-3);
  --section-heading-padding-block: .35em;
  --section-heading-background-color: var(--green-light);
  --section-background-color: var(--green-dark);
  --section-text-color: #fff;
  --section-heading-color: var(--yellow);
  --headline-bg-display: none;
}
@container section-container (max-width: 780px) {
  .hype {
    --section-text-background-color: var(--green-dark);
  }
  .hype.split {
    --section-text-background-color: transparent;
  }
}
.hype .headline {
  text-shadow: 7.5px 10px 0 var(--green-dark);
  transform: skewX(calc(var(--angle-headline-hype) * -1)) rotate(calc(-1 * var(--angle-headline-hype)));
  transform-origin: var(--fs-heading-hype);
}
@container section-container (max-width: 780px) {
  .hype {
    --headline-bg-display: block;
  }
  .hype .headline-bg {
    transform: skewX(calc(var(--angle-headline-hype) * -1)) rotate(calc(-1 * var(--angle-headline-hype)));
    transform-origin: var(--fs-heading-hype);
  }
}

.winter {
  --section-text-color: var(--blue-gray-dark);
  --section-heading-color: var(--blue-gray-dark);
  --section-heading-background-color: transparent;
  --section-background-color: transparent;
  --_gradient-color-bottom: var(--gradient-color-bottom, var(--blue-gray));
  --_gradient-color-top: var(--gradient-color-top, #fff);
}
.winter::after {
  content: "";
  background: linear-gradient(to top, var(--_gradient-color-bottom), var(--_gradient-color-top) 40%);
  display: block;
  position: absolute;
  inset: 0;
  top: auto;
  height: 50%;
  z-index: -1;
  mask-image: url(assets/mt-pinewskis.svg);
  mask-repeat: no-repeat;
  mask-position: left bottom;
  transform: translateX(-10%);
}
.winter .btn-primary {
  --btn-background: var(--blue-gray-dark);
  --btn-color: var(--white);
  --btn-background-hover: var(--blue-light);
  --btn-text-transform: uppercase;
}

.winter.blackfriday {
  --gradient-color-bottom: #000;
  --section-heading-color: #fff;
  --section-heading-background: #000;
}

.winter.cybermonday {
  --gradient-color-bottom: green;
  --section-heading-color: #fff;
  --section-heading-background: limegreen;
}

@container style(--theme: blackfriday) {
  .winter {
    --gradient-color-bottom: #000;
    --section-heading-color: #fff;
    --section-heading-background: #000;
  }
}

@container style(--theme: cybermonday) {
  .winter {
    --gradient-color-bottom: green;
    --section-heading-color: #fff;
    --section-heading-background: limegreen;
  }
}

@property --hype-stop-1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 20%;
}
@property --hype-stop-2 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 80%;
}
.btn.btn,
a.btn:not(.ignore-site-layout-styles a) {
  --_btn-color: var(--btn-color, var(--clr-link-default));
  --_btn-background: var(--btn-background, transparent);
  --_btn-color-hover: var(--btn-color-hover, var(--_btn-color));
  --_btn-background-hover: var(--btn-background-hover, var(--_btn-background));
  --_btn-font-size: var(--btn-font-size, inherit);
  --_btn-text-transform: var(--btn-text-transform, none);
  --_btn-font-weight: var(--btn-font-weight, 300);
  --_btn-border-color: var(--btn-border-color, transparent);
  --_btn-border-color-hover: var(--btn-border-color-hover, transparent);
  background: var(--_btn-background);
  border-color: var(--_btn-border-color);
  color: var(--_btn-color) !important;
  font-size: var(--_btn-font-size);
  font-weight: var(--_btn-font-weight) !important;
  text-transform: var(--_btn-text-transform);
}
.btn.btn:hover, .btn.btn:focus-within,
a.btn:not(.ignore-site-layout-styles a):hover,
a.btn:not(.ignore-site-layout-styles a):focus-within {
  color: var(--_btn-color-hover) !important;
  background: var(--_btn-background-hover);
  border-color: var(--_btn-border-color-hover);
}
.btn.btn.btn-primary,
a.btn:not(.ignore-site-layout-styles a).btn-primary {
  background: var(--_btn-background) !important;
}
.btn.btn.btn-primary:hover, .btn.btn.btn-primary:focus-within,
a.btn:not(.ignore-site-layout-styles a).btn-primary:hover,
a.btn:not(.ignore-site-layout-styles a).btn-primary:focus-within {
  color: var(--_btn-color-hover) !important;
  background: var(--_btn-background-hover) !important;
}

.btn-light {
  --btn-background: var(--white);
  --btn-color: var(--green-medium);
  --btn-background-hover: var(--green-medium);
  --btn-color-hover: var(--white) ;
}

.btn-primary {
  --btn-background: var(--green-dark);
  --btn-color: var(--white);
  --btn-background-hover: hsl(from var(--green-light) h s calc(l * 1.25));
}

.btn-secondary {
  --btn-background: var(--yellow);
  --btn-background-hover: hsl(from var(--yellow) h calc(s * 1.5) calc(l * 1.25) );
  --btn-color: var(--green-dark);
  --btn-color-hover: var(--green-light);
  --btn-font-size: var(--step-1);
  --btn-text-transform: uppercase;
  --btn-font-weight: 500;
}

.btn.btn-hype {
  --btn-background: linear-gradient(calc(-1 * var(--angle-headline-hype)), var(--green-dark) var(--hype-stop-1), var(--green-medium) var(--hype-stop-1), var(--green-medium) var(--hype-stop-2), var(--green-dark) var(--hype-stop-2));
  --btn-color: var(--yellow);
  --btn-font-size: var(--step-1);
  --btn-font-weight: 500;
  --btn-text-transform: uppercase;
  transition: --hype-stop-1 200ms ease, --hype-stop-2 200ms ease;
}
.btn.btn-hype:hover {
  --hype-stop-1: 0%;
  --hype-stop-2: 100%;
}

/** End OWM custom styles **/

/*# sourceMappingURL=styles.css.map */