/* PRKNUJTE — domain theme. Shared layout and Bootstrap 3 behavior stay in main.css.
   Load through DomainCss = css/prknujte.css; assetVersion versions this file.
   The !important overrides below match legacy declarations in main.css. */
@import url("main.css");

:root {
    --prk-ink: #171717;
    --prk-muted: #666;
    --prk-line: #e4e4e4;
    --prk-snow: #f6f6f5;
}

body {
    background: #fff !important;
    color: var(--prk-ink);
    line-height: 1.55;
}

body > .container { max-width: 1440px; }
h1, .title { font-weight: 600; letter-spacing: -.035em; }
h1 { margin-top: 28px; margin-bottom: 24px; }
h2, h3 { font-weight: 500 !important; letter-spacing: -.025em; }
a { color: var(--prk-ink); }
a:hover, a:focus { color: #555; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--prk-ink);
    outline-offset: 3px;
}

/* Airy white masthead; the supplied mark retains its original proportions. */
#wrapper > header { background: #fff; }
#logo2 { padding-top: 12px; padding-bottom: 10px; }
#logo2 > .pull-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 6px;
}
#logo2 > .pull-right > .btn-group { display: inline-flex; float: none !important; flex-shrink: 0; }
#logo2 .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 34px !important; /* Cart buttons have a legacy inline height. */
    min-height: 34px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 20px;
    vertical-align: middle;
}
#logo2 > .pull-right > .col-xs-4 { float: none; width: 200px; padding: 0; }
#logo2 form { margin: 0; }
#logo2 .live-search-container { width: 100%; }
#logo2 .live-search-container .form-control { height: 34px; }
#logo2 .live-search-container .input-group-btn { vertical-align: middle; }
#logo2 .live-search-container .btn { width: 34px; padding: 6px; }
#logo2 .btn img { align-self: center; }
#wrapper > header > .row.hidden-xs > a,
#wrapper > header > .row.hidden-sm > a {
    display: block;
    padding: 18px 24px 24px;
}
#wrapper > header > .row.hidden-xs > a > img {
    width: 260px;
    max-width: 100%;
    height: auto;
}
#wrapper > header > .row.hidden-sm > a > img {
    width: 220px;
    max-width: 100%;
    height: auto;
}

#nav55 { border-top: 1px solid var(--prk-line); border-bottom: 1px solid var(--prk-line); }
.navbar-inverse, .navbar-header {
    background-color: #fff !important;
    border-color: var(--prk-line) !important;
}
.wave { background-image: none; }
.navbar-inverse .navbar-nav > li > a {
    color: var(--prk-ink) !important;
    padding: 18px 20px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .045em;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    color: var(--prk-ink) !important;
    background: var(--prk-snow) !important;
    text-decoration: underline;
    text-underline-offset: 6px;
}
.navbar-inverse .navbar-toggle {
    border-radius: 0 !important;
    min-width: 44px;
    min-height: 44px;
    margin: 3px 10px 3px 0 !important;
}
.navbar-inverse .navbar-toggle .icon-bar {
    width: 22px !important;
    background: var(--prk-ink) !important;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background: var(--prk-ink) !important;
}
.navbar-inverse .navbar-toggle:hover .icon-bar,
.navbar-inverse .navbar-toggle:focus .icon-bar {
    background: #fff !important;
}
.navbar-brand { height: 50px; }
.navbar-brand img { width: auto; max-width: 180px; max-height: 32px; }
.dropdown-menu { border-color: var(--prk-line); box-shadow: 0 8px 24px #00000014; }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background: var(--prk-ink) !important; color: #fff; }

/* Crisp controls and strong monochrome calls to action. Semantic warnings and
   availability colors remain recognizable. */
.btn { letter-spacing: .035em; font-weight: 500; }
.btn-primary, .btn-info, .btn-success {
    background: var(--prk-ink) !important;
    border-color: var(--prk-ink) !important;
    color: #fff !important;
    border-radius: 0 !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus,
.btn-success:hover, .btn-success:focus {
    background: #383838 !important;
    border-color: #383838 !important;
    border-radius: 0 !important;
}
.btn-default { border-radius: 0 !important; border-color: #d7d7d7 !important; }
.btn-default:hover, .btn-default:focus {
    border-radius: 0 !important;
    background: #ededeb !important;
    border-color: #bdbdbd !important;
}
textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="range"]) {
    border-color: #c9c9c9 !important;
    border-radius: 0 !important;
    box-shadow: none;
}
.form-control:focus { border-color: var(--prk-ink) !important; box-shadow: 0 0 0 1px var(--prk-ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--prk-ink); }
.panel, .well { box-shadow: none; border-color: var(--prk-line); }
.panel-info > .panel-heading, .panel-primary > .panel-heading {
    color: var(--prk-ink);
    background: var(--prk-snow);
    border-color: var(--prk-line);
}
.panel-info, .panel-primary { border-color: var(--prk-line); }
.well { background: var(--prk-snow); border-radius: 0 !important; }
.list-group-item { border-color: var(--prk-line); }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    background: var(--prk-ink);
    border-color: var(--prk-ink);
}
.nav-tabs { border-color: var(--prk-line); }
.nav-tabs > li > a { border-radius: 0; }
.pagination > li > a, .pagination > li > span { color: var(--prk-ink); border-color: var(--prk-line); }
.pagination > .active > a, .pagination > .active > a:hover,
.pagination > .active > span, .pagination > .active > span:hover {
    background: var(--prk-ink);
    border-color: var(--prk-ink);
    color: #fff;
}
.path { font-size: 12px; padding-top: 18px; padding-bottom: 18px; }
.path, .path a { color: var(--prk-muted); }

