/*
Theme Name:  Tropical Móveis
Description: Tema minimalista para as páginas nativas do WooCommerce (carrinho, checkout, minha conta).
             Só a identidade da marca (azul, laranja pontual, Inter, cantos retos). A vitrine/catálogo
             seguem no Astro. Autor: FOLIVEIRA.PRO
Author:      FOLIVEIRA.PRO
Author URI:  https://fernandodeoliveira.pro
Version:     0.2.1
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: tropical
*/

/* ================================================================
   Tokens — mesmos do site (site/src/styles/global.css)
================================================================ */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --text: #1d2433;
  --muted: #667085;
  --brand: #213583;
  --brand-escuro: #1a2a68;
  --brand-soft: #edf1fb;
  --accent: #f37324;
  --accent-hover: #d6590f;
  --ok: #1d7a4d;
  --ok-soft: #e5f3ec;
  --border: #e4e7ee;
  --border-forte: #d5dae5;
  --radius: 8px;
  --radius-sm: 5px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 700; }
h2 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; }
.container { width: min(1040px, 92vw); margin: 0 auto; }

/* ================================================================
   Header — enxuto: logo + voltar ao catálogo
================================================================ */
.td-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.td-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 0; }
.td-brand img { width: 150px; height: auto; }
.td-voltar {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 0.9rem; color: var(--brand);
  padding: 8px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .15s ease, background .15s ease;
}
.td-voltar:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ================================================================
   Conteúdo
================================================================ */
.td-main { padding: 26px 0 56px; min-height: 46vh; }

/* ================================================================
   Botões
================================================================ */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.wc-block-cart__submit-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand) !important; color: #fff !important;
  border: 1.5px solid transparent !important; border-radius: var(--radius-sm) !important;
  padding: 12px 22px !important; font-weight: 600 !important; font-size: 0.95rem !important;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover { background: var(--brand-escuro) !important; color: #fff !important; }

.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--accent) !important; }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--accent-hover) !important; }

/* ================================================================
   Campos de formulário
================================================================ */
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce input[type='text'],
.woocommerce input[type='email'],
.woocommerce input[type='tel'],
.woocommerce input[type='password'],
.woocommerce input[type='number'],
.woocommerce select,
.wc-block-components-text-input input,
.wc-block-components-select__select {
  padding: 12px 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg) !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
  outline: none;
}
.woocommerce .form-row input.input-text:focus,
.woocommerce input:focus,
.woocommerce select:focus,
.wc-block-components-text-input input:focus {
  border-color: var(--brand) !important;
  background: var(--surface) !important;
  box-shadow: 0 0 0 3px rgb(33 53 131 / 0.1) !important;
}
.woocommerce .form-row label,
.woocommerce label { font-size: 0.86rem; font-weight: 600; color: var(--text); }

/* ================================================================
   Cartões / tabelas do Woo — borda fina, sem sombra
================================================================ */
.woocommerce table.shop_table,
.wc-block-cart-items,
.woocommerce-cart-form,
.wc-block-components-sidebar,
.wc-block-checkout__sidebar,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.woocommerce table.shop_table, .wc-block-cart-items { border-collapse: separate; }
.woocommerce-cart-form, .wc-block-cart__main { padding: 14px 16px; }
.wc-block-components-sidebar, .wc-block-checkout__sidebar { padding: 16px; }

/* Minha conta — navegação lateral */
.woocommerce-MyAccount-navigation { padding: 8px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 0.92rem; color: var(--text);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--bg); color: var(--brand); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--brand-soft); color: var(--brand); }
.woocommerce-MyAccount-content { padding: 22px 24px; }

/* ================================================================
   Avisos do Woo
================================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: var(--radius-sm) !important;
  border-top: 0 !important;
  border-left: 4px solid var(--brand) !important;
  background: var(--brand-soft) !important;
  color: var(--brand-escuro) !important;
  padding: 12px 16px !important;
  margin: 0 0 16px !important;
  line-height: 1.45;
}
/* botão dentro do aviso acompanha o texto, sem sobrepor */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  flex: none; margin: 0 !important; float: none !important;
}
.woocommerce-error { border-left-color: #d64545 !important; background: #fdecec !important; color: #a51b1b !important; }
.woocommerce-message { border-left-color: var(--ok) !important; background: var(--ok-soft) !important; color: var(--ok) !important; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button) { font-weight: 700; }

/* o ícone vem da fonte WooCommerce e aparece como glifo estranho — tira */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none !important; content: none !important; }

