/**
 * Mechanc — Request a Quote.
 *
 * Skins two pieces of YITH Request a Quote output: the mini list widget that
 * inc/quote.php mounts under the header button, and the quote page itself.
 *
 * Written entirely against the design tokens with no `body.light` block, so one
 * set of rules themes both ways — the pattern product-table.css established for
 * third-party plugin output. Writing a dark copy and a light copy of a plugin's
 * markup doubles the surface that has to be re-checked every time the plugin
 * updates its templates.
 *
 * Two things about the selectors:
 *
 * · They are deliberately deeper than they look like they need to be. YITH's
 *   frontend.css styles this widget at two and three classes deep
 *   (`ul.yith-ywraq-list a.yith-ywraq-item-remove.remove`), and LiteSpeed
 *   combines every stylesheet on the site into one file, so winning by source
 *   order is not something to rely on. Each rule below outranks the plugin rule
 *   it replaces rather than tying it.
 *
 * · There is no `!important` here, unlike product-table.css. The quote markup
 *   has stable, hand-written class names and no per-instance generated classes,
 *   so specificity alone is enough.
 *
 * Layout note for the page: YITH renders the products table and the request
 * form as one shortcode, both inside `.ywraq-form-table-wrapper`. The mockup's
 * two-column split is therefore made on that wrapper, not in Elementor — the
 * page's own containers stay single-column and stay editable.
 *
 * @package HelloElementorChild
 */

/* ═══════════════════════════════════════════════════════════════
   1. HEADER — the quote panel on hover
   ═══════════════════════════════════════════════════════════════ */

/* The button and the panel share a positioning context. Restated with .e-con
   attached because Elementor forces `display: flex` on every container and the
   design's own `.quote-btn-wrap` rule loses on load order.

   `width: auto` matters as much as the position does: an Elementor container
   resolves to `width: var(--width, 100%)`, so dropping one inside the flex row
   of `.nav-right` would have it claim the whole bar and push the search icon
   off the end. */
.e-con.quote-btn-wrap,
.quote-btn-wrap {
	position: relative;
	align-items: center;
	width: auto;
	flex: 0 0 auto;
}

/* The container holding the [yith_ywraq_request_quote] shortcode. It used to
   carry `.quote-list-card` and draw the card itself; the card is now drawn
   around YITH's own <form> so that the request form can sit outside it in the
   second column, which leaves this as a bare wrapper. */
.e-con.quote-page-body {
	padding: 0;
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
}

/* The widget is a mount point, nothing more: YITH gives it inline-block and a
   25px vertical margin, which would make the header taller than the nav. */
.quote-btn-wrap .mc-quote-panel {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
	z-index: auto;
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-widget-wrapper {
	position: static;
}

/* ── The count badge ──
   `.raq-info` is the widget's own trigger. The button is the trigger here, so
   this is reduced to the number, sitting on the button's corner. It stays a
   link to the quote page for anyone who taps it, but does not swallow clicks
   meant for the button underneath. */
.quote-btn-wrap .mc-quote-panel .raq-info {
	position: absolute;
	top: -7px;
	right: -7px;
	z-index: 2;
	margin: 0;
	padding: 0;
	border: 0;
	pointer-events: none;
}

/* Nothing to count, nothing to show. */
.quote-btn-wrap .mc-quote-panel .raq-info.empty-raq {
	display: none;
}

.quote-btn-wrap .mc-quote-panel .raq_label {
	display: block;
	text-decoration: none;
}

/* font-size:0 on the counter suppresses the widget's " items" text node, which
   has no element of its own to hide. The number restores its own size.

   The number is `var(--void)` rather than a literal black: the badge sits on
   the accent-filled button, and `--cyan` is a light cyan in the dark theme but
   a mid blue in the light one. `--void` is the page ground in both, so it
   inverts with the accent and keeps the count readable either way — black on
   cyan, white on blue. The ring in the same token separates the badge from the
   button beneath it. */
.quote-btn-wrap .mc-quote-panel .raq-tip-counter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--cyan);
	color: var(--void);
	box-shadow: 0 0 0 2px var(--void);
	font-family: var(--fm);
	font-size: 0;
	font-weight: 700;
}

