/*
 * Compatibility layer for V1 campaign landing markup.
 * The migrated pages still use legacy classes (row, col-lg-*, promo-box,
 * pricing-table, accordions, tabs). These rules make that markup render as a
 * stable V2 layout without editing every long content page.
 */

#splendid-main-container {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

#splendid-main-container > * + * {
  margin-top: 0;
}

#splendid-main-container .section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  padding-block: var(--space-8);
}

#splendid-main-container .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
  min-width: 0;
}

#splendid-main-container .row > h1,
#splendid-main-container .row > h2,
#splendid-main-container .row > h3,
#splendid-main-container .row > h4,
#splendid-main-container .row > p,
#splendid-main-container .row > ul,
#splendid-main-container .row > .tabs,
#splendid-main-container .row > .accordions,
#splendid-main-container .row > .pricing-tables,
#splendid-main-container .row > .alert-box,
#splendid-main-container .row > .align-center:not([class*="col-"]) {
  flex: 0 0 100%;
  min-width: 0;
}

#splendid-main-container .section > h1,
#splendid-main-container .section > h2,
#splendid-main-container .section > h3,
#splendid-main-container .section > h4,
#splendid-main-container .section > p,
#splendid-main-container .section > ul,
#splendid-main-container .section > ol,
#splendid-main-container .section > .checklist,
#splendid-main-container .section > .tabs,
#splendid-main-container .section > .accordions,
#splendid-main-container .section > .pricing-tables,
#splendid-main-container .section > .promo-box,
#splendid-main-container .section > .alert-box,
#splendid-main-container .section > .row,
#splendid-main-container .section > .align-center:not([class*="col-"]) {
  flex: 0 0 100%;
  min-width: 0;
}

#splendid-main-container .row > [class*="col-"] {
  min-width: 0;
}

#splendid-main-container .section > [class*="col-"],
#splendid-main-container > [class*="col-"] {
  min-width: 0;
}

#splendid-main-container .col-lg-12 { flex: 0 0 100%; }
#splendid-main-container .col-lg-10 { flex: 0 0 calc(83.333% - var(--space-5)); }
#splendid-main-container .col-lg-9 { flex: 0 0 calc(75% - var(--space-5)); }
#splendid-main-container .col-lg-8 { flex: 0 0 calc(66.666% - var(--space-5)); }
#splendid-main-container .col-lg-6 { flex: 0 0 calc(50% - var(--space-5) / 2); }
#splendid-main-container .col-lg-4 { flex: 0 0 calc(33.333% - var(--space-5)); }
#splendid-main-container .col-lg-3 { flex: 0 0 calc(25% - var(--space-5)); }
#splendid-main-container .col-lg-2 { flex: 0 0 calc(16.666% - var(--space-5)); }

#splendid-main-container .col-lg-offset-2 {
  margin-left: calc(16.666% + var(--space-5));
}

#splendid-main-container .align-center,
#splendid-main-container .text-center {
  text-align: center;
}

#splendid-main-container .align-left {
  text-align: left;
}

#splendid-main-container .align-center > img,
#splendid-main-container img.align-center {
  margin-inline: auto;
}

#splendid-main-container img {
  max-width: 100%;
  height: auto;
}

#splendid-main-container .bold,
#splendid-main-container strong {
  font-weight: 900;
}

#splendid-main-container p,
#splendid-main-container li,
#splendid-main-container dd,
#splendid-main-container td {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

#splendid-main-container h1 {
  font-size: clamp(30px, 4vw, var(--text-2xl));
  line-height: 1.14;
}

#splendid-main-container h2 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.18;
}

#splendid-main-container h3 {
  font-size: var(--text-xl);
  line-height: 1.22;
}

#splendid-main-container h4 {
  font-size: var(--text-lg);
  line-height: 1.26;
}

#splendid-main-container h5 {
  font-size: var(--text-base) !important;
  line-height: 1.42;
}

#splendid-main-container h6,
#splendid-main-container h6[style*="font-size"] {
  font-size: var(--text-base) !important;
  line-height: 1.3;
}

