/* ─────────────────────────────────────────────────────────────────────────────
   Brunette & Co. — Skincare Questionnaire  v1.0.0
   Colour palette: warm neutrals / caramel
───────────────────────────────────────────────────────────────────────────── */

.bq-wrap {
	--bq-accent:        #c4a882;
	--bq-accent-dark:   #a98a68;
	--bq-accent-bg:     #faf3ea;
	--bq-text:          #1e1916;
	--bq-text-muted:    #7a6f66;
	--bq-bg:            #faf8f5;
	--bq-card:          #ffffff;
	--bq-border:        #e8e0d6;
	--bq-border-sel:    #c4a882;
	--bq-warn-bg:       #fff8ec;
	--bq-warn-border:   #e8c87a;
	--bq-warn-text:     #7a5a00;
	--bq-info-bg:       #edf5ff;
	--bq-info-border:   #90bae8;
	--bq-info-text:     #1a3d6b;
	--bq-radius:        12px;
	--bq-radius-pill:   50px;
	--bq-shadow:        0 2px 14px rgba(30,25,22,.07);
	--bq-shadow-hover:  0 6px 24px rgba(30,25,22,.12);
	--bq-font:          'Montserrat', sans-serif;
	--bq-transition:    .2s ease;

	font-family:        var(--bq-font);
	color:              var(--bq-text);
	background:         var(--bq-bg);
	border-radius:      var(--bq-radius);
	padding:            40px 32px 48px;
	max-width:          860px;
	margin:             0 auto;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */

.bq-progress-wrap {
	display:        flex;
	align-items:    center;
	gap:            16px;
	margin-bottom:  36px;
}

.bq-progress-track {
	flex:           1;
	height:         4px;
	background:     var(--bq-border);
	border-radius:  4px;
	overflow:       hidden;
}

.bq-progress-bar {
	height:         100%;
	background:     var(--bq-accent);
	border-radius:  4px;
	transition:     width .5s ease;
}

.bq-progress-label {
	font-size:      .75rem;
	font-weight:    500;
	color:          var(--bq-text-muted);
	white-space:    nowrap;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── Steps ────────────────────────────────────────────────────────────────── */

.bq-step {
	display: none;
}

.bq-step--active {
	display:   block;
	animation: bqFadeUp .35s ease both;
}

@keyframes bqFadeUp {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bq-step-num-label {
	font-size:      .7rem;
	font-weight:    600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--bq-accent);
	margin:         0 0 12px;
}

.bq-question {
	font-size:      1.55rem;
	font-weight:    600;
	line-height:    1.3;
	margin:         0 0 8px;
	color:          var(--bq-text);
}

.bq-subtitle {
	font-size:      .88rem;
	color:          var(--bq-text-muted);
	margin:         0 0 6px;
}

.bq-multi-hint {
	font-size:      .78rem;
	font-weight:    500;
	color:          var(--bq-accent-dark);
	margin:         0 0 16px;
	min-height:     1.2em;
}

/* ── Options grid ─────────────────────────────────────────────────────────── */

.bq-options {
	display:        grid;
	grid-template-columns: repeat(2, 1fr);
	gap:            12px;
	margin-top:     24px;
}

/* 3 options (e.g. pregnant step) – single row */
.bq-options--count-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* 4 options – keep 2 columns */
.bq-options--count-4 {
	grid-template-columns: repeat(2, 1fr);
}

/* ── Option card ──────────────────────────────────────────────────────────── */

.bq-option {
	display:          flex;
	align-items:      flex-start;
	gap:              14px;
	padding:          16px 16px 16px 16px;
	background:       var(--bq-card);
	border:           2px solid var(--bq-border);
	border-radius:    var(--bq-radius);
	cursor:           pointer;
	text-align:       left;
	transition:       border-color var(--bq-transition),
	                  box-shadow var(--bq-transition),
	                  background var(--bq-transition),
	                  transform var(--bq-transition);
	position:         relative;
	width:            100%;
}

.bq-option:hover {
	border-color:   var(--bq-accent);
	background:     var(--bq-accent);
	box-shadow:     var(--bq-shadow-hover);
	transform:      translateY(-2px);
}

.bq-option--selected {
	border-color:   var(--bq-accent) !important;
	background:     var(--bq-accent) !important;
	box-shadow:     0 0 0 1px var(--bq-accent), var(--bq-shadow) !important;
	transform:      none !important;
}

/* Icon */
.bq-option-icon {
	flex-shrink:  0;
	width:        36px;
	height:       36px;
	display:      flex;
	align-items:  center;
	justify-content: center;
	background:   var(--bq-border);
	border-radius: 8px;
	color:        var(--bq-text-muted);
	transition:   background var(--bq-transition), color var(--bq-transition);
}

.bq-option-icon svg {
	width:  18px;
	height: 18px;
}

.bq-option:hover .bq-option-icon{
	background: rgba(255, 255, 255, .22);
	color:      #fff;
}
.bq-option:hover .bq-option-icon,
.bq-option--selected .bq-option-icon {
	background: rgba(255, 255, 255, .22);
	color:      #fff;
}

/* Text */
.bq-option-text {
	flex:    1;
	display: flex;
	flex-direction: column;
	gap:     3px;
}

.bq-option-label {
	font-size:   .875rem;
	font-weight: 600;
	line-height: 1.3;
	color:       var(--bq-text);
}

.bq-option-desc {
	font-size:  .75rem;
	color:      var(--bq-text-muted);
	line-height: 1.4;
}

.bq-option:hover .bq-option-label,
.bq-option--selected .bq-option-label {
	color: #fff !important;
}

.bq-option:hover .bq-option-desc,
.bq-option--selected .bq-option-desc {
	color: rgba(255, 255, 255, .82) !important;
}

/* Check mark */
.bq-option-check {
	flex-shrink: 0;
	width:       20px;
	height:      20px;
	border-radius: 50%;
	border:      1.5px solid var(--bq-border);
	display:     flex;
	align-items: center;
	justify-content: center;
	background:  #fff;
	color:       transparent;
	transition:  all var(--bq-transition);
	margin-top:  2px;
}

.bq-option-check svg {
	width:  12px;
	height: 12px;
}

.bq-option:hover .bq-option-check,
.bq-option--selected .bq-option-check {
	background:   #fff;
	border-color: #fff;
	color:        var(--bq-accent);
}

/* Shake animation for validation */
.bq-options.bq-shake {
	animation: bqShake .35s ease;
}

@keyframes bqShake {
	0%,100% { transform: translateX(0); }
	20%     { transform: translateX(-6px); }
	40%     { transform: translateX(6px); }
	60%     { transform: translateX(-4px); }
	80%     { transform: translateX(4px); }
}

/* ── Navigation buttons ───────────────────────────────────────────────────── */

.bq-nav {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      36px;
	gap:             12px;
}

.bq-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           8px;
	padding:       13px 28px;
	border-radius: var(--bq-radius-pill);
	font-family:   var(--bq-font);
	font-size:     .875rem;
	font-weight:   600;
	cursor:        pointer;
	transition:    all var(--bq-transition);
	line-height:   1;
}

.bq-btn svg {
	width:  16px;
	height: 16px;
	flex-shrink: 0;
}

.bq-btn--back {
	background:   transparent;
	border:       2px solid var(--bq-border);
	color:        var(--bq-text-muted);
}

.bq-btn--back:hover:not(:disabled) {
	border-color: var(--bq-accent);
	color:        var(--bq-accent-dark);
}

.bq-btn--back:disabled {
	opacity: .35;
	cursor:  not-allowed;
}

.bq-btn--next {
	background:   var(--bq-accent);
	border:       2px solid var(--bq-accent);
	color:        #fff;
	margin-left:  auto;
}

.bq-btn--next:hover {
	background:   var(--bq-accent-dark);
	border-color: var(--bq-accent-dark);
	box-shadow:   0 4px 16px rgba(196,168,130,.35);
	transform:    translateY(-1px);
}

.bq-btn--next:active {
	transform:  none;
	box-shadow: none;
}

/* ── Result screen ────────────────────────────────────────────────────────── */

.bq-result {
	animation: bqFadeUp .4s ease both;
	text-align: center;
	padding:    8px 0 0;
}

.bq-result--visible {
	display: block;
}

.bq-result-badge {
	width:   64px;
	height:  64px;
	margin:  0 auto 20px;
	color:   var(--bq-accent);
}

.bq-result-badge svg {
	width:  100%;
	height: 100%;
}

.bq-result-eyebrow {
	font-size:      .72rem;
	font-weight:    600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--bq-accent);
	margin:         0 0 8px;
}

