/**
 * ============================================================
 * LITO100 — Block Starter CSS
 * ============================================================
 * This file provides ready-to-use CSS classes that mirror the
 * Tailwind-based styling used by lito100's block editor.
 * Import this in your frontend project to get sensible defaults
 * for every block type returned by the Content API.
 *
 * Color palette:
 *   --aurora-cyan:   #06b6d4
 *   --aurora-blue:   #3b82f6
 *   --aurora-purple: #8b5cf6
 *   --aurora-pink:   #ec4899
 *   --aurora-green:  #10b981
 *
 * Usage:
 *   <link rel="stylesheet" href="https://YOUR_LITO100_URL/lito-blocks.css" />
 *   — or —
 *   @import url('https://YOUR_LITO100_URL/lito-blocks.css');
 *
 * This file is deliberately unopinionated about fonts and
 * resets; pair it with your own base styles.
 * ============================================================
 */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --aurora-cyan: #06b6d4;
  --aurora-blue: #3b82f6;
  --aurora-purple: #8b5cf6;
  --aurora-pink: #ec4899;
  --aurora-green: #10b981;

  --surface-50: #fafafa;
  --surface-100: #f4f4f5;
  --surface-200: #e4e4e7;
  --surface-300: #d4d4d8;
  --surface-400: #a1a1aa;
  --surface-500: #71717a;
  --surface-600: #52525b;
  --surface-700: #3f3f46;
  --surface-800: #27272a;
  --surface-900: #18181b;
  --surface-950: #09090b;
}

/* ── Base wrapper ──────────────────────────────────────────── */
.lito-content {
  max-width: 100%;
  color: var(--surface-300);
  line-height: 1.7;
}
.lito-content > * + * {
  margin-top: 1.5rem;
}

/* ── 1. Heading ────────────────────────────────────────────── */
.lito-content h1,
.lito-content h2,
.lito-content h3 {
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.lito-content h1 { font-size: 1.875rem; /* text-3xl */ }
.lito-content h2 { font-size: 1.5rem;   /* text-2xl */ }
.lito-content h3 { font-size: 1.25rem;  /* text-xl */  }

/* Alignment modifier — applied via inline data attribute */
.lito-content [data-align="center"] { text-align: center; }
.lito-content [data-align="right"]  { text-align: right; }

/* ── 2. Paragraph ──────────────────────────────────────────── */
.lito-content p {
  color: var(--surface-300);
}

/* ── 3. Quote ──────────────────────────────────────────────── */
.lito-block-quote {
  padding: 1.5rem;
  border-left: 4px solid var(--aurora-purple);
  background: rgba(139, 92, 246, 0.05);
}
.lito-block-quote blockquote {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--surface-300);
  margin-bottom: 0.5rem;
}
.lito-block-quote .quote-author {
  font-size: 0.875rem;
  color: var(--surface-400);
}