#splendid-main-container li[style*="font-size: larger"],
#splendid-main-container p[style*="font-size: larger"],
#splendid-main-container a[style*="font-size: larger"] {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-body);
}

#splendid-main-container .color-blue { color: var(--evboy-aqua); }
#splendid-main-container h1.color-blue,
#splendid-main-container h2.color-blue,
#splendid-main-container h3.color-blue {
  color: var(--fg);
}
#splendid-main-container .color-orange { color: var(--warn); }
#splendid-main-container .color-red,
#splendid-main-container [style*="color: red"],
#splendid-main-container [style*="color:red"] {
  color: var(--fg) !important;
  font-weight: 950;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 56%, transparent);
  text-decoration-thickness: .55em;
  text-underline-offset: -.36em;
  text-decoration-skip-ink: none;
}

#splendid-main-container i.color-red,
#splendid-main-container .fa.color-red {
  color: var(--warn) !important;
  text-decoration: none;
}

#splendid-main-container [style*="color: red"] *,
#splendid-main-container [style*="color:red"] * {
  color: inherit !important;
}
#splendid-main-container .color-dark-green { color: color-mix(in oklch, var(--success), black 16%); }
#splendid-main-container .color-black { color: var(--fg); }
#splendid-main-container .color-white { color: var(--surface); }

#splendid-main-container .margin_t_10 { margin-top: 10px; }
#splendid-main-container .margin_t_30 { margin-top: var(--space-6); }
#splendid-main-container .margin_t_40 { margin-top: var(--space-8); }
#splendid-main-container .margin_t_100 { margin-top: var(--space-8); }
#splendid-main-container .margin_b_10 { margin-bottom: 10px; }
#splendid-main-container .margin_b_20 { margin-bottom: var(--space-5); }
#splendid-main-container .margin_b_30 { margin-bottom: var(--space-6); }
#splendid-main-container .margin_b_40 { margin-bottom: var(--space-8); }
#splendid-main-container .padding_t_20 { padding-top: var(--space-5); }
#splendid-main-container .padding_t_40 { padding-top: var(--space-8); }
#splendid-main-container .padding_b_40 { padding-bottom: var(--space-8); }

#splendid-main-container .divider {
  flex: 0 0 100%;
  width: 100%;
  height: 1px;
  margin-block: var(--space-2);
  background: var(--border);
}

#splendid-main-container .iconic-divider {
  display: grid;
  place-items: center;
  color: var(--evboy-yellow);
}

#splendid-main-container .checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--fg-2);
}

#splendid-main-container .checklist li {
  position: relative;
  padding-left: 22px;
}

#splendid-main-container .checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--list-marker);
}

#splendid-main-container .checklist li > ul,
#splendid-main-container .checklist li > ol {
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  color: var(--fg-2);
}

#splendid-main-container .checklist li > ul {
  list-style: none;
}

#splendid-main-container .checklist li > ul > li {
  padding-left: 20px;
}

#splendid-main-container .checklist li > ul > li::before {
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--evboy-aqua);
  transform: rotate(45deg);
}

#splendid-main-container .checklist li > ol {
  list-style: none;
  counter-reset: nested-steps;
}

#splendid-main-container .checklist li > ol > li {
  counter-increment: nested-steps;
  padding-left: 30px;
}

#splendid-main-container .checklist li > ol > li::before {
  content: counter(nested-steps);
  top: .16em;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--evboy-aqua) 14%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--evboy-aqua) 45%, transparent);
  color: var(--fg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
}

#splendid-main-container .checklist a {
  color: color-mix(in oklch, var(--evboy-aqua), var(--evboy-ink) 32%);
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 70%, var(--evboy-aqua));
  text-decoration-thickness: .15em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
}

#splendid-main-container :where(p, li, dd, td) a:not(.button):not(.btn):not([class*="button"]):not(.inline-link) {
  color: color-mix(in oklch, var(--evboy-aqua), var(--evboy-ink) 32%);
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, var(--evboy-yellow) 70%, var(--evboy-aqua));
  text-decoration-thickness: .15em;
  text-underline-offset: .18em;
  text-decoration-skip-ink: none;
  overflow-wrap: anywhere;
}