.bq-result-name {
	font-size:   2rem;
	font-weight: 700;
	line-height: 1.2;
	color:       var(--bq-text);
	margin:      0 0 16px;
}

.bq-result-desc {
	font-size:   .925rem;
	line-height: 1.7;
	color:       var(--bq-text-muted);
	max-width:   540px;
	margin:      0 auto 28px;
}

/* Warning (pregnancy) */
.bq-result-warning {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	background:    var(--bq-warn-bg);
	border:        1px solid var(--bq-warn-border);
	border-radius: var(--bq-radius);
	padding:       14px 16px;
	text-align:    left;
	margin:        0 auto 20px;
	max-width:     540px;
	font-size:     .825rem;
	line-height:   1.6;
	color:         var(--bq-warn-text);
}

.bq-result-warning svg {
	width:      18px;
	height:     18px;
	flex-shrink: 0;
	margin-top:  1px;
	color:      #c49e00;
}

/* Sensitivity note */
.bq-result-sensitivity {
	display:       flex;
	align-items:   flex-start;
	gap:           10px;
	background:    var(--bq-info-bg);
	border:        1px solid var(--bq-info-border);
	border-radius: var(--bq-radius);
	padding:       14px 16px;
	text-align:    left;
	margin:        0 auto 20px;
	max-width:     540px;
	font-size:     .825rem;
	line-height:   1.6;
	color:         var(--bq-info-text);
}

