:root {
    --boyong-ink: #111722;
    --boyong-gold: #f3b51b;
}

html {
    scroll-behavior: smooth;
}

body,
button,
input,
select,
textarea {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

body {
    background-image: radial-gradient(circle at 12% 0%, rgba(243, 181, 27, 0.055), transparent 27rem);
    overflow-x: hidden;
}

.dashboard-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 2.55rem;
    border-radius: 0.65rem;
    padding: 0.55rem 0.7rem;
    color: #475569;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.dashboard-nav:hover {
    background: #f8fafc;
    color: #0f172a;
    transform: translateX(1px);
}

.dashboard-nav.is-active {
    background: #fff7dc;
    color: #7a5200;
    box-shadow: inset 3px 0 0 var(--boyong-gold);
}

.nav-icon {
    display: inline-grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 0.4rem;
    background: #f1f5f9;
    color: #334155;
    font-size: 0.8rem;
    line-height: 1;
}

.dashboard-nav.is-active .nav-icon {
    background: #f3b51b;
    color: #111722;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #d59a08 !important;
    box-shadow: 0 0 0 3px rgba(243, 181, 27, 0.16);
    outline: none;
}

@media print {
    header,
    footer,
    aside,
    button {
        display: none !important;
    }
}

/* Product catalogue hero continues behind the floating site header. */
body:has(img[alt="Construction materials"]) main > section:first-child {
    margin-top: -7.75rem !important;
}

body:has(img[alt="Construction materials"]) main > section:first-child > div.relative {
    min-height: 300px;
    padding-top: 10rem;
}