/* Jalpi Page Builder — Frontend Reset & Base
 * Loaded ONLY when a Canvas-built page is displayed.
 * Minimal footprint: no grid system, no utilities, just
 * the bare minimum to keep jalpi-* elements consistent.
 */

/* Skip navigation link — visually hidden until focused (keyboard accessibility) */
.jalpi-skip-link.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.jalpi-skip-link.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.3);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

.jalpi-section,
.jalpi-container,
.jalpi-column {
  box-sizing: border-box;
}

/* Sections and block containers span full width by default */
.jalpi-section,
.jalpi-container { width: 100%; }

/* Full-width sections break out of the WordPress theme content container
   (e.g. .entry-content or .site-content with max-width).
   calc(50% - 50vw) shifts the section left to the viewport edge. */
.jalpi-section--fw {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Column width is controlled entirely by the generated per-column CSS rule */
.jalpi-column { position: relative; }

.jalpi-container {
  padding-left:  20px;
  padding-right: 20px;
}

.jalpi-el {
  box-sizing:    border-box;
  overflow-wrap: break-word;
  word-break:    break-word;
  max-width:     100%;
}

/* Images never overflow their parent */
.jalpi-el img {
  max-width: 100%;
  height:    auto;
  display:   block;
}

/* Minimal button reset */
.jalpi-btn {
  display:         inline-block;
  text-decoration: none;
  cursor:          pointer;
}

/* Video background element used by heading/text/section elements */
.jalpi-el-bg-video {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  z-index:        0;
  pointer-events: none;
}

/* Form element placeholder (shown when plugin is inactive or form missing) */
.jalpi-form-placeholder {
  padding: 20px;
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 14px;
  text-align: center;
}
.jalpi-form-placeholder p { margin: 0; }

/* ================================================================
   Alert
   ================================================================ */

.jalpi-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.6;
}

.jalpi-alert--info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.jalpi-alert--success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.jalpi-alert--warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.jalpi-alert--error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.jalpi-alert__icon { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 1px; }
.jalpi-alert__body { flex: 1; min-width: 0; }
.jalpi-alert__title { display: block; font-weight: 700; margin-bottom: 3px; }
.jalpi-alert__text  { margin: 0; }

/* ================================================================
   Counter
   ================================================================ */

.jalpi-counter {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.jalpi-counter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 120px;
  min-width: 80px;
  text-align: center;
}

.jalpi-counter__number {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #6366f1;
  letter-spacing: -0.02em;
}

.jalpi-counter__prefix,
.jalpi-counter__suffix {
  font-size: 1.5rem;
  font-weight: 700;
  vertical-align: super;
}

.jalpi-counter__label {
  font-size: 1rem;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.02em;
}

/* ================================================================
   Progress
   ================================================================ */

.jalpi-progress { display: flex; flex-direction: column; gap: 16px; }

.jalpi-progress__row { display: flex; flex-direction: column; gap: 6px; }

