/*
Theme Name: Zlatibor Hotels
Theme URI: https://www.zlatiborhotels.com
Author: Ivatech Studio
Author URI: https://www.zlatiborhotels.com
Description: Editorial directory theme for hotels on the Zlatibor plateau, Serbia. Built around the Zlatibor design system — Fraunces / Public Sans / IBM Plex Mono, BEM with .zlb-* prefix.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mytheme-zlatibor
Tags: hotels, travel, editorial, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
 * TABLE OF CONTENTS
 * ------------------------------------------------------------
 *  1. CSS Custom Properties (:root)         — tokens per DS §2/§3/§4/§7 + Appendix
 *  2. Reset & Base
 *  3. Animations (@keyframes)               — DS §7 motion vocabulary
 *  4. Utilities & State                     — .is-visible, .is-active, .zlb-skip, …
 *  5. Components (DS §5)
 *      5.1  Buttons        — .zlb-btn
 *      5.2  Card           — .zlb-card
 *      5.3  Hero           — .zlb-hero
 *      5.4  Navbar         — .zlb-nav
 *      5.5  Footer         — .zlb-foot
 *      5.6  Form           — .zlb-form
 *      5.7  Badge          — .zlb-badge
 *      5.8  Gallery        — .zlb-gallery
 *      5.9  Rating         — .zlb-rating
 *      5.10 Price          — .zlb-price
 *      5.11 Breadcrumbs    — .zlb-crumbs
 *      5.12 Modal          — .zlb-modal
 *      5.13 Tabs           — .zlb-tabs
 *      5.14 Accordion      — .zlb-acc
 *      5.15 Map block      — .zlb-map
 *  6. Page — Homepage (DS §8.2)
 *  7. Page — Single hotel (DS §8.3)
 *  8. Reduced motion
 * ============================================================ */


/* ============================================================
 * 1. CSS CUSTOM PROPERTIES — DS §2 (Color), §3 (Typo), §4 (Spacing/Grid), §7 (Motion)
 * ============================================================ */

:root {
    /* Color — palette */
    --zlb-cream-50:     #f5f1e8;
    --zlb-cream-100:    #ede7d8;
    --zlb-sand-200:     #dcd3bd;
    --zlb-sand-300:     #c4b896;
    --zlb-stone-400:    #9a907a;
    --zlb-stone-500:    #6e6655;
    --zlb-forest-600:   #454a3d;
    --zlb-forest-700:   #2c3328;
    --zlb-forest-800:   #1a1f17;
    --zlb-forest-900:   #0e1109;
    --zlb-moss:         #5a6b3d;
    --zlb-moss-dark:    #3d4a28;
    --zlb-moss-light:   #8a9a6e;
    --zlb-ochre:        #b8884a;
    --zlb-ochre-dark:   #8a5f2c;
    --zlb-ochre-darker: #6f4d24;     /* hover for --ochre buttons */
    --zlb-ochre-light:  #d8b87a;
    --zlb-success:      #5a7a3d;
    --zlb-danger:       #a04030;
    --zlb-warning:      #c08838;
    --zlb-info:         #4a6678;
    --zlb-white:        #fff;
    --zlb-overlay-soft: rgba(14, 17, 9, 0.55);
    --zlb-overlay-strong: rgba(14, 17, 9, 0.6);
    --zlb-overlay-dark: rgba(14, 17, 9, 0.75);
    --zlb-cream-blur:   rgba(245, 241, 232, 0.92);

    /* Semantic aliases */
    --zlb-page-bg:        var(--zlb-cream-50);
    --zlb-surface:        var(--zlb-cream-100);
    --zlb-text:           var(--zlb-forest-800);
    --zlb-text-muted:     var(--zlb-stone-500);
    --zlb-text-soft:      var(--zlb-forest-700);
    --zlb-link:           var(--zlb-moss);
    --zlb-link-hover:     var(--zlb-moss-dark);
    --zlb-border:         var(--zlb-stone-500);
    --zlb-border-strong:  var(--zlb-forest-600);
    --zlb-border-soft:    var(--zlb-sand-300);

    /* Typography — self-hosted family substitutions:
       DS specifies Manrope (body) and JetBrains Mono — we serve Public Sans
       and IBM Plex Mono since both ship with this theme and match the
       geometric/monospace requirements of the spec. */
    --zlb-font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
    --zlb-font-body:    'Public Sans', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
    --zlb-font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

    --zlb-text-xs:   0.75rem;   /* 12 / Caption, eyebrow, mono */
    --zlb-text-sm:   0.875rem;  /* 14 / Small UI, footer */
    --zlb-text-base: 1rem;      /* 16 / Body */
    --zlb-text-md:   1.125rem;  /* 18 / Lead paragraph */
    --zlb-text-lg:   1.375rem;  /* 22 / Card title, h4 */
    --zlb-text-xl:   1.75rem;   /* 28 / h3 */
    --zlb-text-2xl:  2.25rem;   /* 36 / h2 */
    --zlb-text-3xl:  3rem;      /* 48 / h1 */
    --zlb-text-4xl:  4rem;      /* 64 / Hero title sm */
    --zlb-text-5xl:  5.25rem;   /* 84 / Hero title lg */
    --zlb-text-6xl:  7rem;      /* 112 / Editorial display */

    --zlb-leading-xs:   16px;
    --zlb-leading-sm:   20px;
    --zlb-leading-base: 24px;
    --zlb-leading-md:   28px;
    --zlb-leading-lg:   30px;
    --zlb-leading-xl:   34px;
    --zlb-leading-2xl:  42px;
    --zlb-leading-3xl:  52px;
    --zlb-leading-4xl:  64px;
    --zlb-leading-5xl:  84px;
    --zlb-leading-6xl:  104px;

    --zlb-track-eyebrow: 0.12em;

    /* Spacing — 8pt scale */
    --zlb-space-1:  4px;
    --zlb-space-2:  8px;
    --zlb-space-3:  12px;
    --zlb-space-4:  16px;
    --zlb-space-5:  20px;
    --zlb-space-6:  24px;
    --zlb-space-8:  32px;
    --zlb-space-10: 40px;
    --zlb-space-12: 48px;
    --zlb-space-16: 64px;
    --zlb-space-20: 80px;
    --zlb-space-24: 96px;
    --zlb-space-32: 128px;

    /* Container & Grid */
    --zlb-container-max: 1280px;
    --zlb-container-pad: clamp(16px, 4vw, 32px);
    --zlb-grid-gap:      var(--zlb-space-6);

    /* Breakpoints (also referenced via media queries) */
    --zlb-bp-sm:  480px;
    --zlb-bp-md:  768px;
    --zlb-bp-lg:  1024px;
    --zlb-bp-xl:  1440px;
    --zlb-bp-2xl: 1680px;

    /* Radii — default is 0 (брвнара is rectilinear) */
    --zlb-radius-none: 0;
    --zlb-radius-sm:   2px;
    --zlb-radius-md:   4px;
    --zlb-radius-pill: 999px;

    /* Elevation — warm-tinted (forest-based, not neutral grey) */
    --zlb-shadow-0: none;
    --zlb-shadow-1: 0 1px 2px rgba(26, 31, 23, 0.06), 0 1px 1px rgba(26, 31, 23, 0.04);
    --zlb-shadow-2: 0 8px 24px -8px rgba(26, 31, 23, 0.12);
    --zlb-shadow-3: 0 24px 48px -16px rgba(26, 31, 23, 0.20);

    /* Motion */
    --zlb-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --zlb-ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
    --zlb-ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --zlb-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --zlb-dur-instant:    0ms;
    --zlb-dur-fast:       120ms;
    --zlb-dur-base:       240ms;
    --zlb-dur-slow:       480ms;
    --zlb-dur-deliberate: 800ms;

    /* Z-index scale */
    --zlb-z-nav:    50;
    --zlb-z-sticky: 40;
    --zlb-z-modal:  100;
    --zlb-z-toast:  200;

    /* Common derived sizes */
    --zlb-touch-min:  44px;       /* WCAG 2.5.8 — 44×44 hit target */
    --zlb-touch-min-sm: 24px;      /* absolute minimum */
}


/* ============================================================
 * 2. RESET & BASE
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    line-height: var(--zlb-leading-base);
    color: var(--zlb-text);
    background: var(--zlb-page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button { font-family: inherit; }

a { color: var(--zlb-link); }
a:hover { color: var(--zlb-link-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    color: var(--zlb-text);
    margin: 0;
    line-height: 1.15;
}

p { margin: 0 0 var(--zlb-space-4); }

hr {
    border: 0;
    border-top: 1px solid var(--zlb-border-soft);
    margin: var(--zlb-space-6) 0;
}

.zlb-container {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
}

/* Section header utilities (used by home + hotel parts) */
.zlb-eyebrow {
    display: block;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    font-weight: 500;
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-text-muted);
    margin: 0;
}
.zlb-section-title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    color: var(--zlb-text);
    margin: 0;
    font-size: clamp(var(--zlb-text-xl), 4vw, var(--zlb-text-2xl));
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.zlb-section-deck {
    margin: 0;
    color: var(--zlb-text-soft);
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    max-width: 56ch;
}
.zlb-section-header {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    margin-bottom: var(--zlb-space-12);
}


/* ============================================================
 * 3. ANIMATIONS — @keyframes per DS §7 (Motion vocabulary)
 * ============================================================ */

@keyframes zlb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes zlb-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes zlb-fade-down {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes zlb-slide-in-right {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none;             opacity: 1; }
}

