/* ==========================================================================
   Villani Linhas — loja
   Catálogo, ficha de produto, carrinho, checkout e área do cliente.
   ========================================================================== */

/* ==========================================================================
   Cabeçalho de arquivo e catálogo
   ========================================================================== */

.woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--vl-ink-30);
  margin-bottom: var(--e-5);
}
.woocommerce-breadcrumb a { color: var(--vl-ink-50); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--vl-terra); }

/* Capa da categoria: a imagem do termo vira faixa, em vez de um título solto
   sobre fundo vazio. */
.vl-capa-categoria {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(200px, 26vw, 330px);
  margin-bottom: clamp(28px, 4vw, 52px);
  padding: clamp(24px, 4vw, 52px);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--vl-areia);
}
.vl-capa-categoria img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.vl-capa-categoria::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(27,26,24,.62) 0%, rgba(27,26,24,.22) 58%, rgba(27,26,24,0) 100%);
}
.vl-capa-categoria__texto { position: relative; z-index: 1; max-width: 60ch; color: #fff; }
.vl-capa-categoria__texto h1 { color: #fff; font-size: clamp(30px, 4vw, 52px); margin: 0 0 var(--e-2); line-height: 1.1; }
.vl-capa-categoria__texto p { color: rgba(255,255,255,.9); margin: 0; font-size: 16px; }

/* Barra de ordenação */
.vl-barra-catalogo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--vl-linha);
}
.woocommerce .woocommerce-result-count {
  margin: 0;
  font-size: 14px;
  color: var(--vl-ink-50);
}
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select {
  min-height: 44px;
  width: auto;
  padding: 0 40px 0 18px;
  border-radius: var(--r-pill);
  background-color: var(--vl-areia);
  border-color: transparent;
  font-size: 14px;
  cursor: pointer;
}

/* Paginação */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--e-2);
  border: 0;
  margin-top: var(--e-8);
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--vl-ink-50);
  font-size: 14px;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--vl-areia); color: var(--vl-ink); }
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--vl-ink);
  color: #fff;
}

/* ==========================================================================
   Ficha de produto
   ========================================================================== */

.woocommerce div.product { margin-top: var(--e-5); }

.woocommerce div.product div.images { margin-bottom: var(--e-6); }
.woocommerce div.product div.images img {
  border-radius: var(--r-2xl);
  background: var(--vl-areia);
}
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border-radius: var(--r-sm);
  opacity: .55;
  transition: opacity var(--t-rapida), transform var(--t-rapida);
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs .flex-active {
  opacity: 1;
  transform: translateY(-2px);
}

/* Lupa do zoom */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  top: var(--e-4); right: var(--e-4);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.92);
  box-shadow: var(--sombra-suave);
  font-size: 0;
}

.woocommerce div.product .product_title {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0 0 var(--e-3);
  letter-spacing: -.015em;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  font-size: 27px;
  font-weight: 600;
  color: var(--vl-ink);
  margin: 0 0 var(--e-4);
}
.woocommerce div.product p.price del { font-size: 18px; font-weight: 400; color: var(--vl-ink-30); opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--vl-terra); }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 16px;
  line-height: 1.65;
  color: var(--vl-ink-50);
  margin-bottom: var(--e-5);
  max-width: 52ch;
}

/* Seleção de variação */
.woocommerce div.product form.cart .variations {
  margin-bottom: var(--e-5);
  border: 0;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  display: block;
  padding: 0 0 var(--e-2);
  border: 0;
}
.woocommerce div.product form.cart .variations label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vl-ink-50);
}
.woocommerce div.product form.cart .variations select {
  min-height: 52px;
  border-radius: var(--r-sm);
  margin-bottom: var(--e-4);
}
.woocommerce div.product form.cart .reset_variations {
  font-size: 13px;
  color: var(--vl-ink-30);
}

/* Quantidade + comprar */
.woocommerce div.product form.cart {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  overflow: hidden;
  height: 52px;
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 68px;
  min-height: 52px;
  border: 0;
  text-align: center;
  font-weight: 500;
  background: transparent;
}
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-width: 220px; }

.woocommerce div.product form.cart .vl-linha-compra {
  display: flex;
  gap: var(--e-3);
  align-items: stretch;
  flex-wrap: wrap;
}

/* Ficha técnica em lista, não em tabela */
.woocommerce div.product .product_meta {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: 1px solid var(--vl-linha);
  font-size: 13px;
  color: var(--vl-ink-50);
}
.woocommerce div.product .product_meta a { color: var(--vl-ink); }

/* Vantagens ao lado do botão */
.vl-produto-vantagens {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-lg);
  background: var(--vl-areia);
}
.vl-produto-vantagens div {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: 14px;
  color: var(--vl-ink-70);
}
.vl-produto-vantagens svg { color: var(--vl-terra); flex: 0 0 auto; }

/* Abas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--e-2);
  padding: 0;
  margin: var(--e-8) 0 var(--e-5);
  border-bottom: 1px solid var(--vl-linha);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--e-3) var(--e-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--vl-ink-50);
  border-bottom: 2px solid transparent;
  transition: color var(--t-rapida), border-color var(--t-rapida);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--vl-ink);
  border-bottom-color: var(--vl-terra);
}
.woocommerce div.product .woocommerce-tabs .panel {
  max-width: 78ch;
  font-size: 16px;
  line-height: 1.7;
}
.woocommerce div.product .woocommerce-tabs .panel h2 { display: none; }
.woocommerce div.product .woocommerce-tabs .panel h3 {
  font-size: 20px;
  margin: var(--e-6) 0 var(--e-2);
}
.woocommerce div.product .woocommerce-tabs .panel h3:first-child { margin-top: 0; }

/* Relacionados */
.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin: var(--e-9) 0 var(--e-5);
}

/* ==========================================================================
   Carrinho
   Em vez da tabela do WooCommerce, uma lista de cartões: no celular a tabela
   vira um amontoado de células, e é lá que a maioria compra.
   ========================================================================== */

.woocommerce-cart .woocommerce { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 992px) {
  .woocommerce-cart .woocommerce {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr);
    align-items: start;
  }
  .woocommerce-cart form.woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 120px; }
}

