/* =========================================================
   HOMEPAWLIVING SMART FINDER
   Compact fixed popup + scrollable results only
========================================================= */

.hplf-root,
.hplf-root *,
.hplf-root *::before,
.hplf-root *::after{
	box-sizing:border-box;
	font-family:"Lora",Georgia,serif!important;
}

.hplf-root{
	--hplf-teal:#0D4C4D;
	--hplf-teal-dark:#083A3B;
	--hplf-gold:#B58A48;
	--hplf-gold-dark:#936B31;
	--hplf-sage:#8D9C7E;
	--hplf-sage-soft:#DDE3D6;
	--hplf-cream:#F8F6F0;
	--hplf-cream-light:#FCFBF8;
	--hplf-white:#FFFFFF;
	--hplf-border:#E4DBCA;
	--hplf-border-strong:#D4C6AC;
	--hplf-text:#163F40;
	--hplf-muted:#66716A;

	position:fixed;
	inset:0;
	z-index:999998;
	pointer-events:none;
	color:var(--hplf-text);
}

body.hplf-lock{
	overflow:hidden!important;
}


/* =========================================================
   FLOATING BUTTON
========================================================= */

.hplf-floating{
	position:fixed;
	right:22px;
	bottom:28px;
	z-index:999997;
	min-height:41px;
	margin:0;
	padding:0 15px;
	display:none;
	align-items:center;
	justify-content:center;
	gap:8px;
	background:var(--hplf-teal);
	border:1px solid var(--hplf-gold);
	border-radius:999px;
	color:#fff;
	box-shadow:0 10px 26px rgba(8,58,59,.23);
	cursor:pointer;
	pointer-events:auto;
	font-size:10.5px;
	line-height:1;
	font-weight:600;
	letter-spacing:.01em;
	white-space:nowrap;
	appearance:none;
	-webkit-appearance:none;
	transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}

.hplf-floating.is-visible{
	display:inline-flex;
}

.hplf-floating:hover,
.hplf-floating:focus{
	background:var(--hplf-gold);
	border-color:var(--hplf-gold);
	color:#fff;
	transform:translateY(-1px);
	box-shadow:0 12px 30px rgba(8,58,59,.27);
	outline:none;
}

.hplf-floating__dot{
	width:7px;
	height:7px;
	flex:0 0 7px;
	background:#E7D4B0;
	border-radius:50%;
	box-shadow:0 0 0 3px rgba(231,212,176,.12);
}


/* =========================================================
   BACKDROP
========================================================= */

.hplf-backdrop{
	position:fixed;
	inset:0;
	z-index:999998;
	background:rgba(8,38,39,.48);
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
	pointer-events:auto;
}


/* =========================================================
   MODAL
========================================================= */

.hplf-modal{
	position:fixed;
	left:50%;
	top:50%;
	z-index:999999;
	width:min(92vw,860px);
	max-height:min(86vh,650px);
	overflow:hidden;
	background:
		radial-gradient(circle at 100% 0,rgba(141,156,126,.12),transparent 28%),
		radial-gradient(circle at 0 100%,rgba(181,138,72,.08),transparent 25%),
		var(--hplf-cream-light);
	border:1px solid var(--hplf-border-strong);
	border-radius:18px;
	box-shadow:0 24px 70px rgba(0,0,0,.22);
	color:var(--hplf-text);
	pointer-events:auto;
	transform:translate(-50%,-50%);
}

.hplf-modal::before{
	content:"";
	position:absolute;
	inset:0;
	pointer-events:none;
	border-radius:18px;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
	z-index:0;
}

.hplf-close{
	position:absolute;
	top:11px;
	right:11px;
	z-index:20;
	width:32px;
	height:32px;
	margin:0;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	border:1px solid var(--hplf-border);
	border-radius:50%;
	color:var(--hplf-teal);
	box-shadow:0 5px 14px rgba(13,76,77,.08);
	cursor:pointer;
	appearance:none;
	-webkit-appearance:none;
}

.hplf-close:hover,
.hplf-close:focus{
	background:var(--hplf-sage-soft);
	border-color:#C5CFBC;
	outline:none;
}

