/**
 * View: OPM single offer page. Token-driven, scoped under .opm.
 * Rebuilds the Figma layout (node 1:4106) semantically — no absolute positions.
 */

.opm-single {
  max-width: var(--opm-content-max);
  margin-inline: auto;
  font-family: var(--opm-font-sans);
  color: var(--opm-color-ink);
}

.opm-single__h {
  font-size: var(--opm-fs-xs);
  font-weight: var(--opm-fw-bold);
  text-transform: none;
  margin: 0 0 var(--opm-space-3);
}

/* ---------------------------------------------------------------- HERO */
.opm-single__hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--opm-space-6);
  background-image: var(--opm-hero);
  background-size: cover;
  background-position: center;
  background-color: var(--opm-color-bg-muted);
  border-radius: var(--opm-radius-lg);
  overflow: hidden;
}
.opm-single__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.77));
  pointer-events: none;
}
.opm-single__hero-inner {
  position: relative;
  z-index: 1;
  padding: var(--opm-space-6);
  color: var(--opm-color-bg);
  width: 100%;
}
.opm-single__crumbs {
  font-size: var(--opm-fs-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--opm-space-2);
  align-items: center;
  margin-bottom: var(--opm-space-3);
}
.opm-single__crumbs strong { font-weight: var(--opm-fw-bold); }
.opm-single__title {
  font-size: 40px;
  font-weight: var(--opm-fw-medium);
  margin: 0 0 var(--opm-space-2);
  line-height: 1.1;
  color: var(--opm-color-bg);
}
.opm-single__title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.opm-single__title-link:hover { text-decoration: underline; opacity: 0.92; }
.opm-single__hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--opm-space-4);
  font-size: var(--opm-fs-sm);
}
.opm-single__hero-meta .opm-status__label { color: var(--opm-color-bg); }

/* ---------------------------------------------------------------- BODY layout */
.opm-single__body {
  padding-inline: var(--opm-space-4);
}
.opm-single__top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--opm-space-8);
  align-items: start;
  margin-bottom: var(--opm-space-8);
}
.opm-single__block { margin-bottom: var(--opm-space-6); }

/* Features (reuse .opm-feat from base) */
.opm-single__feat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--opm-space-2);
}

/* Downloads */
.opm-single__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--opm-space-2);
}

/* ---------------------------------------------------------------- BUY BOX */
.opm-single__col--buybox {
  background: var(--opm-color-bg);
  border: 1px solid var(--opm-color-border-soft);
  border-radius: var(--opm-radius-md);
  box-shadow: var(--opm-shadow-md);
  padding: var(--opm-space-6);
}
.opm-single__areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--opm-space-4);
  margin-bottom: var(--opm-space-5);
}
.opm-single__area-label {
  display: block;
  font-size: var(--opm-fs-xs);
  text-transform: uppercase;
  color: var(--opm-color-ink-muted);
}
.opm-single__area-val {
  display: block;
  font-size: var(--opm-fs-lg);
  font-weight: var(--opm-fw-bold);
  margin-top: var(--opm-space-1);
}
.opm-single__area-val sup,
.opm-single__price-now sup,
.opm-single__price-m2 sup,
.opm-single__tech td sup { font-size: 0.6em; }

.opm-single__facts {
  margin: 0 0 var(--opm-space-5);
  border-top: 1px solid var(--opm-color-border-soft);
}
.opm-single__fact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--opm-space-3);
  padding: var(--opm-space-2) 0;
  border-bottom: 1px solid var(--opm-color-border-soft);
  font-size: var(--opm-fs-xs);
}
.opm-single__fact dt { margin: 0; color: var(--opm-color-ink); }
.opm-single__fact dd { margin: 0; font-weight: var(--opm-fw-bold); }