.woocommerce-cart table.shop_table {
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
}
.woocommerce-cart table.shop_table thead { display: none; }
.woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: var(--e-4);
  align-items: center;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--vl-linha);
}
.woocommerce-cart table.shop_table td { border: 0; padding: 0; }
.woocommerce-cart table.shop_table td.product-remove { grid-column: 3; grid-row: 1; justify-self: end; }
.woocommerce-cart table.shop_table td.product-thumbnail { grid-column: 1; grid-row: 1; display: block; }
.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 104px; height: 124px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--vl-areia);
}
.woocommerce-cart table.shop_table td.product-name { grid-column: 2; grid-row: 1; }
.woocommerce-cart table.shop_table td.product-name a { font-size: 16px; font-weight: 500; color: var(--vl-ink); text-decoration: none; }
.woocommerce-cart table.shop_table td.product-price { display: none; }
.woocommerce-cart table.shop_table td.product-quantity { grid-column: 2; grid-row: 2; }
.woocommerce-cart table.shop_table td.product-subtotal {
  grid-column: 3; grid-row: 2;
  justify-self: end;
  font-size: 17px;
  font-weight: 600;
  color: var(--vl-ink);
}
.woocommerce-cart table.shop_table .quantity {
  display: inline-flex;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--vl-branco);
}
.woocommerce-cart table.shop_table .quantity input.qty {
  width: 64px; min-height: 44px;
  border: 0; text-align: center; background: transparent;
}
.woocommerce-cart a.remove {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--vl-areia);
  color: var(--vl-ink-50) !important;
  font-size: 18px;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.woocommerce-cart a.remove:hover { background: var(--vl-erro); color: #fff !important; }

.woocommerce-cart .cart_totals {
  background: var(--vl-branco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-card);
  padding: clamp(20px, 2.4vw, 30px);
}
.woocommerce-cart .cart_totals h2 { font-size: 21px; margin: 0 0 var(--e-4); }
.woocommerce-cart .cart_totals table { border: 0; margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  border: 0;
  padding: var(--e-3) 0;
  font-size: 15px;
}
.woocommerce-cart .cart_totals table tr { border-bottom: 1px solid var(--vl-linha); }
.woocommerce-cart .cart_totals .order-total td { font-size: 21px; font-weight: 600; color: var(--vl-ink); }
.woocommerce-cart .wc-proceed-to-checkout { padding: var(--e-4) 0 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { width: 100%; }

.woocommerce .cart-empty,
.woocommerce .return-to-shop { text-align: center; }

/* Cupom */
.woocommerce-cart .coupon {
  display: flex;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}
.woocommerce-cart .coupon input.input-text { flex: 1; min-width: 0; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.woocommerce-checkout .wc-block-checkout__form,
.woocommerce-checkout .woocommerce-checkout { font-size: 15px; }

.wc-block-components-checkout-step {
  border-radius: var(--r-lg);
  padding: var(--e-5) 0;
}
.wc-block-components-checkout-step__title {
  font-family: var(--fonte-titulo) !important;
  font-size: 23px !important;
  color: var(--vl-ink);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  background: var(--vl-branco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-suave);
  padding: var(--e-5);
  border: 0;
}
.wc-block-components-order-summary-item__image img {
  border-radius: var(--r-sm);
  background: var(--vl-areia);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 23px;
  font-weight: 600;
  color: var(--vl-ink);
}

.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
  border-radius: var(--r-md);
}
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border: 1px solid var(--vl-linha) !important;
  border-radius: var(--r-md) !important;
  margin-bottom: var(--e-2);
  padding: var(--e-4) !important;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}

.wc-block-components-checkout-place-order-button { width: 100%; }

/* Erros */
.wc-block-components-validation-error,
.woocommerce-error {
  border-radius: var(--r-md);
  color: var(--vl-erro);
  font-size: 14px;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-radius: var(--r-md);
  border-top: 0;
  padding: var(--e-4) var(--e-5);
  background: var(--vl-areia);
  color: var(--vl-ink);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-message { background: rgba(63,107,83,.1); }
.woocommerce-error { background: rgba(168,64,47,.08); }

/* ==========================================================================
   Minha conta
   ========================================================================== */

/* O layout de duas colunas é do Kadence, com o lado do menu vindo de
   `woo_account_navigation_layout`. Impor um grid próprio aqui jogava o menu
   para a coluna da direita e espremia o conteúdo em 268px. Ficou só a
   aparência. */

.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--vl-branco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-suave);
  padding: var(--e-4);
  position: sticky;
  top: 120px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--vl-ink-70);
  text-decoration: none;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--vl-areia); color: var(--vl-ink); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--vl-ink);
  color: #fff;
}

/* Largura e float são do Kadence (30/70). Zerá-los aqui derrubava o
   conteúdo para uma coluna de 339px ao lado de um menu de 382px. */
.woocommerce-account .woocommerce-MyAccount-content {
  background: var(--vl-branco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-suave);
  padding: clamp(22px, 3vw, 38px);
}

/* Pedidos em cartão, não em tabela administrativa */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-orders-table tbody,
.woocommerce-account .woocommerce-orders-table tr { border: 0; }
.woocommerce-account .woocommerce-orders-table thead { display: none; }

/* Cada pedido vira um cartão. A ordem das células no HTML — número, data,
   situação, envio, total, ações — cai sozinha em três linhas de duas colunas. */
.woocommerce-account .woocommerce-orders-table tbody tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-2) var(--e-4);
  align-items: center;
  padding: var(--e-5);
  margin-bottom: var(--e-4);
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-lg);
  transition: box-shadow var(--t-normal), border-color var(--t-normal);
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover {
  border-color: transparent;
  box-shadow: var(--sombra-card);
}

/* A borda de célula vem do tema com especificidade maior que um `td` solto. */
.woocommerce-account .woocommerce-orders-table tbody tr td,
.woocommerce-account .woocommerce-orders-table tbody tr th {
  border: 0;
  padding: 0;
  background: none;
}
.woocommerce-account .woocommerce-orders-table td::before {
  color: var(--vl-ink-30);
  font-size: 12px;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a {
  font-size: 17px;
  font-weight: 600;
  color: var(--vl-ink);
  text-decoration: none;
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-number a:hover { color: var(--vl-terra); }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date,
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { justify-self: end; }
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-date { font-size: 14px; color: var(--vl-ink-50); }

/* Situação como pastilha, para bater o olho e entender. */
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
  justify-self: start;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: var(--vl-areia);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vl-ink-70);
}
.woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total {
  font-size: 15px;
  color: var(--vl-ink-70);
}

/* Login e cadastro em duas colunas, com a marca de um lado */
.vl-login {
  display: grid;
  gap: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sombra-card);
  background: var(--vl-branco);
}
@media (min-width: 900px) {
  .vl-login { grid-template-columns: 0.9fr 1.1fr; min-height: 560px; }
}
.vl-login__arte {
  position: relative;
  display: none;
  padding: var(--e-8);
  color: #fff;
}
@media (min-width: 900px) { .vl-login__arte { display: flex; align-items: flex-end; } }
.vl-login__arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vl-login__arte::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,26,24,.15) 0%, rgba(27,26,24,.72) 100%);
}
.vl-login__arte-texto { position: relative; z-index: 1; }
.vl-login__arte-texto h2 { color: #fff; font-size: 31px; margin: 0 0 var(--e-2); }
.vl-login__arte-texto p { color: rgba(255,255,255,.88); margin: 0; font-size: 15px; }
.vl-login__forms { padding: clamp(24px, 4vw, 56px); }

.woocommerce-account:not(.logged-in) .woocommerce > .u-columns { display: block; }
.woocommerce form.login, .woocommerce form.register {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Celular
   ========================================================================== */

@media (max-width: 767px) {
  .woocommerce ul.products,
  .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }

  .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
  .woocommerce div.product form.cart .vl-linha-compra > * { flex: 1 1 100%; }

  .woocommerce-cart table.shop_table tbody tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 84px 1fr;
  }
  .woocommerce-cart table.shop_table td.product-thumbnail img { width: 84px; height: 100px; }
  .woocommerce-cart table.shop_table td.product-remove { grid-column: 2; justify-self: end; }
  .woocommerce-cart table.shop_table td.product-subtotal { grid-column: 2; justify-self: end; }

  .woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex; gap: var(--e-2); overflow-x: auto; padding-bottom: var(--e-2);
  }
  .woocommerce-account .woocommerce-MyAccount-navigation li a { white-space: nowrap; }
}

/* ==========================================================================
   Trilha e pastilhas da capa
   ========================================================================== */

/* A trilha é a do Kadence: ela já sai em toda página e carrega os dados
   estruturados. Tínhamos uma segunda, própria, aparecendo logo abaixo — duas
   trilhas iguais, uma sem schema. Ficou a do tema, com a roupa da loja. */
.kadence-breadcrumbs {
  margin-bottom: var(--e-4);
  font-size: 13px;
  color: var(--vl-ink-50);
}
.kadence-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.kadence-breadcrumbs a:hover { color: var(--vl-terra); text-decoration: underline; }
.kadence-breadcrumbs .kadence-bread-sep { opacity: .5; padding: 0 4px; }
.kadence-breadcrumbs .kadence-bread-current { color: var(--vl-ink); }

.vl-capa-categoria--sem-foto { background: var(--vl-areia); }
.vl-capa-categoria--sem-foto::after { display: none; }
.vl-capa-categoria--sem-foto .vl-capa-categoria__texto,
.vl-capa-categoria--sem-foto .vl-capa-categoria__texto h1 { color: var(--vl-ink); }
.vl-capa-categoria--sem-foto .vl-capa-categoria__texto p { color: var(--vl-ink-50); }

.vl-pastilhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
}
.vl-pastilha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--vl-areia);
  color: var(--vl-ink-70);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.vl-pastilha:hover { background: var(--vl-terra-suave); color: var(--vl-terra-forte); }
