/*
Theme Name:   Way Plus Saúde Child
Theme URI:    https://www.wayplussaude.com.br/
Description:  Tema filho para Way Plus Saúde — melhorias visuais e de conversão
Author:       Way Plus Saúde
Template:     storefront
Version:      1.0.0
*/

/* =========================================================
   VARIÁVEIS DE CORES — Way Plus Saúde
   ========================================================= */
:root {
  --wp-azul:        #046697;
  --wp-azul-dark:   #034f75;
  --wp-azul-light:  #e6f4fa;
  --wp-verde:       #48c15a;
  --wp-verde-dark:  #35a345;
  --wp-verde-light: #edfaf0;
  --wp-branco:      #ffffff;
  --wp-cinza-bg:    #f7f8fa;
  --wp-cinza-borda: #e2e8f0;
  --wp-texto:       #1a2535;
  --wp-texto-muted: #64748b;
  --wp-pix:         #32bcad;
  --wp-pix-bg:      #e8faf8;
  --wp-destaque:    #ff6b35;
  --wp-radius:      10px;
  --wp-radius-lg:   16px;
  --wp-sombra:      0 2px 12px rgba(4, 102, 151, 0.10);
  --wp-sombra-hover:0 6px 24px rgba(4, 102, 151, 0.18);
  --wp-transicao:   all 0.22s ease;
}

/* =========================================================
   RESET E BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  color: var(--wp-texto);
  background: var(--wp-branco);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wp-azul); text-decoration: none; transition: var(--wp-transicao); }
a:hover { color: var(--wp-azul-dark); }

img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header,
.storefront-primary-navigation {
  background: var(--wp-azul) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 8px rgba(4,102,151,0.15);
}

.site-header .site-branding { padding: 14px 0; }

/* Barra superior de contato */
.site-header-cart .widget_shopping_cart,
.site-header .site-header-cart a {
  color: var(--wp-branco) !important;
}

.storefront-primary-navigation nav ul li a {
  color: var(--wp-branco) !important;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 14px !important;
  border-radius: 6px;
  transition: var(--wp-transicao);
}

.storefront-primary-navigation nav ul li a:hover,
.storefront-primary-navigation nav ul li.current-menu-item > a {
  background: rgba(255,255,255,0.15) !important;
  color: var(--wp-branco) !important;
}

/* Dropdown de menu */
.storefront-primary-navigation nav ul ul {
  background: var(--wp-branco) !important;
  border: 1px solid var(--wp-cinza-borda);
  border-radius: var(--wp-radius);
  box-shadow: var(--wp-sombra-hover);
  padding: 6px 0;
}

.storefront-primary-navigation nav ul ul li a {
  color: var(--wp-texto) !important;
  font-size: 13px;
  padding: 8px 16px !important;
}

.storefront-primary-navigation nav ul ul li a:hover {
  background: var(--wp-azul-light) !important;
  color: var(--wp-azul) !important;
}

/* Search no header */
.site-header .search-form input[type="search"] {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
  color: var(--wp-branco);
  padding: 8px 16px;
  font-size: 13px;
}

.site-header .search-form input[type="search"]::placeholder { color: rgba(255,255,255,0.6); }

/* Carrinho */
.site-header-cart .cart-contents {
  color: var(--wp-branco) !important;
  font-weight: 600;
}

.site-header-cart .count {
  background: var(--wp-verde) !important;
  color: var(--wp-branco) !important;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   BARRA DE BENEFÍCIOS (abaixo do header)
   ========================================================= */
.wayplus-beneficios {
  background: var(--wp-azul-light);
  border-bottom: 1px solid var(--wp-cinza-borda);
  padding: 10px 0;
}

.wayplus-beneficios ul {
  display: flex;
  justify-content: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.wayplus-beneficios ul li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wp-azul);
}

.wayplus-beneficios ul li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =========================================================
   CARDS DE PRODUTO — WooCommerce
   ========================================================= */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  grid-auto-rows: min-content !important;
  align-items: start !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