@keyframes zlb-zoom-in {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes zlb-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes zlb-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes zlb-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}


/* ============================================================
 * 4. UTILITIES & STATE
 * ============================================================ */

/* Skip link / SR-only — both names for compat */
.zlb-skip,
.zlb-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.zlb-skip:focus {
    position: fixed !important;
    top: var(--zlb-space-3); left: var(--zlb-space-3);
    width: auto; height: auto;
    padding: var(--zlb-space-3) var(--zlb-space-4);
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    clip: auto;
    z-index: 9999;
}

/* Reveal on scroll (toggled by .is-visible from JS) */
.zlb-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--zlb-dur-slow) var(--zlb-ease-out),
        transform var(--zlb-dur-slow) var(--zlb-ease-out);
}
.zlb-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* JS-toggleable states (open/close panels, mobile nav, etc.) */
.is-active { /* used by tabs, accordion headers */
    /* component-specific styling lives in 5.13 / 5.14 */
}
.is-open {  /* used by accordion items, submenus, search panel */
    /* component-specific styling */
}

/* Focus ring (WCAG 2.4.11) — always visible on interactive elements */
:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--zlb-moss);
    outline-offset: 2px;
}

/* Utility: visually hidden but accessible */
.zlb-u-visually-hidden {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}


/* ============================================================
 * 5. COMPONENTS — DS §5
 * ============================================================ */

/* ---- 5.1 Buttons — .zlb-btn ---- */
.zlb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zlb-space-2);
    height: var(--zlb-touch-min);
    padding: 0 var(--zlb-space-6);
    border: 1px solid transparent;
    border-radius: var(--zlb-radius-none);
    background: transparent;
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        color var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default),
        transform var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-btn:hover { color: var(--zlb-forest-900); }
.zlb-btn:active { transform: translateY(1px); }
.zlb-btn:focus-visible {
    outline: 3px solid var(--zlb-moss);
    outline-offset: 2px;
}
.zlb-btn[disabled],
.zlb-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

.zlb-btn--primary   { background: var(--zlb-moss);        color: var(--zlb-white); border-color: var(--zlb-moss); }
.zlb-btn--primary:hover { background: var(--zlb-moss-dark); border-color: var(--zlb-moss-dark); color: var(--zlb-white); }

.zlb-btn--secondary { background: var(--zlb-forest-800);  color: var(--zlb-white); border-color: var(--zlb-forest-800); }
.zlb-btn--secondary:hover { background: var(--zlb-forest-900); color: var(--zlb-white); }

.zlb-btn--ghost     { background: transparent; color: var(--zlb-forest-800); border-color: var(--zlb-forest-800); }
.zlb-btn--ghost:hover { background: var(--zlb-forest-800); color: var(--zlb-cream-50); }

.zlb-btn--ochre     { background: var(--zlb-ochre-dark); color: var(--zlb-white); border-color: var(--zlb-ochre-dark); }
.zlb-btn--ochre:hover { background: var(--zlb-ochre-darker); }

.zlb-btn--text {
    height: auto;
    padding: 0;
    color: var(--zlb-forest-800);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.zlb-btn--text:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.zlb-btn--inverted { background: var(--zlb-cream-50); color: var(--zlb-forest-800); border-color: var(--zlb-cream-50); }
.zlb-btn--inverted:hover { background: var(--zlb-white); color: var(--zlb-forest-900); }

.zlb-btn--sm { height: 32px; padding: 0 var(--zlb-space-4); font-size: var(--zlb-text-xs); }
.zlb-btn--lg { height: 52px; padding: 0 var(--zlb-space-8); font-size: var(--zlb-text-base); }

.zlb-btn__icon {
    width: 16px; height: 16px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-btn:hover .zlb-btn__icon { transform: translateX(2px); }


/* ---- 5.2 Card — .zlb-card ---- */
.zlb-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: transform var(--zlb-dur-base) var(--zlb-ease-default);
}
.zlb-card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--zlb-sand-200);
}
.zlb-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-slow) var(--zlb-ease-default);
}
.zlb-card:hover .zlb-card__media img { transform: scale(1.03); }
.zlb-card:active { transform: scale(0.98); }
.zlb-card__badge {
    position: absolute;
    top: var(--zlb-space-3);
    left: var(--zlb-space-3);
    background: var(--zlb-ochre-light);
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    padding: var(--zlb-space-1) var(--zlb-space-3);
    border-radius: var(--zlb-radius-sm);
}
.zlb-card__fav {
    position: absolute;
    top: var(--zlb-space-3);
    right: var(--zlb-space-3);
    width: var(--zlb-touch-min);
    height: var(--zlb-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zlb-cream-blur);
    border: 0;
    border-radius: var(--zlb-radius-pill);
    cursor: pointer;
    transition: transform var(--zlb-dur-fast) var(--zlb-ease-spring);
}
.zlb-card__fav:hover  { transform: scale(1.08); }
.zlb-card__fav:active { transform: scale(0.92); }
.zlb-card__body {
    background: var(--zlb-cream-100);
    padding: var(--zlb-space-5) var(--zlb-space-5) var(--zlb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
    flex: 1;
}
.zlb-card__loc {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-text-muted);
}
.zlb-card__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: var(--zlb-text-lg);
    line-height: 1.2;
    color: var(--zlb-forest-800);
    margin: 0;
    letter-spacing: -0.01em;
}
.zlb-card__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--zlb-space-3);
    margin-top: auto;
    padding-top: var(--zlb-space-4);
}


/* ---- 5.3 Hero — .zlb-hero ---- */
.zlb-hero {
    position: relative;
    background: var(--zlb-cream-50);
}
.zlb-hero__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding: clamp(var(--zlb-space-10), 6vw, var(--zlb-space-20)) var(--zlb-container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-12);
    align-items: center;
}
.zlb-hero__photo {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--zlb-sand-200);
}
.zlb-hero__photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-deliberate) var(--zlb-ease-out);
}
.zlb-hero__type {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-6);
}
.zlb-hero__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--zlb-space-3);
}
.zlb-hero__eyebrow::before {
    content: '';
    flex: 0 0 48px;
    height: 1px;
    background: var(--zlb-moss);
}
.zlb-hero__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    color: var(--zlb-forest-800);
    margin: 0;
    font-size: clamp(2.5rem, 6vw, var(--zlb-text-4xl));
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variation-settings: "opsz" 144;
}
.zlb-hero__title em {
    font-style: italic;
    color: var(--zlb-moss-dark);
}
.zlb-hero__lede {
    margin: 0;
    color: var(--zlb-text-soft);
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    max-width: 42ch;
}
.zlb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zlb-space-4);
    align-items: center;
    margin-top: var(--zlb-space-2);
}
@media (min-width: 1024px) {
    .zlb-hero__inner {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--zlb-space-16);
        min-height: 80vh;
    }
}


/* ---- 5.4 Navbar — .zlb-nav ---- */
.zlb-nav {
    position: sticky;
    top: 0;
    z-index: var(--zlb-z-nav);
    width: 100%;
    background: var(--zlb-cream-50);
    border-bottom: 1px solid var(--zlb-border-soft);
    transition:
        background var(--zlb-dur-base) var(--zlb-ease-default),
        box-shadow var(--zlb-dur-base) var(--zlb-ease-default),
        border-color var(--zlb-dur-base) var(--zlb-ease-default);
}
.zlb-nav.is-scrolled {
    background: var(--zlb-cream-blur);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--zlb-shadow-2);
    border-bottom-color: var(--zlb-border-soft);
}

.zlb-nav__inner {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding-inline: var(--zlb-container-pad);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zlb-space-4);
    transition: height var(--zlb-dur-base) var(--zlb-ease-default);
}
@media (min-width: 1024px) {
    .zlb-nav__inner { gap: var(--zlb-space-8); justify-content: flex-start; }
}
.zlb-nav.is-scrolled .zlb-nav__inner { height: 56px; }