.vl-pastilha.is-atual { background: var(--vl-ink); color: #fff; }
/* O contador estava em --vl-ink-30: 2,6:1 sobre a areia, abaixo do mínimo
   legível. */
.vl-pastilha span {
  font-size: 12px;
  color: var(--vl-ink-50);
  font-variant-numeric: tabular-nums;
}
.vl-pastilha.is-atual span { color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Barra de catálogo
   O Kadence já agrupa contagem e ordenação nesta linha; aqui ela ganha o
   mesmo tratamento previsto para .vl-barra-catalogo.
   ========================================================================== */

.kadence-shop-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-6);
  border-bottom: 1px solid var(--vl-linha);
}
.kadence-shop-top-item { margin: 0; }



/* ==========================================================================
   Carrinho em blocos
   A página usa o bloco do WooCommerce, não a tabela clássica: as regras de
   `table.shop_table` acima continuam valendo se a loja voltar ao shortcode,
   mas é aqui que o carrinho de verdade é desenhado.
   ========================================================================== */

.wc-block-cart { margin-block: var(--e-5); }

/* O layout de duas colunas é do próprio bloco (flex, com larguras em %).
   Trocar o display por grid fazia a coluna do resumo herdar 35% de 380px e
   colapsar para 130px, quebrando o texto letra por letra. Aqui só o que é
   aparência. */
@media (min-width: 1000px) {
  .wc-block-components-sidebar { position: sticky; top: 124px; }
}

/* Cabeçalho de tabela não serve a um layout de cartões. */
.wc-block-cart-items__header { display: none; }

.wc-block-cart-items { border: 0; }
.wc-block-cart-items__row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  gap: var(--e-4);
  align-items: start;
  padding: var(--e-4) 0;
  border-top: 1px solid var(--vl-linha);
}
.wc-block-cart-items__row:first-child { border-top: 0; }
.wc-block-cart-items__row td { border: 0; padding: 0; }

.wc-block-cart-item__image { width: 104px; }
.wc-block-cart-item__image img {
  width: 104px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--vl-areia);
}

.wc-block-components-product-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--vl-ink);
  text-decoration: none;
}
.wc-block-components-product-name:hover { color: var(--vl-terra); }

.wc-block-components-product-metadata,
.wc-block-components-product-details {
  font-size: 13px;
  color: var(--vl-ink-50);
  margin: 4px 0 0;
}
.wc-block-components-product-details__name { font-weight: 500; }

.wc-block-cart-item__quantity { margin-top: var(--e-3); }

/* Seletor de quantidade em pílula, do mesmo desenho da gaveta. */
.wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: center;
  width: auto;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  overflow: hidden;
}
.wc-block-components-quantity-selector::after { display: none; }
.wc-block-components-quantity-selector__button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--vl-ink-70);
  font-size: 17px;
  cursor: pointer;
  opacity: 1;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.wc-block-components-quantity-selector__button:hover:not(:disabled) {
  background: var(--vl-terra-suave);
  color: var(--vl-terra-forte);
}
.wc-block-components-quantity-selector__button:disabled { opacity: .35; cursor: default; }
.wc-block-components-quantity-selector__input {
  width: 42px;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--vl-ink);
}

.wc-block-cart-item__remove-link {
  margin-top: var(--e-3);
  font-size: 13px;
  color: var(--vl-ink-30);
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color var(--t-rapida);
}
.wc-block-cart-item__remove-link:hover { color: var(--vl-erro, #b3261e); text-decoration: underline; }

.wc-block-cart-item__total {
  text-align: right;
  font-size: 16px;
  font-weight: 600;
  color: var(--vl-ink);
  white-space: nowrap;
}

/* Resumo lateral */
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-cart__sidebar {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  background: var(--vl-areia);
}
.wc-block-cart__totals-title {
  display: block;
  margin-bottom: var(--e-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vl-ink-50);
}
.wc-block-components-totals-wrapper { border-top-color: var(--vl-areia-forte); }
.wc-block-components-totals-item { font-size: 15px; color: var(--vl-ink-70); }
.wc-block-components-totals-footer-item,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 22px;
  font-weight: 600;
  color: var(--vl-ink);
}

.wc-block-cart__submit-container a,
.wc-block-cart__submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  border-radius: var(--r-pill);
  background: var(--vl-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.wc-block-cart__submit-container a:hover,
.wc-block-cart__submit-button:hover {
  background: var(--vl-terra);
  transform: translateY(-1px);
}

/* Carrinho vazio */
.wp-block-woocommerce-empty-cart-block { text-align: center; padding-block: var(--secao-y); }

@media (max-width: 600px) {
  .wc-block-cart-items__row { grid-template-columns: 84px minmax(0, 1fr); }
  .wc-block-cart-item__image img { width: 84px; height: 104px; }
  .wc-block-cart-item__total { grid-column: 2; text-align: left; margin-top: var(--e-2); }
}

/* ==========================================================================
   Painel da conta
   ========================================================================== */

.vl-painel__saudacao {
  font-size: clamp(27px, 3vw, 36px);
  margin: 0 0 var(--e-5);
}

.vl-painel__atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e-3);
}
.vl-painel__atalho {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-4);
  border-radius: var(--r-lg);
  background: var(--vl-areia);
  color: var(--vl-ink);
  text-decoration: none;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
.vl-painel__atalho:hover {
  background: var(--vl-terra-suave);
  transform: translateY(-2px);
}
.vl-painel__atalho svg { color: var(--vl-terra); flex: 0 0 auto; }
.vl-painel__atalho strong { display: block; font-size: 15px; font-weight: 600; }
.vl-painel__atalho small { display: block; font-size: 13px; color: var(--vl-ink-50); line-height: 1.45; }

/* Estado do pedido mais recente, no topo da lista */
.vl-estado-pedido {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-5);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--vl-sage);
  background: var(--vl-cru);
  font-size: 14px;
  color: var(--vl-ink-70);
}
.vl-estado-pedido svg { color: var(--vl-sage); flex: 0 0 auto; margin-top: 1px; }
.vl-estado-pedido strong { display: block; color: var(--vl-ink); }

/* Deslogado a página não tem barra lateral: o grid de duas colunas da conta
   deixaria a tela de entrada espremida em 268px. */
.woocommerce-account:not(.logged-in) .woocommerce { display: block; }

/* ==========================================================================
   Simulação de frete (Melhor Envio)
   O plugin traz o próprio visual, em cinza de painel. Aqui ele passa a falar
   a mesma língua do resto da ficha.
   ========================================================================== */

.calculatorRow {
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-lg);
  background: var(--vl-areia);
}
.calculatorRow p {
  margin: 0 0 var(--e-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vl-ink-50);
}
.calculatorRow .iptCep,
.calculatorRow input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  font-size: 16px;
}
.calculatorRow .iptCep:focus { border-color: var(--vl-terra); outline: none; }
.calculatorRow table { margin-top: var(--e-3); font-size: 14px; }
.calculatorRow table td { padding: 6px 0; border: 0; }

/* Os blocos de carrinho e checkout nascem com `alignwide`. Dentro do container
   do tema isso os fazia passar da borda direita: o resumo aparecia cortado e o
   botão de finalizar ficava metade fora da tela. */
/* O `alignwide` do Kadence dá 1440px ao bloco, mas o conteúdo em volta tem
   1272 e o tema não compensa com margem negativa: o bloco simplesmente
   passava da borda direita — o resumo saía cortado e o botão de finalizar
   ficava metade fora da tela. O seletor precisa da classe do bloco junto da
   de alinhamento para vencer a regra do tema. */
.entry-content > .wp-block-woocommerce-cart.alignwide,
.entry-content > .wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
}

/* Preço e variações do item herdavam a cor de link do tema e saíam azuis
   dentro de um carrinho que não tem azul nenhum. */
.wc-block-components-product-price,
.wc-block-components-product-price__value { color: var(--vl-ink-50); }
.wc-block-components-product-details__value,
.wc-block-components-product-details li { color: var(--vl-ink-50); }

/* "Lembre-me" ficava colado no botão, na mesma linha e sem respiro: o
   WooCommerce imprime o rótulo e o botão como irmãos soltos. */
