/* =========================================================================
   KAAYA GLOW — SERVICES PAGE, V2 ("SV" DESIGN SYSTEM)
   A completely fresh, self-contained layer for services.php only.
   Reuses the sitewide tokens + typography utilities already defined in
   kaaya-editorial.css (--kaaya-*, --kg-*, .kg-container, .kg-eyebrow,
   .kg-heading, .kg-lede, .kg-btn, .kg-on-dark, ...) for brand consistency,
   but every layout/component class below is namespaced "sv-" and is brand
   new — nothing here touches or depends on kg-journal.css, which this
   page no longer loads.
   ========================================================================= */

:root {
    --sv-radius: 20px;
    --sv-radius-sm: 12px;
    --sv-shadow-dark: 0 40px 90px -32px rgba(10, 12, 6, 0.55);
    --sv-shadow-light: 0 30px 60px -28px rgba(5, 31, 32, 0.22);
    --sv-gold-soft: rgba(142, 182, 155, 0.35);
}

.sv-services-page { overflow-x: clip; }

/* ================= SHARED SECTION SHELL ================= */
.sv-section { padding: 128px 0; position: relative; }
.sv-section.sv-explore { background: var(--kaaya-ivory); }
.sv-section.sv-membership { background: var(--kaaya-beige); }
.sv-section.sv-rewards { background: var(--kaaya-ivory); }

.sv-section-head { max-width: 640px; margin: 0 0 64px; }
.sv-section-head.sv-center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.sv-section-head .kg-heading { margin-bottom: 18px; }
.sv-eyebrow-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--kaaya-gold); margin-right: 2px; }

/* ================= REVEAL-ON-SCROLL SYSTEM ================= */
.sv-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.85s var(--kg-ease), transform 0.85s var(--kg-ease);
    transition-delay: calc(var(--i, 0) * 70ms);
}
.sv-reveal.sv-reveal--fade { transform: translateY(0) scale(0.96); }
.sv-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .sv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================================
   CATEGORY EXPLORER
   ========================================================================= */
.sv-tabbar {
    position: relative;
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 56px;
    background: var(--kaaya-white);
    border: 1.5px solid rgba(35, 83, 71, 0.4);
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: 0 14px 34px -18px rgba(5, 31, 32, 0.28);
}
.sv-tabbar::-webkit-scrollbar { display: none; }
.sv-tab-indicator {
    position: absolute;
    top: 6px; left: 6px;
    height: calc(100% - 12px);
    background: var(--kaaya-black);
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px rgba(5, 31, 32, 0.5);
    transition: none;
    z-index: 0;
}
.sv-tab {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 999px;
    background: transparent;
    border: none;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--kaaya-charcoal);
    cursor: pointer;
    white-space: nowrap;
    transition: none;
}
.sv-tab:hover:not(.is-active) { background: rgba(35, 83, 71, 0.14); color: var(--kaaya-black); }
.sv-tab-thumb {
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.75);
    box-shadow: 0 2px 8px rgba(5,31,32,0.25);
}
.sv-tab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-tab-num { font-family: var(--kg-heading-font); font-size: 12.5px; color: var(--kaaya-olive); }
.sv-tab.is-active { color: var(--kaaya-white); }
.sv-tab.is-active .sv-tab-num { color: var(--kaaya-gold); }
.sv-tab.is-active .sv-tab-thumb { border-color: var(--kaaya-gold); }
.sv-tab-count { font-size: 11px; opacity: 0.75; }

.sv-panel { display: block; }
.sv-panel[hidden] { display: none; }
/* Category switching is intentionally instant — no slide/carousel/fade-in
   animation and no per-card stagger. Only the tab's own selected/active
   color state (see .sv-tab.is-active above) indicates the change. */

.sv-story-banner { margin-bottom: 48px; }
.sv-story-media {
    position: relative;
    border-radius: var(--sv-radius);
    overflow: hidden;
    aspect-ratio: 21 / 7;
    box-shadow: var(--sv-shadow-light);
}
.sv-story-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--kg-ease); }
.sv-story-media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(5,31,32,0.78) 0%, rgba(5,31,32,0.15) 45%, transparent 70%);
}
.sv-story-media:hover img { transform: scale(1.05); }
.sv-story-tag {
    position: absolute; top: 20px; left: 24px;
    background: rgba(218, 241, 222, 0.92);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 999px;
    z-index: 2;
}
.sv-story-media-title {
    position: absolute;
    left: 24px; bottom: 20px;
    z-index: 2;
    margin: 0;
    font-family: var(--kg-heading-font);
    font-size: clamp(24px, 3.4vw, 38px);
    font-weight: 600;
    color: var(--kaaya-white);
}
.sv-story-band {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 44px;
    padding: 32px 4px 0;
    align-items: start;
}
.sv-story-quote {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-size: 22px;
    color: var(--kaaya-black);
    line-height: 1.45;
    margin: 0;
    padding-left: 18px;
    border-left: 2px solid var(--kaaya-gold);
}
.sv-story-desc { font-family: var(--kg-body-font); font-size: 15px; line-height: 1.75; color: var(--kaaya-charcoal); margin: 0 0 18px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sv-chip {
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--kaaya-white);
    border: 1px solid rgba(35, 83, 71, 0.25);
    color: var(--kaaya-olive);
}
.sv-meta-row { display: flex; flex-wrap: wrap; gap: 18px; }
.sv-meta-row span {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    color: var(--kaaya-moss);
    display: flex; align-items: center; gap: 6px;
}
.sv-meta-row span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--kaaya-gold); }

@media (max-width: 720px) {
    .sv-story-band { grid-template-columns: 1fr; gap: 20px; }
    .sv-story-media { aspect-ratio: 4 / 3; }
}

