/* Fresh UI 2026 final override layer
   Loaded after Vite so it can repair legacy and accumulated theme rules safely. */

:root {
    --fresh-font-sans: "Manrope", "Cairo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --fresh-font-display: "Sora", "Cairo", var(--fresh-font-sans);
    --fresh-page: #f4f8fb;
    --fresh-page-2: #edf6f2;
    --fresh-surface: rgba(255,255,255,.86);
    --fresh-surface-solid: #ffffff;
    --fresh-surface-soft: #eef4f8;
    --fresh-text: #081c35;
    --fresh-text-2: #4f6278;
    --fresh-muted: #7890a8;
    --fresh-line: rgba(8,28,53,.11);
    --fresh-blue: #073d7a;
    --fresh-blue-2: #0a5fa8;
    --fresh-green: #64c832;
    --fresh-green-2: #8be24f;
    --fresh-focus: rgba(83,184,50,.22);
    --fresh-shadow: 0 24px 70px rgba(12,42,72,.12);
    --fresh-shadow-strong: 0 32px 90px rgba(5,24,46,.19);
    --fresh-radius: 28px;
}

html[data-theme="dark"] {
    --fresh-page: #04101d;
    --fresh-page-2: #061728;
    --fresh-surface: rgba(9,25,42,.82);
    --fresh-surface-solid: #0a1b2d;
    --fresh-surface-soft: #0e253a;
    --fresh-text: #f1f7fd;
    --fresh-text-2: #b4c7d8;
    --fresh-muted: #8299ae;
    --fresh-line: rgba(181,211,235,.13);
    --fresh-blue: #55a7f5;
    --fresh-blue-2: #7bc4ff;
    --fresh-green: #83dc45;
    --fresh-green-2: #a1ee6b;
    --fresh-focus: rgba(131,220,69,.19);
    --fresh-shadow: 0 28px 80px rgba(0,0,0,.34);
    --fresh-shadow-strong: 0 36px 100px rgba(0,0,0,.48);
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

html { scroll-behavior: smooth; }

body,
button,
input,
select,
textarea {
    font-family: var(--fresh-font-sans) !important;
}

body {
    color: var(--fresh-text) !important;
    background:
        radial-gradient(circle at 8% 12%, rgba(92,188,241,.13), transparent 28%),
        radial-gradient(circle at 88% 8%, rgba(112,213,67,.13), transparent 30%),
        linear-gradient(180deg, var(--fresh-page), var(--fresh-page-2)) !important;
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 12% 8%, rgba(41,130,210,.16), transparent 31%),
        radial-gradient(circle at 88% 13%, rgba(104,205,63,.12), transparent 29%),
        linear-gradient(180deg, #04101d, #061524 62%, #04101d) !important;
}

.site-body::before,
.panel-body::before {
    content: "";
    position: fixed;
    inset: -18vmax;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 23% 30%, rgba(76,175,239,.13), transparent 18%),
        radial-gradient(circle at 76% 24%, rgba(123,218,66,.12), transparent 20%),
        radial-gradient(circle at 64% 78%, rgba(62,154,218,.10), transparent 22%);
    filter: blur(9px);
    animation: freshAmbientDrift 22s ease-in-out infinite alternate;
}

.site-body::after,
.panel-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image:
        linear-gradient(rgba(39,102,155,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39,102,155,.06) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 80%);
}

@keyframes freshAmbientDrift {
    0% { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); }
    100% { transform: translate3d(-.5%, 2%, 0) scale(1.02); }
}

.container {
    width: min(calc(100% - 40px), 1440px) !important;
    margin-inline: auto !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-heading h2,
.panel-heading h1,
.auth-card h1,
.product-detail-copy h1,
.hsx-hero-copy h1 {
    font-family: var(--fresh-font-display) !important;
    letter-spacing: -.045em;
    text-wrap: balance;
}

p,
.product-long-description,
.hsx-hero-copy > p {
    text-wrap: pretty;
}

/* Header and navigation */
.site-header,
.home-page .site-header,
.home-page .site-header.is-scrolled {
    background: color-mix(in srgb, var(--fresh-surface-solid) 86%, transparent) !important;
    border-top: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--fresh-green), #52baf1, var(--fresh-green-2)) 1 !important;
    border-bottom: 1px solid var(--fresh-line) !important;
    box-shadow: 0 12px 38px rgba(12,42,72,.08) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .home-page .site-header,
html[data-theme="dark"] .home-page .site-header.is-scrolled {
    background: rgba(4,15,27,.88) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.3) !important;
}