.bq-result-sensitivity svg {
	width:      18px;
	height:     18px;
	flex-shrink: 0;
	margin-top:  1px;
}

/* CTA button */
.bq-result-cta {
	display:       inline-flex;
	align-items:   center;
	gap:           10px;
	background:    var(--bq-accent);
	color:         #fff;
	font-family:   var(--bq-font);
	font-size:     .9rem;
	font-weight:   600;
	padding:       15px 36px;
	border-radius: var(--bq-radius-pill);
	text-decoration: none;
	letter-spacing: .03em;
	transition:    all var(--bq-transition);
	margin-bottom: 16px;
}

.bq-result-cta:hover {
	background:   var(--bq-accent-dark);
	box-shadow:   0 6px 20px rgba(196,168,130,.4);
	transform:    translateY(-2px);
	color:        #fff;
	text-decoration: none;
}

.bq-result-cta svg {
	width:  17px;
	height: 17px;
}

/* ── WooCommerce elements within quiz result grid ────────────────────────── */

/* Product title: remove theme pink/link colour, use brand dark */
.bq-products-grid--wc .woocommerce-loop-product__title,
.bq-products-grid--wc a .woocommerce-loop-product__title {
	font-family: var(--bq-font) !important;
	font-size:   1rem !important;
	font-weight: 700 !important;
	color:       var(--bq-text) !important;
	line-height: 1.3 !important;
	padding:     14px 16px 4px !important;
	margin:      0 !important;
}

/* Price */
.bq-products-grid--wc .price {
	display:     block !important;
	font-family: var(--bq-font) !important;
	font-weight: 700 !important;
	font-size:   1.05rem !important;
	color:       var(--bq-accent-dark) !important;
	padding:     0 16px 14px !important;
}

/* "Add to cart" button — brand pill */
.bq-products-grid--wc a.button,
.bq-products-grid--wc .add_to_cart_button {
	display:         block !important;
	margin:          0 16px 16px !important;
	padding:         12px 20px !important;
	background:      var(--bq-accent) !important;
	color:           #fff !important;
	border:          2px solid var(--bq-accent) !important;
	border-radius:   var(--bq-radius-pill) !important;
	font-family:     var(--bq-font) !important;
	font-size:       .85rem !important;
	font-weight:     600 !important;
	text-align:      center !important;
	text-decoration: none !important;
	letter-spacing:  .04em !important;
	text-transform:  uppercase !important;
	line-height:     1 !important;
	cursor:          pointer !important;
	box-shadow:      none !important;
	transition:      background .2s ease, border-color .2s ease,
	                 box-shadow .2s ease, transform .2s ease !important;
}

