/** Shopify CDN: Minification failed

Line 414:0 Unexpected "}"

**/
/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
  --color-instock: rgb(0, 0, 0);
  --color-lowstock: rgb(221, 67, 6);
  --font-body--family: 'TWKLausanne', sans-serif !important;
  --font-body--weight: 350 !important;
  --font-subheading--family: 'TWKLausanne', sans-serif !important;
  --font-subheading--weight: 350 !important;
  --font-heading--family: 'TWKLausanne', sans-serif !important;
  --font-heading--weight: 350 !important;
  --font-accent--family: 'Suisse International Mono', monospace !important;
  --font-accent--weight: 400 !important;
  --font-accent--font-size: 10px !important;
}

/* Global uppercase for accent font */
[style*="var(--font-accent--family)"],
[style*="--font-accent--family"],
.product-specs-wrapper,
[style*="font-family: var(--font-accent--family)"] {
  text-transform: uppercase !important;
}

/* Site background color for Safari and browser chrome */
body {
  background-color: #000000 ;

}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

/* Load custom fonts */
@font-face {
  font-family: 'TWKLausanne';
  src: url('/cdn/shop/files/TWKLausanne-350.woff2?v=1764583197')
    format('woff2');
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse International Mono';
  src: url('/cdn/shop/files/SuisseIntlMono-Regular-WebS.woff2?v=1767947103') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Heading opacity */
h2,
h4,
h6,
.h2,
.h4,
.h6 {
  opacity: 0.45 !important;
}

/* h5 font size */
h5,
.h5 {
  font-size: 13px !important;
}


/* ==========================================================================
  CART BUBBBLE HEADER
   ========================================================================== */

/* Remove outlines from all elements on touch/click */

.header-actions__text-style {
       font-family: var(--font-paragraph--family);
    }
@media screen and (min-width: 749px) {
    .cart-drawer {
        margin-inline-end: 0;
    }
  }

    .header-actions__cart-icon .cart-bubble__text, .cart-drawer__heading .cart-bubble__text {
    padding-right: 1px;
}


/* ==========================================================================
   GLOBAL RESETS & BASE STYLES
   ========================================================================== */

/* Remove outlines from all elements on touch/click */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Mobile fix: Ensure touch targets don't show the 'box' on mobile browsers */
@media (pointer: coarse) {
  a,
  button,
  [tabindex] {
    -webkit-tap-highlight-color: transparent;
    /* Keep outline removal for touch, but allow focus-visible for keyboard */
    outline: none;
  }
  
  /* Ensure keyboard focus is still visible on mobile */
  a:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }
}

/* Targeted fix for hidden header reset */
.visually-hidden:focus {
  outline: none !important;
}

/* Design-integrated focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
  box-shadow: none; /* Remove any conflicting shadows */
}

/* Add subtle background highlight for links and plain buttons on focus */
a:focus-visible,
button:focus-visible:not(.button) {
  background-color: #ddf2fd; /* Light blue accent from your brand */
}

/* For buttons with existing backgrounds (.button class), use border instead */
.button:focus-visible {
  border: 2px solid #000000;
  outline: 2px solid #000000;
  outline-offset: 2px;
}

/* Input fields - keep clean black border focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 1px;
  border-color: #000000;
}

/* Button border fix */
.button[id^='BuyButtons-ProductSubmitButton-'] {
  border: var(--style-border-width) solid var(--color-foreground);
}



/* ==========================================================================
   PRODUCT PAGES
   ========================================================================== */

/* Add to Cart Price Alignment */
.add-to-cart-text__wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  justify-content: center;
}

.product-form-buttons .add-to-cart-button .add-to-cart-text__content {
  font-size: var(--font-paragraph--size);
  font-weight: 350;
}

.add-to-cart-button .add-to-cart-icon {
  display: none;
}

/* Product price alignment */
product-price.text-block {
  align-items: end;
}

/* Variant picker legend */
legend {
  font-size: 0;
}

legend .variant-option__swatch-value {
  padding-inline-start: 0px;
  font-size: var(--font-paragraph--size);
  color: var(--color-text);
}

/* Slideshow controls */
.slideshow-controls__counter {
  color: var(--color-text);
  background-color: transparent;
}

.slideshow-controls__counter .slash {
  color: var(--color-text);
  padding-inline: 0px;
}





/* ==========================================================================
   FORMS
   ========================================================================== */

/* Ensure form inputs inherit paragraph font size */
input,
textarea,
select {
  font-size: var(--font-paragraph--size) !important;
}

/* Override the mobile rule from base.css that forces 16px minimum */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: var(--font-paragraph--size) !important;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.utilities a {
  color: var(--color-foreground);
}

/* ==========================================================================
   OTHER COMPONENTS
   ========================================================================== */

