/* New container/card layout aligned with existing auth styling */
.auth-container {
	min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #71c3b5 0%, #71c3b5 100%);
    position: relative;
    margin-top: 80px;
	max-width: none;
}
.auth-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 20px;
  width: 100%;
  /* removed fixed min-width for responsiveness */
  /* min-width: 1100px; */
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  box-sizing: border-box;
  max-width: 1000px;
  overflow: hidden; /* keep everything inside the card */
}
.product-detail {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px); /* left gallery, right info */
  gap: 24px;
  align-items: start;
}
.product-detail .gallery { width: 100%; }
.product-detail .info { max-width: 520px; }

/* Gallery visuals: ensure scaling inside card */
#mainImage {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border: 1px solid #ddd;
  display: block;
}
.thumbnails { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.thumbnails .thumb { width: 78px; height: 60px; object-fit: cover; border: 1px solid #ddd; cursor: pointer; }

/* Info area */
.add-to-cart-form { 
	margin-top: 22px; 
	display: flex; 
	gap: 18px;
	flex-direction: column;
}

.add-to-cart-form input[type="number"] { width: 70px; padding: 6px; border-radius: 10px; }

/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* Simple button styling kept consistent with existing UI */
.btn.btn-primary { background-color: #007bff; color:white; border: none; padding: 10px 16px; border-radius: 10px; cursor: pointer; }

/* Description moved to bottom; keep spacing clear */
.description { margin-top: 18px; padding-top: 12px; border-top: 1px solid #f0f0f0; }

.description h2 { margin-bottom: 8px; font-size: 1.5rem; }

.info h1 { font-size: 38px; margin-bottom: 18px; }
.info h2 { font-size: 28px; margin-bottom: 2px; }
.info h3 { font-size: 14px; font-weight: 100; }

.price { font-size: 24px; color: var(--color-secondary); margin-top: 28px; font-weight: bold; }

/* Responsive: stack on small screens and keep within card */
@media (max-width: 1024px) {
  .product-detail { grid-template-columns: 1fr; }
  .auth-card { padding: 16px; }
}
@media (max-width: 600px) {
  .add-to-cart-form { flex-direction: column; align-items: stretch; }
}

.auth-card:hover {
	transform: none;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}