:root {
	--wd-hb-opt-h: 40px;
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(28,28,28);
	--wd-text-font-size: 15px;
	--wd-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: rgb(28,28,28);
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 400;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(28,28,28);
	--wd-widget-title-font-size: 15px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 400;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(13,13,13);
	--wd-alternative-color: rgb(243,242,0);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(13,13,13);
	--btn-accented-bgcolor-hover: rgb(48,48,48);
	--btn-font-weight: 400;
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
	--wd-link-decor-style: solid;
	--wd-link-decor-style-hover: solid;
	--wd-link-decor-color: rgb(51,51,51);
	--wd-link-decor-color-hover: rgb(36,36,36);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
.wd-hb {
	background-color: rgb(235,235,235);
	background-image: none;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(235,235,235);
	background-image: none;
}
html table th {
	text-transform: none;
}
html .wd-nav-mobile > li > a {
	font-weight: 400;
}
 {
	font-family: "Lato", Arial, Helvetica, sans-serif;
	font-weight: 700;
}
body .wd-swatch, body table.variations label, body .wd-breadcrumbs>:is(span,a):last-child {
	font-weight: 400;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,250,250);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,250,250);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,250,250);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,250,250);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(250,250,250);
	background-image: none;
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-icon-size: 18px;
}
.wd .product-label.onsale {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.wd .product-label.new {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.wd .product-label.featured {
	background-color: rgb(255,255,255);
	color: rgb(51,51,51);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 0px;
}

@media (max-width: 1024px) {
	:root {
		--wd-hb-opt-h: 40px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-hb-opt-h: 60px;
	}

}
:root{
--wd-container-w: 1800px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1800px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* ==========================================================================
   Celimax.ma — visual "spec block" and "before/after" patterns
   Add this to WoodMart: Theme Settings → Performance → Custom CSS
   (or your child theme's style.css).

   These are the classes used inside the tab_whatitis / tab_technology /
   tab_stats custom fields (see celimax-tabs-functions.php +
   README-visual-sections.md) to reproduce the celimax.us "What It Is" /
   "Product Description" / clinical-results sections -- per product, with
   that product's own images.

   IMPORTANT: on celimax.us these are NOT tabs -- they're 3 full-width page
   sections that render after the tabs, after reviews, after related
   products, in this order: Qu'est-ce que c'est ? (tab_whatitis) ->
   Description du produit (tab_technology) -> Amélioration prouvée des
   rides et des pores (tab_stats). celimax-tabs-functions.php outputs each
   wrapped in <section class="celimax-page-section celimax-section-KEY">.

   Layout, per Mahdi's spec:
   - Section 1 (whatitis) and section 3 (stats): full-bleed, edge-to-edge
     of the browser window, regardless of the theme's content container.
   - Section 2 (technology) stays contained/centered (max-width), but its
     3-photo grid becomes a 1.5-card horizontal carousel on mobile instead
     of stacking to 1 column.
   - Sizing scales fluidly with viewport width (clamp()) instead of
     jumping at a single breakpoint.
   ========================================================================== */

/* ---- Shared section wrapper --------------------------------------------- */
.celimax-page-section {
  max-width: 1140px;
  margin: clamp(32px, 6vw, 56px) auto;
  padding: 0 clamp(16px, 4vw, 20px);
}
.celimax-section-title {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 700;
  text-align: center;
  margin: 0 0 clamp(20px, 4vw, 32px);
}

/* Full-bleed modifier -- sections 1 ("Qu'est-ce que c'est ?") and 3
   ("Amélioration prouvée...") stretch edge-to-edge of the viewport, even
   though they render inside the theme's normal (narrower) content column.
   NOTE: padding is intentionally 0 here (not symmetric clamp() padding
   like before) -- on celimax.us the photo itself touches the true left
   edge of the screen with the TEXT column padded on its own, not the
   whole section padded equally on both sides. Giving the section its own
   padding was what silently re-boxed the image last time. The title still
   needs breathing room, so it gets its own padding below. */
.celimax-section-tab_whatitis,
.celimax-section-tab_stats {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}
.celimax-section-tab_whatitis .celimax-section-title,
.celimax-section-tab_stats .celimax-section-title {
  padding: 0 clamp(16px, 4vw, 24px);
}

/* Generic text styling inside any section (headings/lists that come from
   plain product content, not a photo grid) */
.celimax-page-section h3:not(.celimax-section-title) {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 700;
  margin: 0 0 12px;
}
.celimax-page-section ul {
  margin: 12px 0;
  padding-left: 20px;
}
.celimax-page-section li {
  margin-bottom: 6px;
  line-height: 1.6;
}
.celimax-page-section p {
  line-height: 1.6;
  color: #333;
}

/* ---- Section 1: "Qu'est-ce que c'est ?" -- image + text, image bleeding
   to the true left/top edge of the screen (asymmetric -- NOT a centered
   box with equal padding both sides, that was the bug). The image column
   has zero padding so it touches the edge; the text column carries its
   own right-side padding so it doesn't. Image height stretches to match
   the text block next to it (align-items: stretch, object-fit: cover),
   which is what gives it the tall reference-photo look. */
/* (tab_whatitis, when the product has its own photo, image_19 in the
   source data). Falls back to plain text (no grid) on products with no
   photo for this section -- stays full-bleed either way. */
.celimax-whatitis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch;
}
@media (max-width: 700px) {
  .celimax-whatitis-grid {
    grid-template-columns: 1fr;
  }
}
.celimax-whatitis-image {
  min-height: 100%;
}
.celimax-whatitis-image img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 40vw, 480px);
  object-fit: cover;
  display: block;
}
.celimax-whatitis-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vw, 32px) clamp(16px, 6vw, 64px) clamp(20px, 4vw, 32px) 0;
}
@media (max-width: 700px) {
  /* stacked on mobile: image is full-width edge-to-edge on top (no extra
     rule needed, it already has no side padding); the text below gets
     normal padding on BOTH sides since it's no longer next to the image */
  .celimax-whatitis-image img {
    min-height: 60vw;
  }
  .celimax-whatitis-text {
    padding: clamp(20px, 5vw, 28px) clamp(16px, 4vw, 20px);
  }
}
.celimax-whatitis-text h3 {
  margin-top: 0;
}

