/* 1 - one button per product. Every per-product quote button is hidden, not
   removed: the theme's own on cards and in variation rows, bs-Get-Offer's on
   cards and product pages, the accessory tabs' - plus WooCommerce's "View cart"
   link that appears under a button after an AJAX add, because the panel opens
   instead.
   Each class is written eight times, the weight bs-offer-two-buttons.php
   measured: the theme holds these buttons visible with display: inline-flex
   !important at six classes and four elements, and between two !important
   declarations the heavier selector wins. */
.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add.bs-inquiry-add,
.bs-offer-add.bs-offer-add.bs-offer-add.bs-offer-add.bs-offer-add.bs-offer-add.bs-offer-add.bs-offer-add,
.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop.bs-offer-add-loop,
.bs-offer-btn.bs-offer-btn.bs-offer-btn.bs-offer-btn.bs-offer-btn.bs-offer-btn.bs-offer-btn.bs-offer-btn,
.woocommerce ul.products li.product a.added_to_cart,
.products-slider li.product a.added_to_cart {
	display: none !important;
}

/* The label is longer than "Add to cart": it wraps instead of leaving the card.
   The carousels (home page, "compatible with") are not `ul.products` but
   `.products-slider ul.slides`, and until 0.5.9 no rule here reached them: the
   button stayed dark, and where the label took two lines a simple product's
   <a> set them from the left while a variable product's <button>, centred by
   the browser itself, stood beside it (Tilen's screenshot of tserkomixanes.gr,
   5 Oct 2026). */
.woocommerce ul.products li.product .add_to_cart_button,
.products-slider li.product .add_to_cart_button,
.products-slider li.product a.button.bs-sc-quote-product,
.select-variation-button {
	white-space: normal;
	line-height: 1.25;
	text-align: center;
	justify-content: center;
}

/* A phone shows two cards per row and leaves the button 146 px. With the
   theme's side padding the label needs three lines there (70 px); with 8 px it
   fits in two (52 px). The 14 px type is the theme's and stays. */
