/* ==========================================================================
   HYPAR X - loaded after style.css on every page.
   1. Streamlined header + campaign hero (was an inline <style> on the old one-page index)
   2. Inner pages: banner, product detail, blog, reviews grid
   ========================================================================== */

/* 1. Header + hero --------------------------------------------------------- */
.main-nav{display:flex;align-items:center;gap:8px}.nav-link{padding:28px 14px}.nav-contact-mobile{display:none}.menu-btn{display:none}
.nav-link.active{color:var(--white);box-shadow:inset 0 -3px 0 var(--red)}
.hero{position:relative;overflow:hidden;background:#171615;border-bottom:1px solid #222}.hero-slider{height:clamp(560px,calc(100vh - var(--header-h)),820px)}
.hero-slide{background-image:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.18)),var(--hero-bg);background-size:cover;background-position:center top;background-repeat:no-repeat}
.hero-content{height:100%;max-width:1440px;margin:auto;padding:58px 90px 76px;display:flex;align-items:flex-end;justify-content:center;text-align:center}
.hero-text{display:flex;flex-direction:column;align-items:center;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero-count{color:#fff;font-size:12px;font-weight:600;letter-spacing:3px;margin-bottom:8px;opacity:.72}.hero-title{color:#fff;font-size:clamp(36px,4.2vw,64px);margin-bottom:10px}.hero-sub{color:rgba(255,255,255,.84);font-size:15px;font-weight:500;max-width:620px;margin:0 0 18px}.hero .btn-dark{background:rgba(8,8,8,.9);color:#fff;border:1px solid rgba(255,255,255,.45)}.hero .btn-dark:hover{background:var(--red);border-color:var(--red)}
.hero-image,.hero-watermark{display:none}
/* Justify only long body copy; every section title/description stays centred */
@media(min-width:768px){.brand-copy-info p,.extra-info p,.brand-info p,.faq-a p{text-align:justify;hyphens:auto}}
.intro,.intro-sub,.section-lead,.perfection-text,.super,.red-heading.center,.strong-heading,.rating-summary,.center-btn,.form-note{text-align:center}
.intro{display:flex;flex-direction:column;align-items:center}.intro .red-heading{max-width:1100px;margin:0 auto 14px}.intro-sub{max-width:760px;margin:0 auto}
.section-lead,.perfection-text{margin-left:auto;margin-right:auto}
.red-heading,.super,.intro-sub,.section-lead,.perfection-text{text-wrap:balance}
.stay-card p{min-height:72px}
@media(max-width:1180px){.main-nav{display:flex;gap:2px}.nav-link{padding:28px 9px}.menu-btn{display:none}}
@media(max-width:1000px){.header-actions .btn-light{display:none}.menu-btn{display:flex}.main-nav{position:fixed;top:var(--header-h);left:0;right:0;background:#0a0a0a;display:flex;flex-direction:column;align-items:stretch;padding:14px 18px 22px;gap:0;opacity:0;visibility:hidden;transform:translateY(-12px);transition:.25s}.main-nav.open{opacity:1;visibility:visible;transform:none;box-shadow:0 16px 28px rgba(0,0,0,.35)}.main-nav .nav-link{padding:13px 5px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px}.main-nav .nav-link.active{box-shadow:none;color:var(--red)}.nav-contact-mobile{display:flex}.hero-content{padding:42px 55px 66px}.hero-slider{height:clamp(500px,72vw,650px)}.hero-slide{background-position:center top}}
@media(max-width:560px){.hero-slider{height:auto;aspect-ratio:1672/941;min-height:0}.hero-slide{background-size:contain;background-position:center top}.hero-content{padding:0}.hero-text{display:none}.slider-arrow{width:34px;height:34px;bottom:10px}.slider-arrow.prev{left:10px}.slider-arrow.next{right:10px}.slider-dots{bottom:22px}.slider-dots button{width:16px}.slider-dots button.active{width:28px}.stay-updated{padding:44px 16px}.stay-card{min-height:350px;padding:28px 24px}.stay-card p{text-align:left}.stay-card .btn-inverse{align-self:flex-start;padding:12px 22px}.wa-widget{bottom:14px}.back-top{bottom:14px}}

/* 2. Inner pages ----------------------------------------------------------- */
.page-banner{
	background:
		radial-gradient(ellipse at 15% 0%, rgba(220,1,0,.22), transparent 55%),
		repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px),
		var(--black);
	color: var(--white);
	padding: 58px 0 50px;
	text-align: center;
}
.page-banner h1{ font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.25; margin-bottom: 14px; text-wrap: balance; }
.breadcrumb{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.breadcrumb a{ color: rgba(255,255,255,.9); }
.breadcrumb a:hover{ color: var(--red); }
.breadcrumb i{ font-size: 8px; color: var(--red); }
.empty-note{ text-align: center; color: var(--text-dim); padding: 40px 0; }
.cta-band{ background: #fafafa; border-top: 1px solid var(--line); }
.brand-copy-info .btn-dark{ margin-top: 10px; }

/* Filter bar and cards are links now */
a.filter-btn{ display: inline-block; }
a.product-img, a.strong-img{ display: block; }
.product-card h4 a:hover{ color: var(--red); }
.gallery-item.hidden{ display: none; }
.lightbox.single .lightbox-nav{ display: none; }
.hp-field{ position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-note.ok{ color: #15803d; font-weight: 500; }
.form-note.err{ color: var(--red); font-weight: 500; }
.enquiry-form button[disabled]{ opacity: .6; cursor: wait; }

/* Product detail */
.product-detail{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.product-detail-img{ aspect-ratio: 1 / 1; width: 100%; position: sticky; top: calc(var(--header-h) + 20px); }
.product-detail-img img{ padding: 20px; }
.product-detail-info .product-cat{ display: inline-block; margin: 0 0 10px; }
.product-detail-info .product-cat:hover{ text-decoration: underline; }
.product-detail-info .red-heading{ margin-bottom: 16px; }
.product-lead{ font-size: 16px; font-weight: 500; color: #222; text-align: left; }
.product-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.product-enquiry{ display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; }
.product-enquiry .contact-block:first-of-type{ padding-top: 22px; }

/* Content written in the admin editor */
.rich-text{ color: #222; }
.rich-text h2, .rich-text h3, .rich-text h4{ font-weight: 700; color: var(--black); margin: 28px 0 12px; line-height: 1.35; }
.rich-text h2{ font-size: 22px; }
.rich-text h3{ font-size: 19px; }
.rich-text h4{ font-size: 16px; }
.rich-text ul, .rich-text ol{ margin: 0 0 18px; padding-left: 22px; }
.rich-text li{ margin-bottom: 8px; }
.rich-text ul li::marker{ color: var(--red); }
.rich-text a{ color: var(--red); text-decoration: underline; }
.rich-text img{ height: auto; margin: 20px 0; }
.rich-text table{ width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.rich-text th, .rich-text td{ border: 1px solid #e3e3e3; padding: 10px 12px; text-align: left; }
.rich-text > *:last-child{ margin-bottom: 0; }

/* Blog */
.blog-section{ border-top: 1px solid var(--line); }
.blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card{ background: var(--white); border: 1px solid #ececec; display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.blog-card:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.09); transform: translateY(-4px); }
.blog-card-img{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f2f2f2; }
.blog-card-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-card-img img{ transform: scale(1.05); }
.blog-card-body{ padding: 24px 24px 26px; display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.blog-meta{ display: block; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.blog-meta i{ color: var(--red); margin-right: 4px; }
.blog-card h3{ font-size: 17px; font-weight: 700; line-height: 1.45; margin-bottom: 10px; }
.blog-card h3 a:hover{ color: var(--red); }
.blog-card p{ font-size: 14px; color: var(--text-dim); text-align: left; hyphens: none; }
.pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.pagination a{ min-width: 42px; height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: center; background: var(--smoke); font-weight: 600; font-size: 13px; }
.pagination a:hover, .pagination a.active{ background: var(--red); color: var(--white); }

.blog-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.blog-hero-img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 22px; }
.blog-article .blog-meta{ margin-bottom: 20px; }
.blog-share{ display: flex; align-items: center; gap: 10px; margin-top: 36px; padding-top: 22px; border-top: 1px solid #e3e3e3; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.blog-share a{ width: 40px; height: 40px; border-radius: 50%; background: var(--black); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.blog-share a:hover{ background: var(--red); }
.blog-sidebar{ display: grid; gap: 24px; position: sticky; top: calc(var(--header-h) + 20px); }
.side-box{ border: 1px solid #ececec; padding: 26px 24px; }
.side-box h3{ font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 15px; margin-bottom: 16px; padding-left: 12px; border-left: 3px solid var(--red); }
.side-post{ display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.side-post:last-child{ border-bottom: 0; padding-bottom: 0; }
.side-post img{ flex: none; width: 76px; height: 58px; object-fit: cover; }
.side-post b{ display: block; font-size: 13px; font-weight: 600; line-height: 1.45; }
.side-post small{ font-size: 11px; color: var(--grey); }
.side-post:hover b{ color: var(--red); }
.side-link{ display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; font-weight: 500; }
.side-link:last-child{ border-bottom: 0; }
.side-link i{ font-size: 11px; color: var(--red); }
.side-link:hover{ color: var(--red); }
.side-cta{ background: var(--black); color: var(--white); border-color: var(--black); }
.side-cta p{ color: rgba(255,255,255,.75); font-size: 14px; text-align: left; }

/* Reviews page grid */
.review-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

@media (max-width: 991px){
	.product-detail, .product-enquiry{ grid-template-columns: 1fr; gap: 36px; }
	.product-detail-img{ position: static; max-width: 560px; margin: 0 auto; }
	.blog-grid, .review-grid{ grid-template-columns: repeat(2, 1fr); }
	.blog-layout{ grid-template-columns: 1fr; gap: 40px; }
	.blog-sidebar{ position: static; }
}
@media (max-width: 767px){
	.page-banner{ padding: 40px 0 34px; }
	.blog-grid, .review-grid{ grid-template-columns: 1fr; }
	.product-actions > *{ flex: 1 1 100%; }
}