/* Triomega Golden PET on Joomla 6 + Helix Ultimate.
   Recreates the site's original look (Internet Archive, 10 Jul 2025): grey top bar with the menu,
   white header with the logo, white title box, white content cards, dark footer.
   Main colour #85ba40 (hover #6a9433) = the old design's colour preset 4. */

:root { --tg-green: #85ba40; --tg-green-dark: #6a9433; --tg-page-bg: #e9eaed; }
body { background-color: var(--tg-page-bg); line-height: 24px; color: #333; }
a { color: var(--tg-green); }
a:hover, a:focus { color: var(--tg-green-dark); }
@media (min-width: 1200px) { .container { max-width: 1170px; } }
.container { padding-left: 15px; padding-right: 15px; }

/* ---- top bar: the menu, right-aligned, like the old site ---- */
#sp-top-bar { background-color: #f2f2f4; border-bottom: 1px solid #e3e4e7; padding: 0; line-height: 55px; font-size: 14px; }
#sp-top-bar .sp-module { margin: 0; }
#sp-top-bar #sp-top1 { display: none; }
#sp-top-bar #sp-top2 { flex: 0 0 100%; max-width: 100%; }
.triomega-topmenu ul.menu, ul.menu.triomega-topmenu, #sp-top2 ul.mod-menu, #sp-top2 ul.menu { display: flex; justify-content: flex-end; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
#sp-top2 ul.mod-menu > li > a, #sp-top2 ul.menu > li > a { display: inline-block; padding: 0 15px; font-size: 14px; font-weight: 500; color: #6e6e6e; text-decoration: none; }
#sp-top2 ul.mod-menu > li.active > a, #sp-top2 ul.mod-menu > li.current > a, #sp-top2 ul.mod-menu > li > a:hover,
#sp-top2 ul.menu > li.active > a, #sp-top2 ul.menu > li > a:hover { color: var(--tg-green); }
@media (max-width: 991.98px) { #sp-top-bar { display: none; } }

/* ---- header: logo only on computers; the menu button (three lines) on phones ---- */
#sp-header { background: #fff; height: 95px; border-bottom: 5px solid #dcdde0; box-shadow: none; }
#sp-header .logo { height: 90px; display: flex; align-items: center; }
#sp-header .sp-megamenu-wrapper, #sp-header .sp-megamenu-parent { display: none !important; }
#sp-header .burger-icon > span { background-color: #000; }
@media (max-width: 991.98px) { #sp-header { height: 80px; } #sp-header .logo { height: 75px; } }

/* ---- white title box with breadcrumbs ---- */
#sp-title { background: none; }
#sp-title .sp-page-title { background: none !important; padding: 0; margin: 0; }
#sp-title .sp-page-title > .container { position: relative; max-width: 1140px; margin: 30px auto 0; padding: 30px 35px; border-radius: 3px;
  background: #fff url('/images/triomega/subheader.jpg') no-repeat 50% 50% / cover; }
#sp-title .sp-page-title > .container::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: -7px; height: 7px; border-radius: 0 0 2px 2px; background-color: rgba(0,0,0,.07); }
#sp-title .sp-page-title-heading { margin: 0; padding: 0; color: #000; font-size: 30px; line-height: 1; font-weight: 600; }
#sp-title .breadcrumb { background: none; padding: 0 !important; margin: 10px 0 0; font-size: 14px; }
#sp-title .mod-breadcrumbs__divider { display: none; }
#sp-title .mod-breadcrumbs__wrapper { margin: 0; }
#sp-title .breadcrumb, #sp-title .breadcrumb a, #sp-title .breadcrumb-item.active, #sp-title .breadcrumb-item + .breadcrumb-item::before { color: #a3a3a3; font-weight: 300; }
@media (max-width: 767.98px) { #sp-title .sp-page-title > .container { margin: 20px 15px 0; width: auto; padding: 20px; } #sp-title .sp-page-title-heading { font-size: 24px; } }

/* ---- main area ---- */
#sp-main-body { padding: 40px 0; }
/* pages made from the old page-builder content run edge to edge; their sections bring their own width */
#sp-main-body:has(.sp-page-builder) { padding: 0; }
#sp-main-body:has(.sp-page-builder) > .container { max-width: none; padding: 0; }
#sp-main-body:has(.sp-page-builder) > .container > .container-inner > .row { margin: 0; }
#sp-main-body:has(.sp-page-builder) #sp-component { padding: 0; }
.view-article .article-details:has(.sp-page-builder) { margin: 0; }
.sp-page-builder .sppb-row-container { max-width: 1170px; padding-left: 15px; padding-right: 15px; margin: 0 auto; }
.com-content.view-article .article-details:has(.sp-page-builder) .article-header { display: none; }

/* ---- product catalogue (category pages) ---- */
.com-content-category-blog { background: #fff; border-radius: 3px; padding: 30px; position: relative; }
.com-content-category-blog::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: -7px; height: 7px; border-radius: 0 0 2px 2px; background-color: rgba(0,0,0,.07); }
.com-content-category-blog > h1 { font-size: 16px; font-weight: 600; text-transform: uppercase; margin: 10px 0 25px; color: #000; }
.com-content-category-blog .category-desc { margin-bottom: 30px; }
.article-list.triomega-products > .row { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid #f0f0f2; }
.article-list.triomega-products > .row > div { width: auto; max-width: none; padding: 0; border-right: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; }
.article-list.triomega-products > .row > div:nth-child(3n) { border-right: 0; }
.article-list.triomega-products .article { border: 0; box-shadow: none; background: none; margin: 0; padding: 30px 15px 25px; text-align: center; height: 100%; }
.article-list.triomega-products .article-intro-image { float: none !important; margin: 0 auto 18px; height: 150px; display: flex; align-items: center; justify-content: center; }
.article-list.triomega-products .article-intro-image img { max-height: 150px; width: auto; max-width: 100%; object-fit: contain; border-radius: 0; }
.article-list.triomega-products .article-body { padding: 0; }
.article-list.triomega-products .article-header { border: 0; margin: 0; padding: 0; }
.article-list.triomega-products .article-header::after, .article-list.triomega-products .article-header::before { display: none; }
.article-list.triomega-products .article-header h2 { font-size: 14px; font-weight: 600; text-transform: uppercase; margin: 0; line-height: 1.4; }
.article-list.triomega-products .article-header h2 a { color: #000; }
.article-list.triomega-products .article-header h2 a:hover { color: var(--tg-green); }
.article-list.triomega-products .article-introtext, .article-list.triomega-products .article-info, .article-list.triomega-products .readmore { display: none; }
.com-content-category-blog .pagination-wrapper, .com-content-category-blog .com-content-category-blog__navigation { margin-top: 25px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; }
.pagination .page-link { color: #6e6e6e; border-radius: 2px; }
.pagination .page-item.active .page-link { background-color: var(--tg-green); border-color: var(--tg-green); color: #fff; }
@media (max-width: 767.98px) {
  .article-list.triomega-products > .row { grid-template-columns: repeat(2, 1fr); }
  .article-list.triomega-products > .row > div:nth-child(3n) { border-right: 1px solid #f0f0f2; }
  .article-list.triomega-products > .row > div:nth-child(2n) { border-right: 0; }
  .com-content-category-blog { padding: 15px; }
}

/* product groups (tiles at the top of "Product") */
.triomega-groups { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #f0f0f2; margin-bottom: 10px; }
.triomega-groups a { display: block; text-align: center; padding: 25px 10px 20px; border-right: 1px solid #f0f0f2; border-bottom: 1px solid #f0f0f2; color: #000; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.triomega-groups a:nth-child(3n) { border-right: 0; }
.triomega-groups img { display: block; height: 100px; width: auto; max-width: 100%; margin: 0 auto 15px; object-fit: contain; }
.triomega-groups a:hover { color: var(--tg-green); }
@media (max-width: 767.98px) { .triomega-groups { grid-template-columns: repeat(2, 1fr); } .triomega-groups a:nth-child(3n) { border-right: 1px solid #f0f0f2; } .triomega-groups a:nth-child(2n) { border-right: 0; } }

/* one product */
.com-content.view-article.itemid-102 .article-details, .com-content.view-article.itemid-103 .article-details,
.com-content.view-article.itemid-104 .article-details, .com-content.view-article.itemid-105 .article-details,
.com-content.view-article.itemid-106 .article-details, .triomega-product { background: #fff; border-radius: 3px; padding: 30px; position: relative; }
.article-details .article-full-image { float: left; width: 40%; margin: 0 30px 20px 0; text-align: center; }
.article-details .article-full-image img { max-height: 380px; width: auto; max-width: 100%; }
.article-details .article-header h1 { font-size: 26px; font-weight: 600; margin: 0 0 20px; }
.article-details [itemprop="articleBody"] p { margin: 0 0 6px; }
.article-details::after { content: ''; display: table; clear: both; }
@media (max-width: 767.98px) { .article-details .article-full-image { float: none; width: auto; margin: 0 0 20px; } }

/* information articles (What is PET plastic?, Recycling) */
.com-content.view-article .article-details { background: #fff; border-radius: 3px; padding: 30px; position: relative; }
.com-content.view-article .article-details:has(.sp-page-builder) { background: none; padding: 0; }

/* ---- footer ---- */
#sp-bottom { background-color: #444; color: #b3b3b3; padding: 80px 0; border-bottom: 1px solid #3b3b3b; font-size: 14px; }
#sp-bottom .sp-module .sp-module-title, #sp-bottom .sp-module-title { font-size: 18px; color: #e5e5e5; text-transform: uppercase; margin-bottom: 40px; font-weight: 400; font-family: Poppins, sans-serif; }
#sp-bottom a { color: #b3b3b3; }
#sp-bottom a:hover { color: #fff; }
#sp-bottom ul.menu, #sp-bottom ul.mod-menu { list-style: none; padding: 0; margin: 0; }
#sp-bottom ul.menu > li, #sp-bottom ul.mod-menu > li { padding: 0 0 15px; border: 0; }
#sp-bottom p { margin: 0 0 15px; }
#sp-bottom img { max-width: 100%; height: auto; }
#sp-footer { background-color: #404040; color: #b3b3b3; padding: 25px 0; font-size: 14px; }
#sp-footer .sp-copyright { color: #b3b3b3; }
#sp-footer a { color: #fff; }