/* =========================================================================
   idea-2 — Wizard shell, steps, options, footer, success state.
   All wizard pages share this CSS. Per-page step content goes in the HTML.

   NOTE: The Events Shortcodes & Blocks wizard uses the "v2 shell" defined
   at the bottom of this file (search for "STEP-1 V2 SHELL"). That variant
   replaces the admin-header + sticky-footer combo with a header-as-progress
   bar + inline card nav pattern.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Progress strip (v1 markup — classes generated by ect-wizard.js's
   renderProgressStrip fallback branch)
   ------------------------------------------------------------------------- */

.ect-wizard-progress {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.ect-wizard-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ect-text-soft);
  transition: color 0.2s;
}

.ect-wizard-progress__step::after {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--ect-border);
  margin: 0 14px;
  border-radius: 1px;
  transition: background 0.2s;
}
.ect-wizard-progress__step:last-child::after { display: none; }

.ect-wizard-progress__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ect-bg);
  border: 1px solid var(--ect-border);
  font-weight: 700;
  font-size: 13px;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
  flex: 0 0 auto;
}

.ect-wizard-progress__step.is-current {
  color: var(--ect-text);
}
.ect-wizard-progress__step.is-current .ect-wizard-progress__num {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ect-primary-soft);
}

.ect-wizard-progress__step.is-done {
  color: var(--ect-text);
}
.ect-wizard-progress__step.is-done .ect-wizard-progress__num {
  background: var(--ect-success);
  border-color: var(--ect-success);
  color: #fff;
}
.ect-wizard-progress__step.is-done::after { background: var(--ect-success); }
.ect-wizard-progress__step.is-done .ect-wizard-progress__num-label { display: none; }
.ect-wizard-progress__step.is-done .ect-wizard-progress__num::before {
  content: "\f147"; /* dashicons-yes */
  font-family: dashicons;
  font-size: 16px;
}

/* -------------------------------------------------------------------------
   Step container
   ------------------------------------------------------------------------- */

.ect-wizard-step {
  width: 100%;
  max-width: 800px;
  display: none;
  animation: ectWizardFade 0.32s ease;
}
.ect-wizard-step.is-active { display: block; }

@keyframes ectWizardFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------
   Option card (v1 radio card — base kept: queried by ect-wizard.js)
   ------------------------------------------------------------------------- */

.ect-wizard-option {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 20px 22px;
  background: #fff;
  border: 2px solid var(--ect-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s, background-color 0.15s;
}
.ect-wizard-option:hover {
  border-color: var(--ect-primary-border);
  box-shadow: var(--ect-shadow-sm);
  transform: translateY(-1px);
}
.ect-wizard-option.is-selected {
  border-color: var(--ect-primary);
  background: var(--ect-primary-soft);
  box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.15);
}

.ect-wizard-option__name {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ect-text);
  line-height: 1.3;
}

/* Locked Pro option — clickable to trigger upsell */
.ect-wizard-option.is-locked:hover {
  border-color: var(--ect-accent-border);
}

/* -------------------------------------------------------------------------
   Color swatch (v1 — base kept: queried by ect-wizard.js)
   ------------------------------------------------------------------------- */

.ect-wizard-swatch {
  position: relative;
  padding: 12px;
  background: #fff;
  border: 2px solid var(--ect-border);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ect-wizard-swatch:hover {
  border-color: var(--ect-primary-border);
  transform: translateY(-1px);
}
.ect-wizard-swatch.is-selected {
  border-color: var(--ect-primary);
  box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.15);
}

/* -------------------------------------------------------------------------
   Review step summary (v1 — items generated by ect-wizard.js renderSummary)
   ------------------------------------------------------------------------- */

.ect-wizard-summary {
  background: #fff;
  border: 1px solid var(--ect-border-soft);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: var(--ect-shadow-sm);
}
.ect-wizard-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--ect-border-soft);
}
.ect-wizard-summary__item:last-child { border-bottom: 0; }
.ect-wizard-summary__label {
  color: var(--ect-text-muted);
  font-weight: 500;
}
.ect-wizard-summary__value {
  color: var(--ect-text);
  font-weight: 650;
}

/* -------------------------------------------------------------------------
   Sticky footer (v1 — kept: queried by ect-wizard.js render())
   ------------------------------------------------------------------------- */

.ect-wizard__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--ect-border-soft);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ect-wizard__footer [data-wizard-back] { visibility: hidden; }
.ect-wizard__footer [data-wizard-back].is-visible { visibility: visible; }

/* -------------------------------------------------------------------------
   Success state
   ------------------------------------------------------------------------- */

.ect-wizard-success {
  text-align: center;
  padding: 32px 24px;
}

.ect-wizard-success__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--ect-success-soft);
  border: 2px solid var(--ect-success-border);
  color: var(--ect-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ect-wizard-success__icon .dashicons {
  width: 40px; height: 40px; font-size: 40px;
}

.ect-wizard-success__title {
  margin: 0 0 12px;
  font-size: clamp(26px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ect-text);
}

.ect-wizard-success__lede {
  margin: 0 auto;
  max-width: 500px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ect-text-muted);
}

.ect-wizard-success__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .ect-wizard-progress { gap: 0; }
  .ect-wizard-progress__step { font-size: 12px; }
  .ect-wizard-progress__step-label { display: none; }
  .ect-wizard-progress__step::after { width: 16px; margin: 0 6px; }
  .ect-wizard__footer { padding: 12px 16px; }
}

@media (max-width: 540px) {
  .ect-wizard-progress__num { width: 26px; height: 26px; font-size: 12px; }
  .ect-wizard-progress__step::after { width: 12px; }
  .ect-wizard__footer { padding: 10px 14px; gap: 8px; }
  .ect-wizard__footer .ect-btn-primary,
  .ect-wizard__footer .ect-btn-ghost {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 38px;
  }
}

/* =========================================================================
   STEP-1 V2 SHELL — used by wizard-shortcodes-blocks.html
   Header-as-progress-bar + card-with-inline-nav. Rem-based sizing.
   ========================================================================= */

.ect-wizard-shell {
  min-height: 100vh;
  background: var(--ect-bg);
  display: flex;
  flex-direction: column;
  font-size: 1rem; /* baseline: 1rem = 16px */
}

/* ----- Header (3-col: brand + steps + exit) ----- */

.ect-wizard-header {
  background: #fff;
  border-bottom: 0.0625rem solid var(--ect-border-soft);
  padding: 1rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 5rem;
}

