/*
New CSS upgrades for better responsive design
*/

.container {
	width: 100% !important;
    max-width: 1200px !important;
}

.container, .header .top {
	width: 100% !important;
	max-width: 1200px !important;
}

.cart_counter {
    display: inline-block;
    position: absolute;
    left: -2px;
    top: 0px;
    background: #000;
    color: #fff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    opacity: 0.8;
    text-indent: 0;
    font-size: 11px;
}

/* fix width always 100% */
.product-grid {
	width: 100%;
}


/* fit more text onto category page product summaries */
.grid-item .bottom .description {
	padding: 5px;
}

/* product grid */
.column-left + .column-center .product-grid .grid-item,
.column-right + .column-center .product-grid .grid-item,
.column-center .product-grid .grid-item
 {
	width: 32%; /* must NOT have !important on it, collides with .aw-item */
}

/* simon filters stuff */
li.filter_group {
	width: 33.3% !important;
}
div.box.simonfilters .add_filter {
	font-family: 'futura-pt';
}
.product-filter{
	border-bottom: 2px solid #333;
}
.content-inside .simonfilters {
	border-bottom: 2px solid #333 !important;
}
div.box.simonfilters .clear_filters_global, div.box.simonfilters .clear_filters_local {
	z-index: 1; /* fix so that clear filter button is above title */
}


/* header bar */
.my_account{
	width: 320px !important;
}



/*
.cart .actions .button {
	box-shadow: unset;
}
*/

/* cart page */
.cart-page>form {
	width: 100% !important;
}
.left_cart_page {
	float: left;
}
.right_cart_page {float: right;}



/* nicer doofinder classic */
.df-classic {
	width: 100% !important;
	left: 0 !important;
    font-family: inherit !important;
}




/* footer stuff */
.info_box .title {
	border-bottom: 0.7px dotted #7595ff !important;
}
/* Scoped to desktop only. Below 1023px the 2x2 mobile grid in
   wossy_stylesheet.css controls box widths via its own
   max-width:1022px media query - these !important widths used to
   fire at all viewports and broke that grid between 601-1022px. */
@media screen and (min-width: 1023px) {
	.about_us_box {
		width: calc(100% - 30px) !important;
	}
	.contact_us_box, .my_account_box, .extras_box {
		width: calc(33% - 20px) !important;
	}
}

/* The former @media (max-width:600px) override became redundant
   once the rules above only apply at >=1023px - the 2x2 mobile
   grid now governs <=1022px. Leaving the old block commented
   just above here for reference. */

@media screen and (max-width: 1023px) and (min-width: 767px) {
	.column-left + .column-center .product-grid .grid-item,
	.column-right + .column-center .product-grid .grid-item,
	.column-center .product-grid .grid-item {
		width: calc(50% - 8px); /* must NOT have !important on it, collides with .aw-item */
	}

}