.quote-btn-wrap .mc-quote-panel .raq-items-number {
	font-size: 10px;
	line-height: 1;
	font-weight: 700;
}

/* The widget's icon-font glyph and its outside label both belong to the trigger
   we replaced. */
.quote-btn-wrap .mc-quote-panel .ywraq-quote-icon-icon_quote,
.quote-btn-wrap .mc-quote-panel .ywraq-custom-icon,
.quote-btn-wrap .mc-quote-panel .handler-label {
	display: none;
}

/* ── The panel ── */
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-wrapper {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: auto;
	bottom: auto;
	width: 300px;
	margin: 0;
	padding: 0;
	background: var(--card);
	border: 1px solid var(--br);
	border-radius: var(--rl);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .25s, visibility .25s, transform .25s;
	z-index: 400;
	overflow: hidden;
	pointer-events: none;
}

/* Hovering the button opens it, not just hovering the widget — the widget is
   only the badge, and a 300px panel that opens off an 18px badge is unusable.
   :focus-within gives keyboard users the same reach. */
.quote-btn-wrap:hover .mc-quote-panel .yith-ywraq-list-wrapper,
.quote-btn-wrap:focus-within .mc-quote-panel .yith-ywraq-list-wrapper {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* YITH makes this inner div the floating layer, with its own absolute position,
   white background and opacity transition. The wrapper above is the floating
   layer now, so this one flattens out. */
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content {
	position: static;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	opacity: 1;
	visibility: visible;
	font-size: inherit;
	transition: none;
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content::before,
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content::after,
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-wrapper .close {
	display: none;
}

/* Panel header. This is the widget title, printed inside the panel by
   show_title_inside, which is why the trigger could be reduced to a badge. */
.quote-btn-wrap .mc-quote-panel .items-count {
	margin: 0;
	padding: 12px 16px;
	border-bottom: 1px solid var(--br);
	font-family: var(--fm);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cyan);
}

.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	max-height: 220px;
	overflow-y: auto;
}

/* A rule under the list only when something follows it — with an empty list the
   panel ends there and a trailing rule would be a line under nothing. */
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content > ul:not(:last-child) {
	border-bottom: 1px solid var(--br);
}

.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list li {
	position: relative;
	display: flex;
	align-items: flex-start;
	margin: 0;
	padding: 9px 32px 9px 16px;
	border-bottom: 1px solid var(--br);
	clear: none;
}

.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list li:last-child {
	border-bottom: none;
}

/* Part number, name and quantity in one row: the quantity holds column two for
   the full height of the item, so the layout is the same whether or not the
   product has a SKU to lead with. */
.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-item-product-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 10px;
	align-items: center;
	flex: 1;
	min-width: 0;
	font-size: inherit;
	font-weight: 400;
	text-decoration: none;
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-item-product-info > * {
	grid-column: 1;
}

.quote-btn-wrap .mc-quote-panel .qhp-pn {
	font-family: var(--fm);
	font-size: 11px;
	font-weight: 700;
	color: var(--t1);
}

/* Catalogue titles run past a hundred characters; two lines is the most a
   300px panel can carry without the list turning into a wall. */
.quote-btn-wrap .mc-quote-panel .qhp-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 11px;
	line-height: 1.45;
	color: var(--t2);
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-item .quantity {
	grid-column: 2;
	grid-row: 1 / -1;
	align-self: center;
	font-family: var(--fm);
	font-size: 11px;
	color: var(--cyan);
}

/* The one place `!important` is unavoidable: WooCommerce ships
   `a.remove { color: #a00 !important }` and its hover in the same form, so no
   amount of specificity reaches the colour. Everything else here wins normally,
   which is why only these two declarations carry it. */
