/* ── Reset & Base ── 
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

*/


:root {
  --clr-bg:       #FFFFFF;
  --clr-surface:  #00924521;
  --clr-border:   #DDD8D0;
  --clr-border-lt:#EAE6E0;
  --clr-text:     #000000;
  --clr-text-mid: #6B6560;
  --clr-text-lt:  #9B9590;
  --clr-accent:   #3A7D6A;
  --clr-accent-bg:#E8F0ED;
  --radius:       10px;
  --radius-sm:    6px;
  --font-body:    'DM Sans', system-ui, sans-serif;

/*  --font-display: 'Fraunces', Georgia, serif;*/

  --font-display: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
	
body {
	font-family: var(--font-body);
	color: var(var(--clr-text));
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;


/*	background: #ffffff;
	margin: auto !important;
*/
    
}

/* ── Page Shell ── */
.page-header {
	max-width: 900px; margin: 0 auto;
	padding: 2.5rem 1.5rem 0;
	display:none;
}
.page-header h1 {
	font-family: var(--font-display);
	font-weight: 500; 
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	color: var(--clr-text);
}
.page-header .tagline {
	font-size: 0.875rem; 
	color: var(--clr-text-mid);
	margin-top: 0.25rem;
}

#app {
	max-width: 900px; 
	margin: 0rem auto 0.5rem;
	padding: 0 1.5rem;
/*	user-select: none;*/
}

/* ── Breadcrumb ── */
.breadcrumb {
	display: flex; 
	align-items: center; 
	min-height: 32px; 
	margin-bottom: 14px; 
	margin-top: 10px;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--medium);

/*gap: 4px;
*/

}
.crumb {

/*  font-size: 13px;*/ 

	font-weight: 500;
	color: var(--clr-accent);
	cursor: pointer; 
	padding: 3px 8px; 
	border-radius: var(--radius-sm);
	transition: background 0.15s;
	
/*	text-decoration: none;
*/
    
    
}
.crumb:hover { background: var(--clr-accent-bg); }

.crumb-sep { 
/*font-size: 12px; */
color: var(--clr-text-lt); }

.crumb-current {

/*  font-size: 13px; */

	font-weight: 600; 
	color: var(--clr-text);
	padding: 3px 8px;
}

/* ── Stage ── */
#stage {
	position: relative;
	width: 100%;
	min-height: 480px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--clr-surface);
	border: 1px solid var(--clr-border);
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}

/* When showing results, the stage breaks open to natural height */
#stage.results-open {
	min-height: 0;
	height: auto;
	overflow: visible;

	background:#fff;
	border-color:transparent;
	box-shadow:none;
}




/* ── Category Buttons ── */
.cat-btn {
	border-radius: var(--radius);

/*	border: 1px solid var(--clr-border);
*/

/*	background: var(--clr-surface);
	background: linear-gradient(184deg, #69b742, #cef9ce);
*/
	color: var(--clr-text);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 14px;
	font-size: 1.3rem;
	font-weight: 900;
	cursor: pointer;
	display: flex; 
	align-items: center; 

/*justify-content: center;*/

	text-align: left; 

	padding: 10px 12px;
	transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
	line-height: 1.35;
	overflow: hidden;
	position: absolute;
}


