/* =========================================================================
   Esmerelda — design tokens + base
   Palette sampled from the approved 2026 design.
   ========================================================================= */
:root{
  /* Surfaces */
  --esm-cream:#F5F1EB;      /* page ground */
  --esm-cream-2:#FBF9F6;    /* alternating band */
  --esm-blush:#F2E6E2;      /* warm gradient stop */
  --esm-plum-deep:#2E2752;  /* dark inverted section */

  /* Ink */
  --esm-ink:#201B24;        /* primary text */
  --esm-ink-2:#4A4350;      /* body copy */
  --esm-ink-3:#625A69;      /* meta / eyebrow */
  --esm-ink-4:#8B8391;      /* placeholder / subtle */

  /* Accent */
  --esm-violet:#7A6BBA;     /* accent, links on hover */
  --esm-violet-deep:#4A3E7A;/* primary CTA on light */
  --esm-lilac:#CBC2E9;      /* selection, soft fills */

  /* Lines */
  --esm-line:rgba(32,27,36,.10);
  --esm-line-2:rgba(32,27,36,.14);
  --esm-line-strong:rgba(32,27,36,.35);
  --esm-line-dark:rgba(245,241,235,.16);

  /* Type */
  --esm-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --esm-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Rhythm */
  --esm-gutter:clamp(20px,4vw,56px);
  --esm-section-y:clamp(72px,9vw,140px);
  --esm-maxw:1440px;
  --esm-header-h:84px;

  /* Motion */
  --esm-ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--esm-cream);color:var(--esm-ink);
  font-family:var(--esm-sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--esm-ink);text-decoration:none;transition:color .2s var(--esm-ease)}
a:hover{color:var(--esm-violet)}
::selection{background:var(--esm-lilac);color:var(--esm-ink)}
input::placeholder,textarea::placeholder{color:var(--esm-ink-4)}
h1,h2,h3,h4{margin:0;font-family:var(--esm-serif);font-weight:500;letter-spacing:-.025em;line-height:1.02}
p{margin:0 0 1em}
button{font:inherit}

/* Accessible focus — never remove without replacement */
:focus-visible{outline:2px solid var(--esm-violet-deep);outline-offset:3px;border-radius:4px}

.esm-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--esm-ink);color:var(--esm-cream);padding:12px 20px;border-radius:0 0 8px 0}
.esm-skip:focus{left:0}

/* Layout helpers */
.esm-shell{max-width:var(--esm-maxw);margin-inline:auto;padding-inline:var(--esm-gutter)}
.esm-section{padding-block:var(--esm-section-y);padding-inline:var(--esm-gutter)}
.esm-band-2{background:var(--esm-cream-2)}
.esm-band-dark{background:var(--esm-plum-deep);color:var(--esm-cream)}
.esm-band-dark h1,.esm-band-dark h2,.esm-band-dark h3{color:var(--esm-cream)}

/* Eyebrow / all-caps label */
.esm-eyebrow{
  font-family:var(--esm-serif);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--esm-violet);margin:0
}
.esm-eyebrow--muted{color:var(--esm-ink-3)}

/* Display headings */
.esm-h1{font-size:min(clamp(48px,6.6vw,124px),14vh);line-height:.94}
.esm-h2{font-size:clamp(34px,4.4vw,68px);line-height:1}
.esm-h3{font-size:clamp(24px,2.4vw,34px);line-height:1.12}
.esm-lede{font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--esm-ink-2);max-width:62ch}

/* Buttons — pill, per design */
.esm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:56px;padding:0 30px;border-radius:999px;border:1px solid transparent;
  font-family:var(--esm-sans);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  transition:background .25s var(--esm-ease),color .25s var(--esm-ease),transform .25s var(--esm-ease);
}
.esm-btn:hover{transform:translateY(-1px)}
.esm-btn--dark{background:var(--esm-ink);color:var(--esm-cream)}
.esm-btn--dark:hover{background:var(--esm-violet-deep);color:var(--esm-cream)}
.esm-btn--violet{background:var(--esm-violet-deep);color:var(--esm-cream)}
.esm-btn--violet:hover{background:var(--esm-ink);color:var(--esm-cream)}
.esm-btn--ghost{background:transparent;color:var(--esm-ink);border-color:var(--esm-line-strong)}
.esm-btn--ghost:hover{background:var(--esm-ink);color:var(--esm-cream)}
.esm-btn--block{width:100%}

/* Quiet text link with rule under it */
.esm-link-rule{
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--esm-line-strong);padding-bottom:4px
}

/* Product card */
.esm-card{display:flex;flex-direction:column;gap:14px}
.esm-card__media{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:var(--esm-cream-2)
}
.esm-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--esm-ease)}
.esm-card:hover .esm-card__media img{transform:scale(1.04)}
.esm-card__name{font-family:var(--esm-serif);font-size:20px;line-height:1.2}
.esm-card__sub{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--esm-ink-3)}
.esm-card__price{font-size:15px;font-weight:600}
.esm-card__badge{
  position:absolute;top:12px;left:12px;z-index:2;padding:6px 12px;border-radius:999px;
  background:rgba(245,241,235,.92);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase
}

/* Grids */
.esm-grid{display:grid;gap:clamp(20px,2.4vw,36px)}
.esm-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.esm-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.esm-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1024px){
  .esm-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .esm-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .esm-grid--4,.esm-grid--3,.esm-grid--2{grid-template-columns:minmax(0,1fr)}
}

/* Marquee + pulse, used by hero/trust strip */
@keyframes esmMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes esmPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* Reveal-on-scroll: must fail VISIBLE if JS never runs */
.esm-reveal{opacity:1;transform:none}
.js .esm-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--esm-ease),transform .7s var(--esm-ease)}
.js .esm-reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .esm-reveal{opacity:1;transform:none}
}