/* ── 4. Callout ────────────────────────────────────────────── */
.lito-block-callout {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
}
.lito-block-callout.callout-info {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.lito-block-callout.callout-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.lito-block-callout.callout-tip {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.2);
}
.lito-block-callout .callout-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.callout-info .callout-icon  { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.callout-success .callout-icon { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.callout-tip .callout-icon   { background: rgba(234, 179, 8, 0.2); color: #facc15; }
.lito-block-callout .callout-title {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}
.lito-block-callout .callout-text {
  font-size: 0.875rem;
  color: var(--surface-300);
}

/* ── 5. Warning ────────────────────────────────────────────── */
.lito-block-warning {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.lito-block-warning .warning-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #f87171;
}
.lito-block-warning .warning-title {
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}
.lito-block-warning .warning-text {
  font-size: 0.875rem;
  color: var(--surface-300);
}

/* ── 6. Bullet List ────────────────────────────────────────── */
.lito-block-bullet-list {
  list-style: none;
  padding: 0;
}
.lito-block-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.lito-block-bullet-list li::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--aurora-purple);
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.lito-block-bullet-list li span {
  color: var(--surface-300);
}

/* ── 7. Numbered List ──────────────────────────────────────── */
.lito-block-numbered-list {
  list-style: none;
  padding: 0;
  counter-reset: lito-counter;
}
.lito-block-numbered-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
  counter-increment: lito-counter;
}
.lito-block-numbered-list li::before {
  content: counter(lito-counter);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: rgba(139, 92, 246, 0.2);
  color: var(--aurora-purple);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lito-block-numbered-list li span {
  color: var(--surface-800);
}

/* ── 8. Checklist ──────────────────────────────────────────── */
.lito-block-checklist {
  list-style: none;
  padding: 0;
}
.lito-block-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.lito-block-checklist .check-box {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  border: 2px solid var(--surface-500);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}
.lito-block-checklist li.checked .check-box {
  background: var(--aurora-purple);
  border-color: var(--aurora-purple);
}
.lito-block-checklist li.checked span {
  color: var(--surface-500);
  text-decoration: line-through;
}

/* ── 9. Code Block ─────────────────────────────────────────── */
.lito-block-code {
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-900);
}
.lito-block-code .code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lito-block-code .code-language {
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--surface-500);
}
.lito-block-code pre {
  padding: 1rem;
  overflow-x: auto;
  margin: 0;
}
.lito-block-code code {
  font-family: monospace;
  font-size: 0.875rem;
  color: #4ade80; /* green-400 */
}

/* ── 10. Table ─────────────────────────────────────────────── */
.lito-block-table {
  width: 100%;
  border-collapse: collapse;
}
.lito-block-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.lito-block-table td {
  padding: 0.75rem 1rem;
  color: var(--surface-300);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── 11. Image ─────────────────────────────────────────────── */
.lito-block-image figure {
  margin: 0;
}
.lito-block-image img {
  width: 100%;
  border-radius: 0.75rem;
}
.lito-block-image figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.5rem;
}

/* ── 12. Gallery ───────────────────────────────────────────── */
.lito-block-gallery {
  display: grid;
  gap: 1rem;
}
.lito-block-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lito-block-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lito-block-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lito-block-gallery .gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-900);
}
.lito-block-gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 13. Carousel ──────────────────────────────────────────── */
.lito-block-carousel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-900);
}
.lito-block-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-carousel .carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}
.lito-block-carousel .carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
}
.lito-block-carousel .carousel-dot.active {
  background: #fff;
}

