:root {
    --kg-primary: #f97316;
    --kg-primary-dark: #ea580c;
    --kg-primary-light: #fb923c;
    --kg-dark: #1a1a1a;
    --kg-darker: #0a0a0a;
    --kg-gray: #767676;
    --kg-gray-light: #e5e5e5;
    --kg-gray-lighter: #f5f5f5;
    --kg-white: #fff;
    --kg-space-xs: 4px;
    --kg-space-sm: 8px;
    --kg-space-md: 16px;
    --kg-space-lg: 24px;
    --kg-space-xl: 32px;
    --kg-radius-sm: 4px;
    --kg-radius-md: 8px;
    --kg-radius-lg: 16px;
    --kg-radius-full: 50px;
    --kg-transition-fast: 150ms ease;
    --kg-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --kg-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --kg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --kg-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --kg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --kg-touch-min: 44px;
    --kg-z-sticky: 40;
    --kg-z-drawer: 1001;
    --kg-z-overlay: 1000;
    --kg-font-family-base: var(--theme-font-family, var(--theme-font-stack-default, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif));
    --kg-font-size-xs: 0.75rem;
    --kg-font-size-sm: 0.875rem;
    --kg-font-size-md: 0.9375rem;
    --kg-font-size-lg: 1rem;
    --kg-font-size-xl: 1.125rem;
    --kg-line-height-tight: 1.3;
    --kg-line-height-base: 1.5;
    --kg-line-height-relaxed: 1.65;
    --kg-weight-regular: 400;
    --kg-weight-medium: 500;
    --kg-weight-semibold: 600;
    --kg-weight-bold: 700
}

.kg-archive-wrapper {
    background: var(--kg-white);
    min-height: 100vh;
    font-family: var(--kg-font-family-base);
    font-size: var(--kg-font-size-md);
    line-height: var(--kg-line-height-base)
}

.kg-archive-realizacje {
    background: var(--kg-white);
    padding-bottom: 0;
}

.kg-archive-realizacje .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
}

.kg-archive-realizacje .kg-archive-hero {
    display: block;
    background: #fff;
    border-bottom: 1px solid #e8eef5;
}

.kg-archive-realizacje .kg-archive-hero .container {
    padding-top: 24px;
    padding-bottom: 20px;
}

.kg-archive-realizacje .kg-archive-hero__eyebrow {
    margin: 0;
    color: #6f8197;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kg-archive-realizacje .kg-archive-hero__title {
    margin: 6px 0 0;
    color: #172435;
    font-size: clamp(1.45rem, 1.25rem + .7vw, 2rem);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.01em;
}

.kg-archive-realizacje .kg-archive-hero__lead {
    margin: 9px 0 0;
    color: #4f6177;
    font-size: clamp(.95rem, .93rem + .18vw, 1.04rem);
    line-height: 1.66;
    max-width: 70ch;
}

.kg-archive-realizacje .kg-toolbar {
    background: var(--kg-white);
}

body.kg-toolbar-stuck #header.ct-header,
body.kg-toolbar-stuck header.ct-header,
body.kg-toolbar-stuck header#header,
body.kg-toolbar-stuck .ct-sticky-container,
body.kg-toolbar-stuck #wpadminbar,
body.kg-toolbar-stuck .site-header {
    transform: translateY(-100%) !important;
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none;
    z-index: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important
}

body.kg-drawer-open #header.ct-header,
body.kg-drawer-open header.ct-header,
body.kg-drawer-open header#header,
body.kg-drawer-open .ct-sticky-container,
body.kg-drawer-open #wpadminbar {
    z-index: -1 !important;
    position: relative !important
}

.kg-single .container,
.kg-cta .container,
.kg-related .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--kg-space-sm)
}

.kg-breadcrumb {
    padding: var(--kg-space-sm) 0;
    background: var(--kg-white);
    border-bottom: 1px solid var(--kg-gray-light)
}

.kg-breadcrumb .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--kg-space-md)
}

.kg-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    flex-wrap: nowrap;
    overflow: hidden
}

.kg-breadcrumb-list li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0
}

.kg-breadcrumb-list .current {
    flex-shrink: 1;
    min-width: 0;
    color: var(--kg-dark);
    font-weight: 500
}

.kg-breadcrumb-list a {
    color: var(--kg-gray);
    text-decoration: none;
    font-weight: 400
}

.kg-breadcrumb-list a:hover {
    color: var(--kg-primary)
}

.kg-breadcrumb-list .separator {
    color: var(--kg-gray-light);
    flex-shrink: 0
}

@media(min-width: 768px) {
    .kg-breadcrumb {
        padding: var(--kg-space-md) 0
    }

    .kg-breadcrumb-list {
        font-size: 14px;
        gap: 10px
    }
}

.kg-hero {
    background: linear-gradient(135deg, var(--kg-dark) 0%, var(--kg-darker) 100%);
    padding: 3rem 0;
    position: relative
}

.kg-hero--compact {
    padding: 2rem 0
}

.kg-hero .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1
}

.kg-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center
}

.kg-hero-content {
    color: var(--kg-white)
}

.kg-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(249, 115, 22, .15);
    color: var(--kg-primary);
    padding: .5rem 1rem;
    border-radius: 50px;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(249, 115, 22, .3)
}

.kg-hero-badge .count {
    background: var(--kg-primary);
    color: var(--kg-white);
    padding: .25rem .75rem;
    border-radius: 50px;
    font-weight: 700
}

.kg-hero-title {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 .5rem
}

.kg-hero-title span {
    color: var(--kg-primary)
}

.kg-hero-subtitle {
    font-size: 1rem;
    color: var(--kg-gray-light);
    margin-bottom: 1.5rem;
    line-height: 1.7
}

.kg-hero-categories {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem
}

.kg-hero-category {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: hsla(0, 0%, 100%, .05);
    padding: .875rem 1rem;
    border-radius: var(--kg-radius-sm);
    border: 1px solid hsla(0, 0%, 100%, .1);
    transition: var(--kg-transition);
    text-decoration: none;
    color: inherit
}

