/* ==========================================================================
   0. GLOBAL TOKENS + RESET
   ========================================================================== */
:root{
  --tgs-teal-darkest:#0a1f1f;
  --tgs-teal-dark:#102b2b;
  --tgs-teal:#16403a;
  --tgs-green-bright:#2eaa4e;
  --tgs-green-bright-2:#34c259;
  --tgs-green-glow:#5fd97e;
  --tgs-green-deep:#1d7c36;
  --tgs-blue:#2581c5;
  --tgs-blue-2:#1968a5;
  --tgs-blue-deep:#0b4170;
  --tgs-blue-link:#1d6fb8;
  --tgs-gray-card:#e6e6e6;
  --tgs-line:#c8c8c8;
  --tgs-ink:#101820;
  --tgs-ink-soft:#3a4248;
  --tgs-orange:#e88a2c;
  --tgs-light-blue: #69b7ef;
}

body{
  font-family:'Lato', Arial, Helvetica, sans-serif;
  color:var(--tgs-ink);
  -webkit-font-smoothing:antialiased;
}

/* SiteOrigin / Uniform theme tightening: kill the auto-generated page title
   "Home Page" and the Edit link so our hero leads the page */
.page .entry-header,
.page .entry-footer{
	display:none !important
}
.page .entry-content{
	margin:0;
	padding:0;
	margin-top:35px;
}

/* Stop content area from constraining full-bleed sections */
#content .mt-container,
#primary,
/* #main{max-width:none;width:100%;padding:0;margin:0} */
.site-content{
	padding:0
}

/* Section helpers used inside each Custom HTML widget */
.tgs-container {
	max-width:1240px;
	margin:40px auto;
	padding:0 28px
}
.tgs-container h2 {
  font-family:'Lato', Arial, sans-serif;
  font-weight:800;
  letter-spacing:-.3px;
  line-height:1.15;
  margin:10px;
  color:var(--tgs-ink);
  text-align: center;
  font-size: 35px;
}
.tgs-container h3 {
  font-family:'Lato', Arial, sans-serif;
/*   font-weight:800; */
  letter-spacing:-.3px;
  line-height:1.15;
  margin:10px;
  color:var(--tgs-ink);
  text-align: center;
  font-size: 30px;
}

.tgs-container p {
    text-align: center;
}

.tgs-container.tgs-container-left p,
.tgs-container.tgs-container-left h2, 
.tgs-container.tgs-container-left h3{
    text-align: left;
}

.tgs-highlight {
    color: var(--tgs-light-blue) !important;
}

@media (max-width: 768px) {
    .tgs-container {
        margin: 0 auto;
    }
	.tgs-container h2 {
		font-size: 25px;
	}
	.tgs-container h3 {
		font-size: 20px;
	}
	.tgs-container.tgs-container-left p,
	.tgs-container.tgs-container-left h2, 
	.tgs-container.tgs-container-left h3,
	.tgs-container.tgs-container-left h4{
		text-align: center;
	}
}

/* ==========================================================================
   BUTTONS — glossy blue + glossy green pill
   Targets: .tgs-btn-blue  .tgs-btn-green  .tgs-btn-green.tgs-btn-block
   ========================================================================== */
.tgs-btn-blue,
.tgs-btn-green {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  color:#fff !important;
  font-size:16px;
  text-decoration:none;
  transition:transform .1s, filter .1s;
  cursor:pointer;
  text-align:center;
  line-height:1.2;
  border:1px solid transparent;
}

.tgs-btn-green {
  background:linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%);
  border-color:#167a30;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -8px 14px rgba(20,90,40,.35),
    0 4px 10px rgba(0,0,0,.18);
}

.tgs-btn-blue {
  background:linear-gradient(180deg, #4aa3e8 0%, #2581c5 50%, #1968a5 100%);
  border-color:#0e3f6b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(11,65,112,.45),
    0 4px 10px rgba(0,0,0,.25);
}

.tgs-btn-blue:hover, .tgs-btn-green:hover {filter:brightness(1.08);transform:translateY(-1px);color:#fff !important}
.tgs-btn-blue:active, .tgs-btn-green:active{transform:translateY(1px)}

/* <div class="center-btn"><a class="center-btn"></a>  */
.center-btn {
    display: flex;
    flex-direction: column; /* stack items instead of sitting side by side */
    align-items: center;    /* horizontal centering */
	padding: 10px;
}

.tgs-btn-full-width { width:100% !important; }
.tgs-btn-box { border-radius: 15px; }
@media (max-width: 768px) {
    .tgs-btn-green,  .tgs-btn-blue{
		font-size: 12px;
		margin-left: 10px;
        margin-right: 10px;
/* 		width:100%; */
	}
}


.tgs-accred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tgs-accred-list li {
  display: flex;
/*   align-items: center; */
  gap: 16px;
}

.tgs-accred-list li::before {
  content: "✓";
  width: clamp(24px, 5vw, 32px);
  height: clamp(24px, 5vw, 32px);
  border-radius: 50%;
  background: #2eaa4e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 3vw, 24px);
  font-weight: bold;
  flex-shrink: 0;
}

/* Horizontal variant */
.tgs-accred-list.tgs-accred-list-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 16px;
  column-gap: 100px;
  margin: 57px;
}

/* Horizontal variant — mobile: 2x2 grid */
@media (max-width: 768px) {
  .tgs-accred-list.tgs-accred-list-horizontal {
    grid-template-columns: repeat(2, 1fr);
    justify-content: start;
    column-gap: 30px;
    row-gap: 20px;
  }
}

.tgs-text-center {
  text-align: center;
}

/* ===== Reusable text + image row ===== */
.tgs-split {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.tgs-split__text {
    flex: 1 1 60%;
}

.tgs-split__media {
    flex: 1 1 40%;
    text-align: center;
}

.tgs-split__media img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

.tgs-split p {
    line-height: 1.6;
    margin: 0 0 20px;
}

/* Image on the LEFT, text on the right */
.tgs-split--reverse {
    flex-direction: row-reverse;
}

/* Optional: centre the text (like your screenshot) */
.tgs-split--center .tgs-split__text {
    text-align: center;
}

/* Mobile: always stack, image on top */
@media (max-width: 768px) {
    .tgs-split,
    .tgs-split--reverse {
        flex-direction: column;
        gap: 25px;
    }

    .tgs-split__media {
        order: -1; /* remove this line if you want text first on mobile */
    }
}

/* ==========================================================================
   HOME PAGE — STATS
   ========================================================================== */
/* =========================================================
   HOME BANNER (row class: tgs-hero-banner)
   ========================================================= */

.tgs-hero-banner .panel-grid-cell { padding: 0 !important; }
.tgs-hero-banner .so-panel { margin: 0 !important; }
.tgs-hero-banner .textwidget { margin: 0; }

/* Banner box, always the same shape as the image */
.tgs-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 1900 / 400;
    background: #1f3035 url('/wp-content/uploads/2026/10/TGS-Home-Banner-1900x400-1.png') no-repeat center top / 100% auto;
}

/* Desktop: buttons on the banner */
.tgs-hero .tgs-hero__buttons {
    position: absolute;
    left: 16.2%;  /* horizontal position */
    top: 68%;     /* vertical position */
    display: flex;
    gap: 1.6vw;
    flex-wrap: nowrap;
}

/* Glossy blue button */
.tgs-btn-blue {
    display: inline-block;
    padding: 0.65em 1.6em;
    font-size: clamp(12px, 1.05vw, 20px);
    line-height: 1.3;
    white-space: nowrap;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    background: linear-gradient(to bottom, #3aa9f0 0%, #0a86cf 45%, #0572b5 100%);
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 0.8em;
    box-shadow: 0 0 10px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.tgs-btn-blue:hover,
.tgs-btn-blue:focus {
    background: linear-gradient(to bottom, #2b9ae0 0%, #0877ba 45%, #04629c 100%);
    box-shadow: 0 0 14px rgba(255, 255, 255, .5), inset 0 1px 0 rgba(255, 255, 255, .4);
    transform: translateY(-1px);
}

/* Tablet & mobile: image on top, buttons below (no background, side by side) */
@media (max-width: 900px) {
    .tgs-hero {
        aspect-ratio: auto;
        padding-top: 21.05%; /* = image height (400 / 1900) */
        background: url('/wp-content/uploads/2026/05/TGS-Home-Banner.png') no-repeat center top / 100% auto;
    }

    .tgs-hero .tgs-hero__buttons {
        position: static;
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 16px 12px 0;
    }

    .tgs-hero .tgs-btn-blue {
        flex: 1 1 0;           /* two equal-width columns */
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: normal;   /* allow text to wrap on small phones */
        font-size: 12px;
        padding: 10px 12px;
        border-color: rgba(0, 0, 0, .1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .4);
    }
}

/* Small phones: slightly smaller text so it fits */
@media (max-width: 400px) {
    .tgs-hero .tgs-btn-blue {
        font-size: 10px;
        padding: 9px 8px;
    }
}


@media (max-width: 768px) {
    #home-section-1 .tgs-btn-green {
        width: 80%;
    }
}

.tgs-stats-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  text-align:center;
}

.tgs-stat-num {
  font-family:'Lato', sans-serif;
  font-weight:900;
  font-size:clamp(40px, 5vw, 60px);
  color:var(--tgs-blue-link);
  line-height:1;
  letter-spacing:-1px;
}
.tgs-stat-label {
  margin-top:10px;
  font-size:16px;
  font-weight:700;
  color:var(--tgs-ink);
}
.tgs-stat-icon {
  margin:24px auto 0;
  width:96px;height:96px;
  background:#0c1115;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
}
.tgs-stat-icon svg{width:54px;height:54px;fill:#fff}
.tgs-stat-icon.tgs-stat-icon-wide{
  background:transparent;
  border-radius:0;
  width:auto;height:auto;
}
.tgs-stat-icon.tgs-stat-icon-wide svg{
  width:120px;height:60px;fill:#0c1115;
}
.tgs-stat-pulse{
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  background:#37b86b;
  margin-right:8px;
  vertical-align:middle;
  box-shadow:0 0 0 0 rgba(55,184,107,.6);
  animation:tgs-pulse 1.8s infinite;
}
@keyframes tgs-pulse{
  0%  {box-shadow:0 0 0 0 rgba(55,184,107,.55)}
  70% {box-shadow:0 0 0 12px rgba(55,184,107,0)}
  100%{box-shadow:0 0 0 0 rgba(55,184,107,0)}
}

@media (max-width:1000px){
  .tgs-stats-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   HOME PAGE — SUSTAINABILITY IN EVERY SOLUTION 
   ========================================================================== */
.tgs-services-grid{
   display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:36px 24px;
}
.tgs-card{
  position:relative;
  border:1.5px solid var(--tgs-green-bright);
  border-radius:14px;
  background:var(--tgs-gray-card);
  display:flex;
  flex-direction:column;
  overflow:visible;
  height:100%;
  margin:10px
}

/* Default head — plain, no icon, truly centered */
.tgs-card-head{
  background:linear-gradient(180deg, #3a98d8 0%, #2581c5 50%, #1965a8 100%);
  color:#fff;
  border-radius:12px 12px 0 0;
  padding:22px 22px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Lato', sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.15;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -2px 6px rgba(0,0,0,.18);
  text-align:center;
}

/* Home page only: reserve equal left/right clearance for the icon
   so the title still centers on the card, not just in the box */
.tgs-card.tgs-card-has-icon .tgs-card-head{
  padding:22px 74px;
}

.tgs-card-body{
  padding:24px 22px 26px;
  text-align:center;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height: 159px;
}

.tgs-card-body .tgs-btn-green {
	align-self:center;
	margin-top:auto;
}

/* Circular medal icon — home page only, top-left corner */
.tgs-card-icon{
  position:absolute;
  top:-5px;
  left:-37px;
  width:100px;
  height:100px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6da872 0%, #2e6e3a 55%, #1a4424 100%);
  border:3px solid #173b1f;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.35),
    inset 0 2px 4px rgba(255,255,255,.2),
    0 4px 8px rgba(0,0,0,.25);
  display:grid;
  place-items:center;
  color:#d4e9d0;
  overflow:hidden;
  z-index:2;
}
.tgs-card-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
}
.tgs-card-icon.tgs-placeholder::after{
  content:"icon";
  font-family:ui-monospace, Menlo, monospace;
  font-size:10px;
  letter-spacing:.5px;
  color:#dfe9d9;
}

#home-section-2 .tgs-btn-green {
	padding: 6px 19px;
}

@media (max-width:1000px){
  .tgs-services-grid{
    grid-template-columns:repeat(2, 1fr);
	padding: 25px;
  }
}
@media (max-width:640px){
  .tgs-services-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  .tgs-card-head{
    height:80px;
    padding:16px 22px;
  }

  .tgs-card-icon{
    width:85px;
    height:85px;
	left:-30px;
  }

  .tgs-card.tgs-card-has-icon .tgs-card-head{
    padding:16px 70px;
  }

  .tgs-card-body .tgs-btn-green{
    padding:10px;
	width: 100%;
  }
   #home-section-2 .tgs-card-body .tgs-btn-green {
        width: 75%;
	    padding:10px;
    }
}

/* ==========================================================================
   HOME PAGE — How The Greener Side will Support Your Business
   ========================================================================== */

.tgs-support-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  text-align:left;
}

.tgs-support-col{
  background:var(--tgs-gray-card);
  border:2px solid var(--tgs-green-bright);
  border-radius:18px;
  padding:34px 36px 30px;
  display:flex;
  flex-direction:column;
  min-height: 603px;
}

.tgs-support-col h3{
  text-align:center;
  font-size:32px;
  margin:0 0 24px;
  color:var(--tgs-ink);
}


.tgs-support-col .tgs-btn-blue{
  margin:auto auto 0;
/*   padding:18px 44px;
  font-size:17px; */
}

@media (max-width:1000px){
  .tgs-support-grid{
		grid-template-columns:1fr;
	    padding:15px;
	}
}

@media (max-width:768px){
	.tgs-support-col .tgs-btn-blue {
		padding: 10px;
        margin: 10px;
        width: 90%;
	}
}

/* ==========================================================================
   HOME PAGE - The Greener Side's Impact
   ========================================================================== */

.tgs-impact-content {
  background: #fff;
  border: 8px solid var(--tgs-green-bright);
  border-radius: 24px;
/*   padding: clamp(20px, 2vw, 28px); */
  display: grid;
  grid-template-columns: 2.5fr 0.8fr;
  gap: clamp(12px, 1.5vw, 18px);
  align-items: center;
  max-width: clamp(1000px, 95vw, 1240px);
/*   margin: clamp(40px, 8vw, 80px) auto; */
  overflow: visible;
  border-right: none;
  width: 100%;
}

.tgs-impact-left {
	padding-left: 10px;
}
.tgs-impact-left h3 {
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 900;
  color: var(--tgs-ink);
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  text-align: left;
  line-height: 1.2;
}

.tgs-impact-left h4 {
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 900;
  color: var(--tgs-ink);
  margin: clamp(10px, 1.2vw, 14px) 0 clamp(4px, 0.8vw, 6px);
  text-align: left;
}

.tgs-impact-left p {
  font-size: clamp(12px, 1.6vw, 14px);
  color: var(--tgs-ink-soft);
  line-height: 1.5;
  margin: 0 0 clamp(8px, 1vw, 12px);
  text-align: left;
}

.tgs-impact-left p:last-of-type {
  margin-bottom: 0;
}

.tgs-impact-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin-right: clamp(-136px, -8vw, -120px);
}

