:root {
      --navy:        #001440;
      --navy-2:      #001F5B;
      --blue:        #0047AB;
      --teal:        #00C9B1;
      --teal-dim:    rgba(0,201,177,0.13);
      --teal-border: rgba(0,201,177,0.28);
      --gold:        #FFB800;
      --red:         #FF3B3B;
      --surface:     rgba(255,255,255,0.07);
      --surface-2:   rgba(255,255,255,0.11);
      --border:      rgba(255,255,255,0.10);
      --text:        #ffffff;
      --text-2:      rgba(255,255,255,0.75);
      --text-muted:  rgba(255,255,255,0.40);
      --shadow:      0 12px 40px rgba(0,0,0,0.45);
      --r:           16px;
      --r-lg:        22px;
      --r-xl:        28px;
    }
    
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
    html { scroll-behavior:smooth; }
    
    body {
      font-family: 'DM Sans', -apple-system, sans-serif;
      background: var(--navy);
      min-height: 100vh;
      color: var(--text);
      overflow-x: hidden;
      padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }
    body::after {
      content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
      background:
        radial-gradient(ellipse 90% 55% at 50% -5%,  rgba(0,71,171,.62)  0%, transparent 65%),
        radial-gradient(ellipse 45% 35% at 92% 62%,  rgba(0,201,177,.10) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 5%  82%,  rgba(0,71,171,.12)  0%, transparent 55%),
        linear-gradient(180deg, #001440 0%, #00091F 100%);
    }
    body::before {
      content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
      background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity:.022;
    }
    
    /* ── HEADER ── */
    .header {
      position:sticky; top:0; z-index:400; height:58px;
      background:rgba(0,15,45,.94);
      backdrop-filter:blur(28px) saturate(180%);
      -webkit-backdrop-filter:blur(28px) saturate(180%);
      border-bottom:1px solid var(--border);
      padding:0 18px;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      box-shadow:0 2px 20px rgba(0,0,0,.35);
    }
    .header-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
    .logo-img-real { height:36px; width:auto; object-fit:contain; display:block; filter:invert(1) brightness(3); mix-blend-mode:screen; }
    .logo-fallback { display:none; align-items:center; gap:8px; }
    .logo-text { font-family:'Syne',sans-serif; font-size:21px; font-weight:800; color:white; letter-spacing:-.5px; }
    .logo-text span { color:var(--teal); }
    .header-right { display:flex; align-items:center; gap:8px; }
    .icon-btn {
      width:38px; height:38px; background:var(--surface); border:1px solid var(--border);
      border-radius:50%; display:flex; align-items:center; justify-content:center;
      cursor:pointer; color:white; text-decoration:none; transition:all .18s;
      flex-shrink:0; position:relative;
    }
    .icon-btn:hover { background:var(--surface-2); }
    .icon-btn svg { width:18px; height:18px; }

    /* ── SVG ICON (substitui emojis) ── */
    .svg-icon{
        width:20px;
        height:20px;
        display:block;
        object-fit:contain;
    }
    
    /* ── SEARCH ── */
    .search-wrap { padding:14px 18px 6px; position:relative; }
    .search-pill {
      display:flex; align-items:center; gap:10px;
      background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.11);
      border-radius:50px; padding:12px 18px; transition:all .2s; backdrop-filter:blur(12px);
    }
    .search-pill:focus-within { background:rgba(255,255,255,.12); border-color:var(--teal-border); box-shadow:0 0 0 3px rgba(0,201,177,.07); }
    .search-pill input { flex:1; background:transparent; border:none; outline:none; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:500; color:white; }
    .search-pill input::placeholder { color:rgba(255,255,255,.36); }
    .s-icon { color:rgba(255,255,255,.38); flex-shrink:0; }
    .search-clear { background:rgba(255,255,255,.15); border:none; color:white; width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:12px; display:none; align-items:center; justify-content:center; flex-shrink:0; }
    .search-clear.show { display:flex; }
    .autocomplete-drop {
      position:absolute; top:calc(100% - 4px); left:18px; right:18px;
      background:white; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.4);
      z-index:500; display:none; overflow:hidden; max-height:400px; overflow-y:auto; animation:dropIn .18s ease;
    }
    .autocomplete-drop.show { display:block; }
    @keyframes dropIn { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:none;} }
    .ac-section-title { padding:10px 16px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#9ca3af; background:#f9fafb; }
    .ac-item { display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; text-decoration:none; color:#111; border-bottom:1px solid #f3f4f6; transition:background .15s; }
    .ac-item:hover,.ac-item.sel { background:#f0f5ff; }
    .ac-thumb { width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,#0047AB,#00C9B1); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; overflow:hidden; }
    .ac-thumb img { width:100%; height:100%; object-fit:cover; }
    .ac-thumb .svg-icon { filter:brightness(0) invert(1); }
    .ac-info { flex:1; min-width:0; }
    .ac-nome { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ac-nome mark { background:#fef08a; border-radius:3px; padding:0 2px; }
    .ac-sub { font-size:12px; color:#6b7280; margin-top:2px; }
    .ac-preco { font-size:13px; font-weight:700; color:#0047AB; flex-shrink:0; }
    .ac-footer { padding:13px 16px; background:#f9fafb; text-align:center; font-size:13px; font-weight:600; color:#0047AB; cursor:pointer; border-top:1px solid #e5e7eb; display:flex; align-items:center; justify-content:center; gap:6px; }
    .ac-footer .svg-icon { width:16px; height:16px; }
    .ac-footer:hover { background:#eff6ff; }
    
    /* ── HERO ── */
    .hero {
      margin:12px 18px 18px; position:relative; overflow:hidden;
      border-radius:var(--r-xl);
      background:linear-gradient(135deg,#0055D4 0%,#0038A0 45%,#001F6B 100%);
      padding:26px 22px 22px; border:1px solid rgba(255,255,255,.10);
    }
    .hero::before { content:''; position:absolute; top:-50px; right:-50px; width:230px; height:230px; background:radial-gradient(circle,rgba(0,201,177,.22) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
    .hero::after  { content:''; position:absolute; bottom:-60px; left:-40px; width:180px; height:180px; background:radial-gradient(circle,rgba(255,184,0,.10) 0%,transparent 70%); border-radius:50%; pointer-events:none; }
    .hero-tag {
      display:inline-flex; align-items:center; gap:6px;
      background:var(--teal-dim); border:1px solid var(--teal-border);
      color:var(--teal); font-size:11px; font-weight:700;
      padding:4px 12px; border-radius:50px; margin-bottom:12px;
      text-transform:uppercase; letter-spacing:.05em; position:relative; z-index:1;
    }
    .hero-tag::before { content:''; width:6px; height:6px; background:var(--teal); border-radius:50%; display:block; }
    .hero-title { font-family:'Syne',sans-serif; font-size:26px; font-weight:800; line-height:1.2; margin-bottom:8px; position:relative; z-index:1; }
    .hero-title em { font-style:normal; color:var(--teal); }

    /* Visível para leitores de ecrã e motores de busca, oculto visualmente. */
    .sr-only {
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .hero-sub { font-size:14px; color:var(--text-2); line-height:1.6; margin-bottom:20px; position:relative; z-index:1; max-width:290px; }
    .hero-actions { display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap; }
    .btn-primary { background:var(--teal); color:#001440; border:none; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; padding:11px 22px; border-radius:50px; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
    .btn-primary .svg-icon { filter:brightness(0); }
    .btn-primary:hover { filter:brightness(1.08); transform:translateY(-2px); }
    .btn-ghost { background:rgba(255,255,255,.10); color:white; border:1.5px solid rgba(255,255,255,.20); font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; padding:11px 18px; border-radius:50px; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
    .btn-ghost .svg-icon { filter:brightness(0) invert(1); }
    .btn-ghost:hover { background:rgba(255,255,255,.16); }
    .hero-stats { display:flex; gap:24px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); position:relative; z-index:1; }
    .hero-stat-val { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; color:white; }
    .hero-stat-lbl { font-size:10px; color:var(--text-muted); margin-top:1px; }
    
    /* ── SECTION BAR ── */
    .section-bar { display:flex; align-items:center; justify-content:space-between; padding:22px 18px 12px; }
    .section-bar-title { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; display:flex; align-items:center; gap:8px; }
    .section-bar-title .svg-icon { filter:brightness(0) invert(1); }
    .section-bar-link { font-size:13px; font-weight:600; color:var(--teal); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
    .section-bar-link .svg-icon { width:14px; height:14px; filter:invert(74%) sepia(54%) saturate(2476%) hue-rotate(140deg) brightness(91%) contrast(101%); }
    .section-bar-link:hover { opacity:.8; }
    
    /* ── CATEGORIAS ── */
    .cat-carousel-wrap { position:relative; }
    .cat-carousel-wrap::after { content:''; position:absolute; top:0; right:0; bottom:10px; width:52px; pointer-events:none; background:linear-gradient(to left,rgba(0,20,64,.92) 0%,transparent 100%); }
    .cat-carousel { display:flex; gap:10px; padding:0 18px 10px; overflow:hidden; cursor:grab; user-select:none; -webkit-user-select:none; }
    .cat-carousel.dragging { cursor:grabbing; }
    .cat-carousel::-webkit-scrollbar { display:none; }
    .cat-card { flex:0 0 96px; min-height:108px; border-radius:var(--r); padding:16px 10px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; cursor:pointer; transition:transform .2s,box-shadow .2s; border:1px solid rgba(255,255,255,.09); position:relative; overflow:hidden; justify-content:center; }
    .cat-card:hover  { transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.4); }
    .cat-card:active { transform:scale(.96); }
    .cat-badge { position:absolute; top:6px; right:6px; font-size:7.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:50px; }
    .cat-badge.hot      { background:rgba(255,59,59,.30);  color:#ff8080; }
    .cat-badge.em-breve { background:rgba(255,255,255,.10); color:rgba(255,255,255,.42); }
    .cat-badge.novo     { background:rgba(0,201,177,.25);   color:#00C9B1; }
    .cat-icon{
            width:30px;
            height:30px;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            z-index:1;
        }
        
        .icone-categoria{
            width:100%;
            height:100%;
            object-fit:contain;
            display:block;
        }
    .cat-name { font-size:12px; font-weight:700; color:white; text-align:center; line-height:1.25; position:relative; z-index:1; }
    .cat-dots { display:flex; justify-content:center; align-items:center; gap:5px; padding:6px 18px 0; }
    .cat-dot { width:18px; height:3px; border-radius:2px; background:rgba(255,255,255,.14); transition:background .3s,width .3s; cursor:pointer; }
    .cat-dot.active { background:var(--teal); width:28px; }
    
    /* ═══════════════════════════════════════════════════════════════
       CARROSSEL AUTO — desloca-se sozinho, para ao toque/drag,
       retoma 2s depois de o utilizador largar.
       Fades nas bordas indicam que há mais conteúdo.
    ═══════════════════════════════════════════════════════════════ */
    .carousel-outer {
      position: relative;
      overflow: hidden;  /* esconde o que fica fora */
    }
    /* Fades laterais */
    .carousel-outer::before,
    .carousel-outer::after {
      content:''; position:absolute; top:0; bottom:0; width:40px;
      z-index:10; pointer-events:none;
    }
    .carousel-outer::before { left:0;  background:linear-gradient(to right,rgba(0,20,64,.92) 0%,transparent 100%); }
    .carousel-outer::after  { right:0; background:linear-gradient(to left, rgba(0,20,64,.92) 0%,transparent 100%); }
    
    /* O track é mais largo que o viewport — role aqui */
    .carousel-track {
      display: flex;
      gap: 12px;
      padding: 4px 18px 16px;
      /* overflow visível — o outer esconde */
      will-change: transform;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
      /* touch nativo */
      overflow-x: auto;
      overflow-y: visible;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .carousel-track::-webkit-scrollbar { display:none; }
    .carousel-track.dragging { cursor:grabbing; }
    
    /* ── CARDS PRODUTO ── */
    .prod-card {
      flex:0 0 148px; border-radius:var(--r); overflow:hidden;
      background:rgba(255,255,255,.07); border:1px solid var(--border);
      text-decoration:none; color:var(--text); display:block;
      transition:transform .2s,box-shadow .2s; flex-shrink:0;
    }
    .prod-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
    .prod-img { width:100%; height:140px; overflow:hidden; position:relative; background:linear-gradient(135deg,#0A2472,#0E6BA8); display:flex; align-items:center; justify-content:center; font-size:44px; }
    .prod-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
    .prod-img .svg-icon { width:36px; height:36px; filter:brightness(0) invert(1); opacity:.55; }
    .prod-card:hover .prod-img img { transform:scale(1.07); }
    .prod-disc { position:absolute; top:8px; left:8px; background:var(--red); color:white; font-size:11px; font-weight:800; padding:3px 8px; border-radius:6px; }
    .prod-info { padding:10px 11px 13px; }
    .prod-nome { font-size:12.5px; font-weight:600; line-height:1.35; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; min-height:34px; margin-bottom:5px; }
    .prod-preco { font-size:14px; font-weight:800; color:var(--teal); }
    .prod-loja  { font-size:10px; color:var(--text-muted); margin-top:2px; display:flex; align-items:center; gap:4px; }
    .prod-loja .svg-icon { width:11px; height:11px; filter:brightness(0) invert(1); opacity:.55; flex-shrink:0; }
    
    /* ── CARDS LOJA ── */
    .loja-card {
      flex:0 0 162px; border-radius:var(--r-lg); overflow:hidden;
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      text-decoration:none; color:var(--text); display:block;
      transition:transform .2s,box-shadow .2s; flex-shrink:0;
    }
    .loja-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
    .loja-img { width:100%; height:104px; overflow:hidden; position:relative; background:linear-gradient(135deg,#0052CC,#003380); display:flex; align-items:center; justify-content:center; font-size:44px; }
    .loja-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
    .loja-img .svg-icon { width:36px; height:36px; filter:brightness(0) invert(1); opacity:.55; }
    .loja-card:hover .loja-img img { transform:scale(1.07); }
    .loja-sat { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.65); backdrop-filter:blur(8px); color:var(--teal); font-size:11px; font-weight:700; padding:3px 9px; border-radius:50px; border:1px solid rgba(0,201,177,.28); display:flex; align-items:center; gap:4px; }
    .loja-sat .svg-icon { width:11px; height:11px; filter:invert(74%) sepia(54%) saturate(2476%) hue-rotate(140deg) brightness(91%) contrast(101%); }
    .loja-info { padding:11px 12px 13px; }
    .loja-nome { font-size:13px; font-weight:700; color:white; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .loja-cat  { font-size:10px; color:var(--text-muted); margin-bottom:5px; }
    .loja-rating { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-2); }
    .star { font-size:10px; }
    .star-icon { width:11px; height:11px; display:inline-block; }
    
    /* ── PROMO ── */
    .promo-banner { margin:18px 18px 0; background:linear-gradient(135deg,#E85D04 0%,#F7931E 60%,#FFB800 100%); border-radius:var(--r-xl); padding:22px 20px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:space-between; gap:14px; }
    .promo-banner::before { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:rgba(255,255,255,.12); border-radius:50%; pointer-events:none; }
    .promo-text-top { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.8; margin-bottom:4px; }
    .promo-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; line-height:1.15; }
    .promo-sub   { font-size:12px; opacity:.85; margin-top:4px; }
    .promo-btn { background:rgba(0,0,0,.2); border:1.5px solid rgba(255,255,255,.4); color:white; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; padding:10px 18px; border-radius:50px; cursor:pointer; white-space:nowrap; text-decoration:none; flex-shrink:0; transition:all .18s; position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; }
    .promo-btn .svg-icon { filter:brightness(0) invert(1); }
    .promo-btn:hover { background:rgba(0,0,0,.3); }
    
    /* ── BOTTOM NAV ── */
    .bottom-nav { position:fixed; bottom:0; left:0; right:0; z-index:300; background:rgba(0,12,38,.97); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:10px 0; padding-bottom:calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -4px 28px rgba(0,0,0,.45); }
    .nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-muted); font-size:11px; font-weight:600; cursor:pointer; text-decoration:none; transition:color .18s; padding:0 18px; }
    .nav-item.active { color:var(--teal); }
    .nav-icon { width:42px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50px; font-size:20px; transition:background .18s; }
    .nav-icon .svg-icon { filter:brightness(0) invert(1); opacity:.55; }
    .nav-item.active .nav-icon { background:rgba(0,201,177,.14); }
    .nav-item.active .nav-icon .svg-icon { filter:invert(74%) sepia(54%) saturate(2476%) hue-rotate(140deg) brightness(91%) contrast(101%); opacity:1; }
    

    /* ── INSTALL PWA FAB ── */
    .install-fab { position:fixed; bottom:calc(146px + env(safe-area-inset-bottom)); right:18px; height:46px; padding:0 16px 0 12px; z-index:200; background:linear-gradient(135deg,#00C9B1,#0099B5); border-radius:23px; display:none; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:#fff; cursor:pointer; box-shadow:0 6px 20px rgba(0,201,177,.45); border:1.5px solid rgba(255,255,255,.25); transition:all .25s; animation:fabPulse 3s ease-in-out infinite; }
    .install-fab.show { display:inline-flex; }
    .install-fab:hover { transform:scale(1.05); }
    .install-fab .ico { font-size:20px; display:flex; align-items:center; justify-content:center; }
    .install-fab .ico .svg-icon { width:20px; height:20px; filter:brightness(0) invert(1); }
    .install-fab .x { margin-left:6px; opacity:.8; font-size:16px; padding:0 4px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .install-fab .x .svg-icon { width:14px; height:14px; filter:brightness(0) invert(1); }
    .install-fab .x:hover { background:rgba(255,255,255,.2); }
    @media(max-width:380px){ .install-fab .lbl { display:none; } .install-fab { padding:0 12px; } }
    
        
    /* ── KEYFRAMES ── */
    @keyframes borderPulse { 0%,100%{box-shadow:0 0 0 0px rgba(0,201,177,0);} 50%{box-shadow:0 0 0 5px rgba(0,201,177,.22);} }
    @keyframes shimmer     { 0%{left:-100%} 100%{left:200%} }
    @keyframes blink       { 0%,100%{opacity:1;} 50%{opacity:.3;} }
    @keyframes fadeSlide   { to{opacity:1;transform:none;} }
    @keyframes hLineIn     { to{transform:translateY(0);opacity:1;} }
    @keyframes floatUp     { 0%{transform:translateY(0);opacity:0;} 20%{opacity:1;} 80%{opacity:.6;} 100%{transform:translateY(-80px);opacity:0;} }