/*
Theme Name:   Hairetics
Theme URI:    https://haireticssalon.com/
Description:  Hairetics Salon child theme for Astra: the Hairetics header, menu and footer on every page, and the woven-pentacle homepage. Ported from the static prototype in github.com/baldheadedguy/haireticssalon.com.
Author:       Hairetics Salon
Template:     astra
Version:      0.2.0
Text Domain:  hairetics
*/

/* Every class here is prefixed hx- so nothing collides with Astra or WordPress
   (WordPress itself uses .menu, .menu-item, etc.).

   Layout tiers (mirroring the prototype's css/site.css):
   - 1441px+       page column 75% wide (min 1440px), full menu
   - <=1440px      page column full width, tighter menu
   - height <=1004 (desktop widths) pentacle fixed at 540px tall, page scrolls a little
   - <1280px       sticky header; 768-1279px two-row header (full menu on its own row)
   - <768px        Menu button + drop-down panel with accordion submenus
   - <=921px       phones/portrait tablets: scrolling homepage, stacked footer
   - <=600px       phones (and folded foldables): service names also as buttons
   - hover: none   touch screens: medallions and the $25 seal in color */

:root {
  /* 75% on big screens; on laptops it grows to the full width (up to 1440px). */
  --hx-page-width: max(75%, min(100%, 1440px));
  --hx-ivory: #eee2cd;
  --hx-ink: #181819;
  --hx-rule: #c8bba6;
  --hx-red: #a01d21;  /* brand red: the logo's red (Astra global color 0 on the live site) */
  --hx-red-bright: #c42a2f;  /* hover on red buttons */
}

.hx-header,.hx-footer,.hx-screen {
  font-family: 'EB Garamond',serif;
  font-weight: 600;
}

.hx-header *,.hx-footer *,.hx-screen * {
  box-sizing: border-box;
}

.hx-header a,.hx-footer a,.hx-main a {
  color: inherit;
  text-decoration: none;
}

/* ---- Header ---- */
.hx-header {
  width: var(--hx-page-width);
  margin: 0 auto;
  padding: 18px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--hx-ivory);
  color: var(--hx-ink);
  border-bottom: 1px solid var(--hx-rule);
}

.hx-wordmark img {
  display: block;
  width: 150px;
  height: auto;
}

/* padding-right: room for the pinned .hx-book pill (178px wide) plus the 30px gap. */
.hx-nav {
  display: flex;
  gap: 30px;
  align-items: center;
  font-size: 16px;
  padding-right: 208px;
}

.hx-nav-link {
  display: block;
  padding: 12px 0;
  cursor: pointer;
  transition: color .2s;
}

button.hx-nav-link {
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  line-height: inherit;
}

.hx-chevron,.hx-menu-toggle {
  display: none;
}

.hx-menu {
  position: relative;
}

.hx-dropdown {
  display: none;
  position: absolute;
  /* Dropdowns open rightward from their menu item; the last one
     (#UnmistakablyYou, far right) opens leftward, below. #ExtraordinaryHair is
     first in the menu so its dropdown stays clear of the homepage's top
     (Hair Color) medallion, which its links light up. */
  left: 0;
  top: 100%;
  z-index: 50;
  min-width: 180px;
  white-space: nowrap;
  padding: 12px;
  background: var(--hx-ivory);
  color: var(--hx-ink);
  border: 1px solid #8c7c65;
}

.hx-menu:hover > .hx-dropdown,.hx-menu:focus-within > .hx-dropdown {
  display: block;
}

.hx-nav > .hx-menu:last-child > .hx-dropdown {
  left: auto;
  right: 0;
}

.hx-dropdown a {
  display: block;
  padding: 12px;
}

.hx-header .hx-nav-link:hover,.hx-header .hx-menu:hover > .hx-nav-link,.hx-header .hx-dropdown a:hover {
  color: var(--hx-red);
}

.hx-header .hx-dropdown a:hover {
  background: #d9cab0;
}

.hx-header a:focus-visible,.hx-header button:focus-visible,.hx-footer a:focus-visible {
  outline: 2px solid var(--hx-ink);
  outline-offset: 5px;
}

/* Booking pill: fixed where it sits in the header (side margin + header's 5%
   padding, vertically centred on the 134px header) so it stays put on scroll. */
.hx-book {
  position: fixed;
  right: calc((100% - var(--hx-page-width)) / 2 + 5%);
  top: 67px;
  translate: 0 -50%;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--hx-red);
  color: #fff4e3 !important;
  border: 1px solid #861a1e;
  font-size: 15px;
  letter-spacing: .5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .2s,transform .2s;
}

/* Logged-in admins see the 32px WordPress admin bar above the header. */
.admin-bar .hx-book {
  top: 99px;
}

.hx-book:hover {
  background: var(--hx-red-bright);
  transform: translateY(-2px);
}

.hx-book svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Opens in a new window" marker. */
svg.hx-ext {
  width: .85em;
  height: .85em;
  margin-left: 4px;
  vertical-align: -1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hx-book svg.hx-ext {
  width: 14px;
  height: 14px;
  margin-left: -2px;
}

.hx-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Promotion bar: right under the header on every page, same width ---- */
.hx-promo-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: var(--hx-page-width);
  margin: 0 auto;
  padding: 9px 16px;
  background: var(--hx-red);  /* brand red, same as the Book with us pill */
  color: #fff4e3;
  border-bottom: 1px solid var(--hx-ivory);  /* thin ivory line above the page body */
  font-family: 'EB Garamond',serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .3px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background .2s;
}

/* Hover red only with a real pointer: phones "hover" wherever the last tap was,
   which can land on the bar when a menu link opens the next page. */
.hx-promo-bar:focus-visible {
  background: var(--hx-red-bright);  /* brighter, as on the pill */
  color: #fff4e3;
}

@media (hover: hover) {
  .hx-promo-bar:hover {
    background: var(--hx-red-bright);  /* brighter, as on the pill */
    color: #fff4e3;
  }
}

.hx-promo-bar:focus-visible {
  outline: 2px solid #fff4e3;
  outline-offset: -4px;
}

.hx-promo-bar-star {
  color: #f6dfae;
}

/* Below 1280px the header sticks to the top; the bar sticks right under it so
   the offer stays in view (js/hairetics.js sets --hx-header-bottom: the header's
   sticky offset, e.g. the admin bar, plus its height). */
@media (width < 1280px) {
  .hx-promo-bar {
    position: sticky;
    top: var(--hx-header-bottom, 0px);
    z-index: 29;  /* under the header (30), so the Menu panel drops over it */
  }
}

@media (width < 768px) {
  .hx-promo-bar {
    gap: 6px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.3;
    text-wrap: balance;  /* two even lines rather than one long and one short */
  }

  .hx-promo-bar-star {
    display: none;
  }
}

/* ---- Footer: headed groups on the header's ivory ---- */
.hx-footer {
  width: var(--hx-page-width);
  margin: 0 auto;
  padding: 14px 5%;
  background: var(--hx-ivory);
  color: var(--hx-ink);
  border: 1px solid var(--hx-rule);
  font-size: 13px;
  line-height: 1.5;
}

.hx-footer p {
  margin: 0;
  max-width: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.hx-footer a:hover {
  color: var(--hx-red);
}

.hx-footer-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  grid-template-areas: "hours visit commit connect";
  align-items: start;
  gap: 16px 48px;
}

.hx-group-hours { grid-area: hours; }
.hx-group-visit { grid-area: visit; }
.hx-group-commitments { grid-area: commit; justify-self: center; }
.hx-group-connect { grid-area: connect; }

/* Group headings, each with a rule under it. */
.hx-footer-group h2 {
  margin: 0 0 6px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--hx-ink);
  font: inherit;
  font-size: 14px;
  letter-spacing: .5px;
  color: inherit;
}

.hx-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;  /* call, text and address fit within the Hours group's height */
}

.hx-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hx-phone svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

/* "text only" after the texting number. */
.hx-phone small {
  font-size: .85em;
  opacity: .75;
}

.hx-certifications {
  display: flex;
  align-items: center;
}

.hx-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.hx-badge:first-of-type {
  padding-left: 0;
}

.hx-badge + .hx-badge {
  border-left: 1px solid var(--hx-rule);
}

/* 14px with tight lines and 16px badge padding: as large as it gets without
   making the footer (and so the one-screen homepage) any taller. */
.hx-footer .hx-badge p {
  font-size: 14px;
  line-height: 1.35;
}

.hx-badge a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The Green Circle logo JPG has a white background; multiply lets the ivory show through. */
.hx-badge img[src*="greencircle"] {
  mix-blend-mode: multiply;
}

.hx-social {
  display: flex;
  gap: 16px;
}

.hx-social a {
  display: block;
  width: 20px;
  height: 20px;
  transition: color .2s;
}

.hx-social svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.hx-footer .hx-copyright {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--hx-rule);
  text-align: center;
  font-size: 11px;
  color: #514637;
}

/* The Privacy link (California expects a clearly labelled link from the
   homepage); brand red on hover reads fine on the ivory footer. */
.hx-footer .hx-copyright a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hx-footer .hx-copyright a:hover,
.hx-footer .hx-copyright a:focus-visible {
  color: var(--hx-red);
}

/* ---- Homepage (front-page.php): one screen on tall displays ---- */
body.hx-home {
  margin: 0;
  background: var(--hx-ink);
}

.hx-screen {
  height: 100svh;
  display: flex;
  flex-direction: column;
}

.admin-bar .hx-screen {
  height: calc(100svh - 32px);
}

.hx-screen > .hx-header,.hx-screen > .hx-promo-bar,.hx-screen > .hx-footer {
  flex: none;
}

