/**
 * Hair Hub Design System — shared frontend components.
 *
 * Ranking Framework Phase 4 Step 4.1 introduces the first reusable frontend
 * component layer. Keep selectors module-agnostic so Product / Brand / Series
 * screens can adopt them without duplicating visual rules.
 */
:root {
	--hh-color-primary: #14aeb3;
	--hh-color-primary-dark: #087f85;
	--hh-color-primary-soft: #e9f8f8;
	--hh-color-text: #243638;
	--hh-color-muted: #68787a;
	--hh-color-border: #d9e7e8;
	--hh-color-surface: #fff;
	--hh-color-surface-soft: #f3fbfb;
	--hh-color-star: #f2ad00;
	--hh-radius-sm: 9px;
	--hh-radius-md: 12px;
	--hh-radius-lg: 16px;
	--hh-shadow-card: 0 6px 18px rgba(24, 70, 72, .07);
}

.hh-heading-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.45em;
	height: 1.45em;
}

.hh-heading-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hh-product-card {
	position: relative;
	border: 1px solid var(--hh-color-border);
	border-radius: var(--hh-radius-lg);
	background: var(--hh-color-surface);
	box-shadow: var(--hh-shadow-card);
}

.hh-product-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--hh-radius-md);
	background: var(--hh-color-surface-soft);
	overflow: hidden;
}

.hh-product-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--hh-color-surface);
}

.hh-card-rakuten,
.hh-card-rakuten__fallback,
.hh-card-rakuten__selected,
.hh-card-rakuten__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.hh-card-rakuten {
	position: relative;
}

.hh-card-rakuten__selected.is-loading {
	position: absolute;
	inset: 0;
	visibility: hidden;
}

.hh-card-rakuten__selected[hidden],
.hh-card-rakuten__fallback[hidden] {
	display: none;
}

.hh-card-rakuten__link {
	position: relative;
	z-index: 2;
}

.hh-card-rakuten__link .hh-product-card__image {
	margin: 0 !important;
	border: 0;
}

.hh-product-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #f8fdfd, #eaf7f7);
	color: #789;
}

.hh-product-placeholder strong {
	font-size: 1.8rem;
	font-weight: 700;
}

.hh-product-placeholder small {
	font-size: .55rem;
	letter-spacing: .08em;
}

.hh-rating-stars {
	position: relative;
	display: inline-block;
	line-height: 1;
	letter-spacing: .05em;
}

.hh-rating-stars__base {
	color: #d7dede;
}

.hh-rating-stars__fill {
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--hh-color-star);
}

.hh-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: #f0f1f1;
	color: #687072;
	font-size: .7rem;
	line-height: 1.4;
}

.hh-label--success {
	background: #def7f5;
	color: var(--hh-color-primary-dark);
	font-weight: 700;
}

.hh-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 44px;
	padding: .65rem 1rem;
	border-radius: var(--hh-radius-sm);
	background: linear-gradient(135deg, var(--hh-color-primary), #0e969c);
	color: #fff !important;
	font-weight: 800;
	text-decoration: none !important;
	box-shadow: 0 4px 10px rgba(20, 174, 179, .22);
	transition: transform .18s ease, box-shadow .18s ease;
}

.hh-button:hover,
.hh-button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 7px 14px rgba(20, 174, 179, .3);
}

.hh-rank-badge {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	gap: .08rem;
	min-width: 3.15rem;
	padding: .48rem .42rem .42rem;
	border: 1px solid rgba(8, 127, 133, .22);
	border-radius: 10px 10px 14px 14px;
	background: linear-gradient(180deg, #fff 0%, #eaf9f9 100%);
	color: var(--hh-color-primary-dark);
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 4px 10px rgba(24, 70, 72, .09);
}

.hh-rank-badge::before {
	content: '';
	position: absolute;
	left: 7px;
	right: 7px;
	top: 0;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--hh-color-primary);
}

.hh-rank-badge__number {
	font-size: 1.2rem;
}

.hh-rank-badge__unit {
	font-size: .65rem;
}

