/* Aqua One 5.18 — client assets, robust local typography and refined proportions */
:root{
--aq-navy:#13264b;
--aq-blue:#0b4a98;
--aq-cyan:#1aa5a8;
--aq-cyan-dark:#108c91;
--aq-ink:#111722;
--aq-soft:#f5f8fa;
--aq-line:#dbe4ea;
--aq-radius:14px;
--aq-shadow:0 12px 32px rgba(16,38,75,.10);
}
html{scroll-behavior:smooth}
body{font-family:'Aqua Rubik',Arial,sans-serif;color:var(--aq-ink);background:#fff;-webkit-font-smoothing:antialiased}
body *{box-sizing:border-box}
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.aq515-center{text-align:center}
.aq515-section{padding:54px 0;background:#fff}
.aq515-soft{background:#f4f8fb}
.aq515-title{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.035em;margin:0 0 14px;font-size:clamp(27px,2.4vw,39px);color:#080d18;text-transform:uppercase}
.aq515-title span{color:var(--aq-cyan)}
.aq515-lead{max-width:1120px;margin:0 0 28px;font-size:16px;line-height:1.45;color:#222c3c}
.aq515-section .aq515-center.aq515-lead{margin-inline:auto}
/* Header */
.aq515-header{height:78px;background:#fff;border-bottom:1px solid rgba(20,41,75,.12);box-shadow:0 2px 10px rgba(16,38,75,.04);position:relative;z-index:50}
.aq515-header-inner{width:min(1320px,calc(100% - 54px))!important;height:78px!important;margin:auto!important;display:grid!important;grid-template-columns:150px minmax(0,1fr) 220px!important;align-items:center!important;gap:20px!important}
.aq515-header .aq-ref-brand{justify-self:start;display:flex;align-items:center}
.aq515-header .aqua-default-logo{width:112px!important;height:auto!important;display:block}
.aq515-nav{justify-self:center!important;width:auto!important;position:static!important;transform:none!important}
.aq515-nav .aqua-menu{display:flex!important;align-items:center!important;justify-content:center!important;gap:clamp(30px,3.2vw,56px)!important;margin:0!important;padding:0!important;list-style:none!important;white-space:nowrap}
.aq515-nav .aqua-menu>li{position:relative;margin:0!important;padding:0!important}
.aq515-nav .aqua-menu>li>a{font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;font-size:15px!important;font-weight:500!important;letter-spacing:.01em!important;color:#161b25!important;padding:28px 0 26px!important;display:inline-flex!important;align-items:center;gap:6px;text-decoration:none!important;transition:color .2s ease}
.aq515-nav .aqua-menu>li>a::after{content:"";position:absolute;left:50%;right:50%;bottom:17px;height:2px;background:var(--aq-cyan);transition:left .22s ease,right .22s ease}
.aq515-nav .aqua-menu>li:hover>a::after,.aq515-nav .aqua-menu>li.current-menu-item>a::after,.aq515-nav .aqua-menu>li.current-menu-ancestor>a::after{left:0;right:0}
.aq515-nav .sub-menu{top:64px!important;border:1px solid #e3e9ee!important;border-radius:10px!important;box-shadow:0 16px 34px rgba(15,34,63,.12)!important;padding:8px!important;min-width:220px!important;background:#fff!important}
.aq515-nav .sub-menu a{font-family:'Aqua Rubik',Arial,sans-serif!important;font-size:14px!important;padding:10px 12px!important;border-radius:7px!important}
.aq515-nav .sub-menu a:hover{background:#f2f8f8!important;color:var(--aq-cyan-dark)!important}
.aq515-header-actions{justify-self:end!important;display:flex!important;align-items:center!important;gap:18px!important}
.aq515-header-actions .lang{font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif;font-size:14px;color:#1d2732}
.aq515-header .aq-ref-cta{height:42px!important;min-width:160px!important;border-radius:6px!important;background:#073e8c!important;font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;font-size:14px!important;font-weight:500!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:12px!important;padding:0 18px!important}
/* Hero */
.aq515-hero{background-repeat:no-repeat;background-size:cover;background-position:center;position:relative;overflow:hidden}
.aq515-hero--home,.aq515-hero--sub{min-height:clamp(440px,41.67vw,610px)}
.aq515-hero--short{min-height:clamp(360px,30vw,455px)}
.aq515-hero__inner{min-height:inherit;display:flex;align-items:center}
.aq515-hero__copy{width:min(550px,48%);padding:32px 0 36px}
.aq515-eyebrow{font-family:'Aqua Jost','Aqua Rubik',Arial,sans-serif;font-weight:300;color:var(--aq-cyan);font-size:clamp(21px,2vw,33px);letter-spacing:.035em;margin-bottom:12px;text-transform:uppercase}
.aq515-hero h1{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:700;color:#080b11;text-transform:uppercase;line-height:.94;letter-spacing:-.045em;font-size:clamp(45px,4.55vw,72px);margin:0 0 16px}
.aq515-hero--short h1{font-size:clamp(40px,3.55vw,57px)}
.aq515-hero h1 span{color:var(--aq-cyan)}
.aq515-hero p{font-family:'Aqua Rubik',Arial,sans-serif;font-size:clamp(16px,1.4vw,20px);line-height:1.24;margin:0 0 22px;max-width:540px;color:#171c25}
.aq515-buttons{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.aq515-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;padding:10px 18px;border:1.5px solid transparent;border-radius:6px;font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;text-decoration:none!important;line-height:1.1;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.aq515-btn--teal{background:var(--aq-cyan);color:#fff!important}
.aq515-btn--blue{background:#0a7fbb;color:#fff!important}
.aq515-btn--outline{background:rgba(255,255,255,.82);color:#12324f!important;border-color:#247da7}
.aq-micro-cta:hover,.aq515-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(16,38,75,.14)}
.aq-micro-cta span,.aq515-btn span{display:inline-block;transition:transform .2s ease}
.aq-micro-cta:hover span,.aq515-btn:hover span{transform:translateX(4px)}
/* Choice cards */
.aq515-offer{padding-top:34px;padding-bottom:38px}
.aq515-choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.aq515-choice-card{position:relative;border:1px solid #d9e2e9;border-radius:8px;padding:38px 18px 18px;text-align:center;min-height:220px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;background:#fff}
.aq515-choice-card.blue{background:#f2f6fd}.aq515-choice-card.sand{background:#fffaf0}.aq515-choice-card.mint{background:#f1f9f3}.aq515-choice-card.lilac{background:#f8f2fb}
.aq515-choice-card:hover{transform:translateY(-5px);box-shadow:var(--aq-shadow);border-color:#c5d5de}
.aq515-icon-bubble{position:absolute;top:-28px;left:50%;transform:translateX(-50%);width:66px;height:66px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid #dfe7ec;box-shadow:0 7px 18px rgba(20,42,72,.10)}
.aq515-icon-bubble img{width:42px;height:42px;object-fit:contain;transition:transform .22s ease}
.aq515-choice-card:hover .aq515-icon-bubble img{transform:scale(1.08)}
.aq515-choice-card h3{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.02;margin:7px 0 11px}
.aq515-choice-card p{font-size:14px;line-height:1.3;margin:0 0 14px;color:#384554}
.aq515-choice-card a{font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif;color:#176d9d;text-decoration:none;font-size:13px;font-weight:600}
.aq515-choice-card a span{transition:transform .18s ease;display:inline-block}.aq515-choice-card a:hover span{transform:translateX(4px)}
/* Brand story */
.aq515-brand-story{min-height:390px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}
.aq515-brand-story__inner{min-height:390px;display:flex;align-items:center;position:relative}
.aq515-brand-story__copy{width:45%;padding:35px 0}
.aq515-brand-story__copy h2{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:700;line-height:.88;font-size:clamp(42px,4.4vw,68px);letter-spacing:-.05em;margin:0 0 16px}
.aq515-brand-story__copy h2 span{color:var(--aq-cyan)}
.aq515-brand-story__copy p{font-size:16px;line-height:1.35;max-width:440px;margin:0 0 18px}
.aq515-brand-story__labels{position:absolute;inset:0;pointer-events:none;font-family:'Aqua Rubik',Arial,sans-serif;font-size:13px;font-weight:600;text-align:center}
.aq515-brand-story__labels span{position:absolute}.aq515-brand-story__labels span:nth-child(1){left:49%;top:18%}.aq515-brand-story__labels span:nth-child(2){right:1%;top:18%}.aq515-brand-story__labels span:nth-child(3){left:49%;bottom:13%}.aq515-brand-story__labels span:nth-child(4){right:0;bottom:13%}
/* Photos */
.aq515-photo-grid{display:grid;gap:12px;margin-top:22px}.aq515-photo-grid--8{grid-template-columns:repeat(8,minmax(0,1fr))}.aq515-photo-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.aq515-photo-tile{margin:0;text-align:center;overflow:visible}.aq515-photo-tile img{width:100%;aspect-ratio:1.55/1;object-fit:cover;border-radius:10px;display:block;transition:transform .25s ease,box-shadow .25s ease}.aq515-photo-tile:hover img{transform:scale(1.025);box-shadow:0 10px 24px rgba(18,41,71,.15)}.aq515-photo-tile figcaption{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:600;font-size:13px;line-height:1.08;margin-top:8px}
/* Features */
.aq515-feature-grid{display:grid;gap:14px;margin-top:22px}.aq515-feature-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.aq515-feature-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}.aq515-feature-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}.aq515-feature-grid--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.aq515-feature{text-align:center;padding:16px 12px}.aq515-feature--card{border:1px solid #dfe7ec;border-radius:10px;background:#fff;box-shadow:0 5px 14px rgba(20,42,72,.05);transition:transform .22s ease,box-shadow .22s ease}.aq515-feature--card:hover{transform:translateY(-4px);box-shadow:var(--aq-shadow)}
.aq515-feature--round{background:transparent}.aq515-feature>img{width:70px;height:70px;object-fit:contain;margin:0 auto 10px;display:block;transition:transform .22s ease}.aq515-feature:hover>img{transform:scale(1.06)}
.aq515-feature h3{font-family:'Aqua Rubik',Arial,sans-serif;font-weight:700;font-size:16px;line-height:1.08;margin:0 0 8px}.aq515-feature p{font-size:14px;line-height:1.32;margin:0;color:#303947}
.aq515-fallback-icon{width:70px;height:70px;border:2px solid #208ebd;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-family:'Aqua Rubik';font-weight:700;color:#208ebd;font-size:27px}
/* Process */
.aq515-process{display:grid;position:relative;gap:20px;margin:26px 0}.aq515-process--4{grid-template-columns:repeat(4,minmax(0,1fr))}.aq515-process--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.aq515-process::before{content:"";position:absolute;left:7%;right:7%;top:21px;height:2px;background:#78c4d8;z-index:0}
.aq515-process__step{position:relative;z-index:1;text-align:center;padding:0 8px}.aq515-process__no{width:42px;height:42px;border:2px solid #2a92b6;border-radius:50%;background:#fff;color:#177aa1;display:grid;place-items:center;margin:0 auto 10px;font-family:'Aqua Rubik';font-weight:700;font-size:17px}.aq515-process__step img{height:52px;width:70px;object-fit:contain;margin:0 auto 8px;display:block}.aq515-process__step h3{font-family:'Aqua Rubik',Arial,sans-serif;font-size:15px;line-height:1.12;margin:0 0 6px;font-weight:700}.aq515-process__step p{font-size:13px;line-height:1.3;margin:0;color:#35404d}
/* Duo */
.aq515-duo{display:grid;grid-template-columns:1fr 1fr;background:#fff}.aq515-duo__card{min-height:300px;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;padding:36px max(36px,calc((100vw - 1180px)/2))}.aq515-duo__card:nth-child(2){padding-left:48px}.aq515-duo__card>div{max-width:430px}.aq515-duo__card h2{font-family:'Aqua Rubik';font-size:29px;margin:0 0 9px}.aq515-duo__card ul{list-style:none;padding:0;margin:0 0 14px}.aq515-duo__card li{margin:5px 0;font-size:14px}.aq515-duo__card li::before{content:'✓';color:var(--aq-cyan);margin-right:8px;font-weight:700}.aq515-duo__card a{font-family:'Aqua Saira';font-weight:600;font-size:13px;color:#154c6b;text-decoration:none;border:1px solid #6da3b9;border-radius:5px;padding:8px 12px;display:inline-flex}
/* Personalisation row */
.aq515-carton-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:end;margin-top:22px}.aq515-carton-row a{text-align:center}.aq515-carton-row img{display:block;width:100%;height:210px;object-fit:contain;transition:transform .22s ease}.aq515-carton-row a:hover img{transform:translateY(-5px) scale(1.02)}
/* Region */
.aq515-region{min-height:310px;background-size:cover;background-position:center;background-repeat:no-repeat;padding:35px 0}.aq515-region__benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:22px 0 16px;max-width:750px}.aq515-region__benefits>div{text-align:center}.aq515-region__benefits img{height:52px;width:60px;object-fit:contain;margin:auto auto 7px;display:block}.aq515-region__benefits b{font-family:'Aqua Rubik';font-size:12px;line-height:1.08;display:block}.aq515-region__actions{display:flex;gap:12px;justify-content:center;max-width:750px}
/* Personalisation background page */
.aq515-personal{min-height:510px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative}.aq515-personal__inner{min-height:510px;position:relative}.aq515-personal__intro{position:absolute;left:0;top:50%;transform:translateY(-50%);width:32%}.aq515-personal__intro h2{font-family:'Aqua Rubik';font-size:clamp(34px,3vw,48px);line-height:.95;margin:0 0 15px}.aq515-personal__intro h2 span{color:var(--aq-cyan)}.aq515-personal__intro p{font-size:15px;line-height:1.35;margin:0 0 12px}.aq515-personal__labels{position:absolute;inset:0}.aq515-personal__label{position:absolute;width:215px}.aq515-personal__label b{font-family:'Aqua Rubik';font-size:15px;display:block;margin-bottom:3px}.aq515-personal__label small{font-size:12px;line-height:1.2;display:block}.aq515-personal__label--1{left:39%;top:10%}.aq515-personal__label--2{right:0;top:10%}.aq515-personal__label--3{left:38%;top:42%}.aq515-personal__label--4{right:0;top:42%}.aq515-personal__label--5{left:38%;bottom:9%}.aq515-personal__label--6{right:0;bottom:9%}
/* Mini icons */
.aq515-mini-grid{display:grid;gap:20px;margin-top:22px}.aq515-mini-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}.aq515-mini{text-align:center}.aq515-mini img{height:58px;width:72px;object-fit:contain;margin:0 auto 8px;display:block;transition:transform .2s ease}.aq515-mini:hover img{transform:translateY(-3px)}.aq515-mini b{font-family:'Aqua Rubik';font-size:13px;line-height:1.12;display:block}
/* Campaign CTA */
.aq515-campaign-cta{min-height:260px;background-size:cover;background-position:center;background-repeat:no-repeat}.aq515-campaign-cta .container{min-height:260px;display:flex;align-items:center}.aq515-campaign-cta__copy{width:48%}.aq515-campaign-cta h2{font-family:'Aqua Rubik';font-size:clamp(28px,2.5vw,40px);line-height:1;margin:0 0 10px}.aq515-campaign-cta h2 span{color:var(--aq-cyan)}.aq515-campaign-cta p{font-size:15px;line-height:1.35;margin:0 0 15px}
/* Water */
.aq515-water-filter{min-height:500px;background-size:cover;background-position:center;background-repeat:no-repeat}.aq515-water-filter .container{min-height:500px;display:flex;align-items:center}.aq515-water-filter__copy{width:47%}.aq515-water-filter__copy>p{font-size:16px;line-height:1.35}.aq515-water-filter ul{list-style:none;padding:0;margin:15px 0 0}.aq515-water-filter li{margin:12px 0;padding-left:24px;position:relative}.aq515-water-filter li::before{content:'✓';position:absolute;left:0;color:var(--aq-cyan);font-weight:700}.aq515-water-filter li b,.aq515-water-filter li small{display:block}.aq515-water-filter li small{margin-top:2px;font-size:12px;line-height:1.3}
.aq515-water-params{min-height:520px;background-size:cover;background-position:center;background-repeat:no-repeat;padding:35px 0}.aq515-water-params .container{min-height:450px;display:flex;justify-content:flex-end;align-items:center}.aq515-water-params__panel{width:52%;background:rgba(255,255,255,.86);padding:22px;border-radius:6px}.aq515-table{font-family:'Aqua Caladea',Georgia,serif;font-size:13px;border:1px solid #ccd8df;background:#fff}.aq515-table>div{display:grid;grid-template-columns:1.7fr 1fr;border-bottom:1px solid #dce4e8}.aq515-table>div:last-child{border-bottom:0}.aq515-table>div:first-child{background:#1c78ae;color:#fff}.aq515-table span,.aq515-table b{padding:4px 8px}.aq515-quality{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:36px}.aq515-quality__icon img{width:190px;height:190px;object-fit:contain}.aq515-checks{list-style:none;padding:0;margin:14px 0}.aq515-checks li{margin:8px 0}.aq515-checks li::before{content:'✓';color:var(--aq-cyan);font-weight:700;margin-right:8px}
/* Packaging */
.aq515-pack-construction{display:grid;grid-template-columns:38% 62%;gap:28px;align-items:center}.aq515-pack-construction__visual{display:grid;grid-template-columns:1fr 180px;gap:20px;align-items:center}.aq515-pack-main{width:100%;height:280px;object-fit:contain}.aq515-pack-specs{display:grid;gap:9px}.aq515-pack-specs>div{display:flex;gap:9px;align-items:center}.aq515-pack-specs img{width:34px;height:34px;object-fit:contain}.aq515-pack-specs span{display:flex;flex-direction:column}.aq515-pack-specs b{font-family:'Aqua Rubik';font-size:12px}.aq515-pack-specs small{font-size:11px}.aq515-pack-cane{min-height:290px;background-size:cover;background-position:center;padding:38px 0}.aq515-pack-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:20px}.aq515-pack-points>div{text-align:center}.aq515-pack-points b{font-family:'Aqua Rubik';font-size:15px}.aq515-pack-points p{font-size:13px;line-height:1.35}.aq515-bonsucro{height:42px;max-width:120px;object-fit:contain;display:block;margin:0 auto 6px}.aq515-pack-light{min-height:330px;background-size:cover;background-position:center;padding:42px 0}.aq515-pack-light__grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
/* FAQ */
.aq515-faq{background:#f2f6f9;padding:42px 0}.aq515-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:18px}.aq515-faq-item{border:1px solid #c9d5dd;border-radius:5px;background:rgba(255,255,255,.88);overflow:hidden}.aq515-faq-item summary{font-family:'Aqua Rubik',Arial,sans-serif;font-size:14px;line-height:1.2;padding:10px 38px 10px 13px;cursor:pointer;position:relative;list-style:none}.aq515-faq-item summary::-webkit-details-marker{display:none}.aq515-faq-item summary span{position:absolute;right:12px;top:8px;color:#2187ac;font-size:21px;transition:transform .2s ease}.aq515-faq-item[open] summary span{transform:rotate(180deg)}.aq515-faq-item summary:hover{background:#f8fbfc}.aq515-faq-item>div{padding:0 13px 11px;animation:aqFaqIn .22s ease}.aq515-faq-item p{font-size:13px;line-height:1.4;margin:0;color:#394552}@keyframes aqFaqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Contact */
.aq515-contact{min-height:310px;background-size:cover;background-position:center;background-repeat:no-repeat}.aq515-contact__shell{min-height:310px;display:flex;align-items:center}.aq515-contact__form{width:62%;padding:26px 0}.aq515-contact h2{font-family:'Aqua Rubik';font-weight:700;font-size:clamp(25px,2.4vw,38px);line-height:1;margin:0 0 12px}.aq515-contact h2 span{color:var(--aq-cyan)}
.aq515-contact .aqua-form{max-width:690px}.aq515-contact .aq42-form-grid-visual{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px 10px!important}.aq515-contact .aq42-field{font-family:'Aqua Rubik',Arial,sans-serif;font-size:0!important;display:block!important;margin:0!important}.aq515-contact .aq42-field>span{display:none}.aq515-contact input,.aq515-contact select,.aq515-contact textarea{width:100%!important;background:rgba(255,255,255,.95)!important;border:1px solid #9daeb9!important;border-radius:4px!important;color:#111!important;font-family:'Aqua Rubik',Arial,sans-serif!important;font-size:13px!important;padding:7px 9px!important;box-shadow:none!important}.aq515-contact input,.aq515-contact select{height:34px!important}.aq515-contact textarea{height:74px!important;resize:vertical}.aq515-contact .aq42-field--message{grid-column:2;grid-row:2/5}.aq515-contact .aq42-form-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;align-items:end!important;margin-top:8px!important}.aq515-contact .aq42-form-consent{font-size:11px!important;line-height:1.2!important}.aq515-contact .check{display:flex!important;align-items:flex-start!important;gap:7px!important}.aq515-contact .check input{width:14px!important;height:14px!important;flex:0 0 14px!important;margin:1px 0 0!important}.aq515-contact .check span{font-size:10px!important;line-height:1.25!important}.aq515-contact .check a{color:#116e91;text-decoration:underline}.aq515-contact button[type=submit]{width:100%!important;min-height:36px!important;background:#158cc0!important;border:0!important;border-radius:4px!important;color:#fff!important;font-family:'Aqua Saira';font-size:13px!important;font-weight:600!important}.aqua-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.aqua-form-validation{font-size:12px;color:#9c1b1b;margin-top:7px}.form-alert{padding:10px 12px;border-radius:5px;margin:0 0 10px;font-size:13px}.form-alert.success{background:#e9f8f2;border:1px solid #91d4bb}.form-alert.error{background:#fff0f0;border:1px solid #e7a4a4}
/* Gallery */
.aq515-page-intro{padding-top:70px}.aq515-gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:32px}.aq515-gallery-item{margin:0;border:1px solid #e0e7eb;border-radius:10px;background:#fff;min-height:240px;display:grid;place-items:center;padding:18px;transition:transform .22s ease,box-shadow .22s ease}.aq515-gallery-item:hover{transform:translateY(-4px);box-shadow:var(--aq-shadow)}.aq515-gallery-item img{max-width:100%;height:210px;object-fit:contain}
/* Footer */
.aq515-footer{background:#12264b!important;color:#fff!important;padding-top:30px!important}.aq515-footer-grid{grid-template-columns:1.35fr 1fr 1fr 1fr!important;gap:42px!important;padding-bottom:22px!important}.aq515-footer h4{font-family:'Aqua Rubik';color:#1fb3b6!important;font-size:18px!important;letter-spacing:.02em!important;margin:0 0 14px!important}.aq515-footer a,.aq515-footer p,.aq515-footer button{font-family:'Aqua Rubik',Arial,sans-serif!important}.aq515-footer-brand img{width:150px!important;height:auto!important;margin-bottom:12px!important}.aq515-footer-brand p{font-size:12px!important;letter-spacing:.02em!important;margin:9px 0!important}.aq515-footer-menu{display:flex!important;flex-direction:column!important;align-items:flex-start!important}.aq515-footer-menu a{display:block!important;color:#fff!important;text-decoration:none!important;font-size:14px!important;line-height:1.5!important;transition:color .18s ease,transform .18s ease}.aq515-footer-menu a:hover{color:#26bdc0!important;transform:translateX(2px)}.aq515-footer-contact>p,.aq515-footer-contact>a{font-size:13px!important;line-height:1.25!important;color:#fff!important;text-decoration:none!important;display:block!important}.aq515-socials{display:flex!important;gap:10px!important;border-top:1px solid #1fb3b6!important;padding-top:12px!important;margin-top:12px!important}.aq515-socials a{display:grid!important;place-items:center!important;width:26px!important;height:26px!important}.aq515-socials img{width:24px!important;height:24px!important;object-fit:contain!important;transition:transform .18s ease}.aq515-socials a:hover img{transform:translateY(-2px) scale(1.05)}.aq515-footer-bottom{border-top:1px solid #1fb3b6!important;min-height:58px!important;padding:14px 0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:30px!important}.aq515-footer-copyright{font-size:12px!important}.aq515-footer-legal{display:flex!important;align-items:center!important;gap:0!important}.aq515-footer-legal a,.aq515-footer-legal button{position:relative!important;color:#fff!important;background:none!important;border:0!important;text-decoration:none!important;font-size:12px!important;padding:0 22px!important;line-height:18px!important}.aq515-footer-legal a+ a::before,.aq515-footer-legal button::before{content:""!important;position:absolute!important;left:0!important;top:0!important;width:1px!important;height:18px!important;background:#1fb3b6!important}.aq515-footer-legal a:hover,.aq515-footer-legal button:hover{color:#26bdc0!important}
/* Reveal motion */
body.aq-motion-ready .aq-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
body.aq-motion-ready .aq-reveal.aq-in-view{opacity:1;transform:none}
@media(max-width:1050px){
.aq515-header-inner{grid-template-columns:125px minmax(0,1fr) 180px!important;width:min(100% - 30px,1200px)!important}.aq515-nav .aqua-menu{gap:24px!important}.aq515-header .aq-ref-cta{min-width:145px!important;padding-inline:12px!important}
.aq515-photo-grid--8{grid-template-columns:repeat(4,1fr)}.aq515-feature-grid--6{grid-template-columns:repeat(3,1fr)}.aq515-feature-grid--5{grid-template-columns:repeat(3,1fr)}
.aq515-brand-story__labels{display:none}.aq515-brand-story__copy{width:48%}.aq515-personal__label{width:180px}.aq515-personal__label--2,.aq515-personal__label--4,.aq515-personal__label--6{right:1%}
}
@media(max-width:900px){
.container{width:min(100% - 34px,760px)}
.aq515-header{height:70px}.aq515-header-inner{height:70px!important;grid-template-columns:110px 1fr 42px!important}.aq515-header-actions{display:none!important}.aq515-header .menu-toggle{display:flex!important;justify-self:end!important}.aq515-nav{position:absolute!important;top:70px!important;left:0!important;right:0!important;width:100%!important;background:#fff!important;box-shadow:0 12px 25px rgba(20,42,72,.10)!important;display:none}.aq515-nav.open{display:block!important}.aq515-nav .aqua-menu{display:block!important;padding:10px 18px 18px!important}.aq515-nav .aqua-menu>li>a{display:flex!important;padding:12px 8px!important;font-size:17px!important}.aq515-nav .aqua-menu>li>a::after{display:none}.aq515-nav .sub-menu{position:static!important;box-shadow:none!important;border:0!important;padding:0 0 0 15px!important;display:block!important;opacity:1!important;visibility:visible!important;transform:none!important}
.aq515-hero--home,.aq515-hero--sub{min-height:530px;background-position:68% center}.aq515-hero--short{min-height:430px;background-position:67% center}.aq515-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 44%,rgba(255,255,255,.10) 76%,rgba(255,255,255,0) 100%)}.aq515-hero__inner{position:relative}.aq515-hero__copy{width:56%;min-width:440px}.aq515-hero h1{font-size:48px}.aq515-hero--short h1{font-size:42px}.aq515-hero p{font-size:16px}
.aq515-choice-grid{grid-template-columns:repeat(2,1fr);gap:46px 16px}.aq515-photo-grid--6{grid-template-columns:repeat(3,1fr)}.aq515-feature-grid--4{grid-template-columns:repeat(2,1fr)}.aq515-feature-grid--5{grid-template-columns:repeat(3,1fr)}
.aq515-process--5{grid-template-columns:repeat(3,1fr);row-gap:28px}.aq515-process--4{grid-template-columns:repeat(2,1fr);row-gap:28px}.aq515-process::before{display:none}
.aq515-brand-story{background-position:62% center}.aq515-brand-story__copy{width:50%;background:rgba(255,255,255,.75);padding:20px;border-radius:10px}.aq515-duo{grid-template-columns:1fr}.aq515-duo__card{padding:34px 30px;min-height:280px}
.aq515-region{background-position:66% center}.aq515-region__benefits{grid-template-columns:repeat(3,1fr);max-width:62%}.aq515-region__actions{max-width:62%;flex-wrap:wrap}
.aq515-personal{min-height:auto;background-position:62% top;padding:34px 0}.aq515-personal__inner{min-height:640px}.aq515-personal__intro{position:relative;top:auto;left:auto;transform:none;width:48%;background:rgba(255,255,255,.78);padding:16px;border-radius:8px}.aq515-personal__labels{position:absolute}.aq515-personal__label{width:190px;background:rgba(255,255,255,.82);padding:8px;border-radius:7px}.aq515-personal__label--1{left:2%;top:34%}.aq515-personal__label--2{right:0;top:34%}.aq515-personal__label--3{left:2%;top:52%}.aq515-personal__label--4{right:0;top:52%}.aq515-personal__label--5{left:2%;bottom:8%}.aq515-personal__label--6{right:0;bottom:8%}
.aq515-water-filter{background-position:65% center}.aq515-water-filter__copy{width:55%;background:rgba(255,255,255,.78);padding:18px;border-radius:9px}.aq515-water-params{background-position:32% center}.aq515-water-params__panel{width:60%}.aq515-pack-construction{grid-template-columns:1fr}.aq515-pack-light__grid{grid-template-columns:1fr}.aq515-pack-light .aq515-feature-grid{max-width:620px}.aq515-gallery-grid{grid-template-columns:repeat(3,1fr)}
.aq515-contact{background-position:67% center}.aq515-contact__form{width:68%}
.aq515-footer-grid{grid-template-columns:1fr 1fr!important}.aq515-footer-brand{grid-column:1/-1}.aq515-footer-bottom{flex-direction:column!important;align-items:flex-start!important}.aq515-footer-legal{align-self:stretch!important;justify-content:flex-end!important}
}
@media(max-width:620px){
.container{width:min(100% - 28px,560px)}.aq515-section{padding:38px 0}.aq515-title{font-size:29px}
.aq515-hero--home,.aq515-hero--sub,.aq515-hero--short{min-height:600px;background-position:72% bottom;background-size:auto 58%;background-color:#eef6fb}.aq515-hero::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 48%,rgba(255,255,255,.30) 70%,rgba(255,255,255,0) 100%)}.aq515-hero__inner{align-items:flex-start}.aq515-hero__copy{width:100%;min-width:0;padding-top:28px}.aq515-eyebrow{font-size:19px}.aq515-hero h1,.aq515-hero--short h1{font-size:38px}.aq515-hero p{font-size:15px;max-width:100%}.aq515-buttons{gap:8px}.aq515-btn{font-size:13px;padding:9px 12px}
.aq515-choice-grid{grid-template-columns:1fr;gap:45px}.aq515-choice-card{min-height:190px}.aq515-photo-grid--8,.aq515-photo-grid--6{grid-template-columns:repeat(2,1fr)}.aq515-feature-grid--6,.aq515-feature-grid--5,.aq515-feature-grid--4,.aq515-feature-grid--2{grid-template-columns:1fr 1fr}.aq515-feature{padding:12px 8px}.aq515-feature>img{width:58px;height:58px}.aq515-feature p{font-size:13px}.aq515-process--5,.aq515-process--4{grid-template-columns:1fr 1fr}.aq515-process__step{padding:0}.aq515-process__step h3{font-size:13px}.aq515-process__step p{font-size:12px}
.aq515-brand-story{min-height:560px;background-position:72% bottom;background-size:auto 58%;background-color:#f8f8f8}.aq515-brand-story__inner{min-height:560px;align-items:flex-start}.aq515-brand-story__copy{width:100%;padding:30px 0;background:none}.aq515-brand-story__copy h2{font-size:42px}.aq515-brand-story__copy p{max-width:100%}
.aq515-duo__card{background-position:68% center;padding:26px 20px;min-height:320px}.aq515-duo__card>div{max-width:58%;background:rgba(255,255,255,.78);padding:14px;border-radius:8px}.aq515-carton-row{grid-template-columns:repeat(2,1fr);gap:18px}.aq515-carton-row img{height:170px}
.aq515-region{min-height:560px;background-position:74% bottom;background-size:auto 52%;background-color:#eef4f7}.aq515-region__benefits{grid-template-columns:repeat(2,1fr);max-width:100%;background:rgba(255,255,255,.78);padding:12px;border-radius:9px}.aq515-region__actions{max-width:100%}
.aq515-personal{background-position:74% center}.aq515-personal__inner{min-height:auto}.aq515-personal__intro{width:100%}.aq515-personal__labels{position:relative;display:grid;grid-template-columns:1fr;gap:8px;margin-top:300px}.aq515-personal__label,.aq515-personal__label--1,.aq515-personal__label--2,.aq515-personal__label--3,.aq515-personal__label--4,.aq515-personal__label--5,.aq515-personal__label--6{position:relative;inset:auto;width:100%;background:rgba(255,255,255,.92);padding:10px;border:1px solid #d8e0e5}.aq515-personal__label small{font-size:12px}
.aq515-mini-grid--5{grid-template-columns:repeat(2,1fr)}.aq515-campaign-cta{min-height:420px;background-position:75% bottom;background-size:auto 55%;background-color:#edf5f9}.aq515-campaign-cta .container{min-height:420px;align-items:flex-start}.aq515-campaign-cta__copy{width:100%;padding-top:28px}.aq515-campaign-cta__copy p{max-width:100%}
.aq515-water-filter{min-height:620px;background-position:72% bottom;background-size:auto 54%;background-color:#f3f7f8}.aq515-water-filter .container{min-height:620px;align-items:flex-start}.aq515-water-filter__copy{width:100%;background:rgba(255,255,255,.88);margin-top:24px}.aq515-water-params{min-height:680px;background-position:25% bottom;background-size:auto 48%;background-color:#f3f8fa}.aq515-water-params .container{min-height:600px;align-items:flex-start}.aq515-water-params__panel{width:100%;margin-top:20px}.aq515-quality{grid-template-columns:1fr;text-align:left}.aq515-quality__icon{text-align:center}.aq515-quality__icon img{width:150px;height:150px}.aq515-pack-construction__visual{grid-template-columns:1fr}.aq515-pack-specs{grid-template-columns:repeat(2,1fr)}.aq515-pack-points{grid-template-columns:1fr;gap:10px}.aq515-pack-light{background-position:70% bottom;background-size:auto 50%;padding-bottom:230px}.aq515-gallery-grid{grid-template-columns:repeat(2,1fr)}
.aq515-faq-grid{grid-template-columns:1fr}.aq515-contact{min-height:560px;background-position:72% bottom;background-size:auto 40%;background-color:#eff7fb}.aq515-contact__shell{min-height:560px;align-items:flex-start}.aq515-contact__form{width:100%;padding-top:28px}.aq515-contact .aq42-form-grid-visual{grid-template-columns:1fr!important}.aq515-contact .aq42-field--message{grid-column:auto;grid-row:auto}.aq515-contact .aq42-form-actions{grid-template-columns:1fr!important}.aq515-footer-grid{grid-template-columns:1fr!important;gap:24px!important}.aq515-footer-brand{grid-column:auto}.aq515-footer-legal{flex-wrap:wrap!important;justify-content:flex-start!important}.aq515-footer-legal a,.aq515-footer-legal button{padding:0 12px!important}.aq515-footer-legal a:first-child{padding-left:0!important}
}
@media(max-width:390px){.aq515-feature-grid--6,.aq515-feature-grid--5,.aq515-feature-grid--4,.aq515-feature-grid--2,.aq515-process--5,.aq515-process--4,.aq515-photo-grid--8,.aq515-photo-grid--6,.aq515-mini-grid--5,.aq515-gallery-grid{grid-template-columns:1fr}.aq515-hero h1,.aq515-hero--short h1{font-size:34px}.aq515-carton-row{grid-template-columns:1fr 1fr}.aq515-duo__card>div{max-width:76%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}body.aq-motion-ready .aq-reveal{opacity:1!important;transform:none!important}}
.aq515-contact-data{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:18px;margin-top:24px}.aq515-contact-data>div{border:1px solid #dce5ea;border-radius:10px;padding:18px;background:#f8fbfc}.aq515-contact-data b{font-family:'Aqua Rubik';font-size:14px}.aq515-contact-data p{margin:7px 0 0;font-size:15px}.aq515-contact-data a{color:#145f84;text-decoration:none}@media(max-width:620px){.aq515-contact-data{grid-template-columns:1fr}}
/* =========================================================
Aqua One 5.16 — korekta sekcji "Woda, która pracuje..."
oraz typografii/nawigacji desktopowej
========================================================= */
/* Menu w projekcie korzysta z Saira Condensed Medium. Jeśli lokalny font
nie jest jeszcze wgrany, pozostaje czytelny fallback sans-serif. */
.aq515-nav .aqua-menu>li>a,
.aq515-header-actions .lang,
.aq515-header .aq-ref-cta{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-weight:500!important;
}
.aq515-nav .aqua-menu>li>a{
font-size:13px!important;
letter-spacing:.008em!important;
}
@media(min-width:1100px){
.aq515-nav .aqua-menu{gap:clamp(36px,3vw,52px)!important}
}
/* Finalny PDF ma opisy po bokach kartoników, nie na kartonikach. */
.aq515-brand-story__labels span{
width:132px;
line-height:1.16;
z-index:3;
}
.aq515-brand-story__labels span:nth-child(1){
left:37.4%;
top:17%;
text-align:right;
}
.aq515-brand-story__labels span:nth-child(3){
left:37.4%;
bottom:14%;
text-align:right;
}
.aq515-brand-story__labels span:nth-child(2){
right:1.5%;
top:17%;
text-align:left;
}
.aq515-brand-story__labels span:nth-child(4){
right:1.5%;
bottom:14%;
text-align:left;
}
/* Delikatne łączniki jak w wizualizacji PDF. */
.aq515-brand-story__labels span:nth-child(1)::after,
.aq515-brand-story__labels span:nth-child(3)::after{
content:"";
position:absolute;
left:calc(100% + 9px);
top:50%;
width:34px;
height:1px;
background:#1686b6;
}
.aq515-brand-story__labels span:nth-child(2)::before,
.aq515-brand-story__labels span:nth-child(4)::before{
content:"";
position:absolute;
right:calc(100% + 9px);
top:50%;
width:34px;
height:1px;
background:#1686b6;
}
.aq515-brand-story__labels span:nth-child(1)::before,
.aq515-brand-story__labels span:nth-child(3)::before{
content:"";
position:absolute;
left:calc(100% + 41px);
top:calc(50% - 3px);
width:7px;
height:7px;
border-radius:50%;
background:#1686b6;
}
.aq515-brand-story__labels span:nth-child(2)::after,
.aq515-brand-story__labels span:nth-child(4)::after{
content:"";
position:absolute;
right:calc(100% + 41px);
top:calc(50% - 3px);
width:7px;
height:7px;
border-radius:50%;
background:#1686b6;
}
/* Przy węższym desktopie nie pozwalamy opisom wejść na produkt. */
@media(min-width:901px) and (max-width:1180px){
.aq515-brand-story__labels span{width:112px;font-size:12px}
.aq515-brand-story__labels span:nth-child(1),
.aq515-brand-story__labels span:nth-child(3){left:36.2%}
.aq515-brand-story__labels span:nth-child(2),
.aq515-brand-story__labels span:nth-child(4){right:.8%}
.aq515-brand-story__labels span:nth-child(1)::after,
.aq515-brand-story__labels span:nth-child(3)::after,
.aq515-brand-story__labels span:nth-child(2)::before,
.aq515-brand-story__labels span:nth-child(4)::before{width:24px}
.aq515-brand-story__labels span:nth-child(1)::before,
.aq515-brand-story__labels span:nth-child(3)::before{left:calc(100% + 31px)}
.aq515-brand-story__labels span:nth-child(2)::after,
.aq515-brand-story__labels span:nth-child(4)::after{right:calc(100% + 31px)}
}
/* Tablet/mobile: opisy nie są nakładane na fotografię. */
@media(max-width:900px){
.aq515-brand-story__labels{
position:relative;
inset:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
width:100%;
padding:0 0 28px;
pointer-events:auto;
}
.aq515-brand-story__inner{
flex-wrap:wrap;
align-content:flex-start;
}
.aq515-brand-story__labels span,
.aq515-brand-story__labels span:nth-child(1),
.aq515-brand-story__labels span:nth-child(2),
.aq515-brand-story__labels span:nth-child(3),
.aq515-brand-story__labels span:nth-child(4){
position:relative;
inset:auto;
width:auto;
min-height:58px;
padding:11px 12px;
text-align:left;
background:rgba(255,255,255,.92);
border:1px solid #dce5ea;
border-radius:8px;
font-size:13px;
}
.aq515-brand-story__labels span::before,
.aq515-brand-story__labels span::after{display:none!important}
}
@media(max-width:560px){
.aq515-brand-story__labels{grid-template-columns:1fr}
}
/* ==========================================================
Aqua One v5.18 — dopasowanie sekcji "Woda, która pracuje..."
oraz wymuszenie rzeczywistego lokalnego fontu menu.
========================================================== */
.aq515-nav .aqua-menu>li>a,
.aq515-header-actions .lang,
.aq515-header .aq-ref-cta{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
}
@media (min-width:981px){
.aq515-brand-story{
min-height:clamp(220px,19vw,280px);
background-size:82% auto;
background-position:right center;
overflow:hidden;
}
.aq515-brand-story__inner{
min-height:clamp(220px,19vw,280px);
}
.aq515-brand-story__copy{
width:39%;
padding:20px 0;
}
.aq515-brand-story__copy h2{
font-size:clamp(34px,3.6vw,50px);
line-height:.92;
letter-spacing:-.045em;
margin-bottom:10px;
}
.aq515-brand-story__copy p{
font-size:14px;
line-height:1.32;
max-width:390px;
margin-bottom:14px;
}
.aq515-brand-story__labels{
font-size:12px;
line-height:1.08;
}
.aq515-brand-story__labels span:nth-child(1){left:47%;top:19%;width:125px}
.aq515-brand-story__labels span:nth-child(2){right:0;top:19%;width:135px}
.aq515-brand-story__labels span:nth-child(3){left:47%;bottom:13%;width:125px}
.aq515-brand-story__labels span:nth-child(4){right:0;bottom:13%;width:135px}
}
@media (min-width:621px) and (max-width:980px){
.aq515-brand-story{
min-height:310px;
background-size:92% auto;
background-position:right center;
}
.aq515-brand-story__inner{min-height:310px}
.aq515-brand-story__copy{width:43%;padding:18px;background:rgba(255,255,255,.86)}
.aq515-brand-story__copy h2{font-size:clamp(34px,4.6vw,42px);line-height:.94}
.aq515-brand-story__copy p{font-size:13px}
.aq515-brand-story__labels{font-size:11px}
}
/* ==========================================================
Aqua One v5.18 — typografia strony głównej skalowana względem
finalnej wizualizacji PDF (referencja desktop ok. 864 px).
Kiona -> Jost, tekst Sora-like -> Rubik, menu -> Saira Condensed.
========================================================== */
@media (min-width:901px){
.aq515-nav .aqua-menu>li>a{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:15px!important;
font-weight:500!important;
letter-spacing:0!important;
}
.aq515-header-actions .lang{
font-size:14px!important;
}
.aq515-hero--home .aq515-hero__copy{
width:52%;
max-width:610px;
}
.aq515-hero--home .aq515-eyebrow{
font-family:'Aqua Jost','Aqua Rubik',Arial,sans-serif;
font-weight:300;
font-size:clamp(27px,3.125vw,40px);
line-height:1.05;
letter-spacing:.018em;
margin-bottom:14px;
white-space:nowrap;
}
.aq515-hero--home h1{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:800;
font-size:clamp(50px,5.55vw,72px);
line-height:.93;
letter-spacing:-.042em;
margin-bottom:17px;
}
.aq515-hero--home .aq515-hero__lead{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:400;
font-size:clamp(15px,1.72vw,22px);
line-height:1.18;
max-width:430px;
margin-bottom:24px;
}
.aq515-hero--home .aq515-btn{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:800;
font-size:clamp(12px,1.35vw,17px);
min-height:clamp(38px,3.95vw,50px);
padding-inline:clamp(15px,1.65vw,22px);
}
}
@media (min-width:901px) and (max-width:1050px){
.aq515-hero--home .aq515-eyebrow{font-size:clamp(27px,3vw,32px)}
.aq515-hero--home h1{font-size:clamp(50px,5.25vw,57px)}
.aq515-hero--home .aq515-hero__lead{font-size:clamp(15px,1.65vw,18px)}
}
/* ==========================================================
Aqua One v5.19 — header + sekcja „Woda, która pracuje…”
Dopasowanie do finalnej wizualizacji klienta.
========================================================== */
/* HEADER
W projekcie logo jest optycznie większe, a menu jest lekkie,
skondensowane i bardziej rozłożone. */
@media (min-width:901px){
.aq515-header .aqua-default-logo{
width:132px!important;
height:auto!important;
}
.aq515-header-inner{
grid-template-columns:165px minmax(0,1fr) 215px!important;
gap:16px!important;
}
.aq515-nav .aqua-menu{
gap:clamp(39px,3.45vw,52px)!important;
}
.aq515-nav .aqua-menu>li>a{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:13px!important;
font-weight:500!important;
line-height:1!important;
letter-spacing:0!important;
padding:29px 0 28px!important;
}
/* Rezygnujemy z szerokiej kreski hover. W pozycjach z submenu
zostaje mały turkusowy chevron jak w projekcie. */
.aq515-nav .aqua-menu>li>a::after{
display:none!important;
content:none!important;
}
.aq515-nav .aqua-menu>li.menu-item-has-children>a::after{
content:""!important;
display:block!important;
position:absolute!important;
left:50%!important;
right:auto!important;
bottom:19px!important;
width:5px!important;
height:5px!important;
margin:0!important;
border:0!important;
border-right:1.5px solid #149fa3!important;
border-bottom:1.5px solid #149fa3!important;
background:transparent!important;
transform:translateX(-50%) rotate(45deg)!important;
}
.aq515-header-actions .lang{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:13px!important;
font-weight:500!important;
}
.aq515-header .aq-ref-cta{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:13px!important;
font-weight:500!important;
min-width:158px!important;
}
}
/* WODA, KTÓRA PRACUJE DLA TWOJEJ MARKI
Czysta grafika klienta ma proporcje ok. 3:1. Na desktopie
wykorzystujemy ją w naturalnej wysokości, wycentrowaną, bez
sztucznego powiększania i przesuwania w prawo. */
@media (min-width:901px){
.aq515-brand-story{
height:clamp(278px,32.9vw,315px)!important;
min-height:0!important;
background-size:auto 100%!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#fafafa!important;
overflow:hidden!important;
}
.aq515-brand-story__inner{
height:100%!important;
min-height:0!important;
position:relative!important;
display:block!important;
}
.aq515-brand-story__copy{
position:absolute!important;
z-index:4!important;
left:0!important;
top:50%!important;
transform:translateY(-50%)!important;
width:31.5%!important;
padding:0!important;
background:transparent!important;
}
.aq515-brand-story__copy h2{
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-size:clamp(38px,4.15vw,45px)!important;
font-weight:700!important;
line-height:.94!important;
letter-spacing:-.045em!important;
margin:0 0 24px!important;
}
.aq515-brand-story__copy p,
.aq515-brand-story__copy .aq515-brand-story__lead{
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-size:16px!important;
font-weight:400!important;
line-height:1.16!important;
max-width:310px!important;
margin:0 0 25px!important;
color:#20242a!important;
}
.aq515-brand-story__copy .aq515-btn{
min-height:47px!important;
padding:10px 17px!important;
border:1px solid #90959a!important;
border-radius:8px!important;
background:#fff!important;
color:#0874b7!important;
box-shadow:none!important;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:15px!important;
font-weight:500!important;
}
/* Cztery opisy są ustawione jak w projekcie: po bokach produktu,
z okrągłym znacznikiem po zewnętrznej stronie. */
.aq515-brand-story__labels{
position:absolute!important;
inset:0!important;
z-index:3!important;
pointer-events:none!important;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:18px!important;
font-weight:500!important;
line-height:1.12!important;
color:#15191e!important;
text-align:left!important;
}
.aq515-brand-story__labels span{
position:absolute!important;
width:9.7%!important;
padding:0!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
text-align:left!important;
}
.aq515-brand-story__labels span:nth-child(1){left:39%!important;top:8%!important;bottom:auto!important}
.aq515-brand-story__labels span:nth-child(3){left:39%!important;bottom:8%!important;top:auto!important}
.aq515-brand-story__labels span:nth-child(2){right:8.4%!important;top:8%!important;left:auto!important}
.aq515-brand-story__labels span:nth-child(4){right:8.4%!important;bottom:8%!important;top:auto!important;left:auto!important}
/* Pierścienie z wypełnionym środkiem. */
.aq515-brand-story__labels span:nth-child(1)::before,
.aq515-brand-story__labels span:nth-child(3)::before{
content:""!important;
display:block!important;
position:absolute!important;
left:-31px!important;
top:2px!important;
width:20px!important;
height:20px!important;
border:2px solid #167ac0!important;
border-radius:50%!important;
background:#167ac0!important;
box-shadow:inset 0 0 0 5px #fff!important;
}
.aq515-brand-story__labels span:nth-child(2)::after,
.aq515-brand-story__labels span:nth-child(4)::after{
content:""!important;
display:block!important;
position:absolute!important;
right:-31px!important;
top:2px!important;
width:20px!important;
height:20px!important;
border:2px solid #167ac0!important;
border-radius:50%!important;
background:#167ac0!important;
box-shadow:inset 0 0 0 5px #fff!important;
}
/* Usuwamy dawne łączniki przypięte do tekstów. */
.aq515-brand-story__labels span:nth-child(1)::after,
.aq515-brand-story__labels span:nth-child(3)::after,
.aq515-brand-story__labels span:nth-child(2)::before,
.aq515-brand-story__labels span:nth-child(4)::before{
content:none!important;
display:none!important;
}
/* Dwie osobne linie pośrodku kompozycji — tak jak w projekcie. */
.aq515-brand-story__labels::before,
.aq515-brand-story__labels::after{
content:""!important;
display:block!important;
position:absolute!important;
top:49%!important;
height:2px!important;
background:#167ac0!important;
}
.aq515-brand-story__labels::before{
left:42.6%!important;
width:8.9%!important;
box-shadow:-1px 0 0 #167ac0!important;
}
.aq515-brand-story__labels::after{
right:8.5%!important;
width:9.2%!important;
}
/* Kropki na końcach linii od strony zewnętrznej. */
.aq515-brand-story__inner::before,
.aq515-brand-story__inner::after{
content:"";
position:absolute;
z-index:4;
top:calc(49% - 2px);
width:6px;
height:6px;
border-radius:50%;
background:#167ac0;
pointer-events:none;
}
.aq515-brand-story__inner::before{left:42.15%}
.aq515-brand-story__inner::after{right:8.15%}
}
@media (min-width:901px) and (max-width:1040px){
.aq515-brand-story__copy h2{font-size:clamp(35px,4.2vw,42px)!important;margin-bottom:18px!important}
.aq515-brand-story__copy p,
.aq515-brand-story__copy .aq515-brand-story__lead{font-size:14px!important;margin-bottom:18px!important}
.aq515-brand-story__labels{font-size:16px!important}
.aq515-brand-story__copy .aq515-btn{font-size:13px!important;min-height:42px!important}
}
@media (max-width:900px){
.aq515-story-break{display:none!important}
}
/* v5.20: DINish supplied by client lacks Polish precomposed glyphs. Polish body copy uses Rubik Regular to avoid per-character browser fallback. */
.aq515-hero p{letter-spacing:-.01em;}
.aq515-water-filter__copy p,.aq515-lead,.aq515-section p{font-family:'Aqua Rubik',Arial,sans-serif;}
/* ==========================================================
Aqua One v5.21 — kontrolowana skala desktopowa
----------------------------------------------------------
Cel: przy 100% zoomu uzyskać komfort czytania zbliżony do
wcześniejszego widoku 125%, bez używania CSS zoom i bez
naruszania breakpointów mobilnych. Zwiększamy głównie tekst
użytkowy, CTA i rytm pionowy, a kontener lekko zawężamy.
========================================================== */
@media (min-width:1100px){
/* Nie rozciągamy treści aż tak szeroko jak wcześniej — poprawia to
gęstość kompozycji i łamanie tekstów na dużych monitorach. */
.container{width:min(1100px,calc(100% - 64px))!important}
/* Header pozostaje szerszy od treści, jak w projekcie, ale elementy
dostają nieco większą skalę optyczną. */
.aq515-header{height:82px!important}
.aq515-header-inner{
width:min(1240px,calc(100% - 54px))!important;
height:82px!important;
grid-template-columns:170px minmax(0,1fr) 224px!important;
}
.aq515-header .aqua-default-logo{width:138px!important}
.aq515-nav .aqua-menu{gap:clamp(40px,3.25vw,54px)!important}
.aq515-nav .aqua-menu>li>a{
font-size:15px!important;
padding:31px 0 30px!important;
}
.aq515-nav .aqua-menu>li.menu-item-has-children>a::after{bottom:20px!important}
.aq515-header-actions .lang{font-size:14px!important}
.aq515-header .aq-ref-cta{
min-width:166px!important;
height:45px!important;
font-size:14px!important;
padding-inline:20px!important;
}
/* Ogólny rytm i typografia sekcji. */
.aq515-section{padding:62px 0}
.aq515-title{font-size:clamp(31px,2.65vw,43px);margin-bottom:18px}
.aq515-lead{font-size:17px;line-height:1.5;margin-bottom:32px}
.aq515-btn{min-height:46px;padding:11px 20px;font-size:15px}
/* Hero — duży nagłówek zostaje w proporcji projektowej; zwiększamy
przede wszystkim tekst pomocniczy i CTA. */
.aq515-hero--home .aq515-hero__copy{width:50%;max-width:565px}
.aq515-hero--home .aq515-hero__lead{
font-size:clamp(17px,1.42vw,20px)!important;
line-height:1.28!important;
max-width:450px!important;
margin-bottom:27px!important;
}
.aq515-hero--home .aq515-btn{
font-size:15px!important;
min-height:46px!important;
padding-inline:20px!important;
}
/* Kafelki oferty. */
.aq515-offer{padding-top:42px;padding-bottom:48px}
.aq515-choice-grid{gap:16px;margin-top:30px}
.aq515-choice-card{min-height:248px;padding:44px 20px 22px}
.aq515-icon-bubble{width:72px;height:72px;top:-31px}
.aq515-icon-bubble img{width:46px;height:46px}
.aq515-choice-card h3{font-size:19px;margin:11px 0 14px}
.aq515-choice-card p{font-size:15px;line-height:1.38;margin-bottom:18px}
.aq515-choice-card a{font-size:14px}
/* Zdjęcia / feature cards / proces. */
.aq515-photo-grid{gap:14px;margin-top:26px}
.aq515-photo-tile figcaption{font-size:14px;line-height:1.14;margin-top:9px}
.aq515-feature-grid{gap:17px;margin-top:26px}
.aq515-feature{padding:19px 14px}
.aq515-feature>img{width:76px;height:76px}
.aq515-feature h3{font-size:17px}
.aq515-feature p{font-size:15px;line-height:1.42}
.aq515-process__no{width:46px;height:46px;font-size:18px}
.aq515-process__step h3{font-size:16px;line-height:1.18}
.aq515-process__step p{font-size:14px;line-height:1.4}
/* Sekcja Woda/Opakowanie i dystrybucja. */
.aq515-duo__card h2{font-size:32px}
.aq515-duo__card li{font-size:15px;line-height:1.42;margin:6px 0}
.aq515-duo__card a{font-size:14px}
.aq515-region__benefits b{font-size:13.5px;line-height:1.2}
/* Podstrony — zachowujemy grafikę, powiększamy warstwę tekstową. */
.aq515-personal__intro p{font-size:16px;line-height:1.48}
.aq515-personal__label b{font-size:16px}
.aq515-personal__label small{font-size:13px;line-height:1.35}
.aq515-mini b{font-size:14px}
.aq515-campaign-cta p{font-size:16px;line-height:1.45}
.aq515-water-filter__copy>p{font-size:17px;line-height:1.45}
.aq515-water-filter li small{font-size:13px;line-height:1.38}
.aq515-table{font-size:14px}
.aq515-pack-specs b{font-size:13px}
.aq515-pack-specs small{font-size:12px}
.aq515-pack-points b{font-size:16px}
.aq515-pack-points p{font-size:14px;line-height:1.42}
/* FAQ i formularz — tu wzrost czytelności jest najbardziej odczuwalny. */
.aq515-faq{padding:50px 0}
.aq515-faq-grid{gap:10px 20px;margin-top:22px}
.aq515-faq-item summary{font-size:15px;line-height:1.3;padding:12px 42px 12px 15px}
.aq515-faq-item summary span{right:14px;top:9px;font-size:23px}
.aq515-faq-item>div{padding:0 15px 13px}
.aq515-faq-item p{font-size:14px;line-height:1.48}
.aq515-contact h2{font-size:clamp(30px,2.55vw,41px)}
.aq515-contact input,.aq515-contact select,.aq515-contact textarea{
font-size:14px!important;
padding:8px 10px!important;
}
.aq515-contact input,.aq515-contact select{height:38px!important}
.aq515-contact textarea{height:82px!important}
.aq515-contact .aq42-form-consent{font-size:12px!important}
.aq515-contact .check span{font-size:11px!important;line-height:1.3!important}
.aq515-contact button[type=submit]{min-height:40px!important;font-size:14px!important}
.aqua-form-validation{font-size:13px}
.form-alert{font-size:14px}
/* Stopka pozostaje zwarta, ale tekst nie jest już drobny. */
.aq515-footer{padding-top:34px!important}
.aq515-footer-grid{gap:46px!important;padding-bottom:26px!important}
.aq515-footer h4{font-size:19px!important}
.aq515-footer-brand img{width:158px!important}
.aq515-footer-brand p{font-size:13px!important;line-height:1.45!important}
.aq515-footer-menu a{font-size:15px!important;line-height:1.55!important}
.aq515-footer-contact>p,.aq515-footer-contact>a{font-size:14px!important;line-height:1.32!important}
.aq515-footer-copyright{font-size:13px!important}
.aq515-footer-legal a,.aq515-footer-legal button{font-size:13px!important;padding:0 24px!important}
}
/* Na typowym laptopie 901–1099 px nie robimy pełnego desktopowego
powiększenia, ale poprawiamy najdrobniejszy tekst. */
@media (min-width:901px) and (max-width:1099px){
.aq515-choice-card p,.aq515-feature p{font-size:14.5px}
.aq515-faq-item summary{font-size:14.5px}
.aq515-faq-item p{font-size:13.5px}
.aq515-footer-menu a{font-size:14.5px!important}
}
/* ==========================================================
Aqua One v5.22 — strona główna: Woda/Opakowanie + Region
----------------------------------------------------------
Odwzorowanie finalnego PDF:
- tekst sekcji Woda leży na białym panelu, a nie na zdjęciu;
- sekcja Woda/Opakowanie zachowuje proporcje dwóch połówek;
- dystrybucja korzysta z naturalnej kompozycji tła 2400×796;
- korzyści są ułożone 3 + 2 jak w projekcie.
========================================================== */
/* WODA + OPAKOWANIE */
.aq522-duo{
display:grid!important;
grid-template-columns:1fr 1fr!important;
width:100%;
background:#fff;
overflow:hidden;
}
.aq522-duo .aq522-duo__card{
min-height:0!important;
aspect-ratio:1.70 / 1;
padding:0!important;
position:relative;
overflow:hidden;
align-items:stretch!important;
}
.aq522-duo__card--water{
display:grid!important;
grid-template-columns:40.5% 59.5%;
background:#fff!important;
}
.aq522-duo__art--water{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:58% center;
}
.aq522-duo__copy{
align-self:center;
max-width:none!important;
padding:7% 7% 6% 8%;
color:#080b10;
position:relative;
z-index:2;
}
.aq522-duo__card--pack{
display:flex!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
}
.aq522-duo__copy--pack{
width:58%;
padding-left:10%;
padding-right:2%;
}
.aq522-duo .aq522-duo__copy h2{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-weight:600!important;
font-size:clamp(25px,2.15vw,34px)!important;
line-height:1!important;
letter-spacing:.002em!important;
margin:0 0 14px!important;
color:#05080c!important;
}
.aq522-duo .aq522-duo__copy ul{
list-style:none!important;
padding:0!important;
margin:0 0 22px!important;
}
.aq522-duo .aq522-duo__copy li{
position:relative;
margin:11px 0!important;
padding-left:30px;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-weight:500!important;
font-size:clamp(15px,1.28vw,18px)!important;
line-height:1.27!important;
letter-spacing:.002em!important;
color:#0b1118!important;
}
.aq522-duo .aq522-duo__copy li::before{
content:'✓'!important;
position:absolute;
left:0;
top:.05em;
width:19px;
height:19px;
border:2px solid #1ca7aa;
border-radius:50%;
display:grid;
place-items:center;
color:#1ca7aa!important;
background:#fff;
font-family:Arial,sans-serif;
font-size:12px;
line-height:1;
font-weight:700!important;
margin:0!important;
}
.aq522-duo .aq522-duo__copy a{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-weight:500!important;
font-size:clamp(12px,1vw,14px)!important;
min-height:39px;
padding:8px 12px!important;
display:inline-flex!important;
align-items:center;
gap:8px;
color:#075aa7!important;
background:#fff!important;
border:1px solid #5b6978!important;
border-radius:7px!important;
text-decoration:none!important;
white-space:nowrap;
}
.aq522-duo .aq522-duo__copy a span{transition:transform .2s ease}
.aq522-duo .aq522-duo__copy a:hover span{transform:translateX(3px)}
/* ROZWIJAJ AQUA ONE W SWOIM REGIONIE */
.aq515-region{
position:relative!important;
width:100%;
min-height:0!important;
aspect-ratio:2400 / 796;
padding:0!important;
background-size:cover!important;
background-position:center center!important;
overflow:hidden;
}
.aq515-region__inner{
position:absolute!important;
inset:0!important;
width:100%!important;
max-width:none!important;
height:100%;
margin:0!important;
}
.aq515-region .aq515-title{
position:absolute!important;
top:7.5%;
left:0;
right:0;
margin:0!important;
text-align:center!important;
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-weight:800!important;
font-size:clamp(27px,2.75vw,42px)!important;
line-height:1!important;
letter-spacing:-.035em!important;
color:#05080c!important;
white-space:nowrap;
}
.aq515-region__benefits{
position:absolute!important;
left:4.4%!important;
top:25.5%!important;
width:41.5%!important;
max-width:none!important;
margin:0!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
column-gap:2.2%!important;
row-gap:9%!important;
align-items:start;
background:transparent!important;
padding:0!important;
}
.aq515-region__benefits>div{
text-align:center!important;
min-width:0;
}
.aq515-region__benefits img{
display:block!important;
width:auto!important;
height:clamp(43px,4.1vw,60px)!important;
margin:0 auto 8px!important;
object-fit:contain!important;
}
.aq515-region__benefits b{
display:block!important;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-weight:600!important;
font-size:clamp(15px,1.35vw,19px)!important;
line-height:1.06!important;
letter-spacing:.003em!important;
color:#06090d!important;
}
.aq515-region__actions{
position:absolute!important;
left:36.8%!important;
bottom:7.2%!important;
width:auto!important;
max-width:none!important;
margin:0!important;
display:flex!important;
flex-wrap:nowrap!important;
justify-content:flex-start!important;
gap:18px!important;
}
.aq515-region__actions .aq515-btn{
min-height:42px!important;
padding:9px 18px!important;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif!important;
font-size:clamp(12px,1.03vw,14px)!important;
font-weight:500!important;
white-space:nowrap;
}
.aq515-region__actions .aq515-btn--outline{background:#fff!important}
@media (min-width:1600px){
.aq522-duo .aq522-duo__copy li{font-size:19px!important}
.aq515-region__benefits{width:40.5%!important}
}
@media (max-width:1099px) and (min-width:901px){
.aq522-duo .aq522-duo__copy h2{font-size:25px!important}
.aq522-duo .aq522-duo__copy li{font-size:14px!important;margin:7px 0!important;padding-left:25px}
.aq522-duo .aq522-duo__copy li::before{width:17px;height:17px;font-size:10px}
.aq522-duo .aq522-duo__copy ul{margin-bottom:14px!important}
.aq522-duo .aq522-duo__copy a{font-size:11px!important;min-height:34px}
.aq515-region .aq515-title{font-size:29px!important}
.aq515-region__benefits b{font-size:13px!important}
.aq515-region__benefits img{height:43px!important}
.aq515-region__actions{gap:10px!important}
.aq515-region__actions .aq515-btn{font-size:11px!important;min-height:35px!important;padding:7px 11px!important}
}
@media (max-width:900px){
.aq522-duo{grid-template-columns:1fr!important}
.aq522-duo .aq522-duo__card{aspect-ratio:auto;min-height:315px!important}
.aq522-duo__card--water{grid-template-columns:34% 66%}
.aq522-duo__copy{padding:28px 24px!important}
.aq522-duo__copy--pack{width:58%}
.aq522-duo .aq522-duo__copy h2{font-size:28px!important}
.aq522-duo .aq522-duo__copy li{font-size:16px!important}
.aq515-region{aspect-ratio:auto;min-height:520px!important;background-position:65% bottom!important;background-size:auto 58%!important;background-color:#f7fbfc!important}
.aq515-region__inner{position:relative!important;inset:auto!important;height:520px}
.aq515-region .aq515-title{top:28px!important;left:18px!important;right:18px!important;font-size:30px!important;white-space:normal!important}
.aq515-region__benefits{left:24px!important;top:105px!important;width:56%!important;grid-template-columns:repeat(2,1fr)!important;row-gap:20px!important}
.aq515-region__benefits b{font-size:14px!important}
.aq515-region__benefits img{height:45px!important}
.aq515-region__actions{left:24px!important;right:24px!important;bottom:22px!important;flex-wrap:wrap!important;gap:10px!important}
}
@media (max-width:620px){
.aq522-duo .aq522-duo__card{min-height:0!important}
.aq522-duo__card--water{display:block!important;background:#fff!important}
.aq522-duo__art--water{height:180px;background-position:center 52%}
.aq522-duo__copy{padding:24px 20px 28px!important}
.aq522-duo__card--pack{min-height:410px!important;background-position:68% bottom!important;background-size:auto 58%!important;background-color:#f6f6f3!important;align-items:flex-start!important}
.aq522-duo__copy--pack{width:100%!important;padding-bottom:190px!important;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.90) 56%,rgba(255,255,255,0) 100%)}
.aq522-duo .aq522-duo__copy h2{font-size:27px!important}
.aq522-duo .aq522-duo__copy li{font-size:15px!important}
.aq522-duo .aq522-duo__copy a{font-size:12px!important;white-space:normal}
.aq515-region{min-height:610px!important;background-position:76% bottom!important;background-size:auto 42%!important}
.aq515-region__inner{height:610px}
.aq515-region .aq515-title{top:24px!important;font-size:27px!important}
.aq515-region__benefits{left:18px!important;right:18px!important;top:105px!important;width:auto!important;grid-template-columns:repeat(2,1fr)!important;background:rgba(255,255,255,.86)!important;padding:12px!important;border-radius:10px!important}
.aq515-region__actions{left:18px!important;right:18px!important;bottom:18px!important;display:grid!important;grid-template-columns:1fr!important}
.aq515-region__actions .aq515-btn{justify-content:center!important;width:100%}
}
/* v5.22 safeguard against legacy direct-child rules in older responsive layer. */
.aq522-duo__art--water{max-width:none!important;background-color:transparent!important}
/* v5.23 — strona Woda: aseptyczny rozlew jak w zaakceptowanym rozwiązaniu */
.aq515-process--icons{gap:30px;margin-top:36px}
.aq515-process--icons::before{display:none}
.aq515-process__step--icon{padding:0 12px}
.aq515-process__circle{width:106px;height:106px;border-radius:50%;background:#fff;border:3px solid #1f78c7;box-shadow:0 4px 0 rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative}
.aq515-process--icons .aq515-process__step img{width:52px;height:52px;object-fit:contain;margin:0;display:block}
.aq515-process--icons .aq515-process__step h3{font-size:22px;line-height:1.1;font-weight:500;color:#121821;letter-spacing:-.02em;max-width:170px;margin:0 auto}
.aq515-process__arrow{position:absolute;top:34px;right:-18px;font-family:'Aqua DINish','Aqua Saira','Arial Narrow',Arial,sans-serif;font-size:48px;line-height:1;color:#1f78c7;font-weight:400}
@media (max-width: 1024px){
.aq515-process--icons{gap:22px}
.aq515-process__circle{width:92px;height:92px}
.aq515-process--icons .aq515-process__step h3{font-size:18px;max-width:140px}
.aq515-process__arrow{top:28px;right:-14px;font-size:38px}
}
@media (max-width: 767px){
.aq515-process__step--icon{padding:0 6px}
.aq515-process__circle{width:84px;height:84px;margin-bottom:14px}
.aq515-process--icons .aq515-process__step h3{font-size:16px;max-width:120px}
.aq515-process__arrow{display:none}
}
/* v5.25 – water properties icon fixes */
.aq515-water-features .aq515-feature-grid--5{align-items:start}
.aq515-water-features .aq515-feature{display:flex;flex-direction:column;align-items:center;height:100%}
.aq515-water-features .aq515-feature>img{width:78px;height:78px;margin-bottom:14px;flex:0 0 auto}
.aq515-water-features .aq515-feature h3{min-height:2.25em;display:flex;align-items:flex-start;justify-content:center;margin-bottom:12px}
.aq515-water-features .aq515-feature p{margin-top:0}
@media(max-width:767px){.aq515-water-features .aq515-feature h3{min-height:auto}}
/* v5.26 – align personalisation section to source layout */
.aq515-personal{min-height:580px;background-repeat:no-repeat;background-position:78% 50%;background-size:auto 100%;overflow:hidden}
.aq515-personal__inner{min-height:580px;position:relative}
.aq515-personal__intro{left:0;top:53%;transform:translateY(-50%);width:31%;max-width:350px}
.aq515-personal__intro h2{font-size:clamp(34px,3vw,58px);line-height:.92;margin:0 0 26px}
.aq515-personal__intro p{font-size:19px;line-height:1.38;max-width:330px;margin:0 0 22px}
.aq515-personal__labels{position:absolute;inset:0}
.aq515-personal__label{width:230px;z-index:2}
.aq515-personal__label b{font-family:'Aqua Rubik';font-size:18px;line-height:1.15;display:block;margin-bottom:8px}
.aq515-personal__label small{font-size:14px;line-height:1.35;display:block;color:#222}
.aq515-personal__label::before{content:'';position:absolute;top:12px;height:2px;background:#2a86d1}
.aq515-personal__label::after{content:'';position:absolute;top:8px;width:8px;height:8px;border-radius:50%;background:#2a86d1}
.aq515-personal__label--1{left:38.5%;top:11%}.aq515-personal__label--1::before{left:100%;width:72px}.aq515-personal__label--1::after{left:calc(100% + 68px)}
.aq515-personal__label--2{right:2%;top:11%}.aq515-personal__label--2::before{right:100%;width:75px}.aq515-personal__label--2::after{right:calc(100% + 71px)}
.aq515-personal__label--3{left:37.5%;top:39%}.aq515-personal__label--3::before{left:100%;width:96px}.aq515-personal__label--3::after{left:calc(100% + 92px)}
.aq515-personal__label--4{right:2%;top:39%}.aq515-personal__label--4::before{right:100%;width:72px}.aq515-personal__label--4::after{right:calc(100% + 68px)}
.aq515-personal__label--5{left:37.5%;top:69%}.aq515-personal__label--5::before{left:100%;width:82px}.aq515-personal__label--5::after{left:calc(100% + 78px)}
.aq515-personal__label--6{right:2%;top:69%}.aq515-personal__label--6::before{right:100%;width:76px}.aq515-personal__label--6::after{right:calc(100% + 72px)}
@media (max-width:1199px){
.aq515-personal{min-height:520px;background-position:80% 50%;background-size:auto 96%}
.aq515-personal__inner{min-height:520px}
.aq515-personal__intro{width:28%;max-width:300px}
.aq515-personal__intro p{font-size:16px;max-width:285px}
.aq515-personal__label{width:195px}
.aq515-personal__label b{font-size:16px}.aq515-personal__label small{font-size:13px}
.aq515-personal__label--1{left:33%;top:10.5%}.aq515-personal__label--1::before{width:55px}.aq515-personal__label--1::after{left:calc(100% + 51px)}
.aq515-personal__label--2{right:0;top:10.5%}.aq515-personal__label--2::before{width:55px}.aq515-personal__label--2::after{right:calc(100% + 51px)}
.aq515-personal__label--3{left:32.5%;top:39%}.aq515-personal__label--3::before{width:78px}.aq515-personal__label--3::after{left:calc(100% + 74px)}
.aq515-personal__label--4{right:0;top:39%}.aq515-personal__label--4::before{width:58px}.aq515-personal__label--4::after{right:calc(100% + 54px)}
.aq515-personal__label--5{left:32.5%;top:69%}.aq515-personal__label--5::before{width:68px}.aq515-personal__label--5::after{left:calc(100% + 64px)}
.aq515-personal__label--6{right:0;top:69%}.aq515-personal__label--6::before{width:60px}.aq515-personal__label--6::after{right:calc(100% + 56px)}
}
@media (max-width:991px){
.aq515-personal{min-height:auto;background-position:68% top;padding:34px 0}
.aq515-personal__inner{min-height:650px}
.aq515-personal__intro{position:relative;top:auto;left:auto;transform:none;width:48%;max-width:none;background:rgba(255,255,255,.78);padding:16px;border-radius:8px}
.aq515-personal__labels{position:absolute}
.aq515-personal__label{width:190px;background:rgba(255,255,255,.82);padding:8px;border-radius:7px}
.aq515-personal__label::before,.aq515-personal__label::after{display:none}
.aq515-personal__label--1{left:2%;top:34%}.aq515-personal__label--2{right:0;top:34%}.aq515-personal__label--3{left:2%;top:52%}.aq515-personal__label--4{right:0;top:52%}.aq515-personal__label--5{left:2%;top:70%}.aq515-personal__label--6{right:0;top:70%}
}
@media (max-width:767px){
.aq515-personal{background-position:74% center}
.aq515-personal__inner{min-height:auto}
.aq515-personal__intro{width:100%}
.aq515-personal__labels{position:relative;display:grid;grid-template-columns:1fr;gap:8px;margin-top:300px}
.aq515-personal__label,.aq515-personal__label--1,.aq515-personal__label--2,.aq515-personal__label--3,.aq515-personal__label--4,.aq515-personal__label--5,.aq515-personal__label--6{position:relative;inset:auto;width:100%;background:rgba(255,255,255,.92);padding:10px;border:1px solid #d8e0e5}
}
/* ==========================================================
Aqua One v5.27 — hero podstron bez przycinania materiałów klienta.
Proporcje wynikają bezpośrednio z dostarczonych plików źródłowych.
========================================================== */
@media (min-width:621px){
.aq515-hero--ratio-2400x1000,
.aq515-hero--ratio-2400x720,
.aq515-hero--ratio-2400x820{
min-height:0!important;
height:auto!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
}
.aq515-hero--ratio-2400x1000{aspect-ratio:2400 / 1000}
.aq515-hero--ratio-2400x720{aspect-ratio:2400 / 720}
.aq515-hero--ratio-2400x820{aspect-ratio:2400 / 820}
.aq515-hero--ratio-2400x1000 .aq515-hero__inner,
.aq515-hero--ratio-2400x720 .aq515-hero__inner,
.aq515-hero--ratio-2400x820 .aq515-hero__inner{
min-height:100%!important;
height:100%!important;
}
}
@media (min-width:621px) and (max-width:900px){
.aq515-hero--ratio-2400x1000 .aq515-hero__copy,
.aq515-hero--ratio-2400x720 .aq515-hero__copy,
.aq515-hero--ratio-2400x820 .aq515-hero__copy{
min-width:0!important;
width:54%!important;
padding:18px 0!important;
}
.aq515-hero--ratio-2400x1000 h1,
.aq515-hero--ratio-2400x720 h1,
.aq515-hero--ratio-2400x820 h1{font-size:clamp(30px,5.2vw,44px)!important}
.aq515-hero--ratio-2400x1000 p,
.aq515-hero--ratio-2400x720 p,
.aq515-hero--ratio-2400x820 p{font-size:clamp(12px,1.8vw,15px)!important;line-height:1.22!important;margin-bottom:14px!important}
.aq515-hero--ratio-2400x1000 .aq515-btn,
.aq515-hero--ratio-2400x720 .aq515-btn,
.aq515-hero--ratio-2400x820 .aq515-btn{font-size:11px!important;padding:7px 9px!important}
}
/* v5.30 – refine "Co można personalizować" to match Corel layout more closely */
.aq515-personal{padding:34px 0 28px;background:#e2e1dd;overflow:hidden}
.aq515-personal__inner{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,720px);align-items:center;justify-content:space-between;column-gap:32px;position:relative}
.aq515-personal__intro{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:340px}
.aq515-personal__intro h2{font-size:clamp(32px,2.7vw,46px);line-height:.94;letter-spacing:-.02em;margin:0 0 24px;max-width:340px;overflow:visible}
.aq515-personal__intro p{font-size:16px;line-height:1.42;max-width:290px;margin:0 0 28px}
.aq515-personal__intro p:last-child{margin-bottom:0}
.aq515-personal__art{position:relative;justify-self:start;width:min(100%,720px);height:430px;overflow:hidden;background:#e2e1dd}
.aq515-personal__img{display:block;width:100%;height:100%;object-fit:cover;object-position:right center}
.aq515-personal__labels{position:absolute;inset:0}
.aq515-personal__label{position:absolute;width:200px;z-index:2}
.aq515-personal__label b{font-family:'Aqua Rubik';font-weight:700;font-size:17px;line-height:1.1;display:block;margin-bottom:7px}
.aq515-personal__label small{font-size:14px;line-height:1.33;display:block;color:#222}
.aq515-personal__label::before{content:'';position:absolute;top:9px;height:2px;background:#2a86d1}
.aq515-personal__label::after{content:'';position:absolute;top:5px;width:8px;height:8px;border-radius:50%;background:#2a86d1}
.aq515-personal__label--1{left:3%;top:5%}.aq515-personal__label--1::before{left:100%;width:58px}.aq515-personal__label--1::after{left:calc(100% + 54px)}
.aq515-personal__label--2{right:1%;top:5%}.aq515-personal__label--2::before{right:100%;width:56px}.aq515-personal__label--2::after{right:calc(100% + 52px)}
.aq515-personal__label--3{left:3%;top:39%}.aq515-personal__label--3::before{left:100%;width:48px}.aq515-personal__label--3::after{left:calc(100% + 44px)}
.aq515-personal__label--4{right:1%;top:39%}.aq515-personal__label--4::before{right:100%;width:40px}.aq515-personal__label--4::after{right:calc(100% + 36px)}
.aq515-personal__label--5{left:3%;top:74%}.aq515-personal__label--5::before{left:100%;width:56px}.aq515-personal__label--5::after{left:calc(100% + 52px)}
.aq515-personal__label--6{right:1%;top:74%}.aq515-personal__label--6::before{right:100%;width:52px}.aq515-personal__label--6::after{right:calc(100% + 48px)}
@media (max-width:1270px){
.aq515-personal__inner{grid-template-columns:minmax(270px,310px) minmax(0,650px);column-gap:24px}
.aq515-personal__intro h2{font-size:clamp(28px,2.5vw,40px);max-width:310px}
.aq515-personal__intro p{font-size:15px;max-width:260px;margin-bottom:22px}
.aq515-personal__art{width:min(100%,650px);height:390px}
.aq515-personal__label{width:180px}
.aq515-personal__label b{font-size:16px}.aq515-personal__label small{font-size:13px}
.aq515-personal__label--1::before{width:42px}.aq515-personal__label--1::after{left:calc(100% + 38px)}
.aq515-personal__label--2::before{width:42px}.aq515-personal__label--2::after{right:calc(100% + 38px)}
.aq515-personal__label--3::before{width:36px}.aq515-personal__label--3::after{left:calc(100% + 32px)}
.aq515-personal__label--4::before{width:32px}.aq515-personal__label--4::after{right:calc(100% + 28px)}
.aq515-personal__label--5::before{width:40px}.aq515-personal__label--5::after{left:calc(100% + 36px)}
.aq515-personal__label--6::before{width:38px}.aq515-personal__label--6::after{right:calc(100% + 34px)}
}
@media (max-width:1024px){
.aq515-personal{padding:30px 0}
.aq515-personal__inner{grid-template-columns:1fr;row-gap:22px}
.aq515-personal__intro{max-width:none}
.aq515-personal__intro h2,.aq515-personal__intro p{max-width:none}
.aq515-personal__art{width:min(100%,760px);height:auto;justify-self:center}
.aq515-personal__img{height:auto;object-fit:contain}
}
@media (max-width:767px){
.aq515-personal__intro h2{font-size:32px;margin-bottom:20px}
.aq515-personal__intro p{font-size:15px;line-height:1.45;margin-bottom:18px}
.aq515-personal__labels{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.aq515-personal__art{display:flex;flex-direction:column;height:auto}
.aq515-personal__img{order:1}
.aq515-personal__label,.aq515-personal__label--1,.aq515-personal__label--2,.aq515-personal__label--3,.aq515-personal__label--4,.aq515-personal__label--5,.aq515-personal__label--6{position:relative;inset:auto;width:100%;background:rgba(255,255,255,.92);padding:10px;border:1px solid #d8e0e5}
.aq515-personal__label::before,.aq515-personal__label::after{display:none}
}
/* v5.31 – fix contact background cropping and refine personalisation section spacing */
.aq515-personal{
padding:18px 0 14px;
background:#e2e1dd;
overflow:visible;
}
.aq515-personal .container{overflow:visible}
.aq515-personal__inner{
display:grid;
grid-template-columns:minmax(320px,360px) minmax(0,760px);
align-items:center;
justify-content:space-between;
column-gap:26px;
}
.aq515-personal__intro{
max-width:360px;
}
.aq515-personal__intro h2{
font-size:clamp(30px,2.45vw,40px);
line-height:.96;
letter-spacing:-.01em;
max-width:360px;
margin:0 0 22px;
overflow:visible;
}
.aq515-personal__intro p{
font-size:16px;
line-height:1.42;
max-width:300px;
margin:0 0 24px;
}
.aq515-personal__art{
position:relative;
justify-self:start;
width:min(100%,760px);
aspect-ratio:2403 / 1002;
height:auto;
overflow:visible;
background:transparent;
}
.aq515-personal__img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
}
.aq515-personal__labels{position:absolute;inset:0}
.aq515-personal__label{position:absolute;width:208px;z-index:2}
.aq515-personal__label b{font-family:'Aqua Rubik';font-weight:700;font-size:17px;line-height:1.1;display:block;margin-bottom:8px}
.aq515-personal__label small{font-size:14px;line-height:1.34;display:block;color:#222}
.aq515-personal__label::before{content:'';position:absolute;top:9px;height:2px;background:#2a86d1}
.aq515-personal__label::after{content:'';position:absolute;top:5px;width:8px;height:8px;border-radius:50%;background:#2a86d1}
.aq515-personal__label--1,.aq515-personal__label--3,.aq515-personal__label--5{padding-right:14px}
.aq515-personal__label--2,.aq515-personal__label--4,.aq515-personal__label--6{padding-left:14px}
.aq515-personal__label--1{left:2%;top:5.5%}.aq515-personal__label--1::before{left:100%;width:56px}.aq515-personal__label--1::after{left:calc(100% + 52px)}
.aq515-personal__label--2{right:1%;top:5.5%}.aq515-personal__label--2::before{right:100%;width:44px}.aq515-personal__label--2::after{right:calc(100% + 40px)}
.aq515-personal__label--3{left:2%;top:39%}.aq515-personal__label--3::before{left:100%;width:44px}.aq515-personal__label--3::after{left:calc(100% + 40px)}
.aq515-personal__label--4{right:1%;top:39%}.aq515-personal__label--4::before{right:100%;width:36px}.aq515-personal__label--4::after{right:calc(100% + 32px)}
.aq515-personal__label--5{left:2%;top:73%}.aq515-personal__label--5::before{left:100%;width:52px}.aq515-personal__label--5::after{left:calc(100% + 48px)}
.aq515-personal__label--6{right:1%;top:73%}.aq515-personal__label--6::before{right:100%;width:42px}.aq515-personal__label--6::after{right:calc(100% + 38px)}
.aq515-contact{
min-height:clamp(360px,32.7vw,470px);
background-size:100% auto;
background-position:center center;
background-repeat:no-repeat;
background-color:#eef5f9;
}
.aq515-contact__shell{
min-height:inherit;
display:flex;
align-items:center;
}
.aq515-contact__form{
width:58%;
max-width:690px;
padding:18px 0 14px;
}
@media (max-width:1270px){
.aq515-personal__inner{grid-template-columns:minmax(300px,330px) minmax(0,680px);column-gap:22px}
.aq515-personal__intro h2{font-size:clamp(28px,2.35vw,36px);max-width:330px}
.aq515-personal__intro p{font-size:15px;max-width:275px;margin-bottom:20px}
.aq515-personal__art{width:min(100%,680px)}
.aq515-personal__label{width:188px}
.aq515-personal__label b{font-size:16px}.aq515-personal__label small{font-size:13px}
.aq515-personal__label--1::before{width:42px}.aq515-personal__label--1::after{left:calc(100% + 38px)}
.aq515-personal__label--2::before{width:36px}.aq515-personal__label--2::after{right:calc(100% + 32px)}
.aq515-personal__label--3::before{width:32px}.aq515-personal__label--3::after{left:calc(100% + 28px)}
.aq515-personal__label--4::before{width:28px}.aq515-personal__label--4::after{right:calc(100% + 24px)}
.aq515-personal__label--5::before{width:38px}.aq515-personal__label--5::after{left:calc(100% + 34px)}
.aq515-personal__label--6::before{width:34px}.aq515-personal__label--6::after{right:calc(100% + 30px)}
.aq515-contact{min-height:clamp(330px,34vw,430px);background-size:100% auto;background-position:center center}
.aq515-contact__form{width:62%}
}
@media (max-width:1024px){
.aq515-personal{padding:28px 0}
.aq515-personal__inner{grid-template-columns:1fr;row-gap:22px}
.aq515-personal__intro{max-width:none}
.aq515-personal__intro h2,.aq515-personal__intro p{max-width:none}
.aq515-personal__art{width:min(100%,760px);height:auto;justify-self:center}
.aq515-personal__img{height:auto;object-fit:contain}
.aq515-contact{min-height:560px;background-position:72% bottom;background-size:auto 40%;background-color:#eff7fb}
.aq515-contact__shell{min-height:560px;align-items:flex-start}
.aq515-contact__form{width:100%;max-width:none;padding-top:28px}
}
@media (max-width:767px){
.aq515-personal__intro h2{font-size:32px;margin-bottom:20px}
.aq515-personal__intro p{font-size:15px;line-height:1.45;margin-bottom:18px}
.aq515-personal__labels{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.aq515-personal__art{display:flex;flex-direction:column;height:auto}
.aq515-personal__img{order:1}
.aq515-personal__label,.aq515-personal__label--1,.aq515-personal__label--2,.aq515-personal__label--3,.aq515-personal__label--4,.aq515-personal__label--5,.aq515-personal__label--6{position:relative;inset:auto;width:100%;background:rgba(255,255,255,.92);padding:10px 12px;border:1px solid #d8e0e5}
.aq515-personal__label::before,.aq515-personal__label::after{display:none}
}
/* ==========================================================
Aqua One v5.32 — personalizacja jako jeden responsywny canvas
----------------------------------------------------------
Grafika klienta 2403×1002 jest kompletnym płótnem referencyjnym:
zawiera tło i kartonik we właściwej pozycji. W v5.31 obraz był
osadzony w prawej kolumnie, przez co puste pole z samej grafiki
było liczone drugi raz, kartonik robił się zbyt mały, a sekcja
dziedziczyła stare min-height 580/520 px.
Od v5.32 cały desktop/tablet korzysta z jednego skalowalnego
płótna. Intro, kartonik, opisy, linie i punkty skalują się razem
względem tej samej powierzchni — także podczas zmiany szerokości
okna przeglądarki. Widok mobilny <=767 px pozostaje reflowem.
========================================================== */
@media (min-width:768px){
.aq515-personal{
min-height:0!important;
padding:0!important;
background:#e2e1dd!important;
overflow:hidden!important;
}
.aq515-personal .aq515-personal__inner.container{
width:100%!important;
max-width:none!important;
min-height:0!important;
height:auto!important;
margin:0!important;
display:block!important;
position:relative!important;
aspect-ratio:2403 / 1002;
overflow:hidden!important;
}
/* Tekst po lewej jest częścią tego samego płótna co produkt. */
.aq515-personal__intro{
position:absolute!important;
z-index:3;
left:4.05%!important;
top:10.4%!important;
width:25.5%!important;
max-width:320px!important;
padding:0!important;
margin:0!important;
background:transparent!important;
border-radius:0!important;
transform:none!important;
}
.aq515-personal__intro h2{
margin:0 0 clamp(17px,2.1vw,25px)!important;
max-width:100%!important;
font-size:clamp(26px,3.1vw,40px)!important;
line-height:.94!important;
letter-spacing:-.028em!important;
overflow:visible!important;
}
.aq515-personal__intro p{
margin:0 0 clamp(18px,2.2vw,27px)!important;
max-width:300px!important;
font-size:clamp(12px,1.55vw,16px)!important;
line-height:1.34!important;
}
.aq515-personal__intro p:last-child{margin-bottom:0!important}
/* Obraz źródłowy wypełnia całe płótno — bez dodatkowej prawej kolumny. */
.aq515-personal__art{
position:absolute!important;
z-index:1;
inset:0!important;
width:100%!important;
max-width:none!important;
height:100%!important;
aspect-ratio:auto!important;
margin:0!important;
overflow:hidden!important;
background:transparent!important;
}
.aq515-personal__img{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
max-width:none!important;
object-fit:fill!important;
object-position:center center!important;
}
.aq515-personal__labels{
position:absolute!important;
z-index:2;
inset:0!important;
display:block!important;
margin:0!important;
}
.aq515-personal__label,
.aq515-personal__label--1,
.aq515-personal__label--2,
.aq515-personal__label--3,
.aq515-personal__label--4,
.aq515-personal__label--5,
.aq515-personal__label--6{
position:absolute!important;
inset:auto;
z-index:3;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#111!important;
}
.aq515-personal__label b{
display:block!important;
margin:0 0 4px!important;
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-weight:700!important;
font-size:clamp(13px,1.75vw,17px)!important;
line-height:1.08!important;
}
.aq515-personal__label small{
display:block!important;
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-size:clamp(10px,1.34vw,14px)!important;
line-height:1.22!important;
color:#202224!important;
}
/* Kotwice zgodne z płótnem referencyjnym Corel. */
.aq515-personal__label--1{left:36.1%!important;top:9.4%!important;width:20%!important}
.aq515-personal__label--2{left:72.9%!important;right:auto!important;top:9.2%!important;width:23%!important}
.aq515-personal__label--3{left:36.1%!important;top:43%!important;width:20%!important}
.aq515-personal__label--4{left:85%!important;right:auto!important;top:43%!important;width:13.5%!important}
.aq515-personal__label--5{left:36.1%!important;top:77%!important;width:20%!important}
.aq515-personal__label--6{left:82.4%!important;right:auto!important;top:77%!important;width:16.5%!important}
/* Linie i punkty również są liczone od tego samego płótna. */
.aq515-personal__label::before{
content:''!important;
position:absolute!important;
top:8px!important;
height:1.5px!important;
background:#1181bf!important;
}
.aq515-personal__label::after{
content:''!important;
position:absolute!important;
top:5px!important;
width:6px!important;
height:6px!important;
border-radius:50%!important;
background:#087dbb!important;
}
.aq515-personal__label--1::before{left:calc(100% + 6px)!important;width:48%!important}
.aq515-personal__label--1::after{left:calc(148% + 3px)!important}
.aq515-personal__label--3::before{left:calc(100% + 6px)!important;width:39%!important}
.aq515-personal__label--3::after{left:calc(139% + 3px)!important}
.aq515-personal__label--5::before{left:calc(100% + 6px)!important;width:42%!important}
.aq515-personal__label--5::after{left:calc(142% + 3px)!important}
.aq515-personal__label--2::before{right:calc(100% + 6px)!important;width:36%!important}
.aq515-personal__label--2::after{right:calc(136% + 3px)!important}
.aq515-personal__label--4::before{right:calc(100% + 6px)!important;width:57%!important}
.aq515-personal__label--4::after{right:calc(157% + 3px)!important}
.aq515-personal__label--6::before{right:calc(100% + 6px)!important;width:49%!important}
.aq515-personal__label--6::after{right:calc(149% + 3px)!important}
}
/* Telefon: pozostawiamy czytelny układ pionowy, ale zerujemy stare min-height. */
@media (max-width:767px){
.aq515-personal{min-height:0!important;overflow:hidden!important}
.aq515-personal__inner{min-height:0!important}
}
/* ==========================================================
Aqua One v5.33 — connector geometry from the Corel reference
----------------------------------------------------------
v5.32 tied connector lengths to label widths. On the top row this
made the two independent connectors meet and look like one long line,
while all six lines changed visually as label boxes reflowed.
In v5.33 the blue geometry is a dedicated SVG overlay using the same
2403×1002 coordinate system as the carton artwork. The connector
endpoints therefore stay pinned to the reference image at every
desktop/tablet width and are independent of text wrapping.
========================================================== */
@media (min-width:768px){
/* Disable all legacy pseudo-element connectors. */
.aq515-personal__label::before,
.aq515-personal__label::after{
content:none!important;
display:none!important;
}
.aq515-personal__connectors{
display:block!important;
position:absolute!important;
z-index:2!important;
inset:0!important;
width:100%!important;
height:100%!important;
overflow:visible!important;
pointer-events:none!important;
}
.aq515-personal__connector-lines polyline,
.aq515-personal__connector-lines line{
fill:none;
stroke:#2385c5;
stroke-width:4;
stroke-linecap:butt;
stroke-linejoin:miter;
}
.aq515-personal__connector-lines circle{
fill:#2385c5;
stroke:none;
}
/* Labels must remain above the SVG. */
.aq515-personal__labels{z-index:3!important}
.aq515-personal__label{z-index:4!important}
}
@media (max-width:767px){
.aq515-personal__connectors{display:none!important}
}
/* Aqua One v5.34 — micro-correction for the top-right personalization item */
@media (min-width:768px){
.aq515-personal__label--2{
left:74.2%!important;
top:8.7%!important;
width:21.5%!important;
}
}
/* ==========================================================
Aqua One v5.35 — restore non-cropped desktop stage images
for the homepage hero and contact form band.
========================================================== */
@media (min-width:621px){
/* Home hero uses the original 2400×1000 artwork without cutting off the top. */
.aq515-hero--home.aq515-hero--ratio-2400x1000{
min-height:0!important;
height:auto!important;
aspect-ratio:2400 / 1000!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
}
.aq515-hero--home.aq515-hero--ratio-2400x1000 .aq515-hero__inner{
min-height:100%!important;
height:100%!important;
}
/* Contact band keeps the full carton visible, aligned from the top edge. */
.aq515-contact--ratio-2400x785{
min-height:0!important;
height:auto!important;
aspect-ratio:2400 / 785!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
}
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
min-height:100%!important;
height:100%!important;
align-items:center!important;
}
}
/* ==========================================================
Aqua One v5.36 — safer connector/label separation
The labels now sit on opaque background masks above the SVG lines,
so scaling the browser cannot visually push blue connectors under text.
========================================================== */
@media (min-width:768px){
.aq515-personal__labels{
z-index:5!important;
}
.aq515-personal__connectors{
z-index:2!important;
}
.aq515-personal__label,
.aq515-personal__label--1,
.aq515-personal__label--2,
.aq515-personal__label--3,
.aq515-personal__label--4,
.aq515-personal__label--5,
.aq515-personal__label--6{
background:#e5e4df!important;
border-radius:10px!important;
padding-top:3px!important;
padding-bottom:3px!important;
box-shadow:none!important;
}
.aq515-personal__label--1,
.aq515-personal__label--3,
.aq515-personal__label--5{
padding-left:0!important;
padding-right:14px!important;
}
.aq515-personal__label--2,
.aq515-personal__label--4,
.aq515-personal__label--6{
padding-left:14px!important;
padding-right:0!important;
}
.aq515-personal__label b,
.aq515-personal__label small{
position:relative;
z-index:2;
}
/* Minor rebalancing to keep a safer corridor for lines during resize. */
.aq515-personal__label--1{left:35.6%!important;width:20.4%!important}
.aq515-personal__label--2{left:74.0%!important;top:8.8%!important;width:21.0%!important}
.aq515-personal__label--3{left:35.6%!important;width:20.4%!important}
.aq515-personal__label--4{left:84.8%!important;width:14.2%!important}
.aq515-personal__label--5{left:35.6%!important;width:20.4%!important}
.aq515-personal__label--6{left:82.2%!important;width:17.0%!important}
}
/* ==========================================================
Aqua One v5.37 — static personalization diagram
Only the left intro remains editable. The diagram with lines and labels
is a single static image, so it no longer depends on viewport reflow.
========================================================== */
.aq515-personal{
padding:34px 0 28px!important;
background:#e2e1dd!important;
overflow:hidden!important;
}
.aq515-personal__inner{
display:grid!important;
grid-template-columns:minmax(300px,340px) minmax(0,790px)!important;
align-items:center!important;
justify-content:space-between!important;
column-gap:34px!important;
position:relative!important;
}
.aq515-personal__intro{
position:relative!important;
left:auto!important;
top:auto!important;
transform:none!important;
width:auto!important;
max-width:340px!important;
}
.aq515-personal__intro h2{
font-size:clamp(32px,2.7vw,46px)!important;
line-height:.94!important;
letter-spacing:-.02em!important;
margin:0 0 24px!important;
max-width:340px!important;
}
.aq515-personal__intro p{
font-size:16px!important;
line-height:1.42!important;
max-width:290px!important;
margin:0 0 28px!important;
}
.aq515-personal__intro p:last-child{margin-bottom:0!important}
.aq515-personal__art--static{
position:relative!important;
justify-self:start!important;
width:min(100%,790px)!important;
height:auto!important;
overflow:visible!important;
background:transparent!important;
}
.aq515-personal__static{
display:block!important;
width:100%!important;
height:auto!important;
}
.aq515-personal__img,
.aq515-personal__connectors,
.aq515-personal__labels{display:none!important}
@media (max-width:1024px){
.aq515-personal__inner{
grid-template-columns:1fr!important;
row-gap:22px!important;
}
.aq515-personal__intro{
max-width:none!important;
}
.aq515-personal__intro h2,
.aq515-personal__intro p{
max-width:none!important;
}
.aq515-personal__art--static{
width:min(100%,790px)!important;
justify-self:center!important;
}
}
@media (max-width:767px){
.aq515-personal__intro h2{font-size:32px!important;margin-bottom:20px!important}
.aq515-personal__intro p{font-size:15px!important;line-height:1.45!important;margin-bottom:18px!important}
}
/* ==========================================================
Aqua One v5.38 — sharp SVG personalization diagram
========================================================== */
.aq515-personal__inner{
grid-template-columns:minmax(260px,320px) minmax(0,1fr)!important;
align-items:start!important;
column-gap:28px!important;
}
.aq515-personal__art--static{
justify-self:stretch!important;
width:100%!important;
max-width:860px!important;
padding-top:10px!important;
}
.aq515-personal__static{
display:block!important;
width:100%!important;
height:auto!important;
}
@media (max-width:1200px){
.aq515-personal__inner{
grid-template-columns:minmax(240px,300px) minmax(0,1fr)!important;
column-gap:24px!important;
}
.aq515-personal__art--static{
max-width:820px!important;
}
}
@media (max-width:1024px){
.aq515-personal__inner{
grid-template-columns:1fr!important;
align-items:start!important;
}
.aq515-personal__art--static{
width:min(100%,860px)!important;
max-width:none!important;
justify-self:center!important;
padding-top:0!important;
}
}
/* ==========================================================
Aqua One v5.39 — tighter static diagram composition
========================================================== */
.aq515-personal__inner{
grid-template-columns:minmax(250px,300px) minmax(0,860px)!important;
align-items:start!important;
column-gap:24px!important;
}
.aq515-personal__intro{
max-width:300px!important;
}
.aq515-personal__intro h2{
font-size:clamp(30px,2.5vw,42px)!important;
}
.aq515-personal__intro p{
max-width:285px!important;
}
.aq515-personal__art--static{
justify-self:start!important;
width:100%!important;
max-width:860px!important;
padding-top:0!important;
}
@media (max-width:1200px){
.aq515-personal__inner{
grid-template-columns:minmax(230px,280px) minmax(0,1fr)!important;
}
}
@media (max-width:1024px){
.aq515-personal__inner{grid-template-columns:1fr!important;row-gap:22px!important}
.aq515-personal__art--static{max-width:860px!important;justify-self:center!important}
.aq515-personal__intro{max-width:none!important}
}
/* ==========================================================
Aqua One v5.40 — final desktop layout for the static diagram.
The right side is a single static reference image and must sit
next to the editable left intro, not below it.
========================================================== */
@media (min-width:768px){
.aq515-personal{
min-height:0!important;
padding:34px 0 28px!important;
background:#e2e1dd!important;
overflow:hidden!important;
}
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
width:min(100% - 40px,1180px)!important;
max-width:1180px!important;
min-height:0!important;
height:auto!important;
margin:0 auto!important;
display:grid!important;
grid-template-columns:minmax(250px,300px) minmax(760px,1fr)!important;
align-items:start!important;
justify-content:space-between!important;
gap:28px!important;
position:relative!important;
aspect-ratio:auto!important;
overflow:visible!important;
}
.aq515-personal .aq515-personal__intro{
position:relative!important;
inset:auto!important;
transform:none!important;
width:auto!important;
max-width:300px!important;
z-index:auto!important;
padding:0!important;
margin:0!important;
background:transparent!important;
}
.aq515-personal .aq515-personal__intro h2{
font-size:clamp(32px,2.7vw,46px)!important;
line-height:.94!important;
margin:0 0 24px!important;
max-width:300px!important;
}
.aq515-personal .aq515-personal__intro p{
font-size:16px!important;
line-height:1.42!important;
max-width:285px!important;
margin:0 0 28px!important;
}
.aq515-personal .aq515-personal__art,
.aq515-personal .aq515-personal__art--static{
position:relative!important;
inset:auto!important;
justify-self:start!important;
align-self:start!important;
display:block!important;
width:100%!important;
max-width:860px!important;
height:auto!important;
min-height:0!important;
padding:0!important;
margin:0!important;
background:transparent!important;
overflow:visible!important;
}
.aq515-personal .aq515-personal__static{
display:block!important;
width:100%!important;
max-width:860px!important;
height:auto!important;
margin:0!important;
}
.aq515-personal .aq515-personal__img,
.aq515-personal .aq515-personal__connectors,
.aq515-personal .aq515-personal__labels{
display:none!important;
}
}
@media (max-width:767px){
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
display:block!important;
width:min(100% - 28px,560px)!important;
max-width:560px!important;
margin:0 auto!important;
aspect-ratio:auto!important;
}
.aq515-personal .aq515-personal__intro{
position:relative!important;
inset:auto!important;
transform:none!important;
width:100%!important;
max-width:none!important;
}
.aq515-personal .aq515-personal__art--static{
width:100%!important;
max-width:none!important;
margin-top:18px!important;
}
}
/* ==========================================================
Aqua One v5.41 — heading width fix + sharper static diagram.
========================================================== */
@media (min-width:768px){
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
grid-template-columns:minmax(320px,360px) minmax(720px,1fr)!important;
gap:24px!important;
}
.aq515-personal .aq515-personal__intro{
max-width:360px!important;
overflow:visible!important;
}
.aq515-personal .aq515-personal__intro h2{
max-width:360px!important;
font-size:clamp(30px,2.45vw,42px)!important;
line-height:.94!important;
overflow:visible!important;
word-break:normal!important;
}
.aq515-personal .aq515-personal__intro p{
max-width:320px!important;
}
.aq515-personal .aq515-personal__art,
.aq515-personal .aq515-personal__art--static{
max-width:820px!important;
}
.aq515-personal .aq515-personal__static{
max-width:820px!important;
image-rendering:auto!important;
}
}
@media (max-width:1200px) and (min-width:768px){
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
grid-template-columns:minmax(290px,330px) minmax(640px,1fr)!important;
}
.aq515-personal .aq515-personal__intro h2{
max-width:330px!important;
font-size:clamp(28px,2.35vw,38px)!important;
}
}
/* ==========================================================
Aqua One v5.42 — final width tweak for the editable heading
and slightly sharper static diagram.
========================================================== */
@media (min-width:768px){
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
grid-template-columns:minmax(380px,410px) minmax(680px,1fr)!important;
gap:22px!important;
max-width:1220px!important;
width:min(100% - 40px,1220px)!important;
}
.aq515-personal .aq515-personal__intro{
max-width:410px!important;
padding-right:8px!important;
}
.aq515-personal .aq515-personal__intro h2{
max-width:405px!important;
font-size:clamp(28px,2.2vw,39px)!important;
line-height:.94!important;
letter-spacing:-.015em!important;
white-space:normal!important;
overflow:visible!important;
}
.aq515-personal .aq515-personal__intro p{
max-width:330px!important;
}
.aq515-personal .aq515-personal__art,
.aq515-personal .aq515-personal__art--static,
.aq515-personal .aq515-personal__static{
max-width:790px!important;
}
}
@media (max-width:1200px) and (min-width:768px){
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
grid-template-columns:minmax(340px,370px) minmax(620px,1fr)!important;
max-width:1160px!important;
width:min(100% - 36px,1160px)!important;
}
.aq515-personal .aq515-personal__intro{
max-width:370px!important;
}
.aq515-personal .aq515-personal__intro h2{
max-width:365px!important;
font-size:clamp(27px,2.15vw,36px)!important;
}
}
/* ==========================================================
Aqua One v5.43 — hamburger breakpoint moved to 1050px
========================================================== */
@media (max-width:1050px){
.aq515-header{
height:70px!important;
}
.aq515-header-inner{
height:70px!important;
grid-template-columns:110px minmax(0,1fr) 42px!important;
width:min(100% - 30px,1200px)!important;
}
.aq515-header-actions{
display:none!important;
}
.aq515-header .menu-toggle{
display:flex!important;
align-items:center!important;
justify-content:center!important;
justify-self:end!important;
margin-left:0!important;
}
.aq515-nav,
.main-nav.aq515-nav{
position:absolute!important;
top:70px!important;
left:0!important;
right:0!important;
width:100%!important;
margin:0!important;
background:#fff!important;
box-shadow:0 12px 25px rgba(20,42,72,.10)!important;
border-bottom:1px solid #e4eaee!important;
display:none!important;
z-index:120!important;
}
.aq515-nav.open,
.main-nav.aq515-nav.open{
display:block!important;
}
.aq515-nav .aqua-menu{
display:block!important;
width:min(100% - 36px,760px)!important;
margin:0 auto!important;
padding:10px 0 18px!important;
}
.aq515-nav .aqua-menu>li{
width:100%!important;
}
.aq515-nav .aqua-menu>li>a{
display:flex!important;
width:100%!important;
padding:12px 8px!important;
font-size:17px!important;
}
.aq515-nav .aqua-menu>li>a::after{
display:none!important;
}
.aq515-nav .sub-menu{
position:static!important;
min-width:0!important;
width:100%!important;
display:block!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
box-shadow:none!important;
border:0!important;
padding:0 0 0 18px!important;
margin:0!important;
}
}
/* ==========================================================
Aqua One v5.44 — retail cooperation steps with teal icon circles.
Only for page "Dla sieci sprzedaży".
========================================================== */
.aq515-process--retail{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
margin:34px 0 6px;
position:relative;
}
.aq515-process--retail::before{
content:"";
position:absolute;
left:9%;
right:9%;
top:53px;
height:2px;
background:#78c4d8;
z-index:0;
}
.aq515-process__step--retail{
position:relative;
z-index:1;
text-align:center;
padding:0 6px;
}
.aq515-process__visual{
position:relative;
width:136px;
margin:0 auto 12px;
}
.aq515-process__circle--retail{
width:128px;
height:128px;
border-radius:50%;
background:#23a8ae;
box-shadow:0 6px 10px rgba(0,0,0,.10);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
}
.aq515-process--retail .aq515-process__circle--retail img{
width:72px;
height:72px;
object-fit:contain;
display:block;
margin:0;
}
.aq515-process--retail .aq515-process__no{
position:absolute;
left:2px;
top:34px;
width:36px;
height:36px;
border:1px solid #cfd6da;
border-radius:50%;
background:#f3f4f4;
color:#2a92b6;
display:grid;
place-items:center;
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:700;
font-size:19px;
box-shadow:0 0 0 3px #e9ecec;
}
.aq515-process--retail .aq515-process__step h3{
font-family:'Aqua Rubik',Arial,sans-serif;
font-size:18px;
line-height:1.15;
font-weight:700;
margin:0 0 10px;
}
.aq515-process--retail .aq515-process__step p{
font-size:15px;
line-height:1.42;
color:#222b35;
max-width:220px;
margin:0 auto;
}
@media (max-width:1100px){
.aq515-process--retail{gap:14px}
.aq515-process__visual{width:120px}
.aq515-process__circle--retail{width:112px;height:112px}
.aq515-process--retail .aq515-process__circle--retail img{width:62px;height:62px}
.aq515-process--retail .aq515-process__no{top:30px}
.aq515-process--retail .aq515-process__step h3{font-size:16px}
.aq515-process--retail .aq515-process__step p{font-size:14px}
}
@media (max-width:767px){
.aq515-process--retail{
grid-template-columns:repeat(2,minmax(0,1fr));
row-gap:26px;
}
.aq515-process--retail::before{display:none}
.aq515-process__step--retail{padding:0}
.aq515-process__visual{width:110px;margin-bottom:10px}
.aq515-process__circle--retail{width:102px;height:102px}
.aq515-process--retail .aq515-process__circle--retail img{width:56px;height:56px}
.aq515-process--retail .aq515-process__no{top:28px;left:0;width:34px;height:34px;font-size:17px}
.aq515-process--retail .aq515-process__step h3{font-size:15px}
.aq515-process--retail .aq515-process__step p{font-size:13px;line-height:1.35;max-width:190px}
}
@media (max-width:420px){
.aq515-process--retail{grid-template-columns:1fr}
}
/* ==========================================================
Aqua One v5.45 — fine-tuned "Właściwości naszej wody" section
========================================================== */
.aq515-water-features .aq515-title{
letter-spacing:-.02em;
}
.aq515-water-features__grid{
gap:0!important;
margin-top:28px!important;
align-items:start!important;
}
.aq515-feature--water{
position:relative;
padding:12px 16px 8px!important;
min-height:260px;
}
.aq515-feature--water:not(:last-child)::after{
content:"";
position:absolute;
top:42px;
right:0;
width:1px;
height:175px;
background:#cfcfcf;
}
.aq515-feature--water img{
width:84px!important;
height:84px!important;
object-fit:contain!important;
margin:0 auto 18px!important;
display:block!important;
}
.aq515-feature--water-4 img,
.aq515-feature--water-5 img{
width:92px!important;
height:92px!important;
}
.aq515-water-features .aq515-feature--water h3{
min-height:3.3em!important;
margin:0 0 14px!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
text-align:center!important;
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-weight:800!important;
font-size:16px!important;
line-height:1.06!important;
text-transform:uppercase!important;
}
.aq515-water-features .aq515-feature--water-2 h3{ text-transform:none!important; }
.aq515-water-features .aq515-feature--water p{
font-size:14px!important;
line-height:1.38!important;
max-width:175px!important;
margin:0 auto!important;
color:#303947!important;
}
@media (min-width:1200px){
.aq515-water-features .aq515-title{font-size:clamp(34px,2.8vw,50px)!important}
}
@media (max-width:1024px){
.aq515-feature--water{padding:12px 12px 8px!important;min-height:250px}
.aq515-feature--water img{width:78px!important;height:78px!important}
.aq515-feature--water-4 img,.aq515-feature--water-5 img{width:86px!important;height:86px!important}
.aq515-water-features .aq515-feature--water h3{font-size:15px!important}
.aq515-water-features .aq515-feature--water p{font-size:13px!important;max-width:165px!important}
}
@media (max-width:767px){
.aq515-water-features__grid{gap:14px!important}
.aq515-feature--water{min-height:auto;padding:10px 8px!important}
.aq515-feature--water:not(:last-child)::after{display:none}
.aq515-feature--water img{margin-bottom:12px!important}
.aq515-water-features .aq515-feature--water h3{min-height:auto!important;margin-bottom:10px!important}
.aq515-water-features .aq515-title{font-size:32px!important}
}
/* Aqua One v5.46 — restore visible numbered circles in retail process */
.aq515-process--retail .aq515-process__visual{
overflow:visible!important;
}
.aq515-process--retail .aq515-process__circle--retail{
position:relative;
z-index:1;
}
.aq515-process--retail .aq515-process__no{
z-index:3!important;
left:-8px!important;
top:36px!important;
border:2px solid #cfd6da!important;
}
@media (max-width:1100px){
.aq515-process--retail .aq515-process__no{
left:-6px!important;
top:31px!important;
}
}
@media (max-width:767px){
.aq515-process--retail .aq515-process__no{
left:-4px!important;
top:28px!important;
}
}
/* ==========================================================
Aqua One v5.48 — restore full copy for "Jakość chroniona przez opakowanie"
========================================================== */
.aq515-quality-wrap{
padding-top:34px;
padding-bottom:34px;
}
.aq515-quality{
display:grid;
grid-template-columns:210px 1fr;
align-items:start;
gap:34px;
}
.aq515-quality__side{
display:flex;
flex-direction:column;
align-items:flex-start;
}
.aq515-quality__icon img{
width:180px;
height:180px;
object-fit:contain;
}
.aq515-quality__tagline{
margin-top:18px;
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:800;
font-size:24px;
line-height:1.05;
color:#101722;
text-transform:uppercase;
}
.aq515-quality__tagline span{color:var(--aq-cyan)}
.aq515-quality__text .aq515-title{
margin-bottom:16px;
}
.aq515-quality__lead{
max-width:820px;
font-size:16px;
line-height:1.42;
margin:0 0 18px;
}
.aq515-checks--detail{
list-style:none;
padding:0;
margin:10px 0 0;
}
.aq515-checks--detail li{
position:relative;
padding-left:34px;
margin:16px 0;
}
.aq515-checks--detail li::before{
content:'✓';
position:absolute;
left:0;
top:2px;
width:20px;
height:20px;
border:2px solid #2a8ed2;
border-radius:50%;
color:#2a8ed2;
display:grid;
place-items:center;
font-weight:800;
font-size:14px;
line-height:1;
}
.aq515-checks--detail b{
display:block;
font-family:'Aqua Rubik',Arial,sans-serif;
font-size:17px;
line-height:1.18;
margin-bottom:4px;
}
.aq515-checks--detail small{
display:block;
font-size:15px;
line-height:1.38;
color:#212934;
}
@media (max-width:1024px){
.aq515-quality{grid-template-columns:180px 1fr;gap:26px}
.aq515-quality__icon img{width:160px;height:160px}
.aq515-quality__tagline{font-size:22px}
}
@media (max-width:767px){
.aq515-quality{grid-template-columns:1fr;gap:18px}
.aq515-quality__side{align-items:center;text-align:center}
.aq515-quality__icon img{width:148px;height:148px}
.aq515-quality__tagline{font-size:21px}
.aq515-quality__lead{font-size:15px}
.aq515-checks--detail b{font-size:16px}
.aq515-checks--detail small{font-size:14px}
}
/* Aqua One v5.49 — force the left packaging tagline into exactly 3 lines */
.aq515-quality__tagline{
width:max-content;
max-width:100%;
}
.aq515-quality__tagline-line{
display:block;
white-space:nowrap;
}
/* Aqua One v5.50 — enlarge the two rightmost water-feature icons */
.aq515-feature--water-4 img,
.aq515-feature--water-5 img{
width:104px!important;
height:104px!important;
}
@media (max-width:1024px){
.aq515-feature--water-4 img,
.aq515-feature--water-5 img{
width:96px!important;
height:96px!important;
}
}
@media (max-width:767px){
.aq515-feature--water-4 img,
.aq515-feature--water-5 img{
width:88px!important;
height:88px!important;
}
}
/* Aqua One v5.51 — level the five feature columns in "Nasza woda" */
@media (min-width:768px){
.aq515-water-features__grid{
align-items:start!important;
}
.aq515-feature--water{
display:grid!important;
grid-template-rows:112px 72px 1fr!important;
align-items:start!important;
justify-items:center!important;
min-height:0!important;
}
.aq515-feature--water img{
margin:0!important;
align-self:center!important;
justify-self:center!important;
}
.aq515-water-features .aq515-feature--water h3{
min-height:0!important;
height:72px!important;
margin:0!important;
align-self:start!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
}
.aq515-water-features .aq515-feature--water p{
align-self:start!important;
width:100%!important;
margin:0 auto!important;
}
.aq515-feature--water:not(:last-child)::after{
top:40px!important;
height:182px!important;
}
}
@media (max-width:1024px) and (min-width:768px){
.aq515-feature--water{
grid-template-rows:102px 68px 1fr!important;
}
.aq515-water-features .aq515-feature--water h3{
height:68px!important;
}
}
/* Aqua One v5.52 — colored icon circles on home offer cards */
.aq515-choice-card.blue .aq515-icon-bubble{
background:#dfe8fb!important;
border-color:#d4dff5!important;
}
.aq515-choice-card.sand .aq515-icon-bubble{
background:#f7df95!important;
border-color:#efd27b!important;
}
.aq515-choice-card.mint .aq515-icon-bubble{
background:#d6ead7!important;
border-color:#c7dfc8!important;
}
.aq515-choice-card.lilac .aq515-icon-bubble{
background:#ddd4f3!important;
border-color:#d0c5eb!important;
}
/* Aqua One v5.52 — colored icon circles on the homepage offer cards */
.aq515-choice-card .aq515-icon-bubble{
border:4px solid #eef2f5!important;
box-shadow:none!important;
}
.aq515-choice-card.blue .aq515-icon-bubble{background:#dce7fb!important}
.aq515-choice-card.sand .aq515-icon-bubble{background:#f4dc92!important}
.aq515-choice-card.mint .aq515-icon-bubble{background:#cfe5d3!important}
.aq515-choice-card.lilac .aq515-icon-bubble{background:#ddd3f1!important}
/* Aqua One v5.52 — colored icon circles on homepage offer cards */
.aq515-choice-card .aq515-icon-bubble{
border:3px solid #fff!important;
box-shadow:0 4px 10px rgba(20,42,72,.10)!important;
}
.aq515-choice-card.blue .aq515-icon-bubble{
background:#dfeaff!important;
}
.aq515-choice-card.sand .aq515-icon-bubble{
background:#ffe2a1!important;
}
.aq515-choice-card.mint .aq515-icon-bubble{
background:#cfead8!important;
}
.aq515-choice-card.lilac .aq515-icon-bubble{
background:#e4d6f7!important;
}
/* ==========================================================
Aqua One v5.53 — packaging page text completion and colored benefit cards
========================================================== */
.aq515-pack-benefits .aq515-lead{
max-width:1040px;
}
.aq515-pack-benefits__grid{
gap:18px!important;
margin-top:18px!important;
}
.aq515-feature--pack-benefit{
background:#eaf1f1!important;
border:1px solid #d4dddd!important;
border-radius:8px!important;
padding:22px 28px!important;
min-height:130px!important;
text-align:center!important;
}
.aq515-feature--pack-benefit .aq515-fallback-icon{
width:26px;
height:26px;
border-radius:50%;
border:2px solid #1faab4;
color:#1faab4;
display:grid;
place-items:center;
font-size:18px;
font-weight:800;
margin:0 auto 12px;
line-height:1;
background:transparent;
}
.aq515-feature--pack-benefit h3{
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-size:17px!important;
font-weight:700!important;
margin:0 0 12px!important;
}
.aq515-feature--pack-benefit p{
font-size:15px!important;
line-height:1.42!important;
max-width:420px!important;
margin:0 auto!important;
}
@media (max-width:767px){
.aq515-feature--pack-benefit{
padding:18px 16px!important;
min-height:auto!important;
}
.aq515-feature--pack-benefit h3{font-size:16px!important}
.aq515-feature--pack-benefit p{font-size:14px!important}
}
/* Aqua One v5.54 — more space between the homepage heading and offer card icon row */
.aq515-offer .aq515-title{
margin-bottom:34px!important;
}
.aq515-offer .aq515-choice-grid{
margin-top:42px!important;
}
@media (max-width:1024px){
.aq515-offer .aq515-title{
margin-bottom:28px!important;
}
.aq515-offer .aq515-choice-grid{
margin-top:34px!important;
}
}
@media (max-width:767px){
.aq515-offer .aq515-title{
margin-bottom:20px!important;
}
.aq515-offer .aq515-choice-grid{
margin-top:24px!important;
}
}
/* Aqua One v5.55 — align homepage offer links to one common bottom line */
.aq515-choice-card{
display:flex!important;
flex-direction:column!important;
}
.aq515-choice-card h3,
.aq515-choice-card p{
width:100%;
}
.aq515-choice-card p{
flex:1 1 auto!important;
margin:0 0 14px!important;
}
.aq515-choice-card a{
margin-top:auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:100%;
}
/* Aqua One v5.56 — bordered, aligned audience cards on "Woda z Twoim logo" */
.aq515-audience-grid{
gap:0!important;
margin-top:26px!important;
}
.aq515-feature--audience{
display:grid!important;
grid-template-rows:88px 64px 1fr!important;
justify-items:center!important;
align-items:start!important;
text-align:center!important;
padding:14px 14px 16px!important;
min-height:214px!important;
border:1px solid #d5d9dc!important;
border-radius:12px!important;
background:#f4f5f4!important;
box-shadow:none!important;
}
.aq515-feature--audience > img{
width:72px!important;
height:72px!important;
margin:0!important;
align-self:center!important;
}
.aq515-feature--audience h3{
width:100%!important;
height:64px!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
font-size:17px!important;
line-height:1.08!important;
}
.aq515-feature--audience p{
width:100%!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
font-size:14px!important;
line-height:1.36!important;
color:#303947!important;
}
@media (max-width:1200px){
.aq515-feature--audience{padding:14px 10px 16px!important;min-height:224px!important}
.aq515-feature--audience h3{font-size:16px!important}
.aq515-feature--audience p{font-size:13.5px!important}
}
@media (max-width:767px){
.aq515-audience-grid{gap:12px!important}
.aq515-feature--audience{
grid-template-rows:74px 54px 1fr!important;
min-height:0!important;
padding:12px 10px 14px!important;
}
.aq515-feature--audience > img{width:60px!important;height:60px!important}
.aq515-feature--audience h3{height:auto!important;min-height:54px!important;font-size:15px!important}
.aq515-feature--audience p{font-size:13px!important}
}
/* Aqua One v5.57 — small gaps between audience cards */
.aq515-audience-grid{
gap:8px!important;
}
@media (max-width:767px){
.aq515-audience-grid{
gap:12px!important;
}
}
/* Aqua One v5.58 — align benefit columns on "Zostań dystrybutorem" */
.aq515-dist-why-grid{
align-items:start!important;
gap:20px!important;
margin-top:28px!important;
}
.aq515-feature--dist{
display:grid!important;
grid-template-rows:86px 68px 1fr!important;
justify-items:center!important;
align-items:start!important;
text-align:center!important;
padding:10px 12px!important;
min-height:250px!important;
}
.aq515-feature--dist > img{
width:72px!important;
height:72px!important;
margin:0!important;
align-self:center!important;
}
.aq515-feature--dist h3{
width:100%!important;
height:68px!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.aq515-feature--dist p{
width:100%!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
text-align:center!important;
}
@media (max-width:1024px){
.aq515-dist-why-grid{gap:16px!important}
.aq515-feature--dist{grid-template-rows:80px 62px 1fr!important;min-height:238px!important;padding:8px 8px!important}
.aq515-feature--dist > img{width:66px!important;height:66px!important}
.aq515-feature--dist h3{height:62px!important;font-size:15px!important}
}
@media (max-width:767px){
.aq515-feature--dist{grid-template-rows:70px 56px 1fr!important;min-height:0!important;padding:8px 6px!important}
.aq515-feature--dist > img{width:60px!important;height:60px!important}
.aq515-feature--dist h3{height:auto!important;min-height:56px!important;font-size:15px!important}
}
/* Aqua One v5.59 — align distributor process steps horizontally */
.aq515-process--dist{
align-items:start!important;
}
.aq515-process--dist .aq515-process__step{
display:grid!important;
grid-template-rows:52px 74px 1fr!important;
justify-items:center!important;
align-items:start!important;
padding:0 10px!important;
min-height:196px!important;
}
.aq515-process--dist .aq515-process__no{
margin:0!important;
align-self:start!important;
}
.aq515-process--dist .aq515-process__step h3{
width:100%!important;
height:74px!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
}
.aq515-process--dist .aq515-process__step p{
width:100%!important;
margin:0!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
text-align:center!important;
}
@media (max-width:1024px){
.aq515-process--dist .aq515-process__step{
grid-template-rows:50px 68px 1fr!important;
min-height:188px!important;
padding:0 6px!important;
}
.aq515-process--dist .aq515-process__step h3{
height:68px!important;
}
}
@media (max-width:767px){
.aq515-process--dist .aq515-process__step{
grid-template-rows:46px 58px 1fr!important;
min-height:0!important;
}
.aq515-process--dist .aq515-process__step h3{
height:auto!important;
min-height:58px!important;
}
}
/* Aqua One v5.60 — fix left packaging slogan spacing and colors */
.aq515-quality{
grid-template-columns:200px 1fr!important;
align-items:start!important;
gap:34px!important;
}
.aq515-quality__side{
align-items:flex-start!important;
max-width:200px!important;
}
.aq515-quality__icon img{
width:172px!important;
height:172px!important;
}
.aq515-quality__tagline{
width:175px!important;
max-width:175px!important;
margin-top:14px!important;
font-size:18px!important;
line-height:1.02!important;
letter-spacing:-.01em!important;
}
.aq515-quality__tagline > .aq515-quality__tagline-line{
color:#101722!important;
}
.aq515-quality__tagline > .aq515-quality__tagline-line:last-child,
.aq515-quality__tagline > .aq515-quality__tagline-line:last-child span{
color:var(--aq-cyan)!important;
}
@media (max-width:1024px){
.aq515-quality{
grid-template-columns:180px 1fr!important;
gap:28px!important;
}
.aq515-quality__side{max-width:180px!important}
.aq515-quality__icon img{width:156px!important;height:156px!important}
.aq515-quality__tagline{width:168px!important;max-width:168px!important;font-size:17px!important}
}
@media (max-width:767px){
.aq515-quality__side{align-items:center!important;max-width:none!important}
.aq515-quality__tagline{
width:max-content!important;
max-width:100%!important;
font-size:19px!important;
text-align:center!important;
}
}
/* Aqua One v5.61 — fixed line breaks for the "Woda" hero title */
.aq515-hero--water .aq515-hero__copy{
width:min(620px,56%)!important;
}
.aq515-hero--water h1{
font-size:clamp(38px,4.05vw,62px)!important;
line-height:.94!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:inline-block!important;
white-space:nowrap!important;
color:var(--aq-cyan)!important;
}
.aq515-hero--water h1 .aq515-water-title-line--dark{
color:#080b11!important;
}
@media (max-width:1050px) and (min-width:768px){
.aq515-hero--water .aq515-hero__copy{
width:60%!important;
min-width:0!important;
}
.aq515-hero--water h1{
font-size:clamp(34px,4.0vw,46px)!important;
}
}
@media (max-width:767px){
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
min-width:0!important;
}
.aq515-hero--water h1{
font-size:clamp(29px,8vw,38px)!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
white-space:normal!important;
}
}
/* Aqua One v5.62 — turquoise footer link prefixes */
.aq515-footer-menu a::first-letter{
color:#1fb3b6!important;
}
/* Aqua One v5.63 — more vertical space between hero title lines on "Woda" */
.aq515-hero--water h1{
line-height:1!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
margin:0 0 6px!important;
}
.aq515-hero--water h1 .aq515-water-title-line:last-child{
margin-bottom:0!important;
}
@media (max-width:1050px) and (min-width:768px){
.aq515-hero--water h1 .aq515-water-title-line{
margin-bottom:5px!important;
}
}
@media (max-width:767px){
.aq515-hero--water h1 .aq515-water-title-line{
margin-bottom:4px!important;
}
}
/* Aqua One v5.65 — tighten hero title line spacing on "Woda" to match reference */
.aq515-hero--water h1 .aq515-water-title-line{
margin:0 0 1px!important;
}
@media (max-width:1050px) and (min-width:768px){
.aq515-hero--water h1 .aq515-water-title-line{
margin-bottom:1px!important;
}
}
@media (max-width:767px){
.aq515-hero--water h1 .aq515-water-title-line{
margin-bottom:2px!important;
}
}
/* Aqua One v5.66 — actual fix for oversized gaps in the "Woda" hero title.
Previous versions had block-level spans AND
elements, creating blank rows. */
.aq515-hero--water h1 br{
display:none!important;
}
.aq515-hero--water h1{
line-height:.95!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
margin:0 0 2px!important;
line-height:.95!important;
}
.aq515-hero--water h1 .aq515-water-title-line:last-child{
margin-bottom:0!important;
}
/* Aqua One v5.67 — pull the right middle connector line closer to the cartons */
@media (min-width:981px){
.aq515-brand-story__labels::after{
right:8.5%!important;
width:14.4%!important;
}
}
@media (min-width:901px) and (max-width:1180px){
.aq515-brand-story__labels::after{
right:7.8%!important;
width:15.2%!important;
}
}
/* ==========================================================
Aqua One v5.69 — visible hamburger menu at <= 1050px
v5.43 changed .menu-toggle to flex; without an explicit width the
empty span flex-items collapsed to 0px, so the button existed but
its three lines were invisible.
========================================================== */
@media (max-width:1050px){
.aq515-header .menu-toggle{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:42px!important;
height:42px!important;
padding:7px!important;
margin:0!important;
background:transparent!important;
border:0!important;
cursor:pointer!important;
position:relative!important;
z-index:140!important;
}
.aq515-header .menu-toggle span{
display:block!important;
flex:0 0 auto!important;
width:25px!important;
height:2px!important;
margin:3px 0!important;
padding:0!important;
background:#14233a!important;
border-radius:2px!important;
opacity:1!important;
}
.aq515-nav.open,
.main-nav.aq515-nav.open{
display:block!important;
}
}
/* Aqua One v5.70 — homepage brand-story uses static right-side artwork from client screenshot */
.aq515-brand-story--static-art{
background:none!important;
background-color:#f7f7f7!important;
}
.aq515-brand-story--static-art .aq515-brand-story__inner::before,
.aq515-brand-story--static-art .aq515-brand-story__inner::after,
.aq515-brand-story--static-art .aq515-brand-story__labels{
display:none!important;
content:none!important;
}
.aq515-brand-story--static-art .aq515-brand-story__art{
position:relative;
z-index:1;
}
.aq515-brand-story--static-art .aq515-brand-story__art img{
display:block;
width:100%;
height:auto;
}
@media (min-width:901px){
.aq515-brand-story--static-art{
height:auto!important;
min-height:0!important;
}
.aq515-brand-story--static-art .aq515-brand-story__inner{
min-height:0!important;
height:auto!important;
display:flex!important;
align-items:center!important;
gap:18px!important;
padding:0!important;
}
.aq515-brand-story--static-art .aq515-brand-story__copy{
position:relative!important;
z-index:3!important;
left:auto!important;
top:auto!important;
transform:none!important;
width:31.5%!important;
flex:0 0 31.5%!important;
padding:0!important;
}
.aq515-brand-story--static-art .aq515-brand-story__art{
flex:0 0 68.5%!important;
width:68.5%!important;
margin-left:auto!important;
}
}
@media (max-width:900px){
.aq515-brand-story--static-art{
min-height:0!important;
background:none!important;
background-color:#f7f7f7!important;
}
.aq515-brand-story--static-art .aq515-brand-story__inner{
min-height:0!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:18px!important;
}
.aq515-brand-story--static-art .aq515-brand-story__copy{
width:100%!important;
max-width:none!important;
position:relative!important;
left:auto!important;
top:auto!important;
transform:none!important;
padding:24px 0 0!important;
background:none!important;
}
.aq515-brand-story--static-art .aq515-brand-story__art{
width:100%!important;
}
}
/* ==========================================================
Aqua One v5.72 — Polityka prywatności / Polityka cookies
Finalne dokumenty klienta są zwykłymi stronami WordPressa,
więc ich treść pozostaje później łatwo edytowalna w kokpicie.
========================================================== */
.aq-policy-page{
background:#f7f8f8;
color:#17202b;
}
.aq-policy-hero{
padding:54px 0 38px;
background:linear-gradient(180deg,#edf6f8 0%,#f7f8f8 100%);
border-bottom:1px solid #d9e3e6;
}
.aq-policy-kicker{
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif;
font-weight:600;
font-size:15px;
letter-spacing:.08em;
color:#139da6;
margin-bottom:8px;
}
.aq-policy-hero h1{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:800;
font-size:clamp(36px,4.2vw,58px);
line-height:1;
letter-spacing:-.04em;
text-transform:uppercase;
margin:0;
color:#101722;
}
.aq-policy-section{
padding:42px 0 68px;
}
.aq-policy-content{
max-width:920px;
margin:0 auto;
background:#fff;
border:1px solid #dce4e7;
border-radius:12px;
padding:clamp(26px,4vw,52px);
box-shadow:0 12px 30px rgba(20,42,72,.05);
}
.aq-policy-content .aq-policy-meta{
display:inline-block;
padding:10px 14px;
margin:0 0 26px;
border-radius:7px;
background:#eaf5f6;
color:#23505b;
font-family:'Aqua Rubik',Arial,sans-serif;
font-size:14px;
line-height:1.45;
font-weight:600;
}
.aq-policy-content h2{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:700;
font-size:clamp(22px,2.2vw,28px);
line-height:1.18;
letter-spacing:-.02em;
color:#111923;
margin:40px 0 14px;
padding-top:5px;
}
.aq-policy-content h2:first-of-type{
margin-top:28px;
}
.aq-policy-content h3{
font-family:'Aqua Rubik',Arial,sans-serif;
font-weight:700;
font-size:19px;
line-height:1.25;
color:#107f91;
margin:24px 0 9px;
}
.aq-policy-content p,
.aq-policy-content li{
font-family:'Aqua Rubik',Arial,sans-serif;
font-size:15.5px;
line-height:1.62;
color:#28323d;
}
.aq-policy-content p{
margin:0 0 15px;
}
.aq-policy-content ul{
margin:8px 0 20px;
padding:0;
list-style:none;
}
.aq-policy-content li{
position:relative;
padding-left:22px;
margin:5px 0;
}
.aq-policy-content li::before{
content:'•';
position:absolute;
left:3px;
top:0;
color:#18a7af;
font-weight:800;
}
.aq-policy-content a{
color:#0879b6;
text-decoration:underline;
text-underline-offset:2px;
}
.aq-policy-content a:hover{
color:#0aa4aa;
}
.aq-policy-cookie-settings{
margin-top:38px;
padding-top:24px;
border-top:1px solid #dfe5e8;
}
.aq-policy-cookie-settings button{
min-height:44px;
padding:10px 18px;
border:1px solid #128fa0;
border-radius:6px;
background:#fff;
color:#0d7481;
font-family:'Aqua Saira','Arial Narrow',Arial,sans-serif;
font-weight:600;
font-size:14px;
cursor:pointer;
}
.aq-policy-cookie-settings button:hover{
background:#eaf6f7;
}
@media (max-width:767px){
.aq-policy-hero{padding:38px 0 28px}
.aq-policy-section{padding:26px 0 44px}
.aq-policy-content{border-radius:9px;padding:22px 18px}
.aq-policy-content h2{margin-top:32px;font-size:22px}
.aq-policy-content h3{font-size:18px}
.aq-policy-content p,.aq-policy-content li{font-size:14.5px;line-height:1.58}
}
/* ==========================================================
Aqua One v5.74 — zbiorcze korekty po przeglądzie klienta
desktop / responsive / mobile
========================================================== */
/* Header: cięższe menu i chevron po prawej stronie etykiety. */
@media (min-width:1051px){
.aq515-nav .aqua-menu>li>a{
font-weight:600!important;
}
.aq515-nav .aqua-menu>li.menu-item-has-children>a{
position:relative!important;
padding-right:14px!important;
}
.aq515-nav .aqua-menu>li.menu-item-has-children>a::after{
display:block!important;
content:""!important;
left:auto!important;
right:1px!important;
top:50%!important;
bottom:auto!important;
width:5px!important;
height:5px!important;
transform:translateY(-65%) rotate(45deg)!important;
}
}
/* HOME — subtelna korekta hierarchii HERO bez zmiany kompozycji. */
@media (min-width:1051px){
.aq515-hero--home .aq515-eyebrow{
font-size:clamp(25px,2.45vw,30px)!important;
}
.aq515-hero--home h1{
font-size:clamp(47px,4.7vw,54px)!important;
}
.aq515-hero--home .aq515-btn{
min-height:42px!important;
padding:9px 17px!important;
}
.aq515-choice-card a{
font-size:15px!important;
}
}
/* Lepsze kadrowanie kafelków zdjęciowych. */
.aq515-home-use--1 img{object-position:50% 56%!important}
.aq515-home-use--2 img{object-position:50% 44%!important}
.aq515-home-use--3 img{object-position:50% 43%!important}
.aq515-home-use--4 img{object-position:52% 47%!important}
.aq515-home-use--5 img{object-position:50% 48%!important}
.aq515-home-use--6 img{object-position:50% 55%!important}
.aq515-home-use--7 img{object-position:48% 46%!important}
.aq515-home-use--8 img{object-position:50% 49%!important}
.aq515-campaign-use--1 img{object-position:50% 34%!important}
.aq515-campaign-use--2 img{object-position:50% 42%!important}
.aq515-campaign-use--3 img{object-position:50% 43%!important}
.aq515-campaign-use--4 img{object-position:50% 54%!important}
.aq515-campaign-use--5 img{object-position:50% 46%!important}
.aq515-campaign-use--6 img{object-position:50% 49%!important}
.aq515-retail-use--5 img{object-position:50% 38%!important}
/* Proces z ikonami: ikona jest pierwszoplanowa, numer pomocniczy. */
.aq515-process--icon-priority .aq515-process__no{
width:36px!important;
height:36px!important;
font-size:15px!important;
margin-bottom:6px!important;
}
.aq515-process--icon-priority .aq515-process__step>img{
width:88px!important;
height:76px!important;
margin-bottom:8px!important;
object-fit:contain!important;
}
/* Woda / Opakowanie — CTA na wspólnej linii na desktopie. */
@media (min-width:901px){
.aq522-duo .aq522-duo__copy{
align-self:stretch!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
height:100%!important;
}
.aq522-duo .aq522-duo__copy a{
margin-top:auto!important;
align-self:flex-start!important;
}
}
/* Karuzela personalizacji — bez zewnętrznych bibliotek. */
.aq515-carousel{
position:relative;
margin-top:26px;
padding:0 44px;
}
.aq515-carousel__viewport{
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
overscroll-behavior-inline:contain;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.aq515-carousel__viewport::-webkit-scrollbar{display:none}
.aq515-carousel__track{
display:flex;
gap:16px;
}
.aq515-carousel__slide{
flex:0 0 calc((100% - 48px)/4);
min-width:0;
height:250px;
scroll-snap-align:start;
display:grid;
place-items:center;
padding:14px;
border:1px solid #e0e7eb;
border-radius:10px;
background:#fff;
text-decoration:none!important;
transition:transform .22s ease,box-shadow .22s ease;
}
.aq515-carousel__slide:hover{
transform:translateY(-4px);
box-shadow:var(--aq-shadow);
}
.aq515-carousel__slide img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}
.aq515-carousel__button{
position:absolute;
z-index:3;
top:50%;
transform:translateY(-50%);
width:34px;
height:34px;
border:1px solid #9fb4bf;
border-radius:50%;
display:grid;
place-items:center;
padding:0;
background:rgba(255,255,255,.96);
color:#157caa;
font:500 28px/1 Arial,sans-serif;
cursor:pointer;
box-shadow:0 4px 14px rgba(22,57,76,.08);
transition:transform .18s ease,box-shadow .18s ease;
}
.aq515-carousel__button:hover{box-shadow:0 6px 18px rgba(22,57,76,.15)}
.aq515-carousel__button--prev{left:0}
.aq515-carousel__button--next{right:0}
/* FAQ — dwie niezależne kolumny. */
.aq515-faq-grid{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
align-items:start!important;
gap:18px!important;
}
.aq515-faq-col{
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
}
.aq515-faq-item{align-self:stretch}
/* Formularz — typografia, wymagany select i wysokość wiadomości. */
.aq515-contact input,
.aq515-contact select,
.aq515-contact textarea,
.aq515-contact input::placeholder,
.aq515-contact textarea::placeholder{
font-family:'Aqua Rubik',Arial,sans-serif!important;
font-size:14px!important;
font-weight:400!important;
opacity:1!important;
}
.aq515-contact select{font-weight:400!important}
.aq515-contact .aq42-form-required{
font-size:12px!important;
line-height:1.25!important;
}
@media (min-width:768px){
.aq515-contact textarea{height:88px!important;min-height:88px!important}
}
/* Woda z Twoim logo — desktopowe ustawienie lewego bloku diagramu. */
@media (min-width:1025px){
.aq515-personal .aq515-personal__intro{
transform:translate(18px,14px)!important;
}
}
/* Dla sieci sprzedaży — okręgi według wytycznych. */
.aq515-process--retail .aq515-process__circle--retail{
border:0!important;
outline:0!important;
}
.aq515-process--retail .aq515-process__no{
background:#fff!important;
border:1px solid #d7dde1!important;
box-shadow:0 3px 9px rgba(45,58,68,.16)!important;
}
/* Nasze opakowanie: tło sekcji 3 nigdy się nie powtarza. */
.aq515-pack-light{
background-repeat:no-repeat!important;
}
/* Galeria — wspólna rama obrazu daje spójniejszą skalę wizualizacji. */
.aq515-gallery-item{
overflow:hidden;
}
.aq515-gallery-item img{
width:100%!important;
max-width:100%!important;
}
/* ==========================================================
SZEROKOŚCI POŚREDNIE: 1050–621 px
========================================================== */
@media (min-width:768px) and (max-width:1050px){
/* Formularz pozostaje we własnej sekcji i odsłania kartonik. */
.aq515-contact,
.aq515-contact--ratio-2400x785{
height:auto!important;
min-height:0!important;
padding:42px 0 48px!important;
background-size:auto 100%!important;
background-position:right center!important;
background-repeat:no-repeat!important;
background-color:#eff7fb!important;
overflow:hidden!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
min-height:0!important;
height:auto!important;
align-items:center!important;
}
.aq515-contact__form{
width:64%!important;
max-width:690px!important;
padding:0!important;
margin:0!important;
}
.aq515-contact .aqua-form{max-width:none!important}
/* Stopka: stabilny, równy układ 2 × 2 bez sztucznego pustego rzędu. */
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:30px 48px!important;
}
.aq515-footer-brand{grid-column:auto!important}
/* Diagram personalizacji: jedna kolumna zamiast wymuszonych 1000+ px. */
.aq515-personal .aq515-personal__inner.container,
.aq515-personal .aq515-personal__inner{
width:min(100% - 40px,900px)!important;
max-width:900px!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:22px!important;
overflow:hidden!important;
}
.aq515-personal .aq515-personal__intro{
max-width:520px!important;
transform:none!important;
}
.aq515-personal .aq515-personal__art--static,
.aq515-personal .aq515-personal__static{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
/* Przy 2×2 w procesie wody środkowa strzałka nie sugeruje złego kierunku. */
.aq515-process--icons .aq515-process__step:nth-child(2) .aq515-process__arrow{
display:none!important;
}
}
@media (min-width:621px) and (max-width:767px){
/* Formularz pośredni: jedna kolumna, ale nie pełna szerokość tła. */
.aq515-contact,
.aq515-contact--ratio-2400x785{
height:auto!important;
min-height:0!important;
padding:34px 0 46px!important;
background-size:auto 100%!important;
background-position:73% center!important;
background-repeat:no-repeat!important;
background-color:#eff7fb!important;
overflow:hidden!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
min-height:0!important;
height:auto!important;
align-items:flex-start!important;
}
.aq515-contact__form{
width:72%!important;
max-width:540px!important;
padding:0!important;
}
.aq515-contact .aq42-form-grid-visual{grid-template-columns:1fr!important}
.aq515-contact .aq42-field--message{grid-column:auto!important;grid-row:auto!important}
.aq515-contact .aq42-form-actions{grid-template-columns:1fr!important}
.aq515-contact textarea{height:92px!important}
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:28px 34px!important;
}
.aq515-footer-brand{grid-column:auto!important}
/* Strona główna: dodatkowy oddech pod nagłówkiem oferty. */
.aq515-offer .aq515-title{margin-bottom:42px!important}
/* Region: wcześniej przechodzimy na logiczniejszy wariant pionowy. */
.aq515-region{
min-height:620px!important;
aspect-ratio:auto!important;
background-size:auto 44%!important;
background-position:62% bottom!important;
background-repeat:no-repeat!important;
background-color:#f4f7f8!important;
}
.aq515-region__inner{
position:relative!important;
inset:auto!important;
height:auto!important;
min-height:620px!important;
padding:32px 18px 230px!important;
}
.aq515-region .aq515-title{
position:relative!important;
inset:auto!important;
white-space:normal!important;
margin-bottom:24px!important;
}
.aq515-region__benefits{
position:relative!important;
inset:auto!important;
width:100%!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:18px!important;
background:rgba(255,255,255,.86)!important;
padding:14px!important;
border-radius:10px!important;
}
.aq515-region__actions{
position:relative!important;
inset:auto!important;
width:100%!important;
margin-top:18px!important;
}
/* Hero sieci / dystrybutor / woda — bez wchodzenia pod header. */
.aq515-hero--retail,
.aq515-hero--distributor{
min-height:560px!important;
}
.aq515-hero--retail .aq515-hero__inner,
.aq515-hero--distributor .aq515-hero__inner{
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy,
.aq515-hero--distributor .aq515-hero__copy{
width:72%!important;
min-width:0!important;
padding-top:54px!important;
}
.aq515-hero--distributor{min-height:620px!important}
.aq515-hero--water{
min-height:625px!important;
background-size:auto 48%!important;
background-position:64% bottom!important;
}
.aq515-hero--water .aq515-hero__inner{align-items:flex-start!important}
.aq515-hero--water .aq515-hero__copy{
width:74%!important;
min-width:0!important;
padding-top:34px!important;
}
}
/* ==========================================================
MOBILE: 620 px i mniej
========================================================== */
@media (max-width:620px){
/* Header — równy margines po obu stronach. */
.aq515-header-inner,
.aq-ref-header-inner{
width:calc(100% - 24px)!important;
margin-inline:auto!important;
}
.menu-toggle{
margin-left:auto!important;
margin-right:0!important;
}
/* Mniej „mleczna” maska na hero: tekst pozostaje czytelny, grafika odzyskuje detal. */
.aq515-hero::before{
background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.96) 42%,rgba(255,255,255,.18) 59%,rgba(255,255,255,0) 72%)!important;
}
/* HOME hero */
.aq515-hero--home .aq515-hero__copy{
padding-top:46px!important;
}
.aq515-hero--home h1{
font-size:35px!important;
}
.aq515-hero--home .aq515-btn{
min-height:39px!important;
padding:8px 11px!important;
font-size:13px!important;
}
.aq515-hero--home{
background-position:67% bottom!important;
}
/* Nagłówek oferty: trzy logiczne wiersze + większy odstęp od ikon. */
.aq515-offer .aq515-title{
max-width:285px!important;
margin-left:auto!important;
margin-right:auto!important;
margin-bottom:46px!important;
font-size:30px!important;
}
.aq515-offer .aq515-title span{display:block!important}
/* Proces: mniejszy numer, większa ikona, zwarty blok. */
.aq515-process--icon-priority .aq515-process__no{
width:32px!important;
height:32px!important;
font-size:14px!important;
margin-bottom:4px!important;
}
.aq515-process--icon-priority .aq515-process__step>img{
width:78px!important;
height:68px!important;
margin-bottom:7px!important;
}
/* Woda/Opakowanie — więcej szczegółu w zdjęciach. */
.aq522-duo__art--water{
filter:contrast(1.08) saturate(1.05) brightness(.98)!important;
background-position:center 48%!important;
}
.aq522-duo__copy--pack{
background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.74) 54%,rgba(255,255,255,0) 75%)!important;
}
.aq522-duo__card--pack{
background-position:64% bottom!important;
}
/* Karuzela: natywny swipe, widoczny fragment następnego slajdu. */
.aq515-carousel{
margin-top:22px;
padding:0 30px;
}
.aq515-carousel__track{gap:12px}
.aq515-carousel__slide{
flex-basis:78%;
height:235px;
padding:10px;
}
.aq515-carousel__button{
width:30px;
height:30px;
font-size:24px;
}
/* Region — czytelniejszy uścisk dłoni. */
.aq515-region{
min-height:650px!important;
aspect-ratio:auto!important;
background-size:auto 44%!important;
background-position:58% bottom!important;
background-repeat:no-repeat!important;
background-color:#f4f7f8!important;
}
.aq515-region__inner{
position:relative!important;
inset:auto!important;
min-height:650px!important;
height:auto!important;
padding:28px 18px 230px!important;
}
.aq515-region .aq515-title{
position:relative!important;
inset:auto!important;
white-space:normal!important;
margin-bottom:20px!important;
}
.aq515-region__benefits{
position:relative!important;
inset:auto!important;
width:100%!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:14px!important;
background:rgba(255,255,255,.87)!important;
padding:12px!important;
border-radius:10px!important;
}
.aq515-region__actions{
position:relative!important;
inset:auto!important;
width:100%!important;
margin-top:16px!important;
}
/* FAQ nadal jedna kolumna. */
.aq515-faq-grid{
grid-template-columns:1fr!important;
gap:10px!important;
}
/* HERO — konkretne kadry dla podstron. */
.aq515-hero--logo{background-position:72% bottom!important}
.aq515-hero--campaign{background-position:66% bottom!important}
.aq515-hero--retail{background-position:70% bottom!important}
.aq515-hero--distributor{background-position:61% bottom!important}
.aq515-hero--water{background-position:68% bottom!important}
.aq515-hero--pack{background-position:64% bottom!important}
/* Kampanie: CTA w żądanej kolejności. */
.aq515-buttons--campaign{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
.aq515-buttons--campaign .aq515-cta--possibilities{order:1}
.aq515-buttons--campaign .aq515-cta--plan{order:2}
/* Sieci: CTA w żądanej kolejności i więcej oddechu od prawej strony produktu. */
.aq515-buttons--retail{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
.aq515-buttons--retail .aq515-cta--model{order:1}
.aq515-buttons--retail .aq515-cta--contact{order:2}
.aq515-hero--retail .aq515-hero__copy{
padding-top:48px!important;
}
/* Mobile hero blok lekko niżej, ale z miejscem nad kartonikiem. */
.aq515-hero--campaign .aq515-hero__copy,
.aq515-hero--retail .aq515-hero__copy,
.aq515-hero--distributor .aq515-hero__copy,
.aq515-hero--pack .aq515-hero__copy{
padding-top:44px!important;
}
.aq515-hero--campaign,
.aq515-hero--retail,
.aq515-hero--distributor,
.aq515-hero--pack{
min-height:625px!important;
}
.aq515-hero--logo,
.aq515-hero--water{
min-height:620px!important;
}
/* Piąty krok centralnie pod siatką 2×2. */
.aq515-process--campaign,
.aq515-process--dist{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.aq515-process--campaign .aq515-process__step:nth-child(5),
.aq515-process--dist .aq515-process__step:nth-child(5){
grid-column:1/-1!important;
width:50%!important;
justify-self:center!important;
}
/* Woda: sekcja jakości zawsze w jednej kolumnie i bez overflow. */
.aq515-quality-wrap{overflow:hidden!important}
.aq515-quality{
width:100%!important;
max-width:100%!important;
min-width:0!important;
grid-template-columns:minmax(0,1fr)!important;
gap:20px!important;
}
.aq515-quality__side,
.aq515-quality__text{
width:100%!important;
max-width:100%!important;
min-width:0!important;
}
.aq515-quality__side{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
}
.aq515-quality__tagline{
width:auto!important;
max-width:100%!important;
font-size:18px!important;
}
/* Opakowanie: hero i konstrukcja bardziej zwarte. */
.aq515-hero--pack{
min-height:570px!important;
background-size:auto 54%!important;
}
.aq515-pack-construction{gap:8px!important}
.aq515-pack-construction__visual{
margin-top:-14px!important;
}
.aq515-pack-light{
min-height:0!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
padding:38px 0 44px!important;
}
.aq515-pack-light__grid{gap:22px!important}
/* Galeria: utrzymujemy 2 kolumny nawet na 360–390 px i wyrównujemy skalę. */
.aq515-gallery-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:12px!important;
}
.aq515-gallery-item{
min-height:200px!important;
padding:10px!important;
}
.aq515-gallery-item img{
height:176px!important;
transform:scale(1.04);
}
.aq515-gallery-item--2 img,
.aq515-gallery-item--4 img,
.aq515-gallery-item--5 img,
.aq515-gallery-item--7 img{
transform:scale(1.12);
}
/* Stopka: turkusowy znacznik niezależnie od reguł mobilnych. */
.aq515-footer-menu a::first-letter{color:#1fb3b6!important}
}
@media (max-width:420px){
/* Retail współpraca ma pozostać 2×2 także na małym telefonie. */
.aq515-process--retail{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* v5.74 — doprecyzowania po kontroli wszystkich punktów */
@media (min-width:1051px){
.aq515-hero--logo h1{
font-size:clamp(44px,4.15vw,60px)!important;
}
}
@media (max-width:1050px){
.aq515-nav .aqua-menu>li>a{font-weight:600!important}
}
@media (min-width:768px){
/* 3 rzędy pól po lewej: textarea kończy się dokładnie na linii telefonu. */
.aq515-contact textarea{height:128px!important;min-height:128px!important}
}
@media (min-width:621px) and (max-width:767px){
.aq515-contact textarea{height:92px!important;min-height:92px!important}
}
@media (max-width:620px){
.aq515-uses .aq515-photo-grid--8,
.aq515-campaign-photo-grid,
.aq515-retail-photo-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.aq515-process--icon-priority,
.aq515-process--icons{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.aq515-pack-comfort .aq515-feature-grid--4{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
}
}
/* ==========================================================
Aqua One v5.75 — formularz: wyrównanie pola wiadomości
i bezpieczna wysokość sekcji na breakpointach pośrednich.
========================================================== */
/* Na układzie 2-kolumnowym textarea zajmuje dokładnie wysokość
trzech lewych pól (Firma + E-mail + Telefon) wraz z przerwami. */
@media (min-width:768px){
.aq515-contact .aq42-field--message{
align-self:stretch!important;
height:100%!important;
display:flex!important;
}
.aq515-contact .aq42-field--message textarea{
flex:1 1 auto!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
box-sizing:border-box!important;
}
}
/* Zakres, w którym header pracuje już jako hamburger / tablet.
Sekcja nie ma sztywnej wysokości — jej wysokość wynika z formularza. */
@media (min-width:768px) and (max-width:1050px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
padding:42px 0 54px!important;
overflow:hidden!important;
background-size:auto 100%!important;
background-position:right center!important;
background-repeat:no-repeat!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
height:auto!important;
min-height:0!important;
align-items:center!important;
}
.aq515-contact__form{
width:min(66%,690px)!important;
max-width:690px!important;
padding:0!important;
margin:0!important;
}
}
/* Węższy tablet: formularz przechodzi w jedną kolumnę, ale nadal
zostawia prawą część tła z kartonikiem możliwie odsłoniętą. */
@media (min-width:621px) and (max-width:767px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
padding:34px 0 54px!important;
overflow:hidden!important;
background-size:auto 100%!important;
background-position:78% center!important;
background-repeat:no-repeat!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
height:auto!important;
min-height:0!important;
align-items:flex-start!important;
}
.aq515-contact__form{
width:min(74%,540px)!important;
max-width:540px!important;
padding:0!important;
margin:0!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-columns:1fr!important;
grid-template-areas:'name' 'type' 'company' 'email' 'phone' 'message'!important;
}
.aq515-contact .aq42-field--message{
grid-column:auto!important;
grid-row:auto!important;
height:auto!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
height:104px!important;
min-height:104px!important;
}
.aq515-contact .aq42-form-actions{grid-template-columns:1fr!important}
}
/* Telefon / 620 px i mniej: cały formularz pozostaje nad stopką.
Dodatkowy obszar pod formularzem eksponuje kartonik zamiast
chować go pod panelem i jednocześnie daje wizualny oddech. */
@media (max-width:620px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
padding:32px 0 188px!important;
overflow:hidden!important;
background-size:auto 32%!important;
background-position:right bottom!important;
background-repeat:no-repeat!important;
background-color:#eff7fb!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
height:auto!important;
min-height:0!important;
align-items:flex-start!important;
}
.aq515-contact__form{
width:100%!important;
max-width:none!important;
padding:0!important;
margin:0!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-columns:1fr!important;
grid-template-areas:'name' 'type' 'company' 'email' 'phone' 'message'!important;
}
.aq515-contact .aq42-field--message{
grid-column:auto!important;
grid-row:auto!important;
height:auto!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
height:104px!important;
min-height:104px!important;
}
.aq515-contact .aq42-form-actions{grid-template-columns:1fr!important}
}
@media (max-width:420px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
padding-bottom:168px!important;
background-size:auto 28%!important;
}
}
/* Aqua One v5.76 — Woda / Opakowanie: oba CTA na jednej linii */
@media (min-width:901px){
.aq522-duo__card--pack .aq522-duo__copy a{
transform:translateY(16px)!important;
}
.aq522-duo__card--pack .aq522-duo__copy a:hover span{
transform:translateX(3px)!important;
}
}
/* ==========================================================
Aqua One v5.77 — dokładne wyrównanie dolnej krawędzi
Wiadomość ↔ Telefon w dwukolumnowym formularzu.
========================================================== */
@media (min-width:768px){
.aq515-contact .aq42-form-grid-visual{
/* Wszystkie standardowe pola mają 34 px wysokości; jawne tory
eliminują wpływ intrinsic height textarea na wysokość gridu. */
grid-template-rows:repeat(4,34px)!important;
grid-auto-rows:34px!important;
}
.aq515-contact .aq42-field--message{
grid-column:2!important;
grid-row:2 / 5!important;
height:auto!important;
min-height:0!important;
align-self:stretch!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
box-sizing:border-box!important;
resize:none!important;
}
}
/* ==========================================================
Aqua One v5.78 — exact vertical alignment of Message field.
Left input controls inherit 6px top margin from the base form CSS.
The message textarea must use the same offset while keeping the
full spanning height, so its bottom edge reaches the Phone field.
========================================================== */
@media (min-width:768px){
.aq515-contact .aq42-field--message textarea{
margin-top:6px!important;
margin-right:0!important;
margin-bottom:0!important;
margin-left:0!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
box-sizing:border-box!important;
resize:none!important;
}
}
/* ==========================================================
Aqua One v5.79 — final fine tuning of the contact form.
Slightly extend Message downward and lower the consent block.
========================================================== */
@media (min-width:768px){
.aq515-contact .aq42-field--message textarea{
height:calc(100% + 4px)!important;
}
.aq515-contact .aq42-form-consent{
transform:translateY(4px)!important;
}
}
/* ==========================================================
Aqua One v5.80 — 2 px correction of Message bottom edge.
========================================================== */
@media (min-width:768px){
.aq515-contact .aq42-field--message textarea{
height:calc(100% + 2px)!important;
}
}
/* ==========================================================
Aqua One v5.81 — align feature 4 in the packaging comfort section.
Keep icon, title and description rows on the same levels.
========================================================== */
.aq515-pack-comfort .aq515-feature-grid--4{
align-items:start!important;
}
.aq515-pack-comfort .aq515-feature{
display:grid!important;
grid-template-rows:86px 48px auto!important;
align-items:start!important;
height:100%!important;
}
.aq515-pack-comfort .aq515-feature > img{
align-self:end!important;
justify-self:center!important;
margin:0 auto 12px!important;
}
.aq515-pack-comfort .aq515-feature h3{
min-height:48px!important;
display:flex!important;
align-items:flex-start!important;
justify-content:center!important;
text-align:center!important;
margin:0 0 10px!important;
}
.aq515-pack-comfort .aq515-feature p{
margin:0!important;
}
@media (max-width:767px){
.aq515-pack-comfort .aq515-feature{
grid-template-rows:78px 42px auto!important;
}
.aq515-pack-comfort .aq515-feature h3{
min-height:42px!important;
}
}
/* ==========================================================
Aqua One v5.82 — home / distributor section at 621 px and
intermediate widths. Switch earlier to a more vertical layout
so the icon block stays inside the section and keeps distance
from the CTA area/background photo.
========================================================== */
@media (max-width:700px){
.aq515-region{
min-height:640px!important;
background-position:76% bottom!important;
background-size:auto 40%!important;
}
.aq515-region__inner{
height:640px!important;
}
.aq515-region .aq515-title{
top:24px!important;
left:18px!important;
right:18px!important;
font-size:27px!important;
white-space:normal!important;
}
.aq515-region__benefits{
left:18px!important;
right:18px!important;
top:105px!important;
width:auto!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:16px!important;
row-gap:18px!important;
background:rgba(255,255,255,.86)!important;
padding:12px!important;
border-radius:10px!important;
}
.aq515-region__benefits img{
height:44px!important;
margin:0 auto 8px!important;
}
.aq515-region__benefits b{
font-size:14px!important;
line-height:1.12!important;
}
.aq515-region__actions{
left:18px!important;
right:18px!important;
bottom:18px!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
.aq515-region__actions .aq515-btn{
width:100%!important;
justify-content:center!important;
}
}
/* ==========================================================
Aqua One v5.83 — distributor hero, widths 900–621 px.
Keep the whole heading below the header and ensure both CTAs
remain fully visible inside the hero section.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
min-height:700px!important;
background-position:66% bottom!important;
background-size:auto 100%!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
align-items:flex-start!important;
min-height:700px!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(58%,470px)!important;
min-width:0!important;
max-width:470px!important;
padding-top:72px!important;
padding-bottom:28px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(40px,5vw,52px)!important;
line-height:.97!important;
margin:0 0 16px!important;
}
.aq515-hero--distributor p{
font-size:15px!important;
line-height:1.26!important;
max-width:430px!important;
margin:0 0 18px!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:10px!important;
width:min(100%,330px)!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
justify-content:center!important;
min-height:42px!important;
}
}
@media (min-width:621px) and (max-width:760px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
min-height:740px!important;
background-position:72% bottom!important;
background-size:auto 86%!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:740px!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(62%,390px)!important;
max-width:390px!important;
padding-top:76px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(36px,4.8vw,46px)!important;
}
.aq515-hero--distributor p{
max-width:360px!important;
}
}
/* ==========================================================
Aqua One v5.84 — „Nasza woda” HERO at intermediate widths.
When the header changes to hamburger, switch the hero to a
stable vertical composition: full copy at top + carton image
visible at the bottom. This prevents title clipping and the
background image disappearing while the viewport is resized.
========================================================== */
@media (min-width:621px) and (max-width:1050px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
aspect-ratio:auto!important;
height:auto!important;
min-height:650px!important;
background-size:auto 52%!important;
background-position:right bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
background:linear-gradient(180deg,
rgba(255,255,255,.99) 0%,
rgba(255,255,255,.98) 42%,
rgba(255,255,255,.82) 53%,
rgba(255,255,255,.08) 72%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--water .aq515-hero__inner{
height:auto!important;
min-height:650px!important;
align-items:flex-start!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:650px!important;
min-width:0!important;
padding:38px 0 300px!important;
margin:0!important;
overflow:visible!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:650px!important;
font-size:clamp(34px,4.2vw,44px)!important;
line-height:.95!important;
overflow:visible!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
white-space:nowrap!important;
max-width:100%!important;
margin-bottom:2px!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:600px!important;
font-size:15px!important;
line-height:1.28!important;
margin-bottom:0!important;
}
}
@media (min-width:621px) and (max-width:700px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:680px!important;
background-size:auto 48%!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:680px!important;
}
.aq515-hero--water .aq515-hero__copy{
max-width:100%!important;
padding-top:34px!important;
padding-bottom:315px!important;
}
.aq515-hero--water h1{
max-width:100%!important;
font-size:clamp(31px,5vw,35px)!important;
}
.aq515-hero--water p{
max-width:100%!important;
font-size:14px!important;
}
}
/* ==========================================================
Aqua One v5.85 — „Nasza woda” HERO on narrow mobile widths.
Keep the whole background composition visible at minimum
viewport widths so the carton is not cut off on the right.
========================================================== */
@media (max-width:620px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
aspect-ratio:auto!important;
height:auto!important;
min-height:760px!important;
background-size:contain!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
background:linear-gradient(180deg,
rgba(255,255,255,.99) 0%,
rgba(255,255,255,.97) 43%,
rgba(255,255,255,.78) 57%,
rgba(255,255,255,.14) 74%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:760px!important;
align-items:flex-start!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding:26px 0 360px!important;
margin:0!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:100%!important;
font-size:clamp(28px,8.8vw,34px)!important;
line-height:.95!important;
margin:0 0 14px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
white-space:normal!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
margin-bottom:1px!important;
}
.aq515-hero--water p{
max-width:100%!important;
font-size:14px!important;
line-height:1.28!important;
margin-bottom:0!important;
}
}
@media (max-width:420px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:780px!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:780px!important;
}
.aq515-hero--water .aq515-hero__copy{
padding-bottom:370px!important;
}
}
/* ==========================================================
Aqua One v5.86 — „3. ASEPTYCZNY ROZLEW” at 900–768 px.
When the component switches to a 2×2 layout, arrows should
no longer imply a left-to-right 4-step sequence.
========================================================== */
@media (min-width:768px) and (max-width:900px){
.aq515-process--icons .aq515-process__arrow{
display:none!important;
}
}
/* ==========================================================
Aqua One v5.87 — lower the contact form submit button slightly.
========================================================== */
@media (min-width:768px){
.aq515-contact .aq42-form-actions > button[type=submit],
.aq515-contact .aq42-form-actions > .btn[type=submit],
.aq515-contact .aq42-form-actions > button.btn{
margin-top:8px!important;
}
}
/* ==========================================================
Aqua One v5.88 — "Nasza woda" HERO smoothing.
Fix unstable image behavior while narrowing the viewport:
- remove the large empty gap above the image,
- keep the whole composition visible,
- prevent the image from jumping/disappearing between breakpoints.
========================================================== */
@media (max-width:900px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
aspect-ratio:auto!important;
height:auto!important;
min-height:unset!important;
background-size:100% auto!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
background:linear-gradient(180deg,
rgba(255,255,255,.99) 0%,
rgba(255,255,255,.98) 42%,
rgba(255,255,255,.88) 56%,
rgba(255,255,255,.26) 73%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:unset!important;
height:auto!important;
align-items:flex-start!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
padding:28px 0 clamp(200px, 34vw, 320px)!important;
overflow:visible!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:100%!important;
font-size:clamp(30px, 5.7vw, 42px)!important;
line-height:.96!important;
margin:0 0 14px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
max-width:100%!important;
white-space:normal!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
margin-bottom:1px!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:100%!important;
font-size:clamp(14px, 2.1vw, 15px)!important;
line-height:1.28!important;
margin-bottom:0!important;
}
}
@media (max-width:620px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
background-size:100% auto!important;
}
.aq515-hero--water .aq515-hero__copy{
padding:22px 0 clamp(180px, 52vw, 260px)!important;
}
.aq515-hero--water h1{
font-size:clamp(28px, 8.4vw, 34px)!important;
}
}
@media (max-width:420px){
.aq515-hero--water .aq515-hero__copy{
padding-bottom:190px!important;
}
}
/* ==========================================================
Aqua One v5.89 — mobile image clarity and better framing.
Fixes requested after mobile review:
- reduce the "milky" / over-bright look of key graphics,
- improve clarity in HOME hero + WODA / OPAKOWANIE blocks,
- better expose the handshake photo in the distributor section.
========================================================== */
@media (max-width:620px){
/* HERO graphics: lighter white veil, more visible product/photo detail. */
.aq515-hero--home::before,
.aq515-hero--pack::before,
.aq515-hero--water::before,
.aq515-hero--logo::before,
.aq515-hero--campaign::before,
.aq515-hero--retail::before,
.aq515-hero--distributor::before{
background:linear-gradient(180deg,
rgba(255,255,255,.985) 0%,
rgba(255,255,255,.94) 38%,
rgba(255,255,255,.66) 54%,
rgba(255,255,255,.14) 73%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--home{
background-position:70% bottom!important;
background-size:auto 56%!important;
background-color:#f5fbfd!important;
}
.aq515-hero--pack{
min-height:595px!important;
background-position:62% bottom!important;
background-size:auto 60%!important;
background-color:#f6fafc!important;
}
.aq515-hero--pack .aq515-hero__copy{
padding-top:40px!important;
}
/* HOME — WODA / OPAKOWANIE: less haze, stronger detail. */
.aq522-duo__art--water{
height:196px!important;
background-position:center 50%!important;
background-size:cover!important;
filter:contrast(1.16) saturate(1.08) brightness(.95)!important;
}
.aq522-duo__card--pack{
min-height:418px!important;
background-position:73% bottom!important;
background-size:auto 63%!important;
background-color:#f7f8f4!important;
}
.aq522-duo__copy--pack{
padding-bottom:178px!important;
background:linear-gradient(180deg,
rgba(255,255,255,.90) 0%,
rgba(255,255,255,.70) 47%,
rgba(255,255,255,.18) 72%,
rgba(255,255,255,0) 100%)!important;
}
/* "Rozwijaj Aqua One w swoim regionie" — better show the handshake. */
.aq515-region{
min-height:640px!important;
background-size:cover!important;
background-position:77% bottom!important;
background-color:#f5fafc!important;
}
.aq515-region__inner{
height:640px!important;
}
.aq515-region__benefits{
background:rgba(255,255,255,.88)!important;
}
}
/* ==========================================================
Aqua One v5.90 — footer link markers.
Use a dedicated span instead of ::first-letter so the › marker
is reliably turquoise in OFERTA and O PRODUKCIE on all devices.
========================================================== */
.aq515-footer-menu .aq515-footer-arrow{
color:#1fb3b6!important;
display:inline-block!important;
margin-right:2px!important;
}
/* ==========================================================
Aqua One v5.91 — mobile distributor section.
Put title, benefits and CTA buttons into normal document flow
so the buttons can never overlap the lower icon row.
Keep a dedicated lower photo area for the handshake.
========================================================== */
@media (max-width:620px){
.aq515-region{
aspect-ratio:auto!important;
height:auto!important;
min-height:790px!important;
padding:0!important;
background-size:auto 48%!important;
background-position:78% bottom!important;
background-repeat:no-repeat!important;
background-color:#f5fafc!important;
overflow:hidden!important;
}
.aq515-region__inner{
position:relative!important;
inset:auto!important;
width:min(100% - 28px,560px)!important;
max-width:560px!important;
height:auto!important;
min-height:790px!important;
margin:0 auto!important;
padding:32px 0 300px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
}
.aq515-region .aq515-title{
position:static!important;
inset:auto!important;
width:100%!important;
margin:0 0 24px!important;
padding:0!important;
text-align:center!important;
font-size:27px!important;
line-height:1.02!important;
white-space:normal!important;
}
.aq515-region__benefits{
position:static!important;
inset:auto!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:18px 12px 16px!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:16px!important;
row-gap:24px!important;
background:rgba(255,255,255,.94)!important;
border-radius:12px 12px 0 0!important;
}
.aq515-region__benefits>div{
min-height:86px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:center!important;
}
.aq515-region__benefits img{
height:44px!important;
width:54px!important;
margin:0 auto 9px!important;
}
.aq515-region__benefits b{
font-size:14px!important;
line-height:1.12!important;
}
.aq515-region__actions{
position:static!important;
inset:auto!important;
width:100%!important;
max-width:none!important;
margin:0!important;
padding:8px 12px 14px!important;
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
background:rgba(255,255,255,.94)!important;
border-radius:0 0 12px 12px!important;
}
.aq515-region__actions .aq515-btn{
width:100%!important;
min-height:42px!important;
justify-content:center!important;
margin:0!important;
}
}
@media (max-width:420px){
.aq515-region{
min-height:770px!important;
background-size:auto 46%!important;
background-position:80% bottom!important;
}
.aq515-region__inner{
min-height:770px!important;
padding-bottom:278px!important;
}
.aq515-region__benefits{
row-gap:20px!important;
}
.aq515-region__benefits>div{
min-height:82px!important;
}
}
/* ==========================================================
Aqua One v5.92 — region section for intermediate desktop/tablet widths.
On shrinking desktop windows the CTA buttons should not overlap benefits.
Switch this section to normal flow for 621–900 px as well.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-region{
aspect-ratio:auto!important;
height:auto!important;
min-height:700px!important;
padding:0!important;
background-size:auto 56%!important;
background-position:78% bottom!important;
background-repeat:no-repeat!important;
background-color:#f5fafc!important;
overflow:hidden!important;
}
.aq515-region__inner{
position:relative!important;
inset:auto!important;
width:min(100% - 40px,860px)!important;
max-width:860px!important;
height:auto!important;
min-height:700px!important;
margin:0 auto!important;
padding:28px 0 250px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
}
.aq515-region .aq515-title{
position:static!important;
inset:auto!important;
width:100%!important;
margin:0 0 20px!important;
padding:0!important;
text-align:center!important;
font-size:clamp(28px,4vw,38px)!important;
line-height:1.02!important;
white-space:normal!important;
}
.aq515-region__benefits{
position:static!important;
inset:auto!important;
width:min(100%,620px)!important;
max-width:620px!important;
margin:0 auto!important;
padding:18px 18px 12px!important;
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:18px!important;
row-gap:22px!important;
background:rgba(255,255,255,.92)!important;
border-radius:12px 12px 0 0!important;
}
.aq515-region__benefits>div{
min-height:88px!important;
display:flex!important;
flex-direction:column!important;
justify-content:flex-start!important;
align-items:center!important;
}
.aq515-region__benefits>div:last-child{
grid-column:1 / -1!important;
max-width:50%!important;
margin:0 auto!important;
}
.aq515-region__benefits img{
height:46px!important;
width:56px!important;
margin:0 auto 10px!important;
}
.aq515-region__benefits b{
font-size:14px!important;
line-height:1.14!important;
}
.aq515-region__actions{
position:static!important;
inset:auto!important;
width:min(100%,620px)!important;
max-width:620px!important;
margin:0 auto!important;
padding:10px 18px 18px!important;
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
gap:12px!important;
background:rgba(255,255,255,.92)!important;
border-radius:0 0 12px 12px!important;
}
.aq515-region__actions .aq515-btn{
flex:1 1 260px!important;
min-height:42px!important;
justify-content:center!important;
margin:0!important;
width:auto!important;
}
}
@media (min-width:621px) and (max-width:760px){
.aq515-region{
min-height:720px!important;
background-size:auto 50%!important;
background-position:81% bottom!important;
}
.aq515-region__inner{
min-height:720px!important;
padding-bottom:265px!important;
}
.aq515-region__actions{
display:grid!important;
grid-template-columns:1fr!important;
}
.aq515-region__actions .aq515-btn{
width:100%!important;
}
}
/* ==========================================================
Aqua One v5.93 — tighter mobile spacing in WODA and OPAKOWANIE heroes.
Reduce the excessive empty gap between the text block and the image
while keeping the carton fully visible on narrow screens.
========================================================== */
@media (max-width:620px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:670px!important;
background-size:112% auto!important;
background-position:center bottom!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:670px!important;
}
.aq515-hero--water .aq515-hero__copy{
padding:22px 0 135px!important;
}
.aq515-hero--pack,
.aq515-hero--pack.aq515-hero--ratio-2400x720{
min-height:500px!important;
background-size:auto 72%!important;
background-position:64% bottom!important;
}
.aq515-hero--pack .aq515-hero__copy{
padding:26px 0 150px!important;
}
}
@media (max-width:420px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:640px!important;
background-size:116% auto!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:640px!important;
}
.aq515-hero--water .aq515-hero__copy{
padding-bottom:125px!important;
}
.aq515-hero--pack,
.aq515-hero--pack.aq515-hero--ratio-2400x720{
min-height:485px!important;
background-size:auto 74%!important;
}
.aq515-hero--pack .aq515-hero__copy{
padding-bottom:140px!important;
}
}
/* ==========================================================
Aqua One v6.00 — desktop/intermediate carousel stability.
The personalization carousel now switches to 2 cards earlier,
before the browser becomes narrow enough to visually clip the
next slide at intermediate desktop widths.
========================================================== */
@media (max-width:1180px){
.aq515-carousel{
padding:0 38px!important;
}
.aq515-carousel__track{
gap:14px!important;
}
.aq515-carousel__slide{
flex:0 0 calc((100% - 28px)/3)!important;
height:240px!important;
}
}
@media (max-width:980px){
.aq515-carousel{
padding:0 34px!important;
}
.aq515-carousel__track{
gap:14px!important;
}
.aq515-carousel__slide{
flex:0 0 calc((100% - 14px)/2)!important;
height:232px!important;
}
.aq515-carousel__button{
width:32px!important;
height:32px!important;
font-size:25px!important;
}
}
/* ==========================================================
Aqua One v5.95 — WODA mobile hero: no artificial gap.
On phones the artwork is a real image placed directly after the
copy instead of a background anchored to the bottom of a tall hero.
This makes the spacing deterministic at every narrow viewport width.
========================================================== */
.aq515-water-hero-mobile-art{display:none}
@media (max-width:620px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:0!important;
height:auto!important;
aspect-ratio:auto!important;
background-image:none!important;
background:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
display:none!important;
content:none!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:0!important;
height:auto!important;
display:block!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
padding:24px 0 14px!important;
}
.aq515-water-hero-mobile-art{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
line-height:0!important;
background:#eef6fb!important;
}
.aq515-water-hero-mobile-art img{
display:block!important;
width:100%!important;
max-width:none!important;
height:auto!important;
margin:0!important;
padding:0!important;
}
}
@media (max-width:420px){
.aq515-hero--water .aq515-hero__copy{
padding-bottom:12px!important;
}
}
/* ==========================================================
Aqua One v5.96 — footer chevrons.
Footer markup uses aq42-footer-menu, so target the actual
menu columns explicitly and keep the dedicated span turquoise.
========================================================== */
.aq42-footer-menu .aq515-footer-arrow,
.aq515-footer-menu .aq515-footer-arrow{
color:#1fb3b6!important;
-webkit-text-fill-color:#1fb3b6!important;
display:inline-block!important;
margin-right:2px!important;
}
/* ==========================================================
Aqua One v5.98 — WODA hero: stable transition at hamburger widths.
From 1050 px down, use the same stacked composition as mobile:
copy first, full artwork directly underneath. This removes the
awkward intermediate state with a right-anchored partial image.
========================================================== */
@media (min-width:621px) and (max-width:1050px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
min-height:0!important;
height:auto!important;
aspect-ratio:auto!important;
background-image:none!important;
background:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
display:none!important;
content:none!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:0!important;
height:auto!important;
display:block!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:720px!important;
min-width:0!important;
margin:0!important;
padding:34px 0 20px!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:720px!important;
font-size:clamp(34px,4.6vw,46px)!important;
line-height:.96!important;
margin:0 0 16px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
max-width:100%!important;
white-space:normal!important;
overflow-wrap:normal!important;
word-break:normal!important;
margin-bottom:1px!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:650px!important;
font-size:15px!important;
line-height:1.3!important;
margin:0!important;
}
.aq515-water-hero-mobile-art{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
line-height:0!important;
background:#eef6fb!important;
}
.aq515-water-hero-mobile-art img{
display:block!important;
width:100%!important;
height:auto!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
}
/* ==========================================================
Aqua One v5.99 — „3. ASEPTYCZNY ROZLEW”.
At 901–1050 px the process is still a horizontal 4-step row,
so restore the middle arrow between Mikrofiltracja and Rozlew.
The 768–900 px 2×2 layout keeps arrows hidden as intended.
========================================================== */
@media (min-width:901px) and (max-width:1050px){
.aq515-process--icons .aq515-process__step:nth-child(2) .aq515-process__arrow{
display:block!important;
}
}
/* ==========================================================
Aqua One v6.03 — FAQ: independent columns + equal collapsed rows.
Desktop uses two separate vertical columns. JavaScript equalizes only
the CLOSED question boxes pair-by-pair, so opening an answer never
stretches the item opposite it. On mobile the original 1..N order is
restored in a single column.
========================================================== */
@media (min-width:621px){
.aq515-faq-grid[data-faq-independent]{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
align-items:start!important;
column-gap:18px!important;
row-gap:0!important;
}
.aq515-faq-grid[data-faq-independent] .aq515-faq-col{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
gap:10px!important;
}
.aq515-faq-grid[data-faq-independent] .aq515-faq-item{
width:100%!important;
align-self:stretch!important;
}
}
@media (max-width:620px){
.aq515-faq-grid[data-faq-independent]{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
}
.aq515-faq-grid[data-faq-independent] .aq515-faq-col{
display:contents!important;
}
.aq515-faq-grid[data-faq-independent] .aq515-faq-item{
order:var(--faq-order)!important;
min-height:0!important;
}
}
/* ==========================================================
Aqua One v6.04 — FAQ micro-alignment on "Woda z Twoim logo".
Lift the final "Jak wygląda przygotowanie projektu..." box by 1 px.
========================================================== */
@media (min-width:621px){
.aq515-faq-grid[data-faq-context="logo"] .aq515-faq-item[data-faq-index="7"]{
margin-top:-1px!important;
}
}
/* ==========================================================
Aqua One v6.05 — personalization carousel at intermediate widths.
The 2- and 3-card layouts were too shallow, which made carton
artwork look vertically clipped while resizing the browser.
Give those layouts more vertical room without changing mobile.
========================================================== */
@media (min-width:981px) and (max-width:1180px){
.aq515-carousel__slide{
height:clamp(270px,25vw,290px)!important;
overflow:hidden!important;
}
.aq515-carousel__slide img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
}
}
@media (min-width:621px) and (max-width:980px){
.aq515-carousel__slide{
height:clamp(270px,29vw,290px)!important;
overflow:hidden!important;
}
.aq515-carousel__slide img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
}
}
/* ==========================================================
Aqua One v6.06 — equal FAQ columns on campaign / retail pages.
Closed questions use one stable height in both columns. Opening
an answer still expands only its own column, never the opposite box.
========================================================== */
@media (min-width:621px){
.aq515-faq-grid[data-faq-independent][data-faq-context="campaign"] .aq515-faq-item:not([open]),
.aq515-faq-grid[data-faq-independent][data-faq-context="retail"] .aq515-faq-item:not([open]){
min-height:64px!important;
}
.aq515-faq-grid[data-faq-independent][data-faq-context="campaign"] .aq515-faq-item:not([open]) summary,
.aq515-faq-grid[data-faq-independent][data-faq-context="retail"] .aq515-faq-item:not([open]) summary{
min-height:62px!important;
display:flex!important;
align-items:center!important;
}
}
/* ==========================================================
Aqua One v6.07 — personalization carousel image fit.
At some intermediate desktop widths the carton visuals in the
personalization carousel appeared vertically clipped. Force a
true centered fit for the artwork and give the cards a little
more vertical room in the 2- and 3-card layouts.
========================================================== */
@media (min-width:981px) and (max-width:1280px){
.aq515-carousel__slide{
height:300px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.aq515-carousel__slide img{
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:calc(100% - 2px)!important;
object-fit:contain!important;
object-position:center center!important;
}
}
@media (min-width:621px) and (max-width:980px){
.aq515-carousel__slide{
height:310px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.aq515-carousel__slide img{
width:auto!important;
height:auto!important;
max-width:100%!important;
max-height:calc(100% - 2px)!important;
object-fit:contain!important;
object-position:center center!important;
}
}
/* ==========================================================
Aqua One v6.08 — distributor hero safeguard.
At intermediate widths the background art could "escape" and
the distributor heading block became visually clipped.
Switch this hero to a stable stacked composition when the
header is already in hamburger mode.
========================================================== */
@media (min-width:621px) and (max-width:1050px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
aspect-ratio:auto!important;
height:auto!important;
min-height:720px!important;
background-size:auto 62%!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:720px!important;
height:auto!important;
align-items:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(100%,500px)!important;
max-width:500px!important;
min-width:0!important;
padding-top:56px!important;
padding-bottom:210px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(38px,5vw,50px)!important;
line-height:.96!important;
margin:0 0 16px!important;
}
.aq515-hero--distributor p{
max-width:460px!important;
font-size:15px!important;
line-height:1.26!important;
margin:0 0 18px!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
width:min(100%,340px)!important;
gap:10px!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
justify-content:center!important;
min-height:42px!important;
}
}
@media (min-width:621px) and (max-width:760px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
min-height:740px!important;
background-size:auto 54%!important;
background-position:center bottom!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:740px!important;
}
.aq515-hero--distributor .aq515-hero__copy{
max-width:430px!important;
padding-top:60px!important;
padding-bottom:220px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(34px,4.9vw,44px)!important;
}
.aq515-hero--distributor p{
max-width:390px!important;
}
}
/* ==========================================================
Aqua One v6.09 — ZOSTAŃ DYSTRYBUTOREM, 621–900 px.
Final adjustment according to the client review:
- heading must stay fully below the header,
- both CTAs must remain fully inside the HERO,
- the whole copy block uses a stable vertical position while resizing.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
aspect-ratio:auto!important;
height:auto!important;
min-height:760px!important;
background-size:auto 55%!important;
background-position:70% bottom!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:760px!important;
height:auto!important;
align-items:flex-start!important;
justify-content:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
margin-left:0!important;
margin-right:auto!important;
width:min(56%,470px)!important;
max-width:470px!important;
min-width:0!important;
box-sizing:border-box!important;
padding-top:52px!important;
padding-bottom:255px!important;
}
.aq515-hero--distributor h1{
max-width:100%!important;
font-size:clamp(36px,5vw,48px)!important;
line-height:.96!important;
margin:0 0 15px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:100%!important;
font-size:14px!important;
line-height:1.27!important;
margin:0 0 17px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:9px!important;
width:min(100%,330px)!important;
max-width:330px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-width:0!important;
min-height:42px!important;
box-sizing:border-box!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.15!important;
padding:9px 11px!important;
}
}
@media (min-width:621px) and (max-width:720px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
min-height:790px!important;
background-size:auto 48%!important;
background-position:73% bottom!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:790px!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(62%,390px)!important;
max-width:390px!important;
padding-top:48px!important;
padding-bottom:275px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(33px,5.2vw,39px)!important;
}
}
/* ==========================================================
Aqua One v6.10 — mobile gutter for section 5 on page Woda.
The quality block itself is also the .container element and an
older responsive rule forced it to width:100%, removing the
normal side gutter. Restore a safe mobile margin.
========================================================== */
@media (max-width:620px){
.aq515-quality-wrap > .aq515-quality.container,
.aq515-quality-wrap .container.aq515-quality{
width:calc(100% - 32px)!important;
max-width:calc(100% - 32px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
@media (max-width:390px){
.aq515-quality-wrap > .aq515-quality.container,
.aq515-quality-wrap .container.aq515-quality{
width:calc(100% - 24px)!important;
max-width:calc(100% - 24px)!important;
}
}
/* ==========================================================
Aqua One v6.11 — ZOSTAŃ DYSTRYBUTOREM, 621–900 px.
Tighten the vertical composition and show the complete hero art.
The source image is now fitted by width instead of oversized by
height, so the carton/map are no longer cut off while resizing.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
background-size:100% auto!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:0!important;
height:auto!important;
align-items:flex-start!important;
justify-content:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
margin:0 auto 0 0!important;
width:min(58%,470px)!important;
max-width:470px!important;
min-width:0!important;
box-sizing:border-box!important;
padding-top:38px!important;
/* reserve exactly about the rendered height of the 2400x820 art */
padding-bottom:clamp(212px,34.17vw,308px)!important;
}
.aq515-hero--distributor h1{
max-width:100%!important;
font-size:clamp(34px,5vw,46px)!important;
line-height:.96!important;
margin:0 0 14px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:100%!important;
font-size:14px!important;
line-height:1.26!important;
margin:0 0 16px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:9px!important;
width:min(100%,330px)!important;
max-width:330px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-width:0!important;
min-height:42px!important;
box-sizing:border-box!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.15!important;
padding:9px 11px!important;
}
}
@media (min-width:621px) and (max-width:720px){
.aq515-hero--distributor .aq515-hero__copy{
width:min(64%,400px)!important;
max-width:400px!important;
padding-top:34px!important;
padding-bottom:clamp(212px,34.17vw,246px)!important;
}
.aq515-hero--distributor h1{
font-size:clamp(32px,5.1vw,38px)!important;
}
}
/* ==========================================================
Aqua One v6.12 — ZOSTAŃ DYSTRYBUTOREM, dokładnie 621–900 px.
Korekta wg uwagi klienta: wysokość HERO i pionowe położenie
całego bloku tekstowego + CTA. Nagłówek oraz oba przyciski
zawsze pozostają w całości wewnątrz sekcji.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
aspect-ratio:auto!important;
height:auto!important;
min-height:clamp(610px,68vw,650px)!important;
background-size:100% auto!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:clamp(610px,68vw,650px)!important;
height:auto!important;
align-items:flex-start!important;
justify-content:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:min(61%,470px)!important;
max-width:470px!important;
min-width:0!important;
margin:0 auto 0 0!important;
padding:clamp(38px,5.2vw,50px) 0 24px!important;
box-sizing:border-box!important;
overflow:visible!important;
}
.aq515-hero--distributor h1{
max-width:100%!important;
font-size:clamp(34px,5vw,46px)!important;
line-height:.96!important;
margin:0 0 14px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:100%!important;
font-size:14px!important;
line-height:1.26!important;
margin:0 0 17px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
gap:9px!important;
width:min(100%,340px)!important;
max-width:340px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-width:0!important;
min-height:42px!important;
box-sizing:border-box!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.15!important;
padding:9px 11px!important;
}
}
@media (min-width:621px) and (max-width:700px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor,
.aq515-hero--distributor .aq515-hero__inner{
min-height:620px!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(67%,410px)!important;
max-width:410px!important;
padding-top:40px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(32px,5.1vw,37px)!important;
}
}
/* ==========================================================
Aqua One v6.13 — ZOSTAŃ DYSTRYBUTOREM, 621–900 px.
Stable two-part hero at intermediate widths:
1) full text + both CTAs in normal document flow,
2) full source artwork immediately below, without clipping.
This removes the large empty band that appeared at some widths.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
background-image:none!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:0!important;
height:auto!important;
display:block!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:min(100%,500px)!important;
max-width:500px!important;
min-width:0!important;
margin:0!important;
padding:clamp(30px,4vw,40px) 0 20px!important;
box-sizing:border-box!important;
overflow:visible!important;
}
.aq515-hero--distributor h1{
max-width:100%!important;
font-size:clamp(34px,5vw,46px)!important;
line-height:.96!important;
margin:0 0 14px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:460px!important;
font-size:14px!important;
line-height:1.26!important;
margin:0 0 16px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:min(100%,340px)!important;
max-width:340px!important;
gap:9px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-width:0!important;
min-height:42px!important;
box-sizing:border-box!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.15!important;
padding:9px 11px!important;
}
.aq515-hero--distributor::after{
content:"";
display:block;
width:100%;
aspect-ratio:2400 / 820;
background-image:var(--aq-dist-hero)!important;
background-size:100% 100%!important;
background-position:center center!important;
background-repeat:no-repeat!important;
}
}
@media (min-width:621px) and (max-width:700px){
.aq515-hero--distributor .aq515-hero__copy{
width:min(100%,430px)!important;
max-width:430px!important;
padding-top:28px!important;
padding-bottom:18px!important;
}
.aq515-hero--distributor h1{
font-size:clamp(32px,5.1vw,38px)!important;
}
}
/* ==========================================================
Aqua One v6.14 — ZOSTAŃ DYSTRYBUTOREM, 621–900 px.
Keep the stable two-part layout from v6.13, but pull the source
artwork upward so it visually connects with the text/CTA block
instead of dropping to the bottom while the viewport narrows.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor .aq515-hero__inner{
position:relative!important;
z-index:2!important;
}
.aq515-hero--distributor::after{
position:relative!important;
z-index:1!important;
margin-top:calc(-1 * clamp(90px,14vw,130px))!important;
pointer-events:none!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
z-index:3!important;
}
}
@media (min-width:621px) and (max-width:700px){
.aq515-hero--distributor::after{
margin-top:calc(-1 * clamp(78px,13vw,95px))!important;
}
}
/* ==========================================================
Aqua One v6.15 — ZOSTAŃ DYSTRYBUTOREM, 621–900 px.
Final spacing correction: CTA must not overlap the source artwork.
Keep a small, deliberate gap between the full text/CTA block and
the artwork while preserving the complete carton/map composition.
========================================================== */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--distributor::after{
position:relative!important;
z-index:1!important;
margin-top:14px!important;
pointer-events:none!important;
}
.aq515-hero--distributor .aq515-hero__inner{
position:relative!important;
z-index:2!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
z-index:3!important;
padding-bottom:0!important;
}
.aq515-hero--distributor .aq515-buttons{
margin-bottom:0!important;
}
}
@media (min-width:621px) and (max-width:700px){
.aq515-hero--distributor::after{
margin-top:16px!important;
}
}
/* ==========================================================
Aqua One v6.16 — ZOSTAŃ DYSTRYBUTOREM, 901–1036 px.
Keep the desktop-like hero in one visual plane: the heading,
copy and CTAs stay on the artwork, while the source image is
scaled as one complete composition instead of dropping into a
separate lower strip at intermediate widths.
========================================================== */
@media (min-width:901px) and (max-width:1036px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
aspect-ratio:auto!important;
height:auto!important;
min-height:560px!important;
background-image:var(--aq-dist-hero)!important;
background-size:auto 100%!important;
background-position:68% center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:560px!important;
align-items:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:min(43%,420px)!important;
max-width:420px!important;
min-width:0!important;
padding-top:46px!important;
padding-bottom:32px!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--distributor h1{
font-size:clamp(46px,4.9vw,58px)!important;
line-height:.96!important;
margin:0 0 14px!important;
}
.aq515-hero--distributor p{
max-width:390px!important;
font-size:15px!important;
line-height:1.25!important;
margin:0 0 18px!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:min(100%,340px)!important;
max-width:340px!important;
gap:10px!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-height:42px!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.15!important;
}
.aq515-hero--distributor::before{
background:linear-gradient(90deg,rgba(238,245,249,.96) 0%,rgba(238,245,249,.92) 33%,rgba(238,245,249,.58) 52%,rgba(238,245,249,.14) 69%,rgba(238,245,249,0) 82%)!important;
}
}
/* ==========================================================
Aqua One v6.17 — SZTYWNY wariant HERO dystrybutora, 901–1036 px.
W tym zakresie nie zmieniamy dynamicznie wysokości ani kadru:
cały obraz źródłowy 2400×820 jest zawsze widoczny, a blok tekstu
i CTA pozostaje na lewej części tej samej kompozycji.
========================================================== */
@media (min-width:901px) and (max-width:1036px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:440px!important;
min-height:440px!important;
max-height:440px!important;
background-image:var(--aq-dist-hero)!important;
background-size:100% auto!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
height:440px!important;
min-height:440px!important;
max-height:440px!important;
display:flex!important;
align-items:flex-start!important;
justify-content:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
z-index:3!important;
width:43%!important;
max-width:420px!important;
min-width:0!important;
margin:0!important;
padding:30px 0 24px!important;
box-sizing:border-box!important;
}
.aq515-hero--distributor h1{
max-width:420px!important;
font-size:36px!important;
line-height:.96!important;
letter-spacing:-.04em!important;
margin:0 0 12px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:390px!important;
font-size:14px!important;
line-height:1.24!important;
margin:0 0 14px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:320px!important;
max-width:100%!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-height:40px!important;
padding:8px 10px!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.12!important;
}
.aq515-hero--distributor::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
background:linear-gradient(90deg,rgba(238,245,249,.96) 0%,rgba(238,245,249,.88) 31%,rgba(238,245,249,.48) 45%,rgba(238,245,249,.08) 58%,rgba(238,245,249,0) 67%)!important;
pointer-events:none!important;
}
.aq515-hero--distributor::after{
content:none!important;
display:none!important;
}
}
/* ==========================================================
Aqua One v6.18 — osobny breakpoint 1037–1050 px.
W tym krótkim zakresie utrzymujemy jeszcze układ desktopowy:
cały obraz 2400×820 jest widoczny jako jedna kompozycja,
a tytuł, opis i oba CTA pozostają bezpośrednio na grafice.
Dopiero poniżej 1037 px wchodzi sztywny wariant pośredni v6.17.
========================================================== */
@media (min-width:1037px) and (max-width:1050px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:2400 / 820!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
background-image:var(--aq-dist-hero)!important;
background-size:100% 100%!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor .aq515-hero__inner{
height:100%!important;
min-height:100%!important;
max-height:none!important;
display:flex!important;
align-items:flex-start!important;
justify-content:flex-start!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
z-index:3!important;
width:42%!important;
max-width:405px!important;
min-width:0!important;
margin:0!important;
padding:18px 0 14px!important;
box-sizing:border-box!important;
}
.aq515-hero--distributor h1{
max-width:405px!important;
font-size:38px!important;
line-height:.94!important;
letter-spacing:-.04em!important;
margin:0 0 9px!important;
overflow:visible!important;
}
.aq515-hero--distributor p{
max-width:390px!important;
font-size:13px!important;
line-height:1.20!important;
margin:0 0 10px!important;
}
.aq515-hero--distributor .aq515-buttons{
position:static!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:300px!important;
max-width:100%!important;
gap:6px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-height:34px!important;
padding:6px 9px!important;
font-size:10.5px!important;
justify-content:center!important;
white-space:normal!important;
text-align:center!important;
line-height:1.1!important;
}
.aq515-hero--distributor::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
background:linear-gradient(90deg,rgba(238,245,249,.98) 0%,rgba(238,245,249,.92) 27%,rgba(238,245,249,.45) 43%,rgba(238,245,249,.08) 55%,rgba(238,245,249,0) 64%)!important;
pointer-events:none!important;
}
.aq515-hero--distributor::after{
content:none!important;
display:none!important;
}
}
/* ==========================================================
Aqua One v6.21 — formularz kontaktowy na dużych ekranach.
Od 1400 px cały panel skaluje się proporcjonalnie w obu osiach:
rośnie szerokość, wysokość pól, textarea, padding, odstępy,
przycisk i typografia. Dzięki temu nie robi się płaski na 1920 px.
========================================================== */
@media (min-width:1400px){
/* v6.22: keep the standard centered .container width so the form does not
jump toward the viewport edge exactly at 1400 px. Only the form itself
continues to scale smoothly in both dimensions. */
.aq515-contact__form{
width:clamp(700px,calc(700px + (100vw - 1400px) * .27),850px)!important;
max-width:850px!important;
padding-top:clamp(20px,calc(20px + (100vw - 1400px) * .015),28px)!important;
padding-bottom:clamp(16px,calc(16px + (100vw - 1400px) * .014),24px)!important;
}
.aq515-contact .aqua-form{
width:100%!important;
max-width:none!important;
padding:clamp(24px,calc(24px + (100vw - 1400px) * .012),30px)!important;
border-radius:clamp(10px,calc(10px + (100vw - 1400px) * .004),12px)!important;
}
.aq515-contact h2{
font-size:clamp(38px,calc(38px + (100vw - 1400px) * .015),46px)!important;
margin-bottom:clamp(12px,calc(12px + (100vw - 1400px) * .012),18px)!important;
}
.aq515-contact .aq42-form-grid-visual{
gap:clamp(8px,calc(8px + (100vw - 1400px) * .008),12px)!important;
column-gap:clamp(10px,calc(10px + (100vw - 1400px) * .012),16px)!important;
}
.aq515-contact input,
.aq515-contact select{
height:clamp(39px,calc(39px + (100vw - 1400px) * .015),47px)!important;
}
.aq515-contact textarea{
height:clamp(90px,calc(90px + (100vw - 1400px) * .035),108px)!important;
min-height:clamp(90px,calc(90px + (100vw - 1400px) * .035),108px)!important;
}
.aq515-contact input,
.aq515-contact select,
.aq515-contact textarea{
font-size:clamp(14px,calc(14px + (100vw - 1400px) * .002),15px)!important;
padding-left:clamp(10px,calc(10px + (100vw - 1400px) * .006),13px)!important;
padding-right:clamp(10px,calc(10px + (100vw - 1400px) * .006),13px)!important;
}
.aq515-contact .aq42-form-actions{
margin-top:clamp(8px,calc(8px + (100vw - 1400px) * .008),12px)!important;
gap:clamp(10px,calc(10px + (100vw - 1400px) * .010),15px)!important;
}
.aq515-contact .aq42-form-required{
font-size:clamp(12px,calc(12px + (100vw - 1400px) * .002),13px)!important;
margin-top:clamp(3px,calc(3px + (100vw - 1400px) * .004),5px)!important;
}
.aq515-contact .check{
gap:clamp(7px,calc(7px + (100vw - 1400px) * .004),9px)!important;
}
.aq515-contact .check input{
width:clamp(14px,calc(14px + (100vw - 1400px) * .004),16px)!important;
height:clamp(14px,calc(14px + (100vw - 1400px) * .004),16px)!important;
flex-basis:clamp(14px,calc(14px + (100vw - 1400px) * .004),16px)!important;
}
.aq515-contact .check span{
font-size:clamp(10px,calc(10px + (100vw - 1400px) * .003),11.5px)!important;
line-height:1.28!important;
}
.aq515-contact button[type=submit]{
min-height:clamp(40px,calc(40px + (100vw - 1400px) * .015),48px)!important;
font-size:clamp(14px,calc(14px + (100vw - 1400px) * .002),15px)!important;
}
}
/* ==========================================================
Aqua One v6.30 — formularz kontaktowy: jeden spójny system
breakpointów zamiast nakładających się reguł v6.23–v6.29.
555–620 : zachowanie pełnego tła pod formularzem.
621–767 : układ jednokolumnowy, bez nachodzenia na stopkę.
768–1399 : jeden płynny układ dwukolumnowy — bez granic
1050 / 1062 / 1074 / 1075 i bez nagłych skoków.
>= 1400 : płynne powiększanie formularza z zachowaniem
odstępów między kontrolkami.
========================================================== */
/* Telefon poziomy / szeroki mobile: grafika wypełnia cały dół. */
@media (min-width:555px) and (max-width:620px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
background-size:cover!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
padding-bottom:170px!important;
}
}
/* 621–767 px — stabilna jedna kolumna. */
@media (min-width:621px) and (max-width:767px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:34px 0 72px!important;
box-sizing:border-box!important;
overflow:hidden!important;
background-size:cover!important;
background-position:center bottom!important;
background-repeat:no-repeat!important;
background-color:#eff7fb!important;
}
.aq515-contact__shell,
.aq515-contact--ratio-2400x785 .aq515-contact__shell{
width:min(calc(100% - 34px),760px)!important;
height:auto!important;
min-height:0!important;
align-items:flex-start!important;
}
.aq515-contact__shell > .aq515-contact__form,
.aq515-contact--ratio-2400x785 .aq515-contact__shell > .aq515-contact__form{
width:min(74%,540px)!important;
max-width:540px!important;
padding:0!important;
margin:0!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-columns:1fr!important;
grid-template-areas:'name' 'type' 'company' 'email' 'phone' 'message'!important;
grid-template-rows:none!important;
grid-auto-rows:auto!important;
gap:8px!important;
}
.aq515-contact .aq42-field--message{
grid-column:auto!important;
grid-row:auto!important;
height:auto!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
height:104px!important;
min-height:104px!important;
margin-top:0!important;
}
.aq515-contact .aq42-form-actions{
grid-template-columns:1fr!important;
}
}
/* 768–1399 px — jeden wspólny, płynny wariant tablet/desktop.
Celowo nie ma osobnych progów 1050/1062/1074/1075. */
@media (min-width:768px) and (max-width:1399px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:clamp(30px,3.1vw,40px) 0 clamp(36px,3.6vw,48px)!important;
box-sizing:border-box!important;
overflow:hidden!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
}
/* Tylko dla sekcji formularza znosimy stary limit .container=760 px
poniżej 900 px. Dzięki temu szerokość rośnie płynnie od 768 do 1400. */
.aq515-contact__shell.container,
.aq515-contact--ratio-2400x785 .aq515-contact__shell.container{
width:min(1180px,calc(100% - 34px))!important;
max-width:1180px!important;
height:auto!important;
min-height:0!important;
align-items:flex-start!important;
margin-left:auto!important;
margin-right:auto!important;
}
.aq515-contact__shell > .aq515-contact__form,
.aq515-contact--ratio-2400x785 .aq515-contact__shell > .aq515-contact__form{
width:min(88%,880px)!important;
max-width:880px!important;
margin:0!important;
padding:0!important;
}
.aq515-contact h2{
font-size:clamp(31px,3.0vw,38px)!important;
line-height:1!important;
margin-bottom:16px!important;
}
.aq515-contact .aqua-form{
width:100%!important;
max-width:none!important;
padding:26px 26px 24px!important;
border-radius:11px!important;
box-sizing:border-box!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-columns:1fr 1fr!important;
grid-template-rows:repeat(4,46px)!important;
grid-auto-rows:46px!important;
row-gap:9px!important;
column-gap:14px!important;
}
.aq515-contact .aq42-form-grid-visual input,
.aq515-contact .aq42-form-grid-visual select,
.aq515-contact .aq42-form-grid-visual textarea{
margin:0!important;
}
.aq515-contact input,
.aq515-contact select{
height:46px!important;
}
.aq515-contact input,
.aq515-contact select,
.aq515-contact textarea{
font-size:14px!important;
padding:10px 12px!important;
}
.aq515-contact .aq42-field--message{
grid-column:2!important;
grid-row:2 / 5!important;
align-self:stretch!important;
height:auto!important;
min-height:0!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
box-sizing:border-box!important;
resize:none!important;
}
.aq515-contact .aq42-form-actions{
grid-template-columns:1fr 1fr!important;
margin-top:13px!important;
gap:14px!important;
align-items:end!important;
}
.aq515-contact button[type=submit]{
min-height:50px!important;
font-size:14px!important;
}
.aq515-contact .aq42-form-required{
font-size:12px!important;
line-height:1.25!important;
margin-top:5px!important;
}
.aq515-contact .check span{
font-size:11px!important;
line-height:1.28!important;
}
}
/* >= 1400 px — zachowujemy płynne powiększanie, ale startujemy
dokładnie z 880 px, czyli z tej samej szerokości co 768–1399. */
@media (min-width:1400px){
.aq515-contact__shell > .aq515-contact__form,
.aq515-contact--ratio-2400x785 .aq515-contact__shell > .aq515-contact__form{
width:clamp(880px,calc(880px + (100vw - 1400px) * .27),1030px)!important;
max-width:1030px!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-rows:repeat(4,clamp(39px,calc(39px + (100vw - 1400px) * .015),47px))!important;
grid-auto-rows:clamp(39px,calc(39px + (100vw - 1400px) * .015),47px)!important;
row-gap:clamp(10px,calc(10px + (100vw - 1400px) * .008),14px)!important;
column-gap:clamp(12px,calc(12px + (100vw - 1400px) * .010),18px)!important;
}
.aq515-contact .aq42-form-grid-visual input,
.aq515-contact .aq42-form-grid-visual select,
.aq515-contact .aq42-form-grid-visual textarea{
margin:0!important;
}
.aq515-contact .aq42-field--message{
grid-column:2!important;
grid-row:2 / 5!important;
height:auto!important;
min-height:0!important;
align-self:stretch!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
box-sizing:border-box!important;
}
}
/* ==========================================================
Aqua One v6.31 — płynne przejście 1399 -> 1400 px.
W 6.30 przy 1400 px wracały starsze desktopowe reguły:
aspect-ratio sekcji, standardowy shell oraz padding formularza.
To przesuwało cały formularz poziomo i pionowo dokładnie na
breakpointcie. Od 1400 px kontynuujemy więc geometrię 1399 px
i dopiero potem skalujemy elementy płynnie.
========================================================== */
@media (min-width:1400px){
.aq515-contact,
.aq515-contact--ratio-2400x785{
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:clamp(40px,calc(40px + (100vw - 1400px) * .012),48px) 0
clamp(48px,calc(48px + (100vw - 1400px) * .014),58px)!important;
box-sizing:border-box!important;
overflow:hidden!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
}
.aq515-contact__shell.container,
.aq515-contact--ratio-2400x785 .aq515-contact__shell.container{
width:min(1180px,calc(100% - 34px))!important;
max-width:1180px!important;
height:auto!important;
min-height:0!important;
align-items:flex-start!important;
margin-left:auto!important;
margin-right:auto!important;
}
.aq515-contact__shell > .aq515-contact__form,
.aq515-contact--ratio-2400x785 .aq515-contact__shell > .aq515-contact__form{
width:clamp(880px,calc(880px + (100vw - 1400px) * .27),1030px)!important;
max-width:1030px!important;
margin:0!important;
padding:0!important;
}
.aq515-contact h2{
font-size:clamp(38px,calc(38px + (100vw - 1400px) * .015),46px)!important;
line-height:1!important;
margin-bottom:clamp(16px,calc(16px + (100vw - 1400px) * .006),20px)!important;
}
.aq515-contact .aqua-form{
width:100%!important;
max-width:none!important;
padding:clamp(26px,calc(26px + (100vw - 1400px) * .008),30px)!important;
border-radius:clamp(11px,calc(11px + (100vw - 1400px) * .002),12px)!important;
box-sizing:border-box!important;
}
.aq515-contact .aq42-form-grid-visual{
grid-template-columns:1fr 1fr!important;
grid-template-rows:repeat(4,clamp(46px,calc(46px + (100vw - 1400px) * .012),52px))!important;
grid-auto-rows:clamp(46px,calc(46px + (100vw - 1400px) * .012),52px)!important;
row-gap:clamp(9px,calc(9px + (100vw - 1400px) * .008),13px)!important;
column-gap:clamp(14px,calc(14px + (100vw - 1400px) * .008),18px)!important;
}
.aq515-contact input,
.aq515-contact select{
height:clamp(46px,calc(46px + (100vw - 1400px) * .012),52px)!important;
}
.aq515-contact input,
.aq515-contact select,
.aq515-contact textarea{
font-size:clamp(14px,calc(14px + (100vw - 1400px) * .002),15px)!important;
padding:clamp(10px,calc(10px + (100vw - 1400px) * .004),12px)
clamp(12px,calc(12px + (100vw - 1400px) * .004),14px)!important;
margin:0!important;
}
.aq515-contact .aq42-field--message{
grid-column:2!important;
grid-row:2 / 5!important;
align-self:stretch!important;
height:auto!important;
min-height:0!important;
display:block!important;
}
.aq515-contact .aq42-field--message textarea{
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
box-sizing:border-box!important;
resize:none!important;
}
.aq515-contact .aq42-form-actions{
grid-template-columns:1fr 1fr!important;
margin-top:clamp(13px,calc(13px + (100vw - 1400px) * .006),16px)!important;
gap:clamp(14px,calc(14px + (100vw - 1400px) * .006),17px)!important;
align-items:end!important;
}
.aq515-contact button[type=submit]{
min-height:clamp(50px,calc(50px + (100vw - 1400px) * .012),56px)!important;
font-size:clamp(14px,calc(14px + (100vw - 1400px) * .002),15px)!important;
}
.aq515-contact .aq42-form-required{
font-size:clamp(12px,calc(12px + (100vw - 1400px) * .002),13px)!important;
line-height:1.25!important;
margin-top:5px!important;
}
.aq515-contact .check span{
font-size:clamp(11px,calc(11px + (100vw - 1400px) * .0015),12px)!important;
line-height:1.28!important;
}
}
/* ==========================================================
Aqua One v6.32 — korekty klienta z dokumentu "Korekty".
Punkty: szeroki desktop 1920, kadrowanie zdjęć, HERO 620,
anchor Kampanie, stopka, HERO RWD i test na fizycznym telefonie.
========================================================== */
/* 1. Szeroki desktop — wycentrowanie wszystkich głównych kontenerów
i ochrona przed poziomym overflow na 1920 px i większych. */
html,
body{
max-width:100%;
overflow-x:clip;
}
@supports not (overflow:clip){
html,body{overflow-x:hidden}
}
@media (min-width:1600px){
.container,
.aq515-header-inner,
.aq515-hero__inner,
.aq515-footer-grid,
.aq515-footer-bottom,
.aq515-personal .aq515-personal__inner.container{
margin-left:auto!important;
margin-right:auto!important;
}
.aq515-section,
.aq515-hero,
.aq515-brand-story,
.aq515-personal,
.aq515-water-filter,
.aq515-water-params,
.aq515-pack-cane,
.aq515-pack-light,
.aq515-region,
.aq515-campaign-cta,
.aq515-faq,
.aq515-contact,
.aq515-footer{
max-width:100vw!important;
overflow-x:clip!important;
}
.aq515-personal .aq515-personal__inner.container{
width:min(1220px,calc(100% - 80px))!important;
max-width:1220px!important;
}
}
/* 2. Strona główna — dokładniejsze kadrowanie wskazanych kafelków.
Rozmiar, siatka i odstępy pozostają bez zmian. */
.aq515-home-use--2 img{object-position:50% 56%!important}
.aq515-home-use--3 img{object-position:50% 58%!important}
.aq515-home-use--5 img{object-position:50% 58%!important}
.aq515-home-use--7 img{object-position:48% 56%!important}
.aq515-home-use--8 img{object-position:50% 57%!important}
/* 3. Kampanie reklamowe — target CTA trafia w sekcję "Co można umieścić..."
i zostawia nagłówek wyraźnie wewnątrz viewportu. */
#mozliwosci{
scroll-margin-top:clamp(130px,28vh,260px);
}
/* 4. Stopka — większe social media od desktopu w dół. */
.aq515-socials{gap:12px!important}
.aq515-socials a{
width:34px!important;
height:34px!important;
}
.aq515-socials img{
width:31px!important;
height:31px!important;
}
/* 4. Stopka — 900–768 px: zwarty układ 2 × 2, czyli dwa wiersze. */
@media (min-width:768px) and (max-width:900px){
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:24px 42px!important;
align-items:start!important;
}
.aq515-footer-brand{grid-column:auto!important}
.aq515-footer-bottom{
flex-direction:row!important;
align-items:center!important;
justify-content:space-between!important;
flex-wrap:wrap!important;
gap:12px 24px!important;
}
.aq515-footer-legal{
justify-content:flex-end!important;
flex-wrap:wrap!important;
}
}
/* 4. Stopka — 620 px: dwie kolumny zamiast jednego długiego słupka. */
@media (min-width:481px) and (max-width:620px){
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:26px 28px!important;
align-items:start!important;
}
.aq515-footer-brand{grid-column:auto!important}
.aq515-footer-bottom{
align-items:flex-start!important;
gap:12px!important;
}
}
/* 2/3/6/7. HERO 620 px — obniżenie bloków tekstowych, aby treść
lepiej łączyła się z kartonikiem i nie zostawiała pustego pasa u góry. */
@media (max-width:620px){
.aq515-hero--home .aq515-hero__copy{padding-top:68px!important}
.aq515-hero--campaign .aq515-hero__copy{padding-top:66px!important}
.aq515-hero--logo .aq515-hero__copy{padding-top:66px!important}
.aq515-hero--retail .aq515-hero__copy{padding-top:64px!important}
/* Woda z Twoim logo — oba CTA pionowo. */
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
gap:9px!important;
}
.aq515-hero--logo .aq515-btn{
width:min(100%,360px)!important;
white-space:normal!important;
text-align:center!important;
}
/* Mniej mleczna warstwa na HERO — większy detal kartoników i tła. */
.aq515-hero--home::before,
.aq515-hero--logo::before,
.aq515-hero--campaign::before,
.aq515-hero--retail::before,
.aq515-hero--pack::before,
.aq515-hero--distributor::before{
background:linear-gradient(180deg,
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.84) 34%,
rgba(255,255,255,.34) 56%,
rgba(255,255,255,.06) 75%,
rgba(255,255,255,0) 100%)!important;
}
}
/* 7. Dla sieci sprzedaży — przy 768 px pełny nagłówek i oba CTA
mieszczą się w HERO bez wejścia pod header / obcięcia dołu. */
@media (min-width:621px) and (max-width:800px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
aspect-ratio:auto!important;
height:auto!important;
min-height:560px!important;
max-height:none!important;
background-size:auto 100%!important;
background-position:76% center!important;
background-repeat:no-repeat!important;
overflow:hidden!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:560px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
width:min(54%,420px)!important;
max-width:420px!important;
min-width:0!important;
padding:56px 0 38px!important;
margin:0!important;
}
.aq515-hero--retail h1{
font-size:clamp(34px,5.4vw,43px)!important;
line-height:.96!important;
margin-bottom:14px!important;
}
.aq515-hero--retail p{
font-size:14px!important;
line-height:1.25!important;
margin-bottom:16px!important;
}
.aq515-hero--retail .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:min(100%,340px)!important;
gap:9px!important;
}
.aq515-hero--retail .aq515-btn{
width:100%!important;
min-height:42px!important;
white-space:normal!important;
text-align:center!important;
}
}
/* 8. Nasza woda — 900–620 px: jedna wspólna kompozycja HERO.
Tekst leży bezpośrednio na tle; ukrywamy osobny mobilny obraz. */
@media (min-width:621px) and (max-width:900px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:520px!important;
background-size:auto 100%!important;
background-position:64% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-water-hero-mobile-art{display:none!important}
.aq515-hero--water::before{
background:linear-gradient(90deg,
rgba(255,255,255,.68) 0%,
rgba(255,255,255,.48) 34%,
rgba(255,255,255,.18) 51%,
rgba(255,255,255,0) 68%)!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:520px!important;
height:auto!important;
align-items:center!important;
}
.aq515-hero--water .aq515-hero__copy{
width:min(52%,440px)!important;
max-width:440px!important;
min-width:0!important;
padding:34px 0!important;
margin:0!important;
}
.aq515-hero--water h1{
max-width:440px!important;
font-size:clamp(32px,5vw,43px)!important;
line-height:.95!important;
margin:0 0 14px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
white-space:normal!important;
overflow-wrap:normal!important;
}
.aq515-hero--water p{
max-width:420px!important;
font-size:14px!important;
line-height:1.28!important;
margin:0!important;
}
}
/* 9. Nasze opakowanie — 620 px: tekst i grafika pozostają w jednym HERO. */
@media (max-width:620px){
.aq515-hero--pack,
.aq515-hero--pack.aq515-hero--ratio-2400x720{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:500px!important;
background-size:auto 100%!important;
background-position:64% center!important;
background-repeat:no-repeat!important;
background-color:#f5f8fa!important;
overflow:hidden!important;
}
.aq515-hero--pack .aq515-hero__inner{
min-height:500px!important;
align-items:flex-start!important;
}
.aq515-hero--pack .aq515-hero__copy{
width:58%!important;
max-width:330px!important;
min-width:0!important;
padding:66px 0 24px!important;
margin:0!important;
}
.aq515-hero--pack h1{
font-size:clamp(31px,8.2vw,39px)!important;
line-height:.96!important;
}
.aq515-hero--pack p{
font-size:13.5px!important;
line-height:1.28!important;
}
}
/* 10. Zostań dystrybutorem — 768–620 px: usunięcie układu
"tekst + osobna grafika". Całość znowu jest jednym HERO. */
@media (min-width:621px) and (max-width:768px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:560px!important;
max-height:none!important;
background-image:var(--aq-dist-hero)!important;
background-size:auto 100%!important;
background-position:50% center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor::after{
content:none!important;
display:none!important;
}
.aq515-hero--distributor::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
background:linear-gradient(90deg,
rgba(238,245,249,.94) 0%,
rgba(238,245,249,.82) 34%,
rgba(238,245,249,.44) 48%,
rgba(238,245,249,.08) 62%,
rgba(238,245,249,0) 74%)!important;
pointer-events:none!important;
}
.aq515-hero--distributor .aq515-hero__inner{
min-height:560px!important;
height:auto!important;
display:flex!important;
align-items:flex-start!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:min(48%,350px)!important;
max-width:350px!important;
min-width:0!important;
margin:0!important;
padding:56px 0 36px!important;
z-index:3!important;
}
.aq515-hero--distributor h1{
max-width:350px!important;
font-size:clamp(31px,5.1vw,38px)!important;
line-height:.95!important;
margin:0 0 12px!important;
}
.aq515-hero--distributor p{
max-width:330px!important;
font-size:13.5px!important;
line-height:1.24!important;
margin:0 0 14px!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:min(100%,310px)!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-height:40px!important;
padding:8px 10px!important;
white-space:normal!important;
text-align:center!important;
line-height:1.12!important;
}
}
/* 11. Fizyczny telefon — mniej rozświetlenia oraz korekta położenia
kartoników, które na węższym realnym viewportcie były zbyt blisko
prawej krawędzi / pod CTA. */
@media (max-width:480px){
.aq515-hero--home::before,
.aq515-hero--logo::before,
.aq515-hero--campaign::before,
.aq515-hero--retail::before,
.aq515-hero--pack::before,
.aq515-hero--distributor::before{
background:linear-gradient(180deg,
rgba(255,255,255,.92) 0%,
rgba(255,255,255,.76) 32%,
rgba(255,255,255,.24) 53%,
rgba(255,255,255,.03) 72%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--campaign{
background-position:80% bottom!important;
background-size:auto 58%!important;
}
.aq515-hero--retail{
background-position:82% bottom!important;
background-size:auto 55%!important;
}
.aq515-hero--logo{
background-position:74% bottom!important;
background-size:auto 58%!important;
}
.aq515-hero--pack{
background-position:66% center!important;
}
/* Dystrybutor na fizycznym telefonie: wspólna kompozycja, kartonik
odsunięty od CTA i bez osobnego dolnego panelu. */
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:620px!important;
background-image:var(--aq-dist-hero)!important;
background-size:auto 100%!important;
background-position:39% center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor::after{content:none!important;display:none!important}
.aq515-hero--distributor .aq515-hero__inner{
min-height:620px!important;
height:auto!important;
align-items:flex-start!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--distributor .aq515-hero__copy{
width:62%!important;
max-width:285px!important;
min-width:0!important;
padding:68px 0 30px!important;
margin:0!important;
position:relative!important;
z-index:3!important;
}
.aq515-hero--distributor h1{
font-size:clamp(28px,8vw,34px)!important;
line-height:.95!important;
}
.aq515-hero--distributor p{
font-size:12.5px!important;
line-height:1.22!important;
}
.aq515-hero--distributor .aq515-buttons{
width:min(100%,270px)!important;
display:flex!important;
flex-direction:column!important;
gap:7px!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
min-height:38px!important;
padding:7px 9px!important;
font-size:11.5px!important;
white-space:normal!important;
text-align:center!important;
}
}
/* ==========================================================
Aqua One v6.33 — precyzyjne poprawki po komentarzach klienta.
Cel: nie dokładamy nowych przypadkowych reflow, tylko wymuszamy
wskazane zachowanie w dokładnie podanych zakresach.
========================================================== */
/* 2 + 3. STRONA GŁÓWNA / KAMPANIE — 580–620 px.
Przy 570 px proporcja pionowa była poprawna. Na szerszym mobile
treść zajmuje mniej wierszy, więc wizualnie podciągała się do góry.
Kompensujemy to wyłącznie przesunięciem całego bloku (wraz z CTA),
bez zmiany kadru i wysokości HERO. */
@media (min-width:580px) and (max-width:620px){
.aq515-hero--home .aq515-hero__copy{
padding-top:84px!important;
}
.aq515-hero--campaign .aq515-hero__copy{
padding-top:84px!important;
}
}
/* 4. STOPKA — 768–1000 px dokładnie w logice widoku ~1003 px:
dwie kolumny = dwa zwarte wiersze części głównej, a dolny pasek
prawny/copyright pozostaje poziomy zamiast tworzyć kolejne poziomy. */
@media (min-width:768px) and (max-width:1000px){
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:30px 48px!important;
align-items:start!important;
}
.aq515-footer-brand{
grid-column:auto!important;
}
.aq515-footer-bottom{
flex-direction:row!important;
align-items:center!important;
justify-content:space-between!important;
flex-wrap:wrap!important;
gap:12px 24px!important;
}
.aq515-footer-legal{
align-self:auto!important;
justify-content:flex-end!important;
flex-wrap:wrap!important;
}
}
/* 6. WODA Z TWOIM LOGO — okolice 620 px.
Blok treści i CTA jest niżej, a przyciski są krótsze i ustawione
pionowo. Drugi CTA może zawinąć tekst, zamiast rozciągać przycisk. */
@media (min-width:560px) and (max-width:620px){
.aq515-hero--logo .aq515-hero__copy{
padding-top:86px!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
width:270px!important;
max-width:100%!important;
gap:9px!important;
margin-top:14px!important;
}
.aq515-hero--logo .aq515-btn{
width:270px!important;
max-width:100%!important;
min-height:40px!important;
padding:8px 11px!important;
font-size:12px!important;
white-space:normal!important;
text-align:center!important;
line-height:1.12!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 801–922 px.
Ten zakres dostaje ten sam wariant kompozycji, który zaczynał się
dopiero przy 923 px: klasyczny HERO, pionowe wycentrowanie i brak
wymuszonej wysokiej tabletowej kompozycji. */
@media (min-width:801px) and (max-width:922px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
aspect-ratio:auto!important;
height:auto!important;
min-height:clamp(360px,30vw,455px)!important;
max-height:none!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
overflow:hidden!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:inherit!important;
height:auto!important;
align-items:center!important;
}
.aq515-hero--retail .aq515-hero__copy{
width:min(550px,48%)!important;
max-width:550px!important;
min-width:0!important;
padding:32px 0 36px!important;
margin:0!important;
}
.aq515-hero--retail h1{
font-size:clamp(40px,3.55vw,57px)!important;
line-height:.94!important;
margin:0 0 16px!important;
overflow:visible!important;
}
.aq515-hero--retail p{
max-width:540px!important;
font-size:16px!important;
line-height:1.24!important;
margin:0 0 22px!important;
}
.aq515-hero--retail .aq515-buttons{
display:flex!important;
flex-direction:row!important;
flex-wrap:wrap!important;
align-items:center!important;
width:auto!important;
max-width:none!important;
gap:14px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-btn{
width:auto!important;
min-width:0!important;
min-height:42px!important;
padding:10px 18px!important;
white-space:normal!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — okolice 620 px.
Dodatkowo opuszczamy cały blok (nagłówek + opis + oba CTA),
nie sam przycisk. */
@media (min-width:560px) and (max-width:620px){
.aq515-hero--retail .aq515-hero__copy{
padding-top:84px!important;
}
}
/* 8. NASZA WODA — 620–900 px.
Starszy wariant v5.98 wymuszał background-image:none!important,
dlatego sama korekta rozmiaru/pozycji tła z v6.32 nie mogła zadziałać.
Przywracamy źródłową grafikę przez zmienną CSS i bezwzględnie ukrywamy
osobny obraz mobilny. Tekst i kartonik są znowu jednym HERO. */
@media (min-width:620px) and (max-width:900px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:520px!important;
max-height:none!important;
background-image:var(--aq-water-hero)!important;
background-size:auto 100%!important;
background-position:64% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
display:block!important;
content:""!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(90deg,
rgba(255,255,255,.72) 0%,
rgba(255,255,255,.52) 33%,
rgba(255,255,255,.20) 50%,
rgba(255,255,255,0) 68%)!important;
pointer-events:none!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:520px!important;
height:auto!important;
display:flex!important;
align-items:center!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--water .aq515-hero__copy{
width:min(52%,440px)!important;
max-width:440px!important;
min-width:0!important;
margin:0!important;
padding:34px 0!important;
background:transparent!important;
position:relative!important;
z-index:3!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:440px!important;
font-size:clamp(32px,5vw,43px)!important;
line-height:.95!important;
margin:0 0 14px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
white-space:normal!important;
margin-bottom:2px!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:420px!important;
font-size:14px!important;
line-height:1.28!important;
margin:0!important;
}
.aq515-water-hero-mobile-art,
.aq515-hero--water .aq515-water-hero-mobile-art{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
overflow:hidden!important;
}
}
/* ==========================================================
Aqua One v6.34 — kolejne korekty breakpointów po kontroli v6.33.
========================================================== */
/* 4. STOPKA — 500–1003 px.
Utrzymujemy zwarty dwukolumnowy układ znany z ok. 500 px
w całym zakresie pośrednim, skalując odstępy i typografię płynnie. */
@media (min-width:500px) and (max-width:1003px){
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:clamp(22px,3.2vw,34px) clamp(28px,5vw,52px)!important;
align-items:start!important;
}
.aq515-footer-brand{grid-column:auto!important}
.aq515-footer h4{
font-size:clamp(16px,1.8vw,18px)!important;
margin-bottom:clamp(10px,1.4vw,14px)!important;
}
.aq515-footer-menu a{
font-size:clamp(12px,1.45vw,14px)!important;
}
.aq515-footer-contact>p,
.aq515-footer-contact>a{
font-size:clamp(12px,1.35vw,13px)!important;
}
.aq515-footer-bottom{
flex-direction:row!important;
align-items:center!important;
justify-content:space-between!important;
flex-wrap:wrap!important;
gap:10px 22px!important;
}
.aq515-footer-legal{
align-self:auto!important;
justify-content:flex-end!important;
flex-wrap:wrap!important;
}
}
/* 5. CTA — usunięcie dwóch niepożądanych przejść.
901–952 px: zachowanie jak tuż powyżej tego zakresu — CTA pozostają
w jednej linii tekstu. 500–620 px: kompaktowa szerokość jak przy 621 px,
bez nadmiernie rozciągniętych przycisków. Reguła obejmuje hero z długimi CTA. */
@media (min-width:901px) and (max-width:952px){
.aq515-hero--logo .aq515-buttons,
.aq515-hero--campaign .aq515-buttons{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:10px!important;
width:max-content!important;
max-width:100%!important;
}
.aq515-hero--logo .aq515-btn,
.aq515-hero--campaign .aq515-btn{
width:auto!important;
min-width:0!important;
padding:9px 12px!important;
font-size:12px!important;
white-space:nowrap!important;
line-height:1.1!important;
}
.aq515-hero--distributor .aq515-buttons{
width:360px!important;
max-width:100%!important;
}
.aq515-hero--distributor .aq515-btn{
font-size:12px!important;
white-space:nowrap!important;
padding-inline:10px!important;
}
}
@media (min-width:500px) and (max-width:620px){
.aq515-hero--logo .aq515-buttons,
.aq515-hero--campaign .aq515-buttons,
.aq515-hero--distributor .aq515-buttons{
width:260px!important;
max-width:100%!important;
align-items:stretch!important;
}
.aq515-hero--logo .aq515-btn,
.aq515-hero--campaign .aq515-btn,
.aq515-hero--distributor .aq515-btn{
width:100%!important;
max-width:260px!important;
min-height:40px!important;
padding:8px 10px!important;
font-size:11.5px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 500–620 px.
Cały blok treści (nagłówek, opis, oba CTA) jest niżej, nie tylko przycisk.
Zostawiamy bezpieczny zapas wysokości, żeby CTA nie wpadały na kartonik. */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:660px!important;
height:auto!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:660px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
padding-top:92px!important;
padding-bottom:28px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-buttons{
margin-top:4px!important;
}
}
/* 8. NASZA WODA — 901–1052 px ma zachować dokładnie ten sam typ
kompozycji co przy 900 px: tekst na grafice po lewej, kartonik po prawej,
bez powrotu do osobnego jasnego panelu / dolnej grafiki. */
@media (min-width:901px) and (max-width:1052px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:520px!important;
max-height:none!important;
background-image:var(--aq-water-hero)!important;
background-size:auto 100%!important;
background-position:64% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
display:block!important;
content:""!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(90deg,
rgba(255,255,255,.72) 0%,
rgba(255,255,255,.52) 33%,
rgba(255,255,255,.20) 50%,
rgba(255,255,255,0) 68%)!important;
pointer-events:none!important;
}
.aq515-hero--water .aq515-hero__inner{
min-height:520px!important;
height:auto!important;
display:flex!important;
align-items:center!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--water .aq515-hero__copy{
width:min(52%,440px)!important;
max-width:440px!important;
min-width:0!important;
margin:0!important;
padding:34px 0!important;
background:transparent!important;
position:relative!important;
z-index:3!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:440px!important;
font-size:clamp(38px,4.1vw,43px)!important;
line-height:.95!important;
margin:0 0 14px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
white-space:normal!important;
margin-bottom:2px!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:420px!important;
font-size:14px!important;
line-height:1.28!important;
margin:0!important;
}
.aq515-water-hero-mobile-art,
.aq515-hero--water .aq515-water-hero-mobile-art{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
overflow:hidden!important;
}
}
/* ==========================================================
Aqua One v6.35 — korekty po kontroli v6.34.
========================================================== */
/* 4. STOPKA — 500–1003 px.
Naprawa rzeczywistego konfliktu z responsive.css: powyżej 760 px
.aq42-footer-grid > div:last-child dostawał grid-column:1/-1, przez co
KONTAKT wpadał do osobnego rzędu. W całym zakresie zachowujemy układ
2x2 taki jak przy 500 px, tylko płynnie skalujemy odstępy. */
@media (min-width:500px) and (max-width:1003px){
.aq42-footer-grid,
.aq515-footer-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:clamp(24px,3.2vw,34px) clamp(28px,5vw,52px)!important;
align-items:start!important;
}
.aq42-footer-grid > div,
.aq515-footer-grid > div{
grid-column:auto!important;
min-width:0!important;
}
.aq42-footer-grid > div:last-child,
.aq515-footer-grid > div:last-child{
grid-column:auto!important;
}
.aq42-footer-bottom,
.aq515-footer-bottom{
flex-direction:row!important;
align-items:center!important;
justify-content:space-between!important;
flex-wrap:wrap!important;
gap:10px 22px!important;
}
.aq42-footer-legal{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
flex-wrap:wrap!important;
}
}
/* 6. WODA Z TWOIM LOGO — 500–620 px.
Cały blok oraz CTA jeszcze wyraźniej niżej; przyciski pozostają
kompaktowe i pionowe. Zwiększamy też zapas wysokości HERO. */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x720.aq515-hero--logo{
min-height:690px!important;
height:auto!important;
}
.aq515-hero--logo .aq515-hero__inner{
min-height:690px!important;
align-items:flex-start!important;
}
.aq515-hero--logo .aq515-hero__copy{
padding-top:118px!important;
padding-bottom:26px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-buttons{
margin-top:18px!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 500–619 px.
Jeszcze mocniej opuszczamy tekst i CTA względem v6.34. */
@media (min-width:500px) and (max-width:619px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:710px!important;
height:auto!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:710px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
width:100%!important;
max-width:100%!important;
min-width:0!important;
padding-top:122px!important;
padding-bottom:28px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-buttons{
margin-top:12px!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 620–920 px.
Utrzymujemy kompozycję znaną z 620 px: tekst u góry, kartonik w dolnej
części HERO i CTA pionowo. Wielkości skalują się płynnie, bez przejścia
na wcześniejszy, błędny wariant 621–800 / 801–922. */
@media (min-width:620px) and (max-width:920px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:clamp(690px,76vw,720px)!important;
max-height:none!important;
background-size:auto 58%!important;
background-position:70% bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--retail::before{
display:block!important;
content:""!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(180deg,
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.84) 34%,
rgba(255,255,255,.34) 56%,
rgba(255,255,255,.06) 75%,
rgba(255,255,255,0) 100%)!important;
pointer-events:none!important;
}
.aq515-hero--retail .aq515-hero__inner{
width:min(100% - 34px,760px)!important;
max-width:760px!important;
min-height:inherit!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-start!important;
gap:0!important;
margin:0 auto!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--retail .aq515-hero__copy{
width:min(100%,560px)!important;
max-width:560px!important;
min-width:0!important;
padding-top:clamp(66px,calc(122px - (100vw - 620px)*.185),122px)!important;
padding-bottom:26px!important;
margin:0!important;
background:transparent!important;
}
.aq515-hero--retail h1{
font-size:clamp(38px,5vw,46px)!important;
line-height:.95!important;
margin:0 0 14px!important;
overflow:visible!important;
}
.aq515-hero--retail p{
max-width:540px!important;
font-size:clamp(15px,1.75vw,16px)!important;
line-height:1.28!important;
margin:0 0 18px!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:flex-start!important;
width:min(100%,300px)!important;
max-width:300px!important;
gap:9px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-btn{
width:100%!important;
max-width:300px!important;
min-width:0!important;
min-height:40px!important;
padding:8px 11px!important;
font-size:clamp(11.5px,1.45vw,13px)!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
/* ==========================================================
Aqua One v6.36 — kolejne korekty HERO po kontroli v6.35.
========================================================== */
/* 2. STRONA GŁÓWNA — 500–620 px.
Cały blok tekstowy wraz z CTA jest wyraźniej opuszczony, bez zmiany
kolejności elementów. Dzięki temu zmniejsza się pusty pas między
treścią a kartonikiem. */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--home .aq515-hero__copy{
padding-top:108px!important;
padding-bottom:20px!important;
margin:0!important;
}
}
/* 6. WODA Z TWOIM LOGO — 500–620 px jako jeden ciągły układ.
Nie przełączamy kompozycji przy ~568 px. Dla 568–620 zachowujemy
geometrię z widoku 567 px: tę samą szerokość bloku, wysokość HERO,
układ CTA i pozycję tła. */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo,
.aq515-hero--ratio-2400x720.aq515-hero--logo{
min-height:690px!important;
height:auto!important;
background-position:72% bottom!important;
background-size:auto 58%!important;
}
.aq515-hero--logo .aq515-hero__inner{
width:calc(100% - 28px)!important;
max-width:none!important;
min-height:690px!important;
align-items:flex-start!important;
margin-left:14px!important;
margin-right:14px!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:100%!important;
max-width:539px!important;
min-width:0!important;
padding-top:118px!important;
padding-bottom:26px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
width:260px!important;
max-width:260px!important;
gap:9px!important;
margin-top:18px!important;
}
.aq515-hero--logo .aq515-btn{
width:260px!important;
max-width:260px!important;
min-width:0!important;
min-height:40px!important;
padding:8px 10px!important;
font-size:11.5px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — prawidłowa kolejność CTA na mobile.
„ZAPYTAJ O WSPÓŁPRACĘ” zawsze jest pierwsze / u góry. */
@media (min-width:500px) and (max-width:620px){
.aq515-buttons--retail .aq515-cta--contact{
order:1!important;
}
.aq515-buttons--retail .aq515-cta--model{
order:2!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 500–619 px.
Tekst i oba CTA jeszcze mocniej w dół niż w v6.35. */
@media (min-width:500px) and (max-width:619px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:735px!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:735px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
padding-top:150px!important;
padding-bottom:24px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-buttons{
margin-top:14px!important;
}
}
/* 7. DLA SIECI SPRZEDAŻY — 620–920 px.
Zachowujemy układ 620 px z v6.35, ale cały blok tekstowy i CTA
przesuwamy zdecydowanie niżej w całym zakresie, bez wcześniejszego
podciągania treści ku górze wraz ze wzrostem szerokości. */
@media (min-width:620px) and (max-width:920px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:735px!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:735px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
padding-top:132px!important;
padding-bottom:24px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
margin-top:10px!important;
}
.aq515-buttons--retail .aq515-cta--contact{
order:1!important;
}
.aq515-buttons--retail .aq515-cta--model{
order:2!important;
}
}
/* ==========================================================
Aqua One v6.37 — HOME HERO 500–620 px jako jedna kompozycja.
Tekst, tytuł i CTA są bezpośrednio na tym samym zdjęciu co kartonik,
zamiast w osobnym jasnym obszarze nad grafiką.
========================================================== */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--home,
.aq515-hero--home.aq515-hero--ratio-2400x1000{
min-height:650px!important;
height:auto!important;
aspect-ratio:auto!important;
background-size:auto 100%!important;
background-position:55% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
/* Zamiast białego panelu od góry: delikatna maska tylko od lewej,
dzięki czemu zdjęcie pozostaje jedną całością i kartonik jest widoczny. */
.aq515-hero--home::before{
background:linear-gradient(90deg,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.90) 34%,
rgba(255,255,255,.72) 50%,
rgba(255,255,255,.28) 66%,
rgba(255,255,255,0) 84%)!important;
}
.aq515-hero--home .aq515-hero__inner{
min-height:650px!important;
height:650px!important;
align-items:center!important;
}
.aq515-hero--home .aq515-hero__copy{
width:58%!important;
max-width:350px!important;
min-width:0!important;
padding:42px 0 0!important;
margin:0!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--home .aq515-eyebrow{
font-size:clamp(17px,3.4vw,20px)!important;
line-height:1.05!important;
margin-bottom:8px!important;
white-space:normal!important;
}
.aq515-hero--home h1{
font-size:clamp(31px,5.7vw,35px)!important;
line-height:.98!important;
margin-bottom:12px!important;
}
.aq515-hero--home .aq515-hero__lead{
font-size:clamp(13px,2.25vw,14.5px)!important;
line-height:1.25!important;
max-width:330px!important;
margin-bottom:16px!important;
}
.aq515-hero--home .aq515-btn{
width:auto!important;
max-width:260px!important;
min-height:40px!important;
padding:9px 14px!important;
}
}
/* ==========================================================
Aqua One v6.38 — Punkt 7: DLA SIECI SPRZEDAŻY.
Zakres 620–920 px: cały blok tekstowy + CTA mocniej w dół.
========================================================== */
@media (min-width:620px) and (max-width:920px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:760px!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:760px!important;
align-items:flex-start!important;
}
.aq515-hero--retail .aq515-hero__copy{
padding-top:168px!important;
padding-bottom:20px!important;
margin:0!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
margin-top:12px!important;
}
}
/* ==========================================================
Aqua One v6.40 — Punkt 2 / HOME HERO przy dokładnie 620 px.
Ustawienia są teraz rzeczywistym odpowiednikiem widoku 621 px:
ta sama geometria, kompaktowa typografia i CTA mieszczące się w HERO.
========================================================== */
@media (min-width:620px) and (max-width:620px){
.aq515-hero--home,
.aq515-hero--home.aq515-hero--ratio-2400x1000{
min-height:0!important;
height:auto!important;
aspect-ratio:2400 / 1000!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
overflow:hidden!important;
}
.aq515-hero--home::before{
background:linear-gradient(90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.88) 44%,
rgba(255,255,255,.10) 76%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--home .aq515-hero__inner{
width:min(calc(100% - 34px),760px)!important;
min-height:100%!important;
height:100%!important;
align-items:center!important;
}
.aq515-hero--home .aq515-hero__copy{
min-width:0!important;
width:54%!important;
max-width:none!important;
padding:18px 0!important;
margin:0!important;
}
.aq515-hero--home .aq515-eyebrow{
font-size:21px!important;
line-height:1.05!important;
margin-bottom:10px!important;
white-space:normal!important;
}
.aq515-hero--home h1{
font-size:32.3px!important;
line-height:.94!important;
margin-bottom:12px!important;
}
.aq515-hero--home .aq515-hero__lead,
.aq515-hero--home p{
font-size:12px!important;
line-height:1.22!important;
max-width:100%!important;
margin-bottom:14px!important;
}
.aq515-hero--home .aq515-btn{
width:auto!important;
max-width:none!important;
min-height:0!important;
padding:7px 9px!important;
font-size:11px!important;
line-height:1.1!important;
}
}
/* ==========================================================
Aqua One v6.42 — Punkt 6 / WODA Z TWOIM LOGO.
568–619 px nie ma własnego breakpointu: pozostaje dokładnie w tym samym
wariancie mobilnym co 567 px. Dokładnie 620 px przejmuje geometrię 621 px.
========================================================== */
/* 500–619 px — jeden ciągły wariant mobilny. Nie definiujemy osobnej
reguły od 568 px, więc 568–619 dziedziczy dokładnie ten sam układ co 567 px. */
@media (min-width:500px) and (max-width:619px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
aspect-ratio:auto!important;
height:auto!important;
min-height:690px!important;
max-height:none!important;
background-size:auto 58%!important;
background-position:72% bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--logo .aq515-hero__inner{
width:calc(100% - 28px)!important;
max-width:560px!important;
min-height:690px!important;
height:auto!important;
margin-left:auto!important;
margin-right:auto!important;
align-items:flex-start!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:100%!important;
max-width:539px!important;
min-width:0!important;
padding-top:118px!important;
padding-bottom:26px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:flex-start!important;
width:260px!important;
max-width:260px!important;
gap:9px!important;
margin-top:18px!important;
}
.aq515-hero--logo .aq515-btn{
width:260px!important;
max-width:260px!important;
min-width:0!important;
min-height:40px!important;
padding:8px 10px!important;
font-size:11.5px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
/* Dokładnie 620 px — rzeczywiste ustawienia widoku 621 px.
Kluczowa różnica względem v6.41: kontener ma tabletowy margines 17 px
(100% - 34 px), a nie desktopowy 36 px (100% - 72 px). Dzięki temu
blok tekstu ma tę samą szerokość co przy 621 px i oba CTA mieszczą się
w jednym wierszu bez przycinania. */
@media (min-width:620px) and (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:0!important;
height:auto!important;
max-height:none!important;
aspect-ratio:2400 / 1000!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--logo::before{
background:linear-gradient(90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.88) 44%,
rgba(255,255,255,.10) 76%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--logo .aq515-hero__inner.container{
width:min(100% - 34px,760px)!important;
max-width:760px!important;
min-height:100%!important;
height:100%!important;
margin-left:auto!important;
margin-right:auto!important;
align-items:center!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:54%!important;
max-width:550px!important;
min-width:0!important;
padding:18px 0!important;
margin:0!important;
}
.aq515-hero--logo h1{
font-size:clamp(30px,5.2vw,44px)!important;
line-height:.94!important;
margin:0 0 16px!important;
}
.aq515-hero--logo p{
font-size:clamp(12px,1.8vw,15px)!important;
line-height:1.22!important;
margin:0 0 14px!important;
max-width:540px!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
width:max-content!important;
max-width:100%!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-btn{
width:auto!important;
max-width:none!important;
min-width:0!important;
min-height:0!important;
padding:7px 9px!important;
font-size:11px!important;
line-height:1.1!important;
white-space:nowrap!important;
text-align:center!important;
}
}
/* ==========================================================
Aqua One v6.43 — Punkt 6 / WODA Z TWOIM LOGO.
568–619 px: na szerszym mobile treść zajmuje mniej wierszy, przez co
cały blok optycznie podciągał się do góry. Kompensujemy to dodatkowym
opuszczeniem całej kopii (nagłówek + opis + oba CTA), tak aby jej
pozycja wizualna odpowiadała widokowi około 500 px.
Dokładnie 620 px pozostaje bez zmian i nadal korzysta z wariantu 621 px.
========================================================== */
@media (min-width:568px) and (max-width:619px){
.aq515-hero--logo .aq515-hero__copy{
padding-top:clamp(146px, calc(146px + (100vw - 568px) * .42), 168px)!important;
padding-bottom:26px!important;
}
.aq515-hero--logo .aq515-buttons{
margin-top:18px!important;
}
}
/* ==========================================================
Aqua One v6.44 — Punkt 7 / DLA SIECI SPRZEDAŻY.
768–920 px: zwiększona wysokość HERO i bezpieczna strefa dla całego
nagłówka, opisu oraz obu CTA. Zachowujemy obniżony układ treści,
ale dokładamy miejsce na dole, aby nic nie było przycinane.
========================================================== */
@media (min-width:768px) and (max-width:920px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
min-height:clamp(810px,88vw,840px)!important;
height:auto!important;
max-height:none!important;
overflow:hidden!important;
}
.aq515-hero--retail .aq515-hero__inner{
min-height:inherit!important;
height:auto!important;
align-items:flex-start!important;
justify-content:flex-start!important;
padding-bottom:56px!important;
box-sizing:border-box!important;
}
.aq515-hero--retail .aq515-hero__copy{
padding-top:160px!important;
padding-bottom:44px!important;
margin:0!important;
box-sizing:border-box!important;
overflow:visible!important;
}
.aq515-hero--retail h1,
.aq515-hero--retail p,
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
overflow:visible!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
margin-bottom:0!important;
}
}
/* ==========================================================
Aqua One v6.45 — Punkt 7 / DLA SIECI SPRZEDAŻY, 768–920 px.
Przywracamy w całym zakresie ten sam typ kompozycji, który jest
prawidłowy tuż powyżej 920 px: jedno zwarte HERO, tekst na tle po lewej,
kartonik po prawej i oba CTA w jednym poziomym wierszu.
Nadpisuje to wcześniejszy wysoki wariant tabletowy z v6.35–v6.44.
========================================================== */
@media (min-width:768px) and (max-width:920px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:360px!important;
max-height:none!important;
background-size:cover!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--retail::before{
display:none!important;
content:none!important;
}
.aq515-hero--retail .aq515-hero__inner{
width:min(1180px,calc(100% - 46px))!important;
max-width:1180px!important;
min-height:360px!important;
height:360px!important;
margin-left:auto!important;
margin-right:auto!important;
padding:0!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-start!important;
box-sizing:border-box!important;
}
.aq515-hero--retail .aq515-hero__copy{
width:48%!important;
max-width:440px!important;
min-width:0!important;
padding:22px 0 24px!important;
margin:0!important;
background:transparent!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.aq515-hero--retail h1{
width:100%!important;
max-width:none!important;
font-size:clamp(34px,4.35vw,40px)!important;
line-height:.94!important;
letter-spacing:-.045em!important;
margin:0 0 15px!important;
overflow:visible!important;
}
.aq515-hero--retail p{
width:100%!important;
max-width:410px!important;
font-size:clamp(13.5px,1.72vw,16px)!important;
line-height:1.24!important;
margin:0 0 20px!important;
overflow:visible!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-buttons--retail{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
justify-content:flex-start!important;
width:auto!important;
max-width:none!important;
gap:14px!important;
margin:0!important;
overflow:visible!important;
}
.aq515-hero--retail .aq515-btn,
.aq515-buttons--retail .aq515-btn{
width:auto!important;
max-width:none!important;
min-width:0!important;
min-height:42px!important;
padding:9px 17px!important;
font-size:clamp(10.5px,1.22vw,12px)!important;
line-height:1!important;
white-space:nowrap!important;
text-align:center!important;
flex:0 0 auto!important;
}
.aq515-buttons--retail .aq515-cta--contact{order:1!important}
.aq515-buttons--retail .aq515-cta--model{order:2!important}
}
/* ==========================================================
Aqua One v6.47 — Punkt 9 / NASZE OPAKOWANIE.
Mobile do 620 px: delikatnie przyciemniamy górną część HERO,
szczególnie w obszarze kartonika, aby białe opakowanie miało
czytelniejszy kontur i nie zlewało się z bardzo jasnym tłem.
========================================================== */
@media (max-width:620px){
.aq515-hero--pack::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
radial-gradient(ellipse at 78% 18%,
rgba(63,88,105,.11) 0%,
rgba(63,88,105,.075) 24%,
rgba(63,88,105,.03) 42%,
rgba(63,88,105,0) 62%),
linear-gradient(180deg,
rgba(76,101,118,.075) 0%,
rgba(76,101,118,.05) 34%,
rgba(76,101,118,.015) 54%,
rgba(76,101,118,0) 72%)!important;
}
.aq515-hero--pack .aq515-hero__inner{
position:relative!important;
z-index:2!important;
}
}
/* ==========================================================
Aqua One v6.46 — Punkt 10 / ZOSTAŃ DYSTRYBUTOREM.
620–900 px ma jedną wspólną kompozycję — dokładnie ten sam typ
układu, który był zaakceptowany w zakresie 620–768 px:
jedna grafika HERO, treść i CTA w jej obrębie, bez przełączania
na inny wariant przy 769 px.
========================================================== */
@media (min-width:620px) and (max-width:900px){
.aq515-hero--distributor,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:560px!important;
max-height:none!important;
background-image:var(--aq-dist-hero)!important;
background-size:auto 100%!important;
background-position:50% center!important;
background-repeat:no-repeat!important;
background-color:#eef5f9!important;
overflow:hidden!important;
}
.aq515-hero--distributor::after{
content:none!important;
display:none!important;
}
.aq515-hero--distributor::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
background:linear-gradient(90deg,
rgba(238,245,249,.94) 0%,
rgba(238,245,249,.82) 34%,
rgba(238,245,249,.44) 48%,
rgba(238,245,249,.08) 62%,
rgba(238,245,249,0) 74%)!important;
pointer-events:none!important;
}
.aq515-hero--distributor .aq515-hero__inner{
width:min(100% - 34px,1180px)!important;
max-width:1180px!important;
min-height:560px!important;
height:auto!important;
margin-left:auto!important;
margin-right:auto!important;
padding:0!important;
display:flex!important;
flex-direction:row!important;
align-items:flex-start!important;
justify-content:flex-start!important;
position:relative!important;
z-index:2!important;
box-sizing:border-box!important;
}
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:min(48%,350px)!important;
max-width:350px!important;
min-width:0!important;
margin:0!important;
padding:56px 0 36px!important;
background:transparent!important;
z-index:3!important;
box-sizing:border-box!important;
}
.aq515-hero--distributor h1{
width:100%!important;
max-width:350px!important;
font-size:clamp(31px,5.1vw,38px)!important;
line-height:.95!important;
margin:0 0 12px!important;
}
.aq515-hero--distributor p{
width:100%!important;
max-width:330px!important;
font-size:13.5px!important;
line-height:1.24!important;
margin:0 0 14px!important;
}
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:stretch!important;
justify-content:flex-start!important;
width:min(100%,310px)!important;
max-width:310px!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--distributor .aq515-btn{
width:100%!important;
max-width:310px!important;
min-width:0!important;
min-height:40px!important;
padding:8px 10px!important;
font-size:12px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
flex:0 0 auto!important;
}
}
/* ==========================================================
Aqua One v6.48 — Punkt 9 / NASZE OPAKOWANIE.
Finalna korekta tonalna HERO do 620 px: górna część grafiki,
szczególnie za białym kartonikiem, jest subtelnie ciemniejsza.
Dzięki temu kontur opakowania pozostaje czytelny bez zmiany
samego kadrowania, typografii ani kompozycji HERO.
========================================================== */
@media (max-width:620px){
.aq515-hero--pack::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
radial-gradient(ellipse at 78% 18%,
rgba(47,73,92,.18) 0%,
rgba(47,73,92,.13) 23%,
rgba(47,73,92,.065) 42%,
rgba(47,73,92,.018) 58%,
rgba(47,73,92,0) 72%),
linear-gradient(180deg,
rgba(56,82,100,.12) 0%,
rgba(56,82,100,.085) 30%,
rgba(56,82,100,.035) 52%,
rgba(56,82,100,0) 74%)!important;
}
.aq515-hero--pack .aq515-hero__inner{
position:relative!important;
z-index:2!important;
}
}
/* ==========================================================
Aqua One v6.49 — HERO na fizycznych telefonach (<=480 px).
Na realnym mobile treść i CTA są zawsze NAD grafiką produktu.
Kartonik dostaje własny, osobny pas graficzny pod tekstem, więc
przyciski i nagłówki nie mogą już nachodzić na opakowanie.
Zakres 500–620 px pozostaje bez zmian.
========================================================== */
@media (max-width:480px){
/* HOME / KAMPANIE / DLA SIECI / DYSTRYBUTOR — wspólny układ split. */
.aq515-hero--home,
.aq515-hero--campaign,
.aq515-hero--retail,
.aq515-hero--distributor,
.aq515-hero--ratio-2400x1000.aq515-hero--home,
.aq515-hero--ratio-2400x1000.aq515-hero--campaign,
.aq515-hero--ratio-2400x720.aq515-hero--retail,
.aq515-hero--ratio-2400x820.aq515-hero--distributor{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:0!important;
background-image:none!important;
background-color:#f7fbfd!important;
overflow:hidden!important;
}
.aq515-hero--home::before,
.aq515-hero--campaign::before,
.aq515-hero--retail::before,
.aq515-hero--distributor::before{
content:none!important;
display:none!important;
}
.aq515-hero--home .aq515-hero__inner,
.aq515-hero--campaign .aq515-hero__inner,
.aq515-hero--retail .aq515-hero__inner,
.aq515-hero--distributor .aq515-hero__inner{
width:calc(100% - 32px)!important;
max-width:none!important;
min-height:0!important;
height:auto!important;
margin:0 auto!important;
padding:0!important;
display:block!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--home .aq515-hero__copy,
.aq515-hero--campaign .aq515-hero__copy,
.aq515-hero--retail .aq515-hero__copy,
.aq515-hero--distributor .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
padding:30px 0 24px!important;
background:transparent!important;
overflow:visible!important;
z-index:3!important;
box-sizing:border-box!important;
}
/* Osobny pas zdjęcia pod tekstem — żadnego nakładania treści na kartonik. */
.aq515-hero--home::after,
.aq515-hero--campaign::after,
.aq515-hero--retail::after,
.aq515-hero--distributor::after{
content:""!important;
display:block!important;
position:relative!important;
inset:auto!important;
width:100%!important;
margin:0!important;
padding:0!important;
z-index:1!important;
pointer-events:none!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
box-sizing:border-box!important;
}
.aq515-hero--home::after{
height:clamp(300px,82vw,360px)!important;
background-image:var(--aq-mobile-hero)!important;
background-size:auto 100%!important;
background-position:76% center!important;
}
.aq515-hero--campaign::after{
height:clamp(320px,88vw,390px)!important;
background-image:var(--aq-mobile-hero)!important;
background-size:auto 100%!important;
background-position:76% center!important;
}
.aq515-hero--retail::after{
height:clamp(300px,82vw,355px)!important;
background-image:var(--aq-mobile-hero)!important;
background-size:auto 100%!important;
background-position:74% center!important;
}
.aq515-hero--distributor::after{
height:clamp(315px,86vw,375px)!important;
background-image:var(--aq-dist-hero)!important;
background-size:auto 100%!important;
background-position:58% center!important;
}
/* Czytelna, zwarta typografia — treść ma zmieścić się NAD zdjęciem. */
.aq515-hero--home h1,
.aq515-hero--campaign h1,
.aq515-hero--retail h1,
.aq515-hero--distributor h1{
width:100%!important;
max-width:none!important;
font-size:clamp(33px,9.2vw,42px)!important;
line-height:.94!important;
letter-spacing:-.04em!important;
margin:0 0 16px!important;
overflow:visible!important;
}
.aq515-hero--home .aq515-eyebrow{
margin:0 0 12px!important;
font-size:clamp(15px,4.2vw,19px)!important;
line-height:1.05!important;
}
.aq515-hero--home .aq515-hero__lead,
.aq515-hero--home p,
.aq515-hero--campaign p,
.aq515-hero--retail p,
.aq515-hero--distributor p{
width:100%!important;
max-width:none!important;
font-size:clamp(14px,3.7vw,16px)!important;
line-height:1.28!important;
margin:0 0 18px!important;
}
/* Przyciski nad zdjęciem i w naturalnej kolejności z HTML. */
.aq515-hero--campaign .aq515-buttons,
.aq515-hero--retail .aq515-buttons,
.aq515-hero--distributor .aq515-buttons{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:flex-start!important;
justify-content:flex-start!important;
width:min(100%,330px)!important;
max-width:330px!important;
gap:9px!important;
margin:0!important;
overflow:visible!important;
}
.aq515-hero--campaign .aq515-btn,
.aq515-hero--retail .aq515-btn,
.aq515-hero--distributor .aq515-btn{
width:100%!important;
max-width:330px!important;
min-width:0!important;
min-height:42px!important;
padding:9px 12px!important;
font-size:12px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
flex:0 0 auto!important;
}
.aq515-hero--home .aq515-btn{
width:auto!important;
max-width:300px!important;
min-height:42px!important;
padding:9px 18px!important;
font-size:12px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
.aq515-buttons--campaign .aq515-cta--plan{order:1!important}
.aq515-buttons--campaign .aq515-cta--possibilities{order:2!important}
.aq515-buttons--retail .aq515-cta--contact{order:1!important}
.aq515-buttons--retail .aq515-cta--model{order:2!important}
.aq515-hero--distributor .aq515-buttons > :first-child{order:1!important}
.aq515-hero--distributor .aq515-buttons > :last-child{order:2!important}
/* NASZA WODA — również czysty split: tekst nad osobnym zdjęciem. */
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:0!important;
background-image:none!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--water::before{
content:none!important;
display:none!important;
}
.aq515-hero--water .aq515-hero__inner{
width:calc(100% - 32px)!important;
max-width:none!important;
min-height:0!important;
height:auto!important;
margin:0 auto!important;
padding:0!important;
display:block!important;
}
.aq515-hero--water .aq515-hero__copy{
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
padding:30px 0 24px!important;
background:transparent!important;
}
.aq515-hero--water h1{
width:100%!important;
max-width:none!important;
font-size:clamp(32px,8.7vw,40px)!important;
line-height:.94!important;
margin:0 0 18px!important;
}
.aq515-hero--water h1 .aq515-water-title-line{
display:block!important;
white-space:normal!important;
}
.aq515-hero--water p{
width:100%!important;
max-width:none!important;
font-size:clamp(14px,3.7vw,16px)!important;
line-height:1.3!important;
margin:0!important;
}
.aq515-water-hero-mobile-art,
.aq515-hero--water .aq515-water-hero-mobile-art{
display:block!important;
width:100%!important;
height:clamp(260px,70vw,315px)!important;
margin:0!important;
overflow:hidden!important;
background:#eef6fb!important;
}
.aq515-water-hero-mobile-art img,
.aq515-hero--water .aq515-water-hero-mobile-art img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:72% center!important;
}
}
/* ==========================================================
Aqua One v6.50 — mobile distributor hero art.
On the ZOSTAŃ DYSTRYBUTOREM page the client wants the hero
image shifted slightly LEFT on real phones so the cut Poland
map on the right edge remains visible together with the carton.
========================================================== */
@media (max-width:480px){
.aq515-hero--distributor::after{
background-position:74% center!important;
}
}
/* ==========================================================
Aqua One v6.51 — mobile HERO / WODA Z TWOIM LOGO.
Na telefonach oba CTA mają znajdować się nad częścią graficzną,
bez zasłaniania kartonika. Zwiększamy więc pionowy zapas sekcji,
utrzymujemy pełną szerokość bloku tekstowego i odkładamy obraz
niżej w kadrze.
========================================================== */
@media (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo,
.aq515-hero--ratio-2400x720.aq515-hero--logo{
aspect-ratio:auto!important;
height:auto!important;
min-height:760px!important;
max-height:none!important;
background-size:auto 50%!important;
background-position:74% bottom!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--logo::before{
background:linear-gradient(180deg,
rgba(255,255,255,.97) 0%,
rgba(255,255,255,.93) 46%,
rgba(255,255,255,.56) 64%,
rgba(255,255,255,.16) 80%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--logo .aq515-hero__inner{
min-height:760px!important;
height:auto!important;
align-items:flex-start!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:100%!important;
max-width:none!important;
min-width:0!important;
padding-top:52px!important;
padding-bottom:190px!important;
margin:0!important;
position:relative!important;
z-index:3!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
width:100%!important;
max-width:none!important;
gap:12px!important;
margin-top:18px!important;
}
.aq515-hero--logo .aq515-btn{
width:100%!important;
max-width:none!important;
min-width:0!important;
min-height:44px!important;
padding:10px 14px!important;
font-size:13px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
@media (max-width:480px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo,
.aq515-hero--ratio-2400x720.aq515-hero--logo{
min-height:820px!important;
background-size:auto 47%!important;
background-position:74% bottom!important;
}
.aq515-hero--logo .aq515-hero__inner{
min-height:820px!important;
}
.aq515-hero--logo .aq515-hero__copy{
padding-bottom:230px!important;
}
}
/* ==========================================================
Aqua One v6.52 — Punkt 7 / DLA SIECI SPRZEDAŻY.
Zakres 500–767 px: tekst i CTA mają być NAD zdjęciem, bez
zasłaniania kartonika. Przebudowujemy HERO na układ split:
treść u góry, grafika w osobnym paśmie pod spodem.
========================================================== */
@media (min-width:500px) and (max-width:767px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
padding:0!important;
background-image:none!important;
background-color:#f7fbfd!important;
overflow:hidden!important;
}
.aq515-hero--retail::before{
content:none!important;
display:none!important;
}
.aq515-hero--retail .aq515-hero__inner{
width:calc(100% - 44px)!important;
max-width:none!important;
min-height:0!important;
height:auto!important;
margin:0 auto!important;
padding:0!important;
display:block!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--retail .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
padding:46px 0 18px!important;
background:transparent!important;
overflow:visible!important;
z-index:3!important;
box-sizing:border-box!important;
}
.aq515-hero--retail h1{
width:100%!important;
max-width:none!important;
margin:0 0 18px!important;
font-size:clamp(50px,7.5vw,62px)!important;
line-height:.92!important;
letter-spacing:-.045em!important;
}
.aq515-hero--retail p{
width:100%!important;
max-width:92%!important;
margin:0 0 18px!important;
font-size:clamp(17px,2.4vw,21px)!important;
line-height:1.24!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-hero--retail .aq515-buttons--retail{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:flex-start!important;
justify-content:flex-start!important;
width:min(100%,340px)!important;
max-width:340px!important;
gap:12px!important;
margin:0!important;
overflow:visible!important;
}
.aq515-buttons--retail .aq515-cta--contact{order:1!important}
.aq515-buttons--retail .aq515-cta--model{order:2!important}
.aq515-hero--retail .aq515-btn,
.aq515-hero--retail .aq515-buttons--retail .aq515-btn{
width:100%!important;
max-width:340px!important;
min-width:0!important;
min-height:48px!important;
padding:11px 16px!important;
font-size:14px!important;
line-height:1.14!important;
white-space:normal!important;
text-align:center!important;
flex:0 0 auto!important;
}
.aq515-hero--retail::after{
content:""!important;
display:block!important;
position:relative!important;
width:100%!important;
height:clamp(340px,48vw,420px)!important;
margin:0!important;
padding:0!important;
z-index:1!important;
pointer-events:none!important;
background-image:var(--aq-mobile-hero)!important;
background-repeat:no-repeat!important;
background-size:auto 100%!important;
background-position:72% center!important;
background-color:#eef6fb!important;
box-sizing:border-box!important;
}
}
/* ==========================================================
Aqua One v6.53 — Punkt 7 / DLA SIECI SPRZEDAŻY.
Zakres 500–767 px: obniżamy blok treści tak, aby akapit
kończył się przy górnej krawędzi obrazka, a CTA wchodziły
na obrazek, nie zasłaniając kartonika.
========================================================== */
@media (min-width:500px) and (max-width:767px){
.aq515-hero--retail .aq515-hero__copy{
padding:58px 0 0!important;
}
.aq515-hero--retail p{
margin:0 0 10px!important;
max-width:100%!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-hero--retail .aq515-buttons--retail{
position:relative!important;
z-index:5!important;
margin:0 0 -96px!important;
width:min(100%,360px)!important;
max-width:360px!important;
gap:10px!important;
}
.aq515-hero--retail .aq515-btn,
.aq515-hero--retail .aq515-buttons--retail .aq515-btn{
max-width:360px!important;
}
.aq515-hero--retail::after{
height:clamp(420px,62vw,500px)!important;
background-position:76% center!important;
}
}
/* ==========================================================
Aqua One v6.54 — Punkt 9 / NASZE OPAKOWANIE.
Mobile i zakres 500–620 px: bardziej naturalny, żywszy HERO.
Podmienione zostaje tło na nieco wyraźniejszy wariant oraz
osłabiona zostaje szarawa maska, która wcześniej zbyt mocno
tłumiła kontrast i kolorystykę fotografii.
========================================================== */
@media (max-width:620px){
.aq515-hero--pack,
.aq515-hero--pack.aq515-hero--ratio-2400x720{
background-image:url('../client/07_NASZE_OPAKOWANIE/01-hero-nasze-opakowanie-mobile.webp')!important;
background-position:68% center!important;
background-size:auto 100%!important;
background-repeat:no-repeat!important;
background-color:#f4f8fb!important;
}
.aq515-hero--pack::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
radial-gradient(ellipse at 79% 16%,
rgba(70,109,137,.12) 0%,
rgba(70,109,137,.07) 22%,
rgba(70,109,137,.025) 42%,
rgba(70,109,137,0) 60%),
linear-gradient(180deg,
rgba(255,255,255,.06) 0%,
rgba(255,255,255,.02) 36%,
rgba(255,255,255,0) 64%)!important;
}
.aq515-hero--pack .aq515-hero__inner{
position:relative!important;
z-index:2!important;
}
}
/* ==========================================================
Aqua One v6.58 — mobile / Woda w kartoniku z Twoim logo.
Dalsze obniżenie kartonika na telefonach:
- między dolną krawędzią CTA a częścią graficzną zostaje
tylko niewielka przerwa,
- sam kartonik schodzi niżej i nie jest zasłaniany,
- całość zachowuje czytelny, spójny układ mobilny.
========================================================== */
@media (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:640px!important;
background-position:74% calc(100% + 34px)!important;
background-size:auto 54%!important;
background-color:#eef6fb!important;
}
.aq515-hero--logo .aq515-hero__inner{
min-height:inherit!important;
display:flex!important;
align-items:flex-start!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:100%!important;
min-width:0!important;
padding-top:78px!important;
padding-bottom:10px!important;
}
.aq515-hero--logo p{
margin:0 0 14px!important;
}
.aq515-hero--logo .aq515-buttons{
margin-top:0!important;
margin-bottom:0!important;
gap:10px!important;
}
}
@media (max-width:480px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:642px!important;
background-position:74% calc(100% + 42px)!important;
background-size:auto 51%!important;
}
.aq515-hero--logo .aq515-hero__copy{
padding-bottom:8px!important;
}
}
/* ==========================================================
Aqua One v6.56 — STRONA GŁÓWNA / HERO 901–1050 px.
Pierwszy wiersz tytułu "WODA W KARTONIKU" ma pozostać
w jednej linii. Poszerzamy blok copy i lekko stabilizujemy
skalę fontu w tym pośrednim zakresie, bez zmiany układu
poniżej 901 px i powyżej 1050 px.
========================================================== */
@media (min-width:901px) and (max-width:1050px){
.aq515-hero--home .aq515-hero__copy{
width:62%!important;
max-width:640px!important;
min-width:0!important;
}
.aq515-hero--home h1{
font-size:clamp(45px,4.65vw,50px)!important;
white-space:nowrap!important;
}
}
/* ==========================================================
Aqua One v6.59 — WODA Z TWOIM LOGO.
1) Mobile: kartonik pozostaje niżej, ale cały mieści się w kadrze.
Między dolnym CTA a początkiem grafiki zostaje mała, stała przerwa.
2) 500–620 px: ujednolicony wariant pośredni, bez nachodzenia CTA
na obrazek przy testach desktopowych na zawężonym oknie.
========================================================== */
@media (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:688px!important;
background-position:74% bottom!important;
background-size:auto 52%!important;
background-color:#eef6fb!important;
}
.aq515-hero--logo .aq515-hero__inner{
min-height:inherit!important;
display:flex!important;
align-items:flex-start!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:100%!important;
min-width:0!important;
padding-top:78px!important;
padding-bottom:18px!important;
}
.aq515-hero--logo p{
margin:0 0 14px!important;
}
.aq515-hero--logo .aq515-buttons{
margin-top:0!important;
margin-bottom:0!important;
gap:10px!important;
}
}
@media (max-width:480px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:700px!important;
background-position:74% bottom!important;
background-size:auto 49%!important;
}
.aq515-hero--logo .aq515-hero__copy{
padding-bottom:16px!important;
}
}
@media (min-width:500px) and (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:360px!important;
height:auto!important;
max-height:none!important;
aspect-ratio:auto!important;
background-size:100% auto!important;
background-position:center center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--logo::before{
background:linear-gradient(90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.89) 43%,
rgba(255,255,255,.18) 72%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--logo .aq515-hero__inner.container{
width:min(100% - 34px,760px)!important;
max-width:760px!important;
min-height:360px!important;
height:auto!important;
margin-left:auto!important;
margin-right:auto!important;
align-items:flex-start!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:min(56%,335px)!important;
max-width:335px!important;
min-width:0!important;
padding:20px 0 18px!important;
margin:0!important;
}
.aq515-hero--logo h1{
font-size:clamp(28px,5vw,42px)!important;
line-height:.94!important;
margin:0 0 14px!important;
}
.aq515-hero--logo p{
font-size:clamp(11px,1.7vw,14px)!important;
line-height:1.23!important;
margin:0 0 12px!important;
max-width:100%!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:column!important;
flex-wrap:nowrap!important;
align-items:stretch!important;
width:min(100%,250px)!important;
max-width:250px!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-btn{
width:100%!important;
max-width:250px!important;
min-width:0!important;
min-height:0!important;
padding:7px 10px!important;
font-size:11px!important;
line-height:1.12!important;
white-space:normal!important;
text-align:center!important;
}
}
@media (min-width:580px) and (max-width:620px){
.aq515-hero--logo .aq515-hero__copy{
width:54%!important;
max-width:550px!important;
padding:18px 0!important;
}
.aq515-hero--logo .aq515-buttons{
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
width:max-content!important;
max-width:100%!important;
gap:8px!important;
}
.aq515-hero--logo .aq515-btn{
width:auto!important;
max-width:none!important;
padding:7px 8px!important;
font-size:10.5px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
}
/* ==========================================================
Aqua One v6.60 — WODA Z TWOIM LOGO / łamanie tytułu HERO.
Klient chce zawsze dokładnie 2 linie:
1) WODA W KARTONIKU
2) Z TWOIM LOGO
Korygujemy problematyczne zakresy 901–932 px oraz 1373+ px.
========================================================== */
@media (min-width:901px) and (max-width:932px){
.aq515-hero--logo .aq515-hero__copy{
width:56%!important;
max-width:560px!important;
min-width:0!important;
}
.aq515-hero--logo h1{
font-size:clamp(41px,4.2vw,44px)!important;
white-space:nowrap!important;
margin:0 0 16px!important;
}
.aq515-hero--logo h1 span{
display:block!important;
}
}
@media (min-width:1373px){
.aq515-hero--logo .aq515-hero__copy{
width:min(620px,50%)!important;
max-width:620px!important;
min-width:0!important;
}
.aq515-hero--logo h1{
font-size:clamp(42px,3.2vw,54px)!important;
white-space:nowrap!important;
margin:0 0 16px!important;
}
.aq515-hero--logo h1 span{
display:block!important;
}
}
/* ==========================================================
Aqua One v6.61 — WODA Z TWOIM LOGO / desktop 500–620 px.
Zakres 500–620 px ma wizualnie zachowywać się jak 621–623 px:
pełna grafika w proporcji 2400×1000, bez zsuwania obrazka w dół,
copy po lewej i oba CTA w jednym rzędzie nad grafiką.
========================================================== */
@media (min-width:500px) and (max-width:620px){
.aq515-hero--logo,
.aq515-hero--ratio-2400x1000.aq515-hero--logo{
min-height:0!important;
height:auto!important;
max-height:none!important;
aspect-ratio:2400 / 1000!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--logo::before{
background:linear-gradient(90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.88) 44%,
rgba(255,255,255,.10) 76%,
rgba(255,255,255,0) 100%)!important;
}
.aq515-hero--logo .aq515-hero__inner.container{
width:min(100% - 34px,760px)!important;
max-width:760px!important;
min-height:100%!important;
height:100%!important;
margin-left:auto!important;
margin-right:auto!important;
display:flex!important;
align-items:center!important;
}
.aq515-hero--logo .aq515-hero__copy{
width:54%!important;
max-width:550px!important;
min-width:0!important;
padding:18px 0!important;
margin:0!important;
}
.aq515-hero--logo h1{
font-size:clamp(28px,5.2vw,34px)!important;
line-height:.94!important;
margin:0 0 14px!important;
white-space:nowrap!important;
}
.aq515-hero--logo h1 span{
display:block!important;
}
.aq515-hero--logo p{
font-size:clamp(11px,1.8vw,13px)!important;
line-height:1.22!important;
margin:0 0 12px!important;
max-width:100%!important;
}
.aq515-hero--logo .aq515-buttons{
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
width:max-content!important;
max-width:100%!important;
gap:8px!important;
margin:0!important;
}
.aq515-hero--logo .aq515-btn{
width:auto!important;
max-width:none!important;
min-width:0!important;
min-height:0!important;
padding:7px 8px!important;
font-size:10.5px!important;
line-height:1.1!important;
white-space:nowrap!important;
text-align:center!important;
}
}
/* ==========================================================
Aqua One v6.62 — WODA Z TWOIM LOGO / 500–550 px.
Długi CTA „ZOBACZ MOŻLIWOŚCI PERSONALIZACJI” mieści się
w całości w obramowaniu przy zachowaniu układu w jednym rzędzie.
========================================================== */
@media (min-width:500px) and (max-width:550px){
.aq515-hero--logo .aq515-buttons{
gap:5px!important;
}
.aq515-hero--logo .aq515-btn{
flex:0 1 auto!important;
padding:6px 5px!important;
font-size:8.8px!important;
line-height:1.08!important;
letter-spacing:0!important;
white-space:nowrap!important;
}
}
/* ==========================================================
Aqua One v6.63 — KAMPANIE REKLAMOWE / dokładnie 620 px.
Granica 620/621 px ma być wizualnie identyczna. Przy 620 px
wyłączamy reguły mobilne i odtwarzamy geometrię widoku 621 px:
proporcja 2400×1000, tło w pełnej szerokości, copy 54% i CTA
w standardowym układzie tabletowym.
========================================================== */
@media (min-width:620px) and (max-width:620px){
.aq515-hero--campaign,
.aq515-hero--ratio-2400x1000.aq515-hero--campaign{
display:block!important;
min-height:0!important;
height:auto!important;
max-height:none!important;
aspect-ratio:2400 / 1000!important;
background-image:var(--aq-mobile-hero)!important;
background-size:100% auto!important;
background-position:center top!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--campaign::before{
content:""!important;
display:block!important;
position:absolute!important;
inset:0!important;
background:linear-gradient(90deg,
rgba(255,255,255,.98) 0%,
rgba(255,255,255,.88) 44%,
rgba(255,255,255,.10) 76%,
rgba(255,255,255,0) 100%)!important;
pointer-events:none!important;
}
.aq515-hero--campaign .aq515-hero__inner.container{
width:min(100% - 34px,760px)!important;
max-width:760px!important;
min-height:100%!important;
height:100%!important;
margin-left:auto!important;
margin-right:auto!important;
display:flex!important;
align-items:center!important;
position:relative!important;
z-index:2!important;
}
.aq515-hero--campaign .aq515-hero__copy{
width:54%!important;
max-width:none!important;
min-width:0!important;
padding:18px 0!important;
margin:0!important;
position:relative!important;
z-index:3!important;
}
.aq515-hero--campaign h1{
font-size:clamp(30px,5.2vw,44px)!important;
line-height:.94!important;
margin:0 0 16px!important;
}
.aq515-hero--campaign p{
font-size:clamp(12px,1.8vw,15px)!important;
line-height:1.22!important;
max-width:540px!important;
margin:0 0 14px!important;
}
.aq515-hero--campaign .aq515-buttons,
.aq515-hero--campaign .aq515-buttons--campaign{
display:flex!important;
flex-direction:row!important;
flex-wrap:wrap!important;
align-items:center!important;
width:auto!important;
max-width:none!important;
gap:14px!important;
margin:0!important;
}
.aq515-buttons--campaign .aq515-cta--plan{order:1!important}
.aq515-buttons--campaign .aq515-cta--possibilities{order:2!important}
.aq515-hero--campaign .aq515-btn{
width:auto!important;
max-width:none!important;
min-width:0!important;
min-height:42px!important;
padding:7px 9px!important;
font-size:11px!important;
line-height:1.1!important;
white-space:nowrap!important;
text-align:center!important;
}
}
/* ==========================================================
Aqua One v6.64 — DLA SIECI SPRZEDAŻY / HERO 500–767 px.
Ujednolicenie z prawidłowym widokiem 768 px i ze schematem
responsywnym strony „Woda z Twoim logo”:
- jedna zwarta kompozycja HERO,
- tekst po lewej, kartonik po prawej,
- oba CTA w jednym rzędzie,
- bez osobnego dolnego pasa zdjęcia,
- delikatne przesunięcie kartonika w lewo.
========================================================== */
@media (min-width:500px) and (max-width:767px){
.aq515-hero--retail,
.aq515-hero--ratio-2400x720.aq515-hero--retail{
display:block!important;
aspect-ratio:auto!important;
height:auto!important;
min-height:clamp(330px,46vw,360px)!important;
max-height:none!important;
padding:0!important;
background-image:var(--aq-mobile-hero)!important;
background-size:cover!important;
background-position:58% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
overflow:hidden!important;
}
.aq515-hero--retail::before,
.aq515-hero--retail::after{
content:none!important;
display:none!important;
}
.aq515-hero--retail .aq515-hero__inner{
width:min(1180px,calc(100% - 34px))!important;
max-width:1180px!important;
min-height:clamp(330px,46vw,360px)!important;
height:clamp(330px,46vw,360px)!important;
margin-left:auto!important;
margin-right:auto!important;
padding:0!important;
display:flex!important;
flex-direction:row!important;
align-items:center!important;
justify-content:flex-start!important;
position:relative!important;
z-index:2!important;
box-sizing:border-box!important;
}
.aq515-hero--retail .aq515-hero__copy{
position:relative!important;
inset:auto!important;
transform:none!important;
width:57%!important;
max-width:440px!important;
min-width:0!important;
margin:0!important;
padding:18px 0 20px!important;
background:transparent!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.aq515-hero--retail h1{
width:100%!important;
max-width:none!important;
font-size:clamp(25px,4.75vw,39px)!important;
line-height:.94!important;
letter-spacing:-.045em!important;
margin:0 0 clamp(10px,1.7vw,15px)!important;
overflow:visible!important;
}
.aq515-hero--retail h1 span{
display:block!important;
white-space:nowrap!important;
}
.aq515-hero--retail p{
width:100%!important;
max-width:410px!important;
font-size:clamp(10.5px,1.72vw,16px)!important;
line-height:1.24!important;
margin:0 0 clamp(12px,2vw,20px)!important;
overflow:visible!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-hero--retail .aq515-buttons--retail{
position:static!important;
display:flex!important;
flex-direction:row!important;
flex-wrap:nowrap!important;
align-items:center!important;
justify-content:flex-start!important;
width:max-content!important;
max-width:100%!important;
gap:clamp(7px,1.5vw,14px)!important;
margin:0!important;
overflow:visible!important;
}
.aq515-buttons--retail .aq515-cta--contact{order:1!important}
.aq515-buttons--retail .aq515-cta--model{order:2!important}
.aq515-hero--retail .aq515-btn,
.aq515-hero--retail .aq515-buttons--retail .aq515-btn{
width:auto!important;
max-width:none!important;
min-width:0!important;
min-height:38px!important;
padding:8px clamp(9px,1.55vw,17px)!important;
font-size:clamp(8.2px,1.22vw,12px)!important;
line-height:1!important;
white-space:nowrap!important;
text-align:center!important;
flex:0 0 auto!important;
}
}
/* W najwęższym fragmencie 500–550 px zachowujemy ten sam schemat,
ale lekko kompresujemy CTA, żeby oba zawsze mieściły się w jednym rzędzie. */
@media (min-width:500px) and (max-width:550px){
.aq515-hero--retail .aq515-hero__copy{
width:60%!important;
}
.aq515-hero--retail .aq515-buttons,
.aq515-hero--retail .aq515-buttons--retail{
gap:6px!important;
}
.aq515-hero--retail .aq515-btn,
.aq515-hero--retail .aq515-buttons--retail .aq515-btn{
min-height:36px!important;
padding:7px 8px!important;
font-size:8px!important;
}
}
/* ==========================================================
Aqua One v6.65 — DLA SIECI SPRZEDAŻY / HERO 500–767 px.
Zmniejszenie odstępu między 1. i 2. linią nagłówka do wartości
zgodnej z widokiem 768 px+. W v6.64 span był blokowy, a pozostawione
tworzyło dodatkowy pusty skok między liniami.
========================================================== */
@media (min-width:500px) and (max-width:767px){
.aq515-hero--retail h1 br{
display:none!important;
}
.aq515-hero--retail h1 span{
display:block!important;
margin-bottom:0!important;
line-height:inherit!important;
}
}
/* ==========================================================
Aqua One v6.66 — NASZA WODA / HERO 620–1052 px.
Finalna korekta po odbiorze klienta: przy ok. 620, 768 i 900 px
prawa krawędź kartonika była ucinana przez tło skalowane na 100%
wysokości. Delikatnie zmniejszamy grafikę i przesuwamy kadr w prawo
(sam kartonik wizualnie w lewo), dzięki czemu całe opakowanie pozostaje
widoczne w całym zakresie tabletowym bez zmiany układu tekstu.
========================================================== */
@media (min-width:620px) and (max-width:1052px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
background-image:var(--aq-water-hero)!important;
background-size:auto 90%!important;
background-position:90% center!important;
background-repeat:no-repeat!important;
background-color:#eef6fb!important;
}
.aq515-water-hero-mobile-art,
.aq515-hero--water .aq515-water-hero-mobile-art{
display:none!important;
visibility:hidden!important;
height:0!important;
min-height:0!important;
overflow:hidden!important;
}
}
/* Przy najwęższym końcu zakresu zostawiamy odrobinę więcej miejsca
po prawej stronie kartonika, bez wchodzenia produktu w blok tekstowy. */
@media (min-width:620px) and (max-width:700px){
.aq515-hero--water,
.aq515-hero--water.aq515-hero--ratio-2400x1000{
background-size:auto 88%!important;
background-position:88% center!important;
}
}
/* ==========================================================
Aqua One v6.67 — Core Web Vitals / performance.
Bez zmian wizualnych: ten sam kadr HERO, ale lżejszy plik w mobile.
Copy HERO nie korzysta już z animacji reveal, aby LCP nie czekał na JS.
========================================================== */
@media (min-width:481px) and (max-width:620px){
.aq515-hero--home,
.aq515-hero--home.aq515-hero--ratio-2400x1000{
background-image:var(--aq-mobile-hero)!important;
}
}
.aq515-brand-story--static-art .aq515-brand-story__art picture{display:block}