:root {
  --paper: #f5f1e8;
  --paper-deep: #e9e1d2;
  --ink: #1f2a24;
  --muted: #657067;
  --line: #cfc7b8;
  --leaf: #536b58;
  --leaf-dark: #35493b;
  --white: #fffdf8;
  --surface: #fffdf8;
  --on-accent: #fffdf8;
  --shadow: 0 20px 50px rgba(31, 42, 36, 0.10);
  --radius: 18px;
  --max-width: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.admin-mode-banner[hidden] {
  display: none !important;
}

.admin-mode-banner {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.45rem 1rem;
  color: #fff;
  background: #7b2d18;
  box-shadow: 0 4px 16px rgba(48, 17, 8, 0.24);
  font-size: 0.82rem;
  line-height: 1.25;
}

.admin-mode-icon {
  font-size: 1rem;
}

.admin-mode-banner strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-mode-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-mode-exit {
  flex: 0 0 auto;
  padding: 0.22rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
/* Private admin status/version indicator. Public header stays clean. */
.admin-site-version {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0.16rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-site-version[hidden] { display: none !important; }
@media (max-width: 620px) {
  .admin-site-version { padding: 0.12rem 0.3rem; font-size: 0.68rem; }
}
.admin-current-user { font-size: 0.76rem; font-weight: 850; white-space: nowrap; }
.admin-mode-banner .admin-current-user { margin-left: auto; }
.floating-admin-dock-state .admin-current-user { display: block; margin-bottom: 0.2rem; color: var(--leaf-dark); }

.admin-mode-exit:hover,
.admin-mode-exit:focus-visible {
  color: #7b2d18;
  background: #fff;
}

body.admin-mode .site-header {
  top: 2.75rem;
}

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

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

button {
  font: inherit;
}

a {
  color: inherit;
}

.demo-banner {
  padding: 0.55rem 1rem;
  color: var(--on-accent);
  background: var(--leaf-dark);
  text-align: center;
  font-size: 0.875rem;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

.brand-title-row { display: flex; align-items: center; gap: 0.45rem; }
.build-version {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.08rem 0.38rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}

.brand-mark {
  display: grid;
  width: 2.7rem;
  height: 2.7rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  letter-spacing: 0.03em;
}

.brand small {
  color: var(--muted);
  font-size: 0.78rem;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.primary-nav a {
  white-space: nowrap;
  text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.35rem;
}

.menu-button {
  display: none;
}

.cart-button,
.filter-button,
.menu-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
}

.cart-button {
  padding: 0.65rem 0.9rem;
}

.cart-button #cart-count {
  display: inline-grid;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.35rem;
  place-items: center;
  border-radius: 50%;
  color: var(--on-accent);
  background: var(--leaf);
  font-size: 0.78rem;
}

main {
  overflow: hidden;
}

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  max-width: var(--max-width);
  min-height: 72vh;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--leaf);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.15;
}

h1 {
  max-width: 14ch;
  margin-bottom: 1.4rem;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
}

h3 {
  font-size: 1.35rem;
}

.hero-text {
  max-width: 68ch;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.68;
}

.hero-letter p {
  margin: 0 0 0.9rem;
}

.hero-letter p:last-child {
  margin-bottom: 0;
}

.hero-letter .hero-greeting {
  color: var(--ink);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--leaf-dark);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.button.primary {
  color: var(--on-accent);
  background: var(--leaf-dark);
}

.button.secondary {
  color: var(--leaf-dark);
  background: transparent;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.hero-art {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 5px solid var(--leaf-dark);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-art::before {
  position: absolute;
  inset: 0.7rem;
  border: 1px solid var(--leaf);
  content: "";
  pointer-events: none;
}

.hero-art figcaption {
  padding-top: 0.7rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 3rem;
  padding: 1.15rem 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: var(--paper-deep);
  font-size: 0.9rem;
}

.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6rem 1.5rem;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-button {
  padding: 0.6rem 0.9rem;
}

.filter-button.active {
  color: var(--on-accent);
  background: var(--leaf);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.product-card.is-unplaced-product {
  border-color: #b87816;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d89425 28%, transparent);
}

.product-unplaced-badge {
  position: absolute;
  z-index: 4;
  top: 0.7rem;
  left: 0.7rem;
  max-width: calc(100% - 5.2rem);
  padding: 0.38rem 0.62rem;
  border: 1px solid rgba(92, 53, 0, 0.22);
  border-radius: 999px;
  color: #4b2a00;
  background: #ffd778;
  box-shadow: 0 3px 12px rgba(72, 42, 0, 0.2);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  line-height: 1.2;
  pointer-events: none;
}

.product-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.product-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 250ms ease;
}

.product-card[data-product-type="book"] img {
  object-fit: contain;
  background: color-mix(in srgb, var(--surface) 86%, #f4f0e8 14%);
}

.product-card[data-product-type="book"]:hover img {
  transform: none;
}

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

.product-card-body {
  padding: 1.15rem;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.product-card h3 {
  margin: 0.6rem 0 0.3rem;
}

.product-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.price {
  font-weight: 700;
}
.product-availability { display: block; margin-top: 0.18rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.product-variant-selector { display: grid; gap: 0.35rem; margin: 1rem 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.product-variant-selector select { width: 100%; padding: 0.65rem 0.7rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font: inherit; }
.button:disabled, .text-button:disabled { opacity: 0.48; cursor: not-allowed; }

.text-button {
  padding: 0;
  border: 0;
  color: var(--leaf-dark);
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25rem;
}

.artist-section {
  border-top: 1px solid var(--line);
}

.artist-profile {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 6rem);
}

.artist-portrait {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.artist-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--paper-deep);
}

.artist-biography p {
  color: var(--muted);
}

.artist-role {
  margin-top: -0.35rem;
  color: var(--leaf-dark) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.artist-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.artist-stats article {
  padding: 1.35rem 1rem;
  border-top: 2px solid var(--leaf);
  background: color-mix(in srgb, var(--paper-deep) 65%, transparent);
}

.artist-stats strong,
.artist-stats span {
  display: block;
}

.artist-stats strong {
  margin-bottom: 0.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 500;
  line-height: 1;
}

.artist-stats span {
  color: var(--muted);
  font-size: 0.88rem;
}

.artist-recognition {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  margin-top: 3rem;
  padding: 2rem;
  border-left: 4px solid var(--leaf);
  background: var(--paper-deep);
}

.artist-recognition h3 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
}

.artist-recognition > p {
  margin: 0;
  color: var(--muted);
}


.process-section {
  border-top: 1px solid var(--line);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.process-grid article {
  padding-top: 1rem;
  border-top: 2px solid var(--leaf);
}

.process-grid span {
  color: var(--leaf);
  font-weight: 700;
}

.process-grid h3 {
  margin: 1rem 0 0.5rem;
}

.process-grid p {
  color: var(--muted);
}

.contact-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--line);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem max(1.5rem, calc((100vw - var(--max-width)) / 2 + 1.5rem));
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.dialog {
  width: min(760px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

#product-dialog {
  width: min(1160px, calc(100% - 2rem));
}

.dialog::backdrop {
  background: rgba(18, 24, 20, 0.65);
}

.dialog-close {
  position: sticky;
  z-index: 3;
  top: 0.75rem;
  float: right;
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  margin: 0.75rem 0.75rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  cursor: pointer;
  appearance: none;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.dialog-close svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  overflow: visible;
  pointer-events: none;
}

.dialog-close path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.dialog-close:hover {
  border-color: color-mix(in srgb, var(--leaf-dark) 48%, var(--line));
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--surface) 84%, var(--leaf) 16%);
  box-shadow: 0 5px 16px rgba(20, 35, 25, 0.14);
}

.dialog-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--leaf) 42%, transparent);
  outline-offset: 2px;
}

.dialog-body,
.product-dialog-grid {
  padding: 2rem;
}

.product-dialog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.product-dialog-visual {
  min-width: 0;
  align-self: start;
}

.product-gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 86px));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.product-gallery-thumbnail {
  aspect-ratio: 4 / 5;
  padding: 0.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--surface);
  cursor: pointer;
  opacity: 0.72;
}

.product-gallery-thumbnail:hover,
.product-gallery-thumbnail:focus-visible,
.product-gallery-thumbnail.is-active {
  border-color: var(--leaf-dark);
  opacity: 1;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 24%, transparent);
}

.product-gallery-thumbnail img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.product-series {
  margin: 1.25rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--leaf) 8%);
}

.product-series h3,
.product-series p {
  margin: 0.25rem 0;
}

.product-series-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-series-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.product-series-navigation > :last-child {
  text-align: right;
}

.product-dialog-grid img {
  width: 100%;
  border: 1px solid var(--line);
}

.product-dialog-grid p {
  color: var(--muted);
}

.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  margin: 1.2rem 0;
}

.detail-list dt {
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
}

.cart-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}

.cart-row img {
  width: 56px;
  height: 70px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cart-row h3 {
  margin: 0;
  font-size: 1rem;
}

.cart-row p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.cart-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--line);
}

.cart-total-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 750;
}

.cart-total-line strong {
  color: var(--leaf-dark);
  font-size: 1.18rem;
}

.cart-total-note {
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.empty-state {
  padding: 2rem 0;
  color: var(--muted);
}

.form-message {
  min-height: 1.5rem;
  color: var(--leaf-dark);
  font-weight: 700;
}

.secondary-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-deep);
}

.secondary-filters label {
  display: grid;
  gap: 0.35rem;
  min-width: 180px;
}

.secondary-filters label span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.secondary-filters select {
  min-height: 2.7rem;
  padding: 0.55rem 2.2rem 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
}

.filter-reset {
  min-height: 2.7rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--leaf-dark);
  background: transparent;
  cursor: pointer;
}

.empty-filter-result {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .hero,
  .artist-profile,
  .artist-recognition {
    grid-template-columns: 1fr;
  }

  .artist-portrait {
    width: min(440px, 100%);
  }

  .hero {
    min-height: auto;
  }

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

  .process-grid,
  .artist-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-dialog-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .site-header {
    padding-inline: 1rem;
  }

  .brand small {
    display: none;
  }

  .hero {
    padding-top: 3rem;
  }

  .section {
    padding-block: 4rem;
  }

  .secondary-filters {
    align-items: stretch;
  }

  .secondary-filters label,
  .secondary-filters select,
  .filter-reset {
    width: 100%;
  }

  .section-heading,
  .contact-section,
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-grid,
  .process-grid,
  .artist-stats {
    grid-template-columns: 1fr;
  }

  .artist-recognition {
    padding: 1.4rem;
  }

  .dialog-body,
  .product-dialog-grid {
    padding: 1.4rem;
  }
}

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

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}


/* Language selector and multilingual product names */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.language-selector {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.language-flag {
  width: 1.45rem;
  font-size: 1.15rem;
  line-height: 1;
  text-align: center;
}

.language-selector select {
  min-height: 2.45rem;
  max-width: 9rem;
  padding: 0.35rem 1.75rem 0.35rem 0.15rem;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
}

.product-title {
  display: block;
}

.scientific-name,
.common-name,
.product-name {
  display: block;
}

.scientific-name {
  font-style: italic;
}

.common-name {
  margin-top: 0.22rem;
  color: var(--leaf);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.64em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.3;
}

.product-dialog-grid .common-name {
  margin-top: 0.35rem;
  font-size: 0.48em;
}

.cart-row .product-title {
  margin: 0;
  font-size: 1rem;
}

.cart-row .common-name {
  margin-top: 0.1rem;
  font-size: 0.72em;
}

@media (max-width: 1080px) {
  .menu-button {
    display: inline-flex;
    padding: 0.6rem 0.9rem;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% - 0.4rem);
    right: 1.5rem;
    display: none;
    width: min(320px, calc(100vw - 3rem));
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .primary-nav.open {
    display: grid;
  }
}

@media (max-width: 620px) {
  .site-header {
    gap: 0.65rem;
  }

  .header-actions {
    gap: 0.45rem;
  }

  .language-selector {
    min-height: 2.45rem;
    padding-left: 0.5rem;
  }

  .language-selector select {
    width: auto;
    max-width: 6.4rem;
    padding-right: 1.35rem;
    font-size: 0.8rem;
  }
}


/* --------------------------------------------------------------------------
   Visual-style selector
   -------------------------------------------------------------------------- */

html {
  color-scheme: light;
}


body,
.site-header,
.demo-banner,
.trust-strip,
.product-card,
.artist-portrait,
.artist-recognition,
.secondary-filters,
.dialog,
.button,
.filter-button,
.cart-button,
.theme-selector,
.language-selector {
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.theme-selector,
.language-selector {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.language-selector {
  padding-left: 0.7rem;
}

.language-flag {
  display: inline-grid;
  flex: 0 0 auto;
  width: 1.45rem;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  text-align: center;
}

.theme-selector select,
.language-selector select {
  min-height: 2.45rem;
  max-width: 13.5rem;
  padding: 0.35rem 1.75rem 0.35rem 0.15rem;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
}

.language-selector select {
  display: block;
  min-width: 6.6rem;
  max-width: 8rem;
  color: var(--ink);
  opacity: 1;
  visibility: visible;
}

.theme-step {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.theme-step:hover,
.theme-step:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--leaf) 13%, transparent);
}

/* --------------------------------------------------------------------------
   Theme 1: Botanical Atelier — the original calm, natural presentation
   -------------------------------------------------------------------------- */

html[data-theme="botanical"] {
  --paper: #f5f1e8;
  --paper-deep: #e9e1d2;
  --ink: #1f2a24;
  --muted: #657067;
  --line: #cfc7b8;
  --leaf: #536b58;
  --leaf-dark: #35493b;
  --surface: #fffdf8;
  --on-accent: #fffdf8;
  --shadow: 0 20px 50px rgba(31, 42, 36, 0.10);
  --radius: 18px;
  --max-width: 1180px;
}

/* --------------------------------------------------------------------------
   Theme 2: Earth & Linen — soft neutrals, linen tones and section-based backgrounds
   -------------------------------------------------------------------------- */

html[data-theme="gallery"] {
  --paper: #f6efe6;
  --paper-deep: #eadccf;
  --ink: #44352f;
  --muted: #75655e;
  --line: #d8c8ba;
  --leaf: #a96f52;
  --leaf-dark: #6f4c3d;
  --surface: #fcf8f3;
  --on-accent: #fffaf6;
  --shadow: 0 18px 40px rgba(74, 55, 46, 0.09);
  --radius: 16px;
  --max-width: 1320px;
}

html[data-theme="gallery"] body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  line-height: 1.58;
  background:
    linear-gradient(180deg, #f5f1ea 0%, #f5f1ea 26rem, #f7f3ed 26rem, #f7f3ed 100%);
}

html[data-theme="gallery"] main {
  background: transparent;
}

html[data-theme="gallery"] .hero,
html[data-theme="gallery"] .trust-strip {
  background: #f5f1ea;
}

html[data-theme="gallery"] #collection {
  background: #f8f4ee;
  border-top: 1px solid rgba(111, 76, 61, 0.08);
  border-bottom: 1px solid rgba(111, 76, 61, 0.08);
}

html[data-theme="gallery"] .artist-section {
  background: #eee4d9;
  border-top: 1px solid rgba(111, 76, 61, 0.08);
  border-bottom: 1px solid rgba(111, 76, 61, 0.08);
}

html[data-theme="gallery"] .process-section {
  background: #f9f5ef;
  border-top: 1px solid rgba(111, 76, 61, 0.08);
  border-bottom: 1px solid rgba(111, 76, 61, 0.08);
}

html[data-theme="gallery"] .contact-section {
  background: #2f241f;
  color: #f6efe7;
  border-top: 1px solid rgba(255, 250, 246, 0.1);
}

html[data-theme="gallery"] .contact-section h2,
html[data-theme="gallery"] .contact-section .eyebrow,
html[data-theme="gallery"] .contact-section p,
html[data-theme="gallery"] .contact-section .contact-card,
html[data-theme="gallery"] .contact-section .contact-card a,
html[data-theme="gallery"] .contact-section .contact-card strong {
  color: inherit;
}

html[data-theme="gallery"] .contact-section .button.primary {
  background: #f2e3d6;
  color: #473731;
}

html[data-theme="gallery"] .contact-section .button.secondary {
  border-color: rgba(255, 250, 246, 0.26);
  color: #f6efe7;
  background: rgba(255, 250, 246, 0.04);
}

html[data-theme="gallery"] .demo-banner {
  color: #fffaf6;
  background: #5a4034;
  font-weight: 700;
}

html[data-theme="gallery"] .site-header {
  max-width: none;
  padding-inline: max(1.5rem, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, white);
  background: color-mix(in srgb, var(--paper) 88%, white);
  backdrop-filter: blur(14px);
}

html[data-theme="gallery"] .brand-mark {
  border: 1px solid var(--leaf-dark);
  border-radius: 50%;
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--paper-deep) 78%, white);
  font-weight: 700;
}

html[data-theme="gallery"] .brand strong {
  letter-spacing: -0.02em;
}

html[data-theme="gallery"] h1,
html[data-theme="gallery"] h2,
html[data-theme="gallery"] h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

html[data-theme="gallery"] h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6vw, 6.2rem);
  line-height: 0.98;
}

html[data-theme="gallery"] .eyebrow {
  color: var(--leaf-dark);
  letter-spacing: 0.18em;
}

html[data-theme="gallery"] .hero {
  grid-template-columns: 1.03fr 0.97fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

html[data-theme="gallery"] .hero-copy {
  padding: 1.2rem 0 1.4rem;
  border-top: 4px solid var(--leaf);
}

html[data-theme="gallery"] .hero-art {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-deep) 40%, white);
  box-shadow: var(--shadow);
}

html[data-theme="gallery"] .hero-art::before {
  inset: 1rem;
  border: 1px solid color-mix(in srgb, var(--line) 88%, white);
}

html[data-theme="gallery"] .hero-art figcaption {
  color: var(--muted);
}

html[data-theme="gallery"] .button,
html[data-theme="gallery"] .cart-button,
html[data-theme="gallery"] .filter-button,
html[data-theme="gallery"] .filter-reset,
html[data-theme="gallery"] .theme-selector,
html[data-theme="gallery"] .language-selector,
html[data-theme="gallery"] .secondary-filters select {
  border-radius: 999px;
}

html[data-theme="gallery"] .button.primary {
  background: var(--leaf-dark);
}

