/* =============================================================================
   LV Configurator — Frontend Styles
   All values exposed as CSS custom properties → overrideable from Gutenberg.
   ============================================================================= */

/* ─── Design tokens ──────────────────────────────────────────────────────────
   Override these in Gutenberg block settings per client.                       */

.lv-conf {
	--lv-viewer-bg:     #f0f0ee;
	--lv-panel-bg:      #ffffff;
	--lv-border:        #e4e4e2;
	--lv-text:          #1a1a1a;
	--lv-text-muted:    #888888;
	--lv-radius:        6px;
	--lv-swatch-size:   36px;
	--lv-font:          inherit;
	--lv-cta-bg:        #1a1a1a;
	--lv-cta-text:      #ffffff;
	--lv-cta-radius:    4px;
	--lv-accent:        #1a1a1a;
	--lv-height:        90vh;   /* override in theme: .lv-conf { --lv-height: 80vh } */
}


/* ─── Container ──────────────────────────────────────────────────────────────*/

.lv-conf {
	display:               grid;
	grid-template-columns: 60fr 40fr;
	height:         var(--lv-height);
	min-height:     420px;
	width:          100%;
	border:         1px solid var(--lv-border);
	border-radius:  var(--lv-radius);
	overflow:       hidden;
	font-family:    var(--lv-font);
	color:          var(--lv-text);
	box-sizing:     border-box;
	position:       relative;
}


/* ─── Viewer ─────────────────────────────────────────────────────────────────*/

.lv-conf__viewer {
	position:   relative;
	background: var(--lv-viewer-bg);
	overflow:   hidden;
	/* Height driven by container (--lv-height), not aspect-ratio.
	   aspect-ratio is restored on mobile where layout stacks vertically. */
	min-height: 320px;
}

.lv-conf__canvas {
	width:   100%;
	height:  100%;
	display: block;
}


/* Loading spinner overlay */
.lv-conf__loading {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--lv-viewer-bg);
	z-index:         10;
	transition:      opacity 0.3s;
}

.lv-conf__spinner {
	width:           36px;
	height:          36px;
	border:          3px solid rgba(0,0,0,0.1);
	border-top-color: var(--lv-accent);
	border-radius:   50%;
	animation:       lv-spin 0.8s linear infinite;
}

@keyframes lv-spin {
	to { transform: rotate(360deg); }
}

.lv-conf__error {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            10px;
	padding:        24px;
	text-align:     center;
	color:          var(--lv-text);
}

.lv-conf__error-icon {
	font-size:   2rem;
	line-height: 1;
}

.lv-conf__error-title {
	font-weight: 600;
	font-size:   0.95rem;
	margin:      0;
}

.lv-conf__error-file {
	font-size:        0.75rem;
	color:            var(--lv-text-muted);
	word-break:       break-all;
	max-width:        320px;
	background:       rgba(0,0,0,0.05);
	padding:          4px 8px;
	border-radius:    3px;
	font-family:      monospace;
}

.lv-conf__error-hint {
	font-size:  0.75rem;
	color:      var(--lv-text-muted);
	margin:     0;
}


/* Camera controls — bottom left */
.lv-conf__viewer-controls {
	position: absolute;
	bottom:   14px;
	left:     14px;
	display:  flex;
	gap:      6px;
	z-index:  5;
}

.lv-conf__ctrl {
	width:           32px;
	height:          32px;
	border-radius:   var(--lv-radius);
	background:      rgba(255,255,255,0.88);
	border:          1px solid rgba(0,0,0,0.10);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--lv-text);
	transition:      background 0.15s;
}

.lv-conf__ctrl:hover {
	background: rgba(255,255,255,1);
}


/* Top-left pill buttons container: AR + Share.
   Left side, not right — the preset rail sits flush against the viewer's
   right edge and would otherwise cover these. */
.lv-conf__viewer-topbar {
	position: absolute;
	top:      12px;
	left:     12px;
	display:  flex;
	gap:      6px;
	z-index:  5;
}

