/* Nikotinpåsar - produktkort: styrke-badge, märke/smak, kvantitetsrabatt */

/* Bredare innehållsyta på just produktsidan (inspirerad av pouchdaddy.eu,
   som använder betydligt mer av skärmens bredd än temats standard-container
   på 1222px, --wd-container-w). Scopat till .single-product-page (Woodmarts
   egen klass på produkt-wrappern, satt via wc_product_class() i
   content-single-product.php) så bara PRODUKTSIDANS behållare breddas -
   butiksrutnätet, startsidan m.m. behåller temats vanliga bredd. Träffar
   alla .container-element inuti (bild+köp-området, flikarna, relaterade
   produkter), eftersom de annars fortfarande hade begränsats av temats
   globala --wd-container-w även om just en av dem breddades. */
.single-product-page .container {
	max-width: 1400px;
}

/* Förskjuter bild/köp-uppdelningen på produktsidan till exakt 44/56.
   Woodmarts eget system delar upp i heltal av en 12-kolumners grid (via
   grid-column: auto/span N), vilket bara ger "runda" kvoter som 5/7
   (41.7/58.3) - för en EXAKT 44/56 sätter vi istället grid-template-columns
   direkt med fr-enheter (11fr/14fr = 44/56), som redan räknar bort mellanrummet
   (gap) automatiskt. Barnen får då bara span 1 var av dessa två kolumner
   istället för att spänna över ett visst antal av de ursprungliga 12.
   !important behövs eftersom Woodmart sätter sina egna värden inline via
   style="..." i content-single-product.php - en !important-regel härifrån
   vinner ändå, eftersom !important-deklarationer alltid slår icke-!important,
   oavsett om motparten är inline eller ej.

   MÅSTE vara scopat till samma brytpunkt (769px) som Woodmarts eget
   --wd-col-sm:12 (satt inline i content-single-product.php, se
   $product_images_style/$product_summary_style) - annars vinner vår
   !important-regel över Woodmarts fallback-kedja för --wd-col-xs/-sm
   ÄVEN på mobil, och bild/köp-kolumnerna staplas aldrig till full bredd
   utan trycks ihop sida vid sida (bekräftat på riktig telefon - såg helt
   trasigt/hoptryckt ut). Utan denna media query är kommentarens påstående
   "gäller bara desktop" alltså INTE sant - !important-regler bryr sig
   inte om viewport-bredd om inget annat säger det. */
@media ( min-width: 769px ) {
	.single-product-page .product-image-summary-inner {
		grid-template-columns: 11fr 14fr !important;
	}

	.single-product-page .product-images,
	.single-product-page .summary.entry-summary {
		grid-column: span 1 !important;
	}
}

/* .product-images var tidigare SJÄLVA den kvadratiska bildramen. Nu när
   Description/About brand-flikarna (np_render_tabs_under_image() i
   inc/single-product-tier-pricing.php) flyttats hit och ska visas direkt
   UNDER bilden - men fortfarande i samma kolumn - är .product-images bara
   en enkel kolumn-container som rymmer två staplade delar: den kvadratiska
   ramen (.np-product-image-frame) och flikarna. gap istället för margin på
   flikarna, av samma anledning som på .np-tier-list (se längre ner) -
   enklare att underhålla och påverkar inte ramens egen höjd.

   min-width/min-height: 0 - .product-images är ett grid-item i Woodmarts
   "fr"-baserade grid (.product-image-summary-inner, se 44/56-regeln nedan).
   Grid-/flex-item har annars ett implicit min-width/min-height:auto som
   normalt räknas ut från INNEHÅLLETS egna storleksbehov - men med
   .np-product-image-frames aspect-ratio:1/1 två nivåer ned uppstod ett
   cirkulärt beroende (bredden ska komma från grid-spåret, men
   min-content-beräkningen ville i sin tur känna till bredden för att
   räkna ut aspect-ratio-höjden) som fick Chromium att klampa till sitt
   interna max-layout-värde (~33 554 432px, syns direkt som en trasig,
   jättestor bildruta) - EXAKT samma symptom/gräns som den tidigare
   33 554 432px-buggen i det här projektet, fast med en annan bakomliggande
   orsak denna gång. Löst genom att explicit nolla min-width/-height,
   vilket är den vedertagna fixen för den här klassen av grid+aspect-ratio-bugg. */