.vl-login .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--e-4);
  font-size: 14px;
  color: var(--vl-ink-70);
  cursor: pointer;
}
.vl-login .woocommerce-form-login__rememberme input { margin: 0; }
.vl-login .woocommerce-form-login__submit,
.vl-login .woocommerce-form-register button {
  width: 100%;
  margin-top: var(--e-2);
}
.vl-login .woocommerce-LostPassword { margin: var(--e-3) 0 0; font-size: 14px; }
.vl-login .woocommerce-privacy-policy-text p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--vl-ink-50);
}

/* Com o menu à esquerda, o respiro do Kadence fica do lado errado do conteúdo. */
.kadence-account-nav-left.woocommerce-account .woocommerce-MyAccount-content {
  padding-right: clamp(22px, 3vw, 38px);
  padding-left: clamp(22px, 3vw, 38px);
  margin-left: clamp(20px, 3vw, 40px);
  width: calc(70% - clamp(20px, 3vw, 40px));
}
/* A borda divisória do Kadence some: a separação entre menu e conteúdo já
   vem dos dois cartões. Mesma especificidade da regra do tema, e esta folha
   carrega depois. */
.kadence-account-nav-left.woocommerce-account .account-navigation-wrap { border: 0; }

/* O Kadence dá aos itens do menu uma borda esquerda de 5px e margem negativa
   de 1px para marcar o item ativo. Sobre a pílula do nosso menu isso vazava
   uma faixa colorida para fora do cartão. */
.woocommerce-account .account-navigation-wrap li a,
.woocommerce-account .account-navigation-wrap li:hover a,
.woocommerce-account .account-navigation-wrap li.is-active a,
.woocommerce-account .account-navigation-wrap li.is-active a:hover {
  border-left: 0;
  margin-left: 0;
}

/* O botão de confirmar e-mail quebrava o rótulo em duas linhas dentro da
   pílula, e o número do pedido saía sublinhado na cor de link do tema. */
.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button { white-space: nowrap; }

.woocommerce-account .woocommerce-orders-table__cell-order-number a,
.woocommerce-account .woocommerce-orders-table__cell-order-number a:visited {
  color: var(--vl-ink);
  text-decoration: none;
}

/* A trilha vira uma fileira de alvos de 20px no celular. */
@media (max-width: 767px) {
  .kadence-breadcrumbs a { display: inline-block; padding-block: 6px; }
}

/* A seta do select vem como background-image do tema; sem `no-repeat` ela
   ladrilhava a caixa inteira e a ordenação aparecia com uma fileira de setas. */
.woocommerce .woocommerce-ordering select,
.woocommerce-page .woocommerce-ordering select {
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}

/* "Limpar" das variações tinha 19px de altura no celular. */
@media (max-width: 767px) {
  .woocommerce .reset_variations {
    display: inline-block;
    padding-block: 8px;
  }
}

/* ==========================================================================
   Checkout em blocos — campos
   O bloco desenha os campos com borda branca sobre fundo branco: o limite do
   campo sumia e sobrava só o texto flutuando. Aqui a borda é a linha da
   paleta, o canto acompanha o resto da loja e os campos ganham ar entre si.
   ========================================================================== */

.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-address-form input,
.wc-block-components-form input.input-text,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-combobox input,
.wc-block-components-textarea {
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
  background: var(--vl-branco);
  min-height: 56px;
  padding: 22px 16px 6px;
  font-size: 16px;
  color: var(--vl-ink);
  box-shadow: none;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea:focus {
  border-color: var(--vl-terra);
  outline: none;
  box-shadow: 0 0 0 3px var(--vl-terra-suave);
}

/* Espaço entre um campo e o seguinte. */
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-form .wc-block-components-text-input {
  margin-top: var(--e-4);
}
.wc-block-components-address-form {
  display: grid;
  gap: 0 var(--e-3);
}

/* O rótulo flutuante precisa acompanhar o novo canto e o novo padding. */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
  left: 17px;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Checkout em blocos — resumo do pedido
   Eram cartões brancos dentro de um cartão claro, com faixas vazias entre
   eles. Vira um cartão só, com divisórias finas onde faz sentido.
   ========================================================================== */

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-totals-item {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.wc-block-components-sidebar {
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r-xl);
  background: var(--vl-areia);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper {
  padding-block: var(--e-4);
  border-top: 1px solid var(--vl-areia-forte);
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Faixas que o bloco deixa vazias quando não há cupom ou desconto. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper:empty {
  display: none;
  padding: 0;
  border: 0;
}

.wc-block-components-order-summary-item {
  padding-block: var(--e-3);
  background: transparent;
}
.wc-block-components-order-summary-item__image img {
  border-radius: var(--r-sm);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-size: 15px;
  line-height: 1.35;
}

.wc-block-components-totals-item__label { color: var(--vl-ink-70); }
.wc-block-components-totals-item__value { color: var(--vl-ink); font-weight: 500; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 21px;
  font-weight: 600;
}

/* O painel de cupom deixa de parecer um cartão à parte. */
.wc-block-components-panel__button {
  padding-inline: 0;
  font-size: 14px;
  color: var(--vl-ink-70);
}

/* O seletor de país aparece mesmo quando a loja vende para um país só. São
   dois campos a menos na tela (entrega e cobrança) sem perder informação: o
   Brasil continua sendo enviado no pedido. */
.wc-block-components-country-input,
.wc-block-components-address-form .wc-block-components-country-input {
  display: none;
}

/* O bloco repete o preço do item: uma vez ao lado do nome e outra na coluna
   da direita. Fica a da direita, alinhada com os outros valores. */
.wc-block-components-order-summary-item__description .wc-block-components-product-price {
  display: none;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
  color: var(--vl-ink-50);
}
.wc-block-components-order-summary-item__description .wc-block-components-product-details__value {
  color: var(--vl-ink-70);
}

/* ==========================================================================
   Ficha do produto — variações em botões
   ========================================================================== */

/* O select continua no HTML e é ele que o WooCommerce lê; fica fora de vista,
   mas alcançável se o JavaScript não rodar. */
.vl-variacao__select { display: none; }
.no-js .vl-variacao__select { display: block; }
.no-js .vl-variacao { display: none; }

.vl-variacao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 6px 0 var(--e-4);
}

.vl-variacao__opcao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform var(--t-rapida);
}
.vl-variacao__opcao:focus-visible {
  outline: 2px solid var(--vl-sage);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

/* Bolinha de cor: o anel de fora marca a escolha, então a cor do cordão
   aparece inteira, sem nada por cima. */
.vl-variacao__bolinha {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--cor);
  box-shadow: inset 0 0 0 1px rgba(27, 26, 24, .12);
  transition: box-shadow var(--t-rapida), transform var(--t-rapida);
}
.vl-variacao__opcao:hover .vl-variacao__bolinha { transform: scale(1.08); }
.vl-variacao__opcao.is-escolhida .vl-variacao__bolinha {
  box-shadow: inset 0 0 0 1px rgba(27, 26, 24, .12), 0 0 0 2px var(--vl-branco), 0 0 0 4px var(--vl-ink);
}

/* Opção que não combina com a escolha atual: continua clicável — recomeça a
   escolha a partir dela —, mas esmaecida, para não parecer disponível. */
.vl-variacao__opcao.is-indisponivel { opacity: .38; }
.vl-variacao__opcao.is-indisponivel:hover { opacity: .7; }

/* Demais atributos: pastilha de texto. */
.vl-variacao--texto .vl-variacao__opcao {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  font-family: var(--fonte-ui);
  font-size: 14px;
  color: var(--vl-ink-70);
}
.vl-variacao--texto .vl-variacao__opcao:hover {
  border-color: var(--vl-terra);
  color: var(--vl-terra-forte);
}
.vl-variacao--texto .vl-variacao__opcao.is-escolhida {
  border-color: var(--vl-ink);
  background: var(--vl-ink);
  color: var(--vl-branco);
}

/* O nome da cor escolhida, ao lado do rótulo do atributo. */
.vl-variacao__escolhida {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vl-ink-50);
}

/* A tabela de variações do WooCommerce vira uma pilha simples. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations td {
  display: block;
  width: auto;
  border: 0;
  padding: 0;
  margin: 0;
}
.woocommerce div.product form.cart table.variations .label {
  margin-top: var(--e-4);
}
.woocommerce div.product form.cart table.variations .label label {
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Ficha do produto — ritmo
   O resumo estava com o dobro do espaço necessário entre blocos.
   ========================================================================== */

