.content-product {display:flex;flex-direction:column;margin:3%;align-items:center;background-color:#ffffff;}
.content-product p{margin:1%;}
.container-product {display:block;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 auto;background-color:#18792500;}
.product-layout {display:flex;width:100%;flex-direction:column;align-items:center;justify-content:center;gap:2rem;background-color:#4463ef00;padding:3%;}
.table-product-info {display:flex;width:100%;padding:1%;background-color:rgba(128, 0, 128, 0);align-items:flex-start;justify-content:flex-start;}
.aksi-filter__wrapper {max-height:400px;overflow-y:auto;padding-right:5px;}
.aksi-filter__scroll {display:flex;flex-direction:column;gap:1rem;}
.aksi-filter__group {border-bottom:1px solid #ddd;padding-bottom:10px;}
@media (min-width:1500px) {
.container-product {flex-direction:column;}
.product-layout {flex-direction:row;}
}
@media (min-width:1300px) {
.product-layout {flex-direction:row;}
.table-product-info {align-items:center;justify-content:center;}
}
@media (min-width:900px) {
.container-product {flex-direction:row;}
.product-layout {flex-direction:row;}
}
.gallery-section {display:flex;width:100%;flex-direction:column;gap:1rem;background-color:rgba(172, 255, 47, 0);}
@media (min-width:768px) {
.gallery-section {flex-direction:column;gap:1.5rem;}
.thumbnails {flex-direction:column;order:2;width:100px;}
.main-image-container {order:1;flex:1;}
.container-product {padding:1rem;}
.product-title {font-size:1.5rem;}
.product-table {font-size:0.875rem;}
.nav-button {width:35px;height:35px;font-size:16px;}
.modal-content {position:relative;max-width:90vw;max-height:90vh;background:white;border-radius:12px;overflow:hidden;}
.modal-image {width:100%;height:100%;object-fit:contain;max-width:90vw;max-height:90vh;}
}

.thumbnail img {width:100%;height:100%;object-fit:contain;}
.thumbnail {flex:0 0 auto;width:80px;height:80px;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;box-sizing:border-box;transition:all 0.3s ease;flex-shrink:0;padding:1%;}
.thumbnails {display:flex;width:100%;height:130px;align-items:center;flex-direction:row;gap:0.75rem;order:2;background-color:#fffffff7;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;justify-content:flex-start;}

.thumbnail:hover {border-color:#3b82f6;transform:scale(1.05);}
.thumbnail.active {border-color:#2563eb;box-shadow:0 0 0 2px rgba(37, 99, 235, 0.2);}

.main-image-container {display:flex;align-items:center;justify-content:center;position:relative;order:1;flex:1;}
.main-image {display:flex;justify-content:center;align-items:center;height:auto;max-height:500px;aspect-ratio:1;border-radius:12px;overflow:hidden;background:white;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);position:relative;}
.main-image img {max-width:100%;max-height:100%;object-fit:contain;object-fit:cover;cursor:zoom-in;}
.nav-button {position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.9);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#475569;transition:all 0.3s ease;z-index:2;}
.nav-button:hover {background:white;color:#2563eb;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);}
.nav-button.prev {left:10px;}
.nav-button.next {right:10px;}
.expand-button {position:absolute;top:10px;right:10px;background:rgba(255, 255, 255, 0.9);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#475569;transition:all 0.3s ease;}
.expand-button:hover {background:white;color:#2563eb;box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);}
.product-info {width:auto;max-width:100%;background:white;border-radius:12px;padding:1rem;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);position:relative;}
.product-title {font-size:29px;font-weight:bold;margin-bottom:1rem;color:#124675;padding:3%;}
.table-container {display:flex;max-height:200px;overflow-y:auto;width:100%;}
.product-table th {background:#f1f5f9;color:#475569;font-weight:600;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em;padding:0.75rem;text-align:left;border-bottom:1px solid #e2e8f0;}
.product-table td {padding:0.75rem;border-bottom:1px solid #f1f5f9;color:#64748b;}
.product-table tr:hover {background:#f8fafc;}
.badge {display:inline-block;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;}
.badge-blue {background:#dbeafe;color:#1d4ed8;}
.badge-gray {background:#f1f5f9;color:#475569;}
.modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.9);z-index:1000;align-items:center;justify-content:center;}
.modal.active {display:flex;}
.modal-content {position:relative;max-width:60vw;max-height:90vh;background:white;border-radius:12px;overflow:hidden;}
.modal-image {width:100%;height:100%;object-fit:contain;max-width:90vw;max-height:90vh;}
.modal-nav {position:absolute;top:50%;transform:translateY(-50%);background:rgba(255, 255, 255, 0.9);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#475569;transition:all 0.3s ease;}
.modal-nav:hover {background:white;color:#2563eb;}
.modal-nav.prev {left:20px;}
.modal-nav.next {right:20px;}
.modal-close {position:absolute;top:20px;right:20px;background:rgba(255, 255, 255, 0.9);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#475569;transition:all 0.3s ease;}
.modal-close:hover {background:white;color:#ef4444;}
.acomodoimg-tabla {width:30px;}

.info-description-table {display:flex;flex-direction:column;width:100%;height:auto;background-color:#1d4fd800;}
.product-description {display:flex;flex-direction:column;width:100%;height:auto;background-color:#1dd82900;padding:3%;}
.boton-compra-linea {display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:80px;background-color:#1dd82900;padding:3%;}
.button-link {background-color:#D6001C;width:100%;height:auto;padding:2%;border:none;border-radius:21px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.15);text-decoration:none;transition:all .25s ease;font-size:16px;min-width:48px;min-height:48px;padding:12px 16px;}
.button-link a {color:white;font-weight:700;text-decoration:none;font-size:12px;}
.button-link:hover {background-color:#9b0418;}
#mainImage {display:flex;align-items:center;justify-content:center;}
#mainVideo {display:none;align-items:center;justify-content:center;}

.popup-product-overlay {display:none;position:fixed;top:0; left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:1rem;}
.popup-product-overlay.active {display:flex;}
.popup-product-box {background:#fff;border-radius:12px;padding:1.5rem;max-width:1500px;width:95%;max-height:95vh;overflow-y:auto;position:relative;box-shadow:0 8px 24px rgba(0,0,0,0.25);}
.popup-product-close {position:absolute;top:10px;right:10px;background:#f8f8f8;border:none;border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,0.2);z-index:50;}
.popup-product-close:hover {background:#ffefef;color:#c00;}

.yt-lite{position:relative;aspect-ratio:16/9;background:center/cover no-repeat;border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.15);cursor:pointer;}
.yt-lite::after{content:"";position:absolute; inset:0;background:linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);pointer-events:none;}
.yt-play{position:absolute; inset:auto 0 12px 12px;border:0; background:rgba(255,255,255,.9);width:64px; height:48px; border-radius:12px;display:grid; place-items:center; font:inherit;}
.yt-play::before{content:"";display:block; width:0; height:0;border-left:16px solid #e62117;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:translateX(2px);}
.yt-lite.is-activated{ cursor:default; }
.yt-lite iframe{position:absolute; inset:0; width:100%; height:100%;border:0; border-radius:16px;}

.skeleton {background:#e2e2e2;background:linear-gradient(90deg, #e2e2e2 25%, #f5f5f5 50%, #e2e2e2 75%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite;border-radius:4px;}
@keyframes skeleton-loading {0% { background-position:100% 50%; }100% { background-position:0 50%; }}
.skeleton-image {width:100%;height:300px;margin-bottom:16px;}
.skeleton-text {height:16px;margin-bottom:8px;}
.skeleton-title {height:24px;width:60%;margin-bottom:16px;}
.skeleton-table {height:120px;margin-top:20px;}