/* Floor plan orientation: the picker in the native configurators and on the panel model pages. */
.np5-orient { margin: 18px 0 6px; }
.np5-orient-cards { align-items: stretch; }
.np5-orient-card { min-width: 0; }
.np5-orient-card strong,
.np5-orient-card small { overflow-wrap: anywhere; }
.np5-orient-card small { font-size: 11px; line-height: 1.4; }
.np5-orient-card img { display: block; width: 100%; object-fit: contain; background: #fff; }
/* The thumbnails show what each choice does to the plan, so they are mirrored in CSS, never swapped for other files. */
.np5-orient-card[data-orientation="mirror-vertical"] img { transform: scaleY(-1); }
.np5-orient-card[data-orientation="mirror-horizontal"] img { transform: scaleX(-1); }
/* A transformed thumbnail is painted over earlier positioned siblings, so the selection tick stays above it. */
.np5-orient-card .npm-option-tick, .np5-orient-card .tick { z-index: 2; }
.np5-orient-note { margin: 8px 0 0; color: #607080; font-size: 11px; line-height: 1.45; }

/* Native configurators */
.group.np5-orient .np5-orient-cards { gap: 8px; }
/* Three cards share one phone row: tighter padding and 12px titles keep "Veidrodinis" whole in Lithuanian. */
.option.np5-orient-card { padding: 8px 8px 10px; }
.option.np5-orient-card strong { font-size: 12px; }
.option.np5-orient-card img { height: 72px; padding: 4px; }
@media (max-width: 380px) {
  .group.np5-orient .np5-orient-cards { gap: 6px; }
  .option.np5-orient-card { padding-inline: 6px; }
}

/* Panel model pages */
.npm-option-field .np5-orient-cards.npm-option-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.npm-option-card.np5-orient-card { padding: 8px 8px 10px; }
.npm-option-card.np5-orient-card.is-selected { padding: 7px 7px 9px; }
.npm-option-card.np5-orient-card .npm-option-image { height: 84px; margin: 0 0 8px; padding: 4px; }
.npm-option-card.np5-orient-card strong { font-size: 12px; }