/* BookSesh Session Discovery Preview (Variant B) — page-scoped refinement skin.
   Scope: body.bks-session-discovery-page ONLY (added by
   booksesh-session-preview's body_class filter, gated to the
   session-redesign-demo page id). Never applies anywhere else —
   the live /session/ archive, /sessions/{cat}/, /near/{city}/ and every
   other Voxel surface keep their original, unmodified styling.

   Targets the REAL Voxel/Elementor DOM produced by cloning archive
   template 12429 (card template 12428 rendered per-listing) — no new
   markup, no renderer, CSS-only presentational layer.

   LANE 1 P1 REFINEMENT (owner-approved 2026-09-13, this pass): the previous
   version of this file carried a wholesale brand restyle (800-weight/56px
   H1, 20px card radii, forced Plus Jakarta Sans on every element, an
   Aura-Home-style card surface+shadow) that the owner reviewed and
   REJECTED — live /session/ was judged the better baseline. That restyle
   has been fully REMOVED below (see build report for the before/after
   diff + side-by-side screenshots). What remains is a straight RESET to
   live's own typography scale/weights, card structure (no radius, no
   background, no overflow-hidden, no hover-lift) and density, plus
   exactly 6 narrowly-scoped polishes the owner asked for. Nothing here
   changes desktop 3-column proportions, results/map width, filter
   mechanics, or Voxel's own data/query wiring — CSS only. */

/* ============================================================
   1) BOOK NOW — BLUE/CORAL RESTYLE (owner directive 2026-09-14,
   Variant B only, supersedes the 2026-09-13 black/11px-radius pass).
   Default fill = the EXACT blue sampled from the LIVE /session/ card's
   own BOOK NOW button (and the same button used inside the historical
   sticky-footer CTA wrapper, .booksesh-sticky-cta > .booksesh-btn,
   which shares this identical base rule) — confirmed 2026-09-14 by
   fetching https://booksesh.com/session/ and reading the active
   plugin's own printed inline <style>
   (wp-content/plugins/booksesh-listing-button.old/booksesh-listing-
   button.php, the ONLY source of .booksesh-btn markup site-wide):
   `.booksesh-btn{background:#0f40ff;...}` / hover `#4120EA`. So
   #0f40ff IS "the previous blue" — not a guess. White text (kept).
   Radius is REMOVED (0px, sharp rectangle — was 11px). Hover is CORAL
   #EB666D / white text (owner's coral, distinct from the blue
   default). Size / placement / padding / font-size are LEFT EXACTLY
   as the injected template's own inline <style> (18px, 10px/20px
   padding on desktop; the gallery-preview mobile rule keeps 15px /
   8px 16px) and exactly as the prior black-button pass — ONLY fill +
   radius + hover colour change here, so the button footprint
   (box size) is byte-identical to the black button this replaces.
   DROP SHADOW RESTORED (owner directive 2026-09-14, supersedes the
   "kept FLAT" pass above): owner asked for the button's original drop
   shadow back — "like I used to have". Default-state shadow is the
   EXACT native value read from the same source cited above
   (wp-content/plugins/booksesh-listing-button.old/booksesh-listing-
   button.php, the live .booksesh-btn's own printed inline <style>):
   `box-shadow:0 4px 14px rgba(15,64,255,0.35);` — a soft blue-tinted
   glow that matches this button's own #0f40ff fill, i.e. literally the
   shadow the owner used to have before the flat pass. Hover-state
   shadow follows the SAME native growth pattern (0 6px 18px, opacity
   0.45) but is coral-tinted (rgba(235,102,109,0.45)) since Variant B's
   hover fill is coral #EB666D, not the native's blue #4120EA — a
   colour-matched shadow reads as intentional, a leftover blue glow
   under a coral button would not. !important is kept (unchanged
   reason from the flat pass): needed to beat the template's own native
   inline shadow AND the gallery-preview mobile !important shadow.
   Everything else in this rule (fill, text colour, radius, hover fill,
   size/placement, wiring) is UNCHANGED from the flat pass above.
   ============================================================ */