.hplf-close svg{
	width:13px;
	height:13px;
	fill:none;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
}


/* =========================================================
   COMMON VIEW
========================================================= */

.hplf-view{
	position:relative;
	z-index:2;
	width:100%;
	margin:0;
}

.hplf-view--intro,
.hplf-view--question,
.hplf-view--loading{
	overflow:hidden;
}

.hplf-view--intro{
	padding:30px 32px 28px;
}

.hplf-view--question{
	padding:23px 30px 22px;
}

.hplf-view--loading{
	min-height:270px;
	padding:34px 32px;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}

.hplf-kicker{
	width:max-content;
	max-width:calc(100% - 42px);
	margin:0 0 9px;
	padding:6px 10px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:#fff;
	border:1px solid var(--hplf-border);
	border-radius:999px;
	color:var(--hplf-gold-dark);
	font-size:7.5px;
	line-height:1;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}

.hplf-kicker > span{
	width:6px;
	height:6px;
	flex:0 0 6px;
	background:var(--hplf-sage);
	border-radius:50%;
}

.hplf-modal h2{
	max-width:720px;
	margin:0!important;
	color:var(--hplf-teal)!important;
	font-size:clamp(28px,3.5vw,38px)!important;
	line-height:1.12!important;
	font-weight:500!important;
	letter-spacing:-.025em!important;
}

.hplf-sub{
	max-width:690px;
	margin:10px 0 0!important;
	color:var(--hplf-muted)!important;
	font-size:12.5px!important;
	line-height:1.65!important;
	font-weight:400!important;
}


/* =========================================================
   INTRO
========================================================= */

.hplf-badges{
	margin:17px 0 19px;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
}

.hplf-badges span{
	min-height:27px;
	padding:0 10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--hplf-cream);
	border:1px solid var(--hplf-border);
	border-radius:999px;
	color:var(--hplf-teal);
	font-size:8px;
	line-height:1;
	font-weight:600;
}

.hplf-introActions{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}


/* =========================================================
   BUTTONS
========================================================= */