.kg-hero-category:hover {
    background: rgba(249, 115, 22, .1);
    border-color: var(--kg-primary);
    transform: translateY(-2px)
}

.kg-hero-category-icon {
    width: 36px;
    height: 36px;
    background: var(--kg-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.kg-hero-category-icon svg {
    color: var(--kg-white)
}

.kg-hero-category-info h4 {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--kg-white)
}

.kg-hero-category-info span {
    font-size: .8rem;
    color: var(--kg-gray-light)
}

.kg-hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap
}

.kg-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.25rem;
    border-radius: var(--kg-radius-sm);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: var(--kg-transition);
    border: none;
    cursor: pointer
}

.kg-btn-primary {
    background: var(--kg-primary);
    color: var(--kg-white)
}

.kg-btn-primary:hover {
    background: var(--kg-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(249, 115, 22, .3)
}

.kg-btn-outline {
    background: rgba(0, 0, 0, 0);
    color: var(--kg-white);
    border: 2px solid hsla(0, 0%, 100%, .3)
}

.kg-btn-outline:hover {
    border-color: var(--kg-white);
    background: hsla(0, 0%, 100%, .1)
}

.kg-btn-small {
    padding: .5rem 1rem;
    font-size: .85rem
}

.kg-hero-slideshow {
    position: relative;
    border-radius: var(--kg-radius);
    overflow: hidden;
    aspect-ratio: 16/9;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5)
}

.kg-hero-slideshow>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.kg-hero-placeholder {
    background: linear-gradient(135deg, var(--kg-primary), var(--kg-primary-dark));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kg-white)
}

.kg-slideshow {
    position: relative;
    width: 100%;
    height: 100%
}

.kg-slideshow-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out
}

.kg-slideshow-slide.active {
    opacity: 1
}

.kg-slideshow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.kg-slideshow-dots {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem
}

.kg-slideshow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: hsla(0, 0%, 100%, .4);
    border: none;
    cursor: pointer;
    transition: var(--kg-transition);
    padding: 0
}

.kg-slideshow-dot.active {
    background: var(--kg-primary);
    width: 24px;
    border-radius: 4px
}

.kg-accordion {
    background: var(--kg-white);
    padding: 2rem 0
}

.kg-accordion .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem
}

.kg-accordion-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--kg-dark)
}

.kg-accordion-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem
}

.kg-category-tile {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--kg-radius);
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: var(--kg-white);
    display: block
}

.kg-category-tile-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .5s ease
}

.kg-category-tile:hover .kg-category-tile-bg {
    transform: scale(1.1)
}

.kg-category-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
    transition: var(--kg-transition)
}

.kg-category-tile:hover::before {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.8) 0%, rgba(234, 88, 12, 0.6) 100%)
}

.kg-category-tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.25rem;
    z-index: 2
}

.kg-category-tile-count {
    display: inline-block;
    background: var(--kg-primary);
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: .5rem
}

.kg-category-tile h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700
}

.kg-category-tile p {
    margin: .5rem 0 0;
    font-size: .85rem;
    opacity: .9
}

.kg-toolbar {
    background: var(--kg-white);
    border-bottom: 1px solid var(--kg-gray-light);
    position: sticky;
    top: 0;
    z-index: var(--kg-z-sticky);
    transition: box-shadow var(--kg-transition-fast), background-color var(--kg-transition-fast), transform .25s ease, opacity .2s ease;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px)
}

/* Keep theme header/dropdowns above archive toolbar when navigation is visible. */
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) #header.ct-header,
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) header.ct-header,
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) header#header,
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) .ct-sticky-container,
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) .site-header {
    z-index: 100200 !important;
}

body:not(.kg-hide-wp-nav):not(.kg-drawer-open) .ct-header .sub-menu,
body:not(.kg-hide-wp-nav):not(.kg-drawer-open) .ct-header [class*="dropdown"] {
    z-index: 100210 !important;
}

.kg-toolbar.is-scrolled {
    box-shadow: var(--kg-shadow-sm)
}

@keyframes kgSlideDown {
    from {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

body.kg-hide-wp-nav .ct-header,
body.kg-hide-wp-nav header.site-header,
body.kg-hide-wp-nav #masthead,
body.kg-hide-wp-nav .site-header {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .25s ease, opacity .2s ease !important
}

.kg-toolbar .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--kg-space-sm) var(--kg-space-md)
}

.kg-toolbar-desktop-layout {
    display: none
}

.kg-toolbar-left-col {
    min-width: 0
}

.kg-toolbar-search input,
.kg-toolbar-sort select {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--kg-gray-light);
    border-radius: 8px;
    background: #fff;
    color: var(--kg-dark);
    font-size: 14px
}

.kg-toolbar-search input:focus,
.kg-toolbar-sort select:focus {
    outline: 2px solid rgba(249, 115, 22, .28);
    outline-offset: 1px;
    border-color: var(--kg-primary)
}

.kg-clear-filters {
    border: 0;
    background: rgba(0, 0, 0, 0);
    color: var(--kg-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 2px 4px
}

.kg-clear-filters:hover {
    text-decoration: underline
}

.kg-toolbar-mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 44px
}

.kg-toolbar-desktop {
    display: none
}

.kg-filter-trigger-desktop {
    display: none
}

.kg-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    color: var(--kg-dark);
    border: 1px solid #d5dde8;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    min-height: 42px;
    transition: all .2s ease
}

.kg-filter-trigger:hover {
    border-color: #fdba74;
    background: #fff7ed
}

.kg-filter-trigger:focus-visible {
    outline: 2px solid var(--kg-primary);
    outline-offset: 2px;
    border-color: #fdba74
}

.kg-filter-trigger:active {
    transform: scale(0.98)
}

.kg-filter-trigger svg {
    width: 16px;
    height: 16px;
    opacity: .7
}

.kg-toolbar-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--kg-gray);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px
}

.kg-toolbar-count strong {
    color: var(--kg-dark);
    font-weight: 600
}

