.bl-how{--beachlock-turquoise:#168F98;--beachlock-turquoise-soft:#55B6B5;--beachlock-turquoise-pale:#CFE9E5;--beachlock-cream:#FAF4E8;--beachlock-sand:#EAD2A8;--beachlock-brown:#352016;--beachlock-brown-soft:#69584D;color:var(--beachlock-brown);background:#faf4e8;font-family:Manrope,sans-serif}.bl-how *,body:has(.bl-how) .bl-footer *{box-sizing:border-box}.bl-how h1,.bl-how h2,.bl-how p{margin:0}.bl-how-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#168f98}.bl-how-hero:before{content:"";position:absolute;z-index:-2;width:100%;height:100%;top:0;right:0;bottom:0;left:0;background:url(./beachlock-towels-shore.webp) center 38%/cover}.bl-how-hero:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#005862d9,#006d7499 55%,transparent)}.bl-how-hero>div{max-width:1040px;margin:auto;padding:54px 32px 42px}.bl-how-kicker{font-size:var(--bl-type-small);letter-spacing:.025em}body #MainContent .bl-how h1{font-size:var(--bl-type-large);line-height:1.05;letter-spacing:-.035em;color:#fff;margin:10px 0 16px}.bl-how-hero p:last-child{font-size:var(--bl-type-small);line-height:1.4}.bl-how-content{max-width:1040px;margin:auto;padding:24px 28px 18px}.bl-how-steps{list-style:none;padding:0;margin:0}.bl-how-step{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;min-height:280px;position:relative}.bl-how-photo{display:block;width:100%;height:auto;aspect-ratio:370/226;object-fit:cover;border-radius:26px}.bl-how-copy{padding:22px}.bl-how-copy h2{font-size:var(--bl-type-medium);line-height:1.14;letter-spacing:-.025em}.bl-how-copy p{font-size:var(--bl-type-small);line-height:1.4;margin-top:14px;color:#69584d}.bl-how-step:nth-child(2n) .bl-how-photo{grid-column:3;grid-row:1}.bl-how-step:nth-child(2n) .bl-how-copy{grid-column:1;grid-row:1;padding-left:10px}.bl-how-track{grid-column:2;grid-row:1;align-self:stretch;position:relative;color:#168f98}.bl-how-track>span{position:absolute;top:20%;left:75%;transform:translate(-50%);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid #168F98;background:#faf4e8;font-size:var(--bl-type-small);color:#352016}.bl-how-benefits{border:1px solid #fff9;background:linear-gradient(#fffdfa,#fbf5ec);border-radius:24px;box-shadow:0 8px 22px #704b2514;padding:20px 14px;text-align:center;margin-top:18px}.bl-how-benefits h2{font-size:var(--bl-type-medium);margin-bottom:20px}.bl-how-benefits ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.bl-how-benefits li{display:flex;flex-direction:column;align-items:center;gap:10px;padding-inline:7px;font-size:var(--bl-type-small);line-height:1.3}.bl-how-benefits li+li{border-left:1px solid #e2d6c9}.bl-how-benefits svg{width:38px;height:38px}.bl-how-cta{display:flex;align-items:center;justify-content:center;gap:20px;max-width:460px;width:fit-content;min-height:48px;margin:22px auto 0;padding:11px 28px;border:1px solid #168F98;border-radius:99px;color:#168f98;background:#fff9ed88;font-size:var(--bl-type-small);font-weight:600;text-decoration:none;box-shadow:0 3px 8px #80644208}.bl-how-cta:hover{background:#fffaf3}.bl-how-cta:focus-visible{outline:3px solid #005763;outline-offset:4px}body:has(.bl-how) #header-component .header-menu__inner,body:has(.bl-how) #header-component .search-action{display:none}body:has(.bl-how) #header-component .header__columns{position:relative}body:has(.bl-how) #header-component .header-logo{position:absolute;left:50%;transform:translate(-50%)}@media(max-width:749px){.bl-how-hero>div{padding:28px 20px 24px}.bl-how-kicker{font-size:var(--bl-type-small)}body #MainContent .bl-how h1{margin:7px 0 10px}.bl-how-content{padding:12px 13px 14px}.bl-how-step{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);min-height:145px}.bl-how-photo{border-radius:16px}.bl-how-copy{padding:12px 3px 12px 8px}.bl-how-step:nth-child(2n) .bl-how-copy{padding-left:7px;padding-right:5px}.bl-how-copy h2{font-size:var(--bl-type-medium)}.bl-how-copy p{font-size:var(--bl-type-small);margin-top:9px}.bl-how-track>span{width:28px;height:28px;font-size:var(--bl-type-small);top:22%}.bl-how-benefits{border-radius:16px;padding:12px 5px;margin-top:10px}.bl-how-benefits h2{font-size:var(--bl-type-medium);margin-bottom:12px}.bl-how-benefits li{font-size:var(--bl-type-small);gap:7px;padding-inline:3px}.bl-how-benefits svg{width:27px;height:27px}.bl-how-cta{font-size:var(--bl-type-small);min-height:44px;margin-top:14px;padding:9px 22px;gap:12px}}@media(max-width:359px){.bl-how-step{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}.bl-how-copy h2{font-size:var(--bl-type-medium)}.bl-how-copy p{font-size:var(--bl-type-small)}.bl-how-benefits ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}.bl-how-benefits li:nth-child(3){border-left:0}}.bl-how-journey{position:relative}.bl-how-journey-path{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.bl-how-journey-path path{fill:none;stroke:var(--beachlock-turquoise);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.bl-how-step:nth-child(2n) .bl-how-track>span{left:25%}.bl-how-track>span{z-index:1}.bl-how-photo{filter:saturate(.82) contrast(.96)}.bl-how-hero:before{filter:saturate(.82) contrast(.96)}.bl-how-hero:after{background:linear-gradient(90deg,#205c60d9,#387b7b99 55%,transparent)}body:has(.bl-how) #header-component .header__row--top{background:#168f98!important;--color-background:#168F98}body:has(.bl-how) #header-component .header__underlay-closed{background:#168f98}@media(max-width:749px){.bl-how-track>span{left:70%}.bl-how-step:nth-child(2n) .bl-how-track>span{left:30%}}.bl-how-step{grid-template-columns:minmax(0,calc((100% - 96px)/2 + 12px)) 96px minmax(0,1fr)}.bl-how-step:nth-child(2n){grid-template-columns:minmax(0,calc((100% - 96px)/2 - 12px)) 96px minmax(0,1fr)}@media(max-width:749px){.bl-how-step{grid-template-columns:minmax(0,calc((100% - 48px)/2 + 10px)) 48px minmax(0,1fr)}.bl-how-step:nth-child(2n){grid-template-columns:minmax(0,calc((100% - 48px)/2 - 10px)) 48px minmax(0,1fr)}}@media(max-width:749px){body:has(.bl-how) #header-component .header__columns,body:has(.bl-how) #header-component[data-menu-style=drawer] .header__columns{grid-template-columns:88px minmax(0,1fr) 88px;grid-template-areas:"leftA center rightB";gap:0}body:has(.bl-how) #header-component .header-logo{position:static;left:auto;transform:none;grid-area:center;justify-self:center;max-width:100%}body:has(.bl-how) #header-component header-actions{grid-area:rightB;width:88px;gap:0}}.bl-how-photo.bl-how-models{object-fit:contain;object-position:center;background:#ead2a8;filter:none}@media(max-width:749px){.bl-how-journey{margin-inline:-7px}.bl-how-step{grid-template-columns:minmax(0,calc((100% - 44px)/2 + 15px)) 44px minmax(0,1fr)}.bl-how-step:nth-child(2n){grid-template-columns:minmax(0,calc((100% - 44px)/2 - 15px)) 44px minmax(0,1fr)}.bl-how-photo{object-position:center;aspect-ratio:1.5}.bl-how-track>span,.bl-how-step:nth-child(2n) .bl-how-track>span{left:50%;top:50%}.bl-how-step:nth-child(4) .bl-how-photo{object-position:55% center}}@media(max-width:749px){.bl-how-benefits ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 8px}.bl-how-copy{padding-block:18px}}@media(max-width:749px){.bl-how-step{grid-template-columns:minmax(0,2fr) 40px minmax(0,3fr)}.bl-how-step:nth-child(2n){grid-template-columns:minmax(0,3fr) 40px minmax(0,2fr)}.bl-how-copy,.bl-how-step:nth-child(2n) .bl-how-copy{padding-inline:6px}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/beachlock-how.css.map */