/* Imported from: ../ChokkuMatch/styles.css */
/* Imported from: ../../sub-components/ChokkuMatchProductCard/styles.css */
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-content { min-width: 0; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-name { overflow-wrap: anywhere; }

/* End import: ../../sub-components/ChokkuMatchProductCard/styles.css */

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match {
  width: 100%;
  padding: var(--match-padding-top) 22px var(--match-padding-bottom);
  color: var(--match-text);
  background: var(--match-bg);
  font-family: Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-header, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-quiz-box { width: 100%; max-width: var(--match-max); margin-right: auto; margin-left: auto; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-header { max-width: min(780px, var(--match-max)); margin-bottom: 35px; text-align: center; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-eyebrow, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-number { display: block; color: var(--match-muted); font-size: 11px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-eyebrow { margin-bottom: 12px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-title { margin: 0; color: var(--match-text); font-size: var(--match-title-size); font-weight: var(--match-title-weight); line-height: 1.05; letter-spacing: -0.05em; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-description { max-width: 660px; margin: 16px auto 0; color: var(--match-muted); font-size: var(--match-body-size); line-height: 1.65; }

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-quiz-box { min-height: 500px; overflow: hidden; padding: 34px 42px 40px; background: var(--match-quiz-bg); border: 1px solid var(--match-border); border-radius: var(--match-quiz-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.055); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress { display: flex; align-items: center; gap: 16px; margin-bottom: 43px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress-track { height: 5px; flex: 1; overflow: hidden; background: var(--match-progress-bg); border-radius: 999px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress-track span { height: 100%; display: block; background: var(--match-accent); border-radius: inherit; transition: width 350ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress strong { min-width: 45px; color: var(--match-muted); font-size: 11px; font-weight: 600; text-align: right; }

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-step { animation: cc_Z6ZOJ8rgEP_ZCpIOjDQI2_chokku-match-enter 320ms ease; text-align: center; }
@keyframes cc_Z6ZOJ8rgEP_ZCpIOjDQI2_chokku-match-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-number { margin-bottom: 8px; font-size: 10px; letter-spacing: 2px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-title { max-width: 850px; margin: 0 auto 9px; color: var(--match-text); font-size: var(--match-question-size); font-weight: var(--match-question-weight); line-height: 1.15; letter-spacing: -0.035em; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-subtitle { margin: 0 auto 31px; color: var(--match-muted); font-size: var(--match-body-size); line-height: 1.5; }

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid { width: 100%; max-width: 950px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid--three { max-width: 760px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid--styles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer { min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; padding: 24px 15px; color: var(--match-text); background: var(--match-answer-bg); border: 1px solid var(--match-border); border-radius: var(--match-answer-radius); font: inherit; cursor: pointer; transition: transform 200ms ease, background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer strong { font-size: 15px; font-weight: 650; line-height: 1.2; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer small { color: var(--match-muted); font-size: 11px; line-height: 1.4; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer:hover { transform: translateY(-4px); background: var(--match-card-bg); border-color: color-mix(in srgb, var(--match-text) 32%, var(--match-border)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer:focus-visible, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-link:focus-visible, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-media:focus-visible, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-reset:focus-visible, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-reset-link:focus-visible { outline: 2px solid var(--match-accent); outline-offset: 3px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-icon, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-swatch { width: 50px; height: 50px; flex: 0 0 auto; border: 1px solid var(--match-border); border-radius: 50%; box-shadow: inset 0 0 0 4px rgba(255,255,255,.45), 0 4px 10px rgba(0,0,0,.04); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-icon { display: grid; place-items: center; background: var(--match-card-bg); font-size: 19px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-swatch--light { background: linear-gradient(135deg, #fff, #e9e7df); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-swatch--wood { background: linear-gradient(135deg, #d6b187, #87623f); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-swatch--dark { background: linear-gradient(135deg, #363636, #080808); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-reset-link { margin-top: 25px; padding: 9px 14px; color: var(--match-muted); background: transparent; border: 0; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-reset-link:hover { color: var(--match-text); }

.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-profile { display: inline-block; margin-top: 16px; padding: 7px 14px; color: var(--match-text); background: var(--match-answer-bg); border: 1px solid var(--match-border); border-radius: 999px; font-size: var(--match-body-size); font-weight: 600; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-title { margin: 0; color: var(--match-text); font-size: var(--match-result-title-size); font-weight: var(--match-result-title-weight); line-height: 1.08; letter-spacing: -0.035em; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header p { margin: 12px auto 0; color: var(--match-muted); font-size: var(--match-body-size); line-height: 1.6; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header strong, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header small { display: block; margin-top: 12px; color: color-mix(in srgb, var(--match-text) 72%, transparent); font-size: 12px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header small { margin-top: 7px; color: var(--match-muted); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--match-gap); text-align: left; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card { overflow: hidden; background: var(--match-card-bg); border: 1px solid var(--match-border); border-radius: var(--match-card-radius); transition: transform 250ms ease, box-shadow 250ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-media { position: relative; width: 100%; aspect-ratio: var(--match-image-ratio); display: block; overflow: hidden; background: color-mix(in srgb, var(--match-card-bg) 82%, var(--match-border)); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-image { width: 100%; height: 100%; display: block; object-fit: var(--match-image-fit); transition: transform 400ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card:hover .chokku-match-product-image { transform: scale(1.035); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-no-image { height: 100%; display: grid; place-items: center; color: var(--match-muted); font-size: 12px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-badge { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 8px 11px; color: var(--match-text); background: rgba(255,255,255,.94); border-radius: 999px; box-shadow: 0 5px 15px rgba(0,0,0,.08); font-size: 10px; font-weight: 700; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-content { padding: 18px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-name { margin: 0 0 7px; font-size: var(--match-product-name-size); font-weight: var(--match-product-name-weight); line-height: 1.35; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-name a { color: var(--match-text); text-decoration: none; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-description { min-height: 3.2em; display: -webkit-box; overflow: hidden; margin: 0; color: var(--match-muted); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-price { display: block; margin-top: 12px; color: var(--match-text); font-size: 13px; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; color: var(--match-link); font-size: 11px; font-weight: 700; text-decoration: none; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-link span:last-child { transition: transform 200ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-link:hover span:last-child { transform: translateX(4px); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-empty { min-height: 150px; display: grid; place-items: center; padding: 24px; color: var(--match-muted); background: color-mix(in srgb, var(--match-card-bg) 85%, var(--match-border)); border: 1px dashed var(--match-border); border-radius: var(--match-card-radius); }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-reset { margin-top: 30px; padding: 13px 21px; color: color-mix(in srgb, var(--match-text) 70%, transparent); background: var(--match-card-bg); border: 1px solid var(--match-border); border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: color 200ms ease, border-color 200ms ease, transform 200ms ease; }
.cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-reset:hover { color: var(--match-text); border-color: var(--match-text); transform: translateY(-2px); }

@media (max-width: 1180px) {
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-quiz-box { padding: 30px 22px 34px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match { padding: 35px 12px 40px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-header { margin-bottom: 24px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-title { font-size: var(--match-title-size-mobile); letter-spacing: -0.04em; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-description { font-size: var(--match-body-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-quiz-box { min-height: 0; padding: 24px 13px 27px; border-radius: min(var(--match-quiz-radius), 20px); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress { margin-bottom: 30px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-title { font-size: var(--match-question-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-question-subtitle { margin-bottom: 22px; font-size: var(--match-body-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-grid--three .chokku-match-answer:last-child { grid-column: 1 / -1; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer { min-height: 125px; padding: 17px 10px; border-radius: min(var(--match-answer-radius), 15px); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer strong { font-size: 13px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer small { font-size: 9px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer-icon, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-swatch { width: 42px; height: 42px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-title { font-size: var(--match-result-title-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-header p { font-size: var(--match-body-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-grid { grid-template-columns: 1fr; gap: var(--match-gap-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card { display: grid; grid-template-columns: 125px minmax(0, 1fr); border-radius: min(var(--match-card-radius), 17px); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-media { height: 100%; min-height: 160px; aspect-ratio: auto; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-content { padding: 14px; }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-name { font-size: var(--match-product-name-size-mobile); }
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-badge { top: 8px; left: 8px; padding: 6px 8px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-step, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-progress-track span, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-answer, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-card, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-image, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-product-link span:last-child, .cc_Z6ZOJ8rgEP_ZCpIOjDQI2 .chokku-match-result-reset { animation: none; transition: none; }
}

/* End import: ../ChokkuMatch/styles.css */