.hx-main {
  position: relative;
  flex: 1;
  min-height: 0;
  width: var(--hx-page-width);
  margin: 0 auto;
  padding: 12px 5%;
  display: flex;
  flex-direction: column;
  /* Charcoal glow behind the pentacle (darkest at its centre, fading out) keeps
     the hair texture but calms its bright highlights around the medallions. */
  background:
    radial-gradient(ellipse 55% 60% at 50% 46%, rgba(24,24,25,.72) 0%, rgba(24,24,25,.5) 45%, rgba(24,24,25,0) 100%),
    var(--hx-ink) url(images/photos/home_rosegold_bgd.jpg) left top/150% auto no-repeat;
}

.hx-star {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hx-star-art {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  display: block;
}

.hx-star figcaption {
  flex: none;
  text-align: center;
  color: #eee2cd;
}

/* The tagline is the page's h1. Everything is set explicitly so Astra's heading
   styles (font, color, size, spacing) don't apply. */
h1.hx-star-caption {
  display: block;
  margin: 10px 0;
  padding: 0;
  font-family: 'EB Garamond',serif;
  font-size: clamp(2rem,2.8vw,2.5rem);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--hx-ivory);
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.6);
}

/* Welcome line under the tagline. Wraps (on phones) between its two halves. */
.hx-main .hx-star-welcome {
  max-width: none;
  margin: -4px 0 6px;
  padding: 0;
  font-family: 'EB Garamond',serif;
  /* 4.4vw: a step smaller than the tagline on phones (about 17px on a 390px
     phone) and still one line on a folded Galaxy Fold's ~344px cover screen. */
  font-size: clamp(min(1.15rem,4.4vw),1.5vw,1.35rem);
  font-style: italic;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.4;
  color: #f6dfae;
  text-shadow: 0 1px 3px rgba(0,0,0,.9),0 0 12px rgba(0,0,0,.7);
}

.hx-star-welcome span {
  white-space: nowrap;
}

.hx-star-instructions {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.7);
}

/* Phone-only list of the services (see the phone tier). */
.hx-service-links {
  display: none;
}

/* ---- $25-off seal, lower left of the homepage main area ---- */
.hx-promo-badge {
  position: absolute;
  /* Same size as the pentacle's medallions: js/hairetics.js measures the
     pentacle and sets --hx-medallion (the seal's outer disc is 188 of its 200 units). */
  --hx-seal: calc(var(--hx-medallion, 118px) * 200 / 188);
  /* Centred on the line where the logo and footer Hours start: the header/footer
     side padding is 5% of the full window width. */
  left: max(16px, calc(5vw - var(--hx-seal) / 2));
  bottom: 24px;
  z-index: 4;
  width: var(--hx-seal);
  height: var(--hx-seal);
  border-radius: 50%;
  /* Dormant until invoked: grey and still, like the medallions. */
  filter: grayscale(1) brightness(.8) drop-shadow(0 0 6px rgba(246,223,174,0)) drop-shadow(0 4px 10px rgba(0,0,0,.6));
  transition: transform .45s cubic-bezier(.2,.8,.2,1),filter .45s;
}

.hx-promo-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hx-promo-ring-text {
  font-family: 'EB Garamond',serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  fill: #f3d9a0;
}

.hx-promo-amount {
  font-family: 'MedievalSharp',serif;
  font-size: 44px;
  fill: url(#hx-promo-gold);
  stroke: #4f0c0f;
  stroke-width: .5px;
}

.hx-promo-off {
  font-family: 'MedievalSharp',serif;
  font-size: 20px;
  letter-spacing: 4px;
  fill: #f6dfae;
}

.hx-promo-spin {
  transform-origin: 100px 100px;
  animation: hx-promo-spin 8s linear infinite paused;
}

@keyframes hx-promo-spin {
  to { transform: rotate(360deg); }
}

.hx-promo-sparkles path {
  transform-box: fill-box;
  transform-origin: center;
  animation: hx-promo-twinkle 1.2s ease-in-out infinite paused;
}

.hx-promo-sparkles path:nth-child(2) { animation-delay: -.8s; }
.hx-promo-sparkles path:nth-child(3) { animation-delay: -1.6s; }
.hx-promo-sparkles path:nth-child(4) { animation-delay: -2.4s; }

@keyframes hx-promo-twinkle {
  0%,100% { opacity: .15; transform: scale(.6); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* Raised and glowing on its own hover/focus, or while the Promotions menu item
   (the one with the hx-promo class) or the promotion bar is hovered. */
.hx-promo-badge:hover,.hx-promo-badge:focus-visible,
body:has(.hx-promo:hover,.hx-promo:focus-visible,.hx-promo-bar:hover,.hx-promo-bar:focus-visible) .hx-promo-badge {
  transform: translateY(-14px) scale(1.12);
  filter: grayscale(0) brightness(1) drop-shadow(0 0 14px rgba(246,223,174,.85)) drop-shadow(0 10px 18px rgba(0,0,0,.7));
}

.hx-promo-badge:hover .hx-promo-spin,.hx-promo-badge:focus-visible .hx-promo-spin,
body:has(.hx-promo:hover,.hx-promo:focus-visible,.hx-promo-bar:hover,.hx-promo-bar:focus-visible) .hx-promo-spin,
.hx-promo-badge:hover .hx-promo-sparkles path,.hx-promo-badge:focus-visible .hx-promo-sparkles path,
body:has(.hx-promo:hover,.hx-promo:focus-visible,.hx-promo-bar:hover,.hx-promo-bar:focus-visible) .hx-promo-sparkles path {
  animation-play-state: running;
}

/* ---- Short screens (most laptops, and 1080p monitors once the browser's own
   bars are counted): rather than shrink the pentacle and its name ribbons to
   fit one screen, keep it 540px tall and let the page scroll a little. Above
   1004px tall the one-screen layout gives it at least 500px. ---- */
@media (height < 1005px) and (min-width: 922px) {
  .hx-screen,.admin-bar .hx-screen {
    height: auto;
    min-height: 100svh;
  }

  .hx-main,.hx-star {
    flex: none;
  }

  .hx-star-art {
    flex: none;
    height: 540px;
  }
}

/* ---- Laptops: a little less space between menu items ---- */
@media (max-width: 1440px) {
  .hx-nav {
    gap: 24px;
    padding-right: 202px;  /* the pinned pill (178px) + the 24px gap */
  }
}

/* ---- Below 1280px the menu no longer fits beside the logo. Tablets/small
   laptops get a two-row header (768-1279px); phones a Menu button (<768px).
   Both keep the header and pill at the top while the page scrolls. Range
   syntax (width < 1280px) leaves no gap at fractional widths (e.g. 767.33px
   on a 150%-scaled screen). ---- */
@media (width < 1280px) {
  /* The header stays at the top while the page scrolls. */
  .hx-header {
    position: sticky;
    top: 0;
    z-index: 30;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .admin-bar .hx-header {
    top: 32px;
  }

  .hx-wordmark {
    margin-right: auto;
  }

  .hx-book {
    position: static;
    order: 2;
    translate: none;
  }

  .hx-book:hover {
    transform: none;
  }

  /* Footer: badges get their own row. */
  .hx-footer-row {
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "hours visit connect"
      "commit commit commit";
  }

  .hx-group-connect {
    justify-self: end;
  }

  .hx-group-commitments {
    justify-self: start;
  }
}

/* The WordPress admin bar is 46px tall on narrow screens and scrolls away on phones. */
@media (max-width: 782px) {
  .admin-bar .hx-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .hx-header {
    top: 0;
  }
}

/* ---- Phones and portrait tablets: 921px and below, the live site's breakpoint ---- */
@media (max-width: 921px) {
  :root {
    --hx-page-width: 100%;
  }

  /* The homepage scrolls instead of fitting one screen. */
  .hx-screen,.admin-bar .hx-screen {
    height: auto;
    min-height: 100svh;
  }

  .hx-header {
    gap: 10px;
    padding: 10px 16px;
  }

  .hx-wordmark img {
    width: 104px;
  }

  .hx-book {
    gap: 6px;
    padding: 8px 14px;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }

  .hx-book svg {
    width: 16px;
    height: 16px;
  }

  .hx-book svg.hx-ext {
    display: none;
  }

  .hx-menu-toggle {
    padding: 8px 12px;
  }

  /* Homepage: pentacle full width, caption, service links and $25 seal below it. */
  .hx-main {
    flex: none;
    padding: 16px;
    background-size: 100% 100%,cover;
  }

  .hx-star {
    flex: none;
  }

  .hx-star-art {
    flex: none;
    min-height: 0;
    height: auto;
    aspect-ratio: 800 / 758;
  }

  h1.hx-star-caption {
    /* One line on phones: 26px where it fits, smaller on narrow screens
       (about 21px on a 390px phone). */
    font-size: min(26px,5.3vw);
    white-space: nowrap;
  }

  .hx-star-instructions {
    font-size: 14px;
  }

  .hx-service-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 4px;
  }

  .hx-main .hx-service-links a {
    padding: 8px 16px;
    border: 1px solid rgba(238,226,205,.7);
    border-radius: 999px;
    background: rgba(24,24,25,.65);
    color: #eee2cd;
    font-size: 15px;
  }

  .hx-main .hx-service-links a:hover {
    border-color: #eee2cd;
    color: #fff;
  }

  .hx-promo-badge {
    position: relative;
    left: auto;
    bottom: auto;
    display: block;
    margin: 20px auto 8px;
  }

  /* Footer stacks: hours + visit, commitments, connect, copyright. */
  .hx-footer {
    padding: 20px 16px;
    border-left: 0;
    border-right: 0;
  }

  .hx-footer-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "hours visit"
      "commit commit"
      "connect connect";
    gap: 20px 32px;
  }

  .hx-group-connect {
    justify-self: start;
  }

  .hx-certifications {
    flex-wrap: wrap;
    gap: 16px 28px;
  }

  .hx-badge {
    padding: 0;
  }

  .hx-badge + .hx-badge {
    border-left: 0;
  }

  .hx-social {
    gap: 24px;
  }

  .hx-social a {
    width: 24px;
    height: 24px;
  }

  .hx-footer .hx-copyright {
    margin-top: 20px;
  }
}

/* ---- Touch screens (no hover), any width: show things in color ---- */
@media (hover: none) {
  .hx-hover-only {
    display: none;
  }

  .hx-promo-badge {
    filter: drop-shadow(0 0 10px rgba(246,223,174,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.6));
  }
}


/* ---- Tablets and small laptops (768-1279px): two-row header. Logo and pill on
   top, the full menu on its own row underneath. ---- */
@media (768px <= width < 1280px) {
  .hx-header {
    flex-wrap: wrap;
    row-gap: 4px;
    padding-bottom: 0;
  }

  .hx-wordmark img {
    width: 120px;
  }

  .hx-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: center;
    gap: clamp(14px, 2.4vw, 32px);
    padding: 0;
    border-top: 1px solid #c8bba6;
    font-size: 16px;
  }

  .hx-nav .hx-nav-link {
    padding: 10px 0;
  }
}

/* ---- Phones (under 768px): Menu button + drop-down panel, with accordion
   submenus (like the live site's mobile menu). ---- */
@media (width < 768px) {
  .hx-menu-toggle {
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid #8c7c65;
    border-radius: 999px;
    background: transparent;
    color: var(--hx-ink);
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
  }

  .hx-menu-toggle:hover {
    color: var(--hx-red);
  }

  .hx-menu-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  /* The menu drops down as a panel below the header. */
  .hx-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-height: calc(100svh - 70px);
    overflow-y: auto;
    padding: 4px 16px 16px;
    background: var(--hx-ivory);
    border-bottom: 1px solid var(--hx-rule);
    box-shadow: 0 10px 20px rgba(0,0,0,.35);
    font-size: 18px;
  }

  .hx-nav-open .hx-nav {
    display: flex;
  }

  .hx-nav .hx-nav-link {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid var(--hx-rule);
  }

  /* Accordion submenus: tap the label (chevron) to expand. */
  .hx-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .hx-chevron {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .2s;
  }

  .hx-open .hx-chevron {
    transform: rotate(180deg);
  }

  .hx-menu {
    position: static;
  }

  .hx-header .hx-dropdown {
    position: static;
    min-width: 0;
    padding: 4px 0 8px 16px;
    border: 0;
    background: transparent;
  }

  /* No hover-opening here; only the accordion state counts. */
  .hx-menu:hover > .hx-dropdown,.hx-menu:focus-within > .hx-dropdown {
    display: none;
  }

  .hx-menu.hx-open > .hx-dropdown {
    display: block;
  }

  .hx-header .hx-dropdown a {
    padding: 10px 0;
    font-size: 16px;
  }

  .hx-header .hx-dropdown a:hover {
    background: none;
  }
}

