@layer site-reset, site-base, site-components, site-layout, site-utilities;

/* Shared controls portal to the body, outside the site's content wrapper. */
body:has(.site-style-scope) {
  --ink: var(--site-text, #183b32);
  --ink-body: var(--site-text, #183b32);
  --ink-muted: var(--site-muted, #65716c);
  --surface: var(--site-surface, #fff);
  --line-soft: var(--site-border, #dce1da);
  --accent-solid: var(--site-accent, #204f40);
  --accent-text: var(--site-accent, #204f40);
  --accent-ink: var(--site-accent, #204f40);
  --accent-soft: color-mix(in srgb, var(--site-accent, #204f40) 10%, var(--site-surface, #fff));
  --canvas-subtle: color-mix(in srgb, var(--site-accent, #204f40) 6%, var(--site-surface, #fff));
}

body:has(.site-style-scope) .select-content {
  font-family: var(--site-font-ui, system-ui, sans-serif);
  font-weight: var(--site-weight-ui, 400);
  font-stretch: var(--site-width-ui, 100%);
  font-optical-sizing: var(--site-optical-ui, auto);
  border-radius: min(11px, var(--site-radius, 11px));
  corner-shape: var(--site-corner-shape, round);
}

.site-style-scope .product-copy .variant-select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--site-radius, 16px) * 0.6);
  background: var(--surface);
  color: var(--ink);
  corner-shape: var(--site-corner-shape, round);
  font-family: var(--site-font-ui, system-ui, sans-serif);
  font-weight: var(--site-weight-ui, 400);
  font-stretch: var(--site-width-ui, 100%);
  font-optical-sizing: var(--site-optical-ui, auto);
  font-size: calc(var(--site-base-size, 16px) * 0.85);
}

@layer site-reset {
  .site-app {
    display: contents;
  }

  :where(.site-style-scope, .site-style-scope *, .site-style-scope *::before, .site-style-scope *::after) {
    box-sizing: border-box;
  }

  :where(html:has(.site-style-scope), body:has(.site-style-scope)) {
    margin: 0;
    background: var(--site-background, #f8f8f4);
  }

  .site-style-scope {
    --space-1: calc(4px * var(--site-spacing-scale, 1));
    --space-2: calc(8px * var(--site-spacing-scale, 1));
    --space-3: calc(12px * var(--site-spacing-scale, 1));
    --space-4: calc(16px * var(--site-spacing-scale, 1));
    --space-5: calc(20px * var(--site-spacing-scale, 1));
    --space-6: calc(24px * var(--site-spacing-scale, 1));
    --space-8: calc(32px * var(--site-spacing-scale, 1));
    --space-10: calc(40px * var(--site-spacing-scale, 1));
    --space-12: calc(48px * var(--site-spacing-scale, 1));
    --space-16: calc(64px * var(--site-spacing-scale, 1));
    --ink: var(--site-text, #183b32);
    --muted: var(--site-muted, #65716c);
    --accent: var(--site-accent, #204f40);
    --paper: var(--site-background, #f8f8f4);
    --line: var(--site-border, #dce1da);
    --surface: var(--site-surface, #ffffff);
    --soft-surface: color-mix(in srgb, var(--accent) 6%, var(--paper));
    --heading-size: calc(var(--site-base-size, 16px) * var(--site-heading-scale, 1));
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-width: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--site-font-body, system-ui, sans-serif);
    font-size: var(--site-base-size, 16px);
    font-weight: var(--site-weight-body, 400);
    font-stretch: var(--site-width-body, 100%);
    font-optical-sizing: var(--site-optical-body, auto);
    font-synthesis: none;
    line-height: var(--site-line-height, 1.7);
    letter-spacing: var(--site-body-tracking, 0em);
    color-scheme: light;
    overflow-wrap: break-word;

    :where(a) {
      color: inherit;
      text-underline-offset: 0.25em;
    }
    :where(button, input, textarea, select) {
      font: inherit;
      color: inherit;
    }
    :where(button, a, input, textarea, summary) {
      -webkit-tap-highlight-color: transparent;
    }
    :where(button, a) {
      touch-action: manipulation;
    }
    :where(button, summary) {
      cursor: pointer;
    }
    :where(button:disabled) {
      cursor: default;
    }
    :where(:focus-visible) {
      outline: 2px solid var(--accent);
      outline-offset: 4px;
    }
    :where(img) {
      max-width: 100%;
      display: block;
    }
    :where(h1, h2, h3, h4, h5, h6) {
      margin: 0;
      font-family: var(--site-font-heading, Georgia, serif);
      font-weight: var(--site-weight-heading, 500);
      font-stretch: var(--site-width-heading, 100%);
      font-optical-sizing: var(--site-optical-heading, auto);
      line-height: var(--site-heading-line-height, 1.08);
      letter-spacing: var(--site-heading-tracking, -0.025em);
      overflow-wrap: anywhere;
      text-wrap: balance;
    }
    :where(h1) {
      font-size: clamp(
        calc(var(--heading-size) * 2.7),
        calc(var(--heading-size) * 2 + 3vw),
        calc(var(--heading-size) * 5)
      );
    }
    :where(h2) {
      font-size: clamp(calc(var(--heading-size) * 1.9), 4vw, calc(var(--heading-size) * 3));
    }
    :where(h3) {
      font-size: calc(var(--heading-size) * 1.25);
    }
    :where(p) {
      line-height: var(--site-line-height, 1.7);
    }
    :where(address) {
      font-style: normal;
      overflow-wrap: anywhere;
    }
    :where(strong) {
      font-weight: min(900, calc(var(--site-weight-body, 400) + 150));
    }
    > #main {
      flex: 1;
      min-width: 0;
    }
  }
}

@layer site-base {
  .site-style-scope {
    .container {
      width: min(var(--site-max-width, 1200px), calc(100% - var(--site-page-gutter, 40px) * 2));
      margin-inline: auto;
    }
    :where(
      .eyebrow,
      .button,
      .text-link,
      .site-nav,
      .search-form,
      .pagination,
      .price,
      .price-label,
      .variant-price,
      .variant small,
      .gallery-note,
      .expand,
      .hero-caption,
      .footer-links,
      .footer-bottom,
      .inquiry-form label,
      .product-copy legend
    ) {
      font-family: var(--site-font-ui, system-ui, sans-serif);
      font-weight: var(--site-weight-ui, 500);
      font-stretch: var(--site-width-ui, 100%);
      font-optical-sizing: var(--site-optical-ui, auto);
    }
    .eyebrow {
      margin: 0 0 var(--space-5);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.69);
      letter-spacing: 0.14em;
      text-transform: var(--site-label-transform, uppercase);
      line-height: 1.5;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-6);
      min-height: 46px;
      padding: var(--space-3) var(--space-6);
      border: 1px solid var(--site-button-border, transparent);
      border-radius: calc(var(--site-radius, 16px) * 0.45);
      background: var(--site-button-background, var(--accent));
      color: var(--site-button-color, var(--site-accent-text, #fff));
      font-size: calc(var(--site-base-size, 16px) * 0.875);
      line-height: 1.4;
      text-decoration: none;
      transition:
        background 140ms ease,
        border-color 140ms ease,
        color 140ms ease;
    }
    .button:hover {
      background: color-mix(in srgb, var(--site-button-background, var(--accent)) 88%, var(--ink));
    }
    .button.secondary {
      border-color: var(--line);
      background: transparent;
      color: var(--ink);
    }
    .button.secondary:hover {
      background: var(--soft-surface);
      border-color: var(--accent);
    }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: var(--space-4);
      padding-block: var(--space-2);
      font-size: calc(var(--site-base-size, 16px) * 0.875);
      text-decoration: none;
    }
    .text-link:hover {
      text-decoration: underline;
    }
    .actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-6);
    }
    .page-heading {
      max-width: 50rem;
      margin-bottom: var(--space-10);
    }
    .section-heading {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--space-6);
      margin-bottom: var(--space-8);
    }
    .section-heading .eyebrow {
      margin-bottom: var(--space-3);
    }
    .empty-state {
      padding: var(--site-section-spacing, 64px) var(--space-6);
      text-align: center;
    }
    .empty-state h3 {
      font-size: calc(var(--heading-size) * 1.75);
    }
    .empty-state p {
      color: var(--muted);
    }
    .prose {
      margin-block: var(--space-6);
      white-space: pre-line;
      color: var(--muted);
    }
  }
}

@layer site-components {
  .site-style-scope {
    .site-header {
      position: var(--site-header-position, sticky);
      top: var(--site-header-top, 0);
      z-index: 10;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--paper) 96%, transparent);
      backdrop-filter: blur(16px);
    }
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-8);
      min-height: calc(86px * var(--site-spacing-scale, 1));
    }
    .brand {
      max-width: 40%;
      font-family: var(--site-font-heading, Georgia, serif);
      font-weight: var(--site-weight-heading, 500);
      font-stretch: var(--site-width-heading, 100%);
      font-optical-sizing: var(--site-optical-heading, auto);
      font-size: calc(var(--site-base-size, 16px) * 1.45);
      letter-spacing: var(--site-heading-tracking, -0.025em);
      line-height: 1.1;
      text-decoration: none;
      overflow-wrap: anywhere;
    }
    .brand img {
      width: auto;
      height: auto;
      max-width: min(210px, 100%);
      max-height: 42px;
      object-fit: contain;
    }
    .site-nav {
      display: flex;
      align-items: center;
      gap: var(--space-8);
    }
    .site-nav a {
      padding-block: var(--space-3);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
      line-height: 1.4;
      text-decoration: none;
    }
    .site-nav a[aria-current] {
      text-decoration: underline;
    }
    .header-contact {
      display: inline-flex;
      gap: var(--space-5);
      border-bottom: 1px solid var(--line);
    }
    .home-hero {
      display: grid;
      grid-template-columns: var(--site-hero-columns, minmax(0, 1fr) minmax(0, 1fr));
      align-items: center;
      gap: var(--space-16);
      padding-block: var(--site-section-spacing, 64px) calc(var(--site-section-spacing, 64px) * 1.2);
      text-align: var(--site-hero-align, left);
    }
    .hero-copy {
      display: flex;
      flex-direction: column;
      align-items: var(--site-hero-copy-align-items, start);
      min-width: 0;
      padding-block: var(--space-5);
    }
    .hero-copy h1 {
      max-width: var(--site-hero-title-max, 11ch);
    }
    .hero-description {
      max-width: var(--site-hero-text-max, 44ch);
      margin: var(--space-6) 0 var(--space-8);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.94);
      white-space: pre-line;
    }
    .hero-copy .actions {
      justify-content: var(--site-hero-copy-align-items, start);
    }
    .hero-media {
      position: relative;
      display: block;
      width: 100%;
      max-width: var(--site-hero-media-max-width, 100%);
      margin-inline: auto;
      aspect-ratio: 1 / 1.04;
      overflow: hidden;
      border-radius: var(--site-radius, 16px);
      background: var(--soft-surface);
      text-align: left;
      text-decoration: none;
    }
    .hero-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: var(--site-product-image-fit, contain);
    }
    .hero-caption {
      position: absolute;
      inset: auto 0 0;
      display: flex;
      justify-content: space-between;
      gap: var(--space-6);
      padding: var(--space-6);
      background: color-mix(in srgb, var(--paper) 91%, transparent);
      font-size: calc(var(--site-base-size, 16px) * 0.75);
    }
    .hero-letter {
      display: grid;
      place-items: center;
      width: 100%;
      max-width: var(--site-hero-media-max-width, 100%);
      margin-inline: auto;
      aspect-ratio: 1 / 1.04;
      border-radius: var(--site-radius, 16px);
      background: var(--soft-surface);
      color: color-mix(in srgb, var(--accent) 30%, var(--paper));
      font-family: var(--site-font-heading, Georgia, serif);
      font-weight: var(--site-weight-heading, 500);
      font-stretch: var(--site-width-heading, 100%);
      font-optical-sizing: var(--site-optical-heading, auto);
      font-size: clamp(6rem, 22vw, 18rem);
      line-height: 1;
    }
    .home-products {
      padding-block: calc(var(--site-section-spacing, 64px) * 0.8) var(--site-section-spacing, 64px);
      border-top: 1px solid var(--line);
    }
    .product-grid {
      display: grid;
      grid-template-columns: repeat(var(--site-product-columns, 4), minmax(0, 1fr));
      gap: var(--space-6);
    }
    .product-card {
      display: block;
      min-width: 0;
      padding: var(--site-card-padding, 0);
      border: 1px solid var(--site-card-border, transparent);
      border-radius: var(--site-radius, 16px);
      background: var(--site-card-background, transparent);
      text-decoration: none;
    }
    .product-image {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: var(--site-product-image-ratio, 4 / 5);
      overflow: hidden;
      border-radius: calc(var(--site-radius, 16px) * 0.6);
      background: var(--soft-surface);
    }
    .product-image img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: var(--site-product-image-fit, contain);
      transition: transform 220ms ease;
    }
    .product-card:hover .product-image img {
      transform: scale(1.035);
    }
    .product-view {
      position: absolute;
      right: var(--space-3);
      bottom: var(--space-3);
      display: grid;
      place-items: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--paper);
      transition: background 140ms ease;
    }
    .product-card:hover .product-view {
      background: var(--surface);
    }
    .product-caption {
      padding: var(--space-4) 0;
    }
    .product-caption h3 {
      margin: 0 0 var(--space-2);
      font-size: calc(var(--heading-size) * 1.06);
      line-height: 1.45;
    }
    .product-caption p {
      margin: 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.875);
    }
    .no-image {
      padding: var(--space-3);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
      text-align: center;
    }
    .contact-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-6);
      padding: var(--space-10) var(--space-12);
      margin-bottom: var(--site-section-spacing, 64px);
      border-radius: var(--site-radius, 16px);
      background: var(--soft-surface);
    }
    .contact-banner .eyebrow {
      margin-bottom: var(--space-3);
    }
    .contact-banner h2 {
      font-size: calc(var(--heading-size) * 2.25);
    }
    .site-footer {
      padding-block: var(--space-12) var(--space-6);
      border-top: 1px solid var(--line);
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.4fr 0.6fr 1fr;
      gap: var(--space-12);
      padding-bottom: var(--space-12);
    }
    .footer-brand {
      font-family: var(--site-font-heading, Georgia, serif);
      font-weight: var(--site-weight-heading, 500);
      font-stretch: var(--site-width-heading, 100%);
      font-optical-sizing: var(--site-optical-heading, auto);
      font-size: calc(var(--heading-size) * 1.25);
      text-decoration: none;
    }
    .footer-top p {
      max-width: 32ch;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .footer-links,
    .footer-top address {
      display: flex;
      align-items: start;
      flex-direction: column;
      gap: var(--space-3);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .footer-links a {
      text-decoration: none;
    }
    .footer-links a:hover {
      text-decoration: underline;
    }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: var(--space-6);
      padding-top: var(--space-5);
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.69);
    }
    .catalog-page,
    .about-page,
    .inquiry-page {
      padding-block: var(--site-section-spacing, 64px) calc(var(--site-section-spacing, 64px) * 1.4);
    }
    .catalog-page {
      padding-block: var(--space-10) var(--space-16);
    }
    .catalog-page .page-heading {
      margin-bottom: var(--space-5);
    }
    .catalog-page .page-heading .eyebrow {
      margin-bottom: var(--space-3);
    }
    .catalog-page .page-heading h1 {
      font-size: clamp(30px, 3.5vw, 44px);
      line-height: 1.15;
    }
    .catalog-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-5);
      margin-bottom: var(--space-6);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid var(--line);
    }
    .catalog-toolbar p {
      margin: 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .search-form {
      display: flex;
      width: min(100%, 280px);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: calc(var(--site-radius, 16px) * 0.4);
      background: var(--surface);
    }
    .search-form input {
      width: 100%;
      min-width: 0;
      padding: var(--space-3);
      border: 0;
      background: transparent;
      outline-offset: -3px;
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .search-form button {
      padding-inline: var(--space-3);
      border: 0;
      background: transparent;
      color: var(--ink);
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
      margin-top: var(--space-6);
      padding-top: var(--space-6);
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .about-grid {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: var(--site-section-spacing, 64px);
    }
    .contact-block {
      padding-left: var(--space-8);
      border-left: 1px solid var(--line);
    }
    .contact-block .button {
      margin-top: var(--space-6);
    }
    .contact-block h3 {
      margin-bottom: var(--space-5);
    }
    .error-page {
      min-height: 65vh;
      padding-block: calc(var(--site-section-spacing, 64px) * 1.5);
    }
    .error-page > p:not(.eyebrow) {
      color: var(--muted);
    }

    /* Product configuration and media share the site's visual settings. */
    product-detail {
      display: contents;
    }
    .product-page {
      padding-block: var(--space-8) var(--space-12);
    }
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-width: 0;
      margin-bottom: var(--space-6);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.75);
    }
    .breadcrumb a {
      flex-shrink: 0;
      text-decoration: none;
    }
    .breadcrumb [aria-current] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .product-hero {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: clamp(var(--space-6), 3vw, var(--space-10));
    }
    .product-copy {
      flex: 1;
      display: block;
      min-width: 0;
      max-width: 540px;
      padding-top: var(--space-2);
    }
    .product-copy-sticky {
      position: sticky;
      top: 24px;
      align-self: start;
    }
    .product-media-right [data-product-gallery] {
      order: 2;
    }
    .product-copy > .eyebrow {
      margin: 0 0 var(--space-4);
    }
    .product-copy h1 {
      font-size: clamp(28px, 2.8vw, 38px);
      line-height: 1.2;
      text-wrap: pretty;
    }
    .summary {
      margin: var(--space-5) 0 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.95);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .price-block {
      margin: 0;
      padding-block: var(--space-4);
      border-block: 1px solid var(--line);
    }
    .price-label {
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.72);
    }
    .price {
      margin: var(--space-2) 0 0;
      font-size: calc(var(--site-base-size, 16px) * 1.85);
      line-height: 1.15;
      letter-spacing: -0.025em;
      font-variant-numeric: tabular-nums;
    }
    .price.on-request {
      font-size: calc(var(--site-base-size, 16px) * 1.45);
    }
    .product-copy fieldset {
      min-width: 0;
      padding: 0;
      border: 0;
      margin: 0;
    }
    .product-copy legend {
      padding: 0;
      margin-bottom: var(--space-3);
      font-size: calc(var(--site-base-size, 16px) * 0.8);
    }
    .variant-list {
      display: grid;
      gap: var(--space-2);
    }
    .variant {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3);
      border: 1px solid var(--line);
      border-radius: calc(var(--site-radius, 16px) * 0.6);
      cursor: pointer;
      transition:
        border-color 140ms ease,
        background 140ms ease;
    }
    .variant:hover,
    .variant:has(input:checked) {
      border-color: var(--accent);
      background: var(--soft-surface);
    }
    .product-copy input:is([type='radio'], [type='checkbox']) {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      margin: 0;
      accent-color: var(--accent);
    }
    .variant img,
    .addon img {
      flex-shrink: 0;
      width: 2.8rem;
      height: 2.8rem;
      object-fit: contain;
      border-radius: calc(var(--site-radius, 16px) * 0.3);
      background: var(--surface);
    }
    .variant-copy {
      flex: 1;
      min-width: 0;
    }
    .variant strong,
    .addon strong {
      display: block;
      font-size: calc(var(--site-base-size, 16px) * 0.82);
      line-height: 1.4;
      overflow-wrap: anywhere;
    }
    .variant small {
      display: block;
      margin-top: var(--space-1);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.68);
      overflow-wrap: anywhere;
    }
    .variant-price {
      margin-left: auto;
      font-size: calc(var(--site-base-size, 16px) * 0.8);
      white-space: nowrap;
    }
    .variant-attributes {
      margin: calc(var(--space-4) * -1) 0 var(--space-8);
    }
    .variant-attributes > div {
      display: flex;
      justify-content: space-between;
      gap: var(--space-6);
      padding-block: var(--space-2);
      font-size: calc(var(--site-base-size, 16px) * 0.75);
    }
    .variant-attributes dt {
      color: var(--muted);
    }
    .variant-attributes dd {
      margin: 0;
      text-align: right;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .addon {
      display: flex;
      align-items: start;
      gap: var(--space-3);
      padding-block: var(--space-3);
      border-top: 1px solid var(--line);
      cursor: pointer;
    }
    .addon input {
      margin-top: var(--space-1);
    }
    .addon > span {
      min-width: 0;
    }
    .addon small {
      display: block;
      margin-top: var(--space-1);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.75);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .button.inquiry {
      display: flex;
      justify-content: space-between;
      width: 100%;
      gap: var(--space-4);
    }
    .detail-link {
      display: flex;
      justify-content: center;
      gap: var(--space-3);
      margin-top: var(--space-4);
      padding: var(--space-1);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.75);
    }
    .product-hero > .gallery {
      flex: 0 1 auto;
      min-width: 0;
      max-width: var(--product-media-width, 55%);
    }
    .product-hero > .gallery:has(.image-strip) {
      flex-basis: var(--product-media-width, 55%);
    }
    .product-stage {
      position: relative;
      display: grid;
      place-items: center;
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
      aspect-ratio: auto;
      overflow: hidden;
      border-radius: var(--site-radius, 16px);
      background: var(--soft-surface);
      color: var(--muted);
    }
    .product-stage > img {
      position: static;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: min(560px, 65svh);
      object-fit: contain;
    }
    .expand {
      position: absolute;
      right: var(--space-4);
      bottom: var(--space-4);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-radius: calc(var(--site-radius, 16px) * 0.4);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      color: var(--ink);
      font-size: calc(var(--site-base-size, 16px) * 0.7);
    }
    .product-stage.empty {
      width: 480px;
      aspect-ratio: 4 / 3;
      align-content: center;
      gap: var(--space-4);
      font-size: calc(var(--site-base-size, 16px) * 0.8);
    }
    .image-strip {
      display: flex;
      gap: var(--space-2);
      padding: var(--space-3) var(--space-1) var(--space-1);
      overflow-x: auto;
      scroll-padding-inline: var(--space-1);
      scrollbar-width: thin;
      scrollbar-color: var(--line) transparent;
      scroll-snap-type: x proximity;
    }
    .image-strip a {
      display: block;
      flex: 0 0 calc(var(--site-base-size, 16px) * 4.25);
      aspect-ratio: 1;
      padding: var(--space-1);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: calc(var(--site-radius, 16px) * 0.6);
      background: var(--surface);
      scroll-snap-align: start;
      transition: border-color 120ms ease;
    }
    .image-strip a:hover,
    .image-strip a.active {
      border-color: var(--accent);
    }
    .image-strip a.active {
      box-shadow: inset 0 0 0 1px var(--accent);
    }
    .image-strip img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .gallery-stacked .image-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: var(--space-3);
      padding: var(--space-1);
      overflow: visible;
      scroll-snap-type: none;
    }
    .gallery-stacked .image-strip a {
      display: grid;
      place-items: center;
      min-width: 0;
      aspect-ratio: auto;
      padding: 0;
      border: 0;
      background: var(--soft-surface);
      box-shadow: none;
    }
    .gallery-stacked .image-strip a:first-child {
      grid-column: 1 / -1;
    }
    .gallery-stacked .image-strip img {
      height: auto;
      max-height: min(480px, 60svh);
    }
    .gallery-stacked .image-strip a:first-child img {
      max-height: min(560px, 65svh);
    }
    .gallery-note {
      margin: var(--space-2) 0 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.7);
    }
    .details {
      margin-top: calc(var(--site-section-spacing, 64px) * 1.35);
      scroll-margin-top: 100px;
    }
    .details > section {
      padding-block: calc(var(--site-section-spacing, 64px) * 0.7);
      border-top: 1px solid var(--line);
    }
    .details .section-heading {
      display: block;
      margin-bottom: var(--space-6);
    }
    .details .section-heading .eyebrow {
      margin: 0 0 var(--space-2);
    }
    .details h2 {
      font-size: clamp(calc(var(--heading-size) * 1.55), 3vw, calc(var(--heading-size) * 2));
    }
    .details dl {
      margin: 0;
    }
    .details dt {
      font-weight: min(900, calc(var(--site-weight-body, 400) + 150));
    }
    .details dd {
      margin: 0;
      color: var(--muted);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .attributes dl {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-8);
    }
    .attributes dt {
      margin-bottom: var(--space-3);
    }
    .attributes dd {
      font-size: calc(var(--site-base-size, 16px) * 0.9);
    }
    .specifications {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--space-12);
    }
    .specifications dl > div {
      display: grid;
      grid-template-columns: minmax(7rem, 1fr) 2fr;
      gap: var(--space-6);
      padding-block: var(--space-4);
      border-bottom: 1px solid var(--line);
      font-size: calc(var(--site-base-size, 16px) * 0.87);
    }
    .specifications dl > div:first-child {
      padding-top: 0;
    }
    .specifications dl > div:last-child {
      border-bottom: 0;
    }
    .editorial h2 {
      margin-bottom: var(--space-8);
    }
    .text-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10) var(--space-8);
    }
    .text-grid.single {
      grid-template-columns: 1fr;
    }
    .text-item img {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: var(--site-product-image-fit, contain);
      margin-bottom: var(--space-5);
      border-radius: calc(var(--site-radius, 16px) * 0.7);
      background: var(--soft-surface);
    }
    .text-grid.single .text-item img {
      aspect-ratio: auto;
      max-height: 40rem;
    }
    .text-item h3 {
      margin-bottom: var(--space-3);
    }
    .text-item p {
      max-width: 65ch;
      margin: 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.95);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .detail-image {
      margin: var(--space-6) 0;
    }
    .detail-image.contained {
      max-width: 50rem;
      margin-inline: auto;
    }
    .detail-image img {
      width: 100%;
      height: auto;
    }
    .detail-image figcaption {
      margin-top: var(--space-3);
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.8);
      text-align: center;
      white-space: pre-wrap;
    }

    /* Inquiry fields use the same roles and never change the page's palette. */
    .inquiry-page {
      max-width: calc(var(--site-max-width, 1200px) * 0.72);
    }
    .inquiry-page h1 {
      font-size: clamp(calc(var(--heading-size) * 1.8), 4.5vw, calc(var(--heading-size) * 2.8));
    }
    .inquiry-page .prose {
      font-size: calc(var(--site-base-size, 16px) * 1.125);
    }
    .selection {
      padding-block: var(--space-5);
      margin-bottom: var(--space-8);
      border-block: 1px solid var(--line);
    }
    .selection .eyebrow {
      margin-bottom: var(--space-3);
    }
    .selection > a {
      font-size: calc(var(--site-base-size, 16px) * 1.125);
    }
    .selection p:not(.eyebrow) {
      margin: var(--space-2) 0 0;
      color: var(--muted);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .inquiry-form {
      display: grid;
      gap: var(--space-6);
      padding-top: var(--space-8);
      border-top: 1px solid var(--line);
    }
    .selection + .inquiry-form {
      padding-top: 0;
      border-top: 0;
    }
    .form-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-4);
    }
    .inquiry-form label {
      display: grid;
      gap: var(--space-2);
      font-size: calc(var(--site-base-size, 16px) * 0.81);
    }
    .inquiry-form :is(input, textarea) {
      width: 100%;
      min-width: 0;
      padding: var(--space-3);
      border: 1px solid var(--line);
      border-radius: calc(var(--site-radius, 16px) * 0.4);
      background: var(--surface);
      color: var(--ink);
      font-family: var(--site-font-body, system-ui, sans-serif);
      font-weight: var(--site-weight-body, 400);
      font-stretch: var(--site-width-body, 100%);
      font-optical-sizing: var(--site-optical-body, auto);
    }
    .inquiry-form input {
      min-height: 44px;
    }
    .inquiry-form textarea {
      resize: vertical;
      line-height: var(--site-line-height, 1.7);
    }
    .inquiry-form :is(input, textarea)::placeholder {
      color: var(--muted);
      opacity: 1;
    }
  }
}