/* =========================================================================
   Site chrome — header, mobile menu, search, footer
   ========================================================================= */

/*
 * Header, per SiteHeader.dc.html, which switches on scrollY > 40:
 *   height          84px        -> 62px
 *   background      transparent -> rgba(245,241,235,.86)
 *   backdrop-filter none        -> blur(14px)
 *
 * An earlier build painted the frosted state permanently and never shrank
 * the bar, which is why the header read as a flat opaque band: a blur with
 * nothing behind it is indistinguishable from a solid fill. Transparent at
 * rest is what makes the frost visible once content slides underneath.
 *
 * --esm-header-h deliberately does NOT change. It is the layout reservation
 * used by .esm-main's padding and by the hero stage offsets, so shrinking it
 * on scroll would reflow the whole page and shift content. Only the bar's
 * own inner height animates; the space reserved for it stays constant.
 */
.esm-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--esm-ease),background .3s var(--esm-ease),
             backdrop-filter .3s var(--esm-ease);
}
.esm-header.is-scrolled{
  border-bottom-color:var(--esm-line);
  /*
   * The design specifies .86 here. Dropped to .55 at the client's request:
   * over this site's pale hero, .86 was visually indistinguishable from a
   * solid fill and completely hid the product passing underneath. The blur
   * is what keeps text legible at the lower opacity.
   */
  background:rgba(245,241,235,.55);
  /* -webkit- prefix is not optional: iOS Safari still needs it. */
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.esm-header__inner{
  height:var(--esm-header-h);
  display:grid;grid-template-columns:1fr auto 1fr;column-gap:24px;align-items:center;
  padding-inline:var(--esm-gutter);max-width:var(--esm-maxw);margin-inline:auto;
  transition:height .3s var(--esm-ease);
}
.esm-header.is-scrolled .esm-header__inner{height:62px}
.esm-header.is-scrolled .esm-header__brand img{height:32px}
/*
 * SiteHeader.dc.html is transparent at rest ONLY when the page passes
 * transparent=true, and the homepage is the one page that does. Everywhere
 * else the bar rests frosted with its hairline, so inner pages do not show a
 * bare cream strip with content sliding under an invisible edge.
 */
body:not(.home) .esm-header{
  background:rgba(245,241,235,.86);border-bottom-color:var(--esm-line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}

/* A visitor who asked for less motion gets the states, not the tweening. */
@media (prefers-reduced-motion:reduce){
  .esm-header,.esm-header__inner,.esm-header__brand img{transition:none}
}
.esm-main{padding-top:var(--esm-header-h)}
body.home .esm-main{padding-top:0} /* hero sits under the fixed header by design */

.esm-header__brand{justify-self:center;display:flex;align-items:center;gap:clamp(10px,1.4vw,20px)}
.esm-header__brand .custom-logo-link{display:flex;align-items:center}
/*
 * The design sets the wordmark to clamp(40px,4.6vw,58px) -- 58px on a desktop.
 * It was capped at 34px here, so the logo read as roughly half the size the
 * design intends. max-height:none is required because base.css caps every
 * image at 100%/auto, which fought the explicit height.
 */
.esm-header__brand img{
  height:clamp(40px,4.6vw,58px);
  width:auto;max-height:none;
  transition:height .35s var(--esm-ease)
}
/*
 * The design's desktop bar is search + cart only; there is no account icon.
 * It stays in the DOM for the account page link but is not shown in the bar.
 */
/* Specificity matters here: the generic .esm-iconbtn rule below re-declares
   display, so a bare .esm-iconbtn--account (same weight, earlier in the file)
   lost and the icon kept showing. */
.esm-header__actions .esm-iconbtn--account{display:none}
.esm-header__wordmark{font-family:var(--esm-serif);font-size:24px;letter-spacing:-.01em}

.esm-header__actions{justify-self:end;display:flex;align-items:center;gap:clamp(6px,1vw,14px)}

.esm-nav{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  list-style:none;margin:0;padding:0;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
}
.esm-nav a{color:var(--esm-ink)}
.esm-nav a:hover{color:var(--esm-violet)}
/* Parent items carry a 10px chevron (inc/search.php adds it), inline with the label. */
.esm-nav > li > a{display:inline-flex;align-items:center;gap:6px}
.esm-nav__chevron{flex:none}
/*
 * Dropdown, per SiteHeader.dc.html: the panel resets the bar's all-caps
 * tracking to 15px / 500 sentence case, with the design's soft shadow.
 */
.esm-nav .sub-menu{
  position:absolute;top:100%;left:-16px;min-width:230px;padding:10px 8px;margin:0;
  list-style:none;display:none;flex-direction:column;gap:2px;
  background:rgba(251,249,246,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--esm-line);border-radius:14px;
  box-shadow:0 24px 48px -24px rgba(32,27,36,.35);
  font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;
}
.esm-nav li{position:relative;padding:14px 0}
.esm-nav li:hover>.sub-menu,.esm-nav li:focus-within>.sub-menu{display:flex}
.esm-nav .sub-menu li{padding:0}
.esm-nav .sub-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--esm-ink);transition:background .2s}
.esm-nav .sub-menu a:hover{background:rgba(122,107,186,.10);color:var(--esm-ink)}

.esm-iconbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:999px;border:0;background:transparent;
  color:var(--esm-ink);cursor:pointer;transition:background .2s var(--esm-ease)
}
.esm-iconbtn:hover{background:rgba(32,27,36,.06)}
.esm-cart-count{
  position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--esm-ink);color:var(--esm-cream);
  font-family:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  font-size:10px;font-weight:500;line-height:1
}
.esm-cart-count[hidden]{display:none}

.esm-burger{display:none;flex-direction:column;gap:5px}
.esm-burger__bar{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px}

/* ---- Search dialog, per SiteHeader.dc.html ------------------------------
   Dimmed + blurred backdrop, a centred 760px panel, "Popular" chips while
   the field is empty, grouped results (52px thumb / title + sub / meta) as
   you type. Sits above the mobile menu (z 70). */
.esm-search{position:fixed;inset:0;z-index:80;font-family:var(--esm-sans);color:var(--esm-ink)}
.esm-search[hidden]{display:none}
.esm-search__backdrop{
  position:absolute;inset:0;background:rgba(32,27,36,.32);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}
.esm-search__dialog{
  position:absolute;top:clamp(72px,10vh,120px);left:50%;transform:translateX(-50%);
  width:min(92vw,760px);max-height:calc(100vh - clamp(72px,10vh,120px) - 24px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--esm-cream-2);border:1px solid var(--esm-line);border-radius:18px;
  box-shadow:0 40px 80px -30px rgba(32,27,36,.45)
}
.esm-search__form{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;
  padding:10px 14px 10px 16px;border-bottom:1px solid var(--esm-line);margin:0
}
.esm-search__icon{color:var(--esm-violet);justify-self:start}
.esm-search__input{
  min-width:0;height:48px;padding:0;border:0;border-radius:0;outline:none;background:transparent;
  font:inherit;font-size:18px;color:var(--esm-ink);-webkit-appearance:none;appearance:none
}
.esm-search__input::-webkit-search-decoration,
.esm-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.esm-search__esc{
  height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(32,27,36,.2);
  background:transparent;cursor:pointer;font-family:var(--esm-sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--esm-ink-3);
  transition:background .2s var(--esm-ease),color .2s var(--esm-ease)
}
.esm-search__esc:hover{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}

.esm-search__results{max-height:min(60vh,520px);overflow-y:auto;padding:8px}
.esm-search__results[hidden]{display:none}
.esm-search__label,
.esm-search__group{
  font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3)
}
.esm-search__group{padding:10px 12px 4px}
.esm-search__hit{
  display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;
  padding:8px 12px;border-radius:10px;color:var(--esm-ink);
  transition:background .2s var(--esm-ease)
}
.esm-search__hit:hover,.esm-search__hit:focus-visible,.esm-search__hit.is-focus{background:rgba(122,107,186,.10);color:var(--esm-ink);outline:none}
.esm-search__thumb{
  width:52px;height:52px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,#EFEAF7,#E4DDF1);
  font-family:var(--esm-serif);font-size:18px;color:var(--esm-violet)
}
.esm-search__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.esm-search__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.esm-search__title{font-size:16px;font-weight:600;line-height:1.3}
.esm-search__sub{font-size:13px;color:var(--esm-ink-3);line-height:1.3}
.esm-search__meta{
  font-family:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--esm-ink-2);white-space:nowrap
}
.esm-search__empty{padding:28px 16px;display:flex;flex-direction:column;gap:10px}
.esm-search__empty-title{font-family:var(--esm-serif);font-size:22px}
.esm-search__empty-sub{font-size:14px;color:var(--esm-ink-3)}
.esm-search__empty-sub a{border-bottom:1px solid rgba(32,27,36,.3)}

.esm-search__popular{padding:18px 16px 20px;display:flex;flex-direction:column;gap:12px}
.esm-search__popular[hidden]{display:none}
.esm-search__chips{display:flex;flex-wrap:wrap;gap:8px}
.esm-search__chip{
  height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(32,27,36,.2);
  background:transparent;cursor:pointer;font-family:var(--esm-sans);font-size:13px;color:var(--esm-ink);
  transition:background .2s var(--esm-ease),color .2s var(--esm-ease)
}
.esm-search__chip:hover{background:var(--esm-ink);color:var(--esm-cream)}

@media (max-width:640px){
  .esm-search__dialog{top:12px;width:calc(100vw - 24px);max-height:calc(100vh - 24px)}
  .esm-search__hit{grid-template-columns:44px 1fr auto;gap:10px}
  .esm-search__thumb{width:44px;height:44px}
}

/* ---- Mobile menu: full-bleed overlay, close top-LEFT, accordion rows ----
   Matches SiteHeader.dc.html: rgba(245,241,235,.97) + blur(14px), a 44px
   close control at top/left, hairline-separated parent rows, and children
   that expand via grid-template-rows 0fr -> 1fr. */
.esm-mobile-menu{
  position:fixed;inset:0;z-index:70;
  background:rgba(245,241,235,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  overflow-y:auto;
  padding:76px var(--esm-gutter) 48px;
  display:flex;flex-direction:column
}
.esm-mobile-menu[hidden]{display:none}
.esm-mobile-menu__close{
  position:absolute;top:14px;left:clamp(20px,4vw,56px);
  width:44px;height:44px;background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--esm-ink)
}

.esm-mobile-nav{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  border-top:1px solid rgba(32,27,36,.12)
}
.esm-mobile-nav > li{border-bottom:1px solid rgba(32,27,36,.12)}
.esm-mobile-nav > li > a,
.esm-mobile-nav > li > .esm-mobile-nav__row > a{
  display:block;padding:16px 0;
  font-family:var(--esm-serif);font-size:22px;line-height:1.2;color:var(--esm-ink)
}

/* Parent row: label + toggle share a line. */
.esm-mobile-nav__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.esm-mobile-nav__row > a{flex:1}
.esm-mobile-nav__toggle{
  width:44px;height:44px;flex:0 0 44px;border:0;background:none;cursor:pointer;
  color:var(--esm-ink);font-size:20px;line-height:1;
  display:inline-grid;place-items:center;
  transition:transform .35s var(--esm-ease)
}
.esm-mobile-nav__toggle[aria-expanded="true"]{transform:rotate(45deg)}

