/*
Theme Name: Aletto
Theme URI: https://alettoshop.com.br
Description: Tema da loja Aletto. Tema-filho do Storefront, replicando a identidade visual da loja original.
Author: Aletto
Version: 2.0.0
Template: storefront
Text Domain: aletto
*/

/* ==========================================================================
   1. Variaveis (extraidas da loja original)
   ========================================================================== */

:root {
  --aletto-turquesa:        #40e0d0;
  --aletto-verde-agua:      #24c7b8;
  --aletto-verde-agua-hover:#18867c;
  --aletto-verde-compra:    #0fb930;
  --aletto-verde-estoque:   #00d864;
  --aletto-roxo:            #7a00ff;
  --aletto-preco-promo:     #0fb930;
  --aletto-preco-normal:    #606781;
  --aletto-preco-riscado:   #a4a9be;
  --aletto-heading:         #737b97;
  --aletto-texto:           #000000;
  --aletto-borda:           #e7e7e7;
  --aletto-borda-form:      #dadada;
  --aletto-estrela:         #ffce00;
  --aletto-erro:            #f71b1b;
  --aletto-branco:          #ffffff;
  --aletto-raio:            12px;
  --aletto-fonte:           'Poppins', sans-serif;
  --aletto-base:            14px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.site-title,
.widget h1, .widget h2, .widget h3 {
  font-family: var(--aletto-fonte);
}

body {
  font-size: var(--aletto-base);
  color: var(--aletto-texto);
  background-color: var(--aletto-branco);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--aletto-heading);
  font-weight: 400;
}

a {
  color: var(--aletto-verde-agua);
  text-decoration: underline;
}

a:hover,
a:focus {
  color: var(--aletto-verde-agua-hover);
}

/* ==========================================================================
   3. Barra de anuncio
   ========================================================================== */

.aletto-announcement-bar {
  background-color: var(--aletto-verde-agua);
  color: var(--aletto-branco);
  text-align: center;
  padding: 0.65em 1em;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.aletto-announcement-bar a {
  color: var(--aletto-branco);
}

/* ==========================================================================
   4. Cabecalho
   ========================================================================== */

.site-header {
  background-color: var(--aletto-turquesa) !important;
  border-bottom: none;
  padding: 2em 0;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.05);
}

.aletto-header__inner {
  display: flex;
  align-items: center;
  gap: 2em;
  flex-wrap: nowrap;
}

.aletto-header__logo {
  flex: 0 0 auto;
  max-width: 135px;
}

.aletto-header__logo img {
  max-width: 135px;
  height: auto;
  display: block;
}

.aletto-header__logo .site-title,
.aletto-header__logo .site-title a {
  color: var(--aletto-branco);
  font-size: 1.5em;
  font-weight: 700;
  margin: 0;
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aletto-header__logo .site-description {
  display: none;
}

/* Campo de busca */
.aletto-header__search {
  flex: 1 1 240px;
  min-width: 0;
}

.aletto-header__search form {
  position: relative;
  display: flex;
  margin: 0;
}

.aletto-header__search input[type="search"] {
  width: 100%;
  border: none;
  border-radius: var(--aletto-raio);
  background-color: var(--aletto-branco);
  color: var(--aletto-texto);
  font-family: var(--aletto-fonte);
  font-size: 15px;
  padding: 0.95em 3.8em 0.95em 1.2em;
  box-shadow: none;
}

.aletto-header__search input[type="search"]::placeholder {
  color: #9aa0b5;
}

.aletto-header__search input[type="search"]:focus {
  outline: 2px solid rgba(255, 255, 255, 0.55);
}

.aletto-header__search button[type="submit"] {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 29px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
  line-height: 1;
  cursor: pointer;
}

.aletto-header__search button[type="submit"]:hover {
  background-color: transparent;
  transform: translateY(-50%);
}

.aletto-header__search button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--aletto-verde-agua);
  stroke-width: 2;
  display: block;
}

.aletto-header__search button[type="submit"]:hover svg {
  stroke: var(--aletto-verde-agua-hover);
}

