#gift-modal {
  --brand: var(--brand-primary, #d10019);
  --erro: var(--alert-danger-80, #cf222e);
  --brand-hover: #b20015;
  --creme: #fffcef;
  --amarelo: #f8dc51;
  --amarelo-escuro: #deb626;
  --verde: #339933;
  --tinta: var(--neutral-90, #07090a);
  --texto: var(--foreground, #1a1e22);
  --escuro: var(--neutral-80, var(--base-neutral-80, #1a1e22));
  --cinza: var(--neutral-60, #64676b);
  --cinza-medio: var(--neutral-50, #97999c);
  --borda: #cacbcc;
  --borda-clara: var(--neutral-30, #e3e4e4);
  --caixa: var(--neutral-20, #f0f0f0);
  --branco: var(--neutral-10, #fcfcfc);
  --fonte: var(--font-system, -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);
  --serifa: Georgia, "Times New Roman", serif;

  /* Ícones dos campos de data e hora, em variáveis para não repetir os data URIs. */
  --ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.75 0C4.09518 0 4.375 0.279822 4.375 0.625L4.375 1.04167H11.4583V0.625C11.4583 0.279822 11.7382 0 12.0833 0C12.4285 0 12.7083 0.279822 12.7083 0.625V1.04167H15C15.4602 1.04167 15.8333 1.41476 15.8333 1.875V15.625C15.8333 16.0852 15.4602 16.4583 15 16.4583H0.833333C0.373096 16.4583 0 16.0852 0 15.625V1.875C0 1.41476 0.373096 1.04167 0.833333 1.04167H3.125L3.125 0.625C3.125 0.279822 3.40482 0 3.75 0ZM11.4583 2.29167V2.70833C11.4583 3.05351 11.7382 3.33333 12.0833 3.33333C12.4285 3.33333 12.7083 3.05351 12.7083 2.70833V2.29167H14.5833V4.16667L1.25 4.16667L1.25 2.29167H3.125L3.125 2.70833C3.125 3.05351 3.40482 3.33333 3.75 3.33333C4.09518 3.33333 4.375 3.05351 4.375 2.70833L4.375 2.29167H11.4583ZM1.25 5.41667V15.2083H14.5833V5.41667L1.25 5.41667Z' fill='%2397999C'/%3E%3C/svg%3E");
  --ico-relogio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M12.0777 12.5439C12.3322 12.7771 12.7276 12.7599 12.9608 12.5055C13.194 12.251 13.1769 11.8557 12.9224 11.6224L10.6251 9.51656L10.6251 4.99984C10.6251 4.65466 10.3453 4.37484 10.0001 4.37484C9.6549 4.37484 9.37507 4.65466 9.37507 4.99984L9.37507 9.7915C9.37507 9.96669 9.4486 10.1338 9.57775 10.2522L12.0777 12.5439Z' fill='%2397999C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3334 9.99984C18.3334 14.6022 14.6025 18.3332 10.0001 18.3332C5.39771 18.3332 1.66675 14.6022 1.66675 9.99984C1.66675 5.39746 5.39771 1.6665 10.0001 1.6665C14.6025 1.6665 18.3334 5.39746 18.3334 9.99984ZM17.0834 9.99984C17.0834 13.9119 13.9121 17.0832 10.0001 17.0832C6.08806 17.0832 2.91675 13.9119 2.91675 9.99984C2.91675 6.08782 6.08806 2.9165 10.0001 2.9165C13.9121 2.9165 17.0834 6.08782 17.0834 9.99984Z' fill='%2397999C'/%3E%3C/svg%3E");
  --ico-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.0911 5.42644C18.3765 5.694 18.3909 6.14226 18.1234 6.42766L10.5168 14.5414C10.3828 14.6842 10.1958 14.7652 10 14.7652C9.80421 14.7652 9.61715 14.6842 9.48325 14.5414L1.87664 6.42766C1.60908 6.14226 1.62354 5.694 1.90894 5.42644C2.19433 5.15888 2.64259 5.17334 2.91015 5.45874L10 13.0212L17.0899 5.45874C17.3574 5.17335 17.8057 5.15889 18.0911 5.42644Z' fill='%2397999C'/%3E%3C/svg%3E");
  --ico-seta-cima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg transform='rotate(180 10 10)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.0911 5.42644C18.3765 5.694 18.3909 6.14226 18.1234 6.42766L10.5168 14.5414C10.3828 14.6842 10.1958 14.7652 10 14.7652C9.80421 14.7652 9.61715 14.6842 9.48325 14.5414L1.87664 6.42766C1.60908 6.14226 1.62354 5.694 1.90894 5.42644C2.19433 5.15888 2.64259 5.17334 2.91015 5.45874L10 13.0212L17.0899 5.45874C17.3574 5.17335 17.8057 5.15889 18.0911 5.42644Z' fill='%2397999C'/%3E%3C/g%3E%3C/svg%3E");
  /* Visto da lista de benefícios do voucher. O clipPath do ficheiro original não
     vem: o traço já cabe todo no viewBox de 9×9, e um id repetido em cada
     bullet não traria nada. */
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.794562 3.92911C0.91687 3.82245 1.10249 3.83513 1.20915 3.95744L3.20742 6.24879L7.07953 1.40601C7.18088 1.27926 7.36578 1.25866 7.49253 1.36001C7.61928 1.46135 7.63988 1.64626 7.53853 1.77301L3.44671 6.89058C3.39232 6.95861 3.31056 6.999 3.22348 7.00086C3.13641 7.00272 3.053 6.96585 2.99575 6.90021L0.766236 4.3437C0.659573 4.22139 0.672255 4.03577 0.794562 3.92911Z' fill='%231A1E22'/%3E%3C/svg%3E");

  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, .45);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#offer-success-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, 0.45);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#offer-success-modal::-webkit-scrollbar {
    display: none;
}

#offer-success-modal[hidden]{
    display: none;
}

#offer-success-modal ul {
    list-style: none;
}

#offer-success-modal .modal-box, {
    position: relative;
    width: 100%;
    max-width: 740px;
    margin: 50px auto;
    background: #fff;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
}

#offer-success-modal .plus-message-modal-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
    background-color: var(--background, #fff);
}

#offer-success-modal .plus-message-modal-wrapper .header-wrapper {
    width: 100%;
    height: 157px;
    background-color: #FFFCEF;
    background-image: url("https://static.publico.pt/s3/assinaturas/piano/premium/image.png");
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 2px solid var(--subscriptions-main);
}

#offer-success-modal .plus-message-modal-wrapper .content-wrapper {
    width: 100%;
    padding: 1.88rem 1.88rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}

#offer-success-modal .user-plus h3.user-plus__title {
    color: var(--neutral-90, #07090A);
    text-align: center;
    font-family: var(--font-system);
    font-size: 1.3rem;
    font-weight: 590;
    line-height: normal;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 1.69rem;
}

#offer-success-modal .pn-state-line {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 16px;
}

#offer-success-modal .pn-state-line__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 32px;
    border: 1px solid #cacbcc;
}

#offer-success-modal .pn-state-line__item svg {
    fill: #cacbcc;
}

#offer-success-modal .pn-state-line__divider {
    width: 58px;
    height: 1px;
    border: none;
    background-color: #cacbcc;
}

