@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   PLEACH INDIA FOUNDATION - OFFICIAL LIGHT THEME
   Palette: Deep Teal (#005656), Warm Gold (#c28e14 / #f2b631), Pure White (#ffffff)
   Typography: Cinzel (Headings) + Plus Jakarta Sans / Poppins (Body)
   ========================================================================== */

:root {
  --color-void: #ffffff;
  --color-panel: #f8fafc;
  --color-panel-2: #ffffff;
  --color-ink: #111827;
  --color-ash: #475569;
  --color-terra: #005656;
  --color-saffron: #c28e14;
  --color-gold: #f2b631;
  --font-display: "Cinzel", "Lora", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --tw-gradient-from: #ffffff;
  --tw-ring-offset-color: #ffffff;
}

/* scroll-behavior: auto; */

#root {
  background-color: #ffffff !important;
  color: #111827 !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scoped inside #root only */

/* Typography */
h1, h2, h3, h4, .font-display {
  font-family: "Cinzel", Georgia, serif !important;
  letter-spacing: -0.01em;
}

p, span, a, button, input, label {
  font-family: "Plus Jakarta Sans", "Poppins", sans-serif;
}

/* Backgrounds & Text Utilities */
.bg-void {
  background-color: #ffffff !important;
}

.bg-panel {
  background-color: #f8fafc !important;
}

.bg-panel-2 {
  background-color: #ffffff !important;
}

.text-ink {
  color: #111827 !important;
}

.text-ash {
  color: #475569 !important;
}

.text-terra {
  color: #005656 !important;
}

.bg-terra {
  background-color: #005656 !important;
}

.text-saffron {
  color: #c28e14 !important;
}

.bg-saffron {
  background-color: #c28e14 !important;
}

/* Light Borders & Dividers */
.border-white\/10,
.border-white\/12,
.border-white\/15,
.border-white\/20,
.border-white\/25,
.border-white\/5 {
  border-color: #e2e8f0 !important;
}

.bg-white\/5,
.bg-white\/10,
.bg-white\/15 {
  background-color: #f1f5f9 !important;
}

/* ==========================================================================
   SIMPLE HERO BANNER - CLEAR IMAGE & VIBRANT TITLE (NO CLOUDS, NO BOXES)
   ========================================================================== */
#top {
  position: relative;
  min-height: 85vh !important;
  background-color: #0f172a !important;
}

/* Hero image: completely clear, vibrant, sharp */
#top img {
  opacity: 1 !important;
  filter: brightness(96%) contrast(102%) !important;
  object-fit: cover !important;
  display: block !important;
}

/* Contrast gradient: subtle, natural dark vignette strictly for text readability */
#top .bg-gradient-to-t {
  display: block !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.15) 100%
  ) !important;
}

/* Remove all milky white clouds, side gradients and grain */
#top .bg-gradient-to-r,
#top .grain {
  display: none !important;
}

/* Scrolling Marquee Band below hero: Solid Deep Teal */
#top > div:last-child {
  background-color: #005656 !important;
  border-color: #004848 !important;
}

div.marquee-track {
  background-color: transparent !important;
}

div.marquee-track span {
  color: #ffffff !important;
}

div.marquee-track span span.text-\[\#f2b631\] {
  color: #f2b631 !important;
}

/* ==========================================================================
   THE INDEX SECTION
   ========================================================================== */
#index {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

#index button:hover {
  background-color: #f8fafc;
}

#index .sticky > div {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 24px -4px rgba(0, 86, 86, 0.08);
}

#index .sticky .absolute.inset-0.bg-gradient-to-t {
  display: none !important;
}

#index .sticky p.font-display {
  color: #111827 !important;
  font-weight: 700;
}

#index .sticky p.text-ink\/70 {
  color: #475569 !important;
}

/* Category pills in Index Preview Card */
#index .sticky span.rounded-full {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #005656 !important;
  font-weight: 600;
}

/* ==========================================================================
   COLLECTIONS RAIL - CENTER PLACED & SCROLLING OF ARROWS
   ========================================================================== */
#collections {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

/* Center the scrolling rail container cleanly */
#collections > div:last-child {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Prominent, clean circular scrolling arrows */
#collections button[aria-label*="collections"] {
  width: 44px !important;
  height: 44px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #005656 !important;
  box-shadow: 0 2px 8px rgba(0, 86, 86, 0.1);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#collections button[aria-label*="collections"]:hover {
  background-color: #005656 !important;
  color: #ffffff !important;
  border-color: #005656 !important;
  transform: scale(1.05);
}

/* Clean, proportional cards - NOT full page! */
#collections article {
  width: 320px !important;
  cursor: pointer !important;
}

@media (min-width: 640px) {
  #collections article {
    width: 350px !important;
  }
}

#collections article > div {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  overflow: hidden;
  box-shadow: 0 4px 16px -2px rgba(0, 86, 86, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#collections article:hover > div {
  transform: translateY(-5px);
  border-color: #005656 !important;
  box-shadow: 0 16px 32px -4px rgba(0, 86, 86, 0.14), 0 4px 8px rgba(0, 0, 0, 0.04);
}

/* Card image: Fit completely within container, showing the FULL image */
#collections article img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Remove all gradient overlays covering content images */
#collections article .absolute.inset-0.bg-gradient-to-t {
  display: none !important;
}

#index .sticky .absolute.inset-0.bg-gradient-to-t {
  display: none !important;
}

#index img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* Category badge on card */
#collections article span.absolute.left-4.top-4 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 86, 86, 0.2) !important;
  color: #005656 !important;
  font-weight: 700;
  backdrop-blur: 4px;
}

/* Card content body */
#collections article div.absolute.inset-x-0.bottom-0 {
  position: relative !important;
  padding: 1.25rem !important;
  background-color: #ffffff !important;
}

#collections article div.absolute.inset-x-0.bottom-0 p.text-saffron {
  color: #c28e14 !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
}

#collections article div.absolute.inset-x-0.bottom-0 h3 {
  font-family: "Cinzel", Georgia, serif !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  margin-top: 0.35rem !important;
}

