/**
 * AOB Crew Pick
 * bikys-child/assets/css/aob-crew-pick.css
 *
 * Sunset viper sticker: shop card badge with tooltip + compact PDP marker.
 * Card badge is mounted by assets/js/aob-crew-pick.js; PDP marker by the PHP.
 */

:root {
	--aob-pink: #F2295B;
	--aob-yellow: #EFFF00;
	--aob-pink-deep: #D9043D;
	--aob-ink: #111111;
	--aob-paper: #F2F2F0;
	--aob-font: "Bikys Heading", "Arial Narrow", sans-serif;
}

/* ------------------------------------------------------------------
 * Card host: positioning + sizing context for the badge.
 * WooCommerce prints product_tag-aob-crew-pick on the <li>.
 * ------------------------------------------------------------------ */
.product_tag-aob-crew-pick .product-transition {
	position: relative;
	container-type: inline-size;
}

/* ------------------------------------------------------------------
 * Sticker (shared by card + PDP)
 * ------------------------------------------------------------------ */
.aob-crewpick {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .35em;
	overflow: hidden;
	padding: .42em .7em .42em .52em;
	font-family: var(--aob-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: .065em;
	white-space: nowrap;
	color: var(--aob-yellow);
	background: var(--aob-pink);
	border: .2em solid var(--aob-ink);
	border-radius: .34em .14em .4em .12em / .18em .36em .14em .3em;
	box-shadow: .3em .3em 0 var(--aob-ink);
	transform: rotate(-2deg);
}

/* Bottom edge texture (originally sunset bands) */
.aob-crewpick::after,
.aob-crewpick::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2%; /* was 50% (full sunset bands); 2% gives a rough bottom edge */
}
.aob-crewpick::after {
	background: linear-gradient(to bottom, transparent 0 22%, var(--aob-pink-deep) 22% 100%);
}
.aob-crewpick::before {
	z-index: 1;
	background: linear-gradient(to bottom,
		transparent 0 30%, var(--aob-ink) 30% 38%,
		transparent 38% 58%, var(--aob-ink) 58% 70%,
		transparent 70% 100%);
}

/* Marker-outlined type + bolt */
.aob-crewpick__text {
	position: relative;
	z-index: 2;
	-webkit-text-stroke: .17em var(--aob-ink);
	paint-order: stroke fill;
	text-shadow: .1em .1em 0 var(--aob-ink);
}
.aob-crewpick__bolt {
	position: relative;
	z-index: 2;
	flex: none;
	width: .62em;
	height: 1em;
	overflow: visible;
	fill: var(--aob-yellow);
	stroke: var(--aob-ink);
	stroke-width: 2.6;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

/* ------------------------------------------------------------------
 * Shop card badge (sticker + tooltip)
 * ------------------------------------------------------------------ */
.product-transition .aob-crewpick-badge {
	position: absolute;
	left: 6%;
	bottom: 8%;
	z-index: 20; /* above the theme's overlay link and hover image */
	font-size: clamp(10px, 4.8cqi, 15px);
	line-height: 1;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
}
.aob-crewpick-badge:focus-visible .aob-crewpick {
	outline: 2px solid var(--aob-pink);
	outline-offset: 3px;
}

.aob-crewpick-tip {
	position: absolute;
	left: 0;
	bottom: calc(100% + .95em);
	width: max-content;
	max-width: min(15rem, 88cqi);
	padding: 8px 10px;
	font: 500 12.5px/1.35 var(--aob-tip-font, inherit);
	text-transform: none;
	letter-spacing: normal;
	white-space: normal;
	text-align: left;
	color: var(--aob-paper);
	background: var(--aob-ink);
	border-radius: 3px;
	box-shadow: 3px 3px 0 var(--aob-pink);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	pointer-events: none;
}
.aob-crewpick-tip::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: -5px;
	width: 10px;
	height: 10px;
	background: var(--aob-ink);
	transform: rotate(45deg);
}

.aob-crewpick-badge.is-open .aob-crewpick-tip,
.aob-crewpick-badge:focus-visible .aob-crewpick-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
}
@media (hover: hover) and (pointer: fine) {
	.aob-crewpick-badge:hover .aob-crewpick-tip {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* ------------------------------------------------------------------
 * Single product page marker
 * ------------------------------------------------------------------ */
.aob-crewpick-pdp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55em .9em;
	margin: 12px 0 16px;
}
.aob-crewpick-pdp .aob-crewpick {
	font-size: 13px;
	transform: rotate(-1.5deg);
	box-shadow: .24em .24em 0 var(--aob-ink);
}
.aob-crewpick-pdp__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.35;
	color: inherit;
}

@media (max-width: 480px) {
	.aob-crewpick-pdp .aob-crewpick { font-size: 12px; }
	.aob-crewpick-pdp__note { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.aob-crewpick-tip { transition: none; }
}