.ect-wizard-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.ect-wizard-header__brand-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}
.ect-wizard-header__brand-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.ect-wizard-header__brand-name strong {
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ect-text);
}
.ect-wizard-header__brand-name em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ect-text-muted);
  margin-top: 0.125rem;
}

.ect-wizard-header__steps {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-self: center;
}

.ect-wizard-header-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  min-width: 3.5rem;
}
.ect-wizard-header-step__num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 0.125rem solid var(--ect-border);
  background: #fff;
  color: var(--ect-text-soft);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  position: relative;
}
.ect-wizard-header-step__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ect-text-soft);
  white-space: nowrap;
  transition: color 0.2s;
}
.ect-wizard-header__connector {
  width: 2.5rem;
  height: 0.125rem;
  background: var(--ect-border);
  margin-top: 0.9375rem;
  border-radius: 0.0625rem;
  transition: background 0.2s;
  flex: 0 0 auto;
}

.ect-wizard-header-step.is-done .ect-wizard-header-step__num {
  background: var(--ect-accent);
  border-color: var(--ect-accent);
  color: transparent;
  font-size: 0;
}
.ect-wizard-header-step.is-done .ect-wizard-header-step__num::before {
  content: "\f147"; /* dashicons-yes */
  font-family: dashicons;
  font-size: 1.125rem;
  color: #fff;
}
.ect-wizard-header-step.is-done .ect-wizard-header-step__label {
  color: var(--ect-text);
}
.ect-wizard-header__connector.is-done {
  background: var(--ect-accent);
}
.ect-wizard-header-step.is-current .ect-wizard-header-step__num {
  border-color: var(--ect-accent);
  color: var(--ect-accent);
  background: #fff;
}
.ect-wizard-header-step.is-current .ect-wizard-header-step__label {
  color: var(--ect-text);
  font-weight: 700;
}

.ect-wizard-header__exit {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  color: var(--ect-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.5rem;
  justify-self: end;
  transition: color 0.15s, background-color 0.15s;
}
.ect-wizard-header__exit:hover {
  background: var(--ect-bg);
  color: var(--ect-text);
  text-decoration: none;
}
.ect-wizard-header__exit .dashicons {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  line-height: 1;
}

/* ----- Main + Card ----- */

.ect-wizard-main {
  flex: 1 1 auto;
  padding: 2.5rem 1.5rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.ect-wizard-card {
  background: #fff;
  border: 0.0625rem solid var(--ect-border-soft);
  border-radius: 1rem;
  box-shadow: 0 0.25rem 1rem rgba(2, 14, 33, 0.05);
  padding: 2rem 2.25rem;
  width: 100%;
  max-width: 68rem;
}

/* Reuse existing .ect-wizard-step as the step wrapper; the wizard JS
   already toggles .is-active on it. Inside the card, we adjust its
   padding/appearance for the new layout. */
.ect-wizard-card .ect-wizard-step {
  max-width: none;
}

.ect-wizard-card__heading {
  margin-bottom: 1.75rem;
}
.ect-wizard-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ect-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ect-wizard-card__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ect-text-muted);
  max-width: 54rem;
}

/* Inline nav row */
.ect-wizard-card__nav {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--ect-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Attention pulse — soft blue glow + expanding ring — on any primary CTA
   in the wizard nav (Continue when enabled, or Install/Open in promo mode).
   Draws the user's eye to the next action. Hover pauses it. */
@keyframes wizardCtaPulse {
  0%, 100% {
    box-shadow:
      0 0.125rem 0.375rem rgba(6, 147, 227, 0.4),
      0 0 0 0 rgba(6, 147, 227, 0.55);
  }
  60% {
    box-shadow:
      0 0.125rem 0.375rem rgba(6, 147, 227, 0.4),
      0 0 0 0.625rem rgba(6, 147, 227, 0);
  }
}
.ect-wizard-card__nav .ect-btn-primary,
.ect-wizard-success__actions .ect-btn-primary {
  animation: wizardCtaPulse 2.2s ease-out infinite;
}
.ect-wizard-card__nav .ect-btn-primary:hover,
.ect-wizard-card__nav .ect-btn-primary:focus,
.ect-wizard-success__actions .ect-btn-primary:hover,
.ect-wizard-success__actions .ect-btn-primary:focus {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ect-wizard-card__nav .ect-btn-primary,
  .ect-wizard-success__actions .ect-btn-primary { animation: none; }
}
.ect-wizard-card__nav-right {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin-left: auto;
}
.ect-wizard-card__nav [data-wizard-back] { visibility: hidden; }
.ect-wizard-card__nav [data-wizard-back].is-visible { visibility: visible; }

.ect-wizard-card__nav .ect-btn-ghost,
.ect-wizard-card__nav .ect-btn-primary,
.ect-wizard-card__nav .ect-btn-secondary {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
}
.ect-wizard-card__nav .dashicons {
  width: 1rem; height: 1rem; font-size: 1rem;
}

/* ----- Editor selector (2-col: options 45% + video 55%) ----- */

.ect-editor-selector {
  display: grid;
  grid-template-columns: 55fr 45fr;   /* video left (wide), options right */
  gap: 1.5rem;
  align-items: start;   /* independent column heights — video stays at natural aspect-ratio */
}
/* Visually place the video on the left and the options on the right, while
   keeping DOM order options-first so tab order + mobile stacking lead with the
   decision (options above the video). */
.ect-editor-selector__video   { grid-column: 1; grid-row: 1; }
.ect-editor-selector__options { grid-column: 2; grid-row: 1; }

.ect-editor-selector__options {
  display: grid;
  /* Column count is set from the number of VISIBLE options (JS sets data-cols):
     2–3 options -> 1 full-width column; 4+ options -> 2 columns. */
  grid-template-columns: 1fr;
  gap: 0.625rem;
  align-content: start;
}
.ect-editor-selector__options[data-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 1-column (2–3 options): vertically center the short stack next to the tall
   video so it doesn't sit lonely at the top. */
.ect-editor-selector__options[data-cols="1"] {
  align-self: center;
}

/* Using anchor tags — override anchor defaults so the option renders as a card.
   Canonical small-option-card: horizontal flex row, vertically centered —
   icon + text on the left, always-visible radio check on the right. */
.ect-editor-option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 0.9375rem;
  background: #fff;
  border: 0.125rem solid var(--ect-border);
  border-radius: 0.75rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.ect-editor-option:hover,
.ect-editor-option:focus,
.ect-editor-option:visited {
  color: inherit;
  text-decoration: none;
}
.ect-editor-option:hover {
  border-color: var(--ect-primary-border);
}
.ect-editor-option.is-selected {
  border-color: var(--ect-primary);
  background: var(--ect-primary-soft);
  box-shadow: 0 0 0 0.125rem rgba(6, 147, 227, 0.15);
}
.ect-editor-option:focus-visible {
  outline: 0.125rem solid var(--ect-focus);
  outline-offset: 0.125rem;
}
.ect-editor-option__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  border-radius: 0.375rem;
}
/* Name + description stack in a flexible middle column so the check ring
   sits to the right of BOTH lines, vertically centered. */
.ect-editor-option__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.ect-editor-option__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ect-text);
  line-height: 1.25;
}
.ect-editor-option__sub {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ect-text-muted);
}