/* Children. Collapsed by default ONLY when JS has upgraded the row --
   without JS the sub-menu stays open so the nav is still complete. */
.esm-mobile-nav .sub-menu{list-style:none;margin:0;padding:0}
.esm-mobile-nav li.is-collapsible > .esm-mobile-nav__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--esm-ease)
}
.esm-mobile-nav li.is-collapsible > .esm-mobile-nav__panel > .sub-menu{overflow:hidden}
.esm-mobile-nav li.is-collapsible.is-open > .esm-mobile-nav__panel{grid-template-rows:1fr}
.esm-mobile-nav .sub-menu a{
  display:block;padding:12px 0 12px 18px;
  font-family:var(--esm-sans);font-size:16px;color:var(--esm-ink-2);
  border-bottom:1px solid rgba(32,27,36,.06)
}
.esm-mobile-nav .sub-menu li:last-child a{border-bottom:0}

html.esm-locked,html.esm-locked body{overflow:hidden}

/* ---- Breakpoint: design's mobile bar is burger | logo | search + cart ---- */
.esm-header__lead{display:flex;align-items:center;gap:8px}
.esm-burger{display:none}

@media(max-width:1024px){
  .esm-header__nav{display:none}
  .esm-burger{display:inline-flex}
  /* No account icon on mobile, per the design. */
  .esm-iconbtn--account{display:none}
}

/* ---------------------------- Footer ---------------------------------- */
.esm-footer{
  background:var(--esm-cream);border-top:1px solid var(--esm-line);
  padding:clamp(72px,8vw,120px) var(--esm-gutter) 32px
}
.esm-footer__inner{max-width:var(--esm-maxw);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(48px,6vw,88px)}
.esm-footer__newsletter{max-width:520px;display:flex;flex-direction:column;gap:12px}
.esm-footer__nl-copy{color:var(--esm-ink-2);font-size:15px;margin:0}
.esm-nl{position:relative;display:flex;align-items:center;gap:0;margin-top:8px}
.esm-nl__input{
  flex:1;height:56px;padding:0 60px 0 20px;border-radius:999px;
  border:1px solid var(--esm-line-2);background:var(--esm-cream-2);font:inherit;color:var(--esm-ink)
}
.esm-nl__submit{
  position:absolute;right:6px;width:44px;height:44px;border-radius:999px;border:0;
  background:var(--esm-ink);color:var(--esm-cream);font-size:18px;cursor:pointer;
  transition:background .2s var(--esm-ease)
}
.esm-nl__submit:hover{background:var(--esm-violet-deep)}
.esm-nl__done{margin:8px 0 0;font-size:13px;color:var(--esm-violet-deep)}
.esm-nl__done[hidden]{display:none}

.esm-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px)}
.esm-footer__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.esm-footer__address{font-style:normal;margin-top:14px;font-size:14px;color:var(--esm-ink-2);line-height:1.6}
.esm-footer__tagline{margin-top:14px;font-family:var(--esm-serif);font-size:20px}

.esm-footer__base{
  display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid var(--esm-line);
  font-size:12px;color:var(--esm-ink-3)
}
.esm-footer__base p{margin:0}
.esm-footer__credit a{color:var(--esm-ink-3);border-bottom:1px solid var(--esm-line-2)}
.esm-footer__credit a:hover{color:var(--esm-violet-deep)}

@media(max-width:768px){
  .esm-footer__cols{grid-template-columns:minmax(0,1fr)}
}

/* Reassurance list under add-to-cart */
.esm-reassure{
  list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;
  font-size:12px;letter-spacing:.06em;color:var(--esm-ink-3)
}
.esm-reassure li{padding-left:18px;position:relative}
.esm-reassure li::before{
  content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;
  background:var(--esm-violet)
}

/* =========================================================================
   Screen-reader utility.
   MUST live here, not in a page-scoped stylesheet: header.php and footer.php
   use .screen-reader-text on every view, including the front page and shop
   where content.css is not enqueued. Defining it anywhere else makes
   sr-only labels visually appear on those pages.
   ========================================================================= */
.screen-reader-text{
  border:0;clip-path:inset(50%);height:1px;width:1px;
  margin:-1px;padding:0;overflow:hidden;position:absolute!important;
  white-space:nowrap;word-wrap:normal
}
.screen-reader-text:focus{
  clip-path:none;height:auto;width:auto;margin:0;padding:14px 22px;
  position:fixed!important;top:12px;left:12px;z-index:200;
  background:var(--esm-ink);color:var(--esm-cream);border-radius:8px;
  font-size:13px;line-height:1;text-decoration:none
}

/* Shipping reassurance: RIGHT group, ahead of search, wide viewports only
   (SiteHeader.dc.html isWide = min-width 1180px). */
.esm-header__ship{
  display:none;font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3);white-space:nowrap;margin-right:14px
}
@media(min-width:1180px){ .esm-header__ship{display:inline} }

/* ---------------------------------------------------------------------
   Defensive reset for bare <button>.
   Elementor's Default Kit paints bare buttons with its global accent
   (#E0FF4F lime here). inc/elementor.php stops that stylesheet loading on
   non-Elementor pages, but legacy Elementor pages still load it and share
   this header/footer -- so the theme's own controls state their background
   explicitly rather than inheriting whatever a plugin kit decides.
   --------------------------------------------------------------------- */
.esm-iconbtn,
.esm-burger{background:transparent}
.esm-iconbtn:hover,
.esm-burger:hover{background:rgba(32,27,36,.06)}
.esm-btn--dark{background:var(--esm-ink)}
.esm-btn--violet{background:var(--esm-violet-deep)}
.esm-btn--ghost{background:transparent}
.esm-nl__submit{background:var(--esm-ink)}
.esm-nl__submit:hover{background:var(--esm-violet-deep)}