.tgs-impact-right img {
  width: 304px;
  height: auto;
  max-width: clamp(260px, 28vw, 340px);
  display: block;
  border-radius: 12px;
  margin-bottom: -12px;
  margin-top: -12px;
}

/* Tablet — stack to 1 column */
@media (max-width: 1100px) {
  .tgs-impact-content {
    grid-template-columns: 1fr;
    padding: clamp(18px, 2vw, 24px);
    gap: clamp(16px, 2vw, 22px);
    margin: clamp(30px, 5vw, 60px) clamp(12px, 4vw, 20px);
    overflow: hidden;
	border-right: 8px solid var(--tgs-green-bright);
	width: 96%;
  }

  .tgs-impact-right {
    margin-right: 0;
    justify-content: center;
  }

  .tgs-impact-right img {
    max-width: clamp(240px, 50vw, 300px);
  }
}

/* Mobile — single column with reduced padding */
@media (max-width: 768px) {
  .tgs-impact-content {
    border-radius: 20px;
    padding: clamp(16px, 2vw, 20px);
    gap: clamp(14px, 1.5vw, 18px);
	width:auto;
  }

  .tgs-impact-left h3 {
    margin-bottom: clamp(8px, 1vw, 12px);
  }

  .tgs-impact-right img {
    max-width: clamp(200px, 40vw, 260px);
  }

	.tgs-impact-content-1 {
		padding: 0px !important;
	}
	.tgs-impact-content-2 .textwidget {
		padding: 0px !important;
	}
	.tgs-join {
		padding-top: 0px;
		padding-bottom: 0px;
	}
}


/* ==========================================================================
   HOME PAGE - Keeping You Compliant Stay informed + link buttons
   ========================================================================== */
.tgs-stay-informed {
  margin:30px auto 18px;
  font-weight:900;
  font-size:18px;
  color:var(--tgs-ink);
  text-align:center;
}

.tgs-link-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width:1000px){
  .tgs-link-buttons{
    flex-direction: column;
  }
}

.tgs-stay-btn .tgs-btn-blue {
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width:768px){
	.tgs-stay-btn .tgs-btn-blue {
		font-size: 10px;
		width: 95%;
	}
}


/* ==========================================================================
   SERVICES PAGE - Discover Recycling Excellence
   ========================================================================== */

.tgs-servicelist{display:flex;flex-direction:column;gap:16px}
.tgs-servicerow{display:flex;align-items:center;gap:0}
.tgs-badge{
  flex:none;width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #6da872 0%, #2e6e3a 55%, #1a4424 100%);
  border:3px solid #173b1f;
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,.35),
    inset 0 2px 4px rgba(255,255,255,.2),
    0 4px 8px rgba(0,0,0,.25);
  display:grid;place-items:center;
  overflow:hidden;position:relative;z-index:2;
  margin-right:-30px;
}
.tgs-badge img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

.tgs-pillbtn{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 26px 16px 46px;border-radius:999px;
  background:linear-gradient(180deg, #3a98d8 0%, #2581c5 50%, #1965a8 100%);
  border:1px solid #0e3f6b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -6px 10px rgba(0,0,0,.15), 0 3px 8px rgba(0,0,0,.15);
  text-decoration:none;
  min-height:76px;
  cursor:pointer;
  transition:transform .1s, filter .1s, box-shadow .1s;
}
.tgs-pillbtn span{color:#fff !important;font-weight:900;font-size:17px;letter-spacing:.3px;text-transform:uppercase;line-height:1.2}
.tgs-pillbtn:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -6px 10px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.22);
}
.tgs-pillbtn:active{transform:translateY(1px);filter:brightness(1)}
.tgs-pill-arrow{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%);
  border:3px solid #fff;
  box-shadow:
    0 0 0 1px #167a30,
    inset 0 3px 5px rgba(255,255,255,.65),
    inset 0 -4px 6px rgba(0,0,0,.25),
    0 2px 6px rgba(0,0,0,.25);
  display:grid;place-items:center;color:#fff;
  transition:transform .15s;
}
.tgs-pillbtn:hover .tgs-pill-arrow{transform:translateX(3px)}
.tgs-pill-arrow svg{width:16px;height:16px}
.tgs-badge{transition:transform .15s}
.tgs-pillbtn:hover ~ .tgs-badge,
.tgs-servicerow:hover .tgs-badge{transform:scale(1.04)}

@media (max-width:1000px){
  .tgs-svc-main{grid-template-columns:1fr !important;gap:36px}
}
@media (max-width:520px){
  .tgs-pillbtn span{font-size:14px}
  .tgs-badge{width:60px;height:60px;margin-right:-22px}
  .tgs-pillbtn{padding:14px 18px 14px 34px;min-height:60px}
}


/* ==========================================================================
   ABOUT PAGE 
   ========================================================================== */

.tgs-mission-container {
    background: var(--tgs-gray-card) !important;
    border: 4px solid var(--tgs-green-bright) !important;
    border-radius: 18px !important;
    display: grid !important;
    gap: 20px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto 18px !important;
    padding: 0px !important;
    margin-left: 120px !important;
}

.tgs-mission-container > div:first-child {
  grid-column: 1;
  margin-left: -100px;
}

.tgs-mission-container > div:nth-child(2) {
  grid-column: 2;
}

.tgs-mission-container > div:last-child {
  grid-column: 2;
  padding: 20px;
}

.tgs-mission-container img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  /* object-fit: cover; */
  border: 4px solid var(--tgs-green-bright);
  display: block;
  margin: -5px auto;
}

.tgs-mission-container .tgs-mission-quote {
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tgs-ink);
  margin: 0 0 20px;
  border: none;
  padding: 0;
  text-align:center;
}

.tgs-mission-container .tgs-mission-quote p {
  margin: 0 0 20px;
}

.tgs-mission-container .tgs-mission-author {
  font-weight: 900;
  font-size: 15px;
  color: var(--tgs-ink-soft);
  margin: 0 0 28px;
  font-style: normal;
}

@media (max-width: 900px) {
  .tgs-mission-row { grid-template-columns: 1fr; text-align: center; }
	.tgs-mission-img {
		margin:10px !important;
	}
  .tgs-round-img img { margin: 0 auto; }
  .tgs-mission-container {
    grid-template-columns: 1fr !important;
    text-align: center;
	margin: 20px !important;
  }
  .tgs-mission-container > div:nth-child(2),
  .tgs-mission-container > div:last-child {
    grid-column: 1;
  }
  .tgs-mission-container img {
    margin: 0 auto;
  }
}

/* ----------------------------Commitments------------------------------------*/
.tgs-commitment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1240px;
  margin: 40px auto;
  padding: 0 28px;
}

.tgs-commitment {
  text-align: center;
}

.tgs-commitment-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
}

.tgs-commitment-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tgs-commitment-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px;
}

.tgs-commitment-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--tgs-ink-soft);
  margin: 0;
}