.zlb-nav__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--zlb-forest-800);
    line-height: 1;
    flex-shrink: 0;
    min-width: 0;
}
.zlb-nav__brand-name {
    font-family: var(--zlb-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.5rem;          /* mobile default — ~24px */
    letter-spacing: -0.01em;
    color: var(--zlb-forest-800);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 1024px) {
    .zlb-nav__brand-name { font-size: 1.75rem; }   /* ~28px on desktop */
}
.zlb-nav.is-scrolled .zlb-nav__brand-name { font-size: 1.375rem; }
@media (min-width: 1024px) {
    .zlb-nav.is-scrolled .zlb-nav__brand-name { font-size: 1.5rem; }
}

.zlb-nav__primary {
    display: none;
    flex: 1;
    align-items: center;
    gap: var(--zlb-space-6);
}
.zlb-nav__menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--zlb-space-6);
    align-items: center;
}
.zlb-nav__menu > li > a,
.zlb-nav__menu > li > .menu-item-link {
    display: inline-flex;
    align-items: center;
    height: var(--zlb-touch-min);
    padding-inline: var(--zlb-space-2);
    color: var(--zlb-forest-800);
    text-decoration: none;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-nav__menu > li > a:hover,
.zlb-nav__menu > li.current-menu-item > a,
#menu-top-menu.zlb-nav__menu > li.current-menu-item > a,
#menu-top-menu.zlb-nav__menu > li.current-menu-parent > a {
    color: var(--zlb-moss-dark);
}
.zlb-nav__menu > li.current-menu-item > a {
    position: relative;
}
.zlb-nav__menu > li.current-menu-item > a::after {
    content: '';
    position: absolute;
    left: var(--zlb-space-2);
    right: var(--zlb-space-2);
    bottom: calc(var(--zlb-space-2) - 2px);
    height: 2px;
    background: var(--zlb-moss);
}
.zlb-nav__menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    margin-left: 6px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--zlb-stone-500);
    vertical-align: middle;
}
.zlb-nav__menu .submenu,
.zlb-nav__menu .level-1 {
    list-style: none;
    margin: 0; padding: var(--zlb-space-3) 0;
    position: absolute;
    background: var(--zlb-cream-50);
    border: 1px solid var(--zlb-border-soft);
    box-shadow: var(--zlb-shadow-2);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity var(--zlb-dur-fast) var(--zlb-ease-default),
        transform var(--zlb-dur-fast) var(--zlb-ease-default),
        visibility 0s linear var(--zlb-dur-fast);
}
.zlb-nav__menu li.menu-item-has-children { position: relative; }
.zlb-nav__menu li.menu-item-has-children:hover > .submenu,
.zlb-nav__menu li.menu-item-has-children:hover > .level-1,
.zlb-nav__menu li.is-open > .submenu,
.zlb-nav__menu li.is-open > .level-1 {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.zlb-nav__menu .submenu a,
.zlb-nav__menu .level-1 a {
    display: block;
    padding: var(--zlb-space-3) var(--zlb-space-5);
    color: var(--zlb-forest-800);
    font-size: var(--zlb-text-sm);
    text-decoration: none;
    transition: background var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-nav__menu .submenu a:hover,
.zlb-nav__menu .level-1 a:hover { background: var(--zlb-cream-100); }

.zlb-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--zlb-space-3);
    margin-left: auto;
    flex-shrink: 0;
}
.zlb-nav__icon-btn {
    width: var(--zlb-touch-min);
    height: var(--zlb-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--zlb-forest-800);
    color: var(--zlb-forest-800);
    cursor: pointer;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-nav__icon-btn:hover { background: var(--zlb-forest-800); color: var(--zlb-cream-50); }
.zlb-nav__icon-btn svg {
    width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.zlb-nav__phone {
    display: none;
    align-items: center;
    gap: var(--zlb-space-2);
    color: var(--zlb-forest-800);
    text-decoration: none;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    letter-spacing: 0.02em;
    padding: 0 var(--zlb-space-3);
    height: var(--zlb-touch-min);
    border: 1px solid var(--zlb-forest-800);
    transition: background var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-nav__phone:hover { background: var(--zlb-forest-800); color: var(--zlb-cream-50); }
.zlb-nav__phone svg { width: 14px; height: 14px; fill: currentColor; }

.zlb-nav__burger {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    width: var(--zlb-touch-min);
    height: var(--zlb-touch-min);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.zlb-nav__burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--zlb-forest-800);
    transition:
        transform var(--zlb-dur-fast) var(--zlb-ease-default),
        opacity var(--zlb-dur-fast) var(--zlb-ease-default);
}
body.menu-opened .zlb-nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-opened .zlb-nav__burger span:nth-child(2) { opacity: 0; }
body.menu-opened .zlb-nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1024px) {
    .zlb-nav__primary { display: flex; }
    .zlb-nav__burger { display: none; }
}
@media (min-width: 768px) {
    .zlb-nav__phone { display: inline-flex; }
}
@media (max-width: 1023px) {
    .zlb-nav__primary {
        display: flex;
        position: fixed;
        inset: 0;
        background: var(--zlb-cream-50);
        z-index: 9999;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--zlb-space-6) var(--zlb-container-pad) var(--zlb-space-12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity var(--zlb-dur-base) var(--zlb-ease-default),
            transform var(--zlb-dur-base) var(--zlb-ease-default),
            visibility 0s linear var(--zlb-dur-base);
        overflow-y: auto;
    }
    body.admin-bar .zlb-nav__primary { top: 32px; }
}
@media (max-width: 782px) {
    body.admin-bar .zlb-nav__primary { top: 46px; }
}
@media (max-width: 1023px) {
    body.menu-opened .zlb-nav__primary {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }
    .zlb-nav__menu {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
    }
    .zlb-nav__menu > li { border-bottom: 1px solid var(--zlb-border-soft); }
    .zlb-nav__menu > li > a {
        height: 56px;
        font-size: var(--zlb-text-md);
        padding-inline: 0;
    }
    .zlb-nav__menu .submenu,
    .zlb-nav__menu .level-1 {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height var(--zlb-dur-base) var(--zlb-ease-default);
    }
    .zlb-nav__menu li.is-open > .submenu,
    .zlb-nav__menu li.is-open > .level-1 {
        max-height: 600px;
        padding-bottom: var(--zlb-space-3);
    }
}

/* Search panel (header overlay) */
.zlb-nav__search {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--zlb-cream-50);
    border-bottom: 1px solid var(--zlb-border-soft);
    box-shadow: var(--zlb-shadow-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity var(--zlb-dur-base) var(--zlb-ease-default),
        transform var(--zlb-dur-base) var(--zlb-ease-default),
        visibility 0s linear var(--zlb-dur-base);
}
.zlb-nav__search.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.zlb-nav__search-inner {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding: var(--zlb-space-6) var(--zlb-container-pad);
}
.zlb-nav__search-row {
    display: flex;
    align-items: center;
    gap: var(--zlb-space-3);
    border-bottom: 2px solid var(--zlb-forest-800);
    padding-bottom: var(--zlb-space-2);
}
.zlb-nav__search-icon {
    width: 20px; height: 20px;
    fill: none; stroke: var(--zlb-stone-500); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.zlb-nav__search-input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--zlb-font-display);
    font-size: clamp(var(--zlb-text-lg), 3vw, var(--zlb-text-2xl));
    color: var(--zlb-forest-800);
    padding: var(--zlb-space-2) 0;
    outline: none;
    min-width: 0;
}
.zlb-nav__search-input::placeholder { color: var(--zlb-text-muted); }
.zlb-nav__search-submit {
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    border: 0;
    padding: 0 var(--zlb-space-5);
    height: 40px;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-nav__search-submit:hover { background: var(--zlb-forest-900); }
.zlb-nav__search-hint {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-text-muted);
    margin: var(--zlb-space-3) 0 0;
    letter-spacing: 0.04em;
}


/* ---- 5.5 Footer — .zlb-foot ---- */
.zlb-foot {
    background: var(--zlb-forest-900);
    color: var(--zlb-cream-50);
    margin-top: 0;
}
.zlb-foot__inner {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding: var(--zlb-space-20) var(--zlb-container-pad) var(--zlb-space-8);
}
.zlb-foot__top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-12);
    padding-bottom: var(--zlb-space-12);
    border-bottom: 1px solid var(--zlb-forest-700);
}
.zlb-foot__brand {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-4);
}
.zlb-foot__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--zlb-cream-50);
    font-family: var(--zlb-font-display);
    font-style: italic;
    font-size: var(--zlb-text-xl);
    letter-spacing: -0.01em;
}
.zlb-foot__logo img { height: 140px; width: 140px; object-fit: contain; }
.zlb-foot__tagline {
    margin: 0;
    color: var(--zlb-sand-300);
    font-size: var(--zlb-text-base);
    line-height: var(--zlb-leading-base);
    max-width: 36ch;
}
.zlb-foot__col-title {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-400);
    margin: 0 0 var(--zlb-space-4);
}
.zlb-foot__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-foot__list a {
    color: var(--zlb-cream-50);
    text-decoration: none;
    font-size: var(--zlb-text-base);
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-foot__list a:hover {
    color: var(--zlb-moss-light);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.zlb-foot__office {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
}
.zlb-foot__office-row {
    display: inline-flex;
    align-items: center;
    gap: var(--zlb-space-3);
    color: var(--zlb-cream-50);
    text-decoration: none;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-foot__office-row:hover { color: var(--zlb-moss-light); }
.zlb-foot__office-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--zlb-stone-400);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transition: stroke var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-foot__office-row:hover .zlb-foot__office-icon { stroke: var(--zlb-moss-light); }
.zlb-foot__office address {
    margin: 0;
    line-height: var(--zlb-leading-base);
}
.zlb-foot__bottom {
    padding-top: var(--zlb-space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--zlb-space-4);
}
.zlb-foot__copy {
    margin: 0;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-400);
    letter-spacing: 0.04em;
}
.zlb-foot__legal {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: var(--zlb-space-5);
}
.zlb-foot__legal a {
    color: var(--zlb-stone-400);
    text-decoration: none;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
}
.zlb-foot__legal a:hover { color: var(--zlb-cream-50); }
@media (max-width: 767px) {
    .zlb-foot__top { text-align: center; }
    .zlb-foot__brand { align-items: center; }
    .zlb-foot__logo { justify-content: center; }
    .zlb-foot__tagline { margin-inline: auto; }
    .zlb-foot__list,
    .zlb-foot__office { align-items: center; }
    .zlb-foot__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}
@media (min-width: 768px) {
    .zlb-foot__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
    .zlb-foot__top {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--zlb-space-16);
    }
}