/* ── 14. Video ─────────────────────────────────────────────── */
.lito-block-video {
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-900);
}
.lito-block-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── 15. Divider ───────────────────────────────────────────── */
.lito-block-divider {
  border: 0;
  height: 1px;
  margin: 2rem 0;
}
.lito-block-divider.divider-solid {
  background: rgba(255, 255, 255, 0.2);
}
.lito-block-divider.divider-gradient {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.lito-block-divider.divider-dashed {
  background: transparent;
  border-top: 2px dashed rgba(255, 255, 255, 0.2);
}

/* ── 16. Spacer ────────────────────────────────────────────── */
.lito-block-spacer {
  /* height set via inline style */
}

/* ── 17. Columns ───────────────────────────────────────────── */
.lito-block-columns {
  display: grid;
  gap: 1.5rem;
}
/* column count set via inline style or these helpers: */
.lito-block-columns.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lito-block-columns.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lito-block-columns.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── 18. CTA Button ────────────────────────────────────────── */
.lito-block-cta-button {
  padding: 1.5rem 0;
}
.lito-block-cta-button a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.lito-block-cta-button a.cta-primary {
  background: #fff;
  color: #000;
}
.lito-block-cta-button a.cta-primary:hover { background: rgba(255, 255, 255, 0.9); }
.lito-block-cta-button a.cta-secondary {
  background: var(--aurora-purple);
  color: #fff;
}
.lito-block-cta-button a.cta-secondary:hover { background: rgba(139, 92, 246, 0.9); }
.lito-block-cta-button a.cta-outline {
  border: 2px solid #fff;
  color: #fff;
  background: transparent;
}
.lito-block-cta-button a.cta-outline:hover { background: rgba(255, 255, 255, 0.1); }

/* ── 19. CTA Banner ────────────────────────────────────────── */
.lito-block-cta-banner {
  padding: 2rem;
  border-radius: 0.75rem;
}
.lito-block-cta-banner.bg-purple {
  background: linear-gradient(to right, var(--aurora-purple), var(--aurora-blue));
}
.lito-block-cta-banner.bg-green {
  background: linear-gradient(to right, #22c55e, #10b981);
}
.lito-block-cta-banner.bg-orange {
  background: linear-gradient(to right, #f97316, #ef4444);
}
.lito-block-cta-banner.bg-dark {
  background: var(--surface-800);
}
.lito-block-cta-banner .banner-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
}
.lito-block-cta-banner .banner-subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.5rem;
}
.lito-block-cta-banner .banner-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: var(--surface-900);
  font-weight: 600;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background 0.2s;
}
.lito-block-cta-banner .banner-button:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* ── 20. Accordion ─────────────────────────────────────────── */
.lito-block-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lito-block-accordion details {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}
.lito-block-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-weight: 500;
  color: #fff;
}
.lito-block-accordion summary::marker,
.lito-block-accordion summary::-webkit-details-marker {
  display: none;
}
.lito-block-accordion .accordion-content {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--surface-300);
}

/* ── 21. Tabs ──────────────────────────────────────────────── */
.lito-block-tabs .tabs-header {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: 0.25rem;
}
.lito-block-tabs .tab-trigger {
  padding: 0.5rem 1rem;
  font-weight: 500;
  color: var(--surface-400);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.lito-block-tabs .tab-trigger.active {
  color: #fff;
  border-bottom-color: var(--aurora-purple);
}
.lito-block-tabs .tab-content {
  padding: 1rem;
  color: var(--surface-300);
}

/* ── 22. Embed ─────────────────────────────────────────────── */
.lito-block-embed {
  border-radius: 0.75rem;
  overflow: hidden;
}

/* ── 23. Person Card ───────────────────────────────────────── */
.lito-block-person-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lito-block-person-card .person-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--surface-700);
  margin-bottom: 1rem;
}
.lito-block-person-card .person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-person-card .person-name {
  font-weight: 600;
  font-size: 1.125rem;
  color: #fff;
}
.lito-block-person-card .person-role {
  color: var(--aurora-purple);
  margin-top: 0.25rem;
}
.lito-block-person-card .person-bio {
  color: var(--surface-400);
  font-size: 0.875rem;
  margin-top: 0.75rem;
}
.lito-block-person-card .person-socials {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.lito-block-person-card .person-socials a {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--surface-700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--surface-500);
  transition: all 0.2s;
}
.lito-block-person-card .person-socials a:hover {
  background: rgba(139, 92, 246, 0.2);
}

/* ── 24. Team Grid ─────────────────────────────────────────── */
.lito-block-team-grid {
  display: grid;
  gap: 1.5rem;
}
.lito-block-team-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lito-block-team-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lito-block-team-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lito-block-team-grid .member {
  text-align: center;
}
.lito-block-team-grid .member-avatar {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 0.75rem;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--surface-700);
}
.lito-block-team-grid .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-team-grid .member-name {
  font-weight: 500;
  color: #fff;
}
.lito-block-team-grid .member-role {
  font-size: 0.875rem;
  color: var(--surface-400);
}