html[data-theme="gallery"] .button.secondary,
html[data-theme="gallery"] .filter-reset {
  background: color-mix(in srgb, var(--paper) 92%, white);
}

html[data-theme="gallery"] .trust-strip {
  justify-content: space-between;
  border-color: var(--line);
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--paper) 86%, white);
  font-weight: 700;
}

html[data-theme="gallery"] .section-heading {
  align-items: end;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(111, 76, 61, 0.16);
}

html[data-theme="gallery"] .product-grid {
  gap: 2rem 1.1rem;
}

html[data-theme="gallery"] .product-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 85%, white);
  background: color-mix(in srgb, var(--surface) 88%, white);
  box-shadow: 0 10px 28px rgba(74, 55, 46, 0.06);
}

html[data-theme="gallery"] .product-card img {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, white);
}

html[data-theme="gallery"] .product-card-body {
  padding: 0.85rem;
}

html[data-theme="gallery"] .product-meta {
  color: var(--leaf-dark);
}

html[data-theme="gallery"] .product-card h3 {
  font-size: 1.05rem;
}

html[data-theme="gallery"] .common-name {
  color: var(--muted);
}

html[data-theme="gallery"] .artist-profile {
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
}

html[data-theme="gallery"] .artist-portrait {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, white);
  box-shadow: var(--shadow);
}

html[data-theme="gallery"] .artist-stats article {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, white);
}

html[data-theme="gallery"] .artist-recognition {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-deep) 46%, white);
}

/* --------------------------------------------------------------------------
   Theme 3: Vintage Herbarium — archival paper, specimen labels and ink
   -------------------------------------------------------------------------- */

html[data-theme="herbarium"] {
  --paper: #eee4c8;
  --paper-deep: #e2d3ad;
  --ink: #382f20;
  --muted: #746951;
  --line: #aa9a72;
  --leaf: #5d6841;
  --leaf-dark: #39422b;
  --surface: #f8f0d8;
  --on-accent: #f8f0d8;
  --shadow: 0 16px 32px rgba(73, 57, 30, 0.16);
  --radius: 0;
  --max-width: 1160px;
}

html[data-theme="herbarium"] body {
  background:
    repeating-linear-gradient(0deg, rgba(76, 58, 29, 0.025) 0, rgba(76, 58, 29, 0.025) 1px, transparent 1px, transparent 5px),
    var(--paper);
  font-family: Georgia, "Times New Roman", serif;
}

html[data-theme="herbarium"] .demo-banner {
  color: #f6edda;
  background: #4b4b32;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="herbarium"] .site-header {
  border-bottom: 4px double var(--line);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
}

html[data-theme="herbarium"] .brand-mark {
  border: 0;
  border-radius: 0;
  color: var(--leaf-dark);
  font-size: 1.7rem;
}

html[data-theme="herbarium"] .brand strong {
  font-family: Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 0.09em;
}

html[data-theme="herbarium"] .primary-nav,
html[data-theme="herbarium"] .theme-selector,
html[data-theme="herbarium"] .language-selector,
html[data-theme="herbarium"] .secondary-filters,
html[data-theme="herbarium"] .secondary-filters select,
html[data-theme="herbarium"] .filter-button,
html[data-theme="herbarium"] .filter-reset,
html[data-theme="herbarium"] .cart-button,
html[data-theme="herbarium"] .button {
  border-radius: 0;
}

html[data-theme="herbarium"] h1,
html[data-theme="herbarium"] h2,
html[data-theme="herbarium"] h3 {
  font-family: "Iowan Old Style", Baskerville, Georgia, serif;
}

html[data-theme="herbarium"] h1 {
  max-width: 13ch;
  font-style: italic;
}

html[data-theme="herbarium"] .eyebrow {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
}

html[data-theme="herbarium"] .hero {
  min-height: 76vh;
}

html[data-theme="herbarium"] .hero-art {
  transform: rotate(0.6deg);
  padding: 2.2rem;
  border: 8px solid #665b42;
  outline: 1px solid #2f2a20;
  outline-offset: -14px;
  background: var(--surface);
}

html[data-theme="herbarium"] .hero-art::before {
  inset: 1.25rem;
  border-color: var(--line);
}

html[data-theme="herbarium"] .hero-art img,
html[data-theme="herbarium"] .product-card img,
html[data-theme="herbarium"] .artist-portrait img {
  filter: sepia(0.09) saturate(0.88) contrast(1.02);
}

html[data-theme="herbarium"] .trust-strip {
  border-block: 4px double var(--line);
  background: transparent;
  font-style: italic;
}

html[data-theme="herbarium"] .section-heading {
  padding-bottom: 0.8rem;
  border-bottom: 4px double var(--line);
}

html[data-theme="herbarium"] .secondary-filters {
  border: 4px double var(--line);
}

html[data-theme="herbarium"] .product-grid {
  gap: 1.8rem;
}

html[data-theme="herbarium"] .product-card {
  border: 4px double var(--line);
  box-shadow: 4px 6px 0 rgba(84, 68, 40, 0.10);
}

html[data-theme="herbarium"] .product-card:nth-child(3n + 1) {
  transform: rotate(-0.18deg);
}

html[data-theme="herbarium"] .product-card:nth-child(3n + 2) {
  transform: rotate(0.18deg);
}

html[data-theme="herbarium"] .product-meta {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="herbarium"] .product-card p,
html[data-theme="herbarium"] .common-name,
html[data-theme="herbarium"] .secondary-filters label span,
html[data-theme="herbarium"] .site-footer {
  font-family: Georgia, "Times New Roman", serif;
}

html[data-theme="herbarium"] .artist-portrait {
  padding: 1.4rem;
  border: 8px solid #665b42;
  outline: 1px solid #2f2a20;
  outline-offset: -12px;
}

html[data-theme="herbarium"] .artist-stats article {
  border: 1px solid var(--line);
  border-top: 6px double var(--leaf);
  background: rgba(248, 240, 216, 0.48);
}

html[data-theme="herbarium"] .artist-recognition {
  border: 4px double var(--line);
  background: rgba(248, 240, 216, 0.55);
}

/* --------------------------------------------------------------------------
   Theme 4: Contemporary Editorial — bold shapes and magazine-like rhythm
   -------------------------------------------------------------------------- */

html[data-theme="editorial"] {
  --paper: #f4efe9;
  --paper-deep: #dce7e1;
  --ink: #17272d;
  --muted: #5c686b;
  --line: #aebbb8;
  --leaf: #d86248;
  --leaf-dark: #254650;
  --surface: #fffdf9;
  --on-accent: #fffdf9;
  --shadow: 0 22px 52px rgba(31, 55, 61, 0.13);
  --radius: 28px;
  --max-width: 1260px;
}

html[data-theme="editorial"] body {
  background:
    radial-gradient(circle at 92% 9%, rgba(216, 98, 72, 0.13), transparent 25rem),
    radial-gradient(circle at 4% 45%, rgba(37, 70, 80, 0.10), transparent 28rem),
    var(--paper);
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
}

html[data-theme="editorial"] .demo-banner {
  color: #fff;
  background: var(--leaf-dark);
  font-weight: 700;
}

html[data-theme="editorial"] .site-header {
  margin-top: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 10px 32px rgba(37, 70, 80, 0.08);
}

html[data-theme="editorial"] .brand-mark {
  border: 0;
  color: var(--on-accent);
  background: var(--leaf);
  transform: rotate(-8deg);
}

html[data-theme="editorial"] h1,
html[data-theme="editorial"] h2,
html[data-theme="editorial"] h3 {
  font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.045em;
}

html[data-theme="editorial"] h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6.5vw, 6.6rem);
  line-height: 0.98;
}

html[data-theme="editorial"] .eyebrow {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  color: #fff;
  background: var(--leaf);
  letter-spacing: 0.1em;
}

html[data-theme="editorial"] .hero {
  grid-template-columns: 1fr 0.9fr;
  min-height: 78vh;
}

html[data-theme="editorial"] .hero-art {
  padding: 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 48% 48% 24px 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

html[data-theme="editorial"] .hero-art::before {
  display: none;
}

html[data-theme="editorial"] .hero-art img {
  border-radius: 48% 48% 16px 16px;
}

html[data-theme="editorial"] .button.primary {
  border-color: var(--leaf);
  background: var(--leaf);
}

html[data-theme="editorial"] .button.secondary {
  border-color: var(--leaf-dark);
}

html[data-theme="editorial"] .trust-strip {
  border: 0;
  color: var(--ink);
  background: var(--paper-deep);
  font-weight: 700;
}

html[data-theme="editorial"] .section-heading {
  align-items: center;
}

html[data-theme="editorial"] .section-heading h2 {
  max-width: 13ch;
}

html[data-theme="editorial"] .secondary-filters {
  border: 0;
  border-radius: 24px;
  background: var(--paper-deep);
}

html[data-theme="editorial"] .product-grid {
  gap: 1.8rem;
}

html[data-theme="editorial"] .product-card {
  border: 0;
  border-radius: 28px 28px 12px 12px;
  box-shadow: var(--shadow);
}

html[data-theme="editorial"] .product-card:nth-child(3n + 2) {
  transform: translateY(1.4rem);
}

html[data-theme="editorial"] .product-card img {
  aspect-ratio: 1 / 1.08;
}

html[data-theme="editorial"] .product-meta {
  color: var(--leaf-dark);
  font-weight: 750;
}

html[data-theme="editorial"] .common-name {
  color: var(--leaf);
}

html[data-theme="editorial"] .artist-profile {
  align-items: center;
}

html[data-theme="editorial"] .artist-portrait {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 42% 42% 16px 16px;
}

html[data-theme="editorial"] .artist-stats article {
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(31, 55, 61, 0.08);
}

html[data-theme="editorial"] .artist-stats article:nth-child(even) {
  background: var(--paper-deep);
}

html[data-theme="editorial"] .artist-recognition {
  border: 0;
  border-radius: 28px;
  background: var(--leaf-dark);
}

html[data-theme="editorial"] .artist-recognition,
html[data-theme="editorial"] .artist-recognition p,
html[data-theme="editorial"] .artist-recognition .eyebrow {
  color: #fff;
}

html[data-theme="editorial"] .artist-recognition .eyebrow {
  background: rgba(255, 255, 255, 0.15);
}

html[data-theme="editorial"] .process-grid article {
  padding: 1.25rem;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
}

html[data-theme="editorial"] .process-grid article:nth-child(odd) {
  background: var(--paper-deep);
}

html[data-theme="editorial"] .contact-section {
  margin-bottom: 5rem;
  padding: 3rem;
  border: 0;
  border-radius: 30px;
  color: #fff;
  background: var(--leaf-dark);
}

html[data-theme="editorial"] .contact-section .eyebrow {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="editorial"] .contact-section .button.primary {
  border-color: #fff;
  color: var(--leaf-dark);
  background: #fff;
}

/* Header and grid adaptations for the added selector and wider themes */

.site-header {
  max-width: min(calc(var(--max-width) + 180px), 100%);
}

@media (max-width: 1360px) {
  .menu-button {
    display: inline-flex;
    padding: 0.6rem 0.9rem;
  }

  .primary-nav {
    position: absolute;
    top: calc(100% - 0.4rem);
    right: 1.5rem;
    display: none;
    width: min(320px, calc(100vw - 3rem));
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .primary-nav.open {
    display: grid;
  }
}

@media (max-width: 980px) {
  html[data-theme="gallery"] .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html[data-theme="editorial"] .product-card:nth-child(3n + 2) {
    transform: none;
  }
}

@media (max-width: 780px) {
  .site-header {
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .brand {
    margin-right: auto;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .theme-selector {
    flex: 1 1 13rem;
  }

  .theme-selector select {
    flex: 1 1 auto;
    max-width: none;
  }

  html[data-theme="editorial"] .site-header {
    border-radius: 28px;
  }
}

@media (max-width: 620px) {
  .header-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .theme-selector {
    order: 1;
    width: 100%;
  }

  .language-selector {
    order: 2;
    flex: 1 1 auto;
  }

  .menu-button {
    order: 3;
  }

  .theme-selector,
  .language-selector {
    min-height: 2.45rem;
  }

  html[data-theme="gallery"] .product-grid {
    grid-template-columns: 1fr;
  }

  html[data-theme="herbarium"] .hero-art {
    transform: none;
    padding: 1.4rem;
  }

  html[data-theme="editorial"] .contact-section {
    margin-inline: 1rem;
    padding: 2rem 1.4rem;
  }
}

section[id] {
  scroll-margin-top: 7rem;
}

@media (max-width: 780px) {
  section[id] {
    scroll-margin-top: 13rem;
  }
}



.product-group-break {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.product-group-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 12%, var(--leaf) 50%, var(--line) 88%, transparent 100%);
}

.product-group-title {
  margin: 0;
}

html[data-theme="gallery"] .product-group-break,
html[data-theme="herbarium"] .product-group-break,
html[data-theme="editorial"] .product-group-break {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="herbarium"] .product-grid > .product-card {
  transform: none;
}

html[data-theme="herbarium"] .product-grid > .product-card:nth-of-type(3n + 1) {
  transform: rotate(-0.18deg);
}

html[data-theme="herbarium"] .product-grid > .product-card:nth-of-type(3n + 2) {
  transform: rotate(0.18deg);
}

html[data-theme="editorial"] .product-grid > .product-card {
  transform: none;
}

html[data-theme="editorial"] .product-grid > .product-card:nth-of-type(3n + 2) {
  transform: translateY(1.4rem);
}

@media (max-width: 620px) {
  .product-group-break {
    margin-top: 0.8rem;
  }

  html[data-theme="editorial"] .product-grid > .product-card:nth-of-type(3n + 2) {
    transform: none;
  }
}


/* Scientific product detail content */
.product-code {
  margin: 0.25rem 0 0.9rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.025em;
}

.product-code span { font-family: inherit; font-weight: 700; }

.product-dialog-details > .product-code:last-child {
  margin: 1.25rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.publication-reference {
  margin: 0.8rem 0 1.1rem !important;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--leaf-dark);
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
  font-size: 0.88rem;
  line-height: 1.5;
}

.publication-reference span {
  font-weight: 700;
}

.product-description p {
  margin: 0 0 0.9rem;
  color: var(--muted);
  line-height: 1.72;
}

.taxa-panel {
  margin: 1rem 0 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--paper-deep));
}

.product-dialog-visual > .taxa-panel {
  margin: 1rem 0 0;
}

.taxa-panel h3 {
  margin: 0 0 0.55rem;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.taxa-panel ul {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.taxa-panel li {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem 0.55rem;
  align-items: baseline;
}

.taxon-latin {
  font-style: italic;
  font-weight: 650;
}

.taxon-common::before {
  content: "— ";
  color: var(--muted);
}

.taxon-latin,
.taxon-common {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Optional identification layer for multi-species plates */
.plate-marker-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.plate-marker-layer.is-visible {
  opacity: 1;
}

.plate-marker,
.taxon-marker,
.annotation-note-symbol {
  display: inline-grid;
  place-items: center;
  width: 1.78rem;
  height: 1.78rem;
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  color: #fff;
  background: rgba(19, 31, 24, 0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.plate-marker {
  position: absolute;
  transform: translate(-50%, -50%);
}

.annotation-layer-note {
  position: absolute;
  z-index: 4;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  max-width: min(72%, 29rem);
  align-items: center;
  gap: 0.55rem;
  padding: 0.38rem 0.62rem 0.38rem 0.42rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  opacity: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 4px 16px rgba(20, 35, 25, 0.14);
  font-size: 0.72rem;
  line-height: 1.25;
  pointer-events: none;
  transform: translateY(-0.25rem);
  transition: opacity 150ms ease, transform 150ms ease;
}

.annotation-layer-note.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.annotation-note-symbol {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-width: 1px;
  font-size: 0.65rem;
}

.annotation-toggle {
  position: absolute;
  z-index: 5;
  top: 0.75rem;
  right: 4.15rem;
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 5px 18px rgba(20, 35, 25, 0.16);
  cursor: pointer;
}

.annotation-toggle:hover,
.annotation-toggle:focus-visible {
  border-color: var(--leaf-dark);
}

.annotation-toggle.is-active {
  border-color: var(--leaf-dark);
  color: var(--surface);
  background: var(--leaf-dark);
}

.annotation-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.taxa-panel.has-marker-map li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.65rem;
}

.taxa-panel .taxon-marker {
  width: 1.55rem;
  height: 1.55rem;
  margin-top: 0.05rem;
  border-width: 1.5px;
  font-size: 0.7rem;
}

.taxon-name {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.3rem 0.55rem;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
}

/* Detail-image magnifier */
.product-image-inspector {
  position: relative;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  user-select: none;
  -webkit-user-select: none;
}

.product-dialog-grid .product-image-inspector img {
  display: block;
  width: 100%;
  border: 0;
  pointer-events: none;
  -webkit-user-drag: none;
  max-height: min(82vh, 900px);
  object-fit: contain;
}

.product-image-inspector.is-magnifier-active {
  cursor: crosshair;
  touch-action: none;
}

.product-image-inspector.is-touch-magnifying {
  overflow: hidden;
}

.magnifier-toggle {
  position: absolute;
  z-index: 4;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  width: 2.85rem;
  height: 2.85rem;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 5px 18px rgba(20, 35, 25, 0.16);
  cursor: pointer;
}

.magnifier-toggle:hover,
.magnifier-toggle:focus-visible {
  border-color: var(--leaf-dark);
}

.magnifier-toggle.is-active {
  border-color: var(--leaf-dark);
  color: var(--surface);
  background: var(--leaf-dark);
}

.magnifier-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.magnifier-lens {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  opacity: 0;
  border: 3px solid var(--leaf-dark);
  border-radius: 50%;
  background-color: var(--surface);
  box-shadow: 0 9px 28px rgba(20, 35, 25, 0.3);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 120ms ease, transform 120ms ease;
}

.magnifier-lens.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.magnifier-lens.is-touch-lens {
  z-index: 8;
}

.magnifier-hint {
  position: absolute;
  z-index: 2;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  margin: 0 !important;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 4px 16px rgba(20, 35, 25, 0.12);
  font-size: 0.78rem;
  line-height: 1.35;
  pointer-events: none;
}

.product-image-inspector.is-pressing .magnifier-hint {
  opacity: 0;
}

@media (max-width: 620px) {
  #product-dialog {
    width: min(100% - 0.25rem, 760px);
    max-height: calc(100dvh - 0.25rem);
  }

  #product-dialog .dialog-close {
    position: sticky;
    top: 0.55rem;
    display: grid;
    float: none;
    margin: 0.55rem 0.55rem 0.45rem auto;
  }

  #product-dialog .product-dialog-grid {
    clear: both;
    gap: 0;
    padding: 0;
  }

  #product-dialog .product-image-inspector {
    width: 100%;
    border-inline: 0;
    border-top: 0;
  }

  #product-dialog .product-image-inspector.is-touch-magnifying {
    z-index: 5;
    overflow: visible;
  }

  #product-dialog .product-image-inspector img {
    width: 100%;
    height: auto;
    max-height: none;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    margin: 1rem 1.35rem 0;
  }

  #product-dialog .product-dialog-details {
    padding: 1.35rem;
  }

  .magnifier-lens {
    width: 240px;
    height: 240px;
  }

  .magnifier-toggle,
  .annotation-toggle {
    width: 2.65rem;
    height: 2.65rem;
  }

  .annotation-toggle {
    right: 3.9rem;
  }

  .annotation-layer-note {
    top: 0.6rem;
    left: 0.6rem;
    max-width: calc(100% - 7.5rem);
    font-size: 0.67rem;
  }

  .plate-marker {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.72rem;
  }
}


