/* Product collection only. Base HTML remains readable without enhancement. */
#yq-showcase #products {
  --stack-ink: #19161b;
  --stack-muted: #625b66;
  --stack-line: rgba(74,54,80,.16);
  --stack-solid: #f0edf2;
  --stack-accent: #805099;
  color: var(--stack-ink);
  background: #f3f1f4;
  max-width: none;
  padding: 0;
  margin: 0;
  scroll-margin-top: 60px;
}
#yq-showcase #products .products-stage {
  position: relative;
  overflow: hidden;
  padding: 68px 32px 36px;
  background: #f3f1f4;
}
#yq-showcase #products .product-gradient-field,
#yq-showcase #products .product-refraction-source {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#yq-showcase #products .product-gradient-field {
  background:
    radial-gradient(ellipse at 82% 9%,rgba(128,80,153,.13),transparent 42%),
    radial-gradient(ellipse at 12% 88%,rgba(128,80,153,.1),transparent 44%),
    linear-gradient(132deg,#f8f7f9 0%,#f3f1f4 42%,#e8e4ea 100%);
}
#yq-showcase #products .gradient-band {
  position: absolute;
  display: block;
  width: 154%;
  height: 54%;
  left: -27%;
  border-radius: 50%;
  transform: translateZ(0);
  will-change: transform;
  -webkit-mask-image: radial-gradient(ellipse at center,#000 0 42%,rgba(0,0,0,.86) 56%,transparent 76%);
  mask-image: radial-gradient(ellipse at center,#000 0 42%,rgba(0,0,0,.86) 56%,transparent 76%);
}
#yq-showcase #products .gradient-band-a {
  top: -13%;
  opacity: .48;
  transform: rotate(-8deg) translateZ(0);
  background:
    linear-gradient(112deg,transparent 13%,rgba(128,80,153,.04) 24%,rgba(128,80,153,.34) 39%,rgba(255,255,255,.72) 49%,rgba(168,128,187,.27) 58%,transparent 78%),
    radial-gradient(ellipse at 50% 54%,rgba(128,80,153,.24),transparent 70%);
}
#yq-showcase #products .gradient-band-b {
  bottom: -17%;
  opacity: .4;
  transform: rotate(7deg) translateZ(0);
  background:
    linear-gradient(72deg,transparent 14%,rgba(198,173,210,.12) 29%,rgba(128,80,153,.31) 43%,rgba(255,255,255,.64) 52%,rgba(128,80,153,.18) 63%,transparent 82%),
    radial-gradient(ellipse at 48% 46%,rgba(128,80,153,.2),transparent 72%);
}
#yq-showcase #products .product-refraction-source {
  opacity: .72;
  background:
    repeating-linear-gradient(117deg,transparent 0 178px,rgba(67,50,73,.075) 179px,transparent 180px 356px),
    linear-gradient(128deg,rgba(255,255,255,.62),transparent 45%,rgba(128,80,153,.09));
}
#yq-showcase #products .product-refraction-source span {
  position: absolute;
  left: -12%;
  width: 124%;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(74,54,80,.17),transparent);
  transform: rotate(-6deg);
}
#yq-showcase #products .product-refraction-source span:nth-child(1) { top: 24%; }
#yq-showcase #products .product-refraction-source span:nth-child(2) { top: 52%; transform: rotate(4deg); opacity: .62; }
#yq-showcase #products .product-refraction-source span:nth-child(3) { top: 78%; transform: rotate(-2deg); opacity: .38; }
#yq-showcase #products .products-heading {
  position: relative;
  z-index: 8;
  margin: 0 auto 30px;
  text-align: center;
}
#yq-showcase #products .kicker { color: #805099; font-size: 11px; letter-spacing: .15em; font-weight: 500; }
#yq-showcase #products .kicker span { color: #817a84; letter-spacing: .12em; margin-left: 6px; }
#yq-showcase #products .products-heading h2 { font-size: 24px; font-weight: 400; margin: 10px 0 0; line-height: 1.35; }
#yq-showcase #products .products-heading .sub { font-size: 14px; color: var(--stack-muted); margin-top: 10px; }
#yq-showcase #products .product-gallery {
  position: relative;
  z-index: 4;
  margin: 0 auto;
  max-width: 1120px;
  overflow: visible;
}
#yq-showcase #products .product-glass-lens,
#yq-showcase #products .product-glass-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 36px;
  corner-shape: squircle;
  pointer-events: none;
}
#yq-showcase #products .product-glass-lens { background: rgba(255,255,255,.18); }
#yq-showcase #products .product-glass-fallback {
  display: none;
  background: linear-gradient(125deg,rgba(255,255,255,.68),rgba(245,242,247,.46) 58%,rgba(232,226,235,.62));
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.92), inset -1px -1px 1px rgba(94,65,106,.08), 0 30px 70px rgba(58,43,63,.16);
}
#yq-showcase #products[data-glass-tier="full"] .product-glass-fallback {
  display: none;
}
#yq-showcase #products[data-glass-tier="full"] .product-glass-lens {
  border: 0;
  box-shadow: none !important;
}
#yq-showcase #products[data-glass-tier="lite"] .product-glass-fallback { display: block; }
#yq-showcase #products[data-glass-tier="static"] .product-glass-fallback {
  display: block;
  background: var(--stack-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#yq-showcase #products .prod-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#yq-showcase #products .prod-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px,.72fr) minmax(0,1.48fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 36px;
  corner-shape: squircle;
  background: rgba(255,255,255,.58);
  box-shadow: 0 28px 70px rgba(58,43,63,.17);
}
#yq-showcase #products .prod-card > * { position: relative; z-index: 1; }
#yq-showcase #products .prod-cover {
  grid-column: 2;
  grid-row: 1 / 6;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 12%,#000 31%,#000 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.34) 12%,#000 31%,#000 100%);
}
#yq-showcase #products .prod-cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(245,242,247,.86),transparent);
}
#yq-showcase #products .prod-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: right center;
  transform: none;
}
#yq-showcase #products .prod-card h3,
#yq-showcase #products .prod-description,
#yq-showcase #products .prod-actions {
  grid-column: 1;
  margin-left: 42px;
  margin-right: 18px;
}
#yq-showcase #products .prod-card h3 { grid-row: 2; font-size: 20px; line-height: 1.4; font-weight: 500; margin-top: 0; margin-bottom: 0; }
#yq-showcase #products .prod-description { grid-row: 3; font-size: 16px; color: var(--stack-muted); line-height: 1.8; margin-top: 16px; margin-bottom: 0; }
#yq-showcase #products .prod-actions { grid-row: 4; justify-content: flex-start; gap: 12px 22px; margin-top: 28px; }
#yq-showcase #products .prod-primary { background: #805099; color: #fff; }
#yq-showcase #products .prod-primary:hover { background: #9060aa; }
#yq-showcase #products .prod-secondary { color: #49404d; }
#yq-showcase #products .prod-secondary:hover { color: #171419; }
#yq-showcase #products[data-glass-tier="full"] .prod-card.is-current {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#yq-showcase #products .product-selectors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  position: relative;
  z-index: 10;
  margin: 30px auto 0;
}
#yq-showcase #products [hidden] { display: none !important; }
#yq-showcase #products .product-selectors button {
  position: relative;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  color: #a5a5ab;
  background: transparent;
  border-radius: 6px;
  font: 400 13px/1.4 var(--font);
  cursor: pointer;
  transition: color 180ms ease-out, background 180ms ease-out;
}
#yq-showcase #products .product-selectors button[aria-current="true"] { color: #2b2230; background: rgba(128,80,153,.09); }
#yq-showcase #products .product-selectors button[aria-current="true"]::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--stack-accent);
}
#yq-showcase #products .product-selectors button:hover { color: #2b2230; }
#yq-showcase #products button:active { transform: scale(.97); }
#yq-showcase #products :focus-visible { outline: 2px solid #cda8e1; outline-offset: 5px; }
#yq-showcase #products .product-stage-footer {
  max-width: 1120px;
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--stack-line);
  font-size: 12px;
  color: #adadb2;
  position: relative;
  z-index: 10;
}
#yq-showcase #products .product-progress { letter-spacing: .12em; color: #817a84; min-width: 60px; }
#yq-showcase #products #productCurrent { font-size: 20px; color: #211c24; font-weight: 200; }
#yq-showcase #products .product-skip { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; }
#yq-showcase #products .product-skip:hover { color: #211c24; }
#yq-showcase #productDetails { scroll-margin-top: 60px; }