ul.products li.product {
  background: var(--wp-branco);
  border: 1px solid var(--wp-cinza-borda);
  border-radius: var(--wp-radius-lg);
  overflow: hidden;
  transition: var(--wp-transicao);
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  align-self: start !important;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  height: auto !important;
  width: 100% !important;
}

ul.products li.product .woocommerce-loop-product__link {
  overflow: hidden;
  display: block;
}

/* Nota: a remoção de textos duplicados de parcelamento (plugin de pagamento)
   é feita via JavaScript (função wayplus_limpar_textos_duplicados_cards no
   functions.php), que verifica com segurança se o elemento é texto puro
   antes de esconder — evitando apagar acidentalmente os botões de compra. */

/* Garante que QUALQUER texto solto dentro do card nunca ultrapasse a largura
   e nunca seja cortado de forma invisível (regra geral de segurança) */
ul.products li.product * {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Trava de segurança geral: nenhum filho direto do card pode esticar
   verticalmente além do seu conteúdo natural (evita bug de blocos vazios) */
ul.products li.product > * {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  align-self: auto !important;
  max-height: none;
}

ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp-sombra-hover);
  border-color: var(--wp-azul);
}

/* Imagem do produto */
ul.products li.product .woocommerce-loop-product__link img,
ul.products li.product a img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.35s ease;
  height: auto !important;
}

ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Nome do produto */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--wp-texto) !important;
  padding: 12px 14px 4px !important;
  margin: 0 !important;
  line-height: 1.35;
}

/* Preço */
ul.products li.product .price {
  padding: 0 14px 6px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--wp-azul) !important;
  display: block;
}

ul.products li.product .price del {
  color: var(--wp-texto-muted) !important;
  font-size: 13px;
  font-weight: 400;
}

ul.products li.product .price ins {
  text-decoration: none;
  color: var(--wp-azul);
}

/* Descrição curta no card */
ul.products li.product .woocommerce-product-details__short-description,
ul.products li.product p:not(.price):not(.button) {
  font-size: 12px !important;
  color: var(--wp-texto-muted) !important;
  padding: 0 14px 8px !important;
  margin: 0 !important;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Bloco de preço Pix */
.wayplus-pix-preco {
  margin: 2px 14px 10px;
  background: var(--wp-pix-bg);
  border: 1px solid #b2e8e3;
  border-radius: 8px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #1a7a6e;
  font-weight: 500;
}

.wayplus-pix-preco .pix-valor {
  font-weight: 700;
  font-size: 14px;
}

/* Parcelas */
.wayplus-parcelas {
  font-size: 12px;
  color: var(--wp-texto-muted);
  padding: 0 14px 10px;
}

/* Stars / avaliações */
ul.products li.product .star-rating {
  padding: 6px 14px 2px !important;
  margin: 0 !important;
}

.star-rating span::before,
.star-rating::before {
  color: #f59e0b !important;
}

/* Botão Adicionar ao carrinho */
body.woocommerce ul.products li.product a.button,
body.woocommerce-page ul.products li.product a.button,
ul.products li.product a.button,
ul.products li.product a.add_to_cart_button,
ul.products li.product a.ajax_add_to_cart {
  display: block !important;
  box-sizing: border-box !important;
  width: calc(100% - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: none !important;
  margin: 8px 14px 8px !important;
  background-color: var(--wp-azul) !important;
  background: var(--wp-azul) !important;
  color: var(--wp-branco) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  transition: var(--wp-transicao);
  letter-spacing: 0.02em;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

ul.products li.product a.button:hover,
ul.products li.product a.add_to_cart_button:hover {
  background-color: var(--wp-azul-dark) !important;
  background: var(--wp-azul-dark) !important;
  transform: translateY(-1px);
}

body.woocommerce ul.products li.product a.button.added,
ul.products li.product a.button.added {
  background-color: var(--wp-verde) !important;
  background: var(--wp-verde) !important;
}

/* Trava de segurança: qualquer wrapper genérico .button que NÃO seja
   o link real (a) do WooCommerce vira "invisível" como container,
   mas sem resetar agressivamente os filhos (evita quebrar botões reais
   que porventura estejam dentro de um wrapper com essa classe) */
ul.products li.product .button:not(a) {
  display: contents !important;
}

/* Botão WhatsApp no card — especificidade reforçada para vencer
   regras .woocommerce a.button que também capturam este link */
body.woocommerce ul.products li.product a.wayplus-whatsapp-btn,
body.woocommerce-page ul.products li.product a.wayplus-whatsapp-btn,
a.wayplus-whatsapp-btn,
.wayplus-whatsapp-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: calc(100% - 28px) !important;
  margin: 0 14px 14px !important;
  background-color: #25D366 !important;
  background: #25D366 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  cursor: pointer;
  transition: var(--wp-transicao);
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

body.woocommerce ul.products li.product a.wayplus-whatsapp-btn:hover,
a.wayplus-whatsapp-btn:hover,
.wayplus-whatsapp-btn:hover {
  background-color: #1ebe5a !important;
  background: #1ebe5a !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.wayplus-whatsapp-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Badge de desconto */
ul.products li.product .onsale,
.wayplus-badge-desconto {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  background: var(--wp-destaque) !important;
  color: var(--wp-branco) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  letter-spacing: 0.03em !important;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(255,107,53,0.3);
}

/* Badge kit */
.wayplus-badge-kit {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--wp-azul);
  color: var(--wp-branco);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}

/* =========================================================
   PÁGINA INDIVIDUAL DO PRODUTO
   ========================================================= */
.single-product div.product .product_title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--wp-texto) !important;
  line-height: 1.25;
}

.single-product div.product p.price {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--wp-azul) !important;
}