/* Pricing */
.opm-single__pricing { margin-bottom: var(--opm-space-5); }
.opm-single__promo-label {
  display: inline-block;
  font-size: var(--opm-fs-2xs);
  font-weight: var(--opm-fw-bold);
  text-transform: uppercase;
  background: var(--opm-color-accent);
  color: var(--opm-color-on-accent);
  padding: 2px var(--opm-space-2);
  margin-bottom: var(--opm-space-2);
}
.opm-single__price-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--opm-space-4);
  flex-wrap: wrap;
}
.opm-single__price-main { font-family: var(--opm-font-num); }
.opm-single__price-main del {
  display: block;
  font-size: var(--opm-fs-sm);
  color: var(--opm-color-ink-muted);
}
.opm-single__price-now {
  display: block;
  font-size: var(--opm-fs-xl);
  font-weight: var(--opm-fw-bold);
  font-family: var(--opm-font-sans);
}
.opm-single__price-m2 {
  display: block;
  font-size: 13px;
  font-weight: var(--opm-fw-medium);
}

/* Omnibus (legacy markup restyled via these wrappers) */
.opm-single__omnibus { font-size: var(--opm-fs-xs); text-align: right; }
.opm-single__omnibus .omnibus-note { color: var(--opm-color-ink); line-height: 1.3; }
.opm-single__omnibus .omnibus-history { position: relative; margin-top: var(--opm-space-1); }
.opm-single__omnibus .omnibus-note-link {
  display: inline-flex;
  align-items: center;
  gap: var(--opm-space-1);
  cursor: pointer;
}
.opm-single__omnibus .omnibus-note-link img { width: 16px; height: 16px; }
.opm-single__omnibus .omnibus-note-link a { color: var(--opm-color-ink); text-decoration: none; }
.opm-single__omnibus .omnibus-tooltip {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  min-width: 220px;
  background: var(--opm-color-bg);
  border: 1px solid var(--opm-color-border);
  box-shadow: var(--opm-shadow-lg);
  padding: var(--opm-space-2);
  font-size: var(--opm-fs-xs);
  display: none;
}
.opm-single__omnibus .omnibus-history.is-open .omnibus-tooltip { display: block; }
.opm-single__omnibus .omni-head,
.opm-single__omnibus .omni-row {
  display: flex;
  justify-content: space-between;
  gap: var(--opm-space-4);
  padding: 2px 0;
}
.opm-single__omnibus .omni-head { font-weight: var(--opm-fw-bold); border-bottom: 1px solid var(--opm-color-border-soft); }

/* Buy-box actions */
.opm-single__buybox-actions {
  display: flex;
  align-items: center;
  gap: var(--opm-space-4);
  margin-top: var(--opm-space-4);
  flex-wrap: wrap;
}
.opm-single__buybox-tools {
  display: inline-flex;
  align-items: center;
  gap: var(--opm-space-3);
  margin-left: auto;
}

/* Shared CTA / ghost button variants on top of .opm-btn */
.opm-btn--cta {
  background: var(--opm-color-ink);
  color: var(--opm-color-bg);
  border-color: var(--opm-color-ink);
  font-weight: var(--opm-fw-bold);
  text-transform: uppercase;
  font-size: var(--opm-fs-xs);
  flex: 1 1 auto;
  min-width: 160px;
  justify-content: center;
}
.opm-btn--cta:hover { background: var(--opm-color-accent); border-color: var(--opm-color-accent); color: var(--opm-color-on-accent); }
.opm-btn--ghost {
  font-size: var(--opm-fs-2xs);
  text-transform: uppercase;
  font-weight: var(--opm-fw-regular);
  padding: var(--opm-space-2) var(--opm-space-3);
  text-decoration: none;
}

