/* ==========================================================
   Anti-flash au chargement : caché tant que JS pas prêt
   ========================================================== */
.vog-sc { display: none; }
.vog-sc.is-ready { display: block; }


/* ==========================================================================
   PS 1.7.8.10 — neutralisation modal add-to-cart (ps_shoppingcart)
   ========================================================================== */
#blockcart-modal.modal,
#blockcart-modal {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* au cas où bootstrap laisse le backdrop */
.modal-backdrop {
  display: none !important;
}

/* ==========================================================================
   Side cart
   ========================================================================== */
.vog-sc {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
}

.vog-sc.is-open { pointer-events: auto; }

.vog-sc__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .18s ease;
}

.vog-sc.is-open .vog-sc__overlay { opacity: 1; }

.vog-sc__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px; /* demandé */
  background: #fff;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  transition: transform .18s ease;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* position */
.vog-sc.is-right .vog-sc__panel { right: 0; transform: translateX(110%); }
.vog-sc.is-left  .vog-sc__panel { left: 0;  transform: translateX(-110%); }

.vog-sc.is-open.is-right .vog-sc__panel { transform: translateX(0); }
.vog-sc.is-open.is-left  .vog-sc__panel { transform: translateX(0); }

/* head */
.vog-sc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem .6rem;
  border-bottom: 1px solid #eee;
}

.vog-sc__title {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-weight: 700;
  font-size: 14px;
}

.vog-sc__count {
  font-weight: 700;
  font-size: 12px;
  background: #111;
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
}

.vog-sc__close {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

/* body */
.vog-sc__body {
  flex: 1;
  overflow: auto;
  padding: .5rem .5rem;
}

.vog-sc__empty {
  font-size: 13px;
  color: #666;
  padding: .75rem .25rem;
}

/* items */
.vog-sc__item {
  display: flex;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px dashed #eee;
}

.vog-sc__thumb { display: block; width: 44px; height: 44px; flex: 0 0 44px; }
.vog-sc__img {
  width: 44px; height: 44px;
  object-fit: cover;
  border: 1px solid #eee;
  border-radius: 6px;
  display: block;
}

.vog-sc__meta { flex: 1; min-width: 0; }
.vog-sc__name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: 2px;
}

.vog-sc__ref {
  font-size: 11px;
  color: #777;
  margin-bottom: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vog-sc__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.vog-sc__price {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* qty */
.vog-sc__qty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.vog-sc__qtybtn {
  width: 22px;
  height: 22px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  line-height: 20px;
  font-weight: 700;
}

.vog-sc__qtyin {
  width: 40px;
  height: 22px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
  outline: none;
}

/* footer */
.vog-sc__footer {
  border-top: 1px solid #eee;
  padding: .55rem .6rem .6rem;
}

.vog-sc__totals {
  display: grid;
  gap: .25rem;
  margin-bottom: .55rem;
}

.vog-sc__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #222;
}

.vog-sc__row--grand { font-size: 13px; }

.vog-sc__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: .55rem .5rem;
  border-radius: 10px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
/* --- top row name + remove --- */
.vog-sc__toprow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.35rem;
}

.vog-sc__remove{
  border:1px solid #ddd;
  background:#fff;
  border-radius:8px;
  width:24px;
  height:24px;
  line-height:22px;
  cursor:pointer;
  flex:0 0 auto;
  font-weight:700;
}

/* --- prices HT --- */
.vog-sc__prices{
  display:grid;
  gap:.2rem;
  margin:.25rem 0 .35rem;
}

.vog-sc__p{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:#333;
}

.vog-sc__p span{ color:#777; }
.vog-sc__p strong{ font-weight:800; }
/* bouton "Ajouter" miniature */
.button_miniature {
  cursor: pointer;      /* ✅ pointer */
  border: none;         /* ✅ pas de bordure */
  outline: none;
}

.button_miniature:focus,
.button_miniature:active {
  outline: none;
  box-shadow: none;     /* ✅ retire l'effet focus noir */
}

/* si ton thème ajoute un outline au focus accessible,
   tu peux remplacer par un focus visible custom plutôt que rien */
.button_miniature:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Message franco */
.vog-sc__free-shipping {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: .5rem;
  padding: .4rem .6rem;
  border-radius: 8px;
  text-align: center;
}

/* 🔴 Franco non atteint */
.vog-sc__free-shipping.is-missing {
  background: rgba(220, 53, 69, 0.12);   /* rouge léger */
  color: #842029;
}

/* 🟢 Franco atteint */
.vog-sc__free-shipping.is-ok {
  background: rgba(25, 135, 84, 0.15);   /* vert léger */
  color: #0f5132;
}


/* Ligne produit : image + contenu alignés en haut */
.vog-sc__item {
  display: flex;
  align-items: flex-start; /* 🔑 clé du problème */
  gap: .6rem;
}

/* Miniature */
.vog-sc__thumb {
  flex: 0 0 48px;           /* largeur fixe image */
  display: flex;
  align-items: flex-start; /* image collée en haut */
}

.vog-sc__img {
  width: 48px;
  height: 48px;
  object-fit: contain;     /* évite les déformations */
}

/* Contenu à droite */
.vog-sc__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

/* ==========================================================
   FIX alignement image / infos (force)
   ========================================================== */
.vog-sc .vog-sc__item {
  display: flex !important;
  align-items: flex-start !important;
  gap: .6rem !important;
}

.vog-sc .vog-sc__thumb {
  display: flex !important;
  align-items: flex-start !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  height: auto !important; /* important: ne force plus 44px */
}

.vog-sc .vog-sc__img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
}

.vog-sc .vog-sc__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: .2rem !important;
}
.vog-sc__meta a {
  color: black !important;
}