*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--color-bg);
}

body {
  margin: var(--space-0);
  min-height: 100vh;
  overflow-x: clip;
  color: var(--color-fg);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}

body::before {
  content: "";
  position: fixed;
  inset: var(--space-0);
  z-index: 90;
  pointer-events: none;
  opacity: var(--opacity-grain);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

body.drawer-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: var(--transparent);
}

button {
  min-height: var(--control-min-height);
}

a {
  color: inherit;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-1);
}

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

fieldset {
  min-width: var(--space-0);
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
ul {
  margin-block-start: var(--space-0);
}

h1,
h2,
h3 {
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

h1,
h2 {
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

em {
  color: var(--laden);
  font-weight: var(--weight-regular);
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

::selection {
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.skip-link {
  position: fixed;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 120;
  padding: var(--space-3) var(--space-4);
  color: var(--color-accent-fg);
  background: var(--color-accent);
  transform: translateY(-180%);
  transition: transform var(--motion-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(var(--space-0));
}

.visually-hidden {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: var(--space-0);
  margin: calc(var(--border-width) * -1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: var(--space-0);
}

.eyebrow {
  margin-block-end: var(--space-3);
  color: var(--color-muted);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}

.eyebrow::before,
.germination-caption::before {
  content: "";
  inline-size: var(--space-3);
  block-size: var(--space-2);
  background: var(--laden);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='currentColor'%3E%3Crect x='0.5' y='1.4' width='11' height='1'/%3E%3Crect x='0.5' y='0.9' width='0.9' height='2'/%3E%3Crect x='10.6' y='0.9' width='0.9' height='2'/%3E%3Cpath d='M2.85 2.4H3.75C4.25 4.29 3.5 5.84 3.05 6.6 2.6 5.84 2.35 4.29 2.85 2.4Z'/%3E%3Cpath d='M5.55 2.4H6.45C7.15 4.74 6.55 6.66 6 7.6 5.45 6.66 4.85 4.74 5.55 2.4Z'/%3E%3Cpath d='M8.25 2.4H9.15C9.55 3.75 9.25 4.72 8.85 5.4 8.45 4.72 7.85 3.75 8.25 2.4Z'/%3E%3Ccircle cx='8.85' cy='6.15' r='0.62'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='currentColor'%3E%3Crect x='0.5' y='1.4' width='11' height='1'/%3E%3Crect x='0.5' y='0.9' width='0.9' height='2'/%3E%3Crect x='10.6' y='0.9' width='0.9' height='2'/%3E%3Cpath d='M2.85 2.4H3.75C4.25 4.29 3.5 5.84 3.05 6.6 2.6 5.84 2.35 4.29 2.85 2.4Z'/%3E%3Cpath d='M5.55 2.4H6.45C7.15 4.74 6.55 6.66 6 7.6 5.45 6.66 4.85 4.74 5.55 2.4Z'/%3E%3Cpath d='M8.25 2.4H9.15C9.55 3.75 9.25 4.72 8.85 5.4 8.45 4.72 7.85 3.75 8.25 2.4Z'/%3E%3Ccircle cx='8.85' cy='6.15' r='0.62'/%3E%3C/svg%3E") center / contain no-repeat;
}

.eyebrow::before {
  display: inline-block;
  margin-inline-end: var(--space-2);
  vertical-align: text-bottom;
}

.ritual-index .eyebrow::before {
  background: var(--laden-lift);
}

.site-header {
  position: sticky;
  inset-block-start: var(--space-0);
  z-index: 70;
  min-height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  padding-inline: max(var(--space-6), calc((100vw - var(--content-max)) / 2));
  border-block-end: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 35%, var(--transparent));
  background: color-mix(in srgb, var(--paper) 91%, var(--transparent));
  backdrop-filter: blur(var(--space-3));
}

.wordmark {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-3);
  color: var(--laden-ink);
  text-decoration: none;
}

.wordmark svg {
  display: block;
  overflow: visible;
}

.header-logomark {
  width: var(--logomark-header-size);
  height: var(--logomark-header-size);
  flex: 0 0 auto;
  color: var(--laden-ink);
}

.wordmark-word {
  width: var(--logo-width);
}

.wordmark-main {
  fill: currentColor;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav a {
  position: relative;
  min-height: var(--control-min-height);
  display: grid;
  place-items: center;
  color: var(--color-heading);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-0);
  inset-block-end: var(--space-1);
  height: var(--border-width-strong);
  background: var(--laden);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-fast) var(--ease);
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.cart-trigger {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-heading);
  background: var(--transparent);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.cart-trigger:hover {
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.cart-badge {
  position: relative;
  isolation: isolate;
  min-width: var(--space-6);
  min-height: var(--space-6);
  display: grid;
  place-items: center;
  border-radius: var(--radius-round);
  color: var(--color-accent-fg);
  background: var(--laden);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-normal);
  opacity: var(--opacity-solid);
  transform: scale(1);
  transform-origin: center;
}

.cart-badge::before,
.cart-badge::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  border-radius: inherit;
  pointer-events: none;
}

.cart-badge::before {
  z-index: -1;
  background: var(--laden-veil);
  opacity: var(--opacity-zero);
  transform: scale(0);
}

.cart-badge::after {
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: var(--opacity-grain);
}

#app {
  min-height: calc(100vh - var(--header-height));
}

.hero {
  width: min(100%, var(--content-max));
  min-height: calc(100svh - var(--header-height));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  border-inline: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 22%, var(--transparent));
}

.marj-rayi {
  display: none;
}

.hero-copy {
  align-self: center;
  container-type: inline-size;
  padding: var(--space-20) var(--space-12);
}

.hero h1 {
  max-width: var(--reading-max);
  margin-block-end: var(--space-8);
  font-size: min(var(--text-hero), var(--text-hero-container));
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.hero h1 em {
  display: block;
  margin-inline-start: var(--space-8);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}

.hero-intro {
  max-width: var(--reading-max);
  margin-block-end: var(--space-8);
  color: var(--color-muted);
  font-size: var(--text-md);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-12);
}

.primary-button,
.add-button,
.disabled-checkout,
.text-button {
  min-height: var(--control-min-height);
  border: var(--border-width) solid var(--color-accent);
  padding: var(--space-3) var(--space-6);
  color: var(--color-accent-fg);
  background: var(--color-accent);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.primary-button:hover,
.add-button:hover,
.text-button:hover {
  background: var(--color-accent-hover);
  transform: translateY(calc(var(--space-1) * -1));
}

.text-link {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  color: var(--color-heading);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.hero-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-width) solid var(--color-border);
}

.hero-notes div {
  min-width: var(--space-0);
}

.hero-notes dt {
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hero-notes dd {
  margin: var(--space-1) var(--space-0) var(--space-0);
  color: var(--color-heading);
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
}

.hero-art {
  position: relative;
  min-height: var(--hero-art-min);
  overflow: hidden;
  display: grid;
  place-items: center;
  border-inline-start: var(--border-width) solid var(--color-border);
  background:
    radial-gradient(circle at 55% 44%, color-mix(in srgb, var(--ochre-pale) 42%, var(--transparent)), var(--transparent) 52%),
    linear-gradient(145deg, var(--paper-deep), var(--paper));
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%233E1934'%3E%3Crect x='1' y='2.4' width='14' height='1.4'/%3E%3Crect x='1' y='1.6' width='1.1' height='3'/%3E%3Crect x='13.9' y='1.6' width='1.1' height='3'/%3E%3Cpath d='M3.85 3.8H4.95C5.9 6.95 4.6 9.54 4 10.8 3.4 9.54 2.9 6.95 3.85 3.8Z'/%3E%3Cpath d='M7.45 3.8H8.55C9.9 7.94 8.95 10.94 8 13 7.05 10.94 6.1 7.94 7.45 3.8Z'/%3E%3Cpath d='M11.05 3.8H12.15C12.9 6.05 12.4 7.4 11.8 8.8 11.2 7.4 10.3 6.05 11.05 3.8Z'/%3E%3C/svg%3E") 8 8, crosshair;
}

.hero-art::after {
  content: "";
  position: absolute;
  inset: var(--space-6);
  border: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 36%, var(--transparent));
  pointer-events: none;
}

.pollen-canvas {
  position: absolute;
  inset: var(--space-0);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-art-note {
  position: absolute;
  inset-block-start: var(--space-10);
  inset-inline-start: var(--space-10);
  z-index: 3;
  margin: var(--space-0);
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.germination-caption {
  position: absolute;
  inset-inline-end: var(--space-10);
  inset-block-end: var(--space-10);
  z-index: 3;
  max-width: calc(var(--reading-max) / 2);
  margin: var(--space-0);
  padding-inline-start: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.germination-caption::before {
  position: absolute;
  inset-block-start: var(--border-width);
  inset-inline-start: var(--space-0);
}

.germination-caption span {
  display: block;
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.product-visual-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}

.visual-hero {
  width: min(94%, var(--hero-art-min));
  z-index: 2;
}

.vessel-layer,
.botanical-layer {
  position: absolute;
  inset: var(--space-0);
  display: grid;
  place-items: center;
}

.vessel-layer {
  z-index: 2;
  transform: translateY(var(--space-4)) scale(0.82);
}

.botanical-layer {
  z-index: 1;
  pointer-events: none;
}

.ground-line {
  position: absolute;
  inset-inline: 27%;
  inset-block-end: 6%;
  z-index: 1;
  height: var(--border-width-strong);
  background: color-mix(in srgb, var(--ink) 40%, var(--transparent));
  transform: rotate(-1.5deg);
}

.apotek-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.apotek-stage[data-tone="acik"] {
  --vessel-light: var(--ochre-pale);
  --vessel-body: var(--amber-light);
  --vessel-shadow: var(--amber-body);
}

.apotek-stage[data-tone="bal"] {
  --vessel-light: var(--amber-pale);
  --vessel-body: var(--amber-body);
  --vessel-shadow: var(--amber-deep);
}

.apotek-stage[data-tone="koyu"] {
  --vessel-light: var(--amber-light);
  --vessel-body: var(--amber-deep);
  --vessel-shadow: var(--ink);
}

.apotek-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: drop-shadow(var(--space-0) var(--space-6) var(--space-4) color-mix(in srgb, var(--shadow-color) 24%, var(--transparent)));
}

.liquid-shimmer {
  position: absolute;
  inset: var(--space-0);
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cap-hatch,
.glass-glint,
.rim-light,
.liquid-line,
.pipette,
.label-rule {
  fill: none;
  stroke-linecap: round;
}

.cap-hatch {
  stroke: var(--paper-shadow);
  stroke-width: var(--border-width);
  opacity: var(--opacity-medium);
}

.glass-glint {
  stroke: var(--glass-glint);
  stroke-width: var(--border-width-strong);
  opacity: var(--opacity-medium);
}

.rim-light {
  stroke: var(--glass-rim);
  stroke-width: var(--border-width);
  opacity: var(--opacity-strong);
}

.liquid-line {
  stroke: var(--shimmer-core);
  stroke-width: var(--border-width-strong);
  opacity: var(--opacity-strong);
}

.pipette {
  stroke: var(--ink);
  stroke-width: var(--border-width-strong);
  opacity: var(--opacity-medium);
}

.label-rule {
  stroke: var(--ink-faint);
  stroke-width: var(--border-width);
}

.label-word,
.label-name,
.label-volume {
  fill: var(--ink);
  font-family: var(--font-display);
}

.label-word {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.label-name {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.label-volume {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}

.label-botanical path {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--border-width-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--opacity-strong);
}

.otaci-seal,
.seal-halo,
.seal-grain {
  transform-box: fill-box;
  transform-origin: center;
}

.otaci-seal {
  opacity: var(--opacity-solid);
  transform: scale(1);
}

.seal-halo {
  opacity: var(--opacity-zero);
  transform: scale(0);
}

.seal-grain {
  mix-blend-mode: multiply;
  opacity: var(--opacity-grain);
  pointer-events: none;
}

.js-motion .germination.is-grown .otaci-seal,
.cart-badge.is-seal-pressing,
.ritual-numeral.is-seal-pressing {
  animation: seal-press var(--motion-base) var(--ease-organic);
}

.js-motion .germination.is-grown .otaci-seal,
.js-motion .germination.is-grown .seal-halo,
.js-motion .germination.is-grown .seal-grain {
  animation-delay: calc(var(--motion-draw) + (12 * var(--motion-stagger)));
}

.js-motion .germination.is-grown .seal-halo,
.cart-badge.is-seal-pressing::before,
.ritual-numeral.is-seal-pressing::after {
  animation-name: seal-halo-bloom;
  animation-duration: var(--motion-base);
  animation-timing-function: var(--ease);
}

.js-motion .germination.is-grown .seal-grain,
.cart-badge.is-seal-pressing::after,
.ritual-numeral.is-seal-pressing > span::after {
  animation-name: seal-grain-settle;
  animation-duration: 120ms;
  animation-timing-function: var(--ease);
}

@keyframes seal-press {
  0% {
    opacity: var(--opacity-solid);
    transform: scale(0.86);
  }

  68% {
    opacity: var(--opacity-solid);
    transform: scale(1.03);
  }

  100% {
    opacity: var(--opacity-solid);
    transform: scale(1);
  }
}

@keyframes seal-halo-bloom {
  0% {
    opacity: var(--opacity-zero);
    transform: scale(0);
  }

  28% {
    opacity: var(--opacity-veil);
  }

  100% {
    opacity: var(--opacity-zero);
    transform: scale(1.35);
  }
}

@keyframes seal-grain-settle {
  from {
    opacity: var(--opacity-grain);
  }

  to {
    opacity: 0.09;
  }
}

@keyframes card-seal-press {
  0% {
    opacity: var(--opacity-solid);
    transform: scale(0.86);
  }

  12%,
  68% {
    opacity: var(--opacity-solid);
  }

  68% {
    transform: scale(1.03);
  }

  100% {
    opacity: var(--opacity-hairline);
    transform: scale(1);
  }
}

@keyframes card-seal-veil-press {
  0% {
    opacity: var(--opacity-soft);
  }

  30% {
    opacity: var(--opacity-medium);
  }

  68% {
    opacity: var(--opacity-soft);
  }

  100% {
    opacity: var(--opacity-zero);
  }
}

@keyframes card-seal-grain-press {
  0%,
  68% {
    opacity: var(--opacity-hairline);
  }

  30% {
    opacity: var(--opacity-soft);
  }

  100% {
    opacity: var(--opacity-grain);
  }
}

.botanical-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--ink);
}

.botanical-ink {
  color: var(--laden-ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stem-line {
  stroke-width: 3.1;
}

.branch-line {
  stroke-width: 2.35;
}

.leaf-vein,
.petal-detail,
.stamen,
.fruit-hatch,
.fruit-glint {
  stroke-width: 1.2;
  opacity: var(--opacity-strong);
}

.leaf-outline,
.petal,
.bud-shell,
.fruit-body,
.fruit-crown,
.calyx {
  fill: color-mix(in srgb, var(--paper-raised) 68%, var(--transparent));
}

.sage-leaf .leaf-outline {
  fill: color-mix(in srgb, var(--sage-soft) 34%, var(--paper-raised));
}

.pomegranate-bloom .petal,
.pomegranate-bloom .calyx {
  fill: color-mix(in srgb, var(--amber-light) 24%, var(--paper-raised));
}

.fruit-body {
  fill: color-mix(in srgb, var(--amber) 28%, var(--paper-raised));
}

.bloom-center {
  fill: var(--ochre);
  stroke: currentColor;
}

.laden-bloom .bloom-center {
  stroke: var(--laden-ink);
}

.ink-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.botanical-bloom,
.botanical-bud,
.botanical-fruit {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.js-motion .germination .ink-line {
  transition: stroke-dashoffset var(--motion-draw) var(--ease-organic);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}

.js-motion .germination:not(.is-grown) .ink-line {
  stroke-dashoffset: 1;
}

.js-motion .germination .botanical-bloom,
.js-motion .germination .botanical-bud,
.js-motion .germination .botanical-fruit {
  transition: transform var(--motion-bloom) var(--ease-organic), opacity var(--motion-bloom) var(--ease);
  transition-delay: calc((var(--i, 0) * var(--motion-stagger)) + var(--motion-base));
}

.js-motion .germination:not(.is-grown) .botanical-bloom,
.js-motion .germination:not(.is-grown) .botanical-bud,
.js-motion .germination:not(.is-grown) .botanical-fruit {
  opacity: var(--opacity-zero);
  transform: scale(0.06) rotate(-8deg);
}

.js-motion .germination .leaf-outline {
  transition: fill-opacity var(--motion-bloom) var(--ease);
  transition-delay: calc((var(--i, 0) * var(--motion-stagger)) + var(--motion-base));
}

.js-motion .germination:not(.is-grown) .leaf-outline {
  fill-opacity: var(--space-0);
}

.product-card:hover .tendril,
.product-card:focus-within .tendril {
  transform: scale(1.045) rotate(-2deg);
}

.tendril {
  transform-origin: center;
  transition: transform var(--motion-base) var(--ease-organic);
}

.apothecary-note,
.ritual-index,
.catalog-section,
.field-note {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: var(--space-24) var(--space-12);
  border-inline: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 22%, var(--transparent));
}

.apothecary-note {
  display: grid;
  grid-template-areas:
    "title diagram"
    "title copy";
  grid-template-columns: minmax(var(--space-0), 0.8fr) minmax(var(--space-0), 1.2fr);
  gap: var(--space-8) var(--space-12);
  align-items: stretch;
  border-block-start: var(--border-width) solid var(--color-border);
}

.apothecary-note > h2 {
  grid-area: title;
  align-self: center;
  max-width: var(--reading-max);
  margin-block-end: var(--space-0);
  font-size: var(--text-2xl);
}

.source-board-wrap {
  grid-area: diagram;
  min-width: var(--space-0);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  background: var(--paper-raised);
}

.source-board {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.source-board__ink,
.source-board__paper {
  fill: none;
  stroke: var(--laden-ink);
  stroke-width: var(--border-width-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.source-board__rack,
.source-board__measure,
.source-board__baseline {
  stroke: var(--ink-faint);
}

.source-board__vial {
  fill: color-mix(in srgb, var(--amber-body) 68%, var(--transparent));
}

.source-board__cap {
  fill: var(--forest);
}

.source-board__label,
.source-board__section {
  fill: var(--paper);
}

.source-board__drop {
  fill: var(--laden);
}

.source-board__paper > path:first-child {
  fill: var(--paper);
}

.source-board__paper > path:not(:first-child),
.source-board__label-rule,
.source-board__section-lines {
  stroke: var(--ink-faint);
}

.source-board__type {
  fill: var(--color-muted);
  font-family: var(--font-label);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.approach-copy {
  grid-area: copy;
  align-self: end;
  columns: 2;
  column-gap: var(--space-8);
  color: var(--color-muted);
}

.approach-copy p {
  break-inside: avoid;
}

.ritual-index {
  background: var(--forest);
  --color-focus: var(--ochre-pale);
}

.ritual-index .section-heading {
  display: block;
  margin-block-end: var(--space-12);
}

.ritual-index .eyebrow,
.ritual-index h2 {
  color: var(--paper);
}

.ritual-cards {
  padding: var(--space-0);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block-start: var(--border-width) solid color-mix(in srgb, var(--paper) 30%, var(--transparent));
  list-style: none;
}

.ritual-cards li {
  border-inline-end: var(--border-width) solid color-mix(in srgb, var(--paper) 30%, var(--transparent));
}

.ritual-cards li:last-child {
  border-inline-end: var(--space-0);
}

.ritual-cards a {
  height: 100%;
  display: block;
  padding: var(--space-8);
  color: var(--paper);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.ritual-cards a:hover {
  color: var(--forest);
  background: var(--paper);
}

.ritual-cards a > span {
  display: block;
  margin-block-end: var(--space-4);
  color: var(--ochre-pale);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.ritual-diagram {
  width: 100%;
  height: auto;
  margin-block-end: var(--space-6);
  overflow: visible;
  color: currentColor;
}

.ritual-diagram__ink,
.ritual-diagram__measure,
.ritual-diagram__baseline,
.ritual-diagram__vessel,
.ritual-diagram__cap,
.ritual-diagram__drop,
.ritual-diagram__section {
  stroke: currentColor;
  stroke-width: var(--border-width-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ritual-diagram__ink,
.ritual-diagram__measure,
.ritual-diagram__baseline {
  fill: none;
}

.ritual-diagram__measure,
.ritual-diagram__baseline {
  opacity: var(--opacity-soft);
}

.ritual-diagram__vessel,
.ritual-diagram__section {
  fill: color-mix(in srgb, currentColor 9%, var(--transparent));
}

.ritual-diagram__cap {
  fill: color-mix(in srgb, currentColor 18%, var(--transparent));
}

.ritual-diagram__liquid {
  fill: color-mix(in srgb, currentColor 22%, var(--transparent));
}

.ritual-diagram__drop {
  fill: var(--ochre-pale);
}

.ritual-cards a:hover > span {
  color: var(--laden);
}

.ritual-cards h3 {
  color: inherit;
  font-size: var(--text-xl);
}

.ritual-cards p {
  margin-block-end: var(--space-0);
  color: color-mix(in srgb, currentColor 78%, var(--transparent));
}

.catalog-section {
  padding-block-end: var(--space-0);
  background: var(--paper-raised);
}

.catalog-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: end;
  padding-block-end: var(--space-8);
  border-block-end: var(--border-width-strong) solid var(--color-heading);
}

.catalog-heading h2 {
  margin-block-end: var(--space-0);
  font-size: var(--text-2xl);
}

.catalog-heading > p {
  margin-block-end: var(--space-2);
  color: var(--color-muted);
}

.ritual-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-6);
}

.ritual-filter a {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.ritual-filter a:hover,
.ritual-filter a[aria-current="page"] {
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.ritual-section {
  padding-block: var(--space-16) var(--space-20);
}

.ritual-section + .ritual-section {
  border-block-start: var(--border-width) solid var(--color-border);
}

.catalog-section .ritual-section:last-child {
  padding-block-end: var(--space-0);
}

.ritual-heading {
  display: grid;
  grid-template-columns: auto 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: center;
  margin-block-end: var(--space-10);
}

.ritual-heading > p:last-child {
  max-width: var(--reading-max);
  margin-block-end: var(--space-0);
  color: var(--color-muted);
}

.ritual-heading h2 {
  margin-block-end: var(--space-0);
}

.ritual-numeral {
  position: relative;
  isolation: isolate;
  width: var(--ritual-number-size);
  height: var(--ritual-number-size);
  display: grid;
  place-items: center;
  margin: var(--space-0);
  color: var(--laden);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  opacity: var(--opacity-solid);
  transform: scale(1);
  transform-origin: center;
}

.ritual-numeral::before,
.ritual-numeral::after,
.ritual-numeral > span::before,
.ritual-numeral > span::after {
  content: "";
  position: absolute;
  inset: var(--space-0);
  pointer-events: none;
}

.ritual-numeral::before {
  z-index: -1;
  background: var(--laden);
  clip-path: polygon(50.00% 3.06%, 66.69% 9.71%, 81.82% 18.18%, 89.01% 33.84%, 95.56% 50.00%, 93.11% 67.86%, 80.44% 80.44%, 67.11% 91.32%, 50.00% 94.17%, 32.35% 92.60%, 20.34% 79.66%, 8.17% 67.33%, 6.11% 50.00%, 7.14% 32.25%, 19.75% 19.75%, 32.99% 8.94%);
}

.ritual-numeral::after {
  z-index: -2;
  background: var(--laden-veil);
  clip-path: polygon(50.00% 3.06%, 66.69% 9.71%, 81.82% 18.18%, 89.01% 33.84%, 95.56% 50.00%, 93.11% 67.86%, 80.44% 80.44%, 67.11% 91.32%, 50.00% 94.17%, 32.35% 92.60%, 20.34% 79.66%, 8.17% 67.33%, 6.11% 50.00%, 7.14% 32.25%, 19.75% 19.75%, 32.99% 8.94%);
  opacity: var(--opacity-zero);
  transform: scale(0);
}

.ritual-numeral > span {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.ritual-numeral > span::before {
  z-index: -2;
  background: var(--paper-raised);
  clip-path: polygon(50.00% 7.50%, 64.99% 13.81%, 78.68% 21.32%, 84.90% 35.54%, 91.11% 50.00%, 89.01% 66.16%, 77.30% 77.30%, 65.41% 87.21%, 50.00% 89.72%, 34.05% 88.49%, 23.48% 76.52%, 12.27% 65.63%, 10.56% 50.00%, 11.25% 33.95%, 22.89% 22.89%, 34.69% 13.04%);
}

.ritual-numeral > span::after {
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  clip-path: polygon(50.00% 3.06%, 66.69% 9.71%, 81.82% 18.18%, 89.01% 33.84%, 95.56% 50.00%, 93.11% 67.86%, 80.44% 80.44%, 67.11% 91.32%, 50.00% 94.17%, 32.35% 92.60%, 20.34% 79.66%, 8.17% 67.33%, 6.11% 50.00%, 7.14% 32.25%, 19.75% 19.75%, 32.99% 8.94%);
  mix-blend-mode: multiply;
  opacity: var(--opacity-grain);
}

.product-grid {
  padding: var(--space-0);
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
  gap: var(--space-4);
  list-style: none;
}

.product-card {
  min-width: var(--space-0);
}

.product-card article,
.product-card a {
  height: 100%;
}

.product-card a {
  display: flex;
  flex-direction: column;
  color: var(--color-fg);
  background: var(--paper);
  text-decoration: none;
}

.card-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0.9;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--paper-deep) 72%, var(--paper)), var(--paper));
}

.card-art::after {
  content: "";
  position: absolute;
  inset: var(--space-3);
  z-index: 5;
  border: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 30%, var(--transparent));
  pointer-events: none;
}

.card-seal-scene,
.card-seal-veil,
.card-seal-grain {
  position: absolute;
  inset: var(--space-0);
  pointer-events: none;
}

.card-seal-scene {
  z-index: 4;
  display: grid;
  place-items: center;
}

.card-seal-veil,
.card-seal-grain {
  opacity: var(--opacity-zero);
}

.card-seal-veil {
  background: var(--laden-veil);
}

.card-seal-grain {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.card-seal {
  z-index: 1;
  width: calc(50% + var(--space-4));
  overflow: visible;
  opacity: var(--opacity-zero);
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
}

.card-seal__body {
  fill: var(--laden-deep);
  stroke: var(--laden-ink);
  stroke-width: var(--border-width-strong);
  stroke-linejoin: miter;
}

.card-seal__lip {
  fill: none;
  stroke: var(--laden-veil);
  stroke-width: var(--border-width);
  stroke-linejoin: miter;
}

.product-card:hover .card-seal,
.product-card a:focus-visible .card-seal {
  animation: card-seal-press var(--motion-base) var(--ease-organic) both;
}

.product-card:hover .card-seal-veil,
.product-card a:focus-visible .card-seal-veil {
  animation: card-seal-veil-press var(--motion-base) var(--ease) both;
}

.product-card:hover .card-seal-grain,
.product-card a:focus-visible .card-seal-grain {
  animation: card-seal-grain-press var(--motion-base) var(--ease) both;
}

@media (hover: none) {
  .product-card.is-card-seal-pressing .card-seal {
    animation: card-seal-press var(--motion-base) var(--ease-organic) both;
  }

  .product-card.is-card-seal-pressing .card-seal-veil {
    animation: card-seal-veil-press var(--motion-base) var(--ease) both;
  }

  .product-card.is-card-seal-pressing .card-seal-grain {
    animation: card-seal-grain-press var(--motion-base) var(--ease) both;
  }
}

.card-art .product-visual-stage {
  height: 100%;
  transition: transform var(--motion-base) var(--ease-organic);
}

.card-art .apotek-stage[data-silhouette="kavanoz"] {
  transform: translateY(calc(var(--space-16) * -1));
}

.product-card:hover .product-visual-stage,
.product-card:focus-within .product-visual-stage {
  transform: scale(1.025);
}

.specimen-number {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: 6;
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.card-copy {
  position: relative;
  flex: 1;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-block-start: var(--space-0);
}

.card-copy h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-lg);
}

.card-botanical {
  margin-block-end: var(--space-6);
  color: var(--color-muted);
  font-style: italic;
}

.card-price {
  margin-block-end: var(--space-0);
  color: var(--laden);
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.brand-seal-band {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--content-max));
  height: auto;
  aspect-ratio: 32 / 9;
  margin-inline: auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding-inline: var(--space-5);
  border-inline: var(--border-width) solid var(--paper);
  color: var(--paper);
  background: var(--forest-deep);
}

.brand-seal-band__lockup {
  position: absolute;
  inset-inline: var(--space-12);
  inset-block-end: calc(var(--space-12) - var(--border-width));
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1fr) minmax(var(--space-0), 7fr) minmax(var(--space-0), 2fr);
  align-items: end;
  gap: var(--space-4);
}

.brand-seal-band__seal {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  color: var(--paper);
}

.brand-seal-band__seal-body {
  fill: var(--laden);
}

.brand-seal-band__seal-lip {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-width);
  stroke-linejoin: miter;
}

.brand-seal-band__seal-mark {
  fill: currentColor;
  stroke: currentColor;
}

.brand-seal-band__wordmark {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  justify-self: center;
  color: var(--paper);
  overflow: visible;
}

.brand-seal-band__wordmark-main {
  fill: currentColor;
}

.brand-seal-band__sample {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 7;
  justify-self: end;
  overflow: visible;
}

.brand-seal-band__sample-cap {
  fill: url("#brand-seal-sample-cap");
}

.brand-seal-band__sample-cap,
.brand-seal-band__sample-neck,
.brand-seal-band__sample-body {
  stroke: var(--amber-light);
  stroke-width: var(--border-width-strong);
  vector-effect: non-scaling-stroke;
}

.brand-seal-band__sample-neck,
.brand-seal-band__sample-body {
  fill: url("#brand-seal-sample-glass");
}

.brand-seal-band__sample-detail {
  fill: none;
  stroke: var(--forest-deep);
  stroke-width: var(--border-width-strong);
  vector-effect: non-scaling-stroke;
}

.brand-seal-band__sample-specular {
  fill: url("#brand-seal-sample-specular");
}

.brand-seal-band__sample-glint {
  fill: none;
  stroke: var(--glass-glint);
  stroke-width: var(--border-width-strong);
  stroke-linecap: round;
  opacity: var(--opacity-strong);
  vector-effect: non-scaling-stroke;
}

.brand-seal-band__rhythm {
  position: absolute;
  inset-inline: var(--space-0);
  inset-block-end: var(--space-0);
  z-index: 0;
  width: 100%;
  height: calc(var(--space-12) - var(--space-2));
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-width-strong);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.brand-seal-band__rhythm path {
  vector-effect: non-scaling-stroke;
}

.brand-seal-band__rhythm-bead {
  fill: var(--laden-live);
  stroke: none;
}

.field-note {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-16);
  align-items: end;
  border-block-start: var(--border-width) solid var(--color-border);
  background: var(--paper-deep);
}

.field-note h2 {
  margin-block-end: var(--space-0);
}

.field-note > p {
  max-width: var(--reading-max);
  margin-block-end: var(--space-0);
  color: var(--color-muted);
  font-size: var(--text-md);
}

.product-detail {
  width: min(100%, var(--content-max));
  min-height: calc(100svh - var(--header-height));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(var(--space-0), 1.08fr) minmax(var(--space-0), 0.92fr);
  border-inline: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 22%, var(--transparent));
}

.detail-visual {
  position: sticky;
  inset-block-start: var(--header-height);
  align-self: start;
  min-height: calc(100svh - var(--header-height));
  display: grid;
  place-items: center;
  overflow: hidden;
  border-inline-end: var(--border-width) solid var(--color-border);
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ochre-pale) 38%, var(--transparent)), var(--transparent) 54%),
    var(--paper-deep);
}

.detail-visual::after {
  content: "";
  position: absolute;
  inset: var(--space-6);
  border: var(--border-width) solid color-mix(in srgb, var(--color-border-strong) 35%, var(--transparent));
  pointer-events: none;
}

.detail-visual-stage-slot {
  width: min(95%, var(--detail-visual-min));
}

.back-link {
  position: absolute;
  inset-block-start: var(--space-10);
  inset-inline-start: var(--space-10);
  z-index: 6;
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.detail-serial {
  position: absolute;
  inset-block-start: var(--space-10);
  inset-inline-end: var(--space-10);
  z-index: 6;
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
}

.detail-visual-note {
  position: absolute;
  inset-inline-start: var(--space-10);
  inset-block-end: var(--space-10);
  z-index: 6;
  margin: var(--space-0);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.detail-visual-note strong {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

.detail-copy {
  padding: var(--space-20) var(--space-12);
}

.detail-copy > h1 {
  margin-block-end: var(--space-4);
  font-size: var(--text-2xl);
}

.detail-price {
  margin-block-end: var(--space-8);
  color: var(--laden);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.detail-story {
  margin-block-end: var(--space-12);
  color: var(--color-muted);
  font-size: var(--text-md);
}

.variant-form {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-10);
  border-block: var(--border-width) solid var(--color-border);
}

.variant-form fieldset {
  padding: var(--space-0);
  border: var(--space-0);
}

.variant-form legend {
  padding: var(--space-0);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.variant-form legend span {
  margin-inline-end: var(--space-3);
  color: var(--laden);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.field-hint {
  margin-block: var(--space-1) var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.variant-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(var(--space-0), 1fr));
  gap: var(--space-2);
}

.variant-option {
  position: relative;
  min-width: var(--space-0);
  cursor: pointer;
}

.variant-option input {
  position: absolute;
  opacity: var(--opacity-zero);
  pointer-events: none;
}

.variant-option > span {
  min-height: calc(var(--control-min-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border-strong);
  transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}

.variant-option strong {
  color: var(--color-heading);
  font-size: var(--text-sm);
}

.variant-option small {
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--text-2xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variant-option input:checked + span {
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.variant-option input:checked + span strong,
.variant-option input:checked + span small {
  color: inherit;
}

.variant-option input:focus-visible + span {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.add-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
}

.quantity-field {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  border: var(--border-width) solid var(--color-border-strong);
}

.quantity-field span {
  padding-inline-start: var(--space-4);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.quantity-field input {
  width: calc(var(--control-min-height) + var(--space-4));
  min-height: var(--control-min-height);
  border: var(--space-0);
  color: var(--color-heading);
  background: var(--transparent);
  text-align: center;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.botanical-dossier {
  padding-block-start: var(--space-12);
}

.dossier-heading {
  margin-block-end: var(--space-6);
}

.dossier-heading h2 {
  margin-block-end: var(--space-0);
  font-size: var(--text-lg);
}

.botanical-dossier dl {
  border-block-start: var(--border-width-strong) solid var(--color-heading);
}

.botanical-dossier dl > div {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  gap: var(--space-6);
  padding-block: var(--space-4);
  border-block-end: var(--border-width) solid var(--color-border);
}

.botanical-dossier dt {
  color: var(--color-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.botanical-dossier dd {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.concept-label,
.honesty-note {
  margin-block-start: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-inline-start: var(--border-width-strong) solid var(--laden);
  color: var(--color-muted);
  background: var(--paper-deep);
  font-size: var(--text-xs);
}

.status-view {
  width: min(100%, var(--reading-max));
  min-height: calc(100svh - var(--header-height));
  margin-inline: auto;
  display: grid;
  align-content: center;
  justify-items: start;
  padding: var(--space-12);
}

.status-view h1 {
  margin-block-end: var(--space-4);
  font-size: var(--text-2xl);
}

.status-view p:not(.eyebrow) {
  color: var(--color-muted);
}

.drawer-veil {
  position: fixed;
  inset: var(--space-0);
  z-index: 78;
  background: color-mix(in srgb, var(--forest-deep) 66%, var(--transparent));
  opacity: var(--opacity-zero);
  transition: opacity var(--motion-base) var(--ease);
}

.drawer-veil.is-open {
  opacity: var(--opacity-solid);
}

.cart-drawer {
  position: fixed;
  inset-block: var(--space-0);
  inset-inline-end: var(--space-0);
  z-index: 80;
  width: min(100%, var(--drawer-width));
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--color-fg);
  background: var(--paper-raised);
  box-shadow: var(--shadow-md);
  transform: translateX(100%);
  transition: transform var(--motion-drawer) var(--ease-organic);
}

.cart-drawer.is-open {
  transform: translateX(var(--space-0));
}

.cart-drawer[hidden],
.drawer-veil[hidden] {
  display: none;
}

.drawer-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-8);
  border-block-end: var(--border-width) solid var(--color-border);
}

.drawer-head h2 {
  margin-block-end: var(--space-0);
}

.icon-button {
  width: var(--control-min-height);
  height: var(--control-min-height);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-heading);
  background: var(--transparent);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  cursor: pointer;
}

.cart-items {
  min-height: var(--space-0);
  overflow-y: auto;
  padding: var(--space-0) var(--space-8);
}

.empty-cart {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.empty-cart svg {
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  margin-block-end: var(--space-6);
  background: var(--laden-mist);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='currentColor'%3E%3Crect x='2.5' y='6' width='27' height='2.8'/%3E%3Crect x='2.5' y='4.6' width='2.2' height='5.6'/%3E%3Crect x='27.3' y='4.6' width='2.2' height='5.6'/%3E%3Cpath d='M7.5 9H9.7C11.6 15.98 9.2 21.71 7.7 24.5 6.2 21.71 5.6 15.98 7.5 9Z'/%3E%3Cpath d='M15.3 9H17.5C20.3 18.23 18.35 25.81 16.4 29.5 14.45 25.81 12.5 18.23 15.3 9Z'/%3E%3Cpath d='M22.8 9H25C26.6 13.5 25.95 17.2 24.6 19 23.25 17.2 21.2 13.5 22.8 9Z'/%3E%3Ccircle cx='24.6' cy='21.4' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='currentColor'%3E%3Crect x='2.5' y='6' width='27' height='2.8'/%3E%3Crect x='2.5' y='4.6' width='2.2' height='5.6'/%3E%3Crect x='27.3' y='4.6' width='2.2' height='5.6'/%3E%3Cpath d='M7.5 9H9.7C11.6 15.98 9.2 21.71 7.7 24.5 6.2 21.71 5.6 15.98 7.5 9Z'/%3E%3Cpath d='M15.3 9H17.5C20.3 18.23 18.35 25.81 16.4 29.5 14.45 25.81 12.5 18.23 15.3 9Z'/%3E%3Cpath d='M22.8 9H25C26.6 13.5 25.95 17.2 24.6 19 23.25 17.2 21.2 13.5 22.8 9Z'/%3E%3Ccircle cx='24.6' cy='21.4' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.empty-cart svg > * {
  display: none;
}

.empty-cart p {
  color: var(--color-muted);
}

.cart-item {
  display: grid;
  grid-template-columns: var(--cart-art-size) 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-block-end: var(--border-width) solid var(--color-border);
}

.cart-item-art {
  align-self: start;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-deep);
}

.cart-item-art .apotek-stage {
  transform: scale(1.32);
}

.cart-item-copy {
  min-width: var(--space-0);
}

.cart-item-copy h3 {
  margin-block-end: var(--space-1);
  font-size: var(--text-base);
}

.cart-item-copy > p:not(.eyebrow) {
  margin-block-end: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.cart-item-copy .cart-line-price {
  color: var(--color-heading);
  font-weight: var(--weight-bold);
}

.cart-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
}

.quantity-stepper {
  display: inline-grid;
  grid-template-columns: var(--control-min-height) var(--control-min-height) var(--control-min-height);
  align-items: center;
  border: var(--border-width) solid var(--color-border-strong);
}

.quantity-stepper button,
.remove-button {
  min-width: var(--control-min-height);
  min-height: var(--control-min-height);
  border: var(--space-0);
  color: var(--color-heading);
  background: var(--transparent);
  cursor: pointer;
}

.quantity-stepper span {
  text-align: center;
}

.remove-button {
  color: var(--color-negative);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

.cart-footer {
  padding: var(--space-6) var(--space-8) var(--space-8);
  border-block-start: var(--border-width-strong) solid var(--color-heading);
  background: var(--paper);
}

.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-4);
}

.cart-total span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.cart-total strong {
  color: var(--color-heading);
  font-size: var(--text-lg);
}

.disabled-checkout {
  width: 100%;
  cursor: not-allowed;
  opacity: var(--opacity-medium);
}

.cart-honesty {
  margin-block: var(--space-4) var(--space-0);
  color: var(--color-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-heading);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-8) max(var(--space-6), calc((100vw - var(--content-max)) / 2));
  border-block-start: var(--border-width) solid color-mix(in srgb, var(--paper) 22%, var(--transparent));
  color: var(--paper);
  background: var(--forest-deep);
  font-size: var(--text-xs);
}

.site-footer p {
  margin-block-end: var(--space-0);
}

.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--laden-lift);
  font-family: var(--font-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
}

.footer-mark svg {
  width: var(--logomark-footer-size);
  height: var(--logomark-footer-size);
  flex: 0 0 auto;
}

.site-footer p:last-child {
  max-width: var(--reading-max);
  color: var(--sage-soft);
  text-align: end;
}

.fallback-main {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: var(--space-12);
}

.fallback-hero {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  align-content: center;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.fallback-hero h1 {
  grid-column: 1;
  font-size: var(--text-hero);
}

.fallback-hero > p:not(.eyebrow) {
  grid-column: 1;
  color: var(--color-muted);
}

.fallback-botanical {
  grid-column: 2;
  grid-row: 1 / 5;
  color: var(--ink);
}

.fallback-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.fallback-nav a {
  min-height: var(--control-min-height);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
}

.fallback-catalog {
  padding-block: var(--space-12);
  border-block-start: var(--border-width) solid var(--color-border);
}

.fallback-catalog p {
  color: var(--color-muted);
}

.js-motion .motion-reveal {
  transition: transform var(--motion-bloom) var(--ease-organic), opacity var(--motion-bloom) var(--ease);
  transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger));
}

.js-motion .motion-reveal:not(.in-view) {
  opacity: var(--opacity-zero);
  transform: translateY(var(--space-5));
}

@supports not (container-type: inline-size) {
  .hero h1 {
    font-size: var(--text-hero);
  }

  @media (min-width: 54.01rem) {
    .hero h1 {
      font-size: clamp(3.4rem, 7.8vw, 7rem);
    }
  }
}

@media (min-width: 1728px) {
  .hero {
    position: relative;
  }

  .marj-rayi {
    position: absolute;
    inset-block-start: var(--space-12);
    inset-inline-start: calc((100vw - 100%) / -2 + var(--space-6));
    inline-size: calc(var(--space-16) + var(--space-2));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    pointer-events: none;
  }

  .marj-rayi__mark {
    inline-size: var(--space-6);
    block-size: var(--space-6);
    display: block;
    color: var(--laden);
  }

  .marj-rayi__mark svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
  }

  .marj-rayi__cizgi {
    inline-size: var(--border-width);
    block-size: var(--space-8);
    background: var(--color-border);
  }

  .marj-rayi__yazi,
  .marj-rayi__yil {
    color: var(--ink-faint);
    font-family: var(--font-label);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    line-height: var(--leading-heading);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
  }
}

@media (max-width: 68rem) {
  .site-nav {
    gap: var(--space-4);
  }

  .hero-copy,
  .apothecary-note,
  .ritual-index,
  .catalog-section,
  .field-note,
  .detail-copy {
    padding-inline: var(--space-8);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(var(--space-0), 1fr));
  }
}

@media (max-width: 68.75rem) {
  .apothecary-note > h2 {
    font-size: var(--text-approach-narrow);
  }
}

@media (max-width: 54rem) {
  .site-header {
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .hero,
  .product-detail {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    padding-block: var(--space-16);
  }

  .hero h1 {
    max-width: calc(var(--reading-max) - var(--space-24) - var(--space-4));
  }

  .hero-art {
    min-height: var(--detail-visual-min);
    border-inline-start: var(--space-0);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .apothecary-note,
  .ritual-index .section-heading,
  .field-note {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .apothecary-note {
    grid-template-areas:
      "title"
      "diagram"
      "copy";
  }

  .approach-copy {
    columns: 1;
  }

  .ritual-heading {
    grid-template-columns: auto 1fr;
  }

  .ritual-heading > p:last-child {
    grid-column: 2;
  }

  .detail-visual {
    position: relative;
    inset-block-start: auto;
    min-height: var(--detail-visual-min);
    border-inline-end: var(--space-0);
    border-block-end: var(--border-width) solid var(--color-border);
  }
}

@media (max-width: 37.49rem) {
  .hero {
    container-type: inline-size;
  }

  .hero-copy {
    display: contents;
  }

  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-intro,
  .hero-actions,
  .hero-notes {
    margin-inline: var(--space-5);
  }

  .hero-copy > .eyebrow {
    position: relative;
    order: 1;
    padding-block-start: var(--space-6);
    padding-inline-start: calc(var(--space-3) + var(--space-2));
  }

  .hero-copy > .eyebrow::before {
    position: absolute;
    inset-block-start: calc(var(--space-6) + var(--border-width));
    inset-inline-start: var(--space-0);
    margin-inline-end: var(--space-0);
  }

  .hero-copy > h1 {
    order: 2;
  }

  .hero-intro {
    order: 3;
  }

  .hero-actions {
    order: 4;
    margin-block-end: var(--space-6);
  }

  .hero-art {
    order: 5;
    width: 100%;
  }

  .hero-notes {
    order: 6;
    margin-block: var(--space-8) var(--space-12);
  }
}

@media (max-width: 42rem) {
  .brand-seal-band {
    height: auto;
    aspect-ratio: auto;
    padding-block: var(--space-8) calc(var(--space-12) + var(--space-4));
  }

  .brand-seal-band__lockup {
    position: relative;
    inset: auto;
    width: 100%;
    grid-template-areas:
      "seal wordmark"
      "sample sample";
    grid-template-columns: var(--space-16) minmax(var(--space-0), 1fr);
    justify-items: center;
  }

  .brand-seal-band__seal {
    grid-area: seal;
  }

  .brand-seal-band__wordmark {
    grid-area: wordmark;
  }

  .brand-seal-band__sample {
    grid-area: sample;
    width: var(--space-32);
    height: calc(var(--space-24) + var(--space-4));
    justify-self: center;
  }

  .site-header {
    min-height: auto;
    padding-inline: var(--space-4);
  }

  .site-nav {
    justify-content: space-between;
    gap: var(--space-2);
    overflow-x: auto;
  }

  .site-nav a {
    flex: 0 0 auto;
  }

  .hero-copy,
  .apothecary-note,
  .ritual-index,
  .catalog-section,
  .field-note,
  .detail-copy {
    padding-inline: var(--space-5);
  }

  .hero h1 em {
    margin-inline-start: var(--space-0);
  }

  .hero-notes {
    grid-template-columns: 1fr;
  }

  .hero-art {
    min-height: auto;
    aspect-ratio: 0.88;
  }

  .hero-art::after,
  .detail-visual::after {
    inset: var(--space-3);
  }

  .hero-art-note,
  .back-link {
    inset-block-start: var(--space-6);
    inset-inline-start: var(--space-6);
  }

  .detail-serial {
    inset-block-start: var(--space-6);
    inset-inline-end: var(--space-6);
  }

  .germination-caption,
  .detail-visual-note {
    inset-inline: var(--space-6);
    inset-block-end: var(--space-6);
  }

  .ritual-cards,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .ritual-cards li {
    border-inline-end: var(--space-0);
    border-block-end: var(--border-width) solid color-mix(in srgb, var(--paper) 30%, var(--transparent));
  }

  .catalog-heading {
    align-items: start;
    flex-direction: column;
  }

  .ritual-heading {
    gap: var(--space-4);
  }

  .ritual-heading > p:last-child {
    grid-column: 1 / -1;
  }

  .card-art {
    aspect-ratio: 1;
  }

  .variant-options {
    grid-template-columns: 1fr;
  }

  .variant-option small {
    white-space: normal;
  }

  .add-row {
    grid-template-columns: 1fr;
  }

  .quantity-field {
    justify-content: space-between;
  }

  .botanical-dossier dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .site-footer {
    flex-direction: column;
    padding-inline: var(--space-5);
  }

  .site-footer p:last-child {
    text-align: start;
  }

  .drawer-head,
  .cart-items,
  .cart-footer {
    padding-inline: var(--space-5);
  }

  .fallback-main {
    padding-inline: var(--space-5);
  }

  .fallback-hero {
    grid-template-columns: 1fr;
  }

  .fallback-hero h1,
  .fallback-hero > p:not(.eyebrow),
  .fallback-botanical {
    grid-column: 1;
  }

  .fallback-botanical {
    grid-row: auto;
  }
}

@media (min-width: 37.5rem) {
  .brand-seal-band {
    padding-inline: var(--space-12);
  }

}

@media (max-width: 25rem) {
  .header-logomark {
    width: var(--logomark-footer-size);
    height: var(--logomark-footer-size);
  }

  .wordmark-word {
    width: calc(var(--logo-width) * 0.75);
  }

  .cart-trigger-label {
    display: none;
  }

  .cart-item {
    grid-template-columns: 1fr;
  }

  .cart-item-art {
    width: var(--cart-art-size);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pollen-canvas {
    display: none;
  }

  .js-motion .germination .ink-line,
  .js-motion .germination:not(.is-grown) .ink-line {
    stroke-dashoffset: 0;
  }

  .js-motion .germination .botanical-bloom,
  .js-motion .germination .botanical-bud,
  .js-motion .germination .botanical-fruit,
  .js-motion .germination:not(.is-grown) .botanical-bloom,
  .js-motion .germination:not(.is-grown) .botanical-bud,
  .js-motion .germination:not(.is-grown) .botanical-fruit {
    opacity: var(--opacity-solid);
    transform: none;
  }

  .js-motion .motion-reveal,
  .js-motion .motion-reveal:not(.in-view) {
    opacity: var(--opacity-solid);
    transform: none;
  }

  .js-motion .germination.is-grown .otaci-seal,
  .cart-badge.is-seal-pressing,
  .ritual-numeral.is-seal-pressing {
    animation: none !important;
    opacity: var(--opacity-solid);
    transform: scale(1);
  }

  .js-motion .germination.is-grown .seal-halo,
  .cart-badge.is-seal-pressing::before,
  .ritual-numeral.is-seal-pressing::after {
    animation: none !important;
    opacity: var(--opacity-zero);
    transform: scale(0);
  }

  .js-motion .germination.is-grown .seal-grain,
  .cart-badge.is-seal-pressing::after,
  .ritual-numeral.is-seal-pressing > span::after {
    animation: none !important;
    opacity: var(--opacity-grain);
  }

  .product-card:hover .card-seal,
  .product-card a:focus-visible .card-seal,
  .product-card:hover .card-seal-veil,
  .product-card a:focus-visible .card-seal-veil,
  .product-card:hover .card-seal-grain,
  .product-card a:focus-visible .card-seal-grain {
    animation: none !important;
    opacity: var(--opacity-zero);
    transform: scale(1);
  }

  .product-card.is-card-seal-pressing .card-seal {
    animation: none !important;
    opacity: var(--opacity-hairline);
    transform: scale(1);
  }

  .product-card.is-card-seal-pressing .card-seal-veil {
    animation: none !important;
    opacity: var(--opacity-zero);
  }

  .product-card.is-card-seal-pressing .card-seal-grain {
    animation: none !important;
    opacity: var(--opacity-grain);
  }
}

.no-js .cart-trigger {
  display: none;
}