#splendid-main-container :where(p, li, dd, td) a:not(.button):not(.btn):not([class*="button"]):hover,
#splendid-main-container :where(p, li, dd, td) a:not(.button):not(.btn):not([class*="button"]):focus-visible {
  color: var(--evboy-ink);
  background-color: color-mix(in oklch, var(--evboy-yellow) 34%, transparent);
  text-decoration-color: var(--evboy-aqua);
  outline: none;
}

#splendid-main-container :where(p, li, dd, td) a[target="_blank"]:not(.button):not(.btn):not([class*="button"])::after {
  content: "↗";
  display: inline-block;
  margin-left: .22em;
  font-size: .82em;
  line-height: 1;
  text-decoration: none;
}

#splendid-main-container .section > .checklist,
#splendid-main-container .section > ul:not(.slides):not(.features),
#splendid-main-container > .checklist,
#splendid-main-container > ul:not(.slides):not(.features),
#splendid-main-container > [class*="col-"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
}

#splendid-main-container .section > .align-center[class*="col-"],
#splendid-main-container .row > .align-center[class*="col-"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#splendid-main-container .section > .align-center[class*="col-"]:has(> a.button:hover),
#splendid-main-container .row > .align-center[class*="col-"]:has(> a.button:hover) {
  border-color: color-mix(in oklch, var(--evboy-aqua) 48%, var(--border));
  box-shadow: 0 18px 44px rgba(17, 24, 39, .12), var(--elev-ring);
  transform: translateY(-2px);
}

#splendid-main-container a.button,
#splendid-main-container button.button,
#splendid-main-container .cart-add-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 2px solid color-mix(in oklch, var(--evboy-yellow), var(--evboy-ink) 16%);
  border-radius: 8px;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, var(--evboy-yellow), color-mix(in oklch, var(--evboy-yellow) 68%, var(--evboy-aqua)));
  color: var(--evboy-ink);
  box-shadow: 0 14px 30px rgba(17, 24, 39, .18);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

#splendid-main-container a.button:hover,
#splendid-main-container button.button:hover,
#splendid-main-container .cart-add-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px rgba(17, 24, 39, .2);
}

#splendid-main-container a.button.big,
#splendid-main-container button.button.big,
#splendid-main-container a.button.big-margin {
  min-height: 52px;
  padding-inline: var(--space-6);
}

#splendid-main-container .align-center[class*="col-"] > a.button:has(img),
#splendid-main-container .row > [class*="col-"] > a.button:has(img) {
  width: 100%;
  display: grid;
  gap: var(--space-3);
  min-height: 100%;
  padding: 0;
  background: transparent;
  color: var(--fg);
  border: 0;
  box-shadow: none;
}

#splendid-main-container a.button img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  margin-inline: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--bg) 76%, var(--surface));
  box-shadow: none;
}

#splendid-main-container a.button span[style*="font-size"] {
  font-size: var(--text-base) !important;
  line-height: 1.18;
}

#splendid-main-container a.button:has(img) span[style*="font-size"] {
  font-size: var(--text-xl) !important;
}

#splendid-main-container .align-center[class*="col-"] [class*="col-"] {
  min-width: 0;
}

#splendid-main-container .align-center[class*="col-"] [class*="col-"] + [class*="col-"] {
  margin-top: var(--space-3);
}

#splendid-main-container .align-center[class*="col-"] [class*="col-"] > a.button {
  width: 100%;
}

#splendid-main-container .promo-box,
#splendid-main-container .alert-box {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
}

#splendid-main-container .promo-box.bg-orange,
#splendid-main-container .alert-box.notification {
  border-color: color-mix(in oklch, var(--warn) 34%, var(--border));
  background: color-mix(in oklch, var(--warn) 9%, var(--surface));
}

#splendid-main-container .promo-box .container {
  width: 100%;
  padding-inline: 0;
}

#splendid-main-container .promo-box-inner {
  display: grid;
  gap: var(--space-5);
}

