/**
 * Funny Loot – charmlager.
 *
 * Läggs sist och rör bara ytan: rundningar, rörelse, rytm och de små
 * detaljer som gör att butiken känns utvald i stället för genererad.
 * Paletten kommer från swave.css (--sw-*); här definieras inga nya färger
 * utom de genomskinliga skuggorna.
 */

/* ── Grundton ─────────────────────────────────────────────────────────── */
:root {
	--fl-lift: 0 18px 40px -24px rgba(21, 24, 35, .38);
	--fl-lift-hi: 0 26px 52px -26px rgba(21, 24, 35, .46);
	--fl-punch-glow: 0 10px 24px -12px rgba(255, 90, 71, .55);
	--fl-ease: cubic-bezier(.34, 1.3, .5, 1);
}

/* ── Rubriker: vänsterställd korallmarkering i stället för centrerat ──── */
.kp-sec-title,
.sw-block-title {
	position: relative;
	font-weight: 700;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.kp-sec-title::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	margin: .7rem auto 0;
	border-radius: 3px;
	background: var(--sw-teal);
}

/* ── Knappar: mjuk pill som trycks ner när man klickar ────────────────── */
.kp-btn,
.button,
.wp-element-button,
.single_add_to_cart_button,
.sw-drawer-btn {
	border-radius: 100px !important;
	font-weight: 600;
	letter-spacing: .005em;
	transition: transform .18s var(--fl-ease), box-shadow .18s ease, background-color .18s ease;
}

.kp-btn--primary,
.single_add_to_cart_button,
.sw-drawer-btn {
	box-shadow: var(--fl-punch-glow);
}

.kp-btn:hover,
.button:hover,
.single_add_to_cart_button:hover,
.sw-drawer-btn:hover {
	transform: translateY(-2px);
}

.kp-btn:active,
.button:active,
.single_add_to_cart_button:active {
	transform: translateY(0) scale(.985);
}

/* ── Produktkort ──────────────────────────────────────────────────────── */
.kp-card,
.kp-pcard {
	border-radius: 20px;
	overflow: hidden;
	transition: transform .28s var(--fl-ease), box-shadow .28s ease;
}

.kp-card:hover,
.kp-pcard:hover {
	transform: translateY(-4px);
	box-shadow: var(--fl-lift-hi);
}

.kp-card-media img {
	transition: transform .5s var(--fl-ease);
}

.kp-card:hover .kp-card-media img {
	transform: scale(1.04) rotate(-.6deg);
}

/* Kvickheten under namnet – det som gör att kortet känns utvalt */
.kp-card-line {
	margin: .3rem 0 .55rem;
	font-size: .84rem;
	line-height: 1.45;
	color: var(--sw-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kp-card-name {
	letter-spacing: -.015em;
}

.kp-card-name a {
	text-decoration: none;
	background-image: linear-gradient(var(--sw-teal), var(--sw-teal));
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .28s var(--fl-ease);
}

.kp-card:hover .kp-card-name a {
	background-size: 100% 2px;
}

/* Rea-märket: lite lutat, som en påklistrad etikett */
.kp-badge--sale {
	border-radius: 100px;
	font-weight: 700;
	letter-spacing: .02em;
	transform: rotate(-3deg);
	box-shadow: var(--fl-punch-glow);
}

.kp-badge--oos {
	border-radius: 100px;
}

/* ── Chips och prisband: fjädrande ────────────────────────────────────── */
.kp-axis-chip,
.kp-band,
.sw-chip {
	border-radius: 100px;
	transition: transform .18s var(--fl-ease), background-color .18s ease, border-color .18s ease;
}

.kp-axis-chip:hover,
.kp-band:hover,
.sw-chip:hover {
	transform: translateY(-2px);
}

/* ── Kategori- och axelrutor ──────────────────────────────────────────── */
.kp-axis,
.kp-cat,
.kp-gf-card {
	border-radius: 20px;
	transition: transform .28s var(--fl-ease), box-shadow .28s ease;
}

.kp-axis:hover,
.kp-cat:hover {
	transform: translateY(-3px);
	box-shadow: var(--fl-lift);
}

/* ── Hero: mer luft, tydligare hierarki ───────────────────────────────── */
.kp-hero h1 {
	letter-spacing: -.03em;
	text-wrap: balance;
}

.kp-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}

.kp-hero-kicker::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sw-teal);
	flex: none;
}

.kp-hero-promise {
	border-radius: 16px;
	transition: transform .28s var(--fl-ease);
}

.kp-hero-promise:hover {
	transform: translateX(3px);
}

/* ── Erbjudanderaden i toppen ─────────────────────────────────────────── */
.sw-offerbar {
	letter-spacing: .04em;
}

.sw-offerbar strong {
	color: var(--sw-teal);
}

/* ── Sökfältet ────────────────────────────────────────────────────────── */
.sw-search input[type=search] {
	border-radius: 100px 0 0 100px;
	padding-left: 1rem;
}

.sw-search button {
	border-radius: 0 100px 100px 0;
	color: #fff;
	padding-right: 1rem;
}

/* ── Kundvagnslådan ───────────────────────────────────────────────────── */
.sw-drawer {
	border-radius: 22px 0 0 22px;
}

/* Vagnen skvätter till när något läggs i den */
@keyframes fl-nudge {
	0%, 100% { transform: none; }
	25%      { transform: rotate(-9deg) scale(1.08); }
	60%      { transform: rotate(6deg) scale(1.04); }
}

.sw-cart-link.is-added svg {
	animation: fl-nudge .5s var(--fl-ease);
}

/* ── Variantväljaren ──────────────────────────────────────────────────── */
.fl-swatch {
	transition: transform .18s var(--fl-ease), border-color .18s ease, box-shadow .18s ease;
}

.fl-swatch:hover {
	transform: translateY(-2px);
}

.fl-swatch.is-active img {
	box-shadow: 0 0 0 2px var(--sw-white), 0 0 0 4px var(--sw-teal);
}

.fl-flip {
	border-radius: 22px;
}

.fl-flip-btn {
	box-shadow: var(--fl-punch-glow);
}

/* ── Tomma tillstånd ──────────────────────────────────────────────────── */
.kp-empty,
.sw-rev-empty,
.kp-list-empty {
	border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; }
	.kp-card:hover, .kp-pcard:hover, .kp-axis:hover, .kp-cat:hover,
	.kp-btn:hover, .button:hover, .fl-swatch:hover, .kp-hero-promise:hover {
		transform: none;
	}
	.kp-card:hover .kp-card-media img { transform: none; }
}

/* ── Köpknappen på korten ─────────────────────────────────────────────── */
/* Den var mörk och smälte in i texten. På en butikssida är det här den enda
   handlingen som räknas, så den får korallen. */
.kp-card-cta a.button,
.kp-card-cta button.button,
.kp-card-cta a.add_to_cart_button {
	background: var(--sw-teal);
	border-color: var(--sw-teal);
	color: #fff;
	box-shadow: var(--fl-punch-glow);
}

.kp-card-cta a.button:hover,
.kp-card-cta button.button:hover,
.kp-card-cta a.add_to_cart_button:hover {
	background: var(--sw-teal-d);
	border-color: var(--sw-teal-d);
	color: #fff;
}

/* Kategorichipsen i butiksfiltret: låt den valda synas */
.kp-arc-chip.is-active,
.kp-chip.is-active {
	background: var(--sw-navy);
	border-color: var(--sw-navy);
	color: #fff;
}