/*
 * Terra di Fiori — carrinho e checkout em blocos.
 * O WooCommerce Blocks usa classes próprias (wc-block-*), que não têm nada
 * a ver com o checkout clássico. Esta folha trata só delas.
 */

/* ---------- moldura ---------- */

.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header { text-align: center; margin-bottom: 8px; }

.woocommerce-checkout .entry-title,
.woocommerce-cart .entry-title {
  font-family: var(--tdf-serif);
  font-weight: 300;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--tdf-tinta);
  margin: 0;
}

.wc-block-checkout,
.wc-block-cart { max-width: 1280px; margin-inline: auto; }

/* O layout do Woo já reserva as larguras exatas: um gap aqui soma e
   estoura o container, empurrando o resumo para baixo do formulário. */
.wc-block-components-sidebar-layout { gap: 0; }
.wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 48px; }
.wc-block-components-sidebar-layout .wc-block-components-sidebar { padding-left: 8px; }

@media (max-width: 1000px) {
  .wc-block-components-sidebar-layout .wc-block-components-main { padding-right: 0; }
  .wc-block-components-sidebar-layout .wc-block-components-sidebar { padding-left: 0; }
}

/* ---------- títulos das etapas ---------- */

.wc-block-components-title,
.wc-block-components-checkout-step__title,
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-title {
  font-family: var(--tdf-serif) !important;
  font-weight: 300 !important;
  font-size: 1.5rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em;
  color: var(--tdf-tinta) !important;
  text-transform: none !important;
}

.wc-block-components-checkout-step {
  border: none;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--tdf-linha);
}

.wc-block-components-checkout-step:last-of-type { border-bottom: none; }

.wc-block-components-checkout-step__description {
  font-family: var(--tdf-serif);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tdf-texto);
}

.wc-block-components-checkout-step__heading { margin-bottom: 14px; }

/* o número da etapa vira um marcador discreto em dourado */
.wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
  color: var(--tdf-ouro) !important;
  font-family: var(--tdf-serif);
}

.wc-block-checkout__login-prompt,
.wc-block-components-checkout-step__heading-content a {
  font-family: var(--tdf-sans);
  font-size: 0.8125rem;
  color: var(--tdf-verde);
  text-underline-offset: 3px;
}

/* ---------- campos ---------- */

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-blocks-components-select__container,
.wc-block-components-combobox-control input {
  border: 1px solid var(--tdf-linha-forte) !important;
  border-radius: 0 !important;
  background: var(--tdf-branco) !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.9375rem !important;
  color: var(--tdf-tinta) !important;
  min-height: 54px;
  box-shadow: none !important;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus,
.wc-blocks-components-select__container:focus-within {
  border-color: var(--tdf-verde) !important;
  outline: none !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label,
.wc-block-components-combobox-control label {
  font-family: var(--tdf-sans) !important;
  font-size: 0.875rem !important;
  color: var(--tdf-apagado) !important;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-combobox-control.is-active label { font-size: 0.6875rem !important; }

.wc-block-components-checkbox__input[type="checkbox"] {
  border-radius: 0 !important;
  border-color: var(--tdf-linha-forte) !important;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
  background: var(--tdf-verde) !important;
  border-color: var(--tdf-verde) !important;
}

.wc-block-components-checkbox__label,
.wc-block-components-radio-control__label {
  font-family: var(--tdf-sans);
  font-size: 0.9375rem;
  color: var(--tdf-texto);
}

/* ---------- entrega e pagamento ---------- */

.wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--tdf-linha) !important;
  border-radius: 0 !important;
  background: var(--tdf-branco);
  margin-bottom: 12px;
  padding: 0 !important;
}

/* O radio é posicionado em absoluto e acompanha o padding: se o padding
   diminui, ele fica por cima do texto. Fixamos os dois. */
.wc-block-components-radio-control__option {
  position: relative;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  margin: 0;
  padding: 18px 20px 18px 52px !important;
}

.wc-block-components-radio-control:not(.wc-block-components-radio-control-accordion)
  .wc-block-components-radio-control__option {
  border: 1px solid var(--tdf-linha) !important;
  background: var(--tdf-branco);
  margin-bottom: 12px;
}

.wc-block-components-radio-control__input,
.wc-block-components-radio-control__option input[type="radio"] {
  left: 20px !important;
  top: 20px !important;
  margin: 0 !important;
}

.wc-block-components-radio-control__label-group,
.wc-block-components-radio-control__label { padding-left: 0 !important; }

.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--tdf-verde) !important;
  box-shadow: inset 3px 0 0 var(--tdf-ouro);
}

