/* EinTermin marketplace-compatible salon profile and shared salon chrome */
.site-header {
    border-bottom-color: rgba(33, 24, 47, .08);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 16px rgba(33, 24, 47, .035);
    backdrop-filter: blur(18px);
}

.salon-nav-wrap { min-height: 5rem; gap: 1.25rem; }
.salon-brand-group, .platform-brand, .footer-platform-brand { display: flex; min-width: 0; align-items: center; }
.salon-brand-group { gap: .8rem; }
.platform-brand, .footer-platform-brand { gap: .62rem; color: var(--brand-plum); font-size: 1rem; font-weight: 950; letter-spacing: -.035em; text-decoration: none; white-space: nowrap; }
.platform-brand:hover { color: var(--brand-plum); }
.platform-brand-mark { position: relative; width: 2.35rem; height: 2.35rem; display: grid; flex: 0 0 2.35rem; place-items: center; overflow: hidden; color: #fff; background: var(--brand-coral); border-radius: .8rem; box-shadow: 0 .4rem 1rem rgba(255, 91, 77, .22); }
.platform-brand-mark span { position: relative; z-index: 1; font-weight: 950; }
.platform-brand-mark i { position: absolute; right: -.58rem; bottom: -.58rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--brand-mint); }
.brand-divider { width: 1px; height: 2.1rem; flex: 0 0 1px; background: var(--line); }
.salon-brand-group .brand { max-width: 15rem; gap: .55rem; color: #493e51; font-size: .86rem; font-weight: 850; }
.salon-brand-group .brand img, .salon-brand-group .brand-mark { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; border-radius: .75rem; }
.salon-brand-group .brand-mark { background: var(--accent-dark); }
.salon-desktop-nav { margin-left: auto; gap: clamp(.85rem, 1.8vw, 1.5rem); color: #514657; font-size: .82rem; }
.salon-desktop-nav a:hover, .text-button:hover { color: var(--brand-coral-dark); }
.nav-actions { flex: 0 0 auto; }
.nav-book-button, .site-header .nav-book-button { background: var(--brand-coral); }
.nav-book-button:hover, .site-header .nav-book-button:hover { background: var(--brand-coral-dark); }
.salon-mobile-menu { display: none; position: relative; }
.salon-mobile-menu summary { padding: .5rem .65rem; cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: .68rem; color: var(--brand-plum); background: #fff; font-size: .75rem; font-weight: 850; }
.salon-mobile-menu summary::-webkit-details-marker { display: none; }
.salon-mobile-menu nav { position: absolute; z-index: 60; top: 3rem; right: 0; width: 13rem; display: grid; gap: 0; padding: .45rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; box-shadow: 0 1.2rem 3rem rgba(33, 24, 47, .18); }
.salon-mobile-menu nav a { padding: .65rem .75rem; border-radius: .55rem; }
.salon-mobile-menu nav a:hover { background: var(--brand-cream); }

.salon-profile-page { color: var(--brand-plum); background: #fff; }
.salon-profile-page h1, .salon-profile-page h2, .salon-profile-page h3 { color: var(--brand-plum); }
.salon-profile-page .eyebrow { color: var(--brand-coral-dark); letter-spacing: .09em; }
.salon-profile-page .text-link { color: var(--brand-coral-dark); font-size: .85rem; text-decoration: none; }
.salon-profile-hero { position: relative; overflow: hidden; padding-bottom: 4.8rem; background: var(--brand-cream); }
.salon-profile-hero::before, .salon-profile-hero::after { position: absolute; content: ''; pointer-events: none; border-radius: 50%; }
.salon-profile-hero::before { top: -18rem; right: -13rem; width: 38rem; height: 38rem; background: color-mix(in srgb, var(--accent) 13%, transparent); }
.salon-profile-hero::after { bottom: -12rem; left: -8rem; width: 22rem; height: 22rem; background: rgba(189, 235, 216, .42); }
.salon-profile-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(25rem, .88fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; min-height: 44rem; padding-block: clamp(3rem, 6vw, 5.5rem); }
.salon-hero-media { position: relative; min-height: 36rem; overflow: hidden; border: .55rem solid rgba(255, 255, 255, .8); border-radius: 2rem; background: #e9ded8; box-shadow: 0 2rem 5rem rgba(73, 51, 68, .19); }
.salon-hero-media > picture, .salon-hero-media > picture img, .salon-hero-media > img { width: 100%; height: 100%; min-height: 35rem; }
.salon-hero-media > picture img, .salon-hero-media > img { object-fit: cover; }
.salon-cover-placeholder { min-height: 35rem; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent-dark), var(--brand-plum)); font-size: clamp(7rem, 16vw, 12rem); font-weight: 950; }
.salon-media-badges { position: absolute; right: 1rem; bottom: 1rem; left: 1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.salon-rating-badge, .salon-online-badge { display: inline-flex; align-items: center; color: var(--brand-plum); background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .68); border-radius: 1rem; box-shadow: 0 .8rem 2rem rgba(33, 24, 47, .15); backdrop-filter: blur(14px); }
.salon-rating-badge { gap: .45rem; padding: .72rem .9rem; text-decoration: none; }
.salon-rating-badge > span { color: #f5a524; font-size: 1.15rem; }
.salon-rating-badge strong { font-size: 1.05rem; }
.salon-rating-badge small { color: var(--muted); font-size: .72rem; }
.salon-online-badge { gap: .45rem; padding: .62rem .78rem; font-size: .7rem; font-weight: 850; }
.salon-online-badge i { width: .55rem; height: .55rem; border-radius: 50%; background: #26a269; box-shadow: 0 0 0 .22rem rgba(38, 162, 105, .14); }
.salon-hero-content { min-width: 0; }
.salon-breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.6rem; color: #7d7182; font-size: .7rem; font-weight: 750; }
.salon-breadcrumb a { color: #5f5366; }
.salon-identity-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; }
.salon-profile-logo { width: 5rem !important; height: 5rem !important; flex: 0 0 5rem; margin: 0 !important; border: 4px solid #fff; border-radius: 1.35rem !important; object-fit: cover; box-shadow: 0 .75rem 1.8rem rgba(33, 24, 47, .13); }
.salon-profile-logo-placeholder { display: grid; place-items: center; color: #fff; background: var(--accent-dark); font-size: 1.8rem; font-weight: 950; }
.salon-category-pill { width: max-content; margin: 0 0 .35rem; padding: .36rem .65rem; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 13%, #fff); border-radius: 999px; font-size: .7rem; font-weight: 850; }
.salon-tagline { margin: 0; color: #645968; font-size: .9rem; font-weight: 700; }
.salon-hero-content h1 { max-width: 650px; margin-bottom: .55rem; font-size: clamp(3rem, 6vw, 5.9rem); line-height: .98; letter-spacing: -.068em; }
.salon-location { display: flex; align-items: center; gap: .35rem; margin-bottom: 1.35rem; color: #776a7c; font-size: .86rem; font-weight: 750; }
.salon-location span { color: var(--brand-coral-dark); font-size: 1.2rem; }
.salon-hero-description { max-width: 620px; color: #5f5366; font-size: clamp(1.02rem, 1.8vw, 1.18rem); line-height: 1.7; }
.salon-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.65rem; }
.salon-primary-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 11rem; }
.salon-profile-page .button-quiet { color: var(--brand-plum); background: #fff; border-color: var(--line); box-shadow: none; }
.salon-profile-page .button-quiet:hover { background: #fdf9f6; }
.salon-whatsapp-button { color: #14532d; background: #dff7e7; box-shadow: none; }
.salon-whatsapp-button:hover { color: #114726; background: #caefd7; }
.salon-hero-stats { display: flex; gap: clamp(1.4rem, 4vw, 2.8rem); margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid rgba(33, 24, 47, .1); }
.salon-hero-stats div { display: grid; gap: .12rem; }
.salon-hero-stats dt { color: var(--brand-plum); font-size: 1.18rem; font-weight: 950; }
.salon-hero-stats dd { margin: 0; color: #7b6e7f; font-size: .7rem; font-weight: 750; }

.salon-booking-dock { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; margin-top: -3.2rem; padding: clamp(1.35rem, 3vw, 2.1rem); border: 1px solid rgba(33, 24, 47, .08); border-radius: 1.45rem; background: #fff; box-shadow: 0 1.5rem 4rem rgba(73, 51, 68, .14); }
.salon-booking-intro .eyebrow { margin-bottom: .3rem; }
.salon-booking-intro h2 { margin-bottom: .45rem; font-size: clamp(1.45rem, 2.4vw, 2rem); }
.salon-booking-intro > p:last-child { margin: 0; color: var(--muted); font-size: .82rem; }
.salon-booking-options { display: grid; gap: .55rem; }
.salon-booking-options > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .85rem; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.salon-booking-options > a:hover { color: var(--brand-plum); border-color: rgba(255, 91, 77, .42); transform: translateX(.2rem); box-shadow: 0 .55rem 1.4rem rgba(73, 51, 68, .07); }
.salon-booking-options > a > span { display: grid; }
.salon-booking-options > a > span:last-child { text-align: right; }
.salon-booking-options strong { font-size: .86rem; }
.salon-booking-options small { color: var(--muted); font-size: .68rem; }
.salon-booking-options > a > span:last-child small { color: var(--brand-coral-dark); font-weight: 800; }
.salon-trust-strip { padding-block: 2rem; }
.salon-trust-strip .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.salon-trust-strip .container > div { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .05rem .7rem; align-items: center; padding: 1rem; }
.salon-trust-strip .container > div > span { grid-row: 1 / span 2; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: #16603a; background: #def7e8; border-radius: .75rem; font-weight: 950; }
.salon-trust-strip strong { font-size: .82rem; }
.salon-trust-strip small { color: var(--muted); font-size: .68rem; }
.salon-profile-page .section-heading { max-width: 720px; }
.salon-profile-page .section-heading-row { max-width: none; }
.salon-profile-page .section-heading-row > div > p:last-child { max-width: 620px; margin: .6rem 0 0; color: var(--muted); }

.salon-offer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.salon-offer-card { min-height: 19rem; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; color: #fff; background: var(--brand-plum); border-radius: 1.35rem; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.salon-offer-card:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 2.8rem rgba(33, 24, 47, .16); }
.salon-offer-card > picture, .salon-offer-card > picture img, .salon-offer-card > img { width: 100%; height: 100%; }
.salon-offer-card > picture img, .salon-offer-card > img { object-fit: cover; }
.salon-offer-art { display: grid; place-items: center; color: var(--brand-plum); background: var(--brand-mint); font-size: 6rem; font-weight: 950; }
.salon-offer-content { display: flex; flex-direction: column; align-items: flex-start; padding: 1.5rem; }
.salon-offer-content .offer-badge { color: var(--brand-plum); background: #fff; }
.salon-offer-content > strong { margin: 1.2rem 0 .55rem; font-size: 1.5rem; line-height: 1.15; }
.salon-offer-content > small { color: #cfc8d5; }
.salon-offer-content > span:last-child { margin-top: auto; padding-top: 1rem; color: #fff; font-size: .75rem; font-weight: 850; }

.salon-services-section { background: var(--brand-cream); border-block: 1px solid rgba(33, 24, 47, .06); }
.salon-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.salon-service-card { min-height: 15.5rem; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid rgba(33, 24, 47, .09); border-radius: 1.2rem; background: #fff; box-shadow: 0 .35rem 1.2rem rgba(73, 51, 68, .035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.salon-service-card:hover { transform: translateY(-4px); border-color: rgba(255, 91, 77, .3); box-shadow: 0 1.2rem 2.5rem rgba(73, 51, 68, .09); }
.salon-service-topline { display: flex; justify-content: space-between; gap: 1rem; color: #8c7f8e; font-size: .68rem; font-weight: 850; }
.salon-service-topline span:first-child { color: var(--brand-coral-dark); letter-spacing: .12em; }
.salon-service-card h3 { margin: 1.25rem 0 .6rem; font-size: 1.32rem; }
.salon-service-card h3 a { text-decoration: none; }
.salon-service-card > p { color: var(--muted); font-size: .84rem; }
.salon-service-footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); }
.salon-service-footer strong { font-size: 1rem; }
.salon-service-footer a { color: var(--brand-coral-dark); font-size: .72rem; font-weight: 850; text-decoration: none; text-align: right; }

.salon-team-grid { gap: .9rem; }
.salon-team-card { border-color: rgba(33, 24, 47, .09); border-radius: 1.25rem; box-shadow: 0 .45rem 1.5rem rgba(73, 51, 68, .04); }
.salon-team-card > div { padding: 1rem 1.1rem 1.25rem; }
.salon-team-card > div > p { margin-bottom: .25rem; color: var(--brand-coral-dark); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.salon-team-card > div h3 { margin: 0 0 .25rem; }
.salon-team-card > div span { color: var(--muted); font-size: .78rem; }
.salon-gallery-section { overflow: hidden; background: #f6f0ec; }
.salon-gallery-mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 12rem; gap: .75rem; }
.salon-gallery-mosaic > a { grid-column: span 4; overflow: hidden; border-radius: 1.2rem; }
.salon-gallery-mosaic > a:first-child { grid-column: span 6; grid-row: span 2; }
.salon-gallery-mosaic > a:nth-child(2) { grid-column: span 6; }
.salon-gallery-mosaic > a:nth-child(3), .salon-gallery-mosaic > a:nth-child(4) { grid-column: span 3; }
.salon-gallery-mosaic picture, .salon-gallery-mosaic img { width: 100%; height: 100%; }
.salon-gallery-mosaic img { object-fit: cover; transition: transform .35s ease; }
.salon-gallery-mosaic a:hover img { transform: scale(1.025); }
.salon-review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.salon-review-card { min-height: 16rem; display: flex; flex-direction: column; margin: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1.2rem; background: #fff; box-shadow: 0 .5rem 1.6rem rgba(73, 51, 68, .045); }
.salon-review-card .stars { margin-bottom: 1.2rem; color: #f5a524; }
.salon-review-card > p:not(.stars) { color: #493e51; font-size: 1rem; line-height: 1.65; }
.salon-review-card footer { display: grid; grid-template-columns: 2.3rem 1fr; gap: 0 .7rem; align-items: center; margin-top: auto; }
.salon-review-card footer > span { grid-row: 1 / span 2; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; color: #fff; background: var(--brand-plum); border-radius: .72rem; font-size: .8rem; font-weight: 900; }
.salon-review-card footer strong { font-size: .76rem; }
.salon-review-card footer small { color: var(--muted); font-size: .65rem; }

.salon-contact-section { background: var(--brand-plum); }
.salon-contact-section h2, .salon-contact-section h3 { color: #fff; }
.salon-contact-section .eyebrow { color: #ff9a90; }
.salon-contact-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(24rem, 1.05fr); gap: clamp(2rem, 5vw, 5rem); }
.salon-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.salon-contact-cards article { display: flex; gap: .85rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; background: rgba(255, 255, 255, .055); }
.salon-contact-cards article > span { width: 2.2rem; height: 2.2rem; display: grid; flex: 0 0 2.2rem; place-items: center; color: var(--brand-plum); background: var(--brand-mint); border-radius: .7rem; }
.salon-contact-cards h3 { margin-bottom: .35rem; font-size: .9rem; }
.salon-contact-cards p { margin-bottom: .3rem; color: #d9d2de; font-size: .76rem; }
.salon-contact-cards a { color: #fff; font-size: .72rem; font-weight: 750; }
.salon-today-hours { display: flex; align-items: center; gap: .75rem; margin-top: .8rem; padding: .9rem 1rem; border-radius: .95rem; background: var(--brand-mint); color: var(--brand-plum); }
.salon-today-hours > span { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .7); }
.salon-today-hours i { width: .55rem; height: .55rem; border-radius: 50%; background: #178452; box-shadow: 0 0 0 .22rem rgba(23, 132, 82, .15); }
.salon-today-hours > div { display: grid; }
.salon-today-hours small { font-size: .64rem; font-weight: 750; }
.salon-today-hours strong { font-size: .88rem; }
.salon-hours-details { margin-top: .8rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: .95rem; }
.salon-hours-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; cursor: pointer; list-style: none; color: #fff; font-size: .8rem; font-weight: 800; }
.salon-hours-details summary::-webkit-details-marker { display: none; }
.salon-hours-details .hours-list { padding: 0 1rem .7rem; }
.salon-hours-details .hours-list div { border-bottom-color: rgba(255, 255, 255, .09); color: #fff; font-size: .76rem; }
.salon-hours-details .hours-list dd { color: #cec5d3; }
.salon-social-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.salon-social-links p { width: 100%; margin: 0; color: #a99eaf; font-size: .68rem; font-weight: 750; }
.salon-social-links a { color: #fff; font-size: .72rem; font-weight: 800; text-decoration: none; }
.salon-map-card { min-height: 36rem; display: grid; grid-template-rows: 1fr auto; overflow: hidden; border: .4rem solid rgba(255, 255, 255, .1); border-radius: 1.4rem; background: #e6e4df; }
.salon-map-card iframe { width: 100%; height: 100%; min-height: 32rem; border: 0; }
.salon-map-card > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; color: var(--brand-plum); background: #fff; font-size: .75rem; font-weight: 850; text-decoration: none; }

.salon-final-cta { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6rem); background: var(--brand-coral); }
.salon-final-cta::after { position: absolute; right: -8rem; bottom: -12rem; width: 25rem; height: 25rem; content: ''; border-radius: 50%; background: rgba(189, 235, 216, .4); }
.salon-final-cta .container { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.salon-final-cta p { margin-bottom: .6rem; color: #541d2c; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.salon-final-cta h2 { max-width: 730px; margin-bottom: .6rem; color: #fff; font-size: clamp(2.2rem, 4.4vw, 4.4rem); line-height: 1.02; }
.salon-final-cta div > span { color: #fff4ef; }
.salon-final-cta .button-light { min-width: 12rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--brand-plum); background: #fff; box-shadow: 0 .8rem 2rem rgba(84, 29, 44, .16); }

.site-footer { color: #bdb4c2; background: #160f20; }
.footer-grid { grid-template-columns: 1.2fr .8fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.footer-platform-brand { margin-bottom: 1.25rem; color: #fff; }
.footer-identity > strong { display: block; font-size: 1.05rem; }
.footer-links > p, .footer-booking > p { margin-bottom: .75rem; color: #8f8396; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.footer-links nav { display: grid; justify-content: start; gap: .45rem; font-size: .78rem; }
.footer-booking .button { width: max-content; padding-inline: 1.1rem; color: var(--brand-plum); background: #fff; }
.footer-grid small { grid-column: 1 / -1; }
.mobile-booking-bar { justify-content: space-between; background: var(--brand-coral); }

/* Shared booking surface: the conversion path follows the same calm, editorial
   hierarchy as the storefront while keeping the existing booking form intact. */
.salon-booking-flow-page { background: #fffaf7; }
.salon-booking-page { width: min(960px, calc(100% - 2rem)); padding-top: clamp(2.25rem, 6vw, 5rem); padding-bottom: clamp(4.5rem, 10vw, 8rem); }
.salon-booking-shell { overflow: hidden; border: 1px solid #eaded8; border-radius: 1.65rem; background: #fff; box-shadow: 0 1.6rem 4rem rgba(50, 29, 53, .09); }
.salon-booking-content { padding: clamp(1.45rem, 5vw, 3.7rem); }
.salon-booking-heading { padding-bottom: 1.65rem; border-bottom: 1px solid var(--line); }
.booking-back-link { width: max-content; max-width: 100%; display: inline-flex; margin-bottom: 1.55rem; overflow: hidden; color: var(--brand-plum); font-size: .78rem; font-weight: 850; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.booking-back-link:hover { color: var(--brand-coral-dark); }
.salon-booking-heading .eyebrow { margin-bottom: .6rem; color: var(--brand-coral-dark); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.salon-booking-heading h1 { margin: 0 0 .65rem; color: var(--brand-plum); font-size: clamp(2.65rem, 6vw, 4.8rem); line-height: .96; letter-spacing: -.065em; }
.salon-booking-heading .intro { max-width: 37rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.booking-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.booking-progress li { display: grid; grid-template-columns: 1.55rem minmax(0, 1fr); gap: .4rem; align-items: center; color: #9c8f9e; font-size: .64rem; }
.booking-progress li > span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border: 1px solid #dfd2d8; border-radius: 50%; color: #8b7b8e; background: #fff; font-size: .64rem; font-weight: 900; }
.booking-progress li > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-progress li.is-active, .booking-progress li.is-complete { color: var(--brand-plum); }
.booking-progress li.is-active > span { color: #fff; border-color: var(--brand-coral); background: var(--brand-coral); box-shadow: 0 .35rem .8rem rgba(255, 91, 77, .22); }
.booking-progress li.is-complete > span { color: #145c3b; border-color: var(--brand-mint); background: var(--brand-mint); }
.salon-booking-page .booking-selection-form { display: grid; gap: 1.45rem; margin: 1.35rem 0 2rem; padding: clamp(1.1rem, 3vw, 1.7rem); border-color: #eaded8; border-radius: 1.15rem; background: #fffdfb; box-shadow: 0 1rem 2.5rem rgba(50, 29, 53, .055); }
.booking-choice-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.booking-choice-fieldset legend { width: 100%; margin-bottom: .75rem; color: var(--brand-plum); font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.booking-selection-grid { display: grid; gap: .7rem; }
.booking-service-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-employee-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.booking-choice-card { display: block; min-width: 0; cursor: pointer; }
.booking-choice-card > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.booking-choice-card-body { min-height: 5.35rem; display: flex; align-items: center; justify-content: space-between; gap: .85rem; padding: 1rem; color: var(--brand-plum); border: 1px solid #e4d6cf; border-radius: .9rem; background: #fff; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.booking-choice-card:hover .booking-choice-card-body { border-color: rgba(255, 91, 77, .55); background: #fff8f5; transform: translateY(-1px); }
.booking-choice-card > input:focus-visible + .booking-choice-card-body { outline: 3px solid rgba(255, 91, 77, .32); outline-offset: 3px; }
.booking-choice-card > input:checked + .booking-choice-card-body { border-color: var(--brand-coral); background: #fff4f0; box-shadow: 0 .6rem 1.25rem rgba(255, 91, 77, .14); }
.booking-choice-card-copy { min-width: 0; display: grid; gap: .25rem; }
.booking-choice-card-copy strong { overflow: hidden; color: var(--brand-plum); font-size: .9rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.booking-choice-card-copy small { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.booking-service-choice b { flex: 0 0 auto; color: var(--brand-coral-dark); font-size: .76rem; }
.booking-employee-choice .booking-choice-card-body { justify-content: flex-start; }
.booking-employee-choice-visual { width: 3.2rem; height: 3.2rem; display: grid; flex: 0 0 3.2rem; place-items: center; overflow: hidden; color: var(--brand-plum); border-radius: .85rem; background: #f6eae4; font-size: .85rem; font-weight: 900; }
.booking-employee-choice-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }
.booking-date-choice { display: block; }
.salon-booking-page .booking-date-choice input { width: 100%; min-height: 3.35rem; padding-inline: 1rem; color: var(--brand-plum); border-color: #e4d6cf; border-radius: .8rem; background: #fff; font: inherit; }
.salon-booking-page .booking-date-choice input:focus { border-color: var(--brand-coral); box-shadow: 0 0 0 .24rem rgba(255, 91, 77, .12); outline: 0; }
.salon-booking-page .booking-selection-form > .button { min-height: 3.25rem; margin-top: .1rem; color: #fff; border: 0; border-radius: .8rem; background: var(--brand-coral); box-shadow: 0 .65rem 1.35rem rgba(255, 91, 77, .17); }
.salon-booking-page .booking-selection-form > .button:hover { background: var(--brand-coral-dark); }
.salon-booking-slots { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.salon-booking-slots h2 { margin-bottom: .95rem; color: var(--brand-plum); font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.045em; }
.salon-booking-page .slot-list { gap: .6rem; }
.salon-booking-page .slot-option { min-height: 3rem; color: var(--brand-plum); border-color: #eaded8; border-radius: .75rem; font-size: .85rem; font-weight: 800; transition: border-color .18s ease, background .18s ease; }
.salon-booking-page .slot-option:hover { border-color: rgba(255, 91, 77, .55); background: #fff7f4; }
.salon-booking-page .slot-option input { accent-color: var(--brand-coral); }

.salon-payment-flow-page, .salon-booking-confirmation-page { background: #fffaf7; }
.salon-payment-page, .salon-confirmation-page { width: min(1080px, calc(100% - 2rem)); padding-top: clamp(2.25rem, 6vw, 5rem); padding-bottom: clamp(4.5rem, 10vw, 8rem); }
.salon-payment-shell, .salon-confirmation-shell { display: grid; grid-template-columns: minmax(16rem, .62fr) minmax(0, 1fr); overflow: hidden; border: 1px solid #eaded8; border-radius: 1.65rem; background: #fff; box-shadow: 0 1.6rem 4rem rgba(50, 29, 53, .09); }
.salon-payment-context, .salon-confirmation-context { display: flex; flex-direction: column; min-height: 42rem; padding: clamp(1.4rem, 4vw, 3.25rem); color: #fff; background: var(--brand-plum); }
.salon-payment-context .booking-back-link { margin-bottom: auto; color: #fff; border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); }
.salon-payment-context .eyebrow, .salon-confirmation-context .eyebrow { margin: 2rem 0 .55rem; color: #ff9a90; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.salon-payment-context h2, .salon-confirmation-context h2 { margin: 0; color: #fff; font-size: clamp(1.65rem, 3vw, 2.45rem); line-height: 1.04; letter-spacing: -.045em; }
.payment-context-copy, .salon-confirmation-context > p:not(.eyebrow) { margin: .8rem 0 0; color: #d8d0df; font-size: .9rem; line-height: 1.6; }
.payment-receipt { display: grid; gap: .75rem; margin: 2rem 0 auto; }
.payment-receipt div { padding-bottom: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.payment-receipt dt { margin-bottom: .18rem; color: #bfb4c6; font-size: .62rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.payment-receipt dd { margin: 0; color: #fff; font-size: .85rem; font-weight: 780; }
.payment-context-trust, .confirmation-context-trust { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; align-items: start; margin-top: 2rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 1rem; background: rgba(255, 255, 255, .07); }
.payment-context-trust > span, .confirmation-context-trust > span, .payment-method-mark, .payment-status-mark, .booking-confirmation-mark { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--brand-plum); background: var(--brand-mint); border-radius: .7rem; font-weight: 950; }
.payment-context-trust p, .confirmation-context-trust p { display: grid; gap: .2rem; margin: 0; }
.payment-context-trust strong, .confirmation-context-trust strong { color: #fff; font-size: .72rem; }
.payment-context-trust small, .confirmation-context-trust small { color: #cfc4d5; font-size: .64rem; line-height: 1.45; }
.salon-payment-content, .salon-confirmation-content { padding: clamp(1.45rem, 4vw, 3.35rem); }
.salon-payment-heading { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.salon-payment-heading .eyebrow, .salon-confirmation-content .eyebrow { margin-bottom: .6rem; color: var(--brand-coral-dark); font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.salon-payment-heading h1, .salon-confirmation-content h1 { margin: 0 0 .65rem; color: var(--brand-plum); font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height: .96; letter-spacing: -.065em; }
.salon-payment-heading .intro, .salon-confirmation-content .intro { max-width: 37rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.payment-progress { margin-bottom: 1.75rem; }
.payment-method-panel { margin: 0; padding: clamp(1.1rem, 3vw, 1.7rem); border: 1px solid #eaded8; border-radius: 1.15rem; background: #fffdfb; box-shadow: 0 1rem 2.5rem rgba(50, 29, 53, .055); }
.payment-method-heading { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .75rem; align-items: start; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.payment-method-heading > div { display: grid; gap: .22rem; }
.payment-method-heading strong { color: var(--brand-plum); font-size: .95rem; }
.payment-method-heading small, .booking-payment-note { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.booking-saved-cards { display: grid; gap: .65rem; margin: 1.25rem 0; }
.booking-saved-cards h2 { margin: 0; color: var(--brand-plum); font-size: 1.15rem; }
.booking-saved-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem; color: var(--brand-plum); border: 1px solid #e7d9d2; border-radius: .85rem; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.booking-saved-card:hover, .booking-saved-card:focus-visible { border-color: rgba(255, 91, 77, .6); background: #fff7f4; outline: 0; transform: translateY(-1px); }
.booking-saved-card small { display: block; margin-top: .2rem; color: var(--muted); font-size: .7rem; }
.booking-payment-divider { display: flex; align-items: center; gap: .7rem; margin: 1.35rem 0; color: var(--muted); font-size: .75rem; font-weight: 750; }
.booking-payment-divider::before, .booking-payment-divider::after { height: 1px; flex: 1; content: ''; background: var(--line); }
#stripe-payment-element { min-height: 3rem; margin: 1rem 0; } #stripe-payment-submit[disabled] { cursor: wait; opacity: .7; }
.payment-status-panel { max-width: 35rem; text-align: left; }
.payment-status-panel h2 { margin: 1rem 0 .45rem; color: var(--brand-plum); font-size: 1.45rem; }
.payment-status-panel p { margin-bottom: 1.3rem; color: var(--muted); line-height: 1.6; }
.salon-confirmation-context { justify-content: center; }
.salon-confirmation-context .eyebrow { margin-top: 0; }
.salon-confirmation-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.booking-confirmation-mark { width: 3.6rem; height: 3.6rem; margin-bottom: 1.4rem; border-radius: 1.1rem; color: #176b43; background: #def7e8; font-size: 1.35rem; }
.booking-confirmation-details { width: 100%; margin: 2rem 0 1.4rem; padding: 1.15rem 1.3rem; border: 1px solid #eaded8; border-radius: 1.05rem; background: #fffdfb; }
.booking-confirmation-details h2 { margin-bottom: .8rem; color: var(--brand-plum); font-size: 1.2rem; }
.booking-confirmation-details dl { margin: 0; }
.booking-confirmation-details dl div { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.booking-confirmation-details dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.booking-confirmation-details dt { color: var(--muted); font-size: .75rem; }
.booking-confirmation-details dd { margin: 0; color: var(--brand-plum); font-size: .82rem; font-weight: 850; text-align: right; }
.confirmation-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 12rem; color: #fff; border: 0; border-radius: .8rem; background: var(--brand-coral); box-shadow: 0 .65rem 1.35rem rgba(255, 91, 77, .17); }
.confirmation-action:hover { background: var(--brand-coral-dark); }

@media (max-width: 1080px) {
    .platform-brand > span:last-child { display: none; }
    .salon-desktop-nav { gap: .8rem; }
    .salon-desktop-nav a:nth-last-child(-n+2) { display: none; }
    .salon-profile-grid { grid-template-columns: minmax(0, 1fr) minmax(23rem, .82fr); gap: 3rem; }
    .salon-hero-media { min-height: 32rem; }
    .salon-hero-media > picture, .salon-hero-media > picture img, .salon-hero-media > img, .salon-cover-placeholder { min-height: 31rem; }
    .salon-offer-card { grid-template-columns: 1fr; }
    .salon-offer-card > picture, .salon-offer-card > img, .salon-offer-art { max-height: 12rem; min-height: 12rem; }
}

@media (max-width: 900px) {
    .salon-desktop-nav { display: none; }
    .salon-mobile-menu { display: block; }
    .salon-profile-grid { grid-template-columns: 1fr; min-height: 0; }
    .salon-hero-media { min-height: 30rem; }
    .salon-hero-content { max-width: 720px; }
    .salon-booking-dock { grid-template-columns: 1fr; }
    .salon-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .salon-review-grid { grid-template-columns: 1fr; }
    .salon-review-card { min-height: 12rem; }
    .salon-contact-grid { grid-template-columns: 1fr; }
    .salon-map-card { min-height: 28rem; }
    .salon-map-card iframe { min-height: 25rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-booking { grid-column: 1 / -1; }
    .booking-service-choice-grid, .booking-employee-choice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .nav-wrap .salon-mobile-menu nav { display: grid; }
    .salon-trust-strip .container { grid-template-columns: 1fr; gap: .2rem; }
    .salon-trust-strip .container > div { padding-block: .65rem; }
    .salon-offer-grid { grid-template-columns: 1fr; }
    .salon-gallery-mosaic { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; grid-auto-rows: 20rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x mandatory; }
    .salon-gallery-mosaic > a, .salon-gallery-mosaic > a:first-child, .salon-gallery-mosaic > a:nth-child(2), .salon-gallery-mosaic > a:nth-child(3), .salon-gallery-mosaic > a:nth-child(4) { grid-column: auto; grid-row: auto; scroll-snap-align: start; }
}

@media (max-width: 650px) {
    body { padding-bottom: 4.4rem; }
    .salon-nav-wrap { min-height: 4.5rem; }
    .salon-brand-group { gap: .55rem; }
    .brand-divider { height: 1.7rem; }
    .salon-brand-group .brand { max-width: 7.5rem; font-size: .72rem; }
    .salon-brand-group .brand img, .salon-brand-group .brand-mark { display: none; }
    .platform-brand-mark { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
    .nav-actions .text-button, .nav-book-button { display: none; }
    .salon-profile-hero { padding-bottom: 4rem; }
    .salon-profile-grid { gap: 2.25rem; padding-block: 1.1rem 4rem; }
    .salon-hero-media { min-height: 24rem; border-width: .35rem; border-radius: 1.45rem; }
    .salon-hero-media > picture, .salon-hero-media > picture img, .salon-hero-media > img, .salon-cover-placeholder { min-height: 23.3rem; }
    .salon-media-badges { right: .65rem; bottom: .65rem; left: .65rem; }
    .salon-online-badge { display: none; }
    .salon-breadcrumb { margin-bottom: 1.1rem; }
    .salon-profile-logo { width: 4.2rem !important; height: 4.2rem !important; flex-basis: 4.2rem; }
    .salon-hero-content h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
    .salon-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .salon-hero-actions .salon-primary-button { grid-column: 1 / -1; }
    .salon-hero-actions .button { text-align: center; }
    .salon-hero-stats { justify-content: space-between; }
    .salon-booking-dock { width: calc(100% - 1.5rem); margin-top: -2.5rem; padding: 1rem; border-radius: 1.15rem; }
    .salon-booking-options > a { padding: .7rem; }
    .salon-services-section.section, .salon-profile-page .section { padding-block: 4rem; }
    .salon-service-grid { grid-template-columns: 1fr; }
    .salon-service-card { min-height: 13.5rem; }
    .salon-contact-cards { grid-template-columns: 1fr; }
    .salon-map-card { min-height: 23rem; }
    .salon-map-card iframe { min-height: 20rem; }
    .salon-final-cta .container { align-items: flex-start; flex-direction: column; }
    .salon-final-cta .button-light { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-booking, .footer-grid small { grid-column: auto; }
    .salon-gallery-mosaic { grid-auto-rows: 16rem; }
    .mobile-booking-bar { position: fixed; z-index: 40; right: .75rem; bottom: .75rem; left: .75rem; display: flex; min-height: 3.35rem; align-items: center; padding: 0 1rem; color: #fff; border-radius: .9rem; box-shadow: 0 .9rem 2.2rem rgba(73, 51, 68, .3); font-weight: 850; text-decoration: none; }
    .salon-booking-page { width: min(100% - 1rem, 1180px); padding-top: .75rem; padding-bottom: 5.5rem; }
    .salon-booking-shell { border-radius: 1.2rem; }
    .salon-booking-content { padding: 1.2rem; }
    .booking-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem .4rem; }
    .booking-progress li { grid-template-columns: 1.45rem minmax(0, 1fr); }
    .salon-booking-heading h1 { font-size: clamp(2.5rem, 13vw, 3.6rem); }
    .booking-back-link { margin-bottom: 1.2rem; }
    .salon-booking-page .booking-selection-form { gap: 1.2rem; padding: 1rem; }
    .booking-choice-card-body { min-height: 4.85rem; padding: .9rem; }
    .salon-booking-page .slot-list { grid-template-columns: repeat(2, 1fr); }
    .salon-payment-page, .salon-confirmation-page { width: min(100% - 1rem, 1080px); padding-top: .75rem; padding-bottom: 5.5rem; }
    .salon-payment-shell, .salon-confirmation-shell { grid-template-columns: 1fr; border-radius: 1.2rem; }
    .salon-payment-context, .salon-confirmation-context { min-height: auto; padding: 1.2rem; }
    .salon-payment-content, .salon-confirmation-content { padding: 1.2rem; }
    .salon-payment-context .booking-back-link { margin-bottom: 1.8rem; }
    .salon-payment-context .eyebrow { margin-top: 0; }
    .payment-receipt { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.5rem 0 0; gap: .7rem 1rem; }
    .payment-context-trust, .confirmation-context-trust { margin-top: 1.2rem; }
    .salon-payment-heading h1, .salon-confirmation-content h1 { font-size: clamp(2.3rem, 12vw, 3.35rem); }
    .booking-confirmation-details dl div { display: grid; gap: .25rem; }
    .booking-confirmation-details dd { text-align: left; }
}