/**
 * Canopy — Cart / Cotação Component
 * Agência Upgrade — https://agenciaupgrade.com.br
 *
 * BEM: .cnp-cart, .cnp-checkout-steps, .cnp-qty
 * Token-first · @layer · Logical properties · Container queries
 *
 * Base (.cnp-btn e variantes, .sr-only) definida em main.css — não redeclarar aqui.
 */

@layer components {

/* =============================================================================
   Checkout Steps — Stepper de etapas
   ============================================================================= */

.cnp-checkout-steps {
  background-color: var(--cnp-color-background-alt);
  border-block-end: 1px solid var(--cnp-color-border);
}

.cnp-checkout-steps__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  width: min(100% - var(--cnp-gutter) * 2, var(--cnp-container-max));
  margin-inline: auto;
  padding-block: var(--cnp-space-m);
  counter-reset: steps;
}

.cnp-checkout-steps__item {
  display: flex;
  align-items: center;
  gap: var(--cnp-space-xs);
  color: var(--cnp-color-text-muted);
  font-size: var(--cnp-font-size-sm);
  font-weight: var(--cnp-font-weight-medium);
  position: relative;
}

/* Separador entre etapas */
.cnp-checkout-steps__item + .cnp-checkout-steps__item::before {
  content: '';
  display: block;
  inline-size: clamp(3.2rem, 2rem + 4vi, 8rem);
  block-size: 1px;
  background-color: var(--cnp-color-border);
  margin-inline: var(--cnp-space-s);
  flex-shrink: 0;
}

.cnp-checkout-steps__item.is-active {
  color: var(--cnp-color-primary);
}

.cnp-checkout-steps__item.is-done {
  color: var(--cnp-color-success);
}

.cnp-checkout-steps__icon {
  font-size: 2rem;
}

.cnp-checkout-steps__label {
  display: none;
}

@container (min-width: 36rem) {
  .cnp-checkout-steps__label {
    display: inline;
  }
}

/* =============================================================================
   Cart — Estado vazio
   ============================================================================= */

.cnp-cart--empty {
  padding-block: var(--cnp-space-2xl);
}

.cnp-cart__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--cnp-space-m);
  max-inline-size: 48rem;
  margin-inline: auto;
}

.cnp-cart__empty-icon {
  font-size: 7.2rem;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
  color: var(--cnp-color-primary);
  opacity: 0.4;
}

.cnp-cart__empty-title {
  font-size: var(--cnp-font-size-xl);
  color: var(--cnp-color-text);
}

.cnp-cart__empty-desc {
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text-muted);
  margin-block-end: 0;
}

/* =============================================================================
   Cart — Estado com produtos
   ============================================================================= */

.cnp-cart--filled {
  padding-block: var(--cnp-space-xl) var(--cnp-space-2xl);
}

/* ── Header ── */

.cnp-cart__header {
  margin-block-end: var(--cnp-space-l);
}

.cnp-cart__title {
  font-size: var(--cnp-font-size-xl);
  margin-block-end: var(--cnp-space-3xs);
}

.cnp-cart__subtitle {
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text-muted);
  margin-block-end: 0;
}

/* ── Barra de progresso ── */

.cnp-cart__progress {
  margin-block-end: var(--cnp-space-l);
  padding: var(--cnp-space-m);
  background-color: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-m);
  border-inline-start: 3px solid var(--cnp-color-primary);
}

.cnp-cart__progress-text {
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text);
  margin-block-end: var(--cnp-space-xs);
  display: flex;
  align-items: center;
  gap: var(--cnp-space-2xs);
}

.cnp-cart__progress-text--ok {
  color: var(--cnp-color-success);
}

.cnp-cart__progress-bar {
  block-size: 8px;
  background-color: var(--cnp-color-border);
  border-radius: 99px;
  overflow: hidden;
}

.cnp-cart__progress-fill {
  block-size: 100%;
  background-color: var(--cnp-color-primary);
  border-radius: 99px;
  transition: inline-size 400ms ease-in-out;
  min-inline-size: 4px;
}

/* ── Layout: 2 colunas em tela grande ── */

.cnp-cart__layout {
  display: grid;
  gap: var(--cnp-space-l);
  grid-template-columns: 1fr;
  align-items: start;
  container-type: inline-size;
}

