/* TP V4 — reusable components */

/* ── Buttons ─────────────────────────────────────────────────── */
.tp4-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tp4-s-2);
    min-height: 2.75rem;            /* 44 a11y */
    padding: 0 var(--tp4-s-5);
    border-radius: var(--tp4-r-md);
    border: 1px solid transparent;
    font-weight: var(--tp4-fw-semi);
    font-size: var(--tp4-fs-sm);
    letter-spacing: var(--tp4-tracking-wide);
    cursor: pointer;
    transition: background var(--tp4-dur) var(--tp4-ease), color var(--tp4-dur) var(--tp4-ease), transform var(--tp4-dur) var(--tp4-ease), box-shadow var(--tp4-dur) var(--tp4-ease);
    text-decoration: none;
    white-space: nowrap;
}
.tp4-btn:focus-visible { outline: 2px solid var(--tp4-c-brand); outline-offset: 2px; }
.tp4-btn:active { transform: translateY(1px); }
.tp4-btn--lg { min-height: 3.25rem; padding: 0 var(--tp4-s-6); font-size: var(--tp4-fs-base); }
.tp4-btn--primary { background: var(--tp4-c-brand); color: var(--tp4-c-brand-ink); }
.tp4-btn--primary:hover { background: var(--tp4-c-brand-hover); color: var(--tp4-c-brand-ink); }
/* 2026-09-13 (ponto 1) — quando o .tp4-btn--primary é um <button>/<input>, o
   tema Ignavo ganhava por especificidade (base.css `button:not(.style-none)`
   = 0,1,1 contra 0,1,0) e o botão saía CINZENTO («Pesquisar», «Procurar
   peças», «Calcular», «+ Adicionar outra peça»). 0,2,1 + !important resolve
   sem tocar no tema. */
.tp4-body button.tp4-btn--primary,
.tp4-body input[type="submit"].tp4-btn--primary {
    background: var(--tp4-c-brand) !important;
    color: var(--tp4-c-brand-ink) !important;
    -webkit-text-fill-color: var(--tp4-c-brand-ink) !important;
    border-color: transparent !important;
}
.tp4-body button.tp4-btn--primary:hover,
.tp4-body input[type="submit"].tp4-btn--primary:hover {
    background: var(--tp4-c-brand-hover) !important;
    color: var(--tp4-c-brand-ink) !important;
}
.tp4-btn--ghost { background: transparent; color: var(--tp4-text); border-color: var(--tp4-border-strong); }
.tp4-btn--ghost:hover { background: var(--tp4-c-gray-100); color: var(--tp4-text); }
.tp4-btn--inverse { background: var(--tp4-c-white); color: var(--tp4-c-gray-800); }
.tp4-btn--inverse:hover { background: var(--tp4-c-gray-100); }

/* ── Icon button ─────────────────────────────────────────────── */
.tp4-icon-btn {
    width: 2.75rem; height: 2.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--tp4-r-md);
    color: inherit;
    transition: background var(--tp4-dur) var(--tp4-ease);
}
.tp4-icon-btn:hover { background: var(--tp4-c-gray-100); }
.tp4-icon { font-size: var(--tp4-fs-lg); display: inline-flex; align-items: center; }

/* ── Topbar ──────────────────────────────────────────────────── */
.tp4-topbar {
    background: var(--tp4-c-gray-900);
    color: var(--tp4-c-gray-100);
    font-size: var(--tp4-fs-xs);
    height: var(--tp4-topbar-h);
    position: relative;
    z-index: var(--tp4-z-topbar);
}
.tp4-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--tp4-s-4);
}
.tp4-topbar__left, .tp4-topbar__right {
    display: flex; align-items: center; gap: var(--tp4-s-5);
}
.tp4-topbar__link {
    color: inherit;
    display: inline-flex; align-items: center; gap: var(--tp4-s-1);
    opacity: 0.85;
}
.tp4-topbar__link:hover { opacity: 1; color: var(--tp4-c-white); }
.tp4-topbar .tp4-icon { font-size: var(--tp4-fs-xs); }
.tp4-lang-switcher ul { display: flex; gap: var(--tp4-s-2); }
.tp4-lang-switcher a, .tp4-lang-switcher li { color: inherit; }