#offer-success-modal .pn-state-line__item--active {
    border-color: #393;
}

#offer-success-modal .subscription-section__content__text__description {
    color: #000;
    font-family: var(--font-system);
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    margin: 12px 0 0;
}

#offer-success-modal .terms-privacy-wrapper {
    color: var(--neutral-60, #64676B);
    font-family: var(--font-system);
    font-size: 13px;
    font-weight: 400;
    line-height: 130%;
    cursor: pointer;
    margin-top: 32px;
}

#offer-success-modal .terms-privacy-wrapper a{
    color: inherit;
    text-decoration: none;
}

#offer-success-modal .btn-homepage,
#offer-success-modal .btn-subscription {
    box-sizing: border-box;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 178px;
    height: 40px;
    padding: 9px 24px 10px 24px;
    border-radius: 100px;
    text-align: center;
    font-family: var(--font-system);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

#offer-success-modal .btn-homepage {
    border: 1px solid var(--neutral-80, #1A1E22);
    color: var(--neutral-80, #1A1E22);
}

/* «Imprimir Voucher» apagado enquanto o BO ainda não tem o voucher (ver subscription-gift-voucher.js) */
#offer-success-modal .btn-homepage:disabled,
#offer-success-modal .btn-homepage[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Linha por baixo dos botões quando um clique no «Imprimir Voucher» não encontra o voucher
   no BO (criada pelo subscription-gift-voucher.js; [hidden] quando não há nada a dizer) */
#offer-success-modal .gift-voucher-status {
    margin: 12px 0 0;
    font-family: var(--font-system);
    font-size: 13px;
    line-height: 20px;
    color: var(--neutral-80, #1A1E22);
    text-align: center;
}
#offer-success-modal .gift-voucher-status[hidden] { display: none; }

#offer-success-modal button.btn-homepage {
    background: transparent;
}

#offer-success-modal .btn-subscription {
    color: var(--neutral-10, #FCFCFC);
    background: var(--brand-primary, #D10019);
}

  #offer-success-modal .modal-box{
    position: relative;
    width: 100%;
    max-width: 740px;
    margin: 50px auto;
    background: #fff;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
}

@media screen and (max-width: 734px) {
    #offer-success-modal .subscription-section {
        display: block;
    }

    #offer-success-modal .plus-message-modal-wrapper .header-wrapper {
        height: 58px;
        background-image: url("https://static.publico.pt/s3/assinaturas/piano/premium/mobile_upgrade.png");
    }

    #offer-success-modal .plus-message-modal-wrapper .content-wrapper {
        padding: 32px 16px 20px;
    }

    /* Um botão por linha, os dois à largura toda e com 16px entre eles. O espaço é `gap`
       do contentor e não margin nos filhos: assim não depende de quem é o último nem de
       o branco ser <button> e o vermelho <a>. Selectores com a classe do botão para
       ganharem a qualquer CSS da página que estile só os <a>. */
    #offer-success-modal .subscription-section__buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        margin-top: 24px;
    }

    #offer-success-modal .subscription-section__buttons .btn-homepage,
    #offer-success-modal .subscription-section__buttons .btn-subscription,
    #offer-success-modal .subscription-section__buttons a,
    #offer-success-modal .subscription-section__buttons button {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: 40px;
        margin: 0;
    }
}

@media screen and (min-width: 735px) {
    #offer-success-modal .subscription-section__buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 48px;
    }
}

#gift-modal::-webkit-scrollbar { display: none; }
#gift-modal[hidden] { display: none; }
/* Os passos e os blocos do formulário escondem-se com o atributo hidden. */
#gift-modal [hidden] { display: none !important; }

/* Nota: com list-style:none o VoiceOver deixa de anunciar a lista.
   Convém pôr role="list" no <ul> do markup. */
#gift-modal ul { list-style: none; }
#gift-modal .modal__header .collection { height: auto; }
/* Com a gift box o valor passa de «72€» para «72€ + gift box 9,99€». A caixa do
   template está dimensionada para o texto curto e parte a linha a meio: aqui
   cresce com o conteúdo e o texto não se quebra. O min-width: 0 nos pais anula
   o min-width: auto dos flex items, senão é a fila que transborda. */