@container (min-width: 64rem) {
  .cnp-cart__layout {
    grid-template-columns: 1fr 34rem;
  }
}

/* ── Tabela de itens ── */

.cnp-cart__form {
  inline-size: 100%;
}

.cnp-cart__table {
  inline-size: 100%;
  border-collapse: collapse;
}

.cnp-cart__table-head {
  display: none;
}

@container (min-width: 48rem) {
  .cnp-cart__table-head {
    display: table-header-group;
  }

  .cnp-cart__table-head th {
    text-align: start;
    font-size: var(--cnp-font-size-sm);
    font-weight: var(--cnp-font-weight-medium);
    color: var(--cnp-color-text-muted);
    padding-block: var(--cnp-space-s);
    padding-inline: var(--cnp-space-xs);
    border-block-end: 2px solid var(--cnp-color-border);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cnp-cart__col--price,
  .cnp-cart__col--total {
    text-align: end;
  }

  .cnp-cart__col--qty {
    text-align: center;
  }

  .cnp-cart__col--remove,
  .cnp-cart__col--thumb {
    inline-size: 1px; /* shrink to content */
  }
}

/* Linha de produto */
.cnp-cart__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cnp-space-s);
  align-items: center;
  padding-block: var(--cnp-space-m);
  border-block-end: 1px solid var(--cnp-color-border);
  position: relative;
}

@container (min-width: 48rem) {
  .cnp-cart__row {
    display: table-row;
  }
}

/* Cells */
.cnp-cart__col {
  display: flex;
  align-items: center;
  gap: var(--cnp-space-xs);
}

/* Mobile: data-label como label — só quando não tem a versão desktop */
@container (max-width: 47.99rem) {
  .cnp-cart__col::before {
    content: attr(data-label);
    font-size: var(--cnp-font-size-xs);
    font-weight: var(--cnp-font-weight-medium);
    color: var(--cnp-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    min-inline-size: 8rem;
  }

  .cnp-cart__col--remove,
  .cnp-cart__col--thumb {
    display: none;
  }

  .cnp-cart__col--name {
    inline-size: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .cnp-cart__col--name::before {
    display: none;
  }
}

@container (min-width: 48rem) {
  .cnp-cart__col {
    display: table-cell;
    padding-block: var(--cnp-space-m);
    padding-inline: var(--cnp-space-xs);
    vertical-align: middle;
  }

  .cnp-cart__col--price,
  .cnp-cart__col--total {
    text-align: end;
  }

  .cnp-cart__col--qty {
    text-align: center;
  }
}

/* Botão remover */
.cnp-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.8rem;
  block-size: 2.8rem;
  border-radius: 50%;
  color: var(--cnp-color-text-muted);
  transition: color var(--cnp-transition-fast), background-color var(--cnp-transition-fast);
}

.cnp-cart__remove:hover {
  color: var(--cnp-color-danger);
  background-color: rgb(220 53 69 / 0.1);
}

/* Thumbnail */
.cnp-cart__thumb {
  inline-size: 7.2rem;
  block-size: 7.2rem;
  object-fit: cover;
  border-radius: var(--cnp-radius-s);
  border: 1px solid var(--cnp-color-border);
}

/* Nome do produto */
.cnp-cart__product-name {
  font-weight: var(--cnp-font-weight-medium);
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text);
  transition: color var(--cnp-transition-fast);
}

.cnp-cart__product-name:hover {
  color: var(--cnp-color-primary);
}

/* Variações */
.cnp-cart__variation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cnp-space-3xs) var(--cnp-space-xs);
  margin-block-start: var(--cnp-space-2xs);
  font-size: var(--cnp-font-size-xs);
  color: var(--cnp-color-text-muted);
}

.cnp-cart__variation-item {
  display: flex;
  gap: var(--cnp-space-3xs);
}

/* Preço e total */
.cnp-cart__price,
.cnp-cart__line-total {
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-medium);
}

.cnp-cart__line-total {
  color: var(--cnp-color-primary);
}

/* ── Ações da tabela ── */

.cnp-cart__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cnp-space-s);
  margin-block-start: var(--cnp-space-l);
  padding-block-start: var(--cnp-space-m);
  border-block-start: 1px solid var(--cnp-color-border);
}

