@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 /* font-family: "Raleway", sans-serif; */

/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

  /* -----------------------------------------
     BRAND COLORS
  ----------------------------------------- */

  --color-primary: #48611f;
  --color-primary-dark: #2d481d;
  --color-primary-light: #718652;

  --color-gold: #b9974f;
  --color-gold-light: #d7bd7c;

  --color-cream: #f4f3e8;
  --color-cream-light: #faf9f1;

  --color-white: #ffffff;
  --color-black: #1d2118;
  --color-heading: #1c2618;
  --color-muted: #6e7466;


  /* -----------------------------------------
     HERO COLORS
  ----------------------------------------- */

  --hero-bg: #eff1df;
  --hero-overlay: rgba(255, 255, 255, 0.4);

  --hero-text: #1c2618;
  --hero-text-light: #68705c;


  /* -----------------------------------------
     NAVBAR
  ----------------------------------------- */

  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-radius: 50px;

  --nav-height: 56px;


  /* -----------------------------------------
     TYPOGRAPHY
  ----------------------------------------- */

  --font-heading: "DM Serif Display", serif;
  --font-body:  "Raleway", sans-serif;
  --font-script: "Playfair Display", serif;


  /* -----------------------------------------
     FONT SIZES
  ----------------------------------------- */

  --fs-nav: 12px;

  --fs-eyebrow: 10px;

  --fs-hero: clamp(
    3.4rem,
    5.8vw,
    6rem
  );

  --fs-hero-description: clamp(
    0.85rem,
    1vw,
    1rem
  );


  /* -----------------------------------------
     SPACING
  ----------------------------------------- */

  --section-padding: 70px;

  --hero-gap: 50px;


  /* -----------------------------------------
     EFFECTS
  ----------------------------------------- */

  --transition: all 0.35s ease;

  --shadow-soft:
    0 15px 50px rgba(45, 72, 29, 0.12);

  --shadow-nav:
    0 10px 30px rgba(40, 50, 30, 0.08);

}


/* =========================================================
   GLOBAL
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--hero-text);
  background: var(--color-white);
}

a {
  text-decoration: none;
}

img{
    display: inline-block;
    width: 100%;
}

/* =========================================================
   HERO SECTION VARIABLES
========================================================= */

.hero-section {

  --hero-padding-top: 20px;
  --hero-padding-bottom: 25px;

  --hero-product-size: 520px;

  position: relative;

  min-height: 100vh;

  padding-top: var(--hero-padding-top);
  padding-bottom: var(--hero-padding-bottom);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(255, 255, 255, 0.7),
      transparent 28%
    ),
    var(--hero-bg);
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.hero-bg-circle {

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  border: 1px solid rgba(72, 97, 31, 0.07);
}

.hero-circle-one {

  width: 600px;
  height: 600px;

  right: -260px;
  top: 130px;
}

.hero-circle-two {

  width: 400px;
  height: 400px;

  left: -220px;
  bottom: -200px;
}


/* =========================================================
   NAVBAR
========================================================= */

.hero-nav-wrapper {
  position: relative;
  z-index: 100;
}

.hero-navbar {

min-height: var(--nav-height);

padding:
    5px
    10px
    5px
    20px;

background: var(--nav-bg) !important;

border: 1px solid rgba(72, 97, 31, 0.08);

border-radius: var(--nav-radius);

box-shadow: var(--shadow-nav);

backdrop-filter: blur(15px);
}


/* =========================================================
   LOGO
========================================================= */

.hero-logo {
display: flex;
flex-direction: column;
justify-content: center;
width: 130px;
}

.hero-logo span {
  font-family: var(--font-script);
  font-size: 10px;
  font-style: italic;
  color: var(--color-primary);
  text-align: center;
  margin-top: 2px;
}


/* =========================================================
   NAV MENU
========================================================= */

.hero-menu {
gap: 20px;
}

.hero-menu .nav-link {
  position: relative;
  color: #34392f !important;
  font-size: 14px;
  font-weight: 500;
  padding:9px 12px !important;
  border-radius: 30px;
  transition: var(--transition);
}

.hero-menu .nav-link:hover {
  color: var(--color-primary);
  background: rgba(72, 97, 31, 0.07);
}

.hero-menu .nav-link.active {
  color: var(--color-white);
  background: var(--color-primary);
}


/* =========================================================
   NAV ACTIONS
========================================================= */

.hero-nav-actions{
    padding-right: 20px;
}

.nav-action {

position: relative !important;

background: transparent !important;

border: 0 !important;

width: 40px !important;

height: 40px;

display: flex!important;

align-items: center;

justify-content: center;

color: var(--hero-text) !important;

font-size: 18px;

transition: var(--transition);
}

.nav-action:hover {

  color: var(--color-primary);
  transform: translateY(-2px);

}

.cart-count {

  position: absolute;
    top: -2px;
    right: -3px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    color: var(--color-white);
    background: var(--color-primary);

}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.hero-toggler {

border: 0 !important;

width: 42px !important;

height: 42px;

border-radius: 50%;

background: var(--color-primary) !important;

color: white !important;

font-size: 22px !important;

display: flex !important;

align-items: center;

justify-content: center;
}

.hero-toggler:focus {

  box-shadow: none;

}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {

  position: relative;

  z-index: 2;

  min-height:
    calc(100vh - 160px);

  display: flex;

  align-items: center;

}


/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {

  padding:
    60px
    0
    50px;

  max-width: 620px;

}

.hero-eyebrow {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 22px;

  color: var(--color-primary);

  font-size: var(--fs-eyebrow);

  font-weight: 600;

  letter-spacing: 2px;

}

.hero-eyebrow span {

  width: 35px;
  height: 1px;

  background: var(--color-gold);

}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {

  margin: 0;

  color: var(--hero-text);

  font-family: var(--font-heading);

  font-size: var(--fs-hero);

  font-weight: 400;

  line-height: 0.93;

  letter-spacing: -2px;

}

.hero-title em {

  display: inline-block;

  color: var(--color-primary);

  font-family: var(--font-script);

  font-size: 0.85em;

  font-weight: 400;

  letter-spacing: -2px;

  transform: rotate(-3deg);

  margin-top: 5px;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {

max-width: 480px;

margin-top: 28px;

margin-bottom: 0;

color: var(--hero-text-light);

font-size: var(--fs-hero-description);

font-weight: 400;

line-height: 1.8;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.hero-buttons {

  display: flex;

  align-items: center;

  gap: 25px;

  margin-top: 32px;

}

.hero-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  transition: var(--transition);

}


/* Primary */

.hero-btn-primary {
    border: 0;
    padding: 12px 22px;
    border-radius: 30px;
    color: white;
    background: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(72, 97, 31, 0.18);
    }

.hero-btn-primary i {

  transition: var(--transition);

}

.hero-btn-primary:hover {
  color: white;
  background: var(--color-primary-dark);
  transform: translateY(-3px);
}

.hero-btn-primary:hover i {

  transform: translateX(4px);

}


/* Video / Story Button */

.hero-btn-video {padding: 10px 22px;border-radius: 30px;border: 1px solid var(--color-primary);color: var(--hero-text);font-size: 14px;font-weight: 500;}

.hero-btn-video:hover {

  color: var(--color-primary);

}




/* =========================================================
   PRODUCT AREA
========================================================= */

.hero-product-area {

  position: relative;

  min-height: var(--hero-product-size);

  display: flex;

  align-items: center;
  justify-content: center;

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.hero-product {

  position: relative;

  z-index: 5;

  width: min(
    var(--hero-product-size),
    100%
  );

  display: flex;

  justify-content: center;

  animation:
    productFloat 5s ease-in-out infinite;

}

.hero-product img {

  width: 100%;

  max-width: 100%;

  height: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 30px 35px
      rgba(35, 45, 25, 0.17)
    );

}


/* =========================================================
   PRODUCT RINGS
========================================================= */

.product-ring {

  position: absolute;

  border-radius: 50%;

  border: 1px solid
    rgba(255, 255, 255, 0.8);

  z-index: 1;

}

.product-ring-one {

  width: 440px;
  height: 440px;

  animation:
    ringPulse 5s ease-in-out infinite;

}

.product-ring-two {

  width: 330px;
  height: 330px;

  border-color:
    rgba(72, 97, 31, 0.12);

}


/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.leaf-decoration {

  position: absolute;

  z-index: 3;

  color: var(--color-primary);

  opacity: 0.45;

}

.leaf-one {

left: 8%;

top: 18%;

width: 69px;

transform: rotate(-25deg);
}

.leaf-two {

right: 5%;

bottom: 13%;

width: 104px;

transform: rotate(25deg);
}


/* =========================================================
   FLOATING PRODUCT CARD
========================================================= */
.product-floating-card1 {position: absolute;z-index: 10;left: 0;bottom: 8%;display: flex;align-items: center;gap: 10px;padding:10px 15px;background: rgba(255, 255, 255, 0.78);border: 1px solid rgba(255, 255, 255, 0.8);border-radius: 12px;box-shadow: 0 15px 35px rgba(50, 60, 35, 0.12);backdrop-filter: blur(15px);}


.product-floating-card2 {position: absolute;z-index: 10;right: 0;bottom: 9%;display: flex;align-items: center;gap: 10px;padding:10px 15px;background: rgba(255, 255, 255, 0.78);border: 1px solid rgba(255, 255, 255, 0.8);border-radius: 12px;box-shadow: 0 15px 35px rgba(50, 60, 35, 0.12);backdrop-filter: blur(15px);}

.product-floating-card3 {position: absolute;z-index: 10;right: 17%;top: 5%;display: flex;align-items: center;gap: 10px;padding:10px 15px;background: rgba(255, 255, 255, 0.78);border: 1px solid rgba(255, 255, 255, 0.8);border-radius: 12px;box-shadow: 0 15px 35px rgba(50, 60, 35, 0.12);backdrop-filter: blur(15px);}


.floating-line {

  width: 20px;
  height: 1px;

  background: var(--color-gold);

}

.product-floating-card1 small,
.product-floating-card2 small,
.product-floating-card3 small {
  display: block;
  color: var(--color-muted);
  font-size: 10px;
  letter-spacing: 1.3px;
}

.product-floating-card1 strong,
.product-floating-card2 strong,
.product-floating-card3 strong {display: block;color: var(--color-primary-dark);font-family: var(--font-heading);font-size: 18px;font-weight: 400;}

/* =========================================================
   FEATURE MARQUEE
========================================================= */

.hero-feature-marquee {
  position: relative;
  z-index: 20;

  width: 100%;
  overflow: hidden;

  padding: 14px 0;

  background: rgba(255, 255, 255, 0.68);

  border-top: 1px solid rgba(72, 97, 31, 0.08);
  border-bottom: 1px solid rgba(72, 97, 31, 0.08);

  backdrop-filter: blur(15px);

  box-shadow:
    0 10px 35px rgba(40, 50, 30, 0.05);
}


/* =========================================================
   MARQUEE TRACK
========================================================= */

.feature-marquee-track {

  display: flex;
  align-items: center;

  width: max-content;

  animation:
    featureMarquee 28s linear infinite;

}


/* =========================================================
   INDIVIDUAL FEATURE
========================================================= */

.hero-feature {

  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 240px;

  padding: 4px 32px;

  border-right:
    1px solid
    rgba(72, 97, 31, 0.10);

}


/* =========================================================
   ICON
========================================================= */

.feature-icon {

  width: 34px;
  height: 34px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: var(--color-primary);

  background:
    rgba(72, 97, 31, 0.08);

  font-size: 15px;
}


/* =========================================================
   CONTENT
========================================================= */

.feature-content {
  white-space: nowrap;
}


.hero-feature strong {display: block;color: var(--hero-text);font-size: 14px;font-weight: 600;letter-spacing: 0.2px;}


.hero-feature span {display: block;margin-top: 2px;color: var(--color-muted);font-size: 13px;letter-spacing: 0.2px;}


/* =========================================================
   MARQUEE ANIMATION
========================================================= */

@keyframes featureMarquee {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================================
   HOVER PAUSE
========================================================= */

.hero-feature-marquee:hover
.feature-marquee-track {

  animation-play-state: paused;

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .hero-feature {
    min-width: 220px;
    padding: 4px 25px;
  }

  .feature-marquee-track {
    animation-duration: 24s;
  }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767.98px) {

  .hero-feature-marquee {
    padding: 11px 0;
  }

  .hero-feature {
    min-width: 205px;
    padding: 3px 20px;
    gap: 8px;
  }

  .feature-icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .hero-feature strong {
    font-size: 9px;
  }

  .hero-feature span {
    font-size: 7px;
  }

  .feature-marquee-track {
    animation-duration: 20s;
  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .hero-feature-marquee {
    padding: 10px 0;
  }

  .hero-feature {
    min-width: 190px;
    padding: 3px 18px;
  }

  .feature-icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .hero-feature strong {
    font-size: 8.5px;
  }

  .hero-feature span {
    font-size: 6.8px;
  }

  .feature-marquee-track {
    animation-duration: 18s;
  }

}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes productFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

}

@keyframes ringPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }

}


/* =========================================================
   LAPTOP
   1200px - 1399px
========================================================= */

@media (max-width: 1399px) {

  .hero-section {

    --hero-product-size: 470px;

  }

  .hero-title {

    font-size: clamp(
      3.2rem,
      5vw,
      5rem
    );

  }

  .hero-menu .nav-link {

    padding-left: 9px !important;
    padding-right: 9px !important;

  }

}


/* =========================================================
   TABLET LANDSCAPE
   992px - 1199px
========================================================= */