/* Check indicator — ALWAYS visible: hollow ring when unselected, filled
   primary circle with white tick when selected. Glyph is always in the DOM,
   revealed via opacity only. */
.ect-editor-option__check {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.125rem solid var(--ect-border);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ect-editor-option:hover .ect-editor-option__check { border-color: var(--ect-primary-border); }
.ect-editor-option.is-selected .ect-editor-option__check {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
  color: #fff;
}
.ect-editor-option__check .dashicons {
  width: 0.8125rem; height: 0.8125rem; font-size: 0.8125rem; line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.ect-editor-option.is-selected .ect-editor-option__check .dashicons { opacity: 1; }

/* Video preview column — YouTube thumbnail as background, injected via inline
   background-image when an editor is picked. Fallback dark background so the
   red play button stays visible if the thumbnail hasn't loaded yet. */
.ect-editor-selector__video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-image 0.3s;
}
/* Whole thumbnail is clickable once a walkthrough is loaded — the play
   button is now just a visual affordance. Cursor turns to default once the
   iframe is playing (clicks inside iframe are handled by YouTube). */
.ect-editor-selector__video[data-editor] { cursor: pointer; }
.ect-editor-selector__video.is-playing { cursor: default; }

/* Dark gradient overlay — top slightly darkened, bottom more so, for label
   readability + play-button contrast against any thumbnail color. */
.ect-editor-selector__video::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.60) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Editor icon watermark in top-right */
.ect-editor-selector__video-watermark {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.35;
  object-fit: contain;
  pointer-events: none;
}

/* YouTube-style red play button — pill-shaped, red by default */
.ect-editor-selector__video-play {
  position: relative;
  z-index: 3;
  width: 4.5rem;
  height: 3.125rem;
  border-radius: 0.75rem;
  background: #ff0000;    /* YouTube red */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.5rem rgba(255, 0, 0, 0.4), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.ect-editor-selector__video-play:hover,
.ect-editor-selector__video-play:focus {
  background: #cc0000;    /* darker YouTube red on hover */
  transform: scale(1.08);
  text-decoration: none;
}
/* White triangle inside the play button */
.ect-editor-selector__video-play::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.6875rem 0 0.6875rem 1.125rem;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.25rem;
}

/* Ripple waves around the play button — white for contrast on red button */
.ect-editor-selector__video-waves {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 4.5rem;
  height: 3.125rem;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.ect-editor-selector__video-waves::before,
.ect-editor-selector__video-waves::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.75rem;
  border: 0.125rem solid rgba(255, 255, 255, 0.7);
  animation: youtubeRipple 2.4s infinite ease-out;
}
.ect-editor-selector__video-waves::after {
  animation-delay: 1.2s;
}
@keyframes youtubeRipple {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* When a video is actually playing, hide the play button / waves / label /
   watermark and let the iframe fill the box. */
.ect-editor-selector__video-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
  display: none;
}
.ect-editor-selector__video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ect-editor-selector__video.is-playing .ect-editor-selector__video-frame { display: block; }
.ect-editor-selector__video.is-playing .ect-editor-selector__video-play,
.ect-editor-selector__video.is-playing .ect-editor-selector__video-waves,
.ect-editor-selector__video.is-playing .ect-editor-selector__video-label,
.ect-editor-selector__video.is-playing .ect-editor-selector__video-watermark { display: none; }

.ect-editor-selector__video-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(0.25rem);
}
.ect-editor-selector__video-label .dashicons {
  width: 0.875rem; height: 0.875rem; font-size: 0.875rem;
}

/* Prefers-reduced-motion — kill the ripple */
@media (prefers-reduced-motion: reduce) {
  .ect-editor-selector__video-waves::before,
  .ect-editor-selector__video-waves::after { animation: none; opacity: 0; }
}

/* ----- Sibling promotion box (compact horizontal: icon + title + desc) -----
   No video inside (main video above swaps to that editor). No buttons
   inside — action buttons live in the card's nav row via variant swap. */

.ect-editor-promo {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.ect-editor-promo[hidden] { display: none !important; }

.ect-editor-promo--suggest,
.ect-editor-promo--activate {
  background: var(--ect-accent-soft);
  border: 0.0625rem solid var(--ect-accent-border);
}
.ect-editor-promo--ready {
  background: var(--ect-success-soft);
  border: 0.0625rem solid var(--ect-success-border);
}

.ect-editor-promo__icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ect-editor-promo__icon img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.ect-editor-promo__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.ect-editor-promo__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.1875rem;
}
.ect-editor-promo--suggest .ect-editor-promo__kicker,
.ect-editor-promo--activate .ect-editor-promo__kicker { color: var(--ect-accent-hover); }
.ect-editor-promo--ready .ect-editor-promo__kicker { color: var(--ect-success); }
.ect-editor-promo__kicker .dashicons {
  width: 0.8125rem; height: 0.8125rem; font-size: 0.8125rem;
}

.ect-editor-promo__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ect-text);
  line-height: 1.3;
}
.ect-editor-promo__desc {
  margin: 0.1875rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ect-text-muted);
}

/* ----- Nav variants (swap Continue for promo-specific actions) ----- */
/* Default: Continue button shown; promo variants hidden.
   When step 1 shows Elementor/Divi promo, JS toggles data-nav-mode on
   the nav-right container to reveal the right buttons. */

.ect-wizard-card__nav-right [data-nav-variant] { display: none; }
.ect-wizard-card__nav-right[data-nav-mode="default"] [data-nav-variant="default"] { display: inline-flex; }
.ect-wizard-card__nav-right[data-nav-mode="promo-suggest"] [data-nav-variant="promo-install"],
.ect-wizard-card__nav-right[data-nav-mode="promo-suggest"] [data-nav-variant="promo-dismiss"] { display: inline-flex; }
.ect-wizard-card__nav-right[data-nav-mode="promo-activate"] [data-nav-variant="promo-activate"],
.ect-wizard-card__nav-right[data-nav-mode="promo-activate"] [data-nav-variant="promo-dismiss"] { display: inline-flex; }
.ect-wizard-card__nav-right[data-nav-mode="promo-ready"] [data-nav-variant="promo-open"],
.ect-wizard-card__nav-right[data-nav-mode="promo-ready"] [data-nav-variant="promo-dismiss"] { display: inline-flex; }

