:root {
  --radius-control: 10px;
  --radius-button: 12px;
  --radius-card: 16px;
  --radius-media: 24px;
  --radius-inset: 20px;
  --motion-fast: 160ms;
  --motion-action: 200ms;
  --shape-shadow: 0 8px 24px rgba(16, 37, 50, .06);
}

.editorial-hero { border-radius: 0 0 var(--radius-media) var(--radius-media); overflow: hidden; }
.editorial-final { border-radius: var(--radius-media) var(--radius-media) 0 0; }
.editorial-intro-visual, .editorial-range-film, .editorial-oem-visual,
.oem2-scope-panel figure, .oem2-config-image, .oem2-packaging-media,
.resources-task-media, .resources-catalog figure, .directory-buying-note-visual {
  border-radius: var(--radius-inset);
  overflow: hidden;
}
.editorial-family-media, .editorial-pending-media,
.editorial-company-film figure, .category-editorial-hero-media,
.category-scene-sequence figure, .factory2-hero-media,
.factory2-chapter figure, .factory2-equipment-media,
.oem2-hero-production, .oem2-evidence-grid figure,
.contact3-hero-visual, .contact3-enquiry-visual {
  border-radius: var(--radius-media);
  overflow: hidden;
}
.editorial-range-film video { display: block; width: 100%; border-radius: inherit; }
.editorial-home :is(.editorial-hero, .editorial-final, .editorial-intro-visual,
  .editorial-intro-visual img, .editorial-range-film, .editorial-range-film video,
  .editorial-family, .editorial-family-media, .editorial-family-media img,
  .editorial-pending-media, .editorial-oem-visual, .editorial-oem-visual img,
  .editorial-oem-steps article, .browse-mobile-image) { border-radius: 0; }