@media (max-width: 1199px) {

  .hero-section {

    --hero-product-size: 420px;

  }

  .hero-logo {

    min-width: 105px;

  }

  .hero-menu {

    gap: 0;

  }

  .hero-menu .nav-link {

font-size: 14px;

padding-left: 7px !important;

padding-right: 7px !important;

}

  .hero-nav-actions {

    gap: 7px;

  }

  .hero-copy {

    padding-top: 40px;

  }

  .hero-features {

    grid-template-columns:
      repeat(4, 1fr);

  }

  .hero-feature strong {

    font-size: 9px;

  }

}


/* =========================================================
   TABLET PORTRAIT
   768px - 991px
========================================================= */

@media (max-width: 991px) {

  .hero-section {

    --hero-padding-top: 15px;

    min-height: auto;

  }


  /* Mobile navbar */

  .hero-navbar {

    border-radius: 18px;

    padding:
      7px
      10px
      7px
      16px;

  }

  .hero-toggler {

    display: flex;

  }

  .navbar-collapse {

margin-top: 12px;

padding:
      15px;

border-radius: 15px;

background: rgb(239 255 213 / 97%);

box-shadow:
      0 15px 30px
      rgba(40, 50, 30, 0.08);

}

  .hero-menu {

    align-items: stretch;

  }

  .hero-menu .nav-link {

    text-align: center;

    padding: 11px !important;

  }

  .hero-nav-actions {

display: flex;

align-items: center;

text-align: center;

margin: 0 auto;

justify-content: center !important;

margin-top: 12px;

padding: 10px 0 0;

border-top:
      1px solid
      rgba(72, 97, 31, 0.08);

}


  /* Hero */

  .hero-content {

    min-height: auto;

  }

  .hero-copy {

    padding:
      60px
      0
      30px;

  }

  .hero-title {

    font-size: clamp(
      3rem,
      7vw,
      4.7rem
    );

  }

  .hero-description {

    max-width: 560px;

  }

  .hero-product-area {

    min-height: 500px;

  }

  .hero-product img {

    max-width: 450px;

  }

  .product-ring-one {

    width: 400px;
    height: 400px;

  }

  .hero-features {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .hero-feature:nth-child(2) {

    border-right: 0;

  }

  .hero-feature:nth-child(-n+2) {

    padding-bottom: 12px;

  }

}


/* =========================================================
   MOBILE LANDSCAPE
   576px - 767px
========================================================= */

@media (max-width: 767px) {

  .hero-section {

    --hero-product-size: 380px;

  }

  .hero-content {

    text-align: center;

  }

  .hero-copy {

    max-width: 600px;

    margin: auto;

    padding:
      50px
      15px
      10px;

  }

  .hero-eyebrow {

    justify-content: center;

  }

  .hero-description {

    margin-left: auto;
    margin-right: auto;

  }

  .hero-buttons {

    justify-content: center;

  }

  .hero-product-area {

    min-height: 440px;

  }

  .product-floating-card {

    right: 5%;

  }

  .hero-features {

    margin-top: 15px;

  }

}


/* =========================================================
   MOBILE PORTRAIT
   BELOW 576px
========================================================= */

@media (max-width: 575px) {

  .hero-section {

    --hero-product-size: 300px;

    --hero-padding-bottom: 18px;

  }


  .hero-navbar {

    border-radius: 16px;

  }

  .hero-logo {

    font-size: 19px;

  }


  .hero-copy {

    padding:
      45px
      10px
      0;

  }

  .hero-eyebrow {

    font-size: 8px;

    letter-spacing: 1.5px;

  }

  .hero-eyebrow span {

    width: 20px;

  }


  .hero-title {

    font-size:
      clamp(
        2.9rem,
        14vw,
        4rem
      );

    line-height: 0.92;

    letter-spacing: -1.5px;

  }

  .hero-title em {

    font-size: 0.8em;

  }


  .hero-description {

    font-size: 12px;

    line-height: 1.7;

    margin-top: 22px;

  }


  .hero-buttons {

    flex-direction: column;

    gap: 15px;

    margin-top: 25px;

  }

  .hero-btn-primary {

    width: 100%;

    max-width: 230px;

  }


  .hero-product-area {

    min-height: 350px;

    margin-top: 10px;

  }

  .hero-product img {

    max-width: 300px;

  }

  .product-ring-one {

    width: 280px;
    height: 280px;

  }

  .product-ring-two {

    width: 220px;
    height: 220px;

  }


  .product-floating-card {

    right: 2%;

    bottom: 7%;

    padding: 8px 10px;

  }


  .leaf-one {

    font-size: 35px;

  }

  .leaf-two {

    font-size: 28px;

  }


  .hero-features {

    grid-template-columns:
      repeat(2, 1fr);

    padding: 10px;

    border-radius: 14px;

  }

  .hero-feature {

    gap: 7px;

    padding: 8px 4px;

  }

  .hero-feature:nth-child(2) {

    border-right: 0;

  }

  .hero-feature:nth-child(3) {

    border-right: 1px solid
      rgba(72, 97, 31, 0.08);

  }

  .feature-icon {

    width: 28px;
    height: 28px;

    font-size: 12px;

  }

  .hero-feature strong {

    font-size: 8px;

  }

  .hero-feature span {

    font-size: 7px;

  }

}


/* =========================================================
   VERY SMALL DEVICES
   BELOW 380px
========================================================= */

@media (max-width: 380px) {

  .hero-title {

    font-size: 2.65rem;

  }

  .hero-product-area {

    min-height: 310px;

  }

  .hero-product img {

    max-width: 270px;

  }

  .product-ring-one {

    width: 250px;
    height: 250px;

  }

  .hero-features {

    grid-template-columns: 1fr;

  }

  .hero-feature {

    border-right: 0 !important;

    border-bottom:
      1px solid
      rgba(72, 97, 31, 0.08);

  }

  .hero-feature:last-child {

    border-bottom: 0;

  }

}




/* =========================================================
   BENEFITS SECTION
========================================================= */

.benefits-section {

  position: relative;

  padding:
    var(--section-padding)
    0;

  background:
    var(--color-cream);

  overflow: hidden;

}


/* subtle botanical glow */

.benefits-section::before {

  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  top: -180px;
  left: -150px;

  background:
    rgba(72, 97, 31, 0.06);

  border-radius: 50%;

  filter: blur(40px);

  pointer-events: none;

}

/* =========================================================
   SECTION HEADING
========================================================= */

.benefits-heading {

  margin-bottom: 48px;

}


.section-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--fs-eyebrow);

  font-weight: 600;

  letter-spacing: 2.2px;

  text-transform: uppercase;

}


.section-eyebrow::before,
.section-eyebrow::after {

  content: "";

  width: 28px;
  height: 1px;

  background:
    var(--color-gold);

}


.section-title {

margin: 13px 0 12px;

color: var(--color-heading);

font-family: var(--font-heading);

font-size: 3.5rem;

font-weight: 500;

line-height: 0.95;

letter-spacing: -1px;
}


.section-title em {

  display: block;

  color: var(--color-primary);

  font-family: var(--font-script);

  font-size: 1.05em;

  font-weight: 400;

  letter-spacing: 0;

}


.section-description {

  max-width: 570px;

  margin: 0 auto;

  color: var(--color-body);

  font-family: var(--font-body);

  font-size: var(--fs-description);

  font-weight: 400;

  line-height: 1.8;

}

/* =========================================================
   BENEFIT CARDS
========================================================= */

.benefits-grid {

  position: relative;

}


.benefit-card {

  height: 100%;

  overflow: hidden;

  border-radius: 16px;

  background: var(--color-white);

}


.benefit-image {

  position: relative;

  height: 360px;

  overflow: hidden;

}


.benefit-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition:
    transform 0.8s cubic-bezier(.2,.65,.3,1);

}


.benefit-card:hover
.benefit-image img {

  transform: scale(1.06);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.benefit-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(20, 35, 15, 0.02) 30%,
      rgba(20, 35, 15, 0.78) 100%
    );

}


/* =========================================================
   CARD CONTENT
========================================================= */

.benefit-card-content {

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  padding: 25px;

  color: var(--color-white);

}


.benefit-number {

display: block;

margin-bottom: 10px;

color: var(--color-gold-light);

font-family: var(--font-body);

font-size: 14px;

font-weight: 600;

letter-spacing: 2px;
}


.benefit-card-content h3 {

margin: 0;

color: var(--color-white);

font-family: var(--font-heading);

font-size: 2rem;

font-weight: 500;

line-height: 0.95;
}


.benefit-card-content h3 em {

  display: block;

  margin-top: 2px;

  color: #d9dfc8;

  font-family: var(--font-script);

  font-size: 1.05em;

  font-weight: 400;

}


.benefit-card-content p {max-width: 360px;margin: 13px 0 0;color: rgba(255,255,255,0.82);font-family: var(--font-body);font-size: 1rem;line-height: 1.7;}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .benefits-heading {

    margin-bottom: 35px;

  }


  .benefit-image {

    height: 330px;

  }


 

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767.98px) {

  .benefits-section {

    padding:
      70px 0;

  }


  .section-title {

    font-size: 40px;

  }


  .benefit-image {

    height: 320px;

  }


}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .benefits-section {

    padding:
      60px 0;

  }


  .benefits-heading {

    margin-bottom: 30px;

  }


  .section-eyebrow {

    font-size: 8px;

    letter-spacing: 1.7px;

  }


  .section-title {

    margin-top: 11px;

    font-size: 36px;

    line-height: 0.98;

  }


  .section-description {

    padding: 0 15px;

    font-size: 11px;

    line-height: 1.7;

  }


  .benefit-image {

    height: 360px;

  }


  .benefit-card-content {

    padding: 22px;

  }


  .benefit-card-content h3 {

    font-size: 28px;

  }


  .benefit-card-content p {

    font-size: 9px;

  }


  .benefit-points {

    margin-top: 12px;

  }

}

/* =========================================================
   EXCEL DERM CARE - PRODUCT COLLECTION
========================================================= */

:root {

  --edc-gold: #b18a3b;
  --edc-gold-light: #d7bd78;

  --edc-cream: #f7f5ec;
  --edc-white: #ffffff;

  --edc-heading: #24351b;
  --edc-body: #62685d;
  --edc-muted: #898d82;

  --edc-border: rgba(45, 72, 29, 0.13);
}


/* =========================================================
   SECTION
========================================================= */

.edc-product-collection {

  position: relative;

  padding:
    clamp(70px, 8vw, 120px)
    0;

  background:
    var(--edc-cream);

  overflow: hidden;

}


/* =========================================================
   COLLECTION HEADING
========================================================= */

.edc-collection-heading {

  margin-bottom: 42px;

}


.edc-section-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 2.3px;

}


.edc-section-eyebrow::before {

  content: "";

  width: 25px;

  height: 1px;

  background: var(--edc-gold);

}


.edc-collection-title {

margin: 10px 0 0;

color: var(--edc-heading);

font-family: var(--font-heading);

font-size: 3.5rem;

font-weight: 500;

line-height: 1;

letter-spacing: -2px;
}


.edc-collection-title em {

color: var(--color-primary);

font-family: var(--font-script);

font-size: 1.08em;

font-weight: 400;

letter-spacing: 0;
}


.edc-collection-intro {

  margin: 0 0 3px auto;

  color: var(--edc-body);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.8;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.edc-product-card {
  height: 100%;
  padding: 0;
  background: var(--edc-white);
  border: 1px solid var(--edc-border);
  border-radius: 12px;
  overflow: hidden;
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}


.edc-product-card:hover {

  transform: translateY(-5px);
  box-shadow:
    0 16px 35px rgba(45, 72, 29, .10);

}


/* =========================================================
   PRODUCT IMAGE AREA
========================================================= */

.edc-product-visual {

  position: relative;

  height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #fafaf5,
      #f1f0e8
    );

  border-bottom:
    1px solid var(--edc-border);

  overflow: hidden;

}


/* subtle background shape */

