/**
 * Storefront Header Actions — 1:1 with the design spec.
 *
 * Crimson/ivory use --ly-* semantic tokens (with the spec literal as fallback)
 * so a retheme cascades; the design-specific values (rose-300, ink-700, washes)
 * are kept literal to guarantee the exact look.
 *
 * NOTE: `.so-iconbtn` are <button>s, so the rules below are written double-class
 * (`.so-iconbtn.so-iconbtn`, specificity 0,2,0) to beat the Elementor Kit's
 * global `.elementor-kit-N button { background }` (0,1,1) that otherwise paints
 * every bare button crimson. Without this the whole cluster goes solid crimson.
 */

.so-actions {
	display: flex;
	gap: 6px;
	align-items: center;
	position: relative;
}

/* ------------------------------------------------------------- icon button */
.so-iconbtn.so-iconbtn {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: #DCC6CC; /* --text-secondary / rose-300 */
	cursor: pointer;
	padding: 0;
	transition: all 150ms cubic-bezier(.22, 1, .36, 1);
}
.so-iconbtn.so-iconbtn:hover {
	background: rgba(245, 237, 231, .07); /* hover wash (untokenised literal) */
	color: var(--ly-color-text, #F5EDE7); /* --text-primary / ivory-100 */
}
/* Active (count > 0, or search panel open) — declared AFTER hover so it wins at
   equal specificity: a wishlisted heart stays crimson on hover. */
.so-iconbtn.so-iconbtn.is-active,
.so-iconbtn.so-iconbtn[aria-pressed="true"] {
	background: rgba(224, 16, 47, .12); /* --accent-soft */
	color: var(--ly-color-primary, #E0102F); /* --accent / crimson-500 */
}
.so-iconbtn.so-iconbtn:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.so-iconbtn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #0B0508, 0 0 0 4px #F03A50; /* --focus-ring */
}

/* --------------------------------------------------------------- count badge */
.so-badgewrap {
	position: relative;
	display: inline-flex;
}
.so-dot {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 17px;
	height: 17px;
	border-radius: 9px;
	background: var(--ly-color-primary, #E0102F);
	color: #FFF6F0; /* --text-on-accent */
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 10px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	pointer-events: none; /* don't swallow the button's hover */
}
.so-dot[hidden] {
	display: none; /* beats .so-dot { display:flex } so the hidden attr works */
}

/* ----------------------------------------------------------------- tooltip */
.so-tip {
	position: relative;
	display: inline-flex;
}
.so-tip::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	white-space: nowrap;
	background: #311C26; /* ink-700 */
	border: 1px solid rgba(245, 237, 231, .24); /* --border-strong */
	color: var(--ly-color-text, #F5EDE7);
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 7px 12px;
	border-radius: 10px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .45);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.so-tip:hover::after {
	opacity: 1;
	visibility: visible;
}

/* --------------------------------------------------- live-search dropdown panel */
.so-searchpanel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 60;
	width: 340px;
	max-width: calc(100vw - 32px);
}
.so-searchpanel[hidden] {
	display: none;
}
.so-searchpanel .ly-search {
	width: 100%;
}
/* Reuse the live field but dress it for the dark panel (override the loud
   default crimson pill border). */
.so-searchpanel .ly-search__form {
	background: var(--ly-color-surface, #120A0F);
	border: 1px solid rgba(245, 237, 231, .14);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.so-searchpanel .ly-search__form:focus-within {
	border-color: rgba(245, 237, 231, .28);
}
.so-searchpanel .ly-search__icon {
	color: #DCC6CC;
}
.so-searchpanel .ly-search__input {
	color: var(--ly-color-text, #F5EDE7);
}

@media (prefers-reduced-motion: reduce) {
	.so-iconbtn.so-iconbtn {
		transition: none;
	}
}

/* Wishlist is desktop/tablet only — drop it from the header cluster on phones
   (search + cart are the priority actions on a small header). */
@media (max-width: 767px) {
	.so-actions .so-tip--wishlist {
		display: none;
	}
}