/** Hair Hub Ranking frontend styles — Phase 4 Step 4.1. */
.hh-ranking-public{margin:2rem 0;max-width:100%;color:var(--hh-color-text)}
.hh-ranking-public__title{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.85rem 1.1rem;font-size:clamp(1.35rem,5vw,1.9rem);line-height:1.4;background:var(--hh-color-primary);color:#fff;border-radius:var(--hh-radius-md)}
.hh-ranking-public__title-text{display:inline-block}
.hh-ranking-public__list{display:grid;gap:1rem}
.hh-ranking-card{display:grid;grid-template-columns:3.5rem 6rem minmax(0,1fr);gap:.75rem;align-items:center;padding:1rem;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.hh-ranking-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,70,72,.12)}
.hh-ranking-card.is-top{border-top-width:1px}
.hh-ranking-card.is-rank-1{background:linear-gradient(135deg,#fffaf0 0,#fff 42%)}
.hh-ranking-card.is-rank-2{background:linear-gradient(135deg,#f6f9fb 0,#fff 42%)}
.hh-ranking-card.is-rank-3{background:linear-gradient(135deg,#fff7f1 0,#fff 42%)}
.hh-ranking-card__rank{display:flex;align-items:center;justify-content:center}
.hh-ranking-card__body{min-width:0}
.hh-ranking-card__brand{margin:0;color:var(--hh-color-primary-dark);font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.hh-ranking-card__series{margin:.1rem 0 .15rem;color:#6f7e80;font-size:.74rem}
.hh-ranking-card__title{margin:0;font-size:1rem;line-height:1.45}
.hh-ranking-card__title a{color:inherit;text-decoration:none}
.hh-ranking-card__title a:hover{color:var(--hh-color-primary-dark)}
.hh-ranking-card__review{display:flex;flex-wrap:wrap;gap:.35rem .5rem;align-items:center;margin-top:.65rem;font-size:.8rem}
.hh-ranking-card__stars{display:inline-flex;align-items:center}
.hh-ranking-card__rating-number{color:#8c6300}
.hh-ranking-card__rating.is-empty,.hh-ranking-card__count{color:var(--hh-color-muted)}
.hh-ranking-card__action{grid-column:1/-1;margin:.75rem 0 0}
.hh-ranking-card__button{width:100%}
@media(max-width:420px){.hh-ranking-card{grid-template-columns:3.1rem 5rem minmax(0,1fr);padding:.85rem;gap:.6rem}.hh-rank-badge{min-width:2.9rem;padding-left:.3rem;padding-right:.3rem}.hh-rank-badge__number{font-size:1.08rem}.hh-ranking-card__title{font-size:.94rem}.hh-ranking-card__review{font-size:.74rem}}
@media(min-width:600px){.hh-ranking-card{grid-template-columns:4.2rem 9rem minmax(0,1fr);gap:1.15rem;padding:1.3rem}.hh-rank-badge{min-width:3.7rem;padding-top:.58rem;padding-bottom:.5rem}.hh-rank-badge__number{font-size:1.4rem}.hh-ranking-card__title{font-size:1.16rem}.hh-ranking-card__action{grid-column:auto}.hh-ranking-card__button{width:auto;min-width:11rem}}
@media(prefers-reduced-motion:reduce){.hh-ranking-card{transition:none}.hh-ranking-card:hover{transform:none}}

/* Phase 4 Step 4.2 Rev.2: high-fidelity Royal Dome A-4 crown heading. */
.hh-ranking-public__title .hh-heading-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:2.8rem;height:2.8rem;margin-right:.08rem}
.hh-ranking-public__title .hh-heading-icon img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
@media(max-width:599px){.hh-ranking-public__title .hh-heading-icon{width:2.5rem;height:2.5rem}.hh-ranking-public__title{gap:.5rem}}

/* Phase 4 Step 4.3: approved public ranking card finish. */
.hh-ranking-public__list{gap:1.15rem}
.hh-ranking-card{
	grid-template-columns:4.8rem 7rem minmax(0,1fr);
	gap:1rem;
	padding:1.05rem;
	border-color:#d7e5e6;
	background:#fff;
}
.hh-ranking-card.is-top{min-height:10.5rem}
.hh-ranking-card.is-rank-1{border-color:#e7d39a;background:linear-gradient(90deg,#fffaf0 0,#fff 23%,#fff 100%)}
.hh-ranking-card.is-rank-2{border-color:#d8dde1;background:linear-gradient(90deg,#f7f9fb 0,#fff 23%,#fff 100%)}
.hh-ranking-card.is-rank-3{border-color:#e4c5ad;background:linear-gradient(90deg,#fff8f3 0,#fff 23%,#fff 100%)}
.hh-ranking-card__rank{align-self:stretch;min-height:100%;border-radius:12px;overflow:hidden}
.hh-ranking-card.is-rank-1 .hh-ranking-card__rank{background:linear-gradient(180deg,#fff6d8,#fffdf7)}
.hh-ranking-card.is-rank-2 .hh-ranking-card__rank{background:linear-gradient(180deg,#eef2f5,#fbfcfd)}
.hh-ranking-card.is-rank-3 .hh-ranking-card__rank{background:linear-gradient(180deg,#f8e8dc,#fffaf7)}
.hh-ranking-card__medal{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	min-height:7.4rem;
	font-weight:900;
	line-height:1;
}
.hh-ranking-card__medal::before,.hh-ranking-card__medal::after{
	position:absolute;
	top:50%;
	font-size:1.5rem;
	font-weight:400;
	transform:translateY(-5%);
	opacity:.62;
}
.hh-ranking-card__medal::before{content:'❮';left:.28rem}
.hh-ranking-card__medal::after{content:'❯';right:.28rem}
.hh-ranking-card__medal-crown{font-size:1.3rem;margin-bottom:.28rem}
.hh-ranking-card__medal-number{font-size:2rem}
.hh-ranking-card__medal-unit{margin-top:.15rem;font-size:.68rem}
.hh-ranking-card.is-rank-1 .hh-ranking-card__medal{color:#9b7200}
.hh-ranking-card.is-rank-2 .hh-ranking-card__medal{color:#65737c}
.hh-ranking-card.is-rank-3 .hh-ranking-card__medal{color:#9a542c}
.hh-ranking-card__media{aspect-ratio:1/1;min-width:0}
.hh-ranking-card__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin:0 0 .25rem}
.hh-ranking-card__brand{margin:0;color:var(--hh-color-primary-dark);font-size:.76rem;font-weight:800;letter-spacing:.03em;text-transform:none}
.hh-ranking-card__brand::before{content:'▣';margin-right:.28rem;color:var(--hh-color-primary)}
.hh-ranking-card__series{margin:0;color:#748285;font-size:.74rem}
.hh-ranking-card__series::before{content:'／';margin-right:.3rem;color:#b4bfc1}
.hh-ranking-card__title{font-size:1.12rem;font-weight:800}
.hh-ranking-card__tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.hh-ranking-card__tag{display:inline-flex;padding:.22rem .55rem;border-radius:999px;background:#f0f3f3;color:#5f6c6e;font-size:.69rem;line-height:1.35}
.hh-ranking-card__review{margin-top:.62rem}
.hh-ranking-card__stars{font-size:1rem}
.hh-ranking-card__rating-number{color:var(--hh-color-primary-dark);font-size:1rem}
.hh-ranking-card__excerpt{margin:.65rem 0 0;color:#465658;font-size:.82rem;line-height:1.7}
.hh-ranking-card__action{margin:.8rem 0 0}
.hh-ranking-card__button{min-width:13.5rem;min-height:46px;padding-inline:1.3rem}
.hh-ranking-card.is-standard{grid-template-columns:3.6rem 5.5rem minmax(0,1fr);padding:.9rem}
.hh-ranking-card.is-standard .hh-ranking-card__rank{min-height:auto;background:transparent}
.hh-ranking-card.is-standard .hh-ranking-card__excerpt{display:none}

@media(max-width:599px){
	.hh-ranking-card,.hh-ranking-card.is-standard{
		grid-template-columns:4.15rem minmax(0,1fr);
		gap:.75rem;
		padding:.8rem;
		align-items:start;
	}
	.hh-ranking-card__rank{grid-column:1;grid-row:1;min-height:6.2rem}
	.hh-ranking-card__media{grid-column:2;grid-row:1;width:100%;max-height:10rem}
	.hh-ranking-card__body{grid-column:1/-1;grid-row:2}
	.hh-ranking-card__medal{min-height:6.2rem}
	.hh-ranking-card__medal::before,.hh-ranking-card__medal::after{font-size:1.05rem}
	.hh-ranking-card__medal-number{font-size:1.6rem}
	.hh-ranking-card__title{font-size:1.05rem}
	.hh-ranking-card__excerpt{font-size:.78rem}
	.hh-ranking-card__action{margin-top:.75rem}
	.hh-ranking-card__button{width:100%;min-width:0}
	.hh-ranking-card.is-standard .hh-ranking-card__rank{display:flex;align-items:center;justify-content:center;min-height:5rem}
}
@media(min-width:600px){
	.hh-ranking-card{grid-template-columns:5.4rem 10rem minmax(0,1fr);gap:1.25rem;padding:1.25rem}
	.hh-ranking-card__title{font-size:1.28rem}
	.hh-ranking-card__medal{min-height:9rem}
	.hh-ranking-card__medal-number{font-size:2.35rem}
	.hh-ranking-card.is-standard{grid-template-columns:4rem 7rem minmax(0,1fr)}
}



/* Phase 4 Step 4.3 Rev.2: official C-5 Royal Dome rank badge assets. */
.hh-ranking-card.is-top{
	grid-template-columns:7.4rem 10rem minmax(0,1fr);
}
.hh-ranking-card.is-top .hh-ranking-card__rank{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:10rem;
	padding:.2rem;
	overflow:visible;
}
.hh-ranking-card__c5-badge{
	display:block;
	width:100%;
	max-width:7.2rem;
	height:auto;
	object-fit:contain;
	filter:none;
}
.hh-ranking-card.is-rank-1 .hh-ranking-card__rank{
	background:linear-gradient(180deg,rgba(255,249,229,.58),rgba(255,255,255,.2));
}
.hh-ranking-card.is-rank-2 .hh-ranking-card__rank{
	background:linear-gradient(180deg,rgba(246,248,250,.72),rgba(255,255,255,.2));
}
.hh-ranking-card.is-rank-3 .hh-ranking-card__rank{
	background:linear-gradient(180deg,rgba(255,246,238,.62),rgba(255,255,255,.2));
}
@media(max-width:599px){
	.hh-ranking-card.is-top{
		grid-template-columns:5.35rem minmax(0,1fr);
	}
	.hh-ranking-card.is-top .hh-ranking-card__rank{
		grid-column:1;
		grid-row:1;
		min-height:7rem;
		padding:.05rem;
	}
	.hh-ranking-card__c5-badge{
		max-width:5.05rem;
	}
}
@media(min-width:600px){
	.hh-ranking-card.is-top{
		grid-template-columns:7.6rem 10rem minmax(0,1fr);
	}
	.hh-ranking-card__c5-badge{
		max-width:7.25rem;
	}
}


/* Product Card Component System Phase 2 Step 4: Ranking Card interaction. */
.hh-ranking-card__whole-link{
	display:block;
	color:inherit;
	text-decoration:none!important;
	border-radius:16px;
	outline:none;
}
.hh-ranking-card{
	transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hh-ranking-card__title{transition:color .16s ease}
.hh-ranking-card__whole-link:hover .hh-ranking-card,
.hh-ranking-card__whole-link:focus-visible .hh-ranking-card{
	transform:translateY(-1px);
	box-shadow:0 9px 20px rgba(30,67,70,.09);
}
.hh-ranking-card__whole-link:hover .hh-ranking-card__title,
.hh-ranking-card__whole-link:focus-visible .hh-ranking-card__title{color:#0f8f89}
.hh-ranking-card__whole-link:focus-visible{
	outline:3px solid rgba(20,184,166,.24);
	outline-offset:3px;
}
.hh-ranking-card__button{pointer-events:auto}
.hh-ranking-card__whole-link:focus-within .hh-ranking-card{
	box-shadow:0 9px 20px rgba(30,67,70,.09);
}
.hh-ranking-card__whole-link:hover .hh-ranking-card.is-rank-1{border-color:#dcc27a}
.hh-ranking-card__whole-link:hover .hh-ranking-card.is-rank-2{border-color:#cbd2d8}
.hh-ranking-card__whole-link:hover .hh-ranking-card.is-rank-3{border-color:#ddb99d}
@media (prefers-reduced-motion:reduce){
	.hh-ranking-card,.hh-ranking-card__title{transition:none}
	.hh-ranking-card__whole-link:hover .hh-ranking-card,
	.hh-ranking-card__whole-link:focus-visible .hh-ranking-card{transform:none}
}

/* Product Card Component System Phase 2 Step 4 Rev.2: restrained CTA linked hover for Ranking Card. */
.hh-ranking-card__button{
	transition:transform .16s ease,background .16s ease,box-shadow .16s ease;
}
.hh-ranking-card__whole-link:hover .hh-ranking-card__button,
.hh-ranking-card__whole-link:focus-visible .hh-ranking-card__button{
	transform:translateY(-1px);
	background:linear-gradient(135deg,#14a8a1,#0d908a);
	box-shadow:0 6px 14px rgba(13,144,138,.18);
}
@media (prefers-reduced-motion:reduce){
	.hh-ranking-card__button{transition:none}
	.hh-ranking-card__whole-link:hover .hh-ranking-card__button,
	.hh-ranking-card__whole-link:focus-visible .hh-ranking-card__button{
		transform:none;
	}
}