/* ── 25. Testimonial ───────────────────────────────────────── */
.lito-block-testimonial {
  padding: 1.5rem;
}
.lito-block-testimonial .testimonial-stars {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.lito-block-testimonial .testimonial-stars .star {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--surface-600);
}
.lito-block-testimonial .testimonial-stars .star.filled {
  color: #facc15; /* yellow-400 */
}
.lito-block-testimonial .testimonial-text {
  color: var(--surface-300);
  font-style: italic;
}
.lito-block-testimonial .testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.lito-block-testimonial .testimonial-author-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--surface-700);
}
.lito-block-testimonial .testimonial-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-testimonial .testimonial-author-name {
  font-weight: 500;
  color: #fff;
}
.lito-block-testimonial .testimonial-author-info {
  font-size: 0.875rem;
  color: var(--surface-400);
}

/* ── 26. Stats ─────────────────────────────────────────────── */
.lito-block-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  text-align: center;
}
.lito-block-stats .stat-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--aurora-purple);
}
.lito-block-stats .stat-label {
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.25rem;
}

/* ── 27. Feature Box ───────────────────────────────────────── */
.lito-block-feature-box {
  padding: 1.5rem;
  text-align: center;
}
.lito-block-feature-box .feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--aurora-purple);
}
.lito-block-feature-box .feature-title {
  font-weight: 600;
  color: #fff;
}
.lito-block-feature-box .feature-text {
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.5rem;
}

/* ── 28. Features Grid ─────────────────────────────────────── */
.lito-block-features-grid {
  display: grid;
  gap: 1.5rem;
}
.lito-block-features-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lito-block-features-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lito-block-features-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lito-block-features-grid .feature-item {
  text-align: center;
  padding: 1rem;
}
.lito-block-features-grid .feature-item-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  background: rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  color: var(--aurora-purple);
}
.lito-block-features-grid .feature-item-title {
  font-weight: 500;
  color: #fff;
}
.lito-block-features-grid .feature-item-text {
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.25rem;
}

/* ── 29. Icon Box ──────────────────────────────────────────── */
.lito-block-icon-box {
  padding: 1.5rem;
}
.lito-block-icon-box .icon-box-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--aurora-purple), var(--aurora-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: #fff;
}
.lito-block-icon-box .icon-box-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}
.lito-block-icon-box .icon-box-text {
  color: var(--surface-400);
  margin-top: 0.5rem;
}

/* ── 30. Progress Bar ──────────────────────────────────────── */
.lito-block-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
.lito-block-progress-bar .progress-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.lito-block-progress-bar .progress-label {
  font-weight: 500;
  color: #fff;
}
.lito-block-progress-bar .progress-value {
  color: var(--surface-400);
}
.lito-block-progress-bar .progress-track {
  height: 0.5rem;
  background: var(--surface-700);
  border-radius: 9999px;
  overflow: hidden;
}
.lito-block-progress-bar .progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--aurora-purple), var(--aurora-blue));
  border-radius: 9999px;
  transition: width 0.5s;
}

/* ── 31. Pricing Card ──────────────────────────────────────── */
.lito-block-pricing-card {
  padding: 1.5rem;
}
.lito-block-pricing-card.highlighted {
  background: rgba(139, 92, 246, 0.1);
  border-radius: 0.75rem;
  border: 1px solid rgba(139, 92, 246, 0.3);
}
.lito-block-pricing-card .pricing-badge {
  text-align: center;
  margin-bottom: 1rem;
}
.lito-block-pricing-card .pricing-badge span {
  padding: 0.25rem 0.75rem;
  background: var(--aurora-purple);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}
.lito-block-pricing-card .pricing-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.lito-block-pricing-card .pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 1rem;
}
.lito-block-pricing-card .pricing-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
}
.lito-block-pricing-card .pricing-period {
  color: var(--surface-400);
}
.lito-block-pricing-card .pricing-features {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lito-block-pricing-card .pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--surface-300);
}
.lito-block-pricing-card .pricing-features li .check-icon {
  color: #4ade80;
  flex-shrink: 0;
}
.lito-block-pricing-card .pricing-button {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}
.lito-block-pricing-card .pricing-button.btn-primary {
  background: var(--aurora-purple);
  color: #fff;
}
.lito-block-pricing-card .pricing-button.btn-default {
  background: var(--surface-700);
  color: #fff;
}