.ect-wizard-card__nav-right [data-promo-install].is-busy,
.ect-wizard-card__nav-right [data-promo-activate].is-busy,
.ect-btn-primary.is-busy,
.ect-btn-secondary.is-busy,
.ect-btn-accent.is-busy,
.ect-btn-success.is-busy,
[data-page-create].is-busy,
[data-page-preview].is-busy,
[data-page-edit].is-busy,
[data-ect-busy="1"] {
  opacity: 0.72;
  pointer-events: none;
  cursor: progress;
}

.ect-wizard-card__nav .ect-btn-primary.is-busy,
.ect-wizard-success__actions .ect-btn-primary.is-busy {
  animation: none !important;
}

@keyframes ect-spin {
  to { transform: rotate(360deg); }
}

.is-busy .dashicons,
[data-ect-busy="1"] .dashicons,
[data-promo-install].is-busy .dashicons,
[data-promo-activate].is-busy .dashicons,
[data-page-create].is-busy .dashicons,
[data-page-preview].is-busy .dashicons,
[data-page-edit].is-busy .dashicons {
  animation: ect-spin 0.8s linear infinite;
}

/* ----- Editor option ordering — detected builder first, then Shortcode
   (richer design options), then Block. HTML source order stays for a11y. */
.ect-editor-option[data-value="elementor"] { order: 1; }
.ect-editor-option[data-value="divi"]      { order: 2; }
.ect-editor-option[data-value="bricks"]    { order: 3; }
.ect-editor-option[data-value="wpbakery"]  { order: 4; }
.ect-editor-option[data-value="shortcode"] { order: 10; }
.ect-editor-option[data-value="block"]     { order: 11; }

/* ----- Preview state visibility for editor options ----- */
/* Default: block + shortcode visible. Elementor/Divi/Bricks/WPBakery hidden. */
.ect-editor-option[data-conditional="elementor"],
.ect-editor-option[data-conditional="divi"],
.ect-editor-option[data-conditional="bricks"],
.ect-editor-option[data-conditional="wpbakery"] { display: none; }

/* Classic Editor active — Block Editor option is dulled, unselectable,
   and hovers show a tooltip. Shortcode remains available (user's fallback). */
body[data-classic-editor="true"] .ect-editor-option[data-value="block"] {
  opacity: 0.45;
  cursor: not-allowed;
  position: relative;
  filter: grayscale(0.6);
}
body[data-classic-editor="true"] .ect-editor-option[data-value="block"]::before {
  content: "You're using Classic Editor \2014 block editor is disabled";
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.25rem);
  padding: 0.3125rem 0.5rem;
  background: var(--ect-text);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 0.25rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 20;
}
body[data-classic-editor="true"] .ect-editor-option[data-value="block"]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  transform: translateX(-50%);
  border: 0.3125rem solid transparent;
  border-top-color: var(--ect-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
body[data-classic-editor="true"] .ect-editor-option[data-value="block"]:hover::before,
body[data-classic-editor="true"] .ect-editor-option[data-value="block"]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Elementor option visible when Elementor is active in the sim state */
body[data-preview-state="elementor"] .ect-editor-option[data-conditional="elementor"],
body[data-preview-state="elementor-installed"] .ect-editor-option[data-conditional="elementor"],
body[data-preview-state="elementor-divi"] .ect-editor-option[data-conditional="elementor"],
body[data-preview-state="elementor-divi-installed"] .ect-editor-option[data-conditional="elementor"],
body[data-preview-state="all-builders"] .ect-editor-option[data-conditional="elementor"],
body[data-preview-state="all-installed"] .ect-editor-option[data-conditional="elementor"] {
  display: flex;
}
/* Divi option visible when Divi is active */
body[data-preview-state="divi"] .ect-editor-option[data-conditional="divi"],
body[data-preview-state="divi-installed"] .ect-editor-option[data-conditional="divi"],
body[data-preview-state="elementor-divi"] .ect-editor-option[data-conditional="divi"],
body[data-preview-state="elementor-divi-installed"] .ect-editor-option[data-conditional="divi"],
body[data-preview-state="all-builders"] .ect-editor-option[data-conditional="divi"],
body[data-preview-state="all-installed"] .ect-editor-option[data-conditional="divi"] {
  display: flex;
}
/* Bricks option visible when Bricks is active */
body[data-preview-state="bricks"] .ect-editor-option[data-conditional="bricks"],
body[data-preview-state="all-builders"] .ect-editor-option[data-conditional="bricks"],
body[data-preview-state="all-installed"] .ect-editor-option[data-conditional="bricks"] {
  display: flex;
}
/* WPBakery option visible when WPBakery is active */
body[data-preview-state="wpbakery"] .ect-editor-option[data-conditional="wpbakery"],
body[data-preview-state="all-builders"] .ect-editor-option[data-conditional="wpbakery"],
body[data-preview-state="all-installed"] .ect-editor-option[data-conditional="wpbakery"] {
  display: flex;
}

/* =========================================================================
   STEP-2 — Layout & Style settings panel (row-based)
   Each row is a 35/65 split: icon + small title + one-line description on
   the left, the actual options on the right. No preview column — every
   option carries its own "view demo" link that opens a live example in a
   new tab.
   ========================================================================= */

.ect-settings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ----- "Switch to Shortcode" CTA bar ------------------------------------
   Shown only when the user picked Block or Bricks in Step 1 — one click
   swaps their Step 1 selection to Shortcode and re-renders Step 2 with the
   fuller layout / style / filter set. Blue tint keeps it a suggestion, not
   an interruption. */
.ect-editor-switch {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  margin-top: 1.25rem;
  background: var(--ect-primary-soft);
  border: 0.0625rem solid var(--ect-primary-border);
  border-radius: 0.75rem;
}
.ect-editor-switch[hidden] { display: none !important; }
.ect-editor-switch__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}
.ect-editor-switch__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ect-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.0625rem 0.125rem rgba(6, 147, 227, 0.15);
}
.ect-editor-switch__icon .dashicons {
  width: 1.125rem; height: 1.125rem; font-size: 1.125rem;
}
.ect-editor-switch__text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.ect-editor-switch__text strong {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ect-text);
  line-height: 1.3;
}
.ect-editor-switch__text span {
  font-size: 0.75rem;
  color: var(--ect-text-muted);
  line-height: 1.4;
}
.ect-editor-switch__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .ect-editor-switch { flex-direction: column; align-items: stretch; }
  .ect-editor-switch__cta { justify-content: center; }
}