.sv-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-content: start; }
@media (max-width: 900px) {
    .sv-card-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
    .sv-card-grid { grid-template-columns: 1fr; gap: 18px; }
}
.sv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--kaaya-black);
    border: 1px solid rgba(142, 182, 155, 0.16);
    border-radius: 0;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(2, 12, 12, 0.4);
    transition: transform 0.4s var(--kg-ease), box-shadow 0.4s var(--kg-ease), border-color 0.4s var(--kg-ease);
}
.sv-card-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--kaaya-sage, #8EB69B);
}
.sv-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,31,32,0) 55%, rgba(5,31,32,0.75) 100%);
    pointer-events: none;
}
.sv-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--kg-ease);
}
.sv-card:hover .sv-card-media img { transform: scale(1.06); }
.sv-card-index {
    position: absolute;
    top: 12px; left: 12px;
    font-family: var(--kg-heading-font);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--kaaya-white);
    background: rgba(5, 31, 32, 0.55);
    backdrop-filter: blur(3px);
    padding: 4px 10px;
    border-radius: 999px;
    z-index: 2;
}
.sv-card-discount {
    position: absolute;
    top: 12px; right: 12px;
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--kaaya-black);
    background: var(--kaaya-sage, #8EB69B);
    padding: 5px 11px;
    border-radius: 999px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.sv-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 22px 24px;
    flex: 1 1 auto;
    background: var(--kaaya-black);
    border-top: 1px solid rgba(142, 182, 155, 0.14);
}
.sv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 54px rgba(2, 12, 12, 0.55);
    border-color: rgba(142, 182, 155, 0.4);
}
.sv-card-name { font-family: var(--kg-heading-font); font-size: 19px; font-weight: 600; color: var(--kaaya-ivory); margin: 0 0 6px; line-height: 1.3; }
.sv-card-duration { font-family: var(--kg-body-font); font-size: 12px; color: var(--kaaya-sage); margin-bottom: 6px; }
.sv-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 4px 0 16px;
}
.sv-card-price {
    font-family: var(--kg-heading-font);
    font-size: 20px;
    font-weight: 700;
    color: var(--kaaya-sage);
    line-height: 1;
}
.sv-card-mrp {
    font-family: var(--kg-body-font);
    font-size: 14px;
    font-weight: 500;
    color: rgba(218, 241, 222, 0.4);
    text-decoration: line-through;
    line-height: 1;
}
.sv-card-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    border-radius: 999px;
    font-family: var(--kg-body-font); font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--kaaya-sage);
    background: transparent;
    border: 1.5px solid rgba(142, 182, 155, 0.5);
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.sv-card:hover .sv-card-cta { background: var(--kaaya-sage); color: var(--kaaya-black); border-color: var(--kaaya-sage); }
.sv-card-cta svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform 0.35s ease; }
.sv-card:hover .sv-card-cta svg { transform: translateX(3px); }

@media (max-width: 992px) {
    .sv-story-media { aspect-ratio: 16/9; }
}
@media (max-width: 560px) {
    .sv-card-body { padding: 14px 14px 16px; }
    .sv-card-price { font-size: 17px; }
    .sv-tab { flex: 0 0 auto; justify-content: flex-start; padding: 12px 18px; }
    .sv-tabbar { justify-content: flex-start; }
}

/* =========================================================================
   SIGNATURE RITUALS (SPECIAL OFFERS) — dark horizontal carousel
   ========================================================================= */
.sv-rituals { background: var(--kaaya-black); overflow: hidden; }
.sv-rituals-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.sv-ritual-row { position: relative; display: flex; align-items: center; gap: 14px; }
.sv-ritual-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 10px 4px 30px;
}
.sv-ritual-track::-webkit-scrollbar { display: none; }
.sv-ritual-card {
    position: relative;
    flex: 0 0 auto;
    width: min(310px, 78vw);
    scroll-snap-align: start;
    border-radius: 0;
    overflow: hidden;
    background: var(--kaaya-charcoal);
    text-decoration: none;
    display: block;
    box-shadow: var(--sv-shadow-dark);
    border: 1px solid rgba(218, 241, 222, 0.08);
    transition: transform 0.15s ease, border-color 0.4s ease;
    will-change: transform;
}
.sv-ritual-card:hover { border-color: var(--kaaya-gold); }
.sv-ritual-media { aspect-ratio: 4/3; overflow: hidden; }
.sv-ritual-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--kg-ease); }
.sv-ritual-card:hover .sv-ritual-media img { transform: scale(1.08); }
.sv-ritual-body { padding: 24px; }
.sv-ritual-tag { font-family: var(--kg-body-font); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kaaya-gold); display: block; margin-bottom: 10px; }
.sv-ritual-title { font-family: var(--kg-heading-font); font-size: 22px; font-weight: 600; color: var(--kaaya-white); margin: 0 0 10px; }
.sv-ritual-desc { font-family: var(--kg-body-font); font-size: 13.5px; line-height: 1.65; color: var(--kaaya-taupe); margin: 0 0 18px; }
.sv-ritual-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.sv-ritual-price { font-family: var(--kg-heading-font); font-size: 16px; color: var(--kaaya-gold); }
.sv-ritual-duration { font-family: var(--kg-body-font); font-size: 11px; color: var(--kaaya-taupe); letter-spacing: 0.05em; }
.sv-ritual-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kg-body-font); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kaaya-white); }
.sv-ritual-cta svg { width: 13px; height: 13px; transition: transform 0.35s var(--kg-ease); }
.sv-ritual-card:hover .sv-ritual-cta svg { transform: translateX(5px); }

.sv-ritual-arrow {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(218, 241, 222, 0.25);
    background: transparent;
    color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.sv-ritual-arrow svg { width: 16px; height: 16px; }
.sv-ritual-arrow:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); }

.sv-ritual-dots { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.sv-ritual-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(218, 241, 222, 0.25); border: none; padding: 0; cursor: pointer; transition: background 0.35s ease, transform 0.35s ease; }
.sv-ritual-dot.is-active { background: var(--kaaya-gold); transform: scale(1.35); }

@media (max-width: 768px) {
    .sv-ritual-arrow { display: none; }
}

/* =========================================================================
   MEMBERSHIPS
   ========================================================================= */
