/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION: Configurador BG (homepage)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cp-section-configurador-bg {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    padding: 56px 0;
    margin-bottom: 40px;
}

/* Subtle overlay — background image visible, type readable */
.cp-section-configurador-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(248, 249, 250, 0.10);
    z-index: 0;
}

/* Lift all content above overlay */
.cp-section-configurador-bg .container {
    position: relative;
    z-index: 1;
}

/* Section heading and subtitle */
.cp-section-configurador-bg .cp-section-title {
    color: var(--ds-ink);
}

.cp-section-configurador-bg .cp-cat-sub {
    color: var(--ds-muted);
}

/* Left: green configurador card — restored to base green gradient, fills column */
.cp-section-configurador-bg .cp-cat-main {
    flex: 1;
    border-radius: var(--ds-radius-sm);
    box-shadow: 0 6px 28px rgba(11, 78, 57, 0.22);
}

/* Right: feature cards — crisp white with border for contrast on bg image */
.cp-section-configurador-bg .cp-configurador-feature {
    background: #fff;
    border: 1px solid var(--ds-border);
    box-shadow: 0 2px 12px rgba(25, 53, 50, 0.07);
}

/* Catalog CTA at bottom */
.cp-section-configurador-bg .cp-catalog-cta {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .cp-section-configurador-bg {
        padding: 40px 0;
    }

    .cp-section-configurador-bg .cp-cat-main {
        margin-bottom: 20px;
    }
}

/* Left block: dark text directly on bg image, no card wrapper */
.cp-section-configurador-bg .cp-cat-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(135deg, #e3e3e3 0%, transparent 100%);
    border-radius: var(--ds-radius-sm);
    padding: var(--ds-space-5);
}

.cp-section-configurador-bg .cp-cat-main-kicker {
    background: #EDBA02;
    color: #1F2937;
    border-radius: 8px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
}

.cp-section-configurador-bg .cp-cat-main-title {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 14px;
    margin-top: 0;
    line-height: 1.2;
}

.cp-section-configurador-bg .cp-cat-main-desc {
    color: #374151;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 0;
    margin-top: 0;
}

.cp-section-configurador-bg .cp-cat-main-points li {
    color: #374151;
    font-size: 1rem;
}

.cp-section-configurador-bg .cp-cat-main-points i {
    color: var(--ds-green);
}

/* "Abrir configurador" — standalone green button */
.cp-section-configurador-bg .cp-cat-main-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: var(--ds-green-deep, #0F6B4E);
    color: #fff;
    border-radius: var(--ds-radius-sm);
    font-weight: 700;
    font-size: 1rem;
    border-top: none;
    margin-top: var(--ds-space-5);
    text-decoration: none;
    transition: background 120ms;
    align-self: flex-start;
}

.cp-section-configurador-bg .cp-cat-main-link:hover {
    background: var(--ds-green-hover);
    color: #fff;
}

/* "Ver todo o catálogo" inside right column — left-aligned */
.cp-section-configurador-bg .cp-catalog-cta {
    margin-top: 4px;
    padding-top: 0;
    text-align: left;
}

/* === Configurador Hero Layout (igual ao anexo) === */
.cp-configurador-hero {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 32px rgba(25, 53, 50, 0.08);
    margin-bottom: 40px;
    padding: 0;
    overflow: hidden;
}

.cp-configurador-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.cp-configurador-hero-img {
    flex: 0 0 32%;
    min-width: 260px;
    background: #f8f9fa;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.cp-configurador-hero-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

.cp-configurador-hero-main {
    flex: 1 1 36%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 32px 48px 32px;
    min-width: 280px;
}

.cp-configurador-badge {
    display: inline-block;
    background: #ffe066;
    color: #222;
    font-weight: 700;
    font-size: 16px;
    border-radius: 16px;
    padding: 6px 18px;
    margin-bottom: 18px;
}

.cp-configurador-title {
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 18px;
    color: #222;
    line-height: 1.1;
}

.cp-configurador-desc {
    font-size: 1.18rem;
    color: #444;
    margin-bottom: 28px;
}

.cp-configurador-btn {
    display: inline-flex;
    align-items: center;
    background: #DF1D25;
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 120ms;
    border: none;
    box-shadow: 0 2px 8px rgba(223, 29, 37, 0.10);
    margin-top: 8px;
}

.cp-configurador-btn:hover {
    background: #C5191F;
    color: #fff;
}

.cp-configurador-hero-features {
    flex: 1 1 32%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 18px;
    align-content: center;
    background: #fff;
    padding: 40px 32px;
    min-width: 280px;
}

.cp-configurador-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #f8f9fa;
    border-radius: 12px;
    padding: 18px 16px;
    box-shadow: 0 2px 8px rgba(25, 53, 50, 0.04);
}

.cp-configurador-feature-icon {
    font-size: 2.1rem;
    color: #1D9E75;
    flex-shrink: 0;
    margin-top: 2px;
}

.cp-configurador-feature-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 2px;
}

.cp-configurador-feature-desc {
    font-size: 0.98rem;
    color: #444;
}

@media (max-width: 991px) {
    .cp-configurador-hero-inner {
        flex-direction: column;
    }

    .cp-configurador-hero-img,
    .cp-configurador-hero-main,
    .cp-configurador-hero-features {
        min-width: 0;
        width: 100%;
        padding: 28px 16px;
    }

    .cp-configurador-hero-main {
        padding-bottom: 0;
    }

    .cp-configurador-hero-features {
        grid-template-columns: 1fr;
        gap: 16px;
        padding-top: 0;
    }
}

/* === Configurador Premium Hero Block === */
.cp-cat-main-hero {
    display: flex;
    align-items: stretch;
    min-height: 320px;
    background: url('/assets/images/section-1.jpg') center/cover no-repeat;
    border-radius: 14px;
    box-shadow: 0 4px 32px rgba(25, 53, 50, 0.08);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: box-shadow 180ms;
    margin-bottom: 32px;
}

.cp-cat-main-bg {
    display: none;
}

.cp-cat-main-content {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    padding: 40px 32px 32px 40px;
    color: #1F2937;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    margin: 24px;
}

.cp-cat-main-kicker {
    display: inline-block;
    background: #EDBA02;
    color: #1F2937;
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    padding: 2px 12px;
    margin-bottom: 12px;
}

.cp-cat-main-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 12px;
    color: #1F2937;
    text-shadow: none;
}

.cp-cat-main-desc {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: #374151;
}

.cp-cat-main-points {
    margin-bottom: 24px;
    padding-left: 0;
    list-style: none;
}

