/*
 * TheGrowns — Approved Homepage 2026 / Phase 1
 * Scoped to .tg-homepage. Not enqueued until the homepage markup is approved.
 * Design reference: approved 2026-10-21 screenshot.
 */
.tg-homepage {
  --tg-ink: #17131d;
  --tg-muted: #716e7b;
  --tg-pearl: #faf9fd;
  --tg-purple: #7a31cf;
  --tg-blue: #4268f5;
  --tg-ease: cubic-bezier(.22,1,.36,1);
  color: var(--tg-ink);
}
.tg-homepage *, .tg-homepage *::before, .tg-homepage *::after { box-sizing: border-box; }
.tg-homepage .tg-container { width: min(100% - 48px, 1240px); margin-inline: auto; }
.tg-homepage .tg-eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .28em; text-transform: uppercase; }
.tg-homepage .tg-gradient-text { background: linear-gradient(105deg,#9c39d9 5%,#4268f5 95%); color: transparent; -webkit-background-clip: text; background-clip: text; }
.tg-homepage .tg-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.tg-homepage .tg-category {
  --tg-category: #833bd8;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: 188px; overflow: hidden; padding: 23px;
  border: 1px solid rgba(31,25,42,.055); border-radius: 14px;
  background: #fff; color: var(--tg-ink); text-decoration: none;
  box-shadow: 0 9px 26px rgba(26,19,41,.055);
  transition: transform .55s var(--tg-ease), box-shadow .55s var(--tg-ease), border-color .4s;
}
.tg-homepage .tg-category::before {
  content: ""; position: absolute; z-index: -1; width: 75%; aspect-ratio: 1;
  top: -48%; right: -29%; border-radius: 50%;
  background: radial-gradient(circle at 30% 50%, transparent 29%, color-mix(in srgb,var(--tg-category) 19%,transparent) 45%, transparent 66%);
  filter: blur(3px); transform: rotate(-25deg) scale(1.1);
  transition: transform .8s var(--tg-ease);
}
.tg-homepage .tg-category::after {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background: radial-gradient(ellipse at 105% 0%, color-mix(in srgb,var(--tg-category) 11%,white), transparent 58%);
}
.tg-homepage .tg-category:hover { transform: translateY(-5px); border-color: color-mix(in srgb,var(--tg-category) 22%,white); box-shadow: 0 20px 40px rgba(26,19,41,.105); }
.tg-homepage .tg-category:hover::before { transform: rotate(6deg) scale(1.17); }
.tg-homepage .tg-category:focus-visible { outline: 3px solid var(--tg-purple); outline-offset: 4px; }
.tg-homepage .tg-category__accent { display: block; width: 29px; height: 4px; border-radius: 4px; background: var(--tg-category); margin-bottom: 22px; }
.tg-homepage .tg-category__title { font-size: clamp(16px,1.4vw,19px); font-weight: 570; line-height: 1.17; letter-spacing: -.035em; margin: 0 30px 10px 0; }
.tg-homepage .tg-category__description { font-size: 12px; line-height: 1.55; color: var(--tg-muted); margin: 0 18px 0 0; max-width: 185px; }
.tg-homepage .tg-category__arrow { position: absolute; bottom: 15px; right: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #e6e2eb; background: rgba(255,255,255,.85); color: var(--tg-purple); transition: transform .45s var(--tg-ease),background .45s; }
.tg-homepage .tg-category:hover .tg-category__arrow { transform: translateX(4px); background: #fff; }
.tg-homepage .tg-category--weight { --tg-category:#d62f37; }
.tg-homepage .tg-category--recovery { --tg-category:#2ca35d; }
.tg-homepage .tg-category--performance { --tg-category:#3466e7; }
.tg-homepage .tg-category--skin { --tg-category:#8848d9; }
.tg-homepage .tg-category--women { --tg-category:#e36b98; }
.tg-homepage .tg-category--hormone { --tg-category:#e1a20c; }
.tg-homepage .tg-category--aging { --tg-category:#916342; }
.tg-homepage .tg-category--cognitive { --tg-category:#25acc7; }
.tg-homepage .tg-category--accessories { --tg-category:#33343b; }
.tg-homepage .tg-category--water { --tg-category:#ec812c; }
.tg-homepage .tg-monogram-field { position: relative; isolation: isolate; }
.tg-homepage .tg-monogram-field::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.035; background-image:var(--tg-monogram-url,none); background-repeat:repeat; background-size:170px auto; pointer-events:none; }
@media (max-width: 980px) { .tg-homepage .tg-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 520px) { .tg-homepage .tg-container { width:min(100% - 28px,1240px); } .tg-homepage .tg-category-grid { gap:10px; } .tg-homepage .tg-category { min-height:185px; padding:16px; } .tg-homepage .tg-category__accent { margin-bottom:18px; } .tg-homepage .tg-category__title { font-size:16px; } .tg-homepage .tg-category__description { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { .tg-homepage .tg-category, .tg-homepage .tg-category::before, .tg-homepage .tg-category__arrow { transition:none; } .tg-homepage .tg-category:hover { transform:none; } }