/* Shopify Policy Pages - Left align and respect page margins */
.content-for-layout .shopify-policy__container {
  max-width: var(--narrow-content-width);
  margin-left: var(--page-margin, 16px);
  margin-right: 0;
  padding-left: 0;
  padding-right: var(--page-margin, 16px);
  padding-top: 40px;
}

.shopify-policy__title {
  text-align: left !important;
}

.shopify-policy__title h1 {
  text-align: left !important;
}

/* Popup link button */
.popup-link__button svg {
  display: none;
}

.popup-link__button {
  border-bottom: var(--style-border-width) solid var(--color-foreground);
  padding-top: 1px;
  line-height: inherit;
}

.popup-link__button:hover {
  border-bottom: var(--style-border-width) solid var(--color-background);
}

/* Terms and Policies Popup */
.terms-policies-popover {
  /* Allow popup to expand to fit content */
  min-width: max-content !important;
  width: max-content !important;
  /* Prevent overflow - ensure popup stays within viewport */
  max-width: min(calc(100vw - 2rem), 500px) !important;
  /* Align to right edge of trigger instead of left - this prevents right-side overflow */
  left: auto !important;
  right: anchor(right) !important;
}

.terms-policies-popover .policy_list {
  width: max-content;
  min-width: 100%;
}

.terms-policies-popover .policy_list li {
  width: max-content;
  min-width: 100%;
}

.terms-policies-popover .policy_list li a {
  font-size: var(--font-paragraph--size) !important;
  white-space: nowrap !important;
  display: block;
}

/* Fallback for browsers without anchor positioning support */
@supports not (position-anchor: --terms-policies-trigger) {
  .terms-policies-popover {
    /* Use calculated position from JavaScript, but shift left by popup width */
    left: calc((var(--anchor-left) + var(--anchor-width)) * 1px) !important;
    transform: translateX(-100%) !important;
  }
}

/* Cookie Banner Settings */
.shopify-pc__banner__dialog {
  border-radius: 0px !important;
}

.shopify-pc__banner__dialog h1,
.shopify-pc__banner__dialog h2,
.shopify-pc__banner__dialog h3,
.shopify-pc__banner__dialog h4,
.shopify-pc__banner__dialog h5,
.shopify-pc__banner__dialog h6,
.shopify-pc__banner__dialog .shopify-pc__banner__title,
.shopify-pc__banner__dialog .shopify-pc__banner__heading {
  font-weight: 350 !important;
  letter-spacing: 0px !important;
  font-size: var(--font-paragraph--size) !important;
}

#shopify-pc__banner__btn-decline {
  display: none;
}

#shopify-pc__banner__btn-accept {
  border-radius: 0px !important;
}

#shopify-pc__banner__btn-accept:hover {
  background-color: var(--color-secondary-button-hover-background) !important;
}

.shopify-pc__banner__dialog button {
  text-align: center !important; /* restore default */
}

.shopify-pc__banner__btns-granular {
  display: flex !important;
  flex-direction: column; /* vertical on mobile */
  align-items: stretch; /* Accept full width */
  gap: 12px; /* space between items */
}

#shopify-pc__banner__btn-manage-prefs {
  text-align: left;
}

.shopify-pc__banner__dialog button.shopify-pc__banner__btn-manage-prefs {
  text-align: left !important;
  margin-top: 0px !important;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 20px;
  }
}
  
  .content-for-layout .shopify-policy__container {
    margin-left: 20px;
    padding-right: 20px;
  }
}

@media only screen and (max-width: 480px) {
  .shopify-pc__banner__btns {
    flex-direction: column-reverse !important;
    gap: 3px;
  }
}

@media screen and (max-width: 750px) {
  .terms-policies-popover {
    left: anchor(center) !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
    max-width: min(90vw, 500px) !important;
  }
}

@media screen and (max-width: 749px) {
  .utilities {
    align-items: flex-start !important;
  }

  .utilities > * {
    text-align: left !important;
  }
}

/* ==========================================================================
   FOUNDER EXPANDABLE NARRATIVE
   ========================================================================== */

.founder-narrative .ex {
  opacity: 1;
  text-decoration: underline;
  cursor: pointer;
}

.founder-narrative .ex:hover:not(.expanded) {
  opacity: 1;
}

.founder-narrative .ex.expanded {
  opacity: 1;
  text-decoration: none;
  cursor: text;
}

.founder-narrative .ex.highlight-remaining {
  color: #DDF2FD;
  opacity: 1;
}

.founder-narrative .expansion {
  /* Content is in HTML source (SEO-friendly) but visually hidden */
  display: none;
}

.founder-narrative .expansion.visible {
  display: inline;
}

.founder-narrative .expansion-link a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   MINIMAL BLOG FEED (WIP)
   ========================================================================== */

/* Make WIP block extend full width of its group container */
[id^="WipWrapper-"],
.wip-wrapper {
  width: 100%;
  max-width: var(--wip-max-width, 100%);
  margin-left: 0;
  margin-right: 0;
}