.woocommerce div.product .summary > * { margin-block: 0; }
.woocommerce div.product .summary .price { margin: var(--e-3) 0 var(--e-4); }
.woocommerce div.product .summary .woocommerce-product-details__short-description {
  margin-bottom: var(--e-4);
}
.woocommerce div.product form.cart { margin-block: var(--e-4); }
.woocommerce div.product .vl-produto-vantagens { margin-block: var(--e-5); }
.woocommerce div.product .product_meta { margin-top: var(--e-4); }

/* Quantidade e botão na mesma linha, logo abaixo das variações. */
.woocommerce div.product form.cart .vl-comprar {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.woocommerce div.product form.cart .quantity { margin: 0; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1; min-height: 54px; }

/* ==========================================================================
   Simulação de frete
   O plugin desenha uma caixa cinza de painel administrativo dentro da ficha.
   ========================================================================== */

.calculatorRow,
.calculatorRow .row,
.calculatorRow .col-75,
.calculatorRow .col-25 {
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.vl-frete {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--vl-linha);
}
.calculatorRow p {
  margin: 0 0 var(--e-3);
  font-family: var(--fonte-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Área da ficha com fundo branco
   Da galeria até o fim do resumo, para a foto e a compra ficarem num bloco só.
   ========================================================================== */

/* Galeria e resumo ficam num bloco branco só, do fim do cabeçalho até antes
   das abas. Não dá para pintar `div.product` inteiro: ele engloba também as
   abas e os relacionados, que ficam sobre o creme. */
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary,
.single-product div.product .entry-summary {
  background: var(--vl-branco);
  padding: clamp(18px, 2.2vw, 30px);
}
.single-product div.product .woocommerce-product-gallery {
  border-radius: var(--r-xl) 0 0 var(--r-xl);
}
.single-product div.product .summary,
.single-product div.product .entry-summary {
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
}

@media (max-width: 767px) {
  .single-product div.product .woocommerce-product-gallery { border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .single-product div.product .summary,
  .single-product div.product .entry-summary { border-radius: 0 0 var(--r-xl) var(--r-xl); }
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related {
  background: transparent;
}

/* ==========================================================================
   Avaliações
   O WooCommerce põe a lista e o formulário lado a lado em duas colunas que não
   se alinham. Numa loja sem avaliação nenhuma, a coluna da esquerda fica só
   com "Não há avaliações ainda" e o formulário espremido na direita.
   ========================================================================== */

#reviews #comments,
#reviews #review_form_wrapper {
  float: none;
  width: 100%;
  max-width: 640px;
}
#reviews #review_form_wrapper { margin-top: var(--e-5); }
#reviews .woocommerce-noreviews {
  margin: 0 0 var(--e-4);
  color: var(--vl-ink-50);
}
#reviews .comment-reply-title {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 22px;
  color: var(--vl-ink);
  margin-bottom: var(--e-3);
}
#reviews .comment-form label { font-size: 14px; color: var(--vl-ink-70); }
#reviews .comment-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
}
#reviews .stars a { color: var(--vl-dourado); }

/* ==========================================================================
   Resumo do pedido: fundo branco e respiro entre as linhas
   O areia deixava o resumo pesado ao lado do formulário branco, e as linhas
   de total encostavam na divisória de cima.
   ========================================================================== */

.wc-block-components-sidebar {
  background: var(--vl-branco);
  border: 1px solid var(--vl-linha);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel {
  padding-block: var(--e-4);
  border-top: 1px solid var(--vl-linha);
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child,
.wc-block-components-sidebar .wc-block-components-order-summary {
  border-top: 0;
  padding-top: 0;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:last-child {
  padding-bottom: 0;
}

/* O painel de cupom abre um campo e um botão; sem respiro embaixo, a linha do
   subtotal encostava neles. */
.wc-block-components-panel__content { padding-bottom: var(--e-3); }

/* ==========================================================================
   Opções de entrega e pagamento
   O bloco posiciona o rádio em absoluto e conta com um recuo que o nosso
   padding sobrescreveu: o círculo caía em cima da primeira letra
   ("orreios Sedex", "x ou cartão"). Agora a linha é uma grade de três
   colunas — rádio, descrição e preço — e nada se sobrepõe.
   ========================================================================== */

/* O input fica em `position: absolute` por decisão do bloco, e tirá-lo de lá
   quebraria o clique na linha inteira. Em vez disso, o conteúdo recua o
   bastante para o círculo caber ao lado do texto. */
.wc-block-components-radio-control__option {
  padding: var(--e-4);
}
.wc-block-components-radio-control__option-layout {
  padding-left: 30px;
}
.wc-block-components-radio-control__input {
  width: 18px;
  height: 18px;
  accent-color: var(--vl-terra);
}

.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option-layout {
  padding-left: 0;
  margin: 0;
}

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

/* O preço vai para a terceira coluna, alinhado à direita. */
.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__secondary-description {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  color: var(--vl-ink);
  font-weight: 600;
}

/* A opção escolhida ganha a borda da marca em vez de um fundo areia que
   competia com o resto da coluna. */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
  border-radius: var(--r-md);
  background: var(--vl-branco);
  border: 1px solid var(--vl-linha);
  margin-bottom: var(--e-2);
}
.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--vl-terra);
  background: var(--vl-terra-suave);
  box-shadow: none;
}

/* ==========================================================================
   Campos do checkout sem borda
   Campo com borda dentro de um cartão com borda dentro de uma coluna com
   borda: três molduras para uma caixa de texto. Fica o fundo, que já separa
   o campo do papel, e o foco passa a ser o único contorno da tela.
   ========================================================================== */

.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-address-form input,
.wc-block-components-form input.input-text,
.wc-block-components-combobox input,
.wc-block-components-textarea,
.wc-block-components-checkout .wc-block-components-text-input input {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--vl-cru);
  box-shadow: none;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea:focus {
  background: var(--vl-branco);
  box-shadow: 0 0 0 2px var(--vl-terra);
  outline: none;
}

/* O recuo do texto nas opções de entrega e pagamento: a regra do bloco vence
   um seletor curto, então a classe entra duas vezes. */
.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout.wc-block-components-radio-control__option-layout {
  padding-left: 30px;
}

/* ==========================================================================
   Campos do checkout — sem moldura
   O bloco desenha a borda com `.wc-block-components-text-input input` e um
   `:where()` que zera a especificidade de quem tenta sobrescrever por fora.
   A classe repetida coloca a regra acima da dele sem recorrer a !important.
   ========================================================================== */

.wc-block-components-form .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-address-form .wc-block-components-combobox.wc-block-components-combobox input,
.wc-block-components-checkout .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-checkout .wc-block-components-textarea.wc-block-components-textarea {
  border: 0;
  border-radius: var(--r-lg);
  /* Areia, não creme: o creme é praticamente a cor do fundo da página e os
     campos sem borda sumiam — sobravam os rótulos soltos no ar. */
  background: var(--vl-areia);
  box-shadow: none;
}
.wc-block-components-form .wc-block-components-text-input.wc-block-components-text-input input:focus,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-text-input input:focus,
.wc-block-components-checkout .wc-block-components-text-input.wc-block-components-text-input input:focus {
  background: var(--vl-branco);
  box-shadow: 0 0 0 2px var(--vl-terra);
  outline: none;
}

/* ==========================================================================
   Formulário em duas colunas
   Onze campos empilhados um sob o outro faziam a página do checkout ter três
   telas de altura. Emparelhados, o cliente vê o formulário inteiro de uma vez.
   ========================================================================== */

@media (min-width: 720px) {
  /* O formulário de endereço é flex com quebra de linha, montado pelo próprio
     bloco — não grid. Impor `display: grid` aqui não vencia a regra dele, e o
     `row-gap` que eu declarava junto ia junto para o lixo: as linhas ficavam
     coladas, uma caixa encostada na outra. Fica só o espaço entre linhas, que
     o flex entende igual. */
  .wc-block-components-address-form,
  .wc-block-components-address-form.wc-block-components-address-form {
    row-gap: var(--e-3);
    column-gap: var(--e-3);
    align-items: flex-start;
  }
  /* Rua e complemento ocupam a linha inteira: são os campos longos. */
  .wc-block-components-address-form .wc-block-components-address-form__address_1,
  .wc-block-components-address-form .wc-block-components-address-form__address_2,
  .wc-block-components-address-form .wc-block-components-address-address-wrapper,
  .wc-block-components-address-form > .wc-block-components-checkbox {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Resumo do pedido — divisórias só na horizontal
   Com borda em volta de cada faixa, o resumo virava uma tabela de planilha
   dentro de um cartão que já tem contorno.
   ========================================================================== */

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-totals-item {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.wc-block-components-sidebar > * {
  border-left: 0;
  border-right: 0;
}

/* O campo de estado é um combobox com marcação própria e escapou da regra
   dos campos de texto. */
.wc-block-components-checkout .wc-block-components-combobox.wc-block-components-combobox .components-combobox-control__suggest-current-input,
.wc-block-components-checkout .wc-block-components-combobox.wc-block-components-combobox input,
.wc-block-components-checkout .wc-block-components-state-input.wc-block-components-state-input input,
.wc-block-components-checkout .wc-block-components-country-input.wc-block-components-country-input input {
  border: 0;
  border-radius: var(--r-lg);
  background: var(--vl-areia);
  box-shadow: none;
}

/* As caixas de seleção vinham do tamanho do tema: quase o dobro da linha de
   texto ao lado. */
.wc-block-components-checkbox .wc-block-components-checkbox__input {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-right: 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--vl-linha);
  accent-color: var(--vl-ink);
}
.wc-block-components-checkbox__label {
  font-size: 14.5px;
  color: var(--vl-ink-70);
}

/* ==========================================================================
   Checkout — campos iguais entre si
   Cada tipo de campo vinha com um desenho: o de texto com fundo areia, o de
   estado com borda e canto menor, o de cidade com outra altura. Aqui todos
   passam a ser a mesma caixa branca, com a mesma altura, o mesmo canto e a
   mesma sombra — o que muda entre eles é só o conteúdo.
   ========================================================================== */

.wc-block-components-checkout .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-checkout .wc-block-components-combobox.wc-block-components-combobox input,
.wc-block-components-checkout .wc-block-components-state-input.wc-block-components-state-input input,
.wc-block-components-checkout .wc-block-components-country-input.wc-block-components-country-input input,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-address-form .wc-block-components-combobox.wc-block-components-combobox input,
.wc-block-components-form .wc-block-components-text-input.wc-block-components-text-input input,
.wc-block-components-checkout .wc-block-components-textarea.wc-block-components-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 22px 18px 6px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
  font-family: var(--fonte-ui);
  font-size: 16px;
  color: var(--vl-ink);
  transition: box-shadow var(--t-rapida);
}

/* Campo em uso: a sombra fecha em volta em vez de virar contorno. */
.wc-block-components-checkout .wc-block-components-text-input.wc-block-components-text-input input:focus,
.wc-block-components-checkout .wc-block-components-combobox.wc-block-components-combobox input:focus,
.wc-block-components-checkout .wc-block-components-state-input.wc-block-components-state-input input:focus,
.wc-block-components-address-form .wc-block-components-text-input.wc-block-components-text-input input:focus,
.wc-block-components-checkout .wc-block-components-textarea.wc-block-components-textarea:focus {
  border: 0;
  outline: none;
  box-shadow: var(--sombra-card), 0 0 0 1px var(--vl-terra);
}

/* A moldura que o bloco desenha em volta do campo ativo sai de cena. */
.wc-block-components-checkout .wc-block-components-text-input.is-active input,
.wc-block-components-checkout .wc-block-components-combobox.is-active input,
.wc-block-components-checkout .wc-block-components-text-input input:not(:placeholder-shown) {
  border: 0;
}

/* O espaço entre as linhas vem do `row-gap` da grade, não de uma margem em
   cada campo: com margem, o primeiro campo de cada linha ficava sem ela e os
   vizinhos desciam 12px — era esse o degrau entre e-mail e CPF, cidade e
   estado. */
.wc-block-components-address-form .wc-block-components-text-input,
.wc-block-components-address-form .wc-block-components-combobox,
.wc-block-components-address-form .wc-block-components-state-input,
.wc-block-components-address-form .wc-block-components-country-input,
.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-form .wc-block-components-combobox {
  margin-top: 0;
  margin-bottom: 0;
}

/* ==========================================================================
   Checkout — opções de entrega e pagamento
   ========================================================================== */

/* A moldura em volta do grupo inteiro duplicava a borda de cada opção. */
.wc-block-components-radio-control,
.wc-block-components-shipping-rates-control,
.wc-block-components-shipping-rates-control__package,
.wc-block-components-radio-control-accordion,
.wp-block-woocommerce-checkout-order-summary-shipping-block,
.wc-block-checkout__payment-method .wc-block-components-radio-control {
  border: 0;
  background: transparent;
  padding: 0;
}

/* Respiro entre uma opção e a seguinte. */
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
  margin-bottom: var(--e-3);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-suave);
  border: 1px solid transparent;
}
.wc-block-components-radio-control__option:last-child,
.wc-block-components-radio-control-accordion-option:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Checkout — resumo do pedido
   ========================================================================== */

