/* «Salon» restaurant home — ivory paper, plum ink, blush and gold
   (booking/layouts/restaurant_salon_home.html, symposio 05/10). Colours come
   from the tenant: --sl-gold = primary, --sl-plum = secondary. */

body.salon {
    --sl-ivory: #fbf6ef;
    --sl-paper: #fffdf9;
    --sl-blush: #ecccc0;
    --sl-blush-soft: #f6e7e0;
    --sl-ink: #2b0a1f;
    --sl-muted: #7d6370;
    --sl-line: rgba(64, 12, 46, 0.14);
    --sl-serif: var(--font-heading, 'Cormorant Garamond'), 'Cardo', Georgia, serif;
    --sl-sans: 'Jost', 'Manrope', system-ui, sans-serif;
    --r-bg: var(--sl-ivory);
    --r-text: var(--sl-ink);
    background: var(--sl-ivory);
    color: var(--sl-ink);
    font-family: var(--sl-sans);
    font-weight: 400;
    line-height: 1.6;
}
body.salon.sl-locked { overflow: hidden; }
.salon .sl-page { background: var(--sl-ivory); color: var(--sl-ink); }
.salon .sl-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .salon .sl-wrap { padding: 0 32px; } }
.salon a { color: inherit; }
.salon img { max-width: 100%; display: block; }

.salon .sl-eyebrow {
    font-family: var(--sl-sans); font-size: .72rem; font-weight: 500;
    letter-spacing: .3em; text-transform: uppercase; color: var(--sl-gold);
    margin: 0 0 14px;
}
.salon .sl-h2 {
    font-family: var(--sl-serif); font-weight: 500; color: var(--sl-plum);
    font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.06; letter-spacing: -.01em;
    margin: 0 0 18px;
}
.salon .sl-lead { font-size: 1.04rem; line-height: 1.8; color: var(--sl-muted); margin: 0 0 18px; font-weight: 300; }
.salon .sl-muted { color: var(--sl-muted); margin: 0 0 8px; }
.salon .sl-rule { display: block; width: 56px; height: 1px; background: var(--sl-gold); margin: 6px 0 24px; }
.salon .sl-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.salon .sl-center { text-align: center; margin-top: 40px; }
.salon .sl-link {
    display: inline-flex; align-items: center; gap: 6px; color: var(--sl-plum);
    font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--sl-gold); padding-bottom: 2px;
}

/* buttons */
.salon .sl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
    font-family: var(--sl-sans); font-size: .82rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.salon .sl-btn:active { transform: scale(.98); }
.salon .sl-btn-gold { background: var(--sl-gold); color: var(--sl-ink); }
.salon .sl-btn-gold:hover { background: var(--sl-paper); color: var(--sl-plum); }
.salon .sl-btn-plum { background: var(--sl-plum); color: var(--sl-ivory); }
.salon .sl-btn-plum:hover { background: var(--sl-ink); color: var(--sl-gold); }
.salon .sl-btn-glass { background: rgba(255, 253, 249, .12); color: var(--sl-ivory); border-color: rgba(255, 253, 249, .45); backdrop-filter: blur(6px); }
.salon .sl-btn-glass:hover { background: var(--sl-ivory); color: var(--sl-plum); }
.salon .sl-btn-line { background: transparent; color: var(--sl-plum); border-color: var(--sl-plum); }
.salon .sl-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* nav — an ivory bar the paper logo melts into */
.salon .sl-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(251, 246, 239, .93); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sl-line); transition: box-shadow .25s;
}
.salon .sl-nav.is-scrolled { box-shadow: 0 10px 30px -18px rgba(43, 10, 31, .35); }
.salon .sl-nav-in { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; }
@media (min-width: 768px) { .salon .sl-nav-in { padding: 10px 32px; } }
.salon .sl-brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.salon .sl-brand img { height: 42px; width: auto; mix-blend-mode: multiply; filter: brightness(1.12) contrast(1.12); }
.salon .sl-brand span { font-family: var(--sl-serif); font-size: 1.5rem; color: var(--sl-plum); }
.salon .sl-links { display: none; gap: 24px; margin: 0 auto; white-space: nowrap; }
.salon .sl-links a {
    font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
    color: var(--sl-ink); padding: 6px 0; border-bottom: 1px solid transparent;
}
.salon .sl-links a:hover { border-bottom-color: var(--sl-gold); }
.salon .sl-nav-act { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.salon .sl-lang { display: inline-flex; gap: 8px; font-size: .74rem; letter-spacing: .14em; }
.salon .sl-lang a { text-decoration: none; color: var(--sl-muted); }
.salon .sl-lang a[aria-current] { color: var(--sl-plum); font-weight: 600; }
.salon .sl-auth { display: none; align-items: center; gap: 6px; }
.salon .sl-icon {
    width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--sl-line); color: var(--sl-plum); font-size: 1.05rem; text-decoration: none; cursor: pointer;
}
.salon .sl-nav-book { display: none; min-height: 40px; padding: 0 18px; font-size: .72rem; letter-spacing: .12em; }
@media (min-width: 576px) { .salon .sl-nav-book { display: inline-flex; } }
@media (min-width: 1200px) { .salon .sl-auth { display: inline-flex; } }
@media (min-width: 992px) {
    .salon .sl-links { display: flex; }
    .salon .sl-burger { display: none; }
    .salon .sl-brand img { height: 48px; }
}
.salon .cart-badge { display: none; }

