/* Visual Style Update 2026-09-15 (quick 260915-mtx): the constructor page never
 * loads dof.css (core/index.php has no wp_head), so the palette tokens are
 * declared here too. Keep in sync with dof.css :root. */
:root {
	--ml-navy: #1D446D; --ml-navy-deep: #12263B; --ml-cream: #FAEEC6; --ml-cream-light: #FDF6E3; --ml-yellow: #FFE786; --ml-rose: #D68188; --ml-rose-dark: #B05F66; --ml-blue-light: #DBE7FB; --ml-blue-accent: #A5BCF8; --ml-text-secondary: #3D5B78;
	--dof-bg: #faeec6;
	--dof-bg-2: #fdf6e3;
	--dof-bg-3: #e8d9ab;
	--dof-ink: #12263b;
	--dof-ink-2: #3d5b78;
	--dof-ink-3: #5c7590;
	--dof-ink-4: #a5b4c4;
	--dof-accent: #ffe786;
	--dof-accent-dk: #f0d65a;
	--dof-adk: #f0d65a;
	--dof-accent-lt: #fff6d1;
	--dof-accent-tint: rgba(255, 231, 134, .08);
	--dof-accent-2: #d68188;
	--dof-accent-2-text: #9d4a51;
	--dof-surface-dark: #1d446d;
	--dof-on-dark: #faeec6;
	--dof-line: rgba(18, 38, 59, .12);
	--dof-line-2: rgba(18, 38, 59, .07);
	--dof-line-strong: rgba(18, 38, 59, .22);
}

/**
 * R2-02: the constructor's "Завантажити" tab-switcher button is a dead
 * affordance that misled the client into believing upload was broken.
 *
 * Enqueued only on the constructor/editor page — see
 * add_action( 'design-editor-footer', ... ) in inc/lumise-integration.php,
 * the correct injection point on this page (core/index.php never calls
 * wp_head()/wp_footer(), confirmed live and documented on that same hook).
 *
 * LIVE TRACE (client screenshot image27's lost arrow, reproduced against
 * https://merchlab.dofamini.com.ua/constructor/, product Футболка Classic,
 * "Зображення" tab): the "Зображення" panel renders a two-button internal/
 * external tab switcher —
 *   <header class="images-from-socials lumise_form_group">
 *     <button class="active" data-nav="internal">... Завантажити</button>
 *     <button data-nav="external" style="display: none;">... Ресурси</button>
 *   </header>
 * — where `external` ("Ресурси") is already permanently hidden by this same
 * plugin's own hideDeadResourcesTab() (design-editor-footer script, FB-10:
 * the paid Images addon was never purchased, so that tab can only ever show
 * a "you need to install addons" notice). With its only sibling gone,
 * `internal` ("Завантажити") is ALWAYS the sole, ALWAYS-already-`.active`
 * option — measured live: dispatching a real click at it leaves
 * document.body.innerHTML byte-identical (no state change, no file picker,
 * nothing) because there is nothing left to switch TO. It still renders as
 * a normal clickable button (cursor:pointer, 124x44px), so a first-time
 * visitor reads it as "the way to upload" and, on clicking it and seeing
 * zero response, concludes uploading itself is broken — this is exactly
 * the client's report. The REAL, working control is the dashed dropzone
 * (#lumise-upload-form, "Натисніть або перетягніть зображення сюди")
 * rendered directly below this header.
 *
 * FIX: since the switcher affords nothing (both of its states already
 * always resolve to the one internal panel), remove the false affordance
 * entirely rather than wire a second, redundant click handler onto a
 * vendor button. Live A/B-tested before shipping (CloakBrowser-equivalent
 * session): with this rule injected, the dropzone and the format/size hint
 * below it simply move up to fill the freed ~92px — no overflow, no
 * layout break, no orphaned spacing. If a future addon purchase restores
 * "Ресурси" (see hideDeadResourcesTab()'s own note), that same JS function
 * governs whether `external` stays hidden — reversing that reasonably
 * un-hides this header again too, since only THEN is this a real switcher.
 */