/* Share button — subtle white pill */
.lv-conf__btn-share {
	display:       flex;
	align-items:   center;
	gap:           5px;
	padding:       6px 12px;
	background:    rgba(255,255,255,0.85);
	border:        1px solid rgba(0,0,0,0.12);
	border-radius: 20px;
	font-size:     12px;
	font-weight:   500;
	cursor:        pointer;
	color:         var(--lv-text);
	transition:    background 0.15s;
	white-space:   nowrap;
}
.lv-conf__btn-share:hover { background: #fff; }

/* AR button — prominent dark pill so it's impossible to miss */
.lv-conf__btn-ar {
	display:       flex;
	align-items:   center;
	gap:           6px;
	padding:       7px 14px;
	background:    rgba(20,20,20,0.82);
	border:        1px solid rgba(255,255,255,0.15);
	border-radius: 20px;
	font-size:     13px;
	font-weight:   600;
	letter-spacing: 0.02em;
	cursor:        pointer;
	color:         #fff;
	transition:    background 0.15s;
	white-space:   nowrap;
	backdrop-filter: blur(6px);
}
.lv-conf__btn-ar:hover    { background: rgba(20,20,20,0.95); }
.lv-conf__btn-ar:disabled { opacity: 0.45; cursor: not-allowed; }


/* ─── Panel ──────────────────────────────────────────────────────────────────*/

.lv-conf__panel {
	display:        flex;
	flex-direction: column;
	background:     var(--lv-panel-bg);
	border-left:    1px solid var(--lv-border);
	overflow:       hidden;
	min-height:     0; /* flex items default to min-height:auto — without this,
	                       children (e.g. .lv-conf__switcher) refuse to shrink to
	                       fit, so their own overflow-y:auto never kicks in */
	/* Panel height is driven by the viewer's aspect-ratio via CSS grid */
}


/* Header — product name + switch button */
.lv-conf__header {
	padding:         20px 22px 16px;
	border-bottom:   1px solid var(--lv-border);
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
}

/* Title doubles as the switch-cabin trigger — name + chevron, small caption
   underneath signals it's clickable. Hidden caption/chevron + no pointer
   when there's only one product (see .is-single, toggled in _buildSwitcherUI). */
.lv-conf__title-switch {
	display:        flex;
	flex-direction: column;
	align-items:    flex-start;
	gap:            2px;
	min-width:      0;
	padding:        2px 6px;
	margin:         -2px -6px;
	border:         none;
	background:     none;
	border-radius:  4px;
	cursor:         pointer;
	text-align:     left;
	transition:     background 0.15s;
}

.lv-conf__title-switch:hover {
	background: rgba( 0, 0, 0, 0.05 );
}

.lv-conf__title-switch.is-single {
	cursor: default;
}

.lv-conf__title-switch.is-single:hover {
	background: none;
}

.lv-conf__title-row {
	display:     flex;
	align-items: center;
	gap:         6px;
	min-width:   0;
}

.lv-conf__title-text {
	font-size:     20px;
	font-weight:   600;
	line-height:   1.25;
	color:         var(--lv-text);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.lv-conf__title-chevron {
	flex-shrink: 0;
	color:       var(--lv-text-muted);
}

.lv-conf__title-caption {
	font-size:      11px;
	font-weight:    500;
	color:          var(--lv-text-muted);
	letter-spacing: 0.02em;
}

.lv-conf__title-switch.is-single .lv-conf__title-chevron,
.lv-conf__title-switch.is-single .lv-conf__title-caption {
	display: none;
}

/* Brand badge — top-right of the panel header, links to lightvision.pl */
.lv-conf__badge {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         1;
	transition:      opacity 0.2s;
}

.lv-conf__badge:hover {
	opacity: 0.65;
}

/* Tekst linku znaczka: niewidoczny na ekranie, czytany przez czytniki ekranu i Google */
.lv-conf__sr {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}


/* Groups — scrollable middle section */
.lv-conf__groups {
	flex:       1;
	overflow-y: auto;
	/* Odsunięcie od prawej krawędzi panelu: przy konfiguratorze na całą szerokość
	   strony pasek stał tuż przy pasku przewijania strony i zlewał się z nim. */
	margin-right:  6px;
	padding:       18px 16px 18px 22px;

	display:        flex;
	flex-wrap:      wrap;
	align-content:  flex-start;
	column-gap:     14px;

	/* Wyraźny pasek: klienci na laptopach (touchpad) nie zauważali, że opcje
	   da się przewinąć. Chrome 121+ i Firefox używają tych dwóch właściwości
	   i IGNORUJĄ wtedy ::-webkit-scrollbar — stąd dawny pasek 4 px w 15% krycia
	   był w praktyce cienką, ledwo widoczną kreską. Reguły webkit niżej to Safari. */
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.42) rgba(0,0,0,0.07);
}

.lv-conf__groups::-webkit-scrollbar       { width: 10px; }
.lv-conf__groups::-webkit-scrollbar-track { background: rgba(0,0,0,0.07); border-radius: 5px; margin: 6px 0; }
.lv-conf__groups::-webkit-scrollbar-thumb {
	background:      rgba(0,0,0,0.42);
	border-radius:   5px;
	border:          2px solid transparent;
	background-clip: padding-box;
	min-height:      40px;
}
.lv-conf__groups::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.6); }

/* „Więcej opcji ↓" — nad podsumowaniem, gdy pod spodem są jeszcze opcje.
   Wrapper ma zerową wysokość i stoi między listą a podsumowaniem, więc nie
   zajmuje miejsca; jego zawartość wystaje w górę, nad dół listy opcji. */
