/* =========================================================================
   MONTHLY — SEASONAL OFFERS
   Five-card, self-advancing 3D carousel. Every card shows one face only
   (photo with a month badge + price/duration overlay, then category,
   title, a 2-line description and VIEW DETAILS + BOOK NOW) — a true
   perspective stage where the centre card sits forward and square-on and
   its two neighbours tilt away in depth. Advances every 3s, 550ms move,
   never pauses on hover.

   How it works
   - Every card is absolutely centred in .kg-so-stage and placed purely by
     its data-pos (-2 … +2, 0 = centre). JS only ever changes data-pos;
     each position sets a handful of custom properties (--x --s --r --o
     --z --tz) that feed ONE transform, so every card animates with
     transform + opacity only (GPU friendly, no layout).
   - Only three cards ever read as "on stage" at once: data-pos -2/2 are
     held at opacity 0 (still positioned/transitioning, just not shown) so
     a card already looks right the instant it becomes a visible neighbour.
   - data-pos -3 / +3 are invisible "wings" used only when a card wraps
     from the far left round to the far right (see the JS).
   - The old flip (.kg-so-flip / .kg-so-face--back) markup and CSS stay in
     place but inert — nothing triggers it — in case a flip is wanted
     again later; only .kg-so-face--front is ever shown.
   ========================================================================= */