/* Tablets and unfolded phones (601–921px) read the ribbons fine; the service
   buttons are for phone-width screens only. */
@media (min-width: 601px) {
  .hx-service-links {
    display: none;
  }
}

/* Touch screens with the full menu (768px and wider): no hover, so the
   #ExtraordinaryHair / #UnmistakablyYou dropdowns open and close on tap. */
@media (hover: none) and (min-width: 768px) {
  .hx-menu:hover > .hx-dropdown,.hx-menu:focus-within > .hx-dropdown {
    display: none;
  }

  .hx-menu.hx-open > .hx-dropdown {
    display: block;
  }
}

/* ---- Sustainability page shortcodes: [hairetics_water_saved] and
   [hairetics_green_circle] ---- */
.hx-counter {
  margin: 16px 0;
  padding: 24px;
  border: 1px solid #c9a05a;
  border-radius: 8px;
  background: linear-gradient(135deg,#123a3a,#0b2224);
  color: #e2d8c6;
  text-align: center;
}

.hx-counter-value {
  font: 54px/1.1 'MedievalSharp',serif;
  color: #f6dfae;
  letter-spacing: 2px;
}

.hx-counter-label {
  margin-top: 6px;
  font-family: 'EB Garamond',serif;
  font-weight: 600;
  font-size: 18px;
}

.hx-impact-stats {
  /* Flex, so the category tiles always stretch to fill the row, however
     many there are. */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0;
  font-family: 'EB Garamond',serif;
  font-weight: 600;
}

.hx-impact-stats > div {
  flex: 1 1 120px;
  padding: 16px 12px;
  border: 1px solid #5a514a;
  border-radius: 8px;
  text-align: center;
}

.hx-impact-value {
  display: block;
  font: 24px/1.2 'MedievalSharp',serif;
  white-space: nowrap;
}

.hx-impact-label {
  display: block;
  margin-top: 4px;
  font-size: 15px;
}

.hx-impact-stats > .hx-impact-total {
  flex-basis: 100%;
  padding: 22px 16px;
  border-color: #c9a05a;
  background: linear-gradient(135deg,#123a3a,#0b2224);
}

.hx-impact-total .hx-impact-value {
  font-size: 48px;
  color: #f6dfae;
}

.hx-impact-asof {
  flex-basis: 100%;
  margin: 0;
  font-size: 14px;
  opacity: .75;
  text-align: center;
}

@media (width < 768px) {
  .hx-impact-stats > div {
    flex-basis: 40%;
  }

  .hx-counter-value {
    font-size: 40px;
  }
}

/* ---- Sub-pages (every page except the homepage): the look of the prototype's
   stub pages (css/site.css, "Stub pages"). The pentacle drawing, faded, tiled in
   a half-drop pattern and pinned to the window; the homepage hair as a banner
   across the top fading into it; the content on a dark panel down the middle.
   The tile is images/pentacle-combs-tile.svg (five woven silver combs, added
   Oct 2026), inlined here; its opacity is turned down to match the old tile. ---- */
body:not(.hx-home) {
  --hx-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22800%22 height=%22800%22 viewBox=%220 -45 800 800%22%3E%3Cg opacity=%22.4%22%3E%3Cdefs%3E%3ClinearGradient id=%22metal%22 x1=%220%22 y1=%22-13%22 x2=%220%22 y2=%2221%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%23777872%22/%3E%3Cstop offset=%22.12%22 stop-color=%22%23d8d8ce%22/%3E%3Cstop offset=%22.23%22 stop-color=%22%23f3f1e5%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23a9aaa2%22/%3E%3Cstop offset=%22.48%22 stop-color=%22%23d9d9d0%22/%3E%3Cstop offset=%22.86%22 stop-color=%22%23aaa99e%22/%3E%3Cstop offset=%221%22 stop-color=%22%23eeece0%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22ring-silver%22 x1=%22150%22 y1=%22105%22 x2=%22650%22 y2=%22605%22 gradientUnits=%22userSpaceOnUse%22%3E%3Cstop stop-color=%22%237d7f79%22/%3E%3Cstop offset=%22.25%22 stop-color=%22%23e8e6da%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%239c9d94%22/%3E%3Cstop offset=%22.7%22 stop-color=%22%23eeecdf%22/%3E%3Cstop offset=%221%22 stop-color=%22%2383857d%22/%3E%3C/linearGradient%3E%3Cpath id=%22comb-shape%22 d=%22M 6 -13 H 453.528 Q 459.528 -13 459.528 -7 V 17 Q 459.528 21 455.528 21 Q 452.528 21 452.528 17 L 451.528 -2 H 439.08 L 438.38 18 Q 437.33 21 436.28 18 L 435.58 -2 H 430.131 L 429.431 18 Q 428.381 21 427.331 18 L 426.631 -2 H 421.183 L 420.483 18 Q 419.433 21 418.383 18 L 417.683 -2 H 412.234 L 411.534 18 Q 410.484 21 409.434 18 L 408.734 -2 H 403.286 L 402.586 18 Q 401.536 21 400.486 18 L 399.786 -2 H 394.337 L 393.637 18 Q 392.587 21 391.537 18 L 390.837 -2 H 385.389 L 384.689 18 Q 383.639 21 382.589 18 L 381.889 -2 H 376.44 L 375.74 18 Q 374.69 21 373.64 18 L 372.94 -2 H 367.492 L 366.792 18 Q 365.742 21 364.692 18 L 363.992 -2 H 358.543 L 357.843 18 Q 356.793 21 355.743 18 L 355.043 -2 H 349.595 L 348.895 18 Q 347.845 21 346.795 18 L 346.095 -2 H 340.646 L 339.946 18 Q 338.896 21 337.846 18 L 337.146 -2 H 331.698 L 330.998 18 Q 329.948 21 328.898 18 L 328.198 -2 H 322.749 L 322.049 18 Q 320.999 21 319.949 18 L 319.249 -2 H 313.801 L 313.101 18 Q 312.051 21 311.001 18 L 310.301 -2 H 304.852 L 304.152 18 Q 303.102 21 302.052 18 L 301.352 -2 H 295.904 L 295.204 18 Q 294.154 21 293.103 18 L 292.404 -2 H 286.955 L 286.255 18 Q 285.205 21 284.155 18 L 283.455 -2 H 278.007 L 277.307 18 Q 276.257 21 275.207 18 L 274.507 -2 H 269.058 L 268.358 18 Q 267.308 21 266.258 18 L 265.558 -2 H 260.11 L 259.41 18 Q 258.36 21 257.31 18 L 256.61 -2 H 251.161 L 250.461 18 Q 249.411 21 248.361 18 L 247.661 -2 H 242.213 L 241.513 18 Q 240.463 21 239.413 18 L 238.713 -2 H 233.264 L 232.564 18 Q 231.514 21 230.464 18 L 229.764 -2 H 224.316 L 223.616 18 Q 222.566 21 221.516 18 L 220.816 -2 H 215.367 L 214.667 18 Q 213.617 21 212.567 18 L 211.867 -2 H 206.419 L 205.719 18 Q 204.669 21 203.619 18 L 202.919 -2 H 197.47 L 196.77 18 Q 195.72 21 194.67 18 L 193.97 -2 H 188.522 L 187.822 18 Q 186.772 21 185.722 18 L 185.022 -2 H 179.573 L 178.873 18 Q 177.823 21 176.773 18 L 176.073 -2 H 170.625 L 169.925 18 Q 168.875 21 167.825 18 L 167.125 -2 H 161.676 L 160.976 18 Q 159.926 21 158.876 18 L 158.176 -2 H 152.728 L 152.028 18 Q 150.978 21 149.928 18 L 149.228 -2 H 143.779 L 143.079 18 Q 142.029 21 140.979 18 L 140.279 -2 H 134.831 L 134.131 18 Q 133.081 21 132.031 18 L 131.331 -2 H 125.882 L 125.182 18 Q 124.132 21 123.082 18 L 122.382 -2 H 116.934 L 116.234 18 Q 115.184 21 114.134 18 L 113.434 -2 H 107.985 L 107.285 18 Q 106.235 21 105.185 18 L 104.485 -2 H 99.037 L 98.337 18 Q 97.287 21 96.237 18 L 95.537 -2 H 90.088 L 89.388 18 Q 88.338 21 87.288 18 L 86.588 -2 H 81.139 L 80.439 18 Q 79.389 21 78.34 18 L 77.639 -2 H 72.191 L 71.491 18 Q 70.441 21 69.391 18 L 68.691 -2 H 63.243 L 62.543 18 Q 61.493 21 60.443 18 L 59.743 -2 H 54.294 L 53.594 18 Q 52.544 21 51.494 18 L 50.794 -2 H 45.346 L 44.645 18 Q 43.596 21 42.546 18 L 41.846 -2 H 36.397 L 35.697 18 Q 34.647 21 33.597 18 L 32.897 -2 H 27.449 L 26.749 18 Q 25.699 21 24.649 18 L 23.949 -2 H 18.5 L 17.8 18 Q 16.75 21 15.7 18 L 15 -2 H 8 L 7 17 Q 7 21 4 21 Q 0 21 0 17 V -7 Q 0 -13 6 -13 Z%22/%3E%3Cmask id=%22weave-0%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 style=%22mask-type:luminance%22%3E%3Crect x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 fill=%22white%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(255.526 549.646) rotate(-72)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(170.236 277.746) rotate(0)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3C/mask%3E%3Cmask id=%22weave-1%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 style=%22mask-type:luminance%22%3E%3Crect x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 fill=%22white%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(402.472 112.608) rotate(72)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(631.292 282.448) rotate(144)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3C/mask%3E%3Cmask id=%22weave-2%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 style=%22mask-type:luminance%22%3E%3Crect x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 fill=%22white%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(540.474 552.552) rotate(-144)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(255.526 549.646) rotate(-72)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3C/mask%3E%3Cmask id=%22weave-3%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 style=%22mask-type:luminance%22%3E%3Crect x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 fill=%22white%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(170.236 277.746) rotate(0)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(402.472 112.608) rotate(72)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3C/mask%3E%3Cmask id=%22weave-4%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 style=%22mask-type:luminance%22%3E%3Crect x=%220%22 y=%22-45%22 width=%22800%22 height=%22800%22 fill=%22white%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(631.292 282.448) rotate(144)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3Cuse href=%22%23comb-shape%22 transform=%22translate(540.474 552.552) rotate(-144)%22 fill=%22black%22 stroke=%22black%22 stroke-width=%222.4%22 stroke-linejoin=%22round%22/%3E%3C/mask%3E%3C/defs%3E%3Cg id=%22comb-pentacle%22 opacity=%220.4%22%3E%3Ccircle cx=%22400%22 cy=%22355%22 r=%22250%22 fill=%22none%22 stroke=%22url(%23ring-silver)%22 stroke-width=%226%22/%3E%3Ccircle cx=%22400%22 cy=%22355%22 r=%22250%22 fill=%22none%22 stroke=%22%23f7f5e7%22 stroke-width=%22.7%22 opacity=%22.6%22/%3E%3Cg id=%22comb-1%22 mask=%22url(%23weave-0)%22%3E%3Cg transform=%22translate(402.472 112.608) rotate(72)%22%3E%3Cuse href=%22%23comb-shape%22 fill=%22url(%23metal)%22 stroke=%22%2372746c%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 8 -10.2 H 451.528%22 stroke=%22%23fffdf1%22 stroke-width=%22.6%22 opacity=%22.65%22/%3E%3Cpath d=%22M 8 -6.7 H 451.528 M 8 -8.4 H 451.528%22 stroke=%22%2362655e%22 stroke-width=%22.3%22 opacity=%22.3%22/%3E%3C/g%3E%3C/g%3E%3Cg id=%22comb-2%22 mask=%22url(%23weave-1)%22%3E%3Cg transform=%22translate(540.474 552.552) rotate(-144)%22%3E%3Cuse href=%22%23comb-shape%22 fill=%22url(%23metal)%22 stroke=%22%2372746c%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 8 -10.2 H 451.528%22 stroke=%22%23fffdf1%22 stroke-width=%22.6%22 opacity=%22.65%22/%3E%3Cpath d=%22M 8 -6.7 H 451.528 M 8 -8.4 H 451.528%22 stroke=%22%2362655e%22 stroke-width=%22.3%22 opacity=%22.3%22/%3E%3C/g%3E%3C/g%3E%3Cg id=%22comb-3%22 mask=%22url(%23weave-2)%22%3E%3Cg transform=%22translate(170.236 277.746) rotate(0)%22%3E%3Cuse href=%22%23comb-shape%22 fill=%22url(%23metal)%22 stroke=%22%2372746c%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 8 -10.2 H 451.528%22 stroke=%22%23fffdf1%22 stroke-width=%22.6%22 opacity=%22.65%22/%3E%3Cpath d=%22M 8 -6.7 H 451.528 M 8 -8.4 H 451.528%22 stroke=%22%2362655e%22 stroke-width=%22.3%22 opacity=%22.3%22/%3E%3C/g%3E%3C/g%3E%3Cg id=%22comb-4%22 mask=%22url(%23weave-3)%22%3E%3Cg transform=%22translate(631.292 282.448) rotate(144)%22%3E%3Cuse href=%22%23comb-shape%22 fill=%22url(%23metal)%22 stroke=%22%2372746c%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 8 -10.2 H 451.528%22 stroke=%22%23fffdf1%22 stroke-width=%22.6%22 opacity=%22.65%22/%3E%3Cpath d=%22M 8 -6.7 H 451.528 M 8 -8.4 H 451.528%22 stroke=%22%2362655e%22 stroke-width=%22.3%22 opacity=%22.3%22/%3E%3C/g%3E%3C/g%3E%3Cg id=%22comb-5%22 mask=%22url(%23weave-4)%22%3E%3Cg transform=%22translate(255.526 549.646) rotate(-72)%22%3E%3Cuse href=%22%23comb-shape%22 fill=%22url(%23metal)%22 stroke=%22%2372746c%22 stroke-width=%22.45%22/%3E%3Cpath d=%22M 8 -10.2 H 451.528%22 stroke=%22%23fffdf1%22 stroke-width=%22.6%22 opacity=%22.65%22/%3E%3Cpath d=%22M 8 -6.7 H 451.528 M 8 -8.4 H 451.528%22 stroke=%22%2362655e%22 stroke-width=%22.3%22 opacity=%22.3%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background: #181819;
}

body:not(.hx-home)::before {
  content: "";
  position: fixed;
  inset: 0 calc((100% - var(--hx-page-width)) / 2);
  z-index: -1;
  background:
    var(--hx-tile) 0 0/420px 420px repeat,
    var(--hx-tile) 210px 210px/420px 420px repeat,
    #181819;
  pointer-events: none;
}

body:not(.hx-home) #page,
body:not(.hx-home) .site-content,
body:not(.hx-home) .site-content .ast-container {
  background: transparent;
}

body:not(.hx-home) .site-content {
  position: relative;
  width: var(--hx-page-width);
  margin: 0 auto;
  padding: 48px 5% 64px;
}

/* The hair banner; it scrolls with the page. */
body:not(.hx-home) .site-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 360px;
  background:
    linear-gradient(rgba(24,24,25,.35),rgba(24,24,25,.35)),
    url(images/photos/home_rosegold_bgd.jpg) center 30%/cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 35%,transparent);
  mask-image: linear-gradient(#000 35%,transparent);
  pointer-events: none;
}

body:not(.hx-home) .site-content .ast-container {
  position: relative;
  display: block;
  max-width: none;
  padding: 0;
}

/* The dark panel. */
body:not(.hx-home) #primary {
  float: none;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 48px 48px;
  background: rgba(24,24,25,.92);
  border: 1px solid #3a3634;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  font-size: 19px;
  line-height: 1.6;
  color: #e2d8c6;
}

