
.ab-feedback{
  position:relative;
  overflow:hidden;
  padding:28px 0 96px;
  color:var(--ab-feedback-text);
  background:
    linear-gradient(180deg,var(--ab-feedback-bg),#030403 78%,#020302);
}
.ab-feedback *{box-sizing:border-box}
.ab-feedback__glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 18%,color-mix(in srgb,var(--ab-feedback-gold) 12%,transparent),transparent 30%),
    radial-gradient(circle at 88% 24%,color-mix(in srgb,var(--ab-feedback-cyan) 10%,transparent),transparent 30%),
    radial-gradient(circle at 54% 100%,color-mix(in srgb,var(--ab-feedback-pink) 8%,transparent),transparent 38%);
}
.ab-feedback__wrap{
  position:relative;
  width:min(1440px,calc(100% - 56px));
  margin:0 auto;
}
.ab-feedback__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
}
.ab-feedback__heading{max-width:920px}
.ab-feedback__eyebrow{
  display:block;
  margin-bottom:12px;
  color:var(--ab-feedback-cyan);
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
}
.ab-feedback__heading h2{
  margin:0;
  color:var(--ab-feedback-text);
  font-size:clamp(42px,5vw,76px);
  font-weight:950;
  letter-spacing:-.055em;
  line-height:.94;
  text-wrap:balance;
}
.ab-feedback__heading p{
  margin:18px 0 0;
  color:rgba(247,248,244,.72);
  font-size:16px;
  line-height:1.7;
}
.ab-feedback__controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex:none;
}
.ab-feedback__arrow{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  box-shadow:0 14px 30px rgba(0,0,0,.28);
  cursor:pointer;
  font-size:22px;
  transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease;
}
.ab-feedback__arrow:hover,
.ab-feedback__arrow:focus-visible{
  color:#071008;
  border-color:rgba(255,255,255,.55);
  background:linear-gradient(135deg,var(--ab-feedback-gold),var(--ab-feedback-cyan));
  transform:translateY(-2px);
}
.ab-feedback__counter{
  min-width:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:rgba(255,255,255,.64);
  font-size:11px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.12em;
}
.ab-feedback__counter b{color:var(--ab-feedback-gold);font-size:13px}
.ab-feedback__counter i{width:22px;height:1px;background:rgba(255,255,255,.25)}
.ab-feedback__viewport{
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:6px 2px 18px;
}
.ab-feedback__viewport::-webkit-scrollbar{display:none}
.ab-feedback__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(300px,25.5%);
  gap:18px;
}
.ab-feedback__card{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  padding:0;
  overflow:hidden;
  scroll-snap-align:start;
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;
  background:var(--ab-feedback-panel);
  box-shadow:0 22px 50px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);
  cursor:zoom-in;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ab-feedback__card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ab-feedback-pink) 8%,transparent),transparent 24%,transparent 72%,color-mix(in srgb,var(--ab-feedback-cyan) 7%,transparent));
}
.ab-feedback__card:hover,
.ab-feedback__card:focus-visible{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--ab-feedback-gold) 55%,rgba(255,255,255,.18));
  box-shadow:0 28px 68px rgba(0,0,0,.42),0 0 0 1px color-mix(in srgb,var(--ab-feedback-gold) 14%,transparent) inset;
}
.ab-feedback__image{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#f7f5f1;
}
.ab-feedback__mobile-hint{
  display:none;
  margin-top:8px;
  color:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
  text-align:center;
}
.ab-feedback__mobile-hint span{color:var(--ab-feedback-cyan)}
.ab-feedback__lightbox[hidden]{display:none}
.ab-feedback__lightbox{
  position:fixed;
  z-index:99999;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);
}
.ab-feedback__lightbox img{
  display:block;
  width:auto;
  max-width:min(92vw,720px);
  max-height:90vh;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.2);
  border-radius:22px;
  box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 50px color-mix(in srgb,var(--ab-feedback-pink) 12%,transparent);
}
.ab-feedback__lightbox-close{
  position:fixed;
  top:22px;
  right:22px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#fff;
  background:rgba(10,12,11,.75);
  font-size:32px;
  line-height:1;
  cursor:pointer;
}
body.ab-feedback-lock{overflow:hidden}
@media(max-width:980px){
  .ab-feedback__wrap{width:min(100% - 32px,900px)}
  .ab-feedback__header{align-items:flex-start}
  .ab-feedback__track{grid-auto-columns:minmax(280px,42%)}
}
@media(max-width:700px){
  .ab-feedback{padding:16px 0 64px}
  .ab-feedback__wrap{width:calc(100% - 20px)}
  .ab-feedback__header{display:block;margin-bottom:18px;padding:0 4px}
  .ab-feedback__eyebrow{margin-bottom:9px;font-size:10px}
  .ab-feedback__heading h2{font-size:clamp(34px,11vw,48px);line-height:.98}
  .ab-feedback__heading p{margin-top:12px;font-size:14px}
  .ab-feedback__controls{justify-content:flex-end;margin-top:18px}
  .ab-feedback__arrow{width:46px;height:46px}
  .ab-feedback__track{grid-auto-columns:86vw;gap:12px}
  .ab-feedback__card{border-radius:20px}
  .ab-feedback__mobile-hint{display:block}
  .ab-feedback__lightbox{padding:12px}
  .ab-feedback__lightbox img{max-width:96vw;max-height:88vh;border-radius:16px}
  .ab-feedback__lightbox-close{top:12px;right:12px;width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .ab-feedback__viewport{scroll-behavior:auto}
  .ab-feedback__card,.ab-feedback__arrow{transition:none}
}