/* --------------------------------------------------------------------------
   Compact multilingual header — v13
   Keeps the three controls on one row without widening the page.
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) {
  .site-header {
    gap: 1rem;
  }

  .brand {
    min-width: 0;
  }

  .header-actions {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.45rem;
  }

  .theme-step {
    display: none;
  }

  .theme-selector,
  .language-selector {
    display: grid;
    min-width: 0;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .theme-selector {
    width: clamp(9.5rem, 16vw, 12rem);
    grid-template-columns: minmax(0, 1fr);
  }

  .language-selector {
    width: 7.6rem;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .theme-selector select,
  .language-selector select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-right: 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-button {
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  .primary-nav a,
  .primary-nav .cart-button {
    white-space: nowrap;
  }
}

@media (max-width: 780px) {
  .site-header {
    max-width: 100%;
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .brand {
    width: auto;
    max-width: 100%;
    margin-right: auto;
  }

  .header-actions {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(5.8rem, 7rem) auto;
    align-items: center;
    gap: 0.4rem;
  }

  .theme-selector,
  .language-selector,
  .menu-button {
    order: initial;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 2.45rem;
  }

  .theme-selector {
    padding-inline: 0.42rem 0.18rem;
  }

  .language-selector {
    padding-inline: 0.42rem 0.18rem;
  }

  .language-flag {
    width: 1.15rem;
    font-size: 0.95rem;
  }

  .theme-selector select,
  .language-selector select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 0.1rem;
    padding-right: 1.1rem;
    font-size: 0.78rem;
  }

  .menu-button {
    width: auto;
    padding: 0.55rem 0.72rem;
    font-size: 0.8rem;
  }

  /* A native select must not enlarge the page on iOS Safari. */
  .site-header,
  .header-actions,
  .theme-selector,
  .language-selector {
    box-sizing: border-box;
  }
}

@media (max-width: 390px) {
  .header-actions {
    grid-template-columns: minmax(0, 1fr) minmax(5.15rem, 5.8rem) auto;
    gap: 0.3rem;
  }

  .language-flag {
    display: none;
  }

  .theme-selector,
  .language-selector {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0.25rem 0.12rem;
  }

  .theme-selector select,
  .language-selector select {
    padding-left: 0.18rem;
    font-size: 0.74rem;
  }

  .menu-button {
    padding-inline: 0.58rem;
  }
}

/* --------------------------------------------------------------------------
   Scalable catalogue — v14
   -------------------------------------------------------------------------- */

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.filter-count {
  display: inline-grid;
  min-width: 1.45rem;
  min-height: 1.45rem;
  place-items: center;
  padding: 0 0.34rem;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper-deep) 78%, transparent);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1;
}

.filter-button.active .filter-count {
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.catalogue-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.35rem;
}

.catalogue-search {
  display: flex;
  width: min(34rem, 100%);
  min-height: 2.85rem;
  align-items: center;
  gap: 0.65rem;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.catalogue-search:focus-within {
  border-color: var(--leaf-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leaf) 18%, transparent);
}

.catalogue-search svg {
  width: 1.1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--leaf-dark);
  stroke-linecap: round;
  stroke-width: 1.8;
}

.catalogue-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

.catalogue-search input::placeholder {
  color: var(--muted);
}

.catalogue-status {
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.load-more-wrap[hidden] {
  display: none !important;
}

.load-more-button {
  min-width: min(20rem, 100%);
}

.selection-button {
  display: inline-flex;
  min-width: 3.1rem;
  min-height: 2.65rem;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.48rem 0.72rem;
  white-space: nowrap;
}

.selection-icon {
  width: 1.18rem;
  height: 1.18rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.selection-count {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  place-items: center;
  padding: 0 0.24rem;
  border-radius: 999px;
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--paper-deep) 82%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.mobile-filter-shortcut {
  position: fixed;
  z-index: 20;
  right: 0.85rem;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  display: none;
  min-height: 2.8rem;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--leaf-dark);
  border-radius: 999px;
  color: var(--surface);
  background: var(--leaf-dark);
  box-shadow: 0 8px 26px rgba(20, 35, 25, 0.28);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
}

.mobile-filter-shortcut svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

@media (min-width: 1400px) {
  .admin-mode-banner {
    min-height: 3.15rem;
    font-size: 0.94rem;
  }

  .admin-mode-icon {
    font-size: 1.12rem;
  }

  body.admin-mode .site-header {
    top: 3.15rem;
  }

  .demo-banner {
    font-size: 1rem;
  }

  .brand strong {
    font-size: 1.16rem;
  }

  .brand small {
    font-size: 0.9rem;
  }

  .build-version {
    font-size: 0.72rem;
  }

  .primary-nav,
  .header-actions {
    font-size: 0.96rem;
  }

  #collection .product-grid,
  html[data-theme="gallery"] #collection .product-grid,
  html[data-theme="herbarium"] #collection .product-grid,
  html[data-theme="editorial"] #collection .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  #collection .product-grid,
  html[data-theme="gallery"] #collection .product-grid,
  html[data-theme="herbarium"] #collection .product-grid,
  html[data-theme="editorial"] #collection .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 620px) {
  #collection.section {
    padding-inline: 0.72rem;
  }

  #collection .section-heading {
    gap: 1rem;
  }

  #collection .filters {
    width: 100%;
    flex-wrap: nowrap;
    padding-bottom: 0.3rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #collection .filters::-webkit-scrollbar {
    display: none;
  }

  #collection .filter-button {
    flex: 0 0 auto;
    padding: 0.5rem 0.7rem;
    font-size: 0.78rem;
  }

  .secondary-filters {
    gap: 0.65rem;
    padding: 0.8rem;
  }

  .secondary-filters label span {
    font-size: 0.72rem;
  }

  .secondary-filters select,
  .filter-reset {
    min-height: 2.45rem;
    font-size: 0.82rem;
  }

  .catalogue-tools {
    display: grid;
    gap: 0.65rem;
  }

  .catalogue-search {
    width: 100%;
    min-height: 2.65rem;
  }

  .catalogue-status {
    font-size: 0.78rem;
  }

  #collection .product-grid,
  html[data-theme="gallery"] #collection .product-grid,
  html[data-theme="herbarium"] #collection .product-grid,
  html[data-theme="editorial"] #collection .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.68rem;
  }

  #collection .product-card,
  html[data-theme="gallery"] #collection .product-card,
  html[data-theme="herbarium"] #collection .product-card,
  html[data-theme="editorial"] #collection .product-card {
    min-width: 0;
    transform: none;
  }

  #collection .product-card-body,
  html[data-theme="gallery"] #collection .product-card-body {
    padding: 0.68rem;
  }

  #collection .product-meta {
    display: none;
  }

  #collection .product-card h3 {
    margin: 0;
    font-size: clamp(0.83rem, 3.5vw, 1rem);
    line-height: 1.18;
  }

  #collection .product-card .common-name {
    margin-top: 0.2rem;
    font-size: 0.62em;
    line-height: 1.2;
  }

  #collection .product-card-summary {
    display: none;
  }

  #collection .product-card-footer {
    gap: 0.35rem;
    margin-top: 0.58rem;
  }

  #collection .price {
    min-width: 0;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-add-button {
    display: inline-grid;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 1rem;
  }

  .card-add-button.is-added {
    color: var(--surface);
    border-color: var(--leaf-dark);
    background: var(--leaf-dark);
  }

  .card-add-label {
    display: none;
  }

  .product-group-break {
    gap: 0.35rem;
    margin-top: 0.65rem;
  }

  .product-group-title {
    font-size: 0.72rem;
  }

  .load-more-wrap {
    margin-top: 1.4rem;
  }

  .load-more-button {
    width: 100%;
  }

  .mobile-filter-shortcut.is-visible {
    display: inline-flex;
  }
}


/* --------------------------------------------------------------------------
   v16 — manual catalogue density and stronger selection button
   -------------------------------------------------------------------------- */
#collection {
  --catalogue-columns: 4;
}

#collection .product-grid,
html[data-theme="gallery"] #collection .product-grid,
html[data-theme="herbarium"] #collection .product-grid,
html[data-theme="editorial"] #collection .product-grid {
  grid-template-columns: repeat(var(--catalogue-columns), minmax(0, 1fr)) !important;
}

.catalogue-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.9rem;
}

.catalogue-display-controls,
.column-buttons {
  display: inline-flex;
  align-items: center;
}

.catalogue-display-controls {
  justify-content: center;
}

.column-buttons {
  gap: 0.3rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.column-button {
  display: inline-grid;
  width: 2.35rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.column-button svg {
  width: 1.45rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.column-button:hover,
.column-button:focus-visible {
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--paper-deep) 75%, transparent);
}

.column-button.active {
  color: var(--surface);
  background: var(--leaf-dark);
  box-shadow: 0 3px 10px rgba(20, 35, 25, 0.18);
}

.column-button[hidden] {
  display: none !important;
}

/* Compact cards on every viewport; descriptive copy belongs to the detail view. */
#collection .product-card-summary {
  display: none !important;
}

#collection .product-card-body,
html[data-theme="gallery"] #collection .product-card-body {
  padding: 0.72rem;
}

#collection .product-meta {
  display: none;
}

#collection .product-card h3 {
  margin: 0;
  font-size: clamp(0.9rem, 1.25vw, 1.02rem);
  line-height: 1.18;
}

#collection .product-card .common-name {
  margin-top: 0.18rem;
  font-size: 0.66em;
  line-height: 1.2;
}

#collection .product-card-footer {
  gap: 0.4rem;
  margin-top: 0.58rem;
}

#collection .price {
  min-width: 0;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collection .card-add-button {
  display: inline-grid;
  width: 1.95rem;
  height: 1.95rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1rem;
}

#collection .card-add-label {
  display: none;
}

/* Make the personal selection clearly visible without taking more header width. */
.selection-button {
  color: var(--surface);
  border-color: var(--leaf-dark) !important;
  background: var(--leaf-dark) !important;
  box-shadow: 0 5px 16px rgba(20, 35, 25, 0.2);
}

.selection-button:hover,
.selection-button:focus-visible {
  color: var(--surface);
  background: color-mix(in srgb, var(--leaf-dark) 88%, black) !important;
  box-shadow: 0 7px 20px rgba(20, 35, 25, 0.26);
}

.selection-button .selection-count {
  color: var(--leaf-dark);
  background: var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface) 70%, transparent);
}

@media (max-width: 1024px) {
  .catalogue-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .catalogue-status {
    grid-column: 1 / -1;
    justify-self: end;
  }
}

@media (max-width: 620px) {
  .catalogue-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
  }

  .catalogue-search {
    grid-column: 1 / -1;
  }

  .catalogue-display-controls {
    grid-column: 1 / 2;
    justify-self: start;
  }

  .catalogue-status {
    grid-column: 2 / 3;
    justify-self: end;
    align-self: center;
    font-size: 0.76rem;
    text-align: right;
    white-space: nowrap;
  }

  .column-button {
    width: 2.2rem;
    height: 2.1rem;
  }
}

/* --------------------------------------------------------------------------
   v17 — quantity selection, responsive catalogue typography, 5 columns,
   and two new visual themes
   -------------------------------------------------------------------------- */

/* Catalogue typography follows the manually selected image density. */
#collection[data-columns="1"] .product-card-body {
  padding: 1.15rem 1.25rem 1.25rem;
}

#collection[data-columns="1"] .product-card h3 {
  font-size: clamp(1.45rem, 2.1vw, 1.9rem);
}

#collection[data-columns="1"] .product-card .common-name {
  margin-top: 0.32rem;
  font-size: 0.72em;
}

#collection[data-columns="1"] .price {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}

#collection[data-columns="1"] .card-add-button {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 1.2rem;
}

#collection[data-columns="2"] .product-card h3 {
  font-size: clamp(1.15rem, 1.55vw, 1.42rem);
}

#collection[data-columns="2"] .product-card .common-name {
  font-size: 0.70em;
}

#collection[data-columns="2"] .price {
  font-size: clamp(0.9rem, 1vw, 1.02rem);
}

#collection[data-columns="3"] .product-card h3 {
  font-size: clamp(1rem, 1.15vw, 1.18rem);
}

#collection[data-columns="3"] .product-card .common-name {
  font-size: 0.68em;
}

#collection[data-columns="3"] .price {
  font-size: 0.86rem;
}

#collection[data-columns="4"] .product-card h3 {
  font-size: clamp(0.91rem, 0.92vw, 1.02rem);
}

#collection[data-columns="4"] .product-card .common-name {
  font-size: 0.66em;
}

#collection[data-columns="4"] .price {
  font-size: 0.78rem;
}

#collection[data-columns="5"] .product-card-body {
  padding: 0.58rem;
}

#collection[data-columns="5"] .product-card h3 {
  font-size: clamp(0.78rem, 0.78vw, 0.9rem);
}

#collection[data-columns="5"] .product-card .common-name {
  font-size: 0.64em;
}

#collection[data-columns="5"] .price {
  font-size: 0.7rem;
}

#collection[data-columns="5"] .card-add-button {
  width: 1.78rem;
  height: 1.78rem;
  font-size: 0.9rem;
}

.column-button[data-columns="5"] svg {
  width: 1.72rem;
}

/* Quantity controls inside the personal selection. */
.quantity-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.quantity-control button {
  display: inline-grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--leaf-dark);
  background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1;
}

.quantity-control button:hover,
.quantity-control button:focus-visible {
  color: var(--surface);
  background: var(--leaf-dark);
}

.quantity-control span {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 800;
}

.cart-row-info {
  min-width: 0;
}

.cart-remove-button {
  align-self: center;
}

/* Stronger selection button: visible but still compact in the header. */
.selection-button {
  position: relative;
  border-width: 2px !important;
  box-shadow: 0 7px 20px color-mix(in srgb, var(--leaf-dark) 28%, transparent);
}

.selection-button .selection-icon {
  width: 1.3rem;
  height: 1.3rem;
  stroke-width: 2;
}

.selection-button .selection-count {
  min-width: 1.38rem;
  min-height: 1.38rem;
  font-size: 0.76rem;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 72%, transparent);
}

/* Theme: Pure Minimal — almost no decoration, maximum focus on the artwork. */
html[data-theme="minimal"] {
  --paper: #ffffff;
  --paper-deep: #f5f5f2;
  --ink: #171917;
  --muted: #70736f;
  --line: #d9dbd7;
  --leaf: #4e6557;
  --leaf-dark: #26382e;
  --surface: #ffffff;
  --on-accent: #ffffff;
  --shadow: none;
  --radius: 4px;
  --max-width: 1240px;
}

html[data-theme="minimal"] body {
  background: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="minimal"] .demo-banner {
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

html[data-theme="minimal"] .site-header {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: none;
}

html[data-theme="minimal"] .hero-art,
html[data-theme="minimal"] .product-card,
html[data-theme="minimal"] .artist-portrait,
html[data-theme="minimal"] .artist-recognition,
html[data-theme="minimal"] .secondary-filters,
html[data-theme="minimal"] .dialog {
  box-shadow: none;
}

html[data-theme="minimal"] .hero-art {
  border: 2px solid var(--ink);
}

html[data-theme="minimal"] .hero-art::before {
  display: none;
}

html[data-theme="minimal"] .product-card {
  border-color: #e5e6e3;
}

html[data-theme="minimal"] .product-card:hover img {
  transform: none;
}

html[data-theme="minimal"] .button,
html[data-theme="minimal"] .filter-button,
html[data-theme="minimal"] .filter-reset,
html[data-theme="minimal"] .theme-selector,
html[data-theme="minimal"] .language-selector,
html[data-theme="minimal"] .secondary-filters select {
  border-radius: 4px;
}

/* Theme: Pastel Studio — quiet colour fields without overpowering the drawings. */
html[data-theme="pastel"] {
  --paper: #fbf7f5;
  --paper-deep: #eee7ef;
  --ink: #36413d;
  --muted: #777476;
  --line: #d9cfd5;
  --leaf: #7d9a88;
  --leaf-dark: #526d60;
  --surface: #fffdfc;
  --on-accent: #ffffff;
  --shadow: 0 18px 44px rgba(91, 79, 91, 0.11);
  --radius: 22px;
  --max-width: 1220px;
}

html[data-theme="pastel"] body {
  background:
    radial-gradient(circle at 10% 10%, rgba(212, 231, 220, 0.55), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(237, 216, 225, 0.58), transparent 26rem),
    radial-gradient(circle at 55% 82%, rgba(224, 220, 240, 0.50), transparent 32rem),
    var(--paper);
}

html[data-theme="pastel"] .demo-banner {
  color: #526159;
  background: #e7efe9;
}

html[data-theme="pastel"] .site-header {
  border-bottom-color: rgba(125, 154, 136, 0.22);
  background: rgba(255, 253, 252, 0.91);
}

html[data-theme="pastel"] .hero-art {
  border: 3px solid #718e7c;
  background: #fffdfc;
}

html[data-theme="pastel"] .hero-art::before {
  border-color: #decfd9;
}

html[data-theme="pastel"] .product-card {
  background: #fffafc;
}

html[data-theme="pastel"] .secondary-filters,
html[data-theme="pastel"] .artist-recognition {
  background: rgba(255, 253, 252, 0.78);
}

html[data-theme="pastel"] .filter-button.active,
html[data-theme="pastel"] .button.primary,
html[data-theme="pastel"] .selection-button {
  background: var(--leaf-dark) !important;
}

@media (max-width: 620px) {
  .cart-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .cart-row img {
    width: 52px;
    height: 65px;
  }

  .cart-remove-button {
    font-size: 0.75rem;
  }
}

html[data-theme="gallery"] .process-steps article,
html[data-theme="gallery"] .contact-card,
html[data-theme="gallery"] .secondary-filters,
html[data-theme="gallery"] .catalogue-tools {
  background: color-mix(in srgb, var(--surface) 86%, white);
  border: 1px solid color-mix(in srgb, var(--line) 78%, white);
}

html[data-theme="gallery"] .artist-biography,
html[data-theme="gallery"] .hero-copy {
  color: #4d3d36;
}


/* --------------------------------------------------------------------------
   Theme refinement: Natural Earth — more photographic gallery presentation
   -------------------------------------------------------------------------- */

html[data-theme="gallery"] {
  --paper: #f3efe9;
  --paper-deep: #e6ddd1;
  --ink: #3f342f;
  --muted: #6f625c;
  --line: #d4c7ba;
  --leaf: #857161;
  --leaf-dark: #54463d;
  --surface: #fcfaf6;
  --on-accent: #fffdfb;
}

html[data-theme="gallery"] .site-header {
  background: rgba(244, 240, 233, 0.92);
}

html[data-theme="gallery"] .hero,
html[data-theme="gallery"] .trust-strip {
  background: #f3efe9;
}

html[data-theme="gallery"] #collection {
  background: #f7f2eb;
}

