/* Shared product-page polish. All colors follow the active PixGB theme. */
.product-eyebrow,
.ai-kicker,
.community-kicker,
.drive-hero .eyebrow,
.restore-shell .restore-kicker,
.pricing-drive-only-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin: 0 0 .75rem;
  padding: .36rem .7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--accent);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.product-eyebrow::before,
.ai-kicker::before,
.community-kicker::before {
  content: "";
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 .22rem color-mix(in srgb, currentColor 14%, transparent);
}

.community-home:not(.community-home-reels) .community-home-head,
.ai-hero,
.restore-shell > #restore-photo,
.product-upload,
.meme-page,
.studio-page,
.pixgb-file-page,
.recent-page,
.lib-hero,
.pricing-page,
.drive-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 19%, var(--line));
  border-radius: clamp(16px, 2vw, 24px);
  background:
    radial-gradient(ellipse at 94% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 4%, var(--card)), var(--card) 58%);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--bg0) 38%, transparent), inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
}

.community-home:not(.community-home-reels) .community-home-head {
  padding: clamp(1.35rem, 3vw, 2.4rem);
  margin: 0 0 1.15rem;
}
.community-home .community-kicker { margin-bottom: .8rem; }
.community-home-head h1,
.ai-hero h1,
.product-upload h1,
.meme-page h1,
.studio-page h1,
.pixgb-file-page h1,
.recent-page h1,
.pricing-hero h1 {
  max-width: 18ch;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.community-home-head > .muted,
.product-upload > .muted:first-of-type,
.pixgb-file-page > .muted:first-of-type,
.recent-page > .muted:first-of-type,
.pricing-hero-copy {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
}
.community-home-actions { gap: .65rem; margin-top: 1rem; }

.community-home:not(.community-home-reels) .community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 .85rem;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}
.community-home:not(.community-home-reels) .community-tabs a {
  border-radius: 999px;
  padding: .48rem .78rem;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.community-home:not(.community-home-reels) .community-tabs a:hover { transform: translateY(-1px); }
.community-home:not(.community-home-reels) .community-tabs a.active {
  color: var(--btn-ink);
  background: var(--accent);
  font-weight: 750;
}
.community-home:not(.community-home-reels) .gallery-tag-search {
  display: grid;
  grid-template-columns: minmax(13rem, 1.2fr) minmax(11rem, 1fr) auto auto;
  align-items: center;
  gap: .55rem;
  width: min(100%, 900px);
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
}
.community-home:not(.community-home-reels) .gallery-tag-search input,
.community-home:not(.community-home-reels) .gallery-tag-search select { margin: 0; }

.ai-hero {
  padding: clamp(1.35rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
}
.ai-hero::after {
  content: "✦";
  position: absolute;
  right: clamp(1.25rem, 5vw, 4rem);
  top: 50%;
  color: color-mix(in srgb, var(--accent) 18%, transparent);
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}
.ai-hero > * { position: relative; z-index: 1; }
.ai-hero h1 { max-width: 18ch; font-size: clamp(2rem, 5vw, 3.6rem); }
#ai-generator { padding: clamp(1.1rem, 2.4vw, 1.8rem); }
#ai-generator .ai-form { max-width: 900px; }

.restore-shell { width: min(1120px, 100%); }
.restore-shell > #restore-photo { padding: clamp(1.1rem, 3vw, 2rem); }
.restore-shell > #restore-photo > h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); letter-spacing: -.045em; }
.restore-modes { gap: .85rem; }
.restore-mode {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.restore-mode:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 28px color-mix(in srgb, var(--bg0) 32%, transparent); }

.product-upload,
.meme-page,
.studio-page,
.pixgb-file-page,
.recent-page,
.lib-hero,
.pricing-page {
  padding: clamp(1rem, 2.5vw, 1.8rem);
}
.product-upload > h1,
.pixgb-file-page > h1,
.recent-page > h1,
.meme-page > h1,
.studio-page > h1 { margin: 0 0 .7rem; }
.product-upload .hero-drop-hint,
.pixgb-file-page .hero-drop-hint {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 18px;
  background: linear-gradient(125deg, color-mix(in srgb, var(--accent) 7%, var(--card)), color-mix(in srgb, var(--card) 95%, transparent));
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.product-upload .hero-drop-hint:hover,
.pixgb-file-page .hero-drop-hint:hover { border-color: var(--accent); box-shadow: 0 10px 28px color-mix(in srgb, var(--bg0) 28%, transparent); }
.meme-page .meme-layout,
.studio-page .studio-workspace { gap: 1rem; }
.meme-page .meme-controls,
.studio-page .studio-toolbar,
.pixgb-file-page form {
  border-color: var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 82%, var(--bg1));
}
.meme-page canvas,
.studio-page canvas { border-radius: 14px; }

.recent-page .gallery-grid-main { margin-top: 1.1rem; }
.recent-page > p[role="status"],
.recent-page > p.muted:has(+ p > .btn) {
  padding: 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.clips-lib { padding-top: .7rem; }
.clips-lib .clips-lib-header {
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 44%), var(--card);
}
.clips-lib .product-eyebrow { margin-bottom: .55rem; }
.clips-lib .clips-lib-heading h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); letter-spacing: -.04em; }