.sv-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.sv-plan {
    position: relative;
    background: var(--kaaya-white);
    border-radius: var(--sv-radius);
    padding: 40px 32px;
    border: 1px solid rgba(35, 83, 71, 0.16);
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--kg-ease), box-shadow 0.5s var(--kg-ease);
}
.sv-plan:hover { transform: translateY(-8px); box-shadow: var(--sv-shadow-light); }
.sv-plan.is-popular { background: var(--kaaya-black); border-color: var(--kaaya-black); transform: scale(1.045); z-index: 1; box-shadow: 0 0 0 6px rgba(142, 182, 155, 0.18); }
.sv-plan.is-popular:hover { transform: scale(1.045) translateY(-8px); }

.sv-plan-badge {
    position: absolute; top: -14px; left: 32px;
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--kaaya-gold);
    color: var(--kaaya-black);
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 7px 16px;
    border-radius: 999px;
}
.sv-plan-badge svg { width: 11px; height: 11px; }
.sv-plan-label { font-family: var(--kg-body-font); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kaaya-olive); margin-bottom: 12px; }
.sv-plan.is-popular .sv-plan-label { color: var(--kaaya-taupe); }
.sv-plan-name { font-family: var(--kg-heading-font); font-size: 27px; font-weight: 600; color: var(--kaaya-black); margin: 0 0 6px; }
.sv-plan.is-popular .sv-plan-name { color: var(--kaaya-white); }
.sv-plan-price { font-family: var(--kg-heading-font); font-size: 40px; font-weight: 600; color: var(--kaaya-olive); margin-bottom: 4px; }
.sv-plan.is-popular .sv-plan-price { color: var(--kaaya-gold); }
/* FIX: was color: var(--kaaya-sage) unconditionally — ~2.25:1 against the
   card's default white background (fails WCAG AA). Every sibling property
   in this component already branches to a readable value for both the
   default white card and the .is-popular black card (see -label/-name/
   -price/-desc/-list above); this one hadn't, so it read the same
   near-invisible sage on both. */
.sv-plan-price small { font-family: var(--kg-body-font); font-size: 13px; font-weight: 400; color: var(--kaaya-moss); }
.sv-plan.is-popular .sv-plan-price small { color: var(--kaaya-taupe); }
.sv-plan-desc { font-family: var(--kg-body-font); font-size: 14px; line-height: 1.6; color: var(--kaaya-charcoal); margin-bottom: 26px; }
.sv-plan.is-popular .sv-plan-desc { color: var(--kaaya-taupe); }
.sv-plan-list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 13px; flex-grow: 1; }
.sv-plan-list li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--kg-body-font); font-size: 13.5px; color: var(--kaaya-charcoal); }
.sv-plan.is-popular .sv-plan-list li { color: var(--kaaya-beige); }
.sv-plan-list li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--kaaya-gold); }
.sv-plan-cta {
    width: 100%; text-align: center; justify-content: center;
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kg-body-font); font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 15px 20px; border-radius: 999px; cursor: pointer;
    background: var(--kaaya-black); color: var(--kaaya-white); border: 1px solid var(--kaaya-black);
    transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.sv-plan-cta:hover { background: var(--kaaya-gold); border-color: var(--kaaya-gold); color: var(--kaaya-black); transform: translateY(-2px); }
.sv-plan.is-popular .sv-plan-cta { background: var(--kaaya-gold); color: var(--kaaya-black); border-color: var(--kaaya-gold); }
.sv-plan.is-popular .sv-plan-cta:hover { background: var(--kaaya-white); border-color: var(--kaaya-white); }

.sv-membership-foot { text-align: center; margin-top: 48px; }
.sv-compare-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--kg-body-font); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--kaaya-black); background: none; border: none; border-bottom: 1px solid var(--kaaya-gold);
    padding-bottom: 4px; cursor: pointer;
}
.sv-compare-link svg { width: 13px; height: 13px; transition: transform 0.35s ease; }
.sv-compare-link:hover svg { transform: translateX(5px); }

@media (max-width: 992px) {
    .sv-plan-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .sv-plan.is-popular { transform: none; order: -1; }
    .sv-plan.is-popular:hover { transform: translateY(-8px); }
}

/* =========================================================================
   BEAUTY PACKAGES
   Moved to the shared assets/css/pk-packages.css, loaded on every page —
   see includes/partials/packages-section.php, included by both index.php
   and services.php so the two never drift out of visual sync.
   ========================================================================= */

/* =========================================================================
   REWARDS PATH
   ========================================================================= */
.sv-rewards-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.sv-rewards-line {
    position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 2px;
    background-image: linear-gradient(90deg, var(--kaaya-gold) 50%, transparent 50%);
    background-size: 14px 2px;
    opacity: 0.55;
}
.sv-reward-card { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sv-reward-icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: var(--kaaya-white);
    border: 1px solid rgba(35, 83, 71, 0.2);
    display: flex; align-items: center; justify-content: center;
    color: var(--kaaya-olive);
    margin-bottom: 22px;
    position: relative; z-index: 1;
    transition: transform 0.5s var(--kg-ease), background 0.5s var(--kg-ease), color 0.5s var(--kg-ease);
    box-shadow: var(--sv-shadow-light);
}
.sv-reward-icon svg { width: 26px; height: 26px; }
.sv-reward-card:hover .sv-reward-icon { transform: rotate(-8deg) scale(1.08); background: var(--kaaya-black); color: var(--kaaya-gold); }
.sv-reward-num { font-family: var(--kg-heading-font); font-size: 13px; color: var(--kaaya-gold); margin-bottom: 8px; }
.sv-reward-title { font-family: var(--kg-heading-font); font-size: 18px; font-weight: 600; color: var(--kaaya-black); margin: 0 0 8px; }
.sv-reward-desc { font-family: var(--kg-body-font); font-size: 13px; line-height: 1.6; color: var(--kaaya-moss); margin: 0; }

