.frq-quiz {
--frq-accent: #111111;
--frq-text: #1a1717;
--frq-muted: #6b6764;
--frq-heading-size: 64px;
--frq-form-max-width: 1240px;
width: 100%;
margin: 0 auto;
color: var(--frq-text);
}
.frq-quiz *,
.frq-quiz *::before,
.frq-quiz *::after {
box-sizing: border-box;
}
.frq-shell {
width: 100%;
max-width: var(--frq-form-max-width);
margin: 0 auto;
background: transparent;
padding: 48px 24px;
}
.frq-step {
display: none;
width: 100%;
margin: 0 auto;
text-align: center;
}
.frq-step.is-active {
display: block;
}
.frq-step-counter,
.frq-results-eyebrow {
font-size: 16px;
color: var(--frq-muted);
margin-bottom: 20px;
}
.frq-step-title,
.frq-results-title {
margin: 0 0 26px;
font-size: clamp(32px, 5vw, var(--frq-heading-size));
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--frq-text);
}
.frq-step-subtitle,
.frq-results-subtitle {
max-width: 860px;
margin: 0 auto 30px;
font-size: 18px;
line-height: 1.6;
color: #2f2a28;
}
.frq-options-grid {
display: grid;
gap: 28px;
margin: 0 auto;
width: 100%;
}
.frq-options-grid.has-images {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.frq-options-grid.no-images {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.frq-option-card {
position: relative;
appearance: none;
-webkit-appearance: none;
border: 1px solid var(--frq-accent);
border-radius: 0;
background: transparent !important;
padding: 20px 20px 24px;
width: 100%;
min-height: 220px;
text-align: center;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
color: var(--frq-text) !important;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 18px;
font-family: inherit;
letter-spacing: normal;
text-transform: none;
outline: none;
}
.frq-option-card::before,
.frq-option-card::after,
.frq-option-image-wrap::before,
.frq-option-image-wrap::after {
content: none !important;
display: none !important;
}
.frq-option-card:hover,
.frq-option-card.is-selected {
transform: translateY(-2px);
box-shadow: inset 0 0 0 3px var(--frq-accent), 0 20px 40px rgba(17, 17, 17, 0.08);
border-color: transparent;
color: var(--frq-text) !important;
background: transparent !important;
}
.frq-option-card:focus-visible {
box-shadow: inset 0 0 0 3px var(--frq-accent), 0 0 0 3px rgba(17, 17, 17, 0.08);
border-color: transparent;
}
.frq-option-image-wrap {
width: 100%;
aspect-ratio: 1.05 / 0.85;
overflow: hidden;
background: #ece8e6;
display: block;
}
.frq-option-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.frq-option-label {
font-size: 20px;
line-height: 1.3;
color: inherit !important;
}
.frq-options-grid.no-images .frq-option-card {
min-height: 112px;
justify-content: center;
padding: 28px 28px;
flex-direction: row;
gap: 0;
text-align: left;
align-items: center;
}
.frq-options-grid.no-images .frq-option-indicator {
width: 24px;
height: 24px;
border: 2px solid var(--frq-accent);
border-radius: 999px;
display: inline-block;
margin-right: 12px;
position: relative;
flex: 0 0 auto;
}
.frq-options-grid.no-images .frq-option-card.is-selected .frq-option-indicator::after {
content: '' !important;
position: absolute;
inset: 4px;
border-radius: 999px;
background: var(--frq-accent);
display: block !important;
}
.frq-options-grid.has-images .frq-option-indicator {
display: none !important;
}
.frq-step-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 42px;
margin-top: 38px;
}
.frq-step-actions.is-first {
justify-content: flex-end;
}
.frq-nav-btn,
.frq-submit-btn,
.frq-add-to-cart-btn {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: #111;
font-size: 22px;
font-weight: 500;
cursor: pointer;
transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
font-family: inherit;
letter-spacing: normal;
text-transform: none;
}
.frq-nav-btn {
padding: 12px 18px;
border-radius: 999px;
}
.frq-nav-btn:hover,
.frq-nav-btn:focus-visible {
background: rgba(var(--frq-accent-rgb), 0.12);
color: #111;
}
.frq-nav-btn::before {
display: inline-block;
margin-right: 10px;
}
.frq-back-btn::before {
content: '←';
}
.frq-next-btn::after {
content: '→';
display: inline-block;
margin-left: 10px;
}
.frq-next-btn[disabled],
.frq-submit-btn[disabled] {
opacity: .38;
cursor: not-allowed;
}
.frq-email-form-wrap {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
margin-bottom: 26px;
}
.frq-email-input {
width: min(520px, 92%);
height: 76px;
border-radius: 999px;
border: 2px solid rgba(31, 28, 28, 0.75);
background: transparent;
padding: 0 28px;
font-size: 22px;
color: var(--frq-text);
}
.frq-email-input:focus {
outline: none;
border-color: var(--frq-accent);
}
.frq-submit-btn,
.frq-add-to-cart-btn {
background: #111;
color: #fff;
border-radius: 0;
min-width: 170px;
padding: 18px 28px;
font-size: 28px;
line-height: 1;
}
.frq-submit-btn:hover,
.frq-submit-btn:focus-visible,
.frq-add-to-cart-btn:hover,
.frq-add-to-cart-btn:focus-visible {
background: var(--frq-accent);
color: #fff;
}
.frq-disclaimer,
.frq-form-error,
.frq-cart-message {
font-size: 14px;
color: var(--frq-muted);
}
.frq-form-error,
.frq-cart-message.is-error {
color: #b42318;
}
.frq-cart-message.is-success {
color: #027a48;
}
.frq-results-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px;
margin-top: 40px;
}
.frq-product-card {
text-align: center;
}
.frq-product-image-link {
display: block;
margin-bottom: 16px;
}
.frq-product-image {
width: 100%;
height: auto;
object-fit: contain;
}
.frq-product-title {
margin: 0 0 6px;
font-size: 22px;
line-height: 1.25;
font-weight: 500;
}
.frq-product-title a,
.frq-product-image-link,
.frq-nav-btn,
.frq-add-to-cart-btn,
.frq-submit-btn {
text-decoration: none !important;
}
.frq-product-title a {
color: inherit;
}
.frq-product-price {
font-size: 18px;
margin-bottom: 18px;
}
.frq-product-selector {
text-align: left;
margin-bottom: 18px;
}
.frq-product-selector label {
display: block;
font-size: 15px;
color: var(--frq-muted);
margin-bottom: 8px;
}
.frq-product-selector select {
width: 100%;
min-height: 58px;
border: 1px solid #c8c2be;
background: #fff;
padding: 0 16px;
font-size: 18px;
}
.frq-selector-placeholder {
height: 88px;
}
.frq-empty-state {
padding: 28px;
border: 1px dashed #8e8a86;
font-size: 18px;
max-width: 860px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.frq-options-grid.has-images,
.frq-options-grid.no-images,
.frq-results-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.frq-shell {
padding: 26px 16px;
}
.frq-options-grid.has-images,
.frq-options-grid.no-images,
.frq-results-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.frq-option-card,
.frq-options-grid.no-images .frq-option-card {
min-height: auto;
}
.frq-step-actions,
.frq-step-actions.is-first {
justify-content: space-between;
gap: 14px;
}
.frq-nav-btn,
.frq-submit-btn {
font-size: 20px;
}
.frq-submit-btn,
.frq-add-to-cart-btn {
width: 100%;
}
}
.frq-results-footer {
margin-top: 42px;
padding-top: 34px;
border-top: 1px solid #ddd6d1;
text-align: center;
}
.frq-coupon-wrap {
max-width: 580px;
margin: 0 auto 34px;
}
.frq-coupon-title {
font-size: 18px;
line-height: 1.5;
font-weight: 600;
margin-bottom: 16px;
}
.frq-coupon-box {
min-height: 66px;
border: 1px solid #bcb5b0;
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
}
.frq-coupon-icon,
.frq-coupon-copy-btn {
width: 40px;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #6b6764;
}
.frq-coupon-code {
flex: 1 1 auto;
text-align: center;
font-size: 20px;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--frq-text);
}
.frq-coupon-copy-btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
.frq-coupon-copy-btn:hover,
.frq-coupon-copy-btn:focus-visible {
background: rgba(var(--frq-accent-rgb), 0.12);
color: inherit;
border-radius: 999px;
}
.frq-coupon-message {
min-height: 20px;
margin-top: 10px;
font-size: 14px;
color: var(--frq-muted);
}
.frq-coupon-message.is-success {
color: #027a48;
}
.frq-coupon-message.is-error {
color: #b42318;
}
.frq-retake-btn {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid currentColor;
color: var(--frq-text);
font-size: 16px;
line-height: 1;
cursor: pointer;
padding: 0 0 6px;
}
.frq-retake-btn:hover,
.frq-retake-btn:focus-visible {
background: rgba(var(--frq-accent-rgb), 0.12);
color: var(--frq-text);
border-radius: 999px;
padding: 10px 16px;
border-bottom-color: transparent;
}
@media (max-width: 767px) {
.frq-coupon-box {
padding: 12px 14px;
}
.frq-coupon-code {
font-size: 17px;
letter-spacing: 0.05em;
}
}