/* =============================================================================
   Quantity Stepper — .cnp-qty
   ============================================================================= */

.cnp-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-s);
  overflow: hidden;
}

.cnp-qty__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.2rem;
  block-size: 3.6rem;
  color: var(--cnp-color-text);
  background-color: var(--cnp-color-background-alt);
  border: none;
  transition: background-color var(--cnp-transition-fast), color var(--cnp-transition-fast);
  flex-shrink: 0;
}

.cnp-qty__btn:hover {
  background-color: var(--cnp-color-primary);
  color: #fff;
}

.cnp-qty__input {
  inline-size: 4.8rem;
  block-size: 3.6rem;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--cnp-color-border);
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-medium);
  -moz-appearance: textfield;
}

.cnp-qty__input::-webkit-outer-spin-button,
.cnp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cnp-qty__input:focus {
  outline: 2px solid var(--cnp-color-primary);
  outline-offset: -2px;
}

/* =============================================================================
   Cart Summary — Sidebar de resumo
   ============================================================================= */

.cnp-cart__summary {
  position: sticky;
  inset-block-start: var(--cnp-space-m);
  margin-block-start: var(--cnp-space-m);
  align-self: start;
}

.cnp-cart__summary-inner {
  background-color: var(--cnp-color-background-alt);
  border: 1px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-m);
  padding: var(--cnp-space-l);
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-m);
}

.cnp-cart__summary-title {
  font-size: var(--cnp-font-size-lg);
  border-block-end: 1px solid var(--cnp-color-border);
  padding-block-end: var(--cnp-space-m);
}

.cnp-cart__summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-s);
}

.cnp-cart__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cnp-space-m);
  font-size: var(--cnp-font-size-base);
}

.cnp-cart__summary-row dt {
  color: var(--cnp-color-text-muted);
}

.cnp-cart__summary-row dd {
  font-weight: var(--cnp-font-weight-medium);
  text-align: end;
}

.cnp-cart__summary-row--discount dt,
.cnp-cart__summary-row--discount dd {
  color: var(--cnp-color-success);
}

.cnp-cart__summary-row--total {
  border-block-start: 2px solid var(--cnp-color-border);
  padding-block-start: var(--cnp-space-s);
  margin-block-start: var(--cnp-space-2xs);
}

.cnp-cart__summary-row--total dt {
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
  font-size: var(--cnp-font-size-base);
}

.cnp-cart__summary-row--total dd {
  font-size: var(--cnp-font-size-lg);
  color: var(--cnp-color-primary);
  font-weight: var(--cnp-font-weight-bold);
}

.cnp-cart__summary-note {
  display: flex;
  align-items: flex-start;
  gap: var(--cnp-space-2xs);
  font-size: var(--cnp-font-size-xs);
  color: var(--cnp-color-text-muted);
  margin-block-end: 0;
}

/* =============================================================================
   Header checkout — ajuste de label
   ============================================================================= */

.cnp-header-checkout__secure-label {
  font-size: var(--cnp-font-size-sm);
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-text-muted);
}

/* =============================================================================
   Checkout — Página de Dados do Cliente
   ============================================================================= */

/* ── Layout geral ── */

.cnp-checkout {
  padding-block: var(--cnp-space-xl) var(--cnp-space-2xl);
  container-type: inline-size;
}

.cnp-checkout--empty {
  padding-block: var(--cnp-space-2xl);
}

.cnp-checkout__layout {
  display: grid;
  gap: var(--cnp-space-xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@container (min-width: 64rem) {
  .cnp-checkout__layout {
    grid-template-columns: 1fr 38rem;
  }
}

/* ── Título ── */

.cnp-checkout__title {
  font-size: var(--cnp-font-size-xl);
  margin-block-end: var(--cnp-space-l);
}

/* ── Barra de progresso compacta (topo da página) ── */

.cnp-checkout__progress-bar-wrap {
  margin-block-end: var(--cnp-space-l);
  padding: var(--cnp-space-s) var(--cnp-space-m);
  background-color: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
  border-inline-start: 3px solid var(--cnp-color-primary);
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-xs);
}

.cnp-checkout__progress-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cnp-space-2xs);
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text);
  margin-block-end: 0;
}

