.elementor-24 .elementor-element.elementor-element-a15079f{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--gap:60px 60px;--row-gap:60px;--column-gap:60px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-a15079f:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-a15079f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-94dacd9{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-fc7c358{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-24 .elementor-element.elementor-element-74d16c7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-24 .elementor-element.elementor-element-bba068a{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-24 .elementor-element.elementor-element-89792e3 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-24 .elementor-element.elementor-element-89792e3 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-24 .elementor-element.elementor-element-89792e3{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-24 .elementor-element.elementor-element-89792e3 .elementor-icon-list-text{transition:color 0.3s;}.elementor-24 .elementor-element.elementor-element-7a5be6f{--display:flex;}.elementor-24 .elementor-element.elementor-element-b7e39bc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-24 .elementor-element.elementor-element-b7e39bc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-24 .elementor-element.elementor-element-b7e39bc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-24 .elementor-element.elementor-element-b7e39bc .elementor-icon-list-text{transition:color 0.3s;}.elementor-24 .elementor-element.elementor-element-8ab884d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-24 .elementor-element.elementor-element-b9658fd{text-align:center;}.elementor-24 .elementor-element.elementor-element-918656c{--grid-template-columns:repeat(0, auto);text-align:center;--icon-size:16px;--grid-column-gap:8px;--grid-row-gap:0px;}.elementor-24 .elementor-element.elementor-element-918656c .elementor-social-icon{background-color:var( --e-global-color-primary );--icon-padding:0.65em;border-style:none;}.elementor-24 .elementor-element.elementor-element-918656c .elementor-icon{border-radius:50px 50px 50px 50px;}.elementor-24 .elementor-element.elementor-element-351aa1a{--display:flex;}.elementor-24 .elementor-element.elementor-element-351aa1a:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-351aa1a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-secondary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-24 .elementor-element.elementor-element-db5df83{text-align:center;}.elementor-24 .elementor-element.elementor-element-b93ab02{--display:flex;--min-height:52px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-24 .elementor-element.elementor-element-28c4efc{text-align:center;color:var( --e-global-color-text );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-24 .elementor-element.elementor-element-a15079f{--content-width:1200px;}.elementor-24 .elementor-element.elementor-element-94dacd9{--width:35%;}.elementor-24 .elementor-element.elementor-element-74d16c7{--width:50%;}.elementor-24 .elementor-element.elementor-element-8ab884d{--width:25%;}}/* Start custom CSS for html, class: .elementor-element-fc7c358 *//* ==========================================================================
   Her Hair Theory — Footer Newsletter Signup (Brevo form)
   Rewrite of the old WPForms .jb-footer-newsletter styling, retargeted to
   Brevo's embed markup. Add this to WordPress: Appearance > Customize >
   Additional CSS (or your theme's custom CSS panel) — same stylesheet
   where the site's :root brand tokens (--jb-red, --jb-hover, --jb-blush,
   --jb-white, --jb-body-font, etc.) are defined, so this block relies on
   those variables instead of hardcoding colors a second time.

   Verified against the real Additional-CSS-UPDATED.txt .jb-footer-newsletter
   block (WPForms-targeted) — corrected from the first draft:
     - button hover INVERTS to cream/black (var(--jb-white) / #14110F),
       it does not darken to var(--jb-hover) like other buttons on the site
     - input padding 0 14px (was 16px)
     - placeholder color #888888 (was a custom blush-brown)
     - added the focus ring box-shadow the rest of the site uses
     - button min-width 104px, padding 0 20px (was 24px)

   UPDATED Aug 23, 2026: the form now shows a real headline ("Never Miss a
   Good Hair Day"), a visible subtext/label ("Styling tips, new drops, and
   exclusive offers."), and a GDPR consent checkbox with its own helper
   text ("You can unsubscribe at any time. See our Privacy Policy.").
   REMOVED the old rule that hid .entry__label / .entry__specification —
   those class names now belong to this new visible copy, not the old
   unused field label, so hiding them would make the subtext and consent
   helper text disappear entirely. ADDED font-family overrides so the
   headline, subtext, and consent block use the brand body font instead of
   Brevo's default Helvetica (inline styles need !important to be beaten).
   ========================================================================== */

.jb-footer-newsletter {
  font-family: var(--jb-body-font, "Lato", sans-serif);
}

/* Brand font on the headline, subtext, and consent checkbox block — Brevo
   hardcodes Helvetica as an inline style on each of these, so !important
   is required to override it. */
.jb-footer-newsletter .sib-text-form-block p,
.jb-footer-newsletter .entry__label,
.jb-footer-newsletter .entry__specification,
.jb-footer-newsletter .sib-optin,
.jb-footer-newsletter .sib-optin span,
.jb-footer-newsletter .sib-optin p {
  font-family: var(--jb-body-font, "Lato", sans-serif) !important;
}

/* Tighten spacing around the consent checkbox block — Brevo wraps every
   block in its own inline padding:8px 0, which stacks on top of the
   10px flex gap already set on #sib-form below, making the gap between
   the checkbox and the button look too large. */
.jb-footer-newsletter #sib-form > div {
  padding: 0 !important;
}

.jb-footer-newsletter .entry__error--primary {
  margin: 0 !important;
  min-height: 0 !important;
}

/* The consent text is wrapped in a <p>, which is a block element by
   default — that pushes the required-field asterisk span right after it
   onto its own new line. Make the paragraph inline so the asterisk flows
   right after the last word instead. */
.jb-footer-newsletter .sib-optin p {
  display: inline !important;
  margin: 0 !important;
}

/* The actual root cause: Brevo's own sib-styles.css forces .entry__label
   to display:block !important by default (meant for full-width field
   labels elsewhere in the form). That beats the span's own inline
   style="display:inline" regardless of the <p> fix above. Override it
   directly, targeting the more specific .entry__label_optin class so
   this doesn't affect any other .entry__label elements on the page. */
.jb-footer-newsletter .sib-optin .entry__label_optin {
  display: inline !important;
}

/* Strip Brevo's default card chrome (grey wrapper bg, white box, border,
   shadow) so the form sits flush inside the footer instead of looking like
   a boxed widget. */
.jb-footer-newsletter .sib-form {
  background-color: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}

.jb-footer-newsletter #sib-container {
  max-width: 100% !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.jb-footer-newsletter .sib-form-container {
  padding: 0 !important;
}

/* Stack the field and button full-width, top to bottom — the footer
   column is too narrow to fit them pill-to-pill inline. */
.jb-footer-newsletter #sib-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.jb-footer-newsletter .sib-input.sib-form-block {
  flex: 1 1 100%;
  width: 100%;
  min-width: 180px;
}

.jb-footer-newsletter .form__entry.entry_block {
  width: 100%;
}

.jb-footer-newsletter .entry__field {
  width: 100%;
  /* Brevo wraps the real <input> in its own default box (white background +
     light blue-gray border) that was showing behind/around our styled pill,
     creating a double-border "shadow" artifact. Strip it so only the
     input's own cream pill styling is visible. */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Email input — cream fill, blush border, pill, 36px (matches the real
   .jb-footer-newsletter input[type="email"] rules exactly) */
.jb-footer-newsletter input#EMAIL {
  width: 100% !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  box-sizing: border-box;
  background: var(--jb-white, #FBFAF8) !important;
  border: 1px solid var(--jb-blush, #F6E3E1) !important;
  border-radius: 999px !important;
  color: #3A3633 !important;
  font-family: var(--jb-body-font, "Lato", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  padding: 0 14px !important;
  box-shadow: none !important;
}

.jb-footer-newsletter input#EMAIL::placeholder {
  color: #888888 !important;
  opacity: 1 !important;
  font-size: 13px !important;
}

.jb-footer-newsletter input#EMAIL:focus {
  outline: none !important;
  border-color: var(--jb-red, #A8283A) !important;
  box-shadow: 0 0 0 2px rgba(168, 40, 58, 0.16) !important;
}

/* Subscribe button — red pill, compact, matches the real
   .jb-footer-newsletter button[type="submit"] rules exactly.
   Full-width to match the input above it — the footer column is narrow
   enough that the field + button always wrap onto separate rows, so
   matching widths keeps both edges visually aligned instead of the
   button looking like a narrower, misaligned floating pill. */
.jb-footer-newsletter .sib-form-block {
  flex: 1 1 100%;
  width: 100%;
}

.jb-footer-newsletter .sib-form-block__button {
  width: 100% !important;
  min-width: 104px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  background: var(--jb-red, #A8283A) !important;
  color: var(--jb-white, #FBFAF8) !important;
  border: 1px solid var(--jb-red, #A8283A) !important;
  border-radius: 999px !important;
  font-family: var(--jb-body-font, "Lato", sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 0 20px !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

/* Hover inverts to cream/black — matches the real site's footer button
   hover exactly (NOT the darker-red hover used elsewhere on the site). */
.jb-footer-newsletter .sib-form-block__button:hover {
  background: var(--jb-white, #FBFAF8) !important;
  color: #14110F !important;
  border-color: var(--jb-white, #FBFAF8) !important;
}

/* Safety net: Brevo normally hides these two panels by default via a
   :where(.sib-form-message-panel){display:none} rule that ships in the
   embed's "head" <style> block (and/or its external sib-styles.css link).
   On this site that default-hide rule isn't present in the served HTML
   (confirmed via direct fetch), so both the error and success panels were
   rendering visible on page load instead of only after a real submit.
   Re-declare the hide here, in our own always-loaded stylesheet, WITHOUT
   !important — that way Brevo's own script can still reveal the correct
   one via inline style (`element.style.display = 'block'`) after a real
   submission; inline styles win over a plain external rule even though
   they don't win over an !important one. */
.jb-footer-newsletter #error-message,
.jb-footer-newsletter #success-message,
.jb-footer-newsletter .sib-form-message-panel {
  display: none;
}

/* Error / success message text — plain text on the (dark) footer
   background, matching the real .jb-footer-newsletter error styling
   rather than Brevo's default bordered panels. */
.jb-footer-newsletter #error-message,
.jb-footer-newsletter #success-message {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--jb-blush, #F6E3E1) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin-top: 4px !important;
  max-width: 100% !important;
}

/* Stack field + button on narrow footers */
@media (max-width: 767px) {
  .jb-footer-newsletter input#EMAIL {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
  }
  .jb-footer-newsletter .sib-form-block__button {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 0 18px !important;
  }
}

/* ---------------------------------------------------------------------
   Note on bot protection: Brevo's embed already includes its own hidden
   honeypot field (input[name="email_address_check"].input--hidden) plus
   invisible reCAPTCHA v3 — no additional honeypot field is needed. The
   rule below just guarantees Brevo's own hidden field stays hidden even
   if a theme resets input display styles.
   --------------------------------------------------------------------- */
.jb-footer-newsletter input.input--hidden {
  display: none !important;
}/* End custom CSS */