html[data-theme="gallery"] .section-heading h2,
html[data-theme="gallery"] .section-heading p {
  max-width: 42rem;
}

html[data-theme="gallery"] .section-heading p {
  color: var(--muted);
}

html[data-theme="gallery"] .product-grid {
  gap: 2.4rem 1.35rem;
}

html[data-theme="gallery"] #collection .product-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="gallery"] #collection .product-card img {
  border: 0;
  box-shadow: 0 8px 22px rgba(67, 52, 45, 0.06);
}

html[data-theme="gallery"] #collection .product-card-body {
  padding: 0.9rem 0.2rem 0.3rem;
  text-align: center;
}

html[data-theme="gallery"] #collection .product-meta,
html[data-theme="gallery"] #collection .common-name,
html[data-theme="gallery"] #collection .price {
  justify-content: center;
  text-align: center;
}

html[data-theme="gallery"] #collection .product-card-footer {
  justify-content: center;
}

html[data-theme="gallery"] .artist-section {
  background: #ece3d8;
}

html[data-theme="gallery"] .process-section {
  background: #f8f4ee;
}

html[data-theme="gallery"] .contact-section {
  background: #2d2420;
}

/* --------------------------------------------------------------------------
   Theme 6: Elegant Atelier — refined serif typography and understated luxury
   -------------------------------------------------------------------------- */

html[data-theme="elegant"] {
  --paper: #f7f3ee;
  --paper-deep: #ece4da;
  --ink: #26211f;
  --muted: #6d625d;
  --line: #d7c8b6;
  --leaf: #9d7a53;
  --leaf-dark: #433733;
  --surface: #fffdf9;
  --on-accent: #fffaf4;
  --shadow: 0 18px 40px rgba(39, 31, 28, 0.08);
  --radius: 18px;
  --max-width: 1300px;
}

html[data-theme="elegant"] body {
  background:
    linear-gradient(180deg, #f8f4ef 0%, #f8f4ef 28rem, #f2ebe2 28rem, #f2ebe2 62rem, #f8f4ef 62rem, #f8f4ef 100%);
  color: var(--ink);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

html[data-theme="elegant"] h1,
html[data-theme="elegant"] h2,
html[data-theme="elegant"] h3,
html[data-theme="elegant"] .brand strong {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.03em;
  color: var(--ink);
}

html[data-theme="elegant"] .demo-banner {
  background: #3b302c;
  color: #fffaf4;
}

html[data-theme="elegant"] .site-header {
  border-bottom: 1px solid rgba(157, 122, 83, 0.18);
  background: rgba(248, 244, 239, 0.94);
  backdrop-filter: blur(12px);
}

html[data-theme="elegant"] .brand-mark {
  border: 1px solid var(--leaf);
  color: var(--leaf-dark);
  background: #fffaf4;
}

html[data-theme="elegant"] .eyebrow {
  color: var(--leaf-dark);
  letter-spacing: 0.16em;
}

html[data-theme="elegant"] .hero {
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

html[data-theme="elegant"] .hero-copy {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(157, 122, 83, 0.28);
}

html[data-theme="elegant"] .hero-art {
  border: 1px solid rgba(157, 122, 83, 0.22);
  background: #fffdf9;
  box-shadow: var(--shadow);
}

html[data-theme="elegant"] .hero-art::before {
  inset: 0.9rem;
  border-color: rgba(157, 122, 83, 0.24);
}

html[data-theme="elegant"] .button,
html[data-theme="elegant"] .cart-button,
html[data-theme="elegant"] .filter-button,
html[data-theme="elegant"] .filter-reset,
html[data-theme="elegant"] .theme-selector,
html[data-theme="elegant"] .language-selector,
html[data-theme="elegant"] .secondary-filters select {
  border-radius: 999px;
}

html[data-theme="elegant"] .button.primary,
html[data-theme="elegant"] .cart-button {
  background: var(--leaf-dark);
  border-color: var(--leaf-dark);
}

html[data-theme="elegant"] .button.secondary,
html[data-theme="elegant"] .filter-reset {
  background: #fffaf4;
}

html[data-theme="elegant"] .trust-strip {
  border: 1px solid rgba(157, 122, 83, 0.15);
  color: var(--leaf-dark);
  background: rgba(255, 250, 244, 0.78);
}

html[data-theme="elegant"] .section-heading {
  padding-bottom: 0.95rem;
  border-bottom: 1px solid rgba(157, 122, 83, 0.18);
}

html[data-theme="elegant"] .secondary-filters,
html[data-theme="elegant"] .catalogue-tools,
html[data-theme="elegant"] .process-steps article,
html[data-theme="elegant"] .contact-card,
html[data-theme="elegant"] .artist-stats article {
  border: 1px solid rgba(157, 122, 83, 0.16);
  background: rgba(255, 253, 249, 0.86);
  box-shadow: 0 10px 28px rgba(39, 31, 28, 0.04);
}

html[data-theme="elegant"] .product-card {
  border: 1px solid rgba(157, 122, 83, 0.14);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: 0 12px 26px rgba(39, 31, 28, 0.05);
}

html[data-theme="elegant"] .product-card img {
  border-bottom: 1px solid rgba(157, 122, 83, 0.12);
}

html[data-theme="elegant"] .common-name,
html[data-theme="elegant"] .product-meta {
  color: var(--muted);
}

html[data-theme="elegant"] .artist-portrait,
html[data-theme="elegant"] .artist-recognition {
  border: 1px solid rgba(157, 122, 83, 0.16);
  background: rgba(255, 251, 245, 0.9);
  box-shadow: var(--shadow);
}

html[data-theme="elegant"] .contact-section {
  background: #2f2825;
  color: #f8f3ee;
  border-color: rgba(255, 250, 244, 0.12);
}

html[data-theme="elegant"] .contact-section h2,
html[data-theme="elegant"] .contact-section .eyebrow,
html[data-theme="elegant"] .contact-section p,
html[data-theme="elegant"] .contact-section .contact-card,
html[data-theme="elegant"] .contact-section .contact-card a,
html[data-theme="elegant"] .contact-section .contact-card strong {
  color: inherit;
}

html[data-theme="elegant"] .contact-section .button.primary {
  background: #f1e2cf;
  color: #3d302a;
  border-color: #f1e2cf;
}

html[data-theme="elegant"] .contact-section .button.secondary {
  border-color: rgba(255, 250, 244, 0.24);
  background: rgba(255, 250, 244, 0.05);
  color: #f8f3ee;
}


/* v23 Natural Earth tuning */
html[data-theme="gallery"] #collection {
  background: #e9dfd2;
}

html[data-theme="gallery"] #collection .product-card {
  overflow: hidden;
  background: transparent;
}

html[data-theme="gallery"] #collection .product-card-body {
  padding: 0.95rem 0.85rem 0.75rem;
  background: #f8f4ee;
  box-shadow: 0 10px 20px rgba(67, 52, 45, 0.05);
}

html[data-theme="gallery"] #collection .product-card h3,
html[data-theme="gallery"] #collection .common-name,
html[data-theme="gallery"] #collection .price {
  background: transparent;
}

.admin-action-help-wrap { position: relative; display: inline-flex; align-items: center; }
.admin-action-help-wrap[hidden] { display: none !important; }
.admin-help-trigger { position: absolute; z-index: 20; top: -0.72rem; right: -0.35rem; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); box-shadow: 0 3px 12px rgba(0,0,0,.12); font-size: 0.72rem; font-weight: 900; cursor: help; }
.admin-help-trigger:hover, .admin-help-trigger:focus-visible { border-color: var(--leaf); outline: none; }
.admin-help-popover { position: absolute; z-index: 30; right: -0.25rem; bottom: calc(100% + 0.75rem); width: min(330px, 75vw); padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); box-shadow: 0 16px 46px rgba(0,0,0,.2); font-size: 0.78rem; font-weight: 600; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(5px); transition: 120ms ease; pointer-events: none; }
.admin-help-popover::after { content: ""; position: absolute; right: 0.65rem; top: 100%; border: 7px solid transparent; border-top-color: var(--surface); }
.admin-action-help-wrap:hover .admin-help-popover, .admin-action-help-wrap:focus-within .admin-help-popover, .admin-action-help-wrap.is-help-open .admin-help-popover { opacity: 1; visibility: visible; transform: translateY(0); }

/* Hidden catalogue administration (?admin=1) */
.catalog-admin-message { margin: 0; color: var(--muted); font-size: 0.84rem; }
.catalog-admin-source { font-size: 0.72rem; font-weight: 650; }
.catalog-admin-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.45rem; }
.catalog-admin-actions[hidden], .catalog-order-context-toolbar[hidden], .admin-order-button[hidden] { display: none !important; }
.admin-order-button { min-height: 2.35rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
.floating-admin-dock .admin-order-button:disabled { display: none !important; }
.admin-order-button:disabled,
.catalog-order-editing .filter-button:disabled,
.catalog-order-editing .filter-reset:disabled,
.catalog-order-editing .secondary-filters select:disabled,
.catalog-order-editing .catalogue-search input:disabled { cursor: not-allowed; opacity: 0.45; }
.catalog-admin-message { min-height: 1.2em; font-weight: 700; }
.catalog-admin-message.is-warning {
  position: fixed;
  z-index: 80;
  top: 3.45rem;
  left: 50%;
  width: min(760px, calc(100vw - 1rem));
  padding: 0.58rem 0.78rem;
  border: 1px solid #7f211b;
  border-radius: 8px;
  color: #fff;
  background: #a23a32;
  box-shadow: 0 5px 16px rgba(90, 22, 18, 0.22);
  pointer-events: none;
  transform: translateX(-50%);
}
.floating-admin-dock[hidden] { display: none !important; }
.floating-admin-dock {
  position: fixed;
  z-index: 55;
  right: 50%;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: grid;
  width: min(calc(100vw - 1.5rem), 1320px);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0.48rem;
  padding: 0.68rem 0.78rem 0.58rem;
  border: 1px solid color-mix(in srgb, var(--leaf-dark) 52%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 14px 38px rgba(20, 31, 23, 0.24);
  backdrop-filter: blur(14px);
  transform: translateX(50%);
}
.floating-admin-dock > .catalog-admin-message:empty { display: none; }
.floating-admin-dock > .catalog-admin-message:not(.is-warning) {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  max-width: min(560px, calc(100vw - 1.5rem));
  padding: 0.42rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 8px 24px rgba(20, 31, 23, 0.16);
  backdrop-filter: blur(12px);
}
.admin-toast {
  position: fixed;
  z-index: 240;
  inset: 50% auto auto 50%;
  display: flex;
  width: min(640px, calc(100vw - 2rem));
  min-height: 7.5rem;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border: 2px solid color-mix(in srgb, var(--leaf-dark) 65%, var(--line));
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 97%, var(--leaf) 3%);
  box-shadow: 0 28px 90px rgba(10, 24, 15, 0.36);
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 160ms ease, transform 160ms ease;
  margin: 0;
}
.admin-toast[hidden] { display: none !important; }
.admin-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.admin-toast.is-error { border-color: #8f211b; color: #fff; background: #a23a32; }
.admin-toast-icon {
  flex: 0 0 auto;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--leaf-dark);
  font-size: 1.65rem;
  font-weight: 900;
}
.admin-toast.is-error .admin-toast-icon { color: #8f211b; background: #fff; }
.admin-toast.is-progress .admin-toast-icon { animation: admin-toast-pulse 900ms ease-in-out infinite alternate; }
@keyframes admin-toast-pulse { to { opacity: 0.45; transform: scale(0.92); } }
.admin-confirm-dialog {
  width: min(620px, calc(100vw - 2rem));
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--leaf-dark) 65%, var(--line));
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 97%, var(--leaf) 3%);
  box-shadow: 0 28px 90px rgba(10, 24, 15, 0.36);
  font-family: inherit;
}
.admin-confirm-dialog::backdrop {
  background: rgba(16, 27, 20, 0.42);
  backdrop-filter: blur(3px);
}
.admin-confirm-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.1rem;
  align-items: start;
  padding: 1.5rem 1.65rem 1.35rem;
}
.admin-confirm-icon {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--leaf-dark);
  font-size: 1.55rem;
  font-weight: 900;
}
.admin-confirm-copy h2 {
  margin: 0 0 0.45rem;
  color: var(--ink);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.2;
}
.admin-confirm-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.55;
  white-space: pre-line;
}
.admin-confirm-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: 0.3rem;
}
.admin-confirm-actions .button { min-width: 8.5rem; }
.admin-confirm-dialog.is-destructive { border-color: color-mix(in srgb, #8f211b 70%, var(--line)); }
.admin-confirm-dialog.is-destructive .admin-confirm-icon,
.admin-confirm-dialog.is-destructive #admin-confirm-accept {
  color: #fff;
  border-color: #8f211b;
  background: #a23a32;
}
.floating-admin-dock-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.2rem 0.48rem;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  color: var(--leaf-dark);
}
.floating-admin-dock-title > span { font-size: 1.05rem; }
.floating-admin-dock-title strong {
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.floating-admin-dock-state {
  min-width: 0;
  padding: 0.42rem 0.2rem 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  color: var(--muted);
  line-height: 1.25;
}
.floating-admin-dock-state .catalog-admin-source {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floating-admin-dock-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.4rem;
}
.floating-admin-dock-actions > .admin-action-help-wrap { flex: 0 1 auto; }
.floating-admin-action {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem;
}
.catalog-order-context-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem;
}
body.floating-admin-visible { padding-bottom: 9rem; }
.floating-admin-visible .mobile-filter-shortcut { display: none !important; }
.order-editing-card { position: relative; outline: 2px solid transparent; transition: outline-color 160ms ease, opacity 160ms ease, box-shadow 160ms ease; }
.catalog-order-editing .product-card { transform: none !important; }
.catalog-order-editing .product-card:hover img { transform: none !important; }
.catalog-order-tools {
  position: absolute; z-index: 5; top: 0.65rem; right: 0.65rem; display: flex; align-items: center; gap: 0.35rem;
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.16));
}
.catalog-order-number, .catalog-drag-handle {
  display: grid; width: 2.15rem; height: 2.15rem; place-items: center; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px);
}
.catalog-order-number { font-size: 0.72rem; font-weight: 800; }
.catalog-drag-handle { padding: 0; cursor: grab; font-size: 1.2rem; line-height: 1; touch-action: none; }
.catalog-drag-handle:active { cursor: grabbing; }
.order-editing-card:has(.catalog-drag-handle:focus-visible) { outline-color: var(--leaf); }
.order-editing-card.is-dragging { z-index: 10; opacity: 0.52; outline-color: var(--leaf); box-shadow: var(--shadow); pointer-events: none; }
.catalog-dragging, .catalog-dragging * { user-select: none !important; }
.catalog-drag-invalid, .catalog-drag-invalid * { cursor: not-allowed !important; }
.order-editing-card.is-invalid-drop-target {
  outline-color: #a23a32;
  box-shadow: 0 0 0 4px color-mix(in srgb, #a23a32 18%, transparent);
}
.catalog-order-editing .product-group-break { margin-top: 1.25rem; }
@media (max-width: 620px) {
  .admin-mode-banner { justify-content: space-between; gap: 0.45rem; padding-inline: 0.65rem; }
  .admin-mode-copy { display: none; }
  .catalog-admin-message.is-warning { top: 3.25rem; }
  .floating-admin-dock {
    right: 0.5rem;
    left: 0.5rem;
    bottom: max(0.5rem, env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    transform: none;
  }
  .floating-admin-dock-title { justify-content: flex-start; }
  .floating-admin-dock-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .floating-admin-dock .admin-action-help-wrap > .admin-order-button,
  .admin-transfer-menu > summary { width: 100%; justify-content: center; }
  .catalog-order-context-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-order-context-toolbar[hidden] { display: none !important; }
  .catalog-order-context-toolbar .button { width: 100%; min-height: 2.4rem; white-space: normal; font-size: 0.72rem; line-height: 1.15; }
  .admin-transfer-popover { right: 0; bottom: calc(100% + 0.45rem); }
  .floating-admin-action { min-height: 2.45rem; padding: 0.4rem 0.45rem; white-space: normal; font-size: 0.74rem; line-height: 1.18; }
  body.floating-admin-visible { padding-bottom: 13.5rem; }
  .catalog-admin-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-order-button { white-space: normal; }
  .catalog-order-tools { top: 0.5rem; right: 0.5rem; }
  .admin-confirm-card { grid-template-columns: minmax(0, 1fr); padding: 1.2rem; }
  .admin-confirm-icon { width: 2.55rem; height: 2.55rem; }
  .admin-confirm-actions { grid-column: 1; display: grid; grid-template-columns: 1fr; }
  .admin-confirm-actions .button { width: 100%; }
}


/* --------------------------------------------------------------------------
   v53.8 responsive header + mobile editor refinement
   - full desktop navigation is retained above 1360 CSS px
   - mobile admin chrome prioritises catalogue content
   - floating admin controls collapse to a small launcher on phones
   -------------------------------------------------------------------------- */

.floating-admin-dock-title {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.floating-admin-dock-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  outline-offset: 2px;
  border-radius: 7px;
}
.floating-admin-dock-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  transition: transform 160ms ease;
}
.floating-admin-dock.is-collapsed .floating-admin-dock-chevron { transform: rotate(-90deg); }
.floating-admin-dock.is-collapsed .floating-admin-dock-actions,
.floating-admin-dock.is-collapsed .catalog-order-context-toolbar,
.floating-admin-dock.is-collapsed .floating-admin-dock-state,
.floating-admin-dock.is-collapsed > .catalog-admin-message { display: none !important; }

@media (max-width: 620px) {
  body.admin-mode .demo-banner { display: none; }

  body.admin-mode .admin-mode-banner {
    min-height: 2.2rem;
    gap: 0.35rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.72rem;
  }
  body.admin-mode .admin-mode-icon { font-size: 0.86rem; }
  body.admin-mode .admin-mode-banner strong { letter-spacing: 0.055em; }
  body.admin-mode .admin-mode-banner .admin-current-user {
    margin-left: auto;
    font-size: 0.68rem;
  }
  body.admin-mode .admin-mode-exit {
    padding: 0.16rem 0.45rem;
    font-size: 0.7rem;
  }
  body.admin-mode .site-header { top: 2.2rem; }

  /* Mobile header: public and admin use the same compact single-row layout. */
  .site-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    padding: 0.48rem 0.55rem;
  }
  .brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 7.7rem;
    margin: 0;
    gap: 0.25rem;
  }
  .brand-mark,
  .brand small { display: none; }
  .brand-title-row {
    min-width: 0;
    gap: 0.22rem;
    flex-wrap: nowrap;
  }
  .brand strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    letter-spacing: 0;
  }
  .build-version {
    flex: 0 0 auto;
    min-height: 1.05rem;
    padding: 0.04rem 0.25rem;
    font-size: 0.56rem;
  }
  .header-actions {
    display: grid;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(5.7rem, 1fr) minmax(4.15rem, 0.62fr) auto;
    align-items: center;
    gap: 0.25rem;
  }
  .theme-selector,
  .language-selector,
  .menu-button {
    width: 100%;
    min-width: 0;
    min-height: 2rem;
    max-height: 2rem;
  }
  .theme-selector,
  .language-selector {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.18rem 0.12rem 0.18rem 0.24rem;
  }
  .language-flag { display: none; }
  .theme-selector select,
  .language-selector select {
    min-width: 0;
    padding: 0 1rem 0 0.12rem;
    border: 0;
    background-color: transparent;
    font-size: 0.67rem;
    font-weight: 750;
    line-height: 1.1;
  }
  .menu-button {
    width: auto;
    padding: 0.32rem 0.48rem;
    font-size: 0.68rem;
  }
  .primary-nav {
    right: 0.55rem;
    width: min(300px, calc(100vw - 1.1rem));
  }

  .floating-admin-dock.is-collapsed {
    right: 0.5rem;
    left: auto;
    bottom: max(0.45rem, env(safe-area-inset-bottom));
    width: auto;
    max-width: calc(100vw - 1rem);
    padding: 0.38rem 0.5rem;
    border-radius: 999px;
  }
  .floating-admin-dock.is-collapsed .floating-admin-dock-title {
    gap: 0.35rem;
    padding: 0;
    border-bottom: 0;
    white-space: nowrap;
  }
  .floating-admin-dock.is-collapsed .floating-admin-dock-title > span:first-child { font-size: 0.92rem; }
  .floating-admin-dock.is-collapsed .floating-admin-dock-title strong { font-size: 0.78rem; }
  body.floating-admin-visible.floating-admin-collapsed { padding-bottom: 3.8rem; }
}

