* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
}

body {
    background: #ffffff;
    color: #063b91;
    font-family: Arial, Helvetica, sans-serif;
}

button,
input {
    font-family: inherit;
}


/* =====================================================
    HEADER
===================================================== */

.header {
    background: #f7f89b;
    padding: 0px 0px 0px;
    text-align: center;
    /* control position */
    position: fixed;
    top: 0;
    z-index: 100;
    /* control width and height */
    width: 100%;
    height: 165px;
}

/* For spacer */
.spacercontroller{
    /* control space padding and margin */
    /* control height and width */
    height: 175px;
}

.createselleraccount{
    /* control display and alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* control space padding and margin */
    margin-top: 3px;
}

.createselleraccount a{
    /* control background and color */
    background-color: #128c7e;
    color: white;
    text-decoration: none;
    /* control space padding and margin */
    padding: 2px;
    /* control border property */
    border: 1px solid gray;
    border-radius: 5px;
}


/* LOGO */

.logo-box {
    width: 250px;
    max-width: 60%;
    height: 63px;

    margin: 0 auto 3px;

    background: #fffefe;

    border-radius: 10px;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* control border property */
    border-radius: 10px;
    border: 1px solid gray;
}

/* TITLE */

.market-title {
    font-family: "Arial Narrow", Arial, sans-serif;

    font-weight: 400;

    font-size: clamp(20px, 5vw, 25px);

    margin-bottom: 2px;

    letter-spacing: -1px;
    /* control background and color */
    background-color: #c7bb53;
    /* control width and height */
    width: 100%;
    height: 35px;
    /* control display and alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* =====================================================
    MAIN URL SEARCH
===================================================== */

.url-search {

    max-width: 1010px;

    margin: auto;

    background: white;

    border: 2px solid #31c6ed;

    border-radius: 20px;

    min-height: 60px;

    display: flex;

    align-items: center;

    padding: 5px;

    gap: 4px;

}


.url-label {

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(20px, 5vw, 25px);

    font-weight: bold;

    color: #07398e;

    flex-shrink: 0;

}


.url-input {

    flex: 1;

    min-width: 0;

    height: 45px;

    border: none;

    outline: none;

    border-radius: 17px;

    background: #999999;

    padding: 0 10px;

    color: #063b91;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: clamp(20px, 3.2vw, 22px);

}


.url-input::placeholder {
    color: #07398e;
    opacity: 1;
}


/* MAIN GO BUTTON */

.global-go {

    height: 45px;

    min-width: 70px;

    padding: 0 10px;

    border: none;

    border-radius: 10px;

    background: #07398e;

    color: white;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s ease;

    flex-shrink: 0;

}


.global-go:hover {

    background: #052b69;

    transform: scale(1.03);

}


.global-go:active {

    transform: scale(0.98);

}


/* =====================================================
    MAIN
===================================================== */

.main {

    padding: 13px 20px 50px;

}


/* =====================================================
    SELLER SECTION
===================================================== */

.seller-box {

    max-width: 910px;

    margin: 0 auto 10px;

    padding: 10px;

    background: #0a81f0;

    border: 1.5px solid #111;

    border-radius: 30px;

    display: grid;

    grid-template-columns: 185px 1fr;

    gap: 10px;

}


.seller-photo {

    width: 110px;

    height: 110px;

    border-radius: 50%;

    overflow: hidden;

    background: #ddd;

    margin: auto;

}


.seller-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.seller-info {

    background: #e5c1ef;

    border-radius: 12px;

    padding: 6px 7px;
    /* control width and height */
    width: 95%;
    height: 100px;

}


.seller-info p {

    margin-bottom: 6px;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: clamp(10px, 2vw, 16px);

    line-height: 1.12;

}


.seller-info p:last-child {

    margin-bottom: 0;

}


.seller-info a {

    color: #063b91;

    text-decoration: none;

}


.seller-info a:hover {

    text-decoration: underline;

}


/* =====================================================
    PRODUCT SEARCH
===================================================== */

.seller-tools {

    grid-column: 1 / -1;

    display: flex;

    gap: 45px;

    margin: 0 35px 2px;

}


.product-search {

    flex: 1;

    min-width: 0;

    height: 48px;

    border: 1.5px solid #111;

    border-radius: 14px;

    padding: 0 14px;

    outline: none;

    color: #07398e;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: 20px;

}


.product-search::placeholder {

    color: #07398e;

}


.filter-btn {

    width: 136px;

    height: 48px;

    background: white;

    color: #07398e;

    border: 3px solid #2ec5ef;

    border-radius: 13px;

    font-size: 20px;

    cursor: pointer;

}


.filter-btn:hover {

    background: #07398e;

    color: white;

}


/* =====================================================
    FILTER PANEL
===================================================== */

.filter-panel {

    max-width: 1100px;

    margin: 10px auto 20px;

    background: #fffdb0;

    border: 2px solid #07398e;

    border-radius: 18px;

    padding: 20px;

    display: none;

}


.filter-panel.active {

    display: block;

}


.filter-content {

    display: flex;

    gap: 15px;

    align-items: center;

    flex-wrap: wrap;

    color: #111;

}


.filter-content label {

    font-weight: bold;

}


.filter-content select {

    padding: 10px 15px;

    border: 1px solid #07398e;

    border-radius: 8px;

    color: #07398e;

    background: white;

}


/* =====================================================
    PRODUCT GRID
===================================================== */

.products {

    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px 5px;
    align-items: center;
    /* control overflow */
    overflow-y: auto;
    overflow-wrap: anywhere;
    

}


.product-card {

    background: #fffdb0;

    border: 1px solid #3d393f;

    border-radius: 10px;

    padding: 2px;

    overflow: hidden;

    /* control width and height */
    width: 230px;
    height: 260px;
    /* control display and alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.product-title{
    /* control font */
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.5;
    max-height: calc(1.5em * 3);

    overflow: hidden;
    text-overflow: ellipsis;
}


.product-image {

    width: 95%;

    aspect-ratio: 1.34 / 1;

    overflow: hidden;

    background: #ddd;

    border: 1px solid white;

}


.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .3s ease;

}