@media (max-width: 576px) {
	.woocommerce ul.products li.product .add_to_cart_button {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* A product that cannot be bought online: the quote is its only action, so it
   takes the blue the quote buttons have everywhere else. */
.woocommerce ul.products li.product a.button.bs-sc-quote-product.bs-sc-quote-product,
.products-slider li.product a.button.bs-sc-quote-product.bs-sc-quote-product.bs-sc-quote-product {
	background: #1b99d7 !important;
	border-color: #1b99d7 !important;
	color: #fff !important;
	text-align: center;
	justify-content: center;
}

.woocommerce ul.products li.product a.button.bs-sc-quote-product.bs-sc-quote-product:hover,
.woocommerce ul.products li.product a.button.bs-sc-quote-product.bs-sc-quote-product:focus,
.products-slider li.product a.button.bs-sc-quote-product.bs-sc-quote-product.bs-sc-quote-product:hover,
.products-slider li.product a.button.bs-sc-quote-product.bs-sc-quote-product.bs-sc-quote-product:focus {
	background: #1787bf !important;
	border-color: #1787bf !important;
}

/* The one button is the brand blue wherever it stands (Tilen, 4 Oct 2026: "Get a
   quote or buy gumb daj v svetlo modro barvo"): on a card, in a variation row,
   on the product page, in its floating bar and in the accessory tabs. It was
   dark on cards and in rows, and until 0.5.9 in the carousels. Each class is repeated to outweigh the theme's
   own !important colours for these buttons. */
.woocommerce ul.products li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button,
.products-slider li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button,
.select-variation-button.select-variation-button.select-variation-button.select-variation-button:not([disabled]),
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button:not([disabled]):not(.disabled) {
	background: #1b99d7 !important;
	background-color: #1b99d7 !important;
	border-color: #1b99d7 !important;
	color: #fff !important;
}

.woocommerce ul.products li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button:hover,
.woocommerce ul.products li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button:focus,
.products-slider li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button:hover,
.products-slider li.product .add_to_cart_button.add_to_cart_button.add_to_cart_button.add_to_cart_button:focus,
.select-variation-button.select-variation-button.select-variation-button.select-variation-button:not([disabled]):hover,
.select-variation-button.select-variation-button.select-variation-button.select-variation-button:not([disabled]):focus,
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button:not([disabled]):not(.disabled):hover,
.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button.single_add_to_cart_button:not([disabled]):not(.disabled):focus {
	background: #1787bf !important;
	background-color: #1787bf !important;
	border-color: #1787bf !important;
	color: #fff !important;
}

.bs-sc-note {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	color: #b42318;
	text-align: center;
}

.bs-sc-quote-product.is-busy {
	opacity: .6;
	pointer-events: none;
}

/* 2 - one basket, one icon in the header */
.mini-header-cart,
.basket-div .separator {
	display: none !important;
}

/* 3 - the drawer: a full-height panel on the right instead of a dropdown under
   the header. Same element and same open class as before (html.bs-drawer-open),
   only where it sits and how it enters changes. */
html .bs-drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(15, 23, 42, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

html.bs-drawer-open .bs-drawer-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Shown by hovering the cart icon: a look, not a decision. The page behind is
   neither dimmed nor blocked, and the panel leaves with the mouse. */
html.bs-drawer-open.bs-sc-peek .bs-drawer-overlay {
	opacity: 0;
	pointer-events: none;
}

html .bs-drawer,
html .bs-drawer.bs-drawer--wide {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	width: min(420px, 100vw);
	height: auto;
	max-height: none;
	padding: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	opacity: 1;
	visibility: hidden;
	transform: translateX(105%);
	transition: transform .22s ease, visibility 0s linear .22s;
	box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
	z-index: 99999;
}

html.bs-drawer-open .bs-drawer {
	visibility: visible;
	transform: translateX(0);
	transition: transform .22s ease, visibility 0s;
}

body.admin-bar .bs-drawer {
	top: 32px;
}

html .bs-drawer .bs-drawer-header {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	border: 0;
}

html .bs-drawer .bs-drawer-close {
	padding: 4px 10px;
	font-size: 28px;
	line-height: 1;
	color: #212529;
}

/* Every wrapper between the panel and the list passes the height on, so the
   list is the only thing that scrolls and the two buttons stay at the bottom.
   align-items: the theme sets `start` on the content wrapper for its two-column
   grid; as a column that shrinks every child to the width of its text. */
html .bs-drawer .bs-drawer-body,
html .bs-drawer .widget_shopping_cart,
html .bs-drawer .widget_shopping_cart_content,
html .bs-drawer .mini-cart-content-left {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0;
	max-height: none;
	height: auto;
	overflow: hidden;
}

html .bs-drawer .mini-cart-content-left {
	gap: 0;
	padding: 0 16px 16px;
	background: #fff;
}

.bs-sc-title {
	flex: 0 0 auto;
	margin: 0;
	padding: 16px 56px 12px 16px;
	border-bottom: 1px solid #e9ecef;
	font-size: 18px;
	font-weight: 700;
}

/* The theme's own heading ("BUY ONLINE") named the left of two columns. */
.widget_shopping_cart_content .mini-cart-content-left > p.mb-0:first-child {
	display: none;
}

html .bs-drawer ul.woocommerce-mini-cart {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 12px 0;
	overflow-y: auto;
}

html .bs-drawer .woocommerce-mini-cart__total {
	flex: 0 0 auto;
	margin: 0;
	padding: 12px 0;
	border-top: 1px solid #e9ecef;
}

html .bs-drawer .woocommerce-mini-cart__buttons {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

html .bs-drawer .woocommerce-mini-cart__empty-message {
	padding: 24px 0;
}

/* 3a - a bundled annual service or assembly is part of the machine above it
   (bs_sc_cart_sub_lines): set in by 34 px, 8 px under its card instead of 15,
   tied to it by a line, on the tint such a line has in the quote popup. It
   keeps its own remove button - a machine can be bought without its service -
   and removing the machine removes it too.
   The theme uses both pseudo-elements of a row to hold the floated picture
   (content " ", display: table, clear on the second). flow-root holds it
   instead, so the first can draw the elbow and the second the line that runs
   on to the next sub-item. */
html .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub {
	display: flow-root;
	margin: -7px 0 15px 34px;
	padding: 8px 10px;
	border-color: #cfe6f5;
	background: #f5fafd;
	box-shadow: none;
}

html .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -21px;
	display: block;
	width: 19px;
	height: 38px;
	border-bottom: 2px solid #b8cbd9;
	border-left: 2px solid #b8cbd9;
	border-bottom-left-radius: 10px;
}

html .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub:has(+ li.bs-sc-sub)::after {
	content: "";
	position: absolute;
	top: 20px;
	bottom: -10px;
	left: -21px;
	display: block;
	border-left: 2px solid #b8cbd9;
}

/* The theme holds the picture of a row at 60 px with !important. */
html .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub img {
	width: 44px !important;
	height: 44px !important;
}

/* 4 - the two choices. The quote in the brand blue the header and the other
   quote buttons use, the purchase dark like "Add to cart" on a card. */
.bs-sc-cta,
html .bs-drawer .widget_shopping_cart .buttons a.bs-sc-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	font: inherit;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
}

.bs-sc-cta .bs-sc-main {
	font-size: 16px;
	font-weight: 700;
}

.bs-sc-cta .bs-sc-sub {
	font-size: 12px;
	font-weight: 400;
}

.bs-sc-quote {
	background: #1b99d7;
	color: #fff !important;
}

.bs-sc-quote:hover,
.bs-sc-quote:focus {
	background: #1787bf;
}

.bs-sc-quote.is-busy {
	opacity: .6;
	pointer-events: none;
}

.bs-sc-buy,
.bs-sc-buy:visited {
	background: #212529;
	color: #fff !important;
}

.bs-sc-buy:hover,
.bs-sc-buy:focus {
	background: #000;
}

.bs-sc-view,
html .bs-drawer .widget_shopping_cart .buttons a.bs-sc-view {
	display: block;
	margin: 0;
	padding-top: 2px;
	font-size: 13px;
	color: #495057;
	text-align: center;
	text-decoration: underline;
}

.wc-proceed-to-checkout .bs-sc-quote {
	margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
	html .bs-drawer,
	html.bs-drawer-open .bs-drawer,
	html .bs-drawer-overlay {
		transition: none;
	}
}
/* Right to left (Arabic). A page in such a language turns its header around,
   so the cart icon is on the left - and the panel comes from the side its icon
   is on. The close button and the room the title leaves for it change sides
   with it. Nothing here matches a left-to-right page. */
html[dir="rtl"] .bs-drawer,
html[dir="rtl"] .bs-drawer.bs-drawer--wide {
	right: auto;
	left: 0;
	transform: translateX(-105%);
	box-shadow: 12px 0 30px rgba(0, 0, 0, .18);
}

html[dir="rtl"].bs-drawer-open .bs-drawer,
html[dir="rtl"].bs-drawer-open .bs-drawer.bs-drawer--wide {
	transform: translateX(0);
}

html[dir="rtl"] .bs-drawer .bs-drawer-header {
	right: auto;
	left: 8px;
}

html[dir="rtl"] .bs-sc-title {
	padding: 16px 16px 12px 56px;
}

/* The sub-item is set in from the right, and its line comes down the right. */
html[dir="rtl"] .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub {
	margin: -7px 34px 15px 0;
}

html[dir="rtl"] .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub::before {
	right: -21px;
	left: auto;
	border-right: 2px solid #b8cbd9;
	border-left: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 0;
}

html[dir="rtl"] .bs-drawer ul.woocommerce-mini-cart > li.bs-sc-sub:has(+ li.bs-sc-sub)::after {
	right: -21px;
	left: auto;
	border-right: 2px solid #b8cbd9;
	border-left: 0;
}
#getOfferModal {
	--op-blue: #1b99d7;
	--op-blue-dark: #1787bf;
	--op-ink: #212529;
	--op-text: #334155;
	--op-muted: #64748b;
	--op-line: #e2e8f0;
	--op-field: #cbd5e1;
	--op-panel: #f4f8fb;
	/* WordPress sets this for a signed-in visitor (32 px, 46 px on a phone); the
	   toolbar lies above every modal, so the window starts below it. */
	--op-top: var(--wp-admin--admin-bar--height, 0px);
	top: var(--op-top);
	height: calc(100% - var(--op-top));
}

/* ---------------------------------------------------------------- the window */
#getOfferModal .modal-content {
	border: 0;
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(15, 23, 42, .32);
}
/* The height is for the moment before the content arrives: without the
   padding an empty window would be a line, and the spinner sits in it. */