.hplf-primary,
.hplf-secondary,
.hplf-back{
	min-height:39px;
	margin:0;
	padding:0 15px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	border-radius:999px;
	cursor:pointer;
	font-size:9.5px;
	line-height:1;
	font-weight:600;
	text-decoration:none!important;
	appearance:none;
	-webkit-appearance:none;
	transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.hplf-primary{
	background:var(--hplf-teal);
	border:1px solid var(--hplf-teal);
	color:#fff!important;
	box-shadow:0 7px 17px rgba(13,76,77,.12);
}

.hplf-primary:hover,
.hplf-primary:focus{
	background:var(--hplf-gold);
	border-color:var(--hplf-gold);
	color:#fff!important;
	transform:translateY(-1px);
	outline:none;
}

.hplf-primary > span{
	font-size:12px;
}

.hplf-secondary,
.hplf-back{
	background:#fff;
	border:1px solid var(--hplf-border-strong);
	color:var(--hplf-teal)!important;
	box-shadow:none;
}

.hplf-secondary:hover,
.hplf-secondary:focus,
.hplf-back:hover,
.hplf-back:focus{
	background:var(--hplf-sage-soft);
	border-color:#C1CBB8;
	color:var(--hplf-teal-dark)!important;
	outline:none;
}

.hplf-back:disabled{
	opacity:.38;
	cursor:not-allowed;
	background:#fff;
}


/* =========================================================
   QUESTION
========================================================= */

.hplf-questionTop{
	padding-right:38px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.hplf-questionTop__label{
	color:var(--hplf-gold-dark);
	font-size:7.5px;
	font-weight:700;
	letter-spacing:.1em;
	text-transform:uppercase;
}

.hplf-questionTop__step{
	color:var(--hplf-muted);
	font-size:8px;
	font-weight:500;
}

.hplf-progress{
	width:100%;
	height:4px;
	margin:8px 0 16px;
	overflow:hidden;
	background:#E8E2D6;
	border-radius:999px;
}

.hplf-progress span{
	display:block;
	height:100%;
	background:linear-gradient(90deg,var(--hplf-sage),var(--hplf-gold));
	border-radius:999px;
	transition:width .2s ease;
}

.hplf-view--question h2{
	max-width:760px;
	padding-right:36px;
	font-size:clamp(24px,3vw,32px)!important;
	line-height:1.18!important;
}

.hplf-answers{
	margin-top:16px;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:8px;
}

.hplf-answer{
	position:relative;
	min-width:0;
	min-height:67px;
	margin:0;
	padding:11px 12px 11px 40px;
	display:flex;
	align-items:center;
	background:#fff;
	border:1px solid var(--hplf-border);
	border-radius:12px;
	color:var(--hplf-text);
	text-align:left;
	cursor:pointer;
	appearance:none;
	-webkit-appearance:none;
	transition:border-color .16s ease,background-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.hplf-answer:hover,
.hplf-answer:focus{
	background:#FAFBF7;
	border-color:#C7B994;
	box-shadow:0 6px 15px rgba(13,76,77,.05);
	transform:translateY(-1px);
	outline:none;
}

.hplf-answer__check{
	position:absolute;
	left:11px;
	top:50%;
	width:20px;
	height:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--hplf-sage-soft);
	border:1px solid #C6CFBD;
	border-radius:50%;
	color:var(--hplf-teal);
	font-size:8px;
	line-height:1;
	transform:translateY(-50%);
}

.hplf-answer__copy{
	min-width:0;
	display:block;
}

.hplf-answer strong{
	display:block;
	margin:0;
	color:var(--hplf-teal);
	font-size:11px;
	line-height:1.3;
	font-weight:600;
}

.hplf-answer small{
	display:block;
	margin-top:3px;
	color:var(--hplf-muted);
	font-size:8.5px;
	line-height:1.35;
	font-weight:400;
}

.hplf-questionActions{
	margin-top:13px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.hplf-questionLater{
	min-height:34px;
	padding:0 12px;
	border-color:transparent;
	background:transparent;
	color:var(--hplf-muted)!important;
}


/* =========================================================
   LOADING
========================================================= */

.hplf-spinner{
	width:34px;
	height:34px;
	margin:0 0 13px;
	border:3px solid #E5E0D4;
	border-top-color:var(--hplf-teal);
	border-radius:50%;
	animation:hplfSpin .8s linear infinite;
}

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

.hplf-view--loading h2{
	font-size:28px!important;
}

.hplf-view--loading .hplf-sub{
	max-width:560px;
}


/* =========================================================
   RESULTS
   Only this view scrolls on desktop.
========================================================= */

.hplf-modal--results{
	max-height:min(88vh,690px);
}

.hplf-view--results{
	max-height:min(88vh,690px);
	overflow-y:auto;
	overflow-x:hidden;
	padding:23px 26px 24px;
	scrollbar-width:thin;
	scrollbar-color:#B9C3B0 transparent;
}

.hplf-view--results::-webkit-scrollbar{
	width:7px;
}

.hplf-view--results::-webkit-scrollbar-track{
	background:transparent;
}

.hplf-view--results::-webkit-scrollbar-thumb{
	background:#BCC5B3;
	border-radius:999px;
	border:2px solid var(--hplf-cream-light);
}

.hplf-resultHead{
	padding-right:38px;
}

.hplf-resultHead h2{
	font-size:clamp(27px,3.2vw,36px)!important;
}

.hplf-resultHead > p{
	max-width:700px;
	margin:8px 0 0!important;
	color:var(--hplf-muted)!important;
	font-size:11.5px!important;
	line-height:1.55!important;
	font-weight:400!important;
}

.hplf-resultSection{
	margin-top:17px;
}

.hplf-sectionTitle{
	margin-bottom:8px;
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:12px;
}

.hplf-sectionTitle > div{
	display:flex;
	align-items:center;
	gap:7px;
}

.hplf-sectionTitle > div > span{
	width:24px;
	height:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--hplf-sage-soft);
	border-radius:50%;
	color:var(--hplf-teal);
	font-size:7px;
	font-weight:700;
}

.hplf-sectionTitle strong{
	color:var(--hplf-teal);
	font-size:14px;
	line-height:1.2;
	font-weight:600;
}

.hplf-sectionTitle > small{
	color:var(--hplf-muted);
	font-size:7.5px;
	font-weight:400;
}


/* =========================================================
   PRODUCT RESULTS
========================================================= */

.hplf-products{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:8px;
}

.hplf-product{
	min-width:0;
	min-height:92px;
	padding:8px;
	display:grid;
	grid-template-columns:72px minmax(0,1fr);
	align-items:center;
	gap:9px;
	background:#fff;
	border:1px solid var(--hplf-border);
	border-radius:12px;
	color:var(--hplf-text);
	text-decoration:none!important;
	transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}

.hplf-product:hover,
.hplf-product:focus{
	border-color:#C6B58D;
	box-shadow:0 7px 17px rgba(13,76,77,.055);
	transform:translateY(-1px);
	outline:none;
}

.hplf-product__image{
	width:72px;
	height:72px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	border:1px solid #EFE9DE;
	border-radius:9px;
}

.hplf-product__image img{
	display:block;
	width:88%;
	height:88%;
	object-fit:contain;
	object-position:center;
}

.hplf-product__body{
	min-width:0;
	display:block;
}

.hplf-product em{
	width:max-content;
	max-width:100%;
	margin:0 0 4px;
	padding:4px 7px;
	display:inline-flex;
	align-items:center;
	background:#F4F6F0;
	border:1px solid #D7DFCF;
	border-radius:999px;
	color:var(--hplf-gold-dark);
	font-size:6.5px;
	line-height:1;
	font-weight:700;
	font-style:normal;
	text-transform:uppercase;
	letter-spacing:.06em;
}

.hplf-product strong{
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 3px;
	color:var(--hplf-teal);
	font-size:10.5px;
	line-height:1.28;
	font-weight:600;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.hplf-product__price{
	display:block;
	margin:0 0 3px;
	color:var(--hplf-gold-dark);
	font-size:9px;
	line-height:1.2;
	font-weight:600;
}

.hplf-product__price del{
	opacity:.55;
	font-size:.9em;
}

.hplf-product__price ins{
	text-decoration:none;
}

.hplf-product small{
	display:-webkit-box;
	overflow:hidden;
	color:var(--hplf-muted);
	font-size:7.5px;
	line-height:1.35;
	font-weight:400;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}


/* =========================================================
   GUIDE RESULTS
========================================================= */

.hplf-resultSection--guides{
	padding-top:2px;
}

.hplf-guides{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:8px;
}

.hplf-guide{
	position:relative;
	min-width:0;
	padding:10px 12px 10px 14px;
	overflow:hidden;
	background:#fff;
	border:1px solid var(--hplf-border);
	border-radius:11px;
	color:var(--hplf-text);
	text-decoration:none!important;
	transition:border-color .16s ease,background-color .16s ease;
}

.hplf-guide::before{
	content:"";
	position:absolute;
	left:0;
	top:9px;
	bottom:9px;
	width:2px;
	background:var(--hplf-sage);
	border-radius:999px;
}

.hplf-guide:hover,
.hplf-guide:focus{
	background:#FEFEFC;
	border-color:#CDBE9E;
	outline:none;
}

.hplf-guide__top{
	margin-bottom:5px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:8px;
}

.hplf-guide__top em{
	color:var(--hplf-gold-dark);
	font-size:6.5px;
	line-height:1;
	font-weight:700;
	font-style:normal;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.hplf-guide__top i{
	width:22px;
	height:22px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--hplf-sage-soft);
	border-radius:50%;
	color:var(--hplf-teal);
	font-size:8px;
	line-height:1;
	font-style:normal;
}

.hplf-guide > strong{
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 4px;
	color:var(--hplf-teal);
	font-size:10.5px;
	line-height:1.3;
	font-weight:600;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.hplf-guide p{
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 4px!important;
	color:var(--hplf-muted)!important;
	font-size:8px!important;
	line-height:1.4!important;
	font-weight:400!important;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}

.hplf-guide > small{
	display:block;
	color:#7D887F;
	font-size:7px;
	line-height:1.35;
	font-weight:400;
}

.hplf-resultActions{
	margin-top:16px;
	padding-top:13px;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:8px;
	border-top:1px solid var(--hplf-border);
}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:720px){

	.hplf-floating{
		right:12px;
		bottom:18px;
		min-height:39px;
		padding:0 13px;
		font-size:9.5px;
	}

	.hplf-modal{
		width:calc(100vw - 20px);
		max-height:calc(100dvh - 20px);
		border-radius:15px;
	}

	.hplf-modal::before{
		border-radius:15px;
	}

	.hplf-close{
		top:9px;
		right:9px;
		width:30px;
		height:30px;
	}

	.hplf-view--intro{
		padding:25px 17px 21px;
	}

	.hplf-view--question{
		padding:19px 15px 17px;
	}

	.hplf-view--loading{
		min-height:245px;
		padding:27px 18px;
	}

	.hplf-modal h2{
		font-size:27px!important;
		line-height:1.14!important;
	}

	.hplf-sub{
		font-size:11.5px!important;
		line-height:1.55!important;
	}

	.hplf-badges{
		margin:13px 0 15px;
		gap:5px;
	}

	.hplf-badges span{
		min-height:25px;
		padding:0 8px;
		font-size:7px;
	}

	.hplf-introActions{
		gap:6px;
	}

	.hplf-primary,
	.hplf-secondary,
	.hplf-back{
		min-height:37px;
		padding:0 13px;
		font-size:9px;
	}

	.hplf-questionTop{
		padding-right:31px;
	}

	.hplf-progress{
		margin:7px 0 13px;
	}

	.hplf-view--question h2{
		padding-right:29px;
		font-size:23px!important;
	}

	.hplf-answers{
		margin-top:13px;
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:7px;
	}

	.hplf-answer{
		min-height:73px;
		padding:9px 8px 9px 32px;
		border-radius:10px;
	}

	.hplf-answer__check{
		left:8px;
		width:17px;
		height:17px;
		font-size:7px;
	}

	.hplf-answer strong{
		font-size:9.5px;
		line-height:1.27;
	}

	.hplf-answer small{
		margin-top:2px;
		font-size:7.4px;
		line-height:1.3;
	}

	.hplf-questionActions{
		margin-top:10px;
	}

	/*
	 * Safety fallback on small screens: normal quiz views
	 * may scroll only when the viewport is physically too
	 * short to contain the compact layout.
	 */
	.hplf-view--intro,
	.hplf-view--question,
	.hplf-view--loading{
		max-height:calc(100dvh - 20px);
		overflow-y:auto;
	}

	.hplf-modal--results{
		max-height:calc(100dvh - 20px);
	}

	.hplf-view--results{
		max-height:calc(100dvh - 20px);
		padding:19px 14px 18px;
	}

	.hplf-resultHead{
		padding-right:31px;
	}

	.hplf-resultHead h2{
		font-size:26px!important;
	}

	.hplf-resultHead > p{
		font-size:10px!important;
	}

	.hplf-resultSection{
		margin-top:14px;
	}

	.hplf-sectionTitle{
		align-items:flex-start;
		flex-direction:column;
		gap:3px;
	}

	.hplf-sectionTitle > small{
		padding-left:31px;
	}

	.hplf-products,
	.hplf-guides{
		grid-template-columns:1fr;
	}

	.hplf-product{
		grid-template-columns:68px minmax(0,1fr);
		min-height:87px;
	}

	.hplf-product__image{
		width:68px;
		height:68px;
	}

	.hplf-resultActions{
		justify-content:stretch;
	}

	.hplf-resultActions .hplf-primary,
	.hplf-resultActions .hplf-secondary{
		flex:1 1 0;
	}

}


@media(max-width:390px){

	.hplf-view--intro{
		padding-left:14px;
		padding-right:14px;
	}

	.hplf-answers{
		gap:6px;
	}

	.hplf-answer{
		min-height:76px;
		padding-left:30px;
	}

	.hplf-answer strong{
		font-size:9px;
	}

	.hplf-answer small{
		font-size:7px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

	.hplf-floating,
	.hplf-primary,
	.hplf-secondary,
	.hplf-back,
	.hplf-answer,
	.hplf-product,
	.hplf-progress span{
		transition:none!important;
	}

	.hplf-spinner{
		animation:none!important;
	}
}