/**
 * Smart Suite — Elementor Widget Styles
 *
 * All 8 layout presets, responsive grid, image effects,
 * filter bar, card styles, and widget-specific layouts.
 *
 * @package SmartSuite
 */

/* ========================================================================
   Global — Table Border Reset
   All Smart Suite tables default to no borders / outlines on all states.
   Individual widgets opt-in via Elementor controls.
   ======================================================================== */
.ss-dt,
.ss-dt th,
.ss-dt td,
.ss-dt tr,
.ss-hours__table,
.ss-hours__table th,
.ss-hours__table td,
.ss-hours__table tr,
.ss-fg__table,
.ss-fg__table th,
.ss-fg__table td,
.ss-fg__table tr,
.ss-eq__table,
.ss-eq__table th,
.ss-eq__table td,
.ss-eq__table tr,
.ss-comparison__table,
.ss-comparison__table th,
.ss-comparison__table td,
.ss-comparison__table tr {
  border: none;
  outline: none;
}

/* Remove hover/focus/active outlines & borders */
.ss-dt tr:hover,
.ss-dt td:hover,
.ss-dt th:hover,
.ss-hours__table tr:hover,
.ss-hours__table td:hover,
.ss-fg__table tr:hover,
.ss-fg__table td:hover,
.ss-eq__table tr:hover,
.ss-eq__table td:hover,
.ss-comparison__table tr:hover,
.ss-comparison__table td:hover,
.ss-comparison__table th:hover {
  border-color: inherit;
  outline: none;
}

.ss-dt tr:focus,
.ss-dt td:focus,
.ss-hours__table tr:focus,
.ss-hours__table td:focus,
.ss-fg__table tr:focus,
.ss-fg__table td:focus,
.ss-eq__table tr:focus,
.ss-eq__table td:focus,
.ss-comparison__table tr:focus,
.ss-comparison__table td:focus {
  outline: none;
}

/* FAQ items — strip default border-bottom, fully controlled by Elementor */
.ss-faq__item {
  border: none;
  outline: none;
}
.ss-faq__item:hover,
.ss-faq__item:focus-within {
  border-color: inherit;
  outline: none;
}

/* ========================================================================
   Entity Grid — Base
   ======================================================================== */
.ss-entity-grid {
  display: grid;
  gap: var(--ss-gap, 20px);
}

/* Column system */
.ss-entity-grid.ss-cols-1 { grid-template-columns: 1fr; }
.ss-entity-grid.ss-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ss-entity-grid.ss-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ss-entity-grid.ss-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .ss-entity-grid.ss-cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ss-entity-grid.ss-cols-3,
  .ss-entity-grid.ss-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ss-entity-grid.ss-cols-2,
  .ss-entity-grid.ss-cols-3,
  .ss-entity-grid.ss-cols-4 { grid-template-columns: 1fr; }
}

/* ========================================================================
   Card Base
   ======================================================================== */
.ss-entity-grid__card {
  background-color: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  transition: transform var(--ss-transition, 0.3s ease), box-shadow var(--ss-transition, 0.3s ease), background-color var(--ss-transition, 0.3s ease);
}

.ss-entity-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

.ss-entity-grid__content {
  padding: var(--ss-card-padding, 20px);
}

/* ========================================================================
   Card Column Layout — fields split across 2 or 3 columns inside a card.
   Supports both Flexbox (.ss-card-cols--flex) and CSS Grid (--grid).
   Designer assigns fields via "Assign to Column" per-field control.
   ======================================================================== */

.ss-card-cols {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: stretch; /* ALWAYS stretch — equal column heights */
  width: 100%;
}

/* Grid engine override */
.ss-card-cols--grid {
  display: grid;
}
.ss-card-cols--2.ss-card-cols--grid { grid-template-columns: 1fr 1fr; }
.ss-card-cols--3.ss-card-cols--grid { grid-template-columns: 1fr 1fr 1fr; }

/* Individual column: flex column so justify-content positions content vertically */
.ss-card-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* overridden per-column via col_valign control */
}

/* Empty column collapses so it doesn't create blank dead space */
.ss-card-col:empty {
  flex: 0 0 0;
  padding: 0;
  overflow: hidden;
}

/* Named order markers (allow future reordering via `order` overrides if needed) */
.ss-card-col--1 { order: 1; }
.ss-card-col--2 { order: 2; }
.ss-card-col--3 { order: 3; }

/* Responsive: stack on mobile */
@media (max-width: 639px) {
  .ss-card-cols {
    flex-direction: column;
  }
  .ss-card-col {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
  }
  .ss-card-cols--grid {
    grid-template-columns: 1fr !important;
  }
}

.ss-entity-grid__title {
  margin: 0 0 8px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  line-height: 1.3;
}

.ss-entity-grid__title a {
  color: var(--ss-text, #1a1a1a);
  text-decoration: none;
}

.ss-entity-grid__title a:hover {
  color: var(--ss-primary, #2563eb);
}

/* ========================================================================
   Image
   ======================================================================== */
.ss-entity-grid__image {
  position: relative;
  overflow: hidden;
}

.ss-entity-grid__image img,
.ss-entity-grid__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Aspect ratios */
.ss-aspect-1x1 .ss-entity-grid__image { aspect-ratio: 1/1; }
.ss-aspect-4x3 .ss-entity-grid__image { aspect-ratio: 4/3; }
.ss-aspect-16x9 .ss-entity-grid__image { aspect-ratio: 16/9; }
.ss-aspect-3x2 .ss-entity-grid__image { aspect-ratio: 3/2; }

.ss-aspect-1x1 .ss-entity-grid__img,
.ss-aspect-4x3 .ss-entity-grid__img,
.ss-aspect-16x9 .ss-entity-grid__img,
.ss-aspect-3x2 .ss-entity-grid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image hover effects */
.ss-hover-zoom .ss-entity-grid__card:hover .ss-entity-grid__img { transform: scale(1.08); }
.ss-hover-brightness .ss-entity-grid__card:hover .ss-entity-grid__img { filter: brightness(1.1); }
.ss-hover-grayscale .ss-entity-grid__img { filter: grayscale(100%); transition: filter 0.4s ease; }
.ss-hover-grayscale .ss-entity-grid__card:hover .ss-entity-grid__img { filter: grayscale(0); }

/* Image overlay */
.ss-entity-grid__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  transition: background var(--ss-transition);
  pointer-events: none;
}
.ss-entity-grid__card:hover .ss-entity-grid__image::after {
  background: rgba(0, 0, 0, 0.05);
}

/* ========================================================================
   Field segments
   ======================================================================== */
.ss-entity-grid__address,
.ss-entity-grid__phone,
.ss-entity-grid__hours,
.ss-entity-grid__desc {
  margin: 4px 0;
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-light, #666);
  line-height: 1.5;
}

.ss-entity-grid__phone a {
  color: inherit;
  text-decoration: none;
}
.ss-entity-grid__phone a:hover {
  color: var(--ss-primary);
}

.ss-entity-grid__hours.ss-closed {
  color: #dc2626;
}

/* Badge row */
.ss-entity-grid__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* CTA button */
.ss-entity-grid__cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--ss-primary);
  color: #fff;
  border-radius: var(--ss-radius-sm);
  text-decoration: none;
  font-size: var(--ss-font-size-sm);
  font-weight: 600;
  transition: background var(--ss-transition-fast);
}
.ss-entity-grid__cta:hover {
  background: var(--ss-primary-hover);
  color: #fff;
}

/* ========================================================================
   Layout Preset: Card Grid (default)
   ======================================================================== */
.ss-layout-card-grid .ss-entity-grid__card {
  display: flex;
  flex-direction: column;
}

/* ========================================================================
   Layout Preset: Horizontal Cards
   ======================================================================== */
.ss-layout-horizontal {
  grid-template-columns: 1fr !important;
}

.ss-layout-horizontal .ss-entity-grid__card {
  display: grid;
  grid-template-columns: 40% 1fr;
}

.ss-layout-horizontal .ss-entity-grid__image {
  height: 100%;
}

.ss-layout-horizontal .ss-entity-grid__img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 600px) {
  .ss-layout-horizontal .ss-entity-grid__card {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Layout Preset: Compact List / Table
   ======================================================================== */
.ss-layout-compact-list {
  grid-template-columns: 1fr !important;
  gap: 0;
}

.ss-layout-compact-list .ss-entity-grid__card {
  border-radius: 0;
  border-bottom: 1px solid var(--ss-border);
  border-left: none;
  border-right: none;
  border-top: none;
}

.ss-layout-compact-list .ss-entity-grid__card:first-child {
  border-top: 1px solid var(--ss-border);
}

.ss-layout-compact-list .ss-entity-grid__content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
}

.ss-layout-compact-list .ss-entity-grid__image {
  display: none;
}

.ss-layout-compact-list .ss-entity-grid__card:hover {
  transform: none;
  box-shadow: none;
  background: var(--ss-bg-alt);
}

/* ========================================================================
   Layout Preset: Masonry
   ======================================================================== */
.ss-layout-masonry {
  display: block;
  column-count: 3;
  column-gap: var(--ss-gap);
}

.ss-layout-masonry.ss-cols-2 { column-count: 2; }
.ss-layout-masonry.ss-cols-4 { column-count: 4; }

.ss-layout-masonry .ss-entity-grid__card {
  break-inside: avoid;
  margin-bottom: var(--ss-gap);
}

.ss-layout-masonry .ss-entity-grid__img {
  height: auto;
  aspect-ratio: auto;
}

@media (max-width: 768px) {
  .ss-layout-masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .ss-layout-masonry { column-count: 1; }
}

/* ========================================================================
   Layout Preset: Hero + Grid
   ======================================================================== */
.ss-layout-hero-grid .ss-entity-grid__card:first-child {
  grid-column: 1 / -1;
}

.ss-layout-hero-grid .ss-entity-grid__card:first-child .ss-entity-grid__image img {
  max-height: 400px;
}

/* ========================================================================
   Layout Preset: Map + Sidebar
   ======================================================================== */
.ss-layout-map-sidebar {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
}

.ss-layout-map-sidebar .ss-entity-grid__map {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  background: #e5e7eb;
}

.ss-layout-map-sidebar .ss-entity-grid__list {
  overflow-y: auto;
  max-height: 100vh;
}

@media (max-width: 768px) {
  .ss-layout-map-sidebar {
    grid-template-columns: 1fr;
  }
  .ss-layout-map-sidebar .ss-entity-grid__map {
    position: relative;
    height: 300px;
  }
}

/* ========================================================================
   Layout Preset: Minimal / Text Only
   ======================================================================== */
.ss-layout-minimal {
  gap: 4px;
  grid-template-columns: 1fr !important;
}

.ss-layout-minimal .ss-entity-grid__card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.ss-layout-minimal .ss-entity-grid__card:hover {
  transform: none;
  box-shadow: none;
}

.ss-layout-minimal .ss-entity-grid__image {
  display: none;
}

.ss-layout-minimal .ss-entity-grid__content {
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-layout-minimal .ss-entity-grid__title {
  font-size: var(--ss-font-size);
  margin: 0;
}

/* ========================================================================
   Layout Preset: Magazine / Overlap
   ======================================================================== */
.ss-layout-magazine .ss-entity-grid__card {
  position: relative;
}

.ss-layout-magazine .ss-entity-grid__image {
  aspect-ratio: 16/10;
}

.ss-layout-magazine .ss-entity-grid__content {
  position: relative;
  margin: -40px 16px 0;
  background: var(--ss-bg);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  padding: var(--ss-card-padding);
  z-index: 1;
}

/* ========================================================================
   Search / Filter Bar
   ======================================================================== */
.ss-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  margin-bottom: 24px;
}

.ss-filter-bar__search {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.ss-filter-bar__search input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-font-size);
  background: var(--ss-bg);
  color: var(--ss-text);
  transition: border-color var(--ss-transition-fast);
}

.ss-filter-bar__search input:focus {
  border-color: var(--ss-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--ss-primary-light);
}

.ss-filter-bar__search::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
}

.ss-filter-bar__select select {
  padding: 10px 12px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-font-size);
  background: var(--ss-bg);
  color: var(--ss-text);
}

/* Button group filter */
.ss-filter-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ss-filter-buttons button {
  padding: 6px 14px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  background: var(--ss-bg);
  color: var(--ss-text);
  font-size: var(--ss-font-size-sm);
  cursor: pointer;
  transition: all var(--ss-transition-fast);
}

.ss-filter-buttons button:hover,
.ss-filter-buttons button.active {
  background: var(--ss-primary);
  color: #fff;
  border-color: var(--ss-primary);
}

/* ========================================================================
   Pagination
   ======================================================================== */
.ss-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 16px 0;
}

.ss-pagination a,
.ss-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-font-size-sm);
  text-decoration: none;
  color: var(--ss-text);
  background: var(--ss-bg);
  transition: all var(--ss-transition-fast);
}

.ss-pagination a:hover {
  background: var(--ss-primary-light);
  border-color: var(--ss-primary);
  color: var(--ss-primary);
}

.ss-pagination .current {
  background: var(--ss-primary);
  color: #fff;
  border-color: var(--ss-primary);
}

.ss-load-more {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  padding: 10px 24px;
  background: var(--ss-primary);
  color: #fff;
  border: none;
  border-radius: var(--ss-radius-sm);
  font-size: var(--ss-font-size);
  cursor: pointer;
  transition: background var(--ss-transition-fast);
}

.ss-load-more:hover {
  background: var(--ss-primary-hover);
}

/* ========================================================================
   Entity Card Widget
   ======================================================================== */
.ss-entity-card {
  border-radius: var(--ss-radius);
  overflow: hidden;
}

.ss-entity-card--horizontal {
  display: grid;
  grid-template-columns: 40% 1fr;
}

.ss-entity-card--overlay {
  position: relative;
}

.ss-entity-card--overlay .ss-entity-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: #fff;
  padding: 24px;
}

.ss-entity-card--minimal {
  border: none;
  background: transparent;
}

/* ========================================================================
   Entity Detail Widget
   ======================================================================== */
.ss-entity-detail {
  max-width: 1000px;
}

.ss-entity-detail__section {
  margin-bottom: 24px;
}

.ss-entity-detail__section-title {
  font-size: var(--ss-font-size-lg);
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ss-primary);
}

/* Sidebar layout */
.ss-entity-detail--sidebar {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
}