#getOfferModal .modal-body { min-height: 132px; padding: 0; }
#getOfferModal .modal-body > .bs-offer-retry { display: block; margin: 0 auto; padding: 52px 24px !important; }
#getOfferModal #bs-offer-basket-wrapper-small > .row { margin: 0; --bs-gutter-x: 0; }

/* Close: inside the window, and it stays in view when the window scrolls. */
#getOfferModal .close-modal-absolute {
	position: sticky;
	top: 12px;
	right: auto;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 12px 12px -48px auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--op-muted);
	font-size: 0;
	box-shadow: 0 1px 4px rgba(15, 23, 42, .18);
	cursor: pointer;
}
#getOfferModal .close-modal-absolute::before { content: "\00d7"; font-size: 24px; font-weight: 400; line-height: 1; }
#getOfferModal .close-modal-absolute:hover { background: #f1f5f9; color: var(--op-ink); }

/* ------------------------------------------------------- left: what is quoted */
#getOfferModal .mini-offer-list {
	padding: 24px 24px 20px;
	background: var(--op-panel);
}
#getOfferModal .mini-offer-list h3 {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--op-ink);
}
#getOfferModal .mini-offer-list h3::after {
	content: var(--op-sub);
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--op-muted);
}
#getOfferModal ul.cart_list {
	margin: 18px 0 0 !important;
	padding: 0 2px 0 0 !important;
	border-radius: 0;
	list-style: none;
	height: auto;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}
/* Nothing left in the list. */
#getOfferModal ul.cart_list:not(:has(li))::before {
	content: var(--op-empty);
	display: block;
	padding: 28px 16px;
	border: 1px dashed var(--op-field);
	border-radius: 12px;
	font-size: 14px;
	text-align: center;
	color: var(--op-muted);
}
/* A bundled annual service or assembly is part of the machine above it and has
   to look like it (Tilen, 4 Oct 2026: "naj se z dizajnom vidi da servis pripada
   zgornjemu izdelku. Naj bo malo bolj desno pomaknjen"): set in by 44 px, tied
   to the card above by a line, smaller, and on the tint the "add service"
   offer has before it is taken. bs-Get-Offer prints such a line directly under
   its machine with this class. A standalone service has no machine in the
   list; it keeps the look of a line of its own. */
