<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Dom Vicente 1 Acto · e-Label (PT · ES · FR · EN · DE)</title>
  <style>
    :root{
      --bg:#ffffff;
      --ink:#141414;
      --muted:#4a4a4a;
      --line:#e6e6e6;
      --card:#fafafa;
      --primary:#2c5530;
      --primary-light:#4a7c59;
      --glass-light: rgba(255,255,255,0.1);
      --glass-border: rgba(255,255,255,0.2);
    }
    
    html{
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.6;
    }
    
    body{
      margin:0;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      min-height:100vh;
    }

    /* EFEITO LIQUID GLASS */
    .wrap{
      max-width:960px;
      margin:0 auto;
      padding:28px;
      position:relative;
    }

    .sheet{
      border:1px solid var(--glass-border);
      border-radius:20px;
      padding:32px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
      position:relative;
      overflow:hidden;
    }

    .sheet::before {
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:1px;
      background:linear-gradient(90deg, transparent, var(--glass-light), transparent);
    }

    /* HEADER COM MELHOR VISIBILIDADE */
    header.brand{
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:'bottle title meta';
      gap:24px;
      align-items:center;
      border-bottom:2px solid var(--ink);
      padding-bottom:20px;
      margin-bottom:24px;
      min-height:200px;
      position:relative;
    }

    header.brand .bottle-box{
      grid-area:bottle;
      display:flex;
      align-items:center;
      justify-content:center;
      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    }

    header.brand .bottle-box img{
      height:220px;
      max-height:260px;
      object-fit:contain;
      transition: transform 0.3s ease;
    }

    header.brand .bottle-box img:hover {
      transform: translateY(-2px);
    }

    header.brand .titles{
      grid-area:title;
      text-align:center;
    }

    header.brand .titles h1{
      font-size:2.4rem;
      letter-spacing:.03em;
      margin:0 0 8px 0;
      color:var(--ink);
      font-weight:700;
    }

    header.brand .titles .lines{
      line-height:1.4;
      font-size:1.2rem;
      font-weight:500;
    }

    header.brand .titles .line{
      display:block;
    }

    header.brand .titles .line.region{
      font-size:1.35rem;
      font-weight:600;
      color:var(--muted);
      margin-bottom:8px;
    }

    .badge{
      display:inline-block;
      border:1px solid var(--line);
      border-radius:12px;
      padding:8px 14px;
      background:#f7f7f7;
      font-weight:600;
      color:var(--ink);
    }

    .caps{
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    /* BOTÕES DE LÍNGUA MELHORADOS */
    .lang-switch{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      justify-content:center;
      margin-top:16px;
    }

    .lang-switch button{
      background:#fff;
      border:1px solid #000;
      border-radius:12px;
      padding:10px 16px;
      font-weight:600;
      color:#000;
      cursor:pointer;
      transition: all 0.3s ease;
      min-width:60px;
    }

    .lang-switch button:hover{
      background:#f2f2f2;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .lang-switch button[aria-selected="true"]{
      background:#f2f2f2;
      color:#000;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .lang-switch button:focus{
      outline:3px solid rgba(0, 0, 0, 0.3);
      outline-offset:2px;
    }

    /* LAYOUT MELHORADO */
    .layout{
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:28px;
      margin:32px 0;
    }

    @media (max-width:800px){
      .layout{
        grid-template-columns:1fr;
        gap:20px;
      }
    }

    .panel{
      border:1px solid var(--line);
      border-radius:16px;
      padding:24px;
      background:var(--card);
      box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .panel:hover{
      transform: translateY(-2px);
      box-shadow: 
        0 8px 30px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .panel h2{
      margin:0 0 16px 0;
      font-size:1.1rem;
      letter-spacing:.04em;
      font-weight:600;
    }

    /* SEÇÃO NUTRICIONAL MELHORADA */
    .nutri-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid var(--line);
      padding-bottom:12px;
      margin-bottom:16px;
    }

    .nutri-header .title{
      font-weight:700;
      font-size:1.1rem;
    }

    .nutri-header .per{
      color:var(--muted);
      font-weight:500;
    }

    .energy{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
      margin:16px 0 20px;
    }

    .energy .big{
      border:1px solid var(--line);
      border-radius:16px;
      padding:20px 16px;
      background:#fff;
      text-align:center;
      transition: all 0.3s ease;
    }

    .energy .big:hover{
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .kj{
      font-size:1.8rem;
      font-weight:800;
      color:var(--ink);
    }

    .kcal{
      font-size:1.8rem;
      font-weight:800;
      color:var(--muted);
    }

    .label{
      font-size:.9rem;
      color:var(--muted);
      margin-top:6px;
      font-weight:500;
    }

    /* TABELAS MELHORADAS */
    table{
      width:100%;
      border-collapse:collapse;
      margin:16px 0;
    }

    th, td{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      text-align:left;
    }

    th{
      font-weight:600;
    }

    tr:hover{
      background:rgba(0, 0, 0, 0.02);
    }

    /* INGREDIENTES MELHORADOS */
    .ingredients p{
      margin:.6rem 0;
      line-height:1.7;
      padding:12px;
      background:rgba(255, 255, 255, 0.5);
      border-radius:8px;
      border-left:4px solid var(--line);
    }

    .info table th{
      width:42%;
    }

    .foot{
      margin-top:20px;
      color:var(--muted);
      font-size:.9rem;
      padding-top:16px;
      border-top:1px solid var(--line);
    }

    footer{
      margin-top:32px;
      font-size:.9rem;
      color:var(--muted);
      text-align:center;
      padding-top:20px;
      border-top:1px solid var(--line);
    }

    footer a{
      color:var(--ink);
      text-decoration:none;
      font-weight:600;
      transition: color 0.3s ease;
    }

    footer a:hover{
      color:var(--muted);
      text-decoration:underline;
    }

    /* RESPONSIVIDADE MOBILE */
    @media (max-width:640px){
      .wrap{
        padding:16px;
      }
      
      .sheet{
        padding:20px;
        border-radius:16px;
      }

      header.brand{
        grid-template-columns:auto 1fr !important;
        grid-template-areas:'bottle title' 'bottle title' !important;
        min-height:280px !important;
        gap:16px !important;
      }

      header.brand .bottle-box{
        justify-content:flex-start !important;
      }

      header.brand .bottle-box img{
        height:200px !important;
      }

      header.brand .titles{
        justify-self:stretch !important;
        text-align:center !important;
        margin-left:0 !important;
        margin-right:0 !important;
        padding-left:0 !important;
        max-width:100% !important;
      }

      header.brand .titles h1{
        font-size:1.6rem !important;
        line-height:1.1 !important;
      }

      header.brand .titles .lines{
        line-height:1.35 !important;
      }

      header.brand .titles .type-line{
        display:inline-flex !important;
        align-items:center !important;
        gap:8px !important;
        font-size:1.02rem !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
      }

      header.brand .meta{
        display:none !important;
      }

      header.brand .titles .meta-inline{
        display:inline-flex !important;
        gap:8px !important;
        margin-left:8px !important;
        vertical-align:middle !important;
      }

      header.brand .titles .meta-inline .badge{
        background:none !important;
        border:none !important;
        padding:0 3px !important;
        font-weight:600 !important;
        font-size:1.1rem !important;
      }

      .lang-switch{
        display:grid !important;
        grid-template-columns:repeat(5, 1fr) !important;
        gap:8px !important;
        justify-content:stretch !important;
        align-items:stretch !important;
        margin-top:16px !important;
      }

      .lang-switch button{
        font-size:1rem !important;
        padding:12px 0 !important;
        border-radius:12px !important;
        min-width:auto !important;
      }

      .panel{
        padding:20px !important;
      }

      .energy{
        grid-template-columns:1fr !important;
        gap:12px !important;
      }

      .layout{
        gap:16px !important;
      }
    }

    /* DESKTOP SPECIFIC */
    @media (min-width:641px){
      header.brand{
        grid-template-columns:auto 1fr auto;
        grid-template-areas:'bottle title meta';
        min-height:200px;
      }

      header.brand .titles{
        text-align:center;
        margin:0;
      }

      .lang-switch{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        justify-content:center;
      }

      .lang-switch button{
        font-size:.95rem;
        padding:10px 14px;
        border-radius:12px;
      }

      header.brand .meta{
        display:flex !important;
        flex-direction:column;
        gap:8px;
        align-items:flex-end;
      }

      header.brand .titles .meta-inline{
        display:none !important;
      }
    }

    /* ANIMAÇÕES SUAVES */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .sheet > * {
      animation: fadeIn 0.6s ease-out;
    }

    /* MELHORIAS DE ACESSIBILIDADE */
    .sr-only {
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      border:0;
    }

    /* FOCO VISÍVEL MELHORADO */
    *:focus {
      outline:3px solid rgba(0, 0, 0, 0.3);
      outline-offset:2px;
      border-radius:4px;
    }

    /* CONTRASTE MELHORADO PARA TEXTO */
    .muted {
      color: #5a5a5a !important;
    }
    
  </style>
</head>
<body>
  <div class="wrap">
    <div class="sheet" role="document" aria-labelledby="prod">
      <header class="brand">
        <div class="bottle-box">
        </div>
        <div class="titles">
          <h1 id="prod">Dom Vicente<br>1º Acto</h1>
          <div class="lines">
            <span class="line region">D.O.C. Dão</span><br>
            <span class="line type-line">
              <span data-i18n-val="type_value">Vinho Branco Seco</span>
              <span class="meta-inline"><span class="badge caps">----</span><span class="badge">750ml</span></span>
            </span>
          </div>
          <div class="lang-switch" role="tablist" aria-label="Selecionar idioma do rótulo">
            <button type="button" role="tab" aria-selected="true" aria-pressed="true" data-lang="pt" aria-controls="panel-pt" id="tab-pt">PT</button>
            <button type="button" role="tab" aria-selected="false" aria-pressed="false" data-lang="es" aria-controls="panel-es" id="tab-es">ES</button>
            <button type="button" role="tab" aria-selected="false" aria-pressed="false" data-lang="fr" aria-controls="panel-fr" id="tab-fr">FR</button>
            <button type="button" role="tab" aria-selected="false" aria-pressed="false" data-lang="en" aria-controls="panel-en" id="tab-en">EN</button>
            <button type="button" role="tab" aria-selected="false" aria-pressed="false" data-lang="de" aria-controls="panel-de" id="tab-de">DE</button>
          </div>
        </div>
        <div class="meta">
          <span class="badge caps">----</span>
          <span class="badge">750&nbsp;ml</span>
        </div>
      </header>

      <div class="layout">
        <!-- COLUNA ESQ: Nutricional + Ingredientes -->
        <section class="panel" aria-labelledby="nutri-title">
          <div class="nutri-header">
            <div class="title caps"><span data-i18n="nutri_title">Declaração Nutricional</span></div>
            <div class="per"><span data-i18n="per_100ml">por 100&nbsp;ml</span></div>
          </div>

          <div class="energy" aria-label="Energia por 100 ml">
            <div class="big" aria-label="Energia em kJ">
              <div class="kj">299&nbsp;kJ</div>
              <div class="label" data-i18n="energy">Energia</div>
            </div>
            <div class="big" aria-label="Energia em kcal">
              <div class="kcal">72&nbsp;kcal</div>
              <div class="label" data-i18n="energy">Energia</div>
            </div>
          </div>

          <table aria-label="Valores nutricionais por 100 ml">
            <tbody>
              <tr><th data-i18n="fat">Gordura</th><td>0 g</td></tr>
              <tr><th>  • <span data-i18n="saturates">Saturada</span></th><td>0 g</td></tr>
              <tr><th data-i18n="carbs">Hidratos de Carbono</th><td>0,25 g</td></tr>
              <tr><th>  • <span data-i18n="sugars_of_which">dos quais Açúcar</span></th><td>0,25 g</td></tr>
              <tr><th data-i18n="protein">Proteína</th><td>0 g</td></tr>
              <tr><th data-i18n="salt">Sal</th><td>0 g</td></tr>
            </tbody>
          </table>

          <div class="ingredients" aria-labelledby="ing-title">
            <h2 id="ing-title" class="caps"><span data-i18n="ingredients_title">Ingredientes</span></h2>
            <p data-i18n-ingredients>
              Uvas tintas,<br>
              regulador de acidez: ácido L(+)-tartárico,<br>
              agentes estabilizadores: goma arábica, poliaspartato de potássio,<br>
              conservante: <strong>sulfitos</strong>, sorbato de potássio,<br> 
            </p>
          </div>
        </section>

        <!-- COLUNA DIR: Informação adicional -->
        <aside class="panel info" aria-labelledby="info-title">
          <h2 id="info-title" class="caps"><span data-i18n="additional_info">Informação Adicional</span></h2>
          <table>
            <tbody>
              <tr><th data-i18n="type">Tipo</th><td><span data-i18n-val="type_value">Vinho Branco</span></td></tr>
              <tr><th data-i18n="region">Região</th><td>Dão</td></tr>
              <tr><th data-i18n="vintage">Colheita</th><td>----</td></tr>
              <tr><th data-i18n="varieties">Castas</th><td>Malvasia-Fina, Encruzado</td></tr>
              <tr><th data-i18n="alcohol">Álcool</th><td>12,5&nbsp;% vol.</td></tr>
              <tr><th data-i18n="capacity">Capacidade</th><td>750&nbsp;ml</td></tr>
              <tr><th data-i18n="brand">Marca</th><td>Dom Vicente</td></tr>
              <tr><th data-i18n="produced_by">Produzido e engarrafado por</th><td>Artemis- Projetos e Desenvolvimento Agrário Lda</td></tr>
              <tr><th data-i18n="address">Morada</th><td>Avenida 234 nº 211, 3430-168 Fiais da Telha- Carregal do Sal</td></tr>
              <tr><th data-i18n="country_of_origin">País de Origem</th><td>Portugal</td></tr>
            </tbody>
          </table>
          <p class="foot">Dom Vicente<br>1º Acto<br>D.O.C. Dão<br>----</p>
          <p class="foot">by <a href="https://selfquestion.pt" target="_blank" rel="noopener noreferrer" style="color: #000; text-decoration: none; font-weight: 600;">SelfQuestion</a></p>
        </aside>
      </div>

      <footer class="muted">
        <p data-i18n="footer_text">e-Label digital sem cookies e sem rastreamento. Esta página é informativa e cumpre o Regulamento (UE) n.º 1169/2011 e o Regulamento (UE) 2021/2117.</p>
      </footer>
    </div>
  </div>

  <script>
    (function(){
      // Dicionários i18n (labels) - apenas atualizados os valores de tipo
      const I18N = {
        pt: {
          nutri_title:'Declaração Nutricional',
          per_100ml:'por 100 ml',
          energy:'Energia',
          fat:'Lípidos',
          saturates:'dos quais Saturados',
          carbs:'Hidratos de Carbono',
          sugars_of_which:'dos quais Açúcar',
          protein:'Proteína',
          salt:'Sal',
          ingredients_title:'Ingredientes',
          additional_info:'Informação Adicional',
          type:'Tipo',
          type_value:'Vinho Branco',
          region:'Região',
          vintage:'Colheita',
          varieties:'Castas',
          alcohol:'Álcool',
          capacity:'Capacidade',
          brand:'Marca',
          produced_by:'Produzido e engarrafado por',
          address:'Morada',
          country_of_origin:'País de Origem',
          footer_text:'e-Label digital sem cookies e sem rastreamento. Esta página é informativa e cumpre o Regulamento (UE) n.º 1169/2011 e o Regulamento (UE) 2021/2117.'
        },
        es: {
          nutri_title:'Declaración nutricional',
          per_100ml:'por 100 ml',
          energy:'Energía',
          fat:'Grasas',
          saturates:'de las cuales saturadas',
          carbs:'Hidratos de carbono',
          sugars_of_which:'de los cuales azúcares',
          protein:'Proteínas',
          salt:'Sal',
          ingredients_title:'Ingredientes',
          additional_info:'Información adicional',
          type:'Tipo',
          type_value:'Vino Blanco',
          region:'Región',
          vintage:'Cosecha',
          varieties:'Variedades',
          alcohol:'Alcohol',
          capacity:'Capacidad',
          brand:'Marca',
          produced_by:'Elaborado y embotellado por',
          address:'Dirección',
          country_of_origin:'País de origen',
          footer_text:'Etiqueta digital sin cookies ni rastreo. Esta página es informativa y cumple con el Reglamento (UE) n.º 1169/2011 y el Reglamento (UE) 2021/2117.'
        },
        fr: {
          nutri_title:'Déclaration nutritionnelle',
          per_100ml:'pour 100 ml',
          energy:'Énergie',
          fat:'Matières grasses',
          saturates:'dont acides gras saturés',
          carbs:'Glucides',
          sugars_of_which:'dont sucres',
          protein:'Protéines',
          salt:'Sel',
          ingredients_title:'Ingrédients',
          additional_info:'Informations complémentaires',
          type:'Type',
          type_value:'Vin Blanc',
          region:'Région',
          vintage:'Millésime',
          varieties:'Cépages',
          alcohol:'Alcool',
          capacity:'Contenance',
          brand:'Marque',
          produced_by:'Mis en bouteille par',
          address:'Adresse',
          country_of_origin:"Pays d'origine",
          footer_text:'Étiquette numérique sans cookies ni traçage. Cette page est informative et conforme au Règlement (UE) n° 1169/2011 et au Règlement (UE) 2021/2117.'
        },
        en: {
          nutri_title:'Nutrition information',
          per_100ml:'per 100 ml',
          energy:'Energy',
          fat:'Fat',
          saturates:'of which saturates',
          carbs:'Carbohydrate',
          sugars_of_which:'of which sugars',
          protein:'Protein',
          salt:'Salt',
          ingredients_title:'Ingredients',
          additional_info:'Additional information',
          type:'Type',
          type_value:'White Wine',
          region:'Region',
          vintage:'Vintage',
          varieties:'Grape varieties',
          alcohol:'Alcohol',
          capacity:'Capacity',
          brand:'Brand',
          produced_by:'Produced and bottled by',
          address:'Address',
          country_of_origin:'Country of origin',
          footer_text:'Digital e-label with no cookies or tracking. This page is informational and complies with Regulation (EU) No 1169/2011 and Regulation (EU) 2021/2117.'
        },
        de: {
          nutri_title:'Nährwertdeklaration',
          per_100ml:'pro 100 ml',
          energy:'Energie',
          fat:'Fett',
          saturates:'davon gesättigte Fettsäuren',
          carbs:'Kohlenhydrate',
          sugars_of_which:'davon Zucker',
          protein:'Eiweiß',
          salt:'Salz',
          ingredients_title:'Zutaten',
          additional_info:'Zusätzliche Angaben',
          type:'Typ',
          type_value:'Weißwein',
          region:'Region',
          vintage:'Jahrgang',
          varieties:'Rebsorten',
          alcohol:'Alkohol',
          capacity:'Füllmenge',
          brand:'Marke',
          produced_by:'Hergestellt und abgefüllt von',
          address:'Anschrift',
          country_of_origin:'Ursprungsland',
          footer_text:'Digitale e-Label ohne Cookies und Tracking. Diese Seite ist informativ und entspricht der Verordnung (EU) Nr. 1169/2011 und der Verordnung (EU) 2021/2117.'
        }
      };

      // Ingredientes (texto por língua) - ajustados ao novo produto
      const ING = {
  pt: "Uvas,<br>conservante: <strong>sulfitos</strong>, <br> antioxidante: azoto<br><strong>Engarrafado em atmosfera protetora</strong>",

  es: "Uvas,<br>conservante: <strong>sulfitos</strong>, <br>antioxidante: nitrógeno<br><strong>Embotellado en atmósfera protectora</strong>",

  fr: "Raisins,<br>conservateur : <strong>sulfites</strong>, <br>antioxydant : azote<br><strong>Mis en bouteille sous atmosphère protectrice</strong>",

  en: "Grapes,<br>preservative: <strong>sulphites</strong>, <br>antioxidant: nitrogen<br><strong>Bottled in a protective atmosphere</strong>",

  de: "Trauben,<br>Konservierungsstoff: <strong>Sulfite</strong>, <br>Antioxidationsmittel: Stickstoff<br><strong>Unter Schutzatmosphäre abgefüllt</strong>"
};


      // Painéis (se existirem)
      const tabs = document.querySelectorAll('.lang-switch button');
      const panels = {
        pt: document.getElementById('panel-pt'),
        es: document.getElementById('panel-es'),
        fr: document.getElementById('panel-fr'),
        en: document.getElementById('panel-en'),
        de: document.getElementById('panel-de')
      };

      function applyI18N(lang){
        const dict = I18N[lang] || I18N.pt;
        document.querySelectorAll('[data-i18n]').forEach(el=>{
          const key = el.getAttribute('data-i18n');
          if(dict[key]!==undefined){ el.textContent = dict[key]; }
        });
        document.querySelectorAll('[data-i18n-val]').forEach(el=>{
          const key = el.getAttribute('data-i18n-val');
          if(dict[key]!==undefined){ el.textContent = dict[key]; }
        });
        const ing = document.querySelector('[data-i18n-ingredients]');
        if(ing && ING[lang]){ ing.innerHTML = ING[lang]; }
        const footer = document.querySelector('[data-i18n="footer_text"]');
        if(footer && dict.footer_text){ footer.textContent = dict.footer_text; }
      }

      function show(lang){
        // Comuta painéis (se existirem)
        Object.entries(panels).forEach(([k,el])=>{ if(el) el.hidden = (k!==lang); });
        // Estado dos botões
        tabs.forEach(b=>{ const on=b.dataset.lang===lang; b.setAttribute('aria-selected', on); b.setAttribute('aria-pressed', on); });
        // Lang raiz
        document.documentElement.lang = lang;
        // Aplica traduções
        applyI18N(lang);
      }

      // Inicializa em PT
      show('pt');

      // Clicks e teclas
      tabs.forEach(btn=>btn.addEventListener('click',()=>show(btn.dataset.lang)));
      const switcher = document.querySelector('.lang-switch');
      if(switcher){
        switcher.addEventListener('keydown', (e)=>{
          const order=['pt','es','fr','en','de'];
          const current = document.documentElement.lang;
          const i = Math.max(0, order.indexOf(current));
          if(e.key==='ArrowRight' || e.key==='ArrowDown'){
            e.preventDefault();
            const next=order[(i+1)%order.length];
            document.getElementById('tab-'+next).click();
          }
          if(e.key==='ArrowLeft' || e.key==='ArrowUp'){
            e.preventDefault();
            const prev=order[(i+order.length-1)%order.length];
            document.getElementById('tab-'+prev).click();
          }
        });
      }
    })();
  </script>
</body>
</html>