/* When inside a column flex container (direct child or through shopify-block) */
.layout-panel-flex--column > [id^="WipWrapper-"],
.layout-panel-flex--column > .wip-wrapper,
.layout-panel-flex--column > .shopify-block > [id^="WipWrapper-"],
.layout-panel-flex--column > .shopify-block > .wip-wrapper {
  width: 100%;
  align-self: stretch;
}

/* When inside a row flex container (direct child or through shopify-block) */
.layout-panel-flex--row > [id^="WipWrapper-"],
.layout-panel-flex--row > .wip-wrapper,
.layout-panel-flex--row > .shopify-block > [id^="WipWrapper-"],
.layout-panel-flex--row > .shopify-block > .wip-wrapper {
  flex: 1;
  min-width: 0;
}

/* Ensure shopify-block wrapper also fills width when containing WIP block */
.layout-panel-flex--column > .shopify-block:has([id^="WipWrapper-"]),
.layout-panel-flex--row > .shopify-block:has([id^="WipWrapper-"]) {
  width: 100%;
}

.layout-panel-flex--row > .shopify-block:has([id^="WipWrapper-"]) {
  flex: 1;
  min-width: 0;
}

.wip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  min-width: 100%;
}

.wip-article-line {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  padding-top: 4px;
  padding-bottom: 4px;
  width: 100%;
  min-width: 100%;
  position: relative;
}

.wip-article-title-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.wip-article-symbols {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 3.2em;
  flex-shrink: 0;
  margin-right: 8px;
  justify-content: flex-start;
}

.wip-symbol {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  opacity: 0.35;
  color: inherit;
  transition: opacity 0.2s ease;
}

.wip-article-line:hover .wip-symbol,
.wip-article-line.is-open .wip-symbol {
  opacity: 1;
}

.wip-symbol-square {
  width: 0.6em;
  height: 0.6em;
  background-color: currentColor;
}

.wip-symbol-triangle {
  width: 0;
  height: 0;
  border-left: 0.35em solid transparent;
  border-right: 0.35em solid transparent;
  border-bottom: 0.6em solid currentColor;
}

.wip-symbol-circle {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: currentColor;
}

.wip-symbol-diamond {
  width: 0.46em;
  height: 0.46em;
  background-color: currentColor;
  transform: rotate(45deg);
}

.wip-article-title {
  margin: 0;
  opacity: 0.35;
  transition: opacity 0.2s ease, color 0.2s ease;
  flex: 1;
  min-width: 0;
}

.wip-article-line:hover .wip-article-title,
.wip-article-line.is-open .wip-article-title {
  opacity: 1;
  color: var(--color-secondary-button-hover-text, var(--color-foreground));
}

.wip-article-date {
  opacity: 0;
  transition: opacity 0.2s ease;
  font-size: inherit;
  margin: 0;
  flex-shrink: 0;
}

.wip-article-line:hover .wip-article-date,
.wip-article-line.is-open .wip-article-date {
  opacity: 1;
}

.wip-article-media {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  transition: visibility 0.2s ease, margin-top 0.2s ease, margin-bottom 0.2s ease;
  position: relative;
}

.wip-article-line:hover .wip-article-media,
.wip-article-line.is-open .wip-article-media {
  visibility: visible;
  height: auto;
  margin-top: 10px;
  margin-bottom: 20px;
}

.wip-article-media img,
.wip-article-media video {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wip-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
}

.wip-loader.is-loading {
  opacity: 1;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top: 2px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.wip-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.wip-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.wip-legend-item.active {
  opacity: 1;
  font-weight: 500;
}

.wip-legend-item:not(.active) {
  opacity: 0.35;
}

.wip-legend-item:not(.active):hover {
  opacity: 1;
}

.wip-legend .wip-symbol {
  opacity: 1;
}

.wip-article-read-link {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.wip-article-line:hover .wip-article-read-link,
.wip-article-line.is-open .wip-article-read-link {
  opacity: 1;
}

.wip-article-media-circle {
  width: 100px;
  height: 100px;
  overflow: hidden;
}

.wip-article-media-circle img,
.wip-article-media-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.3); /* adjust zoom */
}

/* ==========================================================================
   BLOG CAROUSEL
   ========================================================================== */

/* Carousel wrapper - same width behavior as WIP block */
[id^="BlogCarouselWrapper-"],
.blog-carousel-wrapper {
  width: 100%;
  max-width: var(--carousel-max-width, 100%);
  margin-left: 0;
  margin-right: 0;
  position: relative;
  overflow: hidden;
}

