/* Product List Modern & Accessible Styles */
.toylib {}
.product-search-modern {margin-bottom:40px;padding:20px 40px;background:#f9f9f9; border:1px #e1e1e1 solid; border-radius:16px; /*box-shadow: 0 2px 8px rgba(0,0,0,0.05);*/}
.product-search-modern form {display: flex;flex-wrap: wrap;gap: 12px;align-items: flex-end;margin-bottom: 10px !important;}
.product-search-modern .form-group {flex: 1 1 auto;min-width: 150px;}
.product-search-modern label {display: block;font-weight: 600;color: #333;}
.product-search-modern select,.product-search-modern input[type="text"] {width: 100%;padding: 12px 16px;border: 1px solid #dee2e6;border-radius: 8px;font-size: 15px;background: #fff;transition: all 0.3s ease;box-sizing: border-box;}
.product-search-modern select:focus,.product-search-modern input[type="text"]:focus {outline: none;border-color: #ff8363;box-shadow: 0 0 0 3px rgba(255, 131, 99, 0.1);}
.product-search-modern .form-actions {display: flex;gap: 10px;align-items: center;}
.product-search-modern .search-btn {padding: 12px 32px;background: #ff8363;color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;white-space: nowrap;}
.product-search-modern .search-btn:hover,.product-search-modern .search-btn:focus {background: #e67352;outline: none;box-shadow: 0 4px 12px rgba(255, 131, 99, 0.3);}
.product-search-modern .reset-btn {padding: 12px 32px;background: #6c757d;color: #fff;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;white-space: nowrap;}
.product-search-modern .reset-btn:hover,.product-search-modern .reset-btn:focus {background: #5a6268;outline: none;box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);}
.product-list-modern {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 24px;margin-bottom: 40px;}
.product-card {background: #fff;border-radius: 12px;overflow: hidden;border: 1px solid #ddd;transition: all 0.3s ease;text-decoration: none;color: inherit;display: flex;flex-direction: column;}
.product-card:hover,.product-card:focus {transform: translateY(-4px);border: 0px;text-decoration: none;color: inherit;outline: 2px solid #ff8363;outline-offset: 2px;}
.product-card-link {width: 100%;border: none;background: none;padding: 0;cursor: pointer;text-align: left;color: inherit;font-family: inherit;font-size: inherit;}
.product-card-image {position: relative;width: 100%;height: 240px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.product-card-image img {height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.product-card:hover .product-card-image img {transform: scale(1.05);}
.product-card-body {padding: 20px;flex: 1;display: flex;flex-direction: column;}
.product-card-title {font-size: 20px;font-weight: 700;color: #333;margin-bottom: 12px;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;min-height: 50px;}
.product-card-info {display: flex;flex-direction: column;gap: 8px;margin-top: auto;}
.product-card-location {display: inline-block;padding: 6px 12px;background: #fff3cd;color: #856404;border-radius: 6px;font-size: 14px;font-weight: 600;text-align: center;}
.product-card-stats {display: flex;gap: 8px;}
.product-card-stats span {flex: 1;padding: 8px;background: #f8f9fa;border-radius: 6px;text-align: center;font-weight: 600;}
.product-card-stats .available {color: #28a745;background: #d4edda;}
.product-card-stats .total {color: #6c757d;}
.product-empty {text-align: center;padding: 60px 20px;background: #f8f9fa;border-radius: 12px;color: #6c757d;font-size: 18px;}

/* Product Modal Styles */
.product-modal[aria-hidden="true"] {display: none;}
.product-modal[aria-hidden="false"], .product-modal.show {display: flex;align-items: center;justify-content: center;padding-top: 30px;}
.product-modal {display: none;position: fixed;z-index: 9999;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;background-color: rgba(0,0,0,0.5);animation: product-fadeIn 0.3s;}
.product-modal-container {background-color: #fff;margin: auto;padding: 0;border-radius: 8px;width: 96%;max-width: 1000px;max-height: 90vh;overflow: hidden;box-shadow: 0 4px 20px rgba(0,0,0,0.3);animation: product-slideIn 0.3s;display: flex;flex-direction: column;}
.product-modal-close:focus {outline: 3px solid #4a90e2;outline-offset: 2px;}

@keyframes product-fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes product-slideIn {
	from {transform: translateY(-50px);opacity: 0;}
	to {transform: translateY(0);opacity: 1;}
}
.product-modal-header {padding: 20px 30px;border-bottom: 1px solid #e9ecef;display: flex;justify-content: space-between;align-items: center;background: #f8f9fa;border-radius: 8px 8px 0 0;flex-shrink: 0;}
.product-modal-title {font-size: 24px;color: #333;margin: 0;}
.product-modal-close {background: none;border: none;font-size: 28px;color: #666;cursor: pointer;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.2s;}
.product-modal-close:hover {background: #e9ecef;color: #333;}
.product-modal-body {padding: 30px;overflow-y: auto;flex: 1;min-height: 0;}
.product-modal-loading {text-align: center;padding: 60px 20px;color: #666;font-size: 16px;}
.product-modal-error {text-align: center;padding: 60px 20px;color: #dc3545;font-size: 16px;line-height: 1.6;}

/* Product Info Styles in Modal */
.product-modal-body .toy_view_info {display: flex;gap: 30px;margin-bottom: 30px;padding-bottom: 30px;border-bottom: 1px solid #e9ecef;}
.product-modal-body .tvi_img {flex: 0 0 300px;max-width: 300px;}
.product-modal-body .tvi_img img {width: 100%;height: auto;border-radius: 12px;object-fit: cover;}
.product-modal-body .tvi_txt {flex: 1;}
.product-modal-body .tvi_txt dt {font-size: 24px;font-weight: 700;color: #333;margin-bottom: 16px;}
.product-modal-body .tvi_txt dd {margin-bottom: 12px;font-size: 15px;}
.product-modal-body .tvi_txt dd .tit {font-weight: 600;color: #666;margin-right: 8px;}
.product-modal-body .tvi_txt dd .con {color: #333;}
.product-modal-body .tvi_txt dd .con1 {color: #ff8363;font-weight: 600;}
.product-modal-body .tvi_txt ul {list-style: none;padding: 0;margin: 16px 0 0 0;}
.product-modal-body .tvi_txt ul li {margin-bottom: 8px;font-size: 15px;}
.product-modal-body .tvi_txt ul li .tit {font-weight: 600;color: #666;margin-right: 8px;}
.product-modal-body .tvi_info_box {margin-bottom: 24px;padding: 20px;background: #f8f9fa;border-radius: 12px;}
.product-modal-body .tvi_info_box .tit {font-size: 18px;font-weight: 700;color: #333;margin-bottom: 12px;padding-bottom: 12px;/*border-bottom: 2px solid #ff8363;*/}
.product-modal-body .tvi_info_box .con {font-size: 15px;color: #555;line-height: 1.6;}
.product-modal-body .tvi_info_box img {max-width: 100%;height: auto;margin: 10px 0;border-radius: 8px;}
.product-modal-body .table02 {width: 100%;border-collapse: collapse;margin-top: 16px;}
.product-modal-body .table02 caption {text-align: left;font-weight: 600;margin-bottom: 12px;color: #333;}
.product-modal-body .table02 th,.product-modal-body .table02 td {padding: 12px;text-align: left;border-bottom: 1px solid #e9ecef;}
.product-modal-body .table02 th {background: #f8f9fa;font-weight: 600;color: #333;}
.product-modal-body .table02 td {color: #555;}
.product-modal-body .button {text-align: center;margin-top: 30px;padding-top: 30px;border-top: 1px solid #e9ecef;}
.product-modal-body .button a,.product-modal-body .button button {display: inline-block;padding: 12px 32px;background: #ff8363;color: #fff;border: none;border-radius: 8px;text-decoration: none;font-weight: 600;transition: all 0.3s ease;cursor: pointer;font-size: 16px;font-family: inherit;}
.product-modal-body .button a:hover,.product-modal-body .button a:focus,.product-modal-body .button button:hover,.product-modal-body .button button:focus {background: #e67352;outline: 2px solid #ff8363;outline-offset: 2px;}

/* Responsive */
@media screen and (max-width: 768px) {
	.product-search-modern {padding: 10px;}
	.product-search-modern form { display: grid; grid-template-columns: repeat(2, 1fr); }
	.product-search-modern .form-group {display: inline-flex;width: 100%;align-items: center;gap: 20px;}
	.product-search-modern .form-actions {grid-column: 1 / -1;display: flex;gap: 10px;}
	.product-search-modern .search-btn,.product-search-modern .reset-btn {flex: 1;width: 100%;}
	.product-list-modern {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap: 16px;}
	.product-card-image {height: 180px;}
	.product-card-body {padding: 16px;}
	.product-card-title {font-size: 18px;min-height: 44px;}
	
	/* Modal Responsive */
	.product-modal-container {width: 95%;max-height: 95vh;}
	.product-modal-header {padding: 20px;}
	.product-modal-title {font-size: 20px;}
	.product-modal-body {padding: 20px;}
	.product-modal-body .toy_view_info {flex-direction: column;gap: 20px;}
	.product-modal-body .tvi_img {flex: 0 0 auto;max-width: 100%;}
	.product-modal-body .tvi_txt dt {font-size: 20px;}
}

@media screen and (max-width: 480px) {
	.product-list-modern { grid-template-columns: 1fr; }
	.product-search-modern form { display: grid; grid-template-columns: repeat(1, 1fr); margin: 10px 0px !important; }
	.product-search-modern .form-actions {grid-column: 1;display: flex;gap: 10px;margin-top: 10px;}
	.product-search-modern .search-btn,.product-search-modern .reset-btn {flex: 1;width: 100%;}
	
	/* Modal Mobile */
	.product-modal-container {width: 96%;max-height: 90vh;border-radius: 10px;}
	.product-modal-header {padding: 16px;}
	.product-modal-title {font-size: 18px;}
	.product-modal-body {padding: 16px;}
	.product-modal-body .tvi_txt dt {font-size: 18px;}
	.product-modal-body .tvi_info_box {padding: 16px;}
	.product-modal-body .table02 {font-size: 14px;}
	.product-modal-body .table02 th,.product-modal-body .table02 td {padding: 8px;}
}