/** Shopify CDN: Minification failed

Line 328:0 Expected "}" to go with "{"

**/
/** Critical CSS for the theme. This file is included on every page. */

/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */
* {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
}

html:has(dialog[scroll-lock][open], details[scroll-lock][open]) {
  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

button {
  font: inherit;
}

select {
  background-color: var(--color-background);
  color: currentcolor;
}

dialog {
  background-color: var(--color-background);
  color: var(--color-foreground);
}

p {
  text-wrap: pretty;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p:empty {
  display: none;
}

:is(p, h1, h2, h3, h4, h5, h6):first-child,
:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

:is(p, h1, h2, h3, h4, h5, h6):last-child,
:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) {
  margin-block-end: 0;
}

/** Theme styles below */
body {
  font-family: var(--font-primary--family);
  font-weight: var(--font-primary--weight);
  background-color: var(--color-background);
  color: var(--color-foreground);
  /* Grayscale smoothing so Neue Haas renders at its true weight on Apple
     devices — without it, subpixel smoothing makes 55/65 look a weight heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Titles and anything else bold use 65 Medium. Browsers default headings,
 * b, strong and th to 700, which would otherwise pull the Bold face.
 */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th {
  font-weight: var(--font-primary--weight-bold);
}

/**
 * Horizontal gutter shared by the homepage sections. The design specifies
 * 16px at 375px and 112px at 1440px; the middle step is our own, since the
 * wireframes don't cover tablet widths.
 */
:root {
  --layout-gutter: 16px;
}

@media screen and (min-width: 750px) {
  :root {
    --layout-gutter: 40px;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --layout-gutter: 112px;
  }
}

/**
 * Line icons render at one stroke weight across the whole page regardless of
 * each icon's artboard scale: 1.4px on mobile, 2px from 750px up (the Figma
 * frames). `non-scaling-stroke` pins the width to screen pixels, so a 40-unit
 * droplet and a 16-unit lock read identically. The wordmark is fill-based, so
 * it isn't touched.
 */
:root {
  --icon-stroke-width: 1.6px;
}

@media screen and (min-width: 750px) {
  :root {
    --icon-stroke-width: 2px;
  }
}

svg [stroke="currentColor"] {
  stroke-width: var(--icon-stroke-width);
  vector-effect: non-scaling-stroke;
}

/** Section layout utilities */

/**
 * Setup a grid that enables both full-width and constrained layouts
 * depending on the class of the child elements.
 *
 * By default, a minimum content margin is set on the left and right
 * sides of the section and the content is centered in the viewport to
 * not exceed the maximum page width.
 *
 * When a child element is given the `full-width` class, it will span
 * the entire viewport.
 */
.shopify-section {
  --content-width: min(
    calc(var(--page-width) - var(--page-margin) * 2),
    calc(100% - var(--page-margin) * 2)
  );
  --content-margin: minmax(var(--page-margin), 1fr);
  --content-grid: var(--content-margin) var(--content-width) var(--content-margin);

  /* This is required to make <img> elements work as background images */
  position: relative;
  grid-template-columns: var(--content-grid);
  display: grid;
  width: 100%;
}

/* Child elements, by default, are constrained to the central column of the grid. */
.shopify-section > * {
  grid-column: 2;
}

/* Child elements that use the full-width utility class span the entire viewport. */
.shopify-section > .full-width {
  grid-column: 1 / -1;
}

/**
 * Shopify's cookie consent banner, injected by Shopify at the end of body
 * with its own stylesheet (ids are Shopify's, prefixed shopify-pc). Restyled
 * from the default boxed dialog into a slim bottom bar: text on the left,
 * compact buttons on the right, no shadow. !important because Shopify's own
 * banner stylesheet loads after this file and must be out-specified.
 * The preferences modal it opens is left at Shopify's defaults.
 */
#shopify-pc__banner.shopify-pc__banner__dialog {
  padding: 13px var(--layout-gutter) !important;
  border-top: 1px solid rgba(18, 17, 16, 0.15);
  box-shadow: none !important;
}

/* Full width at every viewport, so the text starts at the page gutter and
   the buttons end at it, matching the header and sections above */
#shopify-pc__banner .shopify-pc__banner__wrapper {
  width: 100% !important;
  max-width: none !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px;
}

/* Kept in the accessibility tree; visually the slim bar reads without it */
#shopify-pc__banner #shopify-pc__banner__body-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

#shopify-pc__banner .shopify-pc__banner__body {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}

/* text-wrap: wrap, because the global text-wrap: pretty balances the short
   paragraph and leaves a ragged right edge that reads as stray padding */
#shopify-pc__banner .shopify-pc__banner__body p {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: #121110 !important;
  margin: 0 !important;
  text-wrap: wrap !important;
}

/* Shopify gives this container width: 100%, and grows it at wide viewports,
   either of which strands the buttons mid-bar under a row layout. Pin it to
   its content size and keep the buttons on its right edge regardless. */
#shopify-pc__banner .shopify-pc__banner__btns {
  width: auto !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 0 !important;
}

#shopify-pc__banner .shopify-pc__banner__btns button {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: var(--font-primary--weight-bold) !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  padding: 8px 16px !important;
  cursor: pointer;
}

/* Visual order: quiet option first, strongest action last on the right */
#shopify-pc__banner #shopify-pc__banner__btn-manage-prefs {
  order: 1;
  padding: 8px 4px !important;
  background: none !important;
  border: 0 !important;
  color: #121110 !important;
  font-weight: var(--font-primary--weight) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  white-space: nowrap;
}

#shopify-pc__banner #shopify-pc__banner__btn-decline {
  order: 2;
  background: none !important;
  border: 1px solid #121110 !important;
  color: #121110 !important;
}

#shopify-pc__banner #shopify-pc__banner__btn-accept {
  order: 3;
  background: #121110 !important;
  border: 1px solid #121110 !important;
  color: #fff !important;
}

/* Below 750px the text takes the full width, with one row of actions under
   it spanning the bar: Manage preferences flush left, Decline and Accept
   pinned to the right edge */
@media screen and (max-width: 749px) {
  #shopify-pc__banner .shopify-pc__banner__wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  #shopify-pc__banner .shopify-pc__banner__body p {
    font-size: 12px !important;
  }

  #shopify-pc__banner .shopify-pc__banner__btns {
    width: 100% !important;
    flex-wrap: wrap;
  }

  #shopify-pc__banner #shopify-pc__banner__btn-manage-prefs {
    font-size: 12px !important;
    padding-left: 0 !important;
    margin-right: auto !important;
  }