/* Brown Sugar (Muntab_Art) — Ivy's display font for page titles. */
@font-face {
    font-family: 'BrownSugar';
    src: url('/assets/ivy-nailology/fonts/Brown-Sugar-Regular.woff2') format('woff2'),
         url('/assets/ivy-nailology/fonts/Brown-Sugar-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Ivy-only contact CTA replacement (form removed server-side for Ivy). */
body[data-page="contact"] .ivy-contact-message {
    background: #f8f8f8;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    text-align: left;
    align-items: flex-start;
}

body[data-page="contact"] .ivy-contact-message h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 16px;
    text-align: left !important;
}

body[data-page="contact"] .ivy-contact-message p {
    font-size: clamp(1.12rem, 1.9vw, 1.4rem);
    line-height: 1.5;
    margin: 0 0 10px;
    text-align: left;
}

body[data-page="contact"] .ivy-contact-message p:last-child {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    body[data-page="contact"] .ivy-contact-message {
        padding: 28px 22px;
    }
}


/* Ivy-only page title: drop the purple banner strip, keep the title in brand brown. */
/* White, not transparent: the template theme sets --bg to an off-white pink. */
.services-page-banner {
    background: #fff;
}

.services-page-banner-title {
    color: #352A25;
}

/* Ivy-only text color: Dark Espresso everywhere text sits on a light background.
   Template text comes from --text/--text-muted, but also from --primary/--accent and
   hardcoded greys — those vars also paint buttons and the footer, so the text uses
   are overridden by selector instead. White text on filled buttons and the purple
   footer, error/warning colours, and greyed-out calendar days are left as they are. */
:root {
    --ivy-espresso: #352A25;
}

/* Set on body, not :root: database.js writes the theme's --primary, --text and --bg
   inline on <html>, which outranks any :root rule here. --bg goes white to drop the
   theme's off-white pink (#FFFAF9) page background. --primary and --accent are the
   template's two purples; both become espresso, so every purple fill, border, outline
   and text that reads them follows. */
body {
    --bg:         #fff;
    --text:       var(--ivy-espresso);
    --text-muted: var(--ivy-espresso);
    --primary:    var(--ivy-espresso);
    --accent:     var(--ivy-espresso);
    /* The template's two light pink tints (panels, highlights, hovers) become ivory. */
    --surface:    #F8F6F2;
    --surface-2:  #F8F6F2;
}

/* Headings, eyebrows, labels and links */
.section-eyebrow,
.section-title,
.brand,
.nav-links a,
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active,
.hero-eyebrow,
.hero h1,
.hero-copy,
.btn-text,
.btn-text:hover,
.about-card h3,
.service-card-img-label,
.services-menu-nav a:hover,
.dsm-item-price,
.testimonials-header .section-eyebrow,
.testimonial-author,
.teaser-card h3,
.teaser-link,
.teaser-link:hover,
.about-content h2,
.contact-info h2,
.contact-detail-label,
.contact-detail-body a:hover,
.hours-day,
.contact-map-store-name,
.contact-store-meta-item:hover,
.contact-hours-panel h2,
.contact-form-v2 h2,
.field-group label,
.required-star,
.consent-row a,
.gift-amount-price,
.cta-banner h2,
.site-footer-bottom a,
.booking-cta-desc,
.booking-call-label,
.booking-no-url-msg p,
.booking-info-label,
.booking-info-link,
.booking-info-link:hover,
a.booking-info-text:hover,
.bhl-time,
.confirmation-subheading,
.confirmation-message {
    color: var(--ivy-espresso);
}

#booking-phone-info,
#booking-phone-info:hover {
    color: var(--ivy-espresso) !important;
}

/* Hover states that flip a filled button to the light accent */
.nav-cta:hover {
    color: var(--ivy-espresso) !important;
}

/* With --accent now espresso, these hovers fill espresso, so their text stays white.
   btn-navy's hover goes transparent instead, so its text is espresso. */
.btn-primary:hover,
.btn-dark:hover,
.mobile-book-btn:hover {
    color: #fff;
}

.btn-navy:hover {
    color: var(--ivy-espresso);
}