.wc-block-components-radio-control__input:checked {
  border-color: var(--tdf-verde) !important;
  background: var(--tdf-verde) !important;
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
  font-family: var(--tdf-serif);
  font-size: 0.9375rem;
  color: var(--tdf-apagado);
}

/* ---------- resumo do pedido ---------- */

.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block {
  background: var(--tdf-branco);
  border: none;
  border-top: 3px solid var(--tdf-ouro);
  border-radius: 0;
  padding: 28px 26px;
}

.wc-block-components-order-summary-item__image img {
  border-radius: 0;
  background: var(--tdf-papel);
}

.wc-block-components-product-name {
  font-family: var(--tdf-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.35;
  color: var(--tdf-tinta) !important;
  text-decoration: none;
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
  font-family: var(--tdf-serif);
  font-size: 0.875rem;
  color: var(--tdf-apagado);
}

.wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
  font-family: var(--tdf-serif) !important;
  color: var(--tdf-tinta) !important;
}

.wc-block-components-totals-item__label {
  font-family: var(--tdf-sans) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.06em;
  color: var(--tdf-texto) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-size: 0.75rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdf-apagado) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 1.75rem !important;
  font-weight: 400 !important;
}

.wc-block-components-totals-wrapper { border-top-color: var(--tdf-linha) !important; }

/* ---------- botões ---------- */

.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
  background: var(--tdf-tinta) !important;
  color: var(--tdf-branco) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  min-height: 58px;
  box-shadow: none !important;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-checkout-place-order-button:hover { background: var(--tdf-verde) !important; }

.wc-block-components-button.is-link {
  color: var(--tdf-verde);
  font-family: var(--tdf-sans);
  font-size: 0.875rem;
}

/* ---------- avisos ---------- */

.wc-block-components-notice-banner {
  border-radius: 0 !important;
  border-left: none !important;
  border-top: 3px solid var(--tdf-ouro) !important;
  background: var(--tdf-branco) !important;
  font-family: var(--tdf-sans);
}

.wc-block-components-notice-banner.is-error { border-top-color: var(--tdf-oxblood) !important; }
.wc-block-components-notice-banner.is-success { border-top-color: var(--tdf-verde) !important; }

/* ---------- carrinho em blocos ---------- */

.wc-block-cart-items__header {
  font-family: var(--tdf-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdf-apagado);
  border-bottom-color: var(--tdf-linha);
}

.wc-block-cart-item__image img { border-radius: 0; background: var(--tdf-papel); }
.wc-block-cart-items__row { border-bottom: 1px solid var(--tdf-linha); }

.wc-block-components-quantity-selector {
  border: 1px solid var(--tdf-linha-forte) !important;
  border-radius: 0 !important;
}

.wc-block-components-quantity-selector__button { color: var(--tdf-tinta) !important; }
.wc-block-components-quantity-selector__input { font-family: var(--tdf-sans) !important; }

/* barra de frete grátis do carrinho, se o plugin exibir */
.wc-block-components-shipping-rates-control__package { border: none; }

/* textos auxiliares no tom da marca, não no azul padrão */
.wc-block-components-checkout-step__description,
.wc-block-components-address-form__address_2-toggle,
.wc-block-checkout__guest-checkout-notice,
.wc-block-components-validation-error {
  font-family: var(--tdf-sans);
}

.wc-block-components-address-form__address_2-toggle,
.wc-block-components-panel__button {
  color: var(--tdf-verde) !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.875rem !important;
}

.wc-block-components-validation-error p { color: var(--tdf-oxblood) !important; }