/* Bloco Pix na página do produto */
.wayplus-pix-single {
  background: var(--wp-pix-bg);
  border: 1px solid #b2e8e3;
  border-radius: var(--wp-radius);
  padding: 14px 18px;
  margin: 10px 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a7a6e;
  font-weight: 500;
}

.wayplus-pix-single .pix-valor {
  font-size: 20px;
  font-weight: 700;
}

/* Botão comprar principal — especificidade reforçada para vencer plugins
   (WooCommerce Mercado Pago e similares costumam usar .button.alt) */
body.single-product .single_add_to_cart_button,
body.woocommerce #respond input#submit,
body.woocommerce a.button,
body.woocommerce a.button.alt,
body.woocommerce button.button,
body.woocommerce button.button.alt,
body.woocommerce-page a.button,
body.woocommerce-page a.button.alt,
body.woocommerce-page button.button,
body.woocommerce-page button.button.alt,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background-color: var(--wp-azul) !important;
  background: var(--wp-azul) !important;
  color: var(--wp-branco) !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border: none !important;
  transition: var(--wp-transicao);
  letter-spacing: 0.02em;
}

body.single-product .single_add_to_cart_button:hover,
body.woocommerce a.button:hover,
body.woocommerce a.button.alt:hover,
body.woocommerce button.button:hover {
  background-color: var(--wp-azul-dark) !important;
  background: var(--wp-azul-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(4,102,151,0.3);
}

/* Abas do produto */
.woocommerce-tabs ul.tabs li a {
  color: var(--wp-texto-muted) !important;
  font-weight: 500;
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--wp-azul) !important;
  border-bottom: 2px solid var(--wp-azul) !important;
}

/* Reviews */
#reviews #comments ol.commentlist li .comment-text {
  border-radius: var(--wp-radius);
  border: 1px solid var(--wp-cinza-borda);
  padding: 16px;
  background: var(--wp-cinza-bg);
}

#reviews .star-rating { color: #f59e0b !important; }

