/* ────────────────────────────────────────────────────────────────
   Complemento do theme.css (que é o arquivo original do tema, intocado).

   1. O que na Shopify vinha em <style> dentro da página: fontes, as variáveis
      de cor do editor de tema, tamanho da logo, o botão de WhatsApp.
   2. Ajustes da vitrine nova (marcados como "novo"), poucos e pequenos.
   ──────────────────────────────────────────────────────────────── */

/* 1. Fontes — Poppins, servida daqui em vez do CDN da Shopify */
@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: fallback; src: url("fontes/poppins_n4.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 600; font-style: normal; font-display: fallback; src: url("fontes/poppins_n6.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: fallback; src: url("fontes/poppins_n7.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 400; font-style: italic; font-display: fallback; src: url("fontes/poppins_i4.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-weight: 700; font-style: italic; font-display: fallback; src: url("fontes/poppins_i7.woff2") format("woff2"); }

/* Variáveis do editor de tema (cópia fiel da loja original) */
:root {
  --default-text-font-size : 15px;
  --base-text-font-size    : 15px;
  --heading-font-family    : Poppins, sans-serif;
  --heading-font-weight    : 400;
  --heading-font-style     : normal;
  --text-font-family       : Poppins, sans-serif;
  --text-font-weight       : 400;
  --text-font-style        : normal;
  --text-font-bolder-weight: 600;
  --text-link-decoration   : underline;

  --text-color               : #000000;
  --text-color-rgb           : 0, 0, 0;
  --heading-color            : #000000;
  --border-color             : #1a1a1a;
  --border-color-rgb         : 26, 26, 26;
  --form-border-color        : #0d0d0d;
  --accent-color             : #000000;
  --accent-color-rgb         : 0, 0, 0;
  --link-color               : #000000;
  --link-color-hover         : #000000;
  --background               : #ffffff;
  --secondary-background     : #ffffff;
  --secondary-background-rgb : 255, 255, 255;
  --accent-background        : rgba(0, 0, 0, 0.08);
  --corstars                 : #ffce00;
  --cordabarra               : #ffffff;
  --cordotexto               : #000000;

  --error-color       : #f71b1b;
  --error-background  : rgba(247, 27, 27, 0.07);
  --success-color     : #00d864;
  --success-background: rgba(0, 216, 100, 0.11);

  --primary-button-background      : #000000;
  --primary-button-background-rgb  : 0, 0, 0;
  --primary-button-text-color      : #ffffff;
  --secondary-button-background    : #000000;
  --secondary-button-background-rgb: 0, 0, 0;
  --secondary-button-text-color    : #FFFFFF;

  --footer-background        : #000000;
  --footer-text-color        : #ffffff;

  --header-background      : #000000;
  --header-text-color      : #ffffff;
  --header-light-text-color: #333333;
  --header-border-color    : rgba(51, 51, 51, 0.3);
  --header-accent-color    : #f71b1b;

  --flickity-arrow-color: #000000;
  --product-on-sale-accent           : #00d864;
  --product-on-sale-accent-rgb       : 0, 216, 100;
  --product-on-sale-color            : #ffffff;
  --product-cor-do-preco             : #00d864;
  --product-cor-do-preco-riscado     : #000000;
  --product-cor-dos-titles           : #000000;
  --product-in-stock-color           : #00d864;
  --product-low-stock-color          : #ee0000;
  --product-sold-out-color           : #000000;
  --product-custom-label-1-background: #ff6128;
  --product-custom-label-1-color     : #ffffff;
  --product-custom-label-2-background: #a95ebe;
  --product-custom-label-2-color     : #ffffff;
  --product-review-star-color        : #ffb647;

  --mobile-container-gutter : 20px;
  --desktop-container-gutter: 40px;

  --header-is-sticky: 0;
  --header-inline-navigation: 0;
  --colorzap-color: #702dfa;
}

/* Cabeçalho (era o <style> da seção header) */
#shopify-section-header { position: relative; z-index: 5; }
.header__logo-image { max-width: 50px !important; height: auto; }
@media screen and (min-width: 641px) { .header__logo-image { max-width: 70px !important; } }
@media screen and (min-width: 1000px) { .search-bar.is-expanded .search-bar__top { box-shadow: 0 -1px #464646 inset; } }
.logodorodape .header__logo-image { max-width: none !important; width: auto; max-height: 130px; }

/* Botão e janela do WhatsApp (era o <style> do app de WhatsApp do tema) */
.hidden { display: none; }
.sticky-button {
  position: fixed; bottom: 20px; right: 20px; border-radius: 50px;
  box-shadow: 0 0px 12px 0 rgb(0 0 0 / 10%); z-index: 20;
  display: flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; transition: all 0.2s ease-out;
}
.sticky-button img { width: 55px; height: 55px; }
.sticky-button svg { margin: auto; fill: #fff; width: 35px; height: 35px; }
.sticky-button a, .sticky-button label { cursor: pointer; display: flex; align-items: center; width: 55px; height: 65px; transition: all .3s ease-out; }
.sticky-button label svg.close-icon { display: none; }
.sticky-chat { position: fixed; bottom: 85px; right: 20px; width: 320px; max-width: calc(100vw - 40px); transition: all .3s ease-out; z-index: 21; opacity: 0; visibility: hidden; }
.sticky-chat a { text-decoration: none; color: #505050; }
.sticky-chat svg { width: 35px; height: 35px; }
.sticky-chat .chat-content { border-radius: 14px; background-color: #bac1d1b8; backdrop-filter: blur(5px); overflow: hidden; font-family: var(--text-font-family); font-weight: 400; }
.sticky-chat .chat-header { position: relative; display: flex; align-items: center; padding: 15px 20px; background-color: var(--colorzap-color); overflow: hidden; }
.sticky-chat .chat-header:after { content: ''; display: block; position: absolute; bottom: 0; right: 0; width: 80px; height: 75px; background: rgba(0,0,0,.040); border-radius: 70px 0 5px 0; }
.sticky-chat .chat-header svg { width: 35px; height: 35px; flex: 0 0 auto; fill: #fff; }
.sticky-chat .chat-header .title { padding-left: 15px; font-size: 14px; font-weight: 600; font-family: var(--heading-font-family); color: #fff; }
.sticky-chat .chat-header .title span { font-size: 11px; font-weight: 400; display: block; line-height: 1.58em; margin: 0; color: #f4f4f4; }
.sticky-chat .chat-text { display: flex; flex-wrap: wrap; margin: 30px 20px; font-size: 12px; }
.sticky-chat .chat-text span { display: inline-block; margin-right: auto; padding: 10px; height: fit-content; background-color: #f0f5fb; border-radius: 0px 15px 15px; }
.sticky-chat .chat-text span:after { content: 'agora mesmo'; display: inline-block; margin-left: 10px; font-size: 9px; color: #989b9f; }
.sticky-chat .chat-text span.typing { margin: 15px 0 0 auto; padding: 4px; border-radius: 15px 0px 15px 15px; }
.sticky-chat .chat-text span.typing:after { display: none; }
.sticky-chat .chat-text span.typing svg { height: 13px; fill: #505050; }
.sticky-chat .chat-button { display: block; margin-top: 5px; padding: 10px; border-radius: 14px; background-color: #bac1d1b8; backdrop-filter: blur(5px); overflow: hidden; font-size: 12px; font-family: var(--text-font-family); font-weight: 400; }
.sticky-chat .chat-button svg { width: 20px; height: 20px; fill: #505050; margin-left: auto; transform: rotate(40deg); }
.chat-menu:checked + .sticky-button label { transform: rotate(360deg); }
.chat-menu:checked + .sticky-button label img { display: none; }
.chat-menu:checked + .sticky-button { background: #4dc247; }
.chat-menu:checked + .sticky-button label svg.close-icon { display: table-cell; }
.chat-menu:checked + .sticky-button + .sticky-chat { bottom: 88px; right: 18px; opacity: 1; visibility: visible; }
.wa-chat-widget-send form { display: flex; margin: 0; }
.wa-chat-widget-send input { background: #f0f5fb; border: 0; border-right: 1px solid #dee6ef; color: #505050; padding: 0.5rem 1.2rem; width: 100%; border-radius: 10px 0 0 10px; }
.wa-chat-widget-send button { background-color: #f0f5fb; padding: 11px 15px 0.5rem 0.5rem; border-radius: 0 10px 10px 0; border: none; fill: #ffffff; }
@media (max-width: 768px) {
  .sticky-button { bottom: 64px; }
  .chat-menu:checked + .sticky-button + .sticky-chat { bottom: 125px; right: 21px; }
}

/* 2. Novo — sem os scripts do tema, alguns estados passam a ser só CSS */

/* Faixa do modo ensaio (LOJA_ENSAIO=1) */
.vitrine-ensaio { background: #fff3cd; color: #664d03; text-align: center; font-size: 12px; padding: 4px 12px; }

/* Etiqueta "Esgotado" no cartão (o tema original não tinha produto esgotado) */
.vitrine-esgotado { background: #000; color: #fff; }

/* Selo azul ao lado do nome do produto */
.vitrine-selo svg { width: 20px; height: 20px; }

/* Links de política no rodapé */
.vitrine-rodape-links { margin-top: 18px; font-size: 12px; text-align: center; opacity: .8; }
.vitrine-rodape-links a { color: var(--footer-text-color); }

/* Estado vazio de coleção e busca */
.vitrine-vazio { padding: 30px 20px; text-align: center; }
.vitrine-busca-pagina { display: flex; gap: 10px; max-width: 480px; margin: 20px auto 0; }
.vitrine-busca-pagina .form__field { flex: 1; }

/* Seletor de valor (ordenar / por página): no tema eram botões que o JS
   transformava em navegação; aqui são links de verdade. */
a.value-picker__choice-item { display: block; text-decoration: none; }

/* Zoom da foto do produto ao passar o mouse (o tema fazia com JS e uma
   cópia ampliada; aqui a própria foto aumenta dentro da moldura). */
.product-gallery__carousel-item.vitrine-zoom .aspect-ratio { overflow: hidden; cursor: zoom-in; }
.product-gallery__carousel-item.vitrine-zoom img { transition: transform .15s ease-out; }

/* Carrinho: botão de remover e aviso de item que saiu da loja */
.line-item__quantity-remove { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.vitrine-aviso-carrinho { margin: 0 0 16px; padding: 10px 14px; border-radius: 6px; background: var(--error-background); color: var(--error-color); font-size: 13px; }
.cart-recap__price-line--highlight { color: var(--product-on-sale-accent); }

/* Os pontos do carrossel usam o estilo do tema (.flickity-page-dots); só a
   posição dependia do Flickity. */
.slideshow { position: relative; }
.slideshow .dot { cursor: pointer; }

/* Páginas de política: a Shopify injetava esta moldura na página; o tema só
   definia a largura máxima. */
.shopify-policy__container { margin: 0 auto 40px; padding: 0 var(--mobile-container-gutter); }
.shopify-policy__body h2 { margin-top: 1.4em; }

/* /collections: grade de coleções com a foto do primeiro produto */
.vitrine-colecoes .product-item__title { text-align: center; }