/* ---- 5.6 Form — .zlb-form ---- */
.zlb-form {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-5);
}
.zlb-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-form__label {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
}
.zlb-form__input,
.zlb-form__select,
.zlb-form__textarea {
    height: 48px;
    padding: 0 var(--zlb-space-4);
    background: var(--zlb-cream-50);
    border: 1px solid var(--zlb-stone-500);
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    border-radius: var(--zlb-radius-none);
    transition:
        border-color var(--zlb-dur-fast) var(--zlb-ease-default),
        background var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-form__textarea {
    height: auto;
    min-height: 120px;
    padding: var(--zlb-space-3) var(--zlb-space-4);
    line-height: var(--zlb-leading-base);
    resize: vertical;
}
.zlb-form__input:focus,
.zlb-form__select:focus,
.zlb-form__textarea:focus {
    outline: none;
    border: 2px solid var(--zlb-moss);
    padding-inline: calc(var(--zlb-space-4) - 1px);
}
.zlb-form__hint {
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-form__error {
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    color: var(--zlb-danger);
    margin: 0;
}
.zlb-form__group--error .zlb-form__input,
.zlb-form__group--error .zlb-form__select,
.zlb-form__group--error .zlb-form__textarea {
    border-color: var(--zlb-danger);
}


/* ---- 5.7 Badge — .zlb-badge ---- */
.zlb-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--zlb-space-1);
    padding: var(--zlb-space-1) var(--zlb-space-3);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    font-weight: 500;
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    border-radius: var(--zlb-radius-sm);
    background: var(--zlb-cream-100);
    color: var(--zlb-forest-800);
}
.zlb-badge--premium    { background: var(--zlb-ochre-light); color: var(--zlb-forest-800); }
.zlb-badge--new        { background: var(--zlb-moss);        color: var(--zlb-white); }
.zlb-badge--soldout    { background: var(--zlb-stone-400);   color: var(--zlb-forest-800); text-decoration: line-through; }
.zlb-badge--available  { background: var(--zlb-success);     color: var(--zlb-white); }
.zlb-badge--danger     { background: var(--zlb-danger);      color: var(--zlb-white); }
.zlb-badge--warning    { background: var(--zlb-warning);     color: var(--zlb-forest-800); }


/* ---- 5.8 Gallery — .zlb-gallery ---- */
.zlb-gallery {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(180px, auto);
    gap: var(--zlb-space-3);
}
.zlb-gallery__tile {
    position: relative;
    overflow: hidden;
    background: var(--zlb-sand-200);
    cursor: zoom-in;
    border: 0;
    padding: 0;
}
.zlb-gallery__tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-slow) var(--zlb-ease-default);
}
.zlb-gallery__tile:hover img { transform: scale(1.03); }
.zlb-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zlb-overlay-strong);
    color: var(--zlb-cream-50);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}
@media (min-width: 768px) {
    .zlb-gallery--mosaic {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
        grid-auto-rows: 0;
        height: clamp(420px, 55vh, 640px);
        overflow: hidden;
    }
    .zlb-gallery--mosaic .zlb-gallery__tile:nth-child(1) {
        grid-column: 1; grid-row: 1 / span 2;
    }
}

/* ---- Lightbox — #lightbox / .zlb-lightbox (DS §5.8 viewer) ---- */
#lightbox.zlb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--zlb-space-12) var(--zlb-space-6);
    background: rgba(14, 17, 9, 0.95);
    opacity: 0;
    transition: opacity var(--zlb-dur-base) var(--zlb-ease-default);
}
#lightbox.zlb-lightbox.is-open {
    display: flex;
    opacity: 1;
}
#lightbox.zlb-lightbox .zlb-lightbox__image {
    display: block;
    max-width: min(92vw, 1600px);
    max-height: 86vh;
    width: auto;
    height: auto;
    object-fit: contain;
    cursor: zoom-out;
    margin: 0 auto;
}
.zlb-lightbox__close,
.zlb-lightbox__nav {
    position: absolute;
    background: transparent;
    border: 1px solid rgba(245, 241, 232, 0.6);
    color: var(--zlb-cream-50);
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        color var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-lightbox__close:hover,
.zlb-lightbox__nav:hover,
.zlb-lightbox__close:focus-visible,
.zlb-lightbox__nav:focus-visible {
    background: var(--zlb-cream-50);
    color: var(--zlb-forest-900);
    border-color: var(--zlb-cream-50);
    outline: none;
}
.zlb-lightbox__close { top: var(--zlb-space-5); right: var(--zlb-space-5); }
.zlb-lightbox__nav { top: 50%; transform: translateY(-50%); }
.zlb-lightbox__nav--prev { left: var(--zlb-space-5); }
.zlb-lightbox__nav--next { right: var(--zlb-space-5); }
.zlb-lightbox__close svg,
.zlb-lightbox__nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.zlb-lightbox__counter {
    position: absolute;
    bottom: var(--zlb-space-5);
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: var(--zlb-sand-300);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    letter-spacing: 0.06em;
    pointer-events: none;
}
@media (max-width: 767px) {
    #lightbox.zlb-lightbox { padding: var(--zlb-space-12) var(--zlb-space-3); }
    .zlb-lightbox__nav--prev { left: var(--zlb-space-2); }
    .zlb-lightbox__nav--next { right: var(--zlb-space-2); }
    .zlb-lightbox__close { top: var(--zlb-space-3); right: var(--zlb-space-3); }
}


/* ---- 5.9 Rating — .zlb-rating ---- */
.zlb-rating {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--zlb-font-display);
    font-weight: 500;
    color: var(--zlb-ochre-dark);
}
.zlb-rating__score {
    font-size: var(--zlb-text-lg);
    line-height: 1;
}
.zlb-rating__sep {
    font-size: var(--zlb-text-sm);
    color: var(--zlb-stone-500);
    font-family: var(--zlb-font-mono);
}
.zlb-rating__count {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-500);
    margin-left: var(--zlb-space-2);
}
.zlb-rating--lg .zlb-rating__score { font-size: var(--zlb-text-2xl); }
.zlb-rating--lg .zlb-rating__sep   { font-size: var(--zlb-text-base); }


/* ---- 5.10 Price — .zlb-price ---- */
.zlb-price {
    font-family: var(--zlb-font-display);
    font-weight: 500;
    color: var(--zlb-ochre-dark);
    font-size: var(--zlb-text-lg);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.zlb-price__per {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-500);
    text-transform: uppercase;
    letter-spacing: var(--zlb-track-eyebrow);
    margin-left: 2px;
}
.zlb-price__rsd {
    display: block;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-500);
    margin-top: 2px;
}
.zlb-price__strike {
    text-decoration: line-through;
    text-decoration-color: var(--zlb-forest-700);
    opacity: 0.5;
    margin-right: var(--zlb-space-2);
}


/* ---- 5.11 Breadcrumbs — .zlb-crumbs ---- */
.zlb-crumbs {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-stone-500);
}
.zlb-crumbs a {
    color: inherit;
    text-decoration: none;
}
.zlb-crumbs a:hover {
    color: var(--zlb-forest-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zlb-crumbs__sep {
    margin: 0 var(--zlb-space-2);
    color: var(--zlb-sand-300);
}
.zlb-crumbs__current {
    color: var(--zlb-forest-800);
}


/* ---- 5.12 Modal — .zlb-modal ---- */
.zlb-modal {
    position: fixed;
    inset: 0;
    z-index: var(--zlb-z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--zlb-space-6);
    background: var(--zlb-overlay-dark);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: zlb-fade-in var(--zlb-dur-base) var(--zlb-ease-default);
}
.zlb-modal.is-open { display: flex; }
.zlb-modal__panel {
    background: var(--zlb-cream-50);
    max-width: 640px;
    width: 100%;
    padding: var(--zlb-space-8);
    border-radius: var(--zlb-radius-md);
    box-shadow: var(--zlb-shadow-3);
    max-height: calc(100vh - var(--zlb-space-12));
    overflow-y: auto;
    animation: zlb-zoom-in var(--zlb-dur-base) var(--zlb-ease-spring);
}
.zlb-modal__panel--wide { max-width: 900px; }
.zlb-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--zlb-space-4);
    margin-bottom: var(--zlb-space-5);
}
.zlb-modal__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: var(--zlb-text-2xl);
    line-height: 1.15;
    color: var(--zlb-forest-800);
    margin: 0;
}
.zlb-modal__close {
    width: var(--zlb-touch-min);
    height: var(--zlb-touch-min);
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--zlb-forest-800);
}
.zlb-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }


/* ---- 5.13 Tabs — .zlb-tabs ---- */
.zlb-tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--zlb-space-8);
    border-bottom: 1px solid var(--zlb-border-soft);
    overflow-x: auto;
}
.zlb-tabs__tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--zlb-space-3) 0;
    margin-bottom: -1px;
    color: var(--zlb-stone-500);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    cursor: pointer;
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default), border-color var(--zlb-dur-fast) var(--zlb-ease-default);
    white-space: nowrap;
}
.zlb-tabs__tab:hover { color: var(--zlb-forest-700); }
.zlb-tabs__tab.is-active {
    color: var(--zlb-forest-800);
    border-bottom-color: var(--zlb-moss);
}
.zlb-tabs__panel {
    display: none;
    padding: var(--zlb-space-6) 0;
}
.zlb-tabs__panel.is-active {
    display: block;
    animation: zlb-fade-in var(--zlb-dur-base) var(--zlb-ease-out);
}


/* ---- 5.14 Accordion — .zlb-acc ---- */
.zlb-acc {
    list-style: none;
    margin: 0;
    padding: 0;
}
.zlb-acc__item {
    border-bottom: 1px solid var(--zlb-forest-600);
    position: relative;
}
.zlb-acc__item.is-open {
    background: var(--zlb-cream-100);
}
.zlb-acc__item.is-open::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--zlb-moss);
}
.zlb-acc__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--zlb-space-4);
    width: 100%;
    background: var(--zlb-cream-50);
    border: 0;
    padding: 0 var(--zlb-space-4);
    height: 56px;
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-display);
    font-size: var(--zlb-text-md);
    text-align: left;
    cursor: pointer;
    transition: background var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-acc__item.is-open .zlb-acc__header { background: transparent; }
