/* Testata: fascia decorativa, navigazione bianca e marchio centrale. */
.brand-header {
    --brand-ink: #07365d;
    --brand-green: #51a52c;
    --brand-green-dark: #428b23;
    position: relative;
    z-index: 50;
    min-height: 124px;
    color: var(--brand-ink);
    background: linear-gradient(to bottom, transparent 50px, #fafdff 50px), linear-gradient(115deg, #15566f, #08415c);
}
.brand-header__accent {
    position: absolute;
    top: 0;
    height: 50px;
    width: 36%;
    pointer-events: none;
    background: linear-gradient(133deg, transparent 35%, #4ba45b 35%, #3d9860 49%, transparent 49%, transparent 60%, #ffffff0b 60%, #ffffff0b 73%, transparent 73%), radial-gradient(#ffffff33 .8px, transparent 1px);
    background-size: auto, 13px 13px;
}
.brand-header__accent--left { left: 0; }
.brand-header__accent--right { right: 0; transform: scaleX(-1); }
.brand-header__bar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    width: calc(100% - 64px);
    max-width: 1800px;
    min-height: 124px;
    margin: auto;
}
.brand-header__nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 54px); }
.brand-header__nav--left { height: 74px; padding-left: 16px; }
.brand-header__nav--right { gap: 16px; }
.brand-header__link { position: relative; color: var(--brand-ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.brand-header__link:hover { color: var(--brand-green-dark); }
.brand-header__link.is-active::after { content: ''; position: absolute; height: 3px; bottom: -16px; left: -14px; right: -14px; background: var(--brand-green); }
.brand-header__brand {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: start;
    height: 142px;
    margin-bottom: -16px;
    padding: 8px 12px 14px;
    text-align: center;
    color: var(--brand-ink);
    isolation: isolate;
}
.brand-header__brand::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 -30px;
    background: linear-gradient(#fff, #f2f9fd);
    clip-path: polygon(6% 0, 94% 0, 100% 36%, 100% 86%, 96% 87%, 92% 98%, 90% 100%, 10% 100%, 8% 98%, 4% 87%, 0 86%, 0 36%);
}
.brand-header__brand:hover { color: var(--brand-ink); }
.brand-header__logo { display: block; max-width: 280px; height: 76px; object-fit: contain; }
.brand-header__fallback { position: relative; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(36px, 4.4vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.brand-header__tagline { margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.25; }
.brand-header__subline { margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; line-height: 1.2; }
.brand-header__right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 74px; }
.brand-header__icon-btn, .brand-header__soft-btn, .brand-header__lang, .brand-header__register-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex-shrink: 0; border: 1px solid #d5e2ef; border-radius: 9px; background: #fafdff; color: var(--brand-ink); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.brand-header__icon-btn { width: 48px; cursor: pointer; }
.brand-header__cart { position: relative; }
.brand-header__cart-count { position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--brand-green-dark); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.brand-header__soft-btn { padding: 0 14px; }
.brand-header__register-btn { gap: 10px; padding: 0 16px; color: #fff; border-color: var(--brand-green); background: linear-gradient(115deg, #58ad30, #4d9d2b); }
.brand-header__register-btn:hover { background: var(--brand-green-dark); color: #fff; }
.brand-header__lang { padding: 0 10px; }
.brand-header__lang select { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.brand-header :is(a, button, select):focus-visible { outline: 3px solid var(--brand-green); outline-offset: 4px; }
.brand-header__mobile-toggle, .brand-header__mobile-menu, .brand-header__search { display: none; }
.brand-header__search.is-open { display: block; }
.brand-header__search { position: relative; z-index: 3; background: #fff; border-top: 1px solid #d5e2ef; }
.brand-header__search form { display: flex; align-items: center; gap: 10px; max-width: var(--ksm-width); margin: auto; padding: 20px 24px; }
.brand-header__search input { flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid #d5e2ef; border-radius: 9px; font: inherit; }
.brand-header__search button { padding: 12px 20px; border: 0; border-radius: 9px; background: var(--brand-green); color: #fff; cursor: pointer; }
@media (min-width: 1401px) {
    .brand-header__nav--right { max-width: 150px; overflow-x: auto; padding-block: 20px; }
}
@media (max-width: 1400px) {
    .brand-header__bar { grid-template-columns: minmax(0, 1fr) 390px minmax(0, 1fr); width: calc(100% - 32px); gap: 12px; }
    .brand-header__nav { gap: 22px; }
    .brand-header__nav--right { display: none; }
    .brand-header__tagline { font-size: 14px; }
    .brand-header__right { gap: 8px; }
    .brand-header__register-btn { padding: 0 10px; font-size: 12px; }
}
@media (max-width: 1150px) {
    .brand-header { min-height: 110px; background: linear-gradient(to bottom, transparent 34px, #fafdff 34px), #104b65; }
    .brand-header__accent { height: 34px; }
    .brand-header__bar { grid-template-columns: 44px minmax(0, 480px) 44px; justify-content: space-between; min-height: 110px; gap: 8px; }
    .brand-header__brand { grid-column: 2; height: 126px; padding-inline: 8px; margin-bottom: -16px; }
    .brand-header__fallback { font-size: 54px; }
    .brand-header__logo { height: 62px; max-width: 100%; }
    .brand-header__right { grid-column: 3; min-height: 76px; }
    .brand-header__nav, .brand-header__right > a, .brand-header__icon-btn, .brand-header__lang { display: none; }
    .brand-header__mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid #d5e2ef; border-radius: 9px; background: #fff; cursor: pointer; }
    .brand-header__mobile-toggle span { width: 100%; height: 2px; background: var(--brand-ink); }
    .brand-header.is-open .brand-header__mobile-menu { display: flex; }
    .brand-header__mobile-menu { position: absolute; top: calc(100% + 20px); left: 16px; right: 16px; z-index: 5; flex-direction: column; max-height: calc(100dvh - 150px); overflow-y: auto; padding: 12px; border: 1px solid #d5e2ef; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px #07365d22; }
    .brand-header__mobile-menu a, .brand-header__mobile-menu button { display: block; padding: 12px 14px; border: 0; background: none; color: var(--brand-ink); font: inherit; text-align: left; }
    .brand-header__mobile-menu a:hover { background: #edf5e7; }
}
@media (max-width: 540px) {
    .brand-header__bar { width: calc(100% - 20px); grid-template-columns: 0 minmax(0, 1fr) 44px; }
    .brand-header__brand::before { inset-inline: -8px; }
    .brand-header__fallback { font-size: 42px; }
    .brand-header__tagline { font-size: 11px; max-width: 240px; }
    .brand-header__subline { font-size: 8px; letter-spacing: .14em; }
}

/* Varianti di dominio: le variabili inline provengono da colori HEX validati. */
.brand-header { background: linear-gradient(to bottom, transparent 50px, #fafdff 50px), var(--brand-background, #104b65); }
.brand-header__accent { background-image: linear-gradient(133deg, transparent 35%, var(--brand-green) 35%, var(--brand-green) 49%, transparent 49%, transparent 60%, #ffffff0b 60%, #ffffff0b 73%, transparent 73%), radial-gradient(#ffffff33 .8px, transparent 1px); }
.brand-header__register-btn { background: var(--brand-green); }
.brand-header__register-btn:hover { background: var(--brand-green); filter: brightness(.9); }
.brand-header__fallback--long { font-size: clamp(26px, 2.8vw, 46px); overflow-wrap: anywhere; line-height: 1.05; }
.brand-header--artisan { --brand-ink: #203522; --brand-green: #548d3d; --brand-background: #354331; background: #fff; }
.brand-header--artisan .brand-header__accent { display: none; }
.brand-header__utility { min-height: 40px; padding: 8px 4%; display: flex; align-items: center; gap: 28px; background: var(--brand-background); color: #fff; font-size: 12px; }
.brand-header__utility > span { margin-right: auto; }
.brand-header__utility a { color: inherit; }
.brand-header--artisan .brand-header__bar { min-height: 108px; }
.brand-header--artisan .brand-header__brand { height: 128px; }
.brand-header--artisan .brand-header__brand::before { clip-path: none; border-radius: 0 0 50% 50% / 0 0 22% 22%; background: #fff; }
.brand-header--artisan .brand-header__subline::before { content: ''; display: block; width: 140px; height: 3px; margin: 0 auto 8px; background: linear-gradient(90deg, #438e38 33.33%, #eee 33.33%, #eee 66.66%, #d72c22 66.66%); }
@media (max-width: 1150px) {
    .brand-header { background: linear-gradient(to bottom, transparent 34px, #fafdff 34px), var(--brand-background, #104b65); }
    .brand-header--artisan { background: #fff; }
}
@media (max-width: 540px) {
    .brand-header__fallback--long { font-size: 27px; }
    .brand-header__utility { gap: 12px; font-size: 10px; }
    .brand-header__utility > span { display: none; }
}
/* Geometria del mockup: 50px di decoro, 74px di menu, 18px di linguetta. */
.brand-header__brand::before {
    inset: 0 -24px;
    clip-path: none;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 142' preserveAspectRatio='none'%3E%3Cpath d='M32 0H508L536 50H540V124H514C499 124 490 142 470 142H70C50 142 41 124 26 124H0V50H4Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.brand-header__fallback { font-weight: 700; letter-spacing: -.045em; font-size: 78px; line-height: .95; }
.brand-header__fallback::before {
    content: ''; position: absolute; width: 58px; height: 23px; top: -13px; left: 40%;
    background: linear-gradient(160deg, #8acb55, var(--brand-green));
    clip-path: path('M0 23C15 2 37 16 58 0C47 21 21 16 0 23Z');
}
.brand-header__fallback--long { font-size: clamp(28px, 2.8vw, 47px); letter-spacing: -.055em; }
.brand-header__fallback--long::before { left: 17%; }
.brand-header__brand { padding-top: 14px; }
.brand-header__tagline { font-weight: 500; }
.brand-header__subline { color: var(--brand-ink); }
.brand-header__dot { margin: 0 .62em 0 .3em; color: var(--brand-green); letter-spacing: 0; }
/* Spazio vero fra le parole della sigla, senza larghezza: serve a lettori di schermo e motori di ricerca. */
.brand-header__gap { font-size: 0; letter-spacing: 0; }
.brand-header__accent {
    width: 36%;
    background:
        linear-gradient(133deg, transparent 35%, #ffffff18 35%, #ffffff18 47%, transparent 47%),
        linear-gradient(133deg, transparent 35%, var(--brand-green) 35%, #268971 49%, transparent 49%, transparent 60%, #ffffff0b 60%, #ffffff0b 73%, transparent 73%),
        linear-gradient(120deg, #ffffff06, transparent 70%);
}
.brand-header__accent::after { content: ''; position: absolute; inset: 0; background: radial-gradient(#ffffff40 .7px, transparent 1px) 0 2px / 13px 13px; mask-image: linear-gradient(90deg, #000, transparent 34%); }
.brand-header__accent--right { transform: none; }
.brand-header__accent--right::after { transform: scaleX(-1); }
.brand-header__register-btn { background: linear-gradient(110deg, #ffffff0d, #00000008), var(--brand-green); font-weight: 500; }
.brand-header__right { position: relative; z-index: 3; }
.brand-header__soft-btn--account .ksm-icon { display: none; }
@media (min-width: 1151px) {
    .brand-header__bar { grid-template-columns: minmax(0, 1fr) clamp(380px, 29vw, 480px) minmax(0, 1fr); width: calc(100% - 64px); gap: 28px; }
    .brand-header__nav--right { display: flex; flex-shrink: 1; min-width: 70px; max-width: none; overflow-x: auto; padding-block: 18px; }
    .brand-header__right { gap: 10px; }
    .brand-header__nav--left { gap: clamp(24px, 3.5vw, 60px); }
    .brand-header__tagline { font-size: clamp(13px, 1.02vw, 17px); white-space: nowrap; }
}
@media (min-width: 1151px) and (max-width: 1600px) {
    .brand-header__bar { gap: 20px; width: calc(100% - 40px); }
    .brand-header__right { gap: 8px; }
    .brand-header__soft-btn--account { width: 44px; padding: 0; }
    .brand-header__soft-btn--account .ksm-icon { display: block; }
    .brand-header__soft-btn--account span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .brand-header__register-btn { padding-inline: 10px; font-size: 12px; }
    .brand-header__nav--left { gap: 36px; padding-left: 35px; }
}
@media (min-width: 1151px) and (max-width: 1300px) {
    .brand-header__bar { grid-template-columns: minmax(0, 1fr) 350px minmax(0, 1fr); gap: 12px; }
    .brand-header__register-btn > span { display: none; }
    .brand-header__register-btn { width: 44px; }
    .brand-header__nav--left { gap: 22px; padding-left: 0; }
    .brand-header__tagline { font-size: 12px; }
}
.brand-header--artisan .brand-header__brand::before { mask: none; }
@media (max-width: 1150px) {
    .brand-header__fallback { font-size: 54px; }
    .brand-header__fallback--long { font-size: 34px; }
    .brand-header__brand::before { inset-inline: -8px; }
}
@media (max-width: 540px) {
    .brand-header__fallback { font-size: 44px; }
    .brand-header__fallback--long { font-size: 27px; }
    .brand-header__fallback::before { width: 42px; height: 17px; top: -12px; clip-path: polygon(0 100%, 20% 40%, 75% 30%, 100% 0, 80% 70%, 30% 75%); }
}


/* Lumiere delle spalle e fasce nella posizione del riferimento. */
.brand-header:not(.brand-header--artisan) {
    background: linear-gradient(to bottom, transparent 50px, #fafdff 50px), linear-gradient(110deg, #ffffff0b, transparent 60%), var(--brand-background, #104b65);
}
.brand-header__accent {
    background: url('../images/header-facets.svg') center / 100% 50px no-repeat,
        linear-gradient(133deg, transparent 36%, #49a063 36%, var(--brand-green) 49%, transparent 49%);
}
.brand-header__accent--right { background-position: center; }
.brand-header__accent--right { background-image: url('../images/header-facets.svg'), linear-gradient(133deg, transparent 47%, #298966 47%, var(--brand-green) 61%, transparent 61%); }
.brand-header__accent::after { background-size: 12px 13px; opacity: .85; }
.brand-header__brand::before { background: linear-gradient(160deg, #fff 30%, #f1f8fc); }
.brand-header__brand::after {
    content: ''; position: absolute; left: -24px; top: 0; width: 32px; height: 50px; pointer-events: none;
    background: linear-gradient(120deg, transparent 0 40%, #aad0dc55 41% 59%, #deedf355 60% 78%, transparent 79%);
    transform: translateX(-7px);
}
.brand-header--artisan .brand-header__brand::after { display: none; }
.brand-header__icon-btn, .brand-header__soft-btn, .brand-header__lang { background: linear-gradient(#fff, #f5faff); border-color: #d6e4f1; }
.brand-header__register-btn { box-shadow: inset 0 1px 0 #ffffff24, 0 2px 3px #234b1510; }
@media (min-width: 1601px) {
    .brand-header__nav--left { padding-left: 30px; }
    .brand-header__brand { padding-bottom: 10px; }
    .brand-header__tagline { margin-top: 5px; font-size: 17px; }
    .brand-header__subline { margin-top: 8px; }
}
@media (max-width: 1150px) {
    .brand-header:not(.brand-header--artisan) { background: linear-gradient(to bottom, transparent 34px, #fafdff 34px), var(--brand-background, #104b65); }
    .brand-header__brand::after { display: none; }
    .brand-header__right { position: static; }
    .brand-header__right > .brand-header__cart { display: inline-flex; position: absolute; left: 0; bottom: 16px; width: 44px; z-index: 3; }
    .brand-header__bar { grid-template-columns: 44px minmax(0, 480px) 44px; }
}
@media (min-width: 1301px) and (max-width: 1600px) {
    .brand-header__register-btn > span { display: none; }
    .brand-header__register-btn { width: 44px; }
}