#LumiseDesign header.images-from-socials {
	display: none !important;
}

/**
 * R2-02b: with the dead tab header gone (rule above), the dropzone's own
 * label became the panel's ONLY instruction -- and it was invisible.
 *
 * MEASURED live (CloakBrowser, 1366x900, /constructor/?product_base=20,
 * "Зображення" panel opened by clicking the left nav like a visitor):
 *   #lumise-upload-form > span "Натисніть або перетягніть зображення сюди"
 *   color rgb(63,70,82) on first opaque ancestor #lumise-uploads
 *   background rgb(63,70,82) -> contrast ratio 1.00.
 *
 * Same root cause the FB-10 comment in inc/lumise-integration.php already
 * documents for the format hint: the generic
 * `#LumiseDesign #lumise-left .lumise-tab-body-wrp span { color: var(--dof-ink) }`
 * rule assumes a white panel, but #lumise-uploads is that exact tone. FB-10
 * fixed only `.merchlab-upload-hint` and left the dropzone label behind --
 * which went unnoticed while the (legible) tab button still said
 * "Завантажити". Removing that button exposed it.
 *
 * Fixed with the panel's own legible tone (the same rgb(238,238,238) family
 * the vendor uses for text on this dark panel), at 3 IDs so it outranks the
 * 2-ID generic rule regardless of source order -- this file is <link>ed
 * BEFORE that inline <style> block, so specificity, not order, must win it.
 * Verified after deploy: contrast 1.00 -> 8.19 on the same element.
 */
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form,
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form span,
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form p {
	color: rgba(238, 238, 238, .85) !important;
}


/* ============================================================================
 * R2-07 pass 2 (orchestrator, 2026-08-13) — the owner opened the constructor
 * in his own Chrome and said it still looks broken. He was right: the earlier
 * pass fixed the four defects it was pointed at and never looked at the screen
 * as a whole. What follows is from screenshots of every left tab in the
 * owner's own browser, not from element measurements.
 * ========================================================================== */

/* 1. Every rail tab painted yellow, so nothing showed which one was open.
 *    MEASURED in the live tab: Товар (class ""), Зображення (class ""), Шари
 *    (class "active") ALL computed background rgb(243,227,25). Give the
 *    resting state an explicit dark fill so only the open tab is yellow. */
#LumiseDesign #lumise-left .lumise-left-nav-wrp li:not(.active):not(:hover),
#LumiseDesign #lumise-left .lumise-left-nav li:not(.active):not(:hover) {
	background: var(--dof-surface-dark) !important;
	color: rgba(255, 255, 255, .72) !important;
}
#LumiseDesign #lumise-left .lumise-left-nav-wrp li:not(.active):not(:hover) i,
#LumiseDesign #lumise-left .lumise-left-nav-wrp li:not(.active):not(:hover) i::before {
	color: rgba(255, 255, 255, .72) !important;
}
#LumiseDesign #lumise-left .lumise-left-nav-wrp li:not(.active):not(:hover) svg,
#LumiseDesign #lumise-left .lumise-left-nav li:not(.active):not(:hover) svg {
	fill: rgba(255, 255, 255, .72) !important;
	stroke: rgba(255, 255, 255, .72) !important;
}

/* 2. The rail label still crossed the 70px rail into the panel. Clip it inside
 *    the tab instead of letting it bleed over the neighbouring surface. */
#LumiseDesign #lumise-left .lumise-left-nav-wrp li {
	overflow: hidden !important;
	text-overflow: clip !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
	font-size: 9px !important;
	line-height: 1.15 !important;
}

/* 3. Three tabs, two different surfaces: «Товар» rendered white while
 *    «Зображення» and «Шари» kept the vendor's grey-blue rgb(63,70,82).
 *    That is the owner's «фон не везде одинаков». One surface for all. */
