.hml-quiz{--hml-blue:#1854A8;--hml-blue-wash:#EAF2FD;--hml-blue-deep:#0C3D82;--hml-green:#0E8F5E;
	--hml-green-wash:#E7F6EF;--hml-green-deep:#0A6E48;--hml-clay:#F26A1B;--hml-clay-wash:#FFF0E5;
	--hml-ink:#0B2A4A;--hml-muted:#5B7291;--hml-line:#E4EAF1;--hml-line-str:#CBD5E1;--hml-paper:#F4F7FB;
	--hml-fd:"Poppins","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--hml-ink)}
.hml-quiz *{box-sizing:border-box}
.hml-quiz .hml-wrap{max-width: 1680px;margin:0 auto;padding:0 20px}
.hml-quiz .hml-sect{padding:62px 20px}
.hml-quiz .hml-h2{font-family:var(--hml-fd);font-size:clamp(23px,2.9vw,32px);font-weight:700;margin:0 0 8px;text-align:center;line-height:1.22}
.hml-quiz .hml-sub{text-align:center;color:var(--hml-muted);font-size:15px;max-width:640px;margin:0 auto 34px;line-height:1.6}
.hml-quiz .hml-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--hml-fd);
	font-weight:600;font-size:15px;padding:12px 24px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:.16s}
