/* Cold Clarity :: single-product landing page
   Scoped under .ggu-lp so Flatsome's globals are neither fought nor extended. */

.ggu-lp{
  --bg:#F2F5F6; --surface:#FFFFFF; --ink:#0F181D; --accent:#C2470B;
  --marine:#0D4A57; --marine-deep:#072F38; --muted:#5A6C75;
  --line:#D9E1E4; --success:#1B7A4B;
  --r-sm:6px; --r-md:12px; --r-pill:999px;
  --s-xs:6px; --s-sm:12px; --s-md:20px; --s-lg:36px; --s-xl:72px;
  --wrap:1180px;
  background:var(--bg); color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400; line-height:1.6; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
.ggu-lp *,.ggu-lp *::before,.ggu-lp *::after{box-sizing:border-box}
.ggu-lp h1,.ggu-lp h2,.ggu-lp h3,.ggu-lp h4{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800; color:var(--ink); margin:0 0 var(--s-md); letter-spacing:-0.018em;
}
.ggu-lp h1{font-size:clamp(1.85rem,2.9vw,2.6rem); line-height:1.06}
.ggu-lp h2{font-size:clamp(1.65rem,3vw,2.5rem); line-height:1.08}
.ggu-lp h3{font-size:1.16rem; line-height:1.24; letter-spacing:-0.01em}
.ggu-lp p{margin:0 0 var(--s-md); max-width:62ch}
.ggu-lp a{color:var(--marine)}
/* the link colour above outranks .ggu-btn, which left the closing CTA
   rendering marine-on-orange. Anchors styled as buttons stay white. */
.ggu-lp a.ggu-btn,.ggu-lp a.ggu-btn:hover,.ggu-lp a.ggu-btn:focus{color:#fff}
.ggu-lp img{max-width:100%; height:auto; display:block}
.ggu-wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--s-md)}
.ggu-sec{padding:var(--s-xl) 0}
.ggu-eyebrow{
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s-sm);
}
.ggu-lede{font-size:1.06rem; color:var(--muted)}

