.feed-device {
  --feed-viewport-width: 375px;
  --feed-viewport-height: 812px;
  --feed-inline-padding: 12px;
  --feed-card-gap: 8px;
  --cpc-v2-image-ratio: 4/3;
  position: relative;
  width: min(100%, calc(var(--feed-viewport-width) + 22px));
  padding: 10px;
  background: #202326;
  border: 1px solid #3d4247;
  border-radius: 38px;
  box-shadow: 0 34px 90px rgba(26, 34, 43, 0.23);
  transition: width 160ms ease;
}

.shopping-demo-pointer {
  --demo-pointer-size: clamp(34px, calc(var(--feed-viewport-width) * 0.1), 44px);
  --demo-pointer-x: 50%;
  --demo-pointer-y: 50%;
  --demo-pointer-rgb: 92, 92, 92;
  --demo-pointer-opacity: 0.38;
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: var(--demo-pointer-size);
  height: var(--demo-pointer-size);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(
    calc(var(--demo-pointer-x) - (var(--demo-pointer-size) / 2)),
    calc(var(--demo-pointer-y) - (var(--demo-pointer-size) / 2)),
    0
  );
  transition: opacity 220ms ease;
  will-change: transform, opacity;
}

.shopping-demo-pointer > span {
  position: absolute;
  inset: 0;
  background: rgba(var(--demo-pointer-rgb), var(--demo-pointer-opacity));
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(20, 35, 51, 0.14);
  transform: scale(1);
  transition: transform 100ms ease;
  backdrop-filter: blur(2px);
}

.shopping-demo-pointer.is-visible { opacity: 1; }
.shopping-demo-pointer.is-contacting > span { transform: scale(0.94); }
.shopping-demo-pointer.is-tapping > span { transform: scale(0.84); }
.shopping-demo-pointer.is-tapping::after {
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(var(--demo-pointer-rgb), 0.32);
  border-radius: 50%;
  content: "";
  animation: shopping-demo-tap 210ms ease-out;
}

@keyframes shopping-demo-tap {
  from { opacity: 0.65; transform: scale(0.78); }
  to { opacity: 0; transform: scale(1.12); }
}

.feed-device__screen {
  width: 100%;
  height: min(var(--feed-viewport-height), calc(100vh - 88px));
  overflow-x: hidden;
  overflow-y: auto;
  background: #f2f3f4;
  border-radius: 29px;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.feed-device__screen::-webkit-scrollbar { display: none; }
.feed-device__screen:focus-visible {
  outline: 3px solid rgba(214, 134, 58, 0.8);
  outline-offset: 4px;
}

.feed-device__header {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(16px, var(--feed-inline-padding));
  color: #143b63;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(20, 59, 99, 0.08);
  font-size: 0.72rem;
  font-weight: 750;
  backdrop-filter: blur(12px);
}

.feed-status {
  margin: 28px var(--feed-inline-padding);
  padding: 28px 18px;
  color: #67727f;
  background: #fff;
  border-radius: 18px;
  text-align: center;
}
.feed-status.is-error { color: #8e352f; }

.product-feed {
  display: grid;
  gap: var(--feed-card-gap);
  margin: 0;
  overflow-anchor: none;
  padding: var(--feed-card-gap) var(--feed-inline-padding) calc(var(--feed-card-gap) * 2);
  list-style: none;
}

.product-feed:empty { display: none; }
.product-feed__item { min-width: 0; }
.product-feed__item.is-size-transitioning {
  overflow: hidden;
  transition: height var(--cpc-size-transition-duration, 560ms) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.product-feed[data-card-structure="v2"] compact-product-card[role="button"] { cursor: pointer; }
.product-feed[data-card-structure="v2"] compact-product-card[role="button"]:focus-visible {
  outline: 3px solid rgba(214, 134, 58, 0.72);
  outline-offset: 3px;
}
.product-feed[data-card-structure="v2"] {
  gap: var(--feed-card-gap);
  padding-top: var(--feed-card-gap);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .feed-device { transition: none; }
  .product-feed__item.is-size-transitioning { transition: none; }
  .shopping-demo-pointer,
  .shopping-demo-pointer > span { transition: none; }
  .shopping-demo-pointer.is-tapping::after { animation: none; }
}