:root {
  --radius: 6px;
  --container: 1580px;
  --container-md: 1106px;
  --font-family: Roboto, Arial, Helvetica, sans-serif;
  --font-size: 1.05rem;
  --font-size-sm: 0.9rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.5rem;
  --font-weight: 400;
  --line-height: 1.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.188rem;
  --space-7: 3.125rem;
  --space-8: 4.375rem;
  --bg: #fff;
  --bg-dark: #222;
  --bg-dark2: #444;
  --bg-dark3: #555;
  --bg-dark4: #666;
  --bg-clear: #f5f5f5;
  --bg-outside: #202020;
  --bg-button: #222;
  --bg-button2: #333;
  --bg-button3: #ffcc00;
  --bg-overlay: rgba(255, 255, 255, 0.2);
  --c: #000;
  --c-clear: #f2f2f2;
  --c-button: #fff;
  --c-muted: #888;
  --border: #eee;
  --c-star: #f5a623;
  --c-star-off: #ccc;
  --c-ok: #008000;
  --c-danger: #f00;
  --c-gray: #808080;
}

*, *::after, *::before { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
html { width: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  background: var(--bg);
}
.clear { clear: both; }
.wrapper { display: flex; min-height: 100vh; flex-direction: column; }
.wrapper-fill { display: flex; flex-grow: 1; }
.container { max-width: var(--container); margin: 0 auto; width: 100%; }
.container-outside { width: 100%; background-color: var(--bg-outside); }
.titlebar {
  margin-top: var(--space-3);
  color: var(--bg-dark);
  text-transform: uppercase;
  text-align: center;
  padding: var(--space-3);
  font-weight: bolder;
  display: block;
  width: 100%;
  font-size: var(--font-size);
  border-bottom: 3px solid var(--bg-dark);
}
.back-to-top {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 1000;
  background-color: var(--bg-button3);
  color: var(--c-button);
  width: var(--space-7);
  height: var(--space-7);
  border-radius: 10%;
  font-size: var(--font-size-2xl);
  text-align: center;
  line-height: var(--space-7);
  display: none;
  opacity: 0.7;
}
.placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--bg-clear);
  border: 1px dashed var(--bg-dark3);
}
.sujet { display: none; }

/* etoiles svg (filter + product + footer) */