/* ---- Section 2: "Description du produit" -- 2/3-col photo+text grid ---- */
/* A-Shot Technology / active % / synergy. Was too narrow/contained at
   1140px -- now grows to fill the viewport with just a fixed 48px gutter
   on each side (capped with clamp so it doesn't stay 48px on tiny phones).
   Mobile: 1.5-card horizontal carousel (scroll-snap, no JS) instead of
   stacking to 1 column -- its negative-margin peek trick has to cancel
   this SAME padding value exactly, so both use the identical clamp(). */
.celimax-section-tab_technology {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}
.celimax-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3vw, 32px);
  margin: clamp(16px, 3vw, 24px) 0 clamp(24px, 5vw, 40px);
}
.celimax-spec-grid.celimax-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) {
  .celimax-spec-grid,
  .celimax-spec-grid.celimax-cols-2 {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    margin-left: calc(-1 * clamp(16px, 4vw, 48px));
    margin-right: calc(-1 * clamp(16px, 4vw, 48px));
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
  }
  .celimax-spec-grid::-webkit-scrollbar,
  .celimax-spec-grid.celimax-cols-2::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .celimax-spec-grid .celimax-spec-item,
  .celimax-spec-grid.celimax-cols-2 .celimax-spec-item {
    flex: 0 0 72%; /* ~1.5 cards visible at once, next card peeks in */
    scroll-snap-align: start;
  }
}
.celimax-spec-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  margin-bottom: 16px;
  background: #f4f4f2; /* placeholder tone while image loads */
}
.celimax-spec-item h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.celimax-spec-item p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

/* ---- Section 3: "Amélioration prouvée des rides et des pores" ---------- */
/* Before / after clinical comparison (two photos side by side + % badge)
   -- kept in case a product ever gets a real before/after PAIR, though
   the current data only has one supporting photo per product (see
   .celimax-stats-block below, which is what actually renders today). */
.celimax-compare-block {
  max-width: 1140px;
  margin: 32px auto;
}
.celimax-compare-block h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}
.celimax-compare-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
}
.celimax-compare-grid img {
  width: 100%;
  height: auto;
  display: block;
}
.celimax-compare-label {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 0;
  background: #f2f2f2;
}
.celimax-compare-label.is-after {
  background: #1a1a1a;
  color: #fff;
}
.celimax-compare-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f4e04d;
  color: #111;
  font-weight: 700;
  font-size: 14px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

/* Single real clinical/reference photo + the (real) stat numbers -- what
   actually renders for tab_stats today (one photo, not a before/after
   pair -- see README-visual-sections.md for why). Full-bleed via the
   parent .celimax-section-tab_stats rule above.

   Same layout as section 1: photo on the LEFT bleeding to the true edge,
   text on the RIGHT (vertically centered). HTML order is image-div then
   text-div (see inject_images.py), so grid auto-placement alone gives
   this layout -- no explicit ordering needed. Markup used to be a plain
   stacked <img><p> (.celimax-stats-block) with max-width:1140/margin:auto,
   which is why it rendered as a small centered/boxed photo -- replaced by
   this grid. */
.celimax-stats-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: stretch;
}
@media (max-width: 700px) {
  .celimax-stats-grid {
    grid-template-columns: 1fr;
  }
}
.celimax-stats-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 4vw, 32px) clamp(16px, 6vw, 64px) clamp(20px, 4vw, 32px) 0;
}
.celimax-stats-text p {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  margin: 0;
}
.celimax-stats-image {
  min-height: 100%;
}
.celimax-stats-image img {
  width: 100%;
  height: 100%;
  min-height: clamp(260px, 40vw, 480px);
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .celimax-stats-text {
    padding: clamp(20px, 5vw, 28px) clamp(16px, 4vw, 20px);
  }
  .celimax-stats-image img {
    min-height: 60vw;
  }
}

/* Stat line list (for tab_stats when there's no supporting photo at all --
   text-only fallback). No photo here, so this one stays contained/centered
   rather than full-bleed -- nothing to bleed to the edge. */
.celimax-stat-list {
  margin: 16px 0;
  padding: 0 clamp(16px, 4vw, 24px);
  list-style: none;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}
.celimax-stat-list li {
  font-size: 14px;
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
}
.celimax-stat-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #b7a33f;
}