.site-header .nav-shell {
    min-height: 86px !important;
    display: grid !important;
    grid-template-columns: minmax(170px,220px) minmax(440px,1fr) minmax(210px,330px) auto !important;
    gap: clamp(14px,2vw,30px) !important;
    align-items: center !important;
}

.site-header .brand {
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-header .brand img {
    width: min(100%, 205px) !important;
    height: 58px !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
}

.primary-nav {
    min-width: 0;
    gap: clamp(14px,1.7vw,28px) !important;
}

.primary-nav a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: max-content;
    padding: 30px 0 !important;
    color: var(--fresh-text-2) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
}

.primary-nav a i {
    color: var(--fresh-green);
    font-size: 12px;
}

.primary-nav a:hover,
.primary-nav a.is-active { color: var(--fresh-text) !important; }

.nav-search {
    width: 100% !important;
    min-width: 0 !important;
    background: var(--fresh-surface-soft) !important;
    border: 1px solid var(--fresh-line) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}

.nav-search input { min-width: 0 !important; color: var(--fresh-text) !important; }
.nav-search input::placeholder { color: var(--fresh-muted) !important; }
.nav-search button { color: var(--fresh-text-2) !important; }

.nav-actions { min-width: max-content; gap: 8px !important; }
.icon-action,
.theme-toggle,
.language-button,
.account-button {
    border-color: var(--fresh-line) !important;
    background: var(--fresh-surface) !important;
    color: var(--fresh-text) !important;
}

.login-link { color: var(--fresh-text) !important; font-weight: 800 !important; }
.register-link { white-space: nowrap; }

/* Buttons and Font Awesome icon rhythm */
.button,
button,
.icon-action,
.hsx-mini-product button {
    -webkit-tap-highlight-color: transparent;
}

.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 50px;
    padding-inline: 22px !important;
    border-radius: 15px !important;
    font-weight: 850 !important;
    letter-spacing: -.015em !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }

.button-primary,
.hsx-button-primary {
    color: #061322 !important;
    background: linear-gradient(135deg, var(--fresh-green), var(--fresh-green-2)) !important;
    box-shadow: 0 18px 42px rgba(92,196,49,.28) !important;
}

.button-dark {
    color: #fff !important;
    background: linear-gradient(135deg, #062f61, #0a5b9f) !important;
}

.fa-solid,
.fa-regular,
.fa-brands { line-height: 1; }

/* Home hero: fixes the oversized headline and clipped image */
.hsx-hero {
    min-height: auto !important;
    overflow: clip !important;
    background:
        radial-gradient(circle at 88% 16%, rgba(101,205,57,.16), transparent 26%),
        radial-gradient(circle at 15% 28%, rgba(71,165,233,.13), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--fresh-page) 94%, white), var(--fresh-page-2)) !important;
}

html[data-theme="dark"] .hsx-hero {
    background:
        radial-gradient(circle at 82% 16%, rgba(113,211,65,.12), transparent 28%),
        radial-gradient(circle at 18% 30%, rgba(50,143,220,.14), transparent 30%),
        linear-gradient(135deg, #04101d, #071727) !important;
}

.hsx-hero-layout {
    min-height: min(780px, calc(100vh - 120px)) !important;
    display: grid !important;
    grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr) !important;
    gap: clamp(38px,5vw,86px) !important;
    align-items: center !important;
    padding-top: clamp(56px,6vw,92px) !important;
    padding-bottom: clamp(56px,6vw,92px) !important;
}

.hsx-hero-copy {
    max-width: 760px !important;
    min-width: 0 !important;
}

.hsx-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    max-width: 100% !important;
    color: var(--fresh-blue) !important;
    background: color-mix(in srgb, var(--fresh-surface-solid) 76%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--fresh-blue) 25%, transparent) !important;
    box-shadow: 0 12px 32px rgba(16,75,124,.08) !important;
}

.hsx-hero-copy h1 {
    max-width: 12ch !important;
    margin: 24px 0 24px !important;
    color: var(--fresh-text) !important;
    font-size: clamp(3.45rem,5.45vw,6rem) !important;
    font-weight: 800 !important;
    line-height: .96 !important;
    letter-spacing: -.065em !important;
}

.hsx-hero-copy h1 .hsx-accent {
    color: var(--fresh-green) !important;
    text-shadow: 0 16px 38px rgba(93,195,49,.15);
}

