:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 180ms;
  --motion-control: 260ms;
  --motion-image: 650ms;
}

html { scrollbar-color: #75816c var(--cream); }
input { caret-color: var(--orange); }
a { text-underline-offset: 4px; }
.price-row, #cart-total, #cart-count, .quantity-row { font-variant-numeric: tabular-nums; }
.header {
  position: sticky;
  top: 0;
  transition: box-shadow var(--motion-control) ease;
}
.header.is-scrolled { box-shadow: 0 5px 20px #13261b0d; }
.hero-image { animation: none; }
.hero-line { display: block; color: inherit; }
.hero-line > span { display: inline-block; color: inherit; }
.hero-line:last-child { color: var(--orange); }
.hero-content h1 { margin-top: 19px; }
.hero-content { padding-top: 73px; }
.product-card { animation: none; }
.product-visual, .story-image::before {
  transition: transform var(--motion-image) var(--motion-ease);
}
.product-card:hover .product-visual, .story-card:hover .story-image::before { transform: none; }
.quick-add { width: 44px; height: 44px; }
.quick-add:hover { transform: none; }
.quick-add.is-added { background: var(--green); color: var(--cream); }
.quick-add .icon { width: 18px; height: 18px; }
.kit-item { transition: background var(--motion-fast), border-color var(--motion-fast); }
.kit-add-btn {
  transition: background var(--motion-control), color var(--motion-control), border-color var(--motion-control), transform var(--motion-fast) var(--motion-ease);
}
.kit-add-btn:hover { transform: none; }
.kit-add-btn.is-added { background: var(--green); color: var(--cream); }
.kit-add-btn .icon { width: 18px; height: 18px; }
.button {
  position: relative;
  overflow: hidden;
  transition: background var(--motion-control), color var(--motion-control), transform var(--motion-fast) var(--motion-ease);
}
.button:hover { transform: none; }
.button .icon, .text-link .icon, .story-link .icon, .email-field .icon, .kit-reset-link .icon {
  transition: transform var(--motion-control) var(--motion-ease);
}
.button:active, .quick-add:active, .kit-add-btn:active { transform: translateY(1px); }
.filter { transition: color var(--motion-fast), background var(--motion-fast), border-color var(--motion-fast); }
.filter:disabled, button:disabled { opacity: 0.45; }
.filter.active { box-shadow: inset 0 -2px 0 var(--orange); }
.product-details, .product-meta, .price-row del, .catalog-note { color: #5c6656; }
.story-meta, .story-meta span, .journal-intro { color: #5c6656; }
.story-link { position: relative; }
.story-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--motion-ease);
}
.email-field { position: relative; }
.email-field::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 340ms var(--motion-ease);
}
.email-field:focus-within::after { transform: scaleX(1); }
.email-field input:focus-visible { outline-offset: 5px; }
.collection-product { mask-image: none; transform: none; mix-blend-mode: darken; }
.collection-art { background: #e4e6d9; }
.collection-copy h2 { margin-top: 0; }
.collection-copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.collection-foot { align-self: stretch; }
.newsletter h2 { margin-top: 0; }
.quantity-row button { min-width: 40px; min-height: 40px; }
.quantity-row .remove-item { padding-inline: 8px; }
.toast { transition: opacity var(--motion-control), transform 360ms var(--motion-ease); }
.toast:popover-open { inset: auto auto 25px 50%; margin: 0; border: 0; }
dialog { overscroll-behavior: contain; }
dialog[open]::backdrop { animation: backdrop-enter 260ms ease-out; }
dialog.is-leaving::backdrop { animation: backdrop-exit 160ms ease-in both; }
.mobile-nav:not([hidden]) { animation: menu-enter 220ms var(--motion-ease); }
.mobile-menu-toggle[aria-expanded='true'] { background: #e7e9df; }
.search-result { transition: background var(--motion-fast); }
.search-result .icon { transition: transform var(--motion-control) var(--motion-ease); }

@media (hover: hover) and (pointer: fine) {
  .button:hover .icon, .text-link:hover .icon, .story-card:hover .story-link .icon,
  .email-field button:hover .icon, .search-result:hover > .icon, .kit-reset-link:hover > .icon { transform: translateX(4px); }
  .product-card:hover .product-visual { transform: scale(1.035); }
  .story-card:hover .story-image::before { transform: scale(1.035); }
  .story-card:hover .story-link::after { transform: scaleX(1); }
}
.story-card:focus-visible .story-link::after { transform: scaleX(1); }

@media (min-width: 801px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-image { height: calc(100% + 64px); top: -32px; translate: 0 var(--river-drift, 0px); }
}
@media (max-width: 800px) {
  .hero-content { padding-top: 72px; }
  .hero-line > span { max-width: 100%; }
}
@media (max-width: 520px) {
  .hero-content { padding-top: 58px; }
  .hero-content h1 { margin-top: 17px; }
  .quick-add, .kit-add-btn { width: 44px; height: 44px; }
  .quick-add { bottom: 8px; right: 8px; }
  .filter { min-height: 44px; }
  .product-card h3 { font-size: 14px; line-height: 1.4; }
  .product-details { font-size: 12px; }
  .price-row strong { font-size: 14px; }
  .quantity-row button { min-width: 44px; min-height: 44px; }
  .search-field input, .email-field input { font-size: 16px; }
}
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-exit { to { opacity: 0; } }
@keyframes menu-enter { from { opacity: 0.3; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-image { translate: none; transform: none; }
  .button:active, .quick-add:active, .kit-add-btn:active, .button:hover .icon, .text-link:hover .icon,
  .story-card:hover .story-link .icon, .email-field button:hover .icon, .kit-reset-link:hover > .icon,
  .search-result:hover > .icon, .product-card:hover .product-visual,
  .story-card:hover .story-image::before { transform: none; }
  dialog[open]::backdrop, dialog.is-leaving::backdrop, .mobile-nav:not([hidden]) { animation: none; }
}