@layer site-layout {
  @media (max-width: 1000px) {
    .site-style-scope {
      .container {
        width: min(var(--site-max-width, 1200px), calc(100% - min(var(--site-page-gutter, 40px), 24px) * 2));
      }
      .home-hero {
        gap: var(--space-8);
      }
      .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
      }
      .about-grid {
        gap: var(--space-10);
      }
      .site-nav {
        gap: var(--space-5);
      }
    }
  }
  @media (max-width: 800px) {
    .site-style-scope {
      .product-hero {
        flex-direction: column;
        gap: var(--space-8);
      }
      .product-hero > .gallery {
        width: 100%;
        max-width: none;
      }
      .product-copy {
        width: 100%;
        max-width: none;
        padding-top: 0;
      }
      .product-copy-sticky {
        position: static;
      }
      .product-media-right [data-product-gallery] {
        order: 0;
      }
      .gallery-stacked .image-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }
      .gallery-stacked .image-strip a {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }
      .gallery-stacked .image-strip img,
      .gallery-stacked .image-strip a:first-child img {
        max-height: min(480px, 60svh);
      }
      .attributes dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .specifications {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }
  }
  @media (max-width: 700px) {
    .site-style-scope {
      .container {
        width: min(var(--site-max-width, 1200px), calc(100% - min(var(--site-page-gutter, 40px), 18px) * 2));
      }
      .header-inner {
        min-height: 72px;
        gap: var(--space-4);
        padding-block: var(--space-3);
      }
      .site-nav {
        flex-wrap: wrap;
        justify-content: end;
      }
      .brand {
        font-size: calc(var(--site-base-size, 16px) * 1.25);
      }
      .brand img {
        max-width: 130px;
        max-height: 36px;
      }
      .site-nav {
        gap: var(--space-4);
      }
      .site-nav a {
        font-size: calc(var(--site-base-size, 16px) * 0.75);
      }
      .header-contact {
        gap: var(--space-2);
      }
      .home-hero {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-block: calc(var(--site-section-spacing, 64px) * 0.55) calc(var(--site-section-spacing, 64px) * 0.7);
      }
      .hero-copy h1 {
        max-width: min(var(--site-hero-title-max, 14ch), 18ch);
      }
      .hero-description {
        max-width: 100%;
      }
      .hero-media {
        aspect-ratio: 1.18;
      }
      .hero-letter {
        aspect-ratio: 1.8;
        font-size: 8rem;
      }
      .home-products {
        padding-block: var(--space-8) var(--space-10);
      }
      .product-grid {
        gap: var(--space-4);
      }
      .section-heading {
        align-items: start;
        flex-direction: column;
        gap: var(--space-3);
      }
      .contact-banner {
        align-items: start;
        flex-direction: column;
        padding: var(--space-6);
        margin-bottom: var(--space-10);
      }
      .contact-banner h2 {
        font-size: calc(var(--heading-size) * 1.9);
      }
      .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
      }
      .footer-top address {
        grid-column: 1 / -1;
      }
      .footer-bottom {
        flex-wrap: wrap;
        gap: var(--space-2);
      }
      .catalog-page,
      .about-page,
      .inquiry-page {
        padding-block: calc(var(--site-section-spacing, 64px) * 0.55) var(--site-section-spacing, 64px);
      }
      .catalog-page {
        padding-block: var(--space-6) var(--space-10);
      }
      .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
      }
      .search-form {
        width: 100%;
      }
      .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
      }
      .contact-block {
        padding-top: var(--space-6);
        padding-left: 0;
        border-top: 1px solid var(--line);
        border-left: 0;
      }
    }
  }
  @media (max-width: 520px) {
    .site-style-scope {
      .footer-top {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-bottom: var(--space-8);
      }
      .footer-links:empty {
        display: none;
      }
      .attributes dl,
      .text-grid,
      .form-pair {
        grid-template-columns: 1fr;
      }
      .specifications dl > div {
        grid-template-columns: 1fr 1.5fr;
        gap: var(--space-4);
      }
      .product-page {
        padding-top: var(--space-5);
      }
      .breadcrumb {
        margin-bottom: var(--space-5);
      }
      .variant {
        flex-wrap: wrap;
      }
      .variant-price {
        margin-left: calc(var(--space-3) + 1rem);
      }
    }
  }
  @media (max-width: 380px) {
    .site-style-scope {
      .site-nav {
        gap: var(--space-3);
      }
      .header-contact span {
        display: none;
      }
      .product-grid {
        grid-template-columns: 1fr;
      }
    }
  }
  @supports (corner-shape: squircle) {
    .site-style-scope
      :is(
        .button,
        .hero-media,
        .hero-letter,
        .product-card,
        .product-image,
        .contact-banner,
        .search-form,
        .product-copy .variant-select,
        .variant,
        .product-stage,
        .expand,
        .image-strip a,
        .text-item img,
        .inquiry-form input,
        .inquiry-form textarea
      ) {
      corner-shape: var(--site-corner-shape, squircle);
    }
  }
}