body:not(.hx-home) #primary article,
body:not(.hx-home).ast-separate-container #primary .ast-article-single,
body:not(.hx-home).ast-separate-container #primary .ast-article-post {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Our page heading (functions.php, "Sub-page heading") replaces Astra's. */
body:not(.hx-home).page #primary .entry-header {
  display: none;
}

.hx-page-head {
  margin-bottom: 18px;
}

.hx-eyebrow {
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #eee2cd;
  text-shadow: 0 1px 2px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.8);
}

.hx-page-title {
  margin: 10px 0 0;
  font: 52px/1.1 'MedievalSharp',serif;
  letter-spacing: 0;
  color: #eee2cd;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

body:not(.hx-home) #primary .entry-content h2 {
  margin: 40px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #5a514a;
  font: 28px/1.2 'MedievalSharp',serif;
  color: #eee2cd;
}

body:not(.hx-home) #primary .entry-content :is(p,li) a:not(.wp-block-button__link) {
  color: #f6dfae;
  text-decoration: underline;
  text-decoration-color: #a01d21;  /* brand red */
  text-underline-offset: 3px;
  transition: color .2s,text-decoration-color .2s;
}

/* Hover: brighter text over a bright brand-red underline. (Red text itself is
   too dark to read on the charcoal panel.) */