.cp-cat-main-points li {
    font-size: 1rem;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cp-cat-main-link.btn-gold {
    display: inline-flex;
    align-items: center;
    background: #EDBA02;
    color: #1F2937;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 1rem;
    text-decoration: none;
    transition: background 120ms;
    box-shadow: 0 2px 8px rgba(237, 186, 2, 0.10);
}

.cp-cat-main-link.btn-gold:hover {
    background: #D4A502;
    color: #fff;
}

.cp-cat-main-image {
    display: none;
}

@media (min-width: 992px) {
    .cp-cat-main-content {
        padding-right: 0;
    }
}

/* ==========================================================================
   CortePlaca v5 Header — Premium Industrial
   Logo palette: #193532 (ink) · #DF1D25 (red) · #BCBDC2 (grey)
   Web accents:  #EDBA02 (gold CTA) · #1D9E75 (green — subtle accent only)
   Structure:    Info strip -> Brand bar -> Nav bar -> Quick strip (4 items)
   WCAG: AA minimum contrast on all text. Touch targets >= 44px.
   ========================================================================== */

:root {
    --cp-logo-ink: #193532;
    --cp-logo-red: #DF1D25;
    --cp-logo-red-hover: #C5191F;
    --cp-trigger-neutral: #525252;
    --cp-trigger-neutral-hover: #474747;
    --cp-cta-red-soft: #C06249;
    --cp-cta-red-soft-hover: #AE553F;
    --cp-cta-green-soft: #6E9489;
    --cp-cta-green-soft-hover: #5F857B;
    --cp-gold: #EDBA02;
    --cp-gold-hover: #D4A502;
    --cp-gold-text: #1F2937;
    --cp-right-cta-font-size: 14px;
    --cp-right-cta-letter-spacing: .01em;
    --cp-right-cta-icon-width: 16px;
    --cp-header-height-desktop: 72px;
    --cp-header-height-mobile: 56px;
    --cp-red-wash: #f8f4f4;
    --cp-red-border: #eadcdd;
}

/* ==========================================================================
   BAR 1 · Info Strip (#193532 — dark teal from logo)
   Merges old system-strip + utility-strip into one compact bar.
   ========================================================================== */

.cp-info-strip {
    background: #1f2937;
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
    line-height: 1;
}

.cp-info-strip .container {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cp-info-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.cp-info-left a {
    color: rgba(255, 255, 255, .75);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: color 150ms ease-out;
}

.cp-info-left a:hover {
    color: #fff;
}

.cp-info-left a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 2px;
}

.cp-info-left i {
    font-size: 11px;
}

.cp-info-center {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.cp-info-center i {
    font-size: 11px;
    margin-right: 2px;
}

.cp-info-sep {
    color: rgba(255, 255, 255, .35);
    font-size: 10px;
}

.cp-info-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
}

.cp-info-loc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color 150ms ease;
}

.cp-info-loc i {
    font-size: 11px;
    color: #6ee7b7;
}

.cp-info-loc:hover {
    color: #fff;
}

.cp-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .06);
    border: none;
}

.cp-trust-pill i {
    font-size: 11px;
    color: #6ee7b7;
}

/* ==========================================================================
   BAR 2 · Brand Bar (WHITE — logo large, search centered, action icons)
   ========================================================================== */

.cp-brand-bar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 2px 20px rgba(25, 53, 50, 0.05);
    margin: 0;
}

.cp-brand-bar .container {
    min-height: var(--cp-header-height-desktop);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.cp-nav-main .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.cp-info-strip .container {
    padding-left: 4px !important;
    padding-right: 0 !important;
}

/* Left section: logo */
.cp-brand-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0; /* lets the grid track shrink instead of forcing overflow */
}

/* Center section: search */
.cp-brand-center {
    min-width: 0;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: clamp(260px, 35vw, 480px);
    justify-self: center;
}

.cp-brand-center .cp-brand-search {
    width: 100%;
    min-width: 0;
    max-width: none;
}

/* Right section: icon actions */
.cp-brand-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

/* Logo — prominent, like TJ O'Mahony */
.cp-brand-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 0; /* lets the grid track shrink instead of forcing overflow */
    transition: opacity 150ms ease-out;
}

.cp-brand-logo img {
    /* Fixed width driving a fluid aspect ratio (154:74) instead of a fixed
       height: keeps the exact same rendered size as before in normal
       conditions, but lets the browser scale it down proportionally
       — never crop it — if the header ever runs out of horizontal space. */
    width: 141px;
    max-width: 100%;
    height: auto;
    display: block;
}

.cp-brand-logo:hover {
    opacity: .85;
}

.cp-brand-logo:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Search — pill, wide, green button */
.cp-brand-search {
    width: clamp(260px, 33vw, 480px);
    min-width: 220px;
    display: flex;
    align-items: stretch;
    border: 1.5px solid #dde3ec;
    border-radius: 100px;
    background: #f6f8fb;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.cp-brand-search:focus-within {
    border-color: #df1d25;
    background: #fff;
}

.cp-brand-search-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 18px;
    font-size: 14px;
    color: var(--ds-ink, #1F2937);
    outline: none;
    min-width: 0;
}

/*
 * Placeholder da pesquisa — 2026-09-08.
 *
 * Era #a8b0bc: 2.06:1 sobre o fundo em repouso (#f6f8fb) e 2.19:1 quando o campo ganha
 * foco e fica branco. A WCAG 2.2 AA exige 4.5:1 e o texto de placeholder conta como texto,
 * não como decoração — é ele que diz o que se pode procurar ali.
 *
 * #6B7280 é o `--ds-muted` que o design system já usa para texto secundário: 4.54:1 sobre
 * #f6f8fb e 4.83:1 sobre branco. Passa nos dois estados, e não introduz um cinzento novo
 * na paleta.
 */
.cp-brand-search-input::placeholder {
    color: #6B7280;
}

.cp-brand-search-btn {
    border: 0;
    background: #df1d25;
    color: #fff;
    padding: 0 18px;
    font-size: 15px;
    cursor: pointer;
    transition: background 150ms ease;
}

.cp-brand-search-btn:hover {
    background: #b8161c;
    color: #fff;
}

.cp-brand-search-btn:focus-visible {
    outline: 2px solid #df1d25;
    outline-offset: -3px;
}

/* Action icons */
.cp-brand-actions {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    gap: 2px;
    margin-right: -12px;
}