#splendid-main-container .promo-box-content,
#splendid-main-container .promo-box-content .content {
  display: grid;
  gap: var(--space-4);
}

#splendid-main-container .promo-box-content > div:not(.icon),
#splendid-main-container .promo-box-content [class*="col-"] {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  min-width: 0;
}

#splendid-main-container .promo-box-content :is(h2, h3, h4, h5, h6) + :is(p, ul, ol, .checklist) {
  margin-top: 0;
}

#splendid-main-container .promo-box-content :is(p, ul, ol, .checklist) + :is(h2, h3, h4, h5, h6) {
  margin-top: var(--space-3);
}

#splendid-main-container .alert-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

#splendid-main-container .alert-box > .col-lg-10 {
  flex: 1 1 520px;
}

#splendid-main-container .alert-box > .col-lg-2,
#splendid-main-container .alert-box > img {
  flex: 0 1 180px;
}

#splendid-main-container .pricing-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: var(--space-5);
  align-items: stretch;
  width: 100%;
}

#splendid-main-container .pricing-table {
  min-width: 0;
}

#splendid-main-container .pricing-table-inner {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-5);
  overflow: hidden;
}

#splendid-main-container .pricing-table.featured .pricing-table-inner {
  border-color: color-mix(in oklch, var(--evboy-aqua) 48%, var(--border));
  box-shadow: 0 18px 44px rgba(17, 24, 39, .12), var(--elev-ring);
}

#splendid-main-container .pricing-table header {
  display: grid;
  gap: var(--space-3);
}

#splendid-main-container .pricing-table h4 {
  font-size: var(--text-lg);
  line-height: 1.24;
}

#splendid-main-container .pricing-table img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  margin-inline: auto;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: color-mix(in oklch, var(--bg) 70%, var(--surface));
  box-shadow: none !important;
}

#splendid-main-container .pricing-table-tag,
#splendid-main-container .pricing-table .tag {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 850;
}

#splendid-main-container .pricing {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  color: var(--danger);
}

#splendid-main-container .pricing .currency {
  font-size: var(--text-lg);
  font-weight: 900;
}

#splendid-main-container .pricing .price {
  font-size: var(--text-2xl);
  font-weight: 950;
  line-height: 1;
}

#splendid-main-container .pricing .price.small {
  font-size: var(--text-base);
}

#splendid-main-container .features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-sm);
}

#splendid-main-container .features li {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-2);
}

#splendid-main-container .pricing-table footer {
  margin-top: auto;
  display: grid;
  gap: var(--space-3);
}

#splendid-main-container .cart-add-form {
  display: grid;
  gap: var(--space-3);
}

#splendid-main-container .cart-add-form select,
#splendid-main-container select.form-control,
#splendid-main-container select,
#splendid-main-container input,
#splendid-main-container textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  line-height: 1.35;
}

#splendid-main-container label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--fg-2);
  font-size: var(--text-sm);
  font-weight: 850;
}

#splendid-main-container .flexslider,
#splendid-main-container .post-gallery {
  margin: 0 0 var(--space-4);
}

#splendid-main-container .slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

#splendid-main-container .slides img,
#splendid-main-container .row > [data-applicablemodel] > img,
#splendid-main-container .row > [data-applicablemodel] .post-gallery img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: none;
}

#splendid-main-container .row > [data-applicablemodel] {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

#splendid-main-container .tabs {
  display: grid;
  gap: var(--space-5);
}

#splendid-main-container .tab-header ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#splendid-main-container .tab-header a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--fg-2);
  padding: var(--space-2) var(--space-4);
  font-weight: 850;
}

#splendid-main-container .tab-header .active-tab a {
  border-color: var(--evboy-aqua);
  background: color-mix(in oklch, var(--evboy-aqua) 12%, var(--surface));
  color: var(--fg);
}

#splendid-main-container .tab-content {
  min-width: 0;
}

#splendid-main-container .tab {
  min-width: 0;
}

#splendid-main-container .accordions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

#splendid-main-container .accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--surface) 94%, transparent);
  box-shadow: var(--elev-ring);
  display: block;
  overflow: hidden;
}