#getOfferModal li.pas-service-row-cart,
#getOfferModal li.pas-assembly-row-cart {
	margin: -2px 0 8px 44px !important;
	padding: 10px 12px 10px 62px !important;
	border-color: #cfe6f5;
	background: #f5fafd !important;
	box-shadow: none;
}
#getOfferModal li.pas-service-row-cart::before,
#getOfferModal li.pas-assembly-row-cart::before {
	content: "";
	position: absolute;
	top: -7px;
	left: -25px;
	display: block;
	width: 23px;
	height: 37px;
	border-bottom: 2px solid #b8cbd9;
	border-left: 2px solid #b8cbd9;
	border-bottom-left-radius: 10px;
}
/* Service and assembly under one machine: the line runs on past the first. */
#getOfferModal li.pas-service-row-cart:has(+ li.pas-service-row-cart)::after,
#getOfferModal li.pas-service-row-cart:has(+ li.pas-assembly-row-cart)::after,
#getOfferModal li.pas-assembly-row-cart:has(+ li.pas-service-row-cart)::after {
	content: "";
	position: absolute;
	top: 20px;
	bottom: -8px;
	left: -25px;
	display: block;
	border-left: 2px solid #b8cbd9;
}
#getOfferModal li.pas-service-row-cart > a.product-name,
#getOfferModal li.pas-assembly-row-cart > a.product-name { position: static; padding-left: 0 !important; font-size: 13px; }
/* The theme's arrow glyph: the line above says the same. */
#getOfferModal li.pas-service-row-cart > a.product-name::before,
#getOfferModal li.pas-assembly-row-cart > a.product-name::before { content: none; }
#getOfferModal li.pas-service-row-cart img,
#getOfferModal li.pas-assembly-row-cart img { top: 10px; width: 40px !important; height: 40px; }

#getOfferModal .bs-offer-mini-item {
	position: relative;
	display: block;
	margin: 0 0 8px !important;
	padding: 12px 12px 12px 80px !important;
	border: 1px solid var(--op-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
#getOfferModal .bs-offer-mini-item > a:not(.bs-offer-remove-mini) {
	display: block;
	padding-right: 20px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--op-ink);
	text-decoration: none;
}
#getOfferModal .bs-offer-mini-item img {
	position: absolute;
	left: 12px;
	top: 12px;
	float: none;
	width: 56px !important;
	height: 56px;
	margin: 0;
	object-fit: contain;
}
#getOfferModal a.bs-offer-remove-mini {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	left: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent;
	color: #94a3b8 !important;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}
#getOfferModal a.bs-offer-remove-mini:hover { background: #fee2e2; color: #dc2626 !important; }

#getOfferModal .mini-offer-cart-qty {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin-top: 8px;
	font-size: 14px !important;
	color: var(--op-text);
}
#getOfferModal .mini-offer-cart-qty .bs-number { height: 34px; border-color: var(--op-field); border-radius: 8px; }
#getOfferModal .mini-offer-cart-qty .bs-number input[type="number"] {
	width: 44px;
	height: auto;
	padding: 0 4px;
	border: 0;
	font-size: 14px;
	color: var(--op-ink);
}
#getOfferModal .mini-offer-cart-qty .bs-number .bs-minus,
#getOfferModal .mini-offer-cart-qty .bs-number .bs-plus {
	width: 32px;
	min-width: 32px;
	background: #f8fafc;
	color: var(--op-text);
	font-size: 16px;
}
#getOfferModal .mini-offer-cart-qty .amount { font-weight: 600; color: var(--op-ink); }
#getOfferModal .mini-offer-cart-qty del .amount { font-weight: 400; color: var(--op-muted); }

/* "Add annual service" / "Add assembly": an offer, so it must not look like an error. */
#getOfferModal .pas-cart-upsell {
	margin: 10px 0 0 -68px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}
#getOfferModal .pas-cart-upsell a {
	display: block;
	padding: 7px 10px;
	border: 1px dashed #8ccbee;
	border-radius: 8px;
	background: #f2f9fd;
	color: #136f9e !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
#getOfferModal .pas-cart-upsell a:hover { border-color: var(--op-blue); background: #e6f4fc; }
#getOfferModal .bs-offer-mini-item > div[style*="2ecc71"] {
	margin-top: 8px !important;
	color: #15803d !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* Amounts */
#getOfferModal .mini-offer-costs-wrapper {
	margin-top: 12px !important;
	padding-top: 12px !important;
	border-top: 1px solid #d8e1e8 !important;
	font-size: 14px !important;
	color: var(--op-text);
}
#getOfferModal .mini-offer-costs-wrapper > div { margin-bottom: 4px !important; }
#getOfferModal .mini-offer-costs-wrapper > div > div[style*="bold"] { font-weight: 400 !important; }
#getOfferModal .mini-offer-costs-wrapper .shipping-details {
	padding-left: 0 !important;
	font-size: 12px !important;
	color: var(--op-muted) !important;
}
#getOfferModal .mini-offer-costs-wrapper > div[style*="1.1em"] {
	align-items: baseline;
	margin: 8px 0 0 !important;
	padding-top: 10px !important;
	border-top: 1px solid #d8e1e8 !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--op-ink) !important;
}

/* ------------------------------------------------------------ right: the form */
#getOfferModal .mini-cart-content-right {
	display: flex;
	flex-direction: column;
	padding: 24px 24px 20px;
	background: #fff;
}
#getOfferModal .mini-cart-content-right .woocomerce { display: flex; flex: 1 1 auto; flex-direction: column; }
#getOfferModal .mini-cart-content-right form { margin: 0; }

