@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Dancing+Script:wght@500;600;700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap");

:root {
  --torg-salmon-pink: #BF897F;
  --torg-soft-sandstone: #DAC2B2;
  --torg-pearl: #F7F2E0;
  --torg-olive-slate: #707B6D;
  --torg-dark-pewter: #3A3D3A;
  --torg-header-height: 92px;
}

body,
.font-albertSans {
  font-family: AlbertSans, "Segoe UI", sans-serif !important;
}

.font-minionPro,
h1,
h2,
h3,
h4 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
}

em {
  font-family: "Playfair Display", Georgia, serif;
}

.bg-core-brown,
[class~="bg-core-brown"] {
  background-color: var(--torg-dark-pewter) !important;
}

.bg-core-pale_pink,
[class~="bg-core-pale_pink"] {
  background-color: var(--torg-pearl) !important;
}

.bg-core-light_brown,
[class~="bg-core-light_brown"] {
  background-color: var(--torg-soft-sandstone) !important;
}

.text-core-brown,
[class~="text-core-brown"] {
  color: var(--torg-dark-pewter) !important;
}

.text-core-pale_pink,
[class~="text-core-pale_pink"] {
  color: var(--torg-pearl) !important;
}

.border-core-brown,
[class~="border-core-brown"] {
  border-color: var(--torg-dark-pewter) !important;
}

.border-core-pale_pink,
[class~="border-core-pale_pink"] {
  border-color: var(--torg-pearl) !important;
}

[class*="core-brown/60"] {
  border-color: rgba(52, 61, 58, 0.6) !important;
  color: rgba(52, 61, 58, 0.6) !important;
}

[class*="core-pale_pink/60"] {
  color: rgba(247, 242, 224, 0.6) !important;
  border-color: rgba(247, 242, 224, 0.6) !important;
}

[class*="core-light_brown/20"] {
  background-color: rgba(218, 194, 178, 0.2) !important;
}

.torganiks-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.06em;
  font-family: "MinionPro", "Cormorant Garamond", Georgia, serif;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--torg-dark-pewter);
  text-decoration: none;
}

.site-header .site-branding {
  top: 0 !important;
  align-items: center;
}

.site-header .site-branding .block {
  display: flex;
  align-items: center;
}

.torganiks-wordmark.mobile {
  font-size: 1.7rem;
  color: var(--torg-dark-pewter);
}

.torganiks-wordmark.footer {
  font-size: inherit;
  color: inherit;
}

.nav-floating.scrolled .torganiks-wordmark {
  color: var(--torg-dark-pewter);
}

/* Base site-header — transparent shell, pill handles all visuals */
.site-header {
  background: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: var(--torg-dark-pewter) !important;
}

.site-header.scrolled {
  background: none !important;
  border-bottom: none !important;
}

/* ─── PILL HEADER ────────────────────────────────────────────────────────────
   Blueprint: Seed.com floating nav pill — near-full-width, compact, clean.
   ────────────────────────────────────────────────────────────────────────── */