#splendid-main-container .accordion-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  cursor: pointer;
  padding: var(--space-5);
  font-size: var(--text-lg);
  font-weight: 900;
}

#splendid-main-container .accordion-header::after {
  content: "+";
  margin-left: auto;
  color: var(--evboy-aqua);
  font-family: var(--font-mono);
  font-weight: 950;
}

#splendid-main-container .accordion.is-open .accordion-header::after {
  content: "-";
}

#splendid-main-container .accordion-icon {
  display: none;
}

#splendid-main-container .accordion-content {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
}

#splendid-main-container .accordion.is-open .accordion-content {
  display: grid;
  gap: var(--space-4);
}

#splendid-main-container .accordion-content img {
  max-height: 320px;
  object-fit: contain;
  margin-inline: auto;
  border: 0;
  box-shadow: none;
}

#splendid-main-container lite-youtube,
#splendid-main-container iframe[src*="youtube"],
#splendid-main-container .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--evboy-ink);
  box-shadow: var(--elev-ring);
}

#splendid-main-container .align-center[class*="col-"] > lite-youtube,
#splendid-main-container .row > [class*="col-"] > lite-youtube,
#splendid-main-container .section > [class*="col-"] > lite-youtube,
#splendid-main-container .align-center[class*="col-"] > iframe[src*="youtube"],
#splendid-main-container .row > [class*="col-"] > iframe[src*="youtube"],
#splendid-main-container .section > [class*="col-"] > iframe[src*="youtube"],
#splendid-main-container .align-center[class*="col-"] > .video-embed {
  border: 0;
  box-shadow: none;
}

#splendid-main-container lite-youtube {
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

#splendid-main-container iframe[src*="youtube"] {
  height: auto;
  min-height: 220px;
}

#splendid-main-container mark,
#splendid-main-container .bg-black {
  border-radius: 5px;
  padding: 0 .18em;
  background: var(--evboy-ink);
  color: var(--surface) !important;
}

#splendid-main-container.howto-manual {
  gap: var(--space-5);
}

#splendid-main-container.howto-manual .manual-section-head {
  flex: 0 0 100%;
  display: grid;
  gap: var(--space-2);
  width: 100%;
  max-width: 820px;
}

#splendid-main-container.howto-manual .manual-section-head.align-center {
  justify-items: center;
  margin-inline: auto;
  text-align: center;
}

#splendid-main-container.howto-manual-index .manual-intro {
  align-items: stretch;
  padding-block: var(--space-6);
}

#splendid-main-container.howto-manual-index .manual-intro > .checklist {
  flex: 1 1 620px;
}

#splendid-main-container.howto-manual-index .manual-version-section {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-6) var(--space-12);
}

#splendid-main-container.howto-manual-index .manual-version-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}

#splendid-main-container.howto-manual-index .manual-version-grid > [class*="col-"] {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#splendid-main-container.howto-manual-index .manual-version-grid > [class*="col-"]:hover {
  border-color: color-mix(in oklch, var(--evboy-aqua) 48%, var(--border));
  box-shadow: 0 18px 44px rgba(17, 24, 39, .12), var(--elev-ring);
  transform: translateY(-2px);
}

#splendid-main-container.howto-manual-index .manual-version-grid a.button:has(img) {
  width: 100%;
  min-height: 100%;
}

#splendid-main-container.howto-manual-index .manual-version-grid a.button img {
  background: transparent;
}

#splendid-main-container.evse-xp-manual-index {
  gap: var(--space-4);
  padding-block: var(--space-5);
}

#splendid-main-container.evse-xp-manual-index .manual-hero-section {
  justify-content: center;
  padding-block: var(--space-4) var(--space-2);
}

#splendid-main-container.evse-xp-manual-index .manual-hero-image {
  width: auto;
  max-width: min(100%, 760px);
  max-height: clamp(420px, 58vh, 760px);
  object-fit: contain;
}

#splendid-main-container.evse-xp-manual-index .manual-language-section {
  padding-block: var(--space-2) var(--space-8);
}