.kg-so {
    /* palette */
    --so-ivory: #f7f3ea;
    --so-sage: #9aab96;
    --so-sage-soft: #b9c4b3;
    --so-olive: #45513a;
    --so-olive-deep: #35402c;
    --so-charcoal: #2c2d28;

    --so-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --so-dark-bg-1: var(--kaaya-charcoal, #0B2B26);
    --so-dark-bg-2: var(--kaaya-black, #051F20);
    --so-dark-line: rgba(247, 243, 234, 0.14);
    --so-dark-text-soft: rgba(247, 243, 234, 0.72);

    /* BOOK NOW — solid green */
    --so-green: #3d7a52;
    --so-green-deep: #274d34;
    --so-green-hover: #48925f;

    /* accents shared by the back face — the site's existing gold/taupe
       token, which in this palette reads as a soft champagne-sage, not
       a literal metallic gold */
    --so-accent: var(--kaaya-gold, #8EB69B);

    /* Corner sprig flourish only (.kg-so-front-sprig) — a warm
       champagne-gold line color, deliberately separate from --so-accent
       above: --kaaya-gold resolves to a sage green in this site's
       palette (see kaaya-editorial.css), which reads wrong for this one
       decorative element. */
    --so-sprig: #cdb37f;
}

.kg-so {
    /* motion — fast, not cinematic. JS keeps WRAP_EXIT_MS below this. */
    --so-move: 550ms;
    /* the card's own flip, independent of --so-move above */
    --so-flip-move: 700ms;

    /* geometry — card width drives everything else */
    --so-w: clamp(220px, calc((100vw - 200px) / 4.4), 320px);
    --so-h: calc(var(--so-w) * 1.5);
    --so-x1: 0.95;   /* neighbour offset, in card widths (=> a slim overlap behind the centre card) */
    --so-x2: 1.88;   /* outer offset, in card widths (=> a slim overlap behind the neighbour) */

    position: relative;
    overflow: hidden;
    padding: clamp(84px, 9vw, 128px) 0 clamp(72px, 8vw, 116px);
    background:
        radial-gradient(60% 46% at 50% 62%, rgba(142, 182, 155, 0.10), rgba(142, 182, 155, 0) 70%),
        linear-gradient(180deg, var(--so-dark-bg-1) 0%, var(--so-dark-bg-2) 100%);
    color: var(--so-ivory);
    border: 0;
    box-shadow: none;
}
.kg-so::before,
.kg-so::after { content: none; }

/* Homepage-only: plain white ground instead of the dark gradient (see
   includes/partials/offers-section.php for when this modifier is added).
   Only the header text and the progress dots need dark-on-white
   equivalents here — every card is dark front and back regardless, so the
   cards themselves, the ghost/solid buttons inside them, and the
   prev/next pointer chips (already a dark chip with a light icon) all
   read the same regardless of what the section's own background is. */
.kg-so--white {
    background: #FFFFFF;
}
/* monthly-specials.php: same dark-on-light header, on a soft sage-mint tint
   (the ivory grid section sits directly below, so pure white would blur
   the seam between the two). */
.kg-so--tint { background: #EAF2EA; }
.kg-so--white .kg-so-eyebrow { color: var(--kaaya-charcoal, #0B2B26); }
.kg-so--white .kg-so-title { color: var(--kaaya-charcoal, #0B2B26); }
.kg-so--white .kg-so-tagline { color: rgba(11, 43, 38, 0.68); }
.kg-so--white .kg-so-dot { background: rgba(11, 43, 38, 0.18); }
.kg-so--white .kg-so-dot.is-active { background: rgba(11, 43, 38, 0.14); }

.kg-so-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------------------------------------------------------------- header */
.kg-so-head {
    text-align: left;
    margin: 0 0 clamp(40px, 5vw, 64px);
}
.kg-so-eyebrow {
    font-size: 11px;
    font-weight: 600;
    color: var(--so-sage-soft);
    margin: 0 0 18px;
}
.kg-so-journey-index .kg-so-eyebrow { margin-bottom: 0; } /* handled by .kg-journey-index gap instead */
.kg-so-index {
    display: inline-block;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--kaaya-gold, #b08d57);
    vertical-align: middle;
}
.kg-so-index-rule {
    display: inline-block;
    width: 1px;
    height: 22px;
    margin: 0 16px 0 14px;
    background: currentColor;
    opacity: 0.28;
    vertical-align: middle;
}

.kg-so-title {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-weight: 600;
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-indent: 0;
    text-transform: uppercase;
    color: var(--so-ivory);
    margin: 0 0 20px;
}
.kg-so-tagline {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--so-dark-text-soft);
    margin: 0;
}

/* -------------------------------------------------------------- carousel */
.kg-so-carousel {
    position: relative;
    max-width: calc(var(--so-w) * 4.5);
    margin: 0 auto;
}
/* Prev/Next pointers — manual controls alongside the existing 3s autoplay.
   Purely additive: they only ever call the same advance/retreat step the
   clock already uses, so --so-move (550ms) and the autoplay timing in
   kg-seasonal-offers.js are untouched. */
.kg-so-pointer {
    position: absolute;
    top: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(247, 243, 234, 0.3);
    background: rgba(28, 33, 22, 0.55);
    color: var(--so-ivory);
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.kg-so-pointer svg { width: 18px; height: 18px; }
.kg-so-pointer:hover,
.kg-so-pointer:focus-visible {
    background: var(--so-green);
    border-color: var(--so-green);
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 6px 20px -4px rgba(5, 20, 17, 0.5), 0 0 16px -2px rgba(154, 171, 150, 0.35);
}
.kg-so-pointer--prev { left: clamp(-6px, -2vw, 8px); }
.kg-so-pointer--next { right: clamp(-6px, -2vw, 8px); }
@media (max-width: 1024px) {
    .kg-so-pointer { width: 40px; height: 40px; }
    .kg-so-pointer svg { width: 15px; height: 15px; }
}
@media (max-width: 600px) {
    .kg-so-pointer { display: none; }
}
.kg-so-stage {
    position: relative;
    height: calc(var(--so-h) + 84px);
    perspective: 1400px;
    perspective-origin: 50% 50%;
}

.kg-so-card {
    --x: 0;
    --s: 1;
    --r: 0deg;
    --o: 1;
    --z: 5;
    --tz: 0px;

    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--so-w);
    height: var(--so-h);
    margin: 0;
    border-radius: 24px;
    /* Card-level 3D context for the flip below. Overflow stays visible
       here — each face clips its own content (border-radius + its own
       overflow:hidden), so the outer card never needs to. */
    overflow: visible;
    isolation: isolate;
    background: var(--kaaya-charcoal, #0B2B26);
    border: 1px solid rgba(154, 171, 150, 0.16);
    box-shadow: 0 26px 52px -30px rgba(53, 64, 44, 0.30);
    transform:
        translate3d(calc(-50% + var(--x) * var(--so-w)), -50%, var(--tz))
        rotateY(var(--r))
        scale(var(--s));
    /* hover lift uses the separate `translate` property so it can be quick
       (260ms) without touching the 550ms deck movement above */
    translate: 0 0;
    opacity: var(--o);
    z-index: var(--z);
    transition:
        transform var(--so-move) var(--so-ease),
        opacity var(--so-move) var(--so-ease),
        translate 260ms var(--so-ease),
        box-shadow 260ms var(--so-ease),
        border-color 260ms var(--so-ease);
    will-change: transform, opacity;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* Positions — a true 3D carousel stage: the centre card sits forward and
   square on, the two neighbours tilt away in perspective, and the outer
   pair (data-pos -2 / 2) are held offstage (opacity 0) rather than shown
   dim, so at rest only three cards ever read as "on" the stage — they're
   still positioned and transitioning, so a card already looks right the
   moment it becomes a neighbour. */
.kg-so-card[data-pos="0"]  { --x: 0;                          --s: 1.06; --r: 0deg;   --o: 1;    --z: 6; --tz: 34px;  border-color: rgba(154, 171, 150, 0.55); box-shadow: 0 40px 76px -28px rgba(5, 20, 17, 0.55), 0 0 40px -10px rgba(154, 171, 150, 0.22); }
.kg-so-card[data-pos="-1"] { --x: calc(var(--so-x1) * -1);    --s: 0.92; --r: 9deg;   --o: 0.82; --z: 4; --tz: -70px; }
.kg-so-card[data-pos="1"]  { --x: var(--so-x1);               --s: 0.92; --r: -9deg;  --o: 0.82; --z: 4; --tz: -70px; }
.kg-so-card[data-pos="-2"],
.kg-so-card[data-pos="2"]  { --s: 0.86; --o: 0; pointer-events: none; }
.kg-so-card[data-pos="-2"] { --x: calc(var(--so-x2) * -1);    --r: 14deg;  --z: 2; --tz: -150px; }
.kg-so-card[data-pos="2"]  { --x: var(--so-x2);               --r: -14deg; --z: 2; --tz: -150px; }
/* invisible wings — used while a card wraps round the back of the deck.
   Never clickable. */
.kg-so-card[data-pos="-3"] { --x: calc(var(--so-x2) * -1.28); --s: 0.82; --r: 16deg;  --o: 0;    --z: 1; --tz: -170px; pointer-events: none; }
.kg-so-card[data-pos="3"]  { --x: calc(var(--so-x2) * 1.28);  --s: 0.82; --r: -16deg; --o: 0;    --z: 1; --tz: -170px; pointer-events: none; }

/* ---------------------------------------------------------------- flip
   .kg-so-flip is the element that actually rotates; .kg-so-face--front /
   --back are its two absolutely-stacked panels. Independent perspective
   on .kg-so-card (set above via the carousel's own perspective context)
   plus preserve-3d here is what keeps the two faces reading as a real
   card rather than a cross-fade. */
.kg-so-flip {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform var(--so-flip-move) var(--so-ease);
}
.kg-so-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 0;
}
.kg-so-face--front {
    background: var(--kaaya-charcoal, #0B2B26);
    /* Image on top, copy panel underneath — not a full-bleed photo with
       text floated over it. */
    display: flex;
    flex-direction: column;
    z-index: 0;
}
.kg-so-face--back {
    transform: rotateY(180deg);
    background:
        radial-gradient(120% 70% at 15% 0%, rgba(142, 182, 155, 0.14), rgba(142, 182, 155, 0) 60%),
        linear-gradient(165deg, var(--so-dark-bg-1) 0%, var(--so-dark-bg-2) 100%);
}

/* Flip disabled per client feedback — View Details / Book Now now sit
   directly on the front face (see .kg-so-front-actions below) instead
   of requiring a hover/tap flip to reach them. .kg-so-face--back and
   its rotateY machinery stay in the markup/CSS (harmless — nothing
   triggers .is-flipped or the :hover/:focus-within rule anymore, so
   the back face is simply never shown) rather than being torn out, in
   case a flip is wanted again later.
@media (hover: hover) and (pointer: fine) {
    .kg-so-card:hover .kg-so-flip,
    .kg-so-card:focus-within .kg-so-flip {
        transform: rotateY(180deg);
    }
}
.kg-so-flip.is-flipped {
    transform: rotateY(180deg);
}
*/

/* Image occupies only the top half of the card — a contained block, not
   a full-bleed background. */
.kg-so-front-media {
    position: relative;
    flex: 0 0 50%;
    overflow: hidden;
}
.kg-so-front-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transition: transform 600ms var(--so-ease);
}
/* Legibility scrim so the badge/price sitting on the photo below always
   read clearly regardless of the photo's own tones. */
.kg-so-media-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(5, 20, 17, 0.62) 0%, rgba(5, 20, 17, 0) 42%),
        linear-gradient(180deg, rgba(5, 20, 17, 0.30) 0%, rgba(5, 20, 17, 0) 30%);
    pointer-events: none;
}
.kg-so-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(5, 20, 17, 0.55);
    border: 1px solid rgba(154, 171, 150, 0.4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f7f3ea;
}
.kg-so-price-tag {
    position: absolute;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 7px;
    max-width: calc(100% - 24px);
}
.kg-so-price-duration {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--so-sage-soft);
    white-space: nowrap;
}
.kg-so-price-was {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 11px;
    color: rgba(247, 243, 234, 0.5);
    white-space: nowrap;
}
.kg-so-price-now {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-size: clamp(17px, calc(var(--so-w) * 0.07), 20px);
    font-weight: 600;
    line-height: 1;
    color: #fffaf0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

/* Hover is purely visual — subtle zoom on the photo, 3px card lift. It
   never touches the autoplay clock (see kg-seasonal-offers.js), and
   continuing under a flipped card is harmless since backface-visibility
   already hides it. */
@media (hover: hover) and (pointer: fine) {
    .kg-so-card:hover {
        translate: 0 -3px;
        border-color: rgba(154, 171, 150, 0.6);
        box-shadow: 0 34px 68px -26px rgba(5, 20, 17, 0.5), 0 0 32px -8px rgba(154, 171, 150, 0.28);
    }
    .kg-so-card:hover .kg-so-front-media img { transform: scale(1.035); }
}

/* ---------------------------------------------------------- front body
   The lower half: flush with the card's own edges (not an inset floating
   panel) — same deep charcoal-green as the rest of the card front, so the
   photo simply sits on top of one continuous dark card. Holds the
   month / title / rule / copy, plus the corner sprig (below). */
.kg-so-front-body {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: clamp(18px, calc(var(--so-w) * 0.08), 26px) clamp(18px, calc(var(--so-w) * 0.09), 24px) clamp(28px, calc(var(--so-w) * 0.11), 36px);
    border-radius: 0;
    background: var(--so-dark-bg-1, #0B2B26);
    color: #fbf7ee;
}
.kg-so-card-month {
    display: block;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(10px, calc(var(--so-w) * 0.036), 11.5px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kaaya-taupe, #B4D3BC);
    margin: 0 0 8px;
}
.kg-so-front-body .kg-so-card-label {
    display: block;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(10px, calc(var(--so-w) * 0.034), 11px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--so-sage-soft);
    margin: 0 0 8px;
}
.kg-so-card-title {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-weight: 500;
    font-size: clamp(25px, calc(var(--so-w) * 0.108), 33px);
    line-height: 1.06;
    letter-spacing: 0.01em;
    color: #fffaf0;
    margin: 0 0 10px;
    text-transform: none;
}
.kg-so-front-rule {
    display: block;
    width: 22px;
    height: 1px;
    margin: 2px 0 12px;
    background: rgba(255, 250, 240, 0.4);
}
.kg-so-card-copy {
    position: relative;
    z-index: 1;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(12px, calc(var(--so-w) * 0.044), 13.5px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 250, 240, 0.92);
    margin: 0;
}
.kg-so-card-copy.kg-so-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Copy block sits above the sprig decoration below (see
   .kg-so-front-sprig) regardless of paint order, since it gets its own
   stacking context here. */
.kg-so-front-copy {
    position: relative;
    z-index: 1;
}

/* Front-face action row (Book Now) — same look as the
   old back-face .kg-so-actions, just with room above it so it doesn't
   crowd the copy, and sitting above the sprig (z-index: 1, same
   stacking context as the rest of .kg-so-front-copy). */
.kg-so-front-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--so-dark-line);
}

/* Delicate gold sprig, bottom-right corner of the green panel — a purely
   decorative flourish (kgSoSprigIcon() in includes/kg-icons.php), never
   overlapping the copy above it since it's pinned into the panel's own
   bottom-right padding. */
.kg-so-front-sprig {
    position: absolute;
    right: 10px;
    bottom: 8px;
    z-index: 0;
    width: clamp(44px, calc(var(--so-w) * 0.22), 64px);
    height: auto;
    color: var(--so-sprig);
    opacity: 0.55;
    pointer-events: none;
}
.kg-so-front-sprig svg { display: block; width: 100%; height: auto; }

/* Small "flip me" affordance, top-right of the front face — purely a
   discoverability hint (mirrors on both faces via the arrows icon), never
   a control itself: the whole card is hoverable/tappable. */
.kg-so-flip-hint {
    position: absolute;
    top: 16px;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(11, 43, 38, 0.72);
    border: 1px solid rgba(247, 243, 234, 0.28);
    color: #fbf7ee;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    max-width: calc(100% - 24px);
}
/* hover lift (see .kg-so-card:hover below) shouldn't re-shift the badge's
   own centering translate — keep the X term, only the card moves. */
.kg-so-flip-hint svg { width: 13px; height: 13px; flex-shrink: 0; color: #fbf7ee; }
.kg-so-flip-hint-text { white-space: nowrap; }

/* ----------------------------------------------------------- back body */
.kg-so-back-body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: clamp(22px, calc(var(--so-w) * 0.095), 30px) clamp(18px, calc(var(--so-w) * 0.08), 26px);
    color: var(--so-ivory);
}
.kg-so-back-body .kg-so-card-label {
    display: block;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(10px, calc(var(--so-w) * 0.034), 11px);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--so-accent);
    margin: 0 0 10px;
}
.kg-so-back-title {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-weight: 500;
    font-size: clamp(21px, calc(var(--so-w) * 0.088), 27px);
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: #fffaf0;
    margin: 0 0 10px;
}
.kg-so-back-desc {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(11.5px, calc(var(--so-w) * 0.04), 13px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--so-dark-text-soft);
    margin: 0 0 14px;
    /* keep the back face free of overflow however long the copy runs */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kg-so-back-included {
    padding-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid var(--so-dark-line);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.kg-so-back-kicker {
    display: block;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--so-sage-soft);
    margin: 0 0 8px;
}
.kg-so-back-included ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}
.kg-so-back-included li {
    position: relative;
    padding-left: 16px;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: clamp(11.5px, calc(var(--so-w) * 0.038), 13px);
    line-height: 1.4;
    color: rgba(247, 243, 234, 0.92);
}
.kg-so-back-included li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--so-accent);
}

.kg-so-back-pricing {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    margin-bottom: 14px;
    border-top: 1px solid var(--so-dark-line);
    border-bottom: 1px solid var(--so-dark-line);
}
.kg-so-back-price,
.kg-so-back-save {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kg-so-back-save { text-align: right; }
.kg-so-back-price span,
.kg-so-back-save span {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--so-dark-text-soft);
}
.kg-so-back-price strong {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-size: clamp(22px, calc(var(--so-w) * 0.088), 28px);
    font-weight: 600;
    line-height: 1;
    color: var(--so-accent);
}
.kg-so-back-save strong {
    font-family: var(--kg-heading-font, 'Cormorant Garamond', serif);
    font-size: clamp(16px, calc(var(--so-w) * 0.06), 19px);
    font-weight: 600;
    line-height: 1;
    color: var(--so-sage-soft);
}

/* ------------------------------------------------------------- buttons */
.kg-so-actions {
    display: flex;
    gap: 8px;
}
.kg-so-btn {
    position: relative;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms var(--so-ease);
}
.kg-so-btn-arrow {
    display: inline-flex;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    transition: transform 260ms var(--so-ease);
}
.kg-so-btn-arrow svg { display: block; width: 100%; height: 100%; }
.kg-so-btn:hover .kg-so-btn-arrow { transform: translateX(3px); }
/* BOOK NOW — primary: solid dark green, ivory text, plus a soft diagonal
   shine that sweeps across on hover. */
.kg-so-btn--solid {
    background: var(--so-green-deep);
    border-color: var(--so-green-deep);
    color: #fbf7ee;
}
.kg-so-btn--solid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}
.kg-so-btn--solid:hover::before {
    left: 140%;
    transition: left 650ms cubic-bezier(0.2, 0, 0.2, 1);
}
.kg-so-btn--solid:hover,
.kg-so-btn--solid:focus-visible {
    background: var(--so-green);
    border-color: var(--so-green);
}
.kg-so-card .kg-so-btn:focus-visible {
    outline: 2px solid var(--kaaya-gold, #8EB69B);
    outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
    .kg-so-btn:hover { transform: translateY(-1.5px); }
}

/* ------------------------------------------------------------ loader dots */
.kg-so-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.kg-so-dot {
    --so-p: 0;
    position: relative;
    display: block;
    width: 7px;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(247, 243, 234, 0.24);
    transition: width 400ms var(--so-ease), background-color 400ms var(--so-ease);
}
.kg-so-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--so-sage-soft);
    transform: scaleX(var(--so-p));
    transform-origin: left center;
}
.kg-so-dot.is-active {
    width: 28px;
    background: rgba(247, 243, 234, 0.2);
}

/* ------------------------------------------------- page-level redirects
   Sits under both decks (see includes/partials/offers-section.php),
   always visible regardless of which tab the switcher is on. Same pill
   shape as the in-card buttons above, just larger — one ghost (Monthly
   page), one solid (Seasonal page). */
.kg-so-page-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(28px, 4vw, 44px);
}
.kg-so-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, translate 220ms ease;
}
.kg-so-page-link--ghost {
    background: transparent;
    border-color: rgba(247, 243, 234, 0.4);
    color: var(--so-ivory);
}
.kg-so-page-link--ghost:hover,
.kg-so-page-link--ghost:focus-visible {
    background: rgba(247, 243, 234, 0.12);
    border-color: var(--so-ivory);
    translate: 0 -2px;
}
.kg-so-page-link--solid {
    background: var(--so-green-deep);
    border-color: var(--so-green-deep);
    color: #fbf7ee;
}
.kg-so-page-link--solid:hover,
.kg-so-page-link--solid:focus-visible {
    background: var(--so-green);
    border-color: var(--so-green);
    translate: 0 -2px;
}
.kg-so-page-link:focus-visible {
    outline: 2px solid var(--kaaya-gold, #8EB69B);
    outline-offset: 2px;
}
/* Homepage-on-white variant (see .kg-so--white above): swap to dark-on-
   white so the ghost pill stays legible off the dark deck background. */
.kg-so--white .kg-so-page-link--ghost {
    border-color: rgba(11, 43, 38, 0.35);
    color: var(--kaaya-charcoal, #0B2B26);
}
.kg-so--white .kg-so-page-link--ghost:hover,
.kg-so--white .kg-so-page-link--ghost:focus-visible {
    background: rgba(11, 43, 38, 0.08);
    border-color: var(--kaaya-charcoal, #0B2B26);
}

@media (max-width: 600px) {
    .kg-so-page-links { gap: 10px; }
    .kg-so-page-link { flex: 1 1 auto; padding: 13px 16px; font-size: 10.5px; letter-spacing: 0.1em; }
}

/* ------------------------------------------------------------ tablet: ~3 */
@media (max-width: 1024px) {
    .kg-so {
        --so-w: clamp(210px, calc((100vw - 120px) / 2.75), 340px);
    }
    .kg-so-carousel { max-width: calc(var(--so-w) * 2.9); }
    .kg-so-btn { font-size: 9.5px; letter-spacing: 0.1em; padding: 10px 6px; }
}

/* ------------------------------------------------- mobile: ONE large card */
@media (max-width: 600px) {
    .kg-so {
        --so-w: 78vw;
        --so-x1: 1.04;   /* neighbours parked fully off to the side… */
        --so-x2: 2.08;
        --so-h: calc(var(--so-w) * 1.55);
    }
    /* …and invisible: only the active card shows */
    .kg-so-card[data-pos="-1"],
    .kg-so-card[data-pos="1"] {
        --o: 0;
        pointer-events: none;
    }
    .kg-so-inner { padding: 0 16px; }
    .kg-so-carousel { max-width: none; }
    .kg-so-eyebrow { letter-spacing: 0.12em; }
    .kg-so-front-body { margin: 10px; padding: 16px; }
    .kg-so-card-title { font-size: 28px; }
    .kg-so-card-copy { font-size: 13.5px; }
    .kg-so-card-month { font-size: 11px; }
    .kg-so-back-body { padding: 24px 20px; }
    .kg-so-back-desc { -webkit-line-clamp: 4; }
    .kg-so-btn { font-size: 10.5px; letter-spacing: 0.12em; padding: 12px 8px; }
}

/* --------------------------------------------------------- reduced motion
   No 3D, no travelling: cards simply change position and cross-fade; the
   flip cross-fades too rather than rotating. */
@media (prefers-reduced-motion: reduce) {
    .kg-so-card {
        transition: opacity 500ms ease;
        will-change: opacity;
    }
    .kg-so-card:hover { translate: 0 0; }
    .kg-so-card:hover .kg-so-face--front img { transform: none; }
    .kg-so-card[data-pos] { --r: 0deg; --tz: 0px; }
    .kg-so-stage { perspective: none; }
    .kg-so-dot,
    .kg-so-dot::after { transition: none; }
    .kg-so-flip { transition: none; }
}

/* =========================================================================
   MONTHLY / SEASONAL SWITCHER (client feedback item 12)
   Two-segment pill. Active: dark fill, white text. Inactive: light fill,
   dark text, subtle border. Kept premium/minimal — no shadows, no motion
   beyond a quick colour cross-fade. Sits under the tagline in .kg-so-head
   on both the dark (.kg-on-dark) and white (.kg-so--white) section
   variants, so it's styled as its own self-contained light/dark pill
   rather than inheriting the section background either way.
   ========================================================================= */
.kg-so-switcher {
    display: inline-flex;
    gap: 6px;
    margin-top: 26px;
}

.kg-so-switch-btn {
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    padding: 11px 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s var(--so-ease), color 0.25s var(--so-ease), border-color 0.25s var(--so-ease);
}

.kg-so-switch-btn.is-active {
    /* Real champagne-gold (not --kaaya-gold/--so-accent above, which
       resolves to a sage green in this site's palette — see the note
       on --so-sprig near the top of this file). Charcoal text instead
       of the previous ivory, since it reads better against this lighter
       gold fill than white does. */
    background: var(--so-sprig);
    border-color: var(--so-sprig);
    color: var(--so-charcoal);
}

.kg-so-switch-btn:not(.is-active) {
    background: var(--so-ivory);
    border-color: rgba(44, 45, 40, 0.18);
    color: var(--so-charcoal);
}

.kg-so-switch-btn:not(.is-active):hover {
    border-color: rgba(44, 45, 40, 0.4);
}

.kg-so-switch-btn:focus-visible {
    outline: 2px solid var(--so-accent);
    outline-offset: 2px;
}

/* Two decks share one section; only one is ever shown. */
.kg-so-deck[hidden] { display: none; }

/* SEASONAL deck's Book Now has no View Details sibling, so let it take the
   full action row width instead of sitting half-width and off-balance. */
.kg-so-btn--full { width: 100%; text-align: center; }


/* =========================================================================
   ROUND 9 — OFFER CARD + BUTTON REDESIGN
   (Home page "Monthly" deck and monthly-specials.php — both render the one
   _kg-so-deck.php partial, so this restyles every offer card on the site.)

   What changed
   - Card: taller (1.62 ratio), softer 28px corners, a deep-forest gradient
     body with a fine champagne hairline, photo on top with a month pill
     (left) and a champagne "Save $X" tag (right).
   - Price no longer sits on the photo (the neighbouring 3D card used to
     cover it, e.g. "$18…"): it has its own row under the copy, with the
     was-price and a clock + duration chip.
   - Buttons: View Details = quiet outlined pill; Book Now = champagne
     filled pill with a dark arrow chip. Both 44px tall, full pill width.
   Deck motion / positions / JS are untouched.
   ========================================================================= */
.kg-so {
    --so-h: calc(var(--so-w) * 1.62);
    --so-champagne: #E4D2A4;
    --so-champagne-hi: #F3E6C2;
    --so-champagne-ink: #0B2B26;
}
.kg-so-card {
    border-radius: 28px;
    border: 1px solid rgba(228, 210, 164, 0.22);
    background: linear-gradient(170deg, #0E3A31 0%, #082821 100%);
}
.kg-so-card[data-pos="0"] { border-color: rgba(228, 210, 164, 0.55); }
.kg-so-face { border-radius: 28px; }
.kg-so-face--front { background: linear-gradient(170deg, #0E3A31 0%, #082821 100%); }

/* --- photo --- */
.kg-so-front-media { flex: 0 0 46%; }
.kg-so-media-scrim {
    background:
        linear-gradient(0deg, rgba(8, 40, 33, 0.85) 0%, rgba(8, 40, 33, 0) 38%),
        linear-gradient(180deg, rgba(5, 20, 17, 0.35) 0%, rgba(5, 20, 17, 0) 28%);
}
.kg-so-badge {
    top: 14px; left: 14px;
    padding: 6px 13px;
    background: rgba(5, 20, 17, 0.5);
    border: 1px solid rgba(247, 243, 234, 0.28);
}
.kg-so-save {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--so-champagne);
    color: var(--so-champagne-ink);
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}

/* --- body --- */
.kg-so-front-body {
    margin: 0;
    padding: clamp(16px, calc(var(--so-w) * 0.07), 22px) clamp(18px, calc(var(--so-w) * 0.08), 24px) clamp(16px, calc(var(--so-w) * 0.07), 22px);
    background: transparent;
}
.kg-so-front-copy { flex: 0 0 auto; }
.kg-so-front-body .kg-so-card-label { color: var(--so-champagne); opacity: 0.85; margin-bottom: 6px; }
.kg-so-card-title { margin-bottom: 8px; }
.kg-so-card-copy { color: rgba(247, 243, 234, 0.78); }

/* --- price row --- */
.kg-so-pricebar {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid rgba(228, 210, 164, 0.18);
}
.kg-so-pricebar-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kg-so-pricebar .kg-so-price-now {
    font-size: clamp(24px, calc(var(--so-w) * 0.095), 30px);
    color: var(--so-champagne-hi);
    text-shadow: none;
}
.kg-so-pricebar .kg-so-price-was {
    font-size: 12px;
    color: rgba(247, 243, 234, 0.45);
}
.kg-so-pricebar .kg-so-price-duration {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(247, 243, 234, 0.07);
    color: rgba(247, 243, 234, 0.75);
    font-size: 9px;
    letter-spacing: 0.1em;
}
.kg-so-pricebar .kg-so-price-duration svg { width: 11px; height: 11px; flex-shrink: 0; }

/* --- buttons --- */
.kg-so-front-actions {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
    gap: 8px;
}
.kg-so-btn {
    min-height: 44px;
    padding: 0 12px;
    gap: 8px;
    font-size: 10px;
    letter-spacing: 0.12em;
}
/* Book Now — champagne filled, dark arrow chip on the right */
.kg-so-btn--solid {
    flex: 1 1 100%;
    justify-content: space-between;
    padding: 0 6px 0 16px;
    background: linear-gradient(135deg, var(--so-champagne-hi) 0%, var(--so-champagne) 100%);
    border: 0;
    color: var(--so-champagne-ink);
    box-shadow: 0 10px 22px -12px rgba(228, 210, 164, 0.6);
}
.kg-so-btn--solid .kg-so-btn-arrow {
    width: 30px; height: 30px;
    padding: 9px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--so-champagne-ink);
    color: var(--so-champagne-hi);
}
.kg-so-btn--solid:hover,
.kg-so-btn--solid:focus-visible {
    background: linear-gradient(135deg, #FFF3D1 0%, #EFDDB0 100%);
    border: 0;
    box-shadow: 0 14px 28px -12px rgba(228, 210, 164, 0.75);
}
.kg-so-btn--solid:hover .kg-so-btn-arrow { transform: translateX(2px); }

/* --- tablet / mobile: keep everything inside the (shorter) card --- */
@media (max-width: 1024px) {
    .kg-so-front-media { flex-basis: 42%; }
    .kg-so-front-body .kg-so-card-label { display: none; }
    .kg-so-btn { min-height: 40px; font-size: 9.5px; padding: 0 8px; letter-spacing: 0.1em; }
    .kg-so-btn--solid { padding: 0 5px 0 12px; }
    .kg-so-btn--solid .kg-so-btn-arrow { width: 26px; height: 26px; padding: 7px; }
}
@media (max-width: 600px) {
    .kg-so { --so-h: calc(var(--so-w) * 1.7); }
    .kg-so-front-media { flex-basis: 44%; }
    .kg-so-front-body { margin: 0; padding: 16px 18px 18px; }
    .kg-so-front-body .kg-so-card-label { display: block; }
    .kg-so-btn { min-height: 44px; font-size: 10.5px; }
}

/* Card titles link to the offer details page */
.kg-so-card-title 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; }
.kg-so-card-title a:hover { color: var(--so-champagne, #E4D2A4); background-size: 100% 1px; }
.kg-so-card-title a:focus-visible { color: var(--so-champagne, #E4D2A4); background-size: 100% 1px; outline: 2px solid var(--so-champagne, #E4D2A4); outline-offset: 3px; border-radius: 3px; }
.kg-so-back-title 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; }
.kg-so-back-title a:hover { color: var(--so-champagne, #E4D2A4); background-size: 100% 1px; }
.kg-so-back-title a:focus-visible { color: var(--so-champagne, #E4D2A4); background-size: 100% 1px; outline: 2px solid var(--so-champagne, #E4D2A4); outline-offset: 3px; border-radius: 3px; }

/* ---- Split button: ONE pill, two actions (View Details | Book Now) ---- */
.kg-so-split {
    flex: 1 1 100%; display: flex; align-items: stretch; min-width: 0; box-sizing: border-box;
    min-height: 44px; border-radius: 999px; overflow: hidden;
    background: linear-gradient(135deg, var(--so-champagne-hi, #FFF3D1) 0%, var(--so-champagne, #E4D2A4) 100%);
    box-shadow: 0 10px 22px -12px rgba(228, 210, 164, 0.6);
}
.kg-so-split-btn {
    flex: 1 1 50%; min-width: 0; margin: 0; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 8px; border: 0; border-radius: 0; background: transparent;
    color: var(--so-champagne-ink, #2a2a1e);
    font-family: var(--kg-body-font, 'Inter', sans-serif);
    font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.1em;
    text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 220ms ease, color 220ms ease;
}
.kg-so-split-book { border-left: 1px solid rgba(42, 42, 30, 0.22); font-weight: 700; }
.kg-so-split-btn .kg-so-btn-arrow { width: 11px; height: 11px; display: inline-flex; flex-shrink: 0; transition: transform 260ms var(--so-ease); }
.kg-so-split-btn .kg-so-btn-arrow svg { display: block; width: 100%; height: 100%; }
.kg-so-split-btn:hover .kg-so-btn-arrow { transform: translateX(3px); }
.kg-so-split-btn:hover,
.kg-so-split-btn:focus-visible { background: rgba(255, 255, 255, 0.45); color: var(--so-champagne-ink, #2a2a1e); outline: none; }
@media (max-width: 560px) {
    .kg-so-split-btn { font-size: 9px; letter-spacing: 0.06em; padding: 0 4px; gap: 4px; }
}
/* "Book Appointment" is longer than "Book Now": tighter tracking, no arrow, so both halves fit */
.kg-so-split-btn { letter-spacing: 0.04em; font-size: 9px; padding: 0 4px; }
.kg-so-split-book .kg-so-btn-arrow { display: none; }
/* Single "View Details & Book Appointment" button: longer label, so wrap + lighter tracking */
.kg-so-btn--wide { white-space: normal; text-align: center; line-height: 1.2; letter-spacing: 0.06em; padding-top: 6px; padding-bottom: 6px; }