/* ── 32. Product ───────────────────────────────────────────── */
.lito-block-product {
  padding: 1rem;
}
.lito-block-product .product-image {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--surface-800);
  aspect-ratio: 1 / 1;
  margin-bottom: 1rem;
}
.lito-block-product .product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-product .product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.5rem;
  background: var(--aurora-purple);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.5rem;
}
.lito-block-product .product-name {
  font-weight: 600;
  color: #fff;
}
.lito-block-product .product-description {
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.5rem;
}
.lito-block-product .product-prices {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.lito-block-product .product-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--aurora-purple);
}
.lito-block-product .product-original-price {
  color: var(--surface-500);
  text-decoration: line-through;
}
.lito-block-product .product-button {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.625rem;
  background: var(--aurora-purple);
  color: #fff;
  text-align: center;
  font-weight: 600;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background 0.2s;
}
.lito-block-product .product-button:hover {
  background: rgba(139, 92, 246, 0.9);
}

/* ── 33. Product Grid ──────────────────────────────────────── */
.lito-block-product-grid {
  display: grid;
  gap: 1rem;
}
.lito-block-product-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.lito-block-product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.lito-block-product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lito-block-product-grid .product-grid-item {
  background: var(--surface-800);
  border-radius: 0.75rem;
  overflow: hidden;
}
.lito-block-product-grid .product-grid-item .product-grid-image {
  aspect-ratio: 1 / 1;
}
.lito-block-product-grid .product-grid-item .product-grid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lito-block-product-grid .product-grid-item .product-grid-info {
  padding: 0.75rem;
}
.lito-block-product-grid .product-grid-item .product-grid-name {
  font-weight: 500;
  font-size: 0.875rem;
  color: #fff;
}
.lito-block-product-grid .product-grid-item .product-grid-price {
  font-weight: 700;
  color: var(--aurora-purple);
  margin-top: 0.25rem;
}

/* ── 34. Price Table ───────────────────────────────────────── */
.lito-block-price-table {
  display: grid;
  gap: 1rem;
}
.lito-block-price-table .plan {
  border-radius: 0.75rem;
  padding: 1.25rem;
  background: var(--surface-800);
}
.lito-block-price-table .plan.highlighted {
  background: rgba(139, 92, 246, 0.2);
  border: 2px solid var(--aurora-purple);
}
.lito-block-price-table .plan-name {
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.lito-block-price-table .plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.75rem;
}
.lito-block-price-table .plan-amount {
  font-size: 1.875rem;
  font-weight: 700;
  color: #fff;
}
.lito-block-price-table .plan-period {
  color: var(--surface-400);
}
.lito-block-price-table .plan-features {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lito-block-price-table .plan-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lito-block-price-table .plan-feature.included { color: var(--surface-300); }
.lito-block-price-table .plan-feature.excluded { color: var(--surface-500); }
.lito-block-price-table .plan-feature .icon-included { color: #4ade80; }
.lito-block-price-table .plan-feature .icon-excluded { color: var(--surface-500); }
.lito-block-price-table .plan-button {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: all 0.2s;
}
.lito-block-price-table .plan-button.btn-primary {
  background: var(--aurora-purple);
  color: #fff;
}
.lito-block-price-table .plan-button.btn-default {
  background: var(--surface-700);
  color: #fff;
}

/* ── 35. Timeline ──────────────────────────────────────────── */
.lito-block-timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 2px solid rgba(139, 92, 246, 0.3);
}
.lito-block-timeline .timeline-item {
  position: relative;
  padding-bottom: 2rem;
}
.lito-block-timeline .timeline-item:last-child {
  padding-bottom: 0;
}
.lito-block-timeline .timeline-dot {
  position: absolute;
  left: -2.55rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background: var(--aurora-purple);
  border: 4px solid var(--surface-900);
}
.lito-block-timeline .timeline-date {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--aurora-purple);
}
.lito-block-timeline .timeline-title {
  font-weight: 600;
  color: #fff;
  margin-top: 0.25rem;
}
.lito-block-timeline .timeline-text {
  font-size: 0.875rem;
  color: var(--surface-400);
  margin-top: 0.25rem;
}

