/*
 * GANT-oriented art direction.
 * Loaded after style.css so the standalone mockup keeps one base component
 * system while using the public gant.ua palette and a category-first hero.
 */
:root {
    --ink: #202124;
    --ink-soft: #4d5159;
    --muted: #959595;
    --paper: #ffffff;
    --canvas: #f2f2f2;
    --line: #e1e1e1;
    --accent: #d91c1e;
    --accent-deep: #f54322;
    --night: #202124;
}

.eyebrow::before {
    background: var(--accent);
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-deep);
}

.topbar .status::before {
    box-shadow: 0 0 0 5px rgba(217, 28, 30, .16);
}

.brand-mark {
    background: var(--accent);
}

.brand-mark::before,
.brand-mark::after {
    border-color: #fff;
}

.main-nav > a::after,
.nav-catalog > summary::after {
    background: var(--accent);
}

.cart-count {
    background: var(--accent);
    color: #fff;
}

.hero-inner {
    padding-bottom: 176px;
}

.hero-category-dock-wrap {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero-category-dock {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 20px 20px 0 0;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 -16px 50px rgba(0, 0, 0, .16);
    overflow: hidden;
}

.hero-category {
    min-height: 122px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 22px 18px;
    border-right: 1px solid var(--line);
    transition: color .2s ease, background .2s ease;
}

.hero-category:last-child {
    border-right: 0;
}

.hero-category:hover {
    background: var(--accent);
    color: #fff;
}

.hero-category-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--canvas);
    color: var(--accent);
    font-size: 19px;
    transition: background .2s ease, color .2s ease;
}

.hero-category:hover .hero-category-icon {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.hero-category strong,
.hero-category small {
    display: block;
}

.hero-category strong {
    font-size: 12px;
    line-height: 1.28;
}

.hero-category small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}

.hero-category:hover small {
    color: rgba(255, 255, 255, .72);
}

.hero-category > span:last-child {
    font-size: 17px;
}

.category-art::before {
    background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.solution-visual {
    background:
        radial-gradient(circle at 55% 45%, rgba(217, 28, 30, .2), transparent 31%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
}

.cta-panel {
    background: var(--accent);
    color: #fff;
}

.cta-panel::before {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 65px rgba(255, 255, 255, .045), 0 0 0 130px rgba(255, 255, 255, .025);
}

.cta-copy p {
    color: rgba(255, 255, 255, .72);
}

.contact-map::before,
.contact-map::after {
    border-color: rgba(217, 28, 30, .75);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    box-shadow: 0 0 0 4px rgba(217, 28, 30, .12);
}

@media (max-width: 780px) {
    .hero-inner {
        padding-bottom: 154px;
    }

    .hero-category-dock {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(190px, 64vw);
        border-radius: 16px 16px 0 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .hero-category-dock::-webkit-scrollbar {
        display: none;
    }

    .hero-category {
        min-height: 112px;
    }
}