body.bks-session-discovery-page .booksesh-btn {
  background: #0f40ff;      /* sampled live blue default — see comment above */
  color: #ffffff;           /* white text */
  border-radius: 0;         /* sharp rectangle corners, was 11px */
  box-shadow: 0 4px 14px rgba(15, 64, 255, 0.35) !important; /* restored — native shadow, see comment above */
}
body.bks-session-discovery-page .booksesh-btn:hover,
body.bks-session-discovery-page .booksesh-btn:focus-visible {
  background: var(--bks-coral, #EB666D); /* coral on hover */
  color: #ffffff;                         /* stays white */
  box-shadow: 0 6px 18px rgba(235, 102, 109, 0.45) !important; /* restored — same growth pattern, coral-tinted to match hover fill */
}

/* ============================================================
   2) Typography — NO rules target the H1 (elementor-element-6395005)
   or the card title (h3 inside .ts-preview) any more: both now
   render with the LIVE archive's own Elementor-set size/weight/
   font-family (26px/600 navy PJS for H1; 18px/600 navy PJS for card
   titles) with zero override. This section only softens the one
   place the previous skin forced an unnecessarily heavy weight that
   is NOT part of items 1–6 below (kept minimal deliberately).
   ============================================================ */

/* ============================================================
   3) "Quick view details" — slightly larger/more readable. The mobile
   left-edge clip is fixed structurally by this file's full rewrite:
   the old skin's .ts-preview{overflow:hidden;border-radius:20px} rule
   is gone (simply not re-declared here) — live has neither property on
   .ts-preview, and that was the root cause of the "Q" getting clipped
   by the card's rounded bottom-left corner on narrow widths.
   ============================================================ */
body.bks-session-discovery-page .bksesh-qv-toggle,
body.bks-session-discovery-page .bksesh-qv-label {
  font-size: 15px; /* was 14px */
}
body.bks-session-discovery-page .bksesh-qv-chev {
  width: 20px;
  height: 20px; /* was 18px, keeps pace with the larger label */
}

/* ============================================================
   4) Listing image — complete the rounded treatment. Live already
   rounds this image 8px on all four corners (Elementor's own
   setting); the earlier skin's top-only override (16px 16px 0 0)
   broke that. Reset to a clean, uniform radius on all corners —
   dimensions/layout/object-fit untouched.
   ============================================================ */
body.bks-session-discovery-page .ts-preview .elementor-element-b6b2133 img {
  border-radius: 10px;
}

/* ============================================================
   5) Mobile card — breathing space above the title. Card title is
   element 2d1a3a0 (same id on every cloned card). Scoped to mobile
   widths only — desktop density/spacing is untouched.

   LANE1B FIX 3 (owner directive 2026-09-13, Variant B only): bumped
   14px -> 20px. Verified against the desktop reference screenshot
   (bold title / rating row / "· service · duration  from £X" / Earn
   pill order) — that hierarchy was already correct structurally; this
   is purely a touch more vertical breathing room above the title on
   narrow screens, so the card doesn't read as cramped immediately
   under "Home-based venue" / BOOK NOW. This file is Variant B's OWN
   copy (session-discovery-skin.css, body.bks-session-discovery-page
   only) — Variant A's session-preview-skin.css (body.bks-session-
   preview-page) is untouched and stays at 14px.
   ============================================================ */
@media (max-width: 767px) {
  body.bks-session-discovery-page .ts-preview .elementor-element-2d1a3a0 {
    margin-top: 20px;
  }
}

/* ============================================================
   6) Filters — subtle Aura-Home-inspired polish on the EXISTING
   Voxel filter controls (.ts-filter / .ts-form-group / .ts-input-icon).
   No structure, sizing, or behaviour change — background tint,
   softer border, and label/icon colour only. Box-sizing is
   border-box on these controls, so the added 1px border does not
   change their footprint.
   Selectors replicate Voxel's own ancestor chain
   (.ts-form .ts-form-group .ts-filter, specificity 0,3,0 in
   forms.css) plus the body gate, so this wins the cascade without
   !important and without touching Voxel's base forms.css. ---------- */
body.bks-session-discovery-page .ts-form-group label {
  color: var(--bks-body-ink);
}
body.bks-session-discovery-page .ts-form .ts-form-group .ts-filter,
body.bks-session-discovery-page .ts-form .ts-form-group input[type="text"] {
  background: var(--bks-soft-lav);
  border: 1px solid rgba(122, 90, 240, .18);
}
body.bks-session-discovery-page .ts-form .ts-form-group .ts-filter:hover,
body.bks-session-discovery-page .ts-form .ts-form-group .ts-filter:focus-within,
body.bks-session-discovery-page .ts-form .ts-form-group input[type="text"]:hover,
body.bks-session-discovery-page .ts-form .ts-form-group input[type="text"]:focus {
  border-color: var(--bks-lav-deep);
}
body.bks-session-discovery-page .ts-input-icon svg {
  color: var(--bks-lav-deep);
}

/* ============================================================
   7) LANE 1 P2 — PREMIUM CHIP RESTYLE (preview-only)
   ------------------------------------------------------------
   The Category (`terms`, repeater id ebcc747) and Area
   (`sesh-area`, repeater id seshar426) filters are set to Voxel's
   NATIVE "buttons" display mode by the preview-only _elementor_data
   transform in Provision.php::apply_chip_transform() (never on live
   12429). Voxel renders each as <ul.addon-buttons><li.flexify>, with
   the selected chip getting .adb-selected — these <li> ARE the real
   Voxel filter inputs (clicking them drives the native terms= /
   sesh-area= URL params + re-queries the feed). This block only
   restyles their appearance + adds presentational group headings.
   Specificity: Voxel's base is `.addon-buttons li` (0,2,0) and
   `.addon-buttons li.adb-selected` (0,3,0); our body-gated selectors
   are (0,3,0)/(0,4,0) so they win cleanly with no !important.
   ============================================================ */

/* -- Group headings: replace the native "Category"/"Area" labels with
      presentational prompts. Native label text is collapsed (font-size:0)
      and the prompt is injected via ::before so the real <label> element
      (and Voxel's :empty->display:none rule) is untouched structurally. */
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 > label,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 > label {
  font-size: 0;
  padding-bottom: 12px;
  margin: 0;
}
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 > label::before {
  content: "What are you looking for?";
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bks-body-ink, #252229);
  letter-spacing: -.01em;
}
body.bks-session-discovery-page .elementor-repeater-item-seshar426 > label::before {
  content: "Where?";
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bks-body-ink, #252229);
  letter-spacing: -.01em;
}

/* Add a little breathing space between the two chip groups. */
body.bks-session-discovery-page .elementor-repeater-item-seshar426 {
  margin-top: 6px;
}

/* -- Chip container: clean wrapping + spacing (mobile-safe). ------------- */
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 ul.addon-buttons,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 ul.addon-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}

