:root[data-theme="shop3"] [data-visual="catalogue-shell"]:has(> main > .s3p-page) { max-width: none; padding: 0; gap: 0; }
.s3p-page {
position: relative;
margin-top: calc(-1 * var(--s3-bar));
color: var(--s3-t1);
font: 400 16px/1.5 var(--s3-sans);
letter-spacing: -.011em;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
:where(.s3p-page) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.s3p-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.s3p-page) :where(a) { color: inherit; text-decoration: none; }
:where(.s3p-page) :where(img, svg) { display: block; max-width: 100%; }
:where(.s3p-page) :where(img) { height: auto; }
:where(.s3p-page) :where(button, input) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.s3p-page) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
.s3p-page :focus-visible { outline: 2px solid var(--s3-accent-2); outline-offset: 3px; border-radius: 8px; }
.s3p-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3p-wrap { width: var(--s3-wrap); margin-inline: auto; }
.s3p-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.s3p-ico--sm { width: 16px; height: 16px; }
.s3p-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 16px; font: 600 16px/1 var(--s3-sans); letter-spacing: -.015em; white-space: nowrap; transition: transform .4s var(--s3-ease), box-shadow .4s var(--s3-ease), opacity .4s var(--s3-ease); }
.s3p-btn--primary {
color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff) 0%, var(--s3-accent) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px color-mix(in srgb, var(--s3-accent) 65%, transparent), 0 8px 24px color-mix(in srgb, var(--s3-accent) 42%, transparent), 0 24px 48px color-mix(in srgb, var(--s3-accent) 18%, transparent);
}
.s3p-btn--primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px color-mix(in srgb, var(--s3-accent) 70%, transparent), 0 12px 32px color-mix(in srgb, var(--s3-accent) 55%, transparent), 0 32px 64px color-mix(in srgb, var(--s3-accent) 24%, transparent); }
.s3p-btn--primary .s3p-ico { transition: transform .4s var(--s3-ease); }
.s3p-btn--primary:hover .s3p-ico { transform: translateX(3px); }
.s3p-iconbtn { width: 40px; height: 40px; border-radius: 999px; display: inline-grid; place-items: center; position: relative; transition: background .4s var(--s3-ease), box-shadow .4s var(--s3-ease), color .4s var(--s3-ease), transform .4s var(--s3-ease); }
.s3p-link { display: inline-flex; align-items: center; gap: 8px; font: 500 16px/1 var(--s3-sans); color: var(--s3-accent); padding-bottom: 4px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--s3-accent) 30%, transparent); transition: gap .4s var(--s3-ease), box-shadow .4s var(--s3-ease); }
.s3p-link:hover { gap: 12px; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--s3-accent) 90%, transparent); }
.s3p-bg { position: absolute; inset: 0; overflow: hidden;
background:
radial-gradient(56% 66% at 71% 47%, color-mix(in srgb, var(--s3-accent) 52%, transparent) 0%, color-mix(in srgb, var(--s3-accent) 22%, transparent) 36%, color-mix(in srgb, var(--s3-accent) 0%, transparent) 68%),
radial-gradient(44% 58% at 4% 100%, color-mix(in srgb, var(--s3-navy) 95%, transparent) 0%, color-mix(in srgb, var(--s3-navy) 0%, transparent) 72%),
radial-gradient(40% 40% at 100% 0%, rgba(20, 60, 170, .45) 0%, rgba(20, 60, 170, 0) 70%),
linear-gradient(158deg, var(--s3-ink) 0%, color-mix(in srgb, var(--s3-ink) 55%, var(--s3-navy)) 48%, var(--s3-navy) 100%);
}
.s3p-bg__light { position: absolute; width: 64vmax; height: 64vmax; left: 71%; top: 47%; margin: -32vmax 0 0 -32vmax; border-radius: 50%;
background: radial-gradient(closest-side, rgba(60, 130, 255, .20), rgba(60, 130, 255, .07) 45%, rgba(60, 130, 255, 0)); animation: s3p-breathe 10s var(--s3-ease) infinite; }
@keyframes s3p-breathe { 50% { transform: scale(1.07); opacity: .72; } }
.s3p-bg__grid { position: absolute; inset: 0;
background-image: linear-gradient(90deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px);
background-size: 64px 64px; background-position: calc(50% + 32px) 0;
-webkit-mask-image: radial-gradient(70% 70% at 66% 48%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%);
mask-image: radial-gradient(70% 70% at 66% 48%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 80%); }
.s3p-bg__noise { position: absolute; inset: 0; opacity: .05; mix-blend-mode: screen;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.s3p-sheets { position: relative; z-index: 2; margin-top: calc(var(--s3-r-sheet) * -1); }
.s3p-sheet { position: relative; border-radius: var(--s3-r-sheet) var(--s3-r-sheet) 0 0; margin-top: calc(var(--s3-r-sheet) * -1); padding: calc(var(--s3-r-sheet) + 88px) 0 calc(var(--s3-r-sheet) + 104px); overflow: clip; }
.s3p-sheet--first { padding-top: calc(var(--s3-r-sheet) + 64px); margin-top: 0; box-shadow: 0 -40px 80px -24px rgba(2, 6, 23, .55), inset 0 1px 0 rgba(255, 255, 255, .9); }
.s3p-sheet--white { background: radial-gradient(64% 48% at 0% 0%, color-mix(in srgb, var(--s3-sky-2) 55%, transparent) 0%, color-mix(in srgb, var(--s3-sky-2) 0%, transparent) 70%), radial-gradient(48% 40% at 100% 100%, rgba(226, 236, 255, .6), rgba(226, 236, 255, 0) 70%), #ffffff; }
.s3p-sheet--pale { background: radial-gradient(60% 50% at 100% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f3f7ff 0%, #eaf1ff 100%); box-shadow: 0 -24px 48px -24px color-mix(in srgb, var(--s3-ink) 14%, transparent), inset 0 1px 0 #fff; }
.s3p-sheet--white:not(.s3p-sheet--first) { box-shadow: 0 -24px 48px -24px color-mix(in srgb, var(--s3-ink) 14%, transparent), inset 0 1px 0 #fff; }
.s3p-sheet--blue { color: #fff; background: linear-gradient(162deg, var(--s3-ink) 0%, color-mix(in srgb, var(--s3-ink) 45%, var(--s3-navy)) 52%, var(--s3-navy) 100%); box-shadow: 0 -24px 56px -24px color-mix(in srgb, var(--s3-ink) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--s3-sky) 22%, transparent); }
.s3p-sheet--blue__fx { position: absolute; inset: 0; pointer-events: none; }
.s3p-fx-light { position: absolute; inset: 0; background: radial-gradient(50% 70% at 88% 0%, color-mix(in srgb, var(--s3-accent) 60%, transparent), color-mix(in srgb, var(--s3-accent) 0%, transparent) 70%), radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--s3-accent-2) 22%, transparent), color-mix(in srgb, var(--s3-accent-2) 0%, transparent) 70%); }
.s3p-fx-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px); background-size: 64px 64px; background-position: calc(50% + 32px) 0; -webkit-mask-image: radial-gradient(80% 90% at 80% 10%, #000, transparent 75%); mask-image: radial-gradient(80% 90% at 80% 10%, #000, transparent 75%); }
.s3p-fx-noise { position: absolute; inset: 0; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.s3p-sheet--blue .s3p-wrap { position: relative; }
.s3p-fx-ring { position: absolute; right: -6%; top: 6%; width: 64%; overflow: visible; fill: none; stroke: color-mix(in srgb, var(--s3-sky) 22%, transparent); stroke-width: 1; }
.s3p-fx-ring ellipse,
.s3p-fx-ring line { vector-effect: non-scaling-stroke; }
.s3p-fx-ring__o { stroke: color-mix(in srgb, var(--s3-sky-2) 30%, transparent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--s3-accent-2) 60%, transparent)); }
.s3p-fx-ring__i { stroke: color-mix(in srgb, var(--s3-accent-2) 22%, transparent); }
.s3p-fx-ring__t line { stroke: color-mix(in srgb, var(--s3-sky) 32%, transparent); }
.s3p-h2 { font: 600 clamp(34px, 3.9vw, 56px)/1.02 var(--s3-sans); letter-spacing: -.04em; color: var(--s3-t1); text-wrap: balance; max-width: 16em; }
.s3p-h2--md { font-size: clamp(30px, 2.9vw, 42px); }
.s3p-h2__dim { background: linear-gradient(98deg, #7d89a3 0%, #a7b5d0 70%, #bfcbe2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3p-h2--dark { color: #fff; }
.s3p-h2--dark .s3p-h2__dim { background: linear-gradient(98deg, var(--s3-sky-2) 0%, #8fb6ff 60%, rgba(120, 165, 255, .45) 100%); -webkit-background-clip: text; background-clip: text; }
.s3p-obj { position: absolute; left: 50%; top: var(--oy, 42%); width: var(--os, 70%); aspect-ratio: 1; margin-left: calc(var(--os, 70%) / -2); margin-top: calc(var(--os, 70%) / -2); pointer-events: none; }
.s3p-obj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--s3-ease); }
.s3p-obj__sh { position: absolute; left: 50%; top: var(--ob, 80%); width: calc(var(--ow, 50%) * .9); margin-left: calc(var(--ow, 50%) * -.45); margin-top: -1.6%; aspect-ratio: 6 / 1; border-radius: 50%;
background: radial-gradient(closest-side, color-mix(in srgb, var(--s3-ink) 26%, transparent), color-mix(in srgb, var(--s3-ink) 11%, transparent) 45%, color-mix(in srgb, var(--s3-ink) 0%, transparent)); transition: transform .8s var(--s3-ease), opacity .8s var(--s3-ease); }
.s3p-pc:hover .s3p-obj img { transform: translate3d(0, -3.5%, 0) scale(1.03); }
.s3p-pc:hover .s3p-obj__sh { transform: scale(.82); opacity: .62; }
.s3p-pc { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; padding: 8px; border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(250, 252, 255, .92) 100%);
box-shadow: var(--s3-sh-1), inset 0 1px 0 #fff, inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 4%, transparent); transition: transform .6s var(--s3-ease), box-shadow .6s var(--s3-ease); }
.s3p-pc:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s3-accent) 22%, transparent), 0 0 0 6px color-mix(in srgb, var(--s3-accent) 5%, transparent), var(--s3-sh-2); }
.s3p-pc__stage { position: relative; isolation: isolate; aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: linear-gradient(165deg, var(--s3-pale) 0%, var(--s3-pale-2) 72%); }
.s3p-pc__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 32%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 70%); }
.s3p-pc__stage .s3p-obj { --os: 84%; --oy: 50%; }
.s3p-tinka { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 12px 0 4px; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
font: 600 12.5px/1 var(--s3-sans); color: var(--s3-ok-ink); background: rgba(255, 255, 255, .82); box-shadow: inset 0 0 0 1px rgba(18, 179, 110, .22), 0 4px 12px color-mix(in srgb, var(--s3-ink) 6%, transparent);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transform: translate3d(0, -6px, 0) scale(.94); transition: opacity .5s var(--s3-ease), transform .6s var(--s3-ease); }
.s3p-tinka__c { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--s3-ok); box-shadow: 0 0 8px rgba(18, 179, 110, .5); }
.s3p-tinka__c svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.s3p-pc.s3p-is-fit .s3p-tinka { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 80ms + 200ms); }
.s3p-pc.s3p-is-fit .s3p-pc__stage { box-shadow: inset 0 0 0 1px rgba(18, 179, 110, .14); }
.s3p-pc__b { padding: 16px 12px 0; }
.s3p-pc__brand { font: 600 12px/1 var(--s3-sans); letter-spacing: .08em; color: var(--s3-t1); }
.s3p-pc__mpn { margin-left: 4px; font: 400 12px/1 var(--s3-mono); letter-spacing: 0; color: var(--s3-t3); }
.s3p-pc__n { margin-top: 8px; font: 500 16px/1.35 var(--s3-sans); letter-spacing: -.015em; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s3p-pc__n a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.s3p-pc__f { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 4px 4px 12px; margin-top: auto; }
.s3p-price { display: inline-flex; align-items: baseline; font: 600 28px/1 var(--s3-sans); letter-spacing: -.04em; color: var(--s3-t1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s3p-price__c { font-size: .56em; letter-spacing: -.01em; transform: translateY(-.64em); display: inline-block; }
.s3p-price__e { margin-left: .22em; font-size: .5em; font-weight: 500; color: var(--s3-t3); letter-spacing: 0; transform: translateY(-.76em); display: inline-block; }
.s3p-add { position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff;
background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px color-mix(in srgb, var(--s3-accent) 60%, transparent), 0 8px 20px color-mix(in srgb, var(--s3-accent) 38%, transparent);
transition: transform .4s var(--s3-ease), box-shadow .4s var(--s3-ease), background .4s var(--s3-ease); }
.s3p-add:hover { transform: scale(1.06); }
.s3p-add svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .3s var(--s3-ease), transform .4s var(--s3-ease); }
.s3p-add__k { opacity: 0; transform: scale(.6); }
.s3p-add.s3p-is-done { background: linear-gradient(180deg, #22c47d, #0e9f60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(14, 159, 96, .6), 0 8px 20px rgba(14, 159, 96, .38); }
.s3p-add.s3p-is-done .s3p-add__p { opacity: 0; transform: scale(.6) rotate(90deg); }
.s3p-add.s3p-is-done .s3p-add__k { opacity: 1; transform: none; }
.s3p-trust { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s3p-tcard { position: relative; overflow: hidden; padding: 32px; border-radius: 28px; color: #fff;
background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .16), 0 24px 64px rgba(2, 6, 30, .32);
-webkit-backdrop-filter: var(--s3-blur); backdrop-filter: var(--s3-blur); }
.s3p-tcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 50% at 0% 0%, rgba(90, 150, 255, .18), rgba(90, 150, 255, 0) 70%); }
.s3p-tcard__ic { position: relative; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #dce9ff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 24px color-mix(in srgb, var(--s3-accent-2) 35%, transparent); }
.s3p-tcard__ic .s3p-ico { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(90, 150, 255, .8)); }
.s3p-tcard__fig { position: relative; margin-top: 40px; font: 600 clamp(40px, 3.6vw, 52px)/1 var(--s3-sans); letter-spacing: -.04em; background: linear-gradient(180deg, #fff 30%, #a9c8ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3p-tcard__pays { position: relative; margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; align-items: center; }
.s3p-tcard__pays li { height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 12px; font: 600 15px/1 var(--s3-sans); letter-spacing: -.02em; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .14); }
.s3p-tcard__h { position: relative; margin-top: 16px; font: 600 19px/1.3 var(--s3-sans); letter-spacing: -.025em; }
.s3p-tcard__p { position: relative; margin-top: 8px; font: 400 15px/1.55 var(--s3-sans); color: var(--s3-d2); max-width: 26em; }
.s3p-faq { margin-top: 24px; display: grid; gap: 8px; }
.s3p-faq__i { border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 252, 255, .88)); box-shadow: var(--s3-sh-1), inset 0 1px 0 #fff; transition: box-shadow .4s var(--s3-ease); }
.s3p-faq__i[open] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--s3-accent) 12%, transparent), var(--s3-sh-1); }
.s3p-faq__q { list-style: none; cursor: pointer; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; font: 500 16.5px/1.35 var(--s3-sans); letter-spacing: -.015em; }
.s3p-faq__q::-webkit-details-marker { display: none; }
.s3p-faq__pm { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--s3-accent) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 10%, transparent); }
.s3p-faq__pm::before,
.s3p-faq__pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; border-radius: 2px; background: var(--s3-accent); transition: transform .4s var(--s3-ease); }
.s3p-faq__pm::after { transform: rotate(90deg); }
.s3p-faq__i[open] .s3p-faq__pm::after { transform: rotate(0deg); }
.s3p-faq__a { padding: 0 24px 24px; font: 400 15.5px/1.6 var(--s3-sans); color: var(--s3-t2); max-width: 34em; }
.s3p-rv { transition: opacity .9s var(--s3-ease), transform 1s var(--s3-ease); transition-delay: calc(var(--i, 0) * 60ms); }
html[data-s3-rv] .s3p-rv:not([data-in]) { opacity: 0; transform: translate3d(0, 24px, 0); }
.s3p-pc.s3p-rv[data-in] { transition: opacity .9s var(--s3-ease), transform .6s var(--s3-ease), box-shadow .6s var(--s3-ease); }
@media (max-width: 760px) {
.s3p-sheet { padding: calc(var(--s3-r-sheet) + 56px) 0 calc(var(--s3-r-sheet) + 72px); }
.s3p-h2 { font-size: 34px; }
.s3p-trust { margin-top: 32px; }
.s3p-tcard { padding: 24px; }
.s3p-tcard__fig,
.s3p-tcard__pays { margin-top: 24px; }
}
@media (max-width: 980px) { .s3p-trust { grid-template-columns: 1fr; } }
@media (max-width: 899px) {
.s3p-sheet--first { box-shadow: 0 -12px 32px -12px rgba(2, 6, 23, .45), inset 0 1px 0 rgba(255, 255, 255, .9); }
}
@media (prefers-reduced-motion: reduce) { .s3p-bg__light { animation: none; } .s3p-pc { transition: none; } }
html:has(.s3p-page) { scroll-padding-top: 136px; }
.s3p-page .s3p-sheets { margin-top: calc(var(--s3-r-sheet) * -1); }
.s3p-page .s3p-sheet--first { padding-top: calc(var(--s3-r-sheet) + 16px); }
.s3p-nowrap { white-space: nowrap; }
.s3p-mono { font-family: var(--s3-mono); letter-spacing: 0; }
.s3p-lbl { font: 500 11px/1.2 var(--s3-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--s3-t3); }
.s3p-lead3 { margin-top: 20px; max-width: 34em; font: 400 17px/1.6 var(--s3-sans); color: var(--s3-t2); text-wrap: pretty; }
.s3p-h2--dark + .s3p-lead3,
.s3p-sheet--blue .s3p-lead3 { color: var(--s3-d2); }
.s3p-band { position: relative; z-index: 1; overflow: hidden; color: #fff; background: var(--s3-ink); }
.s3p-band .s3p-bg__light { left: 78%; top: 20%; }
.s3p-band__in { position: relative; z-index: 2; }
.s3p-band__ring { right: -4%; top: 34%; width: 52%; opacity: .75; }
.s3p-crumbs-w { display: inline-flex; max-width: 100%; }
.s3p-crumbs {
display: flex; align-items: center; min-height: 36px; padding: 6px 16px 6px 12px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
background: var(--s3-glass); box-shadow: inset 0 0 0 1px var(--s3-glass-bd), inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: var(--s3-blur); backdrop-filter: var(--s3-blur);
font: 500 13px/1.2 var(--s3-sans); letter-spacing: -.005em; color: var(--s3-d3); white-space: nowrap;
}
.s3p-crumbs::-webkit-scrollbar { display: none; }
.s3p-crumbs li { display: inline-flex; align-items: center; flex: none; }
.s3p-crumbs li:first-child::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: color-mix(in srgb, var(--s3-accent-2) 70%, var(--s3-sky)); box-shadow: 0 0 0 3px rgba(106, 165, 255, .18), 0 0 10px color-mix(in srgb, var(--s3-accent-2) 80%, var(--s3-sky)); }
.s3p-crumbs li + li::before { content: ""; width: 14px; height: 14px; margin: 0 6px; opacity: .55;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfe0ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.s3p-crumbs a { color: var(--s3-d2); transition: color .3s var(--s3-ease); }
.s3p-crumbs a:hover { color: #fff; }
.s3p-crumbs [aria-current] { color: #fff; }
.s3p-gchip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font: 500 13px/1 var(--s3-sans); color: var(--s3-d2);
background: var(--s3-glass); box-shadow: inset 0 0 0 1px var(--s3-glass-bd); -webkit-backdrop-filter: var(--s3-blur); backdrop-filter: var(--s3-blur); white-space: nowrap; }
.s3p-gchip--lit { color: #fff; background: linear-gradient(180deg, rgba(58, 128, 255, .5), color-mix(in srgb, var(--s3-accent) 32%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px color-mix(in srgb, var(--s3-accent) 35%, transparent), 0 8px 24px color-mix(in srgb, var(--s3-accent) 45%, transparent), 0 0 32px color-mix(in srgb, var(--s3-accent-2) 30%, transparent); }
.s3p-gchip--lit i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px #fff, 0 0 16px color-mix(in srgb, var(--s3-accent-2) 70%, var(--s3-sky)); }
.s3p-btn--glass { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .16); -webkit-backdrop-filter: var(--s3-blur); backdrop-filter: var(--s3-blur); }
.s3p-btn--glass:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 24px rgba(2, 6, 30, .4); }
.s3p-stk { display: inline-flex; align-items: center; gap: 8px; font: 500 13.5px/1.2 var(--s3-sans); color: var(--s3-ok-ink); white-space: nowrap; }
.s3p-stk::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--s3-ok); box-shadow: 0 0 0 3px rgba(18, 179, 110, .16), 0 0 10px rgba(18, 179, 110, .55); }
.s3p-stk--out { color: var(--s3-t3); }
.s3p-stk--out::before { background: #b8c6e0; box-shadow: none; }
.s3p-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.s3p-shead .s3p-lead3 { margin-top: 0; max-width: 30em; }
.s3p-shead + * { margin-top: 48px; }
.s3p-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.s3p-split__h { position: sticky; top: 144px; }
.s3p-pslot { height: 52px; margin-top: 64px; }
.s3p-pnav { position: relative; z-index: 45; display: flex; max-width: 100%; }
.s3p-pnav.s3p-is-stuck { position: fixed; top: calc(var(--s3-bar) + 12px); left: max(64px, (100vw - 1280px) / 2); max-width: calc(100vw - 128px); animation: s3p-pin-in .5s var(--s3-ease) both; }
@keyframes s3p-pin-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
.s3p-pnav__in { position: relative; display: flex; gap: 2px; max-width: 100%; padding: 6px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .74)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent), inset 0 1px 0 #fff, 0 1px 2px color-mix(in srgb, var(--s3-ink) 5%, transparent), 0 12px 32px color-mix(in srgb, var(--s3-ink) 8%, transparent); }
.s3p-pnav__in::-webkit-scrollbar { display: none; }
.s3p-pnav.s3p-is-stuck { top: var(--s3-bar); left: 0; right: 0; max-width: none; padding: 8px max(64px, (100vw - 1280px) / 2);
background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .94)); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--s3-accent) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--s3-ink) 6%, transparent); }
.s3p-pnav.s3p-is-stuck .s3p-pnav__in { background: var(--s3-pale); -webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent); }
.s3p-pnav a { position: relative; z-index: 1; flex: none; height: 40px; padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
font: 500 14px/1 var(--s3-sans); letter-spacing: -.01em; color: var(--s3-t2); transition: color .4s var(--s3-ease); }
.s3p-pnav a:hover { color: var(--s3-t1); }
.s3p-pnav a small { font: 500 11px/1 var(--s3-mono); color: var(--s3-t4); transition: color .4s var(--s3-ease); }
.s3p-pnav a.s3p-is-on { color: #fff; }
.s3p-pnav a.s3p-is-on small { color: color-mix(in srgb, var(--s3-sky-2) 80%, transparent); }
.s3p-pnav__pill { position: absolute; left: 0; top: 6px; height: 40px; width: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--s3-ease); }
.s3p-pnav__pill.s3p-is-on { opacity: 1; }
.s3p-pnav__pill span { position: absolute; top: 0; left: 0; height: 40px; background: var(--s3-accent); transition: transform .55s var(--s3-ease); }
.s3p-pnav__pill .s3p-pl,
.s3p-pnav__pill .s3p-pr { width: 40px; border-radius: 50%; }
.s3p-pnav__pill .s3p-pm { width: 100px; transform-origin: 0 0; }
.s3p-pnav__pill .s3p-pl { background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--s3-accent) 35%, transparent); }
.s3p-pnav__pill .s3p-pr { background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--s3-accent) 35%, transparent); }
.s3p-pnav__pill .s3p-pm { background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--s3-accent) 30%, transparent); }
.s3p-dpanel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; color: #fff;
background: linear-gradient(160deg, var(--s3-ink) 0%, color-mix(in srgb, var(--s3-ink) 30%, var(--s3-navy)) 62%, var(--s3-navy) 100%); box-shadow: var(--s3-sh-2), inset 0 1px 0 color-mix(in srgb, var(--s3-sky) 20%, transparent); }
.s3p-dpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 80% at 100% 0%, color-mix(in srgb, var(--s3-accent) 55%, transparent), color-mix(in srgb, var(--s3-accent) 0%, transparent) 70%), radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--s3-accent-2) 18%, transparent), color-mix(in srgb, var(--s3-accent-2) 0%, transparent) 70%); }
.s3p-dpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(90deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--s3-sky) 7%, transparent) 1px, transparent 1px); background-size: 32px 32px;
-webkit-mask-image: radial-gradient(90% 90% at 100% 0%, #000, transparent 85%); mask-image: radial-gradient(90% 90% at 100% 0%, #000, transparent 85%); }
.s3p-oel { display: grid; gap: 8px; padding: 16px; }
.s3p-oel__i { position: relative; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 12px 12px 12px 16px; border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .08);
transition: box-shadow .5s var(--s3-ease), background .5s var(--s3-ease); }
.s3p-oel__i:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .05)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 32px color-mix(in srgb, var(--s3-accent-2) 18%, transparent); }
.s3p-oel__mk { flex: none; min-width: 44px; height: 26px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 8px; font: 600 11px/1 var(--s3-mono); letter-spacing: .1em; color: var(--s3-sky);
background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 22%, transparent); }
.s3p-oel__no { flex: 1; min-width: 0; font: 500 clamp(19px, 1.7vw, 24px)/1.1 var(--s3-mono); letter-spacing: -.01em; color: #fff; white-space: nowrap;
text-shadow: 0 0 12px rgba(120, 170, 255, .5), 0 0 32px color-mix(in srgb, var(--s3-accent-2) 35%, transparent); transition: text-shadow .5s var(--s3-ease); }
.s3p-oel__no::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.s3p-oel__i:hover .s3p-oel__no { text-shadow: 0 0 12px color-mix(in srgb, var(--s3-sky) 80%, transparent), 0 0 40px color-mix(in srgb, var(--s3-accent-2) 60%, transparent); }
.s3p-oel__cp,
.s3p-oel__go { position: relative; z-index: 2; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--s3-d2);
background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: color .4s var(--s3-ease), background .4s var(--s3-ease), box-shadow .4s var(--s3-ease), transform .4s var(--s3-ease); }
.s3p-oel__cp:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.s3p-oel__go { color: #fff; background: linear-gradient(180deg, rgba(58, 128, 255, .36), color-mix(in srgb, var(--s3-accent) 22%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 30%, transparent); }
.s3p-oel__i:hover .s3p-oel__go { background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 18px color-mix(in srgb, var(--s3-accent) 60%, transparent); transform: translateX(2px); }
.s3p-oel__more { padding: 4px 16px 8px; font: 400 14px/1.4 var(--s3-sans); color: var(--s3-d3); }
.s3p-oel__mks { display: none; }
.s3p-cpy::before,
.s3p-cpy::after,
.s3p-oel__go::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--s3p-mask) center / 16px 16px no-repeat; mask: var(--s3p-mask) center / 16px 16px no-repeat; }
.s3p-cpy::before,
.s3p-cpy::after { grid-area: 1 / 1; transition: opacity .3s var(--s3-ease), transform .4s var(--s3-ease); }
.s3p-cpy::before { --s3p-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='2.4'/%3E%3Cpath d='M15.5 8.5V6.9c0-1.3-1-2.4-2.4-2.4H6.9c-1.3 0-2.4 1-2.4 2.4v6.2c0 1.3 1 2.4 2.4 2.4h1.6'/%3E%3C/svg%3E"); }
.s3p-cpy::after { --s3p-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); opacity: 0; transform: scale(.6); background: #3ddc97; }
.s3p-oel__go::before { --s3p-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E"); }
.s3p-cpy.s3p-is-copied::before { opacity: 0; transform: scale(.6); }
.s3p-cpy.s3p-is-copied::after { opacity: 1; transform: none; }
@media (forced-colors: active) {
.s3p-cpy::before,
.s3p-cpy::after,
.s3p-oel__go::before { forced-color-adjust: none; background: ButtonText; }
}
.s3p-oe-note { margin-top: 24px; display: inline-flex; align-items: flex-start; gap: 10px; max-width: 28em; padding: 12px 16px; border-radius: 16px; font: 400 13.5px/1.5 var(--s3-sans); color: var(--s3-t3);
background: color-mix(in srgb, var(--s3-accent) 4%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent); }
.s3p-oe-note .s3p-ico { flex: none; margin-top: 1px; color: var(--s3-accent); width: 18px; height: 18px; }
.s3p-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.s3p-cards .s3p-pc { scroll-snap-align: none; }
.s3p-pc__spec { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; min-height: 1.4em; font: 400 12.5px/1.4 var(--s3-sans); color: var(--s3-t3); }
.s3p-pc__spec .s3p-mono { font-size: 11.5px; color: var(--s3-t4); }
.s3p-pc__flag { position: absolute; right: 12px; top: 12px; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px;
font: 600 12px/1 var(--s3-sans); color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px color-mix(in srgb, var(--s3-accent) 35%, transparent); }
.s3p-pc__pr { display: grid; gap: 8px; }
.s3p-pc__pr .s3p-stk { font-size: 12.5px; }
.s3p-pc__n--num { min-height: 0; margin-top: 6px; font: 500 17px/1.3 var(--s3-mono); letter-spacing: -.01em; -webkit-line-clamp: 1; }
.s3p-pc__b .s3p-pc__brand { letter-spacing: .08em; }
.s3p-more[open] .s3p-faq__pm::after,
.s3p-mk[open] .s3p-faq__pm::after { transform: rotate(0deg); }
.s3p-tblw { border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #ffffff, #fbfcff); box-shadow: var(--s3-sh-1), inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 6%, transparent); }
.s3p-dtbl { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--s3-sans); color: var(--s3-t2); }
.s3p-dtbl caption { text-align: left; }
.s3p-dtbl thead th { padding: 16px 20px; text-align: left; font: 500 11px/1.2 var(--s3-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--s3-t3); background: linear-gradient(180deg, #f5f8ff, var(--s3-pale)); white-space: nowrap; }
.s3p-dtbl tbody th,
.s3p-dtbl td { padding: 16px 20px; text-align: left; vertical-align: middle; font-weight: 400; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--s3-accent) 7%, transparent); }
.s3p-dtbl tbody tr { transition: background .35s var(--s3-ease); }
.s3p-dtbl tbody tr:hover { background: rgba(238, 244, 255, .7); }
.s3p-dtbl .s3p-c-r { text-align: right; }
.s3p-dtbl .s3p-t-num { font: 600 16px/1 var(--s3-sans); letter-spacing: -.02em; color: var(--s3-t1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s3p-trust--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s3p-trust--4 .s3p-tcard__fig { font-size: clamp(36px, 3vw, 46px); }
.s3p-tcard__fig--ico { display: flex; align-items: center; height: 46px; }
.s3p-tcard__fig--ico .s3p-ico { width: 40px; height: 40px; stroke: var(--s3-sky-2); stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(90, 150, 255, .8)); }
.s3p-trust--4 .s3p-tcard__pays { gap: 6px; }
.s3p-trust--4 .s3p-tcard__pays li { height: 32px; padding: 0 11px; font-size: 13.5px; border-radius: 10px; }
.s3p-fx-ring--r { right: auto; left: -8%; top: auto; bottom: -4%; width: 56%; }
.s3p-faqs { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.s3p-faqs .s3p-faq { margin-top: 0; }
.s3p-faqs__p { margin-top: 20px; max-width: 24em; font: 400 16px/1.6 var(--s3-sans); color: var(--s3-t3); }
.s3p-tip { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; padding: 8px 12px; border-radius: 12px; font: 500 12.5px/1.35 var(--s3-sans); color: #fff; white-space: nowrap;
background: linear-gradient(180deg, rgba(16, 32, 84, .92), rgba(8, 18, 52, .94)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), var(--s3-sh-dark);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transition: opacity .2s var(--s3-ease); }
.s3p-tip.s3p-is-on { opacity: 1; }
.s3p-tip b { font-weight: 600; }
.s3p-tip span { display: block; margin-top: 2px; font: 400 11.5px/1.3 var(--s3-mono); color: var(--s3-d2); }
@media (max-width: 1180px) {
.s3p-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s3p-trust--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
.s3p-split,
.s3p-faqs { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.s3p-split__h { position: static; }
.s3p-trust--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
html:has(.s3p-page) { scroll-padding-top: 136px; }
.s3p-lead3 { font-size: 15.5px; margin-top: 16px; }
.s3p-shead { flex-direction: column; align-items: flex-start; gap: 16px; }
.s3p-shead + * { margin-top: 32px; }
.s3p-pslot { height: 52px; margin-top: 40px; }
.s3p-pnav.s3p-is-stuck { padding: 8px 16px; }
.s3p-pnav.s3p-is-stuck .s3p-pnav__in { min-width: 0; background: none; box-shadow: none; }
.s3p-pnav__in { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 20px), transparent); }
.s3p-pnav__in { border-radius: 999px; }
.s3p-pnav a { padding: 0 14px; font-size: 13.5px; }
.s3p-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.s3p-cards .s3p-pc { padding: 6px; border-radius: 22px; }
.s3p-cards .s3p-pc__stage { border-radius: 17px; }
.s3p-cards .s3p-pc__b { padding: 12px 6px 0; }
.s3p-cards .s3p-pc__n { font-size: 14px; }
.s3p-cards .s3p-pc__f { padding: 12px 2px 2px 6px; gap: 8px; }
.s3p-cards .s3p-price { font-size: 22px; }
.s3p-cards .s3p-add { width: 40px; height: 40px; }
.s3p-cards .s3p-tinka { left: 8px; top: 8px; }
.s3p-pc__spec { display: none; }
.s3p-pc__flag { right: 8px; top: 8px; height: 24px; padding: 0 8px; font-size: 11px; }
.s3p-oel { padding: 8px; gap: 6px; }
.s3p-oel__i { gap: 10px; min-height: 60px; padding: 10px 8px 10px 12px; border-radius: 14px; }
.s3p-oel__mk { min-width: 0; height: 22px; padding: 0 6px; font-size: 10px; }
.s3p-oel__no { font-size: 16.5px; }
.s3p-oel__cp,
.s3p-oel__go { width: 40px; height: 40px; border-radius: 12px; }
.s3p-dtbl { font-size: 14px; }
.s3p-trust--4 { grid-template-columns: 1fr 1fr; gap: 8px; }
.s3p-trust--4 .s3p-tcard { padding: 20px 16px; border-radius: 22px; }
.s3p-trust--4 .s3p-tcard__ic { width: 40px; height: 40px; border-radius: 12px; }
.s3p-trust--4 .s3p-tcard__fig { margin-top: 20px; font-size: 32px; }
.s3p-trust--4 .s3p-tcard__h { font-size: 16px; }
.s3p-trust--4 .s3p-tcard__p { font-size: 13.5px; }
.s3p-tcard__fig--ico { height: 32px; }
.s3p-trust--4 .s3p-tcard__pays { min-height: 32px; margin-top: 20px; }
.s3p-trust--4 .s3p-tcard__pays li { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 8px; }
.s3p-band__ring { width: 120%; right: -60%; top: 44%; opacity: .5; }
.s3p-crumbs { overflow: hidden; }
.s3p-crumbs li:last-child { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.s3p-crumbs li:last-child::before { display: inline-block; vertical-align: -3px; }
.s3p-crumbs { min-height: 40px; }
.s3p-crumbs li:not(:last-child) a { display: inline-flex; align-items: center; min-height: 40px; margin: -6px 0; }
.s3p-fit__chg { height: 40px; padding: 0 16px; }
.s3p-tcard__fig--ico .s3p-ico { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.s3p-pnav.s3p-is-stuck { animation: none; }
.s3p-pnav__pill span { transition: none; }
}
.s3p-page .s3p-band { padding: calc(var(--s3-bar) + 20px) 0 calc(var(--s3-r-sheet) + 36px); }
.s3p-page .s3p-band .s3p-bg__light { left: 82%; top: 10%; }
.s3p-pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.s3p-gal { position: sticky; top: calc(var(--s3-bar) + 24px); min-width: 0; }
.s3p-gal__stage {
position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 32px; cursor: zoom-in; touch-action: pan-y; outline: none;
background: radial-gradient(58% 52% at 50% 40%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 72%), linear-gradient(165deg, #e8f0ff 0%, #f5f8ff 64%, #edf3ff 100%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 6%, transparent), inset 0 1px 0 #fff, var(--s3-sh-1);
}
.s3p-gal__stage:focus-visible { box-shadow: inset 0 0 0 2px var(--s3-accent-2), var(--s3-sh-1); }
.s3p-gal__stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 14%; height: 18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s3-accent) 6%, transparent), color-mix(in srgb, var(--s3-accent) 0%, transparent)); }
.s3p-gs { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: auto; max-width: none; mix-blend-mode: multiply; pointer-events: none; user-select: none;
opacity: 0; scale: 1.035; transition: opacity .8s var(--s3-ease), scale 1.2s var(--s3-ease), transform .55s var(--s3-ease); }
.s3p-gs.s3p-is-on { opacity: 1; scale: 1; }
.s3p-gsh { position: absolute; left: 50%; top: var(--sb); width: var(--sw); aspect-ratio: 7 / 1; margin-left: calc(var(--sw) / -2); translate: 0 -50%; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in srgb, var(--s3-ink) 22%, transparent), color-mix(in srgb, var(--s3-ink) 9%, transparent) 48%, color-mix(in srgb, var(--s3-ink) 0%, transparent)); opacity: 0; transition: opacity .8s var(--s3-ease); }
.s3p-gsh.s3p-is-on { opacity: 1; }
.s3p-gal__stage.s3p-is-zoom { cursor: zoom-out; }
.s3p-gal__stage.s3p-is-zoom .s3p-gs.s3p-is-on { transform: scale(2.1); }
.s3p-gal__stage.s3p-is-zoom .s3p-gsh { opacity: 0; }
.s3p-gal__nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; color: var(--s3-t1);
background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent), 0 8px 24px color-mix(in srgb, var(--s3-ink) 10%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
opacity: 0; transition: opacity .4s var(--s3-ease), transform .4s var(--s3-ease), color .4s var(--s3-ease); }
.s3p-gal__nav--p { left: 16px; transform: translateX(-6px); }
.s3p-gal__nav--n { right: 16px; transform: translateX(6px); }
.s3p-gal__nav--p .s3p-ico { transform: scaleX(-1); }
.s3p-gal__stage:hover .s3p-gal__nav,
.s3p-gal__nav:focus-visible { opacity: 1; transform: none; }
.s3p-gal__nav:hover { color: var(--s3-accent); }
.s3p-gal__stage.s3p-is-zoom .s3p-gal__nav { opacity: 0; }
.s3p-gal__count { position: absolute; left: 16px; bottom: 16px; z-index: 3; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
font: 500 12px/1 var(--s3-mono); color: var(--s3-t2); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.s3p-gal__count i { font-style: normal; color: var(--s3-t4); }
.s3p-gal__hint { position: absolute; right: 16px; bottom: 16px; z-index: 3; height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
font: 500 12px/1 var(--s3-sans); color: var(--s3-t3); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 8%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
transition: opacity .4s var(--s3-ease); }
.s3p-gal__hint .s3p-ico { width: 14px; height: 14px; }
.s3p-gal__stage.s3p-is-zoom .s3p-gal__hint { opacity: 0; }
.s3p-gal__thumbs { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.s3p-gth { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 18px;
background: linear-gradient(165deg, var(--s3-pale) 0%, var(--s3-pale-2) 72%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 6%, transparent); transition: box-shadow .4s var(--s3-ease), transform .4s var(--s3-ease); }
.s3p-gth img { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: auto; max-width: none; mix-blend-mode: multiply; }
.s3p-gth:hover { transform: translateY(-2px); }
.s3p-gth[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--s3-accent), 0 0 0 4px color-mix(in srgb, var(--s3-accent) 10%, transparent), 0 8px 20px color-mix(in srgb, var(--s3-accent) 16%, transparent); }
.s3p-gth__t { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 500 10.5px/1 var(--s3-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--s3-t3); }
.s3p-buy { position: sticky; top: var(--stick, calc(var(--s3-bar) + 24px)); min-width: 0; }
.s3p-buy__top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.s3p-bmark { height: 28px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 8px; font: 700 12.5px/1 var(--s3-sans); letter-spacing: .12em; color: #fff;
background: linear-gradient(180deg, color-mix(in srgb, var(--s3-ink) 50%, var(--s3-navy)), var(--s3-ink)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--s3-sky) 28%, transparent), 0 4px 12px color-mix(in srgb, var(--s3-ink) 16%, transparent); }
.s3p-buy__mpn { font: 500 13.5px/1 var(--s3-mono); color: var(--s3-t2); }
.s3p-blogo { width: 112px; height: 52px; padding: 6px 8px; display: inline-grid; place-items: center; flex: none; border-radius: 10px; background: #fff;
border: 1px solid color-mix(in srgb, var(--s3-ink) 14%, transparent); box-shadow: var(--s3-sh-1); transition: border-color .2s var(--s3-ease), box-shadow .2s var(--s3-ease); }
.s3p-blogo:hover { border-color: color-mix(in srgb, var(--s3-accent) 55%, transparent); }
.s3p-blogo:focus-visible { outline: 2px solid var(--s3-accent); outline-offset: 2px; }
.s3p-blogo__img { width: 96px; height: 40px; object-fit: contain; }
@media (max-width: 480px) { .s3p-blogo { width: 96px; height: 46px; } .s3p-blogo__img { width: 82px; height: 34px; } }
.s3p-buy__ean { margin-left: auto; font: 400 12px/1 var(--s3-mono); color: var(--s3-t4); }
.s3p-buy__ean b { font-weight: 400; color: var(--s3-t3); }
.s3p-buy__h { margin-top: 16px; font: 600 clamp(30px, 2.7vw, 40px)/1.06 var(--s3-sans); letter-spacing: -.04em; color: var(--s3-t1); text-wrap: balance; }
.s3p-buy__h b { display: block; font-weight: 600; padding-bottom: .08em; margin-bottom: -.08em;
background: linear-gradient(98deg, var(--s3-navy) 0%, var(--s3-accent) 56%, color-mix(in srgb, var(--s3-accent-2) 95%, #fff) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s3p-buy__sum { margin-top: 14px; font: 400 15px/1.6 var(--s3-sans); color: var(--s3-t2); text-wrap: pretty; }
.s3p-buy__sum strong { font-weight: 600; color: var(--s3-t1); }
.s3p-fit { position: relative; isolation: isolate; overflow: hidden; margin-top: 20px; border-radius: 24px; color: #fff;
background: linear-gradient(152deg, var(--s3-ink) 0%, color-mix(in srgb, var(--s3-ink) 45%, var(--s3-navy)) 56%, var(--s3-navy) 100%);
box-shadow: 0 1px 2px color-mix(in srgb, var(--s3-ink) 10%, transparent), 0 16px 40px color-mix(in srgb, var(--s3-ink) 16%, transparent), 0 32px 80px color-mix(in srgb, var(--s3-accent) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--s3-sky) 24%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--s3-sky) 8%, transparent); }
.s3p-fit__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s3p-fit__glow { position: absolute; width: 360px; height: 360px; right: -60px; top: -150px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--s3-accent-2) 42%, transparent), color-mix(in srgb, var(--s3-accent-2) 12%, transparent) 50%, color-mix(in srgb, var(--s3-accent-2) 0%, transparent)); animation: s3p-breathe 9s var(--s3-ease) infinite; }
.s3p-fit__grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, color-mix(in srgb, var(--s3-sky) 8%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--s3-sky) 8%, transparent) 1px, transparent 1px);
background-size: 24px 24px; background-position: -1px -1px; -webkit-mask-image: radial-gradient(80% 110% at 85% 30%, #000, transparent 80%); mask-image: radial-gradient(80% 110% at 85% 30%, #000, transparent 80%); }
.s3p-fit__noise { position: absolute; inset: 0; opacity: .05; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.s3p-fit__car { position: absolute; right: -44px; top: 2px; width: 66%; max-width: 380px; height: auto; mix-blend-mode: screen; pointer-events: none; }
.s3p-fit__scan { position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: 2px; pointer-events: none; opacity: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--s3-sky-2) 0%, transparent), #e3eeff 28%, #e3eeff 72%, color-mix(in srgb, var(--s3-sky-2) 0%, transparent)); box-shadow: 0 0 12px 3px rgba(90, 150, 255, .7), 0 0 40px 10px color-mix(in srgb, var(--s3-accent-2) 28%, transparent); }
.s3p-fit__body { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 18px; max-width: 70%; }
.s3p-fit__ok { position: relative; flex: none; width: 40px; height: 40px; margin-top: 18px; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(180deg, #22c47d, #0e9f60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 1px rgba(18, 179, 110, .5), 0 0 24px rgba(18, 179, 110, .55); }
.s3p-fit__okw { position: relative; width: 22px; height: 22px; overflow: hidden; }
.s3p-fit__okw svg { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.s3p-fit__t { min-width: 0; }
.s3p-fit__k { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--s3-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--s3-sky); }
.s3p-fit__k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--s3-accent-2) 70%, var(--s3-sky)); box-shadow: 0 0 8px color-mix(in srgb, var(--s3-accent-2) 80%, var(--s3-sky)); }
.s3p-fit__h { margin-top: 10px; font: 500 15px/1.25 var(--s3-sans); letter-spacing: -.01em; color: var(--s3-d2); }
.s3p-fit__h b { display: block; margin-top: 2px; font: 600 22px/1.15 var(--s3-sans); letter-spacing: -.03em; color: #fff; white-space: nowrap; }
.s3p-fit__d { margin-top: 8px; font: 400 11.5px/1.3 var(--s3-mono); color: var(--s3-d2); }
.s3p-fit__f { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 20px; font: 400 13px/1.35 var(--s3-sans); color: var(--s3-d2);
background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.s3p-fit__f b { font-weight: 500; color: #fff; }
.s3p-fit__chg { flex: none; height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 13px/1 var(--s3-sans); color: #fff;
background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .3s var(--s3-ease); }
.s3p-fit__chg:hover { background: rgba(255, 255, 255, .2); }
.s3p-fit--ok .s3p-fit__car { opacity: 0; transform: translate3d(14px, 4px, 0) scale(.97); transition: opacity 1s var(--s3-ease), transform 1.3s var(--s3-ease); }
.s3p-fit--ok .s3p-fit__ok { opacity: 0; transform: scale(.6); transition: opacity .4s var(--s3-ease), transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.s3p-fit--ok .s3p-fit__okw { transform: translateX(-100%); transition: transform .5s var(--s3-ease); }
.s3p-fit--ok .s3p-fit__okw svg { transform: translateX(100%); transition: transform .5s var(--s3-ease); }
.s3p-fit.s3p-is-on .s3p-fit__car { opacity: 1; transform: none; }
.s3p-fit.s3p-is-on .s3p-fit__scan { animation: s3p-fscan 1.1s var(--s3-ease) .25s both; }
.s3p-fit.s3p-is-on .s3p-fit__ok { opacity: 1; transform: none; transition-delay: .7s; }
.s3p-fit.s3p-is-on .s3p-fit__okw,
.s3p-fit.s3p-is-on .s3p-fit__okw svg { transform: none; transition-delay: .95s; }
@keyframes s3p-fscan { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(var(--fw, 520px)); } }
.s3p-buy__price { margin-top: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.s3p-bprice { display: inline-flex; align-items: baseline; font: 600 60px/.9 var(--s3-sans); letter-spacing: -.055em; color: var(--s3-t1); white-space: nowrap; font-variant-numeric: proportional-nums lining-nums; }
.s3p-bprice__c { display: inline-block; font-size: .44em; letter-spacing: -.02em; transform: translateY(-1.05em); margin-left: .02em; }
.s3p-bprice__e { display: inline-block; margin-left: .18em; font-size: .36em; font-weight: 500; letter-spacing: 0; color: var(--s3-t3); transform: translateY(-1.3em); }
.s3p-buy__pm { display: grid; justify-items: end; gap: 8px; padding-bottom: 4px; }
.s3p-vat { font: 400 12.5px/1 var(--s3-sans); color: var(--s3-t3); }
.s3p-buy__acts { margin-top: 20px; display: flex; gap: 12px; }
.s3p-qty { flex: none; display: flex; align-items: center; height: 56px; padding: 4px; border-radius: 18px; background: color-mix(in srgb, var(--s3-accent) 4.5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 10%, transparent); }
.s3p-qty button { width: 40px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: var(--s3-t2); transition: background .3s var(--s3-ease), color .3s var(--s3-ease); }
.s3p-qty button:hover { background: #fff; color: var(--s3-accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--s3-ink) 6%, transparent); }
.s3p-qty input { width: 36px; height: 48px; border: 0; background: none; outline: none; text-align: center; font: 600 17px/1 var(--s3-sans); color: var(--s3-t1); }
.s3p-cta { position: relative; flex: 1; height: 56px; overflow: hidden; border-radius: 18px; font-size: 16.5px; isolation: isolate; }
.s3p-cta__ok { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: linear-gradient(180deg, #22c47d, #0e9f60); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: opacity .45s var(--s3-ease); }
.s3p-cta__l,
.s3p-cta__k { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .55s var(--s3-ease), opacity .4s var(--s3-ease); }
.s3p-cta__k { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 110%, 0); }
.s3p-cta__kw { position: relative; width: 18px; height: 18px; overflow: hidden; transform: translateX(-100%); transition: transform .45s var(--s3-ease) .2s; }
.s3p-cta__kw svg { position: absolute; inset: 0; width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transform: translateX(100%); transition: transform .45s var(--s3-ease) .2s; }
.s3p-cta.s3p-is-done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(14, 159, 96, .6), 0 8px 24px rgba(14, 159, 96, .38); }
.s3p-cta.s3p-is-done .s3p-cta__ok { opacity: 1; }
.s3p-cta.s3p-is-done .s3p-cta__l { opacity: 0; transform: translate3d(0, -110%, 0); }
.s3p-cta.s3p-is-done .s3p-cta__k { opacity: 1; transform: none; }
.s3p-cta.s3p-is-done .s3p-cta__kw,
.s3p-cta.s3p-is-done .s3p-cta__kw svg { transform: none; }
.s3p-buy__now { margin-top: 12px; display: flex; justify-content: center; }
.s3p-buy__now .s3p-link { font-size: 15px; }
.s3p-buy__box { margin-top: 20px; padding: 6px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(238, 244, 255, .8), rgba(248, 250, 253, .8)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 7%, transparent), inset 0 1px 0 #fff; }
.s3p-facts3 li { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 0; font: 400 14px/1.45 var(--s3-sans); color: var(--s3-t2); }
.s3p-facts3 li + li { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--s3-accent) 7%, transparent); }
.s3p-facts3 b { font-weight: 600; color: var(--s3-t1); }
.s3p-facts3__ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--s3-accent); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--s3-ink) 5%, transparent); }
.s3p-facts3__ic .s3p-ico { width: 17px; height: 17px; }
.s3p-eta b { font-weight: 600; color: var(--s3-t1); font-variant-numeric: tabular-nums; }
.s3p-eta .s3p-facts3__ic { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--s3-accent) 50%, transparent), 0 4px 12px color-mix(in srgb, var(--s3-accent) 35%, transparent); }
.s3p-p-sec { padding-top: 120px; }
.s3p-pslot + .s3p-p-sec { padding-top: 72px; }
.s3p-spec { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 16px; align-items: stretch; }
.s3p-spec__draw { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 24px 24px 56px; color: #fff;
background: linear-gradient(160deg, var(--s3-ink) 0%, color-mix(in srgb, var(--s3-ink) 30%, var(--s3-navy)) 62%, var(--s3-navy) 100%); box-shadow: var(--s3-sh-2), inset 0 1px 0 color-mix(in srgb, var(--s3-sky) 20%, transparent); }
.s3p-spec__draw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--s3-accent) 45%, transparent), color-mix(in srgb, var(--s3-accent) 0%, transparent) 70%); }
.s3p-spec__draw::after { content: ""; position: absolute; inset: 0; z-index: -1;
background-image: linear-gradient(90deg, color-mix(in srgb, var(--s3-sky) 8%, transparent) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--s3-sky) 8%, transparent) 1px, transparent 1px); background-size: 24px 24px; background-position: center;
-webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent 90%); mask-image: radial-gradient(75% 75% at 50% 50%, #000, transparent 90%); }
.s3p-spec__draw__in { position: relative; margin: -6% 0; }
.s3p-spec__draw img { display: block; width: 100%; height: auto; mix-blend-mode: screen; filter: invert(1) contrast(1.6) brightness(1.05); }
.s3p-spec__draw img.s3p-spec__glow { position: absolute; inset: 0; opacity: .7; filter: invert(1) contrast(1.6) blur(5px) brightness(1.8); }
.s3p-spec__draw figcaption { position: absolute; left: 24px; right: 24px; bottom: 20px; display: flex; align-items: center; gap: 8px; font: 400 12.5px/1.3 var(--s3-mono); color: var(--s3-d3); }
.s3p-spec__draw figcaption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--s3-accent-2) 70%, var(--s3-sky)); box-shadow: 0 0 8px color-mix(in srgb, var(--s3-accent-2) 80%, var(--s3-sky)); }
.s3p-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; margin: 0; border-radius: 28px; overflow: hidden;
background: linear-gradient(135deg, color-mix(in srgb, var(--s3-accent) 14%, transparent), color-mix(in srgb, var(--s3-accent) 4%, transparent) 50%, color-mix(in srgb, var(--s3-accent) 14%, transparent)); box-shadow: var(--s3-sh-1); }
.s3p-sgrid__i { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 104px; padding: 20px 24px; background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%); }
.s3p-sgrid__i--w { grid-column: 1 / -1; min-height: 0; }
.s3p-sgrid dd { margin: 0; font: 600 20px/1.25 var(--s3-sans); letter-spacing: -.025em; color: var(--s3-t1); }
.s3p-sgrid dd small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--s3-t3); }
.s3p-sgrid dd.s3p-mono { font: 500 17px/1.25 var(--s3-mono); letter-spacing: 0; }
.s3p-sgrid__i--w dd { font-size: 16.5px; font-weight: 500; letter-spacing: -.015em; line-height: 1.45; }
.s3p-sgrid__n { font-size: 28px; letter-spacing: -.04em; }
.s3p-cmp { }
.s3p-cmp .s3p-dtbl tbody th { font: 600 15.5px/1.35 var(--s3-sans); letter-spacing: -.015em; color: var(--s3-t1); }
.s3p-cmp__m { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.s3p-cmp .s3p-tinka { position: static; opacity: 1; transform: none; height: 24px; padding: 0 10px 0 3px; font-size: 11.5px; }
.s3p-cmp .s3p-tinka__c { width: 18px; height: 18px; }
.s3p-cmp tr.s3p-is-mine { background: linear-gradient(90deg, rgba(18, 179, 110, .07), rgba(18, 179, 110, 0) 70%); }
.s3p-cmp tr.s3p-is-mine:hover { background: linear-gradient(90deg, rgba(18, 179, 110, .1), rgba(18, 179, 110, .02) 70%); }
.s3p-cmp td b { font-weight: 600; color: var(--s3-ok-ink); }
.s3p-cmp .s3p-yr { font: 500 13.5px/1 var(--s3-mono); color: var(--s3-t3); white-space: nowrap; }
.s3p-cmp__more { margin-top: 24px; }
.s3p-sbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 48; display: none; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 8px 8px 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .8));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 10%, transparent), inset 0 1px 0 #fff, 0 8px 24px color-mix(in srgb, var(--s3-ink) 12%, transparent), 0 24px 56px color-mix(in srgb, var(--s3-accent) 16%, transparent);
-webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
opacity: 0; visibility: hidden; transform: translate3d(0, calc(100% + 32px), 0); transition: transform .6s var(--s3-ease), opacity .4s var(--s3-ease), visibility 0s linear .6s; }
.s3p-sbar.s3p-is-on { opacity: 1; visibility: visible; transform: none; transition: transform .6s var(--s3-ease), opacity .4s var(--s3-ease), visibility 0s; }
.s3p-sbar__t { min-width: 0; display: grid; gap: 4px; }
.s3p-sbar .s3p-price { font-size: 24px; }
.s3p-sbar__fit { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--s3-sans); color: var(--s3-ok-ink); white-space: nowrap; }
.s3p-sbar__fit i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: var(--s3-ok); box-shadow: 0 0 8px rgba(18, 179, 110, .5); }
.s3p-sbar__fit svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.s3p-sbar .s3p-cta { flex: none; width: 172px; height: 48px; border-radius: 16px; font-size: 15px; }
@media (max-width: 1180px) {
.s3p-pdp { gap: 40px; }
.s3p-fit__body { max-width: 76%; }
}
@media (max-width: 980px) {
.s3p-pdp { grid-template-columns: 1fr; gap: 32px; }
.s3p-gal,
.s3p-buy { position: static; }
.s3p-spec { grid-template-columns: 1fr; }
.s3p-spec__draw { min-height: 0; }
}
@media (max-width: 760px) {
.s3p-page .s3p-band { padding: calc(var(--s3-bar) + 12px) 0 calc(var(--s3-r-sheet) + 24px); }
.s3p-crumbs-w { margin: 0 -16px; padding: 0 16px; max-width: 100vw; }
.s3p-page .s3p-sheet--first { padding-top: calc(var(--s3-r-sheet) - 12px); }
.s3p-gal__stage { border-radius: 24px; }
.s3p-gal__nav,
.s3p-gal__hint { display: none; }
.s3p-gal__count { left: 12px; bottom: 12px; }
.s3p-gal__thumbs { gap: 8px; margin-top: 8px; }
.s3p-gth { border-radius: 14px; }
.s3p-gth__t { bottom: 6px; font-size: 9px; }
.s3p-buy__ean { margin-left: 0; width: 100%; }
.s3p-buy__h { font-size: 29px; }
.s3p-fit { margin-top: 20px; border-radius: 22px; }
.s3p-fit__car { right: -64px; top: 12px; width: 68%; }
.s3p-fit__body { max-width: 72%; padding: 16px 16px 14px; gap: 12px; }
.s3p-fit__ok { width: 34px; height: 34px; border-radius: 10px; margin-top: 16px; }
.s3p-fit__okw,
.s3p-fit__okw svg { width: 19px; height: 19px; }
.s3p-fit__h b { font-size: 19px; }
.s3p-fit__d { font-size: 10.5px; white-space: nowrap; }
.s3p-fit__f { padding: 8px 8px 8px 16px; font-size: 12.5px; }
.s3p-bprice { font-size: 52px; }
.s3p-buy__acts { gap: 8px; }
.s3p-qty { height: 52px; border-radius: 16px; }
.s3p-qty button { width: 36px; height: 44px; }
.s3p-qty input { width: 30px; }
.s3p-cta { height: 52px; border-radius: 16px; font-size: 15.5px; }
.s3p-buy__box { padding: 4px 16px; }
.s3p-facts3 li { font-size: 13.5px; gap: 12px; }
.s3p-p-sec { padding-top: 88px; }
.s3p-pslot + .s3p-p-sec { padding-top: 56px; }
.s3p-spec__draw { padding: 16px 16px 48px; border-radius: 22px; }
.s3p-sgrid { grid-template-columns: 1fr 1fr; border-radius: 22px; }
.s3p-sgrid__i { min-height: 88px; padding: 16px; gap: 12px; }
.s3p-sgrid dd { font-size: 16px; }
.s3p-sgrid__n { font-size: 22px; }
.s3p-sgrid dd.s3p-mono { font-size: 14px; }
.s3p-sgrid__i--w dd { font-size: 14.5px; }
.s3p-sbar { display: flex; }
.s3p-cmp .s3p-dtbl thead { display: none; }
.s3p-cmp .s3p-dtbl tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--s3-accent) 7%, transparent); }
.s3p-cmp .s3p-dtbl tr:first-child { box-shadow: none; }
.s3p-cmp .s3p-dtbl tbody th,
.s3p-cmp .s3p-dtbl td { padding: 0; box-shadow: none; }
.s3p-cmp .s3p-dtbl td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; }
.s3p-cmp .s3p-dtbl td.s3p-yr { grid-column: 2; grid-row: 1; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
.s3p-fit__glow { animation: none; }
.s3p-fit--ok .s3p-fit__car,
.s3p-fit--ok .s3p-fit__ok,
.s3p-fit--ok .s3p-fit__okw,
.s3p-fit--ok .s3p-fit__okw svg { opacity: 1; transform: none; transition: none; }
.s3p-fit.s3p-is-on .s3p-fit__scan { animation: none; }
.s3p-gs,
.s3p-gsh { transition: none; }
}
.s3p-gs--fit { left: 9%; top: 6%; width: 82%; height: 88%; object-fit: contain; }
.s3p-gsh--fit { --sb: 90%; --sw: 58%; }
.s3p-gth .s3p-gth__img { position: absolute; left: 10%; top: 8%; width: 80%; height: 84%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.s3p-bprice__e--lead { margin: 0 .06em 0 0; transform: translateY(-1.3em); }
.s3p-price__e--lead { margin: 0 .12em 0 0; }
.s3p-bprice--none { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; color: var(--s3-t2); white-space: normal; }
.s3p-buy__price { min-height: 54px; }
.s3p-buy__rrp { margin-top: 8px; font: 400 13px/1.4 var(--s3-sans); color: var(--s3-t3); }
.s3p-buy__rrp s { color: var(--s3-t4); }
.s3p-buy__note { margin-top: 8px; font: 400 13.5px/1.5 var(--s3-sans); color: var(--s3-t3); }
.s3p-cta:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.s3p-qty button:disabled { opacity: .45; cursor: not-allowed; }
.s3p-buy__more { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--s3-t3); }
.s3p-buy__more > * { flex: none; }
.s3p-fit { min-height: 156px; display: flex; flex-direction: column; justify-content: space-between; }
.s3p-fit__ok--no { background: linear-gradient(180deg, #ef5a5a, #c93434); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 1px rgba(201, 52, 52, .5), 0 0 24px rgba(201, 52, 52, .5); }
.s3p-fit__ok--unk { background: linear-gradient(180deg, #f2b541, #d38b0f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 1px rgba(211, 139, 15, .5), 0 0 24px rgba(211, 139, 15, .45); }
.s3p-fit__ok--no .s3p-fit__okw,
.s3p-fit__ok--no .s3p-fit__okw svg,
.s3p-fit__ok--unk .s3p-fit__okw,
.s3p-fit__ok--unk .s3p-fit__okw svg { transform: none; }
.s3p-fit__h { text-wrap: balance; }
.s3p-fit--ask .s3p-fit__h,
.s3p-fit--busy .s3p-fit__h { font: 600 20px/1.2 var(--s3-sans); letter-spacing: -.025em; color: #fff; }
.s3p-fit__d { display: block; }
.s3p-fit--ask .s3p-fit__d { margin-top: 8px; font: 400 13.5px/1.45 var(--s3-sans); color: var(--s3-d2); max-width: 26em; white-space: normal; }
.s3p-fit__go { min-width: 0; color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--s3-sky) 60%, transparent); }
.s3p-fit__chg--go { background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 16px color-mix(in srgb, var(--s3-accent) 40%, transparent); }
.s3p-fit__reg { min-width: 0; flex: 1; }
@media (max-width: 599px) {
.s3p-fit__f--reg { flex-wrap: wrap; gap: 8px; padding: 8px; }
.s3p-fit__f--reg > .s3p-fit__reg { flex: 1 1 100%; }
.s3p-fit__f--reg > .s3p-fit__chg { flex: 1 1 100%; height: 44px; justify-content: center; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
}
.s3p-fit__err { margin-top: 8px; font: 500 12.5px/1.4 var(--s3-sans); color: #ffb4b4; }
.s3p-fit__cands { margin-top: 10px; display: grid; gap: 6px; }
.s3p-fit__cand { display: grid; gap: 2px; width: 100%; padding: 8px 12px; border-radius: 12px; text-align: left; color: #fff; font: 400 12px/1.3 var(--s3-sans);
background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .3s var(--s3-ease); }
.s3p-fit__cand:hover { background: rgba(255, 255, 255, .16); }
.s3p-fit__cand b { font: 600 13.5px/1.3 var(--s3-sans); }
.s3p-fit__cand span { color: var(--s3-d2); }
.s3p-spec--solo { grid-template-columns: minmax(0, 1fr); }
.s3p-spec--solo .s3p-sgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s3p-spec__safety { margin-top: 24px; }
.s3p-oel__no--text { text-shadow: none; color: var(--s3-d2); }
.s3p-oel__more summary { list-style: none; cursor: pointer; padding: 4px 24px 20px; font: 500 14px/1.4 var(--s3-sans); color: var(--s3-sky-2); }
.s3p-oel__more summary::-webkit-details-marker { display: none; }
.s3p-oel__more .s3p-oel { padding-top: 0; }
.s3p-pc__word { position: absolute; inset: 0; display: grid; place-items: center; font: 650 15px/1 var(--s3-sans); letter-spacing: .14em; color: var(--s3-t4); text-transform: uppercase; }
.s3p-pc__na { font: 500 13px/1.3 var(--s3-sans); color: var(--s3-t3); }
.s3p-more { margin-top: 24px; border-radius: 20px; background: rgba(255, 255, 255, .7); box-shadow: var(--s3-sh-1), inset 0 1px 0 #fff; }
.s3p-more__s { list-style: none; cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; font: 500 15.5px/1.35 var(--s3-sans); }
.s3p-more__s::-webkit-details-marker { display: none; }
.s3p-more[open] .s3p-faq__pm::after { transform: rotate(0deg); }
.s3p-eql { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 24px; padding: 0 24px 20px; }
.s3p-eql li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--s3-accent) 7%, transparent); font-size: 14.5px; }
.s3p-eql a:hover { color: var(--s3-accent); }
.s3p-eql__p { font-weight: 600; white-space: nowrap; }
.s3p-mk-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.s3p-mk-link { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font: 500 13.5px/1 var(--s3-sans); color: var(--s3-t2);
background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--s3-ink) 5%, transparent); transition: color .3s var(--s3-ease), box-shadow .3s var(--s3-ease); }
.s3p-mk-link:hover { color: var(--s3-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 36%, transparent); }
.s3p-mk-link--main { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--s3-accent-2) 95%, #fff), var(--s3-accent)); box-shadow: 0 6px 16px color-mix(in srgb, var(--s3-accent) 30%, transparent); }
.s3p-mk-link--main:hover { color: #fff; }
.s3p-cmp__more { margin-top: 16px; }
.s3p-cmp__more .s3p-tblw { margin: 0 8px 8px; }
.s3p-cmp__none { padding: 24px; border-radius: 24px; font: 500 16px/1.5 var(--s3-sans); color: var(--s3-t2); background: #fff; box-shadow: var(--s3-sh-1); }
.s3p-cmp__note { margin-top: 16px; font: 400 13px/1.5 var(--s3-sans); color: var(--s3-t3); }
.s3p-keep-w { margin-top: 48px; }
.s3p-keep-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.s3p-keep { position: relative; padding: 28px; border-radius: 28px; background: linear-gradient(180deg, #ffffff, #fbfcff); box-shadow: var(--s3-sh-1), inset 0 0 0 1px color-mix(in srgb, var(--s3-accent) 6%, transparent);
font: 400 15px/1.6 var(--s3-sans); color: var(--s3-t2); }
.s3p-keep p + p { margin-top: 12px; }
.s3p-keep__h { margin-bottom: 12px; font: 600 19px/1.3 var(--s3-sans); letter-spacing: -.025em; color: var(--s3-t1); }
.s3p-p-sec .s3p-keep { margin-top: 24px; }
.s3p-page {
--pdp-bg: var(--s3-pale-2);
--pdp-card: #fff;
--pdp-ink: var(--s3-t1);
--pdp-muted: var(--s3-t3);
--pdp-accent: var(--s3-accent);
--pdp-accent-soft: color-mix(in srgb, var(--s3-accent) 12%, transparent);
--pdp-border: color-mix(in srgb, var(--s3-accent) 12%, transparent);
--pdp-shadow: var(--s3-sh-1);
}
.s3p-keep-rails { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.s3p-del-note { margin-top: 32px; max-width: 60em; font: 400 14px/1.6 var(--s3-sans); color: var(--s3-d2); }
.s3p-del-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
.s3p-sbar { bottom: calc(var(--mobile-nav-h, 56px) + 12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 980px) {
.s3p-spec--solo .s3p-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.s3p-keep { padding: 20px; border-radius: 22px; }
.s3p-fit { min-height: 140px; }
.s3p-eql { grid-template-columns: 1fr; padding: 0 16px 16px; }
}
.s3p-keep:empty { display: none; }
@media (max-width: 760px) {
html:has(.s3p-sbar.s3p-is-on) [data-storefront-chrome].fixed.right-6 { transform: translate3d(0, -76px, 0); }
}
@media (max-width: 480px) {
.s3p-oel__i { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; }
.s3p-oel__mk { order: 0; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 96px); display: block; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3p-oel__mkf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.s3p-oel__mks { display: inline; }
.s3p-oel__cp { order: 1; margin-left: auto; }
.s3p-oel__go { order: 2; }
.s3p-oel__no { order: 3; flex: 1 0 100%; white-space: normal; overflow-wrap: normal; }
}
@media (min-width: 481px) {
.s3p-oel__mk { flex: 0 1 auto; min-width: 44px; display: block; line-height: 26px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3p-oel__no { flex: 0 0 auto; max-width: calc(100% - 120px); white-space: normal; overflow-wrap: anywhere; }
.s3p-oel__mk + .s3p-oel__no { max-width: calc(100% - 184px); }
.s3p-oel__i { min-width: 0; }
.s3p-oel__cp { margin-left: auto; }
}