@media (max-width: 768px) {
  .ss-entity-detail--sidebar {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Menu Display Widget v2
   ======================================================================== */

/* ── Wrapper ── */
.ss-menu {
  width: 100%;
}

/* ── Filter Bar ── */
.ss-menu-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  align-items: center;
}
.ss-menu-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: #f3f4f6;
  color: #374151;
  font-size: var(--ss-font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}
.ss-menu-filter__btn:hover {
  background: #e5e7eb;
  color: #111827;
}
.ss-menu-filter__btn--active {
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-color: var(--ss-primary, #6366f1);
}
.ss-menu-filter__btn--active:hover {
  background: var(--ss-primary-hover, #4f46e5);
  border-color: var(--ss-primary-hover, #4f46e5);
}
.ss-menu-filter__count {
  font-size: 0.75em;
  opacity: 0.7;
  font-weight: 400;
}
.ss-menu-filter__btn--active .ss-menu-filter__count {
  opacity: 0.85;
}

/* Filter: Pills variant (default — rounded, compact) */
.ss-menu-filter--pills .ss-menu-filter__btn {
  border-radius: 20px;
}

/* Filter: Badges variant (outlined, smaller) */
.ss-menu-filter--badges .ss-menu-filter__btn {
  border-radius: 4px;
  padding: 4px 12px;
  font-size: var(--ss-font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}
.ss-menu-filter--badges .ss-menu-filter__btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}
.ss-menu-filter--badges .ss-menu-filter__btn--active {
  background: var(--ss-primary, #6366f1);
  border-color: var(--ss-primary, #6366f1);
  color: #fff;
}

/* Filter: Underline variant (text buttons with active underline) */
.ss-menu-filter--underline .ss-menu-filter__btn {
  border-radius: 0;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6b7280;
}
.ss-menu-filter--underline .ss-menu-filter__btn:hover {
  color: #374151;
  background: transparent;
  border-bottom-color: #d1d5db;
}
.ss-menu-filter--underline .ss-menu-filter__btn--active {
  background: transparent;
  color: var(--ss-primary, #6366f1);
  border-bottom-color: var(--ss-primary, #6366f1);
}

/* Filter: Buttons variant (rectangular, solid) */
.ss-menu-filter--buttons .ss-menu-filter__btn {
  border-radius: var(--ss-radius-sm, 4px);
  padding: 8px 20px;
  border: 1px solid #d1d5db;
  background: #fff;
  font-weight: 500;
}
.ss-menu-filter--buttons .ss-menu-filter__btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.ss-menu-filter--buttons .ss-menu-filter__btn--active {
  background: var(--ss-primary, #6366f1);
  border-color: var(--ss-primary, #6366f1);
  color: #fff;
}

/* Filter: Hidden section transitions */
.ss-menu__section[hidden] {
  display: none;
}
.ss-menu-filter-empty {
  text-align: center;
  padding: 24px;
  color: var(--ss-text-light, #6b7280);
}

/* ── Menu Body (filter target wrapper) ── */
.ss-menu__body {
  width: 100%;
}

/* ── Section Container ── */
.ss-menu__section {
  margin-bottom: 40px;
}
.ss-menu__section:last-child {
  margin-bottom: 0;
}

/* ── Section Header ── */
.ss-menu__section-header {
  margin-bottom: 16px;
}

.ss-menu__section-title {
  font-size: var(--ss-font-size-xl, 1.5rem);
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 0;
  line-height: 1.3;
}
.ss-menu__section-title--bordered {
  padding-bottom: 8px;
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: var(--ss-border, #e5e7eb);
}

.ss-menu__section-desc {
  font-size: var(--ss-font-size-sm, 0.875rem);
  color: var(--ss-text-light, #6b7280);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Items Grid (responsive columns) ── */
.ss-menu__items-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 32px;
  row-gap: 0;
}

/* ── Menu Item ── */
.ss-menu__item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Image position variants */
.ss-menu__item--img-left {
  flex-direction: row;
}
.ss-menu__item--img-right {
  flex-direction: row;
}
.ss-menu__item--img-top {
  flex-direction: column;
}
.ss-menu__item--img-left .ss-menu__item-image {
  margin-right: 16px;
}
.ss-menu__item--img-right .ss-menu__item-image {
  margin-left: 16px;
  order: 2;
}
.ss-menu__item--img-right .ss-menu__item-body {
  order: 1;
}
.ss-menu__item--img-top .ss-menu__item-image {
  margin-bottom: 12px;
  width: 100%;
}

/* ── Item Dividers ── */
.ss-menu__item--divider {
  border-bottom-width: 1px;
}
.ss-menu__item--divider-solid {
  border-bottom-style: solid;
  border-bottom-color: var(--ss-border, #e5e7eb);
}
.ss-menu__item--divider-dashed {
  border-bottom-style: dashed;
  border-bottom-color: var(--ss-border, #e5e7eb);
}
.ss-menu__item--divider-dotted {
  border-bottom-style: dotted;
  border-bottom-color: var(--ss-border, #e5e7eb);
}
.ss-menu__item--divider-dots {
  border-bottom: none;
  background-image: radial-gradient(circle, var(--ss-border, #e5e7eb) 1px, transparent 1px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  background-position: bottom;
  padding-bottom: 13px;
}

/* ── Item Body ── */
.ss-menu__item-body {
  flex: 1;
  min-width: 0;
}

/* ── Item Header (name + connector + price) ── */
.ss-menu__item-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}

.ss-menu__item-name {
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  flex-shrink: 0;
}

/* ── Name–Price Connectors ── */
.ss-menu__connector {
  flex: 1;
  min-width: 16px;
}
.ss-menu__connector--dots {
  border-bottom: 2px dotted var(--ss-border, #d1d5db);
  align-self: baseline;
  margin-bottom: 4px;
}
.ss-menu__connector--dashes {
  border-bottom: 2px dashed var(--ss-border, #d1d5db);
  align-self: baseline;
  margin-bottom: 4px;
}
.ss-menu__connector--line {
  border-bottom: 1px solid var(--ss-border, #d1d5db);
  align-self: baseline;
  margin-bottom: 4px;
}
.ss-menu__connector--space {
  /* flex: 1 already pushes price right */
}
.ss-menu__connector--none {
  display: none;
}

/* ── Price ── */
.ss-menu__price {
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  white-space: nowrap;
  flex-shrink: 0;
}
.ss-menu__price--badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--ss-primary-light, #eef2ff);
  margin-top: 4px;
}

/* ── Description ── */
.ss-menu__item-desc {
  font-size: var(--ss-font-size-sm, 0.875rem);
  color: var(--ss-text-light, #6b7280);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Badges (inline + below) ── */
.ss-menu__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ss-menu__badges--inline {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}
.ss-menu__badges--below {
  display: flex;
  margin-top: 6px;
}
.ss-menu__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--ss-font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.4;
  background: #ecfdf5;
  color: #065f46;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

/* ── Badge Variants — Pieces ── */
.ss-menu__badge--pieces {
  background: #dbeafe;
  color: #1e40af;
}

/* ── Badge Variants — Dietary (individual presets) ── */
.ss-menu__badge--vegetarian {
  background: #dcfce7;
  color: #166534;
}
.ss-menu__badge--vegan {
  background: #d1fae5;
  color: #065f46;
}
.ss-menu__badge--gluten_free,
.ss-menu__badge--gluten-free {
  background: #fef3c7;
  color: #92400e;
}
.ss-menu__badge--dairy_free,
.ss-menu__badge--dairy-free {
  background: #fce7f3;
  color: #9d174d;
}
.ss-menu__badge--nut_free,
.ss-menu__badge--nut-free {
  background: #fee2e2;
  color: #991b1b;
}
.ss-menu__badge--halal {
  background: #e0e7ff;
  color: #3730a3;
}
.ss-menu__badge--kosher {
  background: #f3e8ff;
  color: #6b21a8;
}
.ss-menu__badge--hot {
  background: #fee2e2;
  color: #991b1b;
}
.ss-menu__badge--new {
  background: #fef3c7;
  color: #92400e;
}
.ss-menu__badge--spicy {
  background: #fff7ed;
  color: #c2410c;
}

/* ── Badge Variants — Taxonomy (defaults, overridden by inline styles) ── */
.ss-menu__badge--taxonomy {
  background: #f3f4f6;
  color: #374151;
  text-transform: none;
  font-weight: 500;
}

/* ── Badge Variants — Pieces size tiers ── */
.ss-menu__badge--pieces-1,
.ss-menu__badge--pieces-2,
.ss-menu__badge--pieces-3,
.ss-menu__badge--pieces-4,
.ss-menu__badge--pieces-5 {
  background: #dbeafe;
  color: #1e40af;
}
.ss-menu__badge--pieces-6,
.ss-menu__badge--pieces-7,
.ss-menu__badge--pieces-8,
.ss-menu__badge--pieces-9,
.ss-menu__badge--pieces-10,
.ss-menu__badge--pieces-11,
.ss-menu__badge--pieces-12 {
  background: #bfdbfe;
  color: #1e3a8a;
}
.ss-menu__badge--pieces-13,
.ss-menu__badge--pieces-14,
.ss-menu__badge--pieces-15,
.ss-menu__badge--pieces-16 {
  background: #93c5fd;
  color: #1e3a8a;
}
/* 17+ pieces — large portions / platters */
.ss-menu__badge[class*="ss-menu__badge--pieces-"]:not(.ss-menu__badge--pieces-1):not(.ss-menu__badge--pieces-2):not(.ss-menu__badge--pieces-3):not(.ss-menu__badge--pieces-4):not(.ss-menu__badge--pieces-5):not(.ss-menu__badge--pieces-6):not(.ss-menu__badge--pieces-7):not(.ss-menu__badge--pieces-8):not(.ss-menu__badge--pieces-9):not(.ss-menu__badge--pieces-10):not(.ss-menu__badge--pieces-11):not(.ss-menu__badge--pieces-12):not(.ss-menu__badge--pieces-13):not(.ss-menu__badge--pieces-14):not(.ss-menu__badge--pieces-15):not(.ss-menu__badge--pieces-16) {
  background: #60a5fa;
  color: #fff;
}

/* ── Calories / Allergens ── */
.ss-menu__calories,
.ss-menu__allergens {
  display: block;
  font-size: var(--ss-font-size-xs, 0.75rem);
  color: var(--ss-text-light, #6b7280);
  margin-top: 4px;
}

/* ── Item Image ── */
.ss-menu__item-image {
  width: 80px;
  height: 80px;
  border-radius: var(--ss-radius-sm, 4px);
  overflow: hidden;
  flex-shrink: 0;
}
.ss-menu__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════════
   Accordion Preset
   ════════════════════════════════════════════════════════════════ */
.ss-menu--accordion .ss-menu__accordion {
  border: none;
  margin-bottom: 0;
}
.ss-menu--accordion .ss-menu__accordion + .ss-menu__accordion {
  margin-top: 4px;
}

.ss-menu__accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 12px 0;
}
.ss-menu__accordion-toggle::-webkit-details-marker {
  display: none;
}

/* Toggle chevron */
.ss-menu__accordion-toggle::after {
  content: '▾';
  font-size: 0.8em;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 12px;
}
details.ss-menu__accordion:not([open]) .ss-menu__accordion-toggle::after {
  transform: rotate(-90deg);
}

.ss-menu__accordion-body {
  padding-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════════
   Tabbed Preset
   ════════════════════════════════════════════════════════════════ */
.ss-menu__tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid var(--ss-border, #e5e7eb);
  margin-bottom: 20px;
}

.ss-menu__tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-size: var(--ss-font-size, 1rem);
  cursor: pointer;
  color: var(--ss-text-light, #6b7280);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.ss-menu__tab:hover {
  color: var(--ss-text, #1a1a1a);
}
.ss-menu__tab--active {
  color: var(--ss-primary, #6366f1);
  border-bottom-color: var(--ss-primary, #6366f1);
  font-weight: 600;
}

.ss-menu__tab-panel {
  animation: ss-menu-fade-in 0.2s ease;
}
.ss-menu__tab-panel[hidden] {
  display: none;
}

@keyframes ss-menu-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .ss-menu__items-grid {
    grid-template-columns: 1fr !important;
  }
  .ss-menu__item--img-left,
  .ss-menu__item--img-right {
    flex-direction: column;
  }
  .ss-menu__item--img-left .ss-menu__item-image,
  .ss-menu__item--img-right .ss-menu__item-image {
    margin: 0 0 8px;
    order: -1;
    width: 100%;
    height: auto;
  }
  .ss-menu__tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .ss-menu__tab {
    scroll-snap-align: start;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: var(--ss-font-size-sm, 0.875rem);
  }
}

/* ========================================================================
   Opening Hours Widget
   ======================================================================== */
.ss-hours-wrap {
  display: block;
}

/* Heading */
.ss-hours__heading {
  margin: 0 0 12px;
  font-size: var(--ss-font-size-lg);
  font-weight: 700;
}

/* Status indicator */
.ss-hours--open,
.ss-hours--closed {
  display: inline-block;
  margin-bottom: 8px;
  font-size: var(--ss-font-size-sm);
  font-weight: 600;
}
.ss-hours--open   { color: #16a34a; }
.ss-hours--closed { color: #dc2626; }

/* ---- Table preset ---- */
.ss-hours__table {
  width: 100%;
  border-collapse: collapse;
}
.ss-hours__table tr.ss-hours__row {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e5e7eb;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
/* Per-cell base defaults — overridden by Elementor controls */
.ss-hours__table td.ss-hours__day {
  padding: 6px 12px 6px 0;
  vertical-align: top;
  min-width: 110px;
  white-space: nowrap;
}
.ss-hours__table td.ss-hours__time {
  padding: 6px 0;
  vertical-align: top;
  width: 100%;
}
.ss-hours__table td {
  transition: background-color 150ms ease, color 150ms ease;
}
/* Compact / inline day label (non-table) */
.ss-hours__day {
  min-width: 110px;
  display: inline-block;
}
/* Today row — appearance fully driven by Elementor controls */
.ss-hours__row--today {
}
/* Row hover — background driven by Elementor; cursor hint */
.ss-hours__table tr.ss-hours__row:hover,
.ss-hours--compact .ss-hours__row:hover {
  cursor: default;
}
.ss-hours__closed {
  color: #dc2626;
}

/* ---- Compact preset (div-based rows) ---- */
.ss-hours--compact .ss-hours__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #e5e7eb;
}
.ss-hours--compact .ss-hours__day {
  min-width: 110px;
  flex-shrink: 0;
}

/* ---- Today-only preset ---- */
.ss-hours__today {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ss-opening-hours--today .ss-hours-today {
  font-size: var(--ss-font-size-lg);
  font-weight: 600;
}

/* ---- Status badge preset ---- */
.ss-hours-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: var(--ss-font-size-sm);
}
.ss-hours-badge--open   { background: #dcfce7; color: #16a34a; }
.ss-hours-badge--closed { background: #fee2e2; color: #dc2626; }

/* ---- Column grid layout ---- */
.ss-hours__grid {
  display: grid;
  grid-template-columns: repeat(var(--ss-hours-cols, 2), 1fr);
}
.ss-hours__grid--cols-2 {
  --ss-hours-cols: 2;
}
.ss-hours__grid--cols-3 {
  --ss-hours-cols: 3;
}
.ss-hours__col {
  min-width: 0; /* prevent grid overflow */
}
/* column-gap and row-gap driven by Elementor column_gap / row_gap selectors */

@media (max-width: 768px) {
  .ss-hours__grid--cols-2,
  .ss-hours__grid--cols-3 {
    grid-template-columns: 1fr;
  }
}

/* ---- Note element ---- */
.ss-hours__note {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 0.875em;
  line-height: 1.5;
  color: #6b7280;
}

/* ---- Hidden day labels ---- */
/* Table: day column collapses, time cell takes full width */
.ss-hours__table tr.ss-hours__row--no-label td.ss-hours__time {
  width: 100%;
  padding-left: 0;
}
/* Compact: row no longer needs space-between, time stacks flush */
.ss-hours--compact .ss-hours__row--no-label {
  justify-content: flex-start;
}
/* Today-only: remove inline-flex gap for day label */
.ss-hours__today--no-label {
  display: block;
}

/* ========================================================================
   Address Block Widget
   ======================================================================== */
.ss-address-block {}

.ss-address-block--with-map {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  align-items: start;
}

.ss-address-block__map {
  border-radius: var(--ss-radius-sm);
  overflow: hidden;
}

.ss-address-block__map img {
  width: 100%;
  height: auto;
}

/* ========================================================================
   Contact Block Widget
   ======================================================================== */
.ss-contact-block--inline .ss-contact-item {
  display: inline;
}

.ss-contact-block--stacked .ss-contact-item {
  display: block;
  margin-bottom: 8px;
}

.ss-contact-block--icon-only .ss-contact-label {
  display: none;
}

.ss-contact-item a {
  color: var(--ss-text);
  text-decoration: none;
}

.ss-contact-item a:hover {
  color: var(--ss-primary);
}

/* ========================================================================
   Relation List Widget
   ======================================================================== */
.ss-relation-list--chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ss-relation-chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
  border-radius: 999px;
  font-size: var(--ss-font-size-sm);
  color: var(--ss-text);
  text-decoration: none;
  transition: all var(--ss-transition-fast);
}

.ss-relation-chip:hover {
  background: var(--ss-primary-light);
  border-color: var(--ss-primary);
  color: var(--ss-primary);
}

/* Carousel */
.ss-relation-list--carousel {
  display: flex;
  gap: var(--ss-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.ss-relation-list--carousel .ss-entity-grid__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* Count only */
.ss-relation-count {
  font-size: var(--ss-font-size-lg);
  font-weight: 700;
  color: var(--ss-primary);
}

/* ========================================================================
   Smart Field Widget
   ======================================================================== */
.ss-smart-field {
  color: var(--ss-text);
}

.ss-smart-field__before,
.ss-smart-field__after {
  color: var(--ss-text-light);
}

/* ========================================================================
   Dynamic Field Rows (entity-grid / entity-card repeater field display)
   ======================================================================== */

/* ── Base row ── */
.ss-entity-field {
  display: flex;
  flex-direction: var(--ss-field-direction, row);
  align-items: var(--ss-field-align-items, flex-start);
  gap: 6px;
  margin-bottom: 8px;
  font-size: var(--ss-font-size-sm, 0.875rem);
  color: var(--ss-text, #374151);
  border: 0px solid transparent;   /* placeholder for Elementor border controls */
  border-radius: 0;
  /* Smooth state transitions — duration/easing overridden via Elementor controls */
  transition-property: background-color, border-color, border-radius, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* Remove orphaned bottom margin on the last field inside a flex column
   so justify-content centering isn't visually offset */
.ss-card-col > .ss-entity-field:last-child,
.ss-fg__col > .ss-entity-field:last-child {
  margin-bottom: 0;
}

/* ── Icon ── */
.ss-field-icon {
  flex-shrink: 0;
  color: var(--ss-field-icon-color, var(--ss-primary, #6366f1));
  line-height: 1.4;
  /* State transitions */
  transition-property: color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}
.ss-entity-field:hover .ss-field-icon,
.ss-entity-grid__card:hover .ss-entity-field .ss-field-icon {
  color: var(--ss-field-icon-hover-color, var(--ss-field-icon-color, var(--ss-primary, #6366f1)));
}
.ss-entity-field:focus-within .ss-field-icon {
  color: var(--ss-field-icon-active-color, var(--ss-field-icon-hover-color, var(--ss-field-icon-color, var(--ss-primary, #6366f1))));
}

/* ── Label ── */
.ss-field-label {
  font-weight: var(--ss-field-label-font-weight, 600);
  font-size: var(--ss-field-label-font-size, inherit);
  text-transform: var(--ss-field-label-text-transform, inherit);
  color: var(--ss-field-label-color, var(--ss-gray-700, #374151));
  text-align: var(--ss-field-label-align, left);
  width: var(--ss-field-label-width, auto);
  flex-shrink: 0;
  /* State transitions */
  transition-property: color, text-decoration-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

/* ── Value ── */
.ss-field-value {
  font-size: var(--ss-field-value-font-size, inherit);
  font-weight: var(--ss-field-value-font-weight, inherit);
  text-transform: var(--ss-field-value-text-transform, inherit);
  color: var(--ss-field-value-color, var(--ss-gray-600, #4b5563));
  text-align: var(--ss-field-value-align, left);
  word-break: break-word;
  /* State transitions */
  transition-property: color, text-decoration-color;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

.ss-field-value a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

.ss-field-value a:hover {
  text-decoration: underline;
}

/* ── Per-field CSS-var colour cascade ──
 * Vars are set as inline styles via render_field_row() from repeater overrides.
 * The fallback chain:  per-field hover → per-field normal → global default
 * Elementor global selector rules (higher specificity) take precedence over these
 * for global controls; these rules serve the per-field repeater overrides.
 */
.ss-entity-field:hover .ss-field-label {
  color: var(--ss-field-label-hover-color, var(--ss-field-label-color, var(--ss-gray-700, #374151)));
}
.ss-entity-field:hover .ss-field-value {
  color: var(--ss-field-value-hover-color, var(--ss-field-value-color, var(--ss-gray-600, #4b5563)));
}

/* ── Active / Focus-within (keyboard + programmatic focus) ── */
.ss-entity-field:focus-within .ss-field-label {
  color: var(--ss-field-label-active-color, var(--ss-field-label-hover-color, var(--ss-field-label-color, var(--ss-gray-700, #374151))));
}
.ss-entity-field:focus-within .ss-field-value {
  color: var(--ss-field-value-active-color, var(--ss-field-value-hover-color, var(--ss-field-value-color, var(--ss-gray-600, #4b5563))));
}

/* ── Prefix / suffix ── */
.ss-field-prefix,
.ss-field-suffix {
  color: var(--ss-text-light, #9ca3af);
}

/* ── Display style variants ── */

/* Inline: label and value on one line separated by a colon */
.ss-field-inline {
  flex-direction: row;
  align-items: baseline;
}

.ss-field-inline .ss-field-label::after {
  content: ': ';
  font-weight: 400;
}

/* Icon-row: large icon floated left, content wraps on the right */
.ss-field-icon-row {
  align-items: center;
}

.ss-field-icon-row .ss-field-icon {
  font-size: 1.1em;
}

/* Block: label stacked above value */
.ss-field-style-block {
  --ss-field-direction: column;
  gap: 2px;
}

/* ── Badge ── */
.ss-field-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  background: var(--ss-primary-light, #eef2ff);
  color: var(--ss-primary-dark, #3730a3);
  line-height: 1.6;
  transition: background-color 150ms ease, color 150ms ease;
}

/* ── Button / CTA ──────────────────────────────────────────────────────── */

/* CSS vars with per-style defaults overridden by Elementor controls */
.ss-field-btn {
  --ss-btn-bg:           var(--ss-primary, #6366f1);
  --ss-btn-bg-hover:     var(--ss-btn-bg);
  --ss-btn-color:        #fff;
  --ss-btn-border-color: transparent;
  --ss-btn-radius:       6px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid var(--ss-btn-border-color);
  border-radius: var(--ss-btn-radius);
  background-color: var(--ss-btn-bg);
  color: var(--ss-btn-color);
  transition: background-color 150ms ease, color 150ms ease,
              border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.ss-field-btn:hover {
  background-color: var(--ss-btn-bg-hover, var(--ss-btn-bg));
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ss-field-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow: none;
}

.ss-field-btn:focus-visible {
  outline: 3px solid var(--ss-btn-bg);
  outline-offset: 3px;
}

/* Size variants */
.ss-field-btn--sm { padding: 4px 12px;  font-size: 0.78rem; }
.ss-field-btn--md { padding: 8px 18px;  font-size: 0.9rem;  }
.ss-field-btn--lg { padding: 12px 28px; font-size: 1rem;    }

/* Full-width */
.ss-field-btn--full {
  width: 100%;
  display: flex;
}

/* Style variants */
.ss-field-btn--secondary {
  --ss-btn-bg:    var(--ss-gray-200, #e5e7eb);
  --ss-btn-color: var(--ss-gray-800, #1f2937);
}

.ss-field-btn--outline {
  --ss-btn-bg:           transparent;
  --ss-btn-color:        var(--ss-primary, #6366f1);
  --ss-btn-border-color: var(--ss-primary, #6366f1);
}

.ss-field-btn--ghost {
  --ss-btn-bg:    transparent;
  --ss-btn-color: var(--ss-primary, #6366f1);
  border-color:   transparent;
}

.ss-field-btn--ghost:hover {
  --ss-btn-bg: var(--ss-primary-light, #eef2ff);
  filter: none;
  transform: none;
  box-shadow: none;
}

.ss-field-btn--link {
  --ss-btn-bg:    transparent;
  --ss-btn-color: var(--ss-primary, #6366f1);
  border-color:   transparent;
  padding-left: 0;
  padding-right: 0;
  text-decoration: underline;
  border-radius: 0;
}

.ss-field-btn--link:hover {
  --ss-btn-color: var(--ss-primary-dark, #3730a3);
  filter: none;
  transform: none;
  box-shadow: none;
}

/* CTA variant */
.ss-field-btn--cta {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 48px;
}

/* Icon inside button */
.ss-field-btn__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.ss-field-btn__icon--emoji {
  font-size: 1.1em;
}

/* When a field wrapper is in button mode: align content properly */
.ss-field-style-button .ss-field-label,
.ss-field-style-cta .ss-field-label {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--ss-gray-500, #6b7280);
  margin-bottom: 6px;
  display: block;
}

.ss-field-style-button,
.ss-field-style-cta {
  flex-direction: column;
  align-items: flex-start;
}

 — default brand outline on keyboard focus
   ======================================================================== */

/* Remove browser default so our custom Elementor control ring is clean */
.ss-entity-grid__card:focus {
  outline: none;
}

/* Default accessible focus ring; overridden by Elementor card_focus_ring_color/width */
.ss-entity-grid__card:focus-within {
  outline: 2px solid var(--ss-primary, #6366f1);
  outline-offset: 2px;
}

/* ========================================================================
   Item Link — Stretched link overlay for clickable cards/rows
   ======================================================================== */

/* Card link container */
.ss-has-card-link {
  position: relative;
  cursor: pointer;
}

.ss-card-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  text-decoration: none;
  color: transparent;
  background: transparent;
  transition: background-color 150ms ease;
  border-radius: inherit;
}

/* Elevate inner interactive elements above the overlay */
.ss-has-card-link .ss-entity-grid__title a,
.ss-has-card-link .ss-entity-grid__cta,
.ss-has-card-link .ss-field-btn,
.ss-has-card-link .ss-field-value a,
.ss-has-card-link .ss-entity-grid__image a {
  position: relative;
  z-index: 1;
}

/* Content area needs stacking context for inner links */
.ss-has-card-link .ss-entity-grid__content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Re-enable pointer events on interactive children */
.ss-has-card-link .ss-entity-grid__title a,
.ss-has-card-link .ss-entity-grid__cta,
.ss-has-card-link .ss-field-btn,
.ss-has-card-link .ss-field-value a,
.ss-has-card-link .ss-entity-grid__image a,
.ss-has-card-link .ss-entity-grid__image {
  pointer-events: auto;
}

/* Row link overlay for row-list layout */
.ss-has-row-link {
  position: relative;
  cursor: pointer;
}

.ss-row-link {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  text-decoration: none;
  color: transparent;
  background: transparent;
  transition: background-color 150ms ease;
}

/* Row cells stay above the overlay */
.ss-has-row-link .ss-rl__td {
  position: relative;
  z-index: 1;
}

.ss-has-row-link .ss-rl__td a {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Data-table clickable rows (JS-based, no overlay element) */
.ss-dt tr.ss-has-row-link {
  cursor: pointer;
}

.ss-dt tr.ss-has-row-link:hover {
  background-color: var(--ss-rl-row-hover-bg);
}

/* ========================================================================
   Single-Row / Horizontal-Scroll Layout
   ======================================================================== */

.ss-entity-grid.ss-single-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: inherit;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.2) transparent;
  padding-bottom: 8px;
}

.ss-entity-grid.ss-single-row::-webkit-scrollbar {
  height: 4px;
}
.ss-entity-grid.ss-single-row::-webkit-scrollbar-track {
  background: transparent;
}
.ss-entity-grid.ss-single-row::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.18);
  border-radius: 4px;
}

.ss-entity-grid.ss-single-row .ss-entity-grid__card {
  flex: 0 0 auto;
  min-width: 260px;
}

/* ========================================================================
   Row-list / data-table layout
   ======================================================================== */

.ss-layout-row-list,
.ss-layout-data-table {
  --ss-rl-header-bg: transparent;
  --ss-rl-header-color: inherit;
  --ss-rl-header-border: 2px solid var(--ss-gray-300, #d1d5db);
  --ss-rl-row-hover-bg: var(--ss-gray-50, #f9fafb);
  --ss-rl-row-border: 1px solid var(--ss-gray-200, #e5e7eb);
  --ss-rl-zebra-bg: var(--ss-gray-50, #f9fafb);
  width: 100%;
}

/* ── CSS-grid row-list ───────────────────────────────────────────── */

.ss-layout-row-list {
  display: grid;
  grid-template-columns: var(--ss-rl-cols, 1fr);
  overflow-x: auto;
}

.ss-rl__header,
.ss-rl__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.ss-rl__header {
  background-color: var(--ss-rl-header-bg);
  color: var(--ss-rl-header-color);
  border-bottom: var(--ss-rl-header-border);
  position: relative;
}

.ss-rl--sticky-header .ss-rl__header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--ss-rl-header-bg, #fff);
}

.ss-rl__th {
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ss-rl__row {
  border-bottom: var(--ss-rl-row-border);
  transition: background-color 150ms ease;
}

.ss-rl__row:hover {
  background-color: var(--ss-rl-row-hover-bg);
}

.ss-rl--zebra .ss-rl__row:nth-child(even) {
  background-color: var(--ss-rl-zebra-bg);
}

.ss-rl__td {
  min-height: 40px;
}

/* Remove card chrome from cells */
.ss-rl__td .ss-entity-field {
  margin-bottom: 0;
  border: none;
  background: none;
  padding: 0;
}

/* ── Semantic table (data-table) ─────────────────────────────────── */

.ss-dt {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.ss-dt thead tr,
.ss-dt tbody tr {
  border-bottom: var(--ss-rl-row-border);
}

.ss-dt thead tr {
  border-bottom: var(--ss-rl-header-border);
  background-color: var(--ss-rl-header-bg);
}

.ss-dt thead th {
  text-align: left;
  white-space: nowrap;
}

.ss-dt tbody tr {
  transition: background-color 150ms ease;
}

.ss-dt tbody tr:hover {
  background-color: var(--ss-rl-row-hover-bg);
}

.ss-dt.ss-rl--zebra tbody tr:nth-child(even) {
  background-color: var(--ss-rl-zebra-bg);
}

.ss-dt td .ss-entity-field {
  margin-bottom: 0;
  border: none;
  background: none;
  padding: 0;
}

/* ── Responsive: stack on mobile ─────────────────────────────────── */

@media (max-width: 767px) {
  .ss-layout-row-list .ss-rl__header {
    display: none;
  }

  .ss-layout-row-list .ss-rl__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }

  .ss-layout-row-list .ss-rl__td {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    align-items: baseline;
  }

  .ss-layout-row-list .ss-rl__td::before {
    content: attr(data-label);
    font-weight: 700;
    min-width: 100px;
    flex-shrink: 0;
    color: var(--ss-gray-500, #6b7280);
    font-size: 0.8em;
  }

  .ss-layout-data-table .ss-dt {
    display: block;
    overflow-x: auto;
  }
}

/* ========================================================================
   Link & CTA transitions
   ======================================================================== */

.ss-field-value a,
.ss-entity-grid__phone,
.ss-entity-grid__email,
.ss-entity-grid__cta,
.ss-entity-grid__title a {
  transition: color 150ms ease, background-color 150ms ease,
              text-decoration-color 150ms ease, transform 150ms ease;
}

/* CTA button — base display */
.ss-entity-grid__cta {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

/* Title link — reset so colour tokens work */
.ss-entity-grid__title a {
  color: inherit;
  text-decoration: none;
}

/* ========================================================================
   Entity Field Group — row & child transitions + per-row CSS var cascades
   ======================================================================== */

/* ── Field-list containers: flex column so gap works at all breakpoints ── */
.ss-fg__dl,
.ss-fg__list,
.ss-fg__two-col {
  display: flex;
  flex-direction: column;
  gap: 8px; /* fallback — overridden by Elementor items_gap control */
}

/* Reset list defaults */
.ss-fg__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-fg__dl {
  margin: 0;
}

.ss-fg__row {
  transition: background-color 150ms ease, border-bottom-color 150ms ease;
}

.ss-fg__label,
.ss-fg__value {
  transition: color 150ms ease, text-decoration-color 150ms ease;
}

/* Hover state — consumed from CSS vars set by global control on .ss-fg__row
   OR overridden per-row via inline style on the row wrapper element. */
.ss-fg__row:hover .ss-fg__label {
  color: var(--ss-fg-label-hover-color, currentColor);
}
.ss-fg__row:hover .ss-fg__value {
  color: var(--ss-fg-value-hover-color, currentColor);
}
.ss-fg__row:focus-within .ss-fg__label {
  color: var(--ss-fg-label-active-color, currentColor);
}
.ss-fg__row:focus-within .ss-fg__value {
  color: var(--ss-fg-value-active-color, currentColor);
}

.ss-fg__badge {
  transition: background-color 150ms ease, color 150ms ease;
}

/* ========================================================================
   Entity Field Group — Multi-Column Layout
   Supports both Flexbox and CSS Grid engines with 1–3 named columns.
   Responsive: columns stack vertically below 640 px.
   ======================================================================== */

/* ── Column container ─────────────────────────────────────────────────── */

.ss-fg__cols {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: stretch; /* ALWAYS stretch — gives all columns the same height as the tallest */
  width: 100%;
}

/* CSS Grid engine override */
.ss-fg--engine-grid .ss-fg__cols {
  display: grid;
}

.ss-fg--cols-2.ss-fg--engine-grid .ss-fg__cols {
  grid-template-columns: 1fr 1fr;
}

.ss-fg--cols-3.ss-fg--engine-grid .ss-fg__cols {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Individual columns ───────────────────────────────────────────────── */

.ss-fg__col {
  flex: 1 1 0;
  min-width: 0; /* prevent flex overflow */
  display: flex;
  flex-direction: column;
  justify-content: center; /* default: middle — overridden by col_valign control */
}

/* Empty column placeholder: collapse width so it doesn't take space */
.ss-fg__col:empty {
  flex: 0 0 0;
  padding: 0;
  overflow: hidden;
}

/* Named column selectors — allow per-column Elementor width overrides */
.ss-fg__col--1 { order: 1; }
.ss-fg__col--2 { order: 2; }
.ss-fg__col--3 { order: 3; }

/* ── Table preset inside columns ──────────────────────────────────────── */

.ss-fg__col .ss-fg__table {
  width: 100%;
  border-collapse: collapse;
}

/* ── DL preset inside columns ─────────────────────────────────────────── */

.ss-fg__col .ss-fg__dl {
  margin: 0;
}

/* ── Responsive: stack columns on small viewports ─────────────────────── */

@media (max-width: 639px) {
  .ss-fg__cols {
    flex-direction: column;
  }

  .ss-fg__col {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
  }

  .ss-fg--engine-grid .ss-fg__cols {
    grid-template-columns: 1fr !important;
  }
}

/* ── Tablet: 3-col collapses to 2-col ─────────────────────────────────── */

@media (min-width: 640px) and (max-width: 1023px) {
  .ss-fg--cols-3 .ss-fg__cols {
    flex-wrap: wrap;
  }

  .ss-fg--cols-3 .ss-fg__col {
    flex: 1 1 calc(50% - 12px);
    min-width: calc(50% - 12px);
  }

  .ss-fg--cols-3 .ss-fg__col--3 {
    flex: 1 1 100%;
  }

  .ss-fg--cols-3.ss-fg--engine-grid .ss-fg__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ========================================================================
   Entity Field Group — Field-level Schema.org microdata note:
   .ss-fg__val[itemprop] is emitted by PHP render_value() based on field key.
   No extra CSS needed — itemprop is a semantic attribute only.
   ======================================================================== */

/* ========================================================================
   NEW WIDGET LIBRARY — Phase 1-4 (15 widgets)
   Pricing Table, FAQ, CTA Banner, Testimonials, Team Members,
   Info Box, Feature List, Stats Counter, Timeline, Image Gallery,
   Logo Carousel, Social Links, Alert Box, Comparison Table, Breadcrumbs
   ======================================================================== */

/**
 * Smart Suite — Extended Elementor Widget Styles
 *
 * Pricing Table, FAQ/Accordion, CTA Banner, Testimonials,
 * Team Members, Info Box, Feature List.
 *
 * @package SmartSuite
 */

/* ========================================================================
   === Pricing Table ===
   ======================================================================== */
.ss-pricing {
  position: relative;
}

.ss-pricing__grid {
  display: grid;
  gap: var(--ss-gap, 20px);
  grid-template-columns: 1fr;
  align-items: start;
  justify-items: center;
}

@media (min-width: 768px) {
  .ss-pricing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-pricing__grid { grid-template-columns: repeat(3, 1fr); }
  .ss-pricing--cols-4 .ss-pricing__grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Card (aliases: __card + __plan for render compat) --- */
.ss-pricing__card,
.ss-pricing__plan {
  position: relative;
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-pricing__card:hover,
.ss-pricing__plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

/* --- Badge (Popular / Recommended ribbon) --- */
.ss-pricing__badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--ss-primary, #2563eb);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 16px;
  border-radius: 0 0 0 var(--ss-radius, 8px);
  z-index: 2;
}

/* --- Header --- */
.ss-pricing__header {
  padding: 24px 24px 16px;
  text-align: center;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
}

.ss-pricing__header h3 {
  margin: 0 0 4px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  color: var(--ss-text, #1a1a1a);
}

/* --- Price --- */
.ss-pricing__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  padding: 16px 24px;
}

.ss-pricing__currency {
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  align-self: flex-start;
  margin-top: 6px;
}

.ss-pricing__amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ss-text, #1a1a1a);
}

.ss-pricing__period {
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-muted, #999);
  margin-left: 2px;
}

/* --- Features --- */
.ss-pricing__features {
  list-style: none;
  margin: 0;
  padding: 16px 24px;
  flex: 1;
}

.ss-pricing__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text, #1a1a1a);
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
}

.ss-pricing__feature:last-child {
  border-bottom: none;
}

.ss-pricing__feature-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ss-primary, #2563eb);
  font-size: 0.85rem;
}

.ss-pricing__feature--disabled {
  color: var(--ss-text-muted, #999);
  text-decoration: line-through;
}

.ss-pricing__feature--disabled .ss-pricing__feature-icon {
  color: var(--ss-text-muted, #999);
}

/* --- CTA --- */
.ss-pricing__cta {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 12px 24px;
  background: var(--ss-primary, #2563eb);
  color: #fff;
  border: 2px solid var(--ss-primary, #2563eb);
  border-radius: var(--ss-radius, 8px);
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ss-pricing__cta:hover {
  background: var(--ss-primary-hover, #1d4ed8);
  border-color: var(--ss-primary-hover, #1d4ed8);
  color: #fff;
}

.ss-pricing__cta:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
}

/* ---- Preset: Standard ---- */
.ss-pricing--preset-standard .ss-pricing__card,
.ss-pricing--standard .ss-pricing__plan {
  /* defaults applied above */
}

/* ---- Preset: Featured ---- */
.ss-pricing--preset-featured .ss-pricing__card--featured,
.ss-pricing--featured .ss-pricing__plan--featured {
  border-color: var(--ss-primary, #2563eb);
  border-width: 2px;
  box-shadow: var(--ss-shadow-lg);
  z-index: 1;
  margin-top: -8px;
  margin-bottom: -8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.ss-pricing--preset-featured .ss-pricing__card--featured:hover,
.ss-pricing--featured .ss-pricing__plan--featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.ss-pricing--preset-featured .ss-pricing__card--featured .ss-pricing__header,
.ss-pricing--featured .ss-pricing__plan--featured .ss-pricing__header {
  background: var(--ss-primary, #2563eb);
  border-bottom-color: var(--ss-primary, #2563eb);
}

.ss-pricing--preset-featured .ss-pricing__card--featured .ss-pricing__header h3,
.ss-pricing--featured .ss-pricing__plan--featured .ss-pricing__header h3 {
  color: #fff;
}

/* ---- Preset: Minimal ---- */
.ss-pricing--preset-minimal .ss-pricing__card,
.ss-pricing--minimal .ss-pricing__plan {
  border: none;
  box-shadow: none;
  background: transparent;
}

.ss-pricing--preset-minimal .ss-pricing__card:hover,
.ss-pricing--minimal .ss-pricing__plan:hover {
  transform: none;
  box-shadow: none;
}

.ss-pricing--preset-minimal .ss-pricing__header,
.ss-pricing--minimal .ss-pricing__header {
  border-bottom: none;
  padding-bottom: 8px;
}

.ss-pricing--preset-minimal .ss-pricing__feature,
.ss-pricing--minimal .ss-pricing__feature {
  border-bottom: none;
  padding: 4px 0;
}

.ss-pricing--preset-minimal .ss-pricing__cta,
.ss-pricing--minimal .ss-pricing__cta {
  background: transparent;
  color: var(--ss-primary, #2563eb);
  border: 2px solid var(--ss-primary, #2563eb);
}

.ss-pricing--preset-minimal .ss-pricing__cta:hover,
.ss-pricing--minimal .ss-pricing__cta:hover {
  background: var(--ss-primary, #2563eb);
  color: #fff;
}

/* ---- Preset: Cards ---- */
.ss-pricing--cards .ss-pricing__plan {
  border-radius: var(--ss-radius, 8px);
  box-shadow: var(--ss-shadow-sm);
}

.ss-pricing--cards .ss-pricing__plan:hover {
  box-shadow: var(--ss-shadow-lg);
}

/* ---- Preset: Comparison ---- */
.ss-pricing--preset-comparison .ss-pricing__card {
  border-radius: 0;
}

.ss-pricing--preset-comparison .ss-pricing__card:first-child {
  border-radius: var(--ss-radius, 8px) 0 0 var(--ss-radius, 8px);
}

.ss-pricing--preset-comparison .ss-pricing__card:last-child {
  border-radius: 0 var(--ss-radius, 8px) var(--ss-radius, 8px) 0;
}

.ss-pricing--preset-comparison .ss-pricing__feature {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media (max-width: 767px) {
  .ss-pricing--preset-comparison .ss-pricing__card:first-child,
  .ss-pricing--preset-comparison .ss-pricing__card:last-child {
    border-radius: var(--ss-radius, 8px);
  }
}

/* ========================================================================
   === FAQ / Accordion ===
   ======================================================================== */
.ss-faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* --- Item --- */
.ss-faq__item {
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
}

.ss-faq__item:last-child {
  border-bottom: none;
}

/* --- Question (button) --- */
.ss-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  margin: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  text-align: left;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.ss-faq__question:hover {
  color: var(--ss-primary, #2563eb);
}

.ss-faq__question:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
  border-radius: var(--ss-radius-sm, 4px);
}

/* --- Chevron Icon --- */
.ss-faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  transition: transform 0.2s ease;
  color: var(--ss-text-muted, #999);
}

.ss-faq__icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ss-faq__item--open .ss-faq__icon {
  transform: rotate(180deg);
}

/* --- Answer --- */
.ss-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  opacity: 0;
}

.ss-faq__item--open .ss-faq__answer {
  max-height: 2000px;
  opacity: 1;
}

.ss-faq__answer-inner {
  padding: 0 0 16px;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text-light, #666);
  line-height: 1.7;
}

/* ---- Preset: Standard ---- */
.ss-faq--preset-standard .ss-faq__item {
  /* defaults applied above */
}

/* ---- Preset: Boxed ---- */
.ss-faq--preset-boxed {
  gap: 0;
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
}

.ss-faq--preset-boxed .ss-faq__question {
  padding: 16px 20px;
  background: var(--ss-bg-alt, #f8fafc);
}

.ss-faq--preset-boxed .ss-faq__item--open .ss-faq__question {
  background: var(--ss-bg, #fff);
}

.ss-faq--preset-boxed .ss-faq__answer-inner {
  padding: 0 20px 16px;
}

/* ---- Preset: Separated ---- */
.ss-faq--preset-separated {
  gap: 12px;
}

.ss-faq--preset-separated .ss-faq__item {
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-bg, #fff);
  overflow: hidden;
}

.ss-faq--preset-separated .ss-faq__question {
  padding: 16px 20px;
}

.ss-faq--preset-separated .ss-faq__answer-inner {
  padding: 0 20px 16px;
}

/* ---- Preset: Minimal ---- */
.ss-faq--preset-minimal .ss-faq__item {
  border-bottom: none;
}

.ss-faq--preset-minimal .ss-faq__question {
  padding: 12px 0;
  font-weight: 500;
}

.ss-faq--preset-minimal .ss-faq__icon {
  display: none;
}

.ss-faq--preset-minimal .ss-faq__question::before {
  content: '+';
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--ss-primary, #2563eb);
  transition: transform 0.2s ease;
}

.ss-faq--preset-minimal .ss-faq__item--open .ss-faq__question::before {
  content: '−';
}

/* ========================================================================
   === CTA Banner ===
   ======================================================================== */
.ss-cta-banner {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.ss-cta-banner__card {
  flex: 1;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: var(--ss-radius-lg, 12px);
  overflow: hidden;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ss-cta-banner__inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 40px;
  gap: 40px;
}

.ss-cta-banner__content {
  flex: 1;
  min-width: 0;
}

.ss-cta-banner__title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.2;
}

.ss-cta-banner__description {
  margin: 0 0 24px;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text-light, #666);
  line-height: 1.6;
  max-width: 560px;
}

.ss-cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ss-cta-banner__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  background: var(--ss-primary, #2563eb);
  color: #fff;
  border: 2px solid var(--ss-primary, #2563eb);
  border-radius: var(--ss-radius, 8px);
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ss-cta-banner__button:hover {
  background: var(--ss-primary-hover, #1d4ed8);
  border-color: var(--ss-primary-hover, #1d4ed8);
  color: #fff;
  transform: translateY(-1px);
}

.ss-cta-banner__button:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
}

.ss-cta-banner__button--secondary {
  background: transparent;
  color: var(--ss-primary, #2563eb);
  border-color: var(--ss-border, #e2e8f0);
}

.ss-cta-banner__button--secondary:hover {
  background: var(--ss-bg-alt, #f8fafc);
  border-color: var(--ss-primary, #2563eb);
  color: var(--ss-primary, #2563eb);
}

/* --- Media --- */
.ss-cta-banner__media {
  flex-shrink: 0;
  width: 300px;
}

.ss-cta-banner__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius, 8px);
  object-fit: cover;
}

/* ---- Preset: Standard ---- */
.ss-cta-banner--preset-standard .ss-cta-banner__card {
  border: 1px solid var(--ss-border, #e2e8f0);
}

/* ---- Preset: Centered ---- */
.ss-cta-banner--preset-centered .ss-cta-banner__inner {
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.ss-cta-banner--preset-centered .ss-cta-banner__description {
  margin-left: auto;
  margin-right: auto;
}

.ss-cta-banner--preset-centered .ss-cta-banner__actions {
  justify-content: center;
}

.ss-cta-banner--preset-centered .ss-cta-banner__media {
  order: -1;
}

/* ---- Preset: Split ---- */
.ss-cta-banner--preset-split .ss-cta-banner__inner {
  padding: 0;
  gap: 0;
}

.ss-cta-banner--preset-split .ss-cta-banner__content {
  padding: 40px;
}

.ss-cta-banner--preset-split .ss-cta-banner__media {
  width: 50%;
  align-self: stretch;
}

.ss-cta-banner--preset-split .ss-cta-banner__image {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

/* ---- Preset: Minimal ---- */
.ss-cta-banner--preset-minimal .ss-cta-banner__card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.ss-cta-banner--preset-minimal .ss-cta-banner__inner {
  padding: 24px 0;
}

.ss-cta-banner--preset-minimal .ss-cta-banner__title {
  font-size: var(--ss-font-size-xl, 1.5rem);
}

/* ---- Preset: Gradient ---- */
.ss-cta-banner--preset-gradient .ss-cta-banner__card {
  background: linear-gradient(135deg, var(--ss-primary, #2563eb), var(--ss-primary-hover, #1d4ed8));
  border-color: transparent;
  color: #fff;
}

.ss-cta-banner--preset-gradient .ss-cta-banner__title {
  color: #fff;
}

.ss-cta-banner--preset-gradient .ss-cta-banner__description {
  color: rgba(255, 255, 255, 0.85);
}

.ss-cta-banner--preset-gradient .ss-cta-banner__button {
  background: #fff;
  color: var(--ss-primary, #2563eb);
  border-color: #fff;
}

.ss-cta-banner--preset-gradient .ss-cta-banner__button:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--ss-primary-hover, #1d4ed8);
}

.ss-cta-banner--preset-gradient .ss-cta-banner__button--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.ss-cta-banner--preset-gradient .ss-cta-banner__button--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

/* ---- Preset: Overlay ---- */
.ss-cta-banner--preset-overlay .ss-cta-banner__card {
  position: relative;
  background-size: cover;
  background-position: center;
}

.ss-cta-banner--preset-overlay .ss-cta-banner__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4));
  z-index: 1;
  border-radius: inherit;
}

.ss-cta-banner--preset-overlay .ss-cta-banner__inner {
  position: relative;
  z-index: 2;
}

.ss-cta-banner--preset-overlay .ss-cta-banner__title {
  color: #fff;
}

.ss-cta-banner--preset-overlay .ss-cta-banner__description {
  color: rgba(255, 255, 255, 0.85);
}

.ss-cta-banner--preset-overlay .ss-cta-banner__button {
  background: #fff;
  color: var(--ss-text, #1a1a1a);
  border-color: #fff;
}

.ss-cta-banner--preset-overlay .ss-cta-banner__button:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.ss-cta-banner--preset-overlay .ss-cta-banner__button--secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.ss-cta-banner--preset-overlay .ss-cta-banner__button--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .ss-cta-banner__inner {
    flex-direction: column;
    padding: 24px;
    gap: 24px;
  }

  .ss-cta-banner__media {
    width: 100%;
  }

  .ss-cta-banner--preset-split .ss-cta-banner__content {
    padding: 24px;
  }

  .ss-cta-banner--preset-split .ss-cta-banner__media {
    width: 100%;
  }
}

/* ========================================================================
   === Testimonials ===
   ======================================================================== */
.ss-testimonials {
  display: grid;
  gap: var(--ss-gap, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ss-testimonials { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-testimonials { grid-template-columns: repeat(3, 1fr); }
}

/* --- Item --- */
.ss-testimonials__item {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-testimonials__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
}

/* --- Quote Icon --- */
.ss-testimonials__quote-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  color: var(--ss-primary, #2563eb);
  opacity: 0.3;
  margin-bottom: 12px;
}

.ss-testimonials__quote-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* --- Content / Quote --- */
.ss-testimonials__content,
.ss-testimonials__quote {
  flex: 1;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text, #1a1a1a);
  line-height: 1.7;
  margin: 0 0 20px;
}

/* --- Rating --- */
.ss-testimonials__rating {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.ss-testimonials__star {
  width: 18px;
  height: 18px;
  color: #f59e0b;
}

.ss-testimonials__star--empty {
  color: var(--ss-border, #e2e8f0);
}

.ss-testimonials__star svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* --- Author --- */
.ss-testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ss-border, #e2e8f0);
}

.ss-testimonials__avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.ss-testimonials__name {
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.3;
}

.ss-testimonials__role {
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-muted, #999);
  line-height: 1.3;
}

/* ---- Preset: Cards ---- */
.ss-testimonials--preset-cards .ss-testimonials__item {
  /* base card styles apply */
}

/* ---- Preset: Slider / Carousel ---- */
.ss-testimonials--preset-slider {
  display: block;
}

.ss-carousel {
  position: relative;
  overflow: hidden;
}

.ss-carousel__track {
  display: flex;
  transition: transform 0.4s ease;
}

.ss-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 8px;
}

@media (min-width: 768px) {
  .ss-carousel__slide { flex-basis: 50%; }
}

@media (min-width: 1024px) {
  .ss-carousel__slide { flex-basis: 33.333%; }
}

.ss-carousel__slide .ss-testimonials__item {
  height: 100%;
}

/* Nav Arrows */
.ss-carousel__prev,
.ss-carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: 50%;
  color: var(--ss-text, #1a1a1a);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  box-shadow: var(--ss-shadow-sm);
}

.ss-carousel__prev { left: 8px; }
.ss-carousel__next { right: 8px; }

.ss-carousel__prev:hover,
.ss-carousel__next:hover {
  background: var(--ss-primary, #2563eb);
  border-color: var(--ss-primary, #2563eb);
  color: #fff;
  box-shadow: var(--ss-shadow);
}

.ss-carousel__prev:focus-visible,
.ss-carousel__next:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
}

.ss-carousel__prev svg,
.ss-carousel__next svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Dots */
.ss-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.ss-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ss-border, #e2e8f0);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ss-carousel__dot:hover {
  background: var(--ss-text-muted, #999);
}

.ss-carousel__dot--active {
  background: var(--ss-primary, #2563eb);
  transform: scale(1.2);
}

.ss-carousel__dot:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
}

/* ---- Preset: Minimal ---- */
.ss-testimonials--preset-minimal .ss-testimonials__item {
  border: none;
  background: transparent;
  padding: 16px 0;
  box-shadow: none;
}

.ss-testimonials--preset-minimal .ss-testimonials__item:hover {
  transform: none;
  box-shadow: none;
}

.ss-testimonials--preset-minimal .ss-testimonials__author {
  border-top: none;
  padding-top: 0;
}

.ss-testimonials--preset-minimal .ss-testimonials__quote-icon {
  display: none;
}

/* ---- Preset: Bubble ---- */
.ss-testimonials--preset-bubble .ss-testimonials__item {
  position: relative;
  border-radius: var(--ss-radius-lg, 12px);
  padding-bottom: 32px;
  margin-bottom: 24px;
}

.ss-testimonials--preset-bubble .ss-testimonials__item::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 32px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--ss-bg, #fff);
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.06));
}

.ss-testimonials--preset-bubble .ss-testimonials__author {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  position: relative;
  top: 12px;
}

/* ========================================================================
   === Team Members ===
   ======================================================================== */
.ss-team__grid {
  display: grid;
  gap: var(--ss-gap, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ss-team__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-team__grid { grid-template-columns: repeat(3, 1fr); }
  .ss-team__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Member Card --- */
.ss-team__member {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-team__member:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

/* --- Photo --- */
.ss-team__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* --- Info --- */
.ss-team__info {
  padding: 20px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ss-team__name {
  margin: 0 0 4px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.3;
}

.ss-team__role {
  margin: 0 0 12px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-primary, #2563eb);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ss-team__bio {
  margin: 0 0 16px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-light, #666);
  line-height: 1.6;
  flex: 1;
}

/* --- Social --- */
.ss-team__social {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}

.ss-team__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ss-bg-alt, #f8fafc);
  color: var(--ss-text-light, #666);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ss-team__social-link:hover {
  background: var(--ss-primary, #2563eb);
  color: #fff;
  transform: translateY(-2px);
}

.ss-team__social-link:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
}

.ss-team__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ---- Preset: Cards ---- */
.ss-team--preset-cards .ss-team__member {
  /* base card styles apply */
}

/* ---- Preset: Overlay ---- */
.ss-team--preset-overlay .ss-team__member {
  position: relative;
  border: none;
  overflow: hidden;
}

.ss-team--preset-overlay .ss-team__photo {
  aspect-ratio: 3 / 4;
  transition: transform 0.4s ease;
}

.ss-team--preset-overlay .ss-team__member:hover .ss-team__photo {
  transform: scale(1.05);
}

.ss-team--preset-overlay .ss-team__info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ss-team--preset-overlay .ss-team__member:hover .ss-team__info {
  opacity: 1;
}

.ss-team--preset-overlay .ss-team__name {
  color: #fff;
}

.ss-team--preset-overlay .ss-team__role {
  color: rgba(255, 255, 255, 0.8);
}

.ss-team--preset-overlay .ss-team__bio {
  color: rgba(255, 255, 255, 0.7);
}

.ss-team--preset-overlay .ss-team__social-link {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.ss-team--preset-overlay .ss-team__social-link:hover {
  background: #fff;
  color: var(--ss-text, #1a1a1a);
}

/* ---- Preset: Minimal ---- */
.ss-team--preset-minimal .ss-team__member {
  border: none;
  background: transparent;
  box-shadow: none;
}

.ss-team--preset-minimal .ss-team__member:hover {
  transform: none;
  box-shadow: none;
}

.ss-team--preset-minimal .ss-team__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--ss-radius, 8px);
  margin-bottom: 12px;
}

.ss-team--preset-minimal .ss-team__info {
  padding: 0;
}

/* ---- Preset: Horizontal ---- */
.ss-team--preset-horizontal .ss-team__grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ss-team--preset-horizontal .ss-team__grid {
    grid-template-columns: 1fr;
  }
}

.ss-team--preset-horizontal .ss-team__member {
  flex-direction: row;
  align-items: center;
}

.ss-team--preset-horizontal .ss-team__photo {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.ss-team--preset-horizontal .ss-team__info {
  text-align: left;
  padding: 16px 20px;
}

.ss-team--preset-horizontal .ss-team__social {
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .ss-team--preset-horizontal .ss-team__member {
    flex-direction: column;
  }

  .ss-team--preset-horizontal .ss-team__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .ss-team--preset-horizontal .ss-team__info {
    text-align: center;
  }

  .ss-team--preset-horizontal .ss-team__social {
    justify-content: center;
  }
}

/* ---- Preset: Circle ---- */
.ss-team--preset-circle .ss-team__member {
  border: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.ss-team--preset-circle .ss-team__member:hover {
  transform: none;
  box-shadow: none;
}

.ss-team--preset-circle .ss-team__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 16px;
  aspect-ratio: 1 / 1;
  border: 4px solid var(--ss-border, #e2e8f0);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ss-team--preset-circle .ss-team__member:hover .ss-team__photo {
  border-color: var(--ss-primary, #2563eb);
  transform: scale(1.05);
}

.ss-team--preset-circle .ss-team__info {
  padding: 0;
}

@media (min-width: 768px) {
  .ss-team--preset-circle .ss-team__photo {
    width: 160px;
    height: 160px;
  }
}

@media (min-width: 1024px) {
  .ss-team--preset-circle .ss-team__photo {
    width: 180px;
    height: 180px;
  }
}

/* ========================================================================
   === Info Box ===
   ======================================================================== */
.ss-info-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-info-box:hover {
  transform: translateY(-4px);
  box-shadow: var(--ss-shadow-lg);
}

/* --- Icon --- */
.ss-info-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ss-primary-light, #dbeafe);
  color: var(--ss-primary, #2563eb);
  margin-bottom: 20px;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ss-info-box:hover .ss-info-box__icon {
  background: var(--ss-primary, #2563eb);
  color: #fff;
  transform: scale(1.1);
}

.ss-info-box__icon svg,
.ss-info-box__icon i {
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 1;
}

.ss-info-box__icon svg {
  fill: currentColor;
}

/* --- Title --- */
.ss-info-box__title {
  margin: 0 0 8px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.3;
}

/* --- Description --- */
.ss-info-box__description {
  margin: 0 0 16px;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text-light, #666);
  line-height: 1.6;
}

/* --- Link --- */
.ss-info-box__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 600;
  color: var(--ss-primary, #2563eb);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
}

.ss-info-box__link:hover {
  color: var(--ss-primary-hover, #1d4ed8);
  gap: 10px;
}

.ss-info-box__link:focus-visible {
  outline: 2px solid var(--ss-primary, #2563eb);
  outline-offset: 2px;
  border-radius: var(--ss-radius-sm, 4px);
}

.ss-info-box__link svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.ss-info-box__link:hover svg {
  transform: translateX(3px);
}

/* ---- Preset: Standard (icon-top, centered — default) ---- */
.ss-info-box--preset-standard {
  /* base styles apply */
}

/* ---- Preset: Icon-Left ---- */
.ss-info-box--preset-icon-left {
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  gap: 20px;
}

.ss-info-box--preset-icon-left .ss-info-box__icon {
  margin-bottom: 0;
}

.ss-info-box--preset-icon-left .ss-info-box__content {
  flex: 1;
  min-width: 0;
}

/* ---- Preset: Icon-Top (alias for standard with no border) ---- */
.ss-info-box--preset-icon-top {
  border: none;
  background: transparent;
  box-shadow: none;
}

.ss-info-box--preset-icon-top:hover {
  transform: none;
  box-shadow: none;
}

.ss-info-box--preset-icon-top:hover .ss-info-box__icon {
  transform: translateY(-4px);
}

/* ---- Preset: Bordered ---- */
.ss-info-box--preset-bordered {
  border-width: 2px;
  border-color: var(--ss-border, #e2e8f0);
  background: transparent;
}

.ss-info-box--preset-bordered:hover {
  border-color: var(--ss-primary, #2563eb);
}

/* ---- Preset: Filled ---- */
.ss-info-box--preset-filled {
  background: var(--ss-primary, #2563eb);
  border-color: var(--ss-primary, #2563eb);
  color: #fff;
}

.ss-info-box--preset-filled .ss-info-box__title {
  color: #fff;
}

.ss-info-box--preset-filled .ss-info-box__description {
  color: rgba(255, 255, 255, 0.85);
}

.ss-info-box--preset-filled .ss-info-box__icon {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.ss-info-box--preset-filled:hover .ss-info-box__icon {
  background: #fff;
  color: var(--ss-primary, #2563eb);
}

.ss-info-box--preset-filled .ss-info-box__link {
  color: #fff;
}

.ss-info-box--preset-filled .ss-info-box__link:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .ss-info-box--preset-icon-left {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .ss-info-box--preset-icon-left .ss-info-box__icon {
    margin-bottom: 16px;
  }
}

/* ========================================================================
   === Feature List ===
   ======================================================================== */
.ss-feature-list {
  position: relative;
}

.ss-feature-list__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .ss-feature-list__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-feature-list__grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Item --- */
.ss-feature-list__item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* --- Icon (with wrapper — default) --- */
.ss-feature-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ss-primary-light, #dbeafe);
  color: var(--ss-primary, #2563eb);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ss-feature-list__item:hover .ss-feature-list__icon {
  background: var(--ss-primary, #2563eb);
  color: #fff;
  transform: scale(1.1);
}

/* --- Icon (no wrapper — minimal/bare icon) --- */
.ss-feature-list__icon--no-wrapper {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: auto;
  min-width: auto;
  height: auto;
}

.ss-feature-list__icon--no-wrapper:hover,
.ss-feature-list__item:hover .ss-feature-list__icon--no-wrapper {
  background: none !important;
  transform: scale(1.1);
}

.ss-feature-list__icon svg,
.ss-feature-list__icon i {
  width: 22px;
  height: 22px;
  font-size: 22px;
  line-height: 1;
}

.ss-feature-list__icon svg {
  fill: currentColor;
}

/* --- Content --- */
.ss-feature-list__content {
  flex: 1;
  min-width: 0;
}

.ss-feature-list__title {
  margin: 0 0 4px;
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.3;
}

.ss-feature-list__description {
  margin: 0;
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-light, #666);
  line-height: 1.6;
}

/* --- Connector (for timeline) --- */
.ss-feature-list__connector {
  display: none;
}

/* ---- Preset: Standard ---- */
.ss-feature-list--preset-standard .ss-feature-list__grid {
  grid-template-columns: 1fr;
}

.ss-feature-list--preset-standard .ss-feature-list__item {
  /* base list item — horizontal row */
}

/* ---- Preset: Icon Grid ---- */
.ss-feature-list--preset-icon-grid .ss-feature-list__grid {
  /* let the columns control from Elementor handle grid-template-columns */
}

.ss-feature-list--preset-icon-grid .ss-feature-list__item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  padding: 24px;
}

.ss-feature-list--preset-icon-grid .ss-feature-list__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

.ss-feature-list--preset-icon-grid .ss-feature-list__icon {
  width: 56px;
  min-width: 56px;
  height: 56px;
  margin-bottom: 16px;
}

/* Icon grid: auto-adapt card sizing to available space */
.ss-feature-list--preset-icon-grid .ss-feature-list__grid > .ss-feature-list__item {
  flex: 1 1 0%;
}

/* ---- Preset: Alternating ---- */
.ss-feature-list--preset-alternating .ss-feature-list__grid {
  grid-template-columns: 1fr;
}

.ss-feature-list--preset-alternating .ss-feature-list__item {
  padding: 24px 0;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
}

.ss-feature-list--preset-alternating .ss-feature-list__item:last-child {
  border-bottom: none;
}

@media (min-width: 768px) {
  .ss-feature-list--preset-alternating .ss-feature-list__item:nth-child(even) {
    flex-direction: row-reverse;
    text-align: right;
  }
}

/* ---- Preset: Compact ---- */
.ss-feature-list--preset-compact .ss-feature-list__grid {
  grid-template-columns: 1fr;
  /* Gap is controlled by Elementor; default fallback only */
}

.ss-feature-list--preset-compact .ss-feature-list__icon {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: var(--ss-radius-sm, 4px);
}

.ss-feature-list--preset-compact .ss-feature-list__icon svg,
.ss-feature-list--preset-compact .ss-feature-list__icon i {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.ss-feature-list--preset-compact .ss-feature-list__title {
  font-size: var(--ss-font-size-sm, 0.85rem);
}

.ss-feature-list--preset-compact .ss-feature-list__description {
  font-size: 0.8rem;
}

/* ---- Preset: Timeline ---- */
.ss-feature-list--preset-timeline .ss-feature-list__grid {
  grid-template-columns: 1fr;
}

.ss-feature-list--preset-timeline {
  position: relative;
  padding-left: 48px;
}

.ss-feature-list--preset-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: var(--ss-border, #e2e8f0);
}

.ss-feature-list--preset-timeline .ss-feature-list__item {
  position: relative;
  padding-left: 0;
}

.ss-feature-list--preset-timeline .ss-feature-list__icon {
  position: absolute;
  left: -48px;
  top: 0;
  z-index: 2;
  border: 3px solid var(--ss-bg, #fff);
}

.ss-feature-list--preset-timeline .ss-feature-list__connector {
  display: block;
  position: absolute;
  left: -27px;
  top: 48px;
  bottom: -24px;
  width: 2px;
  background: transparent; /* line drawn via parent ::before */
}

.ss-feature-list--preset-timeline .ss-feature-list__content {
  padding-top: 4px;
}

/* Timeline hover: icon pulse */
.ss-feature-list--preset-timeline .ss-feature-list__item:hover .ss-feature-list__icon {
  box-shadow: 0 0 0 6px var(--ss-primary-light, #dbeafe);
}

/* Responsive: remove timeline offset on mobile */
@media (max-width: 767px) {
  .ss-feature-list--preset-timeline {
    padding-left: 40px;
  }

  .ss-feature-list--preset-timeline::before {
    left: 19px;
  }

  .ss-feature-list--preset-timeline .ss-feature-list__icon {
    left: -40px;
    width: 38px;
    height: 38px;
  }
}

/* ========================================================================
   Shared Responsive Utilities
   ======================================================================== */
@media (max-width: 767px) {
  .ss-pricing__card--featured {
    transform: none !important;
  }

  .ss-pricing__card--featured:hover {
    transform: translateY(-3px) !important;
  }
}

/**
 * Smart Suite — Extended Elementor Widget Styles (Part 2)
 *
 * Stats Counter, Timeline, Image Gallery, Logo Carousel,
 * Social Links, Alert Box, Comparison Table, Breadcrumbs, Lightbox.
 *
 * @package SmartSuite
 */

/* ========================================================================
   === Stats Counter ===
   ======================================================================== */
.ss-counter {
  --ss-counter-cols: 1;
  --ss-counter-gap: 20px;
  --ss-counter-number-size: 2.5rem;
  --ss-counter-label-size: 0.9rem;
  --ss-counter-icon-size: 2rem;
}

.ss-counter__grid {
  display: grid;
  grid-template-columns: repeat(var(--ss-counter-cols, 1), 1fr);
  gap: var(--ss-counter-gap, 20px);
}

@media (min-width: 768px) {
  .ss-counter { --ss-counter-cols: 2; }
}

@media (min-width: 1024px) {
  .ss-counter { --ss-counter-cols: 4; }
}

.ss-counter__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-counter__item:hover {
  transform: translateY(-4px);
}

.ss-counter__icon {
  font-size: var(--ss-counter-icon-size, 2rem);
  color: var(--ss-primary, #6366f1);
  margin-bottom: 12px;
  line-height: 1;
}

.ss-counter__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.ss-counter__number {
  font-size: var(--ss-counter-number-size, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ss-primary, #6366f1);
  transition: color 0.2s ease;
}

.ss-counter__suffix {
  font-size: calc(var(--ss-counter-number-size, 2.5rem) * 0.55);
  font-weight: 700;
  color: var(--ss-primary, #6366f1);
  margin-left: 2px;
}

.ss-counter__label {
  font-size: var(--ss-counter-label-size, 0.9rem);
  color: var(--ss-text-muted, #64748b);
  margin-top: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ss-counter__divider {
  display: none;
  width: 1px;
  background: var(--ss-border, #e2e8f0);
  align-self: stretch;
}

/* --- Animation done state --- */
.ss-counter__item--done .ss-counter__number {
  color: var(--ss-primary, #6366f1);
}

/* ---- Preset: Standard ---- */
.ss-counter--preset-standard .ss-counter__item {
  background: transparent;
}

.ss-counter--preset-standard .ss-counter__divider {
  display: block;
}

/* ---- Preset: Boxed ---- */
.ss-counter--preset-boxed .ss-counter__item {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
}

.ss-counter--preset-boxed .ss-counter__item:hover {
  box-shadow: var(--ss-shadow-lg);
}

/* ---- Preset: Circle ---- */
.ss-counter--preset-circle .ss-counter__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--ss-primary, #6366f1);
  font-size: 2rem;
  margin-bottom: 8px;
}

.ss-counter--preset-circle .ss-counter__suffix {
  position: relative;
  top: -2px;
}

/* ---- Preset: Minimal ---- */
.ss-counter--preset-minimal .ss-counter__item {
  padding: 16px 8px;
}

.ss-counter--preset-minimal .ss-counter__icon {
  display: none;
}

.ss-counter--preset-minimal .ss-counter__number {
  font-size: 2rem;
}

.ss-counter--preset-minimal .ss-counter__label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ---- Preset: Icon Top ---- */
.ss-counter--preset-icon-top .ss-counter__item {
  background: var(--ss-bg, #fff);
  border-radius: var(--ss-radius, 8px);
  padding: 32px 20px;
}

.ss-counter--preset-icon-top .ss-counter__icon {
  font-size: 2.5rem;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ss-primary-light, #eef2ff);
  border-radius: 50%;
  margin-bottom: 16px;
}

.ss-counter--preset-icon-top .ss-counter__item:hover {
  box-shadow: var(--ss-shadow-lg);
}


/* ========================================================================
   === Timeline ===
   ======================================================================== */
.ss-timeline {
  --ss-timeline-line-color: var(--ss-border, #e2e8f0);
  --ss-timeline-dot-size: 14px;
  --ss-timeline-dot-color: var(--ss-primary, #6366f1);
  --ss-timeline-offset: 40px;
  position: relative;
  padding-left: var(--ss-timeline-offset, 40px);
}

/* Vertical line */
.ss-timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--ss-timeline-offset, 40px) / 2 - 1px);
  width: 2px;
  background: var(--ss-timeline-line-color);
}

.ss-timeline__item {
  position: relative;
  padding-bottom: 32px;
}

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

.ss-timeline__dot {
  position: absolute;
  left: calc(-1 * var(--ss-timeline-offset, 40px) + (var(--ss-timeline-offset, 40px) / 2) - (var(--ss-timeline-dot-size, 14px) / 2));
  top: 4px;
  width: var(--ss-timeline-dot-size, 14px);
  height: var(--ss-timeline-dot-size, 14px);
  border-radius: 50%;
  background: var(--ss-timeline-dot-color);
  border: 3px solid var(--ss-bg, #fff);
  box-shadow: 0 0 0 2px var(--ss-timeline-dot-color);
  z-index: 2;
}

.ss-timeline__icon {
  position: absolute;
  left: calc(-1 * var(--ss-timeline-offset, 40px) + (var(--ss-timeline-offset, 40px) / 2) - 14px);
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ss-primary, #6366f1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  z-index: 2;
}

.ss-timeline__icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.ss-timeline__date {
  font-size: 0.8rem;
  color: var(--ss-text-muted, #64748b);
  font-weight: 600;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ss-timeline__card {
  background: var(--ss-bg, #fff);
  border-radius: var(--ss-radius, 8px);
  padding: 20px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ss-timeline__card:hover {
  box-shadow: var(--ss-shadow-md);
}

.ss-timeline__title {
  margin: 0 0 8px;
  font-size: var(--ss-font-size-lg, 1.15rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
}

.ss-timeline__content {
  margin: 0;
  font-size: var(--ss-font-size, 1rem);
  color: var(--ss-text-muted, #64748b);
  line-height: 1.6;
}

/* ---- Preset: Standard ---- */
.ss-timeline--preset-standard .ss-timeline__card {
  border: 1px solid var(--ss-border, #e2e8f0);
}

/* ---- Preset: Alternating ---- */
@media (min-width: 768px) {
  .ss-timeline--preset-alternating {
    padding-left: 0;
  }

  .ss-timeline--preset-alternating .ss-timeline__line {
    left: 50%;
    transform: translateX(-50%);
  }

  .ss-timeline--preset-alternating .ss-timeline__item {
    width: 50%;
  }

  .ss-timeline--preset-alternating .ss-timeline__item--right {
    margin-left: 50%;
    padding-left: 40px;
  }

  .ss-timeline--preset-alternating .ss-timeline__item--left {
    padding-right: 40px;
    text-align: right;
  }

  .ss-timeline--preset-alternating .ss-timeline__item--right .ss-timeline__dot {
    left: -7px;
  }

  .ss-timeline--preset-alternating .ss-timeline__item--left .ss-timeline__dot {
    left: auto;
    right: -7px;
  }

  .ss-timeline--preset-alternating .ss-timeline__card {
    border: 1px solid var(--ss-border, #e2e8f0);
  }
}

/* ---- Preset: Compact ---- */
.ss-timeline--preset-compact {
  --ss-timeline-offset: 28px;
  --ss-timeline-dot-size: 10px;
}

.ss-timeline--preset-compact .ss-timeline__item {
  padding-bottom: 20px;
}

.ss-timeline--preset-compact .ss-timeline__card {
  padding: 12px 16px;
  background: transparent;
}

.ss-timeline--preset-compact .ss-timeline__title {
  font-size: 1rem;
  margin-bottom: 4px;
}

.ss-timeline--preset-compact .ss-timeline__content {
  font-size: 0.9rem;
}

/* ---- Preset: Cards ---- */
.ss-timeline--preset-cards .ss-timeline__card {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  box-shadow: var(--ss-shadow-sm);
  padding: 24px;
}

.ss-timeline--preset-cards .ss-timeline__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
}

/* ---- Preset: Minimal ---- */
.ss-timeline--preset-minimal .ss-timeline__line {
  width: 1px;
  background: var(--ss-border, #e2e8f0);
}

.ss-timeline--preset-minimal .ss-timeline__dot {
  border: none;
  box-shadow: none;
  width: 8px;
  height: 8px;
}

.ss-timeline--preset-minimal .ss-timeline__card {
  padding: 8px 0;
  background: transparent;
}

/* Responsive: collapse to single column on mobile */
@media (max-width: 767px) {
  .ss-timeline--preset-alternating {
    padding-left: 40px;
  }

  .ss-timeline--preset-alternating .ss-timeline__line {
    left: 19px;
    transform: none;
  }

  .ss-timeline--preset-alternating .ss-timeline__item {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .ss-timeline--preset-alternating .ss-timeline__item--right .ss-timeline__dot,
  .ss-timeline--preset-alternating .ss-timeline__item--left .ss-timeline__dot {
    left: -33px;
    right: auto;
  }
}


/* ========================================================================
   === Image Gallery ===
   ======================================================================== */
.ss-gallery {
  --ss-gallery-cols: 1;
  --ss-gallery-gap: 12px;
}

.ss-gallery__grid {
  display: grid;
  grid-template-columns: repeat(var(--ss-gallery-cols, 1), 1fr);
  gap: var(--ss-gallery-gap, 12px);
}

@media (min-width: 768px) {
  .ss-gallery { --ss-gallery-cols: 3; }
}

@media (min-width: 1024px) {
  .ss-gallery { --ss-gallery-cols: 4; }
}

/* Column overrides */
.ss-gallery--cols-1 { --ss-gallery-cols: 1; }
.ss-gallery--cols-2 { --ss-gallery-cols: 2; }
.ss-gallery--cols-3 { --ss-gallery-cols: 3; }
.ss-gallery--cols-4 { --ss-gallery-cols: 4; }
.ss-gallery--cols-5 { --ss-gallery-cols: 5; }
.ss-gallery--cols-6 { --ss-gallery-cols: 6; }

@media (max-width: 1023px) {
  .ss-gallery--cols-5,
  .ss-gallery--cols-6 { --ss-gallery-cols: 3; }
}

@media (max-width: 767px) {
  .ss-gallery--cols-3,
  .ss-gallery--cols-4,
  .ss-gallery--cols-5,
  .ss-gallery--cols-6 { --ss-gallery-cols: 2; }
}

@media (max-width: 480px) {
  .ss-gallery--cols-2,
  .ss-gallery--cols-3,
  .ss-gallery--cols-4,
  .ss-gallery--cols-5,
  .ss-gallery--cols-6 { --ss-gallery-cols: 1; }
}

.ss-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--ss-radius, 8px);
  cursor: pointer;
}

.ss-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.ss-gallery__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ss-gallery__item:hover .ss-gallery__image img {
  transform: scale(1.05);
}

.ss-gallery__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 16px;
}

.ss-gallery__item:hover .ss-gallery__overlay {
  opacity: 1;
}

.ss-gallery__caption {
  color: #fff;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 500;
  text-align: center;
  transform: translateY(8px);
  transition: transform 0.2s ease;
  width: 100%;
}

.ss-gallery__item:hover .ss-gallery__caption {
  transform: translateY(0);
}

/* ---- Preset: Grid ---- */
.ss-gallery--preset-grid .ss-gallery__item {
  aspect-ratio: 1 / 1;
}

/* ---- Preset: Masonry ---- */
.ss-gallery--preset-masonry .ss-gallery__grid {
  display: block;
  column-count: var(--ss-gallery-cols, 3);
  column-gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery--preset-masonry .ss-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--ss-gallery-gap, 12px);
}

/* ---- Preset: Justified ---- */
.ss-gallery--preset-justified .ss-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery--preset-justified .ss-gallery__item {
  flex: 1 1 200px;
  max-height: 260px;
}

.ss-gallery--preset-justified .ss-gallery__image {
  height: 100%;
  object-fit: cover;
}

/* ---- Preset: Slider ---- */
.ss-gallery--preset-slider {
  position: relative;
  overflow: hidden;
}

.ss-gallery--preset-slider .ss-gallery__grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery--preset-slider .ss-gallery__grid::-webkit-scrollbar {
  display: none;
}

.ss-gallery--preset-slider .ss-gallery__item {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .ss-gallery--preset-slider .ss-gallery__item {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .ss-gallery--preset-slider .ss-gallery__item {
    flex: 0 0 33.333%;
  }
}


/* ========================================================================
   === Logo Carousel ===
   ======================================================================== */
.ss-logo-carousel {
  position: relative;
  overflow: hidden;
}

.ss-logo-carousel__track {
  display: flex;
  transition: transform 0.4s ease;
}

.ss-logo-carousel__slide {
  flex: 0 0 50%;
  min-width: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .ss-logo-carousel__slide { flex-basis: 33.333%; }
}

@media (min-width: 1024px) {
  .ss-logo-carousel__slide { flex-basis: 20%; }
}

.ss-logo-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;
  transition: all 0.2s ease;
}

.ss-logo-carousel__image {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Re-use shared carousel navigation */
.ss-logo-carousel .ss-carousel__prev,
.ss-logo-carousel .ss-carousel__next {
  /* inherits from .ss-carousel__prev / __next */
}

.ss-logo-carousel .ss-carousel__dots {
  /* inherits from .ss-carousel__dots */
}

/* ---- Preset: Standard ---- */
.ss-logo-carousel--preset-standard .ss-logo-carousel__item {
  opacity: 0.7;
}

.ss-logo-carousel--preset-standard .ss-logo-carousel__item:hover {
  opacity: 1;
}

/* ---- Preset: Grayscale ---- */
.ss-logo-carousel--preset-grayscale .ss-logo-carousel__image {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.ss-logo-carousel--preset-grayscale .ss-logo-carousel__item:hover .ss-logo-carousel__image {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---- Preset: Bordered ---- */
.ss-logo-carousel--preset-bordered .ss-logo-carousel__item {
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  padding: 20px 24px;
  background: var(--ss-bg, #fff);
}

.ss-logo-carousel--preset-bordered .ss-logo-carousel__item:hover {
  border-color: var(--ss-primary, #6366f1);
  box-shadow: var(--ss-shadow-sm);
}

/* ---- Preset: Minimal ---- */
.ss-logo-carousel--preset-minimal .ss-logo-carousel__item {
  padding: 12px 8px;
  opacity: 0.5;
}

.ss-logo-carousel--preset-minimal .ss-logo-carousel__item:hover {
  opacity: 1;
}

.ss-logo-carousel--preset-minimal .ss-logo-carousel__image {
  max-height: 40px;
}


/* ========================================================================
   === Social Links ===
   ======================================================================== */
.ss-social {
  --ss-social-size: 40px;
  --ss-social-icon-size: 18px;
  --ss-social-gap: 10px;
  --ss-social-radius: 50%;

  /* Platform colors */
  --ss-social-facebook: #1877f2;
  --ss-social-twitter: #1da1f2;
  --ss-social-x: #000;
  --ss-social-instagram: #e4405f;
  --ss-social-linkedin: #0a66c2;
  --ss-social-youtube: #ff0000;
  --ss-social-pinterest: #bd081c;
  --ss-social-tiktok: #000;
  --ss-social-github: #333;
  --ss-social-dribbble: #ea4c89;
  --ss-social-whatsapp: #25d366;
  --ss-social-telegram: #0088cc;
}

.ss-social__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-social-gap, 10px);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.ss-social__item {
  display: flex;
}

.ss-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ss-text, #1a1a1a);
  transition: all 0.2s ease;
  line-height: 1;
}

.ss-social__link:focus-visible {
  outline: 2px solid var(--ss-primary, #6366f1);
  outline-offset: 2px;
}

.ss-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ss-social-icon-size, 18px);
  line-height: 1;
}

.ss-social__icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.ss-social__label {
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 500;
}

/* Platform hover colors (item--platform OR link--platform for render compat) */
.ss-social__item--facebook .ss-social__link:hover,
.ss-social__link--facebook:hover { color: var(--ss-social-facebook); }
.ss-social__item--twitter .ss-social__link:hover,
.ss-social__link--twitter:hover  { color: var(--ss-social-twitter); }
.ss-social__item--x .ss-social__link:hover,
.ss-social__link--x:hover         { color: var(--ss-social-x); }
.ss-social__item--instagram .ss-social__link:hover,
.ss-social__link--instagram:hover { color: var(--ss-social-instagram); }
.ss-social__item--linkedin .ss-social__link:hover,
.ss-social__link--linkedin:hover  { color: var(--ss-social-linkedin); }
.ss-social__item--youtube .ss-social__link:hover,
.ss-social__link--youtube:hover   { color: var(--ss-social-youtube); }
.ss-social__item--pinterest .ss-social__link:hover,
.ss-social__link--pinterest:hover { color: var(--ss-social-pinterest); }
.ss-social__item--tiktok .ss-social__link:hover,
.ss-social__link--tiktok:hover    { color: var(--ss-social-tiktok); }
.ss-social__item--github .ss-social__link:hover,
.ss-social__link--github:hover    { color: var(--ss-social-github); }
.ss-social__item--dribbble .ss-social__link:hover,
.ss-social__link--dribbble:hover  { color: var(--ss-social-dribbble); }
.ss-social__item--whatsapp .ss-social__link:hover,
.ss-social__link--whatsapp:hover  { color: var(--ss-social-whatsapp); }
.ss-social__item--telegram .ss-social__link:hover,
.ss-social__link--telegram:hover  { color: var(--ss-social-telegram); }

/* ---- Preset: Icon Only ---- */
.ss-social--preset-icon-only .ss-social__link {
  width: var(--ss-social-size, 40px);
  height: var(--ss-social-size, 40px);
  border-radius: var(--ss-social-radius, 50%);
  background: var(--ss-gray-100, #f1f5f9);
  color: var(--ss-text, #1a1a1a);
}

.ss-social--preset-icon-only .ss-social__label {
  display: none;
}

.ss-social--preset-icon-only .ss-social__link:hover {
  background: var(--ss-primary, #6366f1);
  color: #fff;
}

/* Platform bg on hover for icon-only */
.ss-social--preset-icon-only .ss-social__item--facebook .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--facebook:hover { background: var(--ss-social-facebook); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--twitter .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--twitter:hover  { background: var(--ss-social-twitter); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--x .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--x:hover        { background: var(--ss-social-x); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--instagram .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--instagram:hover { background: var(--ss-social-instagram); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--linkedin .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--linkedin:hover  { background: var(--ss-social-linkedin); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--youtube .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--youtube:hover   { background: var(--ss-social-youtube); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--pinterest .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--pinterest:hover { background: var(--ss-social-pinterest); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--tiktok .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--tiktok:hover    { background: var(--ss-social-tiktok); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--github .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--github:hover    { background: var(--ss-social-github); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--dribbble .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--dribbble:hover  { background: var(--ss-social-dribbble); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--whatsapp .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--whatsapp:hover  { background: var(--ss-social-whatsapp); color: #fff; }
.ss-social--preset-icon-only .ss-social__item--telegram .ss-social__link:hover,
.ss-social--preset-icon-only .ss-social__link--telegram:hover  { background: var(--ss-social-telegram); color: #fff; }

/* ---- Preset: Icon + Text ---- */
.ss-social--preset-icon-text .ss-social__link {
  padding: 8px 16px;
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-gray-100, #f1f5f9);
}

.ss-social--preset-icon-text .ss-social__link:hover {
  background: var(--ss-primary-light, #eef2ff);
  color: var(--ss-primary, #6366f1);
}

/* ---- Preset: Pill ---- */
.ss-social--preset-pill .ss-social__link {
  padding: 8px 20px;
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--ss-font-size-sm, 0.85rem);
}

.ss-social--preset-pill .ss-social__item--facebook .ss-social__link,
.ss-social--preset-pill .ss-social__link--facebook { background: var(--ss-social-facebook); color: #fff; }
.ss-social--preset-pill .ss-social__item--twitter .ss-social__link,
.ss-social--preset-pill .ss-social__link--twitter  { background: var(--ss-social-twitter); color: #fff; }
.ss-social--preset-pill .ss-social__item--x .ss-social__link,
.ss-social--preset-pill .ss-social__link--x        { background: var(--ss-social-x); color: #fff; }
.ss-social--preset-pill .ss-social__item--instagram .ss-social__link,
.ss-social--preset-pill .ss-social__link--instagram { background: var(--ss-social-instagram); color: #fff; }
.ss-social--preset-pill .ss-social__item--linkedin .ss-social__link,
.ss-social--preset-pill .ss-social__link--linkedin  { background: var(--ss-social-linkedin); color: #fff; }
.ss-social--preset-pill .ss-social__item--youtube .ss-social__link,
.ss-social--preset-pill .ss-social__link--youtube   { background: var(--ss-social-youtube); color: #fff; }
.ss-social--preset-pill .ss-social__item--pinterest .ss-social__link,
.ss-social--preset-pill .ss-social__link--pinterest { background: var(--ss-social-pinterest); color: #fff; }
.ss-social--preset-pill .ss-social__item--tiktok .ss-social__link,
.ss-social--preset-pill .ss-social__link--tiktok    { background: var(--ss-social-tiktok); color: #fff; }
.ss-social--preset-pill .ss-social__item--github .ss-social__link,
.ss-social--preset-pill .ss-social__link--github    { background: var(--ss-social-github); color: #fff; }
.ss-social--preset-pill .ss-social__item--dribbble .ss-social__link,
.ss-social--preset-pill .ss-social__link--dribbble  { background: var(--ss-social-dribbble); color: #fff; }
.ss-social--preset-pill .ss-social__item--whatsapp .ss-social__link,
.ss-social--preset-pill .ss-social__link--whatsapp  { background: var(--ss-social-whatsapp); color: #fff; }
.ss-social--preset-pill .ss-social__item--telegram .ss-social__link,
.ss-social--preset-pill .ss-social__link--telegram  { background: var(--ss-social-telegram); color: #fff; }

.ss-social--preset-pill .ss-social__link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ---- Preset: Minimal ---- */
.ss-social--preset-minimal .ss-social__link {
  color: var(--ss-text-muted, #64748b);
  padding: 4px;
}

.ss-social--preset-minimal .ss-social__label {
  display: none;
}

.ss-social--preset-minimal .ss-social__link:hover {
  color: var(--ss-primary, #6366f1);
}

/* Responsive */
@media (max-width: 767px) {
  .ss-social__list {
    justify-content: center;
  }
}


/* ========================================================================
   === Alert Box ===
   ======================================================================== */
.ss-alert {
  --ss-alert-color: var(--ss-primary, #6366f1);
  --ss-alert-bg: var(--ss-primary-light, #eef2ff);
  --ss-alert-border: var(--ss-primary, #6366f1);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 40px 16px 16px;
  border: 1px solid var(--ss-alert-border);
  border-left-width: 4px;
  border-radius: var(--ss-radius, 8px);
  background: var(--ss-alert-bg);
  color: var(--ss-text, #1a1a1a);
  font-size: var(--ss-font-size, 1rem);
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
}

/* --- Alert type colors --- */
.ss-alert--info {
  --ss-alert-color: #3b82f6;
  --ss-alert-bg: #eff6ff;
  --ss-alert-border: #3b82f6;
}

.ss-alert--success {
  --ss-alert-color: #10b981;
  --ss-alert-bg: #ecfdf5;
  --ss-alert-border: #10b981;
}

.ss-alert--warning {
  --ss-alert-color: #f59e0b;
  --ss-alert-bg: #fffbeb;
  --ss-alert-border: #f59e0b;
}

.ss-alert--error {
  --ss-alert-color: #ef4444;
  --ss-alert-bg: #fef2f2;
  --ss-alert-border: #ef4444;
}

.ss-alert__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ss-alert-color);
  font-size: 1.2rem;
}

.ss-alert__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ss-alert__content {
  flex: 1;
  min-width: 0;
}

.ss-alert__title {
  margin: 0 0 4px;
  font-size: var(--ss-font-size, 1rem);
  font-weight: 700;
  color: var(--ss-alert-color);
}

.ss-alert__message {
  margin: 0;
  line-height: 1.6;
  color: var(--ss-text, #1a1a1a);
}

.ss-alert__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--ss-text-muted, #64748b);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.ss-alert__close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ss-text, #1a1a1a);
}

.ss-alert__close:focus-visible {
  outline: 2px solid var(--ss-alert-color);
  outline-offset: 1px;
}

/* --- Dismissed state --- */
.ss-alert--dismissed {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- Preset: Standard ---- */
.ss-alert--preset-standard {
  /* base styles */
}

/* ---- Preset: Card ---- */
.ss-alert--preset-card {
  border-left-width: 1px;
  border-radius: var(--ss-radius, 8px);
  box-shadow: var(--ss-shadow-md);
  background: var(--ss-bg, #fff);
  padding: 20px 44px 20px 20px;
}

.ss-alert--preset-card .ss-alert__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ss-alert-bg);
  font-size: 1rem;
}

/* ---- Preset: Banner ---- */
.ss-alert--preset-banner {
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 14px 48px;
}

.ss-alert--preset-banner .ss-alert__content {
  flex: none;
}

/* ---- Preset: Inline ---- */
.ss-alert--preset-inline {
  display: inline-flex;
  padding: 8px 32px 8px 12px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  border-left-width: 3px;
  border-radius: var(--ss-radius-sm, 4px);
}

.ss-alert--preset-inline .ss-alert__icon {
  width: 18px;
  height: 18px;
  font-size: 0.9rem;
}

.ss-alert--preset-inline .ss-alert__title {
  font-size: var(--ss-font-size-sm, 0.85rem);
  margin-bottom: 0;
}

.ss-alert--preset-inline .ss-alert__message {
  font-size: var(--ss-font-size-sm, 0.85rem);
}

/* Responsive */
@media (max-width: 767px) {
  .ss-alert {
    padding: 12px 36px 12px 12px;
    gap: 10px;
  }

  .ss-alert--preset-banner {
    padding: 12px 40px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}


/* ========================================================================
   === Comparison Table ===
   ======================================================================== */
/* Contain layout for performance */
.ss-comparison-table {
  contain: layout style;
}

.ss-comparison {
  --ss-comparison-highlight-bg: var(--ss-primary-light, #eef2ff);
  --ss-comparison-highlight-border: var(--ss-primary, #6366f1);
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ss-comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ss-font-size, 1rem);
}

.ss-comparison__header {
  position: sticky;
  top: 0;
  z-index: 10;
}

.ss-comparison__header th {
  background: transparent;
  padding: 16px 20px;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--ss-border, #e2e8f0);
  color: var(--ss-text, #1a1a1a);
  white-space: nowrap;
}

.ss-comparison__header th:first-child {
  text-align: left;
}

.ss-comparison__row {
  transition: background 0.2s ease;
}

.ss-comparison__row:hover {
  background: var(--ss-gray-50, #f8fafc);
}

.ss-comparison__row:nth-child(even) {
  background: var(--ss-gray-50, #f8fafc);
}

.ss-comparison__row:nth-child(even):hover {
  background: var(--ss-gray-100, #f1f5f9);
}

.ss-comparison__cell {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  color: var(--ss-text, #1a1a1a);
  vertical-align: middle;
}

.ss-comparison__cell:first-child {
  text-align: left;
  font-weight: 500;
}

.ss-comparison__label {
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
}

.ss-comparison__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #10b981;
  font-size: 0.85rem;
  font-weight: 700;
}

.ss-comparison__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 700;
}

.ss-comparison__badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: var(--ss-primary, #6366f1);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
}

/* --- Highlight column --- */
.ss-comparison__column--highlight {
  background: var(--ss-comparison-highlight-bg);
  position: relative;
}

.ss-comparison__header .ss-comparison__column--highlight {
  background: var(--ss-comparison-highlight-bg);
  border-top: 3px solid var(--ss-comparison-highlight-border);
}

.ss-comparison__row .ss-comparison__column--highlight {
  background: var(--ss-comparison-highlight-bg);
}

.ss-comparison__row:hover .ss-comparison__column--highlight {
  background: color-mix(in srgb, var(--ss-comparison-highlight-bg) 80%, var(--ss-gray-100, #f1f5f9) 20%);
}

/* ---- Preset: Standard ---- */
.ss-comparison--preset-standard .ss-comparison__table {
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
}

/* When wrapped by the Card Container (.ss-entity-grid__card), the outer
   wrapper owns border / radius / shadow — remove the table's own. */
.ss-comparison.ss-entity-grid__card .ss-comparison__table {
  border: none;
  border-radius: 0;
}

/* Comparison table should not bounce on hover like regular cards. */
.ss-comparison.ss-entity-grid__card:hover {
  transform: none;
}

/* ---- Preset: Cards ---- */
@media (max-width: 767px) {
  .ss-comparison--preset-cards .ss-comparison__table,
  .ss-comparison--preset-cards .ss-comparison__header,
  .ss-comparison--preset-cards .ss-comparison__row,
  .ss-comparison--preset-cards .ss-comparison__feature-value,
  .ss-comparison--preset-cards .ss-comparison__feature-label,
  .ss-comparison--preset-cards thead,
  .ss-comparison--preset-cards tbody,
  .ss-comparison--preset-cards tr,
  .ss-comparison--preset-cards th,
  .ss-comparison--preset-cards td {
    display: block;
  }

  .ss-comparison--preset-cards .ss-comparison__header {
    position: static;
  }

  .ss-comparison--preset-cards thead {
    display: none;
  }

  .ss-comparison--preset-cards .ss-comparison__row {
    background: var(--ss-bg, #fff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: var(--ss-radius, 8px);
    margin-bottom: 16px;
    padding: 16px;
    box-shadow: var(--ss-shadow-sm);
  }

  .ss-comparison--preset-cards .ss-comparison__feature-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
    padding: 8px 0;
    border-bottom: 1px solid var(--ss-border, #e2e8f0);
  }

  .ss-comparison--preset-cards .ss-comparison__feature-value:last-child {
    border-bottom: none;
  }

  .ss-comparison--preset-cards .ss-comparison__feature-value::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--ss-text, #1a1a1a);
  }
}

/* ---- Preset: Highlight ---- */
.ss-comparison--preset-highlight .ss-comparison__column--highlight {
  box-shadow: inset 0 3px 0 var(--ss-comparison-highlight-border);
}

.ss-comparison--preset-highlight .ss-comparison__header .ss-comparison__column--highlight {
  font-size: 1.1em;
}

.ss-comparison--preset-highlight .ss-comparison__table {
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
}

.ss-comparison--preset-highlight.ss-entity-grid__card .ss-comparison__table {
  border: none;
  border-radius: 0;
}

/* Responsive: horizontal scroll */
@media (max-width: 767px) {
  .ss-comparison {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .ss-comparison__table {
    min-width: 600px;
  }
}

@media (min-width: 768px) {
  .ss-comparison__header th {
    padding: 20px 24px;
  }

  .ss-comparison__cell {
    padding: 16px 24px;
  }
}

/* ---- Preset: Pricing Tiers ---- */
.ss-comparison--preset-pricing .ss-comparison__billing-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 24px;
  background: var(--ss-gray-100, #f1f5f9);
  border-radius: 100px;
  padding: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.ss-comparison__billing-btn {
  padding: 8px 24px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-weight: 600;
  font-size: var(--ss-font-size-sm, 0.85rem);
  cursor: pointer;
  color: var(--ss-text-muted, #64748b);
  transition: all 0.2s ease;
}

.ss-comparison__billing-btn--active {
  background: #fff;
  color: var(--ss-text, #1a1a1a);
  box-shadow: var(--ss-shadow-sm);
}

.ss-comparison__pricing-wrap[data-billing-active="monthly"] .ss-comparison__price-annual {
  display: none;
}

.ss-comparison__pricing-wrap[data-billing-active="annual"] .ss-comparison__price-monthly {
  display: none;
}

.ss-comparison__pricing-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.ss-comparison__pricing-card--featured {
  transform: scale(1.03);
  z-index: 2;
  border-color: var(--ss-card-accent, var(--ss-primary, #6366f1));
  border-top: 3px solid var(--ss-card-accent, var(--ss-primary, #6366f1));
}

.ss-comparison__ribbon {
  position: absolute;
  top: 16px;
  right: -32px;
  background: var(--ss-card-accent, var(--ss-primary, #6366f1));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 40px;
  transform: rotate(45deg);
  z-index: 3;
}

.ss-comparison__pricing-features {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  width: 100%;
  text-align: left;
}

.ss-comparison__pricing-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
}

.ss-comparison__pricing-feature:last-child {
  border-bottom: none;
}

.ss-comparison__pricing-cta {
  margin-top: auto;
  width: 100%;
  text-align: center;
}

/* ---- Preset: Side by Side ---- */
.ss-comparison__sidebyside-wrap {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.ss-comparison__sidebyside-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
}

.ss-comparison__sidebyside-features {
  margin: 16px 0;
  flex: 1;
}

.ss-comparison__sidebyside-feature {
  margin-bottom: 16px;
}

.ss-comparison__sidebyside-feature--winner .ss-comparison__feature-label {
  font-weight: 700;
}

.ss-comparison__winner-badge {
  display: inline-block;
  padding: 1px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--ss-success, #10b981);
  color: #fff;
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 4px;
}

.ss-comparison__progress {
  width: 100%;
  height: 8px;
  background: var(--ss-gray-100, #f1f5f9);
  border-radius: 100px;
  overflow: hidden;
  margin: 4px 0;
}

.ss-comparison__progress-fill {
  height: 100%;
  background: var(--ss-primary, #6366f1);
  border-radius: 100px;
  transition: width 0.4s ease;
}

.ss-comparison__progress-label {
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-muted, #64748b);
  font-weight: 600;
}

@media (max-width: 767px) {
  .ss-comparison__sidebyside-wrap {
    flex-direction: column;
  }
}

/* ---- Preset: Minimal ---- */
.ss-comparison--preset-minimal .ss-comparison__table--minimal {
  border: none;
}

.ss-comparison--preset-minimal .ss-comparison__header--minimal th {
  border-bottom: none;
  padding: 16px 24px;
  font-weight: 600;
}

.ss-comparison--preset-minimal .ss-comparison__row--minimal td,
.ss-comparison--preset-minimal .ss-comparison__row--minimal th {
  padding: 16px 24px;
  border-bottom: none;
}

.ss-comparison--preset-minimal .ss-comparison__row--minimal:nth-child(odd) td,
.ss-comparison--preset-minimal .ss-comparison__row--minimal:nth-child(odd) th {
  background: rgba(0, 0, 0, 0.02);
}

.ss-comparison__category-row {
  border-top: 1px solid var(--ss-border, #e2e8f0);
}

.ss-comparison__category-header {
  padding: 20px 24px 12px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  text-align: left;
  cursor: pointer;
}

.ss-comparison__category-toggle::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  transition: transform 0.2s ease;
  vertical-align: middle;
}

.ss-comparison__category-toggle[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

.ss-comparison__header--floating {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--ss-bg, #fff);
  box-shadow: var(--ss-shadow-md);
}

/* ---- Mobile: Sticky First Column ---- */
@media (max-width: 767px) {
  .ss-comparison--resp-scroll .ss-comparison__table th:first-child,
  .ss-comparison--resp-scroll .ss-comparison__table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: inherit;
  }

  .ss-comparison--resp-scroll .ss-comparison__table th:first-child::after,
  .ss-comparison--resp-scroll .ss-comparison__table td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -12px;
    bottom: 0;
    width: 12px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.06), transparent);
    pointer-events: none;
  }
}

/* ---- Mobile: Scroll-Snap ---- */
@media (max-width: 767px) {
  .ss-comparison--resp-scroll .ss-comparison__scroll-wrap {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .ss-comparison--resp-scroll .ss-comparison__table th:not(:first-child),
  .ss-comparison--resp-scroll .ss-comparison__table td:not(:first-child) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* ---- Scroll Edge Indicators ---- */
.ss-comparison__scroll-wrap {
  position: relative;
}

.ss-comparison--resp-scroll .ss-comparison__scroll-wrap::before,
.ss-comparison--resp-scroll .ss-comparison__scroll-wrap::after {
  content: '';
  position: sticky;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  z-index: 3;
}

/* ---- Swipe Counter (JS-generated) ---- */
.ss-comparison__counter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-muted, #64748b);
}

.ss-comparison__counter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ss-gray-300, #cbd5e1);
  transition: background 0.2s ease;
}

.ss-comparison__counter-dot--active {
  background: var(--ss-primary, #6366f1);
  width: 8px;
  height: 8px;
}

.ss-comparison__counter-text {
  font-weight: 600;
}

/* ---- Column Toggle Bar (JS-generated) ---- */
.ss-comparison__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
}

.ss-comparison__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 500;
  color: var(--ss-text, #1a1a1a);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: 100px;
  transition: all 0.2s ease;
}

.ss-comparison__toggle-cb {
  accent-color: var(--ss-primary, #6366f1);
}

/* ---- Cards Grid Custom Property ---- */
.ss-comparison__cards-wrap {
  grid-template-columns: repeat(var(--ss-comparison-columns, 3), 1fr);
}

/* ---- Half-Star Rating ---- */
.ss-comparison__star--half {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ss-comparison__star-inner {
  clip-path: inset(0 50% 0 0);
}

.ss-comparison__star--half::after {
  content: '☆';
  position: absolute;
  left: 0;
  top: 0;
}

/* ---- Responsive Breakpoints ---- */
@media (max-width: 480px) {
  .ss-comparison__cards-wrap {
    grid-template-columns: 1fr;
  }

  .ss-comparison__sidebyside-wrap {
    flex-direction: column;
  }

  .ss-comparison__pricing-card {
    padding: 24px 16px;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .ss-comparison__cards-wrap {
    grid-template-columns: repeat(var(--ss-comparison-columns, 2), 1fr);
  }
}

/* ---- Print ---- */
@media print {
  .ss-comparison-table {
    overflow: visible !important;
  }

  .ss-comparison__scroll-wrap {
    overflow: visible !important;
  }

  .ss-comparison__table {
    min-width: 0 !important;
    page-break-inside: avoid;
  }

  .ss-comparison__header--sticky,
  .ss-comparison__header--floating {
    position: static !important;
  }

  .ss-comparison__table th:first-child,
  .ss-comparison__table td:first-child {
    position: static !important;
  }

  .ss-comparison__table th:first-child::after,
  .ss-comparison__table td:first-child::after {
    display: none;
  }

  .ss-comparison__counter,
  .ss-comparison__toggles,
  .ss-comparison__billing-toggle {
    display: none !important;
  }
}

/* ---- Forced Colors / High Contrast ---- */
@media (forced-colors: active) {
  .ss-comparison__check {
    background: transparent;
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .ss-comparison__cross {
    background: transparent;
    border: 2px solid currentColor;
    forced-color-adjust: none;
  }

  .ss-comparison__column--highlight {
    border: 2px solid Highlight;
    forced-color-adjust: none;
  }

  .ss-comparison__progress {
    border: 1px solid currentColor;
  }

  .ss-comparison__progress-fill {
    background: Highlight;
  }

  .ss-comparison__star--filled {
    color: Highlight;
  }
}


/* ========================================================================
   === Breadcrumbs ===
   ======================================================================== */
.ss-breadcrumbs {
  font-size: var(--ss-font-size-sm, 0.85rem);
  line-height: 1.5;
}

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

.ss-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  max-width: 200px;
}

.ss-breadcrumbs__link {
  color: var(--ss-text-muted, #64748b);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: inline-block;
}

.ss-breadcrumbs__link:hover {
  color: var(--ss-primary, #6366f1);
  text-decoration: underline;
}

.ss-breadcrumbs__link:focus-visible {
  outline: 2px solid var(--ss-primary, #6366f1);
  outline-offset: 2px;
  border-radius: 2px;
}

.ss-breadcrumbs__separator {
  display: inline-flex;
  align-items: center;
  margin: 0 8px;
  color: var(--ss-text-muted, #94a3b8);
  font-size: 0.75rem;
  flex-shrink: 0;
  user-select: none;
}

.ss-breadcrumbs__current {
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

/* ---- Preset: Standard (chevron separator) ---- */
.ss-breadcrumbs--preset-standard .ss-breadcrumbs__separator::before {
  content: "\203A"; /* › */
  font-size: 1.1em;
  font-weight: 300;
}

/* ---- Preset: Slash ---- */
.ss-breadcrumbs--preset-slash .ss-breadcrumbs__separator::before {
  content: "/";
  font-size: 0.9em;
}

/* ---- Preset: Minimal (dot) ---- */
.ss-breadcrumbs--preset-minimal .ss-breadcrumbs__separator::before {
  content: "·";
  font-size: 1.2em;
  font-weight: 700;
}

.ss-breadcrumbs--preset-minimal {
  font-size: 0.8rem;
}

.ss-breadcrumbs--preset-minimal .ss-breadcrumbs__current {
  font-weight: 600;
}

/* Responsive */
@media (max-width: 767px) {
  .ss-breadcrumbs__item {
    max-width: 140px;
  }

  .ss-breadcrumbs__link {
    max-width: 120px;
  }

  .ss-breadcrumbs__current {
    max-width: 140px;
  }

  .ss-breadcrumbs__separator {
    margin: 0 5px;
  }
}


/* ========================================================================
   === Lightbox Overlay ===
   ======================================================================== */
.ss-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ss-lightbox--open {
  opacity: 1;
  visibility: visible;
}

.ss-lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.92);
  transition: transform 0.3s ease;
}

.ss-lightbox--open .ss-lightbox__content {
  transform: scale(1);
}

.ss-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--ss-radius, 8px);
  user-select: none;
}

.ss-lightbox__caption {
  color: #fff;
  font-size: var(--ss-font-size-sm, 0.85rem);
  text-align: center;
  padding: 12px 16px;
  margin-top: 8px;
  max-width: 600px;
  line-height: 1.5;
  opacity: 0.9;
}

/* --- Close button --- */
.ss-lightbox__close {
  position: absolute;
  top: -48px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.ss-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.ss-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Navigation arrows --- */
.ss-lightbox__prev,
.ss-lightbox__next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ss-lightbox__prev { left: 16px; }
.ss-lightbox__next { right: 16px; }

.ss-lightbox__prev:hover,
.ss-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.08);
}

.ss-lightbox__prev:focus-visible,
.ss-lightbox__next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ss-lightbox__prev svg,
.ss-lightbox__next svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

/* Responsive */
@media (max-width: 767px) {
  .ss-lightbox__content {
    max-width: 95vw;
    max-height: 85vh;
  }

  .ss-lightbox__close {
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
  }

  .ss-lightbox__prev,
  .ss-lightbox__next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }

  .ss-lightbox__prev { left: 8px; }
  .ss-lightbox__next { right: 8px; }
}

@media (min-width: 1024px) {
  .ss-lightbox__prev { left: 32px; }
  .ss-lightbox__next { right: 32px; }

  .ss-lightbox__prev,
  .ss-lightbox__next {
    width: 56px;
    height: 56px;
  }
}


/* ========================================================================
   Supplementary BEM Classes — Gap Fill
   Generated for revised widget PHP files.
   ======================================================================== */


/* ========================================================================
   === Pricing Table — Additions ===
   ======================================================================== */

/* Grid wrapper (replaces bare .ss-pricing when used as explicit child) */
.ss-pricing__grid {
  display: grid;
  gap: var(--ss-gap, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ss-pricing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-pricing__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Plan card (alias of __card for revised markup) */
.ss-pricing__plan {
  position: relative;
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-pricing__plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

.ss-pricing__plan--featured {
  transform: scale(1.05);
  border-color: var(--ss-primary, #6366f1);
  border-width: 2px;
  box-shadow: var(--ss-shadow-lg);
  z-index: 2;
}

.ss-pricing__plan--featured:hover {
  transform: scale(1.07);
}

@media (max-width: 767px) {
  .ss-pricing__plan--featured {
    transform: none;
  }

  .ss-pricing__plan--featured:hover {
    transform: translateY(-3px);
  }
}

/* Plan title */
.ss-pricing__title {
  margin: 0 0 4px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.3;
}

/* Plan description */
.ss-pricing__description {
  margin: 0 0 12px;
  font-size: 0.9em;
  color: #666;
  line-height: 1.5;
}

/* Plan image */
.ss-pricing__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius, 8px) var(--ss-radius, 8px) 0 0;
  object-fit: cover;
}

/* Inline badge (next to title) */
.ss-pricing__badge--inline {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-radius: 100px;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.4;
}

/* Feature text */
.ss-pricing__feature-text {
  flex: 1;
  min-width: 0;
}

/* Feature icon variants */
.ss-pricing__feature-icon--yes {
  color: var(--ss-success, #10b981);
}

.ss-pricing__feature-icon--no {
  color: var(--ss-error, #ef4444);
  opacity: 0.5;
}

/* Feature divider row */
.ss-pricing__feature--divider {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  margin: 4px 0;
  height: 0;
  line-height: 0;
}


/* ========================================================================
   === FAQ — Additions ===
   ======================================================================== */

.ss-faq__question-text {
  flex: 1;
  min-width: 0;
}


/* ========================================================================
   === CTA Banner — Additions ===
   ======================================================================== */

/* Card wrapper inside banner */
.ss-cta-banner__card {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius-lg, 12px);
  padding: 40px;
  box-shadow: var(--ss-shadow-sm);
  width: 100%;
}

/* Heading */
.ss-cta-banner__heading {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--ss-text, #1a1a1a);
  line-height: 1.2;
}

/* Button base */
.ss-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--ss-radius, 8px);
  font-size: var(--ss-font-size, 1rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-cta-banner__btn:focus-visible {
  outline: 2px solid var(--ss-primary, #6366f1);
  outline-offset: 2px;
}

.ss-cta-banner__btn--primary {
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-color: var(--ss-primary, #6366f1);
}

.ss-cta-banner__btn--primary:hover {
  background: var(--ss-primary-hover, #4f46e5);
  border-color: var(--ss-primary-hover, #4f46e5);
  color: #fff;
}

.ss-cta-banner__btn--secondary {
  background: transparent;
  color: var(--ss-primary, #6366f1);
  border-color: var(--ss-primary, #6366f1);
}

.ss-cta-banner__btn--secondary:hover {
  background: var(--ss-primary-light, #eef2ff);
  border-color: var(--ss-primary-hover, #4f46e5);
  color: var(--ss-primary-hover, #4f46e5);
}

/* Overlay */
.ss-cta-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  opacity: 0.8;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

@media (max-width: 767px) {
  .ss-cta-banner__card {
    padding: 24px;
  }
}


/* ========================================================================
   === Testimonials — Additions ===
   ======================================================================== */

/* Explicit grid wrapper */
.ss-testimonials__grid {
  display: grid;
  gap: var(--ss-gap, 20px);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .ss-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Author info (name + role) */
.ss-testimonials__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Filled star */
.ss-testimonials__star--filled {
  color: #f59e0b;
}


/* ========================================================================
   === Team Members — Additions ===
   ======================================================================== */

/* Overlay variant member card */
.ss-team__member--overlay {
  position: relative;
  overflow: hidden;
  border: none;
}

.ss-team__member--overlay:hover .ss-team__photo {
  transform: scale(1.05);
}

/* Overlay info layer */
.ss-team__info--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ss-team__member--overlay:hover .ss-team__info--overlay {
  opacity: 1;
}

.ss-team__info--overlay .ss-team__name { color: #fff; }
.ss-team__info--overlay .ss-team__role { color: rgba(255, 255, 255, 0.8); }

/* Photo overlay gradient on hover */
.ss-team__photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ss-team__member:hover .ss-team__photo-overlay {
  opacity: 1;
}


/* ========================================================================
   === Info Box — Additions ===
   ======================================================================== */

/* Inner flex wrapper */
.ss-info-box__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* Media container (icon or image) */
.ss-info-box__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image element */
.ss-info-box__image {
  display: block;
  max-width: 80px;
  height: auto;
  border-radius: var(--ss-radius, 8px);
  object-fit: cover;
}


/* ========================================================================
   === Feature List — Additions ===
   ======================================================================== */

/* NOTE: Main grid rules live in the Feature List block above.
   Do not duplicate grid-template-columns or gap here —
   Elementor's generated selectors control those via the widget panel. */

/* Feature image */
.ss-feature-list__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--ss-radius, 8px);
  object-fit: cover;
  margin-bottom: 12px;
}

/* Alternating left/right items */
.ss-feature-list__item--left {
  text-align: right;
}

.ss-feature-list__item--right {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .ss-feature-list__item--left,
  .ss-feature-list__item--right {
    flex-direction: row;
    text-align: left;
  }
}

/* Vertical connector line (timeline preset) */
.ss-feature-list__connector-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 23px;
  width: 2px;
  background: #e5e7eb;
  z-index: 0;
}

/* Connector dot on line */
.ss-feature-list__connector-dot {
  position: relative;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ss-primary, #6366f1);
  flex-shrink: 0;
  border: 2px solid var(--ss-bg, #fff);
}

/* Feature link/CTA */
.ss-feature-list__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: var(--ss-primary, #6366f1);
  font-weight: 500;
  font-size: var(--ss-font-size-sm, 0.85rem);
  text-decoration: none;
  transition: all 0.2s ease;
}

.ss-feature-list__link:hover {
  color: var(--ss-primary-hover, #4f46e5);
  gap: 8px;
}


/* ========================================================================
   === Stats Counter — Additions ===
   ======================================================================== */

/* Value wrapper (prefix + number + suffix) */
.ss-counter__value-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

/* Prefix text */
.ss-counter__prefix {
  font-size: calc(var(--ss-counter-number-size, 2.5rem) * 0.55);
  font-weight: 700;
  color: var(--ss-primary, #6366f1);
  margin-right: 2px;
}

/* Circle preset wrapper */
.ss-counter__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid var(--ss-primary, #6366f1);
  aspect-ratio: 1;
  width: 120px;
  margin: 0 auto 12px;
  flex-direction: column;
}

/* Counter image/icon */
.ss-counter__image {
  display: block;
  max-width: 60px;
  height: auto;
  margin: 0 auto 12px;
  object-fit: contain;
}


/* ========================================================================
   === Timeline — Additions ===
   ======================================================================== */

/* Timeline item image */
.ss-timeline__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ss-radius, 8px);
  object-fit: cover;
  margin-bottom: 12px;
}

/* Timeline item link/CTA */
.ss-timeline__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  color: var(--ss-primary, #6366f1);
  font-weight: 500;
  font-size: var(--ss-font-size-sm, 0.85rem);
  text-decoration: none;
  transition: all 0.2s ease;
}

.ss-timeline__link:hover {
  color: var(--ss-primary-hover, #4f46e5);
  gap: 8px;
}


/* ========================================================================
   === Image Gallery — Additions ===
   ======================================================================== */

/* Generic gap rule for column-count variants */
[class*="ss-gallery__grid--"] {
  gap: var(--ss-gallery-gap, 12px);
}

/* Aspect ratio enforcement */
.ss-gallery__item--ratio {
  aspect-ratio: var(--ss-gallery-ratio, 1);
}

.ss-gallery__item--ratio .ss-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gallery link wrapper */
.ss-gallery__link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: inherit;
  overflow: hidden;
}

/* Lightbox link variant */
.ss-gallery__link--lightbox {
  cursor: zoom-in;
}

/* Caption overlay on image */
.ss-gallery__caption--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  color: #fff;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 500;
  line-height: 1.4;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.ss-gallery__item:hover .ss-gallery__caption--overlay {
  transform: translateY(0);
}

/* Zoom/lightbox icon hint */
.ss-gallery__overlay-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: var(--ss-text, #1a1a1a);
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 3;
}

.ss-gallery__item:hover .ss-gallery__overlay-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Lightbox inner overlay bg container */
.ss-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: -1;
}


/* ========================================================================
   === Logo Carousel — Additions ===
   ======================================================================== */

/* Logo link wrapper */
.ss-logo-carousel__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.ss-logo-carousel__link:hover {
  opacity: 0.8;
}

/* Logo caption/name */
.ss-logo-carousel__name {
  text-align: center;
  font-size: 0.85em;
  color: #666;
  margin-top: 8px;
  line-height: 1.3;
  font-weight: 500;
}


/* ========================================================================
   === Social Links — Additions ===
   ======================================================================== */

/* Platform-specific hover via link-level modifier class */
.ss-social__link--facebook:hover  { color: var(--ss-social-facebook, #1877f2); }
.ss-social__link--twitter:hover   { color: var(--ss-social-twitter, #1da1f2); }
.ss-social__link--x:hover         { color: var(--ss-social-x, #000); }
.ss-social__link--instagram:hover { color: var(--ss-social-instagram, #e4405f); }
.ss-social__link--linkedin:hover  { color: var(--ss-social-linkedin, #0a66c2); }
.ss-social__link--youtube:hover   { color: var(--ss-social-youtube, #ff0000); }
.ss-social__link--pinterest:hover { color: var(--ss-social-pinterest, #bd081c); }
.ss-social__link--tiktok:hover    { color: var(--ss-social-tiktok, #000); }
.ss-social__link--github:hover    { color: var(--ss-social-github, #333); }
.ss-social__link--dribbble:hover  { color: var(--ss-social-dribbble, #ea4c89); }
.ss-social__link--whatsapp:hover  { color: var(--ss-social-whatsapp, #25d366); }
.ss-social__link--telegram:hover  { color: var(--ss-social-telegram, #0088cc); }


/* ========================================================================
   === Alert Box — Additions ===
   ======================================================================== */

/* Inner flex wrapper (icon + content + close) */
.ss-alert__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* CTA button inside alert */
.ss-alert__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 6px 16px;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 600;
  color: var(--ss-alert-color, var(--ss-primary, #6366f1));
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--ss-radius-sm, 4px);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ss-alert__cta:hover {
  background: var(--ss-alert-color, var(--ss-primary, #6366f1));
  color: #fff;
  border-color: var(--ss-alert-color, var(--ss-primary, #6366f1));
}


/* ========================================================================
   === Comparison Table — Additions ===
   ======================================================================== */

/* Card-mode wrapper (CSS grid) */
.ss-comparison__cards-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ss-gap, 20px);
}

@media (min-width: 768px) {
  .ss-comparison__cards-wrap { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .ss-comparison__cards-wrap { grid-template-columns: repeat(3, 1fr); }
}

/* Individual card in card mode */
.ss-comparison__card {
  background: var(--ss-bg, #fff);
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: var(--ss-radius, 8px);
  overflow: hidden;
  box-shadow: var(--ss-shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-comparison__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ss-shadow-lg);
}

/* Card header area */
.ss-comparison__card-header {
  padding: 20px 24px;
  background: var(--ss-bg-alt, #f8fafc);
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  text-align: center;
}

.ss-comparison__card-header h3 {
  margin: 0;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
}

/* Features list (dl element) in card */
.ss-comparison__card-features {
  flex: 1;
  margin: 0;
  padding: 0;
}

/* Single feature row (dt + dd pair) */
.ss-comparison__card-feature-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  font-size: var(--ss-font-size, 1rem);
}

.ss-comparison__card-feature-row:last-child {
  border-bottom: none;
}

.ss-comparison__card-feature-row dt {
  font-weight: 500;
  color: var(--ss-text, #1a1a1a);
}

.ss-comparison__card-feature-row dd {
  margin: 0;
  text-align: right;
  color: var(--ss-text-muted, #64748b);
}

/* CTA row in table footer */
.ss-comparison__cta-row {
  padding: 16px 24px;
  text-align: center;
  border-top: 1px solid var(--ss-border, #e2e8f0);
}

/* Sticky header modifier — needs opaque bg so content doesn't bleed through. */
.ss-comparison__header--sticky {
  position: sticky;
  top: 0;
  z-index: 10;
}

.ss-comparison__header--sticky th,
.ss-comparison__header--sticky .ss-comparison__header-cell {
  background: var(--ss-bg, #fff);
}

/* Star base */
.ss-comparison__star {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
}

/* Filled star */
.ss-comparison__star--filled {
  color: #f59e0b;
}

/* Empty star */
.ss-comparison__star--empty {
  color: #d1d5db;
}


/* ========================================================================
   === Render-compatibility aliases ===
   Bridges CSS class names used by the PHP render() that differ from
   the original stylesheet definitions.  Keeps both old & new working.
   ======================================================================== */

/* --- Comparison Table: render class aliases --- */

/* Scroll wrapper */
.ss-comparison__scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header cells — align with .ss-comparison__header th.
   Background set to transparent so the Elementor header-bg control
   (which targets .ss-comparison__header + th + header-cell) takes effect. */
.ss-comparison__header-cell {
  background: transparent;
  padding: 16px 20px;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--ss-border, #e2e8f0);
  color: var(--ss-text, #1a1a1a);
  white-space: nowrap;
}

.ss-comparison__header-cell--label {
  text-align: left;
}

@media (min-width: 768px) {
  .ss-comparison__header-cell {
    padding: 20px 24px;
  }
}

/* Feature label th — alias for .ss-comparison__label */
.ss-comparison__feature-label {
  font-weight: 600;
  color: var(--ss-text, #1a1a1a);
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  vertical-align: middle;
}

/* Feature value td — alias for .ss-comparison__cell */
.ss-comparison__feature-value {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--ss-border, #e2e8f0);
  color: var(--ss-text, #1a1a1a);
  vertical-align: middle;
}

@media (min-width: 768px) {
  .ss-comparison__feature-label,
  .ss-comparison__feature-value {
    padding: 16px 24px;
  }
}

/* Column elements rendered in header */
.ss-comparison__column-badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 100px;
  background: var(--ss-primary, #6366f1);
  color: #fff;
  vertical-align: middle;
  margin-bottom: 6px;
}

.ss-comparison__column-image {
  margin-bottom: 8px;
}

.ss-comparison__column-image img {
  max-width: 120px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.ss-comparison__column-title {
  margin: 0 0 4px;
  font-size: var(--ss-font-size-lg, 1.25rem);
  font-weight: 700;
  color: var(--ss-text, #1a1a1a);
}

.ss-comparison__column-subtitle {
  font-size: var(--ss-font-size-sm, 0.85rem);
  color: var(--ss-text-muted, #64748b);
  margin-bottom: 4px;
}

.ss-comparison__column-price {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ss-primary, #6366f1);
}

/* CTA row */
.ss-comparison__cta-label {
  padding: 16px 24px;
  border-top: 1px solid var(--ss-border, #e2e8f0);
}

.ss-comparison__cta {
  padding: 16px 24px;
  text-align: center;
  border-top: 1px solid var(--ss-border, #e2e8f0);
}

.ss-comparison__cta-button {
  display: inline-block;
  padding: 10px 24px;
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-radius: var(--ss-radius, 8px);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ss-font-size, 1rem);
  transition: background 0.2s ease;
}

.ss-comparison__cta-button:hover {
  background: var(--ss-primary-hover, #4f46e5);
  color: #fff;
}

/* Cards layout wrapper — uses CSS custom property from Elementor control */
.ss-comparison__cards-wrap {
  display: grid;
  grid-template-columns: repeat(var(--ss-comparison-columns, 3), 1fr);
  gap: var(--ss-gap, 20px);
}

/* Empty / badge-value / rating */
.ss-comparison__empty {
  color: var(--ss-text-muted, #94a3b8);
  font-style: italic;
  font-size: var(--ss-font-size-sm, 0.85rem);
}

.ss-comparison__badge-value {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 100px;
  background: var(--ss-primary-light, #eef2ff);
  color: var(--ss-primary, #6366f1);
}

.ss-comparison__rating {
  display: inline-flex;
  gap: 2px;
}

/* Responsive modifier */
.ss-comparison--resp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ss-comparison--resp-stack .ss-comparison__table {
  min-width: 0;
}

@media (max-width: 767px) {
  .ss-comparison--resp-stack .ss-comparison__table,
  .ss-comparison--resp-stack thead,
  .ss-comparison--resp-stack tbody,
  .ss-comparison--resp-stack tr,
  .ss-comparison--resp-stack th,
  .ss-comparison--resp-stack td {
    display: block;
  }

  .ss-comparison--resp-stack thead {
    display: none;
  }

  .ss-comparison--resp-stack .ss-comparison__row {
    background: var(--ss-bg, #fff);
    border: 1px solid var(--ss-border, #e2e8f0);
    border-radius: var(--ss-radius, 8px);
    margin-bottom: 16px;
    padding: 16px;
  }

  .ss-comparison--resp-stack .ss-comparison__feature-value,
  .ss-comparison--resp-stack .ss-comparison__feature-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--ss-border, #e2e8f0);
  }

  .ss-comparison--resp-stack .ss-comparison__feature-value::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    color: var(--ss-text, #1a1a1a);
  }
}


/* --- Stats Counter: missing rules --- */

.ss-counter__prefix {
  font-size: calc(var(--ss-counter-number-size, 2.5rem) * 0.55);
  font-weight: 700;
  color: var(--ss-primary, #6366f1);
  margin-right: 2px;
}

.ss-counter__value-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.ss-counter__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.ss-counter__image {
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}

.ss-counter__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--ss-radius, 8px);
}

.ss-counter--animate .ss-counter__number {
  /* Animation handled by JS — this class is for CSS styling hooks */
  transition: color 0.3s ease;
}


/* --- Gallery: missing hover + link + caption rules --- */

.ss-gallery__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.ss-gallery__link--lightbox {
  cursor: zoom-in;
}

.ss-gallery__item--ratio {
  aspect-ratio: 1 / 1;
}

.ss-gallery__item--ratio .ss-gallery__image {
  position: absolute;
  inset: 0;
}

.ss-gallery__item--ratio .ss-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-gallery__caption--overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
  color: #fff;
  font-size: var(--ss-font-size-sm, 0.85rem);
  font-weight: 500;
}

.ss-gallery--caption-overlay .ss-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
}

/* Hover effects */
.ss-gallery--hover-zoom .ss-gallery__item:hover .ss-gallery__image img {
  transform: scale(1.08);
}

.ss-gallery--hover-fade .ss-gallery__item:hover .ss-gallery__image img {
  opacity: 0.8;
}

.ss-gallery--hover-overlay-slide .ss-gallery__overlay {
  transform: translateY(100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ss-gallery--hover-overlay-slide .ss-gallery__item:hover .ss-gallery__overlay {
  transform: translateY(0);
  opacity: 1;
}

.ss-gallery--hover-none .ss-gallery__item:hover .ss-gallery__image img {
  transform: none;
}

/* Grid variant modifier classes */
.ss-gallery__grid--masonry {
  display: block;
  column-count: var(--ss-gallery-cols, 3);
  column-gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery__grid--masonry .ss-gallery__item {
  break-inside: avoid;
  margin-bottom: var(--ss-gallery-gap, 12px);
}

.ss-gallery__grid--justified {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery__grid--justified .ss-gallery__item {
  flex: 1 1 200px;
  max-height: 260px;
}

.ss-gallery__grid--slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: var(--ss-gallery-gap, 12px);
}

.ss-gallery__grid--slider::-webkit-scrollbar {
  display: none;
}

.ss-gallery__grid--slider .ss-gallery__item {
  flex: 0 0 80%;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .ss-gallery__grid--slider .ss-gallery__item { flex: 0 0 50%; }
}

@media (min-width: 1024px) {
  .ss-gallery__grid--slider .ss-gallery__item { flex: 0 0 33.333%; }
}

/* --- Gallery Pagination --- */
.ss-gallery-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 24px;
}

.ss-gallery-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 8px 14px;
  border: 1px solid var(--ss-border, #e2e8f0);
  border-radius: 6px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ss-gallery-pagination__btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
  color: #111827;
}

.ss-gallery-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ss-gallery-pagination__btn--active {
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-color: var(--ss-primary, #6366f1);
}

.ss-gallery-pagination__btn--active:hover {
  background: var(--ss-primary-hover, #4f46e5);
  border-color: var(--ss-primary-hover, #4f46e5);
  color: #fff;
}

.ss-gallery-pagination__btn--prev svg,
.ss-gallery-pagination__btn--next svg {
  width: 16px;
  height: 16px;
}

/* Load More — wider button */
.ss-gallery-pagination__btn--load-more {
  padding: 12px 32px;
  font-size: 0.9375rem;
  border-radius: 8px;
}

/* Infinite scroll spinner */
.ss-gallery-pagination__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--ss-primary, #6366f1);
}

.ss-gallery-pagination__spinner svg {
  width: 24px;
  height: 24px;
}

.ss-gallery-pagination__sentinel {
  width: 1px;
  height: 1px;
}

/* Item-wrap — grid pass-through */
.ss-gallery__item-wrap {
  display: contents;
}

/* When paginated, hidden items override */
.ss-gallery--paginated .ss-gallery__item-wrap[style*="display:none"] {
  display: none !important;
}

@media (max-width: 767px) {
  .ss-gallery-pagination__btn {
    min-width: 32px;
    padding: 6px 10px;
    font-size: 0.8125rem;
  }
}


/* --- Alert: CTA button --- */
.ss-alert__cta {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 20px;
  background: var(--ss-alert-color, var(--ss-primary, #6366f1));
  color: #fff;
  border-radius: var(--ss-radius, 8px);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--ss-font-size-sm, 0.85rem);
  transition: opacity 0.2s ease;
}

.ss-alert__cta:hover {
  opacity: 0.85;
  color: #fff;
}

/* --- Alert inner container --- */
.ss-alert__inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

/* ========================================================================
   === Entity Query — Table Layout ===
   ======================================================================== */
.ss-eq__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.ss-eq__table thead th {
  text-align: left;
  white-space: nowrap;
  font-weight: 600;
  padding: 10px 12px;
}

.ss-eq__table tbody tr {
  transition: background-color 150ms ease, border-color 150ms ease;
}

.ss-eq__table tbody td {
  padding: 10px 12px;
  vertical-align: middle;
}

/* ========================================================================
   === Content Page Widget ===
   Comprehensive full-page content renderer with 8 layout presets.
   Class prefix: .ss-cpage
   ======================================================================== */

/* ── Base Layout ── */
.ss-cpage {
  width: 100%;
  line-height: 1.6;
  color: #1e293b;
}

.ss-cpage__inner {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

/* Alignment prefix classes */
.ss-cpage-align-left .ss-cpage__inner {
  margin-left: 0;
  margin-right: auto;
}
.ss-cpage-align-center .ss-cpage__inner {
  margin-left: auto;
  margin-right: auto;
}
.ss-cpage-align-right .ss-cpage__inner {
  margin-left: auto;
  margin-right: 0;
}

/* ── Article Header — Base ── */
.ss-cpage__header {
  margin-bottom: 48px;
}

.ss-cpage__breadcrumb {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
}

.ss-cpage__breadcrumb a {
  color: var(--ss-primary, #6366f1);
  text-decoration: none;
}

.ss-cpage__breadcrumb a:hover {
  text-decoration: underline;
}

.ss-cpage__bc-sep {
  margin: 0 6px;
  color: #cbd5e1;
}

.ss-cpage__bc-current {
  color: #94a3b8;
}

.ss-cpage__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
}

.ss-cpage__meta-sep {
  margin: 0 4px;
  color: #cbd5e1;
}

.ss-cpage__category {
  font-weight: 600;
  color: var(--ss-primary, #6366f1);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.ss-cpage__title {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #0f172a;
}

.ss-cpage__subtitle {
  font-size: 18px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px;
}

.ss-cpage__featured-wrap {
  margin-top: 24px;
}

.ss-cpage__featured-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
}

/* ── Header Layout: Standard (stacked) ── */
.ss-cpage__header--standard .ss-cpage__meta {
  margin-bottom: 16px;
}

/* ── Header Layout: Hero Overlay ── */
.ss-cpage__header--hero_overlay {
  position: relative;
  margin-bottom: 48px;
}

.ss-cpage__header--hero_overlay .ss-cpage__header-bg {
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.ss-cpage__header--hero_overlay .ss-cpage__header-overlay {
  width: 100%;
  padding: 60px 40px 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  color: #fff;
}

.ss-cpage__header--hero_overlay .ss-cpage__title,
.ss-cpage__header--hero_overlay .ss-cpage__subtitle {
  color: #fff;
}

.ss-cpage__header--hero_overlay .ss-cpage__meta {
  color: rgba(255, 255, 255, 0.8);
}

.ss-cpage__header--hero_overlay .ss-cpage__meta-sep {
  color: rgba(255, 255, 255, 0.4);
}

.ss-cpage__header--hero_overlay .ss-cpage__category {
  color: rgba(255, 255, 255, 0.9);
}

.ss-cpage__header--hero_overlay .ss-cpage__breadcrumb {
  color: rgba(255, 255, 255, 0.7);
}

.ss-cpage__header--hero_overlay .ss-cpage__breadcrumb a {
  color: #fff;
}

/* ── Header Layout: Side by Side ── */
.ss-cpage__header--side_by_side .ss-cpage__header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ss-cpage__header--side_by_side .ss-cpage__header-image-wrap img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* ── Header Layout: Minimal ── */
.ss-cpage__header--minimal {
  text-align: left;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e8f0;
}

.ss-cpage__header--minimal .ss-cpage__title {
  font-size: 32px;
}

/* ── Header Layout: Centered ── */
.ss-cpage__header--centered {
  text-align: center;
}

.ss-cpage__header--centered .ss-cpage__meta {
  justify-content: center;
}

.ss-cpage__header--centered .ss-cpage__title {
  font-size: 40px;
}

.ss-cpage__header--centered .ss-cpage__subtitle {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Section Wrapper ── */
.ss-cpage__section {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ss-cpage__section + .ss-cpage__section {
  margin-top: 0;
}

/* Alternate backgrounds */
.ss-cpage__section--alt {
  background-color: #f8fafc;
}

/* Full-bleed capable sections */
.ss-cpage--full-bleed .ss-cpage__section--bleed {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* ── Dividers ── */
.ss-cpage__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px auto;
  max-width: 100%;
}

.ss-cpage__divider--line {
  height: 0;
  border: none;
  border-top: 1px solid #e2e8f0;
}

.ss-cpage__divider--dot {
  height: auto;
  border: none;
}

.ss-cpage__divider--dot::before {
  content: '• • •';
  font-size: 14px;
  letter-spacing: 8px;
  color: #cbd5e1;
}

.ss-cpage__divider--shadow {
  height: 12px;
  border: none;
  background: radial-gradient(ellipse at 50% -4px, rgba(0, 0, 0, 0.06) 0%, transparent 70%);
}

/* ── Image Hover Effects ── */
.ss-cpage--img-zoom .ss-cpage__section img {
  transition: transform 0.4s ease;
}
.ss-cpage--img-zoom .ss-cpage__section img:hover {
  transform: scale(1.05);
}

.ss-cpage--img-brightness .ss-cpage__section img {
  transition: filter 0.3s ease;
}
.ss-cpage--img-brightness .ss-cpage__section img:hover {
  filter: brightness(1.1);
}

.ss-cpage--img-grayscale .ss-cpage__section img {
  filter: grayscale(1);
  transition: filter 0.4s ease;
}
.ss-cpage--img-grayscale .ss-cpage__section img:hover {
  filter: grayscale(0);
}

/* Prevent overflow on zoom */
.ss-cpage--img-zoom .ss-cpage__section .ss-hero-image,
.ss-cpage--img-zoom .ss-cpage__section .ss-media-text-image,
.ss-cpage--img-zoom .ss-cpage__section .ss-card-image,
.ss-cpage--img-zoom .ss-cpage__section .ss-column-image {
  overflow: hidden;
  border-radius: inherit;
}

/* ── Global CTA Block ── */
.ss-cpage__global-cta {
  margin-top: 48px;
  padding: 48px 32px;
  background: var(--ss-primary-light, #eef2ff);
  border-radius: 16px;
  text-align: center;
}

.ss-cpage__global-cta-inner {
  max-width: 640px;
  margin: 0 auto;
}

.ss-cpage__global-cta .ss-cta-heading {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 12px;
  color: #0f172a;
}

.ss-cpage__global-cta .ss-cta-body {
  font-size: 16px;
  color: #475569;
  margin: 0 0 24px;
}

.ss-cpage__global-cta .ss-cta-btn {
  display: inline-block;
}

/* ========================================================================
   Content Page — PRESET: Editorial
   Classic long-form article. Readable, restrained, heading-focused.
   ======================================================================== */
.ss-cpage--editorial {
  font-family: Georgia, 'Times New Roman', serif;
}

.ss-cpage--editorial .ss-cpage__inner {
  max-width: 780px;
}

.ss-cpage--editorial .ss-cpage__title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ss-cpage--editorial .ss-cpage__subtitle {
  font-size: 20px;
  font-style: italic;
  color: #475569;
}

.ss-cpage--editorial .ss-cpage__meta {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px;
}

.ss-cpage--editorial .ss-section-body-text,
.ss-cpage--editorial .ss-hero-body,
.ss-cpage--editorial .ss-column-body {
  font-size: 18px;
  line-height: 1.8;
}

.ss-cpage--editorial .ss-section-heading {
  font-size: 26px;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 8px;
}

.ss-cpage--editorial .ss-cpage__global-cta {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

/* ========================================================================
   Content Page — PRESET: Magazine
   Bold visuals, full-bleed hero, vibrant. Wide inner.
   ======================================================================== */
.ss-cpage--magazine .ss-cpage__inner {
  max-width: 1100px;
}

.ss-cpage--magazine .ss-cpage__title {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
}

.ss-cpage--magazine .ss-cpage__subtitle {
  font-size: 20px;
  font-weight: 500;
}

.ss-cpage--magazine .ss-cpage__featured-img {
  border-radius: 0;
}

.ss-cpage--magazine .ss-cpage__header--hero_overlay .ss-cpage__header-bg {
  min-height: 520px;
  border-radius: 0;
}

.ss-cpage--magazine .ss-section-heading {
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ss-cpage--magazine .ss-card {
  border-radius: 0;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.ss-cpage--magazine .ss-cpage__section--bleed {
  background: #0f172a;
  color: #f8fafc;
}

.ss-cpage--magazine .ss-cpage__global-cta {
  background: #0f172a;
  color: #fff;
  border-radius: 0;
}

.ss-cpage--magazine .ss-cpage__global-cta .ss-cta-heading {
  color: #fff;
}

.ss-cpage--magazine .ss-cpage__global-cta .ss-cta-body {
  color: #cbd5e1;
}

/* ========================================================================
   Content Page — PRESET: Landing Page
   Conversion-focused. Centered, CTA-heavy, benefits layout.
   ======================================================================== */
.ss-cpage--landing .ss-cpage__inner {
  max-width: 1000px;
}

.ss-cpage--landing .ss-cpage__header {
  text-align: center;
}

.ss-cpage--landing .ss-cpage__meta {
  justify-content: center;
}

.ss-cpage--landing .ss-cpage__title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.1;
}

.ss-cpage--landing .ss-cpage__subtitle {
  font-size: 20px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ss-cpage--landing .ss-section {
  text-align: center;
}

.ss-cpage--landing .ss-features-grid {
  grid-template-columns: repeat(3, 1fr);
}

.ss-cpage--landing .ss-feature-item {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.ss-cpage--landing .ss-cta-buttons {
  justify-content: center;
}

.ss-cpage--landing .ss-btn-primary {
  padding: 14px 32px;
  font-size: 16px;
}

.ss-cpage--landing .ss-cpage__section + .ss-cpage__section {
  margin-top: 64px;
}

.ss-cpage--landing .ss-cpage__global-cta {
  background: linear-gradient(135deg, var(--ss-primary, #6366f1) 0%, var(--ss-primary-dark, #3730a3) 100%);
  color: #fff;
  border-radius: 20px;
  padding: 60px 40px;
}

.ss-cpage--landing .ss-cpage__global-cta .ss-cta-heading {
  color: #fff;
  font-size: 32px;
}

.ss-cpage--landing .ss-cpage__global-cta .ss-cta-body {
  color: rgba(255, 255, 255, 0.85);
}

.ss-cpage--landing .ss-cpage__global-cta .ss-btn-primary {
  background: #fff;
  color: var(--ss-primary, #6366f1);
}

/* ========================================================================
   Content Page — PRESET: SEO Article
   Long-form. Heading hierarchy emphasis, FAQ-friendly, max readability.
   ======================================================================== */
.ss-cpage--seo .ss-cpage__inner {
  max-width: 800px;
}

.ss-cpage--seo .ss-cpage__title {
  font-size: 34px;
  font-weight: 700;
}

.ss-cpage--seo .ss-section-heading {
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid var(--ss-primary, #6366f1);
}

.ss-cpage--seo .ss-section-subtitle {
  color: #475569;
  font-size: 15px;
}

.ss-cpage--seo .ss-section-body-text {
  font-size: 16px;
  line-height: 1.75;
}

.ss-cpage--seo .ss-faq-item {
  border: 1px solid #e2e8f0;
  background: #fff;
}

.ss-cpage--seo .ss-faq-item[open] {
  border-color: var(--ss-primary, #6366f1);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.ss-cpage--seo .ss-cpage__section + .ss-cpage__section {
  margin-top: 40px;
}

.ss-cpage--seo .ss-cpage__global-cta {
  border: 2px solid var(--ss-primary, #6366f1);
  background: #fff;
  border-radius: 12px;
}

/* ========================================================================
   Content Page — PRESET: Product Page
   Feature-dense. Cards, media blocks, spec-oriented.
   ======================================================================== */
.ss-cpage--product .ss-cpage__inner {
  max-width: 1060px;
}

.ss-cpage--product .ss-cpage__title {
  font-size: 36px;
  font-weight: 800;
}

.ss-cpage--product .ss-cpage__header {
  text-align: center;
}

.ss-cpage--product .ss-cpage__meta {
  justify-content: center;
}

.ss-cpage--product .ss-features-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ss-cpage--product .ss-feature-item {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-cpage--product .ss-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.ss-cpage--product .ss-card {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-cpage--product .ss-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.ss-cpage--product .ss-cpage__global-cta {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  border-radius: 20px;
}

.ss-cpage--product .ss-cpage__global-cta .ss-cta-heading {
  color: #fff;
}

.ss-cpage--product .ss-cpage__global-cta .ss-cta-body {
  color: #94a3b8;
}

/* ========================================================================
   Content Page — PRESET: CTA Focused
   Action-dense, bold colors, every section drives conversion.
   ======================================================================== */
.ss-cpage--cta_focused .ss-cpage__inner {
  max-width: 960px;
}

.ss-cpage--cta_focused .ss-cpage__title {
  font-size: 40px;
  font-weight: 800;
}

.ss-cpage--cta_focused .ss-section {
  text-align: center;
}

.ss-cpage--cta_focused .ss-section-heading {
  font-size: 26px;
  font-weight: 700;
}

.ss-cpage--cta_focused .ss-btn {
  font-size: 15px;
  padding: 14px 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ss-cpage--cta_focused .ss-section-cta_banner {
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-radius: 16px;
}

.ss-cpage--cta_focused .ss-section-cta_banner .ss-cta-heading {
  color: #fff;
  font-size: 30px;
}

.ss-cpage--cta_focused .ss-section-cta_banner .ss-btn-primary {
  background: #fff;
  color: var(--ss-primary, #6366f1);
}

.ss-cpage--cta_focused .ss-cpage__global-cta {
  background: var(--ss-primary, #6366f1);
  color: #fff;
  border-radius: 16px;
  padding: 56px 40px;
}

.ss-cpage--cta_focused .ss-cpage__global-cta .ss-cta-heading {
  color: #fff;
  font-size: 34px;
}

.ss-cpage--cta_focused .ss-cpage__global-cta .ss-cta-body {
  color: rgba(255, 255, 255, 0.85);
}

.ss-cpage--cta_focused .ss-cpage__global-cta .ss-btn-primary {
  background: #fff;
  color: var(--ss-primary, #6366f1);
}

/* ========================================================================
   Content Page — PRESET: Minimal
   Clean whitespace, thin typography, no decorations.
   ======================================================================== */
.ss-cpage--minimal .ss-cpage__inner {
  max-width: 720px;
}

.ss-cpage--minimal .ss-cpage__title {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.ss-cpage--minimal .ss-cpage__subtitle {
  font-size: 16px;
  font-weight: 400;
}

.ss-cpage--minimal .ss-section-heading {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.ss-cpage--minimal .ss-section-body-text,
.ss-cpage--minimal .ss-hero-body,
.ss-cpage--minimal .ss-column-body {
  font-size: 15px;
  line-height: 1.7;
}

.ss-cpage--minimal .ss-btn {
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 6px;
}

.ss-cpage--minimal .ss-card {
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  box-shadow: none;
}

.ss-cpage--minimal .ss-feature-item {
  background: transparent;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
}

.ss-cpage--minimal .ss-cpage__section + .ss-cpage__section {
  margin-top: 36px;
}

.ss-cpage--minimal .ss-cpage__global-cta {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 32px 24px;
}

.ss-cpage--minimal .ss-cpage__global-cta .ss-cta-heading {
  font-size: 22px;
  font-weight: 600;
}

/* ========================================================================
   Content Page — PRESET: Modern
   Rounded cards, gradients, layered depth, contemporary feel.
   ======================================================================== */
.ss-cpage--modern .ss-cpage__inner {
  max-width: 1000px;
}

.ss-cpage--modern .ss-cpage__title {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ss-cpage--modern .ss-cpage__subtitle {
  font-size: 18px;
  color: #64748b;
}

.ss-cpage--modern .ss-cpage__header {
  text-align: center;
}

.ss-cpage--modern .ss-cpage__meta {
  justify-content: center;
}

.ss-cpage--modern .ss-cpage__featured-img {
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ss-cpage--modern .ss-section-heading {
  font-size: 24px;
  font-weight: 700;
}

.ss-cpage--modern .ss-section {
  padding: 40px 0;
}

.ss-cpage--modern .ss-card {
  border: none;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ss-cpage--modern .ss-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.ss-cpage--modern .ss-feature-item {
  border-radius: 20px;
  background: #fff;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ss-cpage--modern .ss-feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.ss-cpage--modern .ss-btn-primary {
  border-radius: 50px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--ss-primary, #6366f1), #8b5cf6);
  border: none;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.ss-cpage--modern .ss-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.ss-cpage--modern .ss-faq-item {
  border: none;
  border-radius: 12px;
  background: #f8fafc;
}

.ss-cpage--modern .ss-faq-item[open] {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ss-cpage--modern .ss-cpage__section--alt {
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-radius: 20px;
  padding: 32px;
}

.ss-cpage--modern .ss-cpage__global-cta {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff;
  border-radius: 24px;
  padding: 60px 40px;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
}

.ss-cpage--modern .ss-cpage__global-cta .ss-cta-heading {
  color: #fff;
  font-size: 30px;
}

.ss-cpage--modern .ss-cpage__global-cta .ss-cta-body {
  color: rgba(255, 255, 255, 0.85);
}

.ss-cpage--modern .ss-cpage__global-cta .ss-btn-primary {
  background: #fff;
  color: #6366f1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   Content Page — Responsive
   ======================================================================== */
@media (max-width: 1024px) {
  .ss-cpage--magazine .ss-cpage__title {
    font-size: 38px;
  }

  .ss-cpage--landing .ss-cpage__title {
    font-size: 36px;
  }

  .ss-cpage--modern .ss-cpage__title {
    font-size: 34px;
  }

  .ss-cpage--product .ss-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ss-cpage--landing .ss-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .ss-cpage__inner {
    padding: 0 16px;
  }

  .ss-cpage__title {
    font-size: 28px;
  }

  .ss-cpage__subtitle {
    font-size: 16px;
  }

  .ss-cpage__header {
    margin-bottom: 32px;
  }

  .ss-cpage__section + .ss-cpage__section {
    margin-top: 32px;
  }

  .ss-cpage__header--hero_overlay .ss-cpage__header-bg {
    min-height: 320px;
  }

  .ss-cpage__header--hero_overlay .ss-cpage__header-overlay {
    padding: 40px 20px 24px;
  }

  .ss-cpage__header--side_by_side .ss-cpage__header-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ss-cpage__header--centered .ss-cpage__title {
    font-size: 30px;
  }

  .ss-cpage--editorial .ss-cpage__title {
    font-size: 28px;
  }

  .ss-cpage--editorial .ss-section-body-text,
  .ss-cpage--editorial .ss-hero-body {
    font-size: 16px;
  }

  .ss-cpage--magazine .ss-cpage__title {
    font-size: 30px;
  }

  .ss-cpage--magazine .ss-cpage__header--hero_overlay .ss-cpage__header-bg {
    min-height: 300px;
  }

  .ss-cpage--landing .ss-cpage__title {
    font-size: 28px;
  }

  .ss-cpage--landing .ss-features-grid {
    grid-template-columns: 1fr;
  }

  .ss-cpage--landing .ss-cpage__global-cta {
    padding: 40px 20px;
    border-radius: 12px;
  }

  .ss-cpage--product .ss-features-grid {
    grid-template-columns: 1fr;
  }

  .ss-cpage--cta_focused .ss-cpage__title {
    font-size: 28px;
  }

  .ss-cpage--cta_focused .ss-cpage__global-cta {
    padding: 40px 20px;
  }

  .ss-cpage--modern .ss-cpage__title {
    font-size: 28px;
  }

  .ss-cpage--modern .ss-cpage__featured-img {
    border-radius: 12px;
  }

  .ss-cpage--modern .ss-cpage__section--alt {
    padding: 20px;
    border-radius: 12px;
  }

  .ss-cpage--modern .ss-cpage__global-cta {
    padding: 40px 20px;
    border-radius: 16px;
  }

  .ss-cpage__global-cta {
    margin-top: 32px;
    padding: 32px 20px;
    border-radius: 12px;
  }

  .ss-cpage__global-cta .ss-cta-heading {
    font-size: 22px;
  }

  /* Full-bleed off on mobile */
  .ss-cpage--full-bleed .ss-cpage__section--bleed {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 480px) {
  .ss-cpage__title {
    font-size: 24px;
  }

  .ss-cpage__meta {
    font-size: 12px;
  }

  .ss-cpage__header--hero_overlay .ss-cpage__header-bg {
    min-height: 260px;
  }

  .ss-cpage--editorial .ss-cpage__inner,
  .ss-cpage--seo .ss-cpage__inner,
  .ss-cpage--minimal .ss-cpage__inner {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTENT PAGE — Section Layout System (Elementor Overrides)
   ═══════════════════════════════════════════════════════════════ */

/* Elementor responsive columns — tablet override */
.ss-cpage .ss-section[data-layout-columns] .ss-hero-inner,
.ss-cpage .ss-section[data-layout-columns] .ss-columns,
.ss-cpage .ss-section[data-layout-columns] .ss-features-grid,
.ss-cpage .ss-section[data-layout-columns] .ss-media-text-inner,
.ss-cpage .ss-section[data-layout-columns] .ss-cards-grid {
    display: grid;
}

/* Elementor mobile stack class */
.ss-cpage .ss-mobile-stack .ss-hero-inner,
.ss-cpage .ss-mobile-stack .ss-columns,
.ss-cpage .ss-mobile-stack .ss-columns-2,
.ss-cpage .ss-mobile-stack .ss-features-grid,
.ss-cpage .ss-mobile-stack .ss-media-text-inner,
.ss-cpage .ss-mobile-stack .ss-cards-grid {
    /* Elementor handles responsive via selectors, this is fallback */
}

/* Row reverse on mobile */
@media (max-width: 767px) {
    .ss-cpage-row-reverse-mobile .ss-hero-inner,
    .ss-cpage-row-reverse-mobile .ss-media-text-inner,
    .ss-cpage-row-reverse-mobile .ss-columns {
        direction: ltr;
    }

    .ss-cpage-row-reverse-mobile .ss-hero-inner > *,
    .ss-cpage-row-reverse-mobile .ss-media-text-inner > *,
    .ss-cpage-row-reverse-mobile .ss-columns > * {
        direction: ltr;
    }

    /* Reverse column order on mobile when toggled */
    .ss-cpage-row-reverse-mobile .ss-hero-inner,
    .ss-cpage-row-reverse-mobile .ss-media-text-inner {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--ss-section-gap, 32px);
    }
}

/* Section divider enhancement with layout system */
.ss-cpage__section + .ss-cpage__divider {
    margin-top: 0;
    margin-bottom: 0;
}

/* Alternating background with layout padding */
.ss-cpage__section--alt .ss-section {
    padding-left: 24px;
    padding-right: 24px;
}

/* Layout adjustments per preset */
.ss-cpage--landing .ss-section .ss-section-inner {
    max-width: var(--ss-section-width, 1200px);
}

.ss-cpage--editorial .ss-section .ss-section-inner {
    max-width: var(--ss-section-width, 720px);
}

.ss-cpage--seo .ss-section .ss-section-inner {
    max-width: var(--ss-section-width, 800px);
}