#collections article div.absolute.inset-x-0.bottom-0 p.line-clamp-2 {
  color: #475569 !important;
  font-size: 0.825rem !important;
  margin-top: 0.5rem !important;
  line-height: 1.5;
}

/* Card action arrow button */
#collections article span.absolute.right-4.top-4 {
  background-color: #005656 !important;
  color: #ffffff !important;
}

/* Progress bar under collections */
#collections .bg-white\/10 {
  background-color: #e2e8f0 !important;
}
#collections .bg-terra {
  background-color: #005656 !important;
}

/* ==========================================================================
   FROM THE FIELD SECTION
   ========================================================================== */
section:has(p:contains("From the field")),
section:has(h2:contains("still stands")) {
  background-color: #ffffff !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* ==========================================================================
   OUR PURPOSE & STATS SECTION
   ========================================================================== */
section:has(p:contains("Pleach India Foundation")) {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Stat boxes in clean white */
section .grid.grid-cols-2.gap-px.bg-white\/10 > div {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

section .grid.grid-cols-2.gap-px.bg-white\/10 p.font-display {
  color: #005656 !important;
  font-weight: 700;
}

section a.bg-terra {
  background-color: #005656 !important;
  color: #ffffff !important;
}
section a.bg-terra:hover {
  background-color: #004242 !important;
}

/* ==========================================================================
   COLLECTION DETAIL & BLOG ARTICLE VIEW
   ========================================================================== */
article[role="button"] {
  cursor: pointer !important;
}

article[role="button"]:hover {
  transform: translateY(-5px) !important;
}

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

article nav button:hover {
  color: #005656 !important;
}

/* ==========================================================================
   COLLECTION DETAIL PAGE - FULL FIDELITY EDITORIAL VIEW WITH PROPER PADDINGS
   ========================================================================== */
.detail-page-wrapper {
  min-height: 100vh;
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-family: var(--font-sans) !important;
  padding-bottom: 6rem;
}

/* Sticky Top Navigation Bar */
.detail-top-nav {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  padding: 0.875rem 1.5rem !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.detail-nav-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-back-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.625rem 1.5rem !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #005656 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 86, 86, 0.08);
  transition: all 0.2s ease;
}

.detail-back-button:hover {
  background-color: #005656 !important;
  color: #ffffff !important;
  border-color: #005656 !important;
  transform: translateX(-3px);
  box-shadow: 0 4px 12px rgba(0, 86, 86, 0.2);
}

.detail-main-article {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem 1.5rem;
}

@media (min-width: 768px) {
  .detail-main-article {
    padding: 3.5rem 2.5rem 6rem 2.5rem;
  }
}

/* Breadcrumbs */
.detail-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.detail-breadcrumbs button {
  background: none;
  border: none;
  padding: 0;
  color: #64748b;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.2s;
}

.detail-breadcrumbs button:hover {
  color: #005656;
}

/* Title Section */
.detail-title-section {
  border-bottom: 1.5px solid #e2e8f0;
  padding-bottom: 2.25rem;
  margin-bottom: 2.5rem;
}

.detail-type-badge {
  display: inline-block;
  background-color: #005656 !important;
  color: #ffffff !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 0.375rem !important;
  margin-right: 0.875rem;
}

.detail-meta-text {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  color: #c28e14 !important;
}

.detail-title {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.detail-lead-description {
  font-size: 1.15rem !important;
  color: #475569 !important;
  line-height: 1.7 !important;
  max-width: 840px;
}

/* Hero Image Container: FULLY VISIBLE, OBJECT-CONTAIN */
.detail-hero-frame {
  position: relative !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 3rem !important;
  box-shadow: none !important;
  text-align: center !important;
}

.detail-hero-frame img {
  max-height: 520px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 1rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.detail-hero-caption {
  margin-top: 1.25rem;
  padding-top: 0.875rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
}

/* Two-Column Layout */
.detail-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .detail-content-grid {
    grid-template-columns: 1.8fr 1fr;
    gap: 4rem;
  }
}

/* Editorial Column */
.detail-editorial-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.detail-lead-quote {
  border-left: 4.5px solid #005656;
  padding-left: 1.5rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.detail-lead-quote p {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.6;
  font-style: italic;
}

.detail-editorial-section h2 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 0.875rem !important;
}

.detail-editorial-section p {
  font-size: 1rem;
  color: #334155;
  line-height: 1.8;
}

/* Highlights Box */
.detail-highlights-box {
  background-color: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem;
}

.detail-highlights-box h3 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem;
}

.detail-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
}

.detail-highlights-list li span.check {
  color: #005656;
  font-weight: 800;
  margin-top: 0.15rem;
}

/* Curatorial Quote Box */
.detail-quote-box {
  background-color: rgba(0, 86, 86, 0.04);
  border-left: 4.5px solid #005656;
  border-radius: 0 1.25rem 1.25rem 0;
  padding: 2rem;
}

.detail-quote-box p {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #0f172a;
  line-height: 1.65;
}

.detail-quote-box cite {
  display: block;
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #c28e14;
  font-style: normal;
}

/* Gallery Section */
.detail-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.detail-gallery-figure {
  background-color: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.detail-gallery-img-container {
  height: 220px !important;
  background-color: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
  border: none !important;
}

.detail-gallery-img-container img {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.detail-gallery-figure figcaption {
  padding: 1rem 1.15rem;
  font-size: 0.775rem;
  color: #475569;
  line-height: 1.5;
}

/* Sidebar Column */
.detail-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-record-card {
  background-color: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem;
}

.detail-record-card h3 {
  font-family: "Cinzel", Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #0f172a !important;
  border-bottom: 1.5px solid #e2e8f0;
  padding-bottom: 0.875rem;
  margin-bottom: 1.25rem;
}

.detail-record-dl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.detail-record-dl dt {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #64748b;
}

.detail-record-dl dd {
  font-size: 0.925rem;
  font-weight: 600;
  color: #0f172a;
  margin-top: 0.2rem;
  margin-left: 0;
}

/* ==========================================================================
   UNIFORM COLLECTION CARDS - EXACT SAME SIZE & FULLY VISIBLE IMAGES
   ========================================================================== */
#collections article {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#collections article > div {
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 1.25rem !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px -2px rgba(0, 86, 86, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

#collections article:hover > div {
  transform: translateY(-6px) !important;
  border-color: #005656 !important;
  box-shadow: 0 16px 32px -4px rgba(0, 86, 86, 0.16), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Card Image Box: Exact uniform height across all cards */
#collections article div.card-img-box {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

/* Card Image: 100% Fully visible, never cropped! */
#collections article div.card-img-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.4s ease-out !important;
}

#collections article:hover div.card-img-box img {
  transform: scale(1.06) !important;
}

/* Card Content Box: Identical heights and vertical layout */
#collections article div.card-content-box {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding-top: 1rem !important;
  padding-bottom: 0.25rem !important;
}

#collections article p.card-meta-tag {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #c28e14 !important;
  margin-bottom: 0.35rem !important;
}

#collections article h3.card-title-text {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  height: 2.8rem !important;
  max-height: 2.8rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin: 0 !important;
}

