/* 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); }
.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 {
    max-height: 58px; width: auto; max-width: 220px; 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: 46px; }
@media (max-width: 767px) { .tp4-logo__img { max-height: 46px; max-width: 160px; } }

/* ── 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); }
.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); }
.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); }