/* ION Live Science · spacing system (9.2.32)
   Loaded last on every page. One vertical rhythm for all sections:
   --section is the gap between two sections, --half is each side's share. */

:root:not(.admin-theme){
 --section:clamp(80px,9vw,136px);
 --half:clamp(40px,4.5vw,68px);
 --stack:clamp(28px,3vw,44px);
}

/* ---------- Home ---------- */
.page-home main>.test200{padding-block:clamp(56px,6vw,96px) var(--half)}
.page-home main>:is(.why,.certs,.sizes,.research,.faq-home){padding-block:var(--half)}
.page-home main>.clients-sec{padding-block:clamp(56px,7vw,104px);margin-block:var(--half) 0}
.page-home main>.clients-sec+.faq-home{padding-top:clamp(56px,6vw,96px)}
.page-home main>.closer{margin:var(--half) var(--gutter) var(--half)}

/* Hero facts: three items stay on one row on phones */
@media (max-width:560px){
 .hero-light .hl-center .hl-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
 .hero-light .hl-center .hl-facts li{min-width:0;text-align:center}
 .hero-light .hl-center .hl-facts b{font-size:1.125rem;white-space:nowrap}
 .hero-light .hl-center .hl-facts span{font-size:.75rem}
}

/* Size cards: same top edge for every heading, buttons share one baseline */
.size-card{min-width:0}
.size-card>.btn,.size-card>.inline-cart{margin-top:auto}
.size-card .size-price{margin:12px 0 18px}
.size-card--glass .size-flag--glass{position:absolute;top:24px;left:24px;margin:0;max-width:calc(100% - 48px)}
.size-glass-action{margin:auto 0 0;white-space:normal;line-height:1.2}
.size-card--glass .size-price strong{font-size:1.625rem}
@media (max-width:700px){
 .size-card--glass .size-flag--glass{top:16px;left:16px;max-width:calc(100% - 32px);padding:4px 8px;font-size:.625rem;line-height:1.3}
 .size-card .size-price{margin:8px 0 12px}
 .size-card--glass .size-price strong,.size-card .size-price strong{font-size:1.25rem}
 .size-glass-action{margin:auto 0 0;padding:10px 8px;font-size:.8125rem}
}

/* ---------- Product grid (shop, category, 20L) ---------- */
.product-card{height:100%}
.product-body{display:flex;flex-direction:column;flex:1;min-width:0}
.product-bottom{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(1.1em,auto) auto;align-items:start;justify-items:start;row-gap:2px;margin-top:auto;padding-top:12px}
.product-bottom>.price{grid-row:1}
.product-bottom>.mrp-note{grid-row:2}
.product-bottom>:is(.btn,.inline-cart,form){grid-row:3;margin-top:10px}
@media (max-width:760px){.product-bottom>:is(.btn,.inline-cart,form){width:100%}}

/* ---------- Page openers ---------- */
.page-head{padding-block:clamp(48px,7vw,112px) clamp(28px,3.5vw,48px)}
.page-head+.section-pad,.page-head+.faq-list{padding-top:0}

/* ---------- About ---------- */
.page-about main>.about-extra{padding-block:var(--half)}
.page-about main>.about-origin{padding-top:var(--section)}
.page-about main>.about-innovation{margin-block:var(--half)}
.page-about main>.about-innovation+.about-extra{padding-top:var(--half)}
.page-about main>.story-long,.page-about .about-origin+.story-long{padding-block:var(--half)}
.page-about main>.section-pad{padding-block:var(--half) var(--section)}

/* ---------- 20L water ---------- */
.page-20l-water .planner{margin-bottom:0}
.page-20l-water main>.planner+.section-pad{padding-block:var(--section) var(--half)}
.page-20l-water .water20-delivery{padding-block:var(--section)}
.page-20l-water .water20-delivery h2+p{margin-top:20px}
.page-20l-water .water20-delivery p+.btn{margin-top:28px}

/* ---------- Company profile ---------- */
.cp-timeline{padding-block:var(--section)}
.cp-timeline h2{margin-bottom:var(--stack)}
.cp-bio{padding-block:var(--section)}
.cp-campus-copy{padding-block:var(--half)}
.cp-leaders{padding-bottom:var(--section)}
.cp-end{margin-bottom:var(--half)}
.cp-end-grid{padding-top:var(--half)}
.cp-end-grid>div{padding-bottom:var(--half)}

/* ---------- Last block before the footer wave ---------- */
main>:last-child:is(.section-pad,.shop-layout,.contact-layout,.basket-layout,.faq-list){padding-bottom:var(--section)}

/* About: cards matched the page colour, so their padding read as stray indents */
:root:not([data-theme="dark"]) .page-about :is(.about-innovation,.about-origin-milestones li){background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
:root:not([data-theme="dark"]) .page-about .about-innovation-card{background:#f5f5f7}

/* Narrow phones (320px): long labels wrap instead of pushing the page sideways */
.cert-all{max-width:100%;white-space:normal;text-align:center;line-height:1.25}
.product-bottom>.price{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}