/* When inside a column flex container (direct child or through shopify-block) */
.layout-panel-flex--column > [id^="BlogCarouselWrapper-"],
.layout-panel-flex--column > .blog-carousel-wrapper,
.layout-panel-flex--column > .shopify-block > [id^="BlogCarouselWrapper-"],
.layout-panel-flex--column > .shopify-block > .blog-carousel-wrapper {
  width: 100%;
  align-self: stretch;
}

/* When inside a row flex container (direct child or through shopify-block) */
.layout-panel-flex--row > [id^="BlogCarouselWrapper-"],
.layout-panel-flex--row > .blog-carousel-wrapper,
.layout-panel-flex--row > .shopify-block > [id^="BlogCarouselWrapper-"],
.layout-panel-flex--row > .shopify-block > .blog-carousel-wrapper {
  flex: 1;
  min-width: 0;
}

/* Ensure shopify-block wrapper also fills width when containing carousel */
.layout-panel-flex--column > .shopify-block:has([id^="BlogCarouselWrapper-"]),
.layout-panel-flex--row > .shopify-block:has([id^="BlogCarouselWrapper-"]) {
  width: 100%;
}

.layout-panel-flex--row > .shopify-block:has([id^="BlogCarouselWrapper-"]) {
  flex: 1;
  min-width: 0;
}

/* Slides container */
.blog-carousel-slides {
  position: relative;
  width: 100%;
}

/* Individual slide */
.blog-carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
}

.blog-carousel-slide.active {
  position: relative;
  pointer-events: auto;
}

.blog-carousel-slide.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

.blog-carousel-slide.prev {
  transform: translateY(-100%);
  z-index: 1;
}

.blog-carousel-slide.next {
  transform: translateY(100%);
  z-index: 1;
}

/* Article link styling */
.blog-carousel-article-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
  gap: 20px;
}

/* Show media always visible in carousel (not hidden like WIP) */
.blog-carousel-slide .wip-article-media {
  visibility: visible;
  height: auto;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Hide symbols in carousel */
.blog-carousel-slide .wip-article-symbols {
  display: none;
}

/* Remove left spacing so title goes to left edge */
.blog-carousel-slide .wip-article-title-wrapper {
  gap: 10px;
  padding-left: 0;
  margin-left: 0;
}

/* Show title and date always visible */
.blog-carousel-slide .wip-article-title {
  opacity: 1;
  margin-left: 0;
}

.blog-carousel-slide .wip-article-date {
  opacity: 1;
}

.blog-carousel-slide .wip-article-read-link {
  opacity: 1;
}

/* Navigation arrows */
.blog-carousel-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.blog-carousel-nav .svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.blog-carousel-nav .icon-arrow {
  width: 24px;
  height: 24px;
  color: var(--color-foreground);
}

.blog-carousel-nav--top {
  top: 20px;
  opacity: 0;
  pointer-events: none;
}

.blog-carousel-nav--top.visible {
  opacity: 1;
  pointer-events: auto;
}

.blog-carousel-nav--top .icon-arrow-up {
  transform: rotate(-90deg);
}

.blog-carousel-nav--bottom .icon-arrow-down {
  transform: rotate(90deg);
}

.blog-carousel-nav--bottom {
  bottom: 20px;
}

.blog-carousel-nav:hover {
  opacity: 0.7;
}

.blog-carousel-nav:active {
  opacity: 0.5;
}

/* Empty state */
.blog-carousel-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
  text-align: center;
}

/* ==========================================================================
   HEADER ACTIONS - TEXT LABELS INSTEAD OF ICONS
   ========================================================================== */




.shopify-section:not(.header-section):has(.section) {
  background-color: rgb(var(--color-background-rgb, 255 255 255));
}







/* ==========================================================================
   Hide out of stock button since we're using Join Waitlist Stok
   ========================================================================== */
.button[aria-disabled=true], .button-secondary[aria-disabled=true], .button:disabled {
    display: none;
}

/* ==========================================================================
   Logo Tab
   ========================================================================== */

.header-logo {
  background-color:#DDF2FD;
  padding-right: 12px;
  padding-top: 12px;
  padding-left: 12px;
  padding-bottom: 12px;
  max-width:100px;
}

.header.header--compact {
  --header-padding: 0px;
}

@media screen and (max-width: 749px) {
  .header-logo {
    width:100px;       
    justify-self: center;  
    margin-inline: auto; 
    padding-top: 10px;
      padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
  }
}







/* Breadcrumb navigation */
.canard-headerbar {
  display: flex;
  width: 100%;
  position: relative;
  font-family: var(--font-accent--family);
  font-size: 11px;
  letter-spacing: -.5px;
  text-transform: uppercase;
}



.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 3px;
}

.canard-headerbar a {
  text-decoration: none;
  color: inherit;
}

.canard-headerbar a:hover {
  opacity: 0.35;
}

.breadcrumb-leaf {
  pointer-events: none;
  opacity: 0.35;
}

.breadcrumb-sep {
  user-select: none;
}