.drive-shell { padding: clamp(1rem, 2.5vw, 1.8rem); }
.drive-shell .drive-hero {
  align-items: center;
  padding: 0 0 1.25rem;
  border-bottom-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.drive-shell .drive-hero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.045em; }
.drive-shell .drive-hero .eyebrow { opacity: 1; }

.lib-hero { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
.lib-hero .lib-hero-top { align-items: center; }
.lib-hero .lib-hero-top h1 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.045em; }
.lib-hero .lib-meter { border-radius: 16px; }

.pricing-page { padding: clamp(1rem, 3vw, 2rem); }
.pricing-hero {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 20px;
  background: radial-gradient(ellipse at 90% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%), color-mix(in srgb, var(--card) 75%, transparent);
}
.pricing-hero h1 { margin-bottom: .5rem; }
.pricing-page .pricing-plans { gap: 1rem; }
.pricing-page .pricing-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bg0) 24%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pricing-page .pricing-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: 0 18px 38px color-mix(in srgb, var(--bg0) 32%, transparent); }
.pricing-page .pricing-card--popular { border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); }

/* Upload is the main entry point: keep the form dominant and its guidance close by. */
.upload-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: min(1260px, 100%);
  margin: .25rem auto 1.25rem;
}
.upload-page-layout .product-upload { min-width: 0; margin: 0; }
.upload-guide {
  position: sticky;
  top: 6.25rem;
  padding: clamp(1rem, 1.7vw, 1.35rem);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--card) 94%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--bg0) 28%, transparent);
}
.upload-guide h2 {
  margin: 0 0 .55rem;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  letter-spacing: -.035em;
  line-height: 1.15;
}
.upload-guide-intro,
.upload-guide p:not(.product-eyebrow) { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.upload-guide-intro { margin: 0 0 1rem; }
.upload-guide-feature,
.upload-guide-group,
.upload-guide-tools { padding-top: .9rem; border-top: 1px solid var(--line); }
.upload-guide-feature {
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.upload-guide-feature h3,
.upload-guide-group h3,
.upload-guide-tools h3 { margin: 0 0 .35rem; font-size: .92rem; }
.upload-guide-feature p,
.upload-guide-group p { margin: 0 0 .45rem; }
.upload-guide-feature > a { display: inline-block; margin: .2rem .55rem .1rem 0; font-size: .85rem; font-weight: 650; }
.upload-guide-group { margin-top: .8rem; }
.upload-guide-tools { margin-top: .85rem; }
.upload-guide-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.upload-guide-links .btn { padding: .42rem .62rem; font-size: .78rem; }

@media (max-width: 700px) {
  .community-home:not(.community-home-reels) .community-home-head { padding: 1.1rem; }
  .community-home:not(.community-home-reels) .community-tabs { width: 100%; border-radius: 15px; }
  .community-home:not(.community-home-reels) .community-tabs a { flex: 1 1 auto; text-align: center; }
  .community-home:not(.community-home-reels) .gallery-tag-search { width: 100%; border-radius: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .community-home:not(.community-home-reels) .gallery-tag-search input { min-width: 0; }
  .ai-hero::after { right: .6rem; top: 1rem; transform: none; font-size: 4.25rem; }
  .restore-modes { grid-template-columns: 1fr; }
  .product-upload,
  .meme-page,
  .studio-page,
  .pixgb-file-page,
  .recent-page,
  .lib-hero,
  .pricing-page,
  .drive-shell { border-radius: 16px; }
  .clips-lib .clips-lib-header { align-items: stretch; }
  .upload-page-layout { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .upload-guide { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .restore-mode,
  .community-home .community-tabs a,
  .product-upload .hero-drop-hint,
  .pixgb-file-page .hero-drop-hint,
  .pricing-page .pricing-card { transition: none; }
}