/* New header (2026-11-04, live on all pages since 2026-11-06): logo/cart bar (.cdMast) + menu bar (.cdNav).
   Markup: includes/header-new.php. Loaded by includes/javacss.php.
   Matches the new search area: Roboto, #232323, accent #1fbbe7, 6-8px radii, small uppercase labels. */

/* ---- Logo / cart bar with background image ---- */
.cdMast {
    /* Background: store photo; the client likes its blurry feel, keeping it for now (2026-11-06).
       For a replacement: ~2400x500 or wider, landscape, nothing important in the middle band (text sits on top).
       The gradient keeps the logo/text readable on any photo. */
    --cd-mast-bg: url(../images/record-display-wall-from-side.jpg);
    position: relative;
    background:
        linear-gradient(90deg, rgba(14,14,14,.88) 0%, rgba(14,14,14,.72) 50%, rgba(14,14,14,.86) 100%),
        var(--cd-mast-bg) center 35% / cover no-repeat,
        #232323;
    color: #fff;
    font-family: var(--main-font, 'Roboto', sans-serif);
    border-bottom: 3px solid #1fbbe7;
}
.cdMastInner {
    max-width: var(--con-width, 1600px);
    margin: 0 auto;
    padding: 22px 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
    min-height: 150px;
    box-sizing: border-box;
}

