.ebss-look{
  --ebss-accent:#3A35F4;
  --ebss-yellow:#F6EA51;
  --ebss-text:#17173E;
  --ebss-fade:90px;
  --ebss-card-h:410px;
  --ebss-card-max-w:860px;
  --ebss-card-min-w:300px;
  --ebss-card-pad:0px;
  --ebss-radius:22px;
  width:100%;
  margin:0 auto;
  padding:clamp(46px,5vw,86px) 0 clamp(44px,5vw,78px);
  overflow:hidden;
  color:var(--ebss-text);
  position:relative;
  isolation:isolate;
  background:#F7F8FD;
}
.ebss-look *{box-sizing:border-box}
.ebss-look__head{max-width:1120px;margin:0 auto clamp(34px,4vw,56px);padding:0 24px;text-align:center}
.ebss-look__eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid #E3E5F0;color:var(--ebss-accent);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 26px rgba(25,27,61,.05)}
.ebss-look__eyebrow:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ebss-yellow);box-shadow:0 0 0 5px color-mix(in srgb,var(--ebss-yellow) 30%,transparent)}
.ebss-look__title{margin:18px 0 12px;font-size:clamp(34px,4.1vw,64px);line-height:1.03;font-weight:800;letter-spacing:-.035em;color:var(--ebss-text)}
.ebss-look__desc{max-width:880px;margin:0 auto;font-size:clamp(16px,1.5vw,21px);line-height:1.6;color:#666B82}
.ebss-look__rows{display:flex;flex-direction:column}
.ebss-look__row{position:relative}
.ebss-look__row-label{width:max-content;margin:0 0 10px clamp(18px,5vw,84px);display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E0E3EE;border-radius:999px;padding:8px 15px 8px 11px;font-size:14px;font-weight:800;box-shadow:0 7px 24px rgba(26,28,65,.05)}
.ebss-look__row-label span{width:13px;height:13px;border-radius:4px;background:linear-gradient(135deg,var(--ebss-accent),#706CFF);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.ebss-look__viewport{position:relative;width:100%;overflow:hidden;padding:12px 0 24px;cursor:default;touch-action:pan-y}
.ebss-look__row--manual .ebss-look__viewport{overflow-x:auto;cursor:grab;scrollbar-width:none;touch-action:pan-x}
.ebss-look__row--manual .ebss-look__viewport::-webkit-scrollbar{display:none}
.ebss-look__row--manual .ebss-look__viewport.is-dragging{cursor:grabbing;user-select:none}
.ebss-look__track{display:flex;width:max-content;will-change:transform;transform:translate3d(0,0,0)}
.ebss-look__group{display:flex;width:max-content}
.ebss-look--align-start .ebss-look__group{align-items:flex-start}
.ebss-look--align-center .ebss-look__group{align-items:center}
.ebss-look--align-end .ebss-look__group{align-items:flex-end}

/*
 * Najważniejsza zmiana 1.1.0:
 * tryb naturalny nie narzuca jednego prostokąta wszystkim zrzutom.
 * Każdy obraz zachowuje własne proporcje, tak jak w prezentacjach premium.
 */
.ebss-look__card{
  --ebss-size-scale:1;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  height:auto;
  min-width:0;
  max-width:none;
  padding:var(--ebss-card-pad);
  border:1px solid #E2E5F0;
  border-radius:var(--ebss-radius);
  overflow:hidden;
  text-decoration:none;
  cursor:pointer;
  appearance:none;
  color:inherit;
  background:#fff;
  line-height:0;
  transition:transform .26s ease,box-shadow .26s ease,border-color .26s ease;
}
.ebss-look__card--size-small{--ebss-size-scale:.72}
.ebss-look__card--size-medium{--ebss-size-scale:.88}
.ebss-look__card--size-large{--ebss-size-scale:1.10}
.ebss-look__card--size-xl{--ebss-size-scale:1.24}

.ebss-look__img{
  display:block;
  pointer-events:none;
  user-select:none;
  border-radius:max(0px,calc(var(--ebss-radius) - var(--ebss-card-pad)));
}

/* Domyślnie: pełny zrzut, brak przycinania. Szerokość i wysokość wynikają z proporcji pliku. */
.ebss-look--fit-natural .ebss-look__card{min-width:0!important}
.ebss-look--fit-natural .ebss-look__img{
  width:auto;
  height:auto;
  max-height:calc(var(--ebss-card-h) * var(--ebss-size-scale));
  max-width:min(calc(var(--ebss-card-max-w) * var(--ebss-size-scale)),88vw);
  object-fit:contain;
}

/* Równa wysokość bez kadrowania: przydatne, gdy użytkownik chce bardziej równy pas. */
.ebss-look--fit-equal .ebss-look__card{
  height:calc(var(--ebss-card-h) * var(--ebss-size-scale));
  min-width:calc(var(--ebss-card-min-w) * var(--ebss-size-scale));
  max-width:min(calc(var(--ebss-card-max-w) * var(--ebss-size-scale)),88vw);
}
.ebss-look--fit-equal .ebss-look__img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* Opcjonalny tryb kafelkowy z kadrowaniem. Nigdy nie jest domyślny. */
.ebss-look--fit-fill .ebss-look__card{
  width:calc(var(--ebss-card-min-w) * var(--ebss-size-scale));
  height:calc(var(--ebss-card-h) * var(--ebss-size-scale));
}
.ebss-look--fit-fill .ebss-look__img{width:100%;height:100%;object-fit:cover}

.ebss-look--shadow-none .ebss-look__card{box-shadow:none}
.ebss-look--shadow-soft .ebss-look__card{box-shadow:0 12px 32px rgba(23,23,62,.075)}
.ebss-look--shadow-medium .ebss-look__card{box-shadow:0 17px 42px rgba(23,23,62,.12)}
.ebss-look--shadow-strong .ebss-look__card{box-shadow:0 22px 54px rgba(23,23,62,.18)}
.ebss-look__card--lift:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--ebss-accent) 34%,#E3E6F0);box-shadow:0 20px 46px rgba(58,53,244,.14);z-index:2}
.ebss-look__card--zoom:hover{transform:scale(1.025);z-index:2}
.ebss-look__card--glow:hover{border-color:color-mix(in srgb,var(--ebss-accent) 46%,#E3E6F0);box-shadow:0 0 0 3px color-mix(in srgb,var(--ebss-accent) 12%,transparent),0 18px 46px rgba(58,53,244,.16);z-index:2}

/* Przesunięcie oblicza JS na podstawie dokładnej szerokości pierwszej grupy. */
.ebss-look__row--continuous .ebss-look__track{animation:ebssMarquee var(--ebss-duration,40s) linear infinite}
.ebss-look__row--alternate .ebss-look__track{animation:ebssMarquee var(--ebss-duration,40s) ease-in-out infinite alternate}
.ebss-look__row--right .ebss-look__track{animation-direction:reverse}
.ebss-look__row--right.ebss-look__row--alternate .ebss-look__track{animation-direction:alternate-reverse}
.ebss-look__row--pause-hover:hover .ebss-look__track{animation-play-state:paused}
.ebss-look__row.is-touched .ebss-look__track{animation-play-state:paused}
.ebss-look__row--static .ebss-look__viewport{overflow-x:auto;scrollbar-width:thin}
.ebss-look__row--static .ebss-look__group + .ebss-look__group{display:none}
@keyframes ebssMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--ebss-shift,-50%),0,0)}}