/* Shared social assets are blue; Prknujte uses black marks on white. */
img[src$="/images/facebook-logo2.png"],
img[src$="/images/instagram-logo2.png"],
img[src$="/images/youtube-logo2.png"] {
    filter: grayscale(1) brightness(0);
}

/* Sorting, admin actions and stock forms share one aligned toolbar. */
.pagination.fltright > .dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.pagination.fltright .form-inline {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.pagination.fltright > .dropdown > .btn,
.pagination.fltright .form-inline > form.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
    padding: 6px 8px !important;
    line-height: 22px;
}
.pagination.fltright .checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 0;
    line-height: 22px;
}
.pagination.fltright .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 0;
    margin: 0;
    padding-left: 0;
    line-height: 22px;
}
.pagination.fltright .checkbox input[type="checkbox"] {
    position: static;
    margin: 0;
}

/* Keep product photography in color; let the equipment carry the palette.
   Actions participate in flow and stay reachable on touch and keyboard. */
.prd {
    height: auto;
    min-height: 435px;
    overflow: visible;
    padding: 12px;
    margin: 15px 0 25px;
    border: 1px solid var(--prk-line);
    text-align: left;
    background: #fff;
}
.prd .picture { min-height: 230px; }
.prd .picture img.photo { height: 230px; width: 100%; object-fit: contain; }
.prd .h3 {
    height: auto;
    min-height: 44px;
    overflow: visible;
    text-align: left;
    padding: 0;
    margin: 16px 0 8px;
    line-height: 1.4;
}
.prd .h3 a { font-size: 15px; font-weight: 500; line-height: 1.4; }
.prd .status { font-size: 12px; line-height: 1.6; }
.prd .var { text-align: left; height: auto; min-height: 30px; padding: 0; }
.prd .bruttoprice { display: block; font-size: 19px; margin-top: 10px; }
.prd .actions { position: static; padding-top: 16px; background: transparent; text-align: left; }
.prd .actions .btn { margin-bottom: 4px; }
.product:hover .prd { outline: none; border: 1px solid #aaa; }
.product:hover .prd .actions { outline: none; }
.product:hover .prd:after { display: none; }
.prd:focus-within { border-color: var(--prk-ink); }
.prd_rel { border-bottom: 1px solid var(--prk-line); }
.catpic-wrap img { filter: none; -webkit-filter: none; }
.cat-title { background: var(--prk-snow); font-size: 12px; font-weight: 500; }
#subcatlist > li:hover .scat-wrap,
#subcatlist_pikto > li:hover .scat-wrap,
#subcatlist_pikto > li:hover .scat-wrap-100 {
    filter: none;
    -webkit-filter: none;
    outline: 1px solid #bbb;
}
.carousel { margin-top: 24px; margin-bottom: 24px; }
.container .jumbotron, .container-fluid .jumbotron { background: var(--prk-snow); border-radius: 0 !important; }
.thumbnail, .img-rounded { border-radius: 0 !important; }

