/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root {
  --primary-color: #007337;
  --secondary-color: #55ae53;
  --dark-green: #004817;
  --light-green: #edfce8;
  --mint-color: #e6ffcc;
  --black-color: #1d2930;
  --grey-color: #f4f6f4;
}


/* Exact brand font from cifclean.co.uk */
@font-face {
  font-display: swap;
  font-family: "FS Meridian Trial";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/FSMeridianTrial-Medium.otf") format("opentype");
}
@font-face {
  font-display: swap;
  font-family: "FS Meridian Trial";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/FSMeridianTrial-Bold.otf") format("opentype");
}

/* Site CSS */

*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body, body p, body div{
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6em;
	color: var(--black-color);
}
body{background: #fff;}
body p{margin-bottom: 20px;}
body a{color: var(--primary-color); text-decoration: none; font-weight: 700;}
body a:hover{text-decoration: underline; color: var(--dark-green);}
body img{max-width: 100%; height: auto;}
h1, h2, h3, .infinite-wordmark{font-family: "FS Meridian Trial", sans-serif;}
h1{font-size: 2.2rem; line-height: 1.18em; font-weight: 500; letter-spacing: 0;}
h2{font-size: 2rem; line-height: 1.2em; margin-bottom: 15px; font-weight: 700; color: var(--primary-color);}
h3{font-size: 1.15rem; font-weight: 500; line-height: 1.4em;}
p{font-size: 1rem;}
.container{width: min(1120px, calc(100% - 40px)); margin: 0 auto;}

/* The live site renders a single ~448px-wide column centered on all screens */
.site-header, main{max-width: 448px; margin-left: auto; margin-right: auto;}

.site-header{text-align: center; padding: 20px 0 14px; background: #fff;}
.logo-link{display: inline-block;}
.site-logo{display: block; width: 82px; margin: 0 auto;}

.hero-section{background: #fff;}
.hero-title-panel{background: var(--primary-color); color: #fff; padding: 24px 34px; text-align: center;}
.hero-title-panel h1{max-width: 315px; margin: 0 auto; color: #fff;}
.hero-media{background: #e9ecef; overflow: hidden;}
.hero-video{display: block; width: 100%; height: auto; object-fit: contain;}

.intro-section{padding: 45px 0 30px; overflow: hidden;}
.intro-grid{display: grid; gap: 28px;}
.intro-copy{text-align: center; position: relative;}
.infinite-wordmark{margin: 0 auto 10px; color: var(--primary-color); font-size: 1.875rem; line-height: 1; font-weight: 700; text-transform: uppercase; letter-spacing: 6px; white-space: nowrap;}
.infinite-wordmark span{font-weight: 500; letter-spacing: 0; margin: 0 .02em;}
.intro-copy h2{font-size: 1.25rem; color: var(--primary-color);}
.intro-grid > *{min-width: 0;}
.feature-carousel{position: relative; min-width: 0;}
.feature-carousel .slick-list, .feature-carousel .slick-track{min-width: 0;}
.feature-slide img{display: block; width: 100%; height: auto;}

/* Drifting probiotic dust-particle backgrounds — one continuous layer behind
   both the intro and surface sections so the parallax flows without a seam.
   Mirrors cifclean.co.uk: 30% opacity, behind content, blurred particles. */
.probiotics-zone{position: relative; overflow: hidden; background: #fff;}
.probiotics-zone > .intro-section, .probiotics-zone > .surface-section{position: relative; z-index: 1; background: transparent;}
.dust-layer{position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none;}
.dust-layer .dust{position: absolute; will-change: transform; transform: translateY(var(--py, 0));}
.dust-layer .dust img{display: block; width: 300px; max-width: 66vw; height: auto;}

/* Slick theming — green arrows/dots like the live site */
/* Shared control row: prev arrow · centred dots · next arrow */
.carousel-controls{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px;}
.carousel-controls .slick-prev{order: 0;}
.carousel-controls .slick-dots{order: 1;}
.carousel-controls .slick-next{order: 2;}
.carousel-controls .slick-prev, .carousel-controls .slick-next{position: static; top: auto; width: auto; height: auto; margin: 0; padding: 0; transform: none; background: transparent; border: 0; line-height: 0; color: #172331; cursor: pointer;}
/* Custom SVG chevrons replace slick's default arrow glyphs */
.carousel-controls .slick-prev:before, .carousel-controls .slick-next:before{content: none;}
.carousel-controls .slick-arrow svg{display: block; height: 36px; width: auto;}
.carousel-controls .slick-dots{position: static; bottom: auto; width: auto; display: flex; margin: 0; padding: 0;}
.slick-dots li button:before{font-size: 11px; color: #172331; opacity: 1;}
.slick-dots li.slick-active button:before{color: #87cdb4; opacity: 1;}

.surface-section{padding: 8px 0 24px; background: #fff; text-align: center; overflow: hidden;}
.surface-section h2{padding: 24px; margin: 0; color: var(--primary-color);}
.surface-icons{padding: 8px 24px 24px;}
.surface-icons-row{display: flex; justify-content: center; gap: 28px; margin-bottom: 24px;}
.surface-icons-row:last-child{margin-bottom: 0;}
.surface-icon{display: flex; flex-direction: column; align-items: center; gap: 12px; width: 75px;}
.surface-icon-circle{display: flex; align-items: center; justify-content: center; width: 75px; height: 75px; border-radius: 50%; background: var(--primary-color); color: #fff;}
.surface-icon-circle svg{width: 42px; height: 42px; display: block;}
.surface-icon-label{color: var(--primary-color); font-size: 1rem; font-weight: 700; line-height: 1.2em;}
.surface-media{padding: 0 24px;}
.surface-video{display: block; width: 100%; height: auto; border-radius: 16px;}

.anti-bac-section{background: #289DA7; color: #fff; padding: 28px 0;}
.anti-bac-inner{width: min(560px, calc(100% - 24px)); margin: 0 auto; text-align: center;}
.anti-bac-section h2{color: #fff;}
.anti-bac-section h3{color: #fff; font-weight: 500; margin-bottom: 18px;}
.small-print{font-size: .78rem; line-height: 1.35em; color: #fff; margin-top: 6px;}
.anti-bac-image{display: block; margin: 0 auto 6px; border-radius: 8px;}

.range-section{padding: 40px 0; background: #fff;}
.range-section h2{color: var(--primary-color); text-align: center;}
.range-subtitle{color: var(--black-color); text-align: center; margin-bottom: 28px;}
.range-section h3.range-subtitle{font-weight: 500;}
.product-carousel{margin: 0 -7px; padding: 0 30px;}
.product-carousel .slick-slide{height: auto;}
.product-carousel .slick-track{display: flex;}
.product-carousel .slick-slide > div{height: 100%; padding: 0 7px;}
/* Product-carousel arrows/dots now live in the sibling .carousel-controls row */
.product-card{display: flex; flex-direction: column; align-items: center; height: 100%; padding: 14px 10px; background: #fff; text-align: center;}
.product-card:hover{text-decoration: none;}
.product-card img{width: 100%; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 14px;}
.product-card span{display: block; color: var(--primary-color); font-size: .95rem; line-height: 1.25em; font-weight: 700;}

.recommend-section{padding: 42px 0 34px; background: #fff;}
.recommend-grid{display: grid; gap: 24px; align-items: center; text-align: center;}
.recommend-section video{width: 100%; border-radius: 16px; background: #eef2ee;}
.recommend-section h3{font-size: .9rem; line-height: 1.35em; font-weight: 500;}

.site-footer{padding: 26px 0 46px; text-align: center; background: var(--light-green);}
.site-footer h2{margin-bottom: 12px;}
.social-nav{display: flex; justify-content: center; align-items: center; gap: 8px;}
.social-link{display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 999px; background: #fff; margin: 12px;}
.social-link:hover{text-decoration: none;}
.social-icon{display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;}
.social-icon svg{display: block;}

.product-page{background: var(--grey-color);}
.product-page .site-header{background: transparent;}
.product-detail{padding: 38px 0 58px;}
.product-detail-grid{display: grid; gap: 28px; align-items: center; background: #fff; border-radius: 8px; padding: 24px;}
.product-detail img{width: min(210px, 50%); margin: 0 auto;}
.product-detail h1{margin-bottom: 18px;}
.back-link{display: inline-block; margin-bottom: 22px;}

/* Surface / Anti-Bac / Range product-detail tweaks for the wider product pages */
.product-page main{max-width: none;}
@media (min-width: 760px) {
  .product-page .product-detail-grid{grid-template-columns: .8fr 1fr; padding: 42px;}
}

@media (max-width: 420px) {
  .container{width: calc(100% - 40px);}
  h1{font-size: 2.05rem;}
  .infinite-wordmark{font-size: 1.55rem; letter-spacing: 4px;}
  .surface-section h2, .anti-bac-section h2, .range-section h2, .recommend-section h2{font-size: 1.9rem;}
  .product-card{padding: 12px 8px;}
  .product-card span{font-size: .88rem;}
}