#LumiseDesign #lumise-left .lumise-tab-body-wrp,
#LumiseDesign #lumise-left #lumise-uploads,
#LumiseDesign #lumise-left #lumise-layers {
	background: var(--dof-bg-2) !important;
	color: var(--dof-ink) !important;
}

/* 4. …which flips the upload panel back to dark-on-light, so the two labels
 *    fixed for the dark panel (R2-02b) have to follow it back. */
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form,
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form span,
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form p {
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-left #lumise-uploads #lumise-upload-form {
	border-color: var(--dof-line-strong) !important;
	background: var(--dof-bg-2) !important;
}
#LumiseDesign #lumise-left #lumise-uploads .merchlab-upload-hint {
	color: var(--dof-ink-2) !important;
	padding: 0 14px !important;   /* it ran flush into the panel edge */
	word-break: normal !important;
	overflow-wrap: anywhere !important;
}

/* 5. «Шари» was a blank slab with no explanation — the emptiest state in the
 *    app. Say what belongs there. */
#LumiseDesign #lumise-left #lumise-layers:empty::after,
#LumiseDesign #lumise-left #lumise-layers .lumise-layers:empty::after {
	content: "Тут з'являться шари вашого дизайну — завантажене зображення або текст.";
	display: block;
	padding: 22px 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--dof-ink-2);
}

/* 6. The zoom plate sat hard in the viewport corner, half over the canvas. */
#LumiseDesign #lumise-zoom-wrp {
	right: 18px !important;
	bottom: 18px !important;
	border-radius: 6px !important;
}

/* 7. The required-field marker rendered as a bare red asterisk on its own
 *    line under «Кількість:» — pure debris at MerchLab's scale, and red is
 *    the site's error colour, so it read as a validation failure on a field
 *    the visitor had not touched. Put it back on the label where it belongs,
 *    in the muted tone. (MEASURED: em.required inside .lumise-cart-field-label,
 *    computed colour rgb(255,0,0).) */
#LumiseDesign #lumise-left .lumise-cart-field-label em.required {
	display: inline !important;
	margin-left: 3px !important;
	color: var(--dof-ink-2) !important;
	font-style: normal !important;
}
#LumiseDesign #lumise-left .lumise-cart-field-label {
	display: inline-flex !important;
	align-items: baseline !important;
	gap: 0 !important;
}

/* 8. Product title: the vendor capitalises it, which turns «180 г/м²» into
 *    «180 Г/М²». Leave the supplier's own casing alone. */
#LumiseDesign #lumise-left #lumise-product h2,
#LumiseDesign #lumise-left #lumise-product .lumise-product-title,
#LumiseDesign #lumise-left #lumise-product [data-view="name"] {
	text-transform: none !important;
}

/* ============================================================================
 * R2-07 pass 3 (owner walked the whole editor in his own Chrome, 2026-08-13)
 * Six things he named, in his order.
 * ========================================================================== */

/* (3) The editor's own toolbar strip started at y=54 while the MerchLab header
 *     is 60px tall — the strip climbed 6px onto the header and left no breathing
 *     room under it. Seat it below the header and give it real padding. */
#LumiseDesign #lumise-top-tools {
	top: 60px !important;
	min-height: 48px !important;
	padding: 6px 24px 6px 12px !important;
	align-items: center !important;
}
#LumiseDesign #lumise-navigations {
	padding-bottom: 10px !important;
}

/* (4) The whole «Ви можете зберегти…» strip is ONE 877px-wide <li>, so the
 *     hover fill painted the entire bar yellow. Restrict the fill to the thing
 *     that is actually clickable, and make «Параметри» look like the control it
 *     is instead of loose text. */