@media (max-width: 390px) {
  .site-header { gap: 0.2rem; padding-inline: 0.4rem; }
  .brand { max-width: 6.7rem; }
  .brand strong { font-size: 0.82rem; }
  .header-actions {
    grid-template-columns: minmax(5rem, 1fr) minmax(3.75rem, 0.6fr) auto;
    gap: 0.18rem;
  }
  .theme-selector select,
  .language-selector select { font-size: 0.62rem; }
  .menu-button { padding-inline: 0.4rem; font-size: 0.64rem; }
}

.admin-toast-ok {
  margin-left: 0.85rem;
  border: 1px solid currentColor;
  border-radius: 0.55rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}
.admin-toast-ok:hover,
.admin-toast-ok:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}


/* v53.11.5 — two-row non-phone admin dock.
   Keep the phone layout unchanged. On tablets/laptops/desktops the title and
   action buttons stay in the first row, while user/publish/translation state
   moves to a full-width second row. Primary controls must never depend on
   horizontal-wheel/trackpad scrolling. */
@media (min-width: 621px) {
  .floating-admin-dock {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.38rem 0.55rem;
    padding: 0.46rem 0.62rem 0.5rem;
    border-radius: 12px;
  }

  .floating-admin-dock-title {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-height: 2rem;
    gap: 0.32rem;
    padding: 0 0.55rem 0 0.05rem;
    border-right: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    border-bottom: 0;
    white-space: nowrap;
  }

  .floating-admin-dock-title > span:first-child { font-size: 0.9rem; }
  .floating-admin-dock-title strong { font-size: 0.84rem; line-height: 1.05; }
  .floating-admin-dock-chevron { margin-left: 0.1rem; font-size: 0.68rem; }

  .floating-admin-dock-actions {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    overflow: visible;
  }

  .floating-admin-dock-actions > .admin-action-help-wrap,
  .floating-admin-dock-actions > .floating-admin-action { flex: 0 0 auto; }

  .floating-admin-action,
  .floating-admin-dock .admin-order-button {
    min-height: 2rem;
    padding: 0.32rem 0.52rem;
    font-size: 0.76rem;
    line-height: 1.08;
  }

  .floating-admin-dock .admin-help-trigger {
    top: -0.46rem;
    right: -0.26rem;
    width: 1.12rem;
    height: 1.12rem;
    font-size: 0.62rem;
  }

  .floating-admin-dock-state {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    min-width: 0;
    width: 100%;
    max-width: none;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.15rem 0.65rem;
    padding: 0.34rem 0.05rem 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
    border-left: 0;
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    line-height: 1.18;
  }

  .floating-admin-dock-state .admin-current-user {
    display: inline;
    flex: 0 0 auto;
    margin: 0;
    color: var(--leaf-dark);
    font: inherit;
    font-weight: 800;
    white-space: nowrap;
  }

  .floating-admin-dock-state .catalog-admin-source {
    display: inline;
    flex: 1 1 30rem;
    min-width: 0;
    overflow: visible;
    color: var(--muted);
    font: inherit;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .floating-admin-dock > .catalog-order-context-toolbar {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0;
    border-top: 0;
    overflow: visible;
  }

  .floating-admin-dock > .catalog-order-context-toolbar > .button { flex: 0 0 auto; }

  .floating-admin-dock.is-collapsed {
    grid-template-columns: auto;
    grid-template-rows: auto;
    width: auto;
  }

  .floating-admin-dock.is-collapsed .floating-admin-dock-title {
    grid-column: 1;
    grid-row: 1;
    padding-right: 0.05rem;
    border-right: 0;
  }

  body.floating-admin-visible,
  body.catalog-order-editing.floating-admin-visible { padding-bottom: 7.25rem; }
}

@media (min-width: 621px) and (max-width: 900px) {
  body.floating-admin-visible,
  body.catalog-order-editing.floating-admin-visible { padding-bottom: 9rem; }
}

/* v53.10.0 Series v2 */
.series-card .series-image-button { position: relative; }
.series-count-badge {
  position: absolute; right: .65rem; bottom: .65rem; z-index: 2;
  padding: .28rem .55rem; border-radius: 999px;
  background: rgba(246,243,234,.94); color: var(--ink, #31483b);
  border: 1px solid rgba(49,72,59,.3); font-size: .78rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.series-card .product-title .common-name { display: block; }
.series-dialog { display: grid; gap: 1.2rem; }
.series-dialog-header { display: grid; gap: .35rem; }
.series-dialog-header h2 { margin: 0; display: grid; gap: .15rem; }
.series-dialog-header .scientific-name { font-style: italic; }
.series-dialog-header .common-name { font-size: .78em; font-weight: 500; }
.series-dialog-count { margin: 0; opacity: .72; }
.series-overview-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .65rem;
}
.series-member-card {
  display: grid; gap: .35rem; padding: .38rem; border-radius: .75rem;
  border: 1px solid rgba(49,72,59,.22); background: rgba(255,255,255,.48);
  color: inherit; text-align: left; cursor: pointer;
}
.series-member-card:hover, .series-member-card.is-active { border-color: currentColor; box-shadow: 0 0 0 1px currentColor inset; }
.series-member-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: contain; background: rgba(255,255,255,.62); border-radius: .5rem; }
.series-member-card span { display: flex; align-items: baseline; gap: .35rem; min-width: 0; font-size: .82rem; }
.series-member-card span b { flex: 0 0 auto; }
.series-member-card span:not(b) { overflow-wrap: anywhere; }
.series-purchase-bar {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem 1rem; align-items: center;
  padding: .85rem 1rem; border: 1px solid rgba(49,72,59,.25); border-radius: .9rem; background: rgba(255,255,255,.48);
}
.series-purchase-bar > div { display: flex; flex-wrap: wrap; gap: .45rem .85rem; align-items: baseline; }
.series-purchase-bar > div span { font-size: 1.1rem; font-weight: 700; }
.series-purchase-bar small { grid-column: 1 / -1; opacity: .72; }
.series-selected-product {
  display: grid; grid-template-columns: minmax(220px,.9fr) minmax(280px,1.1fr); gap: 1rem;
  padding-top: 1rem; border-top: 1px solid rgba(49,72,59,.2);
}
.series-selected-visual { min-width: 0; }
.series-selected-visual img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: .7rem; background: rgba(255,255,255,.45); }
.series-selected-details { min-width: 0; }

@media (max-width: 900px) {
  .series-overview-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .series-selected-product { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .series-overview-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
  .series-purchase-bar { grid-template-columns: 1fr; }
  .series-purchase-bar .button { width: 100%; }
}
#product-dialog .series-dialog { clear: both; padding: 1.2rem 2rem 2rem; }
@media (max-width: 620px) { #product-dialog .series-dialog { padding: .5rem 1rem 1.2rem; } }

/* v53.10.1 Series/admin UI polish */
.series-card .product-card-footer { justify-content: flex-start; }

/* v53.10.2 complete-series price and cart bundle */
.series-price-stack {
  display: grid;
  gap: 0.18rem;
}
.series-price-current {
  color: var(--leaf-dark);
  font-weight: 800;
}
.series-price-stack small {
  color: var(--muted);
  font-size: 0.78rem;
}
.series-price-stack del {
  opacity: 0.72;
}
.cart-series-row {
  align-items: start;
}
.cart-series-members {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.cart-series-members summary {
  cursor: pointer;
  font-weight: 700;
}
.cart-series-members ul {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}
.cart-series-members li + li {
  margin-top: 0.15rem;
}


/* v53.11.1 — fixed product gallery viewer canvas
   The standard webshop artwork canvas is 560x700 (4:5). Supplementary images
   are contained inside this stable stage instead of resizing the modal. */
#product-dialog .product-image-inspector {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}

#product-dialog .product-dialog-grid .product-image-inspector > img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 620px) {
  #product-dialog .product-image-inspector {
    aspect-ratio: 4 / 5;
  }

  #product-dialog .product-image-inspector > img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
  }
}

/* v53.12.0 admin visitor analytics */
.admin-analytics-dialog {
  width: min(1180px, calc(100vw - 2rem));
  max-width: none;
  height: min(860px, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: inherit;
}
.admin-analytics-dialog::backdrop { background: rgba(12, 18, 14, 0.58); backdrop-filter: blur(5px); }
.admin-analytics-shell { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.admin-analytics-header {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--leaf) 8%);
}
.admin-analytics-header .eyebrow { margin: 0 0 0.15rem; }
.admin-analytics-header h2 { margin: 0; font-size: clamp(1.35rem, 2vw, 1.9rem); }
.admin-analytics-header p:last-child { margin: 0.3rem 0 0; color: var(--muted); }
.admin-analytics-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 97%, var(--ink) 3%);
}
.admin-analytics-ranges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-analytics-ranges button {
  min-height: 2.2rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.admin-analytics-ranges button.is-active {
  color: var(--on-accent);
  border-color: var(--leaf-dark);
  background: var(--leaf-dark);
}
.admin-analytics-content { min-height: 0; overflow: auto; padding: 1rem 1.2rem 1.25rem; }
.admin-analytics-loading, .admin-analytics-error { margin: 2rem auto; max-width: 680px; text-align: center; color: var(--muted); }
.admin-analytics-error { color: #9c2f2f; font-weight: 800; }
.admin-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.admin-analytics-card {
  min-width: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--leaf) 4%);
}
.admin-analytics-card span { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 800; line-height: 1.25; }
.admin-analytics-card strong { display: block; margin-top: 0.3rem; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1; }
.admin-analytics-card small { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.68rem; line-height: 1.35; }
.admin-analytics-section {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.admin-analytics-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; margin-bottom: 0.7rem; }
.admin-analytics-section h3 { margin: 0; font-size: 1rem; }
.admin-analytics-section-head small { color: var(--muted); }
.admin-analytics-trend {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8px, 1fr);
  align-items: end;
  gap: 2px;
  min-height: 180px;
  padding: 0.6rem 0.1rem 0.2rem;
  border-bottom: 1px solid var(--line);
}
.admin-analytics-trend-day {
  position: relative;
  display: flex;
  height: 160px;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1px;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
}
.admin-analytics-trend-day > span { display: block; width: 100%; min-height: 0; }
.admin-analytics-trend-page { background: color-mix(in srgb, var(--leaf) 72%, var(--surface)); }
.admin-analytics-trend-product { background: color-mix(in srgb, var(--leaf-dark) 82%, var(--surface)); }
.admin-analytics-trend-series { background: color-mix(in srgb, #b78945 78%, var(--surface)); }
.admin-analytics-trend-day.is-empty { min-height: 1px; background: color-mix(in srgb, var(--line) 45%, transparent); }
.admin-analytics-legend { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.55rem; color: var(--muted); font-size: 0.7rem; }
.admin-analytics-legend span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.3rem; border-radius: 2px; vertical-align: -0.08rem; }
.admin-analytics-legend .page::before { background: color-mix(in srgb, var(--leaf) 72%, var(--surface)); }
.admin-analytics-legend .product::before { background: color-mix(in srgb, var(--leaf-dark) 82%, var(--surface)); }
.admin-analytics-legend .series::before { background: color-mix(in srgb, #b78945 78%, var(--surface)); }
.admin-analytics-columns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.9rem; }
.admin-analytics-top-list, .admin-analytics-country-list, .admin-analytics-device-list { display: grid; gap: 0.45rem; }
.admin-analytics-top-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.4rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--ink) 4%);
}
.admin-analytics-top-item img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.admin-analytics-top-copy { min-width: 0; }
.admin-analytics-top-copy strong, .admin-analytics-top-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-analytics-top-copy small { margin-top: 0.12rem; color: var(--muted); }
.admin-analytics-top-count { text-align: right; white-space: nowrap; }
.admin-analytics-top-count strong { display: block; font-size: 1rem; }
.admin-analytics-top-count small { color: var(--muted); }
.admin-analytics-rank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}
.admin-analytics-rank-copy { min-width: 0; display: flex; align-items: center; gap: 0.4rem; }
.admin-analytics-rank-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.admin-analytics-rank-copy small { color: var(--muted); white-space: nowrap; }
.admin-analytics-bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--line) 55%, transparent); }
.admin-analytics-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--leaf-dark); }
.admin-analytics-recent { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.admin-analytics-recent th, .admin-analytics-recent td { padding: 0.48rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-analytics-recent th { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-analytics-recent td:first-child { white-space: nowrap; }
.admin-analytics-footer-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.7rem; line-height: 1.45; }
.admin-analytics-empty { margin: 0.8rem 0; color: var(--muted); }
@media (max-width: 900px) {
  .admin-analytics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-analytics-columns { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .admin-analytics-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .admin-analytics-header { padding: 0.85rem 0.9rem; }
  .admin-analytics-toolbar { padding: 0.65rem 0.8rem; }
  .admin-analytics-content { padding: 0.75rem 0.8rem 1rem; }
  .admin-analytics-summary { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .admin-analytics-card { padding: 0.72rem; }
  .admin-analytics-recent { display: block; overflow-x: auto; white-space: nowrap; }
  .admin-analytics-trend { min-height: 140px; }
  .admin-analytics-trend-day { height: 120px; }
}

/* --------------------------------------------------------------------------
   v53.12.3 — catalogue density, compact desktop product viewer and public
   paper/size variant chooser
   -------------------------------------------------------------------------- */

/* Product variants are a visible choice table, never a SKU-driven dropdown. */
.product-variant-choices {
  margin: 1rem 0 1.15rem;
}

.product-variant-choices > h3 {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.product-variant-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--surface);
}

.product-variant-table-head,
.product-variant-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(5.5rem, 0.72fr) minmax(9rem, 1.5fr) minmax(6.2rem, 0.8fr) minmax(7.2rem, 0.9fr);
  align-items: center;
  gap: 0.65rem;
}

.product-variant-table-head {
  padding: 0.48rem 0.65rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--paper-deep) 66%, var(--surface));
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.product-variant-row {
  position: relative;
  margin: 0;
  padding: 0.62rem 0.65rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.product-variant-row + .product-variant-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.product-variant-row:hover,
.product-variant-row:focus-within {
  background: color-mix(in srgb, var(--paper-deep) 48%, transparent);
}

.product-variant-row.is-selected {
  background: color-mix(in srgb, var(--leaf) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--leaf-dark);
}

.product-variant-row.is-unavailable {
  cursor: not-allowed;
  opacity: 0.52;
}

.product-variant-choice {
  display: grid;
  place-items: center;
}

.product-variant-choice input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--leaf-dark);
}

