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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* No double-tap-zoom delay on controls. */
a,
button,
select,
summary,
label {
  touch-action: manipulation;
}

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

/* No page scroll behind an open modal, drawer or checkout. */
body:has(dialog[open]) {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Component display rules must never override the hidden attribute. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 4px;
}

.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: var(--space-1) var(--space-2);
  background: var(--color-charcoal);
  color: var(--color-porcelain);
  z-index: 200;
}

.skip-link:focus {
  top: var(--space-1);
}

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-porcelain);
  border-bottom: var(--border-hairline);
}

.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-height);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-charcoal-muted);
  transition: color var(--transition);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background: var(--color-charcoal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-charcoal);
}

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

/* Desktop: the panel dissolves so the links sit in the header grid; the menu button and its extras are hidden. */
.nav-panel {
  display: contents;
}

.nav-panel-head,
.nav-toggle,
.nav-backdrop {
  display: none;
}

.cart-link {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: var(--space-1);
  margin-right: calc(-1 * var(--space-1));
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.cart-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

.cart-count {
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Hero */
.hero {
  padding-block: var(--hero-y);
  border-bottom: var(--border-hairline);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.hero h1 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
}

.hero-lede {
  max-width: 38rem;
  margin: var(--space-5) 0 var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  color: var(--color-charcoal-muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* a button stretched to a full row (phone forms, editor) keeps its label in the middle */
  gap: var(--space-2);
  padding: 1.1rem 2.25rem;
  border: 1px solid var(--color-slate); /* the button colour of the design settings (default: the text colour) */
  background: var(--color-slate);
  color: var(--color-porcelain);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.button:hover {
  background: transparent;
  color: var(--color-slate);
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.button:disabled:hover {
  background: var(--color-slate);
  color: var(--color-porcelain);
}

.button-outline {
  background: transparent;
  color: var(--color-slate);
}

.button-outline:hover {
  background: var(--color-slate);
  color: var(--color-porcelain);
}

.button-outline:disabled:hover {
  background: transparent;
  color: var(--color-slate);
}

.button-block {
  width: 100%;
  justify-content: center;
}

.text-button {
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--color-charcoal-muted);
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-button:hover {
  color: var(--color-charcoal);
}

.button-arrow {
  transition: transform var(--transition);
}

.button:hover .button-arrow {
  transform: translateX(4px);
}

/* Catalog */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.catalog {
  padding-block: var(--section-y);
  scroll-margin-top: var(--nav-height);
}

.catalog-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.catalog-note {
  color: var(--color-charcoal-muted);
}

.catalog-message {
  grid-column: 1 / -1;
  padding: var(--space-5) var(--space-3);
  background: var(--color-porcelain);
  color: var(--color-charcoal-muted);
  text-align: center;
}

.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-block: var(--space-4) var(--space-4);
}

/* one row per category level: the top level, then the subcategories of the chosen one */
.filter-row {
  display: flex;
  gap: var(--space-1);
  padding-bottom: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.filter-row + .filter-row .pill {
  padding-block: 0.45rem;
  font-size: var(--text-xs);
}

.pill {
  flex: none;
  padding: 0.6rem 1.25rem;
  border: var(--border-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pill:hover {
  border-color: var(--color-charcoal);
}

.pill[aria-pressed="true"] {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-porcelain);
}

/* 1px dividers come from a 1px gap over a divider-coloured backdrop. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-divider);
  border: var(--border-hairline);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-porcelain);
  content-visibility: auto;
  contain-intrinsic-size: auto 30rem;
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: var(--border-hairline);
}

.product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 320ms ease;
}

.product-card:hover .product-media img {
  transform: scale(1.03);
}

.product-flag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 0.25rem 0.7rem;
  background: var(--color-porcelain);
  border: var(--border-hairline);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-3);
}

.product-category {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.product-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.product-price {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.product-stock {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  color: var(--color-charcoal-muted);
}

.product-stock.is-low {
  color: #8a5a00;
}

.product-stock.is-out {
  color: var(--color-error);
  font-weight: var(--weight-semibold);
}

.product-actions {
  display: grid;
  gap: var(--space-1);
  margin-top: auto;
}

.button-small {
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: var(--text-xs);
}

/* Details dialog */
.product-dialog {
  width: min(70rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--space-3));
  padding: 0;
  border: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  overflow: auto;
}

.product-dialog::backdrop {
  background: rgba(43, 47, 54, 0.45);
}

.dialog-close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-2);
  z-index: 1;
  padding: 0 0.5rem;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  font-size: 2rem;
  line-height: var(--leading-ui);
  cursor: pointer;
}

/* A compact picture column and a roomy text column, so the text keeps its line breaks from size to size and tab to tab. */
.dialog-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr);
}

@media (max-width: 56rem) {
  .dialog-layout {
    grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr);
  }
}

/* Pictures: one frame in the shop's 4:5 format; with several pictures they scroll sideways and snap (swipe, arrows, thumbnails). */
.dialog-gallery {
  min-width: 0;
  border-right: var(--border-hairline);
  background: var(--color-porcelain);
}

/* the pictures stay in view while the text scrolls, and stop at the bottom of their column (never over the recommendations) */
.gallery-sticky {
  position: sticky;
  top: 0;
}

.gallery-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-field);
}

.gallery-track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-track:focus-visible {
  outline: 1px solid var(--color-charcoal);
  outline-offset: -4px;
}

.gallery-track li {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery-track img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-top: calc(var(--touch) / -2);
  padding: 0;
  border: var(--border-hairline);
  border-radius: 999px;
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition), background var(--transition), color var(--transition);
}

.gallery-arrow[hidden] {
  display: none;
}

.gallery-prev { left: var(--space-2); }
.gallery-next { right: var(--space-2); }

.gallery-stage:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}

.gallery-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse), (max-width: 40rem) {
  .gallery-arrow {
    opacity: 1;
  }

  .gallery-arrow:disabled {
    opacity: 0;
  }
}

@media (hover: hover) {
  .gallery-arrow:hover:not(:disabled) {
    background: var(--color-slate);
    color: var(--color-porcelain);
  }
}

.gallery-count {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  margin: 0;
  padding: 0.2rem 0.65rem;
  background: var(--color-porcelain);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: var(--leading-ui);
}

.gallery-thumbs {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  overflow-x: auto;
  border-top: var(--border-hairline);
  scrollbar-width: thin;
}

.gallery-thumbs[hidden] {
  display: none;
}

.gallery-thumbs li {
  flex: none;
}

.gallery-thumbs button {
  display: block;
  width: 4.5rem;
  padding: 0;
  border: 1px solid var(--color-line, rgba(43, 47, 54, 0.14));
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition), border-color var(--transition);
}

.gallery-thumbs button[aria-current="true"] {
  border-color: var(--color-charcoal);
  opacity: 1;
}

@media (hover: hover) {
  .gallery-thumbs button:hover {
    opacity: 1;
  }
}

.gallery-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* tabs for product details / product information inside the detail view */
.dialog-tabs {
  margin-block: var(--space-3) var(--space-1);
}

.dialog-tabs[hidden] {
  display: none;
}

/* Both tabs sit in one grid cell, so the window is as high as the taller one: switching tabs (or sizes) never moves the buttons below. */
.dialog-panels {
  display: grid;
}

.dialog-panels > [role="tabpanel"] {
  grid-area: 1 / 1;
}

/* the hidden attribute always wins in this stylesheet, so the inactive tab is marked with a class instead */
.dialog-panels > [role="tabpanel"].is-inactive {
  visibility: hidden;
}

/* the tab strip already draws the line above the first row */
.dialog-tabs:not([hidden]) + .dialog-panels .dialog-facts div:first-child {
  border-top: 0;
}

.dialog-fact-value {
  white-space: pre-line;
}

.dialog-content {
  padding: var(--space-4);
}

.dialog-content h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
}

.dialog-price {
  margin: var(--space-2) 0;
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-variant-numeric: tabular-nums;
}

.dialog-desc {
  margin: 0 0 var(--space-3);
  color: var(--color-charcoal-muted);
  white-space: pre-line; /* paragraphs of the description */
}

.dialog-stock {
  margin: 0;
  font-size: var(--text-sm);
}

.dialog-id {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-charcoal-muted);
}

.dialog-actions {
  margin-top: var(--space-3);
}

/* Recommendations in the product detail view */
.recs {
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-4) var(--space-4);
  border-top: var(--border-hairline);
  background: var(--color-field);
}

.recs h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.recs-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.03em;
  color: var(--color-charcoal-muted);
}

.recs-icon {
  flex: none;
  color: var(--color-charcoal);
  transform-origin: 50% 50%;
  animation: recs-pulse 1.8s ease-in-out infinite;
}

.recs-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: recs-blink 1.2s ease-in-out infinite;
}

.recs-dot-2 {
  animation-delay: 0.4s;
}

@keyframes recs-pulse {
  0%, 100% { transform: scale(0.82) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

@keyframes recs-blink {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}

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

.rec-card {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
  border: var(--border-hairline);
  background: var(--color-porcelain);
}

.rec-thumb {
  align-self: start;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: var(--border-hairline);
}

.rec-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rec-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rec-body .product-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
}

.ai-tag {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--color-charcoal-muted);
  border-radius: 999px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--color-charcoal-muted);
}

.rec-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.rec-price {
  margin: 0.25rem 0 0.5rem;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.rec-reason {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-charcoal-muted);
}

.rec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

.rec-actions .button-small {
  padding: 0.55rem 0.9rem;
}

@media (max-width: 52rem) {
  .recs {
    padding: var(--space-3);
  }

  .recs-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .recs-icon,
  .recs-dot {
    animation: none;
  }
}

/* Cart counter feedback */
.cart-count.is-bumped {
  animation: bump 360ms ease;
}

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); background: var(--color-charcoal); color: var(--color-porcelain); }
  100% { transform: scale(1); }
}