.edc-product-visual::after {

  content: "";

  position: absolute;

  width: 250px;
  height: 250px;

  border-radius: 50%;

  background:
    rgba(72, 97, 31, .055);

  pointer-events: none;

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.edc-product-image {

  position: relative;

  z-index: 2;

  width: 88%;

  height: 88%;

  object-fit: contain;

  transition:
    transform .5s cubic-bezier(.2,.65,.3,1);

}


.edc-product-card:hover
.edc-product-image {

  transform:
    scale(1.055)
    translateY(-3px);

}



/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.edc-product-actions {

  position: absolute;

  z-index: 10;

  top: 12px;
  right: 12px;

  display: flex;

  flex-direction: column;

  gap: 7px;

}


.edc-product-action {

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  color: var(--color-primary-dark);

  background:
    rgba(255,255,255,.94);

  border:
    1px solid rgba(45,72,29,.12);

  border-radius: 50%;

  font-size: 11px;

  cursor: pointer;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.edc-product-action:hover {

  color: var(--edc-white);

  background: var(--color-primary);

  border-color: var(--color-primary);

  transform: scale(1.08);

}


/* wishlist active */

.edc-wishlist-btn.edc-wishlist-active {

  color: #9c4c4c;

}


.edc-wishlist-btn.edc-wishlist-active i::before {

  content: "\f415";

}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.edc-product-info {

  padding: 15px 14px 16px;

}


/* name + price */

.edc-product-topline {display: flex;align-items: start;justify-content: space-between;gap: 10px;text-align: left;flex-direction: column;}


.edc-product-name {

margin: 0;

color: var(--edc-heading);

font-family: var(--edc-font-heading);

font-size: 18px;

letter-spacing: 1px;

font-weight: 600;

line-height: 1;
}


.edc-product-price {

flex-shrink: 0;

color: var(--color-primary-dark);

font-family: var(--font-body);

font-size: 18px;

font-weight: 600;
}


/* short description */

.edc-product-short {margin: 7px 0 13px;color: var(--edc-muted);font-family: var(--font-body);font-size: 12px;letter-spacing: .6px;text-align: left;}


/* =========================================================
   BUNDLE SELECTOR
========================================================= */

.edc-bundle-selector {

  position: relative;

}


.edc-bundle-selector label {

display: block;

margin-bottom: 7px;

color: var(--edc-muted);

font-family: var(--font-body);

font-size: 12px;

letter-spacing: .4px;
}


.edc-bundle-select {

width: 100%;

min-height: 31px;

padding:
    5px 27px 5px 9px;

color: var(--edc-heading);

background-color: #fafaf6;

border:
    1px solid var(--edc-border);

border-radius: 6px;

outline: none;

font-family: var(--font-body);

font-size: 14px;

cursor: pointer;

transition:
    border-color .25s ease,
    box-shadow .25s ease;
}


.edc-bundle-select:hover {

  border-color:
    rgba(72,97,31,.35);

}


.edc-bundle-select:focus {

  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 3px rgba(72,97,31,.08);

}


/* =========================================================
   VIEW ALL
========================================================= */

.edc-products-footer {

  display: flex;

  justify-content: center;

  margin-top: 42px;

}


.edc-view-products {

display: inline-flex;

align-items: center;

gap: 10px;

padding:
    11px 20px;

color: var(--edc-white);

background: var(--color-primary);

border-radius: 30px;

text-decoration: none;

font-family: var(--font-body);

font-size: 16px;

font-weight: 500;

transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}


.edc-view-products i {

  font-size: 11px;

  transition:
    transform .25s ease;

}


.edc-view-products:hover {

  color: var(--edc-white);

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(45,72,29,.16);

}


.edc-view-products:hover i {

  transform: translateX(4px);

}


/* =========================================================
   EXCEL DERM CARE
   ABOUT / BRAND STORY SECTION
========================================================= */

.edc-about-section {

  padding: var(--section-padding) 0;

  background: url(../images/abt-bg.jpg) no-repeat 0 0;
  background-size: cover;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.edc-about-wrapper {

padding: 20px;

position: relative;

overflow: hidden;

background: linear-gradient(110deg, #2d481dc7 0%, #48611f8c 100%);

border-radius: 18px;

min-height: 350px;

box-shadow: var(--shadow-soft);

backdrop-filter: blur(10px);
}


/* =========================================================
   CONTENT
========================================================= */

.edc-about-content {

  position: relative;

  z-index: 5;

  padding:
    45px
    20px
    45px
    45px;

}


.edc-about-eyebrow {

position: relative;

display: inline-block;

margin-bottom: 12px;

color: var(--color-gold-light);

font-family: var(--font-body);

/* font-size: var(--fs-eyebrow); */

font-weight: 600;

letter-spacing: 2.3px;

text-transform: uppercase;

display: flex;

align-items: center;

font-size: 9px;

gap: 10px;
}


.edc-about-title {

margin: 0;

max-width: 280px;

color: var(--color-white);

font-family: var(--font-heading);

font-size: 3.5rem;

line-height: 0.98;

font-weight: 400;
}


.edc-about-title span {

  display: block;

  color: var(--color-gold-light);

  font-family: var(--font-script);

  font-style: italic;

  font-weight: 400;

}


.edc-about-text {

max-width: 350px;

margin-top: 22px;

margin-bottom: 0;

color:
    rgba(
      255,
      255,
      255,
      0.82
    );

font-family: var(--font-body);

font-size: 15px;

line-height: 1.75;
}


.edc-about-text-secondary {

margin-top: 17px;

color:
    rgba(
      255,
      255,
      255,
      0.62
    );
}


/* =========================================================
   ABOUT BUTTON
========================================================= */

.edc-about-btn {

display: inline-flex;

align-items: center;

gap: 12px;

margin-top: 25px;

padding: 10px 17px;

color: var(--color-primary-dark);

background: var(--color-cream-light);

border: 1px solid transparent;

border-radius: 50px;

font-family: var(--font-body);

font-size: 12px;

font-weight: 600;

letter-spacing: 0.4px;

text-decoration: none;

transition: var(--transition);
}


.edc-about-btn i {

  font-size: 12px;

  transition: var(--transition);

}


.edc-about-btn:hover {

  color: var(--color-white);

  background: transparent;

  border-color:
    rgba(
      255,
      255,
      255,
      0.5
    );

}


.edc-about-btn:hover i {

  transform: translateX(4px);

}


/* =========================================================
   MAIN WOMAN IMAGE
========================================================= */

.edc-about-main-image {

  position: relative;

  height: 100%;

  min-height: 340px;

  padding: 10px;

}


.edc-about-main-image img {

  width: 100%;

  height: 100%;

  min-height: 320px;

  object-fit: cover;

  border-radius: 12px;

  display: block;

}


/* =========================================================
   PRODUCT / BOTANICAL IMAGE
========================================================= */

.edc-about-product-image {

height: 100%;

min-height: 340px;

padding: 10px;
}


.edc-about-product-image img {

  width: 100%;

  height: 100%;

  min-height: 320px;

  object-fit: cover;

  border-radius: 12px;

  display: block;

  transition: var(--transition);

}


.edc-about-product-image:hover img {

  transform: scale(1.025);

}


/* =========================================================
   SMALL IMAGE
========================================================= */

.edc-about-small-image {

height: 100%;

min-height: 340px;

padding: 10px;

display: flex;

align-items: center;
}


.edc-about-small-image img {

width: 100%;

height: 100%;

aspect-ratio: 1 / 2;

object-fit: cover;

border-radius: 12px;

display: block;

transition: var(--transition);
}


.edc-about-small-image:hover img {

  transform: scale(1.04);

}


/* =========================================================
   DECORATIVE LIGHT
========================================================= */

.edc-about-wrapper::after {

  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  right: -100px;

  bottom: -150px;

  border-radius: 50%;

  background:
    rgba(
      215,
      189,
      124,
      0.12
    );

  pointer-events: none;

}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .edc-about-content {

    padding-left: 32px;

  }

  .edc-about-title {

    font-size: 2.7rem;

  }

  .edc-about-text {

    font-size: 11px;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .edc-about-wrapper {

    min-height: auto;

  }


  .edc-about-content {

    padding: 35px 20px 35px 30px;

  }


  .edc-about-title {

    font-size: 2.5rem;

  }


  .edc-about-main-image,
  .edc-about-product-image,
  .edc-about-small-image {

    min-height: 280px;

  }


  .edc-about-main-image img,
  .edc-about-product-image img {

    min-height: 260px;

  }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767.98px) {

  .edc-about-section {

    padding:
      50px 0;

  }


  .edc-about-wrapper {

    border-radius: 15px;

  }


  .edc-about-content {

    padding: 35px 25px 25px;

  }


  .edc-about-title {

    max-width: none;

    font-size: 2.7rem;

  }


  .edc-about-text {

    max-width: 100%;

  }


  .edc-about-main-image,
  .edc-about-product-image {

    min-height: 250px;

    padding: 8px 20px;

  }


  .edc-about-main-image img,
  .edc-about-product-image img {

    min-height: 230px;

  }


  .edc-about-small-image {

    min-height: auto;

    padding:
      8px 20px
      25px;

  }


  .edc-about-small-image img {

    aspect-ratio: 16 / 7;

  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .edc-about-content {

    padding:
      32px 22px
      22px;

  }


  .edc-about-eyebrow {

    font-size: 8px;

    letter-spacing: 1.6px;

  }


  .edc-about-title {

    font-size: 2.35rem;

  }


  .edc-about-text {

    font-size: 11px;

    line-height: 1.7;

  }


  .edc-about-btn {

    margin-top: 20px;

  }


  .edc-about-main-image,
  .edc-about-product-image {

    min-height: 220px;

    padding:
      6px 18px;

  }


  .edc-about-main-image img,
  .edc-about-product-image img {

    min-height: 210px;

  }


  .edc-about-small-image {

    padding:
      6px 18px
      22px;

  }

}

.edc-about-eyebrow::before{
        content: "";
    width: 25px;
    height: 1px;
    background: var(--edc-gold);
}


/* =========================================================
   EXCEL DERM CARE
   PRODUCT CARE SHOWCASE
========================================================= */

.edc-care-showcase {

  padding: var(--section-padding) 0;

  background: var(--color-cream-light);

}


/* =========================================================
   MAIN CARD
========================================================= */

.edc-care-card {

  position: relative;

  overflow: hidden;

  background:  linear-gradient(135deg,  #f8f8ef 0%,  #f0f2df 100%);

  border: 1px solid  rgba(72, 97, 31, 0.08);

  border-radius: 24px;

  box-shadow: 0 20px 60px rgba(45, 72, 29, 0.08);

}


/* =========================================================
   PRODUCT VISUAL
========================================================= */

.edc-care-visual {

  position: relative;

  min-height: 600px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}


/* Soft background glow */

.edc-care-visual::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(113, 134, 82, 0.22),
      rgba(113, 134, 82, 0)
    );

  z-index: 0;

}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.edc-care-image-wrap {

  position: relative;

  z-index: 2;

  width: 70%;

  max-width: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

}


.edc-care-product-img {

  width: 100%;

  max-height: 520px;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(
      0 25px 25px
      rgba(30, 40, 20, 0.18)
    );

  transition: var(--transition);

}


.edc-care-image-wrap:hover
.edc-care-product-img {

  transform:
    translateY(-8px)
    scale(1.02);

}


/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.edc-care-leaf {

  position: absolute;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

  opacity: 0.25;

  font-size: 80px;

  z-index: 1;

}


.edc-care-leaf-one {

  left: 7%;

  bottom: 13%;

  transform: rotate(-30deg);

}


.edc-care-leaf-two {

  right: 8%;

  top: 14%;

  transform:
    rotate(35deg)
    scale(0.65);

  opacity: 0.16;

}


/* =========================================================
   CONTENT
========================================================= */

.edc-care-content {

  padding:
    65px
    65px
    65px
    25px;

}



/* =========================================================
   HEADING
========================================================= */

.edc-care-heading {

/* max-width: 480px; */

margin: 0;

color: var(--color-black);

font-family: var(--font-heading);

font-size: 3.5rem;

line-height: 0.98;

font-weight: 400;
}


.edc-care-heading span {

  display: block;

  color: var(--color-primary);

  font-family: var(--font-script);

  font-style: italic;

}


/* =========================================================
   INTRO
========================================================= */

.edc-care-intro {

/* max-width: 470px; */

margin:
    22px 0 30px;

color: var(--color-muted);

font-family: var(--font-body);

font-size: 16px;

line-height: 1.8;
}


/* =========================================================
   CARE LIST
========================================================= */

.edc-care-list {

  max-width: 510px;

}


/* =========================================================
   CARE ITEM
========================================================= */

.edc-care-item {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  padding: 16px 0;

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.12);

}


.edc-care-item:first-child {

  padding-top: 0;

}


.edc-care-item:last-child {

  border-bottom: 0;

}


/* =========================================================
   ICON
========================================================= */

.edc-care-icon {

  width: 38px;

  height: 38px;

  flex: 0 0 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--color-primary);

  background:
    rgba(72, 97, 31, 0.09);

  font-size: 16px;

  transition: var(--transition);

}


.edc-care-item:hover
.edc-care-icon {

  color: var(--color-white);

  background: var(--color-primary);

  transform: rotate(-8deg);

}


/* =========================================================
   ITEM TEXT
========================================================= */

.edc-care-item-content h3 {

margin: 1px 0 10px;

color: var(--color-black);

font-family: var(--font-body);

font-size: 16px;

font-weight: 700;
}


.edc-care-item-content p {

/* max-width: 390px; */

margin: 0;

color: var(--color-muted);

font-family: var(--font-body);

font-size: 14px;

line-height: 1.65;
}


/* =========================================================
   CTA
========================================================= */

.edc-care-btn {

display: inline-flex;

align-items: center;

gap: 12px;

margin-top: 27px;

padding: 12px 20px;

color: var(--color-white);

background: var(--color-primary);

border: 1px solid var(--color-primary);

border-radius: 50px;

font-family: var(--font-body);

font-size: 14px;

font-weight: 600;

text-decoration: none;

transition: var(--transition);
}


.edc-care-btn i {

  transition: var(--transition);

}


.edc-care-btn:hover {

  color: var(--color-primary);

  background: transparent;

}


.edc-care-btn:hover i {

  transform: translateX(5px);

}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .edc-care-content {

    padding:
      50px
      40px
      50px
      15px;

  }


  .edc-care-visual {

    min-height: 540px;

  }


  .edc-care-image-wrap {

    width: 75%;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .edc-care-visual {

    min-height: 450px;

  }


  .edc-care-image-wrap {

    width: 55%;

  }


  .edc-care-product-img {

    max-height: 420px;

  }


  .edc-care-content {

    padding:
      45px
      40px
      50px;

  }


  .edc-care-heading {

    font-size: 3rem;

  }


  .edc-care-intro {

    max-width: 600px;

  }


  .edc-care-list {

    max-width: 650px;

  }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767.98px) {

  .edc-care-showcase {

    padding: 50px 0;

  }


  .edc-care-card {

    border-radius: 18px;

  }


  .edc-care-visual {

    min-height: 380px;

  }


  .edc-care-image-wrap {

    width: 55%;

  }


  .edc-care-product-img {

    max-height: 360px;

  }


  .edc-care-content {

    padding:
      35px
      25px
      40px;

  }


  .edc-care-heading {

    font-size: 2.7rem;

  }


  .edc-care-intro {

    font-size: 11px;

  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .edc-care-visual {

    min-height: 330px;

  }


  .edc-care-image-wrap {

    width: 60%;

  }


  .edc-care-product-img {

    max-height: 310px;

  }


  .edc-care-leaf {

    font-size: 60px;

  }


  .edc-care-content {

    padding:
      30px
      20px
      35px;

  }


  .edc-care-heading {

    font-size: 2.35rem;

  }


  .edc-care-intro {

    margin-top: 18px;

    font-size: 10px;

  }


  .edc-care-item {

    gap: 12px;

    padding: 14px 0;

  }


  .edc-care-icon {

    width: 34px;

    height: 34px;

    flex-basis: 34px;

    font-size: 14px;

  }


  .edc-care-item-content h3 {

    font-size: 11px;

  }


  .edc-care-item-content p {

    font-size: 9px;

  }

}


/* =========================================================
   EXCEL DERM CARE
   FAQ SECTION
========================================================= */

.edc-faq-section {

  position: relative;

  padding: var(--section-padding) 0;

  background: var(--color-white);

}


/* =========================================================
   FAQ LIST
========================================================= */

.edc-faq-list {

  padding-right: 25px;

}


/* =========================================================
   FAQ ITEM
========================================================= */

.edc-faq-item {

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.14);

}


.edc-faq-item:first-child {

  border-top:
    1px solid
    rgba(72, 97, 31, 0.14);

}


/* =========================================================
   QUESTION BUTTON
========================================================= */

.edc-faq-question {

position: relative;

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

padding: 20px 2px;

color: var(--color-black);

background: transparent;

border: 0;

outline: none;

text-align: left;

font-family: var(--font-body);

font-size: 14px;

font-weight: 600;

line-height: 1.5;

cursor: pointer;

transition: var(--transition);
}


.edc-faq-question:hover {

  color: var(--color-primary);

}


/* =========================================================
   PLUS / MINUS ICON
========================================================= */

.edc-faq-question i {

  width: 25px;

  height: 25px;

  flex: 0 0 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

  background:
    rgba(72, 97, 31, 0.08);

  border-radius: 50%;

  font-size: 12px;

  transition: var(--transition);

}


/* Hide minus when collapsed */

.edc-faq-question.collapsed
.edc-faq-minus {

  display: none;

}


/* Hide plus when open */

.edc-faq-question:not(.collapsed)
.edc-faq-plus {

  display: none;

}


/* =========================================================
   ACTIVE QUESTION
========================================================= */

.edc-faq-question:not(.collapsed) {

  color: var(--color-primary);

}


.edc-faq-question:not(.collapsed) i {

  color: var(--color-white);

  background: var(--color-primary);

}


/* =========================================================
   FAQ ICON STATE
========================================================= */

.edc-faq-question {
  position: relative;
}


/* By default show MINUS for an open accordion */

.edc-faq-question .edc-faq-minus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Hide PLUS when open */

.edc-faq-question .edc-faq-plus {
  display: none;
}


/* =========================================================
   COLLAPSED = CLOSED
========================================================= */

/* When Bootstrap adds .collapsed,
   hide minus and show plus */

.edc-faq-question.collapsed .edc-faq-minus {
  display: none;
}


.edc-faq-question.collapsed .edc-faq-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* =========================================================
   ICON TRANSITION
========================================================= */

.edc-faq-question i {
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}


/* Optional hover */

.edc-faq-question:hover i {
  transform: rotate(5deg);
}

/* =========================================================
   ANSWER
========================================================= */

.edc-faq-answer {

max-width: 430px;

padding:
    0
    35px
    20px
    2px;

color: var(--color-muted);

font-family: var(--font-body);

font-size: 14px;

line-height: 1.75;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

.edc-faq-center {

  min-height: 430px;

  padding:
    40px 35px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  background: var(--color-cream);

  border-radius: 50%;

}


.edc-faq-eyebrow {

  margin-bottom: 12px;

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: var(--fs-eyebrow);

  font-weight: 700;

  letter-spacing: 2px;

}


.edc-faq-heading {

  margin: 0;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: clamp(
    2.4rem,
    3.2vw,
    3.6rem
  );

  line-height: 0.95;

  font-weight: 400;

}


.edc-faq-heading span {

  display: block;

  color: var(--color-primary);

  font-family: var(--font-script);

  font-style: italic;

}


.edc-faq-description {

max-width: 280px;

margin:
    20px auto 0;

color: var(--color-muted);

font-family: var(--font-body);

font-size: 14px;

line-height: 1.75;
}


/* =========================================================
   CENTER ICON
========================================================= */

.edc-faq-center-icon {

  width: 42px;

  height: 42px;

  margin-top: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

  background: var(--color-white);

  border-radius: 50%;

  box-shadow:
    0 8px 25px
    rgba(45, 72, 29, 0.08);

}


.edc-faq-center-icon i {

  font-size: 17px;

}


/* =========================================================
   CONTACT TEXT
========================================================= */

.edc-faq-note {

margin:
    18px 0 7px;

color: var(--color-muted);

font-family: var(--font-body);

font-size: 14px;
}


.edc-faq-contact {

display: inline-flex;

align-items: center;

gap: 7px;

color: var(--color-primary);

font-family: var(--font-body);

font-size: 18px;

font-weight: 700;

text-decoration: none;

transition: var(--transition);
}


.edc-faq-contact i {

  transition: var(--transition);

}


.edc-faq-contact:hover {

  color: var(--color-primary-dark);

}


.edc-faq-contact:hover i {

  transform: translateX(4px);

}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.edc-faq-image-wrap {

  position: relative;

  height: 100%;

  min-height: 430px;

  margin-left: 25px;

  overflow: hidden;

  border-radius: 18px;

}


.edc-faq-image {

  width: 100%;

  height: 100%;

  min-height: 430px;

  display: block;

  object-fit: cover;

  transition: transform 0.7s ease;

}


.edc-faq-image-wrap:hover
.edc-faq-image {

  transform: scale(1.035);

}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.edc-faq-image-wrap::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(45, 72, 29, 0.02),
      rgba(45, 72, 29, 0.28)
    );

  pointer-events: none;

}


/* =========================================================
   FLOATING IMAGE LABEL
========================================================= */

.edc-faq-image-label {

  position: absolute;

  z-index: 2;

  left: 20px;

  bottom: 20px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    10px 14px;

  color: var(--color-white);

  background:
    rgba(45, 72, 29, 0.72);

  border:
    1px solid
    rgba(255, 255, 255, 0.18);

  border-radius: 12px;

  backdrop-filter: blur(10px);

}


.edc-faq-image-label i {

  color: var(--color-gold-light);

  font-size: 18px;

}


.edc-faq-image-label span {

font-family: var(--font-body);

font-size: 14px;

line-height: 1.4;

letter-spacing: 0.5px;
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .edc-faq-list {

    padding-right: 15px;

  }


  .edc-faq-center {

    min-height: 390px;

  }


  .edc-faq-image-wrap,
  .edc-faq-image {

    min-height: 390px;

  }


  .edc-faq-image-wrap {

    margin-left: 15px;

  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .edc-faq-list {

    padding-right: 25px;

  }


  .edc-faq-center {

    min-height: 350px;

    border-radius: 50%;

    padding: 35px 25px;

  }


  .edc-faq-heading {

    font-size: 2.8rem;

  }


  .edc-faq-image-wrap {

    min-height: 420px;

    margin:
      30px 0 0;

  }


  .edc-faq-image {

    min-height: 420px;

  }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 767.98px) {

  .edc-faq-section {

    padding: 50px 0;

  }


  .edc-faq-list {

    padding-right: 0;

  }


  .edc-faq-question {

    padding: 17px 0;

    font-size: 10px;

  }


  .edc-faq-answer {

    padding:
      0
      30px
      18px
      0;

  }


  .edc-faq-center {

    min-height: 330px;

    margin:
      35px 0;

    border-radius: 20px;

  }


  .edc-faq-image-wrap {

    min-height: 360px;

    margin: 0;

  }


  .edc-faq-image {

    min-height: 360px;

  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .edc-faq-center {

    min-height: 310px;

    padding:
      35px 20px;

  }


  .edc-faq-heading {

    font-size: 2.35rem;

  }


  .edc-faq-description {

    max-width: 250px;

    font-size: 9px;

  }


  .edc-faq-image-wrap {

    min-height: 330px;

    border-radius: 15px;

  }


  .edc-faq-image {

    min-height: 330px;

  }


  .edc-faq-image-label {

    left: 14px;

    bottom: 14px;

  }

}


/* =========================================================
   EXCEL DERM CARE
   FOOTER SECTION
========================================================= */

.edc-footer {

  position: relative;

  overflow: hidden;

  padding-top: 80px;

  background:
    linear-gradient(
      145deg,
      #172415 0%,
      #10180e 55%,
      #0b1009 100%
    );

  color: var(--color-white);

}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.edc-footer-glow {

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(80px);

  opacity: 0.10;

}


.edc-footer-glow-one {

  top: -180px;
  left: -120px;

  background: var(--color-primary-light);

}


.edc-footer-glow-two {

  right: -150px;
  bottom: 100px;

  background: var(--color-gold);

}


/* =========================================================
   MAIN FOOTER
========================================================= */

.edc-footer-main {

position: relative;

z-index: 2;

padding-bottom: 25px;
}


/* =========================================================
   BRAND
========================================================= */

.edc-footer-logo {

width: 50%;

display: inline-flex;

flex-direction: column;

text-decoration: none;

/* color: var(--color-white); */

/* font-family: var(--font-heading); */

/* font-size: 34px; */

/* line-height: 0.8; */

/* letter-spacing: -1px; */

transition: var(--transition);
}


.edc-footer-logo span {

  margin-top: 8px;

  margin-left: 28px;

  color: var(--color-gold-light);

  font-family: var(--font-script);

  font-size: 20px;

  font-style: italic;

  letter-spacing: 0;

}


.edc-footer-logo:hover {

  color: var(--color-gold-light);

}


.edc-footer-description {

  max-width: 350px;

  margin-top: 28px;
  margin-bottom: 22px;

  color: rgba(255,255,255,0.62);

  font-family: var(--font-body);

  font-size: 13px;

  line-height: 1.8;

}



/* =========================================================
   FOOTER COLUMNS
========================================================= */

.edc-footer-column h4 {

  position: relative;

  margin-bottom: 24px;

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;

}


.edc-footer-column h4::after {

  content: "";

  display: block;

  width: 25px;
  height: 1px;

  margin-top: 9px;

  background: var(--color-gold);

}


/* =========================================================
   FOOTER LINKS
========================================================= */

.edc-footer-column ul {

  margin: 0;

  padding: 0;

  list-style: none;

}


.edc-footer-column ul li {

  margin-bottom: 12px;

}


.edc-footer-column ul li a {position: relative;color: rgba(255,255,255,0.58);font-family: var(--font-body);font-size: 14px;text-decoration: none;transition: var(--transition);}



.edc-footer-column ul li a:hover {

  color: var(--color-gold-light);

}


/* =========================================================
   CONTACT
========================================================= */

.edc-contact-intro {

  margin-bottom: 22px;

  max-width: 300px;

  color: rgba(255,255,255,0.55);

  font-size: 12px;

  line-height: 1.7;

}


.edc-contact-item {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  color: rgba(255,255,255,0.72);

  font-family: var(--font-body);

  font-size: 14px;

  text-decoration: none;

  transition: var(--transition);

}


.edc-contact-item:hover {

  color: var(--color-gold-light);

}


.edc-contact-icon {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;border: 1px solid rgba(215,189,124,0.22);border-radius: 50%;color: var(--color-gold-light);font-size: 13px;transition: var(--transition);}


.edc-contact-item:hover .edc-contact-icon {background: var(--color-gold);border-color: var(--color-gold);color: var(--color-black);transform: translateY(-2px);}


.edc-contact-item small {display: block;margin-bottom: 2px;color: rgba(255,255,255,0.38);font-size: 14px;letter-spacing: 0.7px;text-transform: uppercase;}



/* =========================================================
   CORPORATE INFORMATION
========================================================= */

.edc-corporate {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  padding: 35px 0;

  border-top:
    1px solid
    rgba(255,255,255,0.09);

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

}


.edc-corporate-heading {

  flex: 0 0 35%;

}


.edc-footer-eyebrow {

  display: block;

  margin-bottom: 10px;

  color: var(--color-gold-light);

  font-family: var(--font-body);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 2px;

}


.edc-corporate-heading h3 {

  margin: 0;

  color: var(--color-white);

  font-family: var(--font-heading);

  font-size: 28px;

  font-weight: 400;

  line-height: 1.2;

}


.edc-corporate-heading h3 em {

  display: block;

  color: var(--color-gold-light);

  font-family: var(--font-script);

  font-weight: 400;

}


.edc-corporate-content {

  max-width: 650px;

}


.edc-corporate-content p {

  margin: 0 0 15px;

  color: rgba(255,255,255,0.52);

  font-family: var(--font-body);

  font-size: 11px;

  line-height: 1.8;

}


.edc-corporate-links {

  display: flex;

  flex-wrap: wrap;

  gap: 25px;

}


.edc-corporate-links a {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: rgba(255,255,255,0.72);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.5px;

  text-decoration: none;

  transition: var(--transition);

}


.edc-corporate-links a:hover {

  color: var(--color-gold-light);

}


.edc-corporate-links i {

  font-size: 10px;

}


/* =========================================================
   FDA DISCLAIMER
========================================================= */

.edc-fda-disclaimer {

position: relative;

z-index: 2;

display: flex;

align-items: flex-start;

gap: 15px;

/* margin-top: 30px; */

padding: 20px 22px;

background:
    rgba(255,255,255,0.035);

border:
    1px solid
    rgba(255,255,255,0.08);

border-radius: 12px;
}


.edc-fda-icon {

  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    rgba(185,151,79,0.12);

  color: var(--color-gold-light);

  font-size: 14px;

}


.edc-fda-disclaimer h5 {

margin: 0 0 7px;

color: var(--color-white);

font-family: var(--font-body);

font-size: 16px;

font-weight: 700;

letter-spacing: 1px;

text-transform: uppercase;
}


.edc-fda-disclaimer p {

max-width: 1000px;

margin: 0;

color: rgba(255,255,255,0.42);

font-family: var(--font-body);

font-size: 15px;

line-height: 1.7;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.edc-footer-bottom {

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 24px 0;

}


.edc-copyright {

color: rgba(255,255,255,0.38);

font-family: var(--font-body);

font-size: 16px;
}


.edc-bottom-links {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 20px;

}


.edc-bottom-links a {

color: rgba(255,255,255,0.42);

font-family: var(--font-body);

font-size: 14px;

text-decoration: none;

transition: var(--transition);
}


.edc-bottom-links a:hover {

  color: var(--color-gold-light);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .edc-footer {

    padding-top: 65px;

  }


  .edc-footer-main {

    padding-bottom: 50px;

  }


  .edc-corporate {

    align-items: flex-start;

    flex-direction: column;

    gap: 20px;

  }


  .edc-corporate-heading {

    flex: auto;

  }


  .edc-corporate-content {

    max-width: 100%;

  }

}


/* =========================================================
   MOBILE LANDSCAPE / SMALL TABLET
========================================================= */

@media (max-width: 767.98px) {

  .edc-footer {

    padding-top: 55px;

  }


  .edc-footer-main {

    padding-bottom: 40px;

  }


  .edc-footer-description {

    max-width: 500px;

  }


  .edc-corporate {

    padding: 30px 0;

  }


  .edc-corporate-heading h3 {

    font-size: 25px;

  }


  .edc-footer-bottom {

    align-items: flex-start;

    flex-direction: column;

    padding: 22px 0;

  }


  .edc-bottom-links {

    justify-content: flex-start;

    gap: 12px 18px;

  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 575.98px) {

  .edc-footer {

    padding-top: 50px;

  }


  .edc-footer-logo {

    font-size: 31px;

  }


  .edc-footer-logo span {

    font-size: 18px;

  }


  .edc-footer-description {

    font-size: 12px;

    line-height: 1.7;

  }


  .edc-footer-column h4 {

    margin-bottom: 18px;

  }


  .edc-footer-column ul li {

    margin-bottom: 10px;

  }


  .edc-footer-column ul li a {

    font-size: 11px;

  }


  .edc-contact-intro {

    font-size: 11px;

  }


  .edc-corporate-heading h3 {

    font-size: 23px;

  }


  .edc-fda-disclaimer {

    gap: 10px;

    padding: 16px;

  }


  .edc-fda-disclaimer p {

    font-size: 8.5px;

  }


  .edc-footer-bottom {

    gap: 15px;

  }

}


/* =========================================================
   EXCEL DERM CARE
   CART OFFCANVAS
========================================================= */

.edc-cart-offcanvas {

  width: 430px !important;

  max-width: 100%;

  height: 100vh;

  background: var(--color-cream-light);

  border: none;

  box-shadow:
    -15px 0 50px
    rgba(45, 72, 29, 0.14);

}


/* =========================================================
   CART TOP WRAPPER
========================================================= */

.edc-cart-top-wrapper {

  display: flex;

  flex-direction: column;

  height: calc(100vh - 230px);

  min-height: 300px;

}


/* =========================================================
   CART HEADER
========================================================= */
.tp-product-details-area{
  padding: 50px 0;
}
.edc-cart-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 28px 28px 22px;

  background: var(--color-white);

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.10);

}


.edc-cart-eyebrow {

  display: block;

  margin-bottom: 5px;

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

}


.edc-cart-top-title h4 {

  margin: 0;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 28px;

  font-weight: 400;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.edc-cart-close {

  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid
    rgba(72, 97, 31, 0.12);

  border-radius: 50%;

  background: transparent;

  color: var(--color-muted);

  font-size: 11px;

  cursor: pointer;

  transition: var(--transition);

}


.edc-cart-close:hover {

  background: var(--color-primary);

  border-color: var(--color-primary);

  color: var(--color-white);

  transform: rotate(90deg);

}


/* =========================================================
   CART WIDGET
========================================================= */

.edc-cart-widget {

  flex: 1;

  padding: 8px 28px 30px;

  overflow-y: auto;

}


/* =========================================================
   CART ITEM
========================================================= */

.edc-cart-widget-item {

  position: relative;

  display: flex;

  gap: 14px;

  padding: 18px 0;

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.10);

}


.edc-cart-widget-item:last-child {

  border-bottom: none;

}


/* =========================================================
   PRODUCT THUMB
========================================================= */

.edc-cart-thumb {

  width: 80px;
  height: 95px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 10px;

  background: var(--color-white);

  overflow: hidden;

}


.edc-cart-thumb a {

  width: 100%;
  height: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

}


.edc-cart-thumb img {

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition: var(--transition);

}


.edc-cart-widget-item:hover
.edc-cart-thumb img {

  transform: scale(1.06);

}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.edc-cart-content {

  flex: 1;

  min-width: 0;

  padding-right: 20px;

}


.edc-cart-title {

  margin: 4px 0 3px;

}


.edc-cart-title a {

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 17px;

  font-weight: 400;

  text-decoration: none;

  transition: var(--transition);

}


.edc-cart-title a:hover {

  color: var(--color-primary);

}


.edc-cart-size {

  display: block;

  margin-bottom: 14px;

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 9px;

  letter-spacing: 0.5px;

}


/* =========================================================
   PRICE
========================================================= */

.edc-cart-price-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}


.edc-cart-price {

  color: var(--color-primary-dark);

  font-family: var(--font-body);

  font-size: 12px;

  font-weight: 700;

}


/* =========================================================
   QUANTITY
========================================================= */

.edc-cart-quantity {

  display: flex;

  align-items: center;

  height: 28px;

  border:
    1px solid
    rgba(72, 97, 31, 0.16);

  border-radius: 30px;

  background: var(--color-white);

  overflow: hidden;

}


.edc-cart-quantity button {

  width: 28px;
  height: 28px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: none;

  background: transparent;

  color: var(--color-primary);

  font-size: 9px;

  cursor: pointer;

  transition: var(--transition);

}


.edc-cart-quantity button:hover {

  background: var(--color-primary);

  color: var(--color-white);

}


.edc-cart-quantity span {

  min-width: 25px;

  text-align: center;

  color: var(--color-black);

  font-size: 10px;

}


/* =========================================================
   DELETE
========================================================= */

.edc-cart-delete {

  position: absolute;

  top: 18px;

  right: 0;

  width: 23px;
  height: 23px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: none;

  background: transparent;

  color: var(--color-muted);

  font-size: 9px;

  cursor: pointer;

  transition: var(--transition);

}


.edc-cart-delete:hover {

  color: #a64747;

  transform: rotate(90deg);

}


/* =========================================================
   CART CHECKOUT
========================================================= */

.edc-cart-checkout {

  padding: 22px 28px 25px;

  background: var(--color-white);

  border-top:
    1px solid
    rgba(72, 97, 31, 0.10);

  box-shadow:
    0 -8px 30px
    rgba(45, 72, 29, 0.05);

}


/* =========================================================
   SUBTOTAL
========================================================= */

.edc-cart-checkout-title {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 12px;

}


.edc-cart-checkout-title h4 {

  margin: 0;

  color: var(--color-black);

  font-family: var(--font-body);

  font-size: 12px;

  font-weight: 600;

}


.edc-cart-checkout-title span {

  color: var(--color-primary-dark);

  font-family: var(--font-body);

  font-size: 13px;

  font-weight: 700;

}


/* =========================================================
   GRAND TOTAL
========================================================= */

.edc-cart-grand-total {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 14px;

  margin-bottom: 18px;

  border-top:
    1px dashed
    rgba(72, 97, 31, 0.18);

}


.edc-cart-grand-total span {

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;

}


.edc-cart-grand-total strong {

  color: var(--color-primary-dark);

  font-family: var(--font-heading);

  font-size: 23px;

  font-weight: 400;

}


/* =========================================================
   BUTTONS
========================================================= */

.edc-cart-checkout-buttons {

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.edc-cart-btn {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 43px;

  border-radius: 30px;

  font-family: var(--font-body);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;

  text-decoration: none;

  transition: var(--transition);

}


/* PRIMARY */

.edc-cart-btn-primary {

  background: var(--color-primary);

  border: 1px solid var(--color-primary);

  color: var(--color-white);

}


.edc-cart-btn-primary:hover {

  background: var(--color-primary-dark);

  border-color: var(--color-primary-dark);

  color: var(--color-white);

  transform: translateY(-2px);

}


/* BORDER */

.edc-cart-btn-border {

  background: transparent;

  border: 1px solid var(--color-primary);

  color: var(--color-primary);

}


.edc-cart-btn-border:hover {

  background: var(--color-primary);

  color: var(--color-white);

}


/* =========================================================
   SECURE
========================================================= */

.edc-cart-secure {

  margin-top: 12px;

  text-align: center;

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 8px;

}


.edc-cart-secure i {

  margin-right: 4px;

  color: var(--color-primary);

}


/* =========================================================
   EMPTY CART
========================================================= */

.edc-cart-empty {

  min-height: 55vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

}


.edc-cart-empty-icon {

  width: 60px;
  height: 60px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 50%;

  background:
    rgba(72, 97, 31, 0.08);

  color: var(--color-primary);

  font-size: 20px;

}


.edc-cart-empty h5 {

  margin-bottom: 7px;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 23px;

  font-weight: 400;

}


.edc-cart-empty p {

  max-width: 260px;

  margin-bottom: 18px;

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 10px;

  line-height: 1.7;

}


.edc-cart-shop-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 11px 18px;

  border-radius: 30px;

  background: var(--color-primary);

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 9px;

  font-weight: 600;

  text-decoration: none;

  transition: var(--transition);

}


.edc-cart-shop-btn:hover {

  background: var(--color-primary-dark);

  color: var(--color-white);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .edc-cart-offcanvas {

    width: 100% !important;

  }


  .edc-cart-top {

    padding: 22px 20px;

  }


  .edc-cart-widget {

    padding-left: 20px;
    padding-right: 20px;

  }


  .edc-cart-checkout {

    padding-left: 20px;
    padding-right: 20px;

  }

}

/* =========================================================
   EXCEL DERM CARE
   CART AREA
========================================================= */

.edc-cart-area {

  padding: var(--section-padding) 0;

  background: var(--color-cream-light);

}

/* =========================================================
   CART LIST
========================================================= */

.edc-cart-list {
    padding: 30px;
    background: var(--color-white);
    border: 1px solid rgba(72, 97, 31, 0.08);
    border-radius: 22px;
    box-shadow: var(--shadow-soft);
}


/* =========================================================
   CART HEADER
========================================================= */

.edc-cart-list-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(72, 97, 31, 0.10);
}

.edc-cart-heading > span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: 2px;
}