/* One row = one setting (Layout / Style / Filter Bar / Date Format) */
.ect-settings-row {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.125rem 1.25rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border-soft);
  border-radius: 0.75rem;
}
.ect-settings-row[hidden] { display: none !important; }

.ect-settings-row__info {
  display: flex;
  gap: 0.6875rem;
  align-items: flex-start;
}
.ect-settings-row__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: var(--ect-primary-soft);
  color: var(--ect-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ect-settings-row__icon .dashicons {
  width: 1.125rem; height: 1.125rem; font-size: 1.125rem;
}
.ect-settings-row__meta { min-width: 0; }
.ect-settings-row__title {
  margin: 0 0 0.1875rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ect-text);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  line-height: 1.25;
}
/* Inline Pro pill in a settings row title — same 4px tab style as the
   layout / style card Pro pills so all upsell markers look identical. */
.ect-settings-row__badge,
.ect-settings-row__badge.ect-pill,
.ect-settings-row__badge.ect-pill-pro {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  background: var(--ect-accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.25rem;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0.0625rem 0.125rem rgba(227, 104, 11, 0.35);
}
.ect-settings-row__desc {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ect-text-muted);
}
.ect-settings-row__body { min-width: 0; }

/* ----- Compact layout cards ----- */
.ect-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.ect-layout-grid[hidden] { display: none !important; }
.ect-layout-grid--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ect-layout-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 0.125rem solid var(--ect-border);
  border-radius: 0.5rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.ect-layout-card:hover {
  border-color: var(--ect-primary-border);
  text-decoration: none;
  color: inherit;
}
.ect-layout-card.is-selected {
  border-color: var(--ect-primary);
  background: var(--ect-primary-soft);
  box-shadow: 0 0 0 0.125rem rgba(6, 147, 227, 0.15);
}
.ect-layout-card:focus-visible {
  outline: 0.125rem solid var(--ect-focus);
  outline-offset: 0.125rem;
}
.ect-layout-card__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  border-radius: 0.375rem;
  background: var(--ect-bg);
  color: var(--ect-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
}
.ect-layout-card.is-selected .ect-layout-card__icon {
  background: rgba(255, 255, 255, 0.7);
}
.ect-layout-card__icon .dashicons {
  width: 1rem; height: 1rem; font-size: 1rem;
}
.ect-layout-card__name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ect-text);
  line-height: 1.2;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pro pill — top-LEFT, sitting HALF ABOVE the card border (badge tab style).
   Horizontally aligned with the layout icon inside the card. */