body:not(.hx-home) #primary .entry-content :is(p,li) a:not(.wp-block-button__link):is(:hover,:focus-visible) {
  color: #fff4e3;
  text-decoration-color: #c42a2f;  /* brand red, brighter */
  text-decoration-thickness: 2px;
}

@media (width < 768px) {
  body:not(.hx-home) .site-content {
    padding: 24px 12px 40px;
  }

  body:not(.hx-home) .site-content::before {
    height: 220px;
  }

  body:not(.hx-home) #primary {
    padding: 24px 18px 32px;
    font-size: 18px;
  }

  .hx-page-title {
    font-size: 38px;
  }
}

/* ---- Page building blocks. Give a block one of these class names in the
   editor (Block > Advanced > Additional CSS class) to use the look. ----
   hx-lede              larger opening paragraph
   hx-team              group of stylist cards (a grid)
     hx-stylist         one card: image (hx-stylist-photo), heading
                        (hx-stylist-name), paragraphs hx-stylist-role and
                        hx-stylist-specialties
   hx-commitments       group of commitments
     hx-commitment      one: small round image, heading, paragraph
   hx-cta-row           Buttons block; each button hx-cta (red) or
                        hx-cta hx-cta-secondary (outlined)
   hx-aside             small closing note */
body:not(.hx-home) #primary .hx-lede {
  font-size: 22px;
  color: #eee2cd;
}

.hx-team {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  align-items: start;
  gap: 28px;
  margin: 20px 0 8px;
}

/* WordPress spaces out every block after the first; in these grids that would
   push all but the first card down, so the rows wouldn't line up. */
body:not(.hx-home) #primary :is(.hx-team,.hx-stylist,.hx-commitments,.hx-commitment) {
  padding: 0;
}

body:not(.hx-home) #primary :is(.hx-team,.hx-commitments) > * {
  margin-block: 0;
}

.hx-stylist {
  text-align: center;
}

body:not(.hx-home) #primary .hx-stylist-photo {
  margin: 0 0 14px;
}

/* A linked photo's link is a block too, so linked and unlinked cards line up. */
.hx-stylist-photo a {
  display: block;
}

/* The photos get a soft ivory frame with rounded corners, and lift on hover. */
.hx-stylist-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #c8bba6;
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 8px 24px rgba(0,0,0,.6);
  transition: transform .3s,box-shadow .3s;
}

.hx-stylist-photo a:hover img,
.hx-stylist-photo a:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 0 0 8px #a01d21,0 12px 28px rgba(0,0,0,.7);
}

body:not(.hx-home) #primary .hx-stylist-name {
  margin: 0;
  font: 26px/1.2 'MedievalSharp',serif;
  color: #eee2cd;
}

body:not(.hx-home) #primary .entry-content .hx-stylist-name a {
  color: inherit;
  text-decoration: none;
}

body:not(.hx-home) #primary .entry-content .hx-stylist-name a:hover {
  color: #f6dfae;
}

body:not(.hx-home) #primary .hx-stylist-role {
  margin: 4px 0 0;
  font-size: 16px;
  letter-spacing: .5px;
  color: #c9a05a;
}

body:not(.hx-home) #primary .hx-stylist-specialties {
  margin: 6px 0 0;
  font-size: 16px;
  font-style: italic;
  color: #b9ad9a;
}

.hx-commitments {
  display: grid;
  gap: 24px;
  margin-top: 18px;
}

.hx-commitment {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 20px;
  align-items: start;
}

body:not(.hx-home) #primary .hx-commitment > .wp-block-image {
  grid-row: span 2;
  margin: 0;
}

.hx-commitment > .wp-block-image img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 6px;
  border: 2px solid #c8bba6;
  border-radius: 50%;
  background: #eee2cd;
}

body:not(.hx-home) #primary .hx-commitment h3 {
  margin: 0;
  font: 22px/1.3 'MedievalSharp',serif;
  color: #eee2cd;
}

body:not(.hx-home) #primary .hx-commitment p {
  margin: 0;
}

body:not(.hx-home) #primary .hx-cta-row {
  gap: 12px;
  margin: 32px 0 8px;
}

body:not(.hx-home) #primary .hx-cta .wp-block-button__link {
  padding: 12px 22px;
  border: 1px solid #861a1e;
  border-radius: 999px;
  background: #a01d21;  /* brand red */
  color: #fff4e3;
  font-size: 17px;
  text-decoration: none;
  transition: background .2s;
}

body:not(.hx-home) #primary .hx-cta .wp-block-button__link:hover {
  background: #c42a2f;  /* brand red, brighter */
}

body:not(.hx-home) #primary .hx-cta-secondary .wp-block-button__link {
  border-color: #c8bba6;
  background: transparent;
  color: #eee2cd;
}

body:not(.hx-home) #primary .hx-cta-secondary .wp-block-button__link:hover {
  border-color: #eee2cd;
  background: rgba(238,226,205,.08);
}

body:not(.hx-home) #primary .hx-aside {
  margin-top: 20px;
  font-size: 17px;
  color: #b9ad9a;
}

@media (width < 768px) {
  body:not(.hx-home) #primary .hx-stylist-name {
    font-size: 20px;
  }

  .hx-commitment {
    grid-template-columns: 52px 1fr;
  }

  .hx-commitment > .wp-block-image img {
    width: 52px;
    height: 52px;
  }
}

/* Phones: stylist cards turn sideways (photo left, details right) so the
   three of them fit on about one screen instead of three. */
@media (width < 600px) {
  .hx-team {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hx-stylist {
    display: grid;
    grid-template-columns: 112px 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 18px;
    align-items: start;
    text-align: left;
  }

  body:not(.hx-home) #primary .hx-stylist-photo {
    grid-row: 1 / span 4;
    margin: 0;
  }

  body:not(.hx-home) #primary .hx-stylist > :not(.hx-stylist-photo) {
    grid-column: 2;
  }

  .hx-stylist-photo img {
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(24,24,25,.6),0 6px 16px rgba(0,0,0,.6);
  }

  body:not(.hx-home) #primary .hx-stylist-name {
    font-size: 22px;
  }

  body:not(.hx-home) #primary .hx-stylist-role,
  body:not(.hx-home) #primary .hx-stylist-specialties {
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.4;
  }
}

/* "Book with us" always stays on one line; on the narrowest phones the logo and
   pill shrink a little so the logo, pill and Menu button fit side by side. */
.hx-book {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (width < 400px) {
  .hx-header {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .hx-wordmark img {
    width: 92px;
  }

  .hx-book {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* Astra's scroll-to-top button doesn't belong to this design and covered text
   on small screens. */
#ast-scroll-top {
  display: none !important;
}

/* ---- Stylist profile pages. Class names for blocks:
   hx-profile-hero      group: photo (image, class hx-stylist-photo) beside a
                        group hx-profile-intro (paragraphs hx-profile-pronouns,
                        hx-profile-role, a list hx-profile-links, buttons)
   hx-facts             group of Q&A sections, in an even grid
     hx-fact            one section: heading (h3) and a list ---- */
.hx-profile-hero {
  display: grid;
  grid-template-columns: minmax(180px,260px) 1fr;
  gap: 32px;
  align-items: center;
}

body:not(.hx-home) #primary :is(.hx-profile-hero,.hx-profile-intro,.hx-facts,.hx-fact) {
  padding: 0;
}

body:not(.hx-home) #primary :is(.hx-profile-hero,.hx-facts) > * {
  margin-block: 0;
}

body:not(.hx-home) #primary .hx-profile-intro > * {
  margin-block: 0 10px;
}

body:not(.hx-home) #primary .hx-profile-pronouns {
  font-style: italic;
  color: #b9ad9a;
}

body:not(.hx-home) #primary .hx-profile-role {
  font: 26px/1.25 'MedievalSharp',serif;
  color: #c9a05a;
}

body:not(.hx-home) #primary .hx-profile-links {
  padding: 0;
  list-style: none;
  font-size: 18px;
}

body:not(.hx-home) #primary .hx-profile-links li {
  margin: 2px 0;
}

body:not(.hx-home) #primary .hx-profile-intro .hx-cta-row {
  margin: 18px 0 0;
}

.hx-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  align-items: start;
  gap: 28px 40px;
  margin-top: 40px;
}

body:not(.hx-home) #primary .hx-fact h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #5a514a;
  font: 22px/1.3 'MedievalSharp',serif;
  color: #eee2cd;
}

body:not(.hx-home) #primary .hx-fact ul {
  margin: 0;
  padding-left: 1.1em;
}

body:not(.hx-home) #primary .hx-fact li {
  margin: 4px 0;
  font-size: 18px;
  line-height: 1.5;
}

body:not(.hx-home) #primary .hx-fact li::marker {
  color: #a01d21;  /* brand red */
}

@media (width < 600px) {
  .hx-profile-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
    text-align: center;
  }

  body:not(.hx-home) #primary .hx-profile-hero .hx-stylist-photo {
    width: min(240px,100%);
    grid-row: auto;
  }

  body:not(.hx-home) #primary .hx-profile-intro .hx-cta-row {
    justify-content: center;
  }

  .hx-facts {
    gap: 24px;
    margin-top: 32px;
  }
}

/* ---- Jump links (paragraph class hx-jump): a row of pill links to the
   page's sections, e.g. on Salon Policies. Headings with an anchor stop below
   the sticky header when jumped to. ---- */
html {
  scroll-behavior: smooth;
}

body:not(.hx-home) #primary .entry-content p.hx-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
  font-size: 15px;
  line-height: 1.3;
}

body:not(.hx-home) #primary .entry-content p.hx-jump a {
  padding: 6px 14px;
  border: 1px solid #5a514a;
  border-radius: 999px;
  background: rgba(238,226,205,.04);
  color: #eee2cd;
  text-decoration: none;
  transition: border-color .2s,background .2s,color .2s;
}