.hml-quiz .hml-btn--pri{background:var(--hml-blue);color:#fff}
.hml-quiz .hml-btn--pri:hover{background:var(--hml-blue-deep);color:#fff;transform:translateY(-1px)}
.hml-quiz .hml-btn--lg{font-size:16px;padding:15px 34px;box-shadow:0 10px 26px -10px rgba(24,84,168,.55)}
.hml-quiz .hml-btn--green{background:var(--hml-green);color:#fff}
.hml-quiz .hml-btn--green:hover{background:var(--hml-green-deep);color:#fff}

/* landing card */
.hml-qland{background:
	radial-gradient(circle at 15% 20%, rgba(24,84,168,.10), transparent 45%),
	radial-gradient(circle at 85% 75%, rgba(14,143,94,.10), transparent 45%),
	linear-gradient(180deg,var(--hml-blue-wash),#fff);
	padding:66px 20px;display:flex;justify-content:center}
.hml-qland__card{background:#fff;border:1px solid var(--hml-line);border-radius:24px;max-width:720px;width:100%;
	padding:46px 40px;text-align:center;box-shadow:0 26px 60px -30px rgba(11,42,74,.4)}
.hml-qland__logo{display:inline-flex;align-items:center;justify-content:center;background:var(--hml-blue-wash);
	border-radius:999px;padding:12px 26px;margin:0 auto 22px}
.hml-qland__logo .hml-logo__word{font-size:22px}
.hml-qland h1{font-family:var(--hml-fd);font-size:clamp(24px,3.2vw,34px);font-weight:700;line-height:1.2;
	margin:0 0 14px;color:var(--hml-ink)}
.hml-qland p{font-size:16px;line-height:1.7;color:var(--hml-muted);margin:0 0 28px;max-width:540px;
	margin-left:auto;margin-right:auto}
.hml-qland__meta{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:26px;
	border-top:1px solid var(--hml-line);padding-top:20px}
.hml-qland__meta span{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--hml-muted)}
.hml-qland__meta svg{color:var(--hml-green)}

/* quiz host — the inline Fit Finder sits here */
.hml-qhost{background:linear-gradient(180deg,var(--hml-blue-wash),#fff);padding:44px 0 56px;min-height:60vh}
.hml-qhost .hff{max-width:860px;margin:0 auto}
/* inline mode: the shortcode's modal chrome shouldn't behave like an overlay here */
.hml-qhost .hff-modal{position:static !important;background:none !important;padding:0 !important;
	display:block !important;inset:auto !important}
.hml-qhost .hff-modal__in,.hml-qhost .hff-card{box-shadow:0 20px 50px -26px rgba(11,42,74,.42) !important;
	border-radius:20px !important;max-height:none !important}
.hml-qhost .hff-x{display:none !important}

/* how it works */
.hml-qhow{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:920px;margin:0 auto}
.hml-qstep{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--hml-line);
	border-radius:14px;padding:20px}
.hml-qstep__n{width:28px;height:28px;border-radius:50%;background:var(--hml-blue);color:#fff;flex:none;
	font-family:var(--hml-fd);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.hml-qstep h4{font-family:var(--hml-fd);font-size:15px;font-weight:700;margin:0 0 5px;color:var(--hml-ink)}
.hml-qstep p{font-size:13px;line-height:1.6;color:var(--hml-muted);margin:0}
.hml-qhonest{max-width:920px;margin:22px auto 0;background:var(--hml-green-wash);border-left:3px solid var(--hml-green);
	border-radius:0 12px 12px 0;padding:16px 20px;font-size:14px;line-height:1.7;color:var(--hml-green-deep)}
.hml-qhonest b{color:var(--hml-green-deep)}

/* bands + cats */
.hml-quiz .hml-band{padding:60px 0}
.hml-quiz .hml-band--wash{background:var(--hml-paper)}
.hml-quiz .hml-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.hml-quiz .hml-cat{background:#fff;border:1px solid var(--hml-line);border-radius:14px;padding:12px;
	text-align:center;text-decoration:none;transition:.16s;display:block}
.hml-quiz .hml-cat:hover{border-color:var(--hml-blue);transform:translateY(-3px)}
.hml-quiz .hml-cat img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;margin-bottom:8px;background:var(--hml-paper)}
.hml-quiz .hml-cat img.is-ph{object-fit:contain;padding:14%;background:var(--hml-blue-wash,#EAF2FD)}
.hml-quiz .hml-cat span{display:block;font-size:13px;font-weight:600;color:var(--hml-ink)}

/* Popular right now — self-contained product grid.
   This section isn't a WooCommerce archive, so Woo's own ul.products grid CSS
   doesn't reliably apply here (the products were stacking full-width in one
   column). Style the loop explicitly so it lays out as a tidy card grid on its
   own, independent of the archive styles. */
.hml-quiz .hml-qpop__wc{margin-top:8px}
.hml-quiz .hml-qpop__wc ul.products{
	display:grid !important;grid-template-columns:repeat(4,1fr);gap:20px;
	margin:0;padding:0;list-style:none;float:none}
.hml-quiz .hml-qpop__wc ul.products::before,
.hml-quiz .hml-qpop__wc ul.products::after{display:none !important;content:none !important}
.hml-quiz .hml-qpop__wc li.product{
	width:auto !important;margin:0 !important;padding:16px !important;float:none !important;
	background:#fff;border:1px solid var(--hml-line);border-radius:14px;
	display:flex;flex-direction:column;text-align:center;transition:.18s}
.hml-quiz .hml-qpop__wc li.product:hover{
	border-color:var(--hml-blue);transform:translateY(-3px);
	box-shadow:0 10px 28px -12px rgba(18,36,70,.22)}
.hml-quiz .hml-qpop__wc li.product a img{
	width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
	margin:0 0 12px;background:var(--hml-paper)}
.hml-quiz .hml-qpop__wc li.product .woocommerce-loop-product__title{
	font-family:var(--hml-fd);font-size:15px;font-weight:700;line-height:1.35;
	color:var(--hml-ink);padding:0 0 6px}
.hml-quiz .hml-qpop__wc li.product .price{
	font-size:14px;color:var(--hml-ink);margin-bottom:10px}
.hml-quiz .hml-qpop__wc li.product .price del{color:var(--hml-muted);font-weight:400;margin-right:6px}
.hml-quiz .hml-qpop__wc li.product .price ins{text-decoration:none;font-weight:700}
/* Hide the native onsale pill here too — the global "% OFF" flag (from the
   shop hook) is the single badge, matching the Shop page. Prevents two badges. */
.hml-quiz .hml-qpop__wc li.product .onsale{display:none !important}
/* Discount flag: its base style lives in the shop CSS, which doesn't load on this page,
   so it showed as bare blue text. Styled here as the same red corner flag. */
.hml-quiz .hml-qpop__wc li.product .hml-off{position:absolute;top:0;left:0;z-index:3;background:#E23B3B;color:#fff;
	font-family:var(--hml-fd);font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1.2;
	padding:6px 11px;border-radius:14px 0 10px 0}
/* Align cards: link wrapper fills the card so price + button pin to the bottom of every card */
.hml-quiz .hml-qpop__wc li.product > a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;text-decoration:none}
.hml-quiz .hml-qpop__wc li.product .hml-support-tag{display:flex;justify-content:center;margin:0 0 6px;min-height:18px}
.hml-quiz .hml-qpop__wc li.product .hml-support-tag--empty{visibility:hidden}
.hml-quiz .hml-qpop__wc li.product .woocommerce-loop-product__title{min-height:40px}
.hml-quiz .hml-qpop__wc li.product .hml-rate{justify-content:center;padding:0;margin:2px 0 10px}
.hml-quiz .hml-qpop__wc li.product .price{margin-top:auto;margin-bottom:0}
.hml-quiz .hml-qpop__wc li.product .button{margin-top:16px !important}
.hml-quiz .hml-qpop__wc li.product{position:relative}
.hml-quiz .hml-qpop__wc li.product .button,
.hml-quiz .hml-qpop__wc li.product .added_to_cart{
	margin-top:auto !important;background:var(--hml-blue) !important;color:#fff !important;
	border-radius:999px !important;font-weight:700 !important;border:0 !important;
	padding:9px 16px !important;font-size:13px !important;width:100% !important;
	display:block !important;text-align:center !important;text-decoration:none}
.hml-quiz .hml-qpop__wc li.product .button:hover,
.hml-quiz .hml-qpop__wc li.product .added_to_cart:hover{background:var(--hml-blue-deep,#0C3D82) !important}

/* help strip — .hml-quiz .hml-wrap (0,2,0) was overriding the card padding/margins, so scoped here */
.hml-quiz .hml-qhelp{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
	background:var(--hml-blue-wash);border-radius:18px;padding:28px clamp(22px,3vw,36px);
	width:calc(100% - 40px);margin:clamp(44px,6vw,72px) auto 24px}
.hml-qhelp h3{font-family:var(--hml-fd);font-size:18px;font-weight:700;margin:0 0 5px;color:var(--hml-ink)}
.hml-qhelp p{font-size:14px;line-height:1.6;color:var(--hml-muted);margin:0;max-width:560px}

/* disclaimer */
.hml-quiz .hml-qdisc{padding:0 20px clamp(48px,6vw,72px)}
.hml-qdisc p{background:var(--hml-paper);border-left:3px solid var(--hml-line-str);border-radius:0 10px 10px 0;
	padding:16px 18px;font-size:13px;line-height:1.7;color:var(--hml-muted);margin:0}
.hml-qdisc b{color:var(--hml-ink)}

@media(max-width:1000px){
	.hml-qhow{grid-template-columns:1fr}
	.hml-quiz .hml-cats{grid-template-columns:repeat(4,1fr)}
	.hml-quiz .hml-qpop__wc ul.products{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
	.hml-quiz .hml-qpop__wc ul.products{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:600px){
	.hml-quiz .hml-sect{padding:44px 20px}
	.hml-qland{padding:40px 16px}
	.hml-qland__card{padding:32px 22px;border-radius:18px}
	.hml-qland__meta{gap:14px}
	.hml-quiz .hml-cats{grid-template-columns:repeat(2,1fr)}
	.hml-quiz .hml-qhelp{padding:22px;flex-direction:column;align-items:flex-start}
}