.hh-rank-badge--1 {
	border-color: #e7c86d;
	background: linear-gradient(180deg, #fffdf5 0%, #fff4cc 100%);
	color: #8a6800;
}

.hh-rank-badge--1::before {
	background: linear-gradient(90deg, #d3a313, #f1d978, #b98600);
}

.hh-rank-badge--2 {
	border-color: #cbd2d7;
	background: linear-gradient(180deg, #fff 0%, #eef2f5 100%);
	color: #5e6b73;
}

.hh-rank-badge--2::before {
	background: linear-gradient(90deg, #8d9aa3, #d5dde2, #717f88);
}

.hh-rank-badge--3 {
	border-color: #dfb08c;
	background: linear-gradient(180deg, #fffaf7 0%, #f9e5d7 100%);
	color: #8a4d28;
}

.hh-rank-badge--3::before {
	background: linear-gradient(90deg, #b86f3d, #dfa477, #96552e);
}

@media (prefers-reduced-motion: reduce) {
	.hh-button {
		transition: none;
	}
	.hh-button:hover,
	.hh-button:focus-visible {
		transform: none;
	}
}

/* Phase 1.1: C-5 rank badge final styling — no dark top accent line. */
.hh-rank-badge::before,
.hh-rank-badge--1::before,
.hh-rank-badge--2::before,
.hh-rank-badge--3::before {
	display: none;
	content: none;
}
.hh-rank-badge {
	padding-top: .48rem;
	border-radius: 12px;
}

/* Product Card Component System v1.0 — Phase 2 shared card modes. */
.hh-standard-product-card {
	display: grid;
	grid-template-columns: 8rem minmax(0,1fr);
	gap: 1rem;
	padding: 1rem;
	align-items: center;
}
.hh-standard-product-card__body { min-width: 0; }
.hh-standard-product-card__eyebrow,
.hh-compact-product-card__eyebrow { display:flex; flex-wrap:wrap; gap:.25rem .45rem; margin:0 0 .25rem; color:var(--hh-color-muted); font-size:.72rem; }
.hh-standard-product-card__brand,
.hh-compact-product-card__brand { color:var(--hh-color-primary-dark); font-weight:800; }
.hh-standard-product-card__series::before,
.hh-compact-product-card__series::before { content:'／'; margin-right:.3rem; color:#b4bfc1; }
.hh-standard-product-card__title,
.hh-compact-product-card__title { margin:0; color:var(--hh-color-text); font-size:1.05rem; line-height:1.45; }
.hh-standard-product-card__title a,
.hh-compact-product-card__title a { color:inherit; text-decoration:none; }
.hh-standard-product-card__tags,
.hh-compact-product-card__tags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.hh-standard-product-card__tag,
.hh-compact-product-card__tag { display:inline-flex; padding:.2rem .5rem; border-radius:999px; background:#f0f3f3; color:#5f6c6e; font-size:.67rem; }
.hh-standard-product-card__review,
.hh-compact-product-card__review { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .48rem; margin-top:.55rem; color:var(--hh-color-muted); font-size:.74rem; }
.hh-standard-product-card__stars,
.hh-compact-product-card__stars { color:var(--hh-color-star); }
.hh-standard-product-card__rating-number,
.hh-compact-product-card__rating-number { color:var(--hh-color-primary-dark); }
.hh-standard-product-card__excerpt { margin:.6rem 0 0; color:#465658; font-size:.8rem; line-height:1.7; }
.hh-standard-product-card__action { margin:.7rem 0 0; }
.hh-standard-product-card__button { min-width:12rem; }

.hh-compact-product-card { display:grid; grid-template-columns:5.3rem minmax(0,1fr); gap:.75rem; padding:.75rem; align-items:center; }
.hh-compact-product-card__media { width:5.3rem; }
.hh-compact-product-card__body { position:relative; min-width:0; padding-right:1.15rem; }
.hh-compact-product-card__title { font-size:.93rem; }
.hh-compact-product-card__link { position:absolute; right:0; top:50%; transform:translateY(-50%); color:var(--hh-color-primary-dark); font-size:1.5rem; font-weight:700; text-decoration:none; }
.hh-compact-product-card__review { margin-top:.4rem; }

@media (max-width:599px) {
	.hh-standard-product-card { grid-template-columns:6.3rem minmax(0,1fr); gap:.75rem; padding:.8rem; }
	.hh-standard-product-card__button { width:100%; min-width:0; }
	.hh-standard-product-card__excerpt { font-size:.76rem; }
	.hh-compact-product-card { grid-template-columns:4.7rem minmax(0,1fr); }
	.hh-compact-product-card__media { width:4.7rem; }
}

/* Product Card Component System Phase 2 Step 2: shortcode test wrapper. */
.hh-product-card-shortcode {
	width: 100%;
	margin: 1rem 0;
}

.hh-product-card-shortcode--standard {
	max-width: 760px;
}

.hh-product-card-shortcode--compact {
	max-width: 420px;
}

.hh-product-card-shortcode__message {
	padding: .75rem 1rem;
	border: 1px solid var(--hh-color-border, #d7e5e6);
	border-radius: 10px;
	background: #f8fbfb;
	color: #526466;
	font-size: .875rem;
}

/* Product Card Component System Phase 2 Step 3: Compact Card interaction polish. */
.hh-compact-product-card__whole-link{
	display:block;
	color:inherit;
	text-decoration:none!important;
	border-radius:16px;
	outline:none;
}
.hh-compact-product-card{
	position:relative;
	padding-right:4.75rem;
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.hh-compact-product-card__whole-link:hover .hh-compact-product-card,
.hh-compact-product-card__whole-link:focus-visible .hh-compact-product-card{
	transform:translateY(-2px);
	border-color:rgba(20,184,166,.48);
	box-shadow:0 10px 24px rgba(15,118,110,.12);
	background:#fff;
}
.hh-compact-product-card__title{
	transition:color .18s ease;
}
.hh-compact-product-card__whole-link:hover .hh-compact-product-card__title,
.hh-compact-product-card__whole-link:focus-visible .hh-compact-product-card__title{
	color:#0f8f89;
}
.hh-compact-product-card__arrow{
	position:absolute;
	top:50%;
	right:1rem;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border-radius:50%;
	background:linear-gradient(135deg,#24b9b1,#0f9e99);
	color:#fff;
	font-size:1.35rem;
	font-weight:800;
	line-height:1;
	box-shadow:0 5px 12px rgba(15,158,153,.2);
	transform:translateY(-50%);
	transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
	text-decoration:none;
}
.hh-compact-product-card__whole-link:hover .hh-compact-product-card__arrow,
.hh-compact-product-card__whole-link:focus-visible .hh-compact-product-card__arrow{
	transform:translate(3px,-50%);
	background:linear-gradient(135deg,#15aaa3,#078b86);
	box-shadow:0 7px 16px rgba(7,139,134,.28);
}
.hh-compact-product-card__whole-link:focus-visible{
	outline:3px solid rgba(20,184,166,.28);
	outline-offset:3px;
}
.hh-compact-product-card__whole-link:focus-within .hh-compact-product-card{
	border-color:rgba(20,184,166,.48);
	box-shadow:0 10px 24px rgba(15,118,110,.12);
}
@media (max-width:599px){
	.hh-compact-product-card{
		padding-right:4.15rem;
	}
	.hh-compact-product-card__arrow{
		right:.75rem;
		width:42px;
		height:42px;
	}
}
@media (prefers-reduced-motion:reduce){
	.hh-compact-product-card,
	.hh-compact-product-card__title,
	.hh-compact-product-card__arrow{
		transition:none;
	}
	.hh-compact-product-card__whole-link:hover .hh-compact-product-card,
	.hh-compact-product-card__whole-link:focus-visible .hh-compact-product-card{
		transform:none;
	}
	.hh-compact-product-card__whole-link:hover .hh-compact-product-card__arrow,
	.hh-compact-product-card__whole-link:focus-visible .hh-compact-product-card__arrow{
		transform:translateY(-50%);
	}
}



/* Product Card Component System Phase 2 Step 4: Standard Card interaction. */
.hh-standard-product-card__whole-link{
	display:block;
	color:inherit;
	text-decoration:none!important;
	border-radius:16px;
	outline:none;
}
.hh-standard-product-card{
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.hh-standard-product-card__title{transition:color .18s ease}
.hh-standard-product-card__whole-link:hover .hh-standard-product-card,
.hh-standard-product-card__whole-link:focus-visible .hh-standard-product-card{
	transform:translateY(-2px);
	border-color:rgba(20,184,166,.42);
	box-shadow:0 10px 24px rgba(15,118,110,.11);
	background:#fff;
}
.hh-standard-product-card__whole-link:hover .hh-standard-product-card__title,
.hh-standard-product-card__whole-link:focus-visible .hh-standard-product-card__title{color:#0f8f89}
.hh-standard-product-card__whole-link:focus-visible{
	outline:3px solid rgba(20,184,166,.28);
	outline-offset:3px;
}
.hh-standard-product-card__button{pointer-events:auto}
.hh-standard-product-card__whole-link:focus-within .hh-standard-product-card{
	border-color:rgba(20,184,166,.42);
	box-shadow:0 10px 24px rgba(15,118,110,.11);
}
@media (prefers-reduced-motion:reduce){
	.hh-standard-product-card,.hh-standard-product-card__title{transition:none}
	.hh-standard-product-card__whole-link:hover .hh-standard-product-card,
	.hh-standard-product-card__whole-link:focus-visible .hh-standard-product-card{transform:none}
}

/* Product Card Component System Phase 2 Step 4 Rev.2: CTA linked hover for Standard Card. */
.hh-standard-product-card__button{
	transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.hh-standard-product-card__whole-link:hover .hh-standard-product-card__button,
.hh-standard-product-card__whole-link:focus-visible .hh-standard-product-card__button{
	transform:translateY(-2px);
	background:linear-gradient(135deg,#139f99,#0b8883);
	box-shadow:0 8px 18px rgba(11,136,131,.22);
}
@media (prefers-reduced-motion:reduce){
	.hh-standard-product-card__button{transition:none}
	.hh-standard-product-card__whole-link:hover .hh-standard-product-card__button,
	.hh-standard-product-card__whole-link:focus-visible .hh-standard-product-card__button{
		transform:none;
	}
}