/* =========================================================
   Floricultura Colibri — Estilos (Verde Moderno)
   Tokens do handoff de design. Edite as cores aqui em :root.
   ========================================================= */
:root{
  --verde-escuro:#0B3D27;   /* cabeçalho / rodapé / faixas  */
  --verde-primario:#0E7A4E; /* gradiente / preços / botões  */
  --verde-profundo:#0B5A38; /* gradiente / títulos          */
  --verde-claro:#15945E;
  --dourado:#E7C76A;        /* destaques / CTA              */
  --dourado-escuro:#C99A3A; /* acento de texto              */
  --creme:#F3E7C4;          /* texto sobre verde            */
  --fundo:#FBF8EF;          /* fundo da página              */
  --texto:#16241b;
  --texto-2:#5e6b62;
  --borda:#e7e2d2;
  --branco:#ffffff;

  --r-btn:10px; --r-card:16px; --r-faixa:20px; --r-pill:100px;
  --sombra-card:0 10px 26px rgba(11,90,56,.10);
  --max:1160px;
  --font-titulo:'Bricolage Grotesque',sans-serif;
  --font-texto:'Space Grotesk',sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; width:100%; overflow-x:hidden; overflow-x:clip; }
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--font-texto); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  width:100%; max-width:100%; overflow-x:hidden; overflow-x:clip; position:relative;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 44px; }
.muted{ color:var(--texto-2); }
.center{ text-align:center; }

h1,h2,h3{ font-family:var(--font-titulo); letter-spacing:-0.02em; margin:0; }
.acento{ color:var(--dourado-escuro); }
.acento-claro{ color:var(--dourado); }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:var(--font-texto); font-weight:700; font-size:16px;
  padding:14px 26px; border-radius:var(--r-btn); border:0; cursor:pointer;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.btn:hover{ filter:brightness(.93); transform:translateY(-1px); }