body:not(.hx-home) #primary .entry-content p.hx-jump a:hover,
body:not(.hx-home) #primary .entry-content p.hx-jump a:focus-visible {
  border-color: #a01d21;
  background: #a01d21;  /* brand red */
  color: #fff4e3;
}

body:not(.hx-home) #primary .entry-content :is(h2,h3)[id] {
  scroll-margin-top: var(--hx-anchor-offset,220px);  /* set by js/hairetics.js */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Plain h3 subheadings and bullet lists placed directly in a page (not
   inside an hx- group), e.g. the Privacy section of Salon Policies. ---- */
body:not(.hx-home) #primary .entry-content > h3 {
  margin: 28px 0 8px;
  font: 22px/1.3 'MedievalSharp',serif;
  color: #eee2cd;
}

body:not(.hx-home) #primary .entry-content > ul {
  margin: 0 0 16px;
  padding-left: 1.2em;
}

body:not(.hx-home) #primary .entry-content > ul li {
  margin: 4px 0;
}

body:not(.hx-home) #primary .entry-content > ul li::marker {
  color: #a01d21;  /* brand red */
}

/* ---- Section headings in warm antique gold (Heather's choice, Oct 17):
   softer than the brand red, which stays for buttons, links and bullets.
   Page titles are gold too; stylist names stay ivory. ---- */
body:not(.hx-home) .hx-page-title,
body:not(.hx-home) #primary .entry-content h2,
body:not(.hx-home) #primary .entry-content > h3,
body:not(.hx-home) #primary .hx-commitment h3,
body:not(.hx-home) #primary .hx-fact h3 {
  color: #c9a05a;
}

/* Menus "rest" after a menu link opens a new tab (js/hairetics.js): the
   browser still thinks the menu is hovered when you come back, so dropdowns
   stay hidden until the mouse moves on the page again. */
.hx-header.hx-menu-rest .hx-menu > .hx-dropdown {
  display: none !important;
}

/* ---- Contact page (named hx-contact-grid: .hx-contact is the footer's Visit
   column). Class names for blocks:
   hx-contact-grid      group: columns of contact details, each a group with
                        an h2 and paragraphs (or the [hairetics_hours] shortcode)
   hx-map               group around the map block, framed to match the photos */
.hx-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  align-items: start;
  gap: 24px 36px;
  margin: 8px 0 0;
}

body:not(.hx-home) #primary :is(.hx-contact-grid,.hx-contact-grid > *,.hx-map) {
  padding: 0;
}

body:not(.hx-home) #primary .hx-contact-grid > * {
  margin-block: 0;
}

body:not(.hx-home) #primary .hx-contact-grid h2 {
  margin: 0 0 10px;
  font-size: 24px;
}

body:not(.hx-home) #primary .hx-contact-grid p {
  margin: 0 0 10px;
}

body:not(.hx-home) #primary .hx-contact-grid .hx-hours {
  margin: 0;
}

body:not(.hx-home) #primary .hx-map {
  margin: 36px 0 8px;
  overflow: hidden;
  border: 2px solid #c8bba6;
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 8px 24px rgba(0,0,0,.6);
}

.hx-map .wpgmza_map {
  margin: 0 !important;
}

/* ---- Promotions. hx-offer: the offer in a brand-red box (paragraph or
   group). Numbered lists placed directly in a page (e.g. "How to claim it")
   get brand-red numbers, like the bullets. ---- */
body:not(.hx-home) #primary .hx-offer {
  margin: 8px 0 24px;
  padding: 22px 26px;
  border: 1px solid #c9a05a;
  border-radius: 8px;
  background: linear-gradient(135deg,#a01d21,#4f0c0f);  /* brand red to deep red */
  font: 26px/1.3 'MedievalSharp',serif;
  color: #f6dfae;
  text-align: center;
}

body:not(.hx-home) #primary .entry-content > ol {
  margin: 0 0 16px;
  padding-left: 1.4em;
}

body:not(.hx-home) #primary .entry-content > ol li {
  margin: 6px 0;
}

body:not(.hx-home) #primary .entry-content > ol li::marker {
  color: #c42a2f;  /* brand red, brighter: numbers need to read on charcoal */
  font-weight: 600;
}

@media (width < 768px) {
  body:not(.hx-home) #primary .hx-offer {
    padding: 18px 16px;
    font-size: 22px;
  }
}

/* Shown only after a MailerLite sign-up succeeds (js/hairetics.js). */
body:not(.hx-signed-up) .hx-after-signup {
  display: none !important;
}

/* Inside MailerLite's thank-you box: centred, a little space above. */
body:not(.hx-home) #primary .ml-form-successContent .hx-after-signup {
  justify-content: center;
  margin: 18px 0 4px;
}

/* MailerLite's thank-you message in the site's typefaces: heading like the
   page's section headings, message like body text, centred over the button.
   !important because MailerLite's own rules use the form's id. The blank
   paragraphs MailerLite adds as spacers are dropped. */
.ml-form-successContent h4 {
  font-family: MedievalSharp, serif !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  color: #c9a05a !important;
  text-align: center !important;
  margin: 0 0 14px !important;
}
.ml-form-successContent p,
.ml-form-successContent p span {
  font-family: "EB Garamond", serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #eee2cd !important;
  text-align: center !important;
}
.ml-form-successContent p:has(> br:only-child) {
  display: none !important;
}

/* MailerLite's sign-up form in the site's style: ivory fields in the body
   font, the consent text in the body font, and a pill button like the
   site's Book buttons. The reCAPTCHA box is Google's and can't be styled.
   #primary and the wrapper classes outrank MailerLite's id-based !important rules. */
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
  font-family: "EB Garamond", serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #2a2326 !important;
  background: #f6efe2 !important;
  border: 1px solid #c8bba6 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  height: auto !important;
}
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control::placeholder {
  color: #7a6e66 !important;
}
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control:focus {
  border-color: #c9a05a !important;
  outline: 2px solid #c9a05a !important;
  outline-offset: 1px;
}
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description,
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description p {
  font-family: "EB Garamond", serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: #cfc3ad !important;
}
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
  font-family: "EB Garamond", serif !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #fff !important;
  background: #a01d21 !important;
  border: 1px solid #861a1e !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  height: auto !important;
  transition: background-color 0.15s;
}
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover,
#primary .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:focus-visible {
  background: #c42a2f !important;
}

/* ---- Service pages (#ExtraordinaryHair). hx-service-hero: group with the
   service's round medallion photo (image block, from the theme's
   images/photos/circle-*.jpg) beside the intro paragraphs, as in the
   prototype's stub pages. ---- */
.hx-service-hero {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 8px;
}

body:not(.hx-home) #primary :is(.hx-service-hero,.hx-service-hero > *) {
  padding: 0;
}

body:not(.hx-home) #primary .hx-service-hero > * {
  margin-block: 0;
}

body:not(.hx-home) #primary .hx-service-hero p {
  margin: 0 0 10px;
}

body:not(.hx-home) #primary .hx-service-hero p:last-child {
  margin-bottom: 0;
}

.hx-service-hero > .wp-block-image img {
  display: block;
  width: 150px;
  height: 150px;
  border: 2px solid #c8bba6;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 6px 20px rgba(0,0,0,.6);
}

@media (width < 600px) {
  .hx-service-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: start;
  }

  .hx-service-hero > .wp-block-image img {
    width: 110px;
    height: 110px;
  }
}

/* hx-price: a "Starting at $…" note beside a service's heading (a span in
   the h3), in the body font so it reads as a note, not part of the name.
   Right-aligned; on a narrow screen it wraps under the name, still right. */
body:not(.hx-home) #primary h3:has(> .hx-price) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
}
body:not(.hx-home) #primary .hx-price {
  margin-left: auto;
  font-family: "EB Garamond", serif;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: #c9a05a;
}

/* hx-service-book: a small "Book now" button under each service, linking to
   Vagaro's booking page with that service already chosen
   (book-now?serviceid=<Vagaro service id>). */
body:not(.hx-home) #primary .hx-service-book {
  margin: -4px 0 26px;
}
body:not(.hx-home) #primary .hx-service-book .wp-block-button__link {
  font-size: 15px;
  padding: 6px 16px;
}

/* hx-service-item: one service with its photo (the one Heather set on Vagaro)
   to the left of its heading, description and Book now button. */
body:not(.hx-home) #primary .hx-service-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 22px;
  align-items: start;
  margin: 28px 0 0;
  padding: 0;
}
body:not(.hx-home) #primary .hx-service-item h3 {
  margin: 0 0 8px;
  font: 22px/1.3 'MedievalSharp',serif;
  color: #c9a05a;
}
/* WordPress puts block spacing above the text column; drop it so the photo's
   top lines up with the top of the service name's letters. */
body:not(.hx-home) #primary .hx-service-item > * {
  margin-top: 0;
}
body:not(.hx-home) #primary .hx-service-item .hx-service-img {
  margin: 5px 0 0;
}
body:not(.hx-home) #primary .hx-service-img img {
  display: block;
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px solid #c8bba6;
  border-radius: 12px;
}
/* A tall photo whose subject sits near the top (an updo, say): give the image
   block the class hx-crop-top and the square thumbnail keeps the top of the
   photo instead of its middle. The full photo still shows when enlarged. */
body:not(.hx-home) #primary .hx-service-img.hx-crop-top img {
  object-position: 50% 0;
}
/* A service with no photo on Vagaro: its text still lines up with the
   services that have one. */
body:not(.hx-home) #primary .hx-service-item:not(:has(> .hx-service-img, > .hx-service-photos)) {
  grid-template-columns: 1fr;
  padding-left: 142px;
}
@media (width < 600px) {
  body:not(.hx-home) #primary .hx-service-item {
    grid-template-columns: 76px 1fr;
    gap: 14px;
  }
  body:not(.hx-home) #primary .hx-service-item:not(:has(> .hx-service-img, > .hx-service-photos)) {
    grid-template-columns: 1fr;
    padding-left: 90px;
  }
  body:not(.hx-home) #primary .hx-service-img img {
    width: 76px;
    height: 76px;
  }
}