.cp-brand-actions > * {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-brand-actions .cp-account-wrap {
    flex: 0 0 auto;
    position: relative;
}

.cp-brand-actions .cp-brand-action {
    flex: 0 0 auto;
    min-width: 0;
    padding: 8px 12px;
}

.cp-brand-actions .cp-cart-price {
    display: none;
}

.cp-brand-action-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

/* ── Header CTAs — clip-path reveal (GPU composited, zero reflow) ─── */
/*
 * Technique: stack has full width but is clipped via clip-path to the
 * icon-only zone. On hover, the clip opens left revealing the label.
 * clip-path is composited — never animates width/height (perf rule).
 * Spring cubic-bezier gives natural overshoot feel.
 */
.cp-brand-cta-stack {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: absolute;
    right: var(--cp-brand-cta-right, 0px);
    top: var(--cp-brand-cta-top-offset, 0px);
    height: calc(var(--cp-brand-cta-height, 40px) * 2);
    width: 172px;
    --cta-icon-zone: calc(var(--cp-brand-cta-height, 40px) + 10px);
    /* Collapsed: reveal only the rightmost icon zone */
    clip-path: inset(0 0 0 calc(172px - var(--cta-icon-zone)));
    transition: clip-path 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: clip-path;
    z-index: 20;
}

.cp-brand-cta-stack:hover,
.cp-brand-cta-stack:focus-within {
    clip-path: inset(0);
    /* Collapse exit slightly faster (≈ 65% of enter) */
    transition: clip-path 180ms cubic-bezier(0.55, 0, 1, 0.45);
}

/* Override for hover re-enter to restore spring timing */
.cp-brand-cta-stack:hover {
    transition: clip-path 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cp-brand-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* label left · icon right */
    gap: 10px;
    height: var(--cp-brand-cta-height, 40px);
    min-height: var(--cp-brand-cta-height, 40px);
    padding: 0 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    width: 100%;
    border: 0;
    cursor: pointer;
    transition: background 160ms ease-out;
}

.cp-brand-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: -3px;
}

/* Label: fade + slide in after clip starts opening */
.cp-cta-label {
    opacity: 0;
    transform: translateX(5px);
    transition: opacity 190ms ease 110ms, transform 190ms ease 110ms;
    white-space: nowrap;
}

.cp-brand-cta-stack:hover .cp-cta-label,
.cp-brand-cta-stack:focus-within .cp-cta-label {
    opacity: 1;
    transform: translateX(0);
}

.cp-brand-cta i {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}

/* Register — brand slate blue · contrast 9.2:1 ✓ WCAG AAA */
.cp-brand-cta-tertiary {
    background: #334e68;
    color: #fff;
}

.cp-brand-cta-tertiary:hover,
.cp-brand-cta-tertiary.is-active {
    background: #263d52;
    color: #fff;
}

