/* ══════════════════════════════════════════════
   BOOKING ENGINE (live availability from CRM)
══════════════════════════════════════════════ */
    .bk {
      max-width: 1180px;
      margin: 56px auto 0;
      --ok: #5fc48a;
      --no: #d96060;
      --line: rgba(196, 151, 63, 0.16);
    }

    .bk [hidden] { display: none !important; }

    /* Steps */
    .bk-steps {
      list-style: none;
      display: flex;
      justify-content: center;
      gap: 0;
      margin: 0 auto 34px;
      padding: 0;
      max-width: 760px;
    }

    .bk-steps li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      position: relative;
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
    }

    .bk-steps li::before {
      content: "";
      position: absolute;
      top: 13px;
      left: -50%;
      width: 100%;
      height: 1px;
      background: var(--line);
      z-index: 0;
    }

    .bk-steps li:first-child::before { display: none; }
    .bk-steps li.done::before,
    .bk-steps li.now::before { background: var(--g); }

    .bk-steps .bk-dot {
      width: 27px;
      height: 27px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--ink2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cormorant Garamond", serif;
      font-size: 14px;
      color: var(--muted);
      position: relative;
      z-index: 1;
      transition: all 0.35s;
    }

    .bk-steps li.now { color: var(--g2); }
    .bk-steps li.now .bk-dot { border-color: var(--g); color: var(--g2); box-shadow: 0 0 0 5px rgba(196, 151, 63, 0.1); }
    .bk-steps li.done { color: var(--paper); }
    .bk-steps li.done .bk-dot { background: var(--g); border-color: var(--g); color: var(--ink); }

    /* Search bar */
    .bk-search {
      display: grid;
      grid-template-columns: 1.15fr 1.15fr 0.9fr auto;
      background: var(--ink);
      border: 1px solid rgba(196, 151, 63, 0.28);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
      position: relative;
    }

    .bk-field {
      background: none;
      border: none;
      border-right: 1px solid var(--line);
      color: var(--paper);
      text-align: left;
      padding: 18px 24px;
      cursor: pointer;
      font-family: inherit;
      min-width: 0;
      transition: background 0.25s;
    }

    .bk-field:hover,
    .bk-field.is-open { background: rgba(196, 151, 63, 0.06); }

    .bk-field-lbl {
      display: block;
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--g);
      margin-bottom: 7px;
    }

    .bk-field-val {
      display: block;
      font-family: "Cormorant Garamond", serif;
      font-size: 22px;
      font-weight: 300;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bk-field-val.is-empty { color: var(--muted); }

    .bk-field-sub {
      display: block;
      font-size: 11px;
      color: var(--muted);
      margin-top: 3px;
    }

    .bk-guests {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: default;
    }

    .bk-guests:hover { background: none; }

    .bk-step-btns {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bk-round {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid rgba(196, 151, 63, 0.35);
      background: none;
      color: var(--g2);
      font-size: 17px;
      line-height: 1;
      cursor: pointer;
      transition: all 0.25s;
    }

    .bk-round:hover:not(:disabled) { background: var(--g); color: var(--ink); border-color: var(--g); }
    .bk-round:disabled { opacity: 0.3; cursor: not-allowed; }

    .bk-go {
      background: var(--g);
      color: var(--ink);
      border: none;
      padding: 0 34px;
      font-family: "DM Sans", sans-serif;
      font-size: 10.5px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.3s;
    }

    .bk-go:hover { background: var(--g2); }
    .bk-go svg { width: 16px; height: 16px; }

    /* Status line */
    .bk-status {
      margin: 34px 0 18px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .bk-status-main {
      font-family: "Cormorant Garamond", serif;
      font-size: 26px;
      font-weight: 300;
    }

    .bk-status-main em { color: var(--g2); font-style: italic; }

    .bk-status-sub {
      font-size: 12px;
      color: var(--muted);
    }

    /* Result cards */
    .bk-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .bk-card {
      display: grid;
      grid-template-columns: 300px 1fr 230px;
      background: var(--ink);
      border: 1px solid var(--line);
      transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }

    .bk-card:hover { border-color: rgba(196, 151, 63, 0.4); }
    .bk-card.is-pref { border-color: var(--g); box-shadow: 0 0 0 1px var(--g), 0 20px 60px rgba(196, 151, 63, 0.12); }
    .bk-card.is-off .bk-card-media img { filter: grayscale(0.85) brightness(0.6); }

    .bk-card-media {
      position: relative;
      cursor: zoom-in;
      min-height: 220px;
      background: var(--ink3);
      overflow: hidden;
    }

    .bk-card-media img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s, filter 0.4s;
    }

    .bk-card:hover .bk-card-media img { transform: scale(1.05); }

    .bk-pill {
      position: absolute;
      top: 14px;
      left: 14px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 12px;
      font-size: 9.5px;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      background: rgba(12, 11, 9, 0.82);
      backdrop-filter: blur(6px);
      border: 1px solid var(--line);
      color: var(--paper);
    }

    .bk-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--muted);
    }

    .bk-pill.ok { color: #9fe0b9; border-color: rgba(95, 196, 138, 0.4); }
    .bk-pill.ok::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(95, 196, 138, 0.2); animation: bkPulse 2s infinite; }
    .bk-pill.no { color: #f0a0a0; border-color: rgba(217, 96, 96, 0.4); }
    .bk-pill.no::before { background: var(--no); }
    .bk-pill.warn { color: var(--g2); border-color: rgba(196, 151, 63, 0.45); }
    .bk-pill.warn::before { background: var(--g); }

    @keyframes bkPulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(95, 196, 138, 0.2); }
      50% { box-shadow: 0 0 0 6px rgba(95, 196, 138, 0.05); }
    }

    .bk-photo-count {
      position: absolute;
      bottom: 12px;
      right: 12px;
      font-size: 10px;
      background: rgba(12, 11, 9, 0.75);
      padding: 4px 9px;
      color: var(--body-c);
    }

    .bk-card-body {
      padding: 26px 28px;
      min-width: 0;
    }

    .bk-card-type {
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--g);
      margin-bottom: 8px;
    }

    .bk-card-name {
      font-family: "Cormorant Garamond", serif;
      font-size: 28px;
      font-weight: 300;
      line-height: 1.15;
      margin: 0 0 12px;
      color: var(--paper);
    }

    .bk-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 18px;
      font-size: 12.5px;
      color: var(--body-c);
      margin-bottom: 14px;
    }

    .bk-meta span { display: inline-flex; align-items: center; gap: 7px; }
    .bk-meta svg { width: 14px; height: 14px; stroke: var(--g); flex-shrink: 0; }

    .bk-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
    }

    .bk-chips li {
      font-size: 10.5px;
      padding: 4px 10px;
      border: 1px solid var(--line);
      color: var(--body-c);
    }

    .bk-chips li.more { color: var(--g2); border-style: dashed; cursor: pointer; }

    .bk-policy {
      font-size: 12px;
      color: #9fe0b9;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .bk-policy.muted { color: var(--muted); }

    .bk-card-side {
      padding: 26px 24px;
      border-left: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      text-align: right;
      background: linear-gradient(180deg, rgba(196, 151, 63, 0.03), transparent);
    }

    .bk-rate-lbl {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
    }

    .bk-rate {
      font-family: "Cormorant Garamond", serif;
      font-size: 32px;
      font-weight: 300;
      color: var(--g2);
      line-height: 1.1;
    }

    .bk-rate small { font-family: "DM Sans", sans-serif; font-size: 11px; color: var(--muted); }

    .bk-total {
      font-size: 12.5px;
      color: var(--paper);
      margin-bottom: 10px;
    }

    .bk-total b { font-weight: 500; }

    .bk-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--g);
      color: var(--ink);
      border: 1px solid var(--g);
      padding: 14px 18px;
      font-family: "DM Sans", sans-serif;
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      width: 100%;
    }

    .bk-btn:hover:not(:disabled) { background: var(--g2); border-color: var(--g2); }
    .bk-btn:disabled { opacity: 0.55; cursor: not-allowed; }

    .bk-btn.ghost {
      background: transparent;
      color: var(--g2);
      border-color: rgba(196, 151, 63, 0.4);
    }

    .bk-btn.ghost:hover:not(:disabled) { background: rgba(196, 151, 63, 0.1); border-color: var(--g); }

    .bk-btn.wa { background: #25d366; border-color: #25d366; color: #fff; }
    .bk-btn.wa:hover { background: #1da853; border-color: #1da853; }

    .bk-btn .bk-spin {
      width: 13px;
      height: 13px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: bkSpin 0.7s linear infinite;
    }

    @keyframes bkSpin { to { transform: rotate(360deg); } }

    .bk-note {
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.5;
    }

    .bk-note.no { color: #f0a0a0; }

    /* Skeletons */
    .bk-skel {
      height: 220px;
      border: 1px solid var(--line);
      background: linear-gradient(90deg, var(--ink) 0%, var(--ink3) 50%, var(--ink) 100%);
      background-size: 200% 100%;
      animation: bkShimmer 1.3s infinite;
    }

    @keyframes bkShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

    .bk-empty {
      border: 1px dashed var(--line);
      padding: 40px 24px;
      text-align: center;
      color: var(--body-c);
    }

    .bk-empty h4 {
      font-family: "Cormorant Garamond", serif;
      font-size: 26px;
      font-weight: 300;
      margin: 0 0 8px;
      color: var(--paper);
    }

    .bk-empty .bk-btn { width: auto; margin-top: 16px; }

    /* Checkout */
    .bk-checkout {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 36px;
      margin-top: 8px;
      align-items: start;
    }

    .bk-back {
      background: none;
      border: none;
      color: var(--g2);
      font-family: inherit;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0;
      margin-bottom: 22px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .bk-back:hover { color: var(--g); }

    .bk-panel {
      background: var(--ink);
      border: 1px solid var(--line);
      padding: 34px;
    }

    .bk-panel-h {
      font-family: "Cormorant Garamond", serif;
      font-size: 30px;
      font-weight: 300;
      margin: 0 0 6px;
    }

    .bk-panel-h em { color: var(--g2); }

    .bk-panel-sub {
      font-size: 13px;
      color: var(--muted);
      margin: 0 0 26px;
    }

    .bk-sep {
      font-size: 9px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--g);
      margin: 10px 0 16px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .bk-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

    .bk-extras {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 22px;
    }

    .bk-extra {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      border: 1px solid var(--line);
      padding: 16px;
      cursor: pointer;
      transition: border-color 0.25s, background 0.25s;
    }

    .bk-extra:hover { border-color: rgba(196, 151, 63, 0.4); }
    .bk-extra input { position: absolute; opacity: 0; pointer-events: none; }

    .bk-tick {
      width: 20px;
      height: 20px;
      border: 1px solid rgba(196, 151, 63, 0.5);
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
      transition: all 0.2s;
    }

    .bk-tick svg { width: 12px; height: 12px; stroke: var(--ink); opacity: 0; }
    .bk-extra.on { border-color: var(--g); background: rgba(196, 151, 63, 0.06); }
    .bk-extra.on .bk-tick { background: var(--g); border-color: var(--g); }
    .bk-extra.on .bk-tick svg { opacity: 1; }
    .bk-extra-name { font-size: 13.5px; color: var(--paper); display: block; }
    .bk-extra-desc { font-size: 11.5px; color: var(--muted); display: block; margin-top: 3px; }

    .bk-alert {
      border: 1px solid rgba(217, 96, 96, 0.45);
      background: rgba(217, 96, 96, 0.08);
      color: #f0b4b4;
      padding: 14px 16px;
      font-size: 13px;
      margin-bottom: 20px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .bk-alert .bk-btn { width: auto; padding: 9px 14px; }

    .bk-trust {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 18px;
      font-size: 11.5px;
      color: var(--muted);
    }

    .bk-trust span { display: inline-flex; align-items: center; gap: 6px; }
    .bk-trust svg { width: 13px; height: 13px; stroke: var(--g); }

    /* OTP */
    .bk-otp { text-align: center; }

    .bk-otp-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 18px;
      border-radius: 50%;
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bk-otp-icon svg { width: 26px; height: 26px; stroke: var(--g2); }

    .bk-otp-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin: 26px 0 10px;
    }

    .bk-otp-row input {
      width: 52px;
      height: 62px;
      text-align: center;
      background: var(--ink2);
      border: 1px solid rgba(196, 151, 63, 0.25);
      color: var(--paper);
      font-family: "Cormorant Garamond", serif;
      font-size: 30px;
      outline: none;
      transition: border-color 0.2s, transform 0.2s;
    }

    .bk-otp-row input:focus { border-color: var(--g); transform: translateY(-2px); }
    .bk-otp-row.err input { border-color: var(--no); animation: bkShake 0.35s; }

    @keyframes bkShake {
      25% { transform: translateX(-5px); }
      75% { transform: translateX(5px); }
    }

    .bk-otp-err { color: #f0a0a0; font-size: 12.5px; min-height: 18px; margin-bottom: 14px; }

    .bk-linkbtn {
      background: none;
      border: none;
      color: var(--g2);
      font-family: inherit;
      font-size: 12.5px;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
      padding: 0;
    }

    .bk-linkbtn:disabled { color: var(--muted); text-decoration: none; cursor: default; }

    .bk-otp-links {
      display: flex;
      justify-content: center;
      gap: 22px;
      margin-top: 18px;
      font-size: 12.5px;
      color: var(--muted);
    }

    /* Summary */
    .bk-sum {
      background: var(--ink);
      border: 1px solid rgba(196, 151, 63, 0.3);
      position: sticky;
      top: 96px;
    }

    .bk-sum-img {
      height: 170px;
      background: var(--ink3) center/cover no-repeat;
      position: relative;
    }

    .bk-sum-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(12, 11, 9, 0.95));
    }

    .bk-sum-name {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 16px;
      z-index: 1;
      font-family: "Cormorant Garamond", serif;
      font-size: 24px;
      font-weight: 300;
      line-height: 1.15;
    }

    .bk-sum-body { padding: 20px 22px 24px; }

    .bk-sum-dates {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
    }

    .bk-sum-dates .lbl {
      font-size: 9px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--g);
      display: block;
      margin-bottom: 4px;
    }

    .bk-sum-dates .val { font-size: 14px; color: var(--paper); }
    .bk-sum-dates .arrow { color: var(--muted); font-size: 12px; text-align: center; }
    .bk-sum-dates > div:last-child { text-align: right; }

    .bk-sum-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--body-c);
      padding: 6px 0;
    }

    .bk-sum-row.total {
      border-top: 1px solid var(--line);
      margin-top: 8px;
      padding-top: 14px;
      color: var(--paper);
      align-items: baseline;
    }

    .bk-sum-row.total b {
      font-family: "Cormorant Garamond", serif;
      font-size: 30px;
      font-weight: 300;
      color: var(--g2);
    }

    .bk-sum-foot {
      margin-top: 14px;
      font-size: 11.5px;
      color: var(--muted);
      line-height: 1.6;
    }

    /* Done */
    .bk-done {
      max-width: 720px;
      margin: 10px auto 0;
      text-align: center;
    }

    .bk-check {
      width: 92px;
      height: 92px;
      margin: 0 auto 22px;
    }

    .bk-check circle {
      stroke: var(--g);
      stroke-width: 1.5;
      fill: none;
      stroke-dasharray: 280;
      stroke-dashoffset: 280;
      animation: bkDraw 0.9s ease forwards;
    }

    .bk-check path {
      stroke: var(--g2);
      stroke-width: 2.5;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: bkDraw 0.5s 0.7s ease forwards;
    }

    @keyframes bkDraw { to { stroke-dashoffset: 0; } }

    .bk-ref {
      display: inline-block;
      margin: 14px 0 6px;
      padding: 10px 22px;
      border: 1px dashed rgba(196, 151, 63, 0.5);
      font-family: "Cormorant Garamond", serif;
      font-size: 24px;
      letter-spacing: 3px;
      color: var(--g2);
    }

    .bk-done-card {
      text-align: left;
      border: 1px solid var(--line);
      background: var(--ink);
      padding: 22px 26px;
      margin: 26px 0;
    }

    .bk-next {
      list-style: none;
      padding: 0;
      margin: 0 0 26px;
      text-align: left;
      display: grid;
      gap: 14px;
    }

    .bk-next li {
      display: grid;
      grid-template-columns: 34px 1fr;
      gap: 14px;
      align-items: start;
      font-size: 13.5px;
      color: var(--body-c);
    }

    .bk-next li b { display: block; color: var(--paper); font-weight: 400; margin-bottom: 2px; }

    .bk-next .n {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid rgba(196, 151, 63, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Cormorant Garamond", serif;
      color: var(--g2);
      font-size: 16px;
    }

    .bk-done-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    /* Contact strip under the booker */
    .bk-contact {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      margin: 80px auto 0;
      max-width: 1180px;
      border: 1px solid var(--line);
    }

    .bk-contact .cm {
      margin: 0;
      padding: 24px;
      border-bottom: none;
      border-right: 1px solid var(--line);
      min-width: 0;
    }

    .bk-contact .cm:last-child { border-right: none; }
    .bk-contact .cm-val { font-size: 18px; overflow-wrap: anywhere; }
    .bk-contact .cm-icon { width: 40px; height: 40px; font-size: 16px; }

    /* Mobile booking dock */
    .bk-dock {
      position: fixed;
      left: 12px;
      right: 84px;
      bottom: 16px;
      z-index: 980;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: rgba(12, 11, 9, 0.94);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(196, 151, 63, 0.4);
      padding: 10px 10px 10px 16px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
      transform: translateY(140%);
      transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .bk-dock.show { transform: translateY(0); }
    .bk-dock-txt { font-size: 11px; color: var(--muted); line-height: 1.35; min-width: 0; }
    .bk-dock-txt b { display: block; color: var(--g2); font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 400; }
    .bk-dock .bk-btn { width: auto; padding: 12px 16px; white-space: nowrap; }

    span.flatpickr-weekday {
      color: rgba(226, 192, 122, 0.75);
      background: transparent;
    }

    .flatpickr-months .flatpickr-month,
    .flatpickr-weekdays { background: transparent; }

    /* ══════════════════════════════════════════════
   HERO = BOOKING ENGINE
══════════════════════════════════════════════ */
    .bk-hero {
      position: relative;
      min-height: 100svh;
      padding: 150px 64px 90px;
      background: var(--ink);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .bk-hero-bg {
      position: absolute;
      inset: 0 0 auto 0;
      height: max(100svh, 760px);
      z-index: 0;
      overflow: hidden;
    }

    .bk-hero-slide {
      position: absolute;
      inset: 0;
      background: center/cover no-repeat;
      opacity: 0;
      transform: scale(1.12);
      transition: opacity 1.6s ease, transform 9s ease-out;
    }

    .bk-hero-slide.on { opacity: 1; transform: scale(1.02); }

    .bk-hero-shade {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 50% 45%, rgba(12, 11, 9, 0.2) 0%, rgba(12, 11, 9, 0.6) 75%),
        linear-gradient(180deg, rgba(12, 11, 9, 0.65) 0%, rgba(12, 11, 9, 0.15) 30%, rgba(12, 11, 9, 0.55) 70%, var(--ink) 100%);
    }

    .bk-hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
    }

    .bk-hero-head {
      text-align: center;
      max-width: 820px;
      margin: 0 auto;
      animation: bkRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .bk-hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      font-size: 10px;
      letter-spacing: 5px;
      text-transform: uppercase;
      color: var(--g2);
      margin-bottom: 22px;
    }

    .bk-hero-eyebrow span { width: 34px; height: 1px; background: var(--g); }

    .bk-hero-h1 {
      font-family: "Cormorant Garamond", serif;
      font-weight: 300;
      font-size: clamp(48px, 7.4vw, 104px);
      line-height: 0.98;
      letter-spacing: -1px;
      color: var(--paper);
      margin: 0;
      text-shadow: 0 6px 40px rgba(0, 0, 0, 0.45);
    }

    .bk-hero-h1 em { font-style: italic; color: var(--g2); font-weight: 200; }

    .bk-hero-p {
      font-size: 15.5px;
      line-height: 1.8;
      color: rgba(244, 239, 230, 0.82);
      max-width: 600px;
      margin: 22px auto 0;
    }

    .bk-anchor { display: block; position: relative; top: -110px; visibility: hidden; }

    .bk-hero .bk { margin-top: 44px; animation: bkRise 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .bk-hero .bk-search { background: rgba(12, 11, 9, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); }

    /* Before the first search: only the search bar shows */
    .bk[data-step="1"] .bk-steps { display: none; }
    .bk.is-auto[data-step="2"] .bk-steps { display: none; }
    .bk:not(.has-results) #bkResultsWrap { display: none; }

    .bk-hero-trust {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px 30px;
      margin-top: 30px;
      font-size: 12px;
      color: rgba(244, 239, 230, 0.7);
      animation: bkRise 1s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .bk-hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
    .bk-hero-trust svg { width: 14px; height: 14px; stroke: var(--g); }
    .bk.has-results ~ .bk-hero-trust { display: none; }

    .bk-hero-cue {
      position: absolute;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%);
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      font-size: 9px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.3s, opacity 0.3s;
    }

    .bk-hero-cue span { width: 1px; height: 34px; background: linear-gradient(var(--g), transparent); animation: bkCue 2s infinite; }
    .bk-hero-cue:hover { color: var(--g2); }
    .bk-hero.searched .bk-hero-cue { opacity: 0; pointer-events: none; }

    @keyframes bkCue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
    @keyframes bkRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
      .bk-hero-slide, .bk-hero-head, .bk-hero .bk, .bk-hero-trust { transition: opacity 0.3s; animation: none; transform: none; }
    }

    @media (max-width: 860px) {
      .bk-hero { padding: 112px 20px 80px; justify-content: flex-start; }
      .bk-hero-p { font-size: 14px; margin-top: 16px; }
      .bk-hero-eyebrow { letter-spacing: 3.5px; margin-bottom: 16px; }
      .bk-hero .bk { margin-top: 30px; }
      .bk-hero-cue { display: none; }
    }

    @media (max-width: 560px) {
      .bk-hero-p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    }

    /* Calendar footer */
    .bk-cal-foot {
      border-top: 1px solid rgba(196, 151, 63, 0.18);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      color: rgba(245, 240, 232, 0.7);
    }

    .bk-cal-foot button {
      background: #c4973f;
      color: #07060a;
      border: none;
      padding: 8px 16px;
      font-size: 10px;
      letter-spacing: 2px;
      text-transform: uppercase;
      cursor: pointer;
      font-family: "DM Sans", sans-serif;
    }

    .bk-cal-foot button:disabled { opacity: 0.4; cursor: default; }

    @media (max-width: 1024px) {
      .bk-card { grid-template-columns: 240px 1fr; }
      .bk-card-side { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: left; }
      .bk-card-side .bk-btn { width: auto; min-width: 180px; }
      .bk-checkout { grid-template-columns: 1fr; }
      .bk-sum { position: static; }
      .bk-sum-img { height: 120px; }
      .bk-contact { grid-template-columns: 1fr 1fr; }
      .bk-contact .cm:nth-child(2) { border-right: none; }
      .bk-contact .cm:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    }

    @media (max-width: 860px) {
      .bk { margin-top: 36px; }
      .bk-search { grid-template-columns: 1fr 1fr; }
      .bk-field { padding: 14px 16px; }
      .bk-field:nth-child(2) { border-right: none; }
      .bk-guests { grid-column: 1 / -1; border-right: none; border-top: 1px solid var(--line); }
      .bk-go { grid-column: 1 / -1; padding: 17px; justify-content: center; }
      .bk-field-val { font-size: 19px; }
      .bk-dock { display: flex; }
      .bk-steps li span.t { display: none; }
      .bk-steps li.now span.t { display: block; }
    }

    @media (max-width: 640px) {
      .bk-card { grid-template-columns: 1fr; }
      .bk-card-media { min-height: 190px; }
      .bk-card-body { padding: 20px; }
      .bk-card-name { font-size: 24px; }
      .bk-card-side { padding: 18px 20px; }
      .bk-card-side .bk-btn { width: 100%; }
      .bk-panel { padding: 22px 18px; }
      .bk-extras { grid-template-columns: 1fr; }
      .bk-otp-row { gap: 6px; }
      .bk-otp-row input { width: 42px; height: 54px; font-size: 26px; }
      .bk-done-actions { grid-template-columns: 1fr; }
      .bk-contact { grid-template-columns: 1fr; }
      .bk-contact .cm { border-right: none; border-bottom: 1px solid var(--line); }
      .bk-contact .cm:last-child { border-bottom: none; }
    }

/* ══════════════════════════════════════════════
   SHARED PIECES (so the engine looks identical on every page)
══════════════════════════════════════════════ */
.bk .fg, .bk-gal .fg { margin-bottom: 22px; }
.bk .fl, .bk-gal .fl {
  display: block;
  font-size: 9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: 10px;
}
.bk .fi, .bk-gal .fi,
.bk .ft,
.bk .fs, .bk-gal .fs {
  width: 100%;
  background: var(--ink2);
  border: 1px solid rgba(196, 151, 63, 0.18);
  color: var(--paper);
  padding: 14px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  outline: none;
  transition: border-color 0.3s;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.bk .fs, .bk-gal .fs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c4973f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.bk .fs option, .bk-gal .fs option { background: var(--ink2); color: var(--paper); }
.bk .fi:focus, .bk .ft:focus, .bk .fs:focus, .bk-gal .fi:focus, .bk-gal .fs:focus { border-color: var(--g); }
.bk .fi::placeholder, .bk .ft::placeholder { color: var(--muted); }
.bk .ft { height: 110px; resize: vertical; }
.bk .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk .fi.err, .bk .ft.err, .bk .fs.err { border-color: rgba(210, 65, 65, 0.7); }
.bk .ferr {
  display: block;
  font-size: 10px;
  color: #d96060;
  letter-spacing: 0.5px;
  margin-top: 6px;
  min-height: 14px;
}

.bk-done-h {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  margin: 0;
  text-align: center;
  color: var(--paper);
}
.bk-done-h em { color: var(--g2); font-style: italic; }
.bk-done-p {
  font-size: 15px;
  color: var(--body-c);
  line-height: 1.8;
  max-width: 560px;
  margin: 8px auto 0;
  text-align: center;
}

.bk-search.no-guests { grid-template-columns: 1.2fr 1.2fr auto; }

@media (max-width: 860px) {
  .bk-search.no-guests .bk-field:nth-child(2) { border-right: none; }
}

@media (max-width: 560px) {
  .bk .fr { grid-template-columns: 1fr; gap: 0; }
}

    /* Day / Night choice (shown when the CRM product has a Day price) */
    .bk-rate-day { font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; }

    .bk-period {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
    }

    .bk-period button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      background: transparent;
      border: 1px solid rgba(196, 151, 63, 0.4);
      color: var(--g2);
      padding: 10px 8px;
      font-family: "DM Sans", sans-serif;
      font-size: 10px;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s;
    }

    .bk-period button small { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
    .bk-period button:hover { background: rgba(196, 151, 63, 0.1); }
    .bk-period button.on { background: var(--g); border-color: var(--g); color: var(--ink); }
    .bk-period button.on small { color: var(--ink); }

    /* Main (lowest) price bold; the other period stays small (.bk-rate-day) */
    .bk-rate b { font-weight: 600; }
    .bk-period.one { grid-template-columns: 1fr; }
    .bk-period button:disabled { cursor: default; }
    .bk-card-media:focus-visible { outline: 2px solid var(--g); outline-offset: -2px; }

    /* Room gallery popup — fixed-height box; photos left, scrolling info column right */
    .bk-gal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .bk-gal[hidden] { display: none; }
    .bk-gal-back { position: absolute; inset: 0; background: rgba(8, 7, 6, 0.86); backdrop-filter: blur(6px); }
    .bk-gal-box {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(340px, 1fr);
      grid-template-rows: minmax(0, 1fr);      /* row can't grow past the box — lets the info column scroll */
      width: min(1180px, 100%);
      height: min(780px, calc(100vh - 48px));
      height: min(780px, calc(100dvh - 48px));
      background: var(--ink);
      border: 1px solid var(--line);
      box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
      overflow: hidden;
    }
    .bk-gal-x {
      position: absolute; top: 12px; right: 14px; z-index: 3;
      width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%;
      background: rgba(12, 11, 9, 0.85); color: var(--paper); font-size: 22px; line-height: 1; cursor: pointer;
    }
    .bk-gal-media { position: relative; background: #000; display: flex; flex-direction: column; min-height: 0; }
    .bk-gal-media > img { flex: 1 1 auto; width: 100%; min-height: 0; object-fit: cover; }
    .bk-gal-nav {
      position: absolute; top: 45%; transform: translateY(-50%);
      width: 44px; height: 44px; border: 1px solid rgba(196, 151, 63, 0.4); border-radius: 50%;
      background: rgba(12, 11, 9, 0.6); color: var(--g2); font-size: 28px; line-height: 1; cursor: pointer;
    }
    .bk-gal-nav.prev { left: 12px; }
    .bk-gal-nav.next { right: 12px; }
    .bk-gal-nav[hidden] { display: none; }
    .bk-gal-count { position: absolute; top: 14px; left: 14px; font-size: 11px; color: var(--body-c); background: rgba(12, 11, 9, 0.7); padding: 4px 9px; }
    .bk-gal-count:empty { display: none; }
    .bk-gal-thumbs { flex: 0 0 auto; display: flex; gap: 6px; padding: 8px; overflow-x: auto; background: var(--ink); }
    .bk-gal-thumbs:empty { display: none; }
    .bk-gal-thumbs button { flex: 0 0 auto; width: 70px; height: 50px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; opacity: 0.6; }
    .bk-gal-thumbs button.on { border-color: var(--g); opacity: 1; }
    .bk-gal-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .bk-gal-info {
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 28px 28px 30px;
      scrollbar-width: thin;
      scrollbar-color: rgba(196, 151, 63, 0.35) transparent;
    }
    .bk-gal-info .bk-card-name { margin-bottom: 10px; padding-right: 44px; }
    .bk-gal-info .bk-meta { margin-bottom: 18px; }

    /* Booking box — right under the name */
    .bk-gal-bookbox { border: 1px solid var(--line); background: rgba(196, 151, 63, 0.04); padding: 16px; margin-bottom: 8px; }
    .bk-gal-bookbox .bk-period { margin-bottom: 12px; }
    .bk-gal-when { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
    .bk-gal-when .fg[hidden] { display: none; }
    .bk-gal-when:has(.fg[hidden]) { grid-template-columns: 1fr; }
    .bk-gal-bookbox .fg { margin-bottom: 12px; }
    .bk-gal-bookbox .fl { margin-bottom: 6px; }
    .bk-gal-bookbox .fi, .bk-gal-bookbox .fs { padding: 11px 14px; }
    .bk-gal-total { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 0 12px; font-size: 13px; color: var(--body-c); }
    .bk-gal-total b { font-family: "Cormorant Garamond", serif; font-size: 30px; font-weight: 400; color: var(--g2); }
    .bk-gal-hint { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }

    /* Details */
    .bk-gal-desc { padding: 18px 0 4px; }
    .bk-gal-desc p { font-size: 14px; line-height: 1.7; color: var(--body-c); margin: 0 0 6px;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
    .bk-gal-desc.open p { -webkit-line-clamp: unset; display: block; }
    .bk-gal-sec { padding: 18px 0 4px; border-top: 1px solid var(--line); margin-top: 14px; }
    .bk-gal-sec h4 { font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--g); margin: 0 0 12px; font-weight: 500; }
    .bk-gal-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
    .bk-gal-facts div { border: 1px solid var(--line); padding: 10px 12px; }
    .bk-gal-facts dt { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
    .bk-gal-facts dd { margin: 0; font-size: 13.5px; color: var(--paper); }
    .bk-gal-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
    .bk-gal-ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--body-c); }
    .bk-gal-ticks li svg { flex: 0 0 auto; margin-top: 3px; color: var(--g); }
    .bk-gal-sec .bk-chips { margin: 0; }
    .bk-gal-prices > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
    .bk-gal-prices > div:last-child { border-bottom: 0; }
    .bk-gal-prices span { display: flex; flex-direction: column; }
    .bk-gal-prices b { font-size: 13.5px; font-weight: 500; color: var(--paper); }
    .bk-gal-prices small { font-size: 11.5px; color: var(--muted); }
    .bk-gal-prices em { font-style: normal; font-size: 15px; color: var(--g2); white-space: nowrap; }

    @media (max-width: 860px) {
      .bk-gal { padding: 0; align-items: stretch; }
      /* Phone: one scrolling sheet — photo, then booking box, then details */
      .bk-gal-box { display: block; width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 0; }
      .bk-gal-media > img { height: 42vh; flex: none; }
      .bk-gal-info { overflow: visible; padding: 20px 16px 32px; }
      .bk-gal-x { position: fixed; }
    }

    .bk-gal .fi { color-scheme: dark; }
    .bk-gal .fg { margin-bottom: 14px; }
    [data-gallery-room] { cursor: zoom-in; }

    /* Summary: "Change dates" inline editor */
    .bk-sum-chg { display: block; margin: -4px 0 14px auto; }
    .bk-sum-edit { border: 1px solid var(--line); padding: 16px; margin-bottom: 16px; }
    .bk-sum-edit[hidden] { display: none; }
    .bk-sum-edit .fr { gap: 10px; }
    .bk-sum-edit .fg { margin-bottom: 10px; }
    .bk-sum-edit .fi { padding: 11px 12px; }
    .bk-sum-edit .bk-note { margin: 10px 0 0; }
    .bk-sum-edit-acts { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    .bk-sum-edit-acts .bk-btn { padding: 12px 14px; }
    .bk-ferr { color: #f0a0a0; font-size: 12px; min-height: 0; margin-bottom: 8px; }
    .bk-ferr:empty { display: none; }
    .bk .fi[type="date"] { color-scheme: dark; }

    /* Check-in / check-out pickers (date + time) — time row in the dark/gold theme on every page */
    .flatpickr-calendar .flatpickr-time { background: #0e0d11; border-top: 1px solid rgba(196, 151, 63, 0.18); }
    .flatpickr-calendar .flatpickr-time input,
    .flatpickr-calendar .flatpickr-time input.numInput { background: #0e0d11 !important; color: #f5f0e8 !important; }
    .flatpickr-calendar .flatpickr-time input.numInput:hover,
    .flatpickr-calendar .flatpickr-time input.numInput:focus { background: rgba(196, 151, 63, 0.12) !important; }
    .flatpickr-calendar .flatpickr-time .flatpickr-time-separator { color: rgba(244, 239, 230, 0.45); }
    .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: #e8c97a; background: #0e0d11; }
    .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover,
    .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus { background: rgba(196, 151, 63, 0.15); color: #f5f0e8; }
    .bk-sum-dates .tm { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

    /* Card bottom row: availability status + cancellation policy, in the body (not on the photo) */
    .bk-card-body { display: flex; flex-direction: column; }
    .bk-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 14px; }
    .bk-card-foot .bk-pill { position: static; backdrop-filter: none; background: transparent; }
    .bk-card-foot .bk-policy { margin: 0; }

    /* Summary "Change dates": date + time side by side for check-in and check-out */
    .bk-dt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
    .bk-sum-edit .fr { grid-template-columns: 1fr; gap: 0; }
    .bk-sum-edit .fs { padding: 11px 34px 11px 12px; background-position: right 12px center; }
    .bk .fi.bk-dt-pick {
      cursor: pointer;
      padding-right: 40px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23c4973f' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='1'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
    }