/* The previews use the existing templates, spacing and component structure. */
@font-face{font-family:KotJakarta;src:url('/fonts/plus-jakarta.ttf') format('truetype');font-weight:200 800;font-display:swap}
@font-face{font-family:KotWork;src:url('/fonts/work-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
html[data-style-variant=piasek]{--ink:#373229;--cream:#f5efe4;--coral:#d2b47d;--pistachio:#dedfc4;--lilac:#d4c8bb;--line:#d2c8b7;--muted:#70685b;--display:Manrope,Arial,sans-serif;--sans:Manrope,Arial,sans-serif;--variant-hover:#e9e0d0;--variant-weight:700;--variant-tracking:-.045em}
html[data-style-variant=porcelana]{--ink:#193548;--cream:#ffffff;--coral:#b6d9dc;--pistachio:#e6eff0;--lilac:#d6e1ee;--line:#d5dfe3;--muted:#61737d;--display:KotJakarta,Arial,sans-serif;--sans:Manrope,Arial,sans-serif;--variant-hover:#edf3f5;--variant-weight:600;--variant-tracking:-.05em}
html[data-style-variant=oliwka]{--ink:#3a442e;--cream:#f3f4e9;--coral:#d0dba0;--pistachio:#e0e4c8;--lilac:#d9d2bb;--line:#ced2bd;--muted:#687159;--display:KotWork,Arial,sans-serif;--sans:KotWork,Arial,sans-serif;--variant-hover:#e5e8d6;--variant-weight:550;--variant-tracking:-.04em}
html[data-style-variant=bordo]{--ink:#542b3b;--cream:#fbf0ee;--coral:#e6b9b3;--pistachio:#ead7ce;--lilac:#dcc8d3;--line:#dfc8c9;--muted:#7a616a;--display:Sora,Arial,sans-serif;--sans:Manrope,Arial,sans-serif;--variant-hover:#f0dfdc;--variant-weight:500;--variant-tracking:-.05em}
html[data-style-variant=noc]{color-scheme:dark;--ink:#eceee9;--cream:#17212b;--coral:#ddc299;--pistachio:#273d37;--lilac:#353b50;--line:#46525e;--muted:#b6c1c7;--display:Sora,Arial,sans-serif;--sans:KotWork,Arial,sans-serif;--variant-hover:#293742;--variant-weight:500;--variant-tracking:-.045em;--variant-action-ink:#17212b}

html[data-style-variant] h1,html[data-style-variant] h2,html[data-style-variant] h3{font-weight:var(--variant-weight);letter-spacing:var(--variant-tracking)}
html[data-style-variant] .hero{background:#202b39;color:#f6f1e8}
html[data-style-variant] .hero .text-link.light{color:#f6f1e8}
html[data-style-variant] .hero .button.coral,html[data-style-variant] .button.coral{color:var(--variant-action-ink,var(--ink))}
html[data-style-variant] .button:hover{background:var(--ink);filter:brightness(.92)}
html[data-style-variant] .button.coral:hover{background:var(--coral)}
html[data-style-variant] .text-link:hover{color:inherit;opacity:.75}
html[data-style-variant] .size-option:not(.selected){border-color:var(--line)}
html[data-style-variant] .size-option:hover:not(.selected),html[data-style-variant] .category-tabs button:hover{background:var(--variant-hover)}
html[data-style-variant] .product-bottom{border-color:var(--line)}
html[data-style-variant] .round-button:hover{color:var(--variant-action-ink,var(--ink))}
html[data-style-variant] .brand-strip>span{border-color:var(--line)}
html[data-style-variant] :is(a,button,summary):focus-visible{outline-color:var(--ink)}
html[data-style-variant] .hero :is(a,button):focus-visible{outline-color:#f6f1e8}
html[data-style-variant=noc] .header>.brand img{filter:brightness(0) invert(.94)}
html[data-style-variant=noc] .announcement,html[data-style-variant=noc] .footer{background:#101820;color:#eceee9}
html[data-style-variant=noc] .signup-section{background:#273d37}
html[data-style-variant=noc] :is(.notice,.order-summary,.method-box,.letter-preview,th){background:#253440}
html[data-style-variant=noc] .footer-bottom{border-color:var(--line);color:var(--muted)}

/* Comparison controls belong to the preview, not the shop layout. */
.style-preview{position:fixed;right:20px;bottom:20px;z-index:18;color:#22303b;font:12px/1.5 Manrope,Arial,sans-serif;letter-spacing:0;color-scheme:light}
.style-preview>summary{list-style:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 17px;background:#fff;border:1px solid #d4d9dc;box-shadow:0 5px 20px #101a2520;cursor:pointer}
.style-preview>summary::-webkit-details-marker{display:none}
.style-preview-action{font-size:10px;color:#64717a;margin-left:14px}
.style-preview-dot{width:12px;height:12px;background:#f17c62;flex-shrink:0}
.style-preview[data-selected=piasek] .style-preview-dot{background:#d2b47d}
.style-preview[data-selected=porcelana] .style-preview-dot{background:#b6d9dc}
.style-preview[data-selected=oliwka] .style-preview-dot{background:#879b58}
.style-preview[data-selected=bordo] .style-preview-dot{background:#8e4d65}
.style-preview[data-selected=noc] .style-preview-dot{background:#17212b}
.style-preview-panel{position:absolute;bottom:59px;right:0;width:340px;background:#fff;border:1px solid #d4d9dc;box-shadow:0 8px 35px #101a2520;max-height:calc(100dvh - 100px);overflow:auto}
.style-preview-panel>header{padding:19px 20px 16px;border-bottom:1px solid #e6e9eb}
.style-preview-panel>header strong{font-size:14px;display:block;font-weight:700}
.style-preview-panel>header span{display:block;font-size:10px;color:#6c7880;margin-top:4px}
.style-preview-options{padding:5px}
.style-preview-options button{display:flex;align-items:center;gap:13px;width:100%;padding:12px 14px;text-align:left;background:#fff;border:1px solid transparent;color:#22303b;min-height:64px;font:12px/1.5 Manrope,Arial,sans-serif;cursor:pointer}
.style-preview-options button:hover{background:#f6f7f7}
.style-preview-options button[aria-pressed=true]{background:#f0f3f4;border-color:#b5c0c6}
.style-preview-options b{display:block;font-size:12px;font-weight:700}
.style-preview-options small{display:block;font-size:9px;color:#64717a;margin-top:3px}
.style-swatch{width:38px;height:36px;flex-shrink:0;border:1px solid #0001;background:linear-gradient(90deg,#f6f1e8 50%,#f17c62 50%)}
.style-swatch-piasek{background:linear-gradient(90deg,#f5efe4 50%,#d2b47d 50%)}
.style-swatch-porcelana{background:linear-gradient(90deg,#fff 50%,#b6d9dc 50%)}
.style-swatch-oliwka{background:linear-gradient(90deg,#f3f4e9 50%,#879b58 50%)}
.style-swatch-bordo{background:linear-gradient(90deg,#fbf0ee 50%,#8e4d65 50%)}
.style-swatch-noc{background:linear-gradient(90deg,#17212b 50%,#ddc299 50%)}
.style-check{margin-left:auto;font-size:16px;visibility:hidden}
[aria-pressed=true]>.style-check{visibility:visible}
.style-preview-panel>footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #e6e9eb;padding:17px 20px;font-size:10px}
.style-preview-panel>footer a{text-decoration:underline;text-underline-offset:3px}
html[data-style-variant] .style-preview :is(a,button,summary):focus-visible{outline-color:#22303b}
@media(max-width:560px){.style-preview{right:12px;bottom:12px}.style-preview>summary{padding:10px 13px;min-height:44px;font-size:11px}.style-preview-panel{width:min(340px,calc(100vw - 24px));bottom:54px}.style-preview-panel>header{padding:15px 17px}.style-preview-options button{padding:10px 12px;min-height:58px}.style-preview-panel>footer{padding:14px 17px;font-size:9px}}