/*
Theme Name: BubbleStix
Theme URI: https://bubblestix.com
Author: Central Park Entertainment LLC
Author URI: https://bubblestix.com
Description: Server-rendered BubbleStix storefront. Replaces the previous headless React shell; WooCommerce keeps its own cart and checkout.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: bubblestix
WC requires at least: 8.0
WC tested up to: 11.1
*/


:root{--ink:#25368b;--body:#3f4b66;--pink:#be2e65;--sky:#edf4ff;--rose:#fff1f5;--mint:#eaf5ee;--white:#fff;--line:#dce2ed;--yellow:#ffeb9e;--display:Fredoka,'Arial Rounded MT Bold',sans-serif;--sans:DM,Arial,sans-serif;--gutter:clamp(22px,4.4vw,76px);--content:1320px;--space:100px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;color:var(--ink);background:var(--white);font:16px/1.55 var(--sans)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer;border:0}button,a,input{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;object-fit:cover}figure,h1,h2,h3,p{margin:0}p{color:var(--body)}h1,h2,h3{line-height:1.06}h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-1.3px}h2{font-size:clamp(36px,3.9vw,56px)}h3{font-weight:700;font-size:20px;line-height:1.25}ul{padding-left:20px}svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;top:-80px;left:20px;padding:12px;background:white;z-index:20}.skip:focus{top:10px}:focus-visible{outline:3px solid var(--pink);outline-offset:5px}.section{max-width:calc(var(--content) + 2*var(--gutter));padding:var(--space) var(--gutter);margin:0 auto}.announcement{background:var(--ink);color:white;text-align:center;font-size:12px;letter-spacing:.3px;padding:9px 20px}.announcement span{color:#ffbcd2;padding:0 18px}.header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:26px;max-width:1500px;padding:0 var(--gutter);margin:auto}.logo{display:block;flex-shrink:0}.logo img{width:240px;height:auto}.header nav{display:flex;gap:25px;font-size:14px;font-weight:600}.header nav a{padding:9px 0}.header nav a:hover,.footer a:hover{color:var(--pink)}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:54px;padding:14px 28px;border-radius:100px;background:var(--ink);color:white;white-space:nowrap;font-size:15px;font-weight:700;transition:background .18s,transform .18s}.button:hover{transform:translateY(-2px);background:#162569}.button.pink{background:var(--pink);color:white}.button.pink:hover{background:#a32054}.button.white{background:white;color:var(--ink)}.button.white:hover{background:var(--rose)}.button.outline{border:1px solid var(--ink);background:transparent;color:var(--ink)}.button.outline:hover{background:var(--sky)}.header-shop{min-height:46px;padding:12px 23px;font-size:14px}.menu{display:none}#mobile-nav[hidden]{display:none}
.hero{background:var(--sky);position:relative}.hero-inner{max-width:1500px;margin:auto;display:grid;grid-template-columns:45% 55%;min-height:590px}.hero-copy{padding:68px 46px 52px var(--gutter);align-self:center}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2px;color:var(--pink);margin-bottom:18px}.hero h1{font-size:clamp(66px,6.5vw,96px);font-weight:600;line-height:.99;letter-spacing:-2.5px;margin:0 0 24px}.hero-description{font-size:19px;line-height:1.6;max-width:370px}.hero-actions{display:flex;align-items:center;gap:23px;margin-top:27px}.watch{background:none;display:flex;align-items:center;gap:9px;padding:0;font-size:12px;font-weight:700;white-space:nowrap}.mini-play{border:1px solid var(--ink);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-size:10px;padding-left:2px}.hero-offer{display:flex;align-items:center;gap:15px;margin-top:25px;font-size:12px;max-width:375px}.hero-offer strong{font-size:19px;white-space:nowrap}.hero-visual{position:relative;min-width:0;margin:22px 22px 22px 0;isolation:isolate}.hero-image{width:100%;height:100%;position:absolute;inset:0;object-position:65% center;border-radius:120px 24px 24px 24px}.made-seal{position:absolute;right:20px;bottom:24px;background:var(--white);color:var(--ink);width:116px;height:116px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 5px 20px #18285512;transform:rotate(8deg)}.made-seal svg{width:30px;height:30px;margin-bottom:5px}.made-seal strong{font-size:13px;line-height:1.15}.hero-inset{position:absolute;bottom:-33px;left:-50px;width:151px;padding:7px;background:white;transform:rotate(-7deg);box-shadow:0 8px 24px #15235921;border-radius:10px;z-index:2}.hero-inset img{height:147px;width:100%;object-position:50% 40%;border-radius:5px}.hero-inset figcaption{text-align:center;font-family:var(--display);font-size:15px;line-height:1.1;padding:9px 0 3px}.promise-strip{max-width:1500px;margin:0 auto;padding:36px var(--gutter) 26px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-bottom:1px solid var(--line)}.promise-strip>div{display:flex;gap:12px;align-items:center;font-size:12px;font-weight:600}.promise-strip svg{width:31px;height:31px}
.featured{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(35px,5.5vw,85px);align-items:center}.feature-main{position:relative}.feature-main>img{width:100%;height:auto;aspect-ratio:1.5;object-position:50%;border-radius:28px 28px 0 0}.badge{position:absolute;top:19px;left:19px;background:var(--yellow);padding:7px 17px;border-radius:50px;font-size:12px;font-weight:700}.equipment{background:var(--sky);display:grid;grid-template-columns:1fr 25px 1fr;padding:25px 22px 20px;align-items:center;border-radius:0 0 28px 28px;min-height:190px}.equipment>div{display:flex;align-items:center;flex-direction:column;gap:14px;text-align:center;font-size:12px;font-weight:600}.equipment img{height:103px;width:auto;max-width:140px;object-fit:contain}.equipment-plus{font-family:var(--display);font-size:32px;align-self:center}.feature-copy .eyebrow{margin-bottom:10px}.feature-copy h2{font-size:clamp(42px,4.4vw,61px);line-height:1.02}.feature-intro{font-size:18px;margin:17px 0 24px}.includes-label{font-size:12px;margin-bottom:13px;color:var(--body)}.included{display:grid;grid-template-columns:1fr 1fr;gap:23px 18px}.included>div{display:flex;align-items:flex-start;gap:9px}.included svg{width:28px;height:28px}.included p{font-size:12px;line-height:1.4}.included strong{color:var(--ink);display:block;font-size:13px;margin-bottom:4px}.included span{display:block}.feature-purchase{display:flex;align-items:center;gap:26px;margin-top:27px;padding-top:25px;border-top:1px solid var(--line)}.price{font:600 41px/1 var(--display);letter-spacing:-1px;color:var(--ink)}.feature-purchase .button{flex:1}.community{font-size:12px;text-align:center;margin-top:18px;color:var(--ink)}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;margin-bottom:43px}.section-heading>p{font-size:17px;max-width:340px;margin-bottom:5px}.benefits{background:var(--rose);border-radius:70px 70px 0 0}.benefits .section{padding-top:74px;padding-bottom:74px}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:43px 39px}.benefit-grid article{display:flex;gap:17px}.benefit-icon{display:grid;place-items:center;width:52px;height:52px;flex-shrink:0;border-radius:50%;background:white;color:var(--pink)}.benefit-icon svg{width:30px;height:30px}.benefit-grid h3{font-size:19px;margin:2px 0 10px}.benefit-grid p{font-size:14px;line-height:1.65}.text-link{font-weight:700;font-size:14px;border-bottom:1px solid var(--ink);padding:7px 0;white-space:nowrap}.text-link span{margin-left:16px}.kit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.kit-card{border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;background:white}.kit-photo{position:relative}.kit-photo img{width:100%;height:340px}.kit-card:nth-child(2) .kit-photo img{object-position:52% 44%}.ribbon{position:absolute;left:16px;top:16px;background:var(--pink);color:white;border-radius:30px;padding:7px 14px;font-size:12px;font-weight:700}.kit-body{padding:25px 23px;display:flex;flex-direction:column;flex:1}.kit-body h3{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.4px}.kit-body ul{font-size:13px;color:var(--body);line-height:1.6;margin:17px 0 24px;padding:0;list-style:none}.kit-body li{padding-left:16px;position:relative;margin-bottom:8px}.kit-body li:before{content:'•';position:absolute;left:0;color:var(--pink)}.kit-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}.kit-bottom>strong{font-family:var(--display);font-size:27px;font-weight:500}.kit-bottom .button{min-height:44px;padding:11px 19px;font-size:12px}.featured-kit{border-color:#e8b4c8;background:var(--rose)}
.video-section{max-width:1440px;margin:0 auto;background:var(--ink);color:white;display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden;border-radius:0 64px 0 64px}.video-copy{padding:60px var(--gutter)}.video-copy .eyebrow{color:#ffbcd2}.video-copy h2{font-size:clamp(37px,3.7vw,55px)}.video-copy>p:not(.eyebrow){color:white;font-size:17px;margin:20px 0 27px;max-width:320px}.video-note{font-size:12px;line-height:1.7;max-width:290px;margin-top:33px;color:#d9e3ff}.video-cover{position:relative;padding:0;min-height:470px;background:var(--ink)}.video-cover img{width:100%;height:100%;position:absolute;inset:0;object-position:68% center}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:86px;height:86px;border-radius:50%;background:white;color:var(--pink);font-size:24px;padding-left:5px;box-shadow:0 8px 30px #10215b33}.video-cover:hover .play{background:var(--rose)}
.gallery{display:grid;grid-template-columns:1.06fr .85fr 1.3fr .85fr 1fr;align-items:center;gap:14px}.gallery figure:nth-child(2){transform:translateY(24px)}.gallery figure:nth-child(2) img{object-position:85% center}.gallery figure:nth-child(3) img{object-position:75% center}.gallery figure:nth-child(4){transform:translateY(-22px)}.gallery img{width:100%;height:295px;border-radius:18px}.gallery figure:nth-child(3) img{height:350px}.gallery figure:nth-child(2) img,.gallery figure:nth-child(4) img{height:245px}.gallery-section{padding-bottom:115px}.reviews-section{background:var(--sky)}.review-heading{text-align:center;margin:0 auto 43px;max-width:820px}.review-heading h2{font-size:45px}.review-heading>p{font-size:16px;max-width:660px;margin:18px auto 0}.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.review{border-radius:18px;background:white;overflow:hidden;display:flex;flex-direction:column}.review>img{width:100%;height:190px}.review blockquote{margin:0;padding:22px 20px 18px}.review h3{font-family:var(--display);font-size:22px;font-weight:500;margin-bottom:13px}.review blockquote p{font-size:13px;line-height:1.75}.review figcaption{padding:0 20px 24px;margin-top:auto;font-size:11px;font-weight:700;color:var(--ink)}
.closing{display:grid;grid-template-columns:.9fr 1.1fr;background:var(--pink);color:white;max-width:1440px;margin:auto}.closing>div{padding:66px var(--gutter)}.closing h2{font-size:clamp(41px,4.4vw,65px)}.closing p{font-size:16px;max-width:300px;color:white;margin:22px 0 29px}.closing>img{width:100%;height:100%;object-position:53%;max-height:590px}.newsletter{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;padding-top:66px;padding-bottom:66px}.newsletter h2{font-size:36px}.signup-field{display:flex;border-bottom:1px solid var(--ink);padding:10px 0}.signup input{min-width:0;flex:1;border:0;background:transparent;font-size:16px;padding:8px 8px 8px 0;color:var(--ink)}.signup button{background:transparent;font-size:13px;font-weight:700}.signup button span{margin-left:12px}.signup-status{font-size:12px;margin-top:10px;min-height:19px}.footer{background:var(--sky);padding:60px var(--gutter) 22px}.footer-top{display:grid;grid-template-columns:1fr 1.7fr;gap:80px;max-width:1320px;margin:auto}.footer-brand .logo img{width:240px}.footer-brand p{font-size:14px;line-height:1.7;max-width:280px;margin:19px 0}.footer-brand>a:not(.logo){font-size:13px}.footer-links{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:28px}.footer-links>div{display:flex;align-items:flex-start;flex-direction:column;gap:9px;font-size:12px}.footer-links h3{font-size:14px;margin-bottom:8px}.footer-links button{background:none;padding:0;font-size:12px}.footer-links span{color:var(--body)}.footer-bottom{max-width:1320px;margin:43px auto 0;border-top:1px solid #ced8ee;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--body)}
dialog{padding:35px;border:0;border-radius:25px;max-width:min(940px,calc(100vw - 30px));max-height:90vh;color:var(--ink);box-shadow:0 24px 80px #16256955}dialog::backdrop{background:#182452bd}.close-dialog{position:absolute;right:12px;top:9px;background:white;width:40px;height:40px;border-radius:50%;font-size:28px;z-index:2}.close-dialog:hover{background:var(--rose)}dialog h2{font-size:34px;margin:0 30px 25px 0}dialog video{display:block;width:100%;max-height:70vh;background:#111;border-radius:12px}.quick-view{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.quick-view>img{width:100%;height:450px;border-radius:16px}.quick-view h2{line-height:1.04}.quick-view ul{font-size:14px;color:var(--body);line-height:1.7;margin:23px 0}.quick-view .price{font-size:35px}.preview-note{font-size:12px;margin-top:17px;max-width:320px}#kit-dialog{width:900px}
.direction{max-width:1080px;margin:auto;padding:50px 30px}.direction h1{font-size:62px;margin-top:35px}.direction>p{font-size:18px;max-width:760px;margin:23px 0}.direction h2{font-size:33px;margin:45px 0 19px}.direction li{margin:10px 0;color:var(--body)}.direction .button{margin:10px 0}.brand-study{display:grid;grid-template-columns:1fr 1fr;gap:20px}.brand-study>div{background:var(--sky);padding:32px;min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:23px;border-radius:20px}.brand-study img{width:100%;max-width:398px;height:auto;object-fit:contain}.brand-study p{font-size:12px}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatches>div{border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:12px}.swatches i{display:block;height:80px}.swatches span{display:block;padding:10px}.direction table{border-collapse:collapse;width:100%;font-size:14px}.direction td,.direction th{padding:14px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}.direction .note{padding:20px;background:var(--rose);border-radius:16px;font-size:14px}
@media(min-width:1600px){.hero{border-radius:32px;max-width:1500px;margin:auto}.header{height:112px}.hero-copy{padding-left:70px}.hero-inner{min-height:650px}}
@media(max-width:1150px){.header{gap:22px}.logo img{width:207px}.header nav{gap:18px;font-size:12px}.hero-inner{grid-template-columns:46% 54%;min-height:550px}.hero-copy{padding-right:28px}.hero h1{font-size:73px}.hero-actions{gap:15px;flex-wrap:wrap}.hero-description{font-size:18px}.hero-inset{left:-20px;width:124px;bottom:-17px}.hero-inset img{height:124px}.hero-offer{flex-wrap:wrap;gap:4px 14px}.promise-strip{padding-top:31px;gap:15px}.promise-strip>div{font-size:11px;gap:8px}.featured{gap:40px}.included{gap:20px 13px}.included>div{gap:7px}.included strong{font-size:12px}.included span{font-size:11px}.included svg{width:25px}.feature-intro{font-size:16px}.kit-photo img{height:295px}.kit-body{padding:22px 17px}.kit-body h3{font-size:23px}.kit-bottom>strong{font-size:25px}.kit-bottom .button{padding:10px 15px}.benefit-grid{gap:35px 25px}.benefit-grid article{gap:12px}.benefit-grid h3{font-size:17px}.benefit-grid p{font-size:13px}.video-copy{padding:45px var(--gutter)}.review-grid{gap:15px}.review>img{height:160px}.review blockquote{padding:20px 15px}.review figcaption{padding-left:15px;padding-right:15px}.review h3{font-size:21px}.footer-top{gap:50px}.footer-links{gap:20px}}
@media(max-width:900px){:root{--space:75px}.header nav{display:none}.header-shop{margin-left:auto}.menu{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;width:28px;height:44px;background:none;padding:0}.menu span{width:23px;height:2px;background:var(--ink)}#mobile-nav{display:flex;flex-wrap:wrap;gap:20px;background:var(--sky);padding:20px var(--gutter);font-size:14px;font-weight:600}.hero-inner{min-height:520px}.hero h1{font-size:60px}.hero-copy{padding-top:45px;padding-bottom:45px;padding-right:20px}.hero-description{font-size:16px}.hero .eyebrow{font-size:10px}.hero-visual{margin:15px 15px 15px 0}.hero-image{border-radius:80px 20px 20px 20px}.hero-inset{width:107px}.hero-inset img{height:104px}.hero-inset figcaption{font-size:12px}.made-seal{height:94px;width:94px;right:14px;bottom:18px}.made-seal strong{font-size:11px}.promise-strip{grid-template-columns:1fr 1fr;gap:20px;padding-top:29px;padding-bottom:29px}.promise-strip>div{font-size:13px}.featured{grid-template-columns:1fr 1fr;gap:28px}.feature-copy h2{font-size:42px}.feature-main>img{aspect-ratio:1;object-position:53%}.equipment{padding:20px 10px;min-height:185px}.equipment>div{font-size:10px}.equipment img{height:87px;max-width:100px}.included{grid-template-columns:1fr;gap:12px}.included p{display:flex;flex-direction:column}.included strong{font-size:12px;margin-bottom:1px}.included svg{height:29px}.feature-purchase{gap:15px;margin-top:20px;padding-top:20px}.price{font-size:34px}.feature-purchase .button{padding:12px 20px;min-height:48px}.feature-intro{margin-bottom:18px}.community{font-size:11px}.section-heading>p{font-size:15px;max-width:270px}.benefit-grid{grid-template-columns:repeat(2,1fr)}.kit-grid{gap:15px}.kit-photo img{height:230px}.kit-body h3{font-size:22px}.kit-body ul{font-size:12px}.kit-bottom{flex-wrap:wrap}.kit-bottom .button{width:100%}.video-section{grid-template-columns:1fr 1fr;border-radius:0 45px 0 45px}.video-copy h2{font-size:35px}.video-copy>p:not(.eyebrow){font-size:15px}.gallery{grid-template-columns:1fr 1fr 1fr;gap:15px}.gallery figure:nth-child(n){transform:none}.gallery figure:nth-child(n) img{height:240px}.gallery figure:nth-child(3){grid-row:span 2;height:100%}.gallery figure:nth-child(3) img{height:100%}.review-grid{grid-template-columns:1fr 1fr;gap:25px}.review>img{height:240px}.review blockquote{padding:23px}.review figcaption{padding:0 23px 23px}.review blockquote p{font-size:14px}.review-heading h2{font-size:40px}.closing h2{font-size:43px}.closing>div{padding:50px var(--gutter)}.newsletter{gap:35px}.newsletter h2{font-size:31px}.footer-top{grid-template-columns:1fr;gap:35px}.footer-brand p{max-width:400px}.footer-bottom{flex-wrap:wrap}.quick-view{gap:25px}.quick-view>img{height:400px}}
@media(max-width:600px){:root{--gutter:22px;--space:60px}.announcement{font-size:10px;padding:8px 12px}.announcement span{padding:0 10px}.header{height:83px;gap:15px}.logo img{width:180px}.header-shop{font-size:11px;padding:9px 17px;min-height:39px}.menu{width:22px}.menu span{width:20px}.hero-inner{display:flex;flex-direction:column}.hero-copy{padding:36px var(--gutter) 30px}.hero .eyebrow{font-size:10px;margin-bottom:14px}.hero h1{font-size:61px;letter-spacing:-1.7px;line-height:.98;margin-bottom:20px}.hero-description{font-size:17px;max-width:340px}.hero-actions{gap:19px;margin-top:23px;flex-wrap:nowrap}.hero-actions .button{min-height:49px;padding:12px 25px;font-size:14px;gap:21px}.watch{font-size:11px}.mini-play{width:26px;height:26px;font-size:8px}.hero-offer{font-size:11px;gap:15px;margin-top:21px}.hero-offer strong{font-size:18px}.hero-visual{height:355px;min-height:355px;margin:0 13px 23px 29px}.hero-image{border-radius:75px 18px 18px 18px;object-position:65% center}.hero-inset{left:-14px;bottom:-7px;width:106px;padding:5px;border-radius:7px}.hero-inset img{height:105px}.hero-inset figcaption{padding-top:5px;font-size:12px}.made-seal{right:14px;bottom:17px;width:87px;height:87px}.made-seal svg{height:24px;width:24px}.made-seal strong{font-size:10px}.promise-strip{padding:24px var(--gutter);gap:19px 14px}.promise-strip>div{font-size:10px;gap:9px}.promise-strip svg{width:25px;height:25px}.featured{display:flex;flex-direction:column;gap:30px}.feature-media{width:100%}.feature-main>img{aspect-ratio:1.4;border-radius:22px 22px 0 0}.badge{top:14px;left:14px;font-size:11px}.equipment{padding:20px 15px;min-height:173px;border-radius:0 0 22px 22px}.equipment>div{font-size:11px;gap:12px}.equipment img{height:90px;max-width:115px}.feature-copy{width:100%}.feature-copy h2{font-size:48px}.feature-copy h2 br{display:none}.feature-intro{font-size:17px;margin-bottom:24px}.included{grid-template-columns:1fr 1fr;gap:21px 15px}.included p{font-size:11px}.included strong{font-size:12px;margin-bottom:4px}.included svg{width:25px;height:27px}.feature-purchase{gap:30px;margin-top:28px;padding-top:25px}.price{font-size:40px}.community{font-size:12px}.benefits{border-radius:40px 40px 0 0}.benefits .section{padding-top:50px;padding-bottom:50px}.section-heading{display:block;margin-bottom:31px}.section-heading h2{font-size:39px}.section-heading>p{font-size:15px;max-width:100%;margin-top:18px}.benefit-grid{grid-template-columns:1fr;gap:27px}.benefit-grid article{gap:17px}.benefit-icon{width:49px;height:49px}.benefit-grid h3{font-size:18px;margin-bottom:6px}.benefit-grid p{font-size:14px}.shop .section-heading{display:flex;align-items:flex-end;gap:20px}.shop h2{font-size:35px}.text-link{font-size:12px}.text-link span{margin-left:10px}.kit-grid{grid-template-columns:1fr;gap:26px}.kit-photo img{height:365px}.kit-body{padding:25px}.kit-body h3{font-size:28px}.kit-body ul{font-size:14px;margin-top:16px}.kit-bottom{flex-wrap:nowrap}.kit-bottom .button{width:auto;padding:12px 23px;font-size:13px}.kit-bottom>strong{font-size:30px}.video-section{display:flex;flex-direction:column;border-radius:0 36px 0 36px}.video-copy{padding:44px var(--gutter)}.video-copy h2{font-size:43px}.video-copy>p:not(.eyebrow){font-size:16px;max-width:330px}.video-note{font-size:13px;max-width:340px;margin-top:25px}.video-cover{min-height:315px;width:100%}.video-cover img{object-position:71% center}.play{width:70px;height:70px;font-size:21px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:11px}.gallery figure:nth-child(n) img{height:226px;border-radius:13px}.gallery figure:nth-child(3){grid-row:auto;grid-column:span 2}.gallery figure:nth-child(3) img{height:240px}.gallery-section{padding-bottom:60px}.review-heading{text-align:left;margin-bottom:30px}.review-heading h2{font-size:39px}.review-heading>p{font-size:15px;margin-top:17px}.review-grid{grid-template-columns:1fr;gap:24px}.review>img{height:235px}.review h3{font-size:27px}.review blockquote p{font-size:15px}.review figcaption{font-size:12px}.closing{display:flex;flex-direction:column}.closing>div{padding:45px var(--gutter)}.closing h2{font-size:48px}.closing p{max-width:320px;font-size:16px}.closing>img{height:295px}.newsletter{display:block;padding-top:44px;padding-bottom:40px}.newsletter h2{font-size:34px}.signup{margin-top:25px}.footer{padding:43px var(--gutter) 24px}.footer-brand .logo img{width:230px}.footer-brand p{font-size:14px}.footer-links{grid-template-columns:1fr 1fr;gap:28px 18px}.footer-links>div:last-child{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}.footer-links>div:last-child h3{grid-column:span 2}.footer-bottom{display:flex;flex-direction:column;gap:10px;margin-top:30px;font-size:10px}dialog{padding:25px 20px;border-radius:20px}dialog h2{font-size:28px}.quick-view{display:flex;flex-direction:column;gap:23px}.quick-view>img{height:235px}.quick-view .button{font-size:12px}.quick-view .eyebrow{margin-bottom:12px}.preview-note{font-size:11px}.direction{padding:35px 22px}.direction h1{font-size:44px}.direction>p{font-size:16px}.brand-study{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(3,1fr)}.direction table{font-size:12px}.direction td,.direction th{padding:12px 6px}}
@media(max-width:360px){.header{gap:11px}.logo img{width:153px}.header-shop{font-size:10px;padding:9px 13px}.hero h1{font-size:54px}.hero-actions{gap:12px}.hero-actions .button{padding:12px 19px;gap:15px}.watch{font-size:10px}.hero-offer{gap:8px}.hero-offer span{font-size:10px}.hero-offer strong{font-size:16px}.hero-description{font-size:16px}.promise-strip>div{font-size:9px}.included{grid-template-columns:1fr}.feature-copy h2{font-size:43px}.kit-photo img{height:325px}.kit-body{padding:22px}.kit-body h3{font-size:25px}.kit-bottom>strong{font-size:28px}.shop h2{font-size:31px}.hero-visual{height:320px;min-height:320px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* ================= Revision 04 ================= */
/* Logo: the real toy — crossed hardwood sticks with the string loop */
.logo{display:flex;align-items:center;gap:0;font-family:var(--display);font-weight:600;font-size:37px;letter-spacing:-1.1px;line-height:1;color:var(--ink)}
.logo-mark{width:43px;height:67px;margin:0 5px;flex-shrink:0}
.footer-brand .logo{font-size:32px}
.footer-brand .logo-mark{width:37px;height:58px}

/* Header: larger type, bigger targets */
.header{height:118px}
.header nav{gap:clamp(20px,2.4vw,38px);font-size:17px}
.header nav a{padding:14px 2px}
.header-shop{min-height:56px;padding:16px 34px;font-size:16px}

/* Hero: excitement only, unobstructed photograph */
.hero-inner{grid-template-columns:42% 58%;min-height:625px}
.hero-description{max-width:420px}
.hero-actions{margin-top:32px}
.hero-image{border-radius:130px 26px 26px 26px}
.hero-made{display:flex;align-items:center;gap:16px;margin-top:40px;padding-top:30px;border-top:1px solid #cfdcf1;max-width:430px}
.hero-made-seal{width:64px;height:64px;flex-shrink:0;border-radius:50%;background:var(--white);color:var(--ink);display:grid;place-items:center;box-shadow:0 5px 18px #18285514}
.hero-made-seal svg{width:34px;height:34px}
.hero-made strong{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.5px;line-height:1.1}
.hero-made>span:last-child>span{display:block;font-size:13px;line-height:1.5;color:var(--body);margin-top:5px}

/* Promise strip: larger icons, centred with their labels */
.promise-strip{padding:50px var(--gutter) 44px;gap:clamp(18px,2.6vw,34px)}
.promise-strip>div{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:15px;font-size:14px;line-height:1.4}
.promise-strip svg{width:54px;height:54px;stroke-width:1.4}
.promise-strip span{max-width:215px}

/* Featured Double Pack: full-width, full immersion */
.featured{display:block;padding:0;max-width:none}
.feature-stage{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:clamp(540px,74vh,780px);overflow:hidden}
.feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% center}
.feature-scrim{position:absolute;inset:0;background:linear-gradient(96deg,rgba(10,18,50,0) 30%,rgba(10,18,50,.3) 48%,rgba(10,18,50,.6) 66%)}
.featured .badge{position:absolute;top:clamp(18px,2.4vw,32px);left:clamp(18px,2.4vw,32px);z-index:3}
.feature-copy{position:relative;z-index:3;width:min(480px,47%);margin:36px clamp(18px,5.2vw,92px) 36px 0;background:rgba(255,255,255,.95);border-radius:30px;padding:40px 38px 34px;box-shadow:0 26px 70px rgba(8,16,46,.34)}
.feature-copy h2{font-size:clamp(38px,3.4vw,50px)}
.feature-purchase{justify-content:space-between}
.feature-purchase .button{flex:0 0 auto;padding:15px 34px}

/* Contents band beneath the feature */
.equipment{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(22px,4.6vw,72px);padding:36px var(--gutter);border-radius:0;min-height:0}
.equipment>div{flex-direction:row;align-items:center;gap:18px;text-align:left;font-size:14px;max-width:300px}
.equipment img{height:116px;max-width:150px}
.equipment-plus{font-size:36px}

/* Benefits: denser composition tied to a real product photograph */
.benefits .section{padding-top:84px;padding-bottom:84px}
.benefits-inner{display:grid;grid-template-columns:minmax(0,335px) minmax(0,1fr);gap:clamp(30px,4.4vw,62px);align-items:start}
.benefits-heading{display:block;margin-bottom:0}
.benefits-lede{font-size:17px;line-height:1.6;max-width:310px;margin-top:20px}
.benefits-photo{margin-top:34px;background:var(--white);border-radius:26px;overflow:hidden;box-shadow:0 14px 42px rgba(168,87,116,.1)}
.benefits-photo img{width:100%;height:330px;object-position:50% 18%}
.benefits-photo figcaption{padding:22px 24px 26px}
.benefits-photo strong{display:block;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.4px;margin-bottom:7px}
.benefits-photo figcaption span{display:block;font-size:13.5px;line-height:1.6;color:var(--body)}
.benefit-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.benefit-grid article{display:block;background:var(--white);border-radius:22px;padding:30px 28px 28px;box-shadow:0 10px 30px rgba(168,87,116,.07)}
.benefit-icon{width:68px;height:68px;border-radius:50%;background:var(--rose);color:var(--pink);margin-bottom:20px}
.benefit-icon svg{width:37px;height:37px}
.benefit-grid h3{font-size:20px;margin:0 0 10px}
.benefit-grid p{font-size:14.5px;line-height:1.65}

@media(max-width:1150px){
.logo{font-size:32px}.logo-mark{width:37px;height:58px}
.header nav{font-size:15px}
.hero-inner{grid-template-columns:44% 56%;min-height:570px}
.feature-copy{padding:32px 28px 28px;width:min(430px,49%)}
.benefits-inner{grid-template-columns:minmax(0,285px) minmax(0,1fr)}
.benefit-grid{gap:16px}
.benefit-grid article{padding:26px 22px 24px}
.benefit-grid h3{font-size:18px}
.benefit-grid p{font-size:13.5px}
}
@media(max-width:900px){
.header{height:96px}
.promise-strip{grid-template-columns:repeat(4,1fr);padding:38px var(--gutter) 34px;gap:16px}
.promise-strip>div{font-size:12px;gap:12px}
.promise-strip svg{width:44px;height:44px}
.promise-strip span{max-width:150px}
.featured{display:block}
.feature-stage{display:block;min-height:0}
.feature-photo{position:relative;height:clamp(320px,42vw,440px);border-radius:0}
.feature-scrim{display:none}
.feature-copy{position:relative;width:auto;margin:-58px clamp(18px,4vw,40px) 0;padding:30px 26px 26px;box-shadow:0 16px 44px rgba(8,16,46,.2)}
.feature-copy h2{font-size:40px}
.included{grid-template-columns:1fr 1fr;gap:16px 14px}
.equipment>div{max-width:240px;font-size:13px;gap:14px}
.equipment img{height:96px;max-width:120px}
.benefits-inner{grid-template-columns:1fr;gap:34px}
.benefits-lede{max-width:520px}
.benefits-photo{margin-top:26px}
.benefits-photo img{height:260px}
.benefit-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
.logo{font-size:27px}.logo-mark{width:32px;height:50px;margin:0 4px}
.header{height:80px}
.header-shop{min-height:44px;padding:12px 20px;font-size:13px}
.hero-made{margin-top:30px;padding-top:24px;gap:14px}
.hero-made-seal{width:54px;height:54px}
.hero-made-seal svg{width:28px;height:28px}
.hero-made strong{font-size:19px}
.hero-made>span:last-child>span{font-size:12px}
.hero-image{border-radius:78px 18px 18px 18px}
.promise-strip{grid-template-columns:1fr 1fr;gap:26px 14px;padding:32px var(--gutter)}
.promise-strip svg{width:42px;height:42px}
.promise-strip span{max-width:150px}
.feature-photo{height:300px}
.feature-copy{margin:-46px 16px 0;padding:26px 22px 24px;border-radius:22px}
.feature-copy h2{font-size:38px}
.feature-copy h2 br{display:inline}
.equipment{gap:20px;padding:28px var(--gutter)}
.equipment>div{max-width:300px;width:100%;justify-content:flex-start;font-size:13px}
.equipment-plus{display:none}
.benefits .section{padding-top:56px;padding-bottom:56px}
.benefit-grid{grid-template-columns:1fr;gap:14px}
.benefit-grid article{padding:24px 22px}
.benefit-icon{width:58px;height:58px;margin-bottom:16px}
.benefit-icon svg{width:32px;height:32px}
.benefits-photo img{height:240px}
}
@media(max-width:360px){
.logo{font-size:23px}.logo-mark{width:27px;height:42px;margin:0 3px}
.promise-strip span{max-width:120px}
.feature-copy h2{font-size:34px}
}

/* ================= Revision 05 ================= */
:root{--display:Jost,'Century Gothic',system-ui,sans-serif;--sans:Jost,system-ui,Arial,sans-serif;--line:#dde4f0}
body{font-size:18px;line-height:1.62}
h1,h2{font-weight:600;letter-spacing:-1.1px}
h2{font-size:clamp(38px,4.1vw,58px)}
h3{font-weight:600}
.eyebrow{font-size:13px;letter-spacing:.8px;text-transform:uppercase}
.announcement{font-size:13px;letter-spacing:.5px;padding:11px 20px}

.logo{font-size:38px;font-weight:600;letter-spacing:-.8px}
.logo-mark{width:42px;height:66px;margin:0 6px}
.header{height:120px}
.header nav{font-size:18px;font-weight:500}
.header-shop{font-size:16px;font-weight:600;min-height:56px}

.hero h1{font-size:clamp(62px,6.4vw,94px);font-weight:600;letter-spacing:-2.4px;line-height:1.0}
.hero-description{font-size:21px;line-height:1.55;max-width:440px}
.hero-made strong{font-size:23px}
.hero-made>span:last-child>span{font-size:14.5px}
.button{font-size:16px;font-weight:600}

.promise-strip{padding:52px var(--gutter) 46px}
.promise-strip>div{font-size:15.5px;font-weight:500}
.promise-strip svg{width:56px;height:56px;stroke-width:2.2}
.promise-strip span{max-width:230px}

/* Featured — bare photograph, no wash of any kind */
.feature-scrim{display:none}
.feature-copy{background:#fff;box-shadow:0 22px 60px rgba(14,24,58,.26)}
.feature-copy h2{font-size:clamp(40px,3.6vw,54px)}
.feature-intro{font-size:19px}
.includes-label{font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:var(--body)}
.included p{font-size:14px}
.included strong{font-size:15.5px}
.included svg{width:30px;height:34px;stroke-width:2.1}
.included .pouch{width:26px;height:36px}
.community{font-size:14px}

/* Contents — icons, not photographs */
.contents{background:var(--sky);padding:44px var(--gutter)}
.contents-inner{max-width:var(--content);margin:auto;display:flex;align-items:center;justify-content:center;gap:clamp(26px,4.4vw,72px);flex-wrap:wrap}
.contents-group{display:flex;align-items:center;gap:22px}
.icon-row{display:flex;align-items:flex-end;gap:10px;color:var(--ink)}
.icon-row svg{width:44px;height:69px;stroke-width:2.6;stroke:currentColor;fill:none}
.icon-row.packets{display:grid;grid-template-columns:repeat(5,1fr);gap:7px 9px}
.icon-row.packets svg{width:29px;height:41px;stroke-width:2.2}
.contents-group p{margin:0}
.contents-group strong{display:block;font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:-.3px}
.contents-group p span{display:block;font-size:14.5px;color:var(--body);margin-top:4px}
.contents-plus{font-family:var(--display);font-size:32px;font-weight:500;color:var(--ink);opacity:.45}

/* Benefits — sturdy, no stray pink */
.benefits{background:var(--sky);border-radius:0}
.benefits .section{padding-top:88px;padding-bottom:88px}
.benefits-lede{font-size:18px}
.benefit-grid article{background:#fff;border:1px solid #dbe4f4;border-radius:14px;box-shadow:none;padding:32px 30px 30px}
.benefit-icon{background:#e5ecfb;color:var(--ink);border-radius:14px;width:62px;height:62px}
.benefit-icon svg{width:34px;height:34px;stroke-width:1.9}
.benefit-grid h3{font-size:21px;font-weight:600}
.benefit-grid p{font-size:16px;line-height:1.6}
.benefits-photo{border-radius:14px;box-shadow:0 12px 34px rgba(24,40,90,.1)}
.benefits-photo strong{font-size:21px}
.benefits-photo figcaption span{font-size:15px}

/* Kits + video + reviews — larger, crisper */
.kit-card{border-radius:16px}
.kit-body ul{font-size:15.5px;line-height:1.55}
.kit-bottom>strong{font-size:30px}
.kit-bottom .button{font-size:14px;min-height:48px}
.featured-kit{background:#fff;border-color:#c9d6ef}
.video-copy>p:not(.eyebrow){font-size:19px;max-width:360px}
.video-note{font-size:17px;line-height:1.55;max-width:420px}
.video-copy .eyebrow{color:#bcd0ff}
.review blockquote p{font-size:16px;line-height:1.6}
.review h3{font-weight:600}
.review figcaption{font-size:13.5px}
.section-heading>p{font-size:18px}

/* Closing — navy, not a wall of pink */
.closing{background:var(--ink)}
.closing h2{font-size:clamp(44px,4.4vw,62px)}
.closing p{font-size:18px;color:#d6e0f7}
.newsletter h2{font-size:clamp(30px,2.9vw,40px)}
.signup input{font-size:17px}
.footer{font-size:15.5px}
.footer h3{font-size:15px;letter-spacing:.6px;text-transform:uppercase}
.footer-brand p{font-size:15.5px}
.footer-links{grid-template-columns:repeat(4,auto)}

@media(max-width:1150px){
.logo{font-size:33px}.logo-mark{width:36px;height:57px}
.header nav{font-size:16px}
.contents-group{gap:16px}
.icon-row svg{width:38px;height:60px}
.footer-links{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.header{height:98px}
.promise-strip svg{width:46px;height:46px}
.promise-strip>div{font-size:13.5px}
.contents-inner{gap:26px}
.contents-plus{display:none}
.benefits .section{padding-top:60px;padding-bottom:60px}
}
@media(max-width:600px){
body{font-size:17px}
.logo{font-size:25px;letter-spacing:-.6px}.logo-mark{width:27px;height:43px;margin:0 3px}
.header{height:78px;gap:10px}
.header-shop{font-size:13px;font-weight:600;min-height:42px;padding:11px 16px}
.hero h1{font-size:54px;letter-spacing:-1.6px}
.hero-description{font-size:19px}
.contents{padding:34px var(--gutter)}
.contents-inner{flex-direction:column;align-items:flex-start;gap:26px}
.contents-group{width:100%;gap:18px}
.icon-row svg{width:34px;height:53px}
.icon-row.packets{grid-template-columns:repeat(5,1fr);gap:5px 6px}
.icon-row.packets svg{width:24px;height:34px}
.contents-group strong{font-size:18px}
.benefit-grid article{padding:26px 22px}
.video-note{font-size:16px}
.footer-links{grid-template-columns:1fr 1fr}
.footer-links>div:last-child{grid-column:span 1}
}
@media(max-width:400px){
.logo{font-size:21px}.logo-mark{width:23px;height:36px;margin:0 2px}
.header{height:70px;gap:8px}
.header-shop{font-size:12px;min-height:38px;padding:10px 13px}
.menu{width:20px}
.hero h1{font-size:47px;letter-spacing:-1.3px}
.hero-description{font-size:17px}
.icon-row.packets svg{width:21px;height:30px}
.contents-group strong{font-size:17px}
}
/* rev05 fixes */
.benefits-inner{grid-template-columns:minmax(0,382px) minmax(0,1fr)}
.benefits-heading h2{font-size:clamp(32px,3.0vw,44px);line-height:1.08}
@media(max-width:1150px){.benefits-inner{grid-template-columns:minmax(0,320px) minmax(0,1fr)}.benefits-heading h2{font-size:32px}}
@media(max-width:900px){.benefits-inner{grid-template-columns:1fr}.benefits-heading h2{font-size:38px}}

/* ================= Revision 06 ================= */
/* the real stick construction keeps its 64:96 proportion everywhere */
.ico-sticks{stroke:currentColor;fill:none}
.logo-mark{width:44px;height:66px;margin:0 6px}
.footer-brand .logo-mark{width:38px;height:57px}
.promise-strip .ico-sticks{width:40px;height:60px;stroke-width:3.2}
.included .ico-sticks{width:26px;height:39px}
.icon-row .ico-sticks{width:44px;height:66px}
.benefit-icon .ico-sticks{width:32px;height:48px}

/* contents band reads as the base of the Double Pack section, not the top of the next one */
.contents{background:var(--ink);color:#fff;padding:34px var(--gutter) 40px}
.contents-eyebrow{text-align:center;margin:0 0 26px;font-size:12.5px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:#9cb0e8}
.contents-group strong{color:#fff}
.contents-group p span{color:#c2cff1}
.icon-row{color:#fff}
.contents-plus{color:#8298da;opacity:1}

/* benefit icons carry a little colour */
.benefit-icon.i-sun{background:#fdf1d5;color:#b7801c}
.benefit-icon.i-screen{background:#e6ecfb;color:#25368b}
.benefit-icon.i-wood{background:#f3e8dd;color:#8a5a3b}
.benefit-icon.i-bubble{background:#e9f5f6;color:#2a9d8f}
.benefit-icon.i-mix{background:#e6f3e9;color:#2f7d4f}
.benefit-icon.i-time{background:#fce9f0;color:#be2e65}

/* closing: less blue, more photograph */
.closing{grid-template-columns:38% 62%}
.closing>img{height:100%;width:100%;object-fit:cover}

@media(max-width:1150px){
.logo-mark{width:38px;height:57px}
.icon-row .ico-sticks{width:38px;height:57px}
.closing{grid-template-columns:42% 58%}
}
@media(max-width:900px){
.promise-strip .ico-sticks{width:32px;height:48px}
}
@media(max-width:600px){
.logo-mark{width:29px;height:43px;margin:0 4px}
.icon-row .ico-sticks{width:34px;height:51px}
.promise-strip .ico-sticks{width:30px;height:45px}
.contents-eyebrow{text-align:left;margin-bottom:20px}
}
@media(max-width:400px){
.logo-mark{width:24px;height:36px;margin:0 3px}
}

/* ================= Revision 07 — wordmark ================= */
.logo{font-family:'Bricolage Grotesque','Jost',sans-serif;font-weight:700;font-size:40px;letter-spacing:-1.4px}
.logo .logo-word{color:var(--ink)}
.footer-brand .logo{font-size:33px}
@media(max-width:1150px){.logo{font-size:34px}}
@media(max-width:600px){.logo{font-size:26px;letter-spacing:-1px}}
@media(max-width:400px){.logo{font-size:22px}}

/* lockup scales with the viewport so no font width can break the header */
.header{flex-wrap:nowrap}
.logo{font-size:clamp(19px,4.9vw,40px);min-width:0}
.logo-mark{height:clamp(32px,8.1vw,66px);width:auto;aspect-ratio:64/96;margin:0 clamp(2px,.6vw,6px)}
.header-shop{white-space:nowrap}
.footer-brand .logo{font-size:clamp(22px,3.4vw,33px)}
.footer-brand .logo-mark{height:clamp(36px,5.6vw,55px);width:auto}
@media(min-width:901px){.logo{font-size:clamp(26px,2.9vw,40px)}.logo-mark{height:clamp(44px,4.8vw,66px)}}

/* ================= Revision 08 ================= */
/* BubbleStix is one word — pull the mark in so it reads that way */
.logo{letter-spacing:-1.6px}
.logo-mark{margin:0 clamp(-6px,-0.42vw,-2px)}
.footer-brand .logo-mark{margin:0 clamp(-5px,-0.34vw,-2px)}

/* contents band: bigger, and light enough to actually read on navy */
.contents-eyebrow{font-size:15px;letter-spacing:1.6px;color:#dde5fb;font-weight:500;margin-bottom:28px}
.contents-group strong{font-size:22px;letter-spacing:-.4px}
.contents-group p span{font-size:16.5px;color:#e6ecfb;margin-top:5px}
@media(max-width:600px){
.contents-eyebrow{font-size:13.5px;margin-bottom:22px}
.contents-group strong{font-size:19px}
.contents-group p span{font-size:15px}
}

/* ================= Inner pages ================= */
.page-hero{background:var(--sky);padding:clamp(52px,6vw,86px) var(--gutter) clamp(56px,6vw,90px)}
.page-hero-copy{max-width:var(--content);margin:0 auto}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(46px,5.6vw,84px);line-height:1.02;letter-spacing:-2px;margin:0 0 22px}
.page-hero .lede{font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:660px;color:var(--body)}
.page-hero .button{margin-top:30px}
.page-hero.has-img{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(30px,4.5vw,70px);align-items:center;
  padding-left:max(var(--gutter),calc(50vw - var(--content)/2));padding-right:var(--gutter)}
.page-hero.has-img .page-hero-copy{max-width:none;margin:0}
.page-hero-img{margin:0}
.page-hero-img img{width:100%;height:clamp(280px,34vw,440px);object-fit:cover;border-radius:90px 22px 22px 22px}

.block-heading{max-width:720px;margin:0 auto clamp(34px,3.6vw,52px);text-align:center}
.block-heading.left{margin-left:0;text-align:left}
.block-heading h2{margin:0}
.block-heading>p:not(.eyebrow){margin-top:16px;font-size:18px;line-height:1.6;color:var(--body)}
.tint-section{background:var(--sky)}

.card-grid{display:grid;gap:20px}
.card-grid.trio{grid-template-columns:repeat(3,1fr)}
.card-grid.quad{grid-template-columns:repeat(4,1fr)}
.card-grid article{background:#fff;border:1px solid #dbe4f4;border-radius:14px;padding:30px 28px 28px}
.tint-section .card-grid article,.page-hero+.section .card-grid article{background:#fff}
.card-grid h3{font-size:20px;font-weight:600;margin:0 0 10px}
.card-grid p{font-size:16px;line-height:1.6;margin:0}
.card-icon{display:grid;place-items:center;width:62px;height:62px;border-radius:14px;margin-bottom:20px}
.card-icon svg{width:34px;height:34px;stroke-width:1.9}
.card-icon .ico-sticks{width:30px;height:45px}
.card-icon .pouch{width:26px;height:37px}
.card-icon.i-sun{background:#fdf1d5;color:#b7801c}
.card-icon.i-screen{background:#e6ecfb;color:#25368b}
.card-icon.i-wood{background:#f3e8dd;color:#8a5a3b}
.card-icon.i-bubble{background:#e9f5f6;color:#2a9d8f}
.card-icon.i-mix{background:#e6f3e9;color:#2f7d4f}
.card-icon.i-time{background:#fce9f0;color:#be2e65}

.compare-section{background:var(--sky)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:940px;margin:0 auto}
.compare-col{background:#fff;border:1px solid #dbe4f4;border-radius:16px;padding:32px 30px}
.compare-col.win{border:2px solid var(--ink);box-shadow:0 14px 40px rgba(24,40,90,.1)}
.compare-tag{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--body)}
.compare-col.win .compare-tag{color:var(--pink)}
.compare-figure{font-family:var(--display);font-weight:600;font-size:clamp(36px,4vw,52px);line-height:1;margin:0;color:var(--ink)}
.compare-note{margin:10px 0 20px;font-size:15px;color:var(--body)}
.compare-col ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.compare-col li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.compare-cta{text-align:center;margin-top:34px}

.split{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:clamp(30px,4.5vw,70px);align-items:center;
  max-width:calc(var(--content) + 2*var(--gutter));padding:var(--space) var(--gutter);margin:0 auto}
.split.reverse{grid-template-columns:minmax(0,1fr) minmax(0,46%)}
.split.reverse .split-img{order:2}
.split-img{margin:0}
.split-img img{width:100%;height:clamp(300px,36vw,470px);object-fit:cover;border-radius:18px}
.split-copy h2{margin:0 0 18px}
.split-copy>p{font-size:18px;line-height:1.65;margin-bottom:24px}
.ticks{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.ticks.two{grid-template-columns:1fr 1fr;gap:12px 26px}
.ticks li{position:relative;padding-left:32px;font-size:16.5px}
.ticks li::before{content:'';position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:#e6f3e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 5 5 9-11'/%3E%3C/svg%3E") center/13px no-repeat}

.promo{background:var(--ink);color:#fff;padding:clamp(56px,6vw,88px) var(--gutter);text-align:center}
.promo-inner{max-width:680px;margin:0 auto}
.promo h2{margin:0 0 16px}
.promo p:not(.eyebrow){color:#d6e0f7;font-size:18px;margin-bottom:28px}
.promo .eyebrow{color:#9cb0e8}

.faq-section{max-width:calc(900px + 2*var(--gutter))}
.faq details{border:1px solid #dbe4f4;border-radius:12px;background:#fff;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;padding:20px 54px 20px 24px;font-family:var(--display);font-weight:600;
  font-size:18.5px;color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:22px;top:50%;width:13px;height:13px;margin-top:-7px;
  border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq details[open]{border-color:#c4d2ee}
.faq details>div{padding:0 24px 22px}
.faq p{margin:0;font-size:16.5px;line-height:1.7}

.form-wrap{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);gap:clamp(30px,4.5vw,64px);align-items:start}
.form-copy h2{margin:0 0 18px}
.form-copy>p{font-size:17px;line-height:1.65;margin-bottom:24px}
.wholesale-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:var(--sky);border-radius:18px;padding:32px 30px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:span 2}
.field label{font-size:12.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--body)}
.field label span{text-transform:none;letter-spacing:0;font-weight:400}
.field input,.field textarea{font:inherit;font-size:16.5px;padding:13px 14px;border:1px solid #c9d6ee;border-radius:10px;background:#fff;color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:3px solid var(--pink);outline-offset:2px;border-color:transparent}
.form-status{margin:14px 0 0;font-size:15px;line-height:1.55}
.form-status.ok{color:#2f7d4f}
.form-status.err{color:var(--pink)}
.form-note{margin:12px 0 0;font-size:14.5px;color:var(--body)}
.form-note a{text-decoration:underline}

.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.guide{background:#fff;border:1px solid #dbe4f4;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.guide-photo{position:relative}
.guide-photo img{width:100%;height:210px;object-fit:cover}
.guide-cat{position:absolute;left:14px;top:14px;background:#fff;color:var(--ink);font-size:11px;font-weight:600;
  letter-spacing:.9px;text-transform:uppercase;padding:6px 11px;border-radius:99px}
.guide-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.guide-body h3{font-size:21px;font-weight:600;margin:0}
.guide-body p{font-size:15.5px;line-height:1.6;margin:0}
.guide-meta{font-size:13.5px;color:var(--body);margin-top:auto!important}
.featured-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);gap:clamp(28px,4vw,60px);align-items:center;
  background:var(--sky);border-radius:20px;padding:clamp(26px,3vw,44px)}
.featured-guide figure{margin:0}
.featured-guide img{width:100%;height:clamp(240px,28vw,360px);object-fit:cover;border-radius:14px}
.featured-guide h2{margin:0 0 16px}
.featured-guide p{font-size:17.5px;line-height:1.6}
.featured-guide .button{margin-top:20px}

.topics{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.topic{background:#fff;border:1px solid #c9d6ee;border-radius:99px;padding:12px 22px;font-size:16px;font-weight:500;color:var(--ink)}
.topic:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

.contents-inner.badges{gap:clamp(22px,3.4vw,58px)}
.badge-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;color:#fff;font-size:15.5px;font-weight:500}
.badge-item svg{width:42px;height:42px;stroke:currentColor;fill:none;stroke-width:1.9}
.badge-item .ico-sticks{width:34px;height:51px}
.badge-item .pouch{width:30px;height:42px}

.refill{display:flex;gap:24px;align-items:flex-start;background:var(--sky);border-radius:16px;padding:30px 30px 28px}
.refill h3{margin:0 0 8px;font-size:21px;font-weight:600}
.refill p{margin:0;font-size:16.5px;line-height:1.6}
.refill .card-icon{margin-bottom:0;flex-shrink:0}
.kit-blurb{font-size:15px;line-height:1.55;margin:12px 0 0;color:var(--body)}
.quick-view.mini{display:block;max-width:420px}
.quick-view.mini .button{margin-top:18px}

@media(max-width:1150px){
.card-grid.quad{grid-template-columns:repeat(2,1fr)}
.guide-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.page-hero.has-img{grid-template-columns:1fr;padding-left:var(--gutter)}
.page-hero-img img{height:clamp(240px,42vw,340px);border-radius:60px 18px 18px 18px}
.card-grid.trio{grid-template-columns:repeat(2,1fr)}
.split,.split.reverse{grid-template-columns:1fr;gap:30px}
.split.reverse .split-img{order:0}
.form-wrap{grid-template-columns:1fr}
.featured-guide{grid-template-columns:1fr}
.ticks.two{grid-template-columns:1fr}
.compare{grid-template-columns:1fr}
}
@media(max-width:600px){
.page-hero h1{font-size:42px;letter-spacing:-1.4px}
.page-hero .lede{font-size:17.5px}
.card-grid.trio,.card-grid.quad,.guide-grid{grid-template-columns:1fr}
.card-grid article{padding:26px 22px}
.wholesale-form{grid-template-columns:1fr;padding:26px 22px}
.field.wide{grid-column:span 1}
.faq summary{font-size:17px;padding:18px 46px 18px 18px}
.faq details>div{padding:0 18px 20px}
.compare-col{padding:26px 22px}
.refill{flex-direction:column;gap:18px;padding:26px 22px}
.block-heading{margin-bottom:28px}
}
.button{max-width:100%}
@media(max-width:520px){.promo .button,.page-hero .button,.split-copy .button,.closing .button{white-space:normal;text-align:center;line-height:1.3}}
.tm{font-size:.38em;vertical-align:super;line-height:0;margin-left:.06em;font-weight:500;letter-spacing:0}
h1 .tm,h2 .tm{font-size:.3em}
.tm-note{opacity:.85}
.footer-bottom{flex-wrap:wrap;gap:10px 26px}

/* ================= Articles ================= */
.article-hero{background:var(--sky);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);
  gap:clamp(30px,4.5vw,70px);align-items:center;
  padding:clamp(48px,5.4vw,80px) var(--gutter) clamp(52px,5.4vw,84px);
  padding-left:max(var(--gutter),calc(50vw - var(--content)/2))}
.article-hero-copy h1{font-family:var(--display);font-weight:600;font-size:clamp(40px,4.6vw,66px);
  line-height:1.04;letter-spacing:-1.8px;margin:0 0 20px}
.article-hero-copy .lede{font-size:clamp(17.5px,1.4vw,21px);line-height:1.55;color:var(--body);max-width:620px}
.article-meta{margin-top:22px;font-size:14.5px;color:var(--body);letter-spacing:.2px}
.article-hero-img{margin:0}
.article-hero-img img{width:100%;height:clamp(260px,32vw,400px);object-fit:cover;border-radius:80px 20px 20px 20px}
.prose{max-width:760px;margin:0 auto;padding:clamp(48px,5vw,76px) var(--gutter) 0}
.prose h2{font-size:clamp(28px,2.8vw,38px);margin:clamp(38px,3.6vw,54px) 0 16px;letter-spacing:-.8px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;font-weight:600;margin:30px 0 10px;color:var(--ink)}
.prose p{font-size:18px;line-height:1.72;margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:0;list-style:none}
.prose ul li{position:relative;padding-left:28px;font-size:17.5px;line-height:1.65;margin-bottom:11px}
.prose ul li::before{content:'';position:absolute;left:4px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.prose ol.steps{counter-reset:s}
.prose ol.steps li{counter-increment:s;position:relative;padding-left:52px;font-size:17.5px;line-height:1.6;margin-bottom:16px;min-height:34px;display:flex;align-items:center}
.prose ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:16px}
.prose blockquote{margin:28px 0;padding:24px 28px;background:var(--sky);border-left:4px solid var(--pink);border-radius:0 14px 14px 0}
.prose blockquote p{margin:0;font-family:var(--display);font-weight:500;font-size:20px;line-height:1.5;color:var(--ink)}
.article-figure{margin:clamp(32px,3.4vw,48px) 0}
.article-figure img{width:100%;height:clamp(240px,30vw,400px);object-fit:cover;border-radius:16px}
.table-wrap{overflow-x:auto;margin:0 0 24px}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-family:var(--display);font-weight:600;color:var(--ink);border-bottom:2px solid var(--ink);font-size:15px}
.related{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:clamp(54px,5.4vw,80px) var(--gutter)}
.related h2{text-align:center;margin:0 0 30px;font-size:clamp(26px,2.6vw,34px)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel-card{display:block;background:#fff;border:1px solid #dbe4f4;border-radius:14px;padding:24px 24px 26px}
.rel-card:hover{border-color:var(--ink);box-shadow:0 10px 28px rgba(24,40,90,.08)}
.rel-card span{display:block;font-size:11.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:var(--pink);margin-bottom:9px}
.rel-card strong{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.4px;color:var(--ink)}
a.guide{color:inherit}
a.guide:hover{border-color:var(--ink);box-shadow:0 10px 28px rgba(24,40,90,.08)}
.signup-note{margin:14px 0 0;font-size:15.5px;color:var(--body);max-width:520px}
@media(max-width:900px){
.article-hero{grid-template-columns:1fr;padding-left:var(--gutter)}
.article-hero-img img{height:clamp(220px,40vw,320px);border-radius:56px 16px 16px 16px}
.rel-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
.article-hero-copy h1{font-size:36px;letter-spacing:-1.2px}
.prose{padding-top:38px}
.prose p,.prose ul li{font-size:17px}
.prose h2{font-size:26px}
.prose blockquote{padding:20px 20px}
.prose blockquote p{font-size:18px}
}
.legal-row{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;padding:26px 0 0;margin-top:34px;border-top:1px solid var(--line);font-size:13.5px}
.legal-row a{color:var(--body)}
.legal-row a:hover{color:var(--pink)}
.footer .legal-row+.footer-bottom{margin-top:18px;border-top:0;padding-top:0}
.legal-prose h2{font-size:clamp(24px,2.3vw,30px);margin-top:38px}
.legal-prose p,.legal-prose li{font-size:17px}
.legal-entity{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--body)}
.page-hero .article-meta{margin-top:18px}
@media(max-width:600px){.legal-row{gap:8px 16px;font-size:13px}}

/* ==========================================================================
   Revision 09 — WordPress + WooCommerce integration
   ========================================================================== */

/* Header cart ------------------------------------------------------------ */
.cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--ink);flex-shrink:0;transition:background .18s}
.cart-link:hover{background:var(--sky)}
.cart-link svg{width:23px;height:23px}
.cart-count{position:absolute;top:2px;right:0;min-width:19px;height:19px;padding:0 5px;border-radius:19px;background:var(--pink);color:#fff;font-size:11px;font-weight:700;line-height:19px;text-align:center}
.header nav+.cart-link{margin-left:auto}

/* Generic WordPress content (cart, checkout, account, anything Jason adds) */
.wp-content-page{background:var(--white)}
.wp-content-page .section{max-width:calc(1060px + 2*var(--gutter));padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(56px,7vw,110px)}
.wp-entry h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.4vw,58px);letter-spacing:-1.6px;margin:0 0 28px}
.wp-entry h2{font-size:clamp(26px,2.6vw,36px);margin:44px 0 14px}
.wp-entry h3{margin:30px 0 10px}
.wp-entry p,.wp-entry li{color:var(--body);font-size:17px;line-height:1.72}
.wp-entry a{color:var(--pink);text-decoration:underline;text-underline-offset:3px}
.wp-entry table{width:100%;border-collapse:collapse}
.search-list{list-style:none;padding:0}
.search-list li{padding:14px 0;border-bottom:1px solid var(--line)}
.search-list a{font-weight:600}

/* WooCommerce, dressed to match ------------------------------------------ */
.woocommerce-page .wp-content-page .section{max-width:calc(1180px + 2*var(--gutter))}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.wc-block-components-button,.wp-element-button{
  display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;
  border-radius:100px!important;background:var(--ink)!important;color:#fff!important;border:0!important;
  font-family:var(--sans);font-size:15px;font-weight:700;line-height:1;white-space:nowrap;
  transition:background .18s,transform .18s;text-decoration:none}
.woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,
.wc-block-components-button:hover,.wp-element-button:hover{background:#162569!important;transform:translateY(-2px)}
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce #place_order,
.wc-block-components-checkout-place-order-button{background:var(--pink)!important}
.woocommerce .button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce #place_order:hover,
.wc-block-components-checkout-place-order-button:hover{background:#a32054!important}
.woocommerce table.shop_table{border:1px solid var(--line);border-radius:18px;border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce table.shop_table th{background:var(--sky);color:var(--ink);font-weight:700;font-size:13px;letter-spacing:.2px;padding:16px}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--line);color:var(--body)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{font-family:var(--display);font-weight:600;letter-spacing:-.8px}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select,
.wc-block-components-text-input input{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:#fff;color:var(--ink);width:100%}
.woocommerce form .form-row input.input-text:focus,.wc-block-components-text-input input:focus{outline:3px solid var(--pink);outline-offset:2px;border-color:transparent}
.woocommerce-info,.woocommerce-message,.woocommerce-error,.wc-block-components-notice-banner{
  border-radius:16px;border:1px solid var(--line);border-top:3px solid var(--pink);background:var(--rose);color:var(--ink);padding:16px 20px;list-style:none}
.woocommerce-info::before,.woocommerce-message::before{display:none}
.woocommerce .quantity .qty{border:1px solid var(--line);border-radius:12px;padding:12px 8px;width:76px;text-align:center}
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;list-style:none;padding:0;margin:0}
.woocommerce ul.products li.product{float:none;width:auto;margin:0}

/* Single product ---------------------------------------------------------- */
.product-page{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:clamp(28px,4vw,56px) var(--gutter) clamp(24px,3vw,40px)}
.product-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:start}
.crumbs a:hover{color:var(--pink)}
.product-copy h1{font-family:var(--display);font-weight:600;font-size:clamp(38px,4.3vw,58px);letter-spacing:-1.9px;margin:0 0 14px}
.product-copy .price{font-family:var(--display);font-weight:600;font-size:32px;color:var(--ink);margin:0 0 20px}
.product-copy .price del{opacity:.45;font-size:22px;margin-right:8px}
.product-short p{font-size:17px;line-height:1.7}
.product-copy form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px 0 8px}
.product-assurance{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:9px}
.product-assurance li{position:relative;padding-left:26px;font-size:14px;color:var(--body)}
.product-assurance li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
.product-ship{margin-top:22px;font-size:13px}
.product-ship a{text-decoration:underline;text-underline-offset:3px}
.product-detail .prose p{font-size:17px;line-height:1.72;margin-bottom:14px}

/* Product page v2 (21 Sep 2026): gallery, buy box, add-on, buy bar -------- */
.product-media{min-width:0;position:sticky;top:20px}
.pg-stage{position:relative;aspect-ratio:var(--pg-ar,1.25);background:var(--sky);border-radius:28px;overflow:hidden}
.pg-open{position:relative;display:block;width:100%;height:100%;padding:0;background:none;cursor:zoom-in}
.pg-main{width:100%;height:100%;object-fit:contain}
.pg-main.is-swapping{opacity:.8}
.pg-main.pg-incoming{position:absolute;inset:0;opacity:0;pointer-events:none}
.pg-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#ffffffe6;display:grid;place-items:center;box-shadow:0 3px 14px #15235926;z-index:2;opacity:.9}
.pg-nav:hover{opacity:1;background:#fff}
.pg-nav svg{width:20px;height:20px;stroke-width:2.2}
.pg-prev{left:12px}.pg-next{right:12px}
.pg-count{position:absolute;right:14px;bottom:12px;background:#15235999;color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;pointer-events:none}
.pg-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;scrollbar-width:thin;padding:3px}
.pg-thumb{flex:0 0 76px;height:76px;padding:0;border-radius:12px;overflow:hidden;background:var(--sky);outline:2px solid transparent;outline-offset:2px;opacity:.72;transition:opacity .15s,outline-color .15s}
.pg-thumb img{width:100%;height:100%;object-fit:cover}
.pg-thumb:hover{opacity:1}
.pg-thumb.is-active{opacity:1;outline-color:var(--pink)}
.pg-lightbox{padding:0;margin:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0;background:#0d1433f2;color:#fff;box-shadow:none}
.pg-lightbox::backdrop{background:#0d1433f2}
.pg-lightbox[open]{display:flex;align-items:center;justify-content:center}
.pg-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:calc(100vw - 120px)}
.pg-lb-img{max-width:100%;max-height:calc(100vh - 110px);width:auto;height:auto;object-fit:contain;border-radius:10px}
.pg-lb-cap{font-size:14px;color:#dbe4ff;text-align:center;max-width:720px}
.pg-lb-close{position:absolute;top:14px;right:14px;width:46px;height:46px;border-radius:50%;background:#ffffff1f;color:#fff;display:grid;place-items:center;z-index:3}
.pg-lb-close svg{width:22px;height:22px;stroke-width:2.2}
.pg-lightbox .pg-nav{background:#ffffff26;color:#fff;box-shadow:none}
html.pg-locked{overflow:hidden}
.crumbs{margin-bottom:14px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;font-size:12px;font-weight:600;color:var(--body)}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a:hover{color:var(--pink)}
.product-copy .eyebrow{margin-bottom:10px}
.product-copy h1{margin-bottom:10px}
.product-copy .price{margin:0 0 18px}
.product-included{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:7px}
.product-included li{position:relative;padding-left:18px;font-size:16px;color:var(--ink);font-weight:600}
.product-included li::before{content:"•";position:absolute;left:0;color:var(--pink)}
.product-blurb{font-size:15px;line-height:1.6;margin:0}
.product-buy form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:22px 0 0}
.product-buy .quantity .qty{height:56px;border:1px solid var(--line);border-radius:14px;width:76px;text-align:center;font-size:16px;color:var(--ink)}
.product-buy .single_add_to_cart_button{flex:1;min-height:56px!important;font-size:16px!important;background:var(--pink)!important}
.product-buy .single_add_to_cart_button:hover{background:#a32054!important}
.product-buy .wcpay-express-checkout-wrapper{margin-top:12px}
.product-buy .wcpay-express-checkout-wrapper:empty{display:none}
.bsx-addon{flex:1 0 100%;display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.bsx-addon:hover{border-color:#e8b4c8}
.bsx-addon:has(input:checked){border-color:var(--pink);background:var(--rose)}
.bsx-addon input{width:20px;height:20px;accent-color:var(--pink);flex-shrink:0;margin:0}
.bsx-addon img{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0}
.bsx-addon-text{display:flex;flex-direction:column;font-size:12.5px;line-height:1.35;color:var(--body);flex:1;min-width:0}
.bsx-addon-text strong{font-size:14px;color:var(--ink)}
.bsx-addon-price{font-weight:700;color:var(--ink);font-size:14px;white-space:nowrap}
.product-delivery{display:flex;align-items:center;gap:9px;margin:14px 0 0;font-size:14px;color:var(--ink)}
.product-delivery svg{width:22px;height:22px;color:var(--pink)}
.product-assurance{margin-top:16px}
.product-ship{margin-top:16px}
.product-assurance a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.product-assurance a:hover{color:var(--pink)}
.product-box{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:clamp(40px,5vw,72px) var(--gutter) clamp(8px,2vw,24px)}
.product-box-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;background:var(--sky);border-radius:28px;padding:clamp(24px,3.5vw,48px)}
.product-box-img{position:relative;margin:0;display:flex;align-items:center;justify-content:center}
.product-box-img img{width:100%;height:auto;max-height:380px;object-fit:contain}
.product-box-img img.is-flat{mix-blend-mode:multiply}
.product-box-mult{position:absolute;right:6%;bottom:4%;font:600 clamp(28px,3vw,40px)/1 var(--display);color:var(--pink)}
.product-box h2{font-size:clamp(30px,3vw,42px);margin:6px 0 20px}
.product-box ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.product-box li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.product-box li b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--pink);font:600 17px var(--display)}
.product-box li strong{display:block;color:var(--ink);font-size:16px}
.product-box li span{font-size:14px;color:var(--body)}
.product-box-note{margin:18px 0 0;font-size:14px}
@media (max-width:720px){.product-box-inner{grid-template-columns:1fr;border-radius:22px}.product-box-img img{max-height:240px}}
.product-faq{padding-top:0}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;max-width:900px}
.related-grid .kit-photo img{height:280px}
.product-fineprint{max-width:calc(var(--content) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter) 30px;font-size:11px;color:var(--body);opacity:.8}
.product-fineprint #wcal_gdpr_message_block,.product-fineprint span{font-size:11px!important;color:var(--body)!important}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 24px #1523591a}
.buybar[hidden]{display:none}
.buybar-info{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.buybar-info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar-info span{font-size:14px;color:var(--body)}
.buybar-btn{min-height:46px;padding:10px 22px;font-size:15px}
body.has-buybar{padding-bottom:76px}
@media (max-width:900px){
  .product-media{position:static}
  .related-grid{grid-template-columns:1fr 1fr;gap:15px}
  .related-grid .kit-photo img{height:220px}
}
@media (max-width:720px){
  .product-page{padding-top:18px}
  .pg-stage{border-radius:20px}
  .pg-nav{width:36px;height:36px}
  .pg-thumb{flex-basis:64px;height:64px}
  .pg-lightbox figure{max-width:100vw}
  .pg-lb-img{border-radius:0}
  .product-copy h1{font-size:36px;letter-spacing:-1.2px}
  .product-included li{font-size:15px}
  .related-grid{grid-template-columns:1fr}
  .related-grid .kit-photo img{height:260px}
}

/* Form feedback ----------------------------------------------------------- */
.form-status{margin-top:14px;font-size:14px;font-weight:600;min-height:1.2em}
.form-status.ok{color:#1d7a4c}
.form-status.err{color:var(--pink)}
.signup-status{margin-top:12px;font-size:14px;font-weight:600}
.is-busy{opacity:.6;pointer-events:none}

@media (max-width:900px){
  .product-inner{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cart-link{width:38px;height:38px}
  .cart-link svg{width:21px;height:21px}
}

/* ==========================================================================
   Revision 10 — mobile pass
   Every rule here is mobile-only. Desktop is untouched.
   ========================================================================== */

@media (max-width: 720px) {

  /* --- Home hero: photo first, then the words ---------------------------- */
  .hero { background: var(--sky); }
  .hero-inner { display: flex; flex-direction: column; min-height: 0; }

  .hero-visual {
    order: -1;                 /* photo above the copy */
    height: auto; min-height: 0;
    margin: 0;                 /* full bleed */
    position: relative;
  }
  .hero-image {
    position: static; inset: auto;
    width: 100%;
    height: clamp(270px, 62vw, 380px);
    object-position: 62% center;
    border-radius: 0 0 26px 26px;
  }
  .hero-inset { display: none; }          /* too cramped beside a full-bleed photo */

  .hero-copy { padding: 26px var(--gutter) 34px; }
  .hero .eyebrow { display: none; }       /* the announcement bar already says this */
  .hero h1 { font-size: clamp(40px, 12.4vw, 56px); letter-spacing: -1.7px; line-height: 1; margin-bottom: 14px; }
  .hero-description { font-size: 17px; line-height: 1.5; max-width: 34ch; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .button { width: 100%; max-width: 320px; justify-content: center; gap: 12px; }
  .hero-made { margin-top: 26px; padding-top: 22px; }

  /* --- Inner page heroes: same treatment --------------------------------- */
  .page-hero.has-img {
    display: flex; flex-direction: column;
    padding: 0 0 34px;
    gap: 0;
  }
  .page-hero.has-img .page-hero-img { order: -1; margin: 0; }
  .page-hero.has-img .page-hero-img img {
    width: 100%;
    height: clamp(230px, 54vw, 320px);
    object-fit: cover;
    border-radius: 0 0 26px 26px;
  }
  .page-hero.has-img .page-hero-copy { padding: 26px var(--gutter) 0; max-width: none; }
  .page-hero.has-img .eyebrow { display: none; }
  .page-hero h1 { font-size: clamp(34px, 10.2vw, 46px); letter-spacing: -1.4px; line-height: 1.04; }
  .page-hero .lede {
    font-size: 16.5px; line-height: 1.55; margin-top: 12px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .page-hero .button { margin-top: 22px; width: 100%; max-width: 320px; }
  /* heroes with no photo still need breathing room */
  .page-hero:not(.has-img) { padding: 30px var(--gutter) 34px; }

  /* --- Family gallery: keep people in frame ------------------------------ */
  .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery figure { margin: 0; }
  .gallery figure img { width: 100%; height: 200px; object-fit: cover; border-radius: 14px; }
  /* boy in the red hoodie sits left of centre in a square frame */
  .gallery figure:nth-child(1) img { object-position: 30% center; }
  .gallery figure:nth-child(2) img { object-position: 80% center; }
  .gallery figure:nth-child(4) img { object-position: 42% center; }
  .gallery figure:nth-child(5) img { object-position: 55% center; }
  /* the father/daughter shot is landscape — give it the full width */
  .gallery figure:nth-child(3) { grid-column: span 2; }
  .gallery figure:nth-child(3) img { height: 230px; object-position: 50% 45%; }

  /* --- Section headings -------------------------------------------------- */
  .section-heading h2, .block-heading h2 { font-size: clamp(30px, 8.6vw, 40px); letter-spacing: -1.2px; }
  .section-heading p, .block-heading p { font-size: 16px; line-height: 1.55; }

  /* "Choose your kit" heading and its Shop all link were colliding */
  .section-heading,
  .shop .section-heading { display: block; }
  .section-heading h2,
  .shop .section-heading h2 { margin-bottom: 12px; }
  .section-heading .text-link,
  .shop .section-heading .text-link { display: inline-flex; margin-top: 2px; }
}

@media (max-width: 720px) {
  /* --- Safe Formula badge strip: a clean 2x2 instead of a ragged stack ---- */
  .contents-inner.badges {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-items: stretch;
  }
  .contents-inner.badges .badge-item {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 10px; text-align: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px; padding: 16px 10px; margin: 0;
  }
  .contents-inner.badges .badge-item svg { width: 30px; height: 30px; }
  .contents-inner.badges .badge-item span { font-size: 13px; line-height: 1.25; }

  /* --- "In every kit" strip ---------------------------------------------- */
  .contents-inner { flex-direction: column; gap: 16px; align-items: stretch; }
  .contents-group { justify-content: flex-start; }
  .contents-plus { align-self: center; }
  .icon-row.packets { flex-wrap: wrap; gap: 6px; }
  .icon-row.packets .pouch { width: 26px; height: 36px; }

  /* --- Comparison columns ------------------------------------------------ */
  .compare { grid-template-columns: 1fr; gap: 14px; }

  /* --- Video block: it was a tall empty slab ------------------------------ */
  .video-section .video-cover { min-height: 0; aspect-ratio: 16 / 10; }
  .video-section .video-note { font-size: 13px; }

  /* --- Forms ------------------------------------------------------------- */
  .wholesale-form { grid-template-columns: 1fr; }
  .wholesale-form .field.wide { grid-column: auto; }
  .signup-field { flex-direction: column; align-items: stretch; gap: 10px; }
  .signup-field input, .signup-field button { width: 100%; }

  /* --- Footer ------------------------------------------------------------ */
  .footer-links { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .legal-row { flex-wrap: wrap; gap: 10px 16px; }
  .footer-bottom { gap: 8px; }
}

/* ==========================================================================
   Revision 11 — scale comparison (About)
   A like-for-like size comparison, now two real photographs: a child indoors
   with a store-bought bubble toy on the left, a child outdoors beside a
   BubbleStix bubble on the right. It used to be a life-size dot against the
   photo; Jason supplied the left-hand photograph on 20 Sep 2026.
   ========================================================================== */

.scale-compare .scale-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px);
  align-items: stretch;
}
.scale-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(18px, 2.2vw, 28px);
}
.scale-card.scale-stix { border-color: transparent; background: var(--ink); color: #fff; }
.scale-card.scale-stix .scale-note,
.scale-card.scale-stix .scale-list li { color: #d6e0f7; }
.scale-card.scale-stix .scale-size { color: #ffbcd2; }

.scale-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--pink); margin-bottom: 14px;
}
.scale-card.scale-stix .scale-tag { color: #ffbcd2; }

/* The stage is what makes the size difference land, so BOTH cards use the
   same box and the same ratio — a photo that is taller or shorter than its
   neighbour destroys the comparison.

   Sized by ASPECT RATIO, not by a vw height, so the two stay identical at
   every width. The image is absolutely positioned: with `height: 100%` on a
   grid child the box grows to the image's own ratio instead of obeying
   `aspect-ratio`, which is how both stages ended up different heights once.

   1.43 is the compromise ratio. The left photo is 4:3 and loses almost
   nothing; the right is square, and at this height it keeps the raised stick,
   the boy's face and the whole bubble, losing only his legs below the knee.
   Do not flatten it further — at the old 2.6:1 the smile and the top of the
   bubble were both cut. */
.scale-stage {
  position: relative; display: grid; place-items: center;
  height: auto; aspect-ratio: 1.43; max-height: 460px;
  border-radius: 16px; overflow: hidden;
  background: var(--sky);
}
.scale-card.scale-stix .scale-stage { background: #16235c; }
.scale-stage.has-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.scale-toy  .scale-stage.has-photo img { object-position: center 50%; }
.scale-stix .scale-stage.has-photo img { object-position: center 40%; }

.scale-size { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--pink); }
.scale-figure {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -1.2px; line-height: 1.05;
  margin-top: 4px; color: var(--ink);
}
.scale-card.scale-stix .scale-figure { color: #fff; }
.scale-card.scale-stix .scale-tag,
.scale-card.scale-stix .scale-list li { color: #e3ebff; }
.scale-note { font-size: 13px; line-height: 1.45; margin-top: 6px; }
.scale-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 7px; }
.scale-list li { position: relative; padding-left: 18px; font-size: 14px; }
.scale-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .45;
}
.scale-card.scale-stix .scale-list li::before { background: #ffbcd2; opacity: 1; }

.scale-caption {
  margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--body);
  max-width: 62ch;
}

@media (max-width: 720px) {
  .scale-compare .scale-grid { grid-template-columns: 1fr; gap: 14px; }
  .scale-card { padding: 18px 16px; border-radius: 18px; }
  .scale-stage { min-height: 190px; }
  .scale-figure { font-size: 34px; }
  .scale-list { grid-template-columns: 1fr 1fr; gap: 7px 12px; }
  .scale-caption { font-size: 12px; }
}

/* <picture> is inline by default, so a width:100% child has nothing to fill. */
picture { display: contents; }
.page-hero-img picture { display: block; width: 100%; }

@media (max-width: 720px) {
  .page-hero.has-img { align-items: stretch; }
  .page-hero.has-img .page-hero-img,
  .page-hero.has-img .page-hero-img picture { width: 100%; align-self: stretch; }
}

/* ==========================================================================
   Revision 12 — mobile polish, second pass
   ========================================================================== */

@media (max-width: 720px) {

  /* Featured guide: lead with the photo, trim the wall of text */
  .featured-guide { display: flex; flex-direction: column; gap: 0; }
  .featured-guide figure { order: -1; margin: 0 0 16px; }
  .featured-guide img { height: clamp(190px, 46vw, 250px); border-radius: 16px; }
  .featured-guide h2 { font-size: clamp(26px, 7.6vw, 34px); letter-spacing: -1px; line-height: 1.08; }
  .featured-guide > div > p:first-of-type,
  .featured-guide p:not(.eyebrow):not(.guide-meta) {
    font-size: 16px; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .featured-guide .guide-meta { font-size: 13px; margin-top: 10px; }
  .featured-guide .button { width: 100%; max-width: 320px; }

  /* Guide cards */
  .guide-grid { grid-template-columns: 1fr; gap: 16px; }
  .guide-photo img { height: 180px; }
  .guide-body h3 { font-size: 19px; line-height: 1.22; }
  .guide-body p { font-size: 15px; line-height: 1.5; }

  /* Topic chips */
  .topics { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Cards and kit tiles */
  .card-grid, .card-grid.trio, .card-grid.quad { grid-template-columns: 1fr; gap: 12px; }
  .kit-grid { grid-template-columns: 1fr; gap: 16px; }
  .kit-photo img { height: 260px; }
  .kit-bottom { flex-wrap: wrap; gap: 12px; }
  .kit-bottom .button { flex: 1 1 auto; justify-content: center; }

  /* Reviews */
  .review-grid, .reviews { grid-template-columns: 1fr; gap: 16px; }

  /* Article bodies */
  .article-body h2 { font-size: clamp(25px, 7vw, 32px); }
  .article-body h3 { font-size: 19px; }
  .article-body p, .article-body li { font-size: 16.5px; line-height: 1.68; }

  /* Closing band */
  .closing h2 { font-size: clamp(28px, 8.2vw, 38px); }
  .closing .button { width: 100%; max-width: 320px; }

  /* Buttons shouldn't sit edge to edge in a row */
  .compare-cta .button, .promo .button { width: 100%; max-width: 320px; }
}

/* -------------------------------------------------------------------------
   Revision 13 — mobile photography: show the whole bubble

   On mobile the article and guide-card images were forced into fixed-height
   letterboxes (180–240px). Many of the photographs are square or 4:3, so a
   centred cover-crop was cutting 30–48% of the frame — taking the tops of
   the sticks and the top of the bubble with it, which is the part that shows
   how the bubble is made.

   Below 720px these images now keep their own proportions: no crop at all,
   so the full person and the full bubble are always in frame. Desktop and
   tablet are unchanged.
   ---------------------------------------------------------------------- */

@media (max-width: 720px) {

  /* Academy guide cards */
  .guide-photo img {
    height: auto;
    max-height: none;
    object-fit: contain;   /* no-op once height is intrinsic; never distorts */
    display: block;
  }

  /* Page heroes and the home hero use purpose-made crops that were tuned
     separately — deliberately left alone here. */
}

/* -------------------------------------------------------------------------
   Revision 14 — stop cropping content photography on desktop too

   Same defect as Revision 13, at every width: content images were given a
   fixed pixel height and cover-cropped, so a square or portrait photograph
   lost 30–50% of its frame — reliably the top, where the sticks and the
   forming bubble are.

   Two different fixes, because two different jobs:

   1. Editorial images (article heroes, in-body figures, the featured guide)
      sit in a single column, so they simply keep their own proportions. A
      max-height bounds the tall portraits — the image shrinks in width
      rather than losing its top.

   2. Card grids need every tile the same height, so the photo is fitted
      (never cropped) onto a soft mat. 4:3 is the ratio that leaves the
      least mat across this photo library.

   Deliberately NOT changed: the home and page heroes, the home mosaic
   gallery, the review thumbnails and the full-bleed closing banners. Those
   are art-directed crops, and the gallery crops were tuned by hand.
   ---------------------------------------------------------------------- */

/* 1. Editorial imagery — never cropped, at any width */
.article-hero-img img,
.article-figure img,
.featured-guide img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  margin-inline: auto;
}

.article-hero-img img { max-height: 540px; }
.article-figure img   { max-height: 580px; }
.featured-guide img   { max-height: 480px; }

/* 2. Academy guide cards — uniform tiles, fitted not cropped.
      Below 720px the grid is a single column, so the images there keep
      their natural height instead (Revision 13). */
@media (min-width: 721px) {
  .guide-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #e9f0fb;
  }
}

/* 3. Product cards — the whole kit, not two thirds of it. The product
      photographs are portrait; a square mat shows them complete with only
      a narrow margin either side. */
.kit-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #f2f6fd;
}

/* -------------------------------------------------------------------------
   Revision 15 — the iPad layout (721–1150px)

   Between the phone rules and the desktop grid, the site kept desktop's
   side-by-side sections at roughly half their intended width. Every photo
   box turned portrait or into an extreme letterbox while the photographs
   are landscape, so the crops were the worst on the site: the home hero
   showed 31% of its frame at 768px and 40% at 1024px, the gallery tiles
   36–62%, the closing banner 57%. The hero photograph is three girls with
   a bubble spanning the full width — at those sizes both sticks and most
   of the bubble were simply gone. The headline also ran underneath the
   photo at 768px.

   So this band gets the same idea as the phone, at tablet scale: the
   photograph leads, full width, at its own proportions, and the words sit
   underneath it. Sections that are side-by-side on desktop stack here
   rather than being squeezed.
   ---------------------------------------------------------------------- */

@media (min-width: 721px) and (max-width: 1150px) {

  /* ---- Home hero: the whole bubble, both sticks, nothing cut ---- */
  .hero-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* The photograph leads, as it does on the phone */
  .hero-visual {
    order: -1;
    margin: 0;
    height: auto;
    min-height: 0;
  }

  .hero-image {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;          /* the photograph's own ratio */
    object-fit: cover;
    object-position: center;
    border-radius: 0 0 40px 40px;
  }

  .hero-copy {
    padding: 40px var(--gutter) 46px;
    max-width: 780px;
    margin: 0 auto;
    align-self: auto;
  }

  .hero h1 { font-size: clamp(54px, 7.4vw, 78px); line-height: 1; }
  .hero-description { font-size: 18px; max-width: 520px; }

  /* The polaroid inset hangs off the left edge on desktop; bring it inside */
  .hero-inset { left: 20px; bottom: 20px; width: 128px; }
  .made-seal  { right: 22px; bottom: 22px; }

  /* ---- Page heroes: photograph first, uncropped ---- */
  .page-hero.has-img {
    display: flex;
    flex-direction: column;
    padding: 0 0 40px;
  }

  .page-hero.has-img .page-hero-img {
    order: -1;
    margin: 0;
    padding: 0 var(--gutter);
  }

  .page-hero.has-img .page-hero-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    display: block;
    margin: 22px auto 0;
    border-radius: 22px;
  }

  .page-hero.has-img .page-hero-copy {
    padding: 30px var(--gutter) 0;
    max-width: 780px;
    margin: 0 auto;
  }

  /* ---- Featured kit block ---- */
  .featured { display: block; }
  .feature-stage { display: block; min-height: 0; }
  .feature-copy { margin-top: 34px; }

  /* ---- Split sections ---- */
  .split-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    display: block;
    margin-inline: auto;
  }

  /* ---- Video section ---- */
  .video-section {
    display: flex;
    flex-direction: column;
    border-radius: 0 48px 0 48px;
  }

  .video-cover {
    min-height: 0;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  /* ---- Gallery: two up, each frame whole ---- */
  .gallery {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  .gallery figure:nth-child(n) { transform: none; grid-row: auto; height: auto; }

  .gallery figure:nth-child(n) img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
  }

  .gallery figure:nth-child(3) { grid-column: span 2; }

  /* ---- Closing banner ---- */
  .closing {
    display: flex;
    flex-direction: column;
  }

  .closing > img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  /* ---- Benefits photograph ---- */
  .benefits-photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* ---- Featured kit photograph: its own 2.13 frame ---- */
  .feature-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 2.13;
    object-fit: cover;
    object-position: 30% center;
  }

  /* ---- Review thumbnails: 4:3, matching the photographs ---- */
  .review > img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  /* ---- Card grids: room to breathe ---- */
  .review-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .guide-grid  { grid-template-columns: 1fr 1fr; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
}

/* Three product cards are cramped below 900px — two up reads better */
@media (min-width: 721px) and (max-width: 900px) {
  .kit-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Form controls have an intrinsic minimum width from the `size` attribute,
   which makes a grid column refuse to shrink. Between 901 and 1150px this
   pushed the wholesale form 42px past the right edge of the page. */
.wholesale-form,
.wholesale-form .field { min-width: 0; }

.wholesale-form .field input,
.wholesale-form .field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   Revision 16 — desktop home hero: the product set beside the headline
   The Original Kit (box + sticks + five mix packets) sits under the copy with
   a full-width Shop Now bar beneath it, and the 15+ hours claim reads over the
   photograph. Scoped to >=1151px only; tablet and phone keep the .hero-actions
   button and are untouched by this block.
   ========================================================================== */
.hero-shop,
.hero-shout { display: none; }

/* ==========================================================================
   Kit cards — the product shot.
   Each card shows what physically arrives: package, sticks, mix packets,
   left to right on one baseline. The Camp Pack reuses the single-kit shot
   with a x10 beside it; drawing ten of everything is unreadable at this size.
   Sized by HEIGHT so all three shots share a baseline scale, with
   object-fit: contain so a narrow card letterboxes instead of distorting.
   ========================================================================== */
.kit-kitshot {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin: 0 0 clamp(12px, 1.4vw, 18px); padding: 4px 0 10px;
}
.kit-kitshot img {
  display: block; width: auto; max-width: 100%;
  height: clamp(104px, 10.2vw, 150px); object-fit: contain;
}
.kit-mult {
  font-style: normal; font-weight: 800; line-height: 1;
  font-size: clamp(19px, 1.8vw, 26px); color: #1e2d63; letter-spacing: -.01em;
}

@media (min-width: 1151px) {
  /* The hero sells the HEADLINE and the BUTTON, and nothing else. The kit
     shot lives in the "What's in the box" section below, where it has room
     to be seen — see that block further down.

     The whole section has to land inside ONE screen, so every vertical
     measure here is tied to viewport height and collapses together on a
     short laptop. `min-height` makes the hero fill the first screen, and
     the copy is centred in it with generous spacing between each element —
     the earlier version left the type bunched at the middle of a tall
     column, which read as an accident rather than a design.

     Budget: hero bottom must clear `100vh - 163px` (a 43px announcement bar
     above the 120px header). This block fits a 600px-tall viewport. Do not
     spend that margin — a 14" MacBook Pro with a bookmarks bar has well
     under 700px of page height. */
  .hero-inner  { grid-template-columns: 46% 54%;
                 min-height: min(calc(100vh - 163px), 720px); }
  .hero-copy   { --bar: min(100%, clamp(280px, 46vh, 470px));
                 padding: clamp(14px, 2.2vh, 34px) clamp(34px, 3.4vw, 56px);
                 align-self: stretch;
                 display: flex; flex-direction: column; justify-content: center; }
  .hero-visual { margin: clamp(12px, 2.2vh, 34px) clamp(12px, 2.2vh, 34px) clamp(12px, 2.2vh, 34px) 0; }

  .hero .eyebrow     { margin-bottom: clamp(10px, 2.2vh, 26px); font-size: clamp(11px, 1.5vh, 14px); }
  .hero h1           { font-size: clamp(34px, 9.4vh, 124px); margin-bottom: clamp(12px, 2.6vh, 32px); line-height: 1.02; }
  .hero-description  { font-size: clamp(16px, 2.3vh, 22px); max-width: 560px; line-height: 1.5; }

  .hero-actions { display: none; }
  .hero-shop {
    display: flex;
    width: var(--bar);
    margin: clamp(18px, 4.2vh, 48px) 0 0;
    gap: clamp(9px, 1.6vh, 16px);
    min-height: clamp(50px, 7.4vh, 92px);
    padding: clamp(8px, 1.3vh, 22px) clamp(22px, 3vh, 34px);
    font-size: clamp(17px, 2.9vh, 30px);
    font-weight: 700;
    letter-spacing: .2px;
    border-radius: 100px;
    border: 0;
    background: linear-gradient(180deg, #d33a75 0%, #be2e65 52%, #a82553 100%);
    box-shadow: 0 2px 0 rgba(255,255,255,.35) inset,
                0 1px 2px rgba(24,40,90,.18),
                0 14px 26px -6px rgba(190,46,101,.44),
                0 30px 60px -20px rgba(24,40,90,.38);
  }
  .hero-shop:hover {
    background: linear-gradient(180deg, #c22f66 0%, #ad2457 52%, #971d4a 100%);
  }
  .hero-shop span { font-size: clamp(16px, 2.6vh, 27px); line-height: 1; transform: translateY(1px); }

  /* the rule spans the same width as the button */
  .hero-made { width: var(--bar); max-width: none;
               margin-top: clamp(16px, 3.4vh, 40px);
               padding-top: clamp(14px, 2.2vh, 28px);
               gap: clamp(10px, 1.6vh, 16px); }
  .hero-made-seal { width: clamp(30px, 4.4vh, 48px); height: clamp(30px, 4.4vh, 48px); }
  .hero-made-seal svg { width: clamp(16px, 2.4vh, 26px); height: clamp(16px, 2.4vh, 26px); }
  .hero-made strong { font-size: clamp(14px, 2.1vh, 19px); }
  .hero-made > span:last-child > span { font-size: clamp(11.5px, 1.7vh, 13px); margin-top: clamp(2px, .5vh, 5px); }

  /* 15+ hours over the photograph, inset to match the photo's own margin */
  .hero-shout {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: clamp(60px, 15vh, 150px) clamp(20px, 2.9vh, 44px) clamp(16px, 2.9vh, 44px);
    border-radius: 0 0 26px 26px;
    background: linear-gradient(to top,
                rgba(12,22,58,.90) 0%, rgba(12,22,58,.60) 44%, rgba(12,22,58,0) 100%);
    pointer-events: none;
    z-index: 1;
  }
  .hero-shout-1 { font: 700 clamp(13px, 2.2vh, 26px)/1 var(--sans); letter-spacing: clamp(2.5px, .5vh, 5px);
                  text-transform: uppercase; color: #ffd7e6; margin: 0 0 clamp(6px, 1.2vh, 14px); }
  .hero-shout-2 { font-family: var(--display); font-weight: 600; font-size: clamp(44px, 10.4vh, 104px);
                  line-height: .88; letter-spacing: -3px; color: #fff; margin: 0; }
  .hero-shout-2 em { font-style: normal; color: #ffd84d; }
  .hero-shout-3 { font: 700 clamp(17px, 3.4vh, 34px)/1.1 var(--sans); color: #fff;
                  margin: clamp(5px, 1vh, 12px) 0 0; }
}

/* --------------------------------------------------------------------------
   Revision 16 — tablet (721–1150px)
   The photo band keeps the top of the hero and carries the 15+ hours mark.
   Below it the product sits at a fixed 420px with the Shop Now bar and the
   rule trimmed to the same width, so product, button and rule read as one
   block flush with the headline. Letting the product fill the column instead
   made it 677px tall and pushed the hero past 1900px.
   -------------------------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 1150px) {
  .hero-actions { display: none; }
  .hero-shop {
    display: flex; width: 420px; margin: 40px 0 0; gap: 16px;
    min-height: 78px; padding: 22px 28px; font-size: 24px; font-weight: 700;
    border-radius: 100px; border: 0;
    background: linear-gradient(180deg, #d33a75 0%, #be2e65 52%, #a82553 100%);
    box-shadow: 0 2px 0 rgba(255,255,255,.35) inset,
                0 1px 2px rgba(24,40,90,.18),
                0 12px 22px -6px rgba(190,46,101,.44),
                0 26px 50px -20px rgba(24,40,90,.38);
  }
  .hero-shop span { font-size: 22px; line-height: 1; }
  .hero-made { max-width: 420px; margin-top: 44px; padding-top: 26px; }

  .hero-shout {
    display: block; position: absolute; left: 0; right: 0; bottom: 0;
    padding: 120px 40px 34px; border-radius: 0 0 40px 40px; pointer-events: none;
    background: linear-gradient(to top,
                rgba(12,22,58,.90) 0%, rgba(12,22,58,.58) 46%, rgba(12,22,58,0) 100%);
  }
  .hero-shout-1 { font: 700 17px/1 var(--sans); letter-spacing: 4px;
                  text-transform: uppercase; color: #ffd7e6; margin: 0 0 10px; }
  .hero-shout-2 { font-family: var(--display); font-weight: 600; font-size: 68px;
                  line-height: .9; letter-spacing: -2px; color: #fff; margin: 0; }
  .hero-shout-2 em { font-style: normal; color: #ffd84d; }
  .hero-shout-3 { font: 700 24px/1.1 var(--sans); color: #fff; margin: 9px 0 0; }
}

/* --------------------------------------------------------------------------
   Revision 16 — phone (<=720px)
   Desktop logic stacked. The product is held at 88% and centred: at full
   width it crowds the column on a narrow phone, and left-aligning a narrower
   product under a full-width button reads as an accidental indent.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .hero-actions { display: none; }
  .hero-shop {
    display: flex; width: 100%; margin: 30px 0 0; gap: 14px;
    min-height: 64px; padding: 18px 22px; font-size: 19px; font-weight: 700;
    border-radius: 100px; border: 0;
    background: linear-gradient(180deg, #d33a75 0%, #be2e65 52%, #a82553 100%);
    box-shadow: 0 2px 0 rgba(255,255,255,.35) inset,
                0 1px 2px rgba(24,40,90,.18),
                0 10px 18px -6px rgba(190,46,101,.42),
                0 20px 40px -18px rgba(24,40,90,.36);
  }
  .hero-shop span { font-size: 18px; line-height: 1; }
  .hero-made { max-width: none; margin-top: 32px; padding-top: 22px; }

  .hero-shout {
    display: block; position: absolute; left: 0; right: 0; bottom: 0;
    padding: 80px 22px 20px; border-radius: 0 0 18px 18px; pointer-events: none;
    background: linear-gradient(to top,
                rgba(12,22,58,.90) 0%, rgba(12,22,58,.55) 48%, rgba(12,22,58,0) 100%);
  }
  .hero-shout-1 { font: 700 12px/1 var(--sans); letter-spacing: 3px;
                  text-transform: uppercase; color: #ffd7e6; margin: 0 0 6px; }
  .hero-shout-2 { font-family: var(--display); font-weight: 600; font-size: 44px;
                  line-height: .9; letter-spacing: -1.2px; color: #fff; margin: 0; }
  .hero-shout-2 em { font-style: normal; color: #ffd84d; }
  .hero-shout-3 { font: 700 17px/1.1 var(--sans); color: #fff; margin: 6px 0 0; }
}


/* ==========================================================================
   Shop — formula refills (21 Sep 2026)
   Sits directly under the three kits. Deliberately subordinate: horizontal
   cards, a square photo, two across, so a first-time visitor never mistakes
   a $39.99 refill for a kit. "Formula only — sticks not included" is on
   every card for the same reason.

   The cards reuse .kit-body / .kit-bottom so the type, bullets, price and
   button match the kits exactly. The photos are the product's own gallery
   shots from wp-content/uploads, referenced through content_url() so the
   bubblesticks.com alias rewrites them to its own host.
   ========================================================================== */
.refills { padding-top: 0; }
.refill-head { display: flex; gap: 20px; align-items: center; margin: 0 0 24px; }
.refill-head .card-icon { margin-bottom: 0; flex-shrink: 0; }
.refill-head h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 6px; }
.refill-head p { margin: 0; font-size: 16px; line-height: 1.55; max-width: 62ch; }

.refill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.refill-card {
  display: flex; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; background: #fff;
}
.refill-photo { flex: 0 0 clamp(150px, 15vw, 220px); aspect-ratio: 1; background: #f2f6fd; }
.refill-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.refill-card .kit-body { padding: 22px 22px 20px; }
.refill-card .kit-body h3 { font-size: 23px; }
.refill-card .kit-body ul { margin: 12px 0 16px; font-size: 14.5px; }

@media (max-width: 900px) {
  .refill-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 480px) {
  .refill-head { align-items: flex-start; }
  .refill-card { flex-direction: column; }
  .refill-photo { flex-basis: auto; width: 100%; aspect-ratio: 16 / 10; }
}


/* ==========================================================================
   Kit + refill cards link to their product pages (21 Sep 2026)
   The NAME is the real link. The photo and the product shot link to the same
   page but carry tabindex="-1" aria-hidden="true", so keyboard and screen-
   reader users meet one link per card, not three. Add to Cart still goes
   straight to the cart — decided buyers keep the one-click path.
   ========================================================================== */
.kit-card h3 a, .refill-card h3 a { color: inherit; text-decoration: none; }
.kit-card h3 a:hover, .refill-card h3 a:hover,
.kit-card h3 a:focus-visible, .refill-card h3 a:focus-visible {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;
}
.kit-link { display: block; }
.kit-photo .kit-link, .refill-photo .kit-link { height: 100%; }
.kit-kitshot .kit-link { display: contents; }
.kit-photo, .refill-photo { overflow: hidden; }
.kit-photo .kit-link img, .refill-photo .kit-link img { transition: transform .35s ease; }
.kit-card:hover .kit-photo img, .refill-card:hover .refill-photo img { transform: scale(1.03); }