#gift-modal .modal__header .item-selected-value.item-price {
  width: auto;
  max-width: none;
  white-space: nowrap;
}
#gift-modal .modal__header .info-wrapper,
#gift-modal .modal__header .item,
#gift-modal .modal__header .item-content { min-width: 0; }
#gift-modal .modal__content { padding-bottom: 1rem; }
/* Cabeçalho amarelo: o padding de cima e dos lados vem do template (.top-section:
   2rem 2.25rem em desktop, .6rem 1rem em mobile); só o de baixo fica a 0.
   A imagem muda com a entrega (data-gift-image) e as três ilustrações têm
   proporções diferentes: caixa fixa de 110×110 com object-fit, para o cabeçalho
   não andar aos saltos ao trocar de opção. Em mobile (primeira collection)
   mantêm-se os 40px do template. */
#gift-modal .modal__header { padding-bottom: 0; }
#gift-modal .modal__header img {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: contain;
  object-position: center;
}
#gift-modal .modal__header .collection:first-child img {
  width: 40px;
  height: 40px;
}

#gift-modal .modal-box {
  position: relative;
  width: 100%;
  max-width: 740px;
  margin: 50px auto;
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  overflow: hidden;
}

/* ——— Bloco plus / upgrade ——— */

#gift-modal .plus-message-modal-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  background-color: var(--background, #fff);
}

#gift-modal .plus-message-modal-wrapper .header-wrapper {
  width: 100%;
  height: 157px;
  background-color: var(--creme);
  background-image: url("https://static.publico.pt/s3/assinaturas/piano/premium/image.png");
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* var() sem fallback torna a declaração inválida em computed-value time e a
     borda desaparece por completo se --subscriptions-main não estiver definida. */
  border-top: 2px solid var(--subscriptions-main, var(--brand));
}

#gift-modal .plus-message-modal-wrapper .content-wrapper {
  width: 100%;
  padding: 1.88rem 1.88rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
}

#gift-modal .user-plus h3.user-plus__title {
  color: var(--tinta);
  text-align: center;
  font-family: var(--fonte);
  font-size: 1.3rem;
  font-weight: 590;
  line-height: normal;
  letter-spacing: 0;
  text-transform: uppercase;
  margin-bottom: 1.69rem;
}

#gift-modal .subscription-section__content__text__description {
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin: 12px 0 0;
}

#gift-modal .terms-privacy-wrapper {
  color: var(--cinza);
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 400;
  line-height: 130%;
  margin-top: 32px;
}

#gift-modal .terms-privacy-wrapper a { color: inherit; text-decoration: underline; }

#gift-modal .btn-homepage,
#gift-modal .btn-subscription {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 178px;
  height: 40px;
  padding: 9px 24px 10px 24px;
  border-radius: 100px;
  text-align: center;
  font-family: var(--fonte);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

#gift-modal .btn-homepage { border: 1px solid var(--escuro); color: var(--escuro); }
#gift-modal .btn-subscription { color: var(--branco); background: var(--brand); }

/* ============================================================
   Fluxo do presente — passo 1 (cartões), passo 2 (formulário),
   passo 3 (pré-visualização)
   ============================================================ */

/* Border-box em toda a árvore do presente. O resto da modal fica em content-box,
   como estava. Sem isto os inputs a width:100% com padding transbordam e o CTA
   mede 45px + 16px de padding = 61px de altura. */
#gift-modal .gift-step,
#gift-modal .gift-step *,
#gift-modal .gift-step *::before,
#gift-modal .gift-step *::after { box-sizing: border-box; }

/* ——— Títulos, comuns aos três passos ——— */
#gift-modal .gift-title,
#gift-modal .gift-delivery__title { margin: .5rem 0 0; text-align: center; font-family: var(--fonte); font-size: 1.25rem; font-weight: 590; line-height: 135%; letter-spacing: normal; text-transform: none; color: var(--tinta); }
#gift-modal .gift-title:focus { outline: none; }   /* recebe foco por script na troca de passo */
#gift-modal .gift-sub,
#gift-modal .gift-delivery__info { margin: .75rem auto 2.5rem; text-align: center; font-family: var(--fonte); font-size: .875rem; font-weight: 400; line-height: 125%; color: var(--cinza); max-width:33.4375rem; }

/* ——— Passo 1: os três cartões ——— Mesma base (flex: 1 1 0) e altura igual pelo stretch. */
#gift-modal .gift-options { display: flex; align-items: stretch; justify-content: center; gap: .94rem; }
/* 13.44rem = os 215px do Figma. É um tecto, não uma largura fixa: em ecrãs mais
   estreitos os cartões encolhem por igual. Com dois cartões (o «casa» está
   hidden) ficam centrados pelo justify-content do .gift-options.
   min-width: 0 anula o min-width:auto dos flex items — sem ele os cartões não
   encolhem abaixo do texto e a fila transborda na horizontal. */
#gift-modal .gift-option { position: relative; flex: 1 1 0; min-width: 0; max-width: 13.44rem; display: flex; flex-direction: column; margin: 0; padding: 1rem 1rem 2rem; border: 1px solid var(--borda-clara); border-radius: .875rem; background: #fff; font-family: var(--fonte); font-weight: 400; cursor: pointer; }
#gift-modal .gift-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
/* O radio está escondido, por isso o cartão tem de mostrar o foco do teclado ele
   próprio — senão quem navega por tab (ou pelas setas, dentro do grupo) não sabe
   onde está. */