/* Cart drawer */
.cart-drawer {
  inset: 0 0 0 auto;
  margin: 0;
  padding: 0;
  width: min(var(--drawer-width), 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  border-left: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
}

.cart-drawer[open] {
  animation: drawer-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cart-drawer[open]::backdrop {
  animation: fade-in 260ms ease;
}

.cart-drawer.is-closing {
  animation: drawer-out 220ms ease forwards;
}

.cart-drawer.is-closing::backdrop {
  animation: fade-out 220ms ease forwards;
}

.cart-drawer::backdrop {
  background: rgba(43, 47, 54, 0.45);
}

@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes drawer-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }

.drawer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--nav-height);
  padding-inline: var(--space-3) var(--space-2);
  border-bottom: var(--border-hairline);
}

.drawer-header h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
}

.drawer-header .dialog-close {
  position: static;
}

.drawer-notices,
.review-notices {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline);
  background: var(--color-field);
  font-size: var(--text-sm);
}

.drawer-notices p,
.review-notices p {
  margin: 0;
}

.drawer-notices p + p,
.review-notices p + p {
  margin-top: var(--space-1);
}

.cart-lines {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: var(--border-hairline);
}

.cart-line-img {
  width: 4.5rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border-hairline);
}

.cart-line-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.cart-line-price {
  margin: 0.25rem 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
  font-variant-numeric: tabular-nums;
}

.cart-line-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cart-line-total {
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: var(--border-hairline);
}

.qty-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  font: inherit;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition);
}

.qty-btn:hover {
  background: var(--color-divider);
}

.qty-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
}

.qty-btn[aria-disabled="true"]:hover {
  background: transparent;
}

.qty-value {
  min-width: 2rem;
  text-align: center;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.cart-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--color-charcoal-muted);
  text-align: center;
}

.cart-empty p {
  margin: 0;
}

.drawer-footer {
  padding: var(--space-3);
  border-top: var(--border-hairline);
  background: var(--color-porcelain);
}

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.total-row strong {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
}

.drawer-note {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

/* Checkout overlay */
.checkout {
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  overflow-y: auto;
}

.checkout::backdrop {
  background: var(--color-porcelain);
}

.checkout[open] {
  animation: fade-in 200ms ease;
}

.checkout-header {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-porcelain);
  border-bottom: var(--border-hairline);
}

.checkout-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.checkout-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--view-y);
}

.checkout-primary h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.steps {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.steps li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid transparent;
}

.steps li[aria-current="step"] {
  color: var(--color-charcoal);
  border-bottom-color: var(--color-charcoal);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-hairline);
  border-radius: 999px;
  font-size: var(--text-xs);
}

.steps li[aria-current="step"] .step-num {
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-porcelain);
}

.steps li.is-done .step-num {
  border-color: var(--color-charcoal);
}

.demo-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  color: var(--color-charcoal-muted);
}

.step-title {
  margin: 0 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.step-title:focus {
  outline: none;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-2);
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
}

.billing-fields {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* the rule sits on the legend (like the "Lieferadresse" title), not on the fieldset: a fieldset border is cut open by its legend */
.billing-fields legend {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: var(--border-hairline);
}

.data-note,
.field-hint.data-note {
  margin: 0 0 var(--space-3); /* the same two-class rule as .field-hint, so the gap below the note is not lost */
}

.data-note a {
  color: var(--color-charcoal);
  text-underline-offset: 3px;
}

.optional {
  color: var(--color-charcoal-muted);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="url"],
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  line-height: var(--leading-ui);
  transition: border-color var(--transition);
}

.field input:hover,
.field select:hover {
  border-color: var(--color-charcoal-muted);
}

.field input:focus,
.field select:focus {
  border-color: var(--color-charcoal);
  outline: 1px solid var(--color-charcoal);
  outline-offset: 0;
}

.field input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field-error {
  margin: 0.35rem 0 0;
  min-height: 1.1em;
  font-size: var(--text-xs);
  color: var(--color-error);
}

.field-error:empty {
  min-height: 0;
  margin: 0;
}

.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.review-block {
  margin-bottom: var(--space-4);
}

.review-block h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.review-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.review-address {
  padding: var(--space-2);
  border: var(--border-hairline);
  font-style: normal;
  line-height: var(--leading-body);
}

.checks {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--border-hairline);
}

.checks li {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.checks li + li {
  border-top: var(--border-hairline);
}

.checks li::before {
  flex: none;
  width: 1.1rem;
  text-align: center;
}

.checks .is-ok::before { content: "\2713"; color: var(--color-ok); }
.checks .is-fail::before { content: "\2715"; color: var(--color-error); }
.checks .is-fail { color: var(--color-error); }
.checks .is-pending::before { content: "\2026"; color: var(--color-charcoal-muted); }
.checks .is-pending { color: var(--color-charcoal-muted); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  cursor: pointer;
}

/* inside a .field the generic ".field label" rule (display: block) would win over .checkbox: keep the box and its text side by side */
.field label.checkbox {
  display: flex;
  margin-bottom: 0;
}

.checkbox input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--color-charcoal);
}

.checkout-summary {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-3));
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-field);
}

.checkout-summary h3 {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
}

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

.summary-line {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-1);
}

.summary-line img {
  width: 3rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border-hairline);
}

.summary-line p {
  margin: 0;
  font-size: var(--text-sm);
}

.summary-line-qty {
  color: var(--color-charcoal-muted);
  font-size: var(--text-xs) !important;
}

.summary-line-total {
  font-variant-numeric: tabular-nums;
}

.summary-totals {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.summary-totals div {
  display: flex;
  justify-content: space-between;
  padding-block: 0.2rem;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.summary-totals dt,
.summary-totals dd {
  margin: 0;
}

.summary-totals .grand {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--border-strong);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.checkout-summary .drawer-note {
  margin-bottom: 0;
}

/* Promo code (cart drawer and checkout summary) */
.promo-slot {
  margin-bottom: var(--space-2);
}

.promo-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.promo-row {
  display: flex;
  gap: var(--space-1);
}

.promo-input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.promo-input::placeholder {
  text-transform: none;
  letter-spacing: 0;
}

.promo-input:hover {
  border-color: var(--color-charcoal-muted);
}

.promo-input:focus {
  border-color: var(--color-charcoal);
  outline: 1px solid var(--color-charcoal);
  outline-offset: 0;
}

.promo-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.promo-row .button {
  flex: none;
}

.promo-applied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-ok);
}

.promo-chip {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
}

.promo-applied {
  align-items: center;
}

.promo-applied .text-button {
  flex: none;
  white-space: nowrap;
}

.promo-code-tag {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}

.promo-message {
  margin: 0.35rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.promo-message:empty {
  display: none;
}

.promo-message.is-error {
  color: var(--color-error);
}

.saving dt,
.saving dd {
  color: var(--color-ok);
}

.cart-discount-lines {
  margin-top: 0;
  margin-bottom: var(--space-1);
}

/* Payment (Stripe Payment Element) */
.payment-element {
  min-height: 0;
}

.payment-status {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.test-notice {
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-charcoal-muted);
  font-size: var(--text-sm);
}

#payment-error {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

/* "Wird verarbeitet …" loading state on the order button */
.button.is-loading {
  gap: var(--space-1);
  opacity: 1;
  cursor: progress;
}

.button.is-loading::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Account: portal and dashboard */
.account-main {
  padding-block: var(--view-y);
}

.account-main h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.account-main h2:focus {
  outline: none;
}

#auth-portal {
  max-width: 30rem;
}

.tabs {
  display: flex;
  margin-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
}

.tab {
  flex: 1;
  margin-bottom: -1px;
  padding: var(--space-2) var(--space-1);
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--color-charcoal-muted);
  font: inherit;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.tab:hover {
  color: var(--color-charcoal);
}

.tab[aria-selected="true"] {
  color: var(--color-charcoal);
  border-bottom-color: var(--color-charcoal);
}

.auth-form .field {
  margin-bottom: var(--space-3);
}

.auth-form .field-grid .field {
  margin-bottom: 0;
}

.auth-form .field-grid {
  margin-bottom: var(--space-3);
}