/* ── Header ──────────────────────────────────────────────────── */
.tp4-header {
    position: sticky; top: 0;
    background: var(--tp4-c-white);
    border-bottom: 1px solid var(--tp4-border);
    z-index: var(--tp4-z-header);
    transition: box-shadow var(--tp4-dur) var(--tp4-ease);
}
.tp4-header.tp4-header--scrolled { box-shadow: var(--tp4-shadow-sm); }
.tp4-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--tp4-header-h);
    gap: var(--tp4-s-6);
}
.tp4-header__actions { display: flex; align-items: center; gap: var(--tp4-s-1); }

/* ── Logo ────────────────────────────────────────────────────── */
.tp4-logo {
    display: inline-flex; align-items: center; gap: var(--tp4-s-3);
    color: var(--tp4-c-gray-900);
    font-family: var(--tp4-font-display);
    font-weight: var(--tp4-fw-bold);
    font-size: var(--tp4-fs-lg);
    letter-spacing: var(--tp4-tracking-tight);
}
.tp4-logo:hover { color: var(--tp4-c-brand); }
.tp4-logo__mark {
    width: 2rem; height: 2rem;
    background: linear-gradient(135deg, var(--tp4-c-brand) 0%, var(--tp4-c-accent) 100%);
    border-radius: var(--tp4-r-md);
    position: relative;
    flex-shrink: 0;
}
.tp4-logo__mark::after {
    content: ''; position: absolute; inset: 6px;
    border: 2px solid var(--tp4-c-white); border-radius: 4px;
    border-bottom-right-radius: 50%;
}
.tp4-logo__mark--light { background: linear-gradient(135deg, var(--tp4-c-brand) 0%, var(--tp4-c-accent) 100%); }

