.wd-popup.wd-promo-popup{
	background-color:#111111;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:left center;
}

.page-title-default{
	background-color:#0a0a0a;
	background-image: url(https://pepvelle.com/wp-content/uploads/2025/09/banner2.jpg);
	background-size:cover;
	background-position:center center;
}

.footer-container{
	background-color:rgb(26,60,52);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

:root{
--wd-text-font:"Inter", Arial, Helvetica, sans-serif;
--wd-text-font-weight:400;
--wd-text-color:rgb(40,53,23);
--wd-text-font-size:16px;
}
:root{
--wd-title-font:"Inter", Arial, Helvetica, sans-serif;
--wd-title-font-weight:800;
--wd-title-color:rgb(40,53,23);
}
:root{
--wd-entities-title-font:"Inter", Arial, Helvetica, sans-serif;
--wd-entities-title-font-weight:400;
--wd-entities-title-color:rgb(40,53,23);
--wd-entities-title-color-hover:rgb(51 51 51 / 65%);
}
:root{
--wd-alternative-font:"Inter", Arial, Helvetica, sans-serif;
}
:root{
--wd-widget-title-font:"Inter", Arial, Helvetica, sans-serif;
--wd-widget-title-font-weight:600;
--wd-widget-title-transform:uppercase;
--wd-widget-title-color:rgb(0,0,0);
--wd-widget-title-font-size:20px;
}
:root{
--wd-header-el-font:"Inter", Arial, Helvetica, sans-serif;
--wd-header-el-font-weight:600;
--wd-header-el-transform:uppercase;
--wd-header-el-font-size:18px;
}
:root{
--wd-primary-color:rgb(71,85,68);
}
:root{
--wd-alternative-color:rgb(242,255,226);
}
:root{
--wd-link-color:rgb(0,0,0);
--wd-link-color-hover:rgb(40,54,24);
}
:root{
--btn-default-bgcolor:#f7f7f7;
}
:root{
--btn-default-bgcolor-hover:#efefef;
}
:root{
--btn-shop-bgcolor:rgb(40,54,24);
}
:root{
--btn-shop-bgcolor-hover:rgb(0,178,132);
}
:root{
--btn-accent-bgcolor:rgb(40,54,24);
}
:root{
--btn-accent-bgcolor-hover:#74a32f;
}
:root{
--notices-success-bg:#459647;
}
:root{
--notices-success-color:#fff;
}
:root{
--notices-warning-bg:#E0B252;
}
:root{
--notices-warning-color:#fff;
}
	:root{
	
	
			--wd-form-brd-radius: 0px;
	
	--wd-form-brd-width: 1px;

	--btn-default-color: #333;
	--btn-default-color-hover: #333;

	--btn-shop-color: #fff;
	--btn-shop-color-hover: #fff;

	--btn-accent-color: #fff;
	--btn-accent-color-hover: #fff;
	
	
	
	
	
	
	
	
	
			--btn-default-brd-radius: 5px;
		--btn-default-box-shadow: none;
		--btn-default-box-shadow-hover: none;
	
			--btn-shop-brd-radius: 5px;
		--btn-shop-box-shadow: none;
		--btn-shop-box-shadow-hover: none;
	
			--btn-accent-brd-radius: 5px;
		--btn-accent-box-shadow: none;
		--btn-accent-box-shadow-hover: none;
		}

	/* Site width */
		/* Header Boxed */
	@media (min-width: 1025px) {
		.whb-boxed:not(.whb-sticked):not(.whb-full-width) .whb-main-header {
			max-width: 1192px;
		}
	}

	.container {
		max-width: 1222px;
	}
	
	
	@media (min-width: 1222px) {

		[data-vc-full-width]:not([data-vc-stretch-content]) {
			padding-left: calc((100vw - 1222px) / 2);
			padding-right: calc((100vw - 1222px) / 2);
		}

		.platform-Windows [data-vc-full-width]:not([data-vc-stretch-content]) {
			padding-left: calc((100vw - 1239px) / 2);
			padding-right: calc((100vw - 1239px) / 2);
		}
	}

	
/* Quick view */
div.wd-popup.popup-quick-view {
	max-width: 920px;
}

/* Shop popup */
div.wd-popup.wd-promo-popup {
	max-width: 800px;
}

/* Age verify */
div.wd-popup.wd-age-verify {
	max-width: 500px;
}

/* Header Banner */
.header-banner {
	height: 40px;
}

body.header-banner-display .website-wrapper {
	margin-top:40px;
}

/* Tablet */
@media (max-width: 1024px) {
	/* header Banner */
	.header-banner {
		height: 40px;
	}
	
	body.header-banner-display .website-wrapper {
		margin-top:40px;
	}
}

.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 280px;
}
		
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//pepvelle.com/wp-content/themes/woodmart/fonts/woodmart-font.woff2?v=6.1.4") format("woff2"),
	url("//pepvelle.com/wp-content/themes/woodmart/fonts/woodmart-font.woff?v=6.1.4") format("woff");
}