#collections article:hover h3.card-title-text {
  color: #005656 !important;
}

#collections article p.card-desc-text {
  font-size: 0.8rem !important;
  color: #475569 !important;
  line-height: 1.45 !important;
  height: 2.4rem !important;
  max-height: 2.4rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   CLEAN BORDERLESS IMAGE FRAMES & PROPER DETAILED PAGE LAYOUT
   ========================================================================== */

/* Remove artificial container box borders and backgrounds around images */
.detail-hero-frame {
  position: relative !important;
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin-bottom: 3.5rem !important;
  box-shadow: none !important;
  text-align: center !important;
}

.detail-hero-frame img {
  max-height: 520px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 1rem !important;
  border: none !important;
  background: transparent !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
}

/* Card images: pure and clean, no artificial inner box border or gray box */
#collections article div.card-img-box {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#collections article div.card-img-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border: none !important;
  background: transparent !important;
  transition: transform 0.4s ease-out !important;
}

/* Gallery image containers: clean, no inner box */
.detail-gallery-figure {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.detail-gallery-img-container {
  height: 220px !important;
  background-color: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem !important;
}

.detail-gallery-img-container img {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
}

/* Two-column layout on detail page */
.detail-content-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

@media (min-width: 1024px) {
  .detail-content-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 3.5rem !important;
  }
}

.detail-editorial-col {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2.5rem !important;
}

.detail-sidebar-col {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
}

/* Related Curations in Sidebar - Fixed sizing, no squishing, clean thumbnail */
.related-curations-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
}

.related-curation-item {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.875rem !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.related-curation-item:hover {
  border-color: #005656 !important;
  background-color: #f0fdfa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 86, 86, 0.1) !important;
}

.related-curation-thumb {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  border-radius: 0.5rem !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.related-curation-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.related-curation-content .type {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #c28e14 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.2rem 0 !important;
}

.related-curation-content .title {
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.related-curation-content .meta {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

/* ==========================================================================
   FINAL DEFINITIVE BORDERLESS IMAGES & PERFECT DETAIL LAYOUT
   ========================================================================== */

/* Universal Image Reset: No container box borders or gray backgrounds */
#collections article div.card-img-box,
#collections article div.card-img-box img,
.detail-hero-frame,
.detail-hero-frame img,
.detail-gallery-img-container,
.detail-gallery-img-container img,
.related-curation-thumb,
#from-the-field figure > div,
#from-the-field figure img {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

#collections article div.card-img-box,
.detail-hero-frame,
.detail-gallery-img-container,
.related-curation-thumb {
  background-color: transparent !important;
  background: transparent !important;
}

/* Collections Rail Cards: Fixed exact uniform dimensions */
#collections article {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

#collections article > div {
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 1.25rem !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px -2px rgba(0, 86, 86, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#collections article:hover > div {
  transform: translateY(-6px) !important;
  border-color: #005656 !important;
  box-shadow: 0 16px 32px -4px rgba(0, 86, 86, 0.16), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

#collections article div.card-img-box {
  width: 100% !important;
  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#collections article div.card-img-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.4s ease-out !important;
}

#collections article:hover div.card-img-box img {
  transform: scale(1.05) !important;
}

#collections article div.card-content-box {
  padding-top: 0.875rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 0.75rem !important;
}

#collections article p.card-meta-tag {
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #c28e14 !important;
  margin: 0 0 0.35rem 0 !important;
}

#collections article h3.card-title-text {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  height: 48px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#collections article p.card-desc-text {
  font-size: 0.8125rem !important;
  color: #64748b !important;
  line-height: 1.45 !important;
  margin: 0.5rem 0 0 0 !important;
  height: 38px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Detail Page Hero Banner: Crisp and Clean, fully visible, zero box border */
.detail-hero-frame {
  margin-bottom: 3rem !important;
}

.detail-hero-frame img {
  max-height: 520px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 1rem !important;
}

/* Detail Page Sidebar: Explore Other Curations list */
.related-curations-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.875rem !important;
  width: 100% !important;
}

.related-curation-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.875rem !important;
  border-radius: 0.875rem !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.related-curation-item:hover {
  border-color: #005656 !important;
  background-color: #f0fdfa !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 86, 86, 0.1) !important;
}