@media(min-width: 768px) {
    .kg-toolbar-mobile {
        display: none
    }

    .kg-toolbar-desktop-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 6px
    }

    .kg-toolbar-desktop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0;
        padding-bottom: 4px
    }

    .kg-toolbar-left {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center
    }

    .kg-toolbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto
    }

    .kg-filter-trigger-desktop {
        display: inline-flex;
        min-height: 38px;
        padding: 8px 14px;
        font-size: 12px;
        background: #f8fafc;
        border-color: #d8e1ec
    }

    .kg-toolbar-count {
        font-size: 14px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px;
        border-radius: 999px;
        border: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #6b7280
    }
}

@media(max-width: 767px) {
    .kg-toolbar .container {
        padding: 10px 16px
    }

    .kg-toolbar-desktop-layout,
    .kg-toolbar-desktop {
        display: none
    }

    .kg-toolbar-subs,
    .kg-filter-trigger-desktop {
        display: none
    }
}

.kg-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--kg-space-sm);
    padding: var(--kg-space-sm) var(--kg-space-md);
    min-height: var(--kg-touch-min);
    border: 1px solid var(--kg-gray-light);
    border-radius: var(--kg-radius-full);
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-dark);
    text-decoration: none;
    transition: border-color var(--kg-transition-fast), color var(--kg-transition-fast), background-color var(--kg-transition-fast);
    white-space: nowrap;
    cursor: pointer
}

.kg-pill:hover {
    border-color: #fdba74;
    background: #fffaf5
}

.kg-pill:focus-visible {
    outline: 2px solid var(--kg-primary);
    outline-offset: 2px
}

.kg-pill--active {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c
}

.kg-pill-count {
    font-size: 11px;
    color: #767676
}

.kg-pill--active .kg-pill-count {
    color: #9a3412
}

.kg-toolbar-subs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0 4px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.kg-toolbar-subs::-webkit-scrollbar {
    display: none
}

.kg-pill-sm {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    background: var(--kg-white);
    border: 1px solid var(--kg-gray-light);
    border-radius: 20px;
    color: #666;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--kg-transition);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer
}

.kg-pill-sm:hover {
    border-color: #fdba74;
    color: #9a3412;
    background: #fffaf5
}

.kg-pill-sm:focus-visible {
    outline: 2px solid var(--kg-primary);
    outline-offset: 2px
}

.kg-pill-sm.kg-pill--active {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c
}

@media(width <=767px) {
    .kg-toolbar-subs {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 0
    }

    .kg-pill-sm {
        padding: 4px 12px;
        font-size: 11px;
        height: 26px
    }
}

.kg-filter-badge {
    background: var(--kg-primary);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 2px
}

@media(min-width: 1024px) {
    .kg-toolbar .container {
        padding: 12px 20px
    }

    .kg-toolbar-desktop-layout {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start
    }

    .kg-toolbar-desktop {
        min-height: 52px;
        gap: 14px
    }

    .kg-toolbar-left {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 2px
    }

    .kg-toolbar-left::-webkit-scrollbar {
        display: none
    }

    .kg-toolbar-right {
        flex-shrink: 0
    }

    .kg-pill {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 13px;
        background: var(--kg-white);
        border-color: #dcdfe4
    }

    .kg-pill:hover {
        background: #fff;
        border-color: #fdba74;
        box-shadow: none
    }

    .kg-pill--active {
        background: #fff7ed;
        border-color: #fdba74;
        color: #c2410c;
        box-shadow: none
    }

    .kg-toolbar-subs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding: 8px 0 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: 0;
        margin-top: 0
    }

    .kg-toolbar-subs::-webkit-scrollbar {
        display: none
    }
}

.kg-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(8, 12, 20, 0.34);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.24s ease, visibility 0.24s ease;
	z-index: 100010;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.kg-drawer-overlay--open {
	opacity: 1;
	visibility: visible;
}

.kg-drawer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: min(100%, 760px);
	margin: 0 auto;
	height: min(86vh, 760px);
	min-height: min(420px, calc(100vh - 48px));
	background: #f6f8fb;
	transform: translateY(100%);
	transition: transform 0.26s cubic-bezier(0.2, 0.7, 0, 1), box-shadow 0.2s ease;
	z-index: 100020 !important;
	display: flex;
	flex-direction: column;
	box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.2);
	border-top: 1px solid #e5ebf4;
	border-radius: 18px 18px 0 0;
	overscroll-behavior: contain;
}

.kg-drawer--open {
	transform: translateY(0);
}

.kg-drawer-header {
	flex-shrink: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: max(env(safe-area-inset-top), 12px) 16px 10px;
	border-bottom: 1px solid #e6ecf5;
	background: #f6f8fb;
}

.kg-drawer-header h3 {
	margin: 0;
	font-family: var(--kg-font-family-base);
	font-size: 0.78rem;
	font-weight: var(--kg-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f97316;
}

.kg-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #eef2f7;
	border: 1px solid #dbe3ee;
	border-radius: 10px;
	cursor: pointer;
	color: #1f2937;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kg-drawer-close svg {
	width: 18px;
	height: 18px;
}

.kg-drawer-close:hover {
	background: #e2e8f0;
	border-color: #c7d1df;
	color: #111827;
}

.kg-drawer-close:focus-visible,
.kg-drilldown-back:focus-visible,
.kg-drilldown-next:focus-visible,
.kg-drilldown-link:focus-visible,
.kg-clear-filters--drawer:focus-visible,
.kg-drawer-action:focus-visible {
	outline: 2px solid var(--kg-primary);
	outline-offset: 2px;
}

.kg-drilldown-link:focus-visible {
	background: linear-gradient(90deg, rgba(249, 115, 22, 0.08) 0%, transparent 100%);
}

.kg-drawer-body {
	flex: 1;
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 0;
	overscroll-behavior: contain;
}

.kg-drawer-meta {
	flex-shrink: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 8px 14px;
	border-bottom: 1px solid #e6ecf5;
	background: #f6f8fb;
}