.product-variant-size,
.product-variant-paper,
.product-variant-status {
  min-width: 0;
  line-height: 1.3;
}

.product-variant-paper {
  font-size: 0.82rem;
}


.product-variant-price {
  font-size: 0.82rem;
  white-space: nowrap;
}

.product-variant-status {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.product-variant-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.35rem 0 1rem;
}

.product-variant-features span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Public product IDs/SKUs are implementation details, not shopping choices. */
#product-dialog .product-code {
  display: none !important;
}

/* Keep all alternate images on one compact row; many images scroll horizontally
   instead of making the modal grow vertically. */
#product-dialog .product-gallery-thumbnails {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 0.55rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.12rem 0.28rem;
  scrollbar-width: thin;
}

#product-dialog .product-gallery-thumbnail {
  width: 4.6rem;
  min-width: 4.6rem;
  height: 5.75rem;
  aspect-ratio: 4 / 5;
}

/* Laptop/desktop: the artwork area is deliberately smaller so the fixed 4:5
   viewer plus thumbnails normally fit in one viewport. The information column
   remains independently scrollable. */
@media (min-width: 1025px) {
  #product-dialog {
    width: min(1240px, calc(100vw - 2rem));
    max-height: 94dvh;
    overflow: hidden;
  }

  #product-dialog > .dialog-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    float: none;
    margin: 0;
  }

  #product-dialog .product-dialog-grid {
    height: 94dvh;
    max-height: 94dvh;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 0.9fr) minmax(410px, 1fr);
    gap: clamp(0.85rem, 1.6vw, 1.35rem);
    padding: 1.35rem 1.45rem 1.5rem 1.35rem;
    overflow: hidden;
  }

  #product-dialog .product-dialog-visual {
    display: flex;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
  }

  #product-dialog .product-image-inspector {
    width: min(86%, 56dvh);
    flex: 0 0 auto;
  }

  #product-dialog .product-gallery-thumbnails {
    width: min(86%, 56dvh);
    flex: 0 0 auto;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    width: min(100%, 42rem);
    max-height: 9.25rem;
    align-self: flex-end;
    flex: 0 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #product-dialog .product-dialog-details {
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.25rem 0 1rem 0;
    scrollbar-gutter: stable;
  }
}

/* Tablet: no five-column catalogue mode; product details can remain naturally
   scrollable while the public variant table stays readable. */
@media (min-width: 621px) and (max-width: 1024px) {
  .product-variant-table-head,
  .product-variant-row {
    grid-template-columns: 2rem minmax(5rem, 0.72fr) minmax(8rem, 1.35fr) minmax(5.8rem, 0.78fr) minmax(6.7rem, 0.85fr);
    gap: 0.5rem;
  }
}

/* Mobile: the normal user choices are 2/3 columns. One column survives only as
   an automatic safety fallback on exceptionally narrow screens. */
@media (max-width: 360px) {
  .catalogue-display-controls {
    display: none !important;
  }

  #collection .product-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .product-variant-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .product-variant-table-head {
    display: none;
  }

  .product-variant-row {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    gap: 0.28rem 0.65rem;
    margin-bottom: 0.48rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line) !important;
    border-radius: 0.5rem;
    background: var(--surface);
  }

  .product-variant-choice {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .product-variant-size {
    grid-column: 2;
    grid-row: 1;
    font-weight: 800;
  }

  .product-variant-paper {
    grid-column: 2;
    grid-row: 2;
    color: var(--muted);
  }

  .product-variant-price {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }

  .product-variant-status {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   v53.12.3 — product/series modal space-use and purchase-layout hotfix
   -------------------------------------------------------------------------- */

/* Keep short thumbnail strips visually centred, while overflowing strips remain scrollable. */
#product-dialog .product-gallery-thumbnails {
  justify-content: safe center;
}

/* Artwork metadata and purchase action use the horizontal space instead of stacking
   everything vertically on desktop. */
.product-purchase-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(12rem, 0.92fr);
  gap: 1rem 1.35rem;
  align-items: start;
  margin-top: 0.8rem;
}

.product-purchase-meta .detail-list {
  margin: 0;
}

.product-purchase-actions {
  min-width: 0;
  align-self: start;
}

.product-purchase-actions .price {
  margin: 0 0 0.75rem;
}

.product-purchase-actions .product-availability {
  margin: 0 0 0.9rem;
}

.product-purchase-actions .button {
  max-width: 100%;
}

/* Do not hide a taxon name merely to force a line: keep each Latin/common segment
   intact and only wrap between the two when the widened panel still needs it. */
.taxon-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: baseline;
  overflow: visible;
}

.taxon-latin,
.taxon-common {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Series/grouped products use the same left-visual/right-information grammar as a
   normal product. Member images behave like a compact thumbnail strip instead of
   consuming the full dialog height. */
.series-dialog-visual,
.series-dialog-details {
  min-width: 0;
}

.series-selected-visual {
  display: grid;
  place-items: center;
  min-width: 0;
}

.series-selected-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.series-dialog .series-overview-grid {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0.15rem 0.35rem;
  scrollbar-width: thin;
  justify-content: safe center;
}

.series-dialog .series-member-card {
  width: 4.7rem;
  min-width: 4.7rem;
  gap: 0.2rem;
  padding: 0.22rem;
  border-radius: 0.5rem;
}

.series-dialog .series-member-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
}

.series-dialog .series-member-card > span {
  justify-content: center;
  min-width: 0;
  font-size: 0.7rem;
}

.series-dialog .series-member-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 1025px) {
  /* The inspector itself had align-self:start in the base magnifier rule. Override it
     explicitly so unused space stays on the OUTSIDE of the modal, not between columns. */
  #product-dialog .product-dialog-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
    gap: clamp(0.35rem, 0.75vw, 0.7rem);
    padding-inline: 1.2rem;
  }

  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails {
    align-self: flex-end;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    width: min(100%, 39rem);
    align-self: flex-end;
  }

  #product-dialog .series-dialog {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
    gap: clamp(0.35rem, 0.75vw, 0.7rem);
    width: 100%;
    height: 94dvh;
    max-height: 94dvh;
    box-sizing: border-box;
    padding: 1.35rem 1.2rem 1.5rem;
    overflow: hidden;
  }

  #product-dialog .series-dialog-visual {
    display: flex;
    min-height: 0;
    max-height: 100%;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
  }

  #product-dialog .series-selected-visual {
    width: min(82%, 52dvh);
    aspect-ratio: 4 / 5;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
  }

  #product-dialog .series-overview-grid {
    width: min(82%, 52dvh);
    flex: 0 0 auto;
    margin-top: 0.7rem;
  }

  #product-dialog .series-member-name {
    display: none;
  }

  #product-dialog .series-dialog-details {
    min-height: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1.1rem 0 1rem 0.15rem;
    scrollbar-gutter: stable;
  }

  #product-dialog .series-dialog-header,
  #product-dialog .series-selected-details,
  #product-dialog .series-purchase-bar {
    min-width: 0;
  }

  #product-dialog .series-selected-details {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(49,72,59,.2);
  }

  #product-dialog .series-purchase-bar {
    margin-top: 1rem;
  }
}

@media (max-width: 1024px) {
  .product-purchase-meta {
    grid-template-columns: 1fr;
  }

  #product-dialog .series-dialog-visual {
    display: grid;
    gap: 0.65rem;
  }

  #product-dialog .series-selected-visual {
    width: min(100%, 30rem);
    aspect-ratio: 4 / 5;
    justify-self: center;
    border: 1px solid var(--line);
    background: var(--surface);
  }

  #product-dialog .series-overview-grid {
    width: min(100%, 30rem);
    justify-self: center;
  }

  #product-dialog .series-dialog-details {
    padding-top: 0.75rem;
  }
}


/* --------------------------------------------------------------------------
   v53.12.4 — desktop modal spacing / taxa width refinement
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Keep a deliberate ~2 cm visual gutter between the left artwork and the
     right information panel instead of collapsing the two columns together. */
  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    gap: 2cm;
  }

  /* The taxa / “A táblán szereplő növények” panel must align exactly with
     the artwork canvas: same computed width and same right edge. */
  #product-dialog .product-dialog-visual > .taxa-panel {
    width: min(86%, 56dvh);
    max-width: none;
    box-sizing: border-box;
    align-self: flex-end;
  }
}


/* --------------------------------------------------------------------------
   v53.12.5 — balanced 50/50 product/series modal columns
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* The two primary modal regions now share the usable width equally. The
     deliberate 2 cm gutter remains between them. */
  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2cm;
  }

  /* Fill the left half much more naturally without exceeding the viewport
     height. Taxa and thumbnails remain locked to the artwork width. */
  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails,
  #product-dialog .product-dialog-visual > .taxa-panel,
  #product-dialog .series-selected-visual,
  #product-dialog .series-overview-grid {
    width: min(100%, 58dvh);
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    max-width: none;
    box-sizing: border-box;
  }
}


/* --------------------------------------------------------------------------
   v53.12.6 — centred taxa panel, always-visible variant table and smaller
   series selector thumbnails
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #product-dialog .product-dialog-visual,
  #product-dialog .series-dialog-visual {
    align-items: center;
    justify-content: center;
  }

  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails,
  #product-dialog .product-dialog-visual > .taxa-panel,
  #product-dialog .series-selected-visual,
  #product-dialog .series-overview-grid {
    width: min(100%, 60dvh);
    align-self: center;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    margin-inline: auto;
    max-height: min(15rem, 30dvh);
    overflow-y: auto;
  }
}

#product-dialog .product-dialog-visual > .taxa-panel {
  text-align: left;
}

#product-dialog .product-dialog-visual > .taxa-panel ul {
  gap: 0.55rem;
}

#product-dialog .series-dialog .series-member-card {
  width: 4rem;
  min-width: 4rem;
  padding: 0.2rem;
}

#product-dialog .series-dialog .series-member-card > span {
  font-size: 0.66rem;
}

#product-dialog .series-dialog .series-member-card img {
  padding: 0.18rem;
  box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   v53.12.7 — accepted numbered-plate product layout
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2cm;
  }

  #product-dialog .product-dialog-visual {
    align-items: flex-end;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails,
  #product-dialog .product-dialog-visual > .taxa-panel {
    width: min(100%, 56dvh);
    max-width: none;
    align-self: flex-end;
    box-sizing: border-box;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    flex: 0 0 auto;
    max-height: none;
    margin: 0.7rem 0 0;
    padding: 0.68rem 0.8rem;
    overflow: visible;
  }

  #product-dialog .product-dialog-visual > .taxa-panel h3 {
    margin-bottom: 0.42rem;
    font-size: 0.72rem;
  }

  #product-dialog .product-dialog-visual > .taxa-panel ul {
    gap: 0.3rem;
  }

  #product-dialog .product-dialog-visual > .taxa-panel.has-marker-map li {
    grid-template-columns: 1.35rem minmax(0, 1fr);
    gap: 0.48rem;
    align-items: center;
  }

  #product-dialog .product-dialog-visual > .taxa-panel .taxon-marker {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0;
    font-size: 0.6rem;
  }

  #product-dialog .product-dialog-visual > .taxa-panel .taxon-name {
    flex-wrap: nowrap;
    gap: 0.18rem 0.4rem;
    overflow: visible;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  #product-dialog .product-dialog-visual > .taxa-panel .taxon-latin,
  #product-dialog .product-dialog-visual > .taxa-panel .taxon-common {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}


/* --------------------------------------------------------------------------
   v53.12.8 — centred left visual, single-scroll modal and fixed CTA position
   -------------------------------------------------------------------------- */
html.product-dialog-page-locked,
body.product-dialog-page-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (min-width: 1025px) {
  #product-dialog {
    width: min(1500px, calc(100vw - 1.25rem));
    height: min(96dvh, 980px);
    max-height: min(96dvh, 980px);
    overflow: hidden;
    overscroll-behavior: contain;
  }

  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.1rem, 1.8vw, 2rem);
    padding: 1.15rem 1.35rem 1.25rem;
    overflow: hidden;
  }

  /* The artwork is centred inside its own 50% column. Any unused horizontal
     space is therefore split equally on the left and right of the image. */
  #product-dialog .product-dialog-visual,
  #product-dialog .series-dialog-visual {
    min-height: 0;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
  }

  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails,
  #product-dialog .product-dialog-visual > .taxa-panel,
  #product-dialog .series-selected-visual,
  #product-dialog .series-overview-grid {
    width: min(100%, 52dvh);
    max-width: 100%;
    align-self: center;
    box-sizing: border-box;
  }

  #product-dialog .product-dialog-visual > .taxa-panel {
    margin: 0.55rem auto 0;
    max-height: none;
    overflow: visible;
  }

  /* Only the information side may scroll as a fallback. No left-side or outer
     dialog scrollbar is created. */
  #product-dialog .product-dialog-details,
  #product-dialog .series-dialog-details {
    display: flex;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
    padding: 0.85rem 0.2rem 0.75rem 0;
  }

  #product-dialog .product-dialog-details h2,
  #product-dialog .series-dialog-header h2 {
    margin-bottom: 0.55rem;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.03;
  }

  #product-dialog .product-dialog-grid .common-name,
  #product-dialog .series-dialog-header .common-name {
    margin-top: 0.22rem;
  }

  #product-dialog .publication-reference {
    margin-block: 0.7rem;
  }

  #product-dialog .product-description p {
    margin-bottom: 0.65rem;
    line-height: 1.58;
  }

  #product-dialog .product-variant-choices {
    margin: 0.65rem 0 0.75rem;
  }

  /* Metadata remains on the lower left; the CTA is visually isolated at the
     lower-right corner whenever the content fits without scrolling. */
  #product-dialog .product-purchase-meta {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-top: auto;
    padding-top: 0.8rem;
  }

  #product-dialog .product-purchase-actions {
    justify-self: end;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

  #product-dialog .product-purchase-actions .button {
    min-width: 12.5rem;
  }

  /* Series member thumbnails stay centred under the selected artwork. */
  #product-dialog .series-overview-grid,
  #product-dialog .product-gallery-thumbnails {
    justify-content: safe center;
  }
}

/* --------------------------------------------------------------------------
   v53.12.10 — content-fit desktop modal + table-based Series purchase details
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Let short product dialogs shrink to their real content instead of reserving
     nearly the full viewport height. Long dialogs are still capped and only the
     right information pane may scroll as a fallback. */
  #product-dialog {
    height: fit-content;
    max-height: min(96dvh, 980px);
    overflow: hidden;
  }

  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    height: fit-content;
    max-height: min(94dvh, 950px);
    align-items: stretch;
    overflow: hidden;
  }

  #product-dialog .product-dialog-visual,
  #product-dialog .series-dialog-visual {
    height: auto;
    max-height: min(91dvh, 920px);
  }

  #product-dialog .product-dialog-details,
  #product-dialog .series-dialog-details {
    height: auto;
    max-height: min(91dvh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Series members use the same clear radio/table variant UI as standalone
     products. Keep the selected-artwork action separate from the complete-
     series purchase bar below it. */
  #product-dialog .series-selected-details .product-variant-choices {
    margin: 0.65rem 0 0.8rem;
  }

  #product-dialog .series-selected-details .product-purchase-meta {
    margin-top: 0.75rem;
  }

  #product-dialog .series-purchase-bar {
    margin-top: 0.9rem;
  }
}

/* --------------------------------------------------------------------------
   v53.12.10 — horizontally content-fit product modal + all-series-items table
   -------------------------------------------------------------------------- */
.series-variant-choices {
  margin: 0.65rem 0 0.85rem;
}

.series-variant-choices > h3 {
  margin: 0 0 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.series-variant-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  background: var(--surface);
}

.series-variant-table-head,
.series-variant-row {
  display: grid;
  grid-template-columns: 2.1rem minmax(9.5rem, 1.45fr) minmax(4.9rem, 0.6fr) minmax(8.5rem, 1.25fr) minmax(6.2rem, 0.7fr) minmax(7.2rem, 0.8fr);
  align-items: center;
  gap: 0.55rem;
}

.series-variant-table-head {
  padding: 0.48rem 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: color-mix(in srgb, var(--paper-deep) 66%, var(--surface));
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.series-variant-row {
  position: relative;
  margin: 0;
  padding: 0.58rem 0.6rem;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.series-variant-row + .series-variant-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.series-variant-row:hover,
.series-variant-row:focus-within {
  background: color-mix(in srgb, var(--paper-deep) 48%, transparent);
}

.series-variant-row.is-selected {
  background: color-mix(in srgb, var(--leaf) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--leaf-dark);
}

.series-variant-row.is-unavailable {
  cursor: not-allowed;
  opacity: 0.52;
}

.series-variant-artwork {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.38rem;
  line-height: 1.25;
}

.series-variant-artwork b {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
}

.series-variant-artwork span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  .series-variant-table {
    border: 0;
    background: transparent;
  }

  .series-variant-table-head {
    display: none;
  }

  .series-variant-row {
    grid-template-columns: 1.7rem minmax(0, 1fr) auto;
    gap: 0.28rem 0.65rem;
    margin-bottom: 0.48rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--line) !important;
    border-radius: 0.5rem;
    background: var(--surface);
  }

  .series-variant-row .product-variant-choice {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
  }

  .series-variant-artwork {
    grid-column: 2 / 4;
    grid-row: 1;
    font-weight: 800;
  }

  .series-variant-row .product-variant-size {
    grid-column: 2;
    grid-row: 2;
  }

  .series-variant-row .product-variant-paper {
    grid-column: 2;
    grid-row: 3;
    color: var(--muted);
  }

  .series-variant-row .product-variant-price {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
  }

  .series-variant-row .product-variant-status {
    grid-column: 3;
    grid-row: 3;
    text-align: right;
  }
}