.related-curation-thumb {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  border-radius: 0.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

.related-curation-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: calc(100% - 92px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  text-align: left !important;
  overflow: hidden !important;
}

.related-curation-content .type {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #c28e14 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 0.2rem 0 !important;
  line-height: 1.2 !important;
}

.related-curation-content .title {
  font-family: var(--font-display) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  display: block !important;
}

.related-curation-content .meta {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  display: block !important;
}

/* Field Notes Figures: Clean, light theme, no inner container box */
figure.group {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

figure.group img {
  border: none !important;
  background: transparent !important;
  object-fit: contain !important;
}

/* ==========================================================================
   PLEACH INDIA FOUNDATION (https://pleachindia.org/) AUTHENTIC DESIGN SYSTEM
   Fonts: Poppins (Primary Display/Body), Lora (Serif/Italic Accents)
   Colors: Deep Teal (#005656), Warm Gold (#F2B631), Dark Gold (#C28E14),
           Charcoal Ink (#191919), Body Muted (#666666), Soft Canvas (#F4F4F4)
   ========================================================================== */

:root {
  --font-family: 'Poppins', sans-serif !important;
  --font-display: 'Poppins', sans-serif !important;
  --font-serif: 'Lora', Georgia, serif !important;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  --pleach-teal: #005656;
  --pleach-teal-dark: #004242;
  --pleach-gold: #F2B631;
  --pleach-gold-hover: #dfac36;
  --pleach-dark-gold: #C28E14;
  --pleach-charcoal: #191919;
  --pleach-muted: #666666;
  --pleach-light-bg: #F4F4F4;
  --pleach-border: #EBEBEB;
}

/* Universal Typography Overrides to Poppins + Lora */
body, button, input, select, textarea, p, span, a, label {
  font-family: 'Poppins', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  color: #191919;
  letter-spacing: -0.015em;
}

.font-display {
  font-family: 'Poppins', sans-serif !important;
}

.font-serif, em, i {
  font-family: 'Lora', Georgia, serif !important;
}

/* ==========================================================================
   HERO SECTION - PLEACH AUTHENTIC BUTTONS & TYPOGRAPHY
   ========================================================================== */
#top h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

#top h1 span {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  color: #F2B631 !important;
  font-weight: 700 !important;
}

.hero-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #005656 !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 0.875rem 2rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(0, 86, 86, 0.3) !important;
  transition: all 0.25s ease !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.hero-btn-primary:hover {
  background-color: #004040 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 86, 86, 0.5) !important;
}

.hero-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #F2B631 !important;
  color: #005656 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 0.875rem 2rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 4px 14px rgba(242, 182, 49, 0.3) !important;
  transition: all 0.25s ease !important;
  border: 2px solid #F2B631 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.hero-btn-secondary:hover {
  background-color: #dfac36 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(242, 182, 49, 0.5) !important;
}

/* ==========================================================================
   COLLECTIONS RAIL - REDESIGNED CARDS (NO FLOATING ARROW OVER IMAGES)
   ========================================================================== */
#collections {
  background-color: #f8fafc !important;
  border-top: 1px solid #ebebeb !important;
  border-bottom: 1px solid #ebebeb !important;
}

#collections h2 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}

#collections h2 span {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  color: #F2B631 !important;
  font-weight: 700 !important;
}

/* Scroll Arrow Buttons above Rail */
#collections button[aria-label*="collections"] {
  width: 44px !important;
  height: 44px !important;
  border-radius: 9999px !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #005656 !important;
  box-shadow: 0 2px 8px rgba(0, 86, 86, 0.08) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#collections button[aria-label*="collections"]:hover {
  background-color: #005656 !important;
  border-color: #005656 !important;
  color: #ffffff !important;
  transform: scale(1.05) !important;
}

/* Card Outer Dimension */
#collections article {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  height: 440px !important;
  min-height: 440px !important;
  max-height: 440px !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Card Inner Box */
#collections article .card-inner-box {
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  border: 1.5px solid #ebebeb !important;
  border-radius: 16px !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 16px -2px rgba(0, 86, 86, 0.06), 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#collections article:hover .card-inner-box {
  transform: translateY(-6px) !important;
  border-color: #005656 !important;
  box-shadow: 0 16px 32px -4px rgba(0, 86, 86, 0.16), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Card Image Box - Completely borderless, no inner container, clean framing */
#collections article div.card-img-box {
  width: 100% !important;
  height: 205px !important;
  min-height: 205px !important;
  max-height: 205px !important;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#collections article div.card-img-box img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  transition: transform 0.4s ease-out !important;
}

#collections article:hover div.card-img-box img {
  transform: scale(1.04) !important;
}

/* Category Badge in Card (Positioned neatly in top-left) */
.card-type-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background-color: #005656 !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Card Content Box */
#collections article div.card-content-box {
  padding-top: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  flex: 1 !important;
  box-sizing: border-box !important;
}

/* Saffron Accent Bar (Authentic pleachindia.org element) */
.card-gold-bar {
  width: 36px !important;
  height: 3px !important;
  background-color: #F2B631 !important;
  margin: 0 0 8px 0 !important;
  border-radius: 2px !important;
}

/* Meta Tag */
#collections article p.card-meta-tag {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #C28E14 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}

/* Card Title */
#collections article h3.card-title-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #191919 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  height: 48px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Card Description */
#collections article p.card-desc-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  color: #666666 !important;
  line-height: 1.45 !important;
  margin: 4px 0 0 0 !important;
  height: 36px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Card Footer Action Bar */
.card-action-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 10px !important;
  margin-top: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #005656 !important;
}

.card-action-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #005656 !important;
  transition: color 0.2s ease !important;
}

.card-action-arrow {
  color: #005656 !important;
  transition: all 0.2s ease !important;
}

#collections article:hover .card-action-text {
  color: #C28E14 !important;
}

#collections article:hover .card-action-arrow {
  transform: translate(3px, -3px) !important;
  color: #C28E14 !important;
}

/* ==========================================================================
   THEME INDEX SECTION ("EIGHT THEMES, ONE HERITAGE")
   ========================================================================== */
#index {
  background-color: #ffffff !important;
  border-top: 1px solid #ebebeb !important;
}

#index h2 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}

#index h2 span {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  color: #F2B631 !important;
  font-weight: 700 !important;
}

#index button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 1.25rem !important;
  padding: 1.25rem 0.5rem !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background-color 0.2s ease !important;
}

#index button:hover {
  background-color: #f8fafc !important;
}

#index button span.w-8 {
  width: 2rem !important;
  flex-shrink: 0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.2em !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  transition: color 0.2s ease !important;
}

#index button:hover span.w-8,
#index button span.w-8.text-terra {
  color: #005656 !important;
  font-weight: 700 !important;
}