.hsx-hero-copy > p {
    max-width: 60ch !important;
    color: var(--fresh-text-2) !important;
    font-size: clamp(1rem,1.25vw,1.18rem) !important;
    line-height: 1.75 !important;
}

.hsx-hero-actions { gap: 14px !important; margin-top: 30px !important; }
.hsx-trust-row { gap: 18px !important; margin-top: 34px !important; }
.hsx-trust-row article { min-width: 0 !important; }
.hsx-trust-row strong { color: var(--fresh-text) !important; }
.hsx-trust-row small { color: var(--fresh-text-2) !important; }

.hsx-mini-icon,
.hsx-feature-icon,
.hsx-stat-strip article > i {
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    color: var(--fresh-green) !important;
    background: rgba(113,211,65,.12) !important;
    border: 1px solid rgba(113,211,65,.2) !important;
    font-style: normal !important;
}

.hsx-hero-visual { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
.hsx-hero-picture {
    min-height: clamp(440px,47vw,680px) !important;
    overflow: hidden !important;
    border-radius: clamp(28px,3vw,44px) !important;
    border: 1px solid var(--fresh-line) !important;
    background: var(--fresh-surface) !important;
    box-shadow: var(--fresh-shadow-strong) !important;
}

.hsx-hero-picture img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Bento cards and content */
.hsx-panel,
.hsx-feature-card,
.hsx-testimonial,
.hsx-languages,
.hsx-partners,
.product-card,
.form-card,
.auth-card,
.card-surface {
    color: var(--fresh-text) !important;
    background: var(--fresh-surface) !important;
    border: 1px solid var(--fresh-line) !important;
    box-shadow: var(--fresh-shadow) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
}

.hsx-panel,
.hsx-feature-card,
.hsx-testimonial,
.hsx-languages,
.hsx-partners { border-radius: var(--fresh-radius) !important; }

.hsx-panel h2,
.hsx-feature-card h3,
.hsx-testimonial,
.hsx-languages h2,
.hsx-partners h2 { color: var(--fresh-text) !important; }

.hsx-panel p,
.hsx-feature-card p,
.hsx-panel small,
.hsx-testimonial small { color: var(--fresh-text-2) !important; }

.hsx-mini-product,
.hsx-category-card {
    background: color-mix(in srgb, var(--fresh-surface-solid) 86%, transparent) !important;
    border-color: var(--fresh-line) !important;
}

.hsx-mini-product:hover,
.hsx-category-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 22px 50px rgba(8,42,73,.14) !important;
}

/* Product detail: restores a balanced image/info layout and sane typography */
.product-detail-section {
    padding: clamp(36px,5vw,72px) 0 clamp(80px,8vw,120px) !important;
    background: transparent !important;
}

.breadcrumb {
    margin-bottom: 24px !important;
    color: var(--fresh-text-2) !important;
}

.product-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(360px,.92fr) minmax(0,1.08fr) !important;
    gap: clamp(30px,4.5vw,72px) !important;
    align-items: stretch !important;
}

.product-detail-visual,
.product-detail-copy {
    min-width: 0 !important;
    border-radius: clamp(24px,3vw,36px) !important;
    border: 1px solid var(--fresh-line) !important;
    box-shadow: var(--fresh-shadow) !important;
}

.product-detail-visual {
    min-height: clamp(520px,55vw,720px) !important;
    position: sticky !important;
    top: 118px !important;
    align-self: start !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.92), rgba(226,239,229,.82) 60%, rgba(196,222,210,.72)) !important;
}

html[data-theme="dark"] .product-detail-visual {
    background:
        radial-gradient(circle at 50% 40%, rgba(36,74,91,.82), rgba(9,28,43,.96) 65%, rgba(4,16,29,1)) !important;
}

.product-detail-visual img {
    width: min(82%, 620px) !important;
    height: min(72%, 560px) !important;
    object-fit: contain !important;
    filter: drop-shadow(0 34px 38px rgba(6,32,58,.20)) !important;
}

.product-detail-copy {
    padding: clamp(30px,4vw,60px) !important;
    background: var(--fresh-surface) !important;
    backdrop-filter: blur(20px) saturate(135%) !important;
}

.product-detail-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    color: var(--fresh-green) !important;
    font-size: 11px !important;
    letter-spacing: .11em !important;
}