.ect-layout-card__pro {
  position: absolute;
  top: -0.5rem;
  left: 0.6875rem; /* aligns with the icon left edge (padding-left) */
  padding: 0.125rem 0.375rem;
  background: var(--ect-accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.25rem; /* ~4px rounded tab, not a pill */
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0.0625rem 0.125rem rgba(227, 104, 11, 0.35);
  z-index: 2;
}

/* Check indicator (right edge, ALWAYS visible) — hollow ring unselected,
   filled primary circle + white tick when selected. Static flex child, last
   in the card's flex row. Glyph revealed via opacity only. */
.ect-layout-card__check,
.ect-style-card__check {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.125rem solid var(--ect-border);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ect-layout-card:hover .ect-layout-card__check,
.ect-style-card:hover .ect-style-card__check { border-color: var(--ect-primary-border); }
.ect-layout-card.is-selected .ect-layout-card__check,
.ect-style-card.is-selected .ect-style-card__check {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
  color: #fff;
}
.ect-layout-card__check .dashicons,
.ect-style-card__check .dashicons {
  width: 0.75rem; height: 0.75rem; font-size: 0.75rem; line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.ect-layout-card.is-selected .ect-layout-card__check .dashicons,
.ect-style-card.is-selected .ect-style-card__check .dashicons { opacity: 1; }

/* ----- Style cards (name left, always-visible check ring right) ----- */
.ect-style-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.ect-style-card {
  position: relative;
  padding: 0.6875rem 0.875rem;
  min-height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  background: #fff;
  border: 0.125rem solid var(--ect-border);
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.ect-style-card:hover {
  border-color: var(--ect-primary-border);
  text-decoration: none;
  color: inherit;
}
.ect-style-card.is-selected {
  border-color: var(--ect-primary);
  background: var(--ect-primary-soft);
  box-shadow: 0 0 0 0.125rem rgba(6, 147, 227, 0.15);
}
.ect-style-card:focus-visible {
  outline: 0.125rem solid var(--ect-focus);
  outline-offset: 0.125rem;
}
.ect-style-card__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ect-text);
  line-height: 1.25;
  text-align: left;
}
.ect-style-card__pro {
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.375rem;
  background: var(--ect-accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.25rem;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0.0625rem 0.125rem rgba(227, 104, 11, 0.35);
  z-index: 2;
}

/* ----- Toggle options — Yes/No rendered as canonical small option cards:
   name left, always-visible check ring right; Pro option carries the same
   floating "Pro" tab badge as every other Pro card. ------------------------ */
.ect-toggle-cluster {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ect-toggle-row {
  display: inline-flex;
  gap: 0.5rem;
}
.ect-toggle-option {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  min-height: 2.5rem;
  min-width: 5rem;
  background: #fff;
  border: 0.125rem solid var(--ect-border);
  border-radius: 0.5rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.ect-toggle-option:hover {
  border-color: var(--ect-primary-border);
  text-decoration: none;
  color: inherit;
}
.ect-toggle-option.is-selected {
  border-color: var(--ect-primary);
  background: var(--ect-primary-soft);
  box-shadow: 0 0 0 0.125rem rgba(6, 147, 227, 0.15);
}
.ect-toggle-option:focus-visible {
  outline: 0.125rem solid var(--ect-focus);
  outline-offset: 0.125rem;
}
.ect-toggle-option__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ect-text);
  line-height: 1.25;
  text-align: left;
}
.ect-toggle-option__check {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 0.125rem solid var(--ect-border);
  background: transparent;
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.ect-toggle-option:hover .ect-toggle-option__check { border-color: var(--ect-primary-border); }
.ect-toggle-option.is-selected .ect-toggle-option__check {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
  color: #fff;
}
.ect-toggle-option__check .dashicons {
  width: 0.75rem; height: 0.75rem; font-size: 0.75rem; line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.ect-toggle-option.is-selected .ect-toggle-option__check .dashicons { opacity: 1; }
/* Pro tab badge — same floating pattern as layout / style cards */
.ect-toggle-option__pro {
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  padding: 0.125rem 0.375rem;
  background: var(--ect-accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 0.25rem;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: 0 0.0625rem 0.125rem rgba(227, 104, 11, 0.35);
  z-index: 2;
}

/* Small "see it live" text link — used next to toggle and under date select */
.ect-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ect-primary);
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.ect-demo-link:hover,
.ect-demo-link:focus-visible {
  background: var(--ect-primary-soft);
  color: var(--ect-primary-hover);
  text-decoration: none;
  outline: none;
}
.ect-demo-link .dashicons {
  width: 0.8125rem; height: 0.8125rem; font-size: 0.8125rem;
}
.ect-demo-link[hidden] { display: none !important; }

/* ----- Date format dropdown ----- */
.ect-date-format {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border);
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ect-text);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ect-date-format:focus {
  outline: none;
  border-color: var(--ect-primary);
  box-shadow: 0 0 0 0.1875rem var(--ect-primary-soft);
}

/* ----- Pro notice bar ----- */
.ect-pro-notice {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--ect-accent-soft) 0%, #fff5e8 100%);
  border: 0.0625rem solid var(--ect-accent-border);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.ect-pro-notice[hidden] { display: none !important; }
.ect-pro-notice__icon {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ect-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(227, 104, 11, 0.35);
}
.ect-pro-notice__icon .dashicons {
  width: 1.125rem; height: 1.125rem; font-size: 1.125rem;
}
.ect-pro-notice__body { flex: 1 1 auto; min-width: 0; }
.ect-pro-notice__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ect-text);
}
.ect-pro-notice__desc {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ect-text-muted);
}

/* Step 2 + Step 3 nav variant swap (Continue ↔ Upgrade to Pro) */
[data-step2-nav-right] [data-step2-nav-variant],
[data-step3-nav-right] [data-step3-nav-variant] { display: none; }
[data-step2-nav-right][data-nav-mode="default"] [data-step2-nav-variant="default"] { display: inline-flex; }
[data-step2-nav-right][data-nav-mode="upgrade"] [data-step2-nav-variant="upgrade"] { display: inline-flex; }
[data-step3-nav-right][data-nav-mode="default"] [data-step3-nav-variant="default"] { display: inline-flex; }
[data-step3-nav-right][data-nav-mode="upgrade"] [data-step3-nav-variant="upgrade"] { display: inline-flex; }

/* =========================================================================
   STEP-3 — Events Query settings
   Reuses .ect-settings-row / .ect-style-row / .ect-toggle-row from Step 2.
   New primitives: multiselect widget + 3-column style-row variant +
   a per-section footer for one shared demo link.
   ========================================================================= */

/* 3-column variant for the Events Status row (Upcoming / Past / Both) */
.ect-style-row--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Section-level demo link sitting under the row's small description text,
   inside the left-hand meta column (e.g. Load Events by Date Range). Small
   top offset keeps it clearly separated from the desc without wasting
   vertical space. Negative left offset makes the icon flush with the desc. */
.ect-settings-row__demo {
  margin-top: 0.4375rem;
  margin-left: -0.5rem;
}

/* ----- Multiselect (Select2-style) --------------------------------------
   The visible control is a click-to-open target with chips inside; the
   dropdown holds the option anchors. Values persist to a hidden input as
   a comma-separated list so wizard.js state persistence works with zero
   extra plumbing. WP integration point: populate .ect-multiselect__option
   entries dynamically from Events categories. */
.ect-multiselect {
  position: relative;
  width: 100%;
}
.ect-multiselect__control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.375rem;
  padding: 0.3125rem 0.5rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ect-multiselect__control:hover { border-color: var(--ect-primary-border); }
.ect-multiselect.is-open .ect-multiselect__control,
.ect-multiselect__control:focus-visible {
  outline: none;
  border-color: var(--ect-primary);
  box-shadow: 0 0 0 0.1875rem var(--ect-primary-soft);
}
.ect-multiselect__chips {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
}
.ect-multiselect__placeholder {
  flex: 1 1 auto;
  color: var(--ect-text-muted);
  font-size: 0.8125rem;
}
.ect-multiselect__placeholder[hidden] { display: none !important; }
.ect-multiselect__caret {
  flex: 0 0 auto;
  color: var(--ect-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, color 0.15s;
}
.ect-multiselect__caret .dashicons {
  width: 1rem; height: 1rem; font-size: 1rem;
}
.ect-multiselect.is-open .ect-multiselect__caret {
  transform: rotate(180deg);
  color: var(--ect-primary);
}

/* Individual chip in the control */
.ect-multiselect__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.375rem 0.1875rem 0.5rem;
  background: var(--ect-primary-soft);
  color: var(--ect-primary-hover);
  border: 0.0625rem solid var(--ect-primary-border);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.ect-multiselect__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 0.1875rem;
  color: var(--ect-primary-hover);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ect-multiselect__chip-remove:hover,
.ect-multiselect__chip-remove:focus-visible {
  background: rgba(6, 147, 227, 0.15);
  color: var(--ect-accent-hover);
  outline: none;
}
.ect-multiselect__chip-remove .dashicons {
  width: 0.75rem; height: 0.75rem; font-size: 0.75rem;
}

/* Dropdown */
.ect-multiselect__dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 0.25rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(2, 14, 33, 0.12);
  max-height: 15rem;
  overflow-y: auto;
}
.ect-multiselect__dropdown[hidden] { display: none !important; }

.ect-multiselect__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--ect-text);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.1s, color 0.1s;
}
.ect-multiselect__option:hover,
.ect-multiselect__option:focus-visible {
  background: var(--ect-bg);
  color: var(--ect-text);
  text-decoration: none;
  outline: none;
}
.ect-multiselect__option.is-selected {
  background: var(--ect-primary-soft);
  color: var(--ect-primary-hover);
}
.ect-multiselect__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.1875rem;
  background: transparent;
  border: 0.0625rem solid var(--ect-border);
  color: #fff;
  transition: background-color 0.1s, border-color 0.1s;
}
.ect-multiselect__check .dashicons {
  width: 0.75rem; height: 0.75rem; font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.ect-multiselect__option.is-selected .ect-multiselect__check {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
}
.ect-multiselect__option.is-selected .ect-multiselect__check .dashicons { opacity: 1; }
.ect-multiselect__label { min-width: 0; }

/* =========================================================================
   STEP-4 (Review) + STEP-5 (Done) — split review, shortcode code block,
   summary list, telemetry consent, success header, cross-sell footer.
   ========================================================================= */

/* Step 5 recap — single centered card (no settings summary alongside).
   Max-width keeps a long shortcode readable without stretching to full page. */
.ect-review-recap {
  max-width: 40rem;
  margin: 1.25rem auto 0;
}

.ect-review-panel {
  padding: 1.125rem 1.25rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border-soft);
  border-radius: 0.75rem;
}
.ect-review-panel[hidden] { display: none !important; }
.ect-review-panel__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.ect-review-panel__icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: var(--ect-primary-soft);
  color: var(--ect-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ect-review-panel__icon .dashicons {
  width: 1.125rem; height: 1.125rem; font-size: 1.125rem;
}
.ect-review-panel__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ect-text);
  flex: 1 1 auto;
}
.ect-review-panel__hint {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  color: var(--ect-text-muted);
  line-height: 1.5;
}

