/* ========== PAGE CONTAINER ========== */

.product-page-container {
  max-width: 56rem; /* max-w-4xl */
  margin-left: auto;
  margin-right: auto; /* mx-auto */
  padding-left: 2rem;
  padding-right: 2rem; /* px-8 */
  padding-top: 6rem;
  padding-bottom: 6rem; /* py-24 */
}

/* ========== GRID LAYOUT ========== */

.product-layout {
  display: grid;
  grid-template-columns: repeat(1, 1fr); /* mobile first */
  gap: 1.5rem; /* gap-6 */
}

/* Tablet / Desktop */
@media (min-width: 768px) {
  .product-layout {
    grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
  }
}

/* ========== IMAGE COLUMN ========== */

.product-image-column {
  grid-column: span 1;
  border-radius: 0.75rem; /* rounded-xl */
}

@media (min-width: 768px) {
  .product-image-column {
    grid-column: span 2; /* col-span-2 */
  }
}

.product-main-image {
  width: 100%; /* w-full */
  height: auto; /* h-auto */
  border-radius: 0.75rem; /* rounded-xl */
}

/* ========== INFO COLUMN ========== */

.product-info-column {
  padding-top: 2rem; /* mobile spacing */
}

@media (min-width: 768px) {
  .product-info-column {
    padding-top: 8rem; /* pt-32 */
  }
}

/* ========== TEXT ========== */

.text-grey-400 {
  color: #9ca3af; /* Tailwind gray-400 */
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pt-8 {
  padding-top: 2rem;
}

.hover-underline:hover {
  text-decoration: underline;
}

/* ========== VARIATION SELECTION ========== */

/* Color options wrapper */
.color-row {
  margin-bottom: 0.5rem; /* mb-2 */
}

/* Individual color circle */
.color-swatch {
  display: inline-block;
  padding: 0.75rem; /* p-3 */
  border-radius: 9999px; /* rounded-full */
  margin: 0.125rem; /* m-0.5 */
  border: 2px solid #e5e7eb; /* default border */
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.color-swatch:hover {
  border-color: #3b82f6; /* hover:border-blue-500 */
}

.color-swatch.active {
  border-color: #3b82f6; /* selected state */
}

/* Size grid */
.size-grid {
  margin-bottom: 0.5rem; /* mb-2 */
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile */
  gap: 0.25rem; /* gap-1 */
}

@media (min-width: 640px) {
  .size-grid {
    grid-template-columns: repeat(4, 1fr); /* grid-cols-4 */
  }
}

.size-box {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem; /* py-2 */
  text-align: center;
  border-radius: 0.5rem; /* rounded-lg */
  margin: 0.125rem; /* m-0.5 */
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.size-box:hover {
  border-color: #3b82f6;
}

.size-box.active {
  border-color: #3b82f6;
}

/* Quality grid */
.quality-grid {
  margin-bottom: 1rem; /* mb-4 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
}

.quality-box {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  margin: 0.125rem;
  border: 2px solid #e5e7eb;
  transition: border-color 0.2s ease;
}

.quality-box:hover {
  border-color: #3b82f6;
}

/* ========== BUTTON ========== */

.add-to-cart-btn {
  display: block;
  width: 100%;
  border-radius: 9999px;
  background-color: black;
  color: white;
  text-align: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.add-to-cart-btn:hover {
  background-color: #737373; /* neutral-500 */
}