/* O cartão já tem contorno; as réguas no topo e no pé do bloco interno
   desenhavam uma segunda moldura por dentro dele. */
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-of-type,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-panel:first-of-type {
  border-top: 0;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

/* A linha acima de "Adicionar cupons" vinha do painel e do wrapper ao mesmo
   tempo: duas réguas coladas no mesmo ponto. */
.wc-block-components-sidebar .wc-block-components-panel {
  border-top: 0;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper:has(.wc-block-components-panel) {
  border-top: 1px solid var(--vl-linha);
}

/* Subtotal encostava na régua de cima. */
.wc-block-components-sidebar .wc-block-components-totals-item {
  padding-block: 6px;
}
.wc-block-components-sidebar .wc-block-components-totals-wrapper {
  padding-block: var(--e-4);
}

/* Espaço entre as opções de entrega: a regra do bloco define a margem com um
   seletor mais específico, então a classe entra duas vezes. */
.wc-block-components-radio-control .wc-block-components-radio-control__option.wc-block-components-radio-control__option,
.wc-block-components-radio-control .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option {
  margin-bottom: var(--e-3);
}
.wc-block-components-radio-control .wc-block-components-radio-control__option.wc-block-components-radio-control__option:last-child {
  margin-bottom: 0;
}

/* Campos que escaparam: o de cidade e o de e-mail vinham por outro caminho no
   HTML e ficaram com o canto e o fundo antigos. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"] {
  border: 0;
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
  min-height: 58px;
}

/* O campo de estado é um <select> nativo dentro de um wrapper próprio: não
   passa por nenhuma das regras de input. */
.wc-block-components-checkout select,
.wc-block-components-address-form select,
.wc-block-components-state-input select,
.wc-block-components-combobox .components-combobox-control__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 22px 18px 6px;
  border: 0;
  border-radius: var(--r-md);
  background-color: var(--vl-branco);
  box-shadow: var(--sombra-suave);
  font-family: var(--fonte-ui);
  font-size: 16px;
  color: var(--vl-ink);
}
.wc-block-components-checkout select:focus {
  outline: none;
  box-shadow: var(--sombra-card), 0 0 0 1px var(--vl-terra);
}

/* A moldura em volta do grupo de pagamento: com uma forma só, ela emoldurava
   uma caixa que já tem contorno próprio. */
.wc-block-checkout__payment-method,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion,
.wp-block-woocommerce-checkout-payment-block > .wc-block-components-radio-control {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* A seção de contato tem os mesmos dois campos lado a lado e precisa da
   mesma grade, senão o e-mail e o CPF voltam a se desencontrar. */
@media (min-width: 720px) {
  .wc-block-checkout__contact-fields .wc-block-components-form,
  .wc-block-checkout__contact-fields > .wc-block-components-checkout-step__content > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-3);
    row-gap: var(--e-3);
    align-items: start;
  }
  .wc-block-checkout__contact-fields .wc-block-checkout__guest-checkout-notice,
  .wc-block-checkout__contact-fields .wc-block-components-checkbox {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Campo de estado
   O prefixo aqui é `wc-blocks-` (com S), diferente de todo o resto do
   checkout, que usa `wc-block-`. Uma letra de diferença — e era por isso que
   o campo escapava de todas as regras e continuava com borda e canto próprios.
   ========================================================================== */

.wc-blocks-components-select,
.wc-blocks-components-select__container {
  border: 0;
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
}
.wc-blocks-components-select__select,
.wc-blocks-components-select__container select {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 22px 18px 6px;
  border: 0;
  border-radius: var(--r-md);
  background-color: transparent;
  box-shadow: none;
  font-family: var(--fonte-ui);
  font-size: 16px;
  color: var(--vl-ink);
}
.wc-blocks-components-select__container:focus-within {
  box-shadow: var(--sombra-card), 0 0 0 1px var(--vl-terra);
}
.wc-blocks-components-select__select:focus { outline: none; }
.wc-blocks-components-select__label {
  left: 18px;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Opções de entrega: uma moldura por opção, nenhuma em volta do grupo
   ========================================================================== */

.wc-block-components-shipping-rates-control,
.wc-block-components-shipping-rates-control__package,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control,
.wc-block-checkout__shipping-option,
.wp-block-woocommerce-checkout-shipping-methods-block,
.wc-block-components-radio-control-accordion {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* A opção escolhida marca com a cor da marca, não com um traço preto. */
.wc-block-components-radio-control-accordion-option {
  border-color: transparent;
}
.wc-block-components-radio-control-accordion-option:has(input:checked),
.wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--vl-terra);
}

/* O <select> de estado carrega a borda e o canto dele próprio, e o wrapper
   em volta traz 12px de margem que derrubavam a caixa abaixo da linha da
   cidade. As duas coisas saem aqui, com o seletor de atributo para alcançar
   o elemento sem depender da classe. */
.wc-block-checkout select,
.wc-blocks-components-select select,
.wc-blocks-components-select__container > select {
  border: 0;
  border-radius: var(--r-md);
  background-color: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.wc-block-components-address-form .wc-blocks-components-select,
.wc-block-components-address-form .wc-blocks-components-select__container,
.wc-block-components-address-form > div:has(> .wc-blocks-components-select) {
  margin-top: 0;
  margin-bottom: 0;
}

/* A regra do bloco é `.wc-blocks-components-select .wc-blocks-components-select__select`
   (duas classes). Para vencê-la sem !important, a minha precisa de três. */
.wc-block-checkout .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-address-form .wc-blocks-components-select .wc-blocks-components-select__select {
  border: 0;
  border-radius: var(--r-md);
  background-color: transparent;
  box-shadow: none;
  min-height: 58px;
  padding: 22px 18px 6px;
  font-family: var(--fonte-ui);
  font-size: 16px;
  color: var(--vl-ink);
}

/* As linhas de cidade, CEP e número ficam dentro de um wrapper próprio, que
   não é a grade do formulário — por isso não recebiam o espaço entre linhas e
   os campos saíam colados uns nos outros. */
@media (min-width: 720px) {
  .wc-block-components-address-form .wc-block-components-address-address-wrapper {
    width: 100%;
    row-gap: var(--e-3);
    column-gap: var(--e-3);
  }
}
.wc-block-components-address-form > * + * { margin-top: 0; }

/* A moldura escura em volta do grupo de pagamento: sai o contorno e o fundo,
   ficando só a caixa da forma escolhida. */
.wp-block-woocommerce-checkout-payment-block,
.wc-block-checkout__payment-method,
.wc-block-checkout__payment-method > .wc-block-components-radio-control,
.wc-block-components-checkout-step--with-step-number .wc-block-components-radio-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.wc-block-components-radio-control-accordion-option {
  background: var(--vl-branco);
}

/* A moldura rosa em volta do bloco de pagamento: é o contêiner do passo que
   pinta fundo e borda quando há uma forma selecionada. A caixa da forma já
   marca a escolha; a moldura em volta só repetia o recado. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option {
  background: var(--vl-branco);
  border: 1px solid var(--vl-linha);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option--checked-option-highlighted {
  border-color: var(--vl-terra);
  background: var(--vl-terra-suave);
}

/* ==========================================================================
   Contato: e-mail e CPF lado a lado
   A seção usa a mesma classe do formulário de endereço, mas é o primeiro
   elemento dela — e ficou com uma coluna só quando tirei o grid imposto.
   ========================================================================== */

@media (min-width: 720px) {
  .wc-block-checkout__contact-fields .wc-block-components-address-form {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--e-3);
    row-gap: var(--e-3);
  }
  .wc-block-checkout__contact-fields .wc-block-components-address-form > .wc-block-components-text-input {
    flex: 1 1 calc(50% - var(--e-3) / 2);
    min-width: 0;
  }
}

/* ==========================================================================
   Pagamento: uma caixa por forma, não duas
   O bloco aninha a opção dentro de um acordeão, e os dois desenhavam fundo e
   borda — uma caixa rosa em volta de uma caixa branca. A moldura fica com o
   acordeão, que é o elemento clicável; a opção por dentro fica limpa.
   ========================================================================== */

.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
  overflow: hidden;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border-color: var(--vl-terra);
  background: var(--vl-terra-suave);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  margin: 0;
}

/* O aviso de compra sem conta e a caixa de criar conta ocupam a linha inteira:
   com o flex de duas colunas eles subiam para o lado um do outro. */
.wc-block-checkout__contact-fields .wc-block-components-address-form > .wc-block-checkout__guest-checkout-notice,
.wc-block-checkout__contact-fields .wc-block-components-address-form > .wc-block-components-checkbox,
.wc-block-checkout__contact-fields > .wc-block-components-checkout-step__content > .wc-block-checkout__guest-checkout-notice,
.wc-block-checkout__contact-fields > .wc-block-components-checkout-step__content > .wc-block-components-checkbox {
  flex: 1 1 100%;
  width: 100%;
}

/* A caixa do acordeão de pagamento não pinta fundo nem contorno: quem marca a
   forma escolhida é a linha por dentro dela. Assim some a caixa dentro da
   caixa. */
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
  border-color: var(--vl-terra);
  background: var(--vl-terra-suave);
}

