/** Shopify CDN: Minification failed

Line 2228:0 Unexpected "<"
Line 2231:24 Expected ":"
Line 2231:60 Unexpected "\"react\""
Line 2233:8 Expected ":"
Line 2244:7 Unexpected "\"lucide-react\""
Line 2326:8 Expected ":"
Line 2334:9 Unexpected "PearlDivider("
Line 2335:8 Expected ":"
Line 2344:9 Unexpected "money("
Line 2345:9 Unexpected "`"
... and 95 more hidden warnings

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

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

img {
  width: 100%;
  height: auto;
}

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

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

@media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-hover-effect-lift .product-card:hover,
  .card-hover-effect-lift .collection-card:hover,
  .card-hover-effect-lift .predictive-search-results__card:hover {
    transform: translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-scale .product-card:hover,
  .card-hover-effect-scale .collection-card:hover,
  .card-hover-effect-scale .predictive-search-results__card:hover {
    transform: scale(var(--hover-scale-amount));
  }

  .card-hover-effect-subtle-zoom .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card__image {
    overflow: hidden;
    transition: transform var(--hover-transition-duration) var(--hover-transition-timing);
  }

  .card-hover-effect-subtle-zoom .product-card:hover .card-gallery,
  .card-hover-effect-subtle-zoom .collection-card:hover .collection-card__image,
  .card-hover-effect-subtle-zoom .product-card:hover .product-card__image,
  .card-hover-effect-subtle-zoom .predictive-search-results__card:hover {
    transform: scale(var(--hover-subtle-zoom-amount));
  }
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

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

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

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

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

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

.list-unstyled {
  margin: 0;
  padding: 0;
  list-style: none;
}

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

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

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary .icon-animated > svg {
  transform: rotate(180deg);
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* When header is transparent, pull the first main content section up to sit under the floating header */
body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
  margin-top: calc(var(--header-group-height) * -1);
}

body:has(.header[transparent]) #header-group > .header-section {
  z-index: var(--layer-menu-drawer);
}

/* All other header group content should be beneath the floating header,
but above the rest of the page content */
body:has(.header[transparent]) #header-group > *:not(.header-section) {
  z-index: calc(var(--layer-menu-drawer) - 1);
}

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

/* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
.text-block > style + * {
  margin-block-start: 0;
}

/* Dialog */
.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);

  @media screen and (min-width: 750px) {
    border-radius: var(--style-border-radius-popover);
    max-width: var(--normal-content-width);
  }

  @media screen and (max-width: 749px) {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100dvw;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition: backdrop-filter var(--animation-speed) var(--animation-easing);
  backdrop-filter: brightness(1);
  background: rgb(var(--backdrop-color-rgb) / var(--backdrop-opacity));
}

.dialog-modal[open] {
  animation: elementSlideInTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    animation: backdropFilter var(--animation-speed) var(--animation-easing) forwards;
    transition: opacity var(--animation-speed) var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation: elementSlideOutTop var(--animation-speed) var(--animation-easing) forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* stylelint-disable value-keyword-case */
.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}
/* stylelint-enable value-keyword-case */

.dialog-drawer[open] {
  --start-x: var(--custom-transform-from, 100%);
  --end-x: var(--custom-transform-to, 0px);
  --start-opacity: 1;

  animation: var(--dialog-drawer-opening-animation) var(--animation-speed) var(--animation-easing) forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation: var(--dialog-drawer-closing-animation) var(--animation-speed) var(--animation-easing);
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Collapsible row */

.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);
  transition: transform var(--animation-speed) var(--animation-easing);
}

/* Shared plus/minus icon animations */
summary .icon-plus :is(.horizontal, .vertical) {
  transition: transform var(--animation-speed) var(--animation-easing);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary .icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary .icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

.price,
.compare-at-price,
.unit-price {
  white-space: nowrap;
}

.unit-price {
  display: block;
  font-size: min(0.85em, var(--font-paragraph--size));
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note.tax-note.tax-note {
  font-size: min(0.85em, var(--font-paragraph--size));
  font-weight: var(--font-paragraph--weight);
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.tax-note:empty {
  display: none;
}

product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
  margin-block: 0;
}

/* Volume pricing note should match unit-price styling (small, grey text) */
product-price .volume-pricing-note,
product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) .volume-pricing-note {
  display: block;
  font-family: var(--font-body--family);
  font-weight: normal;
  font-size: var(--font-size--xs);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
}

.compare-at-price {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-subdued-text));
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / var(--opacity-30));
}