/* ---- Footer: address+social bar, wordmark band, legal row (design 13) ---- */
.esm-footer__bar{
  display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;
  padding-top:28px;border-top:1px solid var(--esm-line)
}
.esm-footer__social{list-style:none;margin:0;padding:0;display:flex;gap:10px}
.esm-social{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;border:1px solid var(--esm-line-2);color:var(--esm-ink);
  transition:background .2s var(--esm-ease),color .2s var(--esm-ease),border-color .2s var(--esm-ease)
}
.esm-social:hover{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}

.esm-footer__wordmark{margin:clamp(28px,4vw,56px) 0 0;text-align:center}
.esm-footer__wordmark img{
  width:100%;max-width:1100px;height:auto;margin-inline:auto;
  opacity:.5;filter:grayscale(1)
}

.esm-footer__legal{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:12px
}
.esm-footer__legal a{color:var(--esm-ink-3)}
.esm-footer__legal a:hover{color:var(--esm-violet-deep)}

@media(max-width:768px){
  .esm-footer__bar{flex-direction:column;align-items:flex-start}
  .esm-footer__base{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---- Mobile menu footer (design: quiz CTA, notes, socials) ---------------
   There is no "Account" link here; the design has none. */
.esm-mobile-menu__quiz{margin-top:24px;width:100%;height:54px}
.esm-mobile-menu__foot{
  margin-top:auto;padding-top:28px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px
}
.esm-mobile-menu__notes{
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--esm-serif);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--esm-ink-3);line-height:1.5
}
.esm-mobile-menu__social{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex:0 0 auto}


/* =========================================================================
   Footer — SiteFooter.dc.html
   ====================================================================== */

/*
 * The design lays the newsletter and the two link columns out SIDE BY SIDE in
 * a single two-column grid, with the links pushed to the right edge. They were
 * stacked vertically, which is why the desktop footer read as a different
 * design entirely.
 */
.esm-footer__top{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  gap:56px clamp(40px,6vw,120px);
  align-items:start
}
.esm-footer__newsletter{max-width:520px;display:flex;flex-direction:column;gap:22px}
.esm-footer__nl-title{
  margin:0;font-family:var(--esm-serif);font-weight:500;
  font-size:clamp(32px,3.6vw,56px);line-height:1;letter-spacing:-.02em
}
.esm-footer__nl-copy{margin:0;max-width:440px;font-size:15px;line-height:1.6;color:var(--esm-ink-2)}

/* Two columns, right-aligned against the grid edge, per the design. */
.esm-footer__cols{
  grid-template-columns:1fr 1fr;
  gap:32px clamp(24px,4vw,64px);
  justify-self:end;width:100%;max-width:560px
}

/* The subscribe field is a single underlined row, not a boxed input. */
.esm-nl{
  display:flex;align-items:center;max-width:520px;
  border-bottom:1px solid rgba(32,27,36,.4);padding:6px 0;gap:8px
}
.esm-nl__input{
  flex:1;min-width:0;background:transparent;border:0;outline:none;
  padding:12px 0;font:inherit;font-size:16px;color:var(--esm-ink)
}
.esm-nl__submit{
  display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
  border-radius:999px;border:1px solid rgba(32,27,36,.3);background:transparent;
  cursor:pointer;font-size:18px;color:var(--esm-ink);
  transition:background .25s,color .25s
}
.esm-nl__submit:hover{background:var(--esm-ink);color:var(--esm-cream)}

/* Social pills are 44px circles in the design, matching the subscribe button. */
.esm-footer__social .esm-social{
  display:inline-grid;place-items:center;width:44px;height:44px;
  border-radius:999px;border:1px solid rgba(32,27,36,.2);color:var(--esm-ink);
  transition:background .25s,color .25s
}
.esm-footer__social .esm-social:hover{background:var(--esm-ink);color:var(--esm-cream)}
.esm-footer__social{gap:6px}

.esm-footer__bar{margin-top:clamp(56px,7vw,120px);align-items:flex-end}

@media (max-width:900px){
  .esm-footer__cols{justify-self:start;max-width:none}
}
@media (max-width:560px){
  .esm-footer__cols{grid-template-columns:1fr}
}

/* =========================================================================
   Footer bar, wordmark band, legal row — SiteFooter.dc.html
   ====================================================================== */
/* Address and tagline are two small-caps serif lines, stacked 8px apart. */
.esm-footer__bar-left{display:flex;flex-direction:column;gap:8px}
.esm-footer__address,
.esm-footer__tagline{
  margin:0;font-style:normal;font-family:var(--esm-serif);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--esm-ink-3);line-height:1.4
}
/* Wordmark band: full colour, cropped along the rule beneath it (translateY 6%). */
.esm-footer__wordmark{
  margin:24px 0 0;text-align:center;overflow:hidden;
  border-bottom:1px solid rgba(32,27,36,.18)
}
.esm-footer__wordmark img{
  width:min(100%,1180px);max-width:none;height:auto;margin-inline:auto;
  opacity:1;filter:none;transform:translateY(6%)
}
/* Legal row: small-caps serif, copyright left, links right; credit on its own centred line. */
.esm-footer__base{
  padding-top:20px;border-top:0;
  font-family:var(--esm-serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--esm-ink-3)
}
.esm-footer__legal{gap:8px 24px;font-size:12px}
.esm-footer__legal a{color:var(--esm-ink-3)}
.esm-footer__legal a:hover{color:var(--esm-violet)}
.esm-footer__credit{
  flex-basis:100%;margin-top:4px;padding-top:18px;border-top:1px solid var(--esm-line);
  text-align:center;font-size:11px;letter-spacing:.14em;color:var(--esm-ink-4)
}
.esm-footer__credit a{color:var(--esm-ink-4);border-bottom:0}
.esm-footer__credit a:hover{color:var(--esm-violet)}
@media(max-width:768px){
  .esm-footer__base{gap:14px}
  .esm-footer__credit{text-align:left}
}