/* ==========================================================================
   Entrega, pagamento e resumo — o desenho definitivo
   Estas listas foram ajustadas em várias rodadas e as regras se acumularam
   arquivo acima. Este bloco é a fonte da verdade: vem por último e define o
   estado final. Ao mexer nelas de novo, mexa aqui — as regras anteriores
   perdem para estas por ordem.
   ========================================================================== */

/* Nenhuma moldura em volta dos grupos nem dos contêineres intermediários —
   nem na entrega nem no pagamento. */
.wc-block-components-shipping-rates-control,
.wc-block-components-shipping-rates-control__package,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control,
.wc-block-checkout__shipping-option,
.wp-block-woocommerce-checkout-shipping-methods-block,
.wp-block-woocommerce-checkout-payment-block,
.wc-block-checkout__payment-method,
.wc-block-checkout__payment-method > .wc-block-components-radio-control,
.wc-block-components-radio-control,
.wc-block-components-radio-control-accordion,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion,
.wc-block-components-radio-control-accordion-option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* A caixa é a opção em si, igual nas duas listas. */
.wc-block-components-radio-control .wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  margin: 0 0 var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-md);
  background: var(--vl-branco);
  box-shadow: none;
  transition: border-color var(--t-rapida), background var(--t-rapida);
}
.wc-block-components-radio-control .wc-block-components-radio-control__option:last-child,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:last-child {
  margin-bottom: 0;
}

/* A escolhida marca com a cor da marca, não com um traço preto. */
.wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
  border-color: var(--vl-terra);
  background: var(--vl-terra-suave);
  box-shadow: none;
}

/* ==========================================================================
   Resumo do pedido: sem régua no topo e no pé, valores centrados na linha
   ========================================================================== */