.kg-drawer-breadcrumb {
	margin: 0;
	color: #64748b;
	font-family: var(--kg-font-family-base);
	font-size: 0.76rem;
	font-weight: var(--kg-weight-medium);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kg-drawer-footer {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px max(env(safe-area-inset-bottom), 12px);
	border-top: 1px solid #e6ecf5;
	background: #f6f8fb;
}

.kg-clear-filters--drawer {
	border: none;
	background: transparent;
	padding: 6px 0;
	font-family: var(--kg-font-family-base);
	font-size: 0.76rem;
	font-weight: var(--kg-weight-medium);
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	cursor: pointer;
}

.kg-clear-filters--drawer:hover {
	color: #334155;
}

.kg-drawer-action {
	border: 1px solid #d5deea;
	background: #eef2f7;
	color: #1f2937;
	border-radius: 10px;
	padding: 8px 12px;
	min-height: 38px;
	font-family: var(--kg-font-family-base);
	font-size: 0.82rem;
	font-weight: var(--kg-weight-medium);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kg-drawer-action:hover {
	background: #e2e8f0;
	border-color: #c4d0df;
	color: #0f172a;
}

.kg-drilldown-container {
	position: relative;
	width: 100%;
	height: 100%;
	flex: 1;
	min-height: 0;
	background: #f6f8fb;
}

.kg-drilldown-panel {
	position: absolute;
	inset: 0;
	background: #f6f8fb;
	transform: translateX(100%);
	transition: transform 0.22s ease;
	z-index: 10;
	display: flex;
	flex-direction: column;
	visibility: hidden;
}

.kg-drilldown-panel.is-active {
	transform: translateX(0);
	z-index: 20;
	visibility: visible;
}

.kg-drilldown-panel[data-depth="0"] {
	transform: translateX(0);
	z-index: 5;
	visibility: visible;
}

.kg-drilldown-header {
	flex-shrink: 0;
	padding: 10px 14px;
	background: #f6f8fb;
	border-bottom: 1px solid #e6ecf5;
	display: flex;
	align-items: center;
	gap: 10px;
	position: sticky;
	top: 0;
	z-index: 30;
}

.kg-drilldown-back {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font-family: var(--kg-font-family-base);
	font-size: 0.84rem;
	font-weight: var(--kg-weight-regular);
	color: #6b7280;
	transition: color 0.2s ease;
}

.kg-drilldown-back:hover {
	color: #1f2937;
}

.kg-drilldown-back svg {
	width: 18px;
	height: 18px;
}

.kg-drilldown-current {
	font-family: var(--kg-font-family-base);
	font-size: 0.9rem;
	font-weight: var(--kg-weight-medium);
	color: #111827;
	letter-spacing: 0;
}

.kg-drilldown-list {
	list-style: none;
	padding: 6px 0;
	margin: 0;
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #d3dce8 transparent;
}

.kg-drilldown-item {
	display: block;
	background: none;
	border-bottom: 1px solid #e6edf6;
}

.kg-drilldown-item:last-child {
	border-bottom: none;
}

.kg-drilldown-row {
	display: flex;
	align-items: stretch;
	min-height: 52px;
	transition: background-color 0.15s ease;
}

.kg-drilldown-row:active {
	background: #eef3f9;
}

.kg-drilldown-link {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	text-decoration: none;
	color: #243043;
	font-family: var(--kg-font-family-base);
	font-size: 1rem;
	line-height: 1.4;
	font-weight: var(--kg-weight-regular);
	letter-spacing: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* Keep count column aligned when row has no "next" button. */
.kg-drilldown-row>.kg-drilldown-link:last-child {
	padding-right: 72px;
}

.kg-drilldown-link.active {
	color: var(--kg-primary-dark);
	font-weight: var(--kg-weight-medium);
	background: rgba(249, 115, 22, 0.08);
	box-shadow: inset 2px 0 0 var(--kg-primary);
}

.kg-drilldown-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kg-count-text {
	font-family: var(--kg-font-family-base);
	font-size: 0.74rem;
	color: #94a3b8;
	font-weight: var(--kg-weight-regular);
	margin-left: 0;
	min-width: 3ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
	opacity: 0.95;
}

.kg-drilldown-next {
	width: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #64748b;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kg-drilldown-next svg {
	width: 18px;
	height: 18px;
}

.kg-drilldown-next:hover {
	color: #334155;
	background: rgba(15, 23, 42, 0.05);
}

@media(max-width: 1023px) {
	.kg-drawer {
		height: min(88vh, 760px);
	}
}

@media(min-width: 768px) and (max-width: 1023px) {
	.kg-drawer {
		max-width: min(100%, 760px);
	}

	.kg-drawer-header {
		padding: max(env(safe-area-inset-top), 14px) 18px 12px;
	}

	.kg-drawer-meta,
	.kg-drawer-footer {
		padding-left: 18px;
		padding-right: 18px;
	}
}

@media(min-width: 1024px) {
	.kg-drawer-overlay {
		background: rgba(9, 13, 20, 0.28);
		backdrop-filter: blur(1.5px);
		-webkit-backdrop-filter: blur(1.5px);
	}

	.kg-drawer {
		top: 0;
		right: 0;
		left: auto;
		bottom: 0;
		width: min(92vw, 440px);
		max-width: 440px;
		height: 100vh;
		min-height: 0;
		margin: 0;
		transform: translateX(100%);
		border-radius: 0;
		border-top: 0;
		border-left: 1px solid #dbe3ee;
		box-shadow: -14px 0 34px rgba(15, 23, 42, 0.18);
	}

	.kg-drawer--open {
		transform: translateX(0);
	}

	.kg-drawer-header {
		padding: max(env(safe-area-inset-top), 16px) 18px 12px;
	}

	.kg-drawer-breadcrumb {
		font-size: 0.72rem;
	}
}

/* Polished category drawer */
.kg-drawer-overlay {
	background: rgba(15, 23, 42, 0.42);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.kg-drawer {
	background: #fff;
	border-color: #e2e8f0;
	box-shadow: -18px 0 42px rgba(15, 23, 42, 0.2);
}

.kg-drawer-header,
.kg-drawer-meta,
.kg-drawer-footer,
.kg-drilldown-container,
.kg-drilldown-panel {
	background: #fff;
}

.kg-drawer-header {
	padding: 18px 20px 14px;
}

.kg-drawer-close,
.kg-drawer-action {
	border-radius: 12px;
}

.kg-drawer-close:hover,
.kg-drawer-action:hover {
	background: #fff7ed;
	border-color: #fdba74;
	color: #9a3412;
}

.kg-drawer-meta {
	padding: 10px 20px;
}

.kg-drawer-footer {
	padding: 14px 20px max(env(safe-area-inset-bottom), 14px);
}

.kg-drilldown-list {
	padding: 10px 12px 14px;
}

.kg-drilldown-item {
	border-bottom: 0;
}

.kg-drilldown-row {
	min-height: 56px;
	border-radius: 6px;
	overflow: hidden;
}

.kg-drilldown-row:hover {
	background: #f8fafc;
}

.kg-drilldown-link {
	padding: 12px;
	color: #1f2937;
	font-size: 0.98rem;
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.kg-drilldown-link:hover {
	background: #f8fafc;
	border-color: #e2e8f0;
	color: #111827;
}

.kg-drilldown-row > .kg-drilldown-link:last-child {
	padding-right: 12px;
}

.kg-drilldown-link.active {
	background: #fff;
	border-color: #f97316;
	color: #c2410c;
	box-shadow: none;
	font-weight: 650;
}

.kg-count-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	margin-left: 12px;
	padding: 0 8px;
	border-radius: 999px;
	background: #eef2f7;
	color: #64748b;
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1;
}

.kg-drilldown-link:hover .kg-count-text,
.kg-drilldown-link.active .kg-count-text {
	background: #fff7ed;
	color: #9a3412;
}

.kg-drilldown-next {
	width: 48px;
	color: #94a3b8;
}

.kg-drilldown-next:hover {
	background: #f8fafc;
	color: #f97316;
}

.kg-drilldown-header {
	background: #f8fafc;
	padding: 12px 16px;
}

.kg-drilldown-back {
	max-width: 100%;
	min-height: 36px;
	padding: 0 10px 0 4px;
	border-radius: 10px;
	color: #475569;
}

.kg-drilldown-back:hover {
	background: #fff7ed;
	color: #9a3412;
}

@media (max-width: 767px) {
	.kg-drawer-overlay {
		background: rgba(15, 23, 42, 0.5);
	}

	.kg-drawer {
		max-width: 100%;
		height: min(82vh, 720px);
		min-height: min(420px, calc(100vh - 72px));
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -18px 42px rgba(15, 23, 42, 0.24);
	}

	.kg-drawer-header {
		position: relative;
		padding-top: 24px;
	}

	.kg-drawer-header::before {
		content: "";
		position: absolute;
		top: 10px;
		left: 50%;
		width: 42px;
		height: 4px;
		border-radius: 999px;
		background: #cbd5e1;
		transform: translateX(-50%);
	}

	.kg-drilldown-list {
		padding: 8px 10px 16px;
	}

	.kg-drilldown-link {
		font-size: 0.95rem;
	}
}

@media(prefers-reduced-motion: reduce) {

	.kg-drawer,
	.kg-drawer-overlay,
	.kg-drilldown-panel {
		transition-duration: .01ms !important;
	}
}

.kg-grid-section {
    padding: 0.9rem 0 3rem;
    background: #fff
}

.kg-grid-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0
}

.kg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 8px;
    contain: layout style
}

@media(min-width: 768px) {
    .kg-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0 12px
    }
}

@media(min-width: 1024px) {
    .kg-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 0 16px
    }
}