/* Tablet: 2 columns */
@media (max-width: 1000px) {
  .tgs-commitment-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 column */
@media (max-width: 640px) {
  .tgs-commitment-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------Our Services, Your Benefits------------------------------------*/
/* Image variant — same fixed size regardless of source image dimensions */
.tgs-card-img{
  width:100%;
  height:400px;
  overflow:hidden;
}
.tgs-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* CTA section */
.tgs-about {
    text-align: center;
}

/* Align buttons horizontally */
.tgs-about .tgs-link-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    margin-top: 50px;
}

/* Make both buttons equal width */
.tgs-about .tgs-link-buttons .tgs-btn-green,
.tgs-about .tgs-link-buttons .tgs-btn-blue {
    flex: 1;
    width: 0;
    padding: 28px 20px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 18px !important;
}

/* Stack buttons on smaller screens */
@media (max-width: 640px) {
    .tgs-about .tgs-link-buttons {
        flex-direction: column;
        gap: 15px;
        margin-top: 30px;
    }

    .tgs-about .tgs-link-buttons .tgs-btn-green,
    .tgs-about .tgs-link-buttons .tgs-btn-blue {
        flex: auto;
        width: 100%;
        padding: 18px 10px;
    }
}


/* ============================================================
   NEWS PAGE — category carousel redesign
   Everything scoped to #post-4073 (the News page) so it can
   never affect any other page on the site.
   ============================================================ */

/* 1. Center the three section headings (Custom HTML widgets) */
/* #post-4073 .textwidget.custom-html-widget h2{
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin:0 0 18px;
} */

/* 2. Carousel wrapper — add side padding so arrows have room to sit outside the cards */
#post-4073 .sow-post-carousel-wrapper{
  position:relative;
  padding:0 54px;
  margin-bottom:40px;
}

/* Collapse the plugin's default top title/nav bar — we reposition the arrows below */
#post-4073 .sow-carousel-title{
  height:0;
  overflow:visible;
}

/* 3. Arrows — circular buttons, vertically centered at the left/right edges */
#post-4073 .sow-carousel-navigation{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  transform:translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  z-index:6;
}
#post-4073 .sow-carousel-next,
#post-4073 .sow-carousel-previous{
  pointer-events:auto;
  position:static !important;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#2eaa4e; /* fallback, overridden per section below */
  display:flex;
  align-items:center;
  justify-content:center;
}
#post-4073 .sow-carousel-next::before,
#post-4073 .sow-carousel-previous::before{
  content:'';
  display:block;
  width:8px;
  height:8px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
}
#post-4073 .sow-carousel-next::before{ transform:rotate(45deg); margin-left:-2px; }
#post-4073 .sow-carousel-previous::before{ transform:rotate(-135deg); margin-left:2px; }

/* 4. Post card image */
#post-4073 .sow-carousel-item{ position:relative; }
#post-4073 .sow-carousel-thumbnail a{
  display:block;
  aspect-ratio:4/3;
  background-size:cover;
  background-position:center;
  border-radius:6px;
  border-top:4px solid #2eaa4e; /* overridden per section below */
}
#post-4073 .sow-carousel-thumbnail .overlay{ display:none; }

/* 5. Caption bar pulled up onto the bottom of the image.
   FIXED height (min-height) is what makes every card equal —
   without it, a 1-line title makes a short bar and a 3-line
   title makes a tall bar. With a fixed height + flex centering,
   short titles just sit centered in the same-size box. */
#post-4073 .sow-carousel-item-title{
  position:relative;
  z-index:2;
  margin-top:-60px;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  box-sizing:border-box;
  border-radius:0 0 6px 6px;
}
#post-4073 .sow-carousel-item-title a{
  display:block;
  width:100%;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  text-decoration:none;
}

/* ============================================================
   6. SECTION COLORS — targeted by ROW POSITION, not by a custom
   class (the SiteOrigin widgets don't reliably keep a manually
   added CSS class). The News page's rows are always in this
   fixed order inside .panel-layout:
     nth-of-type(1) = top banner
     nth-of-type(2) = Row 1  "The Greener Side News"  -> green
     nth-of-type(3) = Row 2  "Around The Industry"    -> blue
     nth-of-type(4) = Row 3  "Partner Successes"      -> dark
     nth-of-type(5) = CTA button row
   If you ever add/remove a row above these, just shift the
   numbers below to match the new position.
   ============================================================ */

#post-4073 .panel-layout > .panel-grid:nth-of-type(2) .sow-carousel-thumbnail a{ border-top-color:#2eaa4e; }
#post-4073 .panel-layout > .panel-grid:nth-of-type(2) .sow-carousel-item-title{ background:rgba(46,170,78,.92); }
#post-4073 .panel-layout > .panel-grid:nth-of-type(2) .sow-carousel-next,
#post-4073 .panel-layout > .panel-grid:nth-of-type(2) .sow-carousel-previous{ background:#2eaa4e; }

#post-4073 .panel-layout > .panel-grid:nth-of-type(3) .sow-carousel-thumbnail a{ border-top-color:#2581c5; }
#post-4073 .panel-layout > .panel-grid:nth-of-type(3) .sow-carousel-item-title{ background:rgba(37,129,197,.92); }
#post-4073 .panel-layout > .panel-grid:nth-of-type(3) .sow-carousel-next,
#post-4073 .panel-layout > .panel-grid:nth-of-type(3) .sow-carousel-previous{ background:#2581c5; }

#post-4073 .panel-layout > .panel-grid:nth-of-type(4) .sow-carousel-thumbnail a{ border-top-color:#1c2126; }
#post-4073 .panel-layout > .panel-grid:nth-of-type(4) .sow-carousel-item-title{ background:rgba(20,25,30,.9); }
#post-4073 .panel-layout > .panel-grid:nth-of-type(4) .sow-carousel-next,
#post-4073 .panel-layout > .panel-grid:nth-of-type(4) .sow-carousel-previous{ background:#1c2126; }

/* 6b. Arrow order — previous on the left, next on the right */
#post-4073 .sow-carousel-previous{ order: 1; }
#post-4073 .sow-carousel-next{ order: 2; }

/* ===== Single post: title ===== */
body.single-post .entry-header {
    display: block !important;
}

body.single-post .entry-header .entry-title {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.2;
    color: var(--tgs-ink);
    text-align: center;
    font-size: clamp(24px, 4vw, 35px); /* scales between 24px and 35px */
    margin: 50px 20px 30px;
}

/* ===== Single post: featured image ===== */
body.single-post .single-post-image figure {
    margin: 0 auto 30px;
    text-align: center;
}

body.single-post .single-post-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

/* ===== Tablet ===== */
@media (max-width: 991px) {
    body.single-post .entry-header .entry-title {
        margin: 35px 20px 25px;
    }

    body.single-post .entry-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
    body.single-post .entry-header .entry-title {
        font-size: 24px;
        line-height: 1.25;
        letter-spacing: 0;
        margin: 25px 15px 20px;
    }

    body.single-post .entry-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    body.single-post .single-post-image figure {
        margin: 0 auto 20px;
    }

    body.single-post .entry-content p {
        font-size: 15px;
        line-height: 1.7;
    }
}


/* --------------------------------------------------------------------------
   CONTACT PAGE
   -------------------------------------------------------------------------- */