/* ---------------------------------------------------------------- TABS */
.opm-single__tabs-section { margin-bottom: var(--opm-space-8); }
.opm-single__tabs {
  display: flex;
  gap: var(--opm-space-2);
  margin-bottom: var(--opm-space-5);
  flex-wrap: wrap;
}
.opm-single__tab {
  font: inherit;
  font-size: var(--opm-fs-sm);
  padding: var(--opm-space-2) var(--opm-space-5);
  border: 1px solid var(--opm-color-border);
  background: var(--opm-color-bg);
  color: var(--opm-color-ink);
  cursor: pointer;
  transition: background var(--opm-duration) var(--opm-ease), color var(--opm-duration) var(--opm-ease);
}
.opm-single__tab.is-active {
  background: var(--opm-color-ink);
  color: var(--opm-color-bg);
  font-weight: var(--opm-fw-bold);
}
.opm-single__panel.is-active { display: block; }

.opm-single__opis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--opm-space-8);
  align-items: start;
}
.opm-single__opis-title {
  font-size: var(--opm-fs-xl);
  font-weight: var(--opm-fw-medium);
  margin: 0 0 var(--opm-space-4);
}
.opm-single__desc {
  font-size: var(--opm-fs-xs);
  line-height: 1.6;
  margin-bottom: var(--opm-space-4);
}
.opm-single__desc--empty { color: var(--opm-color-ink-muted); }
.opm-single__opis-photo {
  margin: 0;
  border-radius: var(--opm-radius-md);
  overflow: hidden;
}
.opm-single__opis-photo img { cursor: zoom-in; }

/* Floor plans */
.opm-single__floor-tabs {
  display: flex;
  gap: var(--opm-space-2);
  margin-bottom: var(--opm-space-3);
}
.opm-single__floor-tab {
  font: inherit;
  font-size: var(--opm-fs-2xs);
  text-transform: uppercase;
  font-weight: var(--opm-fw-bold);
  padding: var(--opm-space-2) var(--opm-space-4);
  border: 1px solid var(--opm-color-border);
  background: var(--opm-color-bg);
  color: var(--opm-color-ink);
  cursor: pointer;
}
.opm-single__floor-tab.is-active { background: var(--opm-color-ink); color: var(--opm-color-bg); }
.opm-single__floor-stage { position: relative; margin-bottom: var(--opm-space-4); }
.opm-single__floor-img { position: relative; margin: 0; display: none; }
.opm-single__floor-img.is-active { display: block; }
.opm-single__floor-img img { cursor: zoom-in; border-radius: var(--opm-radius-sm); }
.opm-single__zoom {
  position: absolute;
  right: var(--opm-space-2);
  bottom: var(--opm-space-2);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--opm-radius-sm);
  background: var(--opm-color-bg-overlay);
  color: var(--opm-color-bg);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
}
.opm-single__floor-downloads { margin-top: var(--opm-space-4); }

/* Dane techniczne table */
.opm-single__tech { width: 100%; border-collapse: collapse; font-size: var(--opm-fs-xs); }
.opm-single__tech th,
.opm-single__tech td {
  text-align: left;
  padding: var(--opm-space-2) 0;
  border-bottom: 1px solid var(--opm-color-border-soft);
}
.opm-single__tech td { text-align: right; font-weight: var(--opm-fw-bold); }
.opm-single__tech-empty { text-align: left; color: var(--opm-color-ink-muted); }

/* Virtual tour */
.opm-single__tour-frame {
  aspect-ratio: 16 / 9;
  background: var(--opm-color-bg-muted);
  border-radius: var(--opm-radius-md);
  margin-bottom: var(--opm-space-4);
  overflow: hidden;
}
.opm-single__tour-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------------------------------------------------------------- SKŁADOWE CENY */
.opm-single__breakdown {
  border-top: 1px solid var(--opm-color-border);
  padding-top: var(--opm-space-6);
  margin-bottom: var(--opm-space-8);
}
.opm-single__breakdown-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--opm-space-8);
  align-items: start;
}
.opm-single__bd-list { list-style: none; margin: 0; padding: 0; }
.opm-single__bd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--opm-space-4);
  padding: var(--opm-space-2) 0;
  border-bottom: 1px solid var(--opm-color-border-soft);
  font-size: var(--opm-fs-xs);
}
.opm-single__bd-label em { font-style: normal; color: var(--opm-color-ink-muted); }
.opm-single__bd-val { font-family: var(--opm-font-num); white-space: nowrap; }
.opm-single__bd-val--muted { color: var(--opm-color-ink-muted); font-style: italic; }
.opm-single__bd-check {
  display: inline-flex;
  align-items: center;
  gap: var(--opm-space-2);
  cursor: pointer;
}
/* Optional-attachment checkbox: 1px solid black square, no radius, filled-square
   bullet when checked (matches the legacy contact form). */