.product-images {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	min-height: 0;
}

/* Ljusgrå "ram"-ruta runt själva produktbilden, inspirerad av
   pouchdaddy.eu - bilden centreras med luft runt om istället för att
   fylla ut hela rutan kant i kant. */
.product-images .np-product-image-frame {
	/* Fast, förutsägbar ram-storlek (kvadratisk) oavsett vilken proportion
	   just den uppladdade bildfilen råkar ha - annars varierar rutans höjd
	   produkt för produkt beroende på bildens egna mått. */
	aspect-ratio: 1 / 1;
	min-width: 0;
	min-height: 0;
	position: relative;
	background: #f2f1ee;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	align-items: stretch; /* låter galleriet fylla hela den fasta höjden, se object-fit/-position nedan för själva placeringen */
	justify-content: center;
	/* Klipper säkert bort ev. överskjutande zoom från --np-thumb-scale
	   nedan (samma säkerhetsprincip som .np-product-thumb i product-card.css). */
	overflow: hidden;
}

/* Kedjan av Woodmarts egna wrapper-divs mellan bildramen och den faktiska
   <img> (karusell-uppmärkning från Swiper-biblioteket) måste få height:100%
   i varje steg för att en höjd överhuvudtaget ska nå ner till bilden - CSS
   ärver inte procent-höjder automatiskt genom flera nivåer.
   .wd-carousel-container/-inner saknar egen höjd i Woodmarts CSS (bara
   .wd-carousel-wrap/-item har det redan där, se längre ner), vilket bröt
   hela kedjan så fort en produkt fick FLERA bilder och karusellen
   faktiskt aktiverades.

   OBS: sätter MEDVETET inte display:block på .wd-carousel-wrap/-item här
   (de hanteras separat nedan) - Woodmarts egen CSS ger dem display:flex
   respektive flex-basis-baserad bredd för att lägga bilderna sida vid
   sida och låta karusell-JS:en (Swiper) skjuta dem i sidled. Att tvinga
   dem till display:block (vilket en tidigare version av den här regeln
   gjorde) fick alla bilder att i stället staplas UNDER varandra - bild 2
   fanns kvar i DOM:en och prick-indikatorn uppdaterades korrekt, men
   bilden själv hamnade utanför den synliga (overflow: hidden) rutan.

   VIKTIGT: ".np-product-image-frame > .woocommerce-product-gallery" (INTE
   en bred "> *") - WordPress/Woodmart lägger ibland till osynliga
   <link>-taggar (preload-hintar) som DIREKTA barn till samma div som
   själva galleri-diven. Med en bred "> *"-regel fick även DESSA
   "width:100%; height:100%" och blev därmed egna, riktiga flex-item som
   konkurrerade om utrymmet med galleriet - tre likvärdiga flex-item i en
   rad med bara plats för ett fick alla att krympa till en tredjedels
   bredd (den "3x för smal bild direkt vid sidladdning"-buggen). Detta var
   grundorsaken hela tiden, inte en JS-initieringsfördröjning - bilden kan
   visas i rätt storlek OMEDELBART utan att behöva vänta in Swiper alls. */
.product-images .np-product-image-frame > .woocommerce-product-gallery,
.product-images .wd-carousel-container,
.product-images .wd-carousel-inner,
.product-images .woocommerce-product-gallery__wrapper,
.product-images .woocommerce-product-gallery__image,
.product-images .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.product-images .wd-carousel-wrap,
.product-images .wd-carousel-item {
	height: 100%;
}