#index button span.text-\[1\.35rem\] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  color: #111827 !important;
  display: block !important;
  transition: color 0.2s ease !important;
}

@media (min-width: 640px) {
  #index button span.text-\[1\.35rem\] {
    font-size: 1.65rem !important;
  }
}

#index button:hover span.text-\[1\.35rem\] {
  color: #005656 !important;
}

#index button span.text-\[0\.8125rem\] {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  display: block !important;
  margin-top: 0.25rem !important;
}

/* Arrow Circle button on theme rows */
#index button span.rounded-full {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border: 1px solid #cbd5e1 !important;
  color: #64748b !important;
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 50% !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
}

#index button span.rounded-full svg {
  width: 14px !important;
  height: 14px !important;
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

#index button:hover span.rounded-full,
#index button span.rounded-full.border-terra,
#index button span.rounded-full.bg-terra {
  background-color: #005656 !important;
  background: #005656 !important;
  border-color: #005656 !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
}

#index button:hover span.rounded-full svg,
#index button span.rounded-full.border-terra svg,
#index button span.rounded-full.bg-terra svg {
  color: #ffffff !important;
  transform: translate(1px, -1px) !important;
}

/* Desktop Preview Card */
#index .sticky > div {
  background-color: #ffffff !important;
  border: 1.5px solid #ebebeb !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 1.25rem !important;
}

#index .sticky span.bg-[#005656] {
  background-color: #005656 !important;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Category Pills in Preview Card ONLY (does not touch row arrow buttons) */
#index .sticky span.rounded-full {
  background-color: #f4f4f4 !important;
  border: 1px solid #e2e8f0 !important;
  color: #005656 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* ==========================================================================
   DETAIL PAGE (PRESERVED & POLISHED)
   ========================================================================== */
.detail-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}

.detail-editorial-section h2 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  color: #191919 !important;
}

.detail-lead-quote p,
.detail-quote-box p {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
}

.detail-highlights-box h3,
.detail-record-card h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

.related-curation-content .title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   HERO BANNER - GRAND PROMINENT TITLE & GENEROUS VERTICAL BREATHING ROOM
   ========================================================================== */

#top,
.hero-section-wrapper {
  position: relative !important;
  min-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: visible !important;
  background-color: #0f172a !important;
}

.hero-content-container {
  position: relative !important;
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 10rem !important;
  padding-bottom: 5.5rem !important; /* Generous breathing room above marquee bar! */
  box-sizing: border-box !important;
  color: #ffffff !important;
  z-index: 10 !important;
}

@media (max-width: 640px) {
  .hero-content-container {
    padding-top: 6rem !important;
    padding-bottom: 3.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

.hero-badge-row {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: #F2B631 !important;
  margin-bottom: 1rem !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

#top h1,
.hero-title-main {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(3.2rem, 7vw, 6rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0.5rem 0 1.25rem 0 !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  display: block !important;
}

#top h1 span,
.hero-title-serif {
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  color: #F2B631 !important;
  font-weight: 700 !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.8) !important;
}

.hero-subtitle-desc {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
  line-height: 1.65 !important;
  color: #e2e8f0 !important;
  max-width: 660px !important;
  margin: 0 0 2.25rem 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7) !important;
}

.hero-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-top: 1.75rem !important;
  margin-bottom: 1rem !important;
}

/* ==========================================================================
   HERO VERTICAL NAVIGATION BAR (EVENTS, ARTICLES, MARKETPLACE & THEMES)
   ========================================================================== */
.hero-vertical-nav {
  position: absolute !important;
  right: 2.5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.625rem !important;
  z-index: 25 !important;
  max-width: 320px !important;
  text-align: right !important;
}

@media (max-width: 1240px) {
  .hero-vertical-nav {
    display: none !important;
  }
}

.hero-vertical-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.75rem !important;
  text-align: right !important;
  background: transparent !important;
  border: none !important;
  padding: 0.2rem 0 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
}

.hero-vertical-num {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  color: #F2B631 !important;
  opacity: 0.85 !important;
  transition: all 0.25s ease !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.hero-vertical-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: #ffffff !important;
  opacity: 0.8 !important;
  transition: all 0.25s ease !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  white-space: nowrap !important;
}

.hero-vertical-dash {
  display: block !important;
  width: 1.1rem !important;
  height: 1.5px !important;
  background-color: rgba(255, 255, 255, 0.45) !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.hero-vertical-item:hover .hero-vertical-num {
  opacity: 1 !important;
  transform: translateX(-3px) !important;
}

.hero-vertical-item:hover .hero-vertical-title {
  opacity: 1 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  transform: translateX(-3px) !important;
}

.hero-vertical-item:hover .hero-vertical-dash {
  width: 1.85rem !important;
  background-color: #F2B631 !important;
}


/* ==========================================================================
   ADVANCED MOBILE & TABLET RESPONSIVE STYLES (PLEACH INDIA FOUNDATION)
   ========================================================================== */

/* Prevent any horizontal blowout on mobile */
/* Scroll locking removed */

/* Mobile Quick Nav Bar on Hero (Covering Events, Articles, Marketplace & Themes) */
.hero-mobile-quicknav {
  display: none !important;
}

@media (max-width: 1240px) {
  .hero-mobile-quicknav {
    display: block !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    z-index: 20 !important;
  }

  .hero-mobile-quicknav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0.6rem !important;
  }

  .hero-mobile-quicknav-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #F2B631 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
  }

  .hero-mobile-quicknav-hint {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.625rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.05em !important;
  }

  .hero-mobile-quicknav-scroll {
    display: flex !important;
    gap: 0.625rem !important;
    overflow-x: auto !important;
    padding-bottom: 0.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .hero-mobile-quicknav-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .hero-mobile-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9999px !important;
    padding: 0.45rem 0.95rem !important;
    color: #ffffff !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    touch-action: manipulation !important;
  }

  .hero-mobile-chip:hover,
  .hero-mobile-chip:active {
    background: #005656 !important;
    border-color: #F2B631 !important;
    transform: translateY(-1px) !important;
  }

  .hero-mobile-chip-num {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
    color: #F2B631 !important;
    letter-spacing: 0.1em !important;
  }

  .hero-mobile-chip-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #ffffff !important;
  }
}

