:root {
	--wd-cat-brd-radius: 50%;
	--wd-text-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(0,0,0);
	--wd-text-font-size: 16px;
	--wd-title-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(0,0,0);
	--wd-entities-title-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: rgb(0,0,0);
	--wd-entities-title-color-hover: rgba(51, 51, 51, 0.65);
	--wd-alternative-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: rgb(0,0,0);
	--wd-widget-title-font-size: 20px;
	--wd-header-el-font: "buenos aires", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: none;
	--wd-header-el-font-size: 16px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(224,105,111);
	--wd-alternative-color: rgb(17,18,17);
	--btn-default-bgcolor: rgb(17,18,17);
	--btn-default-bgcolor-hover: rgb(51,51,51);
	--btn-accented-bgcolor: rgb(248,189,24);
	--btn-accented-bgcolor-hover: rgb(237,173,23);
	--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-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;
}
: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(255,255,255);
	background-image: none;
}
html .wd-checkout-steps {
	font-size: 16px;
	text-transform: none;
}
html table th {
	text-transform: none;
}
html .wd-nav-mobile > li > a, html .wd-nav.wd-layout-drilldown > li > a, html .wd-nav.wd-layout-drilldown > li [class*="sub-menu"] > :is(.menu-item,.wd-drilldown-back) > a, html .wd-nav.wd-layout-drilldown .woocommerce-MyAccount-navigation-link > a {
	text-transform: none;
}
html .btn.wd-buy-now-btn {
	color: rgb(255,255,255);
	background: rgb(17,18,17);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(255,255,255);
	background: rgb(51,51,51);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 15px;
	--wd-arrow-color: rgb(36,36,36);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-color-dis: rgb(36,36,36);
	--wd-arrow-bg: rgb(244,244,244);
	--wd-arrow-bg-hover: rgb(248,189,24);
	--wd-arrow-bg-dis: rgb(244,244,244);
	--wd-arrow-radius: 20px;
	--wd-arrow-brd-color: rgba(0,0,0,0.11);
	--wd-arrow-brd: 1px solid;
}
.wd-nav-scroll {
	--wd-nscroll-drag-bg: rgb(17,18,17);
	--wd-nscroll-drag-bg-hover: rgb(17,18,17);
}
.wd .product-label.onsale {
	background-color: rgb(77,172,153);
}
.wd .product-label.new {
	background-color: rgb(77,172,153);
}
.wd .product-label.featured {
	background-color: rgb(77,172,153);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-widget-title-font-size: 18px;
	}
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: -30px;
	}

}

@media (max-width: 768.98px) {
	.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
		--wd-arrow-offset-h: 15px;
	}

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

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


.wd-page-title {
background-color: rgb(224,105,111);
}

