/* Shared style for KAMI sub-pages (/reserve/, /menu/) – same tokens, header and buttons as the homepage */
:root {
    --k-green: #3d5a45; --k-green-deep: #0f2a1d; --k-gold: #dcc38f; --k-gold-ink: #2f4636; --k-cream: #faf6ee;
    --k-line: rgba(15, 42, 29, .12); --k-muted: #5d6b62;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: calc(var(--nav-h) + 56px); -webkit-text-size-adjust: 100%; }
body { font-family: Inter, system-ui, -apple-system, sans-serif; background: var(--k-cream); color: var(--k-green-deep); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* Header (same as homepage) */
.kp-nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: #fff; border-bottom: 1px solid rgba(15, 42, 29, .08); }
.kp-nav .in { max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 2rem;  /* same grid as the homepage header */ display: flex; align-items: center; gap: 2rem; }
.kp-logo { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; text-decoration: none; font-family: Montserrat, sans-serif; }
.kp-logo .m { font-family: 'Josefin Sans', Montserrat, sans-serif; font-size: 1.75rem; line-height: 1; color: var(--k-green-deep); letter-spacing: 8px; padding-left: 8px; }
.kp-logo .s { font-size: .55rem; font-weight: 500; color: var(--k-green); letter-spacing: 3.5px; padding-left: 3.5px; white-space: nowrap; }
.kp-logo img { height: 60px; width: auto; display: block; }
.kp-foot-logo { height: 84px; width: auto; display: block; margin: 0 auto 1.1rem; }
.kp-links { display: flex; gap: 1.8rem; list-style: none; margin-left: auto; }
.kp-links a { text-decoration: none; font-family: Montserrat, sans-serif; font-weight: 500; font-size: .95rem; color: var(--k-green-deep); }
.kp-links a[aria-current] { color: var(--k-green); border-bottom: 2px solid var(--k-gold); padding-bottom: 3px; }
.kp-icon { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--k-line); display: inline-flex; align-items: center; justify-content: center; color: var(--k-green-deep); }
.kp-icon svg { width: 18px; height: 18px; }
.kp-right { display: flex; align-items: center; gap: .75rem; }

/* Buttons (same as homepage .k-btn) */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.8rem; border-radius: 999px; background: var(--k-gold); color: var(--k-gold-ink); font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .3px; text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.12); transition: transform .2s ease, background .2s ease; }
.k-btn svg { width: 18px; height: 18px; transition: transform .2s ease; }
.k-btn:hover { background: #e8d3a4; transform: translateY(-2px); }
.k-btn:hover svg { transform: translateX(3px); }
.k-btn-sm { padding: .6rem 1.25rem; font-size: .9rem; box-shadow: none; }
.k-btn-line { background: transparent; color: var(--k-green-deep); box-shadow: inset 0 0 0 1.5px var(--k-green-deep); }
.k-btn-line:hover { background: rgba(220, 195, 143, .25); }
.k-btn-green { background: var(--k-green); color: #fff; }
.k-btn-green:hover { background: var(--k-green-deep); }

/* Green hero band with curved bottom, like the homepage action band */
.kp-hero { background: var(--k-green); color: #fff; padding: 3.2rem 1.5rem 5.5rem; text-align: center; border-radius: 0 0 50% 50% / 0 0 60px 60px; }
.kp-hero .crumbs { font-size: .85rem; opacity: .8; margin-bottom: .8rem; }
.kp-hero .crumbs a { text-decoration: none; }
.kp-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; }
.kp-hero p { max-width: 640px; margin: .9rem auto 0; opacity: .92; font-size: 1.05rem; }
.kp-hero .stars { display: inline-flex; gap: .5rem; align-items: center; font-size: .9rem; margin-bottom: 1rem; background: rgba(255,255,255,.1); padding: .35rem .9rem; border-radius: 999px; }
.kp-hero .stars b { color: var(--k-gold); letter-spacing: 2px; }

.kp-main { max-width: 1200px; margin: -3.5rem auto 0; padding: 0 2rem 4rem; position: relative; }
.kp-card { background: #fff; border-radius: 18px; box-shadow: 0 12px 40px rgba(15, 42, 29, .10); padding: 2rem; }
.kp-card h2, .kp-h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--k-green); font-size: 1.45rem; margin-bottom: .6rem; }
.kp-eyebrow { font-family: Montserrat, sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--k-green); margin-bottom: .5rem; }
.kp-muted { color: var(--k-muted); font-size: .9rem; }

.kp-foot { background: var(--k-green-deep); color: rgba(255,255,255,.85); text-align: center; padding: 2.2rem 1.5rem 2.8rem; font-size: .9rem; }
.kp-foot a { color: var(--k-gold); text-decoration: none; }
.kp-foot .links { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: .8rem; }