/* Mobile Screen Breakpoint: 640px and below */
@media (max-width: 640px) {
  /* Hero Content */
  .hero-content-container {
    padding-top: 5rem !important;
    padding-bottom: 2.75rem !important;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }

  .hero-badge-row {
    font-size: 0.6875rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.75rem !important;
  }

  #top h1,
  .hero-title-main {
    font-size: clamp(2.35rem, 8.5vw, 3.4rem) !important;
    line-height: 1.08 !important;
    margin: 0.25rem 0 0.85rem 0 !important;
  }

  .hero-subtitle-desc {
    font-size: 0.9375rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.35rem !important;
  }

  .hero-actions-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100% !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.75rem !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Marquee Band */
  .marquee-track span {
    font-size: 0.625rem !important;
    letter-spacing: 0.18em !important;
  }

  /* Collection Rail on mobile */
  #collections {
    padding-top: 3.5rem !important;
    padding-bottom: 4rem !important;
  }

  #collections article {
    width: 82vw !important;
    min-width: 275px !important;
    max-width: 320px !important;
    height: auto !important;
    min-height: 420px !important;
  }

  #collections article div.card-img-box {
    height: 175px !important;
    min-height: 175px !important;
    max-height: 175px !important;
  }

  /* Theme Index on mobile */
  #index {
    padding-top: 3.5rem !important;
    padding-bottom: 4rem !important;
  }

  #index button {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    gap: 0.75rem !important;
  }

  /* Detail Page on mobile */
  .detail-top-nav {
    padding: 0.75rem 1rem !important;
  }

  .detail-nav-inner {
    padding: 0 !important;
  }

  .detail-main-article {
    padding: 1.75rem 1.15rem 4rem 1.15rem !important;
  }

  .detail-title {
    font-size: clamp(1.85rem, 6.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  .detail-lead-description {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .detail-lead-quote {
    padding-left: 1rem !important;
  }

  .detail-lead-quote p {
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
  }

  .detail-highlights-box,
  .detail-record-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: 12px !important;
  }

  .detail-gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .detail-gallery-img-container {
    height: 220px !important;
  }
}




/* Offset TopBar when WordPress Admin Bar is visible */
.admin-bar header.fixed {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar header.fixed {
    top: 46px !important;
  }
}




/* ==========================================================================
   WORDPRESS THEME ISOLATION & RESET (GUARANTEES 100% IDENTICAL DESIGN)
   ========================================================================== */
#root,
.pleach-explore-scope,
#pleach-explore-wp-scope {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  color: #111827 !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 1.5 !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased !important;
}

#root *,
#root *::before,
#root *::after {
  box-sizing: border-box !important;
}

/* Neutralize WordPress Theme button overrides inside #root */
#root button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none !important;
}

/* Neutralize WordPress Theme link styles inside #root */
#root a {
  text-decoration: none !important;
  color: inherit;
  box-shadow: none !important;
}

/* Neutralize WordPress Theme paragraph margins */
#root p {
  margin-top: 0;
}

/* Neutralize WordPress Theme heading margins */
#root h1, #root h2, #root h3, #root h4, #root h5, #root h6 {
  font-family: 'Poppins', sans-serif !important;
}

/* Theme Index Row Buttons: Clean transparent background like normal page */
#index .border-t,
#index .border-b,
#index div.border-b {
  border-color: #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
#index .border-t {
  border-top: 1px solid #e2e8f0 !important;
}

#index button {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

#index button:hover {
  background-color: #f8fafc !important;
}

@media (min-width: 1024px) {
  #index .grid.lg\:grid-cols-\[1fr_380px\],
  #index div:has(> .border-t):has(> .hidden) {
    display: grid !important;
    grid-template-columns: 1fr 380px !important;
    gap: 4rem !important;
    align-items: start !important;
  }

  #index .hidden.lg\:block {
    display: block !important;
  }
}

/* Theme Index Preview Card Typography and Sizing */
#index .sticky {
  position: sticky !important;
  top: 6rem !important;
}

#index .sticky h3 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #111827 !important;
  margin: 0.75rem 0 0.5rem 0 !important;
  word-break: break-word !important;
}

#index .sticky p {
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
  color: #475569 !important;
  margin: 0 0 1rem 0 !important;
}

#index button span.text-\[1\.35rem\] {
  font-size: 1.35rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* ROOT CONTAINER SCOPE */
#root, .pleach-root-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}


/* ==========================================================================
   PERFECT UNRESTRICTED WINDOW SCROLLING (ZERO SCROLL TRAPPING)
   ========================================================================== */
#root,
.pleach-page-container,
.pleach-explore-scope,
#pleach-explore-wp-scope,
main,
#top,
.hero-section-wrapper,
#index,
#collections,
#purpose {
  overflow: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
}

/* Ensure background image and gradient layers never intercept mouse wheel events */
.hero-section-wrapper .absolute.inset-0,
.hero-section-wrapper div.absolute.inset-0,
.hero-section-wrapper .bg-gradient-to-t {
  pointer-events: none !important;
}

/* Keep interactive controls clickable */
.hero-content-container,
.hero-vertical-nav,
.hero-actions-row,
.hero-mobile-quicknav,
.hero-btn-primary,
.hero-btn-secondary,
.hero-vertical-item {
  pointer-events: auto !important;
}


/* Strictly hide any plugin footer inside #root (leaves WordPress theme footer untouched) */
#root footer,
.pleach-page-container footer,
#pleach-explore-wp-scope footer {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ==========================================================================
   TOUCH & WHEEL SCROLL LIBERATION
   ========================================================================== */
html,
body,
#root,
.pleach-root-container,
.pleach-page-container,
main,
#top,
.hero-section-wrapper,
#index,
#collections,
#purpose {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overflow: visible !important;
  overflow-y: visible !important;
}