@font-face {
	font-family: "wanted sans";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-Bold";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-Regular";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-Medium";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-SemiBold";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-ExtraBold";
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "WantedSans-ExtraBlack";
	font-weight: 400;
	font-style: normal;
}

/* --- 1. GLOBAL & BRANDING --- */
body {
  background: #F6F3F2 !important;
}

/* Fix announcement bar text cut issue */
.wd-info-box-carousel,
.wd-info-box-carousel .wd-info-box {
    height: 40px !important; /* adjust as needed */
    display: flex;
    align-items: center !important;
    justify-content: center;
    overflow: hidden;
}

/* Fix inner text */
.wd-info-box-carousel .wd-info-box-content {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Prevent text clipping */
.wd-info-box-carousel p,
.wd-info-box-carousel span {
    margin: 0;
    line-height: normal !important;
}

/* --- FIX: TOP BAR CUT-OFF --- */

/* --- LUXE HEADING & TAB PAIRING --- */

/* 1. First Line: Modern, Clean Sans */
.must-have-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 48px !important;
    color: #1A3C34 !important;
    letter-spacing: -1px !important;
}

/* 2. Second Line: Elegant, Italic Serif */
.skincare-subtitle {
    font-family: 'Inter', serif !important;
    font-weight: 600 !important;
    font-size: 56px !important;
	  margin-top: -25px !important; /* Increase this to -40px if needed */
    display: block !important;
    color: #4C463E !important; /* Keep same color for elegance */
}

/* 3. The Tabs: Minimalist & Spaced */
.wd-nav-tabs li a {
    font-family: 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important; /* The "Designer" space */
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #7a7a7a !important;
    border: 1px solid #eeeeee !important;
    border-radius: 4px !important; /* Very slight rounding for modern feel */
    padding: 10px 18px !important;
    transition: 0.3s all ease !important;
}

/* Tab: Active/Hover State */
.wd-nav-tabs li.wd-active a, 
.wd-nav-tabs li:hover a {
    background-color: #1A3C34 !important;
    color: #f2ffe2 !important;
    border-color: #1A3C34 !important;
}

/* Force the labels/stats to stay in a row on all screens */
.hero-label-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

/* Ensure the columns inside don't take up 100% width on mobile */
.hero-label-container > .vc_column_container {
    width: auto !important;
    flex: 1 !important;
    padding: 0 10px !important;
}

/* Responsive Padding for Hero Column */
.hero-left-col {
    padding: 100px !important;
}

@media (max-width: 768px) {
    .hero-left-col {
        padding: 30px !important;
    }
}

/* --- 2. HEADER & NAVIGATION --- */
.whb-with-shadow {
  box-shadow: 0 1px 12px rgba(26, 60, 52, 0.08) !important;
}

/* Menu Normal Case (Not Uppercase) */
.wd-nav-main > li > a, 
.wd-nav-secondary > li > a {
    text-transform: capitalize !important;
    font-weight: 600 !important;
}

/* Search Bar Refinement */
form.searchform .s {
  border-color: #1a3c34 !important;
  border-radius: 8px !important;
  background: #f6f3f2 !important;
  color: #1a3c34 !important;
}

.searchform .searchsubmit {
  color: #ffffff !important;
}

.wd-search-cat > a {
  border-right: 1px solid #1a3c34;
  border-left: 1px solid #1a3c34;
}

/* --- 3. PREMIUM DARK HEADER ICONS --- */
.wd-header-my-account.wd-tools-element,
.wd-header-cart.wd-tools-element {
    background: #1A3C34 !important; /* Dark Green Background */
    border-radius: 50% !important;
}

/* Target Glyphs & Icons inside the buttons */
.wd-header-my-account.wd-tools-element > a,
.wd-header-cart.wd-tools-element > a,
.wd-header-cart.wd-tools-element .wd-tools-icon:before,
.wd-header-my-account.wd-tools-element .wd-tools-icon:before {
    color: #f2ffe2 !important; /* Pistachio Icon Color */
}

/* Cart Number Styling */
.wd-cart-number {
    background-color: #f2ffe2 !important;
    color: #1A3C34 !important;
}