.cat-btn:hover {
	background: var(--clr-bg);

	background:linear-gradient(185deg, #2b8a24, #92e791);

/*	border-color: var(--clr-text-lt);*/

	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}


.cat-btn .inner { 
/*
display:flex; 
flex-direction:column; 
align-items:center; 
*/

	gap:3px; 
	pointer-events:none;
	width:100%;
 }


.cat-btn .btn-name { 


	line-height: 1.1; 
	text-transform: lowercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


.cat-btn .btn-name .nameSpan { 
	max-width:76%;

}


.chevron {

	font-size: 2.3rem;
	line-height: 0.6;
	margin-right: 2%;
	letter-spacing: -0.4rem;
	border-radius: 50%;
	background: white;
        height: 26px;
	width: 26px;
	align-content: center;
	text-align: center;
	padding-right: 6px;
	padding-bottom: 4px;

	font-weight:300;

}


.count-badge { 

/*	display:none;*/
padding-top:5px;

	font-size: 11px; 
	font-weight: 400; 
	color: white; 
}

/* ── Level Label ── */

.level-label {
	position: absolute; 
	bottom: 10px; 
	right: 14px;
	font-size: 11px; 
	color: var(--clr-text-lt);
	pointer-events: none; 
	z-index: 5;
	display:none;
}

/* ── Overlay / Fragment Animation ── */
.expand-overlay {
	position: absolute; 
	border-radius: var(--radius);
	display: flex; 
	align-items: center; 
	justify-content: center;

	font-size: 1.5rem; 

	font-weight: 600; 
	font-family: var(--font-body);


	pointer-events: none; 
	z-index: 10; 
	color: #fff;
}
.frag-container { 
	position: absolute; 
	inset: 0; 
	pointer-events: none; 
	z-index: 11; 
}

.frag {
	position: absolute; 
	border-radius: var(--radius-sm);
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	justify-content: center;


	font-size: 20px; 

	font-weight: 500; 
	color: #fff;


	pointer-events: none; 
	text-align: center; 
	padding: 4px 6px;
	line-height: 1.25; 
	overflow: hidden;
}

/* ── Results / Company Cards ── */
.results-list {

	position: relative;

	padding: 16px 18px;
	padding: 6px 5px;
}


.results-header {
	font-size: 11px; 
	font-weight: 600; 
	color: var(--clr-text-lt);
	text-transform: uppercase; 
	letter-spacing: 0.08em;
	margin-bottom: 12px; 
	padding: 0 2px;
}



.company-scores {
	display: flex; 
	gap: 6px; 
	flex-wrap: wrap; 
	margin-bottom: 10px;
}

.score-pill {
	font-size: 11px; 
	font-weight: 600;
	padding: 3px 10px; 
	border-radius: 100px;
	background: var(--clr-bg); 
	color: var(--clr-text-mid);

/*  white-space: nowrap;*/

}
.company-products {
	font-size: 0.8125rem; 
	color: var(--clr-text-lt);
	line-height: 1.5;
}
.company-products strong {
	color: var(--clr-text-mid); 
	font-weight: 600;
}




/* ── Loading Spinner ── */
.loading-wrap {
	position: absolute; 
	inset: 0;
	display: flex; 
	align-items: center; 
	justify-content: center;
	background: var(--clr-surface);
	z-index: 20;
}
.spinner {
	width: 28px; 
	height: 28px;
	border: 3px solid var(--clr-border);
	border-top-color: var(--clr-accent);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── SSR Fallback ──
   Server-rendered content below the JS app. Visible to crawlers and
   no-JS users. Hidden when JS loads via .js-active class on <body>. */

#ssr-fallback {
	max-width: 900px; 
	margin: 0 auto;
	padding: 0 1.5rem 3rem;
}

#ssr-fallback .ssr-breadcrumb {
	display: flex; 
	align-items: center; 
	gap: 4px;
	flex-wrap: wrap; 
	margin-bottom: 16px;
}
#ssr-fallback .ssr-breadcrumb a {
	font-size: 13px; 
	font-weight: 500; 
	color: var(--clr-accent);
/*
text-decoration: none; 
*/

padding: 3px 8px; 
	border-radius: var(--radius-sm);
}
#ssr-fallback .ssr-breadcrumb a:hover { background: var(--clr-accent-bg); }
#ssr-fallback .ssr-breadcrumb .sep { font-size: 12px; color: var(--clr-text-lt); }
#ssr-fallback .ssr-breadcrumb .current {
	font-size: 13px; 
	font-weight: 600; 
	color: var(--clr-text); 
	padding: 3px 8px;
}
#ssr-fallback h2 {
	font-family: var(--font-display);
	font-weight: 500; 
	font-size: 1.3rem;
	margin-bottom: 12px;
}
#ssr-fallback .ssr-cat-list { list-style: none; padding: 0; }
#ssr-fallback .ssr-cat-list li { margin-bottom: 6px; }
#ssr-fallback .ssr-cat-list a {
	display: inline-block;
	font-size: 14px; 
	font-weight: 500; 
	color: var(--clr-accent);
/*
text-decoration: none; 
*/
padding: 6px 12px;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-sm);
	transition: background 0.15s, border-color 0.15s;
}

#ssr-fallback .ssr-cat-list a:hover {
	background: var(--clr-accent-bg);
	border-color: var(--clr-accent);
}

/* When JS is active, hide the SSR fallback */
.js-active #ssr-fallback { display: none; }

