.product-link-trial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  max-width: 640px;
  margin-top: var(--space-6);
  position: relative;
  z-index: 2;
  container-type: inline-size;
}

/* Label stays for screen readers only. */
.product-link-trial label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hollow ring with two beams chasing each other (same effect as the app's URL field). */
.product-link-trial__ring {
  position: relative;
  isolation: isolate;
  padding: var(--trial-ring-width);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, white 10%, transparent);
  transition: box-shadow var(--dur-base) ease;
}

.product-link-trial__ring::before,
.product-link-trial__ring::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--trial-ring-width);
  border-radius: inherit;
  background: conic-gradient(from var(--trial-ring-angle),
    transparent 0deg,
    transparent 300deg,
    var(--brand-blue-tint) 328deg,
    var(--trial-ring-pink) 346deg,
    var(--trial-ring-violet) 356deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: trialRingSpin var(--trial-ring-spin) linear infinite;
  opacity: 0.7;
  pointer-events: none;
}

/* Second beam sits 180deg opposite; same animation so focus speed-up stays symmetric. */
.product-link-trial__ring::after {
  opacity: 0.38;
  background: conic-gradient(from calc(var(--trial-ring-angle) + 180deg),
    transparent 0deg,
    transparent 300deg,
    var(--brand-blue-tint) 328deg,
    var(--trial-ring-pink) 346deg,
    var(--trial-ring-violet) 356deg,
    transparent 360deg);
}

.product-link-trial__ring:focus-within {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--brand-blue-tint) 40%, transparent),
    -12px 0 24px color-mix(in srgb, var(--brand-blue) 20%, transparent),
    12px 0 24px color-mix(in srgb, var(--trial-ring-pink) 16%, transparent);
}

.product-link-trial__ring:focus-within::before,
.product-link-trial__ring:focus-within::after {
  animation-duration: var(--trial-ring-spin-focus);
}

.product-link-trial__ring:has([aria-invalid="true"])::before,
.product-link-trial__ring:has([aria-invalid="true"])::after {
  background: var(--status-danger);
  animation: none;
}

.product-link-trial__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-full);
  padding: var(--trial-row-inset);
  background: rgb(var(--ch-veil) / var(--a-55));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.product-link-trial__field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.product-link-trial__icon {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  width: 18px;
  height: 18px;
  color: var(--trial-meta-text);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color var(--dur-base) ease;
}

.product-link-trial__ring:focus-within .product-link-trial__icon {
  color: var(--brand-blue-tint);
}

.product-link-trial input[type="url"] {
  width: 100%;
  min-width: 0;
  height: calc(var(--trial-field-height) - 2 * var(--trial-row-inset));
  padding: 0 var(--space-3) 0 calc(var(--space-4) + 18px + var(--space-3));
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--trial-chip-text);
  font: inherit;
  font-size: var(--trial-field-font);
  font-weight: var(--weight-medium);
}

.product-link-trial input[type="url"]::placeholder {
  color: var(--trial-meta-text);
  opacity: 1;
}

/* The real "https://" placeholder only shows on focus; the rotating phrases cover the idle state. */
.product-link-trial input[type="url"]:not(:focus)::placeholder {
  color: transparent;
}

.product-link-trial__phrases {
  position: absolute;
  inset: 0 var(--space-2) 0 calc(var(--space-4) + 18px + var(--space-3));
  overflow: hidden;
  color: var(--trial-meta-text);
  font-size: var(--trial-field-font);
  font-weight: var(--weight-medium);
  pointer-events: none;
}

.product-link-trial input[type="url"]:is(:focus, :not(:placeholder-shown)) + .product-link-trial__phrases {
  visibility: hidden;
}

.product-link-trial__phrase {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: calc(var(--trial-field-height) - 2 * var(--trial-row-inset));
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(100%);
  transition: transform var(--trial-phrase-swap) ease, opacity var(--trial-phrase-swap) ease;
}

.product-link-trial__phrase.is-active {
  opacity: 1;
  transform: translateY(0);
}

.product-link-trial__phrase.is-leaving {
  opacity: 0;
  transform: translateY(-100%);
}

.product-link-trial button {
  flex: none;
  cursor: pointer;
}

.product-link-trial button:hover {
  transform: none;
}