@media (max-width: 860px) {
    .kp-nav .in { padding: 0 1rem; gap: 1rem; }
    .kp-links { display: none; }
    .kp-right { margin-left: auto; }
    .kp-right .k-btn { padding: .65rem 1.1rem; font-size: .9rem; }
    .kp-logo img { height: 48px; }
    .kp-hero { padding: 2.4rem 1.25rem 4.8rem; border-radius: 0 0 50% 50% / 0 0 36px 36px; }
    .kp-main { padding: 0 1rem 3rem; }
    .kp-card { padding: 1.4rem; border-radius: 16px; }
}
@media (max-width: 420px) { .kp-icon.wa { display: none; } }

/* inline phone links: underline, not colour only (WCAG 1.4.1) */
a[href^="tel:"] { text-decoration: underline; text-underline-offset: 2px; }


/* ===== Dark theme (default for everyone; html[data-theme="light"] when the visitor picks light) ===== */
html[data-theme="dark"] { --k-cream: #121212; --k-line: rgba(255,255,255,.12); --k-muted: #b5b5ad; color-scheme: dark; }
html[data-theme="dark"] body { background: #121212; color: #f2ebdd; }
html[data-theme="dark"] .kp-nav { background: #121212; border-bottom-color: #2a2a2a; }
html[data-theme="dark"] .kp-links a { color: #f2ebdd; }
html[data-theme="dark"] .kp-links a[aria-current] { color: #dcc38f; }
html[data-theme="dark"] .kp-icon { color: #f2ebdd; border-color: #333; }
html[data-theme="dark"] .kp-card, html[data-theme="dark"] .mn-item, html[data-theme="dark"] .mn-cart,
html[data-theme="dark"] .rs-faq details { background: #1c1c1c; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
html[data-theme="dark"] .kp-card h2, html[data-theme="dark"] .kp-h2, html[data-theme="dark"] .mn-cart h2 { color: #dcc38f; }
html[data-theme="dark"] .kp-eyebrow { color: #a8c3ae; }
html[data-theme="dark"] .mn-top h3, html[data-theme="dark"] .rs-faq summary { color: #f2ebdd; }
html[data-theme="dark"] .mn-price { color: #dcc38f; }
html[data-theme="dark"] .mn-tabs { background: rgba(18,18,18,.96); }
html[data-theme="dark"] .mn-tabs a, html[data-theme="dark"] .mn-chip, html[data-theme="dark"] .chips button,
html[data-theme="dark"] .mn-arr, html[data-theme="dark"] .mn-line .q button { background: #1c1c1c; color: #f2ebdd; border-color: #3a3a3a; }
html[data-theme="dark"] .mn-tabs a.on, html[data-theme="dark"] .chips button.on { background: #dcc38f; color: #2f4636; border-color: #dcc38f; }
html[data-theme="dark"] .mn-chip.on { background: #3d5a45; border-color: #4f7058; color: #fff; }
html[data-theme="dark"] .mn-tag { background: rgba(255,255,255,.08); color: #cfe0d3; }
html[data-theme="dark"] .k-btn-line { color: #f2ebdd; box-shadow: inset 0 0 0 1.5px #f2ebdd; }
html[data-theme="dark"] .rs-form label { color: #f2ebdd; }
html[data-theme="dark"] .rs-form input, html[data-theme="dark"] .rs-form select, html[data-theme="dark"] .rs-form textarea { background-color: #121212; color: #f2ebdd; border-color: #3a3a3a; }
html[data-theme="dark"] .kp-hero { background: #1a2e22; }
.kp-logo .logo-dark, html[data-theme="dark"] .kp-logo .logo-light { display: none; }
html[data-theme="dark"] .kp-logo .logo-dark { display: block; }
.kp-theme { cursor: pointer; background: none; }
.kp-theme .sun, html[data-theme="dark"] .kp-theme .moon { display: none; }
html[data-theme="dark"] .kp-theme .sun { display: block; }

/* ===== /menu/ checkout panel (js/menu-checkout.js) ===== */
.co-wrap { position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 14, .55); display: none; align-items: center; justify-content: center; padding: 2rem 1rem; }
.co-wrap.open { display: flex; }
.co-panel { position: relative; background: #fff; border-radius: 22px; width: min(1040px, 100%); max-height: calc(100vh - 4rem); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.co-form { padding: 2rem 2rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.co-form h2, .co-done h2 { font-family: 'Playfair Display', Georgia, serif; color: var(--k-green); font-size: 1.7rem; }
.co-x { position: absolute; top: .8rem; right: 1rem; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--k-line); background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 2; }
.co-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.co-seg button { text-align: left; padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid var(--k-line); background: #fff; font: 600 1rem Montserrat, sans-serif; color: var(--k-green-deep); cursor: pointer; }
.co-seg button small { display: block; font: 400 .8rem Inter, sans-serif; color: var(--k-muted); margin-top: .15rem; }
.co-seg button.on { border-color: var(--k-green); background: rgba(61,90,69,.07); box-shadow: inset 0 0 0 1px var(--k-green); }
.co-mapbox { position: relative; height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--k-line); }
#coMap { width: 100%; height: 100%; }
.co-pin { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -26px 0 0 -13px; border-radius: 50% 50% 50% 0; background: #0f2a1d; transform: rotate(-45deg); box-shadow: 0 0 0 3px #dcc38f; z-index: 500; pointer-events: none; }
.co-maprow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.co-info { color: var(--k-muted); }
.co-link { background: none; border: 0; color: var(--k-green); font: 600 .9rem Montserrat, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.co-form label { display: flex; flex-direction: column; gap: .35rem; font: 600 .78rem Montserrat, sans-serif; letter-spacing: .03em; color: var(--k-green-deep); }
.co-form label span { font: 400 .78rem Inter, sans-serif; color: var(--k-muted); letter-spacing: 0; }
.co-form input, .co-form select, .co-form textarea { font: 400 1rem Inter, sans-serif; color: var(--k-green-deep); padding: .8rem 1rem; border: 1px solid var(--k-line); border-radius: 12px; background: #fff; width: 100%; min-width: 0; }
.co-form input:focus, .co-form select:focus, .co-form textarea:focus { outline: 0; border-color: var(--k-gold); box-shadow: 0 0 0 3px rgba(220,195,143,.35); }
.co-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.co-label { font: 600 .78rem Montserrat, sans-serif; letter-spacing: .03em; color: var(--k-green-deep); margin-bottom: -.4rem; }
.co-chips { display: flex; gap: .45rem; flex-wrap: wrap; }
.co-chips button { font: 500 .88rem Inter, sans-serif; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--k-line); background: #fff; color: var(--k-green-deep); cursor: pointer; }
.co-chips button.on { background: var(--k-green); border-color: var(--k-green); color: #fff; }
.co-chips button:disabled { opacity: .4; cursor: not-allowed; }
.co-err { color: #b3261e; font-size: .9rem; min-height: 1.2em; }
.co-sum { background: #faf6ee; padding: 2rem 1.6rem 1.6rem; display: flex; flex-direction: column; border-left: 1px solid var(--k-line); }
.co-sum h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--k-green); font-size: 1.3rem; margin-bottom: .6rem; }
#coLines { flex: 1; overflow: auto; }
.co-line { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 1px dashed var(--k-line); font-size: .9rem; }
.co-line b { white-space: nowrap; color: var(--k-green); }
.co-tot { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .92rem; color: var(--k-muted); }
.co-big { font: 700 1.15rem Montserrat, sans-serif; color: var(--k-green-deep); padding-top: .6rem; }
.co-send { width: 100%; margin-top: 1rem; }
.co-fine { font-size: .78rem; color: var(--k-muted); margin-top: .7rem; text-align: center; }
.co-done { grid-column: 1 / -1; text-align: center; padding: 3rem 2rem; display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.co-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--k-gold); color: var(--k-gold-ink); font-size: 2rem; display: flex; align-items: center; justify-content: center; }
.co-done[hidden], .co-form[hidden], .co-sum[hidden] { display: none; }
@media (max-width: 860px) {
  .co-wrap { padding: 0; align-items: stretch; }
  .co-panel { grid-template-columns: 1fr; border-radius: 0; max-height: 100vh; height: 100%; }
  .co-sum { border-left: 0; border-top: 1px solid var(--k-line); }
  .co-row2 { grid-template-columns: 1fr; }
}
html[data-theme="dark"] .co-panel, html[data-theme="dark"] .co-x, html[data-theme="dark"] .co-seg button,
html[data-theme="dark"] .co-chips button, html[data-theme="dark"] .co-form input, html[data-theme="dark"] .co-form select,
html[data-theme="dark"] .co-form textarea { background: #1c1c1c; color: #f2ebdd; border-color: #3a3a3a; }
html[data-theme="dark"] .co-sum { background: #161616; border-color: #2a2a2a; }
html[data-theme="dark"] .co-form h2, html[data-theme="dark"] .co-done h2, html[data-theme="dark"] .co-sum h3 { color: #dcc38f; }
html[data-theme="dark"] .co-form label, html[data-theme="dark"] .co-label, html[data-theme="dark"] .co-big { color: #f2ebdd; }
html[data-theme="dark"] .co-seg button.on { border-color: #dcc38f; box-shadow: inset 0 0 0 1px #dcc38f; background: rgba(220,195,143,.08); }
html[data-theme="dark"] .co-chips button.on { background: #3d5a45; border-color: #4f7058; color: #fff; }
html[data-theme="dark"] .co-line b { color: #dcc38f; }
html[data-theme="dark"] .co-link { color: #dcc38f; }
html[data-theme="dark"] .mn-line .pr { color: #dcc38f; }
html[data-theme="dark"] .mn-line { border-color: #2e2e2e; }
html[data-theme="dark"] .mn-info { background: #1c1c1c; box-shadow: 0 10px 30px rgba(0,0,0,.4); color: #b5b5ad; }
html[data-theme="dark"] .mn-info li { color: #f2ebdd; }

/* sub-pages use the homepage header (fixed): push content below it */
body.kp-page { padding-top: var(--nav-h, 88px); }
body.kp-page .kp-nav { display: none; }