.bq-products-grid--wc a.button:hover,
.bq-products-grid--wc .add_to_cart_button:hover {
	background:      var(--bq-accent-dark) !important;
	border-color:    var(--bq-accent-dark) !important;
	color:           #fff !important;
	text-decoration: none !important;
	box-shadow:      0 4px 14px rgba(196,168,130,.35) !important;
	transform:       translateY(-1px) !important;
}

/* "View cart" link that appears after adding */
.bq-products-grid--wc .added_to_cart {
	display:     block !important;
	text-align:  center !important;
	font-family: var(--bq-font) !important;
	font-size:   .78rem !important;
	color:       var(--bq-accent-dark) !important;
	padding:     0 16px 10px !important;
}

/* ── WooCommerce product grid (AJAX-rendered) ─────────────────────────────── */

/* WC items are flattened directly into div.bq-products-grid--wc by JS.
   Grid columns are applied to the container we own — no WC wrappers involved. */

.bq-products-grid--wc {
	display: grid !important;
	gap:     20px !important;
}

.bq-products-grid--count-1.bq-products-grid--wc {
	grid-template-columns: minmax(0, 380px) !important;
	justify-content:       center !important;
}

.bq-products-grid--count-2.bq-products-grid--wc {
	grid-template-columns: repeat(2, 1fr) !important;
}

.bq-products-grid--count-3.bq-products-grid--wc {
	grid-template-columns: repeat(3, 1fr) !important;
}

/* Each WC product card in the flattened grid */
.bq-products-grid--wc li.product,
.bq-products-grid--wc .wc-block-grid__product {
	position:   relative !important;
	float:      none !important;
	width:      auto !important;
	margin:     0 !important;
	list-style: none !important;
}

/* Recommendation badge — absolute overlay on WC card image */
.bq-wc-badge {
	position:       absolute;
	top:            12px;
	left:           12px;
	z-index:        5;
	display:        inline-block;
	padding:        4px 10px;
	border-radius:  4px;
	font-family:    var(--bq-font);
	font-size:      .65rem;
	font-weight:    700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background:     var(--bq-border);
	color:          var(--bq-text-muted);
	pointer-events: none;
	box-shadow:     0 1px 4px rgba(0,0,0,.12);
}

.bq-wc-badge--primary {
	background: var(--bq-accent);
	color:      #fff;
}

/* Highlight border for primary recommended card */
.bq-wc-primary {
	outline:        3px solid var(--bq-accent) !important;
	outline-offset: -1px;
	border-radius:  var(--bq-radius);
}

/* Loading spinner */
.bq-products-loading {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         56px 20px;
	grid-column:     1 / -1;
}

.bq-spinner {
	width:         36px;
	height:        36px;
	border:        3px solid var(--bq-border);
	border-top:    3px solid var(--bq-accent);
	border-radius: 50%;
	animation:     bqSpin .7s linear infinite;
}

@keyframes bqSpin {
	to { transform: rotate(360deg); }
}

/* ── Products grid ────────────────────────────────────────────────────────── */