.edc-cart-heading h2 {
    margin: 0;
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.edc-cart-table-head {
    display: grid;

    /* 
       Image | Product | Price | Quantity | Total | Remove
    */
    grid-template-columns:
        90px
        minmax(180px, 1fr)
        90px
        120px
        90px
        65px;

    align-items: center;
    gap: 15px;

    padding: 18px 0;

    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(72, 97, 31, 0.10);
}


/* Product heading covers image + product columns */

.edc-cart-product-heading {
    grid-column: span 2;
}


/* =========================================================
   CART ITEM
========================================================= */

.edc-cart-item {
    display: grid;

    /*
       Image | Product | Price | Qty Controls | Total | Remove
    */
    grid-template-columns:
        90px
        minmax(180px, 1fr)
        90px
        120px
        90px
        65px;

    align-items: center;
    gap: 15px;

    min-height: 135px;
    padding: 22px 0;

    border-bottom: 1px solid rgba(72, 97, 31, 0.08);

    transition: var(--transition);
}


/* Soft hover */

.edc-cart-item:hover {
    background: linear-gradient(
        90deg,
        rgba(239, 241, 223, 0.40),
        transparent
    );
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

/*
   Your HTML currently has:

   <div class="d-flex">
       <img ...>
   </div>

   So style that first child directly.
*/

.edc-cart-item > .d-flex {
    width: 90px;
    height: 110px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 8px;

    background: var(--color-cream-light);

    border-radius: 12px;

    overflow: hidden;
}


.edc-cart-item > .d-flex img {
    width: 100%;
    height: 100%;

    max-width: 100% !important;

    object-fit: contain;

    display: block;

    transition: var(--transition);
}


.edc-cart-item:hover > .d-flex img {
    transform: scale(1.06);
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.edc-cart-product {
    min-width: 0;

    display: flex;
    align-items: center;
}


.edc-cart-product-info {
    min-width: 0;
}


.edc-cart-product-info h4 {
    margin: 0;
}


.edc-cart-product-info h4 a {
    display: block;

    color: var(--color-black);

    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;

    text-decoration: none;

    transition: var(--transition);
}


.edc-cart-product-info h4 a:hover {
    color: var(--color-primary);
}


/* =========================================================
   PRICE
========================================================= */

.edc-cart-price {
    color: var(--color-primary-dark);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   HIDE DUPLICATE QUANTITY
========================================================= */

/*
   This is the anonymous:

   <div>
       {{item.productQty}}
   </div>

   It creates the extra "1" visible in your screenshot.

   Hide only the 4th direct child.
*/

.edc-cart-item > div:nth-child(4) {
    display: none;
}


/* =========================================================
   QUANTITY CONTROLS
========================================================= */

.quantity-controls {
    width: 105px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid rgba(72, 97, 31, 0.20);

    border-radius: 30px;

    background: var(--color-white);

    overflow: hidden;
}


/* Quantity buttons */

.quantity-btn {
    width: 32px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--color-primary);

    font-size: 10px;

    cursor: pointer;

    transition: var(--transition);
}


.quantity-btn:hover {
    background: var(--color-primary);
    color: var(--color-white) !important;
}


.quantity-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* Quantity input */

.quantity-input {
    width: 35px;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--color-black);

    text-align: center;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   TOTAL
========================================================= */

.edc-cart-item-total {
    color: var(--color-primary-dark);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}



/* =========================================================
   CART BOTTOM
========================================================= */

.edc-cart-bottom {
    padding-top: 25px;
}


.edc-cart-continue {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--color-primary-dark);

    font-family: var(--font-body);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    text-decoration: none;

    transition: var(--transition);
}


.edc-cart-continue i {
    font-size: 14px;

    transition: var(--transition);
}


.edc-cart-continue:hover {
    color: var(--color-gold);
}


.edc-cart-continue:hover i {
    transform: translateX(-4px);
}


/* =========================================================
   EMPTY CART
========================================================= */

.edc-cart-empty {
    padding: 70px 30px;

    text-align: center;
}


.edc-cart-empty-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(72, 97, 31, 0.08);

    color: var(--color-primary);

    font-size: 22px;
}


.edc-cart-empty h3 {
    margin-bottom: 10px;

    color: var(--color-black);

    font-family: var(--font-heading);

    font-size: 25px;

    font-weight: 400;
}


.edc-cart-empty p {
    max-width: 420px;

    margin: 0 auto 25px;

    color: var(--color-muted);

    font-family: var(--font-body);

    font-size: 13px;

    line-height: 1.7;
}


.edc-cart-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 22px;

    border-radius: 30px;

    background: var(--color-primary);

    color: var(--color-white);

    font-family: var(--font-body);

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    transition: var(--transition);
}


