/* Interaction-only additions. No approved layout, type, colors or dimensions change. */
.product-row[data-product] {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  width:100%;
  cursor:pointer;
}
.product-row[data-product]:focus-visible {
  outline:2px solid #7955ff;
  outline-offset:4px;
  border-radius:11px;
}
/* The original narrow snowboard styling remains exactly as approved. */
.product-row[data-product="skincare"].selected .product-thumb img,
.product-row[data-product="sneakers"].selected .product-thumb img {
  width:61px;
  height:75px;
  object-fit:contain;
}
.approval-feature .meta-approval-icon {
  width:35px;
  height:35px;
  object-fit:contain;
  mix-blend-mode:multiply;
}
.scenario-copy-holder { position:relative; }
.scenario-ghost { pointer-events:none!important; }
.scenario-ghost-text {
  position:absolute;
  display:block;
  pointer-events:none;
  font:inherit;
  color:inherit;
}
.selection-status {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
@media(prefers-reduced-motion:reduce) {
  .scenario-ghost { display:none!important; }
}

/* Transparent copy bounds must not cover the product row hit targets. */
.hero-copy { pointer-events:none; }
.hero-copy a { pointer-events:auto; }
/* One consistent sneaker asset in both selected and unselected states. */
.product-row[data-product="sneakers"] .product-thumb img {
  width:61px;
  height:75px;
  object-fit:contain;
}

/* Crop the matching ad photo inside the existing thumbnail, in every state. */
.product-row[data-product="sunglasses"] .product-thumb img,
.product-row[data-product="sunglasses"].selected .product-thumb img {
  width:61px;
  height:38px;
  object-fit:cover;
  object-position:50% 53%;
}
/* The icon row is 54px high; its glass backing adds exactly 6px above/below. */
.context-features { height:54px; }
.context-features::before {
  content:'';
  position:absolute;
  inset:-6px -5px -6px -7px;
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.58),rgba(255,255,255,.36) 55%,rgba(250,251,255,.46));
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 3px 12px rgba(43,55,84,.025);
  -webkit-backdrop-filter:blur(12px) saturate(110%);
  backdrop-filter:blur(12px) saturate(110%);
  pointer-events:none;
}

/* Blend every ad into its photograph using the same full-width fade. */
.artboard .ad-copy-surface {
  background:none;
  mask-image:none;
  -webkit-mask-image:none;
  z-index:1;
}
.artboard .advertisement-art::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:190px;
  background:linear-gradient(to bottom,transparent,rgba(var(--ad-copy-tint),.38) 35%,rgba(var(--ad-copy-tint),.83) 100%);
  pointer-events:none;
}
.artboard[data-selected-product="skincare"] { --ad-copy-tint:255,246,231; }
.artboard[data-selected-product="sunglasses"] { --ad-copy-tint:255,240,217; }
.artboard[data-selected-product="sneakers"] { --ad-copy-tint:246,247,248; }

.artboard[data-selected-product="snowboard"] { --ad-copy-tint:241,246,250; }

/* Flat mouse outline: no backing, frame, blur, shadow or text. */
.scroll-cue {
  position:absolute;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:6;
  color:#17243e;
  pointer-events:none;
}
.scroll-cue svg { display:block; width:40px; height:60px; stroke-width:2.2; }
.scroll-cue .scroll-wheel { animation:scroll-wheel 2.6s ease-in-out infinite; }
@keyframes scroll-wheel { 0%,20%,100% {transform:translateY(0);opacity:.9} 60% {transform:translateY(6px);opacity:.25} }
@media(prefers-reduced-motion:reduce) { .scroll-cue .scroll-wheel {animation:none} }

/* Reuse the existing transparent brand asset; show its symbol without a matte. */
.brand-symbol { display:block; position:relative; width:41px; height:39px; flex-shrink:0; overflow:hidden; }
.brand .brand-symbol img { position:absolute; left:0; top:3.5px; height:32px; width:auto; max-width:none; object-fit:initial; mix-blend-mode:normal; }

/* Anchor navigation should not frame the entire advertising card. */
.meta-card:target { outline:none; outline-offset:0; }

/* An illustrative control, not an interactive product action. */
.ai-card .create-concept,
.ai-card .create-concept:hover {
  cursor:default;
  background:linear-gradient(110deg,#582bff,#5229ff);
  pointer-events:none;
}
/* Keep the gradient stable and animate brightness rather than swapping images. */
.request-access,
.request-access:hover { background:linear-gradient(115deg,#542cff,#512bff); }
.request-access { transition:filter 220ms ease,box-shadow 220ms ease; }
.request-access:hover { filter:brightness(.94); }
@media(prefers-reduced-motion:reduce) { .request-access { transition:none; } }

/* AI as a small typographic signature, rather than a badge. */
.ai-highlight {
  position:relative;
  display:inline-block;
  padding:0 2px 0 0;
  margin-right:3px;
  font-size:1em;
  font-weight:850;
  font-style:italic;
  letter-spacing:-.65px;
  line-height:1;
  background:linear-gradient(115deg,#008cff 5%,#5741ff 55%,#a42be8);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ai-highlight::before {
  content:'';
  position:absolute;
  left:-1px;
  right:0;
  bottom:-3px;
  height:2px;
  border-radius:50%;
  background:linear-gradient(90deg,#09acff,#7d37f3 70%,transparent);
  transform:rotate(-8deg);
}
.ai-highlight::after {
  content:'';
  position:absolute;
  width:7px;
  height:7px;
  top:-4px;
  right:-5px;
  background:linear-gradient(135deg,#2895ff,#a23cf1);
  clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);
}

.context-line .ai-highlight { font-size:16px; }

/* Keep the phrase together; reserve the original three-line vertical rhythm. */
.hero-copy h1 { font-size:72px; line-height:77.88px; letter-spacing:-2.8px; }
.hero-copy .headline-gradient { font-size:88px; line-height:77.88px; }