/* Foundation Kit blocks. Built on the theme's variables; loaded only where a block is used.
   A block takes the width it is given by the page; it never computes its position from the screen.
   Each block adapts to the width it is given (container queries), in the three layouts of VL_DESIGN A14:
   narrow up to 599 px, middle 600 to 1100 px, wide above 1100 px. */
.fkit{--fk-r:var(--r,22px);--fk-line:#EAF0F7;--fk-gap:14px;box-sizing:border-box;width:100%;max-width:100%;container:fk/inline-size}
.fkit *,.fkit *::before,.fkit *::after{box-sizing:border-box}
.fkit .w{display:block;max-width:1200px;height:auto;margin:0 auto;padding:0 24px}
.fkit-sec{padding:76px 0}
.fkit-sec.alt{background:linear-gradient(180deg,#FBFDFF,#F1F6FF)}
.fkit .eb{font:700 12.5px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);margin:0 0 10px}
.fkit h2{margin-top:0}
.fkit .sub{position:static;visibility:visible;opacity:1;color:var(--mute);max-width:62ch;margin-bottom:28px}
.fkit .swipe{display:none}
.fkit img{border-radius:0;max-width:100%}
.fkit .btn{margin:0}
.fkit .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.fkit .two p{color:var(--mute)}

/* trust strip */
.fkit-strip{background:linear-gradient(90deg,#E3F8FB,#E8ECFF);font-size:13.5px;font-weight:700;color:var(--ink)}
.fkit-strip .w{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}

/* selling cards (A6): five across when wide, never wider than 320 px */
.fkit .cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--fk-gap)}
.fkit .cards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fkit .cards.n3,.fkit .cards.n2,.fkit .cards.n1{grid-template-columns:repeat(auto-fill,minmax(0,320px))}
.fkit .card{display:flex;flex-direction:column;min-width:0;background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);transition:transform .3s,box-shadow .3s}
.fkit .card:hover,.fkit .card:focus-within{transform:translateY(-6px);box-shadow:0 30px 54px -28px var(--b)}
.fkit .card.pop{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--a),var(--b)) border-box}
.fkit .card .im{position:relative;aspect-ratio:3/4;background:linear-gradient(135deg,#DDF4F8,#E1E6FF);overflow:hidden}
.fkit .card .im img{width:100%;height:100%;object-fit:cover}
.fkit .tag{position:absolute;top:10px;left:10px;background:var(--sun);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
.fkit .card .bd{padding:16px;display:flex;flex-direction:column;flex:1}
.fkit .card h3{margin:0 0 4px}
.fkit .card .ln{font-size:14.5px;color:var(--mute);min-height:66px}
.fkit .specs{list-style:none;margin:0 0 12px;padding:0;font-size:14px}
.fkit .specs li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;margin:0;border-bottom:1px solid var(--fk-line)}
.fkit .specs li:last-child{border:0}
.fkit .specs span{color:var(--mute);font-weight:600}
.fkit .specs b{text-align:right}
.fkit .price{font:800 30px var(--disp);text-align:center;margin:auto 0 12px;color:var(--ink)}
.fkit .price small{display:block;font:700 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.fkit .card .btn{width:100%;min-height:50px;padding:12px;font-size:15px}
.fkit .more{display:block;text-align:center;margin-top:10px;font-size:14.5px}

/* founders */
.fkit .fnd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--fk-gap)}
.fkit .fc{background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b)}
.fkit .fc .ph{aspect-ratio:4/5;background:linear-gradient(135deg,#DDF4F8,#E1E6FF)}
.fkit .fc .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.fkit .fc .tx{padding:14px 16px 16px}
.fkit .fc b{display:block;font:700 19px var(--disp)}
.fkit .fc small{display:block;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:2px 0 6px}
.fkit .fc span{font-size:14.5px;color:var(--mute)}
.fkit .it{position:relative;background:var(--glass);border:1px solid #fff;border-radius:18px;padding:14px 16px 14px 28px;box-shadow:0 14px 34px -28px var(--b)}
.fkit .it::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:5px;border-radius:5px;background:linear-gradient(180deg,var(--a),var(--b))}
.fkit .it b{display:block}
.fkit .it span{font-size:15px;color:var(--mute)}
.fkit .gw{margin-top:12px}

/* reviews: the label under the role says where each review comes from (work order 29, B) */
.fkit .revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fk-gap)}
.fkit .rev{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);padding:22px;box-shadow:0 18px 44px -30px var(--b)}
.fkit .rev p{color:var(--mute);font-size:15.5px;margin:0}
.fkit .stars,.vl-stars{color:#F5A800;letter-spacing:2px}
.fkit .who{display:flex;gap:12px;align-items:center;border-top:1px solid var(--fk-line);padding-top:12px;margin-top:auto}
/* the initial sits exactly in the middle of its circle, at every size (work order 31, step 5) */
.fkit .who .av{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;line-height:1;text-align:center;font-size:16px;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--ba),var(--bb));flex:none}
.fkit .who b{display:block;font-size:14.5px}
.fkit .who div span{display:block;font-size:13px;color:var(--mute)}
.fkit .who div span+span{font-size:12px;font-weight:700;color:var(--deep)}
.fkit .fkit-more{margin:18px 0 0}