.zlb-acc__icon {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-lg);
    color: var(--zlb-stone-500);
    transition: transform var(--zlb-dur-fast) var(--zlb-ease-default);
    flex-shrink: 0;
}
.zlb-acc__item.is-open .zlb-acc__icon {
    transform: rotate(45deg);    /* + → × */
}
.zlb-acc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--zlb-dur-base) var(--zlb-ease-default);
}
.zlb-acc__item.is-open .zlb-acc__panel { max-height: 800px; }
.zlb-acc__panel-inner {
    padding: 0 var(--zlb-space-4) var(--zlb-space-4);
    color: var(--zlb-text-soft);
    font-size: var(--zlb-text-base);
    line-height: var(--zlb-leading-base);
}


/* ---- 5.15 Map block — .zlb-map ---- */
.zlb-map {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--zlb-sand-200);
    overflow: hidden;
}
@media (min-width: 1024px) {
    .zlb-map { aspect-ratio: 16 / 10; }
}
.zlb-map__canvas { width: 100%; height: 100%; }
.zlb-map__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
}
.zlb-map__marker {
    width: 24px;
    height: 24px;
    border-radius: var(--zlb-radius-pill);
    background: var(--zlb-moss);
    display: flex;
    align-items: center;
    justify-content: center;
}
.zlb-map__marker::after {
    content: '';
    width: 8px; height: 8px;
    background: var(--zlb-cream-50);
    border-radius: var(--zlb-radius-pill);
}


/* ---- Pagination — .zlb-pagination (also the WP page-numbers fallback) ---- */
.zlb-pagination,
.page-numbers {
    list-style: none;
    margin: var(--zlb-space-12) 0 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--zlb-space-2);
    flex-wrap: wrap;
}
.zlb-pagination a,
.zlb-pagination span,
.page-numbers li a,
.page-numbers li span,
.page-numbers a.page-numbers,
.page-numbers span.page-numbers {
    min-width: var(--zlb-touch-min);
    height: var(--zlb-touch-min);
    padding: 0 var(--zlb-space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--zlb-border-soft);
    color: var(--zlb-forest-800);
    text-decoration: none;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        color var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-pagination a:hover,
.page-numbers a:hover {
    background: var(--zlb-cream-100);
    border-color: var(--zlb-forest-600);
}
.zlb-pagination .current,
.page-numbers .current,
.page-numbers span.current {
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    border-color: var(--zlb-forest-800);
}


/* ============================================================
 * 6. PAGE — HOMEPAGE — DS §8.2
 * ============================================================ */

.zlb-home {
    background: var(--zlb-cream-50);
    color: var(--zlb-forest-800);
}
.zlb-home > main { display: block; }

.zlb-section {
    padding-block: clamp(var(--zlb-space-16), 8vw, var(--zlb-space-24));
}
.zlb-section--tight { padding-block: clamp(var(--zlb-space-10), 5vw, var(--zlb-space-16)); }

/* ---- §8.2.2 — Band USP ---- */
.zlb-band {
    background: var(--zlb-cream-100);
    padding-block: clamp(var(--zlb-space-12), 6vw, var(--zlb-space-20));
}
.zlb-band__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
}
.zlb-band__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-8);
}
.zlb-usp {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    border-top: 1px solid var(--zlb-forest-600);
    padding-top: var(--zlb-space-6);
}
.zlb-usp__num {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    letter-spacing: 0.06em;
    color: var(--zlb-stone-500);
}
.zlb-usp__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: var(--zlb-text-lg);
    line-height: 1.25;
    color: var(--zlb-forest-800);
    margin: 0;
}
.zlb-usp__body {
    margin: 0;
    color: var(--zlb-text-soft);
    font-size: var(--zlb-text-base);
    line-height: var(--zlb-leading-base);
    max-width: 36ch;
}
@media (min-width: 768px) {
    .zlb-band__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zlb-space-12); }
}

/* ---- §8.2.3 — Featured ---- */
.zlb-featured { display: block; }
.zlb-featured__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
}
.zlb-featured__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--zlb-space-8);
    margin-bottom: var(--zlb-space-12);
    flex-wrap: wrap;
}
.zlb-featured__head .zlb-section-header { flex: 1 1 auto; margin: 0; }
.zlb-featured__see-all {
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-featured__see-all:hover { color: var(--zlb-moss-dark); }
.zlb-featured__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-6);
}
@media (min-width: 768px) {
    .zlb-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .zlb-featured__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- §8.2.4 — Discover (6 tiles) ---- */
.zlb-discover { background: var(--zlb-cream-50); }
.zlb-discover__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
}
.zlb-discover__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-4);
}
.zlb-tile {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--zlb-sand-200);
    text-decoration: none;
    display: block;
}
.zlb-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-slow) var(--zlb-ease-default);
}
.zlb-tile:hover img { transform: scale(1.04); }
.zlb-tile::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, var(--zlb-overlay-soft) 100%);
    pointer-events: none;
}
.zlb-tile__label {
    position: absolute;
    left: var(--zlb-space-5);
    bottom: var(--zlb-space-5);
    z-index: 1;
    color: var(--zlb-cream-50);
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: var(--zlb-text-xl);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.zlb-tile__count {
    display: block;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-cream-100);
    margin-top: var(--zlb-space-1);
}
@media (min-width: 600px) {
    .zlb-discover__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zlb-space-5); }
}
@media (min-width: 1024px) {
    .zlb-discover__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zlb-space-6); }
}

/* ---- §8.2.5 — Editorial (12-col asymmetric) ---- */
.zlb-editorial { display: block; }
.zlb-editorial__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-12);
    align-items: center;
}
.zlb-editorial__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--zlb-sand-200);
}
.zlb-editorial__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-deliberate) var(--zlb-ease-out);
}
.zlb-editorial__type {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-5);
}
.zlb-editorial__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-editorial__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: clamp(var(--zlb-text-2xl), 4.5vw, var(--zlb-text-3xl));
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--zlb-forest-800);
    margin: 0;
}
.zlb-editorial__quote {
    font-family: var(--zlb-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: var(--zlb-text-lg);
    line-height: 1.35;
    color: var(--zlb-forest-700);
    border-left: 2px solid var(--zlb-moss);
    padding-left: var(--zlb-space-4);
    margin: 0;
}
.zlb-editorial__body {
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    color: var(--zlb-text-soft);
    margin: 0;
    max-width: 50ch;
}
.zlb-editorial__byline {
    display: flex;
    gap: var(--zlb-space-3);
    align-items: center;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zlb-stone-500);
}
@media (min-width: 1024px) {
    .zlb-editorial__inner {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--zlb-space-16);
    }
    .zlb-editorial__media { grid-column: 1 / span 7; aspect-ratio: 5 / 4; }
    .zlb-editorial__type  { grid-column: 8 / span 5; }
}

/* ---- §8.2.6 — Listings (filters + grid) ---- */
.zlb-listings { display: block; }
.zlb-listings__inner {
    max-width: var(--zlb-container-max);
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
}
.zlb-listings__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--zlb-space-6);
    margin-bottom: var(--zlb-space-10);
    border-bottom: 1px solid var(--zlb-forest-600);
    padding-bottom: var(--zlb-space-6);
    flex-wrap: wrap;
}
.zlb-listings__count {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    color: var(--zlb-stone-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.zlb-listings__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-10);
}
.zlb-filters {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-8);
}
.zlb-filters__group { display: flex; flex-direction: column; gap: var(--zlb-space-3); }
.zlb-filters__title {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-filters__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-filters__list a {
    color: var(--zlb-forest-800);
    font-size: var(--zlb-text-base);
    text-decoration: none;
    padding: var(--zlb-space-1) 0;
    transition: color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-filters__list a:hover {
    color: var(--zlb-moss-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.zlb-filters__count {
    color: var(--zlb-stone-500);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    margin-left: var(--zlb-space-1);
}
.zlb-listings__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-6);
}
.zlb-listings__more {
    margin-top: var(--zlb-space-12);
    text-align: center;
}
@media (min-width: 600px) {
    .zlb-listings__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .zlb-listings__layout {
        grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr);
        gap: var(--zlb-space-12);
        align-items: start;
    }
    .zlb-listings__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zlb-space-8); }
}

/* ---- §8.2.7 — CTA band (newsletter, forest-800) ---- */
.zlb-cta-band {
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    padding-block: clamp(var(--zlb-space-16), 8vw, var(--zlb-space-24));
}
.zlb-cta-band__inner {
    max-width: 880px;
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-6);
    align-items: flex-start;
}
.zlb-cta-band__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-sand-300);
    margin: 0;
}
.zlb-cta-band__title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: clamp(var(--zlb-text-2xl), 4.5vw, var(--zlb-text-3xl));
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--zlb-cream-50);
    margin: 0;
}
.zlb-cta-band__body {
    margin: 0;
    color: var(--zlb-sand-300);
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    max-width: 60ch;
}
.zlb-cta-band__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    margin-top: var(--zlb-space-4);
}
.zlb-cta-band__row {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    width: 100%;
}
.zlb-cta-band__input {
    flex: 1 1 auto;
    height: 52px;
    padding: 0 var(--zlb-space-5);
    background: transparent;
    border: 1px solid var(--zlb-cream-50);
    color: var(--zlb-cream-50);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    border-radius: var(--zlb-radius-none);
    transition: border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-cta-band__input::placeholder { color: var(--zlb-sand-300); opacity: 1; }
.zlb-cta-band__input:focus {
    outline: 3px solid var(--zlb-cream-50);
    outline-offset: 2px;
    border-color: var(--zlb-cream-50);
}
.zlb-cta-band__fineprint {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-sand-300);
    margin: 0;
}
@media (min-width: 600px) {
    .zlb-cta-band__row { flex-direction: row; align-items: stretch; }
}