@media (max-width: 768px) {
    .sv-rewards-path { grid-template-columns: 1fr; gap: 36px; }
    .sv-rewards-line { top: 0; bottom: 0; left: 34px; right: auto; width: 2px; height: auto; background-image: linear-gradient(180deg, var(--kaaya-gold) 50%, transparent 50%); background-size: 2px 14px; }
    .sv-reward-card { flex-direction: row; text-align: left; gap: 20px; }
    .sv-reward-icon { margin-bottom: 0; flex-shrink: 0; }
}

/* =========================================================================
   FAQ + GET IN TOUCH
   ========================================================================= */
.sv-faq { background: var(--kaaya-black); }
.sv-faq-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: start; }
.sv-faq-list { display: flex; flex-direction: column; gap: 14px; }
.sv-faq-item { border: 1px solid rgba(218, 241, 222, 0.14); border-radius: var(--sv-radius-sm); overflow: hidden; background: rgba(218, 241, 222, 0.03); }
.sv-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 24px; background: none; border: none; cursor: pointer; text-align: left;
    font-family: var(--kg-heading-font); font-size: 17px; font-weight: 600; color: var(--kaaya-white);
}
.sv-faq-q-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(218,241,222,0.25); display: flex; align-items: center; justify-content: center; transition: transform 0.4s var(--kg-ease), background 0.4s ease; }
.sv-faq-q-icon svg { width: 12px; height: 12px; color: var(--kaaya-taupe); }
.sv-faq-item.is-open .sv-faq-q-icon { transform: rotate(180deg); background: var(--kaaya-gold); }
.sv-faq-item.is-open .sv-faq-q-icon svg { color: var(--kaaya-black); }
.sv-faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--kg-ease); }
.sv-faq-item.is-open .sv-faq-a-wrap { grid-template-rows: 1fr; }
.sv-faq-a-inner { overflow: hidden; }
.sv-faq-a { margin: 0; padding: 0 24px 22px; font-family: var(--kg-body-font); font-size: 14.5px; line-height: 1.7; color: var(--kaaya-taupe); }

.sv-touch-card {
    background: linear-gradient(155deg, rgba(142,182,155,0.14), rgba(142,182,155,0.02));
    border: 1px solid rgba(142, 182, 155, 0.3);
    border-radius: 0;
    padding: 44px 36px;
}
.sv-touch-card h3 { font-family: var(--kg-heading-font); font-size: 28px; color: var(--kaaya-white); margin: 14px 0 14px; }
.sv-touch-card p { font-family: var(--kg-body-font); font-size: 14.5px; line-height: 1.7; color: var(--kaaya-taupe); margin-bottom: 30px; }
.sv-touch-actions { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.sv-touch-actions a {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--kg-body-font); font-size: 14px; font-weight: 500; color: var(--kaaya-white);
    padding: 16px 18px; border: 1px solid rgba(218, 241, 222, 0.16); border-radius: var(--sv-radius-sm);
    text-decoration: none; transition: border-color 0.35s ease, background 0.35s ease;
}
.sv-touch-actions a:hover { border-color: var(--kaaya-gold); background: rgba(142,182,155,0.08); }
.sv-touch-actions a svg { width: 14px; height: 14px; color: var(--kaaya-gold); }

@media (max-width: 992px) { .sv-faq-grid { grid-template-columns: 1fr; gap: 40px; } }

/* =========================================================================
   MODALS (service detail / membership detail / compare) — shared engine
   from kaaya-editorial.js (data-kg-open / data-kg-close), fresh look here.
   ========================================================================= */
.sv-modal {
    position: fixed;
    z-index: 1400;
    left: 50%; top: 50%;
    transform: translate(-50%, -47%) scale(0.98);
    width: min(760px, 92vw);
    max-height: 88vh;
    overflow: hidden;
    border-radius: var(--sv-radius);
    background: var(--kaaya-ivory);
    box-shadow: 0 60px 120px -30px rgba(10, 12, 6, 0.6);
    opacity: 0;
    pointer-events: none;
    display: grid;
    grid-template-columns: 0.9fr 1fr;
    transition: opacity 0.5s var(--kg-ease), transform 0.5s var(--kg-ease);
}
.sv-modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.sv-modal--wide { grid-template-columns: 1fr; width: min(880px, 92vw); }
.sv-modal-media { position: relative; min-height: 260px; background: var(--kaaya-charcoal); }
.sv-modal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-modal-body { padding: 42px 38px; overflow-y: auto; }
.sv-modal--wide .sv-modal-body { padding: 44px; }
.sv-modal-close {
    position: absolute; top: 18px; right: 18px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(5, 31, 32, 0.55); backdrop-filter: blur(4px);
    border: none; color: var(--kaaya-white);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.3s ease;
}
.sv-modal-close svg { width: 15px; height: 15px; }
.sv-modal-close:hover { background: var(--kaaya-gold); color: var(--kaaya-black); }
.sv-modal-cat { font-family: var(--kg-body-font); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kaaya-olive); }
.sv-modal-title { font-family: var(--kg-heading-font); font-size: 30px; font-weight: 600; color: var(--kaaya-black); margin: 10px 0 18px; }
.sv-modal-meta { display: flex; gap: 20px; margin-bottom: 20px; }
.sv-modal-meta span { font-family: var(--kg-body-font); font-size: 13px; color: var(--kaaya-charcoal); display: flex; align-items: center; gap: 7px; }
.sv-modal-meta span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--kaaya-gold); }
.sv-modal-price { color: var(--kaaya-olive) !important; font-weight: 700; font-size: 15px; }
.sv-price-mrp {
    text-decoration: line-through;
    font-weight: 500;
    font-size: 0.78em;
    margin-right: 6px;
    color: #9a9a92 !important;
    opacity: 1;
}
.sv-modal-desc { font-family: var(--kg-body-font); font-size: 14.5px; line-height: 1.75; color: var(--kaaya-charcoal); margin-bottom: 24px; }
.sv-modal-included-label { font-family: var(--kg-body-font); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kaaya-gold); margin-bottom: 12px; }
.sv-modal-included { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-modal-included li { font-family: var(--kg-body-font); font-size: 13.5px; color: var(--kaaya-charcoal); display: flex; align-items: flex-start; gap: 9px; }
.sv-modal-included li svg { width: 14px; height: 14px; color: var(--kaaya-gold); margin-top: 2px; flex-shrink: 0; }
.sv-modal-cta {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    font-family: var(--kg-body-font); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 15px 26px; border-radius: 999px; background: var(--kaaya-black); color: var(--kaaya-white);
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.sv-modal-cta svg { width: 13px; height: 13px; }
.sv-modal-cta:hover { background: var(--kaaya-gold); color: var(--kaaya-black); transform: translateY(-2px); }
.sv-modal-terms { font-family: var(--kg-body-font); font-size: 11.5px; line-height: 1.6; color: var(--kaaya-moss); margin-top: 20px; }

.sv-compare-table-wrap { overflow-x: auto; }
.sv-compare-table { width: 100%; border-collapse: collapse; font-family: var(--kg-body-font); font-size: 13px; }
.sv-compare-table th, .sv-compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(35,83,71,0.14); white-space: nowrap; }
.sv-compare-table th { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kaaya-olive); }
.sv-compare-table td:first-child, .sv-compare-table th:first-child { color: var(--kaaya-black); font-weight: 600; white-space: normal; }