.product-detail-copy h1 {
    max-width: 13ch !important;
    margin: 20px 0 20px !important;
    color: var(--fresh-text) !important;
    font-size: clamp(3rem,5vw,5.25rem) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
}

.product-long-description {
    max-width: 62ch !important;
    color: var(--fresh-text-2) !important;
    font-size: clamp(1rem,1.2vw,1.18rem) !important;
    line-height: 1.72 !important;
}

.detail-price-row {
    margin-top: 28px !important;
    padding: 24px 0 !important;
    border-block: 1px solid var(--fresh-line) !important;
}

.detail-price-row small,
.detail-facts small,
.add-cart-form label { color: var(--fresh-muted) !important; }
.detail-price-row strong { color: var(--fresh-blue) !important; font-size: clamp(2.2rem,4vw,3.5rem) !important; }

.detail-facts {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 14px !important;
    margin-top: 24px !important;
}

.detail-facts > div {
    min-width: 0 !important;
    padding: 20px !important;
    border-radius: 18px !important;
    background: var(--fresh-surface-soft) !important;
    border: 1px solid var(--fresh-line) !important;
}

.detail-facts strong {
    display: block !important;
    margin-top: 7px !important;
    overflow-wrap: anywhere;
    color: var(--fresh-text) !important;
    font-size: 1rem !important;
}

.add-cart-form {
    display: grid !important;
    grid-template-columns: minmax(140px,.26fr) minmax(0,1fr) !important;
    gap: 16px !important;
    align-items: end !important;
    margin: 28px 0 !important;
}

.add-cart-form input {
    width: 100% !important;
    height: 56px !important;
    margin-top: 8px !important;
    color: var(--fresh-text) !important;
    background: var(--fresh-surface-solid) !important;
    border: 1px solid var(--fresh-line) !important;
    border-radius: 15px !important;
}

.add-cart-form .button { min-height: 56px !important; }

.trade-note {
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 20px !important;
    border-radius: 20px !important;
    color: var(--fresh-text) !important;
    background: var(--fresh-surface-soft) !important;
    border: 1px solid var(--fresh-line) !important;
}
.trade-note > i,
.trade-note > span {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    color: var(--fresh-green) !important;
    background: rgba(113,211,65,.13) !important;
}
.trade-note p { color: var(--fresh-text-2) !important; }

/* Forms */
input,
select,
textarea {
    color: var(--fresh-text) !important;
    background: var(--fresh-surface-solid) !important;
    border-color: var(--fresh-line) !important;
}

input::placeholder,
textarea::placeholder { color: var(--fresh-muted) !important; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--fresh-green) !important;
    box-shadow: 0 0 0 4px var(--fresh-focus) !important;
    outline: none !important;
}

/* Admin/distributor Font Awesome icons */
.panel-nav a > span,
.panel-sidebar-footer a > span,
.panel-sidebar-footer button > span {
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    color: var(--fresh-green) !important;
    background: rgba(113,211,65,.11) !important;
}

/* Responsive */
@media (max-width: 1320px) {
    .site-header .nav-shell {
        grid-template-columns: 180px minmax(0,1fr) auto !important;
    }
    .site-header .nav-search { display: none !important; }
    .hsx-hero-copy h1 { font-size: clamp(3.25rem,5.2vw,5.15rem) !important; }
}