#LumiseDesign #lumise-top-tools > ul > li:hover,
#LumiseDesign #lumise-top-tools > ul > li.active {
	background: transparent !important;
}
#LumiseDesign #lumise-top-tools li a,
#LumiseDesign #lumise-top-tools li [data-action],
#LumiseDesign #lumise-top-tools li button {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 12px !important;
	border-radius: 4px !important;
	line-height: 1.2 !important;
}
#LumiseDesign #lumise-top-tools li a:hover,
#LumiseDesign #lumise-top-tools li [data-action]:hover,
#LumiseDesign #lumise-top-tools li button:hover {
	background: var(--dof-accent) !important;
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-top-tools .right a,
#LumiseDesign #lumise-top-tools .right [data-action],
#LumiseDesign #lumise-top-tools .right button {
	border: 1px solid var(--dof-line-strong) !important;
	background: var(--dof-bg-2) !important;
	color: var(--dof-ink) !important;
	font-weight: 600 !important;
}

/* (5) Layer rows: vendor grey slab with grey text and grey icons — unreadable,
 *     and the only grey surface left in the editor. */
#LumiseDesign #lumise-layers li,
#LumiseDesign #lumise-layers .lumise-layer,
#LumiseDesign #lumise-layers .lumise-layer-item {
	background: var(--dof-bg-2) !important;
	color: var(--dof-ink) !important;
	border-bottom: 1px solid var(--dof-line-strong) !important;
	padding: 10px 12px !important;
}
#LumiseDesign #lumise-layers li:hover {
	background: var(--dof-bg-2) !important;
}
#LumiseDesign #lumise-layers li *,
#LumiseDesign #lumise-layers li i,
#LumiseDesign #lumise-layers li i::before,
#LumiseDesign #lumise-layers li svg {
	color: var(--dof-ink) !important;
	fill: currentColor !important;
}
#LumiseDesign #lumise-layers li img {
	border: 1px solid var(--dof-line-strong) !important;
	border-radius: 3px !important;
	background: var(--dof-bg-2) !important;
}

/* (2) Zoom control — rebuilt, after three failed attempts at nudging it.
 *
 * ANATOMY, measured, which is what the earlier attempts were missing:
 *   #lumise-zoom-wrp   fixed, 148x38, padding 5/14
 *     I.lumisex-android-remove   position:absolute; left:-40px   ← hangs OUTSIDE, left
 *     SPAN                       position:absolute; top:-30px; width:231px
 *                                text «Прокрутіть…» — a HINT TOOLTIP, not the readout
 *     INP                        the slider
 *     I.lumisex-android-add      the plus, hanging outside on the right
 * So the vendor deliberately parks two buttons and a tooltip outside the box.
 * Painting the box dark painted those strays dark too — the floating slab and
 * the orphaned square in the owner's screenshots. Cropping them (width +
 * overflow:hidden) cut the control in half instead.
 *
 * Fix: stop inheriting that layout. Make the wrapper a real flex row, pull
 * every part back into it with position:static, and drop the tooltip that has
 * nowhere to live. One pill, four parts, nothing outside it.
 */
#LumiseDesign #lumise-zoom-wrp {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	/* the vendor sets BOTH top and bottom on a fixed box, which stretched the
	 * pill to a 12px sliver once its content stopped being absolute — measured,
	 * box was 196x12 with 28px children hanging out of it */
	top: auto !important;
	left: auto !important;
	bottom: 12px !important;
	height: auto !important;
	padding: 6px 10px !important;
	border-radius: 8px !important;
	background: var(--dof-surface-dark) !important;
	overflow: visible !important;
}
#LumiseDesign #lumise-zoom-wrp > i {
	position: static !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	flex: 0 0 auto !important;
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, .1) !important;
	color: var(--dof-on-dark) !important;
	cursor: pointer !important;
}
#LumiseDesign #lumise-zoom-wrp > i:hover {
	background: var(--dof-accent) !important;
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-zoom-wrp > input,
#LumiseDesign #lumise-zoom-wrp > inp {
	position: static !important;
	left: auto !important;
	top: auto !important;
	flex: 0 0 auto !important;
	width: 104px !important;
	height: 18px !important;
	margin: 0 !important;
	accent-color: var(--dof-accent) !important;
	background-image: linear-gradient(to right, rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)) !important;
	background-size: 100% 3px !important;
	background-position: 0 50% !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}