.edc-cart-primary-btn:hover {
    background: var(--color-primary-dark);

    color: var(--color-white);

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .edc-cart-list {
        padding: 22px;
    }

    .edc-cart-table-head {
        grid-template-columns:
            75px
            minmax(150px, 1fr)
            75px
            100px
            75px
            50px;

        gap: 10px;

        font-size: 9px;
    }

    .edc-cart-item {
        grid-template-columns:
            75px
            minmax(150px, 1fr)
            75px
            100px
            75px
            50px;

        gap: 10px;
    }

    .edc-cart-item > .d-flex {
        width: 75px;
        height: 95px;
    }

    .edc-cart-product-info h4 a {
        font-size: 15px;
    }

    .quantity-controls {
        width: 90px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .edc-cart-list {
        padding: 18px;
        border-radius: 16px;
    }

    .edc-cart-table-head {
        display: none;
    }

    .edc-cart-item {
        grid-template-columns: 75px 1fr;

        gap: 15px;

        padding: 20px 0;
    }


    /* IMAGE */

    .edc-cart-item > .d-flex {
        grid-column: 1;
        grid-row: 1 / span 4;

        width: 75px;
        height: 90px;
    }


    /* PRODUCT */

    .edc-cart-product {
        grid-column: 2;
        grid-row: 1;
    }


    .edc-cart-product-info h4 a {
        font-size: 15px;
    }


    /* PRICE */

    .edc-cart-price {
        grid-column: 2;
        grid-row: 2;

        font-size: 12px;
    }


    /* QUANTITY */

    .quantity-controls {
        grid-column: 2;
        grid-row: 3;

        width: 95px;
    }


    /* TOTAL */

    .edc-cart-item-total {
        grid-column: 2;
        grid-row: 4;

        font-size: 12px;
    }


    /* REMOVE */

    .edc-cart-remove {
        position: absolute;

        right: 0;
        top: 20px;
    }

    .edc-cart-item {
        position: relative;
    }

    .edc-cart-remove span {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .edc-cart-heading h2 {
        font-size: 2rem;
    }

    .edc-cart-item > .d-flex {
        width: 65px;
        height: 80px;
    }

    .edc-cart-item {
        grid-template-columns: 65px 1fr;
        gap: 12px;
    }

}


/* =========================================================
   ITEM TOTAL
========================================================= */

.edc-cart-item-total {

  color: var(--color-primary-dark);

  font-family: var(--font-body);

  font-size: 12px;

  font-weight: 700;

}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.edc-cart-remove {

  padding: 0;
  border: 0;
  background: transparent;

}


.edc-cart-remove i {

   color: var(--color-muted);
    cursor: pointer;
    transition: var(--transition);
  font-size: 14px;
    font-weight: 800;
      font-family: var(--font-body);

}


.edc-cart-remove:hover {

  color: #a04747;

}


.edc-cart-remove:hover i {

  transform: rotate(90deg);

}


/* =========================================================
   CART BOTTOM
========================================================= */

.edc-cart-bottom {

  padding-top: 22px;

}


.edc-cart-continue {display: inline-flex;align-items: center;gap: 8px;color: var(--color-primary);font-family: var(--font-body);font-size: 14px;font-weight: 700;letter-spacing: 0.8px;text-decoration: none;text-transform: uppercase;transition: var(--transition);}


.edc-cart-continue:hover {

  gap: 12px;

  color: var(--color-primary-dark);

}


/* =========================================================
   CHECKOUT SUMMARY
========================================================= */

.edc-cart-summary {

  position: sticky;

  top: 25px;

  padding: 30px;

  border-radius: 22px;

  background: var(--color-white);

  border:
    1px solid
    rgba(72, 97, 31, 0.08);

  box-shadow:
    0 15px 50px
    rgba(45, 72, 29, 0.08);

}


/* =========================================================
   SUMMARY HEADER
========================================================= */

.edc-cart-summary-header {

  padding-bottom: 20px;

  margin-bottom: 20px;

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.10);

}


.edc-cart-summary-header span {display: block;margin-bottom: 6px;color: var(--color-primary);font-family: var(--font-body);font-size: 11px;font-weight: 700;letter-spacing: 1.8px;}


.edc-cart-summary-header h3 {

  margin: 0;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 27px;

  font-weight: 400;

}


/* =========================================================
   SUMMARY ROW
========================================================= */

.edc-summary-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 18px;

}


