/* ============================================================
   UNYKONN — Scheda prodotto (Figma 3236:4050)
   Estratto da products.html il 2026-08-28.
   Usato da: products.html (modale slide-in) e dalle pagine
   statiche /product/<codice>.html generate da build-catalog.js.
   Le due viste condividono LO STESSO markup .dm-* : una modifica
   qui vale per entrambe.
   ============================================================ */
/* Detail Modal (slide-in from right, V3 style + Figma 3236:4050) */
.results.is-hidden { display: none; }
.detail-modal { position: fixed; inset: 0; z-index: 110; display: none; }
.detail-modal.is-open { display: block; }
.detail-modal__scrim { position: absolute; inset: 0; background: rgba(11,11,12,.5); }
.detail-modal__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(calc(100vw - 220px), 1200px);
  background: #fff;
  box-shadow: -16px 0 48px rgba(0,0,0,.12);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.detail-modal.is-open .detail-modal__panel { transform: translateX(0); }
@media (max-width: 900px) { .detail-modal__panel { width: 100vw; } }
.detail-modal__close {
  position: sticky; top: 24px; float: right;
  margin: 24px 24px 0 0;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: var(--sds-color-background-default-secondary);
  font-size: 20px; cursor: pointer; z-index: 5;
}
.detail-modal__close:hover { background: var(--sds-color-background-neutral-tertiary, #e3e3e3); }
/* V3-style pagination topbar */
.detail-modal__topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 24px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sds-color-border-default-default);
}
.dm-nav-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sds-color-border-default-default);
  border-radius: 999px;
  background: #fff;
  font-size: 14px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dm-nav-btn:hover:not(:disabled) {
  background: var(--sds-color-background-default-secondary);
  border-color: var(--sds-color-border-neutral-secondary, #767676);
}
.dm-nav-btn:disabled { opacity: .35; cursor: default; }
.dm-nav-info {
  flex: 1;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sds-color-text-default-secondary);
}
.detail-modal__topbar .detail-modal__close {
  position: static; margin: 0; width: 36px; height: 36px;
}

.dm-section { padding: 24px 64px; }
.dm-section--head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-top: 64px;
  align-items: start; /* specs stay at top while images grow downward */
}
@media (max-width: 900px) { .dm-section { padding: 24px 24px; } .dm-section--head { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; } }

/* Image (dual) with badge overlay — Figma 3256:4875 + V3 dual-photo.
   Stacked VERTICALLY: main image on top, alt view below.
   The modal panel already scrolls vertically, so the alt view is reached
   naturally by scrolling down — no hidden horizontal carousel. */
.dm-img-wrap { position: relative; align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
/* Horizontal carousel: image 1 and image 2 sit side-by-side and the
   container scrolls horizontally with mandatory snap, so the top
   prev/next arrows + "1 / N" indicator paginate between them. */
.dm-img-pair {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--sds-size-radius-200);
  -webkit-overflow-scrolling: touch;
  /* Hide native scrollbar — the arrows drive navigation. */
  scrollbar-width: none;
}
.dm-img-pair::-webkit-scrollbar { display: none; }
.dm-img-pair .dm-img {
  flex: 0 0 100%;
  width: 100%;
  min-height: 420px;
  scroll-snap-align: start;
  border-radius: var(--sds-size-radius-200);
}
.dm-img--alt.is-hidden { display: none; }
/* Image carousel dots */
.dm-img-dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.dm-img-dots .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(0,0,0,.25);
  cursor: pointer;
  transition: background .15s;
}
.dm-img-dots .dot.is-active { background: var(--sds-color-background-brand-default); }
.dm-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sds-color-background-default-secondary);
  border-radius: var(--sds-size-radius-200);
  overflow: hidden;
}
.dm-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.dm-img .noimg { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sds-color-text-default-tertiary); }
.dm-badges { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; }
.dm-badge {
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.8px; color: #1e1e1e;
}

