/* =========================================================
   Wellgevity Market (WM) Theme CSS
   Converted from old SDG custom CSS
   Palette:
   - Primary Deep Teal: #0F4C4A
   - Secondary Wellness Green: #4E9F79
   - Premium Accent Champagne Gold: #C8A964

   Note: Existing selectors such as .sdg-* and #sdg_* are kept
   for compatibility with the current HTML/CMS class names.
   If you later rename HTML classes to .wm-* / #wm_*, duplicate
   or rename those selectors accordingly.
========================================================= */

:root {
    --wm-deep-teal: #0F4C4A;
    --wm-wellness-green: #4E9F79;
    --wm-champagne-gold: #C8A964;
    --wm-dark-teal: #082C2B;
    --wm-soft-green-bg: #EEF7F1;
    --wm-light-bg: #F7FBF8;
    --wm-text: #183634;
    --wm-muted: #35504D;
}


/* Legacy note - old SDG CSS converted to WM palette. Original: #4E9F79, Gold: #C8A964 */

/* SDG: Change top header background */
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block {
    background-color: #082C2B !important;
}

/* SDG: Change top header text/link color */
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block a,
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block span,
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block p,
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block div {
    color: #ffffff !important;
}

/* Optional: divider line color */
.header-area .header-top.header-top-ptb-1.d-none.d-lg-block a {
    border-color: rgba(255,255,255,0.35) !important;
}

/* ================================
   SDG Luxury Header Middle
   background: linear-gradient(90deg, #0F4C4A 0%, #4E9F79 45%, #0F4C4A 100%) !important;
================================ */