/* ============================================================
 * 7. PAGE — SINGLE HOTEL — DS §8.3
 * ============================================================ */

.zlb-hotel {
    background: var(--zlb-cream-50);
    color: var(--zlb-forest-800);
    padding-bottom: var(--zlb-space-20);
}
.zlb-hotel__breadcrumbs {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding: var(--zlb-space-6) var(--zlb-container-pad) 0;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-stone-500);
}
.zlb-hotel__breadcrumbs a { color: inherit; text-decoration: none; }
.zlb-hotel__breadcrumbs a:hover {
    color: var(--zlb-forest-800);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.zlb-hotel__breadcrumbs .sep {
    margin: 0 var(--zlb-space-2);
    color: var(--zlb-sand-300);
}

/* ---- Header ---- */
.zlb-hotel__header {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding: var(--zlb-space-8) var(--zlb-container-pad) var(--zlb-space-10);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-5);
}
.zlb-hotel__header-eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0 0 var(--zlb-space-3);
}
.zlb-hotel__header-title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    color: var(--zlb-forest-800);
    margin: 0;
    font-size: clamp(var(--zlb-text-2xl), 5vw, var(--zlb-text-3xl));
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-variation-settings: "opsz" 144;
}
.zlb-hotel__header-deck {
    margin: var(--zlb-space-4) 0 0;
    color: var(--zlb-text-soft);
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    max-width: 60ch;
}
.zlb-hotel__header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--zlb-space-5);
    align-items: baseline;
    margin-top: var(--zlb-space-5);
    padding-top: var(--zlb-space-5);
    border-top: 1px solid var(--zlb-sand-300);
}
.zlb-hotel__header-rating {
    display: flex;
    align-items: baseline;
    gap: var(--zlb-space-2);
    font-family: var(--zlb-font-display);
}
.zlb-hotel__header-score {
    font-size: var(--zlb-text-xl);
    font-weight: 500;
    color: var(--zlb-ochre-dark);
    line-height: 1;
}
.zlb-hotel__header-score-sep {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-500);
}
.zlb-hotel__header-rating-label {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--zlb-track-eyebrow);
    color: var(--zlb-stone-500);
}
.zlb-hotel__header-type {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.zlb-hotel__header-actions {
    display: flex;
    gap: var(--zlb-space-3);
    align-items: center;
    flex-wrap: wrap;
}
@media (min-width: 1024px) {
    .zlb-hotel__header {
        grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
        align-items: end;
        gap: var(--zlb-space-12);
    }
    .zlb-hotel__header-title { font-size: var(--zlb-text-4xl); }
    .zlb-hotel__header-actions { justify-content: flex-end; }
}

/* ---- Gallery (single hotel) ---- */
.zlb-hotel__gallery {
    max-width: var(--zlb-container-max);
    margin: 0 auto var(--zlb-space-16);
    padding-inline: var(--zlb-container-pad);
}
.zlb-hotel__gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(180px, auto);
    gap: var(--zlb-space-3);
}
.zlb-hotel__gallery-tile {
    position: relative;
    overflow: hidden;
    background: var(--zlb-sand-200);
    cursor: zoom-in;
    border: 0;
    padding: 0;
}
.zlb-hotel__gallery-tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--zlb-dur-slow) var(--zlb-ease-default);
}
.zlb-hotel__gallery-tile:hover img { transform: scale(1.03); }
.zlb-hotel__gallery-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--zlb-overlay-strong);
    color: var(--zlb-cream-50);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    pointer-events: none;
}
@media (min-width: 768px) {
    .zlb-hotel__gallery-grid {
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr);
        grid-auto-rows: 0;
        height: clamp(420px, 55vh, 640px);
        overflow: hidden;
    }
    .zlb-hotel__gallery-tile:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
}

/* ---- 12-col layout grid ---- */
.zlb-hotel__layout {
    max-width: var(--zlb-container-max);
    margin: 0 auto;
    padding-inline: var(--zlb-container-pad);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-12);
    align-items: flex-start;
}
.zlb-hotel__article {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-16);
    min-width: 0;
}
/* Below-fold sections (reviews, rooms, facilities, …) — full container
   width, sits outside the 7/5 layout grid. */
.zlb-hotel__sections {
    max-width: var(--zlb-container-max);
    margin: var(--zlb-space-16) auto 0;
    padding-inline: var(--zlb-container-pad);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-16);
}
.zlb-hotel__article > .zlb-hotel__section { padding-block: 0; }
.zlb-hotel__section + .zlb-hotel__section {
    border-top: 1px solid var(--zlb-sand-300);
    padding-top: var(--zlb-space-12);
}
.zlb-hotel__section-header {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    margin-bottom: var(--zlb-space-6);
}
.zlb-hotel__section-eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-hotel__section-title {
    font-family: var(--zlb-font-display);
    font-weight: 400;
    font-size: var(--zlb-text-2xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--zlb-forest-800);
    margin: 0;
}
.zlb-hotel__intro p {
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    color: var(--zlb-text-soft);
    margin: 0 0 var(--zlb-space-4);
    max-width: 65ch;
}
.zlb-hotel__intro p:first-of-type::first-letter {
    font-family: var(--zlb-font-display);
    font-size: 4em;
    line-height: 0.85;
    float: left;
    margin: 0.05em var(--zlb-space-3) 0 0;
    color: var(--zlb-moss-dark);
    font-weight: 500;
}
@media (min-width: 1024px) {
    .zlb-hotel__layout {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--zlb-space-16);
    }
}

/* ---- Booking aside ---- */
.zlb-booking {
    background: var(--zlb-cream-100);
    border: 1px solid var(--zlb-sand-300);
    padding: var(--zlb-space-6) var(--zlb-space-6) var(--zlb-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-4);
}
.zlb-booking__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-booking__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--zlb-space-2);
    margin-top: var(--zlb-space-1);
}
.zlb-booking__price-eur {
    font-family: var(--zlb-font-display);
    font-size: var(--zlb-text-2xl);
    line-height: 1;
    color: var(--zlb-ochre-dark);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.zlb-booking__price-per {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--zlb-track-eyebrow);
    color: var(--zlb-stone-500);
}
.zlb-booking__rating {
    display: flex;
    align-items: baseline;
    gap: var(--zlb-space-2);
    border-top: 1px solid var(--zlb-sand-300);
    padding-top: var(--zlb-space-4);
}
.zlb-booking__rating-score {
    font-family: var(--zlb-font-display);
    font-size: var(--zlb-text-xl);
    line-height: 1;
    color: var(--zlb-ochre-dark);
    font-weight: 500;
}
.zlb-booking__rating-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zlb-booking__rating-label {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--zlb-track-eyebrow);
    color: var(--zlb-stone-500);
}
.zlb-booking__rating-count {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    color: var(--zlb-stone-500);
}
.zlb-booking__cta { width: 100%; margin-top: var(--zlb-space-3); }
.zlb-booking__cta .zlb-btn { width: 100%; }
.zlb-booking__cta .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
}
.zlb-booking__cta .cta-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    text-decoration: none;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        color var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
/* Primary — Book now (.btn-book) */
.zlb-booking__cta .cta-buttons .btn-book {
    background: var(--zlb-moss);
    color: var(--zlb-white);
    border-color: var(--zlb-moss);
}
.zlb-booking__cta .cta-buttons .btn-book:hover,
.zlb-booking__cta .cta-buttons .btn-book:focus-visible {
    background: var(--zlb-moss-dark);
    border-color: var(--zlb-moss-dark);
    color: var(--zlb-white);
}
/* Ghost — Call us (.btn-call) per DS §5.1 ghost variant */
.zlb-booking__cta .cta-buttons .btn-call {
    background: transparent;
    color: var(--zlb-forest-800);
    border-color: var(--zlb-forest-800);
}
.zlb-booking__cta .cta-buttons .btn-call:hover,
.zlb-booking__cta .cta-buttons .btn-call:focus-visible {
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    border-color: var(--zlb-forest-800);
}
.zlb-booking__trust {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
    border-top: 1px solid var(--zlb-sand-300);
    padding-top: var(--zlb-space-4);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-stone-500);
}
.zlb-booking__trust li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--zlb-space-2);
}
.zlb-booking__trust svg {
    width: 14px; height: 14px;
    fill: none; stroke: var(--zlb-moss); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}

/* Concierge — dark sub-card inside the booking aside, mirrors the
   forest-800 surface used by the global footer (style.css:345). */