.edc-summary-row span {color: var(--color-muted);font-family: var(--font-body);font-size: 18px;}


.edc-summary-row strong {color: var(--color-black);font-family: var(--font-body);font-size: 16px;}


/* =========================================================
   SHIPPING
========================================================= */

.edc-summary-shipping {

  padding: 18px 0;

  border-top:
    1px solid
    rgba(72, 97, 31, 0.08);

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.08);

}


.edc-summary-shipping h5 {

  margin: 0 0 12px;

  color: var(--color-black);

  font-family: var(--font-body);

  font-size: 11px;

  font-weight: 700;

}


.edc-shipping-option {

  display: flex;

  align-items: center;

}


.edc-shipping-option input {

  width: 14px;
  height: 14px;

  margin-right: 10px;

  accent-color: var(--color-primary);

}


.edc-shipping-option label {width: 100%;display: flex;align-items: center;justify-content: space-between;color: var(--color-muted);font-family: var(--font-body);font-size: 14px;cursor: pointer;}


.edc-shipping-option label strong {color: var(--color-primary);font-size: 16px;}


/* =========================================================
   TOTAL
========================================================= */

.edc-summary-total {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 20px 0;

}


.edc-summary-total span {color: var(--color-black);font-family: var(--font-body);font-size: 24px;font-weight: 700;}


.edc-summary-total strong {

  color: var(--color-primary-dark);

  font-family: var(--font-heading);

  font-size: 27px;

  font-weight: 400;

}


/* =========================================================
   BUTTONS
========================================================= */

.edc-summary-actions {

  display: flex;

  flex-direction: column;

  gap: 9px;

}


.edc-summary-btn {width: 100%;min-height: 46px;display: flex;align-items: center;justify-content: center;gap: 8px;border-radius: 30px;font-family: var(--font-body);font-size: 14px;font-weight: 700;letter-spacing: 1px;text-decoration: none;text-transform: uppercase;transition: var(--transition);}


.edc-summary-btn-primary {

  border: 1px solid var(--color-primary);

  background: var(--color-primary);

  color: var(--color-white);

}


.edc-summary-btn-primary:hover {

  border-color: var(--color-primary-dark);

  background: var(--color-primary-dark);

  color: var(--color-white);

  transform: translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(45, 72, 29, 0.18);

}


.edc-summary-btn-outline {

  border:
    1px solid
    rgba(72, 97, 31, 0.25);

  background: transparent;

  color: var(--color-primary);

}


.edc-summary-btn-outline:hover {

  border-color: var(--color-primary);

  background:
    rgba(72, 97, 31, 0.06);

  color: var(--color-primary-dark);

}


/* =========================================================
   TRUST
========================================================= */

.edc-cart-trust {

  display: flex;

  flex-direction: column;

  gap: 9px;

  margin-top: 22px;

  padding-top: 18px;

  border-top:
    1px solid
    rgba(72, 97, 31, 0.08);

}


.edc-cart-trust div {

  display: flex;

  align-items: center;

  gap: 8px;

}


.edc-cart-trust i {

  color: var(--color-gold);

  font-size: 12px;

}


.edc-cart-trust span {color: var(--color-muted);font-family: var(--font-body);font-size: 16px;letter-spacing: 0.3px;}


/* =========================================================
   EMPTY CART
========================================================= */

.edc-cart-empty {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 400px;

  padding: 40px;

  text-align: center;

}


.edc-cart-empty-icon {

  width: 65px;
  height: 65px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin-bottom: 18px;

  border-radius: 50%;

  background:
    rgba(72, 97, 31, 0.08);

  color: var(--color-primary);

  font-size: 21px;

}


.edc-cart-empty h3 {

  margin-bottom: 8px;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 25px;

  font-weight: 400;

}


.edc-cart-empty p {

  max-width: 350px;

  margin-bottom: 20px;

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 10px;

  line-height: 1.7;

}


.edc-cart-primary-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 20px;

  border-radius: 30px;

  background: var(--color-primary);

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 9px;

  font-weight: 700;

  text-decoration: none;

  text-transform: uppercase;

  transition: var(--transition);

}


.edc-cart-primary-btn:hover {

  background: var(--color-primary-dark);

  color: var(--color-white);

  transform: translateY(-2px);

}


/* =========================================================
   EXCEL DERM CARE
   CHECKOUT / SHIPPING SECTION
   Uses existing :root variables
========================================================= */

.checkout_area {
  padding: 80px 0;
  background: var(--color-cream-light);
  font-family: var(--font-body);
}


/* =========================================================
   MAIN FORM WRAPPER
========================================================= */

.billing_details {
  position: relative;
}

.contact_form {
  align-items: flex-start;
}


/* =========================================================
   LEFT CHECKOUT FORM
========================================================= */

.contact_form > .row.col-lg-8 {
  margin: 0;
  padding: 35px 35px 30px;
  background: var(--color-white);
  border: 1px solid rgba(72, 97, 31, 0.08);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.contact_form h3,
.creat_account h3 {
  margin: 0 0 25px;
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

.contact_form > .row.col-lg-8 > .col-md-12.form-group.mb-0 {
  margin-top: 25px;
}

.creat_account h3 {
  margin-bottom: 18px;
}


/* =========================================================
   FORM GROUP
========================================================= */

.contact_form .form-group {
  margin-bottom: 16px;
}

.contact_form .form-control,
.contact_form .country_select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(72, 97, 31, 0.15);
  border-radius: 10px;
  outline: none;
  background: var(--color-cream-light);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 14px;
  transition: var(--transition);
}


/* =========================================================
   INPUT PLACEHOLDER
========================================================= */

.contact_form .form-control::placeholder {
  color: var(--color-muted);
  opacity: 0.75;
  font-size: 10px;
}


/* =========================================================
   INPUT FOCUS
========================================================= */

.contact_form .form-control:focus,
.contact_form .country_select:focus {
  border-color: var(--color-primary);
  background: var(--color-white);

  box-shadow:
    0 0 0 3px rgba(72, 97, 31, 0.07);
}


/* =========================================================
   SELECT
========================================================= */

.contact_form .country_select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 40px;

  cursor: pointer;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);

  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;
}


/* =========================================================
   PAYMENT SECTION
========================================================= */

.contact_form img[alt="card"] {
  display: block;
  height: auto;

  opacity: 0.85;

  object-fit: contain;
}


/* =========================================================
   CHECKBOX / TERMS
========================================================= */

.creat_account {
  margin-top: 5px;
}

.creat_account input[type="checkbox"] {
  width: 15px;
  height: 15px;

  margin: 2px 8px 0 0;

  vertical-align: top;

  accent-color: var(--color-primary);

  cursor: pointer;
}

.creat_account label {
  display: block;

  margin-bottom: 12px;

  color: var(--color-muted);

  font-family: var(--font-body);
  font-size: 9px;
  line-height: 1.75;

  cursor: pointer;
}

.creat_account label a {
  color: var(--color-primary) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.creat_account label a:hover {
  color: var(--color-primary-dark) !important;
}


/* =========================================================
   ORDER BOX
========================================================= */

.order_box {
  position: sticky;
  top: 25px;
  padding: 30px;
  background: #faf9f1;
  border:
    1px solid
    rgba(72, 97, 31, 0.08);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}


/* =========================================================
   ORDER TITLE
========================================================= */

.order_box > h2 {
  margin: 0 0 25px;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 30px;
  font-weight: 400;

  line-height: 1.2;
}


/* =========================================================
   PRODUCT LIST
========================================================= */


/* =========================================================
   TERMS BOX
========================================================= */

.order_box .creat_account {
  margin-top: 10px;
  padding: 15px;

  border-radius: 12px;

  background:
    rgba(239, 241, 223, 0.55);

  border:
    1px solid
    rgba(72, 97, 31, 0.07);
}


/* =========================================================
   PLACE ORDER BUTTON
========================================================= */

.order_box .text-center {
  margin-top: 20px;
}

.tp-product-details-buy-now-btn {
  min-height: 50px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border: 1px solid var(--color-primary);

  border-radius: 30px;

  background: var(--color-primary);

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;

  cursor: pointer;

  transition: var(--transition);
}

.tp-product-details-buy-now-btn:hover {
  border-color: var(--color-primary-dark);

  background: var(--color-primary-dark);

  color: var(--color-white);

  transform: translateY(-2px);

  box-shadow:
    0 12px 28px
    rgba(45, 72, 29, 0.18);
}


/* =========================================================
   REMOVE DEFAULT BOOTSTRAP ROW ISSUES
========================================================= */

.contact_form.row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 0;
}