.cnp-checkout__progress-text a {
  color: var(--cnp-color-primary);
  margin-inline-start: auto;
}

/* ── Fieldsets ── */

.cnp-checkout__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  margin-block-end: var(--cnp-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-l);
}

@container (min-width: 48rem) {
  .cnp-checkout__fieldset {
    gap: var(--cnp-space-m);
  }
}

.cnp-checkout__fieldset-legend {
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
  padding-block-end: var(--cnp-space-s);
  margin-block-end: var(--cnp-space-m);
  border-block-end: 1px solid var(--cnp-color-border);
  inline-size: 100%;
  display: block;
}

/* ── Grid 2 colunas dentro dos fieldsets ── */

.cnp-checkout__row {
  display: grid;
  gap: var(--cnp-space-m);
}

.cnp-checkout__row--2col {
  grid-template-columns: 1fr;
}

@container (min-width: 48rem) {
  .cnp-checkout__row--2col {
    grid-template-columns: 1fr 1fr;
  }
}

.cnp-checkout__row--cep-address {
  grid-template-columns: 1fr;
}

@container (min-width: 48rem) {
  .cnp-checkout__row--cep-address {
    grid-template-columns: 16rem 1fr;
  }
}

/* ── Tipo de Conta ── */

.cnp-checkout__account-type {
  display: flex;
  gap: var(--cnp-space-m);
  flex-wrap: wrap;
}

.cnp-checkout__account-option {
  display: flex;
  align-items: center;
  gap: var(--cnp-space-xs);
  cursor: pointer;
  padding: var(--cnp-space-s) var(--cnp-space-m);
  border: 2px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-s);
  transition: border-color var(--cnp-transition-fast), background-color var(--cnp-transition-fast);
  flex: 1;
  min-inline-size: 14rem;
}

.cnp-checkout__account-option:has(:checked) {
  border-color: var(--cnp-color-primary);
  background-color: var(--cnp-color-background-alt);
}

.cnp-checkout__account-radio {
  accent-color: var(--cnp-color-primary);
  inline-size: 1.6rem;
  block-size: 1.6rem;
  flex-shrink: 0;
}

.cnp-checkout__account-label {
  display: flex;
  align-items: center;
  gap: var(--cnp-space-2xs);
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-medium);
  pointer-events: none;
}

/* ── Form groups e inputs ── */

.cnp-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-2xs);
}

.cnp-form-group--cep {
  align-self: start;
}

.cnp-form-label {
  font-size: var(--cnp-font-size-sm);
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-text);
}

.cnp-form-required {
  color: var(--cnp-color-danger);
  text-decoration: none;
  margin-inline-start: var(--cnp-space-3xs);
}

.cnp-form-input {
  block-size: 4.4rem;
  padding-inline: var(--cnp-space-s);
  padding-block: 0;
  border: 1px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-s);
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text);
  background-color: var(--cnp-color-background);
  transition: border-color var(--cnp-transition-fast), box-shadow var(--cnp-transition-fast);
  inline-size: 100%;
}

.cnp-form-input:focus {
  outline: none;
  border-color: var(--cnp-color-primary);
  box-shadow: 0 0 0 3px var(--cnp-color-primary-tint);
}

.cnp-form-input:invalid:not(:placeholder-shown) {
  border-color: var(--cnp-color-danger);
}

.cnp-form-input--textarea {
  block-size: auto;
  padding-block: var(--cnp-space-s);
  resize: vertical;
  min-block-size: 8rem;
}

.cnp-form-select {
  block-size: 4.4rem;
  padding-inline: var(--cnp-space-s);
  padding-block: 0;
  border: 1px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-s);
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text);
  background-color: var(--cnp-color-background);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--cnp-space-s) center;
  padding-inline-end: 3.2rem;
  -webkit-appearance: none;
  appearance: none;
  inline-size: 100%;
  transition: border-color var(--cnp-transition-fast), box-shadow var(--cnp-transition-fast);
  cursor: pointer;
}

.cnp-form-select:focus {
  outline: none;
  border-color: var(--cnp-color-primary);
  box-shadow: 0 0 0 3px var(--cnp-color-primary-tint);
}

/* ── CEP: input + loader ── */