@layer site-utilities {
  .site-style-scope {
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .skip-link {
      position: fixed;
      top: -100px;
      left: var(--space-5);
      z-index: 100;
      padding: var(--space-3);
      background: var(--surface);
      color: var(--ink);
    }
    .skip-link:focus {
      top: var(--space-3);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-style-scope,
    .site-style-scope *,
    .site-style-scope *::before,
    .site-style-scope *::after {
      scroll-behavior: auto !important;
      transition: none !important;
      animation: none !important;
    }
    .site-style-scope :is(.product-card:hover .product-image img, .product-stage:hover > img) {
      transform: none;
    }
  }
}

@font-face{font-family:"Tuohi DM Sans";src:url("/fonts/dm-sans-latin-v1.woff2") format("woff2");font-style:normal;font-weight:100 1000;font-stretch:100% 100%;font-display:swap}
@font-face{font-family:"Tuohi Manrope";src:url("/fonts/manrope-latin-v1.woff2") format("woff2");font-style:normal;font-weight:200 800;font-stretch:100% 100%;font-display:swap}
:root{--site-accent:#455b3e;--site-accent-text:#FFFFFF;--site-background:#f7f6f2;--site-base-size:16px;--site-body-tracking:0em;--site-border:#DDDDDA;--site-button-background:var(--site-accent);--site-button-border:var(--site-accent);--site-button-color:var(--site-accent-text);--site-card-background:transparent;--site-card-border:transparent;--site-card-padding:0px;--site-corner-shape:round;--site-detail-columns:1fr 1fr;--site-font-body:"Tuohi DM Sans",Arial,sans-serif;--site-font-heading:"Tuohi Manrope",Arial,sans-serif;--site-font-ui:"Tuohi DM Sans",Arial,sans-serif;--site-header-position:sticky;--site-header-top:0px;--site-heading-line-height:1.1;--site-heading-scale:1.25;--site-heading-tracking:-0.035em;--site-hero-align:left;--site-hero-columns:1.3fr .7fr;--site-hero-copy-align-items:start;--site-hero-media-max-width:100%;--site-hero-title-max:12ch;--site-label-transform:uppercase;--site-line-height:1.65;--site-max-width:1280px;--site-muted:#646464;--site-optical-body:auto;--site-optical-heading:auto;--site-optical-ui:auto;--site-page-gutter:32px;--site-product-columns:3;--site-product-image-fit:contain;--site-product-image-ratio:1 / 1;--site-radius:12px;--site-section-spacing:96px;--site-spacing-scale:1;--site-surface:#ffffff;--site-text:#252b23;--site-weight-body:400;--site-weight-heading:500;--site-weight-ui:600;--site-width-body:100%;--site-width-heading:100%;--site-width-ui:100%}