@media screen and (max-width:766px) {

	#simplecheckout_button_confirm {
	    width: 100%;
	    text-align: center;
	    align-content: center;
	    justify-self: center;
	    justify-content: center;
	}

	.container, .header .top {
		width: 100% !important;
	}

	h1{
	    font-size: 15px !important;
	    margin: 0 -5px !important;
	}
	.useo_h2 { /* sub titeln */
		font-size: 13px !important;
	}
	h1 a, .title_gender{
	    font-size: 13px !important;
	}

	.note_img {
		max-height: 64px !important;
		max-width: 64px !important;
		height: 64px !important;
		width: 64px !important;
	}
	.note_box {
	    width: 74px !important;
	    max-width: 57px !important;
	}
	.note_text {
		font-size: 11px;
	}
	.product-info .price {
		padding: 5px;
	    overflow: visible;
	    position: fixed;
	    bottom: 0px;
	    left: 0px;
	    width: 100%;
	    z-Index: 99999;
	    background-color: #ffffffb3 !important;
	    backdrop-filter: blur(3px);
	}
	.product-info .price .price-grid { gap:8px; }
	.product-info .price .price-new { font-size:22px; }

	.NWA_popover {
	  position: fixed !important;
	  max-width: 99vw !important;
	  bottom: 97px !important;
	  left: -10px !important;
	  right: 0px !important;
	  top: auto !important;
	}

	.NWA_popover.bottom .arrow {
	    bottom: -11px !important;
	    left: 50%;
	    transform: rotate(180deg);
	    top: auto !important;
	}

	/*
	.column-left + .column-center .product-grid .grid-item,
	.column-right + .column-center .product-grid .grid-item
	*/
	.column-center .product-grid .grid-item	{
		width: calc(50% - 8px); /* must NOT have !important on it, collides with .aw-item */
	}
	.column-left + .column-center .reviews-grid .grid-item,
	.column-right + .column-center .reviews-grid .grid-item,
	.column-center .reviews-grid .grid-item {
		width: 98% !important;
	}

	.column-left {
		width: auto;
		float:none;
	}

	/* header and logo stuff */
	#teh {
		right:10px !important;
		left:initial !important;
	}

	.search {
		/* width: 180px !important; */
		width: calc(100% - 200px) !important;
    	left: 85px !important;
    	top: env(safe-area-inset-top, 0px);
    	position: fixed;
    	margin-left: 0 !important;
    	z-index: 1000;
	}
	#logo-object {
		width: 180px !important;
	}
	#logo-img { /* for rly old browsers that cant handle svg */
		width: 220px !important;
		margin: 60px auto 0px 10px;
	}
	/* END header and logo stuff */

	/*account, cart and search stuff */
	.my_account .content {
		right: 0 !important;
	}


	/* cart page */
	.left_cart_page {
		width:100% !important;
	}
	.right_cart_page {
		width:100% !important;
	}
	.klarna-container {
		margin: 0 -10px !important;
	    float: none !important;
	    max-width: 100%;
	    width: 100%;
	}


	/* footer stuff below */
	.footer .middle .list_box ul li {
		width: 100% !important;
    	display: block !important;
	}

	.banks {
	    width: 100% !important;
	}
	.footer .top .content {
		padding: 15px 5px 10px 5px !important;
	}

}





.price {
    /* font-family: Bariol,Helvetica,Arial,sans-serif; */
 }


 /* ljusare grå färger */

 .grid-item .bottom,
 .grid-item .bottom .info,
 .slick-arrow
 {
 	/* background-color: #ffffff7a !important; */
 }
 .grid-item .bottom .description {
 	background-color: #fff !important;
 }

/* Transitions på buttons */
a,
a:hover,
.bottom .actions .button,
.bottom .actions .button:hover,
#button-cart,
#button-cart:hover,
.big-cerise-button,
.big-cerise-button:hover,
.you_style_button,
.you_style_button:hover,
#simplecheckout_button_confirm,
#simplecheckout_button_confirm:hover,
.pagination .links a,
.pagination .links a:hover {
	transition: all 0.15s; /* color 0.15s, background-color 0.15s, background 0.15s; */
	transition-timing-function: ease-in-out;
}



 /* Fixes i simplechckout */
#total_optional_fee_discount, #total_shipping {
	color: #444;
}
.simplecheckout-cart-total span {
    font-size: 13px !important;
}
#total_total span {
    font-size: 16px !important;
}

.simplecheckout-cart th {
	background-color: #fafafa;
}
.simplecheckout-block-content {
 	border-bottom: none !important;
 }
.simplecheckout-methods-table tr:nth-child(even) td {
    font-weight: 300;
}
.simplecheckout-methods-table tr:nth-child(even):nth-last-child(1n+2) td{
	padding-bottom: 10px !important;
    
}
.simplecheckout-methods-table tr:nth-child(2n+3) td {
    padding-top: 10px;
}

#total_total nobr, #total_total b {
	font-weight: var(--fw600);
}

#total_totaleur span, #total_totaleur b {
    font-weight: var(--fw600);
    color: var(--main-color);
}

#total_sub_total{
	display: none;
}

.simplecheckout-methods-table {
	border-radius: 12px;
	background: #fcfefcb0;
	border: 3px solid #f3f9f6;
	margin: 0 -3px 10px -3px !important;
	padding: 10px;
}
.simplecheckout-block-content {
	padding: 3px !important;
}