/* ---- hx-split: text beside a photo (group: a group of text, then an image
   block with class hx-photo), e.g. the salon photo on Contact. The photo
   gets the same rounded ivory frame as the stylist photos. ---- */
.hx-split {
  display: grid;
  grid-template-columns: 1fr minmax(200px,280px);
  gap: 32px;
  align-items: start;
}

body:not(.hx-home) #primary :is(.hx-split,.hx-split > *) {
  padding: 0;
}

body:not(.hx-home) #primary .hx-split > * {
  margin-block: 0;
}

body:not(.hx-home) #primary .hx-split > div > :first-child {
  margin-top: 0;
}

/* A map in a split row: the row takes the map's spacing; the photo goes on
   the left (order) and is cropped to the map's height. Phones: stacked,
   photo first, at its own shape. */
body:not(.hx-home) #primary .hx-split:has(> .hx-map) {
  margin: 36px 0 8px;
  grid-template-columns: minmax(200px,280px) 1fr;
  align-items: stretch;
}

body:not(.hx-home) #primary .hx-split:has(> .hx-map) > .hx-photo {
  order: -1;
  height: 100%;
}

body:not(.hx-home) #primary .hx-split:has(> .hx-map) > .hx-photo img {
  height: 100%;
  object-fit: cover;
}

@media (width < 768px) {
  body:not(.hx-home) #primary .hx-split:has(> .hx-map) {
    grid-template-columns: 1fr;
  }

  body:not(.hx-home) #primary .hx-split:has(> .hx-map) > .hx-photo img {
    height: auto;
  }
}

body:not(.hx-home) #primary .hx-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid #c8bba6;
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 8px 24px rgba(0,0,0,.6);
}

/* A small caption under a framed photo (e.g. the Green Circle certificate). */
body:not(.hx-home) #primary .hx-photo figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
  color: #b9ad98;
  text-align: center;
}

@media (width < 768px) {
  .hx-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body:not(.hx-home) #primary .hx-split .hx-photo {
    max-width: 320px;
  }
}

/* ---- Gallery (/gallery/): the Instagram Feed plugin (Smash Balloon) in the
   site's look: account name in the heading font, bio in the body font, and
   the buttons as the site's pills (Follow in red, Load More outlined).
   !important because the plugin sets these inline from its own settings. */
#primary #sb_instagram .sbi_header_text h3 {
  font: 22px/1.3 'MedievalSharp', serif !important;
  color: #c9a05a !important;
}
#primary #sb_instagram .sbi_bio {
  font-family: "EB Garamond", serif !important;
  font-size: 16px !important;
  color: #eee2cd !important;
}
#primary #sb_instagram #sbi_load .sbi_load_btn,
#primary #sb_instagram #sbi_load .sbi_follow_btn a {
  font-family: "EB Garamond", serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
}
#primary #sb_instagram #sbi_load .sbi_follow_btn a {
  color: #fff !important;
  background: #a01d21 !important;
  border: 1px solid #861a1e !important;
}
#primary #sb_instagram #sbi_load .sbi_follow_btn a:hover {
  background: #c42a2f !important;
}
/* The plugin's hover/focus glow is a blue inset shadow; replace it with the
   site's brighter red (above) and a gold keyboard-focus ring. */
#primary #sb_instagram #sbi_load .sbi_follow_btn a,
#primary #sb_instagram #sbi_load .sbi_load_btn {
  box-shadow: none !important;
}
#primary #sb_instagram #sbi_load .sbi_follow_btn a:focus-visible,
#primary #sb_instagram #sbi_load .sbi_load_btn:focus-visible {
  outline: 2px solid #c9a05a !important;
  outline-offset: 2px;
}
#primary #sb_instagram #sbi_load .sbi_load_btn {
  color: #eee2cd !important;
  background: transparent !important;
  border: 1px solid #c8bba6 !important;
}
#primary #sb_instagram #sbi_load .sbi_load_btn:hover {
  border-color: #c9a05a !important;
  color: #c9a05a !important;
}
/* ---- Careers: hx-perks (three cards: photo, heading, list) and hx-define
   (the "Heretic" and "Alchemy" dictionary entries). ---- */
body:not(.hx-home) #primary .hx-perks {
  display: grid;
  gap: 24px;
  margin: 18px 0 8px;
}
/* One card per row: heading and list on the left, photo on the right. */
body:not(.hx-home) #primary .hx-perk {
  display: grid;
  grid-template-columns: 1fr minmax(200px, 300px);
  grid-template-rows: auto 1fr;
  align-items: start;
  margin: 0;
  padding: 0;
  background: #221d1f;
  border: 1px solid #4a4245;
  border-radius: 14px;
  overflow: hidden;
}
body:not(.hx-home) #primary .hx-perk > .wp-block-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin: 0;
}
body:not(.hx-home) #primary .hx-perk > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}
body:not(.hx-home) #primary .hx-perk h3 {
  grid-column: 1;
  margin: 22px 24px 8px;
  font: 22px/1.3 'MedievalSharp', serif;
  color: #c9a05a;
}
body:not(.hx-home) #primary .hx-perk ul {
  grid-column: 1;
  margin: 0 24px 22px;
  padding-left: 18px;
}
body:not(.hx-home) #primary .hx-perk li {
  margin: 4px 0;
  line-height: 1.45;
}
body:not(.hx-home) #primary .hx-perk li::marker {
  color: #c42a2f;
}
body:not(.hx-home) #primary .hx-perk li strong {
  color: #c9a05a;
}
body:not(.hx-home) #primary .hx-define {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin: 40px 0 8px;
  padding-top: 28px;
  border-top: 1px solid #5a514a;
}
body:not(.hx-home) #primary .hx-define-entry p {
  margin: 0 0 6px;
}
body:not(.hx-home) #primary .hx-define-word {
  font: 26px/1.2 'MedievalSharp', serif;
  color: #c9a05a;
}
body:not(.hx-home) #primary .hx-define-pron,
body:not(.hx-home) #primary .hx-define-syn {
  font-size: 16px;
  color: #b9ad98;
}
/* Phones: photo on top, then the heading and list. */
@media (width < 600px) {
  body:not(.hx-home) #primary .hx-perk {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  body:not(.hx-home) #primary .hx-perk > .wp-block-image {
    grid-column: 1;
    grid-row: 1;
  }
  body:not(.hx-home) #primary .hx-perk > .wp-block-image img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ---- Salon blog (/blog/ and archives): posts as cards in the site's look.
   Astra builds the grid; the heading comes from functions.php. The category
   label is hidden (every post is in "Blogs"), and each card shows the
   excerpt's first paragraph, trimmed to four lines. ---- */
:is(body.blog, body.archive) #primary .hx-page-head {
  grid-column: 1 / -1;
  width: 100%;
}
:is(body.blog, body.archive) #primary article .ast-article-inner {
  height: 100%;
  background: #221d1f;
  border: 1px solid #4a4245;
  border-radius: 14px;
  overflow: hidden;
}
:is(body.blog, body.archive) #primary article .post-content {
  padding: 0 0 20px;
}
:is(body.blog, body.archive) #primary article .post-thumb-img-content img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
:is(body.blog, body.archive) #primary article .cat-links {
  display: none;
}
:is(body.blog, body.archive) #primary article .entry-title {
  margin: 16px 18px 6px;
  font: 21px/1.3 'MedievalSharp', serif;
}
:is(body.blog, body.archive) #primary article .entry-title a {
  color: #c9a05a;
}
:is(body.blog, body.archive) #primary article .entry-title a:hover {
  color: #e2bd7a;
}
:is(body.blog, body.archive) #primary article .entry-header,
:is(body.blog, body.archive) #primary article .ast-excerpt-container {
  margin-left: 18px;
  margin-right: 18px;
}
:is(body.blog, body.archive) #primary article .ast-excerpt-container p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  margin: 8px 0 0;
  font-size: 17px;
  line-height: 1.5;
}
:is(body.blog, body.archive) #primary article .ast-excerpt-container p ~ p {
  display: none;
}

/* Post bylines (blog cards and single posts): readable on the dark panel. */
body:not(.hx-home) #primary .entry-meta,
body:not(.hx-home) #primary .entry-meta a {
  font-size: 15px;
  color: #b9ad98;
}

/* Single posts: title in gold like page titles; next/previous links. */
body.single-post #primary .entry-title {
  color: #c9a05a;
}
body.single-post #primary .post-navigation a {
  color: #c9a05a;
}
body.single-post #primary .post-navigation a:hover {
  color: #e2bd7a;
}

/* "Back to the salon blog" links on single posts (functions.php). */
body.single-post #primary .hx-back-link {
  margin: 0 0 18px;
  font-size: 16px;
}
body.single-post #primary .hx-back-link-bottom {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid #5a514a;
}
body.single-post #primary .hx-back-link a {
  color: #c9a05a;
  text-decoration: none;
}
body.single-post #primary .hx-back-link a:hover {
  color: #e2bd7a;
  text-decoration: underline;
}

/* ---- Art Shows: [hairetics_art_shows] cards (one per show post) and the
   past-shows photo gallery. ---- */
body:not(.hx-home) #primary .hx-show-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 18px 0 8px;
}
body:not(.hx-home) #primary .hx-show {
  display: block;
  background: #221d1f;
  border: 1px solid #4a4245;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
}
body:not(.hx-home) #primary .hx-show img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
body:not(.hx-home) #primary .hx-show-title {
  display: block;
  margin: 14px 18px 4px;
  font: 21px/1.3 'MedievalSharp', serif;
  color: #c9a05a;
}
body:not(.hx-home) #primary .hx-show:hover .hx-show-title {
  color: #e2bd7a;
}
body:not(.hx-home) #primary .hx-show-date {
  display: block;
  margin: 0 18px 16px;
  font-size: 15px;
  color: #b9ad98;
}
body:not(.hx-home) #primary .hx-art-gallery img {
  border-radius: 10px;
}