.cnp-form-cep-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.cnp-form-cep-loader {
  position: absolute;
  inset-inline-end: var(--cnp-space-s);
  color: var(--cnp-color-primary);
  animation: cnp-spin 800ms linear infinite;
  display: flex;
}

@keyframes cnp-spin {
  to { rotate: 1turn; }
}

.cnp-form-hint {
  font-size: var(--cnp-font-size-xs);
  color: var(--cnp-color-text-muted);
  margin-block-end: 0;
}

.cnp-form-hint__link {
  color: var(--cnp-color-primary);
  text-decoration: underline;
}

/* ── Footer do form ── */

.cnp-checkout__footer {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-m);
  padding-block-start: var(--cnp-space-m);
  border-block-start: 1px solid var(--cnp-color-border);
  margin-block-start: var(--cnp-space-m);
}

.cnp-checkout__privacy-note {
  font-size: var(--cnp-font-size-xs);
  color: var(--cnp-color-text-muted);
  margin-block-end: 0;
}

.cnp-checkout__privacy-note a {
  color: var(--cnp-color-primary);
  text-decoration: underline;
}

/* ── Bloco de info da cotação ── */

.cnp-checkout__quote-info {
  display: flex;
  gap: var(--cnp-space-s);
  padding: var(--cnp-space-m);
  background-color: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
  border-inline-start: 3px solid var(--cnp-color-primary);
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text);
}

.cnp-checkout__quote-info p {
  margin-block-end: 0;
}

/* ── Summary sidebar (checkout) ── */

.cnp-checkout__summary {
  position: sticky;
  inset-block-start: var(--cnp-space-m);
  margin-block-start: var(--cnp-space-m);
  align-self: start;
}

.cnp-checkout__summary-inner {
  background-color: var(--cnp-color-background-alt);
  border: 1px solid var(--cnp-color-border);
  border-radius: var(--cnp-radius-m);
  padding: var(--cnp-space-l);
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-m);
}

.cnp-checkout__summary-title {
  font-size: var(--cnp-font-size-lg);
  border-block-end: 1px solid var(--cnp-color-border);
  padding-block-end: var(--cnp-space-m);
  margin-block-end: 0;
}

/* ── Itens do resumo ── */

.cnp-checkout__summary-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-s);
  max-block-size: 36rem;
  overflow-y: auto;
}

.cnp-checkout__summary-item {
  display: flex;
  align-items: center;
  gap: var(--cnp-space-s);
  padding-block: var(--cnp-space-xs);
  border-block-end: 1px solid var(--cnp-color-border);
}

.cnp-checkout__summary-item-img-link {
  position: relative;
  flex-shrink: 0;
}

.cnp-checkout__summary-item-img {
  inline-size: 5.6rem;
  block-size: 5.6rem;
  object-fit: cover;
  border-radius: var(--cnp-radius-s);
  border: 1px solid var(--cnp-color-border);
  display: block;
}

.cnp-checkout__summary-item-qty {
  position: absolute;
  inset-block-start: -0.8rem;
  inset-inline-end: -0.8rem;
  background-color: var(--cnp-color-text);
  color: #fff;
  font-size: 1rem;
  font-weight: var(--cnp-font-weight-bold);
  inline-size: 1.8rem;
  block-size: 1.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.cnp-checkout__summary-item-info {
  flex: 1;
  min-inline-size: 0;
}

.cnp-checkout__summary-item-name {
  font-size: var(--cnp-font-size-sm);
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--cnp-transition-fast);
}

.cnp-checkout__summary-item-name:hover {
  color: var(--cnp-color-primary);
}

.cnp-checkout__summary-item-total {
  font-size: var(--cnp-font-size-sm);
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Barra de progresso compacta no resumo */
.cnp-cart__progress--compact {
  padding: var(--cnp-space-s) var(--cnp-space-m);
  margin-block-end: 0;
}

/* ══ Thank You / Order Received ══════════════════════════════════════════════ */

.cnp-thankyou {
  padding-block: var(--cnp-space-2xl);
}

.cnp-thankyou__inner {
  max-inline-size: 76rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-xl);
}

.cnp-thankyou__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cnp-space-s);
  text-align: center;
  padding-block: var(--cnp-space-l);
}

.cnp-thankyou__icon {
  font-size: 6.4rem;
  color: var(--cnp-color-primary);
}

