/* Top barr */
.mdp-topbar {position: sticky;top: 0;z-index: 50;display: flex;align-items: center;padding: 10px 0 15px 0;background: #ffffff;justify-content: center;gap: 20px;}
.logo {width: 220px;position: relative;top: -2px;}

/* Buscador productos */
.search-bar {display: inline-block;position: relative;text-align: left;}
#productSearch {max-width: 280px;width: 280px;height: 35px;padding: 12px 12px;border-radius: 12px;border: 1px solid #bbb;font-size: 15px;text-align: center;margin: 0;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;padding-right: 30px;padding-left: 10px;}

/*------Clear input buscar------*/
#clearProductSearch {display:none;position: absolute;right: 7px;top: 50%;transform: translateY(-50%);width: 20px;height: 20px;border: solid 2px #999;border-radius: 50%;text-align: center;line-height: 15px;font-size: 15px;font-weight: 400;color: #777;cursor: pointer;user-select: none;transition: background 0.2s;}
#clearProductSearch:hover {border: solid 2px #555;color: #555;}
#clearProductSearch:active {background: #999;}

/* ====== Badge de stock ====== */
#asocProdContent .stock-badge {display: inline-block;background: #f0483b;color: #fff;font-size: 13px;font-weight: 400;padding: 1px 15px;border-radius: 7px;margin-bottom: 3px;}
#asocProdContent .stock-badge-qty {font-weight: 700;}
/* ====== QTY row ====== */
#asocProdContent .cart-actions {display: flex;flex-direction: column;gap: 8px;align-items: center;}
#asocProdContent .qty-row {display: flex;align-items: center;justify-content: center;gap: 6px;margin-right: 10px;}
#asocProdContent .qty-label {font-weight: 700;font-size: 13px;}
/* Caja de cantidad (– [1] +) */
#asocProdContent .qty-selector {display: inline-flex;height: 25px;border: 1px solid #ccc;border-radius: 4px;overflow: hidden;}
#asocProdContent .qty-btn {border: none;background: #f4f4f4;padding: 4px 8px;font-size: 14px;cursor: pointer;line-height: 1;}
#asocProdContent .qty-btn:hover {background: #e6e6e6;}
#asocProdContent .qty-input {width: 38px;border: none;text-align: center;font-size: 14px;padding: 0;outline: none;height: 25px;min-height: unset;}
/* ====== Botón azul ADD TO CART ====== */
#asocProdContent .btnAddCart {background: #105c9c;font-size: 15px;letter-spacing: 0.5px;margin-bottom: -5px;padding: 7px 0;}
#asocProdContent .btnAddCart:hover {background: #004663;}
/* Deshabilitados pero visibles */
/* Deshabilitados pero visibles */
.qty-selector.disabled input {background: #fff !important;cursor: not-allowed !important;}
button.disabled {background: #555 !important;cursor: not-allowed !important;pointer-events: none !important;}

/*------Productos------*/
#landinAsocContainer {text-align: center;}
.sellerAsoc-wrap {max-width:650px; margin:0 auto; padding:0 7px;}
#asocProdContent {text-align: center;padding: 0 3px 11px 3px;border-top: solid 1px #ccc;border-bottom: solid 1px #ccc;}
.product {width: 24%;margin-top: 10px;padding: 7px 5px 15px 5px;display: inline-block; vertical-align: top;border: solid 1px #ccc;background: #fff;border-radius: 5px;}
.product:hover {opacity: 0.9;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.productidDiv {font-size: 0.9em;}
.descProd {cursor: pointer;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;vertical-align: bottom;font-weight: bold;font-size: 0.88em;}
.btnBuy, .btnAddCart {width: 85%;margin-top: 0.5em;padding: 6px 0;display: inline-block;background: #e4002b;color: #ffffff !important;font-size: 0.9em;cursor: pointer;border: unset;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;text-transform: uppercase;font-family: system-ui;font-weight: 400;text-decoration: none;}
.stock-badge.sold {width: 55%;background: #555 !important;}
.btnBuy:hover, .btnAddCart:hover  {opacity: 0.8;}
.product-image {cursor: pointer;margin: 0 0 5px 0;height: 200px;}
.product-image img {width: 100%;height: 100%;object-fit: contain;object-position: center center;border-radius: 3px;}
.infoProd span {display: block;margin: 5px;}
#noProdFoundP {padding: 10px 0 0 0;margin-bottom: 0;}

/*------Loading efecto------*/
#infiniteLoader {display: none;align-items: center;gap: .6rem;justify-content: center;padding: 12px 0;color: #666;font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;}
#infiniteLoader.show { display: flex; }
#infiniteLoader .spinner {width: 18px; height: 18px; border-radius: 50%;border: 2px solid #ccc; border-top-color: #3b82f6;animation: spin .9s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); } }
.product.skeleton {background: #f3f3f3; border-radius: 12px; overflow: hidden;} /* Skeletons */
.skel-img, .skel-text, .skel-btn {position: relative; overflow: hidden; background: #e9e9e9;}
.skel-img { aspect-ratio: 1/1; }
.skel-text { height: 16px; margin: 10px 12px; border-radius: 8px; }
.skel-text.long { width: 80%; }
.skel-text.short { width: 40%; }
.skel-btn { height: 36px; margin: 12px; border-radius: 999px; }
.skeleton .shine::after {content: ''; position: absolute; inset: 0;background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);transform: translateX(-100%); animation: shimmer 1.1s infinite;}
@keyframes shimmer { to { transform: translateX(100%); } }
/*------Popup gallery prod asoc------*/
.popup {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;place-content: center;background-color: rgba(0, 0, 0, 0.8);overflow: auto;}
.popup-content {position: relative;margin: 0 auto;padding: 10px;background-color: #fff;border-radius: 5px;width: 900px;text-align: center;}
.close, .cerrar {position: absolute;top: 10px;right: 10px;font-size: 20px;background: #e4002b;color: #fff;border-radius: 3px;padding: 0px 8px 3px 8px;cursor: pointer;z-index: 9;}
.close:hover, .cerrar:hover {opacity: 0.8;}
#imageWrapper {height: 85vh;width: 100%;display: flex;justify-content: center;align-items: center;overflow: hidden;background-color: #f1eff0;padding: 0.3em;}
.popup-gallery img {max-width: 100%;max-height: 100%;object-fit: contain;border-radius: 5px;}
.nav-button {background: #f1eff0;color: #000;padding: 5px 10px;cursor: pointer;border: none;border-radius: 3px;position: absolute;top: 40vh;font-size: 1em;}
.nav-button:hover {background-color: #222;color: #fff;}
#prevImage {left: 20px;}
#nextImage {right: 20px;}
.priceQty {display: flex;justify-content: center;font-weight: 400;}
.precProd {font-size: 0.95em;font-weight: 400;}
.qtyProd {font-size: 0.8em;}
.pagination-bullets {display: flex;place-content: center;align-items: center;padding: 13px 0 3px 0;}
.bullet {display: inline-block;width: 10px;height: 10px;margin: 0 5px;background-color: #ccc;border-radius: 50%;cursor: pointer;}
.bullet.active {background-color: #333;}
#popupImage {transition: transform 0.45s ease-in-out;cursor: zoom-in;}
.image-flip-next {transform: rotateY(-90deg);}
.image-flip-prev {transform: rotateY(90deg);}
.popup-gallery {overflow: hidden;}

/*Response*/
@media (max-width: 926px) {.popup-content {width: 870px;}}
@media (max-width: 885px) {.popup-content {width: 840px;}}
@media (max-width: 855px) {.popup-content {width: 810px;}}
@media (max-width: 820px) {.popup-content {width: 780px;}}
@media (max-width: 790px) {.popup-content {width: 750px;}}
@media (max-width: 768px) {
	.product {width: 32%;}
	.popup-content {width: 720px;}
	.logo {width: 170px;}
}
@media (max-width: 735px) {.popup-content {width: 690px;}}
@media (max-width: 715px) {.popup-content {width: 660px;}}
@media (max-width: 675px) {.popup-content {width: 640px;}}
@media (max-width: 670px) {.popup-content {width: 620px;}}
@media (max-width: 645px) {.popup-content {width: 620px;}}
@media (max-width: 630px) {.popup-content {width: 600px;}}
@media (max-width: 620px) {.popup-content {width: 580px;}}
@media (max-width: 595px) {.popup-content {width: 560px;}}
@media (max-width: 576px) {
	.logo {width: 150px;}
}
@media (max-width: 560px) {.popup-content {width: 540px;}}
@media (max-width: 540px) {.popup-content {width: 520px;}}
@media (max-width: 520px) {.popup-content {width: 500px;}}
@media (max-width: 500px) {
	.product {width: 49%;}
	.popup-content {width: 480px;}
	.logo {display: none;}
}
@media (max-width: 480px) {.popup-content {width: 460px;}}
@media (max-width: 460px) {.popup-content {width: 440px;}}
@media (max-width: 430px) {.popup-content {width: 420px;}}
@media (max-width: 420px) {.popup-content {width: 410px;}}
@media (max-width: 410px) {.popup-content {width: 400px;}}
@media (max-width: 400px) {.popup-content {width: 390px;}}
@media (max-width: 390px) {.popup-content {width: 380px;}}
@media (max-width: 380px) {.popup-content {width: 360px;}}
@media (max-width: 360px) {.popup-content {width: 340px;}}
@media (max-width: 340px) {.popup-content {width: 320px;}}
@media (max-width: 320px) {.popup-content {width: 300px;}}