.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list a.yith-ywraq-item-remove.remove {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: var(--t3) !important;
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list a.yith-ywraq-item-remove.remove:hover {
	background: rgba(255, 68, 68, .12);
	color: #ff4444 !important;
}

.quote-btn-wrap .mc-quote-panel ul.yith-ywraq-list li.no-product {
	display: block;
	padding: 22px 16px;
	border-bottom: none;
	text-align: center;
	font-size: 12px;
	color: var(--t3);
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content > .button {
	display: block;
	width: auto;
	margin: 12px 14px 14px;
	padding: 9px;
	border: 0;
	border-radius: var(--r);
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	color: #000;
	font-family: var(--fb);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: opacity .2s;
}

.quote-btn-wrap .mc-quote-panel .yith-ywraq-list-content > .button:hover {
	opacity: .9;
}

/* Below 900px the header button is replaced by the hamburger, so its panel has
   nothing to hang from. YITH's own mobile behaviour — a full-screen takeover
   triggered by tapping the badge — is not wanted either. */
@media (max-width: 900px) {
	.e-con.quote-btn-wrap,
	.quote-btn-wrap {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════
   2. THE QUOTE PAGE
   ═══════════════════════════════════════════════════════════════ */

.ywraq-wrapper {
	color: var(--t2);
}

/* WooCommerce's own notice block, used here for "your quote has been sent". */
.ywraq-wrapper #yith-ywraq-message:empty,
.ywraq-wrapper #yith-ywraq-message .ywraq-question-message:empty {
	display: none;
}

.ywraq-wrapper .woocommerce-message,
.ywraq-wrapper .woocommerce-info,
.ywraq-wrapper .woocommerce-error {
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--bra);
	border-radius: var(--r);
	background: rgba(0, 207, 255, .06);
	color: var(--t1);
	font-size: 13px;
	list-style: none;
}

/* ── The two-column split ──
   `.ywraq-with-form` is YITH's own signal that a form is being rendered
   alongside the table, which is exactly when the mockup's second column
   exists. With an empty list the class is absent and this stays one column. */
.ywraq-wrapper.ywraq-with-form .ywraq-form-table-wrapper {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 900px) {
	.ywraq-wrapper.ywraq-with-form .ywraq-form-table-wrapper {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ── Left column: the selected-products card ── */
.ywraq-wrapper #yith-ywraq-form {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--br);
	border-radius: var(--rl);
	overflow: hidden;
}

.ywraq-wrapper #yith-ywraq-form .qlc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--br);
}

.ywraq-wrapper #yith-ywraq-form .qlc-title {
	font-family: var(--fh);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--t1);
}

.ywraq-wrapper #yith-ywraq-form .qlc-count {
	font-family: var(--fm);
	font-size: 11px;
	color: var(--t3);
}

.ywraq-wrapper table#yith-ywrq-table-list {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: none;
}

.ywraq-wrapper table#yith-ywrq-table-list th {
	padding: 10px 16px;
	border: 0;
	border-bottom: 1px solid var(--bra);
	background: rgba(0, 207, 255, .04);
	font-family: var(--fm);
	font-size: 9px;
	font-weight: 400;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--cyan);
}

.ywraq-wrapper table#yith-ywrq-table-list td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--br);
	background: none;
	vertical-align: middle;
	font-size: 13px;
	color: var(--t2);
}

.ywraq-wrapper table#yith-ywrq-table-list tbody tr:last-child td {
	border-bottom: none;
}

.ywraq-wrapper table#yith-ywrq-table-list tbody tr:hover td {
	background: rgba(127, 127, 127, .05);
}

/* The remove column is a 44px gutter, not a data column. */
.ywraq-wrapper table#yith-ywrq-table-list td.product-remove,
.ywraq-wrapper table#yith-ywrq-table-list th.product-remove {
	width: 44px;
	padding-right: 0;
	text-align: center;
}

/* Same WooCommerce `!important` on `a.remove` as in the panel above. */
.ywraq-wrapper table#yith-ywrq-table-list td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: var(--r);
	background: none !important;
	color: var(--t3) !important;
	font-size: 17px;
	line-height: 1;
	font-weight: 400;
	text-decoration: none;
	transition: background .2s, color .2s;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-remove a.remove:hover {
	background: rgba(255, 68, 68, .12) !important;
	color: #ff4444 !important;
}

/* The catalogue photographs are cut out on white, so they read as bright tiles
   on the dark theme. At row scale that is a thumbnail rather than a slab; the
   rounded, bordered frame is what keeps it from looking like a hole in the
   card. */