/* Desktop: one shared glass stage with one real next-card edge. */
#yq-showcase #products[data-stack-mode="desktop"] { height: 400svh; }
#yq-showcase #products[data-stack-mode="desktop"] .products-stage {
  position: sticky;
  top: 60px;
  height: calc(100svh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 22px;
}
#yq-showcase #products[data-stack-mode="desktop"] .products-heading { margin-bottom: 25px; }
#yq-showcase #products[data-stack-mode="desktop"] .product-gallery { width: min(100%,1120px); height: min(48svh,450px); flex: none; }
#yq-showcase #products[data-stack-mode="desktop"] .prod-grid { display: block; height: 100%; }
#yq-showcase #products[data-stack-mode="desktop"] .prod-card {
  position: absolute;
  inset: -2px;
  border-radius: 32px;
  visibility: hidden;
  will-change: transform, opacity, clip-path;
}
#yq-showcase #products[data-stack-mode="desktop"] .prod-card.is-current,
#yq-showcase #products[data-stack-mode="desktop"] .prod-card.is-next { visibility: visible; }
#yq-showcase #products[data-stack-mode="desktop"] .prod-card[data-product-theme="platform"] .prod-cover {
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.8) 43%,#000 52%,#000 100%);
  mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 10%,rgba(0,0,0,.3) 22%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.8) 43%,#000 52%,#000 100%);
}
#yq-showcase #products[data-stack-mode="desktop"] .prod-card[data-product-theme="platform"] .prod-cover::after {
  width: 52%;
  background: linear-gradient(90deg,rgba(245,242,247,.98) 0%,rgba(245,242,247,.82) 24%,rgba(245,242,247,.42) 56%,rgba(245,242,247,.12) 80%,transparent 100%);
}
#yq-showcase #products[data-stack-mode="desktop"] .product-stage-footer { width: min(100%,1120px); margin-top: 8px; }