@media (max-width: 1080px) {
    .site-header .nav-shell {
        grid-template-columns: 165px 46px minmax(0,1fr) !important;
        min-height: 78px !important;
    }
    .site-header .mobile-menu-button { display: block !important; }
    .site-header .primary-nav {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        inset-inline: 20px !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 12px !important;
        border: 1px solid var(--fresh-line) !important;
        border-radius: 20px !important;
        background: color-mix(in srgb, var(--fresh-surface-solid) 94%, transparent) !important;
        box-shadow: var(--fresh-shadow-strong) !important;
        backdrop-filter: blur(24px) !important;
    }
    .site-header .primary-nav.is-open { display: flex !important; }
    .site-header .primary-nav a {
        width: 100% !important;
        padding: 13px 15px !important;
        border-radius: 12px !important;
    }
    .site-header .primary-nav a:hover,
    .site-header .primary-nav a.is-active { background: rgba(113,211,65,.1) !important; }
    .site-header .primary-nav a::after { display: none !important; }
    .site-header .login-link,
    .site-header .register-link,
    .site-header .language-name { display: none !important; }

    .hsx-hero-layout {
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .hsx-hero-copy { max-width: 820px !important; }
    .hsx-hero-copy h1 { max-width: 11ch !important; font-size: clamp(3.25rem,8.5vw,5.4rem) !important; }
    .hsx-hero-picture { min-height: clamp(390px,72vw,620px) !important; }

    .product-detail-grid {
        grid-template-columns: minmax(300px,.82fr) minmax(0,1.18fr) !important;
        gap: 28px !important;
    }
    .product-detail-copy h1 { font-size: clamp(2.8rem,6vw,4.6rem) !important; }
}

@media (max-width: 860px) {
    .container { width: min(calc(100% - 28px), 1440px) !important; }
    .product-detail-grid { grid-template-columns: 1fr !important; }
    .product-detail-visual {
        position: relative !important;
        top: auto !important;
        min-height: 440px !important;
    }
    .product-detail-copy { padding: clamp(26px,5vw,44px) !important; }
    .detail-facts { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .detail-facts > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .container { width: min(calc(100% - 22px), 1440px) !important; }
    .announcement { display: none !important; }
    .site-header .nav-shell {
        grid-template-columns: minmax(120px,1fr) 42px auto !important;
        min-height: 72px !important;
        gap: 8px !important;
    }
    .site-header .brand img { width: 142px !important; height: 50px !important; }
    .nav-actions { gap: 5px !important; }
    .language-button { padding-inline: 8px !important; }

    .hsx-hero-layout { padding-top: 44px !important; padding-bottom: 52px !important; }
    .hsx-hero-copy h1 {
        max-width: 10.5ch !important;
        font-size: clamp(2.8rem,14vw,4.15rem) !important;
        line-height: .98 !important;
    }
    .hsx-hero-copy > p { font-size: .98rem !important; }
    .hsx-hero-actions { display: grid !important; grid-template-columns: 1fr !important; }
    .hsx-hero-actions .button { width: 100% !important; }
    .hsx-trust-row { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .hsx-hero-picture { min-height: 310px !important; border-radius: 24px !important; }

    .product-detail-section { padding-top: 22px !important; }
    .product-detail-visual { min-height: 350px !important; }
    .product-detail-visual img { width: 88% !important; height: 285px !important; }
    .product-detail-copy h1 { max-width: none !important; font-size: clamp(2.6rem,12vw,3.65rem) !important; }
    .detail-facts { grid-template-columns: 1fr !important; }
    .detail-facts > div:last-child { grid-column: auto; }
    .add-cart-form { grid-template-columns: 1fr !important; }
    .trade-note { grid-template-columns: 42px 1fr !important; padding: 17px !important; }
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    font-family: "Cairo", var(--fresh-font-sans) !important;
}

html[dir="rtl"] .site-header .brand img { object-position: right center !important; }
html[dir="rtl"] .primary-nav a i { margin-left: 2px; }

html[data-brand-mode="argoalimentar"] {
    --fresh-font-display: "Sora", "Cairo", var(--fresh-font-sans);
    --fresh-green: #5bbf2a;
    --fresh-green-2: #9be65e;
    --fresh-blue: #083d78;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* === HS FRESH NAVBAR HOTFIX 2026 START === */
/* Prevents About/search/action overlap and keeps the header balanced at browser zoom levels. */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    isolation: isolate !important;
}

.announcement .container,
.site-header .nav-shell {
    width: min(calc(100% - 32px), 1840px) !important;
    max-width: 1840px !important;
    margin-inline: auto !important;
}

.site-header .nav-shell {
    min-height: 88px !important;
    display: grid !important;
    grid-template-columns: 220px minmax(570px, 1fr) minmax(240px, 300px) auto !important;
    align-items: center !important;
    column-gap: clamp(14px, 1.25vw, 24px) !important;
    position: relative !important;
}

.site-header .brand {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: start !important;
}

.site-header .brand img {
    width: 196px !important;
    height: 64px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.site-header .primary-nav {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(14px, 1.15vw, 24px) !important;
    position: relative !important;
    z-index: 3 !important;
}

.site-header .primary-nav a {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 32px 0 !important;
    font-size: clamp(11px, .72vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.site-header .primary-nav a i {
    width: 16px !important;
    text-align: center !important;
    flex: 0 0 16px !important;
}

.site-header .nav-search {
    position: relative !important;
    z-index: 2 !important;
    justify-self: end !important;
    width: 100% !important;
    max-width: 300px !important;
    min-width: 0 !important;
    height: 48px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.site-header .nav-search input {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: 2px 10px !important;
    font-size: 12px !important;
}

.site-header .nav-search button {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
}

.site-header .nav-actions {
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 4 !important;
}

.site-header .theme-toggle,
.site-header .language-button,
.site-header .icon-action {
    flex: 0 0 auto !important;
}

.site-header .login-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: max-content !important;
    padding: 10px 6px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

.site-header .register-link {
    min-width: max-content !important;
    min-height: 48px !important;
    padding-inline: 17px !important;
    white-space: nowrap !important;
    font-size: 13px !important;
}

.site-header .language-button {
    min-height: 48px !important;
    padding-inline: 13px !important;
}

.site-header .icon-action,
.site-header .theme-toggle {
    width: 48px !important;
    height: 48px !important;
}

/* Most laptops report 1280-1728 CSS pixels even when the screenshot is physically 2K. */
@media (max-width: 1780px) {
    .site-header .nav-shell {
        grid-template-columns: 200px minmax(560px, 1fr) auto !important;
    }

    .site-header .nav-search {
        display: none !important;
    }

    .site-header .primary-nav {
        justify-content: flex-start !important;
        gap: clamp(14px, 1.35vw, 22px) !important;
    }

    .site-header .primary-nav a {
        font-size: 12px !important;
    }
}

@media (max-width: 1460px) {
    .announcement .container,
    .site-header .nav-shell {
        width: min(calc(100% - 24px), 1380px) !important;
    }

    .site-header .nav-shell {
        grid-template-columns: 178px minmax(520px, 1fr) auto !important;
        column-gap: 14px !important;
    }

    .site-header .brand img {
        width: 170px !important;
        height: 58px !important;
    }

    .site-header .primary-nav {
        gap: 15px !important;
    }

    .site-header .primary-nav a {
        font-size: 11px !important;
    }

    .site-header .language-name {
        display: none !important;
    }

    .site-header .register-link {
        padding-inline: 14px !important;
    }
}

/* Switch to the real mobile menu before the desktop row becomes cramped. */
@media (max-width: 1260px) {
    .site-header .nav-shell {
        grid-template-columns: 170px 48px minmax(0, 1fr) !important;
        min-height: 78px !important;
        gap: 12px !important;
    }

    .site-header .brand img {
        width: 164px !important;
        height: 56px !important;
    }

    .site-header .mobile-menu-button {
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }

    .site-header .primary-nav {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        inset-inline: 0 !important;
        width: auto !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 4px !important;
        padding: 12px !important;
        border: 1px solid var(--fresh-line) !important;
        border-radius: 20px !important;
        background: color-mix(in srgb, var(--fresh-surface-solid) 96%, transparent) !important;
        box-shadow: var(--fresh-shadow-strong) !important;
        backdrop-filter: blur(24px) saturate(145%) !important;
    }

    html[data-theme="dark"] .site-header .primary-nav {
        background: rgba(6, 18, 31, .97) !important;
    }

    .site-header .primary-nav.is-open {
        display: flex !important;
    }

    .site-header .primary-nav a {
        width: 100% !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        font-size: 13px !important;
    }

    .site-header .primary-nav a::after {
        display: none !important;
    }

    .site-header .primary-nav a:hover,
    .site-header .primary-nav a.is-active {
        background: rgba(113, 211, 65, .11) !important;
    }

    .site-header .nav-search {
        display: none !important;
    }

    .site-header .nav-actions {
        min-width: 0 !important;
        justify-self: end !important;
        overflow: visible !important;
    }

    .site-header .login-link,
    .site-header .register-link,
    .site-header .language-name {
        display: none !important;
    }
}

@media (max-width: 720px) {
    .site-header .nav-shell {
        width: min(calc(100% - 18px), 680px) !important;
        grid-template-columns: minmax(128px, 1fr) 44px auto !important;
        min-height: 72px !important;
        gap: 8px !important;
    }

    .site-header .brand img {
        width: 148px !important;
        height: 50px !important;
    }

    .site-header .nav-actions {
        gap: 5px !important;
    }

    .site-header .theme-toggle,
    .site-header .icon-action {
        width: 42px !important;
        height: 42px !important;
    }

    .site-header .language-button {
        min-height: 42px !important;
        padding-inline: 8px !important;
    }
}

html[dir="rtl"] .site-header .brand img {
    object-position: right center !important;
}
/* === HS FRESH NAVBAR HOTFIX 2026 END === */