/* Woodmarts "Click to enlarge"-knapp (.product-additional-galleries) hamnar
   normalt 24px (produktbildens .product-images-padding) + ytterligare 15px
   (knappens egen padding) in från vänsterkanten = 39px, medan wishlist-
   knappen i det övre vänstra hörnet (assets/css/wishlist-button.css) ligger
   på 16px. Flyttar bara det horisontella läget (39px -> 16px, en 23px-
   justering) så de två knapparna linjerar - rör inget vertikalt/bottom. */
.product-images .product-additional-galleries {
	left: -23px;
}

/* Normaliserar hur stort motivet (burken) upplevs oavsett hur mycket
   vit/transparent marginal originalfilen har - samma zoom-faktor och
   samma bakomliggande analys (inc/product-thumb-scale.php) som redan
   används på produktkorten i butiksrutnätet, se
   assets/css/product-card.css. --np-thumb-scale sätts per produkt via en
   liten <style>-block i <head> (np_output_single_product_image_scale_style()
   i inc/single-product-tier-pricing.php) eftersom Woodmarts egen
   galleri-mall inte enkelt går att lägga en inline-stil på utan att
   skriva om hela mallen.

   object-fit: contain (+ height:100% ovan) skalar alltid bilden så den
   ryms HELT inom den fasta ramen utan att klippas eller sträckas snett -
   till skillnad från width:100%/height:auto (som kunde bli olika hög
   produkt för produkt) blir resultatet nu identiskt inramat oavsett
   originalfilens upplösning/proportion. object-position: top förankrar
   den mot ramens överkant. */
.product-images .woocommerce-product-gallery__wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
	transform: scale( var( --np-thumb-scale, 1 ) );
	transform-origin: top center;
	/* Mjuk, formföljande skugga under motivet (följer bildens alfa-kanal,
	   inte en fyrkantig box) - kräver en transparent bildfil för att synas
	   fint mot den runda burken istället för mot en vit fyrkant. */
	filter: drop-shadow( 0 18px 14px rgba( 0, 0, 0, 0.55 ) );
}

@media ( max-width: 768px ) {
	.product-images .np-product-image-frame {
		padding: 14px;
		border-radius: 12px;
	}
}

/* Mobilkopia av brödsmulor/nav (se np_render_mobile_breadcrumb_nav() i
   inc/single-product-tier-pricing.php) - dold på desktop, där originalet
   (högst upp i .summary-inner) redan ligger i linje med bildens överkant.
   Under 769px byter de plats: originalet döljs, kopian (överst i
   bild-kolumnen, alltså överst på HELA mobilsidan) visas istället. */
.np-mobile-breadcrumb-nav {
	display: none;
}

@media ( max-width: 768px ) {
	.np-mobile-breadcrumb-nav {
		display: block;
		margin-bottom: 16px;
	}

	.summary-inner > .single-breadcrumbs-wrapper {
		display: none;
	}
}

/* Varumärkes-logotypen (Woodmarts .wd-product-brands, se
   np_render_brand_and_rating_stack()) flyter för trångt ihop med titeln
   på smala skärmar - döljs helt på mobil (visas inte någon annanstans på
   sidan istället). Stjärnbetyget i samma stack rörs inte - bara
   logotyp-BILDEN. */
@media ( max-width: 768px ) {
	.np-brand-rating-stack .wd-product-brands {
		display: none;
	}
}

/* Stjärnbetyg + varumärkes-logotyp staplade, betyget överst - se
   np_render_brand_and_rating_stack() i inc/single-product-tier-pricing.php.
   float:right bevarar samma beteende som Woodmarts egen ".wd-product-brands"
   hade själv (titel/pris flyter runt den till vänster) - display:flex styr
   bara ORDNINGEN på de två sakerna INUTI den här rutan. Fungerar på alla
   skärmstorlekar utan extra media queries eftersom både betyget och
   logotypen (Woodmarts egen ".wd-product-brands", oförändrad) redan är
   responsiva var för sig. */
.np-brand-rating-stack {
	float: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin-left: 10px;
	max-width: 100%;
}

.np-brand-rating-stack .woocommerce-product-rating {
	margin: 0;
}