/* Quote CTA — brand green (deep) · contrast 6.49:1 ✓ WCAG AA */
.cp-brand-cta-secondary {
    background: var(--ds-green-deep, #0F6B4E);
    color: #fff;
}

.cp-brand-cta-secondary:hover,
.cp-brand-cta-secondary.is-active {
    background: var(--ds-green-dark, #158560);
    color: #fff;
}

/* Divider between the two stacked buttons */
.cp-brand-cta-tertiary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Reduced motion: skip animation, always show labels */
@media (prefers-reduced-motion: reduce) {
    .cp-brand-cta-stack {
        clip-path: inset(0) !important;
        transition: none !important;
        width: 172px;
    }

    .cp-cta-label {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

.cp-brand-action {
    color: #374151;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 10px;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
}

.cp-brand-action i {
    font-size: 19px;
    line-height: 1;
}

.cp-brand-action:hover {
    background: rgba(31, 41, 55, 0.06);
    color: #111827;
}

button.cp-brand-action:focus,
button.cp-brand-action:focus-visible,
a.cp-brand-action:focus,
a.cp-brand-action:focus-visible {
    outline: none;
    box-shadow: none;
}

button.cp-brand-action::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.cp-brand-action--quote {
    background: var(--ds-green-deep, #0F6B4E);
    color: #fff;
    border: 1px solid var(--ds-green, #1D9E75);
}

.cp-brand-action--quote:hover,
.cp-brand-action--quote.is-active {
    background: var(--ds-green-dark, #158560);
    color: #fff;
}

.cp-brand-action[data-track-label="assistente_corte_icon"] .cp-brand-action-icon {
    width: 19px;
    height: 19px;
}

/* Cart com preço + badge */
.cp-brand-action.is-cart {
    position: relative;
}

.cp-cart-price {
    font-weight: 700;
    font-size: 11px;
    letter-spacing: -.01em;
}

.cp-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px; /* círculo com 1 dígito, pílula com 2+ */
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    /* Badge de loja tradicional: círculo vermelho, número a branco (pedido do dono
       2026-07-10 — exceção deliberada ao acento verde da marca). */
    background: #e02424;
    border: 2px solid #fff;
    box-sizing: border-box;
    /* Visível por omissão; o header esconde-o via [hidden] quando o carrinho está
       vazio. (Antes era display:none à espera de uma classe .is-visible que nenhum
       script aplicava → o badge nunca aparecia, mesmo com a contagem certa.) */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.cp-cart-badge[hidden] {
    display: none !important;
}

.cp-cart-badge[style*="display:flex"],
.cp-cart-badge.is-visible {
    display: flex;
}

/* Hamburger (mobile only) */
.cp-hamburger {
    border: 0;
    background: transparent;
    color: var(--ds-ink, #1F2937);
    font-size: 26px;
    line-height: 1;
    padding: 4px;
    display: none;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.cp-mobile-nav-toggle {
    display: none;
}

/* ==========================================================================
   BAR 3 · Nav Bar (WHITE background — green used ONLY as subtle accent)
   RED trigger for categories · GOLD CTA for conversion
   ========================================================================== */


.cp-nav-main {
    background: #f6f8fb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #dce2e8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(15, 23, 42, .04);
}

.cp-nav-main .container {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    max-width: 100%;
}
@media (min-width: 576px)  { .cp-nav-main .container { max-width: 540px;  } }
@media (min-width: 768px)  { .cp-nav-main .container { max-width: 720px;  } }
@media (min-width: 992px)  { .cp-nav-main .container { max-width: 960px;  } }
@media (min-width: 1200px) { .cp-nav-main .container { max-width: 1140px; } }
@media (min-width: 1400px) { .cp-nav-main .container { max-width: 1320px; } }

.cp-nav-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 48px;
    width: 100%;
    flex: 1;
}

/* ── Mega-menu trigger (RED — logo accent colour) ── */

.cp-megamenu-wrap {
    position: relative;
    display: none;
}

.cp-megamenu-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    padding: 16px 20px;
    background: var(--cp-trigger-neutral);
    color: #fff;
    border: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms ease-out, box-shadow 150ms ease-out, min-width 150ms, max-width 150ms;
    min-height: 48px;
    min-width: 120px;
    max-width: none;
    box-sizing: border-box;
    /* min/max-width será ajustado por JS para alinhar com quick item */
    text-align: right;
}

#cpMegaTrigger {
    display: none !important;
}

.cp-megamenu-trigger:hover,
.cp-megamenu-trigger:focus-visible,
.cp-megamenu-trigger.is-active {
    background: var(--cp-trigger-neutral-hover);
}

.cp-megamenu-trigger:hover {
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.cp-megamenu-trigger.is-active,
.cp-megamenu-trigger[aria-expanded="true"] {
    background: var(--cp-trigger-neutral-hover);
    box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
}

.cp-megamenu-trigger:focus-visible {
    outline: 2px solid var(--cp-logo-ink);
    outline-offset: -2px;
}

.cp-mega-chevron {
    font-size: 10px;
    transition: transform 200ms ease-out;
}

.cp-megamenu-trigger[aria-expanded="true"] .cp-mega-chevron {
    transform: rotate(180deg);
}

/* ── Mega-menu panel ── */

.cp-megamenu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: clamp(820px, 84vw, 1080px);
    max-width: min(96vw, 1080px);
    background: #fff;
    border: 1px solid var(--ds-border, #E5E7EB);
    border-top: 3px solid var(--cp-logo-red);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
    z-index: 100;
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 180ms ease-out;
    max-height: min(76vh, 780px);
    overflow: auto;
}

.cp-megamenu-panel::-webkit-scrollbar {
    width: 10px;
}

.cp-megamenu-panel::-webkit-scrollbar-track {
    background: #f5f7f6;
}

.cp-megamenu-panel::-webkit-scrollbar-thumb {
    background: #c9d3cf;
    border-radius: 999px;
    border: 2px solid #f5f7f6;
}

.cp-megamenu-panel::-webkit-scrollbar-thumb:hover {
    background: #a9b8b1;
}

.cp-megamenu-panel[aria-hidden="true"] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
}

.cp-megamenu-panel[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.cp-mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 20px 16px;
    align-items: stretch;
}

.cp-mega-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid #e6eeea;
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfcfb 0%, #f5f9f7 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.cp-mega-section.is-compact .cp-mega-section-list {
    gap: 7px;
}

.cp-mega-grid .cp-mega-section:not(:last-child) {
    border-right: 1px solid #e6eeea;
}

.cp-mega-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cp-mega-section h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cp-logo-ink);
}

.cp-mega-section-meta {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: #71817a;
    letter-spacing: .02em;
}

.cp-mega-section-viewall {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe7e1;
    color: #245747;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.cp-mega-section-viewall:hover {
    background: #edf7f2;
    color: #0f6b4e;
}

.cp-mega-section-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.cp-mega-section-item {
    margin: 0;
}

.cp-mega-section-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 46px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-ink, #1F2937);
    text-decoration: none;
    line-height: 1.35;
    border-radius: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e2ebe6;
    transition: color 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

.cp-mega-section-link:hover {
    color: var(--ds-green-text, #158560);
    background: #f4faf7;
    border-color: #cfe4d7;
    transform: translateY(-1px);
}

.cp-mega-item-icon {
    font-size: 12px;
    color: #9aa7a1;
    flex-shrink: 0;
}

.cp-mega-section-link:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 1px;
    border-radius: 4px;
}

.cp-mega-inline-sub {
    list-style: none;
    margin: 7px 0 0;
    padding: 0 4px 0 8px;
    display: grid;
    gap: 4px;
}

.cp-mega-inline-sub a {
    display: block;
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ds-muted, #6B7280);
    text-decoration: none;
    line-height: 1.35;
    border-radius: 6px;
    transition: color 150ms ease-out, background 150ms ease-out, padding-left 150ms ease-out;
}

.cp-mega-inline-sub a:hover {
    color: var(--ds-green-text, #158560);
    background: #f0faf4;
    padding-left: 10px;
}

.cp-mega-inline-sub a:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 1px;
    border-radius: 4px;
}

.cp-mega-link-more {
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #cfe4d7;
    background: #f5fcf8;
    color: #0f6b4e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    width: fit-content;
}

.cp-mega-link-more:hover {
    background: #e7f8ef;
    color: #0a5d43;
}

.cp-mega-link-more:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 1px;
}

.cp-mega-list-actions {
    padding: 2px 0 10px;
}

.cp-mega-item {
    position: relative;
}

.cp-mega-item>a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink, #1F2937);
    text-decoration: none;
    transition: background 150ms ease-out, color 150ms ease-out;
    min-height: 46px;
}

.cp-mega-item>a:hover {
    background: var(--ds-green-wash, #F0FAF5);
    color: var(--ds-green-text, #158560);
}

.cp-mega-item>a:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: -2px;
}

.cp-mega-item>a i:first-child {
    font-size: 16px;
    color: var(--ds-green, #1D9E75);
    flex-shrink: 0;
}

.cp-mega-arrow {
    margin-left: auto;
    font-size: 11px;
    color: var(--ds-subtle, #9CA3AF);
    transition: transform 150ms ease-out;
}

.cp-mega-item:hover>a .cp-mega-arrow {
    transform: translateX(2px);
    color: var(--ds-green, #1D9E75);
}

/* Divider before Express */
.cp-mega-divider {
    height: 0;
    margin: 6px 18px;
    border-top: 1px solid var(--ds-border, #E5E7EB);
}

/* Express highlight row */
.cp-mega-express>a {
    background: #ECFDF3;
    font-weight: 700;
}

.cp-mega-express>a i:first-child {
    color: #1D9E75;
}

.cp-mega-express>a:hover {
    background: #D1FAE5;
    color: #0F6B4E;
}

.cp-mega-project>a {
    background: #EEF6FF;
    font-weight: 700;
}

.cp-mega-project>a i:first-child {
    color: #1D4ED8;
}

.cp-mega-project>a:hover {
    background: #DCEBFF;
    color: #1E3A8A;
}

.cp-mega-project-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #2563EB;
    color: #fff;
}

.cp-mega-express-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #0F6B4E;
    color: #fff;
}

/* Flyout subcategories */
.cp-mega-sub {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--ds-border, #E5E7EB);
    border-radius: 0 6px 6px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    z-index: 101;
}

.cp-mega-item:hover>.cp-mega-sub {
    display: block;
}

.cp-mega-sub a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ds-muted, #6B7280);
    text-decoration: none;
    transition: background 150ms ease-out, color 150ms ease-out, padding-left 150ms ease-out;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.cp-mega-sub a:hover {
    background: var(--ds-green-wash, #F0FAF5);
    color: var(--ds-green-text, #158560);
    padding-left: 22px;
}

.cp-mega-sub a:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: -2px;
}

/* ── Nav inline links (dark text on white bar) ── */

.cp-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    width: 100%;
}

.cp-nav-links li {
    position: relative;
    margin: 4px 2px;
    border-radius: 10px;
}

.cp-nav-item-has-sub::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}


.cp-nav-todas-refs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 20px 6px 16px;
    color: #0F6B4E; background: rgb(234 235 236);
    text-decoration: none;
    white-space: nowrap;
    align-self: stretch;
    min-width: 230px;
   
    transition: background .18s ease, border-color .18s ease;
    outline-offset: 3px;
}

.cp-todas-refs-icon-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(29, 158, 117, 0.1);
    border: 1px solid rgba(29, 158, 117, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #158560;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.cp-todas-refs-icon-wrap i {
    transition: transform .18s ease;
}

.cp-nav-todas-refs:hover {
    background: rgba(29, 158, 117, 0.12);
    border-left-color: #1d9e75;
    color: #10664a;
}

.cp-nav-todas-refs:hover .cp-todas-refs-icon-wrap {
    background: rgba(29, 158, 117, 0.2);
    border-color: rgba(21, 133, 96, 0.5);
}

.cp-nav-todas-refs:hover .cp-todas-refs-icon-wrap i {
    transform: translateY(-1px);
}

.cp-nav-todas-refs:hover .cp-todas-refs-arrow {
    transform: translateX(3px);
}

.cp-nav-todas-refs:focus-visible {
    outline: 2px solid #1d9e75;
    outline-offset: 2px;
}

.cp-todas-refs-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cp-todas-refs-inner span:first-child {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.cp-todas-refs-line2 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(21, 133, 96, 0.85);
}

.cp-todas-refs-arrow {
    font-size: 9px;
    transition: transform .18s ease;
}

.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 800;
    color: #1a0d00;
    background: #dddddd80;
    text-decoration: none;
    letter-spacing: .01em;
    white-space: nowrap;
    min-width: 230px;
    min-height: 48px;
    transition: background 180ms ease;
}

.cc-badge:hover {
    background: #edba02b3;
    color: #1a0d00;
}

.cc-badge:focus-visible {
    outline: 2px solid #1a0d00;
    outline-offset: -3px;
}

.cc-badge > i,
.cc-badge > svg {
    font-size: 18px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #1a0d00;
    opacity: .85;
}

.cc-badge > .cp-corte-svg {
    width: 23px;
    height: 23px;
    margin-top: -1px;
}

.cp-nav-grid > .cc-badge {
    align-self: stretch;
}

.cc-badge-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-badge-inner span:first-child {
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.cc-line2 {
    font-size: 10.5px;
    font-weight: 500;
    color: rgba(26, 13, 0, .72);
    line-height: 1.2;
}

.cc-badge--corte > i,
.cc-badge--corte > svg {
    color: #1a0d00;
    opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
    .cc-badge {
        transition: none;
    }
}

.cp-nav-links li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #0f172a;
    text-decoration: none;
    border-bottom: 0;
    border-radius: 10px;
    transition: color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
    min-height: 40px;
    position: relative;
}

.cp-nav-links li a::after {
    display: none;
}

.cp-nav-links>li:first-child>a {
    padding-left: 18px;
}

.cp-nav-links li a:hover {
    color: #b42318;
}

.cp-nav-links li a.is-active {
    color: var(--ds-green-text, #158560);
    background: #eef8f3;
    box-shadow: inset 0 0 0 1px #cde2d7;
    font-weight: 700;
}


.cp-nav-links li a.cp-nav-link-project {
    color: #1E3A8A;
    border-bottom-color: #93C5FD;
}

.cp-nav-links li a.cp-nav-link-project:hover {
    color: #1D4ED8;
    border-bottom-color: #1D4ED8;
    background: #EFF6FF;
}

.cp-nav-links li a:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: -2px;
    border-radius: 0;
}

.cp-nav-item-has-sub .cp-nav-submenu {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #dfe7e3;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms ease-out;
    z-index: 140;
}

.cp-nav-item-has-sub .cp-nav-submenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.cp-nav-item-has-sub .cp-nav-submenu a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    border-bottom: 0;
    min-height: auto;
    background: transparent;
}

.cp-nav-item-has-sub .cp-nav-submenu a:hover {
   
    color: #b42318;
}

.cp-nav-item-has-sub .cp-nav-submenu a:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 1px;
}

.cp-nav-item-has-sub .cp-nav-submenu .cp-nav-submenu-more {
    border-top: 1px solid #e8efeb;
    margin-top: 4px;
    padding-top: 10px;
    color: #0f6b4e;
    font-weight: 700;
}

.cp-nav-item-has-sub:hover .cp-nav-submenu,
.cp-nav-item-has-sub:focus-within .cp-nav-submenu,
.cp-nav-item-has-sub.is-submenu-open .cp-nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── CTA button (GOLD — high-conversion, TJ O'Mahony yellow style) ── */

.cp-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 18px;
    background: #df1d25;
    color: #fff;
    font-size: var(--cp-right-cta-font-size);
    letter-spacing: var(--cp-right-cta-letter-spacing);
    line-height: 1;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    width: var(--cp-right-cta-width, 190px);
    transition: background 150ms ease-out;
    min-height: 48px;
    border-radius: 0;
}

.cp-nav-cta:hover {
    background: #b8161c;
    color: #fff;
}

.cp-nav-cta:focus-visible {
    outline: 2px solid var(--cp-logo-ink);
    outline-offset: -2px;
}

.cp-nav-cta i {
    font-size: 15px;
}

.cp-nav-cta-secondary-desktop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    min-height: 48px;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.cp-nav-cta-secondary-desktop:hover {
    background: #DBEAFE;
    color: #1E3A8A;
}

.cp-nav-cta-secondary-desktop.is-active {
    background: #DBEAFE;
    color: #1E3A8A;
    border-color: #93C5FD;
}

.cp-nav-cta-secondary-desktop:focus-visible {
    outline: 2px solid #1D4ED8;
    outline-offset: -2px;
}

.cp-nav-cta-tertiary,
.cp-nav-cta-tertiary-desktop {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #374151;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    min-height: 46px;
    transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}

.cp-nav-cta-tertiary:hover,
.cp-nav-cta-tertiary-desktop:hover {
    background: #F9FAFB;
    color: #111827;
    border-color: #9CA3AF;
}

.cp-nav-cta-tertiary:focus-visible,
.cp-nav-cta-tertiary-desktop:focus-visible {
    outline: 2px solid #6B7280;
    outline-offset: 1px;
}

.cp-nav-cta-tertiary-desktop {
    width: auto;
    border-radius: 6px;
    min-height: 48px;
    padding: 0 16px;
}

.cp-nav-cta-tertiary-desktop.is-active {
    background: #F3F4F6;
    color: #111827;
    border-color: #9CA3AF;
}

/* ==========================================================================
   Quick Strip — 4 items evenly spaced across full width
   ========================================================================== */

.cp-quick-strip {
    background: #fff;
    border-bottom: 1px solid var(--ds-border, #E5E7EB);
}

.cp-quick-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    align-items: stretch;
}

.cp-quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ds-ink, #1F2937);
    font-size: 13px;
    transition: background 150ms ease-out, color 150ms ease-out;
    border-right: 1px solid var(--ds-border, #E5E7EB);
    min-height: 44px;
}

.cp-quick-item:last-child {
    border-right: 0;
}

.cp-quick-item:hover {
    background: #fff;
    color: var(--ds-green-text, #158560);
}

.cp-quick-item:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: -2px;
}

.cp-quick-item i {
    font-size: 24px;
    color: var(--ds-green, #1D9E75);
    flex-shrink: 0;
}

.cp-quick-item.cp-quick-item-first i {
    font-size: 26px;
}

.cp-quick-item strong {
    font-weight: 600;
    display: block;
    line-height: 1.2;
    font-size: 13px;
}

.cp-quick-item small {
    display: block;
    font-size: 11px;
    color: var(--ds-muted, #6B7280);
    font-weight: 400;
    line-height: 1.3;
}

.cp-quick-item-project {
    background: #F8FBFF;
}

.cp-quick-item-project i {
    color: #2563EB;
}

.cp-quick-item-project:hover {
    background: #EFF6FF;
    color: #1D4ED8;
}

/* ==========================================================================
   Mobile Nav (drawer overlay)
   ========================================================================== */

.cp-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .48);
    z-index: 1000;
}

.cp-mobile-nav.open {
    display: block;
}

.cp-mobile-nav-panel {
    width: min(360px, 90vw);
    height: 100%;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--ds-border, #E5E7EB);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12);
}

.cp-mobile-nav-header {
    min-height: var(--cp-header-height-mobile);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--ds-border, #E5E7EB);
}

.cp-mobile-nav-header .cp-brand-logo img {
    height: 36px;
}