.Filter .star img,
.Product .star img,
footer .star img {
  filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
.Filter .star .grey,
.Product .star .grey,
footer .star .grey {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
}
.Filter .star img:hover,
.Product .star img:hover {
  filter: invert(80%) sepia(38%) saturate(1603%) hue-rotate(358deg) brightness(99%) contrast(106%);
}
.Filter .star img:hover ~ img {
  filter: invert(100%) sepia(14%) saturate(168%) hue-rotate(220deg) brightness(114%) contrast(90%);
}

/* 1580px ; sous 1820px → 1106px. Densite via html font-size. */
@media screen and (max-width: 1820px) {
  html { font-size: 70%; }
  .container { max-width: var(--container-md); }
}
@media screen and (max-width: 1106px) {
  html { font-size: 100%; }
}

/* topbar */
.Topbar { display:flex; flex-wrap:wrap; padding:var(--space-3);}
.Topbar .logo { display:flex; flex-wrap:wrap; flex-grow:1; }
.Topbar .logo img { max-height: var(--space-8); width: auto; height: auto;}
.Topbar .links { display:flex; flex-wrap:wrap; justify-content:center;}
.Topbar .links img { display:flex; height:var(--space-6);  filter:invert(70%); margin-right: var(--space-3);}
.Topbar .links a, .Topbar .links .lang{ display:flex; align-items:center; padding:var(--space-3); color:var(--c-clear); text-decoration:none;}
.Topbar .links .logged { filter:invert(100%);}
.Topbar .quantity { color: var(--bg-dark);background: var(--bg-button3);margin-top:calc(0px - var(--space-5));margin-left: calc(0px - var(--space-4)); margin-right: var(--space-3); border-radius: 50%;  height: var(--space-5); width: var(--space-5);  font-size: var(--font-size-sm); text-align: center; z-index: 2;}

.Topbar .links select { padding:var(--space-1); }
@media screen and ( max-width: 600px) { 
  .Topbar .text { display: none;}
  .Topbar .links img { margin: 0;}
  .Topbar .logo { flex-direction: column; align-items: center; }
  .Topbar .logo img { max-width: 18.75rem;}
  .Topbar .links { align-content: center;flex-grow:1;}
}

/* search */
.Search_Moto,
.Searchcategory { display:flex; flex-wrap:wrap; align-items:stretch; position:relative; z-index: 5;}
.Search_Moto .icon ,
.Searchcategory .icon { display:flex; width:var(--space-4); height:var(--space-4); filter:invert(100%); margin-right: var(--space-4);}
.Search_Moto nav,
.Searchcategory nav { width: 20%; position: relative; }
.Search_Moto > form:not([role="search"]) { width: 20%; }
.Search_Moto > form[role="search"],
.Searchcategory form { flex: 1; min-width: 0; }
.Search_Moto input ,
.Searchcategory input { display:flex; border:none; font-size:var(--font-size); padding: var(--space-3); background:var(--bg-clear); color:var(--c); width:100%; height:100%; line-height: var(--space-4);}
.Search_Moto button ,
.Searchcategory button { display:flex; border:none; font-size:inherit; padding: var(--space-3); background:var(--bg-button); color:var(--c-button); width:100%; height:100%; font-weight:bolder; white-space:nowrap; overflow:hidden;cursor: pointer;}
.Search_Moto button.red ,
.Searchcategory button.red { background:var(--bg-button3);}
.Search_Moto button:not(.red) { background: var(--bg-dark2); color: var(--c-button); }
.Search_Moto button span ,
.Searchcategory button span { text-align: left; width: 15.625rem; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.Search_Moto .hint ,
.Searchcategory .hint { background:var(--bg-clear);}
.Search_Moto .hint a,
.Searchcategory .hint a, .Search_Moto .hint span , .Searchcategory .hint span {padding:var(--space-3) 0 0 var(--space-3); display:block; color:var(--c); text-decoration: none;}
.Search_Moto .Menu ,
.Searchcategory .Menu {cursor: pointer;}
.Search_Moto .Menu .SubMenu1 ,
.Searchcategory .Menu .SubMenu1 { background:var(--bg-dark2);}
.Search_Moto .Menu .SubMenu2 ,
.Searchcategory .Menu .SubMenu2 { background:var(--bg-dark3);}
.Search_Moto .Menu .SubMenu1 a ,
.Searchcategory .Menu .SubMenu1 a { padding-left:var(--space-3); background:var(--bg-dark2);}
.Search_Moto .Menu .SubMenu2 a ,
.Searchcategory .Menu .SubMenu2 a { padding-left:var(--space-5); background:var(--bg-dark3);}
.Search_Moto .dropdown ,
.Searchcategory .dropdown { list-style:none; position:absolute; top:100%; left:0; margin:0; background:var(--bg-outside); min-width:200%; border:0;}
.Search_Moto .dropdownmoto,
.Searchcategory .dropdownmoto { list-style:none; position:absolute; display:none; top:3rem; min-width:40%; margin:0; background:var(--bg-dark); border:1px solid var(--bg-dark2);}
.Search_Moto .dropdown ,
.Searchcategory .dropdown { display:block; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0s 0.5s;}
.Search_Moto .dropdown.show ,
.Searchcategory .dropdown.show { opacity: 1; visibility: visible; transition: opacity 0.5s, visibility 0s 0s;}
.Search_Moto .Menu li ,
.Searchcategory .Menu li { list-style:none;}
.Search_Moto .Menu span,
.Searchcategory .Menu span, .Search_Moto .Menu a, .Searchcategory .Menu a{ display: block; color: var(--c-clear); text-decoration: none; padding: var(--space-3);}
.Search_Moto .Menu a:hover,
.Searchcategory .Menu a:hover,
.Search_Moto .Menu span:hover,
.Searchcategory .Menu span:hover { font-weight:bolder; background: var(--bg-dark2); color: var(--c-clear);}
.Search_Moto ul ,
.Searchcategory ul { background: var(--bg-outside);}
.Search_Moto .Menu ul,
.Searchcategory .Menu ul{ display: none; }
.Search_Moto .Menu select,
.Searchcategory .Menu select,.Search_Moto .Menu input[type="submit"] ,.Searchcategory .Menu input[type="submit"] { display: block; padding:var(--space-3); width:95%; margin:0 auto; margin-top:var(--space-3); margin-bottom:var(--space-3); font-size: var(--font-size);}
.Search_Moto .Menu input[type="submit"] ,
.Searchcategory .Menu input[type="submit"] { float:none; background:var(--bg-button3); color:var(--c-button); font-weight: bolder;cursor: pointer;}
.Search_Moto .Menu input[name="reset"]  ,
.Searchcategory .Menu input[name="reset"]  { background:var(--bg-button2);}
.Search_Moto h1 ,
.Searchcategory h1 { display: flex; align-items: center; width:100%; flex-basis:100%; justify-content: center; padding: var(--space-3);font-size: var(--font-size); text-transform: uppercase; color: var(--c-clear); text-align: center;}
@media screen and (max-width: 600px) {
  .Search_Moto nav,
  .Search_Moto > form:not([role="search"]) { width: 50%; }
  .Search_Moto > form[role="search"] { flex: 1 1 100%; }
  .Search_Moto button { width: 100%; }
  .Search_Moto .dropdown { width: 200%; min-width: 0; }
  .Search_Moto .dropdownmoto { width: 100%; min-width: 0; left: 0; }
  .Searchcategory nav,
  .Searchcategory form { width: 100%; flex: 1 1 100%; }
  .Searchcategory button { width: 100%; }
  .Searchcategory .dropdown { width: 100%; min-width: 0; }
  .Search_Moto input, .Searchcategory input { width: 100%; text-align: center;}
}

/* slider */
.Slider { color: var(--bg-clear); position: relative;}
.Slider img { width: 100%; height: auto; margin-bottom: -4px;}
.Slider a { text-decoration: none; color: var(--bg-clear);}
.Slider figcaption {background: var(--bg-overlay); position: absolute; bottom: 0px; width: 100%;}
.Slider figcaption .txt {text-align: center;padding: var(--space-3);text-transform: uppercase;font-weight: bolder;}
@media screen and (max-width: 600px) { .Slider figcaption { display: none;} }

/* text */
.Text { margin-top: var(--space-3); width: 100%;}
.Text img, .Text video { padding: var(--space-3); }
.Text video { width: 640px; height: 480px; }
.Text form select { margin: 0 0 var(--space-3) var(--space-3); padding: var(--space-1);}
.Text h1, .Text h2,.Text h3 { padding: var(--space-3) 0 0 var(--space-3); font-size: var(--font-size-xl); width: 100%;}
.Text p, .Text ul { padding: var(--space-3); width: 100%;}
.Text ul, .Text ol { padding-left: var(--space-5);}
.Text.center { text-align: center;}
.Text a { color:var(--c); font-weight: bolder;}
@media screen and (max-width: 1264px) {
  .Text img {display:flex;width: 50%; height: auto; margin : 0 auto;}
  .Text video {display:flex;width: 100%; height: auto; margin : 0 auto;}
}

/* filter */
.Filter { display:flex; flex-wrap:wrap; justify-content:left; padding:var(--space-3);}
.Filter.front {  border: 1px solid var(--bg-clear);}
.Filter.front select { margin: 0 var(--space-3) var(--space-3); padding: var(--space-2); max-width: 100%; }
.Filter a{ color: var(--bg-dark);}

.Filter p, .Filter h2, .Filter h3 { text-align:left;  padding:var(--space-3); color:var(--bg-dark); display:block; width:100%;}
.Filter .item { display:flex; flex-direction:column; align-items:center; background:var(--bg); margin:var(--space-3);width:17.5rem; border: 1px solid var(--bg-clear);}
.Filter .item.detail { width:48%; }
.Filter .item.detail img { max-height:25rem; max-width:100%; margin:var(--space-3);}
.Filter .item img { max-height:9.375rem; max-width:15.625rem; margin:var(--space-3); }
.Filter .item .noimage{ background:var(--bg-dark);}
.Filter .item .pic-mini { display:flex; align-items:center; flex-wrap: wrap; justify-content: center;}
.Filter .item .pic-mini img { max-height:2.5rem; max-width:2.5rem; }
.Filter .item .pic-mini-detail img { max-height:5rem; max-width:5rem; }
.Filter .item .price { font-weight:bolder; font-size: var(--font-size-lg);}
.Filter .item .specific { font-weight:bolder; font-size: var(--font-size-lg); color: var(--c-ok); text-align:center; }
.Filter .item .universel { font-weight:bolder; font-size: var(--font-size-lg); text-align:center; }

.Filter .item .price.promo { color:var(--bg-button3);}
.Filter .item .promo100 { display:flex;background:var(--bg-clear);color:var(--c); width: 100%; margin-top: 1px;padding: var(--space-1) var(--space-4);justify-content: space-between;}
.Filter .item .promo100 span { display:flex;}
.Filter .item .price.old { text-decoration:line-through;font-size: var(--font-size-lg); color:var(--c);}
.Filter .item .price.quantity { font-size: var(--font-size-lg); color:var(--c);  }
.Filter .item .stock { padding:var(--space-3); color:var(--c-ok);}
.Filter .item .nostock { color: var(--bg-button3);}
.Filter .item .space { flex-grow:1; }
.Filter .item .des { padding:var(--space-3); max-width:15.625rem; text-align: center;}
.Filter .item .review { padding:var(--space-3); max-width:20.625rem; text-align: center;}

.Filter .item .des a{ color:var(--bg-dark); text-decoration: none;}
.Filter .item .des h3 { font-size:inherit; font-weight:lighter; text-align: center; margin: 0; padding: 0;}

.Filter .item input[type=text] { font-weight:bolder; background:var(--bg); color:var(--c); font-size:inherit; padding:var(--space-3); width:100%; border:none;}
.Filter .item input[type=text]::placeholder { text-align: center;}
.Filter .item button { font-weight:bolder; background:var(--bg-button); color:var(--c-button); font-size:inherit; padding:var(--space-3); width:100%; border:none; margin-bottom:1px; }
.Filter .item button:hover { cursor:pointer; background:var(--bg-button2);}
.Filter .item button.minus,
.Filter .item button.plus {border-bottom: 1px solid var(--bg); font-weight: bolder;font-size: var(--font-size-2xl);}

.Filter .item input[type=radio] { position: absolute;opacity: 0;width: 0;height: 0;}
.Filter .item input[type=radio] + img { cursor: pointer;}
.Filter .item input[type=radio]:checked + img { padding: var(--space-3);outline: 5px solid var(--bg-button3);}
.Filter .item label{ padding:var(--space-3); text-align: center;} 
.Filter .paypal{ width: 50%; margin:auto;} 
.Filter .categories { display:flex; flex-wrap:wrap; justify-content:left;width: 100%; }
.Filter .categories .item { display:flex; flex-direction:column; justify-content:center; width:17.5rem; height: 8rem;border: 5px solid var(--bg-clear);}
.Filter .categories .item a { display:flex; text-decoration:none; color:var(--c); font-weight:bolder; justify-content:left; padding:var(--space-3); align-items:center;}
.Filter .categories .item img{ display:flex; width:7rem; height:auto; }
@media screen and (max-width: 1264px) {.Filter .categories .item {width: 100%;} .Filter .item.detail {width: 100%;}}
.Filter .item.detail select { width: 100%; padding: var(--space-3); margin: 0; text-align: center; font-weight: bolder; box-sizing: border-box;}
.Filter .item.detail button {width: 100%; padding: var(--space-3);}

.Filter .item form {width: 100%;}
.Filter .item .star { padding-bottom: var(--space-3); }
.Filter .item .star img { padding: 0; margin: 0; width: 1rem; height: 1rem; }

@media screen and (max-width: 700px) { .Filter .item{ width: 100%;}  }

.Filter .pagination {display: flex; flex-wrap: wrap; align-content: center; align-items: center; padding: var(--space-3); width:100%;}
.Filter .pagination li { list-style: none;}
.Filter .pagination a { display:flex; flex-wrap:wrap; align-items:center; align-content:center; color:var(--c-button); background:var(--bg-button);text-decoration: none; padding:var(--space-3);}
.Filter .pagination a:hover, .Filter .pagination .active{ background:var(--bg-button3); font-weight: bolder;}
.Filter.breadcrumb {padding:var(--space-3); border:1px solid var(--bg-clear); display:block; width:100%;}
.Filter.breadcrumb li { display:inline; }
.Filter.breadcrumb li + li:before { content: " > "; }
.Filter.breadcrumb a{ color:var(--c);}

.Filter.left {
  display: flex;
  flex-direction: column;
  float: left;
  width: 17.5rem;
  margin-top: var(--space-3);
  margin-right: var(--space-3);
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--bg-clear);
  border-radius: 0;
}
.Filter.left + .Filter.front { margin-top: var(--space-3); }
.Filter.left .icon { display:flex; width:var(--space-4); height:var(--space-4); margin-right:var(--space-3); }
.Filter.left li { list-style:none; }
.Filter.left a { text-decoration: none; color: var(--c); }
.Filter.left a:hover { text-decoration: underline; }
.Filter.left .underline { text-decoration: underline; }
.Filter.left p { display: block; padding: var(--space-2) var(--space-3); font-weight: bolder; width: 100%; }
.Filter.left form { display: flex; flex-direction: column; gap: 0; }
.Filter.left h3 { display: none; }
.Filter.left .sort { display: block; width: 100%; }
.Filter.left .sort select { width: 100%; padding: var(--space-3); font-size: inherit; font-weight: bolder; border: 0; background: var(--bg-clear); color: var(--c); }
.Filter.left .moto-selected { border-bottom: 1px solid var(--bg-clear); padding: 0 0 var(--space-3); }
.Filter.left .moto-selected strong { display: block; padding: var(--space-3); text-transform: uppercase; font-weight: bolder; }
.Filter.left details { background: var(--bg); border-top: 1px solid var(--bg-clear); padding: 0; border-radius: 0; }
.Filter.left details summary { font-weight: bolder; cursor: pointer; padding: var(--space-3); }
.Filter.left details[open] summary { border-bottom: 1px solid var(--bg-clear); }
.Filter.left label.facet { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; margin-top: 1px; padding: var(--space-1) var(--space-3); background: var(--bg-clear); cursor: pointer; font-size: var(--font-size-sm); border-left: 3px solid transparent; }
.Filter.left label.facet input { position: absolute; opacity: 0; width: 0; height: 0; }
.Filter.left label.facet em { color: var(--c-muted); font-style: normal; font-size: var(--font-size-sm); }
.Filter.left label.facet:has(input:checked),
.Filter.left label.facet:has(a.active) { border-left-color: var(--bg-button3); font-weight: bolder; }
.Filter.left label.facet a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; color: var(--c); }
.Filter.left label.facet a:hover { text-decoration: none; }
.Filter.left .modelconfirm { padding: var(--space-3); font-weight: inherit; border-top: 1px solid var(--bg-clear); }
.Filter.left .reset,
.Filter.left a.choose-moto { display: block; width: 100%; padding: var(--space-3); text-align: center; font-weight: bolder; text-decoration: none; margin: 0; border-radius: 0; }
.Filter.left .reset { background: var(--bg-button); color: var(--c-button); }
.Filter.left .reset:hover { background: var(--bg-button2); text-decoration: none; }
.Filter.left a.choose-moto { background: var(--bg-button3); }
.Filter.left a.choose-moto:hover { text-decoration: none; }