/* Right column: heading + specifications */
.dm-column { display: flex; flex-direction: column; gap: var(--sds-size-space-600); justify-content: center; }
.dm-heading { display: flex; flex-direction: column; gap: 8px; }
.dm-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
}
.dm-eyebrow .family { font-size: 12px; color: var(--sds-color-text-brand-default); letter-spacing: 1.4px; text-transform: uppercase; }
.dm-eyebrow .dot { color: var(--sds-color-text-default-secondary); font-size: 12px; }
.dm-eyebrow .code { font-size: 28px; color: var(--sds-color-text-brand-default); letter-spacing: 2px; }
.dm-title { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 32px; letter-spacing: -0.6px; color: #1e1e1e; margin: 0; line-height: 1.1; }
.dm-section-label {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--sds-color-text-default-secondary);
  margin: 0 0 8px;
}
.dm-specs > div { display: flex; flex-direction: column; }
.dm-spec-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid #d9d9d9;
}
.dm-spec-row .label { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sds-color-text-default-secondary); }
.dm-spec-row .val { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; color: #1e1e1e; text-align: right; }

/* Interfaces section */
.dm-arrows-note {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 24px;
}
.dm-arrows-bar { width: 3px; height: 28px; background: var(--sds-color-background-brand-default); flex-shrink: 0; }
.dm-arrows-note p { margin: 0; font-family: 'Manrope', sans-serif; font-size: 14px; color: var(--sds-color-text-default-secondary); }
.dm-iface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.dm-iface {
  background: #fff; border: 1px solid #d9d9d9; border-radius: 8px;
  display: flex; flex-direction: column;
}
.dm-iface-head { display: flex; align-items: center; gap: 12px; padding: 20px 20px 16px; }
.dm-iface-tag {
  background: #fff; border: 1px solid #d9d9d9; border-radius: 6px;
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.8px;
}
.dm-iface-subtype { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 20px; color: #1e1e1e; }
.dm-iface-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  border-top: 1px solid #d9d9d9;
}
.dm-iface-row.is-highlight { background: #f5f8fe; }
.dm-iface-row.is-highlight .label { color: var(--sds-color-text-brand-default); }
.dm-iface-row .label { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sds-color-text-default-secondary); }
.dm-iface-row .val { font-family: 'Manrope', sans-serif; font-weight: 400; font-size: 16px; color: #1e1e1e; text-align: right; }

/* Solutions · Applications */
.dm-app-rows { display: flex; flex-direction: column; gap: 12px; }
.dm-app-row {
  background: #fff; border: 1px solid #d9d9d9; border-radius: 8px;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
}
.dm-app-sol {
  flex: 0 0 220px;
  padding: 6px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.4px;
}
.dm-app-sol--blue   { background: #eef3fd; color: #1f4fb8; }
.dm-app-sol--orange { background: #fdf2e7; color: #a15c1f; }
.dm-app-sol--purple { background: #f3eefb; color: #6b3fb8; }
.dm-app-sol--green  { background: #eaf5ec; color: #2f7d46; }
.dm-app-sys { display: flex; gap: 8px; flex-wrap: wrap; }
.dm-app-sys span {
  background: #f5f5f5; padding: 6px 10px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 0.4px; color: #1e1e1e;
}
.dm-notes { padding: 0 64px 64px; font-family: 'Manrope', sans-serif; font-size: 14px; color: var(--sds-color-text-default-secondary); }
@media (max-width: 900px) { .dm-notes { padding: 0 24px 32px; } }

/* ============================================================
   Pagina prodotto autonoma  /product/<codice>.html
   Stesso markup .dm-* della modale; qui non c'e' il pannello
   che scrolla, quindi le immagini vanno impilate e il blocco
   deve reggere la larghezza piena della pagina.
   ============================================================ */
.pdp-page { max-width: 1440px; margin: 0 auto; }
.pdp-crumb {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 28px 64px 0;
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sds-color-text-default-tertiary);
}
.pdp-crumb a { color: var(--sds-color-text-default-secondary); text-decoration: none; }
.pdp-crumb a:hover { color: var(--sds-color-text-brand-default); }
.pdp-page .dm-img-wrap { flex-direction: column; gap: 16px; }
.pdp-page .dm-img { min-height: 420px; height: auto; }
.pdp-page .dm-img img { aspect-ratio: 4 / 3; height: auto; }
.pdp-page .dm-section--head { padding-top: 32px; }
.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; }
.dm-empty {
  margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase; color: #b3b3b3;
}
@media (max-width: 900px) { .pdp-crumb { padding: 20px 24px 0; } }
.dm-fullpage {
  font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--sds-color-text-brand-default); text-decoration: none;
  padding: 6px 10px; border-radius: 6px; white-space: nowrap;
}
.dm-fullpage:hover { background: #f5f8fe; }
.dm-fullpage[hidden] { display: none; }
.pdp-thumbs { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-thumb {
  width: 96px; height: 96px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid #d9d9d9; border-radius: 6px;
  background: var(--sds-color-background-default-secondary);
  transition: border-color .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb.is-active { border-color: var(--sds-color-background-brand-default); }
.pdp-thumb:hover { border-color: var(--sds-color-border-neutral-secondary, #767676); }