/* ==========================================================
   FONTS
========================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../../fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../fonts/Poppins/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("../../fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Fraunces";
  src: url("../../fonts/Fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Fraunces";
  src: url("../../fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}

@font-face {
  font-family: "Cormorant-Garamond";
  src: url("../../fonts/Cormorant_Garamond/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: "Cormorant-Garamond";
  src: url("../../fonts/Cormorant_Garamond/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
}


/* ==========================================================
   DESIGN TOKENS
========================================================== */

:root {
  /* Brand palette */
  --color-primary:       #1A2F1B;
  --color-secondary:     #F7F3EB;
  --color-accent:        #6C6D33;
  --color-muted:         #57735D;

  /* Backgrounds */
  --color-bg:            #F7F3EB;
  --color-bg-light:      #234431;
  --color-bg-dark:       #1B2C1E;
  --color-bg-soft:       #F2EADD;
  --color-surface:       #FBFBF9;
  --color-surface-alt:   #FDFAF4;
  --color-bg-filters:    #FAF8ED;
  --color-bg-filters-options-hover: #EAEBDE;
  --color-bg-filters-options:       #F0F1EA;

  /* Text */
  --color-text:          #1A2F1B;
  --color-text-soft:     rgba(26, 47, 27, 0.75);
  --color-text-faint:    rgba(26, 47, 27, 0.60);
  --color-text-thin:     rgba(26, 47, 27, 0.85);

  /* Borders */
  --color-border:        rgba(26, 47, 27, 0.10);
  --color-border-strong: rgba(108, 109, 51, 0.25);

  /* Semantic shorthands used in gradients */
  --color-sage:          rgba(168, 191, 168, 0.22);
  --color-olive:         rgba(108, 109, 51, 0.14);
  --color-cream:         rgba(242, 234, 221, 0.60);

  /* Reusable 3-stop radial background (pharmacy, contact, etc.) */
  --bg-tinted:
    radial-gradient(120.21% 127.28% at 15% 10%, var(--color-sage) 0%, transparent 55%),
    radial-gradient(120.21% 120.21% at 85% 85%, var(--color-olive) 0%, transparent 60%),
    radial-gradient(70.71%  70.71%  at 50% 50%, var(--color-cream) 0%, transparent 70%),
    var(--color-bg);
}


/* ==========================================================
   GLOBAL RESETS (theme overrides)
========================================================== */

html {
  scroll-behavior: smooth;
}

/* Make the theme's full-width wrapper play nice with our layout */
.container {
  width: 100vw !important;
}

#wrapper {
  padding: 0 !important;
}

#content-wrapper {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

#footer {
  padding-top: 0 !important;
}

.page-footer {
  margin-bottom: 0 !important;
}

.form-control:focus {
  outline: .1875rem solid var(--color-muted);
  border-color: var(--color-muted);
}

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

.esc-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #F7F3EA;
  border-bottom: 1px solid #ddd;
}

.esc-header-inner {
  width: 100vw;
  position: relative;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 15px 20px;
  column-gap: 10px;
}

/* Centered logo */
.esc-logo {
  text-align: center;
  justify-self: center;
  padding: 0 10px;
}

.esc-logo img {
  height: 60px;
}

/* Left / right nav layout */
.esc-nav-left {
  display: flex;
  justify-self: end;
}

.esc-nav-right {
  display: flex;
  justify-self: start;
  align-items: center;
}

/* Base nav list */
.esc-nav ul {
  display: flex;
  gap: 15px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Force the right nav list horizontal (overrides Bootstrap collapse) */
.esc-nav-right ul#footer_sub_menu_3 {
  display: flex !important;
  flex-direction: row !important;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.esc-nav-right ul#footer_sub_menu_3 li {
  display: inline-flex;
  align-items: center;
}

/* Hide the "RIGHT_MENU" title injected by the module */
.esc-nav-right .h3,
.esc-nav-right p.h3,
.esc-nav-right span.h3,
.esc-nav-right .title {
  display: none !important;
}

/* Neutralise Bootstrap block wrappers inside the right nav */
.esc-nav-right .col-md-6,
.esc-nav-right .row,
.esc-nav-right .wrapper {
  display: contents;
}

.esc-nav-right .custom-page-link {
  font-size: 1rem;
  padding: 0.625rem;
  text-decoration: none;
}

/* Shared link style for both nav and standalone .esc-link */
.esc-nav a,
.esc-link a {
  position: relative;
  font-family: "Poppins";
  font-weight: 400 !important; /* !important keeps theme from overriding */
  color: var(--color-primary) !important;
  white-space: nowrap;
}

/* Cart / actions area */
.esc-actions {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 20px;
  border-left: 1px solid #ccc;
  padding-left: 15px;
  margin-left: 15px;
}

.cart-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  background: #6C6D33;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blockcart .header,
.blockcart .header a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.blockcart .header a::after {
    display: none;
}