/* Collapse header's own padding so it acts only as a positioning shell */
.site-header {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Slide pill off-screen when scrolling down */
.site-header.header-hide {
  transform: translateY(-160%) !important;
}

/* ── THE PILL — toolbar row only (NOT overlay / mobile drawer siblings) ───── */
.site-header > .site-header-pill {
  /* Near-full-width: 10px margin each side */
  margin: 0 10px !important;
  width: auto !important;

  /* Compact pill height — 12px top/bottom inside */
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;

  /* Ivory frosted glass */
  background-color: rgba(247, 242, 224, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 999px !important;

  /* All-around layered shadow — elevated card feel */
  box-shadow:
    0 8px 30px rgba(58, 59, 58, 0.14),
    0 2px 6px  rgba(58, 59, 58, 0.08),
    inset 0 0 0 1px rgba(255, 252, 242, 0.60) !important;

  transition:
    background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow       0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Deeper ivory when scrolled */
.site-header.header-solid > .site-header-pill {
  background-color: rgba(247, 242, 224, 0.96) !important;
  box-shadow:
    0 4px 20px rgba(58, 59, 58, 0.10),
    0 1px 4px  rgba(58, 59, 58, 0.06),
    inset 0 0 0 1px rgba(247, 242, 224, 0.80) !important;
}

/* Full-screen layers must never inherit the header pill chrome */
.site-header .gl-menu-overlay,
.site-header .mobile-menu {
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Permanent mobile drawer motion contract (independent of Tailwind utility generation) */
.site-header .mobile-menu {
  transition-property: transform !important;
  transition-duration: 960ms !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  transition-delay: 0ms !important;
  will-change: transform;
}

.site-header .gl-menu-overlay {
  transition-property: opacity !important;
  transition-duration: 320ms !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  transition-delay: 0ms !important;
}

/* ── CONTENTS ──────────────────────────────────────────────────────────────── */

/*
 * Static landing (`public/landing.html`) uses Tailwind classes that are not
 * scanned when building `output.min.css` (only app/components). Without
 * `grid-cols-[auto_minmax(0,1fr)_auto]`, `.grid` defaults to one column and the
 * mobile bar stacks into a tall header. Mirror the shop row below lg only.
 */
@media (max-width: 1023.98px) {
  .site-header .site-header-mobile-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    column-gap: 0.5rem;
  }
}

/* Logo branding area */
.site-header .site-branding {
  max-width: 200px !important;
  flex-shrink: 0 !important;
}

/* Mobile header: centered wordmark between hamburger and actions (grid middle column) */
@media (max-width: 1023px) {
  .site-header .site-branding--mobile-nav {
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .site-header .site-branding--mobile-nav .torganiks-wordmark {
    font-size: 1.35rem !important;
    max-width: 100%;
    min-width: 0;
  }

  .site-header .site-branding--mobile-nav .brand-logo-o {
    width: 1.35rem !important;
    height: 1.35rem !important;
  }
}

/* Logo wordmark text — prominent, elegant */
.site-header .torganiks-wordmark {
  font-size: 1.5rem !important;
}

/* Logo O image — proportional to 1.5rem wordmark */
.site-header .brand-logo-o {
  width: 1.5rem !important;
  height: 1.5rem !important;
  filter: none !important;
}

/* Primary logo image — fixed at 140×70px (2:1 ratio) */
.torganiks-primary-logo {
  width: 140px !important;
  height: 70px !important;
  object-fit: contain;
  display: block;
}

.site-header .torganiks-primary-logo {
  width: 140px !important;
  height: 70px !important;
}

.site-header .site-branding--mobile-nav .torganiks-primary-logo {
  width: 140px !important;
  height: 70px !important;
}

/* Remove flex/font styling from the anchor when it wraps only the new logo */
.site-header a.torganiks-wordmark:has(.torganiks-primary-logo),
a.torganiks-wordmark.mobile:has(.torganiks-primary-logo) {
  font-size: 0 !important;
  gap: 0 !important;
}

/* Nav links — small, refined, understated */
.site-header #primary-menu {
  gap: 0 22px !important;
}

.site-header .main-navigation a,
.site-header [id="primary-menu"] li a {
  font-size: 0.75rem !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

/* Icons — search + cart proportional to 27px sign-in */
.site-header .header-icon {
  width: 36px !important;
  height: 36px !important;
}

.site-header .signin-icon {
  height: 27px !important;
  width: auto !important;
}

.site-header .header-icon-btn {
  padding: 2px !important;
}

/* Account nav gap */
.site-header #account-navigation .account-menu {
  gap: 10px !important;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Text colour everywhere */
.site-header .torganiks-wordmark,
.site-header .main-navigation a,
.site-header #account-navigation a,
.site-header .header-icon-link {
  color: var(--torg-dark-pewter) !important;
  text-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* Phase 1: Botanical icon buttons */
.header-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

/* Search + Cart icons: 2× original size (19 → 38px) */
.header-icon {
  display: block;
  width: 38px;
  height: 38px;
  transition: filter 0.4s ease, opacity 0.2s ease;
}

/* Sign-in drawn text: 2× taller, width auto from 1024×320 viewBox */
.signin-icon {
  width: auto;
  height: 26px;
}

.header-icon-btn:hover .header-icon {
  opacity: 0.55;
}

/* Make SVG paths inside icons render bolder */
.header-icon path {
  vector-effect: non-scaling-stroke;
}
img.header-icon {
  /* slight contrast boost so thin strokes punch harder */
  filter: contrast(1.15);
}

.site-header.header-solid .header-icon {
  filter: none;
}

.site-header .torganiks-wordmark,
.site-header .main-navigation a,
.site-header #account-navigation a,
.site-header .header-icon-link {
  color: var(--torg-dark-pewter) !important;
}

/* ─── NAV DROPDOWNS ──────────────────────────────────────────────────────────
   Frosted ivory pill card, two columns, T.Organiks vibe.
   ─────────────────────────────────────────────────────────────────────────── */

.torg-has-dropdown {
  position: relative;
}

/* Hidden by default — appears on hover */
.torg-dropdown {
  position: absolute;
  top: calc(100% + 28px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  min-width: 280px;
}

.torg-has-dropdown:hover .torg-dropdown,
.torg-has-dropdown:focus-within .torg-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* The frosted pill card */
.torg-dropdown-inner {
  display: flex;
  gap: 0;
  background: rgba(247, 242, 224, 0.92);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-radius: 20px;
  box-shadow:
    0 16px 48px rgba(58, 59, 58, 0.18),
    0 3px 10px rgba(58, 59, 58, 0.08),
    inset 0 0 0 1px rgba(255, 252, 242, 0.75);
  padding: 24px 28px;
  overflow: hidden;
}

/* Two columns */
.torg-dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Thin divider between columns */
.torg-dropdown-divider {
  width: 1px;
  background: rgba(58, 61, 58, 0.12);
  margin: 4px 20px;
  flex-shrink: 0;
}

/* Links */
.torg-dropdown-col a {
  font-family: "Jost", "Segoe UI", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--torg-dark-pewter) !important;
  text-decoration: none !important;
  padding: 9px 12px !important;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  display: block;
  line-height: 1 !important;
}

.torg-dropdown-col a:hover {
  background: rgba(191, 137, 127, 0.12);
  color: var(--torg-salmon-pink) !important;
}

/* Search button inside dropdown — matches anchor style exactly */
.torg-dropdown-col button,
.torg-dropdown-search-btn {
  font-family: "Jost", "Segoe UI", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase !important;
  color: var(--torg-dark-pewter) !important;
  text-decoration: none !important;
  padding: 9px 12px !important;
  border-radius: 8px;
  transition: background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  display: block;
  line-height: 1 !important;
  width: 100%;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  text-align: left;
}

.torg-dropdown-col button:hover,
.torg-dropdown-search-btn:hover {
  background: rgba(191, 137, 127, 0.12) !important;
  color: var(--torg-salmon-pink) !important;
}

/* Bridge gap so mouse can move from tab to dropdown */
.torg-dropdown::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  right: 0;
  height: 28px;
}

.site-main {
  padding-top: 0;
}

.gl-b-hero .full-image {
  height: 100svh;
  min-height: 520px;
}

.header-icon-link {
  color: inherit;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.header-icon-link:hover {
  opacity: 1;
}

.brand-prefix,
.brand-suffix {
  display: inline-block;
  font-family: inherit;
}

.brand-logo-o {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
  transform: translateY(0.06em);
  margin-right: 0.05em;
}

.site-footer .footer-links > div ul {
  align-items: flex-start;
}

.site-footer .main-footer-content {
  align-items: flex-start;
  justify-content: space-between;
}

.site-footer .footer-links {
  row-gap: 2rem;
}

.site-footer {
  padding-bottom: 0 !important;
}

.site-footer .footer-logo-ribbon {
  background: var(--torg-pearl);
  border-top: 1px solid rgba(58, 61, 58, 0.2);
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: 0;
  padding: 1.25rem 1rem 0.5rem;
}

.site-footer .footer-logo-ribbon .footer-logo {
  margin: 0 auto;
  max-width: 1400px;
}

.site-footer .footer-logo-ribbon svg {
  display: block;
}

.gots-certified-badge span {
  display: inline-block;
  border: 1px solid rgba(52, 61, 58, 0.4);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  letter-spacing: 0.16em;
  color: var(--torg-dark-pewter);
  background: rgba(218, 194, 178, 0.4);
  font-size: 12px;
}

.core-collection-section .core-tab {
  font-family: "Jost", "Segoe UI", sans-serif !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.core-collection-section .core-tab.active {
  border-bottom-color: rgba(52, 61, 58, 0.65);
  color: var(--torg-dark-pewter) !important;
}

.core-collection-section .core-product-card img {
  transition: transform 0.55s ease;
}

.core-collection-section .core-product-card:hover img {
  transform: scale(1.04);
}

.trust-certification-bar {
  background:
    linear-gradient(180deg, rgba(247, 231, 224, 0.92) 0%, rgba(239, 235, 230, 0.95) 100%) !important;
}

.trust-certification-bar p {
  color: #3a3d3a !important;
}

.trust-certification-bar > div > div > div {
  background: #dac2b2 !important;
  box-shadow: inset 0 0 0 1px rgba(58, 61, 58, 0.06);
}

.trust-certification-bar > div > div > div svg {
  color: #bf897f;
}

.core-collection-reference {
  background: #f7e7e0 !important;
  padding-top: 3.5rem;
}

.core-collection-reference h2 {
  color: #234738 !important;
  font-size: clamp(48px, 4.4vw, 64px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.4px !important;
}

.core-collection-reference .core-tab {
  font-family: "Jost", "Segoe UI", sans-serif !important;
  color: rgba(58, 61, 58, 0.8) !important;
  border-bottom: 1px solid transparent;
}

.core-collection-reference .core-tab.active {
  color: #234738 !important;
  border-bottom-color: #234738 !important;
}

.core-collection-reference .core-ref-card {
  background: transparent;
}

.core-collection-reference .core-ref-media {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  min-height: 300px;
  position: relative;
}

.core-collection-reference .core-ref-media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.core-collection-reference .core-ref-card:hover .core-ref-media img {
  transform: scale(1.03);
}

.core-collection-reference .core-ref-badge {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 8px;
  border-radius: 2px;
  font-family: "AlbertSans", sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #234738;
  background: rgba(247, 231, 224, 0.92);
}

.core-collection-reference .core-ref-heart {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 0;
  background: transparent;
  color: rgba(58, 61, 58, 0.65);
  padding: 4px;
}

.core-collection-reference .core-ref-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.core-collection-reference .core-ref-title {
  margin: 0;
  font-family: "MinionPro", "Cormorant Garamond", serif;
  font-size: 36px;
  line-height: 0.92;
  letter-spacing: -0.3px;
  color: #3a3d3a;
}

.core-collection-reference .core-ref-swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}

.core-collection-reference .core-ref-swatches span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(58, 61, 58, 0.25);
  display: inline-block;
}

.core-collection-reference .core-ref-price {
  margin-top: 8px;
  margin-bottom: 0;
  font-family: "AlbertSans", sans-serif;
  font-size: 28px;
  line-height: 1;
  color: #bf897f;
}

.core-collection-reference .core-ref-category {
  margin: 0 0 10px;
  font-family: "AlbertSans", sans-serif;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(58, 61, 58, 0.75);
}

/* Testimonial reflections: one shade lighter salmon backdrop */
.gl-carousel-wrapper.text-carousel {
  background-color: #E8C9B8 !important;
}

@media (max-width: 1279px) {
  .core-collection-reference .core-ref-title {
    font-size: 32px;
  }

  .core-collection-reference .core-ref-price {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .core-collection-reference .core-ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
  }

  .core-collection-reference .core-ref-media {
    min-height: 0;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
  }

  .core-collection-reference .core-ref-body {
    padding-top: 10px !important;
  }

  .core-collection-reference .core-ref-name-row {
    display: block;
  }

  .core-collection-reference .core-ref-title {
    font-size: 16px;
    line-height: 1.18;
    letter-spacing: -0.05px;
    color: #3a3d3a;
    margin: 0;
  }

  .core-collection-reference .core-ref-price {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.1;
  }

  .core-collection-reference .core-ref-swatches,
  .core-collection-reference .core-ref-heart {
    display: none !important;
  }

  .core-collection-reference .core-ref-badge {
    left: 10px;
    top: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.15em;
    background: #c9a09a;
    color: #f7f2e0;
  }
}

.gl-b-hero .heading-image .animated-svg svg text {
  font-weight: 600;
  text-shadow: 0 10px 28px rgba(24, 18, 14, 0.2);
}

.hero-shop-btn {
  margin-top: 1rem;
  border: 1px solid rgba(125, 138, 121, 0.78);
  background: linear-gradient(180deg, rgba(126, 140, 120, 0.95) 0%, rgba(108, 121, 103, 0.95) 100%);
  color: var(--torg-pearl);
  letter-spacing: 0.085em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 24px rgba(23, 30, 23, 0.24);
  transition: background-color 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease;
}

.gl-b-hero .hero-shop-btn {
  opacity: 0;
  visibility: visible;
  position: relative;
  z-index: 5;
  animation: heroShopFadeIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 1.1s forwards;
}

.hero-shop-btn:hover {
  background: linear-gradient(180deg, #7d8a78 0%, #6a7866 100%);
  border-color: #7d8a78;
  transform: translateY(-2px);
}

.gl-b-hero .left {
  max-width: min(730px, 88vw);
}

.gl-b-hero .heading-image {
  gap: 0.4rem;
}

.hero-atmosphere-overlay {
  background:
    radial-gradient(85% 130% at 10% 52%, rgba(20, 15, 11, 0.42) 0%, rgba(20, 15, 11, 0.18) 54%, rgba(20, 15, 11, 0) 100%),
    linear-gradient(90deg, rgba(16, 12, 9, 0.42) 0%, rgba(16, 12, 9, 0.2) 45%, rgba(16, 12, 9, 0) 100%);
  pointer-events: none;
}

@keyframes heroShopFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .site-footer .footer-logo-ribbon {
    margin-left: -2rem;
    margin-right: -2rem;
    padding: 1.4rem 2rem 0.65rem;
  }

  .site-footer .footer-links {
    margin-left: auto;
    padding-left: 2.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --torg-header-height: 84px;
  }

  .site-header {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .gl-b-hero .full-image {
    min-height: 460px;
  }

  /* Hero atmosphere overlay removed on mobile (was a dark gradient on the left) */
  .hero-atmosphere-overlay {
    display: none;
  }
}

/* ==========================================================================
   FOOTER ANIMATION — GPU-ACCELERATED COMPOSITOR OPTIMIZATIONS
   
   Audit notes:
   - The footer-logo SVG text/image elements animate from y:105% to y:0 using
     GSAP ScrollTrigger (gsap.from with transform: translateY).
   - GSAP already uses transform-based animations, which is correct.
   - These CSS optimizations promote animated elements to their own compositor
     layers so the GPU handles them without layout or paint steps.
   - will-change is applied ONLY to the footer-logo container (not globally)
     to avoid excessive memory usage from over-promoting layers.
   ========================================================================== */

/*
 * CRITICAL: Do NOT set transform on .footer-logo svg children.
 * GSAP animates them via transform: translateY(105%) -> translateY(0).
 * Any CSS transform on these elements would merge/conflict with GSAP's.
 * GSAP's force3D:true handles GPU layer promotion internally.
 *
 * will-change is safe — it's a hint, not an actual transform value.
 */
.footer-logo {
  contain: layout style paint;
}

/*
 * will-change: transform hints the browser to prepare a compositor layer
 * BEFORE GSAP starts animating. This prevents a jank frame on first paint.
 * After GSAP animation completes, will-change is removed via onComplete.
 */
.footer-logo svg text,
.footer-logo svg path,
.footer-logo svg image {
  will-change: transform;
}

/* 
 * CSS @keyframes fallback for footer SVG reveal.
 * If GSAP fails to load or is blocked, this CSS-only animation
 * provides a graceful degrade using transform + opacity only
 * (no layout-triggering properties).
 * The stagger is approximated via animation-delay on nth-child selectors.
 */
@keyframes footerSvgReveal {
  from {
    opacity: 0;
    transform: translateY(105%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply CSS fallback only when GSAP is unavailable */
.footer-logo[data-css-fallback] svg text,
.footer-logo[data-css-fallback] svg path,
.footer-logo[data-css-fallback] svg image {
  animation: footerSvgReveal 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.footer-logo[data-css-fallback] svg text:nth-child(1),
.footer-logo[data-css-fallback] svg path:nth-child(1),
.footer-logo[data-css-fallback] svg image:nth-child(1) { animation-delay: 0s; }
.footer-logo[data-css-fallback] svg text:nth-child(2),
.footer-logo[data-css-fallback] svg path:nth-child(2),
.footer-logo[data-css-fallback] svg image:nth-child(2) { animation-delay: 0.075s; }
.footer-logo[data-css-fallback] svg text:nth-child(3),
.footer-logo[data-css-fallback] svg path:nth-child(3),
.footer-logo[data-css-fallback] svg image:nth-child(3) { animation-delay: 0.15s; }
.footer-logo[data-css-fallback] svg text:nth-child(4),
.footer-logo[data-css-fallback] svg path:nth-child(4),
.footer-logo[data-css-fallback] svg image:nth-child(4) { animation-delay: 0.225s; }
.footer-logo[data-css-fallback] svg text:nth-child(5),
.footer-logo[data-css-fallback] svg path:nth-child(5),
.footer-logo[data-css-fallback] svg image:nth-child(5) { animation-delay: 0.3s; }
.footer-logo[data-css-fallback] svg text:nth-child(6),
.footer-logo[data-css-fallback] svg path:nth-child(6),
.footer-logo[data-css-fallback] svg image:nth-child(6) { animation-delay: 0.375s; }
.footer-logo[data-css-fallback] svg text:nth-child(7),
.footer-logo[data-css-fallback] svg path:nth-child(7),
.footer-logo[data-css-fallback] svg image:nth-child(7) { animation-delay: 0.45s; }
.footer-logo[data-css-fallback] svg text:nth-child(8),
.footer-logo[data-css-fallback] svg path:nth-child(8),
.footer-logo[data-css-fallback] svg image:nth-child(8) { animation-delay: 0.525s; }
.footer-logo[data-css-fallback] svg text:nth-child(9),
.footer-logo[data-css-fallback] svg path:nth-child(9),
.footer-logo[data-css-fallback] svg image:nth-child(9) { animation-delay: 0.6s; }
.footer-logo[data-css-fallback] svg text:nth-child(10),
.footer-logo[data-css-fallback] svg path:nth-child(10),
.footer-logo[data-css-fallback] svg image:nth-child(10) { animation-delay: 0.675s; }

/* 
 * Footer link hover transitions — compositor-friendly.
 * Uses only transform + opacity, never animates layout properties.
 */
.site-footer .footer-links a {
  transition: opacity 0.2s ease, transform 0.2s ease;
  will-change: opacity;

.site-footer .footer-text-container h2 {
  font-weight: 500 !important;
}
}

.site-footer .footer-links a:hover {
  opacity: 0.8;
  transform: translateX(2px);
}

/*
 * Footer content sections — contain isolates paint regions.
 * Do NOT use transform: translateZ(0) here — it creates stacking contexts
 * that interfere with the overflow:hidden clipping on .footer-logo.
 */
.site-footer .main-footer-content,
.site-footer .bottom {
  contain: layout style;
}

/* Hero line 2 ("Choose plant based apparel"): the text is a dark color, so add
   a light halo behind it to keep it legible over bright areas of the hero
   photo. The glow is stronger on mobile, where the bright lower part of the
   image otherwise washes the dark text out. */
.torg-hero-line2 span {
  text-shadow:
    0 1px 8px rgba(247, 231, 224, 0.55),
    0 0 2px rgba(247, 231, 224, 0.65);
}

@media (max-width: 768px) {
  .torg-hero-line2 span {
    text-shadow:
      0 1px 10px rgba(255, 255, 255, 0.92),
      0 1px 3px rgba(255, 255, 255, 0.75),
      0 0 6px rgba(255, 255, 255, 0.55);
  }
}

/* ── Desktop-only layout fixes (≥1024px, the site's `lg` breakpoint) ──────────
   The legacy /css/output.min.css utility layer loads after the app's Tailwind
   and redefines base utilities (.text-left, .hidden, .grid-cols-1, .order-*),
   so the pages' `lg:` desktop variants lose the cascade on desktop. These rules
   re-assert the intended desktop layout. Mobile (<1024px) is untouched. */
@media (min-width: 1024px) {
  /* Centered intro / philosophy / CTA sections */
  #philosophy,
  #our-plant-based,
  #slow-fashion-cta { text-align: center; }

  /* Desktop-only line breaks + the two-line philosophy block */
  #our-plant-based br,
  #slow-fashion-cta br { display: inline; }
  #philosophy .lg\:block { display: block; }
  #philosophy .lg\:hidden { display: none; }

  /* who-we-are — Our Founders: small photo column + text */
  #our-founders .who-founder-grid { grid-template-columns: 180px 1fr; }

  /* journal — Founders' Story: alternating photo / content columns */
  #founders .founders-card { grid-template-columns: 15rem 1fr; }
  #founders .founders-card--flip { grid-template-columns: 1fr 15rem; }
  #founders .founders-card--flip .founders-photo { order: 2; }
  #founders .founders-card--flip .founders-content { order: 1; }

  /* journal — Events/Awards carousels: multiple slides per view on desktop
     (mobile keeps its single ~80%-width slide). !important overrides the
     inline flex-basis. gap is 12px (events) / 10px (awards). */
  #achievements .events-strip > button { flex-basis: calc(50% - 6px) !important; }
  #mamta-awards .awards-strip > div { flex-basis: calc(33.333% - 7px) !important; }
}