.bq-products-grid {
	display:    grid;
	gap:        20px;
	margin:     28px auto 0;
	text-align: left;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.bq-products-grid--count-1 {
	max-width:             400px;
	grid-template-columns: 1fr;
}

/* ── Product card ─────────────────────────────────────────────────────────── */

.bq-product-card {
	background:     var(--bq-card);
	border:         2px solid var(--bq-border);
	border-radius:  var(--bq-radius);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow var(--bq-transition), transform var(--bq-transition);
}

.bq-product-card:hover {
	box-shadow: var(--bq-shadow-hover);
	transform:  translateY(-3px);
}

.bq-product-card--primary {
	border-color: var(--bq-accent);
	box-shadow:   0 0 0 1px var(--bq-accent), var(--bq-shadow);
}

/* Badge strip */
.bq-product-badge {
	display:        block;
	background:     var(--bq-accent);
	color:          #fff;
	font-size:      .68rem;
	font-weight:    700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding:        6px 14px;
	text-align:     center;
}

.bq-product-card:not(.bq-product-card--primary) .bq-product-badge {
	background: var(--bq-border);
	color:      var(--bq-text-muted);
}

/* Image */
.bq-product-image-wrap {
	width:        100%;
	aspect-ratio: 4 / 3;
	overflow:     hidden;
	background:   var(--bq-accent-bg);
}

.bq-product-image {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform .4s ease;
}

.bq-product-card:hover .bq-product-image {
	transform: scale(1.04);
}

/* Body */
.bq-product-body {
	padding:        20px;
	display:        flex;
	flex-direction: column;
	gap:            10px;
	flex:           1;
}

.bq-product-name {
	font-size:   1rem;
	font-weight: 700;
	line-height: 1.3;
	color:       var(--bq-text);
	margin:      0;
}

.bq-product-desc {
	font-size:   .8rem;
	line-height: 1.6;
	color:       var(--bq-text-muted);
	margin:      0;
	flex:        1;
}

/* WooCommerce price */
.bq-product-price {
	font-size:   1rem;
	font-weight: 700;
	color:       var(--bq-text);
	line-height: 1.3;
}

.bq-product-price .woocommerce-Price-amount,
.bq-product-price ins .woocommerce-Price-amount {
	color: var(--bq-accent-dark);
}

.bq-product-price del {
	font-weight:  400;
	font-size:    .85em;
	color:        var(--bq-text-muted);
	margin-right: 6px;
	opacity:      .7;
}

/* Actions */
.bq-product-actions {
	display:        flex;
	flex-direction: column;
	gap:            8px;
	margin-top:     auto;
	padding-top:    4px;
}

.bq-product-cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	background:      var(--bq-accent);
	color:           #fff;
	font-family:     var(--bq-font);
	font-size:       .85rem;
	font-weight:     600;
	padding:         12px 20px;
	border-radius:   var(--bq-radius-pill);
	text-decoration: none;
	text-align:      center;
	letter-spacing:  .03em;
	transition:      all var(--bq-transition);
}

.bq-product-cta:hover {
	background:      var(--bq-accent-dark);
	box-shadow:      0 4px 14px rgba(196,168,130,.4);
	transform:       translateY(-1px);
	color:           #fff;
	text-decoration: none;
}

.bq-product-cta svg {
	width:       15px;
	height:      15px;
	flex-shrink: 0;
}

.bq-product-cart-btn {
	display:         block;
	text-align:      center;
	background:      transparent;
	color:           var(--bq-accent-dark);
	font-family:     var(--bq-font);
	font-size:       .82rem;
	font-weight:     600;
	padding:         10px 20px;
	border-radius:   var(--bq-radius-pill);
	border:          2px solid var(--bq-accent);
	text-decoration: none;
	transition:      all var(--bq-transition);
}

.bq-product-cart-btn:hover {
	background:      var(--bq-accent-bg);
	color:           var(--bq-accent-dark);
	text-decoration: none;
}

/* Restart link */
.bq-restart-btn {
	display:     block;
	margin:      4px auto 0;
	background:  none;
	border:      none;
	font-family: var(--bq-font);
	font-size:   .8rem;
	color:       var(--bq-text-muted);
	cursor:      pointer;
	padding:     8px;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition:  color var(--bq-transition);
}

.bq-restart-btn:hover {
	color: var(--bq-text);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
	.bq-wrap {
		padding: 28px 20px 36px;
	}

	.bq-question {
		font-size: 1.3rem;
	}

	.bq-options,
	.bq-options--count-3,
	.bq-options--count-4 {
		grid-template-columns: 1fr;
	}

	.bq-products-grid,
	.bq-products-grid--count-1 {
		grid-template-columns: 1fr;
		max-width:             none;
	}

	/* WC grid: stack to 1 column on mobile */
	.bq-products-grid--count-1.bq-products-grid--wc,
	.bq-products-grid--count-2.bq-products-grid--wc,
	.bq-products-grid--count-3.bq-products-grid--wc {
		grid-template-columns: 1fr !important;
		justify-content:       initial !important;
	}

	.bq-btn {
		padding: 12px 20px;
		font-size: .825rem;
	}
}

@media (max-width: 400px) {
	.bq-wrap {
		padding: 22px 14px 30px;
	}
}