.zlb-concierge {
    background: var(--zlb-forest-800);
    color: var(--zlb-cream-50);
    padding: var(--zlb-space-6);
    margin-top: var(--zlb-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-concierge__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-400);
    margin: 0;
}
.zlb-concierge__title {
    font-family: var(--zlb-font-serif);
    font-size: var(--zlb-text-2xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--zlb-cream-50);
    margin: 0 0 var(--zlb-space-2);
}
.zlb-concierge__tel {
    display: inline-flex;
    align-items: center;
    gap: var(--zlb-space-2);
    font-family: var(--zlb-font-serif);
    font-size: var(--zlb-text-2xl);
    font-weight: 400;
    color: var(--zlb-ochre-light);
    text-decoration: none;
    line-height: 1.1;
    transition: color 120ms ease;
}
.zlb-concierge__tel:hover,
.zlb-concierge__tel:focus-visible {
    color: var(--zlb-cream-50);
    text-decoration: none;
}
.zlb-concierge__tel:focus-visible {
    outline: 2px solid var(--zlb-ochre-light);
    outline-offset: 3px;
}
.zlb-concierge__tel svg {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.zlb-concierge__meta {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zlb-stone-400);
    margin: var(--zlb-space-2) 0 0;
}

@media (min-width: 1024px) {
    .zlb-booking {
        position: sticky;
        top: 96px;
    }
}

/* ---- Amenities (3-col chips) ---- */
.zlb-hotel__amenities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-6);
}
.zlb-hotel__amenities-group {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
}
.zlb-hotel__amenities-title {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0;
}
.zlb-hotel__amenities-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-hotel__amenities-list li {
    font-size: var(--zlb-text-base);
    color: var(--zlb-text-soft);
    line-height: 1.4;
}
@media (min-width: 600px) {
    .zlb-hotel__amenities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .zlb-hotel__amenities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Similar (4-card row) ---- */
.zlb-hotel__similar {
    max-width: var(--zlb-container-max);
    margin: var(--zlb-space-24) auto 0;
    padding-inline: var(--zlb-container-pad);
}
.zlb-hotel__similar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-6);
    margin-top: var(--zlb-space-10);
}
@media (min-width: 768px) {
    .zlb-hotel__similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .zlb-hotel__similar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Mobile sticky-CTA bottom-bar (also targets legacy #lastcta) ---- */
#lastcta,
.zlb-hotel__sticky {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: var(--zlb-z-sticky);
    background: var(--zlb-cream-50);
    border-top: 1px solid var(--zlb-forest-600);
    padding: var(--zlb-space-3) var(--zlb-container-pad);
    box-shadow: var(--zlb-shadow-2);
    transform: translateY(100%);
    transition: transform var(--zlb-dur-base) var(--zlb-ease-default);
}
#lastcta.is-visible,
.zlb-hotel__sticky.is-visible { transform: translateY(0); }
#lastcta a,
.zlb-hotel__sticky a {
    display: inline-flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    background: var(--zlb-moss);
    color: var(--zlb-white);
    text-decoration: none;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
@media (min-width: 1024px) {
    #lastcta,
    .zlb-hotel__sticky { display: none; }
}

/* ---- Legacy rv-* container overrides inside .zlb-hotel scope ----
   Existing template-parts (rooms, facilities, highlights, surroundings,
   location-map) still emit rv-* markup. These resets normalise their
   spacing inside the new layout grid. */
.zlb-hotel .rv-section,
.zlb-hotel .rv-rooms,
.zlb-hotel .rv-amenities,
.zlb-hotel .rv-similar { padding-block: 0; }
.zlb-hotel .rv-section__inner,
.zlb-hotel .rv-keyfacts__inner,
.zlb-hotel .rv-gallery__inner {
    padding-inline: 0;
    max-width: none;
}

/* Key-facts band — moderate vertical + horizontal padding so the first
   icon isn't flush against the band's left edge. Cells use grid rows so
   all 12 items (icons, labels, values) sit on three shared horizontal
   lines and are centred horizontally inside each cell. */
.zlb-hotel .rv-keyfacts {
    padding-block: var(--zlb-space-6);
    padding-inline: var(--zlb-space-6);
}
.zlb-hotel .rv-keyfact {
    display: grid;
    grid-template-rows: 28px 18px auto;
    gap: var(--zlb-space-3);
    padding: 0;
    min-height: 0;
    justify-items: center;
    text-align: center;
}
.zlb-hotel .rv-keyfact__icon { margin-bottom: 0; align-self: start; }
.zlb-hotel .rv-keyfact__label { align-self: center; }

/* Rooms — DS card grid. Each .rv-rooms__item is a tactile cream card with a
   sand-300 hairline border (rectilinear per DS §1: brvnara is straight-edged,
   no shadows). Price in ochre-dark per DS §5.10. The single bottom CTA
   uses the moss primary button style. */
.zlb-hotel .rv-rooms__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-4);
    padding: 0;
    margin: 0;
    list-style: none;
}
@media (min-width: 768px) {
    .zlb-hotel .rv-rooms__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .zlb-hotel .rv-rooms__list { grid-template-columns: repeat(3, 1fr); }
}
.zlb-hotel .rv-rooms__item {
    background: var(--zlb-cream-100);
    border: 1px solid var(--zlb-sand-300);
    padding: var(--zlb-space-6);
    gap: var(--zlb-space-2);
    transition: border-color var(--zlb-dur-fast) var(--zlb-ease-default);
    overflow: hidden;
}
.zlb-hotel .rv-rooms__item:hover { border-color: var(--zlb-forest-600); }
.zlb-hotel .rv-rooms__item:last-child { border-bottom-width: 1px; }
/* Each datum on its own line, single line, ellipsis on overflow. */
.zlb-hotel .rv-rooms__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--zlb-space-2);
}
.zlb-hotel .rv-rooms__name,
.zlb-hotel .rv-rooms__price,
.zlb-hotel .rv-rooms__meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.zlb-hotel .rv-rooms__price {
    color: var(--zlb-ochre-dark);
    font-variant-numeric: tabular-nums;
}
.zlb-hotel .rv-rooms__cta {
    margin-top: var(--zlb-space-8);
    display: flex;
    justify-content: center;
}
.zlb-hotel .rv-rooms__book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--zlb-space-3);
    min-height: 52px;
    padding: 0 var(--zlb-space-8);
    background: var(--zlb-moss);
    color: var(--zlb-white);
    border: 1px solid var(--zlb-moss);
    text-decoration: none;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-hotel .rv-rooms__book:hover,
.zlb-hotel .rv-rooms__book:focus-visible {
    background: var(--zlb-moss-dark);
    border-color: var(--zlb-moss-dark);
    color: var(--zlb-white);
}

/* Amenities — DS card grid. Each category becomes a tactile cream card with
   a small grid-icon + body-cased title at top, and a single line of items
   joined by " · " in mono uppercase preceded by a moss check icon. */
.zlb-hotel .rv-amenities__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-4);
}
@media (min-width: 768px) {
    .zlb-hotel .rv-amenities__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .zlb-hotel .rv-amenities__grid { grid-template-columns: repeat(3, 1fr); }
}
.zlb-hotel .rv-amenities__group {
    background: var(--zlb-cream-100);
    border: 1px solid var(--zlb-sand-300);
    padding: var(--zlb-space-5) var(--zlb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-3);
    transition: border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}
.zlb-hotel .rv-amenities__group:hover { border-color: var(--zlb-forest-600); }
.zlb-hotel .rv-amenities__group-head {
    display: flex;
    align-items: center;
    gap: var(--zlb-space-3);
}
.zlb-hotel .rv-amenities__group-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--zlb-moss-dark);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.zlb-hotel .rv-amenities__group-title {
    margin: 0;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-md);
    font-weight: 500;
    color: var(--zlb-forest-800);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}
.zlb-hotel .rv-amenities__items {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--zlb-space-2);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    line-height: 1.5;
}
.zlb-hotel .rv-amenities__check {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--zlb-moss-dark);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Reviews — internal padding so aspects + cards aren't flush with the
   section edges, and right-align the carousel prev/next arrows (legacy
   rv-global.css hardcodes width:120px on .circle-buttons which kills
   flex-end; we restore full-width here so arrows actually shift right). */
.zlb-hotel .rv-reviews {
    padding-inline: var(--zlb-space-6);
}
.zlb-hotel .rv-reviews__carousel .tailcategories.items {
    padding-bottom: 0;
}
.zlb-hotel .rv-reviews__carousel .circle-buttons {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: var(--zlb-space-3);
    z-index: 0;  /* Override legacy z-index:999 so arrows stay below sticky nav (z-index 50). */
}

/* ── What's around — category cards with icons ───────────────────── */
.zlb-hotel .zlb-nearby__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-6);
}
@media (min-width: 768px)  { .zlb-hotel .zlb-nearby__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .zlb-hotel .zlb-nearby__grid { grid-template-columns: repeat(3, 1fr); } }

