/* Fase 3c: onder de kaart van aanmelden en registreren ("Terug naar de
   website", "Pakketten bekijken"), het gekozen pakket op die kaart, en de
   openbare pakkettenpagina. Op de tokens van de skin, met het gewicht van de
   skin (:is(#hsk,.hsk)), dus ook in de donkere modus. */

/* onder de kaart: dezelfde breedte als de kaart; eerst de link, dan de knop */
:is(#hsk,.hsk) .hsb-auth-more{width:min(400px,100%);display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0}
/* H15: navigatie in inkt met een zachte onderlijn, koraal onder de muis (koraal staat hier enkel op de verzendknop, H24) */
:is(#hsk,.hsk) .hsb-auth-site{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;padding:6px 8px;border-radius:6px}
:is(#hsk,.hsk) .hsb-auth-site span{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
:is(#hsk,.hsk) .hsb-auth-site:hover{color:var(--acc-t)}
:is(#hsk,.hsk) .hsb-auth-site:hover span{text-decoration-color:currentColor}
:is(#hsk,.hsk) .hsb-auth-site:focus-visible{outline:2px solid var(--acc-t);outline-offset:2px}
:is(#hsk,.hsk) .hsb-auth-site .hsk-i{width:16px;height:16px}
:is(#hsk,.hsk) .hsb-auth-packs{height:44px;font-size:15px;background:var(--surface)}
:is(#hsk,.hsk) .hsb-pick-note{margin:0 0 10px}

/* de openbare pakkettenpagina: breder dan een aanmeldkaart */
:is(#hsk,.hsk).hsb-pub-page{justify-content:flex-start;padding-top:32px}
/* H24: dezelfde kopbalk als bij aanmelden (het logo links, NL/EN rechts), zo breed als de pagina */
:is(#hsk,.hsk).hsb-pub-page>.hsk-auth-top{width:min(1040px,100%)}
:is(#hsk,.hsk) .hsb-pub{width:min(1040px,100%);display:flex;flex-direction:column;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);padding:32px 28px}
:is(#hsk,.hsk) .hsb-pub-head{display:flex;flex-direction:column;gap:8px}
:is(#hsk,.hsk) .hsb-pub-head .hsk-p{margin:0;max-width:720px;color:var(--text-2)}
:is(#hsk,.hsk) .hsb-pub-head .hsb-testmode{align-self:flex-start;margin:4px 0 0}
:is(#hsk,.hsk) .hsb-pub-packs{list-style:none;margin:0;padding:0}
:is(#hsk,.hsk) .hsb-pub-packs .hsb-pack{cursor:default;box-shadow:none}
/* H10: koraal is enkel de knop "Kiezen" van het populaire pakket (de hoofdactie); de kaart zelf de lange zachte schaduw (H8), "Populair" de inktpil */
:is(#hsk,.hsk) .hsb-pub-packs .hsb-pack.is-popular{border-color:var(--line-3);box-shadow:var(--shadow-l)}
:is(#hsk,.hsk) .hsb-pub-packs .hsb-pack-name{margin:0;font-size:17px;line-height:1.3}
:is(#hsk,.hsk) .hsb-pub-choose{margin-top:auto;height:44px;font-size:15px;width:100%;justify-content:center}
:is(#hsk,.hsk) .hsb-pub-login{margin:0}
:is(#hsk,.hsk) .hsb-pub-more,
:is(#hsk,.hsk).hsb-pub-page .hsk-auth-foot{width:min(1040px,100%)}

@media (max-width: 520px){
  :is(#hsk,.hsk) .hsb-pub{padding:22px 16px;border-radius:14px}
}