.ywraq-wrapper table#yith-ywrq-table-list td.product-thumbnail {
	width: 72px;
	padding-right: 0;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-thumbnail img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
	padding: 4px;
	border: 1px solid var(--br);
	border-radius: var(--r);
	background: #fff;
	box-shadow: none;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-name a {
	color: var(--t1);
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-name a:hover {
	color: var(--cyan);
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-name small {
	display: block;
	margin-top: 3px;
	font-family: var(--fm);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--t3);
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-quantity {
	width: 96px;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-quantity .quantity {
	margin: 0;
	float: none;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-quantity input.qty {
	width: 64px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid var(--br);
	border-radius: var(--r);
	background: var(--deep);
	color: var(--t1);
	font-family: var(--fm);
	font-size: 12px;
	text-align: center;
	box-shadow: none;
}

.ywraq-wrapper table#yith-ywrq-table-list td.product-quantity input.qty:focus {
	border-color: var(--cyan);
	outline: none;
}

/* ── Card footer: clear the list, or push the edited quantities back ── */
.ywraq-wrapper .update-list-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 20px;
	border-top: 1px solid var(--br);
}

.ywraq-wrapper .update-list-wrapper .after-table-right {
	order: -1;
	margin: 0;
	float: none;
}

.ywraq-wrapper .update-list-wrapper button.ywraq_clean_list {
	padding: 0;
	border: 0;
	background: none;
	color: var(--t3);
	font-family: var(--fm);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	transition: color .2s;
}

.ywraq-wrapper .update-list-wrapper button.ywraq_clean_list:hover {
	color: #ff4444;
	background: none;
}

.ywraq-wrapper .update-list-wrapper input.button {
	margin: 0;
	padding: 8px 18px;
	border: 1px solid var(--bra);
	border-radius: var(--r);
	background: rgba(0, 207, 255, .06);
	color: var(--cyan);
	font-family: var(--fm);
	font-size: 11px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.ywraq-wrapper .update-list-wrapper input.button:hover {
	background: var(--cyan);
	color: #000;
}

/* ── Right column: the request form ── */
.ywraq-wrapper .yith-ywraq-mail-form-wrapper {
	padding: 28px;
	background: var(--card);
	border: 1px solid var(--br);
	border-radius: var(--rl);
	position: sticky;
	top: 96px;
}

@media (max-width: 900px) {
	.ywraq-wrapper .yith-ywraq-mail-form-wrapper {
		position: static;
	}
}

.ywraq-wrapper .yith-ywraq-mail-form-wrapper > h3 {
	margin: 0 0 20px;
	font-family: var(--fh);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--t1);
}

.ywraq-wrapper #yith-ywraq-default-form .form-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 14px;
	padding: 0;
}

.ywraq-wrapper #yith-ywraq-default-form .form-row label {
	margin: 0;
	font-family: var(--fm);
	font-size: 10px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--t3);
}

.ywraq-wrapper #yith-ywraq-default-form .form-row label .required {
	border: 0;
	color: var(--cyan);
	text-decoration: none;
}

.ywraq-wrapper #yith-ywraq-default-form .form-row label .optional {
	color: var(--t3);
	text-transform: none;
	letter-spacing: 0;
}

.ywraq-wrapper #yith-ywraq-default-form .input-text,
.ywraq-wrapper #yith-ywraq-default-form select,
.ywraq-wrapper #yith-ywraq-default-form textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--br);
	border-radius: var(--r);
	background: rgba(127, 127, 127, .08);
	color: var(--t1);
	font-family: var(--fb);
	font-size: 12px;
	line-height: 1.6;
	box-shadow: none;
	transition: border-color .2s, background .2s;
}

.ywraq-wrapper #yith-ywraq-default-form textarea {
	min-height: 90px;
	resize: vertical;
}

.ywraq-wrapper #yith-ywraq-default-form .input-text::placeholder,
.ywraq-wrapper #yith-ywraq-default-form textarea::placeholder {
	color: var(--t3);
}

.ywraq-wrapper #yith-ywraq-default-form .input-text:focus,
.ywraq-wrapper #yith-ywraq-default-form select:focus,
.ywraq-wrapper #yith-ywraq-default-form textarea:focus {
	border-color: var(--cyan);
	background: rgba(0, 207, 255, .04);
	outline: none;
}

.ywraq-wrapper #yith-ywraq-default-form .raq-send-request-row {
	margin: 20px 0 0;
}