.zlb-hotel .zlb-nearby__card {
    background: var(--zlb-cream-100);
    border: 1px solid var(--zlb-sand-300);
    padding: var(--zlb-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-4);
}
.zlb-hotel .zlb-nearby__card-head {
    display: flex;
    align-items: center;
    gap: var(--zlb-space-3);
    padding-bottom: var(--zlb-space-3);
    border-bottom: 1px solid var(--zlb-sand-300);
    margin: 0;
}
.zlb-hotel .zlb-nearby__group-icon {
    width: 24px; height: 24px;
    fill: none; stroke: var(--zlb-moss); stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.zlb-hotel .zlb-nearby__card-title {
    font-family: var(--zlb-font-serif);
    font-size: var(--zlb-text-lg);
    font-weight: 400;
    line-height: 1.2;
    color: var(--zlb-forest-800);
    margin: 0;
    flex: 1;
}
.zlb-hotel .zlb-nearby__card-count {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-stone-500);
    flex-shrink: 0;
}
.zlb-hotel .zlb-nearby__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: var(--zlb-space-2);
}
.zlb-hotel .zlb-nearby__item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--zlb-space-3);
    font-size: var(--zlb-text-sm);
    line-height: 1.4;
    color: var(--zlb-forest-800);
}
.zlb-hotel .zlb-nearby__place {
    color: var(--zlb-forest-800);
}
.zlb-hotel .zlb-nearby__dist {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-stone-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.zlb-hotel .rv-main { padding-block: 0; }
.zlb-hotel .rv-main__inner {
    grid-template-columns: 1fr;
    padding-inline: 0;
    max-width: none;
}
.zlb-hotel .rv-main__content { width: 100%; }
.zlb-hotel .rv-booking,
.zlb-hotel .rv-identity,
.zlb-hotel .rv-gallery { display: none; }
.zlb-hotel .mytheme-zlatibor-hotel-page,
.zlb-hotel .rv-skip { padding-inline: 0; }


/* ============================================================
 * 7.W RV-CONTACT — shared contact-form section
 *
 * Used by template-parts/hotel/contact-form.php on:
 *   • single-hotels.php
 *   • page-experience-zlatibor-like-never-before.php
 *   • page-contact-us.php
 *
 * Hotel-page.css already styles .rv-contact for is_singular('hotels'),
 * but those rules don't reach /contact-us/ or /experience-…/. These
 * rules use --zlb-* tokens and live in style.css (loaded site-wide) so
 * the section looks identical on every page that renders the partial.
 * ============================================================ */

.rv-contact {
    padding-block: var(--zlb-space-12);
    background: var(--zlb-cream-100);
    border-top: 1px solid var(--zlb-sand-300);
}
.rv-contact__inner {
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: var(--zlb-container-pad);
    text-align: left;
}
.rv-contact__eyebrow {
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    margin: 0 0 var(--zlb-space-3);
}
.rv-contact__title {
    font-family: var(--zlb-font-display);
    font-size: var(--zlb-text-3xl);
    line-height: 1.1;
    color: var(--zlb-forest-800);
    margin: 0 0 var(--zlb-space-4);
    font-weight: 400;
    letter-spacing: -0.01em;
}
.rv-contact__lead {
    font-size: var(--zlb-text-md);
    line-height: var(--zlb-leading-md);
    color: var(--zlb-stone-500);
    margin: 0 0 var(--zlb-space-6);
}
.rv-contact__form-wrap { margin: 0; }


/* ============================================================
 * 7.X CONTACT FORM 7 — Brvnara Modern overrides
 *
 * Targets every CF7 form rendered by the .rv-contact partial
 * (single-hotels.php, page-contact-us.php, page-experience-…).
 *
 * Field markup CF7 emits:
 *   <p>
 *     <label>Label <span class="wpcf7-form-control-wrap"><input class="wpcf7-form-control wpcf7-text"></span></label>
 *   </p>
 * Some form templates wrap fields in .cu-form-row / .cu-form-group with
 * .cu-form-label + class:cu-form-input — both layouts are covered below.
 * ============================================================ */

.rv-contact .wpcf7 { width: 100%; }

.rv-contact .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-5);
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
}

/* ── Field rows (cu-form-row two-column on desktop) ─────────── */
.rv-contact .wpcf7-form .cu-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--zlb-space-5);
}
@media (min-width: 768px) {
    .rv-contact .wpcf7-form .cu-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Field group ────────────────────────────────────────────── */
.rv-contact .wpcf7-form .cu-form-group,
.rv-contact .wpcf7-form > p {
    display: flex;
    flex-direction: column;
    gap: var(--zlb-space-2);
    margin: 0;
}

/* ── Labels — eyebrow style mono uppercase ──────────────────── */
.rv-contact .wpcf7-form label,
.rv-contact .wpcf7-form .cu-form-label {
    display: block;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    color: var(--zlb-stone-500);
    line-height: 1.4;
    font-weight: 400;
}
.rv-contact .wpcf7-form label span[aria-hidden="true"] {
    color: var(--zlb-ochre-dark);
    margin-left: 2px;
}

/* ── Field wraps + inputs ───────────────────────────────────── */
.rv-contact .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: var(--zlb-space-2);
}

.rv-contact .wpcf7-form input.wpcf7-form-control,
.rv-contact .wpcf7-form select.wpcf7-form-control {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--zlb-space-4);
    background: var(--zlb-cream-50);
    border: 1px solid var(--zlb-stone-500);
    border-radius: 0;
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    transition:
        border-color var(--zlb-dur-fast) var(--zlb-ease-default),
        background   var(--zlb-dur-fast) var(--zlb-ease-default);
    appearance: none;
    -webkit-appearance: none;
}

.rv-contact .wpcf7-form textarea.wpcf7-form-control {
    display: block;
    width: 100%;
    min-height: 160px;
    padding: var(--zlb-space-3) var(--zlb-space-4);
    background: var(--zlb-cream-50);
    border: 1px solid var(--zlb-stone-500);
    border-radius: 0;
    color: var(--zlb-forest-800);
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-base);
    line-height: var(--zlb-leading-base);
    text-transform: none;
    letter-spacing: normal;
    resize: vertical;
    box-shadow: none;
    transition: border-color var(--zlb-dur-fast) var(--zlb-ease-default);
}

/* Placeholders */
.rv-contact .wpcf7-form .wpcf7-form-control::placeholder {
    color: var(--zlb-stone-400);
    opacity: 1;
}

/* Hover */
.rv-contact .wpcf7-form .wpcf7-form-control:hover {
    border-color: var(--zlb-forest-800);
}

/* Focus */
.rv-contact .wpcf7-form .wpcf7-form-control:focus {
    outline: none;
    border: 2px solid var(--zlb-moss);
    background: var(--zlb-white);
    padding-inline: calc(var(--zlb-space-4) - 1px);
}
.rv-contact .wpcf7-form textarea.wpcf7-form-control:focus {
    padding: calc(var(--zlb-space-3) - 1px) calc(var(--zlb-space-4) - 1px);
}

/* Invalid state */
.rv-contact .wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--zlb-danger);
}
.rv-contact .wpcf7-form .wpcf7-not-valid-tip {
    margin-top: var(--zlb-space-2);
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-xs);
    letter-spacing: 0.04em;
    color: var(--zlb-danger);
}

/* ── Submit button — mirrors .zlb-btn--primary ──────────────── */
.rv-contact .wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 var(--zlb-space-6);
    background: var(--zlb-moss);
    color: var(--zlb-white);
    border: 1px solid var(--zlb-moss);
    border-radius: 0;
    font-family: var(--zlb-font-mono);
    font-size: var(--zlb-text-sm);
    letter-spacing: var(--zlb-track-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition:
        background var(--zlb-dur-fast) var(--zlb-ease-default),
        border-color var(--zlb-dur-fast) var(--zlb-ease-default),
        transform var(--zlb-dur-fast) var(--zlb-ease-default);
    align-self: flex-start;
    min-width: 200px;
}
@media (max-width: 599px) {
    .rv-contact .wpcf7-form .wpcf7-submit {
        width: 100%;
        align-self: stretch;
    }
}
.rv-contact .wpcf7-form .wpcf7-submit:hover {
    background: var(--zlb-moss-dark);
    border-color: var(--zlb-moss-dark);
    color: var(--zlb-white);
}
.rv-contact .wpcf7-form .wpcf7-submit:active {
    transform: translateY(1px);
}
.rv-contact .wpcf7-form .wpcf7-submit:focus-visible {
    outline: 2px solid var(--zlb-ochre);
    outline-offset: 2px;
}
.rv-contact .wpcf7-form .wpcf7-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* CF7 spinner sits flush next to the submit button */
.rv-contact .wpcf7-form .wpcf7-spinner {
    margin-left: var(--zlb-space-3);
    background-color: var(--zlb-moss);
}

/* ── Response output (success / error notices) ──────────────── */
.rv-contact .wpcf7-form .wpcf7-response-output {
    margin: var(--zlb-space-4) 0 0;
    padding: var(--zlb-space-3) var(--zlb-space-4);
    border: 1px solid var(--zlb-sand-300);
    border-radius: 0;
    font-family: var(--zlb-font-body);
    font-size: var(--zlb-text-sm);
    line-height: var(--zlb-leading-base);
    background: var(--zlb-cream-100);
    color: var(--zlb-forest-800);
}
.rv-contact .wpcf7-form.sent .wpcf7-response-output {
    border-color: var(--zlb-success);
    background: color-mix(in srgb, var(--zlb-success) 8%, var(--zlb-cream-50));
    color: var(--zlb-forest-800);
}
.rv-contact .wpcf7-form.invalid .wpcf7-response-output,
.rv-contact .wpcf7-form.failed .wpcf7-response-output {
    border-color: var(--zlb-danger);
    background: color-mix(in srgb, var(--zlb-danger) 8%, var(--zlb-cream-50));
    color: var(--zlb-danger);
}

/* ── Hidden fields ──────────────────────────────────────────── */
.rv-contact .wpcf7-form .hidden-fields-container {
    border: 0;
    margin: 0;
    padding: 0;
}

/* ============================================================
 * 8. REDUCED MOTION — DS §7
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .zlb-reveal { opacity: 1; transform: none; transition: none; }
    .zlb-hero__photo img,
    .zlb-tile img,
    .zlb-card__media img,
    .zlb-gallery__tile img,
    .zlb-hotel__gallery-tile img,
    .zlb-editorial__media img { transform: none !important; }
}