/* botões que ficam dentro de avisos/tabelas não herdam a largura cheia */
.woocommerce-notices-wrapper .button { width: auto !important; }

/* banner de aviso dos blocos do Woo (mesmo visual) */
.wc-block-components-notice-banner {
  border-radius: var(--radius-sm) !important;
  border: 0 !important;
  border-left: 4px solid var(--brand) !important;
  background: var(--brand-soft) !important;
  color: var(--brand-escuro) !important;
  padding: 12px 16px !important;
}.wc-block-components-notice-banner > svg { color: var(--brand); }
.wc-block-components-notice-banner.is-success { border-left-color: var(--ok) !important; background: var(--ok-soft) !important; color: var(--ok) !important; }
.wc-block-components-notice-banner.is-error { border-left-color: #d64545 !important; background: #fdecec !important; color: #a51b1b !important; }
.wc-block-components-notice-banner .wc-block-components-notice-banner__content { align-items: center; }

/* ================================================================
   Checkout próprio (Distribuidora / Loja) — mesma cara do site
   ================================================================ */
.tropical-checkout-intro,
.tropical-varejo-checkout-intro {
  margin: 0 0 22px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--brand-soft), var(--surface));
}
.tropical-checkout-kicker,
.tropical-varejo-checkout-kicker {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 6px;
}
.tropical-checkout-intro h1,
.tropical-varejo-checkout-intro h1 { margin: 0 0 0.25em; }
.tropical-checkout-intro p,
.tropical-varejo-checkout-intro p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* layout do checkout clássico: formulário + resumo lado a lado no desktop.
   As larguras abaixo (min 320px no resumo, 1.55fr nos campos) são as FINAIS —
   o bloco de checkout.css do plugin não deve reaplicar float/width, senão os
   dois competem e o resumo fica com ~170px (colunas espremidas). */
.woocommerce-checkout .col2-set { width: 100%; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
@media (min-width: 920px) {
  .woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(380px, 1fr);
    grid-template-areas: "campos resumo";
    gap: 26px;
    align-items: start;
  }
  .woocommerce-checkout form.checkout #customer_details { grid-area: campos; }
  .woocommerce-checkout form.checkout #order_review,
  .woocommerce-checkout form.checkout #order_review_heading { grid-area: resumo; }
  .woocommerce-checkout form.checkout #order_review {
    position: sticky; top: 18px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); padding: 18px;
  }
  .woocommerce-checkout form.checkout #order_review_heading { margin-top: 0; }
}

/* ================================================================
   Footer — uma linha
================================================================ */
.td-footer { border-top: 1px solid var(--border); background: var(--surface); }
.td-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; color: var(--muted); font-size: 0.83rem;
}
.td-footer a:hover { color: var(--brand); }
.td-footer__links { display: flex; gap: 16px; flex-wrap: wrap; }