/* ---------- announcement bar ---------- */
.ggu-bar{background:var(--marine-deep); color:#CFE3E8; font-size:.8rem; letter-spacing:.03em}
.ggu-bar .ggu-wrap{display:flex; gap:var(--s-lg); justify-content:center; flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
.ggu-bar span{display:flex; align-items:center; gap:7px; white-space:nowrap}
.ggu-bar svg{width:14px; height:14px; flex:none; stroke:#7FC4D2}

/* ---------- buttons ---------- */
.ggu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:"Archivo",sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-0.01em;
  padding:16px 34px; border-radius:var(--r-pill); border:0; cursor:pointer;
  background:var(--accent); color:#fff; text-decoration:none; width:100%;
  transition:background .15s ease, transform .06s ease;
}
.ggu-btn:hover{background:#A63C09; color:#fff}
.ggu-btn:active{transform:translateY(2px)}
.ggu-btn:focus-visible{outline:3px solid var(--marine); outline-offset:3px}
.ggu-btn svg{width:19px; height:19px; stroke:#fff; flex:none}

/* ---------- hero ---------- */
.ggu-hero{padding:22px 0 var(--s-xl)}
.ggu-hero .ggu-wrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}

.ggu-gal{position:relative}
.ggu-gal-main{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:var(--s-lg); overflow:hidden;
}
.ggu-gal-main img{max-height:100%; width:auto; object-fit:contain}
.ggu-gal-thumbs{display:flex; gap:var(--s-sm); margin-top:var(--s-sm); overflow-x:auto; padding-bottom:4px; scrollbar-width:thin}
.ggu-gal-thumbs button{
  flex:0 0 74px; height:74px; padding:6px; background:var(--surface); cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .15s ease;
}
.ggu-gal-thumbs button img{width:100%; height:100%; object-fit:contain}
.ggu-gal-thumbs button[aria-current="true"]{border:2px solid var(--marine); padding:5px}
.ggu-gal-thumbs button:focus-visible{outline:2px solid var(--marine); outline-offset:2px}

/* breakout: the certification seal overlaps the gallery frame */
.ggu-seal{
  position:absolute; right:-18px; top:-18px; z-index:2;
  background:var(--marine-deep); color:#fff; border-radius:var(--r-pill);
  width:104px; height:104px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.15; padding:8px;
}
.ggu-seal b{font-family:"Archivo",sans-serif; font-size:1.42rem; font-weight:800; display:block}
.ggu-seal span{font-size:.6rem; letter-spacing:.07em; text-transform:uppercase; color:#9FD2DD}

.ggu-offer{position:sticky; top:20px}
.ggu-offer h1{margin-bottom:10px}
.ggu-offer .ggu-sub{font-size:1rem; color:var(--muted); margin-bottom:12px; max-width:52ch}
.ggu-lp .ggu-model svg{width:15px; height:15px; flex:none; stroke:var(--marine)}
.ggu-model{
  display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--marine);
  background:#E3EDF0; border-radius:var(--r-sm); padding:5px 11px; margin-bottom:12px;
}
.ggu-stock{display:flex; align-items:center; gap:8px; font-size:.87rem; color:var(--success); font-weight:600; margin-bottom:12px}
.ggu-stock i{width:8px; height:8px; border-radius:50%; background:var(--success); display:block}

/* ---------- pack selector ---------- */
.ggu-packs{list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px}
.ggu-pack{position:relative}
.ggu-pack input{position:absolute; opacity:0; width:0; height:0}
.ggu-lp .ggu-pack input + label{
  display:grid; grid-template-columns:22px 1fr auto; gap:var(--s-sm); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:11px var(--s-md); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.ggu-lp .ggu-pack input + label:hover{border-color:#A9BFC6}
.ggu-lp .ggu-pack input:checked + label{border:2px solid var(--marine); background:var(--bg); padding:10px calc(var(--s-md) - 1px)}
.ggu-lp .ggu-pack input:focus-visible + label{outline:3px solid var(--marine); outline-offset:2px}
.ggu-dot{width:20px; height:20px; border-radius:50%; border:2px solid #A9BFC6; display:block; position:relative}
.ggu-lp .ggu-pack input:checked + label .ggu-dot{border-color:var(--marine)}
.ggu-lp .ggu-pack input:checked + label .ggu-dot::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--marine);
}
.ggu-lp .ggu-pack label > span{min-width:0; display:block}
.ggu-lp .ggu-pack-name{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:1.02rem; line-height:1.2}
.ggu-lp .ggu-pack-meta{display:block; font-size:.83rem; color:var(--muted); line-height:1.35}
.ggu-pack-price{text-align:right; line-height:1.2}
.ggu-lp .ggu-pack-price b{font-family:"Archivo",sans-serif; font-weight:800; font-size:1.24rem; display:block; color:var(--ink)}
.ggu-lp .ggu-pack-price span{display:block; font-size:.78rem; color:var(--muted)}
.ggu-tag{
  position:absolute; top:-9px; right:16px; z-index:1;
  background:var(--accent); color:#fff; font-size:.63rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill);
  font-family:"Archivo",sans-serif;
}

.ggu-total{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.ggu-total b{font-family:"Archivo",sans-serif; font-weight:800; font-size:2.1rem; line-height:1; color:var(--ink)}
.ggu-total span{font-size:.9rem; color:var(--muted)}

.ggu-reassure{list-style:none; margin:var(--s-md) 0 0; padding:0; display:grid; gap:9px}
.ggu-reassure li{display:flex; gap:9px; align-items:flex-start; font-size:.87rem; color:var(--muted)}
.ggu-reassure svg{width:15px; height:15px; flex:none; margin-top:3px; stroke:var(--marine)}

/* ---------- certification strip ---------- */
.ggu-certs{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface)}
.ggu-certs .ggu-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-lg); padding-top:26px; padding-bottom:26px}
.ggu-cert{display:flex; gap:12px; align-items:center; min-width:190px; flex:1}
.ggu-cert svg{width:26px; height:26px; flex:none; stroke:var(--marine)}
.ggu-cert b{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:.93rem; line-height:1.2}
.ggu-cert span{font-size:.79rem; color:var(--muted); line-height:1.3}

/* ---------- marine band ---------- */
.ggu-band{background:var(--marine-deep); color:#E4F0F3}
.ggu-band h2{color:#fff}
.ggu-band p{color:#B9D6DD}
.ggu-band-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-xl); align-items:center}
.ggu-contaminants{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.14); border-radius:var(--r-md); overflow:hidden}
.ggu-contaminants li{background:var(--marine-deep); padding:18px var(--s-md); font-size:.93rem; color:#E4F0F3}
.ggu-contaminants b{display:block; font-family:"Archivo",sans-serif; font-weight:800; color:#fff; font-size:1rem; margin-bottom:2px}

/* ---------- benefits bento (asymmetric, varied grounds) ---------- */
.ggu-bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-md)}
.ggu-tile{border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s-lg); background:var(--surface)}
.ggu-tile h3{margin-bottom:9px}
.ggu-tile p{font-size:.93rem; color:var(--muted); margin:0}
.ggu-tile--wide{grid-column:span 2}
.ggu-tile--marine{background:var(--marine); border-color:var(--marine); color:#E4F0F3}
.ggu-tile--marine h3{color:#fff}
.ggu-tile--marine p{color:#B9D6DD}
.ggu-tile--img{padding:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--surface)}
.ggu-tile--img img{width:100%; height:100%; object-fit:cover}
.ggu-tile--ground{background:var(--bg)}
.ggu-tile-num{font-family:"Archivo",sans-serif; font-weight:800; font-size:2.6rem; line-height:1; color:var(--marine); display:block; margin-bottom:8px}
.ggu-tile--marine .ggu-tile-num{color:#7FC4D2}

/* ---------- steps (split, not cards) ---------- */
.ggu-split{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s-xl); align-items:start}
.ggu-steps{list-style:none; margin:0; padding:0; counter-reset:step}
.ggu-steps li{
  counter-increment:step; display:grid; grid-template-columns:52px 1fr; gap:var(--s-md);
  padding:var(--s-lg) 0; border-top:1px solid var(--line);
}
.ggu-steps li:last-child{border-bottom:1px solid var(--line)}
.ggu-steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:"Archivo",sans-serif; font-weight:800; font-size:1.05rem; color:var(--marine);
  padding-top:2px;
}
.ggu-steps h3{margin-bottom:5px}
.ggu-steps p{margin:0; font-size:.95rem; color:var(--muted)}

/* ---------- comparison table ---------- */
.ggu-table{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden}
.ggu-table th,.ggu-table td{padding:16px var(--s-md); text-align:left; border-bottom:1px solid var(--line); font-size:.94rem; vertical-align:top}
.ggu-table thead th{background:var(--marine-deep); color:#fff; font-family:"Archivo",sans-serif; font-weight:800; font-size:.9rem}
.ggu-table thead th:first-child{background:var(--marine-deep)}
.ggu-table tbody th{font-weight:600; color:var(--ink); width:38%}
.ggu-table td{color:var(--muted)}
.ggu-table td.ggu-yes{color:var(--ink); font-weight:600}
.ggu-table tr:last-child th,.ggu-table tr:last-child td{border-bottom:0}
.ggu-tick{display:inline-flex; align-items:center; gap:7px}
.ggu-tick svg{width:15px; height:15px; flex:none}
.ggu-tick--y svg{stroke:var(--success)}
.ggu-tick--n svg{stroke:#A9BFC6}
.ggu-scroll{overflow-x:auto}

/* ---------- specs ---------- */
.ggu-specs{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.ggu-specs li{display:flex; justify-content:space-between; gap:var(--s-md); padding:14px 0; border-bottom:1px solid var(--line); font-size:.94rem}
.ggu-specs dt,.ggu-specs .k{color:var(--muted)}
.ggu-specs .v{font-weight:600; text-align:right}
.ggu-specs-img{border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:var(--s-lg)}

/* ---------- FAQ ---------- */
.ggu-faq{max-width:840px; margin:0 auto}
.ggu-faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; overflow:hidden}
.ggu-faq summary{
  cursor:pointer; padding:19px var(--s-md); font-family:"Archivo",sans-serif; font-weight:800;
  font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:var(--s-md); align-items:center;
}
.ggu-faq summary::-webkit-details-marker{display:none}
.ggu-faq summary::after{content:"+"; font-size:1.4rem; color:var(--marine); font-weight:400; line-height:1; flex:none}
.ggu-faq details[open] summary::after{content:"\2212"}
.ggu-faq summary:focus-visible{outline:3px solid var(--marine); outline-offset:-3px}
.ggu-faq-body{padding:0 var(--s-md) var(--s-md)}
.ggu-faq-body p{margin:0; font-size:.95rem; color:var(--muted); max-width:none}

/* ---------- closing CTA ---------- */
.ggu-final{background:var(--marine-deep); color:#fff; text-align:center}
.ggu-final h2{color:#fff}
.ggu-final p{color:#B9D6DD; margin-left:auto; margin-right:auto}
.ggu-final .ggu-btn{width:auto; min-width:330px; margin-top:var(--s-sm)}
.ggu-final-note{font-size:.83rem; color:#8FBCC6; margin-top:var(--s-md)}

/* ---------- sticky buy bar ---------- */
.ggu-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(13,74,87,.12);
  transform:translateY(105%); transition:transform .28s ease; visibility:hidden;
}
.ggu-sticky.is-on{transform:translateY(0); visibility:visible}
.ggu-sticky .ggu-wrap{display:flex; align-items:center; gap:var(--s-md); padding-top:11px; padding-bottom:11px}
.ggu-sticky img{width:46px; height:46px; object-fit:contain; flex:none}
.ggu-sticky-txt{flex:1; min-width:0}
.ggu-sticky-txt b{display:block; font-family:"Archivo",sans-serif; font-weight:800; font-size:.92rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ggu-sticky-txt span{font-size:.82rem; color:var(--muted)}
.ggu-sticky .ggu-btn{width:auto; padding:14px 30px; font-size:.97rem; flex:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ggu-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ggu-tile--wide{grid-column:span 2}
}
@media (max-width:880px){
  .ggu-lp{font-size:16px}
  .ggu-sec{padding:48px 0}
  .ggu-hero .ggu-wrap,.ggu-band-grid,.ggu-split{grid-template-columns:minmax(0,1fr); gap:var(--s-lg)}
  .ggu-offer{position:static}
  .ggu-seal{width:82px; height:82px; right:-6px; top:-10px}
  .ggu-seal b{font-size:1.1rem}
  .ggu-contaminants{grid-template-columns:minmax(0,1fr)}
  .ggu-bento{grid-template-columns:minmax(0,1fr)}
  .ggu-tile--wide{grid-column:span 1}
  .ggu-tile--img{min-height:220px}
  /* one line only on phones: three stacked rows pushed the buy box down
     by roughly 70px for no gain. Free shipping is the strongest of the three. */
  .ggu-bar .ggu-wrap{gap:var(--s-md); font-size:.74rem; flex-wrap:nowrap}
  .ggu-bar .ggu-wrap span:not(:first-child){display:none}
  /* a full-width square image ate the whole phone viewport before any copy */
  .ggu-gal-main{aspect-ratio:4/3; padding:var(--s-md)}
  .ggu-gal-thumbs button{flex:0 0 62px; height:62px}
  .ggu-final .ggu-btn{width:100%; min-width:0}
  .ggu-certs .ggu-wrap{gap:var(--s-md)}
  .ggu-cert{flex:1 1 44%; min-width:0}
  body.ggu-has-sticky{padding-bottom:78px}
}
@media (max-width:560px){
  .ggu-sticky-txt span{display:none}
  .ggu-sticky .ggu-btn{padding:13px 20px}
  .ggu-lp .ggu-pack input + label{grid-template-columns:20px 1fr auto; padding:13px 14px}
  .ggu-table th,.ggu-table td{padding:13px 12px; font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .ggu-lp *,.ggu-sticky{transition:none !important; animation:none !important}
}