@media screen and (max-width: 1264px) {
  .Filter.breadcrumb { text-align:center; }
}
@media screen and (max-width: 900px) {
  .Filter.left { width: 100%; margin-right: 0; margin-bottom: var(--space-3); }
  .Filter.left + .Filter.front { margin-top: 0; }
}

.MotoCompat .scroll { width:100%; max-height:26rem; overflow:auto; }
.MotoCompat table { width:100%; border-collapse:collapse; }
.MotoCompat th { position:sticky; top:0; text-align:left; padding:var(--space-3); background:var(--bg-dark); color:var(--c-clear); font-weight:bolder; }
.MotoCompat td { text-align:left; padding:var(--space-3); }
.MotoCompat tbody tr:nth-child(odd) td { background:var(--bg-clear); }
.MotoCompat a { color:var(--c); font-weight:bolder; }

/* motorbrand */
.Motorbrand { display:flex; flex-wrap:wrap; justify-content:center; background:var(--bg-clear); padding:var(--space-3); }
.Motorbrand .item { display:flex; justify-content:left; width:17.5rem; background:var(--bg); margin:var(--space-3);text-decoration:none; color:var(--c); font-weight:bolder; padding: var(--space-3); align-items: center;}
.Motorbrand img{ display:flex;height:auto; width: var(--space-6); margin-right:var(--space-3); justify-items: center; aspect-ratio: 1/1;}
.Motorbrand .allbrands { background:var(--bg-button3); color: var(--c-button); justify-content:center;}
.Motorbrand h2 { font-size: var(--font-size-xl);text-align:left; font-weight:bolder; padding:var(--space-3); color:var(--bg-dark); display:block; width:100%;}
.Motorbrand.left { justify-content:left;}
.Motorbrand .item.model{ height: 6.25rem; padding: var(--space-3);}
@media screen and (max-width: 600px) { .Motorbrand .item {width:100%;}}

/* product */
.Product { display:flex; flex-wrap:wrap; justify-content:left;border-left: 1px solid var(--bg-clear);border-right: 1px solid var(--bg-clear);}
.Product .item table th,
.Product .item table td { text-align:left; padding: var(--space-3); background-color: var(--bg-clear); }
.Product .item table th { font-weight: bolder; }
.Product .item { display:flex; text-align:center;flex-direction:column; font-size: var(--font-size-lg); align-items:center; background:var(--bg); margin:var(--space-5) var(--space-5) 0 var(--space-5); width:100%;padding: var(--space-3);}
.Product .item img { max-width:50%; align-items: center; max-height: 31.25rem;}
.Product .item .noimage{ background:var(--bg-dark); }
.Product .item .color { width:var(--space-6); height: var(--space-6); align-items: center; justify-content: center; display: flex; margin: var(--space-3);}
.Product .item .text { font-size: var(--font-size-xl); font-weight: bolder;}
.Product .item .pic-mini { display:flex; align-items:center;flex-wrap: wrap; justify-content: center;}
.Product .item .pic-mini img { max-width:20%;  margin: var(--space-3);}
.Product .item .price { font-weight:bolder; font-size: var(--font-size-2xl); padding:var(--space-3);}
.Product .item .price.promo { color:var(--c-danger);}
.Product .item .price.old { text-decoration:line-through;font-size: var(--font-size-lg);}
.Product .item .stock { font-size: var(--font-size-2xl);  padding:var(--space-3); color:var(--c-ok);}
.Product .item .nostock { color: var(--c-danger);}
.Product form {width: 100%;}
.Product .button {  cursor:pointer;
  text-align: center; text-decoration: none;font-weight:bolder; 
  background:var(--bg-button3); color:var(--c-button); font-size: var(--font-size-xl); padding:var(--space-5); width:100%; border:none;}
.Product .item select { display: flex; padding:var(--space-3); width:30%; font-size: var(--font-size); text-align: center;}
.Product .item select.second { margin-top: var(--space-3);}

.Product .item .star { width:100%; }
.Product .item .star img { width: 2rem; height: 2rem; }

.Product .item input[type=text] { font-weight:bolder; background:var(--bg); color:var(--c); font-size:inherit; padding:var(--space-3); width:20%; border:none; text-align: center;}
.Product .item input[type=text]::placeholder { text-align: center;}
.Product .item button { font-weight:bolder; background:var(--bg-button); color:var(--c-button); font-size:inherit; padding:var(--space-3); width:20%; border:none; margin-bottom:1px; }
.Product .item button:hover { cursor:pointer; background:var(--bg-button2);}
.Product .item button.minus,
.Product .item button.plus {border-bottom: 1px solid var(--bg); font-weight: bolder; font-size: var(--font-size-2xl);}

@media screen and (max-width: 1264px) { .Product .item{ width: 100%;} .Product .item img { width:70%;} .Product .item select { width:100%; }}

.ReviewLink { padding:var(--space-3) 0; margin:var(--space-3) 0; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-3); }
.ReviewLink .star img { height:1rem; }
.ReviewLink a { color:var(--c); }

/* cart */
.Cart { display: block; }
.Cart h1 { 
  display: block;
  font-size: var(--font-size-xl); 
  padding: var(--space-3);
  font-weight: bolder;
  background: var(--bg-clear);
  width: 100%;
}
.Cart button { 
  display: block;
  padding:var(--space-3);
  background: var(--bg-button3);
  color: var(--c-button);
  width: 40%;
  font-size: inherit;
  font-weight: bolder;
}
.products:first-child { margin-top: var(--space-5); }

.products {
  display: flex;
  align-items: center;
  background: var(--bg);
  padding: var(--space-5);
  margin: var(--space-3);
  min-height: 12.5rem;
}

.products .image img{
  max-width:9.375rem;
  width: auto;
  height: auto;
  margin: auto;
  padding: var(--space-1);
}

.products .des {
  display:flex;
  padding:var(--space-3); 
  flex-grow: 1;
}
.products .ref {
  font-weight: bolder;
  padding:var(--space-3);
}

.products .ref a {
  color: var(--c);
}
.products .price { 
  font-size: var(--font-size-xl); 
  font-weight: bolder;
  padding:var(--space-3); 
}
.products .price .old { 
  text-decoration:line-through;
  font-size: var(--font-size-xl); 
  color:var(--c);
}
.products .price .promo { 
  color:var(--bg-button3);
}
.products .stock { 
  font-size: var(--font-size-xl); 
  font-weight: bolder;
  color: var(--c-ok);
  padding:var(--space-3); 
}
.products .stock.nostock { 
  color: var(--bg-button3);
  padding:var(--space-3); 
}
.products input { 
  font-weight:bolder; 
  font-size: var(--font-size);
  background:var(--bg-clear); 
  color:var(--c); 
  text-align: center;
  border:1px solid var(--bg-button);
  width: var(--space-7);
  height: var(--space-7);
}
.products button { 
  font-weight:bolder; 
  background:var(--bg-button); 
  color:var(--c-button); 
  padding:var(--space-3); 
  border:1px solid var(--bg-button);
  min-width: var(--space-7);
  height: var(--space-7);
}
.products button:hover { 
  background:var(--bg-button2); 

}
.products button.minus,
.products button.plus { 
  font-size: var(--font-size-2xl); 
  padding: 0;
}

@media screen and (max-width: 900px) {
  .products { 
    flex-direction:column;
    text-align: center;
    justify-content: center;
  } 
  .products form, .products button, .products input { 
    width: 60%;
  }
}

/* account */
.Account {
  display: flex;
  align-items: center;
  margin: var(--space-3) 0;
}
.Account p { padding-bottom: var(--space-3);}

.Account .item{
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding: var(--space-3);
  background: var(--bg);
}
.Account h1, .Account h2 {
  color: var(--c);
  font-size: var(--font-size-xl);
  margin: var(--space-3) 0;
}
.Account label {
  color: var(--c);
  font-weight: bolder;
}
.Account input[type=email], .Account input[type=password], .Account input[type=text],  .Account textarea, .Account select {
  color: var(--c);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border: none;
  background: var(--bg-clear);
}
.Account input[type=checkbox] { width: auto; margin-right: var(--space-2); }
.Account #invoice-fields {
  display: flex;
  flex-direction: column;
  min-width: 100%;
  padding-top: var(--space-3);
}
.Account #invoice-fields[hidden] { display: none; }
.Account button {
  color: var(--c-button);
  padding: var(--space-3);
  margin: var(--space-3) 0;
  border: none;
  font-size: inherit;
  background: var(--bg-button);
}
.Account button:hover { cursor:pointer; background:var(--bg-button2);}

.Account a { color: var(--c); }
@media screen and (max-width: 600px) {
  .Account .item{ min-width: 100%; }
}