/* WPForms feedback form (Reviews and Feedback page), styled like the
   promotions sign-up: gold labels, ivory fields, a pill button. */
body:not(.hx-home) #primary .wpforms-container {
  max-width: 640px;
  margin: 8px 0 24px;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field {
  padding: 0 0 18px;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field-label {
  font-family: "EB Garamond", serif;
  font-size: 18px;
  font-weight: 500;
  color: #e2bd7a;
  margin-bottom: 6px;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-required-label {
  color: #e2bd7a;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field-description,
body:not(.hx-home) #primary .wpforms-container .wpforms-field-sublabel {
  font-size: 15px;
  color: #b9ad98;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field input:is([type=text], [type=email]),
body:not(.hx-home) #primary .wpforms-container .wpforms-field select,
body:not(.hx-home) #primary .wpforms-container .wpforms-field textarea {
  max-width: 100%;
  width: 100%;
  font-family: "EB Garamond", serif;
  font-size: 18px;
  font-weight: 500;
  color: #2a2326;
  background-color: #f6efe2;
  border: 1px solid #c8bba6;
  border-radius: 10px;
  padding: 10px 14px;
  height: auto;
  box-shadow: none;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field textarea {
  min-height: 150px;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field :is(input, select, textarea)::placeholder {
  color: #7a6e66;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field :is(input, select, textarea):focus {
  border-color: #c9a05a;
  outline: 2px solid #c9a05a;
  outline-offset: 1px;
  box-shadow: none;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field-checkbox li label {
  font-size: 17px;
  color: #ece4d6;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-field-checkbox input[type=checkbox] {
  accent-color: #a01d21;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-error {
  color: #ff9a8f;
  font-size: 15px;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-submit-container button[type=submit] {
  font-family: "EB Garamond", serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  background: #a01d21;
  border: 1px solid #861a1e;
  border-radius: 999px;
  padding: 12px 26px;
  height: auto;
  box-shadow: none;
  transition: background-color 0.15s;
}
body:not(.hx-home) #primary .wpforms-container .wpforms-submit-container button[type=submit]:hover,
body:not(.hx-home) #primary .wpforms-container .wpforms-submit-container button[type=submit]:focus-visible {
  background: #c42a2f;
}
body:not(.hx-home) #primary .wpforms-confirmation-container-full {
  background: rgba(201, 160, 90, 0.12);
  border: 1px solid #c9a05a;
  border-radius: 10px;
  color: #ece4d6;
  font-size: 18px;
  padding: 16px 20px;
}
body:not(.hx-home) #primary .wpforms-confirmation-container-full p {
  color: inherit;
  margin: 0;
}

/* Our salon photos (Who we are): the same framed look as the stylist photos. */
body:not(.hx-home) #primary .hx-salon-photos.wp-block-gallery {
  --wp--style--unstable-gallery-gap: 20px;
  gap: 20px;
  padding: 6px;
}
body:not(.hx-home) #primary .hx-salon-photos .wp-block-image {
  border: 2px solid #c8bba6;
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(24,24,25,.6),0 8px 24px rgba(0,0,0,.6);
  overflow: hidden;
}
body:not(.hx-home) #primary .hx-salon-photos .wp-block-image img {
  border-radius: 0;
}

/* "Book with us" panel: the pill opens it (js/hairetics.js), which places it
   under the pill with fixed positioning, so it works at every header layout. */
.hx-book svg.hx-chevron {
  display: block;
  width: 14px;
  height: 14px;
  margin-left: -2px;
  transition: transform .2s;
}
.hx-book[aria-expanded="true"] svg.hx-chevron {
  transform: rotate(180deg);
}
.hx-book-panel {
  position: fixed;
  z-index: 101;
  width: min(300px, calc(100vw - 24px));
  padding: 16px;
  background: #1f1c1d;
  border: 1px solid #c9a05a;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  color: #ece4d6;
  font-family: "EB Garamond", serif;
  text-align: left;
}
.hx-book-panel[hidden] {
  display: none;
}
.hx-book-panel svg {
  flex: none;
  width: 18px;
  height: 18px;
}
.hx-book-panel .hx-book-online {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--hx-red);
  border: 1px solid #861a1e;
  color: #fff4e3;
  font-size: 17px;
  text-decoration: none;
  transition: background .2s;
}
.hx-book-panel .hx-book-online:hover,
.hx-book-panel .hx-book-online:focus-visible {
  background: var(--hx-red-bright);
  color: #fff4e3;
}
.hx-book-panel .hx-book-online svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-book-panel .hx-book-online svg.hx-ext {
  width: 14px;
  height: 14px;
  margin-left: -2px;
}
.hx-book-tip {
  margin: 14px 2px 12px;
  font-size: 16px;
  line-height: 1.4;
  color: #ece4d6;
}
.hx-book-contact {
  display: grid;
  gap: 8px;
}
.hx-book-contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid #c9a05a;
  border-radius: 999px;
  color: #e2bd7a;
  font-size: 16px;
  text-decoration: none;
  transition: background .2s,color .2s;
}
.hx-book-contact a:hover,
.hx-book-contact a:focus-visible {
  background: #c9a05a;
  color: #181819;
}
.hx-book-contact svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.hx-book-contact strong {
  font-weight: 600;
  letter-spacing: .02em;
}
.hx-book-panel a:focus-visible {
  outline: 2px solid #e2bd7a;
  outline-offset: 3px;
}

/* CleanPowerSF: logo above its caption, so the commitments row stays one line
   tall and the one-screen homepage footer does not grow. */
.hx-badge-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hx-badge-stack img {
  display: block;
}

/* A brand logo on an ivory chip, readable on the dark page (Sustainability). */
body:not(.hx-home) #primary .hx-logo-chip img {
  width: 220px;
  height: auto;
  padding: 12px 18px;
  background: #eee2cd;
  border: 2px solid #c8bba6;
  border-radius: 12px;
}

/* Wide screens (1280px+): the four commitments sit in two rows of two
   (inclusion above, sustainability below), each kept to its two lines, so the
   footer stays as short as the Hours column and the homepage fits one screen. */
@media (min-width: 1280px) {
  .hx-certifications {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    row-gap: 2px;
  }
  .hx-footer .hx-badge p {
    white-space: nowrap;
  }
  .hx-badge:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .hx-badge:nth-child(even) {
    border-left: 1px solid var(--hx-rule);
  }
  .hx-badge-stack {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .hx-badge img[src*="greencircle"] {
    width: auto;
    height: 38px;
  }
}

/* "Our commitments" links to that section of Who we are; it looks like the
   other footer headings until hovered. */
.hx-footer-group h2 a {
  color: inherit;
  text-decoration: none;
}
.hx-footer-group h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Reviews slider (Trust.Reviews plugin): hide its "review us on Yelp" button.
   Yelp asks businesses not to request reviews; the page has its own
   "Find us on Yelp" link instead. */
.trustreviews-wr {
  display: none !important;
}

/* Date pickers (js/hairetics.js) on the ivory fields: a light calendar popup. */
body:not(.hx-home) #primary .wpforms-container .wpforms-field input[type=date] {
  max-width: 100%;
  width: 100%;
  font-family: "EB Garamond", serif;
  font-size: 18px;
  font-weight: 500;
  color: #2a2326;
  background-color: #f6efe2;
  border: 1px solid #c8bba6;
  border-radius: 10px;
  padding: 10px 14px;
  height: auto;
  box-shadow: none;
  color-scheme: light;
}

/* hx-service-more: extra photos for a service, a row of small square
   thumbnails under its description (a Gallery block with this class, images
   set to "Expand on click"). They always stay on one line, shrinking to fit
   on phones. */
body:not(.hx-home) #primary .hx-service-item .hx-service-more {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 88px);
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
body:not(.hx-home) #primary .hx-service-more .wp-block-image {
  width: auto !important;
  margin: 0;
}
body:not(.hx-home) #primary .hx-service-more img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid #c8bba6;
  border-radius: 10px;
}
body:not(.hx-home) #primary .hx-service-item .hx-service-more + .hx-service-book {
  margin-top: 12px;
}
/* On phones the row also uses the space under the service photo, so four
   thumbnails stay a comfortable size on one line. */
@media (width < 600px) {
  body:not(.hx-home) #primary .hx-service-item .hx-service-more {
    margin-left: -90px;
  }
}
/* hx-service-photos: a service with more than one photo. A group of image
   blocks (each with class hx-service-img) in place of the single photo; they
   stack in the photo column, the same size as a single service photo. */
body:not(.hx-home) #primary .hx-service-item .hx-service-photos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 5px 0 0;
}
body:not(.hx-home) #primary .hx-service-photos .hx-service-img {
  margin: 0;
}

/* Photo pop-up ("Expand on click" images, e.g. the Locs service photos):
   a dark backdrop to match the site instead of WordPress's white one. */
.wp-lightbox-overlay .scrim {
  background-color: #141213 !important;
}
.wp-lightbox-overlay :is(.close-button, .wp-lightbox-close-button) {
  color: #ece4d6;
  fill: #ece4d6 !important;  /* WordPress sets fill inline */
}

/* Photo zoom (js/hairetics.js: every service photo, plus images with class
   hx-zoom): the whole photo, uncropped, on a dark backdrop. The script marks
   each zoomable figure hx-zoomable. */
.hx-zoomable img {
  cursor: zoom-in;
}
.hx-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 18, 19, .96);
  cursor: zoom-out;
}
.hx-zoom-overlay[hidden] {
  display: none;
}
.hx-zoom-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}
.hx-zoom-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #ece4d6;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.hx-zoom-close:focus-visible {
  outline: 2px solid #e2bd7a;
  outline-offset: 2px;
}
html.hx-zoom-open {
  overflow: hidden;
}