:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-slide: cubic-bezier(.165, .84, .44, 1);
  --motion-press: 160ms;
  --motion-menu: 200ms;
  --motion-indicator: 240ms;
  --motion-slide: 280ms;
}

.wrap { max-width: 1560px; }
.section { padding-block: clamp(60px, 7vw, 112px); }
.site-header { gap: 24px; }
.site-header > .brand {
  min-width: 0;
  max-width: 250px;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.site-nav { flex-shrink: 0; }
.nav-list { gap: clamp(20px, 2.4vw, 36px); }
.nav-list a { min-height: 44px; }
.nav-list a:hover { border-color: transparent; }
.nav-list a[aria-current],
.nav-list .current-menu-item > a { border-color: currentColor; }
.language-switch a { transition: color var(--motion-press) ease; }
.language-switch a[aria-current] { text-decoration-thickness: 2px; }

.button,
.menu-toggle {
  transition: transform var(--motion-press) var(--ease-out),
    background-color var(--motion-press) ease,
    border-color var(--motion-press) ease;
  touch-action: manipulation;
}
.button:hover { background: var(--ink); }
.button.light:hover { background: var(--paper); }
.button.outline:hover { background: transparent; }
.button:active,
.menu-toggle:active { transform: scale(.97); }
.text-link { text-underline-offset: 5px; }
.menu-icon { position: relative; display: block; width: 18px; height: 14px; }
.menu-icon span {
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform var(--motion-menu) var(--ease-out);
}
.menu-icon span:first-child { top: 3px; }
.menu-icon span:last-child { bottom: 3px; }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

.category-tabs {
  position: relative;
  flex-wrap: nowrap;
  gap: clamp(20px, 3vw, 40px);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin-bottom: 32px;
  overscroll-behavior-x: contain;
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
  border: 0;
  padding: 15px 3px;
  transition: color var(--motion-press) ease;
  touch-action: manipulation;
}
.category-tabs button[aria-selected="true"] { border-color: transparent; }
.category-tabs button:focus-visible { outline-offset: -3px; }
.category-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--ink);
  transform-origin: left;
  pointer-events: none;
  transition: transform var(--motion-indicator) var(--ease-in-out);
}
.is-enhanced .category-window { transition: none; }
.is-enhanced .category-track {
  transition: transform var(--motion-slide) var(--ease-slide);
}
.is-enhanced.is-instant .category-track,
.is-enhanced.is-instant .category-indicator { transition: none; }
.category-copy { padding-right: clamp(0px, 2vw, 24px); }
.category-copy p { max-width: 42ch; }

.product-card { min-width: 0; }
.product-card > a { display: block; }
.product-media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.product-card .product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--motion-slide) var(--ease-out);
}
.product-card h2 { font-size: clamp(21px, 2vw, 26px); line-height: 1.3; }
.product-card p { max-width: 46ch; line-height: 1.65; }
.product-detail h1,
.page-head h1 { text-wrap: balance; }
.filters a { transition: background-color var(--motion-press) ease; }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #405747; }
  .button.light:hover { background: #e7e9e2; }
  .button.outline:hover { background: #ffffff14; }
  .nav-list a:hover { border-color: currentColor; }
  .language-switch a:hover,
  .category-tabs button:hover { color: var(--ink); }
  .text-link:hover { border-bottom-width: 2px; padding-bottom: 7px; }
  .product-card > a:hover .product-media img { transform: scale(1.025); }
  .filters a:not([aria-current]):hover { background: #e7e9e2; }
}

@media (max-width: 900px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding-block: 16px;
  }
  .site-header > .brand { max-width: 230px; font-size: 20px; }
  .header-controls { grid-column: 2; gap: 8px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 10px; }
  .menu-toggle[hidden] { display: none; }
  .menu-label { font-size: 14px; }
  .site-nav {
    max-height: min(70svh, 540px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: top right;
    transform: translateY(0);
    box-shadow: 0 18px 24px -20px #25342d40;
    transition: opacity var(--motion-menu) var(--ease-out),
      transform var(--motion-menu) var(--ease-out),
      display var(--motion-menu) allow-discrete;
  }
  .site-nav[hidden] { opacity: 0; transform: translateY(-6px); }
  @starting-style {
    .site-nav { opacity: 0; transform: translateY(-6px); }
  }
}

@media (max-width: 480px) {
  .site-header > .brand { font-size: 18px; }
  .menu-toggle { min-width: 44px; min-height: 44px; justify-content: center; }
  .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .category-tabs { margin-bottom: 24px; }
  .category-copy { padding-right: 0; }
  .product-grid { grid-template-columns: 1fr; gap: 36px; }
  .product-card h2 { font-size: 23px; }
  .product-card p { font-size: 16px; }
  .footer-top { gap: 32px; }
  .footer-links { flex-direction: row; gap: 12px 24px; }
  .footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav { transform: none; }
  .button:active,
  .menu-toggle:active { transform: none; }
  .product-card > a:hover .product-media img { transform: none; }
}