.opm-single__bd-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.opm-single__bd-check input[type="checkbox"]::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #000;
  transform: scale(0);
  transition: transform var(--opm-duration) var(--opm-ease);
}
.opm-single__bd-check input[type="checkbox"]:checked::before { transform: scale(1); }
.opm-single__bd-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--opm-space-3);
  margin-top: var(--opm-space-4);
  font-size: var(--opm-fs-md);
}
.opm-single__bd-total strong { font-family: var(--opm-font-num); font-weight: var(--opm-fw-bold); }

.opm-single__breakdown-note { font-size: var(--opm-fs-xs); line-height: 1.5; }
.opm-single__note-item { margin: 0 0 var(--opm-space-3); }

/* ---------------------------------------------------------------- CONTACT */
.opm-single__contact {
  border-top: 1px solid var(--opm-color-border-soft);
  padding-top: var(--opm-space-6);
  margin-bottom: var(--opm-space-8);
  max-width: 560px;
}
.opm-single__contact-title { font-size: var(--opm-fs-lg); }
.opm-single__form-row { margin-bottom: var(--opm-space-3); }
.opm-single__form input[type="text"],
.opm-single__form input[type="tel"],
.opm-single__form input[type="email"],
.opm-single__form textarea {
  width: 100%;
  padding: var(--opm-space-3);
  border: 1px solid var(--opm-color-border-soft);
  border-radius: var(--opm-radius-sm);
  font: inherit;
  font-size: var(--opm-fs-sm);
}
.opm-single__form-consent {
  display: flex;
  gap: var(--opm-space-2);
  font-size: var(--opm-fs-xs);
  margin: var(--opm-space-3) 0;
}
.opm-single__form-message { margin-top: var(--opm-space-3); font-size: var(--opm-fs-xs); }
.opm-single__form-message.is-success { color: var(--opm-status-available); }
.opm-single__form-message.is-error { color: var(--opm-status-contracted); }

/* ---------------------------------------------------------------- USER DOCK */
.opm-single__dock {
  position: fixed;
  right: var(--opm-space-4);
  bottom: var(--opm-space-4);
  z-index: 40;
  display: flex;
  background: var(--opm-color-bg);
  border: 1px solid var(--opm-color-border);
  border-radius: var(--opm-radius-md);
  box-shadow: var(--opm-shadow-lg);
  overflow: hidden;
}
.opm-single__dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--opm-space-1);
  padding: var(--opm-space-2) var(--opm-space-3);
  min-width: 76px;
  font-size: var(--opm-fs-2xs);
  text-transform: uppercase;
  text-align: center;
  color: var(--opm-color-ink);
  text-decoration: none;
  background: none;
  border: 0;
  border-right: 1px solid var(--opm-color-border-soft);
  cursor: pointer;
  line-height: 1.2;
}
.opm-single__dock-btn:last-child { border-right: 0; }
.opm-single__dock-btn:hover { background: var(--opm-color-bg-muted); }
.opm-single__dock-ico { font-size: 18px; height: 22px; display: flex; align-items: center; }
.opm-single__dock-ico .opm-heart { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- LIGHTBOX */
.opm-single__lightbox {
  position: fixed;
  inset: 0;
  /* Above the offer modal (.opm-modal is z-index 100000) so the lightbox is not
     trapped behind it. */
  z-index: 100010;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--opm-color-bg-overlay);
  padding: var(--opm-space-6);
}
.opm-single__lightbox.is-open { display: flex; }
.opm-single__lightbox img { max-width: 92vw; max-height: 88vh; width: auto; border-radius: var(--opm-radius-sm); }
.opm-single__lightbox-close {
  position: absolute;
  top: var(--opm-space-4);
  right: var(--opm-space-4);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--opm-radius-full);
  background: var(--opm-color-bg);
  color: var(--opm-color-ink);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