.field-hint {
  margin: 0.35rem 0 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.pw-toggle {
  margin-top: 0.35rem;
  font-size: var(--text-xs);
}

.form-error {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.form-notice {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: var(--border-hairline);
  background: var(--color-field);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.account-card,
.orders {
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-field);
}

.account-card h3,
.orders h3 {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
}

.account-details {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.account-details div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.3rem;
}

.account-details dt {
  color: var(--color-charcoal-muted);
}

.account-details dd {
  margin: 0;
  text-align: right;
  word-break: break-word;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding-bottom: var(--space-2);
}

.address-zone {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.address-zone h4 {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.address-details dd {
  white-space: pre-line;
}

.address-details div {
  align-items: flex-start;
}

.address-zone .billing-fields {
  margin: var(--space-2) 0 0;
  padding: 0;
  border: 0;
}

.form-subtitle {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.inline-form {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.inline-form .field {
  margin-bottom: var(--space-2);
}

.inline-form .step-actions {
  margin-top: var(--space-2);
}

.danger-zone {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-hairline);
}

.danger-zone h4 {
  margin: 0 0 0.35rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.danger-zone p {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.text-button.danger {
  color: var(--color-error);
}

.button-danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-porcelain);
}

.button-danger:hover {
  background: transparent;
  color: var(--color-error);
}

.table-wrap {
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.orders-table th {
  padding: 0 var(--space-2) var(--space-1) 0;
  border-bottom: var(--border-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-align: left;
  text-transform: uppercase;
}

.orders-table td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: var(--border-hairline);
  vertical-align: top;
}

.orders-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.orders-table .order-no {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.orders-table .order-no:has(.order-no-text) {
  white-space: normal;
}

.orders-table .order-no-text {
  white-space: nowrap;
}

/* badges and buttons after the number: a gap on both sides, and they may wrap to the next line */
.orders-table .order-no .badge,
.orders-table .order-no .text-button {
  display: inline-block;
  margin: 0.15rem 0.5rem 0.15rem 0;
  vertical-align: middle;
}

.orders-table .order-no-text {
  margin-right: 0.5rem;
}

.order-ship {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.confirmation-addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-field);
  text-align: left;
}

.confirmation-addresses h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.confirmation-addresses address {
  font-style: normal;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  word-break: break-word;
}

@media (max-width: 40rem) {
  .confirmation-addresses {
    grid-template-columns: 1fr;
  }
}

.orders-empty {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--color-charcoal-muted);
}

.orders-empty p {
  margin: 0 0 var(--space-2);
}

@media (max-width: 60rem) {
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

/* Orders become stacked cards on small screens. */
@media (max-width: 40rem) {
  .orders-table thead {
    display: block; /* a table row group ignores overflow: the hidden header cells would widen the page */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .orders-table,
  .orders-table tbody,
  .orders-table tr,
  .orders-table td {
    display: block;
  }

  .orders-table tr {
    padding: var(--space-1) 0;
    border-bottom: var(--border-hairline);
  }

  .orders-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0.35rem 0;
    border: 0;
    text-align: right;
  }

  .orders-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--color-charcoal-muted);
    text-align: left;
  }

  .orders-table td[data-label=""]::before {
    content: none;
  }

  /* the number cell is monospace; its label is not */
  .orders-table td.order-no::before {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
  }

  /* the items of an order (admin details) have no row labels: they stay a real table with its header, four short columns */
  .orders-table.od-items {
    display: table;
    width: 100%;
  }

  .orders-table.od-items thead {
    display: table-header-group;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .orders-table.od-items tbody {
    display: table-row-group;
  }

  .orders-table.od-items tr {
    display: table-row;
    padding: 0;
  }

  .orders-table.od-items th,
  .orders-table.od-items td {
    display: table-cell;
    padding: 0.35rem 0.5rem 0.35rem 0;
    border-bottom: var(--border-hairline);
    text-align: left;
    vertical-align: top;
  }

  .orders-table.od-items th.num,
  .orders-table.od-items td.num {
    text-align: right;
  }

  .orders-table.od-items td::before {
    content: none;
  }

  /* admin list: the first cell is the card title (number, badges, details link, date) and needs no label of its own */
  .orders-table td.order-no:has(.order-no-text) {
    display: block;
    text-align: left;
    padding-top: 0;
  }

  .orders-table td.order-no:has(.order-no-text)::before {
    content: none;
  }

  .orders-table td.order-no:has(.order-no-text) .order-ship {
    text-align: left;
  }

  .orders-table td.order-no:has(.order-no-text) .badge,
  .orders-table td.order-no:has(.order-no-text) .text-button {
    margin-right: var(--space-1);
  }
}

/*
 * Account overlay has two modes (data-mode on the dialog):
 *   drawer: signed out, slides in from the right like the cart
 *   page:   the signed-in dashboard, a full-screen view
 */
.account[data-mode="drawer"] {
  inset: 0 0 0 auto;
  width: min(30rem, 100vw);
  border-left: var(--border-hairline);
}

.account[data-mode="drawer"]::backdrop {
  background: rgba(43, 47, 54, 0.45);
}

.account[data-mode="drawer"][open] {
  animation: drawer-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.account[data-mode="drawer"][open]::backdrop {
  animation: fade-in 260ms ease;
}

.account[data-mode="drawer"].is-closing {
  animation: drawer-out 220ms ease forwards;
}

.account[data-mode="drawer"].is-closing::backdrop {
  animation: fade-out 220ms ease forwards;
}

.account .when-drawer,
.account[data-mode="drawer"] .when-page {
  display: none;
}

.account[data-mode="drawer"] .when-drawer {
  display: inline;
}

.account[data-mode="drawer"] .checkout-header .brand {
  display: none;
}

.account[data-mode="drawer"] .checkout-header-inner {
  justify-content: flex-end;
}

.account[data-mode="drawer"] .account-main {
  padding-block: var(--space-4);
}

.account[data-mode="drawer"] .account-main h2 {
  margin-bottom: var(--space-3);
  font-size: 2rem;
}

.account[data-mode="drawer"] .container {
  padding-inline: var(--space-3);
}

/* Admin dashboard */
.admin-tag {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: var(--border-strong);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wide);
  vertical-align: 1px;
}

.admin-main {
  padding-block: var(--view-y);
}

.admin-main h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.admin-main h2:focus {
  outline: none;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 var(--space-4);
  background: var(--color-divider);
  border: var(--border-hairline);
}

.metric {
  padding: var(--space-3);
  background: var(--color-field);
}

.metric.is-alert {
  box-shadow: inset 0 3px 0 #b7791f;
}

.metric-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.metric-value {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  line-height: var(--leading-display);
  font-variant-numeric: tabular-nums;
}

.metric-sub {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.admin-panel {
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-field);
}

.admin-panel h3 {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
}

.admin-table td {
  vertical-align: middle;
}

/* Dense spreadsheet feel: tighter cell padding so both tables fit side by side. */
.admin-table th,
.admin-table td {
  padding-right: var(--space-1);
}

.admin-table td {
  padding-block: 0.75rem;
}

.admin-table .order-no {
  font-size: 0.7rem;
}

.inventory-table td:first-child {
  min-width: 7rem;
}

.badge,
.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  white-space: nowrap;
}

.badge-paid { color: var(--color-ok); }
.badge-pending { color: var(--color-charcoal-muted); }
.badge-failed { color: var(--color-error); }

/* Refund form under an order row, and the attention list on the dashboard */
.refund-row > td { background: var(--color-field); padding: var(--space-3); }
.refund-form { display: grid; gap: var(--space-2); max-width: 36rem; }
.refund-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.admin-attention { border-left: 3px solid #b7791f; }
.admin-attention .admin-list-row button { margin-left: auto; }
.mail-fail-row .admin-list-side { text-align: left; flex-basis: 100%; }
.mail-fail-actions { display: flex; gap: var(--space-2); flex-basis: 100%; }

.tag-holder {
  display: block;
  margin-top: 0.25rem;
}

.tag-low { color: #8a5a00; }
.tag-out { color: var(--color-error); font-weight: var(--weight-semibold); }

.inventory-table tr.is-out td:first-child {
  box-shadow: inset 3px 0 0 var(--color-error);
}

.status-select,
.cell-input {
  padding: 0.45rem 0.6rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.status-select {
  min-width: 8.75rem;
  border-left-width: 4px;
  cursor: pointer;
}

.status-select.fs-processing { border-left-color: #b7791f; }
.status-select.fs-shipped { border-left-color: #3b6ea5; }
.status-select.fs-delivered { border-left-color: var(--color-ok); }

.cell-input {
  width: 4.5rem;
  padding-inline: 0.5rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.status-select:focus,
.cell-input:focus {
  border-color: var(--color-charcoal);
  outline: 1px solid var(--color-charcoal);
  outline-offset: 0;
}

.cell-input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.status-select:disabled {
  opacity: 0.5;
  cursor: progress;
}

.row-error {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: var(--color-error);
}

.row-error:empty {
  display: none;
}

.inventory-table .button-small,
.promo-table .button-small {
  padding: 0.5rem 0.7rem;
  letter-spacing: 0.1em;
}

/* Promo code management */
.admin-promos {
  margin-top: var(--space-4);
}

.admin-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

/* a long explanation that most visits do not need: closed by default, so the list stays at the top */
.admin-help {
  margin: 0 0 var(--space-2);
}

.admin-help summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
}

.admin-help summary:hover {
  color: var(--color-charcoal);
}

.admin-help summary:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 2px;
}

.promo-create {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.promo-create-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.promo-create-field label {
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.promo-create .cell-input {
  width: 9rem;
  text-align: left;
}

.promo-create #promo-new-min {
  width: 8rem;
  text-align: right;
}

.promo-create #promo-new-until {
  width: 10.5rem;
}

.promo-create-once {
  align-items: center;
  min-height: var(--touch);
  font-size: var(--text-sm);
}

.promo-create-once input {
  margin: 0;
}

.promo-create #promo-new-code {
  text-transform: uppercase;
}

.promo-create #promo-new-value {
  width: 6rem;
  text-align: right;
}

.promo-table .promo-code-cell {
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
}

.promo-table tr.is-off .promo-code-cell {
  color: var(--color-charcoal-muted);
  text-decoration: line-through;
}

@media (max-width: 70rem) {
  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 40rem) {
  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-table .cell-input {
    width: 8rem;
  }

  /* "In Bearbeitung" at 16px needs more than 8rem, or the end of the word runs under the arrow */
  .admin-table .status-select {
    width: min(100%, 11.5rem);
  }
}

/* Email-driven pages (verify, forgot / reset password) */
.flow-main {
  max-width: 34rem;
  padding-block: var(--view-y);
}

.flow-main h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.flow-main h2:focus {
  outline: none;
}

.flow-text {
  margin: 0 0 var(--space-4);
  color: var(--color-charcoal-muted);
}

.flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.form-links {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
}

.form-links a {
  color: var(--color-charcoal-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-links a:hover {
  color: var(--color-charcoal);
}

.verify-box {
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-charcoal-muted);
  font-size: var(--text-sm);
}

.verify-box p {
  margin: 0 0 0.25rem;
}

.code-form {
  margin: var(--space-1) 0;
}

.code-form .field {
  margin-bottom: var(--space-1);
}

.field input.code-input {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 1.25rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.field input.code-input::placeholder {
  letter-spacing: 0.3em;
  color: var(--color-divider);
}

.danger-zone.data-zone .text-button {
  color: var(--color-charcoal-muted);
}

/* Order confirmation view */
.confirmation-main {
  max-width: 44rem;
  padding-block: var(--view-y);
  text-align: center;
}

.confirmation[open] {
  animation: fade-in 260ms ease;
}

.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 0 var(--space-3);
  border: var(--border-strong);
  border-radius: 999px;
  font-size: 1.5rem;
}

.confirmation-main h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.confirmation-main h2:focus {
  outline: none;
}

.order-number-card {
  margin: 0 auto var(--space-3);
  padding: var(--space-4) var(--space-3);
  border: var(--border-strong);
  background: var(--color-field);
}

.order-number-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.order-number {
  margin: 0 0 var(--space-1);
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.25rem, 0.9rem + 2vw, 2rem);
  letter-spacing: 0.06em;
  word-break: break-all;
}

.confirmation-text {
  margin: 0 0 var(--space-2);
  color: var(--color-charcoal-muted);
}

.confirmation-main .test-notice {
  display: inline-block;
}

.confirmation-summary {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-field);
  text-align: left;
}

.confirmation-summary h3 {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
}

.confirmation-meta {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-hairline);
  font-size: var(--text-sm);
}

.confirmation-meta div {
  display: flex;
  justify-content: space-between;
  padding-block: 0.2rem;
}

.confirmation-meta dt,
.confirmation-meta dd {
  margin: 0;
}

.confirmation-meta dt {
  color: var(--color-charcoal-muted);
}

/* Footer */
.site-footer {
  margin-top: 0;
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
}

.footer-brand .brand {
  color: var(--color-charcoal);
}

.footer-brand p,
.footer-note p {
  margin: var(--space-1) 0 0;
  max-width: 26rem;
}

.footer-heading {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-charcoal);
}

.footer-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav li + li {
  margin-top: 0.35rem;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-divider);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.site-footer a:hover {
  color: var(--color-charcoal);
  text-decoration-color: var(--color-charcoal);
}

.footer-bottom {
  padding-block: var(--space-2);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

@media (max-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* Legal pages (Impressum, Datenschutz, AGB, ...) */
.site-nav > .text-button {
  justify-self: end;
}

.legal {
  max-width: 46rem;
  padding-block: var(--view-y);
}

.legal h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}

.legal h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.legal p,
.legal li {
  color: var(--color-charcoal-muted);
}

.legal p {
  margin: 0 0 var(--space-2);
}

.legal ul {
  margin: 0 0 var(--space-2);
  padding-left: 1.25rem;
}

.legal a {
  color: var(--color-charcoal);
  text-underline-offset: 3px;
}

.legal code {
  padding: 0.05rem 0.3rem;
  border: var(--border-hairline);
  background: var(--color-field);
  font-size: 0.9em;
}

.legal-intro {
  font-size: 1.125rem;
}

.draft-banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-error);
  font-size: var(--text-sm);
  color: var(--color-error) !important;
}

mark.placeholder {
  padding: 0 0.2rem;
  background: #f3e3a8;
  color: var(--color-charcoal);
}

/* Small screens (the navigation is handled in the "Mobile navigation" block below) */
@media (max-width: 40rem) {
  .dialog-layout {
    grid-template-columns: 1fr;
  }

  .dialog-gallery {
    border-right: 0;
    border-bottom: var(--border-hairline);
  }

  .gallery-sticky {
    position: static;
  }

  /* The picture takes at most about a third of the screen and is shown whole (contain, on a quiet ground), so title, price and the buy button come into view without scrolling. */
  .gallery-stage {
    aspect-ratio: auto;
    height: min(100vw, 38dvh);
    background: color-mix(in srgb, var(--color-charcoal) 5%, var(--color-porcelain));
  }

  .gallery-track img {
    object-fit: contain;
  }

  .dialog-content {
    padding: var(--space-3);
  }

  /* the buy button stays at the bottom of the sheet while the facts scroll */
  .dialog-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: var(--space-3) calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
    padding: var(--space-2) var(--space-3) max(var(--space-2), env(safe-area-inset-bottom));
    border-top: var(--border-hairline);
    background: var(--color-porcelain);
  }
}

@media (max-width: 60rem) {
  .checkout-main {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .checkout-summary {
    position: static;
  }
}

@media (max-width: 40rem) {
  .field-grid {
    grid-template-columns: 1fr;
  }

  .steps {
    gap: var(--space-2);
  }

  .step-actions .button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }
}

/* ==========================================================================
   Responsive pass
   Breakpoints: phone up to 40rem, tablet up to 60rem; the menu turns into a hamburger up to 48rem.
   Spacing and type sizes scale in tokens.css; this part holds the layout and touch rules.
   ========================================================================== */

/* ----- Mobile navigation: slide-out menu (behaviour in js/nav.js) ----- */
@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    width: var(--touch);
    height: var(--touch);
    margin-left: calc(-1 * var(--space-1));
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 1.375rem;
    height: 1rem;
  }

  .nav-toggle-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
  }

  .nav-toggle-bars span:nth-child(1) { top: 0; }
  .nav-toggle-bars span:nth-child(2) { top: calc(50% - 1px); }
  .nav-toggle-bars span:nth-child(3) { bottom: 0; }

  .brand {
    justify-self: center;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
  }

  /* simple page headers (legal pages) have no menu button: the brand stays at the left edge, like the checkout header */
  .site-nav > .brand:first-child {
    justify-self: start;
  }

  .nav-panel {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 130;
    display: flex;
    flex-direction: column;
    width: min(20rem, 86vw);
    height: 100dvh;
    overflow-y: auto;
    background: var(--color-porcelain);
    border-right: var(--border-hairline);
    transform: translateX(-100%);
    visibility: hidden; /* closed: not focusable, not read out */
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 240ms;
  }

  .is-nav-open .nav-panel {
    transform: none;
    visibility: visible;
    transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
  }

  .nav-panel-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    min-height: var(--nav-height);
    padding-inline: var(--space-3) var(--space-1);
    border-bottom: var(--border-hairline);
  }

  .nav-panel-title {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-charcoal-muted);
  }

  .nav-close {
    position: static;
  }

  .nav-links {
    flex-direction: column;
    gap: 0;
    padding: var(--space-1) var(--space-3);
  }

  .nav-links li {
    border-bottom: var(--border-hairline);
  }

  .nav-links a {
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    letter-spacing: 0;
    color: var(--color-charcoal);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.4em;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(43, 47, 54, 0.45);
  }

  body.nav-open {
    overflow: hidden;
  }

  /* Metrics stack on tablets too: three cards would be cramped next to each other. */
  .metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ----- Touch targets: at least 44px on small screens and on any touch device ----- */
