/* blog: TSO-sidans stilar (godkänt för återanvändning 2026-11-10) – hämtat med dev/tools/tso-page-extract.mjs. */
.sn-tso-blog {
	--font-heading-family: Inter, sans-serif;
	--font-heading-style: normal;
	--font-heading-weight: 700;
	--font-heading-letter-spacing: -0.01em;
	--font-heading-line-height: 1.2;
	--color-foreground: 23 23 23;
	--rounded-full: calc(infinity * 1px);
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--fluid-lg-to-2xl: clamp(1.125rem, .9722rem + .4444vw, 1.5rem);
	--font-medium: 500;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--sp-2: 0.5rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-12: 3rem;
	--sp-8: 2rem;
	--text-base: 1.0rem;
	--page-padding: 1.25rem;
	--icon-weight: 1.5px;
	--sp-5d5: 1.375rem;
	--border-radius: clamp(1rem, 1.578vw, 1.875rem);
	--color-keyboard-focus: 30 43 219;
	--title-xl: clamp(3rem, 7.813vw, 5rem);
	--color-placeholder: 250 250 250;
	--transform-origin-end: right;
	--animation-primary: .5s cubic-bezier(.3, 1, .3, 1);
	--transform-origin-start: left;
	--color-background: 255 255 255;
	--section-padding-top: 72px;
	--section-padding-bottom: 120px;
	--sp-3: 0.75rem;
	--sp-6: 1.5rem;
	--sp-10: 2.5rem;
	--card-radius: 0rem;
	--font-product-family: Inter, sans-serif;
	--font-product-weight: 500;
	--text-2xl: 1.5rem;
	--text-5xl: 3.0rem;
	--sp-7d5: 1.875rem;
	--color-border: 23 23 23/ .1;
}
@media (min-width: 1024px) { .sn-tso-blog {
	--page-padding: 2.25rem;
	--title-xl: clamp(5rem, 6.737vw, 8rem);
} }
@media (min-width: 1280px) { .sn-tso-blog {
	--page-padding: 3rem;
} }
:where(.sn-tso-blog) *, :where(.sn-tso-blog) ::after, :where(.sn-tso-blog) ::before{ box-sizing: border-box; }
:where(.sn-tso-blog) blockquote, :where(.sn-tso-blog) .heading, :where(.sn-tso-blog) h1, :where(.sn-tso-blog) h2, :where(.sn-tso-blog) h3, :where(.sn-tso-blog) h4, :where(.sn-tso-blog) h5, :where(.sn-tso-blog) h6, :where(.sn-tso-blog) .h0, :where(.sn-tso-blog) .h1, :where(.sn-tso-blog) .h2, :where(.sn-tso-blog) .h3, :where(.sn-tso-blog) .h4, :where(.sn-tso-blog) .h5, :where(.sn-tso-blog) .h6{ font-family: var(--font-heading-family); font-style: var(--font-heading-style); font-weight: var(--font-heading-weight); letter-spacing: var(--font-heading-letter-spacing); line-height: var(--font-heading-line-height); text-transform: var(--font-heading-text-transform); color: rgb(var(--color-foreground)); word-break: break-word; }
:where(.sn-tso-blog) a{ color: inherit; text-decoration: inherit; }
:where(.sn-tso-blog) ::-webkit-inner-spin-button, :where(.sn-tso-blog) ::-webkit-outer-spin-button{ height: auto; }
:where(.sn-tso-blog) ::-webkit-search-decoration{ appearance: none; }
:where(.sn-tso-blog) ::-webkit-file-upload-button{ appearance: button; font: inherit; }
:where(.sn-tso-blog) blockquote, :where(.sn-tso-blog) dd, :where(.sn-tso-blog) dl, :where(.sn-tso-blog) figure, :where(.sn-tso-blog) h1, :where(.sn-tso-blog) h2, :where(.sn-tso-blog) h3, :where(.sn-tso-blog) h4, :where(.sn-tso-blog) h5, :where(.sn-tso-blog) h6, :where(.sn-tso-blog) hr, :where(.sn-tso-blog) p, :where(.sn-tso-blog) pre{ margin: 0px; }
:where(.sn-tso-blog) menu, :where(.sn-tso-blog) ol, :where(.sn-tso-blog) ul{ list-style: none; margin: 0px; padding: 0px; }
:where(.sn-tso-blog) audio, :where(.sn-tso-blog) canvas, :where(.sn-tso-blog) embed, :where(.sn-tso-blog) iframe, :where(.sn-tso-blog) img, :where(.sn-tso-blog) object, :where(.sn-tso-blog) svg, :where(.sn-tso-blog) video{ display: block; vertical-align: middle; }
:where(.sn-tso-blog) img, :where(.sn-tso-blog) video{ height: auto; max-width: 100%; }
:where(.sn-tso-blog) :focus:not(:focus-visible){ outline: none; }
:where(.sn-tso-blog) .sr-only{ clip: rect(0px, 0px, 0px, 0px); border-width: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px; }
:where(.sn-tso-blog) .pointer-events-none{ pointer-events: none; }
:where(.sn-tso-blog) .relative{ position: relative; }
:where(.sn-tso-blog) .block{ display: block; }
:where(.sn-tso-blog) .flex{ display: flex; }
:where(.sn-tso-blog) .inline-flex{ display: inline-flex; }
:where(.sn-tso-blog) .grid{ display: grid; }
:where(.sn-tso-blog) .overflow-hidden{ overflow: hidden; }
:where(.sn-tso-blog) .rounded-full{ border-radius: var(--rounded-full); }
:where(.sn-tso-blog) .text-center{ text-align: center; }
:where(.sn-tso-blog) .text-sm{ font-size: var(--text-sm); line-height: 1.6; }
:where(.sn-tso-blog) .text-xs{ font-size: var(--text-xs); line-height: 1.6; }
:where(.sn-tso-blog) .text-lg-2xl{ font-size: var(--fluid-lg-to-2xl); }
:where(.sn-tso-blog) .font-medium{ font-weight: var(--font-medium); }
:where(.sn-tso-blog) .transform{ transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
:where(.sn-tso-blog) .flex-col{ flex-direction: column; }
:where(.sn-tso-blog) .flex-wrap{ flex-wrap: wrap; }
:where(.sn-tso-blog) .items-center{ align-items: center; }
:where(.sn-tso-blog) .justify-center{ justify-content: center; }
:where(.sn-tso-blog) .align-self-center{ align-self: center; }
:where(.sn-tso-blog) .shrink-0{ flex-shrink: 0; }
:where(.sn-tso-blog) .gap-2{ gap: var(--sp-2); }
:where(.sn-tso-blog) .gap-4{ gap: var(--sp-4); }
:where(.sn-tso-blog) .gap-5{ gap: var(--sp-5); }
:where(.sn-tso-blog) .gap-12{ gap: var(--sp-12); }
@media screen and (min-width: 768px) {
:where(.sn-tso-blog) .md\:gap-2{ gap: var(--sp-2); }
:where(.sn-tso-blog) .md\:gap-5{ gap: var(--sp-5); }
:where(.sn-tso-blog) .md\:gap-8{ gap: var(--sp-8); }
:where(.sn-tso-blog) .md\:text-base{ font-size: var(--text-base); line-height: 1.6; }
}
:where(.sn-tso-blog) .leading-none{ line-height: 1; }
:where(.sn-tso-blog) .leading-tight{ line-height: 1.25; }
:where(.sn-tso-blog) .tracking-tight{ letter-spacing: -0.025em; }
:where(.sn-tso-blog) .tracking-heading{ letter-spacing: -0.04em; }
:where(.sn-tso-blog) .page-width{ margin: 0px auto; padding-inline: var(--page-padding); }
:where(.sn-tso-blog) .icon{ stroke-width: var(--icon-weight); width: var(--sp-5d5); height: var(--sp-5d5); }
:where(.sn-tso-blog) .icon-xs{ width: var(--sp-4); height: var(--sp-4); }
:where(.sn-tso-blog) .icon-sm{ width: var(--sp-5); height: var(--sp-5); }
:where(.sn-tso-blog) .stroke-1{ stroke-width: 1; }
:where(.sn-tso-blog) [role="main"] .shopify-section{ --section-is-first: 0; position: relative; }
:where(.sn-tso-blog) [role="main"] .shopify-section:not(.contents){ display: flow-root; }
:where(.sn-tso-blog) [role="main"] .shopify-section:first-child{ --section-is-first: 1; }
:where(.sn-tso-blog) .js [role="main"] .shopify-section:last-child{ border-end-end-radius: var(--border-radius); border-end-start-radius: var(--border-radius); position: relative; }
:where(.sn-tso-blog) .js [role="main"] .shopify-section:last-child .section::before{ height: 100%; }
:where(.sn-tso-blog) :focus{ outline: 0px; box-shadow: none; }
:where(.sn-tso-blog) :focus-visible{ outline: 2px solid rgb(var(--color-keyboard-focus)); outline-offset: 3px; }
:where(.sn-tso-blog) .btn-text{ position: relative; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 1; }
:where(.sn-tso-blog) .button-wrapper, :where(.sn-tso-blog) .title-wrapper{ margin-block-end: clamp(var(--sp-8),2.526vw,var(--sp-12)); }
:where(.sn-tso-blog) .title-wrapper > :is(.heading, p){ flex: 0 0 auto; }
:where(.sn-tso-blog) .title-xl{ font-size: var(--title-xl); }
:where(.sn-tso-blog) .media{ background-color: rgb(var(--color-placeholder)); }
:where(.sn-tso-blog) .media > img{ backface-visibility: hidden; object-fit: cover; object-position: center center; }
@media screen and (pointer: fine) {
:where(.sn-tso-blog) .media > img{ transition-property: opacity, transform; }
}
:where(.sn-tso-blog) .media--landscape > :is(img, svg, video-media), :where(.sn-tso-blog) .aspect-landscape{ aspect-ratio: 4 / 3; }
:where(.sn-tso-blog) .link.icon-with-text .link-text, :where(.sn-tso-blog) .reversed-link, :where(.sn-tso-blog) .rte a{ --reversed-link-gap: min(100%, 1.35em); background-position-x: var(--transform-origin-end); transition: background-size var(--animation-primary); }
@media screen and (pointer: fine) {
:where(.sn-tso-blog) .link.icon-with-text:not([aria-disabled]):hover .link-text, :where(.sn-tso-blog) .reversed-link:not([aria-disabled]):hover, :where(.sn-tso-blog) .rte a:hover{ background-position-x: var(--transform-origin-start); background-size: 100% 1px; }
}
:where(.sn-tso-blog) .reversed-link.icon-with-text .link-text, :where(.sn-tso-blog) .link, :where(.sn-tso-blog) .rte a:not(.button, .reversed-link){ background-image: linear-gradient(currentcolor, currentcolor); background-position-y: min(100%, 1.35em); background-size: 100% 1px; background-repeat: no-repeat; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position-x: var(--transform-origin-start); position: relative; text-decoration-line: none; transition: background-size var(--animation-primary),color .3s var(--animation-primary); }
@media screen and (pointer: fine) {
:where(.sn-tso-blog) :is(.link, .rte a:not(.button, .reversed-link)):hover, :where(.sn-tso-blog) .reversed-link.icon-with-text:hover .link-text{ background-position-x: var(--transform-origin-end); background-size: 0px 1px; }
}
:where(.sn-tso-blog) .section{ position: relative; color: rgb(var(--color-foreground)); background-color: rgb(var(--color-background)); }
:where(.sn-tso-blog) .section::before{ content: ""; pointer-events: none; position: absolute; inset: 0px; width: 100%; height: 100%; background-color: rgb(var(--color-background)); }
:where(.sn-tso-blog) .section--padding{ padding-block-start: calc(var(--section-padding-top) * .75); padding-block-end: calc(var(--section-padding-bottom) * .75); }
@media screen and (min-width: 768px) {
:where(.sn-tso-blog) .section--padding{ padding-block-start: var(--section-padding-top); padding-block-end: var(--section-padding-bottom); }
}
:where(.sn-tso-blog) .text-center .split-words{ justify-content: center; }
:where(.sn-tso-blog) .split-words .word{ display: inline-flex; line-height: 1; margin: -0.1em -0.05em; overflow: hidden; padding: 0.15em 0.05em; }
:where(.sn-tso-blog) [lang="en"] .split-words .word{ padding-block: 0.08em; }
:where(.sn-tso-blog) .card-grid{ --card-grid-per-row: 2; --card-grid-template: auto-flow dense/repeat(var(--card-grid-per-row), minmax(0, 1fr)); --card-grid-gap: var(--sp-3); grid: var(--card-grid-template); gap: var(--card-grid-gap); }
@media screen and (max-width: 639px) {
:where(.sn-tso-blog) .mobile\:card-grid--1{ --card-grid-per-row: 1; }
}
@media screen and (min-width: 768px) {
:where(.sn-tso-blog) .card-grid{ --card-grid-per-row: 3; --card-grid-gap: clamp(var(--sp-4), 1.263vw, var(--sp-6)); }
}
@media screen and (min-width: 1280px) {
:where(.sn-tso-blog) .card-grid--3{ --card-grid-per-row: 3; }
}
:where(.sn-tso-blog) .pagination .page{ height: var(--sp-10); width: var(--sp-10); }
@media screen and (min-width: 768px) {
:where(.sn-tso-blog) .pagination .page{ height: var(--sp-12); width: var(--sp-12); }
}
:where(.sn-tso-blog) .pagination .page.current{ background-color: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
:where(.sn-tso-blog) h1.title-xl{ font-size: calc(var(--title-xl) * 1.1 - 4px); }
:where(.sn-tso-blog) .blog-grid{ --card-grid-gap: var(--sp-10) var(--sp-4); }
@media screen and (min-width: 1024px) {
:where(.sn-tso-blog) .blog-grid{ --card-grid-gap: clamp(40px, 3.5vw, 60px); }
}
@media screen and (pointer: fine) {
:where(.sn-tso-blog) .article-card__image{ --tw-scale-x: 1; --tw-scale-y: 1; transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transition: transform var(--animation-primary); }
:where(.sn-tso-blog) .article-card__link:hover .article-card__image{ --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
}
:where(.sn-tso-blog) .article-card__media{ border-radius: var(--card-radius); }
:where(.sn-tso-blog) .article-card__title{ font-family: var(--font-product-family); font-weight: var(--font-product-weight); text-transform: var(--font-product-text-transform); }
:where(.sn-tso-blog) .article-card__top{ row-gap: var(--sp-2); }
:where(.sn-tso-blog) .article-card__top li{ padding-inline-end: var(--sp-4); }
:where(.sn-tso-blog) .article-card__top li::after{ content: ""; position: absolute; inset-inline-end: 0px; width: 1px; height: 16px; background-color: currentcolor; opacity: 0.3; }
:where(.sn-tso-blog) .article-card__top li:last-child{ padding-inline-end: 0px; }
:where(.sn-tso-blog) .article-card__top li:last-child::after{ content: none; }
:where(.sn-tso-blog) .article-card__top .icon{ width: var(--sp-4); height: var(--sp-4); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__media::after{ content: ""; position: absolute; inset: 0px; pointer-events: none; opacity: 0.5; background-color: color-mix(in oklab,rgb(var(--color-foreground)) 50%,#000000); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__image{ width: 100%; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1):not(.without-image) .article-card__content{ position: absolute; inset: var(--card-grid-gap); inset-block-start: unset; color: rgb(255, 255, 255); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1):not(.without-image) .article-card__title{ color: inherit; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__title{ font-size: clamp(var(--text-2xl),2.526vw,var(--text-5xl)); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .reversed-link{ --reversed-link-gap: min(100%, 1.12em); }
@media screen and (max-width: 639px) {
:where(.sn-tso-blog) .blog-collage{ --card-grid-per-row: 1; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__image{ aspect-ratio: 4 / 5; }
}
@media screen and (min-width: 640px) {
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1){ grid-column: span 2; }
}
@media screen and (min-width: 1024px) {
:where(.sn-tso-blog) .blog-collage{ grid-template-rows: 1fr 1fr; grid-template-columns: repeat(24, minmax(0px, 1fr)); }
:where(.sn-tso-blog) .blog-collage .article-card{ grid-column: span 8; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1){ grid-area: span 2 / span 14; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__content > .grid{ gap: var(--sp-7d5); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__title{ line-height: 1; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__top + p{ max-width: 75%; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__content .text-xs{ font-size: var(--text-sm); line-height: 1.25; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1) .article-card__content .text-sm{ font-size: var(--text-base); }
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)), :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4){ grid-column: span 10; flex-direction: row; }
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)) .article-card__media, :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4) .article-card__media{ flex: 0 0 40%; }
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(1), :nth-child(2), :nth-child(3)) :is(.article-card__media, .article-card__link, .article-card__image), :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4) :is(.article-card__media, .article-card__link, .article-card__image){ height: 100%; }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(3), :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4){ margin-block-start: var(--sp-3); padding-block-start: var(--sp-3); }
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(3)::before, :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4)::before{ content: ""; position: absolute; width: 100%; inset-block-start: calc(var(--card-grid-gap)/2 * -1); border-block-start: 1px solid rgb(var(--color-border)); }
}
@media screen and (min-width: 1536px) {
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)), :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4){ gap: var(--sp-10); }
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)) .article-card__media, :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4) .article-card__media{ flex: 0 0 45%; }
}
@media screen and (pointer: fine) {
:where(.sn-tso-blog) .blog-collage .article-card:nth-child(1):hover .article-card__image{ --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)), :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4){ display: grid; gap: var(--sp-6); }
:where(.sn-tso-blog) .blog-collage .article-card:is(:nth-child(2), :nth-child(3)) .article-card__image, :where(.sn-tso-blog) .blog-collage.with-only4 .article-card:nth-child(4) .article-card__image{ aspect-ratio: 16 / 9; }
}
@keyframes spin { 
  100% { rotate: -360deg; }
}

  #shopify-section-template--27686111445378__main-blog {
    --section-padding-top: 72px;
    --section-padding-bottom: 120px;
  }