#gift-modal .gift-option:has(:focus-visible) { outline: 2px solid var(--escuro); outline-offset: 2px; }
#gift-modal .gift-option:hover { border-color: var(--borda); }
#gift-modal .gift-option.selected { border-color: var(--amarelo); background: var(--creme); }

/* Radio no canto superior direito: dois SVGs, um por estado. */
#gift-modal .gift-option-radio { position: absolute; top: 1rem; right: 1rem; line-height: 0; }
#gift-modal .gift-option-radio svg { display: block; }
#gift-modal .gift-option .gift-radio-on { display: none; }
#gift-modal .gift-option.selected .gift-radio-on { display: block; }
#gift-modal .gift-option.selected .gift-radio-off { display: none; }

#gift-modal .gift-option-icon { display: block; margin: 0 0 .38rem; }
#gift-modal .gift-option-icon svg { display: block; }
#gift-modal .gift-option-title { margin: 0 0 .25rem; font-family: var(--fonte); font-size: .875rem; font-weight: 590; line-height: 125%; color: var(--escuro); }
/* A descrição estica para empurrar a label para o fundo: com os cartões da mesma
   altura, as três labels ficam na mesma linha (a folga mínima é os .75rem). */
#gift-modal .gift-option-desc { flex: 1 1 auto; margin: 0 0 .75rem; font-family: var(--fonte); font-size: .75rem; font-weight: 400; line-height: 115%; color: var(--cinza); }
/* A nota de preço não reage à selecção: a cor diz só se a opção custa mais ou não.
   O amarelo assinala a boa notícia («Sem custos adicionais»); o valor a mais
   anuncia-se em preto, sem o destaque.
   Vem do data-extra do cartão, que já era a única fonte do preço: uma opção paga
   nova entra em preto sozinha, sem tocar aqui. */
#gift-modal .gift-option-note { font-family: var(--fonte); font-size: .75rem; font-weight: 590; line-height: 115%; color: var(--escuro); }
#gift-modal .gift-option[data-extra="0"] .gift-option-note { color: var(--amarelo-escuro); }

/* ——— CTA do passo 1 ——— */
#gift-modal .gift-delivery-form__submit { padding: 4rem 0 1.125rem; }
#gift-modal .gift-delivery-form__button { display: flex; justify-content: center; align-items: center; min-width: 245px; min-height: 45px; margin: 0 auto; padding: .5rem 1.5rem; border: 0; border-radius: 6.25rem; background: var(--brand); color: var(--branco); text-align: center; font-family: var(--fonte); font-size: .875rem; font-weight: 600; line-height: 170%; cursor: pointer; -webkit-appearance: none; appearance: none; }
#gift-modal .gift-delivery-form__button:hover { background: var(--brand-hover); }

/* ——— Passo 2: campos ——— */
#gift-modal [data-step="2"] .gift-sub { margin-bottom: 0; }
#gift-modal .gift-form { margin-top: 2.5rem; text-align: left; }

/* 1.5rem em cima separa a label do campo anterior; .25rem em baixo separa-a do
   seu próprio input. */
#gift-modal .gift-form label:not(.radio) { display: block; margin: 1.5rem 0 .25rem; font-family: var(--fonte); font-size: .875rem; font-style: normal; font-weight: 600; line-height: 125%; color: var(--texto); }
#gift-modal .gift-form > div:first-child label:first-child { margin-top: 0; }
#gift-modal .gift-label-extra { font-family: var(--fonte); font-size: .875rem; font-style: normal; font-weight: 400; line-height: 125%; color: var(--escuro); }
#gift-modal .field-help { margin: .25rem 0 .87rem; font-family: var(--fonte); font-size: .75rem; font-style: normal; font-weight: 400; line-height: 135%; color: var(--cinza); }

/* Os .25rem laterais são padding, não margin: dentro de um input é o padding que
   afasta o texto da borda. */
#gift-modal .gift-form input:not([type="radio"]):not([type="submit"]),
#gift-modal .gift-form select,
#gift-modal .gift-form textarea {
  width: 100%;
  padding: .5rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--cinza-medio);
  border-radius: 0;
  background: none;
  font-family: var(--fonte);
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  color: var(--texto);
  -webkit-appearance: none;
  appearance: none;
}
#gift-modal .gift-form textarea { resize: vertical; }
#gift-modal .gift-form ::placeholder { font-family: var(--fonte); font-size: 1rem; font-weight: 400; line-height: 135%; color: var(--cinza-medio); opacity: 1; }
#gift-modal .gift-form input:disabled { color: var(--cinza-medio); -webkit-text-fill-color: var(--cinza-medio); opacity: 1; }
#gift-modal .gift-form select:disabled { color: var(--cinza-medio); cursor: not-allowed; opacity: 1; }
/* A linha fica sempre a 1px, também no foco. */
#gift-modal .gift-form input:focus,
#gift-modal .gift-form select:focus,
#gift-modal .gift-form textarea:focus { outline: none; }

/* Estado de erro (email, telefone, código postal): o JS põe .error na label, no input e
   na mensagem .field-error que vem logo a seguir (.just-validate-error-field fica por
   compatibilidade). */
#gift-modal .gift-form label.error { color: var(--erro); }
#gift-modal .gift-form input:not([type="submit"]).error,
#gift-modal .gift-form input:not([type="submit"]).just-validate-error-field { border-bottom: 1px solid var(--erro); }
#gift-modal .field-error { display: none; min-height: 16px; margin: 4px 0 -20px; color: var(--erro) !important; font-family: var(--font-system); font-size: 12px; font-weight: 400; line-height: 1.4; }
#gift-modal .gift-form .field-error.error,
#gift-modal .gift-form .just-validate-error-field + .field-error,
#gift-modal .gift-form .error + .field-error { display: block; }