/* ── Responsive ── */
@media (max-width: 782px) {


	.page-header { padding: 1.5rem 1rem 0; }
	#app { padding: 0 1rem; }
	#stage { min-height: 400px; }

	.results-list { 
		padding: 12px 12px; 
        	padding: 0px 5px;
	}

/*
	.company-card { padding: 12px 14px; }
*/

	.company-scores { gap: 4px; }
	#ssr-fallback { padding: 0 1rem 3rem; }


	.cat-btn {
		padding: 7px 8px;
		font-size:0.9rem;

	}


	.cat-btn .btn-name {
		line-height: 1.1;
		align-items: center;
	}


	.chevron { 

		font-size:2.2rem;
		line-height: 0.6;
		margin-right: max(2%, 11px);
		height: 24px;
		width: 24px;
		padding-right: 5px;
	}




}


@media (max-width: 480px) {

	.chevron { 

		margin-right: max(2%, 8px);
	}
}




/* ═══════════════════════════════════════════════════════════
   COMPANY CARD — Results View
   ═══════════════════════════════════════════════════════════ */

.company-card {

	font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	
	border-radius: var(--radius);
	border: 1px solid var(--ethecoGreen);
	background: #fff;

	background: #f2f2f2;

	padding: 24px 28px;
	margin-bottom: 16px;
	transition: border-color 0.15s;
	line-height: 1.2;

}
.company-card:hover { border-color: var(--clr-text-lt); }

/* Desktop: card uses grid to place products box beside info */




@media (min-width: 783px) {
	.company-card {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
		gap: 20px;
	}

	.card-top {
		grid-column: 1;
		grid-row: 1;
	}

	.card-products {
		grid-column: 1;
		grid-row: 2;
		align-self: stretch;
	}

	.card-cosmos {
		grid-column: 2;
		grid-row: 1 / -1;
	}

    .card-products {
        min-height: 0;          /* lets cosmos define row height, not content */
        overflow-y: auto;

/*        max-height:50%;*/

    }


}


    .card-products::-webkit-scrollbar {
        width: 5px;
    }
    .card-products::-webkit-scrollbar-track {
        background: transparent;
    }
    .card-products::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.45);
        border-radius: 10px;
    }
    .card-products::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.7);
    }


/* ── Top section: name, summary, website ── */

.card-top {
	margin-bottom: 20px;
}



.company-name {

/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
*/

font-size: 1.4rem;
	font-weight: 700;
	color: var(--ethecoGreen);
	margin-bottom: 8px;
	line-height: 1.2;
}
.company-name a {
	color: var(--ethecoGreen);
/*
    text-decoration: none;
*/

transition: color 0.15s;
}
.company-name a:hover { color: #006B33; }

.affiliate_programme {
	text-align:right;
}

.affiliate_programme img {

	cursor: pointer; 
	max-width:159px;
	width:40%;
}

@media (max-width: 600px) {

	.affiliate_programme img {

		width:40%;
	}
}

.company-summary {

/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

*/
font-size: 0.875rem; 
	font-size: 1rem;
	color: var(--clr-text-mid);
	margin-bottom: 12px;
	line-height: 1.25;
}

.company-website {
/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
*/

    font-size: 1.15rem;
	font-weight: 700;
	overflow-wrap:anywhere;

}
.company-website a {
	color: var(--ethecoGreen);
/*	text-decoration: none;
*/

transition: color 0.15s;
}
.company-website a:hover { color: #006B33; }

/* ── Products & Services green box ── */
.card-products {
	background: var(--ethecoGreen);
	border-radius: var(--radius);
	padding: 16px 18px;
	color: #fff;
	display: flex;
	flex-direction: column;
	margin-bottom: 0;
	
	
	        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.45) transparent;


}
.card-products-heading {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 8px;
}


/* Products & Services chip/pill links */
.card-products-text {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.card-products-text a {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 0.88rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}


.card-products-text a:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.55);
}


@media (max-width: 782px) {
    
    .card-products {
        max-height:75vh;
        overflow-y:scroll;

    }
        
    .card-products-text a {
        font-size: 0.95rem;
    }
}


/*
.card-products a {
    color:white;
}


*/

.card-products-text {
/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;


font-size: 0.9rem;
	opacity: 1;
*/
    
}



/* ── Four P's grid ── */
.card-scores {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-columns: repeat(1fr, 1fr);
	gap: 12px;
/*margin-bottom: 20px;*/

}



.score-box {
	border: 2px solid var(--ethecoGreen);
	border-radius: var(--radius);
	padding: 14px 12px;

	padding: 11px 7px;

	background: #fff;

	min-width: 0;
}