.ebss-look__row--fade .ebss-look__viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--ebss-fade),#000 calc(100% - var(--ebss-fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--ebss-fade),#000 calc(100% - var(--ebss-fade)),transparent 100%)}
.ebss-look__cta-wrap{text-align:center;margin-top:clamp(30px,4vw,56px);padding:0 20px}
.ebss-look__cta{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:0 28px;border-radius:999px;background:linear-gradient(135deg,var(--ebss-accent),#5B45FF);color:#fff!important;text-decoration:none!important;font-size:17px;font-weight:800;box-shadow:0 13px 32px rgba(58,53,244,.22);transition:transform .2s ease,box-shadow .2s ease}
.ebss-look__cta span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .25s ease}
.ebss-look__cta:hover{transform:translateY(-2px);box-shadow:0 17px 38px rgba(58,53,244,.28)}
.ebss-look__cta:hover span{transform:translateX(4px)}
.ebss-look__lightbox{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:clamp(18px,4vw,56px);background:rgba(14,15,36,.78);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.ebss-look__lightbox.is-open{opacity:1;visibility:visible}
.ebss-look__lightbox img{max-width:min(1560px,94vw);max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(0,0,0,.34)}
.ebss-look__lightbox-close{position:absolute;right:clamp(18px,3vw,42px);top:clamp(18px,3vw,38px);width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#17173E;font-size:32px;line-height:1;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.18)}

@media(max-width:1024px){
  .ebss-look{--ebss-card-h:320px;--ebss-card-max-w:680px}
  .ebss-look__row-label{margin-left:22px}
  .ebss-look__row--fade .ebss-look__viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%)}
}
@media(max-width:767px){
  .ebss-look{--ebss-card-h:245px;--ebss-card-max-w:520px;padding-top:42px}
  .ebss-look__head{padding:0 18px;margin-bottom:32px}
  .ebss-look__eyebrow{font-size:11px;padding:8px 12px}
  .ebss-look__title{font-size:clamp(31px,10vw,44px)}
  .ebss-look__desc{font-size:15px;line-height:1.55}
  .ebss-look__row-label{margin-left:16px;font-size:12px;padding:7px 12px}
  .ebss-look__viewport{padding-bottom:18px}
  .ebss-look__cta{width:min(100%,330px)}
  .ebss-look--fit-natural .ebss-look__img{max-width:86vw}
  .ebss-look__row--fade .ebss-look__viewport{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
}
@media(prefers-reduced-motion:reduce){
  .ebss-look__track{animation:none!important}
  .ebss-look__viewport{overflow-x:auto!important;scrollbar-width:none}
  .ebss-look__card,.ebss-look__cta,.ebss-look__cta span{transition:none!important}
}