@media (max-width: 720px) {
    .sv-modal, .sv-modal--wide { grid-template-columns: 1fr; width: 92vw; max-height: 90vh; }
    .sv-modal-media { min-height: 180px; }
    .sv-modal-body { padding: 30px 24px; }
}


@media (max-width: 992px) {
    .sv-section { padding: 90px 0; }
    .sv-section-head { margin-bottom: 44px; }
}
@media (max-width: 560px) {
    .sv-section { padding: 68px 0; }
}

/* ================= ORIENTATION STRIP ================= */
/* Thin dark band bridging the hero into the page: a first-glance read on
   what this place actually is, before asking anyone to browse or choose. */
.sv-orient { background: var(--kaaya-charcoal); }
.sv-orient-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 34px 24px;
}
.sv-orient-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 0 18px;
    border-left: 1px solid rgba(218,241,222,0.14);
}
.sv-orient-item:first-child { border-left: none; }
.sv-orient-num {
    font-family: var(--kg-heading-font);
    font-size: clamp(44px, 5.5vw, 68px);
    font-weight: 600;
    color: var(--kaaya-gold);
    line-height: 1;
    letter-spacing: -0.01em;
    /* lining figures: the heading serif defaults to old-style numerals, which
       made "42+" and "1:1" look tiny and uneven */
    font-variant-numeric: lining-nums tabular-nums;
}
.sv-orient-label { font-family: var(--kg-body-font); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(218,241,222,0.6); max-width: 18ch; }
@media (max-width: 768px) {
    .sv-orient-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
    .sv-orient-item:nth-child(3) { border-left: none; }
}
@media (max-width: 420px) {
    .sv-orient-num { font-size: 44px; }
    .sv-orient-grid { grid-template-columns: 1fr; }
    .sv-orient-item { border-left: none; border-top: 1px solid rgba(218,241,222,0.14); padding-top: 18px; }
    .sv-orient-item:first-child { border-top: none; padding-top: 0; }
}

/* ================= CHAPTER MARKERS ================= */
/* Three dividers that group the page's existing sections into a plain
   customer journey — Discover, Save More, Come Back — rather than a
   flat stack of unrelated sections. Reuses the section's own background
   at that point in the page (light by default, dark between the two
   continuous kg-on-dark sections) rather than introducing a new color. */
.sv-chapter-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 44px 24px;
}
.sv-chapter-num {
    font-family: var(--kg-heading-font);
    font-size: 15px;
    font-weight: 600;
    color: var(--kaaya-gold);
    flex-shrink: 0;
}
.sv-chapter-rule { flex: 1 1 auto; height: 1px; background: rgba(35,83,71,0.18); }
.sv-chapter-label {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--kaaya-moss);
    flex-shrink: 0;
    white-space: nowrap;
}
.sv-chapter-marker-dark { background: var(--kaaya-black); }
.sv-chapter-marker-dark .sv-chapter-rule { background: rgba(218,241,222,0.16); }
.sv-chapter-marker-dark .sv-chapter-label { color: var(--kaaya-beige); }
@media (max-width: 560px) {
    .sv-chapter-label { white-space: normal; text-align: center; }
    .sv-chapter-rule:first-of-type { display: none; }
    .sv-chapter-marker { justify-content: flex-start; }
}

/* ================= SERVICE DETAIL PAGE ================= */
.svd-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kaaya-beige);
    text-decoration: none;
    margin-bottom: 18px;
    transition: color 0.3s ease;
}
.svd-back svg { width: 13px; height: 13px; }
.svd-back:hover { color: var(--kaaya-gold); }

.svd-detail { background: var(--kaaya-white); }
.svd-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: start;
}
.svd-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.svd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svd-media-price {
    position: absolute;
    right: 18px;
    bottom: 18px;
    font-family: var(--kg-heading-font);
    font-size: 20px;
    font-weight: 600;
    color: var(--kaaya-black);
    background: var(--kaaya-gold);
    padding: 10px 20px;
    border-radius: 999px;
    z-index: 2;
}
.svd-media-discount {
    top: 18px;
    left: 18px;
    right: auto;
    font-size: 12px;
    padding: 6px 13px;
}
.svd-body { padding-top: 6px; }

.svd-related-grid { margin-top: 0; }
.svd-related-card .sv-card-cta { border-color: var(--kaaya-gold); color: var(--kaaya-gold); background: transparent; }
.svd-related-card:hover .sv-card-cta { background: var(--kaaya-gold); color: var(--kaaya-black); }

.svd-notfound { min-height: 50vh; display: flex; align-items: center; }
.svd-notfound-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.svd-notfound-inner .kg-eyebrow { justify-content: center; }
.svd-notfound-inner .kg-eyebrow::before { display: none; }
.svd-notfound-inner .kg-lede { margin: 0 auto 30px; }