.price-item__group {
  display: inline-block;
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

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

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideInBottom {
  from {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes dialogZoom {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  to {
    opacity: 0;
    transform: scale(0.95) translateY(1em);
  }
}

@keyframes thumbnail-selected {
  0%,
  100% {
    box-shadow: 0 0 0 2px transparent;
    scale: 0.9;
  }

  50% {
    box-shadow: 0 0 0 2px #000;
    scale: 1;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component),
.group-block:has(> .background-image-container) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Animation transitions */
.transition-background-color {
  transition: background-color var(--animation-speed-medium) ease-in-out;
}

.transition-transform {
  transition: transform var(--animation-speed-medium) var(--animation-timing-bounce);
}

.transition-border-color {
  transition: border-color var(--animation-speed-medium) var(--animation-timing-hover);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.product-card:hover,
.collection-card:hover,
.predictive-search-results__card--product:hover,
.predictive-search-results__card:hover {
  position: relative;
  z-index: var(--layer-raised);
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .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: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    :is(.spacing-style, .inherit-spacing) {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}
<div class="pgwp-pearl-strand">
  <span></span><span></span><span></span><span></span><span></span>
</div>
import React, { useState, useMemo, useRef, useEffect } from "react";
import {
  Search,
  X,
  ShoppingBag,
  Plus,
  Minus,
  ChevronLeft,
  ChevronRight,
  SlidersHorizontal,
  Check,
  ArrowLeft,
  Mail,
} from "lucide-react";

/* ---------------------------------------------------------------------- */
/*  DATA                                                                   */
/* ---------------------------------------------------------------------- */

const PRODUCTS = [
  {
    id: "protocols-pearls",
    title: "PMHNP Protocols & Pearls",
    tagline: "Bedside-ready protocols for the conditions you'll chart on every single day.",
    price: 15,
    format: "Ebook",
    audience: ["New Grad", "Student"],
    badge: "Bestseller",
    cover: "photo",
    images: [
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/IMG-0016.png?v=1786490931&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/FullSizeRender.jpg?v=1786491257&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/FullSizeRender_fd71dd15-815c-49d2-a85a-346e1714fca7.jpg?v=1786491264&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/FullSizeRender_799475f5-618f-4a9f-81e9-5dad60dc7065.jpg?v=1786491275&width=1024",
    ],
    description:
      "A practical, no-fluff clinical companion built to close the gap between the classroom and your first real caseload. Skip the 400-page textbook detour — find the protocol, the pearl, and the next step in seconds.",
    pearls: [
      "Covers the conditions you'll actually see: depression, anxiety, bipolar disorder, ADHD, schizophrenia, and more.",
      "Dosing, diagnostic, and safety pearls formatted to scan mid-visit, not dig for later.",
      "Written by clinicians for the specific gap between grad-school theory and week-one practice.",
    ],
    options: [
      {
        name: "Format",
        choices: [
          { id: "digital", label: "Digital PDF", delta: 0, note: "Instant download" },
          { id: "print", label: "Printed + Shipped", delta: 8, note: "Spiral-bound, ships in 5–7 days" },
        ],
      },
    ],
  },
  {
    id: "rn-to-pmhnp",
    title: "The New PMHNP Clinical Guide",
    subtitle: "From RN to PMHNP",
    tagline: "Your field guide for the leap from bedside RN to confident prescriber.",
    price: 30,
    format: "Ebook",
    audience: ["New Grad", "Experienced"],
    badge: "Editor's Pick",
    cover: "photo",
    images: [
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/image.png?v=1785200049&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/IMG_0009.jpg?v=1785973321&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/IMG_0010.jpg?v=1785973321&width=1024",
      "https://fka0f0-ww.myshopify.com/cdn/shop/files/IMG_0011.jpg?v=1785973321&width=1024",
    ],
    description:
      "Built for the PMHNP student prepping for clinicals, the new grad starting their first position, and the working clinician who wants a faster reference than a textbook. Real-world application over dense theory, every page.",
    pearls: [
      "Concise, evidence-informed explanations you can actually finish reading.",
      "Algorithms, documentation tips, and medication references built for daily patient encounters.",
      "High-yield assessment tools designed to bridge graduate education and real practice.",
    ],
    options: [
      {
        name: "Format",
        choices: [
          { id: "digital", label: "Digital PDF", delta: 0, note: "Instant download" },
          { id: "print", label: "Printed + Shipped", delta: 8, note: "Spiral-bound, ships in 5–7 days" },
        ],
      },
    ],
  },
];

const CATEGORIES = ["All", "Ebook"];
const LEVELS = ["All", "Student", "New Grad", "Experienced"];

/* ---------------------------------------------------------------------- */
/*  SMALL PIECES                                                           */
/* ---------------------------------------------------------------------- */

function Pearl({ size = 8 }) {
  return (
    <span
      className="pearl-dot"
      style={{ width: size, height: size, minWidth: size }}
    />
  );
}

function PearlDivider({ count = 9 }) {
  return (
    <div className="pearl-strand" aria-hidden="true">
      {Array.from({ length: count }).map((_, i) => (
        <Pearl key={i} size={i % 3 === 0 ? 9 : 6} />
      ))}
    </div>
  );
}

function money(n) {
  return `$${n.toFixed(2).replace(/\.00$/, "")}`;
}

/* Generated cover art for products without real photography */
function CoverArt({ variant, title, subtitle }) {
  const renderMark = () => {
    switch (variant) {
      case "bundle":
        return (
          <>
            <div className="cover-card cover-card-a" />
            <div className="cover-card cover-card-b" />
          </>
        );
      case "deck":
        return (
          <>
            <div className="cover-deck cover-deck-a" />
            <div className="cover-deck cover-deck-b" />
            <div className="cover-deck cover-deck-c" />
          </>
        );
      case "pocket":
        return <div className="cover-pocket" />;
      case "toolkit":
        return (
          <div className="cover-toolkit">
            {Array.from({ length: 4 }).map((_, i) => (
              <span key={i} className="cover-toolkit-line" />
            ))}
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="cover-art">
      <div className="cover-grid" aria-hidden="true" />
      {renderMark()}
      <div className="cover-text">
        <span className="cover-eyebrow">PMHNPGirlswithPearls</span>
        <span className="cover-title">{title}</span>
        {subtitle && <span className="cover-subtitle">{subtitle}</span>}
      </div>
      <div className="cover-pearl-strand">
        {Array.from({ length: 5 }).map((_, i) => (
          <Pearl key={i} size={7} />
        ))}
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  HEADER                                                                  */
/* ---------------------------------------------------------------------- */

function Header({ query, setQuery, cartCount, onCartClick, onLogoClick }) {
  const [searchOpen, setSearchOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="header-inner">
        <button className="brand" onClick={onLogoClick}>
          <span className="brand-mark">
            <Pearl size={10} />
            <Pearl size={14} />
            <Pearl size={10} />
          </span>
          <span className="brand-name">
            PMHNP<span className="brand-name-accent">Girls</span>withPearls
          </span>
        </button>

        <nav className="nav-links">
          <a href="#shop" className="nav-link">Shop</a>
          <a href="#about" className="nav-link">About</a>
          <a href="#footer" className="nav-link">Contact</a>
        </nav>

        <div className="header-actions">
          <div className={`search-wrap ${searchOpen ? "search-open" : ""}`}>
            <Search size={16} className="search-icon" />
            <input
              className="search-input"
              placeholder="Search guides, decks, toolkits…"
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onFocus={() => setSearchOpen(true)}
            />
            {query && (
              <button className="search-clear" onClick={() => setQuery("")}>
                <X size={14} />
              </button>
            )}
          </div>
          <button className="cart-btn" onClick={onCartClick} aria-label="Open cart">
            <ShoppingBag size={19} />
            {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------------------------------------------------------------------- */
/*  HERO                                                                    */
/* ---------------------------------------------------------------------- */

function Hero() {
  return (
    <section className="hero">
      <div className="hero-inner">
        <span className="section-eyebrow">Clinical guides for PMHNPs, by PMHNPs</span>
        <h1 className="hero-title">
          Clinical pearls,
          <br />
          <em>polished.</em>
        </h1>
        <p className="hero-sub">
          Practical, no-fluff references for psychiatric assessment, psychopharmacology, and
          documentation — built for the gap between grad school and your first real caseload.
        </p>
        <PearlDivider count={11} />
        <a href="#shop" className="btn-primary">
          Shop the guides
        </a>
      </div>
    </section>
  );
}

/* ---------------------------------------------------------------------- */
/*  FILTER BAR                                                              */
/* ---------------------------------------------------------------------- */

function FilterBar({
  category,
  setCategory,
  level,
  setLevel,
  sortBy,
  setSortBy,
  resultCount,
}) {
  const [open, setOpen] = useState(false);
  return (
    <div className="filter-bar">
      <div className="filter-bar-top">
        <span className="result-count">
          {resultCount} {resultCount === 1 ? "item" : "items"}
        </span>
        <div className="filter-bar-right">
          <select
            className="sort-select"
            value={sortBy}
            onChange={(e) => setSortBy(e.target.value)}
          >
            <option value="featured">Featured</option>
            <option value="price-asc">Price: Low to High</option>
            <option value="price-desc">Price: High to Low</option>
          </select>
          <button className="filter-toggle" onClick={() => setOpen((o) => !o)}>
            <SlidersHorizontal size={15} />
            Filter
          </button>
        </div>
      </div>

      {open && (
        <div className="filter-chips-wrap">
          <div className="chip-row">
            <span className="chip-label">Type</span>
            {CATEGORIES.map((c) => (
              <button
                key={c}
                className={`chip ${category === c ? "chip-active" : ""}`}
                onClick={() => setCategory(c)}
              >
                {c}
              </button>
            ))}
          </div>
          <div className="chip-row">
            <span className="chip-label">Level</span>
            {LEVELS.map((l) => (
              <button
                key={l}
                className={`chip ${level === l ? "chip-active" : ""}`}
                onClick={() => setLevel(l)}
              >
                {l}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  PRODUCT CARD + GRID                                                     */
/* ---------------------------------------------------------------------- */

function ProductCard({ product, onOpen, onQuickAdd }) {
  return (
    <div className="product-card" onClick={() => onOpen(product.id)}>
      <div className="product-card-media">
        {product.cover === "photo" ? (
          <img src={product.images[0]} alt={product.title} loading="lazy" />
        ) : (
          <CoverArt variant={product.cover} title={product.title} subtitle={product.subtitle} />
        )}
        {product.badge && <span className="badge">{product.badge}</span>}
        <button
          className="quick-add"
          onClick={(e) => {
            e.stopPropagation();
            onQuickAdd(product);
          }}
        >
          <Plus size={14} /> Add
        </button>
      </div>
      <div className="product-card-body">
        <span className="product-format">{product.format}</span>
        <h3 className="product-title">{product.title}</h3>
        <p className="product-tagline">{product.tagline}</p>
        <div className="product-price-row">
          {product.compareAt && (
            <span className="price-compare">{money(product.compareAt)}</span>
          )}
          <span className="price">{money(product.price)}</span>
        </div>
      </div>
    </div>
  );
}

function ProductGrid({ products, onOpen, onQuickAdd }) {
  if (products.length === 0) {
    return (
      <div className="empty-state">
        <PearlDivider count={5} />
        <p>No guides match those filters yet.</p>
        <span>Try clearing a filter or searching a different term.</span>
      </div>
    );
  }
  return (
    <div className="product-grid">
      {products.map((p) => (
        <ProductCard key={p.id} product={p} onOpen={onOpen} onQuickAdd={onQuickAdd} />
      ))}
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  PRODUCT DETAIL                                                          */
/* ---------------------------------------------------------------------- */

function ProductDetail({ product, onBack, onAddToCart, allProducts, onOpen }) {
  const [activeImage, setActiveImage] = useState(0);
  const [optionId, setOptionId] = useState(product.options[0].choices[0].id);
  const [qty, setQty] = useState(1);
  const [added, setAdded] = useState(false);

  const optionGroup = product.options[0];
  const choice = optionGroup.choices.find((c) => c.id === optionId);
  const finalPrice = product.price + choice.delta;

  const gallery =
    product.cover === "photo"
      ? product.images
      : ["cover"];

  const related = allProducts.filter((p) => p.id !== product.id);

  const handleAdd = () => {
    onAddToCart(product, choice, qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 1600);
  };

  return (
    <div className="product-detail">
      <button className="back-link" onClick={onBack}>
        <ArrowLeft size={15} /> Back to shop
      </button>

      <div className="detail-grid">
        <div className="detail-gallery">
          <div className="gallery-main">
            {product.cover === "photo" ? (
              <img src={product.images[activeImage]} alt={product.title} />
            ) : (
              <CoverArt variant={product.cover} title={product.title} subtitle={product.subtitle} />
            )}
            {gallery.length > 1 && (
              <>
                <button
                  className="gallery-arrow gallery-arrow-left"
                  onClick={() =>
                    setActiveImage((i) => (i - 1 + gallery.length) % gallery.length)
                  }
                >
                  <ChevronLeft size={18} />
                </button>
                <button
                  className="gallery-arrow gallery-arrow-right"
                  onClick={() => setActiveImage((i) => (i + 1) % gallery.length)}
                >
                  <ChevronRight size={18} />
                </button>
              </>
            )}
          </div>
          {product.cover === "photo" && (
            <div className="gallery-thumbs">
              {product.images.map((img, i) => (
                <button
                  key={i}
                  className={`gallery-thumb ${activeImage === i ? "gallery-thumb-active" : ""}`}
                  onClick={() => setActiveImage(i)}
                >
                  <img src={img} alt={`${product.title} view ${i + 1}`} />
                </button>
              ))}
            </div>
          )}
        </div>

        <div className="detail-info">
          <span className="product-format">{product.format}</span>
          <h1 className="detail-title">{product.title}</h1>
          {product.subtitle && <p className="detail-subtitle">{product.subtitle}</p>}

          <div className="product-price-row detail-price-row">
            {product.compareAt && (
              <span className="price-compare">{money(product.compareAt + choice.delta)}</span>
            )}
            <span className="price price-lg">{money(finalPrice)}</span>
          </div>

          <p className="detail-tagline">{product.tagline}</p>

          <div className="option-group">
            <span className="option-label">{optionGroup.name}</span>
            <div className="option-choices">
              {optionGroup.choices.map((c) => (
                <button
                  key={c.id}
                  className={`option-choice ${optionId === c.id ? "option-choice-active" : ""}`}
                  onClick={() => setOptionId(c.id)}
                >
                  <span className="option-choice-label">
                    {c.label}
                    {c.delta > 0 && <span className="option-delta"> +{money(c.delta)}</span>}
                  </span>
                  <span className="option-choice-note">{c.note}</span>
                </button>
              ))}
            </div>
          </div>

          <div className="qty-add-row">
            <div className="qty-stepper">
              <button onClick={() => setQty((q) => Math.max(1, q - 1))} aria-label="Decrease quantity">
                <Minus size={14} />
              </button>
              <span>{qty}</span>
              <button onClick={() => setQty((q) => q + 1)} aria-label="Increase quantity">
                <Plus size={14} />
              </button>
            </div>
            <button className={`btn-primary add-to-cart-btn ${added ? "added" : ""}`} onClick={handleAdd}>
              {added ? (
                <>
                  <Check size={16} /> Added
                </>
              ) : (
                <>Add to cart — {money(finalPrice * qty)}</>
              )}
            </button>
          </div>

          <p className="detail-description">{product.description}</p>

          <div className="pearls-box">
            <div className="pearls-box-head">
              <Pearl size={10} />
              <span>Clinical pearls inside</span>
            </div>
            <ul className="pearls-list">
              {product.pearls.map((p, i) => (
                <li key={i}>
                  <Pearl size={6} />
                  <span>{p}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="audience-tags">
            {product.audience.map((a) => (
              <span key={a} className="tag">
                {a}
              </span>
            ))}
          </div>
        </div>
      </div>

      <section className="related-section">
        <span className="section-eyebrow">You may also like</span>
        <PearlDivider count={7} />
        <div className="related-grid">
          {related.map((p) => (
            <ProductCard key={p.id} product={p} onOpen={onOpen} onQuickAdd={() => onAddToCart(p, p.options[0].choices[0], 1)} />
          ))}
        </div>
      </section>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  CART DRAWER                                                             */
/* ---------------------------------------------------------------------- */

function CartDrawer({ open, onClose, items, updateQty, removeItem, subtotal, onCheckout }) {
  return (
    <>
      <div className={`overlay ${open ? "overlay-visible" : ""}`} onClick={onClose} />
      <aside className={`cart-drawer ${open ? "cart-drawer-open" : ""}`}>
        <div className="cart-drawer-head">
          <h2>Your cart</h2>
          <button onClick={onClose} aria-label="Close cart">
            <X size={18} />
          </button>
        </div>

        {items.length === 0 ? (
          <div className="cart-empty">
            <PearlDivider count={5} />
            <p>Your cart is empty.</p>
            <span>Add a guide, deck, or bundle to get started.</span>
          </div>
        ) : (
          <>
            <div className="cart-items">
              {items.map((item) => (
                <div className="cart-item" key={item.key}>
                  <div className="cart-item-media">
                    {item.product.cover === "photo" ? (
                      <img src={item.product.images[0]} alt={item.product.title} />
                    ) : (
                      <CoverArt
                        variant={item.product.cover}
                        title={item.product.title}
                        subtitle={item.product.subtitle}
                      />
                    )}
                  </div>
                  <div className="cart-item-info">
                    <span className="cart-item-title">{item.product.title}</span>
                    <span className="cart-item-variant">{item.choice.label}</span>
                    <div className="cart-item-bottom">
                      <div className="qty-stepper qty-stepper-sm">
                        <button onClick={() => updateQty(item.key, item.qty - 1)}>
                          <Minus size={12} />
                        </button>
                        <span>{item.qty}</span>
                        <button onClick={() => updateQty(item.key, item.qty + 1)}>
                          <Plus size={12} />
                        </button>
                      </div>
                      <span className="cart-item-price">
                        {money((item.product.price + item.choice.delta) * item.qty)}
                      </span>
                    </div>
                  </div>
                  <button className="cart-item-remove" onClick={() => removeItem(item.key)}>
                    <X size={14} />
                  </button>
                </div>
              ))}
            </div>

            <div className="cart-footer">
              <div className="cart-subtotal-row">
                <span>Subtotal</span>
                <span className="price">{money(subtotal)}</span>
              </div>
              <p className="cart-note">Digital items deliver instantly at checkout. Printed items ship in 5–7 days.</p>
              <button className="btn-primary cart-checkout-btn" onClick={onCheckout}>
                Checkout
              </button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

/* ---------------------------------------------------------------------- */
/*  CHECKOUT MODAL (demo)                                                   */
/* ---------------------------------------------------------------------- */

function CheckoutModal({ open, onClose, items, subtotal }) {
  if (!open) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>
          <X size={16} />
        </button>
        <div className="modal-pearl-row">
          <Pearl size={9} />
          <Pearl size={13} />
          <Pearl size={9} />
        </div>
        <h3>Order summary</h3>
        <p className="modal-sub">
          This is a concept storefront — no real order has been placed or charged.
        </p>
        <div className="modal-items">
          {items.map((item) => (
            <div className="modal-item" key={item.key}>
              <span>
                {item.product.title} <em>× {item.qty}</em>
              </span>
              <span>{money((item.product.price + item.choice.delta) * item.qty)}</span>
            </div>
          ))}
        </div>
        <div className="modal-total-row">
          <span>Total</span>
          <span>{money(subtotal)}</span>
        </div>
        <button className="btn-primary modal-close-btn" onClick={onClose}>
          Continue browsing
        </button>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  ABOUT + FOOTER                                                          */
/* ---------------------------------------------------------------------- */

function About() {
  return (
    <section className="about" id="about">
      <div className="about-inner">
        <span className="section-eyebrow">Our mission</span>
        <h2 className="about-title">Built by PMHNPs, for PMHNPs.</h2>
        <p className="about-body">
          Somewhere between graduate school and your first solo caseload, there's a gap
          nobody quite warns you about. PMHNPGirlswithPearls exists to close it — with
          clinical pearls you can actually use on shift, not just cite in a paper.
          Every guide, deck, and toolkit here is written for practical, everyday psychiatric
          practice: assessments, psychopharmacology, lab monitoring, and documentation that
          holds up to real scrutiny.
        </p>
        <PearlDivider count={9} />
      </div>
    </section>
  );
}

function Footer() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);
  return (
    <footer className="site-footer" id="footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <span className="brand-mark">
            <Pearl size={8} />
            <Pearl size={11} />
            <Pearl size={8} />
          </span>
          <span className="brand-name">
            PMHNP<span className="brand-name-accent">Girls</span>withPearls
          </span>
        </div>

        <div className="footer-signup">
          <h3>Join our email list</h3>
          <p>Get exclusive deals and early access to new clinical guides.</p>
          {subscribed ? (
            <div className="footer-subscribed">
              <Check size={15} /> You're on the list.
            </div>
          ) : (
            <form
              className="footer-form"
              onSubmit={(e) => {
                e.preventDefault();
                if (email.trim()) setSubscribed(true);
              }}
            >
              <Mail size={15} className="footer-mail-icon" />
              <input
                type="email"
                placeholder="you@nurse.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
              <button type="submit">Join</button>
            </form>
          )}
        </div>

        <div className="footer-links">
          <a href="#shop">Shop</a>
          <a href="#about">About</a>
          <a href="#footer">Contact</a>
          <a href="#footer">Privacy Policy</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 PMHNPGirlswithPearls · Concept storefront design</span>
      </div>
    </footer>
  );
}

/* ---------------------------------------------------------------------- */
/*  TOAST                                                                   */
/* ---------------------------------------------------------------------- */

function Toast({ message }) {
  if (!message) return null;
  return (
    <div className="toast">
      <Check size={15} /> {message}
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  APP                                                                     */
/* ---------------------------------------------------------------------- */

export default function App() {
  const [view, setView] = useState("grid");
  const [activeProductId, setActiveProductId] = useState(null);
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState("All");
  const [level, setLevel] = useState("All");
  const [sortBy, setSortBy] = useState("featured");
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [checkoutOpen, setCheckoutOpen] = useState(false);
  const [toast, setToast] = useState("");
  const toastTimer = useRef(null);
  const topRef = useRef(null);

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(""), 2000);
  };

  const filteredProducts = useMemo(() => {
    let list = PRODUCTS.filter((p) => {
      const matchesQuery =
        query.trim() === "" ||
        p.title.toLowerCase().includes(query.toLowerCase()) ||
        p.tagline.toLowerCase().includes(query.toLowerCase()) ||
        p.format.toLowerCase().includes(query.toLowerCase());
      const matchesCategory = category === "All" || p.format === category;
      const matchesLevel = level === "All" || p.audience.includes(level);
      return matchesQuery && matchesCategory && matchesLevel;
    });
    if (sortBy === "price-asc") list = [...list].sort((a, b) => a.price - b.price);
    if (sortBy === "price-desc") list = [...list].sort((a, b) => b.price - a.price);
    return list;
  }, [query, category, level, sortBy]);

  const addToCart = (product, choice, qty) => {
    setCart((prev) => {
      const key = `${product.id}__${choice.id}`;
      const existing = prev.find((i) => i.key === key);
      if (existing) {
        return prev.map((i) => (i.key === key ? { ...i, qty: i.qty + qty } : i));
      }
      return [...prev, { key, product, choice, qty }];
    });
    showToast(`Added "${product.title}" (${choice.label})`);
  };

  const updateQty = (key, qty) => {
    if (qty <= 0) {
      setCart((prev) => prev.filter((i) => i.key !== key));
      return;
    }
    setCart((prev) => prev.map((i) => (i.key === key ? { ...i, qty } : i)));
  };

  const removeItem = (key) => setCart((prev) => prev.filter((i) => i.key !== key));

  const cartCount = cart.reduce((sum, i) => sum + i.qty, 0);
  const subtotal = cart.reduce((sum, i) => sum + (i.product.price + i.choice.delta) * i.qty, 0);

  const openProduct = (id) => {
    setActiveProductId(id);
    setView("detail");
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  };

  const backToGrid = () => {
    setView("grid");
    setActiveProductId(null);
  };

  const activeProduct = PRODUCTS.find((p) => p.id === activeProductId);

  return (
    <div className="storefront" ref={topRef}>
      <style>{CSS}</style>

      <Header
        query={query}
        setQuery={(q) => {
          setQuery(q);
          if (view !== "grid") backToGrid();
        }}
        cartCount={cartCount}
        onCartClick={() => setCartOpen(true)}
        onLogoClick={backToGrid}
      />

      {view === "grid" ? (
        <>
          <Hero />
          <main className="shop-main" id="shop">
            <FilterBar
              category={category}
              setCategory={setCategory}
              level={level}
              setLevel={setLevel}
              sortBy={sortBy}
              setSortBy={setSortBy}
              resultCount={filteredProducts.length}
            />
            <ProductGrid
              products={filteredProducts}
              onOpen={openProduct}
              onQuickAdd={(p) => addToCart(p, p.options[0].choices[0], 1)}
            />
          </main>
          <About />
        </>
      ) : (
        <main className="shop-main">
          <ProductDetail
            product={activeProduct}
            onBack={backToGrid}
            onAddToCart={addToCart}
            allProducts={PRODUCTS}
            onOpen={openProduct}
          />
        </main>
      )}

      <Footer />

      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        updateQty={updateQty}
        removeItem={removeItem}
        subtotal={subtotal}
        onCheckout={() => {
          setCartOpen(false);
          setCheckoutOpen(true);
        }}
      />

      <CheckoutModal
        open={checkoutOpen}
        onClose={() => setCheckoutOpen(false)}
        items={cart}
        subtotal={subtotal}
      />

      <Toast message={toast} />
    </div>
  );
}

/* ---------------------------------------------------------------------- */
/*  STYLES                                                                  */
/* ---------------------------------------------------------------------- */

const CSS = `
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

.storefront {
  --ink: #16213E;
  --ink-soft: #4B5578;
  --pearl-bg: #EEEAE2;
  --pearl-bg-alt: #E4DCCB;
  --cream: #FBF9F5;
  --wine: #7A2E3E;
  --wine-dark: #5C2230;
  --gold: #A8813F;
  --gold-soft: #C9AD78;
  --sage: #57705C;
  --line: #D8CFBE;
  font-family: 'IBM Plex Sans', sans-serif;
  background: var(--pearl-bg);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.storefront * { box-sizing: border-box; }
.storefront button { font-family: inherit; cursor: pointer; }
.storefront input, .storefront select { font-family: inherit; }
.storefront a { text-decoration: none; color: inherit; }
.storefront img { max-width: 100%; display: block; }

.pearl-dot {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fffdf8 0%, var(--gold-soft) 45%, var(--gold) 100%);
  box-shadow: 0 1px 2px rgba(22,33,62,0.25);
  display: inline-block;
  flex-shrink: 0;
}
.pearl-strand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}

.section-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wine);
  display: block;
  text-align: center;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(238,234,226,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
}
.brand-mark { display: flex; align-items: center; gap: 3px; }
.brand-name {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}
.brand-name-accent { color: var(--wine); font-style: italic; }
.nav-links { display: none; gap: 28px; }
.nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 3px;
}
.nav-link:hover { color: var(--wine); }
.header-actions { display: flex; align-items: center; gap: 10px; }

.search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  width: 150px;
  transition: width 0.25s ease, border-color 0.2s ease;
}
.search-wrap.search-open, .search-wrap:focus-within { width: 210px; border-color: var(--gold); }
.search-icon { color: var(--ink-soft); flex-shrink: 0; }
.search-input {
  border: none;
  background: none;
  outline: none;
  font-size: 13px;
  width: 100%;
  color: var(--ink);
}
.search-clear { background: none; border: none; color: var(--ink-soft); display: flex; }

.cart-btn {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.cart-btn:hover { background: var(--wine); }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--pearl-bg);
}

/* ---------- hero ---------- */
.hero {
  padding: 64px 20px 40px;
  background:
    radial-gradient(circle at 15% 20%, rgba(168,129,63,0.14), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(122,46,62,0.10), transparent 45%);
}
.hero-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  color: var(--ink);
  margin: 14px 0 0;
}
.hero-title em { color: var(--wine); font-style: italic; }
.hero-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 18px auto 0;
  max-width: 480px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--wine);
  color: var(--cream);
  border: none;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--wine-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* ---------- shop main / filters ---------- */
.shop-main { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

.filter-bar { padding: 24px 0 18px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.filter-bar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.result-count { font-size: 12.5px; color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; }
.filter-bar-right { display: flex; align-items: center; gap: 8px; }
.sort-select {
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink);
  outline: none;
}
.filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--ink);
}
.filter-toggle:hover { border-color: var(--gold); }

.filter-chips-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.chip-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chip-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-right: 4px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.chip:hover { border-color: var(--gold); color: var(--ink); }
.chip-active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---------- product grid / card ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) { .product-grid { gap: 28px; } }

.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 480px; margin: 8px auto 0; }

.product-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -12px rgba(22,33,62,0.25);
  border-color: var(--gold-soft);
}
.product-card-media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .product-card-media img { transform: scale(1.04); }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--gold);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.quick-add {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(251,249,245,0.95);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.product-card:hover .quick-add { opacity: 1; transform: translateY(0); }
.quick-add:hover { background: var(--wine); color: var(--cream); }

.product-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-format {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage);
}
.product-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 15.5px; line-height: 1.25; margin: 0; color: var(--ink); }
.product-tagline { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: 2px 0 6px; flex: 1; }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.price { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--wine); font-size: 14.5px; }
.price-lg { font-size: 22px; }
.price-compare { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--ink-soft); text-decoration: line-through; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state p { font-family: 'Fraunces', serif; font-size: 18px; color: var(--ink); margin: 0 0 4px; }
.empty-state span { font-size: 13px; }

/* generated cover art */
.cover-art {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(155deg, var(--ink) 0%, #223059 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
}
.cover-grid {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 22px),
                     repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 22px);
}
.cover-text { position: relative; text-align: center; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.cover-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-soft); }
.cover-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--cream); line-height: 1.2; }
.cover-subtitle { font-family: 'Fraunces', serif; font-style: italic; font-size: 12px; color: var(--gold-soft); }
.cover-pearl-strand { position: relative; z-index: 2; display: flex; gap: 6px; margin-top: 14px; }

.cover-card { position: absolute; width: 62%; height: 68%; border-radius: 10px; border: 1.5px solid rgba(201,173,120,0.55); background: rgba(251,249,245,0.06); }
.cover-card-a { transform: rotate(-9deg) translate(-14%, -4%); }
.cover-card-b { transform: rotate(7deg) translate(12%, 6%); background: rgba(251,249,245,0.1); }

.cover-deck { position: absolute; width: 46%; height: 60%; border-radius: 8px; border: 1.5px solid rgba(201,173,120,0.5); background: rgba(251,249,245,0.07); }
.cover-deck-a { transform: rotate(-11deg) translateX(-16%); }
.cover-deck-b { transform: rotate(0deg); background: rgba(251,249,245,0.12); }
.cover-deck-c { transform: rotate(11deg) translateX(16%); }

.cover-pocket { position: absolute; width: 40%; height: 62%; border-radius: 6px 6px 16px 16px; border: 1.5px solid rgba(201,173,120,0.55); background: rgba(251,249,245,0.08); }

.cover-toolkit { position: absolute; width: 58%; display: flex; flex-direction: column; gap: 8px; }
.cover-toolkit-line { height: 3px; border-radius: 2px; background: rgba(201,173,120,0.45); }
.cover-toolkit-line:nth-child(2) { width: 80%; }
.cover-toolkit-line:nth-child(3) { width: 60%; }
.cover-toolkit-line:nth-child(4) { width: 90%; }

/* ---------- about ---------- */
.about { padding: 50px 20px 70px; }
.about-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.about-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; margin: 12px 0; color: var(--ink); }
.about-body { font-size: 14px; line-height: 1.7; color: var(--ink-soft); }

/* ---------- product detail ---------- */
.product-detail { padding-top: 24px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  padding: 0;
}
.back-link:hover { color: var(--wine); }

.detail-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 860px) { .detail-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }

.gallery-main {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--line);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(251,249,245,0.9);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.gallery-arrow-left { left: 12px; }
.gallery-arrow-right { right: 12px; }
.gallery-arrow:hover { background: var(--gold); }

.gallery-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.gallery-thumb {
  width: 58px; height: 58px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  opacity: 0.65;
  flex-shrink: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb-active { border-color: var(--gold); opacity: 1; }

.detail-info { display: flex; flex-direction: column; }
.detail-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 30px; line-height: 1.12; margin: 6px 0 0; color: var(--ink); }
.detail-subtitle { font-family: 'Fraunces', serif; font-style: italic; color: var(--wine); font-size: 15px; margin: 2px 0 0; }
.detail-price-row { margin: 14px 0 10px; }
.detail-tagline { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 20px; }

.option-group { margin-bottom: 20px; }
.option-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); display: block; margin-bottom: 8px; }
.option-choices { display: flex; flex-direction: column; gap: 8px; }
.option-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
  border: 1.5px solid var(--line);
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.option-choice:hover { border-color: var(--gold-soft); }
.option-choice-active { border-color: var(--wine); background: #FBF1F0; }
.option-choice-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.option-delta { color: var(--wine); font-weight: 500; }
.option-choice-note { font-size: 11.5px; color: var(--ink-soft); }

.qty-add-row { display: flex; gap: 10px; margin-bottom: 22px; }
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--cream);
}
.qty-stepper button { background: none; border: none; color: var(--ink); display: flex; }
.qty-stepper span { font-family: 'IBM Plex Mono', monospace; font-size: 13px; min-width: 14px; text-align: center; }
.qty-stepper-sm { padding: 4px 8px; gap: 8px; }

.add-to-cart-btn { flex: 1; }
.add-to-cart-btn.added { background: var(--sage); }

.detail-description { font-size: 14px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 22px; }

.pearls-box {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.pearls-box-head { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--ink); }
.pearls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pearls-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.pearls-list li .pearl-dot { margin-top: 5px; }

.audience-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag {
  font-size: 11.5px;
  border: 1px solid var(--line);
  color: var(--sage);
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', monospace;
}

.related-section { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); text-align: center; }
.related-section .related-grid { text-align: left; margin-top: 8px; }

/* ---------- cart drawer ---------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(22,33,62,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 50;
}
.overlay-visible { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(400px, 92vw);
  background: var(--pearl-bg);
  z-index: 60;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 32px rgba(22,33,62,0.15);
}
.cart-drawer-open { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px; border-bottom: 1px solid var(--line);
}
.cart-drawer-head h2 { font-family: 'Fraunces', serif; font-size: 19px; margin: 0; }
.cart-drawer-head button { background: none; border: none; color: var(--ink); }

.cart-empty { text-align: center; padding: 60px 24px; color: var(--ink-soft); }
.cart-empty p { font-family: 'Fraunces', serif; font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.cart-empty span { font-size: 12.5px; }

.cart-items { flex: 1; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: flex; gap: 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 10px; position: relative; }
.cart-item-media { width: 58px; height: 58px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cart-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-title { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.cart-item-variant { font-size: 11px; color: var(--ink-soft); }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.cart-item-price { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--wine); }
.cart-item-remove { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--ink-soft); }
.cart-item-remove:hover { color: var(--wine); }

.cart-footer { padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.cart-subtotal-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-bottom: 6px; }
.cart-note { font-size: 11px; color: var(--ink-soft); margin: 0 0 14px; line-height: 1.4; }
.cart-checkout-btn { width: 100%; }

/* ---------- checkout modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(22,33,62,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 80; padding: 20px;
}
.modal-card {
  background: var(--cream);
  border-radius: 18px;
  max-width: 380px;
  width: 100%;
  padding: 26px 24px 24px;
  position: relative;
  text-align: center;
}
.modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--ink-soft); }
.modal-pearl-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.modal-card h3 { font-family: 'Fraunces', serif; font-size: 20px; margin: 0 0 6px; color: var(--ink); }
.modal-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.5; }
.modal-items { text-align: left; display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.modal-item { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink); }
.modal-item em { color: var(--ink-soft); font-style: normal; }
.modal-total-row { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 18px; }
.modal-close-btn { width: 100%; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); margin-top: 40px; }
.footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 48px 20px;
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 720px) { .footer-inner { grid-template-columns: 1fr 1.3fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-name { color: var(--cream); }
.footer-brand .brand-name-accent { color: var(--gold-soft); }
.footer-signup h3 { font-family: 'Fraunces', serif; font-size: 17px; margin: 0 0 6px; }
.footer-signup p { font-size: 12.5px; color: #C7CCDE; margin: 0 0 12px; }
.footer-form { display: flex; align-items: center; gap: 8px; background: rgba(251,249,245,0.08); border: 1px solid rgba(251,249,245,0.2); border-radius: 999px; padding: 6px 6px 6px 14px; }
.footer-mail-icon { color: #C7CCDE; flex-shrink: 0; }
.footer-form input { flex: 1; background: none; border: none; outline: none; color: var(--cream); font-size: 12.5px; }
.footer-form input::placeholder { color: #8891AE; }
.footer-form button { background: var(--gold); color: var(--ink); border: none; border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 600; }
.footer-subscribed { display: flex; align-items: center; gap: 6px; color: var(--gold-soft); font-size: 13px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: #C7CCDE; }
.footer-links a:hover { color: var(--gold-soft); }
.footer-bottom { border-top: 1px solid rgba(251,249,245,0.12); padding: 16px 20px; text-align: center; font-size: 11.5px; color: #8891AE; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--cream);
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 90;
  box-shadow: 0 10px 24px rgba(22,33,62,0.3);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (min-width: 780px) {
  .nav-links { display: flex; }
  .hero-title { font-size: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .storefront * { transition: none !important; animation: none !important; }
}
`;