#getOfferModal #bs-offer-form-mini > p.mb-0,
#getOfferModal .mini-cart-content-right + .mini-cart-content-right form::before {
	display: block;
	margin: 0 0 10px !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--op-ink);
}
#getOfferModal .mini-cart-content-right + .mini-cart-content-right form::before { content: var(--op-contact); }

#getOfferModal .woocommerce-billing-fields__field-wrapper,
#getOfferModal .woocommerce-shipping-fields,
#getOfferModal .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 12px;
	/* Two fields in one row stay level when one of the labels needs two lines. */
	align-items: end;
}
#getOfferModal .woocommerce-billing-fields__field-wrapper > *,
#getOfferModal .woocommerce-shipping-fields > *,
#getOfferModal .woocommerce-shipping-fields__field-wrapper > * { grid-column: 1 / -1; min-width: 0; }
#getOfferModal #billing_first_name_field,
#getOfferModal #shipping_first_name_field { grid-column: 1 / span 6; }
#getOfferModal #billing_last_name_field,
#getOfferModal #shipping_last_name_field { grid-column: 7 / -1; }
#getOfferModal #offer_billing_postcode_field,
#getOfferModal #shipping_postcode_field { grid-column: 1 / span 5; }
#getOfferModal #offer_billing_city_field,
#getOfferModal #shipping_city_field { grid-column: 6 / -1; }

#getOfferModal .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
}
#getOfferModal .form-row label {
	display: block;
	margin: 0 0 3px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: #475569;
}
/* The asterisk takes no room of its own, so it never ends up alone on a second
   line (a long label in a narrow column did that); it hangs into the gap. */
#getOfferModal .form-row .required {
	display: inline-block;
	width: 0;
	border: 0;
	overflow: visible;
	white-space: nowrap;
	color: #e11d48;
	font-weight: 500;
	text-decoration: none;
}
#getOfferModal .form-row .woocommerce-input-wrapper { display: block; width: 100%; }

#getOfferModal .form-row input.input-text,
#getOfferModal .form-row select,
#getOfferModal .form-row textarea {
	display: block;
	width: 100%;
	height: 38px;
	margin: 0;
	padding: 7px 12px;
	border: 1px solid var(--op-field);
	border-radius: 8px;
	background-color: #fff;
	box-shadow: none;
	font-size: 14px;
	line-height: 1.4;
	text-transform: none;
	color: #0f172a;
	transition: border-color .15s, box-shadow .15s;
}
#getOfferModal .form-row select { padding-right: 36px; }
#getOfferModal .form-row select:required:invalid { color: #64748b; }
#getOfferModal .form-row textarea { height: auto; min-height: 68px; resize: vertical; }
#getOfferModal .form-row input.input-text::placeholder,
#getOfferModal .form-row textarea::placeholder { color: #64748b; opacity: 1; text-transform: none; }
#getOfferModal .form-row input.input-text:user-invalid,
#getOfferModal .form-row select:user-invalid { border-color: #e11d48; }
#getOfferModal .form-row input.input-text:hover,
#getOfferModal .form-row select:hover,
#getOfferModal .form-row textarea:hover { border-color: #94a3b8; }
#getOfferModal .form-row input.input-text:focus,
#getOfferModal .form-row select:focus,
#getOfferModal .form-row textarea:focus {
	border-color: var(--op-blue);
	box-shadow: 0 0 0 3px rgba(27, 153, 215, .22);
	outline: 0;
}
/* Street and "apartment, suite" are one address: keep them together. */
#getOfferModal #billing_address_2_field,
#getOfferModal #shipping_address_2_field { margin-top: -4px !important; }

/* EU VAT number yes / no: the same two radio buttons, drawn as a switch. */
#getOfferModal #billing_has_vat_field .woocommerce-input-wrapper { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
#getOfferModal #billing_has_vat_field input.input-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
#getOfferModal #billing_has_vat_field label.radio {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 76px;
	height: 36px;
	margin: 0 !important;
	padding: 0 18px;
	border: 1px solid var(--op-field);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--op-text);
	cursor: pointer;
}
#getOfferModal #billing_has_vat_field label.radio .required { display: none; }
#getOfferModal #billing_has_vat_field input.input-radio:checked + label.radio {
	border-color: var(--op-blue);
	background: #e9f5fc;
	box-shadow: inset 0 0 0 1px var(--op-blue);
	color: #0f6a99;
}
#getOfferModal #billing_has_vat_field input.input-radio:focus-visible + label.radio { box-shadow: 0 0 0 3px rgba(27, 153, 215, .3); }

#getOfferModal #offer-bs-vat-warning {
	margin: 0 0 10px !important;
	padding: 10px 12px !important;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	background: #fff7ed;
	font-size: 12.5px;
	line-height: 1.45;
	color: #9a3412;
}
#getOfferModal #offer-bs-vat-warning::before,
#getOfferModal #bs-offer-vat-live-msg::before { content: none; display: none; }
#getOfferModal #bs-offer-vat-live-msg {
	margin: -4px 0 10px !important;
	padding: 7px 12px !important;
	border: 1px solid #bae6fd;
	border-radius: 8px;
	background: #f0f9ff;
	font-size: 12.5px;
	line-height: 1.4;
	color: #075985;
}
#getOfferModal #bs-offer-vat-live-msg.woocommerce-message { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
#getOfferModal #bs-offer-vat-live-msg.woocommerce-error { border-color: #fecaca; background: #fef2f2; color: #991b1b; }