/* ── 36. FAQ ───────────────────────────────────────────────── */
.lito-block-faq {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lito-block-faq details {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
}
.lito-block-faq summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-weight: 500;
  color: #fff;
}
.lito-block-faq summary::marker,
.lito-block-faq summary::-webkit-details-marker {
  display: none;
}
.lito-block-faq .faq-answer {
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  color: var(--surface-400);
}

/* ── 37. Contact Info ──────────────────────────────────────── */
.lito-block-contact-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lito-block-contact-info .contact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lito-block-contact-info .contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(139, 92, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--aurora-purple);
}
.lito-block-contact-info .contact-text {
  color: var(--surface-300);
}
.lito-block-contact-info a {
  color: var(--surface-300);
  text-decoration: none;
  transition: color 0.2s;
}
.lito-block-contact-info a:hover {
  color: #fff;
}

/* ── 38. Social Links ──────────────────────────────────────── */
.lito-block-social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}
.lito-block-social-links a {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  text-decoration: none;
}
.lito-block-social-links a.style-filled {
  background: var(--aurora-purple);
  color: #fff;
}
.lito-block-social-links a.style-filled:hover {
  background: rgba(139, 92, 246, 0.8);
}
.lito-block-social-links a.style-icons {
  background: var(--surface-700);
  color: var(--surface-500);
}
.lito-block-social-links a.style-icons:hover {
  background: rgba(139, 92, 246, 0.2);
  color: var(--aurora-purple);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .lito-block-stats { grid-template-columns: 1fr; }
  .lito-block-features-grid,
  .lito-block-gallery,
  .lito-block-team-grid,
  .lito-block-product-grid,
  .lito-block-price-table,
  .lito-block-columns { grid-template-columns: 1fr !important; }
}

/* ── Light Mode Override ───────────────────────────────────── */
.lito-content.light h1,
.lito-content.light h2,
.lito-content.light h3 { color: var(--surface-900); }
.lito-content.light p { color: var(--surface-700); }
.lito-content.light .lito-block-callout .callout-title { color: var(--surface-900); }
.lito-content.light .lito-block-warning .warning-title { color: var(--surface-900); }
.lito-content.light .lito-block-accordion summary { color: var(--surface-900); }
.lito-content.light .lito-block-faq summary { color: var(--surface-900); }
.lito-content.light .lito-block-person-card .person-name { color: var(--surface-900); }
.lito-content.light .lito-block-team-grid .member-name { color: var(--surface-900); }
.lito-content.light .lito-block-testimonial .testimonial-author-name { color: var(--surface-900); }
.lito-content.light .lito-block-feature-box .feature-title { color: var(--surface-900); }
.lito-content.light .lito-block-features-grid .feature-item-title { color: var(--surface-900); }
.lito-content.light .lito-block-icon-box .icon-box-title { color: var(--surface-900); }
.lito-content.light .lito-block-pricing-card .pricing-name,
.lito-content.light .lito-block-pricing-card .pricing-amount { color: var(--surface-900); }
.lito-content.light .lito-block-product .product-name { color: var(--surface-900); }
.lito-content.light .lito-block-timeline .timeline-title { color: var(--surface-900); }
.lito-content.light .lito-block-progress-bar .progress-label { color: var(--surface-900); }
.lito-content.light .lito-block-tabs .tab-trigger.active { color: var(--surface-900); }