.product-card:hover .product-image img {

    transform: scale(1.04);

}


.product-price {

    background: white;

    border: 1px solid #111;
    border-radius: 5px;

    height: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 3px;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: 17px;

    color: #063b91;

}


.view-btn {

    width: 78%;

    display: block;

    margin: 5px auto 0;

    height: 36px;

    border: none;

    border-radius: 5px;

    background: #07398e;

    color: white;

    font-family: "Arial Narrow", Arial, sans-serif;

    font-size: 18px;

    cursor: pointer;

    transition: .3s;

}


.view-btn:hover {

    background: #052b69;

    transform: translateY(-1px);

}


/* =====================================================
    PRODUCT MODAL
===================================================== */

.modal {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .7);

    display: none;

    align-items: center;

    justify-content: center;

    padding: 10px;

    z-index: 9999;

}


.modal.active {

    display: flex;

}


.modal-box {

    position: relative;

    width: min(800px, 95vw);

    max-height: 90vh;

    overflow-y: auto;

    background: #fffdb0;

    border: 2px solid #3d393f;

    border-radius: 25px;

    padding: 20px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.modal-image {

    width: 100%;

    border-radius: 10px;

    display: block;

}


.modal-details {

    color: #07398e;

    padding-top: 25px;
    height:auto;
    max-height: 500px;
    overflow-y: auto;

}


.modal-details h2 {

    font-size: 20px;

    margin-bottom: 10px;

}


.modal-price {

    font-size: 17px;

    font-weight: bold;

    margin-bottom: 20px;

}


.modal-details p {

    color: #222;

    line-height: 1.6;

    margin-bottom: 20px;

}

.contact-action{
    /* control display and alignment */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.actionbtn{
    /* control space padding and margin */
    margin: 2px;
}


.whatsapp-btn {

    display: inline-block;

    background: #128c7e;

    color: white;

    text-decoration: none;

    padding: 12px 18px;

    border-radius: 10px;

    font-size: 13px;

}


.close-modal {

    position: absolute;

    right: 10px;

    top: 5px;

    width: 45px;

    height: 45px;

    border: none;

    background: transparent;

    color: #07398e;

    font-size: 38px;

    cursor: pointer;

    z-index: 2;

}

#modalDescriptions{
    white-space: pre-wrap;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    overflow-wrap: break-word;
}


/* =====================================================
    SEARCH RESULTS POPUP
===================================================== */

.search-popup {

    position: fixed;

    inset: 0;

    z-index: 20000;

    background: rgba(0, 0, 0, .60);

    display: none;

    align-items: flex-start;

    justify-content: center;

    padding: 30px 15px;

    overflow-y: auto;

}


.search-popup.active {

    display: flex;

}


.search-popup-box {

    width: min(1000px, 96vw);

    max-height: 95vh;

    overflow-y: auto;

    background: white;

    border-radius: 22px;

    padding: 20px;

    position: relative;

    box-shadow: 0 15px 60px rgba(0, 0, 0, .35);

}


/* POPUP HEADER */

.search-popup-header {

    display: flex;
    align-items: center;

    justify-content: space-between;
    margin-bottom: 15px;
    /* control position */
    position: relative;
    z-index: 20;

}




.search-popup-title {

    color: #07398e;

    font-size: 20px;

    font-weight: bold;

}


.search-popup-close {

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: #07398e;

    color: white;

    font-size: 30px;

    cursor: pointer;

}


.search-popup-close:hover {

    background: #052b69;

}


/* =====================================================
    SEARCH RESULT TEMPLATE
===================================================== */

.search-result {

    background: #cbbbd0;

    border-radius: 17px;
    border: 1px solid gray;

    padding: 10px;
    margin: 2px;

    margin-bottom: 30px;

}


.search-result:last-child {

    margin-bottom: 0;

}


/* TOP ROW */

.search-result-top {

    display: grid;

    grid-template-columns: 125px 1fr 108px;

    gap: 10px;

    align-items: center;

}


/* STORE LOGO */

.search-store-logo {

    width: 115px;

    height: 115px;

    border-radius: 50%;

    background: transparent;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.search-store-logo img {

    width: 100%;
    background-color: black;
    height: 100%;
    /* control border property */
    border: none;
    border-radius: 50%;

    object-fit: contain;

    border-radius: 12px;

}


/* STORE URL */

.search-store-url {

    min-height: 60px;

    background: white;

    border-radius: 13px;

    padding: 12px 20px;

    display: flex;

    align-items: center;

    color: #111;

    font-size: clamp(10px, 2.4vw, 20px);

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* GO BUTTON */

.search-go {

    height: 60px;

    background: white;

    border: none;

    border-radius: 10px;

    color: #111;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

}


.search-go:hover {

    background: #07398e;

    color: white;

}


/* STORE PRODUCTS */

.search-products-area {

    background: white;

    border-radius: 10px;

    margin-top: 2px;

    padding: 10px 22px 16px;

}


.search-store-type {

    color: #111;

    font-size: 15px;

    margin-bottom: 10px;

}


.search-store-type strong {

    font-weight: bold;

}


/* SIX PRODUCT PREVIEWS */

.search-product-preview {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 22px;

}


.search-preview-item {

    aspect-ratio: 1 / 1;

    background: #090909;

    border-radius: 4px;

    overflow: hidden;

    cursor: pointer;

    transition: transform .2s;

}


.search-preview-item:hover {

    transform: scale(1.04);

}


.search-preview-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}


/* =====================================================
    NO RESULTS
===================================================== */
#searchResults{
    /* control display and alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    /* control width and height */
    width: 100%;
    height: 500px;
    border: 1px solid gray;
    border-radius: 5px;
    /* control overflow */
    overflow-y: auto;
}

.search-no-results {
    /* control display and alignment */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: 70px 20px;

    color: #555;
    /* control width and height */
    width: 100%;

    border: 1px solid gray;
    border-radius: 3px;

}


.search-no-results i {

    font-size: 55px;

    margin-bottom: 15px;

}


.search-no-results h3 {

    font-size: 28px;

    color: #07398e;

    margin-bottom: 8px;

}


/* =====================================================
    RESPONSIVE
===================================================== */

@media (max-width: 800px) {

    .url-search {

        border-width: 2px;
        margin-left: 2px;
        margin-right: 2px;
    }

    .seller-box {

        grid-template-columns: 1fr;

        border-radius: 35px;

        padding: 15px;

    }


    .seller-photo {

        width: 100px;

        height: 100px;

    }


    .seller-tools {

        margin: 0;

        gap: 10px;

    }


    .product-search {

        font-size: 21px;

    }


    .filter-btn {

        width: 105px;

        font-size: 22px;

    }


    .products {

        grid-template-columns: repeat(3, 1fr);

        gap: 15px;
        align-items: center;

    }


    .product-card {

        border-width: 1px;

        padding: 2px;

    }


    .product-price {

        font-size: 15px;

    }


    .view-btn {

        font-size: 17px;

        height: 32px;

    }


    .modal-box {

        grid-template-columns: 1fr;                

    }

    .modal-image {

        width: 70%;

        border-radius: 10px;

        display: block;

    }


    .modal-details {

        padding-top: 0;

    }


    /* SEARCH POPUP */

    .search-popup {

        padding: 10px;

    }


    .search-popup-box {

        padding: 12px;

        border-radius: 15px;

    }


    .search-result {

        padding: 3px;

    }


    .search-result-top {

        grid-template-columns: 80px 1fr 65px;

        gap: 8px;

    }


    .search-store-logo {

        width: 75px;

        height: 75px;

        padding: 8px;

    }


    .search-store-url {

        min-height: 55px;

        padding: 8px;

        font-size: 16px;

    }


    .search-go {

        height: 55px;

        font-size: 21px;

    }


    .search-products-area {

        padding: 8px;

    }


    .search-store-type {

        font-size: 18px;

    }


    .search-product-preview {

        grid-template-columns: repeat(3, 1fr);

        gap: 10px;

    }




}


@media (max-width: 480px) {

    .header {

        padding-left: 0px;

        padding-right: 0px;

    }


    .url-search {

        border-width: 2px;
        margin-left: 2px;
        min-height: 45px;

        margin-right: 2px;

        border-radius: 18px;

        gap: 5px;

    }


    .url-label {

        font-size: 13px;

    }


    .url-input {

        height: 40px;

        font-size: 18px;

        padding: 0 8px;

    }


    .global-go {

        min-width: 70px;

        height: 40px;

        padding: 0 10px;

        font-size: 13px;

        border-radius: 12px;

    }


    .main {

        padding-left: 5px;

        padding-right: 5px;
        align-items: center;

    }


    .seller-info {
        
        height: 78px;

    }
    .seller-info p {

        font-size: 12px;

    }


    .seller-tools {

        flex-direction: column;

    }


    .product-search {

        width: 100%;

        height: 18px;

        border: 1px solid #111;

        border-radius: 5px;

        padding: 0 10px;

        font-size: 17px;

    }


    .filter-btn {

        width: 100%;
        height: 38px;

        background: white;

        color: #07398e;

        border: 3px solid #2ec5ef;

        border-radius: 10px;

        font-size: 17px;

        cursor: pointer;

    }


    .products {                

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
        align-items: center;
        max-width: 480px;

    }


    .product-price {

        font-size: 13px;

    }


    .view-btn {

        font-size: 15px;

    }


    .search-popup-title {

        font-size: 16px;

    }

}



/* FOOTER */

footer{
    margin-top:60px;

    padding:35px 20px;

    background:#071426;

    color:white;

    text-align:center;
}

.footer-logo{
    font-family:"Barlow Condensed",sans-serif;
    font-size:30px;
}

footer p{
    color:#9eacc0;

    font-size:12px;

    margin-top:7px;
}

.footer-links{
    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin-top:20px;
}

.footer-links a{
    color:#cbd5e1;

    font-size:12px;

    text-decoration:none;
}




/* ==========================================================
   BITAKIJO MARKETPLACE — MODERN UI OVERHAUL
   Visual-only layer: existing HTML/JS classes are preserved.
   overrides are applied via new CSS variables and selectors.
   
========================================================== */
:root{
  --bk-primary:#075e54;
  --bk-primary-2:#0f8f7f;
  --bk-blue:#1769e0;
  --bk-blue-2:#0b4fc4;
  --bk-ink:#102033;
  --bk-muted:#66758a;
  --bk-border:#e5eaf1;
  --bk-bg:#f5f8fc;
  --bk-card:#ffffff;
  --bk-radius:18px;
  --bk-shadow:0 8px 26px rgba(16,32,51,.08);
  --bk-shadow-hover:0 18px 42px rgba(16,32,51,.14);
}

html,body{min-height:100%;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 0 0,rgba(23,105,224,.07),transparent 28%),
    radial-gradient(circle at 100% 12%,rgba(15,143,127,.06),transparent 24%),
    var(--bk-bg);
  color:var(--bk-ink);
  -webkit-font-smoothing:antialiased;
}