/* =========================================================================
   Kit-proof theme controls.
   Product pages whose description was built in Elementor keep the Active Kit,
   whose `.elementor-kit-N button{background:accent}` (0,1,1) out-specifies the
   theme's single-class rules and painted the header search button lime.
   These selectors sit at (0,1,2) and state every theme control explicitly.
   ====================================================================== */
html body .esm-iconbtn,
html body .esm-burger,
html body .esm-search__esc,
html body .esm-search__chip,
html body .esm-mobile-menu__close,
html body .esm-mobile-nav__toggle,
html body .esm-nl__submit,
html body .esm-hero__arrow,
html body .esm-faq__mark{background:transparent;color:var(--esm-ink);border:0;border-radius:999px;box-shadow:none}
/* The kit also collapses the inline SVG inside a button to 2px wide. */
html body .esm-iconbtn svg,
html body .esm-search__icon{width:20px;height:20px;flex:none}
html body .esm-search__icon{width:22px;height:22px}
html body .esm-faq__mark{border:1px solid var(--esm-line-strong)}
html body .esm-iconbtn:hover,
html body .esm-burger:hover{background:rgba(32,27,36,.06)}
html body .esm-search__esc:hover,
html body .esm-search__chip:hover,
html body .esm-nl__submit:hover{background:var(--esm-ink);color:var(--esm-cream)}
/* Newsletter field per SiteFooter.dc.html: one underlined row, a bare input,
   and a 44px outlined circle for the arrow. The generic input skin and the
   kit-proof button reset above were painting a boxed field and a borderless
   button (Dan, 2026-09-09). */
html body .esm-nl__input,html body .woocommerce .esm-nl__input{
  height:auto;min-height:0!important;padding:12px 0!important;margin:0;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none;
  font-family:var(--esm-sans);font-size:16px;line-height:1.3;color:var(--esm-ink)
}
html body .esm-nl__input::placeholder,html body .woocommerce .esm-nl__input::placeholder{color:var(--esm-ink-3);opacity:1}
html body .esm-nl__input:focus,html body .woocommerce .esm-nl__input:focus{border:0;box-shadow:none;outline:none}
html body .esm-nl:focus-within{border-bottom-color:var(--esm-ink)}
html body .esm-nl__submit{
  width:44px;height:44px;border:1px solid rgba(32,27,36,.3);border-radius:999px;
  background:transparent;color:var(--esm-ink);font-size:18px;line-height:1
}
html body .esm-nl__submit:hover,html body .esm-nl__submit:focus-visible{background:var(--esm-ink);color:var(--esm-cream);border-color:var(--esm-ink)}
html body .esm-hero__dot{background:rgba(32,27,36,.3);border-radius:999px;padding:0}
html body .esm-hero__dot.is-active{background:var(--esm-ink)}
html body .esm-btn--dark{background:var(--esm-ink);color:var(--esm-cream)}
html body .esm-btn--dark:hover{background:var(--esm-violet-deep);color:var(--esm-cream)}
html body .esm-btn--violet{background:var(--esm-violet-deep);color:var(--esm-cream)}
html body .esm-btn--ghost{background:transparent;color:var(--esm-ink)}
html body .esm-btn--ghost:hover{background:var(--esm-ink);color:var(--esm-cream)}

/* Kit-proof links. On kit pages `.elementor-kit-N a` also sets colour and a
   full font shorthand on every link, which turned the header nav, breadcrumb
   and footer links violet in the kit's typeface. Theme chrome restates both. */
/* (0,1,2) on purpose: `html body .x a` would be (0,1,3) and outrank every
   `html body .component` rule below it, which is how the sticky shop bar CTA
   and the mobile-menu quiz link ended up inheriting body copy sizes. */
body .esm-header a,body .esm-mobile-menu a,body .esm-search__dialog a,
body .esm-breadcrumb a,body .esm-footer a,body .esm-shopbar a{
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit
}
html body .esm-nav > li > a,html body .esm-nav .sub-menu a,html body .esm-mobile-nav > li > a,
html body .esm-mobile-nav > li > .esm-mobile-nav__row > a,html body .esm-footer__list a,
html body .esm-search__hit,html body .esm-search__empty-sub a,html body .esm-header .custom-logo-link,
html body .esm-header .esm-iconbtn--cart{color:var(--esm-ink)}
html body .esm-nav > li > a:hover,html body .esm-nav .sub-menu a:hover,html body .esm-footer__list a:hover{color:var(--esm-violet)}
html body .esm-mobile-nav .sub-menu a{color:var(--esm-ink-2);font-family:var(--esm-sans);font-size:16px}
html body .esm-mobile-nav > li > a,html body .esm-mobile-nav > li > .esm-mobile-nav__row > a{font-family:var(--esm-serif);font-size:22px;line-height:1.2}
html body .esm-breadcrumb a,html body .esm-footer__legal a{color:var(--esm-ink-3)}
html body .esm-breadcrumb a:hover,html body .esm-footer__legal a:hover{color:var(--esm-violet)}
html body .esm-footer__credit a{color:var(--esm-ink-4)}
html body .esm-footer__credit a:hover{color:var(--esm-violet)}
html body .esm-btn,html body .esm-link-rule,html body .esm-mobile-menu__quiz{
  font-family:var(--esm-sans);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1
}
html body .esm-shopbar__cta{font-family:var(--esm-sans);font-size:11px;font-weight:600;letter-spacing:.16em;line-height:1}
html body .esm-btn--dark,html body .esm-btn--violet,html body .esm-shopbar__cta,html body .esm-mobile-menu__quiz{color:var(--esm-cream)}
html body .esm-btn--ghost,html body .esm-link-rule{color:var(--esm-ink)}
html body .esm-link-rule--light{color:var(--esm-cream)}