/* drawer (phones) */
.salon .sl-drawer {
    position: fixed; inset: 0; z-index: 140; background: var(--sl-ivory);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 36px;
    padding: 72px 24px 40px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.salon .sl-drawer.open { opacity: 1; visibility: visible; }
.salon .sl-drawer-x {
    position: absolute; top: 14px; right: 16px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--sl-line); background: transparent; color: var(--sl-plum); font-size: 1.1rem;
}
.salon .sl-drawer-links { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.salon .sl-drawer-links a { font-family: var(--sl-serif); font-size: 2.1rem; color: var(--sl-plum); text-decoration: none; }
.salon .sl-drawer-act { display: flex; flex-direction: column; gap: 10px; width: min(320px, 100%); }

/* hero */
.salon .sl-hero {
    position: relative; min-height: 88svh; display: flex; flex-direction: column; justify-content: flex-end;
    color: var(--sl-ivory); overflow: hidden; background: var(--sl-plum);
}
.salon .sl-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.salon .sl-hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(43, 10, 31, .28) 0%, rgba(43, 10, 31, .18) 32%, rgba(43, 10, 31, .72) 72%, rgba(43, 10, 31, .94) 100%);
}
.salon .sl-hero-in { position: relative; width: 100%; padding-top: 120px; padding-bottom: 36px; }
.salon .sl-hero-name {
    font-family: var(--sl-sans); font-size: .76rem; font-weight: 500; letter-spacing: .32em;
    text-transform: uppercase; color: var(--sl-gold); margin: 0 0 18px;
}
.salon .sl-hero-name .lb-h1-sub { color: rgba(251, 246, 239, .78); letter-spacing: .14em; font-size: .9em !important; }
.salon .sl-hero-title {
    font-family: var(--sl-serif); font-weight: 500; text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.04; letter-spacing: .02em;
    max-width: 17ch; margin: 0 0 14px; text-wrap: balance;
}
.salon .sl-hero-kicker { font-family: var(--sl-serif); font-style: italic; font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--sl-gold); margin: 0 0 26px; }
.salon .sl-hero .sl-cta { margin-top: 26px; }
.salon .sl-facts { position: relative; border-top: 1px solid rgba(251, 246, 239, .18); background: rgba(43, 10, 31, .55); backdrop-filter: blur(8px); }
.salon .sl-facts-in { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-top: 14px; padding-bottom: 14px; }
.salon .sl-fact { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: rgba(251, 246, 239, .9); text-decoration: none; }
.salon .sl-fact i { color: var(--sl-gold); }
.salon .sl-fact.is-open i { color: #9fd8a8; }

/* story */
.salon .sl-story { padding: 88px 0; background: var(--sl-ivory); }
.salon .sl-story-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 992px) { .salon .sl-story-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; } }
.salon .sl-chef { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--sl-line); }
.salon .sl-chef-name { font-family: var(--sl-serif); font-style: italic; font-size: 1.9rem; color: var(--sl-plum); margin: 0 0 8px; line-height: 1.1; }
.salon .sl-chef-text { color: var(--sl-muted); font-weight: 300; margin: 0; }
.salon .sl-story-photos { position: relative; min-height: 360px; }
.salon .sl-ph { margin: 0; overflow: hidden; border-radius: 2px; box-shadow: 0 30px 60px -36px rgba(43, 10, 31, .55); }
.salon .sl-ph img { width: 100%; height: 100%; object-fit: cover; }
.salon .sl-ph-1 { width: 78%; aspect-ratio: 4 / 5; }
.salon .sl-ph-2 { position: absolute; right: 0; bottom: -28px; width: 46%; aspect-ratio: 1; border: 8px solid var(--sl-ivory); }
.salon .sl-story-photos::before {
    content: ''; position: absolute; top: -16px; left: -16px; width: 60%; height: 70%;
    border: 1px solid var(--sl-gold); z-index: 0; pointer-events: none;
}
.salon .sl-story-photos .sl-ph-1 { position: relative; z-index: 1; }
.salon .sl-story-photos .sl-ph-2 { z-index: 2; }
.salon .sl-story-photos.is-single .sl-ph-1 { width: 100%; aspect-ratio: 4 / 3; }

