/**
 * Peptide Product Grid - Styling
 * 
 * This plugin uses Tailwind CSS utility classes from the parent theme.
 * Grid layout uses explicit CSS with media queries to ensure proper responsive behavior.
 */

/* ===== GRID LAYOUT ===== */
.peptide-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	width: 100%;
	box-sizing: border-box;
}

/* Tablet: 3 columns at 768px+ */
@media (min-width: 768px) {
	.peptide-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

/* Desktop: 4 columns at 1024px+ */
@media (min-width: 1024px) {
	.peptide-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

/* ===== VARIATION BUTTON ===== */
.peptide-selected-variation {
	display: none;
}

.peptide-variation-option.active {
	background-color: var(--color-primary, #3A1C1D);
	color: #FFFDF8;
	border-color: var(--color-primary, #3A1C1D);
}

/* ===== BUTTON ===== */
.peptide-add-to-cart-btn {
	width: 100%;
}

/* ===== NOTIFICATIONS ===== */
.notification-toast {
	word-break: break-word;
}