/* Kompakta attribut-chips på produktsidan (Brand/Flavour/Strength/Format) -
   ersätter Woodmarts nativa attribut-tabell, se
   np_render_single_product_attribute_chips() i inc/single-product-tier-pricing.php. */
.np-attribute-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
}

.np-attribute-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	background: #f5f5f5;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #333;
}

.np-attribute-chip-icon {
	font-size: 14px;
	line-height: 1;
}

.np-product-meta {
	margin: 2px 0 8px;
}

.np-flavor {
	font-size: 13px;
	color: #666;
	margin: 0 0 2px;
}

.np-strength-line {
	font-size: 13px;
	font-weight: 700;
	color: #111;
	margin: 0;
}

.np-tier-pricing {
	margin-top: 10px;
}

.np-tier-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.np-tier {
	flex: 1 1 auto;
	min-width: 56px;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 4px;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.3;
}

.np-tier-qty {
	display: block;
	font-weight: 600;
}

.np-tier-discount {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	color: #d32f2f;
}

.np-tier.active {
	border-color: #4a4a4a;
	background: #4a4a4a;
	color: #fff;
}

.np-tier.active .np-tier-discount {
	color: #ff8a80;
}

.np-tier-summary {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 10px;
	font-size: 14px;
}

.np-price-per-unit-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.np-unit-price {
	color: #111;
}

.np-summary-discount {
	font-size: 12px;
	font-weight: 600;
	color: #d32f2f;
}

.np-price-total-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
}

.np-original-total-price {
	font-size: 13px;
	color: #999;
	text-decoration: line-through;
}

.np-total-price {
	font-size: 18px;
	font-weight: 700;
	color: #111;
}

.np-add-to-cart-form {
	display: flex;
	gap: 6px;
	align-items: stretch;
}

/* Antalsfält med -/+ -knappar i stället för en bar <input type="number">
   (webbläsarens inbyggda pilar döljs nedan, ersätts helt av knapparna).
   Helt rundad ("pill") form, samma stil som köp-knappen intill - 999px
   är ett medvetet överdrivet värde som alltid ger max rundning oavsett
   rutans faktiska höjd, så den inte behöver räknas ut/underhållas manuellt.
   overflow:hidden gör att knapparna INUTI (som själva är fyrkantiga) klipps
   mot samma rundade form i hörnen automatiskt. */
.np-qty-stepper {
	display: flex;
	align-items: stretch;
	/* space-between så att siffran hamnar centrerad och -/+ mot var sin kant
	   när rutan sträcks ut till full bredd (produktkortet i griddet - se
	   kommentaren vid .np-tier-pricing--single .np-qty-stepper nedan för
	   varför Woodmarts "form.cart > *"-regel gör just den bred). Utan detta
	   klumpar de tre fast-breda barnen ihop sig i vänsterkanten. */
	justify-content: space-between;
	border: 1px solid #ddd;
	border-radius: 999px !important;
	overflow: hidden;
	background: #fff;
}

