/* Loaded after the copied theme CSS. The page runs in Dawn's "no-js" mode (see layout.tsx);
   these rules restore the few pieces that mode hides, driven by /js/site.js. */
.no-js slideshow-component .slideshow__controls.no-js-hidden { display: flex !important; }
.no-js slideshow-component .slider { padding-bottom: 0 !important; scrollbar-width: none; }
.no-js slideshow-component .slider::-webkit-scrollbar { display: none; }

/* Hunter 2026-10-06: remove the dark gap above the hero. The header floats over the page
   (position:absolute in the copied section CSS) but Dawn still reserves margin under it.
   Only on the PageFly pages (the menu pages), whose first section is a dark hero built to sit
   under the floating header. The old theme pages (about, contact, testimonials, online-store)
   keep the gap, or the white logo lands on light photos. */
body:has(main .__pf) .section-header { margin-bottom: 0 !important; }
/* Extensions on phones: the headline sits under the logo (it overlaps on the live site too). */
@media screen and (max-width: 749px) {
  body:has(main[data-route="/pages/extensions"]) main .__pf [data-pf-type="Section"]:first-of-type { padding-top: 180px !important; }
}

/* Phone sweep, Hunter 2026-10-16. Every rule below fixes copied PageFly CSS that looked broken
   on phones (most of it looked the same on the old Shopify site). */
/* PageFly rows use negative side margins; on phones a few poke past the screen edge and the
   whole page wobbles sideways. clip (not hidden) so nothing becomes a scroll box. */
main { overflow-x: clip; }
/* Book page form: the labels are drawn in the background colour (the placeholders do the
   talking) but their red asterisks still showed, floating under the fields. Keep the labels
   for screen readers only, and darken the placeholders so they're readable. */
#contact_form [data-pf-type="FormLabel"] { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#contact_form input::placeholder, #contact_form textarea::placeholder { color: #6f6d68; opacity: 1; }
/* FAQ: keep the arrow from sitting on top of long questions. */
[data-pf-type="Accordion3.Header"] > span { display: block; padding-right: 22px; }
/* Services hero: the consultation-form link was browser-default blue on a dark photo. */
main[data-route="/pages/services"] .__pf a:not([class]) { color: inherit; text-decoration: underline; }
@media screen and (max-width: 767px) {
  /* Home, above "What to expect": the photo kept its 709px desktop height at 219px wide, so it
     showed as a thin cropped strip. Give it its real shape. */
  main .__pf .pf-255_[data-pf-type="Image4"] { width: 75% !important; height: auto !important; aspect-ratio: 2 / 3; }
  /* Stylists intro: the text was pulled 100px down over the team photo. Stack them instead. */
  main[data-route="/pages/stylists"] .__pf .pf-33_ { margin: 0 0 20px !important; padding: 30px 0 10px !important; font-size: 14px !important; }
  /* Stylists: "Book now" and "Add to my waitlist" touched. */
  main[data-route="/pages/stylists"] .__pf [data-pf-type="Button2"] + [data-pf-type="Button2"] { margin-top: 12px !important; }
  /* Visit Us: the address headline ran into the logo. */
  main[data-route="/pages/visit-us"] .__pf .pf-11_ h1:first-of-type { margin-top: 60px !important; }
}

/* Admin preview bar (draft mode only, never on the live site). */
.tbe-preview-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483000;background:#222321;color:#fff;font:600 14px/1.4 "Open Sans",system-ui,sans-serif;padding:10px 18px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:calc(100% - 32px);text-align:center}
.tbe-preview-bar a{color:#C4C2DB;text-decoration:underline;margin-left:8px}

/* Privacy pass, Hunter 2026-10-16: privacy page, footer legal links, cookie banner (/js/consent.js). */
.tbe-legal { padding-top: 140px; padding-bottom: 60px; }
.tbe-legal h1 { margin-bottom: 1rem; }
.tbe-legal h2 { font-family: var(--font-body-family) !important; font-size: 2rem; font-weight: 700; letter-spacing: .04em; margin: 3.2rem 0 1rem; }
.tbe-legal .rte, .tbe-legal .rte li { font-size: 1.6rem; line-height: 1.6; }
.tbe-legal .rte a { color: inherit; text-decoration: underline; }
@media screen and (max-width: 749px) { .tbe-legal { padding-top: 110px; } }
.tbe-legal-links { margin: .6rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.tbe-legal-links a, .tbe-linkbtn { color: inherit; font: inherit; font-size: 1.3rem; text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
.tbe-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483600; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.4rem; padding: 1.6rem 2rem calc(1.6rem + env(safe-area-inset-bottom)); background: rgb(34, 35, 33); color: #fff; border-top: 1px solid rgb(196, 184, 204); font-family: var(--font-body-family); box-shadow: 0 -4px 16px rgba(0, 0, 0, .35); }
.tbe-consent__text { margin: 0; max-width: 64rem; font-size: 1.4rem; line-height: 1.5; }
.tbe-consent__text a { color: inherit; text-decoration: underline; }
.tbe-consent__buttons { display: flex; gap: 1.2rem; }
.tbe-consent__btn { min-width: 11rem; min-height: 44px; padding: 0 2rem; font: inherit; font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid #fff; cursor: pointer; }
.tbe-consent__btn:hover { background: #fff; color: rgb(34, 35, 33); }
.tbe-consent__btn:focus-visible, .tbe-linkbtn:focus-visible { outline: 2px solid rgb(196, 184, 204); outline-offset: 3px; }
.tbe-legal h1 { font-weight: 400; }
/* Accessibility pass 2026-10-16: her purple-grey small text (#8b7e94) was 3.55:1 on the cream, under
   WCAG AA's 4.5:1. The copied CSS now uses #74687d (4.87:1); this catches the inline spans in the
   page copy and her editable text. */
main span[style*="139, 126, 148"] { color: #74687d !important; }
/* Hunter 2026-10-16: the duplicate "Transformational blonding" card was removed from home; the one left spans its
   row as a featured card instead of sitting half-width next to an empty gap. */
main[data-route="/"] .__pf .pf-c:has(> .pf-265_) { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }