/* Prepaint base: these elements are known from the HTML before deferred JS
   adds .clay-btn. Keeping the declarations identical prevents glass FOUC. */
:where(.header-booking-btn,
    #hero-slider .glass-btn,
    a.glass-btn.press-effect,
    button.glass-btn.press-effect,
    .floating-mobile-actions > button,
    .price-booking-link,
    #format-navigator-trigger,
    #format-navigator-reset,
    #format-navigator-content .format-choice,
    #format-navigator-content .format-switch,
    #format-navigator-content .format-result,
    .clay-site-nav .top-nav-trigger,
    .clay-site-nav .top-nav-list > li > a) {
    --clay-color: #e4d7c6;
    --clay-ink: #073f46;
    --clay-rim: rgba(110, 79, 55, .34);
    --clay-light: rgba(255, 250, 235, .66);
    position: relative;
    isolation: isolate;
    background-color: var(--clay-color) !important;
    background-image: url("clay-material.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-blend-mode: luminosity;
    border: 1px solid rgba(124, 91, 66, .24) !important;
    color: var(--clay-ink) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 1px var(--clay-light), inset 0 -2px 2px var(--clay-rim),
        0 3px 0 var(--clay-rim), 0 7px 7px -3px rgba(0, 20, 26, .48),
        0 15px 20px -5px rgba(0, 20, 26, .58) !important;
    overflow: hidden;
    transform: translateY(0) !important;
    filter: none !important;
    transition: transform .16s ease-out, box-shadow .16s ease-out !important;
}

:where(.clay-site-nav .top-nav-trigger,
    .clay-site-nav .top-nav-list > li > a,
    #format-navigator-trigger,
    #format-navigator-reset) {
    overflow: visible;
}

:where(.header-booking-btn,
    #hero-slider .glass-btn,
    a.glass-btn.press-effect,
    button.glass-btn.press-effect,
    .floating-mobile-actions > button,
    .price-booking-link,
    #format-navigator-trigger,
    #format-navigator-reset,
    #format-navigator-content .format-choice,
    #format-navigator-content .format-switch,
    #format-navigator-content .format-result,
    .clay-site-nav .top-nav-trigger,
    .clay-site-nav .top-nav-list > li > a):active {
    transform: translateY(3px) !important;
    box-shadow: inset 0 1px 1px var(--clay-light), inset 0 -2px 2px var(--clay-rim),
        0 2px 0 var(--clay-rim), 0 3px 4px -1px rgba(0, 20, 26, .55),
        0 5px 7px -3px rgba(0, 20, 26, .42) !important;
}

:where(.header-booking-btn,
    .floating-mobile-actions .floating-booking-btn,
    .price-booking-link,
    button.glass-btn.press-effect[onclick="openBookingModal()"] ) {
    --clay-color: #fba08a;
    --clay-ink: #fffaf3;
    --clay-rim: rgba(111, 49, 30, .42);
    --clay-light: rgba(255, 215, 177, .58);
    background-blend-mode: multiply;
    border-color: rgba(119, 53, 33, .28) !important;
}

/* Single clay system. Geometry is inherited; material declarations replace
   the existing inline glass presentation, not the page layout. */
.clay-btn,
.clay-surface {
    --clay-color: #e4d7c6;
    --clay-ink: #073f46;
    --clay-rim: rgba(110, 79, 55, .34);
    --clay-light: rgba(255, 250, 235, .66);
    position: relative;
    isolation: isolate;
    background-color: var(--clay-color) !important;
    background-image: url("clay-material.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    background-blend-mode: luminosity;
    border: 1px solid rgba(124, 91, 66, .24) !important;
    color: var(--clay-ink) !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.clay-btn {
    /* Solid rim, tight contact shadow, then soft detached shadow. */
    box-shadow: inset 0 1px 1px var(--clay-light), inset 0 -2px 2px var(--clay-rim),
        0 3px 0 var(--clay-rim), 0 7px 7px -3px rgba(0, 20, 26, .48),
        0 15px 20px -5px rgba(0, 20, 26, .58) !important;
    overflow: hidden;
    transform: translateY(0) !important;
    filter: none !important;
    transition: transform .16s ease-out, box-shadow .16s ease-out !important;
}

.clay-btn--cta {
    /* Compensate for the ivory photo in multiply: result stays near #d07a5f. */
    --clay-color: #fba08a;
    --clay-ink: #fffaf3;
    --clay-rim: rgba(111, 49, 30, .42);
    --clay-light: rgba(255, 215, 177, .58);
    background-blend-mode: multiply;
    border-color: rgba(119, 53, 33, .28) !important;
}

@media (hover: hover) and (pointer: fine) {
    .clay-btn:hover:not(:active):not(.clay-is-pressed) {
        transform: translateY(-1px) !important;
        box-shadow: inset 0 1px 1px var(--clay-light), inset 0 -2px 2px var(--clay-rim),
            0 3px 0 var(--clay-rim), 0 8px 8px -3px rgba(0, 20, 26, .48),
            0 17px 22px -5px rgba(0, 20, 26, .59) !important;
    }
}

.clay-btn:active,
.clay-btn.clay-is-pressed {
    /* Rigid translation only; the shape and shallow edge relief stay intact. */
    transform: translateY(3px) !important;
    box-shadow: inset 0 1px 1px var(--clay-light), inset 0 -2px 2px var(--clay-rim),
        0 2px 0 var(--clay-rim), 0 3px 4px -1px rgba(0, 20, 26, .55),
        0 5px 7px -3px rgba(0, 20, 26, .42) !important;
    transition-duration: .08s !important;
}

.clay-btn:hover,
.clay-btn:focus-visible { color: var(--clay-ink) !important; }
.clay-btn:focus-visible,
#hero-slider a:focus-visible > .clay-btn {
    outline: 2px solid #bafff2;
    outline-offset: 4px;
}

/* Photographed relief blends into both clay colours. Negative stacking keeps
   the impression above the material and below text, with no hit-test target. */
.clay-imprint {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    mix-blend-mode: soft-light;
    pointer-events: none;
}
.clay-has-imprint > .clay-imprint::before {
    content: "";
    position: absolute;
    width: clamp(64px, 38%, 106px);
    aspect-ratio: 1;
    right: -4px;
    top: 50%;
    transform: translateY(-50%) rotate(-10deg);
    background: url("clay-imprint.webp") center / contain no-repeat;
    filter: contrast(2.4);
    /* Feather only the contact perimeter, not the papillary lines. */
    -webkit-mask-image: radial-gradient(ellipse at center, #000 56%, transparent 86%);
    mask-image: radial-gradient(ellipse at center, #000 56%, transparent 86%);
    pointer-events: none;
}

/* Existing static clay surfaces keep their sizing and hierarchy. */
.clay-surface {
    background-size: cover !important;
    box-shadow: 0 6px 12px rgba(0, 31, 34, .22),
        inset 0 1px 1px var(--clay-light), inset 0 -2px 3px rgba(104, 76, 59, .12) !important;
}
.clay-surface :is(h3, p, summary, a, .faq-answer, .font-serif),
.clay-surface .space-y-4 { color: #073f46 !important; text-shadow: none !important; }
#benefits .clay-surface p,
#reviews .clay-surface p,
.clay-surface .faq-answer { color: rgba(7, 63, 70, .82) !important; }
.faq-glass.clay-surface .faq-answer {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.faq-glass.clay-surface[open] {
    box-shadow: 0 4px 8px rgba(0, 31, 34, .2), inset 0 1px 2px rgba(86, 58, 42, .1) !important;
}
.faq-glass.clay-surface .text-accent { color: #073f46 !important; }

/* Preserve the navigator's existing botanical pseudo-elements. */
.format-navigator__trigger.clay-btn,
.format-choice.clay-btn,
.format-switch.clay-btn,
.format-result.clay-btn { overflow: visible; }
.format-reset.clay-btn { border-radius: 999px; }
.format-navigator__trigger.clay-btn::before { content: none !important; animation: none !important; }
.format-choice-row.is-selected > .format-choice.clay-btn {
    border-color: rgba(112, 82, 61, .5) !important;
}
.format-level.has-selection > .format-choice-row:not(.is-selected) > .format-choice.clay-btn {
    opacity: .62;
}
.format-result.clay-btn :is(.format-result__note, .format-result__arrow) {
    color: #073f46 !important;
    text-shadow: none !important;
    filter: none !important;
}
.floating-menu-btn.clay-btn .floating-menu-icon span { background: #073f46 !important; }

@media (prefers-reduced-motion: reduce) {
    .clay-btn { transition: none !important; }
}