/* ---------------------------------------------------------------- RESPONSIVE */
@media (max-width: 900px) {
  .opm-single__top,
  .opm-single__opis-grid,
  .opm-single__breakdown-grid { grid-template-columns: 1fr; }
  .opm-single__hero { min-height: 320px; }
  .opm-single__title { font-size: 28px; }
}
@media (max-width: 560px) {
  .opm-single__areas { grid-template-columns: 1fr; }
  .opm-single__dock { left: var(--opm-space-2); right: var(--opm-space-2); bottom: var(--opm-space-2); }
  .opm-single__dock-btn { flex: 1; min-width: 0; }
}

/* ---- legal note inside the price breakdown (opm_developer_charges_description) ---- */
.opm-single__note-legal {
  margin-top: var(--opm-space-2);
  font-size: var(--opm-fs-sm);
  line-height: 1.5;
}

/* ---- extra contact content under the form (opm_contact_form_extra_content) ---- */
.opm-single__contact-extra {
  margin-top: var(--opm-space-3);
  font-size: var(--opm-fs-sm);
  color: var(--opm-color-ink-muted, #5b6b72);
  line-height: 1.5;
}

/* ---- bottom info bar (opm_info_bar_item_1..4 + tooltips) ---- */
.opm-single__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--opm-space-3, 16px) var(--opm-space-5, 32px);
  margin-top: var(--opm-space-4, 24px);
  padding-top: var(--opm-space-3, 16px);
  border-top: 1px solid var(--opm-color-border, #e3e8ea);
  font-size: var(--opm-fs-sm);
  color: var(--opm-color-ink-muted, #5b6b72);
}
.opm-single__info-item { display: flex; align-items: center; }
.opm-single__info-tip[data-opm-tooltip] {
  position: relative;
  display: inline-block;
  cursor: help;
  border-bottom: 1px dotted currentColor;
}
.opm-single__info-tip[data-opm-tooltip]::before,
.opm-single__info-tip[data-opm-tooltip]::after {
  text-transform: none;
  font-size: 10px;
  line-height: 1.15;
  user-select: none;
  pointer-events: none;
  position: absolute;
  left: 50%;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.5em);
  transition: opacity 220ms ease-out, visibility 220ms ease-out, transform 220ms ease-out;
}
.opm-single__info-tip[data-opm-tooltip]::before {
  content: "";
  bottom: 100%;
  border: 5px solid transparent;
  border-bottom-width: 0;
  border-top-color: #333;
  z-index: 100021;
}
.opm-single__info-tip[data-opm-tooltip]::after {
  content: attr(data-opm-tooltip);
  bottom: calc(100% + 5px);
  width: max-content;
  min-width: 160px;
  max-width: 300px;
  padding: 1ch 1.5ch;
  border-radius: 0.3ch;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
  white-space: normal;
  text-overflow: ellipsis;
  z-index: 100020;
}
.opm-single__info-tip[data-opm-tooltip]:hover::before,
.opm-single__info-tip[data-opm-tooltip]:hover::after,
.opm-single__info-tip[data-opm-tooltip]:focus::before,
.opm-single__info-tip[data-opm-tooltip]:focus::after,
.opm-single__info-tip[data-opm-tooltip]:focus-visible::before,
.opm-single__info-tip[data-opm-tooltip]:focus-visible::after {
  opacity: 0.95;
  visibility: visible;
  transform: translate(-50%, 0);
}
.opm-single__info-tip[data-opm-tooltip=""]::before,
.opm-single__info-tip[data-opm-tooltip=""]::after {
  display: none !important;
}