/* Kit-proof headings. `.elementor-kit-N h1/h2/h3` (0,1,1) sets Lust 300 in
   violet on every heading of a kit page, which recoloured the theme's section
   titles, the footer column labels (h2.esm-eyebrow) and product card names.
   Sizes are restated only where the kit would otherwise win. */
html body .esm-h1,html body .esm-h2,html body .esm-h3,html body .esm-footer__nl-title,
html body .esm-product__title,html body .esm-related__title,html body .esm-product-section__title,
html body .esm-goodtoknow h2,html body .woocommerce-Reviews-title,html body .woocommerce-loop-product__title{
  color:var(--esm-ink);font-family:var(--esm-serif);font-weight:500;font-style:normal;letter-spacing:-.025em;line-height:1.02
}
html body .esm-h1{font-size:min(clamp(48px,6.6vw,124px),14vh);line-height:.94}
html body .esm-h2{font-size:clamp(34px,4.4vw,68px);line-height:1}
html body .esm-h3{font-size:clamp(24px,2.4vw,34px);line-height:1.12}
html body .esm-product .esm-h2,html body .esm-goodtoknow h2,html body .esm-related__title,
html body .esm-product-section__title,html body .woocommerce-Reviews-title{font-size:clamp(36px,4vw,64px);line-height:1}
html body .esm-footer__nl-title{font-size:clamp(32px,3.6vw,56px);line-height:1;letter-spacing:-.02em}
html body .woocommerce-loop-product__title{font-size:24px;line-height:1.15;letter-spacing:-.01em}
html body .esm-product__title{font-size:inherit;line-height:inherit;letter-spacing:normal}
html body .esm-eyebrow{
  font-family:var(--esm-serif);font-size:12px;font-weight:400;font-style:normal;
  letter-spacing:.14em;line-height:1.4;text-transform:uppercase;color:var(--esm-violet);margin:0
}
html body .esm-eyebrow--muted{color:var(--esm-ink-3)}
html body .esm-band-dark h2,html body .esm-band-dark .esm-h2,html body .esm-band-dark .esm-h3{color:var(--esm-cream)}


/* Kit-proof links inside the page body -- KIT PAGES ONLY.
   On a kit page (legacy Elementor pages, products, one Elementor-built post)
   `.elementor-kit-N a` paints every link violet at rest in the kit's font. The
   design is ink at rest, violet on hover. Scoped to body[class*="elementor-kit-"]
   so non-kit pages keep every theme rule untouched; the theme's single-class
   exceptions are restated below at a higher weight. (An earlier revision applied
   this to every page and flattened button/link sizes site-wide -- the shop bar
   lost its label. Fixed 2026-09-08.) */
html body[class*="elementor-kit-"] .esm-main a{
  color:var(--esm-ink);
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit
}
html body[class*="elementor-kit-"] .esm-main a:hover{color:var(--esm-violet)}
html body[class*="elementor-kit-"] .esm-main .esm-prose a{color:var(--esm-violet-deep)}
html body[class*="elementor-kit-"] .esm-main .esm-prose a:hover{color:var(--esm-violet)}
html body[class*="elementor-kit-"] .esm-main .esm-article__kicker a{color:var(--esm-violet)}
html body[class*="elementor-kit-"] .esm-main .esm-article__kicker a:hover{color:var(--esm-violet-deep)}
html body[class*="elementor-kit-"] .esm-main .esm-share__link:hover,
html body[class*="elementor-kit-"] .esm-main .esm-rail__tags a:hover{color:var(--esm-cream)}
html body[class*="elementor-kit-"] .esm-main .esm-choose__row{color:var(--esm-cream)}
html body[class*="elementor-kit-"] .esm-main .esm-choose__row:hover{color:var(--esm-lilac)}
html body[class*="elementor-kit-"] .esm-main .esm-btn,
html body[class*="elementor-kit-"] .esm-main .esm-link-rule,
html body[class*="elementor-kit-"] .esm-main .esm-shopbar__cta,
html body[class*="elementor-kit-"] .esm-main .esm-postcard__cta,
html body[class*="elementor-kit-"] .esm-main .esm-hero__quiz{font-family:var(--esm-sans);font-size:12px;font-weight:600;letter-spacing:.16em;line-height:1}
html body[class*="elementor-kit-"] .esm-main .esm-btn--sm,
html body[class*="elementor-kit-"] .esm-main .esm-shopbar__cta,
html body[class*="elementor-kit-"] .esm-main .esm-postcard__cta{font-size:11px}
html body[class*="elementor-kit-"] .esm-main .esm-postcard__cta{color:var(--esm-violet)}
html body[class*="elementor-kit-"] .esm-main .esm-hero__quiz{font-size:10px;color:var(--esm-ink-2)}
html body[class*="elementor-kit-"] .esm-main .esm-btn--dark,
html body[class*="elementor-kit-"] .esm-main .esm-btn--violet,
html body[class*="elementor-kit-"] .esm-main .esm-btn--dark:hover,
html body[class*="elementor-kit-"] .esm-main .esm-btn--violet:hover,
html body[class*="elementor-kit-"] .esm-main .esm-shopbar__cta,
html body[class*="elementor-kit-"] .esm-main .esm-link-rule--light,
html body[class*="elementor-kit-"] .esm-main .esm-chip.is-active,
html body[class*="elementor-kit-"] .esm-main .esm-btn--ghost:hover{color:var(--esm-cream)}
html body[class*="elementor-kit-"] .esm-main .esm-btn--light{color:var(--esm-ink)}
html body[class*="elementor-kit-"] .esm-main .esm-link-rule--light:hover{color:var(--esm-lilac)}
html body[class*="elementor-kit-"] .esm-main .esm-breadcrumb a{color:var(--esm-ink-3)}
html body[class*="elementor-kit-"] .esm-main .esm-breadcrumb a:hover{color:var(--esm-violet)}