/* "Ship to a different address?" */
#getOfferModal #ship-to-different-address { margin: 4px 0 0 !important; padding: 0 !important; }
#getOfferModal #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--op-line);
	border-radius: 8px;
	background: #f8fafc;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-transform: none;
	color: var(--op-text);
	cursor: pointer;
}
#getOfferModal #ship-to-different-address input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--op-blue); }
#getOfferModal .offer_shipping_address_minicart {
	margin-top: 10px;
	padding: 12px 12px 2px;
	border: 1px solid var(--op-line);
	border-radius: 8px;
	background: #f8fafc;
}
#getOfferModal .woocommerce-additional-fields__field-wrapper { margin-top: 12px; }

/* Send */
#getOfferModal .modal-content #bs-send-offer {
	position: sticky;
	bottom: 20px;
	z-index: 5;
	display: block;
	width: 100%;
	min-height: 50px;
	margin: auto 0 0;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	background: var(--op-blue);
	box-shadow: 0 8px 20px rgba(27, 153, 215, .32);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
}
#getOfferModal .modal-content #bs-send-offer:hover,
#getOfferModal .modal-content #bs-send-offer:focus-visible,
#getOfferModal .modal-content #bs-send-offer:active { background: var(--op-blue-dark); color: #fff; }
#getOfferModal .modal-content #bs-send-offer:disabled { background: #8ccbee; box-shadow: none; opacity: 1; }
#getOfferModal .mini-cart-content-right form { padding-bottom: 14px; }

/* ----------------------------------------------------- from 992 px: three columns */
@media (min-width: 992px) {
	/* A 1366 x 768 laptop leaves the page about 620 px of height. The theme's
	   92vh plus Bootstrap's 28 px margins did not leave room for the form. */
	#getOfferModal .modal-dialog {
		max-width: min(1140px, calc(100vw - 32px));
		min-height: calc(100% - 24px);
		margin-top: 12px;
		margin-bottom: 12px;
	}
	#getOfferModal .modal-content { max-height: calc(100vh - 24px - var(--op-top)); }
	#getOfferModal #bs-offer-basket-wrapper-small > .row {
		display: grid;
		grid-template-columns: minmax(300px, 34%) minmax(0, 1fr) minmax(0, 1fr);
	}
	#getOfferModal #bs-offer-basket-wrapper-small > .row > [class*="col-"] { width: auto; max-width: none; }
	#getOfferModal .mini-offer-list { border-right: 1px solid var(--op-line); }
	#getOfferModal .mini-cart-content-right + .mini-cart-content-right { padding-left: 0; }
	#getOfferModal ul.cart_list { max-height: max(200px, calc(100vh - 318px - var(--op-top))); }
	/* The notes field takes the room the last column has left. */
	#getOfferModal .mini-cart-content-right + .mini-cart-content-right form,
	#getOfferModal .mini-cart-content-right + .mini-cart-content-right form > .checkout,
	#getOfferModal .woocommerce-additional-fields__field-wrapper,
	#getOfferModal #order_comments_field { display: flex; flex: 1 1 auto; flex-direction: column; }
	#getOfferModal #order_comments_field .woocommerce-input-wrapper { display: flex; flex: 1 1 auto; max-height: 240px; }
	#getOfferModal #order_comments_field textarea { flex: 1 1 auto; }
}

/* ------------------------------------------------------ below 992 px: one column */
@media (max-width: 991.98px) {
	#getOfferModal .modal-dialog { max-width: 560px; }
	#getOfferModal #bs-offer-basket-wrapper-small > .row > [class*="col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; }
	#getOfferModal .mini-offer-list { padding: 22px 20px 20px; border-bottom: 1px solid var(--op-line); }
	#getOfferModal .mini-cart-content-right { padding: 20px 20px 0; }
	#getOfferModal .mini-cart-content-right + .mini-cart-content-right { padding: 6px 20px 20px; }
	#getOfferModal ul.cart_list { max-height: none; }
	/* The button rides over the fields below it: it gets a white bar of its own,
	   edge to edge, with a hairline on top. */
	#getOfferModal .modal-content #bs-send-offer {
		bottom: 20px;
		width: 100%;
		margin: auto 0 0;
		padding: 10px 16px;
		box-shadow: 0 0 0 20px #fff, 0 -1px 0 20px var(--op-line);
	}
}

@media (max-width: 767.98px) {
	/* 16 px keeps iOS from zooming into a field on focus. */
	#getOfferModal .form-row input.input-text,
	#getOfferModal .form-row select,
	#getOfferModal .form-row textarea { height: 44px; font-size: 16px; }
	#getOfferModal .form-row textarea { height: auto; }
	#getOfferModal .form-row { margin-bottom: 10px !important; }
	#getOfferModal #billing_has_vat_field label.radio { height: 44px; }
}