/* bespoke */
.fkit-sec.bold{background:linear-gradient(125deg,var(--ba),var(--bb));color:#fff}
.fkit.bold h2,.fkit.bold .eb,.fkit.bold p,.fkit.bold a:not(.btn){color:#fff}
.fkit .box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:var(--fk-r);padding:24px}
.fkit .box ul{list-style:none;margin:0 0 18px;padding:0}
.fkit .box li{position:relative;padding-left:22px;margin-bottom:9px}
.fkit .box li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--sun)}

/* middle: 600 to 1100 px. Cards two or three across, at most 320 px; a row that does not fit is swiped
   (by finger, trackpad, or the keyboard once the row has focus). */
@container fk (max-width:1100px){
.fkit .cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;padding:6px 2px 18px}
.fkit .cards>*{flex:0 0 min(320px,calc((100% - 2 * var(--fk-gap)) / 3));scroll-snap-align:start}
.fkit .revs{grid-template-columns:repeat(2,minmax(0,1fr))}
.fkit .revs>:nth-child(3):last-child{grid-column:1/-1}
}
@container fk (max-width:899px){
.fkit .cards>*{flex-basis:min(320px,calc((100% - var(--fk-gap)) / 2))}
.fkit .two{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* narrow: up to 599 px, the phone layout (A9). One row swiped, the next card showing at the side. */
@container fk (max-width:599px){
.fkit .w{padding:0 16px}
.fkit-strip .w{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;white-space:nowrap;scrollbar-width:none}
.fkit .swipe{display:block;font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin:0 0 6px}
.fkit .sub{margin-bottom:16px}
.fkit .cards,.fkit .revs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:6px 0 18px;scrollbar-width:none}
.fkit .cards>*{flex:0 0 62%;scroll-snap-align:center}
.fkit .revs>*{flex:0 0 84%;scroll-snap-align:center}
.fkit .card .ln{min-height:0}
.fkit .card .bd{padding:14px}
}
@media (max-width:599px){.fkit-sec{padding:40px 0}}
@media (prefers-reduced-motion:reduce){.fkit *{transition:none!important}}

/* Work order 108: [vl_clients], the client cards from the register. Three across on a computer, one row swiped on a
   phone. Each card is one link. The mark sits on its plate: on a light plate it is drawn as [vl_logos] draws it (in grey,
   a light mark turned dark, an own pale ground lifted to white); on a dark plate a light mark keeps its own colour. */
.fkit .clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fk-gap)}
.fkit a.cl{display:flex;flex-direction:column;min-width:0;min-height:44px;background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);color:var(--ink);text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
.fkit .cl .pl{display:flex;align-items:center;justify-content:center;height:110px;padding:0 22px;background:#fff;border-bottom:1px solid var(--fk-line)}
.fkit .cl .pl.dark{background:var(--ink)}
.fkit .cl .pl img{width:auto;height:auto;max-width:100%;max-height:var(--mark-h,46px);object-fit:contain;border-radius:0}
.fkit .cl .pl.light img{filter:grayscale(1);mix-blend-mode:multiply;opacity:.8}
.fkit .cl .pl.light.from-light img{filter:brightness(0)}
.fkit .cl .pl.light.own-ground img{filter:grayscale(1) contrast(1.6) brightness(1.22);max-width:none}
.fkit .cl .cb{display:flex;flex-direction:column;flex:1;gap:10px;padding:18px 20px 20px}
.fkit .cl h3{margin:0;font:800 19px var(--disp);color:var(--ink)}
.fkit .cl .cn{margin:0;font-size:15px;color:var(--mute)}
.fkit .cl .wk{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.fkit .cl .wk li{margin:0;padding:4px 10px;border-radius:999px;background:var(--fk-line);color:var(--ink);font-size:12.5px;font-weight:700}
.fkit .cl .rd{margin-top:auto;padding-top:4px;font-weight:800;font-size:15px;color:var(--deep)}
@container fk (max-width:899px){
.fkit .clients{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;padding:6px 2px 18px}
.fkit .clients>*{flex:0 0 min(320px,calc((100% - var(--fk-gap)) / 2));scroll-snap-align:start}
}
@container fk (max-width:599px){
.fkit .clients{gap:12px;scrollbar-width:none}
.fkit .clients>*{flex:0 0 84%;scroll-snap-align:center}
}

/* Work order 110: [vl_ranges], the shop's ranges. Three across, two on a tablet, one column on a phone (no swiping: the
   shop's visitor scans). Each card is one link. */
.fkit .ranges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fk-gap)}
.fkit a.rg{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:44px;padding:22px;background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);box-shadow:0 18px 44px -30px var(--b);color:var(--ink);text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
.fkit .rg h3{margin:0;font:800 20px var(--disp);color:var(--ink)}
.fkit .rg .ln{margin:0;font-size:15px;color:var(--mute)}
.fkit .rg .rf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--fk-line)}
.fkit .rg .nm{font-size:14px;font-weight:700;color:var(--mute)}
.fkit .rg .pr b,.fkit .pd .pr b{font:800 20px var(--disp);color:var(--ink)}
.fkit .rg .pr small,.fkit .pd .pr small{font-size:13px;font-weight:700;color:var(--mute)}
/* Work order 112: the small square picture at the top left, the name and line to its right, the figures in the foot. */
.fkit a.rg.has-pic{display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:16px;row-gap:6px}
.fkit .rg .th{grid-row:1 / span 2;width:72px;height:72px;border-radius:var(--fk-r);overflow:hidden;background:var(--fk-line)}
.fkit .rg .th img{display:block;width:100%;height:100%;object-fit:cover}
.fkit a.rg.has-pic h3,.fkit a.rg.has-pic .ln{grid-column:2}
.fkit a.rg.has-pic .ln{align-self:start}
.fkit a.rg.has-pic .rf{grid-column:1 / -1}
@container fk (max-width:899px){.fkit .ranges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container fk (max-width:599px){.fkit .ranges{grid-template-columns:minmax(0,1fr);gap:12px}.fkit a.rg{padding:18px}}
@container fk (max-width:599px){.fkit a.rg.has-pic{grid-template-columns:64px minmax(0,1fr);column-gap:14px}.fkit .rg .th{width:64px;height:64px}}

/* Work order 110: [vl_products], the packages of one range. Three across on a computer, one row swiped on a phone. */
.fkit .prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fk-gap)}
.fkit a.pd{display:flex;flex-direction:column;min-width:0;min-height:44px;background:var(--glass);border:1px solid #fff;border-radius:var(--fk-r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);color:var(--ink);text-decoration:none;transition:transform .22s,box-shadow .22s,border-color .22s}
.fkit .pd .im{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--fk-line)}
.fkit .pd .im img{display:block;width:100%;height:100%;object-fit:cover}
.fkit .pd .bd{display:flex;flex-direction:column;flex:1;gap:8px;padding:16px 18px 18px}
.fkit .pd h3{margin:0;font:800 18px var(--disp);color:var(--ink)}
.fkit .pd .ln{margin:0;font-size:14.5px;color:var(--mute)}
.fkit .pd .pr{margin-top:auto;padding-top:6px}
.fkit .pd .go{font-weight:800;font-size:15px;color:var(--deep)}
@container fk (max-width:899px){
.fkit .prods{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;padding:6px 2px 18px}
.fkit .prods>*{flex:0 0 min(320px,calc((100% - var(--fk-gap)) / 2));scroll-snap-align:start}
}
@container fk (max-width:599px){
.fkit .prods{gap:12px;scrollbar-width:none}
.fkit .prods>*{flex:0 0 78%;scroll-snap-align:center}
}