.score-box-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.score-box-icon {
	width: 29px;
	height: 29px;
	display: flex;
	align-items: center;
	border-radius: 50%;
	background: var(--ethecoGreen);
	justify-content: center;
	flex-shrink: 0;
}



.score-box-icon svg, .score-box-icon img {
	display: block;
	width:28px;
}

.score-box-icon img { /* only for SVG !!! */
	padding-left: 1px;
}


.score-box-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ethecoGreen);
}

.score-box-text {
/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
*/


	font-size: 0.81rem;
	color: black;
	text-wrap-style: auto;

}

/* ── Mobile: below 782px ── */
@media (max-width: 782px) {
	.company-card {	
		padding: 18px 16px;
		display: flex;
		flex-direction: column;
	}



	.card-top {
		margin-bottom: 14px;
	}


	.company-website {
		padding: 10px 0;
	}

	.card-scores {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		margin-bottom: 12px;
	}


	.score-box-text {

		padding: 0 0 0 4px;
	}

	.card-products {
		margin-top: 0;
	}
}



#backButton, .greenBtn {
	background:var(--ethecoGreen);
	color:#fff;
	border:none;
	border-radius:6px;
	padding:12px 20px;
	font-size:1.25rem;
	font-weight:600;
	cursor:pointer;
	white-space:nowrap;
	margin-bottom:40px;
}

#backButton:active {
	transform: scale(0.95);

}




/* ═══════════════════════════════════════════════════════════
   SEARCH AUTOCOMPLETE
   ═══════════════════════════════════════════════════════════ */
.search-wrap {
  position: relative;
  max-width: 360px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.search-field-wrap {
  display: flex;
  align-items: center;
  border: 2px solid var(--clr-border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s;
}
.search-field-wrap:focus-within {
  border-color: var(--ethecoGreen);
}
.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--medium, 1.05rem);
  color: var(--clr-text);
  background: transparent;
  min-width: 0;
}
.search-input::placeholder {
  color: #B0ACA8;
  font-weight: 400;
}
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  border: none;
  background: var(--ethecoGreen);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}

.search-btn img {
	width:100%;
}

.search-btn:disabled {
  background: #B0ACA8;
  cursor: default;
}
.search-btn:not(:disabled):hover {
  background: #007a3a;
}
.search-btn:not(:disabled):active {
  transform: scale(0.95);
}
.search-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 2px solid var(--ethecoGreen);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 260px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.search-dropdown.is-open {
  display: block;
}
.search-dropdown li {
  padding: 10px 14px;
  font-size: var(--wp--preset--font-size--medium, 1.05rem);
  cursor: pointer;
  transition: background 0.1s;
}
.search-dropdown li:hover,
.search-dropdown li.is-active {
  background: #E8F5EE;
}
.search-dropdown li mark {
  background: none;
  color: var(--ethecoGreen);
  font-weight: 700;
}

@media (max-width: 782px) {
  .search-wrap {
    max-width: 100%;
  }
}




:root {
  --popover-bg: #f3f3f3;

  --text-colour: #111111;

  --border-radius: 14px;

  --header-height: 68px;
}


/* Full-screen backdrop */
.info-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: grid;
  place-items: center;

  padding: 1rem;
  background: rgba(0, 0, 0, 0.15);


}

/* Hidden state handled by [hidden], but this helps older styling expectations */
.info-overlay[hidden] {
  display: none;
}

/* Popover panel */
.info-popover {


/*  position: relative;

  box-sizing: border-box;

  width: min(98vw, 1200px);
  max-height: 90vh;
  overflow: auto;

*/




      /*
       * CENTRING METHOD:
       * fixed + top/left 50% positions the top-left corner at the mid-point.
       * translate(-50%, -50%) then pulls it back by half its own width/height,
       * landing it perfectly centred regardless of its dimensions.
       * This works on every modern browser and needs no flex/grid parent.
       */
      position: fixed;
      top:  56%;
      left: 50%;
      transform: translate(-50%, -50%);
 
      /* ── sizing ── */
      width: 75%;                     /* 75% of viewport on desktop         */
      max-width: 1200px;              /* 75% of a 1600px body ≈ 1200px      */
      max-height: 90vh;               /* never taller than the viewport     */
      overflow-y: auto;               /* scroll if content is tall          */
 


border: 2px solid var(--ethecoGreen);
  
border-radius: var(--border-radius);
  
/* box-sizing: border-box; */



  
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10);