.np-qty-btn {
	flex: 0 0 auto;
	width: 34px;
	border: none;
	background: transparent;
	color: #333;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.np-qty-btn:hover {
	background: #f5f5f5;
	color: var( --wd-primary-color, #8a1f1f );
}

.np-qty-stepper .np-qty-input {
	width: 36px;
	border: none;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	border-radius: 0 !important;
	background: transparent;
}

.np-qty-input {
	text-align: center;
	-moz-appearance: textfield;
}

.np-qty-input::-webkit-outer-spin-button,
.np-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.np-add-to-cart-form .single_add_to_cart_button {
	position: relative;
	flex: 1 1 auto; /* fyller ut resten av raden, samma bredd som rutan ovanför */
	border-radius: 999px !important; /* matcha den rundade "pill"-formen på antalsfältet intill */
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Mörkare nyans (istället för en hårdkodad hex) via filter:brightness() -
   fungerar oavsett vilken bakgrundsfärg Woodmart faktiskt sätter på
   .button.alt, ingen egen mörk variant av --wd-primary-color att hålla i
   synk om den färgen ändras i Customizer. */
.np-add-to-cart-form .single_add_to_cart_button:hover {
	filter: brightness( 0.92 );
	transform: translateY( -1px );
	box-shadow: 0 6px 14px rgba( 0, 0, 0, 0.18 );
}

/* position:absolute (alltid, inte bara i dolt läge) så ikonen aldrig
   reserverar plats i knappens textrad - annars räknas den in i
   centreringen även när den är osynlig (opacity:0 tar fortfarande upp
   bredd i flödet) och knapptexten hamnar synligt vänsterförskjuten om
   knappens faktiska mitt. */
.np-add-to-cart-feedback {
	position: absolute;
	top: 50%;
	right: 16px;
	opacity: 0;
	transform: translateY( -50% ) scale( 0.6 );
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.np-add-to-cart-feedback.visible {
	opacity: 1;
	transform: translateY( -50% ) scale( 1 );
}

/* position:absolute medan den är dold (istället för bara opacity/visibility)
   så att den inte reserverar sin egen höjd+margin i det NORMALA (dolda)
   fallet - annars sköts rutans nedre kant (border-bottom, se
   .np-tier-pricing--single) automatiskt ner av en osynlig länk ~27px varje
   gång, vilket gjorde den kantlinjen svår att linjera mot t.ex. bildens
   ram i vänsterkolumnen. Går tillbaka till normalt flöde (position:static)
   bara när den faktiskt visas (efter ett lyckat "Add to cart"). */
.np-view-cart-link {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 8px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	color: #111;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease;
}

.np-view-cart-link.visible {
	position: static;
	opacity: 1;
	visibility: visible;
}

/* "Buy it now" - bara på produktsidans (större) variant, se kommentaren
   på .np-tier-pricing--single nedan för varför storleksvarianten finns. */
.np-tier-pricing--single .np-buy-now-button {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 14px;
	background: #fff;
	border: 1px solid var( --wd-primary-color, #8a1f1f );
	border-radius: 999px;
	color: var( --wd-primary-color, #8a1f1f );
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.np-tier-pricing--single .np-buy-now-button:hover {
	background: var( --wd-primary-color, #8a1f1f );
	color: #fff;
	transform: translateY( -1px );
	box-shadow: 0 6px 14px rgba( 138, 31, 31, 0.25 );
}

.np-tier-pricing--single .np-buy-now-button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Lagerstatus-pillen (wc_get_stock_html() ovan lämnar den redan i en
   <p class="stock in-stock/out-of-stock/available-on-backorder">) -
   färgen styrs av vilken av de klasserna WooCommerce satt, så en riktig
   "Slut i lager"/restorder-status ser annorlunda ut än "I lager". */
.np-stock-status {
	margin: 12px 0 0;
	text-align: center;
}

.np-stock-status .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 18px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
}

/* Woodmart-temat har en egen ikon-regel för just "wd-style-default.in-stock"
   (en bock-glyf från temats ikonfont, i sajtens röda accentfärg - se
   p.stock.wd-style-default.in-stock:before i temats style.css) som annars
   krockar med vår egen prick här - samma pseudo-element (::before) kan
   bara visa EN av dem. Selektorn nedan matchar samma specificitet
   (element+3 klasser) så vår version alltid vinner istället. */
.np-stock-status p.stock.wd-style-default.in-stock::before,
.np-stock-status .stock::before {
	content: '';
	font-family: inherit;
	margin-inline-end: 0;
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.np-stock-status .stock.in-stock {
	background: #eaf6e2;
	color: #386a20;
}

.np-stock-status .stock.in-stock::before {
	background: #386a20;
	/* Svag ring runt pricken för lite 3D-djup, se bilden. */
	box-shadow: 0 0 0 3px rgba( 56, 106, 32, 0.2 );
}

.np-stock-status .stock.out-of-stock {
	background: #fbe9e9;
	color: #a12626;
}

.np-stock-status .stock.out-of-stock::before {
	background: #a12626;
	box-shadow: 0 0 0 3px rgba( 161, 38, 38, 0.2 );
}

.np-stock-status .stock.available-on-backorder {
	background: #fdf3dc;
	color: #8a6d1f;
}

.np-stock-status .stock.available-on-backorder::before {
	background: #8a6d1f;
	box-shadow: 0 0 0 3px rgba( 138, 109, 31, 0.2 );
}

/* Större variant på själva produktsidan ("Bundle & Save") - mer yta att
   jobba med där än i det trånga produktkortet, så rutorna får vara
   rejälare och tydligare. Samma klasser/JS i övrigt, bara storleken
   skiljer sig via denna modifier-klass. */
.np-tier-pricing--single {
	position: relative; /* positioneringskontext åt .np-view-cart-link ovan medan den är dold */
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	/* Mindre än padding-top - se till att border-bottom hamnar i linje med
	   toppen av Description-boxen i vänsterkolumnen (bildens ram + flikarna,
	   se .product-images i denna fil). Rent kosmetiskt vald mot just denna
	   produkts innehållsmängd (antal bundle-nivåer m.m.) - exakt linjering
	   mellan de två fristående kolumnerna kan inte garanteras för alla
	   produkter, men ger rätt känsla i normalfallet. */
	padding-bottom: 14px;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}

.np-tier-pricing-label {
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #666;
	text-align: center;
}

.np-tier-pricing--single .np-tier-list {
	gap: 10px;
	margin-bottom: 16px;
}

/* Woodmart-temats egen globala regel för "form.cart" (alla formulär med den
   klassen, oavsett tema) sätter "form.cart > * { flex: 1 1 100% }" och
   undantar bara sina EGNA klasser (.single_add_to_cart_button/.wd-buy-now-btn/
   .quantity) från det - vår .np-qty-stepper täcks inte av det undantaget,
   så utan denna rad ärver den 100%-bredden och radbryts till en egen rad
   ovanför köp-knappen istället för att ligga bredvid den. Görs bara för
   produktsidans (större) variant - produktkortet i griddet är redan så
   smalt att en egen rad för antalsfältet är rimligt där.  */
.np-tier-pricing--single .np-qty-stepper {
	flex: 0 0 auto;
}

.np-tier-pricing--single .np-tier {
	min-width: 96px;
	padding: 14px 10px;
	border-radius: 6px;
	font-size: 14px;
	/* Fast höjd oavsett rutans läge/rad-inslag - garanterar att t.ex. sista
	   rutan (som kan hamna ensam på en ny flex-rad vid radbrytning, och då
	   annars stretchas mot bara sig själv istället för mot systerrutorna)
	   alltid blir exakt lika stor som de andra, oavsett badge/aktivt-tillstånd. */
	height: 74px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.np-tier-pricing--single .np-tier-qty {
	font-size: 15px;
}

.np-tier-pricing--single .np-tier-discount {
	margin-top: 4px;
	font-size: 12px;
}

.np-tier-pricing--single .np-tier-summary {
	font-size: 16px;
}

.np-tier-pricing--single .np-total-price {
	font-size: 22px;
}

.np-tier-pricing--single .np-add-to-cart-form .single_add_to_cart_button {
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 15px;
}

.np-tier-pricing--single .np-qty-btn {
	width: 40px;
	font-size: 18px;
}

.np-tier-pricing--single .np-qty-stepper .np-qty-input {
	width: 48px;
	font-size: 15px;
}

/* Utrymme ovanför HELA raden åt badgarna nedan, som medvetet får sticka upp
   ovanför sin rutas kant (se .np-tier-badge) - satt på listan, inte på den
   enskilda rutan, så att np-tier--has-badge inte krymper i höjd jämfört med
   de andra rutorna (align-items: stretch skulle annars göra rutan kortare
   om den fick egen margin-top). */
.np-tier-pricing--single .np-tier-list {
	margin-top: 14px;
}

.np-tier-pricing--single .np-tier {
	position: relative;
	overflow: visible;
}

.np-tier-badge {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX( -50% );
	background: var( --wd-primary-color, #d32f2f );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.2px;
	white-space: nowrap;
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.18 );
}