@media(min-width: 1400px) {
    .kg-grid {
        gap: 24px;
        padding: 0
    }
}

@keyframes kgFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.kg-animate-in {
    animation: kgFadeInUp var(--kg-transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.kg-card:nth-child(1) {
    animation-delay: 0ms
}

.kg-card:nth-child(2) {
    animation-delay: 50ms
}

.kg-card:nth-child(3) {
    animation-delay: 100ms
}

.kg-card:nth-child(4) {
    animation-delay: 150ms
}

.kg-card:nth-child(5) {
    animation-delay: 200ms
}

.kg-card:nth-child(6) {
    animation-delay: 250ms
}

.kg-card:nth-child(7) {
    animation-delay: 300ms
}

.kg-card:nth-child(8) {
    animation-delay: 350ms
}

.kg-scroll-sentinel {
    width: 100%;
    height: 20px;
    margin-top: 20px
}

.kg-scroll-loading {
    display: none;
    justify-content: center;
    padding: 20px
}

.kg-scroll-loading.is-loading {
    display: flex
}

.kg-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(249, 115, 22, .3);
    border-radius: 50%;
    border-top-color: var(--kg-primary);
    animation: kgSpin 1s linear infinite
}

@keyframes kgSpin {
    to {
        transform: rotate(360deg)
    }
}

.kg-loading {
    position: fixed;
    inset: 0;
    background: hsla(0, 0%, 100%, .8);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center
}

.kg-load-more-wrap {
    display: flex;
    justify-content: center;
    margin: 16px 0 0
}

.kg-no-results-actions {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px
}

.kg-card {
    text-decoration: none;
    color: inherit;
    display: block;
    background: var(--kg-white);
    contain: layout paint;
    border-radius: 8px;
    overflow: hidden;
    border: none
}

.kg-card-image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: var(--kg-gray-lighter)
}

.kg-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .4s ease
}

.kg-card-img--primary {
    z-index: 1
}

.kg-card-img--hover {
    z-index: 2;
    opacity: 0
}

@media(hover: hover) {

    .kg-card:hover,
    .kg-card:focus,
    .kg-card:active {
        transform: none;
        box-shadow: none !important;
        border: none !important;
        outline: none !important
    }

    .kg-card--has-hover:hover .kg-card-img--hover {
        opacity: 1
    }
}