/* Touch/tablet/short viewports use a lightweight native horizontal list. */
#yq-showcase #products[data-stack-mode="mobile"] .product-gallery {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 0 22px;
}
#yq-showcase #products[data-stack-mode="mobile"] .product-glass-lens,
#yq-showcase #products[data-stack-mode="mobile"] .product-glass-fallback { display: none; }
#yq-showcase #products[data-stack-mode="mobile"] .prod-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: min(90%,560px);
  gap: 18px;
}
#yq-showcase #products[data-stack-mode="mobile"] .prod-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  scroll-snap-align: start;
  border-radius: 32px;
  background: linear-gradient(135deg,rgba(255,255,255,.86),rgba(239,234,242,.82)),rgba(247,245,248,.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#yq-showcase #products[data-stack-mode="mobile"] .prod-cover {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
  mask-image: linear-gradient(180deg,#000 0%,#000 72%,transparent 100%);
}
#yq-showcase #products[data-stack-mode="mobile"] .prod-cover::after {
  inset: auto 0 0;
  width: auto;
  height: 28%;
  background: linear-gradient(180deg,transparent,rgba(245,242,247,.96));
}
#yq-showcase #products[data-stack-mode="mobile"] .prod-card h3,
#yq-showcase #products[data-stack-mode="mobile"] .prod-description,
#yq-showcase #products[data-stack-mode="mobile"] .prod-actions {
  grid-column: 1;
  margin-left: 22px;
  margin-right: 22px;
}
#yq-showcase #products[data-stack-mode="mobile"] .prod-card h3 { grid-row: 2; margin-top: -8px; }
#yq-showcase #products[data-stack-mode="mobile"] .prod-description { grid-row: 3; margin-top: 12px; font-size: 14px; }
#yq-showcase #products[data-stack-mode="mobile"] .prod-actions { grid-row: 4; margin-top: 22px; margin-bottom: 22px; gap: 8px 14px; }
#yq-showcase #products[data-stack-mode="mobile"] .prod-primary,
#yq-showcase #products[data-stack-mode="mobile"] .prod-secondary { font-size: 13px; }
#yq-showcase #products[data-stack-mode="static"] .prod-card { min-height: 420px; }

@media (max-width: 1023px), (max-height: 759px), (pointer: coarse) {
  #yq-showcase #products .products-stage { padding: 52px 20px 28px; }
  #yq-showcase #products .product-selectors {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-top: 12px;
    gap: 0;
    scrollbar-width: none;
  }
  #yq-showcase #products .product-selectors::-webkit-scrollbar { display: none; }
  #yq-showcase #products .product-selectors button { padding-inline: 9px; font-size: 12px; }
  #yq-showcase #products .product-motion-hint { display: none; }
  #yq-showcase #products .products-heading .sub { max-width: 25em; }
}
@media (prefers-reduced-motion: reduce) {
  #yq-showcase #products *, #yq-showcase #products *::before, #yq-showcase #products *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  #yq-showcase #products .prod-card { background: var(--stack-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  #yq-showcase #products .product-glass-lens { display: none !important; }
  #yq-showcase #products .product-glass-fallback { background: var(--stack-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}