/* Shortcode code block — light theme with soft syntax accents */
.ect-code-block {
  margin: 0;
  padding: 0.75rem 0.875rem;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F9 100%);
  border: 0.0625rem solid var(--ect-border-soft);
  border-radius: 0.5rem;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ect-text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ect-code-block code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  display: block;
}
.ect-code-block .code-tag  { color: var(--ect-primary-hover); font-weight: 600; }
.ect-code-block .code-attr { color: var(--ect-accent-hover); }
.ect-code-block .code-val  { color: #2f7d3d; }

/* Copy button — sits in the panel header on the right */
.ect-code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.3125rem 0.5rem;
  background: var(--ect-bg);
  border: 0.0625rem solid var(--ect-border);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ect-text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ect-code-block__copy:hover,
.ect-code-block__copy:focus-visible {
  background: var(--ect-primary-soft);
  border-color: var(--ect-primary-border);
  color: var(--ect-primary-hover);
  text-decoration: none;
  outline: none;
}
.ect-code-block__copy.is-copied {
  background: var(--ect-success-soft);
  border-color: var(--ect-success);
  color: var(--ect-success);
}
.ect-code-block__copy .dashicons {
  width: 0.875rem; height: 0.875rem; font-size: 0.875rem;
}

/* Builder card (block / bricks "where it goes") — no header row: the
   success-header above the recap already communicates "created". Panel is
   tightened vertically and the logo is bumped up so the card carries
   visual weight without an icon-title chrome above it. */
.ect-review-panel--builder {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #fff 0%, var(--ect-primary-soft) 140%);
  border-color: var(--ect-primary-border);
}
.ect-review-builder {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.ect-review-builder__logo {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.375rem;
  box-shadow: 0 0.125rem 0.375rem rgba(6, 147, 227, 0.12);
}
.ect-review-builder__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ect-text);
  line-height: 1.3;
  margin-bottom: 0.1875rem;
}
.ect-review-builder__desc {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ect-text-muted);
}

/* Telemetry consent bar — white card matching the other settings rows;
   only the checkbox area (wrapped in a small <label>) toggles the value,
   so clicks on the description text don't accidentally uncheck. */
.ect-telemetry {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  margin-top: 1.25rem;
  background: #fff;
  border: 0.0625rem solid var(--ect-border-soft);
  border-radius: 0.75rem;
  transition: border-color 0.15s;
}
.ect-telemetry__checkbox-wrap {
  display: inline-flex;
  align-items: flex-start;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 0.125rem;
}
.ect-telemetry__checkbox {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ect-telemetry__mark {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  border-radius: 0.25rem;
  background: #fff;
  border: 0.125rem solid var(--ect-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background-color 0.15s, border-color 0.15s;
}
.ect-telemetry__checkbox-wrap:hover .ect-telemetry__mark {
  border-color: var(--ect-primary-border);
}
.ect-telemetry__mark .dashicons {
  width: 0.875rem; height: 0.875rem; font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.1s;
}
.ect-telemetry__checkbox:checked + .ect-telemetry__mark {
  background: var(--ect-primary);
  border-color: var(--ect-primary);
}
.ect-telemetry__checkbox:checked + .ect-telemetry__mark .dashicons { opacity: 1; }
.ect-telemetry__checkbox:focus-visible + .ect-telemetry__mark {
  outline: 0.125rem solid var(--ect-focus);
  outline-offset: 0.125rem;
}
.ect-telemetry__body {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
}
.ect-telemetry__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ect-text);
}
.ect-telemetry__desc {
  font-size: 0.75rem;
  color: var(--ect-text-muted);
  line-height: 1.5;
}
.ect-telemetry__policy {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  margin-left: 0.25rem;
  color: var(--ect-primary);
  text-decoration: underline;
  font-weight: 600;
  white-space: nowrap;
}
.ect-telemetry__policy:hover,
.ect-telemetry__policy:focus-visible {
  color: var(--ect-primary-hover);
  outline: none;
}
.ect-telemetry__policy .dashicons {
  width: 0.75rem; height: 0.75rem; font-size: 0.75rem;
}

/* ---------- STEP 5 — Success header + success nav + cross-sell -------- */
.ect-wizard-success__icon--lg {
  width: 4.5rem;
  height: 4.5rem;
  background: linear-gradient(135deg, var(--ect-success) 0%, #2a9c60 100%);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 0.5rem 1.5rem rgba(53, 181, 114, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  animation: ectSuccessPop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.ect-wizard-success__icon--lg .dashicons {
  width: 2.5rem; height: 2.5rem; font-size: 2.5rem;
}
@keyframes ectSuccessPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ect-wizard-success__icon--lg { animation: none; }
}

/* Success actions row — Create / Preview / Edit / Change / Recreate / Finish.
   Reuses the shared .ect-wizard-success__actions primitive (already flex +
   wrap + centered); this override adds the divider above and the space
   needed after the recap card. */
.ect-wizard-success__actions {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 0.0625rem solid var(--ect-border-soft);
}
[data-success-shortcode-only][hidden] { display: none !important; }

/* Pre-create / post-create state toggle — body[data-page-created="true"]
   flips which CTA(s) show. !important is used deliberately: the button
   classes (.ect-btn-primary / .ect-btn-success / etc.) each set their own
   `display: inline-flex`, and equal-specificity plus source-order used to
   let those override our hide state, keeping Finish visible before the
   page was created. */
[data-page-cta="post"] { display: none !important; }
body[data-page-created="true"] [data-page-cta="pre"]  { display: none !important; }
body[data-page-created="true"] [data-page-cta="post"] { display: inline-flex !important; }