.wc-block-components-sidebar > *:first-child,
.wc-block-components-sidebar .wc-block-components-order-summary,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:first-child {
  border-top: 0;
  padding-top: 0;
}
.wc-block-components-sidebar > *:last-child,
.wc-block-components-sidebar .wc-block-components-totals-wrapper:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* O valor ficava encostado na régua de cima porque a linha não tinha altura
   própria: era o texto e mais nada. Agora cada linha tem a mesma altura e o
   conteúdo fica no meio dela. */
.wc-block-components-sidebar .wc-block-components-totals-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding-block: 0;
  margin: 0;
}
.wc-block-components-sidebar .wc-block-components-totals-item__label,
.wc-block-components-sidebar .wc-block-components-totals-item__value {
  display: flex;
  align-items: center;
  margin: 0;
}
/* A descrição da entrega fica embaixo do valor, sem empurrar a linha. */
.wc-block-components-sidebar .wc-block-components-totals-item__description {
  flex-basis: 100%;
  margin-top: 2px;
}

/* ==========================================================================
   Ajuste de especificidade
   O CSS do WooCommerce Blocks é enfileirado depois do tema, então empate de
   especificidade é vitória dele — era por isso que a borda da opção escolhida
   continuava preta e o acordeão do pagamento mantinha a caixa. Três classes
   no seletor resolvem sem !important.
   ========================================================================== */

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control__option {
  border: 1px solid var(--vl-linha);
  background: var(--vl-branco);
}

.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
  border: 1px solid var(--vl-terra);
  background: var(--vl-terra-suave);
  box-shadow: none;
}

/* O acordeão do pagamento é só um invólucro: sem borda, sem fundo e sem os
   16px de recuo que criavam a caixa dentro da caixa. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion,
.wc-block-checkout .wc-block-checkout__payment-method > .wc-block-components-radio-control {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* O estado escolhido precisa de mais peso que o estado padrão, senão a regra
   de repouso — escrita com a mesma quantidade de classes — vence por vir
   depois. A classe do próprio modificador entra duas vezes. */
.wc-block-checkout .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option.wc-block-components-radio-control__option {
  border: 1px solid var(--vl-terra);
  background: var(--vl-terra-suave);
}

/* O acordeão do pagamento: sem os 16px de recuo que formavam a caixa externa. */
.wc-block-checkout .wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option.wc-block-components-radio-control-accordion-option {
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

/* ==========================================================================
   Entrega e pagamento: a caixa é a opção, e só ela
   O bloco aninha cinco contêineres entre a seção e a linha clicável, e vários
   deles desenham a própria borda — é a soma disso que aparecia como uma
   moldura cinza em volta da lista. Em vez de caçar um por um, todos são
   zerados aqui e a caixa é desenhada apenas no <label> da opção.

   `!important` é a exceção que este ponto pede: o CSS do WooCommerce Blocks é
   enfileirado depois do tema e usa `!important` nas próprias regras, então
   nenhuma quantidade de classes no seletor resolveria.
   ========================================================================== */

.wc-block-checkout .wc-block-components-shipping-rates-control,
.wc-block-checkout .wc-block-components-shipping-rates-control__package,
.wc-block-checkout .wc-block-components-radio-control,
.wc-block-checkout .wc-block-components-radio-control--highlight-checked,
.wc-block-checkout .wc-block-components-radio-control-accordion,
.wc-block-checkout .wc-block-components-radio-control-accordion-option,
.wc-block-checkout .wc-block-checkout__payment-method,
.wc-block-checkout .wp-block-woocommerce-checkout-shipping-methods-block,
.wc-block-checkout .wp-block-woocommerce-checkout-payment-block {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* A linha clicável: mesma caixa nas duas listas. */
.wc-block-checkout .wc-block-components-radio-control__option {
  margin: 0 0 var(--e-3) !important;
  padding: var(--e-4) !important;
  border: 1px solid var(--vl-linha) !important;
  border-radius: var(--r-md) !important;
  background: var(--vl-branco) !important;
  box-shadow: none !important;
}
.wc-block-checkout .wc-block-components-radio-control__option:last-child {
  margin-bottom: 0 !important;
}

/* A escolhida. */
.wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
  border-color: var(--vl-terra) !important;
  background: var(--vl-terra-suave) !important;
}

/* ==========================================================================
   Resumo do pedido: as réguas certas, nos lugares certos
   As divisórias não vinham das classes `wc-block-components-*` que eu vinha
   tratando, e sim dos blocos `wp-block-woocommerce-checkout-order-summary-*`
   — um por seção do resumo. Era por isso que as regras anteriores não
   pegavam: estavam mirando o elemento errado.

   Cada seção passa a ter a mesma régua no topo e o mesmo respiro; a primeira
   não tem régua, porque o card já tem contorno.
   ========================================================================== */

.wc-block-components-sidebar [class*="wp-block-woocommerce-checkout-order-summary-"] {
  border-top: 1px solid var(--vl-linha);
  border-bottom: 0;
  padding-block: var(--e-4);
}

/* O contêiner de todas elas não desenha nada: quem tem régua são as seções. */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
  border-top: 0;
  padding-block: 0;
}

/* Só a primeira seção do resumo, e não qualquer bloco que por acaso seja o
   primeiro filho do seu contêiner: o de subtotal é o primeiro dentro do bloco
   de totais, e a regra genérica zerava o respiro dele — era esse o subtotal
   colado na régua de cima. */
.wc-block-components-sidebar > .wp-block-woocommerce-checkout-order-summary-block > [class*="wp-block-woocommerce-checkout-order-summary-"]:first-child {
  border-top: 0;
  padding-top: 0;
}

/* As seções aninhadas dentro do bloco de totais mantêm régua e respiro. */
.wc-block-components-sidebar [class*="wp-block-woocommerce-checkout-order-summary-"] [class*="wp-block-woocommerce-checkout-order-summary-"] {
  padding-block: var(--e-4);
}

/* E a última não deixa espaço sobrando no pé. */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block > [class*="wp-block-woocommerce-checkout-order-summary-"]:last-child {
  padding-bottom: 0;
}

/* ==========================================================================
   Checkout no celular
   A página tem sete mil pixels de altura: quem termina de preencher precisa
   rolar até o fim para achar o botão. Ele passa a acompanhar a rolagem,
   colado no rodapé, como um aplicativo de compra faz.
   ========================================================================== */

@media (max-width: 767px) {
  .wc-block-checkout__actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--e-3) var(--gutter) calc(var(--e-3) + env(safe-area-inset-bottom));
    background: var(--vl-cru);
    box-shadow: 0 -8px 24px -12px rgba(45, 37, 28, .28);
  }
  .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    margin: 0;
    min-height: 54px;
  }

  /* A linha de termos fica acima do botão fixo, não dentro dele. */
  .wc-block-checkout__actions .wc-block-components-checkout-policies {
    margin-bottom: var(--e-2);
  }

  /* Nome do frete e prazo em cima, preço embaixo: em 390px o texto quebrava
     em três linhas e o valor ficava espremido num canto. */
  .wc-block-components-radio-control__option .wc-block-components-radio-control__label-group {
    display: block;
  }
  .wc-block-components-radio-control__secondary-label,
  .wc-block-components-radio-control__secondary-description {
    display: block;
    justify-self: start;
    text-align: left;
    margin-top: 4px;
    font-size: 15px;
  }
  .wc-block-components-radio-control__label {
    font-size: 14px;
    line-height: 1.35;
  }
}

/* ==========================================================================
   Galeria do produto no celular
   A foto renderizava com 306px numa tela de 390 e altura de 245: numa página
   de produto, onde a foto é o argumento principal, ela ficava do tamanho de
   uma miniatura. Passa a ocupar a largura inteira, em quadrado.
   ========================================================================== */

@media (max-width: 767px) {
  .single-product div.product .woocommerce-product-gallery {
    width: 100%;
    padding: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
  .woocommerce-product-gallery .woocommerce-product-gallery__image {
    width: 100%;
  }
  .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }

  /* Relacionados em duas colunas, como o resto do catálogo: um produto
     sozinho no meio da largura parecia erro de carregamento. */
  .single-product .related ul.products,
  .single-product .up-sells ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}