.kg-card-placeholder {
    background: linear-gradient(135deg, var(--kg-gray-light), var(--kg-gray-lighter));
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    color: var(--kg-gray)
}

.kg-card-gallery-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 3
}

.kg-card-content {
    padding: 12px 16px 16px;
    text-align: left !important;
    display: block
}

.kg-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--kg-dark);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.01em;
    text-align: left !important
}

.kg-card-meta {
    font-size: 11px;
    color: #767676;
    margin: 4px 0 0;
    text-align: left !important
}

.kg-category-tile--active::before {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(234, 88, 12, 0.7) 100%) !important
}

.kg-category-tile--active .kg-category-tile-count {
    background: var(--kg-white);
    color: var(--kg-primary)
}

.kg-single {
    background: var(--kg-white);
    padding: 0 0 var(--kg-space-sm)
}

.kg-single .container {
    max-width: 900px;
    padding: 0 20px
}

.kg-single-header {
    padding: var(--kg-space-md) 0 var(--kg-space-md)
}

.kg-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    margin-bottom: var(--kg-space-md);
    font-size: 13px;
    font-weight: 500;
    color: var(--kg-gray);
    text-decoration: none;
    background: var(--kg-gray-lighter);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--kg-transition-fast)
}

.kg-back-btn:hover {
    background: var(--kg-gray-light);
    color: var(--kg-dark)
}

.kg-back-btn svg {
    flex-shrink: 0
}

.kg-single-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--kg-dark);
    margin: 0;
    line-height: 1.25
}

.kg-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 10px
}

.kg-single-description {
    margin: 0 0 1rem;
    color: #2f3b4b;
    line-height: 1.72
}

.kg-single [id^=kg-section-],
.km-single-akcesoria [id^=km-] {
    scroll-margin-top: 110px
}

.kg-gallery {
    margin: var(--kg-space-md) 0
}

.kg-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kg-space-sm)
}

.kg-gallery-item {
    aspect-ratio: 4/3;
    border-radius: var(--kg-radius-sm);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--kg-gray-lighter)
}

.kg-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease
}

.kg-gallery-item:hover img {
    transform: scale(1.05)
}

.kg-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    opacity: 0;
    transition: opacity var(--kg-transition);
    pointer-events: none
}

.kg-gallery-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%) scale(0.8);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
    background-size: contain;
    opacity: 0;
    transition: all var(--kg-transition);
    z-index: 2;
    pointer-events: none
}

.kg-gallery-item:hover::after {
    opacity: 1
}

.kg-gallery-item:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1)
}

.kg-no-results {
    grid-column: 1/-1;
    text-align: center;
    padding: var(--kg-space-xl) 0;
    color: var(--kg-gray)
}

.kg-no-results-icon {
    margin-bottom: var(--kg-space-md);
    opacity: .3
}

.kg-no-results-icon svg {
    width: 48px;
    height: 48px
}

.kg-no-results h3 {
    margin: 0 0 var(--kg-space-sm);
    color: var(--kg-dark)
}

.kg-nav-container {
    padding: var(--kg-space-md) 20px;
    border-top: 1px solid var(--kg-gray-light);
    margin-top: var(--kg-space-sm);
    background: var(--kg-white)
}

.kg-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 400px;
    margin: 0 auto
}

.kg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 12px 16px;
    background: var(--kg-gray-lighter);
    border-radius: 10px;
    transition: all var(--kg-transition-fast);
    color: var(--kg-dark);
    flex: 1;
    justify-content: center
}

.kg-nav-item:hover {
    background: var(--kg-gray-light)
}

.kg-nav-arrow {
    width: 16px;
    height: 16px;
    color: var(--kg-gray);
    flex-shrink: 0
}

.kg-nav-item:hover .kg-nav-arrow {
    color: var(--kg-primary)
}

.kg-nav-thumb {
    width: 48px;
    height: 48px;
    aspect-ratio: 1;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
    background: var(--kg-gray-light)
}

.kg-nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.kg-nav-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.kg-nav-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--kg-gray);
    text-transform: uppercase;
    letter-spacing: .5px
}

.kg-nav-title {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--kg-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px
}

.kg-nav-item.kg-nav-prev {
    flex-direction: row
}

.kg-nav-item.kg-nav-next {
    flex-direction: row-reverse
}

.kg-nav-item.kg-nav-next .kg-nav-content {
    text-align: right
}

.kg-nav-empty {
    flex: 1;
    visibility: hidden
}

.kg-related {
    padding: var(--kg-space-xl) var(--kg-space-sm);
    background: var(--kg-white);
    margin-top: var(--kg-space-sm);
    border-top: 1px solid var(--kg-gray-light)
}

.kg-related .container {
    max-width: 1200px;
    margin: 0 auto
}

.kg-related-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--kg-dark);
    margin-bottom: var(--kg-space-lg)
}

.kg-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kg-space-sm)
}

@media(min-width: 768px) {
    .kg-related {
        padding: 48px var(--kg-space-lg)
    }

    .kg-related-title {
        font-size: 13px
    }

    .kg-related-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px
    }
}

@media(min-width: 768px) {
    .kg-nav-container {
        padding: 2rem var(--kg-space-lg);
        border-top: 1px solid var(--kg-gray-light)
    }

    .kg-nav-row {
        max-width: 800px;
        gap: 40px
    }

    .kg-nav-item {
        padding: 16px 20px;
        background: var(--kg-gray-lighter);
        border-radius: 10px;
        justify-content: flex-start
    }

    .kg-nav-item:hover {
        background: var(--kg-gray-light)
    }

    .kg-nav-thumb {
        width: 70px;
        height: 52px;
        border-radius: 6px
    }

    .kg-nav-title {
        display: block;
        font-size: 14px;
        max-width: 180px
    }

    .kg-nav-label {
        font-size: 11px
    }

    .kg-nav-arrow {
        width: 22px;
        height: 22px
    }
}