.esc-burger {
  display: none;
}

/* --- Header: desktop category banners --- */
@media (min-width: 769px) {
  .esc-header {
    position: relative;
    z-index: 100;
    overflow: visible;
  }

  /* Keep the whole header height hoverable between a main link and its banner. */
  .esc-nav-left {
    align-self: stretch;
    align-items: center;
  }

  .esc-nav-left #_desktop_top_menu > .clearfix {
  display: none;
  }

  .esc-nav-left .esc-mobile-menu,
  .esc-nav-left #_desktop_top_menu,
  .esc-nav-left .top-menu[data-depth="0"] > li {
    display: flex;
    align-items: center;
  }

  /* The header itself is the positioning reference for every category banner. */
  .esc-nav-left .top-menu[data-depth="0"],
  .esc-nav-left .top-menu[data-depth="0"] > li {
    position: static;
  }

    /*
   * Invisible hover bridge between the main link and its submenu.
   * It keeps the parent <li> hovered while the pointer moves downward.
   */
  .esc-nav-left .top-menu[data-depth="0"] > .esc-has-children > a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -15px;
  width: calc(100% + 30px);
  height: 30px;
  }

  .esc-nav-left .esc-header-submenu {
    display: block !important; /* Overrides Bootstrap's collapsed state. */
    position: absolute !important;
    top: calc(100% - 1px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    background: #F7F3EA;
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.18s ease,
      visibility 0s linear 0.18s;
    z-index: 30;
  }

  .esc-nav-left .esc-has-children:hover > .esc-header-submenu,
  .esc-nav-left .esc-has-children:focus-within > .esc-header-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .esc-nav-left .esc-header-submenu > .top-menu[data-depth="1"] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 32px !important;
    max-width: 1232px;
    margin: 0 auto;
    padding: 14px 0;
  }

  .esc-nav-left .esc-header-submenu > .top-menu[data-depth="1"] > li {
    display: block;
    position: relative;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .esc-nav-left .esc-header-submenu > .top-menu[data-depth="1"] > li > a {
    display: block;
    width: auto;
    padding: 8px 4px;
    font-size: 0.95rem;
    text-transform: none;
  }

  /* This banner intentionally lists only the parent's direct sub-categories. */
  .esc-nav-left .esc-header-submenu .top-menu[data-depth="2"] {
    display: none !important;
  }
}

/* --- Header: mobile --- */
@media (max-width: 768px) {
  .esc-header-inner {
    grid-template-columns: auto 1fr auto;
    padding: 15px 20px;
    align-items: center;
  }

  .esc-nav-left {
    justify-self: start;
    margin: 0;
    padding: 0;
  }

  .esc-logo {
    justify-self: center;
    padding: 0 60px;
  }

  .esc-nav-right {
    margin: 0;
    padding: 0;
    justify-self: end;
  }

  /* Hide the nav column from the right side on mobile */
  .esc-nav-right .col-md-6 {
    display: none !important;
  }

  .esc-actions {
    border: none;
    margin: 0;
    padding: 0;
  }

  #search_widget {
    display: none;
  }

  #_mobile_top_menu {
    display: block;
    position: relative;
    min-height: 40px;
  }

  #_mobile_top_menu .navbar-toggler {
    font-size: 24px;
    cursor: pointer;
  }

  #_desktop_top_menu .esc-header-submenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .esc-burger {
    display: flex;
    font-size: 24px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  .esc-mobile-menu {
    display: none;
    position: fixed;
    top: 90px;
    left: 0;
    width: 100%;
    background: #e9e6dc;
    padding: 20px;
    z-index: 1000;
    text-align: left;
    margin: 0;
  }

  .esc-mobile-menu.active {
    display: block;
  }

  .esc-mobile-menu ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding-left: 0;
    gap: 15px;
  }

  .esc-mobile-menu li {
    width: 100%;
  }

  .esc-mobile-menu a {
    display: block;
    text-align: left;
    width: 100%;
  }
}


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

.esc-footer {
  background:
    radial-gradient(98.99% 113.14% at 70% 80%, rgba(56, 97, 86, 0.30) 0%, transparent 60%),
    radial-gradient(98.99% 113.14% at 30% 20%, var(--color-border-strong) 0%, transparent 55%),
    var(--color-primary);
  color: #dcded6;
  padding: 60px 40px 20px;
  font-family: "Poppins";
}

.esc-footer-inner {
  max-width: 1232px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 80px;
}

.esc-footer-logo {
  height: 60px;
  margin-bottom: 20px;
}

.esc-footer-text {
  max-width: 310px;
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.6;
  color: var(--color-secondary);
}

.esc-footer-socials {
  margin-top: 20px;
  display: flex;
  gap: 15px;
}

.esc-footer-socials a {
  width: 36px;
  height: 36px;
  border: 1px solid #dcded6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    transform    0.25s ease;
}