.header-area .header-middle.header-middle-ptb-1.d-none.d-lg-block.sticky-bar {
    background-image: url('https://wellshop.wellgevitymall.com/storage/sdg/images/WM-Full-Banner-1.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;

    border-bottom: 2px solid #C8A964 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
	color: #ffffff !important;
}


/* Header middle ให้เป็น banner image
.header-area .header-middle,
.header-middle.header-middle-ptb-1.d-none.d-lg-block.sticky-bar {
    background: url('https://wellgevitymall.com/storage/sdg/images/wm-full-bg-2.png') center center / cover no-repeat !important;
    background-color: transparent !important;
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid #C8A964 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
	color: #ffffff !important;
}
*/

/* SDG: Middle Menu White Font */

.header-middle .header-action-2 a,
.header-middle .header-action-2 span,
.header-middle .header-action-2 .lable,
.header-middle .header-action-2 i {
    color: #C8A964 !important;
}

/* SVG icons */
.header-middle .header-action-2 svg,
.header-middle .header-action-2 svg path {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* Hover color - luxury gold */
.header-middle .header-action-2 a:hover,
.header-middle .header-action-2 a:hover span,
.header-middle .header-action-2 a:hover .lable {
    color: #C8A964 !important;
}

/* Badge count */
.header-middle .header-action-2 .pro-count,
.header-middle .header-action-2 .count {
    background: #C8A964 !important;
    color: #0F4C4A !important;
}

/* ================================
   SDG: Cart Popup Card Black
================================ */

/* Popup card background */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

/* Text */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel a,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel span,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel p,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel h3,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel h4 {
    color: #ffffff !important;
}

/* Product title and price */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-title a,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-title h4 a,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-title span {
    color: #C8A964 !important;
}

/* Product item background */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel ul li {
    background: #103A38 !important;
    border: 1px solid rgba(200, 169, 100, 0.25) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
}

/* Product image box */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-img {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

/* Delete icon */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-delete a,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-delete i {
    color: #C8A964 !important;
}

/* Hover link */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel a:hover {
    color: #E6C87A !important;
}

/* Footer area */
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.cart-dropdown-panel .shopping-cart-footer {
    background: #082C2B !important;
    border-top: 1px solid rgba(200, 169, 100, 0.35) !important;
}

/* ================================
   SDG: Account Popup Black
================================ */

.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown a,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown span,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown li,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown i {
    color: #C8A964 !important;
}

.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown ul li {
    background: #103A38 !important;
    border: 1px solid rgba(200, 169, 100, 0.25) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
}

.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown ul li:hover,
.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown a:hover {
    background: #174A45 !important;
    color: #ffffff !important;
}

.header-action-2 .cart-dropdown-wrap.cart-dropdown-hm2.account-dropdown i {
    color: #C8A964 !important;
}


/* ================================
   SDG Main Menu Background
================================ */
.header-area .header-bottom.header-bottom-bg-color {
    background: linear-gradient(90deg, #0F4C4A 0%, #4E9F79 45%, #0F4C4A 100%) !important;
    background-color: #4E9F79 !important;
}

/* SDG Main Menu Text Color */
.header-area .header-bottom.header-bottom-bg-color a,
.header-area .header-bottom.header-bottom-bg-color span,
.header-area .header-bottom.header-bottom-bg-color i {
    color: #ffffff !important;
}

/* SDG Browse Categories Button */
.header-area .header-bottom.header-bottom-bg-color .main-categories-wrap,
.header-area .header-bottom.header-bottom-bg-color .categories-button-active {
    background: #082C2B !important;
    color: #ffffff !important;

}

/* ================================
   SDG: Browse Categories Popup Black
================================ */

/* Popup background */
.categories-dropdown-wrap,
.categories-dropdown-active-large {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Inner area */
.categories-dropdown-wrap .categories-dropdown-inner {
    background: #082C2B !important;
}

/* Category item box */
.categories-dropdown-wrap ul li,
.categories-dropdown-wrap .categories-dropdown-inner ul li {
    background: #103A38 !important;
    border: 1px solid rgba(200, 169, 100, 0.25) !important;
    border-radius: 8px !important;
}

/* Text */
.categories-dropdown-wrap a,
.categories-dropdown-wrap span,
.categories-dropdown-wrap li,
.categories-dropdown-wrap p {
    color: #C8A964 !important;
}

.categories-dropdown-inner a,
.categories-dropdown-inner span,
.categories-dropdown-inner li{
    color: #C8A964 !important;
}

/* Hover */
.categories-dropdown-wrap ul li:hover,
.categories-dropdown-wrap .categories-dropdown-inner ul li:hover {
    background: #4E9F79 !important;
    border-color: #ffffff !important;
}

/* Hover text */
.categories-dropdown-wrap ul li:hover a,
.categories-dropdown-wrap .categories-dropdown-inner ul li:hover a {
    color: #ffffff !important;
}

/* Show more / Show less */
.categories-dropdown-wrap .more_categories,
.categories-dropdown-wrap .more_slide_open {
    color: #C8A964 !important;
}

/* ================================
   SDG: Main Menu Popup Black
================================ */

/* Popup background */
.header-area .main-menu ul li ul.sub-menu {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
    padding: 12px 0 !important;
}

/* Popup menu item */
.header-area .main-menu ul li ul.sub-menu li {
    background: transparent !important;
}

/* Popup menu text */
.header-area .main-menu ul li ul.sub-menu li a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Hover item */
.header-area .main-menu ul li ul.sub-menu li:hover {
    background: #103A38 !important;
}

/* Hover text */
.header-area .main-menu ul li ul.sub-menu li:hover > a {
    color: #C8A964 !important;
}

/* Optional: small divider */
.header-area .main-menu ul li ul.sub-menu li {
    border-bottom: 1px solid rgba(200, 169, 100, 0.15) !important;
}

.header-area .main-menu ul li ul.sub-menu li:last-child {
    border-bottom: none !important;
}

/* Level submenu of submenu background */
.header-area .main-menu ul li ul.sub-menu li ul.level-menu,
.header-area .main-menu ul li ul.sub-menu li ul.level-menu.level-menu-modify {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

/* Submenu text */
.header-area .main-menu ul li ul.sub-menu li a,
.header-area .main-menu ul li ul.sub-menu li ul.level-menu li a {
    color: #ffffff !important;
}

/* Active / hover text */
.header-area .main-menu ul li ul.sub-menu li:hover > a,
.header-area .main-menu ul li ul.sub-menu li ul.level-menu li:hover > a,
.header-area .main-menu ul li ul.sub-menu li a.active {
    color: #C8A964 !important;
}

/* ================================
   SDG: Language / Currency Popup Black
================================ */

/* Popup background */
.header-info .language-dropdown,
.language-dropdown {
    background: #082C2B !important;
    background-color: #082C2B !important;
    border: 1px solid #C8A964 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
    padding: 8px 0 !important;
}

/* Popup items */
.header-info .language-dropdown li,
.language-dropdown li {
    background: transparent !important;
    border-bottom: 1px solid rgba(200, 169, 100, 0.18) !important;
}

/* Remove last border */
.header-info .language-dropdown li:last-child,
.language-dropdown li:last-child {
    border-bottom: none !important;
}

/* Text */
.header-info .language-dropdown li a,
.language-dropdown li a {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* Hover */
.header-info .language-dropdown li:hover,
.language-dropdown li:hover {
    background: #103A38 !important;
}

/* Hover text */
.header-info .language-dropdown li:hover a,
.language-dropdown li:hover a {
    color: #C8A964 !important;
}

/* ================================
   SDG: Luxury Gray Navigate / Breadcrumb Bar
================================ */

.page-header.breadcrumb-wrap {
    background: linear-gradient(180deg, #F4F7F2 0%, #E7EEE9 100%) !important;
    border-top: 1px solid #D8E5DD !important;
    border-bottom: 1px solid #C8A964 !important;
    padding: 22px 0 !important;
    box-shadow: 0 4px 14px rgba(15, 76, 74, 0.06) !important;
}

/* Text */
.page-header.breadcrumb-wrap,
.page-header.breadcrumb-wrap span,
.page-header.breadcrumb-wrap .breadcrumb,
.page-header.breadcrumb-wrap .breadcrumb-item {
    color: #35504D !important;
}

/* Links */
.page-header.breadcrumb-wrap a {
    color: #4E9F79 !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}

/* Hover */
.page-header.breadcrumb-wrap a:hover {
    color: #C8A964 !important;
}

/* Separator arrow / slash */
.page-header.breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before,
.page-header.breadcrumb-wrap .breadcrumb span,
.page-header.breadcrumb-wrap i {
    color: #8C9B96 !important;
}

/* ================================
   SDG: Luxury Blue Feature Blocks
================================ */

.featured.section-padding .banner-left-icon {
    background: linear-gradient(135deg, #0F4C4A 0%, #4E9F79 55%, #0F4C4A 100%) !important;
    border: 1px solid rgba(200, 169, 100, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 76, 74, 0.25) !important;
    padding: 28px 24px !important;
    min-height: 250px !important;
    transition: all 0.3s ease !important;
}

/* Title */
.featured.section-padding .banner-left-icon .banner-text h3,
.featured.section-padding .banner-left-icon .banner-text h4,
.featured.section-padding .banner-left-icon .banner-text h5 {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Description */
.featured.section-padding .banner-left-icon .banner-text p,
.featured.section-padding .banner-left-icon .banner-text span {
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.7 !important;
}

/* Icon */
.featured.section-padding .banner-left-icon .banner-icon i,
.featured.section-padding .banner-left-icon .banner-icon svg,
.featured.section-padding .banner-left-icon .banner-icon img {
    color: #C8A964 !important;
    fill: #C8A964 !important;
    stroke: #C8A964 !important;
}

/* Hover */
.featured.section-padding .banner-left-icon:hover {
    transform: translateY(-6px) !important;
    border-color: #D7BB76 !important;
    box-shadow: 0 14px 34px rgba(15, 76, 74, 0.38) !important;
}

/* ================================
   SDG: Luxury Blue Product Cards
================================ */

.product-cart-wrap {
    background: linear-gradient(135deg, #0F4C4A 0%, #4E9F79 55%, #0F4C4A 100%) !important;
    border: 1px solid rgba(200, 169, 100, 0.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(15, 76, 74, 0.25) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Product image area */
.product-cart-wrap .product-img-action-wrap {
    background: #ffffff !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Product content spacing */
.product-cart-wrap .product-content-wrap {
    padding: 20px 22px !important;
}

/* Category */
.product-cart-wrap .product-category,
.product-cart-wrap .product-category a {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Product title */
.product-cart-wrap h2,
.product-cart-wrap h2 a,
.product-cart-wrap .product-content-wrap h2 a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Product title hover */
.product-cart-wrap h2 a:hover,
.product-cart-wrap .product-content-wrap h2 a:hover {
    color: #C8A964 !important;
}

/* Price */
.product-cart-wrap .product-price,
.product-cart-wrap .product-price span {
    color: #C8A964 !important;
    font-weight: 700 !important;
}

/* Old price */
.product-cart-wrap .product-price .old-price {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration-color: rgba(255, 255, 255, 0.55) !important;
}

/* Add button */
.product-cart-wrap .add-cart a,
.product-cart-wrap .add-cart button {
    background: #082C2B !important;
    color: #0F4C4A !important;
    border-radius: 8px !important;
    border: none !important;
    font-weight: 600 !important;
}

/* Add button hover */
.product-cart-wrap .add-cart a:hover,
.product-cart-wrap .add-cart button:hover {
    background: #E6C87A !important;
    color: #0F4C4A !important;
}

/* Card hover */
.product-cart-wrap:hover {
    transform: translateY(-6px) !important;
    border-color: #D7BB76 !important;
    box-shadow: 0 14px 34px rgba(15, 76, 74, 0.38) !important;
}

/* ================================
   SDG: Luxury Gray Article Blocks
   background: linear-gradient(180deg, #F4F7F2 0%, #E7EEE9 100%) !important;
================================ */

.product-list-small article.row.align-items-center.hover-up {
    background-image: linear-gradient(180deg, #F7FBF8 0%, #E7EEE9 100%) !important;
    border: 1px solid #D8E5DD !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 26px !important;
    margin-left: 0 !important;
    margin-right: 18px !important;
    box-shadow: 0 8px 22px rgba(15, 76, 74, 0.08) !important;
    transition: all 0.3s ease !important;
}

/* Add space between product list columns */
.top-products-group-item {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Hover effect */
.product-list-small article.row.align-items-center.hover-up:hover {
    transform: translateY(-4px) !important;
    border-color: #C8A964 !important;
    box-shadow: 0 12px 28px rgba(15, 76, 74, 0.14) !important;
}

/* Product image area - luxury soft gradient shadow */
.product-list-small article.row.align-items-center.hover-up figure {
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow:
       0 10px 10px rgba(15, 76, 74, 0.06),
       0 10px 10px rgba(15, 76, 74, 0.06),
       0 10px 10px rgba(15, 76, 74, 0.10),
       0 10px 10px rgba(15, 76, 74, 0.14) !important;
    overflow: hidden !important;
}

/* Product title */
.product-list-small article.row.align-items-center.hover-up h6 a,
.product-list-small article.row.align-items-center.hover-up h5 a,
.product-list-small article.row.align-items-center.hover-up a {
    color: #0F4C4A !important;
    font-weight: 600 !important;
}

/* Product title hover */
.product-list-small article.row.align-items-center.hover-up a:hover {
    color: #C8A964 !important;
}

/* Price */
.product-list-small article.row.align-items-center.hover-up .product-price,
.product-list-small article.row.align-items-center.hover-up .product-price span {
    color: #4E9F79 !important;
    font-weight: 700 !important;
}

/* Old price */
.product-list-small article.row.align-items-center.hover-up .old-price {
    color: #6A7A75 !important;
    text-decoration-color: #6A7A75 !important;
}

/* ================================
   SDG: Luxury Gray Footer Mid
================================ */

footer.main .footer-mid,
footer.main .section-padding.footer-mid {
    background: linear-gradient(180deg, #F4F7F2 0%, #E7EEE9 100%) !important;
    border-top: 2px solid #C8A964 !important;
    color: #183634 !important;
}

/* Inner spacing */
footer.main .footer-mid .container,
footer.main .footer-mid .container.pt-15.pb-20 {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
}

/* Footer headings */
footer.main .footer-mid h4,
footer.main .footer-mid h5,
footer.main .footer-mid .widget-title {
    color: #0F4C4A !important;
    font-weight: 700 !important;
}

/* Footer text */
footer.main .footer-mid p,
footer.main .footer-mid span,
footer.main .footer-mid li {
    color: #35504D !important;
    line-height: 1.8 !important;
}

/* Footer links */
footer.main .footer-mid a {
    color: #183634 !important;
    transition: all 0.25s ease !important;
}

/* Hover links */
footer.main .footer-mid a:hover {
    color: #C8A964 !important;
}

/* Icons */
footer.main .footer-mid i,
footer.main .footer-mid svg,
footer.main .footer-mid svg path {
    color: #C8A964 !important;
    stroke: #C8A964 !important;
}

/* Optional: subtle bottom border for each link */
footer.main .footer-mid ul li {
    border-bottom: 1px solid rgba(15, 76, 74, 0.08) !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
}

footer.main .footer-mid ul li:last-child {
    border-bottom: none !important;
}


/* ================================
   SDG: Luxury Blue Footer Bottom
================================ */

footer.main .container.pb-30 {
    background: linear-gradient(90deg, #0F4C4A 0%, #4E9F79 50%, #0F4C4A 100%) !important;
    border-top: 2px solid #C8A964 !important;
    color: #ffffff !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    box-shadow: 0 -6px 18px rgba(15, 76, 74, 0.20) !important;
}

/* Text color */
footer.main .container.pb-30,
footer.main .container.pb-30 p,
footer.main .container.pb-30 span,
footer.main .container.pb-30 div {
    color: #ffffff !important;
}

/* Links / phone / social links */
footer.main .container.pb-30 a,
footer.main .container.pb-30 .text-brand,
footer.main .container.pb-30 .hotline {
    color: #C8A964 !important;
}

/* Hover */
footer.main .container.pb-30 a:hover {
    color: #E6C87A !important;
}

/* Icons */
footer.main .container.pb-30 i,
footer.main .container.pb-30 svg,
footer.main .container.pb-30 svg path {
    color: #C8A964 !important;
    stroke: #C8A964 !important;
}

/* ================================
   SDG: Partner Logos Full Color
   Safe for Slick Slider
================================ */

/* Remove gray only from image, not slider container */
.brand-logo img.img-grey-hover {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* Keep image full color on hover */
.brand-logo:hover img.img-grey-hover {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
}

/* Do not affect Slick movement */
.slick-track,
.slick-list,
.slick-slide,
.brand-logo {
    animation-play-state: running !important;
}

/* ================================
   SDG: Our Partners Rounded Luxury Block
================================ */

section.section-padding-60 {
    margin: 10px 12px !important;
    border-radius: 20px !important;
    overflow: hidden !important;

    background-image: linear-gradient(135deg, #F7FBF8 0%, #EEF7F1 55%, #E7EEE9 100%) !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    border: 1px solid rgba(200, 169, 100, 0.35) !important;
    box-shadow: 0 12px 30px rgba(15, 76, 74, 0.10) !important;
}

/* Inner spacing */
section.section-padding-60 .container {
    padding-top: 2px !important;
    padding-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 768px) {
    section.section-padding-60 {
        margin: 8px 4px !important;
        border-radius: 8px !important;
    }
}

/* ================================
   SDG: Luxury Pricing Cards Table/Block
================================ */

/* SDG Pricing Table - Luxury Raised Container 
max-width: 1320px !important;
*/

#sdg_price_table {
    width: 100% !important;
    margin: 20px auto !important;
    padding: 22px 18px !important;

    background: linear-gradient(145deg, #ffffff 0%, #F7FBF8 55%, #EEF7F1 100%) !important;
    border: 1px solid rgba(15, 76, 74, 0.14) !important;
    border-radius: 34px !important;

    box-shadow:
        0 35px 85px rgba(15, 76, 74, 0.16),
        0 14px 35px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

    overflow: hidden !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    position: relative !important;
}

/* Remove default table border */
#sdg_price_table,
#sdg_price_table td,
#sdg_price_table th {
    border: none !important;
}

/* Inner spacing */
#sdg_price_table td {
    padding: 26px 18px !important;
    vertical-align: top !important;
}

/* Luxury gold line on top */
#sdg_price_table::before {
    content: "";
    position: absolute;
    top: 0;
    left: 42px;
    right: 42px;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        #C8A964,
        #0F4C4A,
        #C8A964,
        transparent
    );
    border-radius: 999px;
}

/* Soft glow background */
#sdg_price_table::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -140px;
    background: radial-gradient(circle, rgba(200, 169, 100, 0.16), transparent 68%);
    pointer-events: none;
}

/* Make content stay above glow */
#sdg_price_table tbody,
#sdg_price_table tr,
#sdg_price_table td {
    position: relative !important;
    z-index: 2 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #sdg_price_table {
        margin: 28px auto !important;
        padding: 24px 16px !important;
        border-radius: 24px !important;
    }

    #sdg_price_table td {
        padding: 22px 14px !important;
        display: block !important;
        width: 100% !important;
    }
}

/* ================================
   SDG Product & Service Luxury Banner
================================ */

.sdg-prod-service-banner {
    width: 98%;
    margin: 30px auto 50px auto;
    padding: 0;
    border-radius: 32px;
    overflow: hidden;
    position: relative;

    background-image:
        linear-gradient(
            135deg,
            rgba(15, 76, 74, 0.92) 0%,
            rgba(6, 49, 84, 0.86) 45%,
            rgba(15, 76, 74, 0.82) 100%
        );

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 1px solid rgba(200, 169, 100, 0.45);

    box-shadow:
        0 28px 70px rgba(15, 76, 74, 0.28),
        0 12px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Inner content */
.sdg-banner-overlay {
    position: relative;
    z-index: 2;
    padding: 58px 64px;
    max-width: 1180px;
}

/* Gold line top */
.sdg-prod-service-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 48px;
    right: 48px;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent,
        #C8A964,
        #F1DEAA,
        #C8A964,
        transparent
    );
    border-radius: 999px;
    z-index: 3;
}

/* Soft luxury glow */
.sdg-prod-service-banner::after {
    content: "";
    position: absolute;
    width: 440px;
    height: 440px;
    right: -130px;
    top: -140px;
    background: radial-gradient(
        circle,
        rgba(200, 169, 100, 0.24),
        rgba(200, 169, 100, 0.08) 38%,
        transparent 68%
    );
    pointer-events: none;
    z-index: 1;
}

/* Main title */
#sdg_prod_svc {
    display: inline-block;
    color: #ffffff;
    font-size: 42px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: 0.3px;
    margin-bottom: 24px;
    position: relative;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

/* Gold underline title */
#sdg_prod_svc::after {
    content: "";
    display: block;
    width: 140px;
    height: 4px;
    margin-top: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C8A964, #F1DEAA, #C8A964);
}

/* Paragraph text */
.sdg-banner-overlay p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    line-height: 1.85;
    font-weight: 400;
    max-width: 1080px;
    margin: 0 0 22px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Highlight first words */
.sdg-banner-overlay p::first-letter {
    color: #E6C87A;
}

/* Optional: make SDG Partner / SDG Affiliate look stronger if wrapped later */
.sdg-banner-overlay strong {
    color: #E6C87A;
    font-weight: 800;
}

/* Hover luxury effect */
.sdg-prod-service-banner {
    transition: all 0.35s ease;
}

.sdg-prod-service-banner:hover {
    transform: translateY(-6px);
    box-shadow:
        0 38px 90px rgba(15, 76, 74, 0.34),
        0 18px 38px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(200, 169, 100, 0.38);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .sdg-prod-service-banner {
        border-radius: 22px;
        margin: 22px auto 36px auto;
    }

    .sdg-banner-overlay {
        padding: 36px 24px;
    }

    #sdg_prod_svc {
        font-size: 30px;
    }

    .sdg-banner-overlay p {
        font-size: 16px;
        line-height: 1.75;
    }

    .sdg-prod-service-banner::before {
        left: 24px;
        right: 24px;
    }
}

/* ================================
   SDG: Luxury Product and Service Card
================================ */

.popular-categories .card-2,
.card-2 {
    background: linear-gradient(180deg, #0F4C4A 0%, #0F4C4A 100%) !important;
    border: 2px solid #C8A964 !important;
    border-radius: 22px !important;
    box-shadow:
        0 18px 40px rgba(15, 76, 74, 0.28),
        0 8px 18px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
    padding: 24px 20px !important;
    overflow: hidden !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* เส้นทองด้านบน */
.popular-categories .card-2::before,
.card-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #E6C87A, #C8A964, #E6C87A, transparent);
}

/* hover ให้ card ลอยขึ้น */
.popular-categories .card-2:hover,
.card-2:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 28px 56px rgba(15, 76, 74, 0.34),
        0 12px 22px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(200, 169, 100, 0.35) !important;
}

/* ชื่อหัวข้อ */
.popular-categories .card-2 h6,
.popular-categories .card-2 h6 a,
.card-2 h6,
.card-2 h6 a {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ข้อความรอง เช่น 2 items */
.popular-categories .card-2 span,
.card-2 span {
    color: #E6C87A !important;
    font-weight: 500 !important;
}

/* กรอบรูปด้านบน */
.popular-categories .card-2 figure,
.card-2 figure {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(200, 169, 100, 0.35) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    margin-bottom: 18px !important;
}

/* รูปภาพ */
.popular-categories .card-2 figure img,
.card-2 figure img {
    border-radius: 12px !important;
}

/* ลิงก์ทั้งหมดใน card */
.popular-categories .card-2 a,
.card-2 a {
    color: #ffffff !important;
}

/* ถ้าต้องการให้พื้น section ดูเข้ากัน */
.popular-categories {
    background: transparent !important;
}

/* ===============================
   SDG Product Listing Header
   Target: .ps-block__header
================================ */

/* Header block */
.products-listing .ps-block__header,
.ps-block__header {
    position: relative !important;
    margin: 18px 0 28px 0 !important;
    padding: 26px 34px !important;

    background:
        linear-gradient(
            135deg,
            rgba(15, 76, 74, 0.96) 0%,
            rgba(78, 159, 121, 0.92) 48%,
            rgba(78, 159, 121, 0.88) 100%
        ) !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 24px !important;
    border: 1px solid rgba(200, 169, 100, 0.5) !important;

    box-shadow:
        0 22px 55px rgba(15, 76, 74, 0.24),
        0 8px 22px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

    overflow: hidden !important;
}

/* เส้นทองด้านบน */
.products-listing .ps-block__header::before,
.ps-block__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 34px;
    right: 34px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        #C8A964,
        #F1DEAA,
        #C8A964,
        transparent
    );
}

/* แสงทองนุ่มๆ มุมขวา */
.products-listing .ps-block__header::after,
.ps-block__header::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -120px;
    top: -160px;
    background: radial-gradient(
        circle,
        rgba(200, 169, 100, 0.24),
        rgba(200, 169, 100, 0.08) 40%,
        transparent 70%
    );
    pointer-events: none;
}


/* Title text */
.products-listing .ps-block__header h1,
.products-listing .ps-block__header .h3,
.ps-block__header h1,
.ps-block__header .h3 {
    position: relative !important;
    z-index: 2 !important;

    color: #ffffff !important;
    font-size: 36px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* เส้น underline ทองใต้ title */
.products-listing .ps-block__header h1::after,
.products-listing .ps-block__header .h3::after,
.ps-block__header h1::after,
.ps-block__header .h3::after {
    content: "";
    display: block;
    width: 130px;
    height: 4px;
    margin-top: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #C8A964, #F1DEAA, #C8A964);
}

/* Hover effect */
.products-listing .ps-block__header,
.ps-block__header {
    transition: all 0.3s ease !important;
}

.products-listing .ps-block__header:hover,
.ps-block__header:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 30px 70px rgba(15, 76, 74, 0.30),
        0 12px 28px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(200, 169, 100, 0.35) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .products-listing .ps-block__header,
    .ps-block__header {
        padding: 22px 22px !important;
        border-radius: 20px !important;
        margin: 14px 0 24px 0 !important;
    }

    .products-listing .ps-block__header h1,
    .products-listing .ps-block__header .h3,
    .ps-block__header h1,
    .ps-block__header .h3 {
        font-size: 28px !important;
    }

    .products-listing .ps-block__header::before,
    .ps-block__header::before {
        left: 24px;
        right: 24px;
    }
}

/* =====================================
   SDG Luxury Popup Form Header
   Target: .fb-form-header
===================================== */

.fb-popup-body .fb-form-header,
.fb-form-header {
    position: relative !important;
    margin: 18px auto 42px auto !important;
    padding: 42px 38px !important;
    max-width: 980px !important;

    text-align: center !important;

    background:
        linear-gradient(
            135deg,
            rgba(15, 76, 74, 0.96) 0%,
            rgba(78, 159, 121, 0.93) 50%,
            rgba(78, 159, 121, 0.90) 100%
        ) !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 28px !important;
    border: 1px solid rgba(200, 169, 100, 0.52) !important;

    box-shadow:
        0 26px 62px rgba(15, 76, 74, 0.28),
        0 10px 26px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;

    overflow: hidden !important;
}

/* Top luxury gold line */
.fb-popup-body .fb-form-header::before,
.fb-form-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 42px;
    right: 42px;
    height: 4px;

    background: linear-gradient(
        90deg,
        transparent,
        #C8A964,
        #F1DEAA,
        #C8A964,
        transparent
    );

    border-radius: 999px;
    z-index: 2;
}

/* Soft gold glow */
.fb-popup-body .fb-form-header::after,
.fb-form-header::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -120px;
    top: -150px;

    background: radial-gradient(
        circle,
        rgba(200, 169, 100, 0.28),
        rgba(200, 169, 100, 0.08) 40%,
        transparent 70%
    );

    pointer-events: none;
    z-index: 1;
}

/* Title */
.fb-popup-body .fb-form-title,
.fb-form-title {
    position: relative !important;
    z-index: 3 !important;

    color: #ffffff !important;
    font-size: 34px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.4px !important;

    margin: 0 0 14px 0 !important;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Gold underline below title */
.fb-popup-body .fb-form-title::after,
.fb-form-title::after {
    content: "";
    display: block;
    width: 150px;
    height: 4px;
    margin: 18px auto 0 auto;

    border-radius: 999px;
    background: linear-gradient(90deg, #C8A964, #F1DEAA, #C8A964);
}

/* Description */
.fb-popup-body .fb-form-description,
.fb-form-description {
    position: relative !important;
    z-index: 3 !important;

    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;

    max-width: 760px !important;
    margin: 0 auto !important;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
}

/* Remove default thin line below header if too close */
.fb-popup-body .fb-form-header + hr,
.fb-form-header + hr {
    display: none !important;
}

/* Add nice spacing after form header */
.fb-popup-body .fb-form-header + *,
.fb-form-header + * {
    margin-top: 28px !important;
}

/* Hover luxury lift */
.fb-form-header {
    transition: all 0.3s ease !important;
}

.fb-form-header:hover {
    transform: translateY(-4px) !important;
    box-shadow:
        0 34px 76px rgba(15, 76, 74, 0.34),
        0 14px 34px rgba(0, 0, 0, 0.16),
        0 0 0 1px rgba(200, 169, 100, 0.34) !important;
}

/* Mobile */
@media (max-width: 768px) {
    .fb-popup-body .fb-form-header,
    .fb-form-header {
        padding: 30px 22px !important;
        border-radius: 22px !important;
        margin: 14px auto 34px auto !important;
    }

    .fb-popup-body .fb-form-title,
    .fb-form-title {
        font-size: 26px !important;
    }

    .fb-popup-body .fb-form-description,
    .fb-form-description {
        font-size: 15px !important;
    }

    .fb-popup-body .fb-form-header::before,
    .fb-form-header::before {
        left: 24px;
        right: 24px;
    }
}

/* Popup form body background image */
.fb-popup-body {
    background:
        linear-gradient(rgba(255,255,255,0.86), rgba(255,255,255,0.86)) center/cover no-repeat !important;

    border-radius: 0 0 24px 24px !important;
    padding: 32px !important;
}

.fb-popup-body {
    overflow-y: auto !important;
}

/* ===============================
   SDG Free vs Premium Comparison
================================ */

.sdg-compare-section {
    max-width: 1320px;
    margin: 50px auto 70px auto;
    padding: 46px 48px;

    background:
        linear-gradient(
            135deg,
            rgba(15, 76, 74, 0.96) 0%,
            rgba(78, 159, 121, 0.92) 52%,
            rgba(78, 159, 121, 0.88) 100%
        );

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 34px;
    border: 1px solid rgba(200, 169, 100, 0.55);

    box-shadow:
        0 30px 78px rgba(15, 76, 74, 0.28),
        0 12px 28px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    position: relative;
    overflow: hidden;
}

.sdg-compare-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 46px;
    right: 46px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        #C8A964,
        #F1DEAA,
        #C8A964,
        transparent
    );
}

.sdg-compare-section::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -130px;
    top: -150px;
    background: radial-gradient(
        circle,
        rgba(200, 169, 100, 0.26),
        rgba(200, 169, 100, 0.08) 42%,
        transparent 70%
    );
    pointer-events: none;
}

/* Header */
.sdg-compare-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 34px;
}

.sdg-compare-badge {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 16px;

    color: #0F4C4A;
    background: linear-gradient(135deg, #F6EACB, #C8A964);
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;

    box-shadow: 0 8px 18px rgba(200, 169, 100, 0.24);
}

.sdg-compare-header h2 {
    color: #ffffff;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 800;
    margin: 0 0 14px 0;

    text-shadow:
        0 4px 18px rgba(0, 0, 0, 0.36),
        0 1px 0 rgba(255, 255, 255, 0.14);
}

.sdg-compare-header p {
    max-width: 850px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.75;
}

/* Table wrapper */
.sdg-compare-table-wrap {
    position: relative;
    z-index: 2;
    overflow-x: auto;
    border-radius: 24px;

    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(200, 169, 100, 0.24);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(8px);
}

/* Table */
.sdg-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    overflow: hidden;
}

.sdg-compare-table th {
    padding: 22px 24px;
    text-align: center;

    color: #ffffff;
    font-size: 17px;
    font-weight: 800;

    background: rgba(15, 76, 74, 0.80);
    border-bottom: 1px solid rgba(200, 169, 100, 0.35);
}

.sdg-compare-table th:first-child {
    text-align: left;
}

.sdg-compare-table th.premium-col {
    color: #F1DEAA;
}

.sdg-compare-table td {
    padding: 18px 24px;

    color: rgba(255, 255, 255, 0.90);
    font-size: 15.5px;
    line-height: 1.55;
    vertical-align: middle;
    text-align: center;

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sdg-compare-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #ffffff;
}

.sdg-compare-table tbody tr {
    transition: all 0.22s ease;
}

.sdg-compare-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.09);
}

/* Premium column highlight */
.sdg-compare-table td:nth-child(3),
.sdg-compare-table th:nth-child(3) {
    background: rgba(200, 169, 100, 0.08);
}

/* Check and dash */
.sdg-compare-table .check {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    color: #0F4C4A;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;

    font-size: 17px;
    font-weight: 900;
}

.sdg-compare-table .check.premium {
    background: linear-gradient(135deg, #F1DEAA, #C8A964);
    box-shadow: 0 6px 14px rgba(200, 169, 100, 0.28);
}

.sdg-compare-table .dash {
    color: rgba(255, 255, 255, 0.42);
    font-size: 20px;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 768px) {
    .sdg-compare-section {
        margin: 32px auto 50px auto;
        padding: 34px 20px;
        border-radius: 24px;
    }

    .sdg-compare-header h2 {
        font-size: 28px;
    }

    .sdg-compare-header p {
        font-size: 15px;
    }

    .sdg-compare-section::before {
        left: 24px;
        right: 24px;
    }

    .sdg-compare-table th,
    .sdg-compare-table td {
        padding: 16px 18px;
        font-size: 14.5px;
    }
}

.sdg-compare-table-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
    line-height: 0 !important;

    height: auto !important;
    max-height: none !important;

    overflow-x: auto !important;   /* ให้มี scrollbar แนวนอน */
    overflow-y: hidden !important; /* ซ่อน scrollbar แนวตั้ง */
}

.sdg-compare-table-wrap table {
    margin-top: 0 !important;
    line-height: normal !important;
}

/* Mobile: force table fit screen without horizontal scroll */
@media (max-width: 768px) {

    .sdg-compare-section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 24px 8px !important;
        border-radius: 0 !important;
    }

    .sdg-compare-table-wrap {
        width: 100% !important;
        overflow-x: hidden !important;
        border-radius: 14px !important;
    }

    .sdg-compare-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    .sdg-compare-table th,
    .sdg-compare-table td {
        padding: 12px 6px !important;
        font-size: 12.5px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    .sdg-compare-table th:first-child,
    .sdg-compare-table td:first-child {
        width: 42% !important;
    }

    .sdg-compare-table th:nth-child(2),
    .sdg-compare-table td:nth-child(2),
    .sdg-compare-table th:nth-child(3),
    .sdg-compare-table td:nth-child(3) {
        width: 29% !important;
    }

    .sdg-compare-table .check {
        width: 22px !important;
        height: 22px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   Optional WM aliases for future renamed custom sections
   Add these classes to HTML if you migrate from sdg-* naming.
========================================================= */
.wm-prod-service-banner {
    background: linear-gradient(135deg, rgba(15, 76, 74, 0.94) 0%, rgba(78, 159, 121, 0.86) 52%, rgba(8, 44, 43, 0.92) 100%) !important;
    border: 1px solid rgba(200, 169, 100, 0.45) !important;
}

.wm-accent-gold { color: #C8A964 !important; }
.wm-bg-deep-teal { background-color: #0F4C4A !important; }
.wm-bg-wellness-green { background-color: #4E9F79 !important; }

/* =========================================================
   Add-cart button
========================================================= */
.product-cart-wrap .add-cart a,
.product-cart-wrap .add-cart a span,
.product-cart-wrap .add-cart a i,
.product-cart-wrap .add-cart button,
.product-cart-wrap .add-cart button span,
.product-cart-wrap .add-cart button i,
.product-cart-wrap .action-btn.add-to-cart-button,
.product-cart-wrap .action-btn.add-to-cart-button span,
.product-cart-wrap .action-btn.add-to-cart-button i {
    color: #ffffff !important;
}

/* Main Menu Bar - Black */
.header-area .header-bottom.header-bottom-bg-color {
    background: #000000 !important;
    background-color: #000000 !important;
    border-top: 1px solid #D8BE78 !important;
    border-bottom: 1px solid #D8BE78 !important;
}

/* Menu text */
.header-area .header-bottom.header-bottom-bg-color a,
.header-area .header-bottom.header-bottom-bg-color span,
.header-area .header-bottom.header-bottom-bg-color i {
    color: #ffffff !important;
}

/* Browse All Categories button */
.header-area .header-bottom.header-bottom-bg-color .main-categories-wrap,
.header-area .header-bottom.header-bottom-bg-color .categories-button-active {
    background: #111111 !important;
    color: #ffffff !important;
}

/* Menu hover */
.header-area .header-bottom.header-bottom-bg-color .main-menu > nav > ul > li > a:hover,
.header-area .header-bottom.header-bottom-bg-color .main-menu > nav > ul > li:hover > a {
    color: #D8BE78 !important;
}

/* Hotline area */
.header-area .header-bottom .hotline,
.header-area .header-bottom .hotline p,
.header-area .header-bottom .hotline span,
.header-area .header-bottom .hotline i {
    color: #ffffff !important;
}

/* Browse Categories hover */
.header-area .header-bottom .categories-button-active:hover {
    background: #1a1a1a !important;
    color: #D8BE78 !important;
}