/* =========================================================
   BOTÕES GERAIS
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: var(--wp-transicao);
}

/* Botão secundário / outline */
.wayplus-btn-outline {
  background: transparent !important;
  border: 2px solid var(--wp-azul) !important;
  color: var(--wp-azul) !important;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: var(--wp-transicao);
}

.wayplus-btn-outline:hover {
  background: var(--wp-azul) !important;
  color: var(--wp-branco) !important;
}

/* =========================================================
   SEÇÃO DE BENEFÍCIOS / TRUST ICONS (home)
   ========================================================= */
.wayplus-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--wp-cinza-borda);
  border-bottom: 1px solid var(--wp-cinza-borda);
  background: var(--wp-branco);
}

.wayplus-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--wp-texto);
}

.wayplus-trust-item .icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wp-azul-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wayplus-trust-item .icon-circle svg {
  width: 20px;
  height: 20px;
  color: var(--wp-azul);
}

/* =========================================================
   CARRINHO E CHECKOUT
   ========================================================= */
.woocommerce-cart table.cart td.actions .coupon .input-text {
  border-radius: 8px 0 0 8px;
  border: 1px solid var(--wp-cinza-borda);
  padding: 10px 14px;
}

.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  background: var(--wp-verde) !important;
  font-size: 16px !important;
  padding: 16px 32px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
  background: var(--wp-verde-dark) !important;
}

/* =========================================================
   NEWSLETTER / POP-UP DESCONTO
   ========================================================= */
.wayplus-newsletter-bar {
  background: linear-gradient(90deg, var(--wp-azul) 0%, var(--wp-azul-dark) 100%);
  color: var(--wp-branco);
  text-align: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
}

.wayplus-newsletter-bar strong { color: #7dd3f7; }

.wayplus-newsletter-bar .close-bar {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.site-footer {
  background: #0d2035 !important;
  color: rgba(255,255,255,0.8) !important;
  padding-top: 40px !important;
}

.site-footer a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px;
}

.site-footer a:hover { color: var(--wp-verde) !important; }

.site-footer .widget-title {
  color: var(--wp-branco) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--wp-verde);
  display: inline-block;
}

.site-footer .site-info {
  background: #081624 !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 13px !important;
  padding: 14px 0 !important;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* =========================================================
   SEÇÃO "COMPRAR POR BENEFÍCIO" (menu categorias)
   ========================================================= */
.wayplus-beneficio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 24px 0;
}

.wayplus-beneficio-item {
  background: var(--wp-branco);
  border: 1px solid var(--wp-cinza-borda);
  border-radius: var(--wp-radius-lg);
  padding: 18px 12px;
  text-align: center;
  text-decoration: none;
  color: var(--wp-texto);
  font-size: 13px;
  font-weight: 500;
  transition: var(--wp-transicao);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wayplus-beneficio-item:hover {
  border-color: var(--wp-azul);
  background: var(--wp-azul-light);
  color: var(--wp-azul);
  transform: translateY(-3px);
  box-shadow: var(--wp-sombra);
}

.wayplus-beneficio-item .icone {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--wp-azul-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 768px) {
  ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2 {
    font-size: 13px !important;
    padding: 8px 10px 2px !important;
  }

  ul.products li.product .price {
    font-size: 15px !important;
    padding: 0 10px 4px !important;
  }

  ul.products li.product a.button,
  ul.products li.product a.add_to_cart_button,
  .wayplus-whatsapp-btn {
    width: calc(100% - 20px) !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    font-size: 12px !important;
    padding: 9px 10px !important;
    height: auto !important;
    flex: none !important;
  }

  ul.products li.product .button:not(a) {
    display: contents !important;
  }

  .wayplus-trust { gap: 14px; }
  .wayplus-trust-item { font-size: 12px; }

  .wayplus-beneficios ul { gap: 14px; }

  .single-product div.product .product_title { font-size: 20px !important; }
}

@media (max-width: 480px) {
  ul.products {
    grid-template-columns: 1fr !important;
  }
}