/* =========================================================================
   Voltline — main.css
   Industrial / utilitarian B2B components storefront
   ========================================================================= */

:root {
	--vl-ink:      #1f2937;
	--vl-navy:     #4b5563;
	--vl-navy-700: #374151;
	--vl-signal:   #f2c232;
	--vl-signal-d: #d9a81c;
	--vl-teal:     #0b7285;
	--vl-mist:     #f2f5f8;
	--vl-mist-2:   #e7edf3;
	--vl-line:     #d8e0e8;
	--vl-text:     #1c2733;
	--vl-muted:    #5c6b7a;
	--vl-white:    #ffffff;
	--vl-ok:       #1f9d57;

	--vl-radius:   0px;
	--vl-radius-s: 5px;
	--vl-shadow:   0 1px 2px rgba(13,27,42,.06), 0 4px 14px rgba(13,27,42,.06);
	--vl-shadow-l: 0 18px 50px rgba(13,27,42,.16);

	--vl-max:      1320px;
	--vl-gap:      24px;

	--vl-font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
	--vl-font-body:    "Noto Sans", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--vl-font-body);
	color: var(--vl-text);
	background: var(--vl-white);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--vl-font-display); color: var(--vl-ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
a { color: var(--vl-teal); text-decoration: none; }
a:hover { color: var(--vl-navy); }
img { max-width: 100%; height: auto; display: block; }

.vl-container { max-width: var(--vl-max); margin: 0 auto; padding: 0 20px; width: 100%; }

.screen-reader-text {
	position: absolute !important; clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; background: var(--vl-ink); color: #fff; padding: 10px 16px; z-index: 9999; border-radius: var(--vl-radius-s); }

/* ---------- Buttons ---------- */
.vl-btn {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--vl-font-display); font-weight: 700; font-size: 15px;
	padding: 12px 22px; border-radius: var(--vl-radius-s);
	border: 0; cursor: pointer; transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
	text-decoration: none;
}
.vl-btn:active { transform: translateY(1px); }
.vl-btn-primary { background: var(--vl-signal); color: var(--vl-ink); }
.vl-btn-primary:hover { background: var(--vl-signal-d); color: var(--vl-ink); }

.vl-link { font-weight: 600; color: var(--vl-teal); white-space: nowrap; }

/* =========================================================================
   Top bar
   ========================================================================= */
.vl-topbar { background: var(--vl-ink); color: #c7d2dd; font-size: 12.5px; }
.vl-topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 36px; }
.vl-topbar-msg { margin: 0; letter-spacing: .01em; }
.vl-topbar-menu { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.vl-topbar-menu a { color: #c7d2dd; }
.vl-topbar-menu a:hover { color: #fff; }

/* =========================================================================
   Header
   ========================================================================= */
.vl-header { background: var(--vl-white); border-bottom: 1px solid var(--vl-line); }
.vl-header-inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	min-height: 84px;
}

/* Brand */
.vl-logo, .custom-logo-link { display: inline-flex; align-items: center; gap: 10px; }
.vl-logo-mark { color: var(--vl-navy); display: inline-flex; }
.vl-logo-text { font-family: var(--vl-font-display); font-weight: 800; font-size: 24px; color: var(--vl-ink); letter-spacing: -.02em; }

/* Search */
.vl-header-search { width: 100%; }
.vl-search {
	display: flex; align-items: stretch;
	border: 2px solid var(--vl-navy);
	border-radius: var(--vl-radius-s);
	overflow: hidden; background: #fff;
}
.vl-search-cat {
	border: 0; background: var(--vl-mist); color: var(--vl-ink);
	font-family: var(--vl-font-body); font-size: 14px; font-weight: 600;
	padding: 0 14px; max-width: 180px; cursor: pointer;
	border-right: 1px solid var(--vl-line);
}
.vl-search-field {
	flex: 1; border: 0; outline: 0; padding: 13px 16px; font-size: 15px; min-width: 0;
	font-family: var(--vl-font-body);
}
.vl-search-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--vl-navy); color: #fff; border: 0; cursor: pointer;
	padding: 0 22px; font-family: var(--vl-font-display); font-weight: 700; font-size: 15px;
	transition: background .15s ease;
}
.vl-search-btn:hover { background: var(--vl-navy-700); }
.vl-search-btn svg { stroke: #fff; }

/* Actions */
.vl-actions { display: flex; align-items: center; gap: 8px; }
.vl-action {
	display: flex; flex-direction: column; align-items: center; gap: 3px;
	color: var(--vl-ink); padding: 6px 12px; border-radius: var(--vl-radius-s);
	font-size: 12px; font-weight: 600; position: relative;
}
.vl-action:hover { color: var(--vl-navy); background: var(--vl-mist); }
.vl-action svg { stroke: var(--vl-ink); }
.vl-cart-icon { position: relative; display: inline-flex; }
.vl-cart-count {
	position: absolute; top: -7px; right: -10px;
	background: var(--vl-signal); color: var(--vl-ink);
	font-size: 11px; font-weight: 700; line-height: 1;
	min-width: 18px; height: 18px; padding: 0 4px;
	border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--vl-font-display);
}

.vl-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.vl-burger span { width: 24px; height: 2.5px; background: var(--vl-ink); border-radius: 2px; }

/* =========================================================================
   Mega-menu nav
   ========================================================================= */
.vl-nav { background: var(--vl-navy); position: relative; z-index: 40; }
.vl-nav-inner { display: flex; align-items: stretch; gap: 0; }
.vl-allcats {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--vl-signal); color: var(--vl-ink);
	border: 0; cursor: pointer; padding: 0 20px;
	font-family: var(--vl-font-display); font-weight: 700; font-size: 14.5px;
}
.vl-allcats svg { stroke: var(--vl-ink); }

.vl-menu { list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap; }
.vl-menu-item.depth-0 { position: relative; }
.vl-menu-link {
	display: inline-flex; align-items: center; gap: 6px;
	color: #e7eef6; font-weight: 600; font-size: 14px;
	padding: 14px 16px; height: 100%;
	transition: background .12s ease, color .12s ease;
}
.vl-menu-item.depth-0:hover > .vl-menu-link { background: var(--vl-navy-700); color: #fff; }
.vl-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .8; }

/* Mega panel */
.vl-mega-panel {
	position: absolute; top: 100%; left: 0;
	background: #fff; min-width: 560px; max-width: 760px;
	box-shadow: var(--vl-shadow-l);
	border: 1px solid var(--vl-line); border-top: 3px solid var(--vl-signal);
	border-radius: 0 0 var(--vl-radius) var(--vl-radius);
	padding: 22px 24px; opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 50;
}
.vl-menu-item.has-mega:hover > .vl-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.vl-mega-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 28px;
}
.vl-sub-link { display: block; color: var(--vl-text); font-size: 14px; padding: 7px 8px; border-radius: var(--vl-radius-s); }
.vl-sub-link:hover { background: var(--vl-mist); color: var(--vl-navy); }

/* =========================================================================
   Hero
   ========================================================================= */