@font-face {
	font-family: "buenos aires";
	src: url("//qandaskin.ma/wp-content/uploads/2026/06/BuenosAires-Regular-1.woff2") format("woff2"), 
url("//qandaskin.ma/wp-content/uploads/2026/06/BuenosAires-Regular-1.woff") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "Spezia";
	src: url("//qandaskin.ma/wp-content/uploads/2026/06/spezia-bold.woff2") format("woff2"), 
url("//qandaskin.ma/wp-content/uploads/2026/06/spezia-bold.woff") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

/* ============================================================
   Q+A-Style Header
   - HOMEPAGE (body.home): header overlaps hero, transparent/glass
     until scrolled, then rainbow + white bottom bar
   - ALL OTHER PAGES: rainbow effect always running
   ============================================================ */

@keyframes qa-colorchange {
  0%   { background-color: #f6864f; }
  10%  { background-color: #f9485c; }
  20%  { background-color: #ea7f88; }
  30%  { background-color: #f1beca; }
  40%  { background-color: #7f2742; }
  50%  { background-color: #103595; }
  60%  { background-color: #0c717d; }
  70%  { background-color: #00a19a; }
  80%  { background-color: #88db65; }
  90%  { background-color: #fdc743; }
  100% { background-color: #f6864f; }
}

/* ---- ALWAYS: Force logo row transparent (lets ::before show through) ---- */
.whb-header .whb-row.whb-general-header,
.whb-header .whb-row.whb-general-header.whb-with-bg,
.whb-header .whb-row.whb-sticky-row.whb-with-bg {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
  transition: box-shadow 0.4s ease !important;
}

/* ---- ::before pseudo-element for the animated rainbow background ---- */
.whb-header .whb-row.whb-general-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: qa-colorchange 30s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

/* ---- HOMEPAGE ONLY: when SCROLLED (.qa-scrolled added via JS), run rainbow ---- */
body.home .whb-header.qa-scrolled .whb-row.whb-general-header::before {
  opacity: 1;
  animation-play-state: running;
}

body.home .whb-header.qa-scrolled .whb-row.whb-general-header {
  box-shadow: 0 2px 24px rgba(0,0,0,0.15) !important;
}

/* ---- ALL OTHER PAGES: rainbow always on, no transparency phase ---- */
body:not(.home) .whb-header .whb-row.whb-general-header::before {
  opacity: 1 !important;
  animation-play-state: running !important;
}

body:not(.home) .whb-header .whb-row.whb-general-header {
  box-shadow: 0 2px 24px rgba(0,0,0,0.15) !important;
}

/* ---- Header content sits above the ::before color layer ---- */
.whb-header .whb-row.whb-general-header > .container {
  position: relative;
  z-index: 1;
}

/* ---- Text/icons WHITE at all times on logo row ---- */
.whb-header .whb-general-header .woodmart-nav-link,
.whb-header .whb-general-header .nav-link-text,
.whb-header .whb-general-header .wd-tools-icon,
.whb-header .whb-general-header .wd-tools-icon:before,
.whb-header .whb-general-header .wd-cart-number,
.whb-header .whb-general-header .wd-cart-subtotal,
.whb-header .whb-general-header .wd-tools-text,
.whb-header .whb-general-header .wd-tools-text * {
  color: #fff !important;
}

/* ---- Logo stays white ---- */
.whb-header .wd-logo img,
.whb-header .site-logo img {
  filter: brightness(0) invert(1) !important;
  transition: filter 0.3s ease !important;
}

/* ---- Mobile header icons white ---- */
.whb-header .whb-mobile-left .wd-tools-icon,
.whb-header .whb-mobile-right .wd-tools-icon,
.whb-header .whb-mobile-left .wd-tools-icon:before,
.whb-header .whb-mobile-right .wd-tools-icon:before {
  color: #fff !important;
}
.whb-header .whb-mobile-center .wd-logo img {
  filter: brightness(0) invert(1) !important;
}

/* ============================================================
   HOMEPAGE: Header overlaps hero (glass bottom nav at top,
   solid white bottom nav once scrolled)
   ============================================================ */

/* Pull the whole header out of normal flow so the hero
   starts at the very top of the viewport */
body.home .whb-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

/* ---- TOP OF HOME (before .qa-scrolled): bottom nav row = full-bleed white glass ---- */
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom {
  position: relative !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}

/* White text/icons on the glass nav row */
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .woodmart-nav-link,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .nav-link-text,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-tools-icon,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-tools-icon:before,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-cart-number,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-cart-subtotal,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-tools-text,
body.home .whb-header:not(.qa-scrolled) .whb-row.whb-header-bottom .wd-tools-text * {
  color: #fff !important;
}

/* ---- SCROLLED ON HOME: bottom nav row = full-bleed solid white, black text ---- */
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom {
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  z-index: -1;
  pointer-events: none;
}

body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .woodmart-nav-link,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .nav-link-text,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-tools-icon,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-tools-icon:before,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-cart-number,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-cart-subtotal,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-tools-text,
body.home .whb-header.qa-scrolled .whb-row.whb-header-bottom .wd-tools-text * {
  color: #1c1c1c !important;
}

/* =====================================================
   Q+A Skin — Product Tabs with Colored Backgrounds
   (WooCommerce's own .wd-products-tabs widget)
   ===================================================== */

.wd-products-tabs .wd-tabs {
  background: transparent;
}

.wd-products-tabs .wd-tabs-content-wrapper {
  background: #c8e8dd;
  padding: 28px 20px 32px;
  transition: background 0.3s ease;
}

.wd-products-tabs .wd-tabs[data-active-tab="0"] .wd-tabs-content-wrapper { background: #c8e8dd; }
.wd-products-tabs .wd-tabs[data-active-tab="1"] .wd-tabs-content-wrapper { background: #c5d8f0; }
.wd-products-tabs .wd-tabs[data-active-tab="2"] .wd-tabs-content-wrapper { background: #c8e8dd; }

.wd-products-tabs .wd-tabs-header {
  background: #fff;
  border-bottom: 2px solid #e5e5e0;
}

.wd-products-tabs .wd-nav-tabs .wd-nav-link {
  font-size: 15px;
  font-weight: 500;
  color: #999;
  padding: 16px 22px 14px;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.wd-products-tabs .wd-nav-tabs li.wd-active .wd-nav-link,
.wd-products-tabs .wd-nav-tabs li:hover .wd-nav-link {
  color: #1a5e45;
  border-bottom-color: #1a5e45;
}

.wd-products-tabs .wd-nav-tabs li:nth-child(1).wd-active .wd-nav-link { color: #1a5e45; border-bottom-color: #1a5e45; }
.wd-products-tabs .wd-nav-tabs li:nth-child(2).wd-active .wd-nav-link { color: #1a4e8c; border-bottom-color: #1a4e8c; }
.wd-products-tabs .wd-nav-tabs li:nth-child(3).wd-active .wd-nav-link { color: #b8600a; border-bottom-color: #b8600a; }

.wd-products-tabs .wd-product-wrapper {
  background: #fff !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: none !important;
}

.wd-products-tabs .products-bordered-grid-ins .wd-product-wrapper {
  border: none !important;
}

.wd-products-tabs .wd-product-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.wd-products-tabs .wd-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wd-products-tabs .product-element-bottom {
  padding: 12px 14px 16px !important;
  background: #fff;
}

.wd-products-tabs .wd-entities-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
}

.wd-products-tabs .wd-entities-title a {
  color: #1a1a1a !important;
  text-decoration: none !important;
}

.wd-products-tabs .wd-product-cats {
  display: none !important;
}

.wd-products-tabs .price .woocommerce-Price-amount {
  font-size: 13px !important;
  color: #555 !important;
  font-weight: 400 !important;
}

.wd-products-tabs .wd-add-btn a,
.wd-products-tabs .wd-add-btn-replace a {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: transparent !important;
  border: 1.5px solid #222 !important;
  border-radius: 4px !important;
  color: #222 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 0 !important;
  margin-top: 10px !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  transition: background 0.15s, color 0.15s !important;
}

.wd-products-tabs .wd-add-btn a:hover,
.wd-products-tabs .wd-add-btn-replace a:hover {
  background: #222 !important;
  color: #fff !important;
}

.wd-products-tabs .wd-add-btn .wd-action-icon {
  display: none !important;
}

.wd-products-tabs .wd-wishlist-btn,
.wd-products-tabs .wd-quick-view-btn {
  background: rgba(255,255,255,0.9) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wd-products-tabs .star-rating {
  font-size: 13px !important;
  color: #f5a623 !important;
  margin: 4px 0 !important;
}

.wd-products-tabs .wd-btn-arrow {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* =====================================================
   Custom g-tabs block — pasted into product description
   ===================================================== */

.g-tabs {
  max-width: 750px !important;
  margin: 40px auto !important;
  padding: 20px !important;
}

.g-tabs--nav {
  border-bottom: 1px solid #eaeaea !important;
  margin-bottom: 25px !important;
}

.g-tabs--nav--list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 30px !important;
}

.g-tabs--nav--item {
  display: flex !important;
  list-style: none !important;
}

.g-tabs--nav--btn {
  background: none !important;
  border: none !important;
  padding: 10px 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  color: #111 !important;
  border-bottom: 3px solid transparent !important;
  margin-bottom: -1px !important;
  font-family: inherit !important;
  transition: border-color 0.2s ease !important;
  line-height: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.g-tabs--nav--btn.is-active {
  border-bottom: 3px solid #eab8c6 !important;
}

.g-tabs--block {
  display: none !important;
  animation: fadeIn 0.3s ease-in-out;
}

.g-tabs--block.is-active {
  display: block !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Rich Text / RTE --- */
.rte p,
.metafield-rich_text_field p {
  font-size: 15px !important;
  line-height: 1.5625 !important;
  color: #0b0b0b !important;
  margin-bottom: 1.2em !important;
}

.rte h3,
.metafield-rich_text_field h3 {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.8em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.rte strong {
  font-weight: 700 !important;
}

.rte a {
  color: #111 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* --- Badges --- */
.g-product--badges {
  list-style: none !important;
  padding: 0 !important;
  margin: 35px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
}

.g-product--badges--item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 75px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.g-product--badges--icon {
  margin: 0 !important;
}

.g-product--badges--icon img {
  width: 55px !important;
  height: 55px !important;
  max-width: 55px !important;
  object-fit: contain !important;
  margin: 0 auto 10px !important;
  display: block !important;
}

.g-product--badges--label {
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

/* --- Skincare Checklist --- */
.g-product--checklist {
  margin: 40px 0 !important;
}

.g-product--checklist--heading,
.g-product--checklist--col > div:first-child {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #0b0b0b !important;
  margin-bottom: 15px !important;
}

.g-product--checklist--grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 50px !important;
  max-width: 650px !important;
}

.g-product--checklist--list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Matches inspector: 16px, #0B0B0B, margin-bottom 4px */
.g-product--checklist--item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: #0b0b0b !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  list-style: none !important;
}

.g-product--checklist--item svg {
  width: 17px !important;
  height: 15px !important;
  fill: #0b0b0b !important;
  flex-shrink: 0 !important;
}

/* --- Outro/Footer Texts --- */
.g-product--outro {
  margin-top: 30px !important;
}
/* ============================================================
   Q+A SKIN — PRODUCT CARD FINAL
   Structure après JS :
   h3.wd-entities-title [ a (titre) | span.qa-size-badge ]
   div.wrap-price        [ span.price ]
   div.qa-rating-row     [ stars | count ]
   div.wd-add-btn        [ bouton ]
   ============================================================ */

/* 1. Card */
.wd-product .wd-product-wrapper {
  background: #fff !important;
  border-radius: 6px !important;
  border: 1px solid #e2e2e2 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: box-shadow .2s ease !important;
}
.wd-product .wd-product-wrapper:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.10) !important;
}

/* 2. Image — cadre blanc postcard */
.wd-product .wd-product-thumb {
  padding: 12px 12px 0 !important;
  background: #fff !important;
}
.wd-product .wd-product-thumb .wd-product-img-link,
.wd-product .wd-product-thumb .wd-product-img-hover {
  display: block !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
.wd-product .wd-product-thumb img { display: block !important; width: 100% !important; }

/* 3. Contenu bas — colonne verticale */
.wd-product .product-element-bottom {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 10px 12px 12px !important;
  gap: 0 !important;
}

/* 4. H3 — titre à gauche (normal) + badge à droite (gras) */
.wd-product .wd-entities-title {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 0 5px !important;
  font-size: inherit !important;
}
.wd-product .wd-entities-title a {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #111 !important;
  text-decoration: none !important;
  flex: 1 !important;
}

/* Badge dans h3 (après JS) — visible et gras */
.wd-product .wd-entities-title .qa-size-badge {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.35 !important;
  display: block !important;
}

/* Badge encore dans wrap-price (avant JS) — caché */
.wd-product .wrap-price .qa-size-badge {
  display: none !important;
}

/* 5. Catégorie — cachée */
.wd-product .wd-product-cats { display: none !important; }

/* 6. Prix seul */
.wd-product .wrap-price {
  display: block !important;
  margin: 0 0 5px !important;
}
.wd-product .wrap-price .woocommerce-Price-amount,
.wd-product .wrap-price .woocommerce-Price-amount bdi {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;
}

/* 7. Rating row encore dans wrap-price (avant JS) — caché */
.wd-product .wrap-price .qa-rating-row {
  display: none !important;
}
/* Rating row après JS (frère direct de product-element-bottom) — visible */
.wd-product .product-element-bottom > .qa-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 10px !important;
}

/* 8. Étoiles Unicode ★ (pas de dépendance font) */
.wd-product .qa-rating-row .star-rating {
  position: relative !important;
  display: inline-block !important;
  overflow: hidden !important;
  width: 82px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  vertical-align: middle !important;
}
.wd-product .qa-rating-row .star-rating::before {
  content: "★★★★★" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #d0d0d0 !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}
.wd-product .qa-rating-row .star-rating > span {
  display: block !important;
  overflow: hidden !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 100% !important;
}
.wd-product .qa-rating-row .star-rating > span::before {
  content: "★★★★★" !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: #f0a500 !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

/* 9. Nombre d'avis */
.wd-product .qa-review-count {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #555 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

/* 10. Bouton — petit, outline, coins droits */
.wd-product .wd-add-btn,
.wd-product .wd-add-btn.wd-add-btn-replace {
  margin: 0 !important;
}
.wd-product .wd-add-btn a.button,
.wd-product .wd-add-btn .add_to_cart_button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 0 !important;
  color: #1a1a1a !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 8px 10px !important;
  text-align: center !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  transition: background .2s ease, color .2s ease !important;
  letter-spacing: 0.3px !important;
}
.wd-product .wd-add-btn a.button:hover,
.wd-product .wd-add-btn .add_to_cart_button:hover {
  background: #1a1a1a !important;
  background-color: #1a1a1a !important;
  color: #fff !important;
}
.wd-product .wd-add-btn .wd-action-icon { display: none !important; }

/* 11. Hover card — caché */
.wd-product .wd-product-card-hover { display: none !important; }

/* 12. Quick-view / wishlist au hover */
.wd-product .wd-buttons { opacity: 0 !important; transition: opacity .2s !important; }
.wd-product .wd-product-wrapper:hover .wd-buttons { opacity: 1 !important; }
/* 1. Coins FULL SQUARE — card wrapper */
.wd-product .wd-product-wrapper,
.wd-product .wd-product-wrapper * {
  border-radius: 0 !important;
}

/* 2. Étoiles ORANGE */
.wd-product .qa-rating-row .star-rating > span::before {
  color: #000 !important;
}
.wd-product .qa-rating-row .star-rating::before {
  color: #000 !important;
}

/* 3. Texte REVIEWS — couleur normale */
.wd-product .qa-review-count {
  color: #000 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* 4. Bouton — petit, aligné à GAUCHE, pas pleine largeur */
.wd-product .wd-add-btn,
.wd-product .wd-add-btn.wd-add-btn-replace {
  display: flex !important;
  justify-content: flex-start !important;
}
.wd-product .wd-add-btn a.button,
.wd-product .wd-add-btn .add_to_cart_button {
  display: inline-block !important;
  width: auto !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  border: 1.5px solid #1a1a1a !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1a1a1a !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.wd-product .wd-add-btn a.button:hover,
.wd-product .wd-add-btn .add_to_cart_button:hover {
  background: #1a1a1a !important;
  color: #fff !important;
}
/* ================================================================
   QANDA SKIN — MOBILE NAV — FRESH v4
   ================================================================ */

@media (max-width: 1024px) {

  /* ── PANEL ── */
  .mobile-nav.wd-side-hidden-nav {
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .wd-side-overlay { display: none !important; }

  /* ── TEAL HEADER ── */
.mobile-nav .wd-heading {
    order: 0 !important;
    flex-shrink: 0 !important;
    /* REMOVED: background: #266B77 — replaced with animation below */
    animation: qa-colorchange 30s infinite !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    min-height: 72px !important; /* was 64px */
    padding: 10px 60px !important;
    box-sizing: border-box !important;
}

  .mobile-nav .wd-heading::before {
    content: '' !important;
    display: block !important;
    background-image: url('https://qandaskin.ma/wp-content/uploads/2026/06/q-a-logo-white.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    width: 107px !important;
    height: 36px !important;
  }

  .mobile-nav .wd-heading .close-side-widget {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }

  .mobile-nav .wd-heading .close-side-widget > a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  .mobile-nav .wd-heading .close-side-widget .wd-action-text {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  /* HIDE WoodMart X icon — JS injects clean SVG instead */
  .mobile-nav .wd-heading .wd-action-icon {
    display: none !important;
  }

  /* ── MENU LIST ── */
  .mobile-nav .mobile-pages-menu {
    order: 1 !important;
    display: block !important;
    flex: 0 0 auto !important;
    padding: 6px 0 !important;
    background: #fff !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .mobile-nav .mobile-pages-menu li {
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .mobile-nav .mobile-pages-menu > li.item-level-0 {
    margin-bottom: 6px !important;
    position: relative !important;
  }

  .mobile-nav .mobile-pages-menu > li.item-level-0 > a.woodmart-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 14px 50px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    border: none !important;
    text-decoration: none !important;
  }

  /* HIDE WoodMart arrow spans — JS injects clean SVG chevrons instead */
  .mobile-nav .mobile-pages-menu > li.item-level-0 > span.wd-nav-opener {
    display: none !important;
  }

  /* ── ITEM COLORS ── */
  .mobile-nav .menu-item-2097.item-level-0 > a.woodmart-nav-link { background-color: #f29f3c !important; }
  .mobile-nav .menu-item-2117.item-level-0 > a.woodmart-nav-link { background-color: #EE7C4C !important; }
  .mobile-nav .menu-item-2130.item-level-0 > a.woodmart-nav-link { background-color: #D8575E !important; }
  .mobile-nav .menu-item-2144.item-level-0 > a.woodmart-nav-link { background-color: #369690 !important; }
  .mobile-nav .menu-item-2147.item-level-0 > a.woodmart-nav-link { background-color: #5679CA !important; }
  .mobile-nav .menu-item-2146.item-level-0 > a.woodmart-nav-link { background-color: #73233A !important; }
  .mobile-nav .menu-item-2145.item-level-0 > a.woodmart-nav-link { background-color: #92D46C !important; }
  .mobile-nav .q-account-item > a.woodmart-nav-link              { background-color: #EE7C4C !important; }

  /* ── SUB-MENUS ── */
  .mobile-nav .mobile-pages-menu > li.item-level-0 > ul.wd-sub-menu {
    background: #fff !important;
    padding: 4px 0 6px 0 !important;
  }

  .mobile-nav .wd-sub-menu .item-level-1 > a.woodmart-nav-link {
    color: #333 !important;
    font-size: 12px !important;
    padding: 10px 20px !important;
    display: block !important;
    border-bottom: 1px solid #eee !important;
    background: transparent !important;
  }

  .mobile-nav .sub-sub-menu li { background: #f7f7f7 !important; }

  .mobile-nav .sub-sub-menu .item-level-2 > a {
    color: #555 !important;
    font-size: 12px !important;
    padding: 8px 32px !important;
    display: block !important;
    background: transparent !important;
  }

  /* ── TEAL SEARCH FOOTER ── */
  .mobile-nav > .wd-search-form {
    order: 99 !important;
    background: #266B77 !important;
    padding: 22px 28px 28px !important;
    flex-shrink: 0 !important;
  }

  .mobile-nav .wd-search-form .searchform {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 14px 0 !important;
    border-bottom: 1.5px solid #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .mobile-nav .wd-search-form input.s {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
  }

  .mobile-nav .wd-search-form input.s::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    letter-spacing: 2px !important;
  }

  .mobile-nav .wd-search-form button.searchsubmit {
    all: unset !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  /* Hide WoodMart's default submit content */
  .mobile-nav .wd-search-form button.searchsubmit > span:not(.q-search-ico),
  .mobile-nav .wd-search-form button.searchsubmit::before,
  .mobile-nav .wd-search-form button.searchsubmit::after {
    display: none !important;
    content: none !important;
  }

  .mobile-nav .wd-search-form .wd-clear-search,
  .mobile-nav .wd-search-results-wrapper {
    display: none !important;
  }

} /* end @media */
/* ── VISUAL CHEVRON on items with sub-menus ── */
@media (max-width: 1024px) {

  .mobile-nav .mobile-pages-menu > li.menu-item-has-children.item-level-0 > a.woodmart-nav-link::after {
    content: '' !important;
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-left: 10px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
  }

}
/* Hide the billing country field on the checkout page */
#billing_country_field {
    display: none !important;
}