.btn-primary{ background:var(--dourado); color:var(--verde-escuro); }
.btn-ghost{ background:rgba(255,255,255,.14); color:#fff; }
.btn-outline{ background:transparent; color:var(--verde-profundo); border:2px solid var(--verde-profundo); }
.btn-sm{ padding:10px 18px; font-size:14px; }
.btn-block{ width:100%; }
.btn-wpp::before{ content:""; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.518 5.26l-.999 3.648 3.97-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0a11.82 11.82 0 018.413 3.488 11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884a9.86 9.86 0 001.518 5.26l-.999 3.648 3.97-1.607zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Cabeçalho ---------- */
.site-header{ background:var(--verde-escuro); position:sticky; top:0; z-index:40; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 44px; max-width:var(--max); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand img{ width:44px; height:44px; object-fit:contain; }
.brand b{ font-family:var(--font-titulo); font-weight:800; font-size:20px; color:var(--creme); letter-spacing:.02em; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{ font-size:14px; font-weight:500; color:#bcd4c5; transition:color .15s; }
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:var(--dourado); font-weight:700; }
.cart-btn{ position:relative; background:var(--dourado); color:var(--verde-escuro); border:0; cursor:pointer;
  font-weight:700; font-size:14px; padding:10px 16px; border-radius:8px; display:inline-flex; align-items:center; gap:8px; }
.cart-count{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px;
  background:var(--verde-primario); color:#fff; border-radius:100px; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--verde-escuro); }
.hamburger{ display:none; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span{ display:block; width:24px; height:2px; background:var(--creme); margin:5px 0; border-radius:2px; }

/* ---------- Hero ---------- */
.hero{ position:relative; background:linear-gradient(135deg,var(--verde-primario),var(--verde-profundo)); overflow:hidden; }
.hero .deco1{ position:absolute; width:340px; height:340px; border-radius:50%; border:2px solid rgba(231,199,106,.4); top:-90px; right:-50px; }
.hero .deco2{ position:absolute; width:200px; height:200px; border-radius:50%; background:rgba(231,199,106,.16); bottom:-70px; right:170px; }
.hero-inner{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; padding:62px 44px; max-width:var(--max); margin:0 auto; }
.badge{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); color:var(--creme); padding:7px 14px; border-radius:var(--r-pill); font-size:13px; font-weight:600; }
.hero h1{ font-weight:800; font-size:62px; line-height:.98; margin:20px 0 0; color:#fff; }
.hero h1 .acento-claro{ color:var(--dourado); }
.hero p{ font-size:18px; color:rgba(243,231,196,.92); max-width:430px; margin:18px 0 0; }
.hero-cta{ display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-img{ display:flex; align-items:center; justify-content:center; }
.hero-img img{ width:240px; height:240px; object-fit:contain; filter:drop-shadow(0 14px 30px rgba(0,0,0,.35)); }

/* ---------- Seções ---------- */
.section{ padding:60px 0; }
.section-head{ margin-bottom:28px; }
.section-head h2{ font-weight:800; font-size:40px; color:var(--verde-profundo); }
.section-head p{ margin:8px 0 0; color:var(--texto-2); font-size:17px; max-width:560px; }

/* ---------- Filtros ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.filter{ background:#fff; border:1.5px solid var(--borda); color:var(--verde-profundo); font-weight:600;
  font-size:14px; padding:9px 18px; border-radius:var(--r-pill); cursor:pointer; transition:all .15s; }
.filter:hover{ border-color:var(--verde-primario); }
.filter.active{ background:var(--verde-profundo); color:#fff; border-color:var(--verde-profundo); }

/* ---------- Grid de produtos ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.card{ background:#fff; border:2px solid var(--verde-profundo); border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--sombra-card); }
.card-img{ aspect-ratio:4/5; background-size:contain; background-repeat:no-repeat; background-position:center; background-color:#fff; display:flex; align-items:flex-start; }
.card-tag{ margin:10px; background:rgba(11,61,39,.85); color:var(--creme); font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:var(--r-pill); }
.card-body{ padding:18px; display:flex; flex-direction:column; gap:4px; flex:1; }
.card-body h3{ font-weight:700; font-size:20px; color:var(--verde-profundo); }
.card-desc{ font-size:14px; color:var(--texto-2); }
.card-foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.price{ font-weight:700; font-size:18px; color:var(--verde-primario); }

/* ---------- Faixa destaque ---------- */
.band{ background:var(--verde-escuro); border-radius:var(--r-faixa); padding:40px 44px; color:var(--creme);
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.band h3{ font-weight:800; font-size:30px; color:#fff; }
.band p{ margin:6px 0 0; opacity:.9; font-size:16px; }
.pill-phone{ background:var(--dourado); color:var(--verde-escuro); padding:15px 26px; border-radius:var(--r-btn);
  font-weight:700; font-size:16px; white-space:nowrap; }

/* faixa de paisagismo (com imagem/gradiente) */
.land-band{ position:relative; overflow:hidden; border-radius:var(--r-faixa);
  background:linear-gradient(120deg,var(--verde-profundo),var(--verde-claro)); color:#fff; padding:48px 44px; }
.land-band h3{ font-weight:800; font-size:34px; color:#fff; max-width:560px; }
.land-band p{ font-size:17px; color:rgba(243,231,196,.95); max-width:520px; margin:12px 0 24px; }

/* ---------- Serviços de paisagismo ---------- */
.svc{ background:#fff; border-radius:var(--r-card); border:1.5px solid var(--borda); padding:26px; transition:box-shadow .18s, transform .18s; }
.svc:hover{ box-shadow:var(--sombra-card); transform:translateY(-3px); }
.svc .ico{ width:52px; height:52px; border-radius:14px; background:var(--creme); display:flex; align-items:center; justify-content:center; font-size:26px; }
.svc h3{ font-weight:700; font-size:21px; color:var(--verde-profundo); margin:16px 0 6px; }
.svc p{ color:var(--texto-2); font-size:15px; margin:0; }

/* galeria simples */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gallery div{ height:200px; border-radius:14px; background-size:cover; background-position:center; }

/* ---------- Sobre / Contato ---------- */
.feature-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:12px; }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; }
.feature-list .chk{ color:var(--verde-primario); font-weight:700; }
.info-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.info-card{ background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-card); padding:24px; }
.info-card .ico{ font-size:24px; }
.info-card h3{ font-size:18px; color:var(--verde-profundo); margin:10px 0 4px; }
.map-embed{ width:100%; height:340px; border:0; border-radius:var(--r-card); }

/* ---------- Página legal (política) ---------- */
.legal{ max-width:820px; }
.legal h2{ font-size:34px; color:var(--verde-profundo); }
.legal h3{ font-size:21px; color:var(--verde-primario); margin:30px 0 8px; }
.legal p, .legal li{ font-size:16px; color:var(--texto); line-height:1.65; }
.legal ul{ padding-left:20px; }
.legal li{ margin:6px 0; }
.legal .updated{ color:var(--texto-2); font-size:14px; }
.legal a{ color:var(--dourado-escuro); font-weight:600; text-decoration:underline; }

/* ---------- Rodapé ---------- */
.site-footer{ background:var(--verde-escuro); color:#9cbaa6; }
.footer-inner{ max-width:var(--max); margin:0 auto; padding:40px 44px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.footer-inner h4{ color:var(--creme); font-family:var(--font-titulo); font-weight:800; font-size:16px; margin:0 0 12px; }
.footer-inner a{ display:block; color:#9cbaa6; font-size:14px; padding:4px 0; transition:color .15s; }
.footer-inner a:hover{ color:#fff; }
.footer-brand{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.footer-brand img{ width:38px; height:38px; object-fit:contain; }
.footer-brand b{ font-family:var(--font-titulo); font-weight:800; font-size:18px; color:var(--creme); }
.footer-map{ max-width:var(--max); margin:0 auto; padding:0 44px 34px; }
.footer-map iframe{ width:100%; height:240px; border:0; border-radius:14px; display:block; filter:saturate(.9); }
.footer-map-link{ display:inline-block; margin-top:10px; color:var(--dourado); font-size:14px; font-weight:600; }
.footer-map-link:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:13px; padding:16px; color:#7fa28d; }
.footer-bottom a{ color:var(--dourado); font-weight:600; }
.footer-bottom a:hover{ color:#fff; }

/* ---------- Carrinho (drawer) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(11,36,27,.5); opacity:0; visibility:hidden; transition:.25s; z-index:50; }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; bottom:0; right:0; width:420px; max-width:92vw; background:var(--fundo);
  transform:translateX(100%); transition:transform .28s ease; z-index:60; display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.2); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ background:var(--verde-escuro); color:#fff; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; }
.drawer-head h3{ color:#fff; font-size:20px; }
.drawer-close{ background:none; border:0; color:var(--creme); font-size:26px; cursor:pointer; line-height:1; }
.drawer-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:18px 22px; }
.drawer-foot{ flex:none; padding:18px 22px; padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--borda); background:#fff; }

.cart-item{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--borda); }
.cart-item .thumb{ width:60px; height:60px; border-radius:10px; background-size:cover; background-position:center; flex:none; }
.cart-item .ci-body{ flex:1; min-width:0; }
.cart-item h4{ margin:0; font-size:15px; color:var(--verde-profundo); font-family:var(--font-titulo); }
.cart-item .ci-price{ color:var(--verde-primario); font-weight:700; font-size:14px; }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--borda); border-radius:8px; overflow:hidden; margin-top:6px; }
.qty button{ background:#fff; border:0; width:28px; height:28px; cursor:pointer; font-size:16px; color:var(--verde-profundo); }
.qty span{ min-width:30px; text-align:center; font-weight:600; font-size:14px; }
.ci-remove{ background:none; border:0; color:#b34; cursor:pointer; font-size:12px; margin-top:6px; }
.cart-empty{ text-align:center; color:var(--texto-2); padding:50px 10px; }
.cart-empty .big{ font-size:40px; }

.totals{ display:flex; justify-content:space-between; font-weight:700; font-size:18px; color:var(--verde-profundo); margin-bottom:14px; }

/* formulário checkout */
.form-row{ margin-bottom:12px; }
.form-row label{ display:block; font-size:13px; font-weight:600; color:var(--verde-profundo); margin-bottom:4px; }
.form-row input, .form-row textarea, .form-row select{
  width:100%; padding:11px 13px; border:1.5px solid var(--borda); border-radius:8px; font-family:inherit;
  font-size:14px; background:#fff; color:var(--texto); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{ outline:0; border-color:var(--verde-primario); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-error{ border-color:#d9534f !important; }
.back-link{ background:none; border:0; color:var(--texto-2); cursor:pointer; font-size:13px; margin-bottom:12px; }

/* toast */
.toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--verde-escuro);
  color:#fff; padding:13px 22px; border-radius:var(--r-pill); font-weight:600; font-size:14px; opacity:0; visibility:hidden;
  transition:.25s; z-index:70; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* ---------- Responsivo ---------- */
@media (max-width:860px){
  .wrap, .nav, .hero-inner, .footer-inner, .footer-map{ padding-left:22px; padding-right:22px; }
  .nav-links{ position:fixed; top:0; bottom:0; right:0; width:260px; background:var(--verde-escuro);
    flex-direction:column; align-items:flex-start; padding:80px 28px; gap:18px; transform:translateX(100%);
    transition:transform .25s; z-index:45; }
  .nav-links.open{ transform:translateX(0); }
  .hamburger{ display:block; z-index:46; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-img{ order:-1; }
  .hero-img img{ width:160px; height:160px; }
  .hero h1{ font-size:44px; }
  .section-head h2{ font-size:30px; }
  .grid, .grid-4, .gallery, .info-grid, .form-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .band{ flex-direction:column; align-items:flex-start; }
}