/* --- 4. GLOBAL BUTTONS & CTAs --- */
.btn, 
.button, 
.added_to_cart, 
[type="submit"], 
[type="button"],
button.wc-forward,
button.checkout-button {
  background-color: #1a3c34 !important;
  /* color: #f2ffe2 !important; */
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.show-password-input::before {
  content: "👁️‍🗨️" !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}



.input[type="text"].woocommerce-input:not([type="password"]) ~ .show-password-input::before {
  content: "Hide" !important;
}

.btn-secondary-outline {
  border: 1px solid #1a3c34 !important;
  color: #1a3c34 !important;
  background: transparent !important;
}

/* --- 5. PRODUCT GRID ITEMS --- */
.product-grid-item {
  background-color: #ffffff !important;
  border: 1px solid #f0f0f0;
  border-radius: 12px !important;
  padding-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.product-grid-item img {
  border-radius: 12px 12px 0px 0px !important;
}

/* --- 6. PRICING & TYPOGRAPHY --- */
.price del, del .amount {
  color: #999999 !important;
  font-weight: 400;
}

.price ins, ins .amount {
  color: #1a3c34 !important;
  font-weight: 700;
}

h1 {
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: #1a3c34 !important;
}

h2-secondary {
  font-weight: 600 !important;
  color: #f2ffe2 !important;
}

h2 {
  font-weight: 600 !important;
  color: #1a3c34 !important;
}

.hero-subheading {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #1a3c34 !important;
}

.hero-stats-num {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #1a3c34 !important;
}

.hero-stats-label {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #666 !important;
  font-weight: 600 !important;
}

.hero-badge {
  display: inline-block !important;
  background: #1a3c34 !important;
  color: #f2ffe2 !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* --- 7. CLEANUP & UTILITIES --- */
.single-product-page .product-tabs-wrapper ul.tabs.wc-tabs {
  background: #f6f3f2 !important;
}

.wd-popup.wd-promo-popup {
  background-color: #1a3c34 !important;
}

.twoProductSection .firstBoxSection,
.twoProductSection .secondBoxSection {
  background: #f2ffe2 !important;
  color: #1a3c34 !important;
}

.green-bg {
  background: linear-gradient(90deg, #f6f3f2 72%, #ffffff 73%) !important;
}

.wd-prefooter, .page-title .container, ul.wd-nav-product-cat {
  display: none !important;
}


some button as you see are looking blank as you see whats wrong??@media (min-width: 1025px) {
	.whb-main-header .container {
    max-width: 1335px;
}
.products-bordered-grid.elements-grid:not(.elements-list) [class*="-grid-item"] {
    border-radius: 10px;
    background: #b5c99a;
    margin-bottom: 20px !important;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.mobile-nav .searchform input[type="text"] {
    height: 50px;
}
.twoColSection {
margin-bottom: 0px;
}
.twoColSection .vc_custom_1506945471614 {
	margin-bottom: 0px !important;
}
.twoProductSection {
	background: #f2ffe2;
}
.firstBoxSection {
margin-bottom: 5vh;
}
.products .product-grid-item.wd-with-labels.product {
	max-width: 46% !important;
	margin-bottom: 20px !important;
}
.products-bordered-grid.elements-grid:not(.elements-list) [class*="-grid-item"] {
	margin-bottom: 20px !important;
}
}

@media (min-width: 577px) and (max-width: 767px) {
	/* --- 1. GLOBAL & BRANDING --- */
body {
    background: #ffffff !important;
}

/* Primary Headlines & Typography */
h1 {
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #1A3C34 !important;
}

.hero-subheading {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #1A3C34 !important;
}

/* --- 2. HEADER & NAVIGATION --- */
.whb-with-shadow {
    box-shadow: 0 1px 12px rgba(26, 60, 52, 0.08) !important;
}

/* Force Menu to Normal Case (Not Uppercase) */
.wd-nav-main > li > a, 
.wd-nav-secondary > li > a {
    text-transform: capitalize !important;
    font-weight: 600 !important;
}

/* Header Search Bar */
form.searchform .s {
    border-color: #1A3C34 !important;
    border-radius: 8px !important;
    background: #F6F3F2 !important;
    color: #1A3C34 !important;
}

.searchform .searchsubmit {
    color: #ffffff !important;
}

/* Account & Cart Icons (Dark BG + Accent Icon) */
.wd-header-my-account.wd-tools-element,
.wd-header-cart.wd-tools-element {
    background: #1A3C34 !important; /* Dark Green BG */
    color: #f2ffe2 !important;      /* Pistachio Icon */
    border-radius: 50% !important;
}

/* --- 3. BUTTONS & PRODUCT CARDS --- */
.btn, .button, button, .added_to_cart, [type="submit"], [type="button"] {
    background-color: #1A3C34 !important;
    color: #f2ffe2 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.product-grid-item {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0;
    border-radius: 12px !important;
    padding-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

.product-grid-item img {
    border-radius: 12px 12px 0px 0px !important;
}

/* --- 4. SECTION SPECIFIC FIXES --- */
.twoColSection, .twoColSection .vc_custom_1506945471614 {
    margin-bottom: 0px !important;
}

.twoProductSection {
    background: #f2ffe2 !important;
}

.firstBoxSection {
    margin-bottom: 5vh !important;
}

.hero-badge {
    display: inline-block !important;
    background: #1A3C34 !important;
    color: #f2ffe2 !important;
    padding: 6px 18px !important;
    border-radius: 50px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* --- 5. MOBILE RESPONSIVENESS (PHONES) --- */
@media (max-width: 768px) {
    
    /* Hero Headline Scaling */
    h1 {
        font-size: 34px !important;
        text-align: center !important;
    }
    
    .hero-subheading {
        text-align: center !important;
        font-size: 16px !important;
    }

    /* Product Grid: Show 2 per row on mobile */
    .products .product-grid-item.wd-with-labels.product {
        max-width: 47% !important;
        margin-bottom: 15px !important;
        display: inline-block !important;
    }

    /* Mobile Nav Search */
    .mobile-nav .searchform input[type="text"] {
        height: 50px !important;
    }

    /* Hero Background Image Fix (The Lady) */
    /* Give your WPBakery Row the extra class: mobile-hero-fix */
    .mobile-hero-fix {
        background-position: right center !important;
        background-size: cover !important;
        padding-bottom: 80px !important;
        padding-top: 40px !important;
    }

    /* Stats row fix on mobile */
    .hero-stats-num {
        font-size: 24px !important;
        text-align: center;
    }
    
    .hero-stats-label {
        font-size: 9px !important;
        text-align: center;
    }
}

}

@media (max-width: 576px) {
	/* --- 1. GLOBAL & BRANDING --- */
body { background: #ffffff !important; }

h1 {
    font-weight: 800 !important;
    line-height: 1.1 !important;
    color: #1A3C34 !important;
}

/* --- 2. HEADER & NAVIGATION --- */
.whb-with-shadow { box-shadow: 0 1px 12px rgba(26, 60, 52, 0.08) !important; }

/* Menu Normal Case */
.wd-nav-main > li > a, .wd-nav-secondary > li > a {
    text-transform: capitalize !important;
    font-weight: 600 !important;
}

/* Search & Buttons */
form.searchform .s {
    border-color: #1A3C34 !important;
    border-radius: 8px !important;
    background: #F6F3F2 !important;
    color: #1A3C34 !important;
}

.searchform .searchsubmit { color: #ffffff !important; }

/* Account & Cart Icons (Dark BG + Accent Icon) */
.wd-header-my-account.wd-tools-element,
.wd-header-cart.wd-tools-element {
    background: #1A3C34 !important;
    color: #f2ffe2 !important;
    border-radius: 50% !important;
}

/* --- 3. BUTTONS & PRODUCT CARDS --- */
.btn, .button, button, .added_to_cart, [type="submit"], [type="button"] {
    background-color: #1A3C34 !important;
    color: #f2ffe2 !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

.product-grid-item {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
}

/* --- 4. RESPONSIVE BREAKPOINTS --- */

/* TABLET & MOBILE LANDSCAPE (< 768px) */
@media (max-width: 768px) {
    h1 { font-size: 38px !important; text-align: center; }
    .hero-subheading { text-align: center; }
    .mobile-hero-fix {
        background-position: right center !important;
        padding-bottom: 60px !important;
    }
}

/* PHONE PORTRAIT (< 576px) - YOUR SPECIFIC FIXES */
@media (max-width: 576px) {
    
    /* 1. Search height fix */
    .mobile-nav .searchform input[type="text"] {
        height: 50px !important;
    }

    /* 2. Section Margins */
    .twoColSection {
        margin-bottom: 0px !important;
    }
    
    .twoColSection .vc_custom_1506945471614 {
        margin-bottom: 0px !important;
    }

    .twoProductSection {
        background: #f2ffe2 !important;
    }

    .firstBoxSection {
        margin-bottom: 5vh !important;
    }

    /* 3. Product Grid 2-Column Fix */
    .products .product-grid-item.wd-with-labels.product {
        max-width: 46% !important;
        margin-bottom: 20px !important;
        margin-right: 2% !important;
        display: inline-block !important;
    }

    .products-bordered-grid.elements-grid:not(.elements-list) [class*="-grid-item"] {
        margin-bottom: 20px !important;
    }

    /* Headline scale for small phones */
    h1 { font-size: 32px !important; }
}

}

