/* ----------------------------- QUICK DROP-IN STYLES (scoped) ----------------------------- */
.ea-hero {
  position: relative;
  overflow: hidden;
  border-radius: .75rem;
  background: linear-gradient(135deg, #0ea5a8 0%, #0b5f7a 100%);
  color: #fff;
}
.ea-hero .ea-hero-inner { padding: 32px 18px; }
@media (min-width: 576px){ .ea-hero .ea-hero-inner { padding: 44px 24px; } }
@media (min-width: 768px){ .ea-hero .ea-hero-inner { padding: 72px 64px; } }

.ea-hero h1 {
  font-weight: 800; line-height: 1.15; margin: 0 0 10px;
  font-size: 1.55rem;
}
@media (min-width: 576px){ .ea-hero h1 { font-size: 1.9rem; } }
@media (min-width: 992px){ .ea-hero h1 { font-size: 2.25rem; } }

.ea-hero p.lead {
  font-size: 1rem; margin-bottom: 16px; opacity:.98;
}
@media (min-width: 576px){ .ea-hero p.lead { font-size: 1.05rem; } }
@media (min-width: 992px){ .ea-hero p.lead { font-size: 1.15rem; } }

.ea-cta .btn { margin-bottom: 10px; }
@media (max-width: 575.98px){
  .ea-cta .btn { display:block; width:100%; }
}

.ea-contact-inline { opacity:.95; }
.ea-contact-inline a { color:#fff; text-decoration: underline; }

.ea-card {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
  box-shadow: 0 .2rem .8rem rgba(0,0,0,.06);
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
  background: #fff;
}
.ea-card:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); }
.ea-card .ea-card-body { padding: 16px; }
@media (min-width: 576px){ .ea-card .ea-card-body { padding: 20px; } }
.ea-card h3 { font-size: 1.08rem; margin: 0 0 6px; font-weight: 700; }
.ea-card p { margin: 0 0 12px; color: #444; }
.ea-card .btn { width:100%; }
@media (min-width: 576px){ .ea-card .btn { width:auto; } }

.ea-trust {
  background: #f7fafb;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
  padding: 14px 16px;
  font-size: .93rem;
}
.ea-trust .ea-logos {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  color: #0b5f7a; font-weight: 700; letter-spacing: .2px;
}
@media (max-width: 575.98px){
  .ea-trust { font-size: .9rem; padding: 12px; }
  .ea-trust .ea-logos { gap: 8px; }
}

/* Compact CTA band */
.ea-cta-band {
  background: #0b5f7a; color: #fff; border-radius: .75rem;
  padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.ea-cta-band .btn { margin-top: 10px; }
@media (max-width: 575.98px){
  .ea-cta-band { padding: 14px; }
  .ea-cta-band .btn { width:100%; }
}

/* Eden Red Button */
.btn-eden-red {
  background-color: #e54242 !important;
  border-color: #e54242 !important;
  color: #fff !important;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}
.btn-eden-red:hover,
.btn-eden-red:focus {
  background-color: #c73232 !important;
  border-color: #c73232 !important;
  color: #fff !important;
}

/* ------------------------------------------------------------------
   EDEN RED BUTTON (Custom)
   Matches Eden USA brand color #e54242
   Includes glow, text depth, and responsive hover/active behavior
------------------------------------------------------------------ */
.btn-eden-red {
  background-color: #e54242 !important;          /* Primary Eden Red */
  border-color: #e54242 !important;
  color: #fff !important;
  font-weight: 600;
  text-shadow: 0 1px 1px rgba(0,0,0,0.25);       /* Subtle inner depth */
  box-shadow: 0 0.25rem 0.6rem rgba(229,66,66,0.45); /* Ambient red glow */
  transition: all 0.25s ease-in-out;
  border-radius: 0.5rem;
}

.btn-eden-red:hover,
.btn-eden-red:focus {
  background-color: #b52c2c !important;          /* Darker hover shade */
  border-color: #b52c2c !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  box-shadow: 0 0.35rem 0.8rem rgba(181,44,44,0.6);
  transform: translateY(-1px);
}

.btn-eden-red:active {
  background-color: #992222 !important;          /* Active press state */
  border-color: #992222 !important;
  box-shadow: 0 0.15rem 0.4rem rgba(153,34,34,0.5);
  transform: translateY(0);
}

/* ----------------------------------------------
   MOBILE OPTIMIZATION
   Slightly reduce glow intensity on small screens
---------------------------------------------- */
@media (max-width: 575.98px) {
  .btn-eden-red {
    box-shadow: 0 0.15rem 0.4rem rgba(229,66,66,0.35);
    font-size: 1rem;
  }
  .btn-eden-red:hover,
  .btn-eden-red:focus {
    box-shadow: 0 0.25rem 0.6rem rgba(181,44,44,0.45);
    transform: none; /* disable hover lift for better touch UX */
  }
}

/* ========================================================= */
/* START: Home brand bubble – force top-aligned content      */
/* ========================================================= */

/* Replace `.ea-brand-bubble` with the actual bubble class if different */
.ea-brand-bubble{
  /* Make sure it’s a column flexbox and pinned to the top-left */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;

  /* Guardrails in case something was pushing content down */
  height: auto;                 /* don’t force a table-cell behaviour */
  line-height: 1.25;            /* tidy multi-line spacing */
}

/* Kill any default top spacing that could look like bottom alignment */
.ea-brand-bubble > *{
  margin-top: 0 !important;
}

/* If the list is a UL/OL, remove extra bottom gap */
.ea-brand-bubble ul,
.ea-brand-bubble ol,
.ea-brand-bubble p{
  margin-bottom: 0.25rem; /* or 0 if you want it tighter */
  padding-left: 1.1rem;   /* keep bullets neatly indented */
}

/* If the original used table-cell vertical alignment, override it */
.ea-brand-bubble{
  vertical-align: top !important;
}

/* If the original used CSS Grid with end alignment, neutralize it */
.ea-brand-bubble{
  align-content: start !important;
  justify-items: start !important;
}

/* ========================================================= */
/* END: Home brand bubble – force top-aligned content        */
/* ========================================================= */

/* ========================================================= */
/* START: Home – Trust bubble alignment & color fix          */
/* ========================================================= */
.ea-trust .ea-logos{
  display:flex;               /* stack the brand lines */
  flex-direction:column;
  justify-content:flex-start; /* stick to the top */
  align-items:flex-start;     /* left edge */
  gap:.125rem;                /* small vertical spacing */
  margin-top:.5rem;           /* space below heading */
}
.ea-trust .ea-logos span{
  display:block;
  color: var(--bs-body-color, #111); /* force dark text */
  line-height:1.25;
}
/* ========================================================= */
/* END: Home – Trust bubble alignment & color fix            */
/* ========================================================= */
/* ========================================================= */
/* START: Explore cards – compact baseline + hover           */
/* ========================================================= */
:root { --eden-red: #e54242; }

/* Make both Bootstrap .card and your .ea-card behave the same */
.ea-explore-cards .card,
.ea-explore-cards .ea-card{
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color:#fff;
  border:1px solid rgba(0,0,0,.075);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Body fills height so the CTA can sit on the bottom */
.ea-explore-cards .card-body,
.ea-explore-cards .ea-card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ea-explore-cards .cta-wrap,
.ea-explore-cards .card-footer{
  margin-top: auto;
}

/* Eden hover: opt-in with .eden-hover-border on either card type */
.ea-explore-cards .eden-hover-border:hover{
  border-color: var(--eden-red);
  box-shadow: 0 0 0 .25rem rgba(229,66,66,.15);
  transform: translateY(-2px);
}

/* Tidy trailing spacing */
.ea-explore-cards .card-body > *:last-child,
.ea-explore-cards .ea-card-body > *:last-child{ margin-bottom:0; }

/* ========================================================= */
/* END: Explore cards – compact baseline + hover             */
/* ========================================================= */

/* Normalize explore buttons/titles just in case */
.ea-explore-cards .ea-card .btn.btn-sm{ font-size:inherit; padding:.5rem 1rem; }
.ea-explore-cards .ea-card .btn{ display:block; width:100%; }
.ea-explore-cards .ea-card h3{ font-size:1.25rem; } /* matches .h5 */


/* HOME PAGE ONLY — narrower side gutters */
.home-page .container,
.home-page .container-fluid { padding-left:1px; padding-right:1px; }
.home-page .row { margin-left:-10px; margin-right:-10px; }

@media (min-width: 992px){
  .home-page .container,
  .home-page .container-fluid { padding-left:3px; padding-right:3px; }
  .home-page .row { margin-left:-3px; margin-right:-3px; }
}

/* ========================================================= */
/* HOME PAGE — side-by-side list using columns */
/* ========================================================= */
.home-page .ea-brand-list{
  list-style:none; padding-left:0; margin:0;
  column-gap:2rem; column-count:2;
}
.home-page .ea-brand-list li{ break-inside:avoid; padding:.125rem 0; }

@media (min-width: 992px){
  .home-page .ea-brand-list{ column-count: 3; } /* optional: 3 cols on desktop */
}

/* Home brands card: reset text color so it shows on white */
.home-page .ea-brands-card { background:#fff; color:#212529; }
.home-page .ea-brands-card a,
.home-page .ea-brands-card strong,
.home-page .ea-brands-card .ea-brand-list li { color:#212529; }

/* ========================================================= */
/* HOME PAGE — contact quick card (subtle red gradient) */
/* ========================================================= */
.home-page .ea-contact-quick{
  background: linear-gradient(135deg, #fff2f2 0%, #ffdede 42%, #f7c9c9 100%);
  border-radius: .75rem;
}

.home-page .ea-contact-quick .card-body{ line-height:1.15; }

.home-page .ea-contact-quick .ea-quick-link{
  color:#9b1b1b;
  text-decoration:none;
  font-weight:600;
}
.home-page .ea-contact-quick .ea-quick-link:hover,
.home-page .ea-contact-quick .ea-quick-link:focus{
  text-decoration:underline;
}

.home-page .ea-contact-quick span,
.home-page .ea-contact-quick strong{ color:#6b0f0f; }

/* Keep cards crisp white on the new canvas */
.home-page .ea-hero .card,
.home-page .ea-hero ~ * .card {
  background-color: #ffffff;
}

/* ========================================================= */
/* HOME PAGE — off-white canvas from the content down */
/* ========================================================= */
/* Put at end of your stylesheet */
.home-page { background-color:#EDF2F7; !important; }  /* Soft blue-gray (popular UI feel) */

/* Keep cards crisp on the soft canvas */
.home-page .ea-home-canvas .card {
  background: #ffffff;
}

/* 1) Force the HOME page canvas color, regardless of later CSS */
html.home-page,
body.home-page {
  background-color: #EDF2F7; !important;  /* soft blue-gray */
}

/* (keep your black top bar solid if you added this class) */
.ea-topbar-black { background-color:#000 !important; }

/* 2) Make sure the Contact Quick Card keeps its gradient even if
      a global .card rule sets a white background later */
.home-page .card.ea-contact-quick {
  background-image: linear-gradient(135deg, #fff2f2 0%, #ffdede 42%, #f7c9c9 100%) !important;
  background-color: transparent !important;  /* don't overlay the gradient */
}

/* If your CTA bubble has .card-body getting a white bg elsewhere, harden that too */
.home-page .ea-contact-quick .card-body {
  background: transparent !important;
}

/* ========================================================= */
/* HOME PAGE: force full-page off-white regardless of wrappers */
/* ========================================================= */
body.home-page { position: relative; }

body.home-page::before {
  content: "";
  position: fixed;     /* covers the viewport */
  inset: 0;            /* top/right/bottom/left: 0 */
  background: #EDF2F7; /* your blue-gray */
  z-index: -1;         /* sits behind all content */
  pointer-events: none;
}

/* ========================================================= */
/* HOME PAGE hard lock — load LAST in the document */
/* ========================================================= */
/* 1) Paint the entire page off-white */
html.home-page,
body.home-page {
  background-color: #EDF2F7; !important; /* blue-gray */
}

/* 2) Make common wrappers transparent so the body color shows through */
body.home-page .container,
body.home-page .container-fluid,
body.home-page .row,
body.home-page .site-wrap,
body.home-page .pagewrap,
body.home-page .main,
body.home-page .content,
body.home-page .ea-home-canvas,
body.home-page #page,
body.home-page #content {
  background-color: transparent !important;
}

/* 3) Keep cards bright white so they “pop” on the off-white canvas */
body.home-page .card {
  background-color: #ffffff !important;
}

/* Image inside the blue hero */
.ea-hero { overflow: hidden; } /* already has border-radius */
.ea-hero .ea-hero-media {
  height: 100%;
  min-height: 220px;           /* keeps a nice block on small screens */
  border-radius: .5rem;        /* soft corners inside the hero */
  overflow: hidden;
}
.ea-hero .ea-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fills the box without distortion */
}
@media (min-width: 992px){
  .ea-hero .pr-lg-4 { padding-right: 1.25rem; }
}


/* ========================================================= */
/* HOME — Brands + New Pages feature panel */
/* ========================================================= */
.home-page .ea-brands-panel {
  border-radius: .75rem;
  background: #fff;
}

/* Subtle gradient band at the top (on-brand) */
.home-page .ea-brands-panel .ea-panel-head{
  background: linear-gradient(90deg, rgba(229,66,66,.12), rgba(229,66,66,0));
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.home-page .ea-brands-panel .ea-panel-head h2{
  font-weight: 700;
  margin: 0;
}

/* Small tag on the right of the header */
.home-page .ea-brands-panel .ea-panel-tag{
  font-size: .8rem;
  font-weight: 700;
  color: #b52c2c;
  background: #fde8e8;
  padding: .15rem .5rem;
  border-radius: 999px;
}

/* Body spacing */
.home-page .ea-brands-panel .ea-panel-body{
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #fafbfc 100%);
  border-radius: 0 0 .75rem .75rem;
}

/* Reuse your side-by-side brand list, but tighten it a hair in this panel */
.home-page .ea-brands-panel .ea-brand-list{
  list-style:none; padding-left:0; margin:0;
  column-gap:2rem; column-count:2;
}
.home-page .ea-brands-panel .ea-brand-list li{
  break-inside: avoid; padding:.2rem 0; color:#212529;
}
@media (min-width: 992px){
  .home-page .ea-brands-panel .ea-brand-list{ column-count:3; }
}

/* Links column */
.home-page .ea-brands-panel .ea-links{
  display:flex; flex-direction:column;
}
.home-page .ea-brands-panel .ea-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:.45rem .6rem;
  margin-bottom:.25rem;
  border-radius:.5rem;
  text-decoration:none;
  color:#0b485a;                  /* matches your teal family */
  background: #f5f8fa;
  transition: box-shadow .2s ease, transform .15s ease;
}
.home-page .ea-brands-panel .ea-link:hover,
.home-page .ea-brands-panel .ea-link:focus{
  text-decoration:none;
  box-shadow:0 0 0 .25rem rgba(11,95,122,.12);
  transform: translateY(-1px);
}

/* “NEW” pill */
.home-page .ea-brands-panel .ea-pill{
  margin-left:.5rem;
  font-size:.72rem;
  font-weight:700;
  color:#8f2222;
  background:#ffe3e3;
  padding:.15rem .45rem;
  border-radius:999px;
  white-space:nowrap;
}