/* the vendor's floating hint has no home in a flex row — and it was the grey
 * slab hanging off the widget in the owner's screenshot */
#LumiseDesign #lumise-zoom-wrp > span {
	display: none !important;
}
/* …so the percentage is ours now (mirrored from the slider in
 * lumise-integration.php) and sits in the row like a normal part */
#LumiseDesign #lumise-zoom-wrp > span.merchlab-zoom-value {
	display: inline-block !important;
	/* the vendor hides its hint span with opacity:0 and reveals it on hover —
	 * our readout inherited that and rendered invisible (measured: text
	 * "109%", colour rgb(235,236,237), opacity 0) */
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	min-width: 40px !important;
	margin-left: 6px !important;
	padding: 0 2px !important;
	background: transparent !important;
	color: var(--dof-on-dark) !important;
	font-size: 12px !important;
	font-variant-numeric: tabular-nums !important;
	text-align: right !important;
	white-space: nowrap !important;
}
/* the REAL slider is an <input> nested inside the vendor's <inp> box; the
 * earlier rules styled the box, so the input kept its own 80x44 grey body —
 * that was the grey slab under the pill */
#LumiseDesign #lumise-zoom-wrp inp {
	display: inline-flex !important;
	align-items: center !important;
	background: transparent !important;
	background-image: none !important;
	width: auto !important;
	height: auto !important;
}
#LumiseDesign #lumise-zoom-wrp inp input[type="range"],
#LumiseDesign #lumise-zoom-wrp inp > input,
#LumiseDesign #lumise-zoom-wrp > input {
	width: 104px !important;
	/* the range kept its native 44px body, which is what made the pill 56px
	 * tall and pushed the handle below the rail — measured, not guessed */
	height: 18px !important;
	min-height: 0 !important;
	max-height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	accent-color: var(--dof-accent) !important;
	background-image: linear-gradient(to right, rgba(255, 255, 255, .32), rgba(255, 255, 255, .32)) !important;
	background-size: 100% 3px !important;
	background-position: 0 50% !important;
	background-repeat: no-repeat !important;
}
#LumiseDesign #lumise-zoom-wrp {
	color: var(--dof-on-dark) !important;
	font-size: 12px !important;
}

/* (6) Header dropdowns (Файл / Дизайни / …) still highlight in Lumise's own
 *     teal #3fc7ba — the vendor's stock accent, nothing to do with MerchLab.
 *     The JS sweep in lumise-integration.php catches inline cases; this covers
 *     the stylesheet ones and squares up the padding the owner called crooked. */
/* ONLY real command items carry data-func (import/clear/save/saveas) — the
 * «Дизайни», «Поділитися» and «Допомога» dropdowns are panels whose rows are
 * plain <li>/<header>. Styling every li in a dropdown is what flooded the whole
 * shortcuts sheet yellow on hover and stretched panels. */
#LumiseDesign #lumise-navigations ul ul li[data-func],
#LumiseDesign .lumise-context-menu li[data-func],
#LumiseDesign .lumise-dropdown li[data-func] {
	padding: 10px 16px !important;
	line-height: 1.3 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 18px !important;
	white-space: nowrap !important;
}
#LumiseDesign #lumise-navigations ul ul li[data-func]:hover,
#LumiseDesign .lumise-context-menu li[data-func]:hover,
#LumiseDesign .lumise-dropdown li[data-func]:hover {
	background: var(--dof-accent) !important;
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-navigations ul ul li[data-func]:hover *,
#LumiseDesign .lumise-context-menu li[data-func]:hover *,
#LumiseDesign .lumise-dropdown li[data-func]:hover * {
	color: var(--dof-ink) !important;
}