/* ================================================================
   Responsivo
=============================================================== */
@media (max-width: 760px) {
  .td-header__inner { padding: 12px 0; }
  .td-brand img { width: 126px; }
  .td-voltar { padding: 8px 12px; font-size: 0.85rem; }
    .td-footer__inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* ================================================================
   WooCommerce: carrinho, checkout e conta em todas as larguras
================================================================ */
body.woocommerce-cart .td-main > .container,
body.woocommerce-checkout .td-main > .container,
body.woocommerce-account .td-main > .container {
  width: min(1280px, calc(100% - 48px));
}

.woocommerce,
.woocommerce-page,
.woocommerce form,
.woocommerce table,
.wc-block-cart,
.wc-block-checkout {
  max-width: 100%;
  min-width: 0;
}

.woocommerce .form-row,
.woocommerce .form-row input,
.woocommerce .form-row select,
.woocommerce .form-row textarea,
.woocommerce .select2-container,
.wc-block-components-text-input,
.wc-block-components-select {
  max-width: 100%;
  min-width: 0;
}

.woocommerce .form-row input.input-text,
.woocommerce .form-row select,
.woocommerce .form-row textarea,
.woocommerce .select2-container .select2-selection {
  width: 100%;
  min-height: 46px;
}

.woocommerce button,
.woocommerce a.button,
.woocommerce input.button,
.wc-block-components-button,
.wc-block-cart__submit-button {
  min-height: 44px;
  white-space: normal;
}

/* Tabela do carrinho clássico: medidas confortáveis no desktop e sem rolagem lateral. */
.woocommerce-cart .woocommerce-cart-form {
  overflow: visible;
  padding: 18px;
}

.woocommerce-cart .shop_table {
  width: 100%;
  table-layout: auto;
}

.woocommerce-cart .shop_table th,
.woocommerce-cart .shop_table td {
  padding: 14px 12px;
  vertical-align: middle;
}

.woocommerce-cart .product-thumbnail img {
  width: 92px;
  min-width: 72px;
  height: auto;
  border-radius: 8px;
}

.woocommerce-cart .product-name {
  min-width: 180px;
  overflow-wrap: anywhere;
}

.woocommerce-cart .quantity .qty {
  width: 4.5em;
  min-height: 42px;
}

.woocommerce-cart .cart-collaterals {
  margin-top: 24px;
}

.woocommerce-cart .cart_totals {
  width: min(100%, 520px);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.woocommerce-cart .cart_totals h2 {
  margin-bottom: 16px;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  width: 100%;
  min-height: 50px;
}

/* Blocos de carrinho e checkout mantêm o fluxo nativo e podem encolher sem estourar a viewport. */
.wc-block-cart__main,
.wc-block-cart__sidebar,
.wc-block-checkout__main,
.wc-block-checkout__sidebar,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
  min-width: 0;
  max-width: 100%;
}

.wc-block-cart-items__row,
.wc-block-components-order-summary-item {
  overflow-wrap: anywhere;
}

.wc-block-components-product-name,
.wc-block-components-order-summary-item__description {
  overflow-wrap: anywhere;
}

.wc-block-components-quantity-selector {
  min-height: 42px;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  min-width: 0;
}

@media (max-width: 1024px) {
  body.woocommerce-cart .td-main > .container,
  body.woocommerce-checkout .td-main > .container,
  body.woocommerce-account .td-main > .container {
    width: min(100% - 36px, 900px);
  }

  .woocommerce-cart .woocommerce-cart-form {
    padding: 12px;
  }

  .woocommerce-cart .shop_table th,
  .woocommerce-cart .shop_table td {
    padding: 11px 8px;
  }

  .woocommerce-cart .product-thumbnail img {
    width: 76px;
  }
}

@media (max-width: 760px) {
  .container,
  body.woocommerce-cart .td-main > .container,
  body.woocommerce-checkout .td-main > .container,
  body.woocommerce-account .td-main > .container {
    width: calc(100% - 28px);
  }

  .td-main {
    padding: 20px 0 36px;
  }

  .td-header__inner {
    gap: 10px;
  }

  .td-voltar {
    min-height: 42px;
    white-space: nowrap;
  }

  .woocommerce-cart .woocommerce-cart-form {
    padding: 10px;
  }

  .woocommerce-cart .shop_table thead {
    display: none;
  }

  .woocommerce-cart .shop_table,
  .woocommerce-cart .shop_table tbody {
    display: block;
    width: 100%;
    border: 0;
  }

  .woocommerce-cart .shop_table tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas:
      "thumb name"
      "thumb price"
      "thumb quantity"
      "thumb subtotal";
    align-items: center;
    column-gap: 14px;
    row-gap: 5px;
    width: 100%;
    margin: 0 0 12px;
    padding: 14px 12px;
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    background: var(--surface);
  }

  .woocommerce-cart .shop_table tr.cart_item > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 3px 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  .woocommerce-cart .shop_table tr.cart_item > td::before {
    float: none !important;
    margin: 0 auto 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
  }

  .woocommerce-cart .shop_table td.product-remove {
    position: absolute;
    z-index: 2;
    top: 8px;
    right: 8px;
    display: block;
    width: auto;
    padding: 0 !important;
  }

  .woocommerce-cart .shop_table td.product-remove::before {
    display: none;
  }

  .woocommerce-cart .shop_table td.product-remove .remove {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff1f1;
    color: #b42318 !important;
    font-size: 24px;
    line-height: 1;
  }

  .woocommerce-cart .shop_table td.product-thumbnail {
    grid-area: thumb;
    display: block;
    align-self: start;
    width: 76px;
  }

  .woocommerce-cart .shop_table td.product-thumbnail::before {
    display: none;
  }

  .woocommerce-cart .product-thumbnail img {
    width: 76px;
    height: 76px;
    object-fit: cover;
  }

  .woocommerce-cart .shop_table td.product-name {
    grid-area: name;
    display: block;
    min-width: 0;
    padding-right: 34px !important;
    text-align: left !important;
    font-weight: 700;
  }

  .woocommerce-cart .shop_table td.product-name::before {
    display: none;
  }

  .woocommerce-cart .shop_table td.product-price { grid-area: price; }
  .woocommerce-cart .shop_table td.product-quantity { grid-area: quantity; }
  .woocommerce-cart .shop_table td.product-subtotal { grid-area: subtotal; font-weight: 700; }

  .woocommerce-cart .shop_table td.product-price .amount,
  .woocommerce-cart .shop_table td.product-subtotal .amount {
    white-space: nowrap;
  }

  .woocommerce-cart .shop_table .product-quantity .quantity {
    margin-left: auto;
  }

  .woocommerce-cart .shop_table .product-quantity .qty {
    width: 4em;
  }

  .woocommerce-cart .shop_table tr:last-child td.actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 4px !important;
  }

  .woocommerce-cart .shop_table td.actions .coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
  }

  .woocommerce-cart .shop_table td.actions .coupon .input-text {
    float: none;
    width: 100%;
    min-width: 0;
  }

  .woocommerce-cart .shop_table td.actions .button,
  .woocommerce-cart .shop_table td.actions button {
    width: 100%;
    margin: 0 !important;
  }

  .woocommerce-cart .cart_totals {
    width: 100%;
    padding: 16px;
  }

  .woocommerce-cart .cart_totals table th,
  .woocommerce-cart .cart_totals table td {
    padding: 10px 6px;
    overflow-wrap: anywhere;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce-MyAccount-content {
    float: none;
    width: 100%;
    margin: 0 0 16px;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .woocommerce-MyAccount-content {
    padding: 16px;
    overflow-x: auto;
  }

  .woocommerce-MyAccount-content table {
    min-width: 560px;
  }

  .td-footer__links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .td-header__inner {
    align-items: center;
  }

  .td-brand img {
    width: 112px;
  }

  .td-voltar {
    gap: 4px;
    padding: 7px 9px;
    font-size: 0.78rem;
  }

  h1 {
    font-size: 1.55rem;
  }

  .woocommerce-cart .shop_table tr.cart_item {
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 11px;
    padding: 12px 10px;
  }

  .woocommerce-cart .shop_table td.product-thumbnail,
  .woocommerce-cart .product-thumbnail img {
    width: 64px;
  }

  .woocommerce-cart .product-thumbnail img {
    height: 64px;
  }

  .woocommerce-cart .shop_table td.product-price::before,
  .woocommerce-cart .shop_table td.product-quantity::before,
  .woocommerce-cart .shop_table td.product-subtotal::before {
    font-size: 0.75rem;
  }

  .woocommerce-cart .shop_table td.actions .coupon {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    grid-template-columns: 1fr;
  }

  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    align-items: stretch;
    flex-direction: column;
  }

  .woocommerce-notices-wrapper .button {
    width: 100% !important;
  }
}