.simplecheckout-cart td {
	padding: 15px 3px !important;
}
.simplecheckout-cart th {
	text-transform: uppercase;
	background-color: #fff !important;
}

.simplecheckout-methods-table td.title {
    padding: 5px 0px !important;
}


.striketitle,
#optional-fee-discount .box-heading,
.manufacturer-list .brand-heading,
.simplecheckout-block-heading {
	font-size: 24px !important;
	/* font-family: 'Bariol',Helvetica,Arial,sans-serif !important; */
	font-weight: 300 !important;;
	width: 100% !important;
	background: none !important;
}


/* Line hack below */
.striketitle,
#optional-fee-discount .box-heading,
.manufacturer-list .brand-heading,
.simplecheckout-block-heading {
  display: table;
  white-space: nowrap;
}


.striketitle:before,
.striketitle:after,

#optional-fee-discount .box-heading:before,
#optional-fee-discount .box-heading:after,

.manufacturer-list .brand-heading:before,
.manufacturer-list .brand-heading:after,

.simplecheckout-block-heading:before,
.simplecheckout-block-heading:after {
  border-top: 3px solid #eef5f1;
  content: '';
  display: table-cell;
  position: relative;
  top: 0.7em;
}

.striketitle:before,
#optional-fee-discount .box-heading:before,
.manufacturer-list .brand-heading:before,
.simplecheckout-block-heading:before {
  right: 1.5%;
  width: 5%;
}

.striketitle:after,
#optional-fee-discount .box-heading:after,
.manufacturer-list .brand-heading:after,
.simplecheckout-block-heading:after {
  left: 1.5%;
  width: 95%;
}

/* Option feel/discount addons*/

#optional-fee-discount .box-content {
	display: flex;
	flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
}

#optional-fee-discount label {
    cursor: pointer;
    display: flex;
    padding: 0px;
    gap: 4px !important;
    margin: 6px 0 0 -5px !important;
    font-size: 14px;
    font-weight: 600;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
    justify-content: flex-start;
    align-items: normal !important;
}


#optional-fee-discount .question-block {

    min-width: 200px !important;
    padding: 6px 6px 6px 12px !important;
    background: #fcfefcb0;
    border-radius: 12px;
    border: 3px solid #f3f9f6;
    vertical-align: top;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    /* text-align: center; */
    margin: 0;
    /* align-items: center; */
    /* justify-content: center; */
    line-height: 1.3em;
    width: 24%;
}

.question-block small.checkout-price-pill {
    padding: 2px 7px;
    margin: 0 0 0 auto !important;
    border-radius: 999px;
    background: #dcf1e6;
    white-space: nowrap;
    height: fit-content;
}

.question-block label small.thin {
    font-weight: 400;
    width: calc(100% + 90px);
    display: block;
    margin-left: -37px;
    margin-top: 8px;
}

#optional-fee-discount input[type="checkbox"], #optional-fee-discount input[type="radio"] {
    cursor: pointer;
    margin-right: 2px;
    margin-top: 5px;
    margin-bottom: 11px;
}

#optional-fee-discount input[type="checkbox"] {
    margin: 10px;
    vertical-align: middle;
    margin-right: 8px !important;
    margin-top: 5px !important;
    margin-bottom: 11px !important;
}


.question-block span {
	display: block;
    font-size: clamp(13px, calc(13px + 0.4vw), 16px);
    margin: 5px 0 5px 0;
    font-weight: 600;
}

.question-block small {
	margin: 4px 0;
    font-size: 14px;
}

/* Snyggare checkboxes och radios */

input[type='checkbox'] {
  position: relative;
  cursor: pointer;
  transform: scale(1.8);
  /* left: -.5rem; */
  margin: 0 0.5rem;
  z-index: 2;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  outline: none;
  -moz-appearance: none; -webkit-appearance: none;
}
input[type='checkbox']:before {
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: rotate(-45deg) scale(0, 0);
	-moz-transform: rotate(-45deg) scale(0, 0);
	-ms-transform: rotate(-45deg) scale(0, 0);
	-o-transform: rotate(-45deg) scale(0, 0);
	transform: rotate(-45deg) scale(0, 0);
	content: "";
	position: absolute;
	left: 0.22rem;
	top: 0.2rem;
	z-index: 2;
	width: 0.55rem;
	height: 0.3rem;
	border: 2px solid #16a085;
	border-top-style: none;
	border-right-style: none;
}
input[type='checkbox']:checked:before {
	-webkit-transform: rotate(-45deg) scale(1, 1);
	-moz-transform: rotate(-45deg) scale(1, 1);
	-ms-transform: rotate(-45deg) scale(1, 1);
	-o-transform: rotate(-45deg) scale(1, 1);
	transform: rotate(-45deg) scale(1, 1);
}
input[type='checkbox']:after {
	content: "";
	position: absolute;
	top: -0.1rem;
	left: 0;
	width: 1rem;
	height: 1rem;
	background: #fff;
	border: 2px solid #93d0b0;
	border-radius: 6px;
	cursor: pointer;
}

input[type='radio'] {
	position: relative;
	cursor: pointer;
    left: -.5rem;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    min-width: 15px;
    min-height: 15px;
    outline: none;
    margin: 12px 18px;
	transform: scale(1.7);
    -moz-appearance: none; -webkit-appearance: none;
}


.question-block input[type='radio']{

}

input[type='radio']:before {
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-moz-transition: -moz-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: scale(0, 0);
	-moz-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	transform: scale(0, 0);
	content: "";
	position: absolute;
    top: 0.05rem;
    left: 0.15rem;
    z-index: 2;
    width: 0.7rem;
    height: 0.7rem;
	background: #16a085;
	border-radius: 50%;
}
input[type='radio']:checked:before {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
input[type='radio']:after {
  content: "";
  position: absolute;
  top: -0.2rem;
  left: -0.1rem;
  width: 1.2rem;
  height: 1.2rem;
  background: #fff;
  border: 2px solid #93d0b0;
  border-radius: 50%;
}


input#checkout_customer_main_email:valid, /* simplecheckout */
input#sco-email:valid { /* svea checkout */
    background: #f6fdfd;
}
input#checkout_customer_main_email:invalid, /* simplecheckout */
input#sco-email:invalid { /* svea checkout */
    background: #ffdfdf;
}



/* for 100 wide header */
.header {
	background: #fff;
}
.header .menu {
	/* background: #2b2b2b; */
}
.header .menu > ul {
	margin: 0 auto;
	max-width: 1200px;
}
.header .top {
	max-width: 100vw !important;
}
#top2 {
	max-width: 1200px;
	margin: 0 auto;
}
.header .logo {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}



input:checked + .pulsating_circle {
  border: 20px solid #5ec38e96;
  background: transparent;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 100px;
  width: 100px;
  -webkit-animation: pulse 2s ease-out;
  -moz-animation: pulse 2s ease-out;
  animation: pulse 2s ease-out;
  -webkit-animation-iteration-count: 3;
  -moz-animation-iteration-count: 3;
  animation-iteration-count: 3;
  position: absolute;
  top: -53px;
  left: -44px;
  z-index: 1;
  opacity: 0;
  margin: 1rem;
}

@-moz-keyframes pulse {
 0% {
    -moz-transform: scale(0);
    opacity: 0.0;
 }
5% {
    -moz-transform: scale(0);
    opacity: 0.1;
 }
 40% {
    -moz-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -moz-transform: scale(1);
    opacity: 0.0;
 }
}

@-webkit-keyframes "pulse" {
 0% {
    -webkit-transform: scale(0);
    opacity: 0.0;
 }
 5% {
    -webkit-transform: scale(0);
    opacity: 0.1;
 }
 40% {
    -webkit-transform: scale(0.5);
    opacity: 0.5;
 }
 100% {
    -webkit-transform: scale(1);
    opacity: 0.0;
 }
}