@media (max-width: 860px) {
    .svd-grid { grid-template-columns: 1fr; gap: 34px; }
    .svd-media { aspect-ratio: 16 / 10; }
}

.sv-modal-permalink {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-family: var(--kg-body-font);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--kaaya-moss);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sv-modal-permalink:hover { color: var(--kaaya-olive); }
/* ================= SERVICE CARD v2 — "botanical" dark card =================
   Dark, editorial-spa card: deep-forest body, full-bleed photo with a leaf
   badge, a leaf-accented price pill, an icon+label feature row, and a
   two-button footer (outline "View Details" + solid "Book Now"). Three
   of these sit per row on desktop (see .sv-card-grid above). */

.sv-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    background: #0A2C28;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(218, 241, 222, 0.08);
    box-shadow: 0 30px 60px -34px rgba(5, 31, 32, 0.55);
    transition: transform 0.45s var(--kg-ease), box-shadow 0.45s var(--kg-ease);
}
.sv-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -26px rgba(5, 31, 32, 0.65);
}
/* Flush full-bleed banner photo, rounded to match the card's top corners. */
.sv-card-v2-media {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3.4;
    border-radius: 0;
    overflow: hidden;
}
.sv-card-v2-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s var(--kg-ease); }
.sv-card-v2:hover .sv-card-v2-media img { transform: scale(1.05); }
/* Badge pill overlaid on the photo (discount/offer label, when present). */
.sv-card-v2-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(10, 44, 40, 0.85);
    border: 1px solid rgba(218, 241, 222, 0.18);
    color: var(--kaaya-sage);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
.sv-card-v2-badge svg { width: 13px; height: 13px; }

.sv-card-v2-body {
    position: relative;
    padding: 24px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    /* soft leaf-glow watermark tucked in the bottom-right corner, echoing
       the reference card's decorative botanical flourish */
    background-image: radial-gradient(circle at 100% 100%, rgba(142,182,155,0.14), transparent 55%);
}
.sv-card-v2-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sv-card-v2-name {
    font-family: var(--kg-heading-font);
    font-size: 26px;
    font-weight: 600;
    color: var(--kaaya-white);
    margin: 0;
    line-height: 1.15;
}
.sv-card-v2-name a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: color var(--kg-speed-fast, .2s) ease, background-size var(--kg-speed-fast, .2s) ease; }
.sv-card-v2-name a:hover { color: var(--kaaya-sage); background-size: 100% 1px; }
.sv-card-v2-name a:focus-visible { color: var(--kaaya-sage); background-size: 100% 1px; outline: 2px solid var(--kaaya-sage); outline-offset: 3px; border-radius: 3px; }
#kg-packages .sv-card-v2-name a:hover,
#kg-packages .sv-card-v2-name a:focus-visible { color: var(--kaaya-moss); outline-color: var(--kaaya-moss); }
.sv-card-v2-price-wrap { flex-shrink: 0; display: inline-flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.sv-card-v2-mrp { font-family: var(--kg-body-font); font-size: 12px; color: rgba(218, 241, 222, 0.4); }
.sv-card-v2-price-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--kg-body-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--kaaya-black);
    background: var(--kaaya-sage);
    padding: 10px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.sv-card-v2-price-pill svg { width: 13px; height: 13px; color: var(--kaaya-black); opacity: 0.85; }
.sv-card-v2-desc {
    font-family: var(--kg-body-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--kaaya-white);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feature row: icon-in-a-circle + label, separated by thin dividers —
   replaces the old flat tag-pill row for this card only. */
.sv-card-v2-features {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 10px 0 2px;
}
.sv-card-v2-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    padding: 0 8px;
    text-align: center;
    border-left: 1px solid rgba(218, 241, 222, 0.14);
}
.sv-card-v2-feature:first-child { border-left: none; padding-left: 0; }
.sv-card-v2-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(142, 182, 155, 0.16);
    color: var(--kaaya-sage);
    font-family: var(--kg-body-font);
    font-size: 12px;
    font-weight: 700;
}
.sv-card-v2-feature-icon svg { width: 15px; height: 15px; }
.sv-card-v2-feature-label {
    font-family: var(--kg-body-font);
    font-size: 11px;
    font-weight: 500;
    color: rgba(218, 241, 222, 0.65);
    white-space: nowrap;
}

/* Footer: solid "Book Now" button, full width (the card title links to the details page). */
.sv-card-v2-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.sv-card-v2-actions--single .sv-card-v2-cta { flex: 1 1 100%; }

.sv-card-v2-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 100%;
    padding: 14px 12px;
    border-radius: 999px;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease), border-color var(--kg-speed-fast) var(--kg-ease), transform var(--kg-speed-fast) var(--kg-ease);
}
.sv-card-v2-cta svg { width: 14px; height: 14px; flex-shrink: 0; }

.sv-card-v2-cta {
    background: var(--kaaya-white);
    color: var(--kaaya-black);
    border: 1px solid var(--kaaya-white);
}
.sv-card-v2-cta:hover {
    /* FIX: text was disappearing on hover. base.css has a global
       `a:hover { color: var(--gold); }` rule (#8EB69B) that this button
       never overrode with its own hover color — and #8EB69B is the exact
       same color as this button's own hover background (--kaaya-sage),
       so the label was rendering in a color identical to its own
       background. Explicitly keeping the text black on hover fixes it. */
    background: var(--kaaya-sage);
    border-color: var(--kaaya-sage);
    color: var(--kaaya-black);
    transform: translateY(-1px);
}
.sv-card-v2-cta:focus { opacity: 0.9; }
/* ---- Split button: ONE pill, two actions ("View Details" | "Book Now") ---- */
.sv-card-v2-split {
    display: flex;
    align-items: stretch;
    flex: 1 1 100%;
    width: 100%;
    background: var(--kaaya-white);
    border: 1px solid var(--kaaya-white);
    border-radius: 999px;
    overflow: hidden;
}
.sv-card-v2-split-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 50%;
    min-width: 0;
    padding: 14px 10px;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-family: var(--kg-body-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: var(--kaaya-black);
    cursor: pointer;
    transition: background var(--kg-speed-fast) var(--kg-ease), color var(--kg-speed-fast) var(--kg-ease);
}
.sv-card-v2-split-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* thin divider between the two halves */
.sv-card-v2-split-book { border-left: 1px solid rgba(11, 43, 38, 0.18); }
/* "Book Now" is the primary half: slightly stronger weight */
.sv-card-v2-split-book { font-weight: 800; }
.sv-card-v2-split-details { font-weight: 600; }
/* explicit colors on hover/focus: base.css has a global a:hover color that would otherwise hide the label */
.sv-card-v2-split-btn:hover,
.sv-card-v2-split-btn:focus-visible {
    background: var(--kaaya-sage);
    color: var(--kaaya-black);
    outline: none;
}
.sv-card-v2-split:focus-within { box-shadow: 0 0 0 2px var(--kaaya-sage); }
@media (max-width: 560px) {
    .sv-card-v2-split { flex: 0 0 auto; }
    .sv-card-v2-split-btn { font-size: 12.5px; padding: 14px 8px; gap: 6px; }
}

