/* ========================================================================== Portosigns Header — v1.9.0 Tudo está sob #psh para não colidir com os estilos do tema. ========================================================================== */ #psh { --psh-cobalt: #1d3b8b; --psh-cobalt-d: #142b69; --psh-cobalt-l: #3a5bb5; --psh-sky: #e9eff9; --psh-porcelain: #f6f8fc; --psh-ink: #16213f; --psh-mute: #5a6480; --psh-line: rgba(22, 33, 63, .12); --psh-coral: #c84b2f; --psh-ok: #1c7350; --psh-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --psh-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --psh-ease: cubic-bezier(.22, .8, .24, 1); --psh-t: .32s; --psh-logo-h: 48px; position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 9990; font-family: var(--psh-sans); font-size: 16px; line-height: 1.4; color: var(--psh-ink); -webkit-font-smoothing: antialiased; } @media (max-width: 600px) { #psh { top: 0; } } /* Header fixo: o JS move #psh para o início do (fora de contentores do tema/Elementor que impediriam o "sticky") e deixa um espaçador com a altura do header no sítio do shortcode. */ #psh.is-fixed { position: relative; top: auto; z-index: 9990; height: 0; } #psh.is-fixed .psh-header { position: fixed; top: var(--psh-top, 0px); left: 0; right: 0; z-index: 1; } .psh-spacer { display: block; height: 0; } /* ---------- reset local (vence os estilos genéricos do tema) ---------- */ #psh *, #psh *::before, #psh *::after { box-sizing: border-box; } #psh button, #psh input, #psh select { margin: 0; font: inherit; color: inherit; letter-spacing: normal; text-transform: none; box-shadow: none; min-height: 0; min-width: 0; line-height: normal; width: auto; height: auto; } #psh button { background: none; border: 0; padding: 0; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } #psh a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } #psh a:hover, #psh a:focus { color: inherit; } #psh h2, #psh h3, #psh p, #psh ul, #psh dl, #psh dd, #psh dt { margin: 0; padding: 0; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; } #psh ul { list-style: none; } #psh img { max-width: 100%; height: auto; border: 0; } #psh [hidden] { display: none !important; } #psh :focus { outline: none; } #psh :focus-visible { outline: 2px solid var(--psh-cobalt); outline-offset: 2px; border-radius: 10px; } #psh .ph, #psh .ph-duotone { line-height: 1; } #psh .psh-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== HEADER ========================================================================== */ #psh .psh-header { background: #fff; box-shadow: 0 1px 0 var(--psh-line); padding-top: env(safe-area-inset-top); transition: box-shadow var(--psh-t) var(--psh-ease); } #psh.is-compact .psh-header { box-shadow: 0 10px 24px -18px rgba(20, 43, 105, .55), 0 1px 0 var(--psh-line); } /* faixa de anúncios */ #psh .psh-ann { position: relative; height: 34px; padding: 0 16px; overflow: hidden; background: var(--psh-cobalt-d); color: #fff; font-size: 13px; letter-spacing: .01em; } #psh .psh-ann__list { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; } /* telemóvel/tablet: uma mensagem de cada vez, a rodar */ #psh .psh-ann__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--psh-ease); white-space: nowrap; } #psh .psh-ann__item.is-on { opacity: 1; transform: none; } #psh .psh-ann__item.is-leaving { opacity: 0; transform: translateY(-8px); } #psh .psh-ann__item i { font-size: 16px; flex: none; color: #b9cbf2; } #psh .psh-ann__item span { overflow: hidden; text-overflow: ellipsis; } /* desktop: todas lado a lado */ @media (min-width: 1024px) { #psh .psh-ann__list { display: flex; align-items: center; justify-content: center; gap: 44px; } #psh .psh-ann__item { position: static; opacity: 1; transform: none; } #psh .psh-ann__item + .psh-ann__item::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .35); margin: 0 22px 0 -26px; } } /* barra principal — telemóvel/tablet: menu | logótipo | ícones */ #psh .psh-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); max-width: 1320px; margin: 0 auto; } #psh .psh-bar__l { display: flex; } #psh .psh-bar__r { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } #psh .psh-ibtn { position: relative; flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--psh-cobalt); font-size: 24px; transition: background-color .2s, transform .2s var(--psh-ease), opacity var(--psh-t); } #psh .psh-ibtn:hover { background: var(--psh-sky); } #psh .psh-ibtn:active { transform: scale(.92); } #psh .psh-ibtn--search { opacity: 0; transform: scale(.6); pointer-events: none; } #psh.is-compact .psh-ibtn--search { opacity: 1; transform: none; pointer-events: auto; } #psh .psh-ibtn--account { display: none; } #psh .psh-badge { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; border: 2px solid #fff; background: var(--psh-coral); color: #fff; font-size: 11px; font-weight: 600; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; transform-origin: 50% 60%; } #psh .psh-badge[data-count="0"] { display: none; } /* seletor de idioma */ #psh .psh-langsw { position: relative; flex: none; } #psh .psh-langbtn { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; border-radius: 999px; color: var(--psh-cobalt); font-size: 14px; font-weight: 600; letter-spacing: .03em; transition: background-color .2s; } #psh .psh-langbtn:hover, #psh .psh-langbtn[aria-expanded="true"] { background: var(--psh-sky); } #psh .psh-langbtn .ph-globe-simple { font-size: 20px; } #psh .psh-langbtn .ph-caret-down { font-size: 11px; transition: transform .25s var(--psh-ease); } #psh .psh-langbtn[aria-expanded="true"] .ph-caret-down { transform: rotate(180deg); } #psh .psh-langlist { position: absolute; right: 0; top: calc(100% + 6px); z-index: 7; width: 260px; padding: 8px 6px 6px; background: #fff; border: 1px solid var(--psh-line); border-radius: 16px; box-shadow: 0 24px 50px -24px rgba(14, 24, 56, .45); opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .28s var(--psh-ease); } #psh .psh-langlist > ul { max-height: min(52vh, 380px); overflow-y: auto; overscroll-behavior: contain; margin-top: 4px; } #psh .psh-langlist .psh-langq { margin: 0 2px 2px; } /* pesquisa de idioma */ #psh .psh-langq { position: relative; display: flex; align-items: center; } #psh .psh-langq > .ph { position: absolute; left: 12px; font-size: 17px; color: var(--psh-cobalt); pointer-events: none; } #psh .psh-langq input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid var(--psh-line); border-radius: 12px; background: var(--psh-porcelain); font-size: 16px; color: var(--psh-ink); -webkit-appearance: none; appearance: none; outline: none; } #psh .psh-langq input:focus { border-color: var(--psh-cobalt); background: #fff; box-shadow: 0 0 0 3px rgba(29, 59, 139, .12); } #psh .psh-langq input::-webkit-search-cancel-button { display: none; } #psh .psh-langnone { padding: 14px 10px; font-size: 14px; color: var(--psh-mute); text-align: center; } #psh [data-psh-lang-k] a.is-hl { background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-langlist.is-open { opacity: 1; transform: none; } #psh .psh-langlist a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 6px 10px; border-radius: 10px; font-size: 15px; color: var(--psh-ink); transition: background-color .15s, color .15s; } #psh .psh-langlist a:hover, #psh .psh-langlist a:focus-visible { background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-langlist b { width: 26px; font-size: 12.5px; font-weight: 600; color: var(--psh-mute); letter-spacing: .03em; } #psh .psh-langlist .ph-check { margin-left: auto; font-size: 16px; color: var(--psh-cobalt); opacity: 0; } #psh .psh-langlist a.is-active { color: var(--psh-cobalt); font-weight: 500; } #psh .psh-langlist a.is-active b { color: var(--psh-cobalt); } #psh .psh-langlist a.is-active .ph-check { opacity: 1; } @media (max-width: 599px) { #psh .psh-ibtn { width: 40px; height: 40px; } #psh .psh-langbtn { height: 40px; padding: 0 6px; } #psh .psh-langbtn .ph-globe-simple { display: none; } } @media (max-width: 419px) { #psh .psh-bar__r:has(.psh-ibtn--wish) .psh-langsw { display: none; } } .psh-gt-host { display: none !important; } /* logótipo */ #psh .psh-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; line-height: 1; color: var(--psh-cobalt); } #psh .psh-logo img { display: block; width: auto; height: 40px; max-width: min(48vw, 240px); object-fit: contain; transition: height var(--psh-t) var(--psh-ease); } #psh .psh-logo__word { font-family: var(--psh-serif); font-weight: 600; font-size: 26px; letter-spacing: .01em; transition: font-size var(--psh-t) var(--psh-ease); } #psh .psh-logo small { display: block; margin-top: 4px; height: 13px; overflow: hidden; font-size: 11px; letter-spacing: .04em; color: var(--psh-mute); white-space: nowrap; transition: height var(--psh-t) var(--psh-ease), opacity var(--psh-t), margin var(--psh-t); } #psh.is-compact .psh-logo img { height: 32px; } #psh.is-compact .psh-logo__word { font-size: 22px; } #psh.is-compact .psh-logo small { height: 0; margin-top: 0; opacity: 0; } /* caixa de pesquisa (botão que abre o painel) */ #psh .psh-searchbox { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--psh-sky); color: var(--psh-mute); font-size: 15px; text-align: left; transition: background-color .2s, box-shadow .2s; } #psh .psh-searchbox:hover { background: #dfe7f6; } #psh .psh-searchbox i { font-size: 20px; color: var(--psh-cobalt); flex: none; } #psh .psh-searchbox span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #psh .psh-searchbox kbd { font: 500 12px/1 var(--psh-sans); color: var(--psh-mute); border: 1px solid var(--psh-line); background: #fff; border-radius: 6px; padding: 4px 7px; } #psh .psh-bar > .psh-searchbox { display: none; } #psh .psh-search-row { height: 60px; padding: 2px 16px 12px; overflow: hidden; transition: height var(--psh-t) var(--psh-ease), padding var(--psh-t) var(--psh-ease), opacity var(--psh-t); } #psh .psh-searchbox--row kbd { display: none; } #psh.is-compact .psh-search-row { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; } /* categorias: chips no telemóvel */ #psh .psh-nav { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 16px 12px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } #psh .psh-nav::-webkit-scrollbar { display: none; } #psh .psh-chip { flex: none; scroll-snap-align: start; display: flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--psh-line); background: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--psh-ink); transition: background-color .2s, border-color .2s, color .2s; } #psh .psh-chip:hover { border-color: var(--psh-cobalt); color: var(--psh-cobalt); } #psh .psh-chip.is-active { background: var(--psh-cobalt); border-color: var(--psh-cobalt); color: #fff; } /* páginas (Sobre nós, Contactos…) na barra das categorias */ #psh .psh-nav__sep { flex: none; align-self: center; width: 1px; height: 22px; margin: 0 4px; background: var(--psh-line); } #psh .psh-chip--page { background: var(--psh-porcelain); } #psh .psh-chip--page.is-active { background: var(--psh-cobalt); border-color: var(--psh-cobalt); color: #fff; } /* categorias com subcategorias */ #psh .psh-chip.has-sub { gap: 6px; } #psh .psh-chip.has-sub > .ph { font-size: 13px; transition: transform .25s var(--psh-ease); } #psh .psh-chip[aria-expanded="true"] { border-color: var(--psh-cobalt); color: var(--psh-cobalt); background: var(--psh-sky); } #psh .psh-chip.is-active[aria-expanded="true"] { background: var(--psh-cobalt-d); color: #fff; } #psh .psh-chip[aria-expanded="true"] > .ph { transform: rotate(180deg); } /* dropdown de subcategorias */ #psh .psh-subs { position: relative; height: 0; } #psh .psh-sub { position: absolute; top: 0; left: 12px; right: 12px; z-index: 5; max-height: var(--psh-sub-max, 60vh); overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--psh-line); box-shadow: 0 24px 50px -24px rgba(14, 24, 56, .45); opacity: 0; transform: translateY(-8px); transition: opacity .22s, transform .3s var(--psh-ease); } #psh .psh-sub.is-open { opacity: 1; transform: none; } #psh .psh-sub__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--psh-line); } #psh .psh-sub__head b { font-family: var(--psh-serif); font-size: 20px; font-weight: 600; color: var(--psh-ink); } #psh .psh-sub__all { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--psh-cobalt); white-space: nowrap; } #psh .psh-sub__all:hover { color: var(--psh-cobalt-d); text-decoration: underline; } #psh .psh-sub__grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; } #psh .psh-sub__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--psh-ink); transition: background-color .15s, color .15s; } #psh .psh-sub__link:hover, #psh .psh-sub__link:focus-visible { background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-sub__link.is-active { color: var(--psh-cobalt); } #psh .psh-sub__link small { font-size: 12.5px; font-weight: 400; color: var(--psh-mute); font-variant-numeric: tabular-nums; } #psh .psh-sub__kids { margin: -2px 0 6px; padding-left: 12px; border-left: 2px solid var(--psh-sky); } #psh .psh-sub__kids a { display: block; padding: 5px 0; font-size: 14px; color: var(--psh-mute); } #psh .psh-sub__kids a:hover { color: var(--psh-cobalt); } @media (min-width: 600px) { #psh .psh-sub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- desktop ---------- */ @media (min-width: 1024px) { #psh .psh-bar { grid-template-columns: auto minmax(280px, 580px) auto; justify-content: space-between; gap: 32px; padding: 14px 32px; } #psh .psh-bar__l, #psh .psh-search-row { display: none; } #psh .psh-bar > .psh-searchbox { display: flex; height: 48px; } #psh .psh-bar__r { gap: 4px; } #psh .psh-ibtn--account { display: grid; } #psh .psh-logo { align-items: flex-start; } #psh .psh-logo img { height: var(--psh-logo-h); max-width: 280px; } #psh .psh-logo small { display: none; } #psh.is-compact .psh-bar { padding-top: 8px; padding-bottom: 8px; } #psh.is-compact .psh-logo img { height: calc(var(--psh-logo-h) * .78); } #psh .psh-bar { transition: padding var(--psh-t) var(--psh-ease); } #psh .psh-nav { justify-content: center; gap: 4px; overflow: visible; max-width: 1320px; margin: 0 auto; padding: 0 32px; -webkit-mask-image: none; mask-image: none; border-top: 1px solid var(--psh-line); } #psh .psh-chip { position: relative; height: 48px; padding: 0 14px; border: 0; border-radius: 0; background: none; font-size: 15px; } #psh .psh-chip::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: var(--psh-cobalt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--psh-ease); } #psh .psh-chip:hover { color: var(--psh-cobalt); } #psh .psh-chip:hover::after, #psh .psh-chip.is-active::after { transform: scaleX(1); } #psh .psh-chip.is-active { background: none; color: var(--psh-cobalt); } #psh .psh-chip--page, #psh .psh-chip--page.is-active { background: none; color: var(--psh-mute); } #psh .psh-chip--page:hover, #psh .psh-chip--page.is-active { color: var(--psh-cobalt); } #psh .psh-nav__sep { margin: 0 10px; } #psh .psh-chip[aria-expanded="true"], #psh .psh-chip.is-active[aria-expanded="true"] { background: none; color: var(--psh-cobalt); } #psh .psh-chip[aria-expanded="true"]::after { transform: scaleX(1); } #psh .psh-sub { right: auto; width: min(720px, calc(100vw - 48px)); padding: 20px 22px 22px; } #psh .psh-sub__grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } } /* ========================================================================== OVERLAYS (menu, pesquisa, carrinho) ========================================================================== */ #psh .psh-ov { position: fixed; inset: 0; z-index: 10; display: flex; } #psh .psh-scrim { position: absolute; inset: 0; background: rgba(14, 24, 56, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--psh-t) var(--psh-ease); } #psh .psh-ov.is-open .psh-scrim { opacity: 1; } #psh .psh-panel { position: relative; display: flex; flex-direction: column; background: #fff; color: var(--psh-ink); height: 100%; max-height: 100dvh; transition: transform .42s var(--psh-ease), opacity .3s; will-change: transform; } #psh .psh-close { width: 44px; height: 44px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 22px; background: var(--psh-sky); color: var(--psh-cobalt); transition: background-color .2s, transform .3s var(--psh-ease); } #psh .psh-close:hover { background: #dbe4f5; transform: rotate(90deg); } html.psh-lock, html.psh-lock body { overflow: hidden !important; } html.psh-lock body { padding-right: var(--psh-sbw, 0px); } /* ---------- menu ---------- */ #psh .psh-menu__panel { width: min(420px, 90vw); transform: translateX(-100%); padding-top: env(safe-area-inset-top); box-shadow: 20px 0 50px -30px rgba(14, 24, 56, .5); } #psh .psh-menu.is-open .psh-menu__panel { transform: none; } #psh .psh-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--psh-line); } #psh .psh-logo--menu { align-items: flex-start; } #psh .psh-logo--menu img { height: 36px; } #psh .psh-menu__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 22px; } #psh .psh-menu__body > * { flex-shrink: 0; } /* sem isto, blocos com overflow encolhem e sobrepõem-se */ #psh .psh-searchbox--menu { height: 48px; } #psh .psh-searchbox--menu kbd { display: none; } #psh .psh-cat { display: flex; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--psh-line); transition: background-color .2s, padding .25s var(--psh-ease); } #psh .psh-cat:hover { padding-left: 10px; } #psh .psh-cat:last-child { border-bottom: 0; } #psh .psh-cat__ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 23px; background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-cat.is-active .psh-cat__ic { background: var(--psh-cobalt); color: #fff; } #psh .psh-cat__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #psh .psh-cat__tx b { font-family: var(--psh-serif); font-size: 19px; font-weight: 600; color: var(--psh-ink); } #psh .psh-cat__tx small { font-size: 13px; color: var(--psh-mute); } #psh .psh-cat > .ph { font-size: 16px; color: var(--psh-mute); } /* acordeão de subcategorias no menu */ #psh .psh-cat-item { border-bottom: 1px solid var(--psh-line); } #psh .psh-cat-item:last-child { border-bottom: 0; } #psh .psh-cat-item > .psh-cat { width: 100%; border-bottom: 0; text-align: left; } #psh .psh-cat-item > .psh-cat > .ph { transition: transform .25s var(--psh-ease); } #psh .psh-cat-item > .psh-cat[aria-expanded="true"] > .ph { transform: rotate(180deg); color: var(--psh-cobalt); } #psh .psh-cat-item > .psh-cat[aria-expanded="true"] .psh-cat__ic { background: var(--psh-cobalt); color: #fff; } #psh .psh-cat__subs { padding: 0 0 12px 64px; overflow: hidden; } #psh .psh-cat__sublink { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 10px; margin-left: -10px; border-radius: 10px; font-size: 15px; color: var(--psh-ink); } #psh .psh-cat__sublink:hover { background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-cat__sublink small { font-size: 12.5px; color: var(--psh-mute); } #psh .psh-cat__sublink--all { font-weight: 600; color: var(--psh-cobalt); } #psh .psh-cat__sublink--kid { min-height: 38px; padding-left: 24px; font-size: 14px; color: var(--psh-mute); } #psh .psh-cat__sublink.is-active { color: var(--psh-cobalt); font-weight: 500; } #psh .psh-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #psh .psh-tile { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--psh-porcelain); border: 1px solid var(--psh-line); font-size: 14px; font-weight: 500; transition: border-color .2s, background-color .2s; } #psh .psh-tile:hover { border-color: var(--psh-cobalt); background: #fff; } #psh .psh-tile i { font-size: 24px; color: var(--psh-cobalt); } #psh .psh-menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } #psh .psh-lang { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 22px; background: var(--psh-sky); } #psh .psh-lang a { min-width: 48px; height: 36px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--psh-cobalt); } #psh .psh-lang a.is-active { background: var(--psh-cobalt); color: #fff; } /* idioma no menu do telemóvel: dropdown */ #psh .psh-mlang { border: 1px solid var(--psh-line); border-radius: 16px; background: var(--psh-porcelain); overflow: hidden; } #psh .psh-mlang__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 16px; text-align: left; font-size: 15px; color: var(--psh-ink); } #psh .psh-mlang__btn > .ph-duotone { font-size: 22px; color: var(--psh-cobalt); } #psh .psh-mlang__lbl { color: var(--psh-mute); } #psh .psh-mlang__btn b { margin-left: auto; font-weight: 600; color: var(--psh-cobalt); } #psh .psh-mlang__btn > .ph-caret-down { font-size: 14px; color: var(--psh-mute); transition: transform .25s var(--psh-ease); } #psh .psh-mlang__btn[aria-expanded="true"] > .ph-caret-down { transform: rotate(180deg); } #psh .psh-mlang__list { border-top: 1px solid var(--psh-line); background: #fff; } #psh .psh-mlang__list > ul { max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; padding: 4px 6px 8px; } #psh .psh-mlang__list .psh-langq { margin: 10px 10px 4px; } #psh .psh-mlang__list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 10px; border-radius: 10px; font-size: 15px; color: var(--psh-ink); } #psh .psh-mlang__list a:hover, #psh .psh-mlang__list a:focus-visible { background: var(--psh-sky); color: var(--psh-cobalt); } #psh .psh-mlang__list b { width: 26px; font-size: 12.5px; font-weight: 600; color: var(--psh-mute); letter-spacing: .03em; } #psh .psh-mlang__list .ph-check { margin-left: auto; font-size: 16px; color: var(--psh-cobalt); opacity: 0; } #psh .psh-mlang__list a.is-active { color: var(--psh-cobalt); font-weight: 500; } #psh .psh-mlang__list a.is-active .ph-check { opacity: 1; } #psh .psh-social { display: flex; gap: 4px; margin-left: auto; } #psh .psh-social a { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; color: var(--psh-cobalt); border-radius: 999px; } #psh .psh-social a:hover { background: var(--psh-sky); } #psh .psh-info { font-size: 14px; line-height: 1.6; color: var(--psh-mute); } #psh .psh-info a { color: var(--psh-cobalt); font-weight: 500; } /* ---------- pesquisa ---------- */ #psh .psh-search__panel { width: 100%; height: 100%; transform: translateY(-14px); opacity: 0; padding-top: env(safe-area-inset-top); } #psh .psh-search.is-open .psh-search__panel { transform: none; opacity: 1; } #psh .psh-search__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--psh-line); } #psh .psh-search__field { position: relative; flex: 1 1 100%; order: 1; display: flex; align-items: center; } #psh .psh-search__field > .ph { position: absolute; left: 16px; font-size: 20px; color: var(--psh-cobalt); pointer-events: none; } #psh .psh-search__field input { width: 100%; height: 50px; padding: 0 84px 0 46px; border: 1.5px solid var(--psh-cobalt); border-radius: 999px; background: #fff; font-size: 16px; /* 16px evita zoom no iOS */ color: var(--psh-ink); -webkit-appearance: none; appearance: none; outline: none; transition: box-shadow .2s; } #psh .psh-search__field input:focus { box-shadow: 0 0 0 4px rgba(29, 59, 139, .14); } #psh .psh-search__field input::-webkit-search-cancel-button { display: none; } #psh .psh-search__field input::placeholder { color: #8a92a8; } #psh .psh-search__clear { position: absolute; right: 8px; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; color: var(--psh-mute); } #psh .psh-search__clear:hover { color: var(--psh-cobalt); } #psh .psh-spin { position: absolute; right: 48px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--psh-sky); border-top-color: var(--psh-cobalt); opacity: 0; transition: opacity .2s; } #psh .psh-search.is-loading .psh-spin { opacity: 1; animation: psh-rot .7s linear infinite; } @keyframes psh-rot { to { transform: rotate(360deg); } } #psh .psh-scope { order: 2; position: relative; flex: 1; display: flex; align-items: center; } #psh .psh-scope select { width: 100%; height: 40px; padding: 0 36px 0 14px; border: 1px solid var(--psh-line); border-radius: 999px; background: var(--psh-porcelain); font-size: 14px; font-weight: 500; color: var(--psh-ink); cursor: pointer; -webkit-appearance: none; appearance: none; } #psh .psh-scope select.is-set { border-color: var(--psh-cobalt); color: var(--psh-cobalt); background: var(--psh-sky); } #psh .psh-scope > .ph { position: absolute; right: 14px; font-size: 14px; pointer-events: none; color: var(--psh-mute); } #psh .psh-search__cancel { order: 3; height: 40px; padding: 0 8px; color: var(--psh-cobalt); font-size: 15px; font-weight: 500; } #psh .psh-search__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); } #psh .psh-sr-block + .psh-sr-block { margin-top: 24px; } #psh .psh-sr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } #psh .psh-sr-head h3 { font-size: 14px; font-weight: 600; color: var(--psh-mute); } #psh .psh-link { font-size: 14px; color: var(--psh-cobalt); font-weight: 500; } #psh .psh-link:hover { text-decoration: underline; } #psh .psh-pills { display: flex; flex-wrap: wrap; gap: 8px; } #psh .psh-pills--center { justify-content: center; } #psh .psh-pills button, #psh .psh-pills a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--psh-line); background: #fff; font-size: 14px; color: var(--psh-ink); transition: border-color .2s, color .2s; } #psh .psh-pills button:hover, #psh .psh-pills a:hover { border-color: var(--psh-cobalt); color: var(--psh-cobalt); } #psh .psh-pills i { color: var(--psh-cobalt); font-size: 16px; } #psh .psh-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #psh .psh-catgrid a { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--psh-line); border-radius: 14px; font-weight: 500; font-size: 15px; transition: border-color .2s; } #psh .psh-catgrid a:hover { border-color: var(--psh-cobalt); } #psh .psh-catgrid .psh-cat__ic { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; } #psh .psh-catgrid span:last-child { display: flex; flex-direction: column; min-width: 0; } #psh .psh-catgrid small { font-size: 12px; font-weight: 400; color: var(--psh-mute); } /* resultados */ #psh .psh-sr-group + .psh-sr-group { margin-top: 22px; } #psh .psh-sr-group > h3 { font-size: 14px; font-weight: 600; color: var(--psh-mute); margin-bottom: 8px; display: flex; gap: 6px; align-items: baseline; } #psh .psh-sr-group > h3 span { font-weight: 400; } #psh .psh-opt { border-radius: 14px; transition: background-color .15s; } #psh .psh-opt.is-active, #psh .psh-opt:hover { background: var(--psh-sky); } #psh .psh-rcat { display: flex; align-items: center; gap: 12px; padding: 8px 10px; } #psh .psh-rcat .psh-cat__ic { width: 38px; height: 38px; font-size: 19px; border-radius: 11px; background: #fff; border: 1px solid var(--psh-line); } #psh .psh-rcat__tx { flex: 1; min-width: 0; } #psh .psh-rcat__tx b { display: block; font-weight: 500; } #psh .psh-rcat__tx small { font-size: 13px; color: var(--psh-mute); } #psh .psh-rcat > .ph { color: var(--psh-mute); } #psh mark { background: none; color: var(--psh-cobalt); font-weight: 600; padding: 0; } #psh .psh-prods { display: grid; gap: 4px; } #psh .psh-prod { display: flex; align-items: center; gap: 12px; padding: 8px 10px; } #psh .psh-prod__img { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--psh-porcelain); display: grid; place-items: center; color: var(--psh-mute); font-size: 22px; } #psh .psh-prod__img img { width: 100%; height: 100%; object-fit: cover; } #psh .psh-prod__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } #psh .psh-prod__name { font-weight: 500; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #psh .psh-prod__cat { font-size: 12.5px; color: var(--psh-mute); } #psh .psh-price { font-size: 15px; font-weight: 600; color: var(--psh-ink); font-variant-numeric: tabular-nums; } #psh .psh-price del { font-weight: 400; color: var(--psh-mute); margin-right: 6px; font-size: 13px; } #psh .psh-price ins { text-decoration: none; color: var(--psh-coral); } #psh .psh-prod__act { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; background: var(--psh-cobalt); color: #fff; transition: background-color .2s, transform .2s var(--psh-ease); } #psh .psh-prod__act:hover { background: var(--psh-cobalt-d); color: #fff; } #psh .psh-prod__act:active { transform: scale(.95); } #psh .psh-prod__act i { font-size: 16px; } #psh .psh-prod__act--ghost { background: #fff; color: var(--psh-cobalt); border: 1px solid var(--psh-line); } #psh .psh-prod__act--ghost:hover { background: #fff; color: var(--psh-cobalt); border-color: var(--psh-cobalt); } #psh .psh-prod__act[disabled] { opacity: .6; cursor: default; } #psh .psh-prod__act.is-done { background: var(--psh-ok); } #psh .psh-tag-out { font-size: 12.5px; font-weight: 500; color: var(--psh-mute); padding: 0 6px; flex: none; } #psh .psh-sr-all { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; height: 50px; padding: 0 16px; border-radius: 14px; background: var(--psh-porcelain); border: 1px solid var(--psh-line); font-weight: 500; color: var(--psh-cobalt); text-align: center; } #psh .psh-sr-all.is-active, #psh .psh-sr-all:hover { background: var(--psh-sky); border-color: var(--psh-cobalt); } #psh .psh-sr-none { text-align: center; padding: 28px 12px 8px; } #psh .psh-sr-none i { font-size: 40px; color: var(--psh-cobalt); } #psh .psh-sr-none b { display: block; margin: 10px 0 4px; font-family: var(--psh-serif); font-size: 20px; font-weight: 600; } #psh .psh-sr-none p { color: var(--psh-mute); font-size: 14px; } @media (max-width: 479px) { #psh .psh-prod { gap: 10px; padding: 8px 6px; } #psh .psh-prod__img { width: 56px; height: 56px; } #psh .psh-prod__act { width: 40px; height: 40px; padding: 0; justify-content: center; } #psh .psh-prod__act span { display: none; } #psh .psh-prod__act--ghost { width: auto; padding: 0 12px; } } @media (min-width: 700px) { #psh .psh-search__field { flex: 1 1 auto; } #psh .psh-scope { order: 2; flex: 0 0 200px; } #psh .psh-scope select { height: 50px; } #psh .psh-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } #psh .psh-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { #psh .psh-search { align-items: flex-start; justify-content: center; padding: 16px 24px; } #psh .psh-search__panel { width: min(920px, 100%); height: auto; max-height: calc(100dvh - 32px); border-radius: 24px; padding-top: 0; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(14, 24, 56, .5); } #psh .psh-search__form { padding: 18px 20px; } #psh .psh-search__body { padding: 20px 20px 24px; } } /* ---------- carrinho lateral ---------- */ #psh .psh-cart { justify-content: flex-end; } #psh .psh-cart__panel { width: min(440px, 100vw); transform: translateX(100%); padding-top: env(safe-area-inset-top); box-shadow: -24px 0 60px -30px rgba(14, 24, 56, .55); } #psh .psh-cart.is-open .psh-cart__panel { transform: none; } #psh .psh-cart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px 22px; } #psh .psh-cart__head h2 { font-family: var(--psh-serif); font-size: 24px; font-weight: 600; color: var(--psh-ink); } #psh .psh-cart__head h2 span { font-family: var(--psh-sans); font-size: 14px; font-weight: 400; color: var(--psh-mute); margin-left: 4px; } /* barra de envio grátis — azulejos que se vão preenchendo */ #psh .psh-ship { margin: 0 22px 6px; padding: 12px 14px; border-radius: 14px; background: var(--psh-porcelain); border: 1px solid var(--psh-line); } #psh .psh-ship p { font-size: 14px; margin-bottom: 9px; } #psh .psh-ship p b { color: var(--psh-cobalt); font-weight: 600; } #psh .psh-ship.is-done p { color: var(--psh-ok); font-weight: 500; } #psh .psh-ship__tiles { display: grid; grid-template-columns: repeat(10, minmax(0, 22px)); gap: 4px; } #psh .psh-ship__tiles span { --c: rgba(29, 59, 139, .16); aspect-ratio: 1; border-radius: 3px; background-color: #fff; border: 1px solid rgba(29, 59, 139, .14); background-image: radial-gradient(circle at 0 0, var(--c) 0 26%, transparent 27%), radial-gradient(circle at 100% 0, var(--c) 0 26%, transparent 27%), radial-gradient(circle at 0 100%, var(--c) 0 26%, transparent 27%), radial-gradient(circle at 100% 100%, var(--c) 0 26%, transparent 27%), radial-gradient(circle at 50% 50%, transparent 0 16%, var(--c) 17% 27%, transparent 28%); transition: background-color .35s, border-color .35s; } #psh .psh-ship__tiles span.on { --c: rgba(255, 255, 255, .6); background-color: var(--psh-cobalt); border-color: var(--psh-cobalt); } #psh .psh-ship.is-done .psh-ship__tiles span.on { background-color: var(--psh-cobalt-l); } #psh .psh-cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 16px; } #psh .psh-cart__notice { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: #fdf0ec; color: #8a2f1a; font-size: 14px; } #psh .psh-line { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--psh-line); transition: opacity .2s; } #psh .psh-line.is-busy { opacity: .55; pointer-events: none; } #psh .psh-line__img { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--psh-porcelain); display: block; } #psh .psh-line__img img { width: 100%; height: 100%; object-fit: cover; } #psh .psh-line__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; } #psh .psh-line__name { font-weight: 500; font-size: 15px; line-height: 1.3; } #psh .psh-line__name:hover { color: var(--psh-cobalt); } #psh .psh-line__meta { font-size: 13px; color: var(--psh-mute); } #psh .psh-line__unit { font-size: 13px; color: var(--psh-mute); } #psh .psh-line__unit del { margin-right: 4px; } #psh .psh-line__unit ins { text-decoration: none; color: var(--psh-coral); } #psh .psh-line__low { font-size: 12.5px; color: var(--psh-coral); font-weight: 500; } #psh .psh-line__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; } #psh .psh-line__total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } #psh .psh-line__rm { align-self: start; width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 18px; color: var(--psh-mute); transition: background-color .2s, color .2s; } #psh .psh-line__rm:hover { background: #fdf0ec; color: var(--psh-coral); } #psh .psh-qty { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--psh-line); border-radius: 999px; background: #fff; } #psh .psh-qty button { width: 36px; height: 36px; display: grid; place-items: center; font-size: 15px; color: var(--psh-cobalt); border-radius: 999px; } #psh .psh-qty button:hover { background: var(--psh-sky); } #psh .psh-qty button[disabled] { color: #b8bfd0; cursor: default; background: none; } #psh .psh-qty input { width: 36px; height: 36px; border: 0; padding: 0; background: none; text-align: center; font-weight: 600; font-size: 15px; -moz-appearance: textfield; font-variant-numeric: tabular-nums; } #psh .psh-qty input::-webkit-outer-spin-button, #psh .psh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* estado vazio */ #psh .psh-empty { text-align: center; padding: 40px 8px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; } #psh .psh-empty__art { width: 88px; height: 88px; border-radius: 28px; background: var(--psh-sky); display: grid; place-items: center; font-size: 44px; color: var(--psh-cobalt); margin-bottom: 6px; } #psh .psh-empty h3 { font-family: var(--psh-serif); font-size: 22px; font-weight: 600; } #psh .psh-empty p { color: var(--psh-mute); font-size: 15px; margin-bottom: 6px; } #psh .psh-empty .psh-btn { margin-top: 10px; width: auto; padding: 0 22px; } /* esqueleto enquanto carrega */ #psh .psh-skel span { display: block; height: 76px; margin: 16px 0; border-radius: 14px; background: linear-gradient(90deg, var(--psh-porcelain) 25%, var(--psh-sky) 50%, var(--psh-porcelain) 75%); background-size: 200% 100%; animation: psh-shim 1.2s linear infinite; } @keyframes psh-shim { to { background-position: -200% 0; } } /* rodapé do carrinho */ #psh .psh-cart__foot { padding: 14px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--psh-line); background: #fff; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -16px 24px -24px rgba(14, 24, 56, .4); } #psh .psh-coupon summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; color: var(--psh-cobalt); padding: 4px 0; } #psh .psh-coupon summary::-webkit-details-marker { display: none; } #psh .psh-coupon summary i:first-child { font-size: 18px; } #psh .psh-coupon summary i:last-child { margin-left: auto; font-size: 14px; transition: transform .25s var(--psh-ease); } #psh .psh-coupon[open] summary i:last-child { transform: rotate(180deg); } #psh .psh-coupon__form { display: flex; gap: 8px; margin-top: 8px; } #psh .psh-coupon__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--psh-line); border-radius: 12px; background: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; } #psh .psh-coupon__form input:focus { border-color: var(--psh-cobalt); outline: none; box-shadow: 0 0 0 3px rgba(29, 59, 139, .12); } #psh .psh-coupon__msg { font-size: 13px; margin-top: 6px; min-height: 0; } #psh .psh-coupon__msg.is-err { color: var(--psh-coral); } #psh .psh-coupon__msg.is-ok { color: var(--psh-ok); } #psh .psh-coupons { display: flex; flex-wrap: wrap; gap: 6px; } #psh .psh-coupons:empty { display: none; } #psh .psh-coupons button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--psh-sky); color: var(--psh-cobalt); font-size: 13px; font-weight: 600; letter-spacing: .03em; } #psh .psh-totals { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; } #psh .psh-totals > div { display: flex; justify-content: space-between; gap: 12px; } #psh .psh-totals dt { color: var(--psh-mute); } #psh .psh-totals dd { font-variant-numeric: tabular-nums; text-align: right; } #psh .psh-totals [data-psh-discount] { color: var(--psh-ok); } #psh .psh-totals__grand { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--psh-line); font-size: 17px; } #psh .psh-totals__grand dt { color: var(--psh-ink); font-weight: 600; } #psh .psh-totals__grand dd { font-weight: 700; } #psh .psh-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; padding: 0 18px; border-radius: 14px; font-size: 16px; font-weight: 600; text-align: center; transition: background-color .2s, color .2s, border-color .2s, transform .15s; } #psh .psh-btn:active { transform: scale(.98); } #psh .psh-btn--primary { background: var(--psh-cobalt); color: #fff; } #psh .psh-btn--primary:hover { background: var(--psh-cobalt-d); color: #fff; } #psh .psh-btn--ghost { height: 46px; background: #fff; color: var(--psh-cobalt); border: 1px solid var(--psh-line); font-size: 15px; } #psh .psh-btn--ghost:hover { border-color: var(--psh-cobalt); color: var(--psh-cobalt); } #psh .psh-btn--small { width: auto; height: 44px; padding: 0 16px; font-size: 14px; border-radius: 12px; background: var(--psh-cobalt); color: #fff; } #psh .psh-btn--small[disabled] { opacity: .6; } /* toast */ #psh .psh-toast { position: fixed; z-index: 30; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(440px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; border-radius: 14px; background: var(--psh-ink); color: #fff; font-size: 14px; box-shadow: 0 18px 40px -16px rgba(14, 24, 56, .6); transition: transform .3s var(--psh-ease), opacity .3s; } #psh .psh-toast.is-in { transform: translate(-50%, 0); opacity: 1; } #psh .psh-toast span { flex: 1; } #psh .psh-toast button, #psh .psh-toast a { flex: none; height: 34px; padding: 0 12px; border-radius: 9px; background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; font-size: 13.5px; display: inline-flex; align-items: center; } #psh .psh-toast button:hover, #psh .psh-toast a:hover { background: rgba(255, 255, 255, .24); color: #fff; } /* com o carrinho aberto no telemóvel, o aviso sobe para não tapar "Finalizar compra" */ @media (max-width: 1023px) { #psh .psh-toast.is-cart { bottom: auto; top: calc(72px + env(safe-area-inset-top)); transform: translate(-50%, -16px); } #psh .psh-toast.is-cart.is-in { transform: translate(-50%, 0); } } @media (min-width: 1024px) { #psh .psh-toast.is-cart { left: auto; right: 24px; transform: translate(0, 16px); } #psh .psh-toast.is-cart.is-in { transform: none; } } /* elemento que "voa" para o carrinho */ .psh-fly { position: fixed; z-index: 100000; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; pointer-events: none; box-shadow: 0 12px 30px -10px rgba(14, 24, 56, .6); } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { #psh *, #psh *::before, #psh *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }