@layer ec.domain {
  .ec-ticket-panel {
    overflow: clip;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-xl);
    background: var(--ec-sys-color-surface);
    box-shadow: var(--ec-elevation-2);
  }

  .ec-ticket-panel__header {
    display: grid;
    gap: var(--ec-space-2);
    padding: var(--ec-space-5);
    border-block-end: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-ticket-panel__eyebrow {
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-label-md-size);
    font-weight: var(--ec-font-weight-extrabold);
    letter-spacing: 0.08em;
    line-height: var(--ec-type-label-md-line);
    text-transform: uppercase;
  }

  .ec-ticket-panel__title {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-heading-3-size);
    line-height: var(--ec-type-heading-3-line);
  }

  .ec-ticket-panel__description {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-ticket-panel__body {
    padding: var(--ec-space-5);
  }

  .ec-ticket-form {
    display: grid;
    gap: var(--ec-space-5);
  }

  .ec-ticket-list {
    display: grid;
    gap: var(--ec-space-3);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .ec-ticket-option {
    display: grid;
    gap: var(--ec-space-2);
    padding: var(--ec-space-4);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface);
    transition:
      border-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      background-color var(--ec-motion-duration-medium) var(--ec-motion-easing-standard),
      box-shadow var(--ec-motion-duration-medium) var(--ec-motion-easing-standard);
  }

  .ec-ticket-option[data-state="selected"] {
    border-color: var(--ec-sys-color-primary);
    background: var(--ec-sys-color-interactive-subtle);
    box-shadow: var(--ec-elevation-1);
  }

  .ec-ticket-option[data-state="sold-out"] {
    background: var(--ec-sys-color-surface-muted);
    color: var(--ec-sys-color-on-surface-muted);
  }

  .ec-ticket-option__lot {
    justify-self: start;
  }

  .ec-ticket-option__heading {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--ec-space-2);
  }

  .ec-ticket-option__name {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-md-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-ticket-option__description {
    margin: 0;
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  /* Condições (parcelamento, taxas, prazo, mínimo): letra miúda e compacta. */
  .ec-ticket-option__deadline,
  .ec-ticket-option__fee,
  .ec-ticket-option__installments,
  .ec-ticket-option__minimum {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-label-md-size);
    line-height: var(--ec-type-label-md-line);
  }

  .ec-ticket-option__purchase {
    /* Trilho estreito: empilhar preço/condições (largura cheia, sem quebrar
       palavra por palavra) e o seletor de quantidade logo abaixo. */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ec-space-2);
  }

  .ec-ticket-option__pricing {
    display: grid;
    min-width: 0;
    gap: var(--ec-space-1);
  }

  .ec-ticket-option__price {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-title-lg-size);
    font-weight: var(--ec-font-weight-extrabold);
    font-variant-numeric: tabular-nums;
    line-height: var(--ec-type-title-lg-line);
  }

  .ec-ticket-option__minimum {
    display: inline-flex;
    align-items: center;
    gap: var(--ec-space-1);
    color: var(--ec-sys-color-warning);
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-ticket-quantity {
    display: grid;
    /* Compacto e alinhado à esquerda no desktop (mobile estica via media query);
       alvos de toque de 44px preservados. */
    grid-template-columns: var(--ec-touch-target-min) 4rem var(--ec-touch-target-min);
    align-items: center;
    justify-self: start;
    gap: var(--ec-space-1);
  }

  .ec-ticket-quantity__button {
    display: none;
    width: var(--ec-touch-target-min);
    height: var(--ec-touch-target-min);
    padding: 0;
    place-items: center;
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-full);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-primary);
    font-size: var(--ec-type-title-lg-size);
    font-weight: var(--ec-font-weight-bold);
    line-height: 1;
    cursor: pointer;
  }

  .ec-ticket-quantity__button:hover:not(:disabled) {
    border-color: var(--ec-sys-color-primary);
    background: var(--ec-sys-color-primary-container);
    color: var(--ec-sys-color-on-primary-container);
  }

  .ec-ticket-quantity__button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
  }

  .ec-ticket-form[data-state="ready"] .ec-ticket-quantity__button {
    display: grid;
  }

  .ec-ticket-quantity__input {
    width: 100%;
    min-height: var(--ec-touch-target-min);
    padding-inline: var(--ec-space-2);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-surface);
    color: var(--ec-sys-color-on-surface-strong);
    font-weight: var(--ec-font-weight-bold);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .ec-ticket-summary {
    display: grid;
    gap: var(--ec-space-4);
    padding-block-start: var(--ec-space-5);
    border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
  }

  .ec-ticket-summary__row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--ec-space-4);
  }

  .ec-ticket-summary__label {
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    font-weight: var(--ec-font-weight-semibold);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-ticket-summary__value {
    color: var(--ec-sys-color-on-surface-strong);
    font-size: var(--ec-type-heading-3-size);
    font-weight: var(--ec-font-weight-extrabold);
    font-variant-numeric: tabular-nums;
    line-height: var(--ec-type-heading-3-line);
    text-align: end;
  }

  .ec-ticket-summary__meta,
  .ec-ticket-summary__fee,
  .ec-ticket-summary__trust {
    margin: 0;
    color: var(--ec-sys-color-on-surface-muted);
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-ticket-summary__meta[data-state="error"] {
    color: var(--ec-sys-color-error);
    font-weight: var(--ec-font-weight-semibold);
  }

  .ec-ticket-summary__trust {
    display: flex;
    align-items: start;
    gap: var(--ec-space-2);
    padding: var(--ec-space-3);
    border-radius: var(--ec-radius-md);
    background: var(--ec-sys-color-info-container);
    color: var(--ec-sys-color-on-info-container);
  }

  .ec-ticket-summary__trust svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    margin-block-start: 0.125rem;
    fill: currentColor;
  }

  /* Contador de itens dentro do botão de conversão: pill discreto que só
     aparece com seleção (o JS alterna `hidden`; o template já nasce oculto em 0).
     Evita o rótulo "0 Continuar inscrição" no estado inicial. */
  .ec-ticket-summary__count {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: var(--ec-space-2);
    border-radius: var(--ec-radius-full);
    background: color-mix(in srgb, var(--ec-sys-color-on-accent) 22%, transparent);
    font-variant-numeric: tabular-nums;
    font-weight: var(--ec-font-weight-bold);
  }

  .ec-ticket-summary__count[hidden] {
    display: none;
  }

  .ec-ticket-state {
    display: grid;
    gap: var(--ec-space-3);
    padding: var(--ec-space-5);
    border: var(--ec-border-width-thin) solid var(--ec-sys-color-outline-subtle);
    border-radius: var(--ec-radius-lg);
    background: var(--ec-sys-color-surface-muted);
  }

  .ec-ticket-state--warning {
    border-color: var(--ec-sys-color-warning);
    background: var(--ec-sys-color-warning-container);
    color: var(--ec-sys-color-on-warning-container);
  }

  .ec-ticket-state__title {
    color: inherit;
    font-size: var(--ec-type-title-md-size);
    line-height: var(--ec-type-title-md-line);
  }

  .ec-ticket-state__text {
    color: inherit;
    font-size: var(--ec-type-body-md-size);
    line-height: var(--ec-type-body-md-line);
  }

  .ec-ticket-dock {
    display: none;
  }

  @media (max-width: 767px) {
    .ec-ticket-panel__header,
    .ec-ticket-panel__body {
      padding: var(--ec-space-4);
    }

    .ec-ticket-option__purchase {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .ec-ticket-quantity {
      justify-self: stretch;
      grid-template-columns: var(--ec-touch-target-min) minmax(0, 1fr) var(--ec-touch-target-min);
    }

    .ec-ticket-summary > .ec-button--conversion {
      display: none;
    }

    .ec-ticket-dock {
      position: fixed;
      inset-inline: 0;
      inset-block-end: 0;
      z-index: var(--ec-z-sticky);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--ec-space-3);
      padding: var(--ec-space-3) var(--ec-page-gutter) max(var(--ec-space-3), env(safe-area-inset-bottom));
      border-block-start: var(--ec-border-width-thin) solid var(--ec-sys-color-divider);
      background: var(--ec-sys-color-surface);
      box-shadow: var(--ec-elevation-3);
    }

    .ec-ticket-dock__copy {
      display: grid;
      min-width: 0;
      gap: var(--ec-space-1);
    }

    .ec-ticket-dock__label {
      color: var(--ec-sys-color-on-surface-muted);
      font-size: var(--ec-type-label-md-size);
      font-weight: var(--ec-font-weight-semibold);
      line-height: var(--ec-type-label-md-line);
    }

    .ec-ticket-dock__value {
      overflow: hidden;
      color: var(--ec-sys-color-on-surface-strong);
      font-size: var(--ec-type-title-md-size);
      font-weight: var(--ec-font-weight-extrabold);
      font-variant-numeric: tabular-nums;
      line-height: var(--ec-type-title-md-line);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .ec-ticket-dock .ec-button {
      padding-inline: var(--ec-space-4);
    }
  }

  @media (forced-colors: active) {
    .ec-ticket-option[data-state="selected"],
    .ec-ticket-state,
    .ec-ticket-panel {
      border: var(--ec-border-width-strong) solid CanvasText;
    }
  }
}