.kg-cta {
    background: linear-gradient(135deg, var(--kg-dark) 0%, var(--kg-darker) 100%);
    padding: 3rem 0;
    text-align: center
}

.kg-cta .container {
    max-width: 700px
}

.kg-cta h2 {
    color: var(--kg-white);
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 .75rem
}

.kg-cta p {
    color: var(--kg-gray-light);
    font-size: 1rem;
    margin-bottom: 1.5rem
}

.kg-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap
}

.kg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .375rem;
    margin-top: 2rem
}

.kg-pagination a,
.kg-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--kg-radius-sm);
    font-size: .875rem;
    color: var(--kg-gray);
    text-decoration: none;
    transition: var(--kg-transition)
}

.kg-pagination a:hover {
    background: var(--kg-gray-lighter);
    color: var(--kg-dark)
}

.kg-pagination .current {
    background: var(--kg-primary);
    color: var(--kg-white);
    font-weight: 600
}

.kg-pagination .dots {
    color: var(--kg-gray-light)
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .7
    }
}

.kg-animate-fadeup {
    animation: fadeUp .4s ease-out forwards;
    opacity: 0
}

.kg-card:nth-child(1) {
    animation-delay: 50ms
}

.kg-card:nth-child(2) {
    animation-delay: 100ms
}

.kg-card:nth-child(3) {
    animation-delay: 150ms
}

.kg-card:nth-child(4) {
    animation-delay: 200ms
}

.kg-card:nth-child(5) {
    animation-delay: 250ms
}

.kg-card:nth-child(6) {
    animation-delay: 300ms
}

.kg-card:nth-child(7) {
    animation-delay: 350ms
}

.kg-card:nth-child(8) {
    animation-delay: 400ms
}

.kg-card:nth-child(9) {
    animation-delay: 450ms
}

.kg-card:nth-child(10) {
    animation-delay: 500ms
}

.kg-card:nth-child(11) {
    animation-delay: 550ms
}

.kg-card:nth-child(12) {
    animation-delay: 600ms
}

.kg-gallery-item {
    animation: scaleUp .3s ease-out forwards;
    opacity: 0
}

.kg-gallery-item:nth-child(1) {
    animation-delay: 30ms
}

.kg-gallery-item:nth-child(2) {
    animation-delay: 60ms
}

.kg-gallery-item:nth-child(3) {
    animation-delay: 90ms
}

.kg-gallery-item:nth-child(4) {
    animation-delay: 120ms
}

.kg-gallery-item:nth-child(5) {
    animation-delay: 150ms
}

.kg-gallery-item:nth-child(6) {
    animation-delay: 180ms
}

.kg-gallery-item:nth-child(7) {
    animation-delay: 210ms
}

.kg-gallery-item:nth-child(8) {
    animation-delay: 240ms
}

.kg-gallery-item:nth-child(9) {
    animation-delay: 270ms
}

.kg-gallery-item:nth-child(10) {
    animation-delay: 300ms
}

.kg-gallery-item:nth-child(11) {
    animation-delay: 330ms
}

.kg-gallery-item:nth-child(12) {
    animation-delay: 360ms
}

.kg-gallery-item:nth-child(13) {
    animation-delay: 390ms
}

.kg-gallery-item:nth-child(14) {
    animation-delay: 420ms
}

.kg-gallery-item:nth-child(15) {
    animation-delay: 450ms
}

.kg-gallery-item:nth-child(16) {
    animation-delay: 480ms
}

.kg-gallery-item:nth-child(17) {
    animation-delay: 510ms
}

.kg-gallery-item:nth-child(18) {
    animation-delay: 540ms
}

.kg-gallery-item:nth-child(19) {
    animation-delay: 570ms
}

.kg-gallery-item:nth-child(20) {
    animation-delay: 600ms
}

.kg-related-grid .kg-card {
    animation: fadeUp .35s ease-out forwards;
    opacity: 0
}

.kg-related-grid .kg-card:nth-child(1) {
    animation-delay: 150ms
}

.kg-related-grid .kg-card:nth-child(2) {
    animation-delay: 200ms
}

.kg-related-grid .kg-card:nth-child(3) {
    animation-delay: 250ms
}

.kg-related-grid .kg-card:nth-child(4) {
    animation-delay: 300ms
}

.kg-related-grid .kg-card:nth-child(5) {
    animation-delay: 350ms
}

.kg-related-grid .kg-card:nth-child(6) {
    animation-delay: 400ms
}

.kg-related-grid .kg-card:nth-child(7) {
    animation-delay: 450ms
}

.kg-related-grid .kg-card:nth-child(8) {
    animation-delay: 500ms
}

.kg-card {
    transition: transform var(--kg-transition), box-shadow var(--kg-transition)
}

@media(hover: hover) {
    .kg-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--kg-shadow-lg)
    }
}

.kg-nav-item {
    transition: transform var(--kg-transition-fast), background var(--kg-transition-fast)
}

@media(hover: hover) {
    .kg-nav-item:hover {
        transform: translateY(-2px)
    }
}

.kg-loading {
    background: linear-gradient(90deg, var(--kg-gray-lighter) 0%, var(--kg-white) 50%, var(--kg-gray-lighter) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite
}

@media(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }
}

.kg-archive-wrapper,
.kg-single {
    overflow-x: hidden;
    max-width: 100vw
}

@media(width >=768px) {
    .kg-hero {
        padding: 4rem 0
    }

    .kg-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem
    }

    .kg-hero-title {
        font-size: 2.5rem
    }

    .kg-hero-categories {
        flex-flow: row wrap
    }

    .kg-hero-slideshow {
        aspect-ratio: 4/3
    }

    .kg-accordion-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .kg-category-tile {
        aspect-ratio: 16/10
    }

    .kg-filter-bar-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    .kg-search-wrapper {
        max-width: 350px
    }

    .kg-card-content {
        padding: 12px 4px 20px
    }

    .kg-card-title {
        font-size: 14px
    }

    .kg-single-title {
        font-size: 2rem
    }

    .kg-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem
    }

    .kg-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    .kg-nav-container {
        padding: 1.5rem 0;
        margin-top: 2rem
    }
}

