/* Hjälteprodukten på startsidan: varan besökaren just såg i klippet, med pris
   och köpknapp inom första skärmen. Katalogen börjar direkt under. */

.fl-hero{
	display:grid;gap:.75rem;
	max-width:min(1180px,100% - 2rem);margin:.5rem auto 1.5rem;
}

/* Sökraden tar en egen rad på mobil och trycker ner köpknappen under kanten.
   Sök finns i menyn – på startsidan väger produkten tyngre. */
@media (max-width:820px){
	body.home .sw-head-bar>.sw-search{display:none}
}
.fl-hero-media{
	position:relative;display:block;border-radius:18px;overflow:hidden;
	background:#FBF5EB;line-height:0;
}
.fl-hero-img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;object-position:center 42%}
.fl-hero-badge{
	position:absolute;top:.75rem;left:.75rem;z-index:1;
	background:var(--sw-teal-d,#DE4229);color:#fff;
	font:800 .82rem/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;
	padding:.36rem .6rem;border-radius:999px;
}
.fl-hero-body{display:flex;flex-direction:column;gap:.4rem}
.fl-hero-title{
	margin:0;font:800 clamp(1.75rem,7vw,2.6rem)/1.05 "Poppins","Segoe UI",system-ui,sans-serif;
	color:var(--sw-navy,#211B16);text-wrap:balance;letter-spacing:-.01em;
}
.fl-hero-quip{
	margin:0;font:400 .98rem/1.4 Inter,system-ui,sans-serif;color:var(--sw-muted,#8A7B6C);
	max-width:34ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fl-hero-price{
	margin:.15rem 0 .35rem;display:flex;align-items:baseline;gap:.55rem;
	font-family:"Poppins","Segoe UI",system-ui,sans-serif;
}
.fl-hero-price strong{font-size:1.75rem;font-weight:800;color:var(--sw-teal-d,#DE4229)}
.fl-hero-price del{font-size:1.05rem;font-weight:500;color:var(--sw-muted,#8A7B6C)}
.fl-hero-cta{
	display:block;text-align:center;text-decoration:none;
	padding:1.05rem 1.4rem;border-radius:999px;
	background:var(--sw-teal-d,#DE4229);color:#fff;
	font:700 1.12rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	box-shadow:0 12px 28px -14px rgba(222,66,41,.9);
	transition:transform .12s ease,background .15s ease;
}
.fl-hero-cta:hover{background:#c5381f;transform:translateY(-1px);color:#fff}
/* Sekundärknapp: samma form som köpknappen men i kontur, så det syns att den
   går att trycka på utan att den konkurrerar med "Get one". */
.fl-hero-alt{
	display:block;text-align:center;margin:.6rem 0 0;
	padding:.85rem 1.4rem;border-radius:999px;
	border:1.5px solid var(--sw-border,#EBDCC8);
	background:transparent;color:var(--sw-navy,#211B16);
	font:600 .98rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	text-decoration:none;
	transition:background .15s ease,border-color .15s ease;
}
.fl-hero-alt:hover{
	background:var(--sw-sand,#F6E8D6);border-color:var(--sw-navy,#211B16);
	color:var(--sw-navy,#211B16);text-decoration:none;
}

/* Ett löftesband i stället för fyra staplade rader: leveransen först och i
   bläck, resten som dämpad brödtext med tunna avdelare. */
.fl-hero-trust{
	list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
	align-items:center;gap:.3rem .55rem;
	margin:.7rem 0 0;padding:0;
	font:500 .86rem/1.35 Inter,system-ui,sans-serif;color:var(--sw-muted,#8A7B6C);
}
.fl-hero-trust li{display:flex;align-items:center;gap:.55rem}
.fl-hero-trust li+li::before{
	content:"";width:3px;height:3px;border-radius:50%;
	background:currentColor;opacity:.5;flex:none;
}
.fl-hero-trust .is-lead{color:var(--sw-navy,#211B16);font-weight:700}

/* Bredare skärmar: bild och text sida vid sida, texten centrerad i höjdled. */
@media (min-width:820px){
	.fl-hero{grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;margin-top:1.6rem}
	.fl-hero-sale{max-width:27rem}
	.fl-hero-alt{display:inline-block;align-self:start;padding:.85rem 1.9rem}
	.fl-hero-trust{justify-content:flex-start}
	.fl-hero-trust{margin-top:.75rem}
	.fl-hero-body{gap:.65rem}
	.fl-hero-cta{align-self:start;padding:1.05rem 2.4rem}
	.fl-hero-alt{text-align:left;margin-top:.4rem}
	.fl-hero-img{aspect-ratio:4/5;object-position:center}
}
@media (prefers-reduced-motion:reduce){.fl-hero-cta{transition:none}}


/* ── Reasignal i hjälten ─────────────────────────────────────────────────
   Rörelsen sitter på brickan och pricken, aldrig på texten – blinkande
   siffror är det som får en butik att se billig ut. */
.fl-hero-sale{
	display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
	margin:.1rem 0 .5rem;padding:.5rem .7rem;
	background:#FBEDE6;border:1px solid rgba(222,66,41,.28);
	border-radius:10px;color:#A03A21;
}
.fl-hero-sale strong{
	font:800 .76rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	letter-spacing:.14em;text-transform:uppercase;color:#A03A21;
}
.fl-hero-dot{
	width:8px;height:8px;border-radius:50%;flex:none;background:var(--sw-teal-d,#DE4229);
	animation:flHeroPulse 1.8s ease-out infinite;
}
@keyframes flHeroPulse{
	0%{box-shadow:0 0 0 0 rgba(222,66,41,.55)}
	70%{box-shadow:0 0 0 8px rgba(222,66,41,0)}
	100%{box-shadow:0 0 0 0 rgba(222,66,41,0)}
}
.fl-hero-off{
	background:var(--sw-teal-d,#DE4229);color:#fff;padding:.2rem .5rem;border-radius:999px;
	font:800 .8rem/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;
}
.fl-hero-cd{margin-left:auto;font:700 .9rem/1 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.fl-hero-cd .fl-countdown{color:#A03A21;font:inherit}
.fl-hero-cd .fl-countdown::before{content:"ends in ";font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.08em;font-size:.78em}

.fl-hero-ship{
	margin:.6rem 0 0;font:500 .92rem/1.35 Inter,system-ui,sans-serif;
	color:var(--sw-navy,#211B16);text-align:center;
}
.fl-hero-ship strong{font-weight:700}

/* Rabattbrickan andas – en långsam puls, inte ett blink. */
.fl-hero-badge{animation:flBadge 2.6s ease-in-out infinite}
@keyframes flBadge{
	0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(222,66,41,0)}
	50%{transform:scale(1.06);box-shadow:0 6px 18px -6px rgba(222,66,41,.75)}
}
@media (prefers-reduced-motion:reduce){
	.fl-hero-badge,.fl-hero-dot{animation:none}
}
@media (min-width:820px){
	.fl-hero-ship{text-align:left}
}