.zk-v7-search-wrap {
position: relative;
width: 100%;
max-width: 100%;
margin: 0;
z-index: 1200;
}
.zk-v7-search-form {
position: relative;
display: flex;
align-items: center;
width: 100%;
margin: 0;
}
.zk-v7-search-input {
width: 100%;
height: 54px;
min-height: 54px;
padding: 0 52px 0 48px;
border: 2px solid #ED9121;
border-radius: 28px;
background: #ffffff;
color: #222222;
font-size: 15px;
font-weight: 500;
line-height: 1;
outline: none;
box-sizing: border-box;
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
-webkit-appearance: none;
appearance: none;
}
.zk-v7-search-input:focus {
border-color: #D67D1A;
box-shadow: 0 0 0 4px rgba(237,145,33,.10);
}
.zk-v7-search-input::-webkit-search-cancel-button {
cursor: pointer;
}
.zk-v7-search-icon {
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #1f2937;
pointer-events: none;
z-index: 2;
}
.zk-v7-search-submit {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: none;
width: 38px;
height: 38px;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 50%;
background: #ED9121;
color: #fff;
cursor: pointer;
}
.zk-v7-search-panel {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
max-height: min(560px, 68vh);
overflow-x: hidden;
overflow-y: auto;
background: #fff;
border: 1px solid #eadbc9;
border-radius: 16px;
box-shadow: 0 18px 42px rgba(26, 20, 14, .15);
z-index: 999999;
}
.zk-v7-search-panel[hidden] {
display: none !important;
}
.zk-v7-result-link {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 10px 13px;
color: #222;
text-decoration: none;
border-bottom: 1px solid #f3eee8;
transition: background .14s ease;
}
.zk-v7-result-link:hover,
.zk-v7-result-link.is-active {
background: #fff7ed;
color: #222;
}
.zk-v7-result-image {
width: 54px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border-radius: 2px;
overflow: hidden;
}
.zk-v7-result-image img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
object-position: center;
background: transparent;
}
.zk-v7-result-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.zk-v7-result-title {
display: block;
font-size: 14px;
font-weight: 800;
line-height: 1.35;
color: #181818;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zk-v7-result-meta {
display: block;
font-size: 12px;
line-height: 1.35;
color: #686868;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.zk-v7-result-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 2px;
}
.zk-v7-result-price {
color: #ED9121;
font-size: 14px;
font-weight: 900;
}
.zk-v7-result-price del {
color: #9a9a9a;
font-size: 11px;
font-weight: 600;
margin-right: 4px;
}
.zk-v7-result-price ins {
color: #ED9121;
text-decoration: none;
}
.zk-v7-result-stock {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 900;
line-height: 1.2;
}
.zk-v7-result-stock.is-out {
background: #111827;
color: #fff;
}
.zk-v7-see-all {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 14px;
background: #fffaf5;
color: #D67D1A;
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.zk-v7-see-all:hover {
background: #fff2e2;
color: #c56f10;
}
.zk-v7-empty {
padding: 18px 16px;
color: #555;
font-size: 13px;
text-align: center;
}
.zk-v7-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 18px 16px;
color: #666;
font-size: 13px;
}
.zk-v7-loading span:first-child {
width: 18px;
height: 18px;
border: 2px solid #f0d6b7;
border-top-color: #ED9121;
border-radius: 50%;
animation: zk-v7-spin .65s linear infinite;
}
@keyframes zk-v7-spin {
to { transform: rotate(360deg); }
} .zkp-search .zk-v7-search-wrap {
width: 100%;
max-width: none;
min-width: 0;
margin: 0;
}
@media (max-width: 768px) {
.zk-v7-search-wrap {
width: calc(100vw - 34px);
max-width: calc(100vw - 34px);
margin: 8px auto 10px;
}
.zk-v7-search-input {
height: 44px;
min-height: 44px;
padding-left: 43px;
padding-right: 46px;
border-radius: 24px;
font-size: 13px;
box-shadow: 0 5px 16px rgba(237,145,33,.12);
}
.zk-v7-search-icon {
left: 14px;
}
.zk-v7-search-submit {
display: inline-flex;
width: 34px;
height: 34px;
right: 5px;
}
.zk-v7-search-panel {
position: fixed;
left: 10px;
right: 10px;
top: auto;
max-height: 62vh;
border-radius: 14px;
}
.zk-v7-result-link {
grid-template-columns: 48px minmax(0, 1fr);
gap: 10px;
padding: 9px 10px;
}
.zk-v7-result-image {
width: 48px;
height: 70px;
}
.zk-v7-result-title {
font-size: 13px;
}
.zk-v7-result-meta {
font-size: 11px;
}
.zk-v7-result-price {
font-size: 13px;
}
} @media (max-width: 768px) {
.zkmpv2-search-panel .zk-v7-mobile-results {
position: relative !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
width: 100% !important;
max-height: min(46vh, 430px) !important;
margin: 10px 0 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
border: 1px solid #eee3d7 !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: none !important;
z-index: 2 !important;
-webkit-overflow-scrolling: touch;
}
.zkmpv2-search-panel .zk-v7-mobile-results[hidden] {
display: none !important;
}
.zkmpv2-search-panel .zk-v7-result-link {
grid-template-columns: 48px minmax(0, 1fr) !important;
gap: 10px !important;
padding: 9px 8px !important;
}
.zkmpv2-search-panel .zk-v7-result-image {
width: 48px !important;
height: 70px !important;
background: transparent !important;
border-radius: 2px !important;
}
.zkmpv2-search-panel .zk-v7-result-image img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
.zkmpv2-search-panel .zk-v7-result-title {
font-size: 13px !important;
line-height: 1.28 !important;
}
.zkmpv2-search-panel .zk-v7-result-meta {
font-size: 11px !important;
}
.zkmpv2-search-panel .zk-v7-result-price {
font-size: 13px !important;
}
.zkmpv2-search-panel .zk-v7-see-all {
min-height: 42px !important;
}
} .zk-v7-no-results-query {
width: 100%;
margin: 0 0 14px;
padding: 16px 18px;
box-sizing: border-box;
border: 1px solid #f0dfca;
border-left: 4px solid #ED9121;
border-radius: 14px;
background: #fffaf4;
color: #2d2925;
}
.zk-v7-no-results-kicker {
display: block;
margin-bottom: 3px;
color: #b6670c;
font-size: 11px;
font-weight: 800;
letter-spacing: .45px;
text-transform: uppercase;
}
.zk-v7-no-results-query strong {
display: inline;
font-size: 20px;
font-weight: 850;
line-height: 1.25;
}
.zk-v7-no-results-text {
margin-left: 5px;
color: #6e6862;
font-size: 14px;
}
@media (max-width: 768px) {
.zk-v7-no-results-query {
margin: 0 14px 12px;
width: calc(100% - 28px);
padding: 14px 15px;
border-radius: 12px;
}
.zk-v7-no-results-query strong {
font-size: 17px;
}
.zk-v7-no-results-text {
font-size: 13px;
}
}