:root {
    --ciak-red: #029FE3;
    --ciak-success: #029FE3;
    --tekniko-blue: #029FE3;
    --tekniko-blue-dark: #047db3;
    --tekniko-blue-soft: #eef9fe;
    --tekniko-ink: #101820;
    --tekniko-line: #d8e5eb;
}

.teknikoshop-site .btn-primary {
    --bs-btn-bg: #029FE3;
    --bs-btn-border-color: #029FE3;
    --bs-btn-hover-bg: #047db3;
    --bs-btn-hover-border-color: #047db3;
    --bs-btn-active-bg: #047db3;
    --bs-btn-active-border-color: #047db3;
    --bs-btn-focus-shadow-rgb: 2, 159, 227;
}

.teknikoshop-site .ciak-primary-link {
    background: var(--tekniko-ink);
}

.teknikoshop-site .ciak-primary-link:hover {
    background: var(--tekniko-blue);
}

.teknikoshop-site .ciak-eyebrow,
.teknikoshop-site .ciak-mega-head span {
    color: var(--tekniko-blue);
}

.teknikoshop-site .ciak-nav-link::before,
.teknikoshop-site .ciak-format-specs span::before,
.teknikoshop-site .ciak-format-callout-label::before {
    background: var(--tekniko-blue);
}

.teknikoshop-site .ciak-nav-link:hover,
.teknikoshop-site .ciak-nav-link:focus-visible,
.teknikoshop-site .ciak-icon-button:hover,
.teknikoshop-site .ciak-simple-dropdown-link:hover,
.teknikoshop-site .ciak-simple-dropdown-main:hover,
.teknikoshop-site .ciak-mega-head a:hover,
.teknikoshop-site .ciak-subcategory-nav a:hover,
.teknikoshop-site .ciak-footer-main a:hover,
.teknikoshop-site .ciak-service-row > a:hover,
.teknikoshop-site .storefront-sidebar-wrapper [data-storefront-filter-reset],
.teknikoshop-site .ciak-qty-btn:hover:not(:disabled) {
    color: var(--tekniko-blue);
}

.teknikoshop-site .ciak-mega-head a:hover {
    border-color: var(--tekniko-blue);
}

.teknikoshop-site .ciak-count,
.teknikoshop-site .active > .page-link {
    background: var(--tekniko-blue) !important;
}

.teknikoshop-site .product-listing-option-swatch.is-active,
.teknikoshop-site .product-listing-option-swatch.is-selected,
.teknikoshop-site .product-listing-option-pill.is-active,
.teknikoshop-site .product-listing-option-pill.is-selected {
    border-color: var(--tekniko-blue) !important;
}

.teknikoshop-brand img {
    max-height: 42px;
}

.teknikoshop-actions {
    gap: 12px;
}

.teknikoshop-icon-button {
    position: relative;
    border: 1px solid transparent;
}

.teknikoshop-icon-button::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(2, 159, 227, .18);
    border-radius: 999px;
    opacity: 0;
    transform: scale(.86);
    transition: opacity .18s ease, transform .18s ease;
}

.teknikoshop-icon-button:hover::after,
.teknikoshop-icon-button:focus-visible::after {
    opacity: 1;
    transform: scale(1);
}

.teknikoshop-mega-dropdown {
    border-top: 1px solid rgba(2, 159, 227, .22);
}

.teknikoshop-mega-inner {
    background:
        linear-gradient(90deg, rgba(2, 159, 227, .06), transparent 36%),
        #fff;
}

.teknikoshop-mega-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.teknikoshop-mega-card:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.teknikoshop-menu-icon,
.teknikoshop-mega-card-media {
    color: var(--tekniko-blue);
}