/* Footer is provided by the domain layout. */
#wrapper > footer {
    margin-top: 48px;
    padding: 32px 30px 24px;
    background: #fff;
    color: var(--prk-ink);
    font-size: 13px;
}
#wrapper > footer a { color: var(--prk-ink); text-decoration: underline; text-underline-offset: 3px; }
#wrapper > footer h2, #wrapper > footer h3 { color: var(--prk-ink) !important; }
.socmed { background: var(--prk-ink); }
#wrapper > footer .socmed { display: flow-root; height: auto; padding: 20px 30px; margin: -32px -30px 20px; background: var(--prk-ink); color: #fff; }
#wrapper > footer .socwrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 0; }
#wrapper > footer .socwrap > span { margin-left: auto; }
#wrapper > footer .socwrap img { max-width: 100%; object-fit: contain; }
#wrapper > footer .socwrap2 { padding: 0; }
#wrapper > footer iframe { max-width: 100%; }
#wrapper > footer .ejoy { color: var(--prk-muted); }

@media (min-width: 1200px) {
    body > .container { width: calc(100% - 80px); }
}
@media (min-width: 992px) {
    #wrapper > header {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: center;
    }
    #wrapper > header > .header-logo-desktop {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
    }
    #wrapper > header > .header-logo-desktop > a { padding: 22px 12px 22px 0; }
    #wrapper > header > .header-logo-desktop > a > img { width: 240px; }
    #wrapper > header > .header-tools {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        min-width: 0;
    }
    #logo2 { padding: 14px 0; }
    #wrapper > header > #nav55 { grid-column: 1 / -1; grid-row: 2; }
}
/* Keep the search separate when the logo, account and cart share less space. */
@media (min-width: 768px) and (max-width: 1199px) {
    #logo2 > .pull-right > .col-xs-4 {
        flex-basis: 100%;
        display: flex;
        justify-content: flex-end;
    }
    #logo2 > .pull-right > .col-xs-4 form { width: 220px; }
}
@media (max-width: 991px) {
    .navbar-inverse .navbar-nav > li > a { padding: 15px 12px; font-size: 12px; }
}
@media (max-width: 767px) {
    body > .container { width: 100%; }
    h1 { font-size: 29px; }
    #logo2 { padding-top: 8px; padding-bottom: 8px; }
    #logo2 > .pull-right { float: none !important; justify-content: center; }
    #logo2 .live-search-container { width: 100%; }
    #logo2 > .pull-right > .col-xs-4 { width: 100%; padding: 0; }
    #logo2 > .pull-right { text-align: center; }
    #wrapper > header > .row.hidden-sm > a { padding: 14px 20px 20px; }
    #wrapper > header > .header-logo-mobile { display: none !important; }
    .navbar-nav { display: block !important; margin: 0 -15px; }
    .navbar-inverse .navbar-nav > li > a { text-align: left; min-height: 44px; padding: 13px 20px; }
    .navbar-brand { padding: 10px 15px; }
    .navbar-collapse { max-height: 70vh; }
    .navbar-collapse.in { overflow-y: auto; }
    .pagination.fltright { float: none; display: block; margin: 12px 15px; }
    .pagination.fltright > .dropdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .pagination.fltright .form-inline { float: none !important; display: flex; flex-wrap: wrap; gap: 4px; }
    .pagination.fltright .form-inline .checkbox { margin: 0; }
    .prd { min-height: 0; margin-bottom: 18px; }
    .prd .picture, .prd .picture img.photo { height: 260px; }
    .prd .actions .btn { min-height: 40px; }
    #wrapper > footer { margin-top: 30px; padding: 24px 20px; }
    #wrapper > footer .socmed { margin: -24px -20px 20px; padding: 20px; }
}

@media print {
    body > .container { width: 100%; }
    .prd { break-inside: avoid; }
}