/* signature dishes */
.salon .sl-sign { padding: 88px 0; background: var(--sl-blush-soft); }
.salon .sl-sign-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 18px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none;
}
.salon .sl-sign-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .salon .sl-sign-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 28px; } }
.salon .sl-dish { scroll-snap-align: start; background: var(--sl-paper); padding: 14px 14px 22px; box-shadow: 0 24px 50px -40px rgba(43, 10, 31, .6); }
.salon .sl-dish-img { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px; background: var(--sl-blush); }
.salon .sl-dish-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.salon .sl-dish:hover .sl-dish-img img { transform: scale(1.04); }
.salon .sl-dish-cat { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--sl-gold); margin: 0 0 8px; }
.salon .sl-dish-name { font-family: var(--sl-serif); font-weight: 500; font-size: 1.32rem; line-height: 1.22; color: var(--sl-plum); margin: 0 0 10px; }
.salon .sl-dish-price { margin: 0; font-weight: 500; color: var(--sl-ink); letter-spacing: .04em; }

/* menu at a glance */
.salon .sl-menu { padding: 88px 0; background: var(--sl-ivory); }
.salon .sl-tabs {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 auto 32px;
    padding-bottom: 4px; max-width: 900px; justify-content: flex-start;
}
.salon .sl-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .salon .sl-tabs { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.salon .sl-tab {
    flex: 0 0 auto; border: 1px solid var(--sl-line); background: transparent; color: var(--sl-ink);
    border-radius: 999px; padding: 9px 18px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.salon .sl-tab.on { background: var(--sl-plum); border-color: var(--sl-plum); color: var(--sl-ivory); }
.salon .sl-panel { display: none; max-width: 820px; margin: 0 auto; }
.salon .sl-panel.on { display: block; }
.salon .sl-list { list-style: none; margin: 0; padding: 0; }
.salon .sl-list li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sl-line); }
.salon .sl-item { font-family: var(--sl-serif); font-size: 1.18rem; line-height: 1.35; color: var(--sl-ink); min-width: 0; }
.salon .sl-dots { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted rgba(64, 12, 46, .3); transform: translateY(-4px); }
.salon .sl-price { flex: 0 0 auto; font-weight: 500; color: var(--sl-plum); white-space: nowrap; }
.salon .sl-more { text-align: center; color: var(--sl-muted); font-size: .9rem; margin: 18px 0 0; font-style: italic; }