@media (min-width: 1280px) {
  /* Horizontal sizing now follows the real content as well: the artwork column
     is only as wide as the artwork plus small symmetric breathing room, while
     the information side gets the width it needs. This removes large unused
     stripes around a short/single-image product without reintroducing fixed
     2 cm spacing. */
  #product-dialog {
    width: fit-content;
    max-width: calc(100vw - 1.25rem);
  }

  #product-dialog .product-dialog-grid,
  #product-dialog .series-dialog {
    width: max-content;
    max-width: calc(100vw - 1.25rem);
    gap: clamp(0.9rem, 1.45vw, 1.55rem);
  }

  #product-dialog .product-dialog-grid {
    grid-template-columns: max-content clamp(36rem, 42vw, 46rem);
  }

  #product-dialog .series-dialog {
    grid-template-columns: max-content clamp(42rem, 48vw, 54rem);
  }

  #product-dialog .product-dialog-visual,
  #product-dialog .series-dialog-visual {
    width: min(58dvh, 38rem);
    max-width: min(58dvh, 38rem);
    box-sizing: border-box;
    padding-inline: clamp(0.3rem, 0.55vw, 0.65rem);
  }

  #product-dialog .product-image-inspector,
  #product-dialog .product-gallery-thumbnails,
  #product-dialog .product-dialog-visual > .taxa-panel,
  #product-dialog .series-selected-visual,
  #product-dialog .series-overview-grid {
    width: 100%;
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  /* Extra content below the artwork consumes vertical room. Scale those cases
     slightly more aggressively while leaving simple single-image products
     larger. This keeps the left column complete without its own scrolling or
     clipping. */
  #product-dialog .product-dialog-visual.has-gallery:not(.has-taxa) {
    width: min(56dvh, 37rem);
    max-width: min(56dvh, 37rem);
  }

  #product-dialog .product-dialog-visual.has-taxa:not(.has-gallery) {
    width: min(54dvh, 36rem);
    max-width: min(54dvh, 36rem);
  }

  #product-dialog .product-dialog-visual.has-gallery.has-taxa,
  #product-dialog .series-dialog-visual {
    width: min(52dvh, 35rem);
    max-width: min(52dvh, 35rem);
  }
}

/* v53.18.1: one unobtrusive enquiry action, no status duplications. */
.artwork-enquiry-button { display: inline-flex; width: fit-content; max-width: 100%; margin: .4rem 0 .8rem; text-decoration: none; }

/* v53.18.2 — enquiry CTA sits above Add to collection with identical footprint. */
#product-dialog .product-purchase-actions { display: flex; flex-direction: column; align-items: stretch; gap: .55rem; width: max-content; max-width: 100%; }
#product-dialog .product-purchase-actions > .button { box-sizing: border-box; width: 100%; min-width: 12.5rem; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
#product-dialog .product-purchase-actions > .artwork-enquiry-button { margin: 0; text-decoration: none; }

