/* ============================================================
 * TP V4 — Header Pro (iteration 2)
 * Inline ref search no header, language dropdown w/ flags, cart button counter.
 * Layered ON TOP of components.css — overrides where needed.
 * ============================================================ */

/* ── Topbar ─────────────────────────────────────────────────── */
/* Importante: position:relative + z-index acima de .tp4-header (z 40)
 * para que o language dropdown apareça POR CIMA do header sticky. */
.tp4-topbar { line-height: 1; display: flex; align-items: center; position: relative; z-index: 50; }
.tp4-topbar__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--tp4-topbar-h); font-size: var(--tp4-fs-xs);
}
.tp4-topbar__left, .tp4-topbar__right { display: flex; align-items: center; gap: var(--tp4-s-5); }
.tp4-topbar__link {
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: rgba(255,255,255,0.78); text-decoration: none;
    transition: color var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-topbar__link:hover { color: #fff; }
.tp4-topbar__link svg { stroke-width: 1.8; opacity: 0.85; }

/* ── Language dropdown ──────────────────────────────────────── */
.tp4-lang { position: relative; }
.tp4-lang__btn {
    appearance: none; border: none; background: transparent;
    display: inline-flex; align-items: center; gap: 0.45rem;
    color: rgba(255,255,255,0.85); font-size: var(--tp4-fs-xs);
    font-weight: var(--tp4-fw-semi); cursor: pointer;
    padding: 0.3rem 0.5rem; border-radius: var(--tp4-r-md);
    transition: background var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-lang__btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.tp4-lang__btn[aria-expanded="true"] { background: rgba(255,255,255,0.1); color: #fff; }
.tp4-lang__btn svg { transition: transform var(--tp4-dur) var(--tp4-ease-out); }
.tp4-lang__btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.tp4-lang__code { letter-spacing: var(--tp4-tracking-wide); }

.tp4-lang__menu {
    position: absolute; right: 0; top: calc(100% + 12px); min-width: 220px;
    background: var(--tp4-c-white); color: var(--tp4-text);
    border-radius: var(--tp4-r-lg);
    box-shadow: 0 24px 48px -12px rgba(15, 17, 21, 0.32), 0 0 0 1px rgba(15, 17, 21, 0.05);
    list-style: none; margin: 0; padding: 0.4rem;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--tp4-dur) var(--tp4-ease-out), transform var(--tp4-dur) var(--tp4-ease-out);
    z-index: 200;
}
/* Arrow up indicador a apontar para o botão */
.tp4-lang__menu::before {
    content: ''; position: absolute; top: -6px; right: 14px;
    width: 12px; height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(15, 17, 21, 0.05);
    border-radius: 2px 0 0 0;
}
.tp4-lang.is-open .tp4-lang__menu { opacity: 1; transform: none; pointer-events: auto; }
.tp4-lang__menu li { list-style: none; }
.tp4-lang__opt {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 0.7rem; border-radius: var(--tp4-r-md);
    text-decoration: none; color: var(--tp4-text); font-size: var(--tp4-fs-sm);
}
.tp4-lang__opt:hover { background: var(--tp4-c-gray-50); }
.tp4-lang__opt .tp4-flag-svg { flex: 0 0 auto; border-radius: 3px; box-shadow: 0 0 0 1px var(--tp4-c-gray-200); }
.tp4-lang__name { flex: 1 1 auto; font-weight: var(--tp4-fw-medium); }
.tp4-lang__code-mini { color: var(--tp4-text-muted); font-weight: var(--tp4-fw-semi); letter-spacing: 0.04em; font-size: 0.7rem; }
.tp4-lang__menu li[aria-selected="true"] .tp4-lang__opt { background: var(--tp4-c-brand-soft); color: var(--tp4-c-brand); }

/* Bandeira no header (drawer mobile) */
.tp4-drawer__langs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1rem var(--tp4-s-5); border-top: 1px solid var(--tp4-border); }
.tp4-drawer__lang {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.6rem; border: 1px solid var(--tp4-border); border-radius: var(--tp4-r-pill);
    text-decoration: none; color: var(--tp4-text-soft); font-size: var(--tp4-fs-xs); font-weight: var(--tp4-fw-semi);
    transition: all var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-drawer__lang:hover, .tp4-drawer__lang.is-active {
    background: var(--tp4-c-brand-soft); color: var(--tp4-c-brand); border-color: var(--tp4-c-brand);
}

/* ── Header — Reference search inline ───────────────────────── */
.tp4-header__inner { gap: 1.5rem; }

/* Header reference search — design limpo: pill suave sem border + buttons
 * inline pequenos (ícones), sem áreas cinza que sobreponham o input.
 */
.tp4-header-ref {
    flex: 1 1 auto; max-width: 460px; position: relative;
    display: flex; align-items: center;
    background: var(--tp4-c-gray-50);
    border: 1px solid transparent;
    border-radius: var(--tp4-r-pill);
    height: 2.5rem;
    padding: 0 0.4rem 0 0.85rem;
    transition: background var(--tp4-dur) var(--tp4-ease-out), border-color var(--tp4-dur) var(--tp4-ease-out), box-shadow var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-header-ref:hover { background: var(--tp4-c-gray-100); }
.tp4-header-ref:focus-within {
    background: #fff;
    border-color: var(--tp4-c-brand);
    box-shadow: 0 0 0 3px rgba(194, 84, 27, 0.15);
}
.tp4-header-ref__icon {
    display: inline-flex; align-items: center;
    color: var(--tp4-text-muted);
    pointer-events: none;
    flex-shrink: 0;
}
.tp4-header-ref__icon svg { width: 18px !important; height: 18px !important; }
.tp4-header-ref__input {
    appearance: none; border: 0; background: transparent; outline: none;
    flex: 1 1 auto; min-width: 0;
    padding: 0 0.5rem;
    font: inherit; color: var(--tp4-text);
    font-size: var(--tp4-fs-sm);
    line-height: 1;
}
.tp4-header-ref__input::placeholder { color: var(--tp4-text-muted); }

/* Camera button — só ícone, sem border, hover suave */
.tp4-header-ref__cam,
button.tp4-header-ref__cam {
    appearance: none; -webkit-appearance: none;
    border: 0 !important; background: transparent !important;
    cursor: pointer; padding: 0;
    width: 32px; height: 32px;
    display: inline-flex !important; align-items: center; justify-content: center;
    color: var(--tp4-text-muted) !important;
    -webkit-text-fill-color: var(--tp4-text-muted) !important;
    border-radius: var(--tp4-r-pill);
    margin-right: 2px;
    transition: color var(--tp4-dur) var(--tp4-ease-out), background var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-header-ref__cam svg { width: 18px !important; height: 18px !important; }
.tp4-header-ref__cam:hover {
    color: var(--tp4-c-brand) !important; -webkit-text-fill-color: var(--tp4-c-brand) !important;
    background: rgba(194, 84, 27, 0.08) !important;
}

/* Submit "Procurar" — pill brand pequeno, alinhado vertical */
.tp4-header-ref__btn,
button.tp4-header-ref__btn {
    appearance: none; -webkit-appearance: none;
    border: 0 !important; cursor: pointer;
    background: var(--tp4-c-brand) !important;
    color: #fff !important; -webkit-text-fill-color: #fff !important;
    padding: 0 1rem; height: 2rem;
    border-radius: var(--tp4-r-pill);
    font-weight: var(--tp4-fw-semi); font-size: var(--tp4-fs-sm);
    box-shadow: 0 2px 6px rgba(194, 84, 27, 0.25);
    display: inline-flex !important; align-items: center; justify-content: center;
    transition: background var(--tp4-dur) var(--tp4-ease-out), transform var(--tp4-dur) var(--tp4-ease-out), box-shadow var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-header-ref__btn:hover { background: var(--tp4-c-brand-hover) !important; box-shadow: 0 4px 10px rgba(194, 84, 27, 0.35); }
.tp4-header-ref__btn:active { transform: scale(0.96); }

/* Suggestion dropdown */
.tp4-header-ref__suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px);
    background: #fff; border-radius: var(--tp4-r-lg);
    box-shadow: var(--tp4-shadow-lg); border: 1px solid var(--tp4-border);
    overflow: hidden; z-index: var(--tp4-z-overlay);
    animation: tp4-fade-down 200ms var(--tp4-ease-out);
}
@keyframes tp4-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tp4-header-ref__suggest-head {
    padding: 0.6rem 1rem; font-size: var(--tp4-fs-xs); color: var(--tp4-text-muted);
    background: var(--tp4-c-gray-50); border-bottom: 1px solid var(--tp4-border); font-weight: var(--tp4-fw-semi);
    letter-spacing: var(--tp4-tracking-wide); text-transform: uppercase;
}
.tp4-header-ref__suggest-list { list-style: none; padding: 0.3rem; margin: 0; max-height: 360px; overflow-y: auto; }
.tp4-header-ref__suggest-list li { list-style: none; }
.tp4-header-ref__suggest-list a {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.75rem; border-radius: var(--tp4-r-md);
    text-decoration: none; color: var(--tp4-text); font-size: var(--tp4-fs-sm);
}
.tp4-header-ref__suggest-list a:hover { background: var(--tp4-c-brand-soft); }
.tp4-ref-chip {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem; font-weight: var(--tp4-fw-bold);
    padding: 0.25rem 0.5rem; background: var(--tp4-bg-dark); color: #fff;
    border-radius: var(--tp4-r-sm); letter-spacing: 0.03em;
}
.tp4-ref-desc { flex: 1 1 auto; color: var(--tp4-text-soft); }
.tp4-ref-arrow { color: var(--tp4-text-muted); }

/* ── Cart button with counter badge ─────────────────────────── */
.tp4-cart-btn { position: relative; }
.tp4-cart-btn__count {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--tp4-c-brand); color: #fff;
    border-radius: var(--tp4-r-pill); font-size: 11px;
    font-weight: var(--tp4-fw-bold); display: flex; align-items: center; justify-content: center;
    line-height: 1; border: 2px solid #fff;
    transition: transform var(--tp4-dur) var(--tp4-ease-out);
}
.tp4-cart-btn__count[data-empty="1"] { display: none; }
.tp4-cart-btn.is-bump .tp4-cart-btn__count {
    animation: tp4-bump 380ms var(--tp4-ease-out);
}
@keyframes tp4-bump {
    0% { transform: scale(1); }
    30% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ── Header sticky shrink ──────────────────────────────────── */
.tp4-header { transition: height var(--tp4-dur) var(--tp4-ease-out), box-shadow var(--tp4-dur) var(--tp4-ease-out), backdrop-filter var(--tp4-dur); }
.tp4-header--scrolled {
    box-shadow: var(--tp4-shadow-md);
    background: rgba(255,255,255,0.95);
    backdrop-filter: saturate(140%) blur(10px);
}
.tp4-header--scrolled .tp4-header__inner { height: 3.75rem; }
.tp4-header--scrolled .tp4-logo__text { font-size: 1rem; }

/* ── Nav accent (Explorar marcas) ──────────────────────────── */
.tp4-nav__link--accent {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--tp4-c-brand);
}
.tp4-nav__link--accent:hover { color: var(--tp4-c-brand-hover); }
.tp4-nav__link--accent svg { color: var(--tp4-c-brand); }

/* SVG inside topbar (smaller flags) */
.tp4-flag-svg { flex: 0 0 auto; border-radius: 2px; vertical-align: middle; }

/* Icon buttons — header actions (bigger 48×48 hit area + 26px icons) ─────
 * Aplica-se a <a> e <button>; força reset de UA styles + plugin overrides.
 */
.tp4-header .tp4-icon-btn,
.tp4-header a.tp4-icon-btn,
.tp4-header button.tp4-icon-btn {
    position: relative;
    width: 48px; height: 48px; padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--tp4-r-pill);
    display: inline-flex !important; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--tp4-text) !important;
    -webkit-text-fill-color: var(--tp4-text) !important;
    text-decoration: none;
    transition: background var(--tp4-dur) var(--tp4-ease-out), transform var(--tp4-dur) var(--tp4-ease-out), color var(--tp4-dur) var(--tp4-ease-out);
    line-height: 0;
    -webkit-appearance: none;
    appearance: none;
}
.tp4-header .tp4-icon-btn:hover { background: var(--tp4-c-gray-100) !important; color: var(--tp4-c-brand) !important; -webkit-text-fill-color: var(--tp4-c-brand) !important; }
.tp4-header .tp4-icon-btn:active { transform: scale(0.94); }
.tp4-header .tp4-icon-btn svg,
.tp4-header .tp4-icon-btn .tp4-svg {
    color: currentColor !important;
    stroke: currentColor !important;
    width: 26px !important; height: 26px !important;
    display: block !important;
    opacity: 1 !important;
    stroke-width: 1.7 !important;
}

/* Sandwich (menu mobile) — só visível em <768px.
 * Importante: maior especificidade que `.tp4-header .tp4-icon-btn`
 * (que tem !important com display: inline-flex). Usa display: none !important.
 */
.tp4-header .tp4-mobile-menu-toggle,
.tp4-header button.tp4-mobile-menu-toggle.tp4-icon-btn {
    display: none !important;
}
@media (max-width: 767px) {
    .tp4-header .tp4-mobile-menu-toggle,
    .tp4-header button.tp4-mobile-menu-toggle.tp4-icon-btn {
        display: inline-flex !important;
    }
}
/* Mobile-search-toggle — só em mobile (em desktop temos o ref search inline) */
@media (min-width: 1024px) {
    .tp4-header .tp4-mobile-search-toggle,
    .tp4-header button.tp4-mobile-search-toggle.tp4-icon-btn {
        display: none !important;
    }
}

/* Hide ref search in tablet/mobile (becomes the mobile-search-toggle action) */
@media (max-width: 1023px) {
    .tp4-header-ref { display: none; }
    .tp4-header__inner { gap: 1rem; }
}

/* Hide secondary nav links earlier than full mobile */
@media (max-width: 1199px) {
    .tp4-hide-tablet { display: none !important; }
}

/* Header social/icon visibility */
@media (max-width: 640px) {
    .tp4-topbar__link svg { display: none; }
    .tp4-topbar__left .tp4-topbar__link:nth-child(n+2) { display: none; }
}