.pdp2-media-frame { border-radius: var(--radius-inset); overflow: hidden; }
.pdp2-media { border-radius: var(--radius-inset); }
.pdp2-application { border-radius: 0 0 var(--radius-media) var(--radius-media); overflow: hidden; }
.pdp2-detail-track figure, .pdp2-size-stage button, .category-evidence-media,
.real-model-row figure { border-radius: var(--radius-card); overflow: hidden; }
.browse-lightbox, .pdp2-lightbox { border-radius: var(--radius-inset); }
.pdp2-media-open:focus-visible { outline: 3px solid #2d6b5e; outline-offset: -6px; }
.browse-zoom:focus-visible { outline-offset: -5px; }

.directory-frame { border: 0; overflow: visible; background: transparent; }
.directory-grid { gap: 16px; }
.directory-product:nth-child(n) {
  border: 1px solid rgba(16,37,50,.16);
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--motion-action), box-shadow var(--motion-action);
}
.directory-product a:focus-visible { outline: 3px solid #2d6b5e; outline-offset: -5px; }
.directory-product a > .directory-product-media { background: #fff; }
.directory-product img { transition: opacity var(--motion-action); }
.directory-product .directory-product-white,
.directory-product.is-scene-ready a:is(:hover,:focus-visible) .directory-product-white { transform: none; }
.directory-product-scene { transform: none; }
.directory-product a:hover footer { background: #f8faf7; color: #102532; }
.directory-product a:hover footer span { color: #2d6b5e; }
.directory-product a:hover em { color: #2d6b5e; }
.directory-product em { transition: color var(--motion-fast); }

.button {
  --action-bg: #2d6b5e;
  --action-hover: #24584e;
  --action-ink: #fff;
  min-height: 48px;
  padding: 0 24px;
  gap: 10px;
  border-radius: var(--radius-button);
  background: var(--action-bg);
  color: var(--action-ink);
  transform: none;
  transition: background-color var(--motion-action), box-shadow var(--motion-action), transform var(--motion-action);
}
.nav-links > .button { min-height: 44px; padding-inline: 20px; }
.nav-links > .button .action-arrow { display: none; }
.editorial-hero .button, .editorial-final .button {
  --action-bg: #f8faf7;
  --action-hover: #dfe8e3;
  --action-ink: #102532;
  background: var(--action-bg);
  color: var(--action-ink);
}
.button::after { display: none; }
.action-arrow { display: inline-block; flex: 0 0 auto; transition: transform var(--motion-action); }
.button:hover { background: var(--action-bg); transform: none; }
.button:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.button:disabled { cursor: not-allowed; opacity: .62; transform: none; box-shadow: none; }
.button[aria-busy="true"] { opacity: .85; cursor: progress; }
.button[aria-busy="true"] .action-arrow { opacity: 0; }
.button[aria-busy="true"]::after { display: block; content: "…"; position: absolute; right: 20px; color: inherit; }
.button { position: relative; }
.button:focus-visible, .text-action:focus-visible, [role="tab"]:focus-visible,
.browse-controls button:focus-visible, .pdp2-media-carousel button:focus-visible,
.directory-pagination :is(button, a):focus-visible, .menu-toggle:focus-visible,
.browse-lightbox button:focus-visible, .pdp2-lightbox button:focus-visible {
  outline: 3px solid #789b49;
  outline-offset: 3px;
}
.editorial-hero .button:focus-visible, .editorial-hero .text-action:focus-visible,
.editorial-final .button:focus-visible, .contact3-hero .button:focus-visible { outline-color: #f8faf7; }

.text-action, .oem2-hero-actions > a:not(.button), .factory2-actions > a:not(.button),
.pdp2-actions > a:not(.button), .category-editorial-actions > a:not(.button) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 2px;
  transition: background-size var(--motion-fast), color var(--motion-fast);
}
.text-action > span[aria-hidden="true"] { display: inline-block; transition: transform var(--motion-fast); }

.directory-tabs, .oem2-scope-tabs, .resources-task-tabs, .category-model-rail,
.factory2-equipment-controls { gap: 8px; padding: 8px; border: 0; }
.directory-tabs :is(button, a), .oem2-scope-tabs button, .resources-task-tabs button,
.category-model-rail button, .factory2-equipment-controls button {
  border: 1px solid rgba(16,37,50,.18);
  border-radius: var(--radius-button);
  min-height: 44px;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.directory-tabs :is(button, a).is-active, .oem2-scope-tabs button.is-active,
.resources-task-tabs button.is-active, .category-model-rail button.is-active,
.factory2-equipment-controls button.is-active { background: #2d6b5e; color: #fff; border-color: #2d6b5e; }
.directory-tabs :is(button, a).is-active small { color: #fff; }
.pdp2-media-tabs { gap: 4px; padding: 4px; }
.pdp2-media-tabs button { border: 0; border-radius: var(--radius-control); min-height: 44px; }
.pdp2-media-tabs button.is-active { background: #2d6b5e; color: #fff; }
.pdp2-anchor-nav > div { gap: 8px; padding-block: 4px; justify-content: safe center; }
.pdp2-anchor-nav a { border: 0; border-radius: var(--radius-control); }
.pdp2-config-controls fieldset button, .oem2-config-controls fieldset button {
  border-radius: 999px;
  min-height: 44px;
  transition: background-color var(--motion-fast), color var(--motion-fast);
}
.directory-pagination { gap: 8px; border: 0; margin-top: 16px; }
.directory-pagination > :is(button, a) { border: 1px solid rgba(16,37,50,.2); border-radius: var(--radius-button); }
.directory-pagination > div :is(button, a) { width: 44px; min-height: 44px; border-radius: var(--radius-control); }

.browse-controls button, .pdp2-media-carousel button, .menu-toggle {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  place-items: center;
  flex-shrink: 0;
  transition: background-color var(--motion-fast), color var(--motion-fast), transform 100ms;
}
.browse-controls button, .pdp2-media-carousel button { display: inline-grid; }
.browse-lightbox button, .pdp2-lightbox button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
  display: grid;
  place-items: center;
  background: #f8faf7;
  color: #102532;
}
.browse-lightbox button::after, .pdp2-lightbox button::after { content: "×"; font-size: 26px; }
.browse-controls button:active:not(:disabled), .pdp2-media-carousel button:active,
.menu-toggle:active { transform: scale(.97); }
.browse-controls button:disabled { transform: none; }

.pdp2-field input, .pdp2-field select, .pdp2-field textarea,
.oem2-field input, .oem2-field select, .oem2-field textarea,
.contact3-field input, .contact3-field select, .contact3-field textarea,
.resource-request-row input, .resource-request-row select, .resource-request-row textarea {
  border: 1px solid rgba(16,37,50,.24);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  min-height: 48px;
  box-shadow: none;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.pdp2-field :is(input,select,textarea):focus-visible,
.oem2-field :is(input,select,textarea):focus-visible,
.contact3-field :is(input,select,textarea):focus-visible,
.resource-request-row :is(input,select,textarea):focus-visible {
  border-color: #2d6b5e;
  outline: 2px solid #2d6b5e;
  outline-offset: 2px;
}
.contact3-direct > div { border-radius: var(--radius-button); background: rgba(255,255,255,.05); padding: 12px 16px; margin-bottom: 8px; }
.browse-disclosure summary, .browse-footer-links summary { transition: color var(--motion-fast); }
.browse-disclosure summary:focus-visible, .browse-footer-links summary:focus-visible { outline: 3px solid #789b49; outline-offset: 3px; }

@media (hover:hover) and (pointer:fine) {
  .button:hover:not(:disabled) { background: var(--action-hover); transform: translateY(-1px); box-shadow: var(--shape-shadow); }
  .button:hover .action-arrow { transform: translateX(4px); }
  .button:active:not(:disabled) { transform: none; box-shadow: none; }
  .text-action:hover, .oem2-hero-actions > a:not(.button):hover,
  .factory2-actions > a:not(.button):hover, .pdp2-actions > a:not(.button):hover,
  .category-editorial-actions > a:not(.button):hover { background-size: 100% 2px; }
  .text-action:hover > span[aria-hidden="true"] { transform: translateX(3px); }
  .directory-product:hover, .directory-product:focus-within { border-color: #2d6b5e; box-shadow: var(--shape-shadow); }
  .browse-controls button:hover:not(:disabled), .pdp2-media-carousel button:hover { background: #2d6b5e; color: #fff; }
  .browse-disclosure summary:hover, .browse-footer-links summary:hover { color: #2d6b5e; }
}

@media (max-width:820px) {
  :root { --radius-media:16px; --radius-inset:16px; --radius-button:10px; }
  .button { min-height: 48px; }
  .editorial-family, .editorial-oem-steps article, .factory2-chapter,
  .oem2-process-step, .factory2-route-track li, .real-model-row {
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .editorial-family-media, .editorial-pending-media, .factory2-chapter figure,
  .real-model-row figure { border-radius: 0; }
  .directory-grid { gap: 12px; }
  .directory-product:nth-child(n), .pdp2-detail-track figure { border-radius: 12px; }
  .directory-tabs :is(button, a) { flex: 0 0 144px; }
  .pdp2-media-tabs button { min-width: 0; padding-inline: 4px; }
  .pdp2-media-carousel button { width:44px; height:44px; }
  .contact3-direct > div { padding-inline:12px; }
}

@media (prefers-reduced-motion:reduce) {
  .button, .action-arrow, .text-action, .text-action > span,
  .browse-controls button, .pdp2-media-carousel button, .menu-toggle,
  .directory-product, .directory-product img, .directory-product em,
  .directory-tabs :is(button, a), .oem2-scope-tabs button, .resources-task-tabs button,
  .category-model-rail button, .factory2-equipment-controls button,
  .pdp2-field :is(input,select,textarea), .oem2-field :is(input,select,textarea),
  .contact3-field :is(input,select,textarea) { transition: none; }
  .button:hover:not(:disabled), .button:active:not(:disabled),
  .button:hover .action-arrow, .text-action:hover > span[aria-hidden="true"],
  .browse-controls button:active:not(:disabled), .pdp2-media-carousel button:active,
  .menu-toggle:active { transform: none; }
}

.editorial-home .editorial-oem-visual { height: auto; min-height: 0; aspect-ratio: 1; }
.editorial-home .editorial-oem-visual img[data-oem-media] { padding: 0; object-fit: cover; }
.editorial-home .editorial-family--pole .editorial-family-product { padding: 0; object-fit: cover; }
.editorial-home .editorial-family--pole .editorial-family-media .editorial-family-scene { transform: scale(1.2); }
.editorial-home .editorial-range { background: #f7f5ef; }
@media (min-width: 821px) {
  .editorial-home .editorial-family-track { width: 100%; max-width: none; }
}
.editorial-home .editorial-family--garden { background: #fff; }
.editorial-home .editorial-family--reverse:not(.editorial-family--wall) { background: #e0e9e2; }
.editorial-home .editorial-family--pole { background: #edf0f2; }
.editorial-home .editorial-family--wall { background: #d4e2dc; }
.editorial-home .editorial-family--pillar { background: #f5f0e7; }
@media (max-width: 1024px) {
  .editorial-home .home-oem-stepper .browse-mobile-image {
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }
  .editorial-home .home-oem-stepper .editorial-oem-steps article:last-child .browse-mobile-image { object-fit: cover; }
}
.pdp-detail-2026 :is(.pdp2-media-frame, .pdp2-media, .pdp2-media-open,
  .pdp2-media-open img, .pdp2-application, .pdp2-application-media,
  .pdp2-application-media img, .pdp2-detail-row figure,
  .pdp2-detail-row .browse-zoom, .pdp2-detail-row figure img) { border-radius: 0; }
.pdp-detail-2026 #detail-media .pdp2-media-open img { padding: 0; object-fit: cover; }

.pdp-detail-2026 .pdp2-config-summary { grid-template-columns: minmax(0, 1fr) auto; }
.pdp-detail-2026 .pdp2-config-summary a { grid-column: auto; justify-self: start; }
.pdp-detail-2026 .pdp2-spec-ledger { width: 100%; margin-top: 40px; }
.pdp-detail-2026 .pdp2-spec-ledger > div { min-width: 0; }
.pdp-detail-2026 .pdp2-spec-ledger dt { font-weight: 700; }
.pdp-detail-2026 .pdp2-spec-ledger dd { overflow-wrap: anywhere; font-weight: 400; }
@media (min-width: 821px) {
  .pdp-detail-2026 .pdp2-hero { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
  .pdp-detail-2026 .pdp2-spec-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pdp-detail-2026 .pdp2-spec-ledger > div { grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: 20px; }
}
@media (max-width: 820px) {
  .pdp-detail-2026 .pdp2-config-summary { grid-template-columns: 1fr; gap: 16px; }
}
/* Gallery counters stay hidden; image categories remain available. */
.pdp-detail-2026 #detail-media [data-record-position],
.pdp-detail-2026 #detail-media #pdp2-gallery-position { display: none; }

/* Two or three image categories, depending on confirmed packing availability. */
.pdp-detail-2026 #detail-media .pdp2-media-tabs {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
.pdp-detail-2026 #detail-media .pdp2-media-tabs button[hidden] { display: none; }
.pdp-detail-2026 #detail-media .pdp2-media-tabs button:focus-visible { outline: 2px solid #789b49; outline-offset: -2px; }

/* Six product families: vertical navigation beside the catalogue on desktop. */
@media (max-width: 820px) {
  .product-directory-page .directory-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; }
}
@media (min-width: 821px) {
  .product-directory-page .directory-frame {
    display: grid;
    grid-template-columns: clamp(190px, 19vw, 234px) minmax(0, 1fr);
    column-gap: clamp(18px, 2.5vw, 34px);
    align-items: start;
  }
  .product-directory-page .directory-tabs {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: visible;
    border-right: 1px solid rgba(16, 37, 50, .16);
    padding: 0 18px 0 0;
    align-self: stretch;
  }
  .product-directory-page .directory-tabs :is(button, a) {
    width: 100%;
    min-width: 0;
    min-height: 82px;
    flex: none;
    border: 1px solid rgba(16, 37, 50, .18);
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-content: center;
    text-align: left;
  }
  .product-directory-page .directory-grid,
  .product-directory-page .directory-empty { grid-column: 2; grid-row: 1; min-width: 0; }
  .product-directory-page .directory-pagination { grid-column: 2; grid-row: 2; min-width: 0; }
  .product-directory-page .directory-grid[hidden],
  .product-directory-page .directory-empty[hidden] { display: none; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .product-directory-page .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-directory-page .directory-product:nth-child(n) { border-right: 1px solid rgba(16, 37, 50, .25); border-bottom: 1px solid rgba(16, 37, 50, .25); }
  .product-directory-page .directory-product:nth-child(2n) { border-right: 0; }
}