/** Shopify CDN: Minification failed

Line 12:27 Unexpected "*"

**/
/** Critical CSS — loads before everything else on every page. */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
/* Scoped default: when neither dimension is set, preserve aspect ratio. Doesn't
   override Tailwind h-*/w-* utilities, which beat this rule by specificity. */
img:not([width]):not([height]):not([class*="h-"]):not([class*="w-"]) { height: auto; }
input, textarea, select { font: inherit; border-radius: var(--style-border-radius-inputs, 2px); }
select { background-color: var(--color-background, #FAF6F0); color: currentcolor; }
dialog { background-color: var(--color-background, #FAF6F0); color: var(--color-foreground, #2C2418); }
p { text-wrap: pretty; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p:empty { display: none; }
html:has(dialog[scroll-lock][open], details[scroll-lock][open]) { overflow: hidden; }
html.ps-scroll-locked { overflow: hidden; }
html.ps-scroll-locked body { overflow: hidden; }

/* ---- Base ---- */
html {
  overflow-x: clip;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  background: var(--background, #FAF6F0);
  color: var(--foreground, #2C2418);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  overflow-x: clip;
}

button:not(:disabled), a, [role="button"], summary { cursor: pointer; }
button:disabled { pointer-events: none; }
button:not(.selectable), label:not(.selectable), a:not(.selectable) { user-select: none; }
/* Inputs default to browser white; Tailwind utilities (bg-cream/10 etc.) override per-input. */

/* ---- Design tokens (CSS custom properties) ---- */
:root {
  /* Palette */
  --color-orange: #D97642;
  --color-ochre: #B5683B;
  --color-brown: #5C3D2E;
  --color-light-brown: #7C6255;
  --color-stone: #9C8B7A;
  --color-text: #6B5E52;
  --color-cream: #FAF6F0;
  --color-dark: #2C2418;
  --color-white: #FAFAFA;
  --color-olive: #4E5D3C;
  --color-sage: #858962;
  --color-brown-subtle: #EAE3DD;
  --color-cream-muted: #C8BCAF;

  /* Semantic */
  --background: var(--color-cream);
  --foreground: var(--color-dark);

  /* Gradients */
  --gradient-cream: linear-gradient(to bottom, #FFF9F4 0%, #FDF3EA 100%);
  --gradient-brown: linear-gradient(to bottom, var(--color-light-brown) 0%, var(--color-brown) 100%);

  /* Icon accent for option buttons */
  --icon-accent: #7a5c3e;

  /* Z-index scale */
  --z-content: 30;
  --z-sticky: 40;
  --z-modal: 50;

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Lens tint swatches (checkout tint step) */
  --tint-gray: #808080;
  --tint-brown: #8B6F47;
  --tint-green: #4A7C59;
  --tint-light-blue: #7BA3C0;
  --tint-purple: #9B6BA8;
  --tint-pink: #D97B8F;

  /* Frame color swatches (PDP + product card color bubbles).
     Keyed by the handleized option value, e.g. "Matte Black" -> --swatch-matte-black.
     Stub palette mirrors src/lib/mockProducts.ts; swap to real values per SKU later. */
  --swatch-tortoise: #5C4033;
  --swatch-matte-black: #1a1a1a;
  --swatch-honey: #C4A35A;
  --swatch-forest-green: #2D4739;
  --swatch-slate: #708090;
  --swatch-amber: #D97642;
  --swatch-walnut: #5D432C;
  --swatch-glacier-blue: #5B8FA8;
  --swatch-storm-gray: #4F5D75;
  --swatch-sunset: #E8956D;
  --swatch-carbon: #333333;
  --swatch-bronze: #CD7F32;

  /* Lens type gradient bars (option button bottom strips) */
  --gradient-lens-shift: linear-gradient(to right, #8c8680 0%, #8c8680 20%, #7a5c3e 100%);
  --gradient-lens-gear: linear-gradient(to right, #8e9148 0%, #b07040 60%, #4a2c1a 100%);

  /* Layout */
  --wave-height: 48px;
}

@media (min-width: 640px) {
  :root { --wave-height: 64px; }
  .ps-section-landscape {
    bottom: -100px !important;
    height: calc(var(--psl-h-desktop, 600px) + 100px) !important;
  }
  .ps-section-landscape-spacer {
    height: calc(var(--psl-h-desktop, 600px) * var(--psl-factor, 0.25)) !important;
  }
}

/* ---- Shared section utilities ---- */
.bg-gradient-cream { background: var(--gradient-cream); }
.bg-gradient-brown { background: var(--gradient-brown); }

/* ---- Animated lens-name gradients (mirror src/global.css) ---- */
@keyframes color-shift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}
.text-shift {
  background: linear-gradient(90deg, var(--color-brown) 0%, var(--color-olive) 15%, var(--color-brown) 40%, var(--color-olive) 65%, var(--color-brown) 85%, var(--color-olive) 100%);
  background-size: 200% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
  animation: color-shift 30s ease-in-out infinite;
}
.text-shift-gear {
  background: linear-gradient(90deg, var(--color-olive) 0%, var(--color-olive) 20%, color-mix(in srgb, var(--color-ochre) 65%, var(--color-brown)) 30%, var(--color-brown) 60%, var(--color-brown) 100%);
  background-size: 200% 100%;
  background-clip: text; -webkit-background-clip: text;
  color: transparent;
  animation: color-shift 20s ease-in-out infinite;
}
.text-shift-clear {
  background: linear-gradient(90deg, #ffffff 0%, #c0c0c0 20%, #ff9999 40%, #ffcc99 60%, #99ccff 80%, #cc99ff 100%);
  background-size: 200% 100%;
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-stroke: 1px rgba(102,102,102,0.5);
  color: transparent;
  animation: color-shift 25s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .text-shift, .text-shift-gear { animation: none; background: none; -webkit-background-clip: unset; background-clip: unset; color: var(--color-brown); }
  .text-shift-clear { animation: none; background: none; -webkit-background-clip: unset; background-clip: unset; -webkit-text-stroke: unset; color: #99ccff; }
}

/* Use on a <section> that wraps content with the standard wave-bottom + paper texture. */
.section-wave {
  position: relative;
  padding-bottom: 4rem; /* matches Tailwind pb-16 */
}

/* Floating sage badge used on filter chips, option buttons, etc. */
.ps-badge-sage {
  background: var(--color-sage);
  color: var(--color-cream);
  font-size: 0.75rem;
  font-weight: 500;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Product card shadow — soft outer + 1px ring */
.ps-product-card__inner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.ps-product-card:hover .ps-product-card__inner {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Polaroid-style PDP thumbnail strip (mirrors Next.js PolaroidStrip) */
.ps-polaroid-strip { scrollbar-width: none; }
.ps-polaroid-strip::-webkit-scrollbar { display: none; }
.ps-gallery-thumb {
  opacity: 0.6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transform: rotate(-2deg);
}
.ps-gallery-thumb:nth-child(even) { transform: rotate(2deg); }
.ps-gallery-thumb:hover {
  opacity: 0.9;
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.ps-gallery-thumb.is-active {
  opacity: 1;
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Lens tint swatch + radio in checkout tint step */
.ps-tint-list { border: 1px solid rgba(156, 139, 122, 0.2); }
.ps-tint-swatch {
  width: 1.75rem;
  height: 1.75rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.ps-tint-radio {
  width: 1rem;
  height: 1rem;
  border: 2px solid rgba(156, 139, 122, 0.4);
}
.ps-tint-row[aria-selected="true"] .ps-tint-radio,
.ps-tint-row.is-active .ps-tint-radio {
  background: var(--color-brown);
  border-color: var(--color-brown);
}

/* ---- Wave mask animation ---- */
@keyframes wave-mask-drift {
  from { -webkit-mask-position: 0% 0%, 0% 100%; mask-position: 0% 0%, 0% 100%; }
  to   { -webkit-mask-position: 0% 0%, 100% 100%; mask-position: 0% 0%, 100% 100%; }
}

.wave-mask::after { content: ""; display: block; height: var(--wave-height); }

.wave-mask {
  -webkit-mask-image: linear-gradient(black,black),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1080,48 1200,40 C1320,32 1400,78 1520,94 C1640,108 1700,44 1820,34 C1940,24 2020,72 2140,86 C2260,98 2330,28 2400,55 V0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - var(--wave-height)), 200% var(--wave-height);
  -webkit-mask-position: 0% 0%, 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(black,black),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1080,48 1200,40 C1320,32 1400,78 1520,94 C1640,108 1700,44 1820,34 C1940,24 2020,72 2140,86 C2260,98 2330,28 2400,55 V0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% calc(100% - var(--wave-height)), 200% var(--wave-height);
  mask-position: 0% 0%, 0% 100%;
  mask-repeat: no-repeat;
  mask-composite: add;
  animation: wave-mask-drift 90s linear infinite;
  animation-play-state: var(--wave-play-state, running);
}

@media (max-width: 639px) {
  .wave-mask {
    -webkit-mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V58 C90,74 170,84 290,76 C410,68 450,50 590,47 C730,44 790,72 910,80 C1030,88 1080,54 1200,50 C1320,46 1400,72 1520,82 C1640,90 1700,54 1820,48 C1940,42 2020,70 2140,78 C2260,84 2330,42 2400,58 V0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V58 C90,74 170,84 290,76 C410,68 450,50 590,47 C730,44 790,72 910,80 C1030,88 1080,54 1200,50 C1320,46 1400,72 1520,82 C1640,90 1700,54 1820,48 C1940,42 2020,70 2140,78 C2260,84 2330,42 2400,58 V0 Z' fill='black'/%3E%3C/svg%3E");
  }
}

@media (hover: none) and (pointer: coarse) {
  .wave-mask { animation: none; }
  .wave-mask {
    -webkit-mask-size: 100% calc(100% - var(--wave-height)), 100% var(--wave-height);
    mask-size: 100% calc(100% - var(--wave-height)), 100% var(--wave-height);
    -webkit-mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1130,28 1200,55 V0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1130,28 1200,55 V0 Z' fill='black'/%3E%3C/svg%3E");
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-mask {
    animation: none;
    -webkit-mask-size: 100% calc(100% - var(--wave-height)), 100% var(--wave-height);
    mask-size: 100% calc(100% - var(--wave-height)), 100% var(--wave-height);
    -webkit-mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1130,28 1200,55 V0 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: linear-gradient(black,black),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V55 C70,82 140,95 270,78 C400,60 440,38 580,34 C720,30 780,76 900,90 C1020,104 1130,28 1200,55 V0 Z' fill='black'/%3E%3C/svg%3E");
  }
}

/* While a modal is open, freeze every drifting wave mask. The wave animates
   mask-position (a non-composited property that re-rasterizes each frame), so
   leaving it running behind the overlay starves the modal's own transitions and
   makes them feel sluggish. !important beats the --wave-play-state fallback. */
.ps-modal-open .wave-mask,
.ps-modal-open .wave-mask-subtle {
  animation-play-state: paused !important;
}

/* ---- Fade-up scroll reveal ---- */
/* Scoped to html.js so content is visible without JS. JS (scrollReveal.ts)
   adds .is-visible as each element enters the viewport. */
.js .ps-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s ease-out,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.js .ps-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Image fade-in on load ---- */
/* Scoped to html.js so images are visible without JS. imageFade.ts adds
   .is-loaded once the image decodes. */
.js img[data-fade] {
  opacity: 0;
}
.js img[data-fade].is-loaded {
  opacity: 1;
  transition: opacity 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js .ps-reveal,
  .js .ps-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js img[data-fade] {
    opacity: 1;
    transition: none;
  }
}

/* ---- Subtle wave ---- */
.wave-mask-subtle::after { content: ""; display: block; height: var(--wave-height); }
.wave-mask-subtle {
  -webkit-mask-image: linear-gradient(black,black),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V60 C200,80 400,40 600,60 C800,80 1000,40 1200,60 C1400,80 1600,40 1800,60 C2000,80 2200,40 2400,60 V0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% calc(100% - var(--wave-height)), 200% var(--wave-height);
  -webkit-mask-position: 0% 0%, 0% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over;
  mask-image: linear-gradient(black,black),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 V60 C200,80 400,40 600,60 C800,80 1000,40 1200,60 C1400,80 1600,40 1800,60 C2000,80 2200,40 2400,60 V0 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 100% calc(100% - var(--wave-height)), 200% var(--wave-height);
  mask-position: 0% 0%, 0% 100%;
  mask-repeat: no-repeat;
  mask-composite: add;
  animation: wave-mask-drift 120s linear infinite;
}

/* ---- Wave on top edge of a bar ---- */
.wave-top-bar { position: relative; }
.wave-top-bar::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--wave-height));
  left: 0; right: 0;
  height: var(--wave-height);
  background: var(--color-brown);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 V102 C150,94 350,108 580,100 C800,92 950,108 1200,100 C1400,92 1600,110 1850,101 C2050,93 2250,107 2400,100 V120 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 V102 C150,94 350,108 580,100 C800,92 950,108 1200,100 C1400,92 1600,110 1850,101 C2050,93 2250,107 2400,100 V120 Z' fill='black'/%3E%3C/svg%3E");
  mask-size: 200% 100%;
  mask-repeat: no-repeat;
  mask-position: 0% 0%;
  pointer-events: none;
  animation: wave-mask-drift 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wave-top-bar::before { animation: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
}

/* ---- Section block z-index stacking for wave overlap ---- */
.section-block { position: relative; z-index: 10; }
.section-block ~ .section-block { z-index: 9; }
.section-block ~ .section-block ~ .section-block { z-index: 8; }
.section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 7; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 6; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 5; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 4; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 3; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 2; }
.section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block ~ .section-block { z-index: 1; }

.wave-section {
  margin-bottom: calc(-1 * var(--wave-height));
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.15));
  clip-path: inset(0 -9999px -9999px -9999px);
}

/* Compensate for wave overlap: next section after wave gets extra padding-top */
.section-block.wave-section + .section-block > section {
  padding-top: calc(2.5rem + var(--wave-height));
}
@media (min-width: 640px) {
  .section-block.wave-section + .section-block > section {
    padding-top: calc(4rem + var(--wave-height));
  }
}

/* Sticky footer: #MainContent is a flex column that grows to fill the viewport
   (see layout/theme.liquid). On short pages the last section stretches to fill
   the leftover space so its wavy bottom edge meets the footer, instead of
   leaving a cream gap with a detached, flat-topped footer. The wave itself is
   the section's own .wave-section negative margin, which only reaches the
   footer once the section fills down to it. */
#MainContent > .shopify-section:last-child {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#MainContent > .shopify-section:last-child > .section-block {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#MainContent > .shopify-section:last-child > .section-block > section {
  flex-grow: 1;
}