.teknikoshop-mega-card-media {
    width: 58px;
    min-width: 58px;
    height: 58px;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.teknikoshop-menu-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.teknikoshop-mega-outline-icon {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.teknikoshop-home .ciak-hero,
.teknikoshop-home .ciak-hero-copy {
    background: #f8fbfd;
}

.teknikoshop-home .ciak-hero-media {
    background:
        linear-gradient(135deg, #eef9fe 0%, #f7fafb 58%, #e8eef1 100%);
}

.teknikoshop-home .ciak-hero-media::after {
    background: linear-gradient(90deg, rgba(2, 159, 227, .08), transparent 24%);
}

.teknikoshop-home .ciak-hero-media.is-empty::before {
    content: "TEKNIKO";
    right: -5vw;
    bottom: -1vw;
    color: rgba(2, 159, 227, .11);
    letter-spacing: 0;
}

.teknikoshop-format-section {
    padding-block: clamp(86px, 8vw, 136px);
}

.teknikoshop-format-tabs-wrapper {
    top: var(--ciak-header-height);
}

.teknikoshop-format-tab-ring img {
    padding: clamp(10px, 1vw, 16px);
}

.teknikoshop-format-tab:hover .teknikoshop-format-tab-ring,
.teknikoshop-format-tab.is-active .teknikoshop-format-tab-ring {
    border-color: var(--tekniko-blue);
    background: rgba(2, 159, 227, .045);
    box-shadow: 0 0 0 8px rgba(2, 159, 227, .055);
}

.teknikoshop-format-panel {
    background:
        linear-gradient(90deg, rgba(2, 159, 227, .05), transparent 48%),
        #fff;
}

.teknikoshop-format-stage {
    overflow: visible;
}

.teknikoshop-format-visual img,
.teknikoshop-format-outline-layer {
    transform: scale(1);
}

.teknikoshop-format-visual::before {
    inset: 62% 22% 10%;
    background: radial-gradient(ellipse at center, rgba(2, 159, 227, .16), rgba(2, 159, 227, 0) 70%);
}

.teknikoshop-format-outline-layer svg path,
.teknikoshop-format-outline-layer svg line,
.teknikoshop-format-outline-layer svg polyline,
.teknikoshop-format-outline-layer svg polygon,
.teknikoshop-format-outline-layer svg circle,
.teknikoshop-format-outline-layer svg ellipse,
.teknikoshop-format-outline-layer svg rect {
    stroke: var(--tekniko-blue) !important;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.teknikoshop-format-outline-layer svg .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg path,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg line,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg polyline,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg polygon,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg circle,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg ellipse,
.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg rect {
    animation: teknikoBackpackOutlineDraw 2.4s ease forwards;
}

.teknikoshop-format-panel.is-outline-running .teknikoshop-format-outline-layer svg .draw {
    animation: teknikoBackpackOutlineDraw 2.4s ease forwards;
}

.teknikoshop-format-panel.is-detail-ready .teknikoshop-format-outline-layer,
.teknikoshop-format-panel.is-detail-ready .ciak-format-visual-outline-fallback {
    opacity: 0;
    transition: opacity .8s ease;
}

.teknikoshop-format-panel.is-photo-ready .ciak-format-visual-color {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: scale(1);
    transition: opacity 1.05s ease, clip-path 1.05s ease, transform 1.05s ease;
}

.teknikoshop-format-panel.is-photo-ready .teknikoshop-format-callout {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .18s;
}

.teknikoshop-format-callouts {
    z-index: 8;
}

.teknikoshop-format-callout .ciak-format-callout-dot {
    border-color: rgba(2, 159, 227, .72);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .82), 0 0 0 7px rgba(2, 159, 227, .12);
}

.teknikoshop-format-callout .ciak-format-callout-line {
    border-top-color: rgba(2, 159, 227, .55);
}

.teknikoshop-format-callout .ciak-format-callout-label {
    border: 1px solid rgba(2, 159, 227, .42);
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 42px rgba(16, 24, 32, .1);
    color: var(--tekniko-ink);
}

.teknikoshop-format-callouts-led .is-one,
.teknikoshop-format-callouts-expand .is-one,
.teknikoshop-format-callouts-magnum .is-one,
.teknikoshop-format-callouts-big .is-one,
.teknikoshop-format-callouts-tab .is-one {
    --label-x: 73%;
    --label-y: 24%;
    --dot-x: 58%;
    --dot-y: 24%;
    --line-width: 95px;
    --line-angle: -7deg;
}

.teknikoshop-format-callouts-led .is-two,
.teknikoshop-format-callouts-expand .is-two,
.teknikoshop-format-callouts-magnum .is-two,
.teknikoshop-format-callouts-big .is-two,
.teknikoshop-format-callouts-tab .is-two {
    --label-x: 33%;
    --label-y: 28%;
    --dot-x: 49%;
    --dot-y: 30%;
    --line-width: 90px;
    --line-angle: 188deg;
}

.teknikoshop-format-callouts-led .is-three,
.teknikoshop-format-callouts-expand .is-three,
.teknikoshop-format-callouts-magnum .is-three,
.teknikoshop-format-callouts-big .is-three,
.teknikoshop-format-callouts-tab .is-three {
    --label-x: 72%;
    --label-y: 76%;
    --dot-x: 60%;
    --dot-y: 67%;
    --line-width: 86px;
    --line-angle: 38deg;
}

.teknikoshop-format-callouts-led .is-one {
    --label-x: 78%;
    --label-y: 33%;
    --dot-x: 61%;
    --dot-y: 34%;
}

.teknikoshop-format-callouts-expand .is-one,
.teknikoshop-format-callouts-big .is-one {
    --label-x: 81%;
    --label-y: 30%;
    --dot-x: 60%;
    --dot-y: 32%;
}

.teknikoshop-format-callouts-magnum .is-two {
    --label-x: 23%;
    --dot-x: 39%;
}

.teknikoshop-format-callouts-tab .is-three {
    --label-y: 72%;
    --dot-y: 62%;
}

@keyframes teknikoBackpackOutlineDraw {
    to { stroke-dashoffset: 0; }
}

.teknikoshop-home .ciak-featured-section {
    padding-block: clamp(74px, 7vw, 116px) clamp(120px, 9vw, 180px);
    border-top: 1px solid rgba(16, 24, 32, .06);
}

.teknikoshop-home .ciak-featured-section .ciak-section-heading {
    margin-bottom: clamp(34px, 4vw, 62px);
}

.teknikoshop-home .ciak-products-grid {
    min-height: 420px;
    align-items: start;
}

.teknikoshop-home .product-listing-card {
    box-shadow: none !important;
}

.teknikoshop-home + .ciak-footer,
.teknikoshop-home ~ .ciak-footer {
    margin-top: 0;
}

@media (max-width: 767px) {
    .teknikoshop-format-section {
        padding-block: 58px 76px;
    }

    .teknikoshop-home .ciak-featured-section {
        padding-block: 56px 96px;
    }

    .teknikoshop-home .ciak-products-grid {
        min-height: 0;
    }
}