/* -- Unselected chip: soft / light. ------------------------------------- */
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 .addon-buttons li,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 .addon-buttons li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #F5F3FF;                              /* soft lavender */
  border: 1px solid rgba(122, 90, 240, .20);
  color: var(--bks-body-ink, #252229);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .18s var(--bks-ease, ease), border-color .18s var(--bks-ease, ease), color .18s var(--bks-ease, ease), box-shadow .18s var(--bks-ease, ease);
}

/* -- Hover (unselected). ------------------------------------------------- */
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 .addon-buttons li:hover,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 .addon-buttons li:hover {
  background: var(--bks-soft-lav, #EEE9FE);
  border-color: var(--bks-lav-deep, #7A5AF0);
  color: #1c1b2e;
}

/* -- Selected chip: BookSesh purple fill. ------------------------------- */
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 .addon-buttons li.adb-selected,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 .addon-buttons li.adb-selected {
  background: var(--bks-lav-deep, #7A5AF0);
  border-color: var(--bks-lav-deep, #7A5AF0);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(122, 90, 240, .30);
}
body.bks-session-discovery-page .elementor-repeater-item-ebcc747 .addon-buttons li.adb-selected:hover,
body.bks-session-discovery-page .elementor-repeater-item-seshar426 .addon-buttons li.adb-selected:hover {
  background: #6a49e6;
  border-color: #6a49e6;
  color: #ffffff;
}

/* -- Count badge inside a chip (Area shows post counts). ---------------- */
body.bks-session-discovery-page .addon-buttons li .ts-term-count {
  background: rgba(122, 90, 240, .12);
  color: var(--bks-lav-deep, #7A5AF0);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
body.bks-session-discovery-page .addon-buttons li.adb-selected .ts-term-count {
  background: rgba(255, 255, 255, .24);
  color: #ffffff;
}

/* ============================================================
   8) SECONDARY row — Location / Keywords / Show-open-only / Order-By.
   Retained exactly (they keep polish #6's lavender tint) but visually
   lightened so the Category + Area chips read as the primary action.
   Ids: location=0bf5bc6, keywords=9c9152f, open-now=ef14db3, sort=dcbda07.
   ============================================================ */
body.bks-session-discovery-page .elementor-repeater-item-0bf5bc6 > label,
body.bks-session-discovery-page .elementor-repeater-item-9c9152f > label,
body.bks-session-discovery-page .elementor-repeater-item-ef14db3 > label,
body.bks-session-discovery-page .elementor-repeater-item-dcbda07 > label {
  color: var(--bks-lav, #AA96F8);
  font-size: 13px;
  font-weight: 500;
  opacity: .95;
}

/* ============================================================
   9) PROD-PREP (owner directive 2026-09-13, Variant B only) — CARD tweaks.
   Both CSS-only, scoped to body.bks-session-discovery-page; the underlying
   Voxel/Booknetic DATA + postmeta are untouched. These target the REAL
   rendered card DOM (card template 12428, rendered per-listing).

   (a) Service·duration teaser line — the bridge line that sits directly
       ABOVE "Quick view details" (e.g. "Kambo · 1 hr", "1:1 Sound Healing
       · 1 hr"). Rendered by booksesh-card-quickview.php teaser_html() as
       .bksesh-qv-teaser > .bksesh-qv-tname (name) + .bksesh-qv-tdur
       (duration). Base = normal weight (400), colour #1C2033 (name) /
       #6b7180 (duration). Make it read as a clear PRIMARY line: bolder +
       higher-contrast. NOT edited in booksesh-card-quickview.php — this is
       a presentational override only. Specificity: base
       ".bksesh-qv-teaser .bksesh-qv-tname" (0,2,0); the body-gated selector
       below is (0,3,1) so it wins the cascade with no !important. */
body.bks-session-discovery-page .bksesh-qv-teaser .bksesh-qv-tname {
  font-weight: 700;
  color: var(--bks-ink, #090711);
}
body.bks-session-discovery-page .bksesh-qv-teaser .bksesh-qv-tname .bksesh-qv-tdur {
  font-weight: 600;
  color: #3a3f4d; /* darker than the base #6b7180 — reads clearly, still a hair softer than the name */
}

/* (b) HIDE the native Voxel Open/Closed availability status on the card
       face — it is misleading for FUTURE bookings (owner directive). The
       status is a native Voxel "action" list item in card template 12428
       whose text is @post(work_hours.status_label) ("Open"/"Closed"),
       rendered as li.elementor-repeater-item-8e8ef18.flexify.ts-action
       (confirmed 10 instances, one per card, via Playwright). Hidden with
       display:none — CSS ONLY: the element stays in the DOM, and the
       underlying work_hours postmeta / Voxel data is completely untouched
       (the quick-view "Opening hours" day grid, which is our own
       .bksesh-qv panel, is a SEPARATE element and stays visible). Scoped
       under .ts-preview so it can only ever affect card instances on
       Variant B — never the native filter sheet or any other surface.
       !important because Voxel sets display via .flexify/.ts-action. */
body.bks-session-discovery-page .ts-preview .elementor-repeater-item-8e8ef18 {
  display: none !important;
}

/* (c) PAGE H1 / TITLE — intentionally NOT styled here. The crawlable H1
       (.elementor-element-6395005) and card titles inherit the live
       template's own Elementor-set size/weight (26px/600 navy PJS for the
       H1) with ZERO override in this file or session-discovery.css, so the
       title size stays editable via Elementor/the source template and
       re-syncs cleanly. This comment is the guard: do not add a font-size
       rule for the H1 here. */

/* ============================================================
   10) REORDER PASS (owner directive 2026-09-13, Variant B only) —
   CARD HIERARCHY REORDER (desktop + mobile, identical order). LAYOUT-ONLY.

   The card's inner content box — Elementor boxed container
   `01636c7` > `.e-con-inner` — is display:flex / flex-direction:column on
   BOTH desktop (1440) and mobile (402/411), verified against the live DOM.
   So the reorder is achieved PURELY with CSS `order` on its DIRECT
   children: NO DOM node is moved for the reorder, every node keeps its own
   event listeners / data-attrs / Voxel + Booknetic wiring byte-for-byte,
   and the rule auto-applies to AJAX-injected cards (filter / search / map
   re-render) with no observer needed. All targeted element ids are shared
   across every card (cloned from card template 12428).

   Target visual order, top -> bottom:
     1  Title                       (050809c)
     2  Rating / reviews row        (8f23438)   [standalone flex child]
     3  Service·duration·from-price )  all three already live, in this
     4  Reward / off-peak indicators)  exact order, INSIDE the single
     5  Quick view (toggle + panel) )  .bksesh-qv block -> one `order:3`
     6  Thumbnail / gallery         (b6b2133)   [image + crossfade + dots + swipe]
     7  BOOK NOW + venue            (9ccb512)   [FINAL row, above the card bottom]

   RATING ROW DECOUPLING: the rating/reviews row is the native Voxel
   container `8f23438` — its OWN direct flex child of `.e-con-inner`, with
   nothing else nested under it (the quick-view block renders as a SEPARATE
   sibling `.bksesh-qv`, never inside it). It is positioned here solely by
   its own `order:2`, independent of every other block, so a future
   BookSesh/Booknetic-native reviews row can replace `8f23438` in place
   without disturbing the rest of the hierarchy.

   The absolute business-logo overlay (`22a8d2b`) is position:absolute
   (out of flex flow) so `order` cannot move it — session-discovery.js
   reparents that node INTO the photo widget (b6b2133) so it tracks the
   image to its new position. We force b6b2133 position:relative below so
   the logo anchors to the photo on single-image cards too (the gallery
   plugin only sets position:relative on multi-image, enhanced cards).

   The native Open/Closed status list (`28ccba5`) is already collapsed to
   height:0 by §9(b); it keeps the default order (0) and stays invisible.
   ============================================================ */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .elementor-element-050809c { order: 1; } /* 1 title */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .elementor-element-8f23438 { order: 2; } /* 2 rating / reviews (standalone) */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .bksesh-qv                 { order: 3; } /* 3+4+5 teaser + indicators + quick view */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .elementor-element-b6b2133 { order: 4; position: relative; } /* 6 thumbnail / gallery (anchor for the logo overlay) */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .elementor-element-9ccb512 { order: 5; } /* 7 BOOK NOW + venue (final row) */

/* The photo widget carries a 12px bottom margin used when it sat at the TOP
   of the card; now that it sits directly above the BOOK NOW row, keep a
   small, symmetric gap so the final row reads as its own band. */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .elementor-element-b6b2133 {
  margin-bottom: 12px;
}

/* Business-logo overlay, once reparented INTO the photo widget by
   session-discovery.js: Elementor's own absolute-position rule for widget
   22a8d2b is scoped to its ORIGINAL parent context, so after the node move it
   falls back to position:relative and drops to the image's bottom. Re-establish
   the absolute overlay explicitly (top-left corner of the photo), so the logo
   sits ON the image at its new (bottom-of-card) position exactly as before the
   reorder. z-index keeps it above the crossfade slides. */
body.bks-session-discovery-page .ts-preview .elementor-element-b6b2133 > .elementor-element-22a8d2b {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  z-index: 2;
}
/* REGRESSION FIX (logo turned rectangular): after the reparent the logo's own
   <img> now lives inside the photo widget b6b2133, so skin §4
   (`.elementor-element-b6b2133 img { border-radius:10px }`, higher specificity
   than Elementor's native `.elementor-element-22a8d2b img` rule) was overriding
   the badge from a 50px circle to a 10px-rounded RECTANGLE, and the native
   width/height/object-fit could be lost too. Re-apply the card template's OWN
   native definition for this img verbatim (source of truth = post-12428.css
   `.elementor-element-22a8d2b img`: 50x50, object-fit:cover, center, 50px radius,
   the same 0/0/10/0.36 shadow), scoped to the reparented location with
   !important so it beats §4 and any gallery/theme img rule. 50% on the 50x50 box
   is byte-equivalent to the original 50px radius => a perfect circle. This
   restores the pre-reorder circular badge (ref 002220) on every card, static
   above the crossfade (z-index above handles stacking; the gallery crossfade
   never selects this img — it excludes `.elementor-absolute` widgets). */
body.bks-session-discovery-page .ts-preview .elementor-element-b6b2133 .elementor-element-22a8d2b img {
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-style: none !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.36) !important;
}
/* Title is now the FIRST row; the mobile "breathing space above the title"
   (§5, added when the title sat under BOOK NOW) is no longer needed and would
   just add a gap at the very top of the card — zero it out on Variant B. */
@media (max-width: 767px) {
  body.bks-session-discovery-page .ts-preview .elementor-element-2d1a3a0 { margin-top: 0; }
}

/* ============================================================
   11) CARD SEPARATION (owner directive 2026-09-14, Variant B only) —
   consecutive services currently blend together (no visual boundary),
   so give EACH service its own self-contained card treatment: white
   background, subtle shadow, thin light-purple border, small radius,
   internal padding. Matches this page's own existing language (the
   Category/Area chip + filter polish in §6/§7 above already uses a
   light rgba(122,90,240,..) border/tint) — kept intentionally subtle,
   not heavy.

   Target: `.ts-preview` — confirmed (2026-09-14, via the live page's
   own rendered DOM) to be the SINGLE outer wrapper per card, directly
   holding data-post-id and the entire Elementor card tree
   (01636c7 > .e-con-inner > title / rating / teaser+indicators+QV /
   thumbnail / BOOK NOW+venue) with nothing else as a sibling — so
   boxing this one element wraps the WHOLE card (BOOK NOW stays the
   final row inside it, nothing moves). Native theme CSS only sets
   `.ts-preview{position:relative}` (post-feed.css) — no existing
   background/padding/radius to conflict with.

   Deliberately NO `overflow:hidden` here (the removed 2026-09-13 skin
   previously had `.ts-preview{overflow:hidden;border-radius:20px}`
   and that combination was the confirmed root cause of the
   "Quick view details" toggle text getting clipped on mobile — see
   the file header note above/§3). Padding alone keeps every child
   comfortably inside the rounded corners without needing to clip.

   Spacing: the results grid (`.post-feed-grid`, Elementor widget
   7380f378) already carries its own native `grid-gap:20px` (both
   axes, unrelated to these files, confirmed via the live per-post
   Elementor CSS) — untouched, so desktop 3-column proportions and
   results/map width are unaffected. That native 20px is the
   card-to-card gap; no additional margin is added here so as not to
   compound it. box-sizing:border-box keeps the added padding inside
   the grid track's existing width instead of growing it. */
body.bks-session-discovery-page .ts-preview {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid rgba(122, 90, 240, .16);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(122, 90, 240, .10), 0 1px 3px rgba(9, 7, 17, .05);
}

/* ============================================================
   12) CARD "POP" — VARIANT SWAP BLOCK (owner directive 2026-09-14,
   PREVIEW-ONLY). Same selector as §11 (`body.bks-session-discovery-page
   .ts-preview`) — this block ONLY overrides §11's `background` and
   `box-shadow`. Border (1px rgba(122,90,240,.16)), radius (14px),
   padding (18px) and all layout are UNCHANGED from §11 for every
   variant below.

   THREE VARIANTS ARE PRESERVED HERE, each as its own self-contained,
   clearly-labelled CSS rule on the same selector. EXACTLY ONE is
   active (uncommented) at a time; the other two stay in the file,
   fully commented out, for instant revert.

   >>> HOW TO SWITCH VARIANTS <<<
   1. Wrap the currently-ACTIVE rule block below in `/* ... *​/` (comment
      it out).
   2. Remove the `/*` opening line and the `*​/` closing line from the
      TARGET variant's block (uncomment it) — leave its CSS body as-is.
   3. Exactly one of (A)/(B)/(C) must be uncommented at any time. Save —
      no other file/selector needs touching.

   (A) PLAIN SEPARATED — flat white card, no extra "pop"; restates §11's
       own background/shadow explicitly (rather than relying on the
       absence of an override) so the swap mechanic is identical no
       matter which variant is targeted.
   (B) VIOLET GRADIENT POP — owner-approved 2026-09-14 (earlier the same
       day): barely-there white -> whisper-of-lavender gradient
       (#ffffff -> #FBFAFF) + a richer, still-soft violet-tinted shadow.
   (C) CORAL GRADIENT POP — owner-approved 2026-09-14, later the same
       day, requested to read "more premium" and to echo the #EB666D
       brand coral rather than violet. Same treatment as (B) —
       barely-there white -> pale-coral gradient (#ffffff -> #FFF5F5,
       a very light warm tint, nowhere near pink/heavy) + a soft
       coral-tinted shadow (rgba(235,102,109,..) in place of the
       violet rgba(122,90,240,..) used by (B)). Text/badges/BOOK NOW
       legibility unaffected — tint tops out at #FFF5F5 on the bottom
       edge only, well below any contrast-risk threshold.
   (D) MODULE MATCH — SUPERSEDED 2026-09-14 (feedback batch item 1): was an
       EXACT copy of the module's own top-heavy gradient (linear-gradient(180deg,
       #FBFAFF 0%, #FFFFFF 78%) — session-discovery.css ~line 142). Owner
       feedback: too subtle / not distinct enough from the module card. (D) is
       kept below, commented, for instant revert; its live replacement is the
       deepened stop documented directly on the active rule beneath this
       comment block (same 180deg direction, same 0%/78% stop positions —
       ONLY the 0% colour is deepened, so "exact match direction, ~15%
       stronger top tint" per the owner's spec).

       DEEPENED STOP — MATH (owner directive 2026-09-14, feedback item 1):
       #FBFAFF's own tint strength (distance from pure white) is only ~2%
       when expressed as a white/brand-lavender mix (it reads as barely-there
       on purpose, matching the module). "~15% stronger" is computed as a
       proper 15% linear mix of white with this page's own brand-lavender
       token `--bks-lav-deep` (#7A5AF0, already used throughout this file for
       the chip/filter accents in §6/§7):
         mix(white #FFFFFF, #7A5AF0, 15%)
         R: 255*0.85 + 122*0.15 = 235.05 -> 235
         G: 255*0.85 +  90*0.15 = 230.25 -> 230
         B: 255*0.85 + 240*0.15 = 252.75 -> 253
         = #EBE6FD
       #EBE6FD is a genuine (if still pale/tasteful) lavender wash — clearly
       more prominent than the module's near-invisible #FBFAFF while staying
       in the exact same hue family as this file's own --bks-soft-lav
       (#EEE9FE, used elsewhere on this page), so it reads as an intentional
       deepening, not an off-brand colour. Direction/stop positions (180deg,
       0% / 78%) and the fade-to-#FFFFFF end point are UNCHANGED — only the
       0% colour changed, so the "top-heavy, fades to white" identity match
       with the module is preserved, just stronger. Applies identically on
       desktop + mobile (no viewport-scoped override — same selector as §11,
       no media query). Shadow unchanged from the (D) pass (soft violet-
       tinted, matches the new stop's own hue).

   ACTIVE VARIANT RIGHT NOW: deepened MODULE-MATCH (§12 feedback item 1,
   2026-09-14) — see the active rule below; (A)/(B)/(C)/(D) all preserved,
   commented, for instant revert.
   ============================================================ */

/* --- Variant (A) PLAIN SEPARATED — INACTIVE, uncomment to activate ---
body.bks-session-discovery-page .ts-preview {
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(122, 90, 240, .10), 0 1px 3px rgba(9, 7, 17, .05);
}
--- end Variant (A) --- */

/* --- Variant (B) VIOLET GRADIENT POP — INACTIVE, uncomment to activate ---
body.bks-session-discovery-page .ts-preview {
  background: linear-gradient(180deg, #ffffff 0%, #FBFAFF 100%);
  box-shadow: 0 6px 20px rgba(122, 90, 240, .14), 0 2px 6px rgba(9, 7, 17, .07);
}
--- end Variant (B) --- */

/* --- Variant (C) CORAL GRADIENT POP — INACTIVE, uncomment to activate ---
body.bks-session-discovery-page .ts-preview {
  background: linear-gradient(180deg, #ffffff 0%, #FFF5F5 100%);
  box-shadow: 0 6px 20px rgba(235, 102, 109, .14), 0 2px 6px rgba(9, 7, 17, .07);
}
--- end Variant (C) --- */

/* --- Variant (D) MODULE MATCH — INACTIVE (superseded 2026-09-14, feedback item 1), uncomment to revert to the exact-module-match tint ---
body.bks-session-discovery-page .ts-preview {
  background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 78%);
  box-shadow: 0 6px 20px rgba(122, 90, 240, .14), 0 2px 6px rgba(9, 7, 17, .07);
}
--- end Variant (D) --- */

/* --- ACTIVE — deepened module-match (feedback item 1, 2026-09-14): same
   180deg / 0% / 78% direction+stops as the module and as (D) above; ONLY the
   0% colour is deepened from #FBFAFF to #EBE6FD (15% linear mix of white with
   --bks-lav-deep #7A5AF0 — see the math in the comment block above). Same
   rule, no media query, so this applies identically on desktop + mobile. */
body.bks-session-discovery-page .ts-preview {
  background: linear-gradient(180deg, #EBE6FD 0%, #FFFFFF 78%);
  box-shadow: 0 6px 20px rgba(122, 90, 240, .14), 0 2px 6px rgba(9, 7, 17, .07);
}
/* --- end ACTIVE --- */

/* ============================================================
   13) VARIANT B OWNER-FEEDBACK BATCH (owner directive 2026-09-14,
   PREVIEW-ONLY, Variant B only). Items 3, 4 (filter-sheet Search button —
   see coordinator clarification below), 5, 6, 7. Item 1 is §12 above,
   item 2 is a label-only PHP change in booksesh-card-quickview.php.
   ============================================================ */

/* -- ITEM 3 — EQUAL SPACING. Measured live via Playwright (first rendered
      card, desktop 1440) BEFORE this change:
        gap UNDER "Quick view details" (bottom of .bksesh-qv -> top of the
        gallery/thumbnail .elementor-element-b6b2133)   = 1px
        gap ABOVE "BOOK NOW" (bottom of the gallery -> top of
        .elementor-element-9ccb512)                     = 13px
      The two gaps read as unbalanced (card looks cramped under Quick view,
      loose above BOOK NOW). Equalised by adding margin-bottom to `.bksesh-qv`
      (the block that sits directly above the gallery, per the §10 reorder —
      order:3) so its own gap grows to match the already-tuned 12px
      margin-bottom on the gallery (§10) that produces the 13px gap above
      BOOK NOW. `.bksesh-qv` currently carries no bottom margin of its own
      (confirmed: its measured bottom == its toggle's measured bottom, i.e.
      the collapsed `.bksesh-qv-panel` contributes 0 additional height when
      closed), so this is a clean, isolated addition — nothing else in the
      flex column shifts except the gap it directly controls. Scoped to
      Variant B only; verified equal after this change (see build report). */
body.bks-session-discovery-page .ts-preview .elementor-element-01636c7 > .e-con-inner > .bksesh-qv {
  margin-bottom: 12px;
}

/* -- ITEM 4 — FILTER-SHEET "Search" BUTTON = BOOK NOW STYLE (coordinator
      clarification 2026-09-14: the REQUIRED target is the native Voxel
      search-portal/filter-sheet "Search" submit button — `<a class="ts-btn
      ts-btn-2">Search</a>` inside `.ts-search-portal`, confirmed via
      Playwright DOM inspection — NOT the discovery module's own arrow
      button (`.bks-disc-go`, styled separately below for consistency as
      the owner's optional bonus)). Pre-change computed style (both
      desktop+mobile use the SAME shared popup instance): background
      rgb(49,143,255) / #318FFF, radius 7px, no shadow. The sibling "Clear"
      button is `.ts-btn-1` — explicitly NOT targeted by this rule (its
      own selector, `.ts-btn-2`, is used instead of the shared `.ts-btn` so
      Clear is completely unaffected). Scoped under
      `body.bks-session-discovery-page .ts-search-portal` so ONLY this
      preview page's popup instance is touched — the identical popup
      markup on the LIVE /session/ archive and every other Voxel search
      surface keeps its native blue #318FFF/7px-radius styling untouched
      (this page's popup is a SEPARATE DOM instance, elementor-15191-scoped,
      never shared with live). !important beats the native forms.css
      button rule's own background/radius declarations on hover too. */
body.bks-session-discovery-page .ts-search-portal .ts-btn-2 {
  background: #0f40ff !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(15, 64, 255, .35) !important;
}
body.bks-session-discovery-page .ts-search-portal .ts-btn-2:hover,
body.bks-session-discovery-page .ts-search-portal .ts-btn-2:focus-visible {
  background: var(--bks-coral, #EB666D) !important;
  color: #ffffff !important;
}

/* -- ITEM 5 — VERIFICATION CHECKMARK green/teal -> purple. Confirmed via
      Playwright: the badge is the native Voxel card "action" list item
      `li[data-tooltip="Verified"]` (repeater id e99a358, inside the card's
      advanced-list widget next to the title) — its SVG renders with
      computed fill/color rgb(61,209,195) / #3DD1C3 (teal), set by Voxel's
      own theme CSS (no inline fill on this svg, so a scoped override on the
      svg wins cleanly). Recolours ONLY this badge's svg — the icon shape,
      tooltip, "Verified" semantics and every other action icon (e.g. the
      hidden Open/Closed status from §9b) are untouched. Scoped under
      `.ts-preview` so it can only ever affect Variant B's own cards. */
body.bks-session-discovery-page .ts-preview li[data-tooltip="Verified"] svg,
body.bks-session-discovery-page .ts-preview li[data-tooltip="Verified"] svg path {
  fill: #7A5AF0 !important;
  color: #7A5AF0 !important;
}

/* -- ITEM 6 — REVIEW STARS -> BOOK NOW blue. Confirmed via Playwright: the
      Elementor native rating widget (`.e-rating`, widget b7358b9) renders a
      MARKED layer (`.e-icon-wrapper.e-icon-marked svg`, computed fill
      rgb(49,143,255) / #318FFF — a different blue from ours) and a SEPARATE
      UNMARKED layer (`.e-icon-wrapper.e-icon-unmarked svg`, computed fill
      rgb(228,233,233) / #E4E9E9 — grey, left untouched). Only the marked
      (filled-star) layer is targeted, so empty stars keep their existing
      grey exactly as instructed. Scoped under `.ts-preview`. */
body.bks-session-discovery-page .ts-preview .e-icon-wrapper.e-icon-marked svg {
  fill: #0f40ff !important;
  color: #0f40ff !important;
}

/* -- ITEM 7 — PAGE H1 TITLE — REMOVED 2026-09-14 (owner directive).
      The plugin's custom H1 styling (colour + desktop/mobile margin-top +
      mobile font-size !important) CONFLICTED with the owner's Elementor
      controls (a gap appeared below the header logo). All H1 rules removed
      here so Elementor's own H1 widget settings (spacing, size, colour) are
      the single source of truth. NOTE: the v2 comparison page still applies a
      blue->purple GRADIENT to the title via session-discovery-v2.css
      (refinement 4) — that only recolours the text and does not affect
      spacing/size; remove that separately if Elementor should own colour too. */

/* -- BONUS (owner-permitted, optional) — discovery module's own arrow
      submit button (`.bks-disc-go`, session-discovery.css) restyled to
      match BOOK NOW too, for visual consistency with the filter-sheet
      Search button above. NOT the required item-4 target (that's the
      `.ts-search-portal .ts-btn-2` rule above) — this is purely cosmetic
      consistency on the module's own control. Overrides only colour/shape;
      size/position/submit wiring untouched. */
body.bks-session-discovery-page .bks-disc-go {
  background: #0f40ff !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 14px rgba(15, 64, 255, .35) !important;
}
body.bks-session-discovery-page .bks-disc-go:hover {
  background: var(--bks-coral, #EB666D) !important;
}

/* ============================================================
   /session/-ONLY (desktop) — keep BOOK NOW + "Home-based venue" on ONE
   line at the narrower 390 card (owner 2026-09-16). Trims the BOOK NOW
   button + venue chip so the row stops wrapping -> card height tightens.
   Scoped to body.post-type-archive-places (ONLY /session/) + desktop; the
   banked /near/ (447 card) and /sessions/ don't wrap and are UNAFFECTED
   by the scope; mobile unchanged. Reversible: skin .bak-booknowrow-*.
   ============================================================ */
@media (min-width: 768px) {
  body.bks-disc-v2 .ts-preview .bksesh-wfh-row {
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  body.bks-disc-v2 .ts-preview .bksesh-wfh-row .booksesh-btn {
    padding: 8px 14px;
    font-size: 15px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  body.bks-disc-v2 .ts-preview .bksesh-wfh-row .bksesh-wfh-chip--card {
    font-size: 12.5px;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
  }
}