/* logo + tagline */
.cdMastBrand { text-align: center; }
.cdMastBrand img { display: block; width: 260px; max-width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* cart + wishlist (class names kept for store.js) */
.cdMast .cart-sec {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    max-width: none;
    margin: 0;
}
.cdMast .cart-sec .wishlist,
.cdMast .cart-sec .cart { display: block; margin: 0; width: auto; height: auto; position: relative; }
.cdMast .cart-sec a { display: flex; align-items: center; text-decoration: none; }
.cdMast .cart-sec svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.cdMast .cart-sec .wishlist a {
    width: 54px; height: 54px; justify-content: center;
    border-radius: 8px; border: 1px solid rgba(255,255,255,.3); color: #fff;
    transition: border-color .15s, color .15s;
}
.cdMast .cart-sec .wishlist a:hover { border-color: #1fbbe7; color: #1fbbe7; }
.cdMast .cart-sec .cart a {
    gap: 14px;
    height: 54px;
    padding: 0 20px 0 16px;
    border-radius: 8px;
    background: #1fbbe7;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    transition: background .15s;
}
.cdMast .cart-sec .cart a:hover { background: #1599bf; }
.cdMast .cart-left { position: relative; width: 26px; height: 26px; display: block; }
.cdMast .cart-sec-container { position: static; display: block; }
/* count badges */
.cdMast .cart-sec-container span,
.cdMast .cart-sec .wishlist a span {
    position: absolute;
    top: -9px;
    right: -11px;
    left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #fff;
    color: #1599bf;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
    width: auto;
}
.cdMast .cart-sec .wishlist a span { top: 4px; right: 4px; background: #1fbbe7; color: #fff; }
.cdMast .cart-right { padding: 0; display: block; }
.cdMast .cart-right p {
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.2;
    display: block;
}
.cdMast .cart-right span.cartTotal { display: block; font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: none; }

/* ---- Menu bar ---- */
.cdNav.other-head { padding: 0; margin: 0 0 0; box-shadow: 0 2px 10px rgba(0,0,0,.06); background: #fff; border-bottom: 1px solid #e2e2e2; }
.cdNav.other-head .container { border-top: 0; }
@media screen and (min-width: 1061px) {
    .cdNav .container { padding-left: 40px; padding-right: 40px; box-sizing: border-box; }
    .cdNav .navbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .cdNav .navbar > ul { margin: 0; display: flex; flex-wrap: wrap; }
    .cdNav .navbar ul li { padding: 0; line-height: normal; font-size: inherit; }
    .cdNav .navbar > ul > li > a {
        display: block;
        padding: 0 20px;
        line-height: 58px;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #232323;
        box-shadow: inset 0 -3px 0 transparent;
        transition: color .15s, box-shadow .15s;
    }
    .cdNav .navbar > ul > li:first-child > a { padding-left: 0; }
    .cdNav .navbar > ul > li > a:hover,
    .cdNav .navbar > ul > li:hover > a,
    .cdNav .navbar > ul > li > a.active { color: #1fbbe7; box-shadow: inset 0 -3px 0 #1fbbe7; }
    .cdNav .navbar > ul > li:first-child > a:hover { box-shadow: inset 0 -3px 0 #1fbbe7; }

    /* store selector (shop preview only) styled like the search-area controls */
    .cdNav div.shop-select { flex: 0 0 240px; max-width: 240px; }
    .cdNav .shop-select select {
        height: 42px;
        padding: 0 12px;
        border: 1px solid #cfcfcf;
        border-radius: 6px;
        background-color: #fff;
        color: #232323;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }
    .cdNav .shop-select select:hover,
    .cdNav .shop-select select:focus { border-color: #1fbbe7; outline: none; }

}

/* ---- Tablet / phone: the site's fixed blue #mobile-menu bar takes over navigation ---- */
@media screen and (max-width: 1100px) {
    .cdMastInner { gap: 24px; padding: 20px 24px; }
    .cdMastBrand img { width: 200px; }
}
@media screen and (max-width: 1060px) {
    .cdMastInner { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; gap: 16px; }
    /* the cart button is hidden by the site rule .cart-sec .cart {display:none!important}; the cart is in the blue mobile bar */
}
@media screen and (max-width: 600px) {
    .cdMastInner { padding: 16px; }
    .cdMastBrand img { width: 170px; }
}

/* ---- Logo bar columns + Yuji (2026-11-04): logo | Yuji, front and centre | cart.
   Equal side columns keep Yuji in the exact centre of the bar. ---- */
@media screen and (min-width: 1061px) {
    .cdMastInner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 24px; padding-top: 14px; padding-bottom: 14px; }
    .cdMastBrand { justify-self: start; }
    .cdMastCart  { justify-self: end; }
}
.cdMast .cart-sec { flex-direction: row; }
.cdMastCartRow { display: flex; align-items: center; gap: 12px; }
.cdMast .cdYuji {
    display: block;
    width: 210px;
    height: auto;
    margin: -14px 0;           /* cracked edges reach the top/bottom of the bar: she breaks through it */
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
}
@media screen and (max-width: 1250px) { .cdMast .cdYuji { width: 180px; } }
@media screen and (max-width: 1060px) { .cdMast .cdYuji { width: 150px; margin: -4px 0; } }  /* under the logo */
@media screen and (max-width: 600px)  { .cdMast .cdYuji { width: 120px; } }

/* ---- Header search (markup in includes/header-new_preview.php) ---- */
.cdHeadSearch {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    margin: 0;
    border: 2px solid #1fbbe7;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
    font-family: var(--main-font, 'Roboto', sans-serif);
}
.cdHeadSearch:focus-within { box-shadow: 0 0 0 3px rgba(31,187,231,.25); }
.cdHeadSearchIcon { width: 18px; height: 18px; flex: none; margin: 0 2px 0 12px; fill: none; stroke: #888; stroke-width: 2; stroke-linecap: round; }
.cdHeadSearch input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0 10px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 15px;
    color: #232323;
    -webkit-appearance: none;
    appearance: none;
}
.cdHeadSearch button {
    flex: none;
    height: calc(100% + 4px);
    margin: -2px -2px -2px 0;
    padding: 0 18px;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: #1fbbe7;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .15s;
}
.cdHeadSearch button:hover { background: #1599bf; }
@media screen and (min-width: 1061px) {
    .cdNav .nav { display: flex; align-items: center; gap: 24px; }
    .cdNav .navbar { flex: 1 1 auto; min-width: 0; }
    .cdHeadSearch { flex: 0 1 380px; }
}
@media screen and (min-width: 1061px) and (max-width: 1400px) {
    .cdNav .navbar > ul > li > a { padding: 0 12px; font-size: 14px; }
    .cdHeadSearch { flex-basis: 280px; }
    .cdNav div.shop-select { flex-basis: 190px; max-width: 190px; }
}
@media screen and (max-width: 1060px) {
    .cdNav .container { padding: 10px 16px; box-sizing: border-box; }
    .cdHeadSearch { width: 100%; height: 46px; }
    .cdHeadSearch input { font-size: 16px; } /* 16px stops iOS zooming in */
}