.cp-mobile-nav-header .cp-hamburger {
    display: inline-flex;
    color: var(--ds-ink, #1F2937);
}

/* Mobile search inside drawer */
.cp-mobile-nav-search {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ds-border, #E5E7EB);
}

.cp-mobile-nav-search .cp-brand-search {
    max-width: none;
    margin: 0;
    display: flex;
}

/* Mobile trust bar */
.cp-mobile-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--ds-surface, #F8F9FA);
    border-bottom: 1px solid var(--ds-border, #E5E7EB);
    font-size: 11px;
    font-weight: 600;
    color: var(--ds-muted, #6B7280);
}

.cp-mobile-trust-bar i {
    color: var(--ds-green, #1D9E75);
    font-size: 12px;
}

/* Mobile nav list */
.cp-mobile-nav-list,
.cp-mobile-nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-mobile-nav-list>li>a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-surface, #F8F9FA);
    font-size: 15px;
    font-weight: 600;
    color: var(--ds-ink, #1F2937);
    text-decoration: none;
    min-height: 48px;
    transition: background 150ms ease-out, color 150ms ease-out;
}

.cp-mobile-nav-group-label {
    padding: 9px 16px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ds-muted, #6B7280);
    background: var(--ds-surface, #F8F9FA);
    border-top: 1px solid var(--ds-border, #E5E7EB);
}

.cp-mobile-nav-list>li>a:hover,
.cp-mobile-nav-list ul a:hover {
    background: var(--ds-green-wash, #F0FAF5);
    color: var(--ds-green-text, #158560);
}

.cp-mobile-nav-list ul a {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 36px;
    border-bottom: 1px solid var(--ds-surface, #F8F9FA);
    font-size: 14px;
    font-weight: 500;
    color: var(--ds-muted, #6B7280);
    text-decoration: none;
    min-height: 44px;
    transition: background 150ms ease-out, color 150ms ease-out;
}

/* Mobile express highlight */
.cp-mobile-nav-express {
    background: #FFF8E1;
}

.cp-mobile-nav-express a {
    color: #92400E !important;
    font-weight: 700 !important;
}

/* Mobile CTA */
.cp-mobile-nav-cta {
    margin: 14px;
    padding: 14px;
    display: grid;
    gap: 10px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #F8FAFC;
}

.cp-mobile-nav-cta .cp-nav-cta {
    width: 100%;
    justify-content: center;
    background: var(--cp-gold);
    color: var(--cp-gold-text);
    padding: 14px 20px;
    border-radius: 6px;
    font-weight: 800;
    min-height: 48px;
    box-shadow: 0 3px 10px rgba(237, 186, 2, .22);
}

.cp-mobile-nav-cta .cp-nav-cta:hover {
    background: var(--cp-gold-hover);
}

.cp-nav-cta-secondary {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid #BFDBFE;
    border-radius: 6px;
    background: #EFF6FF;
    color: #1D4ED8;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    min-height: 46px;
    box-shadow: 0 2px 8px rgba(29, 78, 216, .12);
}

.cp-nav-cta-secondary:hover {
    background: #DBEAFE;
    color: #1E3A8A;
}

.cp-nav-cta-tertiary {
    box-shadow: 0 2px 8px rgba(17, 24, 39, .08);
}

/* ==========================================================================
   Responsive — Mobile (< 992px)
   ========================================================================== */

@media (max-width: 991px) {

    /* Hide info strip on mobile */
    .cp-info-strip {
        display: none;
    }

    /* Brand bar compact */
    .cp-brand-bar {
        margin: 0 auto;
    }

    .cp-brand-bar .container {
        display: flex;
        min-height: var(--cp-header-height-mobile);
        gap: 12px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .cp-brand-center {
        display: none;
    }

    .cp-brand-left {
        flex-shrink: 1;
        min-width: 24px; /* never collapses to invisible, only cedes space as a last resort */
    }

    .cp-brand-right {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
    }

    .cp-brand-logo {
        flex-shrink: 1;
        min-width: 0;
    }

    .cp-brand-logo img {
        width: 75px;
        max-width: 100%;
        height: auto;
    }

    /* Search hidden on mobile — only visible on tablets (768–991) */
    .cp-brand-search {
        display: none;
    }

    /* Hide action labels on mobile */
    .cp-brand-action span {
        display: none;
    }

    .cp-brand-action {
        flex-direction: row;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    .cp-brand-actions {
        margin-left: auto;
        /* Desktop sets margin-right:-12px as an optical offset to align the
           last icon's padding with the container edge. On mobile that pulls
           the whole action group (incl. the hamburger) 12px past the
           viewport's right edge — confirmed overflow, clipped invisibly by
           body{overflow-x:hidden} but still real overflow. Reset it here. */
        margin-right: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0;
        width: auto;
    }

    .cp-brand-actions > * {
        flex: 0 0 auto;
    }

    .cp-brand-actions .cp-brand-action {
        flex: 0 0 auto;
        min-width: 44px;
        padding: 8px;
    }

    /* Hide nav bar + quick strip on mobile */
    .cp-nav-main,
    .cp-quick-strip {
        display: none !important;
    }

    /* Show hamburger */
    .cp-hamburger {
        display: inline-flex;
    }

    .cp-mobile-nav-toggle {
        display: inline-flex;
        margin-left: 2px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .cp-brand-search {
        width: clamp(180px, 20vw, 260px);
        min-width: 180px;
    }

    .cp-brand-action span {
        display: none;
    }

    .cp-brand-action {
        padding: 8px;
        min-width: 44px;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .cp-megamenu-panel {
        min-width: min(92vw, 900px);
    }

    .cp-mega-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .cp-mega-grid .cp-mega-section:not(:last-child) {
        border-right: 0;
    }

    .cp-nav-links li a {
        padding: 0 12px;
        font-size: 13px;
    }

    .cp-nav-cta {
        padding: 0 14px;
        font-size: 13px;
    }

    .cp-quick-inner {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cp-quick-item {
        padding: 12px 10px;
    }

    .cp-quick-item strong {
        font-size: 12px;
    }

    .cp-quick-item small {
        font-size: 10.5px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .cp-brand-cta-stack {
        width: 156px;
        clip-path: inset(0 0 0 calc(156px - var(--cta-icon-zone)));
    }

    .cp-brand-cta {
        font-size: 11px;
        padding: 0 11px;
    }

    .cp-nav-cta {
        font-size: 13px;
        padding: 0 12px;
    }
}

@media (min-width: 1280px) and (max-width: 1440px) {
    .cp-megamenu-panel {
        min-width: min(90vw, 980px);
    }

    .cp-nav-links li a {
        padding: 0 14px;
    }

    .cp-quick-item {
        padding: 12px 12px;
    }
}

/* Tablets (768–991) — search visible in the same row */
@media (min-width: 768px) and (max-width: 991px) {
    .cp-brand-bar .container {
        flex-wrap: nowrap;
    }

    /* .cp-brand-search is nested inside .cp-brand-center, which the
       ≤991px block above hides unconditionally — it must be re-shown
       here too, or the child's display:flex below never takes effect
       and the search bar stays invisible on tablets. */
    .cp-brand-center {
        display: flex;
    }

    .cp-brand-search {
        display: flex;
        flex: 1;
        max-width: 240px;
        margin: 0 0 0 8px;
        min-width: 140px;
    }

    .cp-brand-action--location,
    .cp-brand-action--quote {
        display: none;
    }
}

/* Small phones */
@media (max-width: 575px) {
    .cp-brand-bar .container {
        gap: 8px;
    }

    .cp-brand-logo img {
        width: 67px;
        max-width: 100%;
        height: auto;
    }

    .cp-mobile-nav-cta {
        margin: 10px;
        padding: 10px;
    }

    .cp-mobile-nav-cta .cp-nav-cta,
    .cp-mobile-nav-cta .cp-nav-cta-secondary,
    .cp-mobile-nav-cta .cp-nav-cta-tertiary {
        font-size: 13px;
        min-height: 44px;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .cp-mega-chevron,
    .cp-nav-cta,
    .cp-brand-action,
    .cp-quick-item,
    .cp-mega-sub a,
    .cp-nav-links li a,
    .cp-mega-item>a,
    .cp-mega-arrow {
        transition: none !important;
    }

    .cp-nav-cta:hover {
        transform: none;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION: CTA Stack — single button variant
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cp-brand-cta-stack--single {
    height: var(--cp-brand-cta-height, 40px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION: Account Hoverbox Dropdown
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Wrapper — keeps dropdown anchored to the trigger button */
.cp-account-wrap {
    position: relative;
}

/* Trigger inherits cp-brand-action; remove default link reset */
button.cp-account-trigger {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

/* Dropdown panel */
.cp-account-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: -8px;
    width: 300px;
    background: #fff;
    border: 1px solid rgba(25, 53, 50, 0.10);
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(25, 53, 50, 0.06),
        0 12px 40px -4px rgba(25, 53, 50, 0.16);
    z-index: 300;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition:
        opacity 190ms ease,
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: top right;
}

/* Arrow caret pointing up toward trigger */
.cp-account-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid rgba(25, 53, 50, 0.10);
    border-left: 1px solid rgba(25, 53, 50, 0.10);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

/* Aberto só por clique (JS .is-open) — 2026-09-24. Abrir por hover fechava o painel
   quando o rato ia à lista de passwords guardadas do browser, que fica fora da página. */
.cp-account-wrap.is-open .cp-account-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Exit animation */
.cp-account-wrap:not(.is-open) .cp-account-dropdown {
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

/* Fechar (✕) */
.cp-account-drop-header { padding-right: 48px; }
.cp-account-drop-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ds-muted, #6B7280);
    cursor: pointer;
    z-index: 1;
}
.cp-account-drop-close:hover { background: var(--ds-surface, #F8F9FA); color: var(--ds-ink, #1F2937); }
.cp-account-drop-close:focus-visible,
.cp-pass-toggle:focus-visible {
    outline: 2px solid var(--ds-green-deep, #0F6B4E);
    outline-offset: 2px;
}

/* Erros do login no próprio painel */
.cp-account-alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(180, 35, 24, 0.25);
    background: #FEF3F2;
    color: var(--ds-error, #B42318);
    font-size: .84rem;
    line-height: 1.4;
}
.cp-account-alert p { margin: 0 0 4px; }
.cp-account-alert p:last-child { margin-bottom: 0; }
.cp-account-alert a,
.cp-account-alert .cp-account-alert-action {
    display: inline-block;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ds-error, #B42318);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    font-size: .84rem;
}
.cp-account-alert.is-info {
    border-color: rgba(15, 107, 78, 0.25);
    background: #ECFDF3;
    color: var(--ds-green-deep, #0F6B4E);
}
.cp-account-alert.is-info a { color: var(--ds-green-deep, #0F6B4E); }
.cp-account-field-error {
    margin: 4px 0 0;
    color: var(--ds-error, #B42318);
    font-size: .8rem;
}
.cp-account-field input[aria-invalid="true"] {
    border-color: var(--ds-error, #B42318) !important;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}
.cp-account-drop-submit[disabled] { opacity: .75; cursor: progress; }

/* ── Header section ─────────────────────────────────────────────── */
.cp-account-drop-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(25, 53, 50, 0.07);
}

.cp-account-drop-header--auth {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Avatar circle (logged-in state) */
.cp-account-drop-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #334e68;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.cp-account-drop-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: #193532;
    margin: 0 0 3px;
    line-height: 1.2;
}

.cp-account-drop-email {
    font-size: 0.76rem;
    color: #6b7280;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Guest state header text */
.cp-account-drop-welcome {
    font-weight: 700;
    font-size: 1rem;
    color: #193532;
    margin: 0 0 4px;
    line-height: 1.2;
}

.cp-account-drop-sub {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

/* ── Navigation links (logged-in state) ────────────────────────── */
.cp-account-drop-nav {
    padding: 8px 0 4px;
}

.cp-account-drop-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.cp-account-drop-link i {
    font-size: 1rem;
    color: #9ca3af;
    width: 18px;
    flex-shrink: 0;
    transition: color 120ms ease;
}

.cp-account-drop-link:hover {
    background: #f0f4f8;
    color: #334e68;
}

.cp-account-drop-link:hover i {
    color: #334e68;
}

.cp-account-drop-logout {
    margin-top: 4px;
    border-top: 1px solid rgba(25, 53, 50, 0.07);
}

.cp-account-drop-logout:hover {
    color: #c46a1a;
}

.cp-account-drop-logout:hover i {
    color: #c46a1a;
}

/* ── Login form (guest state) ──────────────────────────────────── */
.cp-account-drop-form {
    padding: 16px 20px 18px;
}

.cp-account-field {
    margin-bottom: 12px;
}

.cp-account-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cp-account-field input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #111827;
    background: #f9fafb;
    outline: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

.cp-account-field input:focus {
    border-color: #334e68;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(51, 78, 104, 0.12);
}

.cp-account-pass-wrap {
    position: relative;
}

.cp-account-pass-wrap input {
    padding-right: 44px;
}

.cp-pass-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 0.9rem;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 120ms ease;
    line-height: 1;
}

.cp-pass-toggle:hover {
    color: #334e68;
}

/* Submit button */
.cp-account-drop-submit {
    width: 100%;
    height: 42px;
    background: var(--ds-green-deep, #0F6B4E);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 150ms ease;
    margin-bottom: 13px;
    letter-spacing: 0.02em;
}

.cp-account-drop-submit:hover {
    background: var(--ds-green-dark, #158560);
}

.cp-account-drop-submit:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 2px;
}

/* Footer links */
.cp-account-drop-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.76rem;
    color: #9ca3af;
    line-height: 1;
}

.cp-account-drop-footer span {
    opacity: 0.5;
}

.cp-account-drop-footer a {
    color: #334e68;
    text-decoration: none;
    font-weight: 600;
}

.cp-account-drop-footer a:hover {
    text-decoration: underline;
}

/* Criar conta — ação secundária com peso próprio (2026-09-23): era um link de 12 px ao
   lado do "Esqueceu-se da palavra-passe?". Contorno verde, sem competir com o botão
   cheio de "Iniciar sessão", que continua a ser a ação principal do painel. */
.cp-account-drop-register {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--ds-border, #E5E7EB);
    background: var(--ds-green-wash, #F0FAF5);
    border-radius: 0 0 14px 14px;
    text-align: center;
}

.cp-account-drop-register-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ds-ink, #1F2937);
    margin: 0 0 10px;
    line-height: 1.2;
}

.cp-account-drop-register-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--ds-green-deep, #0F6B4E);
    border-radius: 8px;
    background: var(--ds-bg, #FFFFFF);
    color: var(--ds-green-deep, #0F6B4E);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}

.cp-account-drop-register-btn:hover {
    background: var(--ds-green-deep, #0F6B4E);
    color: var(--ds-bg, #FFFFFF);
}

.cp-account-drop-register-btn:focus-visible {
    outline: 2px solid var(--ds-green, #1D9E75);
    outline-offset: 2px;
}

.cp-account-drop-register-hint {
    font-size: 0.74rem;
    color: var(--ds-muted, #6B7280);
    margin: 8px 0 0;
    line-height: 1.3;
}

/* ── Mobile: disable CSS hover, rely on JS .is-open only ──────── */
@media (max-width: 991px) {
    .cp-account-dropdown {
        right: -4px;
        width: 280px;
    }

}

/* Telemóvel: painel com a largura do ecrã, sem sair pela esquerda */
@media (max-width: 575px) {
    .cp-account-dropdown {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: calc(100dvh - 76px);
        overflow-y: auto;
    }
    .cp-account-dropdown::before { display: none; }
    .cp-account-field input { font-size: 16px; } /* evita o zoom automático do iOS */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cp-account-dropdown {
        transition: opacity 100ms ease !important;
        transform: none !important;
    }
}

.cp-floating-actions {
    right: -2px;
}

/* ── Mini-carrinho (dropdown do ícone do carrinho) — 2026-07-10 ───────────── */
.cp-cart-wrap { position: relative; }
.cp-cart-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1060;
    width: 340px; max-width: 92vw; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; box-shadow: 0 12px 34px rgba(15,23,42,.16); padding: 14px 16px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    /* O fecho tem um atraso de 0.25s (hover-intent): atravessar o gap ícone→dropdown
       deixava de haver :hover por instantes e o dropdown fechava antes de lá chegar. */
    transition: opacity .15s ease .25s, transform .15s ease .25s, visibility 0s linear .4s;
}
/* Ponte invisível sobre o gap de 8px — o rato nunca sai de um descendente do
   .cp-cart-wrap ao arrastar do ícone para dentro do dropdown. */
.cp-cart-dropdown::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}
.cp-cart-wrap:hover .cp-cart-dropdown,
.cp-cart-wrap:focus-within .cp-cart-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s; /* abre sem atraso */
}
.cp-cart-dropdown h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .5px; }
.cp-mc-list { max-height: 320px; overflow-y: auto; }
.cp-mc-line { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; font-size: 13px; }
.cp-mc-name { flex: 1 1 auto; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mc-meta { color: #6b7280; font-size: 11px; white-space: nowrap; }
.cp-mc-price { font-weight: 700; color: #1f2937; white-space: nowrap; }
.cp-mc-empty { color: #6b7280; font-size: 13px; padding: 14px 0; text-align: center; }
.cp-mc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 14px; }
.cp-mc-total { font-weight: 800; color: #1f2937; }
.cp-mc-actions { display: flex; gap: 8px; margin-top: 12px; }
.cp-mc-btn { flex: 1 1 0; text-align: center; padding: 9px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; }
.cp-mc-btn--ghost { border: 1px solid #d1d5db; color: #374151; background: #fff; }
.cp-mc-btn--primary { background: #0F6B4E; color: #fff; border: 1px solid #1D9E75; }
@media (max-width: 991px) { .cp-cart-dropdown { display: none; } }