/* Career archive & archival work photograph (v53.18.5) */
.artist-at-work{display:grid;grid-template-columns:minmax(220px,375px) 1fr;gap:2rem;align-items:center;margin-top:2rem;padding:1.3rem;background:var(--surface, #f7f7f3);border:1px solid #d8ded4;border-radius:14px}
.artist-at-work figure{margin:0}.artist-at-work img{width:100%;height:auto;display:block;border-radius:10px}.artist-at-work figcaption{font-size:.78rem;line-height:1.45;margin-top:.5rem;color:var(--muted, #68766b)}
.artist-at-work h3{font:normal clamp(1.4rem,2.8vw,2rem)/1.25 Georgia,serif;color:var(--ink, #30473a);margin:.35rem 0 1rem}.artist-at-work p:not(.eyebrow){max-width:60ch}
.artist-career-cta{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;margin-top:1.6rem;padding:1.4rem 1.6rem;background:#f5f7f1;border:1px solid #d8ded4;border-radius:14px;color:#30473a}
.artist-career-cta h3{font:normal clamp(1.35rem,2.4vw,1.85rem)/1.23 Georgia,serif;margin:.4rem 0}.artist-career-cta p{max-width:58ch}.artist-career-cta .button{flex-shrink:0}
@media(max-width:750px){.artist-at-work{grid-template-columns:1fr}.artist-at-work figure{max-width:600px}.artist-career-cta{flex-direction:column;align-items:start}.artist-career-cta .button{max-width:100%}}

/* v53.18.7: the headline spans both hero columns, without truncating.
   Keep the existing eyebrow typography and every theme's heading font family. */
.hero .hero-heading {
  grid-column: 1 / -1;
  min-width: 0;
  align-self: end;
}
.hero .hero-heading .eyebrow { margin-bottom: 0.7rem; }
.hero .hero-heading h1 {
  margin: 0;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2.2rem, 3.3vw, 3.45rem);
  line-height: 1.15;
}
.hero .hero-heading .hero-title-line {
  display: block;
  white-space: nowrap;
}
.hero .hero-copy { min-width: 0; }
/* On small screens, readable text is more important than forced no-wrap. */
@media (max-width: 760px) {
  .hero .hero-heading h1 {
    white-space: normal;
    font-size: clamp(1.85rem, 5.4vw, 2.3rem);
    overflow-wrap: normal;
  }
}

/* v53.18.8: keep the two intentional title lines readable on narrow screens. */
@media (max-width: 760px) { .hero .hero-heading .hero-title-line { white-space: normal; } }

/* v53.18.8: display the Cart review CTA on one line on desktop. */
#open-cart-contact { white-space: nowrap; flex-shrink: 0; }

/* v53.18.12 — reduce ONLY desktop hero top space; <=900px layout stays byte-identical. */
@media (min-width: 901px) {
  .hero { padding-top: 2.5rem; }
}

/* v53.18.22 — four distinct gallery identities. */
/* Earth & Linen: one continuous earth-tone plane, no bright caption boxes. */
html[data-theme="gallery"] #collection { background: #e9dfd2; }
html[data-theme="gallery"] #collection .product-card,
html[data-theme="gallery"] #collection .product-card-body { background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme="gallery"] #collection .product-card-body { padding: .88rem .35rem .4rem; border-top: 1px solid rgba(89,69,51,.22); color: #45372e; }
html[data-theme="gallery"] #collection .product-card h3 { color: #443329; }
html[data-theme="gallery"] #collection .product-card .price,
html[data-theme="gallery"] #collection .product-card .product-meta { color: #5d4939; }
html[data-theme="gallery"] #collection .product-card img { box-shadow: none; }

/* Pastel: joyful translucent blush and lilac colour blocks, soft rounded shapes. */
html[data-theme="pastel"] {
  --paper: #fff5f1; --paper-deep: #f3dbe7; --ink: #49384d; --muted: #80677a;
  --line: #e9cbdd; --leaf: #c47c9f; --leaf-dark: #8c4d79;
  --surface: #fff8fb; --on-accent: #fff; --radius: 28px;
  --shadow: 0 14px 36px rgba(143,79,124,.12);
}
html[data-theme="pastel"] body { background: radial-gradient(circle at 8% 6%,#ffe0d2 0,transparent 32rem),radial-gradient(circle at 90% 32%,#e9e1ff 0,transparent 39rem),linear-gradient(135deg,#fff3ef,#fcf3ff 62%,#eef9f5); }
html[data-theme="pastel"] .site-header { background: rgba(255,246,252,.9); }
html[data-theme="pastel"] #collection { background: rgba(252,231,247,.44); }
html[data-theme="pastel"] #collection .product-card { overflow: hidden; border: 1px solid #e7c4d8; border-radius: 26px; background: #fff3f9; box-shadow: 0 14px 29px rgba(136,70,111,.09); }
html[data-theme="pastel"] #collection .product-card:nth-child(3n + 2) { background: #f1ecff; border-color: #dcd0f1; }
html[data-theme="pastel"] #collection .product-card:nth-child(3n) { background: #ebf8ef; border-color: #cfdfd6; }
html[data-theme="pastel"] #collection .product-card-body { background: transparent; padding: 1rem 1rem 1.1rem; }
html[data-theme="pastel"] #collection .product-card img { border-radius: 21px 21px 0 0; }
html[data-theme="pastel"] .filter-button.active,
html[data-theme="pastel"] .button.primary { background: #8c4d79 !important; color: #fff !important; }
html[data-theme="pastel"] .hero-art { border-color: #d9a9ca; border-radius: 32px; }
html[data-theme="pastel"] .artist-section { background: #f8eaf5; }
html[data-theme="pastel"] .process-section { background: #f0edfa; }
html[data-theme="pastel"] .contact-section { background: #54344f; }

/* Elegant: black + champagne museum, sharp-edged mounted artwork. */
html[data-theme="elegant"] {
  --paper: #f1eee8; --paper-deep: #ded5c7; --ink: #241e19; --muted: #6d6156;
  --line: #c4b59b; --leaf: #a5844d; --leaf-dark: #27221e;
  --surface: #f9f6ef; --on-accent: #fffaf0; --radius: 3px;
  --shadow: 0 18px 32px rgba(27,21,15,.1);
}
html[data-theme="elegant"] body { background: linear-gradient(180deg,#eee9e0 0%,#f5f1e9 36%,#e8e1d6 100%); font-family: "Helvetica Neue",Arial,sans-serif; }
html[data-theme="elegant"] .site-header { background: rgba(33,29,27,.96); border-bottom: 2px solid #bba06b; color: #f4e9d6; }
html[data-theme="elegant"] .site-header .brand strong,
html[data-theme="elegant"] .site-header .brand small,
html[data-theme="elegant"] .site-header .primary-nav a { color: #f4e9d6; }
html[data-theme="elegant"] .site-header .brand-mark { background: #27221e; color: #d5b980; border-color: #9e845f; }
html[data-theme="elegant"] .site-header .cart-button,
html[data-theme="elegant"] .site-header .theme-selector,
html[data-theme="elegant"] .site-header .language-selector { color: #f4e9d6; border-color: #a18c70; }
html[data-theme="elegant"] .site-header select,
html[data-theme="elegant"] .site-header .theme-step { color: #f4e9d6; }
html[data-theme="elegant"] #collection { background: #ebe5db; }
html[data-theme="elegant"] #collection .product-card { border: 1px solid #c0b098; border-radius: 0; background: #faf6ef; box-shadow: 0 15px 25px rgba(40,30,20,.11); }
html[data-theme="elegant"] #collection .product-card-body { padding: 1.1rem 1rem 1.25rem; border-top: 3px double #b6a183; background: #f6f0e5; text-align: center; }
html[data-theme="elegant"] #collection .product-card h3 { font-family: Georgia,serif; letter-spacing: -.02em; }
html[data-theme="elegant"] #collection .product-card-footer { justify-content: center; }
html[data-theme="elegant"] .hero-art { border: 8px solid #29231f; border-radius: 0; background: #f4efdf; }
html[data-theme="elegant"] .artist-section { background: #ded5c7; }
html[data-theme="elegant"] .process-section { background: #f5f0e7; }

/* Rainforest: high-contrast deep canopy and jade, unlike Botanical Atelier. */
html[data-theme="rainforest"] {
  --paper: #11281f; --paper-deep: #1b392c; --ink: #eff4e8; --muted: #b8ccb8;
  --line: #4c715b; --leaf: #a4d79f; --leaf-dark: #24634b; --surface: #19382b;
  --on-accent: #fff; --radius: 12px; --shadow: 0 20px 50px rgba(3,18,12,.34);
}
html[data-theme="rainforest"] body { background: radial-gradient(ellipse at 8% 0,rgba(72,134,79,.3),transparent 36rem),radial-gradient(ellipse at 100% 38%,rgba(33,113,88,.35),transparent 42rem),linear-gradient(150deg,#0b2219,#173b2b 58%,#0b2019); color: var(--ink); }
html[data-theme="rainforest"] .site-header { background: rgba(7,33,23,.96); border-bottom: 1px solid #568063; color: #eaf4e3; }
html[data-theme="rainforest"] .site-header .brand strong,
html[data-theme="rainforest"] .site-header .brand small,
html[data-theme="rainforest"] .site-header .primary-nav a { color: #eaf4e3; }
html[data-theme="rainforest"] .brand-mark { background: #2d6346; color: #e4f5cb; border-color: #a2c78b; }
html[data-theme="rainforest"] .site-header .cart-button,
html[data-theme="rainforest"] .site-header .theme-selector,
html[data-theme="rainforest"] .site-header .language-selector { color: #eaf4e3; border-color: #62976c; }
html[data-theme="rainforest"] .site-header select,
html[data-theme="rainforest"] .site-header .theme-step { color: #eaf4e3; }
html[data-theme="rainforest"] .eyebrow { color: #bfeb9f; }
html[data-theme="rainforest"] .hero { background: transparent; }
html[data-theme="rainforest"] .hero-art { background: #f2f4e7; border: 9px solid #2b6344; box-shadow: 0 23px 60px #061b14; }
html[data-theme="rainforest"] .trust-strip { background: #173b2b; border-block: 1px solid #456d51; color: #d8edcf; }
html[data-theme="rainforest"] #collection { background: #123125; border-block: 1px solid #456d51; }
html[data-theme="rainforest"] #collection .product-card { background: #183c2b; border: 1px solid #487b57; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 38px rgba(0,16,9,.35); }
html[data-theme="rainforest"] #collection .product-card img { background: #eef2e6; }
html[data-theme="rainforest"] #collection .product-card-body { background: #183c2b; color: #f3f7ea; padding: 1rem .85rem 1.1rem; }
html[data-theme="rainforest"] #collection .product-card h3,
html[data-theme="rainforest"] #collection .price { color: #f3f7ea; }
html[data-theme="rainforest"] #collection .product-meta,
html[data-theme="rainforest"] #collection .common-name,
html[data-theme="rainforest"] #collection .product-card p { color: #bad3bc; }
html[data-theme="rainforest"] .button.primary,
html[data-theme="rainforest"] .filter-button.active { color: #0c291e; background: #b0e28c; border-color: #b0e28c; }
html[data-theme="rainforest"] .button.secondary,
html[data-theme="rainforest"] .filter-button,
html[data-theme="rainforest"] .filter-reset,
html[data-theme="rainforest"] .secondary-filters select { color: #eef4e8; background: #1e4633; border-color: #52765a; }
html[data-theme="rainforest"] .secondary-filters,
html[data-theme="rainforest"] .catalogue-tools,
html[data-theme="rainforest"] .process-steps article,
html[data-theme="rainforest"] .artist-recognition,
html[data-theme="rainforest"] .artist-stats article { background: #1b3f2e; border-color: #497b5a; color: #edf4e7; }
html[data-theme="rainforest"] .artist-section { background: #1d4834; }
html[data-theme="rainforest"] .process-section { background: #143527; }
html[data-theme="rainforest"] .contact-section { background: #081e17; }
html[data-theme="rainforest"] .contact-section h2,
html[data-theme="rainforest"] .contact-section .eyebrow,
html[data-theme="rainforest"] .contact-section p,
html[data-theme="rainforest"] .contact-section a,
html[data-theme="rainforest"] .contact-section strong { color: #e7f4e4; }
html[data-theme="rainforest"] .contact-card { background: #1c4231; border-color: #52765a; }
html[data-theme="rainforest"] .artist-biography { color: #f1f5e9; }
@media (max-width: 760px) { html[data-theme="rainforest"] .site-header .menu-button { color: #eaf4e3; border-color: #62976c; } }


/* v53.18.23 — user-accepted theme tuning: paper separation + softer canopy. */
/* Földszínek: a linen field is slightly deeper than the original paper tone. */
html[data-theme="gallery"] #collection { background: #ded2c2; }

/* Rainforest: keep the forest-green identity, lift the dark planes by one shade. */
html[data-theme="rainforest"] {
  --paper: #1d3a2c; --paper-deep: #2a4b38; --ink: #f1f6ea;
  --muted: #cedecb; --line: #648c70; --leaf: #b9e5ac;
  --leaf-dark: #35795a; --surface: #2b513c;
  --shadow: 0 20px 45px rgba(7, 31, 19, .23);
}
html[data-theme="rainforest"] body {
  background: radial-gradient(ellipse at 8% 0, rgba(94, 154, 107, .25), transparent 36rem),
    radial-gradient(ellipse at 100% 38%, rgba(66, 139, 109, .28), transparent 42rem),
    linear-gradient(150deg, #1b3b2d, #2b5942 58%, #1b3e2e);
}
html[data-theme="rainforest"] .site-header { background: rgba(25, 57, 39, .96); border-bottom-color: #72997b; }
html[data-theme="rainforest"] .brand-mark { background: #427c58; border-color: #b5d4a1; }
html[data-theme="rainforest"] .site-header .cart-button,
html[data-theme="rainforest"] .site-header .theme-selector,
html[data-theme="rainforest"] .site-header .language-selector { border-color: #80a989; }
html[data-theme="rainforest"] .hero-art {
  background: #e3ebde; border-color: #478262;
  box-shadow: 0 22px 54px rgba(13, 40, 26, .23);
}
html[data-theme="rainforest"] .trust-strip { background: #2b5942; border-color: #648970; }
html[data-theme="rainforest"] #collection { background: #28533e; border-color: #638b71; }
html[data-theme="rainforest"] #collection .product-card {
  background: #35634a; border-color: #729b7d;
  box-shadow: 0 15px 32px rgba(12, 38, 24, .24);
}
/* The sage mat forms a soft midtone transition around the image's paper. */
html[data-theme="rainforest"] #collection .product-image-button {
  padding: .35rem; background: #799e83;
}
html[data-theme="rainforest"] #collection .product-card img {
  background: #e3eadd; filter: brightness(.965);
}
html[data-theme="rainforest"] #collection .product-card-body { background: #35634a; }
html[data-theme="rainforest"] #collection .product-meta,
html[data-theme="rainforest"] #collection .common-name,
html[data-theme="rainforest"] #collection .product-card p { color: #d0e3cf; }
html[data-theme="rainforest"] .button.primary,
html[data-theme="rainforest"] .filter-button.active { background: #c1e99f; border-color: #c1e99f; }
html[data-theme="rainforest"] .button.secondary,
html[data-theme="rainforest"] .filter-button,
html[data-theme="rainforest"] .filter-reset,
html[data-theme="rainforest"] .secondary-filters select { background: #35664c; border-color: #76a085; }
html[data-theme="rainforest"] .secondary-filters,
html[data-theme="rainforest"] .catalogue-tools,
html[data-theme="rainforest"] .process-steps article,
html[data-theme="rainforest"] .artist-recognition,
html[data-theme="rainforest"] .artist-stats article { background: #315e47; border-color: #6a9676; }
html[data-theme="rainforest"] .artist-section { background: #34694e; }
html[data-theme="rainforest"] .process-section { background: #2b5742; }
html[data-theme="rainforest"] .contact-section { background: #1d3c2d; }
html[data-theme="rainforest"] .contact-card { background: #34634b; border-color: #729a7a; }

/* v53.18.24 — separate the botanical paper from the earth-colour wall. */
html[data-theme="gallery"] #collection { background: #cfc0ac; }
html[data-theme="gallery"] #collection .product-image-button {
  background: #f0e6d8;
  padding: .42rem;
  border: 1px solid rgba(122, 100, 77, .28);
  border-radius: 3px;
  box-shadow: 0 5px 16px rgba(73, 53, 37, .085);
}
html[data-theme="gallery"] #collection .product-card img { background: #f0e6d8; }
html[data-theme="gallery"] #collection .product-card-body { background: transparent; box-shadow: none; }

/* Elegant Atelier: less oppressive sticky top menu, keep legible light labels. */
html[data-theme="elegant"] .site-header {
  background: rgba(115, 99, 78, .97);
  border-bottom-color: #cfb790;
}
html[data-theme="elegant"] .site-header .brand-mark {
  background: #645442;
  border-color: #c7ac83;
}
@media (max-width: 1360px) {
  html[data-theme="elegant"] .primary-nav {
    background: #73634e;
    border-color: #bda785;
  }
}

/* Rainforest: brighter canopy from header to footer, with accessible text. */
html[data-theme="rainforest"] {
  --paper: #315d46; --paper-deep: #406e54; --ink: #f5f8ef;
  --muted: #dfedda; --line: #82aa8a; --leaf: #d3edbd;
  --leaf-dark: #3e7959; --surface: #47785b;
  --shadow: 0 17px 38px rgba(25, 61, 40, .18);
}
html[data-theme="rainforest"] body {
  background: radial-gradient(ellipse at 8% 0, rgba(140, 191, 140, .27), transparent 36rem),
    radial-gradient(ellipse at 100% 38%, rgba(98, 161, 118, .29), transparent 42rem),
    linear-gradient(150deg, #315f48, #4b7e5e 58%, #315f49);
}
html[data-theme="rainforest"] .site-header {
  background: rgba(49, 103, 75, .96); border-bottom-color: #a1c4a5;
}
html[data-theme="rainforest"] .brand-mark { background: #568b68; border-color: #c6dec0; }
html[data-theme="rainforest"] .site-header .cart-button,
html[data-theme="rainforest"] .site-header .theme-selector,
html[data-theme="rainforest"] .site-header .language-selector { border-color: #afd0b3; }
html[data-theme="rainforest"] .hero-art {
  background: #e4ece0; border-color: #649a76;
  box-shadow: 0 19px 40px rgba(26, 64, 43, .2);
}
html[data-theme="rainforest"] .trust-strip { background: #46765a; border-color: #8ab59a; }
html[data-theme="rainforest"] #collection { background: #4a795d; border-color: #8db698; }
html[data-theme="rainforest"] #collection .product-card {
  background: #457056; border-color: #98be9d;
  box-shadow: 0 14px 27px rgba(29, 64, 43, .2);
}
html[data-theme="rainforest"] #collection .product-image-button {
  background: #a8c5aa; padding: .4rem;
}
html[data-theme="rainforest"] #collection .product-card img {
  background: #e5ede1; filter: brightness(.97);
}
html[data-theme="rainforest"] #collection .product-card-body { background: #457056; color: #f5f8ef; }
html[data-theme="rainforest"] #collection .product-card h3,
html[data-theme="rainforest"] #collection .price { color: #f5f8ef; }
html[data-theme="rainforest"] #collection .product-meta,
html[data-theme="rainforest"] #collection .common-name,
html[data-theme="rainforest"] #collection .product-card p { color: #e1eed9; }
html[data-theme="rainforest"] .button.primary,
html[data-theme="rainforest"] .filter-button.active { background: #d4efb8; border-color: #d4efb8; }
html[data-theme="rainforest"] .button.secondary,
html[data-theme="rainforest"] .filter-button,
html[data-theme="rainforest"] .filter-reset,
html[data-theme="rainforest"] .secondary-filters select {
  background: #4e8262; border-color: #9bbba4;
}
html[data-theme="rainforest"] .secondary-filters,
html[data-theme="rainforest"] .catalogue-tools,
html[data-theme="rainforest"] .process-steps article,
html[data-theme="rainforest"] .artist-recognition,
html[data-theme="rainforest"] .artist-stats article {
  background: #447455; border-color: #8db298;
}
html[data-theme="rainforest"] .artist-section { background: #4c8162; }
html[data-theme="rainforest"] .process-section { background: #416f54; }
html[data-theme="rainforest"] .contact-section { background: #315d46; }
html[data-theme="rainforest"] .contact-card { background: #477a5c; border-color: #92b49a; }

/* v53.18.25 — uniform, full-viewport sticky header band.
   Keep the existing centred header contents; only the paint extends full width. */
html[data-theme="elegant"] .site-header,
html[data-theme="rainforest"] .site-header {
  isolation: isolate;
  background: transparent;
  backdrop-filter: none;
}
html[data-theme="elegant"] .site-header::before,
html[data-theme="rainforest"] .site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}
html[data-theme="elegant"] .site-header::before { background: #e8ddcd; }
html[data-theme="rainforest"] .site-header::before { background: #31674b; }

/* Elegant: light champagne rather than the dominant dark bronze strip. */
html[data-theme="elegant"] .site-header {
  color: #3b3127;
  border-bottom-color: #c0aa8c;
}
html[data-theme="elegant"] .site-header .brand strong,
html[data-theme="elegant"] .site-header .primary-nav a,
html[data-theme="elegant"] .site-header select,
html[data-theme="elegant"] .site-header .theme-step,
html[data-theme="elegant"] .site-header .menu-button,
html[data-theme="elegant"] .site-header .cart-button {
  color: #3b3127;
}
html[data-theme="elegant"] .site-header .brand small { color: #635647; }
html[data-theme="elegant"] .site-header .brand-mark {
  background: #d8c9b2;
  color: #574633;
  border-color: #ac987b;
}
html[data-theme="elegant"] .site-header .theme-selector,
html[data-theme="elegant"] .site-header .language-selector,
html[data-theme="elegant"] .site-header .menu-button,
html[data-theme="elegant"] .site-header .cart-button { border-color: #b39e81; }
@media (max-width: 1360px) {
  html[data-theme="elegant"] .primary-nav { background: #e8ddcd; border-color: #c0aa8c; }
}

/* v53.18.26 — warm parchment information sheets / brighter tropical canopy. */
/* Earth tones: description sheet and botanical artwork use the same paper tone. */
html[data-theme="gallery"] #collection .product-card-body {
  background: #f0e6d8;
  border: 1px solid rgba(122, 100, 77, .24);
  border-radius: 3px;
  box-shadow: 0 5px 16px rgba(73, 53, 37, .07);
  padding: 1rem .75rem 1.05rem;
}

/* Rainforest: a luminous canopy of greens; dark typography restores contrast. */
html[data-theme="rainforest"] {
  --paper: #80ad91; --paper-deep: #98c7a5;
  --ink: #143628; --muted: #244a35;
  --line: #639777; --leaf: #2d6545; --leaf-dark: #214e36;
  --surface: #add1b3; --on-accent: #f7fff1;
  --shadow: 0 15px 34px rgba(33, 73, 46, .14);
}
html[data-theme="rainforest"] body {
  background: radial-gradient(ellipse at 8% 0, rgba(171, 217, 175, .38), transparent 36rem),
    radial-gradient(ellipse at 100% 38%, rgba(134, 197, 151, .35), transparent 42rem),
    linear-gradient(150deg, #74a585, #8ebc9a 58%, #73a586);
  color: #143628;
}
html[data-theme="rainforest"] .site-header::before { background: #80ad91; }
html[data-theme="rainforest"] .site-header { color: #143628; border-bottom-color: #669677; }
html[data-theme="rainforest"] .site-header .brand strong,
html[data-theme="rainforest"] .site-header .brand small,
html[data-theme="rainforest"] .site-header .primary-nav a,
html[data-theme="rainforest"] .site-header select,
html[data-theme="rainforest"] .site-header .theme-step,
html[data-theme="rainforest"] .site-header .menu-button,
html[data-theme="rainforest"] .site-header .cart-button { color: #143628; }
html[data-theme="rainforest"] .brand-mark {
  background: #9dca9e; border-color: #548565; color: #194b32;
}
html[data-theme="rainforest"] .site-header .cart-button,
html[data-theme="rainforest"] .site-header .theme-selector,
html[data-theme="rainforest"] .site-header .language-selector,
html[data-theme="rainforest"] .site-header .menu-button { border-color: #649778; }
html[data-theme="rainforest"] .eyebrow { color: #23573a; }
html[data-theme="rainforest"] .hero-art {
  background: #edf1e6; border-color: #70a083;
  box-shadow: 0 16px 34px rgba(34, 75, 48, .16);
}
html[data-theme="rainforest"] .trust-strip {
  background: #83b395; border-color: #70a285; color: #193e2e;
}
html[data-theme="rainforest"] #collection {
  background: #77aa8b; border-color: #659d7b;
}
html[data-theme="rainforest"] #collection .product-card {
  background: #87b99b; border-color: #a6ccb1;
  box-shadow: 0 12px 23px rgba(39, 81, 54, .14);
}
html[data-theme="rainforest"] #collection .product-image-button {
  background: #b6d2b6; padding: .4rem;
}
html[data-theme="rainforest"] #collection .product-card img {
  background: #e9eee3; filter: brightness(.985);
}
html[data-theme="rainforest"] #collection .product-card-body {
  background: #87b99b; color: #143628;
}
html[data-theme="rainforest"] #collection .product-card h3,
html[data-theme="rainforest"] #collection .price,
html[data-theme="rainforest"] #collection .product-meta,
html[data-theme="rainforest"] #collection .common-name,
html[data-theme="rainforest"] #collection .product-card p { color: #173c2d; }
html[data-theme="rainforest"] .button.primary,
html[data-theme="rainforest"] .filter-button.active {
  color: #173c2d; background: #d9eebf; border-color: #aecb9b;
}
html[data-theme="rainforest"] .button.secondary,
html[data-theme="rainforest"] .filter-button,
html[data-theme="rainforest"] .filter-reset,
html[data-theme="rainforest"] .secondary-filters select {
  color: #163c2c; background: #a2c9a8; border-color: #6b9e7d;
}
html[data-theme="rainforest"] .secondary-filters,
html[data-theme="rainforest"] .catalogue-tools,
html[data-theme="rainforest"] .process-steps article,
html[data-theme="rainforest"] .artist-recognition,
html[data-theme="rainforest"] .artist-stats article {
  background: #9bc5a4; border-color: #79aa8a; color: #183d2d;
}
html[data-theme="rainforest"] .artist-section { background: #8fbd9e; }
html[data-theme="rainforest"] .process-section { background: #84b393; }
html[data-theme="rainforest"] .contact-section { background: #7eaf91; }
html[data-theme="rainforest"] .contact-card {
  background: #9bc6a6; border-color: #76a989;
}
html[data-theme="rainforest"] .contact-section h2,
html[data-theme="rainforest"] .contact-section .eyebrow,
html[data-theme="rainforest"] .contact-section p,
html[data-theme="rainforest"] .contact-section a,
html[data-theme="rainforest"] .contact-section strong,
html[data-theme="rainforest"] .artist-biography { color: #173c2d; }
@media (max-width: 1360px) {
  html[data-theme="rainforest"] .primary-nav {
    color: #143628; background: #a4cdae; border-color: #719f83;
  }
}

/* v53.18.27 — compact shared sticky header across all six visual themes.
   Limit vertical whitespace without changing theme colours or horizontal layout. */
.site-header { padding-block: .55rem; }
.brand-mark { width: 2.45rem; height: 2.45rem; }
.theme-selector,
.language-selector { min-height: 2.35rem; }
.theme-selector select,
.language-selector select {
  min-height: 2.12rem;
  padding-top: .23rem;
  padding-bottom: .23rem;
}
.cart-button { padding-block: .46rem; }
.menu-button { padding-block: .4rem; }

/* Tablet width uses two header rows; reclaim the gap between them as well. */
@media (max-width: 780px) {
  .site-header { padding-block: .43rem; row-gap: .42rem; }
}

/* Narrow screens are already compact: only remove surrounding blank space.
   Keep the mobile controls at their accepted 2rem touch-control height. */
@media (max-width: 620px) {
  .site-header { padding-block: .3rem; }
  .theme-selector,
  .language-selector,
  .menu-button { min-height: 2rem; max-height: 2rem; }
  .theme-selector select,
  .language-selector select { min-height: 2rem; max-height: 2rem; }
}

/* v53.18.29 — open, continuous artist introduction, no disclosure controls.
   Substantially reduce the dead space between headline and letter; preserve the
   normal, readable full text and centre the smaller orchid opposite that text. */
html[data-theme] .hero {
  min-height: 0;
  padding-block: clamp(.95rem, 2.3svh, 1.5rem);
  column-gap: clamp(1.4rem, 3.5vw, 3.2rem);
  row-gap: clamp(.8rem, 1.8svh, 1.35rem);
}
.hero .hero-heading .eyebrow { margin-bottom: .55rem; }
.hero .hero-text { line-height: 1.53; }
.hero .hero-letter p { margin-bottom: .72rem; }
.hero .hero-actions { margin-top: 1rem; }
html[data-theme] .hero-art {
  justify-self: center;
  align-self: center;
  width: min(100%, 26.75rem);
  padding: clamp(.85rem, 1.7vw, 1.3rem);
}
html[data-theme] .hero-art img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(260px, 52svh, 435px);
  object-fit: contain;
}
@media (max-width: 900px) {
  html[data-theme] .hero { grid-template-columns: minmax(0,1fr); }
  html[data-theme] .hero-art { width: min(100%, 25.5rem); }
}
@media (max-width: 620px) {
  html[data-theme] .hero { row-gap: 1rem; }
  html[data-theme] .hero-art { width: min(100%, 23rem); }
  html[data-theme] .hero-art img { max-height: min(44svh, 380px); }
}

/* Earth: grid rows stretch to the longest title, image sheet and information
   panel share equal column height without truncating scientific plant names. */
html[data-theme="gallery"] #collection .product-grid { align-items: stretch; }
html[data-theme="gallery"] #collection .product-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
html[data-theme="gallery"] #collection .product-image-button { flex: 0 0 auto; }
html[data-theme="gallery"] #collection .product-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
html[data-theme="gallery"] #collection .product-card-footer {
  margin-top: auto;
  padding-top: .62rem;
}

/* v53.18.31 — orchid 14px higher, 10px right; relative positioning, no reflow. */
html[data-theme] .hero-art { top: -28px; left: 10px; }
@media (max-width: 620px) {
  html[data-theme] .hero-art { top: -22px; left: 6px; }
}

/* v53.18.33 — simpler welcome composition: restore air between the headline
   and the uninterrupted artist letter, after removing two redundant hero links. */
html[data-theme] .hero {
  row-gap: clamp(1.25rem, 3svh, 2rem);
}

/* v53.18.34 — all six themes share immovable header action coordinates.
   Theme-specific max-width and typography must not move carousel arrows. */
.site-header { max-width: min(1360px, 100%); }
@media (min-width: 1361px) {
  .header-actions {
    width: 1032px;
    flex: 0 0 1032px;
  }
  .theme-selector {
    display: grid;
    width: 18rem;
    min-width: 18rem;
    flex: 0 0 18rem;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    align-items: center;
  }
  .theme-selector select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .language-selector { width: 9.5rem; flex: 0 0 9.5rem; }
  .primary-nav { flex: 1 0 auto; }
}
/* Medium desktop: mobile nav, fixed width controls independent of font metrics. */
@media (min-width: 781px) and (max-width: 1360px) {
  .menu-button { width: 4.6rem; flex: 0 0 4.6rem; }
}
/* Phone: reserve the same brand column width in every theme. */
@media (max-width: 620px) {
  .site-header > .brand { flex: 0 0 7.7rem; width: 7.7rem; }
}
@media (max-width: 390px) {
  .site-header > .brand { flex-basis: 6.7rem; width: 6.7rem; }
}
/* Earth once had a wider edge-to-edge header. Keep its paint but not its
   theme-specific content alignment: coordinates must match all other themes. */
html[data-theme="gallery"] .site-header {
  max-width: min(1360px, 100%);
  padding-inline: 1.5rem;
}
@media (max-width: 620px) {
  /* Independent of theme font metrics: the language and menu columns, and
     therefore the switcher's left edge, always stay in the same place. */
  .site-header > .header-actions {
    flex: 1 1 0%;
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 7rem 3.5rem;
  }
  .site-header .menu-button { width: 100%; }
  html[data-theme="gallery"] .site-header { padding-inline: .55rem; }
}
@media (max-width: 390px) {
  .site-header > .header-actions {
    grid-template-columns: minmax(0, 1fr) 4.75rem 2.875rem;
  }
  html[data-theme="gallery"] .site-header { padding-inline: .4rem; }
}

/* v53.18.35 — clearly distinguish server-save from the two green edit tools.
   High-specificity scoped rules beat per-theme primary-button colour overrides. */
html[data-theme] .floating-admin-dock #admin-publish-central.button.primary {
  color: #fff !important;
  background: #a23d43 !important;
  border-color: #842e35 !important;
}
html[data-theme] .floating-admin-dock #admin-publish-central.button.primary:hover,
html[data-theme] .floating-admin-dock #admin-publish-central.button.primary:focus-visible {
  background: #872f35 !important;
  border-color: #70262b !important;
}

/* v53.18.45 – Original BK illustration: exact artwork crop in the header,
   complete brand artwork in About. Independent of the six theme glyph styles. */
.brand-monogram {
  display: block;
  flex: 0 0 auto;
  width: clamp(2.55rem, 3.1vw, 3.15rem);
  height: auto;
  max-height: 3.55rem;
  object-fit: contain;
  border-radius: 2px;
}
.artist-signature {
  width: min(100%, 400px);
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
}
.artist-signature img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 9px 24px rgba(60, 47, 31, .10);
}
@media (max-width: 600px) {
  .brand-monogram { width: 2.65rem; max-height: 3rem; }
  .artist-signature { width: min(78vw, 300px); }
}

/* v53.18.52: official public contact mailbox link. */
.contact-email-line { overflow-wrap: anywhere; }
.contact-email-link { color: inherit; text-decoration: underline; text-underline-offset: .18em; font-weight: 700; }
.contact-email-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }