html{overflow-y:scroll;overflow-x:hidden}input:not(.gp-transition-all){outline:none;background:rgba(0,0,0,0);border:none !important;outline:medium;width:100%;height:50px}input:focus{outline:none;border:none !important;background-color:rgba(0,0,0,0)}::selection{}::-moz-selection{background:#f1f1f1}:root{--niu-red: #DF001F;--niu-black: #121212;--niu-light-black: #3C3C3C;--niu-white: #FFFFFF;--niu-theme-color-1: #555555;--niu-theme-color-2: #999999;--niu-theme-color-3: #CCCCCC;--niu-theme-color-4: #EEEEEE;--niu-theme-color-5: #F4F4F4;--niu-theme-color-6: #F0F0F0;--el-color-primary: var(--niu-red)}.htusb-ui-coll-boost.htusb-ui-coll-boost--top-right{--z-index: 0 !important}:root{--line-color: #EEEEEE;--header-height: 50px;--header-heights:68px;--full-height: 100vh;--niu-h1: 140px;--niu-h2: 60px;--niu-h3: 36px;--niu-h4: 30px;--niu-h5: 24px;--niu-h6-l: 20px;--niu-h6: 18px;--niu-h7: 16px;--niu-h8: 14px;--niu-h1-m: 68px;--niu-h2-m: 48px;--niu-h3-m: 28px;--niu-h4-m: 26px;--niu-h5-m: 20px;--niu-h6-m: 18px;--niu-h7-m: 16px;--niu-h8-m: 14px;--niu-p1: 16px;--niu-p2: 14px;--niu-p3: 12px}.alink-center{display:flex;align-items:center;justify-content:center}.drawer__title{width:50%}.container{width:100%;margin:0 auto;padding:0 var(--niu-margin)}@media screen and (min-width: 1240px){:root{--niu-gap: 20px;--niu-margin: 30px;--niu-container: 1180px }.container{width:calc(var(--niu-container) + var(--niu-margin) + var(--niu-margin))}}@media screen and (min-width: 769px)and (max-width: 1240px){:root{--niu-gap: 20px;--niu-margin: 48px}}@media screen and (min-width: 375px)and (max-width: 768px){:root{--niu-gap: 20px;--niu-margin: 24px}}@font-face{font-family:"DINOffcPro";src:url("https://cdn.shopify.com/s/files/1/0554/6944/1084/files/DINOffcPro-Medium.ttf?v=1686911725");font-weight:400}@font-face{font-family:"DINOffcPro";src:url("https://cdn.shopify.com/s/files/1/0554/6944/1084/files/DINOffcPro-Medium.ttf?v=1686911725");font-weight:500}@font-face{font-family:"DINOffcPro";src:url("https://cdn.shopify.com/s/files/1/0554/6944/1084/files/DINOffcPro-Bold.ttf?v=1686911725");font-weight:700}@font-face{font-family:"DINs";src:url("https://cdn.shopify.com/s/files/1/0554/6944/1084/files/DIN_Condensed_Bold.ttf?v=1680173453");font-weight:600}body:not( :has(.gps)) *:not(*){font-family:"DINOffcPro" !important}@media screen and (min-width: 1240px){.pc-hide{display:none !important}}@media screen and (min-width: 569px)and (max-width: 1240px){.pad-hide{display:none !important}}@media screen and (max-width: 568px){.m-hide{display:none !important}}.compare-list-box{width:100%;background-color:#fff;padding:10px 0;position:fixed;bottom:0;left:0;transform:translateY(100%);transition:all .5s}#CollectionAjaxContent .pagination{gap:30px;display:flex;align-items:center;justify-content:center}#CollectionAjaxContent .pagination a{font-weight:700;font-size:16px;line-height:21px}#CollectionAjaxContent .pagination .current{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:1000px;opacity:1;color:var(--niu-red);border:2px solid var(--niu-red);font-weight:700;font-size:16px;line-height:34px;margin:0 -7px}#CollectionAjaxContent .pagination .page.current,#CollectionAjaxContent .pagination a{padding:0}#CollectionAjaxContent .pagination .next,#CollectionAjaxContent .pagination .prev{background-color:#fff;margin:0;width:auto;height:auto}#CollectionAjaxContent .pagination .next a,#CollectionAjaxContent .pagination .prev a{padding:0px 0}#CollectionAjaxContent .pagination .next a svg *,#CollectionAjaxContent .pagination .prev a svg *{fill:#000 !important}.shopify-section-group-popup-group .modal::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}@media screen and (max-width: 750px){.footer__newsletter{position:relative;width:280px;margin:0 auto}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0, 20px, 0);transform:translate3d(0, 20px, 0) !important}100%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}/*# sourceMappingURL=global.min.css.map */

body,p,span,li,a,div,label,input,textarea,select,td,th{font-weight:300!important;}
h1,h2,h3,h4,h5,h6,.product__title,.section__title,strong,b,th{font-weight:700!important;}

/* Storepoint dealer finder: undo the global input, label and font-weight rules that break its filter menus */
#storepoint-widget input[type="checkbox"]{width:auto;height:auto;}
#storepoint-widget label{letter-spacing:normal;}
#storepoint-widget .fa-solid,#storepoint-widget .fa-solid::before,#storepoint-widget .fas,#storepoint-widget .fas::before{font-weight:900 !important;}
/* NIU corporate font DINish (variable: weight 300-900, width 75-125, slant 0 to -12) replaces Roboto Condensed and DIN Offc Pro shop-wide */
@font-face{font-family:"DINish";src:url("/cdn/shop/files/DINish_slnt_wdth_wght.ttf?v=1792068386") format("truetype");font-weight:300 900;font-stretch:75% 125%;font-style:oblique 0deg 12deg;font-display:swap}
body,body *:not(i):not(svg):not(svg *):not([class^="fa-"]):not([class*=" fa-"]):not([class^="icon"]):not([class*=" icon-"]){font-family:"DINish",sans-serif !important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-stretch:75%}
/* GemPages uses classless <i> for italic headlines and .icon-content for USP labels: these carry text, so they get DINish too */
i:not([class]),.icon-content{font-family:"DINish",sans-serif !important}
/* GemPages colour swatches: show the colour name under the dot (GemPages only renders it as screen-reader text) */
label.option-item:has([option-type="color"]){display:flex !important;flex-direction:column;align-items:center;width:auto !important;min-width:45px !important;height:auto !important}
label.option-item:has([option-type="color"]) > .option-item-inner{width:45px !important;height:45px !important;flex:none}
label.option-item:has([option-type="color"]) > span.gp-sr-only{position:static !important;order:2;width:auto !important;height:auto !important;margin:6px 0 0 !important;padding:0 !important;clip:auto !important;overflow:visible !important;white-space:nowrap;font-size:13px;line-height:1.2;color:#3a3a3a}
label.option-item.option-item-active:has([option-type="color"]) > span.gp-sr-only{font-weight:700 !important;color:#000}
/* GemPages colour options still set to the text-box style: show them as colour dots with the name below. Colours come from the colour fields of the global.niu.com product pages (Sanity productInfo); Noir Mat is lifted to #121212 so it reads apart from Noir */
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Noir" i]{--niu-swatch:#000000}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Blanc" i]{--niu-swatch:#FFFFFF}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Gris" i]{--niu-swatch:#757575}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Bleu" i]{--niu-swatch:#20298B}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Rouge" i]{--niu-swatch:#BE0F0F}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Noir Mat" i]{--niu-swatch:#121212}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Gris mat" i]{--niu-swatch:#6E6E6E}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Vert" i]{--niu-swatch:#24352E}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Blanc mat" i]{--niu-swatch:#FFFFFF}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Violet" i]{--niu-swatch:#611685}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])[option-value="Jaune" i]{--niu-swatch:#FFE731}
label.option-item:has(.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i])){display:flex !important;flex-direction:column;align-items:center;width:auto !important;min-width:45px !important;height:auto !important}
label.option-item:has(.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i])) > .option-item-inner{width:45px !important;height:45px !important;flex:none}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i]){width:45px !important;height:45px !important;padding:0 !important;border-radius:50% !important;background:var(--niu-swatch) !important;border:1px solid #cfcfcf !important;box-shadow:inset 0 0 0 3px #fff}
.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i]) .option-value{display:none !important}
label.option-item:has(.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i])).option-item-active .option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i]){border:2px solid #000 !important}
label.option-item:has(.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i])) > span.gp-sr-only{position:static !important;order:2;width:auto !important;height:auto !important;margin:6px 0 0 !important;padding:0 !important;clip:auto !important;overflow:visible !important;white-space:nowrap;font-size:13px;line-height:1.2;color:#3a3a3a}
label.option-item:has(.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]):is([option-value="Noir" i],[option-value="Blanc" i],[option-value="Gris" i],[option-value="Bleu" i],[option-value="Rouge" i],[option-value="Noir Mat" i],[option-value="Gris mat" i],[option-value="Vert" i],[option-value="Blanc mat" i],[option-value="Violet" i],[option-value="Jaune" i])).option-item-active > span.gp-sr-only{font-weight:700 !important;color:#000}
/* GemPages add-to-cart and PayPal buttons on every page: NIU red, 5px corners and 50px height as on the global.niu.com primary buttons */
.gp-button-atc{background-color:#DF001F !important;border-color:#DF001F !important;border-radius:5px !important;min-height:50px}
:root{--shopify-accelerated-checkout-button-border-radius:5px;--shopify-accelerated-checkout-button-block-size:50px}
/* GemPages product cards in collection grids: equal-height cards with price and button pinned to the bottom, so rows line up whatever the description length */
div.gp-grid > gp-product:has(gp-product-button){display:block;height:100%}
div.gp-grid > gp-product:has(gp-product-button) > form{display:flex !important;flex-direction:column;height:100%}
div.gp-grid > gp-product:has(gp-product-button) > form > gp-row{flex:1 1 auto}
div.gp-grid > gp-product:has(gp-product-button) div:has(> gp-product-button){height:100%}
div.gp-grid > gp-product:has(gp-product-button) div:has(> gp-product-button) > gp-row:has(gp-product-price){flex:1 1 auto;display:flex !important;flex-direction:column}
div.gp-grid > gp-product:has(gp-product-button) div:has(> gp-product-button) > gp-row:has(gp-product-price) > div{flex:1 1 auto;flex-direction:column}
div.gp-grid > gp-product:has(gp-product-button) gp-row:has(> div > gp-product-price){margin-top:auto !important}
/* Red GemPages buttons hover like the global.niu.com primary buttons (#AB160F, 0.4s) instead of the GemPages grey highlight */
.gp-button-base[style*="--bg:#DF001F" i],.gp-button-atc{transition:background-color .4s !important}
.gp-button-base[style*="--bg:#DF001F" i]:hover{background:#AB160F !important;border-radius:5px !important}
.gp-button-atc:hover{background-color:#AB160F !important;border-color:#AB160F !important;border-radius:5px !important}
/* GemPages turns the label red on hover; on the darker red it stays white */
.gp-button-base[style*="--bg:#DF001F" i]:hover,.gp-button-base[style*="--bg:#DF001F" i]:hover *,.gp-button-atc:hover,.gp-button-atc:hover *{color:#fff !important}
/* GemPages product card galleries in collection grids: thumbnails show the whole photo, so 4:3 and square shots appear at the same scale */
div.gp-grid > gp-product .gem-slider-item.gp-image-item img{object-fit:contain !important}
/* Colour options: the dot and its name say it all, so hide the "Couleur: …" legend above and the hover tooltip */
.variant-inside:has(:is([option-type="color"],[option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])) > div:first-child{display:none !important}
label.option-item:has(:is([option-type="color"],[option-data="Couleur"],[option-data="Color"],[option-data="Farbe"])) > div:first-child:not(.option-item-inner){display:none !important}
/* GemPages headlines are wrapped in classless <i>: show them upright, as on global.niu.com */
i:not([class]),i:not([class]) *{font-style:normal !important}
/* Header nav: one line per item, more room before the search icon */
.menu-box{gap:34px !important;margin-right:64px !important}
.menu-box .header-menu-item:first-child .menu-title,.menu-box .header-menu-item:last-child .menu-title{white-space:nowrap}
/* Collection grids with fewer than 4 products: keep card width, centre the row */
@media (min-width:1025px){div.gp-grid:has(> gp-product:last-child:nth-child(-n+3)){grid-template-columns:repeat(auto-fit,calc((100% - 3*var(--cg,30px))/4)) !important;justify-content:center}}
/* Product cards: legible old price and offer note from the product description */
div.gp-grid > gp-product .gp-p-description-text h2 b[style*="font-size"]{font-size:18px !important;font-weight:300 !important;color:#757575}
div.gp-grid > gp-product .gp-p-description-text h5{font-size:14px !important;line-height:1.45 !important;font-weight:300 !important;color:#555}
div.gp-grid > gp-product .gp-p-description-text{max-height:none !important;-webkit-line-clamp:unset !important;overflow:visible !important;display:block !important}
div.gp-grid > gp-product .p-desc-ellipsis,div.gp-grid > gp-product .p-description-show-more{display:none !important}
/* Text pages (standard Shopify pages and legacy GemPages v6 pages such as Klarna): type as on global.niu.com, DIN 400 body in dark grey, DIN condensed bold uppercase headings. The v6 pages asked for DINPro fonts that are not loaded, so the browser fell back to a serif */
.rte,.rte :is(p,li,td,th,span,a,strong,b,em){font-family:DINish,sans-serif !important}
.rte :is(p,li,td,th){font-weight:400 !important;color:#333;line-height:1.6}
.rte :is(strong,b){font-weight:700 !important}
.rte :is(h1,h2,h3,h4,h5,h6),.section-header__title{font-family:DINish,sans-serif !important;font-weight:700 !important;font-stretch:75%;text-transform:uppercase;color:#121212}
.gf_row :is(h1,h2,h3,h4,h5,h6,p,li,td,th,span,a,strong,b,div){font-family:DINish,sans-serif !important}
.gf_row :is(p,li,td,th),.gf_row .elm.text-edit{font-weight:400 !important;color:#333}
.gf_row :is(strong,b){font-weight:700 !important}
.gf_row :is(h1,h2,h3,h4,h5,h6),.gf_row .gf_gs-text-heading-2{font-weight:700 !important;font-stretch:75%;text-transform:uppercase;color:#121212}
/* The v6 page styles use ID selectors with !important (#e-… .text-edit h1); :is() with an unused ID lends these rules two IDs of specificity so they win */
:is(#niu-fr-a,[id^="e-"]):is(#niu-fr-b,*) :is(h1,h2,h3,h4,h5,h6,p,li,td,th,span,a,strong,b,div){font-family:DINish,sans-serif !important}
:is(#niu-fr-a,[id^="e-"]):is(#niu-fr-b,*) :is(h1,h2,h3,h4,h5,h6){font-weight:700 !important;font-stretch:75%;text-transform:uppercase;line-height:1.1 !important;color:#121212 !important}
:is(#niu-fr-a,[id^="e-"]):is(#niu-fr-b,*) :is(p,li,td,th){font-weight:400 !important;color:#333 !important}
/* FAQ and other text pages: <details> questions as an accordion with a red plus/minus */
.rte details{border-bottom:1px solid #E3E3E3;padding:16px 0}
.rte h2+details{border-top:1px solid #E3E3E3}
.rte summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;font-size:17px;font-weight:700 !important;color:#121212}
.rte summary::-webkit-details-marker{display:none}
.rte summary::after{content:"+";flex:none;font-size:26px;line-height:1;font-weight:400;color:#DF001F}
.rte details[open] summary::after{content:"\2212"}
.rte details>:not(summary){margin-top:12px}

/* Footer on phones: the column titles open and close their link lists, so show a white plus/minus */
@media screen and (max-width:768px){
.site-footer .footer_titles_btn{position:relative;padding-left:44px;padding-right:44px;cursor:pointer}
.site-footer .footer_titles_btn::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:26px;line-height:1;font-weight:400;color:#fff}
.site-footer .footer_item_bg>.footer_titles_btn::after{content:"\2212"}
}
/* Phones, product cards in grids: smaller colour dots in equal 48px columns so the names line up and three fit per row. Product pages keep the full-size dots */
@media (max-width:767px){
div.gp-grid label.option-item:is(#niu-sw,*):has(:is([option-type="color"],.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]))){width:48px !important;min-width:48px !important}
div.gp-grid label.option-item:is(#niu-sw,*):has(:is([option-type="color"],.option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]))) > .option-item-inner,div.gp-grid label.option-item:is(#niu-sw,*) .option-item-inner > div,div.gp-grid label.option-item:is(#niu-sw,*) .option-value-wrapper[option-type="rectangle_list"]:is([option-data="Couleur"],[option-data="Color"],[option-data="Farbe"]){width:32px !important;height:32px !important}
div.gp-grid label.option-item:is(#niu-sw,*) > span.gp-sr-only{font-size:10px !important;letter-spacing:.03em !important;white-space:normal !important;text-align:center;line-height:1.15 !important}
/* Home page on phones: these GemPages rows have no side padding, so the featured product text (row gp4zQXVmd7) and the accessory grid (row g4sFdQ6M94) sat on the screen edge. Element IDs, because the GemPages preview has no template class on the body */
#gp4zQXVmd7 > div:has(gp-product-title){padding-left:20px !important;padding-right:20px !important}
#g4sFdQ6M94 div.gp-grid{padding-left:6px !important;padding-right:6px !important}
}
/* Product cards in grids: two colour dots, then "+ n couleurs" for the rest (the full choice is on the product page) */
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]) > label.option-item:is(#niu-sw,*):nth-child(n+3){display:none !important}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"])::after{display:flex;align-items:center;min-height:45px;font-size:13px;font-weight:400 !important;color:#555;white-space:nowrap}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(3):last-child)::after{content:"+ 1 couleur"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(4):last-child)::after{content:"+ 2 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(5):last-child)::after{content:"+ 3 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(6):last-child)::after{content:"+ 4 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(7):last-child)::after{content:"+ 5 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(8):last-child)::after{content:"+ 6 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(9):last-child)::after{content:"+ 7 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(10):last-child)::after{content:"+ 8 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(11):last-child)::after{content:"+ 9 couleurs"}
div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"]):has(> label.option-item:nth-child(12):last-child)::after{content:"+ 10 couleurs"}
@media (max-width:767px){div.gp-grid .variant-option-group:has([option-type="color"],[option-data="Couleur"])::after{min-height:0;font-size:12px}}
/* Product cards whose fields share one grid across the row (home page accessories): price bold and right-aligned, placed under the colours and just above the button */
div.gp-grid gp-product form > gp-row > div > gp-row:has(> div > gp-product-price){order:1;grid-template-columns:minmax(0,1fr) !important;width:100%}
div.gp-grid gp-product form > gp-row > div:has(> gp-row > div > gp-product-price) > gp-product-button{order:2}
div.gp-grid gp-product form > gp-row > div > gp-row:has(> div > gp-product-price) > div{width:100%;align-items:stretch !important}
div.gp-grid gp-product form > gp-row > div > gp-row:has(> div > gp-product-price) gp-product-price{display:block;width:100%;text-align:right}
div.gp-grid gp-product form > gp-row > div > gp-row:has(> div > gp-product-price) .gp-price{display:block;font-size:20px !important;font-weight:700 !important;color:#121212 !important;text-align:right !important}
/* Body copy at 400 as on global.niu.com: the legacy rule above set every p, li and span to 300, which reads too thin in DINish. Spans with their own weight (bold runs in descriptions) keep it */
:is(p,li,td,dd),:is(p,li,td,dd) :is(span,a):not([style*="font-weight"]){font-weight:400 !important}
/* Button labels (add to cart, GemPages buttons) at 500, as on the global.niu.com primary buttons */
:is(.gp-button-atc,.gp-button-base,button[type="submit"]),:is(.gp-button-atc,.gp-button-base,button[type="submit"]) :is(span,div,p){font-weight:500 !important}
/* Product pages: colour first, then the other options (battery, range), whatever order the product data has */
.variant-inside:has([option-data="Couleur"],[option-type="color"]){order:-1}