/*
Theme Name: Eshet
Theme URI: http://localhost:8080
Author: Agive
Description: Tema customizado de e-commerce (WooCommerce) para a Eshet Activewear, baseado no design do Figma.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: eshet
Tags: woocommerce, ecommerce, custom
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
  /* Cores */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-pink: #deb6d8;
  --c-gold: #b69e60;
  --c-gold-light: #c2a279;
  --c-beige: #e5ddd2;
  --c-offwhite: #fffefd;
  --c-gray-light: #d4d4d4;
  --c-gray-border: #d9d9d9;

  /* Tipografia */
  --font-main: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "STIX Two Text", Georgia, serif;

  --fs-hero: 56px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 28px;
  --fs-lg: 24px;
  --fs-body: 20px;
  --fs-base: 16px;
  --fs-sm: 14px;

  /* Layout */
  --container-max: 1440px;
  --container-pad: 40px;
  --header-announcement-h: 55px;
  --header-nav-h: 130px;
}

/* =========================================================
   Reset básico
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  color: var(--c-black);
  background: var(--c-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
ul { margin: 0; padding: 0; list-style: none; }

/* Container */
.eshet-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (max-width: 1024px) {
  :root { --container-pad: 32px; }
}
@media (max-width: 640px) {
  :root { --container-pad: 20px; --fs-hero: 34px; --fs-h1: 28px; --fs-h2: 24px; }
}

/* =========================================================
   Toasts / notificações (substitui os alert() nativos)
   ========================================================= */
.eshet-toasts {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 40px));
}
.eshet-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-white);
  color: var(--c-black);
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  border-left: 3px solid var(--c-gold);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.eshet-toast.is-visible { transform: translateX(0); opacity: 1; }
.eshet-toast--success { border-left-color: #7cc98f; }
.eshet-toast--error { border-left-color: #d98b8b; }
.eshet-toast--info { border-left-color: var(--c-gold); }
.eshet-toast__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-white);
  margin-top: 1px;
}
.eshet-toast--success .eshet-toast__icon { background: #7cc98f; }
.eshet-toast--error .eshet-toast__icon { background: #d98b8b; }
.eshet-toast--info .eshet-toast__icon { background: var(--c-gold); }
.eshet-toast__msg { flex: 1; }
.eshet-toast__close {
  flex: 0 0 auto;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  padding: 0;
}
.eshet-toast__close:hover { color: var(--c-black); }
@media (prefers-reduced-motion: reduce) {
  .eshet-toast { transition: opacity .2s ease; transform: none; }
}
@media (max-width: 560px) {
  .eshet-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; max-width: none; }
  .eshet-toast { transform: translateY(120%); }
}