.contact_form > .row.col-lg-8 {
  --bs-gutter-x: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .checkout_area {
    padding: 60px 0;
  }

  .contact_form > .row.col-lg-8 {
    margin-bottom: 25px;
  }

  .order_box {
    position: relative;
    top: auto;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .checkout_area {
    padding: 40px 0;
  }

  .contact_form > .row.col-lg-8 {
    padding: 25px 18px;

    border-radius: 17px;
  }

  .contact_form h3,
  .creat_account h3 {
    font-size: 25px;
  }

  .contact_form .form-control,
  .contact_form .country_select {
    height: 46px;
  }

  .order_box {
    padding: 25px 20px;

    border-radius: 17px;
  }

  .order_box > h2 {
    font-size: 26px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .checkout_area {
    padding: 30px 0;
  }

  .contact_form > .row.col-lg-8 {
    padding: 22px 14px;
  }

  .contact_form h3,
  .creat_account h3 {
    font-size: 23px;
  }

  .contact_form .form-group {
    margin-bottom: 12px;
  }

  .order_box {
    padding: 22px 16px;
  }

  .order_box .creat_account label {
    font-size: 12px;
    line-height: 1.7;
  }

  .tp-product-details-buy-now-btn {
    min-height: 47px;
  }

}


/* =========================================================
   EXCEL DERM CARE
   CONTACT INFORMATION SECTION
========================================================= */

.tp-contact-info-wrapper {
  margin-bottom: 55px;
}

.tp-contact-main-title {
  margin: 0;

  color: var(--color-black);

  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 3.2rem);
  font-weight: 400;

  line-height: 1.2;
  letter-spacing: -0.5px;
}


/* =========================================================
   CONTACT GRID
========================================================= */

.tp-contact-info-wrapper + .row {
  --bs-gutter-x: 22px;
  --bs-gutter-y: 22px;
}


/* =========================================================
   CONTACT CARD
========================================================= */

.tp-contact-info-item {
  position: relative;

  height: 100%;
  min-height: 235px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 35px 25px;

  text-align: center;

  background: var(--color-white);

  border: 1px solid rgba(72, 97, 31, 0.10);
  border-radius: 20px;

  box-shadow:
    0 10px 35px rgba(45, 72, 29, 0.055);

  overflow: hidden;

  transition: var(--transition);
}

.tp-contact-info-item a {
    color: var(--color-primary) !important;
    font-weight: 800 !important;
}

/* =========================================================
   TOP DECORATIVE LINE
========================================================= */

.tp-contact-info-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 50%;

  width: 0;
  height: 2px;

  background: var(--color-gold);

  transform: translateX(-50%);

  transition: width 0.4s ease;
}


/* =========================================================
   SOFT BACKGROUND EFFECT
========================================================= */

.tp-contact-info-item::after {
  content: "";

  position: absolute;

  width: 130px;
  height: 130px;

  top: -65px;
  right: -65px;

  border-radius: 50%;

  background:
    rgba(72, 97, 31, 0.045);

  pointer-events: none;

  transition: var(--transition);
}


/* =========================================================
   HOVER
========================================================= */

.tp-contact-info-item:hover {
  transform: translateY(-7px);

  border-color:
    rgba(72, 97, 31, 0.18);

  box-shadow:
    0 20px 45px rgba(45, 72, 29, 0.11);
}

.tp-contact-info-item:hover::before {
  width: 55px;
}

.tp-contact-info-item:hover::after {
  transform: scale(1.25);
}


/* =========================================================
   ICON
========================================================= */

.tp-contact-info-icon {
  position: relative;
  z-index: 2;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 20px;

  border-radius: 50%;

  background:
    rgba(72, 97, 31, 0.08);

  border:
    1px solid rgba(72, 97, 31, 0.10);

  transition: var(--transition);
}


/* Inner circle */

.tp-contact-info-icon::before {
  content: "";

  position: absolute;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  border:
    1px solid rgba(185, 151, 79, 0.25);
}


/* SVG */

.tp-contact-info-icon svg {
  position: relative;
  z-index: 2;

  width: 18px;
  height: 18px;

  transition: var(--transition);
}


/* Change SVG stroke from inline #57595F */

.tp-contact-info-icon svg path {
  stroke: var(--color-primary) !important;

  transition: var(--transition);
}


/* Hover icon */

.tp-contact-info-item:hover .tp-contact-info-icon {
  background: var(--color-primary);

  border-color: var(--color-primary);

  transform: translateY(-3px) scale(1.04);

  box-shadow:
    0 10px 25px rgba(72, 97, 31, 0.20);
}

.tp-contact-info-item:hover .tp-contact-info-icon::before {
  border-color: rgba(255, 255, 255, 0.25);
}

.tp-contact-info-item:hover .tp-contact-info-icon svg path {
  stroke: var(--color-white) !important;
}


/* =========================================================
   TITLE
========================================================= */

.tp-contact-info-title {
  position: relative;
  z-index: 2;

  margin: 0 0 9px;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 21px;
  font-weight: 400;

  line-height: 1.3;

  transition: var(--transition);
}