#gift-modal .gift-form .row { display: flex; gap: 1.5rem; }
#gift-modal .gift-form .row > * { flex: 1 1 0; min-width: 0; }

/* ——— Passo 2: radios «agora / mais tarde» ———
   Radio nativo escondido, dois SVGs por estado — o mesmo padrão dos cartões. */
#gift-modal .radio-list { display: flex; flex-direction: column; gap: .5rem; margin: .25rem 0 0; }
#gift-modal .gift-form .radio { position: relative; display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--fonte); font-size: .875rem; font-style: normal; font-weight: 400; line-height: 125%; color: var(--texto); cursor: pointer; }
#gift-modal .radio input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#gift-modal .radio-mark { display: block; flex: 0 0 auto; line-height: 0; }
#gift-modal .radio-mark svg { display: block; }
#gift-modal .radio .radio-on { display: none; }
#gift-modal .radio input:checked ~ .radio-mark .radio-on { display: block; }
#gift-modal .radio input:checked ~ .radio-mark .radio-off { display: none; }
#gift-modal .radio:has(:focus-visible) { outline: 2px solid var(--escuro); outline-offset: 3px; border-radius: 2px; }

/* ——— Passo 2: data e hora ———
   Os ícones ficam recuados os mesmos .25rem do texto. */
#gift-modal .when-row { display: flex; gap: 1.5rem; margin-top: .25rem; }
#gift-modal .when-row > * { flex: 1 1 0; min-width: 0; }

/* A data é um input[type=date]: abre o calendário nativo, nunca uma lista.
   O indicador nativo fica invisível — os ícones visíveis são os nossos
   (calendário à esquerda, seta à direita, como no campo da hora). O calendário
   abre de duas formas: o JS chama showPicker() no clique e no Enter/espaço, e,
   como rede, o indicador nativo (invisível) fica em position: absolute a cobrir
   o campo inteiro — assim qualquer clique cai nele e abre o picker mesmo sem JS
   ou num browser sem showPicker(). Em absolute sai do fluxo interno do input,
   por isso não parte o campo como partia com width: 100%. */
#gift-modal #when-date {
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
  background-image: var(--ico-cal), var(--ico-seta);
  background-repeat: no-repeat;
  background-position: left .25rem center, right .25rem center;
  background-size: 16px 17px, 20px 20px;
  cursor: pointer;
}
#gift-modal #when-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
#gift-modal #when-date::-webkit-inner-spin-button,
#gift-modal #when-date::-webkit-clear-button { display: none; }
#gift-modal #when-date:disabled { cursor: not-allowed; }

#gift-modal #when-time {
  padding-left: 2rem;
  padding-right: 2rem;
  background-image: var(--ico-relogio), var(--ico-seta);
  background-repeat: no-repeat;
  background-position: left .25rem center, right .25rem center;
  background-size: 20px 20px, 20px 20px;
}
/* Seta para cima com o select aberto. As duas regras têm de ficar separadas: num
   browser sem :open, a lista inteira seria inválida e a classe também morria. */
#gift-modal #when-time.is-open { background-image: var(--ico-relogio), var(--ico-seta-cima); }
#gift-modal #when-time:open { background-image: var(--ico-relogio), var(--ico-seta-cima); }

/* ——— Acções (passos 2 e 3) ——— */
#gift-modal .gift-actions { display: flex; justify-content: center; align-items: center; gap: .75rem; margin: 2.5rem 0 1.75rem; }
#gift-modal .gift-actions button { display: inline-flex; justify-content: center; align-items: center; gap: .375rem; border-radius: 6.25rem; text-align: center; font-family: var(--fonte); font-size: .875rem; font-style: normal; font-weight: 600; line-height: 170%; cursor: pointer; -webkit-appearance: none; appearance: none; }

#gift-modal .action-primary { min-width: 245px; min-height: 45px; padding: .5rem 1.5rem; border: 0; background: var(--brand); color: var(--branco); }
#gift-modal .action-primary:hover:not(:disabled) { background: var(--brand-hover); }
#gift-modal .action-primary:disabled { background: var(--caixa); color: var(--cinza-medio); opacity: 1; cursor: default; }

#gift-modal .action-secondary { width: 13.125rem; min-height: 45px; padding: .5rem 1.5rem .5rem 1rem; border: 1px solid var(--escuro); background: none; color: var(--escuro); }
#gift-modal .action-secondary svg { display: block; }
#gift-modal .action-secondary:hover:not(:disabled) { background: var(--caixa); }
#gift-modal .action-secondary:disabled { border-color: var(--cinza-medio); color: var(--cinza-medio); background: none; cursor: default; }

#gift-modal .gift-footer {text-align: center; font-family: var(--fonte); font-size: .75rem; font-style: normal; font-weight: 400; line-height: 115%; color: var(--cinza); }
#gift-modal .gift-footer a { color: inherit; text-decoration: none; }

/* ——— Passo 3: pré-visualização do email / voucher ——— */
#gift-modal .gift-preview { display: flex; justify-content: center; margin-top: 2.5rem; }
#gift-modal .pv { width: 100%; max-width: 25rem; margin-bottom: .98rem; box-shadow: .656px .656px 9.843px 0 rgba(0, 0, 0, .15); font-family: var(--fonte); text-align: center; color: var(--texto); }
#gift-modal .pv--email { padding: .98rem 1.48rem 1.39rem; }
/* O position/z-index do voucher cria contexto de empilhamento próprio, para o
   z-index: -1 da marca de água ficar preso dentro do cartão. Sem isto o -1
   subiria até ao contexto do .modal-box e desaparecia atrás do branco dele.

   As três variáveis são a geometria das colunas do voucher, partilhada pela
   .pv__box-cols, pela .pv__meta e pela .pv__benef — é o que mantém as três
   listas alinhadas na mesma grelha:
   --pv-inset = margem lateral da .pv__box (1.36rem) + o padding dela (1.3rem),
                ou seja o ponto onde começa o .pv__box-title;
   --pv-col   = largura da coluna dos passos, a mesma do max-width do .pv__steps;
   --pv-gap   = a goteira entre as duas colunas, logo a coluna 2 arranca sempre
                onde arranca o .pv__qr-col. */