.sv-card-v2-cta:disabled { pointer-events: none; opacity: 0.5; }

@media (max-width: 560px) {
    .sv-card-v2-body { padding: 20px 20px 20px; }
    .sv-card-v2-name { font-size: 21px; }
    .sv-card-v2-feature-label { font-size: 10px; }
    .sv-card-v2-actions { flex-direction: column; }
    .sv-card-v2-cta { width: 100%; }
}

/* ================= LUXURY BEAUTY PACKAGE CARDS — white outer card =================
   Scoped to #kg-packages (the packages.php grid, via includes/partials/
   luxury-packages-section.php) only — .sv-card-v2 is a shared component
   also used for treatment cards elsewhere (services.php) and the "All
   Offers" grid on monthly-specials.php, and those are unaffected.

   Everything below is a re-skin of the same dark botanical card onto a
   white outer background: names, prices, descriptions, images and every
   button/link/href stay the functionally identical elements the base
   .sv-card-v2-* rules above already define — only colour, border, shadow
   and a few spacing values change so the card reads correctly on white
   instead of on #0A2C28. */
#kg-packages .sv-card-v2 {
    background: var(--kaaya-white, #FFFFFF);
    border: 1px solid var(--kaaya-beige, #E4DCC9);
    /* Softer, warmer shadow suited to a light card — the original's deep
       near-black shadow read too heavy against white. */
    box-shadow: 0 24px 48px -30px rgba(11, 43, 38, 0.22), 0 2px 10px -4px rgba(11, 43, 38, 0.08);
}
#kg-packages .sv-card-v2:hover {
    box-shadow: 0 34px 64px -28px rgba(11, 43, 38, 0.28), 0 4px 14px -4px rgba(11, 43, 38, 0.1);
    border-color: rgba(11, 43, 38, 0.16);
}
/* Watermark glow keeps the same sage tint, just gentler against white. */
#kg-packages .sv-card-v2-body {
    background-image: radial-gradient(circle at 100% 100%, rgba(142, 182, 155, 0.16), transparent 55%);
    /* A touch more breathing room than the dark card needed — white space
       reads as "premium" here in a way a tight dark card doesn't. */
    padding: 28px 26px 26px;
    gap: 16px;
}
#kg-packages .sv-card-v2-price-pill {
    /* A hairline border gives the pill definition now that it's sitting
       on white instead of #0A2C28, where the sage fill alone had enough
       contrast to read as a distinct shape. */
    border: 1px solid rgba(11, 43, 38, 0.08);
}
#kg-packages .sv-card-v2-name { color: var(--kaaya-black); }
#kg-packages .sv-card-v2-mrp { color: rgba(11, 43, 38, 0.4); }
#kg-packages .sv-card-v2-desc {
    color: var(--kaaya-moss);
    font-weight: 400; /* the dark card used 600 for contrast on #0A2C28; on white, moss ink at regular weight is more legible and reads calmer */
}
#kg-packages .sv-card-v2-feature { border-left-color: rgba(11, 43, 38, 0.12); }
#kg-packages .sv-card-v2-feature-label { color: rgba(11, 43, 38, 0.62); }
/* Footer, inverted for a white card: solid "Book Now" needs a dark fill
   to stand out instead of the white-on-dark-card fill. */
#kg-packages .sv-card-v2-cta {
    background: var(--kaaya-black, #0B2B26);
    border-color: var(--kaaya-black, #0B2B26);
    color: var(--kaaya-white);
}
#kg-packages .sv-card-v2-cta:hover {
    background: var(--kaaya-sage);
    border-color: var(--kaaya-sage);
    color: var(--kaaya-black);
}
/* Badge sits on the photo itself (unaffected media area), not the outer
   card background — left as-is by design. */

@media (max-width: 560px) {
    #kg-packages .sv-card-v2 { border-radius: 22px; }
}

/* ================= AUTOMATIC TRANSLATION (Google Website Translator) =================
   The widget injects its own <select> (and, briefly, a top banner iframe)
   that we can't fully restyle, so this just tucks it into the hero meta
   row and mutes Google's default chrome so it reads as part of the page
   rather than a bolted-on plugin. */