/* Header */
.header{
  height:146px;
  padding:8px 14px 10px;
  background:#f7f89b;
  border-bottom:1px solid rgba(229,234,241,.95);
  box-shadow:0 8px 30px rgba(16,32,51,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.spacercontroller{height:156px;}
.logo-box{
  width:min(270px,62vw);
  height:54px;
  margin:0 auto 4px;
  border:1px solid var(--bk-border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 5px 18px rgba(16,32,51,.07);
  overflow:hidden;
}
.market-title{
  height:36px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--bk-primary),var(--bk-primary-2));
  color:#fff;
  font-size:clamp(18px,4vw,23px);
  font-weight:800;
  letter-spacing:-.4px;
}
.createselleraccount{margin-top:4px;}
.createselleraccount a{
  padding:5px 13px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,var(--bk-primary),var(--bk-primary-2));
  box-shadow:0 6px 15px rgba(7,94,84,.18);
  font-size:12px;
  font-weight:700;
}
.createselleraccount a:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(7,94,84,.24);}

/* Global search */
.url-search{
  max-width:1050px;
  min-height:56px;
  padding:5px;
  gap:6px;
  border:1px solid #cfe0f4;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 24px rgba(16,32,51,.07);
  transition:.25s ease;
}
.url-search:focus-within{
  border-color:#78a9ed;
  box-shadow:0 0 0 4px rgba(23,105,224,.09),0 12px 30px rgba(16,32,51,.09);
}
.url-label{
  padding-left:9px;
  color:var(--bk-primary);
  font-size:clamp(16px,3.5vw,21px);
  font-weight:800;
}
.url-input{
  height:44px;
  border:1px solid transparent;
  border-radius:12px;
  background:#f2f5f9;
  color:var(--bk-ink);
  font-size:clamp(15px,3vw,18px);
}
.url-input:focus{background:#fff;border-color:#cbdcf2;}
.url-input::placeholder{color:#8290a4;}
.global-go{
  height:44px;
  min-width:66px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--bk-blue),var(--bk-blue-2));
  box-shadow:0 7px 17px rgba(23,105,224,.20);
}
.global-go:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(23,105,224,.27);}

