body{
  font-family: Arial;
  margin:0;
  padding:0;
  background:#f5f5f5;
}

.topbar{
  position:sticky;
  top:0;
  background:#111;
  color:white;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:10;
}

.topbar h1{
  margin:0;
  font-size:18px;
}

.topbar-right button{
  margin-left:10px;
  padding:10px 12px;
  cursor:pointer;
  border:0;
  border-radius:8px;
}

.panel{
  padding:14px 18px;
  background:#fff;
  border-bottom:1px solid #ddd;
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:10px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:160px;
}

.field.grow{ flex:1; min-width:260px; }
.field label{ font-size:12px; color:#444; }

.field input, .field select, .field button{
  padding:10px 10px;
  border-radius:10px;
  border:1px solid #ddd;
  outline:none;
  background:#fff;
}

.field button{ cursor:pointer; }

.field button.secondary{
  background:#f2f2f2;
}

.field.info{
  min-width:260px;
}

.statusText{
  font-size:13px;
  color:#333;
}
.countText{
  font-size:12px;
  color:#666;
}

.grid{
  padding: 18px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.card{
  background:white;
  border:1px solid #ddd;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .08s ease;
}

.card:hover{
  transform: translateY(-2px);
}

.card-photo {
  width: 100%;
  height: 170px;
  background: #eee;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.card .content{
  padding:12px;
}

.card h3{
  margin:0 0 8px 0;
  font-size:16px;
}

.card .meta{
  font-size:14px;
  color:#444;
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#eee;
}

.price{
  margin-top:10px;
  font-weight:bold;
  font-size:16px;
}

.pagerWrap{
  padding: 0 18px 22px 18px;
}

.pager{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.pager button{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}

.pager button.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.pager button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.pager .dots{
  color:#666;
  padding:0 4px;
}

/* ===========================
   Multi dropdown (checkboxes)
   =========================== */

/* cache uniquement les select multiple natifs (on les garde pour la logique JS) */
.field select[multiple]{
  display:none !important;
}

/* wrapper dropdown */
.ms-wrap{
  position:relative;
  width:100%;
}

/* bouton visible */
.ms-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid #ddd;
  outline:none;
  background:#fff;
  cursor:pointer;
}

.ms-btn .ms-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:14px;
}

/* panneau déroulant (n’écrase pas le layout) */
.ms-panel{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  background:#fff;
  border:1px solid #ddd;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  z-index:9999;

  max-height:260px;
  overflow:auto;
  padding:8px;
  display:none;
}

.ms-wrap.open .ms-panel{
  display:block;
}

/* recherche */
.ms-search{
  width:100%;
  padding:8px 10px;
  border:1px solid #e5e5e5;
  border-radius:10px;
  margin-bottom:8px;
  outline:none;
}

/* item checkbox */
.ms-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px;
  border-radius:10px;
  cursor:pointer;
}
.ms-item:hover{ background:#f5f5f5; }
.ms-item input{ transform:scale(1.05); }

/* actions */
.ms-actions{
  display:flex;
  gap:8px;
  padding:8px 0 0;
  border-top:1px solid #eee;
  margin-top:8px;
}
.ms-actions button{
  padding:8px 10px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}

img {
  image-orientation: from-image;
}

/* ======================================
   FIX ORIENTATION IMAGE (APRILIA SR GT)
   ====================================== */

.card img.rotate-fix {
  width: 100%;
  height: 170px;              /* même hauteur que la card */
  object-fit: contain;        /* pas de crop */
  background: #eee;

  transform: rotate(-90deg);
  transform-origin: center center;

  display: block;
}


.card-photo img.rotate-fix {
  object-fit: contain;
  transform: rotate(-90deg);
  transform-origin: center center;

  max-width: 100%;
  max-height: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.grid {
  align-items: stretch;
}