@media (max-width: 48rem), (pointer: coarse) {
  .pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
  }

  .button-small,
  .rec-actions .button-small,
  .inventory-table .button-small,
  .promo-table .button-small {
    min-height: var(--touch);
  }

  .dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch);
    min-height: var(--touch);
    padding: 0;
  }

  .qty-btn {
    width: var(--touch);
    height: var(--touch);
  }

  .text-button,
  .form-links a,
  .site-footer li a {
    display: inline-flex;
    align-items: center;
    min-width: var(--touch);
    min-height: var(--touch);
  }

  .text-button {
    padding-block: 0.5rem;
  }

  .site-footer li + li {
    margin-top: 0;
  }

  .tab,
  .status-select,
  .cell-input,
  .promo-input,
  .field select {
    min-height: var(--touch);
  }

  /* 16px keeps mobile browsers from zooming into a field when it is focused. */
  .status-select,
  .cell-input,
  .promo-input {
    font-size: 1rem;
  }

  .checkbox {
    align-items: center;
    min-height: var(--touch);
  }

  .checkbox input {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
  }
}

/* ----- Tablet and phone: layouts stack, panels breathe less ----- */
@media (max-width: 60rem) {
  /* On the payment step the order summary comes first, so the promo code field is not buried below the card form. */
  .checkout-main:has(#review-step:not([hidden])) .checkout-summary {
    order: -1;
  }
}