#gift-modal .pv--voucher {
  max-width: 26rem;
  padding: 1.5rem;
  position: relative;
  z-index: 0;
  --pv-inset: 2.66rem;
  --pv-col: 8rem;
  --pv-gap: .75rem;
}

/* O P, o título e a data alinham à esquerda; o resto do cartão fica centrado. */
#gift-modal .pv__logo { display: block; margin: 0 0 .98rem; line-height: 0; }
#gift-modal .pv__rule { margin: .75rem 0; border: 0; border-top: 1px solid var(--borda-clara); }
#gift-modal .pv--voucher .pv__rule { margin: .75rem calc(var(--pv-inset)); border: 0; border-top: 1px solid var(--borda-clara); }
/* As duas linhas em volta do «Recebeu um presente PÚBLICO»: a de cima cinzenta,
   a de baixo preta, ambas a .656px. Vão por posição porque no markup as duas
   são <hr class="pv__rule">. */
#gift-modal .pv--email .pv__logo + .pv__rule { margin: 0; border: 0; border-bottom: .656px solid var(--borda-clara); }
#gift-modal .pv--email .pv__kicker + .pv__rule { margin: .33rem 0; border: 0; border-top: .656px solid var(--borda-clara); }
#gift-modal .pv__kicker { margin: 1.31rem 0; text-align: left; font-family: var(--fonte); font-size: 1.31238rem; font-style: normal; font-weight: 700; line-height: 130%; color: var(--escuro); }
#gift-modal .pv__date { margin: .33rem 0 0; text-align: left; font-size: .625rem; font-weight: 400; line-height: 150%; color: var(--cinza); }

#gift-modal .pv__art { display: block; width: 100%; max-width: 10rem; height: auto; margin: 1rem auto 1.31rem; }
#gift-modal .pv--voucher .pv__art  {margin: 0 auto }
#gift-modal .pv__claim { margin: 0 0 .41rem; text-align: center; font-family: var(--serifa); font-size: 1.31238rem; font-style: normal; font-weight: 400; line-height: 115%; color: var(--escuro); }
#gift-modal .pv__nomes,
#gift-modal .pv--email .pv__msg { text-align: center; font-family: var(--serifa); font-size: .73825rem; font-style: normal; font-weight: 400; line-height: 150%; color: var(--escuro); }
/* Os .53994rem do Figma dão 8,6px no ecrã, e a Publico é uma serifada de contraste
   alto: a essa altura os traços finos e as barras (o «t», o «B», o «L») caem abaixo
   do pixel e desaparecem no rasterizador — o texto sai partido, como se faltassem
   caracteres. Os .6875rem (11px) são o mínimo em que a Publico aguenta, e continuam
   abaixo dos .73825rem do .pv__nomes, por isso a hierarquia mantém-se.
   Se o voucher impresso precisar dos 8,6px, a medida é do PDF, não desta
   pré-visualização.
   A alternativa a seguir à Publico é a mesma pilha serifada do .pv--email. */
#gift-modal .pv--voucher .pv__msg { text-align: center; font-size: .6875rem; font-style: normal; font-weight: 400; line-height: 150%; color: var(--escuro); font-family: "Publico", var(--serifa) }

#gift-modal .pv__nomes { margin: 0; }
#gift-modal .pv__msg { margin: 0.5rem auto 0; max-width: 15rem }
/* As aspas vêm do CSS, por isso o textContent do script não as apaga. */
#gift-modal .pv--email .pv__msg::before { content: "\201C"; color: var(--brand-primary, #d10019); }
#gift-modal .pv--email .pv__msg::after { content: "\201D"; color: var(--brand-primary, #d10019); }

/* Referência para o posicionamento da marca de água. Sem z-index: com
   position: relative e z-index: auto o .pv__msg não cria contexto próprio, e é
   isso que deixa o ::before descer para trás do texto do .pv__nomes também. */
#gift-modal .pv--voucher .pv__msg { position: relative; }

/* Aspas de citação em SVG como marca de água: em position: absolute não ocupa
   espaço no fluxo (não abre linha entre os nomes e a mensagem) e o z-index: -1
   põe-na atrás do texto dos dois. Alinhada a left: 0 — o início do bloco dos
   nomes — e subida 2rem para ficar a cavalo. A cor #F0F0F0 é o --caixa, que num
   data URI não pode ir por var(). */