.esc-footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.esc-footer-col h4 {
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 15px;
  opacity: 0.7;
  color: var(--color-muted);
}

.esc-footer-col a {
  display: block;
  width: fit-content;
  position: relative;
  text-decoration: none;
  color: var(--color-secondary);
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.75;
}

.esc-footer-bottom {
  max-width: 1400px;
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.5;
  color: var(--color-secondary);
}

.esc-footer-right {
  font-style: italic;
  font-family: "Fraunces";
  font-weight: 400;
}

/* --- Footer: mobile --- */
@media (max-width: 768px) {
  .esc-footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .esc-footer-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .esc-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ==========================================================
   BUTTONS & LINKS
========================================================== */

/*
 * .esc-btn — filled primary CTA button
 * .esc-btn-clear — ghost/light variant
 * .esc-link — text-style link with optional padding
 * .esc-link-no-padding — padding reset utility
 */

.esc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 20px;
  width: fit-content;
  text-decoration: none;
  font-family: "Poppins";
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  background: var(--color-primary);
  color: var(--color-secondary);
  transition:
    transform          0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background-color   0.25s ease,
    padding-right      0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.esc-btn:hover {
  padding-right: 30px;
  color: var(--color-secondary) !important;
  background-color: rgba(26, 47, 27, 0.92);
}

.esc-btn-clear {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.esc-btn-clear:hover {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

.esc-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 20px;
  text-decoration: none;
  font-family: "Poppins";
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  white-space: normal;
  color: var(--color-text);
  width: fit-content;
  transition:
    transform  0.2s ease,
    opacity    0.2s ease;
}

.esc-link-no-padding {
  padding: 0 !important;
}

/* ==========================================================
  BREADCRUMBS
  */


#esc-breadcrumb {
  min-height: 24px;
  width: 1150px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 80px !important;
  vertical-align: center;
}

#esc-breadcrumb-link {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: var(--color-text-soft) !important;
}

#esc-breadcrumb-link img, #esc-breadcrumb-link span {
    vertical-align: middle;
}

@media (max-width: 768px) {
    #esc-breadcrumb {
    padding-top: 24px !important;
    max-width: 340px;
    padding-left: unset !important;
  }
}


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

/* Scroll-reveal base states */
.esc-animate,
.esc-animate-from-left {
  opacity: 0;
  transition:
    opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.esc-animate {
  transform: translateY(20px);
}

.esc-animate-from-left {
  transform: translateX(-40px);
}

.esc-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Staggered delay helpers */
.esc-delay-1 { transition-delay: 0.15s; }
.esc-delay-2 { transition-delay: 0.30s; }
.esc-delay-3 { transition-delay: 0.45s; }
.esc-delay-4 { transition-delay: 0.60s; }
.esc-delay-5 { transition-delay: 0.75s; }
.esc-delay-6 { transition-delay: 0.90s; }
.esc-delay-7 { transition-delay: 1.05s; }
.esc-delay-8 { transition-delay: 1.20s; }

@media (prefers-reduced-motion: reduce) {
  .esc-animate,
  .esc-animate-from-left {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Underline slide-in on nav / footer / card-back links */
.esc-nav a::after,
.esc-link a::after,
.esc-footer-col a::after,
.esc-phar-card-back-links a::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-element bottom offsets */
.esc-footer-col a::after  { bottom: -2px; }
.esc-nav a::after         { bottom:  4px; }
.esc-link a::after        { bottom: -4px; }

.esc-nav a:hover::after,
.esc-link a:hover::after,
.esc-footer-col a:hover::after,
.esc-phar-card-back-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Reverse direction on mouse-out */
.esc-nav a:not(:hover)::after,
.esc-link a:not(:hover)::after,
.esc-footer-col a:not(:hover)::after,
.esc-phar-card-back-links a:not(:hover)::after {
  transform-origin: right;
}

/* CTA button icon spin */
.esc-btn__icon {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}

.esc-btn:hover .esc-btn__icon {
  transform: rotate(45deg);
}

/* Footer social icon hover */
.esc-footer-socials a img {
  transition: filter 0.25s ease;
}

.esc-footer-socials a:hover {
  border-color: #A8BFA8;
  box-shadow: 0 0 0 3px rgba(168, 191, 168, 0.25);
  transform: translateY(-2px);
}

.esc-footer-socials a:hover img {
  filter: brightness(1.4);
}


/* ==========================================================
   CAROUSEL DOTS  (mobile only)
========================================================== */

.esc-carousel-dots {
  display: none;
}

@media (max-width: 768px) {
  .esc-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }

  .esc-carousel-dot {
    width: 8px;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: rgba(26, 47, 27, 0.20);
    padding: 0;
    transition:
      background  0.25s ease,
      transform   0.25s ease;
  }

  .esc-carousel-dot.active {
    background: var(--color-primary);
    transform: scale(1.25);
  }
}