body.home{background:#fff}
/* Banners span the window up to 1440 px; wider (big screens, zoomed out) they stop growing and shrink with the rest of the page. */
.home-banner,.home-trust{max-width:1440px;margin-inline:auto}
.home-banner a{display:block}
.home-banner img{display:block;width:100%;height:auto}
body.home main{padding:0 0 56px}
.home-hero{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 0 0}
.home-hero__main{position:relative;display:flex;align-items:center;min-height:clamp(360px,30vw,520px);overflow:hidden;background:linear-gradient(115deg,#0344a9 0%,#0344a9 58%,#0a4fbd 58%,#0a4fbd 74%,#125bcf 74%);color:#fff}
.home-hero__body{position:relative;z-index:1;padding:48px 0}
.home-hero__body>*{max-width:540px}
.home-hero__main .home-hero__image{position:absolute;z-index:0;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:right center}
.home-hero__main--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#03265ff2 0%,#03265fd9 30%,#03265f59 55%,#03265f00 75%)}
.home-hero__eyebrow{margin:0 0 12px;font-size:13px;font-weight:600;letter-spacing:.4px;color:#c3d6f5}
.home-hero__main h1{margin:0 0 14px;font-size:clamp(28px,3.3vw,42px);font-weight:700;line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.home-hero__text{margin:0 0 26px;font-size:16px;line-height:1.55;color:#dbe6f8}
.home-hero__actions{display:flex;flex-wrap:wrap;gap:10px}
.home-button{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border:1px solid #fff;border-radius:var(--radius);background:#fff;color:#0344a9;font-size:15px;font-weight:600;transition:background .15s,color .15s,border-color .15s}
.home-button:hover{background:#e8effb}
.home-button--ghost{border-color:#ffffff73;background:none;color:#fff}
.home-button--ghost:hover{background:#ffffff1f;border-color:#fff}
.home-hero__main :focus-visible,.home-promo:focus-visible{outline-color:#ffc220}
.home-promo{position:relative;display:flex;align-items:flex-end;min-height:172px;border-radius:var(--radius);overflow:hidden;background:#0b1f3f;color:#fff}
.home-promo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.home-promo:hover img{transform:scale(1.04)}
.home-promo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b1f3fe6 0%,#0b1f3f80 50%,#0b1f3f00 85%)}
.home-promo__body{position:relative;z-index:1;padding:18px 20px}
.home-promo__eyebrow{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:var(--radius);background:#fff;color:#1a2233;font-size:12px;font-weight:600}
.home-promo h2{margin:0;font-size:19px;font-weight:700;line-height:1.25}
.home-promo__price{margin:2px 0 0;font-size:14px;color:#dbe2ec}
.home-promo__price strong{font-size:16px;color:#fff;white-space:nowrap}

.home-benefits{border-bottom:1px solid #e3e6ea;background:#fff}
.home-benefits ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto;padding:28px 0;list-style:none}
.home-benefits li{display:flex;align-items:center;gap:16px;padding:20px 24px}
.home-benefits li:first-child{padding-left:0}
.home-benefits li+li{border-left:1px solid #e3e6ea}
.home-benefits svg{flex:0 0 40px;width:40px;height:40px;fill:none;stroke:#0344a9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.home-benefits strong{display:block;margin-bottom:2px;font-size:17px;font-weight:600;line-height:1.3}
.home-benefits span{display:block;font-size:14px;line-height:1.4;color:#667085}

.home-section{display:flex;flex-direction:column;padding-top:56px}
.home-heading{display:contents}
.home-heading>div{order:1;margin-bottom:28px;text-align:center}
.home-heading h2{display:inline-block;position:relative;margin:0;padding-bottom:16px;font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.home-heading h2::after{content:"";position:absolute;left:50%;bottom:0;width:48px;height:3px;margin-left:-24px;border-radius:var(--radius);background:var(--accent)}
.home-heading .home-heading__empty{display:block;width:240px;height:34px;margin:0 auto 16px;padding:0;border-radius:var(--radius);background:#e4e7ec}
.home-heading .home-heading__empty::after{display:none}
.home-section>.home-cats,.home-section>.product-grid,.home-section>.home-faq__list{order:2}
.home-heading__link{order:3;display:inline-flex;align-items:center;align-self:center;gap:8px;margin-top:28px;padding:13px 28px;border-radius:var(--radius);background:var(--accent);color:#fff;font-size:15px;font-weight:600;line-height:1.2;white-space:nowrap;transition:background .15s,box-shadow .15s}
.home-heading__link span{transition:transform .15s}
.home-heading__link:hover{background:#022f78;box-shadow:0 6px 16px #0344a940}
.home-heading__link:hover span{transform:translateX(4px)}

.home-cats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}

.home-spotlight{padding-top:36px}
.home-spotlight__row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;padding:24px;border:1px solid #e3e6ea;border-radius:var(--radius);background:#fff}
.home-spotlight__row>*{min-width:0}
.home-spotlight__media{display:block;border-radius:var(--radius);overflow:hidden;background:#e9ecf0}
.home-spotlight__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.home-spotlight__body{padding:8px 12px 8px 0}
.home-spotlight .eyebrow{display:inline-block;margin:0 0 12px;padding:2px 8px;border-radius:var(--radius);background:#e8effb;color:#0344a9;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none}
.home-spotlight h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px);font-weight:700;line-height:1.2}
.home-spotlight__lead{margin:0 0 10px;font-size:16px;font-weight:600}
.home-spotlight__body>p:not([class]){margin:0 0 22px;font-size:15px;color:#667085}
.home-spotlight__buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.home-spotlight__buy .card-price{margin:0}.home-spotlight__buy .card-price strong{font-size:28px}
.home-spotlight__buy .button{gap:8px;padding:13px 22px}

.home-newsletter{margin-top:44px;background:linear-gradient(115deg,#0344a9 0%,#0344a9 62%,#0a4fbd 62%,#0a4fbd 80%,#125bcf 80%);color:#fff}
.home-newsletter__row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,3.6vw,48px) 0}
.home-newsletter h2{margin:0 0 6px;font-size:clamp(22px,2.2vw,28px);font-weight:700;line-height:1.2}
.home-newsletter p{margin:0;font-size:15px;line-height:1.5;color:#dbe6f8}
.home-newsletter__form{display:flex;height:50px;border-radius:var(--radius);overflow:hidden;background:#fff}
.home-newsletter .home-newsletter__form .float>input:focus{box-shadow:none}
.home-newsletter__form input{width:100%;height:100%;padding:16px 16px 0;border:0;background:none;color:#1a2233;font-size:15px;outline:0}
.home-newsletter__form .float>span{left:16px}
.home-newsletter__form button{flex:none;padding:0 24px;border:0;background:#ffc220;color:#1a2233;font-size:15px;font-weight:700;transition:background .15s}
.home-newsletter__form button:hover{background:#ffb000}
.home-newsletter__form button:focus-visible{outline-offset:-4px;outline-color:#1a2233}
.home-newsletter .home-newsletter__done{display:flex;align-items:center;gap:12px;min-height:50px;margin:0;color:#fff;font-size:17px;font-weight:700;line-height:1.35}
.home-newsletter__done[hidden],.home-newsletter__form[hidden]{display:none}
/* While the address is being "sent": the button keeps its size, its text gives way to a spinner. */
.home-newsletter__form button{position:relative}
.home-newsletter__form.is-busy button{color:transparent;background:#ffc220;opacity:1;cursor:default}
.home-newsletter__form.is-busy button::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2.5px solid #1a223340;border-top-color:#1a2233;border-radius:50%;animation:newsletter-spin .7s linear infinite}
@keyframes newsletter-spin{to{transform:rotate(360deg)}}
.home-newsletter .home-newsletter__done:not([hidden]){animation:newsletter-in .35s ease-out}
@keyframes newsletter-in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.home-newsletter__form.is-busy button::after{animation-duration:1.6s}.home-newsletter .home-newsletter__done:not([hidden]){animation:none}}
.home-newsletter__done svg{flex:none;width:30px;height:30px;fill:none;stroke:#ffc220;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* FAQ like the product specification: an open list with thin dividers, a dark question and the blue chevron of the store buttons. */
.home-faq__list{width:100%;max-width:880px;margin:0 auto;border-top:1px solid #e3e7ed}
.home-faq details{border-bottom:1px solid #e3e7ed}
.home-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;color:#1a2233;font-size:16px;font-weight:600;line-height:1.4;cursor:pointer;list-style:none;transition:color .15s}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary:hover{color:var(--accent)}
.home-faq summary::after{content:"";flex:none;width:18px;height:18px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.home-faq details[open] summary::after{transform:rotate(180deg)}
.home-faq summary:focus-visible{outline-offset:2px}
.home-faq details p{margin:0;padding:0 56px 22px 4px;font-size:15px;line-height:1.6;color:#5d6775}

@media(max-width:1000px){
.home-cats{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-benefits ul{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-benefits li:nth-child(odd){padding-left:0;border-left:0}
.home-benefits li:nth-child(n+3){border-top:1px solid #e3e6ea}
.home-spotlight__row,.home-newsletter__row{grid-template-columns:1fr}
.home-spotlight__body{padding:0}
}
@media(max-width:650px){
body.home main{padding-bottom:36px}
.home-hero{gap:10px;padding:10px 0 0}
.home-hero__actions{flex-direction:column;align-items:stretch}
.home-button{justify-content:center}
.home-promo{min-height:150px}
.home-promo__body{padding:14px}
.home-promo h2{font-size:16px}
.home-benefits ul{padding:10px 0}
.home-benefits li{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 14px}
.home-benefits svg{flex-basis:34px;width:34px;height:34px}
.home-benefits strong{font-size:15px}
.home-benefits span{font-size:13px}
.home-section,.home-spotlight{padding-top:40px}
.home-heading>div{margin-bottom:20px}
.home-heading h2{padding-bottom:12px;font-size:23px}
.home-heading__link{align-self:stretch;justify-content:center;margin-top:18px}
.home-newsletter{margin-top:32px}
.home-newsletter__form button{padding:0 16px}
.home-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.home-spotlight__row{padding:14px}
.home-spotlight__body{padding:4px 4px 6px}
.home-spotlight__buy .button{flex:1}
.home-faq summary{padding:16px 0;font-size:15px}
.home-faq details p{padding:0 0 18px}
}
@media(max-width:420px){.home-hero{grid-template-columns:1fr}}
@media(max-width:650px){
.home-hero__main--photo{align-items:flex-end;min-height:420px}
.home-hero__body{padding:28px 0}
.home-hero__main--photo .home-hero__image{object-position:78% center}
.home-hero__main--photo::after{background:linear-gradient(0deg,#03265ff5 0%,#03265fe0 45%,#03265f40 80%,#03265f00 100%)}
}
@media(min-width:1201px){.home-section>.product-grid>:nth-child(n+6){display:none}}
@media(min-width:1001px) and (max-width:1200px){.home-section>.product-grid>:nth-child(n+5){display:none}}
.home-trust{margin-top:36px;margin-bottom:8px}
.home-trust img{display:block;width:100%;height:auto}
/* Computer: a strip 6:1 (half the height of the 3:1 picture); with the 1440 px limit it is at most 240 px tall. Phone: about as tall as the newsletter block below (~220 px).
   Pictures made for these sizes: home-trust-pl.webp 2400×400, home-trust-pl-mob.webp 1200×660; others are cut to fit. */
.home-trust img{aspect-ratio:6/1;object-fit:cover;object-position:center}
@media(max-width:650px){.home-trust img{aspect-ratio:auto;height:220px}}
.home-cat{display:flex;flex-direction:column;min-width:0;border:1px solid #e0e4ea;border-radius:var(--radius);overflow:hidden;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.home-cat__image{display:block;aspect-ratio:4/3;overflow:hidden;background:#eceef1}
.home-cat__image img{width:100%;height:100%;object-fit:cover}
.home-cat__body{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px 12px}
.home-cat strong{font-size:14px;font-weight:600;line-height:1.35;color:#1a2233}
.home-cat__body svg{flex:none;width:16px;height:16px;fill:none;stroke:#8a93a0;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
@media(hover:hover) and (pointer:fine){a.home-cat:hover{border-color:#c3cad5;box-shadow:0 10px 24px #1a22331f;transform:translateY(-2px)}a.home-cat:hover strong{color:var(--accent)}a.home-cat:hover .home-cat__body svg{stroke:var(--accent);transform:translateX(3px)}}
.home-cat--empty strong{display:block;width:70%;height:14px;margin:3px 0 0;border-radius:var(--radius);background:#eceef1}
/* Shelves of products: one row that scrolls sideways, arrows in the heading, a "see all" tile at the end. */
.home-shelf__head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.home-shelf__head h2{margin:0;font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.home-shelf__nav{display:flex;align-items:center;gap:8px}
.home-shelf__link{display:inline-flex;align-items:center;gap:6px;margin-right:8px;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap}
.home-shelf__link span{transition:transform .15s}.home-shelf__link:hover span{transform:translateX(3px)}
.home-shelf__arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #d5dae2;border-radius:50%;background:#fff;color:#1a2233;cursor:pointer;transition:border-color .15s,color .15s}
@media(hover:hover) and (pointer:fine){.home-shelf__arrow:hover{border-color:var(--accent);color:var(--accent)}}
.home-shelf__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Room around the cards so their hover shadow is not cut off by the scrolling row; the negative margin keeps the row in place. */
.home-shelf__track{--per:5;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;scroll-behavior:smooth;scrollbar-width:none;padding:16px 12px 36px;margin:-16px -12px -28px}
.home-shelf__track::-webkit-scrollbar{display:none}
.home-shelf__track>*{flex:0 0 calc((100% - (var(--per) - 1) * 16px) / var(--per));scroll-snap-align:start}
.home-shelf__all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;border:1.5px dashed #c9d2df;border-radius:var(--radius);background:#fff;color:var(--accent);text-align:center;text-decoration:none;transition:border-color .15s,background .15s}
.home-shelf__all:hover{border-color:var(--accent);background:#f5f8fd}
.home-shelf__all span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#e8effb}
.home-shelf__all svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home-shelf__all strong{font-size:15px}.home-shelf__all small{font-size:13px;color:#5d6775}
@media(max-width:1200px){.home-shelf__track{--per:4}}
@media(max-width:1000px){.home-shelf__track{--per:3}}
/* Phone: the title takes the whole line, under it "see all" on the left and the arrows on the right;
   the next card peeks in from the right edge, so it is clear the row scrolls. */
@media(max-width:650px){.home-shelf__head{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:14px}.home-shelf__head h2{font-size:22px}.home-shelf__nav{justify-content:space-between}.home-shelf__link{margin-right:auto;font-size:14px}.home-shelf__arrow{width:34px;height:34px}.home-shelf__arrow svg{width:18px;height:18px}.home-shelf__track{gap:10px}.home-shelf__track>*{flex-basis:calc((100% - 20px) / 2.3)}}
@media(prefers-reduced-motion:reduce){.home-shelf__track{scroll-behavior:auto}}
.home-shelf__track--cats{--per:5}
@media(max-width:1000px){.home-shelf__track--cats{--per:3}}
/* On a phone the banner is taller (16:9) so the text stays readable; until a separate phone picture exists, its left part with the text is shown. */
/* iPhone zooms the page into a field with text under 16px; touch screens get 16px. */
@media(pointer:coarse){.home-newsletter__form input{font-size:16px}}