#gift-modal .pv--voucher .pv__msg::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 1rem;
  z-index: -1;
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' fill='none'%3E%3Cpath d='M12.6242 14.8915C15.2758 13.6664 18.2311 13.3117 21.1395 13.2505C21.7066 13.2385 22.1664 13.6999 22.1664 14.2671V15.294C22.1664 15.8612 21.7063 16.3193 21.1393 16.3323C18.4352 16.3944 15.9971 16.7269 13.9164 17.6883C12.7384 18.2325 11.641 18.9944 10.6657 20.0804C10.0727 20.8693 9.96265 21.7883 10.1618 22.3895C10.2713 22.7204 10.4594 22.9316 10.6995 23.051C10.9081 23.1549 11.2757 23.2475 11.8681 23.1493C12.1137 23.0915 12.3991 23.0105 12.7245 22.8985C13.6819 22.6703 14.4184 22.5943 15.0076 22.5943C17.0697 22.5943 18.8372 23.3547 20.3838 25.0277C21.8567 26.6246 22.5931 28.6018 22.5931 30.8831C22.5931 33.5447 21.7094 35.75 20.0892 37.3469C18.3953 39.0199 16.1859 39.8564 13.461 39.8564C10.5888 39.8564 8.30575 38.8678 6.61189 36.8906C4.91802 34.9895 4.10791 32.328 4.10791 28.982C4.10791 25.5498 4.85362 22.6675 6.34504 20.3352C6.39737 20.2534 6.45062 20.1722 6.5048 20.0917C7.13007 19.1627 7.87768 18.3239 8.74763 17.5753C8.86267 17.4735 8.97943 17.3737 9.09793 17.2759C10.1629 16.2629 11.3464 15.4819 12.6242 14.8915Z' fill='%23F0F0F0'/%3E%3Cpath d='M44.7595 15.294C44.7595 15.8612 44.2995 16.3193 43.7325 16.3323C41.9832 16.3724 40.3452 16.5258 38.8432 16.8893L36.3352 17.7706C35.2232 18.3087 34.1858 19.0481 33.2588 20.0804C32.6657 20.8693 32.5557 21.7883 32.7548 22.3895C32.8644 22.7204 33.0525 22.9316 33.2926 23.051C33.5012 23.1549 33.8688 23.2475 34.4612 23.1493C34.7067 23.0915 34.9922 23.0105 35.3176 22.8985C36.275 22.6703 37.0115 22.5943 37.6006 22.5943C39.6627 22.5943 41.4303 23.3547 42.9768 25.0277C44.4497 26.6246 45.1862 28.6018 45.1862 30.8831C45.1862 33.5447 44.3025 35.75 42.6822 37.3469C40.9884 39.0199 38.779 39.8564 36.0541 39.8564C33.1819 39.8564 30.8988 38.8678 29.205 36.8906C27.5111 34.9895 26.701 32.328 26.701 28.982C26.701 25.5838 27.432 22.7247 28.894 20.4047L28.9381 20.3352C29.5945 19.3087 30.3954 18.3888 31.3407 17.5753C31.4557 17.4735 31.5725 17.3737 31.691 17.2759C32.7559 16.2629 33.9394 15.4819 35.2173 14.8915C37.8689 13.6664 40.8242 13.3117 43.7326 13.2505C44.2997 13.2385 44.7595 13.6999 44.7595 14.2671V15.294Z' fill='%23F0F0F0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px;
}

/* A primeira das duas linhas curtas afasta-se 1.48rem da mensagem; a segunda
   fica com .48rem em cima e em baixo, como a base. */
#gift-modal .pv__rule--curto { width: 8rem; margin: .48rem auto; border: 0; border-top: 1px solid #000; }
#gift-modal .pv__msg + .pv__rule--curto { margin-top: 1.48rem; }

#gift-modal .pv__cod-label { margin: 0; text-align: center; font-family: var(--fonte); font-size: .65619rem; font-style: normal; font-weight: 400; line-height: 150%; color: var(--escuro); }
/* No voucher a etiqueta segue o tipo do .pv__box-title — é uma etiqueta dentro
   da caixa, não um bloco autónomo. */
#gift-modal .pv--voucher .pv__cod-label { color: var(--neutral-80, var(--base-neutral-80, #1a1e22)); font-family: var(--fonte); font-size: .4335rem; font-style: normal; font-weight: 700; line-height: 150%; padding-left: .22rem }
#gift-modal .pv__cod {font-family: var(--fonte); font-size: .54631rem; font-style: normal; font-weight: 700; line-height: 150%; letter-spacing: .05em; color: var(--escuro); text-align: left; padding-left: .22rem; }
#gift-modal .pv--email .pv__cod { text-align: center; }

#gift-modal .pv__box { margin: 2.3rem 1.36rem 1rem; padding: .65rem 1.3rem; background: var(--caixa); text-align: left; border-radius: 0.30344rem; border: 0.694px solid var(--neutral-20, #F0F0F0);}
#gift-modal .pv__box-cols { display: flex; gap: .75rem; align-items: flex-start; }
#gift-modal .pv__box-title { margin: 0 0 .37rem; font-family: var(--fonte); font-size: .4335rem; font-weight: 700; line-height: 150%; }
#gift-modal .pv__steps { margin: 0 0 .22rem; padding: 0; list-style: none; font-family: var(--fonte); font-size: .4335rem; font-weight: 400; line-height: 150%; }
#gift-modal .pv__qr-col { flex: 0 0 auto; text-align: center; }
#gift-modal .pv__qr { display: block; width: 64px; height: 64px; margin: 0 0 .3rem; }

/* Só no voucher: a coluna dos passos não passa de 8rem, e o QR afasta-se
   .75rem do bloco dos passos. A largura da primeira coluna passa a ser fixa
   (não só um max-width) porque é ela que fixa o ponto de partida da coluna do
   QR — e é esse ponto que a .pv__meta e a .pv__benef vão copiar. */
#gift-modal .pv--voucher .pv__steps { max-width: var(--pv-col); }
#gift-modal .pv--voucher .pv__box-cols { gap: var(--pv-gap); }
#gift-modal .pv--voucher .pv__box-cols > :first-child { flex: 0 0 var(--pv-col); }

