/*
Theme Name: Trussadi
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/* =====================================================================
   OLLIE SKIN — alinhado ao site live meuollie.com.br (tema Shopify Impulse)
   Tokens: BG #FAEDFF · texto #333 · CTA coral #FF502C · amarelo #FFF6A4
           lilás #DBA8E5 · estrela/review #FF7150 · fonte títulos Syne
           fonte corpo Montserrat · botões pílula
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Syne:wght@500;600;700;800&display=swap');

:root {
  --ollie-bg: #FAEDFF;
  --ollie-bg-dim: #F3D4FF;
  --ollie-text: #333333;
  --ollie-cta: #FF502C;
  --ollie-cta-dark: #FF3B13;
  --ollie-cta-light: #FF7A5F;
  --ollie-yellow: #FFF6A4;
  --ollie-lilac: #DBA8E5;
  --ollie-mint: #C5F7F0;
  --ollie-star: #FF7150;
  --ollie-border: #E8E8E1;
  --ollie-radius-card: 16px;
  --ollie-radius-img: 20px;
}

/* ---------- Tipografia ---------- */
body,
.ux-text,
p, li, td, input, select, textarea,
.woocommerce-Price-amount {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ollie-text);
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.nav > li > a,
.button,
button {
  font-family: 'Syne', 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: #1A1A1A;
}

/* Títulos de seção da home (Queridinhos, Nossos kits, Quem usa ama, etc.) */
.ux-text h1,
.ux-text h2,
.ollie-videos h2,
.ollie-reviews h2,
.ollie-blog h2,
.ollie-newsletter h2,
.slider-nav-reveal h3.section-title,
h3.section-title span {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--ollie-cta) !important;
  line-height: 1.05;
}

.ux-text h1 { font-size: 2.2rem; }
@media (max-width: 549px) {
  .ux-text h1 { font-size: 1.6rem; }
}

/* ---------- Cores globais ---------- */
body { background-color: var(--ollie-bg); }

a { color: var(--ollie-text); }
a:hover { color: var(--ollie-cta); }

.link-primary,
.is-outline:hover,
.nav-box > li.active > a { color: var(--ollie-cta); }

/* ---------- Botões: formato pílula + coral ---------- */
.button,
button,
input[type="submit"],
input[type="button"],
.single_add_to_cart_button,
.add_to_cart_button,
.checkout-button,
.button.alt,
.newsletter-form button,
.promo-banner a,
.promo-sync a {
  background-color: var(--ollie-cta) !important;
  background-image: none !important;
  border-color: var(--ollie-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: none !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.checkout-button:hover,
.newsletter-form button:hover,
.promo-sync a:hover {
  background-color: var(--ollie-cta-dark) !important;
  border-color: var(--ollie-cta-dark) !important;
  color: #fff !important;
}

.button.is-outline,
.is-outline {
  background-color: transparent !important;
  color: var(--ollie-cta) !important;
}
.button.is-outline:hover { background-color: var(--ollie-cta) !important; color:#fff !important; }

/* Banner "eu quero" tem borda branca sobre lilás — mantém contraste */
.promo-banner a {
  background-color: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
}
.promo-banner a:hover { background-color:#fff !important; color: var(--ollie-lilac) !important; }

/* ---------- Cards de produto ---------- */
.product-small .box-image,
.product-small .box-image img,
.box-image,
.ux-box-image {
  border-radius: var(--ollie-radius-card);
  overflow: hidden;
}

.product-small .box-text {
  padding-top: 14px;
  text-align: center;
}

.product-small .name a,
.product-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: none;
  color: #1A1A1A;
}

.woocommerce-Price-amount,
.price ins .woocommerce-Price-amount {
  color: var(--ollie-cta);
  font-weight: 700;
}
.price del .woocommerce-Price-amount { color: #999; font-weight: 500; }

/* Selo de desconto / "sale" em pílula coral */
.badge-inner.on-sale,
.onsale {
  background-color: var(--ollie-cta) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
}

/* Rating */
.star-rating:before,
.star-rating span:before { color: var(--ollie-star); }

/* ---------- Header ---------- */
#header,
.header-main,
.header-bg-color {
  background-color: var(--ollie-bg) !important;
}
.header-nav a { color: var(--ollie-text) !important; }
.header-nav a:hover { color: var(--ollie-cta) !important; }
.nav-dropdown { border-radius: 14px; }

/* ---------- Footer ---------- */
.footer-1,
#footer .footer-1 { background-color: var(--ollie-yellow) !important; }
#footer { color: var(--ollie-text); }
#footer a { color: var(--ollie-text); }
#footer a:hover { color: var(--ollie-cta); }

/* ---------- Barra de aviso (marquee) — injetada via functions.php ---------- */
.ollie-announce {
  background: var(--ollie-cta);
  color: #FFF093;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.ollie-announce__track {
  display: inline-block;
  padding-left: 100%;
  animation: ollie-marquee 40s linear infinite;
}
.ollie-announce:hover .ollie-announce__track { animation-play-state: paused; }
.ollie-announce__track span { margin: 0 2.5rem; }
@keyframes ollie-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- Seções da home: paleta Ollie ---------- */
.promo-banner { background-color: var(--ollie-lilac) !important; }
.promo-sync   { background-color: var(--ollie-lilac) !important; }
.ollie-reviews { background-color: var(--ollie-yellow) !important; }
.ollie-newsletter { background-color: var(--ollie-yellow) !important; }
.review-card { border-radius: var(--ollie-radius-card); }
.review-stars { color: var(--ollie-star); }
.blog-card img,
.video-item video { border-radius: var(--ollie-radius-img); }

.newsletter-form input { border-radius: 999px !important; border-color:#1A1A1A !important; }
.newsletter-form button { border-radius: 999px !important; }

/* ---------- Diversos ---------- */
.demo_store { background: var(--ollie-cta) !important; }

@media only screen and (max-width: 48em) {
/*************** MOBILE ONLY ***************/
  .ollie-announce { font-size: 11px; }
}