@media (max-width: 40rem) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-row {
    flex-wrap: wrap;
    overflow: visible;
  }

  /* Product details become a full-screen sheet with a close button that stays in reach while scrolling. */
  .product-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-inline: 0;
  }

  .product-dialog > .dialog-close {
    position: sticky;
    top: var(--space-1);
    z-index: 3;
    display: flex;
    margin: var(--space-1) var(--space-1) calc(-1 * (var(--touch) + var(--space-1))) auto;
    width: var(--touch);
    height: var(--touch);
    border: var(--border-hairline);
    border-radius: 999px;
    background: var(--color-porcelain);
  }

  .dialog-content h3 {
    font-size: 1.625rem;
  }

  .drawer-footer {
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }

  .cart-line {
    padding: var(--space-2);
  }

  .steps li {
    font-size: var(--text-xs);
  }

  .account[data-mode="drawer"] .account-main {
    padding-block: var(--space-3);
  }

  .metric {
    padding: var(--space-2) var(--space-3);
  }

  .admin-panel,
  .account-card,
  .orders,
  .checkout-summary,
  .confirmation-summary {
    padding: var(--space-2);
  }

  /* Promo code form in the admin: one field per row. */
  /* Order and admin tables are stacked cards here: long cell content wraps instead of running off the edge. */
  .orders-table td {
    flex-wrap: wrap;
  }

  .orders-table td .order-ship {
    flex: 1 0 100%;
    margin-top: 0;
    text-align: right;
  }

  .orders-table .order-no {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .promo-create {
    flex-direction: column;
    align-items: stretch;
  }

  .promo-create .cell-input,
  .promo-create #promo-new-value,
  .promo-create #promo-new-min,
  .promo-create #promo-new-until,
  .promo-create .status-select {
    width: 100%;
    text-align: left;
  }

  .promo-create .button {
    justify-content: center;
  }

  .legal {
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   Visual polish layer
   One monochrome family: porcelain surfaces, 1px charcoal-tint lines, slate action blocks.
   Explicit type weights and line-height ratios, short hover transitions on everything clickable.
   (Colour, weight, line-height and section-gap values live in tokens.css.)
   ========================================================================== */

::selection {
  background: var(--color-slate);
  color: var(--color-porcelain);
}

/* Headings: regular serif display unless a component says otherwise, never a browser-default bold. */
h1,
h2,
h3,
h4 {
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

/* Single-line interface text gets the interface ratio, running text keeps the body ratio. */
.button,
.pill,
.tab,
.brand,
.text-button,
.nav-links a,
.eyebrow,
.product-category,
.footer-heading,
.metric-label,
.step-title,
.badge,
.tag {
  line-height: var(--leading-ui);
}

/* Slate blocks with medium-weight labels for every primary action. */
.button {
  font-weight: var(--weight-medium);
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    transform var(--transition);
}

.button:not(.button-outline):not(.button-danger) {
  background: var(--color-slate);
  border-color: var(--color-slate);
  color: var(--color-porcelain);
}

.button:not(.button-outline):not(.button-danger):hover:not(:disabled) {
  background: transparent;
  color: var(--color-slate);
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

/* Small uppercase labels: medium, not heavy. */
.eyebrow,
.step-title,
.metric-label,
.footer-heading,
.orders-table th,
.confirmation-addresses h3 {
  font-weight: var(--weight-medium);
}

/* Text actions: full charcoal for contrast, underline that warms up on hover. */
.text-button,
.danger-zone.data-zone .text-button {
  color: var(--color-charcoal);
  text-decoration-color: var(--color-line);
  transition: color var(--transition), text-decoration-color var(--transition);
}

.text-button:hover {
  text-decoration-color: currentColor;
}

.text-button.danger {
  color: var(--color-error);
}

/* Every clickable control eases in and out over the same short time. */
.pill,
.qty-btn,
.tab,
.dialog-close,
.nav-toggle,
.cart-link,
.cart-count {
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition),
    opacity var(--transition);
}

.dialog-close:hover,
.nav-toggle:hover {
  opacity: 0.6;
}

.cart-link:hover .cart-count {
  background: var(--color-slate);
  color: var(--color-porcelain);
}

/* Product and recommendation cards: a charcoal line draws in on hover, the picture zooms slightly. */
.product-card {
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color var(--transition-card), background var(--transition-card);
}

.rec-card {
  transition: border-color var(--transition-card);
}

@media (hover: hover) {
  .product-card:hover {
    outline-color: var(--color-charcoal);
  }

  .rec-card:hover {
    border-color: var(--color-charcoal);
  }
}

/* Touch screens have no real hover: do not leave a button or card stuck in its hover look after a tap. */
@media (hover: none) {
  .button:not(.button-outline):not(.button-danger):hover:not(:disabled) {
    background: var(--color-slate);
    color: var(--color-porcelain);
  }

  .button-outline:hover:not(:disabled) {
    background: transparent;
    color: var(--color-charcoal);
  }

  .button-danger:hover:not(:disabled) {
    background: var(--color-error);
    color: var(--color-porcelain);
  }

  .product-card:hover .product-media img {
    transform: none;
  }

  .pill:hover:not([aria-pressed="true"]) {
    border-color: var(--color-line);
  }

  .qty-btn:hover {
    background: transparent;
  }
}

/* Order status marker: the select keeps a plain 1px line; the status colour is a 3px inner accent (shipped is slate, not blue). */
.status-select {
  border-left-width: 1px;
  box-shadow: inset 3px 0 0 var(--status-accent, transparent);
}

.status-select.fs-processing,
.status-select.fs-shipped,
.status-select.fs-delivered {
  border-left-color: var(--color-line);
}

.status-select.fs-processing { --status-accent: #b7791f; }
.status-select.fs-shipped { --status-accent: var(--color-slate); }
.status-select.fs-delivered { --status-accent: var(--color-ok); }

/* ==========================================================================
   Price block and product facts (PAngV / LMIV): price, unit price and VAT / shipping notice stay together
   ========================================================================== */
.price-block {
  margin: var(--space-1) 0 var(--space-3);
  font-variant-numeric: tabular-nums;
}

.price-block p {
  margin: 0;
}

.price-block .price-main {
  font-size: var(--text-sm);
}

.price-block .price-unit {
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  color: var(--color-charcoal);
}

.price-block .price-note {
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.price-note a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.price-note a:hover {
  color: var(--color-charcoal);
  text-decoration-color: currentColor;
}

.dialog-price .price-block {
  margin: 0;
}

.dialog-price .price-main {
  font-size: var(--text-base);
}

.rec-body .price-block {
  margin: 0.25rem 0 var(--space-1);
}

.dialog-facts {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.dialog-facts div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--space-2);
  padding-block: 0.5rem;
  border-top: var(--border-hairline);
}

.dialog-facts div:last-child {
  border-bottom: var(--border-hairline);
}

.dialog-facts dt {
  color: var(--color-charcoal-muted);
}

.dialog-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.dialog-facts:empty {
  display: none;
}

@media (max-width: 40rem) {
  .dialog-facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
}

/* Checkout legal details: the EU legal-guarantee notice, the delivery time and the legal links. Kept small and quiet. */
.warranty-notice {
  margin: 0 0 var(--space-3);
}

/* The official notice is an A4-format sheet with small print: it needs width to stay readable (36rem on large screens, the full column on phones). */
.warranty-notice img {
  display: block;
  width: min(100%, 36rem);
  height: auto;
}

.warranty-notice figcaption {
  font-size: var(--text-sm);
}

.warranty-link {
  display: block;
  width: min(100%, 36rem);
}

.warranty-zoom {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

/* The full-size page: the sheet is shown at a readable width; on a phone it scrolls sideways instead of shrinking. */
.warranty-full {
  overflow-x: auto;
}

.warranty-full img {
  width: 100%;
  min-width: 40rem;
}

.checkout-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
}

.checkout-legal a {
  color: var(--color-charcoal-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-line);
  text-underline-offset: 3px;
  transition: color var(--transition), text-decoration-color var(--transition);
}

.checkout-legal a:hover {
  color: var(--color-charcoal);
  text-decoration-color: currentColor;
}

@media (max-width: 48rem), (pointer: coarse) {
  .checkout-legal a {
    display: inline-flex;
    align-items: center;
    min-width: var(--touch);
    min-height: var(--touch);
  }
}

/* Odoo panel in the admin dashboard */
.admin-odoo {
  margin-top: var(--space-4);
}

.admin-odoo h4 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.odoo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.odoo-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  cursor: pointer;
}

.odoo-table td:first-child input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-charcoal);
}

.badge-review {
  color: #8a5a00;
}

#odoo-test-result {
  margin-bottom: var(--space-2);
}

@media (max-width: 48rem), (pointer: coarse) {
  .odoo-table td:first-child input[type="checkbox"] {
    width: 1.375rem;
    height: 1.375rem;
  }
}

/* Hauptprodukte with sizes: the card lists them, the details view has a picker (same look as the filter pills) */
.product-sizes {
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
  color: var(--color-charcoal-muted);
}

.product-sizes .is-out {
  text-decoration: line-through;
}

.variant-picker {
  margin: 0 0 var(--space-3);
}

.variant-label {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.variant-option {
  min-height: var(--touch);
  padding: 0.5rem 1.25rem;
  border: var(--border-hairline);
  border-radius: 999px;
  background: transparent;
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.variant-option[aria-checked="true"] {
  background: var(--color-slate);
  border-color: var(--color-slate);
  color: var(--color-porcelain);
}

.variant-option.is-out {
  color: var(--color-charcoal-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (hover: hover) {
  .variant-option:hover:not(.is-out):not([aria-checked="true"]) {
    border-color: var(--color-charcoal);
  }
}

.dialog-subhead {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-ui);
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

/* Admin dashboard in tabs: the strip scrolls sideways on narrow screens instead of squeezing the labels */
.admin-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  margin-block: var(--space-3);
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

.admin-tabs .tab {
  flex: none;
  min-height: var(--touch);
  padding-inline: var(--space-3);
  white-space: nowrap;
}

.admin-tabpanel[hidden] {
  display: none;
}

/* The areas are grouped (Verkauf, Sortiment, Shop & System). Wide screens: a column on the left that stays in view; narrow screens: the strip above. */
.admin-tabs-group { display: none; }
@media (min-width: 64rem) {
  .admin-main {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
  }
  .admin-main > .eyebrow,
  .admin-main > h2,
  .admin-main > .form-notice { grid-column: 1 / -1; }
  .admin-main > .admin-tabs {
    grid-column: 1;
    grid-row: 4;
    flex-direction: column;
    overflow: visible;
    position: sticky;
    top: var(--space-3);
    margin-block: 0;
    border-bottom: 0;
  }
  .admin-main > .admin-tabpanel { grid-column: 2; grid-row: 4; min-width: 0; }
  /* The page itself does not scroll: the navigation stays put and each area scrolls on its own, so the position does not depend on the length of the page on the right. */
  .admin.checkout { overflow: hidden; }
  .admin .checkout-shell { display: flex; flex-direction: column; height: 100dvh; }
  .admin .admin-main {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding-block: var(--space-3);
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  .admin .admin-main h2 { margin-bottom: var(--space-2); font-size: var(--text-xl, 2rem); }
  .admin-main > .admin-tabs { position: static; max-height: 100%; overflow-y: auto; min-height: 0; }
  .admin-main > .admin-tabpanel { max-height: 100%; overflow-y: auto; padding-inline-end: var(--space-2); }
  .admin-tabs .tab {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    margin-bottom: 0;
    padding-inline: var(--space-2);
    text-align: left;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }
  .admin-tabs .tab[aria-selected="true"] { border-left-color: var(--color-charcoal); font-weight: var(--weight-medium); }
  .admin-tabs-group {
    display: block;
    margin: var(--space-2) 0 0;
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-charcoal-muted);
  }
}

/* Tablet and phone: with 14 areas a sideways strip hides most of them. The areas wrap into pills instead, all visible at once. */
@media (max-width: 63.99rem) {
  .admin-tabs {
    flex-wrap: wrap;
    gap: var(--space-1);
    overflow: visible;
    border-bottom: 0;
  }

  .admin-tabs .tab {
    margin: 0;
    padding: 0.25rem var(--space-2);
    border: var(--border-hairline);
    border-radius: 999px;
  }

  .admin-tabs .tab:hover {
    border-color: var(--color-charcoal);
  }

  .admin-tabs .tab[aria-selected="true"] {
    border-color: var(--color-charcoal);
    background: var(--color-charcoal);
    color: var(--color-porcelain);
  }

  .admin-tabs .tab[aria-selected="true"] .tab-badge {
    background: var(--color-porcelain);
    color: var(--color-charcoal);
  }
}

.admin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: end;
  margin-bottom: var(--space-2);
}
.admin-filter .field { flex: 1 1 14rem; margin: 0; }

/* Order details under a row of the admin order list */
.detail-row > td { padding: var(--space-3) var(--space-2); background: color-mix(in srgb, var(--color-charcoal) 4%, var(--color-porcelain)); }
.od { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3) var(--space-4); text-align: left; }
.od-section h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal-muted); }
.od-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.25rem var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.od-facts dt { color: var(--color-charcoal-muted); }
.od-facts dd { margin: 0; overflow-wrap: anywhere; }
.od-items { font-size: var(--text-sm); }
.od > .od-section:first-child, .od > .od-section:last-child { grid-column: 1 / -1; }

