body#pagesskintype .template-page--root{background-color:silver;margin-bottom:1rem;border-radius:0 0 1rem 1rem}#result-skin-type{display:none;max-height:none;overflow:visible;transition:opacity .4s ease;opacity:0}#result-skin-type.active{display:block;opacity:1}#skin-quiz{max-width:600px;height:500px;margin:2rem auto;border-radius:16px;overflow:hidden;font-family:Helvetica Neue,sans-serif;background:#fdfdfd;box-shadow:0 10px 30px #00000012;position:relative;z-index:10}.question,#result-skin-type{transition:transform .6s ease,opacity .6s ease;position:absolute;top:0;right:0;bottom:0;left:0;padding:2rem;box-sizing:border-box;opacity:0;transform:translate(100%);overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable;background:#fff;z-index:1;pointer-events:none}.question.active,#result-skin-type.active{position:absolute;opacity:1;transform:translate(0);z-index:20;pointer-events:auto}.question.prev{transform:translate(-100%);opacity:0}.question p{font-size:1.2rem;margin-bottom:1.5rem;font-weight:600}label{display:flex;align-items:center;gap:.75rem;background:#fff;padding:1rem;border-radius:12px;border:1px solid #ddd;margin-bottom:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #00000008}label:hover{background:#f3f3f3;border-color:#ccc}input[type=radio],input[type=checkbox]{position:absolute;opacity:0;pointer-events:none}body#pagesskintype label:has(input:checked){border-color:silver;background:#5c4338;font-weight:600;color:#fff}.add-all-to-cart-quiz{display:none!important}.add-all-to-cart-quiz:hover{background:#6b4226;color:#fff!important}.button{background:transparent;color:#6b4226;padding:.8rem 2rem;border:2px solid #6b4226;border-radius:9999px;margin:2rem auto 0;display:block;font-size:1rem;cursor:pointer;transition:all .3s ease}.button:hover{background:#6b4226;color:#fff}#result-skin-type{text-align:center;font-size:14px;line-height:1.6;opacity:0;transform:translateY(30px);transition:opacity .6s ease-in,transform .6s ease-in;background:#fff;z-index:20}#result-skin-type.active{opacity:1;transform:translateY(0)}.progress-bar-wrapper{position:relative;z-index:10;width:100%;height:6px;background:#eee;border-radius:6px;overflow:hidden;margin-bottom:1rem}.progress-bar-fill{height:100%;width:0%;background:#6b4226;transition:width .4s ease}.skip-btn{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;display:inline-block;background-color:#6b4226;color:#fff;border:none;border-radius:3rem;padding:.75rem 1.25rem;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 4px 12px #0000001a;margin-bottom:1.5rem}.skip-btn.animated{opacity:1;transform:translateY(0)}.answer-image{width:20px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:4px 0;box-sizing:content-box}.answer-icon{min-height:100%;object-fit:contain;display:block}.quiz-intro{position:absolute;top:0;right:0;bottom:0;left:0;background:#fdfdfd;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:30;padding:2rem;transition:opacity .6s ease,transform .6s ease}.quiz-intro:not(.active){opacity:0;pointer-events:none;transform:translateY(-30px)}.intro-content h2{font-size:1.8rem;margin-bottom:1rem}.intro-content p{font-size:1rem;color:#444;margin-bottom:1.5rem}.routine-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 4rem;margin:2rem auto;max-width:1000px}.routine-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.5rem;background:#fff}.routine-text h2{margin:0 0 .5rem;font-size:1.5rem;color:#333}.routine-text h2 span{font-size:3rem}.routine-text h3{margin:0 0 .5rem;font-size:1rem;text-transform:uppercase}.routine-text p{font-size:.9rem;margin:.25rem 0;color:#555;font-weight:400}.routine-visual{display:flex;flex-direction:column;align-items:center}.routine-visual img{width:150px;height:auto;max-height:120px;object-fit:cover;border-radius:.5rem;margin-bottom:.5rem}.routine-visual .button{font-size:.9rem;padding:.5rem 1rem;margin:0;background:#5c4338;color:#fff;text-decoration:none!important}@media screen and (max-width: 768px){.result-content>h2{font-size:6vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 auto}.routine-visual img{width:100%;height:auto}.routine-text h2 span{font-size:1.5rem}.routine-grid{grid-template-columns:1fr}.routine-item{grid-template-columns:1fr;text-align:center}.routine-visual img{max-width:100%}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/skin-quizz.css.map */