/* Ensure background image and overlays never block mouse/wheel events */
.hero-section-wrapper img,
.hero-section-wrapper .pointer-events-none,
.hero-section-wrapper div.absolute.inset-0 {
  pointer-events: none !important;
}

.hero-content-container,
.hero-actions-row,
.hero-vertical-nav,
.hero-mobile-quicknav,
button, a {
  pointer-events: auto !important;
}

/* ==========================================================================
   ELEMENTOR & WORDPRESS 100% FULL-WIDTH ENFORCEMENT
   Ensures edge-to-edge display with zero side margins in any theme/builder
   ========================================================================== */

/* Unconstrain any Elementor section or container wrapping Pleach */
.elementor-section:has(#root),
.elementor-section:has(.pleach-root-container),
.elementor-section:has(.pleach-page-container),
.elementor-section.elementor-section-boxed:has(#root),
.elementor-section.elementor-section-boxed:has(.pleach-root-container),
.elementor-section.elementor-section-boxed:has(.pleach-page-container),
.e-con:has(#root),
.e-con:has(.pleach-root-container),
.e-con:has(.pleach-page-container),
.e-con-boxed:has(#root),
.e-con-boxed:has(.pleach-root-container),
.e-con-inner:has(#root),
.e-con-inner:has(.pleach-root-container) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Force Elementor containers and column wraps to full width with zero side padding */
.elementor-section:has(#root) > .elementor-container,
.elementor-section:has(.pleach-root-container) > .elementor-container,
.elementor-section:has(.pleach-page-container) > .elementor-container,
.elementor-container:has(#root),
.elementor-container:has(.pleach-root-container),
.elementor-container:has(.pleach-page-container),
.elementor-column:has(#root),
.elementor-column:has(.pleach-root-container),
.elementor-column:has(.pleach-page-container),
.elementor-widget-wrap:has(#root),
.elementor-widget-wrap:has(.pleach-root-container),
.elementor-widget-wrap:has(.pleach-page-container),
.elementor-widget:has(#root),
.elementor-widget:has(.pleach-root-container),
.elementor-widget:has(.pleach-page-container),
.elementor-widget-container:has(#root),
.elementor-widget-container:has(.pleach-root-container),
.elementor-widget-container:has(.pleach-page-container),
.elementor-shortcode:has(#root),
.elementor-shortcode:has(.pleach-root-container),
.elementor-shortcode:has(.pleach-page-container) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* WordPress Theme Containers (Astra, Hello, Divi, GeneratePress, etc.) */
.entry-content:has(#root),
.site-content:has(#root),
.ast-container:has(#root),
.post-inner:has(#root),
.content-area:has(#root),
.site-main:has(#root) {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Root container itself is strictly 100% full width */
#root,
.pleach-root-container,
.pleach-page-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

#top.hero-section-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

/* ==========================================================================
   EXPLICIT SECTION PADDING & INNER CONTAINER BREATHING ROOM
   Guaranteed generous spacing between sections and safe horizontal margins
   ========================================================================== */

/* Universal spacing variable for Tailwind utilities */
:root {
  --spacing: 0.25rem !important;
}

#root,
.pleach-root-container,
.pleach-page-container {
  --spacing: 0.25rem !important;
}

/* Fallback for Tailwind utility classes directly inside #root */
#root .px-5, .pleach-root-container .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
#root .px-6, .pleach-root-container .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
#root .px-7, .pleach-root-container .px-7 { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
#root .px-8, .pleach-root-container .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
#root .sm\:px-8, .pleach-root-container .sm\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }

#root .py-12, .pleach-root-container .py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
#root .py-16, .pleach-root-container .py-16 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
#root .py-20, .pleach-root-container .py-20 { padding-top: 5.5rem !important; padding-bottom: 5.5rem !important; }
#root .sm\:py-24, .pleach-root-container .sm\:py-24 { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; }
#root .sm\:py-28, .pleach-root-container .sm\:py-28 { padding-top: 7.5rem !important; padding-bottom: 7.5rem !important; }

#root .mx-auto, .pleach-root-container .mx-auto { margin-left: auto !important; margin-right: auto !important; }
#root .max-w-\[1400px\], .pleach-root-container .max-w-\[1400px\] { max-width: 1400px !important; }
#root .max-w-\[1000px\], .pleach-root-container .max-w-\[1000px\] { max-width: 1050px !important; }

/* 1. SECTION-LEVEL VERTICAL SPACING (Top & Bottom Padding) */
.pleach-section,
#index,
#collections,
#field-notes,
.pleach-section-fieldnotes,
#purpose,
.pleach-section-purpose {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}

@media (min-width: 640px) {
  .pleach-section,
  #index,
  #collections,
  #field-notes,
  .pleach-section-fieldnotes,
  #purpose,
  .pleach-section-purpose {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }
}

@media (min-width: 1024px) {
  .pleach-section,
  #index,
  #collections,
  #field-notes,
  .pleach-section-fieldnotes,
  #purpose,
  .pleach-section-purpose {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
  }
}

/* 2. INNER CONTAINER HORIZONTAL PADDING & CENTERING */
.pleach-section-container,
#index > div.mx-auto,
#index > div.pleach-section-container,
#collections > div.mx-auto,
#collections > div.pleach-section-container,
#field-notes > div.mx-auto,
#field-notes > div.pleach-section-container,
.pleach-section-fieldnotes > div.mx-auto,
.pleach-section-fieldnotes > div.pleach-section-container,
#purpose > div.mx-auto,
#purpose > div.pleach-section-container,
.pleach-section-purpose > div.mx-auto,
.pleach-section-purpose > div.pleach-section-container {
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .pleach-section-container,
  #index > div.mx-auto,
  #collections > div.mx-auto,
  #field-notes > div.mx-auto,
  .pleach-section-fieldnotes > div.mx-auto,
  #purpose > div.mx-auto,
  .pleach-section-purpose > div.mx-auto {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

@media (min-width: 1024px) {
  .pleach-section-container,
  #index > div.mx-auto,
  #collections > div.mx-auto,
  #field-notes > div.mx-auto,
  .pleach-section-fieldnotes > div.mx-auto,
  #purpose > div.mx-auto,
  .pleach-section-purpose > div.mx-auto {
    padding-left: 3.5rem !important;
    padding-right: 3.5rem !important;
  }
}

@media (min-width: 1440px) {
  .pleach-section-container,
  #index > div.mx-auto,
  #collections > div.mx-auto,
  #field-notes > div.mx-auto,
  .pleach-section-fieldnotes > div.mx-auto,
  #purpose > div.mx-auto,
  .pleach-section-purpose > div.mx-auto {
    padding-left: 4.5rem !important;
    padding-right: 4.5rem !important;
  }
}

/* Specific inner width for Purpose section */
#purpose > div.pleach-section-container,
#purpose > div.max-w-\[1000px\] {
  max-width: 1050px !important;
}

/* Collections Rail Horizontal Scroll Gutters */
#collections > div:last-child {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#collections div[ref="railRef"],
#collections .no-scrollbar {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

@media (min-width: 640px) {
  #collections div[ref="railRef"],
  #collections .no-scrollbar {
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
  }
}

@media (min-width: 1024px) {
  #collections div[ref="railRef"],
  #collections .no-scrollbar {
    padding-left: max(2.5rem, calc((100% - 1400px) / 2 + 2.5rem)) !important;
    padding-right: max(2.5rem, calc((100% - 1400px) / 2 + 2.5rem)) !important;
  }
}

/* ==========================================================================
   BUTTON & INTERACTIVE CONTROLS 100% STANDALONE FIDELITY ENFORCEMENT
   Guaranteed 1:1 match with standalone page for all buttons and action pills
   ========================================================================== */

/* 1. PURPOSE SECTION BUTTONS (Side-by-side centered pills) */
.purpose-actions-container,
#purpose .purpose-actions-container,
#purpose div:has(> a.purpose-btn-primary),
#purpose div:has(> a[href="#top"]) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin-top: 3.5rem !important;
  margin-bottom: 2.5rem !important;
  width: 100% !important;
}

@media (max-width: 639px) {
  .purpose-actions-container,
  #purpose .purpose-actions-container,
  #purpose div:has(> a.purpose-btn-primary) {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Primary Purpose Pill: "SUPPORT THE WORK ↗" */
.purpose-btn-primary,
#purpose a.purpose-btn-primary,
#purpose a[href="#top"],
#purpose a.bg-terra {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  background-color: #005656 !important;
  background: #005656 !important;
  color: #ffffff !important;
  border: 1px solid #005656 !important;
  border-radius: 9999px !important;
  padding: 0.95rem 2rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: 0 2px 8px rgba(0, 86, 86, 0.15) !important;
}

.purpose-btn-primary:hover,
#purpose a.purpose-btn-primary:hover,
#purpose a[href="#top"]:hover,
#purpose a.bg-terra:hover {
  background-color: #f2b631 !important;
  background: #f2b631 !important;
  border-color: #f2b631 !important;
  color: #004848 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(242, 182, 49, 0.3) !important;
}

.purpose-btn-primary svg,
#purpose a[href="#top"] svg {
  width: 1rem !important;
  height: 1rem !important;
  transition: transform 0.25s ease !important;
}

.purpose-btn-primary:hover svg,
#purpose a[href="#top"]:hover svg {
  transform: translate(2px, -2px) !important;
}

/* Secondary Purpose Pill: "BACK TO THE INDEX" */
.purpose-btn-secondary,
#purpose a.purpose-btn-secondary,
#purpose a[href="#index"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #191919 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 9999px !important;
  padding: 0.95rem 2rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.purpose-btn-secondary:hover,
#purpose a.purpose-btn-secondary:hover,
#purpose a[href="#index"]:hover {
  background-color: #f8fafc !important;
  background: #f8fafc !important;
  border-color: #005656 !important;
  color: #005656 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 86, 86, 0.1) !important;
}

/* 2. HERO ACTION BUTTONS */
.hero-btn-primary,
#top button.hero-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #005656 !important;
  background: #005656 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.875rem 2rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.hero-btn-primary:hover,
#top button.hero-btn-primary:hover {
  background-color: #004242 !important;
  background: #004242 !important;
  transform: translateY(-2px) !important;
}

.hero-btn-secondary,
#top a.hero-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  background-color: #F2B631 !important;
  background: #F2B631 !important;
  color: #004848 !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.875rem 2rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.hero-btn-secondary:hover,
#top a.hero-btn-secondary:hover {
  background-color: #e5a720 !important;
  background: #e5a720 !important;
  transform: translateY(-2px) !important;
}

/* 3. FIELD NOTES LINK BADGE */
#field-notes a[href="#collections"],
.pleach-section-fieldnotes a[href="#collections"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: #191919 !important;
  text-decoration: none !important;
  margin-top: 1.75rem !important;
  transition: color 0.2s ease !important;
}

#field-notes a[href="#collections"] span,
.pleach-section-fieldnotes a[href="#collections"] span {
  display: flex !important;
  width: 2rem !important;
  height: 2rem !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 1px solid #cbd5e1 !important;
  background-color: transparent !important;
  color: #191919 !important;
  transition: all 0.25s ease !important;
}

#field-notes a[href="#collections"]:hover span,
.pleach-section-fieldnotes a[href="#collections"]:hover span {
  background-color: #005656 !important;
  border-color: #005656 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
}

/* 4. COLLECTION CARDS CATEGORY PILLS & ARROWS */
#collections span.rounded-full {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #005656 !important;
  font-weight: 600 !important;
  font-size: 0.625rem !important;
  letter-spacing: 0.12em !important;
  padding: 0.25rem 0.75rem !important;
  text-transform: uppercase !important;
}

#collections button[aria-label*="collections"] {
  width: 44px !important;
  height: 44px !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 50% !important;
  color: #005656 !important;
  box-shadow: 0 2px 8px rgba(0, 86, 86, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#collections button[aria-label*="collections"]:hover {
  background-color: #005656 !important;
  color: #ffffff !important;
  border-color: #005656 !important;
  transform: scale(1.05) !important;
}