.wc-block-checkout__add-note,
.wc-block-components-checkout-step__heading-content { color: var(--tdf-apagado); }

/* ---------- acabamento do resumo ---------- */

/* as divisórias internas seguem a linha da marca */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-totals-block,
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel {
  border-color: var(--tdf-linha) !important;
  border-width: 1px 0 0 0 !important;
  border-style: solid !important;
}

.wc-block-components-sidebar .wc-block-components-panel__button {
  border: none !important;
  color: var(--tdf-tinta) !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.02em;
  min-height: 0;
  background: none !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* ---------- barra de frete grátis ----------
   Estrutura real do plugin:
     .wc-better-shipping-progress-bar   -> só um invólucro com padding
       > div (SEM CLASSE)               -> o trilho, com estilo embutido
         > .wc-better-shipping-progress -> o preenchimento (neto, não filho)
         > .wc-better-shipping-progress-inner-text
   Tudo vem com estilo embutido, então precisa de !important. */

.wc-better-shipping-progress-bar {
  background: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
}

/* o trilho */
.wc-better-shipping-progress-bar > div {
  background: var(--tdf-linha) !important;
  border-radius: 0 !important;
  height: 26px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* o preenchimento */
.wc-better-shipping-progress-bar .wc-better-shipping-progress {
  background: var(--tdf-ouro) !important;
  border-radius: 0 !important;
  height: 100% !important;
}

/* o texto dentro da faixa, centralizado */
.wc-better-shipping-progress-bar .wc-better-shipping-progress-inner-text {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--tdf-tinta) !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

/* a frase de fora repetia o mesmo que a barra já diz */
.wc-better-shipping-progress-text,
p.wc-better-shipping-progress-text { display: none !important; }

/* ---------- selos ---------- */

.wc-block-components-sale-badge,
.wc-block-components-product-badge {
  background: var(--tdf-verde) !important;
  color: var(--tdf-branco) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px !important;
}

/* quantidade sobre a miniatura */
.wc-block-components-order-summary-item__quantity {
  background: var(--tdf-tinta) !important;
  color: var(--tdf-branco) !important;
  border: none !important;
  border-radius: 50% !important;
  font-family: var(--tdf-sans) !important;
  font-size: 0.6875rem !important;
}

.wc-block-components-order-summary-item__description del {
  color: var(--tdf-apagado);
  opacity: 1;
}

/* barra completa: verde e texto claro */
.wc-better-shipping-progress-bar .wc-better-shipping-progress[style*="width: 100%"] {
  background: var(--tdf-verde) !important;
}

.wc-better-shipping-progress-bar:has(.wc-better-shipping-progress[style*="width: 100%"])
  .wc-better-shipping-progress-inner-text {
  color: var(--tdf-branco) !important;
}

/* ---------- endereço da retirada na loja ---------- */

.tdf-retirada {
  margin-top: 18px;
  padding: 20px 22px;
  border: 1px solid var(--tdf-linha);
  border-left: 2px solid var(--tdf-verde);
  background: var(--tdf-papel);
}

.tdf-retirada-tit {
  font-family: var(--tdf-sans);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tdf-apagado);
  margin: 0 0 10px;
}

.tdf-retirada address {
  font-family: var(--tdf-serif);
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tdf-tinta);
  margin: 0;
}

.tdf-retirada-nota {
  font-family: var(--tdf-sans);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--tdf-texto);
  margin: 12px 0 0;
}

.tdf-retirada-mapa {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--tdf-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--tdf-verde);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tdf-retirada-mapa:hover { color: var(--tdf-tinta); }

/* ---------------------------------------------------------------------------
   Checkout no celular
   ---------------------------------------------------------------------------
   Dois defeitos apareciam abaixo de 700px:

   1. O bloco do checkout carrega margem negativa de 20px nas laterais (truque
      do WooCommerce para ir de ponta a ponta), mas não cresce junto: ficava
      com 350px encostado na esquerda e 40px de vazio na direita.

   2. O item do resumo é um flex de três colunas e nenhuma delas declara como
      se comporta no aperto. O preço não encolhia, a coluna do nome sobrava
      com 34px e o texto descia quebrando letra a letra — 271px de altura
      para um nome de produto.
--------------------------------------------------------------------------- */