.ywraq-wrapper #yith-ywraq-default-form input.raq-send-request {
	width: 100%;
	padding: 13px;
	border: 0;
	border-radius: var(--r);
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	color: #000;
	font-family: var(--fb);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 207, 255, .18);
	transition: transform .2s, box-shadow .2s;
}

.ywraq-wrapper #yith-ywraq-default-form input.raq-send-request:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 207, 255, .28);
}

/* ── The empty state ──
   YITH's default here is a dashed grey box holding one sentence and, on this
   install, a button with no words in it — the label option was never set.
   inc/quote.php supplies the words; this makes the box the mockup's card. */
.ywraq-wrapper.ywraq-empty .ywraq-before-form,
.ywraq-wrapper.ywraq-with-form.ywraq-empty .ywraq-before-form {
	display: block;
	margin: 0;
	padding: 56px 24px;
	border: 1px solid var(--br);
	border-radius: var(--rl);
	background: var(--card);
	text-align: center;
}

/* YITH paints its own empty-list illustration here as a background image on
   ::before. It is a flat PNG that cannot follow the palette, and the mockup's
   clipboard mark below replaces it — two illustrations stacked was the first
   thing this page rendered. */
.ywraq-wrapper .ywraq-before-form::before {
	content: none;
}

/* ywraq_get_list_empty_message() builds its markup as `<p>…<p>`, opening a
   second paragraph it never closes. The parser turns that into an empty <p>
   between the message and the button, which shows up as a gap. */
.ywraq-wrapper.ywraq-empty .ywraq-before-form > p:empty {
	display: none;
}

/* The clipboard mark from the mockup. It is a CSS mask rather than an <svg>
   because the message it sits above is printed through wp_kses_post(), which
   strips SVG — and a mask takes its colour from the token, so it follows the
   theme the way an inline icon would. */
.ywraq-wrapper.ywraq-empty .ywraq_list_empty_message::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin: 0 auto 16px;
	background-color: var(--t3);
	opacity: .45;
	-webkit-mask: var(--mc-quote-empty-icon) center / contain no-repeat;
	mask: var(--mc-quote-empty-icon) center / contain no-repeat;
}

.ywraq-wrapper.ywraq-empty .ywraq_list_empty_message {
	--mc-quote-empty-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	margin: 0;
	font-family: var(--fh);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--t1);
}

.ywraq-wrapper.ywraq-empty .ql-empty-hint {
	display: block;
	margin-top: 8px;
	font-family: var(--fb);
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--t2);
}

.ywraq-wrapper.ywraq-empty .return-to-shop {
	margin: 24px 0 0;
}

.ywraq-wrapper .return-to-shop a.button,
.ywraq-wrapper a.button.wc-backward {
	display: inline-block;
	padding: 11px 26px;
	border: 0;
	border-radius: var(--r);
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	color: #000;
	font-family: var(--fb);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 6px 20px rgba(0, 207, 255, .18);
	transition: transform .2s, box-shadow .2s;
}

.ywraq-wrapper .return-to-shop a.button:hover,
.ywraq-wrapper a.button.wc-backward:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 207, 255, .28);
}

/* ── Small screens: the table becomes a stack ──
   YITH ships `.ywraq_responsive`, which relies on the `data-title` attributes
   already on every cell. Only the presentation of that stack is set here. */
@media (max-width: 600px) {
	.ywraq-wrapper table#yith-ywrq-table-list thead {
		display: none;
	}

	.ywraq-wrapper table#yith-ywrq-table-list tbody tr {
		position: relative;
		display: grid;
		grid-template-columns: 72px minmax(0, 1fr);
		align-items: center;
		gap: 0 14px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--br);
	}

	.ywraq-wrapper table#yith-ywrq-table-list tbody tr:last-child {
		border-bottom: none;
	}

	.ywraq-wrapper table#yith-ywrq-table-list td {
		display: block;
		padding: 0;
		border-bottom: none;
	}

	.ywraq-wrapper table#yith-ywrq-table-list td.product-thumbnail {
		grid-row: 1 / span 2;
	}

	.ywraq-wrapper table#yith-ywrq-table-list td.product-quantity {
		width: auto;
		margin-top: 10px;
	}

	.ywraq-wrapper table#yith-ywrq-table-list td.product-remove {
		position: absolute;
		top: 8px;
		right: 8px;
		width: auto;
	}
}