product-guide{position:relative;display:flex;align-items:center;min-height:calc(100vh - var(--header-height) + 20px);height:auto;overflow:hidden}product-guide .background-image--wrapper{position:absolute;top:0;right:0;bottom:0;left:0}product-guide .background-overlay{position:absolute;display:block;top:0;right:0;bottom:0;left:0;z-index:1;background-color:rgba(0 0 0 / var(--overlay-opacity))}product-guide .start-guide{position:relative;z-index:2;padding-inline:80px;width:100%;display:flex;flex-direction:column;gap:10px}product-guide .start-guide h2{font-size:42px;font-weight:700}product-guide .main-content{z-index:2;padding:60px 80px;width:100%;display:none;gap:20px}product-guide .guide-index{width:190px;flex-shrink:0}/*! 面板标题层 */product-guide .guide-title-bar{display:flex;gap:10px;margin-block-end:40px}product-guide .guide-question{font-size:20px;font-weight:500;flex:1}product-guide .question-icon{display:flex;justify-content:center;align-items:center;position:relative;width:30px;height:30px;background-color:#fff;color:#000;border-radius:50%}product-guide .question-icon svg{width:16px;height:16px}product-guide .question-icon ul{--width: 320px;position:absolute;top:0;left:0;padding:30px;width:var(--width);max-height:300px;transform:translate(calc(-1 * var(--width)));border-radius:15px;background-color:#000;color:#fff;opacity:0;visibility:hidden;transition:all .2s ease;cursor:pointer;z-index:3;font-size:13px}product-guide .question-icon:hover ul,product-guide .question-icon:active ul,product-guide .question-icon:focus ul{opacity:1;visibility:visible}product-guide .question-icon ul li{padding-block:4px}product-guide .question-icon ul li strong{margin-right:10px}product-guide .guide-list{flex:1}product-guide .guide-panel{position:relative;display:none;grid-template-columns:repeat(3,1fr);gap:20px}product-guide .guide-panel.current{display:grid}/*! 第三层 - 产品层 */product-guide .guide-panel.current.with-products{display:flex;flex-direction:column;gap:20px}product-guide .guide-panel.with-products .tabs{display:flex;gap:20px;margin-block-end:10px;flex-wrap:wrap}product-guide .guide-panel.with-products .tab{font-size:18px;font-weight:500;padding:10px 26px;border:solid 1px #fff;background-color:#0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:5px;cursor:pointer;transition:all .3s ease}product-guide .guide-panel.with-products .tab.active{background-color:#fff9;color:#000}product-guide .guide-panel.with-products .product-box{display:none}product-guide .guide-panel.with-products .product-box.current{display:grid}/*! 内容盒子 */product-guide .guide-box{position:relative;cursor:pointer}product-guide .guide-box.card-box{aspect-ratio:2/1;overflow:hidden}product-guide .guide-box.product-box{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}product-guide .guide-box.with-image img{width:100%;height:100%;object-fit:cover}product-guide .guide-box.with-image.active{border:solid 2px #fff}product-guide .guide-box .box-title{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;padding-inline:10px;justify-content:center;align-items:center;text-align:center;font-size:26px;font-weight:500;background-color:#0000004d;transition:background-color .5s ease}product-guide .guide-box:hover .box-title{background-color:#000000b3}product-guide .guide-box:not(.with-image) .box-title{border:solid 2px #fff;background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}product-guide .guide-box:not(.with-image).active .box-title{background:#fff9}product-guide .guide-box.product-box .product-card{background-color:transparent;height:100%;cursor:default}product-guide .guide-box.product-box .product-card .product-media{aspect-ratio:1/1;border-radius:8px;overflow:hidden}product-guide .guide-box.product-box .product-card .product-media img{width:100%;height:100%;object-fit:cover;object-position:center}product-guide .guide-box.product-box .product-card .product-content{margin-block-start:12px}product-guide .guide-box.product-box .product-card .product-title{font-size:18px;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-clamp:1;-webkit-line-clamp:1}product-guide .guide-box.product-box .product-card .product-price{font-size:20px;padding-block:4px 10px}product-guide .guide-box.product-box .product-card .price--compare-at{opacity:.5;text-decoration:line-through;font-size:14px;margin-left:10px}product-guide .guide-box.product-box .product-card .product-link{display:inline-block;padding:8px 20px;border:solid 1px rgb(var(--color-foreground));font-size:14px;border-radius:40px}product-guide .guide-list .buttons{display:flex;gap:16px;margin-block:50px}product-guide .guide-list .buttons .nav-button{border:none;background-color:#fff;color:#000;font-size:20px;font-weight:500;width:300px;padding-block:12px;text-align:center}product-guide .guide-list .buttons .nav-button:disabled{opacity:.6}/*! 左侧引导步骤 */product-guide .steps{padding-block-start:70px}product-guide .steps li{display:flex;position:relative;align-items:center}product-guide .steps li:not(:first-of-type){padding-block-start:40px}product-guide .steps li .icon{width:30px;height:30px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:16px;background-color:#fff;color:#000;border-radius:50%;margin-inline-end:10px;cursor:pointer}product-guide .steps li .icon svg{display:none;width:15px;height:15px}product-guide .steps li .line{position:absolute;width:1px;height:40px;top:0;left:15px;background-color:#fff}product-guide .steps li.selected .icon svg{display:block}product-guide .steps li.selected .icon .num{display:none}product-guide .steps li.current .icon,product-guide .steps li.selected .icon:hover{background-color:#c00b0b;color:#fff}@media screen and (max-width: 767px){product-guide{align-items:flex-start}product-guide .start-guide{padding-inline:20px;padding-block-start:150px}product-guide .start-guide h2{font-size:28px}product-guide .main-content{flex-direction:column;padding:30px 20px}product-guide .guide-index{width:100%}product-guide .guide-index .steps{padding-top:0;display:flex;gap:20px;justify-content:center}product-guide .guide-index .steps li{flex-direction:column;gap:8px;font-size:12px;padding:0;width:80px}product-guide .guide-index .steps li .icon{margin:0}product-guide .guide-index .steps li .text{text-align:center;width:100%}product-guide .guide-index .steps li .line{width:80px;height:1px;top:15px;left:-15px;transform:translate(-50%);z-index:-1}product-guide .guide-panel,product-guide .guide-box.product-box{grid-template-columns:1fr 1fr}product-guide .guide-panel[level="1"]{grid-template-columns:1fr}product-guide .guide-box .box-title{font-size:16px}product-guide .guide-panel[level="1"] .box-title{font-size:24px}product-guide .guide-panel[level="1"] .guide-box{margin-inline:40px}product-guide .guide-box.product-box .product-card .product-title{font-size:12px}product-guide .guide-panel.with-products .tab{padding:8px 12px;font-size:14px}product-guide .guide-list .buttons{margin:20px 0 0;display:flex}product-guide .guide-list .buttons button{flex:.5}product-guide .guide-title-bar{flex-direction:column;align-items:center}product-guide .question-icon ul{top:40px;left:50%;transform:translate(-50%)}}
/*# sourceMappingURL=/cdn/shop/t/27/assets/section-product-guide.css.map */