/* the vendor's hint arrow (a pseudo-element on the hidden tooltip / on the
 * slider box) still poked out under the pill as a stray ▼ — measured on the
 * retina crop. Scoped precisely: the ± glyphs are icon-font ::before and must
 * survive. */
#LumiseDesign #lumise-zoom-wrp > span::before,
#LumiseDesign #lumise-zoom-wrp > span::after,
#LumiseDesign #lumise-zoom-wrp inp::before,
#LumiseDesign #lumise-zoom-wrp inp::after {
	display: none !important;
	content: none !important;
}

/* (6b) The teal would not die because two vendor rules outrank the generic one:
 *      div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"]
 *        ul[data-view="sub"] li:not([data-view="sp"]):hover { background:#3fc7ba }
 *      plus a second, !important one in the same stylesheet.
 *      Chrome's own CSS.getMatchedStylesForNode said so — my earlier
 *      `#LumiseDesign #lumise-navigations ul ul li:hover` sat BELOW both in the
 *      cascade even with !important, because theirs carries more IDs and
 *      attribute selectors. Match their shape exactly and add one pseudo-class
 *      so this rule is strictly more specific, then paint it in the brand. */
div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"] ul[data-view="sub"] li[data-func]:not([data-view="sp"]):hover:hover,
div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"] ul[data-view="sub"] li[data-func]:not([data-view="sp"]).active:hover {
	background: var(--dof-accent) !important;
	background-color: var(--dof-accent) !important;
	color: var(--dof-ink) !important;
}
div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"] ul[data-view="sub"] li[data-func]:not([data-view="sp"]):hover:hover *,
div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"] ul[data-view="sub"] li[data-func]:not([data-view="sp"]):hover:hover span {
	color: var(--dof-ink) !important;
}

/* (6c) The vendor's separator row (`li[data-view="sp"]`, the one its own hover
 *      rule excludes) rendered as a 40px grey band that reads as a broken,
 *      empty menu item. Make it the hairline it is meant to be. */
div#LumiseDesign div#lumise-navigations ul[data-view="sub"] li[data-view="sp"] {
	min-height: 0 !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 6px 0 !important;
	background: var(--dof-bg-3) !important;
	pointer-events: none !important;
}

/* (6d) …and the flex treatment above must not touch the «Допомога» panel: that
 *      one is not a list of commands but a shortcuts sheet, and forcing its
 *      rows into a non-wrapping flex line blew the panel out to 7314px wide —
 *      measured, the whole sheet ran off the screen in one row. Give it back
 *      its own layout, and let any other menu row wrap instead of stretching. */
div#LumiseDesign div#lumise-navigations ul ul li[data-func] {
	flex-wrap: nowrap !important;
}
div#LumiseDesign div#lumise-navigations li[data-tool="help"] ul[data-view="sub"] li,
div#LumiseDesign div#lumise-navigations li[data-tool="help"] ul[data-view="sub"] li * {
	display: revert !important;
	justify-content: normal !important;
	gap: normal !important;
}
div#LumiseDesign div#lumise-navigations li[data-tool="help"] ul[data-view="sub"] {
	max-width: min(760px, 92vw) !important;
	overflow-x: auto !important;
}

/* (6e) Shortcut chips in «Допомога» are plain <b> elements whose width follows
 *      their glyph — measured 30/31/33/37px for -, +, ↑, ← — so the columns
 *      never lined up. Fix the box, not the text. */
div#LumiseDesign div#lumise-navigations li[data-tool="help"] ul[data-view="sub"] b {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	min-width: 46px !important;
	padding: 3px 8px !important;
	border-radius: 4px !important;
	background: var(--dof-bg-2) !important;
	color: var(--dof-ink) !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums !important;
}


/* (7) «Зберегти в «Мої дизайни»» and «Параметри» as real controls.
 *     Tagged by tagToolbarButtons() in lumise-integration.php — the vendor
 *     gives them no class or attribute, only their text. Sizes follow the
 *     site's own scale (44px hit target, 11px uppercase label, 4px radius);
 *     yellow marks the primary action, outline the secondary, exactly as on
 *     the product and box pages. */
