/*
 * W7 grid compatibility for legacy child-theme templates
 * (magazine, alimentation, precheckout, content.php, single-portfolio.php).
 * Woodmart 8 removed its Bootstrap-style col-* grid; these templates still
 * emit those classes. Scope is kept as tight as possible.
 */

/* Legacy content area next to #custom_sidebar (magazine/alimentation pages) */
main.wd-content-layout:has(> #custom_sidebar),
main.wd-content-layout:has(> .site-content[class*="col-"]) {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/*
 * Shop loop: the child design sizes .product-grid-item with
 * flex: 0 0 20% + 2.5% side margins (4 per row; 45% = 2 per row on mobile).
 * Woodmart 8 renders the loop as CSS grid, which ignores flex-basis —
 * restore the W7 flex container for the main products loop only.
 */
.products.wd-products.wd-grid-g {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

/* W7 wd-spacing-30 gave loop items their vertical rhythm; W8 used grid row-gap (disabled above) */
.products.wd-products .product-grid-item {
	margin-bottom: 30px;
}

/* W7's .row pulled the loop 25px past the container on each side, so the first
   card's outer edge lines up with the breadcrumbs / shop tools row. */
.products.wd-products.wd-grid-g {
	margin-inline: -25px;
}

/*
 * Header menu typography: the child rule targets `header div>ul>li>a span…`,
 * but Woodmart 8 wraps the menu in <nav> instead of <div>, so it stopped
 * matching. Same declarations, new DOM (style.css:528 + :1423).
 */
.whb-clone nav > ul > li > a span.nav-link-text:not(.woodmart-cart-number),
header nav > ul > li > a span.nav-link-text:not(.woodmart-cart-number) {
	color: #70541F;
	font-family: 'Mali', cursive;
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	display: block;
	line-height: 40px;
}

/*
 * Header search input: child rule `.wd-search-form input` (style.css:584)
 * loses to W8's later form styles that reset the background to transparent.
 */
.wd-search-form form.searchform input.s,
.wd-search-form input[type="text"] {
	background-color: #F4F1D8 !important;
}

/*
 * The child CSS positions .woocommerce-ordering absolute right:0. In W7 a
 * positioned ancestor kept it at the content edge; in W8 every ancestor is
 * static, so it anchored to the viewport. Restore the anchor.
 */
.shop-loop-head {
	position: relative;
}

/* Current menu item, W7 style: brown + bold (style.css:549 / :2651, nav-based DOM) */
.whb-clone nav > ul > li.current_page_item > a span:not(.woodmart-cart-number),
header nav > ul > li.current_page_item > a span:not(.woodmart-cart-number),
header nav > ul > li.current-menu-item > a span.nav-link-text:not(.woodmart-cart-number) {
	color: #70541F !important;
	font-weight: 700 !important;
}

/*
 * Page background: child style.css sets .main-page-wrapper to #FFFCF8, but
 * Woodmart 8 loads its own styles later and paints .wd-page-content white.
 * Restate with higher specificity.
 */
.wd-page-content.main-page-wrapper {
	background-color: #FFFCF8;
}

/* W7 wrapped the shop category icons in .wd-nav-product-cat-wrap (margin-bottom: 70px);
   that wrapper is gone — space the new nav instead. */
.headercategories {
	display: flow-root; /* children float in W8's nav — without this the block collapses to 0 height */
}

/* W7 rendered this menu as a flex row (li get flex-grow from child style.css) */
div.headercategories .wd-header-nav ul.wd-nav {
	display: flex !important;
	flex-wrap: nowrap;
	width: 100%;
}

div.headercategories .wd-header-nav ul.wd-nav > li {
	float: none;
	flex: 1 1 0;
	min-width: 0;
	width: auto !important;
}

.headercategories .wd-header-nav {
	margin-bottom: 70px;
}

/*
 * Headercategories menu: the W8 walker renders <a class="woodmart-nav-link">
 * <img class="wd-nav-img"> where W7 used .category-nav-link — extend the
 * child styles to the new classes so the big centered icons come back.
 */
.headercategories .woodmart-nav-link,
.headercategories .woodmart-nav-link img.wd-nav-img {
	display: block !important;
}

.headercategories .woodmart-nav-link img.wd-nav-img {
	max-height: 100px;
	margin: 0 auto;
}

/* Parity with the W7 child loop template, which did not render star ratings */
.products.wd-products .product-grid-item .star-rating {
	display: none;
}

/*
 * No hover actions on product cards (client requirement — click opens the
 * product). The W7 child template emitted empty button containers, so live
 * shows nothing on hover; W8 renders real add-to-cart/wishlist icons.
 */
.products.wd-products .product-grid-item .wd-buttons,
.products.wd-products .product-grid-item .wd-add-btn-replace,
.products.wd-products .product-grid-item .wd-quick-shop-btn {
	display: none !important;
}

/* Base column behaviour — only the exact legacy classes, never vc_col-* / wd-grid-col */
.col-2, .col-3, .col-9, .col-12,
.col-sm-3, .col-sm-6, .col-sm-12,
.col-md-1, .col-md-3, .col-md-4, .col-md-6, .col-md-9, .col-md-12,
.col-lg-2, .col-lg-3, .col-lg-4, .col-lg-6, .col-lg-9, .col-lg-12 {
	box-sizing: border-box;
	min-height: 1px;
	width: 100%;
}

/* Rows inside legacy templates */
.site-content .row,
.entrymeta {
	display: flex;
	flex-wrap: wrap;
}

/* Mobile-first (xs) sizes */
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small (>=576px) */
@media (min-width: 576px) {
	.col-sm-3 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium / tablet (>=769px) */
@media (min-width: 769px) {
	.col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
	.col-md-3 { flex: 0 0 25%; max-width: 25%; }
	.col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.col-md-9 { flex: 0 0 75%; max-width: 75%; }
	.col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large / desktop (>=1025px) */
@media (min-width: 1025px) {
	.col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
	.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
	.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-9 { flex: 0 0 75%; max-width: 75%; }
	.col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
 * v1.0.13 — Blog loop + single post parity (SITERABBIT-11).
 * The legacy child content.php card is routed back into W8 loops via
 * templates/content-default.php; these are the W7 parent rules it relied
 * on, ported from blog-loop-base-old / blog-loop-design-masonry /
 * blog-base / blog-single-base (.min) of Woodmart 7.1.4.
 * ============================================================ */

/* W8 renders the holder as CSS grid; the legacy card sizes itself with
   col-* classes, so restore the W7 flex row (like the products loop above) */
.wd-posts.wd-blog-holder.wd-grid-g {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	/* live: child rule .masonry-container.wd-spacing-30.row {margin: 0 50px}
	   targets the W7 wrapper classes the W8 holder no longer has */
	margin: 0 50px;
}
/* live: --wd-sp:50px via .wd-spacing-30 gave cols 25px gutters + 50px bottom */
.wd-posts.wd-blog-holder.wd-grid-g > article[class*="col-"] {
	padding-inline: 25px;
	margin-bottom: 50px;
}
/* W7 bootstrap cols had 15px gutters; the compat col-* classes above do not,
   so the two blog containers lost them (cards hugged the sidebar / overflowed
   the container edge on the right) */
.magazine-archive-content.site-content,
.wd-content-area.site-content:has(.wd-posts.wd-blog-holder) {
	padding-inline: 15px;
}

/* --- W7 blog-loop-base-old --- */
.blog-post-loop .wd-entry-content p { margin-bottom: 15px; }
.blog-post-loop .wd-entry-content .read-more-section { margin-bottom: 0; line-height: 1; }
.blog-post-loop .entry-thumbnail img { width: 100%; border-radius: var(--wd-brd-radius); }
.blog-post-loop .entry-header { position: relative; text-align: center; }
.blog-post-loop .article-inner { border-radius: var(--wd-brd-radius); }
.blog-post-loop .article-body-container { position: relative; z-index: 1; padding: 25px; border-radius: var(--wd-brd-radius); background-color: var(--bgcolor-white); text-align: center; }
.blog-post-loop .post-title { margin-bottom: 10px; }
.post-img-wrapp { overflow: hidden; border-radius: var(--wd-brd-radius); vertical-align: middle; backface-visibility: hidden; -webkit-backface-visibility: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.post-img-wrapp a { display: block; margin: -2px; transition: transform .7s ease, opacity .7s ease; transform: scale(1); }
.post-img-wrapp a:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.5); opacity: 0; transition: opacity .7s ease; }
.blog-post-loop:hover .post-img-wrapp a { transform: scale(1.03); }
.blog-post-loop:hover .post-img-wrapp a:after { opacity: 1; }
.post-image-mask { position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -22px; text-align: center; font-size: 0; }
.post-image-mask:after, .post-image-mask:before { content: ""; }
.post-image-mask:after, .post-image-mask:before, .post-image-mask span { display: inline-block; margin-right: 7px; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; vertical-align: middle; opacity: 0; transition: opacity .2s ease; }
.post-image-mask:after { margin-right: 0; }
.blog-post-loop:hover .post-image-mask:after, .blog-post-loop:hover .post-image-mask:before, .blog-post-loop:hover .post-image-mask span { opacity: 1; }
.hovered-social-icons { position: relative; display: inline-block; margin-bottom: 10px; color: var(--color-gray-300); vertical-align: middle; font-size: 0; transition: all .25s ease; }
.hovered-social-icons div.wd-tooltip-label { display: block !important; padding: 5px !important; height: auto; line-height: 1; pointer-events: auto; }
.hovered-social-icons div.wd-tooltip-label:after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 10px; }
.hovered-social-icons:after { display: inline-block; width: 20px; height: 20px; text-align: center; font-size: 16px; line-height: 20px; content: "\f117"; font-family: "woodmart-font"; }
.hovered-social-icons:hover { color: var(--color-gray-500); }
.meta-categories-wrapp { position: absolute; top: -13px; right: 15px; left: 15px; overflow: hidden; height: 25px; line-height: 25px; }
.read-more-section { margin-top: 20px; margin-bottom: 0; line-height: 1; }
.read-more-section a { position: relative; display: inline-block; border-bottom: none; color: var(--wd-primary-color); text-transform: var(--btn-transform); font-weight: 800; font-size: 13px; }

/* --- W7 blog-loop-design-masonry --- */
.blog-design-masonry.blog-style-flat .article-body-container { padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: transparent; }
.blog-design-masonry:not(.has-post-thumbnail) .post-date { display: none; }

/* --- W7 blog-base: inline meta list --- */
.entry-meta-list { list-style: none; --li-pl: 0; --list-mb: 0; --li-mb: 0; }
.entry-meta-list li { display: inline-block; margin-right: 10px; color: var(--color-gray-300); vertical-align: middle; line-height: 1.4; }
.entry-meta-list li a { color: inherit; }
.entry-meta-list li.modified-date, .entry-meta-list li:last-child { margin-right: 0; }
.wd-entry-meta .meta-author .avatar { display: inline-block; margin: 0 5px; width: 18px; height: 18px; border-radius: 50%; vertical-align: top; }
.wd-entry-meta .meta-author a { text-transform: capitalize; }

/* --- W7 blog-single-base: centered single post header. font-size:0 on the
   meta container hides li.modified-date (it has no own size), exactly the
   production mechanism; author + date get their sizes back below. --- */
.post-single-page { text-align: center; }
.post-single-page .post-title { margin-bottom: 10px; font-size: 32px; line-height: 1.2; }
.post-single-page .entry-header { position: relative; }
.post-single-page .entry-header img { border-radius: var(--wd-brd-radius); }
.post-single-page .meta-post-categories { margin-top: 0; margin-bottom: 15px; }
.post-single-page .wd-entry-meta { margin-bottom: 20px; margin-right: 0; font-size: 0; }
.post-single-page .wd-entry-meta .meta-author { font-size: 14px; }
.post-single-page .wd-entry-meta .meta-date { vertical-align: top; font-size: 14px; }
.post-single-page .article-body-container { text-align: left; }
.post-single-page .entry-content { margin-bottom: 60px; }
.post-single-page.has-post-thumbnail .article-inner > .entry-header { margin-bottom: 30px; }
.post-single-page:not(.has-post-thumbnail) .wd-post-date,
.post-single-page:not(.has-post-thumbnail) .post-date { display: none; }
.post-single-page .wd-post-date.wd-style-with-bg { position: absolute; top: 15px; left: 15px; z-index: 2; }

/* --- W7 responsive tails --- */
@media (max-width: 1024px) {
	.blog-post-loop .meta-author > span { display: none; }
	.blog-post-loop:hover .post-img-wrapp a { transform: none; }
	.post-img-wrapp a:after, .post-image-mask { display: none; }
	.blog-design-masonry .post-title { font-size: 20px; }
	.post-single-page .post-title { font-size: 28px; }
}
@media (max-width: 768.98px) {
	.post-single-page .post-title { font-size: 24px; line-height: 1.4; }
}
@media (max-width: 576px) {
	.blog-post-loop .article-body-container { padding-right: 15px; padding-left: 15px; }
	.hovered-social-icons { display: none; }
	.post-single-page .post-title { font-size: 20px; }
	.wd-post-date { top: 10px; left: 10px; }
}

/* (read-more pill: the btn-read-more/more-link classes are restored on the
   anchor in content.php, so the original child rules style it natively) */

/* W7 base tooltip behaviour for the card share toggle (W8 dropped these
   rules); scoped to .hovered-social-icons so W8 tooltips stay untouched. */
.hovered-social-icons.wd-tltp { position: relative; }
.hovered-social-icons .wd-tooltip-label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 8px;
	z-index: 1070;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	background-color: #000;
	color: #fff;
	border-radius: calc(var(--wd-brd-radius) / 1.5);
	white-space: nowrap;
	transition: opacity .3s ease;
}
.hovered-social-icons:hover .wd-tooltip-label {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.hovered-social-icons .wd-tooltip-label:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 5px 5px 0;
	border-top-color: #000;
}

/* W8 masonry inline CSS pulls .wd-post-cat up (margin-top:-25px - 1.1em),
   which shoves the chip outside the W7 clipping wrapper — neutralize it. */
.meta-categories-wrapp .meta-post-categories.wd-post-cat {
	margin-top: 0;
}

/* W7 blog-base chip link typography (the W8 module CSS that used to provide
   it is only enqueued by W8's own card templates, now bypassed). */
.meta-post-categories.wd-style-with-bg > a {
	display: inline-block;
	vertical-align: top;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
}

/* ============================================================
 * v1.0.20 — full sweep parity batch (SITERABBIT-11).
 * ============================================================ */

/* Footer: production inherits white for the .footertext widgets; W8's dark
   color scheme resolves them to #767676. */
.wd-footer .footertext {
	color: #fff;
}

/* Child responsive-visibility helpers (view-full / view-mobile) lose to a
   later W8 flex rule on vc_section — reassert them with the child's own
   1024px breakpoint. Fixes the duplicated "Nos valeurs" mobile section. */
@media (min-width: 1025px) {
	.view-mobile {
		display: none !important;
	}
}
@media (max-width: 1024px) {
	.view-full {
		display: none !important;
	}
}

/* Alimentation single: production never loads blog-single-base there (W7
   enqueued it per page type), so undo the centered single-post header and
   date badge for this CPT. */
article.type-alimentation.post-single-page {
	text-align: left;
}
article.type-alimentation .wd-post-date,
article.type-alimentation .post-date {
	display: none !important;
}

/* Alimentation single: the data tables sit in col-md-6 pairs that had W7
   bootstrap 15px gutters (columns touched each other without them). */
.single-alimentation .row > [class*="col-"] {
	padding-inline: 15px;
}

/* Comments: W7 rendered the reply title uppercase */
.comment-reply-title {
	text-transform: uppercase;
}

/* Contact form: W8 resolves the CF7 submit to white-on-transparent
   (invisible); production shows #3e3e3e on the outlined pill. */
.wpcf7 .wpcf7-submit.roundedbtn {
	color: #3e3e3e;
}

/* Single product: production renders no wishlist controls (heart icon next
   to add-to-cart, "Ajouter à la liste des souhaits" row) — W8 adds them. */
.single-product .wd-wishlist-btn {
	display: none !important;
}

/* Related/upsell section titles: production styles .slider-title as plain
   Poppins 22px/600 dark; W8's added .wd-el-title/.element-title classes remap
   them to the decorative Sacramento element-title typography. */
.related-and-upsells .wd-el-title.slider-title {
	font-family: "Poppins", Arial, Helvetica, sans-serif !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	color: #403834 !important;
}

/* All legacy child templates (magazine/alimentation single + archives) put
   their content in .site-content.col-* which had the 15px bootstrap gutter
   on W7; the compat col classes define none, so content sat flush against
   the sidebar. Generic version of the earlier per-archive rules. */
main.wd-content-layout > .site-content[class*="col-"] {
	padding-inline: 15px;
}

/* ---- v1.0.24 ---------------------------------------------------------- */

/* Link-style buttons (.arrowbutt: "Découvrir" / "En savoir plus", homepage).
   W8's base :is(.btn,.button,...) rule (font-size:var(--btn-font-size,13px);
   color:var(--btn-color,#3E3E3E); line-height:1.2) has the same 0-1-0
   specificity as the child's .arrowbutt rule but loads AFTER child style.css,
   so 18px/23px/#454417 were lost. Live computed: 18px / 23px / #454417,
   hover #333. Restore at 0-2-0 from this late-loading sheet. */
.btn.arrowbutt {
	font-size: 18px;
	line-height: 23px;
	color: #454417;
	--btn-color-hover: #333;
}

/* Keep the histoire section's white variant (child rule is 0-2-0 without
   !important on the normal state and would lose to the rule above). */
.section_home_histoire .btn.arrowbutt {
	color: #fff;
	--btn-color-hover: #fff;
}


/* ---- v1.0.26 (vc_carousel.min.css is enqueued in-body at shortcode render, AFTER this sheet -> !important) ---------------------------------------------------------- */

/* "Nos valeurs" carousel: W8 removed the Owl override for WPBakery's images
   carousel, so js_composer 9 renders its native vc_carousel markup. Port the
   live look. Live computed values: image max-width 530px centered (child rule
   was keyed to .owl-item); dots BELOW the image, static, centered, 10px round,
   inactive #EDE7DF (child style.css:1020) / active #70541F; nav arrows
   woodmart-font chevrons (f114/f113, 24px, #333) at the edges, vertically
   centered, hidden until the carousel is hovered. */
.valeurscarusel .vc_carousel-inner img {
	max-width: 530px !important;
	margin: 0 auto !important;
}
.valeurscarusel .vc_carousel-indicators {
	position: static !important;
	width: auto !important;
	margin: 5px 0 0 !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
	text-align: center !important;
}
.valeurscarusel .vc_carousel-indicators li {
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background-color: #EDE7DF !important;
	border: 1px solid #EDE7DF !important;
	margin: 5px !important;
	cursor: pointer !important;
	text-indent: -9999px !important;
}
.valeurscarusel .vc_carousel-indicators li.vc_active {
	background-color: #70541F !important;
	border-color: #70541F !important;
}
.valeurscarusel .vc_carousel-control {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	background: none !important;
	text-shadow: none !important;
	font-size: 0 !important;
	color: #333 !important;
	opacity: 0 !important;
	transition: opacity .3s ease !important;
}
.valeurscarusel:hover .vc_carousel-control {
	opacity: 1 !important;
}
.valeurscarusel .vc_carousel-control.vc_left { left: 0; }
.valeurscarusel .vc_carousel-control.vc_right { right: 0; }
.valeurscarusel .vc_carousel-control .icon-prev:before {
	content: "\f114" !important;
	font-family: woodmart-font !important;
	font-size: 24px !important;
	line-height: 24px !important;
}
.valeurscarusel .vc_carousel-control .icon-next:before {
	content: "\f113" !important;
	font-family: woodmart-font !important;
	font-size: 24px !important;
	line-height: 24px !important;
}

/* The vc markup puts the indicators OL before the slides; once static they
   would render above the image. Flex-order them below (absolute-positioned
   arrows are unaffected by flex order). */
.valeurscarusel .vc_images_carousel {
	display: flex !important;
	flex-direction: column !important;
}
.valeurscarusel .vc_carousel-indicators {
	order: 9 !important;
}