/*
 * Botao de icone (abre a busca) e botao de fechar: existem no markup em
 * qualquer largura, mas só aparecem no mobile (ver @media max-width:900px).
 * No desktop a busca continua exatamente como estava.
 *
 * ".aletto-header__actions .aletto-search-toggle" (duas classes) para
 * garantir que vença ".aletto-action { display:flex }" (uma classe) --
 * mesma especificidade nao bastaria, pois ".aletto-action" vem depois
 * no arquivo. O reset de background/border/padding/font evita que os
 * dois herdem o estilo generico de "button" (secao 7, mais abaixo).
 */
.aletto-header__actions .aletto-search-toggle,
.aletto-search-fechar {
  display: none;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}

/* Acoes do cabecalho */
.aletto-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1.3em;
}

.aletto-action {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--aletto-branco);
  text-decoration: none;
  line-height: 1.25;
}

.aletto-action:hover {
  color: var(--aletto-branco);
  opacity: 0.85;
  text-decoration: none;
}

.aletto-action svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--aletto-branco);
  stroke-width: 1.8;
  flex-shrink: 0;
}

.aletto-action__label {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  opacity: 0.92;
}

.aletto-action__value {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.aletto-action--cart {
  position: relative;
}

.aletto-action--cart .aletto-cart-count {
  position: absolute;
  top: -6px;
  left: 13px;
  background-color: var(--aletto-verde-agua);
  color: var(--aletto-branco);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.aletto-action--cart .aletto-action__value {
  font-size: 15px;
}

/* ==========================================================================
   4b. Popover de conta/login
   ========================================================================== */

.aletto-conta {
  position: relative;
}

.aletto-conta-popover {
  position: absolute;
  top: calc(100% + 14px);
  right: -8px;
  width: min(92vw, 340px);
  z-index: 500;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.95) translateY(-4px);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.aletto-conta-popover[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
}

.aletto-conta-popover__seta {
  position: absolute;
  top: -6px;
  right: 22px;
  width: 14px;
  height: 14px;
  background-color: var(--aletto-branco, #fff);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}

.aletto-conta-popover__inner {
  position: relative;
  max-height: min(80vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  background-color: var(--aletto-branco, #fff);
  color: var(--aletto-texto, #000);
  border-radius: var(--aletto-raio, 12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.aletto-conta-popover__titulo {
  margin: 0 0 4px;
  font-size: 18px;
  color: var(--aletto-heading, #737b97);
}

.aletto-conta-popover__legenda {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--aletto-heading, #737b97);
}

/* Formulario (entrar / criar conta / recuperar senha) */
.aletto-conta-form__campo {
  margin: 0 0 14px;
}

.aletto-conta-form__campo label {
  display: block;
  margin-bottom: 0.4em;
  font-size: 12px;
  font-weight: 600;
  color: var(--aletto-heading, #737b97);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.aletto-conta-form__campo input[type="text"],
.aletto-conta-form__campo input[type="email"],
.aletto-conta-form__campo input[type="password"] {
  width: 100%;
  padding: 0.75em 0.9em;
  border: 1px solid var(--aletto-borda-form, #dadada);
  border-radius: 8px;
  font-family: var(--aletto-fonte);
  font-size: 14px;
  color: var(--aletto-texto, #000);
  background-color: #fff;
  box-shadow: none;
}

.aletto-conta-form__campo input:focus {
  outline: 2px solid var(--aletto-verde-agua, #24c7b8);
  outline-offset: 1px;
  border-color: var(--aletto-verde-agua, #24c7b8);
}

.aletto-conta-form__lembrar {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--aletto-heading, #737b97);
}

.aletto-conta-form__lembrar label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

.aletto-conta-form__enviar {
  display: block;
  width: 100%;
  margin-top: 4px;
}

.aletto-conta-popover__rodape {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--aletto-borda, #e7e7e7);
  font-size: 13px;
  color: var(--aletto-heading, #737b97);
}

.aletto-conta-popover__rodape p {
  margin: 0 0 8px;
}

.aletto-conta-popover__rodape p:last-child {
  margin-bottom: 0;
}

.aletto-conta-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--aletto-verde-agua, #24c7b8);
  text-decoration: underline;
  cursor: pointer;
}

.aletto-conta-link:hover {
  color: var(--aletto-verde-agua-hover, #18867c);
}

/* Avisos nativos do WooCommerce (erro/sucesso de login, cadastro, recuperacao) */
.aletto-conta-popover__avisos {
  margin: 0 0 14px;
}

.aletto-conta-popover__avisos ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aletto-conta-popover__avisos li {
  padding: 0.6em 0.8em;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 6px;
}

.aletto-conta-popover__avisos .woocommerce-error {
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.aletto-conta-popover__avisos .woocommerce-error li {
  background-color: #fdeaea;
  color: var(--aletto-erro, #f71b1b);
}

.aletto-conta-popover__avisos .woocommerce-message,
.aletto-conta-popover__avisos .woocommerce-info {
  padding: 0.6em 0.8em;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  background-color: #eafaf3;
  color: var(--aletto-verde-compra, #0fb930);
  list-style: none;
}

/* Popover de quem ja esta logado */
.aletto-conta-popover__saudacao {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--aletto-texto, #000);
}

.aletto-conta-popover__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aletto-conta-popover__links li {
  border-top: 1px solid var(--aletto-borda, #e7e7e7);
}

.aletto-conta-popover__links li:first-child {
  border-top: none;
}

.aletto-conta-popover__links a {
  display: block;
  padding: 0.8em 0.2em;
  color: var(--aletto-texto, #000);
  text-decoration: none;
  font-size: 14.5px;
}

.aletto-conta-popover__links a:hover {
  color: var(--aletto-verde-agua, #24c7b8);
  text-decoration: none;
}

/*
 * Mobile: mantemos o popover compacto e ancorado ao canto direito da tela
 * (nao 100vw) de proposito, para nao se sobrepor a barra de busca
 * recolhivel (assets/aletto-search.js) nem ao drawer, que ja ocupam a
 * largura toda quando abertos.
 */
@media (max-width: 767px) {
  .aletto-conta-popover {
    position: fixed;
    /* "top" real e definido via JS ao abrir (assets/aletto-account.js),
       com base na altura de verdade do header naquele momento. */
    right: 10px;
    left: 10px;
    width: auto;
    max-width: 360px;
    margin-left: auto;
    transform: translateY(-6px);
  }

  .aletto-conta-popover[aria-hidden="false"] {
    transform: translateY(0);
  }

  .aletto-conta-popover__seta {
    display: none;
  }
}

/* Esconde elementos padrao do Storefront no cabecalho */
.site-header .site-search,
.site-header .storefront-primary-navigation,
.site-header .site-header-cart,
.site-header .menu-toggle,
.site-header .site-branding {
  display: none;
}

.aletto-header__inner .site-branding {
  display: block;
}

/* ==========================================================================
   5. Barra de navegacao (branca, abaixo do cabecalho)
   ========================================================================== */

.aletto-nav {
  background-color: var(--aletto-branco);
  border-bottom: 1px solid var(--aletto-borda);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.aletto-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4em;
  flex-wrap: wrap;
  padding: 0.9em 0;
}

.aletto-nav__toggle {
  background: none;
  border: none;
  padding: 0.3em;
  cursor: pointer;
  line-height: 1;
  color: var(--aletto-heading);
}

.aletto-nav__toggle:hover {
  background: none;
  color: var(--aletto-verde-agua);
  transform: none;
}

.aletto-nav__toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  display: block;
}

.aletto-nav ul {
  display: flex;
  align-items: center;
  gap: 2.2em;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.aletto-nav ul li {
  margin: 0;
  position: relative;
}

.aletto-nav ul li a {
  color: var(--aletto-heading);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.3em 0;
  display: block;
  transition: color 0.15s ease;
}

.aletto-nav ul li a:hover,
.aletto-nav ul li.current-menu-item > a {
  color: var(--aletto-verde-agua);
}

.aletto-nav ul li a:focus-visible {
  outline: 2px solid var(--aletto-verde-agua);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Itens com submenu: seta indicando que abrem por clique. */
.aletto-nav .menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.aletto-nav .menu-item-has-children > a::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.aletto-nav .menu-item-has-children.is-aberto > a::after {
  transform: rotate(-135deg);
}

/* Submenu */
.aletto-nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--aletto-branco);
  border: 1px solid var(--aletto-borda);
  border-radius: var(--aletto-raio);
  padding: 0.6em 0;
  min-width: 210px;
  z-index: 200;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/*
 * Abre por clique (classe "is-aberto" via assets/aletto-nav.js) e, como
 * reforco de acessibilidade sem depender do JS, quando o item recebe foco
 * de teclado (:focus-within). Nao usa mais :hover sozinho.
 */
.aletto-nav ul li.is-aberto > ul,
.aletto-nav ul li:focus-within > ul {
  display: flex;
}

.aletto-nav ul ul li a {
  padding: 0.55em 1.2em;
  text-transform: none;
  font-weight: 400;
  font-size: 13.5px;
}

@media (max-width: 767px) {
  .aletto-nav ul {
    gap: 1.1em;
  }
  .aletto-nav ul li a {
    font-size: 12px;
  }
}

/* Barra degrade logo abaixo da navegacao (referencia: color-line do Shopify). */
.aletto-nav-degrade {
  height: 6px;
  background: linear-gradient(to right, #e7e7e7, #a4a9be, #24c7b8, #40e0d0);
}

/* ==========================================================================
   6. Titulos de secao (com traco turquesa)
   ========================================================================== */

.aletto-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 1.8em;
}

.aletto-section-head__title,
.storefront-product-section-title,
section.storefront-product-section > h2,
.wc-block-grid__title {
  color: var(--aletto-heading);
  font-size: 25px;
  font-weight: 400;
  margin: 0 0 0.35em;
  padding-bottom: 0.35em;
  position: relative;
  display: inline-block;
}

.aletto-section-head__title::after,
.storefront-product-section-title::after,
section.storefront-product-section > h2::after,
.wc-block-grid__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 190px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--aletto-verde-agua);
}

.aletto-section-head__link {
  color: var(--aletto-verde-agua);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}

.aletto-section-head__link:hover {
  color: var(--aletto-verde-agua-hover);
  text-decoration: underline;
}

/* ==========================================================================
   7. Botoes
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
.added_to_cart,
.widget a.button {
  background-color: var(--aletto-verde-compra);
  color: var(--aletto-branco);
  border-radius: var(--aletto-raio);
  font-family: var(--aletto-fonte);
  font-weight: 600;
  border: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
.added_to_cart:hover,
.widget a.button:hover {
  background-color: var(--aletto-verde-compra);
  color: var(--aletto-branco);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

button.alt,
.button.alt,
.woocommerce .button.alt,
.single_add_to_cart_button,
.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--aletto-verde-compra);
  color: var(--aletto-branco);
  border-radius: var(--aletto-raio);
  font-weight: 600;
}

button.alt:hover,
.button.alt:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--aletto-verde-compra);
  color: var(--aletto-branco);
  filter: brightness(1.08);
}

/* ==========================================================================
   8. Grade de produtos
   ========================================================================== */

ul.products {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4em;
  margin: 0 0 2.5em;
}

ul.products::before,
ul.products::after {
  display: none;
}

ul.products li.product {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  background-color: var(--aletto-branco);
  border-radius: var(--aletto-raio);
  padding: 1em 1em 1.2em;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

ul.products li.product:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

@media (max-width: 1200px) {
  ul.products { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  ul.products { grid-template-columns: repeat(2, 1fr); gap: 0.9em; }
}

ul.products li.product a img {
  border-radius: calc(var(--aletto-raio) - 4px);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin-bottom: 1em;
  background-color: var(--aletto-branco);
}

/* Marca (vendor) */
.aletto-vendor {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--aletto-heading);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.aletto-vendor:hover {
  color: var(--aletto-verde-agua);
}

/* Titulo - ate 2 linhas, com reticencias somente depois da 2a linha
   quando o nome nao couber (ja funcionava). "min-height" e o ajuste real
   desta etapa: sem ele, um nome curto (1 linha) reserva so ~22px de
   altura enquanto um nome longo (2 linhas) reserva ~43px - cards lado a
   lado na mesma fileira desalinhavam (preco/parcelamento/botao comecando
   em alturas diferentes). "min-height: calc(1.55em * 2)" reserva sempre
   o espaco de 2 linhas (independente da altura em px, ja que usa a
   mesma unidade "em" do line-height/font-size da propria regra), sem
   forcar nomes curtos a crescerem alem do necessario visualmente (o
   texto continua alinhado ao topo do bloco). */
ul.products li.product .woocommerce-loop-product__title {
  color: var(--aletto-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  margin: 0 0 0.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: calc(1.55em * 2);
  padding: 0;
}

/* Precos na grade */
ul.products li.product .price {
  color: var(--aletto-preco-normal);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 0.15em;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45em;
  line-height: 1.2;
}

ul.products li.product .price ins {
  color: var(--aletto-preco-promo);
  text-decoration: none;
  font-weight: 700;
}

ul.products li.product .price del {
  color: var(--aletto-preco-riscado);
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
}

ul.products li.product .price del .amount {
  color: var(--aletto-preco-riscado);
}

/* Parcelamento */
.aletto-parcelas {
  font-size: 14px;
  color: var(--aletto-texto);
  margin: 0 0 0.4em;
  line-height: 1.4;
}

.aletto-parcelas b {
  font-weight: 700;
}

.aletto-parcelas .aletto-parcelas__valor {
  color: var(--aletto-roxo);
  font-weight: 700;
}

/* Estrelas */
.aletto-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0 0;
}

.aletto-stars svg {
  width: 15px;
  height: 15px;
  fill: var(--aletto-estrela);
  display: block;
}

.aletto-stars__count {
  color: var(--aletto-preco-riscado);
  font-size: 12.5px;
  margin-left: 4px;
}

/* Botao na grade */
ul.products li.product .button,
ul.products li.product .added_to_cart {
  margin-top: auto;
  width: 100%;
  text-align: center;
  padding: 0.95em 1em;
  font-size: 14px;
  border-radius: var(--aletto-raio);
  display: block;
}

/* Selo de desconto */
.woocommerce span.onsale,
ul.products li.product .onsale {
  position: absolute;
  top: 15px;
  left: 15px;
  right: auto;
  margin: 0;
  background-color: var(--aletto-roxo);
  color: var(--aletto-branco);
  border-radius: var(--aletto-raio);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  min-height: auto;
  min-width: auto;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  z-index: 2;
}

.woocommerce span.onsale svg {
  width: 1.3em;
  height: 1.3em;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  margin: 0 -3px;
}

/* ==========================================================================
   9. Pagina de produto
   ========================================================================== */

/* Logo da marca (nativo do Storefront + WooCommerce Brands), acima do
   titulo - sem estilo proprio ate agora, herdava o tamanho real do
   arquivo de imagem (podia sair enorme ou distorcido). So produtos com
   logo cadastrado na marca mostram isso; sem logo, este bloco nem existe
   no HTML - nao precisa de fallback aqui. */
.single-product div.product .storefront-wc-brands-single-product {
  margin-bottom: 0.5em;
}

.single-product div.product .storefront-wc-brands-single-product img {
  max-height: 26px;
  width: auto !important;
  height: auto !important;
  display: block;
}

.single-product div.product .product_title {
  color: var(--aletto-heading);
  font-size: 1.6em;
  font-weight: 600;
  margin-bottom: 0.35em;
}

/* Descricao curta (campo nativo "Resumo" do produto) - funciona como o
   beneficio principal, entre o preco/disponibilidade e a calculadora de
   frete/formas de pagamento. So um filete de cor a esquerda (sem caixa
   fechada) pra nao competir com o botao de compra logo abaixo nem virar
   "mais um card" na coluna. So aparece quando o produto tem esse campo
   preenchido - o WooCommerce ja nao imprime nada sem isso. */
.woocommerce-product-details__short-description {
  margin: 1em 0 1.3em;
  padding-left: 0.9em;
  border-left: 2px solid var(--aletto-verde-agua);
}

.woocommerce-product-details__short-description p {
  color: var(--aletto-heading);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Disponibilidade: era so texto colorido, sem nenhum destaque de
   "status" (a informacao mais decisiva antes de comprar, junto com o
   preco). Vira um selo compacto, mesma familia visual da barra de frete
   gratis/selo de desconto (pilula com bolinha) - nao e um elemento novo,
   e uma variacao de contraste/agrupamento do que ja existia. */
.single-product div.product .stock {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 13.5px;
  font-weight: 600;
  padding: 0.5em 1em;
  border-radius: 999px;
  margin: 0 0 1.1em;
}

.single-product div.product .stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.single-product div.product .stock.in-stock {
  color: var(--aletto-verde-estoque);
  background-color: rgba(0, 216, 100, 0.09);
}

.single-product div.product .stock.in-stock.aletto-estoque-baixo {
  background-color: rgba(232, 89, 12, 0.09);
}

.single-product div.product .stock.out-of-stock {
  color: var(--aletto-erro);
  background-color: rgba(247, 27, 27, 0.08);
}

.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--aletto-preco-normal);
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0.25em;
}

.single-product div.product p.price ins {
  color: var(--aletto-preco-promo);
  text-decoration: none;
  font-weight: 600;
}

.single-product div.product p.price del {
  color: var(--aletto-preco-riscado);
  font-size: 16px;
  font-weight: 400;
  opacity: 1;
}

.single-product .aletto-parcelas {
  font-size: 15px;
  margin-bottom: 1em;
}

/* Estilo real do "stock.in-stock" (selo de disponibilidade) consolidado
   mais acima, junto do resto da hierarquia preco/titulo desta secao -
   evita ter a mesma regra duplicada em dois lugares do arquivo. */

.single-product div.product .woocommerce-product-gallery img {
  border-radius: var(--aletto-raio);
}

.single_add_to_cart_button {
  width: 100%;
  padding: 1.05em 1.5em;
  font-size: 1.02em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: no-preference) {
  .single_add_to_cart_button {
    animation: aletto-pulse 2.4s ease-in-out infinite;
  }
  @keyframes aletto-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(15, 185, 48, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(15, 185, 48, 0); }
  }
}

/* Estilo das abas (Descricao/Avaliacoes) consolidado em
   assets/aletto-produto.css, junto com o resto do refinamento visual da
   secao - evita ter a mesma regra em dois arquivos. */

/* Caixa do calculo de frete */
.aletto-frete-box {
  border: 1px solid var(--aletto-borda);
  border-radius: var(--aletto-raio);
  padding: 1em 1.1em;
  margin: 1.3em 0;
  background-color: #fafefd;
}

.aletto-frete-box__titulo {
  display: block;
  font-weight: 600;
  color: var(--aletto-heading);
  margin-bottom: 0.6em;
  font-size: 0.95em;
}

/* Ultimo item da secao de entrega (ver .aletto-produto-frete-secao em
   assets/aletto-produto.css) - sem caixa/borda propria de proposito: a
   calculadora de CEP logo acima ja e a caixa visivel da secao inteira,
   uma segunda caixa tracejada aqui so empilharia borda sobre borda. */
.aletto-frete-aviso {
  color: var(--aletto-heading);
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  margin: 0.9em 0 0;
}

/* ==========================================================================
   10. Marcas
   ========================================================================== */

.aletto-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em 2.4em;
  margin-bottom: 2.5em;
}

.aletto-brands__item {
  text-align: center;
  text-decoration: none;
  width: 120px;
}

.aletto-brands__logo {
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.7em;
}

.aletto-brands__logo img {
  max-height: 62px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
}

.aletto-brands__name {
  color: var(--aletto-texto);
  font-size: 14px;
}

.aletto-brands__item:hover .aletto-brands__name {
  color: var(--aletto-verde-agua);
}

/* ==========================================================================
   11. Carrinho e checkout
   ========================================================================== */

.woocommerce-cart table.cart th,
.woocommerce-checkout .woocommerce-checkout-review-order-table th {
  background-color: #f6fdfc;
  color: var(--aletto-heading);
}

.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--aletto-verde-agua);
  border-radius: var(--aletto-raio);
}

.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--aletto-verde-agua);
}

.woocommerce-error {
  border-top-color: var(--aletto-erro);
  border-radius: var(--aletto-raio);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
  border-radius: var(--aletto-raio);
  border: 1px solid var(--aletto-borda-form);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--aletto-verde-agua);
  outline: none;
}

#shipping_method li,
.woocommerce-shipping-methods li {
  padding: 0.55em 0;
  font-size: 0.98em;
}

#shipping_method .amount,
.woocommerce-shipping-methods .amount,
.woocommerce-shipping-totals .amount {
  color: var(--aletto-preco-promo);
  font-weight: 600;
}

/* ==========================================================================
   12. Rodape
   ========================================================================== */

.site-footer {
  background-color: var(--aletto-turquesa);
  color: var(--aletto-branco);
  padding-top: 2.5em;
}

.site-footer a,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer .widget-title,
.site-footer p,
.site-footer li {
  color: var(--aletto-branco);
}

.site-footer a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.aletto-footer-info {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 1.4em;
  margin-top: 1.4em;
  font-size: 0.87em;
  text-align: center;
  color: var(--aletto-branco);
}

.aletto-footer-info p {
  margin: 0.35em 0;
}

.aletto-social {
  display: flex;
  gap: 0.8em;
  align-items: center;
  justify-content: center;
  margin: 1em 0;
}

.aletto-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--aletto-branco);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.aletto-social a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

.aletto-social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* ==========================================================================
   13. Barra de cookies
   ========================================================================== */

.aletto-cookie-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(1080px, calc(100% - 36px));
  background-color: var(--aletto-branco);
  border-radius: var(--aletto-raio);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.16);
  padding: 1.1em 1.4em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  z-index: 9998;
  font-size: 14px;
  color: var(--aletto-texto);
}

.aletto-cookie-bar[hidden] {
  display: none;
}

.aletto-cookie-bar__text {
  margin: 0;
  line-height: 1.5;
}

.aletto-cookie-bar__button {
  flex-shrink: 0;
  background-color: var(--aletto-verde-compra);
  color: var(--aletto-branco);
  border: none;
  border-radius: var(--aletto-raio);
  padding: 0.85em 1.5em;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 700px) {
  .aletto-cookie-bar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    font-size: 13px;
  }
}

/* ==========================================================================
   14. Botao flutuante de WhatsApp
   ========================================================================== */

.aletto-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--aletto-verde-agua);
  color: var(--aletto-branco);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.aletto-whatsapp:hover {
  color: var(--aletto-branco);
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.aletto-whatsapp svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

/* ==========================================================================
   15. Ajustes gerais
   ========================================================================== */

.storefront-breadcrumb {
  padding: 1em 0;
  margin-bottom: 1.5em;
}

.site-content {
  padding-top: 2em;
}

@media (max-width: 900px) {
  .aletto-header__inner {
    gap: 1em;
    flex-wrap: wrap;
  }

  /* Busca recolhida: some do lugar, so aparece quando .is-aberto (JS). */
  .aletto-header__search {
    display: none;
    align-items: center;
    gap: 0.5em;
    order: 3;
    flex: 1 1 100%;
    min-width: 0;
  }
  .aletto-header__search.is-aberto {
    display: flex;
  }
  .aletto-header__search form {
    flex: 1 1 auto;
    min-width: 0;
  }

  .aletto-header__actions {
    margin-left: auto;
    gap: 1em;
  }
  .aletto-action__label {
    display: none;
  }

  /* Icone que abre a busca: some do lugar das acoes no mobile. */
  .aletto-header__actions .aletto-search-toggle {
    display: inline-flex;
  }

  /* Botao de fechar dentro da busca aberta. */
  .aletto-search-fechar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: none;
    color: var(--aletto-branco);
    cursor: pointer;
  }
  .aletto-search-fechar:hover {
    background: none;
    opacity: 0.85;
  }
  .aletto-search-fechar svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 600px) {
  .aletto-action__value {
    display: none;
  }
  .site-header {
    padding: 1em 0;
    min-height: 64px;
    display: flex;
    align-items: center;
  }
}

.aletto-sem-sidebar .content-area {
  width: 100%;
  margin-right: 0;
  float: none;
}

.aletto-sem-sidebar .widget-area {
  display: none;
}

ul.products li.product a,
ul.products li.product a:hover,
ul.products li.product a:focus {
  text-decoration: none;
}

ul.products li.product .woocommerce-loop-product__title {
  text-decoration: none;
}

ul.products li.product .price ins {
  text-decoration: none;
}

ul.products li.product .price del,
ul.products li.product .price del .amount {
  text-decoration: line-through;
}