/* The log */
.log-error td { background: color-mix(in srgb, #b3261e 7%, var(--color-porcelain)); }
.log-warn td { background: color-mix(in srgb, #b26a00 7%, var(--color-porcelain)); }
.log-table td .order-ship { display: block; }
.log-detail summary { display: inline-flex; align-items: center; cursor: pointer; color: var(--color-charcoal-muted); text-decoration: underline; text-decoration-color: var(--color-line); text-underline-offset: 3px; }
.log-detail summary:hover { color: var(--color-charcoal); }
@media (max-width: 48rem), (pointer: coarse) { .log-detail summary { min-height: var(--touch); } }
.log-detail pre { margin: var(--space-1) 0 0; padding: var(--space-1) var(--space-2); max-width: 36rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-xs); background: var(--color-porcelain); border: var(--border-hairline); }

/* Legal texts editor */
.legal-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 64rem) { .legal-edit { grid-template-columns: minmax(0, 1fr); } }
#legal-html { width: 100%; min-height: 26rem; padding: 0.6rem 0.7rem; font-family: ui-monospace, Consolas, monospace; font-size: var(--text-xs); line-height: 1.5; color: var(--color-charcoal); background: var(--color-porcelain); border: var(--border-hairline); resize: vertical; }
.legal-preview { max-height: 36rem; overflow: auto; padding: var(--space-2) var(--space-3); border: var(--border-hairline); }

/* Earlier orders in the account */
.history-block { margin-top: var(--space-5); }
.history-list { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.history-item { border-bottom: var(--border-hairline); padding: var(--space-1) 0; }
.history-item summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-3); cursor: pointer; min-height: var(--touch); align-items: center; }
.history-name { font-weight: var(--weight-medium); }
.history-meta { color: var(--color-charcoal-muted); font-size: var(--text-sm); }
.history-lines, .history-docs { margin: var(--space-1) 0 var(--space-1) var(--space-3); padding: 0; font-size: var(--text-sm); }
.history-docs { list-style: none; margin-left: 0; }
.history-docs .order-ship { display: inline; margin-left: var(--space-1); }

.admin-tabpanel > .admin-panel + .admin-panel,
.admin-tabpanel > .metrics + .admin-grid {
  margin-top: var(--space-4);
}

.admin-grid-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 48rem) {
  .admin-grid-even {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Short lists on the dashboard tab */
.admin-list {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.admin-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: var(--border-hairline);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.admin-list-row:last-child {
  border-bottom: 0;
}

.admin-list-main {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-list-side {
  color: var(--color-charcoal-muted);
  text-align: right;
}

.admin-list-side.is-out {
  color: var(--color-charcoal);
  font-weight: var(--weight-medium);
}

.admin-panel .text-button {
  min-height: var(--touch);
}

/* Product with variants in the import list: Merkmale and variants fold open under the name */
.odoo-attrs {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.odoo-attrs summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--color-charcoal-muted);
  cursor: pointer;
  transition: color var(--transition);
}

.odoo-attrs summary:hover {
  color: var(--color-charcoal);
}

.odoo-variant-list {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
}

.odoo-attr {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-1) 0;
  border-top: var(--border-hairline);
}

.odoo-attr label {
  font-weight: var(--weight-medium);
}

.odoo-attr select {
  width: 100%;
  min-height: var(--touch);
}

/* Inventory: the red "sold out" bar sits left of the text (not on it), a Hauptprodukt reads as the parent of its sizes */
.inventory-table th:first-child,
.inventory-table td:first-child {
  padding-left: 0.75rem;
}

.inventory-table tr.family-row td {
  background: var(--color-field);
  font-weight: var(--weight-medium);
}

.inventory-table tr.variant-row td:first-child {
  padding-left: 1.75rem;
  color: var(--color-charcoal);
}

@media (max-width: 40rem) {
  .inventory-table th:first-child,
  .inventory-table td:first-child,
  .inventory-table tr.variant-row td:first-child {
    padding-left: 0;
  }

  .inventory-table tr {
    padding-left: 0.75rem;
  }

  .inventory-table tr.variant-row {
    padding-left: 1.75rem;
  }

  .inventory-table tr.is-out {
    box-shadow: inset 3px 0 0 var(--color-error);
  }

  .inventory-table tr.is-out td:first-child {
    box-shadow: none;
  }
}

/* Product editor (opens over the admin dashboard) */
.editor-main {
  max-width: 44rem;
  padding-block: var(--space-4);
}

.editor-form .field {
  margin-bottom: var(--space-3);
}

.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  line-height: var(--leading-body);
  resize: vertical;
  transition: border-color var(--transition);
}

.field textarea:hover {
  border-color: var(--color-charcoal-muted);
}

.field textarea:focus {
  border-color: var(--color-charcoal);
  outline: 1px solid var(--color-charcoal);
  outline-offset: 0;
}

.field textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.editor-reset {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
  cursor: pointer;
}

.editor-reset[hidden] {
  display: none;
}

.editor-reset input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--color-charcoal);
}

.editor-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--text-sm);
}

/* product details: one card per entry, switch on top, move / remove below */
.editor-details {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.editor-detail {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2);
  border: var(--border-hairline);
  background: var(--color-field);
}

.editor-detail input[type="text"],
.editor-detail textarea {
  background: var(--color-porcelain);
}

.editor-row-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.editor-row-tools .text-button {
  min-height: var(--touch);
  padding-inline: 0.25rem;
}

.editor-row-tools .text-button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* pictures: thumbnails in the shop's 4:5 format, the first one is the main picture */
.editor-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.editor-image-item {
  position: relative;
  width: 8rem;
}

.editor-image-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border-hairline);
  background: var(--color-field);
}

.editor-main-tag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.1rem 0.55rem;
  background: var(--color-slate);
  color: var(--color-porcelain);
  font-size: var(--text-xs);
  line-height: var(--leading-ui);
}

.editor-image-item .editor-row-tools {
  gap: 0;
  justify-content: space-between;
}

.editor-file {
  display: inline-flex;
  cursor: pointer;
}

.editor-file.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* the real file input is visually hidden: show its focus on the button that stands for it */
.editor-gallery:focus-within .editor-file {
  outline: 1px solid var(--color-charcoal);
  outline-offset: 2px;
}

.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 40rem) {
  .editor-actions .button {
    flex: 1 1 100%;
  }
}

.dialog-facts + .dialog-subhead {
  margin-top: 0;
}

/* editor and inventory polish */
.field .editor-file {
  display: inline-flex;
  width: auto;
  margin-bottom: var(--space-1);
}

.editor-food {
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.editor-food legend {
  width: 100%;
  margin: 0 0 var(--space-2);
  padding: var(--space-3) 0 0;
  border: 0;
  border-top: var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.editor-food .field-hint {
  margin: 0 0 var(--space-2);
}

.inventory-table td .text-button {
  margin-inline-start: var(--space-2);
}

.inventory-table td .text-button:first-child {
  margin-inline-start: 0;
}

/* admin: category tree */
.cat-tree {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.cat-row {
  padding: var(--space-1) 0 var(--space-1) calc(var(--depth, 0) * var(--space-3));
  border-bottom: var(--border-hairline);
}

.cat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-3);
}

.cat-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.cat-name {
  overflow-wrap: anywhere;
}

.cat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.cat-tools .text-button,
.cat-op .text-button {
  min-height: var(--touch);
  padding-inline: 0.25rem;
}

.cat-tools .text-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.cat-op {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-1) 0 var(--space-1);
}

.cat-op .cell-input {
  min-height: var(--touch);
  min-width: 12rem;
}

.cat-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.cat-add .field {
  margin: 0;
  min-width: 12rem;
  flex: 1 1 12rem;
}

.cat-op select.cell-input {
  text-align: left;
}

/* media library */
.media-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.media-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.media-search {
  margin: 0;
  margin-left: auto;
  min-width: 12rem;
}

.media-panel.is-drop {
  outline: 1px dashed var(--color-charcoal);
  outline-offset: -6px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--space-3) var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-tile {
  min-width: 0;
}

.media-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: var(--border-hairline);
  background: var(--color-field);
  cursor: pointer;
  transition: border-color var(--transition);
}

.media-open:hover:not(:disabled) {
  border-color: var(--color-charcoal);
}

.media-open img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.media-open:disabled {
  cursor: not-allowed;
}

.media-open:disabled img {
  opacity: 0.4;
}

.media-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--color-slate);
  color: var(--color-porcelain);
  font-size: var(--text-sm);
}

.media-open[aria-pressed="true"] {
  border-color: var(--color-charcoal);
  outline: 2px solid var(--color-charcoal);
  outline-offset: -2px;
}

.media-open[aria-pressed="true"] .media-check {
  display: flex;
}

.media-caption {
  display: grid;
  gap: 0.1rem;
  padding-top: 0.4rem;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
}

.media-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-dialog {
  width: min(64rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100vh - 2 * var(--space-3));
  padding: 0;
  border: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  overflow: auto;
}