/* Booking wizard */
.bw-step,
.bw-step.active,
.bw-step.done,
.bw-panel-sub,
.bw-online-off-sub,
.bw-cat-count,
.bw-cat-chevron,
.bw-svc-card.selected::after,
.bw-svc-price,
.bw-svc-dur,
.bw-guest-selector-label,
.bw-guest-count-btn.active,
.bw-guest-tab-btn,
.bw-guest-tab-btn.active,
.bw-guest-tab-check,
.bw-emp-badge,
.bw-emp-card.selected .bw-emp-name,
.bw-emp-card.selected .bw-emp-badge,
.bw-cal-dow span,
.bw-leg-item,
.bw-dt-info-ph-text,
.bw-dt-info-label,
.bw-dt-info-val.hl,
.bw-dt-bottom-title,
.bw-dt-bottom-title.active,
.bw-time-tab,
.bw-slot.selected,
.bw-slot-empty,
.bw-form-label,
.bw-form-label .req,
.bw-checkbox-row span,
.bw-checkbox-row a,
.bw-confirm-sub,
.bw-summary-info-label,
.bw-otp-close,
.bw-otp-intro,
.bw-otp-status,
.bw-otp-link,
.bw-otp-link.secondary,
.bw-svc-enh-edit,
.bw-enh-sum,
.bw-enh-close,
.bw-enh-intro,
.bw-enh-section-title,
.bw-enh-opt-meta,
.bw-enh-opt-state,
.bw-enh-opt.selected .bw-enh-opt-state,
.bw-enh-total,
.bw-store-go,
.bw-store-bar,
.bw-store-change {
    color: var(--ivy-espresso);
}

@media (max-width: 900px) {
    .nav-links a {
        color: var(--ivy-espresso);
    }
}

/* Ivy-only footer: no purple gradient, Dark Espresso text on #F8F6F2. */
.site-footer {
    color: var(--ivy-espresso);
    background: #F8F6F2;
    border-top: 1px solid var(--border);
}

.site-footer-col h3 {
    color: var(--ivy-espresso);
    border-bottom-color: rgba(53, 42, 37, 0.24);
}

.footer-location + .footer-location {
    border-top-color: rgba(53, 42, 37, 0.18);
}

.footer-location-name,
.footer-contact-item,
.footer-contact-item:hover,
.footer-contact-list a,
.footer-links-list a,
.footer-contact-list a:hover,
.footer-links-list a:hover,
.footer-contact-list a:focus-visible,
.footer-links-list a:focus-visible,
.footer-hours-day,
.footer-hours-time {
    color: var(--ivy-espresso);
}

/* The footer icons are white PNGs; tint them to #352A25 so they show on white. */
.footer-contact-icon,
.footer-social-icon {
    filter: brightness(0) saturate(100%) invert(21%) sepia(10%) saturate(877%) hue-rotate(-26deg) brightness(81%);
}

/* Links no longer change colour on hover, so underline them instead. */
.footer-contact-item:hover,
.footer-contact-list a:hover,
.footer-links-list a:hover,
.footer-contact-list a:focus-visible,
.footer-links-list a:focus-visible {
    text-decoration: underline;
}

/* Gift card location picker (Ivy Nailology / PB Nailology): #F8F6F2 buttons.
   Scoped to the gift card list so the booking page's store picker is unaffected. */
#gc-store-list .bw-store-btn,
#gc-store-list .bw-store-btn:hover {
    background: #F8F6F2;
}

#gc-store-list .bw-store-btn:hover {
    border-color: var(--ivy-espresso);
}

/* Copyright bar: same #F8F6F2 as the footer, with no separator line above it. */
.site-footer-bottom {
    background: #F8F6F2;
    border-top: none;
}

/* Gift card page: #F8F6F2 in place of the template pinks on the "Change location"
   bar, the preview column and the sliding Email / Text message highlight. */
.gc-store-bar,
.gc-preview-col,
.gc-toggle::before {
    background: #F8F6F2;
}

/* Gift card preview: #F8F6F2 card with espresso text instead of the purple gradient.
   It sits on a column of the same colour, so a border and soft shadow outline it. */
.gc-card {
    color: var(--ivy-espresso);
    background: #F8F6F2;
    border: 1px solid rgba(53, 42, 37, 0.18);
    box-shadow: 0 14px 34px rgba(53, 42, 37, 0.12);
}

.gc-card::after {
    border-color: rgba(53, 42, 37, 0.18);
}

/* Gift card amount boxes: the selected one is #F8F6F2 with espresso text and border. */
.gc-amount:hover {
    border-color: var(--ivy-espresso);
}

.gc-amount[aria-checked="true"] {
    border-color: var(--ivy-espresso);
    background: #F8F6F2;
    color: var(--ivy-espresso);
}

/* Gift card "Deliver by" toggle: espresso outline and text on the chosen option. */
.gc-toggle::before {
    border-color: var(--ivy-espresso);
}

.gc-toggle-btn.is-active {
    color: var(--ivy-espresso);
}

.gc-toggle-btn:focus-visible {
    outline-color: var(--ivy-espresso);
}

/* Gallery page: the corner brackets that sweep in around a hovered image. */
.gallery-grid-v2 .g-item img {
    --c: var(--ivy-espresso);
}

/* Services page: no alternating pink bands behind the categories. */
.dsm-section,
.dsm-section:nth-child(3n+1),
.dsm-section:nth-child(3n+2),
.dsm-section:nth-child(3n+3) {
    background: #fff;
}

/* Home page: white everywhere the template paints a section or placeholder pink/blue.
   Buttons keep their colours. */
.hero,
.about-section,
.gallery-preview-section,
.testimonial-portrait,
.about-img-placeholder {
    background: #fff;
}

