/* Sylveco Cross-sell: rząd miniaturek produktów powiązanych na karcie produktu */
.syxs { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line, #E4E3E0); }
.syxs-h { margin: 0 0 8px; font: 500 .6875rem/1.6 var(--f, inherit); letter-spacing: .18em; text-transform: uppercase; color: var(--muted, #6B6A68); }
.syxs-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.syxs-row li { margin: 0; min-width: 0; }
.syxs-row li[hidden] { display: none; }
.syxs-row a, .syxs-row button { display: block; width: 100%; aspect-ratio: 1; box-sizing: border-box; border: 1px solid var(--line, #E4E3E0); background: #fff; padding: 0; overflow: hidden; transition: border-color .2s; }
.syxs-row a:hover, .syxs-row a:focus-visible, .syxs-row button:hover, .syxs-row button:focus-visible { border-color: var(--ink, #0E0E0E); outline: none; }
.syxs-row img { display: block; width: 100%; height: 100%; object-fit: contain; }
.syxs-row button { cursor: pointer; font: 500 .9375rem/1 var(--f, inherit); color: var(--ink, #0E0E0E); letter-spacing: .04em; }
.syxs.is-open .syxs-more button { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 760px) {
  .syxs-row { gap: 6px; }
}

/* tooltip z kafelkiem produktu przy kursorze (tylko mysz) */
.syxs-tip { position: fixed; left: 0; top: 0; z-index: 100001; width: 220px; box-sizing: border-box; padding: 12px 12px 14px; background: #fff; border: 1px solid var(--line, #E4E3E0); box-shadow: 0 14px 36px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.06); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.syxs-tip.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.syxs-tip img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.syxs-tip .tp-brand { margin: 10px 0 2px; font: 500 .625rem/1.4 var(--f, inherit); letter-spacing: .18em; text-transform: uppercase; color: var(--muted, #6B6A68); }
.syxs-tip .tp-name { margin: 0; font: 400 .9375rem/1.35 var(--f, inherit); color: var(--ink, #0E0E0E); }
.syxs-tip .tp-price { margin: 8px 0 0; font: 500 .9375rem/1.2 var(--f, inherit); color: var(--ink, #0E0E0E); }
.syxs-tip .tp-price del { margin-left: 8px; font-weight: 400; color: var(--muted, #6B6A68); }

/* dotyk: karta na środku ekranu z przyciemnionym tłem */
.syxs-dim { position: fixed; inset: 0; z-index: 100000; background: rgba(14,14,14,.55); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.syxs-dim.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.syxs-tip.is-modal { left: 50% !important; top: calc(50% - 22px) !important; transform: translate(-50%, -50%); width: min(300px, calc(100vw - 48px)); pointer-events: auto; cursor: pointer; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.syxs-tip.is-modal .tp-name { font-size: 1.0625rem; }
html.syxs-lock { overflow: hidden; }

/* przesunięcie palcem: stara karta ucieka za krawędź, nowa wjeżdża z przeciwnej strony (bez pustego białego pola) */
.syxs-tip.is-modal { touch-action: pan-y; }
.syxs-tip.is-modal.out-l { animation: syxsOutL .28s cubic-bezier(.4,0,1,1) forwards; }
.syxs-tip.is-modal.out-r { animation: syxsOutR .28s cubic-bezier(.4,0,1,1) forwards; }
.syxs-tip.is-modal.in-l { animation: syxsInL .32s cubic-bezier(0,0,.2,1); }
.syxs-tip.is-modal.in-r { animation: syxsInR .32s cubic-bezier(0,0,.2,1); }
.syxs-ghost { pointer-events: none; }
@keyframes syxsOutL { from { transform: translate(-50%, -50%); } to { transform: translate(calc(-50% - 120vw), -50%); } }
@keyframes syxsOutR { from { transform: translate(-50%, -50%); } to { transform: translate(calc(-50% + 120vw), -50%); } }
@keyframes syxsInL { from { transform: translate(calc(-50% + 120vw), -50%); } to { transform: translate(-50%, -50%); } }
@keyframes syxsInR { from { transform: translate(calc(-50% - 120vw), -50%); } to { transform: translate(-50%, -50%); } }

/* akcje w karcie (dotyk): serduszko + koszyk */
.syxs-act { display: none; }
.syxs-tip.is-modal .syxs-act { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 10px; }
.syxs-tip.is-modal .syxs-fav:empty { display: none; }
.syxs-tip.is-modal .syxs-fav .sq-heart { width: 44px; height: 44px; }
.syxs-tip.is-modal .syxs-cart { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--ink, #0E0E0E); background: var(--ink, #0E0E0E); color: #fff; box-sizing: border-box; }
.syxs-tip.is-modal .syxs-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.syxs-tip.is-modal .syxs-cart.is-loading { opacity: .5; }

/* kropki pod kartą */
.syxs-dots { position: fixed; left: 0; right: 0; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 100001; display: flex; justify-content: center; align-items: center; gap: 7px; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.syxs-dots.is-on { opacity: 1; }
.syxs-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.45); transition: transform .2s, background-color .2s; }
.syxs-dots i.is-edge { transform: scale(.6); }
.syxs-dots i.is-on { background: #fff; transform: scale(1.25); }