/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


.custom-product-grid{ display:flex;overflow-x: scroll;padding:5px;}
.product-item{width: 120px;
  height: 120px;
  position: relative;
  cursor: pointer;background-color: #be8f7c; margin:5px 5px 10px 5px}
.temper-Main{ height:100%; text-align:center; color:#fff;display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;}
.temper-alloyName{font-size: 17px;
  font-weight: bold;
  line-height: 17px;}
.temper-bottomDetail{font-size: 13px;padding: 0 5px;word-break: break-all; line-height:1.5}
.temper-detailhover{width: 144px;
	height: 144px;
	position:absolute;left:-15px; top:-15px; 
	z-index: 10;
	box-shadow: 2px 2px 2px 2px rgba(30, 30, 30, 0.4);
	-moz-box-shadow: 2px 2px 2px 2px rgba(30, 30, 30, 0.4);
	-webkit-box-shadow: 2px 2px 2px 2px rgba(30, 30, 30, 0.4);
	cursor: pointer;background-color: #be8f7c;display:none;z-index:10}
.product-item:hover .temper-detailhover{ display:block}
.temper-alloyNameDetail{font-size: 15px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;margin:0 8px;}
.temper-specifications{font-size: 10px;
  color: white;
  margin:0 8px;
  white-space: nowrap;
line-height:1.5;
  display: block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:8;overflow: hidden; }
.product-row{ display:table-cell}

.product-item {
  width: 160px !important;
  height: 160px !important;

}

.temper-detailhover {
    width: 184px !important;
  height: 184px !important;
}

.scroll-container {
  position: relative;
 /* 为每个模块留出间距 */
}

.scroll-content {
  width: 2000px; /* 内容宽度，超过容器宽度 */
  display: flex;
  height: 100%;
}

.item {
  width: 300px;
  margin-right: 10px;
  background-color: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollbar {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 400px; /* 滚动条宽度 */
  height: 10px;
  background-color: #f1f1f1;
}

.scroll-line {
  width: 100%;
  height: 2px;
  background-color: #bbb;
  position: absolute;
}

.scroll-handle {
  width: 20px;
  height: 10px;
  background-color: #888;
  cursor: pointer;
}
.temper-add{ position: absolute;
  right: 5px;
  bottom: 5px;
  height: 20px; border:1px solid #ddd; background:#fff;padding: 0 2px;
  font-size:10px;
  line-height: 20px;
  border-radius: 24px; }
.product-list-47 .product-item,.product-list-47 .temper-detailhover{background-color: #9CB2BF;}
.product-list-51 .product-item,.product-list-51 .temper-detailhover{background-color: #849FAE;}
.product-list-48 .product-item,.product-list-48 .temper-detailhover{background-color: #618194;}
.product-list-50 .product-item,.product-list-50 .temper-detailhover{background-color: #597688;}
.product-list-46 .product-item,.product-list-46 .temper-detailhover{background-color: #4B6574;}
.product-list-49 .product-item,.product-list-49 .temper-detailhover{background-color: #49616F;}
.product-list-64 .product-item,.product-list-64 .temper-detailhover{background-color: #384B56;}