.tgs-formcard{
	padding:0 28px
}
.tgs-formcard-head{
  background:linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%);
  color:#fff;text-align:center;font-weight:900;font-size:18px;letter-spacing:.4px;text-transform:uppercase;
  padding:14px 20px;border-radius:14px 14px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -4px 8px rgba(0,0,0,.15);
}
.tgs-formcard-body{
  padding:26px 26px 30px;background:var(--tgs-gray-card,#e6e6e6);
  border:1.5px solid var(--tgs-green-bright);border-top:0;border-radius:0 0 14px 14px;
}

/* Grid: 2 fields per row, based on this form's fixed field order —
   1 name 2 company 3 phone 4 email 5 member 6 interest 7 message 8 captcha 9 submit */
.tgs-formcard-body .wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.tgs-formcard-body .wpcf7-form p{margin:0;font-size:14px;font-weight:700;color:var(--tgs-ink)}
.tgs-formcard-body .wpcf7-form p:nth-of-type(7),
.tgs-formcard-body .wpcf7-form p:nth-of-type(8),
.tgs-formcard-body .wpcf7-form p:nth-of-type(9),
.tgs-formcard-body .wpcf7-form p:nth-of-type(10){grid-column:1 / -1}
.tgs-formcard-body .wpcf7-form p:nth-of-type(10){display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap}
.tgs-formcard-body .wpcf7-response-output{grid-column:1 / -1;width:100%}

.tgs-formcard-body .wpcf7-form-control-wrap{display:block}
.tgs-formcard-body .wpcf7-form-control.wpcf7-text,
.tgs-formcard-body .wpcf7-form-control.wpcf7-email,
.tgs-formcard-body .wpcf7-form-control.wpcf7-tel,
.tgs-formcard-body .wpcf7-form-control.wpcf7-textarea,
.tgs-formcard-body .wpcf7-form-control.wpcf7-captchar{
  width:100%;box-sizing:border-box;
  border:1px solid var(--tgs-line);border-radius:6px;
  padding:12px 14px;font-family:'Lato',Arial,sans-serif;font-size:14px;font-weight:400;
  background:#fff;color:var(--tgs-ink);
  transition:border-color .15s, box-shadow .15s;
}
.tgs-formcard-body .wpcf7-form-control.wpcf7-textarea{min-height:110px;resize:vertical}
.tgs-formcard-body .wpcf7-form-control.wpcf7-text:focus,
.tgs-formcard-body .wpcf7-form-control.wpcf7-email:focus,
.tgs-formcard-body .wpcf7-form-control.wpcf7-tel:focus,
.tgs-formcard-body .wpcf7-form-control.wpcf7-textarea:focus,
.tgs-formcard-body .wpcf7-form-control.wpcf7-captchar:focus{
  outline:none;border-color:var(--tgs-green-bright);
  box-shadow:0 0 0 3px rgba(46,170,78,.18);
}

/* radio groups — label heading above, options wrap in a row */
.tgs-formcard-body .wpcf7-form-control.wpcf7-radio{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:8px;font-weight:400}
.tgs-formcard-body .wpcf7-list-item{margin:0;font-weight:400}
.tgs-formcard-body .wpcf7-list-item label{display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:400;font-size:14px;white-space:nowrap}
.tgs-formcard-body .wpcf7-list-item input[type="radio"]{width:16px;height:16px;accent-color:var(--tgs-green-bright);margin:0}

/* captcha row: image + input inline */
.tgs-formcard-body img.wpcf7-captchac{display:block;margin-bottom:8px;border-radius:4px}

/* submit button — same glossy language as the rest of the site */
.tgs-formcard-body .wpcf7-form-control.wpcf7-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:250px;
/*   padding:14px 34px; */
  border-radius:999px;
  color:#fff;
  font-weight:700;
  font-size:16px;
  background:linear-gradient(180deg, #4aa3e8 0%, #2581c5 50%, #1968a5 100%);
  border:1px solid #0e3f6b;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -8px 14px rgba(11,65,112,.45),
    0 4px 10px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .1s, filter .1s;
}
.tgs-formcard-body .wpcf7-form-control.wpcf7-submit:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tgs-formcard-body .wpcf7-form-control.wpcf7-submit:active{transform:translateY(1px)}
.tgs-formcard-body .wpcf7-spinner{margin-left:10px}

.tgs-formcard-body .wpcf7-not-valid-tip{color:#c0392b;font-size:12px;font-weight:400;margin-top:4px;display:block}
.tgs-formcard-body .wpcf7-response-output{margin:16px 0 0;padding:10px 14px;border-radius:6px;font-size:14px;font-weight:400;text-align: center;}

/* hide CF7's own visually-hidden honeypot wrapper cleanly (theme already sets 0x0, this just prevents it adding a stray gap) */
.tgs-formcard-body p:has([id$="-wrapper"].honeypot-449-wrap){margin:0}

@media (max-width:700px){
  .tgs-formcard{padding:0 18px}
  .tgs-formcard-body{padding:20px 18px 24px}
  .tgs-formcard-body .wpcf7-form{grid-template-columns:1fr}
	.tgs-formcard{
		padding:0 18px
	}
}


/* --------------------------------------------------------------------------
   "Where To Find Us" (address + map)
   -------------------------------------------------------------------------- */
.tgs-contact-map{padding:60px 0 74px;background:#fff;text-align:center}
.tgs-contact-map .tgs-container h2{font-size:clamp(28px,3.2vw,36px);margin:0 0 16px}
.tgs-contact-map .tgs-map-lede{max-width:840px;margin:0 auto 32px;font-size:15px;color:var(--tgs-ink-soft);line-height:1.6}
.tgs-map-wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;
  max-width:900px;margin:0 auto;text-align:left;align-items:center;
}
.tgs-map-frame{
  border:1.5px solid var(--tgs-green-bright);border-radius:12px;overflow:hidden;
  aspect-ratio:4/3;
}
.tgs-map-frame iframe{width:100%;height:100%;border:0;display:block}
.tgs-map-address{font-size:15px;color:var(--tgs-ink);line-height:1.6}
.tgs-map-address strong{display:block;font-size:16px;margin-bottom:6px;color:var(--tgs-ink)}

@media (max-width:760px){
  .tgs-map-wrap{
	  grid-template-columns:1fr;
	  padding: 10px;
	}
  .tgs-map-address{
    width: 100% !important;
    height: auto !important;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   PRODUCTS PAGE
   -------------------------------------------------------------------------- */
.wc-block-cart-item__remove-link {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    background: none;
    border: none;
    cursor: pointer;
    color: #cc0000 !important;
    padding: 5px;
}

.wc-block-cart-item__remove-link svg {
    display: block !important;
    fill: #cc0000 !important;
    width: 20px;
    height: 20px;
}

.wc-block-cart-item__remove-link:hover svg {
    fill: #990000 !important;
}

.wc-block-components-quantity-selector button {
	color: #3d3d3d !important;
}

/* Cart icon in menu */
.cart-menu-item {
    display: flex !important;
    align-items: center;
	  margin-top: 20px;
}

.cart-icon-link {
    position: relative;
    display: flex !important;
    align-items: center;
    padding: 5px 10px !important;
    text-decoration: none;
}

.cart-icon-link svg {
    display: block;
    color: #333;
    transition: color 0.2s;
}

.cart-icon-link:hover svg {
    color: #2e7d32;
}

/* Badge showing item count */
.cart-count {
    position: absolute;
    top: -6px;
    right: 0px;
    background: #2e7d32;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#site-navigation ul li {
    margin-left: 20px;
}

/* 1. Center the product content and button */
ul.products li.product {
text-align: center !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

/* Ensure the link wrapping the image and title is centered */
ul.products li.product .woocommerce-LoopProduct-link {
display: block;
width: 100%;
}

/* 2. Style the "Add to basket" button */
ul.products li.product a.button.add_to_cart_button {
color: #fff;
    background-color: #32373c;
    border-radius: 9999px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 2px) calc(1.333em + 2px);

}

/* 3. Hover state for the button */
ul.products li.product a.button.add_to_cart_button:hover {
background-color: #000000 !important; / Slightly darker on hover /
transform: translateY(-2px); / Subtle lift effect */
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	color: #A0CE4E;
}

/* 4. Fix for the price display to ensure it stays centered */
ul.products li.product .price {
display: block;
margin-bottom: 10px;
}

.woocommerce-shop .entry-header .entry-title {
	display: none !important;
}

.entry-header {
    display: none;
}


/* ==========================================================================
   PRINT CONSUMABLE RECYCLING PAGE
   staging.greener-side.co.uk/services/print-consumable-recycling/

   WHY NOTHING CHANGED LAST TIME: every rule below only fires on an element
   that carries one of these tgs-pcr-* class names. CSS can't match
   something that isn't there -- pasting the stylesheet into Additional CSS
   does nothing on its own until the matching class exists somewhere in
   your page's HTML. This version is written so you ONLY need to edit the
   raw HTML inside your existing Custom HTML widgets (the text boxes you
   already paste into) -- no SiteOrigin "Row/Widget Advanced settings" UI
   required anywhere. See tgs-print-consumable-recycling-html-snippets.html
   for the exact copy-paste replacement for every widget.

   Quick sanity check before anything else: after pasting this into
   Appearance -> Customize -> Additional CSS, click PUBLISH (not just
   preview), then hard-refresh the live page (Ctrl/Cmd+Shift+R). If you
   right-click an element -> Inspect and don't see any of these tgs-pcr-*
   rules listed at all in the Styles panel, the CSS itself never went
   live -- if you DO see the rules listed but crossed out / not applying,
   that's the class-on-the-HTML issue this file is written around.
   ========================================================================== */


/* --------------------------------------------------------------------------
   2. CHECKLIST -- paragraph + two tick-list columns.

   Your current page has this split across 3 separate cells/widgets in one
   SiteOrigin row -- CSS can't grid-layout content that lives in 3 separate
   widgets. Easiest fix: delete/empty the 2nd and 3rd widgets in that row
   and paste ALL of it as ONE block into the first widget, wrapped exactly
   like this (see the snippets file for the full ready-to-paste version):

     <div class="tgs-pcr-checklist">
       <div> ...the 3 paragraphs... </div>
       <div class="tgs-pcr-list"><ul>...</ul></div>
       <div class="tgs-pcr-list"><ul>...</ul></div>
     </div>
   -------------------------------------------------------------------------- */
.tgs-pcr-checklist{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:20px 50px;
  align-items:start;
  max-width:1180px;
  margin:10px auto 0px;
  padding:0 28px;
}
.tgs-pcr-checklist p{
  font-size:15px;
  line-height:1.7;
  color:var(--tgs-ink);
  margin:0 0 16px;
}
.tgs-pcr-checklist p strong{font-weight:900}

.tgs-pcr-list ul{
  list-style:none;
  margin:0;
  padding:0;
}
.tgs-pcr-list li{
  position:relative;
  padding:0 0 29px 34px;
  font-size:15px;
  color:var(--tgs-ink);
  line-height:1.4;
}
.tgs-pcr-list li::before{
  /* Same green-circle + white tick used in .tgs-region .tick on the
     Services page, reproduced as a background image so no extra markup
     (no <span class="tick"><svg>) is needed inside each <li>. */
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  background-color:var(--tgs-green-bright);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
@media (max-width:900px){
  .tgs-pcr-checklist{grid-template-columns:1fr 1fr}
  .tgs-pcr-checklist > div:first-child{grid-column:1 / -1;text-align:center}
}
@media (max-width:600px){
  .tgs-pcr-checklist{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   3. "Why Recycle" HEADING -- wrap the whole widget's content (button +
   heading) in <div class="tgs-pcr-why-heading">.
   -------------------------------------------------------------------------- */
/* .tgs-pcr-why-heading{
  max-width:900px;
  margin:0 auto;
  padding:10px 28px 0;
  text-align:center;
}
.tgs-pcr-why-heading h2{
  font-size:clamp(28px, 3.6vw, 36px);
  margin:20px 0 0;
  color:var(--tgs-ink);
} */
.tgs-pcr-btn a {
	width: 50%;
    margin: 20px;
    border-radius: 10px;
}
@media (max-width:600px){
  .tgs-pcr-btn a {
		width: 100%;
	}
}
/* --------------------------------------------------------------------------
   4. "Why Recycle" 5-ICON ROW -- same story as the checklist: your page
   currently splits this across 5 separate widgets. Delete/empty widgets
   2-5 in that row and paste all 5 icons as ONE block into the first
   widget (full version in the snippets file):

     <div class="tgs-pcr-why-grid">
       <div class="tgs-pcr-why-item"><img ...><p>Title</p><p>Description</p></div>
       ... x5 ...
     </div>
   -------------------------------------------------------------------------- */
.tgs-pcr-why-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:30px 20px;
  max-width:1240px;
  margin:30px auto 60px;
  padding:0 28px;
}
.tgs-pcr-why-item{
  text-align:center;
  padding:0 8px;
}
.tgs-pcr-why-item img{
  width:120px;
  height:120px;
  border-radius:50%;
  background:var(--tgs-gray-card);
  border:1px solid var(--tgs-line);
  padding:26px;
  box-sizing:border-box;
  object-fit:contain;
  display:block;
  margin:0 auto 18px;
}
.tgs-pcr-why-item p:first-of-type{
  font-weight:900;
  font-size:16px;
  color:var(--tgs-blue-link);
  margin:0 0 10px;
}
.tgs-pcr-why-item p:last-of-type{
  font-size:14px;
  color:var(--tgs-ink-soft);
  line-height:1.55;
  margin:0;
}
@media (max-width:1000px){
  .tgs-pcr-why-grid{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:640px){
  .tgs-pcr-why-grid{grid-template-columns:repeat(2, 1fr)}
}

/* --------------------------------------------------------------------------
   5. DARK CTA BANNER -- "Make Your Print Consumable Waste Part Of The
   Solution". Not on your page yet -- see the snippets file for the full
   HTML block (wrap it in <div class="tgs-pcr-cta-dark"> when you add it).
   -------------------------------------------------------------------------- */
.tgs-pcr-cta-dark{
  position:relative;
  background:linear-gradient(180deg, #0d1f1f 0%, #142e2c 100%);
  color:#fff;
  padding:46px 28px 60px;
  text-align:center;
}
.tgs-pcr-cta-dark::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:14px;
  background:linear-gradient(180deg, var(--tgs-green-bright) 0%, var(--tgs-green-glow) 100%);
}
.tgs-pcr-cta-dark .tgs-container{max-width:980px}
.tgs-pcr-cta-dark h2{
  color:#fff;
  font-size:clamp(24px, 3vw, 30px);
  margin:0 0 18px;
}
.tgs-pcr-cta-dark p{
  color:#e4ece9;
  font-size:15.5px;
  line-height:1.6;
  margin:0 0 14px;
}
.tgs-pcr-cta-dark p.tgs-pcr-cta-bold{
  color:#fff;
  font-weight:700;
  margin:0 0 26px;
}
.tgs-pcr-cta-dark .tgs-btn-blue{margin:0 auto}

/* --------------------------------------------------------------------------
   6. "YOUR CONSUMABLES JOURNEY"

   Widget 1 ("What Happens..." intro) -- reuses .tgs-pcr-intro, see section 1.

   Widget 2 -- wrap its whole content in <div class="tgs-pcr-journey-first">
   Widget 3 & 4 -- wrap each in <div class="tgs-pcr-journey-item">
   On the inner <div> that wraps the <img> + text <div> in ALL THREE of
   those widgets, add class="tgs-journey-card" (full markup in the
   snippets file).
   -------------------------------------------------------------------------- */
.tgs-pcr-journey-first,
.tgs-pcr-journey-item{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
}

/* "Your Consumables Journey" -- the main section title (first widget only) */
.tgs-pcr-journey-first > h3:first-child{
  font-size:clamp(22px, 2.6vw, 28px);
  font-weight:900;
  color:var(--tgs-green-bright);
  text-align:left;
  margin:24px 0 20px;
}

/* "Can't Be Remanufactured?" / "...Or Reused?" -- small connector labels
   between cards, with a curved arrow icon after the text. Both labels sit
   at the same left edge as the cards below them -- no extra margin needed
   on either one (the old tgs-pcr-journey-last rule some example markup
   suggested doesn't match any class in your HTML, so it was never doing
   anything -- removed). */
.tgs-pcr-journey-item > h3:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:900;
  color:var(--tgs-green-bright);
  text-align:left;
  margin:22px 80px 16px;
}

.tgs-pcr-journey-last > h3 {
    margin: 20px 160px 20px !important;
}

.tgs-pcr-journey-item > h3:first-child::after{
  content:"";
  flex:none;
  width:70px;
  height:26px;
  background:url("/wp-content/uploads/2026/09/arrow.png") no-repeat center/contain;
}

/* --------------------------------------------------------------------------
   THE CARD -- fixed to actually bleed out over the left edge, like your
   third reference image and like .tgs-badge / .tgs-mission-container
   elsewhere on the site.

   What was wrong before: `display:grid; grid-template-columns:100px 1fr`
   put the <img> inside a 100px-wide grid TRACK while the image itself was
   set to 120px -- the browser squeezed it to fit the track, which is what
   turned the circle into an oval. Grid tracks are also always INSIDE the
   card's padding box, so the image could never actually break outside the
   card's left border that way, no matter the column width.

   The fix: take the image out of flow with position:absolute and pin it
   by pixels relative to the card itself (position:relative on the card).
   That's the only reliable way to make a fixed-size circle bleed outside
   a box's edge -- CSS has no "stick out by a %" primitive for this, so
   the overlap amount is expressed as a fixed offset tuned to look like
   ~35% of the circle sitting outside the card (adjust the two `px`
   values together -- image size and the negative "left" -- if you want
   more/less of it poking out).
   -------------------------------------------------------------------------- */
.tgs-journey-card{
  position: relative;
    background: var(--tgs-gray-card);
    border: 2px solid var(--tgs-green-bright);
    border-radius: 16px;
    padding: 20px 32px 22px 150px;
    margin: 0 0 15px;
    min-height: 141px;
    display: flex;
    align-items: center;
}
.tgs-journey-card > img{
  position:absolute;
  left:-45px;              /* ~35% of the 140px circle sits outside the card */
  top:50%;
  transform:translateY(-50%);
  width:145px;
  height:145px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid #fff;
  box-shadow:0 0 0 3px var(--tgs-green-bright), 0 4px 10px rgba(0,0,0,.2);
  background:var(--tgs-teal-dark);
  z-index:2;
}
.tgs-journey-card > div h3{
  font-size:19px;
  font-weight:900;
  color:var(--tgs-ink);
  margin:0 0 8px;
  text-align:left;
}
.tgs-journey-card > div p{
  font-size:14.5px;
  color:var(--tgs-ink);
  line-height:1.55;
  margin:0;
  text-align:left;
}
@media (max-width:700px){
  .tgs-journey-card{
    display:block;
    text-align:center;
    padding:66px 20px 24px;
  }
  .tgs-journey-card > img{
    left:50%;
    top:0;
    transform:translate(-50%, -45%);
    width:110px;
    height:110px;
  }
  .tgs-journey-card > div h3,
  .tgs-journey-card > div p{
    text-align:center;
  }
  .tgs-pcr-journey-first > h3:first-child,
  .tgs-pcr-journey-item > h3:first-child{
    justify-content:center;
    text-align:center;
    margin-bottom:56px;   /* extra clearance so the next card's circle,
                              which now pokes up above the card, doesn't
                              overlap this heading's text */
  }
}

.tgs-split-row{
  display:flex;
  align-items:center;
  gap:48px;
}

.tgs-split-text{
  flex:1 1 50%;
}

.tgs-split-text p{
  margin:0 0 24px;
  line-height:1.6;
  color:var(--tgs-ink, #222);
}
.tgs-split-text-left p {
	text-align:left !important;
}
.tgs-split-media{
  flex:1 1 50%;
}

.tgs-split-media img{
/*   width:100%; */
  height:auto;
  display:block;
  border-radius:14px;
  justify-self: center;
}

.tgs-btn-full-width{
  display:block;
  width:100%;
  text-align:center;
}

@media (max-width:768px){
  .tgs-split-row{
    flex-direction:column;
  }
}

/* --------------------------------------------------------------------------
   ACCREDITATIONS PAGE
   -------------------------------------------------------------------------- */

.tgs-accred-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 4vw, 40px) clamp(16px, 3vw, 30px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 28px) clamp(60px, 10vw, 80px);
}

.tgs-accred-benefit-card {
  padding: clamp(18px, 3vw, 24px);
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 4vw, 28px);
  align-items: flex-start;
  height: 100%;
}

.tgs-accred-benefit-icon {
  flex-shrink: 0;
  width: clamp(100px, 12vw, 120px);
  height: clamp(100px, 12vw, 120px);
/*   background: #1a2b1e; */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(48px, 8vw, 60px);
}

.tgs-accred-benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  display: block;
}

.tgs-accred-benefit-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.tgs-accred-benefit-title {
  font-weight: 900;
  font-size: clamp(16px, 2.5vw, 20px);
  color: var(--tgs-ink);
  margin: 0 0 6px;
  text-align: left;
}

.tgs-accred-benefit-subtitle {
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 700;
  color: var(--tgs-blue-link);
  margin: 0 0 10px;
  text-align: left;
}

.tgs-accred-benefit-desc {
  font-size: clamp(13px, 1.8vw, 15px);
  color: var(--tgs-ink);
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Tablet — single column */
@media (max-width: 1000px) {
  .tgs-accred-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile optimized — switch to column layout */
@media (max-width: 768px) {
  .tgs-accred-benefits-grid {
    grid-template-columns: 1fr;
    padding: 0 clamp(12px, 4vw, 20px) clamp(40px, 8vw, 60px);
    gap: clamp(16px, 3vw, 24px);
  }

  .tgs-accred-benefit-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(20px, 3vw, 28px);
    gap: clamp(12px, 2vw, 16px);
  }

  .tgs-accred-benefit-title,
  .tgs-accred-benefit-subtitle,
  .tgs-accred-benefit-desc {
    text-align: center;
  }

  .tgs-accred-benefit-icon {
    margin: 0 auto;
  }
	
  .widget_text.tgs-accred-benefits h2,
  .widget_text.tgs-accred-benefits p {
		text-align: center;
  }
}

/* Extra small mobile */
@media (max-width: 480px) {
  .tgs-accred-benefit-card {
    flex-direction: column;
    padding: 20px 16px;
    gap: 12px;
  }

  .widget_text.tgs-accred-benefits h2 {
    margin-bottom: 24px;
  }

  .tgs-accred-benefits-grid {
    padding: 0 12px 40px;
  }

  .tgs-accred-benefit-icon {
    width: 90px;
    height: 90px;
  }
}


/* Accreditations benefit highlight text */
.tgs-accred-highlight {
  font-weight: 700;
  color: var(--tgs-blue-link);
  font-size: clamp(13px, 2vw, 15px);
}

/* Grid variant — aligned columns (Accreditations page) */
.tgs-accred-list.tgs-accred-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 16px;
  max-width: 1000px;
  margin: 40px 0 0 75px;   /* indented from the text, as in the design */
}

/* Pull the second row up close to the first */
.tgs-accred-list.tgs-accred-list-grid + .tgs-accred-list-grid {
  margin-top: 20px;
}

.tgs-accred-list.tgs-accred-list-grid li {
  align-items: center;
  gap: 20px;
  font-size: 16px;
}

.tgs-accred-list.tgs-accred-list-grid li::before {
  width: 28px;
  height: 28px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .tgs-accred-list.tgs-accred-list-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    margin-left: 30px;
  }
}

/* End Accreditations */


/* --------------------------------------------------------------------------
   AWARDS PAGE
   -------------------------------------------------------------------------- */
.tgs-awards-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:56px 80px; /* row-gap column-gap */
  margin-bottom:48px;
}

