.cro-demo .browser {
  height: 344px;
  top: 26px;
  mask-image: linear-gradient(#000 0%, #000 88%, transparent 100%);
}

.detail-selection {
  position: absolute;
  top: 165px;
  left: 150px;
  width: 137px;
  height: 37px;
  border: 1px solid #888;
  opacity: 0;
  pointer-events: none;
}
.detail-selection span {
  position: absolute;
  left: -1px;
  top: -15px;
  background: #666;
  color: white;
  padding: 3px 4px;
  font-size: 6px;
  white-space: nowrap;
}
.conversion-chart {
  position: absolute;
  left: 96px;
  top: 260px;
  width: 217px;
  padding: 12px 14px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  color: #444;
}
.chart-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.chart-heading strong {
  font-weight: 500;
}
.chart-heading > span {
  font-size: 15px;
  color: #555;
}
.chart-note {
  display: block;
  margin-top: 3px;
  font-size: 6px;
  color: #777;
}
.conversion-chart svg {
  width: 100%;
  display: block;
  margin-top: 9px;
  overflow: visible;
}
.chart-grid {
  fill: none;
  stroke: #ededed;
  stroke-width: 0.7;
}
.chart-area {
  fill: #f0f0f0;
  opacity: 0;
}
.chart-line {
  fill: none;
  stroke: #5a5a5a;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.chart-end {
  fill: #555;
  stroke: #fff;
  stroke-width: 1.5;
  opacity: 0;
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 5px;
  color: #777;
}
/* Product-detail wireframe: neutral, compact and aligned to the reference. */
.cro-demo {
  background: #f6f6f6;
}
.cro-demo .browser {
  left: 17px;
  top: 27px;
  width: 300px;
  height: 345px;
  border-radius: 5px;
  mask-image: linear-gradient(#000 0%, #000 92%, transparent 100%);
}
.cro-demo .browser-chrome {
  display: none;
}
.cro-demo .store-wire {
  height: 345px;
}
.cro-demo .store-nav {
  height: 42px;
  gap: 14px;
  border-bottom: 1px solid #ededed;
}
.cro-demo .store-nav b {
  width: 44px;
  height: 10px;
  background: #979797;
}
.cro-demo .store-nav > span {
  width: 32px;
  height: 4px;
  background: #d1d1d1;
}
.cro-demo .store-nav svg {
  width: 12px;
  height: 12px;
  padding: 0;
  background: #d2d2d2;
  border-radius: 50%;
  stroke: none;
}
.breadcrumbs {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #f7f7f7;
  color: #c3c3c3;
  font-size: 7px;
}
.breadcrumbs i {
  width: 23px;
  height: 3px;
  background: #d6d6d6;
}
.breadcrumbs i:last-child {
  width: 35px;
  background: #bcbcbc;
}
.cro-demo .product-visual {
  top: 72px;
  width: 125px;
  height: 161px;
  background: #e4e4e4;
  border-radius: 2px;
}
.cro-demo .image-placeholder {
  left: 53px;
  top: 70px;
  width: 19px;
  height: 19px;
  stroke: #c4c4c4;
}
.cro-demo .image-indicator {
  top: 239px;
  gap: 4px;
}
.cro-demo .image-indicator i {
  width: 28px;
  height: 26px;
  background: #e6e6e6;
}
.cro-demo .image-indicator i:first-child {
  outline-color: #b6b6b6;
}
.cro-demo .product-info {
  top: 76px;
  left: 153px;
  width: 131px;
}
.cro-demo .eyeline {
  height: 7px;
}
.cro-demo .eyeline i {
  border-radius: 2px;
  background: #cecece;
}
.cro-demo .product-title {
  margin-top: 9px;
}
.cro-demo .product-title i {
  height: 14px;
  background: #a1a1a1;
  border-radius: 1px;
}
.cro-demo .rating {
  gap: 3px;
  margin: 9px 0 10px;
}
.cro-demo .rating i {
  background: #bcbcbc;
}
.cro-demo .rating b {
  background: #d4d4d4;
}
.cro-demo .product-info .wire-line {
  height: 3px;
  background: #e1e1e1;
}
.cro-demo .swatches {
  padding-top: 9px;
  border-top: 1px solid #ededed;
  gap: 6px;
}
.cro-demo .swatches i {
  border-radius: 1px;
  width: 22px;
  height: 13px;
  background: #d6d6d6;
}
.cro-demo .swatches i:first-child {
  background: #aaa;
}
.cro-demo .swatches i:nth-child(2) {
  background: #cdcdcd;
}
.cro-demo .swatches i:last-child {
  background: #e9e9e9;
}
.cro-demo .description {
  left: 153px;
  right: 14px;
  top: 203px;
  border-top: 1px solid #ededed;
  padding-top: 5px;
}
.cro-demo .description .wire-line {
  height: 3px;
  margin-top: 5px;
  background: #dedede;
}
.cro-demo .description .title {
  height: 7px;
  width: 47%;
  background: #b5b5b5;
}
.cro-demo .purchase {
  top: 250px;
  left: 153px;
  width: 131px;
  height: 24px;
  border-radius: 1px;
  font-size: 7px;
}
.cro-demo .purchase span:last-child {
  font-size: 10px;
}
.cro-demo .trust {
  left: 14px;
  right: 14px;
  top: 305px;
  font-size: 5px;
  color: #888;
}
.cro-demo .recommendations {
  top: 332px;
}
.cro-demo .recommendations .wire-line {
  background: #e1e1e1;
}
.cro-demo .selection {
  left: 150px;
  top: 247px;
  height: 30px;
  width: 137px;
  border-color: #777;
}
.cro-demo .selection > span {
  background: #666;
}
.cro-demo .selection > i {
  border-color: #777;
}
.cro-demo .focused-heat {
  top: 244px;
  width: 300px;
}
.cro-demo .confirmation {
  top: 317px;
  left: 93px;
  font-size: 6px;
  color: #555;
}
.cro-demo .confirmation > span {
  width: 10px;
  height: 10px;
  background: #ededed;
  color: #555;
}
.cro-demo .analysis-status {
  left: 31px;
  right: 31px;
  font-size: 6px;
  color: #777;
}
.cro-demo .analysis-status > i {
  background: #aaa;
}
.store-wire {
  position: relative;
  height: 316px;
  padding: 0 14px;
  overflow: hidden;
}
.store-nav {
  height: 37px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.store-nav b {
  width: 42px;
  height: 9px;
  border-radius: 1px;
  background: #a4a4a8;
  margin-right: auto;
}
.store-nav > span {
  height: 3px;
  width: 26px;
  background: #dddde4;
}
.store-nav svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #7c7b87;
  stroke-width: 1.2;
  margin-left: 5px;
}
.product-visual {
  position: absolute;
  left: 14px;
  top: 42px;
  width: 117px;
  height: 103px;
  background: #e5e5e7;
  overflow: hidden;
}
.image-placeholder {
  position: absolute;
  left: 48px;
  top: 41px;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #b8b8bd;
  stroke-width: 1;
}
.image-indicator {
  position: absolute;
  top: 150px;
  left: 14px;
  display: flex;
  gap: 4px;
}
.image-indicator i {
  width: 26px;
  height: 19px;
  border-radius: 1px;
  background: #e5e5e7;
}
.image-indicator i:first-child {
  outline: 1px solid #b1b1b8;
}
.product-info {
  position: absolute;
  top: 46px;
  left: 144px;
  width: 120px;
}
.eyeline {
  display: flex;
  gap: 5px;
  height: 8px;
}
.eyeline i {
  width: 31px;
  background: #ceced1;
  border-radius: 4px;
}
.eyeline i:last-child {
  width: 25px;
}
.product-title {
  margin-top: 9px;
}
.product-title i {
  display: block;
  height: 13px;
  margin-top: 4px;
  border-radius: 1px;
  background: #ababaf;
}
.product-title i:last-child {
  width: 79%;
}
.rating {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 8px 0;
}
.rating i {
  width: 7px;
  height: 7px;
  background: #c4c4c8;
  border-radius: 50%;
}
.rating b {
  width: 23px;
  height: 4px;
  background: #d8d8db;
  margin-left: 2px;
}
.product-info .wire-line {
  height: 2px;
  width: 80%;
}
.swatches {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.swatches i {
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #d2d0db;
}
.swatches i:nth-child(2) {
  background: #b3afbf;
}
.swatches i:last-child {
  background: #e7e5eb;
}
.description {
  position: absolute;
  top: 181px;
  left: 14px;
  right: 14px;
}
.description .wire-line {
  margin-top: 6px;
}
.purchase {
  position: absolute;
  top: 238px;
  left: 14px;
  width: 139px;
  height: 26px;
  background: #c7c5d3;
  color: #393542;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  font-size: 8px;
  border-radius: 3px;
  transform-origin: left center;
}
.purchase span:last-child {
  font-size: 13px;
}
.trust {
  position: absolute;
  top: 275px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 6px;
  color: #77717e;
}
.recommendations {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 302px;
  font-size: 7px;
}
.recommendations > div {
  display: flex;
  gap: 7px;
  margin-top: 9px;
}
.recommendations i {
  background: #e8e8ee;
  height: 54px;
  flex: 1;
}
.heat-field {
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: multiply;
  background:
    radial-gradient(
      ellipse 54px 44px at 74px 103px,
      #f52328 0%,
      #ff6524 20%,
      #fadd3b 39%,
      #84d88888 60%,
      #42c1e533 80%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 73px 28px at 202px 65px,
      #f7502b 0%,
      #ffd840aa 35%,
      #64cabb66 65%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 30px 24px at 250px 18px,
      #f4752bbb 0%,
      #e6ec4088 30%,
      #5fcde144 66%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 60px 30px at 180px 152px,
      #ff712fcc 0%,
      #f4e64299 30%,
      #69d8aa66 59%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 46px 25px at 73px 251px,
      #f8653699 0%,
      #f8df4a77 30%,
      #52cdda44 66%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 155px 160px at 128px 134px,
      #527ff71a,
      #3abde512 60%,
      transparent 100%
    );
  filter: blur(3px);
}
.clicks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.click-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f07c42;
  opacity: 0;
}
.click-dot:after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid #f49a6877;
  border-radius: 50%;
}
.focused-heat {
  position: absolute;
  top: 153px;
  left: 0;
  width: 282px;
  height: 78px;
  opacity: 0;
  mix-blend-mode: multiply;
  background: radial-gradient(
    ellipse 108px 31px at center,
    #ef3f29 0%,
    #ff9c30bb 25%,
    #f5e84299 47%,
    #5ccab355 70%,
    transparent 100%
  );
  filter: blur(3px);
}
.selection {
  position: absolute;
  top: 235px;
  left: 11px;
  width: 145px;
  height: 32px;
  border: 1px solid #7970e1;
  opacity: 0;
  transform-origin: left center;
}
.selection > i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border: 1px solid #7970e1;
}
.selection > i:nth-child(1) {
  top: -3px;
  left: -3px;
}
.selection > i:nth-child(2) {
  top: -3px;
  right: -3px;
}
.selection > i:nth-child(3) {
  bottom: -3px;
  left: -3px;
}
.selection > i:nth-child(4) {
  bottom: -3px;
  right: -3px;
}
.selection > span {
  position: absolute;
  top: -17px;
  left: -1px;
  background: #7970e1;
  color: white;
  padding: 3px 5px;
  font-size: 6px;
  white-space: nowrap;
}
.confirmation {
  position: absolute;
  top: 221px;
  left: 72px;
  font-size: 8px;
  display: flex;
  gap: 5px;
  align-items: center;
  opacity: 0;
  color: #565267;
}
.confirmation > span {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #eeecfb;
  color: #6f62c5;
}
.analysis-status {
  position: absolute;
  left: 39px;
  right: 39px;
  top: 375px;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7px;
  color: #645e73;
}
.analysis-status > i {
  height: 4px;
  width: 4px;
  background: #8d82bb;
  border-radius: 50%;
}
.analysis-status > span {
  position: absolute;
  left: 10px;
}
.analysis-status > span:not(.status-observe) {
  opacity: 0;
}
.heat-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  color: #787381;
}
.heat-legend i {
  width: 43px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #59bed9, #95d797, #f5da44, #f15f36);
}
.cro-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 20px;
  opacity: 0;
  filter: drop-shadow(0 1px 1px #0002);
}
@media (prefers-reduced-motion: reduce) {
  .heat-field {
    opacity: 0.8;
  }
  .status-observe {
    display: none;
  }
  .analysis-status > span.status-heat,
  .heat-legend {
    opacity: 1;
  }
  .cro-cursor {
    display: none;
  }
}