.tp-contact-info-item:hover .tp-contact-info-title {
  color: var(--color-primary);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.tp-contact-info-item p {
  position: relative;
  z-index: 2;
  max-width: 240px;
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.2px;
}


/* =========================================================
   CONTACT LINK
========================================================= */

.tp-contact-info-item > a {
  font-size: 16px;
  position: absolute;
  inset: 0;
  z-index: 5;
  text-decoration: none;
}


/* =========================================================
   DIFFERENT CARD ACCENTS
========================================================= */

/* Email */

.tp-contact-info-item:nth-child(2) .tp-contact-info-icon {
  background: rgba(185, 151, 79, 0.10);
}

.tp-contact-info-item:nth-child(2) .tp-contact-info-icon svg path {
  stroke: var(--color-gold) !important;
}

.tp-contact-info-item:nth-child(2):hover .tp-contact-info-icon {
  background: var(--color-gold);
}


/* Phone */

.tp-contact-info-item:nth-child(3) .tp-contact-info-icon {
  background: rgba(113, 134, 82, 0.10);
}

.tp-contact-info-item:nth-child(3) .tp-contact-info-icon svg path {
  stroke: var(--color-primary-light) !important;
}

.tp-contact-info-item:nth-child(3):hover .tp-contact-info-icon {
  background: var(--color-primary-light);
}


/* Return address */

.tp-contact-info-item:nth-child(4) .tp-contact-info-icon {
  background: rgba(45, 72, 29, 0.08);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .tp-contact-info-wrapper {
    margin-bottom: 60px;
  }

  .tp-contact-info-item {
    min-height: 245px;

    padding: 40px 30px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .tp-contact-info-wrapper {
    margin-bottom: 40px;
  }

  .tp-contact-main-title {
    font-size: 38px;
  }

  .tp-contact-info-item {
    min-height: 220px;

    padding: 30px 20px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .tp-contact-info-wrapper {
    margin-bottom: 32px;
  }

  .tp-contact-main-title {
    font-size: 32px;

    padding: 0 15px;
  }

  .tp-contact-info-wrapper + .row {
    --bs-gutter-y: 15px;
  }

  .tp-contact-info-item {
    min-height: 205px;

    padding: 28px 20px;

    border-radius: 17px;
  }

  .tp-contact-info-icon {
    width: 53px;
    height: 53px;

    margin-bottom: 16px;
  }

  .tp-contact-info-title {
    font-size: 19px;
  }

}


/* =========================================================
   SMALL MOBILE / PORTRAIT
========================================================= */

@media (max-width: 480px) {

  .tp-contact-main-title {
    font-size: 28px;
    line-height: 1.25;
  }

  .tp-contact-info-item {
    min-height: 190px;

    padding: 25px 18px;
  }

  .tp-contact-info-icon {
    width: 50px;
    height: 50px;
  }

  .tp-contact-info-icon::before {
    width: 36px;
    height: 36px;
  }

  .tp-contact-info-title {
    font-size: 18px;
  }

  .tp-contact-info-item p {
    font-size: 9px;
  }

}



/* =========================================================
   EXCEL DERM CARE
   PRODUCT DETAILS / NIGHT CREAM
========================================================= */

.tp-product-details-wrapper {
  position: relative;

  padding: 15px 5px 20px 35px;

  font-family: var(--font-body);
}


/* =========================================================
   CATEGORY
========================================================= */

.tp-product-details-category {
  margin-bottom: 12px;
}

.tp-product-details-category span {
  display: inline-block;

  color: var(--color-primary);

  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* Small decorative line */

.tp-product-details-category span::before {
  content: "";

  display: inline-block;

  width: 25px;
  height: 1px;

  margin-right: 8px;

  vertical-align: middle;

  background: var(--color-gold);
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.tp-product-details-title {
  max-width: 650px;

  margin: 0 0 20px;

  color: var(--color-black);

  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  font-weight: 400;

  line-height: 1.15;

  letter-spacing: -0.5px;
}


/* =========================================================
   INVENTORY / FREE SHIPPING
========================================================= */

.tp-product-details-inventory {
  margin-bottom: 18px;
}

.tp-product-details-stock {
  margin: 0 !important;
}

.tp-product-details-stock span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 30px;
  background: rgba(72, 97, 31, 0.08);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}


/* Green status dot */

.tp-product-details-stock span::before {
  content: "";

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--color-primary);
}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.tp-product-details-wrapper > p {
  max-width: 620px;
  margin: 0 0 22px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.1px;
}


/* Quantity text */

.tp-product-details-wrapper > p strong {
  display: inline-block;
  margin-top: 12px;
  color: var(--color-primary-dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}


/* =========================================================
   PRICE
========================================================= */

.tp-product-details-price-wrapper {
  display: flex;
  align-items: center;

  margin-bottom: 25px !important;

  padding-bottom: 22px;

  border-bottom:
    1px solid
    rgba(72, 97, 31, 0.10);
}


.tp-product-details-price {
  color: var(--color-primary-dark);

  font-family: var(--font-heading);

  font-size: 32px;
  font-weight: 400;

  line-height: 1;
}


/* =========================================================
   ACTION AREA
========================================================= */

.tp-product-details-action-wrapper {
  margin-top: 5px;
}

.tp-product-details-action-item-wrapper {
  width: 100%;
}


/* =========================================================
   ADD TO CART
   Existing class: .tp-btn-4
========================================================= */

.tp-product-details-add-to-cart {
  margin-bottom: 15px !important;
}

.tp-btn-4 {
  position: relative;
  width: 100%;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  overflow: hidden;
  border: 1px solid var(--color-primary);
  border-radius: 30px;
  background: var(--color-primary);
  color: var(--color-white) !important;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: var(--transition);
}


/* Button shine */

.tp-btn-4::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  transform: skewX(-20deg);

  transition: left 0.6s ease;
}


/* Hover */

.tp-btn-4:hover {
  background: var(--color-primary-dark);

  border-color: var(--color-primary-dark);

  color: var(--color-white) !important;

  transform: translateY(-2px);

  box-shadow:
    0 12px 30px
    rgba(45, 72, 29, 0.18);
}


.tp-btn-4:hover::before {
  left: 140%;
}


/* =========================================================
   PAYMENT / SECURITY AREA
========================================================= */

.tp-product-details-payment {
  margin-top: 8px;

  padding: 18px 0 0;

  border-top:
    1px solid
    rgba(72, 97, 31, 0.08);
}


.tp-product-details-payment p {
  margin: 0;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.4px;
}


.tp-product-details-payment p::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(72, 97, 31, 0.09);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}


/* Payment cards */

.tp-product-details-payment img {
  width: 125px;
  max-width: 100%;
  height: auto;

  opacity: 0.75;

  object-fit: contain;

  transition: var(--transition);
}

.tp-product-details-payment img:hover {
  opacity: 1;
}


/* =========================================================
   DESKTOP LARGE
========================================================= */

@media (min-width: 1200px) {

  .tp-product-details-wrapper {
    padding-left: 45px;
  }

  .tp-product-details-title {
    font-size: 48px;
  }

  .tp-product-details-wrapper > p {
    font-size: 16px;
  }

  .tp-product-details-price {
    font-size: 36px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .tp-product-details-wrapper {
    padding-left: 25px;
  }

  .tp-product-details-title {
    font-size: 40px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .tp-product-details-wrapper {
    padding: 35px 0 10px;
  }

  .tp-product-details-title {
    max-width: 700px;

    font-size: 38px;
  }

  .tp-product-details-wrapper > p {
    max-width: 700px;

    font-size: 11px;
  }

  .tp-product-details-payment {
    max-width: 600px;
  }

}


/* =========================================================
   MOBILE LANDSCAPE / LARGE MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .tp-product-details-wrapper {
    padding: 30px 0 10px;
  }

  .tp-product-details-category span {
    font-size: 9px;
  }

  .tp-product-details-title {
    font-size: 32px;

    line-height: 1.18;

    letter-spacing: -0.3px;
  }

  .tp-product-details-wrapper > p {
    font-size: 10px;

    line-height: 1.8;
  }

  .tp-product-details-price {
    font-size: 30px;
  }

  .tp-btn-4 {
    min-height: 52px;

    font-size: 9px;
  }

}


/* =========================================================
   MOBILE PORTRAIT
========================================================= */

@media (max-width: 480px) {

  .tp-product-details-wrapper {
    padding: 25px 0 5px;
  }

  .tp-product-details-title {
    font-size: 28px;

    line-height: 1.2;
  }

  .tp-product-details-stock span {
    padding: 6px 11px;

    font-size: 8px;
  }

  .tp-product-details-wrapper > p {
    font-size: 9px;

    line-height: 1.85;
  }

  .tp-product-details-wrapper > p strong {
    font-size: 9px;
  }

  .tp-product-details-price-wrapper {
    padding-bottom: 18px;
  }

  .tp-product-details-price {
    font-size: 28px;
  }

  .tp-btn-4 {
    min-height: 50px;

    padding: 12px 20px;

    font-size: 8px;
    letter-spacing: 1px;
  }

  .tp-product-details-payment {
    align-items: center !important;

    gap: 15px;
  }

  .tp-product-details-payment p {
    font-size: 8px;
  }

  .tp-product-details-payment img {
    width: 105px;
  }

}

.edc-copyright a{
  color:  rgba(255, 255, 255, 0.601);
  font-weight: 600;
}

/* =========================================================
   EXCEL DERM CARE
   THANK YOU / ORDER SUCCESS PAGE
========================================================= */

.order_details{
  padding: 90px 0;
  background: var(--color-cream-light);
  font-family: var(--font-body);
}

/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.billing-alert:first-of-type{
  position: relative;

  max-width: 700px;

  margin: 0 auto 15px;

  color: var(--color-primary-dark);

  font-family: var(--font-heading);

  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;

  line-height: 1.2;
  text-align: center;
}

.billing-alert:first-of-type::before{
  content: "✓";

  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 25px;

  border-radius: 50%;

  background: var(--color-primary);

  color: var(--color-white);

  font-size: 32px;
  font-weight: 700;

  box-shadow: 0 18px 35px rgba(72,97,31,.18);
}

.billing-alert:nth-of-type(2){
  display: inline-block;

  margin: 0 auto 45px;
  padding: 12px 24px;

  border-radius: 30px;

  background: rgba(72,97,31,.08);

  color: var(--color-primary);

  font-family: var(--font-body);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.order_details .container{
  text-align: center;
}

/* =========================================================
   ORDER CARD
========================================================= */

.order_details_table{
  max-width: 900px;

  margin: 0 auto;

  padding: 40px;

  background: var(--color-white);

  border: 1px solid rgba(72,97,31,.08);
  border-radius: 22px;

  box-shadow: var(--shadow-soft);

  text-align: left;
}

.order_details_table h2{
  position: relative;

  margin: 0 0 30px;
  padding-bottom: 15px;

  color: var(--color-black);

  font-family: var(--font-heading);

  font-size: 32px;
  font-weight: 400;
}

.order_details_table h2::after{
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 55px;
  height: 2px;

  background: var(--color-gold);
}

/* =========================================================
   TABLE
========================================================= */

.order_details_table .table{
  margin: 0;

  vertical-align: middle;

  border-collapse: separate;
  border-spacing: 0;
}

.order_details_table thead th{
  padding: 16px 0;

  color: var(--color-muted);

  font-family: var(--font-body);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 1.5px;
  text-transform: uppercase;

  border-bottom: 1px solid rgba(72,97,31,.12);
}

.order_details_table tbody td{
  padding: 18px 0;

  border-bottom: 1px solid rgba(72,97,31,.08);
}

.order_details_table tbody tr:last-child td{
  border-bottom: 0;
}

/* =========================================================
   PRODUCT NAME
========================================================= */

.order_details_table tbody td p{
  margin: 0;

  color: var(--color-black);

  font-family: var(--font-body);

  font-size: 14px;

  line-height: 1.7;
}

/* =========================================================
   LABELS
========================================================= */

.order_details_table h4{
  margin: 0;

  color: var(--color-black);

  font-family: var(--font-body);

  font-size: 14px;
  font-weight: 700;
}

.order_details_table h5{
  margin: 0;
}

/* =========================================================
   TOTAL ROW
========================================================= */

.order_details_table tbody tr:last-child{
  background: rgba(239,241,223,.45);
}

.order_details_table tbody tr:last-child td{
  padding: 22px 0;
}

.order_details_table tbody tr:last-child h4:last-child{
  color: var(--color-primary-dark);

  font-family: var(--font-heading);

  font-size: 28px;
  font-weight: 400;
}

/* =========================================================
   SHIPPING ROW
========================================================= */

.order_details_table tbody tr:nth-last-child(2) p{
  color: var(--color-primary);

  font-weight: 600;
}

/* =========================================================
   TABLE ALIGNMENT
========================================================= */

.order_details_table td:last-child,
.order_details_table th:last-child{
  text-align: right;
}

.order_details_table td:first-child,
.order_details_table th:first-child{
  width: 65%;
}

/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media (max-width: 991.98px){

  .order_details{
    padding: 70px 0;
  }

  .order_details_table{
    padding: 30px;
  }

  .billing-alert:first-of-type{
    font-size: 42px;
  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px){

  .order_details{
    padding: 55px 0;
  }

  .billing-alert:first-of-type{
    font-size: 34px;
  }

  .billing-alert:first-of-type::before{
    width: 60px;
    height: 60px;

    font-size: 28px;
  }

  .billing-alert:nth-of-type(2){
    font-size: 9px;
    padding: 10px 18px;
  }

  .order_details_table{
    padding: 22px 18px;
    border-radius: 18px;
  }

  .order_details_table h2{
    font-size: 28px;
  }

  .order_details_table thead{
    display: none;
  }

  .order_details_table tbody tr{
    display: flex;
    flex-direction: column;

    gap: 6px;

    padding: 14px 0;
  }

  .order_details_table tbody td{
    width: 100%;

    padding: 0;

    border: 0;

    text-align: left !important;
  }

  .order_details_table tbody tr:last-child{
    padding: 18px;
    border-radius: 14px;
  }

  .order_details_table tbody tr:last-child td{
    text-align: left !important;
  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px){

  .order_details{
    padding: 45px 0;
  }

  .billing-alert:first-of-type{
    font-size: 30px;
  }

  .order_details_table h2{
    font-size: 24px;
  }

  .order_details_table tbody td p,
  .order_details_table h4{
    font-size: 10px;
  }

  .order_details_table tbody tr:last-child h4:last-child{
    font-size: 24px;
  }

}

/* checkout-css */

 .cart-summary-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-body);
}

.cart-summary-table th,
.cart-summary-table td {
  width: 33.333%;
  padding: 12px 8px;
  text-align: left;
  vertical-align: middle;
}

.cart-summary-table th {
  font-size: 14px;
  font-weight: 600;
  color: #555;
  border-bottom: 1px solid #ddd;
}

.cart-summary-table td {
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #eee;
}

.cart-summary-table th:nth-child(2),
.cart-summary-table td:nth-child(2) {
  text-align: center;
}

.cart-summary-table th:nth-child(3),
.cart-summary-table td:nth-child(3) {
  text-align: right;
}
.cart-total-table{
    font-family: var(--font-body);
}
.cart-total-row{
    font-family: var(--font-body);
}
.product-thumbnail__quantity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 50%;
  background: #f1f1f1;
  font-size: 13px;
}

.cart-total-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.cart-total-table td {
  width: 50%;
  padding: 14px 8px;
  font-size: 15px;
  color: #333;
  vertical-align: middle;
}

.cart-total-table td:first-child {
  text-align: left;
}

.cart-total-table td:last-child {
  text-align: right;
}

.cart-total-row td {
  padding-top: 18px;
  border-top: 1px solid #ddd;
  font-size: 18px;
  font-weight: 600;
}

.cart-total-row td:last-child {
  font-weight: 700;
}
      
.w-40{
  width: 40% !important;
  justify-content: center;
}
.product-content-wrapper{
  margin-top: 50px;
}


.summary-product .cart-item{
  display: flex;

}

/* =========================================================
   CART ITEM GRID
   IMAGE | PRODUCT | PRICE | QUANTITY | TOTAL | REMOVE
========================================================= */

#pageItems .cart-item {
  display: grid;

    grid-template-columns:
        90px
        minmax(180px, 1fr)
        90px
        120px
        110px
        45px;

    align-items: center;

  column-gap: 20px;

  min-height: 135px;

  padding: 22px 0;

  border-bottom: 1px solid rgba(72, 97, 31, 0.08);

  position: relative;

  transition: var(--transition);
}


/* =========================================================
 PRODUCT WRAPPER
 Make image + details participate directly in grid
========================================================= */

#pageItems .cart-item-product {
  display: contents;
}


/* =========================================================
 PRODUCT IMAGE
========================================================= */

#pageItems .cart-item-image {
  width: 90px;
  height: 110px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  background: #f1f1eb;

  overflow: hidden;
}


#pageItems .cart-item-image img {
  width: 100%;
  height: 100%;

  max-width: 100% !important;

  object-fit: contain;

  display: block;
}


/* =========================================================
 PRODUCT DETAILS
========================================================= */

#pageItems .cart-item-details {
  min-width: 0;
  padding: 0;
}


#pageItems .edc-cart-product-info {
  padding: 0;
  margin: 0;
}


#pageItems .cart-item-name {
  margin: 0;

  color: var(--color-black);

  font-family: var(--font-body);

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;
}


/* =========================================================
 PRICE
========================================================= */

#pageItems .edc-cart-price {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  padding: 0;
  margin: 0;

  color: var(--color-primary-dark);

  font-family: var(--font-body);

  font-size: 16px;

  font-weight: 500;

  white-space: nowrap;
}


#pageItems .edc-cart-price .item-total-price {
  display: inline-flex;
  align-items: center;
}


/* =========================================================
 QUANTITY
========================================================= */

#pageItems .cart-item-quantity {
  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;
  margin: 0;
}


#pageItems .qty-control {
  width: 120px;
  height: 46px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border: 1px solid rgba(72, 97, 31, 0.18);

  border-radius: 30px;

  background: #fff;

  overflow: hidden;
}


/* QUANTITY BUTTON */

#pageItems .qty-btn {
  width: 38px;
  height: 44px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;

  background: transparent;

  color: var(--color-primary);

  font-size: 14px;

  cursor: pointer;

  transition: var(--transition);
}


#pageItems .qty-btn:hover {
  background: var(--color-primary);

  color: var(--color-white);
}


/* QUANTITY NUMBER */

#pageItems .qty-value {
  min-width: 30px;

  text-align: center;

  color: var(--color-black);

  font-size: 13px;
}


/* =========================================================
 TOTAL
========================================================= */

#pageItems .edc-cart-item-total {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding: 0;
  margin: 0;

  color: var(--color-primary-dark);

  font-family: var(--font-body);

  font-size: 16px;

  font-weight: 600;

  white-space: nowrap;
}


#pageItems .edc-cart-item-total .item-total-price {
  display: inline-flex;

  align-items: center;
}


/* =========================================================
 REMOVE BUTTON
========================================================= */

#pageItems .edc-cart-remove {
  position: static;

  width: 32px;
  height: 32px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  margin: 0;

  border: none;

  background: transparent;

  color: #777;

  font-size: 11px;

  cursor: pointer;

  transition: var(--transition);
}


#pageItems .edc-cart-remove:hover {
  color: #a64747;

  transform: rotate(90deg);
}


/* =========================================================
 HIDDEN INPUT
========================================================= */

#pageItems input[type="hidden"] {
  display: none !important;
}


/* =========================================================
 TABLET
========================================================= */

@media (max-width: 991px) {

  #pageItems .cart-item {
      grid-template-columns:
          80px
          minmax(150px, 1fr)
          80px
          110px
          90px
          35px;

      column-gap: 14px;
  }


  #pageItems .cart-item-image {
      width: 80px;
      height: 100px;
  }


  #pageItems .cart-item-name {
      font-size: 15px;
  }


  #pageItems .edc-cart-price,
  #pageItems .edc-cart-item-total {
      font-size: 15px;
  }


  #pageItems .qty-control {
      width: 110px;
      height: 42px;
  }


  #pageItems .qty-btn {
      width: 34px;
      height: 40px;
  }
}


/* =========================================================
 MOBILE
========================================================= */

@media (max-width: 767px) {

  #pageItems .cart-item {

      grid-template-columns:
          75px
          minmax(0, 1fr)
          auto;

      grid-template-areas:
          "image product remove"
          "image price price"
          "image quantity total";

      column-gap: 14px;

      row-gap: 10px;

      min-height: 120px;

      padding: 20px 0;
  }


  /* IMAGE */

  #pageItems .cart-item-image {
      grid-area: image;

      width: 75px;
      height: 90px;
  }


  /* PRODUCT */

  #pageItems .cart-item-details {
      grid-area: product;
  }


  /* PRICE */

  #pageItems .edc-cart-price {
      grid-area: price;

      justify-content: flex-start;

      font-size: 14px;
  }


  /* QUANTITY */

  #pageItems .cart-item-quantity {
      grid-area: quantity;

      justify-content: flex-start;
  }


  /* TOTAL */

  #pageItems .edc-cart-item-total {
      grid-area: total;

      justify-content: flex-end;

      font-size: 15px;
  }


  /* REMOVE */

  #pageItems .edc-cart-remove {
      grid-area: remove;

      align-self: start;

      justify-self: end;
  }


  #pageItems .qty-control {
      width: 105px;
      height: 40px;
  }


  #pageItems .qty-btn {
      width: 32px;
      height: 38px;
  }
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-toggler {
      display: none !important;
  }
}

.thankyou-main{
  padding: 50px 0;
}

.pro-info-inner{
  font-size: 16px;
}