#LumiseDesign #lumise-top-tools .merchlab-save-btn,
#LumiseDesign #lumise-top-tools .merchlab-param-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	box-sizing: border-box !important;
	/* both were sized by their own content — measured 46px for the save
	 * button (icon + padding) against 36px for «Параметри», so they never
	 * lined up. One height for both. */
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	line-height: 1 !important;
	border-radius: 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
#LumiseDesign #lumise-top-tools .merchlab-save-btn {
	border: 1px solid var(--dof-accent) !important;
	background: var(--dof-accent) !important;
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-top-tools .merchlab-save-btn:hover {
	border-color: var(--dof-ink) !important;
	background: var(--dof-surface-dark) !important;
	color: var(--dof-accent) !important;
}
#LumiseDesign #lumise-top-tools .merchlab-param-btn {
	border: 1px solid var(--dof-line-strong) !important;
	background: var(--dof-bg-2) !important;
	color: var(--dof-ink) !important;
}
#LumiseDesign #lumise-top-tools .merchlab-param-btn:hover {
	border-color: var(--dof-ink) !important;
	background: var(--dof-surface-dark) !important;
	color: var(--dof-on-dark) !important;
}
#LumiseDesign #lumise-top-tools .merchlab-save-btn i,
#LumiseDesign #lumise-top-tools .merchlab-save-btn svg,
#LumiseDesign #lumise-top-tools .merchlab-param-btn i {
	color: inherit !important;
	fill: currentColor !important;
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1 !important;
}

/* (8) KONSTR-05 «поділитись посиланням має горизонтальний скрол» — still true
 *     at acceptance: MEASURED p[data-view="link-share"] scrollWidth 778 against
 *     clientWidth 438, so the URL was cut at «…/constructor/?product_…».
 *     Let the link wrap instead of widening a panel that then would not fit. */
#LumiseDesign [data-view="link-share"],
#LumiseDesign [data-view="link-share"] * {
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-all !important;
	max-width: 100% !important;
}
#LumiseDesign [data-view="link-share"] {
	overflow-x: hidden !important;
	line-height: 1.5 !important;
}
/* the share panel's success banner ships in Lumise green — same class of gripe
 * as the teal in the header menus */
#LumiseDesign .lumise-share [class*="success"],
#LumiseDesign [data-view="share"] [class*="success"],
#LumiseDesign [data-view="share"] .alert-success {
	background: var(--dof-surface-dark) !important;
	border-color: var(--dof-accent) !important;
	color: var(--dof-accent) !important;
}


/* Visual Style Update 2026-09-15: the vendor paints the «Формула розрахунку
 * ціни» link #ffffffde for its dark theme; on our cream panel it vanished
 * (pre-existing, measured rgba(255,255,255,.87) on #fdf6e3). */
#LumiseDesign #lumise-product .lumise-cart-options .lumise-cart-field.how-calculate a {
	color: var(--dof-ink) !important;
	text-decoration: underline;
}

/* (6e) 2026-09-25 — «Мої дизайни» tiles also carry data-func="edit", so the command-row flex above squeezed them into
 *      one line: the preview column collapsed to 0px (tile looked blank) and the name to 24px («С»). Give the saved-design
 *      tiles back the vendor's stacked layout (preview on top, name and date under it). */
div#LumiseDesign div#lumise-navigations ul#lumise-saved-designs > li[data-func] {
	display: block !important;
	padding: 0 !important;
	gap: normal !important;
	white-space: normal !important;
	justify-content: normal !important;
	align-items: normal !important;
	flex-wrap: wrap !important;
}
div#LumiseDesign div#lumise-navigations ul#lumise-saved-designs > li[data-func]:hover,
div#LumiseDesign div#lumise-navigations ul#lumise-saved-designs > li[data-func]:hover * {
	background: revert !important;
	color: revert !important;
}