/* Small builder-aware hint to the left of the Step 3 primary CTA when
   Block or Bricks is picked. Reads like "Insert Events Block in Block Editor". */
.ect-wizard-card__nav-hint {
  font-size: 0.75rem;
  color: var(--ect-text-muted);
  font-style: italic;
  margin-right: 0.5rem;
  align-self: center;
  white-space: nowrap;
}
.ect-wizard-card__nav-hint[hidden] { display: none !important; }
@media (max-width: 32rem) {
  .ect-wizard-card__nav-hint { white-space: normal; }
}

/* Finish button — success green (#35B572 = --ect-success). Distinct from
   the primary blue so users can tell "exit the wizard" apart from
   "preview my new page". */
.ect-btn-success {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5625rem 1rem;
  background: var(--ect-success);
  color: #fff;
  border: 0.125rem solid var(--ect-success);
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ect-btn-success:hover,
.ect-btn-success:focus-visible {
  background: #2a9c60;
  border-color: #2a9c60;
  color: #fff;
  text-decoration: none;
  transform: translateY(-0.0625rem);
  box-shadow: 0 0.25rem 0.75rem rgba(53, 181, 114, 0.3);
  outline: none;
}

/* Progress strip on the Done step, once the page has been created: turn the
   current-step number chip green with a checkmark so users see the whole
   wizard visually complete. */
body[data-page-created="true"] .ect-wizard-header-step.is-current .ect-wizard-header-step__num {
  background: var(--ect-success);
  color: #fff;
  border-color: var(--ect-success);
}

/* Cross-sell footer — Single Page Builder promo */
.ect-cross-sell {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
  background: linear-gradient(135deg, #fff5e8 0%, var(--ect-accent-soft) 100%);
  border: 0.0625rem solid var(--ect-accent-border);
  border-radius: 0.75rem;
}
/* The plugin brand SVGs already ship with a rounded-frame border and
   internal padding — the outer container is just a flex slot, no chrome. */
.ect-cross-sell__icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ect-cross-sell__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ect-cross-sell__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.ect-cross-sell__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ect-text);
}
.ect-cross-sell__desc {
  font-size: 0.75rem;
  color: var(--ect-text-muted);
  line-height: 1.5;
}
.ect-cross-sell__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: nowrap;
  align-items: center;
  flex: 0 0 auto;
}

/* Responsive stacking for cross-sell + builder recap */
@media (max-width: 48rem) {
  .ect-cross-sell { flex-direction: column; align-items: stretch; text-align: center; }
  .ect-cross-sell__actions { justify-content: center; }
  .ect-review-builder { flex-direction: column; text-align: center; }
}

/* Accent (Upgrade to Pro) pulse — orange */
@keyframes wizardCtaPulseAccent {
  0%, 100% {
    box-shadow:
      0 0.125rem 0.375rem rgba(227, 104, 11, 0.4),
      0 0 0 0 rgba(227, 104, 11, 0.55);
  }
  60% {
    box-shadow:
      0 0.125rem 0.375rem rgba(227, 104, 11, 0.4),
      0 0 0 0.625rem rgba(227, 104, 11, 0);
  }
}
.ect-wizard-card__nav .ect-btn-accent {
  animation: wizardCtaPulseAccent 2.2s ease-out infinite;
}
.ect-wizard-card__nav .ect-btn-accent:hover,
.ect-wizard-card__nav .ect-btn-accent:focus {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ect-wizard-card__nav .ect-btn-accent { animation: none; }
}

/* Responsive: collapse to single-column at narrow widths */
@media (max-width: 60rem) {
  .ect-settings-row { grid-template-columns: 1fr; }
  .ect-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .ect-style-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 25rem) {
  /* [data-cols] qualifier matches the JS-set attribute's specificity so this
     wins over the desktop data-cols rules and forces a single column. */
  .ect-editor-selector__options[data-cols],
  .ect-layout-grid,
  .ect-style-row { grid-template-columns: 1fr; }
}

/* Reduced motion — option-card transitions collapse to imperceptible */
@media (prefers-reduced-motion: reduce) {
  .ect-editor-option, .ect-editor-option *,
  .ect-layout-card, .ect-layout-card *,
  .ect-style-card, .ect-style-card *,
  .ect-toggle-option, .ect-toggle-option * {
    transition-duration: 0.01ms !important;
  }
}

/* ----- Responsive ----- */

@media (max-width: 60rem) {
  .ect-wizard-header {
    grid-template-columns: minmax(0, auto) minmax(0, auto);
    grid-template-rows: auto auto;
    row-gap: 1rem;
    padding: 0.875rem 1rem;
    min-height: auto;
  }
  .ect-wizard-header__brand { grid-column: 1; grid-row: 1; }
  .ect-wizard-header__exit  { grid-column: 2; grid-row: 1; }
  .ect-wizard-header__steps { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

@media (max-width: 48rem) {
  .ect-editor-selector {
    grid-template-columns: 1fr;
  }
  /* stacked: reset the desktop swap so DOM order applies (options above video) */
  .ect-editor-selector__video,
  .ect-editor-selector__options { grid-column: auto; grid-row: auto; }
  /* options columns keep following data-cols (2–3 -> 1 col, 4+ -> 2 cols) */
  .ect-wizard-header-step__label { display: none; }
  .ect-wizard-header__connector { width: 1.5rem; }
  .ect-wizard-header-step { min-width: 2rem; }
  .ect-wizard-card { padding: 1.5rem; }
  .ect-wizard-main { padding: 1.5rem 1rem 2rem; }
}

@media (max-width: 32rem) {
  .ect-wizard-card__nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .ect-wizard-card__nav-right { width: 100%; justify-content: flex-end; }
}


/* Pro tier — unlock all Pro options when body/html[data-tier="pro"]. */
html[data-tier="pro"] .ect-layout-card__pro,
html[data-tier="pro"] .ect-style-card__pro,
html[data-tier="pro"] .ect-toggle-option__pro,
html[data-tier="pro"] .ect-settings-row__badge.ect-pill-pro,
html[data-tier="pro"] [data-pro-notice],
body:not([data-tier="pro"]) [data-tier-only="pro"] { display: none !important; }
body[data-tier="pro"] .ect-layout-card__pro,
body[data-tier="pro"] .ect-style-card__pro,
body[data-tier="pro"] .ect-toggle-option__pro,
body[data-tier="pro"] .ect-settings-row__badge.ect-pill-pro { display: none !important; }
body[data-tier="pro"] [data-pro-notice] { display: none !important; }