/* =========================================================================
   Cookie notice card (theme-native, inc/cookie-notice.php).
   Hidden until app.js adds .is-in once the visitor has scrolled past the
   first screen; dismissing sets the esm_cookie_ok cookie and removes it.
   ====================================================================== */
.esm-cookie{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:min(360px,calc(100vw - 40px));
  padding:18px 44px 18px 20px;
  background:rgba(245,241,235,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--esm-line);border-radius:16px;
  box-shadow:0 24px 60px -28px rgba(32,27,36,.5);
  color:var(--esm-ink);font-family:var(--esm-sans);
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .45s var(--esm-ease),transform .45s var(--esm-ease)
}
.esm-cookie[hidden]{display:none}
.esm-cookie.is-in{opacity:1;transform:none;pointer-events:auto}
.esm-cookie__text{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--esm-ink)}
.esm-cookie__actions{display:flex;gap:10px}
.esm-cookie .esm-btn{height:40px;padding:0 18px;font-size:11px}
.esm-cookie__close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  border:0;border-radius:999px;background:transparent;color:var(--esm-ink-3);
  font-size:20px;line-height:1;cursor:pointer
}
.esm-cookie__close:hover{background:rgba(32,27,36,.06);color:var(--esm-ink)}
@media (prefers-reduced-motion:reduce){ .esm-cookie{transition:none} }


/* =========================================================================
   Kit-proof theme controls, part two: padding and type.
   `.elementor-kit-5 button` (0,1,1) sets background, colour, border, radius,
   padding AND the whole type stack on every bare <button>, so it beats any
   single-class theme rule on the pages that load the kit (products, legacy
   Elementor pages). The block above covered colour and the frame; these
   restate padding and typography, and cover the controls that live outside
   `.esm-main` -- the cookie card's dismiss "x" was rendering as a lime kit
   button with a 30px radius (Dan, 2026-09-09).
   ====================================================================== */
html body .esm-iconbtn,
html body .esm-burger,
html body .esm-mobile-menu__close,
html body .esm-mobile-nav__toggle,
html body .esm-nl__submit,
html body .esm-hero__dot,
html body .esm-faq__mark,
html body .esm-cookie__close{padding:0}
html body .esm-search__esc{
  padding:0 12px;border:1px solid rgba(32,27,36,.2);
  font-family:var(--esm-sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1
}
html body .esm-search__chip{
  padding:0 14px;border:1px solid rgba(32,27,36,.2);
  font-family:var(--esm-sans);font-size:13px;font-weight:400;
  letter-spacing:normal;text-transform:none;line-height:1
}
html body .esm-mobile-menu__close{font-family:var(--esm-sans);font-size:22px;line-height:1;letter-spacing:normal;text-transform:none}
html body .esm-mobile-nav__toggle{font-family:var(--esm-sans);font-size:20px;line-height:1;letter-spacing:normal;text-transform:none}
html body .esm-faq__mark{font-size:18px;line-height:1}

/* The pill, stated in full so a kit page cannot resize or outline it. The
   size modifiers restate only the two values they change. */
html body .esm-btn{
  height:56px;padding:0 30px;border:1px solid transparent;border-radius:999px;
  font-family:var(--esm-sans);font-size:12px;font-weight:600;
  letter-spacing:.16em;line-height:1;text-transform:uppercase
}
html body .esm-btn--sm{height:40px;padding:0 18px;font-size:11px}
html body .esm-btn--pill{height:60px;padding:0 8px 0 28px}
html body .esm-btn--ghost{border-color:var(--esm-line-strong)}

/* Cookie card: printed on wp_footer, so it sits outside every .esm-main rule. */
html body .esm-cookie__close{
  position:absolute;top:10px;right:10px;width:32px;height:32px;
  border:0;border-radius:999px;background:transparent;color:var(--esm-ink-3);
  font-family:var(--esm-sans);font-size:20px;font-weight:400;
  letter-spacing:normal;text-transform:none;line-height:1;box-shadow:none
}
html body .esm-cookie__close:hover,
html body .esm-cookie__close:focus-visible{background:rgba(32,27,36,.06);color:var(--esm-ink);border:0}

/* WooCommerce's PhotoSwipe gallery controls are bare <button>s as well, and
   the kit was drawing a dark 1px ring with a 30px radius around each icon. */
html body .pswp__button{padding:0;border:0;border-radius:0;background-color:transparent;box-shadow:none}

/* ======================================================================
   NEWSLETTER CONSENT + STATUS (Klaviyo wiring, 2026-09-17)

   .esm-nl is a flex row with a border-bottom, so the consent, success and
   error lines live in .esm-nl-foot immediately after the form rather than
   inside it. Inside, they render as an extra column within the underlined
   field instead of beneath it.

   .esm-footer__newsletter is a 22px-gap column; the negative top margin pulls
   this block back under the field, where fine print belongs.
   ====================================================================== */
html body .esm-nl-foot{
  display:flex;flex-direction:column;gap:6px;
  max-width:520px;margin-top:-12px
}
html body .esm-nl__consent{
  margin:0;font-family:var(--esm-sans);font-size:12px;line-height:1.5;
  color:var(--esm-ink-3)
}
html body .esm-nl__done{
  margin:0;font-family:var(--esm-sans);font-size:13px;line-height:1.5;
  color:var(--esm-violet-deep)
}
html body .esm-nl__error{
  margin:0;font-family:var(--esm-sans);font-size:13px;line-height:1.5;
  color:#C22A2A
}
html body .esm-nl-foot [hidden]{display:none}
html body .esm-nl__submit[disabled]{opacity:.5;cursor:default}