/*
Theme Name: Matériaux Hexagone
Author: Équipe commerce
Description: Thème WooCommerce français pour la quincaillerie et les matériaux de construction.
Version: 1.0.0
Text Domain: materiaux-hexagone
*/

:root {
	--mhx-ink: #17242d;
	--mhx-ink-soft: #33434c;
	--mhx-navy: #17384d;
	--mhx-orange: #f26a2e;
	--mhx-orange-dark: #c94c1b;
	--mhx-paper: #f5f1ea;
	--mhx-white: #fffdf9;
	--mhx-line: #d7d4cd;
	--mhx-muted: #65727a;
	--mhx-green: #1d6d58;
	--mhx-radius: 4px;
	--mhx-shadow: 0 16px 35px rgba(23, 36, 45, .08);
	--mhx-content: min(1240px, calc(100% - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--mhx-paper);
	color: var(--mhx-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}
body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; }
img { max-width: 100%; height: auto; }
a { color: var(--mhx-navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--mhx-orange-dark); }
button, input, select, textarea { font-size: inherit; }
button, .button, .wp-element-button, input[type="submit"] { cursor: pointer; }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mhx-wrap { width: var(--mhx-content); margin-inline: auto; }

/* Header */
.mhx-utility {
	background: var(--mhx-ink);
	color: #dce3e5;
	font-size: .72rem;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.mhx-utility-inner {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 0;
}
.mhx-utility p { margin: 0; }
.mhx-masthead { background: var(--mhx-white); border-bottom: 1px solid var(--mhx-line); }
.mhx-masthead-inner {
	display: grid;
	grid-template-columns: auto minmax(260px, 1fr) auto;
	align-items: center;
	gap: 34px;
	padding: 22px 0;
}
.mhx-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--mhx-ink);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	text-decoration: none;
}
.mhx-brand-mark {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--mhx-orange);
	color: var(--mhx-white);
	font-size: .82rem;
	letter-spacing: .04em;
	clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
}
.mhx-brand-name { font-size: 1.05rem; text-transform: uppercase; }
.mhx-brand-name small {
	display: block;
	margin-top: 5px;
	color: var(--mhx-muted);
	font-size: .58rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.mhx-search-form { display: flex; min-width: 0; }
.mhx-search-form input[type="search"] {
	min-width: 0;
	width: 100%;
	border: 1px solid var(--mhx-line);
	border-right: 0;
	border-radius: var(--mhx-radius) 0 0 var(--mhx-radius);
	background: var(--mhx-paper);
	padding: 12px 14px;
	color: var(--mhx-ink);
}
.mhx-search-form button {
	border: 0;
	border-radius: 0 var(--mhx-radius) var(--mhx-radius) 0;
	background: var(--mhx-navy);
	color: var(--mhx-white);
	padding: 0 18px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mhx-tools { display: flex; align-items: center; gap: 17px; }
.mhx-tool {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--mhx-ink);
	font-size: .76rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.mhx-tool-icon { font-size: 1.2rem; line-height: 1; }
.mhx-icon-user, .mhx-icon-cart, .mhx-icon-search, .mhx-icon-menu { position: relative; display: inline-block; flex: 0 0 auto; }
.mhx-icon-user { width: 15px; height: 18px; border: 2px solid currentColor; border-radius: 50% 50% 45% 45%; clip-path: polygon(0 0, 100% 0, 100% 47%, 0 47%); }
.mhx-icon-user::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -3px; height: 8px; border: 2px solid currentColor; border-radius: 50% 50% 0 0; }
.mhx-icon-cart { width: 17px; height: 13px; border: 2px solid currentColor; border-top: 0; transform: skew(-8deg); }
.mhx-icon-cart::before { content: ""; position: absolute; top: -5px; left: -5px; width: 6px; border-top: 2px solid currentColor; }
.mhx-icon-cart::after { content: "•  •"; position: absolute; left: 1px; top: 7px; font-size: 10px; letter-spacing: 4px; transform: skew(8deg); }
.mhx-cart-count {
	display: inline-grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--mhx-orange);
	color: #fff;
	font-size: .68rem;
}
.mhx-nav-band { background: var(--mhx-navy); color: var(--mhx-white); }
.mhx-nav-inner { display: flex; align-items: center; gap: 20px; min-height: 48px; }
.mhx-menu-list { display: flex; flex-wrap: wrap; gap: 2px 26px; list-style: none; margin: 0; padding: 0; }
.mhx-menu-list a {
	display: block;
	padding: 13px 0 11px;
	color: #f5faf9;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-decoration: none;
	text-transform: uppercase;
}
.mhx-menu-list a:hover, .mhx-menu-list .current-menu-item > a { color: #ffb18c; }
.mhx-mobile-toggle, .mhx-search-toggle { display: none; }
.mhx-icon-menu { width: 17px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.mhx-icon-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.mhx-icon-search { width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 50%; }
.mhx-icon-search::after { content: ""; position: absolute; width: 7px; border-top: 2px solid currentColor; right: -5px; bottom: -3px; transform: rotate(45deg); }
.mhx-search-panel { display: none; padding: 12px 0 18px; background: var(--mhx-white); }
.mhx-search-panel.is-open { display: block; }

/* Page frame and shared content */
.mhx-main { padding: 28px 0 80px; }
.mhx-main--home { padding-top: 0; }
.mhx-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 auto 22px;
	width: var(--mhx-content);
	color: var(--mhx-muted);
	font-size: .77rem;
}
.mhx-breadcrumbs .mhx-divider { display: inline-block; width: 7px; height: 7px; border-top: 2px solid var(--mhx-orange); border-right: 2px solid var(--mhx-orange); transform: rotate(45deg); }
.mhx-breadcrumbs a { color: var(--mhx-muted); text-decoration: none; }
.mhx-hero { background: var(--mhx-ink); }
.mhx-hero-image {
	display: block;
	width: 100%;
	height: clamp(250px, 43vw, 600px);
	object-fit: cover;
}
.mhx-section { padding-top: 62px; }
.mhx-section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 23px;
	border-bottom: 2px solid var(--mhx-ink);
	padding-bottom: 12px;
}
.mhx-section-heading h1, .mhx-section-heading h2 {
	margin: 0;
	font-size: clamp(1.5rem, 2.8vw, 2.6rem);
	letter-spacing: -.055em;
	line-height: 1.1;
}
.mhx-section-heading h1 { font-size: clamp(1.25rem, 2vw, 2rem); }
.mhx-section-heading p { margin: 0; color: var(--mhx-muted); font-size: .8rem; }
.mhx-product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.mhx-product-card {
	position: relative;
	min-width: 0;
	background: var(--mhx-white);
	box-shadow: 0 0 0 1px rgba(23, 36, 45, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mhx-product-card:hover { transform: translateY(-3px); box-shadow: var(--mhx-shadow); }
.mhx-product-card__visual { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #e9e6de; }
.mhx-product-card__visual a { display: block; height: 100%; }
.mhx-product-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.mhx-product-card:hover .mhx-product-card__visual img { transform: scale(1.04); }
.mhx-product-card__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 15px;
	color: var(--mhx-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
}
.mhx-product-card__body { padding: 16px 17px 17px; }
.mhx-product-card__category {
	margin: 0 0 6px;
	color: var(--mhx-orange-dark);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.mhx-product-card__category a { color: inherit; text-decoration: none; }
.mhx-product-card__title { margin: 0 0 10px; font-size: 1.08rem; line-height: 1.25; }
.mhx-product-card__title a { color: var(--mhx-ink); text-decoration: none; }
.mhx-product-card__price { min-height: 27px; color: var(--mhx-navy); font-size: 1rem; font-weight: 800; }
.mhx-product-card__price del { margin-right: 4px; color: var(--mhx-muted); font-size: .82em; font-weight: 400; }
.mhx-product-card__price ins { text-decoration: none; }
.mhx-product-card__action { margin-top: 14px; }
.mhx-product-card__action a {
	display: inline-block;
	border: 1px solid var(--mhx-navy);
	padding: 8px 11px;
	color: var(--mhx-navy);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .07em;
	text-decoration: none;
	text-transform: uppercase;
}
.mhx-product-card__action a:hover { background: var(--mhx-navy); color: var(--mhx-white); }
.mhx-sale-flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	background: var(--mhx-orange);
	color: #fff;
	padding: 4px 8px;
	font-size: .63rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.mhx-home-category + .mhx-home-category { margin-top: 34px; }

/* WooCommerce catalogue and product */
.mhx-catalogue-head { margin-bottom: 26px; }
.mhx-catalogue-head h1 { margin: 0; font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: -.04em; }
.mhx-catalogue-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 20px;
	border-top: 1px solid var(--mhx-line);
	border-bottom: 1px solid var(--mhx-line);
	padding: 12px 0;
	color: var(--mhx-muted);
	font-size: .8rem;
}
.mhx-catalogue-toolbar form { margin: 0; }
.mhx-catalogue-toolbar select { border: 1px solid var(--mhx-line); background: var(--mhx-white); padding: 7px 9px; color: var(--mhx-ink); }
.mhx-page-title { margin: 0 0 18px; font-size: clamp(1.7rem, 3.2vw, 3rem); letter-spacing: -.06em; line-height: 1.1; }
.mhx-single-product { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: clamp(28px, 6vw, 82px); }
.mhx-gallery { min-width: 0; }
.mhx-gallery__main { display: grid; place-items: center; min-height: 420px; background: var(--mhx-white); padding: 28px; }
.mhx-gallery__main a { display: block; width: 82%; overflow: hidden; cursor: zoom-in; text-align: center; }
.mhx-gallery__main img { display: block; width: 100%; max-height: 580px; object-fit: contain; }
.mhx-gallery__main a[data-mhx-zoom-image] img { transform: scale(1); transform-origin: center center; transition: transform .18s ease; }
.mhx-gallery__main a[data-mhx-zoom-image].is-zoomed { cursor: zoom-out; }
.mhx-gallery__main a[data-mhx-zoom-image].is-zoomed img { transform: scale(1.8); }
.mhx-gallery__placeholder { color: var(--mhx-muted); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mhx-gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mhx-gallery__thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--mhx-white); }
.mhx-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mhx-gallery__thumb.is-active { outline: 2px solid var(--mhx-orange); outline-offset: 2px; }
.mhx-product-summary { min-width: 0; }
.mhx-product-summary .product_title.entry-title { margin: 0 0 14px; font-size: clamp(1.3rem, 2.2vw, 2.2rem); letter-spacing: -.055em; line-height: 1.12; }
.mhx-product-summary .price { margin: 0 0 19px; color: var(--mhx-navy); font-size: 1.5rem; font-weight: 800; }
.mhx-product-summary .price del { color: var(--mhx-muted); font-size: .7em; font-weight: 400; }
.mhx-product-summary .price ins { text-decoration: none; }
.mhx-product-summary .woocommerce-product-details__short-description { margin-bottom: 22px; font-size: 1.03rem; }
.mhx-product-summary .woocommerce-product-details__short-description p:first-child { margin-top: 0; }
.mhx-product-summary form.cart { margin-top: 24px; border-top: 1px solid var(--mhx-line); padding-top: 20px; }
.mhx-product-summary form.cart .quantity { display: inline-flex; margin-right: 8px; }
.mhx-product-summary form.cart .quantity input { width: 70px; border: 1px solid var(--mhx-line); padding: 11px 8px; text-align: center; }
.mhx-product-summary form.cart .single_add_to_cart_button, .mhx-buy-now-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	border: 0;
	background: var(--mhx-orange);
	color: #fff;
	padding: 0 16px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: .04em;
	vertical-align: middle;
}
.mhx-product-summary form.cart .single_add_to_cart_button:hover, .mhx-buy-now-button:hover { background: var(--mhx-orange-dark); }
.mhx-buy-now-button { margin: 0 10px 0 0; background: var(--mhx-navy); }
.mhx-buy-now-button:hover { background: var(--mhx-ink); }
.mhx-product-summary .variations { width: 100%; margin-bottom: 14px; }
.mhx-product-summary .variations td { padding: 7px 0; }
.mhx-product-summary .variations select { width: 100%; border: 1px solid var(--mhx-line); background: var(--mhx-white); padding: 10px; }
.mhx-after-product { margin-top: 65px; }
.mhx-after-product h2 { font-size: clamp(1.35rem, 2.4vw, 2.2rem); letter-spacing: -.05em; }
.mhx-after-product .products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.mhx-after-product .products .product { min-width: 0; }
.mhx-after-product .products .mhx-product-card { list-style: none; }
.mhx-tabs { margin-top: 54px; border-top: 2px solid var(--mhx-ink); }
.mhx-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 5px 22px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--mhx-line); }
.mhx-tabs ul.tabs li { margin: 0; padding: 13px 0; }
.mhx-tabs ul.tabs li a { color: var(--mhx-muted); font-weight: 800; text-decoration: none; }
.mhx-tabs .panel { padding: 25px 0; }
.mhx-tabs .panel h2 { margin-top: 0; font-size: 1.25rem; }
.mhx-tabs table { width: 100%; border-collapse: collapse; }
.mhx-tabs th, .mhx-tabs td { border: 1px solid var(--mhx-line); padding: 9px 11px; text-align: left; }
.mhx-review-zone { margin-top: 45px; border-top: 2px solid var(--mhx-ink); padding-top: 23px; }
.mhx-review-zone h2 { margin-top: 0; }
.mhx-review-form { margin-bottom: 35px; }
.mhx-review-form .comment-reply-title { display: block; margin-bottom: 14px; font-size: 1.15rem; font-weight: 800; }
.mhx-review-form .comment-form-author, .mhx-review-form .comment-form-email { display: inline-block; width: calc(50% - 10px); vertical-align: top; }
.mhx-review-form .comment-form-email { margin-left: 16px; }
.mhx-review-form label { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 700; }
.mhx-review-form input, .mhx-review-form textarea, .mhx-review-form select { width: 100%; border: 1px solid var(--mhx-line); background: var(--mhx-white); padding: 10px; }
.mhx-review-form .form-submit input { width: auto; border: 0; background: var(--mhx-navy); color: #fff; font-weight: 800; }
.mhx-review-zone .commentlist { margin: 0; padding: 0; list-style: none; }
.mhx-review-zone .comment_container { display: flex; gap: 14px; border-top: 1px solid var(--mhx-line); padding: 17px 0; }
.mhx-review-zone .comment-text { flex: 1; }
.mhx-review-zone .star-rating { color: var(--mhx-orange); }
.mhx-review-zone .meta { margin: 0 0 7px; color: var(--mhx-muted); font-size: .78rem; }
.mhx-review-zone .description p:last-child { margin-bottom: 0; }

/* Content, forms, notices and footer */
.mhx-content { max-width: 860px; }
.mhx-content h1, .mhx-content h2, .mhx-content h3 { letter-spacing: -.04em; line-height: 1.2; }
.mhx-content table { width: 100%; border-collapse: collapse; }
.mhx-content th, .mhx-content td { border: 1px solid var(--mhx-line); padding: 10px; text-align: left; }
.mhx-content ul, .mhx-content ol { padding-left: 1.3em; }
.mhx-pagination { margin-top: 32px; }
.mhx-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mhx-pagination a, .mhx-pagination span { display: block; border: 1px solid var(--mhx-line); background: var(--mhx-white); padding: 8px 12px; text-decoration: none; }
.mhx-pagination .current { background: var(--mhx-navy); color: #fff; }
.mhx-post-card { border-bottom: 1px solid var(--mhx-line); padding: 0 0 24px; margin-bottom: 24px; }
.mhx-post-card h2 { margin: 0 0 8px; }
.mhx-post-card h2 a { color: var(--mhx-ink); text-decoration: none; }
.mhx-post-meta { color: var(--mhx-muted); font-size: .8rem; }
.mhx-notice, .woocommerce-message, .woocommerce-error, .woocommerce-info { margin: 0 0 18px; border-left: 4px solid var(--mhx-orange); background: var(--mhx-white); padding: 12px 15px; }
.mhx-notice p { margin: 0; }
.mhx-empty { padding: 30px; background: var(--mhx-white); }
.mhx-footer { background: var(--mhx-ink); color: #dce3e5; }
.mhx-footer a { color: #f3b294; }
.mhx-footer-inner { display: grid; grid-template-columns: 1.25fr .8fr .8fr; gap: 42px; padding: 54px 0 42px; }
.mhx-footer h2, .mhx-footer h3 { margin: 0 0 14px; color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.mhx-footer p { margin-top: 0; color: #bdc7ca; }
.mhx-footer ul { margin: 0; padding: 0; list-style: none; }
.mhx-footer li + li { margin-top: 8px; }
.mhx-footer li a { text-decoration: none; }
.mhx-copyright { border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0 20px; color: #9caeb3; font-size: .75rem; }

@media (max-width: 900px) {
	:root { --mhx-content: min(100% - 30px, 700px); }
	.mhx-masthead-inner { grid-template-columns: 1fr auto; gap: 18px; }
	.mhx-search-form { grid-column: 1 / -1; grid-row: 2; }
	.mhx-tools { justify-content: end; }
	.mhx-nav-inner { justify-content: space-between; }
	.mhx-mobile-toggle, .mhx-search-toggle { display: inline-flex; align-items: center; border: 0; background: transparent; color: #fff; font-weight: 800; }
	.mhx-mobile-toggle { padding: 12px 0; }
	.mhx-mobile-toggle > span:last-child { margin-left: 7px; font-size: .73rem; letter-spacing: .08em; text-transform: uppercase; }
	.mhx-nav-inner nav { width: 100%; order: 3; }
	.mhx-menu-list { display: none; width: 100%; padding: 8px 0 15px; }
	.mhx-menu-list.is-open { display: block; }
	.mhx-menu-list a { padding: 9px 0; }
	.mhx-nav-inner { flex-wrap: wrap; }
	.mhx-search-toggle { padding: 12px 0; margin-left: auto; }
	.mhx-product-grid, .mhx-after-product .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mhx-single-product { grid-template-columns: 1fr; gap: 34px; }
	.mhx-gallery__main { min-height: 300px; }
}
@media (max-width: 560px) {
	:root { --mhx-content: calc(100% - 24px); }
	.mhx-utility-inner { display: block; padding: 7px 0; }
	.mhx-utility-inner p + p { display: none; }
	.mhx-masthead-inner { padding: 15px 0; }
	.mhx-tools { gap: 11px; }
	.mhx-tool-label { display: none; }
	.mhx-brand-mark { width: 38px; height: 38px; }
	.mhx-brand-name { font-size: .9rem; }
	.mhx-section { padding-top: 42px; }
	.mhx-section-heading { display: block; }
	.mhx-section-heading p { margin-top: 8px; }
	.mhx-product-grid { gap: 10px; }
	.mhx-product-card__body { padding: 12px; }
	.mhx-product-card__title { font-size: .95rem; }
	.mhx-catalogue-toolbar { display: block; }
	.mhx-catalogue-toolbar form { margin-top: 10px; }
	.mhx-review-form .comment-form-author, .mhx-review-form .comment-form-email { display: block; width: 100%; margin-left: 0; }
	.mhx-footer-inner { grid-template-columns: 1fr; gap: 24px; padding: 38px 0 30px; }
}