/* newage content pages: CMS-driven information pages, about us, visit us, contact, sitemap */
.info-page { max-width: 980px; }
.info-page > h1 { font-size: clamp(28px, 3.2vw, 40px); text-transform: uppercase; margin: 6px 0 18px; }
.info-body { font-size: 16.5px; line-height: 1.7; color: #33302e; }
.info-body h2 { font-size: 24px; text-transform: uppercase; margin: 28px 0 10px; }
.info-body h3 { font-size: 20px; margin: 22px 0 8px; }
.info-body p { margin: 0 0 16px; }
.info-body a { color: var(--orange-cta); text-decoration: underline; text-underline-offset: 3px; }
.info-body ul, .info-body ol { margin: 0 0 18px; padding-left: 22px; }
.info-body img { height: auto; }
.info-body table { max-width: 100%; border-collapse: collapse; }
.info-body td, .info-body th { border: 1px solid var(--line); padding: 8px 12px; }
.info-wide { max-width: none; }

/* about us: ids come from the page's CMS content */
#about-us a { white-space: nowrap; }
#banner-top { margin-bottom: 24px; }
#banner-bottom { margin-bottom: 34px; }
#our-story { display: grid; grid-template-columns: 1.25fr .75fr; margin-bottom: 24px; gap: 32px; }
#our-story-img { margin-top: 12px; }
#our-story-img img { width: 100%; max-width: 787px; height: 340px; object-fit: cover; }
#visit-us { display: grid; grid-template-columns: .6fr 1.4fr; gap: 16px 32px; margin-bottom: 34px; align-items: start; }
/* intro heading in the left column, everything else stacked in the right one */
#visit-us > h2:first-child { grid-column: 1; grid-row: 1 / span 12; margin: 0; }
#visit-us > :not(h2:first-child) { grid-column: 2; margin-top: 0; }
#map { margin-top: 12px; height: 320px; border: 1px solid var(--line); background: #e9e5e1; }
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video, .embed-responsive .embed-responsive-item { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1199px) {
  #our-story, #visit-us { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 12px; }
  #visit-us > h2:first-child, #visit-us > :not(h2:first-child) { grid-column: 1; grid-row: auto; }
  #our-story-img, #map { margin-top: 0; }
  #map { margin-bottom: 24px; height: 300px; }
}
@media (max-width: 575px) { #map { height: 280px; } }

/* contact */
.contact-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-md); margin-bottom: var(--g-lg); }
.contact-box { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 20px; display: grid; gap: 6px; justify-items: start; }
.contact-box .icon { font-size: 28px; color: var(--orange); stroke-width: 1.6; }
.contact-box h2 { font-size: 18px; text-transform: uppercase; }
.contact-box p { margin: 0; color: #454341; }
.contact-box a { color: var(--orange-cta); font-weight: 600; }
.contact-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-lg); align-items: start; }
@media (max-width: 860px) { .contact-grid3, .contact-main { grid-template-columns: minmax(0, 1fr); } }

/* sitemap */
.sitemap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-lg); }
.sitemap ul { margin: 0; padding-left: 18px; line-height: 1.9; }
.sitemap > div > ul { padding-left: 0; list-style: none; }
.sitemap > div > ul > li > a { font-weight: 600; }
.sitemap a:hover { color: var(--orange-text); }
@media (max-width: 700px) { .sitemap { grid-template-columns: minmax(0, 1fr); } }

/* delivery information: free-delivery postcode check */
.postage { margin: var(--g-md) 0; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; max-width: 520px; display: grid; gap: 10px; }
.postage label { font-weight: 600; }
.postage .fpanel-row input { max-width: 180px; }
.postage-res { font-weight: 600; }
.postage-res.ok { color: #2f6b3d; }
.postage-res.no { color: var(--orange-cta); }

/* error and message pages */
.msg-page { max-width: 640px; }

/* brands page */
.brand-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--g-md); }
.brand-tile { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; transition: border-color .25s ease, box-shadow .25s ease; }
.brand-tile:hover { border-color: #D8D2CC; box-shadow: 0 10px 24px -16px rgba(32, 32, 32, .5); }
.brand-tile img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 1080px) { .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* blog */
.blog-list { display: grid; gap: var(--g-md); }
.blog-card { display: grid; gap: 12px; }
.blog-card h2 a:hover { color: var(--orange-text); }
.blog-meta { margin: 0; font-size: 14px; color: #6b6764; }
.blog-meta a { color: var(--orange-cta); font-weight: 600; }
.blog-img img, .blog-hero { width: 100%; height: auto; border-radius: 5px; background: #e9e5e1; }
.blog-img.thumb img { max-width: 220px; }
.blog-article { display: grid; gap: var(--g-md); max-width: 920px; }
.blog-block h2 { font-size: 24px; text-transform: uppercase; margin-bottom: 14px; }
.blog-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-md); }
.blog-related img { max-width: 100%; height: auto; }
.blog-author { display: flex; gap: 18px; align-items: flex-start; }
.blog-author img { border-radius: 50%; }
.blog-comments, .blog-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blog-replies { margin: 12px 0 0 18px; padding-left: 14px; border-left: 3px solid var(--line); }
.blog-latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.blog-latest .description { font-size: 14px; color: #6b6764; }
.blog-search { margin-top: 12px; }
.count { font-size: 14px; color: #6b6764; }
@media (max-width: 700px) { .blog-related { grid-template-columns: minmax(0, 1fr); } }