.media-dialog::backdrop {
  background: rgba(43, 47, 54, 0.45);
}

.media-detail {
  display: grid;
  grid-template-columns: minmax(12rem, 26rem) minmax(0, 1fr);
}

.media-preview {
  background: var(--color-field);
  border-right: var(--border-hairline);
}

.media-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 2 * var(--space-3));
  object-fit: contain;
}

.media-form {
  padding: var(--space-4);
}

.media-form h2 {
  margin: 0 0 var(--space-1);
  overflow-wrap: anywhere;
}

.media-usage {
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.media-use {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  padding: 0.25rem 0;
  border-bottom: var(--border-hairline);
}

.media-use .text-button {
  min-height: var(--touch);
}

.picker-shell {
  padding: var(--space-4);
}

.picker-shell h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
}

.picker-actions {
  position: sticky;
  bottom: 0;
  padding-block: var(--space-2);
  background: var(--color-porcelain);
}

.editor-image-actions {
  margin-top: 0;
}

.editor-image-actions .editor-file {
  margin-bottom: 0;
}

@media (max-width: 40rem) {
  .media-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-preview {
    border-right: 0;
    border-bottom: var(--border-hairline);
  }

  .media-preview img {
    max-height: 22rem;
  }

  .media-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-inline: 0;
  }

  .media-search {
    margin-left: 0;
    flex: 1 1 100%;
  }
}

/* media library polish: denser grid, a search field that looks like the other fields */
.media-grid {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.media-search input {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  transition: border-color var(--transition);
}

.media-search input:hover {
  border-color: var(--color-charcoal-muted);
}

.media-search input:focus {
  border-color: var(--color-charcoal);
  outline: 1px solid var(--color-charcoal);
  outline-offset: 0;
}

#md-info {
  margin: 0 0 var(--space-3);
}

/* import list: a small picture beside the name */
.odoo-name {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.odoo-name-text {
  min-width: 0;
}

.odoo-thumb {
  flex: none;
  width: 3.5rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border-hairline);
  background: var(--color-field);
}

@media (max-width: 40rem) {
  .odoo-name {
    justify-content: flex-start;
    text-align: left;
  }
}

.odoo-thumb.is-missing {
  visibility: hidden; /* no picture in Odoo: the name keeps its place */
}

/* inline confirmation before a Hauptprodukt is deleted */
.delete-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--color-error);
  background: var(--color-porcelain);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}

.delete-confirm p {
  flex: 1 1 100%;
  margin: 0;
  line-height: var(--leading-body);
}

.delete-confirm .text-button {
  min-height: var(--touch);
}

.delete-confirm .button {
  min-height: var(--touch);
}

/* confirming a delete is the red button (the generic slate rule has three class selectors, so this one needs four) */
.delete-confirm .button:not(.button-outline):not(.button-danger) {
  border-color: var(--color-error);
  background: var(--color-error);
  color: var(--color-porcelain);
}

.delete-confirm .button:not(.button-outline):not(.button-danger):hover:not(:disabled) {
  background: transparent;
  color: var(--color-error);
}

/* the first step of a bulk delete is already marked as dangerous */
[data-bulk="ask-delete"] {
  border-color: var(--color-error);
  color: var(--color-error);
}

.family-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
}

.inventory-table td .family-actions .text-button {
  margin-inline-start: 0;
}

/* Customer reviews: cups under a product title (the cups themselves are styled in cups-brew.css), and the reviews section of the details dialog */
.rating-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
}

.rating-text {
  color: var(--color-charcoal-muted);
}

.reviews {
  grid-column: 1 / -1;
  padding: var(--space-4);
  border-top: var(--border-hairline);
}

.reviews h3 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
}

.reviews h4 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.reviews-grid {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.reviews-grid:has(.reviews-summary[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.reviews-summary[hidden] {
  display: none;
}

.reviews-average {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.reviews-average strong {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-charcoal);
}

.reviews-count {
  margin: 0.25rem 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.reviews-bars {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

.reviews-bars li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) 1.5rem;
  align-items: center;
  gap: 0.5rem;
}

.reviews-bars li > :last-child {
  text-align: right;
}

.reviews-bars meter {
  width: 100%;
  height: 0.55rem;
  border: 0;
  background: transparent;
}

.reviews-bars meter::-webkit-meter-bar {
  height: 0.55rem;
  border: 0;
  border-radius: 0;
  background: var(--color-line);
}

.reviews-bars meter::-webkit-meter-optimum-value,
.reviews-bars meter::-webkit-meter-suboptimum-value,
.reviews-bars meter::-webkit-meter-even-less-good-value {
  background: var(--color-charcoal);
}

.reviews-bars meter::-moz-meter-bar {
  background: var(--color-charcoal);
}

.reviews-empty {
  margin: 0 0 var(--space-3);
  color: var(--color-charcoal-muted);
}

.reviews-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.reviews-list:empty {
  display: none;
}

.review {
  padding-bottom: var(--space-3);
  border-bottom: var(--border-hairline);
}

.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.review-title {
  font-weight: var(--weight-semibold);
}

.review-meta {
  margin: 0.25rem 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.review-verified {
  margin-left: 0.6rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--color-ok);
  color: var(--color-ok);
  font-size: var(--text-xs);
}

.review-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#reviews-more {
  margin-bottom: var(--space-3);
}

.review-mine,
.review-write {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
}

.review-mine .review {
  margin-bottom: var(--space-2);
  border-bottom: 0;
  padding-bottom: 0;
}

.review-state,
.review-note {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

#review-form {
  max-width: 36rem;
}

.rating-input {
  margin: 0 0 var(--space-2);
  padding: 0;
  border: 0;
}

.rating-input legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-size: var(--text-sm);
}

.reviews-policy {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}

@media (max-width: 52rem) {
  .reviews {
    padding: var(--space-3);
  }

  .reviews-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* Admin: review moderation */
.tab-badge {
  display: inline-block;
  min-width: 1.35rem;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  background: var(--color-charcoal);
  color: var(--color-porcelain);
  font-size: var(--text-xs);
  line-height: 1.35rem;
  text-align: center;
}

.tab-badge[hidden] {
  display: none;
}

.rev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.rev-admin-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rev-admin {
  padding: var(--space-3);
  border: var(--border-hairline);
}

.rev-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.rev-admin-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  margin: 0.4rem 0;
}

.rev-admin .review-meta {
  margin-top: var(--space-1);
}

.rev-admin-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
}

#review-form .field {
  margin-bottom: var(--space-2);
}

#review-form .field-hint {
  margin: 0 0 var(--space-2);
}

.reviews-list > .review:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Legal pages: passages that are an unreviewed proposal */
.legal .proposal {
  margin: var(--space-2) 0;
  padding: 0.25rem 0 0.25rem var(--space-2);
  border-left: 3px solid var(--color-charcoal-muted);
}

.legal .proposal::before {
  content: "Vorschlag, noch nicht geprüft";
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-charcoal-muted);
}

.legal .proposal h2:first-of-type {
  margin-top: var(--space-1);
}

.legal .proposal-inline {
  border-bottom: 2px solid var(--color-charcoal-muted);
}

/* Admin products: the bar for products that do not come from Odoo, and hidden rows */
.nonodoo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
}

.nonodoo-bar .admin-hint {
  flex: 1 1 100%;
  margin: 0;
}

.nonodoo-bar .delete-confirm {
  flex: 1 1 100%;
}

.inventory-table tr.is-hidden > td:first-child,
.inventory-table tr.is-hidden input {
  color: var(--color-charcoal-muted);
}

/* Shipping: delivery choice in the checkout, and the admin tab */
.delivery-choice {
  margin: 0 0 var(--space-3);
  padding: 0;
  border: 0;
}

.delivery-choice legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

.pickup-info {
  white-space: pre-line;
  margin: var(--space-1) 0 0;
}

.cart-shipping-hint {
  color: var(--color-charcoal);
}

.ship-form {
  display: grid;
  gap: var(--space-3);
}

.ship-b2b-intro {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  margin: var(--space-3) 0;
}

.ship-group {
  margin: 0;
  padding: 0 0 var(--space-3);
  border: 0;
  border-bottom: var(--border-hairline);
}

.ship-group legend {
  padding: 0;
  margin-bottom: var(--space-1);
  font-weight: var(--weight-semibold);
}

.ship-countries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.ship-rates {
  max-width: 28rem;
}

/* phone: the table is a stack of cards and its header is hidden; the rows are built without row labels, so they are named here */
@media (max-width: 40rem) {
  .ship-rates td:nth-child(1)::before { content: "Bis (Gramm)"; }
  .ship-rates td:nth-child(2)::before { content: "Preis (€)"; }
  .ship-rates td:nth-child(3)::before { content: none; }
  .ship-rates td:nth-child(3) { justify-content: flex-end; }
}

.ship-form .field {
  margin-bottom: var(--space-2);
}

.ship-form .field-grid {
  max-width: 40rem;
}

/* Subscriptions ("Abo") */
.purchase-option {
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2);
  border: var(--border-hairline);
}

.purchase-option .checkbox {
  margin-bottom: 0.4rem;
}

.purchase-option .field-hint {
  margin: var(--space-1) 0 0;
}

.product-sub-hint {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ok);
}

.cart-line-was {
  margin-left: 0.5rem;
  text-decoration: line-through;
  color: var(--color-charcoal-muted);
}

.cart-line-sub {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-ok);
}

.confirm-dialog {
  max-width: 28rem;
  width: calc(100% - 2 * var(--space-3));
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
}

.confirm-dialog::backdrop {
  background: color-mix(in srgb, var(--color-charcoal) 45%, transparent);
}

.confirm-dialog h2 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: var(--weight-regular);
}

.confirm-dialog .step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-2);
}

.confirmation-subscription {
  color: var(--color-ok);
}

.subs-block {
  margin-bottom: var(--space-4);
}

.subs-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.subs-item {
  padding: var(--space-2);
  border: var(--border-hairline);
}