.lv-conf__more {
	position: relative;
	height:   0;
	z-index:  3;
}
.lv-conf__more[hidden] { display: none; }
.lv-conf__more::before {
	content:        '';
	position:       absolute;
	left:           0;
	right:          18px;               /* nie zasłaniaj paska przewijania */
	bottom:         0;
	height:         56px;
	background:     linear-gradient( to bottom, rgba(255,255,255,0), var(--lv-panel-bg, #fff) 85% );
	pointer-events: none;
}
.lv-conf__more-btn {
	position:      absolute;
	left:          50%;
	bottom:        8px;
	transform:     translateX(-50%);
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	padding:       6px 14px;
	border:        1px solid var(--lv-border, rgba(0,0,0,0.12));
	border-radius: 100px;
	background:    #fff;
	box-shadow:    0 2px 8px rgba(0,0,0,0.12);
	font:          600 12px/1.2 inherit;
	color:         var(--lv-text, #1a1a1a);
	cursor:        pointer;
	white-space:   nowrap;
	animation:     lv-more-nudge 2.4s ease-in-out infinite;
}
.lv-conf__more-btn:hover { animation: none; box-shadow: 0 3px 12px rgba(0,0,0,0.18); }
@keyframes lv-more-nudge {
	0%, 70%, 100% { transform: translate(-50%, 0); }
	80%           { transform: translate(-50%, 3px); }
	90%           { transform: translate(-50%, 0); }
}
@media ( prefers-reduced-motion: reduce ) { .lv-conf__more-btn { animation: none; } }

.lv-conf__groups[hidden] { display: none; }

/* Group hidden by show_when (e.g. desktop colour without a desk). */
.lv-conf__groups .lv-conf__group[hidden] { display: none !important; }

/* Option hidden by a hide_when rule — the tile classes set display, so [hidden] alone loses. */
.lv-conf__groups [data-option-id][hidden] { display: none !important; }


/* Individual group */
.lv-conf__group {
	width:         100%;
	margin-bottom: 22px;
}

/* Half-width group: two side by side, wraps naturally when panel is narrow */
.lv-conf__group--half {
	width: calc(50% - 7px); /* 7px = half of column-gap (14px) */
}

.lv-conf__group-header {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin-bottom:   10px;
}

.lv-conf__group-label {
	font-size:   12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:       var(--lv-text);
}

.lv-conf__group-sel {
	font-size: 12px;
	color:     var(--lv-text-muted);
}

/* Label + optional "i" icon (rendered only when the group has a description) */
.lv-conf__group-label-wrap {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	min-width:   0;
}

.lv-conf__group-info {
	flex-shrink:     0;
	width:           16px;
	height:          16px;
	padding:         0;
	border:          1px solid rgba(0,0,0,0.25);
	border-radius:   50%;
	background:      transparent;
	color:           var(--lv-text-muted);
	font:            600 10px/1 Georgia, "Times New Roman", serif;
	font-style:      italic;
	cursor:          help;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.lv-conf__group-info:hover {
	background:   var(--lv-text);
	border-color: var(--lv-text);
	color:        #fff;
}


/* ─── Fabric preview strip (material groups) ────────────────────────────────*/

.lv-conf__fabric-preview {
	display:         block;
	width:           100%;
	height:          100px;
	margin:          0 0 10px;
	padding:         0;
	position:        relative;
	border:          1px solid rgba(0,0,0,0.08);
	border-radius:   10px;
	background-size: cover;
	background-position: center;
	background-color: #e9e9e6;
	cursor:          zoom-in;
	overflow:        hidden;
	transition:      box-shadow 0.15s;
}

.lv-conf__fabric-preview[hidden] { display: none; }

.lv-conf__fabric-preview:hover {
	box-shadow: 0 0 0 2px var(--lv-accent);
}

.lv-conf__fabric-preview-name {
	position:      absolute;
	left:          8px;
	bottom:        8px;
	padding:       3px 8px;
	border-radius: 100px;
	background:    rgba(255,255,255,0.9);
	font-size:     11px;
	font-weight:   500;
	color:         var(--lv-text);
	max-width:     calc(100% - 48px);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.lv-conf__fabric-preview-zoom {
	position:        absolute;
	right:           8px;
	top:             8px;
	width:           26px;
	height:          26px;
	border-radius:   50%;
	background:      rgba(255,255,255,0.9);
	color:           var(--lv-text);
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* Fullscreen fabric browser (inside .lv-conf__overlay) */
.lv-conf__fabric-modal {
	width:          min(960px, 96vw);
	height:         min(760px, 92vh);
	background:     #f0f0ee;
	border-radius:  12px;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	box-shadow:     0 24px 64px rgba(0,0,0,0.4);
}

.lv-conf__fabric-big {
	flex:                1;
	min-height:          0;
	background-size:     cover;
	background-position: center;
	background-color:    #e9e9e6;
}

.lv-conf__fabric-thumbs {
	flex-shrink: 0;
	display:     flex;
	gap:         10px;
	padding:     12px 14px;
	overflow-x:  auto;
	background:  rgba(255,255,255,0.95);
	border-top:  1px solid rgba(0,0,0,0.08);
	scrollbar-width: thin;
}

.lv-conf__fabric-thumb {
	flex:           0 0 auto;
	width:          76px;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            5px;
	padding:        0;
	border:         none;
	background:     transparent;
	cursor:         pointer;
}

.lv-conf__fabric-thumb-img {
	width:               64px;
	height:              64px;
	border-radius:       10px;
	border:              2px solid transparent;
	background-size:     cover;
	background-position: center;
	box-shadow:          inset 0 0 0 1px rgba(0,0,0,0.08);
	transition:          border-color 0.15s, transform 0.1s;
}

.lv-conf__fabric-thumb:hover .lv-conf__fabric-thumb-img {
	border-color: rgba(0,0,0,0.2);
	transform:    scale(1.05);
}

.lv-conf__fabric-thumb.is-active .lv-conf__fabric-thumb-img {
	border-color: var(--lv-accent);
}

.lv-conf__fabric-thumb-name {
	font-size:     10px;
	line-height:   1.2;
	color:         var(--lv-text-muted);
	text-align:    center;
	max-width:     100%;
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.lv-conf__fabric-thumb.is-active .lv-conf__fabric-thumb-name {
	color:       var(--lv-text);
	font-weight: 600;
}

.lv-conf__fabric-thumb-name em {
	font-style: normal;
	color:      var(--lv-text-muted);
}

/* ─── Option tiles (material / color groups) ─────────────────────────────────*/

.lv-conf__tiles {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
}

.lv-conf__tile {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	background:     transparent;
	border:         none;
	padding:        0;
	cursor:         pointer;
	flex-shrink:    0;
}

.lv-conf__tile-swatch {
	width:         52px;
	height:        52px;
	border-radius: 10px;
	padding:       2px;
	border:        2px solid transparent;
	transition:    border-color 0.15s, transform 0.1s;
	box-sizing:    border-box;
}

.lv-conf__tile:hover .lv-conf__tile-swatch {
	border-color: rgba(0,0,0,0.2);
	transform:    scale(1.05);
}

.lv-conf__tile.is-active .lv-conf__tile-swatch {
	border-color: var(--lv-accent);
}

.lv-conf__tile-inner {
	display:             block;
	width:               100%;
	height:              100%;
	border-radius:       8px;
	border:              1px solid rgba(0,0,0,0.08);
	background-size:     cover;
	background-position: center;
	box-sizing:          border-box;
}

.lv-conf__tile-label {
	font-size:   10px;
	color:       var(--lv-text-muted);
	white-space: nowrap;
	line-height: 1;
}

.lv-conf__tile.is-active .lv-conf__tile-label {
	color:       var(--lv-text);
	font-weight: 600;
}


/* ─── Option cards (visibility / choice groups) ──────────────────────────────*/

.lv-conf__option-cards {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.lv-conf__option-card {
	display:       flex;
	align-items:   center;
	gap:           10px;
	padding:       9px 12px;
	border-radius: var(--lv-radius);
	border:        1px solid var(--lv-border);
	background:    transparent;
	cursor:        pointer;
	text-align:    left;
	width:         100%;
	transition:    border-color 0.15s, background 0.15s;
}

.lv-conf__option-card:hover {
	border-color: rgba(0,0,0,0.3);
}

.lv-conf__option-card.is-active {
	border-color: var(--lv-accent);
	background:   rgba(0,0,0,0.02);
}

.lv-conf__card-radio {
	width:         16px;
	height:        16px;
	border-radius: 50%;
	border:        1.5px solid var(--lv-border);
	flex-shrink:   0;
	position:      relative;
	transition:    border-color 0.15s, background 0.15s;
	box-sizing:    border-box;
}

.lv-conf__option-card.is-active .lv-conf__card-radio {
	border-color: var(--lv-accent);
	background:   var(--lv-accent);
}

.lv-conf__card-radio::after {
	content:       '';
	position:      absolute;
	width:         6px;
	height:        6px;
	border-radius: 50%;
	background:    #fff;
	top:           50%;
	left:          50%;
	transform:     translate(-50%, -50%) scale(0);
	transition:    transform 0.15s;
}

.lv-conf__option-card.is-active .lv-conf__card-radio::after {
	transform: translate(-50%, -50%) scale(1);
}

.lv-conf__card-name {
	flex:      1;
	font-size: 13px;
	color:     var(--lv-text);
}

.lv-conf__option-card.is-active .lv-conf__card-name {
	font-weight: 600;
}

.lv-conf__card-price {
	font-size:   12px;
	color:       var(--lv-text-muted);
	flex-shrink: 0;
}

.lv-conf__card-price--extra {
	color: #2a7a3a;
}


/* ─── Pills (compact horizontal buttons) ────────────────────────────────────*/

.lv-conf__pills {
	display:   flex;
	gap:       6px;
	flex-wrap: wrap;
}

.lv-conf__pill {
	padding:       7px 14px;
	border-radius: 100px;
	border:        1px solid var(--lv-border);
	background:    transparent;
	font-size:     13px;
	color:         var(--lv-text-muted);
	cursor:        pointer;
	transition:    border-color 0.15s, color 0.15s, background 0.15s;
	white-space:   nowrap;
	line-height:   1;
}

.lv-conf__pill:hover {
	border-color: rgba(0,0,0,0.35);
	color:        var(--lv-text);
}

.lv-conf__pill.is-active {
	border-color: var(--lv-accent);
	background:   var(--lv-accent);
	color:        #fff;
}


/* ─── Summary ────────────────────────────────────────────────────────────────*/

.lv-conf__summary {
	padding:      16px 22px 20px;
	border-top:   1px solid var(--lv-border);
	flex-shrink:  0;
}

.lv-conf__price-lines {
	margin-bottom: 6px;
}

.lv-conf__price-line {
	display:         flex;
	justify-content: space-between;
	font-size:       12px;
	color:           var(--lv-text-muted);
	margin-bottom:   3px;
}

.lv-conf__total {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	margin:          8px 0 14px;
	padding-top:     8px;
	border-top:      1px solid var(--lv-border);
}

.lv-conf__total-label {
	font-size:   13px;
	font-weight: 500;
}

.lv-conf__total-value {
	font-size:   22px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.lv-conf__total-tax {
	margin-left:    6px;
	font-size:      12px;
	font-weight:    500;
	letter-spacing: 0;
	color:          var(--lv-text-muted, #6b6b6b);
}


/* Add to cart button */
.lv-conf__btn-cart {
	width:          100%;
	padding:        12px 16px;
	background:     var(--lv-cta-bg);
	color:          var(--lv-cta-text);
	border:         none;
	border-radius:  var(--lv-cta-radius);
	font-size:      14px;
	font-weight:    600;
	cursor:         pointer;
	transition:     background 0.2s, opacity 0.15s;
	letter-spacing: 0.01em;
}

.lv-conf__btn-cart:hover:not(:disabled) {
	opacity: 0.88;
}

.lv-conf__btn-cart:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

.lv-conf__btn-cart.is-success {
	background: #2a7a3a;
}

/* Odrzucone przez sklep (np. mostek nie umiał wycenić) — pełna widoczność mimo :disabled. */
.lv-conf__btn-cart.is-error {
	background: #b32d2e;
	opacity:    1;
}

/* Produkt bez sklepu (woo_product_id = 0) — bez przycisku koszyka. */
.lv-conf--no-cart .lv-conf__btn-cart { display: none; }

/* price_display = hide (demo, produkt bez cennika) — żadnych cen ani sumy. */
.lv-conf--no-price .lv-conf__price-lines,
.lv-conf--no-price .lv-conf__total,
.lv-conf--no-price .lv-conf__card-price,
.lv-conf--no-price .lv-conf__switcher-price { display: none; }

/* Ani ceny, ani koszyka — cały pasek podsumowania znika. */
.lv-conf--no-price.lv-conf--no-cart .lv-conf__summary { display: none; }

/* Zapytanie o ofertę (YITH przez lv-cart-bridge 1.5+): przycisk drugorzędny pod koszykiem. */
.lv-conf__btn-quote {
	width:          100%;
	margin-top:     8px;
	padding:        11px 16px;
	background:     transparent;
	color:          var(--lv-cta-bg);
	border:         1px solid var(--lv-cta-bg);
	border-radius:  var(--lv-cta-radius);
	font-size:      14px;
	font-weight:    600;
	cursor:         pointer;
	transition:     background 0.2s, color 0.2s, opacity 0.15s;
	letter-spacing: 0.01em;
}

.lv-conf__btn-quote[hidden],
.lv-conf__quote-msg[hidden] {
	display: none;
}

.lv-conf__btn-quote:hover:not(:disabled) {
	background: var(--lv-cta-bg);
	color:      var(--lv-cta-text);
}

.lv-conf__btn-quote:disabled {
	opacity: 0.5;
	cursor:  not-allowed;
}

.lv-conf__btn-quote.is-success {
	background:   #2a7a3a;
	border-color: #2a7a3a;
	color:        #fff;
	opacity:      1;
}

.lv-conf__btn-quote.is-error {
	background:   #b32d2e;
	border-color: #b32d2e;
	color:        #fff;
	opacity:      1;
}

.lv-conf__quote-msg {
	margin-top:  8px;
	font-size:   13px;
	line-height: 1.4;
	color:       var(--lv-text-muted, #6b6b6b);
}

.lv-conf__quote-msg a {
	color:           var(--lv-cta-bg);
	font-weight:     600;
	text-decoration: underline;
	white-space:     nowrap;
}


/* ─── Viewer toggle buttons (LED, extras) ───────────────────────────────────*/

.lv-conf__viewer-toggles {
	position:        absolute;
	left:            12px;
	top:             52px; /* below AR/Share row */
	display:         flex;
	flex-direction:  column;
	gap:             8px;
	z-index:         5;
}

.lv-conf__viewer-toggle {
	width:           38px;
	height:          38px;
	border-radius:   var(--lv-radius);
	background:      rgba(255,255,255,0.88);
	border:          1px solid rgba(0,0,0,0.10);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--lv-text-muted);
	transition:      background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.lv-conf__viewer-toggle:hover {
	background: rgba(255,255,255,1);
}

/* Active = LED is ON — warm yellow glow */
.lv-conf__viewer-toggle.is-active {
	background:   #FFFBE6;
	color:        #D97700;
	border-color: #F5C842;
	box-shadow:   0 0 10px rgba(245, 200, 50, 0.45);
}

/* ─── "Specification" hotspot pinned to the model ───────────────────────────*/
/* Positioned by JS every frame via transform: translate(x, y) — x/y are the
   projected bottom-front-right corner of the model. The negative margin puts
   the dot's centre (not the pill's top-left) on that point: 4px padding + 13px
   dot radius = 17px. z-index 6: above the topbar/toggles (5), below the
   loading overlay (10) which hides it while a model is loading. */

.lv-conf__hotspot {
	position:        absolute;
	left:            0;
	top:             0;
	z-index:         6;
	display:         flex;
	align-items:     center;
	gap:             8px;
	margin:          -17px 0 0 -17px;
	padding:         4px 13px 4px 4px;
	border-radius:   100px;
	background:      rgba(255,255,255,0.94);
	border:          1px solid rgba(0,0,0,0.12);
	box-shadow:      0 2px 8px rgba(0,0,0,0.12);
	font-size:       12px;
	font-weight:     600;
	letter-spacing:  0.01em;
	color:           var(--lv-text);
	text-decoration: none;
	white-space:     nowrap;
	will-change:     transform;
	transition:      opacity 0.2s, box-shadow 0.15s;
}

/* „Wejdź do środka" — przypięty do drzwi, ten sam styl co hotspot specyfikacji. */
.lv-conf__enter {
	position:      absolute;
	left:          0;
	top:           0;
	z-index:       6;
	display:       flex;
	align-items:   center;
	gap:           7px;
	margin:        -16px 0 0 -16px;
	padding:       4px 13px 4px 4px;
	border-radius: 100px;
	border:        1px solid rgba(0,0,0,0.12);
	background:    rgba(255,255,255,0.94);
	box-shadow:    0 2px 8px rgba(0,0,0,0.12);
	font:          600 12px/1.2 inherit;
	color:         var(--lv-text, #1a1a1a);
	white-space:   nowrap;
	cursor:        pointer;
	will-change:   transform;
	transition:    opacity 0.2s, box-shadow 0.15s;
}
.lv-conf__enter:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.2); }
.lv-conf__enter-dot {
	width:           24px;
	height:          24px;
	border-radius:   50%;
	background:      var(--lv-accent, #1a1a1a);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.lv-conf__enter[hidden], .lv-conf__exit[hidden] { display: none; }
.lv-conf.is-inside .lv-conf__hotspot { visibility: hidden !important; }
.lv-conf__exit {
	position:      absolute;
	left:          50%;
	bottom:        16px;
	z-index:       6;
	transform:     translateX(-50%);
	display:       inline-flex;
	align-items:   center;
	gap:           7px;
	padding:       8px 16px;
	border-radius: 100px;
	border:        none;
	background:    var(--lv-text, #1a1a1a);
	color:         #fff;
	box-shadow:    0 3px 12px rgba(0,0,0,0.25);
	font:          600 13px/1.2 inherit;
	cursor:        pointer;
}

.lv-conf__hotspot:hover {
	box-shadow: 0 3px 12px rgba(0,0,0,0.2);
	color:      var(--lv-text);
}

.lv-conf__hotspot-dot {
	position:        relative;
	flex-shrink:     0;
	width:           26px;
	height:          26px;
	border-radius:   50%;
	background:      var(--lv-accent);
	color:           #fff;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

/* Pulse: rings expanding out of the dot, so the eye finds it while the pill
   itself never moves. Two rings offset by half a period read as a steady
   beacon rather than a blink. Paused on hover (it has been found) and when
   faded behind the model. */
.lv-conf__hotspot-dot::before,
.lv-conf__hotspot-dot::after {
	content:        '';
	position:       absolute;
	inset:          0;
	border-radius:  50%;
	border:         2px solid var(--lv-accent);
	opacity:        0;
	animation:      lv-hotspot-pulse 2.4s ease-out infinite;
	pointer-events: none;
}

.lv-conf__hotspot-dot::after {
	animation-delay: 1.2s;
}

@keyframes lv-hotspot-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.3); opacity: 0;   }
}

.lv-conf__hotspot:hover .lv-conf__hotspot-dot::before,
.lv-conf__hotspot:hover .lv-conf__hotspot-dot::after,
.lv-conf__hotspot.is-behind .lv-conf__hotspot-dot::before,
.lv-conf__hotspot.is-behind .lv-conf__hotspot-dot::after {
	animation-play-state: paused;
	opacity:              0;
}

@media (prefers-reduced-motion: reduce) {
	.lv-conf__hotspot-dot::before,
	.lv-conf__hotspot-dot::after { animation: none; }
}

.lv-conf__hotspot.is-behind {
	opacity:        0.25;
	pointer-events: none;
}

/* ─── Product switcher panel ─────────────────────────────────────────────────*/

.lv-conf__switcher {
	display:        flex;
	flex-direction: column;
	flex:           1;
	overflow:       hidden;
	min-height:     0; /* same fix as .lv-conf__panel — lets .lv-conf__switcher-grid's
	                       own overflow-y:auto actually take over instead of everything
	                       trying to grow to fit all cards */
}

.lv-conf__switcher[hidden] {
	display: none;
}

.lv-conf__switcher-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         14px 22px;
	border-bottom:   1px solid var(--lv-border);
	flex-shrink:     0;
	font-size:       14px;
	font-weight:     500;
	color:           var(--lv-text-muted);
}

.lv-conf__switcher-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	border:          none;
	border-radius:   var(--lv-radius);
	background:      transparent;
	cursor:          pointer;
	color:           var(--lv-text-muted);
	transition:      background 0.15s, color 0.15s;
	padding:         0;
}

.lv-conf__switcher-close:hover {
	background: rgba(0,0,0,0.06);
	color:      var(--lv-text);
}

.lv-conf__switcher-filters {
	display:     flex;
	flex-wrap:   wrap;
	gap:         6px;
	padding:     12px 22px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--lv-border);
}

.lv-conf__switcher-filter {
	display:       inline-flex;
	align-items:   center;
	padding:       4px 12px;
	border:        1px solid var(--lv-border);
	border-radius: 100px;
	background:    transparent;
	font-size:     12px;
	color:         var(--lv-text-muted);
	cursor:        pointer;
	transition:    border-color 0.15s, color 0.15s, background 0.15s;
	line-height:   1;
}

.lv-conf__switcher-filter:hover {
	border-color: #888;
	color:        var(--lv-text);
}

.lv-conf__switcher-filter.is-active {
	border-color: var(--lv-accent);
	background:   var(--lv-accent);
	color:        #fff;
}

.lv-conf__switcher-grid {
	display:   grid;
	grid-template-columns: repeat(2, 1fr);
	/* max-content, NOT the default auto: the card's height comes from its
	   aspect-ratio:1/1 thumbnail, which auto-sized rows fail to account for in
	   a definite-height container — they collapse to share the available space
	   instead (5 cards → 3 rows of 137px each, clipping the 223px thumbnail via
	   the card's overflow:hidden, and scrollHeight never exceeds clientHeight so
	   overflow-y below never engages). max-content pins each row to the card's
	   natural height, so extra cards overflow and scroll as intended. */
	grid-auto-rows: max-content;
	gap:       10px;
	padding:   14px 22px;
	overflow-y: auto;
	flex:      1;
	min-height: 0; /* it's a flex item too — same min-height:auto trap */
	scrollbar-width: thin;
	scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.lv-conf__switcher-grid::-webkit-scrollbar       { width: 4px; }
.lv-conf__switcher-grid::-webkit-scrollbar-track { background: transparent; }
.lv-conf__switcher-grid::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.lv-conf__switcher-card {
	border:        1px solid var(--lv-border);
	border-radius: var(--lv-radius);
	overflow:      hidden;
	cursor:        pointer;
	background:    #fff;
	transition:    border-color 0.15s, box-shadow 0.15s;
}

.lv-conf__switcher-card:hover {
	border-color: var(--lv-accent);
	box-shadow:   0 2px 10px rgba(0,0,0,0.08);
}

.lv-conf__switcher-card.is-current {
	border-color: var(--lv-accent);
	box-shadow:   0 0 0 2px var(--lv-accent);
}

.lv-conf__switcher-card[data-hidden] {
	display: none;
}

.lv-conf__switcher-thumb {
	aspect-ratio: 1 / 1;
	background:   var(--lv-viewer-bg);
	overflow:     hidden;
	display:      flex;
	align-items:  center;
	justify-content: center;
}

.lv-conf__switcher-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.lv-conf__switcher-thumb-placeholder {
	color: #ccc;
}

.lv-conf__switcher-info {
	padding:    8px 10px 10px;
}

.lv-conf__switcher-name {
	font-size:   12px;
	font-weight: 500;
	margin:      0 0 3px;
	color:       var(--lv-text);
	line-height: 1.3;
}

.lv-conf__switcher-price {
	font-size: 11px;
	color:     var(--lv-text-muted);
	margin:    0;
}

/* ─── AR overlay ─────────────────────────────────────────────────────────────*/

.lv-conf__overlay {
	position:        fixed;
	inset:           0;
	z-index:         99999;
	background:      rgba(0, 0, 0, 0.72);
	display:         flex;
	align-items:     center;
	justify-content: center;
	animation:       lv-ar-fade-in 0.18s ease;
}

@keyframes lv-ar-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.lv-conf__ar-modal {
	position:      relative;
	width:         min(640px, 96vw);
	height:        min(720px, 92vh);
	border-radius: 12px;
	overflow:      hidden;
	background:    #f0f0ee;
	display:       flex;
	flex-direction: column;
	box-shadow:    0 24px 64px rgba(0,0,0,0.4);
}

.lv-conf__ar-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         12px 16px;
	background:      rgba(255,255,255,0.95);
	border-bottom:   1px solid rgba(0,0,0,0.08);
	flex-shrink:     0;
}

.lv-conf__ar-title {
	font-size:   14px;
	font-weight: 500;
	color:       #1a1a1a;
}

.lv-conf__ar-close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          none;
	border-radius:   var(--lv-radius, 6px);
	background:      transparent;
	cursor:          pointer;
	color:           #555;
	transition:      background 0.15s, color 0.15s;
	padding:         0;
}

.lv-conf__ar-close:hover {
	background: rgba(0,0,0,0.06);
	color:      #1a1a1a;
}

/* "Open original" next to the close button (specification image). Without
   margin-left:auto the bar's space-between would park it mid-bar. */
.lv-conf__overlay-open {
	margin-left:  auto;
	margin-right: 4px;
}

/* Group info card (small centered dialog inside the generic overlay) */
.lv-conf__info-card {
	width:          min(420px, 92vw);
	max-height:     80vh;
	background:     #fff;
	border-radius:  12px;
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	box-shadow:     0 24px 64px rgba(0,0,0,0.4);
}

.lv-conf__info-text {
	margin:      0;
	padding:     16px 18px 20px;
	font-size:   13px;
	line-height: 1.55;
	color:       var(--lv-text);
	white-space: pre-line;
	overflow-y:  auto;
}

/* With a photo the card takes the fabric-browser format: image fills the space,
   text keeps its own scroll underneath so a long description never pushes the
   picture out of view. */
.lv-conf__info-card--photo {
	width:      min(960px, 96vw);
	height:     min(760px, 92vh);
	max-height: 92vh;
	background: #f0f0ee;
}

.lv-conf__info-photo {
	flex:            1;
	min-height:      0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         14px;
	background:      #e9e9e6;
}

.lv-conf__info-photo img {
	max-width:  100%;
	max-height: 100%;
	/* contain, not cover: this is a product photograph, not a material sample —
	   cropping it would hide exactly the detail the customer opened it for. */
	object-fit: contain;
	display:    block;
}

.lv-conf__info-card--photo .lv-conf__info-text {
	flex-shrink: 0;
	max-height:  30%;
	background:  #fff;
}

.lv-conf__ar-viewer {
	flex:   1;
	width:  100%;
	height: 100%;
	--poster-color: #f0f0ee;
}

/* AR button inside model-viewer — override default styles */
.lv-conf__ar-viewer::part(ar-button) {
	bottom:        20px;
	left:          50%;
	transform:     translateX(-50%);
	background:    #1a1a1a;
	color:         #fff;
	border:        none;
	border-radius: 100px;
	padding:       10px 24px;
	font-size:     14px;
	font-weight:   600;
}

/* ─── Presety ────────────────────────────────────────────────────────────────
   Pełnowysokościowa szyna zakładek, przyklejona do prawej krawędzi viewera —
   w całości wewnątrz kolumny viewera, więc nigdy nie zachodzi na opcje panelu.
   Wybór presetu jest nadrzędny wobec opcji: zakładka "prowadzi do" panelu. */

.lv-conf__presets {
	position:       absolute;
	left:           60%;   /* granica grid-template-columns: 60fr 40fr */
	transform:      translateX( -100% ); /* prawa krawędź szyny = granica; szyna cała w viewerze */
	top:            0;
	bottom:         0;
	z-index:        5;     /* pod .lv-conf__loading (10) — spinner ją zasłania podczas ładowania */
	width:          64px;
	display:        flex;
	flex-direction: row;   /* dwie kolumny obok siebie: karty (bliżej viewera) + nagłówek (bliżej panelu) */
	box-shadow:     3px 0 18px rgba( 0, 0, 0, 0.18 );
}

.lv-conf__preset-cards {
	flex:           1;
	display:        flex;
	flex-direction: column;
	background:     #e8e8e8;
}

.lv-conf__preset-card {
	flex:           1;
	writing-mode:   vertical-rl;
	text-orientation: mixed;
	border:         none;
	border-bottom:  1px solid rgba( 0, 0, 0, 0.10 );
	border-left:    3px solid var( --lv-preset-accent, transparent );
	background:     transparent;
	font-size:      12px;
	font-weight:    400;
	letter-spacing: 0.04em;
	color:          var(--lv-text);
	cursor:         pointer;
	display:        flex;
	align-items:    center;
	justify-content: center;
	transition:     background 0.15s, color 0.15s;
}

/* Accent colours per position — up to 8 presets */
.lv-conf__preset-card:nth-child(1) { --lv-preset-accent: #3b82f6; }
.lv-conf__preset-card:nth-child(2) { --lv-preset-accent: #10b981; }
.lv-conf__preset-card:nth-child(3) { --lv-preset-accent: #f59e0b; }
.lv-conf__preset-card:nth-child(4) { --lv-preset-accent: #ef4444; }
.lv-conf__preset-card:nth-child(5) { --lv-preset-accent: #8b5cf6; }
.lv-conf__preset-card:nth-child(6) { --lv-preset-accent: #0ea5e9; }
.lv-conf__preset-card:nth-child(7) { --lv-preset-accent: #f97316; }
.lv-conf__preset-card:nth-child(8) { --lv-preset-accent: #14b8a6; }

.lv-conf__preset-card:last-child {
	border-bottom: none;
}

.lv-conf__preset-card:hover {
	background: rgba( 0, 0, 0, 0.07 );
}

.lv-conf__preset-card--active {
	background:  var(--lv-accent);
	color:       #fff;
	font-weight: 500;
}

/* Kolumna-nagłówek — celowo inna stylistyka (przygaszone tło) niż interaktywne
   karty, żeby czytać się jako etykieta całej szyny, nie jako kolejny wybór. */
.lv-conf__presets-label {
	flex:           0 0 24px;
	writing-mode:   vertical-rl;
	text-orientation: mixed;
	display:        flex;
	align-items:    center;
	justify-content: center;
	background:     var(--lv-viewer-bg);
	border-left:    1px solid var(--lv-border);
	font-size:      9px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color:          var(--lv-text-muted);
	white-space:    nowrap;
}

/* Best-sellers variant of the rail: thumbnails need more room than vertical
   text, so the rail is wider; the label strip stays as is. */
.lv-conf__presets--bestsellers {
	width: 92px;
}

.lv-conf__bs-card {
	flex:            1;
	min-height:      0;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	padding:         8px 4px;
	border:          none;
	border-bottom:   1px solid rgba(0,0,0,0.10);
	background:      transparent;
	color:           var(--lv-text);
	cursor:          pointer;
	transition:      background 0.15s, color 0.15s;
}

.lv-conf__bs-card:last-child { border-bottom: none; }

.lv-conf__bs-card:hover { background: rgba(0,0,0,0.07); }

.lv-conf__bs-card.is-current {
	background: var(--lv-accent);
	color:      #fff;
	cursor:     default;
}

.lv-conf__bs-thumb {
	width:           50px;
	height:          50px;
	border-radius:   8px;
	background:      #fff;
	overflow:        hidden;
	display:         flex;
	align-items:     center;
	justify-content: center;
	color:           var(--lv-text-muted);
	flex-shrink:     0;
}

.lv-conf__bs-thumb img {
	width:      100%;
	height:     100%;
	object-fit: contain;
	display:    block;
}

.lv-conf__bs-thumb svg { width: 26px; height: 26px; }

.lv-conf__bs-name {
	font-size:          10px;
	line-height:        1.2;
	text-align:         center;
	max-width:          100%;
	overflow:           hidden;
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ─── Responsive: tablet and mobile ─────────────────────────────────────────*/

@media ( max-width: 900px ) {
	.lv-conf {
		grid-template-columns: 55fr 45fr;
	}

	.lv-conf__presets {
		left: 55%;   /* granica grid-template-columns: 55fr 45fr */
	}
}

@media ( max-width: 640px ) {
	/* „Wyjdź na zewnątrz" — mniejszy, żeby nie zasłaniał wnętrza na wąskim podglądzie. */
	.lv-conf__exit {
		bottom:  10px;
		gap:     5px;
		padding: 6px 12px;
		font-size: 12px;
	}
	.lv-conf__exit svg { width: 12px; height: 12px; }

	.lv-conf {
		grid-template-columns: 1fr;
		grid-template-rows:    auto 1fr; /* viewer, panel (presety teraz w środku panelu) */
		height:                100vh;     /* fallback */
		height:                100svh;    /* wyklucza chrome przeglądarki */
		border-radius:         0;
		border-left:           none;
		border-right:          none;
	}

	/* Brak granicy viewer/panel do "osiodłania" — presety wracają jako pozioma
	   belka wewnątrz panelu, zaraz pod nagłówkiem (patrz insertBefore w
	   _buildPresetsUI). Kolumna kart traci swój box (display:contents),
	   więc jej przyciski i etykieta stają się jednym rzędem flex. */
	.lv-conf__presets {
		position:        static;
		left:            auto;
		top:             auto;
		bottom:          auto;
		transform:       none;
		width:           auto;
		box-shadow:      none;
		background:      var(--lv-panel-bg);
		flex-direction:  row;
		flex-wrap:       wrap;
		justify-content: center;
		gap:             6px;
		padding:         10px 16px;
		border-top:      1px solid var(--lv-border);
	}

	.lv-conf__preset-cards {
		display: contents;
	}

	.lv-conf__presets-label {
		order:          -1;   /* etykieta jako pierwsza, na całą szerokość rzędu */
		flex:           0 0 100%;
		writing-mode:   horizontal-tb;
		padding:        0 0 6px;
		background:     transparent;
		border-left:    none;
		text-align:     center;
	}

	.lv-conf__preset-card {
		flex:           0 1 auto;
		writing-mode:   horizontal-tb;
		padding:        6px 16px;
		border:         1px solid var(--lv-border);
		border-radius:  20px;
	}

	.lv-conf__preset-card:last-child {
		border: 1px solid var(--lv-border);
	}

	/* Bestsellery na telefonie: JEDEN niski rząd przewijany w bok. To sekcja
	   drugorzędna — zawijanie na dwa rzędy plus etykieta w osobnej linii
	   zjadało ~140 px wysokości, które należą się opcjom konfiguracji. Karty
	   ucięte przy prawej krawędzi same podpowiadają, że da się przewinąć. */
	.lv-conf__presets--bestsellers {
		width:           auto;
		flex-wrap:       nowrap;
		justify-content: flex-start;
		align-items:     center;
		gap:             6px;
		padding:         6px 12px;
		overflow-x:      auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.lv-conf__presets--bestsellers::-webkit-scrollbar { display: none; }

	.lv-conf__presets--bestsellers .lv-conf__presets-label {
		flex:    0 0 auto;
		padding: 0 2px 0 0;
	}

	.lv-conf__bs-card {
		flex:           0 0 auto;
		flex-direction: row;
		gap:            6px;
		padding:        2px 10px 2px 2px;
		border:         1px solid var(--lv-border);
		border-radius:  16px;
	}

	.lv-conf__bs-card:last-child { border: 1px solid var(--lv-border); }

	.lv-conf__bs-thumb { width: 24px; height: 24px; border-radius: 50%; }

	.lv-conf__bs-thumb svg { width: 14px; height: 14px; }

	.lv-conf__bs-name {
		display:       block;
		font-size:     11px;
		text-align:    left;
		white-space:   nowrap;
		text-overflow: ellipsis;
		max-width:     130px;
	}

	.lv-conf__viewer {
		aspect-ratio: 4 / 3;
		min-height:   auto;
	}

	.lv-conf__panel {
		border-left: none;
		border-top:  1px solid var(--lv-border);
		min-height:  0; /* bez tego grid 1fr może przepełnić viewport */
	}

	.lv-conf__groups {
		min-height: 0; /* reset — flex:1 w panelu wystarcza */
	}

	.lv-conf__title-text {
		font-size: 17px;
	}
}