#gift-modal .pv__meta { display: flex; gap: 1.5rem; margin: 0 0 .75rem; text-align: left; font-family: var(--fonte); font-size: .625rem; line-height: 150%; justify-content: center; }
#gift-modal .pv__meta dt { color: var(--texto); font-family: var(--fonte); font-size: 0.4335rem; font-style: normal; font-weight: 400; line-height: 150%; margin-bottom:0.2rem }
#gift-modal .pv__meta dd { color: var(--texto); font-family: var(--fonte); font-size: 0.4335rem; font-style: normal; font-weight: 700; line-height: 150%; }

#gift-modal .pv__benef { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; padding: 0; list-style: none; text-align: left; font-family: var(--fonte); font-size: .625rem; line-height: 150%; }
#gift-modal .pv__benef li { display: flex; align-items: center; gap: .23rem; color: var(--foreground, #1a1e22); font-family: var(--fonte); font-size: .39013rem; font-style: normal; font-weight: 400; line-height: 125%; }
/* O visto é um SVG de fundo, não o carácter \2713: o glifo muda de desenho e de
   largura conforme a fonte do sistema. Com background-image o bullet é sempre
   o mesmo 9×9 e o gap de .23rem mede sempre o mesmo. */
#gift-modal .pv__benef li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background-image: var(--ico-check);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
}

/* Meta e benefícios na mesma grelha da .pv__box-cols: recuo lateral igual ao do
   .pv__box-title e duas colunas com a mesma largura e goteira. Assim o primeiro
   <dt> cai por baixo do .pv__box-title e o segundo por baixo do .pv__qr-col.
   Nos benefícios, grid-auto-flow: column com três linhas explícitas põe os três
   primeiros <li> na coluna da esquerda e os três últimos na da direita — a
   ordem do markup mantém-se de cima para baixo em cada coluna. */
#gift-modal .pv--voucher .pv__meta,
#gift-modal .pv--voucher .pv__benef {
  display: grid;
  grid-template-columns: var(--pv-col) 1fr;
  column-gap: var(--pv-gap);
  margin-left: var(--pv-inset);
  margin-right: var(--pv-inset);
  justify-content: start;
}
#gift-modal .pv--voucher .pv__benef {
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  row-gap: .25rem;
}

#gift-modal .pv__nota { margin: 0; font-family: var(--fonte); font-size: 0.39013rem; font-weight: 400; line-height: 150%; color: var(--cinza); margin-bottom: 0.5rem;}

/* Na pré-visualização, tudo a partir da caixa cinzenta fica desfocado: o QR e o
   código são de serviço e não devem ler-se. O `~ *` apanha a caixa e todos os
   irmãos que vêm depois (linhas, meta, benefícios, nota), por isso basta esta
   regra para o fim do cartão. */
#gift-modal .pv--voucher .pv__box,
#gift-modal .pv--voucher .pv__box ~ * {
  filter: blur(3px);
  pointer-events: none;
  user-select: none;
}

/* ============================================================
   Mobile — um só breakpoint (734/735) para toda a modal.
   ============================================================ */

@media screen and (max-width: 734px) {
  #gift-modal .subscription-section { display: block; }

  #gift-modal .plus-message-modal-wrapper .header-wrapper {
    height: 58px;
    background-image: url("https://static.publico.pt/s3/assinaturas/piano/premium/mobile_upgrade.png");
  }

  #gift-modal .plus-message-modal-wrapper .content-wrapper { padding: 32px 16px 20px; }
  #gift-modal .subscription-section__buttons { display: block; margin-top: 24px; }
  #gift-modal .subscription-section__buttons a { display: block; width: 100%; margin-bottom: 1rem; }
  #gift-modal .subscription-section__buttons a:last-child { margin-bottom: 0; }

  #gift-modal .gift-title,
  #gift-modal .gift-delivery__title { margin-top: 1.5rem; }
  #gift-modal .gift-options { flex-direction: column; align-items: stretch; gap: 12px; }
  #gift-modal .gift-option { max-width: none; }
  #gift-modal .gift-delivery-form__submit { padding-top: 2rem; }
  #gift-modal .gift-delivery-form__button,
  #gift-modal .action-primary,
  #gift-modal .action-secondary { width: 100%; min-width: 0; }
  /* Nas linhas do formulário o gap é 0 porque cada campo já traz a margem da
     sua label. A data e a hora não têm label própria, por isso mantêm os
     1.5rem que tinham lado a lado. */
  #gift-modal .gift-form .row { flex-direction: column; gap: 0; }
  #gift-modal .when-row { flex-direction: column; gap: 1.5rem; }
  #gift-modal .gift-actions { flex-direction: column; margin-top: 2rem; }

  /* Só o voucher: o .pv--email tem padding próprio e a mesma especificidade,
     por isso um `.pv` aqui apagava-o. */
  #gift-modal .pv--voucher { padding: 1rem; }
  #gift-modal .pv__box-cols { flex-direction: column; }
  #gift-modal .pv__qr-col { align-self: center; }
  #gift-modal .pv__meta { flex-direction: column; gap: .5rem; }
  #gift-modal .pv__benef { grid-template-columns: 1fr; }

  /* Com o .pv__box-cols em coluna, o flex-basis passa a medir altura: os 8rem
     da coluna 1 viravam 8rem de altura no bloco dos passos. */
  #gift-modal .pv--voucher .pv__box-cols > :first-child { flex: 0 1 auto; }
  #gift-modal .pv--voucher .pv__steps { max-width: none; }
  /* Sem duas colunas não há nada a alinhar: meta e benefícios empilham e
     perdem o recuo lateral, como o resto do cartão. */
  #gift-modal .pv--voucher .pv__meta,
  #gift-modal .pv--voucher .pv__benef {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    margin-left: 0;
    margin-right: 0;
  }
}

@media screen and (min-width: 735px) {
  #gift-modal .subscription-section__buttons { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }
}