/* cellar */
.salon .sl-cellar { padding: 96px 0; background: var(--sl-plum); color: var(--sl-ivory); }
.salon .sl-cellar .sl-h2 { color: var(--sl-ivory); }
.salon .sl-cellar-grid { display: grid; gap: 36px 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .salon .sl-cellar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .salon .sl-cellar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.salon .sl-wine { border-top: 1px solid rgba(214, 164, 103, .45); padding-top: 18px; }
.salon .sl-wine-h { font-family: var(--sl-serif); font-weight: 500; font-size: 1.7rem; color: var(--sl-gold); margin: 0 0 4px; }
.salon .sl-wine-from { font-size: .8rem; letter-spacing: .08em; color: rgba(251, 246, 239, .66); margin: 0 0 12px; }
.salon .sl-wine ul { list-style: none; margin: 0; padding: 0; }
.salon .sl-wine li { padding: 5px 0; color: rgba(251, 246, 239, .9); font-weight: 300; line-height: 1.45; }
.salon .sl-bar { margin-top: 56px; text-align: center; }
.salon .sl-bar-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.salon .sl-bar-list span {
    border: 1px solid rgba(251, 246, 239, .3); border-radius: 999px; padding: 7px 16px;
    font-size: .8rem; letter-spacing: .1em; color: rgba(251, 246, 239, .88);
}

/* reservations */
.salon .sl-book {
    position: relative; padding: 120px 0; background-color: var(--sl-ink);
    background-size: cover; background-position: center; color: var(--sl-ivory); text-align: center;
}
.salon .sl-book-shade { position: absolute; inset: 0; background: rgba(43, 10, 31, .72); }
.salon .sl-book-in { position: relative; max-width: 760px; }
.salon .sl-book .sl-h2 { color: var(--sl-ivory); }
.salon .sl-book .sl-lead { color: rgba(251, 246, 239, .82); }
.salon .sl-book .sl-cta { justify-content: center; margin-top: 10px; }

/* gallery */
.salon .sl-gallery { background: var(--sl-ivory); padding: 10px 0 0; }
.salon .sl-gal-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 16px;
}
.salon .sl-gal-row::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .salon .sl-gal-row { grid-auto-columns: 24%; padding: 0 32px; } }
.salon .sl-gal-row figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; }
.salon .sl-gal-row img { width: 100%; height: 100%; object-fit: cover; }

/* visit */
.salon .sl-visit { padding: 96px 0; background: var(--sl-ivory); }
.salon .sl-visit-grid { display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .salon .sl-visit-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.salon .sl-contact { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 8px; }
.salon .sl-contact li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.salon .sl-contact a { text-decoration: none; overflow-wrap: anywhere; }
.salon .sl-contact i { color: var(--sl-gold); }
.salon .sl-social { display: flex; gap: 10px; margin: 0 0 22px; }
.salon .sl-social a {
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--sl-line);
    display: inline-flex; align-items: center; justify-content: center; color: var(--sl-plum); text-decoration: none;
}
.salon .sl-social a:hover { background: var(--sl-plum); color: var(--sl-gold); }
.salon .sl-hours { background: var(--sl-paper); padding: 28px; border: 1px solid var(--sl-line); }
.salon .sl-hours dl { margin: 0; }
.salon .sl-hrow { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sl-line); }
.salon .sl-hrow:last-child { border-bottom: 0; }
.salon .sl-hrow dt { font-weight: 400; color: var(--sl-ink); }
.salon .sl-hrow dd { margin: 0; color: var(--sl-muted); white-space: nowrap; }
.salon .sl-hrow.is-today dt, .salon .sl-hrow.is-today dd { color: var(--sl-plum); font-weight: 600; }
.salon .sl-map { grid-column: 1 / -1; aspect-ratio: 16 / 7; min-height: 260px; border: 1px solid var(--sl-line); overflow: hidden; }
.salon .sl-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.12); }

/* footer */
.salon .sl-footer { background: var(--sl-ink); color: rgba(251, 246, 239, .72); text-align: center; padding: 52px 0 60px; font-size: .88rem; }
.salon .sl-footer p { margin: 0 0 6px; }
.salon .sl-footer-name { font-family: var(--sl-serif); font-size: 1.7rem; color: var(--sl-gold); }
.salon .sl-footer-small { margin-top: 14px !important; font-size: .76rem; opacity: .8; }
.salon .sl-footer a { color: var(--sl-gold); }

/* reused parts in the salon colours */
body.salon .home-action-bar { background: rgba(251, 246, 239, .96); border-top-color: var(--sl-line); }
body.salon .hab-btn { color: var(--sl-plum); border-color: var(--sl-line); }
body.salon .hab-main { background: var(--sl-plum); color: var(--sl-ivory); }
body.salon .booking-modal { font-family: var(--sl-sans); }