@media (max-width: 700px) {

  /* O !important não é preguiça: a regra que impõe a margem negativa é do
     Astra, vem em <style> embutido no <head> (depois desta folha) e usa
     .ast-separate-container .entry-content[data-ast-blocks-layout] >
     .alignfull — especificidade que nenhum seletor razoável meu alcança. */
  .wp-block-woocommerce-checkout,
  .wp-block-woocommerce-cart {
    margin-inline: 0 !important;
    width: auto;
  }

  .wp-block-woocommerce-checkout-order-summary-block,
  .wp-block-woocommerce-cart-order-summary-block { padding: 22px 18px; }

  /* a estrutura do item, dita por extenso */
  .wc-block-components-order-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }

  .wc-block-components-order-summary-item__image {
    flex: 0 0 56px;
    width: 56px;
  }

  .wc-block-components-order-summary-item__image img { width: 56px; height: auto; }

  /* min-width: 0 é o que permite encolher: sem isso o flex respeita a
     largura mínima do conteúdo e empurra a coluna para fora */
  /* __description é flex em LINHA por padrão: nome, preço unitário e
     metadados brigavam pela mesma faixa e sobravam 14px para cada um.
     Em coluna, cada um ocupa a largura toda. */
  .wc-block-components-order-summary-item__description {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .wc-block-components-order-summary-item__total-price {
    flex: 0 1 auto;
    max-width: 34%;
    margin-left: auto;
    text-align: right;
  }

  /* O selo de economia fica ao lado do preço num flex em linha e levava
     146px dos 280 da linha. Empilhado, o preço volta a caber em uma linha
     e sobra espaço para o nome do produto. */
  .wc-block-cart-item__total-price-and-sale-badge-wrapper {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }

  .wc-block-components-order-summary-item__total-price
    .wc-block-components-formatted-money-amount { white-space: nowrap; }

  /* O selo de economia é nowrap e mede 146px: numa coluna de 107px ele
     vazava para a esquerda e deitava por cima do nome do produto. Deixar
     quebrar em duas linhas resolve sem encolher a fonte a ponto de sumir. */
  .wc-block-components-order-summary-item__total-price .wc-block-components-sale-badge,
  .wc-block-components-order-summary-item__total-price .wc-block-components-product-badge {
    white-space: normal !important;
    max-width: 100%;
    text-align: right;
    line-height: 1.35;
    padding: 4px 8px !important;
  }

  .wc-block-components-product-name {
    display: block;
    font-size: 0.8125rem !important;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .wc-block-components-product-metadata,
  .wc-block-components-product-metadata__description {
    font-size: 0.8125rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  /* a descrição longa do combo não precisa aparecer inteira no resumo:
     duas linhas bastam para reconhecer o item */
  .wc-block-components-product-metadata__description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Três recuos herdados comiam a linha inteira num aparelho de 390px:
     24px+12px de padding na coluna do nome, um display:table que encolhe
     a linha ao conteúdo, e mais 16px de cada lado no contêiner do resumo. */
  /* A folha do WooCommerce entra DEPOIS desta no <head> e usa seletores de
     duas e três classes nestes mesmos elementos, então empate de
     especificidade sempre perde. Subir a contagem de classes aqui daria um
     seletor de quatro níveis ilegível; nestes três casos o !important diz
     melhor a intenção: no celular estes recuos não servem.

     Os valores que estão sendo vencidos:
       __description  padding: 4px 12px 12px 24px
       __content      display: table
       order-summary  padding: 0 16px                                     */
  .wc-block-components-order-summary-item__description {
    padding: 0 0 10px !important;
  }

  .wc-block-components-order-summary__content {
    display: block !important;
    width: 100% !important;
  }

  .wc-block-components-order-summary { padding-inline: 0 !important; }

  /* respiro das colunas do layout com barra lateral */
  .wc-block-components-sidebar-layout .wc-block-components-main,
  .wc-block-components-sidebar-layout .wc-block-components-sidebar {
    padding-inline: 0;
  }
}