.coffee-quiz-wrapper{width:100%;max-width:1400px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}.coffee-quiz-container{background:#fff;border-radius:20px;padding:2rem;position:relative;min-height:400px;display:flex;flex-direction:column;gap:2rem}@media screen and (min-width: 750px){.coffee-quiz-container{padding:3rem;flex-direction:row;gap:4rem;align-items:stretch;min-height:550px}}.quiz-sidebar{display:none;flex-direction:column;gap:1.5rem;flex-shrink:0;align-items:flex-start;justify-content:center}.quiz-sidebar.active{display:flex}.quiz-sidebar-main{display:flex;flex-direction:row;gap:1.5rem;align-items:center}@media screen and (min-width: 750px){.quiz-sidebar{width:260px}}@media screen and (max-width: 749px){.quiz-sidebar.active,.quiz-sidebar-main{flex-direction:column;gap:1rem}}.quiz-sidebar-progress{display:flex;flex-direction:column;gap:0;padding:.5rem 0 0;position:relative;width:20px;flex-shrink:0}.quiz-sidebar-progress:before{content:"";position:absolute;left:50%;transform:translate(-50%);top:.5rem;bottom:0;width:3px;background:#ccc;z-index:0}.quiz-progress-dot{width:14px;height:14px;border-radius:50%;background:#ccc;position:relative;z-index:2;transition:background .3s ease;margin:0 auto;border:3px solid #ffffff;box-sizing:content-box}.quiz-progress-dot:not(:last-child){margin-bottom:3.5rem}.quiz-progress-dot.answered{background:#000}.quiz-progress-dot.active{background:#000;box-shadow:0 0 0 4px #0000001a}@media screen and (max-width: 749px){.quiz-sidebar-progress{flex-direction:row;gap:0;padding-top:0;padding-left:.5rem}.quiz-sidebar-progress:before{left:.5rem;right:.5rem;top:7px;bottom:auto;width:auto;height:2px}.quiz-progress-dot{margin-bottom:0;margin-right:2.5rem}.quiz-progress-dot:last-child{margin-right:0}}.quiz-sidebar-items{display:flex;flex-direction:column;gap:0;flex:1;padding-top:.25rem}.quiz-sidebar-item:not(:last-child){margin-bottom:2.5rem}@media screen and (max-width: 749px){.quiz-sidebar-items{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.quiz-sidebar-item:not(:last-child){margin-bottom:0}}.quiz-sidebar-item{display:flex;gap:.75rem;padding:.5rem 0;cursor:default;transition:all .2s ease}.quiz-sidebar-item.answered{cursor:pointer}.quiz-sidebar-item.answered:hover{opacity:.7}.quiz-sidebar-number{font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:#666;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#e5e5e5;flex-shrink:0}.quiz-sidebar-item.answered .quiz-sidebar-number,.quiz-sidebar-item.current .quiz-sidebar-number{background:#000;color:#fff}.quiz-sidebar-content{flex:1;min-width:0}.quiz-sidebar-label{font-family:Poppins,sans-serif;font-size:11px;font-weight:500;color:#666;margin-bottom:.125rem;text-transform:uppercase;letter-spacing:.5px}.quiz-sidebar-answer{font-family:Poppins,sans-serif;font-size:14px;color:#000;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiz-sidebar-item:not(.answered) .quiz-sidebar-answer{color:#ccc}@media screen and (min-width: 750px){.quiz-sidebar-number{width:32px;height:32px;font-size:16px}.quiz-sidebar-label{font-size:12px}.quiz-sidebar-answer{font-size:15px}}.quiz-sidebar-repeat{display:block;margin-top:1.5rem;margin-left:calc(20px + 1.5rem)}.quiz-repeat-button.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}@media screen and (max-width: 749px){.quiz-sidebar-repeat{margin-left:0}}.quiz-repeat-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:transparent;border:1px solid #000000;border-radius:50px;cursor:pointer;transition:all .2s ease;font-family:Poppins,sans-serif;font-size:14px;font-weight:500;color:#000}.quiz-repeat-button:hover{background:#000;color:#fff}.quiz-repeat-icon{font-size:18px}.quiz-content-area{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;min-height:500px}@media screen and (min-width: 750px){.quiz-content-area{min-height:450px}}.quiz-reset-wrapper{display:none;margin-bottom:1.5rem;position:relative;height:36px}.quiz-reset-wrapper.active{display:flex;justify-content:flex-end}.quiz-reset-button{background:transparent;border:1px solid #e5e5e5;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0;color:#666;font-size:20px;line-height:1}.quiz-reset-button:hover{border-color:#000;background:#f5f5f5;color:#000}@media screen and (min-width: 750px){.quiz-reset-wrapper{height:40px}.quiz-reset-button{width:40px;height:40px;font-size:22px}}.quiz-state{display:none;opacity:0;transition:opacity .3s ease}.quiz-state.active{display:flex;flex-direction:column;justify-content:center;flex:1;animation:fadeIn .3s ease forwards}.quiz-results.active{justify-content:flex-start}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.quiz-intro-content{text-align:center;padding:2rem 0}.quiz-heading{margin:0 0 1rem;line-height:1.3}.quiz-subheading{font-family:Poppins,sans-serif;font-size:16px;color:#666;margin:0 0 2rem;line-height:1.6}@media screen and (min-width: 750px){.quiz-subheading{font-size:18px}}.quiz-button{font-family:Poppins,sans-serif;font-size:16px;font-weight:500;padding:14px 32px;border-radius:100px;border:1px solid #000000;background:transparent;color:#000;cursor:pointer;transition:all .3s ease;text-decoration:none;display:inline-block}.quiz-button:hover{background:#000;color:#fff}.quiz-start-button{font-size:18px;padding:16px 40px}@media screen and (min-width: 750px){.quiz-button{font-size:18px;padding:16px 40px}.quiz-start-button{font-size:20px;padding:18px 48px}}.quiz-button-secondary{background:#fff;border-color:#000;color:#000}.quiz-button-secondary:hover{background:#f5f5f5;color:#000}.quiz-progress{margin-bottom:2rem;display:flex;align-items:center;gap:1rem}.quiz-progress-bar{flex:1;height:8px;background:#0000001a;border-radius:999px;overflow:hidden}.quiz-progress-fill{height:100%;background:#000;border-radius:999px;transition:width .3s ease}.quiz-progress-text{font-family:Poppins,sans-serif;font-size:14px;color:#666;white-space:nowrap}@media screen and (min-width: 750px){.quiz-progress-text{font-size:16px}}.quiz-question-title{font-family:Poppins,sans-serif;font-size:28px;font-weight:600;color:#000;margin:0 0 1.5rem;text-align:center;line-height:1.3}@media screen and (min-width: 750px){.quiz-question-title{font-size:36px;margin-bottom:2rem}}.quiz-answers{display:grid;grid-template-columns:1fr;gap:1rem;max-width:600px;margin:0 auto}@media screen and (min-width: 750px){.quiz-answers{grid-template-columns:1fr 1fr}}.quiz-answer{font-family:Poppins,sans-serif;display:flex;align-items:center;justify-content:center;gap:1rem;padding:18px 24px;border:1px solid #000000;border-radius:20px;background:#fff;cursor:pointer;transition:all .3s ease;text-align:center}.quiz-answer:hover{background:#000;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.quiz-answer.answered{animation:buttonClick .3s ease}@keyframes buttonClick{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.quiz-answer-icon{font-size:28px;flex-shrink:0}.quiz-answer-text{font-size:16px;font-weight:500}@media screen and (min-width: 750px){.quiz-answer{padding:20px 28px}.quiz-answer-icon{font-size:32px}.quiz-answer-text{font-size:18px}}.quiz-results-heading{font-family:Poppins,sans-serif;font-size:32px;font-weight:600;color:#000;margin:0 0 .5rem;text-align:center}.quiz-results-subheading{font-family:Poppins,sans-serif;font-size:16px;color:#666;text-align:center;margin:0 0 2rem}@media screen and (min-width: 750px){.quiz-results-heading{font-size:42px}.quiz-results-subheading{font-size:18px}}.quiz-results-products{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2rem}@media screen and (min-width: 990px){.quiz-results-products{grid-template-columns:repeat(3,1fr)}}.quiz-product-card{border:1px solid #e5e5e5;border-radius:20px;overflow:hidden;transition:all .3s ease;background:transparent;display:flex;flex-direction:column;position:relative}.quiz-match-badge{position:absolute;top:12px;left:12px;background:#000;color:#fff;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;padding:6px 12px;border-radius:20px;z-index:5}.quiz-product-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #0000001a;border-color:#000}.quiz-product-link{text-decoration:none;color:inherit;flex:1;display:flex;flex-direction:column}.quiz-product-image{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#f5f5f5}.quiz-product-image img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.quiz-product-info{padding:1.25rem;flex:1;display:flex;flex-direction:column}.quiz-product-title{font-family:Poppins,sans-serif;font-size:18px;font-weight:500;color:#000;margin:0 0 .25rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}.quiz-product-vendor{font-family:Poppins,sans-serif;font-size:15px;color:#666;margin:0 0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}.quiz-product-metafields{display:flex;flex-direction:column;gap:.5rem;margin:.75rem 0;padding:.5rem 0;min-height:140px}.quiz-product-meta{font-family:Poppins,sans-serif;font-size:14px;line-height:1.4;color:#333}.quiz-product-meta.disabled{opacity:.4}.quiz-product-meta-label{color:#666;font-weight:500}.quiz-product-meta-value{color:#000}.quiz-product-meta-text{min-height:52px}.quiz-product-meta-text .quiz-product-meta-value{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}.flavor-item{transition:background-color .2s ease,color .2s ease}.flavor-item--highlighted{font-weight:600;padding:.1rem .35rem;border-radius:4px;background:#e6394626;color:#e63946}.quiz-product-meta-bar{display:flex;align-items:center;gap:10px;min-height:20px}.quiz-product-meta-bar .quiz-product-meta-label{flex-shrink:0;white-space:nowrap;width:70px}.quiz-meta-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;flex:1}.quiz-meta-segment{height:5px;background-color:#e5e5e5;border-radius:2px}.quiz-meta-segment.active{background-color:#121212}.quiz-product-price{font-family:Poppins,sans-serif;font-size:20px;font-weight:600;color:#000;margin:auto 0 0}.quiz-product-button{font-family:Poppins,sans-serif;display:block;text-align:center;padding:8px 16px;margin:0 1.25rem 1.25rem;border:1px solid #000000;border-radius:100px;background:transparent;color:#000;text-decoration:none;font-size:14px;font-weight:500;transition:all .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quiz-product-button:hover{background:#000;color:#fff}@media screen and (min-width: 750px){.quiz-product-title{font-size:18px}.quiz-product-vendor{font-size:15px}.quiz-product-price{font-size:20px}.quiz-product-button{font-size:14px;padding:10px 20px}}.quiz-results-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2rem}@media screen and (max-width: 749px){.coffee-quiz-container{padding:1.5rem;min-height:350px}.quiz-answer{padding:1rem 1.25rem}.quiz-results-products{gap:1rem}}.quiz-state.loading{opacity:.6;pointer-events:none}.quiz-answer:focus,.quiz-button:focus{outline:2px solid #000000;outline-offset:2px}@media (prefers-reduced-motion: reduce){.quiz-state,.quiz-answer,.quiz-product-card,.quiz-progress-fill{transition:none;animation:none}}.quiz-results-products-wrapper{position:relative;padding:0 60px}.quiz-pagination-wrapper{position:absolute;top:35%;left:0;right:0;transform:translateY(-50%);pointer-events:none;z-index:10;display:none}.quiz-pagination-wrapper.has-pagination{display:flex;justify-content:space-between;align-items:center}.quiz-pagination-arrow{width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid #000000;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease;pointer-events:auto;box-shadow:0 2px 8px #0000001a}.quiz-pagination-arrow:hover:not(:disabled){background:#000;color:#fff;transform:scale(1.05)}.quiz-pagination-arrow:disabled{opacity:.3;cursor:not-allowed}.quiz-pagination-prev{margin-left:0}.quiz-pagination-next{margin-right:0}@media screen and (max-width: 749px){.quiz-pagination-arrow{width:40px;height:40px}.quiz-pagination-arrow svg{width:20px;height:20px}.quiz-pagination-prev{margin-left:-48px}.quiz-pagination-next{margin-right:-48px}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/coffee-quiz.css.map */