:root{
      --brand-900:#0b1b7a; --brand-800:#1130a8; --brand-700:#1b4dd8; --brand-600:#2b6bff;
      --brand-200:#bfdbfe; --brand-100:#eaf1ff;
      --bg:#f4f6f8; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb;
      --accent:#ffd84d; --danger:#d90429;
      --radius:14px; --shadow:0 10px 30px rgba(17, 48, 168, .14); --shadow-soft:0 6px 18px rgba(0,0,0,.08);
    }
    body{ font-family:Roboto, system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; }

    /* Topbar Premium */
    .topbar{ position:sticky; top:0; z-index:1040; background:linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%); border-bottom:1px solid rgba(255,255,255,.18); box-shadow:0 8px 30px rgba(11,27,122,.25); }
    .topbar .container{ padding-top:.75rem; padding-bottom:.75rem; }
    .brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff; }
    .brand img{ width:46px; height:46px; object-fit:contain; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:6px; }
    .brand .t1{ font-weight:900; letter-spacing:.4px; line-height:1.1; }
    .brand .t2{ font-size:.75rem; color:rgba(255,255,255,.82); margin-top:2px; }
    
    /* Search */
    .search-shell{ margin-top:.75rem; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.22); border-radius:999px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.12); }
    .search-shell .input-group-text{ background:transparent; border:0; color:rgba(255,255,255,.85); padding-left:1rem; }
    #campo-busca{ background:transparent; border:0; color:#fff; font-weight:600; }
    #campo-busca::placeholder{ color:rgba(255,255,255,.82); }
    #campo-busca:focus{ box-shadow:none; }

    /* Menus de Categoria */
    .filter-section { padding: 10px 0; display: flex; align-items: center; gap: 10px; }
    .btn-all-cats { flex: 0 0 auto; background: var(--brand-900); color: #fff; border: none; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(11,27,122,.2); transition: 0.2s; }
    .category-scroll { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding: 5px 2px; scrollbar-width: none; }
    .category-scroll::-webkit-scrollbar { display:none; }
    .btn-cat { flex: 0 0 auto; background: #fff; border: 1px solid var(--line); color: var(--muted); padding: 8px 16px; border-radius: 99px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; white-space: nowrap; transition: all 0.2s ease; cursor:pointer;}
    .btn-cat:hover { background: var(--brand-100); color: var(--brand-800); }
    .btn-cat.active { background: var(--brand-700); color: #fff; border-color: var(--brand-700); box-shadow: 0 4px 12px rgba(27, 77, 216, 0.25); }

    /* Offcanvas */
    .offcanvas { border-radius: 0 20px 20px 0; border: none; }
    .offcanvas-header { background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); color: #fff; }
    .list-group-item { border: none; border-bottom: 1px solid var(--line); padding: 16px 20px; color: var(--text); font-size: 0.95rem; cursor: pointer; transition: 0.2s; }
    .list-group-item:hover, .list-group-item.active { background-color: var(--brand-100); color: var(--brand-800); font-weight: 800; }
    .icon-box { width: 32px; height: 32px; background: #eef2ff; border-radius: 8px; color: var(--brand-700); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

    /* Cards e Layout */
    .panel{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-soft); }
    .page{ padding-bottom:120px; }

    .promo-hero{ border-radius:18px; background:linear-gradient(135deg, rgba(255,216,77,.95) 0%, rgba(234,241,255,.9) 100%); border:1px solid rgba(255,216,77,.55); box-shadow:0 14px 40px rgba(255,216,77,.25); overflow:hidden; }
    .promo-hero .inner{ padding:1.1rem 1rem; display:flex; align-items:center; gap:1rem; }
    .promo-icon{ width:48px; height:48px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(0,0,0,.10); }
    .promo-carousel .carousel-control-prev, .promo-carousel .carousel-control-next{ width:44px; opacity:1; top: 50%; transform: translateY(-50%); }
    .promo-carousel .carousel-control-prev-icon, .promo-carousel .carousel-control-next-icon{ background-color:rgba(11,27,122,.85); border-radius:999px; padding:18px; }

    .card-produto{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:transform .18s, box-shadow .18s; height:100%; }
    .card-produto:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(43,107,255,.25); }
    .img-container{ width:100%; height:220px; background:#fff; display:flex; align-items:center; justify-content:center; padding:14px; position:relative; border-bottom:1px solid var(--line); cursor:pointer;}
    .img-container img{ max-width:100%; max-height:100%; object-fit:contain; transition:transform .2s; }
    .card-produto:hover .img-container img{ transform:scale(1.03); }

    .badge-promo{ position:absolute; top:10px; left:10px; z-index:6; background:linear-gradient(135deg, var(--danger), #ff4d6d); color:#fff; font-weight:900; font-size:.72rem; padding:.35rem .6rem; border-radius:999px; }
    .badge-categoria{ position:absolute; top:10px; right:10px; z-index:5; background:rgba(11,27,122,.92); color:#fff; font-size:.72rem; font-weight:900; padding:.35rem .6rem; border-radius:999px; }

    .btn-add{ width:38px; height:38px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(43,107,255,.35); background:rgba(43,107,255,.08); color:var(--brand-800); transition:transform .15s; cursor:pointer;}
    .btn-add:hover{ background:rgba(43,107,255,.14); transform:scale(1.1); }

    .btn-float{ background:linear-gradient(135deg, var(--brand-900), var(--brand-700)); border:none; box-shadow:0 18px 40px rgba(11,27,122,.35); z-index:1050;}
    .badge-notify{ background:var(--accent); color:#111827; border:2px solid #fff; font-weight:900; }