.jalpi-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.jalpi-progress__label { color: #374151; }
.jalpi-progress__pct   { color: #6b7280; font-variant-numeric: tabular-nums; }

.jalpi-progress__track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.jalpi-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: #6366f1;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   Testimonial
   ================================================================ */

.jalpi-testimonial {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
}

.jalpi-testi__stars { display: flex; gap: 2px; }

.jalpi-testi__star       { color: #f59e0b; font-size: 18px; line-height: 1; }
.jalpi-testi__star--empty { color: #d1d5db; }

.jalpi-testi__quote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #374151;
  font-style: italic;
}

.jalpi-testi__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.jalpi-testi__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.jalpi-testi__avatar--placeholder {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #e5e7eb;
  flex-shrink: 0;
}

.jalpi-testi__author-info { display: flex; flex-direction: column; gap: 1px; }
.jalpi-testi__name        { font-weight: 700; font-size: 15px; color: #111827; }
.jalpi-testi__role        { font-size: 13px; color: #6b7280; }

/* ================================================================
   Accordion  (CSS-only)
   ================================================================ */

.jalpi-accordion { display: flex; flex-direction: column; gap: 8px; }

.jalpi-acc__item {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.jalpi-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 15px;
  color: #111827;
  cursor: pointer;
  list-style: none;
  background: #fff;
  transition: background 0.12s;
}

.jalpi-acc__head::-webkit-details-marker { display: none; }
.jalpi-acc__head::marker                 { display: none; }

.jalpi-acc__head:hover { background: #f9fafb; }

/* Chevron icon via CSS */
.jalpi-acc__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  position: relative;
}

.jalpi-acc__icon::before,
.jalpi-acc__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s;
}

.jalpi-acc__icon::before { left: 1px;  transform: translateY(-50%) rotate(45deg); }
.jalpi-acc__icon::after  { right: 1px; transform: translateY(-50%) rotate(-45deg); }

details.jalpi-acc__item[open] .jalpi-acc__icon::before { transform: translateY(-50%) rotate(-45deg); }
details.jalpi-acc__item[open] .jalpi-acc__icon::after  { transform: translateY(-50%) rotate(45deg); }

/* Plus / minus icon variant */
.jalpi-acc__icon--pm { font-size: 18px; line-height: 1; flex-shrink: 0; font-weight: 700; }
.jalpi-acc__icon--pm .jalpi-acc__icon-c { display: none; }
details.jalpi-acc__item[open] .jalpi-acc__icon--pm .jalpi-acc__icon-e { display: none; }
details.jalpi-acc__item[open] .jalpi-acc__icon--pm .jalpi-acc__icon-c { display: inline; }

/* Title span (fills flex space so icon stays at edge) */
.jalpi-acc__title { flex: 1; }

.jalpi-acc__body {
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
}

/* ================================================================
   Badge
   ================================================================ */

.jalpi-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
}

.jalpi-badge--primary   { background: #ede9fe; color: #4f46e5; }
.jalpi-badge--secondary { background: #f3f4f6; color: #374151; }
.jalpi-badge--success   { background: #dcfce7; color: #15803d; }
.jalpi-badge--warning   { background: #fef3c7; color: #b45309; }
.jalpi-badge--error     { background: #fee2e2; color: #dc2626; }
.jalpi-badge--info      { background: #dbeafe; color: #1d4ed8; }

/* ================================================================
   Icon List
   ================================================================ */

.jalpi-icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jalpi-icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #374151;
}

.jalpi-icon-list__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: #ede9fe;
  border-radius: 50%;
  color: #6366f1;
}

.jalpi-icon-list__text { flex: 1; }

/* ================================================================
   Pricing Table
   ================================================================ */

.jalpi-pricing {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  position: relative;
}

.jalpi-pricing--featured {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f1, 0 8px 32px rgba(99,102,241,.15);
}

.jalpi-pricing__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 14px;
  border-radius: 999px;
}

.jalpi-pricing__head  { display: flex; flex-direction: column; gap: 4px; }
.jalpi-pricing__name  { font-size: 1.25rem; font-weight: 700; color: #111827; margin: 0; }
.jalpi-pricing__tagline { font-size: 14px; color: #6b7280; margin: 0; }

.jalpi-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.jalpi-pricing__currency { font-size: 1.25rem; font-weight: 700; color: #374151; align-self: flex-start; padding-top: 6px; }
.jalpi-pricing__amount   { font-size: 3rem; font-weight: 800; color: #111827; line-height: 1; letter-spacing: -0.04em; }
.jalpi-pricing__period   { font-size: 1rem; color: #9ca3af; font-weight: 500; }

.jalpi-pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.jalpi-pricing__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.jalpi-pricing__check { color: #6366f1; display: flex; flex-shrink: 0; }

.jalpi-pricing__cta {
  display: block;
  text-align: center;
  padding: 13px 24px;
  background: #6366f1;
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s;
}

.jalpi-pricing__cta:hover { background: #4f46e5; }
.jalpi-pricing--featured .jalpi-pricing__cta { background: #6366f1; }

/* ================================================================
   Team Member
   ================================================================ */

.jalpi-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.jalpi-team__photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.jalpi-team__photo--placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e5e7eb;
  display: block;
}

.jalpi-team__info  { display: flex; flex-direction: column; gap: 6px; }
.jalpi-team__name  { font-size: 1.15rem; font-weight: 700; color: #111827; margin: 0; }
.jalpi-team__role  { font-size: 14px; font-weight: 600; color: #6366f1; margin: 0; }
.jalpi-team__bio   { font-size: 14px; line-height: 1.7; color: #6b7280; margin: 0; }

.jalpi-team__social { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }

.jalpi-team__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #4b5563;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.jalpi-team__social-link:hover { background: #6366f1; color: #fff; }

/* ================================================================
   FAQ  — Modern JS-powered accordion
   ================================================================ */

/* ── Container ── */
.jalpi-faq {
  display: flex;
  flex-direction: column;
}

/* ── Item ── */
.jalpi-faq__item {
  position: relative;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

/* ── Question button ── */
.jalpi-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #111827;
  line-height: 1.4;
  transition: color 0.25s;
}

.jalpi-faq--icon-left .jalpi-faq__q {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.jalpi-faq__q-text { flex: 1; }

/* ── Animated body (CSS grid trick — works in all modern browsers) ── */
.jalpi-faq__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.jalpi-faq__item.is-open .jalpi-faq__body {
  grid-template-rows: 1fr;
}
.jalpi-faq__inner { overflow: hidden; }

/* ── Answer ── */
.jalpi-faq__a {
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: #4b5563;
}

/* ── Icon ── */
.jalpi-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  transition: transform 0.3s ease, color 0.25s;
  position: relative;
}
.jalpi-faq__icon svg { width: 100%; height: 100%; display: block; }

/* chevron / arrow: rotate on open */
.jalpi-faq__icon--chevron,
.jalpi-faq__icon--arrow {
  transition: transform 0.3s ease, color 0.25s;
}
.jalpi-faq__item.is-open .jalpi-faq__icon--chevron,
.jalpi-faq__item.is-open .jalpi-faq__icon--arrow {
  transform: rotate(180deg);
}

/* plus: CSS bars — vertical fades out on open */
.jalpi-faq__icon--plus::before,
.jalpi-faq__icon--plus::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: opacity 0.25s, transform 0.25s;
}
.jalpi-faq__icon--plus::before { width: 12px; height: 2px; transform: translate(-50%,-50%); }
.jalpi-faq__icon--plus::after  { width: 2px; height: 12px; transform: translate(-50%,-50%); }
.jalpi-faq__item.is-open .jalpi-faq__icon--plus::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }

/* circle: small bordered disc with plus/minus */
.jalpi-faq__icon--circle {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.jalpi-faq__icon--circle::before,
.jalpi-faq__icon--circle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  border-radius: 1px;
  transition: opacity 0.25s, transform 0.25s;
}
.jalpi-faq__icon--circle::before { width: 8px; height: 1.5px; transform: translate(-50%,-50%); }
.jalpi-faq__icon--circle::after  { width: 1.5px; height: 8px; transform: translate(-50%,-50%); }
.jalpi-faq__item.is-open .jalpi-faq__icon--circle::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }

/* ── Active state (icon + question) ── */
.jalpi-faq__item.is-open .jalpi-faq__q  { color: #6366f1; }
.jalpi-faq__item.is-open .jalpi-faq__icon { color: #6366f1; }

/* ──────────────────────────────────────────────────────────────────
   Layout Variants
   ────────────────────────────────────────────────────────────────── */

/* Classic: border-top on first, border-bottom on each */
.jalpi-faq--classic .jalpi-faq__item { border-bottom: 1px solid #e5e7eb; }
.jalpi-faq--classic .jalpi-faq__item:first-child { border-top: 1px solid #e5e7eb; }
.jalpi-faq--classic .jalpi-faq__q  { padding: 18px 0; }
.jalpi-faq--classic .jalpi-faq__a  { padding: 0 0 18px; }

/* Boxed: each item is a rounded card */
.jalpi-faq--boxed { gap: 10px; }
.jalpi-faq--boxed .jalpi-faq__item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.jalpi-faq--boxed .jalpi-faq__item:hover { border-color: #d1d5db; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.jalpi-faq--boxed .jalpi-faq__item.is-open { border-color: #6366f1; box-shadow: 0 4px 16px rgba(99,102,241,.12); }
.jalpi-faq--boxed .jalpi-faq__item.is-open .jalpi-faq__q { background: transparent; }

/* Minimal: barely-there dividers */
.jalpi-faq--minimal { gap: 0; }
.jalpi-faq--minimal .jalpi-faq__item { border-bottom: 1px solid rgba(0,0,0,.07); }
.jalpi-faq--minimal .jalpi-faq__q  { padding: 16px 0; font-weight: 500; }
.jalpi-faq--minimal .jalpi-faq__a  { padding: 0 0 16px; }
.jalpi-faq--minimal .jalpi-faq__item.is-open .jalpi-faq__q { color: #374151; }

/* Separated: floating cards with gap */
.jalpi-faq--separated { gap: 10px; }
.jalpi-faq--separated .jalpi-faq__item {
  background: #f9fafb;
  border-radius: 10px;
  overflow: hidden;
}
.jalpi-faq--separated .jalpi-faq__item:hover { background: #f3f4f6; }
.jalpi-faq--separated .jalpi-faq__item.is-open { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.08); }

/* Framed: all items inside one bordered container with inner dividers */
.jalpi-faq--framed {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}
.jalpi-faq--framed .jalpi-faq__item + .jalpi-faq__item { border-top: 1px solid #e5e7eb; }
.jalpi-faq--framed .jalpi-faq__item.is-open { background: #f9fafb; }
.jalpi-faq--framed .jalpi-faq__q  { padding: 18px 24px; }
.jalpi-faq--framed .jalpi-faq__a  { padding: 0 24px 20px; }

/* ================================================================
   Table
   ================================================================ */

.jalpi-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.jalpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.jalpi-table__caption {
  caption-side: bottom;
  font-size: 12px;
  color: #9ca3af;
  padding: 8px 0 0;
  text-align: left;
}

.jalpi-table__th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.jalpi-table__td {
  padding: 12px 16px;
  color: #374151;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}

.jalpi-table__row:last-child .jalpi-table__td { border-bottom: none; }
.jalpi-table__row:nth-child(even) .jalpi-table__td { background: #fafafa; }

/* ================================================================
   Feature Card
   ================================================================ */

.jalpi-feature {
  transition: box-shadow 0.15s, transform 0.15s;
}
.jalpi-feature__body { flex: 1; min-width: 0; }

.jalpi-feature:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.jalpi-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #ede9fe;
  color: #6366f1;
}

.jalpi-feature__title { font-size: 1.1rem; font-weight: 700; color: #111827; margin: 0; }
.jalpi-feature__text  { font-size: 14px; line-height: 1.7; color: #6b7280; margin: 0; }

/* ================================================================
   Call To Action
   ================================================================ */

.jalpi-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 48px 32px;
}

.jalpi-cta__title    { font-size: 2rem; font-weight: 800; color: #111827; margin: 0; line-height: 1.2; }
.jalpi-cta__subtitle { font-size: 1.1rem; color: #6b7280; margin: 0; line-height: 1.6; max-width: 540px; }

.jalpi-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.jalpi-cta__btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.jalpi-cta__btn:hover { transform: translateY(-1px); }

.jalpi-cta__btn--primary {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 12px rgba(99,102,241,.35);
}

.jalpi-cta__btn--primary:hover { background: #4f46e5; }

.jalpi-cta__btn--secondary {
  background: transparent;
  color: #6366f1;
  border: 1.5px solid #6366f1;
}

.jalpi-cta__btn--secondary:hover { background: #ede9fe; }

/* ================================================================
   Stats Card
   ================================================================ */

.jalpi-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px;
}

.jalpi-stats__value {
  font-size: 3rem;
  font-weight: 800;
  color: #6366f1;
  line-height: 1;
  letter-spacing: -0.04em;
}

.jalpi-stats__label    { font-size: 1rem; font-weight: 600; color: #111827; }
.jalpi-stats__sublabel { font-size: 13px; color: #9ca3af; }

/* ================================================================
   Timeline  (CSS-only)
   ================================================================ */

.jalpi-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.jalpi-timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, #6366f1, #a78bfa);
  border-radius: 1px;
}

.jalpi-timeline__item {
  display: flex;
  gap: 20px;
  padding: 0 0 28px 0;
  position: relative;
}

.jalpi-timeline__item:last-child { padding-bottom: 0; }

.jalpi-timeline__marker {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #6366f1;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #6366f1;
  z-index: 1;
  margin-top: 2px;
}

.jalpi-timeline__content { flex: 1; padding-top: 4px; }

.jalpi-timeline__date {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6366f1;
  margin-bottom: 4px;
}

.jalpi-timeline__title {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 6px;
}

.jalpi-timeline__text {
  font-size: 14px;
  line-height: 1.7;
  color: #6b7280;
  margin: 0;
}

/* ── Testimonials Carousel / Grid ── */
.jalpi-testimonials {
  display: flex;
  gap: var(--jalpi-tcard-gap, 20px);
}

/* Carousel: horizontal scroll-snap */
.jalpi-testimonials--carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
}
.jalpi-testimonials--carousel::-webkit-scrollbar { display: none; }
.jalpi-testimonials--carousel .jalpi-tcard {
  flex: 0 0 clamp(260px, 40%, 380px);
  scroll-snap-align: start;
}

/* Grid: responsive auto-fit columns */
.jalpi-testimonials--grid {
  flex-wrap: wrap;
}
.jalpi-testimonials--grid .jalpi-tcard {
  flex: 1 1 260px;
}

/* Individual card — all colours/sizes via CSS variables */
.jalpi-tcard {
  background:    var(--jalpi-tcard-bg,      #ffffff);
  border:        var(--jalpi-tcard-bw,      1px) solid var(--jalpi-tcard-border, #e5e7eb);
  border-radius: var(--jalpi-tcard-radius,  12px);
  padding: 24px;
  box-shadow:    var(--jalpi-tcard-shadow,  0 2px 8px rgba(0,0,0,.06));
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Stars */
.jalpi-tcard__stars { display: flex; gap: 2px; }
.jalpi-tcard__star  { font-size: 16px; color: #d1d5db; }
.jalpi-tcard__star.is-filled { color: var(--jalpi-tcard-star, #f59e0b); }

/* Quote */
.jalpi-tcard__quote {
  margin: 0;
  flex: 1;
}
.jalpi-tcard__quote p {
  margin: 0;
  font-size:   var(--jalpi-tcard-qsize, 15px);
  line-height: 1.7;
  color:       var(--jalpi-tcard-quote, #374151);
  font-style: italic;
}
.jalpi-tcard__quote p::before { content: '\201C'; }
.jalpi-tcard__quote p::after  { content: '\201D'; }

/* Footer: avatar + author */
.jalpi-tcard__footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jalpi-tcard__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.jalpi-tcard__avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ede9fe;
  flex-shrink: 0;
  display: inline-block;
}
.jalpi-tcard__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jalpi-tcard__name {
  font-style:  normal;
  font-size:   var(--jalpi-tcard-nsize, 14px);
  font-weight: 700;
  color:       var(--jalpi-tcard-name, #111827);
}
.jalpi-tcard__role {
  font-size: 12px;
  color:     var(--jalpi-tcard-role, #6b7280);
}

@media (max-width: 640px) {
  .jalpi-testimonials--carousel .jalpi-tcard {
    flex: 0 0 85vw;
  }
  .jalpi-testimonials--grid .jalpi-tcard {
    flex: 1 1 100%;
  }
}

/* ─── Tabs ──────────────────────────────────────────────────── */
.jalpi-tabs {}
.jalpi-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid #e5e7eb;
}
.jalpi-tabs--pill .jalpi-tabs__nav {
  border-bottom: none;
  gap: 4px;
}
.jalpi-tabs--boxed .jalpi-tabs__nav {
  background: #f9fafb;
  border-radius: 8px 8px 0 0;
  padding: 4px 4px 0;
}
.jalpi-tabs__btn {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: color .15s, border-color .15s;
}
.jalpi-tabs__btn.is-active,
.jalpi-tabs__btn:hover {
  color: #6366f1;
  border-bottom-color: #6366f1;
}
.jalpi-tabs--pill .jalpi-tabs__btn {
  border: none;
  border-radius: 999px;
  margin-bottom: 0;
}
.jalpi-tabs--pill .jalpi-tabs__btn.is-active {
  background: #ede9fe;
}
.jalpi-tabs--boxed .jalpi-tabs__btn {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.jalpi-tabs--boxed .jalpi-tabs__btn.is-active {
  background: #fff;
  color: #6366f1;
}
.jalpi-tabs__body {
  padding: 16px 0 0;
}
.jalpi-tabs__pane[hidden] {
  display: none;
}

/* ─── Image Box ─────────────────────────────────────────────── */
.jalpi-imgbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jalpi-imgbox--left,
.jalpi-imgbox--right {
  flex-direction: row;
  align-items: center;
}
.jalpi-imgbox--right {
  flex-direction: row-reverse;
}
.jalpi-imgbox__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: inherit;
  gap: inherit;
  align-items: inherit;
}
.jalpi-imgbox__media { flex-shrink: 0; }
.jalpi-imgbox--left .jalpi-imgbox__media,
.jalpi-imgbox--right .jalpi-imgbox__media { width: 80px; }
.jalpi-imgbox__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.jalpi-imgbox--left .jalpi-imgbox__img,
.jalpi-imgbox--right .jalpi-imgbox__img { width: 80px; height: 80px; object-fit: cover; }
.jalpi-imgbox__title {
  margin: 0 0 6px;
  font-size: 1.1em;
  font-weight: 700;
  color: #111827;
}
.jalpi-imgbox__desc {
  margin: 0;
  font-size: .9em;
  color: #6b7280;
  line-height: 1.6;
}

/* ─── Social Icons ──────────────────────────────────────────── */
.jalpi-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jalpi-social-icons--left  { justify-content: flex-start; }
.jalpi-social-icons--center{ justify-content: center; }
.jalpi-social-icons--right { justify-content: flex-end; }
.jalpi-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--jalpi-si-size, 40px);
  height: var(--jalpi-si-size, 40px);
  background: var(--jalpi-si-bg, #6b7280);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: calc(var(--jalpi-si-size, 40px) * .38);
  transition: opacity .15s;
}
.jalpi-social__icon:hover { opacity: .8; }
.jalpi-social__icon--circle { border-radius: 50%; }
.jalpi-social__icon--square { border-radius: 20%; }
.jalpi-social__icon--minimal {
  background: transparent;
  border: 2px solid var(--jalpi-si-bg, #6b7280);
  color: var(--jalpi-si-bg, #6b7280);
}

/* ─── Gallery ───────────────────────────────────────────────── */
.jalpi-gallery { width: 100%; }

/* Grid layout */
.jalpi-gallery--grid .jalpi-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Masonry layout */
.jalpi-gallery--masonry .jalpi-gallery__grid {
  columns: 3;
  column-gap: 12px;
}
.jalpi-gallery--masonry .jalpi-gallery__item {
  break-inside: avoid;
  margin-bottom: 12px;
}
.jalpi-gallery--masonry .jalpi-gallery__item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Item base */
.jalpi-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
}
.jalpi-gallery__media { width: 100%; height: 100%; }
.jalpi-gallery--grid .jalpi-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover: zoom */
.jalpi-gallery--h-zoom .jalpi-gallery__item img { transition: transform .4s ease; }
.jalpi-gallery--h-zoom .jalpi-gallery__item:hover img { transform: scale(1.08); }

/* Hover: scale */
.jalpi-gallery--h-scale .jalpi-gallery__item { transition: transform .3s ease; }
.jalpi-gallery--h-scale .jalpi-gallery__item:hover { transform: scale(1.04); }

/* Hover: fade */
.jalpi-gallery--h-fade .jalpi-gallery__item img { transition: opacity .3s ease; }
.jalpi-gallery--h-fade .jalpi-gallery__item:hover img { opacity: .6; }

/* Hover: overlay */
.jalpi-gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.jalpi-gallery--h-overlay .jalpi-gallery__item:hover .jalpi-gallery__overlay { opacity: 1; }

/* Caption */
.jalpi-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: #fff;
  background: rgba(0,0,0,.6);
  text-align: center;
  transition: opacity .3s ease;
}
/* always visible by default — JS/PHP can override */
.jalpi-gallery__item .jalpi-gallery__caption { opacity: 1; }

/* Filter bar */
.jalpi-gallery__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}
.jalpi-gallery__filter-btn {
  background: transparent;
  color: #374151;
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 5px 18px;
  cursor: pointer;
  font-size: 13px;
  transition: background .2s, color .2s, border-color .2s;
}
.jalpi-gallery__filter-btn.jalpi-active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.jalpi-gallery__item.jalpi-hidden { display: none; }

/* Lightbox */
#jalpi-lightbox { display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.92); align-items: center; justify-content: center; }
#jalpi-lightbox.jalpi-open { display: flex !important; }

/* ─── Image Carousel (jalpi-ic) ────────────────────────────────── */

/* ── Container ── */
.jalpi-ic { position: relative; }

/* ── Viewport clips overflow ── */
.jalpi-ic__viewport { overflow: hidden; }

/* ── Track: flex row of slides ── */
.jalpi-ic__track {
  display: flex;
  will-change: transform;
}

/* ── Single slide ── */
.jalpi-ic__slide { flex-shrink: 0; /* width set by JS */ }
.jalpi-ic__slide-inner { overflow: hidden; }

/* ── Image ── */
.jalpi-ic__img-wrap { position: relative; overflow: hidden; }
.jalpi-ic__img { width: 100%; display: block; object-fit: cover; transition: transform 0.4s ease, opacity 0.3s, filter 0.3s; }

/* ── Overlay ── */
.jalpi-ic__overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; pointer-events: none; }

/* ── Caption ── */
.jalpi-ic__caption-wrap--below { padding: 8px 4px 4px; }
.jalpi-ic__caption      { font-size: 14px; font-weight: 500; color: #374151; line-height: 1.4; }
.jalpi-ic__desc         { font-size: 13px; color: #6b7280; margin-top: 3px; line-height: 1.5; }

/* Overlay caption */
.jalpi-ic__caption-wrap--overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  pointer-events: none;
}
.jalpi-ic__caption-wrap--overlay .jalpi-ic__caption { color: #fff; font-size: 15px; }
.jalpi-ic__caption-wrap--overlay .jalpi-ic__desc    { color: rgba(255,255,255,.85); }

/* ── Navigation arrows ── */
.jalpi-ic__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px;
  background: rgba(0,0,0,.45);
  border: none; border-radius: 50%;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}
.jalpi-ic__arrow:hover       { background: rgba(0,0,0,.65); }
.jalpi-ic__arrow--prev       { left: 12px; }
.jalpi-ic__arrow--next       { right: 12px; }
.jalpi-ic__arrow svg         { width: 20px; height: 20px; display: block; }

/* ── Dots ── */
.jalpi-ic__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.jalpi-ic__dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: rgba(0,0,0,.22);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.2s, width 0.2s;
}
.jalpi-ic__dot.is-active { background: #6366f1; width: 20px; }

/* ──────────────────────────────────────────────────────────────
   Hover Effects
   ────────────────────────────────────────────────────────────── */
.jalpi-ic--hover-zoom .jalpi-ic__slide:hover .jalpi-ic__img  { transform: scale(1.08); }
.jalpi-ic--hover-scale .jalpi-ic__slide                   { transition: transform 0.3s ease; }
.jalpi-ic--hover-scale .jalpi-ic__slide:hover             { transform: scale(1.03); }
.jalpi-ic--hover-fade .jalpi-ic__slide:hover .jalpi-ic__img  { opacity: 0.72; }
.jalpi-ic--hover-blur .jalpi-ic__slide:hover .jalpi-ic__img  { filter: blur(3px); }
.jalpi-ic--hover-overlay .jalpi-ic__img-wrap:hover .jalpi-ic__overlay { opacity: 1; }

/* ──────────────────────────────────────────────────────────────
   Layout Variants
   ────────────────────────────────────────────────────────────── */

/* Classic — single slide, full width */
.jalpi-ic--classic .jalpi-ic__viewport { /* handled by JS width */ }

/* Card — rounded cards with shadow per slide */
.jalpi-ic--card .jalpi-ic__slide     { padding: 4px; }
.jalpi-ic--card .jalpi-ic__slide-inner {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0,0,0,.09);
  overflow: hidden;
}

/* Modern — full width with bottom-overlay caption */
.jalpi-ic--modern .jalpi-ic__slide { /* full width handled by JS */ }
.jalpi-ic--modern .jalpi-ic__img-wrap { position: relative; }

/* Coverflow — 3D perspective */
.jalpi-ic--coverflow .jalpi-ic__viewport { perspective: 1000px; overflow: visible; }
.jalpi-ic--coverflow .jalpi-ic__track    { transform-style: preserve-3d; }
.jalpi-ic--coverflow .jalpi-ic__slide    { transition: transform 0.4s ease, opacity 0.4s ease; }

/* Masonry — CSS columns grid (no carousel JS) */
.jalpi-ic--masonry .jalpi-ic__track  { display: block; column-count: 3; column-gap: 16px; }
.jalpi-ic--masonry .jalpi-ic__slide  { break-inside: avoid; margin-bottom: 16px; }
.jalpi-ic--masonry .jalpi-ic__img    { height: auto !important; }
.jalpi-ic--masonry .jalpi-ic__img-wrap { border-radius: inherit; }

/* ──────────────────────────────────────────────────────────────
   Lightbox
   ────────────────────────────────────────────────────────────── */
.jalpi-ic-lb {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 99999;
  align-items: center; justify-content: center;
}
.jalpi-ic-lb.is-open { display: flex; }
.jalpi-ic-lb__body   { position: relative; max-width: 90vw; max-height: 90vh; display: flex; align-items: center; justify-content: center; }
.jalpi-ic-lb__img    { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 4px; display: block; }
.jalpi-ic-lb__close  {
  position: fixed; top: 16px; right: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.jalpi-ic-lb__close:hover { background: rgba(255,255,255,.3); }
.jalpi-ic-lb__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 26px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.jalpi-ic-lb__nav:hover { background: rgba(255,255,255,.3); }
.jalpi-ic-lb__prev { left: 16px; }
.jalpi-ic-lb__next { right: 16px; }

/* ─── Countdown ─────────────────────────────────────────────── */
.jalpi-countdown { text-align: center; }
.jalpi-countdown__label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 12px;
}
.jalpi-countdown__timer {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.jalpi-cd__unit {
  min-width: 64px;
  padding: 12px 8px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jalpi-cd__days, .jalpi-cd__hours, .jalpi-cd__mins, .jalpi-cd__secs {
  font-size: 2em;
  font-weight: 800;
  color: #6366f1;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jalpi-cd__label {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ─── Flip Box ──────────────────────────────────────────────── */
.jalpi-flipbox {
  perspective: 1000px;
}
.jalpi-flipbox__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s ease;
}
.jalpi-flipbox:hover .jalpi-flipbox__inner {
  transform: rotateY(180deg);
}
.jalpi-flipbox__front,
.jalpi-flipbox__back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.jalpi-flipbox__back {
  transform: rotateY(180deg);
}
.jalpi-flipbox__title {
  font-size: 1.25em;
  font-weight: 800;
  margin-bottom: 8px;
}
.jalpi-flipbox__desc {
  font-size: .875em;
  opacity: .85;
  line-height: 1.5;
  margin-bottom: 12px;
}
.jalpi-flipbox__btn {
  display: inline-block;
  padding: 7px 18px;
  background: rgba(255,255,255,.15);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: .75em;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
}
.jalpi-flipbox__btn:hover { background: rgba(255,255,255,.25); }

/* ─── Star Rating ───────────────────────────────────────────── */
.jalpi-star-rating--left  { text-align: left; }
.jalpi-star-rating--center{ text-align: center; }
.jalpi-star-rating--right { text-align: right; }
.jalpi-star-rating__stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}
.jalpi-star {
  color: #d1d5db;
  line-height: 1;
}
.jalpi-star.is-filled {
  color: var(--jalpi-star-color, #f59e0b);
}
.jalpi-star-rating__label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

/* ─── Interaction Engine ────────────────────────────────────────────────
   Shared, parametrized @keyframes — ONE definition per action, reused by
   every node/rule via the --jalpi-ia-* custom properties set in that node's
   own per-rule CSS rule (Jalpi_Renderer::maybe_add_interaction_css()). No
   duplicate keyframes are ever generated no matter how many nodes/rules use
   an action. Playback is controlled entirely by toggling the
   [data-jalpi-ia-active~="ruleId"] attribute — see initInteractions() in
   assets/js/jalpi-frontend.js. Only transform/opacity/filter/clip-path are
   animated — all compositor-friendly, none of them trigger layout. ───── */

[data-jalpi-interact] { transform-origin: var(--jalpi-ia-origin, center); }

/* will-change is scoped to the active window only — not left on permanently,
   which would otherwise waste GPU memory on elements that never animate. */
[data-jalpi-interact][data-jalpi-ia-active] {
  will-change: transform, opacity, filter, clip-path;
}

@keyframes jalpi-ia-fade {
  from { opacity: var(--jalpi-ia-op-from, 0); }
  to   { opacity: var(--jalpi-ia-op-to, 1); }
}
@keyframes jalpi-ia-slide {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: translate(var(--jalpi-ia-tx-from, 0), var(--jalpi-ia-ty-from, 30px)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: translate(0, 0); }
}
@keyframes jalpi-ia-scale {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: scale(var(--jalpi-ia-scale-from, 0.8)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: scale(var(--jalpi-ia-scale-to, 1)); }
}
@keyframes jalpi-ia-rotate {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: rotate(var(--jalpi-ia-rot-from, -15deg)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: rotate(var(--jalpi-ia-rot-to, 0deg)); }
}
@keyframes jalpi-ia-translate {
  from { transform: translate(var(--jalpi-ia-tx-from, 0), var(--jalpi-ia-ty-from, 0)); }
  to   { transform: translate(0, 0); }
}
@keyframes jalpi-ia-opacity {
  from { opacity: 1; }
  to   { opacity: var(--jalpi-ia-op-to, 0.5); }
}
@keyframes jalpi-ia-blur {
  from { filter: blur(var(--jalpi-ia-blur-from, 8px)); }
  to   { filter: blur(0); }
}
@keyframes jalpi-ia-skew {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: skew(var(--jalpi-ia-skew-from, 15deg)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: skew(0); }
}
@keyframes jalpi-ia-flip {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: perspective(600px) rotateX(var(--jalpi-ia-flip-x-from, 0deg)) rotateY(var(--jalpi-ia-flip-y-from, 90deg)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: perspective(600px) rotateX(0deg) rotateY(0deg); }
}
@keyframes jalpi-ia-bounce {
  0%   { opacity: var(--jalpi-ia-op-from, 0); transform: translateY(var(--jalpi-ia-ty-from, -30px)); }
  60%  { opacity: 1; transform: translateY(8px); }
  80%  { transform: translateY(-4px); }
  100% { opacity: var(--jalpi-ia-op-to, 1); transform: translateY(0); }
}
/* Horizontal counterpart of jalpi-ia-bounce above, used for the Bounce Left/
   Right presets (Jalpi_Renderer::add_interaction_keyframe_css() picks this
   keyframe instead of jalpi-ia-bounce when direction is left/right). Overshoot
   stages are proportional to --jalpi-ia-tx-from since this keyframe has no
   pre-existing default look to preserve. */
@keyframes jalpi-ia-bounceX {
  0%   { opacity: var(--jalpi-ia-op-from, 0); transform: translateX(var(--jalpi-ia-tx-from, -30px)); }
  60%  { opacity: 1; transform: translateX(calc(var(--jalpi-ia-tx-from, -30px) * -0.27)); }
  80%  { transform: translateX(calc(var(--jalpi-ia-tx-from, -30px) * 0.13)); }
  100% { opacity: var(--jalpi-ia-op-to, 1); transform: translateX(0); }
}
@keyframes jalpi-ia-zoom {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: scale(var(--jalpi-ia-scale-from, 0.3)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: scale(var(--jalpi-ia-scale-to, 1)); }
}
@keyframes jalpi-ia-customTransform {
  from { opacity: var(--jalpi-ia-op-from, 0); transform: var(--jalpi-ia-custom, none); filter: var(--jalpi-ia-custom-filter, none); }
  to   { opacity: var(--jalpi-ia-op-to, 1); transform: none; filter: none; }
}
/* Multi-stage overshoot, same 4-keyframe shape as jalpi-ia-bounce above —
   the one named preset (Jack In The Box) that can't be expressed as a single
   from/to pair via an existing action. */
@keyframes jalpi-ia-jackInTheBox {
  0%   { opacity: var(--jalpi-ia-op-from, 0); transform: scale(var(--jalpi-ia-scale-from, 0.1)) rotate(30deg); }
  50%  { opacity: 1; transform: scale(1.1) rotate(-10deg); }
  70%  { transform: scale(0.9) rotate(5deg); }
  100% { opacity: var(--jalpi-ia-op-to, 1); transform: scale(1) rotate(0deg); }
}

/* Animation-library extension (Elastic family). Same 4-property-stage shape
   as jalpi-ia-bounce, but with two oscillations instead of one overshoot —
   a deliberately springier, more "elastic" feel distinct from Bounce. */
@keyframes jalpi-ia-elastic {
  0%   { opacity: var(--jalpi-ia-op-from, 0); transform: translateY(var(--jalpi-ia-ty-from, -50px)); }
  40%  { opacity: 1; transform: translateY(calc(var(--jalpi-ia-ty-from, -50px) * -0.15)); }
  60%  { transform: translateY(calc(var(--jalpi-ia-ty-from, -50px) * 0.08)); }
  80%  { transform: translateY(calc(var(--jalpi-ia-ty-from, -50px) * -0.04)); }
  100% { opacity: var(--jalpi-ia-op-to, 1); transform: translateY(0); }
}
/* Horizontal counterpart, same relationship as jalpi-ia-bounce/bounceX. */
@keyframes jalpi-ia-elasticX {
  0%   { opacity: var(--jalpi-ia-op-from, 0); transform: translateX(var(--jalpi-ia-tx-from, -50px)); }
  40%  { opacity: 1; transform: translateX(calc(var(--jalpi-ia-tx-from, -50px) * -0.15)); }
  60%  { transform: translateX(calc(var(--jalpi-ia-tx-from, -50px) * 0.08)); }
  80%  { transform: translateX(calc(var(--jalpi-ia-tx-from, -50px) * -0.04)); }
  100% { opacity: var(--jalpi-ia-op-to, 1); transform: translateX(0); }
}

/* Animation-library extension (Reveal/Clip-Path/Wipe family). clip-path is
   compositor-accelerated and never triggers layout, same performance class
   as transform/opacity/filter — see Jalpi_Renderer::interaction_css_vars()'s
   'reveal'/'wipe' case for how --jalpi-ia-clip-from/-to are computed per
   shape. 'reveal' fades in alongside the clip (soft); 'wipe' is clip-path
   only, no opacity change (hard edge) — the same "one has opacity, one
   doesn't" split already used for Slide vs. Translate. */
@keyframes jalpi-ia-reveal {
  from { opacity: var(--jalpi-ia-op-from, 0); clip-path: var(--jalpi-ia-clip-from, inset(0 100% 0 0)); }
  to   { opacity: var(--jalpi-ia-op-to, 1); clip-path: var(--jalpi-ia-clip-to, inset(0 0 0 0)); }
}
@keyframes jalpi-ia-wipe {
  from { clip-path: var(--jalpi-ia-clip-from, inset(0 100% 0 0)); }
  to   { clip-path: var(--jalpi-ia-clip-to, inset(0 0 0 0)); }
}

/* Accessibility: honored at the CSS level so it can't be missed even if the
   JS engine fails to load or a future trigger forgets to check matchMedia(). */
@media (prefers-reduced-motion: reduce) {
  [data-jalpi-interact] {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Split Text Engine ─────────────────────────────────────────────────────
   Text split into per-character/word/line/paragraph pieces by initSplitText()
   in assets/js/jalpi-frontend.js. Reuses the parametrized jalpi-ia-* keyframes
   above wherever possible — only effects with no IA equivalent get their own
   jalpi-st-* keyframe below.

   The stagger is pure CSS: each piece carries --jalpi-st-i (its index), and the
   delay is computed with calc(). That means NO per-piece JS timers regardless of
   how many pieces there are — a char-split paragraph can be 200+ elements.

   Playback is gated on the root's [data-jalpi-st-active] attribute, toggled by a
   single IntersectionObserver on the ROOT (never one per piece). ──────────── */

/* Pieces rest VISIBLE. Never opacity:0 in a base rule — if JS fails, the media
   query below disables animation, or the observer never fires, the text must
   still be readable. The hidden start state lives only in the keyframes, which
   apply exclusively while the root is active. */
.jalpi-st__p {
  display: inline-block;
  opacity: 1;
  white-space: pre-wrap;
  transform-origin: var(--jalpi-st-origin, center);
  animation-duration: var(--jalpi-st-dur, .8s);
  animation-timing-function: var(--jalpi-st-ease, cubic-bezier(.2,.6,.2,1));
  animation-fill-mode: both;
  animation-iteration-count: var(--jalpi-st-repeat, 1);
  animation-delay: calc(
    var(--jalpi-st-i, 0) * var(--jalpi-st-stagger, 40ms) + var(--jalpi-st-delay, 0ms)
  );
}

/* Reverse: later pieces start first. --jalpi-st-total is set by the splitter. */
.jalpi-st--reverse .jalpi-st__p {
  animation-delay: calc(
    (var(--jalpi-st-total, 1) - 1 - var(--jalpi-st-i, 0)) * var(--jalpi-st-stagger, 40ms)
    + var(--jalpi-st-delay, 0ms)
  );
}

/* Word/line/paragraph wrappers must not break normal text flow. Chars are
   nested inside word wrappers so wrapping still happens at word boundaries. */
.jalpi-st__w { display: inline-block; }
.jalpi-st__line { display: block; }

/* Animation only ever runs while the root is active. */
[data-jalpi-st-active] .jalpi-st__p {
  animation-name: var(--jalpi-st-anim, jalpi-ia-fade);
  will-change: transform, opacity, filter;
}

/* Gradient Text / Gradient Reveal — the gradient paints the glyphs themselves. */
.jalpi-st--gradient .jalpi-st__p,
.jalpi-st--gradient .jalpi-st__w {
  background-image: var(--jalpi-st-gradient, linear-gradient(90deg,#6366f1,#ec4899));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Effects with no jalpi-ia-* equivalent. Same var-parametrized shape. */
@keyframes jalpi-st-typewriter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes jalpi-st-wave {
  0%   { opacity: var(--jalpi-st-op-from, 0); transform: translateY(var(--jalpi-st-ty-from, 20px)); }
  55%  { opacity: 1; transform: translateY(calc(var(--jalpi-st-ty-from, 20px) * -0.35)); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes jalpi-st-glow {
  from { opacity: var(--jalpi-st-op-from, 0); filter: blur(var(--jalpi-st-blur-from, 6px)) drop-shadow(0 0 var(--jalpi-st-glow-size, 12px) var(--jalpi-st-glow-color, rgba(99,102,241,.9))); }
  to   { opacity: 1; filter: blur(0) drop-shadow(0 0 0 transparent); }
}
@keyframes jalpi-st-letter-spacing {
  from { opacity: var(--jalpi-st-op-from, 0); letter-spacing: var(--jalpi-st-ls-from, .5em); }
  to   { opacity: 1; letter-spacing: inherit; }
}
@keyframes jalpi-st-gradient-reveal {
  from { opacity: var(--jalpi-st-op-from, 0); background-position: var(--jalpi-st-bg-from, 100% 50%); }
  to   { opacity: 1; background-position: 0% 50%; }
}
@keyframes jalpi-st-elastic {
  0%   { opacity: var(--jalpi-st-op-from, 0); transform: scale(var(--jalpi-st-scale-from, .4)); }
  55%  { opacity: 1; transform: scale(1.18); }
  75%  { transform: scale(.94); }
  100% { opacity: 1; transform: scale(1); }
}

/* Same rationale as the interaction-engine guard above: enforced in CSS so a
   JS failure can never leave a reduced-motion user with moving text. The
   pieces' resting state is already opacity:1, so disabling animation here
   leaves fully readable text rather than a blank element. */
@media (prefers-reduced-motion: reduce) {
  .jalpi-st__p {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ─── Schema-widget styles (batch) ──────────────────────────────────────── */

/* Animated Text — entrance effect on load, GPU-friendly (transform/opacity). */
.jalpi-anim-text { animation-duration: .7s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.6,.2,1); }
.jalpi-anim-text--fade  { animation-name: jalpi-at-fade; }
.jalpi-anim-text--slide { animation-name: jalpi-at-slide; }
.jalpi-anim-text--zoom  { animation-name: jalpi-at-zoom; }
@keyframes jalpi-at-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jalpi-at-slide { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jalpi-at-zoom  { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* Typewriter caret blink. */
.jalpi-typewriter__caret { animation: jalpi-tw-blink 1s step-end infinite; }
@keyframes jalpi-tw-blink { 50% { opacity: 0; } }

/* Tooltip — pure CSS hover/focus bubble (JS optional). */
.jalpi-tooltip { display: inline-block; }
.jalpi-tooltip__bubble {
  position: absolute; z-index: 20; left: 50%; transform: translateX(-50%) translateY(-6px);
  bottom: 100%; background: #1a1a1a; color: #fff; padding: 6px 10px; border-radius: 6px;
  font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.jalpi-tooltip:hover .jalpi-tooltip__bubble,
.jalpi-tooltip:focus .jalpi-tooltip__bubble,
.jalpi-tooltip:focus-within .jalpi-tooltip__bubble { opacity: 1; }
.jalpi-tooltip[data-pos="bottom"] .jalpi-tooltip__bubble { bottom: auto; top: 100%; transform: translateX(-50%) translateY(6px); }
.jalpi-tooltip[data-pos="left"]  .jalpi-tooltip__bubble { left: auto; right: 100%; bottom: auto; top: 50%; transform: translateY(-50%) translateX(-6px); }
.jalpi-tooltip[data-pos="right"] .jalpi-tooltip__bubble { left: 100%; bottom: auto; top: 50%; transform: translateY(-50%) translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .jalpi-anim-text, .jalpi-typewriter__caret { animation: none !important; }
}

/* ─── Social widgets ────────────────────────────────────────────────────── */
.jalpi-share__btn { transition: transform .15s, opacity .15s; }
.jalpi-share__btn:hover { transform: translateY(-2px); opacity: .9; }
.jalpi-share__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.jalpi-whatsapp { transition: transform .15s, box-shadow .15s; }
.jalpi-whatsapp:hover { transform: translateY(-1px); }
.jalpi-whatsapp--float:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.3); }
.jalpi-whatsapp:focus-visible { outline: 2px solid #128c7e; outline-offset: 2px; }

.jalpi-yt-item { transition: transform .15s; }
.jalpi-yt-item:hover img { opacity: 1; }
.jalpi-yt-item:hover { transform: scale(1.01); }
.jalpi-yt-item:focus-visible { outline: 3px solid #ff0000; outline-offset: 2px; }

@media (max-width: 767px) {
  /* YouTube gallery collapses to a single column on small screens. */
  .jalpi-yt-gallery { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jalpi-share__btn, .jalpi-whatsapp, .jalpi-yt-item { transition: none !important; }
}

/* Icon Box — the chosen icon inherits font-size; SVG/img scale to 1em so the
   "Icon Size" control drives all icon types consistently. */
.jalpi-iconbox__icon svg,
.jalpi-iconbox__icon img { width: 1em; height: 1em; display: inline-block; }
.jalpi-iconbox__icon i { font-size: inherit; }

/* ── Sticky Section (advanced JS mode) ──────────────────────────────────────
   Only applied to sections promoted to position:fixed by initStickySections().
   Plain CSS-sticky sections never get these classes. Animations use only
   transform/opacity (compositor-friendly). */
.jalpi-sticky--stuck {
  /* Sticky-only background, if the "Sticky Background" control is set. Falls
     back to the element's own background when the var is unset. */
  background: var(--jalpi-sticky-bg, inherit);
  transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;
  will-change: transform, opacity;
}
.jalpi-sticky--stuck.jalpi-sticky--shadow { box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
.jalpi-sticky--stuck.jalpi-sticky--anim-fade  { animation: jalpi-sticky-fade .3s ease both; }
.jalpi-sticky--stuck.jalpi-sticky--anim-slide { animation: jalpi-sticky-slide .3s ease both; }
@keyframes jalpi-sticky-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes jalpi-sticky-slide { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

/* Hide-on-scroll-down: slide the bar up out of view (or down for bottom bars). */
.jalpi-sticky--hidden { transform: translateY(-120%); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .jalpi-share__btn, .jalpi-whatsapp, .jalpi-yt-item,
  .jalpi-sticky--stuck { transition: none !important; animation: none !important; }
  .jalpi-sticky--hidden { transform: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LUXE — WooCommerce storefront theming
   Styles WooCommerce's native shop archive + single product to the dark/gold
   "LUXE" starter-kit look. Scoped under body.jalpi-theme-page so it only applies
   when a Jalpi header/footer template has taken over the page (i.e. imported
   e-commerce kits), never on a plain WooCommerce site.
   ═══════════════════════════════════════════════════════════════════════════ */
body.jalpi-theme-page.woocommerce,
body.jalpi-theme-page.woocommerce-page {
  background: #0a0a0c;
  color: #f5f4f2;
}
body.jalpi-theme-page .woocommerce,
body.jalpi-theme-page.woocommerce-page .woocommerce {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: "Inter", sans-serif;
}
/* Archive title + breadcrumb */
body.jalpi-theme-page .woocommerce-products-header__title,
body.jalpi-theme-page .woocommerce-breadcrumb {
  color: #f5f4f2;
  font-family: "Playfair Display", serif;
}
body.jalpi-theme-page .woocommerce-breadcrumb { font-family:"Inter",sans-serif; color:#a1a1aa; font-size:.85rem; }
body.jalpi-theme-page .woocommerce-breadcrumb a { color:#c9a35b; }

/* Result count + ordering */
body.jalpi-theme-page .woocommerce-result-count,
body.jalpi-theme-page .woocommerce-ordering select {
  color:#a1a1aa; background:#111114; border:1px solid #2b2b33; border-radius:100px; padding:8px 16px;
}

/* ── Self-contained product-grid LAYOUT ──────────────────────────────────────
   WooCommerce's own woocommerce-layout.css does NOT load when [products]/
   [featured_products] shortcodes are used on a NON-WC page (e.g. the LUXE Home).
   Without it ul.products collapses to a plain vertical list with blue link
   titles. These rules give the grid its layout ourselves so shortcode grids on
   any page look identical to the real /shop/ archive. Scoped to jalpi-theme-page.
   Uses CSS grid + !important to beat the theme's default list/link styles. */
body.jalpi-theme-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.jalpi-theme-page ul.products.columns-1 { grid-template-columns: 1fr; }
body.jalpi-theme-page ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
body.jalpi-theme-page ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.jalpi-theme-page ul.products.columns-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
body.jalpi-theme-page ul.products.columns-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 980px) { body.jalpi-theme-page ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { body.jalpi-theme-page ul.products { grid-template-columns: 1fr !important; } }
body.jalpi-theme-page ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important; clear: none !important;
  display: flex; flex-direction: column; text-align: left;
}
/* title/price/link colour overrides — beat the theme's default blue links */
body.jalpi-theme-page ul.products li.product a { color: inherit !important; text-decoration: none !important; }
body.jalpi-theme-page ul.products li.product .woocommerce-loop-product__title { color: #f5f4f2 !important; text-decoration: none !important; }
body.jalpi-theme-page ul.products li.product .price,
body.jalpi-theme-page ul.products li.product .price .amount { color: #e7cf9a !important; text-decoration: none !important; }
body.jalpi-theme-page ul.products li.product .star-rating span { color: #c9a35b; }
/* Hide WooCommerce's screen-reader / duplicate-text bits that become visible
   when WC's own loop CSS isn't present (e.g. shortcode grids, standalone preview):
   the verbose "Original price was… Current price is…" and the loop add-to-cart
   text that duplicates the button. Keep the real .button and the .amount. */
body.jalpi-theme-page ul.products li.product .price .screen-reader-text,
body.jalpi-theme-page ul.products li.product .screen-reader-text,
body.jalpi-theme-page ul.products li.product .price bdi > .screen-reader-text { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
/* Astra theme injects an extra "on-card" add-to-cart button + a thumbnail
   wrapper into the WC loop. Without Astra's own product-card CSS (absent in
   shortcode grids / the standalone preview) that button shows as stray "Add to
   cart" text above the title. Style Astra's wrapper as the image frame and turn
   its on-card button into an overlay on the image, so cards look identical to
   the real archive whether or not Astra's CSS is present. */
body.jalpi-theme-page ul.products li.product .astra-shop-thumbnail-wrap {
  position: relative; display: block; margin: 0 0 16px; overflow: hidden;
}
body.jalpi-theme-page ul.products li.product .astra-shop-thumbnail-wrap img { margin: 0; }
body.jalpi-theme-page ul.products li.product .ast-on-card-button,
body.jalpi-theme-page ul.products li.product a.ast-select-options-trigger {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 4;
  text-align: center; opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease; margin: 0 !important;
}
body.jalpi-theme-page ul.products li.product:hover .ast-on-card-button,
body.jalpi-theme-page ul.products li.product:hover a.ast-select-options-trigger {
  opacity: 1; transform: translateY(0);
}
/* Sale flash sits on the image corner. */
body.jalpi-theme-page ul.products li.product .onsale { position: absolute; z-index: 5; top: 14px; left: 14px; }
body.jalpi-theme-page ul.products li.product .astra-shop-summary-wrap { padding: 0; }

/* Product grid cards */
body.jalpi-theme-page ul.products li.product {
  background: linear-gradient(165deg,#17171b,#111114);
  border: 1px solid #1e1e24;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 46px #04040a;
  padding: 0 0 20px;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s ease;
}
body.jalpi-theme-page ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px #02020a;
}
body.jalpi-theme-page ul.products li.product { position: relative; }
body.jalpi-theme-page ul.products li.product > a.woocommerce-LoopProduct-link,
body.jalpi-theme-page ul.products li.product > a:first-child { display:block; }
body.jalpi-theme-page ul.products li.product a img {
  border-radius: 0; margin: 0 0 16px; aspect-ratio: 4/5; object-fit: cover; width: 100%; display:block;
}
/* add-to-cart button spacing when WC layout css is absent */
body.jalpi-theme-page ul.products li.product a.button,
body.jalpi-theme-page ul.products li.product a.added_to_cart {
  display:inline-block; margin: 8px 20px 0 !important; text-align:center;
}
body.jalpi-theme-page ul.products li.product .woocommerce-loop-product__title {
  font-family: "Playfair Display", serif; font-size: 1.15rem; font-weight: 600;
  color: #f5f4f2; padding: 0 20px; margin: 0 0 6px;
}
body.jalpi-theme-page ul.products li.product .price {
  color: #e7cf9a; font-weight: 700; padding: 0 20px; display: block; margin-bottom: 14px;
}
body.jalpi-theme-page ul.products li.product .price del { color:#71717a; font-weight:400; margin-right:8px; }
body.jalpi-theme-page ul.products li.product .price ins { text-decoration:none; }
body.jalpi-theme-page ul.products li.product .star-rating { margin: 0 20px 10px; color:#c9a35b; }
body.jalpi-theme-page ul.products li.product .onsale {
  background: linear-gradient(135deg,#e7cf9a,#c9a35b,#a8813d); color:#1a1508; border:0;
  border-radius:100px; font-weight:800; letter-spacing:.08em; min-height:0; padding:6px 14px; top:14px; right:14px;
}

/* Buttons (add to cart, etc.) */
body.jalpi-theme-page .woocommerce a.button,
body.jalpi-theme-page .woocommerce button.button,
body.jalpi-theme-page .woocommerce ul.products li.product a.button,
body.jalpi-theme-page .woocommerce .single_add_to_cart_button {
  background: linear-gradient(135deg,#e7cf9a,#c9a35b,#a8813d) !important;
  color: #1a1508 !important; border: 0; border-radius: 100px; font-weight: 700;
  letter-spacing: .02em; padding: 12px 26px; margin: 0 20px; box-shadow: 0 12px 34px #3a2f14;
}
body.jalpi-theme-page .woocommerce a.button:hover,
body.jalpi-theme-page .woocommerce button.button:hover { filter: brightness(1.06); }
body.jalpi-theme-page .woocommerce a.button.added { opacity:.85; }

/* Single product page */
body.jalpi-theme-page .woocommerce div.product .product_title {
  font-family: "Playfair Display", serif; color:#f5f4f2; font-weight:700;
}
body.jalpi-theme-page .woocommerce div.product p.price,
body.jalpi-theme-page .woocommerce div.product span.price { color:#e7cf9a; font-size:1.8rem; font-weight:700; }
body.jalpi-theme-page .woocommerce div.product .woocommerce-product-details__short-description,
body.jalpi-theme-page .woocommerce div.product .woocommerce-Tabs-panel { color:#a1a1aa; }
body.jalpi-theme-page .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background:#111114; border:1px solid #1e1e24; border-radius:100px 100px 0 0;
}
body.jalpi-theme-page .woocommerce div.product .woocommerce-tabs ul.tabs li a { color:#a1a1aa; }
body.jalpi-theme-page .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:#c9a35b; }
body.jalpi-theme-page .woocommerce .quantity .qty {
  background:#0a0a0c; border:1px solid #2b2b33; color:#f5f4f2; border-radius:100px; padding:10px;
}

/* Cart / checkout tables */
body.jalpi-theme-page .woocommerce table.shop_table {
  background:#111114; border:1px solid #1e1e24; border-radius:16px; color:#f5f4f2;
}
body.jalpi-theme-page .woocommerce table.shop_table th,
body.jalpi-theme-page .woocommerce table.shop_table td { border-color:#1e1e24; }
body.jalpi-theme-page .woocommerce .cart_totals h2,
body.jalpi-theme-page .woocommerce-checkout h3 { font-family:"Playfair Display",serif; color:#f5f4f2; }
body.jalpi-theme-page .woocommerce form .form-row input.input-text,
body.jalpi-theme-page .woocommerce form .form-row textarea,
body.jalpi-theme-page .woocommerce form .form-row select {
  background:#0a0a0c; border:1px solid #2b2b33; color:#f5f4f2; border-radius:10px; padding:12px 14px;
}
body.jalpi-theme-page .woocommerce-info,
body.jalpi-theme-page .woocommerce-message { background:#111114; border-top-color:#c9a35b; color:#f5f4f2; }
body.jalpi-theme-page .woocommerce-message a.button { margin:0; }

/* LUXE hero injected above the shop archive grid (see plugin shop_hero()) */
.jalpi-woo-hero {
  position: relative; overflow: hidden; border-radius: 24px; margin: 0 0 40px;
  background: linear-gradient(180deg,#0a0a0c,#111114); border:1px solid #1e1e24;
  padding: 64px 40px; text-align: center;
}
.jalpi-woo-hero::before {
  content:""; position:absolute; top:-120px; left:0; width:min(640px,70vw); height:420px;
  border-radius:50%; background:radial-gradient(circle, rgba(201,163,91,0.16), transparent 62%);
}
.jalpi-woo-hero__eyebrow {
  position:relative; font-size:.72rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:#c9a35b;
}
.jalpi-woo-hero__title {
  position:relative; font-family:"Playfair Display",serif; font-size:clamp(2.2rem,6vw,3.2rem);
  font-weight:700; color:#f5f4f2; margin:14px 0 12px; line-height:1.1;
}
.jalpi-woo-hero__sub { position:relative; color:#a1a1aa; max-width:600px; margin:0 auto; line-height:1.7; }

/* ═══════════════════════════════════════════════════════════════════════════
   LUXE — premium motion system
   Real @keyframes / transform / transition delivered via CLASSES (in this
   stylesheet, so never touched by the inline-style sanitizer). Kit HTML blocks
   add these classes (class survives kses); the classes do the animation.
   All motion is GPU-friendly (transform/opacity/filter) and disabled under
   prefers-reduced-motion at the bottom of this block.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hover lift — cards rise, shadow deepens, hairline warms to gold. */
.luxe-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s ease; will-change: transform; }
.luxe-lift:hover { transform: translateY(-10px); box-shadow: 0 34px 70px #01010a; border-color: #4a3d1f !important; }

/* Image zoom — inside an overflow:hidden frame the img scales gently on hover. */
.luxe-zoom { overflow: hidden; }
.luxe-zoom img { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; }
.luxe-zoom:hover img { transform: scale(1.08); filter: saturate(1.06); }

/* Continuous gentle float (hero product, floating cards, orbs). */
@keyframes luxe-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.luxe-float { animation: luxe-float 6s ease-in-out infinite; will-change: transform; }
.luxe-float--slow { animation: luxe-float 9s ease-in-out infinite; }
.luxe-float--fast { animation: luxe-float 4.5s ease-in-out infinite; }

/* Aurora / gradient drift for backgrounds (background-position animation). */
@keyframes luxe-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.luxe-aurora-bg { background-size: 200% 200%; animation: luxe-aurora 18s ease infinite; }

/* Kicker line grow-in on reveal. */
@keyframes luxe-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Premium button — gold, with a light sweep + arrow slide + glow pulse on hover. */
.luxe-btn { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; will-change: transform; }
.luxe-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 44px #3a2f14; }
.luxe-btn::after { content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); transition: left .7s ease; pointer-events:none; }
.luxe-btn:hover::after { left: 130%; }
.luxe-btn .luxe-arrow { display:inline-block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.luxe-btn:hover .luxe-arrow { transform: translateX(5px); }

/* Ghost/outline button hover — border + bg warm up. */
.luxe-ghost { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease, color .3s ease; }
.luxe-ghost:hover { transform: translateY(-3px); border-color: #c9a35b !important; color: #e7cf9a !important; }

/* Glass panel shine — a soft light sweep crosses the panel on hover. */
.luxe-shine { position: relative; overflow: hidden; }
.luxe-shine::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .9s ease; pointer-events:none; }
.luxe-shine:hover::before { transform: translateX(100%); }

/* Chip / small hover pill. */
.luxe-chip { transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease; }
.luxe-chip:hover { transform: translateY(-2px); }

/* Category card — image zoom + caption slide, gold overlay wash on hover. */
.luxe-cat { overflow: hidden; }
.luxe-cat img { transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.luxe-cat:hover img { transform: scale(1.09); }
.luxe-cat .luxe-cat__cap { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.luxe-cat:hover .luxe-cat__cap { transform: translateY(-6px); }

/* Underline reveal for links/nav. */
.luxe-ul { position: relative; }
.luxe-ul::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:#c9a35b; transform: scaleX(0); transform-origin:left; transition: transform .35s ease; }
.luxe-ul:hover::after { transform: scaleX(1); }

/* Star / rating subtle shimmer on hover of a card. */
.luxe-lift:hover .luxe-stars { filter: drop-shadow(0 0 6px rgba(201,163,91,.5)); }

/* Number counter pop when it enters (paired with the counter widget wrapper). */
@keyframes luxe-pop { 0% { transform: scale(.9); opacity:0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity:1; } }

/* Marquee-free logo strip fade at edges handled inline; this just dims on rest. */

/* ── LUXE motion applied to WooCommerce cards (real store, same premium feel) ─ */
body.jalpi-theme-page ul.products li.product {
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s ease;
}
body.jalpi-theme-page ul.products li.product:hover {
  transform: translateY(-10px);
  box-shadow: 0 34px 70px #01010a;
  border-color: #4a3d1f;
}
body.jalpi-theme-page ul.products li.product a img { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; }
body.jalpi-theme-page ul.products li.product:hover a img { transform: scale(1.06); filter: saturate(1.06); }
body.jalpi-theme-page ul.products li.product .button { position:relative; overflow:hidden; transition: transform .35s ease, box-shadow .35s ease; }
body.jalpi-theme-page ul.products li.product .button:hover { transform: translateY(-2px); }
/* staggered entrance for WC grid items */
@keyframes luxe-card-in { from { opacity:0; transform: translateY(28px); } to { opacity:1; transform: translateY(0); } }
body.jalpi-theme-page ul.products li.product { animation: luxe-card-in .7s cubic-bezier(.16,1,.3,1) both; }
body.jalpi-theme-page ul.products li.product:nth-child(1){animation-delay:.02s}
body.jalpi-theme-page ul.products li.product:nth-child(2){animation-delay:.08s}
body.jalpi-theme-page ul.products li.product:nth-child(3){animation-delay:.14s}
body.jalpi-theme-page ul.products li.product:nth-child(4){animation-delay:.20s}
body.jalpi-theme-page ul.products li.product:nth-child(n+5){animation-delay:.26s}
/* Single product gallery image zoom */
body.jalpi-theme-page .woocommerce div.product .woocommerce-product-gallery__image img { transition: transform 1s cubic-bezier(.16,1,.3,1); }
body.jalpi-theme-page .woocommerce div.product .woocommerce-product-gallery__image:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .luxe-lift, .luxe-zoom img, .luxe-float, .luxe-float--slow, .luxe-float--fast,
  .luxe-aurora-bg, .luxe-btn, .luxe-btn::after, .luxe-ghost, .luxe-shine::before,
  .luxe-cat img, .luxe-cat__cap, .luxe-ul::after, .luxe-chip,
  body.jalpi-theme-page ul.products li.product,
  body.jalpi-theme-page ul.products li.product a img {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* ── Icon hover animations (Social Share "Icon Hover") ─────────────────────
   Lightweight, GPU-friendly hover effects applied per icon via .jalpi-hvr--*.
   Transform/opacity only. Guarded by prefers-reduced-motion below. */
.jalpi-hvr { display: inline-flex; transition: transform .25s ease, box-shadow .25s ease; backface-visibility: hidden; }
.jalpi-hvr--grow:hover        { transform: scale(1.15); }
.jalpi-hvr--shrink:hover      { transform: scale(0.9); }
.jalpi-hvr--pulse:hover       { animation: jalpi-hvr-pulse 1s linear infinite; }
.jalpi-hvr--pulse-grow:hover  { animation: jalpi-hvr-pulse-grow .3s alternate infinite ease-in-out; }
.jalpi-hvr--pulse-shrink:hover{ animation: jalpi-hvr-pulse-shrink .3s alternate infinite ease-in-out; }
.jalpi-hvr--push:hover        { animation: jalpi-hvr-push .3s linear 1; }
.jalpi-hvr--pop:hover         { animation: jalpi-hvr-pop .3s linear 1; }
.jalpi-hvr--bounce-in:hover   { transform: scale(1.2); transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36); }
.jalpi-hvr--bounce-out:hover  { transform: scale(0.8); transition-timing-function: cubic-bezier(0.47,2.02,0.31,-0.36); }
.jalpi-hvr--rotate:hover      { transform: rotate(15deg); }
.jalpi-hvr--float:hover       { transform: translateY(-6px); }
.jalpi-hvr--sink:hover        { transform: translateY(6px); }
.jalpi-hvr--wobble-horizontal:hover { animation: jalpi-hvr-wobble-h 1s ease-in-out 1; }
.jalpi-hvr--wobble-vertical:hover   { animation: jalpi-hvr-wobble-v 1s ease-in-out 1; }
.jalpi-hvr--buzz:hover        { animation: jalpi-hvr-buzz .15s linear infinite; }

@keyframes jalpi-hvr-pulse        { 25% { transform: scale(1.1); } 75% { transform: scale(0.9); } }
@keyframes jalpi-hvr-pulse-grow   { to { transform: scale(1.1); } }
@keyframes jalpi-hvr-pulse-shrink { to { transform: scale(0.9); } }
@keyframes jalpi-hvr-push         { 50% { transform: scale(0.8); } 100% { transform: scale(1); } }
@keyframes jalpi-hvr-pop          { 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes jalpi-hvr-wobble-h     { 16.65% { transform: translateX(6px); } 33.3% { transform: translateX(-5px); } 49.95% { transform: translateX(4px); } 66.6% { transform: translateX(-2px); } 83.25% { transform: translateX(1px); } 100% { transform: translateX(0); } }
@keyframes jalpi-hvr-wobble-v     { 16.65% { transform: translateY(6px); } 33.3% { transform: translateY(-5px); } 49.95% { transform: translateY(4px); } 66.6% { transform: translateY(-2px); } 83.25% { transform: translateY(1px); } 100% { transform: translateY(0); } }
@keyframes jalpi-hvr-buzz         { 50% { transform: translateX(2px) rotate(1deg); } 100% { transform: translateX(-2px) rotate(-1deg); } }

@media (prefers-reduced-motion: reduce) {
  [class*="jalpi-hvr--"]:hover { animation: none !important; transform: none !important; }
}

/* Clip full-bleed marquee so its scrolling track can't add horizontal scroll. */
.jalpi-section.luxe-clip { overflow: hidden; }

/* Kill the ~8px horizontal scroll the full-width section breakout creates:
   .jalpi-section--fw uses width:100vw + margin-left:calc(50% - 50vw), and 100vw
   INCLUDES the scrollbar, so it overflows by the scrollbar width. On imported
   kit pages (body.jalpi-theme-page) clamp full-width sections to the viewport
   content width instead. Scoped so a plain WP/Jalpi page is unaffected. */
body.jalpi-theme-page { overflow-x: hidden; }
body.jalpi-theme-page .jalpi-section--fw {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LUXE v2 — heightened product-card + section motion (scoped to kit pages)
   All GPU-friendly (transform/opacity/filter); honored by reduced-motion below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Product card: deeper lift, gold glow, animated hairline, image parallax-zoom */
body.jalpi-theme-page ul.products li.product {
  position: relative;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s cubic-bezier(.16,1,.3,1), border-color .55s ease;
}
body.jalpi-theme-page ul.products li.product::after {
  content:""; position:absolute; inset:0; border-radius:20px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(201,163,91,0); transition: box-shadow .55s ease;
}
body.jalpi-theme-page ul.products li.product:hover {
  transform: translateY(-12px);
  box-shadow: 0 40px 80px #01010a, 0 0 40px rgba(201,163,91,.10);
  border-color: #4a3d1f;
}
body.jalpi-theme-page ul.products li.product:hover::after { box-shadow: inset 0 0 0 1px rgba(201,163,91,.55); }
body.jalpi-theme-page ul.products li.product img { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; }
body.jalpi-theme-page ul.products li.product:hover img { transform: scale(1.09); filter: saturate(1.08) contrast(1.03); }

/* Title + price rise slightly on hover for a living feel */
body.jalpi-theme-page ul.products li.product .woocommerce-loop-product__title,
body.jalpi-theme-page ul.products li.product .price { transition: transform .45s cubic-bezier(.16,1,.3,1), color .3s ease; }
body.jalpi-theme-page ul.products li.product:hover .woocommerce-loop-product__title { transform: translateY(-2px); }
body.jalpi-theme-page ul.products li.product:hover .price { color:#f0dca6; }

/* Add-to-cart: gold shimmer sweep + lift on hover */
body.jalpi-theme-page ul.products li.product .button { position:relative; overflow:hidden; }
body.jalpi-theme-page ul.products li.product .button::after {
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); transition:left .7s ease; pointer-events:none;
}
body.jalpi-theme-page ul.products li.product:hover .button::after { left:140%; }
body.jalpi-theme-page ul.products li.product .button:hover { transform: translateY(-3px); box-shadow:0 16px 34px #3a2f14; }

/* Sale badge: gentle pulse to draw the eye */
@keyframes luxe-badge-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }
body.jalpi-theme-page ul.products li.product .onsale { animation: luxe-badge-pulse 2.6s ease-in-out infinite; }

/* Staggered scroll-in for grid cards (re-declared stronger) */
@keyframes luxe-card-rise { from { opacity:0; transform: translateY(36px) scale(.98); } to { opacity:1; transform:none; } }
body.jalpi-theme-page ul.products li.product { animation: luxe-card-rise .8s cubic-bezier(.16,1,.3,1) both; }
body.jalpi-theme-page ul.products li.product:nth-child(1){animation-delay:.04s}
body.jalpi-theme-page ul.products li.product:nth-child(2){animation-delay:.12s}
body.jalpi-theme-page ul.products li.product:nth-child(3){animation-delay:.20s}
body.jalpi-theme-page ul.products li.product:nth-child(4){animation-delay:.28s}
body.jalpi-theme-page ul.products li.product:nth-child(n+5){animation-delay:.34s}

/* Animated gold divider (drop between sections as an <hr class="luxe-divider">) */
.luxe-divider { border:0; height:1px; max-width:180px; margin:0 auto;
  background:linear-gradient(90deg,transparent,#c9a35b,transparent); position:relative; overflow:visible; }
.luxe-divider::before { content:""; position:absolute; top:-3px; left:50%; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:#c9a35b; box-shadow:0 0 10px rgba(201,163,91,.8); }

/* Eyebrow kicker: animated leading line that draws in on reveal */
@keyframes luxe-line-grow { from{transform:scaleX(0);} to{transform:scaleX(1);} }

@media (prefers-reduced-motion: reduce) {
  body.jalpi-theme-page ul.products li.product,
  body.jalpi-theme-page ul.products li.product *,
  .luxe-divider::before { animation: none !important; transition: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULSE — bright streetwear kit
   Motion classes (pulse-*) delivered via CSS so the inline-style sanitizer
   never touches them, plus a LIGHT WooCommerce storefront theme. All product /
   store overrides are scoped to body.jalpi-kit-pulse so they NEVER bleed onto
   LUXE (dark) or vice-versa; the shared body.jalpi-theme-page layout rules
   (grid, aspect-ratio, Astra fixes) are colour-neutral and are reused as-is.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Motion classes ────────────────────────────────────────────────────────── */
.pulse-lift { transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1); will-change: transform; }
.pulse-lift:hover { transform: translateY(-10px); }

.pulse-zoom { overflow: hidden; }
.pulse-zoom img, img.pulse-zoom { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .5s ease; will-change: transform; display:block; }
.pulse-lift:hover .pulse-zoom img,
.pulse-zoom:hover img, img.pulse-zoom:hover { transform: scale(1.07); filter: saturate(1.05); }

@keyframes pulse-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
.pulse-float { animation: pulse-float 6s ease-in-out infinite; will-change: transform; }

/* Button — coral gradient, light sweep + lift on hover */
.pulse-btn { position: relative; overflow: hidden; transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, filter .3s ease; will-change: transform; }
.pulse-btn:hover { transform: translateY(-3px); filter: brightness(1.04); box-shadow: 0 18px 40px #ffcabb; }
.pulse-btn::after { content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .7s ease; pointer-events:none; }
.pulse-btn:hover::after { left: 130%; }

/* Ghost / outline button */
.pulse-btn-ghost { transition: transform .32s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; }
.pulse-btn-ghost:hover { transform: translateY(-3px); background:#0e0e10 !important; color:#ffffff !important; }

/* Shine sweep for feature blocks */
.pulse-shine { position: relative; overflow: hidden; }
.pulse-shine::before { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .9s ease; pointer-events:none; }
.pulse-shine:hover::before { transform: translateX(100%); }

/* Chip hover */
.pulse-chip { transition: transform .28s ease, background .28s ease, color .28s ease; }
.pulse-chip:hover { transform: translateY(-2px); }

/* Nav underline reveal (coral) */
.pulse-ul { position: relative; }
.pulse-ul::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:#ff4d2e; transform: scaleX(0); transform-origin:left; transition: transform .32s ease; border-radius:2px; }
.pulse-ul:hover::after { transform: scaleX(1); }
.pulse-ul:hover { color:#0e0e10 !important; }

/* ── LIGHT WooCommerce storefront (scoped to PULSE) ───────────────────────────
   Overrides the LUXE dark colours with higher specificity (extra body class). */
body.jalpi-kit-pulse.woocommerce,
body.jalpi-kit-pulse.woocommerce-page { background:#ffffff; color:#0e0e10; }

body.jalpi-kit-pulse .woocommerce-products-header__title { color:#0e0e10; font-family:"Archivo","Inter",sans-serif; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; }
body.jalpi-kit-pulse .woocommerce-breadcrumb { color:#71717a; }
body.jalpi-kit-pulse .woocommerce-breadcrumb a { color:#ff4d2e; }
body.jalpi-kit-pulse .woocommerce-result-count,
body.jalpi-kit-pulse .woocommerce-ordering select { color:#3f3f46; background:#f4f4f5; border:1px solid #e4e4e7; }

/* Product cards — white, rounded, soft shadow, coral price */
body.jalpi-kit-pulse ul.products li.product {
  background:#ffffff !important;
  border:1px solid #e4e4e7 !important;
  border-radius:20px;
  box-shadow:0 14px 34px #e7e7ec !important;
  padding:0 0 20px;
}
body.jalpi-kit-pulse ul.products li.product:hover {
  transform: translateY(-10px);
  box-shadow:0 30px 60px #dcdce3 !important;
  border-color:#d4d4d8 !important;
}
body.jalpi-kit-pulse ul.products li.product::after { box-shadow:none !important; } /* kill LUXE gold ring */
body.jalpi-kit-pulse ul.products li.product:hover::after { box-shadow:none !important; }
body.jalpi-kit-pulse ul.products li.product:hover img { filter: saturate(1.05); }

body.jalpi-kit-pulse ul.products li.product .woocommerce-loop-product__title {
  color:#0e0e10 !important; font-family:"Archivo","Inter",sans-serif; font-weight:800; letter-spacing:-0.01em; font-size:1.05rem;
}
body.jalpi-kit-pulse ul.products li.product:hover .woocommerce-loop-product__title { color:#0e0e10 !important; }
body.jalpi-kit-pulse ul.products li.product .price,
body.jalpi-kit-pulse ul.products li.product .price .amount { color:#ff4d2e !important; font-weight:800; }
body.jalpi-kit-pulse ul.products li.product:hover .price { color:#ff4d2e !important; }
body.jalpi-kit-pulse ul.products li.product .price del { color:#a1a1aa !important; }
body.jalpi-kit-pulse ul.products li.product .star-rating,
body.jalpi-kit-pulse ul.products li.product .star-rating span { color:#ff7a1a !important; }

/* Sale badge — coral gradient */
body.jalpi-kit-pulse ul.products li.product .onsale {
  background: linear-gradient(135deg,#ff7a1a,#ff4d2e) !important; color:#ffffff !important;
}

/* Buttons everywhere → coral gradient on white */
body.jalpi-kit-pulse .woocommerce a.button,
body.jalpi-kit-pulse .woocommerce button.button,
body.jalpi-kit-pulse .woocommerce ul.products li.product a.button,
body.jalpi-kit-pulse .woocommerce .single_add_to_cart_button {
  background: linear-gradient(135deg,#ff7a1a,#ff4d2e) !important;
  color:#ffffff !important; box-shadow:0 12px 30px #ffcabb !important;
}
body.jalpi-kit-pulse ul.products li.product .button::after { display:none; } /* use pulse sweep only via .pulse-btn if added */

/* Single product page */
body.jalpi-kit-pulse .woocommerce div.product .product_title { color:#0e0e10 !important; font-family:"Archivo","Inter",sans-serif; font-weight:800; letter-spacing:-0.02em; }
body.jalpi-kit-pulse .woocommerce div.product p.price,
body.jalpi-kit-pulse .woocommerce div.product span.price { color:#ff4d2e !important; }
body.jalpi-kit-pulse .woocommerce div.product .woocommerce-product-details__short-description,
body.jalpi-kit-pulse .woocommerce div.product .woocommerce-Tabs-panel { color:#3f3f46 !important; }
body.jalpi-kit-pulse .woocommerce div.product .woocommerce-tabs ul.tabs li { background:#f4f4f5 !important; border:1px solid #e4e4e7 !important; }
body.jalpi-kit-pulse .woocommerce div.product .woocommerce-tabs ul.tabs li a { color:#3f3f46 !important; }
body.jalpi-kit-pulse .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color:#ff4d2e !important; }
body.jalpi-kit-pulse .woocommerce .quantity .qty { background:#ffffff !important; border:1px solid #d4d4d8 !important; color:#0e0e10 !important; }

/* Cart / checkout */
body.jalpi-kit-pulse .woocommerce table.shop_table { background:#ffffff !important; border:1px solid #e4e4e7 !important; color:#0e0e10 !important; }
body.jalpi-kit-pulse .woocommerce table.shop_table th,
body.jalpi-kit-pulse .woocommerce table.shop_table td { border-color:#e4e4e7 !important; }
body.jalpi-kit-pulse .woocommerce .cart_totals h2,
body.jalpi-kit-pulse .woocommerce-checkout h3 { color:#0e0e10 !important; font-family:"Archivo","Inter",sans-serif; font-weight:800; }
body.jalpi-kit-pulse .woocommerce form .form-row input.input-text,
body.jalpi-kit-pulse .woocommerce form .form-row textarea,
body.jalpi-kit-pulse .woocommerce form .form-row select { background:#ffffff !important; border:1px solid #d4d4d8 !important; color:#0e0e10 !important; }
body.jalpi-kit-pulse .woocommerce-info,
body.jalpi-kit-pulse .woocommerce-message { background:#fff5f0 !important; border-top-color:#ff4d2e !important; color:#0e0e10 !important; }

/* PULSE shop hero — light, coral accent */
.jalpi-woo-hero--pulse { background: linear-gradient(135deg,#fff5f0,#ffffff) !important; border:1px solid #f0dccf !important; }
.jalpi-woo-hero--pulse::before { background: radial-gradient(circle, rgba(255,77,46,0.12), transparent 62%) !important; }
.jalpi-woo-hero--pulse .jalpi-woo-hero__eyebrow { color:#ff4d2e !important; }
.jalpi-woo-hero--pulse .jalpi-woo-hero__title { font-family:"Archivo","Inter",sans-serif !important; color:#0e0e10 !important; font-weight:800; letter-spacing:-0.02em; text-transform:uppercase; }
.jalpi-woo-hero--pulse .jalpi-woo-hero__sub { color:#3f3f46 !important; }

/* Counter — the element exposes colour/size/weight via cnt_* settings but has no
   font-family control, so the display face is applied here. */
.pulse-counter .jalpi-counter__number {
  font-family: "Archivo", "Inter", -apple-system, sans-serif;
  letter-spacing: -0.03em;
}
.pulse-counter .jalpi-counter__label {
  font-family: "Inter", -apple-system, sans-serif;
  letter-spacing: 0.01em;
}

/* Coral marquee bar text */
body.jalpi-kit-pulse .pulse-marquee-bar,
.pulse-marquee-bar { color:#ffffff; }
.pulse-marquee-bar .jalpi-marquee, .pulse-marquee-bar .jalpi-marquee * { color:#ffffff !important; font-weight:800; letter-spacing:.08em; }

@media (prefers-reduced-motion: reduce) {
  .pulse-lift, .pulse-zoom img, .pulse-float, .pulse-btn, .pulse-btn::after,
  .pulse-btn-ghost, .pulse-shine::before, .pulse-chip, .pulse-ul::after,
  body.jalpi-kit-pulse ul.products li.product,
  body.jalpi-kit-pulse ul.products li.product * {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOVA — premium digital-agency kit
   Motion + surface treatment delivered as CSS classes (never touched by the
   inline-style sanitizer). Identity rules are scoped to body.jalpi-kit-nova so
   they cannot bleed into LUXE/PULSE; generic nova-* motion classes are only
   ever applied by NOVA nodes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gradient text (background-clip is stripped from inline styles) ───────── */
.nova-gradtext,
.nova-gradtext * {
  background: linear-gradient(135deg, #a78bfa, #7c5cff 40%, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Aurora / mesh drift for section + footer backgrounds ─────────────────── */
@keyframes nova-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.nova-aurora { background-size: 220% 220%; animation: nova-aurora 22s ease infinite; }

/* ── Hover lift (cards, tiles, list rows) ────────────────────────────────── */
.nova-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .5s ease; will-change: transform; }
.nova-lift:hover { transform: translateY(-10px); box-shadow: 0 34px 70px #02020a; }

/* ── Image zoom on hover ─────────────────────────────────────────────────── */
.nova-zoom { overflow: hidden; }
.nova-zoom img, img.nova-zoom { transition: transform 1.15s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; display: block; }
.nova-lift:hover .nova-zoom img,
.nova-zoom:hover img, img.nova-zoom:hover { transform: scale(1.07); filter: saturate(1.06); }

/* Dimmed "before" image in the before/after comparison */
.nova-dim img, img.nova-dim { filter: grayscale(.55) brightness(.82); }
.nova-dim:hover img, img.nova-dim:hover { filter: grayscale(0) brightness(1); }

/* ── Floating objects ────────────────────────────────────────────────────── */
@keyframes nova-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
.nova-float { animation: nova-float 6.5s ease-in-out infinite; will-change: transform; }

/* ── Glassmorphism surface ───────────────────────────────────────────────── */
.nova-glass { position: relative; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nova-glass::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.06);
}

/* ── Buttons: gradient sweep + magnetic-style lift + glow ────────────────── */
.nova-btn { position: relative; overflow: hidden; transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease; will-change: transform; }
.nova-btn:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 20px 48px #2a1a6b; }
.nova-btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); transition: left .75s ease; pointer-events: none;
}
.nova-btn:hover::after { left: 140%; }

.nova-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, color .3s ease; }
.nova-btn-ghost:hover { transform: translateY(-3px); border-color: #7c5cff !important; color: #ffffff !important; background: rgba(124,92,255,.10) !important; }

/* ── Shine sweep for feature/CTA blocks ─────────────────────────────────── */
.nova-shine { position: relative; overflow: hidden; }
.nova-shine::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none;
}
.nova-shine:hover::before { transform: translateX(100%); }

/* ── Chips / category pills ─────────────────────────────────────────────── */
.nova-chip { transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.nova-chip:hover { transform: translateY(-2px); border-color: #7c5cff !important; }
.nova-cat:hover { background: #1a1a2c !important; }

/* ── Nav + footer link underline reveal ─────────────────────────────────── */
.nova-navlink { position: relative; transition: color .3s ease; }
.nova-navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
  background: linear-gradient(135deg,#7c5cff,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .34s ease;
}
.nova-navlink:hover::after { transform: scaleX(1); }
.nova-navlink:hover { color: #f6f6fa !important; }
.nova-flink { transition: color .28s ease, padding-left .28s ease; }
.nova-flink:hover { color: #22d3ee !important; padding-left: 4px; }

/* Logo mark glow pulse */
@keyframes nova-glow { 0%,100% { box-shadow: 0 8px 26px #2a1a6b; } 50% { box-shadow: 0 10px 38px #4a2fa8; } }
.nova-logo-mark { animation: nova-glow 4.5s ease-in-out infinite; }

/* ── Clip marquee so its track cannot add horizontal scroll ─────────────── */
.jalpi-section.nova-clip { overflow: hidden; }

/* ── Counter (element has no font-family control) ───────────────────────── */
.nova-counter .jalpi-counter__number { font-family: "Sora", "Inter", -apple-system, sans-serif; letter-spacing: -.035em; }
.nova-counter .jalpi-counter__label  { font-family: "Inter", -apple-system, sans-serif; }

/* ── Kit-scoped widget theming (dark surfaces for schema widgets) ────────── */
body.jalpi-kit-nova .jalpi-faq__item,
body.jalpi-kit-nova .jalpi-accordion__item {
  background: #0e0e18 !important; border: 1px solid #1e1e2e !important;
  border-radius: 16px !important; margin-bottom: 12px;
}
/* Class names below were read off the rendered DOM, not guessed: the FAQ
   question/answer are __q/__a, testimonial cards are .jalpi-tc, and the pricing
   card root is .jalpi-pricing__head's parent — hence the attribute selector. */
body.jalpi-kit-nova .jalpi-faq__q,
body.jalpi-kit-nova .jalpi-faq__q-text,
body.jalpi-kit-nova .jalpi-accordion__title { color: #f6f6fa !important; font-weight: 700; }
body.jalpi-kit-nova .jalpi-faq__a,
body.jalpi-kit-nova .jalpi-faq__body,
body.jalpi-kit-nova .jalpi-accordion__body { color: #a9a9c2 !important; }
body.jalpi-kit-nova .jalpi-faq__icon { color: #7c5cff !important; }

/* Testimonial cards (.jalpi-tc) */
body.jalpi-kit-nova .jalpi-tc {
  background: linear-gradient(160deg,#12121e,#0b0b14) !important;
  border: 1px solid #1e1e2e !important; border-radius: 20px !important; color: #a9a9c2 !important;
}
body.jalpi-kit-nova .jalpi-tc__quote { color: #cfcfe0 !important; }
body.jalpi-kit-nova .jalpi-tc__name  { color: #f6f6fa !important; }
body.jalpi-kit-nova .jalpi-tc__role  { color: #7a7a95 !important; }
body.jalpi-kit-nova .jalpi-tc__qmark { color: #7c5cff !important; opacity: .5; }
body.jalpi-kit-nova .jalpi-tc__star.is-filled { color: #22d3ee !important; }

/* Pricing card: style the wrapper that contains the pricing head */
body.jalpi-kit-nova .jalpi-el:has(> .jalpi-pricing__head),
body.jalpi-kit-nova .jalpi-pricing {
  background: linear-gradient(160deg,#12121e,#0b0b14) !important;
  border: 1px solid #1e1e2e !important; border-radius: 24px !important; color: #a9a9c2 !important;
}
body.jalpi-kit-nova .jalpi-pricing__name,
body.jalpi-kit-nova .jalpi-pricing__amount,
body.jalpi-kit-nova .jalpi-pricing__currency,
body.jalpi-kit-nova .jalpi-pricing__price { color: #f6f6fa !important; }
body.jalpi-kit-nova .jalpi-pricing__tagline,
body.jalpi-kit-nova .jalpi-pricing__period,
body.jalpi-kit-nova .jalpi-pricing__feature { color: #a9a9c2 !important; }
body.jalpi-kit-nova .jalpi-pricing__check { color: #22d3ee !important; }
body.jalpi-kit-nova .jalpi-pricing__badge {
  background: linear-gradient(135deg,#7c5cff,#22d3ee) !important; color: #fff !important;
}
body.jalpi-kit-nova .jalpi-pricing__cta {
  background: linear-gradient(135deg,#7c5cff,#22d3ee) !important; color: #fff !important;
  border: 0 !important; border-radius: 100px !important; font-weight: 700 !important;
}

body.jalpi-kit-nova .jalpi-timeline__item,
body.jalpi-kit-nova .jalpi-timeline__text    { color: #a9a9c2 !important; }
body.jalpi-kit-nova .jalpi-timeline__title   { color: #f6f6fa !important; }
body.jalpi-kit-nova .jalpi-timeline__date    { color: #22d3ee !important; font-weight: 700; }
body.jalpi-kit-nova .jalpi-timeline__content {
  background: linear-gradient(160deg,#12121e,#0b0b14) !important;
  border: 1px solid #1e1e2e !important; border-radius: 16px !important;
}
body.jalpi-kit-nova .jalpi-timeline__marker {
  background: linear-gradient(135deg,#7c5cff,#22d3ee) !important; border-color: #1e1e2e !important;
}

body.jalpi-kit-nova .jalpi-table,
body.jalpi-kit-nova .jalpi-table table { color: #a9a9c2 !important; border-color: #1e1e2e !important; }
body.jalpi-kit-nova .jalpi-table__th {
  color: #f6f6fa !important; border-color: #1e1e2e !important; background: #0e0e18 !important;
}
body.jalpi-kit-nova .jalpi-table__td  { color: #a9a9c2 !important; border-color: #1e1e2e !important; }
/* Kill the light zebra striping the table ships with — it renders as white
   bands on a dark kit. Covers nth-child striping and any --alt/--stripe class. */
body.jalpi-kit-nova .jalpi-table__row,
body.jalpi-kit-nova .jalpi-table__row:nth-child(even),
body.jalpi-kit-nova .jalpi-table__row:nth-child(odd),
body.jalpi-kit-nova .jalpi-table tr,
body.jalpi-kit-nova .jalpi-table tr:nth-child(even),
body.jalpi-kit-nova .jalpi-table tbody tr:nth-child(even) {
  background: transparent !important; border-color: #1e1e2e !important;
}
body.jalpi-kit-nova .jalpi-table__row:nth-child(even) .jalpi-table__td,
body.jalpi-kit-nova .jalpi-table tbody tr:nth-child(even) td {
  background: #0b0b14 !important;
}
body.jalpi-kit-nova .jalpi-table__row:hover .jalpi-table__td { background: #14141f !important; }

body.jalpi-kit-nova .jalpi-tabs__nav button,
body.jalpi-kit-nova .jalpi-tabs__label { color: #a9a9c2 !important; }
body.jalpi-kit-nova .jalpi-tabs__nav button.is-active,
body.jalpi-kit-nova .jalpi-tabs__label.is-active { color: #22d3ee !important; border-color: #7c5cff !important; }
body.jalpi-kit-nova .jalpi-tabs__panel { color: #a9a9c2 !important; }

body.jalpi-kit-nova .jalpi-progress__bar { background: #14141f !important; }
body.jalpi-kit-nova .jalpi-progress__title { color: #f6f6fa !important; }

body.jalpi-kit-nova .jalpi-marquee, body.jalpi-kit-nova .jalpi-marquee * {
  color: #7a7a95 !important; font-weight: 800; letter-spacing: .12em; font-size: 1.05rem;
}

/* Dark base so theme defaults cannot flash white behind kit sections */
body.jalpi-kit-nova { background: #07070c; }

@media (prefers-reduced-motion: reduce) {
  .nova-aurora, .nova-lift, .nova-zoom img, .nova-float, .nova-btn, .nova-btn::after,
  .nova-btn-ghost, .nova-shine::before, .nova-chip, .nova-navlink::after,
  .nova-flink, .nova-logo-mark {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Advanced motion primitives (engine-level, kit-agnostic)
   Paired with the JS in assets/js/jalpi-frontend.js:
     - initSplitText()      → data-jalpi-split="chars|words|lines"
     - trigger 'ripple'     → .jalpi-ripple spans
     - trigger 'tilt'       → .jalpi-tilt--glare
     - trigger 'pin'        → --jalpi-pin-progress
     - trigger 'hscroll'    → --jalpi-hscroll-progress
   All additive: nothing here applies unless a kit opts in.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Split text ──────────────────────────────────────────────────────────── */
.jalpi-split__w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Prevent descenders (g, y, p) being clipped by the mask. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.jalpi-split__p {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  opacity: 0;
  will-change: transform, opacity;
}
.jalpi-split--in .jalpi-split__p {
  animation-name: jalpi-split-rise;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  animation-fill-mode: forwards;
}
@keyframes jalpi-split-rise {
  from { transform: translateY(110%) rotate(4deg); opacity: 0; }
  to   { transform: translateY(0) rotate(0); opacity: 1; }
}

/* ── Ripple ──────────────────────────────────────────────────────────────── */
@keyframes jalpi-ripple {
  to { transform: scale(1); opacity: 0; }
}

/* ── Tilt glare ──────────────────────────────────────────────────────────── */
.jalpi-tilt--glare { position: relative; }
.jalpi-tilt--glare::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle at var(--jalpi-glare-x, 50%) var(--jalpi-glare-y, 50%),
              rgba(255, 255, 255, .22), transparent 55%);
}
.jalpi-tilt--glare:hover::after { opacity: 1; }

/* ── Horizontal scroll track ─────────────────────────────────────────────── */
.jalpi-hscroll__track { display: flex !important; flex-wrap: nowrap !important; }
/* Children must not shrink, or a nowrap track compresses every card to fit the
   viewport and there is nothing left to scroll. The column element sets its own
   flex-basis from its width setting, so this needs to outrank it. */
.jalpi-hscroll__track > .jalpi-column,
.jalpi-hscroll__track > * {
  flex: 0 0 auto !important;
  max-width: none !important;
}

/* ── Reduced motion: disable every advanced primitive ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .jalpi-split__p {
    transform: none !important; opacity: 1 !important; animation: none !important;
  }
  .jalpi-ripple { display: none !important; }
  .jalpi-tilt--glare::after { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOOPS — basketball academy kit (EDITORIAL LIGHT THEME)
   Design language: oversized condensed uppercase display type set left, flat
   print-like surfaces, desaturated photography that colours on hover,
   asymmetric staggered rows, diagonal-cut colour bands, and angular CSS colour
   shards layered behind imagery.
   Widget theming is scoped to body.jalpi-kit-hoops so it cannot bleed into the
   dark NOVA/LUXE kits or the light PULSE kit.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Display type ────────────────────────────────────────────────────────── */
.hoops-display { font-family: "Archivo Black","Archivo","Inter",sans-serif; }

/* Outlined display word — used to break up the big hero lines. */
.hoops-outline {
  color: transparent !important;
  -webkit-text-stroke: 2px #12182b;
  text-stroke: 2px #12182b;
}
.hoops-outline--orange { -webkit-text-stroke-color: #e63946; text-stroke-color: #e63946; }
.hoops-outline--white  { -webkit-text-stroke-color: #ffffff; text-stroke-color: #ffffff; }

/* Gradient-filled display text */
.hoops-gradtext,
.hoops-gradtext * {
  background: linear-gradient(135deg, #f2545b, #e63946 55%, #c1121f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Angled colour shards — the signature graphic device ─────────────────────
   Angular blocks built with clip-path, layered behind/around imagery. These
   replace the reference kit's hand-made torn-paper collage with an original,
   fully responsive, asset-free equivalent. */
.hoops-shard { position: relative; }
.hoops-shard::before,
.hoops-shard::after {
  content: ""; position: absolute; pointer-events: none; z-index: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.hoops-shard::before {
  width: 46%; aspect-ratio: 1 / 1; top: -7%; left: -8%;
  background: linear-gradient(135deg, #e63946, #f4a261);
  clip-path: polygon(18% 0%, 100% 12%, 86% 88%, 4% 100%, 0% 44%);
  opacity: .92;
}
.hoops-shard::after {
  width: 34%; aspect-ratio: 1 / 1; bottom: -9%; right: -7%;
  background: linear-gradient(135deg, #2a9d8f, #12182b);
  clip-path: polygon(0% 20%, 78% 0%, 100% 70%, 34% 100%);
  opacity: .88;
}
.hoops-shard:hover::before { transform: translate(-8px, -8px) rotate(-4deg); }
.hoops-shard:hover::after  { transform: translate(8px, 8px) rotate(4deg); }
/* The photo itself must sit above the shards. */
.hoops-shard > * { position: relative; z-index: 1; }

/* Mirrored variant so alternating rows do not look identical. */
.hoops-shard--flip::before { left: auto; right: -8%; clip-path: polygon(0% 12%, 82% 0%, 100% 44%, 96% 100%, 14% 88%); }
.hoops-shard--flip::after  { right: auto; left: -7%;  clip-path: polygon(22% 0%, 100% 20%, 66% 100%, 0% 70%); }

/* Small single shard for tighter spots */
.hoops-shard--sm::before { width: 30%; top: -5%; left: -5%; }
.hoops-shard--sm::after  { display: none; }

/* ── Diagonal-cut colour bands ───────────────────────────────────────────── */
.hoops-diagonal {
  clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%);
}
.hoops-diagonal--top    { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
.hoops-diagonal--bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }

/* ── Court-line graphics ─────────────────────────────────────────────────── */
.hoops-court-bg { position: relative; overflow: hidden; }
.hoops-court-bg::before {
  content: ""; position: absolute; top: -22%; right: -10%;
  width: 480px; height: 480px; max-width: 60vw; max-height: 60vw;
  border: 2px solid rgba(230,57,70, .12); border-radius: 50%;
  pointer-events: none;
}
.hoops-court-bg::after {
  content: ""; position: absolute; bottom: -30%; left: -8%;
  width: 400px; height: 400px; max-width: 52vw; max-height: 52vw;
  border: 2px solid rgba(18, 24, 43, .07); border-radius: 50%;
  pointer-events: none;
}
.hoops-footer.hoops-court-bg::before { border-color: rgba(230,57,70, .18); }
.hoops-footer.hoops-court-bg::after  { border-color: rgba(255, 255, 255, .07); }

/* ── Editorial imagery: desaturated, colours on hover ────────────────────── */
.hoops-zoom { overflow: hidden; }
.hoops-zoom img, img.hoops-zoom {
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .7s ease;
  will-change: transform; display: block;
  filter: grayscale(.85) contrast(1.06);
}
.hoops-zoom:hover img, img.hoops-zoom:hover,
.hoops-lift:hover .hoops-zoom img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.02) saturate(1.05);
}
/* Opt out where full colour matters (gallery, hero) */
.hoops-colour img, img.hoops-colour { filter: none !important; }

/* ── Flat editorial rows: an orange rule that draws in on scroll ─────────── */
.hoops-rule { position: relative; padding-top: 26px !important; }
.hoops-rule::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 4px;
  background: #e63946; transform-origin: left;
  animation: hoops-rule-in .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hoops-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Hover lift, used sparingly (rows and tiles, not every block) ────────── */
.hoops-lift { transition: transform .55s cubic-bezier(.16,1,.3,1); will-change: transform; }
.hoops-lift:hover { transform: translateY(-8px); }

/* Flat editorial tile: hairline border, orange rule grows on hover */
.hoops-tile { position: relative; transition: border-color .45s ease, background .45s ease; }
.hoops-tile::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0;
  background: #e63946; transition: width .5s cubic-bezier(.16,1,.3,1);
}
.hoops-tile:hover::after { width: 100%; }
.hoops-tile:hover { border-color: #12182b !important; }

/* Oversized index number behind a tile (editorial device) */
.hoops-num {
  font-family: "Archivo Black","Archivo",sans-serif;
  -webkit-text-stroke: 2px rgba(18,24,43,.14);
  text-stroke: 2px rgba(18,24,43,.14);
  color: transparent !important;
}

/* ── Floating basketball motion ──────────────────────────────────────────── */
@keyframes hoops-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.hoops-float { animation: hoops-float 6.5s ease-in-out infinite; will-change: transform; }

/* ── Buttons: square-ish editorial slab with a sweep ─────────────────────── */
.hoops-btn {
  position: relative; overflow: hidden;
  transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease;
  will-change: transform;
}
.hoops-btn:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 18px 40px #f6bfc4; }
.hoops-btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .75s ease; pointer-events: none;
}
.hoops-btn:hover::after { left: 140%; }

.hoops-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, color .3s ease; }
.hoops-btn-ghost:hover { transform: translateY(-3px); background: #12182b !important; color: #ffffff !important; border-color: #12182b !important; }

/* ── Shine sweep for the big colour blocks ───────────────────────────────── */
.hoops-shine { position: relative; overflow: hidden; }
.hoops-shine::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none;
}
.hoops-shine:hover::before { transform: translateX(100%); }

/* ── Kicker with a leading orange rule ───────────────────────────────────── */
.hoops-kicker { position: relative; display: inline-block; }

/* ── Chips / category pills ──────────────────────────────────────────────── */
.hoops-chip { transition: transform .3s ease, background .3s ease, border-color .3s ease, color .3s ease; }
.hoops-chip:hover { transform: translateY(-2px); border-color: #e63946 !important; }

/* ── Nav + footer links ──────────────────────────────────────────────────── */
.hoops-navlink { position: relative; transition: color .3s ease; }
.hoops-navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: #e63946;
  transform: scaleX(0); transform-origin: left; transition: transform .34s ease;
}
.hoops-navlink:hover::after { transform: scaleX(1); }
.hoops-navlink:hover { color: #e63946 !important; }
.hoops-flink { transition: color .28s ease, padding-left .28s ease; }
.hoops-flink:hover { color: #e63946 !important; padding-left: 5px; }

@keyframes hoops-glow { 0%,100% { box-shadow: 0 8px 24px #f8ccd0; } 50% { box-shadow: 0 10px 34px #f3a6ac; } }
.hoops-logo-mark { animation: hoops-glow 4.5s ease-in-out infinite; }

/* "Why choose us" rows: orange left rule that grows on hover */
.hoops-whyrow { border-left: 3px solid #e4e8ee; padding-left: 24px !important; transition: border-color .4s ease, padding-left .4s ease; }
.hoops-whyrow:hover { border-left-color: #e63946; padding-left: 32px !important; }

/* ── Clip marquee/hscroll tracks ─────────────────────────────────────────── */
.jalpi-section.hoops-clip { overflow: hidden; }

/* ── Counter typography ──────────────────────────────────────────────────── */
.hoops-counter .jalpi-counter__number { font-family: "Archivo Black","Archivo",sans-serif; letter-spacing: -.04em; }
.hoops-counter .jalpi-counter__label  { font-family: "Inter",sans-serif; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem !important; }

/* ── Kit-scoped widget theming (flat, editorial, light) ──────────────────── */
body.jalpi-kit-hoops { background: #ffffff; }

body.jalpi-kit-hoops .jalpi-faq__item {
  background: #ffffff !important; border: 0 !important;
  border-bottom: 1px solid #e4e8ee !important; border-radius: 0 !important;
  margin-bottom: 0; box-shadow: none !important;
}
body.jalpi-kit-hoops .jalpi-faq__q,
body.jalpi-kit-hoops .jalpi-faq__q-text {
  color: #12182b !important; font-weight: 800;
  font-family: "Archivo","Inter",sans-serif; font-size: 1.06rem;
}
body.jalpi-kit-hoops .jalpi-faq__a,
body.jalpi-kit-hoops .jalpi-faq__body { color: #4a5568 !important; }
body.jalpi-kit-hoops .jalpi-faq__icon { color: #e63946 !important; }

/* Testimonials — flat, no card chrome */
body.jalpi-kit-hoops .jalpi-tc {
  background: transparent !important; border: 0 !important;
  border-top: 3px solid #e63946 !important; border-radius: 0 !important;
  color: #4a5568 !important; box-shadow: none !important; padding-top: 26px !important;
}
body.jalpi-kit-hoops .jalpi-tc__quote { color: #12182b !important; font-size: 1.02rem; line-height: 1.75; }
body.jalpi-kit-hoops .jalpi-tc__name  { color: #12182b !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
body.jalpi-kit-hoops .jalpi-tc__role  { color: #7b8794 !important; font-size: .84rem; }
body.jalpi-kit-hoops .jalpi-tc__qmark { display: none !important; }
body.jalpi-kit-hoops .jalpi-tc__star.is-filled { color: #e63946 !important; }

/* Pricing — flat slabs, featured one inverted to navy */
body.jalpi-kit-hoops .jalpi-el:has(> .jalpi-pricing__head),
body.jalpi-kit-hoops .jalpi-pricing {
  background: #ffffff !important; border: 1px solid #e4e8ee !important;
  border-radius: 0 !important; color: #4a5568 !important; box-shadow: none !important;
  transition: border-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
body.jalpi-kit-hoops .jalpi-el:has(> .jalpi-pricing__head):hover,
body.jalpi-kit-hoops .jalpi-pricing:hover { border-color: #12182b !important; transform: translateY(-8px); }
body.jalpi-kit-hoops .jalpi-pricing__name {
  color: #12182b !important; font-family: "Archivo Black","Archivo",sans-serif;
  text-transform: uppercase; letter-spacing: -.01em;
}
body.jalpi-kit-hoops .jalpi-pricing__amount,
body.jalpi-kit-hoops .jalpi-pricing__currency,
body.jalpi-kit-hoops .jalpi-pricing__price {
  color: #12182b !important; font-family: "Archivo Black","Archivo",sans-serif;
}
body.jalpi-kit-hoops .jalpi-pricing__tagline,
body.jalpi-kit-hoops .jalpi-pricing__period,
body.jalpi-kit-hoops .jalpi-pricing__feature { color: #4a5568 !important; }
body.jalpi-kit-hoops .jalpi-pricing__check { color: #e63946 !important; }
body.jalpi-kit-hoops .jalpi-pricing__badge,
body.jalpi-kit-hoops .jalpi-pricing__cta {
  background: #e63946 !important; color: #fff !important;
  border: 0 !important; border-radius: 0 !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem !important;
}

/* Timeline — flat with a strong orange spine */
body.jalpi-kit-hoops .jalpi-timeline__item,
body.jalpi-kit-hoops .jalpi-timeline__text  { color: #4a5568 !important; }
body.jalpi-kit-hoops .jalpi-timeline__title {
  color: #12182b !important; font-family: "Archivo","Inter",sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
}
body.jalpi-kit-hoops .jalpi-timeline__date {
  color: #e63946 !important; font-weight: 900;
  font-family: "Archivo Black","Archivo",sans-serif; font-size: 1.1rem;
}
body.jalpi-kit-hoops .jalpi-timeline__content {
  background: transparent !important; border: 0 !important;
  border-left: 2px solid #e4e8ee !important; border-radius: 0 !important;
  box-shadow: none !important; padding-left: 24px !important;
}
body.jalpi-kit-hoops .jalpi-timeline__marker {
  background: #e63946 !important; border-color: #ffffff !important; border-radius: 0 !important;
}

/* Table — navy header, flat rows */
body.jalpi-kit-hoops .jalpi-table,
body.jalpi-kit-hoops .jalpi-table table { color: #4a5568 !important; border-color: #e4e8ee !important; }
body.jalpi-kit-hoops .jalpi-table__th {
  color: #ffffff !important; background: #12182b !important; border-color: #12182b !important;
  font-weight: 800 !important; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem !important;
}
body.jalpi-kit-hoops .jalpi-table__td  { color: #4a5568 !important; border-color: #e4e8ee !important; }
body.jalpi-kit-hoops .jalpi-table__row:nth-child(even) .jalpi-table__td,
body.jalpi-kit-hoops .jalpi-table tbody tr:nth-child(even) td { background: #f6f7f9 !important; }
body.jalpi-kit-hoops .jalpi-table__row:hover .jalpi-table__td { background: #fdeff0 !important; }

/* Tabs, progress, gallery filter */
body.jalpi-kit-hoops .jalpi-tabs__label { color: #4a5568 !important; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
body.jalpi-kit-hoops .jalpi-tabs__label.is-active { color: #e63946 !important; border-color: #e63946 !important; }
body.jalpi-kit-hoops .jalpi-progress__bar { background: #eef1f5 !important; border-radius: 0 !important; }
body.jalpi-kit-hoops .jalpi-progress__title { color: #12182b !important; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .88rem; }
body.jalpi-kit-hoops .jalpi-gallery__filter-btn {
  background: transparent !important; border: 1px solid #e4e8ee !important;
  color: #4a5568 !important; border-radius: 0 !important;
  padding: 11px 22px !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: .1em; font-size: .78rem !important;
  transition: all .3s ease;
}
body.jalpi-kit-hoops .jalpi-gallery__filter-btn:hover { border-color: #12182b !important; color: #12182b !important; }
body.jalpi-kit-hoops .jalpi-gallery__filter-btn.jalpi-active {
  background: #e63946 !important; color: #ffffff !important; border-color: #e63946 !important;
}
/* Gallery images share the desaturate-on-rest treatment */
body.jalpi-kit-hoops .jalpi-gallery__item img { transition: filter .6s ease, transform 1s cubic-bezier(.16,1,.3,1); filter: grayscale(.8); }
body.jalpi-kit-hoops .jalpi-gallery__item:hover img { filter: grayscale(0); transform: scale(1.05); }

/* Marquee — sponsors strip */
body.jalpi-kit-hoops .jalpi-marquee, body.jalpi-kit-hoops .jalpi-marquee * {
  color: #a3adb9 !important; font-weight: 900; letter-spacing: .16em; font-size: 1.05rem;
  font-family: "Archivo Black","Archivo",sans-serif; text-transform: uppercase;
}

/* Countdown */
body.jalpi-kit-hoops .jalpi-countdown__value {
  color: #12182b !important; font-family: "Archivo Black","Archivo",sans-serif;
}
body.jalpi-kit-hoops .jalpi-countdown__label { color: #7b8794 !important; text-transform: uppercase; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  .hoops-lift, .hoops-zoom img, .hoops-float, .hoops-btn, .hoops-btn::after,
  .hoops-btn-ghost, .hoops-shine::before, .hoops-chip, .hoops-navlink::after,
  .hoops-flink, .hoops-logo-mark, .hoops-whyrow, .hoops-tile::after,
  .hoops-shard::before, .hoops-shard::after, .hoops-rule::before {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* ── CTA band ────────────────────────────────────────────────────────────────
   Colour for the big call-to-action blocks lives here rather than in each
   page's node styles, so the palette is changed in exactly one place. */
.hoops-cta-band {
  background: linear-gradient(135deg, #f2545b, #e63946 55%, #c1121f) !important;
  border-color: #f2545b !important;
}

/* ── Mobile legibility & tap targets ─────────────────────────────────────────
   Fluid clamp() minimums were tuned for desktop, so at 390px the shared
   components bottomed out below comfortable reading size: kickers at 11.4px,
   buttons and pricing CTAs at 12px, counter labels at 11.4px. Anchors also
   collapsed to their line-box (14-22px tall), well under the ~44px touch
   guidance. Raised at <=782px only, so desktop typography is unchanged. */
@media (max-width: 782px) {
  body.jalpi-kit-hoops .hoops-kicker,
  body.jalpi-kit-hoops .jalpi-counter__label {
    font-size: 13px !important;
    letter-spacing: .1em;
  }

  /* Display headings are set in a condensed face with -0.035em tracking; the
     fluid clamp() floor still overflows a 390px column and breaks words mid
     way ("SHOO / T"). Cap against the viewport and stop mid-word breaks. */
  body.jalpi-kit-hoops h1.jalpi-el,
  body.jalpi-kit-hoops h2.jalpi-el {
    font-size: min(11.5vw, 46px) !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  body.jalpi-kit-hoops .jalpi-btn,
  body.jalpi-kit-hoops .jalpi-pricing__cta,
  body.jalpi-kit-hoops .jalpi-pricing__badge {
    font-size: 14px !important;
  }

  /* Give text links and buttons a real touch area without shifting layout. */
  body.jalpi-kit-hoops .jalpi-btn,
  body.jalpi-kit-hoops .jalpi-pricing__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.jalpi-kit-hoops .hoops-flink,
  body.jalpi-kit-hoops .jalpi-footer a {
    display: inline-block;
    padding-block: 9px;
  }

  /* Announcement bar and any inline text links: bare <a> with no class, so
     they inherit the bar's small type and collapse to their line box. */
  body.jalpi-kit-hoops .hoops-announce,
  body.jalpi-kit-hoops .hoops-announce a {
    font-size: 13px !important;
  }
  body.jalpi-kit-hoops .hoops-announce a {
    display: inline-block;
    padding-block: 8px;
  }

  /* Small per-node body text (role labels, meta lines). These render as bare
     DIV.jalpi-el with the size coming from the generated per-node stylesheet,
     so match the leaf element itself rather than a <p> descendant. Headings,
     buttons and kickers are excluded - they have their own rules above. */
  /* NOTE: must exclude headings. `1em` resolves against the PARENT, so a
     blanket .jalpi-el rule collapsed every h1-h6 to ~14px on mobile (the hero
     rendered smaller than its own body copy). Restrict to DIV/P/SPAN leaves. */
  body.jalpi-kit-hoops div.jalpi-el:not(.jalpi-btn):not(.hoops-kicker),
  body.jalpi-kit-hoops p.jalpi-el:not(.jalpi-btn):not(.hoops-kicker) {
    font-size: max(13px, 1em);
  }

  /* Footer column headings and inline links carry no classes of their own. */
  body.jalpi-kit-hoops .hoops-footer h4 {
    font-size: 13px !important;
  }
  body.jalpi-kit-hoops .hoops-footer p a {
    display: inline-block;
    padding-block: 8px;
  }

  /* Widget chrome that only appears on inner pages: table headers, countdown
     labels, gallery filters and social icons all sit below reading size at
     narrow widths. Gallery filters and social links are also tap targets. */
  body.jalpi-kit-hoops .jalpi-table__th,
  body.jalpi-kit-hoops .jalpi-cd__label,
  body.jalpi-kit-hoops .jalpi-gallery__filter-btn {
    font-size: 13px !important;
  }

  body.jalpi-kit-hoops .jalpi-gallery__filter-btn {
    min-height: 40px;
    padding-inline: 14px;
  }

  body.jalpi-kit-hoops .jalpi-social__icon {
    font-size: 15px !important;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ── Minimum legible type (all breakpoints) ──────────────────────────────────
   Footer column headings, nav dropdown labels and the newsletter caption were
   authored at ~11.8px, below comfortable reading size on desktop too. The
   mobile block above only applies at <=782px, so set a floor here. Text only -
   desktop tap targets are left alone since pointers are precise. */
body.jalpi-kit-hoops .hoops-footer h4,
body.jalpi-kit-hoops .hoops-footer h5,
body.jalpi-kit-hoops .hoops-flink {
  font-size: 13px !important;
}


/* ── Column stacking on small screens (plugin-wide) ──────────────────────────
   Columns are emitted as `flex: 0 1 <pct>; max-width: <pct>` from their width
   setting, with no responsive counterpart anywhere in the plugin - so a 48%
   column stayed 48% at 390px, i.e. 168px wide. Display headings then broke
   mid-word ("SHOO / T") and body copy ran 3-4 words per line.

   Stack to full width at the plugin's own mobile breakpoint (767px, matching
   Jalpi_Settings breakpoints.mobile_breakpoint used by compile_css()).
   Applies to every kit, not just HOOPS.

   Excluded: columns inside an hscroll/marquee track, which are deliberately
   sized and scroll horizontally. */
@media (max-width: 767px) {
  .jalpi-container > .jalpi-column:not(.jalpi-hscroll__track > *):not(.jalpi-marquee__track > *) {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}


/* Footer / announce-bar links need a usable hit area at every width, not just
   mobile: they collapse to their 14-22px line box otherwise. Padding only, so
   layout and type are unchanged. */
body.jalpi-kit-hoops .hoops-footer a,
body.jalpi-kit-hoops .hoops-announce a,
body.jalpi-kit-hoops .hoops-flink {
  display: inline-block;
  padding-block: 8px;
}


/* Countdown labels (10px) and social glyphs (6.8px) are below reading size at
   every width, not only on mobile. */
body.jalpi-kit-hoops .jalpi-cd__label {
  font-size: 13px !important;
}
body.jalpi-kit-hoops .jalpi-social__icon {
  font-size: 15px !important;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* Inline links inside body text nodes (e.g. the contact address on the legal
   pages) collapse to their line box. Vertical padding only, so they stay
   inline and do not disturb the surrounding paragraph. */
body.jalpi-kit-hoops div.jalpi-el > a,
body.jalpi-kit-hoops p.jalpi-el > a {
  display: inline-block;
  padding-block: 7px;
}


/* ── Widget chrome minimum sizes (plugin-wide) ───────────────────────────────
   These were first fixed for HOOPS, but the undersized values come from the
   widgets' own defaults, not from any kit — table headers ~11.4px, countdown
   labels 10px, social glyphs 6.8px, gallery filters ~11.4px. Every kit hits
   them, so scope by widget class rather than by kit.

   Kit-specific overrides above still win on specificity where they exist. */
.jalpi-table__th,
.jalpi-cd__label,
.jalpi-gallery__filter-btn,
.jalpi-counter__label {
  font-size: max(13px, 1em);
}

.jalpi-social__icon {
  font-size: max(15px, 1em);
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 767px) {
  /* Touch targets for interactive widget chrome. */
  .jalpi-gallery__filter-btn,
  .jalpi-pricing__cta,
  .jalpi-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ── Horizontal-scroll cards on phones (plugin-wide) ─────────────────────────
   Track children are pinned `flex: 0 0 auto; max-width: none !important` so
   they never shrink — correct on desktop, but a 380px card on a 390px phone
   fills 95% of the screen and overflows its 350px host, so the next card gives
   no visual hint that the strip scrolls. Cap to a peeking width on mobile.
   Overrides the `max-width: none !important` above, hence !important. */
@media (max-width: 767px) {
  .jalpi-hscroll__track > .jalpi-column,
  .jalpi-hscroll__track > * {
    max-width: 78vw !important;
    flex-basis: 78vw !important;
  }
}


/* Remaining widget-default sizes below reading size (11-12px in the base
   stylesheet). Same rationale as the block above: these come from the widgets,
   not from any kit, so every kit inherits them. Uses max() so a kit that
   deliberately sets something larger is not clamped down. */
.jalpi-badge,
.jalpi-pricing__badge,
.jalpi-table__caption,
.jalpi-timeline__date,
.jalpi-tcard__role,
.jalpi-star-rating__label {
  font-size: max(13px, 1em);
}


/* ── Tablet column widths (plugin-wide) ──────────────────────────────────────
   The mobile rule stacks columns at <=767px, but 768-1024px was left with the
   authored desktop percentages. A 48%/44% pair inside a ~700px container gives
   ~300px columns — narrow enough that a fixed-height image (520px) becomes a
   tall portrait box and object-fit:cover crops the subject away horizontally.
   Measured on HOOPS: 0% crop at 767px, 66% at 768px.

   Widen the pair so two columns still sit side by side but each gets real
   room. Anything already narrow (a 3- or 4-up grid) is left alone — only
   pairs authored at >=40% are affected. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Columns emit inline `width:N%;flex:0 1 N%;max-width:N%` — match the flex
     shorthand, which is what is actually in the style attribute. 40-59% means
     a 2-up pair; 3-/4-up grids sit below 40% and are left alone. */
  .jalpi-container > .jalpi-column[style*="flex:0 1 4"],
  .jalpi-container > .jalpi-column[style*="flex:0 1 5"],
  .jalpi-container > .jalpi-column[style*="flex: 0 1 4"],
  .jalpi-container > .jalpi-column[style*="flex: 0 1 5"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}


/* Dense grids (4-, 5-, 6-up authored at 13-31%) stay dense on a tablet, giving
   ~159px columns — narrow enough that fixed-height images crop their subject
   sideways (measured 62% loss on a 159x280 box). Relax to a 2-up on tablet and
   let the <=767px rule take them to 1-up on phones. */
@media (min-width: 768px) and (max-width: 1024px) {
  .jalpi-container > .jalpi-column[style*="flex:0 1 1"],
  .jalpi-container > .jalpi-column[style*="flex:0 1 2"],
  .jalpi-container > .jalpi-column[style*="flex:0 1 3"],
  .jalpi-container > .jalpi-column[style*="flex: 0 1 1"],
  .jalpi-container > .jalpi-column[style*="flex: 0 1 2"],
  .jalpi-container > .jalpi-column[style*="flex: 0 1 3"] {
    flex-basis: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}


/* ── Legibility & touch targets: KIT-AGNOSTIC ────────────────────────────────
   The block further up solved these for HOOPS but was scoped to
   body.jalpi-kit-hoops, so NOVA (and any future kit) inherited none of it.
   Measured on NOVA: 27 sub-12px text nodes and 20 undersized tap targets on
   every page. The offenders are structural, not kit-branded — footer/nav
   anchors, small heading labels, and body text leaves — so match on structure.

   Kit-specific selectors (.hoops-kicker, .nova-*) keep their own rules above;
   these are the floor everything else falls back to. */

/* Minimum readable size for leaf text and small headings anywhere in a kit. */
[class*="jalpi-kit-"] footer h4,
[class*="jalpi-kit-"] footer h5,
[class*="jalpi-kit-"] .jalpi-footer h4,
[class*="jalpi-kit-"] .jalpi-footer h5 {
  font-size: max(13px, 1em);
}

/* Leaf text nodes. div/p only — never a bare .jalpi-el, because `1em`
   resolves against the PARENT and would collapse every heading. */
[class*="jalpi-kit-"] div.jalpi-el:not(.jalpi-btn),
[class*="jalpi-kit-"] p.jalpi-el:not(.jalpi-btn) {
  font-size: max(13px, 1em);
}

/* Footer / nav / inline anchors: give them a real hit area and readable size.
   Padding-block only, so inline flow and layout are unchanged. */
[class*="jalpi-kit-"] footer a,
[class*="jalpi-kit-"] .jalpi-footer a,
[class*="jalpi-kit-"] div.jalpi-el > a,
[class*="jalpi-kit-"] p.jalpi-el > a {
  font-size: max(13px, 1em);
  display: inline-block;
  padding-block: 8px;
}

@media (max-width: 767px) {
  [class*="jalpi-kit-"] .jalpi-btn,
  [class*="jalpi-kit-"] .jalpi-pricing__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* Small-label headings (kickers/eyebrows) are authored as h5/h6 at ~11px in
   every kit. h1-h4 carry real display sizes and must NOT be touched — only
   floor the two levels used for labels. Plus announce-bar links, which sit in
   a bare div with no kit class of their own. */
[class*="jalpi-kit-"] h5.jalpi-el,
[class*="jalpi-kit-"] h6.jalpi-el,
[class*="jalpi-kit-"] [class*="announce"],
[class*="jalpi-kit-"] [class*="announce"] a {
  font-size: max(13px, 1em);
}

/* Header/footer TEMPLATE markup sets font-size inline (e.g. 0.73rem on a
   footer column heading), which outranks any plain rule — hence !important,
   and hence h4 too, since templates use it as a label level. Scoped to
   template regions so page content headings keep their authored sizes. */
[class*="jalpi-kit-"] .jalpi-template h4,
[class*="jalpi-kit-"] .jalpi-template h5,
[class*="jalpi-kit-"] .jalpi-template h6,
[class*="jalpi-kit-"] [class*="-footer"] h4,
[class*="jalpi-kit-"] [class*="-footer"] h5,
[class*="jalpi-kit-"] [class*="-footer"] h6 {
  font-size: max(13px, 1em) !important;
}

[class*="jalpi-kit-"] [class*="announce"] a {
  display: inline-block;
  padding-block: 8px;
}

/* ─── Menu ──────────────────────────────────────────────────────────────────
   Navigation with multi-level dropdowns, a hamburger toggle and an off-canvas
   mobile panel. Structure is a plain nav > ul > li > a tree so the menu is
   crawlable and keyboard-navigable without JS; the script only manages open
   state. Per-node colours, spacing and the mobile breakpoint are emitted by
   Jalpi_Element_Menu::emit_css(). ─────────────────────────────────────────── */

.jalpi-menu {
  position: relative;
}

.jalpi-menu__list,
.jalpi-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jalpi-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.jalpi-menu--vertical .jalpi-menu__list {
  flex-direction: column;
  align-items: stretch;
}

.jalpi-menu__item {
  position: relative;
}

.jalpi-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  line-height: 1.4;
  transition: color .15s ease, background-color .15s ease;
}

/* Focus must stay visible for keyboard users even when a theme resets it. */
.jalpi-menu__link:focus-visible,
.jalpi-menu__toggle:focus-visible,
.jalpi-menu__expand:focus-visible,
.jalpi-menu__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.jalpi-menu__badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ── Submenus ───────────────────────────────────────────────────────────── */

.jalpi-menu__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 200px;
  padding: 6px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  /* Hidden via visibility rather than display so the panel keeps its box for
     measurement, and so opacity can transition. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Levels beyond the first fly out sideways instead of down. */
.jalpi-menu__sub .jalpi-menu__sub {
  top: 0;
  left: 100%;
  transform: translateX(-6px);
}

.jalpi-menu__sub .jalpi-menu__link {
  display: flex;
  width: 100%;
  padding: 9px 16px;
}

/* Open on hover, on keyboard focus anywhere inside, and when the script marks
   the item open — so pointer, keyboard and touch all work. */
.jalpi-menu__item:hover > .jalpi-menu__sub,
.jalpi-menu__item:focus-within > .jalpi-menu__sub,
.jalpi-menu__item.is-open > .jalpi-menu__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.jalpi-menu__sub .jalpi-menu__item:hover > .jalpi-menu__sub,
.jalpi-menu__sub .jalpi-menu__item:focus-within > .jalpi-menu__sub,
.jalpi-menu__sub .jalpi-menu__item.is-open > .jalpi-menu__sub {
  transform: translateX(0);
}

/* Flip a submenu that would overflow the right edge. */
.jalpi-menu__sub.is-flipped {
  left: auto;
  right: 0;
}

.jalpi-menu__sub .jalpi-menu__sub.is-flipped {
  left: auto;
  right: 100%;
}

/* ── Submenu indicator ──────────────────────────────────────────────────── */

.jalpi-menu__expand {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  /* The button sits ON TOP of the link and would otherwise swallow clicks
     aimed at it — on a short label it covers nearly half the hit area, so
     clicking the item would toggle the submenu instead of navigating.
     Desktop opens submenus on :hover and :focus-within already, so the
     button only needs to be interactive in collapsed mode (re-enabled
     below), where it is the only way to expand a branch. */
  pointer-events: none;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__expand {
  pointer-events: auto;
}

.jalpi-menu__indicator {
  display: block;
  width: 8px;
  height: 8px;
  transition: transform .2s ease;
}

.jalpi-menu__indicator--chevron {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.jalpi-menu__indicator--caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.jalpi-menu__indicator--plus {
  position: relative;
  width: 10px;
  height: 10px;
}

.jalpi-menu__indicator--plus::before,
.jalpi-menu__indicator--plus::after {
  content: '';
  position: absolute;
  background: currentColor;
}

.jalpi-menu__indicator--plus::before {
  top: 4px; left: 0; right: 0; height: 2px;
}

.jalpi-menu__indicator--plus::after {
  left: 4px; top: 0; bottom: 0; width: 2px;
  transition: opacity .2s ease;
}

.is-open > .jalpi-menu__expand .jalpi-menu__indicator--plus::after {
  opacity: 0;
}

/* Nested indicators point sideways, matching the flyout direction. */
.jalpi-menu__sub .jalpi-menu__indicator--chevron {
  transform: rotate(-45deg) translate(-2px, 2px);
}

/* ── Hamburger toggle ───────────────────────────────────────────────────── */

.jalpi-menu__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.jalpi-menu__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 18px;
}

.jalpi-menu__toggle-bar {
  display: block;
  height: 2px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

/* Morph the three bars into a cross while the panel is open. */
.jalpi-menu.is-open .jalpi-menu__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.jalpi-menu.is-open .jalpi-menu__toggle-bar:nth-child(2) {
  opacity: 0;
}

.jalpi-menu.is-open .jalpi-menu__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.jalpi-menu__close {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* ── Mobile panel ───────────────────────────────────────────────────────── */

.jalpi-menu__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .25s ease;
}

.jalpi-menu.is-open .jalpi-menu__backdrop {
  opacity: 1;
}

/* Everything below only applies while the menu is in its collapsed mode; the
   script sets data-collapsed from the per-node breakpoint. */
.jalpi-menu[data-collapsed="1"] .jalpi-menu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: min(320px, 85vw);
  padding: 56px 16px 24px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .28s ease, visibility .28s;
}

.jalpi-menu[data-collapsed="1"].is-open .jalpi-menu__panel {
  transform: translateX(0);
  visibility: visible;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__toggle {
  display: inline-flex;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__close,
.jalpi-menu[data-collapsed="1"].is-open .jalpi-menu__backdrop {
  display: block;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__list {
  flex-direction: column;
  align-items: stretch;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__link {
  padding: 12px 10px;
}

/* Collapsed submenus stack inline and are revealed by the expand button,
   rather than floating over the panel. Hover must not open them on touch. */
.jalpi-menu[data-collapsed="1"] .jalpi-menu__sub,
.jalpi-menu[data-collapsed="1"] .jalpi-menu__item:hover > .jalpi-menu__sub,
.jalpi-menu[data-collapsed="1"] .jalpi-menu__item:focus-within > .jalpi-menu__sub {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 0 14px;
  background: transparent;
  display: none;
}

.jalpi-menu[data-collapsed="1"] .jalpi-menu__item.is-open > .jalpi-menu__sub {
  display: block;
}

.jalpi-menu[data-collapsed="1"] .is-open > .jalpi-menu__expand .jalpi-menu__indicator--chevron {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Off-canvas variant sliding from the right instead. */
.jalpi-menu[data-collapsed="1"][data-side="right"] .jalpi-menu__panel {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

.jalpi-menu[data-collapsed="1"][data-side="right"].is-open .jalpi-menu__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .jalpi-menu__panel,
  .jalpi-menu__sub,
  .jalpi-menu__toggle-bar,
  .jalpi-menu__indicator,
  .jalpi-menu__backdrop {
    transition: none !important;
  }
}


/* Header/footer template chrome across every kit. These are bare tags (DIV/P/
   H4/A) whose size is set inline in the template markup, so they need
   !important and cannot be matched by class. Measured on PULSE: announce
   strip 10.5px, footer headings 10.8px, legal line and links 12px.
   Also covers the WooCommerce result count (.count) at 9.8px. */
[class*="jalpi-kit-"] .jalpi-template,
[class*="jalpi-kit-"] .jalpi-template div,
[class*="jalpi-kit-"] .jalpi-template p,
[class*="jalpi-kit-"] .jalpi-template a,
[class*="jalpi-kit-"] footer div,
[class*="jalpi-kit-"] footer p,
[class*="jalpi-kit-"] footer a,
[class*="jalpi-kit-"] .count {
  font-size: max(13px, 1em) !important;
}

/* ─── Breadcrumbs ───────────────────────────────────────────────────────────
   A plain ordered list carrying schema.org BreadcrumbList microdata. The
   current page is a <span>, not a link, so assistive tech is not offered a
   link that goes nowhere. */

.jalpi-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jalpi-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: inherit;
}

.jalpi-breadcrumbs__link {
  color: inherit;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

.jalpi-breadcrumbs__link:hover {
  text-decoration: underline;
}

.jalpi-breadcrumbs__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.jalpi-breadcrumbs__current {
  opacity: .7;
}

.jalpi-breadcrumbs__sep {
  opacity: .45;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.jalpi-menu[data-anchor-nav="1"]) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jalpi-menu__link,
  .jalpi-breadcrumbs__link {
    transition: none !important;
  }
}


/* ─── Advanced Menu ─────────────────────────────────────────────────────────
   A WordPress nav menu with builder-authored mega panels. Independent of
   .jalpi-menu — the two elements share no selectors, so styling or changing
   one can never affect the other.

   Logical properties (inset-inline-*, margin-inline-*) are used throughout so
   the menu mirrors correctly under dir="rtl" with no extra stylesheet. */

.jalpi-advmenu {
  position: relative;
  --jalpi-advmenu-duration: 250ms;
}

.jalpi-advmenu__list,
.jalpi-advmenu__sub {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jalpi-advmenu__list {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.jalpi-advmenu--vertical .jalpi-advmenu__list {
  flex-direction: column;
  align-items: stretch;
}

/* Justify stretches items to fill the row; the others are set per-node from
   the alignment control. */
.jalpi-advmenu--align-justify .jalpi-advmenu__item {
  flex: 1 1 auto;
  text-align: center;
}

.jalpi-advmenu__item {
  position: relative;
}

.jalpi-advmenu__link {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 14px;
  color: inherit;
  text-decoration: none;
  transition: color var(--jalpi-advmenu-duration) ease,
              background-color var(--jalpi-advmenu-duration) ease;
}

.jalpi-advmenu__link:focus-visible,
.jalpi-advmenu__toggle:focus-visible,
.jalpi-advmenu__expand:focus-visible,
.jalpi-advmenu__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The optional menu-item description, rendered under the label. */
.jalpi-advmenu__desc {
  font-size: .8em;
  opacity: .7;
}

/* ── Plain dropdown (non-mega branches) ─────────────────────────────────── */

.jalpi-advmenu__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 100;
  flex-direction: column;
  min-width: 200px;
  padding: 6px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
  /* Hidden via visibility rather than display so the panel keeps its box for
     measurement, and so opacity can transition. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--jalpi-advmenu-duration) ease,
              transform var(--jalpi-advmenu-duration) ease,
              visibility var(--jalpi-advmenu-duration);
}

/* Levels beyond the first fly out sideways instead of down — this is what
   makes unlimited nesting usable. */
.jalpi-advmenu__sub .jalpi-advmenu__sub {
  top: 0;
  inset-inline-start: 100%;
}

.jalpi-advmenu__sub .jalpi-advmenu__link {
  display: flex;
  width: 100%;
  padding: 9px 16px;
}

.jalpi-advmenu__item:hover > .jalpi-advmenu__sub,
.jalpi-advmenu__item:focus-within > .jalpi-advmenu__sub,
.jalpi-advmenu__item.is-open > .jalpi-advmenu__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Flip a submenu that would overflow the inline edge. */
.jalpi-advmenu__sub.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.jalpi-advmenu__sub .jalpi-advmenu__sub.is-flipped {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}

/* ── Mega panel ─────────────────────────────────────────────────────────── */

.jalpi-advmenu__mega {
  position: absolute;
  top: 100%;
  z-index: 100;
  padding: 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--jalpi-advmenu-duration) ease,
              transform var(--jalpi-advmenu-duration) ease,
              visibility var(--jalpi-advmenu-duration);
}

/* Width modes. 'container' tracks the nav's own width; 'full' breaks out to
   the viewport; 'custom' takes an author width from the per-node CSS. */
.jalpi-advmenu__mega--container {
  inset-inline-start: 0;
  min-width: 100%;
}

.jalpi-advmenu__mega--full {
  inset-inline: 0;
  width: 100vw;
  /* Centre a viewport-wide panel regardless of where the item sits. */
  margin-inline-start: calc(50% - 50vw);
  border-radius: 0;
}

.jalpi-advmenu__mega--custom {
  inset-inline-start: 0;
  width: 720px;
  max-width: 100vw;
}

/* Dropdown position, applied to the container/custom widths — a full-width
   panel already spans the viewport. */
.jalpi-advmenu__mega--pos-right:not(.jalpi-advmenu__mega--full) {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega,
.jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega,
.jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega {
  opacity: 1;
  visibility: visible;
}

/* The centred panel must keep its centring translate while open, so its
   closed and open transforms are both written explicitly rather than reset
   to none by the shared animation rules below. */
.jalpi-advmenu__mega--pos-center:not(.jalpi-advmenu__mega--full) {
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-6px);
}

.jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega--pos-center:not(.jalpi-advmenu__mega--full),
.jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega--pos-center:not(.jalpi-advmenu__mega--full),
.jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega--pos-center:not(.jalpi-advmenu__mega--full) {
  transform: translateX(-50%) translateY(0);
}

/* Column grid. --jalpi-mega-cols is set inline per panel from the Columns
   control. */
.jalpi-advmenu__mega-inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--jalpi-mega-cols, 3), minmax(0, 1fr));
  gap: 24px;
}

/* ── Entrance animations ────────────────────────────────────────────────── */

.jalpi-advmenu--anim-none .jalpi-advmenu__mega,
.jalpi-advmenu--anim-none .jalpi-advmenu__sub {
  transition: none;
}

.jalpi-advmenu--anim-slide-down .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center) {
  transform: translateY(-12px);
}

.jalpi-advmenu--anim-slide-up .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center) {
  transform: translateY(12px);
}

.jalpi-advmenu--anim-zoom .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center) {
  transform: scale(.96);
}

.jalpi-advmenu--anim-scale .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center) {
  transform: scaleY(.9);
  transform-origin: top center;
}

.jalpi-advmenu--anim-slide-down .jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-slide-down .jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-slide-down .jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-slide-up .jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-slide-up .jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-slide-up .jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-zoom .jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-zoom .jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-zoom .jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-scale .jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-scale .jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center),
.jalpi-advmenu--anim-scale .jalpi-advmenu__item--mega.is-open > .jalpi-advmenu__mega:not(.jalpi-advmenu__mega--pos-center) {
  transform: none;
}

/* ── Submenu indicator ──────────────────────────────────────────────────── */

.jalpi-advmenu__expand {
  position: absolute;
  inset-inline-end: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Above the breakpoint the indicator is decorative — hover opens the panel —
   so it must not intercept the pointer. It becomes a real control only in the
   collapsed layouts, where it is the accordion toggle. */
.jalpi-advmenu:not([data-collapsed="1"]) .jalpi-advmenu__expand {
  pointer-events: none;
}

.jalpi-advmenu__indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  transition: transform var(--jalpi-advmenu-duration) ease;
}

.jalpi-advmenu__indicator--arrow {
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.jalpi-advmenu__indicator--plus {
  position: relative;
  width: 10px;
  height: 10px;
}

.jalpi-advmenu__indicator--plus::before,
.jalpi-advmenu__indicator--plus::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 10px;
  height: 2px;
  background: currentColor;
  transition: transform var(--jalpi-advmenu-duration) ease;
}

.jalpi-advmenu__indicator--plus::after {
  transform: rotate(90deg);
}

.is-open > .jalpi-advmenu__expand .jalpi-advmenu__indicator--plus::after {
  transform: rotate(0deg);
}

/* Nested indicators point along the fly-out direction, not downward. */
.jalpi-advmenu__sub .jalpi-advmenu__indicator--arrow {
  transform: rotate(-45deg) translate(-1px, 1px);
}

/* ── Hamburger ──────────────────────────────────────────────────────────── */

.jalpi-advmenu__toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

.jalpi-advmenu__toggle-box {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.1em;
  height: .8em;
}

.jalpi-advmenu__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--jalpi-advmenu-duration) ease,
              opacity var(--jalpi-advmenu-duration) ease;
}

/* Hamburger morphs into a close cross while the panel is open. */
.jalpi-advmenu.is-open .jalpi-advmenu__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.jalpi-advmenu.is-open .jalpi-advmenu__toggle-bar:nth-child(2) {
  opacity: 0;
}

.jalpi-advmenu.is-open .jalpi-advmenu__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.jalpi-advmenu__close {
  display: none;
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.jalpi-advmenu__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity var(--jalpi-advmenu-duration) ease;
}

.jalpi-advmenu.is-open .jalpi-advmenu__backdrop {
  opacity: 1;
}

/* ── Collapsed (mobile) layouts ─────────────────────────────────────────────
   Everything below applies only while the menu is collapsed; the script sets
   data-collapsed from the per-node breakpoint. */

.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__toggle {
  display: inline-flex;
}

.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__list {
  flex-direction: column;
  align-items: stretch;
}

.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__link {
  padding: 12px 10px;
}

/* A collapsed mega panel stops floating and becomes part of the flow, so its
   columns stack into a single readable column. */
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__mega,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item--mega:hover > .jalpi-advmenu__mega,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item--mega:focus-within > .jalpi-advmenu__mega,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__sub,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item:hover > .jalpi-advmenu__sub,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item:focus-within > .jalpi-advmenu__sub {
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 0 0 14px;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: none;
}

.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item.is-open > .jalpi-advmenu__mega,
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__item.is-open > .jalpi-advmenu__sub {
  display: block;
}

.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__mega-inner {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* The overlay layer is a floating-panel effect only. */
.jalpi-advmenu[data-collapsed="1"] .jalpi-advmenu__mega::before {
  display: none;
}

.jalpi-advmenu[data-collapsed="1"] .is-open > .jalpi-advmenu__expand .jalpi-advmenu__indicator--arrow {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* Accordion + dropdown: the panel expands in place. */
.jalpi-advmenu--mobile-accordion[data-collapsed="1"] .jalpi-advmenu__panel,
.jalpi-advmenu--mobile-dropdown[data-collapsed="1"] .jalpi-advmenu__panel {
  display: none;
}

.jalpi-advmenu--mobile-accordion[data-collapsed="1"].is-open .jalpi-advmenu__panel,
.jalpi-advmenu--mobile-dropdown[data-collapsed="1"].is-open .jalpi-advmenu__panel {
  display: block;
}

/* Dropdown floats over the content rather than displacing it. */
.jalpi-advmenu--mobile-dropdown[data-collapsed="1"].is-open .jalpi-advmenu__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 999;
  padding: 8px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
}

/* Off-canvas slides a drawer in from the inline start edge. */
.jalpi-advmenu--mobile-offcanvas[data-collapsed="1"] .jalpi-advmenu__panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 999;
  width: min(320px, 85vw);
  padding: 56px 16px 24px;
  overflow-y: auto;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .18);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--jalpi-advmenu-duration) ease,
              visibility var(--jalpi-advmenu-duration);
}

/* Mirror the slide direction under RTL, where the start edge is on the right. */
[dir="rtl"] .jalpi-advmenu--mobile-offcanvas[data-collapsed="1"] .jalpi-advmenu__panel {
  transform: translateX(100%);
}

.jalpi-advmenu--mobile-offcanvas[data-collapsed="1"].is-open .jalpi-advmenu__panel {
  transform: translateX(0);
  visibility: visible;
}

.jalpi-advmenu--mobile-offcanvas[data-collapsed="1"] .jalpi-advmenu__close,
.jalpi-advmenu--mobile-offcanvas[data-collapsed="1"].is-open .jalpi-advmenu__backdrop {
  display: block;
}

/* Sticky mobile header: only meaningful in the collapsed state, where the bar
   is the site's primary navigation affordance. */
.jalpi-advmenu--sticky[data-collapsed="1"] {
  position: sticky;
  top: 0;
  z-index: 997;
  background: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .jalpi-advmenu__panel,
  .jalpi-advmenu__sub,
  .jalpi-advmenu__mega,
  .jalpi-advmenu__toggle-bar,
  .jalpi-advmenu__indicator,
  .jalpi-advmenu__backdrop,
  .jalpi-advmenu__link {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WANDERLUST — bright private-tour-guide kit
   Motion classes (guide-*) delivered via CSS so the inline-style sanitizer
   never strips the transforms. Palette: blue #2563eb, coral #f97316, ink
   #0f172a, sky #38bdf8. Applied inside html blocks via class="…"; the kit body
   carries jalpi-kit-guide so nothing here bleeds onto other kits.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card lift — travel-blue glow + rise. */
.guide-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; will-change: transform; }
.guide-lift:hover { transform: translateY(-12px); box-shadow: 0 34px 70px rgba(37,99,235,.20); border-color: #bfdbfe !important; }

/* Image zoom inside an overflow:hidden frame. */
.guide-zoom { overflow: hidden; }
.guide-zoom img, img.guide-zoom { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; display: block; }
.guide-lift:hover .guide-zoom img,
.guide-zoom:hover img, img.guide-zoom:hover { transform: scale(1.09); filter: saturate(1.08); }

/* Continuous gentle float — hero cards, badges, orbs. */
@keyframes guide-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.guide-float { animation: guide-float 6.5s ease-in-out infinite; will-change: transform; }
.guide-float--slow { animation: guide-float 9.5s ease-in-out infinite; }
.guide-float--fast { animation: guide-float 4.8s ease-in-out infinite; }

/* Slow zoom on a hero background image (Ken-Burns). */
@keyframes guide-kenburns { 0% { transform: scale(1.04); } 100% { transform: scale(1.14); } }
.guide-kenburns { animation: guide-kenburns 18s ease-out both; will-change: transform; }

/* Aurora gradient drift for section/hero backgrounds. */
@keyframes guide-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.guide-aurora { background-size: 220% 220%; animation: guide-aurora 20s ease infinite; }

/* Primary button — coral, light sweep + lift + glow on hover. */
.guide-btn { position: relative; overflow: hidden; transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease; will-change: transform; }
.guide-btn:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 18px 44px rgba(249,115,22,.42); }
.guide-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg); transition: left .75s ease; pointer-events: none; }
.guide-btn:hover::after { left: 130%; }

/* Ghost / outline button. */
.guide-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; }
.guide-btn-ghost:hover { transform: translateY(-3px); background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; }

/* Shine sweep for feature blocks. */
.guide-shine { position: relative; overflow: hidden; }
.guide-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none; }
.guide-shine:hover::before { transform: translateX(100%); }

/* Hover chip / pill. */
.guide-chip { transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.guide-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,.18); }

/* Nav / link underline reveal (coral). */
.guide-ul { position: relative; }
.guide-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #f97316; transform: scaleX(0); transform-origin: left; transition: transform .34s ease; border-radius: 2px; }
.guide-ul:hover::after { transform: scaleX(1); }
.guide-ul:hover { color: #2563eb !important; }

/* Icon badge pop on hover (round feature icons). */
.guide-pop { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.guide-lift:hover .guide-pop, .guide-pop:hover { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

/* Respect reduced-motion for every guide-* animation and hover transform. */
@media (prefers-reduced-motion: reduce) {
  .guide-float, .guide-float--slow, .guide-float--fast, .guide-kenburns, .guide-aurora,
  .guide-lift, .guide-zoom img, .guide-btn, .guide-btn-ghost, .guide-shine::before,
  .guide-chip, .guide-ul::after, .guide-pop {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAREWELL — warm & caring multi-specialty hospital kit
   Motion classes (care-*) delivered via CSS so the inline-style sanitizer never
   strips the transforms. Palette: teal #0d9488, warm coral #fb7185, soft green
   #34d399, ink #134e4a, sky-mint #ecfdf5, slate #475569. Applied inside html
   blocks via class="…"; kit body carries jalpi-kit-hospital so nothing bleeds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card lift — soft teal glow + rise. */
.care-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; will-change: transform; }
.care-lift:hover { transform: translateY(-11px); box-shadow: 0 32px 66px rgba(13,148,136,.20); border-color: #99f6e4 !important; }

/* Image zoom inside an overflow:hidden frame. */
.care-zoom { overflow: hidden; }
.care-zoom img, img.care-zoom { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; display: block; }
.care-lift:hover .care-zoom img,
.care-zoom:hover img, img.care-zoom:hover { transform: scale(1.08); filter: saturate(1.06); }

/* Continuous gentle float — badges, orbs, floating cards. */
@keyframes care-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
.care-float { animation: care-float 6.5s ease-in-out infinite; will-change: transform; }
.care-float--slow { animation: care-float 9.5s ease-in-out infinite; }
.care-float--fast { animation: care-float 4.8s ease-in-out infinite; }

/* Soft pulse — for a live/emergency dot or a heartbeat accent. */
@keyframes care-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .75; } }
.care-pulse { animation: care-pulse 2.4s ease-in-out infinite; will-change: transform; }

/* Ken-Burns slow zoom on a hero background image. */
@keyframes care-kenburns { 0% { transform: scale(1.04); } 100% { transform: scale(1.13); } }
.care-kenburns { animation: care-kenburns 18s ease-out both; will-change: transform; }

/* Aurora gradient drift for hero/CTA backgrounds. */
@keyframes care-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.care-aurora { background-size: 220% 220%; animation: care-aurora 20s ease infinite; }

/* Primary button — teal, light sweep + lift + glow on hover. */
.care-btn { position: relative; overflow: hidden; transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease; will-change: transform; }
.care-btn:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 18px 44px rgba(13,148,136,.40); }
.care-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); transition: left .75s ease; pointer-events: none; }
.care-btn:hover::after { left: 130%; }

/* Ghost / outline button — fills teal on hover. */
.care-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; }
.care-btn-ghost:hover { transform: translateY(-3px); background: #0d9488 !important; color: #ffffff !important; border-color: #0d9488 !important; }

/* Shine sweep for feature/service blocks. */
.care-shine { position: relative; overflow: hidden; }
.care-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none; }
.care-shine:hover::before { transform: translateX(100%); }

/* Hover chip / pill. */
.care-chip { transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.care-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,148,136,.18); }

/* Link / nav underline reveal (coral). */
.care-ul { position: relative; }
.care-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #fb7185; transform: scaleX(0); transform-origin: left; transition: transform .34s ease; border-radius: 2px; }
.care-ul:hover::after { transform: scaleX(1); }
.care-ul:hover { color: #0d9488 !important; }

/* Icon badge pop on hover (round service/department icons). */
.care-pop { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.care-lift:hover .care-pop, .care-pop:hover { transform: translateY(-4px) rotate(-6deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .care-float, .care-float--slow, .care-float--fast, .care-pulse, .care-kenburns, .care-aurora,
  .care-lift, .care-zoom img, .care-btn, .care-btn-ghost, .care-shine::before,
  .care-chip, .care-ul::after, .care-pop {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIXELPULSE — bold digital-marketing-agency kit
   Motion classes (mkt-*) delivered via CSS so the inline-style sanitizer never
   strips the transforms. Palette: indigo #4f46e5, electric violet #7c3aed,
   lime #a3e635, hot magenta #ec4899, ink #0b1020, mist #f5f3ff, slate #64748b.
   Applied in html blocks via class="…"; kit body carries jalpi-kit-marketing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card lift — indigo glow + rise. */
.mkt-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; will-change: transform; }
.mkt-lift:hover { transform: translateY(-12px); box-shadow: 0 34px 70px #4f46e533; border-color: #c7d2fe !important; }

/* Image zoom inside an overflow:hidden frame. */
.mkt-zoom { overflow: hidden; }
.mkt-zoom img, img.mkt-zoom { transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; display: block; }
.mkt-lift:hover .mkt-zoom img,
.mkt-zoom:hover img, img.mkt-zoom:hover { transform: scale(1.09); filter: saturate(1.1); }

/* Continuous gentle float — badges, orbs, floating cards. */
@keyframes mkt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.mkt-float { animation: mkt-float 6.5s ease-in-out infinite; will-change: transform; }
.mkt-float--slow { animation: mkt-float 9.5s ease-in-out infinite; }
.mkt-float--fast { animation: mkt-float 4.6s ease-in-out infinite; }

/* Continuous slow spin — for a decorative ring/badge behind stats. */
@keyframes mkt-spin { to { transform: rotate(360deg); } }
.mkt-spin { animation: mkt-spin 26s linear infinite; will-change: transform; }

/* Ken-Burns slow zoom on a hero background image. */
@keyframes mkt-kenburns { 0% { transform: scale(1.05); } 100% { transform: scale(1.16); } }
.mkt-kenburns { animation: mkt-kenburns 20s ease-out both; will-change: transform; }

/* Aurora gradient drift for hero/CTA backgrounds. */
@keyframes mkt-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.mkt-aurora { background-size: 240% 240%; animation: mkt-aurora 18s ease infinite; }

/* Primary button — electric, light sweep + lift + glow on hover. */
.mkt-btn { position: relative; overflow: hidden; transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease; will-change: transform; }
.mkt-btn:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 18px 46px #4f46e566; }
.mkt-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); transition: left .75s ease; pointer-events: none; }
.mkt-btn:hover::after { left: 130%; }

/* Ghost / outline button — fills indigo on hover. */
.mkt-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; }
.mkt-btn-ghost:hover { transform: translateY(-3px); background: #4f46e5 !important; color: #ffffff !important; border-color: #4f46e5 !important; }

/* Shine sweep for feature/service blocks. */
.mkt-shine { position: relative; overflow: hidden; }
.mkt-shine::before { content: ""; position: absolute; top:0;left:0;right:0;bottom:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none; }
.mkt-shine:hover::before { transform: translateX(100%); }

/* Hover chip / pill. */
.mkt-chip { transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.mkt-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 22px #4f46e529; }

/* Link / nav underline reveal (lime). */
.mkt-ul { position: relative; }
.mkt-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #a3e635; transform: scaleX(0); transform-origin: left; transition: transform .34s ease; border-radius: 2px; }
.mkt-ul:hover::after { transform: scaleX(1); }
.mkt-ul:hover { color: #4f46e5 !important; }

/* Icon badge pop on hover. */
.mkt-pop { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.mkt-lift:hover .mkt-pop, .mkt-pop:hover { transform: translateY(-4px) rotate(-8deg) scale(1.1); }

/* Marquee-adjacent: a subtle gradient text sweep is not possible inline (clip stripped),
   so brand accent is delivered by solid lime/magenta text where needed. */

@media (prefers-reduced-motion: reduce) {
  .mkt-float, .mkt-float--slow, .mkt-float--fast, .mkt-spin, .mkt-kenburns, .mkt-aurora,
  .mkt-lift, .mkt-zoom img, .mkt-btn, .mkt-btn-ghost, .mkt-shine::before, .mkt-chip, .mkt-ul::after, .mkt-pop {
    animation: none !important; transition: none !important; transform: none !important;
  }
}

/* Counters placed on the marketing kit's dark/gradient stat bands need light
   text — the default counter colours (#6366f1 number, #6b7280 label) are for
   light backgrounds and read as low-contrast on #0b1020 / the indigo gradient. */
.mkt-counter-light .jalpi-counter__number,
.mkt-counter-light .jalpi-counter__prefix,
.mkt-counter-light .jalpi-counter__suffix { color: #ffffff !important; }
.mkt-counter-light .jalpi-counter__label { color: #c7d2fe !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGETURN — bold modern book-shop kit (WooCommerce)
   Motion classes (shelf-*). Palette: ink #18181b, coral #ff5a5f (CTAs),
   amber #f59e0b (accent/sale), cream #fffaf0, indigo #4338ca, slate #52525b.
   Applied in html blocks via class="…"; kit body carries jalpi-kit-books.
   ═══════════════════════════════════════════════════════════════════════════ */

.shelf-lift { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), border-color .4s ease; will-change: transform; }
.shelf-lift:hover { transform: translateY(-12px); box-shadow: 0 34px 70px #18181b26; border-color: #fecaca !important; }

.shelf-zoom { overflow: hidden; }
.shelf-zoom img, img.shelf-zoom { transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s ease; will-change: transform; display: block; }
.shelf-lift:hover .shelf-zoom img,
.shelf-zoom:hover img, img.shelf-zoom:hover { transform: scale(1.07); filter: saturate(1.06); }

.shelf-book { transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease; will-change: transform; box-shadow: 0 18px 40px #18181b26; }
.shelf-book:hover { transform: translateY(-10px) rotate(-2deg); box-shadow: 0 40px 80px #18181b3d; }

@keyframes shelf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.shelf-float { animation: shelf-float 6.5s ease-in-out infinite; will-change: transform; }
.shelf-float--slow { animation: shelf-float 9.5s ease-in-out infinite; }
.shelf-float--fast { animation: shelf-float 4.7s ease-in-out infinite; }

@keyframes shelf-kenburns { 0% { transform: scale(1.05); } 100% { transform: scale(1.15); } }
.shelf-kenburns { animation: shelf-kenburns 20s ease-out both; will-change: transform; }

@keyframes shelf-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.shelf-aurora { background-size: 220% 220%; animation: shelf-aurora 18s ease infinite; }

@keyframes shelf-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.shelf-pulse { animation: shelf-pulse 2.2s ease-in-out infinite; will-change: transform; }

.shelf-btn { position: relative; overflow: hidden; transition: transform .34s cubic-bezier(.16,1,.3,1), box-shadow .34s ease, filter .3s ease; will-change: transform; }
.shelf-btn:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow: 0 18px 44px #ff5a5f5c; }
.shelf-btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-18deg); transition: left .75s ease; pointer-events: none; }
.shelf-btn:hover::after { left: 130%; }

.shelf-btn-ghost { transition: transform .34s cubic-bezier(.16,1,.3,1), background .3s ease, color .3s ease, border-color .3s ease; }
.shelf-btn-ghost:hover { transform: translateY(-3px); background: #18181b !important; color: #ffffff !important; border-color: #18181b !important; }

.shelf-shine { position: relative; overflow: hidden; }
.shelf-shine::before { content: ""; position: absolute; top:0;left:0;right:0;bottom:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .95s ease; pointer-events: none; }
.shelf-shine:hover::before { transform: translateX(100%); }

.shelf-chip { transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.shelf-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #18181b1f; }

.shelf-ul { position: relative; }
.shelf-ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: #ff5a5f; transform: scaleX(0); transform-origin: left; transition: transform .34s ease; border-radius: 2px; }
.shelf-ul:hover::after { transform: scaleX(1); }
.shelf-ul:hover { color: #ff5a5f !important; }

.shelf-pop { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.shelf-lift:hover .shelf-pop, .shelf-pop:hover { transform: translateY(-4px) rotate(-8deg) scale(1.1); }

/* ── WooCommerce shop grid, PAGETURN-themed (scoped to this kit's body) ── */
body.jalpi-kit-books.woocommerce ul.products,
body.jalpi-kit-books .woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
body.jalpi-kit-books ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.jalpi-kit-books ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 980px) { body.jalpi-kit-books ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px) { body.jalpi-kit-books ul.products { grid-template-columns: 1fr !important; } }
body.jalpi-kit-books li.product {
  width: auto !important; float: none !important; margin: 0 !important;
  background: #ffffff; border: 1px solid #ececec; border-radius: 16px; overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; box-shadow: 0 10px 30px #18181b12;
}
body.jalpi-kit-books li.product:hover { transform: translateY(-8px); box-shadow: 0 28px 60px #18181b26; }
body.jalpi-kit-books li.product img { width: 100% !important; aspect-ratio: 3/4; object-fit: cover; margin: 0 !important; }
body.jalpi-kit-books li.product .woocommerce-loop-product__title { padding: 14px 16px 2px; font: 700 1.05rem/1.3 Georgia, serif; color: #18181b !important; }
body.jalpi-kit-books li.product .price { display: block; padding: 0 16px; color: #ff5a5f !important; font-weight: 700; }
body.jalpi-kit-books li.product .price del { color: #9ca3af !important; font-weight: 400; margin-right: 6px; }
body.jalpi-kit-books li.product .button,
body.jalpi-kit-books li.product .add_to_cart_button {
  margin: 12px 16px 18px !important; display: inline-block; background: #18181b !important; color: #fff !important;
  border-radius: 100px !important; padding: 10px 20px !important; font-weight: 700 !important; text-decoration: none !important;
  transition: background .3s ease, transform .3s ease;
}
body.jalpi-kit-books li.product .button:hover { background: #ff5a5f !important; transform: translateY(-2px); }
body.jalpi-kit-books span.onsale {
  background: #ff5a5f !important; color: #fff !important; border-radius: 100px !important; padding: 5px 12px !important;
  font-weight: 800 !important; min-height: 0 !important; min-width: 0 !important; line-height: 1 !important;
}

/* ── PAGETURN hero: an ILLUSTRATED book tower drawn in pure CSS (flat brand colors,
   no photos). Each book is a styled slab (spine block + page edge + title lines)
   that drops in one-by-one bottom-first and stacks into a neat tower, then breathes.
   Fully on-brand (coral / amber / ink / indigo / cream), no image loading. */
.shelf-illo {
  position: relative; z-index: 2;
  width: min(360px, 82vw);
  height: min(400px, 92vw);
  margin: 0 auto;
}
.shelf-illo__book {
  position: absolute; left: 0; right: 0; margin: 0 auto;
  width: var(--w, 86%); height: 46px;
  border-radius: 7px;
  background: var(--c, #ff5a5f);
  box-shadow: 0 10px 22px #18181b26, inset 0 -6px 10px #00000022, inset 0 2px 0 #ffffff2e;
  opacity: 0; transform-origin: 50% 100%;
  animation: shelf-book-drop .8s cubic-bezier(.2,.85,.3,1.3) forwards;
  will-change: transform, opacity;
  display: flex; align-items: center; padding-left: 18px;
}
/* page block on the right edge (the book's paper) */
.shelf-illo__book::after {
  content: ""; position: absolute; top: 5px; bottom: 5px; right: 6px; width: 16%;
  background: linear-gradient(90deg, #ffffff, #efe7d6 60%, #e3d9c4);
  border-radius: 2px 3px 3px 2px;
  box-shadow: inset 2px 0 3px #00000018;
}
/* two thin "title" lines on the spine */
.shelf-illo__book::before {
  content: ""; position: absolute; left: 18px; top: 50%; width: 42%; height: 5px;
  transform: translateY(-50%); border-radius: 3px;
  background: #ffffffcc;
  box-shadow: 0 12px 0 -1px #ffffff80;
}
/* stacking: bottom book (n1) widest & lowest; each one up + slightly narrower/offset */
.shelf-illo__book.n1 { bottom: 0;   --w: 90%; --c: #18181b; transform-origin:50% 100%; animation-delay: .10s; }
.shelf-illo__book.n2 { bottom: 52px; --w: 84%; --c: #4338ca; animation-delay: .38s; }
.shelf-illo__book.n3 { bottom: 104px;--w: 88%; --c: #f59e0b; animation-delay: .66s; }
.shelf-illo__book.n4 { bottom: 156px;--w: 80%; --c: #ff5a5f; animation-delay: .94s; }
.shelf-illo__book.n5 { bottom: 208px;--w: 86%; --c: #16a34a; animation-delay: 1.22s; }
.shelf-illo__book.n6 { bottom: 260px;--w: 78%; --c: #db2777; animation-delay: 1.50s; }
/* little side offsets so the tower looks hand-stacked, not machine-perfect */
.shelf-illo__book.n2 { margin-left: 8px; }
.shelf-illo__book.n4 { margin-left: -10px; }
.shelf-illo__book.n6 { margin-left: 6px; }
@keyframes shelf-book-drop {
  0%   { opacity: 0; transform: translateY(-140px) rotate(-5deg) scale(1.04); }
  60%  { opacity: 1; transform: translateY(8px)    rotate(1.5deg) scale(1); }
  80%  { transform: translateY(-4px) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0)      rotate(0)     scale(1); }
}
/* a "★" bookmark tag peeking from the top book, drops last */
.shelf-illo__tag {
  position: absolute; top: -14px; right: 22%; z-index: 7;
  width: 30px; height: 44px; background: #f59e0b; border-radius: 4px 4px 0 0;
  box-shadow: 0 8px 18px #f59e0b66;
  display: flex; align-items: center; justify-content: center;
  color: #ffffff; font-size: 15px; font-weight: 900;
  opacity: 0; animation: shelf-book-drop .8s cubic-bezier(.2,.85,.3,1.3) 1.75s forwards;
}
.shelf-illo__tag::after {
  content: ""; position: absolute; bottom: -8px; left: 0; right: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 9px solid #f59e0b;
}
/* soft ground shadow under the tower */
.shelf-illo::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -20px; height: 24px;
  background: radial-gradient(ellipse at center, #18181b30, #18181b00 72%);
  border-radius: 50%; z-index: 0;
  opacity: 0; animation: shelf-shadow-in .8s ease 1.9s forwards;
}
@keyframes shelf-shadow-in { to { opacity: 1; } }
.shelf-illo--settled { animation: shelf-illo-breathe 7s ease-in-out 2.5s infinite; }
@keyframes shelf-illo-breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  .shelf-float, .shelf-float--slow, .shelf-float--fast, .shelf-kenburns, .shelf-aurora, .shelf-pulse,
  .shelf-lift, .shelf-zoom img, .shelf-book, .shelf-btn, .shelf-btn-ghost, .shelf-shine::before, .shelf-chip, .shelf-ul::after, .shelf-pop,
  .shelf-illo__book, .shelf-illo__tag, .shelf-illo--settled, .shelf-illo::after {
    animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important;
  }
}
