/* Cart panel, line rows and add-to-cart button.
 *
 * Kept out of the theme bundle so a re-clone or a theme CSS swap cannot lose it.
 * The header cart widget is theme markup; only the panel below it is ours.
 */
.vp-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 14px;
  border: 1px solid #1e3a5f;
  border-radius: 6px;
  background: #fff;
  color: #1e3a5f;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
}
.vp-add-btn:hover { background: #1e3a5f; color: #fff; }

/* Product page: sits after the WhatsApp and pay buttons, so it reads as the
   quieter third option rather than competing with the two money paths. */
.vp-add-row { margin: 4px 0 10px; }
.vp-add-row .vp-add-spec { font-size: 13px; color: #6b7280; text-transform: none; }

/* Sizes live here, next to the button, so buying a bigger box is not a trip to
   the Additional information tab. */
.vp-size-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vp-size-row:empty { display: none; }
/* The theme's `button` rule is uppercase, 42px tall and grey; these are labels,
   not buttons, so every one of those has to be overridden. */
.vp-size {
  min-height: 0;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  color: #1e3a5f;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
}
.vp-size:hover { border-color: #1e3a5f; }
.vp-size-on,
.vp-size-on:hover { color: #fff; background: #1e3a5f; border-color: #1e3a5f; }
#product-specs tr[data-on] td { font-weight: 600; }

.vp-added {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  color: #17803d;
}

.vp-cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10010;
  width: 340px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
  font-size: 14px;
}
.vp-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.vp-cart-headl { display: flex; align-items: center; gap: 10px; }
.vp-cart-x {
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
}
/* Lives in the head now, so it no longer needs the foot's full width. */
.vp-cart-head .vp-cart-clear {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}
.vp-cart-head .vp-cart-clear:hover { color: #b42318; }
.vp-cart-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.vp-cart-empty { color: #6b7280; }

.vp-line { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1f2f4; }
.vp-line-img { width: 52px; flex: 0 0 52px; }
.vp-line-img img { width: 100%; height: auto; border-radius: 4px; display: block; }
.vp-line-body { flex: 1; min-width: 0; }
.vp-line-name { display: block; font-weight: 600; color: #1e3a5f; text-decoration: none; }
.vp-line-spec { font-size: 12px; color: #6b7280; margin: 2px 0 6px; }
.vp-line-qty { display: flex; align-items: center; gap: 6px; }
.vp-line-qty button {
  width: 24px;
  height: 24px;
  border: 1px solid #d6d9dd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 1;
}
.vp-line-qty span { min-width: 18px; text-align: center; }
.vp-line-rm {
  width: auto !important;
  padding: 0 6px;
  border: 0 !important;
  color: #b42318;
  font-size: 12px;
}

/* Outside the scroll box (a direct child of the flex column), so the lines and the
   delivery form scroll above it while the money and both actions stay put. It used
   to be inside the body and ran 754px tall on a 587px scroller, which put the
   checkout button under the fold on every phone. */
.vp-cart-foot {
  flex: 0 0 auto;
  padding: 10px 16px 8px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .06);
}
.vp-cart-coins { font-size: 12px; color: #6b7280; margin: 6px 0 0; }
.vp-cart-row { display: flex; justify-content: space-between; padding: 3px 0; }
.vp-cart-off { color: #17803d; }
.vp-cart-total { font-weight: 700; border-top: 1px solid #e5e7eb; margin-top: 6px; padding-top: 8px; }
.vp-cart-hint { font-size: 12px; color: #6b7280; margin: 6px 0 0; }

/* Origin line under the address in every footer. The site ships from Asia and
   says so, which is what makes the 5-9 day transit claim defensible. */
.vp-ships-from { font-size: 12px; opacity: .75; }

/* Delivery form in the drawer. The theme has no styling for inputs inside it,
   and every field is one line so the drawer does not become a page. */
.vp-ship { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.vp-ship-f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #6b7280; }
.vp-ship-f input {
  width: 100%;
  padding: 7px 9px;
  font-size: 13px;
  color: #111827;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
}
.vp-ship-f input:focus { outline: 2px solid #1e3a5f; outline-offset: -1px; }

.vp-cart-pay {
  display: block;
  margin-top: 8px;
  padding: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a5f;
  background: #fff;
  border: 1px solid #1e3a5f;
  border-radius: var(--btn-brd-radius, 6px);
  text-decoration: none !important;
}
.vp-cart-pay:hover { background: #f1f5f9; }
.vp-cart-miss { font-size: 12px; color: #b42318; margin: 0 0 6px; }
.vp-cart-miss[hidden] { display: none; }
.vp-cart-checkout {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  text-transform: none;
  border: 0;
  border-radius: 6px;
  background: #25d366;
  color: #073b1e;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
/* Narrow screens: the panel becomes a bottom sheet so it cannot sit under the
   sticky header's own stacking context. */
@media (max-width: 640px) {
  .vp-cart-panel { top: auto; left: 0; right: 0; width: auto; height: 78vh; border-radius: 12px 12px 0 0; }
}
.vp-cart-clear {
  width: 100%;
  margin-top: 6px;
  padding: 6px;
  border: 0;
  background: none;
  color: #6b7280;
  font-size: 12px;
  cursor: pointer;
}