/*--------------------------------------------------------------
Henna House — logo image
(the text-based wordmark below has been replaced by the real logo
PNG via .site-logo-img. The header on index.html and the footer /
mobile nav on every page sit on dark backgrounds, so those use
assets/images/hh-logo.png (white title). The header on every OTHER
page sits on a cream background, so those use hh-logo-dark.png
instead. .site-logo-text rules are kept below only as a fallback
in case an image fails to load.)
--------------------------------------------------------------*/
.site-logo-img {
  display: block;
  height: 47px;
  width: auto;
}

@media (max-width: 400px) {
  .site-logo-img {
    height: 38px;
  }
}

.site-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--solox-heading-font, "Cormorant", serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--solox-black, #1c1a1d);
  text-transform: none;
  letter-spacing: 0.02em;
}

.site-logo-text small {
  display: block;
  font-family: var(--solox-special-font, "Alex Brush", cursive);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--solox-base, #c2a74e);
  text-transform: none;
}

.footer-widget__logo .site-logo-text,
.mobile-nav__content .logo-box .site-logo-text {
  color: var(--solox-white, #fff);
}

.footer-widget__logo .site-logo-text small,
.mobile-nav__content .logo-box .site-logo-text small {
  color: var(--solox-base, #c2a74e);
}

@media (max-width: 400px) {
  .site-logo-text {
    font-size: 21px;
  }
  .site-logo-text small {
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
Team cards — bio text + "coming soon" placeholder avatar
(added for the Meet the Team section on about.html)
--------------------------------------------------------------*/
.team-card__bio {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7em;
  color: var(--solox-text, #6e6b70);
}

.team-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background-color: var(--solox-gray, #f9f6f1);
  border: 1px solid var(--solox-border-color, #e8e3da);
}

.team-card__image--placeholder i {
  font-size: 54px;
  color: var(--solox-base, #c2a74e);
  opacity: 0.6;
}

.team-card__placeholder-note {
  margin: 10px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--solox-text, #6e6b70);
}

/*--------------------------------------------------------------
Time & pricing guide tables
(packages.html, services-grid.html, contact.html)
--------------------------------------------------------------*/
.price-guide {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
  background-color: var(--solox-white, #fff);
  border: 1px solid var(--solox-border-color, #e8e3da);
}

.price-guide caption {
  display: none;
}

.price-guide th,
.price-guide td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--solox-border-color, #e8e3da);
  font-size: 15px;
}

.price-guide thead th {
  background-color: var(--solox-black, #1c1a1d);
  color: var(--solox-white, #fff);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.price-guide tbody tr:last-child th,
.price-guide tbody tr:last-child td {
  border-bottom: none;
}

.price-guide tbody th {
  font-weight: 700;
  color: var(--solox-black, #1c1a1d);
  white-space: nowrap;
}

.price-guide td.price-guide__price {
  color: var(--solox-base, #c2a74e);
  font-weight: 700;
}

.price-guide-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
}

.price-guide-note {
  font-size: 14px;
  color: var(--solox-text, #6e6b70);
  margin: 0 0 40px;
}

/*--------------------------------------------------------------
Henna vs. Jagua color comparison cards (colors.html)
--------------------------------------------------------------*/
.color-compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin: 0 0 40px;
}

@media (max-width: 767px) {
  .color-compare {
    grid-template-columns: 1fr;
  }
}

.color-card {
  background-color: var(--solox-gray, #f9f6f1);
  border: 1px solid var(--solox-border-color, #e8e3da);
  border-radius: 4px;
  padding: 40px 35px;
}

.color-card__swatch {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 0 20px;
  border: 3px solid var(--solox-white, #fff);
  box-shadow: 0 0 0 1px var(--solox-border-color, #e8e3da);
}

.color-card--henna .color-card__swatch {
  background-color: #a3521f;
}

.color-card--jagua .color-card__swatch {
  background-color: #1f2a33;
}

.color-card__tagline {
  display: block;
  font-family: var(--solox-special-font, "Alex Brush", cursive);
  font-size: 28px;
  font-weight: 400;
  color: var(--solox-base, #c2a74e);
  margin: 0 0 -4px;
}

.color-card__title {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--solox-black, #1c1a1d);
  margin: 0 0 14px;
}

.color-card__text {
  font-size: 15px;
  line-height: 1.75em;
  color: var(--solox-text, #6e6b70);
  margin: 0 0 16px;
}

.color-card__label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--solox-black, #1c1a1d);
  margin: 18px 0 6px;
}

.color-card__label:first-of-type {
  margin-top: 0;
}

/*--------------------------------------------------------------
Upcoming Events — empty state (events.html)
--------------------------------------------------------------*/
.events-empty {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
  padding: 60px 40px;
  background-color: var(--solox-gray, #f9f6f1);
  border: 1px solid var(--solox-border-color, #e8e3da);
  border-radius: 4px;
}

.events-empty i {
  font-size: 44px;
  color: var(--solox-base, #c2a74e);
  margin: 0 0 20px;
  display: inline-block;
}

.events-empty h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--solox-black, #1c1a1d);
  text-transform: uppercase;
  margin: 0 0 14px;
}

.events-empty p {
  font-size: 15px;
  line-height: 1.75em;
  color: var(--solox-text, #6e6b70);
  margin: 0 0 26px;
}

.events-empty__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.event-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background-color: var(--solox-white, #fff);
  border: 1px solid var(--solox-border-color, #e8e3da);
  border-radius: 4px;
  padding: 26px 30px;
  margin: 0 0 20px;
}

.event-card__date {
  flex: 0 0 auto;
  width: 78px;
  text-align: center;
  background-color: var(--solox-black, #1c1a1d);
  color: var(--solox-white, #fff);
  border-radius: 4px;
  padding: 12px 0;
}

.event-card__date__month {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--solox-base, #c2a74e);
}

.event-card__date__day {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.event-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--solox-black, #1c1a1d);
  margin: 0 0 6px;
  text-transform: uppercase;
}

.event-card__meta {
  font-size: 14px;
  color: var(--solox-base, #c2a74e);
  margin: 0 0 8px;
}

.event-card__text {
  font-size: 15px;
  line-height: 1.7em;
  color: var(--solox-text, #6e6b70);
  margin: 0;
}

/*--------------------------------------------------------------
Interactive personal-appointment price slider (contact.html)
--------------------------------------------------------------*/
.price-slider {
  max-width: 560px;
  background-color: var(--solox-gray, #f9f6f1);
  border: 1px solid var(--solox-border-color, #e8e3da);
  border-radius: 4px;
  padding: 32px 35px 26px;
  margin: 0 0 20px;
}

.price-slider__display {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.price-slider__label {
  font-size: 20px;
  font-weight: 700;
  color: var(--solox-black, #1c1a1d);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.price-slider__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--solox-base, #c2a74e);
  text-align: right;
}

.price-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--solox-border-color, #e8e3da);
  border-radius: 3px;
  outline: none;
  margin: 6px 0 10px;
  cursor: pointer;
}

.price-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--solox-base, #c2a74e);
  border: 3px solid var(--solox-white, #fff);
  box-shadow: 0 0 0 1px var(--solox-border-color, #e8e3da);
  cursor: pointer;
}

.price-slider__input::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid var(--solox-white, #fff);
  border-radius: 50%;
  background-color: var(--solox-base, #c2a74e);
  box-shadow: 0 0 0 1px var(--solox-border-color, #e8e3da);
  cursor: pointer;
}

.price-slider__input::-moz-range-track {
  height: 6px;
  background-color: var(--solox-border-color, #e8e3da);
  border-radius: 3px;
}

.price-slider__ticks {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--solox-text, #6e6b70);
}

/*--------------------------------------------------------------
Flip-on-hover/tap service cards (services-grid.html)
Both faces are absolutely positioned on top of each other inside
a relatively-positioned inner wrapper, and assets/js/flip-cards.js
measures the taller face and sets that height on the wrapper —
this is the classic cross-browser flip-card pattern. (An earlier
version used CSS grid to auto-stack the faces instead; that
rendered correctly in Chrome but failed to overlap the faces in
Safari, so it was replaced with this more broadly-supported
absolute-positioning approach.)
--------------------------------------------------------------*/
.service-flip {
  position: relative;
  perspective: 1800px;
}

.service-flip__inner {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.service-flip__front,
.service-flip__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.service-flip__back {
  transform: rotateY(180deg);
  background-color: var(--solox-black, #1c1a1d);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 35px;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
  height: 100%;
  box-sizing: border-box;
}

@media (hover: hover) {
  .service-flip:hover .service-flip__inner {
    transform: rotateY(180deg);
  }
}

.service-flip.is-flipped .service-flip__inner {
  transform: rotateY(180deg);
}

.service-flip__back__icon {
  font-size: 46px;
  color: var(--solox-base, #c2a74e);
  margin: 0 0 18px;
  display: inline-block;
}

.service-flip__back__title {
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--solox-white, #fff);
  margin: 0 0 14px;
  line-height: 1.2em;
}

.service-flip__back__text {
  font-size: 14px;
  line-height: 1.7em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 12px;
}

.service-flip__back__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--solox-base, #c2a74e);
  margin: 0 0 22px;
}

.service-flip__back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--solox-letter-space, 0.1em);
  color: var(--solox-white, #fff);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 4px;
  transition: all 300ms ease;
}

.service-flip__back__link:hover {
  color: var(--solox-base, #c2a74e);
  border-color: var(--solox-base, #c2a74e);
}

.service-flip__back__link i {
  font-size: 15px;
}

.service-flip__hint {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--solox-white, #fff);
  background-color: rgba(0, 0, 0, 0.45);
  padding: 5px 12px;
  border-radius: 20px;
  z-index: 2;
  display: none;
  pointer-events: none;
}

@media (pointer: coarse) {
  .service-flip__hint {
    display: inline-block;
  }
}

.service-flip:focus-visible {
  outline: 2px solid var(--solox-base, #c2a74e);
  outline-offset: 4px;
}

/*--------------------------------------------------------------
Bridal package pricing slider — full-width variant (packages.html)
Spans the same width as the 4-across package-card row below it,
instead of the narrower default used on contact.html.
--------------------------------------------------------------*/
.price-slider--wide {
  max-width: none;
  width: 100%;
}

/*--------------------------------------------------------------
Bridal package cards (packages.html)
Removes the stock "+" zoom overlay on the package photo (it's
being superseded by the flip-to-detail interaction below), and
gives the flip back-face a bit more breathing room since the
package-card front is taller than the circular service cards.
--------------------------------------------------------------*/
.package-card__image__link {
  display: none;
}

.service-flip--package .service-flip__back {
  padding: 40px;
}

.service-flip--package .service-flip__back__title {
  font-size: 24px;
}

.service-flip--package .service-flip__back__text {
  font-size: 15px;
  max-width: 320px;
}

/*--------------------------------------------------------------
Team photo flip (about.html)
Only the square photo flips — the name/title/bio stay put below
it — so this variant forces a 1:1 box instead of letting grid
auto-sizing follow the taller front+back content.
--------------------------------------------------------------*/
.service-flip--team-photo {
  aspect-ratio: 1 / 1;
}

.service-flip--team-photo .service-flip__inner {
  height: 100%;
}

.service-flip--team-photo .service-flip__back {
  padding: 24px;
}

.service-flip--team-photo .service-flip__back__icon {
  font-size: 34px;
  margin-bottom: 12px;
}

.service-flip--team-photo .service-flip__back__title {
  font-size: 18px;
  margin-bottom: 16px;
}

/*--------------------------------------------------------------
Pre-filled booking/inquiry note (contact.html)
Shown when a client arrives via a "Book <artist>" link (About page),
a "Request availability" link (Services page), or a "Get this
package" link (Bridal Henna page) — confirming what their pre-filled
message already names, so nothing needs to be re-typed.
--------------------------------------------------------------*/
.booking-request-note {
  background-color: var(--solox-gray, #f9f6f1);
  border: 1px solid var(--solox-border-color, #e8e3da);
  border-left: 3px solid var(--solox-base, #c2a74e);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--solox-black, #1c1a1d);
  margin: -6px 0 20px;
}

/*--------------------------------------------------------------
"Pay & Book Now" Square deposit buttons
Used on the flip-card backs (packages.html, services-grid.html)
and standalone on the personal-appointment slider (contact.html).
See assets/js/square-links.js to activate each deposit tier.
--------------------------------------------------------------*/
.booking-or-divider {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  margin: 14px 0 12px;
  position: relative;
}

.booking-or-divider::before,
.booking-or-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 32%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.booking-or-divider::before {
  left: 0;
}

.booking-or-divider::after {
  right: 0;
}

.booking-or-divider--light {
  color: var(--solox-text, #6e6b70);
}

.booking-or-divider--light::before,
.booking-or-divider--light::after {
  background-color: var(--solox-border-color, #e8e3da);
}

.square-pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background-color: var(--solox-base, #c2a74e);
  color: var(--solox-white, #fff) !important;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transition: all 300ms ease;
  text-align: center;
}

.square-pay-btn:hover {
  background-color: var(--solox-white, #fff);
  color: var(--solox-black, #1c1a1d) !important;
}

.square-pay-btn i {
  font-size: 15px;
}

.square-pay-btn--pending {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.square-pay-btn--outline {
  background-color: transparent;
  border: 1px solid var(--solox-border-color, #e8e3da);
  color: var(--solox-black, #1c1a1d) !important;
}

.square-pay-btn--outline:hover {
  background-color: var(--solox-base, #c2a74e);
  border-color: var(--solox-base, #c2a74e);
  color: var(--solox-white, #fff) !important;
}

.square-pay-btn__note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  margin: 8px 0 0;
}

.square-pay-btn__note--light {
  color: var(--solox-text, #6e6b70);
}

/*--------------------------------------------------------------
FAQ page — decorative corner shapes covering "Still Have
Questions?" on mobile AND on tablet/small-laptop widths
(.faq-page-search__shape-1/2/3 are plain <img> tags with no size
constraint in the base theme, so they render at full native size —
up to 478x408px for the "message" shape. The container is
.container-fluid (percentage width, not a fixed stepped width), so
the inner box's padding shrinks continuously as the viewport
narrows rather than at one clean breakpoint — by the time the
viewport is below ~1200px the padding is no longer enough to keep
that bulk in the corners, and the images balloon relative to the
card and reach into the heading/text all the way down to mobile
widths. shape-1 also carries an explicit z-index:10 in the base
theme with no matching z-index on the text row, so it can paint on
top of "Still Have Questions?" instead of behind it. Fix: constrain
the artwork to a sensible decorative size everywhere below the xl
breakpoint (1200px, where the native sizing is already safe), and
guarantee the real content always stacks above it regardless.)
--------------------------------------------------------------*/
.faq-page-search__inner > .row {
  position: relative;
  z-index: 20;
}

.faq-page-search__shape-1,
.faq-page-search__shape-2,
.faq-page-search__shape-3 {
  pointer-events: none;
}

@media (max-width: 1199px) {
  .faq-page-search__shape-1,
  .faq-page-search__shape-2,
  .faq-page-search__shape-3 {
    max-width: 110px;
    height: auto;
    opacity: 0.5;
  }
}

/*--------------------------------------------------------------
Contact page — "private appointment pricing" heading covered by
the booking form above it on mobile
(.contact-one__form has a built-in -60px bottom margin + z-index:10
in the base theme, designed to let the gold form box visually
"pop" past the bottom of the white content card next to it. On
desktop the two columns sit side by side and the overlap lands
harmlessly within .contact-one's own box. #private-appointment's
top padding is explicitly set to 0 (inline style) so the two
sections sit flush. Below the xl breakpoint (1200px) the columns
stack to full width, putting the form directly above
#private-appointment with zero padding to absorb the pull-up, so
the form's bottom ~60px — raised above normal content by its own
z-index:10 — paints over the "private appointment pricing"
heading. Fix: cancel the negative margin once the columns stack,
the same way the theme's own "home-two" contact variant already
does for the same reason.)
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  .contact-one__form {
    margin-bottom: 0;
  }
}