/* ============================================================
   CC+ RETAIL CONNECTION — DESIGN OVERRIDE  (v2: marketing palette)
   Navy / red / blue on white, bold sans (Source Sans 3 → system).
   Token NAMES are unchanged so every page re-skins at once.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800;900&display=swap');

/* ── Design tokens ── */
:root {
    /* corporate palette */
    --cc-navy: #061F3C;
    --cc-navy-action: #2D3C59;
    --cc-blue: #426DA9;
    --cc-red: #D2232A;
    --cc-gray: #F5F6F8;
    /* legacy token names → new values (used by every view) */
    --cc-ink: var(--cc-navy); /* headings, body text, primary buttons */
    --cc-muted: #5b6676; /* secondary text (AA on white) */
    --cc-paper: #ffffff; /* page background */
    --cc-paper-deep: var(--cc-gray); /* panels, hover fills */
    --cc-white: #ffffff;
    --cc-accent: var(--cc-red); /* eyebrows, sale, hover accents */
    --cc-accent-dark: #a81b21;
    --cc-sage: var(--cc-blue); /* was green; now the "Deals" blue */
    --cc-line: #dde1e7;
    --cc-cream: var(--cc-gray); /* catalog hero gradient start */
    /* type: the "serif" token now resolves to the display sans so old views lose the serif without edits */
    --cc-sans: "Source Sans 3", "Source Sans Pro", "Segoe UI", Arial, Helvetica, sans-serif;
    --cc-serif: var(--cc-sans);
}