#splendid-main-container.howto-manual-detail > .row,
#splendid-main-container.howto-manual-detail > .section {
  scroll-margin-top: 148px;
  padding-block: var(--space-6);
}

#splendid-main-container.howto-manual-detail > .row > h2,
#splendid-main-container.howto-manual-detail > .section > h2,
#splendid-main-container.howto-manual-detail > .section > .promo-box + h2 {
  margin-bottom: var(--space-1);
}

#splendid-main-container.howto-manual-detail > .row > [class*="col-"]:not(.align-center),
#splendid-main-container.howto-manual-detail #manual-specs > [class*="col-"],
#splendid-main-container.howto-manual-detail #manual-support > [class*="col-"] {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elev-ring);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

#splendid-main-container.howto-manual-detail > .row > [class*="col-"]:not(.align-center) > div,
#splendid-main-container.howto-manual-detail #manual-support > [class*="col-"] > div {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

#splendid-main-container.howto-manual-detail > .row > [class*="col-"]:not(.align-center) > img,
#splendid-main-container.howto-manual-detail > .row > [class*="col-"]:not(.align-center) > div > img,
#splendid-main-container.howto-manual-detail #manual-support img {
  width: 100%;
  max-height: 620px;
  object-fit: contain;
}

#splendid-main-container.howto-manual-detail #manual-support > .col-lg-12 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: flex-start;
}

#splendid-main-container.howto-manual-detail #manual-support > .col-lg-12 > h2 {
  flex: 0 0 100%;
}

#splendid-main-container.howto-manual-detail #manual-support img,
#splendid-main-container.howto-manual-detail #manual-special img,
#splendid-main-container.howto-manual-detail .promo-box img,
#splendid-main-container.howto-manual-detail #manual-update img {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  background: color-mix(in oklch, var(--bg) 64%, var(--surface));
}

#splendid-main-container.howto-manual-detail .promo-box {
  border-radius: var(--radius-lg);
}

#splendid-main-container.howto-manual-detail .promo-box-content > br,
#splendid-main-container.howto-manual-detail .accordion-content > br {
  display: none;
}

#splendid-main-container.howto-manual-detail .promo-box-content > .icon {
  display: none;
}

#splendid-main-container.howto-manual-detail #manual-firmware .promo-box.bg-orange .promo-box-content,
#splendid-main-container.howto-manual-detail #manual-firmware .promo-box.bg-gray .promo-box-content {
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  align-items: center;
}

#splendid-main-container.howto-manual-detail #manual-firmware .promo-box img {
  width: min(100%, 220px);
  justify-self: center;
}

#splendid-main-container .firmware-download-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

#splendid-main-container .firmware-download-form > .notice,
#splendid-main-container .firmware-download-form > .row,
#splendid-main-container .firmware-download-form > .col-lg-12 {
  grid-column: 1 / -1;
}

#splendid-main-container .firmware-download-form > [class*="col-"] {
  min-width: 0;
  padding: 0;
}

#splendid-main-container .firmware-download-form > .row {
  margin: 0;
  justify-content: flex-start;
}

#splendid-main-container.howto-manual-detail .accordions {
  gap: var(--space-3);
}

#splendid-main-container.howto-manual-detail .accordion {
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-ring);
}

#splendid-main-container.howto-manual-detail .accordion-header {
  min-height: 67px;
  padding: var(--space-5);
}

#splendid-main-container.howto-manual-detail .accordion-header h6 {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

#splendid-main-container.howto-manual-detail .accordion-content {
  border-top: 0;
  background: transparent;
}

#splendid-main-container.howto-manual-detail .accordion-content h4,
#splendid-main-container.howto-manual-detail .accordion-content h5 {
  margin-top: var(--space-2);
}

#splendid-main-container.howto-manual-detail #manual-troubleshoot > .checklist {
  border-color: color-mix(in oklch, var(--warn) 34%, var(--border));
  background: color-mix(in oklch, var(--warn) 7%, var(--surface));
}

#splendid-main-container.howto-manual-detail #manual-specs {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.24fr) minmax(0, .88fr);
  gap: var(--space-5);
  align-items: stretch;
}

