/* Kim Beauty Spa botanical theme v2 — final color layer */

:root {
  --kbs-forest: #385345;
  --kbs-deep: #304b3c;
  --kbs-sage: #606556;
  --kbs-ivory: #f5f1e7;
  --kbs-cream: #fbf8f1;
  --kbs-gold: #b99855;
  --kbs-gold-light: #d5cab1;
  --kbs-ink: #26382f;
}

html, body {
  background: var(--kbs-ivory);
  color: var(--kbs-ink);
}

a {
  color: var(--kbs-forest);
}

a:hover {
  color: var(--kbs-sage);
}

.kbs-book-now, .btn-primary, .btn.btn-primary {
  background: var(--kbs-forest)!important;
  border-color: var(--kbs-gold)!important;
  color: #fff!important;
  box-shadow: none!important;
}

/* Gallery: four equal columns on desktop */

.kbs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* Featured video spans all four columns */

.kbs-gallery-featured {
  grid-column: 1 / -1;
  min-width: 0;
}

/* Photo cards */

.kbs-gallery-photo {
  min-width: 0;
  margin: 0;
}

/* All gallery photos use the same size */

.kbs-gallery-photo img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  border-radius: 6px;
}

/* Center photo captions */

.kbs-gallery-photo figcaption {
  text-align: center;
  padding: 12px 4px;
  font-weight: 500;
}

/* Tablets: two columns */

@media (max-width: 991px) {
  .kbs-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phones: one column */

@media (max-width: 575px) {
  .kbs-gallery-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .kbs-gallery-photo img {
    height: 300px;
  }
}

/* Keep featured video across all four photo columns */

.kbs-gallery-grid > .kbs-gallery-featured {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
}

/* Restore full-width video player with dark side filler */

.kbs-gallery-grid > .kbs-gallery-featured video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 600px;
  object-fit: contain;
  background-color: #172820;
  margin: 0 auto;
}

/* Center caption underneath */

.kbs-gallery-featured figcaption {
  text-align: center;
  padding: 14px 0 24px;
}

.kbs-book-now:hover, .btn-primary:hover, .btn.btn-primary:hover {
  background: var(--kbs-deep)!important;
  border-color: var(--kbs-gold)!important;
  color: #fff!important;
}

.kbs-meta, .text-primary {
  color: var(--kbs-sage)!important;
}

.kbs-gallery-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.kbs-gallery-featured figcaption {
  text-align: center;
  padding: 14px 0 24px;
  font-weight: 500;
}

.kbs-gallery-featured video {
  display: block;
  width: 100%;
  max-height: 600px;
  object-fit: contain;
  background-color: var(--kbs-sage) !important;
  object-position: center;
}

.kbs-m3-header {
  background: var(--kbs-deep)!important;
}

.kbs-m3-nav a {
  color: #fff!important;
}

hr, .border-primary {
  border-color: var(--kbs-gold)!important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--kbs-forest);
}

.gallery-desktop-hotspot {
  position: absolute;
  top: 0;
  left: 68%;
  width: 14%;
  height: 16%;
  z-index: 10;
}

/* V2.1: ensure all service titles use the botanical palette rather than legacy blue/navy rules */

.kbs-service-card h2, .kbs-primary-service h2, .kbs-single-service h2, .kbs-service-page .kbs-service-card h2, .kbs-service-page .kbs-primary-service h2, .kbs-service-page .kbs-single-service h2 {
  color: var(--kbs-forest) !important;
}

/* Gallary navigation/page additions */

.gallary-desktop-hotspot {
  position: absolute;
  z-index: 8;
  top: 0;
  left: 70.5%;
  width: 16.5%;
  height: 12.3%;
}

.kbs-gallary-empty {
  min-height: 58vh;
  background: #f7f3e9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
}

.kbs-hero h1 {
  display: block;
  /*text-align: center;*/
}

.kbs-gallary-empty h1 {
  font-family: "Cormorant Garamond",serif;
  color: #184b3b;
  font-size: clamp(48px,7vw,82px);
  font-weight: 500;
  margin: 0;
}

.kbs-gallary-empty .rule {
  width: 88px;
  height: 2px;
  background: #c49a45;
  margin: 18px auto 0;
}

video#spaOverviewVideo {
  background-color: var(--kbs-sage) !important;
}

/* Contact page: accessible, indexable details beneath existing artwork */

.contact-artwork-page .kbs-contact-details {
  background: var(--kbs-ivory, #f5f1e7);
  color: var(--kbs-ink, #26382f);
  padding: 36px 24px 48px;
  text-align: center;
}

.contact-artwork-page .kbs-contact-details-inner {
  max-width: 900px;
  margin: 0 auto;
}

.contact-artwork-page .kbs-contact-details h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--kbs-forest, #385345);
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 12px;
}

.contact-artwork-page .kbs-contact-details p, .contact-artwork-page .kbs-contact-details address {
  font-family: Montserrat, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.8;
}

.contact-artwork-page .kbs-contact-details address {
  font-style: normal;
  margin: 18px 0;
}

.contact-artwork-page .kbs-contact-details-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
}

.contact-artwork-page .kbs-contact-details-actions a {
  color: var(--kbs-forest, #385345);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-artwork-page .kbs-contact-details-actions a:hover, .contact-artwork-page .kbs-contact-details-actions a:focus-visible {
  color: var(--kbs-sage, #606556);
}

.kbs-opening-book-desktop, .kbs-opening-book-mobile {
  cursor: pointer !important;
}