.cnp-thankyou__title {
  font-size: var(--cnp-font-size-2xl);
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
  margin: 0;
}

.cnp-thankyou__subtitle {
  font-size: var(--cnp-font-size-base);
  color: var(--cnp-color-text-muted);
  max-inline-size: 52rem;
  margin: 0;
  line-height: 1.6;
}

/* Container do conteúdo WC */
.cnp-thankyou__wc-content {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-l);
}

/* ── WC: mensagem de confirmação (redundante com nosso hero — ocultamos) ── */
.cnp-thankyou__wc-content .woocommerce-thankyou-order-received {
  display: none;
}

/* ── WC: resumo do pedido (número, data, total, pagamento) ── */
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-order-overview {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--cnp-space-s);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-order-overview li {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-3xs);
  padding-block: var(--cnp-space-s);
  padding-inline: var(--cnp-space-m);
  background: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
  border-inline-start: 3px solid var(--cnp-color-primary);
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text-muted);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-order-overview li strong {
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
}

/* ── WC: tabela de itens do pedido ── */
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-order-details {
  background: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
  padding-block: var(--cnp-space-m);
  padding-inline: var(--cnp-space-m);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-order-details__title,
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-column__title {
  font-size: var(--cnp-font-size-base);
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
  margin-block: 0 var(--cnp-space-m);
  padding-block-end: var(--cnp-space-xs);
  border-block-end: 1px solid var(--cnp-color-border);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--cnp-font-size-sm);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table th {
  text-align: start;
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-text-muted);
  padding-block: var(--cnp-space-xs);
  padding-inline: var(--cnp-space-s);
  border-block-end: 2px solid var(--cnp-color-border);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table td {
  padding-block: var(--cnp-space-s);
  padding-inline: var(--cnp-space-s);
  border-block-end: 1px solid var(--cnp-color-border);
  vertical-align: middle;
  color: var(--cnp-color-text);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table td:last-child,
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table th:last-child {
  text-align: end;
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table tfoot td,
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table tfoot th {
  font-weight: var(--cnp-font-weight-medium);
  color: var(--cnp-color-text-muted);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table tfoot tr:last-child td,
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) table.shop_table tfoot tr:last-child th {
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
  font-size: var(--cnp-font-size-base);
}

/* ── WC: dados do cliente (billing) ── */
:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-customer-details {
  background: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
  padding-block: var(--cnp-space-m);
  padding-inline: var(--cnp-space-m);
}

:where(.cnp-thankyou__wc-content, .cnp-myaccount__wc-content) .woocommerce-customer-details address {
  font-style: normal;
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text);
  line-height: 1.7;
}

/* ── WC: parágrafo de status do pedido (view-order) ── */
.cnp-myaccount__wc-content > .woocommerce > p:first-child {
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text-muted);
  margin-block-end: var(--cnp-space-l);
  padding-block: var(--cnp-space-s);
  padding-inline: var(--cnp-space-m);
  background: var(--cnp-color-background-alt);
  border-radius: var(--cnp-radius-s);
}

.cnp-myaccount__wc-content mark {
  background: transparent;
  font-weight: var(--cnp-font-weight-bold);
  color: var(--cnp-color-text);
}

.cnp-myaccount__wc-content mark.order-status {
  color: var(--cnp-color-primary);
}

/* ══ View Order — Detalhes do Pedido em Minha Conta ════════════════════════ */

.cnp-myaccount__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--cnp-space-2xs);
  font-size: var(--cnp-font-size-sm);
  color: var(--cnp-color-text-muted);
  text-decoration: none;
  margin-block-end: var(--cnp-space-xs);
  transition: color 0.15s;
}

.cnp-myaccount__back-link:hover {
  color: var(--cnp-color-primary);
}

.cnp-myaccount__view-order-section > .cnp-myaccount__section-title {
  margin-block: 0 var(--cnp-space-l);
}

.cnp-myaccount__wc-content {
  display: flex;
  flex-direction: column;
  gap: var(--cnp-space-l);
}

} /* end @layer components */

@layer utilities {

  @media (prefers-reduced-motion: reduce) {
    .cnp-cart__progress-fill,
    .cnp-form-cep-loader {
      transition: none;
      animation: none;
    }
  }

}