/*  background: #ffffff;
  color: #111111;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.28);

  padding: 2rem 1.5rem 1.5rem;

*/





}






.info-popover__header {
position: relative;
display: flex;
align-items: center;
min-height: var(--header-height);

background: var(--ethecoGreen);
padding: 10px 56px 10px 16px;
}

/* Logo block */
.info-popover__logo {
flex: 0 0 auto;
/*
width: 40px;
height: 40px;
*/

margin-right: 16px;

display: flex;
align-items: center;
justify-content: center;
}

.info-popover__logo img {
display: block;
max-width: 50px;
width: auto;
height: auto;
}

/* Title */
.info-popover__title {
margin: 0;
flex: 1 1 auto;

color: #ffffff;
text-align: center;
font-family: "Poppins", Arial, sans-serif;
font-size: clamp(1.25rem, 2vw, 1.9rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: 0;
padding-right: 8px;
}

/* Close button */
.info-popover__close {
position: absolute;
top: 11px;
right: 11px;

width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: #ffffff;
color: var(--ethecoGreen);

display: flex;
align-items: center;
justify-content: center;

cursor: pointer;
padding: 0;

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.info-popover__close span {
display: block;
	font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 24px;
line-height: 1;
font-weight: 700;
transform: translateY(-2px);
}

.info-popover__close:hover {
background: #f7f7f7;
}

.info-popover__close:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}

/* Content */
.info-popover__content {
padding: 48px 58px 44px;
padding-bottom: 5px;
color: var(--text-colour);

/*
font-family: 'Helvetica-Light', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
*/

font-weight: 300;
font-size: 1rem;
line-height: 1.14;
background: #ffffff;
  

}

.info-popover__content p {
margin: 0 0 20px;
}

.info-popover__content p:last-child {
margin-bottom: 0;
}

/* Strong emphasis line */
.info-popover__emphasis {
font-weight: 700;
font-size: 1rem;
margin-bottom: 2px;
}


/* Footer link line */
.info-popover__footer-link {
margin-top: 28px;
}

.info-popover__footer-link a {
color: var(--ethecoGreen);
/* text-decoration: none; */
font-style: italic;
font-weight: 300;
}

/* Brand word */
.brand-word {
color: var(--ethecoGreen);
font-family: "Poppins", Arial, sans-serif;
font-weight: 700;
font-style: normal;
}

.info-popover__footer-link a:hover,
.info-popover__footer-link a:focus {
text-decoration: underline;
}

/* Rating Explained popover: pillar rows */
.info-popover__pillar {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 0;
}
.info-popover__pillar-icon {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--ethecoGreen);
flex-shrink: 0;
}
.info-popover__pillar p {
margin: 0;
font-size: inherit;
line-height: 1.4;
}
.info-popover__pillar .brand-word {
font-weight: 800;
color: var(--ethecoGreen);
}

/* Rating Explained: colour dots */
.info-popover__colour-list {
list-style: none;
margin: 8px 0 12px;
padding: 0;
}
.info-popover__colour-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
font-size: inherit;
}
.info-popover__dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.info-popover__dot--green { background: var(--ethecoGreen); }
.info-popover__dot--amber { background: var(--ethecoAmber); }
.info-popover__dot--red   { background: var(--ethecoRed); }

/* ─── MOBILE BREAKPOINT ─────────────────────────────────────────────── */

@media (max-width: 782px) {
.info-overlay {
padding: 8px;
}

.info-popover {
width: 94vw;
max-height: 96vh;
}

.info-popover__header {
min-height: 60px;
padding: 10px 50px 10px 12px;
}

.info-popover__logo {
/*
width: 34px;
height: 34px;
*/
margin-right: 10px;
}

.info-popover__title {
font-size: 1.15rem;
line-height: 1.15;
text-align: center;
}

.info-popover__close {
width: 26px;
height: 26px;
top: 9px;
right: 9px;
}

.info-popover__close span {
font-size: 22px;
transform: translateY(-2px);
}


.info-popover__content {
padding: 26px 18px 24px;
font-size: 0.98rem;
line-height: 1.18;
}

.info-popover__content p {
margin-bottom: 18px;
}

.info-popover__footer-link {
margin-top: 22px;
}
}








/* Close button */

