:root {
    --bege: #f5f1e8;
    --bege-escuro: #ede7d9;
    --marrom: #6b4f3b;
    --marrom-claro: #9b7a60;
    --dourado: #c9a66b;
    --dourado-claro: #e8c989;
    --texto: #3a2c22;
    --branco: #fdfaf5;
    --sombra: rgba(107,79,59,0.15);
  }

  * { 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
}

  html { 
    scroll-behavior: smooth; 
}

  body {
    font-family: 'Segoe UI', Tahoma !important;
    background: var(--bege);
    color: var(--texto);
    overflow-x: hidden;
  }

  /* ── HEADER ─────────────────────────── */
  header {
    background: var(--branco);
    border-bottom: 1px solid var(--bege-escuro);
    position: sticky; top:0; z-index:900;
    box-shadow: 0 2px 12px var(--sombra);
  }

  .header-inner {
    max-width:1200px; 
    margin:0 auto;
    padding: 14px 24px;
    display:flex; 
    align-items:center; 
    gap:16px;
  }

  .logo {
    font-size:1.5rem; 
    font-weight:700;
    color:var(--marrom); 
    text-decoration:none;
    white-space:nowrap;
  }

  .logo span { 
    color:var(--dourado); 
}

  .search-bar {
    flex:1; 
    position:relative;
  }

  .search-bar input {
    width:100%; 
    padding:9px 16px 9px 40px;
    border:1.5px solid var(--bege-escuro);
    border-radius:30px; 
    background:var(--bege);
    font-size:.9rem;
    color:var(--texto); 
    outline:none;
    transition:border .2s;
  }

  .search-bar input:focus { 
        border-color:var(--dourado); 
    }

  .search-bar svg {
    position:absolute; 
    left:12px; 
    top:50%; 
    transform:translateY(-50%);
    color:var(--marrom-claro); 
    pointer-events:none;
  }

  .header-actions { 
    display:flex; 
    align-items:center; 
    gap:12px; }

  .cart-btn {
    position:relative; 
    background:var(--marrom);
    border:none; 
    cursor:pointer; 
    border-radius:50%;
    width:42px; 
    height:42px;
    display:flex; 
    align-items:center; 
    justify-content:center;
    color:#fff; 
    transition:background .2s;
  }
  .cart-btn:hover { 
    background:var(--dourado); 
}
  .cart-count {
    position:absolute; 
    top:-4px; right:-4px;
    background:var(--dourado); 
    color:#fff;
    font-size:.65rem; 
    font-weight:700;
    width:18px; 
    height:18px; 
    border-radius:50%;
    display:flex; 
    align-items:center; 
    justify-content:center;
    opacity:0; 
    transform:scale(0); 
    transition:.2s;
  }

  .cart-count.show { 
    opacity:1; 
    transform:scale(1); 
}

  .hamburger {
    display:none; 
    flex-direction:column; 
    gap:5px;
    background:none; 
    border:none; 
    cursor:pointer; 
    padding:4px;
  }

  .hamburger span {
    width:24px; 
    height:2px; 
    background:var(--marrom);
    border-radius:2px; 
    transition:.3s;
    display:block;
  }

  .hamburger.open span:nth-child(1) { 
        transform:translateY(7px) rotate(45deg); 
    }

  .hamburger.open span:nth-child(2) { 
        opacity:0; 
    }
  .hamburger.open span:nth-child(3) { 
        transform:translateY(-7px) rotate(-45deg); 
    }

  /*     NAV MOBILE       */

  .mobile-nav {
    display:none; 
    position:fixed; 
    top:0; 
    left:0;
    width:100%; 
    height:100%; 
    background:rgba(58,44,34,.92);
    z-index:950; 
    flex-direction:column;
    align-items:center;
    justify-content: center; 
    gap:32px;
    opacity:0; 
    pointer-events:none; 
    transition:opacity .3s;
  }

    .mobile-nav.open { 
        opacity:1;
        pointer-events:all; 
        display:flex; 
    }
  .mobile-nav a {
    font-family:'Playfair Display',serif; 
    font-size:1.3rem;
    color:var(--bege); 
    text-decoration:none;
    transition:color .2s;
  }

  .mobile-nav a:hover { 
    color:var(--dourado); 
}
  .mobile-nav .close-nav {
    position:absolute; 
    top:24px; 
    right:24px;
    background:none; 
    border:none; color:var(--bege);
    font-size:1.5rem; 
    cursor:pointer;
  }

  /*  DESKTOP NAV  */
  .desktop-nav {
    background:var(--marrom);
  }

  .desktop-nav ul {
    max-width:1200px; 
    margin:0 auto;
    padding:0 24px; 
    list-style:none;
    display:flex; 
    gap:0;
  }

  .desktop-nav ul li a {
    display:block; 
    padding:12px 20px;
    color:var(--bege); 
    text-decoration:none;
    font-size:.85rem; 
    letter-spacing:.06em; 
    text-transform:uppercase;
    transition:background .2s, color .2s;
  }
  .desktop-nav ul li a:hover { 
    background:var(--dourado); 
    color:#fff; 
}

  /*  BANNER  */
  .banner {
    background: linear-gradient(135deg, #3a2c22 0%, #6b4f3b 50%, #9b7a60 100%);
    padding: 80px 24px;
    text-align:center; 
    position:relative; 
    overflow:hidden;
  }

  .banner::before {
    content:''; 
    position:absolute; 
    inset:0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9a66b' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events:none;
  }

  .banner-content { 
    position:relative; 
    max-width:600px; 
    margin:0 auto; 
}
  .banner-tag {
    display:inline-block;
    background:rgba(201,166,107,.2); 
    border:1px solid var(--dourado);
    color:var(--dourado-claro); 
    font-size:.75rem; 
    letter-spacing:.12em;
    text-transform:uppercase; 
    padding:5px 16px; 
    border-radius:30px;
    margin-bottom:20px;
  }

  .banner h1 {
    font-size:clamp(2rem,5vw,3.2rem);
    color:#fff; 
    line-height:1.2; 
    margin-bottom:16px;
  }

  .banner h1 em { 
    color:var(--dourado-claro); 
    font-style:italic; 
}
  .banner p {
    color:rgba(245,241,232,.75); 
    font-size:1rem;
    font-weight:300; 
    margin-bottom:32px; 
    line-height:1.7;
  }

  .btn-primary {
    background:var(--dourado); 
    color:#fff;
    border:none; 
    padding:14px 32px; 
    border-radius:30px;
    font-family:'Jost',sans-serif; 
    font-size:.95rem;
    font-weight:500; 
    cursor:pointer; 
    text-decoration:none;
    display:inline-block; 
    letter-spacing:.05em;
    transition:background .2s, transform .2s, box-shadow .2s;
    box-shadow:0 4px 20px rgba(201,166,107,.4);
  }
  .btn-primary:hover {
    background:var(--marrom); 
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(107,79,59,.4);
  }

  /* SLIDER  */
  .section { 
    max-width:1200px; 
    margin:0 auto; 
    padding:48px 24px; 
}

  .section-title {
    font-family:'Playfair Display',serif; 
    font-size:1.6rem;
    color:var(--marrom); 
    margin-bottom:8px;
  }
  .section-title span { 
    color:var(--dourado); 
    font-style:italic; 
}
  .section-sub {
    color:var(--marrom-claro); 
    font-size:.9rem;
    font-weight:300; 
    margin-bottom:28px;
  }

  .slider-wrap { 
    position:relative; 
}

  .slider {
    display:flex; gap:16px; overflow:hidden;
    scroll-behavior:smooth;
  }
  .slider-btn {
    position:absolute; 
    top:50%; 
    transform:translateY(-50%);
    background:var(--branco); 
    border:1.5px solid var(--bege-escuro);
    width:40px; 
    height:40px; 
    border-radius:50%;
    display:flex; 
    align-items:center; 
    justify-content:center;
    cursor:pointer; 
    z-index:10; 
    color:var(--marrom);
    box-shadow:0 2px 8px var(--sombra); 
    transition:.2s;
  }
  .slider-btn:hover { 
    background:var(--dourado); 
    color:#fff; 
    border-color:var(--dourado); 
}
  .slider-btn.prev { 
    left:-16px; 
}
  .slider-btn.next { 
    right:-16px; 
}

  /*  FILTROS */
  .filtros {
    display:flex; 
    flex-wrap:wrap; 
    gap:10px; 
    margin-bottom:28px;
  }
  .filtro-btn {
    padding:8px 20px; 
    border-radius:30px;
    border:1.5px solid var(--bege-escuro);
    background:var(--branco); 
    color:var(--marrom-claro);
    font-family:'Jost',sans-serif; 
    font-size:.85rem;
    cursor:pointer; 
    transition:.2s;
  }
  .filtro-btn:hover, .filtro-btn.active {
    background:var(--marrom); 
    color:#fff; 
    border-color:var(--marrom);
  }

  /*  GRID DE PRODUTOS */
  .produtos-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:20px;
  }

  /* ── CARD ───────────────────────────── */
  .card {
    background:var(--branco);
    border-radius:14px;
    overflow:hidden; 
    box-shadow:0 2px 10px var(--sombra);
    transition:transform .25s, box-shadow .25s;
    display:flex; 
    flex-direction:column;
  }
  .card:hover {
    transform:translateY(-4px);
    box-shadow:0 10px 28px rgba(107,79,59,.2);
  }
  .card-img {
    position:relative; 
    aspect-ratio:1/1; 
    overflow:hidden;
    background:var(--bege-escuro);
  }
  .card-img img {
    width:100%; 
    height:100%; 
    object-fit:cover;
    transition:transform .4s;
  }
  .card:hover .card-img img { 
    transform:scale(1.07); 
}
  .badge {
    position:absolute; 
    top:10px; left:10px;
    background:var(--marrom); 
    color:#fff;
    font-size:.7rem; 
    font-weight:700; 
    padding:3px 9px;
    border-radius:20px; 
    letter-spacing:.04em;
  }
  .badge.off { 
    background:var(--dourado); 
}

  .card-body { 
    padding:14px 16px 16px; 
    flex:1; 
    display:flex; 
    flex-direction:column; 
}
  .card-cat {
    font-size:.7rem; 
    letter-spacing:.1em; 
    text-transform:uppercase;
    color:var(--dourado); 
    font-weight:500; 
    margin-bottom:4px;
  }
  .card-nome {
    font-family:'Playfair Display',serif; 
    font-size:.95rem;
    color:var(--texto); 
    line-height:1.35; 
    margin-bottom:8px; 
    flex:1;
  }
  .card-precos { 
    display:flex; 
    align-items:baseline; 
    gap:8px; 
    margin-bottom:12px; 
}
  .preco-atual { 
    font-size:1.05rem; 
    font-weight:700; 
    color:var(--marrom); 
}
  .preco-antigo { 
    font-size:.8rem; 
    color:#bbb; 
    text-decoration:line-through; 
}

  .btn-add {
    width:100%; 
    padding:10px;
    background:var(--marrom); 
    color:#fff; 
    border:none;
    border-radius:8px; 
    font-family:'Jost',sans-serif;
    font-size:.85rem; 
    cursor:pointer; 
    transition:.2s;
    font-weight:500; 
    letter-spacing:.04em;
  }
  .btn-add:hover { 
    background:var(--dourado); 
}
  .btn-add.added { 
    background:#4caf50; 
}

  /* CARRINHO LATERAL */
  .carrinho-overlay {
    position:fixed; 
    inset:0; 
    background:rgba(0,0,0,.4);
    z-index:1000; 
    opacity:0; 
    pointer-events:none; 
    transition:opacity .3s;
  }
  .carrinho-overlay.open { 
    opacity:1; 
    pointer-events:all; 
}

  .carrinho-drawer {
    position:fixed; 
    top:0; right:-420px; 
    width:380px; 
    max-width:100vw;
    height:100%; 
    background:var(--branco); 
    z-index:1001;
    display:flex; 
    flex-direction:column;
    box-shadow:-4px 0 24px rgba(0,0,0,.15);
    transition:right .35s cubic-bezier(.4,0,.2,1);
    padding:0;
  }
  .carrinho-drawer.open { 
    right:0; 
}

  .carrinho-header {
    padding:20px 24px;
    border-bottom:1px solid var(--bege-escuro);
    display:flex; 
    align-items:center; 
    justify-content:space-between;
  }
  .carrinho-header h3 {
    font-family:'Playfair Display',serif; 
    font-size:1.2rem; 
    color:var(--marrom);
  }
  .close-cart {
    background:none; 
    border:none; 
    cursor:pointer;
    font-size:1.3rem; 
    color:var(--marrom-claro); 
    transition:color .2s;
  }
  .close-cart:hover { 
    color:var(--marrom); 
}

  .carrinho-items {
    flex:1; 
    overflow-y:auto; 
    padding:16px 24px;
    display:flex; 
    flex-direction:column; 
    gap:14px;
  }
  .carrinho-empty {
    flex:1; 
    display:flex; 
    flex-direction:column;
    align-items:center; 
    justify-content:center;
    color:var(--marrom-claro); 
    gap:12px; 
    text-align:center;
  }
  .carrinho-empty svg { 
    opacity:.3; 
}

  .cart-item {
    display:flex; 
    gap:12px; 
    align-items:center;
    padding:12px; 
    background:var(--bege); 
    border-radius:10px;
  }
  .cart-item-img {
    width:58px; 
    height:58px; 
    border-radius:8px;
    object-fit:cover; 
    background:var(--bege-escuro);
  }
  .cart-item-info { 
    flex:1; 
}
  .cart-item-nome { 
    font-size:.85rem; 
    font-weight:500; 
    color:var(--texto); 
}
  .cart-item-preco { 
    font-size:.8rem; 
    color:var(--dourado); 
    font-weight:700; 
    margin-top:2px; 
}
  .cart-item-qty { 
    display:flex; 
    align-items:center; 
    gap:8px; 
    margin-top:6px; 
}
  .qty-btn {
    width:22px; 
    height:22px; 
    border-radius:50%;
    border:1px solid var(--bege-escuro); 
    background:var(--branco);
    cursor:pointer; 
    font-size:.8rem; 
    color:var(--marrom);
    display:flex; 
    align-items:center; 
    justify-content:center;
    transition:.2s;
  }
  .qty-btn:hover { 
    background:var(--marrom); 
    color:#fff; 
    border-color:var(--marrom); 
}
  .qty-val { 
    font-size:.85rem; 
    font-weight:500; 
    min-width:18px; 
    text-align:center; 
}
  .remove-item { 
    background:none; 
    border:none; 
    cursor:pointer; 
    color:#ccc; 
    font-size:.9rem; 
    transition:color .2s; 
}
  .remove-item:hover {
    color:#e55; 
}

  .carrinho-footer {
    padding:20px 24px;
    border-top:1px solid var(--bege-escuro);
  }
  .total-row {
    display:flex; 
    justify-content:space-between; 
    align-items:center;
    margin-bottom:16px;
  }
  .total-label { 
    font-size:.9rem; 
    color:var(--marrom-claro); 
}
  .total-val { 
    font-family:'Playfair Display',serif; 
    font-size:1.3rem; 
    color:var(--marrom); 
    font-weight:700; 
}

  .btn-whatsapp {
    width:100%; 
    padding:14px;
    background:#25d366; 
    color:#fff; 
    border:none;
    border-radius:10px; 
    font-family:'Jost',sans-serif;
    font-size:.95rem; 
    font-weight:600; 
    cursor:pointer;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    gap:10px;
    transition:background .2s, transform .2s;
    letter-spacing:.03em;
  }
  .btn-whatsapp:hover { 
    background:#1da851; 
    transform:translateY(-2px); 
}

  /* WHATSAPP FLUTUANTE  */
  .wa-float {
    position:fixed; 
    bottom:28px; 
    right:28px; 
    z-index:800;
    width:56px; 
    height:56px; 
    border-radius:50%;
    background:#25d366; 
    display:flex; 
    align-items:center; 
    justify-content:center;
    box-shadow:0 4px 16px rgba(37,211,102,.45);
    text-decoration:none; transition:transform .2s, box-shadow .2s;
    animation: pulse-green 2.5s infinite;
  }
  .wa-float:hover { 
    transform:scale(1.1); 
    box-shadow:0 6px 24px rgba(37,211,102,.6); 
}
  @keyframes pulse-green {
    0%,100% { 
        box-shadow:0 4px 16px rgba(37,211,102,.45); 
    }
    50% { 
        box-shadow:0 4px 28px rgba(37,211,102,.7); 
    }
  }

  /* FOOTER */
  footer {
    background:var(--marrom);
    color:var(--bege); 
    padding:48px 24px 24px;
    margin-top:60px;
  }
  .footer-inner {
    max-width:1200px; 
    margin:0 auto;
    display:grid; 
    grid-template-columns:1fr 1fr 1fr; 
    gap:40px;
    padding-bottom:32px;
    border-bottom:1px solid rgba(245,241,232,.15);
  }
  .footer-brand .logo { 
    color:var(--bege); 
    font-size:1.3rem; 
}
  .footer-brand .logo span { 
    color:var(--dourado-claro); 
}
  .footer-brand p {
    font-size:.85rem; line-height:1.7;
    color:rgba(245,241,232,.65); 
    margin-top:12px;
  }
  .footer-col h4 {
    font-family:'Playfair Display',serif; 
    font-size:1rem;
    color:var(--dourado-claro); 
    margin-bottom:14px;
  }
  .footer-col ul { 
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
}
  .footer-col ul li a {
    color:rgba(245,241,232,.65); 
    text-decoration:none; 
    font-size:.85rem;
    transition:color .2s;
  }
  .footer-col ul li a:hover { 
    color:var(--dourado-claro); 
}
  .newsletter { 
    display:flex; 
    margin-top:8px; 
}
  .newsletter input {
    flex:1; 
    padding:9px 14px; 
    border:1px solid rgba(245,241,232,.2);
    border-right:none; 
    border-radius:6px 0 0 6px;
    background:rgba(255,255,255,.08); 
    color:var(--bege);
    font-family:'Jost',sans-serif; 
    font-size:.85rem; 
    outline:none;
  }
  .newsletter input::placeholder { 
    color:rgba(245,241,232,.4); 
}
  .newsletter button {
    padding:9px 16px; 
    background:var(--dourado); 
    color:#fff;
    border:none; 
    border-radius:0 6px 6px 0; 
    cursor:pointer;
    font-family:'Jost',sans-serif; 
    font-size:.85rem; 
    transition:background .2s;
  }
  .newsletter button:hover { 
    background:var(--dourado-claro); 
}
  .footer-bottom {
    max-width:1200px; 
    margin:20px auto 0;
    text-align:center; 
    font-size:.78rem;
    color:rgba(245,241,232,.35);
  }

  /*  RESPONSIVO  */
  @media(max-width:900px) {
    .produtos-grid { 
        grid-template-columns:repeat(2,1fr); 
    }
    .footer-inner { 
        grid-template-columns:1fr 1fr; 
    }
    .desktop-nav { 
        display:none; 
    }
    .hamburger { 
        display:flex; 
    }
    .mobile-nav { 
        display:flex; 
    }
    .slider-btn { 
        display:none; 
    }
  }
  @media(max-width:500px) {
    .produtos-grid { 
        grid-template-columns:repeat(2,1fr); 
        gap:12px; 
    }
    .footer-inner { 
        grid-template-columns:1fr; 
    }
    .banner { 
        padding:52px 20px; 
    }
    .carrinho-drawer { 
        width:100vw; 
    }
  }

  /* ── TOAST ──────────────────────────── */
  .toast {
    position:fixed; 
    bottom:100px; 
    left:50%; 
    transform:translateX(-50%) translateY(20px);
    background:var(--marrom); 
    color:#fff; 
    padding:10px 22px;
    border-radius:30px; 
    font-size:.85rem; 
    z-index:2000;
    opacity:0; 
    transition:.3s; 
    pointer-events:none; 
    white-space:nowrap;
  }
  .toast.show { 
    opacity:1; 
    transform:translateX(-50%) translateY(0); 
}