.tgs-awards-row:last-child{
  margin-bottom:0;
}

.tgs-awards-row img{
  height:200px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* ==========================================================================
   12. LICENSES PAGE
   Row classes used in SiteOrigin "Row CSS Class":
     tgs-licenses        -> intro heading + lede
     tgs-licenses-waste   -> image left / "Understanding Waste Exemptions" right
     tgs-licenses-list    -> repeating T16 / T11 style rows (text + badge image)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ROW 2 — Waste exemptions intro (tgs-licenses-waste)
   image cell (left) / heading + copy + CTA (right)
   -------------------------------------------------------------------------- */
.tgs-licenses-waste{
  display:grid !important;
  grid-template-columns:1fr 1.25fr;
  gap:50px;
  align-items:center;
  max-width:1180px;
  margin:40px auto 70px;
  padding:0 28px;
}
.tgs-licenses-waste > .panel-grid-cell{
  width:auto !important;
  float:none !important;
  margin:0 !important;
}
.tgs-licenses-waste .so-widget-sow-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}
.tgs-licenses-waste h3{
  font-size:clamp(22px, 2.6vw, 28px);
  font-weight:900;
  margin:0 0 16px;
  color:var(--tgs-ink);
}
.tgs-licenses-waste p{
  font-size:15.5px;
  color:var(--tgs-ink-soft);
  line-height:1.65;
  margin:0 0 26px;
}

.tgs-licenses-btn a {
	width:75%;
}
@media (max-width:900px){
  .tgs-licenses-waste{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
  }
	.tgs-licenses-btn a {
		width:100%;
	}
}

/* --------------------------------------------------------------------------
   ROW 3 — Licence detail cards (tgs-licenses-list)
   Nested SiteOrigin Panels Builder widget: each inner panel-grid row
   = text cell (h3 + "What It Means" / "The Benefits") + badge image cell
   -------------------------------------------------------------------------- */
.tgs-licenses-list{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px 70px;
}

.tgs-licenses-list .panel-layout > .panel-grid{
  display:grid !important;
  grid-template-columns:1.5fr 1fr;
  gap:40px;
  align-items:center;
  background:var(--tgs-gray-card);
  border:2px solid var(--tgs-green-bright);
  border-radius:18px;
  padding:34px 36px;
  margin-bottom:34px !important;
}
.tgs-licenses-list .panel-layout > .panel-grid:last-child{
  margin-bottom:0 !important;
}
.tgs-licenses-list .panel-grid-cell{
  width:auto !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

.tgs-licenses-list h3{
  font-size:22px;
  font-weight:900;
  margin:0 0 14px;
  color:var(--tgs-ink);
}
.tgs-licenses-list p{
  font-size:15px;
  color:var(--tgs-ink);
  line-height:1.55;
  margin:0 0 14px;
}
.tgs-licenses-list p:last-of-type{
  margin-bottom:0;
}
.tgs-licenses-list span.blue{
  color:var(--tgs-blue-link);
  font-weight:900;
}
.tgs-licenses-list span.green{
  color:var(--tgs-green-deep);
  font-weight:900;
}

/* Badge image (your 2.png with the Environment Agency logo + reference + button) */
.tgs-licenses-list .so-widget-sow-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}

@media (max-width:900px){
  .tgs-licenses-list .panel-layout > .panel-grid{
    grid-template-columns:1fr;
    text-align:center;
    padding:26px 22px;
  }
}

/* --------------------------------------------------------------------------
   PARTNER PAGE
   -------------------------------------------------------------------------- */

/* ==========================================================================
   PARTNERS PAGE — plain-HTML version of the 3-up testimonial cards
   Append to style.css (below your existing TGS custom CSS), to go with
   tgs-partners-cards.html pasted into the Custom HTML widget.

   This replaces the earlier nested-SiteOrigin-widget approach
   (.tgs-partner-card .panel-grid / .so-widget-sow-image / .textwidget
   rules from the first partners CSS) — those selectors simply won't
   match this plain markup, so they're harmless if left in but unused.
   You can delete them once you switch to this version.
   ========================================================================== */

