/*
Theme Name: Aletto
Theme URI: https://teste.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: 1.6em 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

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

.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 320px;
  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.4em 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: 6px;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--aletto-verde-agua);
  border-radius: 8px;
  padding: 0.55em 0.9em;
  line-height: 1;
  border: none;
  cursor: pointer;
}

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

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

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

.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;
}

/* 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);
}

/* 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);
}

.aletto-nav ul li:hover > 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;
  }
}

/* ==========================================================================
   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 */
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;
  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: block;
  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;
  margin-left: 0.45em;
}

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
   ========================================================================== */

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

.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;
}

.single-product div.product .stock.in-stock {
  color: var(--aletto-verde-estoque);
  font-weight: 500;
}

.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); }
  }
}

.woocommerce-tabs ul.tabs li.active a { color: var(--aletto-verde-agua); }
.woocommerce-tabs ul.tabs li a { color: var(--aletto-heading); }

/* 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;
}

.aletto-frete-aviso {
  background-color: #f6fdfc;
  border: 1px dashed var(--aletto-verde-agua);
  border-radius: var(--aletto-raio);
  color: var(--aletto-verde-agua);
  padding: 0.8em 1em;
  text-align: center;
  font-weight: 500;
  font-size: 0.92em;
  margin: 1em 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;
  }
  .aletto-header__search {
    order: 3;
    flex: 1 1 100%;
  }
  .aletto-header__actions {
    margin-left: auto;
    gap: 1em;
  }
  .aletto-action__label {
    display: none;
  }
}

@media (max-width: 600px) {
  .aletto-action__value {
    display: none;
  }
  .site-header {
    padding: 1em 0;
  }
}