/* Work order 114: [vl_jumpbar], the ranges' bar, sticking under the header (when the header slides away on a phone,
   the bar takes the top); the chip of the section in view carries aria-current. Work order 117: nothing scrolls; the
   chips wrap, one row on a computer, two below 1024 px, two or three smaller ones on a phone, centred. The bar's height
   follows its rows: the theme's script writes it in --jb. Its ground is the header's white, softly blurred. */
.fkit-jb{position:sticky;top:var(--hd,64px);z-index:45;background:#fff;border-bottom:1px solid var(--fk-line);transition:top .3s}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.fkit-jb{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}}
.admin-bar .fkit-jb{top:calc(var(--hd,64px) + 32px)}
body:has(.hd.away) .fkit-jb{top:0}
.fkit-jb .jb{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:10px 0}
.fkit-jb .chip{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--fk-line);border-radius:999px;background:#fff linear-gradient(90deg,var(--ba),var(--bb)) no-repeat;background-size:0 100%;font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-size .22s ease-out,color .22s,border-color .22s}
.fkit-jb .chip:hover,.fkit-jb .chip:focus-visible{border-color:var(--deep);color:var(--deep)}
.fkit-jb .chip[aria-current]{background-size:100% 100%;border-color:transparent;color:#fff}
@media (max-width:599px){.fkit-jb .jb{gap:0 8px;padding:6px 0}.fkit-jb .chip{min-height:36px;margin:4px 0;padding:0 11px;font-size:13px}}
/* Work order 114, D, and 115, D3: a jump lands with its heading in view, below the header and the bar (its height from
   the script, --jb; 65 px, one row, without scripts) plus 8 px. Work order 117: the shop page's sections are now div wrappers. */
body:has(.fkit-jb) section[id],body:has(.fkit-jb) .svc>[id],.fkit a.rg,.fkit a.pd{scroll-margin-top:calc(var(--hd,64px) + var(--jb,65px) + 8px)}

/* Work order 114: [vl_products group="children"], one row for each sub-category; the cards compact, four across (three
   from 1100 px down), swiped on a phone. */
.fkit-grouped .grp{margin:0 0 34px}
.fkit-grouped .grp:last-child{margin-bottom:0}
.fkit-grouped .grp>h3{margin:0 0 4px;font:800 21px var(--disp)}
.fkit-grouped .grp>h3 a{color:var(--ink);text-decoration:none}
.fkit-grouped .grp>h3 a:hover,.fkit-grouped .grp>h3 a:focus-visible{color:var(--deep);text-decoration:underline}
.fkit-grouped .grp>.ln{margin:0 0 14px;font-size:15px;color:var(--mute);max-width:72ch}
.fkit .prods.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.fkit .prods.compact .pd h4{margin:0;font:800 16px var(--disp);color:var(--ink)}
.fkit .prods.compact .pd .bd{padding:14px 14px 16px}
.fkit .prods.compact .pd .ln{font-size:14px}
@container fk (max-width:1100px){.fkit .prods.compact{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container fk (max-width:899px){.fkit .prods.compact>*{flex:0 0 min(280px,calc((100% - 2 * var(--fk-gap)) / 2.4))}}
@container fk (max-width:599px){.fkit .prods.compact>*{flex:0 0 70%}}

/* Work order 116, A: the progress line under the bar: a pale track and the checkout's gradient, filled by the theme's
   script with transform (scaleX from the left), shown only once the bar sticks. Without scripts it stays hidden. */
.fkit-jb .jb-line{position:absolute;left:0;right:0;bottom:-3px;height:3px;background:#E3ECF5;opacity:0;transition:opacity .2s;pointer-events:none}
.fkit-jb .jb-line i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b));transform:scaleX(0);transform-origin:left}
.fkit-jb.stuck .jb-line{opacity:1}

/* Work order 117 (in place of 116, B): the card under the hand moves so that it is noticed: it rises 14 px and grows, its
   shadow deepens, its edge becomes the brand's gradient, its picture eases in and a sheen passes once across it, its
   heading takes the link colour; its neighbours step back. A tap presses it; with reduced motion only the shadow, the
   edge and the heading change. Nothing moves until the hand does. */
.fkit a.pd,.fkit a.rg,.fkit a.cl{border-width:2px;transition:transform .26s ease-out,box-shadow .26s ease-out,border-color .26s ease-out,opacity .26s ease-out}
.fkit a.pd h3,.fkit a.pd h4,.fkit a.rg h3,.fkit a.cl h3{transition:color .26s ease-out}
.fkit a.pd .im img,.fkit a.rg .th img,.fkit a.cl .pl img{transition:transform .5s ease-out}
.fkit a.pd .im,.fkit a.rg .th,.fkit a.cl .pl{position:relative;overflow:hidden}
.fkit a.pd .im::after,.fkit a.rg .th::after,.fkit a.cl .pl::after{content:"";position:absolute;inset:0;background:linear-gradient(60deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.fkit a.pd:focus-visible,.fkit a.rg:focus-visible,.fkit a.cl:focus-visible{outline:3px solid var(--bb);outline-offset:3px;z-index:1}
@media (hover:hover){
.fkit a.pd:hover,.fkit a.rg:hover,.fkit a.cl:hover{z-index:1}
}
.fkit a.pd:is(:hover,:focus-visible),.fkit a.rg:is(:hover,:focus-visible),.fkit a.cl:is(:hover,:focus-visible){transform:translateY(-14px) scale(1.03);box-shadow:0 40px 80px -30px color-mix(in srgb,var(--b) 55%,transparent);border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--a),var(--b)) border-box}
.fkit a.pd:is(:hover,:focus-visible) :is(h3,h4),.fkit a.rg:is(:hover,:focus-visible) h3,.fkit a.cl:is(:hover,:focus-visible) h3{color:var(--deep)}
.fkit a.pd:is(:hover,:focus-visible) .im img,.fkit a.rg:is(:hover,:focus-visible) .th img,.fkit a.cl:is(:hover,:focus-visible) .pl img{transform:scale(1.08)}
.fkit a.pd:is(:hover,:focus-visible) .im::after,.fkit a.rg:is(:hover,:focus-visible) .th::after,.fkit a.cl:is(:hover,:focus-visible) .pl::after{transform:translateX(120%);transition:transform .7s ease-out}
@media (hover:hover){
.fkit .prods:has(>a.pd:hover)>a.pd:not(:hover),.fkit .ranges:has(>a.rg:hover)>a.rg:not(:hover),.fkit .clients:has(>a.cl:hover)>a.cl:not(:hover){transform:scale(.985);opacity:.92}
}
@media (hover:none){
.fkit a.pd:hover,.fkit a.rg:hover,.fkit a.cl:hover{transform:none;box-shadow:0 18px 44px -30px var(--b);border-color:#fff;background:var(--glass)}
.fkit a.pd:hover :is(h3,h4),.fkit a.rg:hover h3,.fkit a.cl:hover h3{color:var(--ink)}
.fkit a.pd:hover .im img,.fkit a.rg:hover .th img,.fkit a.cl:hover .pl img,.fkit a.pd:hover .im::after,.fkit a.rg:hover .th::after,.fkit a.cl:hover .pl::after{transform:none}
.fkit a.pd:active,.fkit a.rg:active,.fkit a.cl:active{transform:scale(.975)}
}
@media (prefers-reduced-motion:reduce){
.fkit a.pd,.fkit a.rg,.fkit a.cl,.fkit a.pd:is(:hover,:focus-visible,:active),.fkit a.rg:is(:hover,:focus-visible,:active),.fkit a.cl:is(:hover,:focus-visible,:active),.fkit .prods>a.pd,.fkit .ranges>a.rg,.fkit .clients>a.cl{transform:none!important;opacity:1!important}
.fkit a.pd .im img,.fkit a.rg .th img,.fkit a.cl .pl img{transform:none!important}
.fkit a.pd .im::after,.fkit a.rg .th::after,.fkit a.cl .pl::after{display:none}
}

/* Work order 116, C: rows that fill their width, on a grid of 12 columns: a card takes 3 (four across) or 4 (three
   across); a short last row shares the width (span-6, span-4); a card alone is a feature card across the row. On a
   phone and a tablet the cards are as before. */
@container fk (min-width:1101px){
.fkit .prods,.fkit .prods.compact{grid-template-columns:repeat(12,minmax(0,1fr))}
.fkit .prods>*{grid-column:span 3}
.fkit .prods>.span-6{grid-column:span 6}
.fkit .prods>.span-4{grid-column:span 4}
.fkit .prods>.feat{grid-column:1 / -1;flex-direction:row}
.fkit .pd.feat .im{flex:0 0 min(320px,36%);aspect-ratio:4/5}
.fkit .pd.feat .bd{justify-content:center;gap:12px;padding:30px 36px}
.fkit .pd.feat h3,.fkit .pd.feat h4{font-size:24px}
.fkit .pd.feat .ln{font-size:16px;max-width:60ch}
.fkit .pd.feat .pr{margin-top:4px}
.fkit .pd.feat .go.btn{align-self:flex-start;margin-top:8px;color:#fff}
}
@container fk (min-width:900px) and (max-width:1100px){.fkit .prods{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container fk (min-width:900px){
.fkit .ranges{grid-template-columns:repeat(12,minmax(0,1fr))}
.fkit .ranges>*{grid-column:span 4}
.fkit .ranges>.span-6{grid-column:span 6}
.fkit .ranges>.feat{grid-column:1 / -1}
.fkit a.rg.feat.has-pic{grid-template-columns:96px minmax(0,1fr);column-gap:22px}
.fkit .rg.feat .th{width:96px;height:96px}
.fkit .rg.feat .ln{max-width:80ch}
}

/* Work order 118: on a phone (under 700 px) the bar is one row, once the theme's script is running (class jb-js): the
   current range, filled with the button gradient, and a button that opens the chips below the bar, over the page.
   Without scripts the row stays hidden and the chips show wrapped. */
.fkit-jb .jb-row{display:none}
.fkit-jb .jb-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:699px){
.fkit-jb.jb-js .jb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px}
.fkit-jb .jb-cur{display:inline-flex;align-items:center;min-width:0;min-height:44px;padding:0 16px;border-radius:999px;background:linear-gradient(90deg,var(--ba),var(--bb));color:#fff;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fkit-jb .jb-cn{overflow:hidden;text-overflow:ellipsis}
.fkit-jb .jb-tg{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 14px;border:1px solid var(--fk-line);border-radius:999px;background:#fff;color:var(--ink);font:700 14px var(--body);cursor:pointer}
.fkit-jb .jb-tg::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.fkit-jb .jb-tg[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.fkit-jb.jb-js .jb{position:absolute;left:0;right:0;top:calc(100% + 3px);padding:8px 16px 12px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--fk-line);box-shadow:0 18px 30px -22px var(--b);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.fkit-jb.jb-js.open .jb{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s}
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){@media (max-width:699px){.fkit-jb.jb-js .jb{background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}}}
@media (prefers-reduced-motion:reduce){.fkit-jb.jb-js .jb,.fkit-jb.jb-js.open .jb{transition:none!important;transform:none}.fkit-jb .jb-tg::after{transition:none!important}}

/* Work order 119, A (decision 194): the plugin's own grids (plan cards, reviews, client cards) fill their last row the
   same way as the theme's, by the block's width; a lone plan card is drawn across the row. Generated (work order 119). */
@container fk (min-width:1101px){
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1){grid-template-columns:repeat(60,minmax(0,1fr))}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>*{grid-column:span 12}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(1),.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(1)~*{grid-column:span 60}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(2),.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(2)~*{grid-column:span 30}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(3),.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(3)~*{grid-column:span 20}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(4),.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>:nth-child(5n+1):nth-last-child(4)~*{grid-column:span 15}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>.card:nth-child(5n+1):last-child{flex-direction:row}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>.card:nth-child(5n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.fkit .cards:not(.n4):not(.n3):not(.n2):not(.n1)>.card:nth-child(5n+1):last-child>.bd{justify-content:center}
}
@container fk (min-width:1101px){
.fkit .cards.n4{grid-template-columns:repeat(12,minmax(0,1fr))}
.fkit .cards.n4>*{grid-column:span 3}
.fkit .cards.n4>:nth-child(4n+1):nth-last-child(1),.fkit .cards.n4>:nth-child(4n+1):nth-last-child(1)~*{grid-column:span 12}
.fkit .cards.n4>:nth-child(4n+1):nth-last-child(2),.fkit .cards.n4>:nth-child(4n+1):nth-last-child(2)~*{grid-column:span 6}
.fkit .cards.n4>:nth-child(4n+1):nth-last-child(3),.fkit .cards.n4>:nth-child(4n+1):nth-last-child(3)~*{grid-column:span 4}
.fkit .cards.n4>.card:nth-child(4n+1):last-child{flex-direction:row}
.fkit .cards.n4>.card:nth-child(4n+1):last-child>.im{flex:0 0 min(320px,36%);aspect-ratio:4/5;height:auto}
.fkit .cards.n4>.card:nth-child(4n+1):last-child>.bd{justify-content:center}
}
@container fk (min-width:1101px){
.fkit .revs{grid-template-columns:repeat(6,minmax(0,1fr))}
.fkit .revs>*{grid-column:span 2}
.fkit .revs>:nth-child(3n+1):nth-last-child(1),.fkit .revs>:nth-child(3n+1):nth-last-child(1)~*{grid-column:span 6}
.fkit .revs>:nth-child(3n+1):nth-last-child(2),.fkit .revs>:nth-child(3n+1):nth-last-child(2)~*{grid-column:span 3}
}
@container fk (min-width:600px) and (max-width:1100px){
.fkit .revs{grid-template-columns:repeat(2,minmax(0,1fr))}
.fkit .revs>*{grid-column:span 1}
.fkit .revs>:nth-child(2n+1):nth-last-child(1),.fkit .revs>:nth-child(2n+1):nth-last-child(1)~*{grid-column:span 2}
}
@container fk (min-width:900px){
.fkit .clients{grid-template-columns:repeat(6,minmax(0,1fr))}
.fkit .clients>*{grid-column:span 2}
.fkit .clients>:nth-child(3n+1):nth-last-child(1),.fkit .clients>:nth-child(3n+1):nth-last-child(1)~*{grid-column:span 6}
.fkit .clients>:nth-child(3n+1):nth-last-child(2),.fkit .clients>:nth-child(3n+1):nth-last-child(2)~*{grid-column:span 3}
}
/* Work order 119, B: the page's own product in [vl_products here="ID"]: the card of the others, not a link, with the
   theme's "you are here" look (pop: the link colour's edge) and no motion. C: a card's small label above its name. */
.fkit div.pd{display:flex;flex-direction:column;min-width:0;background:var(--glass);border:2px solid var(--deep);border-radius:var(--fk-r);overflow:hidden;box-shadow:0 18px 44px -30px var(--b);color:var(--ink)}
.fkit div.pd .go{color:var(--deep)}
.fkit .pd .eb{margin:0;font-size:12px}
/* Work order 119, D: the founders block in three columns on a computer (the words, then one card each), the words and
   the two cards side by side on a tablet, stacked on a phone; the note across the full width below. */
.fkit .fnd.fnd3{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:var(--fk-gap) 20px;align-items:start}
.fkit .fnd3 .fnd-t p{max-width:34em;color:var(--mute)}
.fkit .fnd3 .gw{grid-column:1 / -1}
@container fk (max-width:1100px){.fkit .fnd.fnd3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.fkit .fnd3 .fnd-t{grid-column:1 / -1}}
@container fk (max-width:599px){.fkit .fnd.fnd3{grid-template-columns:minmax(0,1fr)}}
/* Work order 120: a products grid of exactly two cards (the "Go further" row, a group of two) is drawn as two horizontal
   cards side by side on a computer, each half the row: the picture on the left at 4:5, at most 220 px wide, the words on
   the right. On a tablet and a phone they are the ordinary cards. A card alone stays the feature card (work order 116). */
@container fk (min-width:1101px){
.fkit .prods>.pair{flex-direction:row}
.fkit .pd.pair .im{flex:0 0 min(220px,40%);aspect-ratio:4/5}
.fkit .pd.pair .bd{justify-content:center;padding:20px 24px}
}
/* Work order 123, B: the range name's link in a grouped row is at least 44 px tall at every width, its text where it
   was (the 26 px line, 9 px taken back above and below); its focus ring stays visible. */
.fkit-grouped .grp>h3 a{display:inline-flex;align-items:center;min-height:44px;margin:-9px 0}
.fkit-grouped .grp>h3 a:focus-visible{outline:3px solid var(--bb);outline-offset:2px}
/* Work order 123, E: a range card's "View range", across the card's foot. */
.fkit .rg .go{font-weight:800;font-size:15px;color:var(--deep)}
.fkit a.rg.has-pic .go{grid-column:1 / -1}
/* Work order 130: a products block of exactly four cards (n4) is four across from 900 to 1100 px too, with the card's
   inner padding a little tighter there, so that no card sits alone at a laptop's width. */
@container fk (min-width:900px) and (max-width:1100px){.fkit .prods.n4{grid-template-columns:repeat(4,minmax(0,1fr))}.fkit .prods.n4 .pd .bd{padding:14px 14px 16px}}
/* Work order 135 (decision 193, continued): between 900 and 1100 pixels the product cards stand three across, so a
   last card alone on its row (7, 10, 13 cards) becomes a feature card across the row, as it already does above 1100. */
@container fk (min-width:900px) and (max-width:1100px){
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1){grid-column:1 / -1;flex-direction:row}
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) .im{flex:0 0 min(300px,34%);aspect-ratio:4/5}
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) .bd{justify-content:center;gap:12px;padding:28px 32px}
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) h3,.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) h4{font-size:22px}
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) .ln{font-size:16px;max-width:60ch}
.fkit .prods:not(.n4)>.pd:last-child:nth-child(3n+1) .go.btn{align-self:flex-start;margin-top:8px;color:#fff}
}