/* Logo IMAGE — usado quando há logo real configurado pela loja */
.tp4-logo--image { gap: 0; }
.tp4-logo__img {
    /* 2026-08-21 — o header tem altura fixa 4.5rem (72px). O logo tratado
       (PNG transparente, autocropado) enche o espaço, por isso a 96px transbordava
       o header (antes o JPEG de fundo branco escondia o overflow). Limitado a 60px
       p/ caber com folga dentro dos 72px (centrado verticalmente).
       2026-09-12 (ponto 5) — a altura passa a option por loja: o asset-loader
       emite --tp4-logo-h (TP4_Store::logoHeightPx(), clamp 32..72). Sem option
       o fallback é 60/52/46 px — exactamente os valores de hoje. */
    max-height: var(--tp4-logo-h, 60px); width: auto; max-width: 300px; display: block;
    object-fit: contain;
    transition: max-height var(--tp4-dur) var(--tp4-ease-out), opacity var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-logo--image:hover .tp4-logo__img { opacity: 0.85; }
.tp4-header--scrolled .tp4-logo__img { max-height: calc(var(--tp4-logo-h, 60px) * 0.87); }  /* 52 @60 */
@media (max-width: 767px) { .tp4-logo__img { max-height: calc(var(--tp4-logo-h, 60px) * 0.77); max-width: 180px; } }  /* 46 @60 */

/* ── Nav ─────────────────────────────────────────────────────── */
.tp4-nav__list { display: flex; gap: var(--tp4-s-2); }
.tp4-nav__link {
    display: inline-flex; align-items: center; gap: var(--tp4-s-1);
    padding: var(--tp4-s-2) var(--tp4-s-3);
    font-size: var(--tp4-fs-sm);
    font-weight: var(--tp4-fw-medium);
    color: var(--tp4-c-gray-700);
    border-radius: var(--tp4-r-md);
}
.tp4-nav__link:hover { color: var(--tp4-c-brand); background: var(--tp4-c-gray-50); }
/* 2026-09-13 (ponto 14) — «botão Peças com mais ênfase»: chip suave da marca.
   Um 2.º botão cheio ao lado do «Procurar» do header seria ruído; o chip
   distingue-se dos restantes links sem competir com o CTA de pesquisa. */
.tp4-nav__link--cta {
    background: var(--tp4-c-brand-soft);
    color: var(--tp4-c-brand);
    font-weight: var(--tp4-fw-semi);
    border: 1px solid rgba(var(--tp4-c-brand-rgb), 0.28);
    border-radius: var(--tp4-r-pill);
    padding: 0.35rem 0.85rem;
}
.tp4-nav__link--cta svg { flex-shrink: 0; }
.tp4-nav__link--cta:hover,
.tp4-nav__link--cta:focus-visible {
    background: var(--tp4-c-brand);
    color: var(--tp4-c-brand-ink);
    border-color: var(--tp4-c-brand);
}
.tp4-chev { font-size: var(--tp4-fs-xs); opacity: 0.6; transition: transform var(--tp4-dur) var(--tp4-ease); }
.tp4-nav__link:hover .tp4-chev { transform: rotate(180deg); }

/* ── Drawer (mobile menu) ────────────────────────────────────── */
.tp4-drawer {
    position: fixed; inset: 0 0 auto 0;
    background: var(--tp4-c-white);
    transform: translateY(-100%);
    transition: transform var(--tp4-dur-slow) var(--tp4-ease-out), visibility 0s linear var(--tp4-dur-slow);
    visibility: hidden;
    z-index: var(--tp4-z-drawer);
    padding: var(--tp4-s-5);
    max-height: 100vh;
    overflow-y: auto;
}
.tp4-drawer.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--tp4-dur-slow) var(--tp4-ease-out), visibility 0s linear 0s;
}
.tp4-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-block-end: var(--tp4-s-6);
}
.tp4-drawer__title { font-family: var(--tp4-font-display); font-weight: var(--tp4-fw-bold); font-size: var(--tp4-fs-xl); }
.tp4-drawer__close { font-size: 1.75rem; line-height: 1; padding: var(--tp4-s-2); }
.tp4-drawer__nav { display: flex; flex-direction: column; gap: var(--tp4-s-1); }
.tp4-drawer__link {
    padding: var(--tp4-s-4) var(--tp4-s-3);
    font-size: var(--tp4-fs-lg);
    font-weight: var(--tp4-fw-medium);
    border-radius: var(--tp4-r-md);
    border-bottom: 1px solid var(--tp4-border);
}
.tp4-drawer__link:hover { background: var(--tp4-c-gray-50); color: var(--tp4-c-brand); }
/* 2026-09-13 (ponto 14) — equivalente do chip «Peças» no drawer (mobile). */
.tp4-drawer__link--cta {
    display: inline-flex; align-items: center; gap: var(--tp4-s-2);
    background: var(--tp4-c-brand-soft);
    color: var(--tp4-c-brand);
    font-weight: var(--tp4-fw-semi);
    border: 1px solid rgba(var(--tp4-c-brand-rgb), 0.28);
    border-bottom-color: rgba(var(--tp4-c-brand-rgb), 0.28);
    border-radius: var(--tp4-r-pill);
}
.tp4-drawer__link--cta svg { flex-shrink: 0; }
.tp4-drawer__link--cta:hover,
.tp4-drawer__link--cta:focus-visible {
    background: var(--tp4-c-brand);
    color: var(--tp4-c-brand-ink);
    border-color: var(--tp4-c-brand);
}
.tp4-drawer__link--alt { margin-block-start: var(--tp4-s-4); background: var(--tp4-c-gray-100); border-bottom: 0; }

/* ── Card primitive ──────────────────────────────────────────── */
.tp4-card {
    background: var(--tp4-c-white);
    border: 1px solid var(--tp4-border);
    border-radius: var(--tp4-r-lg);
    padding: var(--tp4-s-6);
    transition: border-color var(--tp4-dur) var(--tp4-ease), box-shadow var(--tp4-dur) var(--tp4-ease), transform var(--tp4-dur) var(--tp4-ease);
}
.tp4-card:hover { border-color: var(--tp4-border-strong); box-shadow: var(--tp4-shadow); }