/* ------------------------------------------------------ phones: the whole screen */
@media (max-width: 575.98px) {
	#getOfferModal { padding: 0 !important; }
	#getOfferModal .modal-dialog { align-items: stretch; max-width: none; min-height: 100%; margin: 0; }
	#getOfferModal .modal-content { min-height: calc(100vh - var(--op-top)); max-height: calc(100vh - var(--op-top)); border-radius: 0; }
	@supports (height: 100dvh) {
		#getOfferModal .modal-content { min-height: calc(100dvh - var(--op-top)); max-height: calc(100dvh - var(--op-top)); }
	}
}
/* Right to left (Arabic). The three columns, the rows of the amounts, the
   quantity control and the yes / no switch turn around by themselves: they are
   grids and flex rows, and those follow the direction of the page. What is
   written here is every rule above that names a side. Nothing here matches a
   left-to-right page. */
html[dir="rtl"] #getOfferModal .close-modal-absolute { left: auto; margin: 12px auto -48px 12px; }
html[dir="rtl"] #getOfferModal ul.cart_list { padding: 0 0 0 2px !important; }

html[dir="rtl"] #getOfferModal .bs-offer-mini-item { padding: 12px 80px 12px 12px !important; }
html[dir="rtl"] #getOfferModal .bs-offer-mini-item > a:not(.bs-offer-remove-mini) { padding-right: 0; padding-left: 20px; }
html[dir="rtl"] #getOfferModal .bs-offer-mini-item img { right: 12px; left: auto; }
html[dir="rtl"] #getOfferModal a.bs-offer-remove-mini { right: auto !important; left: 6px !important; }
html[dir="rtl"] #getOfferModal .pas-cart-upsell { margin: 10px -68px 0 0 !important; }
/* A price is written left to right ("2.999 EUR", the sign last) in every
   language. WooCommerce wraps it in <bdi> for that; in this popup the price of
   a line arrives without one (production, 4 Oct 2026), and the currency sign
   changed sides. */
html[dir="rtl"] #getOfferModal .woocommerce-Price-amount { direction: ltr; unicode-bidi: isolate; }
/* bs-Get-Offer sets the gap between the old and the new price on the right of the old one. */
html[dir="rtl"] #getOfferModal .mini-offer-cart-qty del { margin-right: 0 !important; margin-left: 4px; }

/* The sub-item is set in from the right, and its line comes down the right. */
html[dir="rtl"] #getOfferModal li.pas-service-row-cart,
html[dir="rtl"] #getOfferModal li.pas-assembly-row-cart {
	margin: -2px 44px 8px 0 !important;
	padding: 10px 62px 10px 12px !important;
}
html[dir="rtl"] #getOfferModal li.pas-service-row-cart::before,
html[dir="rtl"] #getOfferModal li.pas-assembly-row-cart::before {
	right: -25px;
	left: auto;
	border-right: 2px solid #b8cbd9;
	border-left: 0;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 0;
}
html[dir="rtl"] #getOfferModal li.pas-service-row-cart:has(+ li.pas-service-row-cart)::after,
html[dir="rtl"] #getOfferModal li.pas-service-row-cart:has(+ li.pas-assembly-row-cart)::after,
html[dir="rtl"] #getOfferModal li.pas-assembly-row-cart:has(+ li.pas-service-row-cart)::after {
	right: -25px;
	left: auto;
	border-right: 2px solid #b8cbd9;
	border-left: 0;
}
/* The theme indents this name from the left with !important; the room it needs
   here is on the left too, but for the remove button. */
html[dir="rtl"] #getOfferModal li.pas-service-row-cart > a.product-name,
html[dir="rtl"] #getOfferModal li.pas-assembly-row-cart > a.product-name { padding-right: 0 !important; padding-left: 20px !important; }

/* The arrow of a select is WooCommerce's, a background picture, and its
   right-to-left stylesheet puts it on the left ("left .5em"). The room for it
   changes sides with it. Seen on a real right-to-left render (staging, 5 Oct
   2026); 0.5.6 was checked on a copy that still had the left-to-right
   stylesheet of WooCommerce, where the arrow had stayed on the right. */
html[dir="rtl"] #getOfferModal .form-row select { padding-right: 12px; padding-left: 36px; }

/* An e-mail address and a phone number are written left to right in every
   language. The browser sets a phone field that way by itself - and then
   starts it at the left edge, away from its label. An e-mail field it leaves
   right to left, where a dot or an @ just typed shows at the wrong end until
   the next letter follows. Both: left to right, starting at the right. */
html[dir="rtl"] #getOfferModal .form-row input[type="email"],
html[dir="rtl"] #getOfferModal .form-row input[type="tel"] { direction: ltr; text-align: right; }

@media (min-width: 992px) {
	html[dir="rtl"] #getOfferModal .mini-offer-list { border-right: 0; border-left: 1px solid var(--op-line); }
	html[dir="rtl"] #getOfferModal .mini-cart-content-right + .mini-cart-content-right { padding-right: 0; padding-left: 24px; }
}
/* 1 - a page that is as wide as the phone. The theme sets the product gallery
   to half the HEIGHT of the window (width: 50VH). On a phone held upright that
   is more than its width - 416 px on a 384 px screen - and the whole page
   becomes that much wider. Chrome on Android then lays out everything that is
   fixed to the window (the sticky header, the bar with the buy button, the
   cart panel, the quote popup) to the wider page: their right ends are off
   the screen and have to be scrolled to. The gallery keeps its size where it
   fits and stops at the width of its column where it does not. */