/* Intro heading block — plain markup this time, no extra classes needed */
.tgs-container h2{
  text-align:center;
  font-size:clamp(28px, 3.4vw, 36px);
  margin:0 0 14px;
}
.tgs-container > p{
  text-align:center;
  font-size:15.5px;
  color:var(--tgs-ink-soft, #3a4248);
  line-height:1.6;
  margin:0 0 6px;
}
.tgs-container > p strong{
  font-weight:700;
  color:var(--tgs-ink, #101820);
}

/* --------------------------------------------------------------------------
   3-up card grid
   -------------------------------------------------------------------------- */
.tgs-partners-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:44px 36px;
  max-width:1240px;
  margin:44px auto 64px;
  padding:0 28px;
}

.tgs-partner-card{
  position:relative;
  display:flex;
  flex-direction:column;
  text-align:left;
}

.tgs-partner-logo{
  display:block;
  width:auto;
  max-width:170px;
  max-height:46px;
  height:auto;
  object-fit:contain;
  margin:0 0 14px;
}

/* big decorative opening quote mark */
.tgs-partner-quotemark{
  display:block;
  font-family:Georgia, 'Times New Roman', serif;
  font-size:64px;
  font-weight:700;
  line-height:.6;
  color:var(--tgs-ink, #101820);
  margin:0 0 4px;
}

.tgs-partner-quote{
  flex:1;
  font-size:15px;
  color:var(--tgs-ink, #101820);
  line-height:1.6;
  margin:0 0 20px;
}

.tgs-partner-name{
  color:var(--tgs-green-deep, #1d7c36);
  font-weight:700;
  font-size:15px;
  margin:0 0 2px;
}

.tgs-partner-company{
  color:var(--tgs-ink, #101820);
  font-weight:400;
  font-size:15px;
  margin:0 0 18px;
}

/* green bar — flex + flex:1 on the quote above keeps this pinned to the
   bottom of every card even when quote lengths differ */
.tgs-partner-card::after{
  content:"";
  display:block;
  height:4px;
  width:100%;
  background:var(--tgs-green-bright, #2eaa4e);
  margin-top:auto;
}

@media (max-width:1000px){
  .tgs-partners-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (max-width:640px){
  .tgs-partners-grid{
    grid-template-columns:1fr;
  }
  .tgs-partner-card{
    align-items:center;
    text-align:center;
  }
  .tgs-partner-quote,
  .tgs-partner-name,
  .tgs-partner-company{
    text-align:center;
  }
}


/* --------------------------------------------------------------------------
   SERVICES - DATA ERASURE PAGE
   -------------------------------------------------------------------------- */

/* Heading variant – spans both list columns */
.tgs-pcr-checklist--heading > h4{
  grid-column:2 / -1;
  grid-row:1;
  margin:0 0 -4px;
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--tgs-blue, #1a8ad4);
}
.tgs-pcr-checklist--heading > div:first-child{
  grid-row:1 / span 2;   /* text sits beside heading + lists */
}
.tgs-pcr-checklist--heading > .tgs-pcr-list{
  grid-row:2;            /* both lists line up under the heading */
}

@media (max-width:900px){
  .tgs-pcr-checklist--heading > div:first-child{grid-row:auto}
  .tgs-pcr-checklist--heading > h4{grid-column:1 / -1;grid-row:auto;text-align:center}
  .tgs-pcr-checklist--heading > .tgs-pcr-list{grid-row:auto}
}
@media (max-width:600px){
  .tgs-pcr-checklist--heading > h4{text-align:left}
}

/* Image variant – two lists left, image right */
.tgs-pcr-checklist--image{
  grid-template-columns:auto auto 1fr;
  gap:20px 30px;
  align-items:center;
}
.tgs-pcr-checklist--image > .tgs-pcr-media{
  grid-column:3;
  grid-row:1;
  padding-left:30px;
}
.tgs-pcr-checklist--image > .tgs-pcr-list{
  grid-row:1;
}
.tgs-pcr-checklist--image .tgs-pcr-media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}

@media (max-width:900px){
  .tgs-pcr-checklist--image{
    grid-template-columns:1fr 1fr;
  }
  .tgs-pcr-checklist--image > .tgs-pcr-media{
    grid-column:1 / -1;
    grid-row:2;          /* image goes under the lists */
    padding-left:0;
    text-align:left;
  }
}
@media (max-width:600px){
  .tgs-pcr-checklist--image{
    grid-template-columns:1fr;
  }
  .tgs-pcr-checklist--image > .tgs-pcr-list{
    grid-row:auto;
  }
  .tgs-pcr-checklist--image .tgs-pcr-list li{
    padding-bottom:16px;
  }
  .tgs-pcr-checklist--image > .tgs-pcr-media{
    grid-row:auto;
  }
}

/* --------------------------------------------------------------------------
   SERVICES - COMPLIANCE PAGE
   -------------------------------------------------------------------------- */

/* Full-width variant – heading on top, two lists below */
.tgs-pcr-checklist--full{
  grid-template-columns:auto 1fr;
  gap:10px 55px;
}
.tgs-pcr-checklist--full > h4{
  grid-column:1 / -1;
  margin:0 0 20px;
  font-size:20px;
  font-weight:600;
  line-height:1.3;
  color:var(--tgs-blue, #1a8ad4);
}
.tgs-pcr-checklist--full .tgs-pcr-list li{
  padding-left:55px;     /* wider gap between tick and text */
  font-size:16px;
}

@media (max-width:900px){
  .tgs-pcr-checklist--full{
    grid-template-columns:1fr 1fr;
    gap:10px 30px;
  }
  .tgs-pcr-checklist--full .tgs-pcr-list li{
    padding-left:34px;
  }
}
@media (max-width:600px){
  .tgs-pcr-checklist--full{
    grid-template-columns:1fr;
  }
  .tgs-pcr-checklist--full > h4{
    margin-bottom:10px;
  }
  .tgs-pcr-checklist--full .tgs-pcr-list li{
    padding-bottom:18px;
  }
}


/* --------------------------------------------------------------------------
   ARRANGE COLLECTION PAGE
   -------------------------------------------------------------------------- */
/* ---------- Shared ---------- */
.tgs-collect{
  font-size:14px;
  line-height:1.5;
  color:#222;
}
.tgs-collect h2{
  font-size:26px;
  font-weight:700;
  line-height:1.2;
  color:#222;
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:9px solid #1e3d2f;   /* dark green bar */
}
.tgs-collect p{margin:0 0 14px}

/* ---------- Left: form ---------- */
.tgs-collect--form h3{
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  margin:0 0 6px;
  color:#222;
}
.tgs-collect-intro{font-size:13px;margin-bottom:18px}

.tgs-collect--form .wpcf7-form p{margin:0}
.tgs-collect--form .wpcf7-form br{display:none}
.tgs-collect--form .tgs-cf-row{margin-bottom:6px}
.tgs-collect--form .tgs-cf-gap{margin-top:18px}
.tgs-collect--form .wpcf7-form-control-wrap{display:block}

.tgs-collect--form input[type="text"],
.tgs-collect--form input[type="email"],
.tgs-collect--form textarea,
.tgs-collect--form select{
  width:100%;
  box-sizing:border-box;
  padding:6px 8px;
  font-size:13px;
  font-family:inherit;
  color:#222;
  background:#fff;
  border:1px solid #333;
  border-radius:0;
  box-shadow:none;
}
.tgs-collect--form textarea{
  height:34px;          /* single-line look like the design */
  min-height:34px;
  resize:vertical;
}
.tgs-collect--form ::placeholder{color:#777;opacity:1}
.tgs-collect--form input:focus,
.tgs-collect--form textarea:focus,
.tgs-collect--form select:focus{
  outline:none;
  border-color:#1a8ad4;
}

/* Selects with a boxed arrow on the right */
.tgs-collect--form .tgs-cf-select select{
  max-width:90%;
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  cursor:pointer;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 1h10L6 9z' fill='%23111'/%3E%3C/svg%3E"),
    linear-gradient(#333,#333);
  background-repeat:no-repeat;
  background-size:11px 9px, 1px 100%;
  background-position:right 12px center, right 34px center;
}

/* Captcha */
.tgs-collect--form .tgs-cf-captcha{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.tgs-collect--form .tgs-cf-captcha .wpcf7-form-control-wrap{flex:1}

/* Submit */
.tgs-collect--form .tgs-cf-submit{margin-top:22px;position:relative}
.tgs-collect--form input[type="submit"]{
  width:100%;
  padding:10px 20px;
  font-size:17px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(#22c35e,#0e9a42);
  border:0;
  border-radius:16px;
  box-shadow:0 3px 6px rgba(0,0,0,.25);
  cursor:pointer;
  transition:filter .2s;
  margin-top: 20px;	
}
.tgs-collect--form input[type="submit"]:hover{filter:brightness(1.08)}
.tgs-collect--form .wpcf7-spinner{position:absolute;right:10px;top:50%;margin:-12px 0 0}

.tgs-collect--form .wpcf7-not-valid-tip{font-size:12px;margin-top:2px}
.tgs-collect--form .wpcf7-response-output{margin:14px 0 0;font-size:13px}

/* ---------- Right: info ---------- */
.tgs-collect--info{
  border-left:1px solid #999;
  padding-left:35px;
  font-size:13px;
}
.tgs-collect--info ul{
  margin:0 0 16px;
  padding-left:18px;
  list-style:disc;
}
.tgs-collect--info li{margin-bottom:4px}

.tgs-collect-box{
  display:flex;
  align-items:center;
  gap:30px;
  margin:20px 0;
}
.tgs-collect-box p{font-size:15px;line-height:1.6;margin:0}
.tgs-collect-box img{max-width:160px;height:auto}

.tgs-collect-contact{
  font-weight:700;
  color:#1a8ad4;
}
.tgs-collect-contact a{color:#2d8a3e;text-decoration:underline}

/* ---------- Mobile (SiteOrigin stacks cells at 780px) ---------- */
@media (max-width:780px){
  .tgs-collect--info{
    border-left:0;
    padding-left:20px;
    margin-top:30px;
  }
  .tgs-collect--form .tgs-cf-select select{max-width:100%}
  .tgs-collect-box{gap:16px}
  .tgs-collect-box img{max-width:120px}
  .tgs-collect--form {
	padding : 20px;
  }
}

.wpcf7 .required {
    color: #e3342f;
    font-weight: bold;
}

.wpcf7 .field-gap {
    margin-top: 30px !important;
}
/* --------------------------------------------------------------------------
   OEM / ODM Collection Schemes PAGE
   -------------------------------------------------------------------------- */
/* ---------- Intro block ---------- */
.tgs-takeback-intro h2{
  text-align:center;
  margin:0 0 30px;
}
.tgs-takeback-intro p{
  font-size:16px;
  line-height:1.6;
  margin:0 0 30px;
}
.tgs-takeback-intro h4{
  font-size:17px;
  font-weight:600;
  color:var(--tgs-green-bright, #1db954);
  margin:0 0 10px;
}

/* ---------- Features variant: list left, image right ---------- */
.tgs-pcr-checklist--features{
  grid-template-columns:1.1fr 1fr;
  gap:30px 20px;
  align-items:center;
}
.tgs-pcr-checklist--features .tgs-pcr-list li{
  padding:0 0 14px 44px;
  font-size:16px;
  line-height:1.6;
}
.tgs-pcr-checklist--features .tgs-pcr-list li::before{
  top:4px;                 /* line tick up with the title */
}
.tgs-pcr-checklist--features .tgs-pcr-list strong{
  display:block;
  font-size:17px;
  font-weight:600;
  color:var(--tgs-blue, #1a8ad4);
}
.tgs-pcr-checklist--features .tgs-pcr-list span{
  display:block;
  max-width:560px;
}
.tgs-pcr-checklist--features .tgs-pcr-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  .tgs-pcr-checklist--features{
    grid-template-columns:1fr;
  }
  /* cancel the centred text from the base 900px rule */
  .tgs-pcr-checklist--features > div:first-child{
    text-align:left;
  }
  .tgs-pcr-checklist--features .tgs-pcr-media{
    grid-column:1 / -1;
    max-width:560px;
    margin:0 auto;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:600px){
  .tgs-takeback-intro h2{margin-bottom:20px}
  .tgs-takeback-intro p{font-size:15px;margin-bottom:20px}
  .tgs-pcr-checklist--features .tgs-pcr-list li{padding-left:34px}
  .tgs-pcr-checklist--features .tgs-pcr-list strong{font-size:16px}
  .tgs-pcr-checklist--features .tgs-pcr-list li,
  .tgs-pcr-checklist--features .tgs-pcr-list span{font-size:15px}
}


/* =========================================================
   MY GREENER SIDE PAGE
   ========================================================= */

.tgs-my-greener-side-page-2 .tgs-btn-green {
	padding: 12px 75px;
}

@media (max-width: 400px) {
    .tgs-my-greener-side-page-2 .tgs-btn-green {
		font-size: 10px;
	}
}

/* =========================================================
   COLLECTION ARRANGED PAGE
   ========================================================= */
.tgs-thanks { max-width: 900px; }
.tgs-thanks h2 { margin: 10px 0 8px; font-size: 28px; }
.tgs-thanks h3 { margin: 0 0 10px; font-size: 18px; }

.tgs-thanks-hero { text-align: center; padding: 30px 20px 10px; }
.tgs-thanks-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #8cc63f; color: #fff; font-size: 32px; font-weight: bold;
}

.tgs-thanks-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0;
}
.tgs-thanks-card {
  border: 1px solid #e5e5e5; border-top: 4px solid #8cc63f;
  border-radius: 6px; padding: 20px;
}
.tgs-thanks-card p { margin: 0; }

.tgs-thanks-checklist {
  background: #f6faf0; border-radius: 6px; padding: 20px 25px; margin-bottom: 20px;
}
.tgs-thanks-checklist ul { margin: 0; padding-left: 20px; }
.tgs-thanks-checklist li { margin-bottom: 8px; }

.tgs-thanks-note { color: #555; }

.tgs-thanks-contact {
  border-top: 1px solid #e5e5e5; padding-top: 20px; margin-top: 20px;
}
.tgs-thanks-contact a { color: #8cc63f; font-weight: bold; }

@media (max-width: 700px) {
  .tgs-thanks-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   RECYCLING SOLUTION PAGE
   ========================================================= */
.tgs-pcr-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
    align-items: start;
}

.tgs-pcr-process-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tgs-pcr-process-item img {
    display: block;
    width: 100%;
    max-width: 170px;
    height: auto;
    margin: 0 auto 14px;
}

.tgs-pcr-process-item p {
    max-width: 250px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.55;
    color: #222;
}

.tgs-pcr-process-item p:first-of-type {
    font-weight: 900;
    font-size: 16px;
    color: var(--tgs-green-deep);
    margin: 0 0 10px;
}

/* Tablet */
@media (max-width: 991px) {
    .tgs-pcr-process-grid {
        gap: 24px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .tgs-pcr-process-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}


/* --------------------------------------------------------------------------
   PRODUCTS PAGE 
   -------------------------------------------------------------------------- */

/* ---------- Wrapper ---------- */
.woocommerce.columns-4,
.woocommerce-page .woocommerce {
  max-width: 1240px;
  margin: 40px auto 60px;
  padding: 0 28px;
  font-family: 'Lato', Arial, sans-serif;
}

/* ---------- Toolbar: result count + sorting ---------- */
.woocommerce .woocommerce-result-count {
  font-size: 15px;
  color: var(--tgs-ink-soft);
  margin: 0 0 30px;
  line-height: 44px;
}

.woocommerce .woocommerce-ordering {
  margin: 0 0 30px;
}

.woocommerce .woocommerce-ordering select.orderby {
  appearance: none;
  -webkit-appearance: none;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 14px;
  color: var(--tgs-ink);
  background-color: var(--tgs-gray-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232eaa4e' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border: 1.5px solid var(--tgs-green-bright);
  border-radius: 999px;
  padding: 10px 44px 10px 18px;
  min-width: 230px;
  cursor: pointer;
}
.woocommerce .woocommerce-ordering select.orderby:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 170, 78, .18);
}

/* ---------- Grid ---------- */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0 !important;
  padding: 0;
  clear: both;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

/* ---------- Card (same look as .tgs-card) ---------- */
.woocommerce ul.products li.product {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center !important;
  background: var(--tgs-gray-card);
  border: 1.5px solid var(--tgs-green-bright);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(16, 43, 43, .18);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Image panel – white, with the blue card-head gradient as a bar underneath */
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  padding: 16px;
  margin: 0 !important;
  box-sizing: border-box;
  border-bottom: 6px solid var(--tgs-blue);
  transition: transform .3s ease;
}
.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}
/* Photo-style images fill the frame */
.woocommerce ul.products li.product a img[src*="Pile-of"],
.woocommerce ul.products li.product a img[src*="Broken-Phones"] {
  object-fit: cover;
  padding: 0;
}
/* Placeholder images until real ones are added */
.woocommerce ul.products li.product a img.woocommerce-placeholder {
  opacity: .5;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 800;
  font-size: 17px !important;
  letter-spacing: -.2px;
  line-height: 1.25;
  color: var(--tgs-ink);
  padding: 18px 14px 6px !important;
  margin: 0;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Price */
.woocommerce ul.products li.product .price {
  display: block;
  font-size: 17px !important;
  font-weight: 900;
  color: var(--tgs-green-deep) !important;
  margin: 0 0 16px !important;
}
.woocommerce ul.products li.product .price del {
  color: #888 !important;
  font-weight: 400;
  margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
}

/* ---------- Buttons (same as .tgs-btn-green / .tgs-btn-blue) ---------- */
.woocommerce ul.products li.product a.button {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: auto 16px 20px !important;
  padding: 10px 26px !important;
  border-radius: 999px !important;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid #167a30;
  background: linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -8px 14px rgba(20, 90, 40, .35),
    0 4px 10px rgba(0, 0, 0, .18);
  transition: transform .1s, filter .1s;
}
.woocommerce ul.products li.product a.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #fff !important;
}
.woocommerce ul.products li.product a.button:active {
  transform: translateY(1px);
}

/* "Select options" (variable products) → blue */
.woocommerce ul.products li.product a.button.product_type_variable {
  border-color: #0e3f6b;
  background: linear-gradient(180deg, #4aa3e8 0%, #2581c5 50%, #1968a5 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -8px 14px rgba(11, 65, 112, .45),
    0 4px 10px rgba(0, 0, 0, .25);
}

/* AJAX states */
.woocommerce ul.products li.product a.button.loading {
  opacity: .75;
}
.woocommerce ul.products li.product a.added_to_cart {
  display: block;
  margin: -10px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tgs-blue-link);
  text-decoration: none;
}
.woocommerce ul.products li.product a.added_to_cart:hover {
  text-decoration: underline;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
  min-width: 0;
  min-height: 0;
  padding: 6px 12px;
  line-height: 1;
  border-radius: 999px;
  background: var(--tgs-blue);
  font-weight: 700;
}

/* ---------- Notices ("added to your basket") ---------- */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  background: var(--tgs-gray-card);
  border-top: 0;
  border-left: 6px solid var(--tgs-green-bright);
  border-radius: 10px;
  color: var(--tgs-ink);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
  color: var(--tgs-green-bright);
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  gap: 8px;
  margin-top: 40px;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--tgs-gray-card);
  border: 1.5px solid var(--tgs-green-bright);
  color: var(--tgs-ink);
  font-weight: 700;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--tgs-green-bright);
  color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 800px) {
  .woocommerce.columns-4,
  .woocommerce-page .woocommerce { padding: 0 18px; margin-top: 20px; }
  .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering { float: none; text-align: center; margin-bottom: 14px; }
  .woocommerce .woocommerce-ordering select.orderby { width: 100%; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
  .woocommerce ul.products li.product a.button {
    font-size: 12px;
    padding: 9px 14px !important;
    margin: auto 10px 16px !important;
  }
}
@media (max-width: 420px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   BASKET PAGE 
   -------------------------------------------------------------------------- */

/* ---------- Wrapper ---------- */
.wp-block-woocommerce-cart {
  max-width: 1240px;
  margin: 40px auto 70px !important;
  padding: 0 28px;
  font-family: 'Lato', Arial, sans-serif;
  color: var(--tgs-ink);
}

/* ---------- Two-column layout: items left, totals right ---------- */
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 30px;
  align-items: start;
  margin: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  width: 100% !important;
  margin: 0 !important;
}

/* ---------- Left: items card ---------- */
.wp-block-woocommerce-cart .wc-block-components-main {
  background: #fff;
  border: 1.5px solid var(--tgs-green-bright);
  border-radius: 14px;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
.wp-block-woocommerce-cart table.wc-block-cart-items {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

/* Header row – blue across the full width */
.wp-block-woocommerce-cart .wc-block-cart-items__header,
.wp-block-woocommerce-cart .wc-block-cart-items__header th {
  background: linear-gradient(180deg, #3a98d8 0%, #2581c5 50%, #1965a8 100%) !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items__header th {
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 16px 22px !important;
  border: 0 !important;
}
/* Woo hides the middle "Details" header cell with visibility:hidden,
   which leaves a white gap in the blue bar. Show the cell, hide only its text. */
.wp-block-woocommerce-cart .wc-block-cart-items__header .wc-block-cart-items__header-product {
  visibility: visible !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items__header .wc-block-cart-items__header-product span {
  visibility: hidden;
}
/* Woo's own header row has a bottom border – remove it under the blue bar */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
  border: 0 !important;
}

/* Item rows */
.wp-block-woocommerce-cart .wc-block-cart-items__row td {
  padding: 22px !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--tgs-line) !important;
  vertical-align: top;
}
.wp-block-woocommerce-cart .wc-block-cart-items__row:last-child td {
  border-bottom: 0 !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--tgs-green-bright);
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
  font-weight: 800;
  font-size: 17px;
  color: var(--tgs-ink) !important;
  text-decoration: none;
}
.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
  color: var(--tgs-blue-link) !important;
}

.wp-block-woocommerce-cart .wc-block-cart-item__prices {
  font-size: 15px;
  color: var(--tgs-ink-soft);
  margin: 4px 0 10px;
}

/* Quantity pill */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
  border: 1.5px solid var(--tgs-green-bright) !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: #fff;
  width: 112px;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
  display: none !important;
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector input {
  font-weight: 700;
  color: var(--tgs-ink);
}
.wp-block-woocommerce-cart .wc-block-components-quantity-selector button:hover {
  background: var(--tgs-gray-card);
}

.wp-block-woocommerce-cart .wc-block-cart-item__total {
  font-weight: 900;
  font-size: 17px;
  color: var(--tgs-green-deep);
}

/* ---------- Right: totals card ---------- */
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  background: var(--tgs-gray-card);
  border: 1.5px solid var(--tgs-green-bright);
  border-radius: 14px;
  padding: 0 22px 24px !important;   /* one padding for everything inside */
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
/* Reset Woo's own inner padding so nothing is double-indented */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-totals-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* "Basket totals" – full-width blue bar (pulled out over the side padding) */
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  display: block !important;
  margin: 0 -22px 6px !important;
  padding: 16px 22px !important;
  background: linear-gradient(180deg, #3a98d8 0%, #2581c5 50%, #1965a8 100%);
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-align: center !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 6px rgba(0, 0, 0, .18);
}

.wp-block-woocommerce-cart .wc-block-components-totals-wrapper {
  border-top-color: var(--tgs-line) !important;
}

/* Estimated total */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 800;
  font-size: 18px;
}
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 900;
  font-size: 22px;
  color: var(--tgs-green-deep);
}

/* "OR" divider */
.wp-block-woocommerce-cart .wc-block-components-express-payment-continue-rule {
  color: var(--tgs-ink-soft);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Proceed to Checkout – glossy green pill ---------- */
.wp-block-woocommerce-cart .wc-block-cart__submit-container {
  padding: 0 !important;
  margin-top: 6px;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 12px 22px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none !important;
  border: 1px solid #167a30 !important;
  background: linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -8px 14px rgba(20, 90, 40, .35),
    0 4px 10px rgba(0, 0, 0, .18) !important;
  transition: transform .1s, filter .1s;
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wp-block-woocommerce-cart .wc-block-cart__submit-button .wc-block-components-button__text {
  color: #fff !important;
}

/* ---------- Empty basket ---------- */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-weight: 800;
  font-size: 28px;
  color: var(--tgs-ink);
}

/* ---------- Tablet & mobile: stack ---------- */
@media (max-width: 900px) {
  .wp-block-woocommerce-cart .wc-block-components-sidebar-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .wp-block-woocommerce-cart {
    padding: 0 16px;
    margin-top: 20px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-items__row td {
    padding: 16px !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart-item__image img {
    width: 64px;
    height: 64px;
  }
}

/* --------------------------------------------------------------------------
   CHECKOUT PAGE 
   -------------------------------------------------------------------------- */

/* ---------- Wrapper ---------- */
.wp-block-woocommerce-checkout {
  max-width: 1240px;
  margin: 40px auto 70px !important;
  padding: 0 28px;
  font-family: 'Lato', Arial, sans-serif;
  color: var(--tgs-ink);
}

/* ---------- Express checkout box ---------- */
.wp-block-woocommerce-checkout .wc-block-components-express-payment--checkout .wc-block-components-express-payment__content {
  border: 1.5px solid var(--tgs-green-bright) !important;
  border-radius: 14px !important;
  background: var(--tgs-gray-card);
}
.wp-block-woocommerce-checkout .wc-block-components-express-payment__title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 14px !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--tgs-ink);
}
.wp-block-woocommerce-checkout .wc-block-components-express-payment__title-container::before,
.wp-block-woocommerce-checkout .wc-block-components-express-payment__title-container::after {
  border-color: var(--tgs-green-bright) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-express-payment-continue-rule {
  font-weight: 700;
  font-size: 13px;
  color: var(--tgs-ink-soft);
}

/* ---------- Step headings ---------- */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -.3px;
  color: var(--tgs-ink);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* small green accent bar before each heading */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__title::before {
  content: "";
  width: 6px;
  height: 22px;
  border-radius: 3px;
  background: var(--tgs-green-bright);
  flex: none;
}

/* ---------- Inputs & selects ---------- */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select,
.wp-block-woocommerce-checkout .wc-block-components-textarea {
  border: 1px solid var(--tgs-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-family: 'Lato', Arial, sans-serif !important;
  color: var(--tgs-ink) !important;
  transition: border-color .15s, box-shadow .15s;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-blocks-components-select__select:focus,
.wp-block-woocommerce-checkout .wc-block-components-textarea:focus {
  outline: none !important;
  border-color: var(--tgs-green-bright) !important;
  box-shadow: 0 0 0 3px rgba(46, 170, 78, .18) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
  color: var(--tgs-ink-soft) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-address-form__address_2-toggle {
  color: var(--tgs-blue-link);
  font-weight: 700;
}

/* ---------- Saved address card ---------- */
.wp-block-woocommerce-checkout .wc-block-components-address-card {
  background: var(--tgs-gray-card);
  border: 1.5px solid var(--tgs-green-bright) !important;
  border-radius: 14px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-address-card__address-section--primary {
  font-weight: 800;
}
.wp-block-woocommerce-checkout .wc-block-components-address-card__edit {
  color: var(--tgs-blue-link) !important;
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- Payment options ---------- */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
  border-radius: 14px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after,
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  border: 1.5px solid var(--tgs-green-bright) !important;
  box-shadow: none !important;
  border-radius: 14px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  background: var(--tgs-gray-card);
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
  border-color: var(--tgs-green-deep) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked::before {
  background: var(--tgs-green-bright) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-radio-control__label {
  font-weight: 800;
}

/* ---------- Checkbox ("Add a note") ---------- */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input {
  border-radius: 4px !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input:checked {
  background: var(--tgs-green-bright) !important;
  border-color: var(--tgs-green-bright) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__mark {
  fill: #fff !important;
}

/* Terms line */
.wp-block-woocommerce-checkout .wc-block-checkout__terms {
  color: var(--tgs-ink-soft);
  font-size: 14px;
}

/* ---------- Actions: Return to Basket + Proceed to PayPal ---------- */
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  color: var(--tgs-blue-link) !important;
  font-weight: 700;
  text-decoration: none;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button svg {
  fill: var(--tgs-blue-link);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  text-decoration: underline;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
  min-height: 52px;
  padding: 12px 34px !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 17px !important;
  font-weight: 700 !important;
  border: 1px solid #167a30 !important;
  background: linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -8px 14px rgba(20, 90, 40, .35),
    0 4px 10px rgba(0, 0, 0, .18) !important;
  transition: transform .1s, filter .1s;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:active {
  transform: translateY(1px);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
  opacity: .6;
  transform: none;
}

/* ---------- Order summary card (right) ---------- */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--tgs-gray-card);
  border: 1.5px solid var(--tgs-green-bright) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}

/* Title – blue bar like .tgs-card-head */
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title {
  margin: 0 !important;
  padding: 16px 22px !important;
  background: linear-gradient(180deg, #3a98d8 0%, #2581c5 50%, #1965a8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 6px rgba(0, 0, 0, .18);
  color: #fff;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-text {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-price {
  color: #fff !important;
  font-weight: 700;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title-icon svg {
  fill: #fff;
}

/* Items */
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img {
  border-radius: 8px;
  border: 1.5px solid var(--tgs-green-bright);
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__quantity {
  background: var(--tgs-green-bright) !important;
  border-color: #fff !important;
  color: #fff !important;
  font-weight: 700;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item .wc-block-components-product-name {
  font-weight: 800;
  font-size: 15px;
  color: var(--tgs-ink);
}

.wp-block-woocommerce-checkout .wc-block-components-totals-wrapper {
  border-top-color: var(--tgs-line) !important;
}

/* Total */
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-weight: 800;
  font-size: 18px;
}
.wp-block-woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 900;
  font-size: 22px;
  color: var(--tgs-green-deep);
}

/* PayPal "Pay in 30 days" line under the card */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .ppcp-messages {
  margin-top: 12px;
  padding: 0 4px;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .wp-block-woocommerce-checkout {
    padding: 0 16px;
    margin-top: 20px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-components-checkout-step__title {
    font-size: 19px !important;
  }
  .wp-block-woocommerce-checkout .wc-block-checkout__actions_row {
    flex-direction: column-reverse;
    gap: 16px;
  }
  .wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   EMPTY BASKET (WooCommerce Empty Cart block + "New in store" grid)
   Paste below your BASKET PAGE section. You can delete the small
   "Empty basket" rule at the end of the basket CSS – this replaces it.
   -------------------------------------------------------------------------- */

.wp-block-woocommerce-empty-cart-block {
  max-width: 1240px;
  margin: 20px auto 70px;
  padding: 0 28px;
  font-family: 'Lato', Arial, sans-serif;
  text-align: center;
}

/* ---------- Sad-face icon → green circle ---------- */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  background-color: var(--tgs-green-bright) !important;
  width: 110px !important;
  height: 110px !important;
  margin: 0 auto 24px !important;
  filter: drop-shadow(0 6px 12px rgba(46, 170, 78, .3));
}

/* Title */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  letter-spacing: -.3px;
  color: var(--tgs-ink);
  margin: 0 0 10px;
}

/* ---------- Dots separator → three green dots ---------- */
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
  border: 0 !important;
  background: none !important;
  height: auto;
  margin: 26px auto 34px !important;
  text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
  content: "\00b7 \00b7 \00b7";
  color: var(--tgs-green-bright) !important;
  font-size: 36px;
  letter-spacing: 1.2em;
  padding-left: 1.2em;
  line-height: 1;
  font-weight: 900;
}

/* "New in store" heading */
.wp-block-woocommerce-empty-cart-block > h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(24px, 3vw, 35px) !important;
  letter-spacing: -.3px;
  color: var(--tgs-ink) !important;
  margin: 0 0 30px;
}

/* ---------- Product grid (same look as the shop page cards) ---------- */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  max-width: none !important;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--tgs-green-bright) !important;
  border-radius: 14px;
  background: var(--tgs-gray-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(16, 43, 43, .18);
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Image – white panel with blue bar */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  margin: 0 !important;
  background: #fff;
  border-bottom: 6px solid var(--tgs-blue);
  overflow: hidden;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  display: block;
  transition: transform .3s ease;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover .wc-block-grid__product-image img {
  transform: scale(1.03);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img[src*="Pile-of"],
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img[src*="Broken-Phones"] {
  object-fit: cover;
  padding: 0;
}

/* Title */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 800;
  font-size: 17px !important;
  line-height: 1.25;
  color: var(--tgs-ink) !important;
  padding: 18px 14px 6px;
  margin: 0 !important;
}

/* Price */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-size: 17px !important;
  font-weight: 900;
  color: var(--tgs-green-deep) !important;
  margin: 0 0 16px !important;
}

/* Add to basket – glossy green pill */
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  margin: auto 16px 20px !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 26px !important;
  border-radius: 999px !important;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.2;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid #167a30;
  background: linear-gradient(180deg, #43c466 0%, #2eaa4e 50%, #1f8b3c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -8px 14px rgba(20, 90, 40, .35),
    0 4px 10px rgba(0, 0, 0, .18);
  transition: transform .1s, filter .1s;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.added_to_cart {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tgs-blue-link);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}
@media (max-width: 800px) {
  .wp-block-woocommerce-empty-cart-block {
    padding: 0 16px;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    width: 80px !important;
    height: 80px !important;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    font-size: 15px !important;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
    font-size: 12px !important;
    padding: 9px 14px !important;
  }
}
@media (max-width: 420px) {
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: 1fr;
  }
}



/* Centre the whole checklist block, keep list text left-aligned */
.tgs-pcr-checklist--center {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    text-align: left;
    column-gap: 80px;
}

.tgs-pcr-list-title {
    color: #1e88d6;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 14px;
}

.tgs-pcr-atom-cta {
    margin-top: 35px;
}

.tgs-pcr-atom-btn {
    display: inline-block;
    padding: 14px 70px;
    background: linear-gradient(#1e9be0, #0a78c2);
    color: #fff;
    font-size: 17px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: filter 0.2s;
}

.tgs-pcr-atom-btn:hover {
    filter: brightness(1.1);
    color: #fff;
}

@media (max-width: 767px) {
    .tgs-pcr-atom-title {
        font-size: 24px;
    }

    .tgs-pcr-atom-btn {
        padding: 14px 30px;
    }
}