/* t3831 — Home / Products top-right heroes (home-new-v1, products-new-v2)
   Sized at ~80% of the earlier t3781 520px stage (max 555×416, 4:3, contain).
   t3838: real transparent cutout (object + glow + soft shadow only); no studio rectangle.
   t3850: glass tiles float; marble / plants / logo stay still. No typography changes.
   t3832 — also carries a high-specificity Products CTA override (see fix-t3618.css). */

html:root body#ag-unified-site {
  --ag-new-hero-max-w: 555px;
  --ag-new-hero-max-h: 416px;
}

html:root body#ag-unified-site #main#main .ag-new-hero-slot,
html:root body#ag-unified-site #main#main .hm-art2.hx3d.ag-new-hero-slot,
html:root body#ag-unified-site #main#main .prod-hero .prod-hero-art.ag-new-hero-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
}

html:root body#ag-unified-site #main#main .ag-new-hero {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: var(--ag-new-hero-max-w);
}

html:root body#ag-unified-site #main#main .ag-new-hero-stage {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: var(--ag-new-hero-max-w);
}
html:root body#ag-unified-site #main#main .ag-new-hero-stage .ag-new-hero {
  width: 100%;
  max-width: none;
}
html:root body#ag-unified-site #main#main .hm-art2.hx3d.ag-new-hero-slot .ag-new-hero img,
html:root body#ag-unified-site #main#main .prod-hero-art.ag-new-hero-slot .ag-new-hero img,
html:root body#ag-unified-site #main#main .ag-new-hero img {
  display: block !important;
  width: 100% !important;
  max-width: var(--ag-new-hero-max-w) !important;
  height: auto !important;
  max-height: var(--ag-new-hero-max-h) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border-radius: 0;
  animation: none;
}
html:root body#ag-unified-site #main#main .ag-new-hero-stage .ag-new-hero img {
  max-width: 100% !important;
}
html:root body#ag-unified-site #main#main .ag-float-tile {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  margin: 0;
  pointer-events: none;
  z-index: 2;
  display: block;
}
html:root body#ag-unified-site #main#main .ag-new-hero-stage .ag-float-tile img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: var(--ag-new-hero-max-h) !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border-radius: 0;
  /* !important beats fix-t3618.css's global animation:none */
  animation: agTileFloat 5.2s ease-in-out infinite !important;
  --ag-tile-amp: -6px;
}
html:root body#ag-unified-site #main#main .ag-float-phone img { animation-duration: 5.4s !important; animation-delay: 0s !important; --ag-tile-amp: -6px; }
html:root body#ag-unified-site #main#main .ag-float-reply img { animation-duration: 4.8s !important; animation-delay: -1.2s !important; --ag-tile-amp: -5px; }
html:root body#ag-unified-site #main#main .ag-float-cal img { animation-duration: 5.8s !important; animation-delay: -2.1s !important; --ag-tile-amp: -6px; }
html:root body#ag-unified-site #main#main .ag-float-chat img { animation-duration: 5.2s !important; animation-delay: 0s !important; --ag-tile-amp: -6px; }
html:root body#ag-unified-site #main#main .ag-float-clip img { animation-duration: 5.7s !important; animation-delay: -0.9s !important; --ag-tile-amp: -5px; }
html:root body#ag-unified-site #main#main .ag-float-star img { animation-duration: 4.9s !important; animation-delay: -1.8s !important; --ag-tile-amp: -6px; }
html:root body#ag-unified-site #main#main .ag-float-doc img { animation-duration: 5.5s !important; animation-delay: -2.6s !important; --ag-tile-amp: -5px; }
@keyframes agTileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(var(--ag-tile-amp, -5px)); }
}

@media (prefers-reduced-motion: reduce) {
  html:root body#ag-unified-site #main#main .ag-new-hero img,
  html:root body#ag-unified-site #main#main .ag-float-tile img {
    animation: none !important;
    transform: none !important;
  }
}

@keyframes agNewHeroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Do not clip the 4:3 studio art inside the old 300px products grid. */
html:root body#ag-unified-site #main#main .prod-hero-grid:has(.ag-new-hero) {
  max-height: none !important;
  overflow: visible !important;
  align-items: center;
}

@media (max-width: 900px) {
  html:root body#ag-unified-site {
    --ag-new-hero-max-w: 342px;
    --ag-new-hero-max-h: 256px;
  }
  html:root body#ag-unified-site #main#main .ag-new-hero-slot {
    margin-top: 8px;
  }
}

/* t3832 — beat products-p2 --z / padding-block:0 and the page inline 36px rule.
   Keep gradient / glass / radius from existing .btn styles; only restore tap size. */
html:root body#ag-unified-site #main#main .prod-hero .hl .hb {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
html:root body#ag-unified-site #main#main .prod-hero .hl .hb .btn {
  height: auto !important;
  min-height: 52px !important;
  padding: 14px 22px !important;
  box-sizing: border-box !important;
  line-height: 1.25 !important;
  font-size: max(14px, calc(16px * var(--font-scale, 0.90))) !important;
  flex-shrink: 0 !important;
  white-space: normal !important;
}
@media (max-width: 700px) {
  html:root body#ag-unified-site #main#main .prod-hero .hl .hb {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }
  html:root body#ag-unified-site #main#main .prod-hero .hl .hb .btn {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-height: 52px !important;
    padding: 15px 22px !important;
  }
}

/* t3873: larger heroes. Desktop ~15% (555x416 -> 640x480, still contained in the column); phone full content width. */
html:root body#ag-unified-site { --ag-new-hero-max-w: 640px; --ag-new-hero-max-h: 480px; }
@media (max-width: 900px) {
  html:root body#ag-unified-site { --ag-new-hero-max-w: 100%; --ag-new-hero-max-h: none; }
}