.single-product .woocommerce-product-gallery.woocommerce-product-gallery--with-images.images {
	max-width: 100%;
}

/* 2 - the quote popup lies over the phone header. That header is fixed with
   z-index 9999 once the page has been scrolled; Bootstrap's popup has 1055, so
   the header covered the popup's title and its close button. Below the cookie
   banner and the toolbar of a signed-in visitor, which stay on top. */
#getOfferModal {
	z-index: 99990;
}
body:has(#getOfferModal.show) > .modal-backdrop {
	z-index: 99980;
}

/* 3 - on a touch screen the popup and the panel take their width from the
   screen, not from the page: 100vw is the screen even where something on the
   page is wider than it (see 1). Not with a mouse: there 100vw includes the
   scrollbar. */
@media (pointer: coarse) {
	#getOfferModal {
		width: 100vw;
	}
	html .bs-drawer,
	html .bs-drawer.bs-drawer--wide {
		right: auto;
		left: max(0px, calc(100vw - 420px));
	}
}

/* 4 - the table of variations on a phone. It has six columns or more and was
   644 px wide on a 384 px screen: the quantity and the button were two swipes
   to the right. Below 768 px every variation is a card - what it is, its
   number and price, the quantity discounts, then quantity and button side by
   side - and nothing has to be scrolled sideways. The cells have no classes of
   their own, so they are told apart by position: the first is the article
   number, the last four are price, discounts, quantity and button, and
   whatever lies between is an attribute. The script gives the first cells
   their column heading as data-label. */
@media (max-width: 767.98px) {
	.custom-variations-table.table,
	.custom-variations-table.table > tbody {
		display: block;
		width: 100%;
		margin: 0;
		border: 0;
	}
	.custom-variations-table.table > thead {
		display: none;
	}
	.custom-variations-table.table > tbody > tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: 8px 12px;
		align-items: center;
		margin: 0 0 12px;
		padding: 14px;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
	}
	.custom-variations-table.table > tbody > tr:last-child {
		margin-bottom: 0;
	}
	.custom-variations-table.table > tbody > tr > td {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		text-align: start !important;
	}
	/* attributes: what this variation is */
	.custom-variations-table.table > tbody > tr > td:not(:first-child):not(:nth-last-child(-n+4)) {
		order: 1;
		grid-column: 1 / -1;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.35;
		color: #212529;
	}
	.custom-variations-table.table > tbody > tr > td[data-label]:not(:first-child)::before {
		content: attr(data-label) ": ";
		font-weight: 400;
		color: #64748b;
		text-transform: capitalize;
	}
	/* article number, left - price, right */
	.custom-variations-table.table > tbody > tr > td:first-child {
		order: 2;
		grid-column: 1;
		font-size: 12px;
		color: #64748b;
	}
	.custom-variations-table.table > tbody > tr > td:first-child::before {
		content: "SKU ";
	}
	.custom-variations-table.table > tbody > tr > td:first-child[data-label]::before {
		content: attr(data-label) " ";
	}
	/* a variation without an article number: no heading for nothing */
	.custom-variations-table.table > tbody > tr > td:first-child[data-empty]::before {
		content: none;
	}
	.custom-variations-table.table > tbody > tr > td:nth-last-child(4) {
		order: 2;
		grid-column: 2;
		justify-self: end;
		font-size: 18px;
		font-weight: 700;
		color: #212529;
		white-space: nowrap;
	}
	.custom-variations-table.table > tbody > tr > td:nth-last-child(4) del {
		font-size: 13px;
		font-weight: 400;
		color: #64748b;
	}
	/* quantity discounts */
	.custom-variations-table.table > tbody > tr > td.bs-discount-cell {
		order: 3;
		grid-column: 1 / -1;
	}
	.custom-variations-table .bs-discount-cell .bs-tier-mini {
		table-layout: fixed;
		margin: 0;
	}
	.custom-variations-table.table > tbody > tr > td.bs-discount-cell:has(.bs-no-discount) {
		display: none;
	}
	/* quantity and button */
	.custom-variations-table.table > tbody > tr > td:nth-last-child(2) {
		order: 4;
		grid-column: 1;
		align-self: end;
	}
	.custom-variations-table.table > tbody > tr > td:last-child {
		order: 4;
		grid-column: 2;
	}
	.custom-variations-table.table > tbody > tr > td:last-child > .d-flex {
		display: block !important;
	}
	.custom-variations-table.table > tbody > tr > td:last-child .select-variation-button {
		display: block;
		width: 100%;
		min-height: 44px;
		margin: 0;
	}
	.custom-variations-table.table > tbody > tr > td:last-child small {
		max-width: none;
		margin: 0 0 6px !important;
		text-align: start;
	}
	/* The wrapper no longer has anything to scroll. */
	.add-to-cart.table-responsive:has(> .custom-variations-table) {
		overflow-x: visible;
	}
}