/* Shared module host + design tokens (values measured on drinklmnt.com) */
.htw-module{
  --lmnt-yellow:#FFF200;
  --lmnt-black:#000000;
  --lmnt-ink:#171717;
  --lmnt-grey:#525252;
  --lmnt-line:#EDEDF0;
  --lmnt-lime:#BDCC60;
  --lmnt-rule:#CBD780;
  --lmnt-mint:#9ED4CA;
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--lmnt-ink);
  -webkit-font-smoothing:antialiased;
}
.htw-module *,.htw-module *::before,.htw-module *::after{box-sizing:border-box}
.htw-module img{max-width:100%;height:auto;display:block}
.htw-module h1,.htw-module h2,.htw-module h3,.htw-module h4{
  font-family:"GothamSsm-Bold",Inter,Arial,sans-serif;
  font-weight:400;letter-spacing:.03em;line-height:1.1;margin:0;color:inherit;
}
.htw-module p{margin:0}
.htw-module a{text-decoration:none}
.htw-module .htw-btn{
  display:inline-block;background:var(--lmnt-yellow);color:#000;
  font-family:"GothamSsm-Bold",Inter,sans-serif;font-size:16px;line-height:1.2;
  padding:13px 30px;border-radius:9999px;cursor:pointer;border:0;
  transition:transform .18s ease,box-shadow .22s ease,filter .22s ease;
}
.htw-module .htw-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18);filter:brightness(.96)}
.htw-module .htw-btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.htw-module .htw-btn--ghost{background:transparent;color:#000;border:1px solid #000}
.htw-module .htw-btn--ghost:hover{background:#000;color:#fff}
.htw-module .htw-chip{
  display:inline-block;background:var(--lmnt-lime);color:#000;
  font-family:Inter,sans-serif;font-weight:700;font-size:16px;letter-spacing:.025em;
  text-transform:uppercase;padding:4px 18px;transform:skewX(-25deg);
}
.htw-module .htw-chip > span{display:inline-block;transform:skewX(25deg)}
.htw-module .htw-section{width:100%}
.htw-module .htw-inner{max-width:1440px;margin:0 auto;padding:0 clamp(16px,4vw,60px)}
/* keep Flatsome's own row/col wrappers from adding surprise spacing */
.htw-home-row > .col > .col-inner{padding:0}


/* ============================================================
   Site shell to match the reference storefront
   (black bar, white nav, yellow pill CTA, no demo top bar)
   ============================================================ */
#top-bar{display:none !important}
.header-main,
#masthead .header-main{background-color:#000 !important;border-bottom:1px solid rgba(255,255,255,.1) !important}
.header-main .header-inner{padding-left:24px;padding-right:24px}
.header-main .nav > li > a,
.header-main .header-nav > li > a,
.header-main .nav > li > a.nav-top-link,
.header-main .account-item > a,
.header-main .cart-item > a,
.header-main .header-search-form .searchform input{color:#fff !important}
.header-main .nav > li > a{font-family:"GothamSsm-Bold",Inter,sans-serif;font-size:15px;letter-spacing:.02em;text-transform:none}
.header-main .nav > li > a:hover,
.header-main .account-item > a:hover,
.header-main .cart-item > a:hover{color:#FFF200 !important}
.header-main .nav > li > a.active,
.header-main .nav > li.current-menu-item > a{color:#FFF200 !important}
.header-main .header-logo img{max-height:52px;width:auto}
.header-main .header-logo-dark img{max-height:52px;width:auto}
.header-main .cart-icon strong{color:#fff !important;border-color:#fff !important}
.header-main .cart-icon strong:after{border-color:#fff !important}
.header-main .nav-dropdown{background-color:#111 !important}
.header-main .nav-dropdown li a{color:#fff !important}
.header-main .nav-dropdown li a:hover{color:#FFF200 !important}
.header-main .header-divider{border-color:rgba(255,255,255,.25) !important}
@media(max-width:849px){
  .header-main .header-inner{padding-left:14px;padding-right:14px}
  #masthead .header-main{background-color:#000 !important}
}


/* Brand logo (Flatsome falls back to its demo logo without Customizer access) */
#logo a{
  display:block !important;
  width:78px;height:78px;
  background:url("https://drinklmntonline.com/wp-content/uploads/2026/11/logo.png") center center/contain no-repeat;
}
#logo a img{display:none !important}
#logo a:hover{opacity:.85}

/* Header CTA: the last item of the primary menu is rendered as the yellow pill */
.header-main .nav > li.htw-nav-cta > a{
  background:#FFF200 !important;color:#000 !important;
  border-radius:9999px !important;
  padding:13px 30px !important;
  margin-left:12px;
  font-family:"GothamSsm-Bold",Inter,sans-serif !important;
  letter-spacing:.01em;
  line-height:1.2;
  transition:transform .18s ease,box-shadow .22s ease;
}
.header-main .nav > li.htw-nav-cta > a:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  color:#000 !important;
}
@media(max-width:849px){#logo a{width:56px;height:56px}}


/* The nav renders a second (empty) logo link; keep only #logo */
.header-main .nav > li > a > img[class*="header-logo"]{display:none !important}
.header-main .nav > li > a:has(> img[class*="header-logo"]){display:none !important}
.header-main .nav > li:has(> a > img[class*="header-logo"]){display:none !important}


/* duplicate logo link rendered as a direct child of the nav UL */
.header-main ul.nav > a:has(> img[class*="header-logo"]),
.header-main ul.header-nav > a:has(> img[class*="header-logo"]),
.header-main .nav.ui-nav > a:has(> img[class*="header-logo"]){
  display:none !important;
}


/* ============================================================
   Footer: dark shell that matches the page (reference has a black
   footer with white headings and muted links)
   ============================================================ */
.footer-wrapper{background:#000 !important;color:#b3b3b3 !important}
.footer-2{background:#000 !important;padding-top:clamp(36px,4vw,68px) !important;padding-bottom:0 !important}
.footer-2 .row{max-width:1440px;margin:0 auto}
.footer-2 .widget{color:#b3b3b3 !important}
.footer-2 .widget-title,
.footer-2 .widget-title span{
  color:#fff !important;font-family:"GothamSsm-Bold",Inter,sans-serif !important;
  font-size:15px !important;font-weight:400 !important;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:14px;
}
.footer-2 .widget-title:after,.footer-2 .is-divider{background:rgba(255,255,255,.22) !important}
.footer-2 .widget a{color:#b3b3b3 !important;font-size:14px}
.footer-2 .widget a:hover{color:#FFF200 !important}
.footer-2 .widget p{color:#b3b3b3 !important;font-size:14px;line-height:1.95;margin:0 0 6px}
.footer-2 .textwidget p{margin:0 0 8px}
.footer-wrapper .social-icons a{color:#b3b3b3 !important}
.footer-wrapper .social-icons a:hover{color:#FFF200 !important}
/* newsletter widget is removed; keep any leftover form invisible but never styled as a white card */
.footer-2 .custom-html-widget > div[style*="background-color: #fff"]{background:transparent !important}
/* copyright bar */
.absolute-footer,.footer-secondary,footer .absolute-footer{
  background:#000 !important;color:#6f6f6f !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  padding:22px 0 !important;font-size:13px;
}
.absolute-footer a,.footer-secondary a{color:#9a9a9a !important}
.absolute-footer a:hover{color:#FFF200 !important}
.absolute-footer .payment-icons{opacity:.5}
@media(max-width:849px){
  .footer-2{padding-top:32px !important}
  .footer-2 .widget{margin-bottom:26px}
}


/* ============================================================
   Shop / archive sale badge: auto-width pill that matches the
   homepage product cards (the fixed Flatsome circle squashed "-70%")
   ============================================================ */
.badge-container .badge.badge-circle,
.badge-container .badge.callout{
  display:block !important;width:auto !important;height:auto !important;
  min-width:0 !important;margin:0 !important;
}
.badge-container .badge .badge-inner,
.badge-container .badge-inner.secondary.on-sale{
  display:inline-block !important;
  width:auto !important;height:auto !important;min-width:0 !important;
  padding:6px 11px !important;
  border-radius:8px !important;
  background:#000 !important;color:#fff !important;
  font-family:"GothamSsm-Bold",Inter,sans-serif !important;
  font-size:13px !important;font-weight:400 !important;line-height:1 !important;
  letter-spacing:.03em;white-space:nowrap;text-align:center;
}
.badge-container .badge-inner span.onsale{font-weight:inherit}