/*** GENERATED LOCALLY ***/

/* sections/announcement.liquid */

  /* The band sets ink on accent; the label class would otherwise mute it. */
  announcement-bar .label {
    color: inherit;
  }

/* sections/cart-drawer.liquid */

  .cart-drawer__panel {
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .cart-drawer__panel[hidden] {
    display: flex;
    visibility: hidden;
  }
  cart-drawer.is-open .cart-drawer__panel {
    transform: translateX(0);
  }
  .cart-drawer__backdrop {
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .cart-drawer__backdrop[hidden] {
    display: block;
    visibility: hidden;
  }
  cart-drawer.is-open .cart-drawer__backdrop {
    opacity: 1;
  }

/* sections/faq.liquid */

  /* Safari still paints the default disclosure triangle without this. */
  .faq summary::-webkit-details-marker {
    display: none;
  }

/* sections/header.liquid */

  /* Stronger blur than the header bar: this panel sits over page content, not
     over a photograph, so it needs to obscure rather than tint. */
  .mobile-menu {
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    border-bottom: 1px solid rgb(255 255 255 / 0.14);
    max-height: calc(100svh - var(--header-h, 7rem));
    overflow-y: auto;
  }

  .nav-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    column-gap: 3rem;
    row-gap: 0.125rem;
  }
  /* Shop All closes the menu, so it sits under both columns with a rule above
     it rather than being buried as the last item of one column. */
  .nav-panel__last {
    grid-column: 1 / -1;
    margin-top: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(255 255 255 / 0.14);
  }
  .nav-panel__last a {
    font-weight: 600;
    letter-spacing: var(--tracking-loose);
    text-transform: uppercase;
    font-size: var(--text-xs);
  }

  /* Offset by the announcement bar, which is in normal flow above us. JS
     measures it into --announce-h; the fallback keeps the nav sane if the bar
     is removed or JS never runs. */
  .site-header {
    top: var(--announce-h, 0px);
    transition: top 0.2s ease;
  }
  /* Once the bar has scrolled past, take the viewport edge. */
  .site-header.is-scrolled {
    top: 0;
  }

  /* Dropdown panel. Animated from the trigger rather than faded in place, so
     the relationship between button and panel is legible. */
  .nav-panel {
    opacity: 0;
    transform: translateY(-0.375rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .nav-panel[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
  .nav-item.is-open .nav-panel {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
  }
  .nav-item.is-open [data-nav-trigger] .icon--chevron-down {
    transform: rotate(180deg);
  }
  /* The panel is glass over whatever is behind the header. On a light page the
     header itself is solid, so the panel needs the same dark fill to stay
     readable rather than sampling the page. */
  .site-header.is-solid .nav-panel,
  .site-header.is-scrolled .nav-panel {
    background-color: rgb(10 10 11 / 0.92);
  }

  /* Transparent over the hero; glass once scrolled. The scrolled state is added
     by <site-header> in theme.js. */
  .site-header__bar {
    background-color: transparent;
    color: var(--color-n0);
  }
  .site-header.is-scrolled .site-header__bar {
    background-color: rgb(10 10 11 / 0.72);
    backdrop-filter: blur(14px) saturate(1.6);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    border-bottom: 1px solid rgb(255 255 255 / 0.1);
  }
  /* Pages without a full-bleed hero have no photograph to sit on, so the bar is
     solid from the first pixel. */
  .site-header.is-solid .site-header__bar {
    background-color: var(--color-g5);
    border-bottom: 1px solid var(--color-g3);
  }

/* sections/hero-full.liquid */

  /* Heights subtract the announcement bar so the hero plus the bar equal the
     intended fraction of the viewport. Without this the bar pushes the next
     section below the fold and the page looks like it ends at the hero. */
  /* Mobile: fixed heights, no viewport units. The bottom browser bar showing
     and hiding was resizing the hero mid-scroll. */
  .hero--tall {
    height: 34rem;
  }
  .hero--medium {
    height: 28rem;
  }
  .hero--short {
    height: 22rem;
  }
  @media (min-width: 768px) {
    .hero--tall {
      min-height: 40rem;
      height: calc(90svh - var(--announce-h, 0px));
    }
    .hero--medium {
      min-height: 32rem;
      height: calc(76svh - var(--announce-h, 0px));
    }
    .hero--short {
      min-height: 24rem;
      height: calc(60svh - var(--announce-h, 0px));
    }
  }

/* sections/product.liquid */

  /* Shopify injects the dynamic checkout button's own styles; override the
     radius and height so it sits with the rest of the control group rather
     than looking bolted on. */
  .dynamic-buy .shopify-payment-button__button {
    border-radius: var(--radius-edge) !important;
    min-height: 3rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .dynamic-buy .shopify-payment-button__more-options {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-loose);
    text-transform: uppercase;
  }

/* blocks/group.liquid */

  .group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }

/* blocks/text.liquid */

  .text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }

/* snippets/size-guide.liquid */

  .size-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
  }
  .size-table th,
  .size-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-n3);
    white-space: nowrap;
  }
  .size-table thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-g1);
    border-bottom-color: var(--color-g5);
  }
  .size-table tbody th {
    font-weight: 600;
    color: var(--color-g5);
  }
  .size-table tbody tr:last-child th,
  .size-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .size-guide__panel,
  .size-guide__backdrop {
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .size-guide__panel {
    transform: translate(-50%, -48%);
  }
  .size-guide__panel[hidden],
  .size-guide__backdrop[hidden] {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }
  size-guide.is-open .size-guide__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }
  size-guide.is-open .size-guide__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }