/* article: TSO-sidans stilar (godkänt för återanvändning 2026-11-10) – hämtat med dev/tools/tso-page-extract.mjs. */ .sn-tso-article { --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: 255 255 255; --text-h2: 1.5rem; --text-h3: 1.25rem; --rounded-full: calc(infinity * 1px); --text-2xl: 1.5rem; --text-base: 1.0rem; --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-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --text-lg: 1.125rem; --text-3xl: 1.875rem; --sp-4d5: 1.125rem; --sp-12: 3rem; --sp-8d5: 2.125rem; --sp-14: 3.5rem; --sp-10: 2.5rem; --sp-7: 1.75rem; --sp-2d5: 0.625rem; --sp-1d5: 0.375rem; --sp-5d5: 1.375rem; --page-padding: 1.25rem; --icon-weight: 1.5px; --border-radius: clamp(1rem, 1.578vw, 1.875rem); --color-keyboard-focus: 30 43 219; --buttons-shadow-horizontal-offset: 0px; --buttons-shadow-vertical-offset: 0px; --buttons-shadow-opacity: 0.0; --buttons-border-opacity: 1.0; --font-button-family: Inter, sans-serif; --font-button-size: clamp(0.875rem, 0.8115rem + 0.1587vw, 1.0rem); --font-button-weight: 500; --sp-6d5: 1.625rem; --sp-7d5: 1.875rem; --color-button-text: 255 255 255; --color-button-background: 11 18 40; --buttons-radius: 3.75rem; --color-shadow: 11 18 40; --buttons-border-width: 2px; --color-button-border: 11 18 40; --animation-primary: .5s cubic-bezier(.3, 1, .3, 1); --animation-fast: .3s cubic-bezier(.7, 0, .3, 1); --title-lg: clamp(2.5rem, 3.368vw, 4rem); --color-placeholder: 250 250 250; --color-border-light: 255 255 255/ 0.06; --rounded-block: clamp(0.625rem, 1.053vw, 1.25rem); --transform-origin-end: right; --transform-origin-start: left; --color-background: 255 255 255; --section-padding-top: 0px; --section-padding-bottom: 0px; --color-drawer-text: 23 23 23; --color-drawer-background: 255 255 255; --color-drawer-overlay: 23 23 23; --color-drawer-button-background: 23 23 23; --color-drawer-button-gradient: #171717; --color-drawer-button-text: 255 255 255; --color-overlay: 23 23 23; --transform-logical: 1; --color-border: 255 255 255/ 0.1; --sp-1: 0.25rem; --sp-11: 2.75rem; --overlay-opacity: 0.3; --sp-16: 4rem; --text-2xs: 0.6875rem; --rounded-button: 3.75rem; --sp-3d5: 0.875rem; --tso-ink-2: #3a4356; --tso-ink: #0b1228; --tso-fw-semi: 600; --tso-line: #e6e8ec; --tso-r-md: 10px; --tso-bg: #ffffff; --tso-bg-soft: #f5f6f8; --text-3xs: 0.625rem; --sp-15: 3.875rem; --sp-20: 5rem; } @media (min-width: 1024px) { .sn-tso-article { --text-h2: 2.25rem; --text-h3: 1.875rem; --page-padding: 2.25rem; --title-lg: clamp(3rem, 4.73vw, 5.625rem); } } @media (min-width: 1280px) { .sn-tso-article { --page-padding: 3rem; } } :where(.sn-tso-article) *, :where(.sn-tso-article) ::after, :where(.sn-tso-article) ::before{ box-sizing: border-box; } :where(.sn-tso-article) blockquote, :where(.sn-tso-article) .heading, :where(.sn-tso-article) h1, :where(.sn-tso-article) h2, :where(.sn-tso-article) h3, :where(.sn-tso-article) h4, :where(.sn-tso-article) h5, :where(.sn-tso-article) h6, :where(.sn-tso-article) .h0, :where(.sn-tso-article) .h1, :where(.sn-tso-article) .h2, :where(.sn-tso-article) .h3, :where(.sn-tso-article) .h4, :where(.sn-tso-article) .h5, :where(.sn-tso-article) .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-article) .h2, :where(.sn-tso-article) .rte h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6){ font-size: var(--text-h2); line-height: 1.3; } :where(.sn-tso-article) .h3, :where(.sn-tso-article) .rte h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6){ font-size: var(--text-h3); line-height: 1.4; } @media screen and (max-width: 1023px) { :where(.sn-tso-article) .h2, :where(.sn-tso-article) .rte h2:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6){ line-height: 1.1; } :where(.sn-tso-article) .h3, :where(.sn-tso-article) .rte h3:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6){ line-height: 1.3; } } :where(.sn-tso-article) a{ color: inherit; text-decoration: inherit; } :where(.sn-tso-article) b, :where(.sn-tso-article) strong{ font-weight: bolder; } :where(.sn-tso-article) table{ border-collapse: collapse; border-color: inherit; text-indent: 0px; } :where(.sn-tso-article) button, :where(.sn-tso-article) input, :where(.sn-tso-article) optgroup, :where(.sn-tso-article) select, :where(.sn-tso-article) textarea{ color: inherit; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; margin: 0px; padding: 0px; } :where(.sn-tso-article) button, :where(.sn-tso-article) select{ text-transform: none; } :where(.sn-tso-article) [type="button"], :where(.sn-tso-article) [type="reset"], :where(.sn-tso-article) [type="submit"], :where(.sn-tso-article) button{ appearance: button; background-color: transparent; background-image: none; } :where(.sn-tso-article) ::-webkit-inner-spin-button, :where(.sn-tso-article) ::-webkit-outer-spin-button{ height: auto; } :where(.sn-tso-article) ::-webkit-search-decoration{ appearance: none; } :where(.sn-tso-article) ::-webkit-file-upload-button{ appearance: button; font: inherit; } :where(.sn-tso-article) blockquote, :where(.sn-tso-article) dd, :where(.sn-tso-article) dl, :where(.sn-tso-article) figure, :where(.sn-tso-article) h1, :where(.sn-tso-article) h2, :where(.sn-tso-article) h3, :where(.sn-tso-article) h4, :where(.sn-tso-article) h5, :where(.sn-tso-article) h6, :where(.sn-tso-article) hr, :where(.sn-tso-article) p, :where(.sn-tso-article) pre{ margin: 0px; } :where(.sn-tso-article) menu, :where(.sn-tso-article) ol, :where(.sn-tso-article) ul{ list-style: none; margin: 0px; padding: 0px; } :where(.sn-tso-article) [role="button"], :where(.sn-tso-article) button{ cursor: pointer; } :where(.sn-tso-article) audio, :where(.sn-tso-article) canvas, :where(.sn-tso-article) embed, :where(.sn-tso-article) iframe, :where(.sn-tso-article) img, :where(.sn-tso-article) object, :where(.sn-tso-article) svg, :where(.sn-tso-article) video{ display: block; vertical-align: middle; } :where(.sn-tso-article) img, :where(.sn-tso-article) video{ height: auto; max-width: 100%; } :where(.sn-tso-article) :focus:not(:focus-visible){ outline: none; } :where(.sn-tso-article) .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-article) .pointer-events-none{ pointer-events: none; } :where(.sn-tso-article) .fixed{ position: fixed; } :where(.sn-tso-article) .absolute{ position: absolute; } :where(.sn-tso-article) .relative{ position: relative; } :where(.sn-tso-article) .block{ display: block; } :where(.sn-tso-article) .flex{ display: flex; } :where(.sn-tso-article) .inline-flex{ display: inline-flex; } :where(.sn-tso-article) .grid{ display: grid; } :where(.sn-tso-article) .hidden, :where(.sn-tso-article) [hidden]{ display: none; } :where(.sn-tso-article) .overflow-hidden{ overflow: hidden; } :where(.sn-tso-article) .rounded-full{ border-radius: var(--rounded-full); } :where(.sn-tso-article) .text-left{ text-align: start; } :where(.sn-tso-article) .text-2xl{ font-size: var(--text-2xl); line-height: 1.6; } :where(.sn-tso-article) .text-base{ font-size: var(--text-base); line-height: 1.6; } :where(.sn-tso-article) .text-sm{ font-size: var(--text-sm); line-height: 1.6; } :where(.sn-tso-article) .text-xs{ font-size: var(--text-xs); line-height: 1.6; } :where(.sn-tso-article) .text-lg-2xl{ font-size: var(--fluid-lg-to-2xl); } :where(.sn-tso-article) .font-medium{ font-weight: var(--font-medium); } :where(.sn-tso-article) .italic{ font-style: italic; } :where(.sn-tso-article) .not-italic{ font-style: normal; } :where(.sn-tso-article) .top-0{ inset-block-start: 0px; } :where(.sn-tso-article) .left-0{ inset-inline-start: 0px; } :where(.sn-tso-article) .bottom-0{ inset-block-end: 0px; } :where(.sn-tso-article) .h-full{ height: 100%; } :where(.sn-tso-article) .h-screen{ height: 100vh; } :where(.sn-tso-article) .w-full{ width: 100%; } :where(.sn-tso-article) .z-1{ z-index: 1; } :where(.sn-tso-article) .z-10{ z-index: 10; } :where(.sn-tso-article) .z-30{ z-index: 30; } :where(.sn-tso-article) .invisible{ visibility: hidden; } :where(.sn-tso-article) .opacity-0{ opacity: 0; } :where(.sn-tso-article) .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-article) .animate-spin{ animation: 1s linear 0s infinite normal none running spin; } :where(.sn-tso-article) .flex-col{ flex-direction: column; } :where(.sn-tso-article) .flex-wrap{ flex-wrap: wrap; } :where(.sn-tso-article) .items-end{ align-items: flex-end; } :where(.sn-tso-article) .items-center{ align-items: center; } :where(.sn-tso-article) .justify-center{ justify-content: center; } :where(.sn-tso-article) .justify-between{ justify-content: space-between; } :where(.sn-tso-article) .shrink-0{ flex-shrink: 0; } :where(.sn-tso-article) .grow{ flex-grow: 1; } :where(.sn-tso-article) .gap-2{ gap: var(--sp-2); } :where(.sn-tso-article) .gap-3{ gap: var(--sp-3); } :where(.sn-tso-article) .gap-4{ gap: var(--sp-4); } :where(.sn-tso-article) .gap-5{ gap: var(--sp-5); } :where(.sn-tso-article) .gap-6{ gap: var(--sp-6); } :where(.sn-tso-article) .gap-8{ gap: var(--sp-8); } @media screen and (min-width: 640px) { :where(.sn-tso-article) .sm\:hidden{ display: none; } :where(.sn-tso-article) .sm\:flex{ display: flex; } } @media screen and (min-width: 768px) { :where(.sn-tso-article) .md\:text-left{ text-align: start; } :where(.sn-tso-article) .md\:block{ display: block; } :where(.sn-tso-article) .md\:flex{ display: flex; } :where(.sn-tso-article) .md\:hidden{ display: none; } :where(.sn-tso-article) .md\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); } :where(.sn-tso-article) .md\:items-center{ align-items: center; } :where(.sn-tso-article) .md\:justify-center{ justify-content: center; } :where(.sn-tso-article) .md\:text-lg{ font-size: var(--text-lg); line-height: 1.6; } } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .lg\:text-3xl{ font-size: var(--text-3xl); line-height: 1.6; } } :where(.sn-tso-article) .leading-none{ line-height: 1; } :where(.sn-tso-article) .leading-tight{ line-height: 1.25; } :where(.sn-tso-article) .tracking-tight{ letter-spacing: -0.025em; } :where(.sn-tso-article) .tracking-heading{ letter-spacing: -0.04em; } :where(.sn-tso-article) a:empty, :where(.sn-tso-article) ul:empty, :where(.sn-tso-article) dl:empty, :where(.sn-tso-article) div:empty, :where(.sn-tso-article) section:empty, :where(.sn-tso-article) article:empty, :where(.sn-tso-article) p:empty, :where(.sn-tso-article) h1:empty, :where(.sn-tso-article) h2:empty, :where(.sn-tso-article) h3:empty, :where(.sn-tso-article) h4:empty, :where(.sn-tso-article) h5:empty, :where(.sn-tso-article) h6:empty{ display: none; } :where(.sn-tso-article) .rte p{ margin-block: var(--sp-4); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .rte p{ margin-block: var(--sp-5); } } @media screen and (min-width: 1280px) { :where(.sn-tso-article) .rte p{ margin-block: var(--sp-4d5); } } :where(.sn-tso-article) .rte > :first-child{ margin-block-start: 0px; } :where(.sn-tso-article) .rte > :last-child{ margin-block-end: 0px; } :where(.sn-tso-article) .rte :is(.h2, h2){ margin-block-end: var(--sp-6); margin-block-start: var(--sp-12); } @media screen and (min-width: 1280px) { :where(.sn-tso-article) .rte :is(.h2, h2){ margin-block-end: var(--sp-8d5); margin-block-start: var(--sp-14); } } :where(.sn-tso-article) .rte :is(.h3, h3){ margin-block-end: var(--sp-3); margin-block-start: var(--sp-8); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .rte :is(.h3, h3){ margin-block-end: var(--sp-4); margin-block-start: var(--sp-10); } } @media screen and (min-width: 1280px) { :where(.sn-tso-article) .rte :is(.h3, h3){ margin-block-end: var(--sp-5); margin-block-start: var(--sp-12); } } :where(.sn-tso-article) .rte :is(h2 + *, h3 + *, h4 + *, hr + *){ margin-block-start: 0px; } :where(.sn-tso-article) .rte ul{ list-style-type: disc; } :where(.sn-tso-article) .rte ul ::marker{ color: rgb(var(--color-foreground)/ .25); } :where(.sn-tso-article) .rte ul::marker{ color: rgb(var(--color-foreground)/ .25); } :where(.sn-tso-article) .rte :is(ul, ol){ margin-block: var(--sp-5); padding-inline-start: var(--sp-7); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .rte :is(ul, ol){ margin-block: var(--sp-6); padding-inline-start: var(--sp-8); } } :where(.sn-tso-article) .rte li{ margin-block-start: var(--sp-2); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .rte li{ margin-block-start: var(--sp-2d5); } } @media screen and (min-width: 1536px) { :where(.sn-tso-article) .rte li{ margin-block-start: var(--sp-3); } } :where(.sn-tso-article) .rte :is(ul > li, ol > li){ padding-inline-start: var(--sp-1d5); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .rte :is(ul > li, ol > li){ padding-inline-start: var(--sp-2); } } :where(.sn-tso-article) .rte :is(.rte > ul > li > :first-child, .rte > ol > li > :first-child){ margin-block-start: var(--sp-5d5); } :where(.sn-tso-article) .rte :is(.rte > ul > li > :last-child, .rte > ol > li > :last-child){ margin-block-end: var(--sp-5d5); } :where(.sn-tso-article) .page-width{ margin: 0px auto; padding-inline: var(--page-padding); } :where(.sn-tso-article) .spacing-section{ min-height: var(--spacing-height-mobile); } @media screen and (min-width: 768px) { :where(.sn-tso-article) .spacing-section{ min-height: var(--spacing-height-desktop); } } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .page-width--narrow{ --page-padding: var(--sp-12); max-width: 70rem; } } :where(.sn-tso-article) .icon{ stroke-width: var(--icon-weight); width: var(--sp-5d5); height: var(--sp-5d5); } :where(.sn-tso-article) .icon-xs{ width: var(--sp-4); height: var(--sp-4); } :where(.sn-tso-article) .icon-sm{ width: var(--sp-5); height: var(--sp-5); } :where(.sn-tso-article) .icon-lg{ width: var(--sp-6); height: var(--sp-6); } :where(.sn-tso-article) .stroke-1{ stroke-width: 1; } :where(.sn-tso-article) [role="main"] .shopify-section{ --section-is-first: 0; position: relative; } :where(.sn-tso-article) [role="main"] .shopify-section:not(.contents){ display: flow-root; } :where(.sn-tso-article) [role="main"] .shopify-section:first-child{ --section-is-first: 1; } :where(.sn-tso-article) .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-article) .js [role="main"] .shopify-section:last-child .section::before{ height: 100%; } :where(.sn-tso-article) :focus{ outline: 0px; box-shadow: none; } :where(.sn-tso-article) :focus-visible{ outline: 2px solid rgb(var(--color-keyboard-focus)); outline-offset: 3px; } :where(.sn-tso-article) .button, :where(.sn-tso-article) .shopify-challenge__button, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded, :where(.sn-tso-article) .shopify-payment-button [role="button"], :where(.sn-tso-article) .additional-checkout-buttons [role="button"], :where(.sn-tso-article) .additional-checkout-buttons iframe{ --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset); --shadow-vertical-offset: var(--buttons-shadow-vertical-offset); --shadow-opacity: var(--buttons-shadow-opacity); --border-opacity: var(--buttons-border-opacity); } :where(.sn-tso-article) .button, :where(.sn-tso-article) .shopify-challenge__button, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded{ cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1; font-family: var(--font-button-family); font-size: var(--font-button-size); font-weight: var(--font-button-weight); text-transform: var(--font-button-text-transform); padding: clamp(var(--sp-4d5),1.2vw,var(--sp-5d5)) clamp(var(--sp-6d5),1.473vw,var(--sp-7d5)); color: rgb(var(--color-button-text)); background-color: rgb(var(--color-button-background)); border-radius: var(--buttons-radius); box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) rgb(var(--color-shadow)/ var(--shadow-opacity)); max-height: 3.75rem; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; height: auto; } :where(.sn-tso-article) .button::after, :where(.sn-tso-article) .shopify-challenge__button::after, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded::after{ content: ""; pointer-events: none; position: absolute; inset: 0px; border-radius: var(--buttons-radius); border: var(--buttons-border-width) solid rgb(var(--color-button-border)/ var(--border-opacity)); } :where(.sn-tso-article) .button .btn-text{ color: currentcolor; } :where(.sn-tso-article) .button .btn-fill{ display: block; border-radius: 50%; width: 150%; height: 200%; inset-block-start: -50%; inset-inline-start: -25%; position: absolute; transform: translate3d(0px, -76%, 0px); } :where(.sn-tso-article) .button--secondary .btn-fill{ background-color: rgb(var(--color-button-background)); } :where(.sn-tso-article) .button--secondary, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded{ color: rgb(var(--color-button-background)); background: none; backdrop-filter: blur(12px); } :where(.sn-tso-article) .button--close{ --shadow-opacity: 0; --border-opacity: .1; --buttons-border-width: 1px; --buttons-radius: var(--rounded-full); padding: 0px; } :where(.sn-tso-article) .button--close .icon:first-child{ --tw-rotate: 0deg; transform: rotate(var(--tw-rotate)); } @media screen and (pointer: fine) { :where(.sn-tso-article) .button, :where(.sn-tso-article) .shopify-challenge__button, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded{ --button-transition: box-shadow var(--animation-primary), opacity var(--animation-fast); transition: var(--button-transition); } :where(.sn-tso-article) .button::after, :where(.sn-tso-article) .shopify-challenge__button::after, :where(.sn-tso-article) button.shopify-payment-button__button--unbranded::after{ transition: border var(--animation-primary); } :where(.sn-tso-article) .button .btn-text{ transition-delay: 0.1s; } :where(.sn-tso-article) .button .btn-fill{ transition: background-color var(--animation-primary); } :where(.sn-tso-article) .button--close .icon:first-child{ transition: transform var(--animation-primary),opacity var(--animation-fast); } :where(.sn-tso-article) .button--close:hover .icon:first-child{ --tw-rotate: 90deg; } :where(.sn-tso-article) [data-button-hover="standard"] .button:not([disabled]) .btn-fill{ display: block; } :where(.sn-tso-article) .js [data-button-hover="standard"] .button--primary:hover:not([disabled], .self-button), :where(.sn-tso-article) .js [data-button-hover="standard"] .button--secondary:hover:not([disabled], .self-button), :where(.sn-tso-article) .js [data-button-hover="standard"] .shopify-payment-button__button--unbranded:hover:not([disabled]){ --shadow-horizontal-offset: 0; --shadow-vertical-offset: 0; } :where(.sn-tso-article) .js [data-button-hover="standard"] .button--secondary:hover:not([disabled], .self-button), :where(.sn-tso-article) .js [data-button-hover="standard"] .shopify-payment-button__button--unbranded:hover:not([disabled]){ color: rgb(var(--color-button-text)); } } :where(.sn-tso-article) .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-article) .title-lg{ font-size: var(--title-lg); } :where(.sn-tso-article) .media{ background-color: rgb(var(--color-placeholder)); } :where(.sn-tso-article) .media > img{ backface-visibility: hidden; object-fit: cover; object-position: center center; } @media screen and (pointer: fine) { :where(.sn-tso-article) .media > img{ transition-property: opacity, transform; } } :where(.sn-tso-article) .media--height > :is(img, svg, video-media){ inset: 0px; position: absolute; max-width: 100%; width: 100%; height: 100%; } :where(.sn-tso-article) .media--750px{ height: 487.5px; } @media screen and (min-width: 768px) { :where(.sn-tso-article) .media--750px{ height: 637.5px; } } @media screen and (min-width: 1536px) { :where(.sn-tso-article) .media--750px{ height: 750px; } } :where(.sn-tso-article) table{ overflow: hidden; box-shadow: 0 0 0 1px rgb(var(--color-border-light)); border-radius: var(--rounded-block); } :where(.sn-tso-article) table th, :where(.sn-tso-article) table td{ width: auto; text-align: start; line-height: 1.6; font-size: var(--text-lg); padding: var(--sp-6) var(--sp-7d5); } :where(.sn-tso-article) thead th{ font-weight: var(--font-medium); background-color: rgb(var(--color-foreground)/ .025); } :where(.sn-tso-article) tbody tr, :where(.sn-tso-article) tfoot tr:first-child{ border-block-start: 1px solid rgb(var(--color-border-light)); } :where(.sn-tso-article) .link.icon-with-text .link-text, :where(.sn-tso-article) .reversed-link, :where(.sn-tso-article) .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-article) .link.icon-with-text:not([aria-disabled]):hover .link-text, :where(.sn-tso-article) .reversed-link:not([aria-disabled]):hover, :where(.sn-tso-article) .rte a:hover{ background-position-x: var(--transform-origin-start); background-size: 100% 1px; } } :where(.sn-tso-article) .reversed-link.icon-with-text .link-text, :where(.sn-tso-article) .link, :where(.sn-tso-article) .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-article) :is(.link, .rte a:not(.button, .reversed-link)):hover, :where(.sn-tso-article) .reversed-link.icon-with-text:hover .link-text{ background-position-x: var(--transform-origin-end); background-size: 0px 1px; } } :where(.sn-tso-article) ol{ list-style-type: decimal; } :where(.sn-tso-article) .section{ position: relative; color: rgb(var(--color-foreground)); background-color: rgb(var(--color-background)); } :where(.sn-tso-article) .section::before{ content: ""; pointer-events: none; position: absolute; inset: 0px; width: 100%; height: 100%; background-color: rgb(var(--color-background)); } :where(.sn-tso-article) .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-article) .section--padding{ padding-block-start: var(--section-padding-top); padding-block-end: var(--section-padding-bottom); } } :where(.sn-tso-article) .section--rounded{ border-start-end-radius: var(--border-radius); border-start-start-radius: var(--border-radius); } :where(.sn-tso-article) .js .section--rounded::before{ height: calc(100% + var(--border-radius)); border-start-end-radius: var(--border-radius); border-start-start-radius: var(--border-radius); } :where(.sn-tso-article) .drawer{ --color-foreground: var(--color-drawer-text); --color-background: var(--color-drawer-background); --color-overlay: var(--color-drawer-overlay); --color-button-background: var(--color-drawer-button-background); --color-button-gradient: var(--color-drawer-button-gradient); --color-button-border: var(--color-drawer-button-background); --color-button-text: var(--color-drawer-button-text); --color-border: var(--color-foreground)/ .1; --color-border-dark: var(--color-foreground)/ .4; --color-border-light: var(--color-foreground)/ .06; } :where(.sn-tso-article) .drawer[hidden]{ content-visibility: hidden; } :where(.sn-tso-article) .drawer .overlay{ cursor: none; transition: opacity 0.8s cubic-bezier(0.7, 0, 0.2, 1), visibility, background-color; } :where(.sn-tso-article) .drawer--end .overlay{ background: linear-gradient(to var(--transform-origin-end),rgb(var(--color-overlay)/ .2) 20%,rgb(var(--color-overlay)/ .5) 60%); } @media screen and (min-width: 1280px) { :where(.sn-tso-article) .drawer--end .overlay{ background: linear-gradient(to var(--transform-origin-end),rgb(var(--color-overlay)/ .2) 40%,rgb(var(--color-overlay)/ .5) 80%); } } :where(.sn-tso-article) .drawer__header{ outline: none; border-block-end: 1px solid rgb(var(--color-border-light)); padding: var(--sp-8) var(--sp-5) var(--sp-6); transition-property: opacity, visibility; } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .drawer__header{ padding-inline: var(--sp-12); } } @media screen and (min-width: 1536px) { :where(.sn-tso-article) .drawer__header{ padding-block-end: var(--sp-8); padding-block-start: var(--sp-10); } } :where(.sn-tso-article) .drawer__close{ height: var(--sp-12); width: var(--sp-12); flex: 0 0 auto; margin-inline-start: auto; } :where(.sn-tso-article) .drawer__close .icon + .icon{ transition-property: opacity, visibility; } :where(.sn-tso-article) .drawer__content{ overflow: hidden auto; transition-property: opacity, visibility; } :where(.sn-tso-article) .drawer__inner{ max-width: 36rem; color: rgb(var(--color-foreground)); background-color: rgb(var(--color-background)); transform: translate(calc(var(--tw-translate-x) * var(--transform-logical))); } :where(.sn-tso-article) .drawer--end .drawer__inner{ --tw-translate-x: 100%; inset-inline-end: 0px; } :where(.sn-tso-article) [data-rounded-block="round"] .drawer--end .drawer__inner{ border-end-start-radius: var(--sp-8d5); border-start-start-radius: var(--sp-8d5); } :where(.sn-tso-article) .loaded .drawer__inner{ transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1); } @media screen and (max-width: 639px) { :where(.sn-tso-article) .js .drawer .overlay{ background: none; } :where(.sn-tso-article) .js .drawer__header::before{ --tw-translate-x: -50%; content: ""; background-color: rgb(var(--color-border)); border-radius: var(--rounded-full); height: var(--sp-1); width: var(--sp-12); position: absolute; inset-block-start: var(--sp-2d5); inset-inline-start: 50%; transform: translate(calc(var(--tw-translate-x) * var(--transform-logical))); } :where(.sn-tso-article) .js .drawer__close{ --buttons-border-width: 0; position: absolute; inset-block-start: var(--sp-1); inset-inline-end: var(--sp-1); backdrop-filter: none; } :where(.sn-tso-article) .js [data-modal-swipe-only] .drawer__close{ opacity: 0; pointer-events: none; } :where(.sn-tso-article) .js .drawer__close:focus-visible{ opacity: 1; pointer-events: visible; } :where(.sn-tso-article) .js .drawer .drawer__inner{ border-end-end-radius: 0px; border-end-start-radius: 0px; border-start-end-radius: var(--sp-5); border-start-start-radius: var(--sp-5); height: 100%; width: 100%; max-height: calc(100% - 60px); max-width: none; inset-block: auto 0px; transform: translate3d(0px, 100%, 0px); } } @media (prefers-reduced-motion: reduce) { :where(.sn-tso-article) .loaded .drawer__inner{ transition: opacity var(--animation-primary); } :where(.sn-tso-article) .drawer .overlay{ transition-property: opacity, visibility; } :where(.sn-tso-article) .drawer__inner{ opacity: 0; } :where(.sn-tso-article) :is(.drawer--start, .drawer--end) .drawer__inner{ transform: translateZ(0px); } } :where(.sn-tso-article) .drawer__scrollable{ overflow: hidden auto; padding: var(--sp-6) var(--sp-5); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .drawer__scrollable{ padding: var(--sp-8) var(--sp-12); } } @media screen and (min-width: 1536px) { :where(.sn-tso-article) .drawer__scrollable{ padding-block: var(--sp-11); } } :where(.sn-tso-article) .drawer__scrollable{ scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-color: auto; scrollbar-width: thin; } :where(.sn-tso-article) .drawer__scrollable::-webkit-scrollbar{ appearance: none; background-clip: padding-box; background-color: transparent; border-radius: var(--rounded-full); width: var(--sp-1d5); } :where(.sn-tso-article) .drawer__scrollable::-webkit-scrollbar-thumb{ background-clip: padding-box; background-color: rgb(var(--color-foreground)/ .2); border-radius: var(--rounded-full); } :where(.sn-tso-article) .text-left .split-words{ justify-content: flex-start; } @media screen and (min-width: 768px) { :where(.sn-tso-article) .md\:text-left .split-words{ justify-content: flex-start; } } :where(.sn-tso-article) .split-words .word{ display: inline-flex; line-height: 1; margin: -0.1em -0.05em; overflow: hidden; padding: 0.15em 0.05em; } :where(.sn-tso-article) [lang="en"] .split-words .word{ padding-block: 0.08em; } :where(.sn-tso-article) .banner{ color: rgb(var(--color-foreground)); } :where(.sn-tso-article) .banner__overlay{ z-index: 0; background-color: rgb(var(--color-overlay)/ var(--overlay-opacity)); } :where(.sn-tso-article) .banner__overlay ~ .banner__content{ --color-background: var(--color-overlay); } :where(.sn-tso-article) .banner__box{ overflow-wrap: break-word; height: fit-content; padding-block: clamp(var(--sp-10),3.368vw,var(--sp-16)); } @media screen and (min-width: 768px) { :where(.sn-tso-article) .banner__box{ width: auto; min-width: 45rem; max-width: 64rem; } } :where(.sn-tso-article) .banner__box > * + :not(.spacing-section){ margin-block-start: var(--sp-5); } :where(.sn-tso-article) .banner__title + *, :where(.sn-tso-article) .banner__box > :last-child:is(.button, .social-icons){ margin-block-start: var(--sp-10); } :where(.sn-tso-article) .js .section:not(.section--next-rounded) :is(.banner__overlay, .banner__map, .banner__media){ height: calc(100% + var(--border-radius)); } :where(.sn-tso-article) .js .section--rounded :is(.banner__map, .banner__media, .banner__overlay, .video-hero){ border-start-end-radius: var(--border-radius); border-start-start-radius: var(--border-radius); } :where(.sn-tso-article) .badge{ --badge-background: rgb(var(--color-foreground)); --badge-foreground: rgb(var(--color-background)); background-color: var(--badge-background); color: var(--badge-foreground); padding: var(--sp-1d5) var(--sp-2d5); font-size: var(--text-2xs); border-radius: var(--rounded-button); width: max-content; } @media screen and (min-width: 768px) { :where(.sn-tso-article) .badge{ padding: var(--sp-2d5) var(--sp-4); font-size: var(--text-sm); } } @media screen and (max-width: 639px) { :where(.sn-tso-article) .js .share-drawer .drawer__inner{ height: auto; } } :where(.sn-tso-article) .share-buttons li + li{ border-block-start: 1px solid rgb(var(--color-border)); } :where(.sn-tso-article) .share-buttons a{ padding: var(--sp-3d5) var(--sp-2d5); } :where(.sn-tso-article) .share-buttons li:first-child a{ padding-block-start: 0px; } :where(.sn-tso-article) .share-buttons li:last-child a{ padding-block-end: 0px; } :where(.sn-tso-article) .share-buttons .icon-facebook{ fill: rgb(59, 89, 152); } :where(.sn-tso-article) .share-buttons .icon-twitter{ fill: rgb(0, 172, 238); } :where(.sn-tso-article) .share-buttons .icon-pinterest{ fill: rgb(230, 0, 35); } :where(.sn-tso-article) .share-buttons .icon-telegram{ fill: rgb(51, 144, 247); } :where(.sn-tso-article) .share-buttons .icon-whatsapp{ fill: rgb(37, 211, 102); } :where(.sn-tso-article) .social-sharing li{ width: var(--sp-10); height: var(--sp-10); } :where(.sn-tso-article) .social-sharing .social-sharing__link{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } :where(.sn-tso-article) .social-sharing .social-sharing__link .icon{ width: var(--sp-4d5); height: var(--sp-4d5); } :where(.sn-tso-article) .nik-product__description, :where(.sn-tso-article) .product__description, :where(.sn-tso-article) .product-description, :where(.sn-tso-article) .rte{ color: var(--tso-ink-2); font-size: 15px; line-height: 1.65; } :where(.sn-tso-article) .nik-product__description h2, :where(.sn-tso-article) .nik-product__description h3, :where(.sn-tso-article) .nik-product__description h4, :where(.sn-tso-article) .product__description h2, :where(.sn-tso-article) .product__description h3, :where(.sn-tso-article) .product__description h4, :where(.sn-tso-article) .product-description h2, :where(.sn-tso-article) .product-description h3, :where(.sn-tso-article) .product-description h4, :where(.sn-tso-article) .rte h2, :where(.sn-tso-article) .rte h3, :where(.sn-tso-article) .rte h4{ color: var(--tso-ink); font-weight: var(--tso-fw-semi); letter-spacing: -0.005em; margin-top: 1.8em; margin-bottom: 0.5em; line-height: 1.3; } :where(.sn-tso-article) .nik-product__description h2, :where(.sn-tso-article) .product__description h2, :where(.sn-tso-article) .product-description h2, :where(.sn-tso-article) .rte h2{ font-size: 22px; } :where(.sn-tso-article) .nik-product__description h3, :where(.sn-tso-article) .product__description h3, :where(.sn-tso-article) .product-description h3, :where(.sn-tso-article) .rte h3{ font-size: 18px; } :where(.sn-tso-article) .nik-product__description > :first-child, :where(.sn-tso-article) .product__description > :first-child, :where(.sn-tso-article) .product-description > :first-child, :where(.sn-tso-article) .rte > :first-child{ margin-top: 0px; } :where(.sn-tso-article) .nik-product__description ul, :where(.sn-tso-article) .product__description ul, :where(.sn-tso-article) .product-description ul, :where(.sn-tso-article) .rte ul{ padding-left: 1.1em; margin: 0.4em 0px 1.2em; } :where(.sn-tso-article) .nik-product__description ul li, :where(.sn-tso-article) .product__description ul li, :where(.sn-tso-article) .product-description ul li, :where(.sn-tso-article) .rte ul li{ margin: 0.35em 0px; } :where(.sn-tso-article) .nik-product__description strong, :where(.sn-tso-article) .product__description strong, :where(.sn-tso-article) .product-description strong, :where(.sn-tso-article) .rte strong{ color: var(--tso-ink); font-weight: var(--tso-fw-semi); } :where(.sn-tso-article) .nik-product__description table, :where(.sn-tso-article) .product__description table, :where(.sn-tso-article) .product-description table, :where(.sn-tso-article) .rte table{ width: 100%; border: 1px solid var(--tso-line); border-radius: var(--tso-r-md); border-collapse: separate; border-spacing: 0px; overflow: hidden; font-size: 15px; margin: 1em 0px 1.5em; background: var(--tso-bg); } :where(.sn-tso-article) .nik-product__description table td, :where(.sn-tso-article) .product__description table td, :where(.sn-tso-article) .product-description table td, :where(.sn-tso-article) .rte table td{ padding: 12px 16px; border-bottom: 1px solid var(--tso-line); color: var(--tso-ink-2); vertical-align: middle; } :where(.sn-tso-article) .nik-product__description table tr td:first-child, :where(.sn-tso-article) .product__description table tr td:first-child, :where(.sn-tso-article) .product-description table tr td:first-child, :where(.sn-tso-article) .rte table tr td:first-child{ background: var(--tso-bg-soft); color: var(--tso-ink); font-weight: var(--tso-fw-semi); width: 42%; border-right: 1px solid var(--tso-line); } :where(.sn-tso-article) .nik-product__description table tr:last-child td, :where(.sn-tso-article) .product__description table tr:last-child td, :where(.sn-tso-article) .product-description table tr:last-child td, :where(.sn-tso-article) .rte table tr:last-child td{ border-bottom: 0px; } :where(.sn-tso-article) h1.title-lg{ font-size: calc(var(--title-lg) * 1.1 - 4px); } :where(.sn-tso-article) .article .rte::after{ content: ""; display: block; clear: both; } :where(.sn-tso-article) .rte div:where(.tso-table-scroll){ clear: both; margin: 15px -1px 22.5px; padding: 1px; overflow-x: auto; overscroll-behavior-x: contain; } :where(.sn-tso-article) .rte .tso-table-scroll > table{ margin: 0px; } @media screen and (max-width: 767px) { :where(.sn-tso-article) .rte .tso-table-scroll > table:has(tr > :nth-child(3)){ min-width: 520px; } :where(.sn-tso-article) .rte .tso-table-scroll > table:has(tr > :nth-child(4)){ min-width: 620px; } :where(.sn-tso-article) .rte .tso-table-scroll > table:has(tr > :nth-child(5)){ min-width: 720px; } :where(.sn-tso-article) .rte .tso-table-scroll > table:has(tr > :nth-child(6)){ min-width: 820px; } :where(.sn-tso-article) .rte .tso-table-scroll > table:has(tr > :nth-child(3)) tr td:first-child{ width: auto; } } :where(.sn-tso-article) .tso-bfloat{ --tso-bfloat-lift: 0px; position: fixed; left: 0px; right: 0px; bottom: var(--tso-bfloat-lift); z-index: 30; pointer-events: none; } :where(.sn-tso-article) .tso-bfloat__panel{ position: relative; margin: 0 var(--sp-2, 8px) calc(var(--sp-2, 8px) + env(safe-area-inset-bottom)); padding: var(--sp-2d5, 10px) 40px var(--sp-2d5, 10px) var(--sp-2d5, 10px); background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); border: 1px solid rgb(var(--color-foreground) / .12); border-radius: 14px; box-shadow: 0 10px 30px rgb(var(--color-foreground) / .18); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(calc(100% + 24px)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s, visibility linear 0.35s; } :where(.sn-tso-article) .tso-bfloat__close{ position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0px; border: 0px; border-radius: 50%; background: transparent; color: rgb(var(--color-foreground) / .6); cursor: pointer; } :where(.sn-tso-article) .tso-bfloat__close:hover{ color: rgb(var(--color-foreground)); background: rgb(var(--color-foreground) / .06); } :where(.sn-tso-article) .tso-bfloat__close:focus-visible{ outline: 2px solid rgb(var(--color-foreground)); outline-offset: 1px; } @media screen and (min-width: 768px) { :where(.sn-tso-article) .tso-bfloat{ left: 0px; right: 0px; bottom: calc(var(--sp-6, 24px) + var(--tso-bfloat-lift)); width: 440px; margin-inline: auto; } :where(.sn-tso-article) .tso-bfloat__panel{ margin: 0px; padding: var(--sp-3d5, 14px) 44px var(--sp-3d5, 14px) var(--sp-3d5, 14px); border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { :where(.sn-tso-article) .tso-bfloat__panel, :where(.sn-tso-article) .tso-bfloat__panel.is-visible{ transition: none; } } :where(.sn-tso-article) .article__top{ row-gap: var(--sp-2); } :where(.sn-tso-article) .article__top li{ padding-inline-end: var(--sp-4); } :where(.sn-tso-article) .article__top li::after{ content: ""; position: absolute; inset-inline-end: 0px; width: 1px; height: 16px; background-color: currentcolor; opacity: 0.3; } :where(.sn-tso-article) .article__top li:last-child{ padding-inline-end: 0px; } :where(.sn-tso-article) .article__top li:last-child::after{ content: none; } :where(.sn-tso-article) .article__top .icon{ width: var(--sp-4); height: var(--sp-4); } :where(.sn-tso-article) .article .badge{ padding: var(--sp-2) var(--sp-4); font-size: var(--text-3xs); color: var(--badge-foreground); background-color: var(--badge-background); } @media screen and (pointer: fine) { :where(.sn-tso-article) .article .badge{ --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-article) .article .badge:hover{ --tw-scale-x: 1.05; --tw-scale-y: 1.05; } :where(.sn-tso-article) .article .banner__media ~ .banner__content .badge{ transition-property: transform; } } @media screen and (min-width: 768px) { :where(.sn-tso-article) .article .badge{ padding: var(--sp-2d5) var(--sp-4d5); font-size: var(--text-xs); } } :where(.sn-tso-article) .article .banner__title + *{ margin-block-start: 0px; } :where(.sn-tso-article) .article .rte > :first-child{ margin-block-start: 0px; } :where(.sn-tso-article) .comments-section{ padding-block: clamp(40px, 5vw, 80px); } :where(.sn-tso-article) .comments-section::before{ background-color: rgb(var(--color-foreground)/ .025); } :where(.sn-tso-article) .comments-section :is(.article-card, .new-comment, .comment-card){ background-color: rgb(var(--color-background)); padding: var(--sp-5); border-radius: var(--rounded-block); } @media screen and (min-width: 1024px) { :where(.sn-tso-article) .comments-section > .grid{ gap: var(--sp-15); } :where(.sn-tso-article) .comments-section .article-card{ padding: var(--sp-7d5) var(--sp-10); } } @media screen and (min-width: 1280px) { :where(.sn-tso-article) .comments-section .page-width--narrow .article-card:nth-child(1){ margin-inline-start: calc(var(--sp-20) * -1); } :where(.sn-tso-article) .comments-section .page-width--narrow .article-card:nth-child(2){ margin-inline-end: calc(var(--sp-20) * -1); } } @keyframes spin { 100% { rotate: -360deg; } } #shopify-section-template--27686111412610__main-article-banner { --section-padding-top: 0px; --section-padding-bottom: 0px; --color-foreground: 255 255 255; --color-border: var(--color-foreground)/ 0.1; --color-border-dark: var(--color-foreground)/ 0.4; --color-border-light: var(--color-foreground)/ 0.06;--color-overlay: 23 23 23;--overlay-opacity: 0.3;} #shopify-section-template--27686111412610__main-article { --section-padding-top: 72px; --section-padding-bottom: 72px; }