/* Kortaste vägen till kassan: Buy now-knapp, fast köprad på mobil, nedräkning. */

/* ── Buy now ─────────────────────────────────────────────────────────────── */
.fl-buynow{
	display:block;width:100%;margin:.6rem 0 0;padding:1.05rem 1.4rem;
	border:0;border-radius:999px;
	background:var(--sw-teal-d,#DE4229);color:#fff;
	font:700 1.1rem/1.1 "Poppins","Segoe UI",system-ui,sans-serif;letter-spacing:.01em;
	box-shadow:0 10px 26px -14px rgba(222,66,41,.85);
	cursor:pointer;transition:transform .12s ease,background .15s ease,opacity .15s ease;
}
.fl-buynow:hover{background:#c5381f;transform:translateY(-1px)}
.fl-buynow:active{transform:translateY(0)}
.fl-buynow:disabled,.fl-buynow.is-off{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.fl-buynow::after{content:" →";font-weight:600}

/* En knapp ska vara den självklara. "Add to cart" blir tyst kontur, "Buy now"
   är den fyllda – annars konkurrerar två lika starka knappar om samma klick. */
.kp-pdp .kp-pdp-cart button.single_add_to_cart_button,
.kp-pdp form.cart button.single_add_to_cart_button{
	background:transparent;color:var(--sw-navy,#211B16);
	border:1.5px solid var(--sw-border,#EBDCC8);box-shadow:none;font-weight:600;
}
.kp-pdp .kp-pdp-cart button.single_add_to_cart_button:hover,
.kp-pdp form.cart button.single_add_to_cart_button:hover{background:var(--sw-sand,#F6E8D6);border-color:var(--sw-navy,#211B16)}

/* ── Buy now får en egen rad ─────────────────────────────────────────────
   Woo lägger antal + köpknapp i en flexrad med nowrap; utan de här reglerna
   trycktes Buy now in på samma rad och knapparna krockade. */
/* charm.css sätter nowrap på samma klass – därför .kp-pdp framför, annars
   avgör laddningsordningen och Buy now trycks ut ur skärmen. */
.kp-pdp .kp-pdp-cart form.cart,
.kp-pdp .kp-pdp-cart .woocommerce-variation-add-to-cart{flex-wrap:wrap;row-gap:0}
.kp-pdp .kp-pdp-cart .quantity{order:0}
.kp-pdp .kp-pdp-cart button.single_add_to_cart_button{order:1}
.kp-pdp .kp-pdp-cart .fl-buynow,
.kp-pdp form.cart .fl-buynow{flex:1 0 100%;width:100%;order:2}

/* Express-knappen (Apple/Google Pay) finns bara på enheter som stöder den.
   Utan innehåll ritade behållaren ändå avdelare och luft – en tom rad mellan
   köpknappen och reaskylten. */
/* Reserverad plats medan enheten svarar: en lugn platshållare i knappens
   höjd, ingen spinner som drar blicken från Buy now. */
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-waiting #wcpay-express-checkout-element{
	min-height:48px;border-radius:24px;
	background:linear-gradient(100deg,rgba(33,27,22,.05),rgba(33,27,22,.10),rgba(33,27,22,.05));
	background-size:220% 100%;animation:flWait 1.4s ease-in-out infinite;
}
@keyframes flWait{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){
	.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-waiting #wcpay-express-checkout-element{animation:none}
}
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-ready{animation:flFade .25s ease both}
@keyframes flFade{from{opacity:0}to{opacity:1}}

.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-empty,
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper:has(#wcpay-express-checkout-element:empty){
	margin-top:0;padding-top:0;border-top:0;
}

/* Apple/Google Pay är ETT alternativ till köpknappen, inte två knappar till i
   samma hög. Luften är GRUNDLÄGE – tidigare lades den på först när skriptet
   hunnit se knappen, och fram till dess satt den klistrad mot Buy now. */
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper{
	margin-top:1.6rem;padding-top:0;border-top:0;
}
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-ready{
	margin-top:1.6rem;padding-top:0;border-top:0;
}
.kp-pdp .kp-pdp-cart .wcpay-express-checkout-wrapper.is-ready::before{
	content:"or";display:block;text-align:center;margin:0 0 .8rem;
	font:600 .74rem/1 Inter,system-ui,sans-serif;letter-spacing:.14em;
	text-transform:uppercase;color:var(--sw-muted,#8A7B6C);
}
.kp-pdp .kp-urgency{margin-top:1.6rem}

/* ── Reaskylten, direkt under köpknappen ─────────────────────────────────
   Köpknappen är sidans enda fyllda röda yta. Skylten får därför ljus botten
   med röd ram och röd text – lika tydlig, men den slåss inte med knappen
   (och inte med Apple/Google Pays svarta pillerknappar däremellan). */
.kp-pdp .kp-urgency{
	display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .7rem;
	margin:.85rem 0 1rem;padding:.75rem .9rem;
	background:#FBEDE6;
	border:1px solid rgba(222,66,41,.35);
	border-left:4px solid var(--sw-teal-d,#DE4229);
	border-radius:12px;color:#A03A21;box-shadow:none;
}
.kp-urgency-row{display:flex;align-items:center;gap:.5rem;flex:1 1 auto;min-width:0}
.kp-pdp .kp-urgency strong{
	font:800 .82rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	letter-spacing:.14em;text-transform:uppercase;color:#A03A21;
}
.kp-pdp .kp-urgency-dot{
	flex:none;width:8px;height:8px;border-radius:50%;background:var(--sw-teal-d,#DE4229);
	box-shadow:0 0 0 0 rgba(222,66,41,.5);animation:flPulse 1.8s ease-out infinite;
}
@keyframes flPulse{
	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)}
}
.kp-urgency-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;
}
.kp-urgency-clock{display:flex;align-items:baseline;gap:.4rem;margin-left:auto}
.kp-urgency-cap{
	font:600 .68rem/1 Inter,system-ui,sans-serif;letter-spacing:.12em;
	text-transform:uppercase;color:#B9705A;
}
.fl-countdown{
	color:#A03A21;font:800 1.08rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fl-countdown[hidden]{display:none}
@media (max-width:380px){
	.kp-urgency-clock{margin-left:0;flex-basis:100%}
}

/* ── Fast köprad (mobil) ─────────────────────────────────────────────────── */
.fl-buybar{
	position:fixed;left:0;right:0;bottom:0;z-index:120;
	background:var(--sw-cream,#FDF7EF);
	border-top:1px solid var(--sw-border,#EBDCC8);
	box-shadow:0 -6px 24px rgba(33,27,22,.13);
	padding:.6rem max(.9rem,env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom)) max(.9rem,env(safe-area-inset-right));
	transform:translateY(115%);transition:transform .22s ease;
}
.fl-buybar.is-on{transform:translateY(0)}
.fl-buybar[hidden]{display:none}
.fl-buybar-in{display:flex;align-items:center;gap:.85rem;max-width:60rem;margin:0 auto}
.fl-buybar-info{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;line-height:1.2}
.fl-buybar-name{
	font-weight:600;font-size:.88rem;color:var(--sw-ink,#211B16);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fl-buybar-price{font-size:.95rem;font-weight:700;color:var(--sw-ink,#211B16)}
.fl-buybar-price del{opacity:.5;font-weight:500;margin-left:.3rem}
.fl-buybar-btn{
	flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
	padding:.8rem 1.5rem;background:var(--sw-ink,#211B16);color:#fff;
	font:600 1rem/1 var(--sw-font-display,inherit);
}
.fl-buybar-btn:active{transform:translateY(1px)}

@media (min-width:900px){ .fl-buybar{display:none} }
@media (prefers-reduced-motion:reduce){
	.fl-buybar{transition:none}
	.fl-buynow{transition:none}
}


/* ── Reasignal på produktsidan ───────────────────────────────────────────
   Samma språk som startsidan: priset i rött, rörelsen på brickan. */
.kp-pdp .kp-pdp-now{color:var(--sw-teal-d,#DE4229)}
.kp-pdp .kp-pdp-was{font-weight:500}

.kp-pdp .kp-pdp-flash{animation:flBadgePulse 2.6s ease-in-out infinite}
@keyframes flBadgePulse{
	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){.kp-pdp .kp-pdp-flash{animation:none}}

/* Besparingen ska synas som en vinst, inte som brödtext. */
.kp-multibuy-save{
	display:inline-block;margin-left:.3rem;padding:.1rem .4rem;border-radius:999px;
	background:rgba(92,138,92,.15);color:#3F6B3F;
	font:700 .78rem/1.35 Inter,system-ui,sans-serif;white-space:nowrap;
}


/* ── Kampanjraden överst ─────────────────────────────────────────────────
   Låg den tidigare hopklämd i mitten med ellips medan bredden stod tom.
   Nu en riktig rad: erbjudandet som fylld bricka, klockan intill. */
.sw-offerbar--sale .sw-offerbar-in{
	display:flex;align-items:center;justify-content:center;
	gap:.45rem .75rem;flex-wrap:wrap;
	max-width:1180px;margin:0 auto;
}
.sw-offerbar.sw-offerbar--sale strong{
	font:800 .82rem/1 "Poppins","Segoe UI",system-ui,sans-serif;
	letter-spacing:.16em;text-transform:uppercase;color:var(--sw-navy,#211B16);
}
.sw-offerbar--sale .sw-offerbar-deal{
	background:var(--sw-navy,#211B16);color:#fff;
	padding:.24rem .6rem;border-radius:999px;border-bottom:0;
	font:800 .8rem/1 Inter,system-ui,sans-serif;letter-spacing:.01em;
}
.sw-offerbar--sale .sw-offerbar-cd{
	color:var(--sw-navy,#211B16);font:700 .82rem/1 Inter,system-ui,sans-serif;
	font-variant-numeric:tabular-nums;margin-left:0;
}
.sw-offerbar--sale .sw-offerbar-cd::before{
	content:"ends in ";font-weight:600;opacity:.7;
	text-transform:uppercase;letter-spacing:.09em;font-size:.86em;
}
.sw-offerbar--sale .sw-ob-ship{
	color:rgba(33,27,22,.72);font:500 .8rem/1 Inter,system-ui,sans-serif;
}
.sw-offerbar--sale .sw-offerbar-dot{margin-right:0}

/* Den gamla mobilregeln klämde ihop raden till en ellips – bredden finns,
   använd den. Frakt/retur får stryka på foten först när det blir trångt. */
@media (max-width:900px){
	.sw-offerbar--sale .sw-ob-ship{display:none}
}
/* På telefon ska raden rymmas på EN rad – annars äter den av första skärmen.
   Typografin krymps precis så mycket som krävs, inte mer. */
@media (max-width:600px){
	.sw-offerbar--sale{font-size:.78rem;padding:.55rem .55rem}
	.sw-offerbar--sale .sw-offerbar-txt{white-space:normal;overflow:visible;text-overflow:clip}
	.sw-offerbar--sale .sw-offerbar-in{gap:.3rem .45rem;flex-wrap:nowrap}
	.sw-offerbar.sw-offerbar--sale strong{font-size:.7rem;letter-spacing:.09em}
	.sw-offerbar--sale .sw-offerbar-deal{font-size:.7rem;padding:.2rem .45rem}
	.sw-offerbar--sale .sw-offerbar-cd{font-size:.7rem}
	.sw-offerbar--sale .sw-offerbar-cd::before{letter-spacing:.05em}
}
@media (max-width:360px){
	.sw-offerbar--sale .sw-offerbar-cd::before{content:""}
}


/* ── Bästsäljarna under hjälten ──────────────────────────────────────────
   Två per rad även på telefon: båda syns i samma skärm i stället för att
   kräva två skärmars skrollande innan man når knappen till sortimentet. */
@media (max-width:720px){
	.fl-stars-grid{grid-template-columns:1fr 1fr;gap:.7rem}
	.fl-star-name{font-size:1rem;line-height:1.25}
	.fl-star .fl-star-hook{
		font-size:.8rem;line-height:1.35;
		display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
	}
	/* Knapptexten får inte brytas till två rader – då ser kortet slarvigt ut.
	   Knappen ligger i kortets fot så de två korten linjerar med varandra
	   även när namnen är olika långa. */
	.fl-stars-grid .fl-star{display:flex;flex-direction:column}
	/* Kortets kropp måste fylla resten av kortet, annars har knappen inget
	   utrymme att tryckas ner i och korten linjerar inte. */
	.fl-stars-grid .fl-star-body{flex:1 1 auto}
	/* WooCommerce lindar loopknappen i ett <p> – det är DEN som ska tryckas
	   ner i kortets fot, annars hänger knapparna på olika höjd. */
	.fl-stars-grid .fl-star-body > p:last-of-type{margin-top:auto;margin-bottom:0}
	.fl-stars-grid .fl-star .button,
	.fl-stars-grid .fl-star .add_to_cart_button{
		padding:.7rem .5rem;font-size:.86rem;white-space:nowrap;
		display:block;width:100%;align-self:stretch;margin-top:auto;
	}
	.fl-star-price,.fl-star .price{font-size:1rem}
}
@media (max-width:360px){
	.fl-stars-grid{gap:.55rem}
	.fl-star-name{font-size:.95rem}
}