/* ==========================================================================
   Sales-campaign banner (auto-generated by bulk specials submits).
   Single colored stripe, one style for both brand and category scopes.
   Rendered by catalog/view/theme/wossy-dark/template/common/sales_campaign_banner.tpl.
   Lives in this universal stylesheet so the banner is styled on every
   storefront (you.se, dermastore.se, swedishface.se, glamma.*) - per-brand
   *_extras.css files only carry brand-specific palette/typography.
   ========================================================================== */
.sales-campaign-banner {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	flex-wrap: wrap;
	margin: 8px 0 24px;
	padding: 10px 16px;
	background: linear-gradient(90deg, #c8102e 0%, #e23055 100%);
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.35;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	transition: filter 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.sales-campaign-banner:hover,
.sales-campaign-banner:focus {
	filter: brightness(1.06);
	color: #fff !important;
	text-decoration: none !important;
}
.sales-campaign-banner .scb-pct {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.2px;
	white-space: nowrap;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 3px;
}
.sales-campaign-banner .scb-text {
	flex: 1 1 auto;
	min-width: 0;
}
.sales-campaign-banner .scb-text strong {
	font-weight: 700;
}
.sales-campaign-banner .scb-cta {
	margin-left: auto;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0.95;
}
@media (max-width: 600px) {
	.sales-campaign-banner {
		font-size: 13px;
		padding: 8px 12px;
		gap: 8px;
	}
	.sales-campaign-banner .scb-pct {
		font-size: 14px;
	}
	.sales-campaign-banner .scb-cta {
		margin-left: 0;
		flex-basis: 100%;
		text-align: right;
	}
}

/* ==========================================================================
   Clickable product rating block (stars + numeric value + review count).
   Wraps the existing .big-rating-dark span in an <a> that smooth-scrolls
   to the in-page reviews section (#reviews).
   ========================================================================== */
.product-rating-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none !important;
	color: inherit !important;
}
.product-rating-link:hover .product-rating-value,
.product-rating-link:focus .product-rating-value {
	text-decoration: underline;
}
.product-rating-summary {
	font-size: 13px;
	line-height: 1.2;
	color: #555;
	white-space: nowrap;
}
.product-rating-value {
	font-weight: 600;
	color: #222;
}
.product-rating-sep {
	margin: 0 4px;
	color: #aaa;
}
#reviews {
	scroll-margin-top: 80px;
}

/* ==========================================================================
   PDP reassurance-strip icons.
   Item 1 (delivery) reuses the fontello truck glyph (same one the header /
   footer USP strips render via icon-usp-freeship). Items 2-5 are inline
   thin-stroke <svg> elements rendered with currentColor so they inherit
   the surrounding #333 text tone and pop crisply against the cream strip
   background.
   ========================================================================== */
.pdp-reassure-icon--font.icon-pdp-truck:before {
	font-family: 'fontello';
	content: '\e803';
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #333;
}
/* Fontello box glyph for the PDP delivery-urgency strip
   ("Beställ nu för leverans <day>"). Same \E808 used by the
   .icon-usp-express item in the footer USPs, so the PDP and footer
   share visual language. Sized at 18px to match the surrounding
   .pdp-urgency-icon text size and replace the previous box emoji. */
.pdp-urgency-icon--font.icon-pdp-box:before {
	font-family: 'fontello';
	content: '\E808';
	font-size: 18px;
	line-height: 1;
	display: inline-block;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.pdp-reassure-icon--svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #333;
	line-height: 0;
	vertical-align: middle;
}
.pdp-reassure-icon--svg svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	display: block;
}
@media (max-width: 766px) {
	.pdp-reassure-icon--svg { width: 16px; height: 16px; }
	.pdp-reassure-icon--svg svg { width: 14px; height: 14px; }
	.pdp-reassure-icon--font.icon-pdp-truck:before { font-size: 14px; }
}

/* ==========================================================================
   Trust rating link (Prisjakt / Trustpilot on you.se + dermastore.se).
   Same visual language as .product-rating-link: logo + half-star bar +
   "X.Y · count". The half-star is achieved by stacking two ★★★★★ rows
   - a muted base layer at the empty/star color
   - a dark fill layer absolutely positioned, clipped to a percentage width
   so any rating from 0-100% renders crisply with no extra glyphs.
   The fill layer's width is set inline per-instance (e.g. 86%, 88%, 92%).
   Both layers share font-size + letter-spacing so the cropped 5th star
   in the fill layer lines up exactly with the muted base underneath.
   ========================================================================== */
.trust-rating-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none !important;
	color: inherit !important;
	line-height: 1;
}
.trust-rating-link:hover .trust-rating-value,
.trust-rating-link:focus .trust-rating-value {
	text-decoration: underline;
}
.trust-stars {
	position: relative;
	display: inline-block;
	font-size: clamp(11px, 1.8vw, 16px);
	letter-spacing: -1px;
	line-height: 1;
}
.trust-stars__base,
.trust-stars__fill {
	display: inline-block;
	white-space: nowrap;
}
.trust-stars__base {
	color: var(--star-color-bright);
	opacity: 0.7;
}
.trust-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--star-color-dark);
}
.trust-rating-summary {
	font-size: 12px;
	line-height: 1.2;
	color: #555;
	white-space: nowrap;
}
.trust-rating-value {
	font-weight: 600;
	color: #222;
}
.trust-rating-sep {
	margin: 0 3px;
	color: #aaa;
}
.trust-rating-count {
	color: #555;
}
@media (max-width: 766px) {
	.trust-rating-link { gap: 4px; }
	.trust-rating-summary { font-size: 11px; }
}

/* Compact inline variant for the desktop #header_trustmarks strip.
   Lives next to Trygg E-handel + the second rating in a horizontal one-liner
   absolutely positioned at the top of the page. Tightens spacing and font
   sizes so logo + stars + value + count for both Prisjakt and Trustpilot
   fit comfortably without wrapping. The whole strip is hidden under 767px
   by an existing rule in style_responsive.css, so no mobile sizing is
   needed here. */
.trust-rating-link--header {
	gap: 6px;
	margin: 0 10px;
	vertical-align: middle;
	white-space: nowrap;
}
/* Lock every flex child to its intrinsic size so the logo + stars + value/count
   never compress on top of each other when the strip is tight. */
.trust-rating-link--header > * {
	flex: 0 0 auto;
}
.trust-rating-link--header img {
	display: block;
}
.trust-rating-link--header .trust-stars {
	font-size: 13px;
	letter-spacing: -1px;
}
.trust-rating-link--header .trust-rating-summary {
	font-size: 11px;
}
.trust-rating-link--header .trust-rating-sep {
	margin: 0 2px;
}
/* Each section in #header_trustmarks (Trygg E-handel / Prisjakt / Trustpilot)
   is a separate inline-flex group so its internal pieces stay aligned and
   nothing collides with the next section. vertical-align:middle keeps the
   three sibling sections themselves visually centered against each other,
   instead of falling back to baseline alignment which makes the
   Trygg-eHandel badge sit higher than the half-star bars next to it. */
#head_trygg_ehandel,
#header_trustpilot {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	vertical-align: middle;
}

/* Bulletproof outer layout for the header trust strip.
   The previous fix made each section inline-flex, but the three siblings
   still relied on inline whitespace + text-align:center + asymmetric
   margins (Prisjakt 10px each side; Trustpilot wrapper 10px + inner
   anchor 10px = 20px effective; Trygg-eHandel only the inline
   margin on its <img>). On narrower desktop widths the Prisjakt
   "4.4 · 730+" summary visually drifted under the Trustpilot logotype.
   Convert the parent itself into a real flex row so the three sections
   are guaranteed to sit on one line with a fixed 24px gap between them.
   The existing rule in wossy_stylesheet.css still owns
   position:absolute / left:0 / top:10px / width:100% / min-width:500px;
   we only override display + spacing here. */
#header_trustmarks {
	display: flex !important;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
}
/* Now that gap owns inter-section spacing, neutralise the legacy
   horizontal margins so we get exactly 24px between every pair of
   sections (no compounding). !important on the wrapper rule is needed
   to beat the inline style="margin: 0 10px;" hard-coded on
   #header_trustpilot in header.tpl. */
.trust-rating-link--header { margin: 0; }
#head_trygg_ehandel,
#header_trustpilot {
	margin: 0 !important;
}