/*

.info-popover__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;

  border: 0;
  background: transparent;
  color: #333;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;

  padding: 0.25rem 0.5rem;
}

.info-popover__close:hover,
.info-popover__close:focus {
  color: #000;
}

.info-popover__content {
  padding-top: 0.5rem;
}

*/



/* Optional: prevent background scrolling while open */

body.info-popover {
  overflow: hidden;
}




#popoverContentRating {
    padding-top: 8px;
}
#popoverContentRating p {
    margin-bottom: 6px;
}
#popoverContentRating .info-popover__pillar {
    padding: 2px 0;
}
#popoverContentRating .info-popover__pillar-icon {
    width: 26px;
    height: 26px;
}
#popoverContentRating .info-popover__colour-list {
    margin: 4px 0 8px;
}
#popoverContentRating .info-popover__colour-list li {
    padding: 1px 0;
}





/* ═══════════════════════════════════════════════════════════
   COSMOS SCORE GRAPHIC (etheco card)
   ═══════════════════════════════════════════════════════════ */
.card-cosmos {
    display: flex;
    justify-content: center;
    padding: 0px 0;
}
.etheco-card {
    width: min(100%, 480px);
    overflow: hidden;
    border: 1px solid var(--ethecoGreen);
    border-radius: 15px;
    background: #ffffff;
    container-type: inline-size;
    container-name: etheco-card;
}
.etheco-card__header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(72px, 18cqi, 106px);
    padding: clamp(14px, 4cqi, 24px) clamp(16px, 5cqi, 30px);
    color: #ffffff;
    background: var(--ethecoGreen);
    text-align: center;
}
.etheco-card__title {
    margin: 0;
    font-family: 'Poppins-SemiBold','Poppins', sans-serif;
    font-size: clamp(1.20rem, 8cqi, 2.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.etheco-card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(16px, 4.5cqi, 28px) clamp(14px, 5cqi, 28px) clamp(18px, 5cqi, 28px);
}
.etheco-display {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.02;
}
.etheco-display__label {
    position: absolute;
    z-index: 1;
    margin: 0;
    color: var(--ethecoGreen);
    font-family: 'Poppins-SemiBold','Poppins', sans-serif;
    font-size: clamp(1.15rem, 7.2cqi, 2.45rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    pointer-events: none;
}
.etheco-display__label--people      { top: 0; left: 0; text-align: left; }
.etheco-display__label--planet      { top: 0; right: 0; text-align: right; }
.etheco-display__label--pocket      { bottom: 0; left: 0; text-align: left; }
.etheco-display__label--performance { right: 0; bottom: 0; max-width: 58%; text-align: right; }

.cosmos {
    --status-red: var(--ethecoRed);
    --status-amber: var(--ethecoAmber);
    --status-green: var(--ethecoGreen);
    --number-colour: #ffffff;
    --background-size: 58%;
    --orbit-size: 24%;
    --orbit-near: 23%;
    --orbit-far: 77%;
    position: absolute;
    z-index: 1;
    top: 6%; right: 4%; bottom: 9%; left: 4%;
    aspect-ratio: 1;
    isolation: isolate;
}
.cosmos__background {
    position: absolute; z-index: 1;
    top: 50%; left: 50%;
    width: var(--background-size); height: var(--background-size);
    display: block; object-fit: contain; object-position: center;
    transform: translate(-50%, -50%);
    pointer-events: none; user-select: none;
}
.cosmos__centre {
    position: absolute; z-index: 3;
    top: 49%; left: 49%;
    display: grid; place-items: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cosmos__number {
    display: block;
    color: var(--number-colour);
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.25rem, 17cqi, 6.75rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.07em;
    -webkit-text-stroke: clamp(0px, 0.3cqi, 2px) transparent;
    paint-order: stroke fill;
}
.cosmos__orbit {
    position: absolute; z-index: 4;
    width: var(--orbit-size); aspect-ratio: 1;
    display: grid; place-items: center;
    margin: 0; padding: 0; overflow: visible;
    border: 0; border-radius: 50%;
    color: #ffffff;
    background: var(--status-green);
    cursor: pointer;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 rgb(0 0 0 / 0.0);
    transition: background-color 200ms ease, box-shadow 200ms ease, scale 200ms ease;
}
.cosmos__orbit--one   { top: var(--orbit-near); left: var(--orbit-near); }
.cosmos__orbit--two   { top: var(--orbit-near); left: var(--orbit-far); }
.cosmos__orbit--three { top: var(--orbit-far);  left: var(--orbit-near); }
.cosmos__orbit--four  { top: var(--orbit-far);  left: var(--orbit-far); }
.cosmos__orbit:hover  { z-index: 6; scale: 1.045; box-shadow: 0 6px 22px rgb(0 0 0 / 0.1); }
.cosmos__orbit:focus-visible { z-index: 7; outline: clamp(2px, 0.5cqi, 4px) solid #111; outline-offset: clamp(2px, 0.7cqi, 6px); }
.cosmos__icon {
    width: 92%; height: 92%;
    display: block; object-fit: contain; object-position: center;
    pointer-events: none; user-select: none;
}
.cosmos__orbit.status-red   { background-color: var(--ethecoRed); }
.cosmos__orbit.status-amber { background-color: var(--ethecoAmber); }
.cosmos__orbit.status-green { background-color: var(--ethecoGreen); }
.cosmos__tooltip {
    position: absolute; z-index: 2000;
    left: 50%; bottom: calc(100% + 10px);
    min-width: max-content; padding: 7px 10px;
    border-radius: 6px;
    color: #fff; background: #161616;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.7rem, 2.8cqi, 0.95rem);
    font-weight: 600; line-height: 1.25;
    opacity: 0; visibility: hidden;
    transform: translateX(-50%) translateY(5px);
    pointer-events: none;
    transition: opacity 150ms ease, visibility 150ms ease, transform 150ms ease;
}
.cosmos__tooltip::after {
    content: ""; position: absolute; top: 100%; left: 50%;
    border: 5px solid transparent; border-top-color: #161616;
    transform: translateX(-50%);
}
.cosmos__orbit:hover .cosmos__tooltip,
.cosmos__orbit:focus-visible .cosmos__tooltip,

/*.cosmos__orbit:focus .cosmos__tooltip,
.cosmos__orbit:active .cosmos__tooltip,
*/

.cosmos__orbit.is-tooltip-open .cosmos__tooltip {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}




@media (hover: hover) and (pointer: fine) {
    .cosmos__orbit:hover .cosmos__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}


.etheco-card__footer {
    display: flex; justify-content: center;
    padding: clamp(4px, 1.5cqi, 10px) clamp(12px, 6cqi, 34px) clamp(18px, 5cqi, 28px);
}
.etheco-card__explanation-button {
    width: 100%;
    min-height: clamp(48px, 12cqi, 62px);
    display: inline-flex; align-items: center; justify-content: center;
    padding: clamp(9px, 2.8cqi, 14px) clamp(14px, 5cqi, 28px);
    border: 2px solid var(--ethecoGreen); border-radius: 11px;
    color: #fff; background: var(--ethecoGreen);
    font-family: 'Poppins-SemiBold','Poppins', sans-serif;
    font-size: clamp(1rem, 5.4cqi, 1.85rem);
    font-weight: 800; line-height: 1.1; letter-spacing: -0.025em;
    text-align: center; cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}


/*.etheco-card__explanation-button:hover {
    color: var(--ethecoGreen); background: #fff;
    box-shadow: 0 7px 18px rgb(0 146 69 / 0.18);
    transform: translateY(-1px);
}
.etheco-card__explanation-button:active { transform: translateY(0); }

.etheco-card__explanation-button:focus-visible { outline: 3px solid #111; outline-offset: 3px; }

*/


@media (max-width: 782px) {

    .cosmos__centre {
        top:49%;
    }
    .card-cosmos {
        padding: 10px 0;
    }
}



@container etheco-card (max-width: 360px) {
    .etheco-card__content { padding-right: 12px; padding-left: 12px; }
    .etheco-display__label { font-size: clamp(1rem, 7cqi, 1.6rem); }
    .etheco-display__label--performance { max-width: 62%; }
    .cosmos { top: 4%; right: 2%; bottom: 10%; left: 2%; }

/*    .cosmos__tooltip { display: none; }*/


}
@container etheco-card (max-width: 260px) {
    .etheco-display { aspect-ratio: 1 / 1.08; }
    .etheco-display__label { font-size: clamp(0.85rem, 7cqi, 1.1rem); }
    .etheco-card__explanation-button { font-size: clamp(0.85rem, 5.2cqi, 1rem); }
}
@media (prefers-reduced-motion: reduce) {
    .cosmos__orbit, .cosmos__tooltip, .etheco-card__explanation-button { transition: none; }
}