/* ── Base ── */
body {
    background: var(--cc-paper);
    color: var(--cc-ink);
    font-family: var(--cc-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .brand-title {
    font-family: var(--cc-sans) !important;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* ============================================================
   ANNOUNCEMENT BAR  ("YOUR IN-STORE SHOWROOM")
   ============================================================ */
.cc-announcement {
    align-items: center;
    background: var(--cc-navy);
    color: #ffffff;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .16em;
    min-height: 34px;
    padding: 7px 20px;
    text-transform: uppercase;
    gap: 12px;
}

.cc-announcement-sep {
    color: rgba(255,255,255,.45);
    font-weight: 400;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
    background: #ffffff !important;
    color: var(--cc-ink) !important;
    border-bottom: 1px solid var(--cc-line);
    padding: 0 !important;
    min-height: 94px;
}

    .topbar .container-fluid {
        min-height: 94px;
        align-items: center;
        padding-left: 24px;
        padding-right: 24px;
    }

/* ── Brand ── */
.brand {
    color: var(--cc-ink) !important;
    flex-shrink: 0;
    text-decoration: none !important;
}

.brand-title {
    color: var(--cc-ink) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    line-height: .9;
}

.brand-logo {
    height: 44px;
    background: transparent !important;
    padding: 0 !important;
}

.brand:focus-visible {
    outline: 3px solid var(--cc-ink) !important;
    outline-offset: 4px;
}

/* ── Search box (rounded, light gray) ── */
.topbar .form-control {
    background: var(--cc-gray);
    border: 1px solid var(--cc-line);
    border-right: 0;
    border-radius: 999px 0 0 999px !important;
    color: var(--cc-ink);
    font-size: 14px;
    min-height: 48px;
    padding-left: 18px;
    width: 280px;
}

    .topbar .form-control:focus {
        box-shadow: 0 0 0 3px rgba(66,109,169,.25) !important;
        border-color: var(--cc-blue) !important;
        background: #fff;
        outline: none;
    }

.topbar .btn-danger {
    background: var(--cc-gray) !important;
    border: 1px solid var(--cc-line) !important;
    border-left: 0 !important;
    border-radius: 0 999px 999px 0 !important;
    color: var(--cc-navy) !important;
    font-size: 13px;
    font-weight: 700;
    min-height: 48px;
    padding: 0 16px;
}

    .topbar .btn-danger:hover {
        background: var(--cc-navy) !important;
        border-color: var(--cc-navy) !important;
        color: #fff !important;
    }

    .topbar .btn-danger:focus-visible {
        outline: 3px solid var(--cc-ink) !important;
        outline-offset: 3px;
        box-shadow: none !important;
    }

/* ── Help me choose ── */
.btn-help-choose {
    align-items: center;
    background: var(--cc-navy-action);
    border: none;
    border-radius: 6px;
    color: white !important;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    text-decoration: none !important;
    white-space: nowrap;
}

    .btn-help-choose:hover {
        background: var(--cc-navy);
        color: white !important;
    }

    .btn-help-choose:focus-visible {
        outline: 3px solid var(--cc-ink) !important;
        outline-offset: 3px;
    }

/* ── Cart button ("My Selections") ── */
.cart-btn {
    align-items: center;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--cc-navy) !important;
    display: inline-flex !important;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    text-decoration: none !important;
    white-space: nowrap;
}

    .cart-btn .bi {
        font-size: 20px;
    }

    .cart-btn:hover {
        background: var(--cc-gray) !important;
        border-color: var(--cc-line) !important;
        color: var(--cc-navy) !important;
    }

    .cart-btn:focus-visible {
        outline: 3px solid var(--cc-ink) !important;
        outline-offset: 3px;
        box-shadow: none !important;
    }

/* ============================================================
   CATBAR INLINE — nav on same row as logo
   ============================================================ */
.catbar-inline {
    align-items: stretch;
    align-self: stretch;
    display: flex;
    flex-shrink: 0;
    margin-left: 2rem;
}

    .catbar-inline .catbar-list {
        align-items: stretch;
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .catbar-inline .catbar-list li {
            align-items: stretch;
            display: flex;
            list-style: none !important;
        }

            .catbar-inline .catbar-list li::before {
                content: none !important;
                display: none !important;
            }

    .catbar-inline .catbar-link {
        align-items: center;
        border-bottom: 3px solid transparent;
        color: var(--cc-navy) !important;
        display: inline-flex !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        min-height: 94px;
        padding: 0 14px !important;
        text-decoration: none !important;
        transition: border-color .15s ease, color .15s ease;
        white-space: nowrap;
    }

        .catbar-inline .catbar-link:hover,
        .catbar-inline .catbar-link:focus,
        .catbar-inline .catbar-link.is-active {
            background: transparent !important;
            border-bottom-color: var(--cc-red);
            color: var(--cc-red) !important;
        }

        .catbar-inline .catbar-link:focus-visible {
            outline: 3px solid var(--cc-ink) !important;
            outline-offset: -3px;
        }

        .catbar-inline .catbar-link.dropdown-toggle::after {
            border-top-color: currentColor;
            opacity: .5;
        }

        /* Deals = blue, Sale = red (nav words only) */
        .catbar-inline .catbar-link.catbar-link-deals,
        .catbar-inline .catbar-link.catbar-link-deals:visited {
            color: var(--cc-blue) !important;
        }

            .catbar-inline .catbar-link.catbar-link-deals:hover,
            .catbar-inline .catbar-link.catbar-link-deals:focus {
                border-bottom-color: var(--cc-blue);
                color: var(--cc-blue) !important;
            }

        .catbar-inline .catbar-link.catbar-link-promo,
        .catbar-inline .catbar-link.catbar-link-promo:visited,
        .catbar-inline .catbar-link.catbar-link-sale,
        .catbar-inline .catbar-link.catbar-link-sale:visited {
            color: var(--cc-red) !important;
        }

/* Hide old separate catbar row */
.catbar {
    display: none !important;
}

/* ============================================================
   DROPDOWN MENU
   ============================================================ */
.dropdown-menu-thumb {
    background: #ffffff;
    border: 1px solid var(--cc-line) !important;
    border-radius: 8px !important;
    box-shadow: 0 16px 40px rgba(6,31,60,.14) !important;
    padding: 8px !important;
    width: 320px;
}

.thumb-item {
    border-radius: 6px !important;
    color: var(--cc-navy) !important;
    display: flex !important;
    align-items: center;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 12px;
    min-height: 44px;
    padding: 8px 12px !important;
}

    .thumb-item:hover,
    .thumb-item:focus,
    .thumb-item.is-active {
        background: var(--cc-gray) !important;
        color: var(--cc-red) !important;
    }

    .thumb-item:focus-visible {
        outline: 3px solid var(--cc-ink) !important;
        outline-offset: -2px;
    }

.thumb {
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid var(--cc-line) !important;
    border-radius: 6px !important;
    display: block;
    flex: 0 0 44px !important;
    height: 44px !important;
    width: 44px !important;
}

.thumb-text {
    color: inherit;
    line-height: 1.3;
}

/* ============================================================
   SKIP LINK
   ============================================================ */
.skip-link {
    background: var(--cc-navy) !important;
    border: 2px solid white !important;
    border-radius: 0 !important;
    color: white !important;
    font-size: 13px;
    font-weight: 700;
    left: 1rem !important;
    padding: .5rem .75rem;
    position: fixed !important;
    text-decoration: none;
    top: -100px !important;
    transform: none !important;
    transition: top .15s ease !important;
    z-index: 9999 !important;
}

    .skip-link:focus {
        top: 1rem !important;
        color: white !important;
        transform: none !important;
    }

/* ============================================================
   GLOBAL FOCUS — WCAG AA
   ============================================================ */
:focus-visible {
    outline: 3px solid var(--cc-ink) !important;
    outline-offset: 3px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--cc-navy) !important;
    border-top: none !important;
}

.footer-link {
    color: rgba(255,255,255,.7) !important;
    font-size: .85rem !important;
    letter-spacing: .08em;
}

    .footer-link:hover,
    .footer-link:focus-visible {
        color: white !important;
    }

/* ============================================================
   SEARCH SUGGESTIONS
   ============================================================ */
.search-suggestions {
    background: white;
    border: 1px solid var(--cc-line);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(6,31,60,.18);
    left: 0;
    max-height: min(480px, 55dvh);
    overflow: hidden auto;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
}

.search-suggestion-item {
    align-items: center;
    border-top: 1px solid var(--cc-line);
    color: var(--cc-ink) !important;
    cursor: pointer;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 14px;
    text-decoration: none !important;
}

    .search-suggestion-item:first-child {
        border-top: none;
    }

    .search-suggestion-item:hover,
    .search-suggestion-item.active {
        background: var(--cc-gray);
    }

.search-suggestion-empty {
    color: var(--cc-muted);
    font-size: 13px;
    padding: 16px 14px;
    text-align: center;
}

/* ============================================================
   SHARED BADGES  (used by Home tiles + product cards)
   ============================================================ */
.cc-badge {
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    padding: 6px 10px;
    text-transform: uppercase;
}

.cc-badge-red {
    background: var(--cc-red);
}

.cc-badge-blue {
    background: var(--cc-blue);
}

.cc-badge-navy {
    background: var(--cc-navy);
}

/* ============================================================
   RESPONSIVE — TABLET (≤991px)
   ============================================================ */
@media (max-width: 991.98px) {
    .topbar .container-fluid {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        min-height: auto;
        padding: 10px 16px;
    }

    .brand {
        order: 1;
    }

    .cart-btn {
        order: 2;
        margin-left: auto;
    }

    .search-form {
        order: 3;
        width: 100%;
        flex: 0 0 100%;
    }

    .topbar .form-control {
        width: 100%;
        flex: 1;
    }

    .catbar-inline {
        order: 4;
        width: 100%;
        flex: 0 0 100%;
        margin-left: 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-top: 1px solid var(--cc-line);
    }

        .catbar-inline .catbar-link {
            min-height: 52px !important;
        }

    .btn-help-choose {
        display: none !important;
    }

    .flex-grow-1 {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤575px)
   ============================================================ */
@media (max-width: 575.98px) {
    .brand-title {
        font-size: .95rem !important;
    }

    .topbar .form-control {
        font-size: 16px;
    }

    .cc-announcement {
        font-size: 10px;
        gap: 8px;
        padding: 6px 12px;
    }
}