@media (max-width: 767px) {
  .opm-single__info-tip[data-opm-tooltip]::after {
    max-width: min(300px, calc(100vw - 56px));
    min-width: 160px;
    font-size: 10px;
    line-height: 1.15;
  }
}

/* ---- Rekomendowane oferty (recommended offers, page only) ---- */
.opm-single__rec {
  max-width: var(--opm-content-max, 1180px);
  margin: var(--opm-space-6, 48px) auto 0;
  padding-top: var(--opm-space-5, 32px);
  border-top: 1px solid var(--opm-color-border, #e3e8ea);
}
.opm-single__rec-head { text-align: center; margin-bottom: var(--opm-space-4, 24px); }
.opm-single__rec-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--opm-fw-bold, 700);
  margin: 0 0 4px;
  color: var(--opm-color-ink, #1d2b32);
}
.opm-single__rec-lead { margin: 0; color: var(--opm-color-ink-muted, #5b6b72); }
.opm-single__rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--opm-space-4, 24px);
}
.opm-rec-card {
  display: flex;
  flex-direction: column;
  background: var(--opm-color-bg, #fff);
}
.opm-rec-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--opm-color-bg-muted, #eef1f2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.opm-rec-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.opm-rec-card__status {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: var(--opm-space-2, 8px);
  background: var(--opm-color-bg, #fff);
  padding: 3px 8px;
  border-radius: var(--opm-radius-sm, 6px);
  font-size: 11px;
  text-transform: uppercase;
}
.opm-rec-card__overlay {
  position: relative;
  z-index: 1;
  padding: var(--opm-space-3, 16px);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--opm-space-2, 8px);
}
.opm-rec-card__code { font-size: 22px; font-weight: var(--opm-fw-bold, 700); }
.opm-rec-card__meta { font-size: 13px; text-align: right; }
.opm-rec-card__meta strong { font-weight: var(--opm-fw-bold, 700); }
.opm-rec-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--opm-space-2, 8px);
  padding: var(--opm-space-3, 16px) 0 0;
  flex-wrap: wrap;
}
.opm-rec-card__price {
  font-size: 20px;
  font-weight: var(--opm-fw-medium, 500);
  color: var(--opm-color-ink, #1d2b32);
}
.opm-rec-card__actions { display: flex; align-items: center; gap: var(--opm-space-2, 8px); }
.opm-rec-card__see { text-transform: uppercase; }

@media (max-width: 900px) {
  .opm-single__rec-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .opm-single__rec-grid { grid-template-columns: 1fr; }
}

/* ---- Attachment price-history affordance (Składowe ceny) ---- */
.opm-att-hist { position: relative; display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; cursor: help; }
.opm-att-hist__ico { width: 13px; height: 13px; opacity: .7; }
.opm-att-hist__pop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 60;
  min-width: 190px; max-width: calc(100vw - 32px); padding: 8px 10px;
  background: var(--opm-color-ink, #1d2b32); color: #fff;
  font-size: 11px; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(8, 20, 28, .25);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
  display: grid; gap: 2px;
}
.opm-att-hist__pop[data-opm-tooltip="information"] {
  width: max-content;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 32px));
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.opm-att-hist:hover .opm-att-hist__pop,
.opm-att-hist:focus .opm-att-hist__pop { opacity: 1; visibility: visible; }
.opm-att-hist__row { display: grid; grid-template-columns: 1fr auto; gap: 12px; white-space: nowrap; }
.opm-att-hist__row--head { font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 2px; margin-bottom: 2px; }