#splendid-main-container.howto-manual-detail #manual-support {
  align-items: stretch;
}

#splendid-main-container.howto-manual-detail #manual-specs > [class*="col-"] {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

@media (max-width: 1100px) {
  #splendid-main-container .col-md-12 { flex: 0 0 100%; }
  #splendid-main-container .col-md-10 { flex: 0 0 calc(83.333% - var(--space-5)); }
  #splendid-main-container .col-md-9 { flex: 0 0 calc(75% - var(--space-5)); }
  #splendid-main-container .col-md-8 { flex: 0 0 calc(66.666% - var(--space-5)); }
  #splendid-main-container .col-md-6 { flex: 0 0 calc(50% - var(--space-5) / 2); }
  #splendid-main-container .col-md-4 { flex: 0 0 calc(33.333% - var(--space-5)); }
  #splendid-main-container .col-md-3 { flex: 0 0 calc(25% - var(--space-5)); }
  #splendid-main-container .col-md-2 { flex: 0 0 calc(16.666% - var(--space-5)); }
  #splendid-main-container .col-md-offset-2 { margin-left: calc(16.666% + var(--space-5)); }

}

@media (max-width: 760px) {
  #splendid-main-container {
    padding-block: var(--space-6);
  }

  #splendid-main-container .section {
    padding-block: var(--space-6);
  }

  #splendid-main-container .row {
    gap: var(--space-4);
  }

  #splendid-main-container .row > [class*="col-"],
  #splendid-main-container .section > [class*="col-"],
  #splendid-main-container .alert-box > [class*="col-"],
  #splendid-main-container .alert-box > img {
    flex: 0 0 100%;
    margin-left: 0;
  }

  #splendid-main-container .promo-box,
  #splendid-main-container .alert-box,
  #splendid-main-container .pricing-table-inner,
  #splendid-main-container .row > [data-applicablemodel],
  #splendid-main-container .section > .checklist,
  #splendid-main-container .section > ul:not(.slides):not(.features),
  #splendid-main-container > .checklist,
  #splendid-main-container > ul:not(.slides):not(.features),
  #splendid-main-container > [class*="col-"],
  #splendid-main-container .section > .align-center[class*="col-"],
  #splendid-main-container .row > .align-center[class*="col-"] {
    padding: var(--space-4);
  }

  #splendid-main-container .pricing-tables {
    grid-template-columns: 1fr;
  }

  #splendid-main-container .tab-header ul {
    display: grid;
  }

  #splendid-main-container a.button,
  #splendid-main-container button.button,
  #splendid-main-container .cart-add-form button {
    width: 100%;
  }

  #splendid-main-container.howto-manual-index .manual-version-grid {
    grid-template-columns: 1fr;
  }

  #splendid-main-container.howto-manual-detail > .row,
  #splendid-main-container.howto-manual-detail > .section {
    scroll-margin-top: 128px;
    padding-block: var(--space-5);
  }

  #splendid-main-container.howto-manual-detail #manual-specs {
    grid-template-columns: 1fr;
  }

  #splendid-main-container.howto-manual-detail #manual-firmware .promo-box.bg-orange .promo-box-content,
  #splendid-main-container.howto-manual-detail #manual-firmware .promo-box.bg-gray .promo-box-content {
    grid-template-columns: 1fr;
  }

  #splendid-main-container.howto-manual-detail #manual-firmware .promo-box img {
    max-width: 280px;
  }

  #splendid-main-container.howto-manual-detail > .row > [class*="col-"]:not(.align-center),
  #splendid-main-container.howto-manual-detail #manual-specs > [class*="col-"],
  #splendid-main-container.howto-manual-detail #manual-support > [class*="col-"] {
    padding: var(--space-4);
  }

  #splendid-main-container .firmware-download-form {
    grid-template-columns: 1fr;
  }

  #splendid-main-container.howto-manual-detail .accordion-header {
    padding: var(--space-4);
  }

  #splendid-main-container.howto-manual-detail .accordion-content {
    padding: 0 var(--space-4) var(--space-4);
  }
}