.subs-item p {
  margin: 0 0 0.25rem;
}

.subs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.subs-line,
.subs-next {
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

/* Subscriptions: what the customer can do (account) and the cancellation page */
.subs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-1);
}

.subs-panel {
  margin-top: var(--space-2);
}

.subs-rows {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.subs-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(8rem, 1.2fr) 5rem auto;
  gap: var(--space-1);
  align-items: center;
}

.subs-row select,
.subs-row input {
  width: 100%;
  min-height: var(--touch);
  padding: 0.4rem 0.6rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
}

.subs-row-title {
  font-size: var(--text-sm);
}

@media (max-width: 40rem) {
  .subs-row {
    grid-template-columns: 1fr 5rem;
  }

  .subs-row-title,
  .subs-row .text-button {
    grid-column: 1 / -1;
  }
}

.subs-panel input[type="date"],
.subs-panel select {
  width: 100%;
  min-height: var(--touch);
  padding: 0.4rem 0.6rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
}

.cancel-page .cancel-form {
  max-width: 34rem;
  margin-top: var(--space-3);
}

/* stacked fields of the withdrawal and cancellation forms (same gap as the sign-in forms) */
.cancel-form .field {
  margin-bottom: var(--space-3);
}

.cancel-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.cancel-done {
  max-width: 34rem;
  margin-top: var(--space-3);
}

/* The logo that replaces the brand text (public/js/theme.js) */
.brand-logo {
  display: block;
  width: auto;
  max-width: min(60vw, 16rem);
  object-fit: contain;
}

/* Admin tab Design: controls next to a live preview */
.design-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 60rem) {
  .design-grid { grid-template-columns: minmax(0, 1fr); }
}
.design-form fieldset {
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: var(--border-hairline);
}
.design-form legend {
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.design-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(5.5rem, 7rem);
  gap: var(--space-1) var(--space-2);
  align-items: center;
  padding: var(--space-1) 0;
}
.design-row input[type="color"] {
  width: 3rem;
  height: var(--touch);
  padding: 0.15rem;
  border: var(--border-hairline);
  background: transparent;
  cursor: pointer;
}
.design-form input[type="number"],
.design-file input[type="text"],
.design-row input[type="text"] {
  width: 100%;
  min-height: var(--touch);
  padding: 0.5rem 0.7rem;
  border: var(--border-hairline);
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
}
.theme-preview .preview-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.design-hint { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--color-charcoal-muted); }
.design-row .design-ratio {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-charcoal-muted);
}
.design-row .design-ratio.is-bad { color: var(--color-error); }

/* a fieldset never shrinks below its content by default: let it fit the panel on a phone */
.design-form fieldset {
  min-width: 0;
}

@media (max-width: 40rem) {
  .design-form fieldset {
    padding-inline: var(--space-2);
  }

  /* label (name and hint) on its own line, then the colour swatch and the hex code */
  .design-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .design-row > label {
    grid-column: 1 / -1;
  }
}

/* the browser button of a file field looks like the other small buttons */
.design-file input[type="file"] {
  max-width: 100%;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-charcoal-muted);
}

.design-file input[type="file"]::file-selector-button {
  margin-right: var(--space-2);
  padding: 0.5rem 1rem;
  border: var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.design-file {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: center;
  margin: var(--space-1) 0;
  font-size: var(--text-sm);
}
.design-logo-img { max-height: 4rem; max-width: 14rem; display: block; margin: var(--space-1) 0; }
.design-logo-img.design-on-dark { background: #2b2f36; padding: 0.5rem 0.75rem; border-radius: 4px; } /* shows a light logo on the dark it is made for */
.design-image { margin-top: var(--space-3); }
.design-image h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.theme-preview {
  position: sticky;
  top: var(--space-2);
  padding: var(--space-3);
  border: var(--border-hairline);
  background: var(--color-porcelain);
  color: var(--color-charcoal);
  font-family: var(--font-sans);
}
.theme-preview .preview-brand { display: flex; align-items: center; min-height: var(--touch); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-bottom: var(--border-hairline); margin-bottom: var(--space-2); }
.theme-preview h4 { margin: 0 0 var(--space-1); font: var(--weight-regular) 1.75rem/var(--leading-display) var(--font-serif); }
.theme-preview p { margin: 0 0 var(--space-2); }
.theme-preview .preview-muted { color: var(--color-charcoal-muted); font-size: var(--text-sm); }
.theme-preview .preview-field { display: block; width: 100%; padding: 0.7rem 0.8rem; border: var(--border-hairline); background: var(--color-porcelain); color: var(--color-charcoal); font: inherit; margin-bottom: var(--space-2); }
.theme-preview .preview-link { text-decoration: underline; text-underline-offset: 0.2em; }
.design-file input[type="text"] { flex: 1 1 14rem; width: auto; }

/* The shop page: a short head above the catalog (the big first screen is the story on the start page) */
.shop-intro {
  padding-top: calc(var(--view-y) + var(--space-3));
}
.shop-intro h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  font-weight: var(--weight-regular);
  line-height: var(--leading-display);
  letter-spacing: -0.02em;
}
.shop-lede {
  max-width: 38rem;
  margin: var(--space-2) 0 0;
  color: var(--color-charcoal-muted);
}
.shop-intro + .catalog {
  padding-top: var(--space-4);
}

/* Phones: product cards use a square picture (4:5 made a card about 700 px tall); object-fit: cover crops about 10 % of the height at the top and bottom. */
@media (max-width: 40rem) {
  .product-media {
    aspect-ratio: 1 / 1;
  }
}

.warranty-notice[hidden] {
  display: none;
}

/* typed quantity in the cart */
.qty-input {
  width: 3rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.qty-input:focus {
  outline: 1px solid var(--color-charcoal);
  outline-offset: -1px;
}

/* Order list filter bar (admin): date range, customer type, invoice state; the withdrawal panel under an order row */
.admin-filter .field.field-narrow { flex: 0 1 10rem; }
.admin-filter .field input[type="date"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border: var(--border-hairline);
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-charcoal);
  font: inherit;
  line-height: var(--leading-ui);
  transition: border-color var(--transition);
}
.admin-filter .field input[type="date"]:hover { border-color: var(--color-charcoal-muted); }
.admin-filter .field input[type="date"]:focus { border-color: var(--color-charcoal); outline: 1px solid var(--color-charcoal); outline-offset: 0; }
.admin-filter .filter-reset { align-self: end; margin-bottom: 0.9rem; }
.wd-panel { display: grid; gap: var(--space-3); text-align: left; max-width: 46rem; }
.wd-panel h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-charcoal-muted); }
.wd-panel textarea { width: 100%; padding: 0.6rem 0.8rem; border: var(--border-hairline); border-radius: 0; background: var(--color-field); color: var(--color-charcoal); font: inherit; line-height: var(--leading-ui); resize: vertical; }
.wd-hint { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; }
.wd-block { display: grid; gap: var(--space-2); padding: var(--space-2) 0; border-top: var(--border-hairline); }

/* ---------- admin Design: focal point of the start page picture, scene texts, mail previews ---------- */
.design-focus { margin-top: var(--space-3); }
.design-focus h4 { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.focus-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 28rem;
  line-height: 0;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  border: var(--border-hairline);
}
.focus-stage:focus-visible { outline: 2px solid var(--color-charcoal); outline-offset: 2px; }
.focus-stage img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.focus-marker {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.75rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(181, 52, 43, 0.65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.focus-marker.is-tall { background: rgba(43, 90, 181, 0.65); }
.focus-numbers { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; margin: var(--space-1) 0; }
.focus-numbers .field { margin: 0; }
.focus-numbers input[type="number"] { width: 6rem; }
.focus-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0; }
.focus-crop {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 2400 / 1500;
  overflow: hidden;
  border: var(--border-hairline);
  background: var(--color-field);
}
.focus-crop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-scene { margin: 0 0 var(--space-1); border: var(--border-hairline); padding: var(--space-1) var(--space-2); }
.story-scene summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.story-scene[open] summary { margin-bottom: var(--space-2); }
.story-scene textarea { width: 100%; min-height: 6rem; padding: 0.6rem 0.8rem; border: var(--border-hairline); border-radius: 0; background: var(--color-field); color: var(--color-charcoal); font: inherit; line-height: var(--leading-body); resize: vertical; }
.story-scene .design-count { margin: 0.25rem 0 0; font-size: var(--text-xs); color: var(--color-charcoal-muted); }
.story-scene .design-count.is-bad { color: var(--color-error); }
.mail-preview-box { margin-top: var(--space-2); }
.mail-preview-bar { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: end; margin-bottom: var(--space-1); }
.mail-preview-bar .field { margin: 0; flex: 1 1 16rem; }
.mail-preview-bar select { width: 100%; }
.mail-preview-frame { display: block; width: 100%; height: 38rem; border: var(--border-hairline); background: #ffffff; }
.mail-preview-text { margin: 0; padding: var(--space-2); max-height: 38rem; overflow: auto; border: var(--border-hairline); background: var(--color-field); font: 0.85rem/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Reviews: the shop's reply (shop and admin) and the small forms of the admin tab Bewertungen */
.review-reply { margin: var(--space-2) 0 0 var(--space-3); padding: var(--space-1) 0 var(--space-1) var(--space-2); border-left: 3px solid var(--color-charcoal-muted); }
.review-reply-head { margin: 0 0 0.2rem; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-charcoal-muted); }
.rev-admin-reply { margin: var(--space-1) 0 0 var(--space-3); padding-left: var(--space-2); border-left: 3px solid var(--color-charcoal-muted); }
.rev-admin-reason { white-space: pre-line; overflow-wrap: anywhere; }
.rev-admin-edit { margin-top: var(--space-2); max-width: 36rem; }
.rev-admin-edit textarea { width: 100%; padding: 0.6rem 0.8rem; border: var(--border-hairline); border-radius: 0; background: var(--color-field); color: var(--color-charcoal); font: inherit; line-height: var(--leading-body); resize: vertical; }