/* The gallery preview ring has a 14px gap painted in the section colour; keep it white. */
.gallery-preview-grid .g-item {
    box-shadow: 0 0 0 14px #fff, 0 0 0 16px var(--primary);
}

.gallery-preview-grid .g-item:hover,
.gallery-preview-grid .g-item:active,
.gallery-preview-grid .g-item.is-touched {
    box-shadow: 0 0 0 14px #fff, 0 0 0 19px #111;
}

/* Home page: no hero banner (its social icons go with it) and no "About Us" heading,
   so the About card sits right under the nav. */
body[data-page="home"] .hero,
body[data-page="home"] .about-header {
    display: none;
}

body[data-page="home"] .about-section {
    padding-top: 48px;
}

@media (max-width: 900px) {
    body[data-page="home"] .about-section {
        padding-top: 32px;
    }
}

/* Home page: no purple bar under the section titles. */
body[data-page="home"] .section-title::after {
    display: none;
}

/* Home "Our Services" carousel: espresso box around each service image (was purple).
   Only the colour changes; width and offset stay as the template sets them. */
.service-card-img {
    outline-color: var(--ivy-espresso);
}

/* Home "Our Services" carousel arrows: espresso buttons with a white arrow.
   The template darkens on hover and turns the arrow black, which would vanish on
   espresso, so hover lightens the button slightly and keeps the arrow white. */
.services-nav-btn {
    background: var(--ivy-espresso);
}

@media (hover: hover) and (pointer: fine) {
    .services-nav-btn:hover {
        background: var(--ivy-espresso);
        color: #fff;
        filter: brightness(1.3);
    }
}

/* Book Now (desktop nav + mobile header) and the home page's "View All Services":
   espresso buttons with white text. Hover lightens the espresso and keeps the text
   white, in place of the template's pink hover. */
.nav-cta {
    background: var(--ivy-espresso) !important;
}

.nav-cta:hover {
    background: var(--ivy-espresso) !important;
    color: #fff !important;
    filter: brightness(1.3);
}

.mobile-book-btn,
.services-section .btn-primary {
    background: var(--ivy-espresso);
    border-color: var(--ivy-espresso);
}

.mobile-book-btn:hover,
.services-section .btn-primary:hover {
    background: var(--ivy-espresso);
    border-color: var(--ivy-espresso);
    color: #fff;
    filter: brightness(1.3);
}

/* Purples written directly into the template CSS rather than through --primary. */
.booking-phone-display:hover {
    background: var(--ivy-espresso);
    filter: brightness(1.3);
}

.bw-input:focus,
.bw-textarea:focus {
    box-shadow: 0 0 0 3px rgba(53, 42, 37, 0.12);
}

.hero-cta .btn,
.hero-cta .btn:hover,
.hero-cta .btn:focus-visible,
.hero-cta .btn:active {
    background: var(--ivy-espresso);
}

/* The social links fill with --accent on hover; keep their grey icons visible on it. */
.social-bar a:hover img {
    filter: grayscale(1) brightness(0) invert(1);
}

/* Contact page: no pink fill behind the two store maps. */
.contact-map-embed,
.contact-map-v2 {
    background: #fff;
}

/* Page titles ("Nail Services", "Our Designs", "Contact Us", "Gift Card",
   "Book Your Appointment") in Brown Sugar. !important beats the template's
   blanket Garamond rule on every h1. */
.services-page-banner-title {
    font-family: 'BrownSugar', 'GaramondPremierPro', Georgia, serif !important;
}

/* All text except the page titles in a plain sans-serif (Helvetica on Apple devices,
   Arial elsewhere), in place of the template's Garamond. The template forces Garamond
   with !important on every element, so this does the same; the Brown Sugar page-title
   rule above has a class selector, so it still wins for the titles. */
body {
    --ivy-sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: var(--ivy-sans);
    --font-head: var(--ivy-sans);
    --font-nav:  var(--ivy-sans);
    --font-btn:  var(--ivy-sans);
}

body,
body * {
    font-family: var(--ivy-sans) !important;
}

/* Keep the gift card confirmation code monospaced so its characters line up. */
.gc-code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important;
}

/* Home section titles ("Our Services", "Our Gallery", "Check Our Reviews!") in
   Brown Sugar, like the page titles. The class selector outranks the sans-serif rule. */
body[data-page="home"] .section-title {
    font-family: 'BrownSugar', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* ── CHANGE THE GAP BETWEEN SERVICES (Services page) ─────────────────────────────
   Space between each service in a category (e.g. "Acrylic Fill w/ Gel" and the next
   one). 22px is the template default. */
.dsm-list {
    gap: 10px; /* ← change this number */
}

/* Service names and prices on the Services page in regular weight, not the
   template's semi-bold names and bold prices. */
.dsm-item-title,
.dsm-item-price {
    font-weight: 400;
}