/*
===============================================================================
  Mansy Store - Department header bands
===============================================================================
  Every shelf in #shelves opens with a full-bleed ink band: the department name
  centred, the deep link and option count on the leading edge, the descriptor on
  the trailing edge, and the product row pulled up so its cards sit on the band.
  Drawn with this store's navy/orange tokens rather than a light-blue strip and
  a white name bubble.

  No artwork of its own: the cards overlapping the bottom edge are the imagery,
  which is why the band stays one line tall instead of a second hero per shelf.

  Loaded last so it can re-style the .section-title and count nodes that
  department-banners.js moves inside the band. Those nodes stay the originals,
  so the language MutationObserver in store-language.js keeps translating them.
===============================================================================
*/

/* Mirrors .content's inline padding at each breakpoint (delta-style.css) so the
   band can bleed to the viewport edge and still line its own copy back up. */
.content {
    --dept-bleed: 28px;
}

.dept-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px 20px;
    margin-inline: calc(-1 * var(--dept-bleed));
    padding: 20px calc(var(--dept-bleed) + 10px) 46px;
    /* Dot grid over the navy pair. No orange wash behind the copy: #ff8a00 at
       .22 over #12304f blends to a mid-brown that drops white text below AA.
       The dots stay at .05 so the lightest blend under the 11px kicker still
       measures 4.95:1 against #ff8a00; at .10 it fell to 4.16:1. */
    background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px), linear-gradient(100deg, var(--gc-section-ink), #0e2740);
    background-size: 16px 16px, auto;
    border-block-start: 3px solid var(--gc-orange);
    color: var(--gc-white);
}

/* The row rides up into the band's bottom padding, so the band reads as the
   shelf's header rather than a card parked above it. */
#shelves .product-grid {
    position: relative;
    z-index: 1;
    margin-top: -26px;
}

.dept-band__start {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: start;
}

.dept-band__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    text-align: center;
}

.dept-band__end {
    min-width: 0;
    justify-self: end;
    max-width: 34ch;
    font-size: 13px;
    line-height: 1.75;
    text-align: center;
    color: var(--gc-section-border);
}

/* #ff8a00 on #12304f measures 5.69:1, so the kicker clears AA as small text. */
.dept-parent {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    color: var(--gc-orange);
}

.dept-rule {
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--gc-orange);
}

.dept-band .section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.dept-band .section-title h2 {
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    line-height: 1.45;
    color: var(--gc-white);
}

/* The heading carries its own arrow from the shelf template; the deep link
   below already points, and home-shelves.css's RTL flip no longer reaches it. */
.dept-band .section-title .icon {
    display: none;
}

.dept-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: var(--gc-radius-pill);
    background: rgba(255, 255, 255, .07);
    color: var(--gc-white);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dept-all .icon {
    width: 16px;
    flex: 0 0 auto;
    transform: rotate(180deg);
    color: var(--gc-orange);
}

.dept-all:hover {
    border-color: var(--gc-white);
    background: var(--gc-white);
    color: var(--gc-section-ink);
}

/* #ff8a00 measures 2.36:1 on white; the darker stop clears the 3:1 non-text floor. */
.dept-all:hover .icon {
    color: var(--gc-orange-dark);
}

.dept-all:focus-visible {
    outline: 3px solid var(--gc-orange);
    outline-offset: 3px;
}

.dept-count {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--gc-radius-pill);
    background: rgba(255, 255, 255, .13);
    font: 600 11px/1.6 Inter, Cairo, sans-serif;
    white-space: nowrap;
    color: var(--gc-white);
}

/* English mode flips the arrows back: home-shelves.css does the same for the
   shelf heading, whose icon this layer hides. */
html[lang=en] .dept-all .icon {
    transform: none;
}

@media(max-width:1100px) {
    .content {
        --dept-bleed: 20px;
    }
}

@media(max-width:900px) {
    .dept-band {
        padding-block-end: 40px;
    }

    .dept-band__end {
        display: none;
    }

    #shelves .product-grid {
        margin-top: -22px;
    }
}

@media(max-width:600px) {
    .content {
        --dept-bleed: 12px;
    }

    .dept-band {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 8px;
        padding: 12px calc(var(--dept-bleed) + 6px) 26px;
        border-block-start-width: 2px;
    }

    /* The band stacks name-then-controls, so the centre column leads even though
       the deep link comes first in the DOM. The kicker runs inline rather than on
       its own line: a three-line band on a phone is too heavy, and every name
       still fits one line beside it. */
    .dept-band__title {
        order: -1;
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .dept-band .section-title h2 {
        font-size: 21px;
        line-height: 1.4;
    }

    .dept-rule {
        display: none;
    }

    #shelves .product-grid {
        margin-top: -14px;
    }
}

@media(prefers-reduced-motion:no-preference) {
    .dept-all {
        transition: background-color .22s ease, border-color .22s ease, color .22s ease;
    }
}