@media(width >=1024px) {
    .kg-hero-title {
        font-size: 3rem
    }

    .kg-accordion-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .kg-card-content {
        padding: 14px 16px 24px;
        text-align: left !important
    }

    .kg-single-title {
        font-size: 36px
    }

    .kg-gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px
    }

    .kg-gallery-item:first-child {
        grid-column: span 2;
        grid-row: span 2
    }
}

@media(width <=767px) {
    .kg-archive-realizacje .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .kg-archive-realizacje .kg-archive-hero .container {
        padding-top: 18px;
        padding-bottom: 14px;
    }

    .kg-archive-realizacje .kg-archive-hero__title {
        font-size: clamp(1.22rem, 5.2vw, 1.56rem);
    }

    .kg-archive-realizacje .kg-archive-hero__lead {
        margin-top: 8px;
        font-size: .93rem;
        line-height: 1.62;
    }

    .kg-archive-realizacje .kg-toolbar .container {
        padding: 12px 20px;
    }

    .kg-card-meta {
        font-size: 10px
    }

    .kg-single .container {
        padding: 0 16px
    }

    .kg-single-title {
        font-size: 1.5rem
    }

    .kg-single-description {
        font-size: 14px
    }

    .kg-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px
    }

    .kg-related {
        padding: 1.5rem 0
    }

    .kg-related .container {
        padding: 0 16px
    }

    .kg-related-title {
        font-size: 1rem;
        margin-bottom: 1rem
    }
}

@media(width <=400px) {
    .kg-nav-separator {
        margin: 0 .5rem
    }
}

@keyframes kg-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(15px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.kg-card {
    animation: kg-fade-in-up .4s ease forwards
}

.kg-card:nth-child(1) {
    animation-delay: 0.05s
}

.kg-card:nth-child(2) {
    animation-delay: 0.1s
}

.kg-card:nth-child(3) {
    animation-delay: 0.15s
}

.kg-card:nth-child(4) {
    animation-delay: 0.2s
}

/* Archive Realizacje - Minimalist card system */
.kg-archive-realizacje .kg-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
}

.kg-archive-realizacje .kg-grid.kg-grid--count-1,
.kg-archive-realizacje .kg-grid.kg-grid--count-2 {
    justify-content: start;
}

@media (min-width: 680px) {
    .kg-archive-realizacje .kg-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (min-width: 1024px) {
    .kg-archive-realizacje .kg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (min-width: 1440px) {
    .kg-archive-realizacje .kg-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal {
    animation: none !important;
    border: 1px solid #e6ecf3;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    transition: border-color 0.22s ease, background-color 0.22s ease;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal:hover,
.kg-archive-realizacje .kg-card.km-card.km-card--minimal:focus-visible {
    border-color: #d3dde9;
    background: #fcfdff;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f6f8fb;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: none;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-img--hover {
    display: none;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-gallery-count {
    top: 10px;
    right: 10px;
    background: rgba(15, 23, 42, 0.72);
    padding: 3px 7px;
    border-radius: 0;
    font-size: 10px;
    font-weight: 500;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-content {
    padding: 12px 14px 13px;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-title {
    margin: 0;
    color: #1b2638;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.32;
    letter-spacing: -0.01em;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .km-card-meta-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e9eff5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .km-card-meta-row .kg-card-meta {
    margin: 0;
    color: #71839a;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal .km-card-cta {
    color: #f97316;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.kg-archive-realizacje .kg-card.km-card.km-card--minimal:hover .km-card-cta {
    color: #ea580c;
}

@media (max-width: 767px) {
    .kg-archive-realizacje .kg-grid.kg-grid--count-1,
    .kg-archive-realizacje .kg-grid.kg-grid--count-2 {
        grid-template-columns: 1fr;
        justify-content: start;
    }

    .kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-content {
        padding: 10px 14px 12px;
    }

    .kg-archive-realizacje .kg-card.km-card.km-card--minimal .kg-card-title {
        font-size: 14px;
    }
}

/* -------------------------------------------------------------------------- */
/* Unified Typography                                                          */
/* -------------------------------------------------------------------------- */

.kg-archive-wrapper .kg-archive-hero__eyebrow {
    font-size: var(--kg-font-size-xs);
    font-weight: var(--kg-weight-semibold);
}

.kg-archive-wrapper .kg-archive-hero__title {
    line-height: var(--kg-line-height-tight);
    font-weight: var(--kg-weight-semibold);
}

.kg-archive-wrapper .kg-archive-hero__lead {
    font-size: var(--kg-font-size-lg);
    line-height: var(--kg-line-height-relaxed);
}

.kg-archive-wrapper .kg-toolbar-count {
    font-size: var(--kg-font-size-sm);
}

.kg-archive-wrapper .kg-filter-trigger {
    font-size: var(--kg-font-size-sm);
    font-weight: var(--kg-weight-semibold);
    letter-spacing: 0.04em;
}

.kg-archive-wrapper .kg-pill {
    font-size: var(--kg-font-size-sm);
    font-weight: var(--kg-weight-medium);
}

.kg-archive-wrapper .kg-pill-sm {
    font-size: var(--kg-font-size-xs);
}

.kg-archive-wrapper .kg-card-title {
    font-size: var(--kg-font-size-md);
    line-height: var(--kg-line-height-tight);
    font-weight: var(--kg-weight-semibold);
}

.kg-archive-wrapper .kg-card-meta {
    font-size: var(--kg-font-size-xs);
    line-height: var(--kg-line-height-base);
}

.kg-archive-wrapper .kg-card-gallery-count {
    font-size: var(--kg-font-size-xs);
}

/* Performance: isolate repeated cards and defer layout for below-fold blocks. */
.kg-archive-wrapper .kg-card,
.kg-related .kg-card {
    contain: layout paint;
}

.kg-cta,
.kg-related,
#kg-section-podobne,
#kg-section-kompatybilne {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}
