/* Header marquee — scrolling brand-pillars row injected between
   the FREE SHIPPING bar (kadence_top_header) and the logo row
   (kadence_main_header).

   Uses the SAME `.kadence-marquee` classes as the home-page marquee, so
   the existing `@keyframes marquee-infinite` animation defined in
   style.css runs automatically. This file ONLY overrides what's different
   for the header version (smaller font, smaller icon, tight padding,
   cream bg) — scoped to `.sfz-header-marquee` so the home marquee is
   unaffected.

   No `!important` per project convention — `.sfz-header-marquee .X`
   selectors have specificity (0, 2, x) which beats the inherited
   `.kadence-marquee` (0, 1, x) rules in style.css. */

.sfz-header-marquee {
    position: relative;
    display: block;
    width: 100%;
}

/* Cream bg + ensure the marquee wraps full width inside the header.
   Selector spec (0, 2, 0) beats inherited `.kadence-marquee` (0, 1, 0). */
.sfz-header-marquee .kadence-marquee {
    background: #f8efe2;
    width: 100%;
}

/* Shrink the items — inherited `.kadence-marquee__content span` is 24px
   font with 30px padding. Override to a slim header bar.
   Spec (0, 3, 1) beats inherited (0, 1, 1). */
.sfz-header-marquee .kadence-marquee__content span {
    font-size: 13px;
    padding: 8px 16px;
    padding-left: 0;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #F22F8B;
}

/* Shrink the mushroom icon — inherited `.info-icon` is 26x26 with 35px
   right margin. Header version is smaller and tighter.
   Spec (0, 2, 0) beats inherited (0, 1, 0). */
.sfz-header-marquee .info-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    fill: #F22F8B;
}

/* Tablet — a touch tighter. */
@media (max-width: 1024px) {
    .sfz-header-marquee .kadence-marquee__content span {
        padding: 7px 12px;
        padding-left: 0;
        letter-spacing: 0.04em;
    }
}

/* Phones — smaller font + faster scroll so each item reads. */
@media (max-width: 700px) {
    .sfz-header-marquee .kadence-marquee__content span {
        font-size: 11px;
        padding: 7px 10px;
        padding-left: 0;
    }
    .sfz-header-marquee .info-icon {
        width: 12px;
        height: 12px;
        margin-right: 6px;
    }
    .sfz-header-marquee .kadence-marquee__track {
        animation-duration: 26s;
    }
}