#google_translate_element {
    display: inline-flex;
    align-items: center;
}
#google_translate_element .goog-te-gadget {
    font-family: var(--kg-body-font) !important;
    font-size: 0 !important; /* hide "Powered by" text, keep the <select> */
    color: transparent !important;
}
#google_translate_element .goog-te-gadget > span > a { display: none !important; } /* "Powered by Google Translate" link */
#google_translate_element .goog-te-gadget-simple {
    background: transparent !important;
    border: 1px solid rgba(218, 241, 222, 0.35) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value {
    font-family: var(--kg-body-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: var(--kaaya-beige) !important;
}
#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span { color: var(--kaaya-beige) !important; }
#google_translate_element img { vertical-align: middle !important; }
/* Google's translate banner pushes the whole page down when active —
   suppress it so the layout doesn't jump. */
body { top: 0 !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
.goog-tooltip.skiptranslate, .goog-tooltip-popup { display: none !important; }


/* ================= SERVICE SUB-CATEGORIES ================= */
/* Same layout as the Seasonal Ritual Calendar (.sr-layout / .sr-side):
   a sticky numbered list on the LEFT, the chosen sub-category's services
   on the RIGHT. On mobile the list becomes a horizontal scroll strip. */
.sv-sublayout {
    --sv-ivory: #FBF7F1;
    --sv-cream: #F5EEE2;
    --sv-brown: #6B5842;
    --sv-brown-deep: #4A3B2A;
    --sv-charcoal: #2E2620;
    --sv-line: rgba(74, 59, 42, 0.16);
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 3vw, 40px);
    margin-top: 40px;
}
.sv-subside { position: sticky; top: 24px; align-self: start; }
.sv-subside-inner {
    background: var(--sv-ivory);
    border: 1px solid var(--sv-line);
    border-radius: 22px;
    padding: 22px 18px;
}
.sv-subside-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 10px 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--sv-line);
}
.sv-subside-eyebrow {
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 19px;
    color: var(--sv-brown-deep);
}
.sv-subside-count {
    font-family: var(--kg-body-font);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sv-brown);
    opacity: 0.75;
    white-space: nowrap;
}
.sv-subside-nav { position: relative; display: flex; flex-direction: column; gap: 2px; }
.sv-subside-nav::before {
    content: '';
    position: absolute;
    left: 30px; top: 26px; bottom: 26px;
    width: 1px;
    background: var(--sv-line);
    z-index: 0;
}
.sv-sublink {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 10px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--sv-charcoal);
    font: inherit;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.sv-sublink:hover { background: var(--sv-cream); transform: translateX(2px); }
.sv-sublink-num {
    flex: 0 0 auto;
    width: 24px;
    text-align: center;
    font-family: var(--kg-heading-font);
    font-style: italic;
    font-weight: 600;
    font-size: 20px;
    color: var(--sv-brown);
    background: var(--sv-ivory);
    transition: color .3s ease;
}
.sv-sublink-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.sv-sublink-name {
    font-family: var(--kg-body-font);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.sv-sublink-count {
    font-family: var(--kg-body-font);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--sv-brown);
    opacity: 0.75;
    margin-top: 2px;
}
.sv-sublink.is-active {
    background: var(--kaaya-moss);
    color: #fff;
    box-shadow: 0 24px 48px -28px rgba(46, 38, 32, 0.28);
}
.sv-sublink.is-active .sv-sublink-num { color: #fff; background: transparent; }
.sv-sublink.is-active .sv-sublink-count { color: var(--kaaya-beige, #EBE0CC); opacity: 1; }
.sv-sublink.is-active:hover { transform: none; }
.sv-sublink:focus-visible { outline: 2px solid var(--kaaya-moss); outline-offset: 2px; }

/* Right column */
.sv-submain { min-width: 0; }
.sv-submain.is-switching { animation: svSubFade .35s ease; }
@keyframes svSubFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sv-subgroup[hidden] { display: none; }
.sv-subgroup-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(35, 83, 71, 0.16);
}
.sv-subgroup-title {
    font-family: var(--kg-heading-font);
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    color: var(--kaaya-black);
    margin: 0;
}
.sv-subgroup-count {
    font-family: var(--kg-body-font);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kaaya-moss);
    opacity: 0.8;
}
/* Narrower right column -> two cards per row on desktop. */
.sv-submain .sv-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) {
    .sv-submain .sv-card-grid { grid-template-columns: 1fr; }
}

/* Mobile: the list flips into a horizontal strip above the services. */
@media (max-width: 900px) {
    .sv-sublayout { display: block; margin-top: 28px; }
    .sv-subside { position: static; margin-bottom: 24px; }
    .sv-subside-inner { padding: 14px; border-radius: 18px; }
    .sv-subside-head { padding: 2px 6px 10px; margin-bottom: 10px; }
    .sv-subside-nav {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .sv-subside-nav::before { display: none; }
    .sv-sublink {
        flex: 0 0 auto;
        width: auto;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 14px;
        border: 1px solid var(--sv-line);
        scroll-snap-align: start;
    }
    .sv-sublink:hover { transform: none; }
    .sv-sublink-num { width: auto; font-size: 15px; }
    .sv-sublink-meta { align-items: center; text-align: center; }
    .sv-sublink-name { font-size: 10.5px; white-space: nowrap; }
    .sv-sublink-count { display: none; }
    .sv-submain .sv-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 560px) {
    .sv-submain .sv-card-grid { grid-template-columns: 1fr; }
}

/* Split button on the white Packages cards: dark pill, light text */
#kg-packages .sv-card-v2-split { background: var(--kaaya-black, #0B2B26); border-color: var(--kaaya-black, #0B2B26); }
#kg-packages .sv-card-v2-split-btn { color: var(--kaaya-white); }
#kg-packages .sv-card-v2-split-book { border-left-color: rgba(255, 255, 255, 0.22); }
#kg-packages .sv-card-v2-split-btn:hover,
#kg-packages .sv-card-v2-split-btn:focus-visible { background: var(--kaaya-sage); color: var(--kaaya-black, #0B2B26); }
@media (max-width: 380px) {
    .sv-card-v2-split-btn { font-size: 11.5px; letter-spacing: 0; padding-left: 6px; padding-right: 6px; }
    .sv-card-v2-split-book svg { display: none; }
}

/* Single "View Details & Book Appointment" button: allow the longer label to wrap on narrow cards */
.sv-card-v2-cta { white-space: normal; text-align: center; line-height: 1.25; }

/* Category tab bar: no transitions at all. The active pill, colours, hover and scrolling change instantly. */
.sv-tabbar { scroll-behavior: auto !important; }
.sv-tabbar,
.sv-tabbar *,
.sv-tab-indicator { transition: none !important; animation: none !important; }