.vl-hero {
	background:
		radial-gradient(1100px 400px at 85% -10%, rgba(11,114,133,.18), transparent 60%),
		linear-gradient(135deg, var(--vl-navy) 0%, var(--vl-ink) 100%);
	color: #fff; position: relative; overflow: hidden;
}
.vl-hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 38px 38px; opacity: .5; pointer-events: none;
}
.vl-hero-inner {
	position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
	align-items: center; gap: 48px; padding: 72px 20px;
}
.vl-hero-eyebrow {
	display: inline-block; text-transform: uppercase; letter-spacing: .14em;
	font-size: 12px; font-weight: 700; color: var(--vl-signal);
	font-family: var(--vl-font-display); margin-bottom: 14px;
}
.vl-hero-title { color: #fff; font-size: clamp(34px, 5vw, 56px); font-weight: 800; margin: 0 0 18px; }
.vl-hero-text { color: #c3d0de; font-size: 18px; max-width: 30ch; margin: 0 0 28px; }

.vl-hero-card { position: relative; }
.vl-spec-card {
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--vl-radius); padding: 8px 22px; backdrop-filter: blur(4px);
}
.vl-spec-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.vl-spec-row:last-child { border-bottom: 0; }
.vl-spec-row span { color: #aebccb; font-size: 14px; }
.vl-spec-row strong { font-family: var(--vl-font-display); font-size: 22px; color: var(--vl-signal); }

/* =========================================================================
   Trust bar
   ========================================================================= */
.vl-trust { background: var(--vl-ink); }
.vl-trust-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.vl-trust-item { display: flex; align-items: center; gap: 10px; color: #d7e0ea; font-weight: 600; font-size: 13.5px; }
.vl-trust-item svg { stroke: var(--vl-signal); flex: none; }

/* =========================================================================
   Sections
   ========================================================================= */
.vl-section { padding: 56px 0; }
.vl-section-mist { background: var(--vl-mist); }
.vl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.vl-section-head h2 { font-size: 26px; margin: 0; }

/* Category tiles */
.vl-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vl-cat-card {
	background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius);
	padding: 18px; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
	display: flex; flex-direction: column; align-items: center;
}
.vl-cat-card:hover { border-color: var(--vl-navy); box-shadow: var(--vl-shadow); transform: translateY(-2px); }
.vl-cat-thumb { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.vl-cat-img { max-height: 96px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.vl-cat-ph { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--vl-mist-2), var(--vl-mist)); border: 1px dashed var(--vl-line); }
.vl-cat-name { font-size: 15px; margin: 0 0 4px; color: var(--vl-ink); }
.vl-cat-count { font-size: 12.5px; color: var(--vl-muted); }

/* Brands strip */
.vl-brands { padding: 40px 0 56px; }
.vl-brands-label { text-align: center; color: var(--vl-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin: 0 0 22px; }
.vl-brands-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.vl-brand-chip {
	font-family: var(--vl-font-display); font-weight: 700; letter-spacing: .04em;
	color: var(--vl-muted); border: 1px solid var(--vl-line); background: #fff;
	padding: 10px 22px; border-radius: 40px; font-size: 15px;
}

/* =========================================================================
   Newsletter + footer
   ========================================================================= */
.vl-newsletter { background: var(--vl-signal); }
.vl-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 20px; flex-wrap: wrap; }
.vl-newsletter-copy h3 { margin: 0 0 4px; color: var(--vl-ink); font-size: 22px; }
.vl-newsletter-copy p { margin: 0; color: #5a3d00; font-weight: 500; }
.vl-newsletter-form { display: flex; gap: 8px; }
.vl-newsletter-form input { border: 0; border-radius: var(--vl-radius-s); padding: 13px 16px; min-width: 280px; font-size: 15px; font-family: var(--vl-font-body); }
.vl-newsletter-form button { background: var(--vl-ink); color: #fff; border: 0; border-radius: var(--vl-radius-s); padding: 0 24px; font-family: var(--vl-font-display); font-weight: 700; cursor: pointer; }
.vl-newsletter-form button:hover { background: var(--vl-navy); }

.vl-footer-main { background: var(--vl-ink); color: #b9c6d3; padding: 52px 0 36px; }
.vl-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.vl-footer-brand .vl-logo-text, .vl-footer-brand .vl-logo-mark { color: #fff; }
.vl-footer-brand .vl-logo-mark { color: var(--vl-signal); }
.vl-footer-blurb { margin: 16px 0 18px; color: #93a3b3; font-size: 14px; max-width: 34ch; }
.footer-widget-title, .vl-footer-col .footer-widget-title { color: #fff; font-size: 15px; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }
.vl-footer-list { list-style: none; margin: 0; padding: 0; }
.vl-footer-list li { margin-bottom: 9px; }
.vl-footer-list a, .vl-footer-col a { color: #b9c6d3; font-size: 14px; }
.vl-footer-list a:hover, .vl-footer-col a:hover { color: var(--vl-signal); }

.vl-social { display: flex; gap: 10px; }
.vl-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #2a3b4d; display: inline-flex; align-items: center; justify-content: center; color: #b9c6d3; }
.vl-social a:hover { border-color: var(--vl-signal); color: var(--vl-signal); }

.vl-footer-bottom { background: #08111c; color: #7e8e9d; }
.vl-footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.vl-copy { margin: 0; font-size: 13px; }
.vl-pay { display: flex; gap: 8px; }
.vl-pay-chip { background: #122031; border: 1px solid #1f3146; color: #c7d2dd; font-family: var(--vl-font-display); font-weight: 700; font-size: 11px; padding: 5px 9px; border-radius: 4px; letter-spacing: .04em; }

/* =========================================================================
   WooCommerce
   ========================================================================= */
.vl-content { min-height: 40vh; }
.vl-woo-container { padding-top: 32px; padding-bottom: 56px; }
.vl-shop-wrap { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
.vl-woo-container .vl-shop-wrap { direction: ltr; }
.vl-shop-main { min-width: 0; order: 2; }
.vl-shop-sidebar { order: 1; }

/* If no sidebar widgets, single column */
.vl-shop-wrap:not(:has(.vl-shop-sidebar)) { grid-template-columns: 1fr; }

.woocommerce-breadcrumb { font-size: 13px; color: var(--vl-muted); margin-bottom: 18px; }
.woocommerce-products-header__title, .vl-woo-container h1.entry-title { font-size: 30px; margin-bottom: 8px; }

/* Toolbar */
.vl-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--vl-line); }
.woocommerce-result-count { margin: 0; color: var(--vl-muted); font-size: 13.5px; }
.woocommerce-ordering select { padding: 9px 12px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius-s); font-family: var(--vl-font-body); }

/* Product grid */
.woocommerce ul.products, .woocommerce-page ul.products {
	display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products li.product, ul.products li.product {
	width: auto !important; margin: 0 !important; float: none !important;
	background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius);
	padding: 16px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
	display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover { border-color: var(--vl-navy); box-shadow: var(--vl-shadow); transform: translateY(-2px); }
.woocommerce ul.products li.product a img { margin-bottom: 14px; aspect-ratio: 1/1; object-fit: contain; mix-blend-mode: multiply; background: #fff; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--vl-font-body); font-weight: 600; font-size: 14.5px; line-height: 1.35;
	color: var(--vl-ink); padding: 0; margin: 0 0 4px;
}
.vl-part-no { display: block; font-family: var(--vl-font-display); font-size: 12px; color: var(--vl-muted); letter-spacing: .02em; margin-bottom: 8px; }
.woocommerce ul.products li.product .price { color: var(--vl-ink); font-family: var(--vl-font-display); font-weight: 700; font-size: 18px; margin: auto 0 12px; }
.woocommerce ul.products li.product .price del { color: var(--vl-muted); font-weight: 400; font-size: 14px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Sale flash */
.woocommerce span.onsale {
	background: var(--vl-signal); color: var(--vl-ink); font-family: var(--vl-font-display); font-weight: 700;
	min-height: auto; min-width: auto; padding: 4px 10px; border-radius: 4px; font-size: 12px; line-height: 1;
	top: 10px; left: 10px; margin: 0;
}

/* Buttons (Woo) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--vl-navy); color: #fff; font-family: var(--vl-font-display); font-weight: 700;
	border-radius: var(--vl-radius-s); padding: 11px 18px; font-size: 14px; transition: background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--vl-navy-700); color: #fff; }
.woocommerce ul.products li.product .button { width: 100%; text-align: center; margin-top: auto; }
.woocommerce #respond input#submit.alt, .woocommerce .single_add_to_cart_button { background: var(--vl-signal); color: var(--vl-ink); }
.woocommerce .single_add_to_cart_button:hover { background: var(--vl-signal-d); color: var(--vl-ink); }

/* Single product */
.woocommerce div.product .product_title { font-size: 30px; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--vl-ink); font-family: var(--vl-font-display); font-weight: 700; font-size: 26px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--vl-signal); }
.woocommerce div.product form.cart .quantity .qty { padding: 11px; border: 1px solid var(--vl-line); border-radius: var(--vl-radius-s); }

/* Star ratings */
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: var(--vl-signal); }

/* Sidebar widgets */
.vl-shop-sidebar .widget, .vl-sidebar .widget { background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 18px; margin-bottom: 18px; }
.widget-title { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--vl-line); }
.vl-shop-sidebar ul, .vl-sidebar ul { list-style: none; margin: 0; padding: 0; }
.vl-shop-sidebar li, .vl-sidebar li { padding: 5px 0; font-size: 14px; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error { border-top-color: var(--vl-signal); border-radius: var(--vl-radius-s); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--vl-signal); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul, .pagination .nav-links { border: 0; display: flex; gap: 6px; justify-content: center; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span,
.pagination .page-numbers {
	border: 1px solid var(--vl-line); border-radius: var(--vl-radius-s); padding: 8px 14px; color: var(--vl-ink); background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current, .pagination .page-numbers.current { background: var(--vl-navy); color: #fff; border-color: var(--vl-navy); }

/* =========================================================================
   Blog / generic
   ========================================================================= */
.vl-main-layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; padding: 36px 20px 56px; align-items: start; }
.vl-page-head { margin-bottom: 24px; }
.vl-page-title { font-size: 30px; }
.vl-post-list { display: grid; gap: 22px; }
.vl-post-card { display: grid; grid-template-columns: 220px 1fr; gap: 20px; background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); overflow: hidden; }
.vl-post-thumb img { height: 100%; object-fit: cover; }
.vl-post-body { padding: 18px 18px 18px 0; }
.vl-post-title { font-size: 20px; margin: 0 0 6px; }
.vl-post-meta { color: var(--vl-muted); font-size: 13px; margin-bottom: 10px; }
.vl-noresults { font-size: 18px; color: var(--vl-muted); }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
	.vl-footer-cols { grid-template-columns: 1fr 1fr; }
	.vl-hero-inner { grid-template-columns: 1fr; gap: 28px; }
	.vl-hero-card { max-width: 460px; }
	.woocommerce ul.products, .woocommerce-page ul.products, .vl-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
	.vl-header-inner { grid-template-columns: auto 1fr auto; gap: 14px; }
	.vl-header-search { order: 3; grid-column: 1 / -1; }
	.vl-actions .vl-action-label { display: none; }
	.vl-action { padding: 6px 8px; }
	.vl-burger { display: flex; }
	.vl-nav-inner { overflow-x: auto; }
	.vl-menu { flex-wrap: nowrap; }
	.vl-mega-panel { position: static; min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 16px; display: none; }
	.vl-shop-wrap { grid-template-columns: 1fr; }
	.vl-main-layout { grid-template-columns: 1fr; }
	.vl-post-card { grid-template-columns: 1fr; }
	.vl-post-thumb img { max-height: 220px; width: 100%; }
}

@media (max-width: 560px) {
	.woocommerce ul.products, .woocommerce-page ul.products, .vl-cat-grid { grid-template-columns: repeat(2, 1fr); }
	.vl-topbar-nav { display: none; }
	.vl-newsletter-form { width: 100%; }
	.vl-newsletter-form input { min-width: 0; flex: 1; }
	.vl-hero-inner { padding: 48px 20px; }
	.vl-trust-inner { gap: 12px; }
	.vl-trust-item { font-size: 12.5px; }
}

/* Mobile menu open state (toggled via JS) */
.vl-nav.is-open .vl-mega-panel { display: block; }
body.vl-menu-open { overflow: hidden; }
@media (max-width: 860px) {
	.vl-nav { display: none; }
	.vl-nav.is-open { display: block; position: fixed; inset: 0; top: 0; z-index: 200; overflow-y: auto; }
	.vl-nav.is-open .vl-nav-inner { flex-direction: column; align-items: stretch; padding: 16px; }
	.vl-nav.is-open .vl-menu { flex-direction: column; }
	.vl-nav.is-open .vl-menu-link { padding: 12px 8px; }
}

/* =========================================================================
   Corrections d'overflow horizontal sur mobile
   ========================================================================= */

/* Garde-fou : rien ne dépasse la largeur de l'écran. */
html, body { max-width: 100%; overflow-x: hidden; }
.vl-site, #page, #content { max-width: 100%; overflow-x: hidden; }

/* Les conteneurs respectent toujours la largeur (padding inclus). */
.vl-container { max-width: 100%; }

/* Les mots/références très longs se coupent au lieu de pousser la page. */
body, .vl-post-title, .vl-cat-name, .vl-part-no,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Les enfants flex peuvent se rétracter (évite le débordement par défaut). */
.vl-search, .vl-search-cat, .vl-search-field, .vl-search-btn,
.vl-newsletter-form, .vl-newsletter-form input, .vl-newsletter-form button,
.vl-actions, .vl-topbar-inner, .vl-footer-bottom-inner, .vl-trust-inner {
	min-width: 0;
}

/* Le formulaire newsletter s'enroule proprement sur petit écran. */
.vl-newsletter-form { flex-wrap: wrap; }
.vl-newsletter-form input { flex: 1 1 200px; }

/* Les tableaux WooCommerce (panier, commande) défilent au lieu de déborder. */
.woocommerce table.shop_table,
.woocommerce-cart .cart-collaterals,
.woocommerce form .form-row {
	max-width: 100%;
}
.woocommerce .woocommerce-cart-form,
.woocommerce table.cart {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Tablette / mobile large : la recherche reste dans le cadre. */
@media (max-width: 860px) {
	.vl-header-inner { gap: 12px; }
	.vl-search-cat { max-width: 130px; }
	.vl-search-field { width: 100%; }
}

/* Mobile : on densifie la barre de recherche pour qu'elle tienne. */
@media (max-width: 560px) {
	/* Le sélecteur de catégorie prend trop de place : on le masque,
	   la recherche plein texte reste disponible. */
	.vl-search-cat { display: none; }
	/* Le bouton ne garde que l'icône. */
	.vl-search-btn { padding: 0 14px; }
	.vl-search-btn span { display: none; }
	.vl-search-field { padding: 12px 12px; }

	.vl-newsletter-inner { gap: 16px; }
	.vl-footer-cols { gap: 24px; }
	.vl-hero-title { font-size: clamp(28px, 8vw, 40px); }
	.vl-hero-text { max-width: 100%; }
	.vl-spec-row strong { font-size: 18px; }

	/* La barre haute : message seul, qui s'enroule. */
	.vl-topbar-inner { justify-content: flex-start; }
	.vl-topbar-msg { font-size: 12px; }
}

/* Très petits écrans : on resserre encore. */
@media (max-width: 380px) {
	.vl-logo-text { font-size: 20px; }
	.vl-actions { gap: 2px; }
	.vl-action { padding: 6px 6px; }
	.woocommerce ul.products, .woocommerce-page ul.products, .vl-cat-grid {
		gap: 10px;
	}
}

/* =========================================================================
   Lien « S'identifier / S'enregistrer » (PC)
   ========================================================================= */
.vl-action--account { flex-direction: row; align-items: center; gap: 9px; }
.vl-action--account svg { stroke: var(--vl-ink); flex: none; }
.vl-account-text {
	display: block; text-align: left;
	font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--vl-ink);
}
.vl-account-l1, .vl-account-l2, .vl-account-hi, .vl-account-name { display: block; white-space: nowrap; }
.vl-account-hi { font-weight: 500; font-size: 11px; color: var(--vl-muted); }
.vl-action--account:hover .vl-account-text { color: var(--vl-navy); }

/* Mobile : on garde l'icône seule, comme les autres actions (inchangé). */
@media (max-width: 860px) {
	.vl-action--account { flex-direction: column; gap: 3px; }
	/* le label est déjà masqué par la règle .vl-actions .vl-action-label */
}

/* =========================================================================
   En-tête restructuré : ligne actions + ligne recherche (style distributeur)
   ========================================================================= */
.vl-header-top {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; min-height: 76px;
}
.vl-header-search { width: 100%; padding-bottom: 16px; }

/* Conteneur recherche + case "Références fabricant" */
.vl-search-wrap { display: flex; align-items: center; gap: 18px; width: 100%; }
.vl-search { flex: 1; }   /* le groupe bordé champ + bouton */

/* Case "Références fabricant" */
.vl-mpn {
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap; cursor: pointer;
	font-size: 14px; font-weight: 600; color: var(--vl-ink);
	user-select: none;
}
.vl-mpn input[type="checkbox"] {
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; margin: 0; flex: none;
	border: 2px solid var(--vl-navy); border-radius: 4px; background: #fff;
	display: inline-grid; place-content: center; cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}
.vl-mpn input[type="checkbox"]::before {
	content: ""; width: 10px; height: 10px; transform: scale(0);
	transition: transform .12s ease;
	box-shadow: inset 1em 1em var(--vl-signal);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.vl-mpn input[type="checkbox"]:checked { border-color: var(--vl-signal); }
.vl-mpn input[type="checkbox"]:checked::before { transform: scale(1); }
.vl-mpn:hover .vl-mpn-label { color: var(--vl-navy); }

/* Libellés "S'identifier / S'enregistrer" : inline et plus grands */
.vl-action--account { flex-direction: row; align-items: center; gap: 10px; }
.vl-account-text {
	display: inline; text-align: left;
	font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--vl-ink);
}
.vl-account-l1, .vl-account-l2, .vl-account-sep { display: inline; white-space: nowrap; }
.vl-account-sep { color: var(--vl-muted); margin: 0 4px; font-weight: 500; }
.vl-action--account:hover .vl-account-l1,
.vl-action--account:hover .vl-account-l2 { text-decoration: underline; }
.vl-account-hi { font-weight: 500; font-size: 12px; color: var(--vl-muted); margin-right: 4px; }
.vl-account-name { font-size: 15px; }

/* ---- Responsive de l'en-tête restructuré ---- */
@media (max-width: 860px) {
	.vl-header-top { min-height: 64px; gap: 12px; }
	.vl-search-wrap { flex-wrap: wrap; gap: 10px; }
	.vl-mpn { font-size: 13px; }
	/* sur mobile, le bloc identification reste icône seule (label masqué) */
	.vl-action--account { flex-direction: column; gap: 3px; }
}
@media (max-width: 560px) {
	.vl-search-btn { padding: 0 14px; }
	.vl-search-btn span { display: none; }
	.vl-mpn { font-size: 12.5px; }
}

/* =========================================================================
   v1.0.4 — En-tête agrandi, hamburger + tiroir catégories, hero blanc
   ========================================================================= */

/* ---- Textes & icônes d'en-tête plus grands ---- */
.vl-topbar { font-size: 13px; }
.vl-logo-text { font-size: 28px; }
.vl-action svg { width: 26px; height: 26px; }
.vl-action-label { font-size: 13px; }
.vl-account-text { font-size: 16px; }
.vl-account-name { font-size: 16px; }
.vl-account-hi { font-size: 13px; }
.vl-search-field { font-size: 16px; padding: 15px 18px; }
.vl-search-btn { font-size: 16px; padding: 0 26px; }
.vl-search-btn svg { width: 22px; height: 22px; }
.vl-mpn { font-size: 15px; }
.vl-mpn input[type="checkbox"] { width: 20px; height: 20px; }

/* ---- Ligne de recherche : hamburger + formulaire ---- */
.vl-header-search { display: flex; align-items: stretch; gap: 14px; padding-bottom: 18px; }
.vl-search-wrap { flex: 1; }

.vl-cat-toggle {
	display: inline-flex; align-items: center; gap: 11px;
	background: var(--vl-signal); color: var(--vl-ink); border: 0;
	border-radius: var(--vl-radius-s); padding: 0 22px; cursor: pointer;
	font-family: var(--vl-font-display); font-weight: 800; font-size: 16px;
	white-space: nowrap; transition: background .15s ease;
}
.vl-cat-toggle:hover { background: var(--vl-signal-d); }
.vl-cat-toggle-icon { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.vl-cat-toggle-icon span { height: 3px; background: currentColor; border-radius: 2px; display: block; }

/* ---- Tiroir des catégories ---- */
.vl-drawer-overlay {
	position: fixed; inset: 0; background: rgba(13,27,42,.5);
	opacity: 0; transition: opacity .25s ease; z-index: 300;
}
.vl-drawer-overlay.is-open { opacity: 1; }
body.vl-no-scroll { overflow: hidden; }

.vl-cat-drawer {
	position: fixed; top: 0; left: 0; height: 100%;
	width: 400px; max-width: 88vw; background: #fff; z-index: 320;
	transform: translateX(-100%); transition: transform .25s ease;
	box-shadow: var(--vl-shadow-l); display: flex; flex-direction: column;
}
.vl-cat-drawer.is-open { transform: translateX(0); }

.vl-drawer-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px; background: var(--vl-navy); color: #fff; flex: none;
}
.vl-drawer-title { font-family: var(--vl-font-display); font-weight: 800; font-size: 18px; }
.vl-drawer-close { background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; display: inline-flex; }
.vl-drawer-close:hover { color: var(--vl-signal); }

.vl-drawer-body { overflow-y: auto; flex: 1; padding: 6px 0 24px; }

.vl-cat-tree { list-style: none; margin: 0; padding: 0; }
.vl-cat-item { border-bottom: 1px solid var(--vl-mist-2); }
.vl-cat-tree .vl-cat-tree .vl-cat-item { border-bottom: 0; }
.vl-cat-row { display: flex; align-items: stretch; }
.vl-cat-tree-link {
	flex: 1; display: block; padding: 13px 20px;
	color: var(--vl-text); font-size: 15px; font-weight: 600; line-height: 1.3;
}
.vl-cat-tree-link:hover { background: var(--vl-mist); color: var(--vl-navy); }
.vl-cat-expand {
	background: none; border: 0; cursor: pointer; padding: 0 18px;
	display: inline-flex; align-items: center; justify-content: center;
}
.vl-chevron {
	width: 8px; height: 8px; display: inline-block;
	border-right: 2px solid var(--vl-muted); border-bottom: 2px solid var(--vl-muted);
	transform: rotate(-45deg); transition: transform .15s ease;
}
.vl-cat-expand:hover .vl-chevron { border-color: var(--vl-navy); }
.vl-cat-item.is-open > .vl-cat-row .vl-chevron { transform: rotate(45deg); }

/* Sous-niveaux masqués par défaut, révélés à l'ouverture */
.vl-cat-item > .vl-cat-tree { display: none; }
.vl-cat-item.is-open > .vl-cat-tree { display: block; }

/* Indentation progressive et fond légèrement teinté par niveau */
.vl-cat-tree.depth-1 { background: #fafbfc; }
.vl-cat-tree.depth-2 { background: #f4f7fa; }
.vl-cat-tree.depth-3 { background: #eef2f6; }
.vl-cat-tree.depth-1 > .vl-cat-item > .vl-cat-row .vl-cat-tree-link { padding-left: 36px; font-weight: 500; font-size: 14.5px; }
.vl-cat-tree.depth-2 > .vl-cat-item > .vl-cat-row .vl-cat-tree-link { padding-left: 54px; font-size: 14px; }
.vl-cat-tree.depth-3 > .vl-cat-item > .vl-cat-row .vl-cat-tree-link { padding-left: 72px; font-size: 13.5px; }

/* ---- Hero : fond blanc, texte foncé ---- */
.vl-hero { background: #fff; border-bottom: 1px solid var(--vl-line); }
.vl-hero::before {
	background-image:
		linear-gradient(rgba(13,27,42,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(13,27,42,.035) 1px, transparent 1px);
	opacity: 1;
}
.vl-hero-title { color: var(--vl-ink); }
.vl-hero-text { color: var(--vl-muted); }
.vl-hero-eyebrow { color: var(--vl-signal); }
.vl-spec-card { background: var(--vl-mist); border: 1px solid var(--vl-line); backdrop-filter: none; }
.vl-spec-row { border-bottom: 1px solid var(--vl-line); }
.vl-spec-row span { color: var(--vl-muted); }
.vl-spec-row strong { color: var(--vl-signal); }

/* ---- Responsive ---- */
@media (max-width: 860px) {
	.vl-logo-text { font-size: 24px; }
	.vl-header-search { gap: 10px; }
	.vl-cat-toggle { padding: 0 16px; font-size: 15px; }
}
@media (max-width: 560px) {
	.vl-cat-toggle-text { display: none; }
	.vl-cat-toggle { padding: 0 14px; }
	.vl-cat-drawer { width: 320px; }
}

/* =========================================================================
   v1.0.5 — Réglages mobile : burger haut-droite + case sous la recherche
   ========================================================================= */
@media (max-width: 860px) {
	/* On masque le bouton orange « Toutes les catégories » : sur mobile c'est
	   le burger (haut droite) qui ouvre le tiroir des catégories. */
	.vl-cat-toggle { display: none; }

	/* La recherche occupe toute la largeur, la case passe en dessous
	   pour laisser un maximum d'espace au champ de saisie. */
	.vl-header-search { gap: 0; }
	.vl-search-wrap { flex-wrap: wrap; row-gap: 10px; }
	.vl-search { flex: 1 1 100%; }
	.vl-mpn { width: 100%; }

	/* Le burger reste à droite, après les actions. */
	.vl-header-top { gap: 10px; }
	.vl-burger { margin-left: 2px; }
}

/* =========================================================================
   v1.0.6 — Barre supérieure : liens plus grands, alignés à gauche
            + burger à gauche en mobile (site FR)
   ========================================================================= */

/* Barre supérieure : textes plus grands et lisibles, alignés à gauche */
.vl-topbar { font-size: 14.5px; }
.vl-topbar-inner { justify-content: flex-start; min-height: 42px; }
.vl-topbar-menu { gap: 30px; }
.vl-topbar-menu a {
	color: #dbe4ee; font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
	padding: 4px 0; display: inline-block;
}
.vl-topbar-menu a:hover { color: #fff; }
/* Si un message est défini, il garde sa place à gauche, suivi des liens. */
.vl-topbar-msg { margin-right: 28px; }

/* Mobile : on garde les 3 liens visibles (au lieu de les masquer) */
@media (max-width: 560px) {
	.vl-topbar-nav { display: block; }
	.vl-topbar-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.vl-topbar-menu { gap: 18px; white-space: nowrap; }
	.vl-topbar-menu a { font-size: 13px; }
}

/* Mobile : le hamburger passe à gauche (lecture FR), actions à droite */
@media (max-width: 860px) {
	.vl-header-top { justify-content: flex-start; gap: 12px; }
	.vl-burger { order: -1; margin-left: 0; }
	.vl-branding { order: 0; }
	.vl-actions { order: 1; margin-left: auto; }
}

/* =========================================================================
   v1.0.7 — Barre haute : contact (email + tél) à droite ; mobile = contact seul
            + MPN à côté de la recherche (texte au-dessus, case en dessous)
   ========================================================================= */

/* Barre haute : liens à gauche, contact à droite */
.vl-topbar-inner { justify-content: space-between; }
.vl-topbar-left { display: flex; align-items: center; gap: 28px; min-width: 0; }
.vl-topbar-contact { display: flex; align-items: center; gap: 24px; flex: none; }
.vl-topbar-email, .vl-topbar-phone {
	display: inline-flex; align-items: center; gap: 7px;
	color: #dbe4ee; font-weight: 600; font-size: 14px; white-space: nowrap;
}
.vl-topbar-email:hover, .vl-topbar-phone:hover { color: #fff; }
.vl-topbar-email svg, .vl-topbar-phone svg { stroke: var(--vl-signal); flex: none; }

/* ---- Mobile : la barre haute n'affiche que le contact (email + tél) ---- */
@media (max-width: 860px) {
	.vl-topbar-inner { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.vl-topbar-left { display: none; }                 /* on masque les 3 liens */
	.vl-topbar-contact { gap: 18px; }
	.vl-topbar-email, .vl-topbar-phone { font-size: 13px; }

	/* ---- Recherche + MPN côte à côte ; texte au-dessus, case en dessous ---- */
	.vl-header-search { gap: 12px; }
	.vl-search-wrap { flex-wrap: nowrap; gap: 12px; align-items: center; }
	.vl-search { flex: 1 1 auto; }
	.vl-mpn {
		width: auto; flex: none;
		flex-direction: column-reverse;   /* libellé au-dessus, case en dessous */
		align-items: center; gap: 5px; text-align: center;
	}
	.vl-mpn-label { max-width: 88px; white-space: normal; line-height: 1.15; font-size: 11.5px; }
}

@media (max-width: 560px) {
	.vl-topbar-contact { gap: 14px; }
	.vl-topbar-email, .vl-topbar-phone { font-size: 12.5px; }
	.vl-mpn-label { max-width: 78px; font-size: 11px; }
}

/* =========================================================================
   v1.0.8 — Espacement PC + réglages mobile (bouton, Devis, coche)
   ========================================================================= */

/* ---- PC : plus d'espace horizontal entre éléments (style distributeur) ---- */
@media (min-width: 861px) {
	.vl-topbar-left { gap: 36px; }
	.vl-topbar-contact { gap: 32px; }
	.vl-header-top { gap: 44px; }
	.vl-actions { gap: 28px; }
	.vl-account-text { margin-right: 8px; }
	.vl-header-search { gap: 18px; }
	.vl-search-wrap { gap: 22px; }
}

/* ---- Coche « Références fabricant » fiable (PC + mobile) ---- */
.vl-mpn input[type="checkbox"] {
	display: inline-block; position: relative; place-content: initial;
	background: #fff; border: 2px solid var(--vl-navy);
}
.vl-mpn input[type="checkbox"]::before { content: none; }
.vl-mpn input[type="checkbox"]:checked {
	background: var(--vl-signal); border-color: var(--vl-signal);
}
.vl-mpn input[type="checkbox"]:checked::after {
	content: ""; position: absolute; left: 5px; top: 1px;
	width: 5px; height: 10px; box-sizing: border-box;
	border: solid #fff; border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

/* ---- Mobile : bouton de recherche plus compact + Devis masqué ---- */
@media (max-width: 860px) {
	.vl-action--quotes { display: none; }       /* on retire « Devis » */
	.vl-search-field { padding: 11px 14px; font-size: 15px; }
	.vl-search-btn { padding: 0 12px; }
	.vl-search-btn svg { width: 18px; height: 18px; }
}
@media (max-width: 560px) {
	.vl-search-btn { padding: 0 11px; }
	.vl-search-btn svg { width: 17px; height: 17px; }
}

/* =========================================================================
   v1.1.0 — Barre supérieure : fond personnalisable + affichage par appareil
   ========================================================================= */
/* La couleur de fond est appliquée en inline depuis le customizer
   (noir par défaut). Ci-dessous : la visibilité selon l'appareil. */
.vl-topbar--none { display: none !important; }

@media (max-width: 860px) {
	.vl-topbar--pc { display: none !important; }   /* masquée sur mobile */
}
@media (min-width: 861px) {
	.vl-topbar--mobile { display: none !important; } /* masquée sur PC */
}

/* =========================================================================
   v1.1.1 — Mobile : barre de recherche sur fond gris + champ affiné
   ========================================================================= */
@media (max-width: 860px) {
	/* Bande grise pleine largeur derrière la recherche */
	.vl-header-search {
		background: var(--vl-mist-2);
		margin-left: -20px;
		margin-right: -20px;
		padding: 12px 16px;
		gap: 12px;
		align-items: center;
	}
	/* Champ blanc, bord léger, coins arrondis (look épuré) */
	.vl-search {
		border: 1px solid var(--vl-line);
		border-radius: 6px;
		background: #fff;
	}
	.vl-search-field { background: #fff; border-radius: 6px 0 0 6px; }
	/* La case « Références fabricant » reste identique (coche orange) */
}
@media (max-width: 560px) {
	.vl-header-search { padding: 10px 14px; }
}

/* =========================================================================
   v1.1.2 — Mobile : bande grise pleine largeur fiable + hamburger à gauche
   ========================================================================= */
@media (max-width: 860px) {
	/* Pleine largeur robuste (corrige l'espace blanc à droite) */
	.vl-header-search {
		width: 100vw;
		position: relative;
		left: 50%;
		margin-left: -50vw;
		margin-right: 0;
		padding: 12px 20px;
	}

	/* Hamburger collé à gauche + plus d'espace avant le titre */
	.vl-header-top { gap: 18px; }
	.vl-burger { padding-left: 0; padding-right: 8px; }
}

/* =========================================================================
   v1.1.3 — Bande grise de la recherche sur TOUTES les tailles (PC inclus)
   ========================================================================= */
.vl-header-search {
	position: relative;
	width: auto; left: auto; margin-left: 0; margin-right: 0;
	background: var(--vl-mist-2);
	padding-left: 0; padding-right: 0;
	padding-top: 14px; padding-bottom: 14px;
}
/* Le gris s'étend jusqu'aux bords de l'écran, le contenu reste aligné */
.vl-header-search::before,
.vl-header-search::after {
	content: ""; position: absolute; top: 0; bottom: 0;
	width: 50vw; background: var(--vl-mist-2);
}
.vl-header-search::before { right: 100%; }
.vl-header-search::after  { left: 100%; }

/* =========================================================================
   v1.1.4 — « S'identifier / S'enregistrer » plus grands sur PC
   ========================================================================= */
@media (min-width: 861px) {
	.vl-account-text { font-size: 18px; }
	.vl-account-name { font-size: 18px; }
	.vl-account-hi { font-size: 13px; }
	.vl-account-sep { margin: 0 6px; }
	.vl-action--account svg { width: 30px; height: 30px; }
}

/* =========================================================================
   v1.1.5 — « Références fabricant » intégrée dans le cadre de recherche (PC)
   ========================================================================= */
@media (min-width: 861px) {
	/* Quand la case est cochée, le JS place .vl-mpn comme 1er enfant de .vl-search */
	.vl-search .vl-mpn {
		order: -1; flex: none;
		flex-direction: row; align-items: center; gap: 8px;
		margin: 0; padding: 0 14px;
		background: var(--vl-mist);
		border-right: 1px solid var(--vl-line);
		white-space: nowrap;
	}
	.vl-search .vl-mpn .vl-mpn-label {
		max-width: none; white-space: nowrap;
		font-size: 14px; line-height: 1; font-weight: 600;
	}
}

/* =========================================================================
   v1.1.7 — « Références fabricant » dans le cadre de recherche aussi sur mobile
   ========================================================================= */
@media (max-width: 860px) {
	.vl-search .vl-mpn {
		order: -1; flex: none;
		/* flex-direction column-reverse (libellé au-dessus) hérité du style mobile */
		margin: 0; padding: 6px 10px; gap: 4px;
		background: var(--vl-mist);
		border-right: 1px solid var(--vl-line);
	}
	.vl-search .vl-mpn .vl-mpn-label {
		max-width: 76px; white-space: normal; text-align: center;
		line-height: 1.1; font-size: 10.5px; font-weight: 600;
	}
	/* La barre de recherche occupe toute la largeur (la case est dedans) */
	.vl-search-wrap { flex-wrap: nowrap; }
	.vl-search { flex: 1 1 auto; }
}

/* =========================================================================
   v1.1.8 — Mobile : « Références fabricant » sur une seule ligne (case + texte)
   ========================================================================= */
@media (max-width: 860px) {
	.vl-search .vl-mpn {
		flex-direction: row;       /* case et libellé sur la même ligne */
		align-items: center;
		gap: 7px;
		padding: 0 10px;
	}
	.vl-search .vl-mpn .vl-mpn-label {
		max-width: none; white-space: nowrap;
		font-size: 12px; line-height: 1; font-weight: 600;
	}
	/* Case à cocher nette : carré arrondi, coche blanche sur fond orange */
	.vl-mpn input[type="checkbox"] { width: 18px; height: 18px; border-radius: 3px; }
	.vl-mpn input[type="checkbox"]:checked::after { left: 4px; top: 1px; width: 5px; height: 9px; }
}

/* =========================================================================
   v1.1.9 — Mobile : case en dessous, icônes compte/panier + grandes,
            hamburger plus petit et encadré
   ========================================================================= */
@media (max-width: 860px) {
	/* Case « Références fabricant » : libellé au-dessus, case en dessous */
	.vl-search .vl-mpn {
		flex-direction: column-reverse;
		align-items: center;
		gap: 4px;
		padding: 6px 10px;
	}
	.vl-search .vl-mpn .vl-mpn-label {
		max-width: 76px; white-space: normal; text-align: center;
		line-height: 1.1; font-size: 10.5px; font-weight: 600;
	}

	/* Icônes compte + panier plus grandes */
	.vl-action svg { width: 32px; height: 32px; }

	/* Hamburger plus petit et encadré */
	.vl-burger {
		border: 1px solid var(--vl-line);
		border-radius: 6px;
		background: #fff;
		padding: 7px 8px;
		gap: 4px;
	}
	.vl-burger span { width: 18px; height: 2px; }
}

/* =========================================================================
   v1.2.0 — Bouton recherche en gris clair (PC + mobile) + hamburger coins droits
   ========================================================================= */
/* Bouton « Rechercher » : même gris clair que le bloc « Références fabricant » */
.vl-search-btn {
	background: var(--vl-mist);
	color: var(--vl-ink);
	border-left: 1px solid var(--vl-line);
}
.vl-search-btn svg { stroke: var(--vl-ink); }
.vl-search-btn:hover { background: var(--vl-mist-2); color: var(--vl-ink); }

/* Mobile : cadre du hamburger à coins droits (carré, plus pro) */
@media (max-width: 860px) {
	.vl-burger { border-radius: 0; padding: 9px 8px; }
}

/* =========================================================================
   v1.2.2 — Mobile : libellé MPN sur une ligne | PC : barre haute + grande,
            liens soulignés, plus d'espacement
   ========================================================================= */
/* Mobile : « Références fabricant » sur une seule ligne, case en dessous */
@media (max-width: 860px) {
	.vl-search .vl-mpn .vl-mpn-label {
		max-width: none; white-space: nowrap; font-size: 11px;
	}
}

/* PC : barre supérieure plus grande, 3 liens soulignés, plus d'espace */
@media (min-width: 861px) {
	.vl-topbar-inner { min-height: 48px; }
	.vl-topbar-menu { gap: 50px; }
	.vl-topbar-menu a {
		font-size: 16px; font-weight: 600;
		text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
	}
	.vl-topbar-email, .vl-topbar-phone { font-size: 16px; }
	.vl-topbar-contact { gap: 36px; }
	.vl-topbar-left { gap: 44px; }
}

/* =========================================================================
   v1.2.3 — Bouton recherche : loupe seule (sans le texte) sur PC aussi
   ========================================================================= */
.vl-search-btn span { display: none; }
.vl-search-btn { padding: 0 18px; }

/* =========================================================================
   v1.2.4 — Centrage vertical (logo + icônes) + coche lisible sur jaune
   ========================================================================= */
/* Tout le contenu de l'en-tête centré verticalement */
.vl-header-top { align-items: center; }
.vl-actions    { align-items: center; }

/* Logo image : pas d'écart de ligne de base (sinon il paraît trop haut) */
.vl-branding .custom-logo-link {
	display: inline-flex; align-items: center; line-height: 0; margin: 0;
}
.vl-branding .custom-logo,
.vl-branding img { display: block; vertical-align: middle; }
.vl-logo { display: inline-flex; align-items: center; }

/* Icônes (compte, panier, devis) centrées sans décalage de base */
.vl-action svg,
.vl-cart-icon svg { display: block; }

/* Coche foncée pour rester lisible sur le fond jaune */
.vl-mpn input[type="checkbox"]:checked::after { border-color: var(--vl-ink); }

/* =========================================================================
   v1.2.5 — Mobile : libellés masqués (dont « Panier »), logo aligné au
            hamburger + plus d'espace entre eux
   ========================================================================= */
@media (max-width: 860px) {
	/* Retire les textes sous les icônes (Panier, Devis, Compte) */
	.vl-actions .vl-action-label { display: none !important; }

	/* Logo et hamburger parfaitement centrés à la même hauteur */
	.vl-header-top { align-items: center; gap: 20px; }
	.vl-branding,
	.vl-burger { align-self: center; }
	.vl-branding { display: inline-flex; align-items: center; }
	.vl-branding .custom-logo-link { display: inline-flex; align-items: center; line-height: 0; }
	.vl-branding .custom-logo,
	.vl-branding img { display: block; margin: 0; }

	/* Un peu plus d'air entre le hamburger et le logo */
	.vl-branding { margin-left: 4px; }
}

/* =========================================================================
   v1.2.6 — PC : retirer le texte « Panier » sous l'icône (icône alignée)
   ========================================================================= */
@media (min-width: 861px) {
	.vl-cart .vl-action-label { visibility: hidden; }
}

/* =========================================================================
   v1.2.7 — PC : icône panier recentrée verticalement + plus grande
   ========================================================================= */
@media (min-width: 861px) {
	.vl-cart .vl-action-label { display: none; }      /* plus d'espace réservé -> icône centrée */
	.vl-cart { justify-content: center; }
	.vl-cart .vl-cart-icon svg { width: 34px; height: 34px; }
}

/* =========================================================================
   v1.2.8 — PC : espacement des liens de la barre haute réduit
   ========================================================================= */
@media (min-width: 861px) {
	.vl-topbar-menu { gap: 32px; }
}

/* =========================================================================
   v1.2.9 — Icônes compte + panier en gras (trait plus épais) — PC & mobile
   ========================================================================= */
.vl-action--account svg,
.vl-cart .vl-cart-icon svg {
	stroke-width: 2.6;
}

/* =========================================================================
   v1.3.0 — PC : icône compte plus grande | Mobile : bordure hamburger + épaisse
   ========================================================================= */
@media (min-width: 861px) {
	.vl-action--account svg { width: 34px; height: 34px; }
}
@media (max-width: 860px) {
	.vl-burger { border-width: 2px; border-color: #b3bdc7; }
}

/* =========================================================================
   v1.3.1 — « Devis » placé avant le compte
   ========================================================================= */
.vl-action--quotes { order: -1; }

/* =========================================================================
   v1.3.2 — Pied de page sur 4 colonnes (Contact / Services / Légal / À propos)
   ========================================================================= */
.vl-footer-cols { grid-template-columns: repeat(4, 1fr); gap: 32px; }

/* Colonne contact : plusieurs sous-titres empilés */
.vl-footer-contact .footer-widget-title { margin-top: 22px; margin-bottom: 12px; }
.vl-footer-contact > .footer-widget-title:first-child { margin-top: 0; }
.vl-foot-phone { margin: 0 0 6px; }
.vl-foot-phone a { color: #fff; font-weight: 700; font-size: 17px; }
.vl-foot-phone a:hover { color: var(--vl-signal); }
.vl-foot-note { display: block; color: #93a3b3; font-size: 12px; margin-top: 2px; }
.vl-foot-mail { margin: 0; }
.vl-foot-mail a { color: #b9c6d3; font-size: 14px; }
.vl-foot-mail a:hover { color: var(--vl-signal); }
.vl-footer-contact .vl-pay { flex-wrap: wrap; gap: 8px; }

/* Responsive : 2 colonnes sur tablette, 1 sur mobile */
@media (max-width: 1024px) { .vl-footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .vl-footer-cols { grid-template-columns: 1fr; gap: 26px; } }

/* =========================================================================
   v1.3.3 — Mobile : pied de page sur 2 colonnes (plus compact, moins long)
   ========================================================================= */
@media (max-width: 600px) {
	.vl-footer-cols { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
	.footer-widget-title { font-size: 13px; margin-bottom: 10px; }
	.vl-footer-list li { margin-bottom: 7px; }
	.vl-footer-list a, .vl-footer-col a { font-size: 13px; line-height: 1.3; }
	.vl-footer-contact .footer-widget-title { margin-top: 18px; }
	.vl-foot-phone a { font-size: 15px; }
	.vl-footer-contact .vl-pay { gap: 6px; }
	.vl-pay-chip { font-size: 10px; padding: 4px 7px; }
}

/* =========================================================================
   v1.3.5 — Mobile : bordure du hamburger en noir (comme l'icône)
   ========================================================================= */
@media (max-width: 860px) {
	.vl-burger { border-color: var(--vl-ink); }
}

/* =========================================================================
   v1.3.6 — Mobile : barre de recherche encadrée (bordure plus épaisse, comme PC)
   ========================================================================= */
@media (max-width: 860px) {
	.vl-search {
		border: 2px solid var(--vl-navy);
		border-radius: 6px;
	}
}

/* =========================================================================
   v1.3.7 — Pied de page pro : fond graphite + accents jaunes, icônes paiement,
            téléphone en texte normal
   ========================================================================= */
/* Fond sombre professionnel, assorti au gris du logo */
.vl-footer-main { background: #1b1f27; color: #aeb7c2; }
.vl-footer-bottom { background: #14171d; color: #8893a0; }

/* Titres blancs avec petit accent jaune (rappel du logo) */
.footer-widget-title,
.vl-footer-col .footer-widget-title {
	color: #ffffff; position: relative;
	padding-bottom: 10px; margin-bottom: 16px;
}
.footer-widget-title::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 26px; height: 3px; border-radius: 2px;
	background: var(--vl-signal);
}

/* Liens : gris clair -> jaune au survol */
.vl-footer-list a, .vl-footer-col a { color: #aeb7c2; }
.vl-footer-list a:hover, .vl-footer-col a:hover { color: var(--vl-signal); }

/* Téléphone : texte de contact normal (ce n'est PAS un titre) */
.vl-foot-phone a { color: #d7dde4; font-weight: 500; font-size: 15px; }
.vl-foot-phone a:hover { color: var(--vl-signal); }
.vl-foot-mail a { color: #aeb7c2; font-size: 14px; }

/* Icônes de paiement réelles (colorées) */
.vl-pay { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vl-pay-ico { display: inline-flex; line-height: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.vl-pay-ico svg { display: block; height: 28px; width: auto; }

/* =========================================================================
   v1.3.9 — Barre de copyright (bas du footer) en jaune, comme la newsletter
   ========================================================================= */
.vl-footer-bottom { background: var(--vl-signal); color: var(--vl-ink); }
.vl-footer-bottom .vl-copy { color: var(--vl-ink); font-weight: 500; }

/* =========================================================================
   v1.4.0 — Footer : icônes téléphone/email (jaunes) + réseaux sociaux en couleurs
   ========================================================================= */
/* Téléphone + email avec icône jaune */
.vl-foot-phone a, .vl-foot-mail a { display: inline-flex; align-items: center; gap: 8px; }
.vl-foot-ico { width: 16px; height: 16px; flex: none; color: var(--vl-signal); }

/* Réseaux sociaux : badges aux couleurs des marques */
.vl-social { display: flex; gap: 10px; flex-wrap: wrap; }
.vl-social .vl-soc {
	width: 34px; height: 34px; border: 0; border-radius: 8px;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff; transition: transform .12s ease, filter .12s ease;
}
.vl-social .vl-soc svg { width: 18px; height: 18px; display: block; }
.vl-social .vl-soc:hover { transform: translateY(-2px); filter: brightness(1.08); border: 0; color: #fff; }
.vl-social .vl-soc--fb { background: #1877F2; }
.vl-social .vl-soc--ig { background: #E4405F; }
.vl-social .vl-soc--yt { background: #FF0000; }
.vl-social .vl-soc--in { background: #0A66C2; }

/* =========================================================================
   v1.4.1 — Mobile : structure footer = sections empilées pleine largeur,
            listes de liens sur 2 colonnes (contact en premier, pleine largeur)
   ========================================================================= */
@media (max-width: 600px) {
	/* Chaque section occupe toute la largeur, empilée : Contact, Services, Légal, À propos */
	.vl-footer-cols { grid-template-columns: 1fr; gap: 30px; }

	/* Les liens d'une section se répartissent sur 2 colonnes */
	.vl-footer-list { columns: 2; column-gap: 22px; }
	.vl-footer-list li { break-inside: avoid; margin-bottom: 9px; }

	/* La colonne contact reste sur une seule colonne (infos + réseaux + paiement) */
	.vl-footer-contact { columns: 1; }
}

/* =========================================================================
   v1.4.2 — Footer : suppression du souligné (accent) sous les titres
   ========================================================================= */
.footer-widget-title::after { content: none; }
.footer-widget-title,
.vl-footer-col .footer-widget-title { padding-bottom: 0; margin-bottom: 14px; }

/* =========================================================================
   v1.4.3 — Bas du footer : retour au fond foncé + copyright centré sur mobile
   ========================================================================= */
.vl-footer-bottom { background: #14171d; color: #8893a0; }
.vl-footer-bottom .vl-copy { color: #8893a0; font-weight: 400; }

@media (max-width: 600px) {
	.vl-footer-bottom-inner { justify-content: center; text-align: center; }
}

/* =========================================================================
   v1.4.4 — Footer : téléphone de la même couleur que l'email
   ========================================================================= */
.vl-foot-phone a { color: #aeb7c2; }

/* =========================================================================
   v1.4.5 — Footer : titres et textes un peu plus grands (PC + mobile)
   ========================================================================= */
.footer-widget-title,
.vl-footer-col .footer-widget-title { font-size: 16.5px; }
.vl-footer-list a, .vl-footer-col a { font-size: 15px; }
.vl-foot-phone a { font-size: 15.5px; }
.vl-foot-mail a { font-size: 15px; }

@media (max-width: 600px) {
	.footer-widget-title { font-size: 14.5px; }
	.vl-footer-list a, .vl-footer-col a { font-size: 14px; }
	.vl-foot-phone a, .vl-foot-mail a { font-size: 14.5px; }
}

/* =========================================================================
   v1.4.6 — Footer : tout un peu plus grand + contenu sous les titres décalé à droite
   ========================================================================= */
.footer-widget-title,
.vl-footer-col .footer-widget-title { font-size: 17.5px; }
.vl-footer-list a, .vl-footer-col a { font-size: 16px; }
.vl-foot-phone a, .vl-foot-mail a { font-size: 16px; }

/* Décalage léger du contenu situé sous les titres (les titres restent à gauche) */
.vl-footer-list { padding-left: 14px; }
.vl-foot-phone, .vl-foot-mail, .vl-social, .vl-pay { margin-left: 14px; }

@media (max-width: 600px) {
	.footer-widget-title { font-size: 15.5px; }
	.vl-footer-list a, .vl-footer-col a { font-size: 15px; }
	.vl-foot-phone a, .vl-foot-mail a { font-size: 15px; }
	.vl-footer-list { padding-left: 12px; }
	.vl-foot-phone, .vl-foot-mail, .vl-social, .vl-pay { margin-left: 12px; }
}

/* =========================================================================
   v1.4.7 — Bas du footer : texte du copyright un peu plus grand
   ========================================================================= */
.vl-footer-bottom .vl-copy { font-size: 14.5px; }
@media (max-width: 600px) { .vl-footer-bottom .vl-copy { font-size: 13.5px; } }

/* =========================================================================
   v1.4.8 — Copyright : même taille agrandie sur mobile
   ========================================================================= */
@media (max-width: 600px) { .vl-footer-bottom .vl-copy { font-size: 14.5px; } }

/* =========================================================================
   v1.4.9 — Footer : icônes contact en badges ronds (comme réseaux),
            réseaux ronds, ensemble un peu plus petit, contact même taille PC=mobile
   ========================================================================= */
/* Badges téléphone + email : ronds, jaunes, glyphe foncé — taille identique PC et mobile */
.vl-foot-badge {
	width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--vl-signal); color: var(--vl-ink);
	display: inline-flex; align-items: center; justify-content: center;
}
.vl-foot-badge svg { width: 15px; height: 15px; display: block; }
.vl-foot-phone a, .vl-foot-mail a { gap: 10px; }

/* Réseaux sociaux : ronds et un peu plus petits */
.vl-social { gap: 8px; }
.vl-social .vl-soc { width: 30px; height: 30px; border-radius: 50%; }
.vl-social .vl-soc svg { width: 16px; height: 16px; }

/* =========================================================================
   v1.5.0 — « Acheter par catégorie » : nom à gauche, petite photo à droite,
            bouton « Afficher N sous-catégories » + liste dépliable
   ========================================================================= */
.vl-section .vl-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.vl-cat-card { text-align: left; align-items: stretch; padding: 16px 18px; }
.vl-cat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; width: 100%; }
.vl-cat-main { flex: 1 1 auto; min-width: 0; }
.vl-cat-name { font-size: 17px; margin: 0 0 8px; line-height: 1.25; }
.vl-cat-name a { color: var(--vl-ink); text-decoration: none; }
.vl-cat-name a:hover { color: var(--vl-teal); }
.vl-cat-thumb { width: 56px; height: 56px; margin: 0; flex: none; }
.vl-cat-img { max-height: 56px; }
.vl-cat-ph { width: 52px; height: 52px; }
.vl-subcat-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 0; cursor: pointer;
	color: var(--vl-teal); font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.vl-subcat-toggle .vl-cat-chev { transition: transform .25s ease; }
.vl-subcat-toggle[aria-expanded="true"] .vl-cat-chev { transform: rotate(180deg); }
.vl-cat-browse { font-size: 13.5px; color: var(--vl-teal); text-decoration: none; font-weight: 600; }
.vl-cat-subs { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.vl-cat-subs li a { display: block; padding: 10px 2px; border-top: 1px solid var(--vl-line); color: var(--vl-navy); text-decoration: none; font-size: 14px; }
.vl-cat-subs li:first-child a { padding-top: 14px; }
.vl-cat-subs a:hover { color: var(--vl-teal); }
@media (max-width: 768px) { .vl-section .vl-cat-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   v1.5.2 — Titres footer sans majuscules + sous-catégories en liens soulignés
   ========================================================================= */
.footer-widget-title,
.vl-footer-col .footer-widget-title { text-transform: none; letter-spacing: normal; }

.vl-cat-subs li a { text-decoration: underline; text-underline-offset: 2px; }
.vl-cat-subs li a:hover { text-decoration: underline; }

/* =========================================================================
   v1.5.3 — Catégories par ligne réglable + en-tête de page catégorie
   ========================================================================= */
.vl-section .vl-cat-grid { grid-template-columns: repeat(var(--vl-cats-per-row, 4), 1fr); }
@media (max-width: 1024px) { .vl-section .vl-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vl-section .vl-cat-grid { grid-template-columns: 1fr; } }

/* En-tête de page catégorie : fil d'Ariane + grand titre */
.vl-cat-header { margin: 0 0 20px; }
.vl-cat-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; color: var(--vl-muted); margin-bottom: 8px; }
.vl-cat-crumb a { display: inline-flex; align-items: center; color: var(--vl-navy); text-decoration: none; }
.vl-cat-crumb a:hover { color: var(--vl-teal); }
.vl-crumb-home svg { display: block; }
.vl-crumb-sep { color: var(--vl-line); }
.vl-crumb-current { color: var(--vl-ink); font-weight: 600; }
.vl-cat-title { font-size: 30px; line-height: 1.15; margin: 0; color: var(--vl-ink); }

/* Section des sous-catégories sur l'archive (avant les produits) */
.vl-cat-subsection { padding: 4px 0 24px; }
.vl-cat-subsection .vl-section-head h2 { font-size: 18px; margin: 0 0 14px; }

/* =========================================================================
   v1.5.4 — Archives boutique : filtres à gauche, produits à droite,
            barre d'outils (produits/page) + pagination pro
   ========================================================================= */
.vl-shop-wrap.vl-has-filters { display: grid; grid-template-columns: 250px 1fr; gap: 28px; align-items: start; }
.vl-shop-main { min-width: 0; }

/* Colonne de filtres */
.vl-filters { background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius); padding: 18px 16px; position: sticky; top: 16px; }
.vl-filters-title { font-size: 18px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--vl-line); color: var(--vl-ink); }
.vl-filter-search { display: flex; border: 1px solid var(--vl-line); border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.vl-filter-search input { flex: 1 1 auto; border: 0; padding: 9px 10px; font-size: 14px; min-width: 0; background: #fff; }
.vl-filter-search input:focus { outline: none; }
.vl-filter-search button { border: 0; background: var(--vl-mist); color: var(--vl-ink); padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; }
.vl-filter-search button:hover { background: var(--vl-mist-2); }
.vl-filter-group { margin-bottom: 18px; }
.vl-filter-heading { font-size: 14px; margin: 0 0 10px; color: var(--vl-ink); text-transform: none; letter-spacing: normal; }
.vl-filter-opt { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; color: var(--vl-navy); cursor: pointer; }
.vl-filter-opt input { width: 16px; height: 16px; accent-color: var(--vl-signal); flex: none; }
.vl-filter-actions { display: flex; align-items: center; gap: 14px; }
.vl-filter-apply { background: var(--vl-ink); color: #fff; border: 0; border-radius: 6px; padding: 9px 18px; font-weight: 600; cursor: pointer; font-size: 14px; }
.vl-filter-apply:hover { background: #111827; }
.vl-filter-clear { font-size: 13px; color: var(--vl-muted); text-decoration: underline; }
.vl-filter-clear:hover { color: var(--vl-ink); }

/* Barre d'outils (compteur, tri, produits par page) */
.vl-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.vl-perpage-label { font-size: 13px; color: var(--vl-muted); display: inline-flex; align-items: center; gap: 6px; }
.vl-perpage select { padding: 6px 8px; border: 1px solid var(--vl-line); border-radius: 6px; font-size: 13px; background: #fff; }

/* Ligne « N produits présentés pour … » */
.vl-cat-count-line { font-size: 14px; color: var(--vl-muted); margin: 8px 0 0; }
.vl-cat-count-line strong { color: var(--vl-ink); }

/* Pagination numérotée pro */
.woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 30px 0 0; border: 0; }
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.woocommerce-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 11px; border: 1px solid var(--vl-line); border-radius: 6px; color: var(--vl-navy); text-decoration: none; font-size: 14px; background: #fff; }
.woocommerce-pagination .page-numbers.current { background: var(--vl-ink); color: #fff; border-color: var(--vl-ink); font-weight: 700; }
.woocommerce-pagination a.page-numbers:hover { border-color: var(--vl-navy); color: var(--vl-ink); }
.woocommerce-pagination .page-numbers.dots { border: 0; background: transparent; min-width: 20px; }

@media (max-width: 900px) {
	.vl-shop-wrap.vl-has-filters { grid-template-columns: 1fr; gap: 18px; }
	.vl-filters { position: static; }
}

/* =========================================================================
   v1.5.7 — Colonne de filtres TOUJOURS à gauche, produits à droite
   ========================================================================= */
.vl-woo-container .vl-shop-wrap.vl-has-filters {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 28px;
	align-items: start;
}
.vl-shop-wrap.vl-has-filters .vl-filters { order: 0; }
.vl-shop-wrap.vl-has-filters .vl-shop-main { order: 0; }
@media (max-width: 900px) {
	.vl-woo-container .vl-shop-wrap.vl-has-filters { grid-template-columns: 1fr; }
}

/* =========================================================================
   v1.5.9 — Produits 3 par ligne (colonne de droite, alignés à gauche)
   ========================================================================= */
@media (min-width: 901px) {
	.vl-shop-main ul.products,
	.vl-shop-main.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); justify-content: start; }
}

/* =========================================================================
   v1.6.0 — Compteur dans la barre d'outils + produits 3/ligne collés à gauche
   ========================================================================= */
/* Compteur « N produits présentés pour … » à gauche du tri, plus petit */
.vl-shop-count { font-size: 13px; color: var(--vl-muted); margin: 0; }

/* Produits : 3 par ligne, alignés à gauche, près de la colonne de filtres */
@media (min-width: 901px) {
	.vl-woo-container .vl-shop-main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		justify-content: start;
		justify-items: stretch;
	}
}

/* =========================================================================
   v1.6.1 — Grille produits strictement de gauche à droite (LTR), jamais centrée
   ========================================================================= */
.vl-woo-container .vl-shop-main ul.products,
.vl-woo-container .vl-shop-main ul.products[class*="columns-"] {
	display: grid !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-items: start !important;
	direction: ltr !important;
	text-align: left;
	margin: 0 !important;
	width: 100%;
}
.vl-woo-container .vl-shop-main ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
@media (min-width: 901px) {
	.vl-woo-container .vl-shop-main ul.products,
	.vl-woo-container .vl-shop-main ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 900px) {
	.vl-woo-container .vl-shop-main ul.products,
	.vl-woo-container .vl-shop-main ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 520px) {
	.vl-woo-container .vl-shop-main ul.products,
	.vl-woo-container .vl-shop-main ul.products[class*="columns-"] {
		grid-template-columns: 1fr !important;
	}
}

/* =========================================================================
   v1.6.2 — TOUTES les grilles produits (accueil + boutique) : gauche → droite
   ========================================================================= */
.woocommerce ul.products,
.woocommerce ul.products[class*="columns-"],
.woocommerce-page ul.products {
	display: grid !important;
	justify-content: start !important;
	justify-items: stretch !important;
	align-items: start !important;
	direction: ltr !important;
	text-align: left;
}
.woocommerce ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}

/* =========================================================================
   v1.6.3 — Forcer la largeur des colonnes produits (sinon WooCommerce décale)
   ========================================================================= */
@media (min-width: 901px) {
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
	.woocommerce ul.products,
	.woocommerce ul.products[class*="columns-"] { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   v1.6.4 — Grille produits maison (accueil) : gauche → droite, contrôlée
   ========================================================================= */
.vl-prod-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
	justify-content: start;
	direction: ltr;
}
.vl-prod-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--vl-line); border-radius: var(--vl-radius);
	overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vl-prod-card:hover { border-color: var(--vl-navy); box-shadow: var(--vl-shadow); transform: translateY(-2px); }
.vl-prod-media { display: block; padding: 16px; }
.vl-prod-media img, .vl-prod-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.vl-prod-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.vl-prod-title { font-size: 14px; line-height: 1.35; margin: 0; font-weight: 600; }
.vl-prod-title a { color: var(--vl-ink); text-decoration: none; }
.vl-prod-title a:hover { color: var(--vl-teal); }
.vl-prod-price { font-size: 16px; font-weight: 700; color: var(--vl-ink); margin-top: auto; }
.vl-prod-btn { display: inline-block; text-align: center; background: var(--vl-ink); color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 6px; font-weight: 600; font-size: 13.5px; }
.vl-prod-btn:hover { background: #111827; color: #fff; }
.vl-empty { color: var(--vl-muted); }
@media (max-width: 1024px) { .vl-prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .vl-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .vl-prod-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   v1.6.5 — Grille produits maison sur les archives (catégorie/boutique)
   ========================================================================= */
@media (min-width: 901px) {
	.vl-prod-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   v1.6.6 — Hero : grande barre de recherche + accès rapides catégories
   ========================================================================= */
.vl-hero-search {
	display: flex; max-width: 580px; margin: 4px 0 20px;
	border: 2px solid var(--vl-ink); border-radius: 10px; overflow: hidden; background: #fff;
}
.vl-hero-search input {
	flex: 1 1 auto; min-width: 0; border: 0; padding: 14px 16px; font-size: 16px; background: #fff; color: var(--vl-ink);
}
.vl-hero-search input:focus { outline: none; }
.vl-hero-search button {
	border: 0; background: var(--vl-signal); color: var(--vl-ink); padding: 0 22px; cursor: pointer;
	font-family: var(--vl-font-display); font-weight: 800; font-size: 15px;
	display: inline-flex; align-items: center; gap: 8px; transition: background .15s ease;
}
.vl-hero-search button:hover { background: var(--vl-signal-d); }
.vl-hero-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vl-hero-quick-label { font-size: 13px; color: var(--vl-muted); font-weight: 700; }
.vl-hero-chip {
	display: inline-block; padding: 6px 13px; border: 1px solid var(--vl-line); border-radius: 999px;
	font-size: 13px; color: var(--vl-navy); text-decoration: none; background: #fff; transition: border-color .15s ease, color .15s ease;
}
.vl-hero-chip:hover { border-color: var(--vl-ink); color: var(--vl-ink); }
@media (max-width: 600px) {
	.vl-hero-search { max-width: 100%; }
	.vl-hero-search button span { display: none; }
	.vl-hero-search button { padding: 0 16px; }
}

/* =========================================================================
   v1.6.7 — Section 3 bannières promo (accueil)
   ========================================================================= */
.vl-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vl-promo {
	position: relative; display: flex; align-items: flex-end; min-height: 210px;
	border-radius: var(--vl-radius); overflow: hidden; text-decoration: none;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	background-color: var(--vl-mist-2);
}
.vl-promo--1 { background-image: linear-gradient(135deg, #374151, #1f2937); }
.vl-promo--2 { background-image: linear-gradient(135deg, #0b7285, #155e63); }
.vl-promo--3 { background-image: linear-gradient(135deg, #d9a81c, #a87d12); }
.vl-promo.has-img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(17,20,29,.78), rgba(17,20,29,.15) 55%, rgba(17,20,29,0) 80%);
}
.vl-promo-overlay { position: relative; z-index: 1; padding: 22px; display: block; }
.vl-promo-title { display: block; font-family: var(--vl-font-display); font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.vl-promo-text { display: block; font-size: 13.5px; color: rgba(255,255,255,.88); margin-bottom: 12px; max-width: 34ch; }
.vl-promo-cta { display: inline-block; font-size: 13px; font-weight: 800; color: var(--vl-signal); letter-spacing: .02em; }
.vl-promo:hover .vl-promo-cta { text-decoration: underline; }
.vl-promo:hover { box-shadow: var(--vl-shadow); }
@media (max-width: 900px) { .vl-promos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vl-promos { grid-template-columns: 1fr; } }

/* =========================================================================
   v1.6.8 — 3 bannières en hero d'accueil (1 grande à gauche + 2 à droite)
   ========================================================================= */
.vl-promos-top { padding-top: 28px; }
@media (min-width: 901px) {
	.vl-promos--hero { grid-template-columns: 2fr 1fr; grid-template-rows: 215px 215px; }
	.vl-promos--hero .vl-promo { min-height: 0; }
	.vl-promos--hero .vl-promo--1 { grid-column: 1; grid-row: 1 / span 2; }
	.vl-promos--hero .vl-promo--2 { grid-column: 2; grid-row: 1; }
	.vl-promos--hero .vl-promo--3 { grid-column: 2; grid-row: 2; }
	.vl-promos--hero .vl-promo--1 .vl-promo-title { font-size: 28px; }
	.vl-promos--hero .vl-promo--1 .vl-promo-text { font-size: 15px; max-width: 40ch; }
}
@media (max-width: 900px) { .vl-promos--hero { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vl-promos--hero { grid-template-columns: 1fr; } }

/* =========================================================================
   v1.6.9 — Titres de section centrés et un peu plus grands (style RS)
   ========================================================================= */
.vl-section-head { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.vl-section-head h2 { font-size: 32px; }
@media (max-width: 600px) { .vl-section-head h2 { font-size: 25px; } }

/* =========================================================================
   v1.7.0 — Bannière publicitaire (accueil), fond blanc de section
   ========================================================================= */
.vl-adbanner {
	position: relative; display: flex; align-items: center; min-height: 210px;
	border-radius: var(--vl-radius); overflow: hidden; text-decoration: none;
	background: linear-gradient(135deg, var(--vl-navy), var(--vl-ink));
	background-size: cover; background-position: center; background-repeat: no-repeat;
	padding: 34px 40px;
}
.vl-adbanner.has-img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(17,20,29,.78), rgba(17,20,29,.30) 70%, rgba(17,20,29,.12));
}
.vl-adbanner-inner { position: relative; z-index: 1; max-width: 580px; }
.vl-adbanner-title { display: block; font-family: var(--vl-font-display); font-size: 27px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.vl-adbanner-text { display: block; font-size: 15px; color: rgba(255,255,255,.9); margin-bottom: 18px; }
.vl-adbanner-cta { display: inline-block; background: var(--vl-signal); color: var(--vl-ink); font-family: var(--vl-font-display); font-weight: 800; padding: 11px 22px; border-radius: 8px; font-size: 14px; }
.vl-adbanner:hover .vl-adbanner-cta { background: var(--vl-signal-d); }
@media (max-width: 600px) {
	.vl-adbanner { padding: 26px 22px; min-height: 180px; }
	.vl-adbanner-title { font-size: 22px; }
}

/* =========================================================================
   v1.7.1 — Cartes produit style distributeur : réf, quantité +/−, panier jaune
   ========================================================================= */
.vl-prod-sku { font-size: 12px; color: var(--vl-muted); margin: -2px 0 4px; }
.vl-prod-cart { display: flex; align-items: stretch; gap: 8px; margin-top: auto; }
.vl-qty { display: inline-flex; align-items: stretch; border: 1px solid var(--vl-line); border-radius: 6px; overflow: hidden; flex: none; }
.vl-qty-btn { width: 30px; border: 0; background: var(--vl-mist); color: var(--vl-ink); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vl-qty-btn:hover { background: var(--vl-mist-2); }
.vl-qty-input {
	width: 42px; border: 0; border-left: 1px solid var(--vl-line); border-right: 1px solid var(--vl-line);
	text-align: center; font-size: 14px; color: var(--vl-ink); -moz-appearance: textfield; appearance: textfield;
}
.vl-qty-input:focus { outline: none; }
.vl-qty-input::-webkit-outer-spin-button, .vl-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vl-prod-addcart {
	flex: 1 1 auto; min-width: 0; border: 0; cursor: pointer;
	background: var(--vl-signal); color: var(--vl-ink);
	font-family: var(--vl-font-display); font-weight: 800; font-size: 13px;
	padding: 9px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vl-prod-addcart:hover { background: var(--vl-signal-d); color: var(--vl-ink); }
.vl-prod-view { background: var(--vl-ink); color: #fff; }
.vl-prod-view:hover { background: #111827; color: #fff; }

/* =========================================================================
   v1.7.2 — Bannière sponsorisée + marques (logos couleur, plus grands)
   ========================================================================= */
.vl-sponsor-section { padding-top: 10px; padding-bottom: 10px; }
.vl-sponsor { display: block; border-radius: var(--vl-radius); overflow: hidden; line-height: 0; }
.vl-sponsor img { display: block; width: 100%; height: auto; }
.vl-sponsor--empty {
	display: flex; align-items: center; justify-content: center; min-height: 90px;
	border: 1px dashed var(--vl-line); border-radius: var(--vl-radius); background: var(--vl-mist);
	color: var(--vl-muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}

/* Marques plus grandes + logos en couleur */
.vl-brands-row--logos { gap: 40px; align-items: center; }
.vl-brand-logo { display: inline-flex; align-items: center; opacity: 1; }
.vl-brand-logo img { height: 56px; width: auto; max-width: 170px; object-fit: contain; display: block; filter: none; }
.vl-brand-chip { font-size: 17px; padding: 10px 20px; }
@media (max-width: 600px) {
	.vl-brands-row--logos { gap: 26px; }
	.vl-brand-logo img { height: 42px; max-width: 130px; }
}

/* =========================================================================
   v1.7.3 — Cartes produit : coins droits + quantité au-dessus du bouton panier
   ========================================================================= */
.vl-prod-card { border-radius: 0; }
.vl-prod-cart { flex-direction: column; align-items: stretch; gap: 8px; }
.vl-qty { width: 100%; border-radius: 0; }
.vl-qty-btn { border-radius: 0; width: 40px; }
.vl-qty-input { flex: 1 1 auto; width: auto; }
.vl-prod-btn, .vl-prod-addcart, .vl-prod-view { border-radius: 0; }
.vl-prod-addcart { width: 100%; }

/* =========================================================================
   v1.7.3b — En-têtes alignés à gauche + « Notre sélection » (carrousel 5/page)
   ========================================================================= */
.vl-section-head--left { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; gap: 16px; }
.vl-section-head--left h2 { font-size: 28px; }

/* Outils à droite : « Sponsorisé » + nav − / + */
.vl-sel-tools { display: flex; align-items: center; gap: 14px; flex: none; }
.vl-sel-sponsored { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--vl-muted); font-weight: 700; }
.vl-sel-nav { display: inline-flex; gap: 8px; }
.vl-sel-btn {
	width: 38px; height: 38px; border: 1px solid var(--vl-line); background: #fff; color: var(--vl-ink);
	font-size: 20px; line-height: 1; cursor: pointer; border-radius: 0; display: inline-flex; align-items: center; justify-content: center;
}
.vl-sel-btn:hover { background: var(--vl-signal); border-color: var(--vl-signal); }

/* Piste : 5 produits visibles, défilement par page de 5 */
.vl-sel-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--vl-sel-cols, 5) - 1) * 16px) / var(--vl-sel-cols, 5)); gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding-bottom: 6px; -ms-overflow-style: none; scrollbar-width: thin;
}
.vl-sel-track > .vl-prod-card { scroll-snap-align: start; }
@media (max-width: 1024px) { .vl-sel-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 768px)  { .vl-sel-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 560px)  { .vl-sel-track { grid-auto-columns: calc((100% - 14px) / 2); gap: 14px; } }

/* =========================================================================
   v1.7.4 — Bannière sponsorisée plus compacte + lien sous les marques
   ========================================================================= */
.vl-sponsor-section { padding-top: 6px; padding-bottom: 6px; }
.vl-sponsor img { max-height: 96px; object-fit: cover; }
.vl-brands-cta { text-align: center; margin-top: 18px; }
.vl-brands-cta .vl-link { font-size: 14px; font-weight: 700; }

/* =========================================================================
   v1.7.5 — Coins droits partout + marques sur fond gris + visuels promo
   ========================================================================= */
/* Éléments à rayon codé en dur → coins droits (on garde les ronds : icônes sociales, etc.) */
.vl-btn, .vl-prod-btn, .vl-prod-addcart, .vl-prod-view, .vl-adbanner-cta,
.vl-brand-chip, .vl-qty, .vl-sel-btn,
.vl-filter-search, .vl-filter-apply, .vl-perpage select,
.woocommerce-pagination .page-numbers, .vl-promo, .vl-adbanner, .vl-sponsor img,
.vl-cat-card, .vl-prod-card {
	border-radius: 0 !important;
}
/* Section marques : fond gris (au lieu de blanc) */
.vl-brands { background: var(--vl-mist); }

/* =========================================================================
   v1.7.6 — Bannières promo : carte avec photo à gauche, trait, contenu à droite
   ========================================================================= */
.vl-promos--split { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vl-promos--split .vl-promo {
	display: flex; align-items: stretch; min-height: 190px;
	background: #fff; border: 1px solid var(--vl-line); border-radius: 0;
	overflow: hidden; padding: 0;
}
/* annule les anciens styles d'overlay */
.vl-promos--split .vl-promo::after { display: none; content: none; }
.vl-promos--split .vl-promo-img {
	flex: 0 0 42%; align-self: stretch; min-height: 100%;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	border-right: 1px solid var(--vl-line); /* le trait séparateur */
	text-decoration: none;
}
.vl-promos--split .vl-promo-body {
	flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start;
	gap: 8px; padding: 18px 16px; text-align: left;
}
.vl-promos--split .vl-promo-title { margin: 0; font-family: var(--vl-font-display); font-size: 18px; font-weight: 800; color: var(--vl-ink); }
.vl-promos--split .vl-promo-text { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--vl-muted); flex: 1 1 auto; }
.vl-promos--split .vl-promo-btn {
	margin-top: 6px; display: inline-block; background: var(--vl-signal); color: var(--vl-ink);
	font-family: var(--vl-font-display); font-weight: 800; font-size: 13px; padding: 9px 18px;
	border-radius: 0; text-decoration: none;
}
.vl-promos--split .vl-promo-btn:hover { background: var(--vl-signal-d); color: var(--vl-ink); }
@media (max-width: 980px) { .vl-promos--split { grid-template-columns: 1fr; } .vl-promos--split .vl-promo { min-height: 170px; } }

/* =========================================================================
   v1.7.7 — Promo : 1 grande carte à gauche + 2 à droite (structure conservée)
   ========================================================================= */
@media (min-width: 981px) {
	.vl-promos--split { grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(205px, 1fr); }
	.vl-promos--split .vl-promo--1 { grid-column: 1; grid-row: 1 / span 2; }
	.vl-promos--split .vl-promo--2 { grid-column: 2; grid-row: 1; }
	.vl-promos--split .vl-promo--3 { grid-column: 2; grid-row: 2; }
	.vl-promos--split .vl-promo--1 .vl-promo-title { font-size: 24px; }
	.vl-promos--split .vl-promo--1 .vl-promo-text { font-size: 15px; }
	.vl-promos--split .vl-promo--1 .vl-promo-img { flex-basis: 46%; }
}

/* =========================================================================
   v1.7.8 — Promo : 2 cartes droite inversées (contenu gauche/photo droite)
            + grande carte au contenu centré verticalement
   ========================================================================= */
/* Promotions + Grandes marques : contenu à gauche, photo à droite */
.vl-promos--split .vl-promo--2, .vl-promos--split .vl-promo--3 { flex-direction: row-reverse; }
.vl-promos--split .vl-promo--2 .vl-promo-img,
.vl-promos--split .vl-promo--3 .vl-promo-img { border-right: 0; border-left: 1px solid var(--vl-line); }

/* Nouveautés (grande carte) : titre + texte + bouton groupés au centre */
.vl-promos--split .vl-promo--1 .vl-promo-body { justify-content: center; }
.vl-promos--split .vl-promo--1 .vl-promo-text { flex: 0 0 auto; }
.vl-promos--split .vl-promo--1 .vl-promo-btn { margin-top: 14px; }

/* =========================================================================
   v1.7.9 — Promo : cartes droite plus larges, hauteur réduite, empilage mobile
   ========================================================================= */
@media (min-width: 981px) {
	.vl-promos--split { grid-template-columns: 1.1fr 1fr; grid-auto-rows: minmax(176px, 1fr); }
	.vl-promos--split .vl-promo--1 .vl-promo-img { flex-basis: 44%; }
	.vl-promos--split .vl-promo--2 .vl-promo-img,
	.vl-promos--split .vl-promo--3 .vl-promo-img { flex-basis: 40%; }
}
.vl-promos--split .vl-promo { min-height: 158px; }
.vl-promos--split .vl-promo-body { padding: 16px 18px; }

/* Mobile : chaque carte empilée — photo en haut, puis titre, texte, bouton */
@media (max-width: 980px) {
	.vl-promos--split { grid-template-columns: 1fr; gap: 14px; }
	.vl-promos--split .vl-promo,
	.vl-promos--split .vl-promo--2,
	.vl-promos--split .vl-promo--3 { flex-direction: column; min-height: 0; }
	.vl-promos--split .vl-promo-img {
		flex: 0 0 auto !important; width: 100%; height: 170px;
		border-right: 0; border-left: 0; border-bottom: 1px solid var(--vl-line);
	}
	.vl-promos--split .vl-promo--1 .vl-promo-body { justify-content: flex-start; }
	.vl-promos--split .vl-promo--1 .vl-promo-text { flex: 0 0 auto; }
}

/* =========================================================================
   v1.8.0 — Promo : zone titre/texte/bouton sur fond jaune (logo) + fix mobile
   ========================================================================= */
/* Fond jaune Magelec derrière titre + texte + bouton */
.vl-promos--split .vl-promo-body { background: var(--vl-signal); }
.vl-promos--split .vl-promo-title { color: var(--vl-ink); }
.vl-promos--split .vl-promo-text  { color: var(--vl-navy-700); }
/* bouton foncé pour contraster sur le jaune */
.vl-promos--split .vl-promo-btn { background: var(--vl-ink); color: #fff; }
.vl-promos--split .vl-promo-btn:hover { background: #111827; color: #fff; }

/* Mobile : la photo masquait le contenu (min-height:100% héritée) — corrigé */
@media (max-width: 980px) {
	.vl-promos--split .vl-promo-img { min-height: 0 !important; height: 170px; align-self: auto; }
	.vl-promos--split .vl-promo-body { flex: 1 1 auto; }
}

/* =========================================================================
   v1.8.1 — Nouveautés : séparateur en diagonale (décalé à droite) + contenu centré
   ========================================================================= */
@media (min-width: 981px) {
	/* fond jaune sur toute la carte pour un séparateur diagonal net */
	.vl-promos--split .vl-promo--1 { background: var(--vl-signal); }
	.vl-promos--split .vl-promo--1 .vl-promo-img {
		flex-basis: 52%; border: 0;
		-webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
	}
	/* titre + texte + bouton centrés dans leur zone */
	.vl-promos--split .vl-promo--1 .vl-promo-body { align-items: center; text-align: center; padding-left: 26px; }
}

/* =========================================================================
   v1.8.2 — Séparateur diagonal pour Promotions + Grandes marques + mobile
   ========================================================================= */
@media (min-width: 981px) {
	/* photo à droite : bord gauche en diagonale, fond carte jaune */
	.vl-promos--split .vl-promo--2,
	.vl-promos--split .vl-promo--3 { background: var(--vl-signal); }
	.vl-promos--split .vl-promo--2 .vl-promo-img,
	.vl-promos--split .vl-promo--3 .vl-promo-img {
		flex-basis: 44%; border: 0;
		-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
	}
}

/* Mobile : photo en haut, bord bas en diagonale pour les 3 cartes */
@media (max-width: 980px) {
	.vl-promos--split .vl-promo,
	.vl-promos--split .vl-promo--1,
	.vl-promos--split .vl-promo--2,
	.vl-promos--split .vl-promo--3 { background: var(--vl-signal); }
	.vl-promos--split .vl-promo-img {
		border: 0;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
		clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
	}
}

/* =========================================================================
   v1.8.3 — Promotions + Grandes marques : contenu groupé et centré verticalement
            (toujours aligné à gauche)
   ========================================================================= */
.vl-promos--split .vl-promo--2 .vl-promo-body,
.vl-promos--split .vl-promo--3 .vl-promo-body { justify-content: center; }
.vl-promos--split .vl-promo--2 .vl-promo-text,
.vl-promos--split .vl-promo--3 .vl-promo-text { flex: 0 0 auto; }
.vl-promos--split .vl-promo--2 .vl-promo-btn,
.vl-promos--split .vl-promo--3 .vl-promo-btn { margin-top: 12px; }

/* =========================================================================
   v1.8.4 — « Acheter par catégorie » : titre un peu plus grand (lien retiré)
   ========================================================================= */
.vl-section-head--cats h2 { font-size: 38px; }
@media (max-width: 600px) { .vl-section-head--cats h2 { font-size: 28px; } }

/* =========================================================================
   v1.8.5 — Typographie : Oswald (titres) + Noto Sans (textes, contenu, boutons)
   ========================================================================= */
/* Boutons & éléments interactifs → Noto Sans */
.vl-btn, .vl-prod-btn, .vl-prod-addcart, .vl-prod-view, .vl-promo-btn,
.vl-adbanner-cta, .vl-sel-btn, .vl-qty-btn, .vl-newsletter-form button,
.vl-filter-apply, .vl-filter-clear,
.woocommerce a.button, .woocommerce button.button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce ul.products li.product .button,
input, select, textarea, button {
	font-family: var(--vl-font-body) !important;
}
/* Navigation, libellés, prix, badges → Noto Sans */
.vl-nav, .vl-nav a, .vl-menu-item, .vl-menu-item a,
.vl-topbar, .vl-topbar a, .vl-topbar-menu a, .vl-topbar-email, .vl-topbar-phone,
.vl-logo-text, .vl-link, .vl-part-no, .vl-prod-sku, .vl-prod-price,
.vl-spec-row strong, .vl-pay-chip, .vl-brand-chip, .vl-sel-sponsored, .vl-shop-count,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price,
.woocommerce span.onsale {
	font-family: var(--vl-font-body) !important;
}
/* Titres → Oswald (réaffirmé) */
h1, h2, h3, h4, h5,
.vl-section-head h2, .vl-promo-title, .vl-adbanner-title,
.vl-cat-title, .vl-drawer-title, .woocommerce div.product .product_title {
	font-family: var(--vl-font-display);
}

/* =========================================================================
   v1.8.6 — Disposition : Nouveautés en grand + slider (flèches, défil. par slide)
   ========================================================================= */
.vl-promos--slider { display: block; }
.vl-promos--slider .vl-promo--hero { width: 100%; }
@media (min-width: 981px) {
	.vl-promos--slider .vl-promo--hero { min-height: 320px; }
}

.vl-pslider { position: relative; margin-top: 16px; }
.vl-pslide-track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 2); gap: 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.vl-pslide-track::-webkit-scrollbar { display: none; }
.vl-pslide-track > .vl-promo--slide { scroll-snap-align: start; min-height: 210px; }

.vl-pslide-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
	width: 42px; height: 42px; border: 1px solid var(--vl-line); background: #fff; color: var(--vl-ink);
	font-size: 26px; line-height: 1; cursor: pointer; border-radius: 0;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--vl-shadow);
}
.vl-pslide-arrow:hover { background: var(--vl-signal); border-color: var(--vl-signal); }
.vl-pslide-prev { left: 8px; }
.vl-pslide-next { right: 8px; }

/* Slides : photo à droite, diagonale, contenu à gauche centré */
@media (min-width: 981px) {
	.vl-promos--split .vl-promo--slide { background: var(--vl-signal); flex-direction: row-reverse; }
	.vl-promos--split .vl-promo--slide .vl-promo-img {
		flex-basis: 44%; border: 0;
		-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
		clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
	}
	.vl-promos--split .vl-promo--slide .vl-promo-body { justify-content: center; }
	.vl-promos--split .vl-promo--slide .vl-promo-text { flex: 0 0 auto; }
}
@media (max-width: 980px) {
	.vl-pslide-track { grid-auto-columns: 100%; }
}

/* =========================================================================
   v1.8.7 — Flèches du slider placées dans les marges (sans masquer le contenu)
   ========================================================================= */
.vl-pslider { padding: 0 50px; }
.vl-pslide-prev { left: 0; }
.vl-pslide-next { right: 0; }
@media (max-width: 980px) {
	.vl-pslider { padding: 0; }
	.vl-pslide-arrow { top: 85px; }
	.vl-pslide-prev { left: 6px; }
	.vl-pslide-next { right: 6px; }
}

/* =========================================================================
   v1.8.8 — Slider plein écran : 1 promo visible à la fois (Nouveautés d'abord)
   ========================================================================= */
.vl-promos--single .vl-pslider { margin-top: 0; }
.vl-promos--single .vl-pslide-track { grid-auto-columns: 100%; }
.vl-promos--single .vl-pslide-track > .vl-promo { scroll-snap-align: start; }
@media (min-width: 981px) {
	.vl-promos--single .vl-pslide-track > .vl-promo { min-height: 320px; }
}

/* =========================================================================
   v1.8.9 — Slider : hauteur réduite (bannière pleine largeur, moins haute)
   ========================================================================= */
@media (min-width: 981px) {
	.vl-promos--single .vl-pslide-track > .vl-promo { min-height: 230px; }
	.vl-promos--single .vl-promo-body { padding-top: 14px; padding-bottom: 14px; }
}

/* =========================================================================
   v1.9.0 — Slider : pleine largeur, flèches intégrées (overlay), 1 slide, bas
   ========================================================================= */
.vl-promos--single .vl-pslider { padding: 0; margin-top: 0; }
.vl-promos--single .vl-pslide-track {
	display: flex; gap: 0; overflow-x: auto;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.vl-promos--single .vl-pslide-track > .vl-promo {
	flex: 0 0 100%; width: 100%; scroll-snap-align: start;
}
@media (min-width: 981px) {
	.vl-promos--single .vl-pslide-track > .vl-promo { min-height: 188px; }
	.vl-promos--single .vl-promo-body { padding-top: 12px; padding-bottom: 12px; }
}
/* flèches intégrées dans le cadre (overlay), comme sur mobile */
.vl-promos--single .vl-pslide-arrow {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 40px; height: 40px; border: 0; border-radius: 0;
	background: rgba(17,20,29,.55); color: #fff; box-shadow: none; z-index: 5;
	font-size: 24px;
}
.vl-promos--single .vl-pslide-arrow:hover { background: var(--vl-ink); }
.vl-promos--single .vl-pslide-prev { left: 12px; right: auto; }
.vl-promos--single .vl-pslide-next { right: 12px; left: auto; }
@media (max-width: 980px) {
	.vl-promos--single .vl-pslide-arrow { top: 85px; }
}

/* =========================================================================
   v1.9.1 — Slider : hauteur augmentée (bannière un peu plus haute)
   ========================================================================= */
@media (min-width: 981px) {
	.vl-promos--single .vl-pslide-track > .vl-promo { min-height: 290px; }
	.vl-promos--single .vl-promo-body { padding-top: 18px; padding-bottom: 18px; }
}

/* =========================================================================
   v1.9.3 — « Notre sélection » remontée (fond gris) + trait de séparation
   ========================================================================= */
.vl-section--sep { border-top: 1px solid var(--vl-line); }

/* =========================================================================
   v1.9.4 — Slider un peu plus haut + section marques sur fond blanc
   ========================================================================= */
@media (min-width: 981px) {
	.vl-promos--single .vl-pslide-track > .vl-promo { min-height: 345px; }
}
.vl-brands { background: #fff; }

/* =========================================================================
   v1.9.5 — « Offre du moment » : moins d'espace vertical + sponsorisé moins large
   ========================================================================= */
.vl-adbanner-section { padding-top: 14px; padding-bottom: 14px; }
.vl-sponsor { max-width: 728px; margin-left: auto; margin-right: auto; }

/* =========================================================================
   v1.9.6 — Bannière sponsorisée : pleine largeur (hors section marques)
   ========================================================================= */
.vl-sponsor { max-width: 100%; margin-left: 0; margin-right: 0; }

/* =========================================================================
   v1.9.7 — Catégories : barre d'outils (liste déroulante + pagination)
            + correctif bouton « + » quantité coupé sur mobile
   ========================================================================= */
/* Correctif : l'input de quantité ne doit pas pousser le « + » hors du cadre */
.vl-qty-input { min-width: 0; }
.vl-qty { min-width: 0; }

/* Barre d'outils des catégories */
.vl-cat-toolbar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-bottom: 20px;
}
.vl-cat-select {
	font-family: var(--vl-font-body); font-size: 14px; color: var(--vl-ink);
	padding: 10px 14px; border: 1px solid var(--vl-line); background: #fff; border-radius: 0;
	min-width: 230px; max-width: 100%;
}
.vl-cat-pager { display: inline-flex; align-items: center; gap: 10px; }
.vl-cat-pageinfo { font-size: 13px; color: var(--vl-muted); min-width: 46px; text-align: center; }
.vl-cat-btn {
	width: 38px; height: 38px; border: 1px solid var(--vl-line); background: #fff; color: var(--vl-ink);
	font-size: 20px; line-height: 1; cursor: pointer; border-radius: 0;
	display: inline-flex; align-items: center; justify-content: center;
}
.vl-cat-btn:hover:not(:disabled) { background: var(--vl-signal); border-color: var(--vl-signal); }
.vl-cat-btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 600px) {
	.vl-cat-toolbar { gap: 10px; }
	.vl-cat-select { min-width: 0; flex: 1 1 auto; }
}

/* =========================================================================
   v1.9.8 — Barre catégories (pager seul, aligné à droite) — sélection côté admin
   ========================================================================= */
.vl-cat-toolbar--pager { justify-content: flex-end; }

/* =========================================================================
   v1.9.9 — Bouton produit : icône panier + « Ajouter » + page panier corrigée
   ========================================================================= */
.vl-prod-addcart { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.vl-prod-addcart .vl-cart-svg { flex: none; }
.vl-woo-page { display: block; }

/* =========================================================================
   v2.0.0 — Templates page.php / single.php (panier, commande, compte, pages)
   ========================================================================= */
.vl-page-container { padding-top: 40px; padding-bottom: 56px; }
.vl-page-head { margin-bottom: 22px; }
.vl-page-content { line-height: 1.7; color: var(--vl-ink); }
.vl-page-content > * + * { margin-top: 1em; }
.vl-single-thumb { margin: 0 0 22px; }
.vl-single-thumb img { width: 100%; height: auto; display: block; }
.vl-page-links { margin-top: 18px; }

/* =========================================================================
   v2.0.1 — Titres de catégories : graisse normale (pas en gras)
   ========================================================================= */
.vl-cat-name, .vl-cat-name a { font-weight: 500; }

/* =========================================================================
   v2.0.2 — Promos : grille (grande gauche + 2 droite) sur PC, slider sur mobile
   ========================================================================= */
.vl-promos--pcgrid { display: none; }              /* masquée par défaut (mobile) */
@media (min-width: 981px) {
	.vl-promos--single { display: none; }          /* slider masqué sur PC */
	.vl-promos--pcgrid {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		grid-template-rows: auto auto;
		gap: 16px;
	}
	.vl-promos--pcgrid .vl-promo--1 { grid-column: 1; grid-row: 1 / span 2; min-height: 320px; }
	.vl-promos--pcgrid .vl-promo--2 { grid-column: 2; grid-row: 1; min-height: 152px; }
	.vl-promos--pcgrid .vl-promo--3 { grid-column: 2; grid-row: 2; min-height: 152px; }
}

/* =========================================================================
   v2.0.3 — Mobile : hamburger + cadre plus petits, pager catégories centré
   ========================================================================= */
@media (max-width: 560px) {
	.vl-cat-toggle { padding: 0 10px; height: 36px; align-self: center; }
	.vl-cat-toggle-icon { width: 18px; gap: 3px; }
	.vl-cat-toggle-icon span { height: 2.5px; }
	.vl-burger { padding: 6px; gap: 4px; }
	.vl-burger span { width: 20px; height: 2px; }
}
@media (max-width: 768px) {
	.vl-cat-toolbar--pager { justify-content: center; }
}

/* =========================================================================
   v2.0.4 — Panier + commande : mise en page mobile propre (empilée)
   ========================================================================= */
@media (max-width: 768px) {
	/* --- Panier : on empile chaque ligne en carte (au lieu du scroll horizontal) --- */
	.woocommerce table.cart,
	.woocommerce .woocommerce-cart-form { overflow-x: visible; display: block; }
	.woocommerce-cart table.cart thead { display: none; }
	.woocommerce-cart table.cart tbody { display: block; }
	.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item {
		display: block; position: relative;
		border: 1px solid var(--vl-line); margin: 0 0 14px; padding: 6px 12px;
	}
	.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td {
		display: flex; align-items: center; justify-content: space-between; gap: 12px;
		width: auto; text-align: right; padding: 10px 0; border: 0;
		border-bottom: 1px solid var(--vl-line);
	}
	.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td:last-child { border-bottom: 0; }
	.woocommerce-cart table.cart tbody td::before {
		content: attr(data-title); font-weight: 600; color: var(--vl-muted);
		text-align: left; white-space: nowrap;
	}
	.woocommerce-cart table.cart td.product-thumbnail { justify-content: flex-start; }
	.woocommerce-cart table.cart td.product-thumbnail::before { content: ""; }
	.woocommerce-cart table.cart td.product-thumbnail img { width: 64px; height: auto; }
	.woocommerce-cart table.cart td.product-remove { position: absolute; top: 4px; right: 6px; padding: 0; border: 0; }
	.woocommerce-cart table.cart td.product-remove::before { content: ""; }
	.woocommerce-cart table.cart td.product-quantity .quantity .qty { width: 72px; }

	/* Ligne d'actions (coupon + mettre à jour) */
	.woocommerce-cart table.cart td.actions { display: block; text-align: left; border: 0; padding: 4px 0; }
	.woocommerce-cart table.cart td.actions .coupon { display: flex; gap: 8px; margin-bottom: 10px; }
	.woocommerce-cart table.cart td.actions .coupon .input-text {
		flex: 1 1 auto; min-width: 0; width: auto;
	}
	.woocommerce-cart table.cart td.actions > button[name="update_cart"] { width: 100%; }

	/* Totaux + bouton commander en pleine largeur */
	.woocommerce-cart .cart-collaterals,
	.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; }

	/* --- Commande : colonnes empilées --- */
	.woocommerce .col2-set .col-1,
	.woocommerce .col2-set .col-2,
	.woocommerce-page .col2-set .col-1,
	.woocommerce-page .col2-set .col-2 { width: 100%; float: none; }
	.woocommerce form.checkout #customer_details { display: block; }
	.woocommerce .checkout .form-row-first,
	.woocommerce .checkout .form-row-last,
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last { width: 100%; float: none; margin: 0 0 12px; }
	#order_review, #order_review_heading { width: 100%; float: none; }
	.woocommerce #payment .form-row { width: 100%; }
	.woocommerce-checkout #payment div.payment_box { margin-left: 0; }
}

/* =========================================================================
   v2.0.5 — Panier/commande : contenu pleinement responsive sur mobile
   ========================================================================= */
@media (max-width: 768px) {
	/* Sécurité largeur du contenu */
	.vl-page-content, .vl-page-main, .vl-woo-page,
	.woocommerce, .woocommerce-page { max-width: 100%; }
	.vl-page-content img, .vl-woo-page img,
	.woocommerce img, .woocommerce-page img { max-width: 100%; height: auto; }

	/* Champs de formulaire : pleine largeur, sans débordement */
	.woocommerce form .form-row,
	.woocommerce-page form .form-row { width: 100%; box-sizing: border-box; }
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.woocommerce-page form .form-row input.input-text,
	.woocommerce-page form .form-row textarea,
	.woocommerce-page form .form-row select {
		width: 100%; max-width: 100%; box-sizing: border-box;
	}
	.select2-container { width: 100% !important; max-width: 100%; }

	/* Tables de totaux (panier + commande) en pleine largeur */
	.woocommerce .cart_totals,
	.woocommerce .cart_totals table.shop_table,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout #order_review table.shop_table { width: 100%; max-width: 100%; }
	.woocommerce .cart_totals table.shop_table th,
	.woocommerce .cart_totals table.shop_table td,
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td { padding: 10px 8px; word-break: break-word; }

	/* Boutons en pleine largeur */
	.woocommerce #place_order,
	.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; text-align: center; }

	/* --- Version « blocs » WooCommerce (Cart/Checkout blocks) : empiler --- */
	.wc-block-cart, .wc-block-checkout,
	.wc-block-components-sidebar-layout { display: block; }
	.wc-block-cart__main, .wc-block-cart__sidebar,
	.wc-block-checkout__main, .wc-block-checkout__sidebar {
		width: 100%; max-width: 100%; float: none;
		padding-left: 0; padding-right: 0;
	}
	.wc-block-components-text-input input,
	.wc-block-components-address-form input,
	.wc-block-components-address-form select { max-width: 100%; box-sizing: border-box; }
}

/* =========================================================================
   v2.0.6 — Commande : champs en pleine largeur sur mobile (override correct)
   ========================================================================= */
@media (max-width: 768px) {
	/* Commande classique : prénom/nom et autres demi-champs en pleine largeur */
	.woocommerce form .form-row.form-row-first,
	.woocommerce form .form-row.form-row-last,
	.woocommerce-page form .form-row.form-row-first,
	.woocommerce-page form .form-row.form-row-last,
	.woocommerce .checkout .form-row.form-row-first,
	.woocommerce .checkout .form-row.form-row-last {
		width: 100% !important; float: none !important; margin-right: 0 !important; clear: both;
	}
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.woocommerce-page form .form-row input.input-text { width: 100% !important; box-sizing: border-box; }

	/* Commande en blocs : champs d'adresse sur une seule colonne */
	.wc-block-components-address-form,
	.wc-block-checkout__billing-fields .wc-block-components-address-form,
	.wc-block-checkout__shipping-fields .wc-block-components-address-form { display: block !important; }
	.wc-block-components-address-form > * { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* =========================================================================
   v2.0.7 — Commande en blocs : grille des champs forcée sur 1 colonne (mobile)
   ========================================================================= */
@media (max-width: 768px) {
	/* Empiler les deux colonnes (formulaire + récapitulatif) */
	.wc-block-checkout .wc-block-components-sidebar-layout,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex !important; flex-direction: column !important;
	}
	.wc-block-checkout__main, .wc-block-checkout__sidebar {
		width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important;
	}
	/* Grille des champs d'adresse / contact : une seule colonne */
	.wc-block-components-address-form,
	.wc-block-checkout__contact-fields .wc-block-components-address-form,
	.wc-block-checkout__billing-fields .wc-block-components-address-form,
	.wc-block-checkout__shipping-fields .wc-block-components-address-form {
		display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important;
	}
	.wc-block-components-address-form > * {
		grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important;
	}
	.wc-block-components-text-input, .wc-block-components-select,
	.wc-block-components-text-input input, .wc-block-components-select select,
	.wc-block-components-combobox, .wc-block-components-combobox input {
		width: 100% !important; max-width: 100% !important; box-sizing: border-box;
	}
}

/* =========================================================================
   v2.1.0 — Notification d'ajout au panier (toast) + quantité +/- page produit
   ========================================================================= */
.vl-cart-toast {
	position: fixed; z-index: 9999; left: 50%; bottom: 24px;
	transform: translate(-50%, 20px);
	display: flex; align-items: center; gap: 12px;
	background: var(--vl-ink); color: #fff; padding: 13px 18px;
	box-shadow: 0 10px 30px rgba(0,0,0,.28);
	opacity: 0; visibility: hidden;
	transition: opacity .25s ease, transform .25s ease, visibility .25s;
	max-width: calc(100% - 32px); font-family: var(--vl-font-body); font-size: 14px;
}
.vl-cart-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.vl-toast-check {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; flex: none;
	background: var(--vl-signal); color: var(--vl-ink); font-weight: 700;
}
.vl-toast-link { color: var(--vl-signal); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.vl-toast-link:hover { color: #fff; }
.vl-prod-addcart.is-loading { opacity: .7; cursor: progress; }

/* Page produit : champ quantité avec boutons +/- */
.woocommerce .quantity.vl-qty-enhanced {
	display: inline-flex; align-items: stretch; vertical-align: middle;
	border: 1px solid var(--vl-line);
}
.woocommerce .quantity.vl-qty-enhanced input.qty {
	width: 54px; text-align: center; margin: 0; border: 0; border-radius: 0;
	border-left: 1px solid var(--vl-line); border-right: 1px solid var(--vl-line);
	-moz-appearance: textfield;
}
.woocommerce .quantity.vl-qty-enhanced input.qty::-webkit-outer-spin-button,
.woocommerce .quantity.vl-qty-enhanced input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vl-wq-btn {
	width: 42px; border: 0; cursor: pointer; line-height: 1; font-size: 18px;
	background: var(--vl-mist); color: var(--vl-ink); font-family: var(--vl-font-body);
}
.vl-wq-btn:hover { background: var(--vl-signal); }

/* =========================================================================
   v2.1.1 — Promos : corps en blanc (au lieu du jaune)
            + page produit : quantité +/- alignée avec le bouton « Ajouter »
   ========================================================================= */
/* Fond blanc pour les cartes promo (corps + zones diagonales) */
.vl-promos--split .vl-promo-body,
.vl-promos--split .vl-promo,
.vl-promos--split .vl-promo--1,
.vl-promos--split .vl-promo--2,
.vl-promos--split .vl-promo--3,
.vl-promos--split .vl-promo--slide { background: #fff; }

/* Page produit : même hauteur pour la quantité (+/-) et le bouton */
.woocommerce div.product form.cart .quantity.vl-qty-enhanced { height: 48px; vertical-align: middle; }
.woocommerce div.product form.cart .quantity.vl-qty-enhanced input.qty,
.woocommerce div.product form.cart .vl-wq-btn { height: 48px; }
.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 48px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
	display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}

/* =========================================================================
   v2.1.2 — Hamburger (mobile) : cadre carré (même hauteur/largeur) et plus petit
   ========================================================================= */
@media (max-width: 560px) {
	.vl-cat-toggle {
		width: 34px; height: 34px; padding: 0;
		justify-content: center; align-self: center;
	}
	.vl-cat-toggle-icon { width: 16px; gap: 3px; }
	.vl-cat-toggle-icon span { height: 2px; }
}

/* =========================================================================
   v2.1.3 — Notification panier : disposition en ligne (corrige l'effet vertical)
   ========================================================================= */
.vl-cart-toast { flex-wrap: nowrap; }
.vl-toast-check { flex: 0 0 auto; }
.vl-toast-msg { flex: 1 1 auto; min-width: 0; }
.vl-toast-link { flex: 0 0 auto; }
@media (max-width: 560px) {
	.vl-cart-toast {
		left: 16px; right: 16px; bottom: 16px;
		max-width: none; transform: translateY(20px);
	}
	.vl-cart-toast.is-visible { transform: translateY(0); }
}

/* =========================================================================
   v2.3.1 — Catégories (mobile) : pager SOUS les cartes + boutons aux extrémités
   ========================================================================= */
@media (max-width: 768px) {
	.vl-cat-browser .vl-container { display: flex; flex-direction: column; }
	.vl-cat-browser .vl-section-head--cats { order: 1; }
	.vl-cat-browser .vl-cat-grid { order: 2; }
	.vl-cat-browser .vl-cat-toolbar--pager { order: 3; margin: 16px 0 0; }
	.vl-cat-browser .vl-cat-pager { width: 100%; justify-content: space-between; }
}

/* =========================================================================
   v2.5.0 — Bouton « Demander un devis » + fenêtre modale + mode catalogue
   ========================================================================= */
/* Bouton devis (cartes + fiche) */
.vl-prod-quote {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--vl-ink); color: #fff; border: 0; cursor: pointer;
	font-family: var(--vl-font-body); font-weight: 700; font-size: 14px;
	padding: 10px 16px; border-radius: 0; text-decoration: none; width: 100%;
}
.vl-prod-quote:hover { background: #000; color: #fff; }
.vl-single-quote-wrap { margin-top: 12px; }
.vl-single-quote { width: auto; min-width: 220px; padding: 13px 22px; font-size: 15px; }

/* Modale */
.vl-quote-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.vl-quote-modal.is-open { display: block; }
.vl-quote-overlay { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); }
.vl-quote-dialog {
	position: relative; max-width: 540px; width: calc(100% - 32px);
	margin: 6vh auto 0; background: #fff; border: 1px solid var(--vl-line);
	padding: 26px 26px 22px; box-shadow: 0 20px 60px rgba(17, 24, 39, 0.25);
	max-height: 88vh; overflow-y: auto;
}
.vl-quote-x {
	position: absolute; top: 10px; right: 12px; background: none; border: 0;
	font-size: 26px; line-height: 1; cursor: pointer; color: var(--vl-muted);
}
.vl-quote-x:hover { color: var(--vl-ink); }
.vl-quote-title { margin: 0 0 2px; font-family: var(--vl-font-display); font-size: 22px; color: var(--vl-ink); }
.vl-quote-product { margin: 0 0 16px; font-weight: 700; color: var(--vl-signal-d); font-size: 14px; }
.vl-quote-form label { display: block; font-size: 13px; font-weight: 600; color: var(--vl-ink); margin: 0; }
.vl-quote-form input, .vl-quote-form textarea {
	width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px;
	border: 1px solid var(--vl-line); border-radius: 0; font: inherit; background: #fff;
}
.vl-quote-form input:focus, .vl-quote-form textarea:focus { outline: 2px solid var(--vl-signal); border-color: var(--vl-signal-d); }
.vl-quote-row { margin-bottom: 12px; }
.vl-quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.vl-req { color: #c0392b; }
.vl-quote-actions { margin-top: 4px; }
.vl-quote-submit { width: 100%; background: var(--vl-signal); color: var(--vl-ink); border: 0; cursor: pointer; font-weight: 800; padding: 13px 18px; }
.vl-quote-submit:hover { background: var(--vl-signal-d); }
.vl-quote-submit:disabled { opacity: 0.6; cursor: default; }
.vl-quote-feedback { margin: 12px 0 0; font-size: 13.5px; min-height: 18px; }
.vl-quote-feedback.is-ok { color: #1b7a3b; font-weight: 700; }
.vl-quote-feedback.is-error { color: #c0392b; font-weight: 700; }
.vl-quote-feedback.is-sending { color: var(--vl-muted); }
@media (max-width: 480px) {
	.vl-quote-grid { grid-template-columns: 1fr; }
	.vl-quote-dialog { margin-top: 3vh; padding: 22px 18px 18px; }
}

/* =========================================================================
   v2.6.1 — Réf. fabricant sous le titre (fiche) + espacement devis / méta
   ========================================================================= */
.vl-single-ref { margin: 6px 0 14px; font-size: 14px; font-weight: 600; color: var(--vl-muted); }
.vl-single-quote-wrap { margin: 18px 0; }
.woocommerce div.product .product_meta { margin-top: 18px; padding-top: 4px; }

/* =========================================================================
   v2.6.2 — Produits similaires (notre carte) + devis général (header)
   ========================================================================= */
.vl-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--vl-line); }
.vl-related-title { font-family: var(--vl-font-display); font-size: 24px; color: var(--vl-ink); margin: 0 0 18px; }
.vl-quote-general-fields select {
	width: 100%; box-sizing: border-box; margin-top: 4px; padding: 9px 10px;
	border: 1px solid var(--vl-line); border-radius: 0; font: inherit; background: #fff;
}
.vl-quote-general-fields select:focus { outline: 2px solid var(--vl-signal); border-color: var(--vl-signal-d); }

/* =========================================================================
   v2.7.1 — Devis (icône + texte) visible sur mobile avant le compte
            + hamburger mobile carré + bannière pub sans fond
   ========================================================================= */
@media (max-width: 860px) {
	/* « Devis » réaffiché sur mobile, avec son texte, devant le compte */
	.vl-action--quotes {
		display: inline-flex; flex-direction: column; align-items: center;
		gap: 3px; order: -1;
	}
	.vl-action--quotes .vl-action-label { display: inline; font-size: 11px; }

	/* Cadre du hamburger : carré (même hauteur/largeur) */
	.vl-burger {
		width: 32px; height: 32px; padding: 0; gap: 3px;
		align-items: center; justify-content: center; box-sizing: border-box;
	}
	.vl-burger span { width: 17px; }
}

/* Bannière publicitaire « Offre du moment » : fond blanc (ou image), largeur limitée */
.vl-adbanner {
	background-image: none; background-color: #fff;
	min-height: 0; padding: 22px 26px;
	max-width: 1280px; margin: 0 auto;
	border: 1px solid var(--vl-line);
}
.vl-adbanner.has-img { min-height: 170px; padding: 30px 34px; }
.vl-adbanner.has-img::after { content: none; }

/* =========================================================================
   v2.7.5 — Hamburger mobile plus petit + case « Réf. fabricant » en interrupteur
   ========================================================================= */
/* Interrupteur glissant (toggle) à la place de la case à cocher */
.vl-mpn input[type="checkbox"] {
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	position: relative; width: 34px; min-width: 34px; height: 18px;
	border-radius: 999px; background: #cbd5e1; border: 0; margin: 0;
	cursor: pointer; flex: none; box-shadow: none;
	transition: background .15s ease;
}
.vl-mpn input[type="checkbox"]::before { content: none; }
.vl-mpn input[type="checkbox"]::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 14px; height: 14px; border: 0; border-radius: 50%;
	background: #fff; box-shadow: 0 1px 2px rgba(17,24,39,.3);
	transform: none; transition: transform .15s ease;
}
.vl-mpn input[type="checkbox"]:checked { background: var(--vl-signal-d); border: 0; }
.vl-mpn input[type="checkbox"]:checked::after { transform: translateX(16px); border: 0; }

/* Barre de recherche un peu moins haute sur mobile */
@media (max-width: 860px) {
	.vl-search-field, .vl-search input[type="search"], .vl-search input { padding-top: 9px; padding-bottom: 9px; }
	.vl-mpn-label { line-height: 1.1; }
}

/* =========================================================================
   v2.7.6 — Mobile : barre de recherche plus compacte (moins haute que le header)
   ========================================================================= */
@media (max-width: 860px) {
	.vl-header-search { padding-top: 8px; padding-bottom: 8px; }
	.vl-header-top { min-height: 56px; }
	.vl-search-field, .vl-search input[type="search"], .vl-search input { padding-top: 7px; padding-bottom: 7px; }
	.vl-search-btn { padding-top: 0; padding-bottom: 0; }
}

/* =========================================================================
   v2.7.8 — Cadre de recherche à coins pointus (carrés) + icône loupe inclinée
   ========================================================================= */
.vl-search { border-radius: 0; }
.vl-search-field, .vl-search-btn, .vl-search-cat { border-radius: 0; }
.vl-search-btn svg { transform: rotate(-12deg); }

/* =========================================================================
   v2.7.9 — Mobile : pas de bordure sur les cartes promo (haut de l'accueil)
   ========================================================================= */
@media (max-width: 768px) {
	.vl-promos--split .vl-promo { border: 0; }
}

/* =========================================================================
   v2.8.0 — Bouton « Je découvre » en jaune + texte noir
   ========================================================================= */
.vl-promos--split .vl-promo-btn { background: var(--vl-signal); color: #000; }
.vl-promos--split .vl-promo-btn:hover { background: var(--vl-signal-d); color: #000; }

/* =========================================================================
   v2.8.1 — Menu mobile : 4 catégories + liens du topbar
   ========================================================================= */
.vl-drawer-cats, .vl-drawer-toplinks { list-style: none; margin: 0; padding: 0; }
.vl-drawer-cats li { border-bottom: 1px solid var(--vl-line); }
.vl-drawer-cats a { display: block; padding: 14px 18px; color: var(--vl-ink); text-decoration: none; font-weight: 600; }
.vl-drawer-cats a:hover { background: var(--vl-mist); }
.vl-drawer-links { margin-top: 6px; border-top: 1px solid var(--vl-line); }
.vl-drawer-toplinks li { border-bottom: 1px solid var(--vl-line); }
.vl-drawer-toplinks a { display: block; padding: 12px 18px; color: var(--vl-navy); text-decoration: underline; font-size: 14px; }
.vl-drawer-toplinks a:hover { background: var(--vl-mist); }

/* =========================================================================
   v2.8.3 — Menu mobile : liens en bleu + bandeau « Menu » en jaune
   ========================================================================= */
.vl-drawer-head { background: var(--vl-signal); }
.vl-drawer-title { color: var(--vl-ink); }
.vl-drawer-close { color: var(--vl-ink); }
.vl-drawer-cats a { color: #000; }
.vl-drawer-toplinks a { color: #1565c0; }

/* =========================================================================
   v2.8.5 — Mobile : supprime le vide sous « Je découvre » dans le slider promo
   (chaque slide épouse son contenu : image en haut, texte dessous)
   ========================================================================= */
@media (max-width: 980px) {
	.vl-pslide-track { align-items: start; }
	.vl-pslide-track > .vl-promo--slide { min-height: 0; }
	.vl-promos--slider .vl-promo { flex-direction: column; min-height: 0; }
	.vl-promos--slider .vl-promo-img { flex: 0 0 auto; width: 100%; height: 140px; min-height: 0 !important; align-self: auto; }
	.vl-promos--slider .vl-promo-body { flex: 0 0 auto; }
}

/* =========================================================================
   v2.9.6 — Section « Offre du moment » : bande gris clair autour de la boîte
   (supprime le blanc pleine largeur autour de l'encadré)
   ========================================================================= */
.vl-adbanner-section { background: var(--vl-mist); }

/* =========================================================================
   v2.9.7 — Mobile : moins d'espace au-dessus du titre « Acheter par catégorie »
   ========================================================================= */
@media (max-width: 768px) {
	.vl-cat-browser { padding-top: 32px; }
}

/* =========================================================================
   v2.9.9 — Formulaire de contact ([magelec_contact])
   ========================================================================= */
.vl-contact-form { max-width: 760px; }
.vl-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vl-contact-form .vl-field { margin: 0 0 16px; }
.vl-contact-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--vl-ink); }
.vl-contact-form input,
.vl-contact-form textarea {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--vl-line); border-radius: 0;
	padding: 11px 13px; font: inherit; background: #fff; color: var(--vl-ink);
}
.vl-contact-form input:focus,
.vl-contact-form textarea:focus { outline: none; border-color: var(--vl-signal-d); }
.vl-contact-form textarea { resize: vertical; min-height: 130px; }
.vl-contact-submit { cursor: pointer; }
.vl-contact-status { margin-top: 12px; font-weight: 600; font-size: 14px; }
@media (max-width: 600px) { .vl-contact-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   v2.9.13 — Panier vide : masque la grille « Nouveau dans la boutique »
   (bloc WooCommerce, produits non thémés avec « Lire la suite »)
   ========================================================================= */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block hr.wp-block-separator,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-template,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:last-of-type { display: none !important; }

/* =========================================================================
   v2.9.14 — Bouton « Devis » sur le panier vide
   ========================================================================= */
.vl-cart-quote-wrap { text-align: center; margin: 22px 0 8px; }
.vl-cart-quote-btn {
	display: inline-block; cursor: pointer;
	font-family: var(--vl-font-display); font-weight: 800; font-size: 15px;
	letter-spacing: .3px; text-transform: uppercase;
	border: 0; border-radius: var(--vl-radius);
	padding: 13px 30px; line-height: 1.2;
}
.vl-cart-quote-btn:hover { filter: brightness(.95); }