.product-link-trial .product-link-trial__submit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: var(--trial-button-height);
  min-height: var(--trial-button-height);
  height: var(--trial-button-height);
  padding: 0 calc((var(--trial-button-height) - 18px) / 2);
  color: var(--trial-field-bg);
  border: 0;
  background: linear-gradient(100deg, var(--brand-blue), var(--trial-ring-violet), var(--trial-ring-pink), var(--trial-ring-violet), var(--brand-blue));
  background-size: 300% 100%;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  filter: saturate(0.78) brightness(0.86);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--trial-ring-violet) 18%, transparent);
  animation: trialButtonFlow var(--trial-button-flow) linear infinite;
  transition: padding var(--trial-button-expand) cubic-bezier(0.2, 0.8, 0.2, 1), filter var(--dur-base) ease;
}

.product-link-trial__submit-icon {
  position: relative;
  z-index: 2;
  flex: none;
  width: 18px;
  height: 18px;
}

/* Shine sweep on hover only. */
.product-link-trial .product-link-trial__submit::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--trial-field-bg) 28%, transparent) 50%, transparent 70%);
  pointer-events: none;
}

.product-link-trial .product-link-trial__submit:hover::after {
  transform: translateX(120%);
  transition: transform 0.7s ease-in-out;
}

/* Icon-only at rest; hover/focus widens the button to reveal the label. */
.product-link-trial__submit-label {
  position: relative;
  z-index: 2;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--trial-button-expand) cubic-bezier(0.2, 0.8, 0.2, 1), margin var(--trial-button-expand) cubic-bezier(0.2, 0.8, 0.2, 1), opacity var(--dur-base) ease;
}

.product-link-trial .product-link-trial__submit:is(:hover, :focus-visible) {
  padding-inline: var(--space-4) var(--space-5);
}

.product-link-trial .product-link-trial__submit:is(:hover, :focus-visible) .product-link-trial__submit-label {
  max-width: 14em;
  margin-left: var(--space-2);
  opacity: 1;
}

.product-link-trial .product-link-trial__submit:is(:hover, :focus-visible) {
  filter: saturate(0.9) brightness(0.96);
}

.product-link-trial button:focus-visible {
  outline: var(--lf-focus-width) solid var(--lf-focus);
  outline-offset: 3px;
}

.product-link-trial__samples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--trial-meta-text);
  font-size: var(--text-xs);
}

.product-link-trial__samples > span {
  margin-right: var(--space-1);
}

.product-link-trial .product-link-trial__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Same footprint for every chip; each logo is sized to carry equal visual weight. */
  width: 104px;
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--trial-chip-border);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--trial-field-bg) 3%, transparent);
  color: var(--trial-chip-text);
  font: inherit;
  transition: border-color var(--dur-base) ease, color var(--dur-base) ease;
}

.product-link-trial__chip img {
  display: block;
  width: auto;
  height: 14px;
  opacity: 0.88;
  transition: opacity var(--dur-base) ease;
}

.product-link-trial__chip--shopee img {
  height: 18px;
}

.product-link-trial__chip--amazon img {
  height: 20px;
  margin-top: 3px; /* the wordmark's baseline sits low in its artwork */
}

.product-link-trial__chip:is(:hover, :focus-visible) img {
  opacity: 1;
}

.product-link-trial .product-link-trial__chip:is(:hover, :focus-visible) {
  border-color: var(--trial-ring-violet);
  color: var(--trial-field-bg);
}

.product-link-trial__error {
  margin: 0;
  color: var(--status-danger);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

@keyframes trialButtonFlow { to { background-position: -300% 0; } }
@keyframes trialRingSpin { to { --trial-ring-angle: 360deg; } }

@container (max-width: 360px) {
  .product-link-trial__ring::before,
  .product-link-trial__ring::after,
  .product-link-trial__row { border-radius: var(--radius-panel); }
  .product-link-trial .product-link-trial__submit .product-link-trial__submit-label {
    max-width: none;
    margin-left: var(--space-2);
    opacity: 1;
  }
  .product-link-trial__row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-link-trial__ring::before,
  .product-link-trial__ring::after,
  .product-link-trial .product-link-trial__submit,
  .product-link-trial .product-link-trial__submit::after { animation: none; transition: none; }
  .product-link-trial__submit-label { transition: none; }
  .product-link-trial__phrase { transition: none; }
}