/* Main */
.main{padding:18px 18px 60px;}

/* Seller */
.seller-box{
  max-width:1080px;
  margin:0 auto 16px;
  padding:14px;
  grid-template-columns:145px 1fr;
  gap:14px;
  background:linear-gradient(135deg,#fff,#f7fbff);
  border:1px solid var(--bk-border);
  border-radius:24px;
  box-shadow:var(--bk-shadow);
}
.seller-photo{
  width:116px;height:116px;
  border:4px solid #fff;
  box-shadow:0 10px 26px rgba(16,32,51,.15);
}
.seller-info{
  width:100%;height:auto;min-height:116px;
  padding:13px 15px;
  border:1px solid var(--bk-border);
  border-radius:16px;
  background:linear-gradient(145deg,#f8fbff,#fff);
  box-shadow:0 4px 14px rgba(16,32,51,.04);
}
.seller-info p{font-size:clamp(11px,1.7vw,15px);line-height:1.35;color:#34465a;}
.seller-info a{color:var(--bk-blue);font-weight:700;}
.seller-info a:hover{text-decoration:underline;}
.seller-tools{
  margin:0 0 1px;
  gap:10px;
}
.product-search{
  height:46px;
  border:1px solid #d4deea;
  border-radius:12px;
  background:#fff;
  color:var(--bk-ink);
  font-size:16px;
  box-shadow:inset 0 1px 2px rgba(16,32,51,.03);
}
.product-search:focus{border-color:#75a6e9;box-shadow:0 0 0 4px rgba(23,105,224,.08);}
.product-search::placeholder{color:#8a97a8;}
.filter-btn{
  width:125px;height:46px;
  border:1px solid #c8dbf5;
  border-radius:12px;
  background:#eef5ff;
  color:var(--bk-blue-2);
  font-size:16px;
  font-weight:700;
}
.filter-btn:hover{background:var(--bk-blue);color:#fff;border-color:var(--bk-blue);transform:translateY(-1px);}

/* Filter */
.filter-panel{
  max-width:1080px;
  margin:10px auto 20px;
  padding:16px;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:var(--bk-shadow);
}
.filter-content{gap:12px;color:var(--bk-ink);}
.filter-content select{
  padding:9px 12px;
  border:1px solid #d2dce8;
  border-radius:10px;
  background:#fff;
  color:#34465a;
  outline:none;
}
.filter-content select:focus{border-color:#76a8e9;box-shadow:0 0 0 3px rgba(23,105,224,.08);}

/* Products */
.products{
  max-width:1280px;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  overflow:visible;
  padding:4px 2px 16px;
}
.product-card{
  width:100%;height:auto;min-height:318px;
  padding:10px;
  align-items:stretch;
  justify-content:flex-start;
  border:1px solid var(--bk-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--bk-shadow);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  border-color:#c7d9ef;
  box-shadow:var(--bk-shadow-hover);
}
.product-title{
  min-height:40px;
  padding:8px 3px 6px;
  color:#1d3045;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-image{
  width:100%;
  aspect-ratio:1.15/1;
  border:0;
  border-radius:13px;
  background:#f0f3f7;
}
.product-image img{transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.product-card:hover .product-image img{transform:scale(1.06);}
.product-price{
  width:100%;
  min-height:35px;height:auto;
  margin-top:9px;
  padding:6px 8px;
  border:0;
  border-radius:10px;
  background:#f3f8ff;
  color:var(--bk-blue-2);
  font-size:16px;
  font-weight:800;
}
.view-btn{
  width:100%;height:40px;
  margin:9px auto 0;
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg,var(--bk-blue),var(--bk-blue-2));
  font-size:15px;
  font-weight:700;
  box-shadow:0 7px 16px rgba(23,105,224,.18);
}
.view-btn:hover{transform:translateY(-2px);box-shadow:0 11px 22px rgba(23,105,224,.25);}
.view-btn:active{transform:translateY(0);}

/* Product modal */
.modal{background:rgba(8,20,35,.68);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.modal-box{
  width:min(900px,94vw);
  max-height:90vh;
  padding:22px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  animation:bkModalIn .22s ease-out;
}
@keyframes bkModalIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.modal-image{border-radius:16px;background:#f4f6f8;}
.modal-details{padding:12px 4px 0;color:#34465a;}
.modal-details h2{font-size:25px;color:var(--bk-ink);margin-bottom:8px;}
.modal-price{font-size:20px;color:var(--bk-primary);margin-bottom:18px;}
.modal-details p{line-height:1.65;color:#586a7e;}
.contact-action{gap:8px;flex-wrap:wrap;}
.actionbtn{margin:0;}
.whatsapp-btn{
  padding:11px 16px;
  border-radius:11px;
  background:linear-gradient(135deg,#16a34a,#128c7e);
  font-weight:700;
  box-shadow:0 7px 16px rgba(22,163,74,.18);
}
.whatsapp-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(22,163,74,.24);}
.close-modal{
  right:12px;top:10px;width:40px;height:40px;
  border-radius:50%;background:#eef3f8;color:#33465a;font-size:27px;
}
.close-modal:hover{background:#e1e8f0;transform:rotate(5deg);}

/* Search popup */
.search-popup{background:rgba(8,20,35,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.search-popup-box{
  width:min(1050px,96vw);
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:#fff;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  animation:bkModalIn .22s ease-out;
}
.search-popup-title{color:var(--bk-ink);font-size:21px;}
.search-popup-close{background:#eef5ff;color:var(--bk-blue-2);}
.search-popup-close:hover{background:var(--bk-blue);color:#fff;transform:rotate(5deg);}
.search-result{
  margin:0 0 16px;
  padding:14px;
  border:1px solid var(--bk-border);
  border-radius:18px;
  background:#f8fafc;
  box-shadow:0 7px 22px rgba(16,32,51,.05);
}
.search-store-url{border:1px solid var(--bk-border);border-radius:10px;}
.search-go{background:#eef5ff;color:var(--bk-blue-2);border:1px solid #c8dbf5;border-radius:10px;}
.search-go:hover{background:var(--bk-blue);color:#fff;}
.search-products-area{border:1px solid var(--bk-border);border-radius:14px;overflow:hidden;}
.search-preview-item{border-radius:11px;box-shadow:0 4px 14px rgba(16,32,51,.08);}

/* Better focus */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(23,105,224,.25);outline-offset:2px;}

/* Responsive */
@media(max-width:1100px){
  .products{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
}
@media(max-width:820px){
  .header{height:151px;}
  .spacercontroller{height:151px;}
  .seller-box{grid-template-columns:1fr;border-radius:20px;}
  .seller-photo{margin:2px auto 0;}
  .products{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .product-card{min-height:290px;}
  .modal-box{grid-template-columns:1fr;}
  .modal-image{max-height:390px;object-fit:contain;}
}
@media(max-width:560px){
  .header{height:158px;padding:7px 8px 9px;}
  .spacercontroller{height:158px;}
  .main{padding:12px 10px 45px;}
  .url-search{min-height:52px;border-radius:15px;}
  .url-label{display:none;}
  .url-input{height:40px;font-size:15px;}
  .global-go{height:40px;min-width:58px;font-size:13px;}
  .seller-box{padding:11px;gap:10px;}
  .seller-info{min-height:0;padding:11px 12px;}
  .seller-tools{flex-direction:column;}
  .product-search,.filter-btn{width:100%;height:43px;}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .product-card{min-height:265px;padding:8px;border-radius:15px;}
  .product-title{min-height:36px;font-size:13px;}
  .product-price{min-height:32px;font-size:13px;margin-top:7px;}
  .view-btn{height:36px;margin-top:7px;font-size:13px;}
  .modal-box{padding:15px;border-radius:18px;}
  .modal-details h2{font-size:20px;}
  .contact-action{justify-content:stretch;}
  .actionbtn{flex:1;}
  .whatsapp-btn{display:block;text-align:center;width:100%;}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;}
}