.Account .order{
  display: flex;
  flex-direction: row;
  padding-bottom: var(--space-3);
}
.Account .order.item{
  flex-direction: column;
  min-width: 100%;
}
.Account .order span {
  display: flex;
  width: 15%;
}

.Account .order .wide{
  display: flex;
  width: 45%;
}
.Account .order.column {
  font-weight: bolder;
  margin: var(--space-3) 0 var(--space-3) 0;
}

@media screen and (max-width: 600px) { 
  .Account .order { flex-direction: column;} 
  .Account .order span{width: 100%;} 
}

.stars-input { display:inline-flex; flex-direction:row-reverse; justify-content:flex-start; gap:2px; font-size:var(--font-size-2xl); line-height:1; }
.stars-input input { position:absolute; opacity:0; pointer-events:none; }
.stars-input label { cursor:pointer; color:var(--c-star-off); transition:color .1s; }
.stars-input input:checked ~ label,
.stars-input label:hover,
.stars-input label:hover ~ label { color:var(--c-star); }

/* review */
.Review { margin-top:var(--space-3); width:100%; }
.Review h2 { color:var(--c); font-size: var(--font-size-xl); padding:var(--space-3) var(--space-5); }
.Review .stars { display:inline-flex; gap:2px; line-height:1; }
.Review .stars span { color:var(--c-star); }
.Review .stars span.off { color:var(--c-star-off); }
.Review .aggregate { padding:var(--space-3) var(--space-5); }
.Review .aggregate .rating { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.Review .aggregate .score strong { font-size: var(--font-size-xl); }
.Review .aggregate .score small { color:var(--bg-dark2); }
.Review .list { display:flex; flex-direction:column; gap:var(--space-5); padding:var(--space-3) var(--space-5); }
.Review .entry .stars { font-size:var(--font-size-sm); }
.Review .entry .meta { font-weight:bolder; }
.Review .entry time { font-weight:400; color:var(--bg-dark2); margin-left:.4rem; }
.Review .entry p { margin-top:var(--space-1); }
.Review .list.cards .entry { background:var(--bg-clear); border-radius:var(--radius); padding:var(--space-3); }

/* footer */
footer { display: flex; flex-direction:column;padding:var(--space-3); flex-grow:3; }
footer div { display: flex; align-items: center; justify-content: center;}
footer .links a { color:var(--c-clear);text-decoration:none; padding:var(--space-3);}
footer .links a:hover { text-decoration: underline; }
footer .logos { display: flex; flex-wrap: wrap; justify-content: center;}
footer .logos img{ max-height: var(--space-6); margin:var(--space-3);}

footer .star img { padding: 0; margin: 0; width: 1rem; height: 1rem; }
footer .star a {  padding-left:var(--space-3);color:var(--c-clear); }
footer p{  color: var(--bg-clear); padding: var(--space-3); text-align: center; }

@media screen and (max-width: 600px) { footer .links { overflow-x: auto; flex-wrap: nowrap;} }

/* page */
.Staticpage p  { padding: var(--space-3);}
.Staticpage table  { padding: var(--space-3); background:var(--bg); width: 100%;}
.Staticpage ol { padding: var(--space-5);}
.Staticpage h2,
.Staticpage h3 { padding: var(--space-3) 0 0 var(--space-3);}
.Staticpage a{ color: var(--bg-dark);}
.Staticpage table td {padding-right: var(--space-3);}
.Staticpage .links a{ color: var(--bg-dark); line-height: 2rem; font-weight: bolder;}
.Staticpage img{ padding: var(--space-3); max-height:20rem; max-width:20rem; }
.Staticpage { background: var(--bg-clear); padding: var(--space-3);}
@media screen and (max-width: 600px) {
  .Staticpage img { max-height: none; max-width: 100%; width: 100%; }
}

/* notfound */
.Notfound { display:flex; flex-direction: column; padding-top: var(--space-7);  padding-bottom: var(--space-7); }
.Notfound img { display:flex;   width: 50%; height: auto; margin : 0 auto;}
.Notfound h1 {  display:flex; justify-content: center; padding: var(--space-7) var(--space-3) var(--space-7) var(--space-3); font-size: var(--font-size-xl)}